/* Clean card treatment preview: white at rest, brand colour on hover. */
body { --card-gradient: linear-gradient(125deg,var(--gradient-start,#125bff),var(--gradient-end,#7938dc)); }
body main .about-mini-grid>div>span { color: #17233e; font-weight: 500; }
body main .about-mini-grid>div>svg { color: var(--blue); }
body main .about-mini-grid>div:hover>span,
body main .about-mini-grid>div:focus-within>span { color: var(--navy); }
body.card-hover-gradient main .about-mini-grid>div:hover>span,
body.card-hover-gradient main .about-mini-grid>div:focus-within>span,
body.card-hover-solid main .about-mini-grid>div:hover>span,
body.card-hover-solid main .about-mini-grid>div:focus-within>span { color: #fff; }
body.card-hover-gradient main .about-mini-grid>div:hover>svg,
body.card-hover-gradient main .about-mini-grid>div:focus-within>svg,
body.card-hover-solid main .about-mini-grid>div:hover>svg,
body.card-hover-solid main .about-mini-grid>div:focus-within>svg { color: #fff; }
body main .compact-grid h3 { color: var(--navy); }
body main .compact-grid p { color: var(--text); }
body .heading-accent { background-image: var(--brand-gradient); }
body .button:not(.outline), body .proposal-link { background: var(--brand-gradient); }
body .button:not(.outline):hover { background: var(--brand-gradient); filter: brightness(.94); }

/* Keep the about-page CTA legible against its dark blue gradient panel. */
body .about-cta .button:not(.outline) {
  background: #fff;
  color: var(--blue);
  border-color: transparent;
}
body .about-cta .button:not(.outline):hover {
  background: #edf3ff;
  color: var(--navy);
  filter: none;
}
.dark .heading-accent,
.ecosystem .heading-accent,
.service-callout .heading-accent,
.city-process .heading-accent { background-image: linear-gradient(100deg,#8ec9ff,#d0a9ff); }
.about-cta .heading-accent,
.about-principles .heading-accent { background-image: linear-gradient(100deg,#fff,#cde2ff); }
body main .reference-service,
body main .card,
body main .process-grid article,
body main .city-process-grid article,
body main .city-sector-grid article,
body main .city-benefit-cards article,
body main .purpose-grid article,
body main .about-process-grid article,
body main .about-value-grid article,
body main .about-mini-grid>div,
body main .product-card,
body main .comparison-grid article,
body main .compact-grid article,
body main .service-detail-grid article,
body main .client-brand {
  background-color: #fff;
  background-image: none;
  border-color: #e3e9f5;
  color: var(--navy);
  box-shadow: 0 8px 24px #1424490a;
  transition: background-color var(--duration,.28s) ease, background-image var(--duration,.28s) ease,
    color var(--duration,.28s) ease, border-color var(--duration,.28s) ease,
    box-shadow var(--duration,.32s) ease, transform var(--duration,.32s) cubic-bezier(.2,.75,.25,1);
}

body main .city-process-grid article { background-color: #fff; }
body main .city-process-grid article p { color: var(--text); }
body main .city-process-grid article>span { color: var(--blue); }

body main .compact-grid article { background-color: #fff; }

body main .reference-service:hover,
body main .reference-service:focus-within,
body main .card:hover,
body main .card:focus-within,
body main .process-grid article:hover,
body main .process-grid article:focus-within,
body main .city-process-grid article:hover,
body main .city-process-grid article:focus-within,
body main .city-sector-grid article:hover,
body main .city-sector-grid article:focus-within,
body main .city-benefit-cards article:hover,
body main .city-benefit-cards article:focus-within,
body main .purpose-grid article:hover,
body main .purpose-grid article:focus-within,
body main .about-process-grid article:hover,
body main .about-process-grid article:focus-within,
body main .about-value-grid article:hover,
body main .about-value-grid article:focus-within,
body main .about-mini-grid>div:hover,
body main .about-mini-grid>div:focus-within,
body main .product-card:hover,
body main .product-card:focus-within,
body main .comparison-grid article:hover,
body main .comparison-grid article:focus-within,
body main .compact-grid article:hover,
body main .compact-grid article:focus-within,
body main .service-detail-grid article:hover,
body main .service-detail-grid article:focus-within,
body main .client-brand:hover,
body main .client-brand:focus-within {
  background-color: color-mix(in srgb,var(--gradient-start) 5%,white);
  background-image: linear-gradient(130deg,color-mix(in srgb,var(--gradient-start) 6%,white) 0%,color-mix(in srgb,var(--gradient-end) 7%,white) 100%);
  border-color: color-mix(in srgb,var(--blue) 42%,white);
  color: var(--navy);
  box-shadow: 0 15px 34px color-mix(in srgb,var(--gradient-start) 12%,transparent), 0 0 0 1px color-mix(in srgb,var(--gradient-end) 8%,transparent);
  transform: translateY(calc(-1 * var(--card-hover-lift,4px)));
}

body.card-hover-gradient main .reference-service:hover,
body.card-hover-gradient main .reference-service:focus-within,
body.card-hover-gradient main .card:hover,
body.card-hover-gradient main .card:focus-within,
body.card-hover-gradient main .process-grid article:hover,
body.card-hover-gradient main .process-grid article:focus-within,
body.card-hover-gradient main .city-process-grid article:hover,
body.card-hover-gradient main .city-process-grid article:focus-within,
body.card-hover-gradient main .city-sector-grid article:hover,
body.card-hover-gradient main .city-sector-grid article:focus-within,
body.card-hover-gradient main .city-benefit-cards article:hover,
body.card-hover-gradient main .city-benefit-cards article:focus-within,
body.card-hover-gradient main .purpose-grid article:hover,
body.card-hover-gradient main .purpose-grid article:focus-within,
body.card-hover-gradient main .about-process-grid article:hover,
body.card-hover-gradient main .about-process-grid article:focus-within,
body.card-hover-gradient main .about-value-grid article:hover,
body.card-hover-gradient main .about-value-grid article:focus-within,
body.card-hover-gradient main .about-mini-grid>div:hover,
body.card-hover-gradient main .about-mini-grid>div:focus-within,
body.card-hover-gradient main .product-card:hover,
body.card-hover-gradient main .product-card:focus-within,
body.card-hover-gradient main .comparison-grid article:hover,
body.card-hover-gradient main .comparison-grid article:focus-within,
body.card-hover-gradient main .compact-grid article:hover,
body.card-hover-gradient main .compact-grid article:focus-within,
body.card-hover-gradient main .service-detail-grid article:hover,
body.card-hover-gradient main .service-detail-grid article:focus-within,
body.card-hover-gradient main .client-brand:hover,
body.card-hover-gradient main .client-brand:focus-within {
  background-color: var(--gradient-start);
  background-image: var(--card-gradient);
  border-color: transparent;
  color: #fff;
}

body.card-hover-solid main .reference-service:hover,
body.card-hover-solid main .reference-service:focus-within,
body.card-hover-solid main .card:hover,
body.card-hover-solid main .card:focus-within,
body.card-hover-solid main .process-grid article:hover,
body.card-hover-solid main .process-grid article:focus-within,
body.card-hover-solid main .city-process-grid article:hover,
body.card-hover-solid main .city-process-grid article:focus-within,
body.card-hover-solid main .city-sector-grid article:hover,
body.card-hover-solid main .city-sector-grid article:focus-within,
body.card-hover-solid main .city-benefit-cards article:hover,
body.card-hover-solid main .city-benefit-cards article:focus-within,
body.card-hover-solid main .purpose-grid article:hover,
body.card-hover-solid main .purpose-grid article:focus-within,
body.card-hover-solid main .about-process-grid article:hover,
body.card-hover-solid main .about-process-grid article:focus-within,
body.card-hover-solid main .about-value-grid article:hover,
body.card-hover-solid main .about-value-grid article:focus-within,
body.card-hover-solid main .about-mini-grid>div:hover,
body.card-hover-solid main .about-mini-grid>div:focus-within,
body.card-hover-solid main .product-card:hover,
body.card-hover-solid main .product-card:focus-within,
body.card-hover-solid main .comparison-grid article:hover,
body.card-hover-solid main .comparison-grid article:focus-within,
body.card-hover-solid main .compact-grid article:hover,
body.card-hover-solid main .compact-grid article:focus-within,
body.card-hover-solid main .service-detail-grid article:hover,
body.card-hover-solid main .service-detail-grid article:focus-within,
body.card-hover-solid main .client-brand:hover,
body.card-hover-solid main .client-brand:focus-within {
  background-color: var(--blue);
  background-image: none;
  border-color: transparent;
  color: #fff;
}

body.card-hover-gradient main .reference-service:hover h3,
body.card-hover-gradient main .reference-service:hover p,
body.card-hover-gradient main .card:hover h3,
body.card-hover-gradient main .card:hover h2,
body.card-hover-gradient main .card:hover p,
body.card-hover-gradient main .process-grid article:hover h3,
body.card-hover-gradient main .process-grid article:hover p,
body.card-hover-gradient main .city-process-grid article:hover h3,
body.card-hover-gradient main .city-process-grid article:hover p,
body.card-hover-gradient main .city-sector-grid article:hover h3,
body.card-hover-gradient main .city-sector-grid article:hover p,
body.card-hover-gradient main .city-benefit-cards article:hover h3,
body.card-hover-gradient main .city-benefit-cards article:hover p,
body.card-hover-gradient main .purpose-grid article:hover h2,
body.card-hover-gradient main .purpose-grid article:hover p,
body.card-hover-gradient main .about-process-grid article:hover h3,
body.card-hover-gradient main .about-process-grid article:hover p,
body.card-hover-gradient main .about-value-grid article:hover h3,
body.card-hover-gradient main .about-value-grid article:hover p,
body.card-hover-gradient main .product-card:hover h3,
body.card-hover-gradient main .product-card:hover p,
body.card-hover-gradient main .comparison-grid article:hover h3,
body.card-hover-gradient main .comparison-grid article:hover p,
body.card-hover-gradient main .compact-grid article:hover h3,
body.card-hover-gradient main .compact-grid article:hover p,
body.card-hover-gradient main .service-detail-grid article:hover h3,
body.card-hover-gradient main .service-detail-grid article:hover p,
body.card-hover-gradient main .client-brand:hover h3,
body.card-hover-solid main .reference-service:hover h3,
body.card-hover-solid main .reference-service:hover p,
body.card-hover-solid main .card:hover h3,
body.card-hover-solid main .card:hover h2,
body.card-hover-solid main .card:hover p,
body.card-hover-solid main .process-grid article:hover h3,
body.card-hover-solid main .process-grid article:hover p,
body.card-hover-solid main .city-process-grid article:hover h3,
body.card-hover-solid main .city-process-grid article:hover p,
body.card-hover-solid main .city-sector-grid article:hover h3,
body.card-hover-solid main .city-sector-grid article:hover p,
body.card-hover-solid main .city-benefit-cards article:hover h3,
body.card-hover-solid main .city-benefit-cards article:hover p,
body.card-hover-solid main .purpose-grid article:hover h2,
body.card-hover-solid main .purpose-grid article:hover p,
body.card-hover-solid main .about-process-grid article:hover h3,
body.card-hover-solid main .about-process-grid article:hover p,
body.card-hover-solid main .about-value-grid article:hover h3,
body.card-hover-solid main .about-value-grid article:hover p,
body.card-hover-solid main .product-card:hover h3,
body.card-hover-solid main .product-card:hover p,
body.card-hover-solid main .comparison-grid article:hover h3,
body.card-hover-solid main .comparison-grid article:hover p,
body.card-hover-solid main .compact-grid article:hover h3,
body.card-hover-solid main .compact-grid article:hover p,
body.card-hover-solid main .service-detail-grid article:hover h3,
body.card-hover-solid main .service-detail-grid article:hover p,
body.card-hover-solid main .client-brand:hover h3 { color: #fff; }

body.card-hover-gradient main .card:hover .heading-accent,
body.card-hover-gradient main .purpose-grid article:hover .heading-accent,
body.card-hover-solid main .card:hover .heading-accent,
body.card-hover-solid main .purpose-grid article:hover .heading-accent {
  background-image: linear-gradient(90deg,#fff,#deefff);
}

.footer-logo { display:block; width:min(210px,100%); max-height:76px; object-fit:contain; object-position:left center; margin:0 0 12px; }

body main .reference-service:hover h3,
body main .reference-service:focus-within h3,
body main .card:hover h3,
body main .card:hover h2,
body main .card:focus-within h3,
body main .card:focus-within h2,
body main .process-grid article:hover h3,
body main .city-process-grid article:hover h3,
body main .city-sector-grid article:hover h3,
body main .city-benefit-cards article:hover h3,
body main .purpose-grid article:hover h2,
body main .about-process-grid article:hover h3,
body main .about-value-grid article:hover h3,
body main .product-card:hover h3,
body main .product-card:focus-within h3,
body main .comparison-grid article:hover h3,
body main .compact-grid article:hover h3,
body main .service-detail-grid article:hover h3,
body main .client-brand:hover h3 {
  color: var(--blue);
}

body main .reference-service:hover p,
body main .reference-service:focus-within p,
body main .card:hover p,
body main .card:focus-within p,
body main .process-grid article:hover p,
body main .city-process-grid article:hover p,
body main .city-sector-grid article:hover p,
body main .city-benefit-cards article:hover p,
body main .purpose-grid article:hover p,
body main .about-process-grid article:hover p,
body main .about-value-grid article:hover p,
body main .product-card:hover p,
body main .product-card:focus-within p,
body main .comparison-grid article:hover p,
body main .compact-grid article:hover p,
body main .service-detail-grid article:hover p,
body main .service-detail-grid article:hover .text-link {
  color: var(--text);
}

body main .reference-service:hover .service-icon,
body main .reference-service:focus-within .service-icon,
body main .process-grid article:hover .process-number,
body main .about-process-grid article:hover .about-step,
body main .service-detail-grid article:hover .service-detail-top>span {
  background: linear-gradient(135deg, var(--blue), #7938dc);
  color: #fff;
  box-shadow: 0 5px 15px #7938dc30;
}

body main .about-process-grid article:hover svg,
body main .about-mini-grid>div:hover svg,
body main .about-value-grid article:hover svg,
body main .purpose-grid article:hover svg,
body main .service-detail-grid article:hover svg { color: var(--blue); }

body main .card:hover .tile,
body main .card:focus-within .tile,
body main .comparison-grid article:hover .tile,
body main .comparison-grid article:focus-within .tile {
  background: linear-gradient(135deg, #eaf1ff, #f1eaff);
  color: var(--blue);
}

body main .card:hover .heading-accent,
body main .card:focus-within .heading-accent,
body main .purpose-grid article:hover .heading-accent {
  background-image: linear-gradient(100deg, var(--blue), #7938dc);
}

body main .product-card:hover .button,
body main .product-card:focus-within .button {
  background: linear-gradient(110deg, var(--blue), #7036d8);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  body main .reference-service,
  body main .card,
  body main .process-grid article,
  body main .city-process-grid article,
  body main .city-sector-grid article,
  body main .city-benefit-cards article,
  body main .purpose-grid article,
  body main .about-process-grid article,
  body main .about-value-grid article,
  body main .about-mini-grid>div,
  body main .product-card,
  body main .comparison-grid article,
  body main .compact-grid article,
  body main .service-detail-grid article,
  body main .client-brand { transition: none; }
}