/* Site / v422: shared navy, teal, and ice surfaces across the remaining page families. */
html body:not([data-demo-family]) .site-page-v3 {
  --vk-ink:#173041;--vk-muted:#526a77;--vk-dark:#0a1e2c;--vk-teal:#176f8b;--vk-cyan:#a7e5eb;
}
html body:not([data-demo-family]) .site-page-v3 .site-footer,
html body:not([data-demo-family]) .site-page-v3 #site-footer {
  border-top-color:#79c4cf!important;
}
/* Hero framing used by Work, About, Pricing, Lab, and their detail pages. */
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero),
html body:not([data-demo-family]) #main-content .creativeoDetailHero {
  background:linear-gradient(125deg,#091c2a,#15384b 68%,#0b2030)!important;
  color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoGhostWord {
  opacity:.035!important;
}
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoHeroTitle,
html body:not([data-demo-family]) #main-content .creativeoDetailHero h1 {
  color:#f7fbfc!important;-webkit-text-fill-color:#f7fbfc!important;
  letter-spacing:-.055em!important;line-height:1.02!important;
}
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoHeroIntro,
html body:not([data-demo-family]) #main-content .creativeoDetailHero p {
  color:#c7dbe1!important;
}
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoEyebrow,
html body:not([data-demo-family]) #main-content .creativeoDetailHero .creativeoEyebrow {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoRoundedMedia {
  border:1px solid #a4d6de85!important;border-radius:20px!important;
  box-shadow:0 25px 65px #00121e70!important;overflow:hidden;
}
/* Shared editorial headings: cyan on navy, deeper teal on light surfaces. */
html body:not([data-demo-family]) #main-content :is(.creativeoPortfolioSection,.creativeoBodyCta,.strategyDemoLab) .creativeoSectionHeading h2 em,
html body:not([data-demo-family]) #main-content :is(.creativeoPortfolioSection,.creativeoBodyCta,.strategyDemoLab) h2 em {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoSplitSection,.creativeoCardSection,.creativeoProcessSection,.creativeoPricingPlans,.creativeoFaqSection,.creativeoComparisonSection) h2 em {
  color:#176f8b!important;-webkit-text-fill-color:#176f8b!important;
}
/* Work index and selected work on Home. */
html body:not([data-demo-family]) #main-content .creativeoPortfolioSection {
  background:#0a1e2c!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content .creativeoPortfolioSection .creativeoSectionHeading h2 {color:#f7fbfc!important}
html body:not([data-demo-family]) #main-content .creativeoPortfolioSection .creativeoSectionHeading > p:last-child {color:#bfd4db!important}
html body:not([data-demo-family]) #main-content .creativeoPortfolioSection .creativeoEyebrow {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard {
  min-width:0;border:1px solid #7cb6c340!important;border-radius:18px!important;
  background:#102c3b!important;padding:0 0 22px!important;overflow:hidden!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard:is(:hover,:focus-within) {
  transform:translateY(-5px)!important;border-color:#83c8d3!important;box-shadow:0 22px 50px #00131ec2!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard .creativeoProjectMedia {
  display:block!important;overflow:hidden!important;border-radius:0!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard .creativeoProjectMedia :is(picture,img) {
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 25%!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard :is(.creativeoProjectMeta,h3,p) {margin-inline:22px!important}
html body:not([data-demo-family]) #main-content .creativeoProjectCard .creativeoProjectMeta {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard h3,
html body:not([data-demo-family]) #main-content .creativeoProjectCard h3 a {
  color:#f7fbfc!important;-webkit-text-fill-color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content .creativeoProjectCard > p {color:#bcd0d8!important}
/* About and case-study proof surfaces. */
html body:not([data-demo-family]) #main-content .creativeoAboutPage :is(.creativeoDirection,.strategyOperatingModel,.strategyAboutFacts) {
  background:#f2f7f8!important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage :is(.creativeoDirection,.strategyOperatingModel,.strategyAboutFacts) h2 {
  color:#173041!important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .strategyProofSection--about {
  background:#0a1e2c!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoCardSection {
  background:#f3f8f9!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoCardSection article {
  border:1px solid #cbdfe4!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 10px 28px #0a34400c!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoCardSection article:is(:hover,:focus-within) {
  transform:translateY(-4px)!important;border-color:#84bdc8!important;box-shadow:0 20px 42px #0a34401a!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoCardSection article h3 {color:#173041!important}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoCardSection article p {color:#526a77!important}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoProcessSection,
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoProcessSection {
  background:#edf5f6!important;
}
/* Pricing, comparison and FAQ panels across pricing and service details. */
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoHero {background:linear-gradient(135deg,#091d2b,#163a4c)!important}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoHero .creativeoGhostWord {opacity:.025!important}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPricingPlans {background:#f4f9fa!important}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPriceCard {
  border:1px solid #c7dce1!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 12px 32px #0a34400c!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPriceCard:is(:hover,:focus-within) {
  transform:translateY(-5px)!important;border-color:#7dbdc9!important;box-shadow:0 22px 45px #0a34401b!important;
}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPriceCard:nth-child(2) {
  border-color:#9fcdd5!important;background:#eaf5f7!important;
}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPriceCard :is(h3,strong) {color:#173041!important}
html body:not([data-demo-family]) #main-content .creativeoPricingPage .creativeoPriceCard p {color:#536b77!important}
html body:not([data-demo-family]) #main-content .creativeoComparisonWrap {
  border:1px solid #c9dfe3!important;border-radius:16px!important;box-shadow:0 14px 36px #0a34400d;
  overflow:auto!important;
}
html body:not([data-demo-family]) #main-content .creativeoComparisonWrap th {background:#e3f0f3!important;color:#173e50!important}
html body:not([data-demo-family]) #main-content .creativeoFaqList details {
  border:1px solid #cbdfe3!important;border-radius:12px!important;background:#fff!important;
  margin-bottom:10px!important;overflow:hidden;
}
html body:not([data-demo-family]) #main-content .creativeoFaqList details[open] {border-color:#91c5cf!important;box-shadow:0 12px 32px #0a34400e}
html body:not([data-demo-family]) #main-content .creativeoFaqList summary {color:#173041!important}
html body:not([data-demo-family]) #main-content .creativeoFaqList details p {color:#526a77!important}
/* Insights index and the 144 articles share a focused reading system. */
html body:not([data-demo-family]) #main-content .index-hero {
  background:linear-gradient(130deg,#091b29,#133648)!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content .index-hero .site-hero-title {
  color:#f7fbfc!important;-webkit-text-fill-color:#f7fbfc!important;letter-spacing:-.055em!important;
}
html body:not([data-demo-family]) #main-content .index-hero :is(.eyebrow,.text-link) {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .index-hero .index-intro p {color:#c9dce2!important}
html body:not([data-demo-family]) #main-content .index-hero .insights-hero-image {
  border:1px solid #83c6d088!important;border-radius:22px!important;
  box-shadow:0 25px 60px #00131e70!important;overflow:hidden;
}
html body:not([data-demo-family]) #main-content .library {background:#f3f8f9!important}
html body:not([data-demo-family]) #main-content .library-tools :is(input,select) {
  border:1px solid #bcd7dd!important;border-radius:10px!important;background:#fff!important;color:#173041!important;
}
html body:not([data-demo-family]) #main-content .library-tools :is(input,select):focus-visible {
  outline:2px solid #176f8b!important;outline-offset:2px!important;
}
html body:not([data-demo-family]) #main-content .insight-card {
  border:1px solid #c8dde2!important;border-radius:17px!important;background:#fff!important;
  box-shadow:0 9px 28px #0a34400b!important;overflow:hidden!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
}
html body:not([data-demo-family]) #main-content .insight-card:is(:hover,:focus-within) {
  transform:translateY(-4px)!important;border-color:#83bec9!important;box-shadow:0 20px 42px #0a34401a!important;
}
html body:not([data-demo-family]) #main-content .insight-card :is(h2,h3) {color:#173041!important}
html body:not([data-demo-family]) #main-content .insight-card p {color:#526a77!important}
html body:not([data-demo-family]) #main-content .insight-card :is(small,.eyebrow,a:last-child) {
  color:#176481!important;-webkit-text-fill-color:#176481!important;
}
html body:not([data-demo-family]) main#main-content .article-hero {
  background:linear-gradient(180deg,#091b29,#0d2738)!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) main#main-content .article-hero .site-hero-title {
  color:#f7fbfc!important;-webkit-text-fill-color:#f7fbfc!important;
}
html body:not([data-demo-family]) main#main-content .article-hero .eyebrow {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) main#main-content .article-hero .article-deck {color:#d2e1e6!important}
html body:not([data-demo-family]) main#main-content .article-hero .cover {
  border:1px solid #82c4cf6b!important;border-radius:18px!important;overflow:hidden!important;
  box-shadow:0 24px 58px #00131e60!important;
}
html body:not([data-demo-family]) main#main-content .reading-layout {background:#f8fbfb!important}
html body:not([data-demo-family]) main#main-content .article-content {
  color:#243b48!important;
}
html body:not([data-demo-family]) main#main-content .article-content :is(h2,h3) {color:#173041!important}
html body:not([data-demo-family]) main#main-content .article-content a {color:#176481!important}
html body:not([data-demo-family]) main#main-content .article-toc {
  border:1px solid #c9dfe3!important;border-radius:12px!important;background:#edf6f7!important;
}
/* Project inquiry: clear white text on navy, cyan details, and calm form controls. */
html body:not([data-demo-family]) #main-content .start-project-intro,
html body:not([data-demo-family]) main.start-project-page .start-project-intro {
  background:linear-gradient(125deg,#091b29,#123747)!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) main.start-project-page .start-project-intro .eyebrow-v2,
html body:not([data-demo-family]) main.start-project-page .start-project-intro aside small,
html body:not([data-demo-family]) main.start-project-page .startProjectNextSteps span {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) main.start-project-page .start-project-intro h1 {color:#f7fbfc!important;-webkit-text-fill-color:#f7fbfc!important}
html body:not([data-demo-family]) main.start-project-page .start-project-intro > div > p:not(.eyebrow-v2) {color:#c8dce2!important}
html body:not([data-demo-family]) main.start-project-page .start-project-intro aside {
  border:1px solid #76b9c65e!important;border-radius:17px!important;background:#173847!important;
}
html body:not([data-demo-family]) main.start-project-page .startProjectNextSteps small {color:#c1d7dd!important}
html body:not([data-demo-family]) main.start-project-page .start-project-form {background:#f3f8f9!important}
html body:not([data-demo-family]) main.start-project-page .intake-form {
  border:1px solid #bfd9de!important;border-radius:20px!important;background:#fff!important;
  box-shadow:0 18px 48px #0a344012!important;overflow:hidden;
}
html body:not([data-demo-family]) main.start-project-page .intake-form :is(input,select,textarea) {
  border-color:#bcd6dc!important;border-radius:9px!important;color:#173041!important;background:#fbfdfd!important;
}
html body:not([data-demo-family]) main.start-project-page .intake-form :is(input,select,textarea):focus-visible {
  outline:2px solid #176f8b!important;outline-offset:2px!important;
}
html body:not([data-demo-family]) main.start-project-page .intake-progress i {background:#176f8b!important}
/* Supporting pages and demos inherit the same clear accent. */
html body:not([data-demo-family]) #main-content .creativeoConceptLabPage .demo-library-v32 {background:#f3f8f9!important}
html body:not([data-demo-family]) #main-content .creativeoConceptLabPage .demo-library-v32 article {
  border-color:#c6dce0!important;border-radius:18px!important;
}
html body:not([data-demo-family]) #main-content .practiceRoute :is(.practiceEyebrow,h2 em) {
  color:#176f8b!important;-webkit-text-fill-color:#176f8b!important;
}
html body:not([data-demo-family]) #main-content .practiceRoute :is(.practiceHero,.practiceRouteHero) :is(.practiceEyebrow,h2 em) {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
/* A consistent closing panel on every main page. */
html body:not([data-demo-family]) #main-content .creativeoBodyCta {
  background:linear-gradient(115deg,#0a2030,#123747 72%,#0a2030)!important;color:#f7fbfc!important;
}
html body:not([data-demo-family]) #main-content .creativeoBodyCta :is(.creativeoEyebrow,.creativeoTextLink) {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .creativeoBodyCta h2 {color:#f7fbfc!important}
html body:not([data-demo-family]) #main-content .creativeoBodyCta .creativeoBodyCtaCopy > p {color:#c5d8df!important}
html body:not([data-demo-family]) #main-content .creativeoBodyCta .creativeoButton--accent {
  border:1px solid #90d4dd!important;background:#176f8b!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
html body:not([data-demo-family]) #main-content .creativeoBodyCta .creativeoButton--accent:is(:hover,:focus-visible) {
  border-color:#c6eef1!important;background:#c6eef1!important;
  color:#092534!important;-webkit-text-fill-color:#092534!important;
}
@media(max-width:767px) {
  html body:not([data-demo-family]) #main-content .creativeoProjectCard {
    border-radius:15px!important;
  }
  html body:not([data-demo-family]) #main-content .creativeoProjectCard :is(.creativeoProjectMeta,h3,p) {margin-inline:18px!important}
  html body:not([data-demo-family]) #main-content .creativeoHero:not(.creativeoServicesHero) .creativeoHeroTitle {line-height:1.04!important}
}
@media(prefers-reduced-motion:reduce) {
  html body:not([data-demo-family]) #main-content :is(.creativeoProjectCard,.creativeoPriceCard,.insight-card,.creativeoCardSection article) {transition:none!important}
}
/* Keep navigation readable while it crosses both light and dark sections. */
html body:not([data-demo-family]) .site-header-v3 {
  background:#071724ed!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid #8bd3dd2b!important;
}
html body:not([data-demo-family]) .site-header-v3 :is(.nav-pill-v3 a,.brand-v2 b) {
  color:#f5fbfc!important;-webkit-text-fill-color:#f5fbfc!important;
}
html body:not([data-demo-family]) .site-header-v3 .nav-pill-v3 a:is(:hover,:focus-visible) {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
/* Replace the old warm frame on Pricing with a quieter product dashboard. */
html body:not([data-demo-family]) #main-content main.creativeoPricingPage .pricingHeroSignal {
  border:1px solid #81c8d34f!important;border-radius:18px!important;
  background:#0d2a39!important;box-shadow:0 25px 55px #00131e54!important;
}
html body:not([data-demo-family]) #main-content main.creativeoPricingPage .pricingHeroSignal article {
  background:#123242!important;
}
html body:not([data-demo-family]) #main-content main.creativeoPricingPage .pricingHeroSignal article + article {
  border-left-color:#85c8d342!important;
}
/* Replace legacy gold on inquiry guidance with the shared cool palette. */
html body:not([data-demo-family]) #main-content main.start-project-page .start-project-intro .eyebrow-v2,
html body:not([data-demo-family]) #main-content main.start-project-page .startProjectNextSteps small {
  color:#c4dce2!important;-webkit-text-fill-color:#c4dce2!important;
}
html body:not([data-demo-family]) #main-content main.start-project-page .start-project-intro .eyebrow-v2 {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
/* Give the insights library the same full-width hero framing as the core pages. */
html body:not([data-demo-family]) main#main-content .index-hero.shell {
  width:100%!important;max-width:none!important;margin:0!important;
  padding:clamp(122px,10vw,156px) max(32px,calc((100% - 1440px)/2)) 84px!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
  gap:clamp(28px,5vw,64px)!important;
}
html body:not([data-demo-family]) main#main-content .index-hero .insights-hero-image {
  max-width:none!important;
}
@media(max-width:767px) {
  html body:not([data-demo-family]) main#main-content .index-hero.shell {
    padding:112px 20px 64px!important;grid-template-columns:minmax(0,1fr)!important;
  }
}
/* Complete the cool-tone accents in page-specific components. */
html body:not([data-demo-family]) #main-content .strategyDemoLab .creativeoEyebrow,
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoStoryOutput span,
html body:not([data-demo-family]) #main-content .creativeoServiceDetailPage .creativeoStoryPanel .creativeoEyebrow,
html body:not([data-demo-family]) #main-content .creativeoServiceDetailPage .creativeoMetricRail small,
html body:not([data-demo-family]) #main-content main.start-project-page .start-project-intro aside small {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content :is(.creativeoCasePage,.creativeoServiceDetailPage) .creativeoProcessSection > .creativeoShell > .creativeoEyebrow,
html body:not([data-demo-family]) #main-content .creativeoServiceDetailPage .creativeoProcessSection > .creativeoEyebrow {
  color:#176f8b!important;-webkit-text-fill-color:#176f8b!important;
}
html body:not([data-demo-family]) #main-content [class*="_principleSection_"] {
  background:#f1f7f8!important;
}
html body:not([data-demo-family]) #main-content [class*="_rhythmSection_"] {
  background:#e6f1f3!important;
}
html body:not([data-demo-family]) #main-content :is([class*="_principleSection_"],[class*="_rhythmSection_"]) span {
  color:#176f8b!important;-webkit-text-fill-color:#176f8b!important;
}
html body:not([data-demo-family]) #main-content [class*="_explorerSection_"] [class*="_mediaOverlay_"] span {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content [class*="_heroPathRail_"] button span {
  border-color:#86c8d179!important;color:#b9e9ed!important;
}
html body:not([data-demo-family]) #main-content [class*="_proofBoundary_"].dark :is(em,small,b),
html body:not([data-demo-family]) #main-content [class*="_proofBoundary_"].dark span {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .practiceRouteHero dt,
html body:not([data-demo-family]) #main-content .practiceWorkbench :is(dt,small,span),
html body:not([data-demo-family]) #main-content .practiceBrandHeroCard small {
  color:#a7e5eb!important;-webkit-text-fill-color:#a7e5eb!important;
}
html body:not([data-demo-family]) #main-content .practiceWorkbench {
  background:#0a1e2c!important;
}
html body:not([data-demo-family]) #main-content .brandLabMark {
  background:#174b5e!important;color:#e7f8fa!important;-webkit-text-fill-color:#e7f8fa!important;
}
html body:not([data-demo-family]) #main-content .brandLab span {
  color:#176481!important;-webkit-text-fill-color:#176481!important;
}
html body:not([data-demo-family]) main#main-content .article-content th {
  color:#173e50!important;-webkit-text-fill-color:#173e50!important;
}
html body:not([data-demo-family]) #main-content .creativeoServiceDetailPage section.creativeoProcessSection aside > p.creativeoEyebrow {
  color:#176f8b!important;-webkit-text-fill-color:#176f8b!important;
}