.aurora {
  background:
    radial-gradient(55% 75% at 0% 35%, rgba(249, 200, 140, .55), transparent 62%),
    radial-gradient(45% 65% at 55% 25%, rgba(185, 185, 245, .55), transparent 62%),
    radial-gradient(45% 75% at 100% 35%, rgba(140, 200, 250, .6), transparent 62%),
    #fff;
}

.aurora-soft {
  background:
    radial-gradient(50% 90% at 0% 100%, rgba(250, 215, 165, .45), transparent 65%),
    radial-gradient(45% 80% at 60% 100%, rgba(210, 205, 245, .45), transparent 65%),
    radial-gradient(45% 90% at 100% 100%, rgba(170, 215, 250, .55), transparent 65%),
    #fff;
}

.glow-blue {
  background:
    radial-gradient(70% 60% at 85% 85%, rgba(150, 190, 250, .55), transparent 70%),
    radial-gradient(60% 60% at 90% 10%, rgba(200, 220, 252, .5), transparent 70%),
    #F4F7FD;
}

/* Mobile "Two ways" section: pale top behind the photo, blue glow under the copy, soft white edges. */
@media (max-width: 1023px) {
  .glow-blue--stack {
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(248, 250, 254, .95), transparent 70%),
      radial-gradient(85% 60% at 55% 72%, rgba(170, 200, 248, .75), transparent 72%),
      #EEF3FC;
    box-shadow: inset 0 0 40px 18px rgba(255, 255, 255, .85);
  }
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 120px), transparent);
}

@media (max-width: 1023px) {
  .fade-right {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Statement read colouring: unread letters are Figma grey, read letters take the paragraph colour */
.reveal-word {
  white-space: nowrap;
}

.reveal-ch {
  color: #C1C0BF;
  transition: color .12s linear;
}

.reveal-ch.is-lit {
  color: inherit;
}

/* ---------- Hero background ----------
       img/hero-bg@2x.jpg = the Figma hero ribbons (frame y 64-653) with text and cards removed, rebuilt at 2x
       with vector-sharp ribbon edges. The SVG stretches it to the hero box; the rim highlights share the same
       1438x662 coordinate space so they stay locked to the ribbons while the layer moves. */
.hero-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* peach / lavender / blue wash in the ribbons' colours, so the hero is never blank while the photo loads */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%),
    linear-gradient(100deg, #FBE3C8 0%, #F1E6EF 30%, #DCDDF9 55%, #D6E6FD 80%, #DDF0FF 100%);
}

.hero-motion__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  /* Wave motion: the page script sets --hero-x/-y/-r/-s every frame so the ribbons ride a swell as one piece: they
     rise and fall on two overlapping sine waves, rock with the slope of the wave, sway a little and breathe in size.
     The ribbons only move and tilt as a whole, so their shape never changes; the water light in index.html plays
     across them on top. Zoom stays 1.22-1.26, which keeps 11% of overscan on every side, more than the largest rise
     (±3%) plus the tilt, so no edge ever shows. Without the script the ribbons rest. */
  transform: translate(var(--hero-x), var(--hero-y)) rotate(var(--hero-r)) scale(var(--hero-s));
  animation: hero-in .6s ease-out both;
  will-change: transform;
}

@property --hero-x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --hero-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --hero-r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hero-s { syntax: '<number>'; inherits: false; initial-value: 1.24; }


.hero-rims path,
.hero-sheen path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.hero-rims path {
  stroke: rgba(255, 255, 255, .72);
  stroke-width: 1px;
}

.hero-rims .hero-rims__faint {
  stroke: rgba(255, 255, 255, .35);
}

.hero-sheen path {
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-dasharray: 110 890;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  animation: hero-sheen 7s linear infinite;
}

.hero-sheen path+path {
  animation-delay: -3.5s;
  animation-duration: 9s;
}

@keyframes hero-in {
  from {
    opacity: 0;
  }
}

@keyframes hero-sheen {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-motion__layer,
  .hero-sheen path {
    animation: none;
  }

  .hero-sheen {
    display: none;
  }
}

/* Mobile: img/Hero-Bg-Mob.png (390x752) replaces the animated desktop ribbons. */
@media (max-width: 639px) {
  .hero-motion {
    background: #fff url("https://d2okq48tcg0bvb.cloudfront.net/NewDesign/img/Hero-Bg-Mob.png") center top / cover no-repeat;
  }

  .hero-motion__layer {
    display: none;
  }
}

/* World map location pins */
.map-pins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-pin {
  position: absolute;
  width: 0;
  height: 0;
}

.map-pin__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 9999px;
  background: #3B86EE;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
  cursor: pointer;
  z-index: 1;
}

.map-pin::before,
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 9999px;
  background: rgba(59, 134, 238, .22);
  animation: map-bubble 2.4s ease-out infinite;
  pointer-events: none;
}

.map-pin::after {
  animation-delay: 1.2s;
}

.map-pin:nth-child(2)::before {
  animation-delay: .6s;
}

.map-pin:nth-child(2)::after {
  animation-delay: 1.8s;
}

.map-pin:nth-child(3)::before {
  animation-delay: .3s;
}

.map-pin:nth-child(3)::after {
  animation-delay: 1.5s;
}

.map-pin:nth-child(4)::before {
  animation-delay: .9s;
}

.map-pin:nth-child(4)::after {
  animation-delay: 2.1s;
}

.map-pin__dot:focus-visible {
  outline: 2px solid #1E5BC6;
  outline-offset: 3px;
}

.map-pin__card {
  position: absolute;
  left: 0;
  bottom: 16px;
  z-index: 5;
  min-width: 120px;
  margin: 0;
  padding: 6px 18px;
  list-style: none;
  text-align: center;
  white-space: nowrap;
  background: rgba(236, 246, 255, .85);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: .8 !important;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.map-pin__card li {
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.2;
  color: #1D5FC2;
}

.map-pin__card li+li {
  border-top: 1px solid rgba(29, 95, 194, .12);
}

.map-pin:hover .map-pin__card,
.map-pin:focus-within .map-pin__card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.map-pin:hover,
.map-pin:focus-within {
  z-index: 10;
}

@media (max-width: 639px) {
  .map-pin__dot {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }

  .map-pin::before,
  .map-pin::after {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
  }

  .map-pin__card {
    min-width: 0;
    padding: 2px 10px;
    bottom: 12px;
    border-radius: 8px;
  }

  .map-pin__card li {
    padding: 3px 0;
    font-size: 11px; /* was 10px */
  }

  /* Mobile: location names are always shown (no hover on touch). Default card sits above its pin. */
  .map-pin .map-pin__card,
  .map-pin:hover .map-pin__card,
  .map-pin:focus-within .map-pin__card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .map-pin.map-pin--below .map-pin__card {
    bottom: auto;
    top: 12px;
  }

  .map-pin.map-pin--left .map-pin__card,
  .map-pin.map-pin--left:hover .map-pin__card,
  .map-pin.map-pin--left:focus-within .map-pin__card {
    left: auto;
    right: 14px;
    bottom: auto;
    top: -14px;
    transform: none;
  }
}

@keyframes map-bubble {
  0% {
    transform: scale(.4);
    opacity: .9;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin::before {
    animation: none;
    transform: scale(1);
    opacity: .6;
  }

  .map-pin::after {
    display: none;
  }
}

/* Product list: hovering (or tapping) a row expands it to show details. Logos never resize. */
.product-item {
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate;
  cursor: pointer;
  outline: none;
}

.product-item::before {
  content: "";
  position: absolute;
  inset: -1px -12px;
  z-index: -1;
  border-radius: 12px;
  background: #F7F7F5;
  opacity: 0;
  transition: opacity .5s ease;
}

.product-item.is-open::before {
  opacity: 1;
}

.product-item:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 0 2px #015AEB;
}

.product-media__panel {
  display: flex;
  align-items: center;
}

.product-media__panel img {
  flex-shrink: 0;
}

.product-details {
  grid-column: 2 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .65s var(--ease-soft);
}

.product-details__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .5s var(--ease-soft), visibility 0s linear .5s;
}

.product-details__inner> :first-child {
  margin-top: 16px;
}

.product-item.is-open .product-details {
  grid-template-rows: 1fr;
}

.product-item.is-open .product-details__inner {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease .15s, transform .65s var(--ease-soft) .1s, visibility 0s;
}

@media (min-width: 768px) {
  .product-item::before {
    inset: -1px -24px;
  }
}

@media (min-width: 1024px) {
  .product-item::before {
    inset: -1px -55px;
    border-radius: 16px;
  }

  .product-item {
    grid-template-rows: 48px auto;
  }

  .product-num {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
  }

  .product-head {
    grid-column: 3;
    grid-row: 1;
    padding-top: 4px;
  }

  .product-details {
    grid-column: 3;
    grid-row: 2;
  }

  .product-details__inner> :first-child {
    margin-top: 36px;
  }

  /* The logo spans the number + logo columns; on open it slides below the number into a white panel. */
  .product-media {
    grid-column: 1 / 3;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .product-media__panel {
    width: 388px;
    min-height: 48px;
    margin-top: 0;
    padding-left: 80px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0);
    transition: width .65s var(--ease-soft), min-height .65s var(--ease-soft), margin-top .65s var(--ease-soft),
      padding-left .65s var(--ease-soft), background-color .5s ease;
  }

  .product-item.is-open .product-media__panel {
    width: 320px;
    min-height: 160px;
    margin-top: 84px;
    padding-left: calc((320px - var(--logo-w)) / 2);
    /* background: #fff; */
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-item::before,
  .product-details,
  .product-details__inner,
  .product-media__panel {
    transition: none;
  }
}

/* ---------- Enterprise Applications page ---------- */
/* Hero: warm-to-cool wash across the top that fades to white (mobile stays white, per Figma). */
@media (min-width: 768px) {
  .ea-hero-bg {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 45%, #fff 86%),
      linear-gradient(90deg, #FEE9CD 0%, #F1E3EC 30%, #DBDCF9 50%, #D9E9FD 75%, #DDF2FF 100%);
  }
}

/* Hero photo: 45deg chamfers top-left and bottom-right (104px on the 436x460 Figma frame). */
.ea-hero-shape {
  border-radius: 8px;
  clip-path: polygon(23.85% 0, 100% 0, 100% 77.2%, 75.9% 100%, 0 100%, 0 22.6%);
}

/* Lifecycle: violet stage rail and accelerator cards */
@media (min-width: 1024px) {
  .ea-stage-nav {
    background: #A5A4FA;
    box-shadow: inset 0 0 26px 8px #CFCFFD;
  }

  .ea-stage-nav [aria-selected="true"] {
    background: linear-gradient(180deg, #2C2E33, #1F2124);
    box-shadow: 0 6px 14px rgba(31, 33, 36, .22);
  }

  .ea-stage {
    display: grid;
  }

  .ea-stage:not(.is-active) {
    display: none;
  }

  .ea-stage.is-active {
    animation: ea-stage-in .35s ease both;
  }
}

@keyframes ea-stage-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ea-accel {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background:
    radial-gradient(70% 55% at 45% 105%, rgba(253, 222, 178, .7), transparent 70%),
    radial-gradient(55% 60% at 105% 70%, rgba(214, 208, 252, .6), transparent 70%),
    radial-gradient(45% 45% at 100% 35%, rgba(205, 225, 253, .5), transparent 70%),
    linear-gradient(180deg, #FBFAFF, #FFF8EF);
}

.ea-accel__name {
  margin-top: 2px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #1F2124;
}

.ea-accel__copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 16px;
  color: #5B6472;
}

.ea-accel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 12px;
}

.ea-accel__value {
  font-size: 16px;
  line-height: 22px;
  color: #1F2124;
}

.ea-accel__unit {
  font-size: 12px;
  line-height: 16px;
  color: #3F4250;
}

.ea-accel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border-radius: 4px;
  font-size: 14px;
  color: #015AEB;
  transition: color .2s ease;
}

.ea-accel__link svg {
  transition: transform .2s ease;
}

.ea-accel__link:hover {
  color: #0047BB;
}

.ea-accel__link:hover svg {
  transform: translateX(2px);
}

.ea-accel__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #015AEB;
}

@media (min-width: 1024px) {
  .ea-accel {
    margin-top: 0;
    padding: 42px 24px 40px;
    border-radius: 6px;
    background:
      radial-gradient(45% 30% at 40% 104%, rgba(253, 222, 178, .55), transparent 70%),
      radial-gradient(35% 45% at 104% 78%, rgba(214, 208, 252, .6), transparent 70%),
      radial-gradient(30% 35% at 100% 42%, rgba(205, 225, 253, .55), transparent 70%),
      #fff;
  }

  .ea-accel__name {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
  }

  .ea-accel__copy {
    margin-top: 8px;
    font-size: 13px;
    line-height: 19px;
  }

  .ea-accel__stats {
    margin-top: 56px;
  }

  .ea-accel__value {
    font-size: 20px;
    line-height: 24px;
  }

  .ea-accel__unit {
    font-size: 12px;
    line-height: 15px;
    color: #1F2124;
  }

  .ea-accel__link {
    margin-top: 60px;
  }
}

/* "Why organizations trust QCS" cards. Mobile: title over a tinted image panel, copy below.
       Desktop: 360px tiles; the copy replaces the illustration on hover / keyboard focus. */
.ea-why {
  display: block;
  height: 100%;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: #F8F8F7;
  outline: none;
}

.ea-why:focus-visible {
  box-shadow: 0 0 0 2px #015AEB;
}

.ea-why__media {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
  background: #FAFAFA;
}

.ea-why__title {
  position: relative;
  z-index: 1;
  max-width: 150px;
  padding: 10px 0 0 8px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  color: #1F2124;
}

.ea-why__media img {
  position: absolute;
  right: -24px;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.ea-why__copy {
  margin-top: 16px;
  font-size: 13px;
  line-height: 15px;
  color: #5B6472;
}

@media (min-width: 1024px) {
  .ea-why {
    --ease-soft: cubic-bezier(.22, 1, .36, 1);
    position: relative;
    isolation: isolate;
    height: 360px;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: #FAFAFA;
  }

  /* Hover surface: pale glow at the top, deepening to blue with darker lower corners. Fading this layer in
         (gradients can't be transitioned directly) gives a smooth colour change. */
  .ea-why::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(55% 18% at 50% 0%, rgba(250, 250, 250, .95), rgba(250, 250, 250, 0)),
      radial-gradient(125% 80% at 50% 30%, rgba(28, 66, 140, 0) 55%, rgba(28, 66, 140, .72) 100%),
      linear-gradient(180deg, #E9EEF9 0%, #DDE7F8 12%, #C5D9F8 32%, #9EBFF3 50%, #80ABF1 66%, #6A9CF0 84%, #5A8FE6 100%);
    opacity: 0;
    transform: scale(1.06);
    transform-origin: 50% 0;
    transition: opacity .5s ease, transform .8s var(--ease-soft);
  }

  .ea-why__media {
    position: static;
    height: 100%;
    border-radius: 0;
    background: none;
  }

  .ea-why__title {
    z-index: 2;
    max-width: none;
    padding: 28px 32px 0;
    font-size: 18px;
    line-height: 24px;
    transition: color .4s ease;
  }

  .ea-why__media img {
    right: auto;
    left: 0;
    z-index: 1;
    height: auto;
    width: 100%;
    /* Feather the edges so the illustration's flat backdrop never shows as a box over the blue. */
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 65%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 50%, #000 65%, transparent 100%);
    transition: opacity .5s ease, transform .8s var(--ease-soft), filter .5s ease;
  }

  .ea-why__copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    margin: 0;
    padding: 0 32px 32px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .35s ease, transform .6s var(--ease-soft);
  }

  .ea-why:hover::before,
  .ea-why:focus-visible::before {
    opacity: 1;
    transform: none;
  }

  .ea-why:hover .ea-why__title,
  .ea-why:focus-visible .ea-why__title {
    color: #113EA6;
  }

  /* The illustration drifts up and dissolves into the blue, leaving a faint ghost behind the copy. */
  .ea-why:hover .ea-why__media img,
  .ea-why:focus-visible .ea-why__media img {
    opacity: .55;
    transform: translateY(-78px) scale(.9);
    filter: saturate(.6);
    mix-blend-mode: multiply;
  }

  .ea-why:hover .ea-why__copy,
  .ea-why:focus-visible .ea-why__copy {
    opacity: 1;
    transform: none;
    transition-delay: .12s, .12s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ea-stage.is-active {
    animation: none;
  }

  .ea-why::before,
  .ea-why__title,
  .ea-why__media img,
  .ea-why__copy {
    transition: none;
  }

  .ea-why::before {
    transform: none;
  }
}

/* ---------- Enterprise Integration page ---------- */
/* The hero reuses .ea-hero-bg / .ea-hero-shape from the Enterprise Applications page. */

/* "By the numbers": white fading into a blurred blue band with a hard bottom edge (Figma) */
.ei-numbers {
  background:
    /* soft white fade at the far left/right edges */
    linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0) 98.5%, rgba(255, 255, 255, .45)),
    /* the cloud lightens again just above the hard bottom edge */
    linear-gradient(180deg, rgba(242, 247, 254, 0) 80%, rgba(242, 247, 254, .9) 100%),
    /* blurred blue cloud, deepest under the 1st/2nd and 4th/5th stats, cut off by a hard bottom edge */
    radial-gradient(26% 50% at 22% 76%, #E8F0FD, rgba(232, 240, 253, 0)),
    radial-gradient(26% 50% at 79% 76%, #E8F0FD, rgba(232, 240, 253, 0)),
    radial-gradient(14% 56% at 100% 70%, #E8F0FD, rgba(232, 240, 253, 0)),
    radial-gradient(10% 55% at 0% 72%, #EDF3FD, rgba(237, 243, 253, 0)),
    linear-gradient(180deg, #fff 42%, #F4F8FE 64%, #EEF3FE 83%, #F2F7FE 100%);
}

/* Integration areas (01-03) */
.ei-area__head {
  display: grid;
}

.ei-area__num {
  font-size: 12px;
  letter-spacing: .18em;
  color: #1F2124;
}

.ei-area__title {
  margin-top: 4px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -.03em;
  color: #1F2124;
}

/* tablet step: previously held the mobile size until 1024px, then jumped */
@media (min-width: 768px) {
  .ei-area__title {
    font-size: 36px;
    line-height: 44px;
  }
}

.ei-area__title em {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
}

.ei-area__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: #5B6472;
}

.ei-area__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 20px;
  color: #946417;
}

.ei-area__tags li {
  padding: 2px 10px;
  border-radius: 9999px;
  background: #FEDFB0;
}

.ei-area__card {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  background: #F8F8F7;
}

.ei-area__img {
  width: 100%;
  aspect-ratio: 480 / 234;
  object-fit: cover;
  border-radius: 6px;
}

.ei-area__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.ei-area__body--diagram {
  gap: 0;
}

.ei-area__body--diagram .ei-chips {
  margin-top: 2px;
}

.ei-area__copy {
  font-size: 13px;
  line-height: 15px;
  color: #5B6472;
}

.ei-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: #8A909B;
}

.ei-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 2px;
}

.ei-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 21px;
  padding: 0 10px;
  background: #F2EEE4;
  font-size: 13px;
  color: #1F2124;
  white-space: nowrap;
}

.ei-swap {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei-chips--pair {
  gap: 8px 20px;
}

.ei-chips--pair li {
  min-width: 140px;
  justify-content: center;
}

/* ERP -> target systems connector diagram */
.ei-flow {
  --line: #D9DBDF;
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.ei-flow__source {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 21px;
  margin-right: 30px;
  padding: 0 10px;
  background: #F5F0E5;
  font-size: 13px;
  color: #1F2124;
}

.ei-flow__source::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 30px;
  border-top: 1.5px solid var(--line);
}

.ei-flow__source::before {
  content: "";
  position: absolute;
  left: calc(100% + 3px);
  top: 50%;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

.ei-flow__targets {
  position: relative;
  display: grid;
  flex: 1;
  gap: 5px;
  max-width: 282px;
  padding-left: 43px;
}

.ei-flow__targets::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-left: 1.5px solid var(--line);
}

.ei-flow__targets li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  background: #F0F2F7;
  font-size: 13px;
  color: #1F2124;
}

.ei-flow__targets li::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 43px;
  border-top: 1.5px solid var(--line);
}

.ei-flow__targets li::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 1024px) {
  .ei-area__head {
    grid-template-columns: minmax(0, 1fr) 362px;
    column-gap: 50px;
  }

  .ei-area__head>div {
    grid-column: 1;
    grid-row: 1;
  }

  .ei-area__tags {
    grid-column: 1;
    grid-row: 2;
    margin-top: 10px;
    gap: 8px 6px;
    font-size: 12.5px;
  }

  .ei-area__desc {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0;
  }

  .ei-area__title {
    margin-top: 10px;
    font-size: 42px;
    line-height: 52px;
    letter-spacing: -.04em;
  }

  .ei-area__card {
    grid-template-columns: 480px minmax(0, 1fr);
    column-gap: 91px;
    margin-top: 40px;
    padding: 40px 50px;
    border-radius: 8px;
  }

  .ei-area__img {
    border-radius: 8px;
  }

  .ei-area__body {
    padding: 9px 0 0;
  }

  .ei-area__body--diagram {
    justify-content: flex-start;
    gap: 0;
    padding-top: 4px;
  }

  .ei-area__copy {
    max-width: 500px;
    font-size: 14px;
    line-height: 20px;
    color: #2E3440;
  }

  .ei-chips {
    gap: 12px 8px;
    margin-top: 7px;
  }

  .ei-chips li {
    height: 32px;
    padding: 0 16px;
    gap: 8px;
    font-size: 14px;
  }

  .ei-swap {
    width: 16px;
    height: 16px;
  }

  .ei-chips--pair li {
    min-width: 177px;
  }

  .ei-flow__source {
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
  }

  .ei-flow__targets {
    gap: 8px;
    padding-left: 44px;
  }

  .ei-flow__targets::before {
    top: 14px;
    bottom: 14px;
  }

  .ei-flow__targets li {
    height: 28px;
    font-size: 14px;
  }

  .ei-flow__targets li::before {
    width: 44px;
  }
}

/* Capability cards: glass artwork bleeds in from the right */
.ei-cap {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 278px;
  overflow: hidden;
  padding: 16px;
  background: #F8F8F7;
}

.ei-cap__art {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
  transform-origin: 100% 50%;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.ei-cap:hover .ei-cap__art {
  transform: scale(1.06);
}

.ei-cap__title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: #1F2124;
}

.ei-cap__copy {
  max-width: 205px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 15px;
  color: #5B6472;
}

.ei-cap__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 220px;
  margin-top: auto;
  padding-top: 28px;
  font-size: 12px;
  color: #1F2124;
}

.ei-cap__tags li {
  padding: 1px 10px;
  border-radius: 9999px;
  background: #fff;
}

@media (min-width: 1024px) {
  .ei-cap {
    padding: 40px;
  }

  .ei-cap__title {
    font-size: 20px;
    line-height: 24px;
  }

  .ei-cap__copy {
    max-width: 345px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .ei-cap__tags {
    max-width: 410px;
    gap: 5px 6px;
    padding-top: 40px;
    font-size: 11px;
    line-height: 16px;
  }
}

/* Controls: an endless marquee runs behind a deck of photo cards (a swipeable row on small screens) */
.ei-marquee {
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  line-height: 28px;
  color: #AEADF9;
}

.ei-marquee__track {
  display: inline-flex;
  animation: ei-marquee 15s linear infinite;
}

.ei-marquee__track>span {
  padding-right: .35em;
}

.ei-marquee em {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
}

.ei-marquee i {
  padding: 0 .3em;
  font-style: normal;
}

@keyframes ei-marquee {
  to {
    transform: translateX(-50%);
  }
}

.ei-deck {
  position: relative;
  margin-top: 20px;
}

.ei-deck__list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px;
}

.ei-deck__card {
  flex: none;
  width: 312px;
  padding: 16px;
  border-radius: 12px;
  background: #F7F7F5;
  scroll-snap-align: start;
  scroll-margin-left: 20px;
}

.ei-deck__card img {
  width: 100%;
  aspect-ratio: 280 / 268;
  object-fit: cover;
  border-radius: 8px;
}

.ei-deck__card p {
  margin-top: 20px;
  font-size: 13px;
  line-height: 15px;
  color: #5B6472;
}

@media (min-width: 768px) {
  .ei-deck__list {
    padding: 0 32px;
  }

  .ei-deck__card {
    scroll-margin-left: 32px;
  }
}

@media (min-width: 1024px) {
  .ei-controls {
    position: relative;
    height: 702px;
    overflow: hidden;
    /* White panel with a soft lavender glow rising from every edge (deepest in the corners). */
    background: #fff;
    box-shadow: inset 0 0 110px 0 #ECECFD;
  }

  .ei-marquee {
    position: absolute;
    left: 0;
    right: 0;
    /* top: 386px; */
    font-size: 40px;
    line-height: 50px;
  }

  .ei-deck {
    position: absolute;
    left: 50%;
    top: 152px;
    width: 390px;
    height: 460px;
    margin: 0 0 0 -195px;
  }

  .ei-deck__list {
    display: block;
    height: 100%;
    overflow: visible;
    padding: 0;
  }

  .ei-deck__card {
    position: absolute;
    inset: 0 0 auto;
    width: 390px;
    padding: 18px 22px 52px;
    border-radius: 6px;
    background: #F6F6F4;
    box-shadow: 0 1px 2px rgba(31, 33, 36, .04), 0 12px 30px rgba(31, 33, 36, .06);
  }

  .ei-deck__card img {
    aspect-ratio: 340 / 268;
    border-radius: 20px;
  }

  .ei-deck__card p {
    margin-top: 24px;
    font-size: 16px;
    line-height: 20px;
    color: #1F2124;
  }

  .ei-deck__card[data-pos="0"] {
    z-index: 6;
    transform: rotate(3deg);
  }

  .ei-deck__card[data-pos="1"] {
    z-index: 5;
    transform: translate(12px, 22px) rotate(-4deg);
  }

  .ei-deck__card[data-pos="2"] {
    z-index: 4;
    transform: translate(26px, 46px) rotate(5deg);
  }

  .ei-deck__card[data-pos="3"] {
    z-index: 3;
    transform: translate(20px, 34px) rotate(-2deg);
  }

  .ei-deck__card[data-pos="4"] {
    z-index: 2;
    transform: translate(4px, 14px) rotate(6deg);
  }

  .ei-deck__card[data-pos="5"] {
    z-index: 1;
    transform: translate(30px, 40px) rotate(-6deg);
  }

  /* Grid columns sit with equal gaps between them and at both sides of the section (space-evenly): cards are
     273px wide once scaled, so a column step of (section width + 273px) / 4 does it. Capped at the 1280px page
     width so very wide screens keep the grid together. Rows are spaced evenly in the area below the marquee. */
  .ei-deck { --gx: calc((min(100vw, 1280px) + 273px) / 4); }
  @supports (width: 1cqw) {
    .ei-controls { container-type: inline-size; }
    .ei-deck { --gx: calc((min(100cqw, 1280px) + 273px) / 4); }
  }

  /* Scroll-driven, both ways (js toggles .is-spread): entering the section fans the stack out into a 3 x 2 grid,
     leaving it gathers the cards back into the stack. Transitions (not keyframes) so either move can reverse
     mid-way without a jump; the stagger runs in reading order going out and the reverse order coming back. */
  .ei-deck__card { --i: 0; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) calc((5 - var(--i)) * 80ms); }
  .ei-deck.is-spread .ei-deck__card { transition-delay: calc(var(--i) * 120ms); }
  .ei-deck__card[data-pos="1"] { --i: 0; } .ei-deck__card[data-pos="0"] { --i: 1; } .ei-deck__card[data-pos="2"] { --i: 2; }
  .ei-deck__card[data-pos="3"] { --i: 3; } .ei-deck__card[data-pos="4"] { --i: 4; } .ei-deck__card[data-pos="5"] { --i: 5; }
  .ei-deck.is-spread .ei-deck__card[data-pos="1"] { transform: translate(calc(-1 * var(--gx)), -135px) rotate(-2deg) scale(0.7); }
  .ei-deck.is-spread .ei-deck__card[data-pos="0"] { transform: translate(0px, -135px) rotate(1deg) scale(0.7); }
  .ei-deck.is-spread .ei-deck__card[data-pos="2"] { transform: translate(var(--gx), -135px) rotate(2deg) scale(0.7); }
  .ei-deck.is-spread .ei-deck__card[data-pos="3"] { transform: translate(calc(-1 * var(--gx)), 180px) rotate(1deg) scale(0.7); }
  .ei-deck.is-spread .ei-deck__card[data-pos="4"] { transform: translate(0px, 180px) rotate(-1deg) scale(0.7); }
  .ei-deck.is-spread .ei-deck__card[data-pos="5"] { transform: translate(var(--gx), 180px) rotate(-2deg) scale(0.7); }
  @media (prefers-reduced-motion: reduce) { .ei-deck__card, .ei-deck.is-spread .ei-deck__card { transition: none; } }
}


/* Integration patterns: requirement and approach cards.
       Mobile: matched pairs in a list. Desktop: the cards start scattered around the heading; two seconds after the
       section comes into view, JS adds .is-sorted and every card glides, row by row, into a
       "Requirement -> Integration approach" table (Figma frame 2) while the heading slides to the top. */
.ei-patterns {
  padding: 0 20px;
}

.ei-patterns__hint {
  display: none;
}

.ei-pairs {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

.ei-pairs__head {
  display: none;
}

.ei-pair {
  padding: 10px 16px 11px;
  border: 1px solid #C9D8EE;
  border-radius: 8px;
  background: #E1EBF8;
  font-size: 14px;
  line-height: 21px;
}

.ei-req {
  color: #5B6472;
}

.ei-appr {
  color: #1F5FC4;
}

.ei-appr::before {
  content: "\21B3\00a0";
}

.ei-req span,
.ei-appr span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ei-req:focus,
.ei-appr:focus {
  outline: none;
}

@media (min-width: 768px) {
  .ei-patterns {
    padding: 0 32px;
  }

  .ei-pairs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .ei-patterns {
    --sort-ease: cubic-bezier(.65, 0, .25, 1);
    position: relative;
    height: 850px;
    padding: 346px 0 0;
    background: #FCFBF8;
    text-align: center;
  }

  .ei-patterns__intro {
    position: relative;
    z-index: 1;
    transition: transform 1s var(--sort-ease);
  }

  .ei-patterns__hint {
    display: block;
    margin-top: 30px;
    font-size: 12px;
    color: #6B7280;
    transition: opacity .3s ease;
  }

  .ei-patterns__hint span {
    display: inline-block;
    animation: ei-nudge 1.8s ease-in-out infinite;
  }

  .ei-pairs {
    position: absolute;
    inset: 0;
    display: block;
    max-width: 1280px;
    margin: 0 auto;
  }

  .ei-pair {
    display: contents;
  }

  /* Scattered state (Figma frame 1) */
  .ei-req,
  .ei-appr {
    --d: calc(var(--row) * 70ms);
    position: absolute;
    left: calc(var(--x) / 1280 * 100%);
    top: calc(var(--y) * 1px);
    width: calc(268 / 1280 * 100%);
    min-height: 86px;
    padding: 18px 20px 14px;
    border: 1px solid;
    border-radius: 4px;
    text-align: left;
    font-size: 16px;
    line-height: 18px;
    transform: rotate(var(--r));
    box-shadow: 0 6px 18px rgba(80, 70, 40, .06);
    transition:
      left 1s var(--sort-ease) var(--d), top 1s var(--sort-ease) var(--d), width 1s var(--sort-ease) var(--d),
      min-height 1s var(--sort-ease) var(--d), padding 1s var(--sort-ease) var(--d),
      transform 1s var(--sort-ease) var(--d), border-radius 1s ease var(--d),
      opacity .35s ease, box-shadow .35s ease, border-color .35s ease;
  }

  .ei-appr {
    --d: calc(var(--row) * 70ms + 50ms);
  }

  .ei-req {
    border-color: #E5DCCB;
    background: #F1EBE0;
    color: #3A3B3E;
  }

  .ei-appr {
    border-color: #C8DAF1;
    background: #DFEAF8;
    color: #2D4566;
  }

  .ei-req span,
  .ei-appr span {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-height: 14px;
    margin-bottom: 6px;
    overflow: hidden;
    clip: auto;
    font-size: 11px; /* was 9px: below legible size */
    line-height: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: max-height .6s var(--sort-ease) var(--d), margin .6s var(--sort-ease) var(--d), opacity .3s ease var(--d);
  }

  .ei-req span {
    color: #8E7F69;
  }

  .ei-appr span {
    color: #5F7290;
  }

  /* Arrow between the two columns; only shown once sorted */
  .ei-appr::before {
    content: "";
    position: absolute;
    left: -44px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F9CCB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .5s var(--sort-ease);
  }

  .ei-pairs__head {
    display: block;
    position: absolute;
    top: 248px;
    font-size: 11px; /* was 9px */
    line-height: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .5s var(--sort-ease);
  }

  .ei-pairs__head--req {
    left: calc(89 / 1280 * 100% + 19px);
    color: #8E7F69;
  }

  .ei-pairs__head--appr {
    left: calc(675 / 1280 * 100% + 19px);
    color: #5F7290;
  }

  /* Pointing at either card of a pair lifts both (shadow + tinted border); the other cards stay fully opaque */
  .ei-pair:hover .ei-req,
  .ei-pair:hover .ei-appr,
  .ei-pairs .ei-pair:focus-within .ei-req,
  .ei-pairs .ei-pair:focus-within .ei-appr {
    z-index: 2;
    opacity: 1;
    box-shadow: 0 14px 34px rgba(45, 69, 102, .16);
  }

  .ei-pair:hover .ei-req,
  .ei-pair:focus-within .ei-req {
    border-color: #D2B98F;
  }

  .ei-pair:hover .ei-appr,
  .ei-pair:focus-within .ei-appr {
    border-color: #7FA6E6;
  }

  .ei-req:focus-visible,
  .ei-appr:focus-visible {
    outline: 2px solid #015AEB;
    outline-offset: 2px;
  }

  /* Sorted state (Figma frame 2): 513px columns, 60px rows on a 75px pitch, arrow centred in the gutter */
  .ei-patterns.is-sorted .ei-patterns__intro {
    transform: translateY(-282px);
  }

  .ei-patterns.is-sorted .ei-patterns__hint {
    opacity: 0;
  }

  .is-sorted .ei-req,
  .is-sorted .ei-appr {
    top: calc(268px + var(--row) * 75px);
    width: calc(513 / 1280 * 100%);
    min-height: 60px;
    padding: 20px 19px 0;
    border-radius: 6px;
    transform: none;
    box-shadow: 0 1px 2px rgba(80, 70, 40, .04);
  }

  .is-sorted .ei-req {
    left: calc(89 / 1280 * 100%);
  }

  .is-sorted .ei-appr {
    left: calc(675 / 1280 * 100%);
  }

  .is-sorted .ei-req span,
  .is-sorted .ei-appr span {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
  }

  .is-sorted .ei-appr::before {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) + .75s);
  }

  .is-sorted .ei-pairs__head {
    opacity: 1;
    transform: none;
    transition-delay: .6s;
  }

  .is-sorted .ei-pair:hover .ei-req,
  .is-sorted .ei-pair:hover .ei-appr,
  .is-sorted .ei-pair:focus-within .ei-req,
  .is-sorted .ei-pair:focus-within .ei-appr {
    box-shadow: 0 8px 22px rgba(45, 69, 102, .12);
  }
}

@keyframes ei-nudge {
  50% {
    transform: translateY(-3px);
  }
}

/* Steppers (business process flow / modernization options) */
.ei-flowband {
  padding-bottom: 36px;
  background: linear-gradient(180deg, #fff 55%, #F1F0FE 100%);
}

.ei-steps {
  --accent: #7371F7;
  --halo: #E7E7FE;
  --step-ms: 2000ms;
  margin-top: 26px;
}

.ei-steps--blue {
  --accent: #3185ED;
  --halo: #E3EEFD;
}

.ei-steps__list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ei-steps__list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 42px;
  bottom: 42px;
  width: 2px;
  border-radius: 2px;
  background: #E3E4E7;
}

.ei-steps__list button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 84px;
  padding-left: 56px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: #A9ADB5;
  transition: color .45s ease, font-size .45s cubic-bezier(.22, 1, .36, 1);
}

.ei-steps__list button svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei-steps__list button::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 9999px;
  background: #EDEEF0;
  transition: background-color .45s ease, box-shadow .45s ease, transform .45s ease;
}

.ei-steps__list button:hover {
  color: #6B7280;
}

.ei-steps__list button[aria-selected="true"] {
  font-size: 16px;
  color: var(--accent);
}

.ei-steps__list button[aria-selected="true"]::before {
  background: var(--accent);
  box-shadow: 0 0 0 7px var(--halo);
  transform: scale(1.15);
}

.ei-steps__list button:focus-visible {
  outline: none;
}

.ei-steps__list button:focus-visible::before {
  box-shadow: 0 0 0 7px var(--halo), 0 0 0 9px #015AEB;
}

.ei-steps__desc {
  min-height: 40px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #5B6472;
  transition: opacity .25s ease;
}

.ei-steps__desc.is-fading {
  opacity: 0;
}

@media (min-width: 1024px) {
  .ei-flowband {
    padding-bottom: 60px;
    background: linear-gradient(180deg, #fff 64%, #F0EFFE 100%);
  }

  .ei-steps {
    margin-top: 74px;
  }

  /* Columns are 189px (Figma) but may shrink so the six steps always fit the content box (≈960px at 1024). */
  .ei-steps__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 189px));
  }

  .ei-steps__list::before {
    left: 8px;
    top: 0;
    bottom: auto;
    width: min(945px, calc(100% * 5 / 6));
    height: 2px;
    margin-top: -1px;
  }

  /* Inactive 16px, active 20px (Figma); the row keeps a fixed height so the swap never shifts the page. */
  .ei-steps__list button {
    align-items: flex-start;
    gap: 10px;
    height: 84px;
    padding: 36px 0 0;
    font-size: 16px;
    line-height: 24px;
  }

  .ei-steps__list button svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  .ei-steps__list button[aria-selected="true"] {
    font-size: 20px;
  }

  .ei-steps__list button::before {
    left: 1px;
    top: 0;
  }

  .ei-steps__desc {
    max-width: 640px;
    margin-top: 22px;
  }
}

/* Small laptops: narrower step columns, so labels step down one size to stay within two lines of the fixed row. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ei-steps__list button {
    height: 100px; /* 36px top padding + up to three 20px lines; still fixed so the active swap never shifts the page */
    padding-right: 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .ei-steps__list button[aria-selected="true"] {
    font-size: 17px;
  }
}

/* Modernization: decorative ribbon wave behind the stepper and the lifecycle header */
.ei-modern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clips like hidden but is not a scroll container, so the lifecycle wheel can stay sticky */
}

/* img/Pattern-Integration-modernization.svg (1280x501) runs edge to edge behind the modernization stepper and the
       lifecycle heading. It hangs off the stepper so it stays aligned however the copy above wraps. */
.ei-steps--blue {
  position: relative;
}

.ei-steps--blue::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  bottom: -33px;
  width: 100vw;
  aspect-ratio: 1280 / 501;
  background: url("..https://d2okq48tcg0bvb.cloudfront.net/NewDesign/img/Pattern-Integration-modernization.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .ei-steps--blue::after {
    top: -115px;
    bottom: auto;
  }
}

/* Lifecycle wheel. Items sit on a circle; JS sets each item's angle (--a) so the wheel turns to the active stage.
       Mobile: the circle hangs above with the active stage at its lowest point. Desktop: it sits to the left with the
       active stage at 3 o'clock and the labels running outward. */
.ei-wheel {
  --r: 290px;
  --orient: -90deg;
  --tx: -50%;
  margin-top: 30px;
}

.ei-wheel__stage {
  position: relative;
  height: 130px;
  margin: 0 -20px;
  overflow: hidden;
}

.ei-wheel__items {
  position: absolute;
  left: 50%;
  top: calc(80px - var(--r));
  width: 0;
  height: 0;
}

.ei-wheel__items>li {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(var(--a, 90deg)) translateX(var(--r)) rotate(var(--orient)) translate(var(--tx), -50%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}

.ei-wheel__items>li.no-anim {
  transition: none;
}

.ei-wheel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

.ei-wheel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border: 1.5px solid transparent;
  border-radius: 9999px;
  background: #F4F5F6;
  color: var(--tint);
  transition: background-color .4s ease, border-color .4s ease;
}

.ei-wheel__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei-wheel__name {
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 14px;
  color: #9CA0A8;
  transition: color .4s ease, background-color .4s ease, border-color .4s ease;
}

.is-current .ei-wheel__icon {
  border-color: var(--tint);
  background: var(--tint-bg);
}

.is-current .ei-wheel__name {
  border-color: #ECEDEF;
  background: #fff;
  color: #1F2124;
}

.ei-wheel__item:focus-visible {
  outline: 2px solid #015AEB;
  outline-offset: 3px;
}

.ei-wheel__handle {
  position: absolute;
  left: 50%;
  top: 32px;
  width: 8px;
  height: 24px;
  margin-left: -4px;
  border-radius: 9999px;
  background: #5B6472;
}

.ei-wheel__arc {
  display: none;
}

.ei-wheel__panel {
  padding: 18px 0 0;
}

.ei-wheel__meta {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5B6472;
}

.ei-wheel__title {
  margin-top: 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #1F2124;
}

/* tablet step: previously held the mobile size until 1024px, then jumped */
@media (min-width: 768px) {
  .ei-wheel__title {
    font-size: 24px;
    line-height: 30px;
  }
}

.ei-wheel__copy {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #5B6472;
}

.ei-wheel__title,
.ei-wheel__copy {
  transition: opacity .3s ease, transform .4s ease;
}

.ei-wheel.is-switching .ei-wheel__title,
.ei-wheel.is-switching .ei-wheel__copy {
  opacity: 0;
  transform: translateY(6px);
}

.ei-wheel__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 50px;
  border-radius: 4px;
  font-size: 12px;
  color: #5B6472;
}

.ei-wheel__next:hover {
  color: #1F2124;
}

.ei-wheel__next:focus-visible {
  outline: 2px solid #015AEB;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .ei-wheel__stage {
    margin: 0 -32px;
  }
}

@media (min-width: 1024px) {
  .ei-wheel {
    --r: 495px;
    --orient: 0deg;
    --tx: 0%;
    display: grid;
    grid-template-columns: 514px minmax(0, 1fr);
    height: 680px;
    margin-top: 49px;
    cursor: pointer;
    clip-path: inset(0 -100vw);
    /* clip the wheel vertically only, so the arc can run to the page edge */
  }

  .ei-wheel__stage {
    height: 100%;
    margin: 0;
    overflow: visible;
  }

  .ei-wheel__items {
    left: calc(144px - var(--r));
    top: 250px;
  }

  .ei-wheel__arc {
    display: block;
    position: absolute;
    left: calc(144px - var(--r));
    top: 250px;
    width: calc(2 * var(--r) - 76px);
    height: calc(2 * var(--r) - 76px);
    transform: translate(-50%, -50%);
    border: 1px dashed #D3D6DB;
    border-radius: 9999px;
    pointer-events: none;
  }

  .ei-wheel__handle {
    left: 82px;
    top: 246px;
    width: 36px;
    height: 8px;
    margin: 0;
  }

  .ei-wheel__item {
    gap: 16px;
  }

  .ei-wheel__icon {
    width: 72px;
    height: 44px;
  }

  .ei-wheel__icon svg {
    width: 22px;
    height: 22px;
  }

  .ei-wheel__name {
    padding: 6px 12px;
    font-size: 18px;
  }

  .ei-wheel__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 191px 0 0;
  }

  .ei-wheel__meta {
    font-size: 12px;
  }

  .ei-wheel__title {
    margin-top: 10px;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -.02em;
  }

  .ei-wheel__copy {
    margin-top: 8px;
    font-size: 18px;
    line-height: 26px;
  }

  .ei-wheel__next {
    margin-top: 272px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ei-marquee__track,
  .ei-patterns__hint span {
    animation: none;
  }

  .ei-cap__art,
  .ei-deck__card,
  .ei-req,
  .ei-appr,
  .ei-req span,
  .ei-appr span,
  .ei-appr::before,
  .ei-patterns__intro,
  .ei-pairs__head,
  .ei-wheel__items>li,
  .ei-steps__list button,
  .ei-steps__list button::before {
    transition: none;
  }
}

/* ---------- Cloud Services page ---------- */
/* The hero reuses .ea-hero-bg / .ea-hero-shape; the product rows reuse the home page .product-item list. */

/* Service cards: one column on mobile; on desktop rows alternate wide/narrow (620/520 of 1160px, Figma) */
.cs-services {
  display: grid;
  gap: 20px;
}

.cs-svc {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #F8F8F7;
}

.cs-svc__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

.cs-svc__body {
  padding: 16px 0 0;
}

.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  font-size: 11px;
  line-height: 16px;
  color: #1F2124;
}

.cs-tags li {
  padding: 2px 10px;
  border-radius: 9999px;
  background: #fff;
}

.cs-svc__title {
  margin-top: 22px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #1F2124;
}

.cs-svc__copy {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: #5B6472;
}

@media (min-width: 768px) {
  .cs-services {
    grid-template-columns: 1fr 1fr;
  }

  .cs-svc__img {
    height: 200px;
  }
}

@media (min-width: 1024px) {
  .cs-services {
    display: flex;
    flex-wrap: wrap;
  }

  .cs-services>li {
    flex: 0 0 calc((100% - 20px) * 520 / 1140);
  }

  .cs-services>li:nth-child(4n + 1),
  .cs-services>li:nth-child(4n) {
    flex-basis: calc((100% - 20px) * 620 / 1140);
  }

  .cs-svc {
    padding: 10px 10px 32px;
    border-radius: 8px;
  }

  .cs-svc__img {
    height: 242px;
    border-radius: 0;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  }

  .cs-svc {
    overflow: hidden;
  }

  .cs-svc__body {
    padding: 30px 16px 0;
  }

  .cs-tags {
    gap: 4px 6px;
  }

  .cs-svc__title {
    margin-top: 20px;
    font-size: 18px;
    line-height: 24px;
  }

  .cs-svc__copy {
    margin-top: 5px;
  }
}

/* Four priorities. Every shape and label carries two positions in desktop-stage pixels: scattered (--sx/--sy/--sr,
       Figma frame) and balanced (--bx/--by/--br). Desktop starts scattered and JS adds .is-balanced once the section is
       in view; below lg the balanced stack is drawn at --s scale. */
.cs-balance {
  background: #fff;
}

.cs-balance__stage {
  --s: .3;
  position: relative;
  height: 205px;
  margin-top: 24px;
}

.cs-balance__shapes {
  position: absolute;
  left: 25px;
  top: 6px;
}

.cs-shape {
  position: absolute;
  max-width: none;
  mix-blend-mode: multiply;
  /* the white around each shape drops out */
  left: calc(var(--bx) * var(--s) * 1px);
  top: calc(var(--by) * var(--s) * 1px);
  width: calc(var(--w) * var(--s) * 1px);
  height: auto;
  transform: rotate(var(--br));
}

/* Labels sit on a dotted rail: --pitch apart, with a short connector between neighbouring dots (Figma). */
.cs-priorities {
  --pitch: 26px;
  --dot-size: 6px;
  --gap: 4px;
  position: absolute;
  left: 216px;
  top: 0;
}

.cs-priorities li {
  position: absolute;
  left: 0;
  top: calc(60px + var(--i) * var(--pitch));
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transform: translateY(-50%);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: #1F2124;
}

.cs-priorities li::before {
  content: "";
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 9999px;
  background: var(--dot);
}

.cs-priorities li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--dot-size) / 2 - .75px);
  width: 1.5px;
  border-radius: 1px;
  top: calc(50% + var(--dot-size) / 2 + var(--gap));
  height: calc(var(--pitch) - var(--dot-size) - 2 * var(--gap));
  background: #C8D4EC;
  transition: opacity .5s ease;
}

.cs-balance__hint {
  display: none;
}

@media (min-width: 1024px) {
  .cs-balance__stage {
    --s: 1;
    --ease: cubic-bezier(.65, 0, .25, 1);
    height: 700px;
    margin-top: 25px;
  }

  .cs-balance__shapes {
    left: 0;
    top: 0;
  }

  .cs-shape {
    left: calc(var(--sx) * 1px);
    top: calc(var(--sy) * 1px);
    transform: rotate(var(--sr));
    transition: left 1.1s var(--ease) var(--d, 0s), top 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
    animation: cs-float 6s ease-in-out infinite alternate;
    animation-delay: var(--float, 0s);
  }

  .cs-priorities {
    --pitch: 94px;
    --dot-size: 14px;
    --gap: 8px;
    left: 0;
  }

  .cs-priorities li {
    left: calc(var(--sx) * 1px);
    top: calc(var(--sy) * 1px);
    gap: 19px;
    font-size: 32px;
    line-height: 40px;
    color: #5B5B60;
    transform: translate(-6px, -50%) rotate(var(--sr));
    transition: left 1s var(--ease) calc(var(--i) * 80ms + .2s), top 1s var(--ease) calc(var(--i) * 80ms + .2s),
      transform 1s var(--ease) calc(var(--i) * 80ms + .2s), color .6s ease calc(var(--i) * 80ms + .6s);
  }

  .cs-priorities li:not(:last-child)::after {
    opacity: 0;
  }

  .cs-balance__hint {
    display: block;
    position: absolute;
    right: -20px;
    top: 663px;
    font-size: 13px;
    color: #5B6472;
    transition: opacity .4s ease;
  }

  .cs-balance__hint span {
    display: inline-block;
    animation: cs-nudge 1.6s ease-in-out infinite;
  }

  /* Balanced: an upright stack (cube, sphere, tilted cylinder, pyramid) with the rail of priorities to its right */
  .cs-balance.is-balanced .cs-shape {
    left: calc(var(--bx) * 1px);
    top: calc(var(--by) * 1px);
    transform: rotate(var(--br));
    animation: none;
  }

  .cs-balance.is-balanced .cs-priorities li {
    left: 686px;
    top: calc(134px + var(--i) * var(--pitch));
    color: #1F2124;
    transform: translate(0, -50%) rotate(0deg);
  }

  .cs-balance.is-balanced .cs-priorities li:not(:last-child)::after {
    opacity: 1;
    transition-delay: 1.2s;
  }

  .cs-balance.is-balanced .cs-balance__hint {
    opacity: 0;
  }
}

@keyframes cs-float {
  to {
    translate: 0 -10px;
  }
}

@keyframes cs-nudge {
  50% {
    transform: translateY(3px);
  }
}

/* Enterprise workloads on cloud: pillar artwork on the left, workload list on the right */
/* Mobile/tablet: plain white (Figma mobile). Desktop: white fading to a pale-blue base. */
.cs-workloads {
  background: #fff;
}

@media (min-width: 1024px) {
  .cs-workloads {
    margin-bottom: 50px;
    background: linear-gradient(180deg, #fff 55%, #EEF8FF 100%);
  }
}

.cs-workloads__body {
  position: relative;
  margin-top: 20px;
}

.cs-workloads__art {
  /* mobile uses its own crop (Figma mobile) that already fades into the white page */
  display: block;
  width: 100%;
  height: auto;
}

.cs-workloads__list {
  display: grid;
  gap: 22px;
  padding: 4px 20px 32px;
}

.cs-workloads__list dt {
  font-size: 16px;
  line-height: 20px;
  color: #1F2124;
}

.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 16px;
  color: #1059B4;
}

.cs-chips li {
  padding: 4px 10px;
  border-radius: 9999px;
  background: #E3F2FE;
}

@media (min-width: 768px) {
  .cs-workloads__list {
    padding: 4px 32px 48px;
  }
}

@media (min-width: 1024px) {
  .cs-workloads__body {
    min-height: 547px;
    margin-top: 20px;
  }

  .cs-workloads__art {
    position: absolute;
    left: 0;
    top: 0;
    width: 720px;
    max-width: 56%;
    height: 547px;
    object-fit: cover;
    object-position: left top;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
  }

  .cs-workloads__list {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    gap: 41px;
    padding: 30px 60px 60px 768px;
  }

  .cs-workloads__list dt {
    font-size: 16px;
    line-height: 20px;
  }

  .cs-chips {
    gap: 6px 4px;
    margin-top: 10px;
    font-size: 12px;
  }

  .cs-chips li {
    padding: 4px 10px;
    background: #EBF8FF;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cs-shape,
  .cs-priorities li,
  .cs-priorities li::after,
  .cs-balance__hint,
  .cs-svc__img {
    transition: none;
    animation: none;
  }

  .cs-balance__hint span {
    animation: none;
  }
}


/* ---------- Application Development page ---------- */
/* Reuses .ea-hero-bg/.ea-hero-shape (hero), .cs-services/.cs-svc (cards), .glow-blue (AI section) and the home
       page [data-reveal] statement. */
.ad-flowline {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
  color: #015AEB;
}

@media (min-width: 1024px) {
  .ad-flowline {
    margin-top: 20px;
    font-size: 14px;
  }
}

/* Development models: white fading into a warm-to-cool wash with a hard bottom edge (Figma) */
.ad-models {
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(45% 70% at 0% 70%, #FEEBD2, rgba(254, 235, 210, 0) 100%),
    radial-gradient(40% 55% at 55% 95%, #E2DEFB, rgba(226, 222, 251, 0) 100%),
    radial-gradient(40% 70% at 100% 65%, #D0ECFF, rgba(208, 236, 255, 0) 100%),
    linear-gradient(90deg, #FFF6EA, #F7F3F6 45%, #EEF1FD 70%, #E6F3FF);
}

.ad-models__label {
  text-align: center;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B7280;
}

.ad-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.ad-tiles li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  color: #1F2124;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.ad-tiles li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31, 33, 36, .08);
}

@media (min-width: 768px) {
  .ad-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ad-models__label {
    font-size: 11px;
  }

  .ad-tiles {
    gap: 20px;
    margin-top: 15px;
  }

  .ad-tiles li {
    min-height: 88px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 19px;
  }
}

/* Enterprise connection cards. Mobile: swipe row. Desktop: a fanned deck; hover spreads it, click/Enter sends the
       front card to the back. JS keeps data-pos (0 = front) in sync. */
.ad-deck {
  position: relative;
  margin: 24px -20px 0;
}

/* mobile: white section, cards lifted by a soft cool shadow that falls mostly below them (Figma mobile) */
.ad-deck__list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 56px;
}

.ad-card {
  flex: none;
  width: 200px;
  min-height: 245px;
  padding: 26px 17px 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 52, 90, .04), 0 10px 22px -4px rgba(40, 52, 90, .11);
  scroll-snap-align: start;
  scroll-margin-left: 20px;
}

.ad-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.ad-card__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #2F6FD6;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ad-card__num {
  font-size: 12px;
  color: #2F6FD6;
}

.ad-card__title {
  margin-top: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid #D5E1F3;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: #1F2124;
}

.ad-card__list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 16px;
  color: #5B6472;
}

.ad-deck__next {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .ad-deck {
    margin: 32px -32px 0;
  }

  .ad-deck__list {
    padding: 4px 32px 48px;
  }
}

@media (min-width: 1024px) {
  .ad-deck {
    height: 460px;
    margin: 40px 0 0;
    cursor: pointer;
  }

  .ad-deck__list {
    position: absolute;
    left: 50%;
    top: 40px;
    display: block;
    overflow: visible;
    padding: 0;
  }

  .ad-card {
    position: absolute;
    left: -218px;
    top: 0;
    width: 215px;
    min-height: 284px;
    padding: 18px 22px;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(31, 33, 36, .1);
    transform-origin: 50% 100%;
    transform: translate(calc(var(--p) * 34px), calc(var(--p) * -18px)) rotate(calc(8deg - var(--p) * 1deg));
    z-index: calc(10 - var(--p));
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
  }

  .ad-card[data-pos="0"] {
    --p: 0;
  }

  .ad-card[data-pos="1"] {
    --p: 1;
  }

  .ad-card[data-pos="2"] {
    --p: 2;
  }

  .ad-card[data-pos="3"] {
    --p: 3;
  }

  .ad-card[data-pos="4"] {
    --p: 4;
  }

  .ad-deck:hover .ad-card,
  .ad-deck:focus-within .ad-card {
    transform: translate(calc(var(--p) * 58px), calc(var(--p) * -24px)) rotate(calc(8deg - var(--p) * 2.5deg));
  }

  .ad-card.is-leaving {
    z-index: 20;
    opacity: 0;
    transform: translate(-140px, 60px) rotate(-6deg) !important;
  }

  /* Spread state: after 1.2s in view (JS adds .is-spread) the fan opens into one straight row, card 01 to 05
         left to right, each card leaving a little after the one before it. */
  .ad-deck {
    --pitch: 180px;
    --spread-scale: .82;
  }

  .ad-deck.is-spread {
    cursor: default;
  }

  .ad-deck.is-spread .ad-card {
    transition: transform .75s cubic-bezier(.65, 0, .25, 1) calc(var(--i) * 50ms), opacity .25s ease, box-shadow .4s ease;
  }

  .ad-deck.is-spread .ad-card,
  .ad-deck.is-spread:hover .ad-card,
  .ad-deck.is-spread:focus-within .ad-card {
    transform: translate(calc((var(--i) - 2) * var(--pitch) + 110px), 0) rotate(0deg) scale(var(--spread-scale));
    box-shadow: 0 10px 28px rgba(31, 33, 36, .08);
  }

  .ad-card__title {
    margin-top: 30px;
    padding-bottom: 28px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
  }

  .ad-card__num {
    font-style: italic;
  }

  .ad-card__list {
    gap: 4px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .ad-deck.is-spread .ad-deck__next {
    display: none;
  }

  .ad-deck__next:focus-visible {
    left: 50%;
    bottom: 0;
    width: auto;
    height: 36px;
    padding: 0 14px;
    overflow: visible;
    clip: auto;
    transform: translateX(-50%);
    background: #1F2124;
    color: #fff;
    font-size: 13px;
    outline: 2px solid #015AEB;
    outline-offset: 2px;
  }
}

/* AI section flow chip */
.ad-aiflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  width: fit-content;
  margin-top: 18px;
  padding: 4px 10px;
  background: #fff;
  font-size: 11px;
  line-height: 16px;
  color: #1F2124;
}

.ad-aiflow span+span::before {
  content: "→";
  margin-right: 6px;
}

@media (min-width: 1024px) {
  .ad-aiflow {
    gap: 0 9px;
    margin-top: 18px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .ad-aiflow span+span::before {
    margin-right: 9px;
  }
}

@media (min-width: 1280px) {
  .ad-aiflow {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Statement icon pills */
.ad-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  margin-left: 6px;
  border-radius: 9999px;
  vertical-align: middle;
  transform: translateY(-2px);
}

@media (min-width: 1024px) {
  .ad-pill {
    width: 50px;
    height: 28px;
    margin-left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ad-card,
  .ad-tiles li {
    transition: none;
  }
}

@media (min-width: 1280px) {
  .ad-deck {
    --pitch: 235px;
    --spread-scale: 1;
  }
}

/* ---------- AI Enablement page ---------- */
/* Reuses .ea-hero-bg/.ea-hero-shape (hero), .ea-stage show/hide (lifecycle) and the home page product list. */

/* Lifecycle. Mobile: pill tabs over a swipe track of stage cards. Desktop: violet rail + stage body + tag card. */
.ai-life {
  display: grid;
  gap: 20px;
}

.ai-life__tabs {
  display: flex;
  gap: 8px;
  margin: 0 -20px;
  padding: 0 20px;
  overflow-x: auto;
}

.ai-life__tabs button {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: #EDEDEE;
  font-size: 15px;
  color: #5B6472;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.ai-life__tabs button[aria-selected="true"] {
  background: #1F2124;
  color: #fff;
}

.ai-life__tabs button:focus-visible {
  outline: 2px solid #015AEB;
  outline-offset: 2px;
}

.ai-life__track {
  position: relative;
  display: flex;
  gap: 20px;
  margin-right: -20px;
  padding-right: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.ai-stage {
  flex: none;
  width: 89%;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
}

.ai-stage__num {
  font-size: 11px;
  color: #7371F7;
}

.ai-stage__title {
  margin-top: 2px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #3A3B3E;
}

/* tablet step: previously held the mobile size until 1024px, then jumped */
@media (min-width: 768px) {
  .ai-stage__title {
    font-size: 22px;
    line-height: 28px;
  }
}

.ai-stage__copy {
  margin-top: 16px;
  font-size: 13px;
  line-height: 16px;
  color: #5B6472;
}

.ai-stage__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px 6px;
  min-height: 300px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  color: #3F4250;
  background:
    radial-gradient(45% 35% at 45% 45%, rgba(253, 222, 178, .7), transparent 75%),
    radial-gradient(40% 40% at 100% 0%, rgba(214, 208, 252, .55), transparent 75%),
    linear-gradient(180deg, #FDFCFF, #FFFBF5);
}

.ai-stage__tags li {
  padding: 2px 10px;
  border-radius: 9999px;
  background: #EEEEF0;
}

@media (min-width: 640px) {
  .ai-stage {
    width: 440px;
  }
}

@media (min-width: 768px) {
  .ai-life__tabs {
    margin: 0 -32px;
    padding: 0 32px;
  }

  .ai-life__track {
    margin-right: -32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {
  .ai-life {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .ai-life__tabs {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 20px;
    overflow: visible;
    border-radius: 4px;
    background: #A5A4FA;
    box-shadow: inset 0 0 26px 8px #CFCFFD;
  }

  .ai-life__tabs button {
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 6px 12px;
    background: transparent;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
  }

  .ai-life__tabs button:hover {
    background: rgba(255, 255, 255, .15);
  }

  .ai-life__tabs button[aria-selected="true"] {
    background: linear-gradient(180deg, #2C2E33, #1F2124);
    box-shadow: 0 6px 14px rgba(31, 33, 36, .22);
  }

  .ai-life__track {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .ai-stage {
    width: auto;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    padding: 0;
    background: none;
  }

  .ai-stage__body {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 42px 24px 40px;
    border-radius: 6px;
    background: #fff;
  }

  .ai-stage__title {
    margin-top: 18px;
    font-size: 26px;
    line-height: 32px;
  }

  .ai-stage__copy {
    margin-top: auto;
    font-size: 14px;
    line-height: 22px;
  }

  .ai-stage__tags {
    min-height: 320px;
    margin: 0;
    padding: 40px 24px;
    border-radius: 6px;
    gap: 12px 6px;
    font-size: 13px;
    line-height: 18px;
    background:
      radial-gradient(35% 22% at 42% 104%, rgba(253, 222, 178, .6), transparent 75%),
      radial-gradient(28% 40% at 104% 75%, rgba(214, 208, 252, .65), transparent 75%),
      radial-gradient(24% 35% at 100% 40%, rgba(205, 225, 253, .6), transparent 75%),
      #fff;
  }

  .ai-stage__tags li {
    padding: 5px 12px;
  }
}

/* AI layers. Mobile: stacked bands that resolve into "Enterprise AI". Desktop: five floating circles. */
.ai-layers {
  margin-top: 24px;
}

.ai-layers__list {
  display: grid;
  gap: 12px;
}

.ai-layers__list li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 12px 16px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  line-height: 18px;
  color: #5B6472;
}

.ai-layers__list strong {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: #1F2124;
}

.ai-layers__text {
  display: flex;
  flex-direction: column;
}

.ai-layers__result {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  margin-top: 48px;
  border: 1px solid #D9D6F5;
  border-radius: 8px;
  background: #F3F2FE;
  font-size: 16px;
  font-weight: 500;
  color: #1F2124;
}

/* bracket joining the stack, then an arrow down into the result */
.ai-layers__result::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: calc(100% + 26px);
  height: 10px;
  border: 1px solid #A9ADB5;
  border-top: 0;
}

.ai-layers__result::after {
  content: "\2193";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 24px;
  color: #8A909B;
}

@media (min-width: 1024px) {

  /* Circles start scattered (Figma frame 1). One second after the section is in view JS adds .is-merged and they
         grow and glide into an overlapping ring around "Enterprise AI" (frame 2); overlaps tint via multiply. */
  .ai-layers {
    --ease: cubic-bezier(.65, 0, .35, 1);
    --dur: 1.3s;
    position: relative;
    height: 560px;
    margin-top: 4px;
  }

  .ai-layers__list {
    display: block;
  }

  .ai-layers__list li {
    --d: 200px;
    --cx: var(--x);
    --cy: var(--y);
    position: absolute;
    left: calc((var(--cx) - 60) / 1160 * 100% - var(--d) / 2);
    top: calc(var(--cy) * 1px - var(--d) / 2);
    width: var(--d);
    height: var(--d);
    padding: 20px;
    border-radius: 9999px;
    text-align: center;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    mix-blend-mode: multiply;
    animation: ai-float 7s ease-in-out infinite alternate;
    animation-delay: var(--f);
    transition: left var(--dur) var(--ease) calc(var(--i) * 60ms), top var(--dur) var(--ease) calc(var(--i) * 60ms),
      width var(--dur) var(--ease) calc(var(--i) * 60ms), height var(--dur) var(--ease) calc(var(--i) * 60ms),
      translate .8s ease, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
  }

  .ai-layers__text {
    max-width: 160px;
    transition: transform var(--dur) var(--ease) calc(var(--i) * 60ms);
  }

  .ai-layers:not(.is-merged) .ai-layers__list li:hover {
    transform: scale(1.06);
    box-shadow: 0 18px 40px rgba(80, 90, 160, .12);
  }

  .ai-layers__list strong {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
  }

  .ai-layers__result {
    position: absolute;
    left: calc(580 / 1160 * 100%);
    top: 252px;
    width: 110px;
    height: auto;
    margin: 0;
    z-index: 1;
    border: 0;
    background: none;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease, transform .8s var(--ease);
  }

  .ai-layers__result::before,
  .ai-layers__result::after {
    content: none;
  }

  .ai-layers.is-merged .ai-layers__list li {
    --d: 329px;
    --cx: var(--vx);
    --cy: var(--vy);
    animation: none;
    translate: 0 0;
  }

  .ai-layers.is-merged .ai-layers__text {
    transform: translate(var(--tx), var(--ty));
  }

  .ai-layers.is-merged .ai-layers__result {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: calc(var(--dur) * .7);
  }
}

@keyframes ai-float {
  to {
    translate: 0 -12px;
  }
}

/* Trust cards. Mobile: swipe row of tall cards. Desktop: bento grid (430 / 143+268 / 259 columns, Figma). */
.ai-trust {
  display: flex;
  gap: 16px;
  margin: 24px -20px 0;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.ai-trust__card {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 312px;
  height: 288px;
  overflow: hidden;
  padding: 24px 20px;
  border-radius: 8px;
  background: #EEEAE3;
  scroll-snap-align: start;
}

.ai-trust__card img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 100%;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.ai-trust__card:hover img {
  transform: scale(1.04);
}

.ai-trust__card h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #1F2124;
}

.ai-trust__card p {
  margin-top: 6px;
  max-width: 200px;
  font-size: 12px;
  line-height: 18px;
  color: #5B6472;
}

@media (min-width: 768px) {
  .ai-trust {
    margin: 40px -32px 0;
    padding: 0 32px;
  }
}

@media (min-width: 1024px) {
  .ai-trust {
    display: grid;
    grid-template-columns: 430fr 143fr 268fr 259fr;
    grid-template-rows: 188px 188px;
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    overflow: visible;
  }

  .ai-trust__card {
    width: auto;
    height: auto;
    padding: 32px;
  }

  .ai-trust__card img {
    object-position: right bottom;
  }

  .ai-trust__card--a {
    grid-column: 1;
    grid-row: 1;
  }

  .ai-trust__card--b {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .ai-trust__card--c {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .ai-trust__card--d {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .ai-trust__card--e {
    grid-column: 3;
    grid-row: 2;
  }

  .ai-trust__card h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .ai-trust__card p {
    max-width: 240px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
  }
}

.ai-marquee {
  display: none;
}

@media (min-width: 1024px) {
  .ai-marquee {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    white-space: nowrap;
    font-family: "Playfair Display", ui-serif, Georgia, serif;
    font-style: italic;
    font-size: 26px;
    line-height: 36px;
    color: #AEADF9;
  }

  .ai-marquee__track {
    display: inline-flex;
    animation: ei-marquee 40s linear infinite;
  }
}

/* Domains. Mobile: full-width art bands. Desktop: 3 x 2 grid of 373 x 278 cards. */
.ai-domains {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.ai-domain {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  overflow: hidden;
  padding: 20px 16px;
  background: #F3F3F1;
}

.ai-domain>img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.ai-domain:hover>img {
  transform: scale(1.05);
}

.ai-domain__num {
  display: none;
}

.ai-domain h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #1F2124;
}

.ai-domain__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  max-width: 290px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 16px;
  color: #1F2124;
}

.ai-domain__tags li {
  padding: 2px 10px;
  border-radius: 9999px;
  background: #fff;
}

@media (min-width: 640px) {
  .ai-domains {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .ai-domains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
  }

  .ai-domain {
    height: 278px;
    padding: 24px 24px 38px;
  }

  .ai-domain__num {
    position: absolute;
    left: 24px;
    top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #121314;
    font-size: 13px;
    color: #fff;
  }

  .ai-domain h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .ai-domain__tags {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ai-layers__list li,
  .ai-marquee__track {
    animation: none;
  }

  .ai-trust__card img,
  .ai-domain>img,
  .ai-layers__list li,
  .ai-layers__text,
  .ai-layers__result,
  .ai-life__tabs button {
    transition: none;
  }
}

@media (min-width: 1280px) {
  .ai-life {
    grid-template-columns: 292px minmax(0, 1fr);
  }

  .ai-stage {
    grid-template-columns: minmax(0, 1fr) 324px;
  }
}

/* AI lifecycle: per-stage colour washes on the right-hand card (Figma), sliding rail indicator and
       direction-aware stage transitions (desktop). */
.ai-stage__tags {
  letter-spacing: .02em;
}

/* --b blue, --v violet, --p peach: on desktop each stage places its soft washes differently (Figma) */
.ai-stage__tags {
  --b: rgba(196, 220, 253, .95);
  --v: rgba(210, 203, 252, .95);
  --p: rgba(253, 220, 172, .9);
}

@media (min-width: 1024px) {
  .ai-stage--1 .ai-stage__tags {
    background: radial-gradient(28% 42% at 104% 45%, var(--b), transparent 80%), radial-gradient(26% 32% at 97% 82%, var(--v), transparent 80%), radial-gradient(42% 28% at 50% 108%, var(--p), transparent 80%), #fff;
  }

  .ai-stage--2 .ai-stage__tags {
    background: radial-gradient(30% 48% at 104% 42%, var(--b), transparent 80%), radial-gradient(42% 32% at 6% 104%, var(--p), transparent 80%), radial-gradient(30% 30% at 72% 98%, var(--v), transparent 80%), #fff;
  }

  .ai-stage--3 .ai-stage__tags {
    background: radial-gradient(34% 52% at -4% 74%, var(--p), transparent 80%), radial-gradient(36% 30% at 46% 104%, var(--v), transparent 80%), radial-gradient(32% 36% at 104% 104%, var(--b), transparent 80%), #fff;
  }

  .ai-stage--4 .ai-stage__tags {
    background: radial-gradient(28% 42% at -4% 46%, var(--p), transparent 80%), radial-gradient(36% 26% at 45% 108%, var(--v), transparent 80%), radial-gradient(30% 24% at 88% 104%, rgba(214, 232, 253, .8), transparent 80%), #fff;
  }

  .ai-stage--5 .ai-stage__tags {
    background: radial-gradient(30% 36% at -4% 2%, var(--p), transparent 80%), radial-gradient(30% 42% at -4% 88%, var(--v), transparent 80%), radial-gradient(36% 30% at 36% 106%, var(--b), transparent 80%), #fff;
  }

  .ai-stage--6 .ai-stage__tags {
    background: radial-gradient(42% 26% at 52% -6%, rgba(253, 220, 172, .7), transparent 80%), radial-gradient(26% 42% at -4% 42%, rgba(210, 203, 252, .7), transparent 80%), #fff;
  }
}

.ai-stage__flow {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: #1F2124;
}

.ai-stage__product {
  display: block;
}

.ai-stage__label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7371F7;
}

.ai-stage__product-name {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #1F2124;
}

.ai-stage__product-copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 19px;
  color: #5B6472;
  letter-spacing: 0;
}

.ai-stage__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.ai-stage__stats dd:first-of-type {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -.02em;
  color: #1F2124;
}

.ai-stage__stats dd+dd {
  font-size: 12px;
  line-height: 16px;
  color: #3F4250;
}

.ai-life__indicator {
  display: none;
}

@media (min-width: 1024px) {
  .ai-life {
    --ease: cubic-bezier(.65, 0, .35, 1);
    --dur: .6s;
  }

  .ai-life__tabs {
    position: relative;
  }

  .ai-life__indicator {
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2C2E33, #1F2124);
    box-shadow: 0 6px 14px rgba(31, 33, 36, .22);
  }

  .ai-life__tabs.is-ready .ai-life__indicator {
    transition: transform var(--dur) var(--ease), height var(--dur) var(--ease);
  }

  .ai-life__tabs button {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .88);
    transition: color var(--dur) var(--ease), background-color .3s ease;
  }

  .ai-life__tabs button[aria-selected="true"] {
    background: transparent;
    box-shadow: none;
    color: #fff;
  }

  .ai-life__tabs button[aria-selected="true"]:hover {
    background: transparent;
  }

  .ai-stage__product {
    padding: 36px 24px 28px;
  }

  .ai-stage__product-copy {
    font-size: 14px;
    line-height: 20px;
  }

  .ai-stage__stats {
    margin-top: 12px;
  }

  .ai-stage__stats dd:first-of-type {
    font-size: 22px;
  }

  .ai-stage__flow {
    margin-top: 18px;
    font-size: 16px;
    line-height: 22px;
  }

  /* All stages share one grid cell, so the section keeps the tallest stage's height and never shifts. */
  .ai-life__track {
    display: grid;
  }

  .ai-stage {
    display: grid;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--dir, 1) * -36px));
    transition: transform var(--dur) var(--ease), opacity calc(var(--dur) * .7) ease, visibility 0s linear var(--dur);
  }

  .ai-stage.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: transform var(--dur) var(--ease), opacity calc(var(--dur) * .75) ease calc(var(--dur) * .15), visibility 0s;
  }

  .ai-stage.is-entering {
    transform: translateY(calc(var(--dir, 1) * 36px));
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ai-life__tabs.is-ready .ai-life__indicator,
  .ai-stage,
  .ai-stage.is-active,
  .ai-life__tabs button {
    transition: none;
  }
}

/* Mobile/tablet (Figma mobile): every stage card shares the same soft peach-and-lilac wash, the tag panel fills
       the card so cards of different lengths end evenly, and swipe rows keep the page gutter when snapped. */
@media (max-width: 1023px) {
  .ai-stage {
    display: flex;
    flex-direction: column;
  }

  .ai-stage__tags {
    flex: 1;
  }

  .ai-life__track,
  .ai-trust {
    scroll-padding-left: 20px;
  }

  .ai-trust {
    padding-bottom: 40px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {

  .ai-life__track,
  .ai-trust {
    scroll-padding-left: 32px;
  }
}


@media screen and (max-width: 768px) {
  .ai-trust__card img {
    object-position: 100% 100%
  }

  .ai-trust__card.ai-trust__card--c img {
    object-position: 100% 70%
  }
}
    /* ---------- Industries page ---------- */
    /* Reuses .ea-hero-bg/.ea-hero-shape (hero), the AI Enablement domain artwork and the home page case studies. */

    /* Industry cards. Mobile: head, clients, story, value stacked. Desktop: two columns, art bleeding in from the right. */
    .in-list { display: grid; gap: 16px; }
    .in-card {
      position: relative; isolation: isolate; display: grid; gap: 22px; overflow: hidden; padding: 24px 16px;
      border-radius: 8px; background: #F7F7F5;
    }
    .in-card__art {
      position: absolute; right: 0; top: 0; z-index: -1; width: 70%; height: 100%; object-fit: cover; object-position: right center;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
      opacity: .85; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
    }
    .in-card:hover .in-card__art { transform: scale(1.04); }
    .in-card__title { font-size: 22px; line-height: 28px; font-weight: 400; color: #1F2124; }
    @media (min-width: 640px) { .in-card__title { font-size: 28px; line-height: 34px; letter-spacing: -.02em; } }
    .in-card__lead { margin-top: 2px; font-size: 14px; line-height: 18px; color: #5B6472; }
    .in-label { font-size: 13px; line-height: 18px; font-weight: 400; color: #5B6472; }
    /* Logos are sized individually (--h, desktop px, from Figma) so tall marks and wide wordmarks read at the same
       visual weight; --s scales the whole row down on mobile. Widths follow each logo's own aspect ratio. */
    /* client logos: one left-aligned line that never scrolls or wraps. Each logo has a preferred height (--h, set
       by shape so they read at a similar size); when the row is too wide, every logo shrinks in proportion
       (flex-shrink + max-width) so the whole set fits, with its aspect ratio intact. */
    /* Equal-width slots: every card gets the same five logo cells (cards with fewer logos leave the rest empty), each
       logo centred in its cell; and the "Where we create value" badges sit in equal columns with centred labels. */
    .in-logos { --s: .75; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 12px; margin-top: 8px; }
    .in-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
    .in-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(var(--hm, var(--h, 40) * var(--s)) * 1px); }
    .in-card__body { display: grid; gap: 10px; font-size: 14px; line-height: 18px; color: #2E3440; }
    .in-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-top: 6px; font-size: 12px; line-height: 16px; color: #1F2124; }
    .in-tags li { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 2px 10px; border-radius: 9999px; background: #fff; text-align: center; }
    @media (min-width: 640px) { .in-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 1024px) {
      .in-list { gap: 40px; }
      .in-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-rows: auto auto; column-gap: 60px; row-gap: 46px;
        min-height: 406px; padding: 40px 60px 40px 40px;
      }
      .in-card__art { width: 32%; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
      .in-card__head { grid-column: 1; grid-row: 1; }
      .in-card__clients { grid-column: 1; grid-row: 2; align-self: end; }
      .in-card__body { grid-column: 2; grid-row: 1; padding-top: 22px; gap: 8px; font-size: 14px; line-height: 20px; }
      .in-card__value { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 20px; }
      .in-card__title { font-size: clamp(32px, 3.3vw, 42px); line-height: 1.2; letter-spacing: -.03em; } /* 34px at 1024 so long names (Manufacturing) clear the copy column */
      .in-card__lead { margin-top: 8px; font-size: 14px; line-height: 20px; }
      .in-label { font-size: 12px; line-height: 16px; }
      .in-logos { --s: 1; gap: 16px; margin-top: 12px; }
      .in-logos img { max-height: calc(var(--h, 40) * 1px); } /* --hm is a mobile-only size for small, detailed logos */
      .in-tags { gap: 8px; margin-top: 10px; }
      .in-tags li { padding: 4px 6px; } /* 6px sides so the longest label (Supply Chain & Fulfilment) fits one line */
    }

    /* Capability levers */
    .in-levers { margin-top: 24px; }
    .in-levers__list { display: grid; gap: 4px; }
    .in-levers__list button {
      display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 22px 12px; border-radius: 4px; text-align: left;
      font-size: 13px; line-height: 17px; color: #5B6472; transition: background-color .45s ease, color .45s ease;
    }
    .in-levers__list button strong { display: block; margin-bottom: 2px; font-size: 16px; line-height: 22px; font-weight: 400; color: #1F2124; transition: color .45s ease; }
    .in-levers__num {
      flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px;
      font-size: 13px; color: #1F2124; transition: background-color .45s ease;
    }
    /* selected lever: soft grey, dark text kept; the number sits in a white box so the active item still stands out */
    .in-levers__list button[aria-selected="true"] { background: #F4F4F2; color: #5B6472; }
    .in-levers__list button[aria-selected="true"] strong { color: #1F2124; }
    .in-levers__list button[aria-selected="true"] .in-levers__num { background: #fff; }
    .in-levers__list button:not([aria-selected="true"]):hover { background: #F4F4F2; }
    .in-levers__list button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    .in-levers__panel { position: relative; overflow: hidden; height: clamp(280px, 72vw, 420px); margin: 8px 0 12px; border-radius: 16px; background: #EEF1F5; }
    .in-levers__panel img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
    .in-levers__panel.is-swapping img { opacity: 0; transform: scale(1.03); }
    /* Application Development photo (lever 05) arrives mirror-imaged: flip it back, only that one */
    .in-levers__panel img.is-flipped { transform: scaleX(-1); }
    .in-levers__panel.is-swapping img.is-flipped { transform: scaleX(-1) scale(1.03); }
    .in-levers__panel figcaption {
      position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center; text-align: center;
      background: rgba(246, 246, 244, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      font-size: 14px; line-height: 20px; color: #1F2124; transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    }
    .in-levers__panel.is-swapping figcaption { opacity: 0; transform: translateY(8px); }
    .in-levers__panel a { border-radius: 4px; }
    .in-levers__panel a:hover { color: #015AEB; }
    .in-levers__panel a:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    @media (min-width: 1024px) {
      .in-levers { display: grid; grid-template-columns: minmax(0, 542px) minmax(0, 550px); justify-content: space-between; align-items: start; margin: 60px 8px 0 20px; }
      .in-levers__list { gap: 10px; }
      .in-levers__list button { align-items: center; min-height: 96px; padding: 18px 14px; font-size: 13px; }
      .in-levers__list button strong { font-size: 18px; line-height: 24px; }
      .in-levers__panel { height: 520px; margin: 0; border-radius: 16px; }
      .in-levers__panel figcaption { left: 20px; right: 20px; bottom: 20px; min-height: 75px; padding: 20px; border-radius: 12px; font-size: 20px; line-height: 26px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .in-card__art, .in-levers__panel img, .in-levers__panel figcaption, .in-levers__list button { transition: none; }
    }
    /* Industries CTA (mobile, Figma): frame the left of the shared ribbon artwork so the peach, lavender and blue bands
       show, instead of the pale middle that a centred cover crop leaves on narrow screens */
    @media (max-width: 1023px) {
      .in-cta { background-size: auto 100% !important; background-position: 14% center !important; }
    }

    /* ---------- Knowing QCS page ---------- */
    /* Reuses .ea-hero-bg (hero), .no-scrollbar and the Industries CTA framing (.in-cta). */
    .kq-hero-shape { border-radius: 8px; clip-path: polygon(0 0, 76.1% 0, 100% 22.6%, 100% 100%, 24.1% 100%, 0 77.4%); }
    /* CEO message video: a grey frame with a round grey play button (Figma) until it is started */
    .kq-ceo-video__play {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%;
      background: rgba(232, 232, 232, .35); cursor: pointer; transition: background-color .3s ease, opacity .3s ease;
    }
    .kq-ceo-video__play svg { width: 40px; height: 40px; transition: transform .3s ease; }
    .kq-ceo-video__play circle { fill: #9B9B9B; transition: fill .3s ease; }
    .kq-ceo-video__play path { fill: #fff; }
    .kq-ceo-video__play:hover svg { transform: scale(1.08); }
    .kq-ceo-video__play:hover circle { fill: #1F2124; }
    .kq-ceo-video__play:focus-visible { outline: 2px solid #015AEB; outline-offset: -2px; }
    .kq-ceo-video.is-playing .kq-ceo-video__play { opacity: 0; pointer-events: none; }
    @media (min-width: 1024px) { .kq-ceo-video__play svg { width: 48px; height: 48px; } }
    /* hand-drawn brush arrow between the CEO heading and the video: a curved shaft that thickens towards a solid head
       (filled shapes, so it tapers like a brush stroke). Desktop only; the stacked mobile/tablet layout has no "between". */
    .kq-ceo-arrow { display: none; }
    @media (min-width: 1024px) {
      .kq-ceo-arrow { display: block; justify-self: center; width: clamp(84px, 8vw, 116px); color: #C5ADF4; } /* centred in its own column: equal space either side */
      .kq-ceo-arrow svg { display: block; width: 100%; height: auto; fill: currentColor; }
    }

    /* Hero "Room to breathe": a soft peach / lavender / sky wash that fades to white, left-aligned copy, and on the
       right one overlapping photo collage (building, speaker, carrom team, festival group) with two faint translucent
       squares behind it. Card geometry is in % of an 800x754 collage box, so it scales cleanly. Every card floats on
       its own loop (neighbours in opposite directions); the squares drift slower and further, for depth. Desktop: the
       hero fills one screen under the header. Tablet / mobile: copy first, then the collage full width. */
    .kq-breathe {
      position: relative; overflow: hidden; isolation: isolate;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .25) 45%, #fff 92%),
        linear-gradient(90deg, #FEE6C8 0%, #F6E6EE 24%, #E2DEF9 50%, #D7E6FD 75%, #DCF0FF 100%);
    }
    .kq-breathe__inner { display: grid; gap: 32px; align-items: center; padding-top: 40px; padding-bottom: 48px; }
    .kq-breathe__copy { animation: kq-rise .8s cubic-bezier(.22, 1, .36, 1) both; }
    .kq-breathe__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .25em; text-transform: uppercase; color: #3A3B3E; }
    .kq-breathe__title {
      margin-top: 16px; white-space: nowrap; font-size: clamp(32px, 10.5vw, 44px); line-height: 1.12; font-weight: 300;
      letter-spacing: -.03em; color: #2B2B2B;
    }
    .kq-breathe__title em { font-family: "Playfair Display", ui-serif, Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
    .kq-breathe__lead { max-width: 680px; margin-top: 18px; font-size: 15px; line-height: 1.6; color: #5B6472; }
    @keyframes kq-rise { from { opacity: 0; transform: translateY(12px); } }

    /* the collage */
    .kq-collage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 800 / 754; }
    .kq-collage__deco {
      position: absolute; border-radius: 14px; pointer-events: none;
      background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(235, 232, 255, .35));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
      animation: kq-drift var(--t) ease-in-out var(--d) infinite alternate;
    }
    .kq-collage__deco--1 { left: 3.5%; top: 0; width: 18.8%; height: 25.5%; --t: 12s; --d: -3s; --dx: 10px; --dy: -14px; }
    .kq-collage__deco--2 { left: 0; top: 81.4%; width: 16.3%; height: 18.6%; --t: 14s; --d: -8s; --dx: -8px; --dy: 12px; }
    @keyframes kq-drift { from { translate: 0 0; rotate: 0deg; } to { translate: var(--dx) var(--dy); rotate: 2deg; } }
    /* each card's box is the most space its photo may take: the photo is fitted inside at its own proportions
       (never cropped or stretched) and centred, so the rounded corners and shadow hug the whole image */
    .kq-card { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; animation: kq-float var(--t) ease-in-out var(--d) infinite alternate; }
    .kq-card img {
      display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px;
      box-shadow: 0 22px 44px -14px rgba(31, 33, 36, .22); animation: kq-card-in .9s cubic-bezier(.22, 1, .36, 1) var(--in, 0s) both;
    }
    .kq-card--framed img { border: 4px solid rgba(255, 255, 255, .9); border-radius: 12px; }
    /* building (large portrait), speaker (overlaps its bottom-left), carrom team (overlaps its lower right), festival (on top) */
    .kq-card--a { left: 14.1%; top: 6.5%; width: 47.8%; height: 66%; z-index: 1; --t: 10s; --d: 0s; --fx: 4px; --fr: .8deg; --in: .15s; }
    .kq-card--b { left: 1%; top: 65.2%; width: 42%; height: 29%; z-index: 3; --t: 9s; --d: -2.5s; --fx: -4px; --fr: -1.2deg; --in: .4s; }
    .kq-card--d { left: 52%; top: 34%; width: 47.9%; height: 66%; z-index: 2; --t: 10.6s; --d: -7s; --fx: -3px; --fr: -.8deg; --in: .3s; }
    .kq-card--c { left: 60.6%; top: 12.3%; width: 46%; height: 29%; z-index: 4; --t: 9.4s; --d: -5s; --fx: 4px; --fr: 1.2deg; --in: .5s; }
    @keyframes kq-float {
      from { transform: translate(calc(var(--fx) * -1), -8px) rotate(calc(var(--fr) * -1)); }
      to { transform: translate(var(--fx), 8px) rotate(var(--fr)); }
    }
    @keyframes kq-card-in { from { opacity: 0; transform: scale(.96); } }

    @media (min-width: 768px) {
      .kq-breathe__inner { gap: 40px; padding-top: 56px; padding-bottom: 56px; }
      .kq-breathe__title { font-size: 48px; }
      .kq-breathe__lead { font-size: 17px; }
      .kq-collage { max-width: 640px; }
    }
    /* Desktop: header + hero fill one screen; the collage is sized from the viewport height so it always fits */
    @media (min-width: 1024px) {
      .kq-breathe__inner {
        grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 72px);
        height: calc(100vh - 66px); height: calc(100svh - 66px); min-height: 560px; padding-top: 24px; padding-bottom: 24px;
      }
      .kq-breathe__title { font-size: clamp(48px, 4.4vw, 58px); } /* 64px overran its 425px nowrap column at 1470px+ */
      .kq-collage {
        width: min(800px, 46vw, calc((100vh - 66px - 64px) * 1.06)); width: min(800px, 46vw, calc((100svh - 66px - 64px) * 1.06));
        max-width: none; margin: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .kq-card, .kq-card img, .kq-breathe__copy, .kq-collage__deco { animation: none; }
    }
    .kq-people {
      background:
        radial-gradient(45% 120% at 0% 30%, rgba(254, 232, 205, .8), transparent 70%),
        radial-gradient(40% 120% at 100% 90%, rgba(214, 233, 253, .9), transparent 70%),
        radial-gradient(30% 80% at 60% 100%, rgba(232, 228, 252, .6), transparent 70%), #fff;
    }
    /* Mobile (Figma): white at the top, building to a peach / lavender / blue wash that ends on a crisp bottom edge */    @media (max-width: 1023px) {      .kq-people {        background:          linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, 0) 100%),          linear-gradient(90deg, #FEF2E1 0%, #FBF4EE 25%, #F4F1FB 50%, #E9EEFD 75%, #E1EFFE 100%);      }    }

    /* Shared round arrow buttons */
    .kq-arrows { display: flex; gap: 12px; }
    .kq-arrows button {
      display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px;
      background: #1F2124; color: #fff; transition: background-color .3s ease, color .3s ease, opacity .3s ease;
    }
    .kq-arrows button:disabled { background: #EDEDEE; color: #A9ADB5; cursor: default; }
    .kq-arrows button:not(:disabled):hover { background: #000; }
    .kq-arrows button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    .kq-arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    @media (min-width: 1024px) { .kq-arrows button { width: 48px; height: 48px; } .kq-arrows svg { width: 20px; height: 20px; } }

    /* Journey. Mobile: label, chapter, illustration, arrows (tabs hidden). Desktop: tab bar with arrows at the end. */
    .kq-journey { display: grid; }
    .kq-journey__bar { display: contents; }
    .kq-journey__tabs { display: none; }
    .kq-journey__arrows { order: 3; justify-content: flex-end; margin-top: 20px; }
    .kq-journey__panel { margin-top: 18px; transition: opacity .3s ease, transform .4s ease; }
    .kq-journey__panel.is-swapping { opacity: 0; transform: translateY(6px); }
    .kq-journey__meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #1F2124; }
    .kq-journey__title { margin-top: 2px; font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: -.02em; color: #1F2124; }
    @media (min-width: 768px) { .kq-journey__title { font-size: 34px; line-height: 42px; } } /* tablet step: previously held the mobile size until 1024px, then jumped */
    .kq-journey__copy { max-width: 545px; margin-top: 12px; font-size: 14px; line-height: 22px; color: #5B6472; }
    .kq-journey__art { overflow: hidden; margin: 60px 20px 0; }
    /* One fixed mountain panorama (3:1, 1800 x 600 units) with the three climbers as separate figures. The page script
       sets each climber's --x / --y (panorama units) for the chosen chapter; left/top ease there so the group visibly
       walks along the trail, the lead climber first (--delay, set per direction), with a light walking bob on the way.
       On the last chapter the green, sunlit version of the same panorama fades in; the mountain itself never moves. */
    .kq-journey__art { position: relative; aspect-ratio: 3 / 1; }
    .kq-jmap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
    .kq-jmap--green { opacity: 0; transition: opacity 1.2s ease .6s; }
    .kq-journey__art.is-summit .kq-jmap--green { opacity: 1; }
    .kq-hiker {
      position: absolute; z-index: 1; left: calc(var(--x) / 1800 * 100%); top: calc(var(--y) / 600 * 100%);
      width: calc(66 / 1800 * 100%); aspect-ratio: 1;
      transform: scale(1.4); transform-origin: calc(var(--sx) / 66 * 100%) calc(var(--sy) / 66 * 100%); /* larger, anchored at the feet */
      transition: left 1.6s cubic-bezier(.45, 0, .25, 1) var(--delay, 0s), top 1.6s cubic-bezier(.45, 0, .25, 1) var(--delay, 0s);
    }
    .kq-hiker img { position: relative; display: block; width: 100%; height: 100%; }
    .kq-hiker::before { /* ground shadow, as drawn in the illustration */
      content: ""; position: absolute; left: calc((var(--sx) - 11) / 66 * 100%); top: calc((var(--sy) - 2) / 66 * 100%);
      width: calc(22 / 66 * 100%); height: calc(4 / 66 * 100%); border-radius: 50%; background: rgba(31, 56, 31, .25);
    }
    .kq-journey__art.is-walking .kq-hiker img { animation: kq-step .38s ease-in-out infinite alternate; }
    @keyframes kq-step { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-3%) rotate(-1.2deg); } }
    /* mobile: the arrows sit under the illustration (Figma mobile) */
    @media (max-width: 1023px) {
      .kq-journey-wrap { position: relative; padding-bottom: 52px; }
      .kq-journey__arrows { position: absolute; right: 20px; bottom: 0; margin: 0; }
      .kq-journey__art { margin-top: 40px; }
    }
    @media (min-width: 768px) and (max-width: 1023px) { .kq-journey__arrows { right: 32px; } .kq-journey__art { margin-left: 32px; margin-right: 32px; } }
    @media (min-width: 1024px) {
      .kq-journey__bar { display: flex; align-items: center; gap: clamp(20px, 3.6vw, 46px); }
      .kq-journey__tabs { display: flex; flex: 1; min-width: 0; max-width: 824px; gap: 8px; }
      .kq-journey__tabs button {
        flex: 1 1 0; min-width: 0; height: 44px; padding: 0 8px; border-radius: 6px; background: #EFEFF0; font-size: 14px; color: #5B6472; white-space: nowrap;
        transition: background-color .4s ease, color .4s ease;
      }
      .kq-journey__tabs button[aria-selected="true"] { background: #1F2124; color: #fff; }
      .kq-journey__tabs button:not([aria-selected="true"]):hover { background: #E4E4E6; }
      .kq-journey__tabs button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
      .kq-journey__arrows { flex: none; margin: 0 0 0 auto; }
      .kq-journey__panel { margin-top: 48px; }
      .kq-journey__title { font-size: 42px; line-height: 50px; }
      .kq-journey__copy { margin-top: 8px; font-size: 16px; line-height: 24px; }
      .kq-journey__art { margin: 0; }
    }

    /* Fresh ideas */
    .kq-ideas { display: grid; gap: 24px; margin-top: 30px; }
    .kq-ideas__list li { display: flex; gap: 18px; padding: 20px 0 30px; border-top: 1px solid #E7E7EA; }
    .kq-ideas__list span { flex: none; font-size: 14px; line-height: 22px; color: #1D5FC2; }
    .kq-ideas__list h3 { font-size: 16px; line-height: 22px; font-weight: 400; color: #1F2124; }
    .kq-ideas__list p { margin-top: 6px; font-size: 13px; line-height: 17px; color: #5B6472; }
    .kq-ideas__img { width: 100%; height: 340px; object-fit: cover; border-radius: 8px; transition: opacity .35s ease; }
    .kq-ideas__img.is-swapping { opacity: 0; }
    /* active item (hover / focus / tap, the first one by default): a soft white-to-pale-blue wash fades in behind it and
       its title turns blue; the page script swaps the photo on the right to match */
    .kq-ideas__list li { position: relative; isolation: isolate; padding-left: 14px; padding-right: 14px; cursor: pointer; }
    .kq-ideas__list li::before {
      content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #EEF4FD 40%, #DFEAFC 100%);
    }
    .kq-ideas__list li.is-active::before { opacity: 1; }
    .kq-ideas__list h3 { transition: color .3s ease; }
    .kq-ideas__list li.is-active h3 { color: #1D5FC2; }
    .kq-ideas__list li:focus-visible { outline: 2px solid #015AEB; outline-offset: -2px; }
    @media (prefers-reduced-motion: reduce) { .kq-ideas__img, .kq-ideas__list li::before, .kq-ideas__list h3 { transition: none; } }
    @media (min-width: 1024px) {
      .kq-ideas { grid-template-columns: minmax(0, 640px) 440px; justify-content: space-between; margin-top: 40px; }
      .kq-ideas__list { margin-top: 30px; }
      .kq-ideas__list li { gap: 20px; min-height: 160px; padding: 18px 0 40px; }
      .kq-ideas__list h3 { font-size: 20px; line-height: 26px; }
      .kq-ideas__list p { font-size: 15px; line-height: 23px; }
      .kq-ideas__img { height: 540px; }
    }

    /* Workspace slides. Mobile: swipe row. Desktop: the section is tall; a sticky frame stays in view while vertical
       scroll moves the track sideways (--p, 0..1, set by JS). */
    .kq-space { margin-top: 60px; }
    .kq-space__viewport { margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
    .kq-space__progress { display: none; }
    .kq-space__track { display: flex; gap: 16px; padding: 0 20px; }
    .kq-slide { flex: none; width: 312px; scroll-snap-align: start; scroll-margin-left: 20px; }
    .kq-slide img { width: 100%; height: 260px; object-fit: cover; }
    .kq-slide:first-child img { clip-path: polygon(0 0, 100% 0, 100% 76%, 86% 100%, 0 100%); }
    .kq-slide h3 { margin-top: 16px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    @media (min-width: 768px) { .kq-slide h3 { font-size: 24px; line-height: 30px; } } /* tablet step: was 18px until 1024px, then 32px */
    .kq-slide p { margin-top: 8px; font-size: 13px; line-height: 17px; color: #5B6472; }
    @media (min-width: 768px) { .kq-space__track { padding: 0 32px; } .kq-slide { width: 420px; } }
    /* Workspace arrows: under the swipe row on mobile; on desktop lifted beside the bottom of the photo, at the
       content's right edge. Only the arrows that lead somewhere are shown. */
    .kq-space__arrows { justify-content: flex-end; margin-top: 16px; } /* top right, between the heading row and the slides */
    .kq-space__arrows button[hidden] { display: none; }
    /* desktop: the arrows sit at the top right of the slide row, level with the top of the photo (overlaying the row) */
    @media (min-width: 1024px) {
      .kq-space__arrows { position: relative; z-index: 2; margin-top: 56px; margin-bottom: -48px; pointer-events: none; }
      .kq-space__arrows button { pointer-events: auto; }
      .kq-space__sticky > div:has(> .kq-space__arrows) + .kq-space__viewport { margin-top: 0; }
    }
    @media (min-width: 1024px) {
      /* Arrow-driven horizontal slider: the section is its natural height and scrolls with the page like any other;
         only the arrows change the slide. JS sets --x (0 = first slide, 1 = last) and the track eases there. */
      .kq-space { --n: 3; margin-top: 100px; }
      .kq-space__sticky { display: flex; flex-direction: column; overflow: hidden; }
      .kq-space__sticky > * { width: 100%; flex: none;
      }
      .kq-space__viewport { margin-top: 56px; overflow: visible; }
      .kq-space__track {
        gap: 0; width: calc(var(--n) * 100%); padding: 0;
        transform: translate3d(calc(var(--x, 0) * (var(--n) - 1) / var(--n) * -100%), 0, 0); will-change: transform;
        transition: transform .8s cubic-bezier(.65, 0, .35, 1);
      }
      .kq-slide {
        display: grid; grid-template-columns: 620px minmax(0, 1fr); gap: 48px; width: calc(100% / var(--n));
        max-width: none; padding: 0 60px; box-sizing: border-box;
        opacity: var(--o, 1); transition: opacity .8s ease;
      }
      .kq-space__progress { position: relative; height: 2px; margin: 40px 60px 0; border-radius: 2px; background: #ECEDEF; }
      .kq-space__progress span {
        position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 2px; background: #1F2124;
        transform-origin: 0 50%; transform: scaleX(calc((var(--x, 0) * (var(--n) - 1) + 1) / var(--n)));
      }
      @media (min-width: 1280px) { .kq-space__progress { width: 1160px; margin-left: auto; margin-right: auto; } }
      @media (min-width: 1280px) { .kq-slide { padding: 0 calc((100vw - 1160px) / 2); } }
      .kq-slide img { height: 420px; }
      .kq-slide:first-child img { clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%); }
      .kq-slide h3 { margin-top: 120px; font-size: 32px; line-height: 40px; }
      .kq-slide p { max-width: 470px; margin-top: 12px; font-size: 18px; line-height: 27px; }
    }

    /* A career. A life. */
    .kq-life { margin-top: 60px; background: linear-gradient(180deg, #fff 0%, #E9E8FD 40%, #C3C1F9 100%); }
    .kq-life__cards { display: grid; gap: 12px; }
    .kq-life__cards li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 4px; background: #fff; }
    .kq-life__cards svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #9f9ef2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .kq-life__cards .kq-life__icon { flex: none; width: 24px; height: 24px; object-fit: contain; } /* image icons sit exactly where the svg ones do */
    .kq-life__cards li > div { flex: 1; min-width: 0; } /* the text takes the full width beside the icon */
    .kq-life__cards h3 { font-size: 18px; line-height: 22px; font-weight: 400; color: #1F2124; }
    .kq-life__cards p { margin-top: 2px; font-size: 13px; line-height: 17px; color: #5B6472; }
    @media (min-width: 1024px) {
      .kq-life { margin-top: 120px; }
      .kq-life__cards li { min-height: 98px; padding: 14px 20px; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
      .kq-life__cards li:hover { transform: translateX(-4px); box-shadow: 0 12px 30px rgba(99, 97, 214, .14); }
      .kq-life__cards h3 { font-size: 20px; line-height: 26px; }
      .kq-life__cards p { font-size: 14px; line-height: 17px; }
    }

    /* Polaroid frame */
    .kq-polaroid { padding: 10px; background: #fff; box-shadow: 0 10px 28px rgba(31, 33, 36, .14); }
    /* the whole photo always shows: it is fitted inside the frame at its own proportions (no cropping), centred, with
       any spare space in the polaroid's white */
    /* the card hugs its photo: the whole photo shows at its own shape (no cropping, no white bands), capped by
       --pmax-h, with the same padding on every side; cards are sized to their photo (shrink-to-fit) */
    .kq-polaroid img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--pmax-h, none); margin: 0 auto; }

    /* Learning. Mobile: each point has its own polaroid. Desktop: a frosted card over a greyscale photo; hovering or
       focusing a point brings its polaroid to the top of the stack. */
    .kq-learn { margin: 24px 20px 0; }
    .kq-learn__hint { display: none; }
    .kq-learn__list { display: grid; gap: 40px; }
    .kq-learn__list .kq-polaroid { margin-bottom: 18px; }
    .kq-learn__tag { font-size: 11px; line-height: 16px; text-transform: uppercase; color: #1D5FC2; }
    .kq-learn__list h3 { margin-top: 6px; font-family: "Playfair Display", ui-serif, Georgia, serif; font-style: italic; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .kq-learn__list li > p:last-child { margin-top: 4px; font-size: 13px; line-height: 17px; color: #5B6472; }
    .kq-learn__list li:focus { outline: none; }
    .kq-learn__stack { display: none; }
    @media (min-width: 1024px) {
      .kq-learn {
        position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(420px, 530px) minmax(0, 1fr); align-items: center;
        max-width: min(1240px, calc(100% - 40px)); min-height: 560px; margin: 30px auto 0; padding: 30px 44px; overflow: hidden; border-radius: 6px;
      }
      .kq-learn::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: url("..https://d2okq48tcg0bvb.cloudfront.net/NewDesign/img/knowing-qcs/team-backdrop.svg") center / cover; filter: grayscale(1) contrast(1.05); opacity: .5;
      }
      .kq-learn__hint { display: block; margin-bottom: 10px; font-size: 14px; color: #5B6472; }
      .kq-learn__card { align-self: start; }
      .kq-learn__list {
        position: relative; isolation: isolate; gap: 0; padding: 30px 22px; border: 1px solid #DCE4F0; border-radius: 8px;
        background: rgba(250, 250, 252, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      }
      .kq-learn__list li { position: relative; z-index: 1; padding: 24px 22px 28px; cursor: default; }
      /* one highlight that slides to the hovered point (JS sets its offset and height) */
      .kq-learn__indicator {
        position: absolute; left: 22px; right: 22px; top: 0; z-index: 0; border-radius: 6px; background: #E9F0FD;
        opacity: 0; transition: transform .55s cubic-bezier(.65, 0, .35, 1), height .55s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
      }
      .kq-learn__list.has-active .kq-learn__indicator { opacity: 1; }
      .kq-learn__list .kq-polaroid { display: none; }
      .kq-learn__list h3 { margin-top: 10px; font-size: 24px; line-height: 32px; transition: color .45s ease; }
      .kq-learn__list li.is-active h3 { color: #1E5BE0; }
      .kq-learn__list li > p:last-child { font-size: 14px; }
      .kq-learn__list li:not(.is-active) h3 { color: #1F2124; }
      .kq-learn__list li:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
      .kq-learn__stack { position: relative; display: block; height: 480px; }
      .kq-learn__stack .kq-polaroid {
        --pmax-h: 400px; position: absolute; left: 50%; top: 50%; width: max-content; max-width: min(470px, 82%); padding: 14px; margin: 0; translate: -50% -50%;
        transform: rotate(var(--r)) translate(var(--tx), var(--ty));
        transition: transform .55s cubic-bezier(.65, 0, .35, 1), box-shadow .55s ease, z-index 0s linear .27s;
      }
      .kq-learn__stack .kq-polaroid:nth-child(1) { --r: -2deg; --tx: -40px; --ty: 10px; }
      .kq-learn__stack .kq-polaroid:nth-child(2) { --r: 7deg; --tx: 30px; --ty: -12px; }
      .kq-learn__stack .kq-polaroid:nth-child(3) { --r: 3deg; --tx: 10px; --ty: 18px; }
      /* the incoming photo lifts out and slides to the front; it swaps above the others halfway through the move */
      .kq-learn__stack .kq-polaroid.is-top { z-index: 3; --r: 3deg; --tx: 0px; --ty: 0px; box-shadow: 0 22px 50px rgba(31, 33, 36, .22); animation: kq-lift .55s cubic-bezier(.65, 0, .35, 1); }
      @keyframes kq-lift { 45% { translate: calc(-50% + 70px) calc(-50% - 24px); } }
    }

    /* Attrition */
    .kq-attrition { position: relative; margin-top: 40px; padding: 180px 0 40px; overflow: hidden; }
    /* The artwork fades into the page on every edge (Figma): two crossed gradient masks soften the top-left wrist and
       the bottom-right forearm, so no edge of the image is ever visible. Height follows the SVG (763 x 371). */
    .kq-attrition__art {
      position: absolute; right: 0; top: 16px; width: min(380px, 100%); max-width: none; height: auto; aspect-ratio: 763 / 371;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%);
      mask-composite: intersect;
    }
    @media (min-width: 1024px) {
      .kq-attrition { min-height: 420px; padding: 110px 0 80px; }
      .kq-attrition { margin-top: 0; }
      .kq-attrition__art { right: 0; top: 40px; width: 763px; }
    }

    /* Celebrations: photos only. Mobile: a swipeable row of polaroids. Desktop: the enterprise-integration photo deck
       inside a grey rounded panel: the polaroids rest in a hand-placed stack at the centre and, while the panel is in
       view (js adds .is-spread), fan out into a 3 x 2 grid; leaving gathers them back. Transitions (not keyframes), so
       either move can reverse mid-way without a jump; the stagger runs in reading order going out, reversed coming back. */
    .kq-moments { margin-top: 20px; }
    .kq-moments__stack { display: flex; gap: 16px; margin: 24px -20px 0; padding: 0 20px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .kq-moments__stack::-webkit-scrollbar { display: none; }
    .kq-moments__stack .kq-polaroid { --pmax-h: 250px; flex: none; width: max-content; max-width: 330px; padding: 10px; scroll-snap-align: start; scroll-margin-left: 20px; }
    @media (min-width: 1024px) {
      .kq-moments {
        position: relative; height: 720px; margin-top: 40px; overflow: hidden; border-radius: 12px; background: #F5F6F9;
        /* grid columns sit with equal gaps between them and at both sides (cards are up to 288px wide once scaled) */
        --gx: calc((min(100vw - 120px, 1160px) + 288px) / 4);
      }
      @supports (width: 1cqw) {
        .kq-moments { container-type: inline-size; }
        .kq-moments__stack { --gx: calc((100cqw + 288px) / 4); }
      }
      .kq-moments__stack { position: absolute; left: 50%; top: 50%; display: block; width: 0; height: 0; margin: 0; padding: 0; overflow: visible; }
      .kq-moments__stack .kq-polaroid {
        --pmax-h: 240px; --i: 0; position: absolute; left: 0; top: 0; max-width: 360px; padding: 15px 15px 15px;
        translate: -50% -50%; box-shadow: 0 1px 2px rgba(31, 33, 36, .04), 0 12px 30px rgba(31, 33, 36, .1);
        transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) calc((5 - var(--i)) * 80ms), translate .6s ease;
      }
      .kq-moments.is-spread .kq-moments__stack .kq-polaroid { transition-delay: calc(var(--i) * 120ms), 0s; }
      /* the stack: first photo on top, each one a little offset and tilted */
      .kq-moments__stack .kq-polaroid:nth-child(1) { --i: 0; z-index: 6; transform: rotate(3deg); }
      .kq-moments__stack .kq-polaroid:nth-child(2) { --i: 1; z-index: 5; transform: translate(12px, 22px) rotate(-4deg); }
      .kq-moments__stack .kq-polaroid:nth-child(3) { --i: 2; z-index: 4; transform: translate(26px, 46px) rotate(5deg); }
      .kq-moments__stack .kq-polaroid:nth-child(4) { --i: 3; z-index: 3; transform: translate(20px, 34px) rotate(-2deg); }
      .kq-moments__stack .kq-polaroid:nth-child(5) { --i: 4; z-index: 2; transform: translate(4px, 14px) rotate(6deg); }
      .kq-moments__stack .kq-polaroid:nth-child(6) { --i: 5; z-index: 1; transform: translate(30px, 40px) rotate(-6deg); }
      /* the grid */
      .kq-moments.is-spread .kq-polaroid:nth-child(1) { transform: translate(calc(-1 * var(--gx)), -165px) rotate(-2deg) scale(.8); }
      .kq-moments.is-spread .kq-polaroid:nth-child(2) { transform: translate(0px, -165px) rotate(1deg) scale(.8); }
      .kq-moments.is-spread .kq-polaroid:nth-child(3) { transform: translate(var(--gx), -165px) rotate(2deg) scale(.8); }
      .kq-moments.is-spread .kq-polaroid:nth-child(4) { transform: translate(calc(-1 * var(--gx)), 165px) rotate(1deg) scale(.8); }
      .kq-moments.is-spread .kq-polaroid:nth-child(5) { transform: translate(0px, 165px) rotate(-1deg) scale(.8); }
      .kq-moments.is-spread .kq-polaroid:nth-child(6) { transform: translate(var(--gx), 165px) rotate(-2deg) scale(.8); }
      /* once a card has landed in the grid it keeps drifting gently on its own (translate, so the grid transform is
         untouched); the loop starts from the resting spot, so there is no jump, and eases back when the stack gathers */
      .kq-moments.is-spread .kq-moments__stack .kq-polaroid {
        animation: kq-moment-drift var(--ft) ease-in-out calc(1.4s + var(--i) * 120ms) infinite alternate;
      }
      .kq-moments__stack .kq-polaroid:nth-child(1) { --fx: 6px;  --fy: -8px; --ft: 5.2s; }
      .kq-moments__stack .kq-polaroid:nth-child(2) { --fx: -5px; --fy: 7px;  --ft: 6.1s; }
      .kq-moments__stack .kq-polaroid:nth-child(3) { --fx: -7px; --fy: -6px; --ft: 4.8s; }
      .kq-moments__stack .kq-polaroid:nth-child(4) { --fx: 5px;  --fy: 8px;  --ft: 5.7s; }
      .kq-moments__stack .kq-polaroid:nth-child(5) { --fx: 7px;  --fy: -7px; --ft: 6.4s; }
      .kq-moments__stack .kq-polaroid:nth-child(6) { --fx: -6px; --fy: 6px;  --ft: 5s; }
      /* opening photo: the same polaroid, lying on top of the stack at the top card's angle; it fades gently and lifts
         away as the deck fans out, and is back on the stack (shown again while the panel is out of view) for the next visit */
      .kq-moments__intro {
        --pmax-h: 240px; position: absolute; left: 50%; top: 50%; z-index: 7; max-width: 360px; padding: 15px;
        translate: -50% -50%; transform: rotate(3deg);
        box-shadow: 0 1px 2px rgba(31, 33, 36, .04), 0 12px 30px rgba(31, 33, 36, .1);
        transition: opacity .5s ease, transform .5s ease, visibility 0s;
        will-change: opacity, transform;
      }
      .kq-moments { cursor: pointer; } /* a click spreads / stacks the deck */
      .kq-moments:focus-visible { outline: 2px solid #015AEB; outline-offset: 4px; }
      .kq-moments.is-intro-done .kq-moments__intro {
        opacity: 0; visibility: hidden; transform: rotate(3deg) translateY(-12px) scale(1.03);
        transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1), transform 1.2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.2s;
      }
    }
    .kq-moments__intro { display: none; } /* mobile: the photos are a swipe row, no opening photo */
    @media (min-width: 1024px) { .kq-moments .kq-moments__intro { display: block; } }
    @keyframes kq-moment-drift {
      0%   { translate: -50% -50%; }
      50%  { translate: calc(-50% + var(--fx)) calc(-50% + var(--fy) * .4); }
      100% { translate: calc(-50% + var(--fx) * .3) calc(-50% + var(--fy)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .kq-learn__indicator, .kq-learn__stack .kq-polaroid.is-top { transition: none; animation: none; }
      .kq-journey__panel, .kq-hiker, .kq-jmap--green, .kq-learn__stack .kq-polaroid, .kq-moments__stack .kq-polaroid, .kq-life__cards li,
      .kq-space__track, .kq-slide { transition: none; }
      .kq-moments.is-spread .kq-moments__stack .kq-polaroid { animation: none; }
      .kq-moments .kq-moments__intro, .kq-moments.is-intro-done .kq-moments__intro { transition: none; }    }
    @media (min-width: 1024px) { .kq-space__progress { display: block; } }

    /* Knowing QCS — mobile layout refinements (Figma mobile) */
    .kq-learn__indicator { display: none; } /* desktop-only hover highlight; must not take up space on mobile */
    @media (max-width: 1023px) {
      /* Fresh ideas: photo first, then the numbered points */
      .kq-ideas__img { order: -1; height: auto; aspect-ratio: 525 / 525; }
      /* Workspace: every card the same height. workspace.svg carries 20px transparent bands above and below its photo
         (620 x 460, photo 420 tall), so that image is drawn taller and pulled up/down to trim the bands. */
      .kq-slide { display: flex; flex-direction: column; }
      .kq-slide img { height: 238px; }
      .kq-slide:first-child img { height: calc(238px * 460 / 420); margin: calc(238px * -20 / 420) 0; }
      .kq-slide p { flex: 1; }
      /* Attrition: tagline first, hands centred underneath */
      .kq-attrition { display: flex; flex-direction: column; margin-top: 0; padding: 60px 0 20px; }
      /* Mobile uses its own pre-cropped strip (attrition-hands-mob.png, 390 x 112): full width, centred, natural ratio */
      .kq-attrition > div { width: 100%; }
      .kq-attrition__frame { order: 2; display: block; width: 100%; margin-top: 16px; }
      .kq-attrition__art {
        position: static; display: block; width: 100%; max-width: 390px; height: auto; aspect-ratio: 390 / 112;
        margin: 0 auto; -webkit-mask-image: none; mask-image: none;
      }
      /* Celebrations: room for the polaroid shadows on every side; a clearly defined shadow between cards */
      .kq-moments__stack { padding: 16px 20px 36px; margin-top: 8px; }
      .kq-moments__stack .kq-polaroid { box-shadow: 0 2px 6px rgba(31, 33, 36, .08), 0 14px 30px rgba(31, 33, 36, .14); }
    }
    @media (min-width: 1024px) { .kq-attrition__frame { display: contents; } }
    /* Tablets: the 390px strip no longer reaches the screen edges, so soften its cropped sides */
    @media (min-width: 431px) and (max-width: 1023px) {
      .kq-attrition__art {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
      }
    }

    /* ---------- Case Studies listing ---------- */
    .csl-search {
      display: flex; align-items: center; width: 100%; max-width: 400px; height: 50px; margin-top: 24px; padding: 0 5px 0 20px;
      border: 1px solid #ECEDEF; border-radius: 9999px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
    }
    .csl-search:focus-within { border-color: #9DBDF3; box-shadow: 0 0 0 3px rgba(1, 90, 235, .12); }
    .csl-search input { flex: 1; min-width: 0; border: 0; background: none; font-size: 13px; color: #1F2124; outline: none; }
    .csl-search input::placeholder { color: #A9ADB5; }
    .csl-search input::-webkit-search-cancel-button { display: none; }
    .csl-search button {
      display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px;
      background: #1F2124; color: #fff; transition: background-color .2s ease;
    }
    .csl-search button:hover { background: #000; }
    .csl-search button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    .csl-search svg, .csl-pages svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .csl-grid { display: grid; gap: 28px; }
    .csl-card__media { overflow: hidden; border-radius: 6px; background: #EEF1F5; }
    .csl-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 570 / 276; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
    .csl-card:hover .csl-card__media img { transform: scale(1.04); }
    .csl-card__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: 11px; line-height: 16px; color: #8A909B; }
    .csl-card__meta > div { display: flex; align-items: center; gap: 6px; }
    .csl-pill { padding: 1px 10px; border-radius: 9999px; }
    .csl-pill--line { background: #FEDFB0; color: #946417; }
    .csl-pill--industry { background: #D3EFFF; color: #1D5F8C; }
    .csl-card__title { margin-top: 12px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .csl-card__copy {
      margin-top: 8px; font-size: 13px; line-height: 17px; color: #5B6472;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .csl-empty { margin-top: 24px; font-size: 15px; color: #5B6472; }
    .csl-empty button { color: #015AEB; text-decoration: underline; text-underline-offset: 3px; }
    /* Pagination (Figma): faint disabled arrow, a soft grey circle on the current page, plain numbers, dark active arrow */
    .csl-pages { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; }
    .csl-pages button {
      display: flex; align-items: center; justify-content: center; flex: none; border-radius: 9999px;
      font-size: 13px; line-height: 1; color: #1F2124; transition: background-color .25s ease, color .25s ease, transform .25s ease;
    }
    .csl-pages .csl-pages__num { width: 30px; height: 30px; }
    .csl-pages .csl-pages__num[aria-current="page"] { background: #EFF0F1; }
    .csl-pages .csl-pages__num:not([aria-current]):hover { background: #F7F7F8; }
    .csl-pages .csl-pages__arrow { width: 36px; height: 36px; margin: 0 2px; background: #1F2124; color: #fff; }
    .csl-pages .csl-pages__arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
    .csl-pages .csl-pages__arrow:disabled { background: #F7F7F8; color: #D2D4D8; cursor: default; }
    .csl-pages .csl-pages__arrow:not(:disabled):hover { background: #000; }
    .csl-pages .csl-pages__arrow[aria-label="Next page"]:not(:disabled):hover svg { transform: translateX(2px); }
    .csl-pages .csl-pages__arrow[aria-label="Previous page"]:not(:disabled):hover svg { transform: translateX(-2px); }
    .csl-pages button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    /* page change: the grid fades out, swaps, and fades back in */
    .csl-grid { transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
    .csl-grid.is-swapping { opacity: 0; transform: translateY(8px); }
    @media (min-width: 768px) { .csl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } }
    @media (min-width: 1024px) {
      .csl-search { margin-top: 18px; }
      .csl-grid { row-gap: 46px; }
      .csl-card__meta { gap: 8px 40px; margin-top: 22px; }
      /* desktop titles stay on one line and truncate (Figma); descriptions clamp to two lines */
      .csl-card__title { margin-top: 18px; font-size: 20px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .csl-card__copy { margin-top: 10px; font-size: 13px; line-height: 20px; -webkit-line-clamp: 2; }
      .csl-pages { gap: 8px; margin-top: 60px; }
      .csl-pages button { font-size: 14px; }
      .csl-pages .csl-pages__num { width: 40px; height: 40px; }
      .csl-pages .csl-pages__arrow { width: 48px; height: 48px; }
      .csl-pages .csl-pages__arrow svg { width: 20px; height: 20px; }
    }
    @media (prefers-reduced-motion: reduce) { .csl-card__media img, .csl-grid { transition: none; } }

    /* ---------- Case study detail ---------- */
    .csd-back { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; font-size: 13px; color: #1E5BE0; }
    .csd-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
    .csd-back:hover svg { transform: translateX(-3px); }
    .csd-back:focus-visible { outline: 2px solid #015AEB; outline-offset: 3px; }
    .csd-intro { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
    .csd-client { display: flex; align-items: center; gap: 14px; }
    .csd-client img { width: 64px; height: auto; }
    .csd-client figcaption { font-size: 13px; line-height: 17px; color: #5B6472; }
    .csd-facts { display: grid; gap: 14px; margin-top: 28px; }
    .csd-facts dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #3F4250; }
    .csd-facts dd { margin-top: 2px; font-size: 14px; color: #1F2124; }
    .csd-banner { display: block; width: 100%; height: auto; aspect-ratio: 525 / 270; margin-top: 24px; object-fit: cover; object-position: 30% center; }
    /* Mobile/tablet (Figma mobile): the photo comes before the Client / Service Line / Industry facts */
    @media (max-width: 1023px) {
      .csd-head { display: flex; flex-direction: column; }
      .csd-head > .csd-back { align-self: flex-start; }
      .csd-head > .csd-banner { order: 1; margin-top: 30px; }
      .csd-head > .csd-facts { order: 2; margin-top: 24px; }
    }
    .csd-h2 { font-size: 26px; line-height: 32px; font-weight: 400; letter-spacing: -.02em; color: #1F2124; }
    @media (min-width: 768px) { .csd-h2 { font-size: 34px; line-height: 42px; } } /* tablet step: previously held the mobile size until 1024px, then jumped */
    .csd-objective { margin-top: 48px; background: linear-gradient(90deg, #FEF4E7 0%, #F8F4F9 45%, #EEF0FD 75%, #E4F0FE 100%); }
    /* Mobile/tablet (Figma mobile): white along the top edge, fading down into the peach / lavender / blue wash */    @media (max-width: 1023px) {      .csd-objective {        background:          linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, 0) 100%),          linear-gradient(90deg, #FFF2E0 0%, #FBF1EA 17%, #F0EBF9 50%, #E2E8FD 80%, #DBEAFD 100%);      }    }
    .csd-challenges { display: grid; gap: 22px; margin-top: 20px; }
    .csd-challenges li { padding-top: 14px; border-top: 1px solid #E3E4E7; font-size: 14px; line-height: 20px; color: #1F2124; }
    .csd-challenges span, .csd-steps span, .csd-outcomes span { display: block; font-size: 11px; color: #5B6472; }
    .csd-challenges span { margin-bottom: 14px; }
    .csd-solution { margin-top: 48px; }
    .csd-solution__img { display: block; width: calc(100% - 40px); height: auto; aspect-ratio: 350 / 230; margin: 0 auto; object-fit: cover; }
    .csd-solution__panel {
      /* Figma: pale blue-white top fifth deepening to a soft periwinkle near the bottom, with a white inner glow
         that lightens all four edges */
      padding: 26px 20px 30px;
      background: linear-gradient(180deg, #F5F9FF 0%, #F5F9FF 20%, #EBF1FE 36%, #DCE8FD 48%, #CDDFFC 62%, #C1D7FA 74%, #B9D2FA 86%, #BBD3FA 94%, #C6DAFB 100%);
      box-shadow: inset 0 0 50px 10px rgba(255, 255, 255, .72);
    }
    .csd-steps { display: grid; gap: 22px; margin-top: 20px; }
    .csd-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; }
    .csd-steps span { padding-top: 2px; }
    .csd-steps__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #3F4250; }
    .csd-steps h3 { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 400; color: #1F2124; }
    .csd-steps h3 + p { margin-top: 4px; font-size: 12px; line-height: 16px; color: #5B6472; }
    .csd-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
    .csd-stack li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 4px; text-align: center; font-size: 11px; line-height: 14px; color: #1F2124; }
    .csd-stack img { width: auto; height: 34px; }
    .csd-outcomes { display: grid; gap: 14px; margin-top: 20px; }
    .csd-outcomes li { padding: 22px 20px; border-radius: 6px; background: #F7F7F8; transition: background-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
    .csd-outcomes h3 { margin-top: 14px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .csd-outcomes p { margin-top: 6px; font-size: 14px; line-height: 20px; color: #5B6472; }
    @media (min-width: 768px) {
      .csd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .csd-challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
      .csd-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .csd-stack li { font-size: 14px; }
    }
    @media (min-width: 1024px) {
      .csd-intro { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 36px; }
      .csd-client { flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 6px; text-align: right; }
      .csd-client img { width: 74px; }
      .csd-client figcaption { font-size: 14px; line-height: 20px; }
      .csd-facts { gap: 24px; margin-top: 60px; }
      .csd-facts dt { font-size: 11px; }
      .csd-facts dd { margin-top: 4px; font-size: 15px; }
      .csd-banner { aspect-ratio: 1160 / 300; margin-top: 36px; object-position: center; }
      .csd-h2 { font-size: 42px; line-height: 50px; letter-spacing: -.03em; }
      .csd-objective { margin-top: 60px; }
      .csd-challenges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
      .csd-challenges li { padding-top: 18px; font-size: 15px; line-height: 22px; }
      .csd-challenges span { margin-bottom: 30px; font-size: 12px; }
      .csd-solution { display: grid; grid-template-columns: 1fr 1fr; margin-top: 100px; }
      .csd-solution__img { width: 100%; height: 100%; aspect-ratio: auto; min-height: 515px; margin: 0; }
      .csd-solution__panel { padding: 40px 60px 40px 40px; }
      .csd-steps { gap: 30px; margin-top: 30px; }
      .csd-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px; }
      .csd-steps h3 { font-size: 20px; line-height: 26px; }
      .csd-steps h3 + p { font-size: 14px; line-height: 18px; max-width: 520px; }
      .csd-stack { margin-top: 30px; }
      .csd-stack li { min-height: 140px; padding: 20px 10px; gap: 14px; font-size: 20px; line-height: 26px; }
      .csd-stack li + li { border-left: 1px solid #E7E7EA; }
      .csd-stack img { height: 54px; }
      .csd-stack li:last-child img { height: 64px; }
      .csd-outcomes { gap: 24px; margin-top: 40px; }
      .csd-outcomes li { min-height: 166px; padding: 32px 28px; }
      .csd-outcomes li:hover { background: #F1F2F4; transform: translateY(-2px); }
      .csd-outcomes span { font-size: 12px; }
      .csd-outcomes h3 { margin-top: 12px; font-size: 24px; line-height: 30px; }
    }
    @media (prefers-reduced-motion: reduce) { .csd-back svg, .csd-outcomes li { transition: none; } }
    /* a card with a detail page is clickable as a whole: the title link stretches over the card */
    .csl-card { position: relative; }
    .csl-card__link { color: inherit; transition: color .2s ease; }
    .csl-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
    .csl-card:hover .csl-card__link { color: #015AEB; }
    .csl-card__link:focus-visible { outline: none; }
    .csl-card:has(.csl-card__link:focus-visible) { outline: 2px solid #015AEB; outline-offset: 6px; border-radius: 6px; }
    /* Case study variants: wide wordmark client logos, banner framed to the right, and stack logos of different shapes */
    .csd-client--wide img { width: 96px; }
    .csd-banner--right { object-position: 78% center; }
    .csd-stack img.csd-stack__wordmark { width: auto; height: 18px; }
    .csd-stack img.csd-stack__icon { height: 26px; }
    @media (min-width: 1024px) {
      .csd-client--wide img { width: 150px; }
      .csd-stack img.csd-stack__wordmark { height: 34px; margin-bottom: 10px; }
      .csd-stack img.csd-stack__icon { height: 40px; margin-bottom: 6px; }
      .csd-banner--right { object-position: center; }
    }
    /* every stack logo sits in a fixed-height slot, so logos and labels line up even when a label wraps */
    .csd-stack li { display: grid; grid-template-rows: 40px auto; grid-template-columns: minmax(0, 1fr); align-content: start; justify-content: stretch; justify-items: center; align-items: center; }
    .csd-stack li > img { max-height: 40px; object-fit: contain; }
    @media (min-width: 1024px) {
      .csd-stack li { grid-template-rows: 70px auto; padding-top: 24px; }
      .csd-stack li > img { max-height: 70px; }
      .csd-stack img.csd-stack__wordmark, .csd-stack img.csd-stack__icon { margin-bottom: 0; }
    }
    /* Blog listing cards (Figma): no tags, title sits 18px under the image */
    .csl-card--blog .csl-card__title { margin-top: 16px; }
    @media (min-width: 1024px) { .csl-card--blog .csl-card__title { margin-top: 20px; } .csl-card--blog .csl-card__copy { margin-top: 8px; } }
    /* Blogs hero (mobile, Figma): pale at the top, deepening into a peach / lavender / sky-blue wash that ends on a
       crisp edge 32px below the search bar; then a 20px gap before the first card, whose image is a little taller */
    @media (max-width: 1023px) {
      .bl-hero {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 72%),
          linear-gradient(90deg, #F3E5E2 0%, #E9E0F0 22%, #D5D6F7 50%, #C5D8FC 78%, #B8DBFE 100%);
      }
      .bl-hero > div { padding-bottom: 32px; }
      .bl-hero .csl-search { height: 40px; margin: 20px 0 0; padding-right: 3px; }
      .bl-hero .csl-search button { width: 34px; height: 34px; }
      .bl-hero + section > div { padding-top: 20px; }
      .csl-card--blog .csl-card__media img { aspect-ratio: 262 / 150; }
    }

    /* ---------- Blog detail ---------- */
    .bd .csd-back { font-size: 14px; }
    .bd__col { max-width: 840px; margin: 0 auto; padding: 0 20px 16px; }
    .bd__head { display: flex; flex-direction: column; margin-top: 22px; }
    .bd__title { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -.02em; color: #3A3B3E; }
    @media (min-width: 768px) { .bd__title { font-size: 44px; line-height: 54px; letter-spacing: -.03em; } } /* tablet step: previously held the mobile size until 1024px, then jumped */
    .bd__lead { margin-top: 12px; font-size: 14px; line-height: 19px; color: #5B6472; }
    /* mobile (Figma): image first, then the meta */
    .bd__img { order: 1; display: block; width: 100%; height: auto; aspect-ratio: 350 / 120; margin-top: 16px; object-fit: cover; }
    .bd__meta { order: 2; display: grid; gap: 10px; margin-top: 24px; }
    .bd__meta dt { font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: #1F2124; }
    .bd__meta dd { margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 500; color: #1F2124; }
    .bd__body { margin-top: 45px; font-size: 12px; line-height: 16px; color: #5B6472; }
    .bd__body h2 { margin-top: 16px; font-size: 16px; line-height: 22px; font-weight: 500; color: #1F2124; }
    .bd__body h2 + p { margin-top: 2px; }
    .bd__body a { color: #015AEB; font-weight: 500; text-underline-offset: 3px; }
    .bd__body a:hover { text-decoration: underline; }
    /* numbered questions: question in ink, answer below in body grey */
    .bd__qa { margin-top: 10px; counter-reset: bd-q; display: grid; gap: 6px; }
    .bd__qa li { position: relative; padding-left: 18px; counter-increment: bd-q; }
    .bd__qa h3 { font-size: 13px; line-height: 18px; font-weight: 400; color: #1F2124; }
    .bd__qa h3::before { content: counter(bd-q) "."; position: absolute; left: 4px; }
    .bd__qa p { margin-top: 2px; }
    .bd__sources { margin-top: 20px; }
    .bd__body .bd__sources h2 { margin: 0 0 2px; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
    .bd__sources li { line-height: 15px; }
    @media (min-width: 768px) { .bd__col { padding: 0 32px 40px; } .bd__meta { grid-template-columns: repeat(2, 350px); } }
    @media (min-width: 1024px) {
      .bd__col { padding: 0 20px 80px; }
      .bd__head { margin-top: 36px; }
      .bd__title { font-size: 54px; line-height: 72px; letter-spacing: -.04em; }
      .bd__lead { margin-top: 20px; font-size: 18px; line-height: 25px; }
      .bd__meta { order: 0; gap: 0; margin-top: 46px; }
      .bd__meta dt { font-size: 12px; }
      .bd__meta dd { margin-top: 6px; font-size: 16px; }
      .bd__img { order: 0; aspect-ratio: 800 / 300; margin-top: 40px; }
      .bd__body { margin-top: 40px; font-size: 16px; line-height: 24px; }
      .bd__body h2 { margin-top: 20px; font-size: 20px; line-height: 28px; font-weight: 400; }
      .bd__body h2 + p { margin-top: 4px; }
      .bd__qa { margin-top: 4px; gap: 8px; margin-right: -8px; }
      .bd__qa li { padding-left: 12px; }
      .bd__qa h3 { padding-left: 12px; font-size: 16px; line-height: 24px; }
      .bd__qa h3::before { left: 5px; }
      .bd__qa p { margin-top: 0; }
      .bd__sources { margin-top: 40px; }
      .bd__body .bd__sources h2 { margin-bottom: 4px; }
      .bd__sources li { line-height: 24px; }
    }
    /* rich article content: bold lead-ins, bullet / numbered lists, tables, italic notes, inline code */
    .bd__body strong { font-weight: 500; color: #1F2124; }
    .bd__body em { font-style: italic; }
    .bd__body code { padding: 1px 4px; border-radius: 3px; background: #F1F3F6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; color: #1F2124; }
    .bd__list { display: grid; gap: 6px; margin-top: 6px; padding-left: 18px; }
    ul.bd__list { list-style: disc; }
    ol.bd__list { list-style: decimal; }
    .bd__list li::marker { color: #1F2124; }
    .bd__list + p { margin-top: 10px; }
    .bd__table-wrap { margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bd__table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 12px; line-height: 16px; }
    .bd__table th, .bd__table td { padding: 8px 10px; border: 1px solid #E1E4E9; text-align: left; vertical-align: top; }
    .bd__table thead th { background: #F5F6F8; font-weight: 500; color: #1F2124; }
    .bd__table tbody th { font-weight: 500; color: #1F2124; }
    .bd__table-wrap--narrow .bd__table { min-width: 0; }
    .bd__note { margin-top: 12px; font-style: italic; }
    .bd__sources li + li { margin-top: 2px; }
    @media (min-width: 1024px) {
      .bd__list { gap: 8px; margin-top: 8px; padding-left: 22px; }
      .bd__list + p { margin-top: 14px; }
      .bd__table-wrap { margin-top: 12px; }
      .bd__table { font-size: 15px; line-height: 22px; }
      .bd__table th, .bd__table td { padding: 10px 14px; }
      .bd__note { margin-top: 16px; }
    }

    /* ---------- AskAIRO product page ---------- */
    .pd-hero { display: flex; flex-direction: column; gap: 22px; }
    .pd-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 436 / 460; object-fit: cover; }
    .pd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; font-size: 12px; color: #4A5160; }
    .pd-pills li { padding: 3px 10px; border-radius: 9999px; background: #ECEDF1; }
    .pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
    .pd-btn {
      display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; font-size: 14px;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    .pd-btn--dark { background: #1F2124; color: #fff; }
    .pd-btn--dark:hover { background: #000; }
    .pd-btn--ghost { border: 1px solid #E3E6EC; background: #fff; color: #1E5BE0; }
    .pd-btn--ghost:hover { border-color: #9DBDF3; }
    .pd-btn:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    .pd-h2 { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.02em; color: #1F2124; }
    @media (min-width: 768px) { .pd-h2 { font-size: 34px; line-height: 42px; } } /* tablet step: previously held the mobile size until 1024px, then jumped */

    .pd-stats__value { font-size: 18px; line-height: 24px; color: #1F2124; }
    .pd-stats__label { font-size: 11px; line-height: 14px; color: #5B6472; }

    .pd-caps { display: grid; gap: 12px; margin-top: 22px; }
    .pd-caps li { padding: 18px 20px; border-radius: 4px; background: #F8F9FB; transition: background-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
    .pd-caps svg, .pd-dep__icon svg { width: 30px; height: 30px; fill: none; stroke: #7371F7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .pd-caps h3 { margin-top: 14px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pd-caps p { margin-top: 8px; max-width: 230px; font-size: 13px; line-height: 20px; color: #5B6472; }

    /* benefits ticker: the list is doubled so the loop is seamless; hover pauses it */
    .pd-ticker { margin-top: 24px; overflow: hidden; }
    .pd-ticker__track { display: flex; gap: 20px; width: max-content; padding: 0 20px; animation: pd-ticker 40s linear infinite; }
    .pd-ticker:hover .pd-ticker__track { animation-play-state: paused; }
    .pd-ticker li {
      display: flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 24px; border: 1px solid #C9D6EF;
      border-radius: 4px; background: #EEF2FD; font-size: 15px; color: #1F2124; white-space: nowrap;
    }
    .pd-ticker li::before {
      content: ""; width: 14px; height: 14px; flex: none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2124' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    @keyframes pd-ticker { to { transform: translateX(-50%); } }

    .pd-case { margin-top: 48px; }
    .pd-case__results { display: grid; gap: 12px; margin-top: 24px; font-size: 16px; line-height: 22px; font-weight: 500; color: #1F2124; }
    .pd-case__results strong { display: block; font-size: 20px; font-weight: 500; }
    .pd-case__results span { display: block; font-size: 12px; font-weight: 400; color: #5B6472; }

    /* deployment: Teams card first on mobile (Figma mobile) */
    .pd-dep { display: flex; flex-direction: column-reverse; gap: 16px; margin-top: 24px; }
    .pd-dep__list { display: grid; gap: 12px; }
    .pd-dep__list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: 4px; background: #F8F9FB; }
    .pd-dep__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: #fff; }
    .pd-dep__icon svg { width: 22px; height: 22px; }
    .pd-dep h3 { font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pd-dep__list p { margin-top: 4px; font-size: 13px; line-height: 18px; color: #5B6472; }
    .pd-teams { padding: 16px; border-radius: 4px; background: #F8F9FB; }
    .pd-teams img { display: block; width: 100%; height: auto; aspect-ratio: 554 / 133; object-fit: cover; }
    .pd-teams h3 { margin-top: 26px; }
    .pd-teams > p { margin-top: 8px; font-size: 13px; line-height: 20px; color: #5B6472; }
    .pd-teams ul { display: grid; gap: 12px; margin-top: 18px; }
    .pd-teams li {
      padding: 6px 10px; border-left: 3px solid #1E5BE0; font-size: 16px; font-weight: 500; color: #1F2124;
      background: linear-gradient(90deg, #E4ECFC, #fff 30%);
    }

    .pd-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
    .pd-mods li {
      display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 4px; text-align: center;
      font-size: 13px; line-height: 17px; color: #1F2124;
    }
    .pd-mods li:not(:nth-child(3n)) { border-right: 1px solid #ECEDEF; }
    .pd-mods li:nth-child(-n + 6) { border-bottom: 1px solid #ECEDEF; }
    .pd-mods svg { width: 30px; height: 30px; fill: none; stroke: #1E5BE0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

    @media (min-width: 768px) {
      .pd-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pd-actions { display: flex; }
    }
    @media (min-width: 1024px) {
      .pd-hero { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 48px; }
      .pd-hero__img { flex: none; width: 380px; }
      .pd-pills { margin-top: 20px; font-size: 13px; }
      .pd-pills li { padding: 5px 12px; }
      .pd-actions { margin-top: 20px; gap: 20px; }
      .pd-h2 { font-size: 42px; line-height: 50px; letter-spacing: -.03em; }
      .pd-stats {
        margin-top: 40px;
        /* Figma: white top fading into a soft blue band (deepest ~75% down) that ends on a crisp bottom edge; a light
           white glow keeps the far left/right and the centre slightly paler */
        background:
          linear-gradient(90deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, .45) 100%),
          radial-gradient(18% 70% at 50% 70%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)),
          linear-gradient(180deg, #fff 0%, #FCFDFF 20%, #F4F8FE 45%, #EDF3FD 70%, #EBF2FD 80%, #F0F5FE 95%, #F2F6FE 100%);
      }
      .pd-stats__value { font-size: 20px; }
      .pd-caps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
      .pd-caps li { min-height: 250px; padding: 24px 20px; }
      .pd-caps li:hover { background: #F1F3F8; transform: translateY(-3px); }
      .pd-caps h3 { margin-top: 26px; font-size: 20px; }
      .pd-caps p { margin-top: 14px; font-size: 14px; }
      .pd-ticker { margin-top: 48px; }
      .pd-ticker__track { padding-left: 60px; }
      .pd-ticker li { font-size: 18px; }
      .pd-case { margin-top: 110px; }
      .pd-case .csd-solution__img { min-height: 470px; }
      .pd-case .csd-solution__panel { padding: 46px 52px 40px 40px; }
      .pd-case__results { margin-top: 48px; font-size: 20px; line-height: 26px; }
      .pd-case__results strong { font-size: 22px; }
      .pd-dep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 586px); gap: 20px; margin-top: 40px; }
      .pd-dep__list { gap: 20px; }
      .pd-dep__list li { align-items: center; min-height: 88px; padding: 20px 24px; }
      .pd-dep__list p { font-size: 14px; }
      .pd-teams h3 { margin-top: 30px; padding: 0 16px; }
      .pd-teams > p { padding: 0 16px; font-size: 14px; }
      .pd-teams ul { padding: 0 16px; }
      .pd-mods { max-width: 714px; margin: 46px auto 0; }
      .pd-mods li { gap: 14px; padding: 0 10px 28px; font-size: 18px; }
      .pd-mods li:nth-child(n + 4) { padding-top: 30px; }
      .pd-mods svg { width: 32px; height: 32px; }
    }
    @media (min-width: 1280px) { .pd-hero__img { width: 436px; } }
    @media (prefers-reduced-motion: reduce) { .pd-ticker__track { animation: none; } .pd-ticker { overflow-x: auto; } .pd-caps li { transition: none; } }
    .pd-btn { white-space: nowrap; }
    @media (max-width: 767px) { .pd-btn { padding: 0 12px; } }
    @media (min-width: 1024px) {
      .pd-caps h3 { font-size: 19px; letter-spacing: -.01em; text-wrap: balance; } /* was nowrap: longer titles ran past the card padding */
      .pd-case .pd-h2 { font-size: 40px; letter-spacing: -.045em; }
      .pd-case .csd-solution__panel { padding-right: 24px; }
    }
    @media (min-width: 1280px) { .pd-case .pd-h2 { white-space: nowrap; } }
    /* AskAIRO proven case (Figma): 469px tall; the photo crops to fit and the button sits 40px above the bottom edge */
    @media (min-width: 1024px) {
      .pd-case { height: 469px; }
      .pd-case .csd-solution__img { height: 469px; min-height: 0; }
      .pd-case .csd-solution__panel { display: flex; flex-direction: column; align-items: flex-start; padding-top: 42px; padding-bottom: 40px; }
      .pd-case__results { margin-top: 40px; }
      .pd-case .pd-btn { margin-top: auto; }
    }
    /* AskAIRO mobile (Figma mobile) */
    @media (max-width: 1023px) {
      /* hero: label + heading, then the photo, then the copy; peach -> lavender -> blue wash fading to white */
      .pd-hero-wrap {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 55%, #fff 92%),
          linear-gradient(90deg, #F3E5E0 0%, #F3E5E4 10%, #E3E3F4 50%, #C6DEFD 100%);
      }
      .pd-hero { gap: 0; }
      .pd-hero__copy { display: contents; }
      .pd-hero__copy > p:first-child { order: 0; }
      .pd-hero__copy > h1 { order: 1; }
      .pd-hero__img { order: 2; margin-top: 24px; }
      .pd-hero__copy > h1 + p { order: 3; margin-top: 18px; }
      .pd-pills { order: 4; }
      .pd-actions { order: 5; }
      /* figures: white top deepening into a soft blue band with a crisp bottom edge */
      .pd-stats { background: linear-gradient(180deg, #fff 0%, #fff 30%, #F2F6FE 65%, #E7EFFD 100%); }
      .pd-stats > dl { padding-top: 28px; padding-bottom: 32px; }
      /* Teams card: square thumbnail beside the title and copy, list underneath */
      .pd-teams { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 20px 20px; border-radius: 8px; }
      .pd-teams .pd-teams__img { grid-row: 1 / span 2; width: 100px; height: 100px; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; border-radius: 2px; }
      .pd-teams h3 { margin-top: 4px; font-size: 16px; line-height: 22px; }
      .pd-teams > p { margin-top: 6px; }
      .pd-teams ul { grid-column: 1 / -1; margin-top: 18px; gap: 10px; }
      .pd-teams li { font-size: 15px; padding: 8px 12px; }
    }

    /* ---------- Shared header navigation (all pages) ---------- */
    /* Mobile: the menu drops below the header; Services / Resources expand inline. */
    .site-nav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 72px); overflow-y: auto; padding: 12px 20px 20px; border-bottom: 1px solid #E7E7EA; background: #fff; }
    .site-nav__list { display: flex; flex-direction: column; gap: 2px; }
    .site-nav__link {
      display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 8px;
      border-radius: 4px; font-size: 15px; letter-spacing: .06em; color: #2A3342; text-align: left;
      transition: color .2s ease, background-color .25s ease;
    }
    .site-nav__link:hover, .site-nav__link.is-current { color: #1E5BE0; }
    .site-nav__link:focus-visible, .site-nav__links a:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    /* plus that turns into a minus when open */
    .site-nav__plus { position: relative; flex: none; width: 11px; height: 11px; }
    .site-nav__plus::before, .site-nav__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1.4px; border-radius: 1px; background: currentColor; transition: transform .3s ease; }
    .site-nav__plus::after { transform: rotate(90deg); }
    .site-nav__item.is-open .site-nav__plus::after { transform: rotate(0deg); }
    .site-nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22, 1, .36, 1); }
    .site-nav__panel > * { min-height: 0; overflow: hidden; }
    .site-nav__item.is-open .site-nav__panel { grid-template-rows: 1fr; }
    .site-nav__links { display: grid; gap: 2px; padding-left: 12px; }
    .site-nav__links a { display: block; padding: 8px; border-radius: 4px; font-size: 15px; color: #1F2124; transition: color .2s ease, background-color .2s ease; }
    .site-nav__links a:hover { color: #1E5BE0; }
    .site-nav__links a[aria-current="page"] { color: #1E5BE0; }
    .site-nav__art { display: none; }
    /* blur everything below the header while a dropdown is open (all screen sizes; header height 72px / 64px) */
    .site-nav__scrim {
      display: block; position: fixed; inset: 72px 0 0; z-index: 40; pointer-events: none;
      background: rgba(150, 170, 215, .28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      opacity: 0; transition: opacity .3s ease;
    }
    .nav-dropdown-open .site-nav__scrim { opacity: 1; pointer-events: auto; }
    @media (min-width: 1024px) { .site-nav__scrim { top: 64px; } }

    @media (min-width: 1024px) {
      .site-nav { position: static; max-height: none; overflow: visible; padding: 0; border: 0; background: none; }
      .site-nav__list { flex-direction: row; align-items: center; gap: 30px; }
      .site-nav__item { position: static; }
      .site-nav__link { width: auto; padding: 8px 14px; font-size: 15px; }
      .site-nav__plus { width: 10px; height: 10px; }
      .site-nav__plus::before, .site-nav__plus::after { width: 10px; top: 4.5px; }
      .site-nav__item.is-open .site-nav__toggle { background: #EEF2FB; color: #1F2124; }
      .site-nav__toggle.is-current { background: #EEF2FB; color: #1E5BE0; }

      /* panel: white card centred under the nav, fades and drops in */
      .site-nav__panel {
        position: absolute; left: 50%; top: calc(100% + 12px); z-index: 60; display: flex; align-items: stretch;
        justify-content: space-between; gap: 30px; width: 664px; padding: 12px 12px 12px 22px;
        border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(31, 33, 36, .12);
        opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
        transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s;
      }
      .site-nav__panel > * { overflow: visible; }
      .site-nav__item.is-open .site-nav__panel {
        opacity: 1; visibility: visible; transform: translate(-50%, 0);
        transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s;
      }
      .site-nav__links { grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(3, auto); align-content: center; column-gap: 60px; row-gap: 14px; padding: 30px 0; }
      .site-nav__links a { padding: 6px 4px; font-size: 15px; }
      .site-nav__art { display: block; flex: none; width: 178px; height: 178px; border-radius: 8px; object-fit: cover; }

    }
    @media (prefers-reduced-motion: reduce) {
      .site-nav__panel, .site-nav__scrim, .site-nav__plus::before, .site-nav__plus::after { transition: none; }
    }

    /* Enterprise Applications lifecycle: same transitions as AI Enablement — a sliding rail indicator and stages that
       move up or down with the selection, all on one 0.6s curve. Stages share one grid cell, so nothing shifts. */
    .ea-stage-nav__indicator { display: none; }
    @media (min-width: 1024px) {
      .ea-stage-nav { --ease: cubic-bezier(.65, 0, .35, 1); --dur: .6s; }
      .ea-stage-nav__indicator {
        display: block; position: absolute; left: 20px; right: 20px; top: 0; height: 44px; border-radius: 6px;
        background: linear-gradient(180deg, #2C2E33, #1F2124); box-shadow: 0 6px 14px rgba(31, 33, 36, .22); pointer-events: none;
      }
      .ea-stage-nav.is-ready .ea-stage-nav__indicator { transition: transform var(--dur) var(--ease), height var(--dur) var(--ease); }
      .ea-stage-nav.ea-stage-nav > button { position: relative; z-index: 1; color: rgba(255, 255, 255, .88); transition: color var(--dur) var(--ease), background-color .3s ease; }
      .ea-stage-nav.ea-stage-nav > button[aria-selected="true"] { background: transparent; box-shadow: none; color: #fff; }

      #stage-track[data-ea-track] { --ease: cubic-bezier(.65, 0, .35, 1); --dur: .6s; display: grid; }
      [data-ea-track] > .ea-stage {
        display: grid; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; animation: none;
        transform: translateY(calc(var(--dir, 1) * -36px));
        transition: transform var(--dur) var(--ease), opacity calc(var(--dur) * .7) ease, visibility 0s linear var(--dur);
      }
      [data-ea-track] > .ea-stage.is-active {
        z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
        transition: transform var(--dur) var(--ease), opacity calc(var(--dur) * .75) ease calc(var(--dur) * .15), visibility 0s;
      }
      [data-ea-track] > .ea-stage.is-entering { transform: translateY(calc(var(--dir, 1) * 36px)); transition: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ea-stage-nav.is-ready .ea-stage-nav__indicator, [data-ea-track] > .ea-stage, [data-ea-track] > .ea-stage.is-active, .ea-stage-nav.ea-stage-nav > button { transition: none; }
    }

    /* Shared carousel buttons (js/carousel.js): Previous appears once you move past the first card; buttons fade
       when they reach an end rather than jumping. */
    .carousel-btn { transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, visibility 0s; }
    .carousel-btn:disabled { opacity: .35; cursor: default; }
    .carousel-btn:disabled:hover { background-color: #1F2124; }
    .carousel-btn.is-hidden { opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.85); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
    /* once scrolled, fade the left edge too so the previous card dips under the Previous button */
    .fade-right.is-scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 120px), transparent); }
    @media (max-width: 1023px) { .fade-right.is-scrolled { -webkit-mask-image: none; mask-image: none; } }
    @media (prefers-reduced-motion: reduce) { .carousel-btn, .carousel-btn.is-hidden { transition: none; } }
    /* Yahoo case study: small wordmark, and five solution steps set a little tighter (Figma) */
    .csd-client--wide img.csd-client__yahoo { width: 72px; }
    @media (min-width: 1024px) {
      .csd-client--wide img.csd-client__yahoo { width: 88px; }
      .csd-client--wide figcaption { white-space: nowrap; }
      .csd-solution--five .csd-solution__img { min-height: 608px; }
      .csd-solution--five .csd-steps { gap: 22px; margin-top: 26px; }
      .csd-solution--five .csd-steps h3 { font-size: 18px; line-height: 24px; }
    }

    /* Case study variants (generated pages): client logos sized by height, and grids that adapt to how many
       challenges, technologies and outcomes a study has. */
    .csd-client--logo img { width: auto; max-width: 140px; height: 30px; object-fit: contain; }
    .csd-client--logo img.csd-client__seal { height: 40px; }
    .csd-stack img.csd-stack__icon { width: auto; height: 26px; }
    .csd-stack li > span.csd-stack__pair { display: flex; gap: 8px; }
    .csd-stack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csd-stack--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csd-stack--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .csd-stack--5 > li { grid-column: span 2; }
    .csd-stack--5 > li:nth-child(4) { grid-column: 2 / span 2; }
    @media (min-width: 768px) {
      .csd-challenges--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .csd-challenges--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .csd-outcomes > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }
    @media (min-width: 1024px) {
      .csd-client--logo img { height: 44px; max-width: 170px; }
      .csd-client--logo img.csd-client__seal { height: 52px; }
      .csd-client--logo figcaption { max-width: 240px; }
      .csd-stack img.csd-stack__icon { height: 40px; }
      .csd-stack--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .csd-challenges--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .csd-challenges--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    .csd-stack li > img.csd-stack__icon { height: 26px; }
    @media (min-width: 1024px) {
      .csd-stack li > img.csd-stack__icon { height: 40px; }
      .csd-client--logo figcaption { max-width: none; white-space: nowrap; } /* taglines carry their own line breaks */
    }

    /* ---------- Get in touch page ---------- */
    /* Header row, then a bordered form card; the warm-to-cool wash melts into the white page partway down the card
       (a mask fades it out, so there is no visible edge). */
    .gt { position: relative; padding: 32px 0 24px; }
    .gt__wash {
      position: absolute; inset: 0 0 auto; height: 640px;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .55) 65%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .55) 65%, transparent 100%);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(90deg, #F3E5E2 0%, #E9E0F0 22%, #D5D6F7 50%, #C5D8FC 78%, #B8DBFE 100%);
    }
    .gt__title { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -.02em; color: #3A3B3E; }
    @media (min-width: 768px) { .gt__title { font-size: 44px; line-height: 52px; } } /* tablet step: previously held the mobile size until 1024px, then jumped */
    .gt__lead { margin-top: 16px; max-width: 400px; font-size: 14px; line-height: 19px; color: #5B6472; }
    .gt__card { max-width: 800px; margin: 32px auto 0; border: 1px solid #E5E8EC; background: #fff; }
    .gt__form { padding: 24px 20px 24px; }
    .gt__form-title { font-size: 22px; line-height: 30px; font-weight: 400; color: #1F2124; }
    .gt__hint { margin-top: 21px; font-size: 13px; line-height: 16px; color: #5B6472; }
    .gt__fields { display: grid; gap: 30px 24px; margin-top: 23px; }
    .gt__field label { display: block; font-size: 16px; line-height: 20px; color: #1F2124; }
    .gt__field input, .gt__field textarea {
      display: block; width: 100%; margin-top: 9px; border: 1px solid #DADDE2; border-radius: 0; background: #fff;
      padding: 0 16px; font-size: 16px; color: #1F2124; transition: border-color .2s ease, box-shadow .2s ease;
    }
    .gt__field input { height: 40px; }
    .gt__field textarea { height: 80px; min-height: 80px; padding-top: 10px; padding-bottom: 10px; line-height: 22px; resize: vertical; }
    .gt__field input::placeholder, .gt__field textarea::placeholder { color: #A9AEB6; }
    .gt__field input:hover, .gt__field textarea:hover { border-color: #B9BEC6; }
    .gt__field input:focus, .gt__field textarea:focus { outline: none; border-color: #015AEB; box-shadow: 0 0 0 3px rgba(1, 90, 235, .15); }
    .gt__field input[aria-invalid="true"], .gt__field textarea[aria-invalid="true"] { border-color: #D93B3B; }
    .gt__note { margin-top: 60px; font-size: 13px; line-height: 19.5px; color: #5B6472; }
    .gt__submit {
      display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 20px auto 0;
      background: #1F2124; font-size: 15px; color: #fff; transition: background-color .2s ease;
    }
    .gt__submit:hover { background: #000; }
    .gt__submit:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
    .gt__status { margin-top: 16px; text-align: center; font-size: 14px; line-height: 20px; color: #1F2124; }
    .gt__status--success { color: #1E7B34; }
    .gt__status--error { color: #D93B3B; }
    .gt__error { margin-top: 6px; font-size: 13px; line-height: 18px; color: #D93B3B; }
    .gt__submit:disabled { background: #5B6472; cursor: not-allowed; }
    @media (min-width: 768px) {
      .gt__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .gt__field--wide { grid-column: 1 / -1; }
    }
    @media (min-width: 1024px) {
      .gt { padding: 100px 0 80px; }
      .gt__wash {
        height: 440px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0, 0, 0, .4) 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0, 0, 0, .4) 62%, transparent 100%);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .6) 100%),
          linear-gradient(90deg, #FEE9CD 0%, #F1E3EC 30%, #DBDCF9 50%, #D9E9FD 75%, #DDF2FF 100%);
      }
      .gt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
      .gt__title { font-size: 56px; line-height: 64px; letter-spacing: -.03em; }
      .gt__lead { margin-top: 8px; font-size: 16px; line-height: 24px; }
      .gt__card { margin-top: 52px; }
      .gt__form { padding: 35px 92px 32px; }
      .gt__hint { margin-top: 25px; }
      .gt__fields { gap: 36px 24px; margin-top: 27px; }
      .gt__field input { height: 38px; font-size: 14px; }
      .gt__field textarea { font-size: 14px; }
      .gt__note { margin-top: 64px; line-height: 19px; }
      .gt__submit { width: 180px; margin-top: 24px; }
    }
    @media (prefers-reduced-motion: reduce) { .gt__field input, .gt__field textarea, .gt__submit { transition: none; } }

    /* ---------- Product pages (TriageIQ, QwikQuote, Olly, DigiDoc, DiskWatch, CEMLI X) ----------
       Built on the AskAIRO .pd- classes; .pm- adds the dashboard mockup in the hero and the extra section types. */

    /* hero dashboard mockup (in place of the AskAIRO photo) */
    .pm-mock {
      display: block; width: 100%; overflow: hidden; border-radius: 12px; background: #fff;
      box-shadow: 0 30px 60px rgba(30, 64, 140, .10), 0 2px 8px rgba(30, 64, 140, .06);
      font-size: 9.5px; line-height: 13px; color: #1F2124;
    }
    .pm-mock__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-bottom: 1px solid #EEF0F3; font-size: 11px; font-weight: 600; }
    .pm-mock__badge { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #1E5BE0; font-size: 9px; color: #fff; }
    .pm-mock__dots { display: flex; gap: 4px; margin-left: auto; }
    .pm-mock__dots i { width: 5px; height: 5px; border-radius: 50%; background: #E3E5EA; }
    .pm-mock__body { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
    .pm-mock__side { padding: 12px 10px; border-right: 1px solid #EEF0F3; background: #FBFBFC; }
    .pm-mock__side li { display: flex; gap: 6px; padding: 5px 6px; color: #5B6472; }
    .pm-mock__side li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 2px; border: 1px solid #B3B8C2; border-radius: 2px; }
    .pm-mock__side li.is-active { margin-bottom: 8px; padding: 7px 10px; border-radius: 5px; background: #1E5BE0; font-weight: 500; color: #fff; }
    .pm-mock__side li.is-active::before { border-color: #fff; }
    .pm-mock__main { min-width: 0; padding: 14px 14px 16px; }
    .pm-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 600; }
    .pm-mock__pill { padding: 4px 9px; border-radius: 9999px; background: #1E5BE0; font-size: 9px; font-weight: 500; color: #fff; white-space: nowrap; }
    .pm-mock__h { margin-top: 14px; font-size: 9.5px; font-weight: 600; }
    .pm-mock__muted { color: #8A909B; }
    .pm-mock__foot {
      display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 18px;
      border-top: 1px solid #EEF0F3; font-size: 10px; font-weight: 600; color: #1E5BE0;
    }
    .pm-mock__foot span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7.5px; font-weight: 400; letter-spacing: .14em; color: #8A909B; text-transform: uppercase; }
    .pm-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; margin-top: 8px; padding: 0 2px; border-bottom: 1px solid #EEF0F3; }
    .pm-bars i { flex: 1; height: var(--h); border-radius: 1px; background: #3B7CF5; }
    .pm-bars i:nth-child(even) { flex: .4; }
    .pm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
    .pm-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pm-kpis > div { padding: 6px; border: 1px solid #EEF0F3; border-radius: 4px; font-size: 8px; line-height: 11px; color: #8A909B; }
    .pm-kpis b { display: block; margin: 2px 0; font-size: 12px; line-height: 15px; font-weight: 600; color: #1F2124; }
    .pm-up { color: #1A9A5A; } .pm-down { color: #E0453A; } .pm-blue { color: #1E5BE0; }
    .pm-donut-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
    .pm-donut {
      display: grid; flex: none; place-items: center; width: 66px; height: 66px; border-radius: 50%; text-align: center;
      background: conic-gradient(#1E5BE0 0 38%, #6FA0F7 38% 62%, #A9C5FA 62% 82%, #DCE6FB 82% 100%);
      -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px);
    }
    .pm-donut-wrap { position: relative; flex: none; }
    .pm-donut-wrap > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 10px; font-weight: 600; line-height: 12px; }
    .pm-donut-wrap > span small { font-size: 8px; font-weight: 400; color: #8A909B; }
    .pm-legend { display: grid; flex: 1; gap: 6px; }
    .pm-legend li { display: flex; align-items: center; gap: 6px; }
    .pm-legend li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #1E5BE0); }
    .pm-legend li span { margin-left: auto; color: #8A909B; }
    .pm-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px solid #E3E7F0; border-radius: 6px; }
    .pm-note svg { flex: none; width: 12px; height: 12px; fill: none; stroke: #1E5BE0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pm-note > span:not(.pm-note__go) { flex: 1; min-width: 0; }
    .pm-note__go { display: grid; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #1E5BE0; color: #fff; font-size: 10px; }
    .pm-rows { display: grid; gap: 6px; margin-top: 10px; }
    .pm-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid #EEF0F3; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 8.5px; color: #5B6472; }
    .pm-tag { padding: 2px 6px; border-radius: 9999px; font-family: Inter, sans-serif; font-size: 8px; font-weight: 500; white-space: nowrap; }
    .pm-tag--ok { background: #DDF3E6; color: #1A7A47; } .pm-tag--wait { background: #FFF1CC; color: #9A6A00; } .pm-tag--draft { background: #EEF0F3; color: #5B6472; }
    .pm-tag--high { background: #FCE1E1; color: #C23434; } .pm-tag--med { background: #FFF1CC; color: #9A6A00; } .pm-tag--low { background: #DDF3E6; color: #1A7A47; }
    .pm-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 8px; }
    .pm-table th { padding: 0 2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7px; font-weight: 400; letter-spacing: .1em; color: #8A909B; text-align: left; text-transform: uppercase; }
    .pm-table td { padding: 7px 2px; border-top: 1px solid #EEF0F3; color: #5B6472; white-space: nowrap; }
    .pm-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1F2124; }
    .pm-table th:last-child, .pm-table td:last-child { text-align: right; }
    .pm-table td:last-child { color: #1E5BE0; }
    .pm-search { display: flex; gap: 6px; }
    .pm-search span { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #E3E7F0; border-radius: 4px; color: #8A909B; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .pm-hint { margin-top: 10px; padding: 9px 12px; border: 1px solid #DCE5F8; border-radius: 6px; background: #EEF3FD; font-size: 8.5px; color: #5B6472; }
    .pm-hint b { display: block; font-size: 9px; font-weight: 600; color: #1F2124; }
    .pm-homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
    .pm-homes > div { overflow: hidden; border: 1px solid #EEF0F3; border-radius: 4px; font-size: 7.5px; line-height: 10px; color: #8A909B; }
    .pm-homes > div::before { content: ""; display: block; height: 26px; background: #F3F5F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A909B' stroke-width='1.6'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / 12px no-repeat; }
    .pm-homes p { padding: 5px 6px 6px; }
    .pm-homes b { display: block; font-size: 10px; line-height: 13px; color: #1F2124; }
    .pm-homes em { display: inline-block; margin-top: 4px; padding: 2px 5px; border-radius: 9999px; background: #DDF3E6; font-style: normal; font-weight: 500; color: #1A7A47; }
    .pm-pay { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 7px 10px; border: 1px solid #EEF0F3; border-radius: 4px; font-size: 8px; color: #8A909B; }
    .pm-pay b { display: block; font-size: 11px; color: #1F2124; }
    .pm-meter { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 8px; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 8px; color: #5B6472; }
    .pm-meter i { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #1E5BE0 var(--w), #E6E9EF var(--w)); }
    .pm-meter span { text-align: right; color: #8A909B; }

    .pd-hero__mock { order: 2; margin-top: 24px; }

    /* cards with a blue tagline and a divided list (TriageIQ, Olly, QwikQuote) */
    .pm-feat { display: grid; gap: 12px; margin-top: 22px; }
    .pm-feat > li { padding: 20px; border-radius: 4px; background: #F8F9FB; }
    .pm-feat svg, .pm-ico { width: 30px; height: 30px; fill: none; stroke: #7371F7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .pm-feat h3 { margin-top: 14px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pm-feat__tag { margin-top: 8px; font-size: 14px; line-height: 20px; color: #6D6BF2; }
    .pm-feat ul { margin-top: 6px; }
    .pm-feat ul li { padding: 10px 0; font-size: 13px; line-height: 20px; color: #5B6472; }
    .pm-feat ul li + li { border-top: 1px solid #E3E5EA; }

    /* grey band with white cards (How it works, Industry use cases) */
    .pm-band { margin-top: 48px; background: #F7F8FA; }
    .pm-band .pd-caps li, .pm-band .pm-chal li { background: #fff; }
    .pm-band + section { padding-top: 48px; }
    .pd-caps.pm-c3 li, .pd-caps.pm-c5 li, .pd-caps.pm-uses li { min-height: 0; }
    .pd-caps.pm-c3 p { max-width: 330px; }
    .pd-caps li > p + p { margin-top: 4px; }

    /* tools list + stack card (TriageIQ ecosystem) */
    .pm-split { display: grid; gap: 16px; margin-top: 24px; }
    .pm-tools { display: grid; gap: 12px; }
    .pm-tools li { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 6px; background: #F8F9FB; }
    .pm-tools .pm-logo { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
    .pm-tools .pm-logo svg, .pm-tools .pm-logo img { width: 22px; height: 22px; }
    .pm-tools b { display: block; font-size: 17px; line-height: 22px; font-weight: 400; color: #1F2124; }
    .pm-tools small { display: block; font-size: 13px; line-height: 18px; color: #5B6472; }
    .pm-card { padding: 22px 20px; border-radius: 8px; background: #F8F9FB; }
    .pm-card h3 { font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pm-card > p { margin-top: 8px; font-size: 13px; line-height: 20px; color: #5B6472; }
    .pm-card > ul:not(.pm-tags) { display: grid; gap: 12px; margin-top: 18px; }
    .pm-card > ul:not(.pm-tags) > li {
      display: grid; gap: 2px 16px; padding: 7px 10px; border-left: 3px solid #1E5BE0; font-size: 15px; font-weight: 500; color: #1F2124;
      background: linear-gradient(90deg, #E4ECFC, #fff 30%);
    }
    .pm-card > ul:not(.pm-tags) > li span { font-size: 13px; font-weight: 400; color: #5B6472; }
    .pm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
    .pm-tags li { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; background: #ECEDF1; font-size: 13px; letter-spacing: .02em; color: #4A5160; }
    .pm-tags i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }

    /* proven cases: optional image-on-the-right variant, footer meta line */
    .pm-case__meta { margin-top: 28px; font-size: 13px; color: #5B6472; }
    .pm-case .pd-case__results strong + span { margin-bottom: 4px; }

    /* lending partner wordmarks (QwikQuote) */
    .pm-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
    .pm-partners li { display: grid; place-items: center; min-height: 96px; padding: 12px; border-bottom: 1px solid #ECEDEF; text-align: center; }
    .pm-partners li:nth-child(odd) { border-right: 1px solid #ECEDEF; }
    .pm-wm { font-size: 20px; line-height: 1; white-space: nowrap; }
    .pm-wm--jpm { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -.02em; color: #111; }
    .pm-wm--boa { font-weight: 700; letter-spacing: -.02em; color: #0A3E8F; }
    .pm-wm--wf { padding: 10px 8px; background: #D71E28; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 700; line-height: 1.05; color: #fff; }
    .pm-wm--citi { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: #0B3E7E; }
    .pm-wm--usb { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #0C2074; }
    .pm-wm--usb b { padding: 0 3px; border-radius: 0 0 8px 8px; background: #C8102E; color: #fff; }
    .pm-wm--pnc { display: inline-flex; align-items: center; gap: 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; color: #0D4B8B; }
    .pm-wm--pnc i { width: 30px; height: 30px; border-radius: 50%; background: #EF7D1A; }
    .pm-wm--cap { font-size: 22px; font-style: italic; font-weight: 800; letter-spacing: -.02em; color: #0B3B6E; }
    .pm-wm--cap b { font-weight: 400; color: #0B3B6E; }

    /* challenge / fix cards (DigiDoc) */
    .pm-chal { display: grid; gap: 12px; margin-top: 22px; }
    .pm-chal li { padding: 20px; border-radius: 4px; background: #F8F9FB; }
    .pm-eyebrow { display: block; font-size: 11px; line-height: 14px; letter-spacing: .14em; color: #8A909B; text-transform: uppercase; }
    .pm-chal .pm-eyebrow { margin-top: 18px; }
    .pm-chal h3 { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pm-chal .pm-eyebrow--fix { margin-top: 14px; color: #1E5BE0; }
    .pm-chal p { margin-top: 2px; font-size: 13px; line-height: 20px; color: #5B6472; }

    /* quote + illustrated statement (DiskWatch) */
    .pm-quote { display: grid; gap: 16px; margin-top: 24px; }
    .pm-quote blockquote { padding: 24px 20px; border-radius: 4px; background: linear-gradient(180deg, #fff 0%, #F3F6FE 60%, #EEF2FE 100%); font-size: 18px; line-height: 24px; color: #1E5BE0; }
    .pm-quote blockquote::before { content: "\201C"; display: block; height: 48px; font-family: Georgia, serif; font-size: 72px; font-style: italic; line-height: 64px; color: #1E5BE0; }
    .pm-quote figure { padding: 14px; border-radius: 8px; background: #F8F9FB; }
    .pm-quote figure img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 2px; }
    .pm-quote figcaption { padding: 18px 6px 6px; font-size: 15px; line-height: 22px; color: #1F2124; }

    /* reactive vs proactive (DiskWatch) */
    .pm-compare { display: grid; gap: 16px; margin-top: 24px; }
    .pm-compare > div { padding: 24px 22px; border: 1px solid #ECEDEF; }
    .pm-compare > div.is-good { border-color: #DCE5F8; background: #F3F6FE; }
    .pm-compare .pm-eyebrow { color: #8A909B; }
    .pm-compare .is-good .pm-eyebrow { color: #1E5BE0; }
    .pm-compare h3 { margin-top: 12px; font-size: 22px; line-height: 28px; font-weight: 400; color: #1F2124; }
    .pm-compare p { margin-top: 10px; font-size: 14px; line-height: 20px; color: #5B6472; }
    .pm-track { height: 6px; margin-top: 24px; border-radius: 6px; background: linear-gradient(90deg, #22B454 0 62%, #E03A3A 62% 100%); }
    .is-good .pm-track { background: linear-gradient(90deg, #22B454 0 55%, #E3E7EE 55% 100%); }
    .pm-status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; font-size: 13px; color: #D63333; }
    .is-good .pm-status { color: #1A9A5A; }
    .pm-status svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .pm-crumbs { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 22px; font-size: 13px; color: #5B6472; }
    .pm-crumbs li + li { margin-left: 16px; padding-left: 16px; border-left: 1px solid #5B6472; line-height: 14px; }

    /* numbered steps with a large faded index (CEMLI X) */
    .pm-steps { display: grid; gap: 12px; margin-top: 24px; counter-reset: pm-step; }
    .pm-steps li {
      position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 16px; overflow: hidden;
      padding: 16px 20px; border-radius: 2px; background: #F8F9FB; counter-increment: pm-step;
    }
    .pm-steps li::after {
      content: "0" counter(pm-step); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 64px; line-height: 1; font-weight: 300;
      letter-spacing: -.02em; color: #E4E6F2; pointer-events: none;
    }
    .pm-steps svg { width: 30px; height: 30px; fill: none; stroke: #7371F7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .pm-steps h3 { position: relative; z-index: 1; padding-right: 76px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
    .pm-steps p { position: relative; z-index: 1; padding-right: 76px; font-size: 13px; line-height: 20px; color: #5B6472; }
    .pm-footnote { margin-top: 16px; padding: 0 20px; font-size: 12px; line-height: 18px; color: #5B6472; }

    @media (min-width: 768px) {
      .pm-feat, .pm-chal, .pm-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pm-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .pm-partners li { border-right: 1px solid #ECEDEF; }
      .pm-partners li:nth-child(4n), .pm-partners li:last-child { border-right: 0; }
      .pm-card > ul:not(.pm-tags) > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
      .pm-card > ul > li:only-child, .pm-card > ul.pm-single > li { grid-template-columns: 1fr; }
    }
    @media (min-width: 1024px) {
      .pd-hero__mock { order: 0; flex: none; width: 380px; margin-top: 0; }
      .pm-mock__main { padding: 14px 14px 18px; }
      .pm-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
      .pm-feat--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .pm-feat > li { padding: 24px 20px; }
      .pm-feat h3 { margin-top: 26px; font-size: clamp(18px, 1.6vw, 20px); line-height: 24px; overflow-wrap: anywhere; } /* 18px at 1024 so single long words fit four-up cards */
      .pm-feat__tag { margin-top: 10px; }
      .pm-feat ul { margin-top: 10px; }
      .pm-feat ul li { font-size: 14px; }
      .pm-feat--4 h3 { min-height: 48px; }
      .pd-caps.pm-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .pd-caps.pm-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .pd-caps.pm-c3 li, .pd-caps.pm-c5 li { padding: 24px 20px 26px; }
      .pd-caps.pm-c5 h3 { white-space: normal; min-height: 48px; }
      .pd-caps.pm-c4 h3 { white-space: normal; }
      .pd-caps.pm-uses { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .pd-caps.pm-uses li { grid-column: span 2; }
      .pd-caps.pm-uses li:nth-child(n + 4) { grid-column: span 3; }
      .pd-caps.pm-uses p { max-width: none; margin-top: 8px; }
      .pd-caps.pm-uses p + p { margin-top: 4px; }
      .pm-band { margin-top: 100px; }
      .pm-band + section { padding-top: 100px; }
      .pm-band .pd-caps, .pm-band .pm-chal { margin-top: 40px; }
      .pm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 586px); gap: 20px; margin-top: 40px; }
      .pm-tools { gap: 20px; }
      .pm-tools li { min-height: 56px; padding: 8px 16px; }
      .pm-card { padding: 24px 32px 32px; }
      .pm-card > p { font-size: 14px; }
      .pm-card h3 { font-size: 18px; }
      .pm-partners { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 36px; }
      .pm-partners li { grid-column: span 3; min-height: 150px; border-bottom: 0; }
      .pm-partners li:nth-child(4) { border-right: 0; }
      .pm-partners li:nth-child(-n + 4) { border-bottom: 1px solid #ECEDEF; }
      .pm-partners li:nth-child(5) { grid-column: 2 / span 3; margin-top: 16px; }
      .pm-partners li:nth-child(n + 5) { margin-top: 16px; }
      .pm-partners li:last-child { border-right: 0; }
      .pm-partners li:nth-child(4n) { border-right: 0; }
      .pm-partners li:nth-child(5), .pm-partners li:nth-child(6) { border-right: 1px solid #ECEDEF; }
      .pm-wm { font-size: 22px; }
      .pm-wm--citi { font-size: 64px; }
      .pm-wm--usb { font-size: 44px; }
      .pm-wm--pnc { font-size: 50px; }
      .pm-wm--pnc i { width: 44px; height: 44px; }
      .pm-wm--cap { font-size: 24px; }
      .pm-wm--wf { font-size: 16px; }
      .pm-case.pd-case { height: auto; }
      .pm-case.pd-case .csd-solution__img { height: 100%; min-height: 469px; }
      .pm-case .csd-solution__panel { padding-bottom: 40px; }
      .pm-case .pm-case__meta { margin-top: auto; padding-top: 48px; }
      .pm-case .pd-btn { margin-top: auto; }
      .pm-case .pm-case__meta + .pd-btn { margin-top: 24px; }
      .pm-case--rev .csd-solution__img { order: 2; }
      .pm-case--rev .csd-solution__panel { padding-left: 40px; padding-right: 40px; }
      .pm-case + .pm-case { margin-top: 60px; }
      .pm-case .pd-h2 { white-space: normal; }
      .pm-chal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
      .pm-chal li { padding: 24px 20px; }
      .pm-chal .pm-eyebrow { margin-top: 26px; }
      .pm-chal h3 { font-size: 20px; }
      .pm-chal p { font-size: 14px; }
      .pm-quote { grid-template-columns: 287px minmax(0, 1fr); gap: 20px; margin-top: 40px; }
      .pm-quote blockquote { padding: 18px 20px; }
      .pm-quote figure { padding: 16px; }
      .pm-quote figure img { height: 133px; }
      .pm-quote figcaption { padding: 34px 16px 14px; font-size: 18px; line-height: 24px; }
      .pm-compare { gap: 20px; margin-top: 40px; }
      .pm-compare > div { padding: 32px 32px 30px; }
      .pm-steps { gap: 20px; margin-top: 40px; }
      .pm-steps li { min-height: 100px; padding: 16px 20px; }
      .pm-steps li::after { right: 24px; font-size: 76px; }
      .pm-steps h3 { padding-right: 112px; font-size: 20px; line-height: 28px; }
      .pm-steps p { padding-right: 112px; font-size: 14px; }
      .pm-footnote { margin-top: 20px; padding: 0 60px; font-size: 13px; }
    }
    @media (min-width: 1280px) { .pd-hero__mock { width: 436px; } }
    @media (max-width: 479px) {
      .pm-mock__body { grid-template-columns: 84px minmax(0, 1fr); }
      .pm-mock__side { padding: 10px 6px; }
      .pm-mock__main { padding: 12px 10px 14px; }
      .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pm-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pm-homes > div:nth-child(3) { display: none; }
    }
    /* mobile hero order: the mockup takes the photo's slot (after the heading) */
    @media (max-width: 1023px) {
      .pd-hero__copy > img:first-child { order: -1; }
    }
    /* product logos ship on a white box; multiply drops it onto the hero wash */
    .pm-brand { mix-blend-mode: multiply; }
    .pm-ticker--plain li::before { display: none; }
    @media (min-width: 1024px) { .pd-caps.pm-c4 li { min-height: 200px; } }
    @media (max-width: 479px) {
      .pm-mock__side li.is-active { padding: 7px 6px; }
      .pm-crumbs { flex-wrap: nowrap; font-size: 12px; }
      .pm-crumbs li + li { margin-left: 10px; padding-left: 10px; }
    }

/* Enterprise Integration lifecycle: the wheel pins below the header while scrolling through the track steps
   through the stages (js sets the track height); once the last stage has had its turn the page scrolls on. */
.ei-wheel-track { position: relative; }
.ei-wheel-track > .ei-wheel { position: sticky; top: 92px; }
@media (min-width: 1024px) {
  .ei-wheel-track > .ei-wheel { top: calc(64px + max(0px, (100vh - 64px - 680px) / 2)); }
}

/* Case study carousel cards (home, Enterprise Applications, Industries): the title link stretches over the whole
   card so the image and text are all clickable; hover lifts the photo and tints the title. */
.cs-tile { position: relative; cursor: pointer; }
.cs-tile img { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.cs-tile h3 { transition: color .2s ease; }
.cs-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.cs-tile__link:focus-visible { outline: none; }
.cs-tile__link:focus-visible::after { outline: 2px solid #015AEB; outline-offset: 4px; }
@media (hover: hover) {
  .cs-tile:hover img { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31, 33, 36, .14); }
  .cs-tile:hover h3 { color: #1E5BE0; }
}
@media (prefers-reduced-motion: reduce) { .cs-tile img { transition: none; } }

/* Home "industry expertise" tiles: the round arrow link stretches over the whole tile, so the artwork, title and
   copy all open the Industries page (hovering anywhere also triggers the arrow's own hover colour). The artwork
   drops behind the in-flow content inside an isolated tile so the static link still paints above it. */
.in-tile { isolation: isolate; cursor: pointer; }
.in-tile > img { z-index: -1; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.in-tile .in-tile__link { position: static; }
.in-tile__link::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .in-tile:hover > img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .in-tile > img { transition: none; } }

/* Pre-footer "What next?" section (every page): the ribbon artwork melts into the white page above through a soft
   haze — a white gradient plus a backdrop blur that both fade out down the section, so there is no hard top edge.
   It sits behind the content (the content wrapper is positioned and comes later), so text and buttons stay sharp. */
section[aria-labelledby="cta-title"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .85) 28%, rgba(255, 255, 255, .45) 62%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
}
@media (min-width: 1024px) { section[aria-labelledby="cta-title"]::before { height: 130px; } }

/* Pre-footer ribbons drift (every section using pre-footer-bg.svg): a copy of the section's own background (image,
   size, position and base colour, so per-page framing like .in-cta carries over) sits on an oversized layer behind
   the content and wanders slowly. translate / scale / rotate are separate animations with unrelated durations, so
   the path never visibly repeats, and all three stay on the compositor. 6% overscan on every side covers the
   largest drift plus rotation, so the layer's edges never show. The haze (::before) and the content paint above. */
section[class*="pre-footer-bg.svg"] { isolation: isolate; }
section[class*="pre-footer-bg.svg"]::after {
  content: ""; position: absolute; inset: -6%; z-index: -1; pointer-events: none;
  background-color: inherit; background-image: inherit; background-size: inherit;
  background-position: inherit; background-repeat: inherit;
  animation: pf-drift-move 19s ease-in-out infinite, pf-drift-zoom 13s ease-in-out infinite, pf-drift-tilt 23s ease-in-out infinite;
  will-change: transform;
}
@keyframes pf-drift-move {
  0%, 100% { translate: 0 0; }
  20% { translate: -2.2% 1.4%; }
  45% { translate: 1.6% -1.8%; }
  68% { translate: -0.8% -0.6%; }
  86% { translate: 2.4% 1.2%; }
}
@keyframes pf-drift-zoom {
  0%, 100% { scale: 1; }
  50% { scale: 1.04; }
}
@keyframes pf-drift-tilt {
  0%, 100% { rotate: 0deg; }
  33% { rotate: -0.5deg; }
  70% { rotate: 0.4deg; }
}
@media (prefers-reduced-motion: reduce) { section[class*="pre-footer-bg.svg"]::after { animation: none; } }

/* ---------- Site footer (every page) ----------
   Desktop (1280): Services / Industries / Resources (198px each), "Follow us on" (116px) and the 354px form, 24px
   gaps; a rule, then logo + copyright, "Certified excellence" badges and the two office addresses. Mobile: form
   first, link columns two-up, then the bottom blocks stacked. */
.site-footer__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.site-footer__h { font-size: 17px; line-height: 24px; font-weight: 400; color: #F1F2F4; }
.site-footer__list { margin-top: 18px; display: grid; gap: 16px; font-size: 13px; line-height: 20px; color: #A3A6AD; }
.site-footer__list a { border-radius: 4px; transition: color .2s ease; }
.site-footer__list a:hover { color: #fff; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
.site-footer__social h2 { font-size: 16px; line-height: 22px; color: #E5E6E8; }
.site-footer__social ul { display: flex; gap: 20px; margin-top: 14px; padding-left: 12px; }
.site-footer__social a { display: block; color: #fff; border-radius: 4px; transition: color .2s ease, opacity .2s ease; }
.site-footer__social a:hover { opacity: .75; }
.site-footer__social svg { width: 24px; height: 24px; fill: currentColor; }
.site-footer__form { grid-column: 1 / -1; order: -1; display: flex; flex-direction: column; gap: 14px; }
.site-footer__form input {
  height: 44px; padding: 0 16px; border: 1px solid #55585E; background: transparent; font-size: 14px; color: #fff;
  transition: border-color .2s ease;
}
.site-footer__form input::placeholder { color: #C4C6CB; }
.site-footer__form input:hover { border-color: #7A7D84; }
.site-footer__form input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 2px #015AEB; }
.site-footer__form button { height: 40px; background: #fff; font-size: 14px; color: #1F2124; transition: background-color .2s ease; }
.site-footer__form button:hover { background: #E9EBEF; }
.site-footer__form p { margin-top: 0; font-size: 13px; color: #E5E6E8; }
.site-footer__form p a { color: #fff; border-radius: 4px; transition: color .2s ease; }
.site-footer__form p a:hover { color: #7FB2F5; }

.site-footer__bottom { display: grid; gap: 32px; margin-top: 40px; padding: 32px 0 28px; border-top: 1px solid #3A3C41; }
.site-footer__brand img { display: block; width: 100%; max-width: 120px; height: auto; } /* same size at every width */
.site-footer__brand p { margin-top: 18px; font-size: 13px; color: #B5B7BC; }
.site-footer__certs h2 { font-size: 16px; line-height: 22px; color: #E5E6E8; }
.site-footer__certs ul { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.site-footer__certs img { display: block; width: auto; height: 50px; }
.site-footer__offices { display: grid; gap: 16px; font-style: normal; font-size: 14px; line-height: 22px; color: #A3A6AD; }
.site-footer__offices > div > p:last-child { padding-left: 25px; }
.site-footer__region { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #fff; }
.site-footer__region svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Resources → "Products & Accelerators": a toggle styled like the other footer links that opens a white card listing
   every product by name (each links to its product page). The card is an overlay, positioned under the toggle above
   the footer content, so opening it never moves anything. It grows open (grid rows 0fr → 1fr) and is hidden from
   keyboard and screen readers while closed. Behaviour in js/nav.js. */
.site-footer__drop { position: relative; }
.site-footer__toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: color .2s ease;
}
.site-footer__toggle:hover, .site-footer__toggle[aria-expanded="true"] { color: #fff; }
.site-footer__toggle svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.site-footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-footer__panel {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 30; width: 180px; max-width: calc(100vw - 40px);
  display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s;
}
.site-footer__drop.is-open .site-footer__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility 0s; }
@media (max-width: 767px) { .site-footer__panel { top: calc(100% + 4px); } } /* tighter link spacing on mobile: no sliver of the next link above the card */
.site-footer__products { min-height: 0; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.site-footer__products li + li { border-top: 1px solid #E6E8EC; }
.site-footer__products a { display: block; padding: 6px 14px; font-size: 13px; border-radius: 0; color: #1F2124; transition: background-color .2s ease; }
.site-footer__products a:hover { background: #F5F6F9; color: #1F2124; }
.site-footer .site-footer__products a:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .site-footer__panel, .site-footer__drop.is-open .site-footer__panel, .site-footer__toggle svg { transition: none; }
}

/* Industries page: a footer link to a sector lands with the card clear of the sticky header */
.in-card[id] { scroll-margin-top: 88px; }
@media (min-width: 1024px) { .in-card[id] { scroll-margin-top: 80px; } }

@media (min-width: 640px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__offices { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)) 116px minmax(280px, 354px); gap: 24px; align-items: start; }
  .site-footer__h { font-size: 18px; }
  .site-footer__list { margin-top: 20px; gap: 18px; font-size: 14px; }
  .site-footer__social h2 { margin-top: -4px; }
  .site-footer__form { grid-column: auto; order: 0; }
  .site-footer__form input { height: 48px; }
  .site-footer__form p { font-size: 14px; }
  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 354px); gap: 24px; align-items: end;
    margin-top: 48px; padding: 30px 0 40px;
  }
  .site-footer__brand p { margin-top: 36px; font-size: 14px; }
  .site-footer__certs { padding-left: 13px; }
  .site-footer__offices { grid-column: auto; grid-template-columns: 1fr; gap: 16px; }
}

/* Site footer, mobile (Figma mobile): one column — logo + copyright, the form, "Follow us on", Services, Industries,
   Resources, then a rule and the certifications and offices. The two footer blocks dissolve
   (display: contents) so their pieces can be ordered in a single flow; the markup is the same as desktop. */
@media (max-width: 767px) {
  .site-footer > div { display: flex; flex-direction: column; gap: 30px; padding-top: 40px; padding-bottom: 40px; }
  .site-footer__top, .site-footer__bottom { display: contents; }
  .site-footer__brand { order: 1; }
  .site-footer__form { order: 2; gap: 12px; }
  .site-footer__social { order: 3; margin-top: -4px; }
  .site-footer [aria-labelledby="f-services"] { order: 4; }
  .site-footer [aria-labelledby="f-industries"] { order: 5; }
  .site-footer [aria-labelledby="f-resources"] { order: 6; }
  .site-footer__certs { order: 7; padding-top: 24px; border-top: 1px solid #3A3C41; }
  .site-footer__offices { order: 8; margin-top: -6px; grid-template-columns: 1fr; gap: 18px; font-size: 13px; line-height: 21px; }

  .site-footer__brand p { margin-top: 14px; font-size: 12px; }
  .site-footer__form .site-footer__h { margin-bottom: 4px; font-size: 15px; }
  .site-footer__form input { height: 40px; font-size: 13px; }
  .site-footer__form p { margin-top: 2px; }
  .site-footer__social h2 { font-size: 15px; }
  .site-footer__social ul { margin-top: 12px; padding-left: 10px; gap: 22px; }
  .site-footer__social svg { width: 22px; height: 22px; }
  .site-footer__h { font-size: 17px; }
  .site-footer__list { margin-top: 14px; gap: 6px; font-size: 13px; line-height: 20px; }
  .site-footer__certs h2 { font-size: 17px; }
  .site-footer__certs ul { margin-top: 16px; gap: 14px; }
  .site-footer__certs img { height: 42px; }
  .site-footer__offices > div > p:last-child { padding-left: 19px; }
  .site-footer__region { gap: 6px; }
  .site-footer__region svg { width: 13px; height: 13px; }
}

/* ---------- ConvoAI product page (built on the .pd-/.pm- product classes) ---------- */
/* hero mock: navy sidebar, a two-up KPI row, bars + CSAT pie, and a "live insight" note hanging off the corner */
.cv-mock { position: relative; overflow: visible; padding: 14px; background: #fff; border-radius: 4px; }
.pm-mock--dark .pm-mock__body { overflow: hidden; border-radius: 8px; background: #F3F5FA; box-shadow: 0 0 0 6px #0F1E3D; }
.pm-mock--dark .pm-mock__side { background: #0F1E3D; border-right: 0; color: #C6CDE0; }
.pm-mock--dark .pm-mock__side li { color: #C6CDE0; }
.pm-mock--dark .pm-mock__side li::before { display: none; }
.pm-mock--dark .pm-mock__side li.is-active { background: #24345A; color: #fff; }
.cv-mock__brand { margin-bottom: 12px; font-size: 10px; font-weight: 700; color: #fff !important; }
.cv-mock__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-mock__kpis > div, .cv-mock__card { background: #fff; border-color: #fff; }
.cv-mock__kpis b { font-size: 15px; line-height: 20px; }
.cv-mock__row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.cv-mock__card { padding: 8px; border: 1px solid #fff; border-radius: 4px; }
.cv-mock__card .pm-mock__h { margin-top: 0; font-size: 8px; }
.cv-mock__card .pm-bars i { flex: 1; background: linear-gradient(180deg, #3B7CF5, #1E5BE0); }
.cv-mock__csat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 8px; color: #5B6472; }
.cv-mock__pie { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#2BB0F0 0 82%, #DCEFFC 82% 100%); }
.cv-mock__insight {
  position: absolute; top: -12px; right: 8px; max-width: 140px; padding: 7px 10px; border-left: 2px solid #E04C2C; border-radius: 4px;
  background: #fff; box-shadow: 0 8px 20px rgba(31, 33, 36, .12); font-size: 8px; line-height: 11px; color: #3A3B3E;
}
.cv-mock__insight b { display: block; font-size: 8.5px; color: #1F2124; }

/* capability cards: blue icons, violet copy; workflow cards: blue icons */
.cv-caps svg, .cv-steps svg { stroke: #1E5BE0; }
.cv-caps p { color: #6D6BF2; }

/* benefits: four rows on the left, an illustrated card on the right */
.cv-ben { display: grid; gap: 16px; margin-top: 24px; }
.cv-ben__list { display: grid; gap: 12px; }
.cv-ben__list li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; border-radius: 6px; background: #F8F9FB; font-size: 15px; color: #1F2124; }
.cv-ben__list svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #1E5BE0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-ben__card { padding: 16px; border-radius: 6px; background: #F8F9FB; }
.cv-ben__card img { display: block; width: 100%; height: auto; aspect-ratio: 552 / 186; object-fit: cover; }
.cv-ben__card h3 { margin-top: 24px; padding: 0 4px; font-size: 18px; line-height: 24px; font-weight: 400; color: #1F2124; }
.cv-ben__card p { margin-top: 10px; padding: 0 4px; font-size: 14px; line-height: 22px; color: #3A3B3E; }
@media (min-width: 1024px) {
  /* zoom (not width) so the whole mock scales as one: same proportions, and layout grows with it so nothing overflows.
     380px slot → ~426px rendered; 436px → ~488px at 1280+ */
  .cv-mock { padding: 18px; zoom: 1.12; }
  .cv-ben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .cv-ben__list { gap: 20px; }
  .cv-ben__list li { min-height: 76px; padding: 0 16px; font-size: 18px; }
  .cv-ben__card h3 { margin-top: 36px; padding: 0 16px; }
  .cv-ben__card p { padding: 0 16px; font-size: 16px; line-height: 26px; }
}
@media (min-width: 1024px) { .pd-caps.cv-caps li { min-height: 280px; } }
@media (max-width: 479px) { .cv-mock__insight { display: none; } }
/* Resources: Products & Accelerators, Case Studies and Blogs in three equal columns beside the artwork; the long
   first label wraps inside its column */
@media (min-width: 1024px) { #menu-resources .site-nav__links { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; column-gap: 24px; row-gap: 10px; } }

/* AskAIRO hero video (askairo.html only): the 16:9 video shows whole — its own aspect ratio, contain, and plain
   rounded corners instead of the photo's chamfer mask, which would clip it. Width stays the photo's slot. */
.pd-hero__img.pd-hero__video { aspect-ratio: 16 / 9; height: auto; object-fit: contain; border-radius: 8px; background: #0B1A3A; }

/* QwikQuote lending partners: logo images (190px artwork) in the partner grid; they shrink with narrow cells */
.pm-partners .pm-partner-logo { display: block; width: 190px; max-width: 100%; height: auto; }
/* AskAIRO hero (askairo.html only): equal 50 / 50 columns — copy on the left, the video in a 4:3 frame on the right,
   both centred vertically. The 16:9 video sits whole inside the frame (contain), letterboxed on the navy fill. */
@media (min-width: 1024px) {
  .pd-hero--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .pd-hero--split .pd-hero__copy { grid-column: 1; grid-row: 1; }
  .pd-hero--split .pd-hero__video { grid-column: 2; grid-row: 1; width: 100%; }
}


/* Home hero, "Explore our AI Products" card: nine equal product badges, three to a row */
.hero-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hero-badges a, .hero-badges span {
  display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 6px; border: 1px solid #DCE5F8;
  border-radius: 9999px; background: #F3F6FE; font-size: 12px; line-height: 1; letter-spacing: .01em; color: #3A3B3E;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-badges a { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.hero-badges a:hover { border-color: #9DBDF3; background: #E4ECFC; color: #1E5BE0; }
.hero-badges a:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
@media (min-width: 1024px) { .hero-badges { gap: 8px; margin-top: 14px; } .hero-badges a, .hero-badges span { height: 28px; font-size: 12px; background-color: #fff; } }

/* Accent words (site-wide): the former serif accent in headings and marquees now reads as part of the heading —
   same font, weight, case and letter-spacing as the words around it. */
em.font-serif, .font-serif.italic, .ei-area__title em, .ei-marquee em, .cs-priorities li, .ai-marquee, .kq-learn__list h3 {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  text-transform: none;
  letter-spacing: inherit;
}

/* Numbers (site-wide): statistics, figures and step numbers use the heading voice of "By the numbers" — Inter,
   regular weight, upright, ink colour, slightly tight tracking. Each keeps its own size so layouts don't move. */
.pd-stats__value, .pd-case__results strong, .ea-accel__value, .ai-stage__stats dd:first-of-type,
.ad-card__num, .ai-stage__num, .ei-area__num, .pm-kpis b, .csd-outcomes strong, .csd-outcomes b {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #1F2124;
  letter-spacing: -.02em;
}
/* Heading accent words ("By the numbers", "transformation agenda" ...) carry a little more weight than the heading */
em.font-serif, .font-serif.italic, .ei-area__title em { font-weight: 500; }
/* Hero product badges take the "Know More" button's look: pale blue fill with a white rim and inner glow, blue text,
   8px corners; hover eases to white with a slight lift. Text only. */
.hero-badges a, .hero-badges span {
  border-color: #fff; border-radius: 8px; background: #fff; box-shadow: inset 0 0 22px 2px #fff;
  font-size: 13px; letter-spacing: 0;
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}
.hero-badges a:hover { border: 1px solid #fff; background: #D9E7FC; color: #015AEB; transform: translateY(-1px); box-shadow: inset 0 0 22px 2px #fff, 0 6px 14px rgba(1, 90, 235, .12); }
@media (min-width: 1024px) { .hero-badges a, .hero-badges span { height: 28px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .hero-badges a, .hero-badges span { transition: none; } .hero-badges a:hover { transform: none; } }

/* ---------- "Request a Product Demo" modal (every page; markup and behaviour in js/demo-modal.js) ----------
   Contact details in two pairs, then the scheduler: "soonest available" chips, a month calendar (available weekdays
   in pale blue, the chosen day solid blue, today marked with a dot) beside the day's times grouped by part of day,
   and the time-zone picker. Phones: one column, the calendar above the times; the dialog scrolls. */
.dm { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 1px solid #E3E5EA; border-radius: 16px; background: #FBFBFB; color: #1F2124; box-shadow: 0 30px 80px rgba(15, 23, 42, .25); overflow: auto; overscroll-behavior: contain; }
.dm::backdrop { background: rgba(31, 33, 36, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dm[open] { animation: dm-in .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes dm-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dm-open { overflow: hidden; }
.dm__form { position: relative; padding: 22px 18px 18px; }
.dm__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; color: #1F2124; transition: background-color .2s ease; }
.dm__close:hover { background: rgba(255, 255, 255, .7); }
.dm__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dm__title { padding-right: 40px; font-size: 19px; line-height: 24px; font-weight: 500; color: #111; }
.dm__hint { margin-top: 4px; font-size: 12px; line-height: 16px; color: #5B6472; }
.dm__field { margin-top: 14px; }
.dm__field label, .dm__when-title { display: block; font-size: 12.5px; font-weight: 600; color: #3A3B3E; }
.dm__field input, .dm__field select, .dm__field textarea {
  display: block; width: 100%; margin-top: 8px; border: 1px solid #DADDE2; background: #fff; font-size: 14px; color: #1F2124;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dm__field input, .dm__field select { height: 42px; padding: 0 18px; border-radius: 9999px; }
.dm__field select, .dm__tz select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3B3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
}
.dm__field textarea { min-height: 72px; padding: 12px 16px; border-radius: 12px; resize: vertical; }
.dm__field ::placeholder { color: #9AA0A9; }
.dm__field input:focus, .dm__field select:focus, .dm__field textarea:focus, .dm__tz select:focus { outline: none; border-color: #015AEB; box-shadow: 0 0 0 3px rgba(1, 90, 235, .15); }
.dm__field [aria-invalid="true"] { border-color: #D93B3B; }

/* scheduler */
.dm__group { margin-top: 18px; padding-top: 16px; border: 0; border-top: 1px solid #E6E8EC; min-width: 0; }
.dm__when-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.dm__dur { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5B6472; }
.dm__dur svg, .dm__tz svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm__soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #3A3B3E; }
.dm__soon-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dm__chip {
  height: 28px; padding: 0 12px; border: 1px solid #A9C2F5; border-radius: 9999px; background: #fff; font-size: 12px; font-weight: 600; color: #1D4FC4;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dm__chip:hover { background: #EEF4FF; }
.dm__chip[aria-pressed="true"] { border-color: #0B63F6; background: #0B63F6; color: #fff; }
.dm__picker { display: grid; gap: 18px; margin-top: 12px; padding: 16px; border: 1px solid #E3E5EA; border-radius: 12px; background: #fff; }
.dm__cal-head { display: flex; align-items: center; justify-content: space-between; }
.dm__month { font-size: 14px; font-weight: 600; color: #1F2124; }
.dm__nav { display: flex; gap: 6px; }
.dm__nav button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9999px; background: #EEF4FF; color: #1D4FC4; transition: background-color .15s ease; }
.dm__nav button:hover:not(:disabled) { background: #DCE8FF; }
.dm__nav button:disabled { background: transparent; color: #C3C7CE; cursor: default; }
.dm__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm__days, .dm__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dm__days { margin-top: 14px; text-align: center; font-size: 11px; color: #5B6472; }
.dm__dates { margin-top: 8px; }
.dm__date {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 40px; aspect-ratio: 1; margin: 0 auto; border-radius: 9999px;
  background: #EDF3FF; font-size: 13px; font-weight: 600; color: #1D4FC4; transition: background-color .15s ease, color .15s ease;
}
.dm__date:hover:not(:disabled) { background: #DCE8FF; }
.dm__date:disabled { background: transparent; font-weight: 400; color: #B5BAC2; cursor: default; }
.dm__date[aria-pressed="true"] { background: #0B63F6; color: #fff; box-shadow: 0 4px 10px rgba(11, 99, 246, .3); }
.dm__date.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dm__legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: #5B6472; }
.dm__dot { width: 8px; height: 8px; border: 1px solid #A9C2F5; border-radius: 50%; background: #EDF3FF; }
.dm__dot--on { margin-left: 12px; border-color: #0B63F6; background: #0B63F6; }
.dm__day { font-size: 14px; font-weight: 600; color: #1F2124; }
.dm__count { margin-top: 2px; font-size: 12px; color: #5B6472; }
.dm__period { margin-top: 12px; font-size: 12px; font-weight: 600; color: #3A3B3E; }
.dm__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.dm__slot {
  height: 34px; border: 1px solid #A9C2F5; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: #1D4FC4;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dm__slot:hover { background: #EEF4FF; }
.dm__slot[aria-pressed="true"] { border-color: #0B63F6; background: #0B63F6; color: #fff; }
.dm__tz { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #3A3B3E; }
.dm__tz select { flex: 1; min-width: 0; height: 32px; padding: 0 34px 0 12px; border: 1px solid #DADDE2; border-radius: 6px; font-size: 12px; color: #1F2124; background-size: 12px; }

.dm__chip:focus-visible, .dm__nav button:focus-visible, .dm__date:focus-visible, .dm__slot:focus-visible,
.dm__submit:focus-visible, .dm__close:focus-visible { outline: 2px solid #015AEB; outline-offset: 2px; }
.dm__error { margin-top: 8px; font-size: 12.5px; color: #D93B3B; }
.dm__submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 12px; border-radius: 9999px; background: #111; font-size: 14px; font-weight: 600; color: #fff; transition: background-color .2s ease; }
.dm__submit:hover { background: #2B2D31; }
.dm__submit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm__note { margin-top: 12px; font-size: 11.5px; line-height: 16px; color: #5B6472; }
.dm__status { margin-top: 10px; font-size: 13px; color: #1A7A47; }
/* Phones: the scheduler is one column that must never be wider than the dialog (the time-zone select is as wide as its
   longest option, which pushed the calendar's Sun column and the time slots out of view), with a little more room for
   the calendar and taller, easier-to-tap time slots and month arrows. */
@media (max-width: 639px) {
  .dm { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .dm__form { padding: 20px 14px 16px; }
  .dm__picker { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; }
  .dm__cal, .dm__times { min-width: 0; }
  .dm__days, .dm__dates { gap: 4px 2px; }
  .dm__date { max-width: 44px; font-size: 14px; }
  .dm__nav button { width: 36px; height: 36px; }
  .dm__slots { gap: 8px; }
  .dm__slot { height: 42px; padding: 0 4px; white-space: nowrap; }
  .dm__tz select { width: 100%; height: 40px; }
}
@media (min-width: 640px) {
  .dm__form { padding: 26px 26px 20px; }
  .dm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .dm__picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dm[open] { animation: none; } }
/* Home blog cards: the Read More button sits above the stretched card link so its own hover still shows */
.blog-tile__more { position: relative; z-index: 1; }
#posts-track > li > .cs-tile { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
#posts-track .blog-tile__more { margin-top: auto; }
#posts-track > li > .cs-tile > p { margin-bottom: 20px; }
@media (min-width: 768px) { #posts-track > li > .cs-tile > p { margin-bottom: 28px; } }

/* Case study, testimonial and blog carousels (home, Industries, Enterprise Applications): kept inside the page
   container instead of bleeding to the screen edge, with whole cards per view — 1 on phones, 2 on tablets, 3 on
   desktop. The arrows still step one card at a time. */
.carousel-contained { margin-right: 0 !important; padding-right: 0 !important; scroll-padding: 0; }
.carousel-contained > li { width: 89%; } /* phones: the next card peeks in, inside the container */
@media (min-width: 640px) { .carousel-contained > li { width: calc((100% - 16px) / 2); } }
@media (min-width: 768px) { .carousel-contained > li { width: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .carousel-contained > li { width: calc((100% - 40px) / 3); } }

/* Product tickers (askairo, cemlix, digidoc, olly): run inside the page container rather than edge to edge; both
   ends fade so items glide in and out instead of being cut off at the container edge. The trailing padding equals
   the gap, so each half of the track is exactly one set wide and the -50% loop restarts without a jump */
.pd-ticker--contained { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.pd-ticker--contained .pd-ticker__track { padding-left: 0; padding-right: 20px; }

/* Home hero recognition (index.html): the Forbes India DGEMS 2026 Select 200 banner with a one-line caption,
   on a frosted card that sits on the hero ribbons like the cards opposite */
.hero-award {
  display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-top: 24px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 12px; background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(30, 64, 140, .08);
}
.hero-award a img { display: block; width: 100%; height: auto; border-radius: 6px; }
.hero-award figcaption { padding: 0 4px; font-size: 13px; line-height: 19px; color: #3A3B3E; }
.hero-award figcaption strong { font-weight: 600; color: #1F2124; }
.hero-award figcaption em { font-style: normal; font-weight: 600; color: #1F2124; }
@media (min-width: 1024px) {
  .hero-award { flex-direction: row; align-items: center; gap: 16px; max-width: 640px; margin-top: 32px; padding: 10px 18px 10px 10px; }
  .hero-award a img { flex: none; width: 400px; }
  .hero-award figcaption { padding: 0; font-size: 14px; line-height: 20px; }
}
/* Desktop: the award sits under the intro in the left column, left-aligned with it; the two cards span both rows on
   the right and centre against the copy and award together */
@media (min-width: 1024px) {
  .hero-award { grid-column: 1; grid-row: 2; justify-self: start; width: 100%; max-width: 640px; margin-top: 12px; }
  .hero-cards { grid-column: 2; grid-row: 1 / span 2; }
}

/* Hero product badges: uppercase labels and a short description tooltip above each badge (index.html).
   It fades in on hover, keyboard focus or tap; edge columns align to the badge's outer edge so it stays on screen. */
.hero-badges li { position: relative; }
.hero-badges a, .hero-badges span:not(.hero-badges__tip) { text-transform: uppercase; letter-spacing: .03em; }
.hero-badges .hero-badges__tip {
  display: block; height: auto; overflow: visible; border: 0; white-space: normal; text-overflow: clip; justify-content: initial;
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; width: max-content; max-width: 210px;
  padding: 8px 11px; border-radius: 8px; background: #1F2124; box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
  font-size: 12px; line-height: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hero-badges .hero-badges__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #1F2124;
}
.hero-badges li:nth-child(3n + 1) .hero-badges__tip { left: 0; transform: translate(0, 4px); }
.hero-badges li:nth-child(3n + 1) .hero-badges__tip::after { left: 24px; }
.hero-badges li:nth-child(3n) .hero-badges__tip { left: auto; right: 0; transform: translate(0, 4px); }
.hero-badges li:nth-child(3n) .hero-badges__tip::after { left: auto; right: 19px; }
.hero-badges li:hover .hero-badges__tip, .hero-badges li:focus-within .hero-badges__tip, .hero-badges li.is-tip .hero-badges__tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.hero-badges li:nth-child(3n + 1):hover .hero-badges__tip, .hero-badges li:nth-child(3n + 1):focus-within .hero-badges__tip,
.hero-badges li:nth-child(3n):hover .hero-badges__tip, .hero-badges li:nth-child(3n):focus-within .hero-badges__tip,
.hero-badges li:nth-child(3n + 1).is-tip .hero-badges__tip, .hero-badges li:nth-child(3n).is-tip .hero-badges__tip { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .hero-badges__tip { transition: none; } }
/* Hero product badges show each product's logo instead of its name: taller badges, the logo centred and fitted inside
   (never stretched); the alt text keeps the link's name for screen readers. */
.hero-badges a { height: 40px; padding: 0 10px; }
.hero-badges__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 24px; object-fit: contain; }
@media (min-width: 1024px) { .hero-badges a { height: 40px; } .hero-badges__logo { max-height: 26px; } }

/* Section intros (site-wide): the short paragraph that sits to the right of a section heading. One max-width and
   one type style everywhere; on desktop it sits at the right of the heading row, its last line on the heading's
   baseline. */
p.section-intro { max-width: 364px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: #5B6472; text-align: left; }
@media (min-width: 1024px) {
  p.section-intro { flex: none; width: 364px; align-self: flex-end; margin-bottom: 6px; }
  /* Heading-only rows (product pages: a bare h2 beside the intro): the heading and the intro centre on each other
     vertically, whichever is taller */
  .lg\:flex-row:has(> h2:first-child + p.section-intro:last-child) { align-items: center; }
  .lg\:flex-row:has(> h2:first-child + p.section-intro:last-child) > * { align-self: center; margin-top: 0; margin-bottom: 0; }
}

/* Product list (Home, AI Enablement, Cloud Services): a round plus/minus toggle tells visitors each row expands.
   It turns into a minus and inverts when the row opens, and darkens slightly while the row is hovered. */
.product-toggle {
  position: relative; display: grid; place-items: center; justify-self: end; width: 16px; height: 16px; color: #1F2124;
  transition: transform .5s var(--ease-soft, ease);
}
.product-toggle::before, .product-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.product-toggle::after { transform: rotate(90deg); }
.product-item.is-open .product-toggle::after { transform: rotate(0deg); opacity: 0; }
@media (min-width: 1024px) {
  .product-toggle {
    position: absolute; right: 0; top: 34px; width: 36px; height: 36px; border: 1px solid #E3E5EA; border-radius: 9999px;
    background: #fff; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .product-item:hover .product-toggle { border-color: #1F2124; }
  .product-item.is-open .product-toggle { border-color: #1F2124; background: #1F2124; color: #fff; transform: rotate(180deg); }
  .product-head { padding-right: 56px; }
}
@media (prefers-reduced-motion: reduce) { .product-toggle, .product-toggle::before, .product-toggle::after { transition: none; } }

/* Product list toggle, chevron version (replaces the plus/minus): a dark-grey down chevron in a pale grey circle
   that flips up when the row opens; the circle deepens slightly on row hover. */
.product-toggle { width: 26px; height: 26px; border: 0; border-radius: 9999px; background: #F1F2F4; color: #3A3B3E;
  transition: background-color .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.product-toggle::after { display: none; }
.product-toggle::before {
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 0; background: currentColor; transform: none; opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-item.is-open .product-toggle { transform: rotate(180deg); }
.product-item:hover .product-toggle, .product-item.is-open .product-toggle { background: #E6E8EC; }
@media (min-width: 1024px) {
  .product-toggle { width: 36px; height: 36px; border: 0; background: #F1F2F4; }
  .product-toggle::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .product-item:hover .product-toggle { border: 0; background: #E6E8EC; }
  .product-item.is-open .product-toggle { border: 0; background: #E6E8EC; color: #3A3B3E; transform: rotate(180deg); }
}

/* Knowing QCS journey (desktop): the mountain scene starts right under the chapter tabs and the chapter text sits
   over its sky, so the whole scene — peak to climbers — is in view (Figma). */
@media (min-width: 1024px) {
  .kq-journey { position: relative; z-index: 1; }
  .kq-journey__art { margin-top: -60px; }
  .kq-journey__panel { max-width: 640px; }
}
/* "40%+" stat on the home page: a little air between the % sign and the plus so they read as two symbols */
.stat-plus { margin-left: .14em; letter-spacing: 0; }

/* Footer: three social icons (LinkedIn, Facebook, YouTube) fit the 116px "Follow us on" column */
.site-footer__social ul { gap: 18px; padding-left: 4px; }
/* Footer "Get in touch" form, compact: shorter fields and tighter gaps so the form is no taller than the link
   columns beside it; still 16px-readable and easy to tap */
.site-footer__form { gap: 10px; }
.site-footer__form .site-footer__h { margin-bottom: 4px; }
.site-footer__form input { height: 40px; }
.site-footer__form button { height: 40px; margin-top: 2px; }
.site-footer__form p { margin-top: 2px; }
@media (min-width: 1024px) {
  .site-footer__form input { height: 42px; }
  .site-footer__form { gap: 12px; }
  .site-footer__bottom { margin-top: 36px; }
}

/* Footer: "Certified excellence" heading and ISO badges centred in their block */
.site-footer__certs { text-align: center; }
.site-footer__certs ul { justify-content: center; }
@media (min-width: 1024px) { .site-footer__certs { padding-left: 0; justify-self: center; } }
/* Second row: the Forbes India DGEMS 2026 Select 200 mark, on its own line under the ISO badges, at the badges' height */
.site-footer__certs ul { flex-wrap: wrap; row-gap: 2px; }
.site-footer__certs .site-footer__cert-wide { flex-basis: 100%; display: flex; justify-content: center; }
.site-footer__certs .site-footer__cert-wide img { width: auto; height: 60px; } /* 60px tall at every size; width follows the 139:50 ratio */
/* Footer "Get in touch" form, narrower: capped width on tablet, a slimmer right-hand column on desktop */
@media (min-width: 640px) and (max-width: 1023px) { .site-footer__form { max-width: 420px; } }
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)) 116px minmax(260px, 310px); }
}
/* Footer (desktop): the office addresses share the "Get in touch" form's column (same width, same right edge) and
   are centred within it, so the two blocks sit on one vertical centre line */
@media (min-width: 1024px) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 310px); }
  .site-footer__offices { justify-self: center; }
}
/* Footer (desktop): "Certified excellence" sits on the page's centre line; the office addresses start exactly where
   the "Get in touch" form starts (same left edge) */
@media (min-width: 1024px) {
  .site-footer__bottom { position: relative; }
  .site-footer__certs { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
  .site-footer__offices { grid-column: 3; justify-self: start; }
}

/* Cloud Services "Four priorities" (desktop): the whole scene is drawn at --s of its design size so the full shape
   stack and labels fit on one screen. Every position and size scales together, so nothing crops or shifts. */
@media (min-width: 1024px) {
  .cs-balance__stage { --s: clamp(.62, min((100vh - 245px) / 629px, (100vw - 140px) / 960px), 1.35); width: calc(960px * var(--s)); height: calc(629px * var(--s)); margin: 50px auto 0; }
  .cs-shape, .cs-balance.is-balanced .cs-shape {
    width: calc(var(--w) * var(--s) * 1px);
  }
  .cs-shape { left: calc(var(--sx) * var(--s) * 1px); top: calc(var(--sy) * var(--s) * 1px); }
  .cs-balance.is-balanced .cs-shape { left: calc(var(--bx) * var(--s) * 1px); top: calc(var(--by) * var(--s) * 1px); }
  .cs-balance__stage .cs-priorities { --pitch: calc(94px * var(--s)); }
  .cs-priorities li { left: calc(var(--sx) * var(--s) * 1px); top: calc(var(--sy) * var(--s) * 1px); font-size: 28px; line-height: 36px; }
  .cs-balance.is-balanced .cs-priorities li { left: calc(686px * var(--s)); top: calc(134px * var(--s) + var(--i) * var(--pitch)); }
  .cs-balance__hint { top: calc(663px * var(--s)); }
}
/* Cloud Foundation (desktop): the section is exactly one screen tall below the header, so when it is in view
   nothing of the neighbouring sections shows; the scene above fills the space left under the heading and is
   centred on the page */
@media (min-width: 1024px) {
  .cs-balance > div { display: flex; flex-direction: column; min-height: calc(100vh - 64px); padding-top: 40px; padding-bottom: 24px; }
}

/* Application Development service cards: the photo eases into a slight zoom while the card is hovered and eases
   back out on leave, clipped to its rounded frame so the card size and corners never change */
.ad-svc-media { display: block; overflow: hidden; border-radius: 8px; }
.ad-svc-media .cs-svc__img { display: block; transform: scale(1); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .cs-svc:hover .ad-svc-media .cs-svc__img { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ad-svc-media .cs-svc__img { transition: none; } }

/* AI Enablement diagram: the "Enterprise AI" centre label is one line, a touch larger and bolder, on a soft
   frosted pill so it stays legible over the overlapping circles */
.ai-layers__result { white-space: nowrap; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 1024px) {
  .ai-layers__result {
    width: auto; padding: 8px 18px; border-radius: 9999px; font-size: 22px; line-height: 28px; font-weight: 600;
    background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(60, 70, 160, .14);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
}

/* ---------- Home hero motion (index.html) ----------
   Restrained by design (a corporate front door, not a showreel): one calm ambient layer, an entrance that plays once,
   and a foreground that stays still unless the visitor interacts with it.
   1. entrance (once): the headline rises in word by word (the page script wraps each word in .hx-w), then the
      paragraph, the two cards easing in from the right, the product badges and the Forbes card;
   2. ambient: the ribbons ride a gentle swell (rise, fall and rock as one piece, shape intact) while water light
      (swells + caustics) plays across them only (filter in index.html); three soft colour glows sit behind, and a
      faint light sheen passes now and then;
   3. accents: one light sweep runs through the product badges and the Forbes logo after the entrance; after that they
      only catch the light on hover;
   4. desktop cards lean very slightly towards the pointer, with a soft spotlight under it.
   The water light is steered by the page script along smooth random paths, so it never repeats; it rests while the
   hero is scrolled out of view.
   Only transform / translate / scale / opacity / filter animate. Reduced motion: everything still. */

/* 2. ambient: glows + sheen */
.hero-aura {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  transform: translate(calc(var(--hp-x, 0px) * -1.6), calc(var(--hp-y, 0px) * -1.6));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  animation: hero-in 1.6s ease-out both;
}
/* the glows' position and size are steered along smooth random paths by the page script */
.hero-aura span { position: absolute; width: 38vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); will-change: translate, scale; }
.hero-aura span:nth-child(1) { left: -6%; top: 10%; background: rgba(255, 186, 128, .32); }
.hero-aura span:nth-child(2) { left: 34%; top: -18%; background: rgba(158, 138, 255, .26); }
.hero-aura span:nth-child(3) { right: -8%; top: 22%; background: rgba(104, 176, 255, .28); }
.hero-aura::after {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .24) 50%, transparent 58%);
  transform: translateX(-60%);
}
/* the sheen passes at random moments (the page script adds .is-sheen), then snaps back out of sight */
.hero-aura.is-sheen::after { transform: translateX(60%); transition: transform 4.5s cubic-bezier(.45, 0, .55, 1); }

/* 1. entrance (once) */
.hx-w { display: inline-block; animation: hx-word .8s cubic-bezier(.22, 1, .36, 1) calc(.12s + var(--i) * .05s) both; }
@keyframes hx-word { from { opacity: 0; translate: 0 .35em; filter: blur(6px); } }
#hero-title + p { animation: hx-up .8s cubic-bezier(.22, 1, .36, 1) .6s both; }
@keyframes hx-up { from { opacity: 0; translate: 0 12px; } }
.hero-cards > article { animation: hx-slide .9s cubic-bezier(.22, 1, .36, 1) .4s both; }
.hero-cards > article + article { animation-delay: .55s; }
@keyframes hx-slide { from { opacity: 0; translate: 24px 0; } }
.hero-badges li { animation: hx-pop .55s cubic-bezier(.22, 1, .36, 1) calc(.8s + var(--i, 0) * .05s) both; }
@keyframes hx-pop { from { opacity: 0; scale: .94; translate: 0 6px; } }
.hero-award { animation: hx-up .8s cubic-bezier(.22, 1, .36, 1) .9s both; }

/* 3. accents: a light sweep across a badge / the Forbes logo (once after the entrance via .is-glint, then on hover) */
.hero-badges a { position: relative; }
.hero-badges a::after, .hero-award a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(160, 196, 255, .45) 50%, transparent 70%);
}
.hero-award a { position: relative; display: block; overflow: hidden; border-radius: 6px; }
.hero-award a::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%); }
.hero-badges a.is-glint::after, .hero-badges a:hover::after,
.hero-award a.is-glint::after, .hero-award a:hover::after { transform: translateX(120%); transition: transform 1s cubic-bezier(.45, 0, .55, 1); }

/* 4. desktop: cards lean slightly towards the pointer, with a spotlight that follows it */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hero-cards > article {
    position: relative; isolation: isolate; overflow: hidden;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
  }
  .hero-cards > article::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s ease;
    background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(1, 90, 235, .07), transparent 70%);
  }
  .hero-cards > article:hover { box-shadow: 0 16px 36px -20px rgba(30, 64, 140, .24); }
  .hero-cards > article:hover::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aura, .hero-aura span, .hero-aura::after, .hx-w, #hero-title + p, .hero-cards > article, .hero-badges li,
  .hero-award { animation: none !important; }
  .hero-aura::after, .hero-award a::after, .hero-badges a::after { display: none; }
  .hero-cards > article { transform: none !important; }
}

/* In-page anchors to a products section (e.g. the Resources menu's "Products & Accelerators" link to
   ai-enablement.html#products) land just below the sticky header: 72px tall on mobile, 64px from lg up. */
section#products { scroll-margin-top: 72px; }
@media (min-width: 1024px) { section#products { scroll-margin-top: 64px; } }

/* Hero headings (the page <h1> on every page): one shared size scale so no hero title runs past three lines.
   h1.hero-title outranks the single-class size utilities and the per-section title classes (bd__, gt__, kq-breathe__),
   which keep their own weight, colour and layout. */
h1.hero-title { font-size: clamp(18px, 5.8vw, 28px); line-height: 1.28; letter-spacing: -.03em; text-wrap: balance; }
@media (min-width: 640px) { h1.hero-title { font-size: 36px; line-height: 1.22; } }
@media (min-width: 1024px) { h1.hero-title { font-size: clamp(36px, 3.5vw, 48px); line-height: 1.25; letter-spacing: -.04em; } }

/* Privacy policy (privacy-policy.html, article.bd.pp): the blog-detail article styles plus what a long legal text needs;
   room above the title in place of the back link, space between paragraphs and sections, run-in subheads, addresses. */
.pp .bd__head { margin-top: 0; padding-top: 36px; } /* no back link above, so a top margin would collapse out of the hero and show white under the header */
.pp .bd__meta dd a, .pp__mail { color: #015AEB; text-underline-offset: 3px; }
.pp .bd__meta dd a:hover { text-decoration: underline; }
.pp .bd__body h2 { margin-top: 28px; }
.pp .bd__body h2:first-child { margin-top: 0; }
.pp .bd__body h3 { margin-top: 12px; font-size: 13px; line-height: 18px; font-weight: 500; color: #1F2124; }
.pp .bd__body p + p, .pp .bd__body p + .pp__address, .pp .bd__body .pp__address + p, .pp .bd__body p + .pp__offices { margin-top: 10px; }
.pp .bd__body p + h3, .pp .bd__body .bd__list + h3 { margin-top: 14px; }
.pp__address { font-style: normal; }
.pp__offices { display: grid; gap: 16px; }
@media (min-width: 768px) { .pp__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) {
  .pp .bd__head { padding-top: 56px; }
  .pp .bd__body h2 { margin-top: 44px; }
  .pp .bd__body h2:first-child { margin-top: 0; }
  .pp .bd__body h3 { margin-top: 18px; font-size: 16px; line-height: 24px; }
  .pp .bd__body p + p, .pp .bd__body p + .pp__address, .pp .bd__body .pp__address + p, .pp .bd__body p + .pp__offices { margin-top: 14px; }
  .pp .bd__body p + h3, .pp .bd__body .bd__list + h3 { margin-top: 20px; }
}