@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/brand/fonts/PlusJakartaSans-400.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/brand/fonts/PlusJakartaSans-600.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/brand/fonts/PlusJakartaSans-700.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("/brand/fonts/NotoSansSC-400.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Noto Sans SC 500 (203 KB) is deliberately not loaded. Only three elements
   on the site request weight 500, and CSS font matching resolves them to the
   400 face; weight 600 continues to resolve to 700 exactly as before. */

@font-face {
  font-family: "Noto Sans SC";
  src: url("/brand/fonts/NotoSansSC-700.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Brand palette, type / weight / radius / spacing / elevation scales and
   scrims now live in sorvo-tokens.css, which loads before this file. */

html,
body,
.app-shell,
button,
input,
textarea,
select {
  font-family: var(--sorvo-font) !important;
}

[class*="font-["],
.site-header__nav-link,
.site-mobile-menu__link,
.site-mobile-menu__sublink,
.service-card__title,
.service-card__summary,
.service-card__tags li {
  font-family: var(--sorvo-font) !important;
}

.site-header__nav-link::after {
  background: var(--sorvo-cobalt) !important;
  box-shadow: 0 4px 12px rgb(37 99 255 / 24%) !important;
}

header.bg-transparent {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: rgb(255 255 255 / 86%) !important;
  border-bottom-color: rgb(10 16 32 / 8%) !important;
}

header.bg-transparent .site-header__nav-link,
header.bg-transparent .site-header__language,
header.bg-transparent .site-header__menu-button {
  color: var(--sorvo-navy) !important;
}

.site-mega-menu__item:hover .site-mega-menu__item-title,
.site-mobile-menu__sublink--overview,
.contact-info-card__action,
.contact-info-card__email {
  color: var(--sorvo-cobalt) !important;
}

.app-button--primary,
.hero-preview__button,
.about-section__button,
.site-footer__cta-button,
.brand-package-card__button--featured,
.marketing-flow-section__button,
.bg-\[\#2251FF\] {
  background: var(--sorvo-cobalt) !important;
  border-color: var(--sorvo-cobalt) !important;
  box-shadow: 0 8px 24px rgb(37 99 255 / 22%) !important;
  color: var(--sorvo-white) !important;
}

.app-button--primary:hover,
.hero-preview__button:hover,
.about-section__button:hover,
.site-footer__cta-button:hover,
.brand-package-card__button--featured:hover,
.marketing-flow-section__button:hover,
.bg-\[\#2251FF\]:hover {
  background: #174ee0 !important;
  box-shadow: 0 10px 28px rgb(37 99 255 / 30%) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--sorvo-mint) !important;
  outline-offset: 3px;
}

.home-page {
  --home-accent-start: var(--sorvo-cobalt) !important;
  --home-accent-end: var(--sorvo-mint) !important;
  --home-button-border: var(--sorvo-cobalt) !important;
  --home-button-surface: var(--sorvo-cobalt) !important;
  --home-button-shadow: 0 8px 24px rgb(37 99 255 / 22%) !important;
}

.hero-globe {
  --hero-globe-halo-primary: rgb(37 99 255 / 32%) !important;
  --hero-globe-halo-secondary: rgb(0 224 180 / 13%) !important;
}

.service-section,
.vision-section {
  background: linear-gradient(145deg, var(--sorvo-navy) 4%, #10285c 64%, #194fc9 130%) !important;
}

@media (max-width: 720px) {
  .service-card {
    background: linear-gradient(145deg, var(--sorvo-navy), #173f9f) !important;
  }
}

.brand-design-hero,
.contact-hero {
  background-color: var(--sorvo-navy) !important;
}

.brand-strategic-tiers__ambient,
.brand-package-card--featured .brand-package-card__topbar,
.marketing-flow-section__hub-core {
  background-color: var(--sorvo-cobalt) !important;
}

.brand-package-card__check--checked,
.hero-logos__item::after {
  color: var(--sorvo-mint) !important;
}

.site-footer__surface {
  background-color: var(--sorvo-navy) !important;
  background-image: linear-gradient(150deg, var(--sorvo-navy) 8%, #10234c 100%) !important;
}

.site-footer__divider {
  border-color: rgb(231 235 241 / 18%) !important;
}

@media (max-width: 767px) {
  .site-header__bar.page-width {
    min-height: 60px !important;
  }

  .site-header__bar > a:first-child {
    max-width: none !important;
    width: 120px !important;
  }

  .site-header__bar > a:first-child img {
    height: auto !important;
    width: 120px !important;
  }

  .site-footer__logo {
    height: auto !important;
    min-width: 120px;
    width: 120px !important;
  }
}

/* Final cascade for the simple suite: kept at the end so it wins over the
   legacy scene layer above, including its mobile media queries. */
.components-section,
.why-choose-section,
.brand-case-study,
.brand-strategic-tiers,
.brand-localization {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 91%), rgb(245 247 251 / 95%)),
    url("/brand/simple-suite/brand-simple-desktop.webp") !important;
}

.website-comparison,
.website-process,
.website-technology {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 248 255 / 95%)),
    url("/brand/simple-suite/website-simple-desktop.webp") !important;
}

.marketing-flow-section,
.marketing-overview,
.service-content,
.service-content-section,
.global-integration {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 93%), rgb(245 248 252 / 96%)),
    url("/brand/simple-suite/marketing-simple-desktop.webp") !important;
}

.private-channels,
.private-feature-grid,
.social-acquisition,
.social-platforms {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(243 248 251 / 95%)),
    url("/brand/simple-suite/private-social-simple-desktop.webp") !important;
}

.global-resources,
.logistics-services {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 94%)),
    url("/brand/simple-suite/logistics-simple-desktop.webp") !important;
}

.b2c-benefits,
.b2c-growth,
.solutions-diagram {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(245 248 252 / 95%)),
    url("/brand/simple-suite/b2c-store-simple-desktop.webp") !important;
}

.geo-service-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 95%)),
    url("/brand/simple-suite/geo-simple-desktop.webp") !important;
}

.contact-info {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(245 247 251 / 96%)),
    url("/brand/simple-suite/contact-simple-desktop.webp") !important;
}

.data-intelligence,
.vision-section {
  background-image:
    linear-gradient(145deg, rgb(7 16 51 / 82%), rgb(18 45 104 / 79%)),
    url("/brand/simple-suite/trade-data-simple-desktop.webp") !important;
}

.precise-inquiries {
  background-image:
    linear-gradient(180deg, rgb(245 247 251 / 91%), rgb(236 243 249 / 95%)),
    url("/brand/simple-suite/lead-generation-simple.webp") !important;
  color: var(--sorvo-simple-ink) !important;
}

.site-footer__surface {
  background-image:
    linear-gradient(150deg, rgb(5 14 38 / 84%), rgb(10 16 32 / 74%)),
    url("/brand/simple-suite/logistics-simple-desktop.webp") !important;
}

.components-card__inner,
.brand-case-study__image-frame,
.brand-package-card__surface,
.why-choose-card__inner,
.vision-stat-card,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card,
.feature-card,
.service-content-card,
.inquiry-row__visual {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sorvo-simple-shadow) !important;
}

.components-card__inner,
.brand-case-study__image-frame,
.brand-package-card__surface,
.why-choose-card__inner,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card,
.service-content-card {
  background: rgb(255 255 255 / 88%) !important;
  border-color: var(--sorvo-simple-line) !important;
}

.vision-stat-card,
.private-feature-grid .feature-card {
  background: rgb(7 16 51 / 74%) !important;
  border-color: rgb(255 255 255 / 22%) !important;
  box-shadow: 0 18px 42px rgb(2 12 44 / 18%) !important;
}

.inquiry-row__visual {
  background: rgb(255 255 255 / 92%) !important;
  border-color: rgb(34 81 255 / 13%) !important;
  box-shadow: 0 20px 46px rgb(10 16 32 / 10%) !important;
}

.inquiry-row__image,
.brand-case-study__image-frame img,
.components-card__cover {
  border-radius: var(--r-md) !important;
}

@media (max-width: 767px) {
  .components-section,
  .why-choose-section,
  .brand-case-study,
  .brand-strategic-tiers,
  .brand-localization,
  .website-comparison,
  .website-process,
  .website-technology,
  .marketing-flow-section,
  .marketing-overview,
  .service-content,
  .service-content-section,
  .global-integration,
  .private-channels,
  .private-feature-grid,
  .social-acquisition,
  .social-platforms,
  .global-resources,
  .logistics-services,
  .b2c-benefits,
  .b2c-growth,
  .solutions-diagram,
  .geo-service-section,
  .contact-info,
  .precise-inquiries {
    background-position: center center !important;
    background-size: cover !important;
  }

  .data-intelligence,
  .vision-section {
    background-position: 62% center !important;
  }

  .site-footer__surface {
    background-position: 62% center !important;
  }
}

/* Phase 4: simplified physical-space suite. The routes, copy, interaction and
   motion stay intact; this layer only shifts the visual language toward
   daylight, paper and tangible work surfaces. Its palette is in
   sorvo-tokens.css; --sorvo-simple-blue/-mint/-paper were declared here and
   never referenced, so phase 10 dropped them. */

.components-section,
.why-choose-section,
.brand-case-study,
.brand-strategic-tiers,
.brand-localization {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 91%), rgb(245 247 251 / 95%)),
    url("/brand/simple-suite/brand-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.website-comparison,
.website-process,
.website-technology {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 248 255 / 95%)),
    url("/brand/simple-suite/website-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.marketing-flow-section,
.marketing-overview,
.service-content,
.service-content-section,
.global-integration {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 93%), rgb(245 248 252 / 96%)),
    url("/brand/simple-suite/marketing-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.private-channels,
.private-feature-grid,
.social-acquisition,
.social-platforms {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(243 248 251 / 95%)),
    url("/brand/simple-suite/private-social-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.global-resources,
.logistics-services {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 94%)),
    url("/brand/simple-suite/logistics-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.b2c-benefits,
.b2c-growth,
.solutions-diagram {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(245 248 252 / 95%)),
    url("/brand/simple-suite/b2c-store-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.geo-service-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 95%)),
    url("/brand/simple-suite/geo-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.contact-info {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(245 247 251 / 96%)),
    url("/brand/simple-suite/contact-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.data-intelligence,
.vision-section,
.precise-inquiries {
  background-image:
    linear-gradient(145deg, rgb(7 16 51 / 82%), rgb(18 45 104 / 79%)),
    url("/brand/simple-suite/trade-data-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.precise-inquiries {
  background-image:
    linear-gradient(180deg, rgb(245 247 251 / 91%), rgb(236 243 249 / 95%)),
    url("/brand/simple-suite/lead-generation-simple.webp") !important;
  color: var(--sorvo-simple-ink) !important;
}

.components-card__inner,
.brand-case-study__image-frame,
.brand-package-card__surface,
.why-choose-card__inner,
.vision-stat-card,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card,
.feature-card,
.service-content-card,
.inquiry-row__visual {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--sorvo-simple-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sorvo-simple-shadow) !important;
}

.components-card__inner,
.brand-case-study__image-frame,
.brand-package-card__surface,
.why-choose-card__inner,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card,
.service-content-card {
  background: rgb(255 255 255 / 88%) !important;
}

.vision-stat-card,
.private-feature-grid .feature-card {
  background: rgb(7 16 51 / 74%) !important;
  border-color: rgb(255 255 255 / 22%) !important;
  box-shadow: 0 18px 42px rgb(2 12 44 / 18%) !important;
}

.feature-card,
.service-content-card {
  border-radius: var(--r-lg) !important;
}

.inquiry-row__visual {
  background: rgb(255 255 255 / 92%) !important;
  border-color: rgb(34 81 255 / 13%) !important;
  box-shadow: 0 20px 46px rgb(10 16 32 / 10%) !important;
}

.inquiry-row__image,
.brand-case-study__image-frame img,
.components-card__cover {
  border-radius: var(--r-md) !important;
}

.site-footer__surface {
  background-image:
    linear-gradient(150deg, rgb(5 14 38 / 84%), rgb(10 16 32 / 74%)),
    url("/brand/simple-suite/logistics-simple-desktop.webp") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

@media (max-width: 767px) {
  .components-section,
  .why-choose-section,
  .brand-case-study,
  .brand-strategic-tiers,
  .brand-localization,
  .website-comparison,
  .website-process,
  .website-technology,
  .marketing-flow-section,
  .marketing-overview,
  .service-content,
  .service-content-section,
  .global-integration,
  .private-channels,
  .private-feature-grid,
  .social-acquisition,
  .social-platforms,
  .global-resources,
  .logistics-services,
  .b2c-benefits,
  .b2c-growth,
  .solutions-diagram,
  .geo-service-section,
  .contact-info,
  .precise-inquiries {
    background-position: center center !important;
    background-size: cover !important;
  }

  .data-intelligence,
  .vision-section {
    background-position: 62% center !important;
  }

  .site-footer__surface {
    background-position: 62% center !important;
  }
}

/* Homepage hero: SORVO's two brand modules become a cross-border corridor. */
.home-page .hero-preview {
  background: #f7f8fb;
  min-height: calc(100svh + 160px) !important;
  overflow: clip;
}

.home-page .hero-preview__fallback {
  background: #f7f8fb;
}

.home-page .hero-preview__content {
  box-sizing: border-box;
  min-height: 100svh !important;
  padding: clamp(124px, 17.8vh, 136px) 32px 0 !important;
  z-index: 3;
}

.home-page .hero-preview__copy {
  margin-inline: auto;
  max-width: 760px;
}

.home-page .hero-preview__eyebrow {
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.home-page .hero-preview__title {
  font-weight: 700;
  letter-spacing: -0.035em;
}

.home-page .hero-preview__subtitle {
  font-weight: 400;
  letter-spacing: -0.035em;
}

.home-page .hero-preview__button {
  border-radius: var(--r-sm) !important;
  height: 40px !important;
  margin-top: 14px !important;
  min-width: 164px !important;
}

.home-page .hero-globe {
  aspect-ratio: auto !important;
  bottom: auto !important;
  height: 100svh !important;
  left: 50% !important;
  opacity: 1 !important;
  top: 0 !important;
  transform: translateX(-50%) !important;
  transform-origin: center bottom !important;
  width: 100vw !important;
  z-index: 1;
}

.home-page .hero-globe .hero-globe__frame {
  background-image: url("/brand/hero/sorvo-corridor-desktop.webp") !important;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.home-page .hero-globe .hero-globe__image {
  display: none !important;
}

.home-page .sorvo-hero-video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.home-page .hero-logos {
  bottom: 30px !important;
}

@media (max-width: 640px) {
  .home-page .hero-preview {
    min-height: calc(100svh + 104px) !important;
  }

  .home-page .hero-preview__content {
    min-height: 100svh !important;
    padding: clamp(96px, 13svh, 112px) 0 0 !important;
    width: min(calc(100% - 40px), 1440px);
  }

  .home-page .hero-preview__copy {
    max-width: 350px;
  }

  .home-page .hero-preview__title,
  .home-page .hero-preview__subtitle {
    letter-spacing: -0.04em;
  }

  .home-page .hero-globe {
    height: 100svh !important;
    width: 100vw !important;
  }

  .home-page .hero-globe .hero-globe__frame {
    background-image: url("/brand/hero/sorvo-corridor-mobile.webp") !important;
    background-position: center bottom;
  }

  .home-page .hero-logos {
    bottom: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-globe,
  .home-page .hero-preview__copy {
    animation: none !important;
    transition: none !important;
  }

  .home-page .sorvo-hero-video {
    display: none !important;
  }
}

/* Phase 2: approved page-scene system. Copy and interactions remain live HTML. */
.about-section,
.service-section,
.brand-design-hero,
.logistics-hero,
.ziki-hero,
.contact-hero,
.b2b-brand-hero,
.b2b-marketing-hero,
.b2c-hero,
.geo-hero-section,
.social-media-hero,
.digital-marketing-page .hero-section,
.website-development-hero,
.site-footer__cta {
  background-color: #f7f8fb !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.about-section {
  background-image: url("/brand/page-scenes-v1/01-about-us-background.webp") !important;
  background-position: center top !important;
}

.about-section__visual,
.about-section__backdrop {
  visibility: hidden !important;
}

.service-section {
  background-image: url("/brand/page-scenes-v1/09-services-overview-background.webp") !important;
  background-position: center top !important;
  color: var(--sorvo-navy) !important;
}

.service-section .service-card {
  background: transparent !important;
  border-color: rgb(10 16 32 / 10%) !important;
}

.service-section .service-card__title {
  color: var(--sorvo-navy) !important;
}

.service-section .service-card__summary {
  color: rgb(10 16 32 / 72%) !important;
}

.service-section .service-card__tags li {
  background: rgb(255 255 255 / 52%) !important;
  border-color: rgb(10 16 32 / 22%) !important;
  color: var(--sorvo-navy) !important;
}

.service-section .service-card:nth-child(3) .service-card__title,
.service-section .service-card:nth-child(3) .service-card__summary,
.service-section .service-card:nth-child(3) .service-card__tags li {
  color: var(--sorvo-white) !important;
  text-shadow: 0 1px 14px rgb(10 16 32 / 45%);
}

.service-section .service-card:nth-child(3) .service-card__tags li {
  background: rgb(10 16 32 / 22%) !important;
  border-color: rgb(255 255 255 / 55%) !important;
}

.service-section .service-card__icon-wrap {
  opacity: 0 !important;
}

.brand-design-hero {
  background-image: url("/brand/page-scenes-v1/02-brand-design-background.webp") !important;
  background-position: center center !important;
}

.brand-design-hero__media {
  display: none !important;
}

.logistics-hero {
  background-image: url("/brand/page-scenes-v1/03-international-logistics-background.webp") !important;
  background-position: center center !important;
}

.logistics-hero__visual {
  visibility: hidden !important;
}

.ziki-hero {
  background-image: url("/brand/page-scenes-v1/04-ai-trade-data-background.webp") !important;
  background-position: center center !important;
}

.ziki-hero__bg,
.ziki-hero__gradient,
.ziki-hero__globe-wrap {
  display: none !important;
}

.ziki-hero__title,
.ziki-hero__actions,
.contact-hero__title,
.contact-hero__subtitle {
  animation: none !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}

.contact-hero {
  background-image: url("/brand/page-scenes-v1/05-contact-background.webp") !important;
  background-position: center center !important;
}

.contact-hero__backdrop,
.contact-hero__fade {
  display: none !important;
}

.b2b-brand-hero {
  background-image: url("/brand/page-scenes-v1/08-global-brand-export-background.webp") !important;
  background-position: center center !important;
}

.b2b-brand-hero__visual {
  visibility: hidden !important;
}

.b2b-marketing-hero {
  background-image: url("/brand/page-scenes-v1/10-b2b-lead-generation-background.webp") !important;
  background-position: center center !important;
}

.b2b-marketing-hero__visual {
  visibility: hidden !important;
}

.b2c-hero {
  background-image: url("/brand/page-scenes-v1/11-b2c-store-background.webp") !important;
  background-position: center center !important;
}

.b2c-hero__map,
.b2c-hero__visual {
  display: none !important;
}

.geo-hero-section {
  background-image: url("/brand/page-scenes-v1/12-geo-location-marketing-background.webp") !important;
  background-position: center center !important;
}

.geo-hero-section__visual {
  visibility: hidden !important;
}

.social-media-hero,
.social-private-page .social-media-hero {
  background-image: url("/brand/page-scenes-v1/13-social-media-marketing-background.webp") !important;
  background-position: center center !important;
}

.social-media-hero__visual {
  visibility: hidden !important;
}

.digital-marketing-page .hero-section,
.website-development-page--b2b .website-development-hero {
  background-image: url("/brand/page-scenes-v1/10-b2b-lead-generation-background.webp") !important;
  background-position: center center !important;
}

.digital-marketing-page .hero-section__visual,
.website-development-hero__media {
  visibility: hidden !important;
}

.website-development-page--b2c .website-development-hero {
  background-image: url("/brand/page-scenes-v1/11-b2c-store-background.webp") !important;
  background-position: center center !important;
}

.brand-design-hero__title,
.brand-design-hero__description,
.logistics-hero__title,
.logistics-hero__description,
.ziki-hero__title,
.ziki-hero__content,
.contact-hero__title,
.contact-hero__subtitle,
.b2b-brand-hero__title,
.b2b-brand-hero__description,
.b2b-marketing-hero__title,
.b2b-marketing-hero__description,
.b2c-hero__title,
.geo-hero-section__eyebrow,
.geo-hero-section__title,
.geo-hero-section__description,
.social-media-hero__eyebrow,
.social-media-hero__title,
.social-media-hero__description,
.digital-marketing-page .hero-section__eyebrow,
.digital-marketing-page .hero-section__title,
.digital-marketing-page .hero-section__description,
.website-development-hero__title,
.website-development-hero__description {
  -webkit-text-fill-color: currentColor !important;
  color: var(--sorvo-navy) !important;
  text-shadow: 0 1px 16px rgb(255 255 255 / 72%);
}

.site-footer__cta {
  background-image: url("/brand/page-scenes-v1/07-cta-background.webp") !important;
  background-position: center center !important;
  box-shadow: inset 0 0 0 1px rgb(10 16 32 / 7%);
}

.site-footer__cta-eyebrow {
  color: var(--sorvo-cobalt) !important;
}

.site-footer__cta-title {
  color: var(--sorvo-navy) !important;
  text-shadow: 0 1px 18px rgb(255 255 255 / 90%);
}

.site-footer__cta-copy {
  color: rgb(10 16 32 / 68%) !important;
}

@media (max-width: 767px) {
  .about-section {
    background-image: none !important;
  }

  .service-section {
    background-image: none !important;
    background-color: #f3f6fb !important;
  }

  .service-section .service-card {
    background: linear-gradient(145deg, #fff, #edf3ff) !important;
  }

  .brand-design-hero,
  .logistics-hero,
  .ziki-hero,
  .contact-hero,
  .b2b-brand-hero,
  .b2b-marketing-hero,
  .b2c-hero,
  .geo-hero-section,
  .social-media-hero,
  .digital-marketing-page .hero-section,
  .website-development-hero {
    background-position: 62% center !important;
  }

  .brand-design-hero::after,
  .logistics-hero::after,
  .ziki-hero::after,
  .contact-hero::after,
  .b2b-brand-hero::after,
  .b2b-marketing-hero::after,
  .b2c-hero::after,
  .geo-hero-section::after,
  .social-media-hero::after,
  .digital-marketing-page .hero-section::after,
  .website-development-hero::after {
    background: linear-gradient(180deg, rgb(255 255 255 / 35%), rgb(255 255 255 / 88%));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  .brand-design-hero__inner,
  .logistics-hero__inner,
  .ziki-hero__inner,
  .contact-hero__shell,
  .b2b-brand-hero__inner,
  .b2b-marketing-hero__inner,
  .b2c-hero__inner,
  .geo-hero-section__inner,
  .social-media-hero__inner,
  .digital-marketing-page .hero-section__inner,
  .website-development-hero__inner {
    position: relative;
    z-index: 1;
  }

  .site-footer__cta {
    background-position: 62% center !important;
  }
}

/* Phase 3: extend the approved SORVO spatial language below the hero layer. */
.components-section,
.why-choose-section,
.marketing-flow-section,
.brand-case-study,
.brand-strategic-tiers,
.logistics-services,
.data-intelligence,
.contact-info,
.website-comparison,
.website-process,
.b2c-benefits,
.b2c-growth,
.solutions-diagram,
.marketing-overview,
.service-content-section,
.private-channels,
.global-integration,
.geo-service-section,
.social-platforms,
.social-acquisition {
  background-color: #f7f8fb !important;
}

.components-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(247 248 251 / 82%)),
    url("/brand/experience/sorvo-brand-story-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.why-choose-section {
  background-image:
    linear-gradient(180deg, rgb(247 248 251 / 88%), rgb(255 255 255 / 92%)),
    url("/brand/experience/sorvo-home-about-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.marketing-flow-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(247 250 255 / 94%)),
    url("/brand/experience/sorvo-marketing-growth-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.vision-section {
  background-image:
    linear-gradient(125deg, rgb(10 16 32 / 88%), rgb(19 46 108 / 76%)),
    url("/brand/experience/sorvo-marketing-system-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.brand-localization,
.precise-inquiries,
.private-feature-grid,
.website-technology {
  background-image:
    linear-gradient(125deg, rgb(10 16 32 / 92%), rgb(37 99 255 / 70%)),
    url("/brand/experience/sorvo-marketing-system-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.global-resources {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(237 244 255 / 82%)),
    url("/brand/experience/sorvo-trade-fulfillment-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.brand-case-study,
.website-comparison {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 91%), rgb(244 248 255 / 86%)),
    url("/brand/experience/sorvo-brand-website-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.brand-strategic-tiers,
.website-process {
  background-image:
    linear-gradient(180deg, rgb(247 248 251 / 90%), rgb(255 255 255 / 92%)),
    url("/brand/experience/sorvo-home-services-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.service-content,
.private-channels,
.global-integration,
.social-acquisition {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 248 255 / 88%)),
    url("/brand/experience/sorvo-marketing-growth-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.components-card__inner,
.brand-case-study__image-frame,
.brand-package-card__surface,
.why-choose-card__inner,
.vision-stat-card,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card {
  border: 1px solid rgb(37 99 255 / 14%) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 60px rgb(10 16 32 / 10%) !important;
  overflow: hidden;
}

.why-choose-card__inner,
.vision-stat-card,
.marketing-platform__card,
.website-comparison__card,
.website-process__card,
.logistics-service-card {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: rgb(255 255 255 / 78%) !important;
}

.components-card__cover,
.brand-case-study__image-frame img,
.inquiry-row__image {
  border-radius: var(--r-lg) !important;
}

.inquiry-row__visual {
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--r-xl);
  box-shadow: 0 28px 70px rgb(2 12 44 / 28%);
  overflow: hidden;
}

.feature-card,
.service-content-card {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgb(255 255 255 / 22%) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 28px 70px rgb(2 12 44 / 24%) !important;
}

.private-feature-grid .feature-card {
  background: rgb(8 24 66 / 62%) !important;
}

.service-content .service-content-card {
  background: rgb(255 255 255 / 76%) !important;
  border-color: rgb(37 99 255 / 14%) !important;
  box-shadow: 0 24px 60px rgb(10 16 32 / 10%) !important;
}

.site-footer__surface {
  background-image:
    linear-gradient(150deg, rgb(5 14 38 / 84%), rgb(10 16 32 / 72%)),
    url("/brand/experience/sorvo-footer-route-desktop.webp") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

@media (max-width: 767px) {
  .components-section {
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(247 248 251 / 88%)),
      url("/brand/experience/sorvo-brand-story-mobile.webp") !important;
  }

  .why-choose-section {
    background-image:
      linear-gradient(180deg, rgb(247 248 251 / 90%), rgb(255 255 255 / 94%)),
      url("/brand/experience/sorvo-home-about-mobile.webp") !important;
  }

  .marketing-flow-section {
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(247 250 255 / 95%)),
      url("/brand/experience/sorvo-marketing-growth-mobile.webp") !important;
  }

  .vision-section,
  .brand-localization,
  .precise-inquiries,
  .private-feature-grid,
  .website-technology {
    background-image:
      linear-gradient(150deg, rgb(10 16 32 / 90%), rgb(37 99 255 / 72%)),
      url("/brand/experience/sorvo-marketing-system-mobile.webp") !important;
  }

  .global-resources {
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 76%), rgb(237 244 255 / 86%)),
      url("/brand/experience/sorvo-trade-fulfillment-mobile.webp") !important;
  }

  .brand-case-study,
  .website-comparison {
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 93%), rgb(244 248 255 / 90%)),
      url("/brand/experience/sorvo-brand-website-mobile.webp") !important;
  }

  .brand-strategic-tiers,
  .website-process {
    background-image:
      linear-gradient(180deg, rgb(247 248 251 / 92%), rgb(255 255 255 / 94%)),
      url("/brand/experience/sorvo-home-services-mobile.webp") !important;
  }

  .service-content,
  .private-channels,
  .global-integration,
  .social-acquisition {
    background-image:
      linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 248 255 / 91%)),
      url("/brand/experience/sorvo-marketing-growth-mobile.webp") !important;
  }

  .components-card__inner,
  .brand-package-card__surface,
  .why-choose-card__inner,
  .vision-stat-card,
  .marketing-platform__card,
  .website-comparison__card,
  .website-process__card,
  .logistics-service-card,
  .feature-card,
  .service-content-card {
    border-radius: var(--r-lg) !important;
  }

  .site-footer__surface {
    background-image:
      linear-gradient(150deg, rgb(5 14 38 / 86%), rgb(10 16 32 / 76%)),
      url("/brand/experience/sorvo-footer-route-mobile.webp") !important;
  }
}

/* Last-pass specificity keeps the simplified scenes above the legacy scene
   declarations regardless of viewport-specific ordering. */
body .components-section,
body .brand-case-study,
body .brand-strategic-tiers,
body .brand-localization {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 91%), rgb(245 247 251 / 95%)),
    url("/brand/simple-suite/brand-simple-desktop.webp") !important;
}

body .website-comparison,
body .website-process,
body .website-technology {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 248 255 / 95%)),
    url("/brand/simple-suite/website-simple-desktop.webp") !important;
}

body .marketing-overview,
body .service-content,
body .service-content-section,
body .global-integration {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 93%), rgb(245 248 252 / 96%)),
    url("/brand/simple-suite/marketing-simple-desktop.webp") !important;
}

body .private-channels,
body .private-feature-grid,
body .social-acquisition,
body .social-platforms {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(243 248 251 / 95%)),
    url("/brand/simple-suite/private-social-simple-desktop.webp") !important;
}

body .global-resources,
body .logistics-services {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 94%)),
    url("/brand/simple-suite/logistics-simple-desktop.webp") !important;
}

body .b2c-benefits,
body .b2c-growth,
body .solutions-diagram {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(245 248 252 / 95%)),
    url("/brand/simple-suite/b2c-store-simple-desktop.webp") !important;
}

body .geo-service-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(241 247 251 / 95%)),
    url("/brand/simple-suite/geo-simple-desktop.webp") !important;
}

body .contact-info {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(245 247 251 / 96%)),
    url("/brand/simple-suite/contact-simple-desktop.webp") !important;
}

body .precise-inquiries {
  background-image:
    linear-gradient(180deg, rgb(245 247 251 / 91%), rgb(236 243 249 / 95%)),
    url("/brand/simple-suite/lead-generation-simple.webp") !important;
  color: var(--sorvo-simple-ink) !important;
}

body .about-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(245 247 251 / 96%)),
    url("/brand/simple-suite/brand-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .service-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 90%), rgb(244 248 255 / 95%)),
    url("/brand/simple-suite/website-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .website-development-page--b2c .website-development-hero,
body .website-development-page--b2c .website-development-hero__media,
body .website-development-page--b2c .website-b2c-overview,
body .website-development-page--b2c .b2c-package-section {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 84%), rgb(244 248 255 / 94%)),
    url("/brand/simple-suite/b2c-store-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .data-intelligence h1,
body .data-intelligence h2,
body .data-intelligence h3,
body .data-intelligence .data-intelligence__title {
  color: #fff !important;
}

body .data-intelligence p,
body .data-intelligence .data-intelligence__subtitle {
  color: rgb(255 255 255 / 78%) !important;
}

body .contact-hero__backdrop {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 83%), rgb(245 247 251 / 94%)),
    url("/brand/simple-suite/contact-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .contact-hero {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 83%), rgb(245 247 251 / 94%)),
    url("/brand/simple-suite/contact-simple-desktop.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body .contact-hero__bg-img {
  opacity: 0 !important;
}

body .contact-hero__copy,
body .contact-hero__title,
body .contact-hero__subtitle {
  color: var(--sorvo-simple-ink) !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 960px) {
  body .contact-hero__top {
    gap: 32px !important;
    grid-template-columns: 1fr !important;
  }

  body .contact-hero__title {
    font-size: var(--fs-3xl) !important;
  }

  body .contact-hero__cards {
    bottom: auto !important;
    margin-top: 36px !important;
    position: relative !important;
  }

  body .contact-hero {
    padding-bottom: 90px !important;
  }
}

body .components-card__inner,
body .brand-case-study__image-frame,
body .brand-package-card__surface,
body .why-choose-card__inner,
body .vision-stat-card,
body .marketing-platform__card,
body .website-comparison__card,
body .website-process__card,
body .logistics-service-card,
body .feature-card,
body .service-content-card,
body .inquiry-row__visual {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sorvo-simple-shadow) !important;
}

body .inquiry-row__visual {
  background: rgb(255 255 255 / 92%) !important;
  border-color: rgb(34 81 255 / 13%) !important;
  box-shadow: 0 20px 46px rgb(10 16 32 / 10%) !important;
}

body .inquiry-row__image,
body .brand-case-study__image-frame img,
body .components-card__cover {
  border-radius: var(--r-md) !important;
}

/* Phase 5: typography and legacy-brand cleanup. The responsive shell keeps
   the existing navigation and interaction model, while giving the content
   enough room to breathe at the in-app preview width.
   --sorvo-readable-ink/-muted were a third name for the shared ink scale and
   now resolve through --sorvo-ink / --sorvo-ink-muted; -soft was unused. */

body {
  color: var(--sorvo-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The original site left decorative wordmarks in the content flow. They are
   not part of the live copy, so remove them rather than swapping in another
   unrelated logo. */
body .brand-localization__wordmark,
body .brand-localization__wordmark-image,
body .b2c-package-section__wordmark,
body img[src*="brand.De8APViR"],
body img[src*="solutions-wordmark"],
body img[src*="components-dark"] {
  display: none !important;
}

/* The <=920px header used to become three stacked rows. Keep the same links
   and CTA, but make it a compact two-row grid so hero copy is not covered. */
@media (min-width: 768px) and (max-width: 920px) {
  body header .site-header__bar.page-width {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    min-height: 98px !important;
    padding: 8px 0 !important;
    gap: 6px 16px !important;
  }

  body header .site-header__bar > a:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body header .site-header__bar > .site-header__nav-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: auto !important;
    justify-self: center !important;
    width: auto !important;
  }

  body header .site-header__bar > .site-header__nav-shell nav {
    gap: 18px !important;
    min-height: 24px !important;
    row-gap: 4px !important;
  }

  body header .site-header__bar > div:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

/* On phones the contact cards are a single reading flow, not a clipped
   carousel. Keep each country card in the existing order and let the page
   breathe vertically. */
@media (max-width: 767px) {
  body .contact-hero__cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin-inline: 16px !important;
    overflow: visible !important;
    width: auto !important;
  }

  body .contact-hero__cards .contact-card {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

body header.bg-transparent .site-header__bar > button {
  color: var(--sorvo-ink) !important;
}

/* Light scene copy should use the same ink hierarchy everywhere. */
body .brand-localization__intro,
body .global-resources__title,
body .global-resources__headline,
body .global-resources__subtitle,
body .b2c-benefits__title,
body .website-technology__title,
body .website-technology__description,
body .private-feature-grid__title {
  color: var(--sorvo-ink) !important;
  text-shadow: none !important;
}

body .brand-localization__intro,
body .global-resources__subtitle,
body .website-technology__description {
  color: var(--sorvo-ink-muted) !important;
}

body .brand-localization__intro,
body .global-resources__subtitle {
  font-size: var(--fs-base) !important;
  line-height: 1.6 !important;
}

body .service-section .service-card:nth-child(3) {
  background: linear-gradient(145deg, #173c9e, #2f6bff) !important;
  border-color: rgb(37 99 255 / 55%) !important;
  box-shadow: 0 18px 42px rgb(23 60 158 / 22%) !important;
}

body .contact-hero__copy .contact-hero__subtitle {
  opacity: 0.84 !important;
}

/* Make small supporting copy readable without changing the information
   architecture or the animated reveal states. */
body .brand-design-hero__description,
body .logistics-hero__description,
body .b2b-brand-hero__description,
body .b2b-marketing-hero__description,
body .geo-hero-section__description,
body .social-media-hero__description,
body .digital-marketing-page .hero-section__description,
body .website-development-hero__description {
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

body .inquiry-row__description {
  font-size: var(--fs-base) !important;
  line-height: 1.6 !important;
}

body .website-comparison__card-description {
  color: var(--sorvo-ink-muted) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.6 !important;
}

body .b2c-benefits__card-description {
  color: var(--sorvo-ink-muted) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.6 !important;
}

body .brand-case-study__description,
body .marketing-overview__card-description,
body .private-channels__subtitle,
body .social-platforms__description,
body .social-acquisition__subtitle {
  color: var(--sorvo-ink-muted) !important;
}

@media (max-width: 767px) {
  body .brand-design-hero__title,
  body .logistics-hero__title,
  body .ziki-hero__title,
  body .contact-hero__title,
  body .b2b-brand-hero__title,
  body .b2b-marketing-hero__title,
  body .b2c-hero__title,
  body .geo-hero-section__title,
  body .social-media-hero__title,
  body .digital-marketing-page .hero-section__title,
  body .website-development-hero__title {
    font-size: var(--fs-2xl) !important;
    line-height: 1.15 !important;
  }

  body .contact-hero__title {
    font-size: var(--fs-2xl) !important;
  }

  body .brand-design-hero__description,
  body .logistics-hero__description,
  body .b2b-brand-hero__description,
  body .b2b-marketing-hero__description,
  body .geo-hero-section__description,
  body .social-media-hero__description,
  body .digital-marketing-page .hero-section__description,
  body .website-development-hero__description {
    font-size: var(--fs-base) !important;
    line-height: 1.6 !important;
  }

  body .components-section__title,
  body .why-choose-section__title,
  body .marketing-flow-section__title,
  body .vision-section__title,
  body .global-resources__title,
  body .b2c-benefits__title,
  body .website-technology__title,
  body .private-feature-grid__title,
  body .brand-localization__title {
    font-size: var(--fs-2xl) !important;
    line-height: 1.18 !important;
  }
}

@media (min-width: 768px) and (max-width: 920px) {
  body .components-section__title,
  body .why-choose-section__title,
  body .marketing-flow-section__title,
  body .vision-section__title,
  body .global-resources__title,
  body .b2c-benefits__title,
  body .website-technology__title,
  body .private-feature-grid__title,
  body .brand-localization__title {
    font-size: var(--fs-3xl) !important;
    line-height: 1.18 !important;
  }
}

/* Light-touch: keep contact card titles on one line. */
.contact-info-card__title {
  white-space: nowrap !important;
}

/* Light-touch: homepage service cards become links without restyling. */
.service-section a.service-card {
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: block;
  height: 100%;
  text-decoration: none;
}

/* =====================================================================
   Phase 6: design-system normalisation and defect fixes.

   Page-level Nuxt CSS chunks are injected at runtime AFTER this file
   (verified: sorvo-theme.css is sheet #17, index.*.css is #18), so
   !important is the mechanism that actually works here, not a shortcut.
   Rules below are grouped by defect and reference the Phase 6 tokens.
   ===================================================================== */

/* --- P0. The CTA eyebrow repeats the headline verbatim on all 13 routes:
   "立即行动！" directly above "立即行动！获取您的专属定制服务".
   Hidden rather than restyled — display:none also drops it from the
   accessibility tree, so the phrase is announced once. */
.site-footer__cta-eyebrow {
  display: none !important;
}

/* --- P1. Hairline weights. Upstream sets font-weight 200/275 on body copy;
   the bundled SC faces only ship 400/500/700, so these render as a
   synthesised or snapped weight and read as washed-out at CJK sizes. */
.hero-preview__eyebrow,
.about-section__description,
.why-choose-section__subtitle,
.why-choose-card__description,
.inquiry-row__description {
  font-weight: var(--fw-regular) !important;
}

.hero-preview__subtitle {
  font-weight: var(--fw-semibold) !important;
}

/* --- P1. Accent-on-dark contrast. The brand cobalt measures 3.89:1 against
   --sorvo-navy, below the 4.5:1 AA floor for text this size. The lighter
   tint measures 5.77:1 and still reads as SORVO blue. */
.vision-section__eyebrow {
  color: var(--sorvo-cobalt-on-dark) !important;
}

/* --- P1. Text set directly on photography. Both the hero and the closing
   CTA put near-black type straight onto a light concrete photograph with
   no scrim, so legibility depended on where the image happened to crop.
   A gradient scrim behind the copy makes it hold at any viewport. */
.hero-preview::after {
  /* Lighter than --scrim-light: the hero photograph is already pale, so this
     only has to lift the type off the concrete, not wash the image out. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.34) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  height: 46%;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.site-footer__cta {
  position: relative !important;
}

.site-footer__cta::before {
  background: var(--scrim-light);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.site-footer__cta-title,
.site-footer__cta-copy,
.site-footer__cta-button {
  position: relative !important;
  z-index: 1 !important;
}

/* With the scrim behind it the subtitle no longer needs to be 68% ink. */
.site-footer__cta-copy {
  color: var(--sorvo-navy) !important;
}

/* --- P1. Hit areas. Buttons sat at 40px and footer links at 21px tall,
   both under the 44px comfortable minimum. */
.app-button,
.site-footer__cta-button,
button.min-h-10,
.bg-\[\#2251FF\] {
  min-height: var(--tap-min) !important;
}

/* Footer links were 21px tall inside a column with generous gaps, so each
   row can grow to 44px and the column gap absorbs it — the footer does not
   get taller. */
.site-footer__nav-link,
.site-footer__contact-link {
  align-items: center !important;
  display: flex !important;
  min-height: var(--tap-min) !important;
}

.site-footer__nav-list {
  gap: 0 !important;
}

/* Carousel controls and social buttons are icon-only, so they get the real
   44px rather than an overlay. */
.testimonials-section__arrow,
.components-section__arrow,
.site-footer__social-link {
  min-height: var(--tap-min) !important;
  min-width: var(--tap-min) !important;
}

/* =====================================================================
   Phase 6 — consistency pass. Everything below snaps to the token scale.
   ===================================================================== */

/* --- Card inside a card. .why-choose-card is a bordered white panel that
   contained a second bordered translucent panel at the same 18px radius,
   so it read as a doubled outline. The inner element keeps its layout
   role and loses its surface. */
.why-choose-card__inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- The closing CTA was a 56px-radius panel wrapping a square-cornered
   video, leaving a visible seam along the top edge. Both now sit on the
   scale and the media inherits the panel's corners. */
.site-footer__cta {
  border-radius: var(--r-2xl) !important;
  overflow: hidden !important;
}

.site-footer__cta .sorvo-scene-video,
.site-footer__cta > img {
  border-radius: var(--r-lg) !important;
}

/* --- The client marquee ran hard off both edges, cutting the last wordmark
   mid-letter ("BOSIDENG" read as "BOSIDENC"). A fade mask makes the loop
   read as intentional motion instead of a clipping bug. */
.hero-logos {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  overflow: hidden !important;
}

/* --- Secondary CTA. The markup already distinguishes primary from
   secondary, but the upstream .app-button--outline rule is scoped to a
   component hash this instance does not carry, so both buttons rendered
   as solid blue with no hierarchy. */
.app-button--outline {
  background: var(--sorvo-white) !important;
  border: 1px solid rgba(37, 99, 255, 0.42) !important;
  box-shadow: none !important;
  color: var(--sorvo-cobalt) !important;
}

.app-button--outline:hover:not(:disabled) {
  background: rgba(37, 99, 255, 0.06) !important;
  border-color: var(--sorvo-cobalt) !important;
}

/* --- Footer link grid used fixed 280/320/180px columns, so the third
   column overflowed the viewport at 1440px. Flexible columns cannot. */
.site-footer__nav {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--sp-7) !important;
}

/* --- The channel diagram put every platform logo in full brand colour,
   which overwhelmed SORVO's own palette. Desaturated at rest, true colour
   on hover, so the section reads as one system. */
.marketing-platform__frame {
  border-radius: var(--r-sm) !important;
  filter: saturate(0.15) contrast(0.95);
  transition: filter 0.25s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marketing-platform__frame:hover {
  filter: none;
}