/*
 * Junaimei sitewide palette and interaction system v8.0.
 * One color rail: #FFE1D1 -> #BCE7FB, sampled into semantic roles.
 * Full gradients are rare; white and near-white surfaces carry the layout.
 * Error red is retained only for semantic validation and alerts.
 * Media, image containers and their readability overlays are not targeted.
 */

:root {
  --jnm-track-0: #ffe1d1;
  --jnm-track-1: #f7e2d6;
  --jnm-track-2: #eee3dc;
  --jnm-track-3: #e6e3e1;
  --jnm-track-4: #dee4e6;
  --jnm-track-5: #d5e5eb;
  --jnm-track-6: #cde6f1;
  --jnm-track-7: #c4e6f6;
  --jnm-track-8: #bce7fb;

  /* 用户指定的角色层次 */
  --jnm-brand: var(--jnm-track-7);
  --jnm-brand-hover: var(--jnm-track-8);
  --jnm-brand-subtle: #eef9fe;
  --jnm-page-background: #f7f9fa;
  --jnm-content-surface: #ffffff;
  --jnm-primary-text: #0b1f33;
  --jnm-secondary-text: #40566f;
  --jnm-border: var(--jnm-track-4);

  --jnm-tone-peach: var(--jnm-track-0);
  --jnm-tone-sky: var(--jnm-track-8);
  --jnm-surface-warm: #fff8f4;
  --jnm-surface-warm-wash: #fffbf9;
  --jnm-surface-neutral: var(--jnm-page-background);
  --jnm-surface-cool: var(--jnm-brand-subtle);
  --jnm-surface-cool-wash: #f7fcff;

  --jnm-gradient-site: linear-gradient(128deg, var(--jnm-track-0) 0%, var(--jnm-track-8) 100%);
  --jnm-gradient-warm: linear-gradient(128deg, var(--jnm-track-0) 0%, var(--jnm-track-3) 100%);
  --jnm-gradient-balanced: linear-gradient(128deg, var(--jnm-track-2) 0%, var(--jnm-track-6) 100%);
  --jnm-gradient-cool: linear-gradient(128deg, var(--jnm-track-4) 0%, var(--jnm-track-8) 100%);
  --jnm-gradient-cta: linear-gradient(128deg, var(--jnm-track-1) 0%, var(--jnm-track-4) 52%, var(--jnm-track-6) 100%);
  --jnm-gradient-warm-soft: linear-gradient(128deg, var(--jnm-surface-warm) 0%, #faf9f8 100%);
  --jnm-gradient-balanced-soft: linear-gradient(128deg, var(--jnm-surface-warm-wash) 0%, var(--jnm-surface-cool-wash) 100%);
  --jnm-gradient-cool-soft: linear-gradient(128deg, #f8fafb 0%, var(--jnm-surface-cool) 100%);
  --jnm-gradient-site-soft: var(--jnm-gradient-balanced-soft);
  --jnm-gradient-site-faint: var(--jnm-gradient-balanced-soft);

  --jnm-ink-strong: var(--jnm-primary-text);
  --jnm-ink-secondary: var(--jnm-secondary-text);
  --jnm-accent-ink: #24566f;
  --jnm-line: var(--jnm-border);
  --jnm-canvas: var(--jnm-page-background);
  --jnm-paper: var(--jnm-content-surface);
  --jnm-focus: #24566f;
  --jnm-shadow: 0 16px 34px -22px rgb(11 31 51 / 34%);
  --jnm-shadow-hover: 0 26px 54px -28px rgb(11 31 51 / 34%);
  --jnm-motion-ease: ease-out;
  --jnm-motion-fast: 160ms;
  --jnm-motion-medium: 180ms;
  --jnm-motion-card: 180ms;
  --jnm-motion-media: 200ms;
  --jnm-card-lift: -4px;
  --jnm-image-scale: 1.02;

  /* Compatibility aliases retain route coverage while carrying distinct roles. */
  --jnm-gradient-brand: var(--jnm-gradient-site);
  --jnm-gradient-brand-soft: var(--jnm-gradient-balanced-soft);
  --jnm-gradient-technical: var(--jnm-gradient-cool);
  --jnm-gradient-technical-soft: var(--jnm-gradient-cool-soft);
  --jnm-gradient-story: var(--jnm-gradient-warm);
  --jnm-gradient-story-soft: var(--jnm-gradient-warm-soft);
  --jnm-info: var(--jnm-accent-ink);
}

html.js-enabled {
  scrollbar-color: var(--jnm-tone-sky) #f1f6f8;
}

html.js-enabled body {
  color: var(--jnm-ink-strong);
  background-color: var(--jnm-page-background);
  caret-color: var(--jnm-accent-ink);
}

html.js-enabled main :where(h1, h2, h3) {
  text-wrap: balance;
}

html.js-enabled main :where(p, li) {
  text-wrap: pretty;
}

html.js-enabled :is(
  .jn-metric-value,
  .jnm-lab-table,
  .jnm-report-meta,
  [data-product-spec],
  [data-product-parameter]
) {
  font-variant-numeric: tabular-nums;
}

html.js-enabled ::selection {
  color: var(--jnm-ink-strong);
  background: var(--jnm-tone-sky);
}

html.js-enabled ::-webkit-scrollbar {
  width: 11px;
}

html.js-enabled ::-webkit-scrollbar-track {
  background: #f1f6f8;
}

html.js-enabled ::-webkit-scrollbar-thumb {
  border: 3px solid #f1f6f8;
  border-radius: 999px;
  background: var(--jnm-brand);
}

html.js-enabled :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--jnm-focus) !important;
  outline-offset: 3px !important;
}

html.js-enabled a {
  text-underline-offset: 0.18em;
}

html.js-enabled footer[data-component-file="Footer.tsx"] {
  border-top: 3px solid transparent;
  border-image: var(--jnm-gradient-site) 1;
  color: #ffffff;
  background-color: #071c33 !important;
  background-image: none !important;
}

html.js-enabled footer[data-component-file="Footer.tsx"] :is(a, button):focus-visible {
  outline-color: var(--jnm-tone-sky) !important;
}

/* Header chrome uses the same sky-derived ink and the same active surface. */
html.js-enabled header[data-component-file="Header.tsx"] :is(
  [class^="text-orange-"], [class*=" text-orange-"],
  [class^="text-yellow-"], [class*=" text-yellow-"],
  [class^="text-green-"], [class*=" text-green-"],
  [class^="text-cyan-"], [class*=" text-cyan-"],
  [class^="text-blue-"], [class*=" text-blue-"],
  [class^="text-indigo-"], [class*=" text-indigo-"],
  [class^="text-violet-"], [class*=" text-violet-"],
  [class^="text-purple-"], [class*=" text-purple-"],
  [class^="text-pink-"], [class*=" text-pink-"]
) {
  color: var(--jnm-accent-ink) !important;
}

html.js-enabled header[data-component-file="Header.tsx"] [class*="bg-clip-text"] {
  color: var(--jnm-accent-ink) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html.js-enabled :is(
  .junaimei-tiered-nav__link.is-active,
  header[data-component-file="Header.tsx"] nav a[class*="bg-gradient-to-r"]
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
  text-shadow: none !important;
}

html.js-enabled :is(
  .junaimei-tiered-nav__link:hover,
  .junaimei-tiered-nav__item:focus-within > .junaimei-tiered-nav__link,
  .junaimei-tiered-nav__item.is-open > .junaimei-tiered-nav__link
) {
  color: var(--jnm-accent-ink) !important;
  text-shadow: none !important;
}

html.js-enabled .junaimei-tiered-nav__link::after,
html.js-enabled .junaimei-tiered-nav__sublink::before {
  background: var(--jnm-tone-sky) !important;
}

@media (max-width: 1023.98px) {
  html.js-enabled :is(.junaimei-tiered-nav__panel, .junaimei-tiered-nav__subpanel) {
    border-left-color: var(--jnm-line) !important;
  }
}

/* Heroes select different ranges from the approved rail. */
html.js-enabled main[data-component-file="Home.tsx"] > section:first-child {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-0) !important;
  background-image: var(--jnm-gradient-brand) !important;
}

html.js-enabled :is(
  main[data-jnm-external-route-host][data-owner="solution"] > article.jnm-lab[data-route^="/solution"] > .jnm-lab-hero,
  main[data-jnm-external-route-host][data-owner="solution"] .jnm-lab-hero,
  .jnm-solutions > .solution-hero,
  main[data-component-file="Products.tsx"] > section:first-child,
  .academy-hub__hero,
  .academy-category-hero-unified,
  .coating-library-hero,
  main[data-owner="technical-editorial"][data-stable-editorial-route] > .stable-technical-academy-hero,
  main[data-jnm-external-route-host][data-owner="technical-faq"] .academy-faq-unified__hero
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-4) !important;
  background-image: var(--jnm-gradient-technical) !important;
}

html.js-enabled :is(
  main[data-component-file="Applications.tsx"] > section:first-child,
  main[data-component-file="News.tsx"]:not([data-technical-academy-native-ready]) > section:first-child,
  main[data-component-file="About.tsx"] > section:first-child,
  [data-stable-editorial-host][data-stable-editorial-route^="about:"] .stable-about-hero
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-0) !important;
  background-image: var(--jnm-gradient-story) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] > section:first-child {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-2) !important;
  background-image: var(--jnm-gradient-balanced) !important;
}

html.js-enabled :is(
  article[data-component-file="ProductDetail.tsx"] > section:first-child,
  section[data-component-file="ProductDetail.tsx"].py-12,
  .coating-detail-hero,
  .jn-content-page:has(.jn-breadcrumb a[href="/products"]) > .jn-content-hero,
  .jn-content-page:has(.jn-breadcrumb a[href="/technical-academy"]) > .jn-content-hero,
  .cms-native-detail[data-cms-page-detail^="/solution/"] > .cms-native-detail__hero,
  .cms-native-detail[data-cms-page-detail^="/products/"] > .cms-native-detail__hero,
  .cms-native-detail[data-cms-page-detail^="/technical-academy/"] > .cms-native-detail__hero,
  main[data-component-file="NewsDetail.tsx"]:has(> section:first-child a[href="/technical-academy"]) > section:first-child
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: none !important;
}

html.js-enabled :is(
  main[data-component-file="ApplicationDetail.tsx"] > section:first-child,
  main[data-component-file="NewsDetail.tsx"] > section:first-child,
  .cms-native-detail:is([data-cms-page-detail^="/applications/"], [data-cms-page-detail^="/project-cases/"]) > .cms-native-detail__hero,
  .cms-native-detail[data-cms-page-detail^="/news/"] > .cms-native-detail__hero
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: none !important;
}

html.js-enabled :is(
  main[data-component-file="Home.tsx"] > section:first-child,
  main[data-component-file="Products.tsx"] > section:first-child,
  article[data-component-file="ProductDetail.tsx"] > section:first-child,
  main[data-component-file="Applications.tsx"] > section:first-child,
  main[data-component-file="ApplicationDetail.tsx"] > section:first-child,
  main[data-component-file="News.tsx"] > section:first-child,
  main[data-component-file="NewsDetail.tsx"] > section:first-child,
  main[data-component-file="About.tsx"] > section:first-child,
  main[data-component-file="Contact.tsx"] > section:first-child,
  .jnm-lab-hero,
  .solution-hero,
  .academy-hub__hero,
  .academy-category-hero-unified,
  .coating-library-hero,
  .coating-detail-hero,
  .stable-technical-academy-hero,
  .academy-faq-unified__hero,
  .stable-about-hero,
  .jn-content-hero,
  .cms-native-detail__hero
) :is(h1, h2, h3) {
  color: var(--jnm-ink-strong) !important;
  text-wrap: balance;
}

html.js-enabled :is(
  main[data-component-file="Home.tsx"] > section:first-child,
  main[data-component-file="Products.tsx"] > section:first-child,
  article[data-component-file="ProductDetail.tsx"] > section:first-child,
  main[data-component-file="Applications.tsx"] > section:first-child,
  main[data-component-file="ApplicationDetail.tsx"] > section:first-child,
  main[data-component-file="News.tsx"] > section:first-child,
  main[data-component-file="NewsDetail.tsx"] > section:first-child,
  main[data-component-file="About.tsx"] > section:first-child,
  main[data-component-file="Contact.tsx"] > section:first-child,
  .jnm-lab-hero,
  .solution-hero,
  .academy-hub__hero,
  .academy-category-hero-unified,
  .coating-library-hero,
  .coating-detail-hero,
  .stable-technical-academy-hero,
  .academy-faq-unified__hero,
  .stable-about-hero,
  .jn-content-hero,
  .cms-native-detail__hero
) p {
  color: var(--jnm-ink-secondary) !important;
}

/* Page background and content surface remain distinct from brand color. */
html.js-enabled :is(
  main[data-owner="solution"] > .jnm-lab[data-route^="/solution"],
  main[data-owner="solution"] > .jnm-lab[data-route^="/solution"] .jnm-lab-content,
  main[data-owner="technical-academy"] .academy-hub,
  main[data-owner="technical-resin"] .coating-library-root,
  main[data-owner="technical-coating"] .coating-library-root,
  [data-stable-editorial-host][data-stable-editorial-route^="about:"],
  main[data-component-file="Contact.tsx"] .jnm-contact-enhanced,
  main[data-component-file="Contact.tsx"] > section:last-child
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled :is(
  .academy-hub__tabs,
  .coating-library-tab-band,
  .stable-guide-index-band,
  .academy-global-switcher,
  .academy-sub-switcher,
  .academy-faq-unified__tabs-band
) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-surface-cool-wash) !important;
  background-image: none !important;
}

html.js-enabled [data-stable-editorial-route^="about:"] .stable-about-tabs-band {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-2) !important;
  background-color: var(--jnm-surface-warm-wash) !important;
  background-image: none !important;
}

html.js-enabled :is(
  main[data-component-file="Products.tsx"] > section:last-child,
  article[data-component-file="ProductDetail.tsx"] #product-parameter-note,
  article[data-component-file="ProductDetail.tsx"] > section:last-child,
  .jn-content-page:has(.jn-breadcrumb a[href="/products"]) > .jn-next,
  .jn-content-page:has(.jn-breadcrumb a[href="/technical-academy"]) > .jn-next,
  main[data-component-file="NewsDetail.tsx"]:has(> section:first-child a[href="/technical-academy"]) > section:last-child
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: var(--jnm-gradient-technical-soft) !important;
}

html.js-enabled :is(
  main[data-component-file="Applications.tsx"] > section:last-child,
  main[data-component-file="ApplicationDetail.tsx"] div[data-component-file="ApplicationDetail.tsx"]:has(> h3 + p + button),
  main[data-component-file="NewsDetail.tsx"] > section:last-child,
  main[data-component-file="About.tsx"] > section:last-child,
  .jnm-closing,
  .stable-certifications__closing,
  .stable-production__closing,
  .stable-company-gallery__closing,
  .stable-clients__closing
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: var(--jnm-gradient-story-soft) !important;
}

html.js-enabled :is(
  main[data-component-file="Contact.tsx"] .stable-quote-process__closing,
  main[data-component-file="Contact.tsx"] .stable-support-process__closing,
  main[data-component-file="Contact.tsx"] .business-partnership-content__support
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-neutral) !important;
  background-image: var(--jnm-gradient-balanced-soft) !important;
}

/* Solution landing and all five solution detail CTAs use a light, readable surface. */
html.js-enabled main[data-jnm-external-route-host][data-owner="solution"]
  > article.jnm-lab[data-route^="/solution"] .jnm-lab-cta {
  color: var(--jnm-ink-strong) !important;
  border: 1px solid var(--jnm-track-6) !important;
  background: var(--jnm-gradient-cta) !important;
  box-shadow: 0 18px 46px -34px rgb(11 31 51 / 34%) !important;
}

html.js-enabled main[data-jnm-external-route-host][data-owner="solution"]
  > article.jnm-lab[data-route^="/solution"] .jnm-lab-cta :is(h2, h3) {
  color: var(--jnm-ink-strong) !important;
}

html.js-enabled main[data-jnm-external-route-host][data-owner="solution"]
  > article.jnm-lab[data-route^="/solution"] .jnm-lab-cta p {
  color: var(--jnm-ink-secondary) !important;
}

html.js-enabled main[data-jnm-external-route-host][data-owner="solution"]
  > article.jnm-lab[data-route^="/solution"] .jnm-lab-cta .jnm-lab-button {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-accent-ink) !important;
  background: var(--jnm-brand-hover) !important;
  box-shadow: 0 10px 24px -14px rgb(11 31 51 / 32%) !important;
}

html.js-enabled main[data-jnm-external-route-host][data-owner="solution"]
  > article.jnm-lab[data-route^="/solution"] .jnm-lab-cta .jnm-lab-button:hover {
  background: var(--jnm-brand) !important;
}

html.js-enabled :is(
  main[data-owner="solution"] > .jnm-lab[data-route^="/solution"] .jnm-lab-cta,
  main[data-component-file="Products.tsx"] > section:last-child,
  main[data-component-file="Applications.tsx"] > section:last-child,
  article[data-component-file="ProductDetail.tsx"] > section:last-child,
  main[data-component-file="ApplicationDetail.tsx"] div[data-component-file="ApplicationDetail.tsx"]:has(> h3 + p + button),
  main[data-component-file="NewsDetail.tsx"] > section:last-child,
  main[data-component-file="About.tsx"] > section:last-child,
  .jn-content-page > .jn-next,
  .jnm-closing,
  .stable-certifications__closing,
  .stable-production__closing,
  .stable-company-gallery__closing,
  .stable-clients__closing,
  main[data-component-file="Contact.tsx"] .stable-quote-process__closing,
  main[data-component-file="Contact.tsx"] .stable-support-process__closing,
  main[data-component-file="Contact.tsx"] .business-partnership-content__support
) :is(h2, h3, p) {
  color: var(--jnm-ink-strong) !important;
}

/* Home keeps its factory media layer; only component-owned surfaces change. */
html[data-jnm-home-product-ui].js-enabled :is(
  .jn-loop-intro,
  .jn-evidence
) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-selector {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-actions {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: var(--jnm-gradient-balanced-soft) !important;
}

html[data-jnm-home-product-ui].js-enabled .jnm-system-strip-v2 {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-neutral) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-report-meta {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-2) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled :is(.jn-scenarios, .jn-cases) {
  color: var(--jnm-ink-strong);
  background-color: var(--jnm-paper);
  background-image: none;
}

html[data-jnm-home-product-ui].js-enabled :is(
  .jn-audience-link,
  .jn-scenario,
  .jn-model,
  .jn-metric,
  .jn-case
) {
  border: 1px solid var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled :is(
  .jn-audience-link,
  .jn-scenario,
  .jn-model,
  .jn-metric,
  .jn-case
):hover {
  border-color: var(--jnm-brand-hover) !important;
  background-color: var(--jnm-surface-cool-wash) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jnm-layer-card-v2 {
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-scenario {
  --accent: var(--jnm-accent-ink) !important;
}

html[data-jnm-home-product-ui].js-enabled :is(
  .jn-scenario-index,
  .jn-scenario svg,
  .jn-model-code,
  .jn-model .jn-model-action,
  .jn-metric-value,
  .jn-case > span,
  .jn-audience-link:hover
) {
  color: var(--jnm-accent-ink) !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-audience-icon {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-7) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-audience-link + .jn-audience-link .jn-audience-icon {
  background-color: var(--jnm-track-1) !important;
}

/* Route-safe action controls. Light surfaces always use dark readable text. */
html.js-enabled main :is(a, button)[class*="bg-gradient-to-"]:not(:has(img, picture, video, iframe)):not([class*="from-gray-"]):not([class*="from-black"]) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand) !important;
  background-image: none !important;
  box-shadow: 0 10px 24px -20px rgb(11 31 51 / 42%) !important;
}

html.js-enabled main :is(a, button)[class*="bg-gradient-to-"]:not(:has(img, picture, video, iframe)):not([class*="from-gray-"]):not([class*="from-black"]):hover {
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
}

html.js-enabled main :is(
  div[class*="bg-gradient-to-"]:not([class*="absolute"]),
  div[class*="bg-gradient-to-"][class*="rounded-full"],
  span[class*="bg-gradient-to-"]
):not(:has(img, picture, video, iframe)):not([class*="from-gray-"]):not([class*="from-black"]) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-track-4) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.js-enabled main :is(
  div[class*="bg-gradient-to-"]:not([class*="absolute"]),
  div[class*="bg-gradient-to-"][class*="rounded-full"],
  span[class*="bg-gradient-to-"]
):not([class*="from-gray-"]):not([class*="from-black"]) > :is(svg, span) {
  color: var(--jnm-ink-strong) !important;
}

html.js-enabled :is(header, main) [class*="bg-clip-text"] {
  color: var(--jnm-accent-ink) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html.js-enabled :is(
  main[data-component-file="Home.tsx"] > section:first-child a:first-child,
  main[data-component-file="Home.tsx"] .jn-action-links a:first-child,
  main[data-owner="solution"] .jnm-lab-button:not(.jnm-lab-button--quiet),
  .jn-content-actions a:first-child
) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
  box-shadow: var(--jnm-shadow) !important;
}

html.js-enabled main[data-component-file="Home.tsx"] > section:first-child a:first-child {
  background-color: var(--jnm-track-0) !important;
  background-image: var(--jnm-gradient-brand) !important;
}

html[data-jnm-home-product-ui].js-enabled main[data-component-file="Home.tsx"] > section:first-child a:last-child,
html[data-jnm-home-product-ui].js-enabled .jn-action-links a:nth-child(n + 2),
html.js-enabled main[data-owner="solution"] .jnm-lab-button--quiet {
  color: var(--jnm-accent-ink) !important;
  border-color: var(--jnm-tone-sky) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--jnm-line) !important;
}

html.js-enabled :is(.stable-compact-contact__actions, .jnm-trust .jnm-actions) a:first-child,
html.js-enabled .jnm-trust aside > a {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand) !important;
  background-image: none !important;
}

html.js-enabled :is(.stable-compact-contact__actions, .jnm-trust .jnm-actions) a:nth-child(n + 2) {
  color: var(--jnm-accent-ink) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-action-links a:hover {
  color: #ffffff !important;
  background-color: var(--jnm-accent-ink) !important;
  background-image: none !important;
}

/* Interactive states injected by route runtimes. */
html.js-enabled :is(
  main[data-owner="solution"] .jnm-lab-nav button[aria-current="true"],
  main[data-owner="solution"] .jnm-lab-nav button[aria-pressed="true"],
  main[data-owner="solution"] .jnm-layers-button[aria-pressed="true"],
  .stable-guide-index-nav :is(a, button).is-active
) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.js-enabled main[data-owner="solution"] > .jnm-lab[data-route^="/solution"] {
  --lab-page-accent: var(--jnm-accent-ink) !important;
  --lab-page-strong: var(--jnm-accent-ink) !important;
  --lab-blue: var(--jnm-accent-ink) !important;
  --lab-orange: var(--jnm-accent-ink) !important;
  --lab-wash: var(--jnm-tone-sky) !important;
  --lab-warm: var(--jnm-tone-peach) !important;
  --lab-line: var(--jnm-line) !important;
}

html.js-enabled main[data-owner="solution"] > .jnm-lab[data-route^="/solution"] .jnm-lab-content [id] {
  --lab-module-accent: var(--jnm-accent-ink) !important;
  --lab-module-surface: var(--jnm-tone-sky) !important;
}

html.js-enabled main[data-owner="solution"] .jnm-layers-button {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled main[data-owner="solution"] .jnm-lab-table thead {
  color: #ffffff !important;
  background-color: var(--jnm-accent-ink) !important;
  background-image: none !important;
}

html.js-enabled body main[data-jnm-external-route-host][data-owner^="technical-"] :is(
  .academy-hub__tabs,
  .coating-library-tabs,
  .academy-faq-unified__tabs,
  .academy-global-tabs,
  section[data-technical-faq-tabs="true"] nav
) a:is(.is-active, [aria-current="page"]) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.js-enabled body main[data-owner="technical-academy"] .academy-hub__card .academy-hub__body,
html.js-enabled body main[data-owner^="technical-"] .coating-library-card-body {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled :is(
  .coating-detail-body > section,
  .coating-detail-note,
  .coating-related,
  .cms-faq-card
) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled :is(
  .academy-hub__read,
  .academy-hub__label,
  .coating-library-read,
  .coating-library-meta span:first-child,
  .coating-detail-label,
  .coating-detail-back,
  .coating-related [role="link"] > span
) {
  color: var(--jnm-accent-ink) !important;
}

html.js-enabled .academy-faq-unified :is([data-technical-faq-toggle], .cms-faq-toggle) > div > span:first-child {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-7) !important;
  background-image: none !important;
}

/* The unified FAQ renderer nests the icon well inside the button label span. */
html.js-enabled body #root
main[data-jnm-external-route-host][data-owner="technical-faq"]
.academy-faq-unified button.cms-faq-toggle
> span:first-child > span:first-child {
  color: var(--jnm-ink-strong) !important;
  background: var(--jnm-track-7) !important;
  box-shadow: inset 0 0 0 1px var(--jnm-track-8) !important;
}

html.js-enabled body [data-stable-editorial-host][data-stable-editorial-route^="about:"] .stable-about-tabs a.is-active,
html.js-enabled .academy-global-tabs a.is-active,
html.js-enabled .academy-faq-unified__tabs a.is-active {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-track-0) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.js-enabled :is(
  [data-stable-editorial-route^="about:"] .jnm-kicker,
  [data-stable-editorial-route^="about:"] .jnm-factory__index,
  [data-stable-editorial-route^="about:"] .jnm-capacity strong
) {
  color: var(--jnm-accent-ink) !important;
}

html.js-enabled [data-stable-editorial-route="about:/about/junaimei"] .jnm-lead__copy {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: none !important;
}

html.js-enabled [data-stable-editorial-route="about:/about/junaimei"] .jnm-factory:nth-child(2) {
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled [data-stable-editorial-route="about:/about/junaimei"] .jnm-lead__visual {
  background-color: #071c33 !important;
  background-image: none !important;
}

html.js-enabled :is(.stable-quote-step, .stable-support-step, .business-partnership-mode) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled :is(.stable-company-profile__product, .stable-certifications__metric) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-2) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: none !important;
}

html.js-enabled :is(.stable-company-profile__advantage:first-child, .stable-clients__mode) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-6) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: none !important;
}

html.js-enabled :is(.stable-quote-step__number, .stable-support-step__number) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-6) !important;
  background-image: none !important;
}

html.js-enabled #root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"]:is(
  [aria-current="page"],
  .is-active,
  [class*="bg-gradient-to-r"]
) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] button[type="submit"] {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
  box-shadow: var(--jnm-shadow) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] .jnm-intro {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] .jnm-audience {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-6) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: none !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] .jnm-project-note {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-2) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: none !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] .jnm-pills > * {
  color: var(--jnm-accent-ink) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] > section:last-child > div > .grid > div:last-child {
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--jnm-line) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--jnm-accent-ink) !important;
  box-shadow: 0 0 0 3px rgb(188 231 251 / 58%) !important;
}

/* Utility fallbacks respect the role hierarchy and avoid saturated page-sized blocks. */
html.js-enabled :is(header, main) :is(
  [class^="text-orange-"], [class*=" text-orange-"],
  [class^="text-yellow-"], [class*=" text-yellow-"],
  [class^="text-green-"], [class*=" text-green-"],
  [class^="text-emerald-"], [class*=" text-emerald-"],
  [class^="text-cyan-"], [class*=" text-cyan-"],
  [class^="text-blue-"], [class*=" text-blue-"],
  [class^="text-indigo-"], [class*=" text-indigo-"],
  [class^="text-violet-"], [class*=" text-violet-"],
  [class^="text-purple-"], [class*=" text-purple-"],
  [class^="text-pink-"], [class*=" text-pink-"]
) {
  color: var(--jnm-accent-ink) !important;
}

html.js-enabled main :is(
  [class^="bg-orange-"], [class*=" bg-orange-"],
  [class^="bg-yellow-"], [class*=" bg-yellow-"],
  [class^="bg-pink-"], [class*=" bg-pink-"]
):not(:has(img, picture, video, iframe)) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-warm) !important;
  background-image: none !important;
}

html.js-enabled main :is(
  [class^="bg-green-"], [class*=" bg-green-"],
  [class^="bg-emerald-"], [class*=" bg-emerald-"]
):not(:has(img, picture, video, iframe)) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-neutral) !important;
  background-image: none !important;
}

html.js-enabled main :is(
  [class^="bg-cyan-"], [class*=" bg-cyan-"],
  [class^="bg-blue-"], [class*=" bg-blue-"],
  [class^="bg-indigo-"], [class*=" bg-indigo-"],
  [class^="bg-violet-"], [class*=" bg-violet-"],
  [class^="bg-purple-"], [class*=" bg-purple-"]
):not(:has(img, picture, video, iframe)) {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-surface-cool) !important;
  background-image: none !important;
}

html.js-enabled :is(header, main) :is(
  [class^="border-orange-"], [class*=" border-orange-"],
  [class^="border-yellow-"], [class*=" border-yellow-"],
  [class^="border-green-"], [class*=" border-green-"],
  [class^="border-emerald-"], [class*=" border-emerald-"],
  [class^="border-cyan-"], [class*=" border-cyan-"],
  [class^="border-blue-"], [class*=" border-blue-"],
  [class^="border-indigo-"], [class*=" border-indigo-"],
  [class^="border-violet-"], [class*=" border-violet-"],
  [class^="border-purple-"], [class*=" border-purple-"],
  [class^="border-pink-"], [class*=" border-pink-"]
) {
  border-color: var(--jnm-line) !important;
}

/* Functional status colors remain semantic exceptions to the decorative rail. */
html.js-enabled main :is([role="status"], [data-status="success"]) {
  color: #166534 !important;
  border-color: #bbf7d0 !important;
  background-color: #f0fdf4 !important;
  background-image: none !important;
}

html.js-enabled main :is([role="status"], [data-status="success"]) :is(
  [class^="text-green-"], [class*=" text-green-"],
  [class^="text-emerald-"], [class*=" text-emerald-"]
) {
  color: #166534 !important;
}

/* Runtime CMS enhancements contain inline rainbow styles; keep their media intact. */
html.js-enabled [data-seo-enhancement]:not([data-seo-enhancement="breadcrumb"]) > :first-child:not(:has(img, picture, video)) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-track-6) !important;
  background-image: none !important;
}

html.js-enabled [data-seo-enhancement]:not([data-seo-enhancement="breadcrumb"]) :is(
  article,
  li,
  th,
  td,
  div
)[style*="gradient"]:not(:has(img, picture, video)) {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html.js-enabled [data-seo-enhancement]:not([data-seo-enhancement="breadcrumb"]) :is(a, button, [role="link"]) {
  color: var(--jnm-accent-ink) !important;
  border-color: var(--jnm-line) !important;
}

html.js-enabled .stable-company-news-card__tag {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-1) !important;
  background-image: none !important;
}

html.js-enabled .stable-company-news-card a {
  color: var(--jnm-accent-ink) !important;
}

/* Final shared accents: support launcher and Home heading marker. */
html.js-enabled body div.w-12.h-12.bg-gradient-to-br.from-blue-500.to-purple-600 {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-brand-hover) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled .jn-loop-heading::after {
  background-image: var(--jnm-gradient-balanced) !important;
}

html[data-jnm-home-product-ui].js-enabled main[data-component-file="Home.tsx"] > section:first-child::before {
  background-image:
    radial-gradient(circle at 68% 30%, rgb(196 230 246 / 44%), transparent 30%),
    linear-gradient(90deg, rgb(255 248 244 / 94%), rgb(238 249 254 / 88%)) !important;
}

html[data-jnm-home-product-ui].js-enabled main[data-component-file="Home.tsx"] > section:first-child h2::after {
  background-image: var(--jnm-gradient-balanced) !important;
}

html[data-jnm-home-product-ui].js-enabled body #root .jn-audience-link {
  border-color: var(--jnm-line) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
}

html[data-jnm-home-product-ui].js-enabled body #root .jn-audience-link::before {
  background-image: radial-gradient(
    circle,
    rgb(188 231 251 / 34%),
    rgb(255 225 209 / 12%) 38%,
    transparent 68%
  ) !important;
}

html[data-jnm-home-product-ui].js-enabled main[data-component-file="Home.tsx"] > section[data-md-id="src/pages/Home.tsx:118:8"] {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-track-2) !important;
  background-image: var(--jnm-gradient-balanced) !important;
}

html[data-jnm-home-product-ui].js-enabled main[data-component-file="Home.tsx"] > section[data-md-id="src/pages/Home.tsx:118:8"] :is(h2, h3, p, span, strong, div) {
  color: var(--jnm-ink-strong) !important;
}

html.js-enabled footer[data-component-file="Footer.tsx"]::before {
  background-image: none !important;
}

/* React About fallback: its former dark CTA now sits on the light source. */
html.js-enabled main[data-component-file="About.tsx"] > section:last-child :is(h2, p) {
  color: var(--jnm-ink-strong) !important;
}

/* Contact closing panels: pair every light surface with explicit readable copy. */
html.js-enabled main[data-component-file="Contact.tsx"]
  .business-partnership-content__support .business-partnership-assurances strong,
html.js-enabled main[data-component-file="Contact.tsx"]
  :is(.stable-quote-process__closing, .stable-support-process__closing) > strong {
  color: var(--jnm-ink-strong) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"]
  .business-partnership-content__support .business-partnership-assurances span,
html.js-enabled main[data-component-file="Contact.tsx"]
  :is(.stable-quote-process__closing, .stable-support-process__closing) > span {
  color: var(--jnm-ink-secondary) !important;
}

html.js-enabled main[data-component-file="Contact.tsx"]
  .business-partnership-content__support .business-partnership-assurances li {
  border-color: var(--jnm-line) !important;
}

/* Editorial sibling-card blocks were explicitly removed from article endings. */
html.js-enabled :is(
  section.seo-enhancement[data-seo-enhancement="related-news"],
  main[data-owner="technical-coating"] section.coating-related,
  main[data-owner="technical-resin"] section.coating-related
) {
  display: none !important;
}

/* Construction records: one readable media-and-copy system for photos, films and tests. */
html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-photos[data-case-story-ready="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 34px !important;
  margin-top: 36px !important;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: stretch;
  gap: 0;
  min-height: 360px;
  overflow: hidden;
  color: var(--jnm-ink-strong);
  border: 1px solid var(--jnm-line);
  border-radius: 20px;
  background: var(--jnm-paper);
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-film.case-story,
html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story--test {
  width: 100%;
  margin-top: 30px;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-photos > .case-story:nth-child(even) .case-story__media {
  order: 2;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__media,
html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__media > a {
  display: block;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px;
  max-height: 520px;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
  background: var(--jnm-surface-neutral) !important;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__media video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  max-height: 540px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: var(--jnm-ink-strong) !important;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 52px);
  background: var(--jnm-gradient-cool-soft);
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-photos > .case-story:nth-child(even) .case-story__copy {
  background: var(--jnm-gradient-warm-soft);
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__copy h3 {
  margin: 0 0 16px;
  color: var(--jnm-ink-strong);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.32;
  letter-spacing: normal;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__body {
  max-width: 54ch;
  margin: 0;
  color: var(--jnm-ink-secondary);
  font-size: 16px;
  line-height: 1.85;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__note {
  max-width: 54ch;
  margin: 24px 0 0;
  padding-top: 18px;
  color: var(--jnm-accent-ink);
  border-top: 1px solid var(--jnm-line);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.75;
}

html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
  .case-records .case-story__note + .case-story__note {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* A visible, high-contrast back-to-top control over both white pages and navy footer. */
html.js-enabled body .jnm-back-top-v2 {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  color: var(--jnm-ink-strong) !important;
  border: 1px solid rgb(255 255 255 / 92%) !important;
  border-radius: 17px !important;
  background-color: var(--jnm-track-8) !important;
  background-image: var(--jnm-gradient-site) !important;
  box-shadow:
    0 0 0 1px rgb(11 31 51 / 22%),
    0 18px 38px -14px rgb(11 31 51 / 56%) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

html.js-enabled body .jnm-back-top-v2:hover {
  color: var(--jnm-ink-strong) !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
  box-shadow:
    0 0 0 2px var(--jnm-track-8),
    0 22px 46px -16px rgb(11 31 51 / 58%) !important;
}

html.js-enabled body .jnm-back-top-v2:focus-visible {
  outline: 3px solid var(--jnm-track-8) !important;
  outline-offset: 4px !important;
}

/* Route hold: the footer cannot occupy the viewport while the FAQ renderer is empty. */
html.jnm-academy-route-pending body main[data-component-file="layout.tsx"] {
  min-height: calc(100svh - 80px) !important;
}

html.jnm-academy-route-pending body main[data-jnm-external-route-host][data-owner^="technical-"],
html.jnm-academy-route-pending body main[data-jnm-external-route-host].jnm-react-outlet-suspended {
  display: block !important;
  min-height: calc(100svh - 80px) !important;
}

html.jnm-academy-route-pending body footer[data-component-file="Footer.tsx"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Restrained pointer feedback for interactive cards that did not already own motion. */
html.js-enabled body [data-jnm-motion-card="true"] {
  transform-origin: center;
  transition:
    transform var(--jnm-motion-card) var(--jnm-motion-ease),
    opacity var(--jnm-motion-fast) ease !important;
}

html.js-enabled body [data-jnm-motion-card="true"][data-jnm-motion-media="true"] img {
  transition:
    transform var(--jnm-motion-media) var(--jnm-motion-ease),
    opacity var(--jnm-motion-fast) ease !important;
}

html.js-enabled body [data-jnm-motion-action="true"] {
  transition:
    transform var(--jnm-motion-fast) var(--jnm-motion-ease),
    opacity var(--jnm-motion-fast) ease !important;
}

html.js-enabled body [data-jnm-motion-action="true"] :is(svg, [aria-hidden="true"]) {
  transition: transform var(--jnm-motion-fast) var(--jnm-motion-ease) !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js-enabled body [data-jnm-motion-card="true"]:is(a, button):is(:hover, :focus-visible),
  html.js-enabled body [data-jnm-motion-card="true"]:has(:is(a, button):is(:hover, :focus-visible)) {
    transform: translateY(var(--jnm-card-lift)) !important;
    border-color: var(--jnm-track-8) !important;
    box-shadow: var(--jnm-shadow-hover) !important;
  }

  html.js-enabled body .jn-model[data-jnm-motion-card="true"]:is(:hover, :focus-visible),
  html.js-enabled body .jn-model[data-jnm-motion-card="true"]:has(:is(a, button):is(:hover, :focus-visible)) {
    transform: translateX(4px) !important;
  }

  html.js-enabled body [data-jnm-motion-card="true"][data-jnm-motion-media="true"]
    :is(a, button):is(:hover, :focus-visible) img,
  html.js-enabled body [data-jnm-motion-card="true"][data-jnm-motion-media="true"]
    :is(:hover, :focus-visible):is(a, button) img,
  html.js-enabled body [data-jnm-motion-card="true"][data-jnm-motion-media="true"]
    :has(:is(a, button):is(:hover, :focus-visible)) img {
    transform: scale(var(--jnm-image-scale)) !important;
  }

  html.js-enabled body [data-jnm-motion-card="true"]:is(a, button):is(:hover, :focus-visible)
    :is(h2, h3, strong),
  html.js-enabled body [data-jnm-motion-card="true"]:has(:is(a, button):is(:hover, :focus-visible))
    :is(h2, h3, strong) {
    color: var(--jnm-accent-ink) !important;
  }

  html.js-enabled body [data-jnm-motion-action="true"]:is(:hover, :focus-visible) {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px -18px rgb(11 31 51 / 48%) !important;
  }

  html.js-enabled body [data-jnm-motion-action="true"]:active {
    transform: translateY(1px) scale(.985) !important;
    transition-duration: 90ms !important;
  }

  html.js-enabled body [data-jnm-motion-action="true"]:is(:hover, :focus-visible)
    :is(svg, [aria-hidden="true"]) {
    transform: translateX(4px) !important;
  }
}

@media (max-width: 860px) {
  html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
    .case-records .case-story {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
    .case-records .case-photos > .case-story:nth-child(even) .case-story__media {
    order: initial;
  }

  html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
    .case-records .case-story__media img,
  html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
    .case-records .case-story__media video {
    min-height: 240px !important;
    max-height: 420px !important;
  }

  html.js-enabled main.cms-native-detail[data-cms-page-detail^="/project-cases/"]
    .case-records .case-story__copy {
    padding: 28px 22px;
  }

  html.js-enabled body .jnm-back-top-v2 {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html.js-enabled body [data-jnm-motion-card="true"],
  html.js-enabled body [data-jnm-motion-card="true"][data-jnm-motion-media="true"] img,
  html.js-enabled body [data-jnm-motion-action="true"],
  html.js-enabled body [data-jnm-motion-action="true"] :is(svg, [aria-hidden="true"]) {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-enabled body [data-jnm-motion-card="true"],
  html.js-enabled body [data-jnm-motion-card="true"] *,
  html.js-enabled body [data-jnm-motion-action="true"],
  html.js-enabled body [data-jnm-motion-action="true"] * {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Static editorial media keep their geometry; interactive cards use the light motion layer above. */
html.js-enabled :is(
  .jnm-lab-hero__media,
  .jnm-lab-system__figure,
  .jnm-lab-stack,
  .coating-detail-cover,
  .coating-detail-body > section,
  .coating-detail-summary,
  .coating-detail-note,
  .stable-guide-media,
  .stable-editorial-feature > img,
  .stable-editorial-gallery img,
  .stable-contact-scene,
  .stable-quote-step,
  .stable-support-step,
  .stable-partnership-panel__card,
  .stable-compact-contact__item,
  .business-partnership-mode,
  .stable-quote-process__closing,
  .stable-support-process__closing,
  .business-partnership-content__support,
  .stable-certifications__closing,
  .stable-company-gallery__hero,
  .stable-company-gallery__card,
  .stable-company-gallery__closing,
  .stable-clients__hero,
  .stable-clients__scene,
  .stable-clients__closing,
  .stable-clients__mode,
  .stable-company-profile__factory,
  .stable-company-profile__product,
  .stable-company-profile__tech article,
  .stable-company-profile__advantage,
  .stable-company-profile__application,
  .stable-company-profile__capacity,
  .stable-company-profile__fact,
  .stable-production__photo,
  .stable-production__card,
  .stable-production__equipment,
  .stable-production__plant,
  .stable-production__delivery,
  .stable-production__metric,
  .stable-production__closing,
  .stable-certifications__chapter,
  .stable-certification-card,
  .stable-certification-card__preview
) {
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.js-enabled :is(
  .jnm-lab-hero__media,
  .jnm-lab-system__figure,
  .jnm-lab-stack,
  .coating-detail-cover,
  .stable-guide-media,
  .stable-editorial-feature,
  .stable-editorial-gallery,
  .stable-contact-scene,
  .stable-company-gallery__hero,
  .stable-company-gallery__card,
  .stable-clients__hero,
  .stable-clients__scene,
  .stable-company-profile__factory,
  .stable-production__photo,
  .stable-certifications__chapter,
  .stable-certification-card
) img {
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.js-enabled :is(
  .coating-detail-body > section h2,
  .stable-company-profile__product h3,
  .stable-company-profile__tech h3,
  .stable-company-profile__advantage h3,
  .stable-company-profile__application h3,
  .stable-company-profile__capacity strong,
  .stable-company-profile__fact strong,
  .stable-production__card h3,
  .stable-production__equipment h3,
  .stable-production__delivery h3,
  .stable-production__plant strong,
  .stable-production__metric strong,
  .stable-certification-card h3
) {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.js-enabled .coating-detail-body > section h2::after {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.js-enabled :is(
  .stable-company-profile__product,
  .stable-company-profile__tech article,
  .stable-company-profile__advantage,
  .stable-company-profile__application,
  .stable-production__card,
  .stable-production__equipment,
  .stable-production__delivery
)::after {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

html.js-enabled :is(.academy-hub__body strong, .coating-library-card-title) {
  transform: none !important;
  transition: none !important;
}

html.js-enabled :is(.academy-hub__read svg, .coating-library-read svg) {
  transition: transform var(--jnm-motion-fast) ease-out !important;
}

/* Runtime styles load after the base sheet; these exact roots keep the final controls consistent. */
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 {
  color: var(--jnm-ink-strong) !important;
  border-color: rgb(255 255 255 / 92%) !important;
  background: var(--jnm-gradient-site) !important;
  box-shadow:
    0 0 0 1px rgb(11 31 51 / 24%),
    0 18px 38px -14px rgb(11 31 51 / 58%) !important;
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-8) !important;
  background: var(--jnm-paper) !important;
  box-shadow:
    0 0 0 2px var(--jnm-track-8),
    0 22px 46px -16px rgb(11 31 51 / 60%) !important;
}

/* Project-case listing: keep the existing title and summary inside a visible editorial panel. */
html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-cms-page-card][data-jnm-case-card-layout="true"] {
  display: block !important;
  min-height: 0 !important;
  padding: 42px 0 !important;
  overflow: visible !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
> a.project-case-list-link {
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
  grid-template-rows: minmax(400px, auto);
  min-height: 400px;
  height: auto !important;
  overflow: hidden !important;
  color: var(--jnm-ink-strong) !important;
  text-decoration: none !important;
  background: var(--jnm-paper) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 52px -34px rgb(11 31 51 / 42%) !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
> a.project-case-list-link > img {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 400px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
> a.project-case-list-link > .project-case-list-copy {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 400px;
  position: static !important;
  padding: clamp(34px, 4vw, 58px) !important;
  color: var(--jnm-ink-strong) !important;
  background: var(--jnm-surface-cool) !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
> a.project-case-list-link > img {
  grid-column: 2;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
> a.project-case-list-link > .project-case-list-copy {
  grid-column: 1;
  background: var(--jnm-surface-warm) !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
.project-case-list-copy h3 {
  margin: 0 !important;
  color: var(--jnm-ink-strong) !important;
  font-size: clamp(26px, 2vw, 36px) !important;
  font-weight: 760 !important;
  line-height: 1.24 !important;
  letter-spacing: normal;
  white-space: normal !important;
  text-wrap: balance;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
.project-case-list-copy p {
  max-width: 34em;
  margin: 18px 0 0 !important;
  color: var(--jnm-ink-secondary) !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
.project-case-read {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: 28px;
  color: var(--jnm-accent-ink) !important;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.4;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
.project-case-read > span {
  transition: transform var(--jnm-motion-fast) var(--jnm-motion-ease);
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]
> a.project-case-list-link:focus-visible {
  outline: 3px solid var(--jnm-focus) !important;
  outline-offset: 5px !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]
  > a.project-case-list-link:hover .project-case-read > span {
    transform: translateX(4px);
  }
}

@media (max-width: 820px) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] {
    padding: 24px 0 !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]
  > a.project-case-list-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 280px auto;
    min-height: 0;
    height: auto !important;
    border-radius: 20px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]
  > a.project-case-list-link > img,
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
  > a.project-case-list-link > img {
    grid-column: 1;
    grid-row: 1;
    height: 280px !important;
    min-height: 280px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]
  > a.project-case-list-link > .project-case-list-copy,
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
  > a.project-case-list-link > .project-case-list-copy {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 30px 24px 34px !important;
  }
}

@media (prefers-contrast: more) {
  html.js-enabled :is(a, button, [tabindex]):focus-visible,
  html[data-jnm-home-product-ui].js-enabled :is(.jn-audience-link, .jn-scenario, .jn-model, .jn-metric, .jn-case) {
    border-color: var(--jnm-ink-strong) !important;
  }
}

/* jnm-compact-content-cards-r1:start */
/* Scoped compact layouts for project cases and the technical academy hub. */

/* Project cases: compact, consistently cropped cards. */
html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"] .project-case-grid {
  display: grid !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  gap: 20px !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 212px minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 348px !important;
  overflow: hidden !important;
  border: 1px solid var(--jnm-line, #d8e5ec) !important;
  border-radius: 16px !important;
  background: var(--jnm-paper, #fff) !important;
  box-shadow: none !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link > img,
html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
> a.project-case-list-link > img {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  height: 212px !important;
  min-height: 212px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link > .project-case-list-copy,
html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
> a.project-case-list-link > .project-case-list-copy {
  grid-area: 2 / 1 !important;
  display: flex !important;
  min-height: 0 !important;
  padding: 18px 18px 20px !important;
  justify-content: flex-start !important;
  background: var(--jnm-paper, #fff) !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] .project-case-list-copy h3 {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] .project-case-list-copy p {
  display: -webkit-box !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-jnm-case-card-layout="true"] .project-case-read {
  margin-top: auto !important;
  padding-top: 14px;
  font-size: 13px !important;
}

@media (min-width: 1200px) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"] .project-case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"] .project-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link {
    grid-template-rows: 194px minmax(0, 1fr) !important;
    min-height: 326px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link > img,
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
  > a.project-case-list-link > img {
    height: 194px !important;
    min-height: 194px !important;
  }
}

@media (max-width: 767px) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"] .project-case-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] {
    padding: 0 !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    grid-template-rows: 184px !important;
    height: 184px !important;
    min-height: 184px !important;
    border-radius: 14px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link > img,
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
  > a.project-case-list-link > img {
    grid-area: 1 / 1 !important;
    height: 184px !important;
    min-height: 184px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link > .project-case-list-copy,
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"]:nth-of-type(even)
  > a.project-case-list-link > .project-case-list-copy {
    grid-area: 1 / 2 !important;
    padding: 14px !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] .project-case-list-copy h3 {
    font-size: 16.5px !important;
    line-height: 1.32 !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] .project-case-list-copy p {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] .project-case-read {
    padding-top: 8px;
    font-size: 12px !important;
  }
}

/* Technical academy: compact two-column media cards with a single scan direction. */
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__content {
  width: min(1240px, calc(100% - 64px)) !important;
  padding: 52px 0 88px !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  column-gap: 24px !important;
  row-gap: 20px !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card.is-featured {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--jnm-line, #d8e5ec) !important;
  border-radius: 16px !important;
  background: var(--jnm-paper, #fff) !important;
  box-shadow: none !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card > a,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+3) > a,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+4) > a {
  display: grid !important;
  grid-template-columns: 232px minmax(0, 1fr) !important;
  grid-template-rows: 212px !important;
  height: 212px !important;
  min-height: 212px !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card .academy-hub__image,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+3) .academy-hub__image,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+4) .academy-hub__image {
  order: 1 !important;
  grid-area: 1 / 1 !important;
  width: 232px !important;
  height: 212px !important;
  min-height: 212px !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card .academy-hub__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card .academy-hub__body,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+3) .academy-hub__body,
html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__card:nth-child(4n+4) .academy-hub__body {
  order: 2 !important;
  grid-area: 1 / 2 !important;
  display: flex !important;
  min-width: 0 !important;
  padding: 20px 22px !important;
  background: var(--jnm-paper, #fff) !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__label {
  margin-bottom: 6px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__body strong {
  margin-bottom: 8px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__copy {
  display: -webkit-box !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.js-enabled body #root main[data-owner="technical-academy"]
.academy-hub__read {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px;
  margin-top: auto !important;
  font-size: 14px !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card {
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1),
      box-shadow 220ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  html.js-enabled[data-cases-unfiltered="true"] body #root
  main[data-component-file="Applications.tsx"]
  .project-case-card[data-jnm-case-card-layout="true"] > a.project-case-list-link:hover,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(15, 45, 70, .09) !important;
  }
}

@media (min-width: 641px) and (max-width: 1099px) {
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__content {
    width: min(840px, calc(100% - 40px)) !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card > a,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+3) > a,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+4) > a {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: 194px !important;
    height: 194px !important;
    min-height: 194px !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card .academy-hub__image,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+3) .academy-hub__image,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+4) .academy-hub__image {
    width: 240px !important;
    height: 194px !important;
    min-height: 194px !important;
  }
}

@media (max-width: 640px) {
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__content {
    width: calc(100% - 28px) !important;
    padding: 42px 0 68px !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card > a,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+3) > a,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+4) > a {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card .academy-hub__image,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+3) .academy-hub__image,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+4) .academy-hub__image {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card .academy-hub__body,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+3) .academy-hub__body,
  html.js-enabled body #root main[data-owner="technical-academy"]
  .academy-hub__card:nth-child(4n+4) .academy-hub__body {
    order: 2 !important;
    padding: 18px !important;
  }
}
/* jnm-compact-content-cards-r1:end */

/* jnm-compact-content-cards-r2:start */
html.js-enabled[data-cases-unfiltered="true"] body #root
main[data-component-file="Applications.tsx"]
.project-case-card[data-cms-page-card][data-jnm-case-card-layout="true"] {
  padding: 0 !important;
}
/* jnm-compact-content-cards-r2:end */

/* jnm-back-top-premium-r1:start */
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  overflow: visible !important;
  color: #fff !important;
  border: 1px solid rgb(188 231 251 / 58%) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #2b6e90 0%, #174765 44%, #0b1f33 100%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    0 14px 28px -10px rgb(7 28 51 / 68%) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  isolation: isolate;
  backdrop-filter: none !important;
  transition:
    opacity var(--jnm-motion-fast) ease-out,
    transform var(--jnm-motion-medium) cubic-bezier(.16, 1, .3, 1),
    box-shadow var(--jnm-motion-medium) ease-out !important;
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 > span {
  position: relative;
  display: block;
  width: 18px;
  height: 20px;
  color: currentColor;
  font-size: 0 !important;
  line-height: 0;
  filter: drop-shadow(0 1px 1px rgb(7 28 51 / 24%));
  transition: transform var(--jnm-motion-fast) cubic-bezier(.16, 1, .3, 1);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 > span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 > span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 13px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2::after {
  content: attr(data-jnm-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  z-index: 2;
  width: max-content;
  max-width: 9em;
  padding: 7px 10px;
  color: #fff;
  border: 1px solid rgb(188 231 251 / 22%);
  border-radius: 9px;
  background: #0b1f33;
  box-shadow: 0 10px 24px -12px rgb(7 28 51 / 72%);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(7px, -50%);
  transition:
    opacity var(--jnm-motion-fast) ease-out,
    transform var(--jnm-motion-fast) cubic-bezier(.16, 1, .3, 1);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover {
  color: #fff !important;
  border-color: rgb(188 231 251 / 88%) !important;
  background: linear-gradient(145deg, #327b9e 0%, #1b5272 44%, #102b46 100%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 42%),
    0 18px 34px -11px rgb(7 28 51 / 76%) !important;
  transform: translateY(-3px) !important;
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover > span,
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:focus-visible > span {
  transform: translateY(-2px);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover::after,
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:active {
  transform: translateY(-1px) scale(.96) !important;
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:focus-visible {
  outline: 3px solid var(--jnm-track-8) !important;
  outline-offset: 4px !important;
}

@media (max-width: 860px) {
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2,
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 > span,
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2::after {
    transition: none !important;
  }

  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover,
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:active,
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover > span,
  html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:focus-visible > span {
    transform: none !important;
  }
}
/* jnm-back-top-premium-r1:end */
/* jnm-back-top-premium-r2:start */
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2 > span {
  transform: none !important;
}

html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:hover > span,
html.js-enabled body > button.jnm-back-top-v2.jnm-back-top-v2:focus-visible > span {
  transform: translateY(-2px) !important;
}
/* jnm-back-top-premium-r2:end */
/* jnm-contact-audience-links-r1:start */
html.js-enabled body main[data-component-file="Contact.tsx"] .jnm-pills {
  gap: 12px !important;
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route] {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 39px 10px 15px !important;
  color: var(--jnm-ink-strong) !important;
  border: 1px solid var(--jnm-line) !important;
  border-radius: 14px !important;
  background-color: var(--jnm-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none !important;
  transform: translateY(0);
  transition:
    color var(--jnm-motion-fast) ease-out,
    border-color var(--jnm-motion-fast) ease-out,
    background-color var(--jnm-motion-fast) ease-out,
    box-shadow var(--jnm-motion-medium) ease-out,
    transform var(--jnm-motion-medium) cubic-bezier(.16, 1, .3, 1);
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--jnm-motion-fast) cubic-bezier(.16, 1, .3, 1);
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--jnm-motion-fast) cubic-bezier(.16, 1, .3, 1);
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route="products"] {
  color: var(--jnm-accent-ink) !important;
  border-color: var(--jnm-track-6) !important;
  background-color: var(--jnm-surface-cool-wash) !important;
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route="solution"] {
  color: var(--jnm-ink-strong) !important;
  border-color: var(--jnm-track-2) !important;
  background-color: var(--jnm-surface-warm-wash) !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route]:hover {
    box-shadow: 0 12px 24px -17px rgb(11 31 51 / 58%) !important;
    transform: translateY(-2px);
  }

  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route="products"]:hover {
    border-color: var(--jnm-track-8) !important;
    background-color: var(--jnm-track-8) !important;
  }

  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route="solution"]:hover {
    border-color: var(--jnm-track-0) !important;
    background-color: var(--jnm-track-0) !important;
  }

  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route]:hover::before {
    transform: translate(3px, -50%);
  }

  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route]:hover::after {
    transform: translate(3px, -50%) rotate(45deg);
  }
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route]:focus-visible {
  outline: 3px solid var(--jnm-focus) !important;
  outline-offset: 3px !important;
}

html.js-enabled body main[data-component-file="Contact.tsx"]
.jnm-pills > a[data-jnm-audience-route]:active {
  box-shadow: none !important;
  transform: translateY(0) scale(.98);
}

@media (max-width: 759px) {
  html.js-enabled body main[data-component-file="Contact.tsx"] .jnm-pills {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
  }

  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route] {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (min-width: 560px) and (max-width: 759px) {
  html.js-enabled body main[data-component-file="Contact.tsx"] .jnm-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route],
  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route]::before,
  html.js-enabled body main[data-component-file="Contact.tsx"]
  .jnm-pills > a[data-jnm-audience-route]::after {
    transition: none !important;
  }
}
/* jnm-contact-audience-links-r1:end */

/* jnm-news-detail-header-offset-r1:start */
html.js-enabled #root
main.cms-native-detail[data-cms-page-detail^="/news/"] {
  padding-top: 121px !important;
}
/* jnm-news-detail-header-offset-r1:end */

/* jnm-resin-hero-copy-one-line-r1:start */
@media (min-width: 1024px) {
  html.js-enabled
  main[data-owner="technical-resin"][data-resin-library-view="listing"]
  .resin-library > .coating-library-hero > p {
    max-width: 1120px;
    text-wrap: wrap;
  }
}
/* jnm-resin-hero-copy-one-line-r1:end */