/* Original: phase1/css/styles/globals.css */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.-top-8 {
  top: -2rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-\[3px\] {
  left: 3px;
}
.right-1\/2 {
  right: 50%;
}
.right-8 {
  right: 2rem;
}
.right-\[5\%\] {
  right: 5%;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.z-10 {
  z-index: 10;
}
.z-\[5\] {
  z-index: 5;
}
.mx-\[15px\] {
  margin-left: 15px;
  margin-right: 15px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-ml-0\.5 {
  margin-left: -0.125rem;
}
.-ml-\[50px\] {
  margin-left: -50px;
}
.-ml-\[50vw\] {
  margin-left: -50vw;
}
.-mr-\[50vw\] {
  margin-right: -50vw;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-\[30px\] {
  margin-bottom: 30px;
}
.mb-\[clamp\(10px\2c 2vw\2c 20px\)\] {
  margin-bottom: clamp(10px,2vw,20px);
}
.mb-\[clamp\(15px\2c 3vw\2c 30px\)\] {
  margin-bottom: clamp(15px,3vw,30px);
}
.ml-0 {
  margin-left: 0px;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-28 {
  margin-top: 7rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-16 {
  height: 4rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-\[120px\] {
  height: 120px;
}
.h-\[250vh\] {
  height: 250vh;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-16 {
  width: 4rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[40vw\] {
  width: 40vw;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[820px\] {
  min-width: 820px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[65\%\] {
  max-width: 65%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[60px\] {
  border-radius: 60px;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y-\[5px\] {
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.border-l-\[10px\] {
  border-left-width: 10px;
}
.border-t {
  border-top-width: 1px;
}
.border-\[\#08356D\] {
  --tw-border-opacity: 1;
  border-color: rgb(8 53 109 / var(--tw-border-opacity, 1));
}
.border-\[var\(--navy\)\] {
  border-color: var(--navy);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-y-transparent {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.border-l-\[color-mix\(in_oklab\2c var\(--navy\)_45\%\2c transparent\)\] {
  border-left-color: color-mix(in oklab,var(--navy) 45%,transparent);
}
.bg-\[\#08356D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(8 53 109 / var(--tw-bg-opacity, 1));
}
.bg-\[color-mix\(in_oklab\2c var\(--navy\)_45\%\2c transparent\)\] {
  background-color: color-mix(in oklab,var(--navy) 45%,transparent);
}
.bg-\[var\(--white\)\] {
  background-color: var(--white);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.fill-white {
  fill: #fff;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-8 {
  padding: 2rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-\[25px\] {
  padding-left: 25px;
  padding-right: 25px;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pt-0 {
  padding-top: 0px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[clamp\(11px\2c 1\.2vw\2c 13px\)\] {
  font-size: clamp(11px,1.2vw,13px);
}
.text-\[clamp\(14px\2c 1\.8vw\2c 22px\)\] {
  font-size: clamp(14px,1.8vw,22px);
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-\[1\.3\] {
  line-height: 1.3;
}
.leading-\[1\.6\] {
  line-height: 1.6;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[2px\] {
  letter-spacing: 2px;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-\[\#333\] {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-\[\#555\] {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-\[var\(--brand-blue\)\] {
  color: var(--brand-blue);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.overline {
  text-decoration-line: overline;
}
.opacity-0 {
  opacity: 0;
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_15px_40px_rgba\(0\2c 0\2c 0\2c \.2\)\] {
  --tw-shadow: 0 15px 40px rgba(0,0,0,.2);
  --tw-shadow-colored: 0 15px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[2px_0_5px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 2px 0 5px rgba(0,0,0,0.05);
  --tw-shadow-colored: 2px 0 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.will-change-\[width\2c height\2c top\2c left\2c border-radius\] {
  will-change: width,height,top,left,border-radius;
}


/* Keep anchor targets visible below the sticky global header. */
html {
  scroll-padding-top: 82px;
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 72px;
  }
}

.hover\:-translate-y-\[3px\]:hover {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[var\(--green\)\]:hover {
  border-color: var(--green);
}

.hover\:bg-\[var\(--green\)\]:hover {
  background-color: var(--green);
}

.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:shadow-\[0_8px_18px_rgba\(16\2c 24\2c 40\2c \.12\)\]:hover {
  --tw-shadow: 0 8px 18px rgba(16,24,40,.12);
  --tw-shadow-colored: 0 8px 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 768px) {
  .max-md\:left-\[5vw\] {
    left: 5vw;
  }
  .max-md\:right-\[5vw\] {
    right: 5vw;
  }
  .max-md\:top-\[50vh\] {
    top: 50vh;
  }
  .max-md\:w-\[90vw\] {
    width: 90vw;
  }
  .max-md\:max-w-full {
    max-width: 100%;
  }
}

@media (min-width: 640px) {
  .sm\:-mt-6 {
    margin-top: -1.5rem;
  }
  .sm\:h-44 {
    height: 11rem;
  }
  .sm\:h-\[160px\] {
    height: 160px;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 768px) {
  .md\:sticky {
    position: sticky;
  }
  .md\:top-24 {
    top: 6rem;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .md\:-mt-8 {
    margin-top: -2rem;
  }
  .md\:block {
    display: block;
  }
  .md\:h-56 {
    height: 14rem;
  }
  .md\:h-\[200px\] {
    height: 200px;
  }
  .md\:h-fit {
    height: -moz-fit-content;
    height: fit-content;
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-\[240px_1px_1fr\] {
    grid-template-columns: 240px 1px 1fr;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:p-12 {
    padding: 3rem;
  }
}

@media (min-width: 1024px) {
  .lg\:h-72 {
    height: 18rem;
  }
  .lg\:h-\[230px\] {
    height: 230px;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .xl\:h-80 {
    height: 20rem;
  }
  .xl\:h-\[260px\] {
    height: 260px;
  }
}

/* Original: phase1/css/home.css */
/* Existing brand palette; all other surfaces are controlled tints/opacity. */
:root {
  --primary: #00295E;
  --secondary: #97E1B3;
  --accent: #57D97D;
  --accent-soft: #CAFCE4;
  --dark: #071522;
  --surface: #FFFFFF;
  --surface-soft: #FFFFFF;
  --surface-accent: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
  --neutral-background: var(--surface);
  --text-primary: var(--dark);
  --text-secondary: #525862;
  --text-muted: var(--text-secondary);
  --text-on-dark: var(--surface);
  --text-on-dark-secondary: rgb(255 255 255 / 82%);
  --border: rgb(0 41 94 / 16%);
  --border-strong: rgb(0 41 94 / 30%);
  --divider: rgb(0 41 94 / 10%);
  --border-on-dark: rgb(255 255 255 / 24%);
  --surface-on-dark: color-mix(in srgb, var(--dark) 90%, var(--primary));
  --primary-rgb: 0 41 94;
  --accent-rgb: 87 217 125;
  --secondary-rgb: 151 225 179;
  --dark-rgb: 7 21 34;
  --white-rgb: 255 255 255;
  /* Preserve the explicitly approved case-study reference palette. */
  --case-primary: #00235A;
  --case-surface: #CAFCE5;
  --case-primary-rgb: 0 35 90;
}

:root {
  --cyan: var(--accent);
  --cyan-soft: var(--accent-soft);
  --text: var(--surface);
  --muted: rgb(var(--white-rgb) / 0.72);
  --line: rgb(var(--white-rgb) / 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Plus Jakarta Sans", Arial, sans-serif; background: var(--dark); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.hero {
  position: relative;
  min-height: calc(100vh - 100px);
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.heroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -4;
}


.heroShell {
  width: min(1500px, calc(100% - 48px));
  min-height: calc(100vh - 100px);
  margin: 0 auto;
  padding: 16px 0 18px;
  display: flex;
  flex-direction: column;
}

.navbar {
  height: 74px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid rgb(var(--white-rgb) / .14);
  border-radius: 22px;
  background: transparent;
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brandMark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  box-shadow: 0 0 28px rgb(var(--accent-rgb) / .22);
}
.brandText { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }

.desktopNav { display: flex; align-items: center; justify-content: center; gap: 2px; margin-left: auto; }
.navLink {
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgb(var(--white-rgb) / .78);
  font-size: 13px;
  transition: .25s ease;
}
.navLink:hover, .navLink.active {
  color: var(--text-on-dark);
  border-color: rgb(var(--accent-rgb) / .58);
  background: rgb(var(--accent-rgb) / .08);
}

.talkBtn, .primaryBtn, .secondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.talkBtn {
  gap: 15px;
  margin-left: 8px;
  padding: 8px 9px 8px 20px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  box-shadow: 0 14px 40px rgb(var(--accent-rgb) / .16);
}
.talkBtn:hover, .primaryBtn:hover { transform: translateY(-2px); }
.circleArrow {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface);
}

.heroContent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 10px 42px;
}
.contentColumn { width: min(760px, 100%); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .10em;
  color: rgb(var(--white-rgb) / .78);
}
.eyebrowLine { width: 34px; height: 1px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }

h1 {
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 5.7rem);
  line-height: .91;
  letter-spacing: -.058em;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 3px 34px rgb(var(--dark-rgb) / .28);
}
h1 span { color: var(--cyan); text-shadow: 0 0 26px rgb(var(--accent-rgb) / .10); }
.heroCopy {
  width: min(590px, 100%);
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.heroActions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 27px; }
.primaryBtn, .secondaryBtn { min-height: 52px; padding: 8px 10px 8px 20px; gap: 18px; font-size: 14px; font-weight: 700; }
.primaryBtn { min-width: 190px; color: var(--text-primary); background: linear-gradient(90deg, var(--accent), var(--secondary)); }
.circleArrow.light { width: 34px; height: 34px; }
.secondaryBtn {
  min-width: 188px;
  color: var(--text-on-dark);
  border: 1px solid rgb(var(--white-rgb) / .38);
  background: transparent;
  cursor: pointer;
}
.secondaryBtn:hover { transform: translateY(-2px); border-color: rgb(var(--accent-rgb) / .75); background: rgb(var(--accent-rgb) / .08); }
.playCircle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(var(--white-rgb) / .56); border-radius: 50%; font-size: 10px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: min(740px, 100%); margin-top: 55px; }
.stat { min-height: 68px; padding-right: 24px; display: flex; flex-direction: column; justify-content: center; }
.stat + .stat { padding-left: 28px; border-left: 1px solid rgb(var(--white-rgb) / .28); }
.stat strong { font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1; }
.stat small { margin-top: 8px; font-size: 11px; color: rgb(var(--white-rgb) / .66); }

.trustBubble {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 370px;
  padding: 12px 15px;
  border: 1px solid rgb(var(--white-rgb) / .14);
  border-radius: 999px;
  background: transparent;
}
.trustBubble p { margin: 0; color: rgb(var(--white-rgb) / .77); font-size: 12px; line-height: 1.3; }
.avatars { display: flex; }
.avatars span { width: 31px; height: 31px; margin-left: -7px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgb(var(--white-rgb) / .9); background: linear-gradient(135deg, var(--accent-soft), var(--surface-soft)); color: var(--text-primary); font-size: 10px; font-weight: 700; }
.avatars span:first-child { margin-left: 0; }
.plus { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-size: 20px; }

.partnerBar {
  min-height: 82px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid rgb(var(--white-rgb) / .16);
  border-radius: 18px;
  background: transparent;
}
.partnerIntro { display: flex; align-items: center; gap: 12px; min-width: max-content; font-size: 10px; letter-spacing: .05em; color: rgb(var(--white-rgb) / .62); }
.cyanDot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px rgb(var(--accent-rgb) / .9); }
.partners { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 28px; flex-wrap: wrap; color: rgb(var(--white-rgb) / .88); font-size: clamp(1rem, 1.8vw, 1.32rem); font-weight: 700; }

@media (max-width: 980px) {
  .heroShell { width: min(100% - 26px, 1500px); }
  .desktopNav { display: none; }
  .navbar { height: 68px; }
  .talkBtn { margin-left: auto; }
  .heroContent { align-items: flex-start; flex-direction: column; justify-content: center; padding: 70px 6px 44px; }
  .trustBubble { align-self: flex-start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .partnerBar { flex-direction: column; align-items: flex-start; }
  .partners { width: 100%; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .hero { min-height: calc(100svh - 90px); }
  .heroShell { width: min(100% - 20px, 1500px); min-height: calc(100svh - 90px); padding: 10px 0 14px; }
  .navbar { height: 62px; padding: 0 12px; border-radius: 17px; }
  .brandMark { width: 34px; height: 34px; }
  .brandText { font-size: 16px; }
  .talkBtn { padding: 7px; }
  .talkBtn > span:first-child { display: none; }
  .circleArrow { width: 31px; height: 31px; }
  .heroContent { padding-top: 62px; gap: 34px; }
  .eyebrow { font-size: 9px; letter-spacing: .07em; }
  h1 { font-size: clamp(2.65rem, 14vw, 4.25rem); }
  .heroCopy { font-size: 14px; line-height: 1.62; }
  .heroActions { align-items: stretch; }
  .primaryBtn, .secondaryBtn { flex: 1 1 180px; }
  .stats { margin-top: 42px; }
  .stat { padding-right: 14px; }
  .stat + .stat { padding-left: 16px; }
  .stat strong { font-size: 1.55rem; }
  .stat small { font-size: 10px; }
  .trustBubble { max-width: 100%; }
  .partnerBar { padding: 15px; border-radius: 16px; }
  .partnerIntro { white-space: normal; line-height: 1.4; }
  .partners { gap: 16px 24px; }
}

/* =========================
   SERVICES SECTION — reference matched
   ========================= */
.servicesSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 136px 0 97px;
  overflow: hidden;
}

.servicesInner {
  width: min(1380px, calc(100% - 160px));
  margin: 0 auto;
}

.servicesKicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  min-height: 17px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 17px;
  letter-spacing: .29em;
  text-transform: uppercase;
}

.servicesKicker strong {
  font-weight: 700;
}

.servicesKicker span {
  width: 47px;
  height: 1px;
  background: var(--accent);
}

.servicesTitle {
  margin: 22px auto 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 72px;
  line-height: 1.10;
  letter-spacing: -.045em;
  font-weight: 700;
  text-transform: uppercase;
}

.servicesTitle span {
  color: var(--primary);
}

.servicesLead {
  margin: 20px auto 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: -.018em;
  font-weight: 400;
}

.servicesCarousel {
  position: relative;
  margin-top: 35px;
}

.servicesRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0;
}

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

.serviceCard {
  height: 323px;
  padding: 31px 34px 30px;
  border: 1px solid var(--border-strong);
  border-radius: 25px;
  background: var(--surface);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.serviceCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgb(var(--dark-rgb) / .055);
}

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

.serviceIcon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  color: var(--text-primary);
}

.serviceIcon img,
.serviceIcon svg {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.serviceArrow {
  width: 48px;
  height: 48px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  border-radius: 999px;
  transition: transform .22s ease;
}

.arrowAsset {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.arrowAssetReverse {
  transform: rotate(180deg);
}

.serviceArrow:hover {
  transform: translateX(4px);
}

.serviceCardBody {
  margin-top: 25px;
}

.serviceCard h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 700;
}

.serviceCard p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.50;
  letter-spacing: -.018em;
  font-weight: 400;
}

.servicesNav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.servicesNav .arrowAsset {
  width: 46px;
  height: 46px;
}

.servicesNav:hover {
  transform: translateY(-50%) scale(1.04);
  background: var(--surface);
}

.servicesNavPrev {
  left: -65px;
}

.servicesNavNext {
  right: -68px;
}

.servicesCtaWrap {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.servicesCta {
  width: 348px;
  height: 82px;
  padding: 0 45px 0 62px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  transition: transform .22s ease, background .22s ease;
}

.servicesCta:hover {
  transform: translateY(-2px);
  background: var(--surface);
}

.servicesCtaArrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-right: -9px;
}

@media (max-width: 1240px) {
  .servicesSection {
    padding-top: 105px;
  }

  .servicesInner {
    width: min(100% - 72px, 1100px);
  }

  .servicesTitle {
    font-size: clamp(55px, 6vw, 68px);
  }

  .servicesLead {
    font-size: 21px;
    line-height: 1.6;
  }

  .servicesRail {
    grid-auto-columns: calc((100% - 40px) / 3);
  }

  .servicesNavPrev { left: -27px; }
  .servicesNavNext { right: -27px; }
}

@media (max-width: 900px) {
  .servicesSection {
    padding: 82px 0 76px;
  }

  .servicesInner {
    width: min(100% - 36px, 760px);
  }

  .servicesKicker {
    gap: 16px;
    font-size: 11px;
  }

  .servicesTitle {
    margin-top: 19px;
    font-size: clamp(44px, 7.7vw, 60px);
    line-height: 1.02;
  }

  .servicesLead {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.55;
  }

  .desktopBreak {
    display: none;
  }

  .servicesCarousel {
    margin-top: 34px;
  }

  .servicesRail {
    grid-auto-columns: calc((100% - 20px) / 2);
  }

  .serviceCard {
    padding: 29px 28px;
  }

  .servicesNav {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }

  .servicesNavPrev { left: -18px; }
  .servicesNavNext { right: -18px; }
}

@media (max-width: 620px) {
  .servicesSection {
    padding: 62px 0 64px;
  }

  .servicesInner {
    width: min(100% - 28px, 460px);
  }

  .servicesKicker {
    gap: 12px;
    font-size: 10px;
    letter-spacing: .24em;
  }

  .servicesKicker span {
    width: 31px;
  }

  .servicesTitle {
    font-size: clamp(37px, 11.2vw, 50px);
    line-height: .99;
    letter-spacing: -.05em;
  }

  .servicesLead {
    font-size: 16px;
    line-height: 1.55;
  }

  .servicesRail {
    grid-auto-columns: 100%;
    gap: 12px;
  }

  .serviceCard {
    height: 308px;
    padding: 28px 27px;
    border-radius: 23px;
  }

  .serviceCard h3 {
    font-size: 21px;
  }

  .serviceCard p {
    font-size: 17px;
  }

  .servicesNav {
    top: auto;
    bottom: -60px;
    transform: none;
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .servicesNav:hover {
    transform: scale(1.04);
  }

  .servicesNavPrev {
    left: calc(50% - 52px);
  }

  .servicesNavNext {
    right: calc(50% - 52px);
  }

  .servicesCtaWrap {
    margin-top: 88px;
  }

  .servicesCta {
    width: 100%;
    height: 68px;
    padding: 0 26px 0 30px;
    font-size: 17px;
  }
}

/* =========================
   WHO WE ARE SECTION — reference matched
   ========================= */
.whoSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 56px 0 112px;
  overflow: hidden;
}

.whoInner {
  width: min(1740px, calc(100% - 176px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(220px, .51fr) minmax(0, 1.42fr);
  gap: 18px;
  align-items: stretch;
}

.whoImage,
.whoCard {
  min-height: 565px;
  border-radius: 28px;
  overflow: hidden;
}

.whoImage {
  position: relative;
  background: var(--surface);
}

.whoImage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whoImageMain img {
  object-position: center 46%;
}

.whoImageTall img {
  object-position: 53% center;
}

.whoImageCaption {
  position: absolute;
  left: 30px;
  bottom: 43px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  color: var(--text-on-dark);
  font-size: 27px;
  line-height: 1.45;
  letter-spacing: -.025em;
  text-shadow: 0 1px 10px rgb(var(--dark-rgb) / .28);
}

.whoImageCaptionLine {
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / .26);
}

.whoImageCaption div {
  display: flex;
  flex-direction: column;
}

.whoCard {
  border: 2px solid var(--border-strong);
  background: var(--surface);
  padding: 40px 43px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.whoKicker {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 22px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.whoKicker span {
  width: 48px;
  height: 2px;
  flex: 0 0 48px;
  background: var(--accent);
}

.whoKicker strong {
  font-weight: 600;
}

.whoTitle {
  margin: 37px 0 0;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(45px, 3.34vw, 64px);
  line-height: .99;
  letter-spacing: -.052em;
  font-weight: 700;
  text-transform: uppercase;
}

.whoTitle span {
  color: var(--primary);
}

.whoCopy {
  max-width: 710px;
  margin-top: 31px;
  color: var(--primary);
  font-size: 20px;
  line-height: 1.46;
  letter-spacing: -.018em;
}

.whoCopy p {
  margin: 0;
}

.whoCopy p + p {
  margin-top: 28px;
}

.whoCta {
  width: 369px;
  max-width: 100%;
  min-height: 66px;
  margin-top: 24px;
  padding: 0 23px 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--surface);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  transition: transform .22s ease, background .22s ease;
}

.whoCta img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.whoCta:hover {
  transform: translateY(-2px);
  background: var(--surface);
}

@media (max-width: 1450px) {
  .whoInner {
    width: min(1320px, calc(100% - 96px));
    grid-template-columns: minmax(0, 1fr) minmax(200px, .5fr) minmax(0, 1.32fr);
  }

  .whoImage,
  .whoCard {
    min-height: 520px;
  }

  .whoCard {
    padding: 35px 36px 31px;
  }

  .whoKicker {
    font-size: 14px;
  }

  .whoTitle {
    margin-top: 31px;
  }

  .whoCopy {
    margin-top: 27px;
    font-size: 18px;
    line-height: 1.48;
  }

  .whoCopy p + p {
    margin-top: 22px;
  }

  .whoCta {
    width: 342px;
    min-height: 61px;
    font-size: 17px;
  }
}

@media (max-width: 1080px) {
  .whoSection {
    padding: 48px 0 82px;
  }

  .whoInner {
    width: min(920px, calc(100% - 48px));
    grid-template-columns: 1.45fr .72fr;
    gap: 16px;
  }

  .whoImage,
  .whoCard {
    min-height: 500px;
  }

  .whoCard {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 42px;
  }

  .whoTitle {
    font-size: clamp(46px, 7vw, 67px);
  }

  .whoCopy {
    max-width: 780px;
    font-size: 19px;
  }
}

@media (max-width: 680px) {
  .whoSection {
    padding: 32px 0 64px;
  }

  .whoInner {
    width: min(100% - 28px, 520px);
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .whoImage,
  .whoCard {
    min-height: auto;
    border-radius: 23px;
  }

  .whoImageMain {
    height: 420px;
  }

  .whoImageTall {
    height: 340px;
  }

  .whoImageCaption {
    left: 24px;
    bottom: 28px;
    gap: 14px;
    font-size: 22px;
  }

  .whoCard {
    grid-column: auto;
    padding: 30px 25px 27px;
    border-width: 1.5px;
  }

  .whoKicker {
    gap: 13px;
    font-size: 11px;
    letter-spacing: .24em;
  }

  .whoKicker span {
    width: 35px;
    flex-basis: 35px;
    height: 1.5px;
  }

  .whoTitle {
    margin-top: 25px;
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1;
  }

  .whoCopy {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.55;
  }

  .whoCopy p + p {
    margin-top: 20px;
  }

  .whoCta {
    width: 100%;
    min-height: 62px;
    margin-top: 25px;
    padding-left: 25px;
    font-size: 16px;
    border-width: 1.5px;
  }
}

/* =========================
   COST / DELIVERY SECTION — exact connected reference layout
   ========================= */
.costSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 78px 0 118px;
  overflow: hidden;
}

.costInner {
  width: min(1930px, calc(100% - 116px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(650px, .67fr) minmax(920px, 1fr);
  gap: clamp(70px, 5.7vw, 118px);
  align-items: center;
}

.costHeadlineBlock {
  align-self: center;
  min-width: 0;
}

.costEyebrow {
  margin: 0 0 12px 2px;
  color: var(--text-secondary);
  font-size: clamp(22px, 1.55vw, 31px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.costEyebrow strong {
  color: var(--text-primary);
  font-weight: 700;
}

.costHeadline {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(88px, 6.45vw, 132px);
  line-height: .79;
  letter-spacing: -.067em;
  font-weight: 700;
  text-transform: uppercase;
}

.costHeadline span {
  color: var(--primary);
}

.costHeadline strong {
  margin-top: 28px;
  color: var(--text-primary);
  font: inherit;
}

/* One continuous bordered shell: text card + image are physically connected. */
.costConnectedGroup {
  min-width: 0;
  min-height: 344px;
  display: grid;
  grid-template-columns: minmax(500px, 1.04fr) minmax(470px, .96fr);
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: 23px;
  background: var(--surface);
}

.costCard {
  min-width: 0;
  padding: 43px 55px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
}

.costCard h3 {
  margin: 0;
  max-width: 550px;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(34px, 2.03vw, 42px);
  line-height: 1.03;
  letter-spacing: -.052em;
  font-weight: 700;
  text-transform: uppercase;
}

.costCard p {
  max-width: 560px;
  margin: 27px 0 0;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.02vw, 21px);
  line-height: 1.26;
  letter-spacing: -.019em;
  font-weight: 400;
}

.costCta {
  width: max-content;
  min-width: 242px;
  min-height: 59px;
  margin-top: 25px;
  padding: 6px 8px 6px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 100%);
  color: var(--text-on-dark);
  font-size: clamp(17px, 1.08vw, 22px);
  line-height: 1;
  font-weight: 500;
  transition: transform .22s ease, filter .22s ease;
}

.costCta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.costCtaArrow {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.costImageWrap {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--dark);
}

.costImage {
  object-fit: cover;
  object-position: 52% 50%;
}

@media (max-width: 1650px) {
  .costSection {
    padding: 66px 0 104px;
  }

  .costInner {
    width: min(1500px, calc(100% - 84px));
    grid-template-columns: minmax(500px, .68fr) minmax(760px, 1fr);
    gap: clamp(48px, 4.5vw, 76px);
  }

  .costEyebrow {
    font-size: clamp(18px, 1.45vw, 24px);
  }

  .costHeadline {
    font-size: clamp(76px, 6.35vw, 104px);
  }

  .costHeadline strong {
    margin-top: 22px;
  }

  .costConnectedGroup {
    min-height: 302px;
    grid-template-columns: minmax(390px, 1.03fr) minmax(370px, .97fr);
  }

  .costCard {
    padding: 36px 40px 30px;
  }

  .costCard h3 {
    font-size: clamp(30px, 2.08vw, 35px);
  }

  .costCard p {
    margin-top: 20px;
    font-size: clamp(14px, 1.03vw, 17px);
  }

  .costCta {
    min-width: 205px;
    min-height: 49px;
    margin-top: 21px;
    padding: 5px 7px 5px 21px;
    font-size: 16px;
  }

  .costCtaArrow {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    font-size: 25px;
  }
}

@media (max-width: 1180px) {
  .costSection {
    padding: 48px 0 86px;
  }

  .costInner {
    width: min(980px, calc(100% - 48px));
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .costHeadlineBlock {
    max-width: 760px;
  }

  .costEyebrow {
    white-space: normal;
  }

  .costHeadline {
    font-size: clamp(74px, 10vw, 108px);
  }

  .costConnectedGroup {
    min-height: 315px;
    grid-template-columns: 1.05fr .95fr;
  }
}

@media (max-width: 760px) {
  .costSection {
    padding: 34px 0 68px;
  }

  .costInner {
    width: min(100% - 28px, 560px);
    gap: 30px;
  }

  .costEyebrow {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.15;
  }

  .costHeadline {
    font-size: clamp(52px, 16vw, 78px);
    line-height: .83;
  }

  .costHeadline strong {
    margin-top: 14px;
  }

  .costConnectedGroup {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .costCard {
    padding: 29px 26px 28px;
  }

  .costCard h3 {
    font-size: clamp(29px, 8.8vw, 39px);
  }

  .costCard p {
    margin-top: 19px;
    font-size: 14px;
    line-height: 1.43;
  }

  .costCta {
    min-width: 195px;
    min-height: 47px;
    margin-top: 21px;
    padding-left: 18px;
    font-size: 14px;
  }

  .costCtaArrow {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    font-size: 23px;
  }

  .costImageWrap {
    height: 285px;
    min-height: 285px;
  }
}

/* =========================
   HOW AI TRANSFORMS — responsive reference-matched section
   ========================= */
.howAiSection {
  background: var(--surface);
  color: var(--text-primary);
  overflow: hidden;
  padding: 0 0 34px;
}

.howAiInner {
  width: min(1539px, 100%);
  margin: 0 auto;
  padding: 0 31px 0 36px;
}

.howAiHeadingBlock {
  padding-top: 0;
}

.howAiTitle {
  margin: 0;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 196px;
  line-height: .72;
  letter-spacing: -.068em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.howAiTitle span {
  color: var(--primary);
}

.howAiSubtitle {
  margin: 12px 0 0;
  font-size: 41px;
  line-height: 1;
  letter-spacing: -.042em;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.howAiSubtitle strong {
  font-weight: 700;
}

.howAiCompareGrid {
  width: calc(100% - 54px);
  margin: 96px 0 0 23px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 283px minmax(0, 1fr);
  align-items: start;
}

.howAiColumn {
  min-width: 0;
}

.howAiPanel {
  min-height: 142px;
  padding: 18px 25px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 28px;
  color: var(--text-primary);
}

.howAiPanel--before {
  background: var(--surface);
}

.howAiPanel--after {
  background: #57D97D;
}

.howAiPanel strong,
.howAiPanel span {
  display: block;
  text-transform: uppercase;
}

.howAiPanel strong {
  font-size: 47px;
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 700;
}

.howAiPanel span {
  margin-top: 9px;
  font-size: 45px;
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 400;
}

.howAiArrowWrap {
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howAiArrow {
  display: block;
  width: 104px;
  height: 57px;
  object-fit: contain;
}

.aiTimeline {
  position: relative;
  margin-top: 61px;
  padding-left: 66px;
}

.aiTimeline ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiTimeline li {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: flex-start;
  padding: 0 8px 0 0;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;
}

.aiTimelineLine {
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 21px;
  width: 2px;
  background: var(--accent-soft);
}

.aiTimelineDot {
  position: absolute;
  left: -59px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--accent-soft);
  z-index: 1;
}

.aiTimeline--after .aiTimelineLine {
  background: var(--accent);
}

.aiTimeline--after .aiTimelineDot {
  background: var(--accent);
  border-color: var(--surface);
}

@media (max-width: 1320px) {
  .howAiInner {
    padding: 0 34px;
  }

  .howAiTitle {
    font-size: clamp(138px, 14.25vw, 188px);
  }

  .howAiSubtitle {
    font-size: clamp(29px, 3.05vw, 39px);
  }

  .howAiCompareGrid {
    width: calc(100% - 20px);
    margin-left: 10px;
    grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
  }

  .howAiPanel {
    min-height: 130px;
    padding: 18px 22px;
  }

  .howAiPanel strong {
    font-size: clamp(36px, 3.3vw, 44px);
  }

  .howAiPanel span {
    font-size: clamp(33px, 3.15vw, 42px);
  }

  .howAiArrowWrap {
    height: 130px;
  }

  .howAiArrow {
    width: 92px;
    height: auto;
  }

  .aiTimeline {
    padding-left: 61px;
  }

  .aiTimeline li {
    font-size: 16px;
  }

  .aiTimelineDot {
    left: -54px;
  }
}

@media (max-width: 980px) {
  .howAiSection {
    padding-bottom: 62px;
  }

  .howAiInner {
    width: min(100% - 44px, 900px);
    padding: 0;
  }

  .howAiHeadingBlock {
    padding-top: 18px;
  }

  .howAiTitle {
    font-size: clamp(90px, 17vw, 145px);
    line-height: .78;
  }

  .howAiSubtitle {
    margin-top: 11px;
    font-size: clamp(24px, 4.6vw, 37px);
    line-height: 1.06;
    white-space: normal;
  }

  .howAiCompareGrid {
    width: 100%;
    margin: 70px 0 0;
    grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  }

  .howAiPanel {
    min-height: 122px;
    border-radius: 24px;
  }

  .howAiPanel strong {
    font-size: clamp(30px, 4.8vw, 40px);
  }

  .howAiPanel span {
    font-size: clamp(27px, 4.5vw, 37px);
  }

  .howAiArrowWrap {
    height: 122px;
  }

  .howAiArrow {
    width: 76px;
  }

  .aiTimeline {
    margin-top: 48px;
    padding-left: 45px;
  }

  .aiTimelineLine {
    left: 10px;
  }

  .aiTimelineDot {
    left: -42px;
    width: 16px;
    height: 16px;
  }

  .aiTimeline li {
    min-height: 55px;
    font-size: 14px;
    line-height: 1.4;
  }
}

@media (max-width: 720px) {
  .howAiSection {
    padding: 26px 0 56px;
  }

  .howAiInner {
    width: min(100% - 28px, 560px);
  }

  .howAiHeadingBlock {
    padding-top: 0;
  }

  .howAiTitle {
    font-size: clamp(68px, 22vw, 112px);
    line-height: .78;
  }

  .howAiSubtitle {
    margin-top: 10px;
    max-width: 470px;
    font-size: clamp(20px, 6.1vw, 31px);
    line-height: 1.08;
  }

  .howAiCompareGrid {
    margin-top: 52px;
    grid-template-columns: 1fr;
  }

  .howAiColumn {
    width: 100%;
  }

  .howAiPanel {
    min-height: 116px;
    padding: 20px 23px;
    border-radius: 23px;
  }

  .howAiPanel strong {
    font-size: clamp(34px, 10vw, 46px);
  }

  .howAiPanel span {
    font-size: clamp(31px, 9.2vw, 42px);
  }

  .howAiArrowWrap {
    height: 96px;
  }

  .howAiArrow {
    width: 76px;
    transform: rotate(90deg);
  }

  .aiTimeline {
    margin-top: 36px;
    padding-left: 48px;
  }

  .aiTimelineLine {
    left: 10px;
    top: 10px;
    bottom: 22px;
  }

  .aiTimelineDot {
    left: -45px;
  }

  .aiTimeline li {
    min-height: 52px;
    padding-right: 0;
    font-size: 14px;
  }

  .howAiColumn--before .aiTimeline {
    margin-bottom: 4px;
  }
}

@media (max-width: 420px) {
  .howAiInner {
    width: min(100% - 22px, 390px);
  }

  .howAiTitle {
    font-size: clamp(60px, 21.5vw, 88px);
  }

  .howAiSubtitle {
    font-size: clamp(18px, 5.7vw, 24px);
  }

  .howAiCompareGrid {
    margin-top: 42px;
  }

  .howAiPanel {
    min-height: 105px;
    padding: 17px 20px;
    border-radius: 20px;
  }

  .howAiPanel strong {
    font-size: clamp(30px, 9.6vw, 38px);
  }

  .howAiPanel span {
    font-size: clamp(27px, 8.8vw, 35px);
  }

  .howAiArrowWrap {
    height: 82px;
  }

  .howAiArrow {
    width: 66px;
  }

  .aiTimeline {
    padding-left: 44px;
  }

  .aiTimeline li {
    min-height: 58px;
    font-size: 13.5px;
  }

  .aiTimelineDot {
    left: -41px;
  }
}

/* WHAT TEAMS SAY / TESTIMONIAL CAROUSEL */
.testimonialsSection {
  background: var(--surface-soft);
  color: var(--text-primary);
  padding: 34px 0 82px;
  overflow: hidden;
}

.testimonialsInner {
  width: min(1460px, calc(100% - 72px));
  margin: 0 auto;
}

.testimonialsHeadingBlock {
  margin-bottom: 42px;
}

.testimonialsTitle {
  margin: 0;
  font-size: clamp(112px, 10.5vw, 176px);
  line-height: .78;
  letter-spacing: -.07em;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.testimonialsTitle span {
  color: var(--primary);
}

.testimonialsSubtitle {
  margin: 18px 0 0;
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 400;
  text-transform: uppercase;
}

.testimonialsSubtitle strong {
  font-weight: 700;
}

.testimonialCarouselShell {
  position: relative;
}

.testimonialTrack {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0;
}

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

.testimonialCard {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  height: 570px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  scroll-snap-align: start;
  background: var(--surface);
}

.testimonialCard--accent {
  border-color: var(--accent);
  background: var(--accent);
}

.testimonialImageWrap {
  width: 100%;
  height: 255px;
  flex: 0 0 255px;
  overflow: hidden;
  border-radius: 22px 22px 22px 22px;
  background: var(--surface-soft);
}

.testimonialImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 32%;
}

.testimonialBody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
}

.testimonialStars {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.testimonialRatingImage {
  display: block;
  width: 96px;
  height: auto;
  object-fit: contain;
}

.testimonialQuote {
  margin: 18px 0 20px;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text-primary);
}

.testimonialPerson {
  margin-top: auto;
}

.testimonialPerson h3 {
  margin: 0;
  font-size: 29px;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 500;
}

.testimonialPerson p {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.15;
  color: var(--text-primary);
}

.testimonialNav {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 8px 26px rgb(var(--dark-rgb) / .08);
  transition: transform .2s ease, background .2s ease;
}

.testimonialNav:hover {
  background: var(--accent);
  transform: translateY(-50%) scale(1.05);
}

.testimonialNav span {
  font-size: 30px;
  line-height: 1;
  transform: translateY(-1px);
}

.testimonialNav--left {
  left: -28px;
}

.testimonialNav--right {
  right: -28px;
}

@media (max-width: 1100px) {
  .testimonialsInner {
    width: min(100% - 48px, 1020px);
  }

  .testimonialsTitle {
    font-size: clamp(92px, 14vw, 142px);
  }

  .testimonialCard {
    flex-basis: calc((100% - 20px) / 2);
    height: 545px;
  }

  .testimonialTrack {
    gap: 20px;
  }

  .testimonialNav--left {
    left: -22px;
  }

  .testimonialNav--right {
    right: -22px;
  }
}

@media (max-width: 720px) {
  .testimonialsSection {
    padding: 42px 0 62px;
  }

  .testimonialsInner {
    width: min(100% - 28px, 560px);
  }

  .testimonialsHeadingBlock {
    margin-bottom: 30px;
  }

  .testimonialsTitle {
    font-size: clamp(64px, 20vw, 104px);
    line-height: .82;
    white-space: normal;
  }

  .testimonialsSubtitle {
    margin-top: 14px;
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.05;
  }

  .testimonialTrack {
    gap: 14px;
  }

  .testimonialCard {
    flex-basis: 100%;
    height: 535px;
    border-radius: 22px;
  }

  .testimonialImageWrap {
    height: 245px;
    flex-basis: 245px;
    border-radius: 20px;
  }

  .testimonialBody {
    padding: 18px 18px 17px;
  }

  .testimonialRatingImage {
    width: 90px;
  }

  .testimonialQuote {
    margin-top: 15px;
    font-size: 16px;
  }

  .testimonialPerson h3 {
    font-size: 27px;
  }

  .testimonialNav {
    width: 48px;
    height: 48px;
  }

  .testimonialNav span {
    font-size: 26px;
  }

  .testimonialNav--left {
    left: -10px;
  }

  .testimonialNav--right {
    right: -10px;
  }
}

@media (max-width: 420px) {
  .testimonialsInner {
    width: min(100% - 22px, 390px);
  }

  .testimonialsTitle {
    font-size: clamp(58px, 19vw, 78px);
  }

  .testimonialsSubtitle {
    font-size: clamp(19px, 5.7vw, 24px);
  }

  .testimonialCard {
    height: 510px;
  }

  .testimonialImageWrap {
    height: 225px;
    flex-basis: 225px;
  }

  .testimonialQuote {
    font-size: 15px;
  }

  .testimonialNav {
    width: 44px;
    height: 44px;
  }
}

/* =========================
   AI APPS / CASE STUDY SECTION
   ========================= */
.aiAppsSection {
  background: var(--surface-soft);
  color: var(--text-primary);
  padding: 34px 0 74px;
  overflow: hidden;
}

.aiAppsInner {
  width: min(1460px, calc(100% - 72px));
  margin: 0 auto;
}

.aiAppsHeadingBlock {
  margin-bottom: 34px;
}

.aiAppsTitle {
  margin: 0;
  font-size: clamp(110px, 10.3vw, 174px);
  line-height: .78;
  letter-spacing: -.068em;
  font-weight: 700;
  white-space: nowrap;
}

.aiAppsTitleBlack {
  color: var(--text-primary);
}

.aiAppsTitleAccent {
  color: var(--primary);
}

.aiAppsSubtitle {
  margin: 18px 0 0;
  font-size: clamp(27px, 2.45vw, 39px);
  line-height: 1;
  letter-spacing: -.036em;
  font-weight: 400;
  text-transform: uppercase;
}

.aiAppsCaseCard {
  border: 1.5px solid var(--border-strong);
  border-radius: 25px;
  padding: 42px 44px 32px;
  background: var(--surface);
}

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

.aiAppsIntro h3 {
  margin: 0;
  max-width: 690px;
  font-size: clamp(34px, 3.2vw, 50px);
  line-height: .98;
  letter-spacing: -.046em;
  font-weight: 700;
}

.aiAppsDelivered {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}

.aiAppsDelivered strong {
  font-weight: 700;
}

.aiAppsCaseBtn {
  flex: 0 0 auto;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 7px 9px 7px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 100%);
  color: var(--text-on-dark);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .22s ease, filter .22s ease;
}

.aiAppsCaseBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.aiAppsCaseBtnIcon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
}

.aiAppsContentGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  gap: 50px;
  align-items: end;
  margin-top: 30px;
}

.aiAppsProjectCol {
  min-width: 0;
}

.aiAppsResultList {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-secondary);
}

.aiAppsResultList li {
  position: relative;
  padding-left: 20px;
}

.aiAppsResultList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.aiAppsProjectImageWrap {
  position: relative;
  width: min(100%, 690px);
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  border-radius: 16px;
  background: var(--dark);
}

.aiAppsProjectImage {
  object-fit: cover;
  object-position: center;
}

.aiAppsTestimonialCard {
  min-height: 315px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 38px;
  border-radius: 24px;
  background: var(--surface);
}

.aiAppsTestimonialPill {
  align-self: flex-start;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}

.aiAppsTestimonialCard blockquote {
  margin: 28px 0 26px;
  max-width: 625px;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.48;
  letter-spacing: -.018em;
  font-style: normal;
  font-weight: 600;
  color: var(--text-primary);
}

.aiAppsTestimonialFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.aiAppsPerson {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aiAppsAvatarWrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--border);
}

.aiAppsAvatar {
  object-fit: cover;
  object-position: center 25%;
}

.aiAppsPersonDivider {
  width: 1px;
  height: 58px;
  flex: 0 0 1px;
  background: var(--dark);
}

.aiAppsPersonText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aiAppsPersonText strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.aiAppsPersonText span {
  font-size: 14px;
  line-height: 1.15;
  color: var(--text-secondary);
}

.aiAppsRating {
  flex: 0 0 auto;
  width: 108px;
  height: auto;
}

@media (max-width: 1120px) {
  .aiAppsInner {
    width: min(100% - 48px, 1040px);
  }

  .aiAppsTitle {
    font-size: clamp(92px, 14vw, 142px);
  }

  .aiAppsCaseCard {
    padding: 34px 34px 30px;
  }

  .aiAppsTopRow {
    gap: 28px;
  }

  .aiAppsCaseBtn {
    min-height: 54px;
    font-size: 14px;
  }

  .aiAppsCaseBtnIcon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .aiAppsContentGrid {
    gap: 30px;
  }

  .aiAppsTestimonialCard {
    min-height: 300px;
    padding: 28px 28px;
  }

  .aiAppsTestimonialFooter {
    align-items: flex-end;
  }
}

@media (max-width: 860px) {
  .aiAppsSection {
    padding: 42px 0 66px;
  }

  .aiAppsHeadingBlock {
    margin-bottom: 28px;
  }

  .aiAppsCaseCard {
    padding: 30px;
  }

  .aiAppsTopRow {
    flex-direction: column;
    gap: 24px;
  }

  .aiAppsCaseBtn {
    align-self: flex-start;
  }

  .aiAppsContentGrid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aiAppsProjectImageWrap {
    width: 100%;
  }

  .aiAppsTestimonialCard {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .aiAppsInner {
    width: min(100% - 28px, 560px);
  }

  .aiAppsTitle {
    font-size: clamp(64px, 20vw, 104px);
    line-height: .82;
    white-space: normal;
  }

  .aiAppsSubtitle {
    margin-top: 14px;
    font-size: clamp(21px, 6vw, 29px);
    line-height: 1.05;
  }

  .aiAppsCaseCard {
    border-radius: 22px;
    padding: 24px 20px 20px;
  }

  .aiAppsIntro h3 {
    font-size: clamp(31px, 9.2vw, 41px);
  }

  .aiAppsDelivered {
    margin-top: 16px;
    font-size: 13.5px;
  }

  .aiAppsCaseBtn {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    padding-left: 18px;
  }

  .aiAppsResultList {
    font-size: 13.5px;
  }

  .aiAppsProjectImageWrap {
    aspect-ratio: 16 / 10.2;
    border-radius: 14px;
  }

  .aiAppsTestimonialCard {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .aiAppsTestimonialPill {
    min-height: 42px;
    font-size: 15px;
  }

  .aiAppsTestimonialCard blockquote {
    margin: 22px 0 24px;
    font-size: 16px;
  }

  .aiAppsTestimonialFooter {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .aiAppsAvatarWrap {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .aiAppsPersonDivider {
    height: 52px;
  }

  .aiAppsPersonText strong {
    font-size: 18px;
  }

  .aiAppsPersonText span {
    font-size: 13px;
  }

  .aiAppsRating {
    width: 100px;
  }
}

@media (max-width: 420px) {
  .aiAppsInner {
    width: min(100% - 22px, 390px);
  }

  .aiAppsTitle {
    font-size: clamp(58px, 19vw, 78px);
  }

  .aiAppsSubtitle {
    font-size: clamp(19px, 5.6vw, 24px);
  }

  .aiAppsCaseCard {
    padding: 21px 16px 16px;
  }

  .aiAppsIntro h3 {
    font-size: clamp(28px, 9vw, 36px);
  }

  .aiAppsPerson {
    gap: 12px;
  }

  .aiAppsAvatarWrap {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
}

/* =========================
   INDUSTRY SECTION
   ========================= */
.industrySection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 24px 0 66px;
  overflow: hidden;
}

.industryInner {
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
}

.industryHeading {
  margin: 0;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(6.9rem, 12.3vw, 10.3rem);
  line-height: .86;
  letter-spacing: -.068em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-primary);
}

.industryTabsWrap {
  margin-top: 65px;
  position: relative;
  z-index: 2;
}

.industryTabs {
  width: calc(100% - 90px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  min-height: 58px;
}

.industryTab {
  position: relative;
  height: 58px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, border-radius .22s ease;
  white-space: nowrap;
}

.industryTab.active {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-radius: 20px 20px 0 0;
  font-weight: 700;
}

.industryTab.active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -20px;
  height: 22px;
  background: var(--accent-soft);
}

.industryPanel {
  position: relative;
  z-index: 1;
  min-height: 316px;
  margin-top: 0;
  padding: 28px 58px 28px 60px;
  border-radius: 22px;
  background: var(--accent-soft);
}

.industryContent {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .98fr);
  gap: 56px;
  align-items: center;
  min-height: 260px;
  animation: industryFade .26s ease both;
}

@keyframes industryFade {
  from { opacity: .25; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.industryCopy {
  padding-left: 4px;
}

.industryCopy h3 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(2.05rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.industryCopy p {
  max-width: 650px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.28;
  color: var(--text-secondary);
}

.industryCopy ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--text-secondary);
}

.industryCopy li {
  margin: 4px 0;
  padding-left: 2px;
  font-size: 14px;
  line-height: 1.22;
}

.industryImageWrap {
  position: relative;
  width: 100%;
  height: 264px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--accent-soft);
}

.industryImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industryArrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(var(--dark-rgb) / .08);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 2px 7px rgb(var(--dark-rgb) / .12);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .2s ease, box-shadow .2s ease;
}

.industryArrow:hover {
  box-shadow: 0 4px 12px rgb(var(--dark-rgb) / .17);
}

.industryArrow:active {
  transform: translateY(-50%) scale(.96);
}

.industryArrowLeft { left: -20px; }
.industryArrowRight { right: -20px; }

.industryMobileArrow {
  display: none;
}

@media (max-width: 1100px) {
  .industryInner { width: min(100% - 42px, 1320px); }
  .industryTabsWrap { margin-top: 52px; }
  .industryTabs { width: calc(100% - 48px); }
  .industryTab { font-size: 14px; padding-inline: 10px; }
  .industryPanel { padding: 28px 48px; }
  .industryContent {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
    gap: 36px;
  }
  .industryImageWrap { height: 245px; }
}

@media (max-width: 820px) {
  .industrySection { padding-top: 46px; }
  .industryInner { width: min(100% - 28px, 1320px); }
  .industryHeading {
    font-size: clamp(4.7rem, 18vw, 7.8rem);
    line-height: .9;
  }
  .industryTabsWrap {
    margin-top: 40px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .industryTabsWrap::-webkit-scrollbar { display: none; }
  .industryTabs {
    width: max-content;
    min-width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-inline: 16px;
  }
  .industryTab {
    min-width: 150px;
    padding-inline: 22px;
    font-size: 14px;
  }
  .industryPanel {
    min-height: auto;
    padding: 42px 46px 46px;
    border-radius: 20px;
  }
  .industryContent {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .industryCopy h3 { max-width: 100%; }
  .industryCopy p { max-width: 100%; }
  .industryImageWrap { height: clamp(220px, 50vw, 330px); }
  .industryArrowLeft { left: -14px; }
  .industryArrowRight { right: -14px; }
}

@media (max-width: 560px) {
  .industrySection { padding: 34px 0 48px; }
  .industryInner { width: min(100% - 20px, 1320px); }
  .industryHeading {
    font-size: clamp(4rem, 21vw, 6.2rem);
    letter-spacing: -.06em;
  }
  .industryTabsWrap { margin-top: 30px; }
  .industryTabs { padding-inline: 8px; min-height: 51px; }
  .industryTab {
    height: 51px;
    min-width: 128px;
    padding-inline: 16px;
    font-size: 12px;
  }
  .industryTab.active { border-radius: 17px 17px 0 0; }
  .industryPanel {
    padding: 36px 24px 28px;
    border-radius: 18px;
  }
  .industryCopy { padding-left: 0; }
  .industryCopy h3 {
    font-size: clamp(1.75rem, 9vw, 2.2rem);
    line-height: 1.04;
  }
  .industryCopy p,
  .industryCopy li { font-size: 13px; }
  .industryCopy ul { margin-top: 15px; }
  .industryImageWrap {
    height: 220px;
    border-radius: 16px;
  }
  .industryDesktopArrow {
    display: none;
  }
  .industryMobileArrow {
    display: grid;
    top: 50%;
    bottom: auto;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
  }
  .industryMobileArrowLeft { left: 10px; }
  .industryMobileArrowRight { right: 10px; }
  .industryMobileArrow:active { transform: translateY(-50%) scale(.96); }
}

/* =========================
   LATEST — AI & SOFTWARE ENGINEERING INSIGHTS
   ========================= */
.insightsSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 4px 0 26px;
  overflow: hidden;
}

.insightsInner {
  width: min(1220px, calc(100% - 116px));
  margin: 0 auto;
}

.insightsHeader {
  margin-bottom: 48px;
}

.insightsTitle {
  margin: 0;
  font-size: clamp(7.2rem, 11.45vw, 10rem);
  line-height: .69;
  letter-spacing: -.075em;
  font-weight: 700;
  text-transform: uppercase;
}

.insightsSubtitle {
  margin: 18px 0 0;
  font-size: clamp(1.48rem, 2.25vw, 2rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.insightsSubtitle strong {
  font-weight: 700;
}

.insightsLayout {
  display: grid;
  grid-template-columns: minmax(0, 2.48fr) minmax(285px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.insightsCarouselShell {
  position: relative;
  min-width: 0;
}

.insightsViewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
}

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

.insightsTrack {
  display: flex;
  gap: 22px;
}

.insightsCard {
  flex: 0 0 calc((100% - 22px) / 2);
  min-width: 0;
  background: var(--surface);
  scroll-snap-align: start;
}

.insightsImageWrap {
  height: 258px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
}

.insightsImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.insightsCardBody {
  padding: 35px 24px 0;
}

.insightsCategory {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 10px 5px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}

.insightsCard h3 {
  margin: 20px 0 26px;
  min-height: 69px;
  max-width: 360px;
  font-size: clamp(1.8rem, 2.35vw, 2.15rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.035em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insightsReadMore {
  min-height: 64px;
  width: fit-content;
  padding: 7px 9px 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: transform .2s ease, border-color .2s ease;
}

.insightsReadMore:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.insightsReadMoreIcon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-primary);
}

.insightsReadMoreIcon svg {
  width: 20px;
  height: 20px;
}

.insightsCtaPanel {
  position: relative;
  min-height: 522px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 17% 45%, rgb(var(--white-rgb) / .98) 0 18%, rgb(var(--white-rgb) / .74) 48%, transparent 69%),
    linear-gradient(102deg, var(--surface) 4%, var(--accent-soft) 53%, var(--secondary) 100%);
}

.insightsCtaPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgb(var(--dark-rgb) / .16) 0px,
    rgb(var(--dark-rgb) / .16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

.insightsArrow {
  position: absolute;
  z-index: 8;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 3px 13px rgb(var(--dark-rgb) / .14);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.insightsArrow:hover {
  transform: scale(1.045);
  box-shadow: 0 6px 18px rgb(var(--dark-rgb) / .16);
}

.insightsArrow svg {
  width: 31px;
  height: 31px;
}

.insightsArrowLeft {
  left: -17px;
  top: 99px;
}

.insightsArrowRight {
  right: -17px;
  top: 99px;
}

.insightsViewAll {
  position: absolute;
  z-index: 2;
  right: 69px;
  bottom: 9px;
  min-height: 55px;
  padding: 7px 9px 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  background: var(--primary);
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.insightsViewAllIcon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
}

.insightsViewAllIcon svg {
  width: 21px;
  height: 21px;
}

@media (max-width: 1180px) {
  .insightsInner {
    width: min(100% - 56px, 1220px);
  }

  .insightsHeader {
    margin-bottom: 38px;
  }

  .insightsLayout {
    grid-template-columns: minmax(0, 2.25fr) minmax(250px, .9fr);
    gap: 16px;
  }

  .insightsImageWrap {
    height: 225px;
  }

  .insightsCardBody {
    padding: 28px 16px 0;
  }

  .insightsCtaPanel {
    min-height: 473px;
  }

  .insightsArrowLeft,
  .insightsArrowRight {
    top: 84px;
  }

  .insightsViewAll {
    right: 24px;
  }
}

@media (max-width: 900px) {
  .insightsSection {
    padding-top: 18px;
    padding-bottom: 54px;
  }

  .insightsInner {
    width: min(100% - 36px, 820px);
  }

  .insightsTitle {
    font-size: clamp(6.1rem, 17vw, 8rem);
  }

  .insightsSubtitle {
    margin-top: 16px;
    font-size: clamp(1.15rem, 3.5vw, 1.65rem);
    line-height: 1.08;
  }

  .insightsLayout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .insightsImageWrap {
    height: 230px;
  }

  .insightsCtaPanel {
    min-height: 180px;
  }

  .insightsViewAll {
    right: 22px;
    bottom: 18px;
  }
}

@media (max-width: 640px) {
  .insightsSection {
    padding: 24px 0 46px;
  }

  .insightsInner {
    width: min(100% - 24px, 520px);
  }

  .insightsHeader {
    margin-bottom: 28px;
  }

  .insightsTitle {
    font-size: clamp(4.5rem, 23vw, 6.1rem);
    line-height: .75;
  }

  .insightsSubtitle {
    margin-top: 13px;
    font-size: 1rem;
    line-height: 1.16;
  }

  .insightsCard {
    flex-basis: 100%;
  }

  .insightsTrack {
    gap: 16px;
  }

  .insightsImageWrap {
    height: 220px;
    border-radius: 16px;
  }

  .insightsCardBody {
    padding: 24px 10px 0;
  }

  .insightsCard h3 {
    margin: 16px 0 20px;
    min-height: 0;
    font-size: 1.75rem;
  }

  .insightsReadMore {
    min-height: 56px;
    font-size: 14px;
  }

  .insightsArrow {
    width: 48px;
    height: 48px;
  }

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

  .insightsArrowLeft,
  .insightsArrowRight {
    top: 86px;
  }

  .insightsArrowLeft {
    left: -8px;
  }

  .insightsArrowRight {
    right: -8px;
  }

  .insightsCtaPanel {
    min-height: 154px;
    border-radius: 18px;
  }

  .insightsViewAll {
    right: 14px;
    bottom: 13px;
    min-height: 48px;
    font-size: 13px;
  }

  .insightsViewAllIcon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
}

/* =========================
   POST-LAUNCH SUPPORT
   ========================= */
.postLaunchSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 8px 0 18px;
}

.postLaunchInner {
  width: min(100% - 80px, 1240px);
  margin: 0 auto;
}

.postLaunchHeader {
  max-width: 940px;
}

.postLaunchTitle {
  margin: 0;
  font-size: clamp(7.5rem, 12.8vw, 10rem);
  line-height: .76;
  letter-spacing: -.075em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
}

.postLaunchTitle span {
  color: var(--primary);
}

.postLaunchKicker {
  margin: 28px 0 0;
  font-size: clamp(1.7rem, 2.45vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 400;
  text-transform: uppercase;
}

.postLaunchIntro {
  max-width: 840px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.postLaunchGrid {
  margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .9fr);
  align-items: end;
  gap: 70px;
}

.postLaunchItems {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 46px;
}

.postLaunchPill {
  width: fit-content;
  max-width: 100%;
  min-height: 53px;
  display: flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 22px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.postLaunchPill--strong {
  background: var(--accent);
  border: 1px solid var(--accent);
}

.postLaunchPill--soft {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
}

.postLaunchPill--outline {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

.postLaunchImageWrap {
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 540 / 348;
}

.postLaunchImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1080px) {
  .postLaunchInner {
    width: min(100% - 48px, 1000px);
  }

  .postLaunchGrid {
    margin-top: 62px;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .postLaunchItems {
    gap: 16px;
    padding-bottom: 10px;
  }

  .postLaunchPill {
    min-height: 50px;
    font-size: 14px;
    white-space: normal;
  }
}

@media (max-width: 780px) {
  .postLaunchSection {
    padding: 30px 0 40px;
  }

  .postLaunchInner {
    width: min(100% - 32px, 680px);
  }

  .postLaunchTitle {
    font-size: clamp(5.6rem, 21vw, 8rem);
  }

  .postLaunchKicker {
    margin-top: 22px;
    font-size: 1.45rem;
    line-height: 1.08;
  }

  .postLaunchIntro {
    font-size: 13px;
  }

  .postLaunchGrid {
    margin-top: 46px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .postLaunchItems {
    order: 2;
    padding-bottom: 0;
  }

  .postLaunchImageWrap {
    order: 1;
    border-radius: 18px;
  }

  .postLaunchPill {
    width: 100%;
    min-height: 52px;
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .postLaunchInner {
    width: min(100% - 22px, 460px);
  }

  .postLaunchTitle {
    font-size: clamp(4.55rem, 22vw, 6rem);
  }

  .postLaunchKicker {
    font-size: 1.15rem;
  }

  .postLaunchGrid {
    margin-top: 34px;
  }

  .postLaunchPill {
    padding: 11px 15px;
    font-size: 13px;
  }
}

/* =========================
   MODERNIZATION STRATEGY
   ========================= */
.modernizationSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 12px 0 82px;
}

.modernizationInner {
  width: min(100% - 74px, 1224px);
  margin: 0 auto;
}

.modernizationEyebrow {
  margin: 0;
  font-size: clamp(1.7rem, 2.45vw, 2rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 700;
  text-transform: uppercase;
}

.modernizationTitle {
  margin: 2px 0 0;
  font-size: clamp(7rem, 12.7vw, 10.2rem);
  line-height: .8;
  letter-spacing: -.075em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
}

.modernizationIntro {
  margin: 20px 0 0;
  max-width: 920px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}

.modernizationFlow {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 195px 38px 195px 38px 195px;
  grid-template-rows: auto 40px auto;
  align-items: center;
  justify-content: start;
  column-gap: 0;
  row-gap: 0;
}

.modernizationPhase {
  width: 195px;
  min-height: 104px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px 16px 16px;
  box-sizing: border-box;
}

.modernizationPhase strong {
  display: block;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
}

.modernizationPhase span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.15;
}

.modernizationPhase--pale {
  background: var(--surface);
}

.modernizationPhase--soft {
  background: var(--accent-soft);
}

.modernizationPhase--deep {
  background: var(--primary);
  color: var(--text-on-dark);
}

.modernizationPhase--bright {
  background: var(--accent);
}

.modernizationPhase--outline {
  background: var(--surface);
  border: 1.2px solid var(--border-strong);
}

.modernizationArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  color: var(--text-primary);
  transform: translateY(-1px);
}

.modernizationBreak {
  grid-column: 1 / -1;
  height: 40px;
}

.modernizationPhaseOne { grid-column: 1; grid-row: 1; }
.modernizationFlow > .modernizationArrow:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.modernizationPhaseTwo { grid-column: 3; grid-row: 1; }
.modernizationFlow > .modernizationArrow:nth-of-type(2) { grid-column: 4; grid-row: 1; }
.modernizationPhaseThree { grid-column: 5; grid-row: 1; }
.modernizationFlow > .modernizationBreak { grid-row: 2; }
.modernizationPhaseFour { grid-column: 1; grid-row: 3; }
.modernizationFlow > .modernizationArrow:nth-of-type(3) { grid-column: 2; grid-row: 3; }
.modernizationPhaseFive { grid-column: 3; grid-row: 3; }

.modernizationFlowMobile {
  display: none;
}

@media (max-width: 900px) {
  .modernizationInner {
    width: min(100% - 48px, 820px);
  }

  .modernizationFlow {
    grid-template-columns: 180px 34px 180px 34px 180px;
  }

  .modernizationPhase {
    width: 180px;
    min-height: 100px;
  }

  .modernizationPhase strong {
    font-size: 27px;
  }
}

@media (max-width: 720px) {
  .modernizationSection {
    padding: 26px 0 54px;
  }

  .modernizationInner {
    width: min(100% - 32px, 640px);
  }

  .modernizationEyebrow {
    font-size: 1.45rem;
  }

  .modernizationTitle {
    font-size: clamp(5.3rem, 20vw, 8rem);
  }

  .modernizationIntro {
    margin-top: 16px;
    font-size: 13px;
  }

  .modernizationFlow {
    display: none;
  }

  .modernizationFlowMobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 34px;
  }

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

  .modernizationFlowMobile .modernizationPhase {
    width: 100%;
    min-height: 96px;
  }

  .modernizationArrowMobile {
    width: 34px;
    height: 34px;
    font-size: 27px;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .modernizationInner {
    width: min(100% - 22px, 460px);
  }

  .modernizationEyebrow {
    font-size: 1.1rem;
  }

  .modernizationTitle {
    font-size: clamp(4.3rem, 21vw, 5.8rem);
  }

  .modernizationPhase strong {
    font-size: 26px;
  }

  .modernizationPhase span {
    font-size: 12px;
  }
}

/* WEB DESIGN CASE STUDIES */
.webCaseStudiesSection {
  padding: 34px 0 44px;
  background: var(--surface);
}

.webCaseStudiesInner {
  width: min(1240px, calc(100% - 92px));
  margin: 0 auto;
}

.webCaseStudiesHeader {
  margin-bottom: 28px;
}

.webCaseStudiesTitle {
  margin: 0;
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.87;
  font-weight: 700;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.webCaseStudiesBlack {
  color: var(--text-primary);
}

.webCaseStudiesAccent {
  color: var(--primary);
}

.webCaseStudiesSubtitle {
  margin: 10px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.05;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

.webCaseStudiesPanel {
  background: var(--accent);
  border-radius: 26px;
  padding: 46px 38px 30px;
}

.webCaseStudiesContent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 557px);
  align-items: center;
  gap: 34px;
}

.webCaseStudiesCopy {
  padding-right: 12px;
}

.webCaseStudiesCopy h3 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.2vw, 49px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.055em;
  color: var(--text-primary);
  text-transform: uppercase;
  max-width: 540px;
}

.webCaseStudiesDelivered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.2;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.webCaseStudiesDeliveredLabel {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgb(var(--dark-rgb) / 0.22);
  font-weight: 500;
}

.webCaseStudiesDeliveredText {
  font-weight: 500;
}

.webCaseStudiesResults {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 14px;
}

.webCaseStudiesResults li {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.1;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.webCaseStudiesImageWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 557 / 313;
  border-radius: 24px;
  overflow: hidden;
  background: rgb(var(--white-rgb) / 0.4);
}

.webCaseStudiesImage {
  object-fit: cover;
}

.webCaseStudiesDots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.webCaseStudiesDot {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  padding: 0;
  border: 1.4px solid rgb(var(--dark-rgb) / 0.55);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.webCaseStudiesDot.is-active {
  background: rgb(var(--white-rgb) / 0.36);
  border-color: rgb(var(--dark-rgb) / 0.65);
}

.webCaseStudiesDot:hover {
  transform: scale(1.05);
}

@media (max-width: 1080px) {
  .webCaseStudiesInner {
    width: min(1240px, calc(100% - 40px));
  }

  .webCaseStudiesContent {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .webCaseStudiesCopy {
    padding-right: 0;
  }

  .webCaseStudiesCopy h3 {
    max-width: none;
  }

  .webCaseStudiesImageWrap {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .webCaseStudiesSection {
    padding: 22px 0 34px;
  }

  .webCaseStudiesInner {
    width: calc(100% - 24px);
  }

  .webCaseStudiesSubtitle {
    margin-top: 8px;
    line-height: 1.1;
  }

  .webCaseStudiesPanel {
    padding: 26px 18px 22px;
    border-radius: 22px;
  }

  .webCaseStudiesContent {
    gap: 18px;
  }

  .webCaseStudiesCopy h3 {
    margin-bottom: 12px;
    line-height: 1.02;
  }

  .webCaseStudiesDelivered {
    margin-bottom: 18px;
  }

  .webCaseStudiesResults {
    gap: 10px;
  }

  .webCaseStudiesResults li {
    font-size: 17px;
    line-height: 1.15;
  }

  .webCaseStudiesDot {
    width: 13px;
    height: 13px;
  }
}

/* TOOLS SECTION */
.toolsSection {
  background: var(--surface);
  padding: 28px 0 54px;
}

.toolsInner {
  width: min(1260px, calc(100% - 72px));
  margin: 0 auto;
}

.toolsHeader {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 26px 22px;
}

.toolsTitle {
  margin: 0;
  font-size: clamp(70px, 12vw, 160px);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}

.toolsTitleAccent { color: var(--primary); }
.toolsTitleBlack { color: var(--text-primary); }

.toolsCopy {
  align-self: end;
  padding-bottom: 6px;
}

.toolsSubtitle {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

.toolsDescription {
  max-width: 430px;
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.32;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.toolsGrid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px 26px;
  align-items: start;
}

.toolItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 145px;
}

.toolMark {
  width: 118px;
  height: 92px;
  display: grid;
  place-items: center;
  color: #111;
}

.toolMark span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.toolLabel {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.toolMarkMongo span {
  font-size: 70px;
  color: #2f92d2;
  text-shadow: 18px 12px 0 #67b53c, -18px -14px 0 #67b53c;
}

.toolMarkPostgres span {
  font-size: 64px;
  color: #356a9d;
}

.toolMarkN8n span {
  font-size: 52px;
  color: #151515;
}

.toolMarkMeta span {
  font-size: 88px;
  color: #1671f1;
}

.toolMarkZapier span {
  font-size: 88px;
  color: #e16d3b;
}

.toolMarkLang span {
  width: 106px;
  height: 48px;
  border-radius: 999px;
  background: #173f40;
  color: white;
  font-size: 26px;
}

.toolMarkJs span {
  width: 108px;
  height: 108px;
  background: #f0dc1f;
  color: #ffffff;
  font-size: 64px;
  border-radius: 0;
}

.toolMarkCloud span {
  font-size: 82px;
  background: linear-gradient(90deg, #ef4433 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.toolMarkVitest {
  background: #eceef4;
  border-radius: 4px;
}

.toolMarkVitest span {
  font-size: 74px;
  color: #5c4aa7;
}

@media (max-width: 1100px) {
  .toolsInner {
    width: min(1260px, calc(100% - 40px));
  }

  .toolsHeader {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .toolsCopy {
    padding-bottom: 0;
  }

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

@media (max-width: 767px) {
  .toolsSection {
    padding: 20px 0 34px;
  }

  .toolsInner {
    width: calc(100% - 24px);
  }

  .toolsDescription {
    font-size: 15px;
    max-width: 330px;
  }

  .toolsGrid {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 10px;
  }

  .toolItem {
    min-height: 120px;
  }

  .toolMark {
    width: 100px;
    height: 78px;
  }

  .toolMarkJs span {
    width: 90px;
    height: 90px;
    font-size: 54px;
  }

  .toolLabel {
    font-size: 14px;
  }
}

/* TOOLS SECTION — reference-accurate asset pass */
.toolsSection {
  background: var(--surface);
  color: var(--text-primary);
  padding: 46px 0 62px;
  min-height: 655px;
}

.toolsInner {
  width: min(1230px, calc(100% - 72px));
  margin: 0 auto;
}

.toolsHeader {
  display: block;
}

.toolsTitle {
  display: flex;
  align-items: baseline;
  gap: 34px;
  margin: 0;
  font-size: clamp(84px, 10.65vw, 160px);
  line-height: 0.82;
  font-weight: 700;
  letter-spacing: -0.085em;
  text-transform: uppercase;
  white-space: nowrap;
}

.toolsTitleAccent {
  color: var(--primary);
}

.toolsTitleBlack {
  color: var(--text-primary);
}

.toolsIntro {
  margin-top: 8px;
}

.toolsSubtitle {
  margin: 0 0 6px 123px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.toolsDescription {
  margin: 0 0 0 248px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.toolsGrid {
  margin-top: 27px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 55px;
  row-gap: 55px;
  align-items: center;
  justify-items: center;
}

.toolsLogoSlot {
  width: 100%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolsLogo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.toolsLogoNeo4j { width: 112px; }
.toolsLogoPgvector { width: 107px; }
.toolsLogoPinecone { width: 104px; }
.toolsLogoFaiss { width: 108px; }
.toolsLogoClaude { width: 111px; }
.toolsLogoLanggraph { width: 112px; }
.toolsLogoLangchain { width: 112px; }
.toolsLogoJavascript { width: 108px; }
.toolsLogoCloud { width: 110px; }
.toolsLogoUnittest { width: 108px; }

@media (max-width: 1100px) {
  .toolsSection {
    min-height: auto;
    padding: 38px 0 52px;
  }

  .toolsInner {
    width: min(980px, calc(100% - 40px));
  }

  .toolsTitle {
    gap: 22px;
    font-size: clamp(72px, 11vw, 118px);
  }

  .toolsSubtitle {
    margin-left: 74px;
  }

  .toolsDescription {
    margin-left: 174px;
  }

  .toolsGrid {
    margin-top: 32px;
    column-gap: 28px;
    row-gap: 42px;
  }
}

@media (max-width: 760px) {
  .toolsSection {
    padding: 28px 0 38px;
  }

  .toolsInner {
    width: calc(100% - 24px);
  }

  .toolsTitle {
    gap: 12px;
    font-size: clamp(56px, 17.4vw, 92px);
    line-height: 0.88;
  }

  .toolsSubtitle,
  .toolsDescription {
    margin-left: 0;
  }

  .toolsSubtitle {
    margin-top: 12px;
    font-size: clamp(21px, 6.4vw, 28px);
  }

  .toolsDescription {
    max-width: 360px;
    margin-top: 8px;
    font-size: 14px;
  }

  .toolsDesktopBreak {
    display: none;
  }

  .toolsGrid {
    margin-top: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 28px;
  }

  .toolsLogoSlot {
    height: 104px;
  }
}

@media (max-width: 420px) {
  .toolsTitle {
    font-size: clamp(48px, 16.5vw, 68px);
  }

  .toolsGrid {
    row-gap: 22px;
  }

  .toolsLogoNeo4j,
  .toolsLogoPgvector,
  .toolsLogoPinecone,
  .toolsLogoFaiss,
  .toolsLogoClaude,
  .toolsLogoLanggraph,
  .toolsLogoLangchain,
  .toolsLogoJavascript,
  .toolsLogoCloud,
  .toolsLogoUnittest {
    width: 92px;
  }
}

/* AI-FIRST INDUSTRIES SECTION */
.aiFirstSection {
  background: var(--surface);
  padding: 18px 0 48px;
}

.aiFirstInner {
  width: min(1260px, calc(100% - 76px));
  margin: 0 auto;
}

.aiFirstHeader {
  margin-bottom: 34px;
}

.aiFirstTitle {
  margin: 0;
  font-size: clamp(72px, 12vw, 156px);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}

.aiFirstBlack {
  color: var(--text-primary);
}

.aiFirstAccent {
  color: var(--primary);
}

.aiFirstSubtitle {
  margin: 8px 0 0;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.02;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: -0.045em;
}

.aiFirstSubtitle strong {
  font-weight: 700;
}

.aiFirstDescription {
  margin: 14px 0 0;
  max-width: 900px;
  color: var(--text-primary);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.aiFirstGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 32px 24px;
  align-items: start;
}

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

.aiFirstIconCircle {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--text-primary);
}

.aiFirstIconCircle.is-accent {
  background: var(--accent-soft);
}

.aiFirstIconCircle svg {
  width: 44px;
  height: 44px;
}

.aiFirstTileLabel {
  margin-top: 12px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.aiFirstMoreBtn {
  grid-column: 7;
  align-self: center;
  justify-self: end;
  min-width: 158px;
  height: 56px;
  padding: 0 12px 0 24px;
  border-radius: 999px;
  background: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.aiFirstMoreBtnIcon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-primary);
  flex: 0 0 38px;
}

.aiFirstMoreBtnIcon svg {
  width: 20px;
  height: 20px;
}

.aiFirstFooterText {
  margin: 38px 0 0;
  color: var(--text-primary);
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

@media (max-width: 1180px) {
  .aiFirstInner {
    width: min(1260px, calc(100% - 40px));
  }

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

  .aiFirstMoreBtn {
    grid-column: auto / span 2;
    justify-self: center;
    margin-top: 6px;
  }
}

@media (max-width: 767px) {
  .aiFirstSection {
    padding: 14px 0 34px;
  }

  .aiFirstInner {
    width: calc(100% - 24px);
  }

  .aiFirstHeader {
    margin-bottom: 22px;
  }

  .aiFirstDescription {
    margin-top: 10px;
    line-height: 1.4;
  }

  .aiFirstGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 10px;
  }

  .aiFirstIconCircle {
    width: 74px;
    height: 74px;
  }

  .aiFirstIconCircle svg {
    width: 40px;
    height: 40px;
  }

  .aiFirstTileLabel {
    font-size: 13px;
  }

  .aiFirstMoreBtn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: 210px;
    margin: 2px auto 0;
  }

  .aiFirstFooterText {
    margin-top: 24px;
  }
}

/* AI-FIRST: supplied SVG asset sizing */
.aiFirstAssetIcon {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}

.aiFirstMoreBtnIcon img {
  width: 38px;
  height: 38px;
  display: block;
}

@media (max-width: 767px) {
  .aiFirstAssetIcon {
    width: 44px;
    height: 44px;
  }
}

/* BEFORE AFTER TRANSFORMATION SECTION */
.beforeAfterSection {
  background: var(--surface);
  padding: 24px 0 54px;
}

.beforeAfterInner {
  width: min(1260px, calc(100% - 70px));
  margin: 0 auto;
}

.beforeAfterEyebrowBlock {
  margin-bottom: 18px;
}

.beforeAfterEyebrow {
  color: var(--primary);
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.beforeAfterEyebrowText {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: clamp(10px, 1vw, 15px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.beforeAfterLayout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 22px;
  align-items: start;
}

.beforeAfterIntro {
  padding-top: 10px;
}

.beforeAfterTitle {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(36px, 4.8vw, 76px);
  line-height: 0.88;
  letter-spacing: -0.07em;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
}

.beforeAfterAccent {
  color: var(--primary);
}

.beforeAfterSubtag {
  margin: 4px 0 0;
  color: var(--primary);
  font-size: clamp(12px, 1.2vw, 18px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.beforeAfterTable {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1.3fr 1.1fr;
  gap: 0;
}

.beforeAfterCol {
  padding: 0 18px;
  border-left: 1px solid rgb(var(--dark-rgb) / .16);
}

.beforeAfterCol:first-child {
  border-left: 1px solid rgb(var(--dark-rgb) / .16);
}

.beforeAfterHead {
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.beforeAfterCell {
  min-height: 24px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.beforeAfterMetricCol .beforeAfterCell {
  color: var(--text-secondary);
}

.beforeAfterBenefitCol .beforeAfterCell {
  color: var(--primary);
}

.beforeAfterCtaCard {
  background: var(--surface);
  border-radius: 18px;
  padding: 18px 18px 18px;
}

.beforeAfterCtaCard h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(20px, 2vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 700;
  text-transform: uppercase;
}

.beforeAfterCtaCard p {
  margin: 10px 0 20px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.beforeAfterCtaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 200px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text-on-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.beforeAfterCtaBtnIcon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  flex: 0 0 32px;
}

.beforeAfterCtaBtnIcon svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1180px) {
  .beforeAfterInner {
    width: min(1260px, calc(100% - 40px));
  }

  .beforeAfterLayout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .beforeAfterIntro {
    padding-top: 0;
  }

  .beforeAfterTitle {
    max-width: 360px;
  }

  .beforeAfterTable {
    overflow-x: auto;
    grid-template-columns: 180px 220px 240px 220px;
    padding-bottom: 6px;
  }

  .beforeAfterCtaCard {
    max-width: 320px;
  }
}

@media (max-width: 767px) {
  .beforeAfterSection {
    padding: 18px 0 38px;
  }

  .beforeAfterInner {
    width: calc(100% - 24px);
  }

  .beforeAfterEyebrowBlock {
    margin-bottom: 12px;
  }

  .beforeAfterTable {
    grid-template-columns: 150px 190px 210px 180px;
  }

  .beforeAfterCol {
    padding: 0 12px;
  }

  .beforeAfterHead {
    min-height: 30px;
    font-size: 12px;
  }

  .beforeAfterCell {
    font-size: 10px;
  }

  .beforeAfterCtaCard {
    max-width: none;
  }

  .beforeAfterCtaBtn {
    width: 100%;
    min-width: 0;
  }
}

/* DEVELOPMENT PROCESS SECTION */
.developmentProcessSection {
  background: var(--surface);
  padding: 32px 0 42px;
}

.developmentProcessInner {
  width: min(1640px, calc(100% - 56px));
  margin: 0 auto;
  text-align: center;
}

.developmentProcessBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  height: 40px;
  margin-bottom: 18px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid rgb(var(--dark-rgb) / 0.35);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.developmentProcessTitle {
  margin: 0;
  font-size: clamp(52px, 7.2vw, 104px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.developmentProcessTitleBlack {
  color: var(--text-primary);
}

.developmentProcessTitleAccent {
  color: var(--primary);
}

.developmentProcessSubtitle {
  max-width: 940px;
  margin: 14px auto 32px;
  color: var(--text-secondary);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.03em;
}

.developmentProcessFlow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.developmentProcessFlowItem {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.developmentProcessCard {
  width: 184px;
  min-height: 238px;
  border: 2px solid rgb(var(--dark-rgb) / 0.5);
  border-radius: 22px;
  background: var(--surface);
  padding: 18px 16px 18px;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.developmentProcessNumber {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--secondary);
  border: 1.5px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.developmentProcessCard h3 {
  margin: 20px 0 10px;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.developmentProcessCard p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  max-width: 152px;
}

.developmentProcessCardAccent {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: auto;
}

.developmentProcessArrow {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}

.developmentProcessArrow img {
  width: 28px;
  height: 28px;
}

@media (max-width: 1540px) {
  .developmentProcessInner {
    width: min(1640px, calc(100% - 40px));
  }

  .developmentProcessFlow {
    gap: 10px;
    flex-wrap: wrap;
  }

  .developmentProcessFlowItem {
    flex: 0 0 auto;
  }

  .developmentProcessArrow {
    width: 28px;
    flex-basis: 28px;
  }
}

@media (max-width: 1100px) {
  .developmentProcessSection {
    padding: 30px 0 38px;
  }

  .developmentProcessFlow {
    justify-content: center;
    gap: 14px 12px;
  }

  .developmentProcessFlowItem {
    align-items: stretch;
  }

  .developmentProcessArrow {
    display: none;
  }
}

@media (max-width: 767px) {
  .developmentProcessSection {
    padding: 24px 0 30px;
  }

  .developmentProcessInner {
    width: calc(100% - 24px);
  }

  .developmentProcessBadge {
    min-width: 168px;
    height: 36px;
    margin-bottom: 14px;
    padding: 0 18px;
    font-size: 14px;
    letter-spacing: 0.18em;
  }

  .developmentProcessSubtitle {
    margin: 12px auto 22px;
    font-size: 17px;
  }

  .developmentProcessFlow {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .developmentProcessFlowItem {
    width: 100%;
    justify-content: center;
  }

  .developmentProcessCard {
    width: min(100%, 320px);
    min-height: 0;
    padding: 17px 16px 17px;
  }

  .developmentProcessNumber {
    width: 44px;
    height: 44px;
    font-size: 21px;
  }

  .developmentProcessCard h3 {
    margin: 18px 0 9px;
    font-size: 22px;
  }

  .developmentProcessCard p {
    font-size: 16px;
    max-width: none;
  }
}

/* CONTACT BUILD SECTION */
.contactBuildSection {
  background: var(--surface);
  padding: 54px 0 74px;
}

.contactBuildInner {
  width: min(1260px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: center;
  gap: 42px;
}

.contactBuildCopy {
  max-width: 610px;
}

.contactBuildEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.contactBuildEyebrowLine {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.contactBuildTitle {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.contactBuildDot {
  color: var(--primary);
}

.contactBuildText {
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: clamp(18px, 1.7vw, 20px);
  line-height: 1.48;
  letter-spacing: -0.025em;
}

.contactBuildVisual {
  position: relative;
  min-height: 280px;
}

.contactBuildHandText {
  position: absolute;
  top: 6px;
  right: 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-secondary);
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 0.98;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.04em;
  transform: rotate(-8deg);
  text-align: left;
}

.contactBuildArrowWrap {
  position: absolute;
  left: 22px;
  top: 52px;
  width: 69px;
  height: 102px;
}

.contactBuildArrowWrap img,
.contactBuildPlaneWrap img {
  width: 100%;
  height: auto;
  display: block;
}

.contactBuildPlaneWrap {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: min(238px, 100%);
}

@media (max-width: 980px) {
  .contactBuildInner {
    width: min(1260px, calc(100% - 40px));
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contactBuildCopy {
    max-width: 100%;
  }

  .contactBuildVisual {
    width: min(460px, 100%);
    min-height: 260px;
    justify-self: center;
  }

  .contactBuildHandText {
    right: 34px;
  }
}

@media (max-width: 767px) {
  .contactBuildSection {
    padding: 34px 0 42px;
  }

  .contactBuildInner {
    width: calc(100% - 24px);
    gap: 22px;
  }

  .contactBuildEyebrow {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 20px;
  }

  .contactBuildTitle {
    font-size: clamp(34px, 11vw, 52px);
  }

  .contactBuildText {
    margin-top: 18px;
    font-size: 16px;
  }

  .contactBuildVisual {
    min-height: 218px;
  }

  .contactBuildHandText {
    top: 0;
    right: 18px;
    gap: 7px;
    font-size: 18px;
  }

  .contactBuildArrowWrap {
    left: 6px;
    top: 40px;
    width: 50px;
    height: auto;
  }

  .contactBuildPlaneWrap {
    width: 178px;
    right: 0;
  }
}

/* FINAL CTA SECTION */
.finalCtaSection {
  background: var(--surface);
  padding: 0 0 56px;
}

.finalCtaInner {
  width: min(1260px, calc(100% - 64px));
  margin: 0 auto;
}

.finalCtaCard {
  min-height: 282px;
  border-radius: 24px;
  background: linear-gradient(90deg, var(--dark) 0%, var(--dark) 44%, var(--dark) 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  align-items: center;
  box-shadow: 0 10px 30px rgb(var(--dark-rgb) / 0.12);
}

.finalCtaContent {
  padding: 34px 38px 34px;
  position: relative;
  z-index: 2;
}

.finalCtaTitle {
  margin: 0;
  color: var(--text-on-dark);
  font-size: clamp(36px, 4vw, 62px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.finalCtaText {
  margin: 14px 0 24px;
  color: rgb(var(--white-rgb) / 0.82);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 420px;
}

.finalCtaButton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 156px;
  height: 54px;
  border-radius: 999px;
  padding: 0 16px 0 22px;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.finalCtaButtonIcon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.finalCtaButtonIcon svg {
  width: 18px;
  height: 18px;
}

.finalCtaVisual {
  position: relative;
  min-height: 282px;
  height: 100%;
}

.finalCtaVisualImage {
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.28));
}

@media (max-width: 1024px) {
  .finalCtaInner {
    width: min(1260px, calc(100% - 40px));
  }

  .finalCtaCard {
    grid-template-columns: 1fr 360px;
    min-height: 250px;
  }

  .finalCtaVisual {
    min-height: 250px;
  }
}

@media (max-width: 767px) {
  .finalCtaSection {
    padding-bottom: 40px;
  }

  .finalCtaInner {
    width: calc(100% - 24px);
  }

  .finalCtaCard {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .finalCtaContent {
    padding: 24px 20px 8px;
  }

  .finalCtaText {
    margin: 12px 0 18px;
    max-width: none;
  }

  .finalCtaButton {
    height: 50px;
    min-width: 145px;
    font-size: 16px;
  }

  .finalCtaVisual {
    min-height: 186px;
  }

  .finalCtaVisualImage {
    object-position: center bottom;
  }
}

/* CONTACT BUILD COMPACT CENTER ALIGNMENT */
.contactBuildSection {
  padding: 34px 0 44px;
}

.contactBuildInner {
  width: min(1080px, calc(100% - 48px));
  grid-template-columns: minmax(0, 590px) 390px;
  justify-content: center;
  gap: 18px;
}

.contactBuildCopy {
  max-width: 590px;
}

.contactBuildEyebrow {
  margin-bottom: 10px;
}

.contactBuildText {
  margin-top: 16px;
}

.contactBuildVisual {
  min-height: 238px;
}

.contactBuildHandText {
  top: 0;
  right: 34px;
  gap: 7px;
}

.contactBuildArrowWrap {
  left: 18px;
  top: 44px;
  width: 60px;
  height: 90px;
}

.contactBuildPlaneWrap {
  right: 0;
  bottom: 0;
  width: 214px;
}

@media (max-width: 980px) {
  .contactBuildSection {
    padding: 30px 0 38px;
  }

  .contactBuildInner {
    width: min(760px, calc(100% - 32px));
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contactBuildCopy {
    max-width: 680px;
    margin: 0 auto;
  }

  .contactBuildVisual {
    min-height: 218px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .contactBuildSection {
    padding: 26px 0 32px;
  }

  .contactBuildInner {
    width: calc(100% - 24px);
    gap: 4px;
  }

  .contactBuildEyebrow {
    margin-bottom: 8px;
  }

  .contactBuildText {
    margin-top: 14px;
  }

  .contactBuildVisual {
    min-height: 190px;
  }
}

/* FINAL PAGE TEXT COLOR NORMALIZATION */
:root {
  --page-text: var(--dark);
}

body {
  background: var(--surface);
  color: var(--page-text);
}

/* Keep the video hero readable on its dark moving background. */
.hero {
  color: var(--text-on-dark);
}

.hero .heroCopy {
  color: rgb(var(--white-rgb) / 0.78);
}

/* All light-content sections use a consistent black text system. */
.servicesSection,
.whoSection,
.costSection,
.howAiSection,
.testimonialsSection,
.aiAppsSection,
.industrySection,
.insightsSection,
.postLaunchSection,
.modernizationSection,
.webCaseStudiesSection,
.toolsSection,
.aiFirstSection,
.beforeAfterSection,
.developmentProcessSection,
.contactBuildSection {
  color: var(--page-text);
}

.servicesSection p,
.whoSection p,
.costSection p,
.howAiSection p,
.testimonialsSection p,
.aiAppsSection p,
.industrySection p,
.insightsSection p,
.postLaunchSection p,
.modernizationSection p,
.webCaseStudiesSection p,
.toolsSection p,
.aiFirstSection p,
.beforeAfterSection p,
.developmentProcessSection p,
.contactBuildSection p,
.servicesSection li,
.whoSection li,
.costSection li,
.howAiSection li,
.testimonialsSection li,
.aiAppsSection li,
.industrySection li,
.insightsSection li,
.postLaunchSection li,
.modernizationSection li,
.webCaseStudiesSection li,
.toolsSection li,
.aiFirstSection li,
.beforeAfterSection li,
.developmentProcessSection li,
.contactBuildSection li {
  color: var(--text-primary);
}

/* Preserve white text only where the background itself is dark/filled. */
.costCta,
.aiAppsCaseBtn,
.insightsViewAll,
.modernizationPhase--deep,
.aiFirstMoreBtn,
.beforeAfterCtaBtn {
  color: var(--text-on-dark);
}

/* Image-overlay copy stays white for contrast. */
.whoImageCaption {
  color: var(--text-on-dark);
}

/* Final CTA is intentionally a dark card. */
.finalCtaSection {
  color: var(--text-on-dark);
}

.finalCtaTitle {
  color: var(--text-on-dark);
}

.finalCtaText {
  color: rgb(var(--white-rgb) / 0.86);
}

/* COMPLETE PLUS JAKARTA SANS TYPOGRAPHY SYSTEM */
html,
body,
button,
input,
textarea,
select,
option,
table,
th,
td,
a,
p,
span,
label,
small,
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div,
nav,
header,
footer,
section,
article,
aside,
blockquote {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-synthesis: none;
}

*::before,
*::after,
::placeholder {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-synthesis: none;
}

html {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

body {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
  font-style: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

strong,
b {
  font-weight: 600;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: normal;
}

h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

h4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

h5 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

a {
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select,
option {
  font-style: normal;
}

/* Header */
.navLink {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.navLink:hover {
  font-weight: 500;
}

.navLink.active {
  font-weight: 600;
}

.brandText {
  font-weight: 600;
}

.talkBtn {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Hero */
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 900px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.hero h1 span,
.hero h1 strong {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

.heroCopy {
  max-width: 650px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.01em;
}

.primaryBtn,
.secondaryBtn {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.stat strong {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.stat small {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.005em;
}

/* Shared section headings */
.servicesTitle,
.whoTitle,
.howAiTitle,
.testimonialsTitle,
.aiAppsTitle,
.industryHeading,
.insightsTitle,
.postLaunchTitle,
.modernizationTitle,
.webCaseStudiesTitle,
.toolsTitle,
.aiFirstTitle,
.beforeAfterTitle,
.developmentProcessTitle {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.servicesTitle *,
.whoTitle *,
.howAiTitle *,
.testimonialsTitle *,
.aiAppsTitle *,
.webCaseStudiesTitle *,
.toolsTitle *,
.aiFirstTitle *,
.beforeAfterTitle *,
.developmentProcessTitle * {
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Section eyebrows / overlines */
.servicesKicker,
.servicesKicker strong,
.whoKicker,
.whoKicker strong,
.costEyebrow,
.modernizationEyebrow,
.beforeAfterEyebrow,
.beforeAfterEyebrowText,
.beforeAfterSubtag,
.developmentProcessBadge,
.contactBuildEyebrow {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Section descriptions */
.servicesLead,
.developmentProcessSubtitle,
.aiFirstDescription,
.postLaunchIntro {
  max-width: 680px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.01em;
}

/* Standard paragraphs in sections */
.whoCopy p,
.costCard p,
.industryCopy p,
.toolsDescription,
.beforeAfterCtaCard p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.005em;
}

/* Buttons and arrow links */
.servicesCta,
.whoCta,
.costCta,
.aiAppsCaseBtn,
.insightsViewAll,
.aiFirstMoreBtn,
.beforeAfterCtaBtn,
.finalCtaButton {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.insightsReadMore {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.005em;
}

/* Service cards */
.serviceCardBody h3 {
  font-size: 23px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.serviceCardBody p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.005em;
}

/* Who we are */
.whoTitle {
  font-size: 46px;
}

/* Cost / connected card */
.costHeadline {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.costHeadline span,
.costHeadline strong {
  font-weight: 700;
}

.costCard h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -0.02em;
}

/* How AI */
.howAiSubtitle,
.testimonialsSubtitle,
.aiAppsSubtitle,
.insightsSubtitle,
.postLaunchKicker,
.webCaseStudiesSubtitle,
.toolsSubtitle,
.aiFirstSubtitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.howAiSubtitle strong,
.testimonialsSubtitle strong,
.insightsSubtitle strong,
.aiFirstSubtitle strong {
  font-weight: 600;
}

.howAiPanel strong {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.howAiPanel span {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.aiTimeline li {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.005em;
}

/* Testimonials */
.testimonialQuote,
.aiAppsTestimonialCard blockquote {
  font-size: 22px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.015em;
}

.testimonialPerson h3,
.aiAppsPersonText strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.005em;
}

.testimonialPerson p,
.aiAppsPersonText span {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

/* AI Apps case study */
.aiAppsIntro h3,
.webCaseStudiesCopy h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.03em;
}

.aiAppsDelivered,
.webCaseStudiesDelivered {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.aiAppsDelivered strong,
.webCaseStudiesDeliveredLabel {
  font-weight: 600;
}

.aiAppsResultList li,
.webCaseStudiesResults li {
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: -0.005em;
}

.aiAppsTestimonialPill,
.insightsCategory {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Industry */
.industryTab {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
}

.industryTab.active {
  font-weight: 600;
}

.industryCopy h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.industryCopy li {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.005em;
}

/* Blog / insights */
.insightsCardBody h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.02em;
}

/* Post-launch */
.postLaunchPill {
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: -0.005em;
}

/* Modernization phases */
.modernizationPhase strong {
  font-size: 24px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: -0.02em;
}

.modernizationPhase span {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.005em;
}

.modernizationIntro {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.005em;
}

/* Tools */
.toolsSubtitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* AI-first industries */
.aiFirstTileLabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.005em;
}

.aiFirstFooterText {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

/* Before / after table */
.beforeAfterHead {
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.beforeAfterCell {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

.beforeAfterCtaCard h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.025em;
}

/* Development process cards */
.developmentProcessCard h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -0.02em;
}

.developmentProcessCard p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.developmentProcessNumber {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.04em;
}

/* CTA sections */
.contactBuildTitle,
.finalCtaTitle {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.contactBuildText,
.finalCtaText {
  max-width: 620px;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.contactBuildHandText {
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-style: normal;
}

/* Generic dropdowns / mega menus / generated menus */
.dropdown a,
.dropdown-menu a,
.mega-menu a,
[role="menu"] a,
[role="menuitem"] {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
}

.dropdown a:hover,
.dropdown-menu a:hover,
.mega-menu a:hover,
[role="menuitem"][aria-current="page"] {
  font-weight: 600;
}

.mega-menu h2,
.mega-menu .mega-menu-main-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.025em;
}

.mega-menu h3,
.mega-menu .mega-menu-column-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
}

.mega-menu p,
.mega-menu .mega-menu-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.005em;
}

.mega-menu .tag,
.mega-menu .badge {
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Generic forms */
form h2,
.form-section-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.03em;
}

form label,
.form-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.005em;
}

input,
textarea,
select,
option {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.005em;
}

input::placeholder,
textarea::placeholder {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.005em;
  opacity: 0.6;
}

.form-error,
[role="alert"].error {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.form-success,
[role="status"].success {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* Generic tables */
table caption,
.table-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.025em;
}

th {
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

td {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

/* Generic badges / tags / breadcrumbs / accordions */
.badge,
[data-badge] {
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag,
[data-tag] {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.breadcrumb,
.breadcrumb a,
[aria-label="breadcrumb"] a,
[aria-label="breadcrumb"] span {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

[aria-label="breadcrumb"] [aria-current="page"] {
  font-weight: 600;
}

.accordion button,
.accordion-question,
[aria-expanded][aria-controls] {
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.015em;
}

.accordion-answer {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.005em;
}

/* Generic modal / tooltip / pagination */
[role="dialog"] h2,
.modal-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.025em;
}

[role="dialog"] p,
.modal-description {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.005em;
}

[role="tooltip"],
.tooltip {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0;
}

.pagination,
.pagination a,
.pagination button {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.pagination .active,
.pagination [aria-current="page"] {
  font-weight: 600;
}

/* Generic footer */
footer h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -0.02em;
}

footer h3,
.footer-column-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.005em;
}

footer a {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

footer a:hover {
  font-weight: 500;
}

footer p,
.footer-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
}

.footer-contact {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.005em;
}

.footer-copyright,
.footer-legal,
.footer-legal a {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}

.footer-legal a {
  font-weight: 500;
}

/* Responsive typography */
@media (max-width: 1200px) {
  .hero h1 {
    font-size: 64px;
    line-height: 1.07;
    letter-spacing: -0.04em;
  }
}

@media (max-width: 1024px) {
  h1 {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  h2,
  .servicesTitle,
  .whoTitle,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .hero h1 {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .heroCopy {
    max-width: 580px;
    font-size: 17px;
    line-height: 28px;
  }

  .navLink {
    font-size: 14px;
  }

  .servicesLead,
  .developmentProcessSubtitle,
  .aiFirstDescription,
  .postLaunchIntro {
    font-size: 17px;
    line-height: 28px;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  h2,
  .servicesTitle,
  .whoTitle,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: -0.025em;
  }

  h3,
  .industryCopy h3 {
    font-size: 25px;
    line-height: 1.28;
    letter-spacing: -0.02em;
  }

  h4 {
    font-size: 21px;
    line-height: 1.32;
  }

  h5 {
    font-size: 18px;
  }

  .eyebrow {
    font-size: 12px;
    line-height: 18px;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .heroCopy {
    max-width: 100%;
    font-size: 16px;
    line-height: 26px;
  }

  .primaryBtn,
  .secondaryBtn,
  .servicesCta,
  .whoCta,
  .costCta,
  .aiAppsCaseBtn,
  .insightsViewAll,
  .aiFirstMoreBtn,
  .beforeAfterCtaBtn,
  .finalCtaButton {
    font-size: 14px;
    line-height: 20px;
  }

  .servicesLead,
  .developmentProcessSubtitle,
  .aiFirstDescription,
  .postLaunchIntro {
    max-width: 100%;
    font-size: 16px;
    line-height: 26px;
  }

  .serviceCardBody h3 {
    font-size: 20px;
    line-height: 27px;
  }

  .serviceCardBody p,
  .developmentProcessCard p,
  .insightsCardBody p {
    font-size: 14px;
    line-height: 23px;
  }

  .testimonialQuote,
  .aiAppsTestimonialCard blockquote {
    font-size: 18px;
    line-height: 29px;
  }

  .aiAppsIntro h3,
  .webCaseStudiesCopy h3 {
    font-size: 24px;
    line-height: 31px;
  }

  .insightsCardBody h3 {
    font-size: 20px;
    line-height: 27px;
  }

  .modernizationPhase strong {
    font-size: 21px;
    line-height: 28px;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  .contactBuildText,
  .finalCtaText {
    font-size: 15px;
    line-height: 25px;
  }

  form h2,
  .form-section-heading {
    font-size: 25px;
    line-height: 32px;
  }

  .accordion button,
  .accordion-question,
  [aria-expanded][aria-controls] {
    font-size: 17px;
    line-height: 25px;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
}

/* HERO HEADING — slightly stronger visual presence, same Plus Jakarta Sans system */
.hero h1 {
  max-width: 940px;
  font-size: 76px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.hero h1 span,
.hero h1 strong {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

@media (max-width: 1200px) {
  .hero h1 {
    font-size: 66px;
    line-height: 1.04;
    letter-spacing: -0.045em;
  }
}

@media (max-width: 1024px) {
  .hero h1 {
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -0.038em;
  }
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.032em;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.028em;
  }
}

/* =========================================================
   DISPLAY / HIGHLIGHT TYPOGRAPHY
   Keeps the Plus Jakarta Sans system, but restores stronger
   visual hierarchy for hero-like and CTA/highlight sections.
   Body, cards, nav, forms and standard text remain unchanged.
   ========================================================= */

/* Primary section showcases */
.servicesTitle {
  font-size: clamp(54px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.whoTitle {
  font-size: clamp(50px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* Hero-like display statements */
.costHeadline {
  font-size: clamp(76px, 7.2vw, 112px);
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.howAiTitle {
  font-size: clamp(104px, 12vw, 176px);
  line-height: 0.78;
  letter-spacing: -0.065em;
}

.testimonialsTitle {
  font-size: clamp(92px, 10vw, 152px);
  line-height: 0.82;
  letter-spacing: -0.06em;
}

.aiAppsTitle {
  font-size: clamp(92px, 9.8vw, 150px);
  line-height: 0.82;
  letter-spacing: -0.06em;
}

.industryHeading {
  font-size: clamp(92px, 10.8vw, 156px);
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.insightsTitle {
  font-size: clamp(92px, 10.2vw, 148px);
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.postLaunchTitle {
  font-size: clamp(96px, 10.5vw, 152px);
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.modernizationTitle {
  font-size: clamp(96px, 11vw, 158px);
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.webCaseStudiesTitle {
  font-size: clamp(88px, 10vw, 146px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}

.toolsTitle {
  font-size: clamp(88px, 10.2vw, 150px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}

.aiFirstTitle {
  font-size: clamp(88px, 10vw, 146px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}

/* Strong but not oversized content sections */
.beforeAfterTitle {
  font-size: clamp(50px, 5.4vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.developmentProcessTitle {
  font-size: clamp(56px, 6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

/* CTA / conversion sections */
.contactBuildTitle {
  font-size: clamp(52px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.finalCtaTitle {
  font-size: clamp(44px, 4.5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

/* Support lines under large display headings */
.howAiSubtitle,
.testimonialsSubtitle,
.aiAppsSubtitle,
.insightsSubtitle,
.postLaunchKicker,
.webCaseStudiesSubtitle,
.toolsSubtitle,
.aiFirstSubtitle {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.12;
}

@media (max-width: 1024px) {
  .servicesTitle,
  .whoTitle {
    font-size: clamp(42px, 6vw, 54px);
  }

  .costHeadline {
    font-size: clamp(64px, 8vw, 84px);
  }

  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: clamp(68px, 10vw, 104px);
  }

  .beforeAfterTitle {
    font-size: clamp(44px, 6vw, 62px);
  }

  .developmentProcessTitle {
    font-size: clamp(48px, 6.5vw, 68px);
  }

  .contactBuildTitle {
    font-size: clamp(44px, 6vw, 58px);
  }

  .finalCtaTitle {
    font-size: clamp(38px, 5vw, 50px);
  }
}

@media (max-width: 767px) {
  .servicesTitle,
  .whoTitle {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.08;
  }

  .costHeadline {
    font-size: clamp(54px, 16vw, 72px);
    line-height: 0.88;
  }

  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: clamp(50px, 15vw, 72px);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  .beforeAfterTitle {
    font-size: clamp(38px, 11vw, 48px);
  }

  .developmentProcessTitle {
    font-size: clamp(38px, 11vw, 50px);
    line-height: 1;
  }

  .contactBuildTitle {
    font-size: clamp(38px, 11vw, 50px);
    line-height: 1.04;
  }

  .finalCtaTitle {
    font-size: clamp(34px, 9vw, 42px);
  }

  .howAiSubtitle,
  .testimonialsSubtitle,
  .aiAppsSubtitle,
  .insightsSubtitle,
  .postLaunchKicker,
  .webCaseStudiesSubtitle,
  .toolsSubtitle,
  .aiFirstSubtitle {
    font-size: clamp(18px, 5.5vw, 24px);
    line-height: 1.18;
  }
}

/* =========================================================
   FINAL SECTION HEADING SCALE
   Regular sections use the website H2 scale.
   Visual showcase sections are larger, but no longer oversized.
   ========================================================= */

/* Regular section headings */
.servicesTitle,
.whoTitle,
.beforeAfterTitle,
.developmentProcessTitle {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* Large visual/showcase section headings */
.costHeadline,
.howAiTitle,
.testimonialsTitle,
.aiAppsTitle,
.industryHeading,
.insightsTitle,
.postLaunchTitle,
.modernizationTitle,
.webCaseStudiesTitle,
.toolsTitle,
.aiFirstTitle {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* CTA headings */
.contactBuildTitle,
.finalCtaTitle {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

/* Supporting lines beneath large section titles */
.howAiSubtitle,
.testimonialsSubtitle,
.aiAppsSubtitle,
.insightsSubtitle,
.postLaunchKicker,
.webCaseStudiesSubtitle,
.toolsSubtitle,
.aiFirstSubtitle {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 38px;
    line-height: 1.16;
    letter-spacing: -0.03em;
  }

  .howAiSubtitle,
  .testimonialsSubtitle,
  .aiAppsSubtitle,
  .insightsSubtitle,
  .postLaunchKicker,
  .webCaseStudiesSubtitle,
  .toolsSubtitle,
  .aiFirstSubtitle {
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: -0.025em;
  }

  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  .howAiSubtitle,
  .testimonialsSubtitle,
  .aiAppsSubtitle,
  .insightsSubtitle,
  .postLaunchKicker,
  .webCaseStudiesSubtitle,
  .toolsSubtitle,
  .aiFirstSubtitle {
    font-size: 17px;
    line-height: 1.35;
  }
}

/* =========================================================
   FINAL MAIN SECTION HEADING SIZES ONLY
   Only main section headings are changed here.
   Body text, subtitles, cards, buttons, nav and spacing stay unchanged.
   ========================================================= */

/* Standard section headings */
.servicesTitle,
.whoTitle,
.beforeAfterTitle,
.developmentProcessTitle {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

/* Large showcase / highlight headings */
.costHeadline,
.howAiTitle,
.testimonialsTitle,
.aiAppsTitle,
.industryHeading,
.insightsTitle,
.postLaunchTitle,
.modernizationTitle,
.webCaseStudiesTitle,
.toolsTitle,
.aiFirstTitle {
  font-size: 84px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* CTA section main headings */
.contactBuildTitle,
.finalCtaTitle {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

@media (max-width: 1024px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 44px;
    line-height: 1.12;
  }

  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 64px;
    line-height: 1.02;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 40px;
    line-height: 1.12;
  }
}

@media (max-width: 767px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle {
    font-size: 34px;
    line-height: 1.16;
  }

  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 46px;
    line-height: 1.06;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 32px;
    line-height: 1.16;
  }
}

/* =========================================================
   PROMPT-COMPLIANT SECTION HEADING SCALE
   Follows the user's supplied Plus Jakarta Sans typography system.
   Section H2: 46px desktop / 38px tablet / 30px mobile.
   CTA heading: 48px desktop / 38px tablet / 30px mobile.
   ========================================================= */

/* All major / showcase / standard section headings use H2 scale */
.servicesTitle,
.whoTitle,
.beforeAfterTitle,
.developmentProcessTitle,
.costHeadline,
.howAiTitle,
.testimonialsTitle,
.aiAppsTitle,
.industryHeading,
.insightsTitle,
.postLaunchTitle,
.modernizationTitle,
.webCaseStudiesTitle,
.toolsTitle,
.aiFirstTitle {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* CTA section heading scale from the supplied typography system */
.contactBuildTitle,
.finalCtaTitle {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

@media (max-width: 1024px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle,
  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 38px;
    line-height: 1.14;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 767px) {
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle,
  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: -0.025em;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
}

/* =========================================================
   FINAL HEADING TYPOGRAPHY HIERARCHY
   Source: supplied Plus Jakarta Sans typography specification.
   This block only standardizes heading hierarchy/formatting.
   ========================================================= */

/* Base heading rules */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-style: normal;
  text-transform: none;
  text-wrap: balance;
  margin-top: 0;
}

/* Main page heading / H1 */
h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

/* Main section heading / H2 */
h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

/* Section subheading / H3 */
h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

/* Supporting heading / H4 */
h4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

h5 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* Hero main display heading */
.hero h1 {
  max-width: 900px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
}

.hero h1 span,
.hero h1 strong {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Every main content section title uses the H2 system */
.servicesTitle,
.whoTitle,
.beforeAfterTitle,
.developmentProcessTitle,
.costHeadline,
.howAiTitle,
.testimonialsTitle,
.aiAppsTitle,
.industryHeading,
.insightsTitle,
.postLaunchTitle,
.modernizationTitle,
.webCaseStudiesTitle,
.toolsTitle,
.aiFirstTitle {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

/* CTA display headings use the CTA heading scale from the brief */
.contactBuildTitle,
.finalCtaTitle {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

/* Section overlines / eyebrow headings */
.servicesKicker,
.whoKicker,
.postLaunchKicker,
.contactBuildEyebrow,
.developmentProcessBadge,
.beforeAfterEyebrow {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.08em;
}

/* Section supporting headline lines */
.howAiSubtitle,
.testimonialsSubtitle,
.aiAppsSubtitle,
.insightsSubtitle,
.webCaseStudiesSubtitle,
.toolsSubtitle,
.aiFirstSubtitle,
.developmentProcessSubtitle {
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 1200px) {
  .hero h1 {
    font-size: 64px;
    line-height: 1.07;
    letter-spacing: -0.04em;
  }
}

@media (max-width: 1024px) {
  h1 {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: 20px;
  }

  h2,
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle,
  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  h3 {
    font-size: 28px;
  }

  .hero h1 {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: 20px;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
  }

  h2,
  .servicesTitle,
  .whoTitle,
  .beforeAfterTitle,
  .developmentProcessTitle,
  .costHeadline,
  .howAiTitle,
  .testimonialsTitle,
  .aiAppsTitle,
  .industryHeading,
  .insightsTitle,
  .postLaunchTitle,
  .modernizationTitle,
  .webCaseStudiesTitle,
  .toolsTitle,
  .aiFirstTitle {
    font-size: 30px;
    line-height: 1.22;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
  }

  h3 {
    font-size: 25px;
    line-height: 1.28;
    letter-spacing: -0.02em;
  }

  h4 {
    font-size: 21px;
    line-height: 1.32;
  }

  h5 {
    font-size: 18px;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
  }

  .contactBuildTitle,
  .finalCtaTitle {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
  }

  .servicesKicker,
  .whoKicker,
  .postLaunchKicker,
  .contactBuildEyebrow,
  .developmentProcessBadge,
  .beforeAfterEyebrow {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.07em;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
}

/* CONSISTENT HOME SECTION SPACING AFTER HERO */
.homeSections {
  background: var(--surface);
  padding-top: 30px;
  padding-bottom: 8px;
}

.homeSections > section {
  margin-top: 38px;
}

.homeSections > section:first-child {
  margin-top: 0;
}

/* Keep visual sections separated without creating oversized empty areas. */
.homeSections > .finalCtaSection {
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .homeSections {
    padding-top: 24px;
  }

  .homeSections > section {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .homeSections {
    padding-top: 18px;
  }

  .homeSections > section {
    margin-top: 22px;
  }

  .homeSections > .finalCtaSection {
    margin-top: 20px;
  }
}


/* =========================================================
   ABOUT / WHO WE ARE — compact connected treatment
   Hero -> About -> Services. The secondary image and right
   content card now share one continuous bordered shell, like
   the connected Cost / Delivery section.
   ========================================================= */
.whoSection {
  padding-top: 40px;
  padding-bottom: 74px;
}

.whoInner {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.93fr);
  gap: 18px;
  align-items: stretch;
}

.whoImageMain {
  min-height: 475px;
  border-radius: 28px;
}

.whoConnectedGroup {
  min-width: 0;
  min-height: 475px;
  display: grid;
  grid-template-columns: minmax(205px, .51fr) minmax(0, 1.42fr);
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: 28px;
  background: var(--surface);
}

.whoConnectedGroup .whoImage,
.whoConnectedGroup .whoCard {
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.whoConnectedGroup .whoImageTall {
  border: 0;
}

.whoConnectedGroup .whoCard {
  border: 0;
  padding: 32px 38px 28px;
}

.whoConnectedGroup .whoTitle {
  margin-top: 26px;
}

.whoConnectedGroup .whoCopy {
  margin-top: 22px;
}

.whoConnectedGroup .whoCopy p + p {
  margin-top: 18px;
}

.whoConnectedGroup .whoCta {
  min-height: 58px;
  margin-top: 20px;
}

@media (max-width: 1450px) {
  .whoSection {
    padding-top: 36px;
    padding-bottom: 66px;
  }

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

  .whoImageMain,
  .whoConnectedGroup {
    min-height: 445px;
  }

  .whoConnectedGroup {
    grid-template-columns: minmax(185px, .48fr) minmax(0, 1.34fr);
  }

  .whoConnectedGroup .whoCard {
    padding: 28px 32px 25px;
  }

  .whoConnectedGroup .whoTitle {
    margin-top: 22px;
  }

  .whoConnectedGroup .whoCopy {
    margin-top: 18px;
  }

  .whoConnectedGroup .whoCta {
    min-height: 56px;
    margin-top: 17px;
  }
}

@media (max-width: 1080px) {
  .whoSection {
    padding-top: 34px;
    padding-bottom: 58px;
  }

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

  .whoImageMain {
    min-height: 390px;
  }

  .whoConnectedGroup {
    min-height: 420px;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  }

  .whoConnectedGroup .whoCard {
    grid-column: auto;
    padding: 32px;
  }
}

@media (max-width: 680px) {
  .whoSection {
    padding-top: 26px;
    padding-bottom: 46px;
  }

  .whoImageMain {
    min-height: 0;
    height: 330px;
  }

  .whoConnectedGroup {
    min-height: 0;
    grid-template-columns: 1fr;
    border-width: 1.5px;
    border-radius: 23px;
  }

  .whoConnectedGroup .whoImageTall {
    height: 245px;
  }

  .whoConnectedGroup .whoCard {
    height: auto;
    padding: 28px 24px 25px;
  }

  .whoConnectedGroup .whoTitle {
    margin-top: 22px;
  }

  .whoConnectedGroup .whoCopy {
    margin-top: 20px;
  }

  .whoConnectedGroup .whoCopy p + p {
    margin-top: 16px;
  }

  .whoConnectedGroup .whoCta {
    min-height: 56px;
    margin-top: 20px;
  }
}

/* =========================================================
   PROBLEM TO PRODUCT — reference-matched process showcase
   ========================================================= */
.problemProductSection {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(100% - 64px, 1560px);
  min-height: 520px;
  margin-inline: auto;
  padding: 56px 48px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(400px, 0.92fr) minmax(680px, 760px);
  align-items: center;
  gap: clamp(48px, 5.4vw, 102px);
  border-radius: 66px;
  background: var(--dark);
  color: var(--text-on-dark);
}

.problemProductIntro,
.problemProductGrid {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.problemProductIntro {
  align-self: center;
  padding-left: 0;
  max-width: 650px;
}

.problemProductEyebrow {
  margin: 0 0 29px;
  color: var(--text-on-dark) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.problemProductTitle {
  margin: 0;
  max-width: 650px;
  color: var(--text-on-dark) !important;
  font-size: clamp(48px, 3.25vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 1.055 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase;
}

.problemProductText {
  max-width: 620px;
  margin: 23px 0 0;
  color: rgb(var(--white-rgb) / 0.98) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: -0.018em !important;
}

.problemProductCta {
  width: fit-content;
  min-height: 66px;
  margin-top: 32px;
  padding: 8px 10px 8px 28px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary) !important;
  text-decoration: none;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.problemProductCta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgb(var(--dark-rgb) / 0.14);
}

.problemProductCtaIcon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.problemProductGrid {
  width: 100%;
  max-width: 760px;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.problemProductCard {
  box-sizing: border-box;
  min-width: 0;
  min-height: 178px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 26px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: none;
}

.problemProductNumber {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.problemProductIcon {
  width: 46px;
  height: 46px;
  margin-top: 24px;
  display: block;
  color: var(--text-primary);
}

.problemProductIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.problemProductCard h3 {
  margin: auto 0 0;
  color: var(--text-primary) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

.problemProductDecor {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
}

.problemProductDecorOne {
  width: 500px;
  height: 500px;
  right: -142px;
  bottom: -306px;
  border: 82px solid rgb(var(--dark-rgb) / 0.34);
}

.problemProductDecorTwo {
  width: 430px;
  height: 430px;
  right: -213px;
  bottom: -225px;
  border: 64px solid rgb(var(--dark-rgb) / 0.42);
}

@media (max-width: 1500px) {
  .problemProductSection {
    width: min(100% - 48px, 1380px);
    min-height: 480px;
    padding: 50px 40px;
    grid-template-columns: minmax(340px, 0.88fr) minmax(600px, 680px);
    gap: 42px;
    border-radius: 52px;
  }

  .problemProductTitle {
    font-size: clamp(42px, 3.35vw, 54px) !important;
  }

  .problemProductText {
    font-size: 19px !important;
  }

  .problemProductGrid {
    max-width: 680px;
  }

  .problemProductCard {
    min-height: 166px;
    padding: 20px 20px 18px;
    border-radius: 24px;
  }

  .problemProductIcon {
    width: 43px;
    height: 43px;
    margin-top: 21px;
  }

  .problemProductCard h3 {
    font-size: 19px !important;
  }
}

@media (max-width: 1280px) {
  .problemProductSection {
    width: calc(100% - 36px);
    min-height: 450px;
    padding: 44px 34px;
    grid-template-columns: minmax(310px, 0.86fr) minmax(540px, 620px);
    gap: 34px;
    border-radius: 46px;
  }

  .problemProductEyebrow {
    margin-bottom: 22px;
    font-size: 15px !important;
  }

  .problemProductTitle {
    font-size: clamp(40px, 3.6vw, 48px) !important;
  }

  .problemProductText {
    margin-top: 19px;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .problemProductCta {
    min-height: 60px;
    margin-top: 26px;
    font-size: 17px !important;
  }

  .problemProductGrid {
    max-width: 620px;
    gap: 13px;
  }

  .problemProductCard {
    min-height: 158px;
    padding: 18px 18px 17px;
  }

  .problemProductIcon {
    width: 40px;
    height: 40px;
    margin-top: 19px;
  }

  .problemProductCard h3 {
    font-size: 18px !important;
  }
}

@media (max-width: 1100px) {
  .problemProductSection {
    width: min(100% - 32px, 980px);
    min-height: auto;
    padding: 44px 36px 38px;
    grid-template-columns: 1fr;
    gap: 32px;
    border-radius: 44px;
  }

  .problemProductIntro {
    max-width: 680px;
  }

  .problemProductTitle {
    max-width: 660px;
    font-size: clamp(42px, 5.2vw, 50px) !important;
  }

  .problemProductText {
    max-width: 620px;
  }

  .problemProductGrid {
    width: 100%;
    max-width: 720px;
    justify-self: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }
}

@media (max-width: 900px) {
  .problemProductSection {
    width: calc(100% - 28px);
    padding: 40px 28px 32px;
    gap: 30px;
    border-radius: 38px;
  }

  .problemProductTitle {
    font-size: clamp(39px, 6vw, 48px) !important;
  }

  .problemProductGrid {
    max-width: 100%;
    gap: 12px;
  }

  .problemProductCard {
    min-height: 154px;
    padding: 18px 17px 16px;
    border-radius: 22px;
  }

  .problemProductIcon {
    width: 39px;
    height: 39px;
    margin-top: 18px;
  }
}

@media (max-width: 760px) {
  .problemProductSection {
    width: calc(100% - 24px);
    padding: 38px 20px 26px;
    gap: 28px;
    border-radius: 34px;
  }

  .problemProductEyebrow {
    margin-bottom: 17px;
    font-size: 13px !important;
  }

  .problemProductTitle {
    font-size: clamp(34px, 9vw, 43px) !important;
    line-height: 1.04 !important;
  }

  .problemProductText {
    margin-top: 16px;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .problemProductCta {
    min-height: 54px;
    margin-top: 22px;
    padding: 7px 9px 7px 20px;
    gap: 12px;
    font-size: 15px !important;
  }

  .problemProductCtaIcon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }

  .problemProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .problemProductCard {
    min-height: 150px;
    padding: 17px 16px 15px;
    border-radius: 21px;
  }

  .problemProductNumber {
    font-size: 14px;
  }

  .problemProductIcon {
    width: 38px;
    height: 38px;
    margin-top: 18px;
  }

  .problemProductCard h3 {
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .problemProductSection {
    width: calc(100% - 20px);
    padding: 32px 16px 20px;
    gap: 24px;
    border-radius: 28px;
  }

  .problemProductEyebrow {
    margin-bottom: 14px;
    font-size: 12px !important;
  }

  .problemProductTitle {
    font-size: clamp(31px, 9.4vw, 38px) !important;
  }

  .problemProductText {
    margin-top: 14px;
    font-size: 15px !important;
  }

  .problemProductCta {
    min-height: 50px;
    margin-top: 19px;
    padding-left: 18px;
    font-size: 14px !important;
  }

  .problemProductCtaIcon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 21px;
  }

  .problemProductGrid {
    gap: 9px;
  }

  .problemProductCard {
    min-height: 140px;
    padding: 15px 13px 13px;
    border-radius: 19px;
  }

  .problemProductIcon {
    width: 35px;
    height: 35px;
    margin-top: 16px;
  }

  .problemProductCard h3 {
    font-size: 15px !important;
    line-height: 1.16 !important;
  }
}

@media (max-width: 360px) {
  .problemProductSection {
    width: calc(100% - 16px);
    padding: 28px 13px 18px;
    border-radius: 24px;
  }

  .problemProductTitle {
    font-size: 29px !important;
  }

  .problemProductGrid {
    gap: 8px;
  }

  .problemProductCard {
    min-height: 134px;
    padding: 14px 11px 12px;
    border-radius: 18px;
  }

  .problemProductIcon {
    width: 32px;
    height: 32px;
    margin-top: 14px;
  }

  .problemProductCard h3 {
    font-size: 14px !important;
  }
}

/* ============================================================
   FEATURED CASE STUDIES — REFERENCE-MATCHED SECTION
   Reference dimensions at 1024px viewport:
   section 1024 × 683, container 1024 × 548,
   cards row 994 × 474, 20px gaps, image 340px high.
   ============================================================ */
.featuredCaseStudiesRefSection {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 60px 0 75px;
  background: var(--case-surface);
  color: var(--case-primary);
}

.featuredCaseStudiesRefContainer {
  width: 100%;
  max-width: 1310px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.featuredCaseStudiesRefTitle {
  margin: 0;
  color: var(--case-primary);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.025em;
  text-transform: none;
}

.featuredCaseStudiesRefGrid {
  width: 100%;
  height: 430px;
  margin-top: 40px;
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.featuredCaseStudyRefCard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 430px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--case-primary);
  box-shadow: 10px 10px 0 rgb(var(--accent-rgb) / 0.58);
  isolation: isolate;
}

.featuredCaseStudyRefImageWrap {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 310px;
  overflow: hidden;
  background: var(--surface);
  transition: height 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: height;
}

.featuredCaseStudyRefImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateY(0) scale(1.001);
  opacity: 1;
  filter: brightness(1);
  transition:
    transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 380ms ease,
    filter 380ms ease;
  will-change: transform, opacity, filter;
}

.featuredCaseStudyRefFooter {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  padding: 22px 24px 18px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  background: var(--case-primary);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.featuredCaseStudyRefFooter h3,
.featuredCaseStudyRefHover h3 {
  margin: 0;
  color: var(--text-on-dark);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-transform: none;
}

.featuredCaseStudyRefHover {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 28px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: rgb(var(--case-primary-rgb) / 0.74);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms;
  will-change: opacity;
}

.featuredCaseStudyRefHoverContent {
  width: 100%;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 300ms ease 70ms,
    transform 470ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms;
  will-change: opacity, transform;
}

.featuredCaseStudyRefHover h3 {
  margin-bottom: 14px;
}

.featuredCaseStudyRefHover p {
  margin: 0 0 26px;
  color: var(--text-on-dark);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.featuredCaseStudyRefButton {
  width: 100%;
  min-height: 58px;
  padding: 10px 14px 10px 22px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--surface);
  color: var(--case-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.featuredCaseStudyRefButton span {
  flex: 1;
  text-align: center;
  padding-left: 20px;
}

.featuredCaseStudyButtonIcon {
  flex: 0 0 auto;
  color: var(--primary);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImageWrap,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImageWrap {
  height: 100%;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHover,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHover {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 360ms ease,
    visibility 0s linear 0s;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHoverContent,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHoverContent {
  opacity: 1;
  transform: translateY(0);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefFooter,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefFooter {
  opacity: 0;
  transform: translateY(18px);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImage,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImage {
  transform: translateY(-8px) scale(1.075);
  opacity: 0.86;
  filter: brightness(0.82);
}

/* Desktop reference expansion while keeping the 1024px metrics exact. */
@media (min-width: 1280px) {
  .featuredCaseStudiesRefSection {
    padding-top: 26px;
    padding-bottom: 92px;
  }

  .featuredCaseStudiesRefTitle {
    font-size: 36px;
    line-height: 40px;
  }

  .featuredCaseStudiesRefGrid {
    height: 456px;
    margin-top: 36px;
  }

  .featuredCaseStudyRefCard {
    height: 456px;
  }

  .featuredCaseStudyRefImageWrap {
    height: 336px;
  }

  .featuredCaseStudyRefFooter {
    height: 120px;
    padding: 24px 28px 20px;
  }

  .featuredCaseStudyRefFooter h3,
  .featuredCaseStudyRefHover h3 {
    font-size: 24px;
  }

  .featuredCaseStudyRefHover {
    padding: 34px 30px;
  }

  .featuredCaseStudyRefHover p {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .featuredCaseStudiesRefSection {
    padding: 48px 0 58px;
  }

  .featuredCaseStudiesRefContainer {
    padding: 0 20px;
  }

  .featuredCaseStudiesRefTitle {
    font-size: 30px;
    line-height: 1.12;
  }

  .featuredCaseStudiesRefGrid {
    height: auto;
    margin-top: 32px;
    gap: 18px;
    overflow-x: auto;
    padding: 0 0 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .featuredCaseStudyRefCard {
    flex: 0 0 min(76vw, 360px);
    height: 430px;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .featuredCaseStudiesRefSection {
    padding: 42px 0 50px;
  }

  .featuredCaseStudiesRefContainer {
    padding: 0 16px;
  }

  .featuredCaseStudiesRefTitle {
    font-size: 27px;
  }

  .featuredCaseStudiesRefGrid {
    margin-top: 28px;
    gap: 14px;
  }

  .featuredCaseStudyRefCard {
    flex-basis: min(84vw, 330px);
    height: 410px;
    border-radius: 14px;
    box-shadow: 8px 8px 0 rgb(var(--accent-rgb) / 0.58);
  }

  .featuredCaseStudyRefImageWrap {
    height: 294px;
  }

  .featuredCaseStudyRefFooter {
    height: 116px;
    padding: 21px 20px 16px;
  }

  .featuredCaseStudyRefFooter h3,
  .featuredCaseStudyRefHover h3 {
    font-size: 20px;
  }

  .featuredCaseStudyRefHover {
    padding: 24px 22px;
  }

  .featuredCaseStudyRefHover p {
    font-size: 14px;
    margin-bottom: 22px;
  }

  .featuredCaseStudyRefButton {
    min-height: 54px;
    font-size: 14px;
  }
}

@media (hover: none) {
  .featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHover {
    opacity: 1;
    visibility: visible;
  }
}

/* Featured Case Studies — exact hover motion refinement
   Normal: fixed image + navy title footer.
   Hover: image expands through the card, rises, zooms and fades under the navy overlay. */
.featuredCaseStudyRefImageWrap {
  transition: height 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.featuredCaseStudyRefImage {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: brightness(1) saturate(1);
  transition:
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 560ms ease,
    filter 560ms ease;
}

.featuredCaseStudyRefFooter {
  transition:
    opacity 300ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.featuredCaseStudyRefHover {
  background: rgb(var(--case-primary-rgb) / 0.76);
  transition:
    opacity 520ms ease,
    visibility 0s linear 520ms;
}

.featuredCaseStudyRefHoverContent {
  transform: translateY(34px);
  transition:
    opacity 360ms ease 150ms,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 90ms;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImageWrap,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImageWrap {
  height: 100%;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImage,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImage {
  transform: translate3d(0, -14px, 0) scale(1.14);
  opacity: 0.72;
  filter: brightness(0.72) saturate(0.92);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefFooter,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefFooter {
  opacity: 0;
  transform: translateY(28px);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHover,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHover {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 520ms ease,
    visibility 0s linear 0s;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHoverContent,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHoverContent {
  opacity: 1;
  transform: translateY(0);
}

/* FINAL HOVER MATCH — full-card image background after zoom */
.featuredCaseStudyRefImageWrap {
  transition:
    height 720ms cubic-bezier(0.16, 1, 0.3, 1),
    inset 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImageWrap,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImageWrap {
  top: 0;
  bottom: 0;
  height: 100%;
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefImage,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate3d(0, -10px, 0) scale(1.19);
  opacity: 1;
  filter: brightness(0.84) saturate(0.96);
}

.featuredCaseStudyRefHover {
  background: rgb(var(--case-primary-rgb) / 0.74);
}

.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHover,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHover {
  background: rgb(var(--case-primary-rgb) / 0.74);
}

/* Featured Case Studies — 1.5s reference zoom timing */
.featuredCaseStudyRefImageWrap {
  transition:
    height 1500ms cubic-bezier(0.16, 1, 0.3, 1),
    inset 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.featuredCaseStudyRefImage {
  transition:
    transform 1500ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms ease,
    filter 700ms ease;
}

/* AI Apps section — compact height refinement */
.aiAppsSection {
  padding-top: 22px;
  padding-bottom: 50px;
}

.aiAppsHeadingBlock {
  margin-bottom: 24px;
}

.aiAppsCaseCard {
  padding: 30px 34px 24px;
}

.aiAppsDelivered {
  margin-top: 12px;
}

.aiAppsContentGrid {
  margin-top: 22px;
  gap: 38px;
}

.aiAppsResultList {
  margin-bottom: 15px;
}

.aiAppsProjectImageWrap {
  aspect-ratio: 16 / 7.25;
}

.aiAppsTestimonialCard {
  min-height: 260px;
  padding: 24px 30px;
}

.aiAppsTestimonialCard blockquote {
  margin: 20px 0;
}

@media (max-width: 1120px) {
  .aiAppsCaseCard {
    padding: 28px 28px 22px;
  }

  .aiAppsContentGrid {
    gap: 26px;
    margin-top: 20px;
  }

  .aiAppsTestimonialCard {
    min-height: 250px;
    padding: 22px 24px;
  }
}

@media (max-width: 860px) {
  .aiAppsSection {
    padding: 30px 0 48px;
  }

  .aiAppsHeadingBlock {
    margin-bottom: 22px;
  }

  .aiAppsCaseCard {
    padding: 25px;
  }

  .aiAppsTopRow {
    gap: 18px;
  }

  .aiAppsContentGrid {
    gap: 24px;
    margin-top: 20px;
  }

  .aiAppsProjectImageWrap {
    aspect-ratio: 16 / 8.2;
  }
}

@media (max-width: 640px) {
  .aiAppsSection {
    padding: 26px 0 40px;
  }

  .aiAppsHeadingBlock {
    margin-bottom: 18px;
  }

  .aiAppsCaseCard {
    padding: 20px 18px 18px;
  }

  .aiAppsDelivered {
    margin-top: 12px;
  }

  .aiAppsContentGrid {
    margin-top: 18px;
    gap: 20px;
  }

  .aiAppsResultList {
    margin-bottom: 12px;
  }

  .aiAppsProjectImageWrap {
    aspect-ratio: 16 / 9.2;
  }

  .aiAppsTestimonialCard {
    padding: 20px 18px;
  }

  .aiAppsTestimonialCard blockquote {
    margin: 18px 0 20px;
  }
}

/* =========================================================
   TESTIMONIALS — COMPACT CARD HEIGHT + TEXT SCALE
   Keeps existing carousel/layout/colors/behavior unchanged.
   ========================================================= */
.testimonialsSection {
  padding-top: 30px;
  padding-bottom: 64px;
}

.testimonialsHeadingBlock {
  margin-bottom: 30px;
}

.testimonialsTitle {
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 0;
}

.testimonialsSubtitle {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.testimonialCard {
  height: 455px;
  border-radius: 22px;
}

.testimonialImageWrap {
  height: 205px;
  flex-basis: 205px;
  border-radius: 20px;
}

.testimonialBody {
  padding: 16px 20px 16px;
}

.testimonialStars {
  min-height: 20px;
}

.testimonialRatingImage {
  width: 86px;
}

.testimonialQuote {
  margin: 13px 0 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.01em;
}

.testimonialPerson h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.015em;
}

.testimonialPerson p {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
}

.testimonialNav {
  width: 50px;
  height: 50px;
}

.testimonialNav span {
  font-size: 26px;
}

@media (max-width: 1100px) {
  .testimonialsSection {
    padding-bottom: 56px;
  }

  .testimonialsTitle {
    font-size: 38px;
    line-height: 1.12;
  }

  .testimonialsSubtitle {
    font-size: 17px;
  }

  .testimonialCard {
    height: 440px;
  }

  .testimonialImageWrap {
    height: 195px;
    flex-basis: 195px;
  }

  .testimonialQuote {
    font-size: 15.5px;
    line-height: 24px;
  }
}

@media (max-width: 720px) {
  .testimonialsSection {
    padding: 28px 0 48px;
  }

  .testimonialsHeadingBlock {
    margin-bottom: 22px;
  }

  .testimonialsTitle {
    font-size: 30px;
    line-height: 1.18;
    white-space: normal;
  }

  .testimonialsSubtitle {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.35;
  }

  .testimonialCard {
    height: 420px;
  }

  .testimonialImageWrap {
    height: 180px;
    flex-basis: 180px;
  }

  .testimonialBody {
    padding: 15px 17px 15px;
  }

  .testimonialRatingImage {
    width: 82px;
  }

  .testimonialQuote {
    margin: 11px 0 12px;
    font-size: 15px;
    line-height: 23px;
  }

  .testimonialPerson h3 {
    font-size: 17px;
    line-height: 22px;
  }

  .testimonialPerson p {
    font-size: 12.5px;
    line-height: 18px;
  }

  .testimonialNav {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 420px) {
  .testimonialCard {
    height: 405px;
  }

  .testimonialImageWrap {
    height: 170px;
    flex-basis: 170px;
  }

  .testimonialQuote {
    font-size: 14.5px;
    line-height: 22px;
  }
}

/* Testimonials — quote refinement + autoplay carousel */
.testimonialQuote {
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  max-width: 36ch;
}

.testimonialNav--left {
  display: none !important;
}

@media (max-width: 1100px) {
  .testimonialQuote {
    font-size: 15px;
    line-height: 1.52;
  }
}

@media (max-width: 720px) {
  .testimonialQuote {
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 34ch;
  }
}

/* =========================================================
   WHO WE ARE — compact height + clearly connected image/card border
   ========================================================= */
.whoSection {
  padding-top: 26px;
  padding-bottom: 44px;
}

.whoInner {
  align-items: stretch;
}

.whoImageMain,
.whoConnectedGroup {
  min-height: 410px;
  height: 410px;
}

/* One continuous shell: image + content share the exact same border. */
.whoConnectedGroup {
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--border-strong);
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
}

.whoConnectedGroup .whoImageTall {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border: 0;
  border-right: 2px solid var(--border-strong);
  box-sizing: border-box;
}

.whoConnectedGroup .whoImageTall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whoConnectedGroup .whoCard {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 24px 32px 22px;
  box-sizing: border-box;
}

.whoConnectedGroup .whoTitle {
  margin-top: 18px;
}

.whoConnectedGroup .whoCopy {
  margin-top: 15px;
  font-size: 17px;
  line-height: 1.42;
}

.whoConnectedGroup .whoCopy p + p {
  margin-top: 12px;
}

.whoConnectedGroup .whoCta {
  min-height: 52px;
  margin-top: 14px;
}

@media (max-width: 1450px) {
  .whoSection {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .whoImageMain,
  .whoConnectedGroup {
    min-height: 390px;
    height: 390px;
  }

  .whoConnectedGroup .whoCard {
    padding: 22px 27px 20px;
  }

  .whoConnectedGroup .whoTitle {
    margin-top: 16px;
  }

  .whoConnectedGroup .whoCopy {
    margin-top: 13px;
    font-size: 16px;
    line-height: 1.4;
  }

  .whoConnectedGroup .whoCopy p + p {
    margin-top: 10px;
  }

  .whoConnectedGroup .whoCta {
    min-height: 50px;
    margin-top: 12px;
  }
}

@media (max-width: 1080px) {
  .whoSection {
    padding-top: 24px;
    padding-bottom: 38px;
  }

  .whoImageMain {
    min-height: 340px;
    height: 340px;
  }

  .whoConnectedGroup {
    min-height: 390px;
    height: 390px;
  }

  .whoConnectedGroup .whoCard {
    padding: 24px 28px 22px;
  }
}

@media (max-width: 680px) {
  .whoSection {
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .whoImageMain {
    min-height: 0;
    height: 300px;
  }

  .whoConnectedGroup {
    min-height: 0;
    height: auto;
    grid-template-columns: 1fr;
    border-width: 1.5px;
    border-radius: 23px;
  }

  .whoConnectedGroup .whoImageTall {
    height: 205px;
    border-right: 0;
    border-bottom: 1.5px solid var(--border-strong);
  }

  .whoConnectedGroup .whoCard {
    height: auto;
    padding: 24px 22px 22px;
  }

  .whoConnectedGroup .whoCopy {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* ABOUT — single-image refinement */
.whoInner.whoInnerSingleImage {
  display: block;
  width: min(1320px, calc(100% - 96px));
}

.whoConnectedGroup.whoConnectedGroupSingleImage {
  width: 100%;
  min-height: 430px;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.35fr);
}

.whoConnectedGroupSingleImage .whoImageTall {
  min-height: 430px;
}

.whoConnectedGroupSingleImage .whoCard {
  border-left: 2px solid var(--border-strong);
}

@media (max-width: 1080px) {
  .whoInner.whoInnerSingleImage {
    width: min(920px, calc(100% - 48px));
  }

  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
    min-height: 400px;
  }

  .whoConnectedGroupSingleImage .whoImageTall {
    min-height: 400px;
  }
}

@media (max-width: 680px) {
  .whoInner.whoInnerSingleImage {
    width: min(100% - 28px, 520px);
  }

  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .whoConnectedGroupSingleImage .whoImageTall {
    min-height: 0;
    height: 300px;
  }

  .whoConnectedGroupSingleImage .whoCard {
    border-left: 0;
    border-top: 1.5px solid var(--border-strong);
  }
}

/* AI-FIRST Services — rebuilt from the supplied video reference */
.aiFirstServicesSection {
  width: 100%;
  background: var(--surface);
  overflow: hidden;
}

.aiFirstServicesInner {
  width: min(100%, 1580px);
  margin: 0 auto;
  padding: 70px 34px 76px;
}

.aiFirstServicesHeader {
  max-width: 980px;
  margin-left: 8px;
}

.aiFirstServicesKicker {
  margin: 0 0 2px;
  color: var(--text-primary);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.aiFirstServicesTitle {
  margin: 0;
  color: var(--primary);
  font-size: clamp(76px, 8vw, 142px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.aiFirstServicesSubhead {
  margin: 10px 0 0;
  color: var(--text-primary);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.aiFirstServicesSubhead strong {
  font-weight: 700;
}

.aiFirstServicesLead {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.aiFirstServicesGroups {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 34px;
}

.aiFirstServiceGroup {
  min-width: 0;
}

.aiFirstServicePill {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 0 0 24px 8px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text-on-dark);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.aiFirstServiceRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(315px, 360px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1px 8px 8px;
  scroll-snap-type: x proximity;
}

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

.aiFirstServiceCard {
  min-height: 250px;
  padding: 28px 28px 26px;
  border: 1.15px solid var(--border-strong);
  border-radius: 27px;
  background: var(--surface);
  color: var(--text-primary);
  scroll-snap-align: start;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}

.aiFirstServiceCard:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 14px 32px rgb(var(--dark-rgb) / 0.06);
  background: var(--surface);
}

.aiFirstServiceCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.aiFirstServiceIcon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex: 0 0 auto;
}

.aiFirstServiceIcon svg {
  width: 100%;
  height: 100%;
}

.aiFirstServiceArrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 240ms ease, color 240ms ease;
}

.aiFirstServiceArrow svg {
  width: 24px;
  height: 24px;
}

.aiFirstServiceCard:hover .aiFirstServiceArrow {
  transform: translateX(4px);
  color: var(--primary);
}

.aiFirstServiceCard h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.aiFirstServiceCard p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

@media (min-width: 1500px) {
  .aiFirstServicesInner {
    padding-left: 54px;
    padding-right: 54px;
  }

  .aiFirstServiceRail {
    grid-auto-columns: minmax(335px, 365px);
  }
}

@media (max-width: 1100px) {
  .aiFirstServicesInner {
    padding: 56px 26px 64px;
  }

  .aiFirstServicesTitle {
    font-size: clamp(72px, 11vw, 112px);
  }

  .aiFirstServicesSubhead {
    font-size: clamp(23px, 3.1vw, 32px);
  }

  .aiFirstServiceRail {
    grid-auto-columns: minmax(290px, 320px);
  }

  .aiFirstServiceCard {
    min-height: 236px;
  }
}

@media (max-width: 720px) {
  .aiFirstServicesInner {
    padding: 48px 16px 54px;
  }

  .aiFirstServicesHeader {
    margin-left: 0;
  }

  .aiFirstServicesKicker {
    font-size: 18px;
  }

  .aiFirstServicesTitle {
    font-size: clamp(58px, 18vw, 84px);
    line-height: 0.9;
  }

  .aiFirstServicesSubhead {
    margin-top: 8px;
    font-size: 21px;
    line-height: 1.08;
  }

  .aiFirstServicesLead {
    font-size: 14px;
  }

  .aiFirstServicesGroups {
    gap: 28px;
    margin-top: 28px;
  }

  .aiFirstServicePill {
    min-height: 46px;
    margin-left: 0;
    margin-bottom: 18px;
    padding: 0 18px;
    font-size: 14px;
  }

  .aiFirstServiceRail {
    grid-auto-columns: minmax(270px, 84vw);
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  .aiFirstServiceCard {
    min-height: 224px;
    padding: 24px 22px;
    border-radius: 23px;
  }

  .aiFirstServiceIcon {
    width: 48px;
    height: 48px;
  }

  .aiFirstServiceCard h3 {
    font-size: 20px;
  }

  .aiFirstServiceCard p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiFirstServiceCard,
  .aiFirstServiceArrow {
    transition: none;
  }
}

/* Reliable continuous motion for the Product Engineering rail — matches video behavior */
.aiFirstServiceRail.is-auto {
  display: block;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 0;
  scroll-snap-type: none;
}

.aiFirstServiceMarqueeTrack {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: aiFirstServicesMarquee 34s linear infinite;
}

.aiFirstServiceMarqueeSet {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}

.aiFirstServiceMarqueeSet .aiFirstServiceCard {
  width: 350px;
  flex: 0 0 350px;
}

@keyframes aiFirstServicesMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (min-width: 1500px) {
  .aiFirstServiceMarqueeSet .aiFirstServiceCard {
    width: 365px;
    flex-basis: 365px;
  }
}

@media (max-width: 1100px) {
  .aiFirstServiceMarqueeSet .aiFirstServiceCard {
    width: 310px;
    flex-basis: 310px;
  }

  .aiFirstServiceMarqueeTrack {
    animation-duration: 31s;
  }
}

@media (max-width: 720px) {
  .aiFirstServiceRail.is-auto {
    padding-left: 0;
  }

  .aiFirstServiceMarqueeSet {
    gap: 14px;
    padding-right: 14px;
  }

  .aiFirstServiceMarqueeSet .aiFirstServiceCard {
    width: min(84vw, 290px);
    flex-basis: min(84vw, 290px);
  }

  .aiFirstServiceMarqueeTrack {
    animation-duration: 27s;
  }
}

/* Video-matched service marquee motion — smooth + clearly visible auto-slide */
.aiFirstServiceMarqueeTrack {
  animation-name: aiFirstServicesMarquee;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.aiFirstServiceMarqueeSet,
.aiFirstServiceMarqueeSet .aiFirstServiceCard {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.aiFirstServiceRail.is-auto {
  contain: paint;
}

@media (max-width: 1100px) {
  .aiFirstServiceMarqueeTrack {
    animation-duration: 17s;
  }
}

@media (max-width: 720px) {
  .aiFirstServiceMarqueeTrack {
    animation-duration: 16s;
  }
}

/* Product Engineering: pinned viewport + one-card step every 2 seconds */
.aiFirstServiceRail.is-auto-step {
  display: block;
  overflow: hidden;
  /* Keep horizontal containment without trapping vertical page scrolling. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  padding: 1px 8px 8px;
  scroll-snap-type: none;
  contain: paint;
}

.aiFirstServiceStepTrack {
  display: flex;
  width: max-content;
  gap: 16px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.aiFirstServiceStepTrack.is-animated {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aiFirstServiceStepTrack.is-resetting {
  transition: none;
}

.aiFirstServiceStepTrack .aiFirstServiceCard {
  width: 350px;
  flex: 0 0 350px;
}

@media (min-width: 1500px) {
  .aiFirstServiceStepTrack .aiFirstServiceCard {
    width: 365px;
    flex-basis: 365px;
  }
}

@media (max-width: 1100px) {
  .aiFirstServiceStepTrack .aiFirstServiceCard {
    width: 310px;
    flex-basis: 310px;
  }
}

@media (max-width: 720px) {
  .aiFirstServiceRail.is-auto-step {
    padding-left: 0;
    padding-right: 0;
  }

  .aiFirstServiceStepTrack {
    gap: 14px;
  }

  .aiFirstServiceStepTrack .aiFirstServiceCard {
    width: min(84vw, 290px);
    flex-basis: min(84vw, 290px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiFirstServiceStepTrack.is-animated {
    transition-duration: 1ms;
  }
}

/* Palette-only refinements: navy, green, white and readable on-color text. */
.talkBtn, .primaryBtn { color: var(--text-primary); background: var(--accent); }
.talkBtn:hover, .primaryBtn:hover { background: var(--secondary); }
.costCta, .aiAppsCaseBtn { background: var(--primary); color: var(--text-on-dark); }
.costCta:hover, .aiAppsCaseBtn:hover { background: var(--dark); }
.hero h1 span { color: var(--text-on-dark); }
.hero .navLink:hover, .hero .navLink.active { color: var(--text-on-dark); }
.finalCtaCard { background: var(--dark); }
.finalCtaButton { background: var(--accent); color: var(--text-primary); }
.finalCtaButton:hover { background: var(--secondary); }
.industrySection { --industry-surface: var(--accent-soft); --industry-ink: var(--primary); }
.industrySection:has(.industryTab:nth-child(2).active) { --industry-surface: var(--accent); --industry-ink: var(--dark); }
.industrySection:has(.industryTab:nth-child(3).active) { --industry-surface: var(--accent-soft); --industry-ink: var(--dark); }
.industrySection:has(.industryTab:nth-child(4).active) { --industry-surface: var(--secondary); --industry-ink: var(--dark); }
.industrySection:has(.industryTab:nth-child(5).active) { --industry-surface: var(--primary); --industry-ink: var(--surface); }
.industryTab { color: var(--primary); }
.industryTab.active, .industryTab.active::after, .industryPanel { background: var(--industry-surface); color: var(--industry-ink); }
.industryPanel .industryCopy h3, .industryPanel .industryCopy p, .industryPanel .industryCopy ul, .industryPanel .industryCopy li { color: var(--industry-ink); }
.industryArrow { background: var(--surface); color: var(--primary); border-color: var(--secondary); }
.industryArrow:hover { background: var(--accent-soft); color: var(--text-primary); }
.industryTab:focus-visible, .industryArrow:focus-visible { outline-color: var(--accent); }
.featuredCaseStudyRefHover,
.featuredCaseStudyRefCard:hover .featuredCaseStudyRefHover,
.featuredCaseStudyRefCard:focus-within .featuredCaseStudyRefHover { background-color: rgb(var(--case-primary-rgb) / .94); }
.featuredCaseStudyRefHover h3, .featuredCaseStudyRefHover p, .featuredCaseStudyRefFooter h3 { color: var(--text-on-dark); }
.featuredCaseStudyRefButton { background: var(--surface); color: var(--primary); }
.featuredCaseStudyButtonIcon { color: var(--primary); }


/* ============================================================
   DEVELOPMENT PROCESS — COMPACT REFERENCE STYLE REPLACEMENT
   ============================================================ */
.developmentProcessSection {
  background: #FFFFFF !important;
  padding: 56px 0 34px !important;
  color: #050505 !important;
  overflow: hidden;
}

.developmentProcessInner {
  width: min(1680px, calc(100% - 80px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 28px !important;
}

.developmentProcessTop {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 560px);
  gap: 28px 44px;
  align-items: start;
}

.developmentProcessLead {
  min-width: 0;
}

.developmentProcessBadge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #20242D !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.developmentProcessBadgeDot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #49F3F2 0, #22E6EA 55%, #11C8D0 100%);
  box-shadow: 0 0 0 8px rgba(34, 230, 234, 0.12);
  flex: 0 0 16px;
}

.developmentProcessTitle {
  margin: 24px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: clamp(62px, 6.25vw, 134px) !important;
  line-height: 0.88 !important;
  font-weight: 800 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

.developmentProcessTitleBlack,
.developmentProcessTitleAccent {
  display: block;
}

.developmentProcessTitleBlack { color: #050505 !important; }
.developmentProcessTitleAccent {
  color: #22E6EA !important;
}

.developmentProcessSubtitle {
  max-width: 740px !important;
  margin: 10px 0 0 !important;
  color: #51596A !important;
  font-size: clamp(22px, 2vw, 29px) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

.developmentProcessAside {
  justify-self: end;
  width: min(100%, 520px);
  display: grid;
  gap: 28px;
  align-content: start;
  padding-top: 46px;
}

.developmentProcessMeta {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid rgba(0, 41, 94, 0.14);
  color: #8A92A3;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.developmentProcessMeta li {
  margin: 0;
}

.developmentProcessCta {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  width: fit-content;
  text-decoration: none;
  color: #111111 !important;
  justify-self: end;
}

.developmentProcessCtaCircle {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #22E6EA;
  color: #08131F;
  font-size: 38px;
  line-height: 1;
  font-weight: 400;
}

.developmentProcessCtaText {
  max-width: 180px;
  padding-left: 20px;
  border-left: 2px solid rgba(0, 41, 94, 0.14);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.developmentProcessFlow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 4px;
}

.developmentProcessCard {
  min-width: 0;
  min-height: 0 !important;
  padding: 12px 30px 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.developmentProcessCard:not(:first-child) {
  border-left: 1px solid rgba(0, 41, 94, 0.16) !important;
  padding-left: 50px !important;
}

.developmentProcessCardTop {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.developmentProcessNumber {
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #22E6EA !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
}

.developmentProcessNumberLine {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(0, 41, 94, 0.26);
  max-width: 128px;
}

.developmentProcessCard h3 {
  margin: 18px 0 0 !important;
  color: #050505 !important;
  font-size: clamp(32px, 2.3vw, 46px) !important;
  line-height: 0.98 !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase;
}

.developmentProcessCard p {
  margin: 12px 0 0 !important;
  max-width: 370px;
  color: #4A5261 !important;
  font-size: clamp(18px, 1.32vw, 25px) !important;
  line-height: 1.14 !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

.developmentProcessCardAccent {
  display: none !important;
}

.developmentProcessCardBottom {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.developmentProcessIconWrap {
  position: relative;
  width: 136px;
  height: 136px;
  flex: 0 0 136px;
  display: grid;
  place-items: center;
}

.developmentProcessIconRing {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -36deg, #22E6EA 0 22%, rgba(34, 230, 234, 0) 22% 100%),
    radial-gradient(circle at center, rgba(34, 230, 234, 0.12) 0 58%, rgba(34, 230, 234, 0.10) 58% 72%, rgba(34, 230, 234, 0.14) 72% 73%, rgba(34, 230, 234, 0.06) 73% 100%);
  -webkit-mask: radial-gradient(circle at center, transparent 0 50px, #000 51px 100%);
          mask: radial-gradient(circle at center, transparent 0 50px, #000 51px 100%);
}

.developmentProcessIcon {
  position: relative;
  z-index: 1;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #E9F9FA;
  color: #0B111A;
}

.developmentProcessIcon svg {
  width: 44px;
  height: 44px;
  display: block;
}

.developmentProcessIconDot {
  position: absolute;
  right: 10px;
  top: 53px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22E6EA;
  z-index: 2;
}

.developmentProcessArrow {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  color: #111111 !important;
  font-size: 54px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
}

@media (max-width: 1600px) {
  .developmentProcessInner {
    width: min(1500px, calc(100% - 64px)) !important;
  }

  .developmentProcessAside {
    width: min(100%, 480px);
    padding-top: 36px;
  }

  .developmentProcessCard:not(:first-child) {
    padding-left: 36px !important;
  }

  .developmentProcessCard {
    padding-right: 22px !important;
  }

  .developmentProcessIconWrap {
    width: 122px;
    height: 122px;
    flex-basis: 122px;
  }

  .developmentProcessIcon {
    width: 90px;
    height: 90px;
  }

  .developmentProcessIconDot {
    right: 10px;
    top: 47px;
  }
}

@media (max-width: 1280px) {
  .developmentProcessSection {
    padding: 48px 0 28px !important;
  }

  .developmentProcessInner {
    width: calc(100% - 42px) !important;
    gap: 24px !important;
  }

  .developmentProcessTop {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
    gap: 22px 28px;
  }

  .developmentProcessTitle {
    font-size: clamp(52px, 6.2vw, 92px) !important;
  }

  .developmentProcessSubtitle {
    font-size: clamp(20px, 2vw, 24px) !important;
    max-width: 620px !important;
  }

  .developmentProcessCard h3 {
    font-size: clamp(28px, 2.4vw, 36px) !important;
  }

  .developmentProcessCard p {
    font-size: clamp(16px, 1.45vw, 20px) !important;
  }

  .developmentProcessNumber {
    font-size: 30px !important;
  }

  .developmentProcessArrow {
    font-size: 44px !important;
  }

  .developmentProcessIconWrap {
    width: 108px;
    height: 108px;
    flex-basis: 108px;
  }

  .developmentProcessIcon {
    width: 80px;
    height: 80px;
  }

  .developmentProcessIcon svg {
    width: 40px;
    height: 40px;
  }

  .developmentProcessIconDot {
    right: 10px;
    top: 41px;
  }
}

@media (max-width: 980px) {
  .developmentProcessSection {
    padding: 42px 0 24px !important;
  }

  .developmentProcessInner {
    width: calc(100% - 32px) !important;
  }

  .developmentProcessTop {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .developmentProcessAside {
    justify-self: start;
    width: 100%;
    max-width: none;
    padding-top: 0;
    grid-template-columns: minmax(0, auto) 1fr;
    align-items: center;
    gap: 18px 24px;
  }

  .developmentProcessCta {
    justify-self: start;
  }

  .developmentProcessFlow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 0 !important;
  }

  .developmentProcessCard {
    padding: 10px 18px 0 0 !important;
  }

  .developmentProcessCard:nth-child(odd) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .developmentProcessCard:nth-child(even) {
    padding-left: 28px !important;
  }
}

@media (max-width: 640px) {
  .developmentProcessSection {
    padding: 36px 0 18px !important;
  }

  .developmentProcessInner {
    width: calc(100% - 22px) !important;
    gap: 18px !important;
  }

  .developmentProcessBadge {
    gap: 10px !important;
    font-size: 12px !important;
  }

  .developmentProcessBadgeDot {
    width: 13px;
    height: 13px;
    box-shadow: 0 0 0 6px rgba(34, 230, 234, 0.12);
  }

  .developmentProcessTitle {
    margin-top: 18px !important;
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 0.92 !important;
  }

  .developmentProcessSubtitle {
    margin-top: 12px !important;
    font-size: 16px !important;
    line-height: 1.26 !important;
  }

  .developmentProcessAside {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .developmentProcessMeta {
    padding-left: 16px;
    font-size: 12px;
  }

  .developmentProcessCtaCircle {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }

  .developmentProcessCtaText {
    max-width: 152px;
    padding-left: 14px;
    font-size: 12px;
  }

  .developmentProcessFlow {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .developmentProcessCard,
  .developmentProcessCard:not(:first-child),
  .developmentProcessCard:nth-child(even),
  .developmentProcessCard:nth-child(odd) {
    border-left: 0 !important;
    padding: 0 !important;
  }

  .developmentProcessCard {
    padding-top: 4px !important;
    border-top: 1px solid rgba(0, 41, 94, 0.14) !important;
  }

  .developmentProcessCardTop {
    padding-top: 14px;
  }

  .developmentProcessCard h3 {
    margin-top: 16px !important;
    font-size: 28px !important;
  }

  .developmentProcessCard p {
    margin-top: 10px !important;
    font-size: 16px !important;
    max-width: 100%;
  }

  .developmentProcessCardBottom {
    margin-top: 14px;
  }

  .developmentProcessIconWrap {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }

  .developmentProcessIcon {
    width: 72px;
    height: 72px;
  }

  .developmentProcessIcon svg {
    width: 36px;
    height: 36px;
  }

  .developmentProcessIconDot {
    right: 8px;
    top: 36px;
    width: 8px;
    height: 8px;
  }

  .developmentProcessArrow {
    font-size: 36px !important;
  }
}


/* ============================================================
   COST / DELIVERY — CONNECTED REFERENCE LAYOUT
   ============================================================ */
.costSection {
  background: #FFFFFF !important;
  color: #071522 !important;
  padding: 54px 0 64px !important;
  overflow: hidden;
}

.costInner {
  width: min(1540px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  display: block !important;
}

.costConnectedGroup {
  width: 100% !important;
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(0, 41, 94, 0.18) !important;
  border-radius: 34px !important;
  background: #FFFFFF !important;
}

.costCard {
  min-width: 0 !important;
  padding: 58px 40px 52px 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #FFFFFF !important;
}

.costStayLabel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  color: #071522;
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.costStayLine {
  width: 68px;
  height: 2px;
  background: #57D97D;
  flex: 0 0 68px;
}

.costHeadline {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(48px, 4.65vw, 78px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.055em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #071522 !important;
}

.costHeadlineLine {
  display: block;
  color: #071522 !important;
}

.costHeadline strong {
  margin: 0 !important;
  color: #57D97D !important;
  font: inherit !important;
}

.costImageWrap {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 14px 14px 14px 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #F7FAFC !important;
}

.costImage {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 1400px) {
  .costSection {
    padding: 48px 0 56px !important;
  }

  .costInner {
    width: min(1320px, calc(100% - 52px)) !important;
  }

  .costConnectedGroup {
    min-height: 440px !important;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
    border-radius: 30px !important;
  }

  .costCard {
    padding: 48px 32px 44px 42px !important;
  }

  .costStayLabel {
    margin-bottom: 24px;
    font-size: 15px;
  }

  .costHeadline {
    font-size: clamp(44px, 4.7vw, 66px) !important;
  }

  .costImageWrap {
    margin: 12px 12px 12px 0 !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 1040px) {
  .costSection {
    padding: 42px 0 50px !important;
  }

  .costInner {
    width: min(920px, calc(100% - 36px)) !important;
  }

  .costConnectedGroup {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    border-radius: 28px !important;
  }

  .costCard {
    padding: 44px 36px 34px !important;
  }

  .costHeadline {
    max-width: 760px;
    font-size: clamp(48px, 8vw, 72px) !important;
  }

  .costImageWrap {
    height: clamp(350px, 58vw, 520px) !important;
    margin: 0 12px 12px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 640px) {
  .costSection {
    padding: 30px 0 38px !important;
  }

  .costInner {
    width: calc(100% - 20px) !important;
  }

  .costConnectedGroup {
    border-radius: 22px !important;
  }

  .costCard {
    padding: 30px 22px 24px !important;
  }

  .costStayLabel {
    gap: 12px;
    margin-bottom: 20px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .costStayLine {
    width: 48px;
    flex-basis: 48px;
  }

  .costHeadline {
    font-size: clamp(38px, 12.3vw, 56px) !important;
    line-height: 1.02 !important;
  }

  .costImageWrap {
    height: 290px !important;
    margin: 0 8px 8px !important;
    border-radius: 18px !important;
  }
}


/* ============================================================
   DEVELOPMENT PROCESS — HOME DESIGN SYSTEM TYPOGRAPHY/COLOR ALIGNMENT
   ============================================================ */
.developmentProcessSection {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

.developmentProcessBadge {
  color: var(--primary) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.055em !important;
}

.developmentProcessBadgeDot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0.13) !important;
}

.developmentProcessTitle {
  margin-top: 20px !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(56px, 5.7vw, 104px) !important;
  line-height: 0.9 !important;
  font-weight: 700 !important;
  letter-spacing: -0.065em !important;
}

.developmentProcessTitleBlack {
  color: var(--dark) !important;
}

.developmentProcessTitleAccent {
  color: var(--primary) !important;
}

.developmentProcessSubtitle {
  max-width: 720px !important;
  margin-top: 16px !important;
  color: var(--text-secondary) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

.developmentProcessMeta {
  border-left-color: rgb(var(--primary-rgb) / 0.22) !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.developmentProcessCta {
  color: var(--dark) !important;
}

.developmentProcessCtaCircle {
  background: var(--accent) !important;
  color: var(--dark) !important;
}

.developmentProcessCtaText {
  border-left-color: rgb(var(--primary-rgb) / 0.22) !important;
  color: var(--dark) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.developmentProcessNumber {
  color: var(--accent) !important;
  font-size: clamp(25px, 1.75vw, 31px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

.developmentProcessNumberLine {
  background: rgb(var(--primary-rgb) / 0.28) !important;
}

.developmentProcessCard:not(:first-child) {
  border-left-color: rgb(var(--primary-rgb) / 0.14) !important;
}

.developmentProcessCard h3 {
  margin-top: 16px !important;
  color: var(--dark) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(26px, 1.9vw, 36px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

.developmentProcessCard p {
  margin-top: 10px !important;
  max-width: 330px !important;
  color: var(--text-secondary) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}

.developmentProcessIconRing {
  background:
    conic-gradient(from -36deg, var(--accent) 0 22%, transparent 22% 100%),
    radial-gradient(circle at center, rgb(var(--accent-rgb) / 0.12) 0 58%, rgb(var(--accent-rgb) / 0.09) 58% 72%, rgb(var(--accent-rgb) / 0.18) 72% 73%, rgb(var(--accent-rgb) / 0.05) 73% 100%) !important;
}

.developmentProcessIcon {
  background: var(--dark) !important;
  color: var(--surface) !important;
}

.developmentProcessIconDot {
  background: var(--accent) !important;
}

.developmentProcessArrow {
  color: var(--dark) !important;
}

@media (max-width: 1280px) {
  .developmentProcessTitle {
    font-size: clamp(50px, 6vw, 82px) !important;
  }

  .developmentProcessSubtitle {
    font-size: clamp(16px, 1.55vw, 19px) !important;
  }

  .developmentProcessCard h3 {
    font-size: clamp(24px, 2.1vw, 31px) !important;
  }

  .developmentProcessCard p {
    font-size: clamp(14px, 1.25vw, 17px) !important;
  }
}

@media (max-width: 640px) {
  .developmentProcessBadge {
    font-size: 12px !important;
  }

  .developmentProcessTitle {
    margin-top: 16px !important;
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
  }

  .developmentProcessSubtitle {
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .developmentProcessMeta,
  .developmentProcessCtaText {
    font-size: 12px !important;
  }

  .developmentProcessNumber {
    font-size: 24px !important;
  }

  .developmentProcessCard h3 {
    font-size: 27px !important;
  }

  .developmentProcessCard p {
    font-size: 15px !important;
    line-height: 1.42 !important;
  }
}


/* ============================================================
   INSIGHTS CARD TITLES — BALANCED / NO CLIPPING
   ============================================================ */
.insightsCard h3,
.insightsCardBody h3 {
  margin: 18px 0 24px !important;
  min-height: 78px !important;
  max-width: 100% !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1180px) {
  .insightsCard h3,
  .insightsCardBody h3 {
    min-height: 75px !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 640px) {
  .insightsCard h3,
  .insightsCardBody h3 {
    margin: 15px 0 19px !important;
    min-height: 0 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 3 !important;
  }
}


/* ============================================================
   HERO FORMAT — transparent header, editorial heading, trust marks
   ============================================================ */
.hero {
  min-height: min(900px, calc(100svh - 24px));
  background: var(--dark);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,21,34,.86) 0%, rgba(7,21,34,.68) 42%, rgba(7,21,34,.28) 72%, rgba(7,21,34,.24) 100%),
    linear-gradient(180deg, rgba(7,21,34,.18) 0%, rgba(7,21,34,.12) 62%, rgba(7,21,34,.55) 100%);
}
.heroShell {
  position: relative;
  min-height: inherit;
  padding-top: 0;
}
.heroContent {
  min-height: inherit;
  padding: 150px 10px 92px;
  align-items: center;
}
.contentColumn {
  width: min(920px, 68vw);
}
.eyebrow {
  margin-bottom: 24px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
}
.heroHeadline {
  max-width: 1040px !important;
  margin: 0 !important;
  display: grid;
  gap: 3px;
  color: #FFFFFF !important;
  font-size: clamp(56px, 5.45vw, 88px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-wrap: balance;
}
.heroHeadlineLine {
  display: block;
  color: #FFFFFF !important;
}
.hero .heroHeadlineAccent {
  color: var(--accent) !important;
  text-shadow: none !important;
}
.heroCopy {
  width: min(760px, 100%);
  margin-top: 26px;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.58 !important;
  letter-spacing: -.018em;
}
.heroIdentity {
  min-height: 42px;
  margin-top: 30px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #FFFFFF;
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.heroIdentityPrefix {
  font-weight: 500;
}
.heroIdentityWord {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  animation: heroWordIn .42s ease both;
}
@keyframes heroWordIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.heroActions {
  margin-top: 28px;
}
.hero .primaryBtn {
  min-height: 56px;
  padding-inline: 24px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--dark);
}
.hero .secondaryBtn {
  min-height: 56px;
  padding-inline: 22px;
  border-radius: 999px;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.48);
  background: rgba(7,21,34,.12);
}
.hero .primaryBtn:hover { background: var(--secondary); }
.hero .secondaryBtn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.72); }
.hero .primaryBtn .circleArrow { transition: transform 240ms ease; }
.hero .primaryBtn:hover .circleArrow { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .hero .primaryBtn, .hero .secondaryBtn, .hero .primaryBtn .circleArrow { transition: none; }
}
.stats {
  width: min(720px, 100%);
  margin-top: 42px;
}
.heroTrustMarks {
  position: absolute;
  right: 8px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding: 12px 14px;
}
.heroTrustMarks img {
  display: block;
  width: auto;
  max-width: 170px;
  max-height: 48px;
  object-fit: contain;
  opacity: .96;
}
.heroTrustMarks img:nth-child(2) { max-height: 55px; }
.heroTrustMarks img:nth-child(3) { max-width: 122px; }

@media (max-width: 1200px) {
  .hero { min-height: 780px; }
  .heroContent { padding: 132px 8px 86px; }
  .contentColumn { width: min(790px, 72vw); }
  .heroHeadline { font-size: clamp(50px, 5.4vw, 70px) !important; }
  .heroCopy { font-size: 17px !important; }
  .heroTrustMarks { gap: 18px; }
  .heroTrustMarks img { max-width: 135px; max-height: 42px; }
  .heroTrustMarks img:nth-child(2) { max-height: 48px; }
  .heroTrustMarks img:nth-child(3) { max-width: 102px; }
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }
  .heroShell { min-height: auto; }
  .heroContent {
    min-height: 760px;
    padding: 126px 6px 40px;
    display: block;
  }
  .contentColumn { width: min(760px, 100%); }
  .heroTrustMarks {
    position: static;
    margin-top: 34px;
    padding: 14px 0 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .hero::after {
    background: linear-gradient(90deg, rgba(7,21,34,.88), rgba(7,21,34,.58));
  }
  .heroContent {
    min-height: 720px;
    padding: 112px 2px 28px;
  }
  .eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
  }
  .heroHeadline {
    font-size: clamp(39px, 11vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }
  .heroCopy {
    margin-top: 20px;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .heroIdentity {
    min-height: 34px;
    margin-top: 23px;
    font-size: 20px;
  }
  .heroActions {
    margin-top: 22px;
    gap: 10px;
  }
  .hero .primaryBtn,
  .hero .secondaryBtn {
    min-height: 52px;
    flex: 1 1 160px;
  }
  .stats {
    margin-top: 32px;
  }
  .heroTrustMarks {
    margin-top: 26px;
    gap: 16px 20px;
  }
  .heroTrustMarks img { max-width: 112px; max-height: 36px; }
  .heroTrustMarks img:nth-child(2) { max-height: 42px; }
  .heroTrustMarks img:nth-child(3) { max-width: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroIdentityWord { animation: none; }
}


/* Hero refinement — compact viewport fit + reference-like heading hierarchy */
.hero {
  min-height: clamp(690px, 90svh, 810px) !important;
}
.heroShell {
  min-height: inherit !important;
}
.heroContent {
  min-height: inherit !important;
  padding: 118px 10px 58px !important;
  align-items: center !important;
}
.contentColumn {
  width: min(940px, 72vw) !important;
}
.heroHeadline {
  max-width: 1040px !important;
  font-size: clamp(54px, 5.35vw, 86px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
.heroHeadlineLine { color: #FFFFFF !important; }
.hero .heroHeadlineAccent { color: #57D97D !important; }
.heroCopy {
  margin-top: 22px !important;
  max-width: 760px !important;
  font-size: clamp(16px, 1.18vw, 19px) !important;
  line-height: 1.52 !important;
}
.heroIdentity {
  margin-top: 24px !important;
  min-height: 38px !important;
  gap: 8px !important;
  font-size: clamp(22px, 1.9vw, 30px) !important;
}
.heroIdentityWord { color: #57D97D !important; }
.heroActions { margin-top: 24px !important; }
.stats { margin-top: 32px !important; }
.heroTrustMarks { bottom: 18px !important; }

@media (max-width: 1200px) {
  .hero { min-height: clamp(690px, 92svh, 780px) !important; }
  .heroContent { padding: 112px 8px 52px !important; }
  .contentColumn { width: min(820px, 75vw) !important; }
  .heroHeadline { font-size: clamp(50px, 5.35vw, 70px) !important; }
}

@media (max-width: 980px) {
  .hero { min-height: auto !important; }
  .heroShell { min-height: auto !important; }
  .heroContent {
    min-height: 0 !important;
    padding: 108px 6px 34px !important;
    display: block !important;
  }
  .contentColumn { width: min(760px, 100%) !important; }
  .heroTrustMarks {
    position: static !important;
    margin-top: 26px !important;
    padding: 10px 0 0 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  .heroContent { padding: 94px 2px 24px !important; }
  .heroHeadline {
    font-size: clamp(38px, 10.8vw, 50px) !important;
    line-height: 1.01 !important;
  }
  .heroCopy { margin-top: 18px !important; font-size: 15px !important; }
  .heroIdentity { margin-top: 20px !important; font-size: 20px !important; }
  .heroActions { margin-top: 20px !important; }
  .stats { margin-top: 26px !important; }
}

/* Hero video: use the supplied footage without a dark/color overlay. */
.hero::after {
  display: none !important;
  background: none !important;
}

/* AI THAT DELIVERS — exact testimonial-card rotation only.
   The existing card geometry, colors, spacing and responsive layout remain unchanged. */
.aiAppsTestimonialStage,
.aiAppsPersonTextStage {
  display: grid;
  min-width: 0;
}

.aiAppsTestimonialSlide,
.aiAppsPersonTextSlide {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.aiAppsTestimonialSlide.is-active,
.aiAppsTestimonialSlide.is-outgoing,
.aiAppsPersonTextSlide.is-active,
.aiAppsPersonTextSlide.is-outgoing {
  visibility: visible;
}

.aiAppsTestimonialSlide.is-active,
.aiAppsPersonTextSlide.is-active {
  pointer-events: auto;
  z-index: 2;
}

.aiAppsTestimonialSlide.is-outgoing,
.aiAppsPersonTextSlide.is-outgoing {
  z-index: 1;
}

.aiAppsTestimonialSlide blockquote,
.aiAppsPersonTextSlide {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  will-change: opacity, transform;
}

.aiAppsTestimonialSlide.is-active blockquote,
.aiAppsPersonTextSlide.is-active {
  animation: aiAppsTestimonialCopyIn 500ms cubic-bezier(.22, 1, .36, 1) 70ms both;
}

.aiAppsTestimonialSlide.is-outgoing blockquote,
.aiAppsPersonTextSlide.is-outgoing {
  animation: aiAppsTestimonialCopyOut 320ms ease both;
}

/* All portraits share the exact existing avatar wrapper, so previous and next
   overlap in one fixed circle instead of moving the footer or card. */
.aiAppsAvatarMotionLayer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(34px, 0, 0) scale(.93);
  transform-origin: center;
  filter: blur(2px);
  will-change: opacity, transform, filter;
}

.aiAppsAvatarMotionLayer.is-active,
.aiAppsAvatarMotionLayer.is-outgoing {
  visibility: visible;
}

.aiAppsAvatarMotionLayer.is-active {
  z-index: 2;
  animation: aiAppsAvatarIn 760ms cubic-bezier(.22, 1, .36, 1) both;
}

.aiAppsAvatarMotionLayer.is-outgoing {
  z-index: 1;
  animation: aiAppsAvatarOut 760ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes aiAppsTestimonialCopyIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aiAppsTestimonialCopyOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@keyframes aiAppsAvatarIn {
  0% {
    opacity: .2;
    transform: translate3d(34px, 0, 0) scale(.93);
    filter: blur(2px);
  }
  48% {
    opacity: .82;
    transform: translate3d(9px, 0, 0) scale(.975);
    filter: blur(.6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes aiAppsAvatarOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  48% {
    opacity: .55;
    transform: translate3d(-14px, 0, 0) scale(.95);
    filter: blur(1.5px);
  }
  100% {
    opacity: .34;
    transform: translate3d(-26px, 0, 0) scale(.89);
    filter: blur(3px);
  }
}

@media (max-width: 860px) {
  .aiAppsAvatarMotionLayer {
    transform: translate3d(28px, 0, 0) scale(.95);
  }

  @keyframes aiAppsAvatarIn {
    0% { opacity: .24; transform: translate3d(28px, 0, 0) scale(.95); filter: blur(2px); }
    50% { opacity: .86; transform: translate3d(7px, 0, 0) scale(.98); filter: blur(.5px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }

  @keyframes aiAppsAvatarOut {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    50% { opacity: .58; transform: translate3d(-11px, 0, 0) scale(.96); filter: blur(1.25px); }
    100% { opacity: .36; transform: translate3d(-21px, 0, 0) scale(.92); filter: blur(2.5px); }
  }
}

@media (max-width: 640px) {
  .aiAppsTestimonialSlide blockquote,
  .aiAppsPersonTextSlide {
    transform: translate3d(0, 4px, 0);
  }

  .aiAppsAvatarMotionLayer {
    transform: translate3d(14px, 0, 0) scale(.97);
    filter: blur(1px);
  }

  @keyframes aiAppsAvatarIn {
    0% { opacity: .34; transform: translate3d(14px, 0, 0) scale(.97); filter: blur(1px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }

  @keyframes aiAppsAvatarOut {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    100% { opacity: .4; transform: translate3d(-12px, 0, 0) scale(.95); filter: blur(1.5px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiAppsTestimonialSlide blockquote,
  .aiAppsPersonTextSlide,
  .aiAppsAvatarMotionLayer,
  .aiAppsAvatarMotionLayer.is-active,
  .aiAppsAvatarMotionLayer.is-outgoing {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .aiAppsTestimonialSlide.is-active blockquote,
  .aiAppsPersonTextSlide.is-active,
  .aiAppsAvatarMotionLayer.is-active {
    opacity: 1 !important;
    transition: opacity 220ms ease !important;
  }

  .aiAppsTestimonialSlide.is-outgoing blockquote,
  .aiAppsPersonTextSlide.is-outgoing,
  .aiAppsAvatarMotionLayer.is-outgoing {
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
  }
}


/* Scoped homepage refinements. */
.hero { background: var(--dark); }
.hero .stat strong { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; letter-spacing: -.03em; }
.hero .trustBubble { box-shadow: none; border-color: var(--border-on-dark); }
.hero .trustBubble p { margin: 0; }
.hero .trustBubble strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.hero .trustBubble small { font-size: 13px; line-height: 1.5; }
.whoSection .whoConnectedGroupSingleImage { height: auto; min-height: 360px; border: 1.15px solid var(--border-strong); border-radius: 27px; box-shadow: none; }
.whoSection .whoConnectedGroupSingleImage .whoImageTall { position: relative; height: 100%; min-height: 360px; border: 0; }
.whoSection .whoConnectedGroupSingleImage .whoImageTall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.whoSection .whoConnectedGroupSingleImage .whoCard { height: auto; border: 0; border-left: 1.15px solid var(--border-strong); padding: clamp(22px, 2vw, 30px); }
.whoSection .whoConnectedGroupSingleImage .whoCopy { color: var(--text-secondary); font-size: 16px; line-height: 1.5; max-width: 62ch; margin-top: 14px; }
.whoSection .whoConnectedGroupSingleImage .whoCopy p + p { margin-top: 10px; }
.whoSection .whoConnectedGroupSingleImage .whoCta { width: fit-content; min-height: 48px; gap: 22px; margin-top: 16px; padding: 7px 12px 7px 20px; border: 1px solid var(--border); font-size: 15px; }
.whoSection .whoCta img { width: 32px; height: 32px; }
.deliveryClarity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 14px; margin: 16px 0 0; border-top: 1px solid var(--divider); }
.deliveryClarity dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--primary); }
.deliveryClarity dd { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.costSection .costConnectedGroup, .aiAppsSection .aiAppsCaseCard, .testimonialsSection .testimonialCard, .modernizationSection .modernizationPhase--outline { border: 1px solid var(--border); box-shadow: none; }
.costSection .costConnectedGroup, .testimonialsSection .testimonialCard { border-radius: 18px; }
.aiAppsSection .aiAppsCaseCard { border-radius: 18px; background: var(--surface); }
.testimonialsSection .testimonialCard--accent { border-color: transparent; }
.testimonialsSection .testimonialNav { border: 1px solid var(--border); box-shadow: 0 3px 12px var(--divider); }
.developmentProcessSection .developmentProcessBadge { border: 1px solid var(--border); background: var(--surface); }
.developmentProcessSection .developmentProcessCard { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.developmentProcessSection .developmentProcessNumber { border: 0; }
.featuredCaseStudiesRefSection .featuredCaseStudyRefCard, .finalCtaSection .finalCtaCard { box-shadow: none; }
.whoSection, .developmentProcessSection { scroll-margin-top: 32px; }
@media (hover: hover) { .whoSection .whoConnectedGroupSingleImage .whoCta:hover { background: var(--surface); border-color: var(--accent); } }
@media (max-width: 1080px) {
  .whoSection .whoConnectedGroupSingleImage { min-height: 360px; }
  .whoSection .whoConnectedGroupSingleImage .whoImageTall { min-height: 360px; }
  .whoSection .whoConnectedGroupSingleImage .whoCard { padding: 24px; }
  .deliveryClarity { gap: 12px; }
}
@media (max-width: 680px) {
  .whoSection .whoConnectedGroupSingleImage { min-height: 0; border-radius: 16px; }
  .whoSection .whoConnectedGroupSingleImage .whoImageTall { min-height: 0; height: 210px; }
  .whoSection .whoConnectedGroupSingleImage .whoCard { border-left: 0; border-top: 1.15px solid var(--border-strong); padding: 22px 20px; }
  .whoSection .whoConnectedGroupSingleImage .whoCopy { font-size: 16px; line-height: 1.6; }
  .whoSection .whoConnectedGroupSingleImage .whoCta { font-size: 14px; gap: 12px; }
  .deliveryClarity { grid-template-columns: 1fr; gap: 15px; }
  .deliveryClarity dd { margin-top: 4px; }
}

/* Reference video: service groups cover the previous row beneath a pinned heading. */
.aiFirstServicesSection { overflow: visible; position: relative; isolation: isolate; }
.aiFirstServicesSection .aiFirstServicesHeader {
  position: sticky; top: var(--services-pin-top, 24px); z-index: 10; max-width: none;
  background: var(--surface); padding-bottom: 20px;
  box-shadow: 0 -26px 0 0 var(--surface);
}
.aiFirstServicesSection .aiFirstServicesGroups { margin-top: 14px; gap: 60px; }
.aiFirstServicesSection .aiFirstServiceGroup {
  position: sticky; top: calc(var(--services-pin-top, 24px) + var(--services-header-height, 240px));
  background: var(--surface); padding-top: 8px; padding-bottom: 28px;
}
.aiFirstServicesSection .aiFirstServiceGroup:nth-child(1) { z-index: 1; }
.aiFirstServicesSection .aiFirstServiceGroup:nth-child(2) { z-index: 2; }
.aiFirstServicesSection .aiFirstServiceGroup:nth-child(3) { z-index: 3; }
.aiFirstServicesSection .aiFirstServiceGroup:nth-child(4) { z-index: 4; }

/* Static color hierarchy only. Geometry and existing motion are unchanged. */
body, .homeSections { background: var(--neutral-background); }
.howAiSection, .modernizationSection, .postLaunchSection,
.testimonialsSection, .toolsSection { background: var(--surface-soft); }
.aiAppsSection { background: var(--surface); }
.costSection { background: var(--surface-accent); }
.finalCtaSection { background: var(--surface); }
.whoTitle, .whoTitle span, .aiFirstServicesTitle, .costHeadline, .costHeadline span,
.costHeadline strong, .howAiTitle, .howAiTitle span, .aiFirstTitle, .aiFirstBlack,
.aiFirstAccent, .industryHeading, .developmentProcessTitle,
.developmentProcessTitleBlack, .developmentProcessTitleAccent, .modernizationTitle,
.postLaunchTitle, .postLaunchTitle span, .aiAppsTitleBlack, .aiAppsTitleAccent,
.testimonialsTitle, .testimonialsTitle span, .toolsTitleBlack, .toolsTitleAccent,
.insightsTitle { color: var(--text-primary); }
.whoSection .whoConnectedGroupSingleImage,
.whoSection .whoConnectedGroupSingleImage .whoCard { border-color: var(--border-strong); }
.aiFirstServiceCard, .developmentProcessSection .developmentProcessCard,
.costSection .costConnectedGroup, .aiAppsSection .aiAppsCaseCard,
.testimonialsSection .testimonialCard { border-color: var(--border); }
.aiFirstServiceCard:hover { border-color: var(--primary); background: var(--surface-accent); }
.aiFirstServicePill { background: #002B62; color: var(--text-on-dark); }
.aiFirstServiceCard p, .whoSection .whoConnectedGroupSingleImage .whoCopy,
.costSection .costCard p, .developmentProcessSection .developmentProcessCard p,
.aiAppsSection .aiAppsResultList li, .testimonialsSection .testimonialQuote,
.aiFirstSection .aiFirstDescription, .aiFirstSection .aiFirstFooterText,
.postLaunchSection .postLaunchIntro, .modernizationSection .modernizationIntro,
.toolsSection .toolsDescription, .deliveryClarity dd {
  color: var(--text-secondary);
}
.aiFirstServiceIcon, .aiFirstServiceArrow, .developmentProcessNumber { color: var(--primary); }
.howAiPanel--before { background: var(--surface); }
.howAiPanel--after { background: #57D97D; }
.aiAppsTestimonialCard { background: var(--surface-accent); }
.testimonialCard--accent { background: var(--surface-accent); }
.testimonialsSection .testimonialCard--accent { border-color: var(--border); }
.postLaunchPill--strong, .modernizationPhase--bright { background: var(--accent-soft); border-color: var(--border); color: var(--text-primary); }
.modernizationPhase--pale { background: var(--surface); }
.modernizationPhase--soft { background: var(--surface-accent); }
.modernizationPhase--deep { background: var(--primary); color: var(--text-on-dark); }
.costCta, .aiAppsCaseBtn, .insightsViewAll, .aiFirstMoreBtn {
  background: var(--primary); color: var(--text-on-dark);
}
.whoSection .whoConnectedGroupSingleImage .whoCta, .insightsReadMore {
  background: var(--surface); color: var(--primary); border-color: var(--border-strong);
}
.insightsCategory, .aiAppsTestimonialPill { background: var(--accent-soft); color: var(--primary); }
.insightsCtaPanel { background: linear-gradient(120deg, var(--surface), var(--surface-accent)); }
.problemProductCard { background: var(--surface); }
.problemProductText { color: var(--text-on-dark-secondary) !important; }
.hero .heroCopy, .hero .stat small, .hero .trustBubble p,
.hero .partnerIntro { color: var(--text-on-dark-secondary); }
.navbar, .partnerBar, .hero .trustBubble { border-color: var(--border-on-dark); }
.featuredCaseStudiesRefSection { background: var(--case-surface); }

/* Scroll-driven dark-to-light interlude; native wheel and touch scrolling. */
.nextMoveSection { --bloom-scale: 3.4; --statement-shift: 0px; --statement-scale: 1; --light-copy: 0; --dark-copy: 1; --cta-reveal: 1; position: relative; isolation: isolate; background: var(--dark); color: var(--text-primary); }
.nextMoveSection[data-motion="on"] { height: calc(max(600px, 100svh) + clamp(420px, 65svh, 680px)); }
.nextMoveStage { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; background: var(--dark); }
.nextMoveBloom { position: absolute; width: max(70vw, 700px); height: max(56vw, 600px); left: 50%; top: 56%; border-radius: 50%; background: var(--surface); box-shadow: 0 0 48px 28px var(--surface); transform: translate(-50%, -50%) scale(var(--bloom-scale)); pointer-events: none; z-index: -1; }
.nextMoveInner { width: min(1400px, calc(100% - 96px)); height: 100%; margin-inline: auto; padding-block: 38px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; }
.nextMoveTopline { display: flex; justify-content: space-between; gap: 24px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--text-secondary); }
.nextMoveTopline span:first-child { color: var(--primary); }
.nextMoveStatement { position: relative; text-align: center; transform: translateY(var(--statement-shift)) scale(var(--statement-scale)); }
.nextMoveStatement h2, .nextMoveLightCopy { margin: 0; font-size: clamp(38px, 4.5vw, 72px); font-weight: 500; letter-spacing: -.052em; line-height: 1.2; }
.nextMoveStatement h2 { opacity: var(--dark-copy); }
.nextMoveLightCopy { position: absolute; inset: 0; opacity: var(--light-copy); pointer-events: none; }
.nextMoveLead { display: block; color: var(--text-secondary); }
.nextMoveBrand { display: block; margin-top: 14px; font-weight: 600; color: var(--text-primary); }
.nextMoveLightCopy .nextMoveLead { color: var(--text-on-dark-secondary); }
.nextMoveLightCopy .nextMoveBrand { color: var(--accent); }
.nextMoveBottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.nextMoveBottom > p { margin: 0; font-size: clamp(23px, 2.5vw, 36px); line-height: 1.25; letter-spacing: -.04em; }
.nextMoveBottom, .nextMoveTopline { opacity: var(--cta-reveal); }
.nextMoveAction { display: grid; justify-items: end; gap: 16px; }
.nextMoveAction > span { color: var(--text-secondary); font-size: 14px; }
.nextMoveButton { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 10px 12px 10px 22px; border-radius: 999px; background: var(--dark); color: var(--surface); font-size: 14px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.nextMoveButton svg { width: 32px; height: 32px; flex-shrink: 0; padding: 6px; border-radius: 50%; background: var(--accent); color: var(--text-primary); transition: transform .2s ease; }
.nextMoveButton:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }
/* Keyboard focus must never land on a visually hidden action. */
.nextMoveSection:has(.nextMoveButton:focus-visible) { --bloom-scale: 3.4 !important; --light-copy: 0 !important; --dark-copy: 1 !important; --cta-reveal: 1 !important; }
@media (hover: hover) { .nextMoveButton:hover { background: var(--primary); } .nextMoveButton:hover svg { transform: rotate(-35deg); } }
@media (max-width: 767px) {
  .nextMoveSection[data-motion="on"] { height: calc(max(600px, 100svh) + 360px); }
  .nextMoveStage { height: 100svh; min-height: 600px; }
  .nextMoveInner { width: calc(100% - 40px); padding-block: 28px 36px; gap: 30px; }
  .nextMoveTopline { font-size: 11px; letter-spacing: .055em; gap: 12px; }
  .nextMoveTopline span:last-child { text-align: right; }
  .nextMoveStatement h2, .nextMoveLightCopy { font-size: clamp(29px, 6.7vw, 49px); letter-spacing: -.045em; line-height: 1.25; }
  .nextMoveBrand { margin-top: 18px; }
  .nextMoveBottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .nextMoveBottom > p { font-size: 25px; }
  .nextMoveAction { justify-items: start; width: 100%; gap: 12px; }
  .nextMoveButton { width: 100%; max-width: 380px; }
}
@media (max-height: 600px) {
  .nextMoveSection[data-motion="on"] { height: auto; }
  .nextMoveStage { position: relative; height: auto; min-height: 0; }
  .nextMoveInner { height: auto; gap: 44px; padding-block: 28px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .nextMoveSection, .nextMoveSection[data-motion="on"] { height: auto; }
  .nextMoveStage { position: relative; height: auto; min-height: 0; background: var(--surface); }
  .nextMoveInner { height: auto; gap: 64px; padding-block: 32px 40px; }
  .nextMoveBloom, .nextMoveLightCopy { display: none; }
  .nextMoveStatement { transform: none; }
  .nextMoveStatement h2, .nextMoveTopline, .nextMoveBottom { opacity: 1; }
  .nextMoveButton, .nextMoveButton svg { transition: none; }
}

.nextMoveLightCopy .nextMoveBrand { color: var(--text-on-dark); }

.homeSections > .impactStatsSection {
  margin-top: 0;
  padding: 42px 0 0;
  background: var(--surface);
  color: var(--text-on-dark);
}

.impactStatsPanel {
  position: relative;
  isolation: isolate;
  width: min(1758px, calc(100% - 72px));
  min-height: 270px;
  margin-inline: auto;
  overflow: hidden;
  border-top: 6px solid var(--accent);
  border-radius: 46px;
  background: var(--primary);
  box-shadow: 0 22px 32px rgb(var(--dark-rgb) / .09);
}

.impactStatsFoliage {
  position: absolute;
  z-index: 0;
  bottom: -20px;
  width: 330px;
  height: 220px;
  object-fit: contain;
  pointer-events: none;
  opacity: .57;
}

.impactStatsFoliageLeft { left: -36px; }
.impactStatsFoliageRight { right: -36px; transform: scaleX(-1); }

.impactStatsList {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-height: 264px;
  margin: 0;
  padding: 34px 60px;
}

.impactStatsItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 154px;
  text-align: center;
}

.impactStatsItem + .impactStatsItem::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 154px;
  background: rgb(var(--white-rgb) / .28);
  content: "";
  transform: translateY(-50%);
}

.impactStatsItem dd {
  order: -1;
  margin: 0;
  color: var(--surface);
  font-size: clamp(58px, 5.25vw, 94px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.impactStatsItem dt {
  max-width: 290px;
  margin-top: 18px;
  color: var(--surface);
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .impactStatsPanel { width: calc(100% - 52px); }
  .impactStatsList { padding-inline: 25px; }
  .impactStatsItem dd { font-size: clamp(45px, 5vw, 70px); }
  .impactStatsItem dt { font-size: 13px; letter-spacing: .12em; }
}

@media (max-width: 900px) {
  .homeSections > .impactStatsSection { padding-top: 30px; }
  .impactStatsPanel { min-height: 0; border-radius: 34px; }
  .impactStatsList { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 25px 18px; }
  .impactStatsItem { min-height: 150px; }
  .impactStatsItem:nth-child(3)::before { display: none; }
  .impactStatsItem:nth-child(n + 3) { border-top: 1px solid rgb(var(--white-rgb) / .24); }
  .impactStatsItem + .impactStatsItem::before { height: 112px; }
  .impactStatsFoliage { width: 250px; height: 180px; opacity: .32; }
}

@media (max-width: 600px) {
  .homeSections > .impactStatsSection { padding-top: 18px; }
  .impactStatsPanel { width: calc(100% - 28px); border-top-width: 4px; border-radius: 25px; }
  .impactStatsList { padding: 16px 8px; }
  .impactStatsItem { min-height: 126px; padding-inline: 5px; }
  .impactStatsItem dd { font-size: clamp(30px, 7.6vw, 48px); letter-spacing: -.055em; }
  .impactStatsItem dt { margin-top: 11px; font-size: clamp(10px, 2.7vw, 12px); line-height: 1.4; letter-spacing: .09em; }
  .impactStatsItem + .impactStatsItem::before { height: 94px; }
  .impactStatsFoliage { width: 180px; height: 150px; opacity: .25; }
  .impactStatsFoliageLeft { left: -65px; }
  .impactStatsFoliageRight { right: -65px; }
}

/* Business counters use the same approved panel, grid and divider styles on every screen. */
.impactStatsCounterList .impactStatsItem dd {
  font-variant-numeric: tabular-nums;
}

.homeSections > .aiSignalSection,
.homeSections > .amazingTeamSection { margin-top: clamp(32px, 4vw, 64px); }

.aiSignalSection { padding-inline: clamp(14px, 2.5vw, 36px); }
.aiSignalPanel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: min(1500px, 100%);
  min-height: 520px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 32px;
  background: #00235A url('/images/ai-neural-wallpaper.webp') 50% 50% / cover no-repeat;
  color: #fff;
}
.aiSignalPanel::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, #00235A 0%, rgb(0 35 90 / .92) 28%, rgb(0 35 90 / .26) 75%);
  content: "";
}
.aiSignalTexture {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .16;
  background-image: radial-gradient(#14F595 1px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 52%);
  pointer-events: none;
}
.aiSignalContent { position: relative; z-index: 1; max-width: 760px; padding: 74px clamp(32px, 6vw, 94px); }
.aiSignalEyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px; font-size: 12px; font-weight: 700; letter-spacing: .18em;
}
.aiSignalEyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #14F595; }
.aiSignalContent h2 {
  margin: 0; max-width: 680px; color: #fff;
  font-size: clamp(44px, 4.65vw, 76px); line-height: 1.06; letter-spacing: -.055em;
}
.aiSignalContent h2 span { color: #14F595; }
.aiSignalDescription { max-width: 540px; margin: 24px 0 30px; color: rgb(255 255 255 / .84); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; }
.aiSignalLink {
  display: inline-flex; align-items: center; gap: 24px; min-height: 54px;
  padding: 10px 12px 10px 22px; border: 1px solid rgb(255 255 255 / .55);
  border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.aiSignalLink svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #14F595; color: #00235A; transition: transform .25s ease; }
.aiSignalLink:hover { border-color: #14F595; background: #14F595; color: #00235A; }
.aiSignalLink:hover svg { transform: translateX(3px); background: #00235A; color: #14F595; }
.aiSignalLink:focus-visible, .amazingTeamLink:focus-visible { outline: 3px solid #14F595; outline-offset: 4px; }
.aiSignalCaption { position: absolute; z-index: 1; right: 32px; bottom: 26px; color: rgb(255 255 255 / .65); font-size: 10px; font-weight: 700; letter-spacing: .2em; }

.amazingTeamSection { overflow: hidden; background: #fff; color: #00235A; }
.amazingTeamInner { width: min(1600px, calc(100% - 48px)); margin-inline: auto; padding: 62px 0 20px; }
.amazingTeamIntro { max-width: 780px; margin-inline: auto; text-align: center; }
.amazingTeamIntro h2 { margin: 0; color: #00235A; font-size: clamp(32px, 2.3vw, 42px); line-height: 1.15; letter-spacing: -.045em; }
.amazingTeamIntro h2 span { color: color-mix(in srgb, #14F595 48%, #00235A); }
.amazingTeamIntro > p { max-width: 720px; margin: 28px auto 40px; color: #525862; font-size: clamp(16px, 1.13vw, 19px); line-height: 1.55; }
.amazingTeamLink {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 10px 30px; border-radius: 9px;
  background: #14F595; color: #00235A; font-size: 16px; font-weight: 700;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.amazingTeamLink:hover { background: #00235A; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgb(0 35 90 / .12); }
.amazingTeamPeople { display: flex; align-items: end; justify-content: center; gap: clamp(12px, 2vw, 34px); max-width: 1450px; min-height: 390px; margin: 58px auto 0; }
.amazingTeamPerson { position: relative; flex: 0 1 15%; height: 245px; min-width: 0; }
.amazingTeamPerson2, .amazingTeamPerson4 { flex-basis: 18%; height: 305px; }
.amazingTeamPerson3 { flex-basis: 25%; height: 390px; }
.amazingTeamPhoto { position: absolute; inset: 0 0 25px; overflow: visible; }
.amazingTeamPhoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: grayscale(1); }
.amazingTeamChevron {
  position: absolute; right: 0; bottom: 0; left: 0; height: 30%;
  background: #14F595;
  clip-path: polygon(0 8%, 50% 54%, 100% 8%, 100% 45%, 50% 100%, 0 45%);
}
.amazingTeamPerson3 .amazingTeamChevron { height: 28%; }

@media (prefers-reduced-motion: no-preference) {
  .homeRevealReady .aiSignalContent, .homeRevealReady .amazingTeamIntro { opacity: 0; transform: translateY(22px); }
  .homeRevealReady .amazingTeamPerson { opacity: 0; transform: translateY(28px); }
  .homeRevealReady.homeRevealVisible .aiSignalContent,
  .homeRevealReady.homeRevealVisible .amazingTeamIntro { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
  .homeRevealReady.homeRevealVisible .amazingTeamPerson { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--portrait-index, 0) * 75ms); }
  .amazingTeamPerson1 { --portrait-index: 0; }
  .amazingTeamPerson2 { --portrait-index: 1; }
  .amazingTeamPerson3 { --portrait-index: 2; }
  .amazingTeamPerson4 { --portrait-index: 3; }
  .amazingTeamPerson5 { --portrait-index: 4; }
}

@media (max-width: 1000px) {
  .aiSignalPanel { min-height: 470px; background-position: 56% center; }
  .aiSignalContent { max-width: 650px; }
  .amazingTeamPeople { min-height: 320px; gap: 8px; }
  .amazingTeamPerson { height: 210px; }
  .amazingTeamPerson2, .amazingTeamPerson4 { height: 265px; }
  .amazingTeamPerson3 { height: 320px; }
}
@media (max-width: 700px) {
  .aiSignalPanel { min-height: 500px; border-radius: 24px; background-position: 64% center; }
  .aiSignalPanel::before { background: linear-gradient(90deg, rgb(0 35 90 / .97), rgb(0 35 90 / .75) 70%, rgb(0 35 90 / .52)); }
  .aiSignalContent { padding: 52px 28px 72px; }
  .aiSignalContent h2 { font-size: clamp(38px, 9vw, 54px); }
  .aiSignalCaption { right: auto; left: 28px; bottom: 20px; font-size: 8px; }
  .amazingTeamInner { width: min(100% - 28px, 620px); padding-top: 54px; padding-bottom: 24px; }
  .amazingTeamIntro > p { margin-block: 18px 24px; }
  .amazingTeamPeople { min-height: 280px; margin-top: 28px; gap: 4px; }
  .amazingTeamPerson1, .amazingTeamPerson4 { flex: 0 1 29%; height: 215px; }
  .amazingTeamPerson3 { flex: 0 1 40%; height: 275px; }
  .amazingTeamPerson2, .amazingTeamPerson5 { display: none; }
}
@media (max-width: 380px) {
  .aiSignalPanel { min-height: 535px; }
  .aiSignalContent { padding-inline: 22px; }
  .amazingTeamPeople { min-height: 235px; }
  .amazingTeamPerson1, .amazingTeamPerson4 { height: 178px; }
  .amazingTeamPerson3 { height: 235px; }
}

/* =========================================================
   HOME PAGE — STEP 1: TYPOGRAPHY, HEADINGS & TEXT CLEANUP
   Scope only: type scale, weight, line-height, text color,
   wrapping and readability. No layout/media/animation changes.
   ========================================================= */

/* ---------- Shared readable type system ---------- */
.hero,
.homeSections {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.homeSections h2,
.homeSections h3,
.homeSections p,
.homeSections li {
  overflow-wrap: anywhere;
}

/* Light surfaces: dark, readable typography. */
.whoSection,
.aiFirstServicesSection,
.costSection,
.howAiSection,
.aiFirstSection,
.industrySection,
.problemProductSection,
.developmentProcessSection,
.modernizationSection,
.postLaunchSection,
.aiAppsSection,
.amazingTeamSection,
.featuredCaseStudiesRefSection,
.testimonialsSection,
.toolsSection,
.insightsSection,
.finalCtaSection {
  color: var(--text-primary);
}

.whoSection p,
.aiFirstServicesSection p,
.costSection p,
.howAiSection p,
.aiFirstSection p,
.industrySection p,
.problemProductSection p,
.developmentProcessSection p,
.modernizationSection p,
.postLaunchSection p,
.aiAppsSection p,
.amazingTeamSection p,
.featuredCaseStudiesRefSection p,
.testimonialsSection p,
.toolsSection p,
.insightsSection p {
  color: var(--text-secondary);
}

/* ---------- Hero ---------- */
.hero .eyebrow {
  color: rgb(255 255 255 / 0.86);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.hero .heroHeadline {
  color: var(--text-on-dark);
  font-size: clamp(42px, 5.2vw, 78px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.045em;
  text-transform: none;
}

.hero .heroHeadlineLine {
  color: inherit;
}

.hero .heroHeadlineAccent {
  color: var(--accent);
}

.hero .heroCopy {
  color: rgb(255 255 255 / 0.84);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.65;
}

.hero .heroIdentityPrefix {
  color: rgb(255 255 255 / 0.82);
}

.hero .heroIdentityWord {
  color: var(--text-on-dark);
}

.hero .stat strong {
  color: var(--text-on-dark);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 700;
  line-height: 1.15;
}

.hero .stat small {
  color: rgb(255 255 255 / 0.72);
  font-size: 11px;
  line-height: 1.45;
}

/* ---------- Impact stats ---------- */
.impactStatsItem dt {
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.impactStatsItem dd {
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---------- Who we are ---------- */
.whoKicker,
.aiFirstServicesKicker,
.modernizationEyebrow,
.problemProductEyebrow,
.aiSignalEyebrow,
.developmentProcessBadge,
.postLaunchKicker {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.whoTitle {
  color: var(--text-primary);
  font-size: clamp(34px, 3.7vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.whoTitle span {
  color: var(--text-primary);
}

.whoCopy p {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

/* ---------- Services ---------- */
.aiFirstServicesKicker {
  color: var(--text-secondary);
}

.aiFirstServicesTitle {
  color: var(--text-primary);
  font-size: clamp(46px, 5.4vw, 76px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.aiFirstServicesSubhead {
  color: var(--text-primary);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.aiFirstServicesSubhead strong {
  color: var(--text-primary);
  font-weight: 700;
}

.aiFirstServicesLead {
  color: var(--text-secondary);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

.aiFirstServiceCard h3 {
  color: var(--text-primary);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.aiFirstServiceCard p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Dark AI statement ---------- */
.aiSignalPanel,
.aiSignalPanel p,
.aiSignalPanel h2 {
  color: var(--text-on-dark);
}

.aiSignalContent h2 {
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.aiSignalContent h2 span {
  color: var(--accent);
}

.aiSignalDescription {
  color: rgb(255 255 255 / 0.84) !important;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

/* ---------- Main display headings on light sections ---------- */
.costHeadline,
.howAiTitle,
.aiFirstTitle,
.industryHeading,
.problemProductTitle,
.developmentProcessTitle,
.modernizationTitle,
.postLaunchTitle,
.aiAppsTitle,
.testimonialsTitle,
.toolsTitle,
.insightsTitle {
  color: var(--text-primary);
  font-size: clamp(40px, 4.7vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-transform: none;
  white-space: normal;
  text-wrap: balance;
}

.costHeadline span,
.costHeadline strong,
.howAiTitle span,
.aiFirstBlack,
.aiAppsTitleBlack,
.toolsTitleBlack {
  color: var(--text-primary);
}

/* Green stays a selective accent, never long body copy. */
.howAiTitle span,
.aiFirstAccent,
.developmentProcessTitleAccent {
  color: var(--accent);
}

.costHeadline strong,
.developmentProcessTitleBlack,
.developmentProcessTitleAccent {
  font-weight: 700;
}

.howAiSubtitle,
.aiFirstSubtitle,
.testimonialsSubtitle,
.toolsSubtitle,
.insightsSubtitle {
  color: var(--text-primary);
  font-size: clamp(17px, 1.65vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.howAiSubtitle strong,
.aiFirstSubtitle strong,
.testimonialsSubtitle strong,
.toolsSubtitle strong,
.insightsSubtitle strong {
  font-weight: 700;
}

/* ---------- Engagement models ---------- */
.industryCopy h3 {
  color: var(--text-primary);
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.industryCopy p,
.industryCopy li {
  color: var(--text-secondary);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
}

/* ---------- Problem to product / development process ---------- */
.problemProductIntro > p:last-of-type,
.developmentProcessSubtitle,
.modernizationIntro,
.postLaunchIntro,
.toolsDescription {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

.problemProductCard h3,
.developmentProcessCard h3 {
  color: var(--text-primary);
  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.developmentProcessCard p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Post-launch ---------- */
.postLaunchKicker {
  color: var(--text-primary);
}

.postLaunchPill {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Case study ---------- */
.aiAppsIntro h3 {
  color: var(--text-primary);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.aiAppsDelivered,
.aiAppsResultList,
.aiAppsTestimonialCard blockquote {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
}

/* ---------- Team ---------- */
.amazingTeamIntro h2 {
  color: var(--text-primary);
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.amazingTeamIntro h2 span {
  color: var(--accent);
}

.amazingTeamIntro > p {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
}

/* ---------- Featured case studies ---------- */
.featuredCaseStudiesRefTitle {
  color: var(--text-primary);
  font-size: clamp(34px, 3.7vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.featuredCaseStudyRefCard h3 {
  color: var(--text-primary);
  font-size: clamp(20px, 1.55vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.featuredCaseStudyRefCard p {
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ---------- Testimonials ---------- */
.testimonialQuote {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
}

.testimonialPerson h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.testimonialPerson p {
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Insights ---------- */
.insightsCard h3 {
  color: var(--text-primary);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.insightsCategory {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* ---------- Final CTA: dark card ---------- */
.finalCtaCard,
.finalCtaCard h2,
.finalCtaCard p {
  color: var(--text-on-dark);
}

.finalCtaTitle {
  font-size: clamp(34px, 3.7vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.finalCtaText {
  color: rgb(255 255 255 / 0.84) !important;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.6;
}

/* ---------- Responsive tightening ---------- */
@media (max-width: 1024px) {
  .hero .heroHeadline { font-size: clamp(40px, 6vw, 58px); }
  .aiFirstServicesTitle { font-size: clamp(42px, 7vw, 62px); }
  .costHeadline,
  .howAiTitle,
  .aiFirstTitle,
  .industryHeading,
  .problemProductTitle,
  .developmentProcessTitle,
  .modernizationTitle,
  .postLaunchTitle,
  .aiAppsTitle,
  .testimonialsTitle,
  .toolsTitle,
  .insightsTitle { font-size: clamp(38px, 6vw, 54px); }
}

@media (max-width: 767px) {
  .hero .eyebrow { font-size: 10px; letter-spacing: 0.06em; }
  .hero .heroHeadline { font-size: clamp(34px, 10vw, 44px); line-height: 1.08; }
  .hero .heroCopy { font-size: 15px; line-height: 1.6; }

  .whoTitle,
  .featuredCaseStudiesRefTitle,
  .amazingTeamIntro h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.12; }

  .aiFirstServicesTitle { font-size: clamp(40px, 12vw, 54px); line-height: 1; }
  .aiFirstServicesSubhead { font-size: clamp(18px, 5.8vw, 24px); }

  .aiSignalContent h2 { font-size: clamp(34px, 9.5vw, 46px); line-height: 1.1; }

  .costHeadline,
  .howAiTitle,
  .aiFirstTitle,
  .industryHeading,
  .problemProductTitle,
  .developmentProcessTitle,
  .modernizationTitle,
  .postLaunchTitle,
  .aiAppsTitle,
  .testimonialsTitle,
  .toolsTitle,
  .insightsTitle {
    font-size: clamp(34px, 9.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .howAiSubtitle,
  .aiFirstSubtitle,
  .testimonialsSubtitle,
  .toolsSubtitle,
  .insightsSubtitle { font-size: clamp(16px, 4.8vw, 20px); }

  .industryCopy h3 { font-size: clamp(22px, 6.4vw, 28px); }
  .industryCopy p,
  .industryCopy li { font-size: 14px; line-height: 1.55; }

  .finalCtaTitle { font-size: clamp(30px, 8vw, 40px); line-height: 1.12; }
}

@media (max-width: 420px) {
  .hero .heroHeadline { font-size: clamp(31px, 9.8vw, 38px); }
  .costHeadline,
  .howAiTitle,
  .aiFirstTitle,
  .industryHeading,
  .problemProductTitle,
  .developmentProcessTitle,
  .modernizationTitle,
  .postLaunchTitle,
  .aiAppsTitle,
  .testimonialsTitle,
  .toolsTitle,
  .insightsTitle { font-size: clamp(31px, 9vw, 38px); }
}

/* =========================================================
   HOME PAGE — STEP 2: SECTION SPACING, PADDING & ALIGNMENT
   Scope only: vertical rhythm, container padding, internal gaps
   and alignment. Step 1 typography is intentionally preserved.
   ========================================================= */

:root {
  --home-space-xs: clamp(12px, 1.2vw, 18px);
  --home-space-sm: clamp(24px, 2.8vw, 38px);
  --home-space-md: clamp(40px, 4.5vw, 64px);
  --home-space-lg: clamp(56px, 6vw, 84px);
  --home-gutter: clamp(20px, 3.8vw, 48px);
}

/* Remove the old stacked global gap so each section owns its rhythm. */
.homeSections {
  padding-top: 0;
  padding-bottom: 0;
}

.homeSections > section,
.homeSections > .aiSignalSection,
.homeSections > .amazingTeamSection,
.homeSections > .finalCtaSection {
  margin-top: 0;
}

/* 01 — Impact stats */
.homeSections > .impactStatsSection {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.4vw, 34px);
}

.impactStatsList {
  padding-block: clamp(26px, 2.6vw, 36px);
}

/* 02 — Who we are */
.whoSection {
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: clamp(48px, 5.2vw, 72px);
}

.whoConnectedGroup .whoCard {
  padding-block: clamp(24px, 2.4vw, 34px);
}

.whoConnectedGroup .whoTitle {
  margin-top: clamp(12px, 1.4vw, 18px);
}

.whoConnectedGroup .whoCopy {
  margin-top: clamp(12px, 1.3vw, 16px);
}

/* 03 — Services */
.aiFirstServicesInner {
  padding-top: clamp(54px, 5.6vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 76px);
}

.aiFirstServicesHeader {
  padding-bottom: clamp(14px, 1.6vw, 20px);
}

.aiFirstServicesGroups {
  margin-top: clamp(18px, 2.2vw, 28px) !important;
  gap: clamp(38px, 4.2vw, 56px) !important;
}

.aiFirstServicePill {
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.aiFirstServiceGroup {
  padding-bottom: clamp(22px, 2.4vw, 30px) !important;
}

/* 04 — AI signal */
.aiSignalSection {
  padding-top: clamp(12px, 1.8vw, 24px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.aiSignalContent {
  padding-block: clamp(52px, 5.8vw, 74px);
}

.aiSignalEyebrow {
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.aiSignalDescription {
  margin-top: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(22px, 2.3vw, 30px);
}

/* 05 — Cost / delivery */
.costSection {
  padding-top: clamp(50px, 5.2vw, 68px) !important;
  padding-bottom: clamp(56px, 5.8vw, 76px) !important;
}

.costCard {
  padding-block: clamp(42px, 4.4vw, 58px) !important;
}

.costStayLabel {
  margin-bottom: clamp(20px, 2.2vw, 28px);
}

.costCard p {
  margin-top: clamp(18px, 2vw, 24px);
}

.costCta {
  margin-top: clamp(20px, 2.1vw, 26px);
}

/* 06 — How AI transforms */
.howAiSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 76px);
}

.howAiSubtitle {
  margin-top: clamp(10px, 1.2vw, 14px);
}

.howAiCompareGrid {
  margin-top: clamp(38px, 4.4vw, 58px);
}

.aiTimeline {
  margin-top: clamp(36px, 4vw, 54px);
}

/* 07 — Make work flow: module section receives its own spacing below. */

/* 08 — AI-first industries */
.aiFirstSection {
  padding-top: clamp(50px, 5.2vw, 70px);
  padding-bottom: clamp(54px, 5.6vw, 74px);
}

.aiFirstHeader {
  margin-bottom: clamp(26px, 3vw, 38px);
}

.aiFirstDescription {
  margin-top: clamp(10px, 1.3vw, 16px);
}

.aiFirstGrid {
  row-gap: clamp(24px, 3vw, 36px);
}

/* 09 — Engagement models */
.industrySection {
  padding-top: clamp(50px, 5.2vw, 70px);
  padding-bottom: clamp(58px, 6vw, 80px);
}

.industryTabsWrap {
  margin-top: clamp(34px, 4vw, 52px);
}

.industryPanel {
  padding-block: clamp(26px, 3vw, 36px);
}

.industryCopy p {
  margin-top: clamp(10px, 1.2vw, 14px);
}

.industryCopy ul {
  margin-top: clamp(14px, 1.7vw, 20px);
}

/* 10 — Problem to product */
.problemProductSection {
  margin-top: clamp(36px, 4.5vw, 62px);
  margin-bottom: clamp(38px, 4.6vw, 64px);
  padding-top: clamp(46px, 5vw, 64px);
  padding-bottom: clamp(46px, 5vw, 64px);
}

.problemProductEyebrow {
  margin-bottom: clamp(20px, 2.3vw, 28px);
}

.problemProductText {
  margin-top: clamp(16px, 1.8vw, 22px);
}

.problemProductCta {
  margin-top: clamp(24px, 2.8vw, 32px);
}

/* 11 — Development process */
.developmentProcessSection {
  padding-top: clamp(54px, 5.6vw, 74px) !important;
  padding-bottom: clamp(54px, 5.6vw, 72px) !important;
}

.developmentProcessInner {
  gap: clamp(24px, 3vw, 34px) !important;
}

.developmentProcessTitle {
  margin-top: clamp(18px, 2vw, 24px) !important;
}

.developmentProcessSubtitle {
  margin-top: clamp(8px, 1vw, 12px) !important;
}

.developmentProcessAside {
  padding-top: clamp(30px, 3.5vw, 44px);
  gap: clamp(20px, 2.4vw, 28px);
}

/* 12 — Modernization strategy */
.modernizationSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(58px, 6vw, 80px);
}

.modernizationIntro {
  margin-top: clamp(14px, 1.7vw, 20px);
}

.modernizationFlow {
  margin-top: clamp(34px, 3.8vw, 46px);
}

/* 13 — Post-launch support */
.postLaunchSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 76px);
}

.postLaunchKicker {
  margin-top: clamp(20px, 2.4vw, 28px);
}

.postLaunchIntro {
  margin-top: clamp(10px, 1.2vw, 14px);
}

.postLaunchGrid {
  margin-top: clamp(38px, 4.4vw, 56px);
  gap: clamp(36px, 4.5vw, 62px);
}

.postLaunchItems {
  gap: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(16px, 2.4vw, 34px);
}

/* 14 — AI apps case study */
.aiAppsSection {
  padding-top: clamp(50px, 5.2vw, 70px);
  padding-bottom: clamp(54px, 5.6vw, 74px);
}

.aiAppsHeadingBlock {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.aiAppsSubtitle {
  margin-top: clamp(10px, 1.4vw, 16px);
}

.aiAppsCaseCard {
  padding-block: clamp(28px, 3.2vw, 38px);
}

.aiAppsContentGrid {
  margin-top: clamp(22px, 2.8vw, 32px);
  gap: clamp(30px, 4vw, 48px);
}

/* 15 — Team */
.amazingTeamInner {
  padding-top: clamp(50px, 5.2vw, 68px);
  padding-bottom: clamp(42px, 4.8vw, 64px);
}

.amazingTeamIntro > p {
  margin-top: clamp(16px, 1.9vw, 24px);
  margin-bottom: clamp(22px, 2.5vw, 32px);
}

.amazingTeamPeople {
  margin-top: clamp(34px, 4vw, 52px);
}

/* 16 — Featured case studies */
.featuredCaseStudiesRefSection {
  padding-top: clamp(54px, 5.6vw, 74px);
  padding-bottom: clamp(58px, 6vw, 80px);
}

.featuredCaseStudiesRefGrid {
  margin-top: clamp(30px, 3.6vw, 42px);
}

/* 17 — Testimonials */
.testimonialsSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 78px);
}

.testimonialsHeadingBlock {
  margin-bottom: clamp(24px, 3vw, 34px);
}

.testimonialsSubtitle {
  margin-top: clamp(8px, 1.1vw, 12px);
}

/* 18 — Tools */
.toolsSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 76px);
}

.toolsGrid {
  margin-top: clamp(28px, 3.3vw, 40px);
  row-gap: clamp(34px, 4.2vw, 52px);
}

/* 19 — Insights */
.insightsSection {
  padding-top: clamp(52px, 5.4vw, 72px);
  padding-bottom: clamp(56px, 5.8vw, 76px);
}

.insightsHeader {
  margin-bottom: clamp(30px, 3.6vw, 44px);
}

.insightsSubtitle {
  margin-top: clamp(10px, 1.4vw, 16px);
}

/* 20 — Next move remains cinematic; only prevent an extra inherited gap. */
.nextMoveSection {
  margin-top: 0;
}

/* 21 — Final CTA */
.finalCtaSection {
  padding-top: clamp(48px, 5vw, 68px);
  padding-bottom: clamp(52px, 5.4vw, 72px);
}

.finalCtaContent {
  padding-block: clamp(30px, 3.6vw, 42px);
}

.finalCtaText {
  margin-top: clamp(12px, 1.5vw, 16px);
  margin-bottom: clamp(20px, 2.3vw, 26px);
}

/* Shared responsive gutter cleanup without changing section composition. */
@media (max-width: 1024px) {
  .homeSections {
    padding-top: 0;
  }

  .homeSections > section {
    margin-top: 0;
  }

  .howAiCompareGrid,
  .postLaunchGrid,
  .industryTabsWrap {
    margin-top: clamp(30px, 4vw, 44px);
  }

  .problemProductSection {
    margin-top: clamp(30px, 4vw, 46px);
    margin-bottom: clamp(30px, 4vw, 46px);
  }
}

@media (max-width: 767px) {
  :root {
    --home-gutter: 20px;
  }

  .homeSections {
    padding-top: 0;
  }

  .homeSections > section,
  .homeSections > .finalCtaSection {
    margin-top: 0;
  }

  .homeSections > .impactStatsSection {
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .whoSection,
  .aiFirstSection,
  .industrySection,
  .developmentProcessSection,
  .modernizationSection,
  .postLaunchSection,
  .aiAppsSection,
  .featuredCaseStudiesRefSection,
  .testimonialsSection,
  .toolsSection,
  .insightsSection,
  .finalCtaSection {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  .aiFirstServicesInner {
    padding-top: 46px;
    padding-bottom: 50px;
    padding-inline: 20px;
  }

  .aiSignalSection {
    padding-top: 8px;
    padding-bottom: 42px;
  }

  .aiSignalContent {
    padding-block: 46px;
  }

  .costSection,
  .howAiSection {
    padding-top: 44px !important;
    padding-bottom: 48px !important;
  }

  .costCard {
    padding-block: 32px !important;
  }

  .howAiCompareGrid,
  .industryTabsWrap,
  .postLaunchGrid,
  .modernizationFlow,
  .featuredCaseStudiesRefGrid,
  .toolsGrid {
    margin-top: 30px;
  }

  .aiTimeline {
    margin-top: 28px;
  }

  .problemProductSection {
    margin-top: 32px;
    margin-bottom: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .developmentProcessAside {
    padding-top: 22px;
  }

  .amazingTeamInner {
    padding-top: 44px;
    padding-bottom: 42px;
  }

  .amazingTeamPeople {
    margin-top: 28px;
  }

  .insightsHeader {
    margin-bottom: 28px;
  }

  .finalCtaContent {
    padding-block: 28px;
  }
}

@media (max-width: 480px) {
  .whoSection,
  .aiFirstSection,
  .industrySection,
  .developmentProcessSection,
  .modernizationSection,
  .postLaunchSection,
  .aiAppsSection,
  .featuredCaseStudiesRefSection,
  .testimonialsSection,
  .toolsSection,
  .insightsSection,
  .finalCtaSection {
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }

  .aiFirstServicesInner {
    padding-top: 40px;
    padding-bottom: 44px;
    padding-inline: 16px;
  }

  .costSection,
  .howAiSection {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .problemProductSection {
    margin-top: 26px;
    margin-bottom: 26px;
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* =========================================================
   HOME — STEP 3: LAYOUT & VISUAL BALANCE
   Scope: column ratios, max-widths, alignment and composition only.
   Typography, spacing, media assets, motion and functionality are preserved.
   ========================================================= */

/* About / Who we are — keep image and copy visually equal in weight. */
.whoInner.whoInnerSingleImage {
  width: min(1280px, calc(100% - 72px));
}

.whoConnectedGroup.whoConnectedGroupSingleImage {
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.2fr);
}

.whoConnectedGroupSingleImage .whoCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.whoConnectedGroupSingleImage .whoCopy {
  width: 100%;
  max-width: 62ch;
}

/* Services — keep the editorial header from becoming wider than its rails. */
.aiFirstServicesHeader {
  max-width: 900px;
}

.aiFirstServicesLead {
  max-width: 720px;
}

/* AI signal — a tighter reading column gives the visual background more room. */
.aiSignalContent {
  max-width: 700px;
}

/* Cost / delivery — reduce the image-heavy split while retaining the same shell. */
.costInner {
  width: min(1440px, calc(100% - 72px)) !important;
}

.costConnectedGroup {
  grid-template-columns: minmax(430px, 47%) minmax(0, 53%) !important;
}

.costCard {
  align-items: flex-start !important;
}

.costHeadline {
  max-width: 640px;
}

/* Before / after — equal columns with a narrower transition lane. */
.howAiInner {
  width: min(1280px, calc(100% - 72px));
}

.howAiHeadingBlock {
  max-width: 980px;
}

.howAiCompareGrid {
  width: min(1180px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: start;
}

/* Industries — keep header, tiles and action in one visual field. */
.aiFirstHeader,
.aiFirstGrid,
.aiFirstFooterText {
  max-width: 1180px;
}

/* Engagement models — text stays readable while image remains substantial. */
.industryContent {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(36px, 4vw, 52px);
  align-items: center;
}

.industryCopy {
  max-width: 620px;
}

.industryImageWrap {
  justify-self: end;
  width: min(100%, 500px);
}

/* Problem to product — prevent the process cards from overpowering the intro. */
.problemProductSection {
  grid-template-columns: minmax(360px, 0.9fr) minmax(620px, 1.08fr);
}

.problemProductIntro {
  max-width: 610px;
}

.problemProductGrid {
  max-width: 720px;
}

/* Development process — cap the full-width stretch and balance lead vs aside. */
.developmentProcessInner {
  width: min(1520px, calc(100% - 80px)) !important;
}

.developmentProcessTop {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
}

.developmentProcessAside {
  width: min(100%, 430px);
}

.developmentProcessFlow {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

/* Modernization flow was left-heavy on wide screens; center the existing flow. */
.modernizationInner {
  width: min(1180px, calc(100% - 74px));
}

.modernizationIntro {
  max-width: 780px;
}

.modernizationFlow {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Post-launch — vertically balance support items against the existing image. */
.postLaunchInner {
  width: min(1180px, calc(100% - 80px));
}

.postLaunchHeader {
  max-width: 880px;
}

.postLaunchGrid {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.92fr);
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}

.postLaunchItems {
  width: min(100%, 610px);
}

.postLaunchImageWrap {
  justify-self: end;
  width: min(100%, 520px);
}

/* AI Apps — give the project proof slightly more weight than the quote card. */
.aiAppsInner {
  width: min(1360px, calc(100% - 72px));
}

.aiAppsIntro {
  max-width: 760px;
}

.aiAppsContentGrid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
}

/* Team — cap the portrait stage so it does not feel stretched on ultra-wide screens. */
.amazingTeamInner {
  width: min(1480px, calc(100% - 48px));
}

.amazingTeamPeople {
  max-width: 1320px;
}

/* Case studies / testimonials — keep carousels centered inside the same content band. */
.featuredCaseStudiesRefContainer {
  max-width: 1260px;
}

.testimonialsInner {
  max-width: 1260px;
}

/* Tools — prevent the logo field from spreading too far on large displays. */
.toolsInner {
  width: min(1180px, calc(100% - 72px));
}

.toolsGrid {
  max-width: 1120px;
  margin-inline: auto;
}

/* Insights — slightly reduce CTA dominance and keep the carousel primary. */
.insightsInner {
  width: min(1180px, calc(100% - 88px));
}

.insightsLayout {
  grid-template-columns: minmax(0, 2.65fr) minmax(260px, 0.85fr);
  gap: 22px;
}

/* Final CTA — balance message and visual without changing either asset. */
.finalCtaInner {
  width: min(1200px, calc(100% - 64px));
}

.finalCtaCard {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
}

.finalCtaContent {
  max-width: 650px;
}

/* ---------- Responsive composition ---------- */
@media (max-width: 1280px) {
  .whoInner.whoInnerSingleImage {
    width: min(1120px, calc(100% - 48px));
  }

  .costInner {
    width: min(1240px, calc(100% - 52px)) !important;
  }

  .costConnectedGroup {
    grid-template-columns: minmax(390px, 46%) minmax(0, 54%) !important;
  }

  .howAiInner {
    width: min(1120px, calc(100% - 48px));
  }

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

  .problemProductSection {
    grid-template-columns: minmax(320px, 0.9fr) minmax(540px, 1.1fr);
  }

  .developmentProcessInner {
    width: min(1180px, calc(100% - 42px)) !important;
  }

  .postLaunchInner {
    width: min(1080px, calc(100% - 48px));
  }

  .aiAppsInner {
    width: min(1180px, calc(100% - 48px));
  }

  .insightsInner {
    width: min(1120px, calc(100% - 56px));
  }
}

@media (max-width: 1040px) {
  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  }

  .costConnectedGroup {
    grid-template-columns: 1fr !important;
  }

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

  .industryContent {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  }

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

  .problemProductIntro,
  .problemProductGrid {
    max-width: 100%;
    justify-self: stretch;
  }

  .developmentProcessTop {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  }

  .postLaunchGrid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  }

  .aiAppsContentGrid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  }

  .insightsLayout {
    grid-template-columns: minmax(0, 2.35fr) minmax(240px, 0.85fr);
  }

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

@media (max-width: 860px) {
  .howAiInner,
  .aiAppsInner,
  .insightsInner {
    width: min(100% - 32px, 760px);
  }

  .howAiCompareGrid,
  .industryContent,
  .postLaunchGrid,
  .aiAppsContentGrid,
  .insightsLayout,
  .finalCtaCard {
    grid-template-columns: 1fr;
  }

  .industryImageWrap,
  .postLaunchImageWrap {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

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

  .developmentProcessAside {
    width: 100%;
    max-width: none;
  }

  .modernizationFlow {
    margin-inline: 0;
  }

  .finalCtaContent {
    max-width: none;
  }
}

@media (max-width: 680px) {
  .whoInner.whoInnerSingleImage {
    width: min(100% - 28px, 520px);
  }

  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: 1fr;
  }

  .whoConnectedGroupSingleImage .whoCard {
    justify-content: flex-start;
  }

  .aiSignalContent {
    max-width: 100%;
  }

  .costInner {
    width: calc(100% - 20px) !important;
  }

  .developmentProcessInner {
    width: calc(100% - 22px) !important;
  }

  .postLaunchInner {
    width: min(100% - 22px, 520px);
  }

  .toolsInner {
    width: calc(100% - 24px);
  }

  .finalCtaInner {
    width: calc(100% - 24px);
  }
}

/* =========================================================
   HOME — STEP 4: IMAGES & VIDEOS
   Scope: media rendering, crop control, intrinsic sizing and loading stability.
   Existing assets, section layouts, copy and motion are preserved.
   ========================================================= */

/* Keep the hero video/poster on one stable cover surface. */
.heroVideo {
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* next/image fill targets need explicit containing blocks. */
.testimonialImageWrap,
.insightsImageWrap,
.postLaunchImageWrap {
  position: relative;
}

/* About image: preserve the vertical office composition without stretching. */
.whoConnectedGroupSingleImage .whoImageTall {
  position: relative;
  overflow: hidden;
}

.whoConnectedGroupSingleImage .whoMediaImage {
  object-fit: cover;
  object-position: 52% 46%;
}

/* Dashboard/product media: preserve UI edges while maintaining the existing crop. */
.costImage,
.aiAppsProjectImage {
  object-fit: cover;
  object-position: center;
}

/* Engagement imagery uses a consistent landscape crop. */
.industryImage {
  object-fit: cover;
}

/* Portrait case-study sources are intentionally framed higher so faces remain visible. */
.featuredCaseStudyRefImage {
  object-fit: cover;
  object-position: center 38%;
}

/* Client portraits retain the current editorial crop when served through next/image. */
.testimonialImage {
  object-fit: cover;
  object-position: center 32%;
}

/* Blog imagery remains edge-to-edge without distortion. */
.insightsImage {
  object-fit: cover;
  object-position: center;
}

/* The support visual matches its source aspect ratio, avoiding unnecessary crop. */
.postLaunchImage {
  object-fit: cover;
  object-position: center;
}

/* Decorative/product visuals should never stretch as containers change. */
.finalCtaVisualImage {
  object-fit: contain;
  object-position: right center;
}

/* Team cutouts are deliberately contained instead of cropped. */
.amazingTeamPhoto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 860px) {
  .industryImage,
  .insightsImage,
  .postLaunchImage {
    object-position: center;
  }

  .finalCtaVisualImage {
    object-position: center bottom;
  }
}

@media (max-width: 680px) {
  .whoConnectedGroupSingleImage .whoMediaImage {
    object-position: 52% 42%;
  }

  .featuredCaseStudyRefImage {
    object-position: center 34%;
  }
}

/* Home Step 5 — motion polish only. No layout, copy, media or section-order changes. */

/* Keep repeated hero text movement quick and quiet instead of drawing focus away from the headline. */
.heroIdentityWord {
  animation: homeStep5WordIn 360ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes homeStep5WordIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Industry tab content changes should read as a state transition, not a slide-in. */
.industryContent {
  animation: homeStep5IndustryIn 320ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes homeStep5IndustryIn {
  from { opacity: .55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Existing AI/team section reveals: smaller travel, faster completion, restrained staggering. */
@media (prefers-reduced-motion: no-preference) {
  .homeRevealReady .aiSignalContent,
  .homeRevealReady .amazingTeamIntro {
    transform: translateY(14px);
  }

  .homeRevealReady .amazingTeamPerson {
    transform: translateY(18px);
  }

  .homeRevealReady.homeRevealVisible .aiSignalContent,
  .homeRevealReady.homeRevealVisible .amazingTeamIntro {
    transition: opacity .5s ease, transform .56s cubic-bezier(.22, 1, .36, 1);
  }

  .homeRevealReady.homeRevealVisible .amazingTeamPerson {
    transition: opacity .48s ease, transform .54s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--portrait-index, 0) * 55ms);
  }
}

/* Consistent motion accessibility for every Home-only animation/transition. */
@media (prefers-reduced-motion: reduce) {
  .heroIdentityWord,
  .industryContent {
    animation: none !important;
  }

  .hero *,
  .homeSections * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* =========================================================
   HOME — STEP 6: RESPONSIVE COMPOSITION
   Scope: responsive stacking, wrapping, overflow containment and
   breakpoint-specific composition only. Steps 1–5 are preserved.
   ========================================================= */

.hero,
.homeSections {
  max-width: 100%;
  overflow-x: clip;
}

.homeSections > *,
.heroShell,
.contentColumn,
.whoConnectedGroup,
.costConnectedGroup,
.howAiCompareGrid,
.industryContent,
.problemProductSection,
.developmentProcessTop,
.developmentProcessFlow,
.postLaunchGrid,
.aiAppsContentGrid,
.insightsLayout,
.finalCtaCard {
  min-width: 0;
}

.hero img,
.hero video,
.homeSections img,
.homeSections video {
  max-width: 100%;
}

/* Tablet / laptop portrait: preserve the desktop identity without forcing
   wide multi-column compositions into narrow viewports. */
@media (max-width: 1024px) {
  .heroShell {
    width: min(100% - 32px, 960px);
  }

  .heroContent {
    padding-inline: 0 !important;
  }

  .contentColumn {
    width: min(100%, 800px) !important;
  }

  .stats {
    width: min(100%, 620px);
  }

  .whoInner.whoInnerSingleImage {
    width: min(100% - 40px, 900px);
  }

  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr);
  }

  .industryPanel {
    padding-inline: clamp(28px, 4vw, 46px);
  }

  .postLaunchInner,
  .aiAppsInner,
  .insightsInner,
  .finalCtaInner,
  .toolsInner {
    width: min(100% - 40px, 920px);
  }

  .insightsCtaPanel {
    min-height: 420px;
  }
}

/* Tablet portrait / large mobile: stack sections before their columns become
   cramped, while keeping content order and existing design language. */
@media (max-width: 900px) {
  .heroShell {
    width: min(100% - 28px, 820px);
  }

  .heroIdentity {
    flex-wrap: wrap;
    row-gap: 4px !important;
  }

  .heroTrustMarks {
    max-width: 100%;
  }

  .whoInner.whoInnerSingleImage {
    width: min(100% - 32px, 760px);
  }

  .whoConnectedGroup.whoConnectedGroupSingleImage {
    grid-template-columns: 1fr;
  }

  .whoConnectedGroupSingleImage .whoImageTall {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .whoConnectedGroupSingleImage .whoCard {
    min-height: 0;
  }

  /* Replace the wide comparison table with a readable 2 x 2 composition. */
  .beforeAfterTable {
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    padding-bottom: 0;
  }

  .beforeAfterCol,
  .beforeAfterCol:first-child {
    border-left: 1px solid rgb(var(--dark-rgb) / .16);
  }

  .beforeAfterCol:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .industryTabsWrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }

  .industryTabs {
    scroll-padding-inline: 16px;
  }

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

  .postLaunchImageWrap {
    order: 1;
    width: 100%;
    justify-self: stretch;
  }

  .postLaunchItems {
    order: 2;
    width: 100%;
    max-width: none;
  }

  .aiAppsContentGrid,
  .insightsLayout,
  .finalCtaCard {
    grid-template-columns: 1fr;
  }

  .aiAppsProjectImageWrap {
    width: 100%;
    max-width: none;
  }

  .insightsCtaPanel {
    min-height: 270px;
  }

  .finalCtaVisual {
    min-height: 220px;
  }

  .finalCtaVisualImage {
    object-position: center bottom;
  }
}

@media (max-width: 767px) {
  .heroShell {
    width: min(100% - 20px, 680px);
  }

  .heroContent {
    padding-top: 90px !important;
    padding-bottom: 24px !important;
  }

  .heroHeadline {
    max-width: 13ch !important;
  }

  .heroActions {
    width: 100%;
  }

  .hero .primaryBtn,
  .hero .secondaryBtn {
    flex: 1 1 210px;
    justify-content: center;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .stat {
    min-width: 0;
    padding-right: 14px;
  }

  .heroTrustMarks {
    width: 100%;
    justify-content: flex-start !important;
  }

  .whoInner.whoInnerSingleImage,
  .howAiInner,
  .aiAppsInner,
  .insightsInner,
  .postLaunchInner,
  .toolsInner,
  .finalCtaInner {
    width: min(100% - 28px, 620px);
  }

  .whoConnectedGroupSingleImage .whoImageTall {
    aspect-ratio: 4 / 3;
  }

  .beforeAfterInner {
    width: min(100% - 28px, 620px);
  }

  .beforeAfterTable {
    gap: 16px 0;
  }

  .beforeAfterCol {
    padding-inline: 14px;
  }

  .beforeAfterHead {
    min-height: auto;
    margin-bottom: 8px;
  }

  .beforeAfterCell {
    min-height: 0;
    margin-bottom: 7px;
  }

  .industryInner {
    width: min(100% - 28px, 620px);
  }

  .industryPanel {
    padding: 32px 24px;
  }

  .industryImageWrap {
    height: auto;
    aspect-ratio: 16 / 10;
  }

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

  .developmentProcessFlow {
    width: 100%;
  }

  .postLaunchPill {
    width: 100%;
    white-space: normal;
  }

  .aiAppsTestimonialFooter {
    align-items: flex-start;
  }

  .insightsViewport,
  .testimonialTrack,
  .featuredCaseStudiesRefGrid {
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }

  .insightsCard {
    flex-basis: min(82vw, 360px);
  }

  .insightsImageWrap {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .insightsCtaPanel {
    min-height: 240px;
  }

  .insightsViewAll {
    right: 20px;
    bottom: 18px;
  }

  .insightsArrow {
    width: 46px;
    height: 46px;
  }

  .insightsArrowLeft {
    left: 8px;
  }

  .insightsArrowRight {
    right: 8px;
  }

  .finalCtaContent {
    padding: 26px 22px 10px;
  }

  .finalCtaVisual {
    min-height: 190px;
  }

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

/* Small mobile: remove remaining width pressure and avoid tall desktop-like
   controls. Intentional horizontal carousels stay swipeable inside themselves. */
@media (max-width: 520px) {
  .heroShell {
    width: calc(100% - 16px);
  }

  .heroContent {
    padding-top: 82px !important;
  }

  .heroHeadline {
    max-width: none !important;
  }

  .heroIdentity {
    align-items: flex-start;
    font-size: 18px !important;
  }

  .heroActions {
    flex-direction: column;
  }

  .hero .primaryBtn,
  .hero .secondaryBtn {
    width: 100%;
    flex: 0 0 auto;
  }

  .stats {
    gap: 14px 0;
  }

  .stat {
    padding-right: 10px;
  }

  .heroTrustMarks {
    gap: 12px 16px !important;
  }

  .heroTrustMarks img {
    max-width: 96px !important;
    max-height: 34px !important;
  }

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

  .whoInner.whoInnerSingleImage,
  .beforeAfterInner,
  .industryInner,
  .howAiInner,
  .postLaunchInner,
  .aiAppsInner,
  .insightsInner,
  .toolsInner,
  .finalCtaInner {
    width: calc(100% - 20px);
  }

  .whoConnectedGroupSingleImage .whoImageTall {
    aspect-ratio: 1 / 1;
  }

  .whoConnectedGroupSingleImage .whoCard {
    padding-inline: 20px;
  }

  .beforeAfterTable {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .beforeAfterCol,
  .beforeAfterCol:first-child,
  .beforeAfterCol:nth-child(odd) {
    border-left: 0;
    border-top: 1px solid rgb(var(--dark-rgb) / .14);
    padding: 16px 0 10px;
  }

  .beforeAfterCol:first-child {
    border-top: 0;
  }

  .industryTabs {
    padding-inline: 4px;
  }

  .industryTab {
    min-width: 116px;
    padding-inline: 14px;
  }

  .industryPanel {
    padding: 28px 18px 22px;
  }

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

  .problemProductCard {
    min-height: 0;
  }

  .aiAppsTestimonialFooter {
    flex-direction: column;
    gap: 16px;
  }

  .aiAppsRating {
    width: 96px;
  }

  .amazingTeamPeople {
    min-height: 230px;
  }

  .amazingTeamPerson1,
  .amazingTeamPerson4 {
    height: 180px;
  }

  .amazingTeamPerson3 {
    height: 230px;
  }

  .featuredCaseStudyRefCard {
    flex-basis: min(88vw, 330px);
  }

  .testimonialCard {
    flex-basis: min(88vw, 340px);
  }

  .insightsCard {
    flex-basis: min(88vw, 340px);
  }

  .insightsCtaPanel {
    min-height: 220px;
  }

  .insightsViewAll {
    right: 14px;
    bottom: 14px;
    min-height: 50px;
  }

  .finalCtaContent {
    padding: 24px 18px 8px;
  }

  .finalCtaButton {
    width: 100%;
    justify-content: space-between;
  }

  .finalCtaVisual {
    min-height: 165px;
  }

  .toolsGrid {
    column-gap: 10px;
    row-gap: 20px;
  }

  .toolsLogoSlot {
    height: 88px;
  }
}

@media (max-width: 380px) {
  .heroHeadline {
    font-size: clamp(34px, 10.8vw, 42px) !important;
  }

  .heroCopy {
    font-size: 14px !important;
  }

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

  .whoConnectedGroupSingleImage .whoCard,
  .industryPanel,
  .aiAppsCaseCard,
  .aiAppsTestimonialCard,
  .finalCtaContent {
    padding-inline: 16px;
  }

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

/* Home Step 7 — buttons, links and micro-interactions only. */

/* Keep interactive targets predictable and keyboard-visible without changing section geometry. */
.hero .primaryBtn,
.hero .secondaryBtn,
.whoCta,
.beforeAfterCtaBtn,
.developmentProcessCta,
.problemProductCta,
.aiAppsCaseBtn,
.aiFirstMoreBtn,
.insightsReadMore,
.insightsViewAll,
.featuredCaseStudyRefButton,
.finalCtaButton,
.nextMoveButton,
.aiSignalLink,
.amazingTeamLink,
.aiFirstServiceArrow {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
}

.hero .primaryBtn,
.hero .secondaryBtn,
.whoCta,
.beforeAfterCtaBtn,
.problemProductCta,
.aiAppsCaseBtn,
.aiFirstMoreBtn,
.insightsReadMore,
.insightsViewAll,
.featuredCaseStudyRefButton,
.finalCtaButton,
.nextMoveButton,
.aiSignalLink,
.amazingTeamLink {
  min-height: 48px;
  transition:
    transform 180ms cubic-bezier(.22, 1, .36, 1),
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Light-surface controls use a strong navy focus ring. */
.whoCta:focus-visible,
.beforeAfterCtaBtn:focus-visible,
.developmentProcessCta:focus-visible,
.problemProductCta:focus-visible,
.aiAppsCaseBtn:focus-visible,
.aiFirstMoreBtn:focus-visible,
.insightsReadMore:focus-visible,
.insightsViewAll:focus-visible,
.featuredCaseStudyRefButton:focus-visible,
.finalCtaButton:focus-visible,
.amazingTeamLink:focus-visible,
.aiFirstServiceArrow:focus-visible,
.industryTab:focus-visible,
.industryArrow:focus-visible,
.insightsArrow:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

/* Dark-surface controls keep the green accent as the visible keyboard cue. */
.hero .primaryBtn:focus-visible,
.hero .secondaryBtn:focus-visible,
.nextMoveButton:focus-visible,
.aiSignalLink:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* Consistent restrained hover lift. */
@media (hover: hover) and (pointer: fine) {
  .hero .primaryBtn:hover,
  .hero .secondaryBtn:hover,
  .whoCta:hover,
  .beforeAfterCtaBtn:hover,
  .problemProductCta:hover,
  .aiAppsCaseBtn:hover,
  .aiFirstMoreBtn:hover,
  .insightsReadMore:hover,
  .insightsViewAll:hover,
  .featuredCaseStudyRefButton:hover,
  .finalCtaButton:hover,
  .nextMoveButton:hover,
  .aiSignalLink:hover,
  .amazingTeamLink:hover {
    transform: translateY(-1px);
  }

  .developmentProcessCta:hover {
    transform: translateX(2px);
  }

  .industryTab:not(.active):hover {
    color: var(--primary);
    background: rgb(var(--accent-rgb) / .08);
  }

  .industryArrow:hover,
  .insightsArrow:hover {
    box-shadow: 0 6px 18px rgb(var(--dark-rgb) / .14);
  }
}

/* Arrow/icon movement is intentionally small and uses one direction system. */
.hero .primaryBtn .circleArrow,
.hero .secondaryBtn > span:last-child,
.whoCta img,
.beforeAfterCtaBtnIcon svg,
.developmentProcessCtaCircle,
.problemProductCtaIcon,
.aiAppsCaseBtnIcon,
.aiFirstMoreBtnIcon img,
.insightsReadMoreIcon svg,
.insightsViewAllIcon svg,
.featuredCaseStudyButtonIcon,
.finalCtaButtonIcon svg,
.nextMoveButton svg,
.aiSignalLink svg,
.aiFirstServiceArrow svg,
.industryArrow svg,
.insightsArrow svg {
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .hero .primaryBtn:hover .circleArrow,
  .hero .secondaryBtn:hover > span:last-child,
  .whoCta:hover img,
  .beforeAfterCtaBtn:hover .beforeAfterCtaBtnIcon svg,
  .developmentProcessCta:hover .developmentProcessCtaCircle,
  .problemProductCta:hover .problemProductCtaIcon,
  .aiAppsCaseBtn:hover .aiAppsCaseBtnIcon,
  .aiFirstMoreBtn:hover .aiFirstMoreBtnIcon img,
  .insightsReadMore:hover .insightsReadMoreIcon svg,
  .insightsViewAll:hover .insightsViewAllIcon svg,
  .featuredCaseStudyRefButton:hover .featuredCaseStudyButtonIcon,
  .finalCtaButton:hover .finalCtaButtonIcon svg,
  .nextMoveButton:hover svg,
  .aiSignalLink:hover svg,
  .aiFirstServiceCard:hover .aiFirstServiceArrow svg {
    transform: translateX(3px);
  }

  .industryArrow:hover svg,
  .insightsArrow:hover svg {
    transform: translateX(2px);
  }

  .industryArrowLeft:hover svg,
  .insightsArrowLeft:hover svg {
    transform: translateX(-2px);
  }
}

/* Press feedback should feel tactile without making the page jump. */
.hero .primaryBtn:active,
.hero .secondaryBtn:active,
.whoCta:active,
.beforeAfterCtaBtn:active,
.problemProductCta:active,
.aiAppsCaseBtn:active,
.aiFirstMoreBtn:active,
.insightsReadMore:active,
.insightsViewAll:active,
.featuredCaseStudyRefButton:active,
.finalCtaButton:active,
.nextMoveButton:active,
.aiSignalLink:active,
.amazingTeamLink:active {
  transform: scale(.985);
}

.developmentProcessCta:active { transform: translateX(1px) scale(.99); }
.industryArrow:active { transform: translateY(-50%) scale(.96); }
.insightsArrow:active { transform: scale(.96); }

/* Engagement tabs: active state remains obvious without relying only on color. */
.industryTab {
  min-height: 48px;
  transition: color 180ms ease, background-color 180ms ease, border-radius 180ms ease;
}
.industryTab.active { font-weight: 700; }

/* Carousel controls remain comfortable touch targets across devices. */
.industryArrow,
.insightsArrow {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* Service cards already expose one full-card link; make keyboard focus clear without adding another CTA. */
.aiFirstServiceArrow:focus-visible {
  border-radius: 999px;
}
.aiFirstServiceCard:focus-within {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

/* Touch devices do not need synthetic hover states. */
@media (hover: none) {
  .hero .primaryBtn,
  .hero .secondaryBtn,
  .whoCta,
  .beforeAfterCtaBtn,
  .problemProductCta,
  .aiAppsCaseBtn,
  .aiFirstMoreBtn,
  .insightsReadMore,
  .insightsViewAll,
  .featuredCaseStudyRefButton,
  .finalCtaButton,
  .nextMoveButton,
  .aiSignalLink,
  .amazingTeamLink {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .primaryBtn,
  .hero .secondaryBtn,
  .whoCta,
  .beforeAfterCtaBtn,
  .developmentProcessCta,
  .problemProductCta,
  .aiAppsCaseBtn,
  .aiFirstMoreBtn,
  .insightsReadMore,
  .insightsViewAll,
  .featuredCaseStudyRefButton,
  .finalCtaButton,
  .nextMoveButton,
  .aiSignalLink,
  .amazingTeamLink,
  .aiFirstServiceArrow,
  .industryTab,
  .industryArrow,
  .insightsArrow,
  .hero .primaryBtn .circleArrow,
  .hero .secondaryBtn > span:last-child,
  .whoCta img,
  .beforeAfterCtaBtnIcon svg,
  .developmentProcessCtaCircle,
  .problemProductCtaIcon,
  .aiAppsCaseBtnIcon,
  .aiFirstMoreBtnIcon img,
  .insightsReadMoreIcon svg,
  .insightsViewAllIcon svg,
  .featuredCaseStudyButtonIcon,
  .finalCtaButtonIcon svg,
  .nextMoveButton svg,
  .aiSignalLink svg,
  .aiFirstServiceArrow svg,
  .industryArrow svg,
  .insightsArrow svg {
    transition: none !important;
  }
}

/* Home CTA context polish — buttons/links/controls only.
   Brand: green #57D97D, navy #00285D. */

:root {
  --home-cta-green: #57D97D;
  --home-cta-navy: #00285D;
}

/* Shared interaction quality without forcing one geometry on every CTA. */
.hero .primaryBtn,
.hero .secondaryBtn,
.whoCta,
.aiSignalLink,
.aiFirstMoreBtn,
.beforeAfterCtaBtn,
.problemProductCta,
.developmentProcessCta,
.aiAppsCaseBtn,
.amazingTeamLink,
.featuredCaseStudyRefButton,
.insightsReadMore,
.insightsViewAll,
.nextMoveButton,
.finalCtaButton {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
}

/* HERO — two actions, primary stronger, both naturally sized. */
.heroActions {
  gap: 11px;
  align-items: center;
}

.hero .primaryBtn,
.hero .secondaryBtn {
  width: auto;
  min-width: 0;
  min-height: 50px;
  padding: 7px 10px 7px 20px;
  gap: 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero .primaryBtn {
  background: var(--home-cta-green);
  color: #fff;
  border: 1px solid var(--home-cta-green);
  box-shadow: 0 8px 24px rgb(0 40 93 / .16);
}

.hero .primaryBtn .circleArrow.light {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 18px;
}

.hero .secondaryBtn {
  padding-inline: 20px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / .48);
  background: rgb(0 40 93 / .18);
}

.hero .secondaryBtn > span:last-child {
  font-size: 16px;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .hero .primaryBtn:hover {
    background: var(--home-cta-green);
    border-color: #fff;
    box-shadow: 0 10px 28px rgb(87 217 125 / .22);
  }
  .hero .secondaryBtn:hover {
    color: #fff;
    border-color: var(--home-cta-green);
    background: rgb(87 217 125 / .10);
  }
}

/* WHO WE ARE — supporting CTA, compact outline instead of oversized pill. */
.whoCta {
  width: fit-content;
  min-width: 0;
  min-height: 50px;
  padding: 7px 8px 7px 20px;
  gap: 12px;
  border: 1px solid rgb(0 40 93 / .32);
  border-radius: 999px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.whoCta img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

@media (hover: hover) and (pointer: fine) {
  .whoCta:hover {
    background: rgb(0 40 93 / .035);
    border-color: var(--home-cta-navy);
  }
}

/* AI signal — dark surface, quiet secondary action. */
.aiSignalLink {
  min-height: 50px;
  padding: 7px 9px 7px 18px;
  gap: 12px;
  border: 1px solid rgb(255 255 255 / .50);
  border-radius: 999px;
  color: #fff;
  background: rgb(0 40 93 / .20);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.aiSignalLink svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 7px;
  background: var(--home-cta-green);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .aiSignalLink:hover {
    color: #fff;
    border-color: var(--home-cta-green);
    background: rgb(87 217 125 / .10);
  }
  .aiSignalLink:hover svg {
    background: var(--home-cta-green);
    color: #fff;
  }
}

/* AI-first industries — utility CTA, intentionally quieter than section primaries. */
.aiFirstMoreBtn {
  width: fit-content;
  min-width: 0;
  height: auto;
  min-height: 50px;
  padding: 7px 8px 7px 18px;
  gap: 11px;
  border: 1px solid rgb(0 40 93 / .34);
  border-radius: 999px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
}

.aiFirstMoreBtnIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--home-cta-green);
}

.aiFirstMoreBtnIcon img {
  width: 32px;
  height: 32px;
}

@media (hover: hover) and (pointer: fine) {
  .aiFirstMoreBtn:hover {
    border-color: var(--home-cta-navy);
    background: rgb(0 40 93 / .035);
    color: var(--home-cta-navy);
  }
}

/* Before/After — long label, strong action with restrained dimensions. */
.beforeAfterCtaBtn {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  padding: 7px 8px 7px 18px;
  gap: 12px;
  border-radius: 999px;
  background: var(--home-cta-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.beforeAfterCtaBtnIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #fff;
  color: var(--home-cta-navy);
}

.beforeAfterCtaBtnIcon svg {
  width: 17px;
  height: 17px;
}

/* Problem -> Product — dark section primary action, white surface with green accent. */
.problemProductCta {
  min-height: 52px;
  padding: 7px 8px 7px 20px;
  gap: 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--home-cta-navy) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  white-space: nowrap;
}

.problemProductCtaIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--home-cta-green);
  color: #fff;
  font-size: 20px;
}

/* Development process — keep reference's text-link composition; reduce visual weight. */
.developmentProcessCta {
  gap: 14px;
  min-height: 48px;
}

.developmentProcessCtaCircle {
  width: 48px;
  height: 48px;
  background: var(--home-cta-green);
  color: #fff;
  font-size: 29px;
}

.developmentProcessCtaText {
  max-width: 165px;
  padding-left: 14px;
  border-left-color: rgb(0 40 93 / .18);
  color: var(--home-cta-navy);
  font-size: 13px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: .01em;
}

/* AI apps case study — important but not a hero-level button. */
.aiAppsCaseBtn {
  min-height: 50px;
  padding: 7px 8px 7px 18px;
  gap: 11px;
  border-radius: 999px;
  background: var(--home-cta-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
}

.aiAppsCaseBtnIcon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 22px;
}

/* Team — single section action; navy carries hierarchy, green stays selective. */
.amazingTeamLink {
  min-height: 50px;
  padding: 10px 24px;
  border: 1px solid var(--home-cta-navy);
  border-radius: 9px;
  background: var(--home-cta-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .amazingTeamLink:hover {
    background: var(--home-cta-green);
    border-color: var(--home-cta-green);
    color: #fff;
    box-shadow: 0 7px 18px rgb(0 40 93 / .12);
  }
}

/* Featured case study card — full-width is appropriate inside the overlay card. */
.featuredCaseStudyRefButton {
  min-height: 50px;
  padding: 7px 10px 7px 18px;
  gap: 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.featuredCaseStudyRefButton span {
  padding-left: 0;
}

.featuredCaseStudyButtonIcon {
  width: 22px;
  height: 22px;
  color: var(--home-cta-navy);
}

/* Insights — card-level action stays compact; panel action gets more emphasis. */
.insightsReadMore {
  min-height: 46px;
  padding: 6px 8px 6px 14px;
  gap: 10px;
  border: 1px solid rgb(0 40 93 / .18);
  border-radius: 999px;
  background: #fff;
  color: var(--home-cta-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.insightsReadMoreIcon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--home-cta-green);
  color: #fff;
}

.insightsReadMoreIcon svg {
  width: 17px;
  height: 17px;
}

.insightsViewAll {
  min-height: 50px;
  padding: 7px 8px 7px 17px;
  gap: 11px;
  border-radius: 999px;
  background: var(--home-cta-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.insightsViewAllIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #fff;
  color: var(--home-cta-navy);
}

.insightsViewAllIcon svg {
  width: 18px;
  height: 18px;
}

/* Contact-build transition — natural width on desktop, full-width only when narrow. */
.nextMoveButton {
  width: fit-content;
  min-height: 50px;
  padding: 7px 8px 7px 18px;
  gap: 12px;
  border-radius: 999px;
  background: var(--home-cta-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.nextMoveButton svg {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 7px;
  background: var(--home-cta-green);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .nextMoveButton:hover {
    background: var(--home-cta-navy);
    box-shadow: 0 8px 20px rgb(0 40 93 / .14);
  }
  .nextMoveButton:hover svg {
    transform: translateX(2px);
  }
}

/* Final CTA — strongest action inside the dark card. */
.finalCtaButton {
  width: fit-content;
  min-width: 0;
  height: auto;
  min-height: 50px;
  padding: 8px 16px;
  gap: 10px;
  border: 1px solid var(--home-cta-green);
  border-radius: 999px;
  background: var(--home-cta-green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
}

.finalCtaButtonIcon {
  width: 24px;
  height: 24px;
}

.finalCtaButtonIcon svg {
  width: 17px;
  height: 17px;
}

@media (hover: hover) and (pointer: fine) {
  .finalCtaButton:hover {
    background: var(--home-cta-green);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 8px 22px rgb(87 217 125 / .20);
  }
}

/* Tabs and carousel controls — smaller than CTAs, still comfortable targets. */
.industryTab {
  min-height: 50px;
  height: 50px;
  padding-inline: 14px;
  font-size: 15px;
  font-weight: 500;
}

.industryTab.active {
  font-weight: 700;
}

.industryArrow {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-color: rgb(0 40 93 / .16);
  background: #fff;
  color: var(--home-cta-navy);
}

.insightsArrow {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  background: #fff;
  color: var(--home-cta-navy);
}

.insightsArrow svg {
  width: 24px;
  height: 24px;
}

/* Consistent focus treatment: navy on light surfaces, green on dark surfaces. */
.whoCta:focus-visible,
.aiFirstMoreBtn:focus-visible,
.beforeAfterCtaBtn:focus-visible,
.developmentProcessCta:focus-visible,
.aiAppsCaseBtn:focus-visible,
.amazingTeamLink:focus-visible,
.featuredCaseStudyRefButton:focus-visible,
.insightsReadMore:focus-visible,
.insightsViewAll:focus-visible,
.finalCtaButton:focus-visible,
.industryTab:focus-visible,
.industryArrow:focus-visible,
.insightsArrow:focus-visible {
  outline: 3px solid var(--home-cta-navy);
  outline-offset: 3px;
}

.hero .primaryBtn:focus-visible,
.hero .secondaryBtn:focus-visible,
.aiSignalLink:focus-visible,
.problemProductCta:focus-visible,
.nextMoveButton:focus-visible {
  outline: 3px solid var(--home-cta-green);
  outline-offset: 3px;
}

/* Responsive CTA composition — adapt, don't simply scale. */
@media (max-width: 900px) {
  .hero .primaryBtn,
  .hero .secondaryBtn {
    min-height: 48px;
    font-size: 14px;
  }

  .developmentProcessCta {
    justify-self: start;
  }

  .aiAppsCaseBtn {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .heroActions {
    gap: 10px;
  }

  .whoCta,
  .aiSignalLink,
  .problemProductCta,
  .aiAppsCaseBtn,
  .finalCtaButton {
    max-width: 100%;
  }

  .beforeAfterCtaBtn {
    width: 100%;
    justify-content: space-between;
  }

  .aiFirstMoreBtn {
    width: fit-content;
    max-width: 100%;
    justify-self: center;
  }

  .aiAppsCaseBtn {
    width: fit-content;
    justify-content: flex-start;
  }

  .featuredCaseStudyRefButton {
    width: 100%;
  }

  .insightsReadMore {
    min-height: 44px;
  }

  .industryTab {
    min-height: 46px;
    height: 46px;
    padding-inline: 10px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .heroActions {
    align-items: stretch;
  }

  .hero .primaryBtn,
  .hero .secondaryBtn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-between;
  }

  .whoCta,
  .aiSignalLink,
  .problemProductCta,
  .aiAppsCaseBtn,
  .finalCtaButton,
  .nextMoveButton {
    width: 100%;
    justify-content: space-between;
  }

  .aiFirstMoreBtn {
    width: 100%;
    max-width: 190px;
    justify-content: space-between;
  }

  .developmentProcessCtaCircle {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .insightsViewAll {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .primaryBtn,
  .hero .secondaryBtn,
  .whoCta,
  .aiSignalLink,
  .aiFirstMoreBtn,
  .beforeAfterCtaBtn,
  .problemProductCta,
  .developmentProcessCta,
  .aiAppsCaseBtn,
  .amazingTeamLink,
  .featuredCaseStudyRefButton,
  .insightsReadMore,
  .insightsViewAll,
  .nextMoveButton,
  .finalCtaButton,
  .industryTab,
  .industryArrow,
  .insightsArrow,
  .hero .primaryBtn *,
  .hero .secondaryBtn *,
  .whoCta *,
  .aiSignalLink *,
  .aiFirstMoreBtn *,
  .beforeAfterCtaBtn *,
  .problemProductCta *,
  .developmentProcessCta *,
  .aiAppsCaseBtn *,
  .featuredCaseStudyRefButton *,
  .insightsReadMore *,
  .insightsViewAll *,
  .nextMoveButton *,
  .finalCtaButton * {
    transition: none !important;
  }
}

/* Dark-overlay focus exceptions. */
.featuredCaseStudyRefButton:focus-visible {
  outline-color: var(--home-cta-green);
}
.finalCtaButton:focus-visible {
  outline-color: #fff;
}

/* Home SVG arrow system — no text arrow glyphs. */
.homeActionArrowSvg,
.homeFlowArrowSvg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.homeFlowArrowSvg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.hero .circleArrow.light,
.hero .secondaryArrowCircle,
.problemProductCtaIcon,
.developmentProcessCtaCircle,
.aiAppsCaseBtnIcon {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.hero .secondaryArrowCircle {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: 2px;
  border: 1px solid rgb(255 255 255 / .52);
  color: #fff;
  background: rgb(255 255 255 / .06);
}

.developmentProcessArrow,
.modernizationArrow {
  display: grid;
  place-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .hero .primaryBtn:hover .homeActionArrowSvg,
  .hero .secondaryBtn:hover .homeActionArrowSvg,
  .problemProductCta:hover .homeActionArrowSvg,
  .developmentProcessCta:hover .homeActionArrowSvg,
  .aiAppsCaseBtn:hover .homeActionArrowSvg {
    transform: translate(2px, -2px);
  }

  .hero .primaryBtn:hover .circleArrow.light,
  .problemProductCta:hover .problemProductCtaIcon,
  .developmentProcessCta:hover .developmentProcessCtaCircle {
    box-shadow: 0 7px 18px rgb(0 40 93 / .16);
  }

  .hero .secondaryBtn:hover .secondaryArrowCircle {
    border-color: var(--home-cta-green);
    color: var(--home-cta-green);
    background: rgb(87 217 125 / .08);
  }

  .developmentProcessCard:hover .developmentProcessArrow .homeFlowArrowSvg {
    transform: translateX(3px);
  }
}

@media (max-width: 640px) {
  .heroActions {
    width: 100%;
  }

  .hero .primaryBtn,
  .hero .secondaryBtn,
  .problemProductCta,
  .aiAppsCaseBtn {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .developmentProcessCta {
    width: 100%;
    max-width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .developmentProcessCtaText,
  .hero .primaryBtn,
  .hero .secondaryBtn,
  .problemProductCta,
  .aiAppsCaseBtn {
    min-width: 0;
  }

  .problemProductCta > span:first-child,
  .aiAppsCaseBtn > span:first-child,
  .hero .primaryBtn > :first-child,
  .hero .secondaryBtn > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .hero .circleArrow.light,
  .hero .secondaryArrowCircle,
  .problemProductCtaIcon,
  .aiAppsCaseBtnIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeActionArrowSvg,
  .homeFlowArrowSvg,
  .hero .secondaryArrowCircle {
    transition: none !important;
  }
}

/* Home-only CTA alignment: exact measured "Transform an idea" button geometry.
   Important declarations live in a layer introduced before dc-buttons, whose
   global important geometry would otherwise override local page refinements.
   Do NOT target .dc-home-services-scroll / .dc-home-services-cta. */
@layer dc-home-cta {
  body.dc-home-page :is(
    .hero .primaryBtn, .hero .secondaryBtn,
    .aiSignalSection a[href], .aiFirstMoreBtn,
    .problemProductCta, .aiAppsCaseBtn,
    .insightsViewAll, .nextMoveButton, .finalCtaButton,
    .costSection a[href="/contact"]
  ) {
    box-sizing: border-box !important;
    min-height: 50px !important;
    height: auto !important;
    border-radius: 999px !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 100% !important;
  }

  /* Preserve natural widths, content, and original background treatments for
     secondary/outline actions; only correct filled brand variants. */
  body.dc-home-page :is(.hero .primaryBtn, .finalCtaButton) {
    background: #57D97D !important;
    color: #FFFFFF !important;
    border-color: #57D97D !important;
  }
  body.dc-home-page :is(.aiAppsCaseBtn, .insightsViewAll, .nextMoveButton,
    .costSection a[href="/contact"]) {
    background: #00295E !important;
    color: #FFFFFF !important;
  }
  body.dc-home-page .hero .secondaryBtn {
    color: #FFFFFF !important;
  }
  /* Keep the circles, but make every arrow on filled actions white. */
  body.dc-home-page .hero .primaryBtn .circleArrow.light {
    background: #57D97D !important;
    color: #FFFFFF !important;
  }
  body.dc-home-page :is(.aiAppsCaseBtnIcon, .insightsViewAllIcon,
    .costSection a[href="/contact"] span[class*="ctaArrow"]) {
    background: #00295E !important;
    color: #FFFFFF !important;
  }
  body.dc-home-page :is(.nextMoveButton svg, .finalCtaButton svg,
    .aiAppsCaseBtn svg, .insightsViewAll svg,
    .hero .primaryBtn svg, .costSection a[href="/contact"] svg) {
    color: #FFFFFF !important;
  }

  /* Cost-delivery carousel has a separate large-button rule: make its CTA
     consistent without changing its containing card, image, or controls. */
  body.dc-home-page .costSection a[href="/contact"] {
    min-height: 50px !important;
    padding: 7px 8px 7px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
  }
  body.dc-home-page .costSection a[href="/contact"] span[class*="ctaArrow"] {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  body.dc-home-page .costSection a[href="/contact"] svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* The outlined AI-signal section CTA has its own CSS module sizing. */
  body.dc-home-page .aiSignalSection a[href] {
    padding: 7px 18px !important;
    border-radius: 999px !important;
    min-height: 50px !important;
  }

  /* Only SVG arrows move; button text and outer link geometry stay fixed. */
  body.dc-home-page :is(.hero .primaryBtn, .hero .secondaryBtn,
    .problemProductCta, .aiAppsCaseBtn, .aiFirstMoreBtn,
    .insightsViewAll, .nextMoveButton, .finalCtaButton,
    .aiSignalSection a[href], .costSection a[href="/contact"]) svg {
    flex-shrink: 0 !important;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    body.dc-home-page :is(.hero .primaryBtn, .hero .secondaryBtn,
      .problemProductCta, .aiAppsCaseBtn):hover .homeActionArrowSvg {
      transform: translate(3px, -3px) !important;
    }
    body.dc-home-page :is(.aiFirstMoreBtn, .insightsViewAll, .nextMoveButton,
      .finalCtaButton, .aiSignalSection a[href],
      .costSection a[href="/contact"]):hover svg {
      transform: translateX(3px) !important;
    }
    body.dc-home-page :is(.hero .primaryBtn, .finalCtaButton):hover {
      background: #57D97D !important;
      color: #FFFFFF !important;
    }
    body.dc-home-page :is(.aiAppsCaseBtn, .insightsViewAll, .nextMoveButton,
      .costSection a[href="/contact"]):hover {
      background: #00295E !important;
      color: #FFFFFF !important;
    }
  }
  @media (max-width: 767px) {
    body.dc-home-page :is(.hero .primaryBtn, .hero .secondaryBtn,
      .aiSignalSection a[href], .aiFirstMoreBtn, .problemProductCta,
      .aiAppsCaseBtn, .insightsViewAll, .nextMoveButton, .finalCtaButton,
      .costSection a[href="/contact"]) {
      min-height: 48px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body.dc-home-page :is(.hero .primaryBtn, .hero .secondaryBtn,
      .problemProductCta, .aiAppsCaseBtn, .aiFirstMoreBtn,
      .insightsViewAll, .nextMoveButton, .finalCtaButton,
      .aiSignalSection a[href], .costSection a[href="/contact"]) svg,
    body.dc-home-page :is(.hero .primaryBtn, .hero .secondaryBtn,
      .problemProductCta, .aiAppsCaseBtn):hover .homeActionArrowSvg,
    body.dc-home-page :is(.aiFirstMoreBtn, .insightsViewAll, .nextMoveButton,
      .finalCtaButton, .aiSignalSection a[href],
      .costSection a[href="/contact"]):hover svg {
      transition: none !important;
      transform: none !important;
    }
  }
}

/* Uploaded services reference, isolated from the rest of Home. */
/* Clip horizontal overspill without creating a body scroll container that
   prevents the reference's sticky viewport from following document scroll. */
html.dc-home-page, body.dc-home-page {
  overflow-x: clip;
  overflow-y: visible;
}
.homeSections > .dc-home-services-scroll { margin-top: 0; }
.dc-home-services-scroll, .dc-home-services-scroll * {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
.dc-home-services-scroll {

  --mint: #00efd4;
  --pill: #00275B;
  --ink: #060606;
  --left: 10.43vw;
  --clip-width: 78.2vw;
  --card-width: 376px;
  --card-height: 282px;
  --card-gap: 18px;
  --pill-height: 66px;
  --card-gap-y: 36px;
  color: var(--ink);
  line-height: normal;
  letter-spacing: normal;
  text-rendering: geometricPrecision;
}
.dc-home-service-card-slot { flex: 0 0 var(--card-width); }
.dc-home-services-scroll h3, .dc-home-services-scroll p { overflow-wrap: normal; }
.dc-home-services-scroll {
  position: relative;
  isolation: isolate;
  z-index: 2147483100;
  height: 440vh;
  background: #ffffff;
}

.dc-home-services-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
  contain: paint;
}

.dc-home-services-pinned-content {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.dc-home-services-heading {
  position: absolute;
  z-index: 20;
  top: clamp(62px, 7.8vh, 86px);
  left: var(--left);
  width: min(1120px, 79vw);
  pointer-events: none;
  will-change: transform;
  font-family: Arial, Helvetica, sans-serif;
}

/* Heading stack stays locked so responsive widths do not change the composition. */
.dc-home-eyebrow {
  display: block;
  width: max-content;
  font-size: clamp(25px, 2.05vw, 39px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -1.05px;
  white-space: nowrap;
  transform: scaleX(1.055);
  transform-origin: left center;
}

.dc-home-ai-first {
  display: block;
  width: max-content;
  margin-top: 0;
  margin-left: 0;
  color: var(--mint);
  font-size: clamp(92px, 8.7vw, 166px);
  line-height: 0.79;
  font-weight: 700;
  letter-spacing: -5.6px;
  white-space: nowrap;
  transform: scaleX(1.06);
  transform-origin: left center;
}

.dc-home-services-line {
  display: block;
  width: max-content;
  margin-top: 13px;
  font-size: clamp(24px, 2.0vw, 38px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -1.45px;
  white-space: nowrap;
  transform: scaleX(1.075);
  transform-origin: left center;
}

.dc-home-services-line strong { font-weight: 700; }

.dc-home-services-heading p {
  display: block;
  margin: 7px 0 0;
  max-width: 900px;
  font-size: clamp(13px, 0.88vw, 17px);
  line-height: 1.28;
  letter-spacing: -0.3px;
}

.dc-home-groups-window {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 4;
}

.dc-home-service-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform, opacity;
  transform: translate3d(0, 37vh, 0);
}

.dc-home-category-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: var(--pill-height);
  margin-left: var(--left);
  padding: 13px 16px 12px;
  border-radius: 28px;
  background: var(--pill);
  color: #ffffff;
  font-size: clamp(15px, 1.02vw, 19px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.dc-home-cards-clip {
  width: var(--clip-width);
  height: var(--card-height);
  margin-top: var(--card-gap-y);
  margin-left: var(--left);
  overflow: hidden;
  will-change: clip-path;
  clip-path: inset(0 0 0 0);
}

.dc-home-cards-row {
  display: flex;
  width: max-content;
  gap: var(--card-gap);
  padding: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.dc-home-service-card {
  display: block;
  position: relative;
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  height: var(--card-height);
  overflow: hidden;
  border: 1.6px solid #111111;
  border-radius: 30px;
  background: #ffffff;
  padding: 30px 28px 24px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.dc-home-service-card:hover {
  border-color: var(--pill);
  color: var(--ink);
  text-decoration: none;
}

.dc-home-service-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--pill);
}

.dc-home-card-arrow {
  position: absolute;
  top: 34px;
  right: 26px;
  font-size: 25px;
  line-height: 1;
  font-weight: 300;
  transition: transform 180ms ease;
}

.dc-home-service-card:hover .dc-home-card-arrow,
.dc-home-service-card:focus-visible .dc-home-card-arrow { transform: translateX(3px); }

.dc-home-card-icon {
  width: 52px;
  height: 52px;
  color: #050505;
}

.dc-home-card-icon svg {
  display: block;
  width: 52px;
  height: 52px;
}

.dc-home-service-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.06;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.dc-home-service-card p {
  max-width: 295px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.22px;
}

/* Final CTA lives inside the same sticky viewport as the service rows.
   It is revealed by the final portion of the service scroll timeline so the
   user experiences one continuous story instead of a separate hard-cut section. */
.dc-home-services-cta {
  position: absolute;
  z-index: 32;
  top: clamp(300px, 43.5vh, 430px);
  left: var(--left);
  width: min(1180px, 80vw);
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  pointer-events: none;
  will-change: transform, opacity;
}

.dc-home-services-cta-inner {
  width: 100%;
}

.dc-home-services-cta h2 {
  margin: 0;
  width: max-content;
  font-size: clamp(58px, 6.25vw, 112px);
  line-height: 0.84;
  letter-spacing: -4px;
  font-weight: 700;
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  will-change: transform, opacity;
}

.dc-home-services-cta h2 span {
  color: var(--mint);
}

.dc-home-services-cta p {
  margin: 16px 0 24px;
  max-width: 1060px;
  font-size: clamp(20px, 1.78vw, 32px);
  line-height: 1.05;
  letter-spacing: -1.05px;
  font-weight: 700;
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  will-change: transform, opacity;
}

.dc-home-services-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--pill);
  color: #ffffff;
  padding: 15px 23px 15px 25px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.25px;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.955);
  transform-origin: center;
  will-change: transform, opacity;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.dc-home-services-cta button span {
  display: inline-block;
  font-size: 21px;
  line-height: 1;
  transition: transform 180ms ease;
}

.dc-home-services-cta button:hover {
  background: #087d65;
  box-shadow: 0 10px 28px rgba(11, 152, 120, 0.18);
}

.dc-home-services-cta button:hover span {
  transform: translateX(4px);
}

.dc-home-services-cta button:focus-visible {
  outline: 3px solid rgba(20, 255, 210, 0.55);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .dc-home-services-scroll {
    --left: 5.5vw;
    --clip-width: 89vw;
    --card-width: min(340px, 73vw);
    --card-height: 260px;
    --card-gap: 16px;
    --pill-height: 54px;
    --card-gap-y: 26px;
  }

  .dc-home-services-heading {
    top: clamp(46px, 6.4vh, 70px);
    width: 89vw;
  }

  .dc-home-eyebrow { font-size: clamp(21px, 2.8vw, 30px); }

  .dc-home-ai-first {
    font-size: clamp(66px, 9.8vw, 108px);
    letter-spacing: -3.8px;
    transform: scaleX(1.03);
  }

  .dc-home-services-line {
    max-width: 89vw;
    font-size: clamp(18px, 2.65vw, 27px);
    letter-spacing: -0.9px;
    white-space: nowrap;
    transform: scaleX(1.02);
  }

  .dc-home-services-heading p {
    max-width: 84vw;
    font-size: 13px;
  }

  .dc-home-service-card {
    border-radius: 27px;
    padding: 25px 24px 21px;
  }

  .dc-home-services-cta {
    top: clamp(290px, 44vh, 405px);
    width: 89vw;
  }

  .dc-home-services-cta h2 {
    font-size: clamp(54px, 9.8vw, 92px);
    letter-spacing: -3px;
  }
}

@media (max-width: 700px) {
  .dc-home-services-scroll {
    --left: 5vw;
    --clip-width: 90vw;
    --card-width: 90vw;
    --card-height: 282px;
    --card-gap: 12px;
    --pill-height: 46px;
    --card-gap-y: 18px;
  }

  .dc-home-services-heading {
    top: clamp(18px, 2.8dvh, 30px);
    left: 5vw;
    width: 90vw;
  }

  .dc-home-eyebrow {
    font-size: clamp(17px, 5vw, 20px);
    letter-spacing: -0.45px;
  }

  .dc-home-ai-first {
    margin-top: 0;
    font-size: clamp(44px, 12.6vw, 58px);
    line-height: 0.82;
    letter-spacing: -2.2px;
    transform: scaleX(1);
  }

  .dc-home-services-line {
    margin-top: 8px;
    max-width: none;
    font-size: clamp(11.8px, 3.35vw, 18px);
    line-height: 1;
    letter-spacing: -0.38px;
    white-space: nowrap;
    transform: scaleX(1.01);
  }

  .dc-home-services-heading p {
    width: min(90vw, 430px);
    margin-top: 5px;
    font-size: clamp(10px, 2.75vw, 11.5px);
    line-height: 1.28;
  }

  .dc-home-category-pill {
    min-height: var(--pill-height);
    margin-left: 5vw;
    max-width: 90vw;
    padding: 9px 13px;
    border-radius: 22px;
    font-size: clamp(12.5px, 3.55vw, 14px);
  }

  .dc-home-cards-clip {
    margin-left: 5vw;
    border-radius: 22px;
  }

  /* Row 01 is autoplayed by JS. Later rows remain swipeable on touch so every
     service stays reachable on a one-card-wide mobile viewport. */
  .dc-home-service-group:not(.dc-home-service-group-1) .dc-home-cards-clip {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dc-home-service-group:not(.dc-home-service-group-1) .dc-home-cards-clip::-webkit-scrollbar {
    display: none;
  }

  .dc-home-service-group:not(.dc-home-service-group-1) .dc-home-service-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .dc-home-service-card {
    border-radius: 22px;
    padding: 20px 20px 18px;
  }

  .dc-home-card-icon,
  .dc-home-card-icon svg {
    width: 42px;
    height: 42px;
  }

  .dc-home-card-arrow {
    top: 23px;
    right: 19px;
    font-size: 21px;
  }

  .dc-home-service-card h3 {
    margin-bottom: 7px;
    font-size: clamp(16.5px, 4.5vw, 18px);
  }

  .dc-home-service-card p {
    max-width: calc(100% - 4px);
    font-size: clamp(13px, 3.45vw, 14px);
    line-height: 1.4;
  }

  .dc-home-services-cta {
    top: clamp(300px, 45dvh, 390px);
    left: 5vw;
    width: 90vw;
  }

  .dc-home-services-cta h2 {
    font-size: clamp(46px, 14.8vw, 66px);
    line-height: 0.88;
    letter-spacing: -2.5px;
  }

  .dc-home-services-cta p {
    margin: 12px 0 18px;
    max-width: 90vw;
    font-size: clamp(16px, 5vw, 21px);
    line-height: 1.1;
    letter-spacing: -0.55px;
  }

  .dc-home-services-cta button {
    min-height: 50px;
    gap: 15px;
    padding: 13px 18px 13px 20px;
    font-size: 13px;
  }
}


@media (max-width: 700px) and (max-height: 680px) {
  .dc-home-eyebrow { font-size: 16px; }
  .dc-home-ai-first { font-size: clamp(42px, 12.2vw, 54px); }
  .dc-home-services-line { font-size: clamp(11px, 3.1vw, 15px); }
  .dc-home-services-heading p { font-size: 9.8px; }
  .dc-home-service-card { padding-top: 18px; padding-bottom: 16px; }
  .dc-home-card-icon, .dc-home-card-icon svg { width: 38px; height: 38px; }
  .dc-home-service-card p { line-height: 1.34; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .dc-home-services-heading {
    top: 40px;
  }

  .dc-home-eyebrow { font-size: 23px; }
  .dc-home-ai-first { font-size: min(12vh, 96px); }
  .dc-home-services-line { font-size: 22px; }
  .dc-home-services-heading p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-home-services-scroll { height: auto; }

  .dc-home-services-sticky {
    position: relative;
    height: auto;
    min-height: 1650px;
    overflow: hidden;
  }

  .dc-home-services-pinned-content,
  .dc-home-service-group,
  .dc-home-cards-row,
  .dc-home-services-heading,
  .dc-home-services-cta,
  .dc-home-services-cta h2,
  .dc-home-services-cta p,
  .dc-home-services-cta button {
    transform: none !important;
  }

  .dc-home-service-group {
    position: relative;
    margin-bottom: 36px;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dc-home-services-heading {
    position: relative;
    top: auto;
    padding-top: 80px;
  }

  .dc-home-groups-window {
    position: relative;
    margin-top: 120px;
  }

  .dc-home-cards-clip { clip-path: none !important; }

  .dc-home-services-cta {
    position: relative;
    top: auto;
    left: var(--left);
    margin-top: 52px;
    padding-bottom: 72px;
    opacity: 1 !important;
    pointer-events: auto;
  }

  .dc-home-services-cta h2,
  .dc-home-services-cta p,
  .dc-home-services-cta button {
    opacity: 1 !important;
  }
}

/* Later rows can be reached on narrow desktops/tablets as well as phones. */
.dc-home-service-group:not(.dc-home-service-group-1) .dc-home-cards-clip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.dc-home-service-group:not(.dc-home-service-group-1) .dc-home-cards-clip::-webkit-scrollbar { display: none; }

@media (max-width: 700px) {
  .dc-home-ai-first { font-size: clamp(32px, 11.8vw, 54px); }
}

@media (max-height: 480px) {
  .dc-home-services-heading { top: 16px; }
  .dc-home-ai-first { font-size: min(44px, 11.8vw); line-height: .82; letter-spacing: -2px; }
  .dc-home-services-line { font-size: 13px; margin-top: 8px; letter-spacing: -.35px; }
  .dc-home-category-pill { padding: 9px 13px; font-size: 13px; }
  .dc-home-service-card { padding: 16px 18px; overflow-y: auto; scrollbar-width: none; }
  .dc-home-card-icon, .dc-home-card-icon svg { width: 34px; height: 34px; }
  .dc-home-card-arrow { top: 20px; right: 18px; }
  .dc-home-service-card h3 { font-size: 17px; margin-bottom: 7px; }
  .dc-home-service-card p { font-size: 13px; line-height: 1.35; }
  .dc-home-services-cta { top: 36%; }
  .dc-home-services-cta h2 { font-size: 48px; letter-spacing: -2px; }
  .dc-home-services-cta p { font-size: 18px; margin: 12px 0 18px; }
  .dc-home-services-cta button { min-height: 48px; padding: 13px 20px; font-size: 13px; }
}

/* Motion preference uses normal document flow, with each unique card reachable. */
@media (prefers-reduced-motion: reduce) {
  .dc-home-service-card, .dc-home-card-arrow { transition: none; }
  .dc-home-service-card:hover .dc-home-card-arrow,
  .dc-home-service-card:focus-visible .dc-home-card-arrow { transform: none; }
  .dc-home-services-sticky { min-height: 0; overflow: visible; }
  .dc-home-services-pinned-content { position: relative; inset: auto; }
  .dc-home-service-group { top: auto; }
  .dc-home-cards-clip { height: auto; overflow: visible !important; }
  .dc-home-cards-row { width: 100%; flex-wrap: wrap; }
  .dc-home-service-card-slot[data-loop-copy] { display: none; }
  .dc-home-services-cta { margin-top: 52px; }
  .dc-home-services-heading { opacity: 1 !important; }
}

/* Reference card edges and restored action. Original outer dimensions stay intact. */
.dc-home-services-scroll {
  --dc-card-line: #000;
  --dc-card-line-active: #000;
  --dc-card-radius-large: 28px;
  --dc-card-shadow-soft: none;
  --dc-card-shadow-hover: none;
  --dc-text-primary: #000;
  --dc-text-body: #000;
  --dc-type-heading-color: #000;
}
.dc-home-service-card {
  border-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dc-home-service-card > * { flex-shrink: 0; }
.dc-home-service-card p { margin-bottom: 12px; }
.dc-home-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 240px;
  max-width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 5px 6px 5px 16px;
  border: 1px solid #000;
  border-radius: 999px;
  background: transparent;
  color: #000;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}
.dc-home-card-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #57D97D;
  color: #000;
}
.dc-home-card-action-icon svg { width: 22px; height: 22px; transition: transform 180ms ease; }
.dc-home-service-card:is(:hover, :focus-visible) .dc-home-card-action-icon svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .dc-home-card-action-icon svg { transition: none; }
  .dc-home-service-card:is(:hover, :focus-visible) .dc-home-card-action-icon svg { transform: none; }
}
@layer dc-cards {
  .dc-home-service-card:focus-visible {
    box-shadow: none !important;
    outline: 2px solid #000 !important;
    outline-offset: -5px !important;
  }
}

/* Requested CTAs: reuse the exact SVG artwork from AI Consultancy's
   "Explore Partnership" button. Scope tightly so other CTA designs stay intact. */
@layer dc-home-cta {
  body.dc-home-page .hero .primaryBtn .circleArrow.light {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  body.dc-home-page :is(.hero .primaryBtn, .nextMoveButton, .dc-home-services-cta-inner > button) .dcPartnershipCtaSvg {
    box-sizing: border-box !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: transform 220ms ease !important;
  }
  body.dc-home-page .hero .primaryBtn .dcPartnershipCtaSvg {
    position: relative !important;
    left: -3px !important;
    top: -3px !important;
  }
  body.dc-home-page .nextMoveButton .dcPartnershipCtaSvg,
  body.dc-home-page .dc-home-services-cta-inner > button .dcPartnershipCtaSvg {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
  }
  body.dc-home-page .nextMoveButton,
  body.dc-home-page .dc-home-services-cta-inner > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }
  body.dc-home-page .dc-home-services-cta-inner > button > span[aria-hidden='true'] {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
  @media (hover: hover) and (pointer: fine) {
    body.dc-home-page :is(.hero .primaryBtn, .nextMoveButton, .dc-home-services-cta-inner > button):hover .dcPartnershipCtaSvg {
      transform: translateX(3px) !important;
    }
  }
  @media (max-width: 420px) {
    body.dc-home-page :is(.hero .primaryBtn, .nextMoveButton, .dc-home-services-cta-inner > button) .dcPartnershipCtaSvg {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      flex: 0 0 36px !important;
    }
    body.dc-home-page .hero .primaryBtn .circleArrow.light {
      width: 34px !important;
      height: 34px !important;
      flex: 0 0 34px !important;
    }
    body.dc-home-page .hero .primaryBtn .dcPartnershipCtaSvg {
      left: -1px !important;
      top: -1px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body.dc-home-page :is(.hero .primaryBtn, .nextMoveButton, .dc-home-services-cta-inner > button) .dcPartnershipCtaSvg {
      transition: none !important;
      transform: none !important;
    }
  }
}

/* Original: assets/css/service-contact-form.css */
/* ========================================================================
   DEEPCIPHERS — ONE MASTER CONSULTATION FORM
   Reference: Web Development page.
   This file is the ONLY visual source of truth for #lets-talk on Home and
   every Service page. Page-specific form overrides were removed.
   ======================================================================== */

#lets-talk,
#lets-talk * { box-sizing: border-box; }

#lets-talk.lets-talk-section {
  --dc-form-green: #26D06A;
  --dc-form-heading: #050505;
  --dc-form-body: #5f666d;
  --dc-form-copy: #333333;
  --dc-form-black: #000000;
  --dc-form-white: #ffffff;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: clamp(76px, 5.3vw, 104px) 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--dc-form-heading) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  scroll-margin-top: 24px;
}

#lets-talk .lets-talk-wrap {
  width: min(calc(100% - (clamp(28px, 4.95vw, 96px) * 2)), 1728px) !important;
  max-width: 1728px !important;
  min-height: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 483px) !important;
  gap: clamp(44px, 7vw, 136px) !important;
  align-items: center !important;
  justify-content: center !important;
}

#lets-talk .talk-content {
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#lets-talk .talk-heading,
#lets-talk .talk-heading span { font-family: "Plus Jakarta Sans", Arial, sans-serif !important; }

#lets-talk .talk-heading {
  max-width: 1180px !important;
  margin: 0 0 clamp(44px, 4vw, 76px) !important;
  padding: 0 !important;
  color: var(--dc-form-heading) !important;
  -webkit-text-fill-color: var(--dc-form-heading) !important;
  font-size: clamp(58px, 5.25vw, 102px) !important;
  line-height: .96 !important;
  font-weight: 700 !important;
  letter-spacing: -.075em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

#lets-talk .talk-heading .accent,
#lets-talk .talk-heading span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dc-form-green) !important;
  -webkit-text-fill-color: var(--dc-form-green) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

#lets-talk .talk-subtitle {
  max-width: 720px !important;
  margin: -28px 0 clamp(20px, 1.8vw, 34px) !important;
  padding: 0 !important;
  color: var(--dc-form-body) !important;
  -webkit-text-fill-color: var(--dc-form-body) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(26px, 2vw, 40px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
}

#lets-talk .talk-description {
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dc-form-copy) !important;
  -webkit-text-fill-color: var(--dc-form-copy) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#lets-talk .rating-grid,
#lets-talk .rating-logo-grid {
  width: 100% !important;
  max-width: 678px !important;
  margin: 50px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 318px) minmax(160px, 214px) !important;
  column-gap: 58px !important;
  row-gap: 34px !important;
  align-items: center !important;
}

#lets-talk .rating-item,
#lets-talk .rating-logo-item {
  min-width: 0 !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  color: #000000 !important;
}

#lets-talk .rating-logo {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}
#lets-talk .rating-logo-upwork { width: 318px !important; }
#lets-talk .rating-logo-clutch { width: 173px !important; }
#lets-talk .rating-logo-goodfirms { width: 214px !important; }

#lets-talk .contact-card {
  width: 100% !important;
  max-width: 483px !important;
  min-height: 820px !important;
  margin: 0 !important;
  padding: 36px 32px 34px !important;
  position: relative !important;
  z-index: 4 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 32px !important;
  background: var(--dc-form-black) !important;
  background-color: var(--dc-form-black) !important;
  color: var(--dc-form-white) !important;
  box-shadow: none !important;
}

#lets-talk .contact-form {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  overflow: visible !important;
  background: transparent !important;
}

#lets-talk .input-icon-wrap,
#lets-talk .dropdown-wrap,
#lets-talk .custom-select {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#lets-talk .field,
#lets-talk .textarea-field,
#lets-talk button.custom-trigger {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 5px !important;
  outline: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  box-shadow: none !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#lets-talk .field,
#lets-talk button.custom-trigger {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
}

#lets-talk .textarea-field {
  height: 72px !important;
  min-height: 72px !important;
  padding: 14px 16px !important;
  resize: vertical !important;
}

#lets-talk .field::placeholder,
#lets-talk .textarea-field::placeholder {
  color: #a8a8a8 !important;
  -webkit-text-fill-color: #a8a8a8 !important;
  opacity: 1 !important;
}

#lets-talk .field:focus,
#lets-talk .textarea-field:focus,
#lets-talk button.custom-trigger:focus,
#lets-talk button.custom-trigger:focus-visible {
  border-color: var(--dc-form-green) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#lets-talk .input-icon-wrap .field { padding-left: 44px !important; }
#lets-talk .input-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 17px !important;
  height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9c9c9c !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
#lets-talk .input-icon svg { width: 17px !important; height: 17px !important; display: block !important; }
#lets-talk .phone-field { height: 46px !important; min-height: 46px !important; padding-left: 62px !important; }

#lets-talk button.phone-code {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 8 !important;
  min-width: 38px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #9c9c9c !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

#lets-talk .flag {
  width: 22px !important;
  height: 16px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
#lets-talk .flag img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; }

#lets-talk .tiny-caret,
#lets-talk .select-caret {
  width: 0 !important;
  height: 0 !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid #9a9a9a !important;
  background: transparent !important;
}

#lets-talk button.custom-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #a5a5a5 !important;
  -webkit-text-fill-color: #a5a5a5 !important;
  text-align: left !important;
  cursor: pointer !important;
}
#lets-talk button.custom-trigger.has-value,
#lets-talk .custom-select.has-value button.custom-trigger { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
#lets-talk .trigger-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#lets-talk button.custom-trigger.active .select-caret { transform: rotate(180deg) !important; }

#lets-talk .menu-panel {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  z-index: 9999 !important;
  width: 100% !important;
  max-height: 306px !important;
  overflow-y: auto !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 0 3px 3px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #6f8794 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
}
#lets-talk .dropdown-wrap.open { z-index: 10000 !important; }
#lets-talk .dropdown-wrap.open > .menu-panel { display: block !important; }
#lets-talk .phone-menu { left: 0 !important; top: 100% !important; width: min(300px, 100%) !important; max-height: 202px !important; }
#lets-talk .option-row {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: #6f8794 !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 44px !important;
  font-weight: 400 !important;
}
#lets-talk .option-row:hover,
#lets-talk .option-row:focus-visible,
#lets-talk .option-row.selected,
#lets-talk .option-row.blue-selected { outline: 0 !important; background: #cfe8ff !important; color: #2681dd !important; }
#lets-talk .dial { margin-left: auto !important; color: #7d8790 !important; }
#lets-talk .menu-panel::-webkit-scrollbar,
#lets-talk .phone-menu::-webkit-scrollbar { width: 14px !important; }
#lets-talk .menu-panel::-webkit-scrollbar-track,
#lets-talk .phone-menu::-webkit-scrollbar-track { background: #f3f3f3 !important; }
#lets-talk .menu-panel::-webkit-scrollbar-thumb,
#lets-talk .phone-menu::-webkit-scrollbar-thumb { background: #8f8f8f !important; border-radius: 10px !important; border: 3px solid #f3f3f3 !important; }

#lets-talk .error-msg {
  display: none;
  min-height: 0 !important;
  margin: -14px 0 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}
#lets-talk .error-msg.show { display: block !important; }
#lets-talk .field.invalid,
#lets-talk .textarea-field.invalid,
#lets-talk button.custom-trigger.invalid { border-color: #ef6a5b !important; }
#lets-talk .form-status {
  display: none;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
#lets-talk .form-status.show { display: block !important; }
#lets-talk .form-status.success { background: #0f5132 !important; }
#lets-talk .form-status.error { background: #842029 !important; }

#lets-talk .consent-row {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
#lets-talk .consent-row input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  cursor: pointer !important;
}
#lets-talk .consent-row input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #000000 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
#lets-talk .consent-row label {
  max-width: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
}

#lets-talk form button.meeting-btn.dc-master-btn[type="submit"],
#lets-talk button.meeting-btn.dc-master-btn[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 40px 0 0 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: #f3f3f3 !important;
  background-color: #f3f3f3 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  box-shadow: none !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#lets-talk button.meeting-btn.dc-master-btn[type="submit"] > span { width: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; text-align: center !important; }
#lets-talk button.meeting-btn.dc-master-btn[type="submit"] img,
#lets-talk button.meeting-btn.dc-master-btn[type="submit"] svg,
#lets-talk button.meeting-btn.dc-master-btn[type="submit"] .service-button-arrow,
#lets-talk button.meeting-btn.dc-master-btn[type="submit"]::before,
#lets-talk button.meeting-btn.dc-master-btn[type="submit"]::after { display: none !important; content: none !important; }
#lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:hover,
#lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus,
#lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:active,
#lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus-visible {
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 40px 0 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: #f3f3f3 !important;
  background-color: #f3f3f3 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
#lets-talk button.meeting-btn.dc-master-btn[type="submit"]:disabled { opacity: .68 !important; cursor: not-allowed !important; }

@media (max-width: 1180px) {
  #lets-talk .lets-talk-wrap { width: min(calc(100% - 56px), 1100px) !important; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important; gap: 44px !important; }
  #lets-talk .rating-grid,
  #lets-talk .rating-logo-grid { grid-template-columns: minmax(0, 318px) minmax(0, 214px) !important; column-gap: 40px !important; row-gap: 28px !important; }
  #lets-talk .rating-item,
  #lets-talk .rating-logo-item { min-height: 68px !important; }
  #lets-talk .rating-logo-upwork { width: 275px !important; }
  #lets-talk .rating-logo-clutch { width: 150px !important; }
  #lets-talk .rating-logo-goodfirms { width: 185px !important; }
}

@media (max-width: 991px) {
  #lets-talk .talk-heading { font-size: clamp(42px, 10vw, 72px) !important; line-height: 1 !important; margin-bottom: clamp(30px, 6vw, 52px) !important; }
  #lets-talk .talk-subtitle { margin-top: -18px !important; }
}

@media (max-width: 860px) {
  #lets-talk.lets-talk-section { min-height: 0 !important; padding: 56px 0 !important; }
  #lets-talk .lets-talk-wrap { width: calc(100% - 40px) !important; max-width: 720px !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 38px !important; align-items: stretch !important; }
  #lets-talk .talk-content { width: 100% !important; max-width: 100% !important; }
  #lets-talk .contact-card { width: 100% !important; max-width: 590px !important; min-height: 800px !important; margin: 0 auto !important; padding: 30px 28px !important; justify-self: center !important; border-radius: 28px !important; }
}

@media (max-width: 768px) {
  #lets-talk .talk-heading { max-width: 100% !important; margin-bottom: 20px !important; font-size: clamp(30px, 8.4vw, 44px) !important; line-height: 1.03 !important; letter-spacing: -.052em !important; }
  #lets-talk .talk-subtitle { margin-top: 0 !important; margin-bottom: 20px !important; font-size: 15px !important; line-height: 1.28 !important; }
  #lets-talk .talk-description { font-size: 14.5px !important; line-height: 1.5 !important; }
  #lets-talk .rating-grid,
  #lets-talk .rating-logo-grid { grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; row-gap: 24px !important; margin-top: 34px !important; }
  #lets-talk .rating-item,
  #lets-talk .rating-logo-item { min-height: 54px !important; }
  #lets-talk .rating-logo-upwork { width: 210px !important; }
  #lets-talk .rating-logo-clutch { width: 122px !important; }
  #lets-talk .rating-logo-goodfirms { width: 155px !important; }
  #lets-talk .contact-form { gap: 20px !important; }
  #lets-talk .field,
  #lets-talk button.custom-trigger { height: 45px !important; min-height: 45px !important; font-size: 13.5px !important; }
  #lets-talk .phone-field { height: 45px !important; min-height: 45px !important; }
  #lets-talk .textarea-field { min-height: 72px !important; font-size: 13.5px !important; }
  #lets-talk .consent-row label { font-size: 13px !important; line-height: 1.4 !important; }
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"],
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:hover,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:active,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus-visible { height: 60px !important; min-height: 60px !important; margin-top: 36px !important; font-size: 17px !important; }
}

@media (max-width: 560px) {
  #lets-talk .rating-grid,
  #lets-talk .rating-logo-grid { grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 30px !important; }
  #lets-talk .rating-item,
  #lets-talk .rating-logo-item { min-height: auto !important; }
  #lets-talk .rating-logo-upwork { width: min(100%, 285px) !important; }
  #lets-talk .rating-logo-clutch { width: 155px !important; }
  #lets-talk .rating-logo-goodfirms { width: 190px !important; }
}

@media (max-width: 480px) {
  #lets-talk.lets-talk-section { padding: 56px 0 !important; }
  #lets-talk .lets-talk-wrap { width: calc(100% - 36px) !important; }
  #lets-talk .talk-heading { font-size: clamp(28px, 8.9vw, 38px) !important; line-height: 1.04 !important; letter-spacing: -.048em !important; margin-bottom: 18px !important; }
  #lets-talk .talk-description { font-size: 14px !important; line-height: 1.48 !important; }
  #lets-talk .contact-card { min-height: 760px !important; padding: 26px 22px !important; border-radius: 24px !important; }
  #lets-talk .field,
  #lets-talk button.custom-trigger { height: 42px !important; min-height: 42px !important; font-size: 14px !important; }
  #lets-talk .phone-field { height: 42px !important; min-height: 42px !important; }
  #lets-talk .textarea-field { min-height: 68px !important; font-size: 14px !important; }
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"],
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:hover,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:active,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus-visible { height: 56px !important; min-height: 56px !important; font-size: 16px !important; }
}

@media (max-width: 390px) {
  #lets-talk .rating-logo-upwork { width: min(100%, 255px) !important; }
  #lets-talk .rating-logo-clutch { width: 140px !important; }
  #lets-talk .rating-logo-goodfirms { width: 170px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #lets-talk *, #lets-talk *::before, #lets-talk *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* React contact-form dropdown reset: preserve original option-row visuals when rendered as buttons. */
#lets-talk button.option-row {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}


/* ========================================================================
   MOBILE VIEWPORT SAFETY — shared Contact/Service consultation form
   Prevent horizontal page scrolling, iOS input zoom, and dropdown overflow.
   ======================================================================== */
#lets-talk,
#lets-talk .lets-talk-wrap,
#lets-talk .talk-content,
#lets-talk .contact-card,
#lets-talk .contact-form,
#lets-talk .input-icon-wrap,
#lets-talk .dropdown-wrap,
#lets-talk .custom-select,
#lets-talk .consent-row {
  min-width: 0 !important;
  max-width: 100% !important;
}

#lets-talk {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

#lets-talk .field,
#lets-talk .textarea-field,
#lets-talk button.custom-trigger,
#lets-talk .menu-panel,
#lets-talk button.option-row,
#lets-talk form button.meeting-btn.dc-master-btn[type="submit"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

#lets-talk .menu-panel,
#lets-talk .phone-menu {
  right: 0 !important;
}

#lets-talk button.option-row {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 768px) {
  #lets-talk.lets-talk-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 52px 0 !important;
    overflow-x: clip !important;
  }

  #lets-talk .lets-talk-wrap {
    width: calc(100% - 28px) !important;
    max-width: 680px !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    gap: 30px !important;
    overflow: visible !important;
  }

  #lets-talk .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  #lets-talk .contact-form {
    width: 100% !important;
    gap: 18px !important;
  }

  /* 16px prevents Safari/iOS focus zoom which can look like horizontal movement. */
  #lets-talk .field,
  #lets-talk .textarea-field,
  #lets-talk button.custom-trigger {
    width: 100% !important;
    font-size: 16px !important;
  }

  #lets-talk .input-icon-wrap .field {
    padding-left: 44px !important;
  }

  #lets-talk .phone-field {
    padding-left: 62px !important;
  }

  #lets-talk .menu-panel,
  #lets-talk .phone-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #lets-talk button.option-row {
    width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 9px 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  #lets-talk .option-row .dial,
  #lets-talk .dial {
    margin-left: auto !important;
    padding-left: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #lets-talk .consent-row {
    width: 100% !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #lets-talk .consent-row label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"],
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:hover,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:active,
  #lets-talk form button.meeting-btn.dc-master-btn[type="submit"]:focus-visible {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 24px !important;
    padding-inline: 14px !important;
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  #lets-talk.lets-talk-section {
    padding: 44px 0 !important;
  }

  #lets-talk .lets-talk-wrap {
    width: calc(100% - 20px) !important;
    gap: 26px !important;
  }

  #lets-talk .contact-card {
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  #lets-talk .contact-form {
    gap: 16px !important;
  }

  #lets-talk .textarea-field {
    min-height: 92px !important;
  }

  #lets-talk .consent-row label {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 360px) {
  #lets-talk .lets-talk-wrap {
    width: calc(100% - 14px) !important;
  }

  #lets-talk .contact-card {
    padding: 20px 12px !important;
  }

  #lets-talk .field,
  #lets-talk .textarea-field,
  #lets-talk button.custom-trigger {
    padding-right: 12px !important;
  }

  #lets-talk button.option-row {
    padding-inline: 10px !important;
  }
}

/* Shared interaction accessibility: keyboard focus + mobile touch target sizing. */
#lets-talk button.phone-code:focus-visible {
  outline: 2px solid var(--dc-form-green) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

@media (max-width: 768px) {
  #lets-talk button.phone-code {
    min-width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  #lets-talk .field,
  #lets-talk button.custom-trigger,
  #lets-talk .phone-field {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Original: assets/css/footer.css */
/* ============================================================
   FOOTER.CSS — Deep Ciphers shared site footer ("Let's Build")
   Banner, brand/social card, Services & Company Links dropdown
   menus, newsletter sign-up box, and every cross-page "lock" rule
   that keeps the footer pixel-identical to the Home page footer
   on every page (including typography previously duplicated in
   main.css and home.css).

   Loaded once, from /includes/footer.php, on every page.
   Do not duplicate these rules in page-specific stylesheets.
   ============================================================ */

/* === Footer menu buttons lock: keep Services / Company Links exactly like home footer ===
   Some inner page CSS uses broad button[class*="btn"] rules. The footer menu class
   includes "btn", so this final high-specificity lock prevents those rules from
   turning footer menu headings into large green pill buttons on other pages. */
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:link,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:visited,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus-visible,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn.active {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(13px, 1.6vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn::before,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover::before,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus::before,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn.active::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  flex: 0 0 10px !important;
  display: inline-block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2ED06E !important;
  background-color: #2ED06E !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn .arr,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover .arr,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus .arr {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2ED06E !important;
  -webkit-text-fill-color: #2ED06E !important;
  font-size: 90% !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  transform: none !important;
  transition: transform 0.3s ease !important;
}

html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn *,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Footer dropdown cards and subscribe button remain home-style on every page. */
html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-menu-dropdown {
  background: #ffffff !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  color: #0a0a0a !important;
}

html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:hover,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:focus {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #2ED06E !important;
  background-color: #2ED06E !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* ============================================================
   Source: footer.css
   ============================================================ */

/* LET'S BUILD — scoped to .letsb-wrap to avoid global resets */
  .letsb-wrap{max-width:1280px;margin:0 auto;padding:24px 40px 52px;background:#fff;color:#0a0a0a;}

    .letsb-section-bg{background:#fff;}

  /* BANNER */
  .letsb-banner-wrap{position:relative;margin-bottom:38px;}
  .letsb-banner-svg{width:100%;display:block;}

  .letsb-arrow-btn{
    position:absolute;
    right:0;
    bottom:-8px;
    width:13.2%;
    aspect-ratio:1.7/1;
    background:#fff;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    border:2px solid #0a0a0a;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    min-width:60px;
  }
  .letsb-arrow-btn span{font-size:clamp(16px,3vw,44px);color:#0a0a0a;line-height:1;}
  .letsb-arrow-btn:hover{background:#f7f7f7;}

  @media (min-width:768px){
    .letsb-banner-wrap{padding-right:18px;}
    .letsb-arrow-btn{
      right:28px;
      bottom:16px;
      width:14.8%;
      max-width:248px;
      min-width:142px;
      aspect-ratio:2/1;
      border-radius:14px;
      border:2px solid #0a0a0a;
      background:#fff;
      box-shadow:none;
    }
    .letsb-arrow-btn span{
      font-size:clamp(22px,2.1vw,44px);
      color:#0a0a0a;
    }
  }

  /* FOOTER ROW */
  .letsb-footer-row{
    display:grid;
    grid-template-columns:minmax(230px,.95fr) minmax(190px,.9fr) minmax(190px,.9fr) minmax(280px,1.15fr);
    gap:28px;
    align-items:start;
  }

  /* BRAND / LOGO AREA */
  .letsb-brand-card{
    min-width:0;
    padding-top:2px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .letsb-logo-slot{
    width:min(250px,100%);
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:18px;
    padding:10px 0;
    border-radius:18px;
    background:transparent;
  }
  .letsb-brand-logo{
    width:min(228px,100%);
    max-height:82px;
    object-fit:contain;
    display:block;
  }
  .letsb-brand-note{
    margin:0 0 20px;
    max-width:310px;
    color:#0a0a0a;
    font-size:clamp(15px,1.35vw,20px);
    line-height:1.55;
    font-weight:400;
  }
  .letsb-socials{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    max-width:300px;
  }
  .letsb-social-link{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0a0a0a;
    text-decoration:none;
    border-radius:12px;
    background:#f7f7f7;
    border:1px solid #e5e5e5;
    transition:color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease;
  }
  .letsb-social-link svg{width:24px;height:24px;display:block;fill:currentColor;}
  .letsb-social-link:hover{
    color:#0a0a0a;
    background:#2ED06E;
    border-color:#2ED06E;
    transform:translateY(-3px);
  }

  /* MENU BUTTON */
  .letsb-menu-btn{
    background:none;border:none;color:#0a0a0a;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-weight:700;
    font-size:clamp(13px,1.6vw,22px);
    letter-spacing:1px;
    cursor:pointer;
    display:flex;align-items:center;gap:10px;
    padding:0;
    white-space:nowrap;
  }
  .letsb-menu-btn::before{content:"";width:10px;height:10px;border-radius:50%;background:#2ED06E;display:inline-block;flex:0 0 10px;}
  .letsb-menu-btn .arr{font-size:90%;font-weight:400;transition:transform 0.3s;color:#2ED06E;}
  .letsb-menu-btn.active .arr{transform:rotate(90deg);}

  /* DROPDOWN CARD */
  .letsb-menu-dropdown{
    background:#fff;
    border:1px solid #e2e2e2;
    box-shadow:0 14px 34px rgba(0,0,0,.06);
    border-radius:16px;
    padding:0 20px;
    margin-top:16px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, padding 0.4s ease;
  }
  .letsb-menu-dropdown.open{max-height:700px;padding:20px;}

  /* SERVICES: 3-column grid */
  .letsb-services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0px 10px;
  }
  .letsb-services-grid a{
    display:block;color:#a7a7a7;text-decoration:none;
    font-size:12.5px;padding:2px 0;line-height:1.5;
    white-space:nowrap;
  }
  .letsb-services-grid a:hover{color:#2ED06E;}

  /* COMPANY LINKS: 2-column grid */
  .letsb-company-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0px 16px;
  }
  .letsb-company-grid a{
    display:block;color:#a7a7a7;text-decoration:none;
    font-size:13px;padding:2px 0;line-height:1.5;
  }
  .letsb-company-grid a:hover{color:#2ED06E;}

  /* SIGNUP */
  .letsb-signup-box{
    background:#fff;
    border:1px solid #e2e2e2;
    box-shadow:0 14px 34px rgba(0,0,0,.06);
    border-radius:16px;
    padding:24px 20px;
  }
  .letsb-signup-title{
    font-size:clamp(18px,2vw,26px);font-weight:700;
    color:#0a0a0a;margin-bottom:16px;
    display:flex;align-items:baseline;gap:8px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
  }
  .letsb-signup-title small{font-size:12px;font-weight:400;color:#a7a7a7;font-family: "Plus Jakarta Sans", Arial, sans-serif;}
  .letsb-email-wrap{
    background:#f7f7f7;border:1px solid #e7e7e7;border-radius:10px;
    padding:12px 14px;display:flex;align-items:center;gap:8px;
    margin-bottom:12px;
  }
  .letsb-email-wrap input{border:none;outline:none;background:transparent;font-size:13px;color:#0a0a0a;width:100%;}
  .letsb-sub-btn{
    width:100%;background:#2ED06E;color:#0a0a0a;
    border:none;border-radius:10px;padding:14px;
    font-size:14px;font-weight:600;cursor:pointer;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
  }
  .letsb-sub-btn:hover{background:#27bd63;}

  /* ── TABLET (≤900px) ── */
  @media(max-width:900px){
    .letsb-wrap{padding:20px 24px 40px;}
    .letsb-footer-row{grid-template-columns:1fr 1fr;gap:24px 20px;}
    .letsb-brand-card{grid-column:1 / -1;display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:22px;align-items:center;}
    .letsb-logo-slot{margin-bottom:0;justify-self:start;width:min(250px,100%);}
    .letsb-brand-note{margin-bottom:14px;max-width:560px;}
    .letsb-socials{max-width:none;}
    .letsb-signup-box{grid-column:1 / -1;}
    .letsb-services-grid{grid-template-columns:repeat(2,1fr);}
    .letsb-banner-wrap{margin-bottom:24px;}
  }

  /* ── MOBILE (≤560px) ── */
  @media(max-width:560px){
    .letsb-wrap{padding:14px 14px 36px;}
    .letsb-footer-row{grid-template-columns:1fr;gap:18px;}
    .letsb-brand-card{grid-column:auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
    .letsb-logo-slot{width:min(230px,100%);min-height:82px;margin:0 auto 14px;justify-content:center;padding:8px 0;}
    .letsb-brand-logo{max-height:74px;width:min(215px,100%);}
    .letsb-brand-note{max-width:420px;margin-left:auto;margin-right:auto;}
    .letsb-socials{justify-content:center;max-width:300px;margin:0 auto;}
    .letsb-social-link{width:40px;height:40px;}
    .letsb-signup-box{grid-column:auto;}
    .letsb-services-grid{grid-template-columns:1fr 1fr;}
    .letsb-company-grid{grid-template-columns:1fr 1fr;}
    .letsb-arrow-btn{border-radius:10px;min-width:44px;}
    .letsb-banner-wrap{margin-bottom:16px;}
  }

  /* ── VERY SMALL (≤360px) ── */
  /* .letsb-socials / .letsb-social-link / .letsb-social-link svg / .letsb-company-grid
     are set again, with identical values, in the "Very small phones" ≤360px block
     further down — kept there only, to avoid a byte-for-byte duplicate rule. */
  @media(max-width:360px){
    .letsb-logo-slot{width:min(205px,100%);min-height:74px;}
    .letsb-brand-logo{max-height:66px;width:min(195px,100%);}
    .letsb-services-grid{grid-template-columns:1fr;}
  }

  /* === SERVICES CARD ONLY: slight width increase so all service text is readable === */
  #letsb-services.letsb-menu-dropdown{
    width:min(540px, calc(100vw - 48px));
    max-width:540px;
    box-sizing:border-box;
  }
  #letsb-services .letsb-services-grid{
    grid-template-columns:minmax(145px, 1fr) minmax(170px, 1.1fr) minmax(125px, .9fr);
    column-gap:18px;
  }
  #letsb-services .letsb-services-grid a{
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
  }

  @media(max-width:900px){
    #letsb-services.letsb-menu-dropdown{
      width:100%;
      max-width:100%;
    }
    #letsb-services .letsb-services-grid{
      grid-template-columns:1fr 1fr;
      column-gap:18px;
    }
  }

  @media(max-width:360px){
    #letsb-services .letsb-services-grid{
      grid-template-columns:1fr;
    }
  }

  /* === FULL RESPONSIVE FIXES (ADDED) === */
  html,body{
    width:100%;
    max-width:100%;
    /* Clip horizontal overflow without creating a second body scroll container. */
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
  }
  .letsb-section-bg,
  .letsb-wrap,
  .letsb-wrap *{
    box-sizing:border-box;
  }
  .letsb-section-bg{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .letsb-wrap{
    width:100%;
    max-width:1280px;
    padding:clamp(14px,2.5vw,24px) clamp(14px,4vw,40px) clamp(36px,5vw,52px);
  }
  .letsb-banner-svg{
    width:100%;
    max-width:100%;
    height:auto;
  }
  .letsb-arrow-btn{
    width:clamp(46px,13.2%,150px);
    min-width:44px;
    max-width:150px;
  }
  .letsb-footer-row,
  .letsb-footer-row > div,
  .letsb-brand-card,
  .letsb-signup-box,
  .letsb-menu-dropdown,
  .letsb-email-wrap{
    min-width:0;
  }
  .letsb-menu-dropdown{
    width:100%;
    max-width:100%;
  }
  .letsb-menu-dropdown.open{
    max-height:1200px;
  }
  .letsb-services-grid a:empty{
    display:none;
  }
  .letsb-services-grid a,
  .letsb-company-grid a,
  #letsb-services .letsb-services-grid a{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .letsb-signup-title{
    flex-wrap:wrap;
  }
  .letsb-email-wrap input{
    min-width:0;
  }

  /* Large tablet / small laptop */
  @media(max-width:1100px){
    .letsb-footer-row{
      grid-template-columns:1fr 1fr;
      gap:24px 20px;
    }
    .letsb-brand-card{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:minmax(190px,280px) 1fr;
      gap:22px;
      align-items:center;
    }
    .letsb-logo-slot{
      margin-bottom:0;
      justify-self:start;
      width:min(250px,100%);
    }
    .letsb-brand-note{
      max-width:620px;
      margin-bottom:14px;
    }
    .letsb-socials{
      max-width:none;
    }
    .letsb-signup-box{
      grid-column:1 / -1;
    }
    #letsb-services.letsb-menu-dropdown{
      width:100%;
      max-width:100%;
    }
    #letsb-services .letsb-services-grid{
      grid-template-columns:1fr 1fr;
      column-gap:18px;
    }
  }

  /* Tablets and phones */
  @media(max-width:640px){
    .letsb-wrap{
      padding:14px 14px 36px;
    }
    .letsb-banner-wrap{
      margin-bottom:22px;
    }
    .letsb-banner-svg text:first-of-type{
      font-size:185px;
    }
    .letsb-banner-svg text:nth-of-type(2){
      font-size:24px;
      letter-spacing:3px;
      transform:translateX(-500px);
    }
    .letsb-footer-row{
      grid-template-columns:1fr;
      gap:20px;
    }
    .letsb-brand-card{
      grid-column:auto;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
      padding:4px 0 8px;
    }
    .letsb-brand-card > div:last-child{
      width:100%;
    }
    .letsb-logo-slot{
      width:min(270px,78vw);
      min-height:auto;
      margin:0 0 12px;
      justify-content:flex-start;
      padding:4px 0;
    }
    .letsb-brand-logo{
      width:100%;
      max-width:250px;
      max-height:84px;
      object-position:left center;
    }
    .letsb-brand-note{
      max-width:100%;
      margin:0 0 18px;
      font-size:clamp(15px,4.2vw,18px);
      line-height:1.6;
    }
    .letsb-socials{
      justify-content:flex-start;
      max-width:100%;
      margin:0;
      gap:14px;
    }
    .letsb-social-link{
      width:42px;
      height:42px;
    }
    .letsb-services-grid,
    #letsb-services .letsb-services-grid,
    .letsb-company-grid{
      grid-template-columns:1fr 1fr;
    }
    .letsb-signup-box{
      grid-column:auto;
      padding:22px 20px;
    }
    .letsb-arrow-btn{
      border-radius:10px;
      bottom:-8px;
    }
  }

  /* Small phones */
  @media(max-width:420px){
    .letsb-wrap{
      padding:14px 14px 34px;
    }
    .letsb-banner-wrap{
      margin-bottom:18px;
    }
    .letsb-logo-slot{
      width:min(240px,80vw);
      margin-bottom:10px;
    }
    .letsb-brand-logo{
      max-width:220px;
      max-height:76px;
    }
    .letsb-brand-note{
      font-size:clamp(14px,4.3vw,17px);
      margin-bottom:16px;
    }
    .letsb-socials{
      gap:12px;
    }
    .letsb-services-grid,
    #letsb-services .letsb-services-grid{
      grid-template-columns:1fr;
    }
    .letsb-company-grid{
      grid-template-columns:1fr 1fr;
      column-gap:12px;
    }
    .letsb-email-wrap{
      padding:12px;
    }
    .letsb-sub-btn{
      padding:13px;
    }
  }

  /* Very small phones */
  @media(max-width:360px){
    .letsb-logo-slot{
      width:min(210px,82vw);
    }
    .letsb-brand-logo{
      max-width:195px;
      max-height:68px;
    }
    .letsb-socials{
      gap:10px;
      max-width:250px;
    }
    .letsb-social-link{
      width:38px;
      height:38px;
      border-radius:10px;
    }
    .letsb-social-link svg{
      width:22px;
      height:22px;
    }
    .letsb-company-grid{
      grid-template-columns:1fr;
    }
  }

/* === Shared footer hardening fixes === */
.letsb-section-bg {
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.letsb-section-bg .letsb-wrap,
.letsb-section-bg .letsb-footer-row,
.letsb-section-bg .letsb-brand-card,
.letsb-section-bg .letsb-signup-box {
  box-sizing: border-box;
}
.letsb-section-bg .letsb-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 2;
}
.letsb-section-bg .letsb-menu-dropdown {
  box-sizing: border-box;
  visibility: visible;
}
.letsb-section-bg .letsb-menu-dropdown.open {
  display: block;
  opacity: 1;
  visibility: visible;
}
.letsb-section-bg .letsb-sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  visibility: visible;
  opacity: 1;
}
.letsb-section-bg .letsb-social-link svg,
.letsb-section-bg .letsb-banner-svg {
  display: block;
}
.letsb-section-bg .letsb-social-link svg path {
  fill: currentColor;
}
.letsb-section-bg a,
.letsb-section-bg button,
.letsb-section-bg input {
  pointer-events: auto;
}

/* === FINAL: screenshot-matched footer dropdown sizing/padding on every page === */
.letsb-section-bg,
.letsb-section-bg .letsb-wrap,
.letsb-section-bg .letsb-footer-row{overflow:visible!important;}
.letsb-section-bg .letsb-footer-row>div{position:relative!important;overflow:visible!important;}
.letsb-section-bg #letsb-services.letsb-menu-dropdown{
  width:min(540px, calc(100vw - 48px))!important;
  max-width:540px!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding-left:20px!important;
  padding-right:20px!important;
  border:1px solid #e2e2e2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(0,0,0,.06)!important;
}
.letsb-section-bg #letsb-services.letsb-menu-dropdown.open{padding:20px!important;max-height:900px!important;overflow:visible!important;}
.letsb-section-bg #letsb-services .letsb-services-grid{
  display:grid!important;
  grid-template-columns:145px 182px 110px!important;
  column-gap:28px!important;
  row-gap:0!important;
  align-items:start!important;
  width:100%!important;
}
.letsb-section-bg #letsb-services .letsb-services-grid a{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  color:#a7a7a7!important;
  -webkit-text-fill-color:#a7a7a7!important;
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:500 !important;
  padding:2px 0!important;
  margin:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-overflow:clip!important;
  overflow:visible!important;
}
.letsb-section-bg #letsb-company.letsb-menu-dropdown{
  width:min(420px, calc(100vw - 48px))!important;
  max-width:420px!important;
  box-sizing:border-box!important;
  padding-left:20px!important;
  padding-right:20px!important;
}
.letsb-section-bg #letsb-company.letsb-menu-dropdown.open{padding:20px!important;max-height:900px!important;overflow:visible!important;}
@media(max-width:1100px){
  .letsb-section-bg #letsb-services.letsb-menu-dropdown,
  .letsb-section-bg #letsb-company.letsb-menu-dropdown{width:100%!important;max-width:100%!important;}
  .letsb-section-bg #letsb-services .letsb-services-grid{grid-template-columns:1fr 1fr!important;column-gap:24px!important;}
}
@media(max-width:640px){
  .letsb-section-bg #letsb-services .letsb-services-grid,
  .letsb-section-bg #letsb-company .letsb-company-grid{grid-template-columns:1fr 1fr!important;column-gap:18px!important;}
}
@media(max-width:420px){
  .letsb-section-bg #letsb-services .letsb-services-grid,
  .letsb-section-bg #letsb-company .letsb-company-grid{grid-template-columns:1fr!important;}
}

/* === COMPANY LINKS dropdown only: screenshot-matched size/padding === */
.letsb-section-bg #letsb-company.letsb-menu-dropdown,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown{
  width:258px!important;
  max-width:258px!important;
  min-width:258px!important;
  box-sizing:border-box!important;
  padding-left:20px!important;
  padding-right:20px!important;
  border:1px solid #e2e2e2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(0,0,0,.06)!important;
}
.letsb-section-bg #letsb-company.letsb-menu-dropdown.open,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open{
  width:258px!important;
  max-width:258px!important;
  min-width:258px!important;
  padding:20px!important;
  max-height:900px!important;
  overflow:visible!important;
}
.letsb-section-bg #letsb-company .letsb-company-grid,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  column-gap:16px!important;
  row-gap:0!important;
  width:100%!important;
  align-items:start!important;
}
.letsb-section-bg #letsb-company .letsb-company-grid a,
html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid a{
  display:block!important;
  color:#a7a7a7!important;
  -webkit-text-fill-color:#a7a7a7!important;
  font-size:13px!important;
  line-height:1.5!important;
  font-weight:500 !important;
  padding:2px 0!important;
  margin:0!important;
  text-decoration:none!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:1100px){
  .letsb-section-bg #letsb-company.letsb-menu-dropdown,
  .letsb-section-bg #letsb-company.letsb-menu-dropdown.open,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open{
    width:258px!important;
    max-width:100%!important;
    min-width:0!important;
  }
}
@media(max-width:420px){
  .letsb-section-bg #letsb-company.letsb-menu-dropdown,
  .letsb-section-bg #letsb-company.letsb-menu-dropdown.open,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .letsb-section-bg #letsb-company .letsb-company-grid,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:16px!important;
  }
}
@media(max-width:340px){
  .letsb-section-bg #letsb-company .letsb-company-grid,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid{
    grid-template-columns:1fr!important;
  }
}

/* ------------------------------------------------------------
   Footer typography (relocated from main.css — was duplicated
   there as a footer-only rule block; kept here as the single
   source of truth so it travels with the rest of the footer).
   ------------------------------------------------------------ */
/* Footer / final CTA */
.letsb-section-bg,
.letsb-section-bg * {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.letsb-banner-svg text {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.letsb-banner-svg text:first-of-type {
  font-weight: var(--dc-weight-extrabold) !important;
  letter-spacing: -0.045em !important;
}

.letsb-banner-svg text:last-of-type {
  font-weight: var(--dc-weight-medium) !important;
  letter-spacing: 0.16em !important;
}

.letsb-brand-note {
  font-size: clamp(0.96rem, 1vw, 1.05rem) !important;
  font-weight: var(--dc-weight-regular) !important;
  line-height: 1.72 !important;
  letter-spacing: -0.008em !important;
}

.letsb-menu-btn {
  font-size: 0.86rem !important;
  font-weight: var(--dc-weight-bold) !important;
}

.letsb-services-grid a,
.letsb-company-grid a {
  font-size: 0.95rem !important;
  font-weight: var(--dc-weight-medium) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.008em !important;
}

.letsb-signup-title {
  font-size: 1rem !important;
  font-weight: var(--dc-weight-extrabold) !important;
  letter-spacing: 0.05em !important;
}

.letsb-signup-title small {
  font-size: 0.85rem !important;
  font-weight: var(--dc-weight-medium) !important;
  letter-spacing: -0.006em !important;
  text-transform: none !important;
}

.letsb-email-wrap input {
  font-size: 0.95rem !important;
  font-weight: var(--dc-weight-regular) !important;
  line-height: 1.2 !important;
}

.letsb-sub-btn {
  font-size: 0.9rem !important;
  font-weight: var(--dc-weight-bold) !important;
  letter-spacing: 0.045em !important;
}

/* ------------------------------------------------------------
   Footer home-page style lock (relocated from an inline <style>
   in includes/footer.php). Kept as the LAST section in this file
   so it continues to win the cascade against everything above,
   exactly as it did as the final inline block on every page.
   Purpose: keeps Services / Company Links buttons identical on
   every page, matching the Home page footer exactly.
   ------------------------------------------------------------ */
html body .letsb-section-bg {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    overflow-x: hidden !important;
  }
  html body .letsb-section-bg,
  html body .letsb-section-bg * {
    box-sizing: border-box !important;
  }
  html body .letsb-section-bg .letsb-wrap {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: clamp(14px, 2.5vw, 24px) clamp(14px, 4vw, 40px) clamp(36px, 5vw, 52px) !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
  }
  html body .letsb-section-bg .letsb-footer-row {
    display: grid !important;
    grid-template-columns: minmax(230px, .95fr) minmax(190px, .9fr) minmax(190px, .9fr) minmax(280px, 1.15fr) !important;
    gap: 28px !important;
    align-items: start !important;
    color: #0a0a0a !important;
  }
  html body .letsb-section-bg .letsb-footer-row > div,
  html body .letsb-section-bg .letsb-brand-card,
  html body .letsb-section-bg .letsb-signup-box,
  html body .letsb-section-bg .letsb-menu-dropdown {
    min-width: 0 !important;
  }

  /* HOME PAGE EXACT FOOTER MENU BUTTON: black text + green dot + green arrow */
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus-visible,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:active,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn.active {
    all: unset !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    cursor: pointer !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
    font-size: clamp(13px, 1.6vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn::before,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover::before,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus::before,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn.active::before {
    content: "" !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    flex: 0 0 10px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #2ED06E !important;
    background-color: #2ED06E !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn .arr,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:hover .arr,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn:focus .arr {
    all: unset !important;
    display: inline-block !important;
    color: #2ED06E !important;
    -webkit-text-fill-color: #2ED06E !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
    font-size: 90% !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    margin-left: 0 !important;
    transform: none !important;
    transition: transform .3s ease !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn.active .arr {
    transform: rotate(90deg) !important;
  }

  /* Closed menu line/dropdown card same as home footer */
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-menu-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    margin-top: 16px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-menu-dropdown.open {
    max-height: 1200px !important;
    padding: 20px !important;
  }
  html body .letsb-section-bg .letsb-services-grid,
  html body .letsb-section-bg #letsb-services .letsb-services-grid {
    display: grid !important;
    grid-template-columns: minmax(145px, 1fr) minmax(170px, 1.1fr) minmax(125px, .9fr) !important;
    gap: 0 18px !important;
  }
  html body .letsb-section-bg .letsb-company-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  html body .letsb-section-bg .letsb-services-grid a,
  html body .letsb-section-bg .letsb-company-grid a {
    display: block !important;
    color: #a7a7a7 !important;
    -webkit-text-fill-color: #a7a7a7 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 2px 0 !important;
    font-weight: 500 !important;
    background: transparent !important;
  }
  html body .letsb-section-bg .letsb-services-grid a:hover,
  html body .letsb-section-bg .letsb-company-grid a:hover {
    color: #2ED06E !important;
    -webkit-text-fill-color: #2ED06E !important;
  }

  /* Newsletter button same as home footer, not affected by page CTA styles */
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:hover,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:focus {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #2ED06E !important;
    background-color: #2ED06E !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    cursor: pointer !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:hover,
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row .letsb-sub-btn:focus {
    background: #27bd63 !important;
    background-color: #27bd63 !important;
  }

  @media (max-width: 1100px) {
    html body .letsb-section-bg .letsb-footer-row {
      grid-template-columns: 1fr 1fr !important;
      gap: 24px 20px !important;
    }
    html body .letsb-section-bg .letsb-brand-card {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: minmax(190px, 280px) 1fr !important;
      gap: 22px !important;
      align-items: center !important;
    }
    html body .letsb-section-bg .letsb-signup-box {
      grid-column: 1 / -1 !important;
    }
    html body .letsb-section-bg .letsb-services-grid,
    html body .letsb-section-bg #letsb-services .letsb-services-grid {
      grid-template-columns: 1fr 1fr !important;
    }
  }
  @media (max-width: 640px) {
    html body .letsb-section-bg .letsb-wrap {
      padding: 14px 14px 36px !important;
    }
    html body .letsb-section-bg .letsb-footer-row {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }
    html body .letsb-section-bg .letsb-brand-card {
      grid-column: auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
    }
    html body .letsb-section-bg .letsb-signup-box {
      grid-column: auto !important;
    }
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row button.letsb-menu-btn {
      font-size: clamp(18px, 5.4vw, 24px) !important;
      gap: 10px !important;
    }
    html body .letsb-section-bg .letsb-services-grid,
    html body .letsb-section-bg #letsb-services .letsb-services-grid,
    html body .letsb-section-bg .letsb-company-grid {
      grid-template-columns: 1fr 1fr !important;
    }
  }
  @media (max-width: 360px) {
    html body .letsb-section-bg .letsb-services-grid,
    html body .letsb-section-bg #letsb-services .letsb-services-grid,
    html body .letsb-section-bg .letsb-company-grid {
      grid-template-columns: 1fr !important;
    }
  }


  /* === FINAL: screenshot-matched footer dropdown sizing/padding on every page === */
  html body .letsb-section-bg,
  html body .letsb-section-bg .letsb-wrap,
  html body .letsb-section-bg .letsb-footer-row {
    overflow: visible !important;
  }
  html body .letsb-section-bg .letsb-footer-row > div {
    position: relative !important;
    overflow: visible !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown {
    width: min(540px, calc(100vw - 48px)) !important;
    max-width: 540px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown.open {
    padding: 20px !important;
    max-height: 900px !important;
    overflow: visible !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid {
    display: grid !important;
    grid-template-columns: 145px 182px 110px !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid a {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    color: #a7a7a7 !important;
    -webkit-text-fill-color: #a7a7a7 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    width: min(420px, calc(100vw - 48px)) !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open {
    padding: 20px !important;
    max-height: 900px !important;
    overflow: visible !important;
  }

  @media (max-width: 1100px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown,
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
      width: 100% !important;
      max-width: 100% !important;
    }
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid {
      grid-template-columns: 1fr 1fr !important;
      column-gap: 24px !important;
    }
  }
  @media (max-width: 640px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
      grid-template-columns: 1fr 1fr !important;
      column-gap: 18px !important;
    }
  }
  @media (max-width: 420px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* === COMPANY LINKS dropdown only: screenshot-matched size/padding === */
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    width: 258px !important;
    max-width: 258px !important;
    min-width: 258px !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open {
    width: 258px !important;
    max-width: 258px !important;
    min-width: 258px !important;
    padding: 20px !important;
    max-height: 900px !important;
    overflow: visible !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    width: 100% !important;
    align-items: start !important;
  }
  html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid a {
    display: block !important;
    color: #a7a7a7 !important;
    -webkit-text-fill-color: #a7a7a7 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  @media (max-width: 1100px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown,
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open {
      width: 258px !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
  }
  @media (max-width: 420px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown,
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
      grid-template-columns: 1fr 1fr !important;
      column-gap: 16px !important;
    }
  }
  @media (max-width: 340px) {
    html body .letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
      grid-template-columns: 1fr !important;
    }
  }

/* === REFERENCE-MATCHED FOOTER BOTTOM STRIP + RIGHT-ALIGNED SOCIALS ===
   The existing social markup remains a single row after the unchanged footer
   columns.  At the reference's 1919px viewport the strip resolves to 156px,
   the icons to 42px, the gap to 14px and the right inset to about 92px. */
html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: clamp(96px, 5.85vw, 112px) !important;
  margin-top: 42px !important;
  margin-right: 0 !important;
  margin-bottom: -52px !important;
  margin-left: -50vw !important;
  padding: 0 clamp(24px, 4.8vw, 92px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #081E42 !important;
  background-color: #081E42 !important;
  border: 0 !important;
}

html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip > .letsb-strip-contact {
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 7px !important;
}

html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-line {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: clamp(14px, 0.92vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.055em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-line:hover,
html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-line:focus-visible {
  color: #2ED06E !important;
  -webkit-text-fill-color: #2ED06E !important;
}

html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-icon {
  width: 28px !important;
  height: 28px !important;
  max-width: none !important;
  flex: 0 0 28px !important;
  color: #2ED06E !important;
}

html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip > .letsb-socials {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}

html body #lets-build.letsb-section-bg .letsb-socials-row.letsb-bottom-strip .letsb-social-link {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.42) !important;
  background-color: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 10px !important;
}

html body #lets-build.letsb-section-bg .letsb-socials-row.letsb-bottom-strip .letsb-social-link:hover,
html body #lets-build.letsb-section-bg .letsb-socials-row.letsb-bottom-strip .letsb-social-link:focus-visible {
  color: #081E42 !important;
  background: #2ED06E !important;
  background-color: #2ED06E !important;
  border-color: #2ED06E !important;
}

@media (max-width: 900px) {
  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip {
    margin-bottom: -40px !important;
  }
}

@media (max-width: 640px) {
  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip {
    min-height: 164px !important;
    margin-top: 32px !important;
    margin-bottom: -36px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip > .letsb-socials {
    width: 100% !important;
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip {
    min-height: 158px !important;
    margin-top: 28px !important;
    margin-bottom: -34px !important;
  }

  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip > .letsb-socials {
    gap: 10px !important;
  }

  html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-line {
    gap: 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.035em !important;
  }

  html body #lets-build.letsb-section-bg .letsb-bottom-strip .letsb-strip-contact-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }
}

@media (max-width: 360px) {
  html body #lets-build.letsb-section-bg .letsb-socials-row.letsb-bottom-strip .letsb-social-link {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}

@media (max-width: 340px) {
  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  html body #lets-build.letsb-section-bg .letsb-wrap > .letsb-socials-row.letsb-bottom-strip > .letsb-socials {
    gap: 8px !important;
  }
}

/* ============================================================
   Reusable Footer component isolation
   Keeps inherited page-level resets from changing the approved
   Home Footer while leaving every selector scoped to this Footer.
   ============================================================ */
html body .letsb-section-bg,
html body .letsb-section-bg .letsb-wrap,
html body .letsb-section-bg .letsb-banner-wrap,
html body .letsb-section-bg .letsb-banner-svg,
html body .letsb-section-bg .letsb-arrow-btn,
html body .letsb-section-bg .letsb-footer-row,
html body .letsb-section-bg .letsb-brand-card,
html body .letsb-section-bg .letsb-logo-slot,
html body .letsb-section-bg .letsb-menu-dropdown,
html body .letsb-section-bg .letsb-services-grid,
html body .letsb-section-bg .letsb-company-grid,
html body .letsb-section-bg .letsb-signup-box,
html body .letsb-section-bg .letsb-email-wrap,
html body .letsb-section-bg .letsb-socials-row,
html body .letsb-section-bg .letsb-socials {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

html body .letsb-section-bg svg {
  max-width: none;
}

html body .letsb-section-bg .letsb-banner-svg {
  max-width: 100%;
}

html body .letsb-section-bg .letsb-brand-logo {
  max-width: none;
}

/* Protect Footer arrow SVG presentation attributes from broad inner-page SVG rules. */
html body #lets-build .letsb-arrow-btn > span > svg,
html body #lets-build #letsb-btn-services > .arr > svg,
html body #lets-build #letsb-btn-company > .arr > svg {
  width: 1em !important;
  height: 0.81em !important;
  max-width: none !important;
}

/* IDs intentionally outrank broad page-level button descendant resets. */
html body #lets-build #letsb-btn-services > .arr,
html body #lets-build #letsb-btn-company > .arr {
  line-height: 1 !important;
}

html body .letsb-section-bg .letsb-banner-svg text:first-of-type,
html body .letsb-section-bg .letsb-banner-svg text:last-of-type {
  font-weight: 400 !important;
  line-height: normal !important;
}

html body .letsb-section-bg .letsb-brand-note {
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: -0.008em !important;
}

html body .letsb-section-bg .letsb-signup-title,
html body .letsb-section-bg .letsb-signup-title small {
  font-weight: 400 !important;
  line-height: normal !important;
}

html body .letsb-section-bg .letsb-email-wrap > span {
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

html body .letsb-section-bg .letsb-email-wrap input {
  margin: 0;
  padding: 1px 2px;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

html body .letsb-section-bg .letsb-social-link,
html body .letsb-section-bg .letsb-social-link svg,
html body .letsb-section-bg .letsb-social-link path {
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
}

/* Preserve the approved Home Footer spacing against inner-page resets. */
html body .letsb-section-bg .letsb-banner-wrap {
  margin: 0 0 38px !important;
}

html body .letsb-section-bg .letsb-brand-card {
  padding: 2px 0 0 !important;
}

html body .letsb-section-bg .letsb-logo-slot {
  margin: 0 0 18px !important;
  padding: 10px 0 !important;
}

html body .letsb-section-bg .letsb-brand-note {
  margin: 0 0 20px !important;
}

html body .letsb-section-bg .letsb-signup-box {
  padding: 24px 20px !important;
}

html body .letsb-section-bg .letsb-signup-title {
  margin: 0 0 16px !important;
}

html body .letsb-section-bg .letsb-email-wrap {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
}

html body .letsb-section-bg .letsb-menu-btn .arr,
html body .letsb-section-bg .letsb-menu-btn .arr svg,
html body .letsb-section-bg .letsb-menu-btn .arr path {
  line-height: 1 !important;
}

@media (max-width: 1100px) {
  html body .letsb-section-bg .letsb-logo-slot {
    margin-bottom: 0 !important;
  }

  html body .letsb-section-bg .letsb-brand-note {
    margin-bottom: 14px !important;
  }
}

@media (max-width: 900px) {
  html body .letsb-section-bg .letsb-banner-wrap {
    margin-bottom: 24px !important;
  }
}

@media (max-width: 640px) {
  html body .letsb-section-bg .letsb-brand-logo {
    max-width: 250px;
  }

  html body .letsb-section-bg .letsb-banner-wrap {
    margin-bottom: 22px !important;
  }

  html body .letsb-section-bg .letsb-brand-card {
    padding: 4px 0 8px !important;
  }

  html body .letsb-section-bg .letsb-logo-slot {
    margin: 0 0 12px !important;
    padding: 4px 0 !important;
  }

  html body .letsb-section-bg .letsb-brand-note {
    margin: 0 0 18px !important;
  }

  html body .letsb-section-bg .letsb-signup-box {
    padding: 22px 20px !important;
  }
}

@media (max-width: 420px) {
  html body .letsb-section-bg .letsb-brand-logo {
    max-width: 220px;
  }

  html body .letsb-section-bg .letsb-banner-wrap {
    margin-bottom: 18px !important;
  }

  html body .letsb-section-bg .letsb-logo-slot {
    margin-bottom: 10px !important;
  }

  html body .letsb-section-bg .letsb-brand-note {
    margin-bottom: 16px !important;
  }

  html body .letsb-section-bg .letsb-email-wrap {
    padding: 12px !important;
  }
}

@media (max-width: 360px) {
  html body .letsb-section-bg .letsb-brand-logo {
    max-width: 195px;
  }
}

/* Web-development page uses high-specificity global rendering/button rules.
   The Footer ID keeps the approved Home component authoritative without
   touching any page-level selector outside this shared Footer. */
html body #lets-build,
html body #lets-build * {
  text-rendering: auto !important;
}

html body #lets-build .letsb-signup-box > button.letsb-sub-btn,
html body #lets-build .letsb-signup-box > button.letsb-sub-btn:hover,
html body #lets-build .letsb-signup-box > button.letsb-sub-btn:focus,
html body #lets-build .letsb-signup-box > button.letsb-sub-btn:active {
  display: inline-flex !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px !important;
  margin: 0 !important;
  gap: normal !important;
  column-gap: normal !important;
  row-gap: normal !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  background: #2ED06E !important;
  background-color: #2ED06E !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html body #lets-build .letsb-signup-box > button.letsb-sub-btn:hover,
html body #lets-build .letsb-signup-box > button.letsb-sub-btn:focus {
  background: #27bd63 !important;
  background-color: #27bd63 !important;
}

html body #lets-build .letsb-signup-box > button.letsb-sub-btn::before,
html body #lets-build .letsb-signup-box > button.letsb-sub-btn::after {
  content: none !important;
  display: none !important;
}

/* Home-only compact CTA geometry: size buttons from their text/content instead
   of the previous fixed 56-60px heights. Inner pages remain unchanged. */
html.page-home body #phHeaderRoot header#siteHeader .ph-desktop-actions > a.ph-touch-btn.dc-master-btn,
html.page-home body #phHeaderRoot header#siteHeader .ph-mobile-actions > a.ph-mobile-cta.dc-master-btn,
html.page-home body #phHeaderRoot a.ph-mobile-primary.dc-master-btn,
html.page-home body #hero a.ph-cta-a.dc-master-btn,
html.page-home body #hero a.ph-cta-b.dc-master-btn,
html.page-home body #wcu-section a.wcu-button.dc-master-btn,
html.page-home body #dc-insights a.fi-btn.dc-master-btn,
html.page-home body #dc-industries a.ind2-btn.dc-master-btn,
html.page-home body #lets-build button.letsb-sub-btn.dc-master-btn {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html.page-home body #hero a.ph-cta-a.dc-master-btn,
html.page-home body #hero a.ph-cta-b.dc-master-btn,
html.page-home body #wcu-section a.wcu-button.dc-master-btn,
html.page-home body #dc-insights a.fi-btn.dc-master-btn,
html.page-home body #dc-industries a.ind2-btn.dc-master-btn {
  gap: 9px !important;
  padding: 4px 5px 4px 18px !important;
}

html.page-home body #hero .ph-cta-icon,
html.page-home body #wcu-section .wcu-button-arrow,
html.page-home body #dc-insights .fi-btn-arrow,
html.page-home body #dc-industries .ind2-btn-arrow {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
}

html.page-home body #phHeaderRoot header#siteHeader .ph-desktop-actions > a.ph-touch-btn.dc-master-btn,
html.page-home body #phHeaderRoot header#siteHeader .ph-mobile-actions > a.ph-mobile-cta.dc-master-btn,
html.page-home body #phHeaderRoot a.ph-mobile-primary.dc-master-btn {
  padding: 7px 16px !important;
  gap: 0 !important;
  justify-content: center !important;
}

html.page-home body #lets-build button.letsb-sub-btn.dc-master-btn {
  padding: 10px 16px !important;
  gap: 0 !important;
  justify-content: center !important;
}

@media (max-width: 767px) {
  html.page-home body #hero a.ph-cta-a.dc-master-btn,
  html.page-home body #hero a.ph-cta-b.dc-master-btn,
  html.page-home body #wcu-section a.wcu-button.dc-master-btn,
  html.page-home body #dc-insights a.fi-btn.dc-master-btn,
  html.page-home body #dc-industries a.ind2-btn.dc-master-btn {
    gap: 8px !important;
    padding: 4px 5px 4px 16px !important;
  }

  html.page-home body #hero .ph-cta-icon,
  html.page-home body #wcu-section .wcu-button-arrow,
  html.page-home body #dc-insights .fi-btn-arrow,
  html.page-home body #dc-industries .ind2-btn-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
  }
}

/* 2026-08-16 — Home Success Stories CTA: compact content-fit width only.
   Keep color, height, typography, arrow and hover behavior unchanged. */
html.page-home body #dc-insights a.fi-btn.dc-master-btn {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* === Mobile-only compact LET'S BUILD banner ===
   Laptop/tablet keep the original footer banner unchanged. */
.letsb-banner-svg--mobile{
  display:none!important;
}

@media (max-width:767px){
  .letsb-banner-svg--desktop{
    display:none!important;
  }
  .letsb-banner-svg--mobile{
    display:block!important;
    width:100%;
    height:auto;
    overflow:visible;
  }
  .letsb-banner-svg--mobile .letsb-mobile-title{
    fill:#fff;
    font-family:"Plus Jakarta Sans", Arial, sans-serif;
    font-size:42px;
    font-weight:700;
    letter-spacing:-1.15px;
  }
  .letsb-banner-svg--mobile .letsb-mobile-subtitle{
    fill:#fff;
    font-family:"Plus Jakarta Sans", Arial, sans-serif;
    font-size:7px;
    font-weight:400;
    letter-spacing:1.05px;
    text-anchor:middle;
  }
  /* The compact mobile SVG already contains its own arrow panel. */
  .letsb-banner-wrap > .letsb-arrow-btn{
    display:none!important;
  }
}


/* 2026-08-16 — Mobile LET'S BUILD exact reference artwork.
   Desktop/laptop remains the original footer banner. */
.letsb-banner-mobile-art{
  display:none!important;
}
@media (max-width:767px){
  html body #lets-build .letsb-banner-svg--desktop{
    display:none!important;
  }
  html body #lets-build .letsb-banner-svg--mobile{
    display:none!important;
  }
  html body #lets-build .letsb-banner-mobile-art{
    display:block!important;
    width:min(100%, 460px)!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 auto!important;
    object-fit:contain!important;
    overflow:visible!important;
  }
  html body #lets-build .letsb-banner-wrap{
    width:100%!important;
    max-width:100%!important;
    padding-inline:8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  /* The supplied mobile artwork already includes the white pill arrow button. */
  html body #lets-build .letsb-banner-wrap > .letsb-arrow-btn{
    display:none!important;
  }
}
@media (max-width:360px){
  html body #lets-build .letsb-banner-mobile-art{
    width:100%!important;
    max-width:100%!important;
  }
}

/* 2026-08-16 verification fix: mobile banner is inline SVG so its text uses the same
   document-loaded Plus Jakarta Sans as the desktop banner (external SVG <img> fonts
   are not reliable across browsers). Keep the reference mobile shape and laptop colors. */
html body #lets-build .letsb-banner-mobile-art .letsb-mobile-art-title {
  fill: #fff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -1.2px !important;
}
html body #lets-build .letsb-banner-mobile-art .letsb-mobile-art-subtitle {
  fill: #fff !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* 2026-08-16 — Success Stories CTA explicit width refinement.
   Width only; preserve all existing colors, typography, height, arrow and hover behavior. */
html.page-home body #dc-insights a.fi-btn.dc-master-btn {
  width: 330px !important;
  min-width: 330px !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  html.page-home body #dc-insights a.fi-btn.dc-master-btn {
    width: 300px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* React/TypeScript newsletter validation status */
.letsb-form-message{
  margin:8px 0 0;
  font-family:"Plus Jakarta Sans",Arial,sans-serif;
  font-size:12px;
  line-height:1.4;
  color:#555;
}
.letsb-sub-btn:disabled{opacity:.65;cursor:not-allowed;}

/* ==========================================================================
   Step 25 — React shared footer responsive hardening
   ==========================================================================
   #lets-build is the single GlobalFooter root. These rules intentionally live
   at the very end of footer.css so page-level legacy styles cannot resize,
   recolor, clip or otherwise break the shared footer on any route.
*/
html body #lets-build.letsb-section-bg {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
  isolation: isolate !important;
  background: #fff !important;
  color: #0a0a0a !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
}

html body #lets-build.letsb-section-bg *,
html body #lets-build.letsb-section-bg *::before,
html body #lets-build.letsb-section-bg *::after {
  box-sizing: border-box !important;
}

html body #lets-build .letsb-wrap,
html body #lets-build .letsb-banner-wrap,
html body #lets-build .letsb-footer-row,
html body #lets-build .letsb-brand-card,
html body #lets-build .letsb-signup-box,
html body #lets-build .letsb-bottom-strip,
html body #lets-build .letsb-socials,
html body #lets-build .letsb-strip-contact {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #lets-build a,
html body #lets-build button,
html body #lets-build input {
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

html body #lets-build .letsb-arrow-btn {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body #lets-build .letsb-menu-btn {
  max-width: 100% !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body #lets-build .letsb-menu-dropdown,
html body #lets-build .letsb-menu-dropdown.open {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body #lets-build .letsb-services-grid,
html body #lets-build .letsb-company-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #lets-build .letsb-services-grid a,
html body #lets-build .letsb-company-grid a {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body #lets-build .letsb-email-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body #lets-build .letsb-email-wrap input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  text-transform: none !important;
}

html body #lets-build .letsb-sub-btn,
html body #lets-build .letsb-sub-btn:hover,
html body #lets-build .letsb-sub-btn:focus,
html body #lets-build .letsb-sub-btn:active {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  white-space: normal !important;
  touch-action: manipulation !important;
}

html body #lets-build .letsb-social-link {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 42px !important;
}

html body #lets-build .letsb-strip-contact-line {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1100px) {
  html body #lets-build .letsb-footer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }

  html body #lets-build .letsb-brand-card,
  html body #lets-build .letsb-signup-box {
    min-width: 0 !important;
  }

  html body #lets-build .letsb-signup-box {
    grid-column: 1 / -1 !important;
  }

  html body #lets-build #letsb-services.letsb-menu-dropdown,
  html body #lets-build #letsb-company.letsb-menu-dropdown,
  html body #lets-build #letsb-services.letsb-menu-dropdown.open,
  html body #lets-build #letsb-company.letsb-menu-dropdown.open {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  html body #lets-build .letsb-wrap {
    width: 100% !important;
    padding: 16px 16px 36px !important;
  }

  html body #lets-build .letsb-banner-wrap {
    margin-bottom: 26px !important;
    padding-inline: 0 !important;
  }

  html body #lets-build .letsb-footer-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html body #lets-build .letsb-signup-box {
    grid-column: auto !important;
    width: 100% !important;
  }

  html body #lets-build .letsb-menu-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    min-height: 44px !important;
  }

  html body #lets-build #letsb-services.letsb-menu-dropdown,
  html body #lets-build #letsb-company.letsb-menu-dropdown,
  html body #lets-build #letsb-services.letsb-menu-dropdown.open,
  html body #lets-build #letsb-company.letsb-menu-dropdown.open {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }

  html body #lets-build #letsb-services .letsb-services-grid,
  html body #lets-build #letsb-company .letsb-company-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
  }

  html body #lets-build .letsb-bottom-strip {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
  }

  html body #lets-build .letsb-strip-contact,
  html body #lets-build .letsb-socials {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #lets-build .letsb-socials {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  html body #lets-build .letsb-brand-logo {
    max-width: min(228px, 75vw) !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  html body #lets-build .letsb-wrap {
    padding-inline: 14px !important;
  }

  html body #lets-build #letsb-services .letsb-services-grid,
  html body #lets-build #letsb-company .letsb-company-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #lets-build .letsb-social-link {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
  }

  html body #lets-build .letsb-menu-btn,
  html body #lets-build .letsb-sub-btn,
  html body #lets-build .letsb-email-wrap input {
    font-size: 14px !important;
  }
}

@media (max-width: 340px) {
  html body #lets-build .letsb-wrap {
    padding-inline: 12px !important;
  }

  html body #lets-build .letsb-socials {
    gap: 8px !important;
  }
}

/* Services and Company Links dropdowns: compact, balanced links only.
   Kept last to resolve older, conflicting three-column / fixed-width rules. */
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}

@media (min-width: 1101px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown {
    width: min(465px, calc(100vw - 48px)) !important;
    max-width: 465px !important;
    min-width: 0 !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    width: 230px !important;
    max-width: 230px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Original: assets/css/brand-typography.css */
/* DeepCiphers / Module 1: typography only.
   Important declarations are contained in one cascade layer so legacy page
   overrides cannot fragment the type system. No layout, component surfaces,
   button geometry, section gaps, borders or animation rules belong here. */
/* DeepCiphers Brush: selected free, self-hosted Kaushan Script derivative.
   Copyright and redistribution terms: /assets/fonts/deepciphers-brush/OFL.txt. */
@font-face {
  font-family: 'DeepCiphers Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/deepciphers-brush/DeepCiphersBrush-Regular.woff') format('woff');
}


@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'DeepCiphers Jakarta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-700.woff2') format('woff2'); }

@layer dc-typography {
  :root {
    --dc-type-family: 'DeepCiphers Jakarta', 'Plus Jakarta Sans', Arial, sans-serif;
    --dc-type-ink: #000;
    --dc-type-accent: #26D06A;
    --dc-type-heading-color: var(--dc-type-ink);
    --dc-type-accent-color: #26D06A;
    --dc-type-accent-decoration: none;
    --dc-type-handwritten-family: 'DeepCiphers Brush', var(--dc-type-family);
    --dc-type-handwritten-weight: 400;
    --dc-type-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --dc-type-compact-h1: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
    --dc-type-h2: clamp(1.875rem, 1.35rem + 2vw, 3rem);
    --dc-type-subheading: clamp(1.5rem, 1.25rem + .7vw, 1.875rem);
    --dc-type-card-title: clamp(1.25rem, 1.125rem + .3vw, 1.375rem);
    --dc-type-compact-title: 1.125rem;
    --dc-type-body: 1rem;
    --dc-type-card-body: .9375rem;
    --dc-type-support: .875rem;
    --dc-type-label: .75rem;
  }

  body,
  body :where(*):not(svg *, .bi, [class^='bi-'], [class*=' bi-'], pre, code, kbd, samp, pre *, code *) {
    font-family: var(--dc-type-family) !important;
  }
  body { font-synthesis: none; }
  svg :where(text, tspan) { font-family: var(--dc-type-family) !important; }

  :where(h1, h2, h3, h4, h5, h6, [data-dc-type='heading'], [data-dc-heading-copy='h2']) {
    color: var(--dc-type-heading-color) !important;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
    font-style: normal !important;
    text-wrap: balance;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    hyphens: none;
    max-inline-size: 100%;
    min-inline-size: 0;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
    text-shadow: none !important;
  }
  :where(h1) { font-size: var(--dc-type-h1) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; }
  /* An aria-hidden crossfade copy shares the semantic heading's metrics. */
  :where(h2, [data-dc-heading-copy='h2']) { font-size: var(--dc-type-h2) !important; line-height: 1.16 !important; }
  :where(h3) { font-size: var(--dc-type-card-title) !important; line-height: 1.3 !important; letter-spacing: -.025em !important; }
  :where(h4) { font-size: 1.25rem !important; line-height: 1.35 !important; letter-spacing: -.02em !important; }
  :where(h5) { font-size: 1rem !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
  :where(h6) { font-size: var(--dc-type-support) !important; line-height: 1.5 !important; letter-spacing: 0 !important; }

  /* Fill the first line before wrapping instead of forcing equal lines.
     Compact card titles and the approved Home hero retain their treatment. */
  :where(h1, h2, [data-dc-heading-copy='h2']):not(.heroHeadline, .case-card h2, [data-dc-type='card-title'], #dc-support-heading) {
    text-wrap: wrap !important;
  }

  /* Standalone process title: longer opening, short destination. The lead
     can still wrap naturally when CMS wording exceeds the text column. */
  .next-heading { text-align: center; }
  .next-heading [data-dc-heading-format='lead-tail'] {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto !important;
    text-align: center;
  }
  [data-dc-heading-format='lead-tail'] > [data-dc-heading-lead] {
    display: block;
  }
  [data-dc-heading-format='lead-tail'] > [data-dc-heading-tail] {
    display: table !important;
    max-inline-size: 100%;
    margin-inline: auto;
  }

  /* Split copy columns keep their alignment, with ordinary inline phrases. */
  .contact-stage .hero-title h2 > :where(span, em),
  #career-title > :where(span, em) {
    display: inline !important;
    inline-size: auto;
    margin: 0;
    transform: none;
  }

  /* Long standalone leadership heading; portrait cards remain unchanged. */
  #about-leadership-title {
    max-inline-size: min(100%, 22ch);
    margin-inline: auto !important;
    text-align: center;
  }
  #about-leadership-title > span {
    display: inline !important;
    margin-inline: 0 !important;
  }

  /* The assistant title is compact UI text, not a page heading. Keep this
     exception in the typography layer so its important rules win over the
     shared H2 role without changing the panel or its controls. */
  [data-dc-support] #dc-support-heading {
    margin: 0 0 3px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.2px !important;
    text-align: left;
    text-transform: none !important;
    text-wrap: wrap;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    -webkit-text-fill-color: currentColor !important;
  }

  @media (max-width: 335px) {
    [data-dc-support] #dc-support-heading { font-size: clamp(11px, 5vw - 3px, 13px) !important; }
  }

  /* Text inside a heading belongs to its role, including split-line titles.
     Existing display, alignment, breaks and animation hooks are preserved. */
  :where(h1, h2, h3, h4, h5, h6, [data-dc-heading-copy='h2']) :where(span, em, strong, b, a) {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    white-space: normal !important;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
    text-shadow: none !important;
  }

  /* Compact page-title role for narrow split heroes and document headers. */
  :where(.hero-copy h1, .career-detail-intro h1, [data-dc-type='compact-page-title']) {
    font-size: var(--dc-type-compact-h1) !important;
  }

  /* Shared roles for legacy markup that uses H2 for cards or labels. */
  :where(.case-card h2, [data-dc-type='card-title']) {
    font-size: var(--dc-type-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -.025em !important;
    color: var(--dc-type-heading-color) !important;
  }
  :where(.career-detail-card h2, .statement h3, .culture-card h3,
    .industryPanel h3, .aiAppsCaseCard h3, [data-dc-type='subheading']) {
    font-size: var(--dc-type-subheading) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em !important;
  }
  :where(.job-card h3, .testimonialCard h3, [data-dc-type='compact-title']) {
    font-size: var(--dc-type-compact-title) !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em !important;
  }
  /* Email values are compact card text, not section titles. Fit the existing
     contact columns without an isolated final character on a second line. */
  :where(.channel-project, .channel-careers) .channel-copy strong {
    font-size: clamp(1rem, 5.1vw, 1.125rem) !important;
  }


  /* Body colour intentionally remains controlled by existing page styles.
     The separate readability module has not been started. */
  :where(p, blockquote, li:not(header li, nav li, footer li), .t-body, [data-dc-type='body']):not(:where(#dcGlobalHeader *)) {
    font-size: var(--dc-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: -.005em !important;
    overflow-wrap: anywhere;
  }
  :where(.service-card p, .tech-card p, .model-card p, .trust-card p,
    .project-card p, .case-card p, .value-card p, .next-card p,
    .pp-value-card p, .dc-home-service-card p, .problemProductCard p,
    .insightsCard p, .testimonialCard p, #process article p,
    [data-dc-type='card-body']) {
    font-size: var(--dc-type-card-body) !important;
    line-height: 1.65 !important;
  }
  :where(small, figcaption, .dc-detail-disclosure,
    [data-dc-type='support']) {
    font-size: var(--dc-type-support) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }
  :where(.eyebrow, .intro-eyebrow, .dc-detail-eyebrow, .mobile-dev-kicker,
    .final-eyebrow, .cta-badge, .value-badge, .card-label, .pp-eyebrow,
    .peg-eyebrow, .peg-index, .peg-tag, h5.t-btn,
    [data-dc-type='eyebrow']) {
    font-size: var(--dc-type-label) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .08em !important;
  }
  :where(.talk-subtitle, .howAiSubtitle, .aiFirstSubtitle, .testimonialsSubtitle, .toolsSubtitle, .insightsSubtitle, [data-dc-type='lead']) {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.015em !important;
  }

  /* Surfaces only set typography variables; their backgrounds are untouched. */
  :where([data-dc-surface='dark'], .oj-section, .testimonials-surface,
    .ns-card, .cta-card, .project-card, .final-cta, .accent-card,
    .pp-dark, .pp-transition-stage, .peg, .aiSignalPanel,
    .problemProductSection, .finalCtaCard, .dev-process-intro-section,
    .middle-svg-section, .decrypt-complete, .dc-home-page .hero) {
    --dc-type-heading-color: #fff;
    --dc-type-accent-color: var(--dc-type-accent);
    --dc-type-accent-decoration: none;
  }
  :where([data-dc-surface='light'], .problemProductCard, .pp-closing-panel) {
    --dc-type-heading-color: var(--dc-type-ink);
    --dc-type-accent-color: #26D06A;
    --dc-type-accent-decoration: none;
  }

  /* Only intentional heading phrases use the accent face. Never apply it to
     navigation, buttons, paragraphs, testimonials or ordinary card titles. */
  body :where(h1, h2, [data-dc-heading-copy='h2']) :is([data-dc-heading-accent], [data-dc-accent], .heading-accent,
    .heroHeadlineAccent, .aiFirstAccent, .toolsTitleAccent, em),
  body :where(h3) [data-dc-heading-accent] {
    font-family: var(--dc-type-handwritten-family) !important;
    font-weight: var(--dc-type-handwritten-weight) !important;
    font-synthesis: none;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: .005em !important;
    color: #26D06A !important;
    -webkit-text-fill-color: #26D06A !important;
    text-decoration: none !important;
    text-transform: none !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    padding-inline: .025em;
  }

  @media (max-width: 700px) {
    :root {
      --dc-type-body: .9375rem;
      --dc-type-card-body: .9375rem;
      --dc-type-h1: clamp(2rem, 1.5rem + 3vw, 4rem);
      --dc-type-compact-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem);
      --dc-type-h2: clamp(1.625rem, 1.35rem + 2vw, 3rem);
    }
    :where(.job-card h3, .testimonialCard h3, [data-dc-type='compact-title']) { font-size: 1.0625rem !important; }
    /* The existing arrow composition needs a second text line on small
       screens; the adjacent scrolling pillar cards retain their geometry. */
    #about-story h2 {
      flex-wrap: wrap;
      gap: .5rem 1rem;
      padding-inline: 0 !important;
    }
    #about-story h2 > [aria-hidden='true'] {
      margin-inline: 0 !important;
      min-inline-size: 1.5rem;
    }
    #about-story h2 > [data-dc-heading-accent] {
      flex-basis: 100%;
      min-inline-size: 0;
    }
  }
}

/* Original: assets/css/brand-readability.css */
/* DeepCiphers / Module 2: foreground colours only.
   Reuse the typography layer so legacy !important rules cannot override
   readability. Typography, surfaces, layout and motion remain unchanged. */
@layer dc-typography {
  :root {
    --dc-text-primary: #000;
    --dc-text-body: #000;
    --dc-text-support: #000;
    --dc-text-link: #000;
    --dc-control-text: #000;
    --dc-control-hover-text: #000;
  }

  :where([data-dc-surface='dark'], .oj-section, .testimonials-surface,
    .ns-card, .cta-card, .project-card, .final-cta, .accent-card,
    .pp-dark, .pp-transition-stage, .peg, .aiSignalPanel,
    .problemProductSection, .finalCtaCard, .dev-process-intro-section,
    .middle-svg-section, .decrypt-complete, .dc-home-page .hero,
    .contact-card, .channel-phone) {
    --dc-text-primary: #FFFFFF;
    --dc-text-body: #E8F0F6;
    --dc-text-support: #DCE8F3;
    --dc-text-link: #26D06A;
  }
  :where([data-dc-surface='light'], .problemProductCard, .pp-closing-panel,
    .letsb-wrap, .tech-card, .model-card, .service-card, .trust-card) {
    --dc-text-primary: #000;
    --dc-text-body: #000;
    --dc-text-support: #000;
    --dc-text-link: #000;
  }
  /* Existing green and mint surfaces need stronger ink than grey body text. */
  :where(.service-card, .trust-card) {
    --dc-text-body: #000;
    --dc-text-support: #000;
  }
  .value-badge { --dc-text-primary: #FFFFFF; }
  .cta-badge { --dc-text-primary: #000; }

  :where(p, blockquote, main li, .t-body, .faq-answer-inner,
    .talk-subtitle, .howAiSubtitle, .aiFirstSubtitle, .testimonialsSubtitle,
    .toolsSubtitle, .insightsSubtitle, [data-dc-type='body'],
    [data-dc-type='card-body'], [data-dc-type='lead']):not(:where(button *, a[class*='btn'] *, a[class*='Btn'] *, .form-status, #dcGlobalHeader *)) {
    color: var(--dc-text-body) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(small, figcaption, .dc-detail-disclosure,
    [data-dc-type='support']):not(:where(button *, a *, #dcGlobalHeader *)) {
    color: var(--dc-text-support) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(.eyebrow, .intro-eyebrow, .dc-detail-eyebrow, .mobile-dev-kicker,
    .final-eyebrow, .cta-badge, .value-badge, .card-label, .pp-eyebrow,
    .peg-eyebrow, .peg-index, .peg-tag, .dc-home-ai-first,
    .hero-copy .kicker, .hero-copy .kicker strong, .hero-copy .kicker span,
    .job-number, h5.t-btn, [data-dc-type='eyebrow']) {
    color: var(--dc-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  :where(.letsb-menu-dropdown a, .letsb-menu-item, .letsb-newsletter small) {
    color: var(--dc-text-link) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  /* Only SVG text is corrected; banner shapes and logo artwork stay intact. */
  .letsb-wrap :where(svg text, svg tspan) { fill: #000 !important; }

  /* Preserve each CTA surface and its existing arrows, sizing and motion. */
  :where(.primaryBtn, .finalCtaButton, .build-btn, .view-btn, .pill-button,
    .about-service-cta,
    .final-action, .final-action > span, .final-action > small) {
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  /* These service labels and their CTA use the approved navy surface. */
  .dc-home-category-pill, .dc-home-services-cta button {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  :where(.finalCtaButton, .about-service-cta, .view-btn) > span:first-child {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  [data-dc-text='dark-control'] > span:first-child {
    color: #FFFFFF !important;
    -webkit-text-fill-color: currentColor !important;
  }
  [data-dc-text='accent-control'],
  [data-dc-text='accent-control'] > span:first-child {
    color: var(--dc-control-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  [data-dc-text='accent-control']:hover,
  [data-dc-text='accent-control']:hover > span:first-child {
    color: var(--dc-control-hover-text) !important;
  }

  /* White input surfaces are nested inside the existing dark form card. */
  #lets-talk :where(.field, .textarea-field, .custom-trigger, .trigger-text,
    .option-row, .dial) {
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  #lets-talk :where(.field, .textarea-field)::placeholder {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
  :where(input, textarea)::placeholder {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
  }
  #lets-talk :where(.custom-trigger:not(.has-value) .trigger-text, .dial) {
    color: #000 !important;
  }
  #lets-talk .form-status { color: #FFFFFF !important; -webkit-text-fill-color: currentColor !important; }
  /* Filter labels sit on navy while the editable controls stay white. */
  #job-filter-form > label,
  #job-filter-form > label > span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: currentColor !important;
  }
  #job-filter-form :where(input, select) {
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  /* A thin ink edge keeps existing gradient labels readable at both ends.
     It affects glyphs only; badge gradients, borders and shadows are retained. */
  .tech-tags > span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-text-stroke: .7px #000;
    paint-order: stroke fill;
  }
}

@layer dc-typography {
  body { color: var(--dc-text-primary) !important; }
  :where(.culture-copy, .join-card) {
    --dc-type-heading-color: #fff;
    --dc-text-primary: #fff;
    --dc-text-body: #fff;
    --dc-text-support: #fff;
  }
}

/* Original: assets/css/brand-cards.css */
/* DeepCiphers / Module 3: card surfaces only.
   Keep content, type, foreground colours, layout, padding and motion intact.
   Intentional connected, transparent and sculpted compositions retain
   their own shapes; shared tokens control their borders and depth. */
@layer dc-cards {
  :root {
    --dc-card-line: #909090;
    --dc-card-line-strong: #000;
    --dc-card-line-muted: #909090;
    --dc-card-line-dark: rgb(255 255 255 / .24);
    --dc-card-line-active: rgb(38 208 106 / .65);
    --dc-card-radius-small: 28px;
    --dc-card-radius: 28px;
    --dc-card-radius-large: 28px;
    --dc-card-radius-panel: 28px;
    --dc-card-radius-offset: 28px;
    --dc-card-shadow-soft: none;
    --dc-card-shadow-raised: none;
    --dc-card-shadow-hover: none;
    --dc-card-shadow-dark: 0 8px 24px rgb(7 21 34 / .16);
    --dc-card-shadow-offset: none;
  }

  /* Outlines keep their existing widths and open/connected edges. */
  :where(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .culture-card, .next-card, .pp-value-card, .statement, .stat,
    .career-detail-card, .aiAppsCaseCard, .testimonialCard,
    .whoConnectedGroupSingleImage, .whoConnectedGroupSingleImage .whoCard,
    .costConnectedGroup, .portrait-wrap) {
    border-color: var(--dc-card-line) !important;
  }
  :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
    .stats-card, .benefit-card, .culture-card, .statement,
    .career-detail-card, .aiAppsCaseCard, .pp-value-card, .portrait-wrap) {
    box-shadow: var(--dc-card-shadow-soft) !important;
  }
  :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
    .benefit-card, .culture-card, .career-detail-card, .aiAppsCaseCard,
    .pp-value-card) {
    border-radius: var(--dc-card-radius-large) !important;
  }
  :where(.job-card, .stat) { border-radius: var(--dc-card-radius-small) !important; }
  :where(.stats-card, .next-card, .testimonialCard) {
    border-radius: var(--dc-card-radius) !important;
  }
  :where(.statement) { border-radius: var(--dc-card-radius-large) !important; }

  /* Standalone service and pricing cards follow the full rounded reference edge. */
  .tech-card {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: none !important;
  }
  .model-card {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: none !important;
  }
  .project-card { box-shadow: var(--dc-card-shadow-raised) !important; }
  .value-card { border-color: var(--dc-card-line-active) !important; }

  /* Large panels remain composed surfaces rather than separate boxed cards. */
  :where(.whoConnectedGroupSingleImage, .costConnectedGroup, .cta-card,
    .intrapreneurship-card, .cob-card) {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: var(--dc-card-shadow-raised) !important;
  }
  .whoConnectedGroupSingleImage .whoCard {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .intrapreneurship-card { border-radius: var(--dc-card-radius-large) !important; }

  /* Use flat reference outlines on Home projects and process steps. */
  [data-dc-card='offset'] {
    border-color: var(--dc-card-line) !important;
    border-radius: var(--dc-card-radius-offset) !important;
    box-shadow: var(--dc-card-shadow-offset) !important;
  }
  #process [data-active='true'] [data-dc-card='offset'] {
    border-color: #000 !important;
  }

  [data-dc-card='dark'] {
    border-color: var(--dc-card-line-dark) !important;
    border-radius: var(--dc-card-radius) !important;
    box-shadow: none !important;
  }
  [data-dc-card='dark'][aria-current='step'] {
    border-color: var(--dc-card-line-active) !important;
    box-shadow: var(--dc-card-shadow-dark) !important;
  }
  .ns-card {
    box-shadow: inset 0 0 0 1px var(--dc-card-line-dark), var(--dc-card-shadow-dark) !important;
  }
  .ns-card.is-active {
    box-shadow: inset 0 0 0 1px var(--dc-card-line-active), var(--dc-card-shadow-dark) !important;
  }

  /* Portfolio stays transparent. Only the existing mockup stage is framed. */
  .portfolio-page :where(.case-image) {
    border-color: var(--dc-card-line) !important;
    border-radius: var(--dc-card-radius-large) !important;
    box-shadow: var(--dc-card-shadow-soft) !important;
  }
  .portfolio-page .case-card-main-link {
    border-radius: var(--dc-card-radius-large) var(--dc-card-radius-large) 4px 4px !important;
  }

  /* Existing active states remain distinct; no control styling is changed. */
  :where(.job-card.open, .model-card.active, .model-card.is-hovered) {
    border-color: var(--dc-card-line-strong) !important;
  }
  .job-card.open { box-shadow: var(--dc-card-shadow-soft) !important; }
  .dc-home-service-card:focus-visible {
    box-shadow: inset 0 0 0 3px var(--pill), var(--dc-card-shadow-soft) !important;
  }
  :where(.app-service-featured-card.service-card, .faster-devops-card-exact.service-card,
    .cipher-card.is-discovered .portrait-wrap) {
    border-color: var(--dc-card-line-active) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
      .benefit-card, .pp-value-card, .portrait-wrap):hover {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-hover) !important;
    }
    :where(.tech-card, .model-card):hover { border-color: var(--dc-card-line-strong) !important; }
    .job-card:hover { border-color: var(--dc-card-line-active) !important; }
    .team-card:is(:hover, :focus-within) .portrait-wrap {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-hover) !important;
    }
    [data-dc-card='dark']:hover { border-color: var(--dc-card-line-active) !important; }
    .portfolio-page .case-card:is(:hover, :focus-within) .case-image {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-raised) !important;
    }
  }

  @media (max-width: 700px) {
    :root {
      --dc-card-radius: 28px;
      --dc-card-radius-large: 28px;
      --dc-card-radius-panel: 28px;
      --dc-card-radius-offset: 28px;
      --dc-card-shadow-offset: none;
    }
  }
}

/* Reference edge treatments only. No sizing, spacing, display or motion overrides. */
@layer dc-cards {
  .model-card { border: 1px solid #000 !important; }
  /* Inset ink completes formerly open technology edges without adding layout pixels. */
  .tech-card {
    border-color: #000 !important;
    outline: 1px solid #000 !important;
    outline-offset: -1px !important;
  }
  :where(.dc-home-service-card, .portfolio-page .case-image) { border-color: #000 !important; }
  :where(.trust-card, .benefit-card, .mv-card, .culture-card, .pp-value-card,
    [data-dc-card='offset']) { border: 1px solid #909090 !important; }
  :where(.aiAppsCaseCard, .testimonialCard, .aiAppsTestimonialCard,
    .beforeAfterCtaCard, .webCaseStudiesPanel, .insightsCtaPanel,
    .industryImageWrap, .postLaunchImageWrap, .insightsImageWrap,
    .testimonialImageWrap, .webCaseStudiesImageWrap, .aiAppsProjectImageWrap,
    .featuredCaseStudyRefCard) {
    border-radius: 28px !important;
  }
  :where(.aiAppsCaseCard, .testimonialCard, .aiAppsTestimonialCard,
    .beforeAfterCtaCard, .webCaseStudiesPanel) { box-shadow: none !important; }
  .beforeAfterCtaCard { border: 1px solid #000 !important; }
  :where(.insightsReadMore, .aiAppsCaseBtn, .secondaryBtn:not(.hero *)) {
    border-color: #000 !important;
  }
  :where(.insightsReadMore, .aiAppsCaseBtn) { background: transparent !important; }
}

@layer dc-cards {
  /* Existing case-study copy panels and Partnership closing shell. */
  :where(.overview-copy, .problem-copy, .solution-copy,
    .pp-closing-panel) {
    border-color: #909090 !important;
    border-radius: 28px !important;
  }
  .costConnectedGroup { border-color: var(--accent-soft, #CAFCE5) !important; }
}

/* Complete the remaining existing Home panel corners without layout changes. */
@layer dc-cards {
  :where(.aiSignalPanel, .finalCtaCard) {
    border-radius: var(--dc-card-radius-panel) !important;
  }
  /* Preserve the joined active-tab shape at the top of the engagement panel. */
  .industryPanel {
    border-bottom-left-radius: var(--dc-card-radius-panel) !important;
    border-bottom-right-radius: var(--dc-card-radius-panel) !important;
  }
}

/* Restore the original mint backing on offset cards. The shared wash stays
   inside the other card surfaces, so card geometry and image fills stay intact. */
@property --dc-card-wash {
  syntax: '<number>';
  inherits: false;
  initial-value: .06;
}
@layer dc-cards {
  :root {
    --dc-card-backing: #97E1B3;
    --dc-card-offset: 12px;
  }
  [data-dc-card='offset'] {
    box-shadow: var(--dc-card-offset) var(--dc-card-offset) 0 var(--dc-card-backing),
      inset 0 -40px 48px -32px rgb(87 217 125 / var(--dc-card-wash, .06)) !important;
    transition-property: border-color, box-shadow, transform, background-color;
  }
  :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .pp-value-card, .career-detail-card, .overview-copy,
    .problem-copy, .solution-copy) {
    box-shadow: inset 0 -40px 48px -32px rgb(87 217 125 / var(--dc-card-wash, .06)) !important;
    transition-property: border-color, background-color, box-shadow, transform;
    transition-duration: .35s;
    transition-timing-function: ease;
  }
  .dc-home-service-card:focus-visible {
    box-shadow: inset 0 0 0 3px var(--pill),
      inset 0 -40px 48px -32px rgb(87 217 125 / .18) !important;
  }
  :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .pp-value-card, .career-detail-card, .overview-copy,
    .problem-copy, .solution-copy):focus-within {
    --dc-card-wash: .18;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
      .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
      .pp-value-card, .career-detail-card, .overview-copy,
      .problem-copy, .solution-copy):hover {
      --dc-card-wash: .18;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #process [data-active='true'] [data-dc-card='offset'],
    [data-dc-card='offset']:focus-within {
      animation: dc-card-background-breathe 8s ease-in-out infinite alternate;
    }
    @media (hover: hover) and (pointer: fine) {
      :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
        .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
        .pp-value-card, .career-detail-card, .overview-copy,
        .problem-copy, .solution-copy):hover {
        animation: dc-card-background-breathe 8s ease-in-out infinite alternate;
      }
    }
  }
  @keyframes dc-card-background-breathe {
    from { --dc-card-wash: .08; }
    to { --dc-card-wash: .20; }
  }
  @media (max-width: 700px) {
    :root { --dc-card-offset: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :is([data-dc-card='offset'], .dc-home-service-card, .service-card,
      .tech-card, .model-card, .trust-card, .mv-card, .stats-card,
      .benefit-card, .job-card, .pp-value-card, .career-detail-card,
      .overview-copy, .problem-copy, .solution-copy) {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Original: assets/css/brand-spacing.css */
/* DeepCiphers / Module 4: spacing and alignment only.
   Compositions, type, colours, surfaces, controls and motion stay page-owned.
   Pinned heights, carousel tracks, overlapping cards and form slots are excluded. */
@layer dc-spacing {
  :root {
    --dc-space-section: clamp(56px, 5vw, 72px);
    --dc-space-service: clamp(48px, 4vw, 56px);
    --dc-space-content: clamp(28px, 2.5vw, 36px);
    --dc-space-group: clamp(28px, 2.5vw, 36px);
    --dc-space-card-gap: 24px;
    --dc-space-copy: 16px;
  }

  /* These two roots inherited the browser's 8px body margin despite 100% width. */
  body:is(.contact-page, .partnership-page) { margin: 0 !important; }

  /* Home already has a controlled rhythm. Unify only its regular content sections. */
  .homeSections > :where(.howAiSection, #workflow, .aiFirstSection,
    .industrySection, .modernizationSection, .postLaunchSection, .aiAppsSection,
    .featuredCaseStudiesRefSection, .testimonialsSection, .toolsSection,
    .insightsSection, .finalCtaSection) {
    padding-block: var(--dc-space-section) !important;
  }
  .homeSections > .dc-home-services-cta {
    margin-top: var(--dc-space-content) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  /* About: remove accumulated outer margins, retaining full-bleed/pinned structures. */
  .about-page-root > main > :where(section.mt-24, section.mt-28, #leadership,
    .testimonials-surface) {
    margin-top: var(--dc-space-section) !important;
  }
  .about-page-root > main { padding-bottom: var(--dc-space-section) !important; }
  .about-page-root .values-section {
    margin-top: 0 !important;
    padding-top: var(--dc-space-section) !important;
    padding-bottom: 0 !important;
  }
  .about-page-root .values-title { margin-bottom: var(--dc-space-content) !important; }
  .about-page-root .mission-vision-surface > * + * {
    margin-top: var(--dc-space-group) !important;
  }
  .about-page-root .how-we-work-layout { margin-top: var(--dc-space-content) !important; }
  .about-page-root #about-story h2 { margin: 0 !important; }

  /* Company sections keep their own columns, imagery and sticky-stack runway. */
  .careers-page-main > :where(.roles, .experience, .culture-showcase, .benefits, .process) {
    padding-block: var(--dc-space-section) !important;
  }
  .careers-page-main :where(.heading, .culture-heading) {
    margin-bottom: var(--dc-space-content) !important;
  }
  .careers-page-main .experience > .heading { margin-bottom: 0 !important; }
  .team-page :where(.experts, .culture) { padding-block: var(--dc-space-section) !important; }
  .team-page .join { padding-top: var(--dc-space-section) !important; }
  .team-page .team-grid { row-gap: var(--dc-space-group) !important; }
  .team-page :where(.culture-panel, .join-card) { margin-top: var(--dc-space-content) !important; }

  /* Service sections: one measured rhythm without changing pinned service/project regions. */
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section, .why-clients-section, .faq-section) {
    padding-block: var(--dc-space-service) !important;
    margin-block: 0 !important;
  }
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section) .main-heading { margin-bottom: 0 !important; }
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section) .cards-grid {
    margin-top: var(--dc-space-content) !important;
    gap: var(--dc-space-card-gap) !important;
  }
  :is(html.page-service, html.page-web-development) .engagement-section .heading-row {
    margin-bottom: 0 !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .why-title {
    margin-bottom: var(--dc-space-copy) !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .intro-wrap {
    margin-top: 0 !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .top-card-row {
    margin-top: var(--dc-space-content) !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .bottom-layout {
    margin-top: var(--dc-space-card-gap) !important;
  }
  :is(html.page-service, html.page-web-development) .faq-section .faq-heading {
    margin-bottom: var(--dc-space-content) !important;
  }
  :is(html.page-service, html.page-web-development) .faq-section .faq-grid {
    margin-top: 0 !important;
  }
  html.page-web-development :where(.dev-process-intro-section, .middle-svg-section) {
    margin-top: 0 !important;
    padding-block: var(--dc-space-service) !important;
  }
  html.page-web-development :where(.dev-process-svg-wrap, .middle-svg-inner) {
    margin-top: var(--dc-space-content) !important;
  }

  /* Transparent portfolio compositions and screenshot dimensions remain intact. */
  .portfolio-page .case-studies { padding-block: var(--dc-space-section) !important; }
  .portfolio-page .filters {
    margin-top: var(--dc-space-content) !important;
    margin-bottom: var(--dc-space-content) !important;
  }
  .portfolio-page .case-grid { gap: var(--dc-space-group) !important; }

  /* Contact form and split intro are untouched; only the later informational sections change. */
  .contact-content :where(.direct-section, .next-section) {
    padding-block: var(--dc-space-section) !important;
  }
  .contact-content :where(.direct-section, .next-section) > .section-heading {
    margin-bottom: var(--dc-space-content) !important;
  }

  @media (max-width: 700px) {
    :root {
      --dc-space-section: 44px;
      --dc-space-service: 40px;
      --dc-space-content: 28px;
      --dc-space-group: 28px;
      --dc-space-card-gap: 20px;
    }
  }
}

/* Original: assets/css/brand-buttons.css */
/* DeepCiphers / Module 5: buttons and CTAs only.
   Component backgrounds and primary/secondary hierarchy stay with their
   original styles. Shared geometry and states override legacy CTA rules.
   Hero bays, card navigation and scroll-driven transforms keep their layout. */
@layer dc-buttons {
  :root {
    --dc-button-height: 50px;
    --dc-button-compact-height: 44px;
    --dc-button-pad: 20px;
    --dc-button-pad-block: 8px;
    --dc-button-gap: 12px;
    --dc-button-icon: 32px;
    --dc-button-pill-radius: 999px;
    --dc-button-control-radius: 12px;
    --dc-button-focus: #26D06A;
    --dc-button-accent: #26D06A;
    --dc-button-shadow: 0 5px 16px rgb(0 41 94 / .12);
    --dc-button-ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* Explicit CTA roles: never apply pill geometry to menu toggles, tabs,
     carousels, process cards or whole-card links. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
    .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
    .problemProductCta, .aiAppsCaseBtn, .amazingTeamLink,
    .featuredCaseStudyRefButton, .insightsReadMore, .insightsViewAll,
    .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
    .careers-page-body .pill, .details-button, .job-detail > a,
    .career-back-button, .career-apply-bar, .career-application-submit,
    [data-dc-button='pill'], .dc-home-services-cta-inner > button) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-flow: row nowrap !important;
    gap: var(--dc-button-gap) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--dc-button-height) !important;
    max-height: none !important;
    padding: var(--dc-button-pad-block) 8px var(--dc-button-pad-block) var(--dc-button-pad) !important;
    border-radius: var(--dc-button-pill-radius) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 20px !important;
    letter-spacing: -.01em !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    vertical-align: middle !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 220ms var(--dc-button-ease),
      transform 220ms var(--dc-button-ease) !important;
  }

  /* Labels can wrap inside their action, instead of disappearing behind an
     end circle. Keep existing text, arrow artwork and link destinations. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
    .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
    .problemProductCta, .aiAppsCaseBtn, .featuredCaseStudyRefButton,
    .insightsReadMore, .insightsViewAll, .nextMoveButton, .finalCtaButton,
    .pill-button, .career-application-submit, [data-dc-button='pill']) > span:first-child:not([aria-hidden='true']) {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-align: left;
  }

  /* Existing circles get one protected size; free-standing arrows keep a
     quieter 20px size. No new icon is introduced. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn, .whoCta,
    .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta,
    .aiAppsCaseBtn, .insightsReadMore, .insightsViewAll, .nextMoveButton,
    .pill-button, .careers-page-body .pill, .details-button, .job-detail > a,
    [data-dc-button='pill']) :where(.top-dev-arrow, .build-arrow-svg,
      .mobile-link-arrow, .arrow-circle, .circleArrow, .secondaryArrowCircle, .aiFirstMoreBtnIcon,
      .beforeAfterCtaBtnIcon, .problemProductCtaIcon, .aiAppsCaseBtnIcon,
      .insightsReadMoreIcon, .insightsViewAllIcon,
      [data-dc-button-icon], i:has(svg)) {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  :where(.dc-master-btn:not(.top-svg-section *), .whoCta, .pill-button)
    :where(.service-button-arrow, .portfolio-arrow-svg, .pill-button-arrow),
  .whoCta > img {
    display: block !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    max-width: var(--dc-button-icon) !important;
    max-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  :where(.top-dev-arrow, .build-arrow-svg, .mobile-link-arrow, .arrow-circle,
    .aiFirstMoreBtnIcon) > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  :where(.dc-master-btn:not(.top-svg-section *), .aiSignalLink,
    .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
    .insightsReadMore, .insightsViewAll, .nextMoveButton,
    .careers-page-body .pill, .details-button, .job-detail > a,
    [data-dc-button='pill']) :where(.arrow-circle, .beforeAfterCtaBtnIcon,
      .problemProductCtaIcon, .aiAppsCaseBtnIcon, .insightsReadMoreIcon,
      .insightsViewAllIcon, [data-dc-button-icon], i) > svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
  }
  :where(.aiSignalLink, .nextMoveButton) > svg {
    box-sizing: border-box !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    padding: 7px !important;
  }
  :where(.pp-pill, .finalCtaButton, .featuredCaseStudyRefButton,
    .career-application-submit, .dc-home-services-cta-inner > button)
    :where(.pp-arrow, .finalCtaButtonIcon, .featuredCaseStudyButtonIcon,
      .career-application-submit__arrow, [aria-hidden='true']) {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  @media (min-width: 768px) {
    :where(.aiFirstMoreBtn, .insightsViewAll) { width: fit-content !important; }
  }

  /* Text-only actions and rectangular form controls use balanced padding. */
  :where(.secondaryBtn, .amazingTeamLink, .meeting-btn, .letsb-sub-btn,
    .pp-pill, .career-back-button, .career-apply-bar, .career-application-submit,
    .finalCtaButton, .dc-home-services-cta-inner > button) {
    padding-inline: var(--dc-button-pad) !important;
  }
  :where(.meeting-btn, .letsb-sub-btn, .career-apply-bar, .career-application-submit) {
    justify-content: center !important;
    border-radius: var(--dc-button-control-radius) !important;
    text-align: center !important;
  }
  :where(.meeting-btn, .letsb-sub-btn) > span:first-child {
    text-align: center !important;
  }

  /* Compact utility buttons keep their own hierarchy and backgrounds. */
  :where(.search-button, .channel-actions > a, .channel-actions > button,
    .reset-filters, .career-resume-actions button, .pp-copy-action) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--dc-button-compact-height) !important;
    padding: 10px 14px !important;
    border-radius: var(--dc-button-control-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    touch-action: manipulation;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 200ms ease !important;
  }
  .channel-actions > .icon-only {
    width: var(--dc-button-compact-height) !important;
    flex: 0 0 var(--dc-button-compact-height) !important;
    padding: 10px !important;
  }
  :where(.search-button, .channel-actions > a, .channel-actions > button) > svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Non-home Hero CTAs are fitted into existing illustrated bays. Preserve
     visibility, placement and dimensions; remove clipped label rules only. */
  .top-svg-section .top-dev-cta > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }

  /* Keep the original measured height inside the pinned service sequence. */
  .dc-home-services-cta-inner > button {
    min-height: 56px !important;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 220ms var(--dc-button-ease) !important;
  }
  @media (max-width: 767px) {
    .dc-home-services-cta-inner > button { min-height: 50px !important; }
    .fullcycle-section .build-btn { min-height: 58px !important; }
  }

  /* Keep the Portfolio arrow circle fully inside its 44px action, without
     rotating the whole image outside its tap target. */
  .case-study-link .case-arrow-icon {
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    max-width: var(--dc-button-icon) !important;
    max-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
    transition: transform 200ms var(--dc-button-ease) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .case-study-link:where(:hover, :focus-visible) .case-arrow-icon {
      transform: translate(1px, -1px) !important;
    }
  }

  /* Text links and panel CTAs retain their composition. */
  :where(.case-study-link, .back-link, .pp-text-link, .developmentProcessCta) {
    min-height: var(--dc-button-compact-height) !important;
    align-items: center !important;
    touch-action: manipulation;
  }
  :where(.case-study-link, .back-link, .pp-text-link) > svg {
    flex-shrink: 0 !important;
  }
  :where(.dc-master-btn, .primaryBtn, .secondaryBtn, .whoCta, .aiSignalLink,
    .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
    .amazingTeamLink, .featuredCaseStudyRefButton, .insightsReadMore,
    .insightsViewAll, .nextMoveButton, .finalCtaButton, .pill-button,
    .pp-pill, .pp-copy-action, .careers-page-body .pill, .details-button,
    .job-detail > a, .career-back-button, .career-apply-bar,
    .career-application-submit, .search-button, .reset-filters,
    .channel-actions > a, .channel-actions > button, .case-study-link,
    .back-link, .pp-text-link, .pp-closing-button, .final-action,
    .developmentProcessCta, [data-dc-button],
    .dc-home-services-cta-inner > button):focus-visible {
    outline: 2px solid var(--dc-button-focus) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #fff !important;
  }
  :where(.dc-master-btn, .career-application-submit, .pp-pill):disabled {
    cursor: not-allowed !important;
    opacity: .65 !important;
    box-shadow: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
      .whoCta, .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta,
      .aiAppsCaseBtn, .amazingTeamLink, .insightsReadMore, .insightsViewAll,
      .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
      .careers-page-body .pill, .details-button, .job-detail > a,
      .career-application-submit, .search-button,
      [data-dc-button='pill']):hover:not(:disabled) {
      box-shadow: var(--dc-button-shadow) !important;
    }
  }
  /* A quiet arrow nudge replaces the legacy -45deg/3px lift. No outer
     button transform is changed, including scroll-controlled CTA reveals. */
  .dc-master-btn :where(.service-button-arrow, .portfolio-arrow-svg,
    .build-arrow-svg > img, .top-dev-arrow > img, .mobile-link-arrow > img,
    .arrow-circle > img, .arrow-circle > svg) {
    will-change: auto !important;
    transition: transform 200ms var(--dc-button-ease) !important;
  }
  .dc-master-btn:where(:hover, :focus-visible) :where(.service-button-arrow,
    .portfolio-arrow-svg, .build-arrow-svg > img, .top-dev-arrow > img,
    .mobile-link-arrow > img, .arrow-circle > img, .arrow-circle > svg) {
    transform: translateX(2px) !important;
  }

  @media (max-width: 767px) {
    :root { --dc-button-height: 48px; --dc-button-pad-block: 7px; --dc-button-pad: 16px; --dc-button-gap: 10px; }
    :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
      .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
      .problemProductCta, .aiAppsCaseBtn, .amazingTeamLink,
      .featuredCaseStudyRefButton, .insightsReadMore, .insightsViewAll,
      .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
      .careers-page-body .pill, .details-button, .job-detail > a,
      .career-back-button, .career-apply-bar, .career-application-submit,
      [data-dc-button='pill'], .dc-home-services-cta-inner > button) {
      font-size: 14px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.dc-master-btn, .primaryBtn, .secondaryBtn, .whoCta, .aiSignalLink,
      .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
      .amazingTeamLink, .featuredCaseStudyRefButton, .insightsReadMore,
      .insightsViewAll, .nextMoveButton, .finalCtaButton, .pill-button,
      .pp-pill, .details-button, .career-application-submit,
      .search-button, .channel-actions > a, .channel-actions > button,
      [data-dc-button], .dc-home-services-cta-inner > button),
    .dc-master-btn :where(img, svg) {
      transition-duration: 0s !important;
    }
    .dc-master-btn:where(:hover, :focus-visible) :where(.service-button-arrow,
      .portfolio-arrow-svg, .build-arrow-svg > img, .top-dev-arrow > img,
      .mobile-link-arrow > img, .arrow-circle > img, .arrow-circle > svg) {
      transform: none !important;
    }
  }
}

/* Original: assets/css/brand-responsive.css */
/* DeepCiphers / Module 6: responsive composition only. */
@layer dc-responsive {
  /* Keep content visible from first paint when entry motion is disabled. */
  @media (prefers-reduced-motion: reduce) {
    #case-studies-grid :is(.case-studies-heading, .filters),
    .portfolio-detail-page :is(.hero-copy, .hero-phones, .overview-copy,
      .overview-phones, .problem-copy, .problem-character, .solution-visual, .solution-copy) {
      opacity: 1 !important;
    }
    #case-studies-grid :is(.case-studies-heading, .filters) {
      transform: none !important;
    }
  }

  @media (max-width: 768px) {
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-pin-wrap,
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-pin {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .fullcycle-content {
      position: relative !important;
      inset: auto !important;
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      width: 100% !important;
      max-width: 100% !important;
      transform: none !important;
    }
    .fullcycle-mobile-stack-region {
      max-height: none !important;
      position: relative;
      width: 100%;
      min-width: 0;
      flex: none;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .cards-area {
      flex: none !important;
      aspect-ratio: auto !important;
    }
    .fullcycle-section:is([data-dc-stack-mode='mobile'], [data-dc-stack-mode='flow']) .video-box {
      flex: none !important;
      position: relative !important;
      top: auto !important;
      width: min(100%, 390px) !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: 16 / 9;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      margin-inline: auto !important;
    }
    /* The JS scroll stage and CSS must describe the same single-card stack. */
    .fullcycle-section[data-dc-stack-mode='mobile'] .cards-area {
      display: block !important;
      height: var(--mobile-stage-height, 420px) !important;
      min-height: var(--mobile-stage-height, 420px) !important;
      gap: 0 !important;
      clip-path: inset(-12px -12px);
      isolation: isolate;
    }
    .fullcycle-section[data-dc-stack-mode='mobile'] .cards-area > .service-card {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
    }
    .fullcycle-section[data-dc-stack-mode='mobile'] .service-card > img {
      flex: 1 1 0 !important;
      height: auto !important;
      min-height: 140px !important;
      width: 100% !important;
      object-fit: cover;
    }
    /* A short landscape screen cannot comfortably contain a pinned card.
       Use the existing card composition in normal flow; reduced motion does
       the same so every step remains reachable without a long scroll stage. */
    .fullcycle-section[data-dc-stack-mode='flow'] .cards-area {
      position: relative !important;
      inset: auto !important;
      transform: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 24px !important;
      height: auto !important;
      max-height: none !important;
      width: min(100%, 390px) !important;
      max-width: 100% !important;
      min-height: 0 !important;
      margin-inline: auto !important;
    }
    .fullcycle-section[data-dc-stack-mode='flow'] .service-card {
      flex: none !important;
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      transform: none !important;
    }
    .fullcycle-section[data-dc-stack-mode='flow'] .service-card > img {
      flex: 0 0 auto !important;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .fullcycle-section[data-dc-stack-mode='desktop'] .cards-area {
      clip-path: inset(-12px -12px);
    }
  }
}

/* Original: assets/css/brand-assets.css */
/* Supplied archive assets: paint and sizing only; approved layout/type unchanged. */
.dc-supplied-svg { flex-shrink: 0; vertical-align: middle; overflow: visible; }
.dc-supplied-svg [data-dc-paint="fill"] { fill: currentColor !important; stroke: none !important; stroke-width: 0 !important; }
.dc-supplied-svg [data-dc-paint="stroke"] { fill: none !important; stroke: currentColor !important; }
.dc-home-card-icon > img { width: 100%; height: 100%; object-fit: contain; }
.dc-home-card-arrow > svg { width: 24px; height: 20px; }
.dc-home-services-cta svg { width: 20px; height: 18px; }
.dc-footer-mail { width: 16px; height: 14px; color: #000; }
.faq-icon[data-dc-has-asset] { display: grid; place-items: center; }
.faq-icon[data-dc-has-asset]::before, .faq-icon[data-dc-has-asset]::after { content: none !important; }
.faq-icon .dc-faq-plus, .faq-icon .dc-faq-minus { grid-area: 1 / 1; width: 16px; height: 16px; }
.faq-icon .dc-faq-minus { visibility: hidden; }
.faq-item.open .dc-faq-plus { visibility: hidden; }
.faq-item.open .dc-faq-minus { visibility: visible; }
.need-icon[data-dc-has-asset] { color: #000; }
.need-icon[data-dc-has-asset] > svg { width: 100%; height: 100%; }
.need-card:hover .need-icon[data-dc-has-asset], .need-card.active .need-icon[data-dc-has-asset] { color: #000; }
.engagement-section .model-card::before { background: url('/assets/supplied/backgrounds/service-hover-glow.svg') center / contain no-repeat !important; filter: none !important; }
.aiFirstMoreBtnIcon img[src="/assets/supplied/ui/arrow-right.svg"] { width: 22px; height: 20px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .need-icon[data-dc-has-asset] { transition: none; } }
.pp-expertise-trigger > span > svg { width: 16px; height: 16px; }
.pp-plus { display: grid; place-items: center; transform: none !important; }
.pp-plus > svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.pp-plus .dc-pp-minus { visibility: hidden; }
details[open] .pp-plus .dc-pp-plus { visibility: hidden; }
details[open] .pp-plus .dc-pp-minus { visibility: visible; }
.pp-inquiry-top button > svg { width: 12px; height: 12px; margin-left: 4px; }
.career-application-close > svg { width: 18px; height: 18px; }
/* Keep the supplied modal close control above the fixed shared navigation. */
.career-application-overlay { z-index: 2147483300 !important; }
/* Replace legacy CSS chevrons, retaining the existing disclosure direction. */
html[class] body .faq-section .faq-item .faq-icon[data-dc-has-asset]::before,
html[class] body .faq-section .faq-item .faq-icon[data-dc-has-asset]::after { content: none !important; display: none !important; }
html[class] body .faq-section .faq-icon[data-dc-has-asset] { display: grid !important; background: none !important; }
.faq-icon .dc-faq-plus, .faq-icon .dc-faq-minus { width: 18px; height: 18px; }
.faq-icon .dc-faq-minus { transform: rotate(90deg); }
html[class] body .faq-section .faq-item .faq-icon[data-dc-has-asset] > .dc-supplied-svg,
html[class] body .faq-section .faq-item .faq-icon[data-dc-has-asset] > .dc-supplied-svg path { display: block !important; }

/* Shared monochrome UI: reuse the existing priority layer for legacy overrides. */
@layer dc-typography {
:root { --dc-asset-ink: #000; }
.dc-supplied-svg { color: var(--dc-asset-ink, #000) !important; }
.dc-inline-arrow { width: 1em; height: .81em; margin-inline: .25em; }
:where([data-dc-surface="dark"], .pp-dark, .ns-card, #global-mobile-navigation, .channel-primary) { --dc-asset-ink: #fff; }
#dcGlobalHeader { --dc-asset-ink: currentColor; }
.channel-card :where(.channel-icon, .copy-btn), .channel-phone .channel-primary { --dc-asset-ink: #000; }
.channel-card .channel-icon svg, .channel-card .copy-btn svg { color: #000 !important; }
.need-icon[data-dc-has-asset], .need-card:hover .need-icon[data-dc-has-asset], .need-card.active .need-icon[data-dc-has-asset] { color: #000 !important; }
.whatsapp-float { color: #fff !important; }
:where(.contact-card, .secondaryArrowCircle, .oj-nav-btn, .channel-phone .channel-actions a[href*="wa.me"]) { --dc-asset-ink: #fff; }
html[class] body .faq-section .faq-icon[data-dc-has-asset] > .dc-supplied-svg { color: #000 !important; }

/* Reference composition, with the existing DeepCiphers banner and contact data. */
html body #lets-build.letsb-section-bg,
html body #lets-build .letsb-wrap { background: #000 !important; color: #fff !important; }
html body #lets-build .letsb-wrap { --dc-text-primary: #fff; --dc-text-body: #fff; --dc-text-support: #fff; --dc-text-link: #fff; padding-block: 40px !important; }
html body #lets-build .letsb-banner-wrap { --dc-asset-ink: #000; margin-bottom: 40px !important; }
html body #lets-build .letsb-banner-mobile-link { display: none; }
html body #lets-build .letsb-banner-wrap text,
html body #lets-build .letsb-banner-mobile-art .letsb-mobile-art-title,
html body #lets-build .letsb-banner-mobile-art .letsb-mobile-art-subtitle { fill: #000 !important; }
html body #lets-build .letsb-banner-wrap > .letsb-arrow-btn { border-color: #000 !important; background: #fff !important; }
html body #lets-build .letsb-footer-row { grid-template-columns: minmax(200px,1fr) minmax(170px,.8fr) minmax(180px,.85fr) minmax(270px,1.15fr) !important; gap: 24px !important; align-items: start !important; }
html body #lets-build .letsb-brand-card { align-items: flex-start !important; text-align: left !important; }
html body #lets-build .letsb-logo-slot { margin-bottom: 12px !important; padding: 0 !important; min-height: 65px !important; }
html body #lets-build .letsb-logo-slot a { position: relative; display: inline-block; width: min(228px,100%); }
html body #lets-build .letsb-brand-logo { filter: none; }
html body #lets-build .letsb-brand-logo-contrast { position: absolute; inset: 0; filter: url(#dc-header-logo-contrast); }
html body #lets-build .letsb-brand-note { color: #fff !important; font-size: 14px !important; line-height: 1.7 !important; margin: 0 !important; }
html body #lets-build button.letsb-menu-btn,
html body #lets-build button.letsb-menu-btn:hover,
html body #lets-build button.letsb-menu-btn:focus,
html body #lets-build button.letsb-menu-btn.active { color: #fff !important; font-size: 17px !important; gap: 12px !important; min-height: 44px !important; padding: 0 !important; background: transparent !important; }
html body #lets-build button.letsb-menu-btn::before { content: none !important; display: none !important; }
html body #lets-build button.letsb-menu-btn * { color: #fff !important; }
html body #lets-build button.letsb-menu-btn { -webkit-text-fill-color: currentColor !important; }
html body #lets-build button.letsb-menu-btn * { -webkit-text-fill-color: currentColor !important; }
html body #lets-build .letsb-menu-dropdown { background: #1e1e1e !important; border-color: #333 !important; box-shadow: none !important; border-radius: 12px !important; }
html body #lets-build .letsb-menu-dropdown:not(.open) { border-color: transparent !important; margin-top: 0 !important; }
html body #lets-build .letsb-menu-dropdown a { color: #fff !important; white-space: normal !important; font-size: 13px !important; line-height: 1.5 !important; }
html body #lets-build .letsb-menu-dropdown a:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 4px; }
html body #lets-build :where(.letsb-services-grid, .letsb-company-grid) { grid-template-columns: minmax(0,1fr) !important; }
html body #lets-build .letsb-address-card { background: #1e1e1e; border: 1px solid #333; border-radius: 16px; padding: 26px 24px; min-width: 0; }
html body #lets-build .letsb-address-title { color: #fff !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.8px !important; margin: 0 0 24px !important; }
html body #lets-build .letsb-strip-contact { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; width: 100% !important; }
html body #lets-build .letsb-strip-contact-line { color: #fff !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; line-height: 1.6 !important; font-size: 14px !important; min-height: 44px !important; }
html body #lets-build .letsb-strip-contact-icon { width: 22px !important; height: 22px !important; color: #fff !important; margin-top: 2px !important; flex-shrink: 0 !important; }
html body #lets-build .letsb-contact-label { color: #fff !important; display: block; font-size: 12px; margin-bottom: 3px; }
html body #lets-build .letsb-bottom-strip { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 24px !important; margin-top: 32px !important; gap: 32px !important; background: #1e1e1e !important; border: 1px solid #333 !important; border-radius: 16px !important; }
html body #lets-build .letsb-newsletter-strip { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; flex: 1 1 560px; max-width: 680px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body #lets-build .letsb-newsletter-strip .letsb-signup-title { grid-column: 1 / -1; font-size: 16px !important; line-height: 1.4 !important; color: #fff !important; margin: 0 !important; }
html body #lets-build .letsb-signup-title small { color: #fff !important; }
html body #lets-build .letsb-newsletter-strip .letsb-email-wrap { --dc-asset-ink: #000; margin: 0 !important; padding: 0 14px !important; min-height: 48px !important; border-radius: 999px !important; border: 1px solid #fff !important; background: #fff !important; }
html body #lets-build .letsb-newsletter-strip input { color: #000 !important; font-size: 13px !important; border-radius: 999px !important; min-height: 46px !important; background: transparent !important; }
html body #lets-build .letsb-newsletter-strip input::placeholder { color: #444 !important; opacity: 1 !important; }
html body #lets-build .letsb-newsletter-strip .dc-footer-mail { color: #000 !important; }
html body #lets-build .letsb-newsletter-strip button.letsb-sub-btn { --dc-asset-ink: #000; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; padding: 12px 18px !important; min-height: 48px !important; border-radius: 999px !important; background: #26D06A !important; color: #000 !important; font-size: 13px !important; white-space: nowrap !important; }
html body #lets-build .letsb-newsletter-strip button.letsb-sub-btn:hover { background: #fff !important; color: #000 !important; }
html body #lets-build .letsb-newsletter-strip button.letsb-sub-btn svg { width: 18px !important; height: 15px !important; }
html body #lets-build .letsb-newsletter-strip .letsb-form-message { grid-column: 1 / -1; grid-row: 3; color: #fff !important; font-size: 12px !important; margin: 0 !important; }
html body #lets-build .letsb-socials { width: auto !important; max-width: 100% !important; justify-content: flex-end !important; gap: 10px !important; flex: 0 0 auto; }
html body #lets-build .letsb-social-link { color: #fff !important; background: #000 !important; border-color: #333 !important; border-radius: 10px !important; }
html body #lets-build .letsb-social-link:hover { --dc-asset-ink: #000; color: #000 !important; background: #fff !important; border-color: #fff !important; transform: translateY(-2px); }
html body #lets-build :where(a, button, input):focus-visible { outline: 2px solid #fff !important; outline-offset: 4px !important; }
html body #lets-build .letsb-newsletter-strip input:focus-visible { outline-color: #000 !important; outline-offset: 0 !important; }
.testimonial-card .quote-mark, .channel-phone .channel-primary > svg, .job-card svg, .channel-card .copy-btn svg { color: #000 !important; }
.careers-page-body .roles :where(.empty svg, .job-detail svg), .career-field-icon svg, .career-resume-icon svg { color: #000 !important; }
@media (max-width: 1100px) {
  html body #lets-build .letsb-footer-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 24px !important; }
  html body #lets-build .letsb-brand-card { grid-column: 1 / -1 !important; display: flex !important; }
  html body #lets-build .letsb-address-card { grid-column: 1 / -1; }
  html body #lets-build .letsb-bottom-strip { flex-wrap: wrap !important; gap: 24px !important; }
  html body #lets-build .letsb-newsletter-strip { flex: 1 1 100%; max-width: 100% !important; }
}
@media (max-width: 767px) {
  html body #lets-build .letsb-banner-mobile-link { display: block; }
  html body #lets-build .letsb-wrap { padding: 24px 16px 32px !important; }
  html body #lets-build .letsb-banner-wrap { margin-bottom: 28px !important; }
  html body #lets-build .letsb-footer-row { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  html body #lets-build .letsb-brand-card { grid-column: auto !important; }
  html body #lets-build .letsb-address-card { padding: 24px 20px; }
  html body #lets-build .letsb-address-title { font-size: 28px !important; }
  html body #lets-build .letsb-bottom-strip { padding: 20px 16px !important; gap: 20px !important; margin-top: 24px !important; }
  html body #lets-build .letsb-newsletter-strip { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html body #lets-build .letsb-newsletter-strip button.letsb-sub-btn { width: 100% !important; }
  html body #lets-build .letsb-newsletter-strip .letsb-form-message { grid-row: 4; }
  html body #lets-build .letsb-socials { justify-content: flex-start !important; gap: 8px !important; flex-wrap: wrap !important; }
}

}

@media (max-width: 767px) {
  html body #lets-build .letsb-newsletter-strip input {
    font-size: 16px !important;
  }
}

/* Footer Services + Company Links — final scoped layout correction.
   This sheet is loaded after footer.css on every public route. Previous
   one-column and fixed-width rules made the dropdowns appear unchanged or
   overlap adjacent footer columns. Only link grids/card geometry is changed. */
@layer dc-typography {
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid a,
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid a {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown,
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown.open,
html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown.open {
  padding: 16px !important;
}
@media (min-width: 1201px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row {
    grid-template-columns: minmax(0, .88fr) minmax(0, 2.03fr) minmax(0, 1.02fr) minmax(0, 1.18fr) !important;
    gap: 18px !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown {
    max-width: 440px !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    max-width: 225px !important;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row > .letsb-brand-card,
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row > .letsb-address-card {
    grid-column: 1 / -1 !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown {
    max-width: 440px !important;
  }
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    max-width: 225px !important;
  }
}
@media (max-width: 767px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services.letsb-menu-dropdown,
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company.letsb-menu-dropdown {
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-services .letsb-services-grid,
  html body #lets-build.letsb-section-bg .letsb-wrap .letsb-footer-row #letsb-company .letsb-company-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

}

/* Home-only reference matching: 2 CTA arrows, one dark partnership panel,
   one green comparison title, and the three explicitly named service icons. */
@layer dc-typography {
  body.dc-home-page .insightsViewAll .insightsViewAllIcon svg.dc-supplied-svg,
  body.dc-home-page .costSection a[href="/contact"] span[class*="ctaArrow"] svg.dc-supplied-svg {
    --dc-asset-ink: #FFFFFF;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
  }
  body.dc-home-page .insightsViewAll .insightsViewAllIcon svg.dc-supplied-svg [data-dc-paint="fill"],
  body.dc-home-page .costSection a[href="/contact"] span[class*="ctaArrow"] svg.dc-supplied-svg [data-dc-paint="fill"] {
    fill: #FFFFFF !important;
  }
  body.dc-home-page .industrySection:has(.industryTab:nth-child(5).active) .industryPanel .industryCopy :is(h3, p, li),
  body.dc-home-page .howAiPanel--after :is(strong, span) {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  body.dc-home-page .industrySection:has(.industryTab:nth-child(5).active) .industryPanel {
    --dc-type-heading-color: #FFFFFF;
    --dc-text-body: #FFFFFF;
  }
}
/* The three named Home service icons now use matching vector outlines in
   HomeServicesExactSection. They inherit the section's original SVG sizing,
   ink and responsive behavior; no raster filter or size exceptions needed. */