/*
Theme Name: AIDigitalPrototype-v40 (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* CSS Variables */
:root {
}

/* Inline Styles */

body.page-template-page-about .carousel-controls{display:none !important; visibility:hidden !important;}

/* Extracted CSS from page */
:root {
  --navy: #071d33;
  --ink: #10233d;
  --muted: #60718a;
  --blue: #329ef6;
  --teal: #03cea4;
  --pink: #da7795;
  --line: #dae4ed;
  --pale: #f2f7fb;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  color: var(--ink);
  font:
    400 15px / 1.55 Manrope,
    Arial,
    sans-serif;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
.wrap {
  width: min(1380px, 100% - 80px);
  margin: auto;
}
.sr {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
}
.eyebrow {
  margin: 0px 0px 16px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pill {
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 99px;
}
.hero {
  position: relative;
  min-height: 760px;
  color: rgb(255, 255, 255);
  background: var(--navy);
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0px 0px 0px 47%;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55);
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(90deg, var(--navy), #071d33a8 24%, #071d3312 70%);
}
.blocks i {
  position: absolute;
  z-index: 2;
  bottom: -5%;
  width: 10%;
  border: 1px solid rgba(255, 255, 255, 0.333);
  background: rgba(217, 239, 255, 0.12);
  backdrop-filter: blur(7px);
}
.blocks i:nth-child(1) {
  right: 5%;
  height: 62%;
}
.blocks i:nth-child(2) {
  right: 18%;
  height: 46%;
}
.blocks i:nth-child(3) {
  right: 31%;
  height: 54%;
}
.blocks i:nth-child(4) {
  right: 44%;
  height: 33%;
}
.hero-in {
  position: relative;
  z-index: 3;
  min-height: 760px;
  display: flex;
  align-items: center;
}
.hero-copy {
  max-width: 760px;
  padding-top: 70px;
}
.hero h1 {
  margin: 0px;
  font-size: clamp(50px, 5vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.hero-copy > p:last-of-type {
  max-width: 620px;
  color: rgb(187, 202, 216);
  font-size: 17px;
  margin: 28px 0px;
}
.button {
  display: inline-block;
  padding: 14px 21px;
  border-radius: 99px;
  background: var(--blue);
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: 600;
}
.sectors {
  padding: 28px 0px;
  border-bottom: 1px solid var(--line);
}
.sectors .wrap {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
}
.sectors .eyebrow {
  margin: 0px;
}
.sectors .wrap > div {
  display: flex;
  gap: 24px;
  overflow: auto;
  white-space: nowrap;
  color: rgb(79, 96, 120);
  font-size: 12px;
}
.sectors span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
}
.section {
  padding: 100px 0px;
}
.intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 52px;
}
.intro h2,
.identity h2,
.cta h2 {
  margin: 0px;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.intro > p,
.identity .split > div > p {
  color: var(--muted);
}
.cards {
  display: grid;
}
.four {
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.cards article {
  min-height: 250px;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  transition: 0.25s;
}
.cards article:hover {
  background: var(--pale);
  transform: translateY(-4px);
}
.cards article:last-child {
  border: 0px;
}
.cards b {
  font-size: 32px;
  color: var(--blue);
  font-weight: 400;
}
.cards h3 {
  margin: 27px 0px 8px;
  font-size: 21px;
}
.cards p {
  color: var(--muted);
  font-size: 13px;
}
.approach {
  background: linear-gradient(rgb(248, 251, 253), rgb(237, 245, 250));
}
.approach-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.layers {
  position: sticky;
  top: 125px;
  height: 440px;
  perspective: 800px;
}
.layers i {
  position: absolute;
  inset: 100px auto auto 50%;
  width: 280px;
  height: 170px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(50, 158, 246, 0.333);
  background: rgba(50, 158, 246, 0.15);
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  transform: translateX(-50%) rotateX(62deg) rotateZ(-28deg);
  box-shadow: rgba(23, 59, 93, 0.12) 0px 30px 55px;
}
.layers i:nth-child(2) {
  top: 185px;
  background: rgba(3, 206, 164, 0.17);
}
.layers i:nth-child(3) {
  top: 270px;
  background: rgba(218, 119, 149, 0.17);
}
.service-list article {
  padding-bottom: 42px;
  margin-bottom: 42px;
  border-bottom: 1px solid rgb(203, 216, 227);
}
.service-list b,
.cases b {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.service-list article:nth-child(2) b {
  color: var(--teal);
}
.service-list article:nth-child(3) b {
  color: var(--pink);
}
.service-list h3 {
  font-size: 28px;
  line-height: 1.2;
  margin: 12px 0px;
}
.service-list p,
.service-list li {
  color: var(--muted);
  font-size: 14px;
}
.service-list a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tech-grid article {
  padding: 27px;
  border: 1px solid var(--line);
}
.tech-grid h3 {
  margin: 0px 0px 23px;
  color: rgb(82, 100, 122);
  font-size: 14px;
}
.tech-grid article div {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.tech-grid img {
  width: 82px;
  height: 42px;
  object-fit: contain;
  filter: saturate(0.7);
}
.identity {
  background: var(--pale);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: center;
}
.photo img {
  width: 100%;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
  filter: saturate(0.35);
}
.principles {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.principles article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line);
}
.principles b {
  color: var(--blue);
}
.principles h3 {
  margin: 0px 0px 4px;
  font-size: 17px;
}
.principles p {
  margin: 0px;
  color: var(--muted);
  font-size: 13px;
}
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cases article {
  border: 1px solid var(--line);
  transition: 0.3s;
}
.cases article:hover {
  transform: translateY(-5px);
  box-shadow: rgba(18, 47, 74, 0.094) 0px 18px 35px;
}
.cases img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  filter: saturate(0.35);
}
.cases article div {
  padding: 27px;
}
.cases h3 {
  font-size: 22px;
  line-height: 1.25;
}
.cases p,
.cases small {
  color: var(--muted);
  font-size: 13px;
}
.cta {
  padding: 90px 0px;
  background: var(--navy);
  color: rgb(255, 255, 255);
}
.cta p {
  color: rgb(182, 198, 213);
}
.cta img {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  filter: grayscale(1);
}
.choices {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 25px 0px;
}
.choices span {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
}
footer {
  padding: 65px 0px 22px;
  background: rgb(5, 23, 40);
  color: rgb(255, 255, 255);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 75px;
}
.footer-grid p,
footer a {
  color: rgb(158, 176, 193);
  font-size: 12px;
}
.footer-grid h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.footer-grid a {
  display: block;
  margin: 10px 0px;
  text-decoration: none;
}
.base {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.125);
  color: rgb(129, 149, 169);
  font-size: 10px;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: 0.7s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 980px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .hero-photo {
    left: 36%;
    opacity: 0.75;
  }
  .four {
    grid-template-columns: 1fr 1fr;
  }
  .cards article:nth-child(2) {
    border-right: 0px;
  }
  .approach-grid {
    gap: 40px;
  }
  .cases img {
    height: 160px;
  }
}
@media (max-width: 720px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .hero,
  .hero-in {
    min-height: 700px;
  }
  .hero-photo {
    left: 0px;
    opacity: 0.38;
  }
  .hero-photo::after {
    background: linear-gradient(#071d3355, var(--navy) 88%);
  }
  .hero-copy {
    padding-top: 110px;
  }
  .hero h1 {
    font-size: 45px;
  }
  .sectors .wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .section {
    padding: 70px 0px;
  }
  .intro,
  .split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .intro {
    margin-bottom: 34px;
  }
  .intro h2,
  .identity h2,
  .cta h2 {
    font-size: 38px;
  }
  .four {
    grid-template-columns: 1fr;
  }
  .cards article {
    min-height: 215px;
    border-right: 0px;
    border-bottom: 1px solid var(--line);
  }
  .approach-grid {
    grid-template-columns: 1fr;
  }
  .layers {
    position: relative;
    top: auto;
    height: 360px;
  }
  .layers i {
    width: 220px;
    height: 140px;
    top: 50px;
  }
  .layers i:nth-child(2) {
    top: 125px;
  }
  .layers i:nth-child(3) {
    top: 200px;
  }
  .tech-grid,
  .cases,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cases img {
    height: 220px;
  }
  .photo {
    order: 2;
  }
  .cta .split {
    gap: 45px;
  }
  .base {
    display: block;
  }
  .base span {
    display: block;
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.hero,
.hero-in {
  min-height: 500px;
  height: 500px;
}
.hero-photo {
  inset: 0px 0px 0px 50%;
}
.hero-photo > img {
  filter: saturate(0.82);
  object-position: center 43%;
}
.hero-photo::after {
  background: linear-gradient(90deg, var(--navy), #071d33a6 26%, #071d3300 58%);
}
.hero-copy {
  max-width: 650px;
  padding-top: 82px;
}
.hero h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
}
.hero-copy > p:last-of-type {
  max-width: 560px;
  margin: 18px 0px 22px;
  font-size: 15px;
}
.hero .button {
  padding: 12px 18px;
  font-size: 13px;
}
.sectors .wrap > div {
  gap: 28px;
}
.sectors span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sectors span::before {
  display: none;
}
.sectors span b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(50, 158, 246, 0.267);
  border-radius: 8px;
  background: rgba(50, 158, 246, 0.05);
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}
.metrics {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: start;
  border-top: 1px solid rgb(189, 206, 220);
}
.metrics article {
  min-height: 205px;
  padding: 28px 22px;
  border-right: 1px solid rgb(189, 206, 220);
  border-bottom: 1px solid rgb(189, 206, 220);
}
.metrics article:nth-child(2n) {
  border-right: 0px;
}
.metrics strong {
  display: block;
  color: var(--teal);
  font-size: 54px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.06em;
}
.metrics article:nth-child(2) strong {
  color: var(--blue);
}
.metrics article:nth-child(3) strong {
  color: rgb(230, 168, 39);
}
.metrics article:nth-child(4) strong {
  color: var(--pink);
}
.metrics span {
  display: block;
  margin: 8px 0px 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.metrics p {
  margin: 0px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.tech-grid img {
  width: 123px;
  height: 63px;
  background: transparent;
  mix-blend-mode: multiply;
}
.clients {
  overflow: hidden;
  background: rgb(255, 255, 255);
}
.clients .intro {
  margin-bottom: 36px;
}
.logo-marquee {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 8px 0px;
}
.logo-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: 26s ease-in-out 0s infinite alternate none running logoDrift;
}
.logo-track.row-two {
  transform: translateX(-9%);
  animation-name: logoDriftReverse;
  animation-duration: 30s;
}
.logo-track span {
  width: 190px;
  height: 92px;
  display: grid;
  place-items: center;
  padding: 16px 22px;
  border: 1px solid var(--line);
  background: rgb(255, 255, 255);
}
.logo-track img {
  max-width: 145px;
  max-height: 58px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(0.65);
}
@keyframes logoDrift {
  100% {
    transform: translateX(-18%);
  }
}
@keyframes logoDriftReverse {
  100% {
    transform: translateX(7%);
  }
}
.who-carousel {
  position: relative;
  aspect-ratio: 1.15 / 1;
  overflow: hidden;
  background: rgb(220, 233, 242);
}
.who-carousel img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
  transition: opacity 1s;
  filter: saturate(0.65);
  object-position: center center;
}
.who-carousel img.active {
  opacity: 1;
}
@media (max-width: 980px) {
  .hero-photo {
    left: 43%;
  }
  .metrics {
    grid-template-columns: 1fr;
    position: relative;
    top: auto;
  }
  .metrics article,
  .metrics article:nth-child(2n) {
    min-height: 160px;
    border-right: 0px;
  }
  .tech-grid img {
    width: 108px;
    height: 56px;
  }
}
@media (max-width: 720px) {
  .hero,
  .hero-in {
    min-height: 620px;
    height: 620px;
  }
  .hero-photo {
    left: 0px;
    opacity: 0.44;
  }
  .hero-photo::after {
    background: linear-gradient(180deg, #071d3333 0%, var(--navy) 88%);
  }
  .hero-copy {
    padding-top: 118px;
    align-self: flex-end;
    padding-bottom: 46px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero-copy > p:last-of-type {
    font-size: 15px;
  }
  .approach-grid {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .metrics article,
  .metrics article:nth-child(2n) {
    min-height: 178px;
    border-right: 1px solid rgb(189, 206, 220);
  }
  .metrics article:nth-child(2n) {
    border-right: 0px;
  }
  .metrics strong {
    font-size: 43px;
  }
  .metrics span {
    font-size: 15px;
  }
  .tech-grid img {
    width: 105px;
    height: 54px;
  }
  .logo-track span {
    width: 155px;
    height: 78px;
    padding: 13px 17px;
  }
  .logo-track img {
    max-width: 122px;
    max-height: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track,
  .logo-track.row-two {
    animation: auto ease 0s 1 normal none running none;
  }
  .who-carousel img {
    transition: none;
  }
}
.hero,
.hero-in {
  min-height: 750px;
  height: 750px;
}
.sectors {
  overflow: hidden;
}
.sectors .wrap {
  grid-template-columns: 250px minmax(0px, 1fr);
}
.sector-viewport {
  overflow: hidden;
  min-width: 0px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgb(0, 0, 0) 5%,
    rgb(0, 0, 0) 95%,
    transparent
  );
}
.sector-track {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: 32s linear 0s infinite normal none running sectorRotate;
  will-change: transform;
}
@keyframes sectorRotate {
  100% {
    transform: translateX(calc(-50% - 14px));
  }
}
.tech-grid img {
  mix-blend-mode: normal;
}
.cases {
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.cases img {
  height: 240px;
}
@media (max-width: 980px) {
  .hero,
  .hero-in {
    min-height: 750px;
    height: 750px;
  }
  .sectors .wrap {
    grid-template-columns: 220px minmax(0px, 1fr);
  }
  .cases {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .hero,
  .hero-in {
    min-height: 700px;
    height: 700px;
  }
  .sectors .wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cases {
    grid-template-columns: 1fr;
  }
  .cases img {
    height: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sector-track {
    animation: auto ease 0s 1 normal none running none;
  }
}
.sectors .wrap > .sector-viewport {
  overflow: hidden;
  scrollbar-width: none;
}
.sectors .wrap > .sector-viewport::-webkit-scrollbar {
  display: none;
}
.logo-marquee {
  width: 100%;
  min-width: 0px;
}
.cases {
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  gap: 16px;
}
.cases article,
.cases .case-card {
  min-width: 0px;
  background: rgb(255, 255, 255);
}
.cases .case-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: 0.3s;
}
.cases .case-card:hover {
  transform: translateY(-5px);
  box-shadow: rgba(18, 47, 74, 0.094) 0px 18px 35px;
}
.cases .case-card > div:not(.case-visual) {
  padding: 27px;
}
.case-visual {
  position: relative;
  height: 164px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  background: linear-gradient(145deg, rgb(237, 247, 255), rgb(247, 251, 254));
}
.case-visual::before,
.case-visual::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: rgba(23, 59, 93, 0.14) 0px 18px 42px;
  backdrop-filter: blur(8px);
  transform: rotate(-12deg);
}
.case-visual::before {
  width: 54%;
  height: 72%;
  left: 14%;
  top: 24%;
  background: linear-gradient(
    135deg,
    rgba(50, 158, 246, 0.72),
    rgba(50, 158, 246, 0.11)
  );
}
.case-visual::after {
  width: 42%;
  height: 55%;
  right: 9%;
  top: 8%;
  background: linear-gradient(
    135deg,
    rgba(3, 206, 164, 0.66),
    rgba(3, 206, 164, 0.094)
  );
  transform: rotate(14deg);
}
.case-visual-two {
  background: linear-gradient(145deg, rgb(248, 242, 246), rgb(242, 248, 252));
}
.case-visual-two::before {
  left: 7%;
  top: 10%;
  width: 47%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(218, 119, 149, 0.76),
    rgba(218, 119, 149, 0.125)
  );
  transform: none;
}
.case-visual-two::after {
  right: 7%;
  top: 25%;
  width: 49%;
  height: 52%;
  background: linear-gradient(
    135deg,
    rgba(50, 158, 246, 0.65),
    rgba(50, 158, 246, 0.11)
  );
  transform: rotate(-18deg);
}
.case-visual-three {
  background: linear-gradient(145deg, rgb(244, 250, 248), rgb(239, 247, 252));
}
.case-visual-three::before {
  left: 8%;
  top: 18%;
  width: 72%;
  height: 36%;
  background: linear-gradient(
    90deg,
    rgba(3, 206, 164, 0.72),
    rgba(50, 158, 246, 0.5)
  );
  transform: rotate(8deg);
}
.case-visual-three::after {
  right: 9%;
  top: 45%;
  width: 63%;
  height: 35%;
  background: linear-gradient(
    90deg,
    rgba(255, 200, 87, 0.72),
    rgba(218, 119, 149, 0.5)
  );
  transform: rotate(-8deg);
}
.case-visual-four {
  background: linear-gradient(145deg, rgb(244, 245, 252), rgb(246, 250, 253));
}
.case-visual-four::before {
  left: 12%;
  top: 18%;
  width: 31%;
  height: 72%;
  background: linear-gradient(rgba(50, 158, 246, 0.682), rgba(7, 29, 51, 0.2));
  transform: skewY(-12deg);
}
.case-visual-four::after {
  right: 12%;
  top: 9%;
  width: 37%;
  height: 78%;
  background: linear-gradient(
    rgba(218, 119, 149, 0.66),
    rgba(255, 200, 87, 0.41)
  );
  transform: skewY(12deg);
}
.case-visual-five {
  background: linear-gradient(145deg, rgb(251, 247, 237), rgb(242, 248, 252));
}
.case-visual-five::before {
  left: 7%;
  top: 20%;
  width: 70%;
  height: 35%;
  background: linear-gradient(
    90deg,
    rgba(255, 200, 87, 0.75),
    rgba(218, 119, 149, 0.48)
  );
  transform: rotate(-7deg);
}
.case-visual-five::after {
  right: 8%;
  top: 43%;
  width: 62%;
  height: 35%;
  background: linear-gradient(
    90deg,
    rgba(50, 158, 246, 0.592),
    rgba(3, 206, 164, 0.48)
  );
  transform: rotate(8deg);
}
.cta img {
  object-position: center 40%;
}
@media (max-width: 1300px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  .case-visual {
    height: 190px;
  }
}
@media (max-width: 720px) {
  .cases {
    grid-template-columns: 1fr;
  }
  .case-visual {
    height: 210px;
  }
}
.case-visual {
  display: grid;
  place-items: center;
}
.case-visual svg {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: rgba(23, 59, 93, 0.125) 0px 18px 42px;
  fill: none;
  stroke: rgb(23, 59, 93);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  backdrop-filter: blur(8px);
}
.case-visual-two svg {
  stroke: rgb(155, 85, 116);
}
.case-visual-three svg {
  stroke: rgb(8, 124, 112);
}
.case-visual-four svg {
  stroke: rgb(49, 92, 145);
}
.case-visual-five svg {
  stroke: rgb(155, 109, 19);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 14px;
  right: 14px;
  width: auto;
  height: auto;
  min-height: 68px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(190, 221, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(rgba(13, 39, 72, 0.96), rgba(8, 27, 52, 0.95));
  box-shadow: rgba(2, 12, 26, 0.18) 0px 18px 50px;
  backdrop-filter: blur(26px);
  color: rgb(255, 255, 255);
}
.v19-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.v19-brand img {
  display: block;
  width: 164px;
  height: auto;
}
.v19-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}
.v19-nav-item {
  position: relative;
}
.v19-trigger,
.v19-cta,
.v19-direct,
.v19-menu-toggle {
  font:
    600 13px / 1.4 Manrope,
    system-ui,
    sans-serif;
  color: rgb(225, 236, 248);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.v19-trigger {
  padding: 14px 11px;
  border: 0px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.v19-trigger::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0px 0px 3px 9px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(45deg);
}
.v19-nav-item.open > .v19-trigger::after {
  transform: rotate(225deg);
}
.v19-direct {
  padding: 14px 11px;
}
.v19-cta {
  display: block;
  padding: 13px 17px;
  border: 1px solid rgba(190, 221, 255, 0.314);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.v19-mega {
  position: absolute;
  top: calc(100% + 12px);
  right: 0px;
  width: 390px;
  max-width: calc(-60px + 100vw);
  padding: 18px;
  border: 1px solid rgba(177, 215, 255, 0.22);
  border-radius: 18px;
  background: rgb(8, 27, 49);
  box-shadow: rgba(0, 0, 0, 0.333) 0px 28px 70px;
  max-height: calc(100dvh - 120px);
  overflow: auto;
}
.js-nav .v19-mega {
  display: none;
}
.js-nav .v19-nav-item.open > .v19-mega {
  display: block;
}
.v19-mega-link {
  display: block;
  padding: 11px 12px;
  color: rgb(194, 210, 229);
  font:
    500 14px / 1.5 Manrope,
    system-ui,
    sans-serif;
  text-decoration: none;
  border-radius: 8px;
}
.v19-mega-link:hover,
.v19-mega-link:focus-visible {
  color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.07);
}
.v19-menu-toggle {
  display: none;
  padding: 12px 13px;
  border: 1px solid rgba(190, 221, 255, 0.314);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.v19-footer {
  position: relative;
  padding: 60px 0px 28px;
  background: rgb(6, 16, 29);
  color: rgb(176, 191, 209);
}
.v19-footer-shell {
  width: min(1180px, 100% - 48px);
  margin: auto;
}
.v19-footer-main {
  display: grid;
  grid-template-columns: minmax(0px, 1.5fr) repeat(3, minmax(0px, 1fr));
  gap: 36px;
  padding-bottom: 34px;
}
.v19-footer-brand img {
  width: 165px;
  height: auto;
}
.v19-footer-brand p {
  font-size: 13px;
  line-height: 1.75;
  max-width: 400px;
}
.v19-footer-main > div:not(.v19-footer-brand) {
  display: flex;
  flex-direction: column;
}
.v19-footer-main b {
  margin-bottom: 14px;
  color: rgb(224, 233, 244);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v19-footer-main a {
  display: block;
  padding: 5px 0px;
  color: rgb(176, 191, 209);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}
.v19-footer-main a:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
.v19-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgb(160, 177, 197);
  font-size: 11px;
}
.site-header:not(.js-nav) {
  position: relative;
  top: 0px;
  left: 0px;
  right: auto;
  width: 100%;
  flex-wrap: wrap;
  border-radius: 0px;
}
.site-header:not(.js-nav) .v19-nav {
  flex-wrap: wrap;
  align-items: flex-start;
}
.site-header:not(.js-nav) .v19-mega {
  position: static;
  max-width: 100%;
  width: auto;
  max-height: none;
  box-shadow: none;
}
@media (max-width: 1180px) {
  .js-nav .v19-menu-toggle {
    display: block;
  }
  .js-nav .v19-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0px;
    right: 0px;
    width: auto;
    max-height: calc(100dvh - 116px);
    overflow: auto;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(177, 215, 255, 0.22);
    border-radius: 18px;
    background: rgb(7, 24, 44);
  }
  .js-nav .v19-nav.mobile-open {
    display: flex;
  }
  .v19-nav-item {
    width: 100%;
  }
  .v19-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
  }
  .v19-mega {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0px;
    padding: 0px 4px 10px;
    border: 0px;
    border-radius: 0px;
    box-shadow: none;
    background: transparent;
  }
  .v19-direct,
  .v19-cta {
    padding: 14px 11px;
    font-size: 14px;
  }
  .site-header:not(.js-nav) .v19-nav {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 900px) {
  .v19-footer-main {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
}
@media (max-width: 600px) {
  .site-header {
    padding: 9px 11px;
    gap: 8px;
  }
  .v19-brand img {
    width: 140px;
  }
  .v19-footer-shell {
    width: calc(100% - 32px);
  }
  .v19-footer-main {
    grid-template-columns: 1fr;
  }
  .v19-footer-base {
    flex-direction: column;
  }
}

:root {
  --font:
    Manrope, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --accent-gold: #ffc857;
  --accent-pink: #da7795;
  --accent-green: #03cea4;
  --accent-blue: #329ef6;
  --content-width: 1180px;
  --radius-card: 20px;
  --radius-control: 12px;
  --readable-accent: #17649e;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0px;
  font-family: var(--font);
  overflow-wrap: break-word;
}
button,
input,
textarea,
select {
  font: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
a,
button,
input,
textarea,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.6;
}
h1,
h2,
h3,
p,
li {
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  text-wrap: pretty;
}
section[id],
main[id] {
  scroll-margin-top: 110px;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: rgb(50, 158, 246) solid 3px;
  outline-offset: 4px;
}
.site-header :focus-visible,
.v19-footer :focus-visible {
  outline-color: rgb(255, 200, 87);
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 24px;
  z-index: 1000;
  padding: 12px 18px;
  background: rgb(255, 255, 255);
  color: rgb(7, 21, 38);
  transform: translateY(-160%);
  border: 3px solid rgb(50, 158, 246);
  border-radius: 8px;
}
.skip-link:focus {
  transform: none;
}
.shell,
.company-shell,
.cs-shell,
.wrap,
.v31-offer .shell {
  width: min(var(--content-width), calc(100% - 48px));
  margin-inline: auto;
}
:is(
    .v31-hero-grid,
    .v31-stats,
    .v31-grid,
    .v31-split,
    .v31-fit-grid,
    .v31-related-grid,
    .v32-change-flow,
    .v32-final-grid,
    .company-hero-grid,
    .company-split,
    .contact-grid,
    .industry-grid,
    .cs-hero-grid,
    .cs-split,
    .cs-two,
    .cs-evidence,
    .cs-outcome-grid,
    .cs-steps,
    .cs-related-grid,
    .offer-grid,
    .metric-row,
    .grid,
    .four,
    .split,
    .intro,
    .approach-grid,
    .partner-grid,
    .impact-grid,
    .sn-hero-in,
    .sn-cta-grid,
    .product-stack,
    .v19-footer-main
  )
  > * {
  min-width: 0px;
  max-width: 100%;
}
.hero,
.hero-in,
.sn-hero,
.sn-hero-in {
  height: auto;
  min-height: 750px;
}
.hero-in {
  padding-block: 145px 76px;
}
.hero-copy {
  padding-top: 0px;
  padding-bottom: 0px;
}
.company-hero,
.offer-hero,
.page-hero,
.cs-hero {
  height: auto;
  min-height: 0px;
  padding-block: 150px 80px;
}
.v31-hero {
  height: auto;
  min-height: 0px;
  padding-block: 145px 50px;
  overflow: visible;
}
.v31-hero-grid {
  min-height: 0px;
  padding-block: 38px 46px;
  gap: 48px;
  grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 0.7fr);
}
.company-hero-grid {
  grid-template-columns: minmax(0px, 1.25fr) minmax(0px, 0.75fr);
  gap: 48px;
}
.hero h1,
.sn-hero h1,
.company-hero h1,
.v31-hero h1,
.offer-hero h1,
.page-hero h1,
.cs-hero h1 {
  font-family: var(--font);
  font-size: clamp(2.25rem, 4.8vw, 4.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
  max-width: 850px;
}
.v31-hero > .shell > .v31-stats {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  transform: none;
  gap: 14px;
}
.v31-hero > .shell > .v31-stats > div {
  min-height: 0px;
  padding: 24px 20px;
}
.v31-hero > .shell > .v31-stats strong {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.v31-stats span {
  line-height: 1.6;
}
.v31-problem {
  padding-top: 90px;
}
.v31-split {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 60px;
}
.v31-fit-grid,
.v32-final-grid {
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.78fr);
  gap: 48px;
}
.v31-related-grid {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.v31-related {
  gap: 20px;
}
.v31-related > div {
  min-width: 0px;
}
.v31-related > span {
  flex: 0 0 auto;
}
.v31-grid {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.v31-process-grid {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
}
.v32-change-flow {
  grid-template-columns: minmax(0px, 1fr) 36px minmax(0px, 1fr) 36px minmax(
      0px,
      1fr
    );
}
.v31-evidence .v31-stats {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
}
.v33-evidence-head .v31-section-head {
  min-width: 0px;
}
.v31-section,
.company-section,
.offer-section,
.cs-section {
  padding-block: 90px;
}
.v31-section-head h2,
.company-heading h2,
.contact-copy h2,
.offer-section h2,
.section-head h2,
.cs-head h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.v31-grid article,
.offer-card,
.industry-card,
.principle-grid article,
.card {
  border-radius: var(--radius-card);
}
.offer-actions a,
.v31-actions a,
.v31-final a,
.btn,
.button,
.contact-form button,
.company-final a {
  border-radius: var(--radius-control);
  font-family: var(--font);
  line-height: 1.5;
  white-space: normal;
}
.contact-form input,
.contact-form textarea {
  min-width: 0px;
  font-size: 1rem;
}
.contact-form small {
  color: rgb(82, 98, 118);
  line-height: 1.6;
}
.contact-form .email-alternative {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.email-alternative a {
  color: rgb(23, 100, 158);
  text-decoration: underline;
}
.offer-main {
  padding-block: 30px;
}
.offer-grid {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.offer-section {
  margin: 0px;
}
.offer-hero h1 {
  max-width: 850px;
}
.offer-card {
  padding: 30px;
}
.offer-card h3 {
  font-size: 22px;
}
.offer-card p,
.offer-section > p {
  font-size: 16px;
  line-height: 1.75;
}
.offer-card a {
  font-size: 14px;
  color: rgb(23, 100, 158);
}
.offer-card .number {
  color: rgb(23, 100, 158);
}
.offer-band {
  border-radius: 20px;
}
.services-page .page-hero .hero-copy {
  max-width: none;
}
.services-page .page-hero h1 {
  max-width: 850px;
}
.services-page .page-main {
  padding-block: 90px;
}
.services-page .grid {
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}
.services-page .card p {
  font-size: 16px;
}
.category-page .offer-cta .cta,
.services-page .cta {
  border-radius: 20px;
  padding: 40px;
}
.category-page .offer-cta h2,
.services-page .cta h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}
.v31-pink,
.v31-purple {
  --v31-accent: #da7795;
  --v31-soft: #fcebf1;
}
.v31-gold {
  --v31-accent: #ffc857;
}
.v33-solution-knowledge,
.v33-solution-cmdb {
  --v33-icon-accent: #da7795;
}
.v33-solution-agents,
.v33-solution-resilience {
  --v33-icon-accent: #03cea4;
}
.v31-section:not(.v31-process):not(.v31-evidence) .v31-eyebrow,
.v31-section:not(.v31-process):not(.v31-evidence) .v31-index,
.v31-related span,
.company-section .company-eyebrow,
.industry-card > span,
.company-section .contact-points span {
  color: rgb(23, 100, 158) !important;
}
.company-dark .company-eyebrow,
.company-dark .company-heading > p:last-child {
  color: rgb(185, 213, 237) !important;
}
.product-purple {
  --product-accent: #da7795;
}
.industry-card li {
  line-height: 1.5;
}
.v19-footer a {
  overflow-wrap: anywhere;
}
.reveal {
  opacity: 1;
  transform: none;
}
.company-hero-image {
  transform: none;
}
.company-hero-image::before {
  inset: 10px;
  transform: none;
}
.cs-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.cs-outcome-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cs-evidence {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.cs-crumb,
.company-crumb,
.v31-breadcrumb {
  flex-wrap: wrap;
}
.cs-tags {
  flex-wrap: wrap;
}
.sn-hero-in {
  padding-block: 145px 76px;
  display: grid;
  grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 0.7fr);
  gap: 48px;
  align-items: center;
}
.sn-hero-copy {
  width: 100%;
  padding: 0px;
}
.sn-logo-panel {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 370px;
  height: 300px;
  justify-self: center;
}
.sn-impact {
  margin-top: 0px;
  padding-block: 30px;
}
.impact-grid {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
}
.impact-grid article {
  min-height: 0px;
}
.policy-page .company-hero {
  padding-block: 145px 65px;
}
.policy-copy {
  max-width: 900px;
}
.policy-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-top: 38px;
}
.policy-copy p {
  font-size: 17px;
  line-height: 1.8;
  color: rgb(64, 82, 105);
}
.policy-copy a {
  color: rgb(23, 100, 158);
  text-decoration: underline;
}
.review-banner {
  padding: 18px 22px;
  border-width: 1px 1px 1px 5px;
  border-style: solid;
  border-color: rgb(218, 183, 97) rgb(218, 183, 97) rgb(218, 183, 97)
    rgb(255, 200, 87);
  border-image: none;
  border-radius: 12px;
  background: rgb(255, 245, 217);
  color: rgb(70, 56, 17) !important;
}
@media (max-width: 1180px) {
  .v31-hero-grid,
  .company-hero-grid {
    grid-template-columns: 1fr;
  }
  .v31-hero-visual {
    display: none;
  }
  .v31-hero > .shell > .v31-stats,
  .v31-evidence .v31-stats {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  .v32-change-flow {
    grid-template-columns: 1fr;
  }
  .v32-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
    margin: 8px;
  }
  .v32-change-flow article {
    min-height: 0px;
  }
  .v31-process-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  .cs-hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1000px) {
  .v31-split,
  .v31-fit-grid,
  .v32-final-grid,
  .company-split,
  .contact-grid,
  .cs-split,
  .sn-cta-grid,
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sn-hero-in {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sn-logo-panel {
    height: 160px;
    max-width: 300px;
  }
  .industry-hero-mark,
  .contact-hero-card {
    display: block;
    max-width: 640px;
  }
  .company-hero-image {
    display: block;
    width: min(420px, 100%);
  }
  .services-page .grid {
    grid-template-columns: 1fr;
  }
  .impact-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
}
@media (max-width: 650px) {
  .shell,
  .company-shell,
  .cs-shell,
  .wrap,
  .v31-offer .shell {
    width: calc(100% - 32px);
  }
  .hero,
  .hero-in,
  .sn-hero,
  .sn-hero-in {
    min-height: 0px;
    height: auto;
  }
  .hero-in,
  .sn-hero-in {
    padding-block: 120px 56px;
  }
  .hero-copy {
    padding: 0px;
    align-self: auto;
  }
  .company-hero,
  .offer-hero,
  .page-hero,
  .cs-hero {
    padding-block: 120px 56px;
  }
  .v31-hero {
    padding-block: 120px 36px;
  }
  .v31-hero-grid {
    padding-block: 26px 36px;
    min-height: 0px;
  }
  .company-hero-grid {
    margin-top: 24px;
  }
  .hero h1,
  .sn-hero h1,
  .company-hero h1,
  .v31-hero h1,
  .offer-hero h1,
  .page-hero h1,
  .cs-hero h1 {
    font-size: clamp(2rem, 8vw, 2.625rem);
    line-height: 1.12;
  }
  .v31-hero > .shell > .v31-stats,
  .v31-evidence .v31-stats,
  .v31-grid,
  .v31-process-grid,
  .v31-related-grid,
  .offer-grid,
  .metric-row,
  .impact-grid,
  .metrics,
  .field-row,
  .principle-grid,
  .cs-two,
  .cs-related-grid {
    grid-template-columns: 1fr;
  }
  .v31-hero > .shell > .v31-stats > div {
    min-height: 0px;
    padding: 22px;
  }
  .v31-problem {
    padding-top: 64px;
  }
  .v31-section,
  .company-section,
  .offer-section,
  .cs-section {
    padding-block: 64px;
  }
  .v31-grid article,
  .v31-fit aside,
  .contact-form {
    padding: 24px;
  }
  .v31-section-head h2,
  .company-heading h2,
  .contact-copy h2,
  .offer-section h2,
  .section-head h2,
  .cs-head h2 {
    font-size: clamp(1.875rem, 7vw, 2.375rem);
  }
  .v31-actions,
  .offer-actions,
  .sn-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .sn-logo-panel {
    position: relative;
    inset: auto;
    max-width: 240px;
    height: 130px;
    opacity: 1;
  }
  .sn-logo-panel > div {
    padding: 22px;
  }
  .sn-impact {
    margin: 0px;
    padding-top: 24px;
  }
  .sn-hero-copy {
    padding: 0px;
  }
  .v31-related {
    padding: 24px;
  }
  .v33-evidence-head > .v33-solution-icon {
    display: none;
  }
  .product-stack {
    grid-template-columns: 1fr;
  }
  .category-page .offer-cta .cta,
  .services-page .cta {
    padding: 26px;
  }
  .contact-band > .company-shell {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  ::before,
  ::after {
    animation: auto ease 0s 1 normal none running none !important;
    transition: none !important;
  }
  .v33-icon-light {
    stroke-dasharray: none;
    opacity: 0.6;
  }
  .who-carousel img {
    transition: none;
  }
}
.site-cta {
  padding: 90px 0px;
  background: rgb(7, 29, 51);
  color: rgb(255, 255, 255);
}
.site-cta-inner {
  width: min(1180px, 100% - 48px);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.site-cta h2 {
  margin: 0px 0px 22px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.site-cta p {
  color: rgb(182, 198, 213);
  font-size: 17px;
  line-height: 1.75;
}
.site-cta .site-cta-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0px 0px 18px;
  color: rgb(128, 191, 241);
}
.site-cta img {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: 20px;
}
.site-cta-button {
  display: inline-block;
  margin-top: 12px;
  background: rgb(50, 158, 246);
  color: rgb(7, 29, 51);
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
}
.site-cta-button:hover {
  background: rgb(121, 191, 253);
}
.identity .split {
  gap: 54px;
  align-items: center;
}
.identity h2 {
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  line-height: 1.15;
}
.identity .who-carousel {
  aspect-ratio: 0.88 / 1;
  border-radius: 20px;
}
.identity .who-carousel img {
  filter: grayscale(1);
}
.case-visual {
  height: 162px !important;
  background: linear-gradient(
    155deg,
    #071d33 5%,
    color-mix(in srgb, var(--case-accent, #329ef6) 72%, #071d33)
  ) !important;
}
.case-visual-one {
  --case-accent: #329ef6;
}
.case-visual-two {
  --case-accent: #da7795;
}
.case-visual-three {
  --case-accent: #03cea4;
}
.case-visual-four {
  --case-accent: #329ef6;
}
.case-visual-five {
  --case-accent: #ffc857;
}
.case-visual::before {
  width: 80px;
  height: 94px;
  top: 22px;
  left: calc(50% - 58px);
  border-radius: 0px;
  transform: rotate(-10deg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: rgba(0, 0, 0, 0.267) 0px 14px 40px;
}
.case-visual::after {
  width: 72px;
  height: 82px;
  top: 49px;
  left: calc(50% - 12px);
  right: auto;
  border-radius: 0px;
  transform: rotate(9deg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: rgba(0, 0, 0, 0.267) 0px 14px 40px;
}
.case-visual svg {
  width: 64px;
  height: 64px;
  padding: 0px;
  border: 0px;
  background: none;
  border-radius: 0px;
  box-shadow: none;
  backdrop-filter: none;
  stroke: rgb(255, 255, 255);
}
.cases .case-card {
  border-radius: 20px;
  overflow: hidden;
}
.cases small {
  font-weight: 700;
}
.cs-hero-mark > span {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  max-width: 90%;
  line-height: 1.2;
}
.about-intro-copy {
  max-width: 920px;
  font-size: 19px;
  line-height: 1.8;
  color: rgb(64, 82, 105);
}
.about-expertise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.about-expertise h3 {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.about-expertise p {
  font-size: 16px;
  line-height: 1.8;
  color: rgb(64, 82, 105);
}
.who-carousel {
  position: relative;
  overflow: hidden;
  background: rgb(220, 233, 242);
}
.who-carousel img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.who-carousel img.active {
  opacity: 1;
}
.about-carousel {
  width: min(100%, 960px);
  margin: 40px auto 0px;
  aspect-ratio: 1.5 / 1;
  border-radius: 20px;
}
.carousel-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.carousel-controls button {
  border: 1px solid rgb(154, 174, 190);
  border-radius: 8px;
  background: rgb(255, 255, 255);
  color: rgb(23, 59, 93);
  padding: 9px 14px;
  font-size: 14px;
}
.carousel-controls span {
  color: rgb(64, 82, 105);
  font-size: 14px;
}
.identity .photo {
  overflow: visible;
  background: transparent;
}
.identity .photo .carousel-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.identity .carousel-controls {
  position: absolute;
  top: 100%;
  width: 100%;
}
.contact-form > input,
.contact-form > textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgb(185, 200, 214);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: rgb(23, 59, 93);
  margin: 7px 0px 20px;
}
.contact-form > label {
  display: block;
  font-weight: 600;
  font-size: 14px;
}
.contact-form textarea {
  min-height: 190px;
  resize: vertical;
}
.contact-form .form-privacy {
  font-size: 13px;
  line-height: 1.6;
  color: rgb(82, 98, 118);
}
.form-privacy a {
  color: rgb(23, 100, 158);
  text-decoration: underline;
}
.contact-form #form-status:empty {
  display: none;
}
.contact-form #form-status {
  font-size: 15px;
  line-height: 1.6;
}
.contact-form #form-status[data-state='error'] {
  color: rgb(163, 46, 54);
}
.contact-form #form-status[data-state='success'] {
  color: rgb(23, 99, 67);
}
.contact-form .email-alternative {
  margin-top: 24px;
  font-size: 14px;
}
@media (max-width: 1000px) {
  .site-cta-inner {
    gap: 36px;
  }
  .about-expertise {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .identity .split {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 720px) {
  .site-cta {
    padding: 64px 0px;
  }
  .site-cta-inner {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
  }
  .identity .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .identity .who-carousel {
    aspect-ratio: 1.15 / 1;
    margin-bottom: 60px;
  }
  .about-carousel {
    aspect-ratio: 1.1 / 1;
  }
  .site-cta p {
    font-size: 16px;
  }
  .site-cta img {
    margin-top: 4px;
  }
}
.identity .who-carousel img {
  border-radius: 20px;
}

/* From case-study-v35.css */
:root {
  --cs-accent: #329ef6;
  --cs-soft: #eaf4ff;
  --cs-ink: #071526;
  --cs-muted: #607087;
}
* {
  box-sizing: border-box;
}
.cs-green {
  --cs-accent: #03cea4;
  --cs-soft: #e3faf5;
}
.cs-pink {
  --cs-accent: #da7795;
  --cs-soft: #fcebf1;
}
.cs-gold {
  --cs-accent: #ffc857;
  --cs-soft: #fff5d8;
}
.cs-page {
  background: #f7f9fc;
  color: var(--cs-ink);
}
.cs-shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.cs-hero {
  padding: 150px 0 95px;
  color: #fff;
  background:
    radial-gradient(
      circle at 78% 42%,
      color-mix(in srgb, var(--cs-accent) 30%, transparent),
      transparent 27%
    ),
    linear-gradient(125deg, #03070e, #081a31 62%, #071426);
  overflow: hidden;
}
.cs-crumb {
  display: flex;
  gap: 10px;
  color: #94a8bf;
  font-size: 13px;
}
.cs-crumb a {
  color: #fff;
  text-decoration: none;
}
.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.6fr);
  gap: 80px;
  align-items: center;
  margin-top: 52px;
}
.cs-kicker,
.cs-head > p,
.cs-cta > div > p {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--cs-accent);
}
.cs-hero h1 {
  max-width: 850px;
  margin: 16px 0 25px;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.01;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.cs-summary {
  max-width: 760px;
  color: #b4c3d4;
  font-size: 18px;
  line-height: 1.72;
}
.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.cs-tags span {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ccd9e6;
  font-size: 12px;
}
.cs-hero-mark {
  position: relative;
  min-height: 330px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.035)
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px);
}
.cs-hero-mark:before,
.cs-hero-mark:after {
  content: '';
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--cs-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cs-accent) 20%, transparent);
}
.cs-hero-mark:before {
  width: 55%;
  height: 44%;
  top: 15%;
  left: 12%;
  transform: rotate(-10deg);
}
.cs-hero-mark:after {
  width: 43%;
  height: 52%;
  top: 28%;
  right: 10%;
  transform: rotate(13deg);
}
.cs-hero-mark span {
  position: relative;
  z-index: 2;
  font-size: 27px;
  font-weight: 700;
}
.cs-hero-mark i {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--cs-accent),
    rgba(255, 255, 255, 0.08)
  );
}
.cs-hero-mark i:nth-of-type(2) {
  width: 75%;
}
.cs-hero-mark i:nth-of-type(3) {
  width: 55%;
}
.cs-context,
.cs-section,
.cs-dark,
.cs-outcomes,
.cs-related {
  padding: 100px 0;
}
.cs-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 90px;
  align-items: start;
}
.cs-head h2 {
  margin: 12px 0 20px;
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.cs-head > div,
.cs-split > p {
  color: var(--cs-muted);
  line-height: 1.8;
  font-size: 17px;
}
.cs-dark {
  color: #fff;
  background: #071526;
}
.cs-dark .cs-head {
  max-width: 760px;
}
.cs-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 45px;
}
.cs-two article {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}
.cs-two span,
.cs-steps span {
  color: var(--cs-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.cs-two p {
  margin: 22px 0 0;
  color: #bdc9d7;
  line-height: 1.75;
}
.cs-section {
  background: #fff;
}
.cs-section .cs-head {
  max-width: 800px;
}
.cs-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 46px;
}
.cs-steps article {
  padding: 29px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(19, 52, 91, 0.05);
}
.cs-steps p {
  margin: 24px 0 0;
  color: var(--cs-muted);
  line-height: 1.7;
}
.cs-outcomes {
  background: var(--cs-soft);
}
.cs-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 45px;
}
.cs-outcome-grid article {
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--cs-accent) 22%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
}
.cs-outcome-grid h3 {
  margin: 0 0 12px;
  font-size: 23px;
}
.cs-outcome-grid p {
  margin: 0;
  color: #56677b;
  line-height: 1.7;
}
.cs-evidence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 45px;
  border-radius: 22px;
  overflow: hidden;
  background: #071526;
  color: #fff;
}
.cs-evidence div {
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-evidence div:last-child {
  border: 0;
}
.cs-evidence strong {
  display: block;
  color: var(--cs-accent);
  font-size: 27px;
}
.cs-evidence span {
  display: block;
  margin-top: 7px;
  color: #aab9c9;
  font-size: 13px;
}
.cs-related {
  background: #fff;
}
.cs-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 42px;
}
.cs-related-grid a {
  padding: 32px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: 0.25s;
}
.cs-related-grid a:hover {
  transform: translateY(-4px);
  border-color: var(--cs-accent);
  box-shadow: 0 18px 44px rgba(19, 52, 91, 0.08);
}
.cs-related-grid span {
  color: var(--cs-accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cs-related-grid h3 {
  margin: 13px 0 9px;
  font-size: 25px;
}
.cs-related-grid p {
  color: var(--cs-muted);
  line-height: 1.65;
}
.cs-related-grid b {
  color: #234f83;
  font-size: 13px;
}
.cs-cta {
  padding: 110px 0;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--cs-accent) 27%, transparent),
      transparent 35%
    ),
    #050b14;
}
.cs-cta h2 {
  max-width: 820px;
  margin: 18px auto 32px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.cs-cta a {
  display: inline-flex;
  padding: 14px 20px;
  border: 1px solid color-mix(in srgb, var(--cs-accent) 55%, #fff);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: color-mix(in srgb, var(--cs-accent) 22%, transparent);
  font-weight: 700;
}
@media (max-width: 900px) {
  .cs-hero-grid,
  .cs-split {
    grid-template-columns: 1fr;
  }
  .cs-hero-mark {
    display: none;
  }
  .cs-steps {
    grid-template-columns: 1fr 1fr;
  }
  .cs-split {
    gap: 25px;
  }
  .cs-evidence {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .cs-shell {
    width: min(100% - 32px, 1180px);
  }
  .cs-hero {
    padding: 125px 0 70px;
  }
  .cs-hero h1 {
    font-size: 43px;
  }
  .cs-context,
  .cs-section,
  .cs-dark,
  .cs-outcomes,
  .cs-related {
    padding: 72px 0;
  }
  .cs-two,
  .cs-steps,
  .cs-outcome-grid,
  .cs-related-grid,
  .cs-evidence {
    grid-template-columns: 1fr;
  }
  .cs-evidence div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* From company-pages-v38.css */
@import url('shared-pages.css');
:root {
  --page-ink: #071526;
  --page-muted: #627287;
  --page-blue: #329ef6;
  --page-green: #03cea4;
  --page-gold: #ffc857;
  --page-pink: #da7795;
}
.company-page {
  margin: 0;
  background: #f7f9fc;
  color: var(--page-ink);
  font-family: Manrope, system-ui, sans-serif;
}
.company-shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.company-hero {
  min-height: 690px;
  padding: 128px 0 68px;
  color: #fff;
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(50, 158, 246, 0.28),
      transparent 25%
    ),
    linear-gradient(125deg, #03070e, #081a31 62%, #071426);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.company-crumb {
  display: flex;
  gap: 10px;
  color: #9eb0c6;
  font-size: 13px;
}
.company-crumb a {
  color: #fff;
  text-decoration: none;
}
.company-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 72px;
  align-items: center;
  margin-top: 42px;
}
.company-eyebrow {
  margin: 0;
  color: var(--page-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.company-hero h1 {
  max-width: 820px;
  margin: 18px 0 24px;
  font-size: clamp(42px, 4.8vw, 68px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.company-intro {
  max-width: 720px;
  margin: 0;
  color: #b5c3d3;
  font-size: 18px;
  line-height: 1.7;
}
.company-hero-image {
  position: relative;
  aspect-ratio: 1.08;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  transform: rotate(2deg);
}
.company-hero-image:before {
  content: '';
  position: absolute;
  inset: 28px -22px -22px 28px;
  z-index: -1;
  border: 1px solid rgba(50, 158, 246, 0.3);
  border-radius: 28px;
  transform: rotate(-7deg);
}
.company-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  filter: saturate(0.8);
}
.company-section {
  padding: 105px 0;
  border-bottom: 1px solid rgba(30, 68, 112, 0.1);
}
.company-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
  align-items: start;
}
.company-heading {
  max-width: 790px;
}
.company-heading h2,
.contact-copy h2 {
  margin: 14px 0 20px;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.company-heading > p:last-child {
  max-width: 690px;
  color: var(--page-muted);
  font-size: 17px;
  line-height: 1.75;
}
.company-copy p,
.contact-copy > p {
  margin: 0 0 22px;
  color: #44566c;
  font-size: 18px;
  line-height: 1.78;
}
.company-dark {
  color: #fff;
  background: #071526;
}
.company-dark .company-heading {
  max-width: 850px;
}
.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.principle-grid article {
  min-height: 300px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 4px solid var(--page-blue);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}
.principle-grid article:nth-child(2) {
  border-top-color: var(--page-green);
}
.principle-grid article:nth-child(3) {
  border-top-color: var(--page-pink);
}
.principle-grid article:nth-child(4) {
  border-top-color: var(--page-gold);
}
.principle-grid span {
  display: block;
  margin-bottom: 58px;
  color: #8094aa;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.principle-grid h3 {
  margin: 0 0 14px;
  font-size: 22px;
}
.principle-grid p {
  margin: 0;
  color: #adbdcd;
  line-height: 1.7;
}
.team-section {
  background: #fff;
}
.team-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
  margin-top: 46px;
}
.team-mosaic figure {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #dce8f2;
}
.team-mosaic .team-wide {
  grid-column: span 2;
}
.team-mosaic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.22) saturate(0.78);
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s;
}
.team-mosaic figure:hover img {
  transform: scale(1.035);
  filter: grayscale(0) saturate(0.92);
}
.company-final {
  padding: 95px 0;
  color: #fff;
  background:
    radial-gradient(circle at 75% 0, rgba(50, 158, 246, 0.27), transparent 34%),
    #050b14;
}
.company-final h2 {
  max-width: 850px;
  margin: 16px 0 18px;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.company-final > div > p:not(.company-eyebrow) {
  max-width: 680px;
  color: #afbdcc;
  font-size: 18px;
  line-height: 1.7;
}
.company-final a {
  display: inline-flex;
  margin-top: 14px;
  padding: 14px 20px;
  border: 1px solid rgba(134, 192, 255, 0.55);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(50, 158, 246, 0.2);
  font-weight: 700;
}
.industry-hero-mark,
.contact-hero-card {
  position: relative;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.035)
  );
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
}
.industry-hero-mark span,
.contact-hero-card span {
  color: #aebed0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.industry-hero-mark strong,
.contact-hero-card strong {
  display: block;
  margin: 18px 0 32px;
  font-size: 30px;
  line-height: 1.2;
}
.industry-hero-mark i {
  display: block;
  height: 8px;
  margin-top: 13px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--page-blue),
    rgba(255, 255, 255, 0.08)
  );
}
.industry-hero-mark i:nth-child(4) {
  width: 78%;
  background: linear-gradient(
    90deg,
    var(--page-green),
    rgba(255, 255, 255, 0.08)
  );
}
.industry-hero-mark i:nth-child(5) {
  width: 60%;
  background: linear-gradient(
    90deg,
    var(--page-pink),
    rgba(255, 255, 255, 0.08)
  );
}
.industry-section {
  background: #eef4f9;
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.industry-card {
  padding: 38px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-top: 5px solid var(--accent);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 52, 91, 0.07);
}
.industry-card.accent-gold {
  --accent: var(--page-gold);
}
.industry-card.accent-blue {
  --accent: var(--page-blue);
}
.industry-card.accent-green {
  --accent: var(--page-green);
}
.industry-card.accent-pink {
  --accent: var(--page-pink);
}
.industry-card > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.industry-card h2 {
  margin: 24px 0 14px;
  font-size: 30px;
  letter-spacing: -0.035em;
}
.industry-card p {
  color: var(--page-muted);
  line-height: 1.7;
}
.industry-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.industry-card li {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef4f9;
  color: #475a70;
  font-size: 12px;
}
.industry-card a {
  display: inline-block;
  margin-top: 26px;
  color: #163f70;
  font-weight: 700;
  text-decoration: none;
}
.contact-hero-card p {
  margin: 0;
  color: #b5c3d3;
  line-height: 1.7;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 90px;
  align-items: start;
}
.contact-points {
  margin-top: 36px;
}
.contact-points div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(34, 78, 130, 0.12);
}
.contact-points span {
  color: var(--page-blue);
  font-size: 12px;
  font-weight: 700;
}
.contact-points p {
  margin: 0;
  color: #52657a;
  line-height: 1.6;
}
.contact-form {
  padding: 38px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-top: 5px solid var(--page-blue);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(19, 52, 91, 0.09);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form label {
  display: block;
  margin-bottom: 20px;
}
.contact-form label span {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(46, 91, 145, 0.2);
  border-radius: 11px;
  background: #f9fbfd;
  color: var(--page-ink);
  font: inherit;
}
.contact-form textarea {
  min-height: 170px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(50, 158, 246, 0.18);
  border-color: var(--page-blue);
}
.contact-form button {
  padding: 14px 20px;
  border: 0;
  border-radius: 11px;
  background: #1478e8;
  color: #fff;
  font:
    700 14px Manrope,
    sans-serif;
  cursor: pointer;
}
.contact-form small {
  display: block;
  margin-top: 14px;
  color: #7c8a9b;
}
.contact-band {
  padding: 85px 0;
  color: #fff;
  background: #071526;
}
.contact-band > .company-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.contact-band h2 {
  margin: 14px 0 0;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-tags span {
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #c1cedd;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
@media (max-width: 1000px) {
  .company-hero-grid,
  .company-split,
  .contact-grid,
  .contact-band > .company-shell {
    grid-template-columns: 1fr;
  }
  .company-hero-image,
  .industry-hero-mark,
  .contact-hero-card {
    display: none;
  }
  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
  .industry-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .company-shell {
    width: min(100% - 32px, 1180px);
  }
  .company-hero {
    min-height: 610px;
    padding: 112px 0 58px;
  }
  .company-hero-grid {
    margin-top: 34px;
  }
  .company-hero h1 {
    font-size: 42px;
  }
  .company-intro {
    font-size: 16px;
  }
  .company-section {
    padding: 72px 0;
  }
  .company-heading h2,
  .contact-copy h2 {
    font-size: 38px;
  }
  .principle-grid,
  .team-mosaic,
  .field-row {
    grid-template-columns: 1fr;
  }
  .principle-grid article {
    min-height: auto;
  }
  .principle-grid span {
    margin-bottom: 34px;
  }
  .team-mosaic {
    grid-auto-rows: 240px;
  }
  .team-mosaic .team-wide {
    grid-column: auto;
  }
  .industry-card,
  .contact-form {
    padding: 26px;
  }
  .company-final {
    padding: 76px 0;
  }
  .company-final h2 {
    font-size: 42px;
  }
}

/* From offer-pages.css */
.offer-hero {
  min-height: 74vh;
  padding: 150px 0 90px;
  background:
    radial-gradient(
      circle at 78% 34%,
      rgba(50, 158, 246, 0.25),
      transparent 28%
    ),
    radial-gradient(
      circle at 68% 78%,
      rgba(3, 206, 164, 0.12),
      transparent 24%
    ),
    linear-gradient(125deg, #04070d, #07172b);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.offer-hero:after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  right: -80px;
  top: 110px;
  border: 1px solid rgba(117, 186, 255, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 75px rgba(117, 186, 255, 0.025),
    0 0 0 150px rgba(117, 186, 255, 0.018);
}
.offer-hero .shell {
  position: relative;
  z-index: 2;
}
.offer-hero h1 {
  max-width: 980px;
  margin: 20px 0 24px;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.offer-hero p {
  max-width: 760px;
  color: #aebed0;
  font-size: 17px;
  line-height: 1.75;
}
.offer-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.offer-actions a {
  padding: 13px 19px;
  border: 1px solid rgba(170, 215, 255, 0.3);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(50, 158, 246, 0.14);
}
.offer-main {
  padding: 100px 0;
  background: #f7f9fc;
}
.offer-section {
  padding: 70px 0;
  border-top: 1px solid rgba(34, 78, 130, 0.11);
}
.offer-section:first-child {
  padding-top: 0;
  border-top: 0;
}
.offer-section h2 {
  max-width: 850px;
  margin: 12px 0 22px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.offer-section > p,
.offer-lead {
  max-width: 800px;
  color: #657488;
  line-height: 1.8;
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.offer-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(19, 52, 91, 0.06);
}
.offer-card .number {
  display: block;
  margin-bottom: 24px;
  color: #2c8cff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.offer-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.offer-card p {
  margin: 0;
  color: #66758a;
  font-size: 14px;
  line-height: 1.7;
}
.offer-card a {
  display: inline-block;
  margin-top: 18px;
  color: #1d71d4;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.offer-band {
  margin-top: 45px;
  padding: 38px;
  border-radius: 24px;
  background: linear-gradient(130deg, #071526, #0c3263);
  color: #fff;
}
.offer-band h3 {
  margin: 0 0 12px;
  font-size: 28px;
}
.offer-band p {
  max-width: 850px;
  margin: 0;
  color: #b5c5d6;
  line-height: 1.75;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 38px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(34, 78, 130, 0.12);
}
.metric {
  padding: 28px;
  background: #fff;
}
.metric strong {
  display: block;
  color: #1478e8;
  font-size: 34px;
}
.metric span {
  display: block;
  margin-top: 8px;
  color: #66758a;
  font-size: 13px;
  line-height: 1.5;
}
.breadcrumb {
  margin-bottom: 22px;
  color: #77b7ff;
  font-size: 12px;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.offer-cta {
  padding: 0 0 110px;
  background: #f7f9fc;
}
.offer-cta .cta {
  margin-top: 0;
}
.category-card:after {
  content: '→';
  position: absolute;
  right: 25px;
  top: 24px;
  color: #2c8cff;
}
.category-card > a:after {
  content: '';
  position: absolute;
  inset: 0;
}
@media (max-width: 1000px) {
  .offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .offer-grid,
  .metric-row {
    grid-template-columns: 1fr;
  }
  .offer-hero {
    min-height: 66vh;
    padding-top: 125px;
  }
  .offer-section {
    padding: 52px 0;
  }
  .offer-band {
    padding: 28px;
  }
  .offer-actions {
    flex-direction: column;
  }
  .offer-actions a {
    text-align: center;
  }
}

/* From servicenow-offers-v31.css */
:root {
  --v31-accent: #329ef6;
  --v31-soft: #e9f4ff;
  --v31-ink: #071526;
  --v31-muted: #627287;
}
.v31-green {
  --v31-accent: #03cea4;
  --v31-soft: #e2faf4;
}
.v31-gold {
  --v31-accent: #e9a928;
  --v31-soft: #fff5d9;
}
.v31-purple {
  --v31-accent: #da7795;
  --v31-soft: #fcebf1;
}
.v31-pink {
  --v31-accent: #da7795;
  --v31-soft: #fcebf1;
}
.v31-offer {
  background: #f7f9fc;
  color: var(--v31-ink);
}
.v31-offer .shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.v31-hero {
  padding: 150px 0 0;
  color: #fff;
  background:
    radial-gradient(
      circle at 77% 30%,
      color-mix(in srgb, var(--v31-accent) 34%, transparent),
      transparent 25%
    ),
    linear-gradient(125deg, #03070e, #081a31 62%, #071426);
  overflow: hidden;
}
.v31-breadcrumb {
  display: flex;
  gap: 10px;
  color: #9eb0c6;
  font-size: 13px;
}
.v31-breadcrumb a {
  color: #fff;
  text-decoration: none;
}
.v31-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 70px;
  align-items: center;
  padding: 52px 0 70px;
}
.v31-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--v31-accent) !important;
}
.v31-hero h1 {
  max-width: 850px;
  margin: 18px 0 24px;
  font-size: clamp(46px, 5.7vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.v31-intro {
  max-width: 760px;
  color: #b5c3d3;
  font-size: 18px;
  line-height: 1.7;
}
.v31-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.v31-actions a,
.v31-final a {
  padding: 14px 20px;
  border: 1px solid color-mix(in srgb, var(--v31-accent) 55%, #fff);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: color-mix(in srgb, var(--v31-accent) 22%, transparent);
  font-weight: 700;
}
.v31-actions a + a {
  background: transparent;
  border-color: #52647a;
}
.v31-hero-visual {
  min-height: 350px;
  display: grid;
  place-items: center;
  position: relative;
}
.v31-hero-visual:before,
.v31-hero-visual:after {
  content: '';
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--v31-accent) 40%, transparent);
  border-radius: 28px;
  transform: rotate(8deg);
}
.v31-hero-visual:before {
  inset: 22px -5px 34px 40px;
}
.v31-hero-visual:after {
  inset: 66px 36px 3px 4px;
  transform: rotate(-7deg);
}
.v31-glass {
  position: relative;
  z-index: 2;
  width: min(340px, 90%);
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.035)
  );
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}
.v31-glass span {
  color: #aebed0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.v31-glass strong {
  display: block;
  margin: 14px 0 30px;
  font-size: 28px;
  line-height: 1.15;
}
.v31-glass i {
  display: block;
  height: 8px;
  margin-top: 12px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--v31-accent),
    rgba(255, 255, 255, 0.08)
  );
}
.v31-glass i:nth-child(3) {
  width: 82%;
}
.v31-glass i:nth-child(4) {
  width: 62%;
}
.v31-glass i:nth-child(5) {
  width: 74%;
}
.v31-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.v31-stats > div {
  padding: 28px 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}
.v31-stats > div:last-child {
  border: 0;
}
.v31-stats strong {
  display: block;
  color: var(--v31-accent);
  font-size: 27px;
}
.v31-stats span {
  display: block;
  margin-top: 7px;
  color: #aebed0;
  font-size: 13px;
}
.v31-section {
  padding: 100px 0;
  border-bottom: 1px solid rgba(30, 68, 112, 0.1);
}
.v31-section-head {
  max-width: 850px;
}
.v31-section-head h2 {
  margin: 12px 0 20px;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.v31-section-head > p:last-child {
  max-width: 800px;
  color: var(--v31-muted);
  line-height: 1.75;
}
.v31-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.v31-copy {
  padding-top: 30px;
}
.v31-copy p {
  margin: 0 0 22px;
  color: #44566c;
  font-size: 18px;
  line-height: 1.75;
}
.v31-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 42px;
}
.v31-grid.v31-three {
  grid-template-columns: repeat(3, 1fr);
}
.v31-grid article {
  padding: 30px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(19, 52, 91, 0.05);
}
.v31-index {
  display: block;
  margin-bottom: 28px;
  color: var(--v31-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.v31-grid h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
}
.v31-grid p {
  margin: 0;
  color: var(--v31-muted);
  line-height: 1.7;
}
.v31-change {
  background: #fff;
}
.v31-process {
  background: var(--v31-ink);
  color: #fff;
}
.v31-process .v31-section-head > p:last-child,
.v31-process .v31-grid p {
  color: #adbdcd;
}
.v31-process .v31-grid article {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}
.v31-process-grid {
  grid-template-columns: repeat(4, 1fr);
}
.v31-process-grid article:nth-child(5) {
  grid-column: auto;
}
.v31-outputs {
  background: #fff;
}
.v31-outputs ul,
.v31-fit ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.v31-outputs li,
.v31-fit li {
  position: relative;
  padding: 18px 20px 18px 40px;
  border-bottom: 1px solid rgba(34, 78, 130, 0.11);
  font-size: 17px;
}
.v31-outputs li:before,
.v31-fit li:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v31-accent);
}
.v31-evidence {
  color: #fff;
  background: linear-gradient(130deg, #081729, #0a315b);
}
.v31-evidence .v31-section-head > p:last-child {
  color: #b8c6d5;
}
.v31-evidence .v31-stats {
  margin-top: 45px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
}
.v31-fit-grid {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 70px;
  align-items: start;
}
.v31-fit aside {
  padding: 40px;
  border-radius: 24px;
  background: var(--v31-soft);
  border: 1px solid color-mix(in srgb, var(--v31-accent) 24%, transparent);
}
.v31-fit aside h3 {
  margin: 12px 0 16px;
  font-size: 28px;
  line-height: 1.2;
}
.v31-fit aside p:last-child {
  color: #4e6074;
  line-height: 1.75;
}
.v31-related-wrap {
  background: #fff;
}
.v31-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 38px;
}
.v31-related {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 32px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: 0.25s;
}
.v31-related:hover {
  transform: translateY(-4px);
  border-color: var(--v31-accent);
  box-shadow: 0 18px 44px rgba(19, 52, 91, 0.08);
}
.v31-related span {
  color: var(--v31-accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.v31-related h3 {
  margin: 12px 0 10px;
  font-size: 24px;
}
.v31-related p {
  margin: 0;
  color: var(--v31-muted);
  line-height: 1.65;
}
.v31-related > span {
  font-size: 24px;
}
.v31-final {
  padding: 110px 0;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--v31-accent) 27%, transparent),
      transparent 35%
    ),
    #050b14;
}
.v31-final h2 {
  max-width: 850px;
  margin: 16px auto 18px;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.v31-final > div > p:not(.v31-eyebrow) {
  max-width: 680px;
  margin: 0 auto 30px;
  color: #afbdcc;
  font-size: 18px;
  line-height: 1.7;
}
.v31-final a {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.v31-final a span {
  font-size: 18px;
}
@media (max-width: 1000px) {
  .v31-hero-grid,
  .v31-split,
  .v31-fit-grid {
    grid-template-columns: 1fr;
  }
  .v31-hero-visual {
    display: none;
  }
  .v31-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v31-grid.v31-three {
    grid-template-columns: 1fr;
  }
  .v31-split {
    gap: 35px;
  }
  .v31-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .v31-offer .shell {
    width: min(100% - 32px, 1180px);
  }
  .v31-hero {
    padding-top: 120px;
  }
  .v31-hero-grid {
    padding: 38px 0 52px;
  }
  .v31-hero h1 {
    font-size: 42px;
  }
  .v31-actions {
    flex-direction: column;
  }
  .v31-actions a {
    text-align: center;
  }
  .v31-stats,
  .v31-grid,
  .v31-process-grid,
  .v31-related-grid {
    grid-template-columns: 1fr;
  }
  .v31-stats > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  .v31-section {
    padding: 72px 0;
  }
  .v31-section-head h2 {
    font-size: 38px;
  }
  .v31-grid article,
  .v31-fit aside {
    padding: 25px;
  }
}
.v31-hero {
  min-height: 750px;
  padding: 122px 0 0;
  overflow: visible;
}
.v31-hero-grid {
  min-height: 480px;
  padding: 34px 0 48px;
}
.v31-hero h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
}
.v31-intro {
  max-width: 650px;
  font-size: 16px;
}
.v31-hero > .shell > .v31-stats {
  position: relative;
  z-index: 5;
  gap: 14px;
  border: 0;
  transform: translateY(50%);
}
.v31-hero > .shell > .v31-stats > div {
  min-height: 150px;
  padding: 24px 22px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-top: 4px solid var(--v31-accent);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(19, 52, 91, 0.13);
}
.v31-hero > .shell > .v31-stats strong {
  color: #142a4d;
  font-size: 38px;
}
.v31-hero > .shell > .v31-stats span {
  color: #60718a;
}
.v31-problem {
  padding-top: 170px;
}
.v31-grid article {
  overflow: hidden;
  border-radius: 20px;
  border-top: 4px solid var(--v31-accent);
  box-shadow: 0 15px 34px rgba(23, 59, 93, 0.08);
  transition: 0.22s;
}
.v31-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(23, 59, 93, 0.13);
}
.v31-process .v31-grid article {
  border-top-color: var(--v31-accent);
  background: rgba(255, 255, 255, 0.07);
}
.v32-change-flow {
  display: grid;
  grid-template-columns: 1fr 58px 1fr 58px 1fr;
  align-items: stretch;
  margin-top: 44px;
}
.v32-change-flow article {
  position: relative;
  min-height: 265px;
  padding: 34px;
  border: 1px solid rgba(34, 78, 130, 0.13);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(19, 52, 91, 0.07);
}
.v32-change-flow article > span {
  display: block;
  margin-bottom: 50px;
  color: #7c8a9b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.v32-change-flow article h3 {
  margin: 0 0 14px;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.v32-change-flow article p {
  margin: 0;
  color: #627287;
  line-height: 1.7;
}
.v32-change-flow .v32-change-0 {
  background: linear-gradient(145deg, #f5f7fa, #fff);
}
.v32-change-flow .v32-change-1 {
  color: #fff;
  border-color: #183b5f;
  background: linear-gradient(145deg, #071526, #0c3263);
}
.v32-change-flow .v32-change-1 > span {
  color: var(--v31-accent);
}
.v32-change-flow .v32-change-1 p {
  color: #b5c5d6;
}
.v32-change-flow .v32-change-2 {
  border-top: 5px solid var(--v31-accent);
  background: linear-gradient(145deg, var(--v31-soft), #fff);
}
.v32-flow-arrow {
  align-self: center;
  justify-self: center;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--v31-accent) 45%, #fff);
  border-radius: 50%;
  color: #fff;
  background: var(--v31-accent);
  font-size: 20px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v31-accent) 25%, transparent);
}
.v31-evidence .v31-stats {
  display: grid;
  gap: 14px;
  border: 0;
  background: transparent;
  overflow: visible;
}
.v31-evidence .v31-stats > div {
  min-height: 150px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 4px solid var(--v31-accent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.v31-evidence .v31-stats > div:last-child {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 4px solid var(--v31-accent);
}
.v31-evidence .v31-stats strong {
  font-size: 34px;
}
.v31-final {
  text-align: left;
  padding: 90px 0;
}
.v32-final-grid {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 70px;
  align-items: center;
}
.v31-final h2 {
  margin: 16px 0 18px;
}
.v31-final > div > div > p:not(.v31-eyebrow) {
  max-width: 650px;
  margin: 0 0 30px;
  color: #afbdcc;
  font-size: 18px;
  line-height: 1.7;
}
.v32-final-grid img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(1);
}
.v33-solution-icon {
  --v33-icon-accent: #329ef6;
  display: block;
  overflow: visible;
  color: #bfe5ff;
}
.v33-solution-audit,
.v33-solution-governance {
  --v33-icon-accent: #ffc857;
}
.v33-solution-knowledge,
.v33-solution-cmdb {
  --v33-icon-accent: #ef88a8;
}
.v33-solution-agents,
.v33-solution-resilience {
  --v33-icon-accent: #5de0c4;
}
.v33-icon-base,
.v33-icon-light {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v33-icon-base .icon-accent {
  stroke: var(--v33-icon-accent);
}
.v33-icon-base .icon-accent-fill {
  stroke: var(--v33-icon-accent);
  fill: color-mix(in srgb, var(--v33-icon-accent) 28%, transparent);
}
.v31-glass .v33-solution-icon {
  width: 132px;
  height: 132px;
  margin: 24px auto 22px;
}
.v31-glass .v33-icon-base {
  opacity: 0.88;
}
.v31-glass .v33-icon-light {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 12 88;
  fill: none;
  filter: drop-shadow(0 0 5px var(--v33-icon-accent))
    drop-shadow(0 0 12px var(--v33-icon-accent));
  animation: v33-icon-trace 9.6s linear infinite;
}
.v31-glass strong {
  margin: 0;
  font-size: 25px;
  text-align: center;
}
.v33-heading-with-icon {
  position: relative;
  padding-top: 76px;
}
.v33-heading-with-icon > .v33-solution-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  opacity: 0.82;
}
.v33-change-icon {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 46px;
  height: 46px;
  opacity: 0.86;
}
.v33-change-icon .v33-solution-icon {
  width: 100%;
  height: 100%;
}
.v32-change-flow .v32-change-1 > span {
  padding-right: 52px;
}
.v33-evidence-head {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: flex-start;
}
.v33-evidence-head > .v33-solution-icon {
  flex: 0 0 94px;
  width: 94px;
  height: 94px;
  margin-top: 12px;
  opacity: 0.78;
}
.v33-evidence-head .v31-section-head {
  flex: 1;
}
@keyframes v33-icon-trace {
  to {
    stroke-dashoffset: -100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v31-glass .v33-icon-light {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.8;
  }
}
.v33-solution-staffing,
.v33-solution-change {
  --v33-icon-accent: #da7795;
}
.v33-solution-transformation,
.v33-solution-agentic {
  --v33-icon-accent: #03cea4;
}
.v33-solution-pdaas,
.v33-solution-architecture {
  --v33-icon-accent: #329ef6;
}
@media (max-width: 1000px) {
  .v31-hero {
    min-height: 750px;
  }
  .v32-change-flow {
    grid-template-columns: 1fr 44px 1fr 44px 1fr;
  }
  .v32-change-flow article {
    padding: 26px;
  }
  .v32-final-grid {
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .v31-hero {
    min-height: 700px;
    padding-top: 110px;
  }
  .v31-hero-grid {
    min-height: auto;
    padding-bottom: 30px;
  }
  .v31-hero > .shell > .v31-stats {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(38%);
  }
  .v31-hero > .shell > .v31-stats > div {
    min-height: 120px;
  }
  .v31-problem {
    padding-top: 180px;
  }
  .v32-change-flow {
    grid-template-columns: 1fr;
  }
  .v32-flow-arrow {
    margin: 10px 0;
    transform: rotate(90deg);
  }
  .v32-change-flow article {
    min-height: auto;
  }
  .v32-change-flow article > span {
    margin-bottom: 30px;
  }
  .v32-final-grid {
    grid-template-columns: 1fr;
  }
  .v32-final-grid img {
    margin-top: 18px;
  }
  .v33-evidence-head > .v33-solution-icon {
    display: none;
  }
}

/* From servicenow.css */
.sn-page {
  background: #fff;
}
.sn-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #071d33;
  color: #fff;
}
.sn-hero:after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  background: linear-gradient(transparent, #071d33);
}
.sn-hero-photo {
  position: absolute;
  inset: 0 0 0 46%;
}
.sn-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.4) contrast(1.05);
  opacity: 0.68;
}
.sn-hero-photo:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #071d33 0%, #071d33c7 18%, #071d3314 65%),
    linear-gradient(0deg, #071d33aa, transparent 44%);
}
.sn-hero-photo span {
  position: absolute;
  z-index: 2;
  inset: 16% 10% 12% 18%;
  border: 1px solid #73dfe16e;
  background: linear-gradient(145deg, #329ef61f, #03cea429);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 100px #03cea42b;
  transform: skewY(-3deg);
}
.sn-hero-in {
  position: relative;
  z-index: 3;
  min-height: 720px;
  display: flex;
  align-items: center;
}
.sn-hero-copy {
  width: min(690px, 58%);
  padding-top: 78px;
}
.sn-hero h1 {
  margin: 0;
  font-size: clamp(48px, 5.3vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.sn-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #b7a8ff, #59c0ff, #55e1c7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sn-hero-copy > p:last-of-type {
  max-width: 580px;
  margin: 25px 0;
  color: #c7d5e2;
  font-size: 17px;
}
.sn-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sn-secondary {
  padding: 13px 20px;
  border: 1px solid #ffffff70;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 600;
}
.sn-impact {
  position: relative;
  z-index: 4;
  margin-top: -92px;
  padding-bottom: 34px;
  color: #fff;
}
.impact-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  border: 1px solid #ffffff3b;
  background: #0b2940d9;
  backdrop-filter: blur(18px);
}
.impact-title,
.impact-grid article {
  min-height: 190px;
  padding: 27px 24px;
  border-right: 1px solid #ffffff2b;
}
.impact-title h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}
.impact-grid article:last-child {
  border: 0;
}
.impact-grid strong {
  display: block;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.impact-grid article:nth-child(3) strong {
  color: #58d7bc;
}
.impact-grid article:nth-child(4) strong {
  color: #ffc857;
}
.impact-grid article:nth-child(5) strong {
  color: #da7795;
}
.impact-grid span {
  display: block;
  margin: 10px 0 8px;
  font-weight: 600;
}
.impact-grid p {
  margin: 0;
  color: #9eb1c3;
  font-size: 12px;
}
.sn-solutions {
  background: linear-gradient(180deg, #fff, #eef5fa);
}
.product-stack {
  display: grid;
  gap: 18px;
}
.product-card {
  --accent: #03cea4;
  position: relative;
  display: grid;
  grid-template-columns: 72px 185px minmax(0, 1fr) 68px;
  min-height: 245px;
  overflow: hidden;
  border: 1px solid #d7e2eb;
  background: #fff;
  box-shadow: 0 14px 36px #173b5d0b;
  transition: 0.25s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px #173b5d16;
}
.product-number {
  padding: 24px 0;
  text-align: center;
  color: #789;
  font-size: 12px;
}
.product-accent {
  display: flex;
  align-items: flex-end;
  padding: 24px;
  background: linear-gradient(
    155deg,
    #071d33 5%,
    color-mix(in srgb, var(--accent) 72%, #071d33)
  );
  color: #fff;
  position: relative;
  overflow: hidden;
}
.product-accent:before,
.product-accent:after {
  content: '';
  position: absolute;
  border: 1px solid #ffffff4d;
  background: #ffffff12;
  box-shadow: 0 14px 40px #0004;
}
.product-accent:before {
  width: 94px;
  height: 115px;
  top: 29px;
  left: 25px;
  transform: rotate(-10deg);
}
.product-accent:after {
  width: 83px;
  height: 94px;
  top: 61px;
  left: 68px;
  transform: rotate(9deg);
}
.product-accent span {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.product-copy {
  padding: 30px 38px;
}
.product-kicker {
  margin: 0 0 5px !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.product-copy h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.product-copy > p {
  margin: 0 0 15px;
  color: #60718a;
}
.product-copy ul {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-copy li {
  color: #4e6078;
  font-size: 12px;
}
.product-copy li:before {
  content: '✓';
  margin-right: 7px;
  color: #069f83;
  font-weight: 700;
}
.product-link {
  align-self: center;
  justify-self: center;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #9caebe;
  border-radius: 50%;
  text-decoration: none;
  font-size: 21px;
}
.product-purple {
  --accent: #da7795;
}
.product-gold {
  --accent: #e6a827;
}
.product-blue {
  --accent: #329ef6;
}
.agent-catalogue {
  background: #071d33;
  color: #fff;
}
.agent-catalogue .intro > p {
  color: #aebdcb;
}
.agent-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}
.agent-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agent-filter {
  padding: 9px 12px;
  border: 1px solid #ffffff30;
  border-radius: 99px;
  background: transparent;
  color: #c7d3de;
  font: 600 12px Manrope;
  cursor: pointer;
}
.agent-filter.active,
.agent-filter:hover {
  background: #fff;
  color: #071d33;
}
.agent-key {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #93a9bb;
  font-size: 11px;
}
.agent-key span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-key i,
.status-pill i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
}
.demo {
  background: #03cea4;
}
.guided {
  background: #329ef6;
}
.active {
  background: #8193a4;
}
.agent-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 9px;
}
.agent-card {
  --cat: #da7795;
  min-height: 132px;
  padding: 14px 12px 11px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ffffff20;
  border-top: 3px solid var(--cat);
  background: #ffffff0a;
  transition: 0.2s;
}
.agent-card:hover {
  transform: translateY(-3px);
  background: #ffffff12;
}
.agent-card h3 {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.agent-category {
  color: var(--cat);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: #8fa4b5;
  font-size: 9px;
}
.cat-HR {
  --cat: #da7795;
}
.cat-INCIDENT {
  --cat: #329ef6;
}
.cat-APP-PORTFOLIO {
  --cat: #ffc857;
}
.cat-PROCUREMENT {
  --cat: #03cea4;
}
.cat-COMPLIANCE {
  --cat: #f36f63;
}
.cat-STANDALONE {
  --cat: #57d4c2;
}
.cat-ROADMAP {
  --cat: #a5b1bd;
}
.agent-card.hidden {
  display: none;
}
.agent-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #ffffff24;
}
.agent-cta p {
  color: #aebdcb;
}
.agent-cta a {
  color: #60cdb9;
  text-decoration: none;
  font-weight: 700;
}
.sn-clients {
  padding-bottom: 90px;
}
.sn-identity {
  background: #eef5fa;
}
.sn-cta {
  padding: 100px 0;
  background: linear-gradient(110deg, #071d33, #0b304b);
  color: #fff;
}
.sn-cta .wrap {
  max-width: 1380px;
}
.sn-cta h2 {
  max-width: 730px;
  margin: 0;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.sn-cta p:not(.eyebrow) {
  max-width: 620px;
  color: #b7c6d4;
  font-size: 16px;
  margin: 22px 0 26px;
}
@media (max-width: 1100px) {
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .impact-title {
    grid-column: 1/-1;
    min-height: auto;
  }
  .impact-grid article {
    border-top: 1px solid #ffffff2b;
  }
  .agent-board {
    grid-template-columns: repeat(5, 1fr);
  }
  .product-card {
    grid-template-columns: 55px 150px minmax(0, 1fr) 55px;
  }
  .product-copy {
    padding: 27px;
  }
  .product-copy ul {
    display: grid;
    gap: 5px;
  }
}
@media (max-width: 720px) {
  .sn-hero,
  .sn-hero-in {
    min-height: 700px;
  }
  .sn-hero-photo {
    left: 0;
    opacity: 0.42;
  }
  .sn-hero-photo:after {
    background: linear-gradient(180deg, #071d3325, #071d33 80%);
  }
  .sn-hero-copy {
    width: 100%;
    align-self: flex-end;
    padding: 0 0 145px;
  }
  .sn-hero h1 {
    font-size: 42px;
  }
  .sn-impact {
    margin-top: -105px;
  }
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .impact-grid article {
    min-height: 170px;
  }
  .product-card {
    grid-template-columns: 45px minmax(0, 1fr) 48px;
  }
  .product-accent {
    display: none;
  }
  .product-copy {
    padding: 25px 16px;
  }
  .product-copy h3 {
    font-size: 25px;
  }
  .agent-topline {
    display: block;
  }
  .agent-key {
    margin-top: 16px;
  }
  .agent-board {
    grid-template-columns: repeat(2, 1fr);
  }
  .agent-card {
    min-height: 126px;
  }
  .sn-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .sn-actions a {
    text-align: center;
  }
  .sn-cta {
    padding: 72px 0;
  }
}
/* v30 cohesion refinements */
.sn-hero,
.sn-hero-in {
  min-height: 750px;
  height: 750px;
}
.sn-hero-in {
  justify-content: space-between;
  gap: 70px;
}
.sn-hero-copy {
  width: min(650px, 53%);
  padding-top: 82px;
}
.sn-hero h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.sn-hero-copy > p:last-of-type {
  max-width: 560px;
  margin: 18px 0 22px;
  font-size: 15px;
}
.sn-hero .button {
  padding: 12px 18px;
  font-size: 13px;
}
.sn-hero-photo {
  left: 48%;
  opacity: 0.44;
}
.sn-hero-photo:after {
  background:
    linear-gradient(90deg, #071d33 0%, #071d33dd 24%, #071d3366 70%),
    linear-gradient(0deg, #071d33b5, transparent 50%);
}
.sn-logo-panel {
  position: relative;
  width: min(460px, 39%);
  height: 360px;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.sn-logo-panel > div {
  position: relative;
  z-index: 3;
  width: 82%;
  padding: 42px 34px;
  border: 1px solid #ffffff73;
  background: #f8ffffe8;
  box-shadow: 0 32px 80px #00182c80;
  backdrop-filter: blur(14px);
  transform: rotateY(-8deg);
}
.sn-logo-panel img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.logo-layer {
  position: absolute;
  width: 69%;
  height: 73%;
  border: 1px solid #72d8e66b;
  background: linear-gradient(145deg, #329ef62c, #03cea429);
  backdrop-filter: blur(8px);
}
.layer-one {
  left: 2%;
  top: 2%;
  transform: rotateY(12deg) translateZ(-30px);
}
.layer-two {
  right: 0;
  bottom: 1%;
  transform: rotateY(-15deg) translateZ(-55px);
}
.sn-impact {
  margin-top: -72px;
  padding: 0 0 42px;
  color: var(--ink);
}
.impact-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.impact-grid article,
.impact-grid article:last-child {
  position: relative;
  min-height: 158px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px #173b5d15;
}
.impact-grid article:nth-child(2) {
  border-top-color: var(--blue);
}
.impact-grid article:nth-child(3) {
  border-top-color: var(--pink);
}
.impact-grid article:nth-child(4) {
  border-top-color: #ffc857;
}
.impact-grid strong,
.impact-grid article:nth-child(n) strong {
  font-size: 44px;
  color: #142a4d;
}
.impact-grid p {
  margin: 10px 0 0;
  color: #60718a;
  font-size: 12px;
  line-height: 1.45;
}
.sn-partner {
  padding-top: 70px;
  background: #fff;
}
.partner-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.partner-intro {
  padding-top: 8px;
}
.partner-intro h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.partner-intro > p:last-child {
  max-width: 540px;
  color: var(--muted);
  font-size: 15px;
}
.partner-points {
  display: grid;
  gap: 15px;
}
.partner-points article {
  position: relative;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-top: 4px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fbfdff) padding-box,
    linear-gradient(90deg, var(--teal), var(--blue)) border-box;
  box-shadow: 0 15px 34px #173b5d0c;
}
.partner-points h3 {
  margin: 0 0 7px;
  font-size: 19px;
}
.partner-points p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.product-accent {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}
.product-accent svg {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-accent span {
  align-self: flex-start;
}
@media (max-width: 980px) {
  .sn-hero-in {
    gap: 30px;
  }
  .sn-logo-panel {
    width: 38%;
    height: 300px;
  }
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .sn-hero,
  .sn-hero-in {
    min-height: 700px;
    height: 700px;
  }
  .sn-hero-in {
    display: flex;
  }
  .sn-hero-copy {
    width: 100%;
    padding: 0 0 115px;
  }
  .sn-logo-panel {
    position: absolute;
    right: 0;
    top: 95px;
    width: 48%;
    height: 190px;
    opacity: 0.9;
  }
  .sn-logo-panel > div {
    padding: 24px 18px;
  }
  .sn-impact {
    margin-top: -78px;
  }
  .impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .impact-grid article {
    min-height: 150px;
    padding: 18px 15px;
    border-radius: 15px;
  }
  .impact-grid strong,
  .impact-grid article:nth-child(n) strong {
    font-size: 36px;
  }
  .partner-grid {
    gap: 30px;
  }
  .partner-intro h2 {
    font-size: 38px;
  }
  .partner-points article {
    padding: 21px;
  }
}
.sn-solution-group {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 34px;
  align-items: start;
  margin: 76px 0 22px;
  padding-top: 34px;
  border-top: 1px solid rgba(25, 68, 113, 0.12);
}
.sn-solution-group:first-of-type {
  margin-top: 48px;
}
.sn-solution-group h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.sn-solution-group .product-kicker {
  margin-top: 7px !important;
}
@media (max-width: 720px) {
  .sn-solution-group {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 56px;
  }
}
/* v32 ServiceNow page alignment */
.sn-partner {
  padding-bottom: 46px;
}
.sn-solutions {
  padding-top: 46px;
}
.sn-solution-group {
  display: block;
  margin: 64px 0 24px;
  padding-top: 30px;
}
.sn-solution-group:first-of-type {
  margin-top: 40px;
}
.sn-solution-group h3 {
  max-width: 760px;
  margin-top: 8px;
}
.product-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 20px;
}
.product-number {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  color: #fff;
  background: #071d337d;
  backdrop-filter: blur(8px);
}
.product-accent {
  flex: 0 0 162px;
  width: 100%;
  padding: 22px;
  align-items: center;
  justify-content: center;
}
.product-accent:before {
  width: 80px;
  height: 94px;
  top: 22px;
  left: calc(50% - 58px);
}
.product-accent:after {
  width: 72px;
  height: 82px;
  top: 49px;
  left: calc(50% - 12px);
}
.product-accent svg {
  width: 64px;
  height: 64px;
}
.product-accent span {
  position: absolute;
  left: 22px;
  bottom: 18px;
}
.product-copy {
  flex: 1;
  padding: 28px 28px 18px;
}
.product-copy h3 {
  font-size: 25px;
}
.product-copy > p {
  line-height: 1.65;
}
.product-copy ul {
  display: grid;
  gap: 7px;
}
.product-link {
  flex: 0 0 45px;
  margin: 0 26px 26px auto;
  color: #173b5d;
}
.sn-cta {
  padding: 90px 0;
}
.sn-cta-grid {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 70px;
  align-items: center;
}
.sn-cta-grid img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(1);
}
@media (max-width: 1000px) {
  .product-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sn-cta-grid {
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .sn-partner {
    padding-bottom: 38px;
  }
  .sn-solutions {
    padding-top: 38px;
  }
  .sn-solution-group {
    margin-top: 48px;
  }
  .product-stack {
    grid-template-columns: 1fr;
  }
  .product-card {
    display: flex;
  }
  .product-accent {
    display: flex;
  }
  .sn-cta-grid {
    grid-template-columns: 1fr;
  }
  .sn-cta-grid img {
    margin-top: 18px;
  }
}

/* From shared-pages.css */

:root {
  --bg: #05080f;
  --bg2: #071424;
  --ink: #071120;
  --text: #f5f7fb;
  --muted: #98a6ba;
  --blue: #2c8cff;
  --line: rgba(154, 198, 255, 0.18);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  background: #f7f9fc;
  color: var(--ink);
  overflow-x: visible;
}
.shell {
  width: min(1400px, calc(100% - 72px));
  margin: auto;
}
.nav-cta {
  padding: 10px 16px;
  border: 1px solid rgba(190, 217, 255, 0.22);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
}
.page-hero {
  min-height: 72vh;
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(35, 120, 236, 0.22),
      transparent 27%
    ),
    linear-gradient(120deg, #04070d, #071526);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 90px;
}
.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(103, 176, 255, 0.15);
  width: 520px;
  height: 520px;
  right: -100px;
  top: 90px;
  animation: orbit 17s linear infinite;
}
.page-hero::after {
  width: 330px;
  height: 330px;
  right: 50px;
  top: 185px;
  animation-direction: reverse;
  animation-duration: 12s;
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}
.spark-field {
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background-image: radial-gradient(
    circle,
    rgba(139, 200, 255, 0.8) 0 1px,
    transparent 1.4px
  );
  background-size: 92px 92px;
  mask-image: linear-gradient(90deg, transparent 25%, #000 55%, #000);
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 860px;
}
.eyebrow {
  color: #69adff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.page-hero h1 {
  font-size: clamp(48px, 6.2vw, 94px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 25px 0 24px;
  font-weight: 500;
}
.page-hero p {
  max-width: 700px;
  color: #a7b5c8;
  line-height: 1.8;
  font-size: 16px;
}
.page-main {
  padding: 110px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  padding: 32px;
  border: 1px solid rgba(34, 78, 130, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(19, 52, 91, 0.07);
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s;
}
.card::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(57, 145, 255, 0.12) 49%,
    transparent 59%
  );
  transform: translateX(-70%);
  transition: transform 0.8s;
}
.card:hover {
  transform: translateY(-10px) rotateX(2deg);
  box-shadow: 0 30px 70px rgba(19, 52, 91, 0.12);
}
.card:hover::before {
  transform: translateX(70%);
}
.icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(51, 137, 239, 0.2);
  display: grid;
  place-items: center;
  color: #247ee9;
  background: linear-gradient(145deg, #fff, #eaf4ff);
  box-shadow: 0 10px 28px rgba(45, 133, 234, 0.1);
  font-size: 20px;
  margin-bottom: 28px;
}
.card h3 {
  font-size: 23px;
  letter-spacing: -0.03em;
  margin: 0 0 13px;
}
.card p {
  color: #66758a;
  line-height: 1.7;
  font-size: 14px;
}
.section-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 12px 0;
}
.section-head p {
  color: #657488;
  line-height: 1.75;
}
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.9s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.cta {
  margin-top: 80px;
  padding: 46px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(45, 143, 255, 0.3),
      transparent 30%
    ),
    linear-gradient(120deg, #071426, #0b2e5d);
  position: relative;
  overflow: hidden;
}
.cta h2 {
  font-size: 42px;
  margin: 0 0 12px;
}
.cta p {
  color: #b1bfd0;
}
.btn {
  display: inline-flex;
  margin-top: 18px;
  padding: 13px 20px;
  border: 1px solid rgba(184, 216, 255, 0.35);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: rgba(60, 145, 244, 0.2);
  backdrop-filter: blur(12px);
}
footer {
  padding: 32px 0 50px;
  color: #718097;
  font-size: 12px;
}
@media (max-width: 900px) {
  .shell {
    width: min(100% - 38px, 1400px);
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .page-hero {
    min-height: 64vh;
  }
  .page-hero h1 {
    font-size: 50px;
  }
}

/* From standard-v27.css */
:root {
  --navy: #071d33;
  --ink: #10233d;
  --muted: #60718a;
  --blue: #329ef6;
  --teal: #03cea4;
  --pink: #da7795;
  --line: #dae4ed;
  --pale: #f2f7fb;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  font:
    400 15px/1.55 Manrope,
    Arial,
    sans-serif;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
.wrap {
  width: min(1380px, calc(100% - 80px));
  margin: auto;
}
.sr {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pill {
  padding: 11px 17px;
  border: 1px solid #ffffff80;
  border-radius: 99px;
}
.hero {
  position: relative;
  min-height: 760px;
  color: #fff;
  background: var(--navy);
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0 0 0 47%;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55);
}
.hero-photo:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy), #071d33a8 24%, #071d3312 70%);
}
.blocks i {
  position: absolute;
  z-index: 2;
  bottom: -5%;
  width: 10%;
  border: 1px solid #ffffff55;
  background: #d9efff1f;
  backdrop-filter: blur(7px);
}
.blocks i:nth-child(1) {
  right: 5%;
  height: 62%;
}
.blocks i:nth-child(2) {
  right: 18%;
  height: 46%;
}
.blocks i:nth-child(3) {
  right: 31%;
  height: 54%;
}
.blocks i:nth-child(4) {
  right: 44%;
  height: 33%;
}
.hero-in {
  position: relative;
  z-index: 3;
  min-height: 760px;
  display: flex;
  align-items: center;
}
.hero-copy {
  max-width: 760px;
  padding-top: 70px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(50px, 5vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.05em;
  font-weight: 500;
}
.hero-copy > p:last-of-type {
  max-width: 620px;
  color: #bbcad8;
  font-size: 17px;
  margin: 28px 0;
}
.button {
  display: inline-block;
  padding: 14px 21px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.sectors {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.sectors .wrap {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
}
.sectors .eyebrow {
  margin: 0;
}
.sectors .wrap > div {
  display: flex;
  gap: 24px;
  overflow: auto;
  white-space: nowrap;
  color: #4f6078;
  font-size: 12px;
}
.sectors span:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
}
.section {
  padding: 100px 0;
}
.intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 52px;
}
.intro h2,
.identity h2,
.cta h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.intro > p,
.identity .split > div > p {
  color: var(--muted);
}
.cards {
  display: grid;
}
.four {
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.cards article {
  min-height: 250px;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  transition: 0.25s;
}
.cards article:hover {
  background: var(--pale);
  transform: translateY(-4px);
}
.cards article:last-child {
  border: 0;
}
.cards b {
  font-size: 32px;
  color: var(--blue);
  font-weight: 400;
}
.cards h3 {
  margin: 27px 0 8px;
  font-size: 21px;
}
.cards p {
  color: var(--muted);
  font-size: 13px;
}
.approach {
  background: linear-gradient(#f8fbfd, #edf5fa);
}
.approach-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.layers {
  position: sticky;
  top: 125px;
  height: 440px;
  perspective: 800px;
}
.layers i {
  position: absolute;
  inset: 100px auto auto 50%;
  width: 280px;
  height: 170px;
  display: grid;
  place-items: center;
  border: 1px solid #329ef655;
  background: #329ef626;
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  transform: translateX(-50%) rotateX(62deg) rotateZ(-28deg);
  box-shadow: 0 30px 55px #173b5d1f;
}
.layers i:nth-child(2) {
  top: 185px;
  background: #03cea42b;
}
.layers i:nth-child(3) {
  top: 270px;
  background: #da77952b;
}
.service-list article {
  padding-bottom: 42px;
  margin-bottom: 42px;
  border-bottom: 1px solid #cbd8e3;
}
.service-list b,
.cases b {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.service-list article:nth-child(2) b {
  color: var(--teal);
}
.service-list article:nth-child(3) b {
  color: var(--pink);
}
.service-list h3 {
  font-size: 28px;
  line-height: 1.2;
  margin: 12px 0;
}
.service-list p,
.service-list li {
  color: var(--muted);
  font-size: 14px;
}
.service-list a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tech-grid article {
  padding: 27px;
  border: 1px solid var(--line);
}
.tech-grid h3 {
  margin: 0 0 23px;
  color: #52647a;
  font-size: 14px;
}
.tech-grid article div {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.tech-grid img {
  width: 82px;
  height: 42px;
  object-fit: contain;
  filter: saturate(0.7);
}
.identity {
  background: var(--pale);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: center;
}
.photo img {
  width: 100%;
  aspect-ratio: 1.15;
  object-fit: cover;
  filter: saturate(0.35);
}
.principles {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.principles article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.principles b {
  color: var(--blue);
}
.principles h3 {
  margin: 0 0 4px;
  font-size: 17px;
}
.principles p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cases article {
  border: 1px solid var(--line);
  transition: 0.3s;
}
.cases article:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px #122f4a18;
}
.cases img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  filter: saturate(0.35);
}
.cases article div {
  padding: 27px;
}
.cases h3 {
  font-size: 22px;
  line-height: 1.25;
}
.cases p,
.cases small {
  color: var(--muted);
  font-size: 13px;
}
.cta {
  padding: 90px 0;
  background: var(--navy);
  color: #fff;
}
.cta p {
  color: #b6c6d5;
}
.cta img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  filter: grayscale(1);
}
.choices {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 25px 0;
}
.choices span {
  padding: 9px 12px;
  border: 1px solid #ffffff33;
  font-size: 11px;
}
footer {
  padding: 65px 0 22px;
  background: #051728;
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 75px;
}
.footer-grid p,
footer a {
  color: #9eb0c1;
  font-size: 12px;
}
.footer-grid h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.footer-grid a {
  display: block;
  margin: 10px 0;
  text-decoration: none;
}
.base {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
  padding-top: 20px;
  border-top: 1px solid #ffffff20;
  color: #8195a9;
  font-size: 10px;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: 0.7s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 980px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .hero-photo {
    left: 36%;
    opacity: 0.75;
  }
  .four {
    grid-template-columns: 1fr 1fr;
  }
  .cards article:nth-child(2) {
    border-right: 0;
  }
  .approach-grid {
    gap: 40px;
  }
  .cases img {
    height: 160px;
  }
}
@media (max-width: 720px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .hero,
  .hero-in {
    min-height: 700px;
  }
  .hero-photo {
    left: 0;
    opacity: 0.38;
  }
  .hero-photo:after {
    background: linear-gradient(#071d3355, var(--navy) 88%);
  }
  .hero-copy {
    padding-top: 110px;
  }
  .hero h1 {
    font-size: 45px;
  }
  .sectors .wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .section {
    padding: 70px 0;
  }
  .intro,
  .split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .intro {
    margin-bottom: 34px;
  }
  .intro h2,
  .identity h2,
  .cta h2 {
    font-size: 38px;
  }
  .four {
    grid-template-columns: 1fr;
  }
  .cards article {
    min-height: 215px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .approach-grid {
    grid-template-columns: 1fr;
  }
  .layers {
    position: relative;
    top: auto;
    height: 360px;
  }
  .layers i {
    width: 220px;
    height: 140px;
    top: 50px;
  }
  .layers i:nth-child(2) {
    top: 125px;
  }
  .layers i:nth-child(3) {
    top: 200px;
  }
  .tech-grid,
  .cases,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cases img {
    height: 220px;
  }
  .photo {
    order: 2;
  }
  .cta .split {
    gap: 45px;
  }
  .base {
    display: block;
  }
  .base span {
    display: block;
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* v25 homepage refinements */
.hero,
.hero-in {
  min-height: 500px;
  height: 500px;
}
.hero-photo {
  inset: 0 0 0 50%;
}
.hero-photo > img {
  filter: saturate(0.82);
  object-position: center 43%;
}
.hero-photo:after {
  background: linear-gradient(90deg, var(--navy), #071d33a6 26%, #071d3300 58%);
}
.hero-copy {
  max-width: 650px;
  padding-top: 82px;
}
.hero h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
}
.hero-copy > p:last-of-type {
  max-width: 560px;
  margin: 18px 0 22px;
  font-size: 15px;
}
.hero .button {
  padding: 12px 18px;
  font-size: 13px;
}
.sectors .wrap > div {
  gap: 28px;
}
.sectors span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sectors span:before {
  display: none;
}
.sectors span b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #329ef644;
  border-radius: 8px;
  background: #329ef60d;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}
.metrics {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: start;
  border-top: 1px solid #bdcedc;
}
.metrics article {
  min-height: 205px;
  padding: 28px 22px;
  border-right: 1px solid #bdcedc;
  border-bottom: 1px solid #bdcedc;
}
.metrics article:nth-child(2n) {
  border-right: 0;
}
.metrics strong {
  display: block;
  color: var(--teal);
  font-size: 54px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.06em;
}
.metrics article:nth-child(2) strong {
  color: var(--blue);
}
.metrics article:nth-child(3) strong {
  color: #e6a827;
}
.metrics article:nth-child(4) strong {
  color: var(--pink);
}
.metrics span {
  display: block;
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.metrics p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.tech-grid img {
  width: 123px;
  height: 63px;
  background: transparent;
  mix-blend-mode: multiply;
}
.clients {
  overflow: hidden;
  background: #fff;
}
.clients .intro {
  margin-bottom: 36px;
}
.logo-marquee {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 8px 0;
}
.logo-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: logoDrift 26s ease-in-out infinite alternate;
}
.logo-track.row-two {
  transform: translateX(-9%);
  animation-name: logoDriftReverse;
  animation-duration: 30s;
}
.logo-track span {
  width: 190px;
  height: 92px;
  display: grid;
  place-items: center;
  padding: 16px 22px;
  border: 1px solid var(--line);
  background: #fff;
}
.logo-track img {
  max-width: 145px;
  max-height: 58px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(0.65);
}
@keyframes logoDrift {
  to {
    transform: translateX(-18%);
  }
}
@keyframes logoDriftReverse {
  to {
    transform: translateX(7%);
  }
}
.who-carousel {
  position: relative;
  aspect-ratio: 1.15;
  overflow: hidden;
  background: #dce9f2;
}
.who-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
  transition: opacity 1s ease;
  filter: saturate(0.65);
  object-position: center;
}
.who-carousel img.active {
  opacity: 1;
}
@media (max-width: 980px) {
  .hero-photo {
    left: 43%;
  }
  .metrics {
    grid-template-columns: 1fr;
    position: relative;
    top: auto;
  }
  .metrics article,
  .metrics article:nth-child(2n) {
    min-height: 160px;
    border-right: 0;
  }
  .tech-grid img {
    width: 108px;
    height: 56px;
  }
}
@media (max-width: 720px) {
  .hero,
  .hero-in {
    min-height: 620px;
    height: 620px;
  }
  .hero-photo {
    left: 0;
    opacity: 0.44;
  }
  .hero-photo:after {
    background: linear-gradient(180deg, #071d3333 0%, var(--navy) 88%);
  }
  .hero-copy {
    padding-top: 118px;
    align-self: flex-end;
    padding-bottom: 46px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero-copy > p:last-of-type {
    font-size: 15px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .metrics article,
  .metrics article:nth-child(2n) {
    min-height: 178px;
    border-right: 1px solid #bdcedc;
  }
  .metrics article:nth-child(2n) {
    border-right: 0;
  }
  .metrics strong {
    font-size: 43px;
  }
  .metrics span {
    font-size: 15px;
  }
  .tech-grid img {
    width: 105px;
    height: 54px;
  }
  .logo-track span {
    width: 155px;
    height: 78px;
    padding: 13px 17px;
  }
  .logo-track img {
    max-width: 122px;
    max-height: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track,
  .logo-track.row-two {
    animation: none;
  }
  .who-carousel img {
    transition: none;
  }
}
/* v26 refinements */
.hero,
.hero-in {
  min-height: 750px;
  height: 750px;
}
.sectors {
  overflow: hidden;
}
.sectors .wrap {
  grid-template-columns: 250px minmax(0, 1fr);
}
.sector-viewport {
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.sector-track {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: sectorRotate 32s linear infinite;
  will-change: transform;
}
@keyframes sectorRotate {
  to {
    transform: translateX(calc(-50% - 14px));
  }
}
.tech-grid img {
  mix-blend-mode: normal;
}
.cases {
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.cases img {
  height: 240px;
}
@media (max-width: 980px) {
  .hero,
  .hero-in {
    min-height: 750px;
    height: 750px;
  }
  .sectors .wrap {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .cases {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .hero,
  .hero-in {
    min-height: 700px;
    height: 700px;
  }
  .cases {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sector-track {
    animation: none;
  }
}
/* v27 refinements */
.sectors .wrap > .sector-viewport {
  overflow: hidden;
  scrollbar-width: none;
}
.sectors .wrap > .sector-viewport::-webkit-scrollbar {
  display: none;
}
.logo-marquee {
  width: 100%;
  min-width: 0;
}
.cases {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.cases article,
.cases .case-card {
  min-width: 0;
  background: #fff;
}
.cases .case-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: 0.3s;
}
.cases .case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px #122f4a18;
}
.cases .case-card > div:not(.case-visual) {
  padding: 27px;
}
.case-visual {
  position: relative;
  height: 164px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  background: linear-gradient(145deg, #edf7ff, #f7fbfe);
}
.case-visual:before,
.case-visual:after {
  content: '';
  position: absolute;
  border: 1px solid #ffffffa8;
  box-shadow: 0 18px 42px #173b5d24;
  backdrop-filter: blur(8px);
  transform: rotate(-12deg);
}
.case-visual:before {
  width: 54%;
  height: 72%;
  left: 14%;
  top: 24%;
  background: linear-gradient(135deg, #329ef6b8, #329ef61c);
}
.case-visual:after {
  width: 42%;
  height: 55%;
  right: 9%;
  top: 8%;
  background: linear-gradient(135deg, #03cea4a8, #03cea418);
  transform: rotate(14deg);
}
.case-visual-two {
  background: linear-gradient(145deg, #f8f2f6, #f2f8fc);
}
.case-visual-two:before {
  left: 7%;
  top: 10%;
  width: 47%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(145deg, #da7795c2, #da779520);
  transform: none;
}
.case-visual-two:after {
  right: 7%;
  top: 25%;
  width: 49%;
  height: 52%;
  background: linear-gradient(135deg, #329ef6a6, #329ef61c);
  transform: rotate(-18deg);
}
.case-visual-three {
  background: linear-gradient(145deg, #f4faf8, #eff7fc);
}
.case-visual-three:before {
  left: 8%;
  top: 18%;
  width: 72%;
  height: 36%;
  background: linear-gradient(90deg, #03cea4b8, #329ef680);
  transform: rotate(8deg);
}
.case-visual-three:after {
  right: 9%;
  top: 45%;
  width: 63%;
  height: 35%;
  background: linear-gradient(90deg, #ffc857b8, #da779580);
  transform: rotate(-8deg);
}
.case-visual-four {
  background: linear-gradient(145deg, #f4f5fc, #f6fafd);
}
.case-visual-four:before {
  left: 12%;
  top: 18%;
  width: 31%;
  height: 72%;
  background: linear-gradient(180deg, #329ef6ae, #071d3333);
  transform: skewY(-12deg);
}
.case-visual-four:after {
  right: 12%;
  top: 9%;
  width: 37%;
  height: 78%;
  background: linear-gradient(180deg, #da7795a8, #ffc85769);
  transform: skewY(12deg);
}
.case-visual-five {
  background: linear-gradient(145deg, #fbf7ed, #f2f8fc);
}
.case-visual-five:before {
  left: 7%;
  top: 20%;
  width: 70%;
  height: 35%;
  background: linear-gradient(90deg, #ffc857bf, #da77957a);
  transform: rotate(-7deg);
}
.case-visual-five:after {
  right: 8%;
  top: 43%;
  width: 62%;
  height: 35%;
  background: linear-gradient(90deg, #329ef697, #03cea47a);
  transform: rotate(8deg);
}
.cta img {
  object-position: center 40%;
}
@media (max-width: 1300px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .case-visual {
    height: 190px;
  }
}
@media (max-width: 720px) {
  .case-visual {
    height: 210px;
  }
}
/* v30 case-study icon system */
.case-visual {
  display: grid;
  place-items: center;
}
.case-visual svg {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 15px;
  border: 1px solid #ffffffb8;
  border-radius: 20px;
  background: #ffffff94;
  box-shadow: 0 18px 42px #173b5d20;
  fill: none;
  stroke: #173b5d;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  backdrop-filter: blur(8px);
}
.case-visual-two svg {
  stroke: #9b5574;
}
.case-visual-three svg {
  stroke: #087c70;
}
.case-visual-four svg {
  stroke: #315c91;
}
.case-visual-five svg {
  stroke: #9b6d13;
}

/* From navigation-v19.css */
/* v39: one navigation and footer implementation, present in every HTML page. */
.site-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 14px;
  right: 14px;
  width: auto;
  height: auto;
  min-height: 68px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #beddff38;
  border-radius: 18px;
  background: linear-gradient(180deg, #0d2748f5, #081b34f2);
  box-shadow: 0 18px 50px #020c1a2e;
  backdrop-filter: blur(26px);
  color: #fff;
}
.v19-brand {
  display: flex;
  align-items: center;
  flex: none;
}
.v19-brand img {
  display: block;
  width: 164px;
  height: auto;
}
.v19-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}
.v19-nav-item {
  position: relative;
}
.v19-trigger,
.v19-cta,
.v19-direct,
.v19-menu-toggle {
  font:
    600 13px/1.4 Manrope,
    system-ui,
    sans-serif;
  color: #e1ecf8;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.v19-trigger {
  padding: 14px 11px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.v19-trigger:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.v19-nav-item.open > .v19-trigger:after {
  transform: rotate(225deg);
}
.v19-direct {
  padding: 14px 11px;
}
.v19-cta {
  display: block;
  padding: 13px 17px;
  border: 1px solid #beddff50;
  border-radius: 12px;
  background: #ffffff14;
}
.v19-mega {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 390px;
  max-width: calc(100vw - 60px);
  padding: 18px;
  border: 1px solid #b1d7ff38;
  border-radius: 18px;
  background: #081b31;
  box-shadow: 0 28px 70px #0005;
  max-height: calc(100dvh - 120px);
  overflow: auto;
}
.js-nav .v19-mega {
  display: none;
}
.js-nav .v19-nav-item.open > .v19-mega {
  display: block;
}
.v19-mega-link {
  display: block;
  padding: 11px 12px;
  color: #c2d2e5;
  font:
    500 14px/1.5 Manrope,
    system-ui,
    sans-serif;
  text-decoration: none;
  border-radius: 8px;
}
.v19-mega-link:hover,
.v19-mega-link:focus-visible {
  color: #fff;
  background: #ffffff12;
}
.v19-menu-toggle {
  display: none;
  padding: 12px 13px;
  border: 1px solid #beddff50;
  border-radius: 11px;
  background: #ffffff0d;
  cursor: pointer;
}
.v19-footer {
  position: relative;
  padding: 60px 0 28px;
  background: #06101d;
  color: #b0bfd1;
}
.v19-footer-shell {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}
.v19-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 34px;
}
.v19-footer-brand img {
  width: 165px;
  height: auto;
}
.v19-footer-brand p {
  font-size: 13px;
  line-height: 1.75;
  max-width: 400px;
}
.v19-footer-main > div:not(.v19-footer-brand) {
  display: flex;
  flex-direction: column;
}
.v19-footer-main b {
  margin-bottom: 14px;
  color: #e0e9f4;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v19-footer-main a {
  display: block;
  padding: 5px 0;
  color: #b0bfd1;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}
.v19-footer-main a:hover {
  color: #fff;
  text-decoration: underline;
}
.v19-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid #ffffff24;
  color: #a0b1c5;
  font-size: 11px;
}
/* Without JS, all navigation destinations remain available in normal flow. */
.site-header:not(.js-nav) {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  flex-wrap: wrap;
  border-radius: 0;
}
.site-header:not(.js-nav) .v19-nav {
  flex-wrap: wrap;
  align-items: flex-start;
}
.site-header:not(.js-nav) .v19-mega {
  position: static;
  max-width: 100%;
  width: auto;
  max-height: none;
  box-shadow: none;
}
@media (max-width: 1180px) {
  .js-nav .v19-menu-toggle {
    display: block;
  }
  .js-nav .v19-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 116px);
    overflow: auto;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid #b1d7ff38;
    border-radius: 18px;
    background: #07182c;
  }
  .js-nav .v19-nav.mobile-open {
    display: flex;
  }
  .v19-nav-item {
    width: 100%;
  }
  .v19-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
  }
  .v19-mega {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0 4px 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .v19-direct,
  .v19-cta {
    padding: 14px 11px;
    font-size: 14px;
  }
  .site-header:not(.js-nav) .v19-nav {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 900px) {
  .v19-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .site-header {
    padding: 9px 11px;
    gap: 8px;
  }
  .v19-brand img {
    width: 140px;
  }
  .v19-footer-shell {
    width: calc(100% - 32px);
  }
  .v19-footer-main {
    grid-template-columns: 1fr;
  }
  .v19-footer-base {
    flex-direction: column;
  }
}

/* Source extracted CSS */

/* From site-v40.css */
/* Common tokens and page-family layout corrections. Loaded last. */
:root {
  --font:
    Manrope, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --accent-gold: #ffc857;
  --accent-pink: #da7795;
  --accent-green: #03cea4;
  --accent-blue: #329ef6;
  --content-width: 1180px;
  --radius-card: 20px;
  --radius-control: 12px;
  --readable-accent: #17649e;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  font-family: var(--font);
  overflow-wrap: break-word;
}
button,
input,
textarea,
select {
  font: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
a,
button,
input,
textarea,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.6;
}
h1,
h2,
h3,
p,
li {
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  text-wrap: pretty;
}
section[id],
main[id] {
  scroll-margin-top: 110px;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid #329ef6;
  outline-offset: 4px;
}
.site-header :focus-visible,
.v19-footer :focus-visible {
  outline-color: #ffc857;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 24px;
  z-index: 1000;
  padding: 12px 18px;
  background: #fff;
  color: #071526;
  transform: translateY(-160%);
  border: 3px solid #329ef6;
  border-radius: 8px;
}
.skip-link:focus {
  transform: none;
}
.shell,
.company-shell,
.cs-shell,
.wrap,
.v31-offer .shell {
  width: min(var(--content-width), calc(100% - 48px));
  margin-inline: auto;
}
:is(
    .v31-hero-grid,
    .v31-stats,
    .v31-grid,
    .v31-split,
    .v31-fit-grid,
    .v31-related-grid,
    .v32-change-flow,
    .v32-final-grid,
    .company-hero-grid,
    .company-split,
    .contact-grid,
    .industry-grid,
    .cs-hero-grid,
    .cs-split,
    .cs-two,
    .cs-evidence,
    .cs-outcome-grid,
    .cs-steps,
    .cs-related-grid,
    .offer-grid,
    .metric-row,
    .grid,
    .four,
    .split,
    .intro,
    .approach-grid,
    .partner-grid,
    .impact-grid,
    .sn-hero-in,
    .sn-cta-grid,
    .product-stack,
    .v19-footer-main
  )
  > * {
  min-width: 0;
  max-width: 100%;
}
/* Natural hero sizing: text, actions and summary cards stay in document flow. */
.hero,
.hero-in,
.sn-hero,
.sn-hero-in {
  height: auto;
  min-height: 750px;
}
.hero-in {
  padding-block: 145px 76px;
}
.hero-copy {
  padding-top: 0;
  padding-bottom: 0;
}
.company-hero,
.offer-hero,
.page-hero,
.cs-hero {
  height: auto;
  min-height: 0;
  padding-block: 150px 80px;
}
.v31-hero {
  height: auto;
  min-height: 0;
  padding-block: 145px 50px;
  overflow: visible;
}
.v31-hero-grid {
  min-height: 0;
  padding-block: 38px 46px;
  gap: 48px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}
.company-hero-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 48px;
}
.hero h1,
.sn-hero h1,
.company-hero h1,
.v31-hero h1,
.offer-hero h1,
.page-hero h1,
.cs-hero h1 {
  font-family: var(--font);
  font-size: clamp(2.25rem, 4.8vw, 4.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
  max-width: 850px;
}
.v31-hero > .shell > .v31-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: none;
  gap: 14px;
}
.v31-hero > .shell > .v31-stats > div {
  min-height: 0;
  padding: 24px 20px;
}
.v31-hero > .shell > .v31-stats strong {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.v31-stats span {
  line-height: 1.6;
}
.v31-problem {
  padding-top: 90px;
}
.v31-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
}
.v31-fit-grid,
.v32-final-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 48px;
}
.v31-related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v31-related {
  gap: 20px;
}
.v31-related > div {
  min-width: 0;
}
.v31-related > span {
  flex: none;
}
.v31-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v31-process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v32-change-flow {
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
}
.v31-evidence .v31-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v33-evidence-head .v31-section-head {
  min-width: 0;
}
.v31-section,
.company-section,
.offer-section,
.cs-section {
  padding-block: 90px;
}
.v31-section-head h2,
.company-heading h2,
.contact-copy h2,
.offer-section h2,
.section-head h2,
.cs-head h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.v31-grid article,
.offer-card,
.industry-card,
.principle-grid article,
.card {
  border-radius: var(--radius-card);
}
.offer-actions a,
.v31-actions a,
.v31-final a,
.btn,
.button,
.contact-form button,
.company-final a {
  border-radius: var(--radius-control);
  font-family: var(--font);
  line-height: 1.5;
  white-space: normal;
}
.contact-form input,
.contact-form textarea {
  min-width: 0;
  font-size: 1rem;
}
.contact-form small {
  color: #526276;
  line-height: 1.6;
}
.contact-form .email-alternative {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.email-alternative a {
  color: #17649e;
  text-decoration: underline;
}
/* Common category/service layout, retaining each page's original content. */
.offer-main {
  padding-block: 30px;
}
.offer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.offer-section {
  margin: 0;
}
.offer-hero h1 {
  max-width: 850px;
}
.offer-card {
  padding: 30px;
}
.offer-card h3 {
  font-size: 22px;
}
.offer-card p,
.offer-section > p {
  font-size: 16px;
  line-height: 1.75;
}
.offer-card a {
  font-size: 14px;
  color: #17649e;
}
.offer-card .number {
  color: #17649e;
}
.offer-band {
  border-radius: 20px;
}
.services-page .page-hero .hero-copy {
  max-width: none;
}
.services-page .page-hero h1 {
  max-width: 850px;
}
.services-page .page-main {
  padding-block: 90px;
}
.services-page .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.services-page .card p {
  font-size: 16px;
}
.category-page .offer-cta .cta,
.services-page .cta {
  border-radius: 20px;
  padding: 40px;
}
.category-page .offer-cta h2,
.services-page .cta h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}
/* Palette colours remain on decoration; darker variants improve light-surface text. */
.v31-pink,
.v31-purple {
  --v31-accent: #da7795;
  --v31-soft: #fcebf1;
}
.v31-gold {
  --v31-accent: #ffc857;
}
.v33-solution-knowledge,
.v33-solution-cmdb {
  --v33-icon-accent: #da7795;
}
.v33-solution-agents,
.v33-solution-resilience {
  --v33-icon-accent: #03cea4;
}
.v31-section:not(.v31-process):not(.v31-evidence) .v31-eyebrow,
.v31-section:not(.v31-process):not(.v31-evidence) .v31-index,
.v31-related span,
.company-section .company-eyebrow,
.industry-card > span,
.company-section .contact-points span {
  color: #17649e !important;
}
.company-dark .company-eyebrow,
.company-dark .company-heading > p:last-child {
  color: #b9d5ed !important;
}
.product-purple {
  --product-accent: #da7795;
}
.industry-card li {
  line-height: 1.5;
}
.v19-footer a {
  overflow-wrap: anywhere;
}
.reveal {
  opacity: 1;
  transform: none;
}
.company-hero-image {
  transform: none;
}
.company-hero-image:before {
  inset: 10px;
  transform: none;
}
.cs-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.cs-outcome-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cs-evidence {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.cs-crumb,
.company-crumb,
.v31-breadcrumb {
  flex-wrap: wrap;
}
.cs-tags {
  flex-wrap: wrap;
}
.sn-hero-in {
  padding-block: 145px 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 48px;
  align-items: center;
}
.sn-hero-copy {
  width: 100%;
  padding: 0;
}
.sn-logo-panel {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 370px;
  height: 300px;
  justify-self: center;
}
.sn-impact {
  margin-top: 0;
  padding-block: 30px;
}
.impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.impact-grid article {
  min-height: 0;
}
.policy-page .company-hero {
  padding-block: 145px 65px;
}
.policy-copy {
  max-width: 900px;
}
.policy-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-top: 38px;
}
.policy-copy p {
  font-size: 17px;
  line-height: 1.8;
  color: #405269;
}
.policy-copy a {
  color: #17649e;
  text-decoration: underline;
}
.review-banner {
  padding: 18px 22px;
  border: 1px solid #dab761;
  border-left: 5px solid #ffc857;
  border-radius: 12px;
  background: #fff5d9;
  color: #463811 !important;
}
@media (max-width: 1180px) {
  .v31-hero-grid,
  .company-hero-grid {
    grid-template-columns: 1fr;
  }
  .v31-hero-visual {
    display: none;
  }
  .v31-hero > .shell > .v31-stats,
  .v31-evidence .v31-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v32-change-flow {
    grid-template-columns: 1fr;
  }
  .v32-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
    margin: 8px;
  }
  .v32-change-flow article {
    min-height: 0;
  }
  .v31-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cs-hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1000px) {
  .v31-split,
  .v31-fit-grid,
  .v32-final-grid,
  .company-split,
  .contact-grid,
  .cs-split,
  .sn-cta-grid,
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sn-hero-in {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sn-logo-panel {
    height: 160px;
    max-width: 300px;
  }
  .industry-hero-mark,
  .contact-hero-card {
    display: block;
    max-width: 640px;
  }
  .company-hero-image {
    display: block;
    width: min(420px, 100%);
  }
  .services-page .grid {
    grid-template-columns: 1fr;
  }
  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .shell,
  .company-shell,
  .cs-shell,
  .wrap,
  .v31-offer .shell {
    width: calc(100% - 32px);
  }
  .hero,
  .hero-in,
  .sn-hero,
  .sn-hero-in {
    min-height: 0;
    height: auto;
  }
  .hero-in,
  .sn-hero-in {
    padding-block: 120px 56px;
  }
  .hero-copy {
    padding: 0;
    align-self: auto;
  }
  .company-hero,
  .offer-hero,
  .page-hero,
  .cs-hero {
    padding-block: 120px 56px;
  }
  .v31-hero {
    padding-block: 120px 36px;
  }
  .v31-hero-grid {
    padding-block: 26px 36px;
    min-height: 0;
  }
  .company-hero-grid {
    margin-top: 24px;
  }
  .hero h1,
  .sn-hero h1,
  .company-hero h1,
  .v31-hero h1,
  .offer-hero h1,
  .page-hero h1,
  .cs-hero h1 {
    font-size: clamp(2rem, 8vw, 2.625rem);
    line-height: 1.12;
  }
  .v31-hero > .shell > .v31-stats,
  .v31-evidence .v31-stats,
  .v31-grid,
  .v31-process-grid,
  .v31-related-grid,
  .offer-grid,
  .metric-row,
  .impact-grid,
  .metrics,
  .field-row,
  .principle-grid,
  .cs-two,
  .cs-related-grid {
    grid-template-columns: 1fr;
  }
  .v31-hero > .shell > .v31-stats > div {
    min-height: 0;
    padding: 22px;
  }
  .v31-problem {
    padding-top: 64px;
  }
  .v31-section,
  .company-section,
  .offer-section,
  .cs-section {
    padding-block: 64px;
  }
  .v31-grid article,
  .v31-fit aside,
  .contact-form {
    padding: 24px;
  }
  .v31-section-head h2,
  .company-heading h2,
  .contact-copy h2,
  .offer-section h2,
  .section-head h2,
  .cs-head h2 {
    font-size: clamp(1.875rem, 7vw, 2.375rem);
  }
  .v31-actions,
  .offer-actions,
  .sn-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .sn-logo-panel {
    position: relative;
    inset: auto;
    max-width: 240px;
    height: 130px;
    opacity: 1;
  }
  .sn-logo-panel > div {
    padding: 22px;
  }
  .sn-impact {
    margin: 0;
    padding-top: 24px;
  }
  .sn-hero-copy {
    padding: 0;
  }
  .v31-related {
    padding: 24px;
  }
  .v33-evidence-head > .v33-solution-icon {
    display: none;
  }
  .product-stack {
    grid-template-columns: 1fr;
  }
  .category-page .offer-cta .cta,
  .services-page .cta {
    padding: 26px;
  }
  .contact-band > .company-shell {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .v33-icon-light {
    stroke-dasharray: none;
    opacity: 0.6;
  }
  .who-carousel img {
    transition: none;
  }
}
/* Shared contact section and requested visual refinements. */
.site-cta {
  padding: 90px 0;
  background: #071d33;
  color: #fff;
}
.site-cta-inner {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.site-cta h2 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.site-cta p {
  color: #b6c6d5;
  font-size: 17px;
  line-height: 1.75;
}
.site-cta .site-cta-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 18px;
  color: #80bff1;
}
.site-cta img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: 20px;
}
.site-cta-button {
  display: inline-block;
  margin-top: 12px;
  background: #329ef6;
  color: #071d33;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
}
.site-cta-button:hover {
  background: #79bffd;
}
.identity .split {
  gap: 54px;
  align-items: center;
}
.identity h2 {
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  line-height: 1.15;
}
.identity .who-carousel {
  aspect-ratio: 0.88;
  border-radius: 20px;
}
.identity .who-carousel img {
  filter: grayscale(1);
}
.case-visual {
  height: 162px !important;
  background: linear-gradient(
    155deg,
    #071d33 5%,
    color-mix(in srgb, var(--case-accent, #329ef6) 72%, #071d33)
  ) !important;
}
.case-visual-one {
  --case-accent: #329ef6;
}
.case-visual-two {
  --case-accent: #da7795;
}
.case-visual-three {
  --case-accent: #03cea4;
}
.case-visual-four {
  --case-accent: #329ef6;
}
.case-visual-five {
  --case-accent: #ffc857;
}
.case-visual:before {
  width: 80px;
  height: 94px;
  top: 22px;
  left: calc(50% - 58px);
  border-radius: 0;
  transform: rotate(-10deg);
  background: #ffffff12;
  border: 1px solid #ffffff4d;
  box-shadow: 0 14px 40px #0004;
}
.case-visual:after {
  width: 72px;
  height: 82px;
  top: 49px;
  left: calc(50% - 12px);
  right: auto;
  border-radius: 0;
  transform: rotate(9deg);
  background: #ffffff12;
  border: 1px solid #ffffff4d;
  box-shadow: 0 14px 40px #0004;
}
.case-visual svg {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  stroke: #fff;
}
.cases .case-card {
  border-radius: 20px;
  overflow: hidden;
}
.cases small {
  font-weight: 700;
}
.cs-hero-mark > span {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  max-width: 90%;
  line-height: 1.2;
}
.about-intro-copy {
  max-width: 920px;
  font-size: 19px;
  line-height: 1.8;
  color: #405269;
}
.about-expertise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.about-expertise h3 {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.about-expertise p {
  font-size: 16px;
  line-height: 1.8;
  color: #405269;
}
.who-carousel {
  position: relative;
  overflow: hidden;
  background: #dce9f2;
}
.who-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.who-carousel img.active {
  opacity: 1;
}
.about-carousel {
  width: min(100%, 960px);
  margin: 40px auto 0;
  aspect-ratio: 1.5;
  border-radius: 20px;
}
.carousel-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.carousel-controls button {
  border: 1px solid #9aaebe;
  border-radius: 8px;
  background: #fff;
  color: #173b5d;
  padding: 9px 14px;
  font-size: 14px;
}
.carousel-controls span {
  color: #405269;
  font-size: 14px;
}
.identity .photo {
  overflow: visible;
  background: transparent;
}
.identity .photo .carousel-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.identity .carousel-controls {
  position: absolute;
  top: 100%;
  width: 100%;
}
.contact-form > input,
.contact-form > textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #b9c8d6;
  border-radius: 10px;
  background: #fff;
  color: #173b5d;
  margin: 7px 0 20px;
}
.contact-form > label {
  display: block;
  font-weight: 600;
  font-size: 14px;
}
.contact-form textarea {
  min-height: 190px;
  resize: vertical;
}
.contact-form .form-privacy {
  font-size: 13px;
  line-height: 1.6;
  color: #526276;
}
.form-privacy a {
  color: #17649e;
  text-decoration: underline;
}
.contact-form #form-status:empty {
  display: none;
}
.contact-form #form-status {
  font-size: 15px;
  line-height: 1.6;
}
.contact-form #form-status[data-state='error'] {
  color: #a32e36;
}
.contact-form #form-status[data-state='success'] {
  color: #176343;
}
.contact-form .email-alternative {
  margin-top: 24px;
  font-size: 14px;
}
@media (max-width: 1000px) {
  .site-cta-inner {
    gap: 36px;
  }
  .about-expertise {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .identity .split {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 720px) {
  .site-cta {
    padding: 64px 0;
  }
  .site-cta-inner {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
  }
  .identity .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .identity .who-carousel {
    aspect-ratio: 1.15;
    margin-bottom: 60px;
  }
  .about-carousel {
    aspect-ratio: 1.1;
  }
  .site-cta p {
    font-size: 16px;
  }
  .site-cta img {
    margin-top: 4px;
  }
}
.identity .who-carousel img {
  border-radius: 20px;
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
section,
.section {
  max-width: none !important;
}

.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens.
   EC-NAV-483: and the width where small screens end is the source's to choose — see
   source-nav-breakpoint.js. 768px is the default, raised when the source's own CSS hides
   the primary list above it. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses.
   EC-NAV-502: a panel carried from the source keeps its own list classes and layout. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul)
    > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
}

/* EC-NAV-493: display:block !important used to ride along on the rule above, to
   beat an inline-flex utility class on the panel. On a wp_nav_menu() menu it
   decided nothing - the hide/show pair on .menu-item-has-children outranks it
   either way. On a captured hand-authored nav there is no .menu-item-has-children
   for those rules to match, so the blanket declaration was the only one left
   standing, and it beat the site's own unprefixed .submenu { display: none }:
   every CSS-hover dropdown shipped permanently open (Unitive Mind). The display
   is therefore scoped to the shapes WordPress itself generates, where visibility
   is already governed and nothing moves.

   The scope is .menu-item rather than the panel's own class because the class
   name says nothing about who wrote it - a hand-authored nav is free to call
   its panel sub-menu too, and scoping only .submenu would leave that site with
   the same permanently-open dropdown. Both walkers stamp .menu-item on every
   item they emit, and a captured nav carries it nowhere.

   Descendant, not child: EC-NAV-428 wraps the panel in a positioning div when
   the source revealed it through one, which puts a generation between the item
   and the panel. A child combinator reads as correctly scoped and would
   silently stop reaching that shape.
   NOTE: no backticks in this comment - it lives inside a JS template literal. */
.menu-item .submenu,
.menu-item .sub-menu {
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
/* EC-NAV-429: the class guards above only see a utility class ON the element.
   A header the source lifts out of flow from an ancestor rule — Scorpion uses
   ".overlap #HeaderZone { position: absolute }" with no class on the header at
   all — passed every guard and was forced back into flow, dropping a
   deliberately transparent header onto the page background where its light link
   text became invisible. Such ids are detected from the source CSS. */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it.
 *
 * EC-NAV-442: suppressed when the site's own stylesheet holds the bar OUT of
 * flow — the margin is then the author's clearance, not a redundant gap. */
/* EC-NAV-442: leading-hero clearance kept — stylesheet holds the bar out of flow. */

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* EC-CSS-009: :where() = 0 specificity, same reasoning as EC-BTN-104 above. A
   bare "h1, h2, h3, h4, h5, h6" list ties a site's own "h1, h2, h3 { font-weight:
   400 }" on specificity (0,0,1) and, being emitted after the merged site CSS,
   wins — so a display face meant to render at 400 shipped bold everywhere. These
   declarations still beat the UA stylesheet, because author origin outranks
   user-agent origin regardless of specificity. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-NAV-478: the source positions this header with `.site-header { position: fixed }`.
   The base reset only skips headers that advertise positioning as a class token, and the
   EC-NAV-352 / EC-NAV-162b overrides cover <nav> and header/.site-header by name — not this
   element. Without this rule the bar drops into flow, the hero is pushed below it, and a
   transparent bar's light ink lands on the page background. */
header.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: fixed !important;
}

/* EC-NAV-162b: Site CSS sets position:fixed on header — override WPConvert base relative reset.
   Non-Tailwind sites define fixed positioning in their stylesheet, not as a utility class.
   EC-NAV-197: selector includes :not([class*='absolute']) so specificity (0,4,0) ties the
   EC-NAV-190 safety-net; source-order then makes this override win the !important cascade.
   EC-NAV-433: the selector mirrors the source rule's own qualification — <header> is also
   sectioning content, and a bare tag here force-fixes every content header on the page.
   EC-NAV-457: grouped by the position each source rule authored. */
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: fixed !important;
  z-index: 1000 !important;
}

/* EC-NAV-441: Site CSS pins the bar with a stylesheet rule, not a `fixed`/`top-0`
   class token, so the EC-NAV-089 / EC-NAV-323 selectors cannot match it and the
   admin bar covers the bar. Offset the author's own selector by the bar height.
   Logged out the variable is unset, so these rules never apply. */
body.admin-bar .site-header {
  top: calc(14px + var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* EC-NAV-433b: the EC-NAV-190 in-flow repair uses BARE tag selectors, and its
   :not([class*='…']) guards only see a utility class ON the element. A content
   header the SOURCE lifts out of flow from a stylesheet rule — Sabrina's
   ".set-product-head { position: absolute; top: 50% }" caption inside an
   overflow:hidden product frame — slipped past all three guards, was forced
   back into flow and clipped out of its frame. Restore the authored value for
   sectioning headers inside <main>, where the site header never lives. */
main.site-main
  header.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  nav.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='banner'].site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='navigation'].site-header:not([class*='sticky']):not(
    [class*='fixed']
  ):not([class*='absolute']) {
  position: fixed !important;
}

main.site-main
  header.v19-nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  nav.v19-nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='banner'].v19-nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='navigation'].v19-nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: absolute !important;
}