@font-face {
   font-family: "OPPO Sans 4.0";
   src: url(../fonts/oppo-sans-4.0.woff2) format("woff2");
   font-weight: 100 700;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "Gilroy";
   src: url(../fonts/gilroy-regular.woff2) format("woff2");
   font-weight: 400;
   font-display: swap
}

@font-face {
   font-family: "Gilroy";
   src: url(../fonts/gilroy-semibold.woff2) format("woff2");
   font-weight: 600;
   font-display: swap
}

/* Shared design tokens, header, footer, navigation, forms, dialogs and Lenis.
   Figma source measurements are rounded to whole pixels at the 1920 px artboard. */
:root {
   --purple: #3f3279;
   --teal: #4393a0;
   --ink: #667380;
   --pale: #f5f8fd;
   --lavender: #e4e7f7;
   --line: #caced2;
   --white: #fff;
   font-size: clamp(10px, .833333333vw, 16px);
   color-scheme: light
}

* {
   box-sizing: border-box
}

html {
   scroll-padding-top: 7rem
}

body {
   margin: 0;
   color: var(--ink);
   background: #fff;
   font-family: "OPPO Sans 4.0", "OPPO Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
   font-size: 1.375rem;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
p {
   margin: 0
}

h1,
h2,
h3 {
   font-weight: 500
}

h1,
h2 {
   color: var(--purple)
}

h2 {
   font-size: 3.125rem;
   line-height: 1.2
}

h3 {
   font-size: 2.125rem;
   line-height: 1.3
}

a {
   color: inherit;
   text-decoration: none
}

a,
button,
input,
select,
textarea {
   -webkit-tap-highlight-color: transparent
}

button,
input,
select,
textarea {
   font: inherit
}

button,
a,
input,
textarea,
select {
   touch-action: manipulation
}

button {
   cursor: pointer;
   border: 0;
   background: none;
   color: inherit;
   padding: 0
}

img {
   display: block;
   max-width: 100%;
   height: auto
}

button:disabled {
   cursor: wait;
   opacity: .65
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
   outline: 3px solid var(--teal);
   outline-offset: 4px
}

[hidden] {
   display: none !important
}

.container {
   width: 100rem;
   max-width: calc(100% - 5rem);
   margin-inline: auto
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

.skip-link {
   position: fixed;
   left: 1rem;
   top: -10rem;
   z-index: 200;
   background: #fff;
   padding: 1rem
}

.skip-link:focus {
   top: 1rem
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 1.25rem;
   min-height: 3.75rem;
   padding: .75rem 1.5rem;
   background: var(--purple);
   color: #fff;
   border: 1px solid var(--purple);
   border-radius: .375rem;
   font-size: 1.275rem;
   line-height: 1.2;
   transition: background .2s, box-shadow .2s
}

.button span {
   margin-left: auto
}

.button:hover {
   background: #51428c;
   box-shadow: 0 .25rem .75rem #3f327926
}

.button--outline {
   background: transparent;
   color: var(--purple)
}

.button--outline:hover {
   background: var(--teal);
   color: #fff;
   border-color: var(--teal);
}

.button--outline:hover img {
   filter: brightness(0) invert(100%);
}

.button--teal {
   background: var(--teal);
   border-color: var(--teal)
}

.button--teal:hover {
   background: #367d89
}

.button--round {
   border-radius: 4rem;
   border-color: var(--ink);
   color: var(--ink);
   background: transparent;
   font-size: 1.125rem;
   min-height: 3.1875rem
}

.button-row {
   display: flex;
   gap: 1.25rem;
   flex-wrap: wrap
}

.text-link {
   font-size: 1.125rem;
   display: flex;
   gap: 1.2rem;
   align-items: center;
   color: var(--purple)
}

.section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   margin-bottom: 2.5rem
}

.section-heading p {
   margin-top: .75rem
}

.section-content {
   padding: 5.625rem 0 10rem
}

.filter-tabs {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap
}

.filter-tabs button {
   min-width: 12.5rem;
   padding: .75rem 1.5rem;
   min-height: 3.75rem;
   border: 1px solid #a8a6b7;
   border-radius: .375rem;
   font-size: 1.25rem
}

.filter-tabs button.is-active {
   background: var(--purple);
   border-color: var(--purple);
   color: #fff
}

.empty-state {
   padding: 4rem 0;
   text-align: center
}

.breadcrumb {
   font-size: 1.125rem;
   color: var(--purple);
   margin-bottom: 3.25rem
}

.breadcrumb a:hover {
   text-decoration: underline
}

.site-header {
   position: relative;
   z-index: 40;
   height: 3.75rem
}

.site-topbar {
   height: 3.75rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 1.25rem;
   padding: 0 2.5rem;
   background: url(../img/common/site-topbar-background.png) center/cover;
   color: var(--purple);
   font-size: 1.125rem;
   position: relative
}

.site-topbar>a,
.site-miniapp {
   display: flex;
   align-items: center;
   gap: .75rem
}

.site-topbar>a {
   font-size: 1.3125rem;
   font-weight: 600
}

.site-topbar__icon {
   width: 1.5rem;
   max-height: 1.5625rem;
   object-fit: contain
}

.site-miniapp__qr {
   position: absolute;
   right: 2rem;
   top: 3.75rem;
   background: white;
   border-radius: 1rem;
   padding: 1rem;
   box-shadow: 0 1rem 3rem #3f327930
}

.site-miniapp__qr img {
   width: 10rem
}

.site-header__main {
   position: absolute;
   top: 3.75rem;
   left: 0;
   right: 0;
   height: 6.25rem;
   padding: 0 2.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   transition: background .2s, box-shadow .2s
}

.site-header.is-scrolled .site-header__main {
   position: fixed;
   top: 0;
   background: #ffffffed;
   backdrop-filter: blur(14px);
   box-shadow: 0 .3rem 2rem #3f327914
}

.site-logo img {
   width: 15.625rem;
   height: 3.4375rem;
   object-fit: contain
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 3rem;
   color: var(--purple);
   font-size: 1.25rem
}

.site-nav a:hover,
.site-nav a[aria-current=page] {
   color: var(--teal)
}

.site-nav__group {
   position: relative;
   display: flex;
   align-items: center;
   gap: .5rem;
   min-height: 4rem
}

.site-nav__toggle {
   font-size: .9rem;
   text-indent: -9999px;
   width: 0.875rem;
   height: 0.875rem;
   background: url(../img/common/site-nav-toggle-background.svg) center center no-repeat;
   background-size: contain;
   margin-top: 0.25rem;
}

.site-nav__dropdown {
   display: none;
   position: absolute;
   left: -1.5rem;
   top: 100%;
   background: #fff;
   min-width: 13rem;
   padding: 1rem 0;
   border-radius: .75rem;
   box-shadow: 0 1rem 3rem #3f327925
}

.site-nav__dropdown a {
   display: block;
   padding: .65rem 1.5rem;
   white-space: nowrap
}

.site-nav__group:hover .site-nav__dropdown,
.site-nav__group:focus-within .site-nav__dropdown,
.site-nav__group.is-open .site-nav__dropdown {
   display: block
}

.site-header__contact {
   width: 7.5rem;
   color: #fff;
   background: var(--teal);
   border-radius: 4rem;
   padding: .75rem 1.25rem;
   font-size: 1.125rem;
   white-space: nowrap;
   text-align: center;
}

.site-menu-button {
   display: none
}

.page-hero {
   height: 40rem;
   background: var(--hero-bg) center/cover no-repeat;
   position: relative
}

.page-hero--0 {
   --hero-bg: url(../img/common/page-hero--0-background.png)
}

.page-hero--1 {
   --hero-bg: url(../img/common/page-hero--1-background.png)
}

.page-hero--2 {
   --hero-bg: url(../img/common/page-hero--2-background.png)
}

.page-hero--3 {
   --hero-bg: url(../img/common/page-hero--3-background.png)
}

.page-hero__inner {
   height: 100%;
   position: relative;
   display: flex;
   align-items: center
}

.page-hero__copy {
   padding-left: 4.8125rem;
   padding-top: 1rem;
   z-index: 1;
   width: 49rem
}

.page-hero h1 {
   font-size: 3.75rem;
   line-height: 1.167;
   letter-spacing: -.1875rem;
   margin-bottom: 1.5rem
}

.page-hero__copy>p {
   font-size: 1.375rem;
   line-height: 1.3
}

.page-hero--3 h1 {
   margin-bottom: .3rem
}

.page-hero--3 h2 {
   font-size: 2.5rem;
   line-height: 1.3;
   margin-bottom: 1rem
}

.page-hero--3 p {
   width: 30rem
}

.page-hero__visual {
   position: absolute;
   left: 56.8125rem;
   top: 6.25rem;
   width: 45.125rem;
   height: 30rem;
   object-fit: contain
}

.page-hero__montage {
   position: absolute;
   left: 49rem;
   top: 6rem;
   width: 53rem;
   height: 28rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
   align-items: center;
   gap: 1rem
}

.page-hero__montage img {
   width: 100%;
   height: 12.5rem;
   object-fit: contain
}

.section-nav {
   height: 4.375rem;
   margin-top: -2.1875rem;
   position: relative;
   z-index: 3;
   overflow: hidden
}

.section-nav__inner {
   display: flex;
   position: relative;
   height: 100%;
   padding-left: 0
}

.section-nav__inner:before {
   content: "";
   position: absolute;
   inset: 0 -100vw 0 0;
   background: var(--purple);
   clip-path: polygon(2.8rem 0, 100% 0, 100% 100%, 0 100%)
}

.section-nav a {
   height: 100%;
   min-width: 12.5rem;
   padding: 0 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   position: relative;
   font-size: 1.375rem;
   white-space: nowrap;
   isolation: isolate
}

.section-nav a[aria-current=page]:before,
.section-nav a:hover:before {
   content: "";
   position: absolute;
   inset: 0 -1.5rem;
   background: var(--teal);
   transform: skewX(-35deg);
   z-index: -1
}

.section-nav a:hover span {
   color: #fff;
}

.site-footer {
   min-height: 33.75rem;
   padding: 6.125rem 0 7rem;
   background: url(../img/common/site-footer-background.png) center/cover
}

.site-footer__grid {
   display: grid;
   grid-template-columns: 44rem repeat(4, 1fr);
   gap: 2.5rem
}

.site-footer__logo {
   width: 20rem;
   height: 4.375rem;
   object-fit: contain
}

.site-footer__identity p {
   font-size: 1.125rem;
   line-height: 1.875rem;
   margin-top: 1.5625rem
}

.site-footer__codes {
   display: flex;
   gap: 2rem;
   margin-top: 1rem
}

.site-footer__codes img {
   width: 7.5rem;
   height: 7.5rem
}

.site-footer__column {
   padding-top: 1.5rem
}

.site-footer__column h3 {
   font-size: 1.5rem;
   color: var(--purple);
   white-space: nowrap;
   margin-bottom: 1.5rem
}

.site-footer__column a {
   display: block;
   font-size: 1.25rem;
   line-height: 2.5rem
}

.site-footer__column a:hover {
   color: var(--purple);
   text-decoration: underline
}

.consultation {
   min-height: 51.25rem;
   display: flex;
   align-items: center;
   background: url(../img/common/consultation-background.png) center/cover;
   color: #fff;
   padding: 6rem 0
}

.consultation__grid {
   display: grid;
   grid-template-columns: 31rem 1fr;
   gap: 3.25rem;
   align-items: start
}

.consultation__copy h2 {
   font-size: 3.75rem;
   line-height: 1.3;
   color: #fff;
   letter-spacing: -.075rem
}

.consultation__copy>p {
   font-size: 1.25rem;
   line-height: 1.875rem;
   margin-top: 1.25rem
}

.consultation__copy h3 {
   font-size: 1.75rem;
   margin-top: 2.5rem;
   margin-bottom: 1.25rem
}

.consultation__phone {
   display: inline-flex;
   align-items: center;
   gap: .625rem;
   padding: .625rem 1.5rem;
   border-radius: 4rem;
   background: var(--teal);
   font-size: 1.65rem;
   line-height: 1.4;
   font-weight: 600
}

.consultation__phone img {
   width: 1.75rem;
   height: 1.75rem
}

.inquiry-form {
   background: #fff;
   border-radius: 2.5rem;
   padding: 3.25rem;
   color: var(--ink);
   width: 100%
}

.inquiry-form__fields {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.25rem
}

.form-field {
   min-width: 0;
   display: block
}

.form-field input,
.form-field textarea {
   display: block;
   width: 100%;
   border: 1px solid var(--line);
   border-radius: .75rem;
   min-height: 3.6875rem;
   padding: 1rem 1.125rem;
   font-size: 1.25rem;
   background: #fff;
   color: var(--ink);
}

.form-field input,
.form-field textarea,
.form-field input:hover,
.form-field textarea:hover {
   outline: none;
   box-shadow: none;
}

input::placeholder,
textarea::placeholder {
   color: var(--ink);
   opacity: 1
}

.form-message {
   grid-column: 1/-1
}

.form-message textarea {
   height: 12.5rem;
   resize: vertical
}

.form-phone {
   position: relative;
   min-width: 0
}

.form-phone input {
   padding-right: 8.5rem
}

.form-code-button {
   position: absolute;
   right: 1.25rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.25rem;
   color: var(--purple)
}

.inquiry-form__submit {
   border-radius: .75rem;
   font-size: 1.25rem
}

.form-status {
   font-size: 1rem;
   color: var(--purple);
   line-height: 1.6
}

.form-status:not(:empty) {
   margin-top: 1rem
}

.form-consent {
   grid-column: 1/-1;
   display: flex;
   align-items: center;
   gap: .35rem;
   font-size: 1.125rem
}

.form-consent input {
   accent-color: var(--teal);
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0
}

.form-consent button {
   color: var(--teal);
   text-decoration: underline
}

.inquiry-form--compact {
   padding: 0;
   border-radius: 0
}

.inquiry-form--compact .form-message textarea {
   height: 12rem
}

.inquiry-form--compact .form-consent {
   grid-column: 1;
   grid-row: 5
}

.inquiry-form--compact .inquiry-form__submit {
   grid-column: 2
}

.inquiry-form--compact .inquiry-form__fields>.form-field:has(input[name=code]) {
   grid-column: 1
}

dialog {
   border: 0;
   padding: 0;
   color: var(--ink);
   max-width: calc(100% - 3rem)
}

dialog::backdrop {
   background: #0009
}

.video-dialog {
   width: 100rem;
   border-radius: 2.5rem;
   margin: 10vh auto auto;
   box-shadow: 0 1rem 5rem #0002;
   overflow: hidden
}

.video-dialog__player {
   width: 100%;
   aspect-ratio: 16/9;
   background: #eeebff;
   display: flex;
   align-items: center;
   justify-content: center
}

.video-dialog__player>img,
.video-dialog__player>video {
   width: 100%;
   height: 100%;
   max-height: 65vh;
   object-fit: contain
}

.video-dialog__footer {
   padding: 3.5rem 4rem;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.video-dialog__footer h2 {
   font-size: 2.125rem
}

.video-dialog__footer button {
   font-size: 3rem;
   color: var(--purple);
   line-height: 1;
   min-width: 3rem
}

.video-dialog__status:not(:empty) {
   font-size: 1.125rem;
   padding: 0 4rem 1.5rem
}

.resource-dialog {
   width: 40rem;
   border-radius: 1.5rem;
   padding: 3rem
}

.resource-dialog h2 {
   font-size: 2rem;
   margin-bottom: 1.5rem
}

.resource-dialog p {
   margin-bottom: 2rem
}

.dialog-close {
   position: absolute;
   right: 1.5rem;
   top: 1rem;
   font-size: 2rem
}

.lenis.lenis-smooth {
   scroll-behavior: auto !important
}

html.lenis,
html.lenis body {
   height: auto
}

.lenis.lenis-stopped {
   overflow: hidden
}

.lenis [data-lenis-prevent] {
   overscroll-behavior: contain
}

.lenis.lenis-scrolling iframe {
   pointer-events: none
}

@media(min-width:1921px) {

   .page-hero__inner,
   .site-header__main {
      max-width: 120rem;
      margin: auto
   }
}

@media(max-width:900px) {
   :root {
      font-size: 12px
   }

   .container {
      max-width: calc(100% - 40px);
      width: auto
   }

   .site-header__main {
      padding: 0 20px
   }

   .site-nav {
      gap: 1.2rem
   }

   .site-nav__toggle {
      display: none
   }

   .site-logo img {
      width: 13rem
   }

   .site-footer__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem
   }

   .site-footer__identity {
      grid-column: 1/-1
   }

   .page-hero__visual {
      left: auto;
      right: 0;
      width: 40%;
      height: 26rem
   }

   .page-hero__copy {
      padding-left: 1rem;
      width: 60%
   }

   .page-hero__montage {
      left: auto;
      right: 0;
      width: 45%
   }

   .consultation__grid {
      grid-template-columns: 1fr;
      gap: 3rem
   }

   .consultation__copy h2 br {
      display: none
   }

   .consultation__copy>p br {
      display: none
   }

   .consultation {
      min-height: 0
   }

   .page-hero h1 {
      font-size: 3rem
   }
}

@media(max-width:640px) {
   :root {
      font-size: 16px
   }

   body {
      font-size: 15px;
      line-height: 1.65
   }

   .container {
      max-width: calc(100% - 40px)
   }

   h2 {
      font-size: 28px
   }

   h3 {
      font-size: 20px
   }

   .site-header {
      height: 32px
   }

   .site-topbar {
      height: 32px;
      padding: 0 20px;
      gap: 14px;
      font-size: 10px
   }

   .site-topbar>a {
      font-size: 11px
   }

   .site-topbar__icon {
      width: 14px;
      max-height: 14px
   }

   .site-topbar>a,
   .site-miniapp {
      gap: 5px
   }

   .site-header__main {
      top: 32px;
      height: 72px;
      gap: 12px
   }

   .site-logo img {
      width: 155px;
      height: auto
   }

   .site-header__contact {
      font-size: 12px;
      padding: 6px 12px;
      margin-left: auto
   }

   .site-menu-button {
      display: grid;
      gap: 5px;
      width: 32px;
      min-height: 44px;
      align-content: center;
      flex-shrink: 0
   }

   .site-menu-button span {
      height: 2px;
      width: 23px;
      background: var(--purple)
   }

   .site-nav {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 72px;
      background: #fff;
      max-height: calc(100dvh - 104px);
      overflow: auto;
      padding: 16px 24px 28px;
      box-shadow: 0 20px 25px #3f327915;
      font-size: 16px
   }

   .site-nav.is-open {
      display: block
   }

   .site-nav__home {
      display: block;
      padding: 12px 0
   }

   .site-nav__group {
      display: grid;
      grid-template-columns: 1fr 44px;
      min-height: 48px;
      border-top: 1px solid #efedf6;
      gap: 0
   }

   .site-nav__parent {
      padding: 12px 0
   }

   .site-nav__toggle {
      display: block;
      min-height: 44px;
      font-size: 20px
   }

   .site-nav__dropdown {
      position: static;
      grid-column: 1/-1;
      box-shadow: none;
      padding: 0 0 12px;
      border-radius: 0
   }

   .site-nav__dropdown a {
      padding: 7px 16px;
      font-size: 14px
   }

   .site-nav__group:hover .site-nav__dropdown,
   .site-nav__group:focus-within .site-nav__dropdown {
      display: none
   }

   .site-nav__group.is-open .site-nav__dropdown {
      display: block
   }

   .site-miniapp__qr {
      top: 32px;
      right: 20px;
      padding: 12px
   }

   .site-miniapp__qr img {
      width: 130px
   }

   .page-hero {
      height: auto;
      min-height: 530px;
      padding: 110px 0 20px
   }

   .page-hero__inner {
      display: flex;
      flex-direction: column;
      gap: 16px
   }

   .page-hero__copy {
      width: 100%;
      padding: 0
   }

   .page-hero h1 {
      font-size: 32px;
      letter-spacing: -1px;
      margin-bottom: 12px
   }

   .page-hero__copy>p {
      font-size: 14px;
      line-height: 1.6;
      width: 100%
   }

   .page-hero--3 h2 {
      font-size: 22px;
      margin-bottom: 12px
   }

   .page-hero--3 p br {
      display: none
   }

   .page-hero__visual {
      position: static;
      width: 100%;
      height: 230px;
      object-fit: contain
   }

   .page-hero__montage {
      position: static;
      width: 100%;
      height: 225px;
      gap: 10px
   }

   .page-hero__montage img {
      height: 100px
   }

   .section-nav {
      height: 48px;
      margin-top: 0;
      overflow-x: auto;
      background: var(--purple)
   }

   .section-nav__inner {
      max-width: none;
      width: max-content;
      margin: 0;
      padding: 0 12px
   }

   .section-nav__inner:before {
      display: none
   }

   .section-nav a {
      font-size: 13px;
      min-width: 98px;
      padding: 0 12px
   }

   .section-nav a[aria-current=page]:before,
   .section-nav a:hover:before {
      inset: 0 0
   }

   .section-content {
      padding: 48px 0 64px
   }

   .section-heading {
      gap: 16px;
      margin-bottom: 24px;
      align-items: flex-start;
      flex-wrap: wrap
   }

   .section-heading p {
      margin-top: 10px
   }

   .filter-tabs {
      gap: 8px
   }

   .filter-tabs button {
      min-width: 90px;
      padding: 8px 14px;
      min-height: 40px;
      font-size: 13px
   }

   .button {
      font-size: 14px;
      min-height: 44px;
      padding: 10px 16px;
      gap: 12px;
      border-radius: 5px
   }

   .button-row {
      gap: 10px
   }

   .text-link {
      font-size: 13px;
      gap: 12px
   }

   .breadcrumb {
      font-size: 12px;
      margin-bottom: 24px;
      line-height: 1.8
   }

   .site-footer {
      min-height: 0;
      padding: 48px 0
   }

   .site-footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 20px
   }

   .site-footer__logo {
      width: 210px;
      height: auto
   }

   .site-footer__identity p {
      font-size: 11px;
      line-height: 1.8;
      margin-top: 18px
   }

   .site-footer__codes {
      gap: 20px;
      margin-top: 20px
   }

   .site-footer__codes img {
      width: 86px;
      height: 86px
   }

   .site-footer__column {
      padding-top: 0
   }

   .site-footer__column h3 {
      font-size: 16px;
      margin-bottom: 10px
   }

   .site-footer__column a {
      font-size: 13px;
      line-height: 2.3
   }

   .consultation {
      padding: 52px 0
   }

   .consultation__grid {
      gap: 28px
   }

   .consultation__copy h2 {
      font-size: 29px;
      line-height: 1.4;
      letter-spacing: 0
   }

   .consultation__copy>p {
      font-size: 14px;
      line-height: 1.7;
      margin-top: 12px
   }

   .consultation__copy h3 {
      font-size: 18px;
      margin-top: 22px;
      margin-bottom: 12px
   }

   .consultation__phone {
      font-size: 20px;
      padding: 6px 18px;
      gap: 8px
   }

   .consultation__phone img {
      width: 22px;
      height: 22px
   }

   .inquiry-form {
      padding: 22px 18px;
      border-radius: 20px
   }

   .inquiry-form__fields {
      grid-template-columns: 1fr;
      gap: 12px
   }

   .form-field input,
   .form-field textarea {
      min-height: 46px;
      padding: 12px;
      font-size: 14px;
      border-radius: 8px
   }

   .form-message textarea {
      height: 130px
   }

   .form-phone input {
      padding-right: 102px
   }

   .form-code-button {
      font-size: 12px;
      right: 12px;
      min-height: 40px
   }

   .inquiry-form__submit {
      font-size: 14px;
      border-radius: 8px
   }

   .form-status {
      font-size: 12px
   }

   .form-consent {
      font-size: 11px;
      flex-wrap: wrap;
      gap: 3px
   }

   .form-consent input {
      width: 16px;
      height: 16px
   }

   .inquiry-form--compact .form-message textarea {
      height: 140px
   }

   .inquiry-form--compact .form-consent {
      grid-column: 1;
      grid-row: auto
   }

   .inquiry-form--compact .inquiry-form__submit {
      grid-column: 1
   }

   .video-dialog {
      border-radius: 16px;
      max-width: calc(100% - 24px);
      margin: 20vh auto auto
   }

   .video-dialog__footer {
      padding: 20px
   }

   .video-dialog__footer h2 {
      font-size: 16px
   }

   .video-dialog__footer button {
      font-size: 30px;
      min-width: 34px
   }

   .video-dialog__status:not(:empty) {
      padding: 0 20px 20px;
      font-size: 12px
   }

   .resource-dialog {
      padding: 30px 22px;
      border-radius: 16px
   }

   .resource-dialog h2 {
      font-size: 22px;
      margin-bottom: 20px
   }

   .resource-dialog p {
      margin-bottom: 24px
   }

   .dialog-close {
      right: 14px;
      top: 8px;
      font-size: 28px
   }

   .empty-state {
      padding: 32px 0
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }

   html {
      scroll-behavior: auto !important
   }
}

/* Reusable product card, scoped to the component. */
.product-list {
   display: grid;
   gap: 3.3125rem
}

.product-card {
   display: grid;
   grid-template-columns: 55rem 1fr;
   min-height: 30rem;
   background: var(--pale);
   border-radius: 2rem;
   overflow: hidden;
   position: relative
}

.product-card__visual {
   position: relative;
   min-height: 30rem
}

.product-card__shape {
   position: absolute;
   left: 0;
   top: 0;
   height: 30rem;
   width: auto;
   max-width: none
}

.product-card__image {
   position: absolute;
   left: 5.8125rem;
   top: 0;
   width: 30rem;
   height: 30rem;
   object-fit: contain
}

.product-card__origin {
   position: absolute;
   top: 0;
   left: 12rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 15rem;
   height: 3.25rem;
   font-size: 1.375rem;
   background: url(../img/common/brands-card-product-card-product-card-visual-product-card-origin.svg) center center no-repeat;
}

.product-card__origin>img {
   position: absolute;
   inset: 0;
   max-width: 100%;
   height: auto
}

.product-card__origin>span {
   position: relative
}

.product-card__copy {
   align-self: center;
   padding: 2.5rem 2.5rem 2.5rem 5rem
}

.product-card__copy h3 {
   font-size: 2.125rem;
   font-weight: 400;
   line-height: 1.2
}

.product-card__english {
   font-size: 1.375rem;
   margin-top: .75rem
}

.product-card__features {
   list-style: none;
   margin: 1rem 0 1.75rem;
   padding: 0;
   font-size: 1.375rem;
   line-height: 2.5rem
}

.product-card__features li {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   font-size: 1.25rem;
   margin-top: 0.1rem;
  padding-left: 2.4rem;
    background: url(../img/common/product-card-copy-product-card-features.svg) left center no-repeat;
}

.product-card__features img {
   width: 1.4rem;
   height: 1.4rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
}

.product-card .button {
   min-width: 11.25rem;
   white-space: nowrap
}

.product-card .button--outline {
   min-width: 15rem
}

.product-card .button-row {
   flex-wrap: nowrap;
   gap: 1.25rem
}

.media-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4rem 2.5rem
}

.media-grid--three {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 4rem 3.125rem
}

.media-card__open {
   display: block;
   position: relative;
   width: 100%;
   border-radius: 3.125rem;
   overflow: hidden
}

.media-card__open>img:first-child {
   width: 100%;
   aspect-ratio: 790/450;
   object-fit: cover;
   transition: scale 850ms cubic-bezier(.25, .46, .45, .94)
}

.media-card__open:hover>img:first-child {
   scale: 1.025
}

.media-card__open .media-card__play {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 4.375rem;
   height: 4.375rem;
   object-fit: contain
}

.media-card h3,
.publication-card h3 {
   font-size: 1.875rem;
   font-weight: 400;
   line-height: 1.3;
   margin-top: 1.625rem
}

.media-card p,
.publication-card p {
   font-size: 1.25rem;
   line-height: 1.6
}

.publication-card button {
   display: block;
   position: relative;
   width: 100%;
   border-radius: 2.5rem;
   overflow: hidden;
   text-align: left
}

.publication-card button>img {
   width: 100%;
   aspect-ratio: 500/700;
   object-fit: cover
}

.publication-card__download {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   background: #66738080;
   opacity: 0;
   transition: opacity .2s
}

.publication-card button:hover .publication-card__download,
.publication-card button:focus-visible .publication-card__download {
   opacity: 1
}

.publication-card__download img {
   width: 6.25rem;
   height: 6.25rem;
   object-fit: contain
}

@media(max-width:900px) {
   .product-card {
      grid-template-columns: 48% 1fr
   }

   .product-card__copy {
      padding: 2rem
   }

   .product-card .button-row {
      flex-wrap: wrap
   }

   .product-card .button {
      font-size: 1.1rem;
      min-width: 0
   }

   .product-card__image {
      left: 1rem;
      width: calc(100% - 2rem)
   }

   .product-card__shape {
      max-width: 100%;
      object-fit: cover
   }

   .product-card__origin {
      left: 20%
   }
}

@media(max-width:640px) {
   .product-list {
      gap: 24px
   }

   .product-card {
      grid-template-columns: 1fr;
      border-radius: 18px;
      min-height: 0
   }

   .product-card__visual {
      min-height: 230px;
      height: 230px
   }

   .product-card__shape {
      width: auto;
      height: 230px;
      left: 0;
      max-width: 100%
   }

   .product-card__image {
      width: 230px;
      height: 230px;
      left: 50%;
      transform: translateX(-50%)
   }

   .product-card__origin {
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      width: 145px;
      height: 32px
   }

   .product-card__copy {
      padding: 20px 22px 26px
   }

   .product-card__copy h3 {
      font-size: 21px
   }

   .product-card__english {
      font-size: 12px;
      margin-top: 8px
   }

   .product-card__features {
      font-size: 13px;
      line-height: 1.9;
      margin: 14px 0 20px
   }

   .product-card__features li {
      gap: 8px
   }

   .product-card__features img {
      width: 15px;
      height: 15px
   }

   .product-card .button-row {
      gap: 8px;
      flex-wrap: wrap
   }

   .product-card .button,
   .product-card .button--outline {
      font-size: 13px;
      min-width: 0;
      min-height: 42px;
      padding: 8px 12px
   }

   .media-grid,
   .media-grid--three {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .media-card__open {
      border-radius: 20px
   }

   .media-card__open .media-card__play {
      width: 48px;
      height: 48px
   }

   .media-card h3,
   .publication-card h3 {
      font-size: 18px;
      margin-top: 14px
   }

   .media-card p,
   .publication-card p {
      font-size: 13px
   }

   .publication-card button {
      border-radius: 20px
   }

   .publication-card button>img {
      aspect-ratio: 500/700
   }

   .publication-card__download img {
      width: 64px;
      height: 64px
   }
}

.site-nav__group:not(.is-open):hover .site-nav__dropdown,
.site-nav__group:not(.is-open):focus-within .site-nav__dropdown {
   display: none
}

/* Exact field layout for compact contact/order forms. */
.inquiry-form--compact .form-phone {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) auto;
   border: 1px solid var(--line);
   border-radius: .75rem;
   align-items: center
}

.inquiry-form--compact .form-phone .form-field input {
   border: 0;
   padding-right: .5rem;
   min-width: 0
}

.inquiry-form--compact .form-phone .form-field:has(input[name=code]) {
   border-left: 1px solid var(--line)
}

.inquiry-form--compact .form-code-button {
   position: static;
   transform: none;
   font-size: 1.125rem;
   padding: 0 1rem
}

.inquiry-form--compact .form-consent {
   grid-row: 4;
   grid-column: 1
}

.page-hero--3 .page-hero__copy {
   width: 45rem
}

.page-hero--3 h2 {
   font-size: 2.25rem;
   letter-spacing: -.125rem
}

.page-hero--3 p {
   width: 33rem;
   line-height: 1.625rem
}

@media(max-width:640px) {
   .inquiry-form--compact .form-phone {
      grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) auto;
      border-radius: 8px
   }

   .inquiry-form--compact .form-phone input {
      font-size: 12px;
      padding: 12px 6px
   }

   .inquiry-form--compact .form-code-button {
      font-size: 11px;
      padding: 0 8px;
      right: auto
   }

   .inquiry-form--compact .form-consent {
      grid-column: 1;
      grid-row: auto
   }

   .page-hero--3 .page-hero__copy {
      width: 100%
   }

   .page-hero--3 h2 {
      font-size: 22px;
      letter-spacing: -1px
   }

   .page-hero--3 p {
      width: 100%;
      line-height: 1.6
   }
}

.button__arrow {
   width: 1.5625rem;
   height: .875rem;
   object-fit: contain;
   margin-left: auto;
   transform: scaleX(-1);
   flex-shrink: 0
}

.text-link .button__arrow {
   width: 1rem;
   height: .5625rem
}

.site-topbar__phone-icon {
   position: relative;
   width: 1.5rem;
   height: 1.5rem;
   display: block
}

.site-topbar__phone-icon img:first-child {
   width: 1.5rem;
   height: 1.5rem
}

.site-topbar__phone-icon img:last-child {
   position: absolute;
   width: .75rem;
   height: .75rem;
   top: .375rem;
   left: .375rem
}

.form-field {
   position: relative
}

.field-placeholder {
   position: absolute;
   left: 1.125rem;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   color: var(--ink);
   font-size: 1.25rem;
   white-space: nowrap;
   max-width: calc(100% - 1.5rem);
   overflow: hidden
}

.field-placeholder b {
   font-weight: 400;
   color: #ff1a00
}

.form-field input::placeholder {
   color: transparent
}

.form-field input:not(:placeholder-shown)~.field-placeholder {
   display: none
}

@media(min-width:901px) and (max-width:1199px) {
   .page-hero__montage {
      left: 49%;
      right: 0;
      width: 51%
   }

   .page-hero__montage img {
      width: 100%;
      max-height: 12rem
   }
}

@media(max-width:640px) {
   .button__arrow {
      width: 18px;
      height: 10px
   }

   .text-link .button__arrow {
      width: 14px;
      height: 8px
   }

   .site-topbar__phone-icon,
   .site-topbar__phone-icon img:first-child {
      width: 14px;
      height: 14px
   }

   .site-topbar__phone-icon img:last-child {
      width: 8px;
      height: 8px;
      left: 3px;
      top: 3px
   }

   .field-placeholder {
      left: 12px;
      font-size: 14px;
      max-width: calc(100% - 20px)
   }

   .inquiry-form--compact .form-phone .field-placeholder {
      font-size: 12px;
      left: 6px;
      max-width: calc(100% - 8px)
   }
}

/* First refinement: shared interaction timing and accessible form feedback. */
:root {
   --motion-ease: cubic-bezier(.22, 1, .36, 1);
   --motion-fast: 220ms;
   --motion-slow: 480ms
}

:where(a, button) {
   -webkit-tap-highlight-color: transparent
}

:is(.button, .text-link, .site-header a, .site-header button, .site-footer a, .filter-tabs button, .section-nav a, .pagination button, .form-code-button, .home-solution__model, .home-solution__fields button, .home-solution__questions button, .home-cases__tabs button) {
   transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-slow) var(--motion-ease), translate var(--motion-slow) var(--motion-ease), opacity var(--motion-fast) ease
}

:is(.product-card, .brands-card, .components-card, .cases-card, .videos-card, .webinar-card, .journals-card, .news-card, .downloads-card, .home-resource-card, .home-partners__logo) {
   transition: box-shadow var(--motion-slow) var(--motion-ease), translate var(--motion-slow) var(--motion-ease), border-color var(--motion-fast) ease
}

:is(.product-card__image, .home-resource-card>img, .home-cases__card>img, .home-partners__logo img, .home-solution__fields img, main article>img, main article>a>img) {
   transition: scale 650ms var(--motion-ease), filter 650ms var(--motion-ease)
}

:where(main h3, main h3 a) {
   transition: color var(--motion-fast) ease
}

:where(a, button):focus-visible {
   outline: 2px solid var(--teal);
   outline-offset: 5px
}

@media(hover:hover) and (pointer:fine) {
   .button:not(:disabled):hover {
      translate: 0 -3px;
      box-shadow: 0 10px 24px #3f327922
   }

   .button:not(:disabled):active {
      translate: 0 -1px;
      box-shadow: 0 4px 10px #3f327915
   }

   .text-link:hover,
   .site-footer a:hover {
      color: var(--teal)
   }

   .site-nav__dropdown a:hover {
      translate: 4px 0
   }

   .site-header__contact:hover {
      translate: 0 -2px;
      box-shadow: 0 8px 20px #3f327926
   }

   .filter-tabs button:not(.is-active):hover,
   .section-nav a:hover {
      color: var(--purple);
      background-color: #eceaf5
   }

   .pagination button:hover {
      translate: 0 -2px
   }

   :is(.brands-card, .components-card, .cases-card, .videos-card, .webinar-card, .journals-card, .news-card, .downloads-card, .home-resource-card):hover {
      translate: 0 -5px;
      box-shadow: 0 16px 36px #3f32791c
   }

   .product-card:hover .product-card__image {
      scale: 1.035
   }

   .product-card h3 a:hover {
      color: var(--teal)
   }

   :is(.home-resource-card, .home-cases__card, main article):hover>img,
   :is(.home-resource-card, main article):hover>a>img {
      scale: 1.025
   }

   .home-partners__logo:hover img {
      scale: 1.06
   }

   .home-solution__fields button:hover img {
      scale: 1.035;
      filter: saturate(1.08)
   }

   .home-solution__questions button:hover {
      color: var(--purple);
      translate: 4px 0
   }

   .home-solution__model:hover {
      translate: 0 -4px;
      box-shadow: 0 12px 26px #3f327915
   }
}

button:disabled {
   cursor: not-allowed;
   opacity: .5
}

.inquiry-form .form-field {
   align-self: start
}

.inquiry-form .field-placeholder {
   top: 1.84375rem
}

.inquiry-form .form-field :is(input, textarea) {
   transition: border-color 200ms, box-shadow 200ms, background-color 200ms
}

.inquiry-form .form-field :is(input, textarea):focus {
   border-color: var(--teal);
   box-shadow: 0 0 0 3px #69b7bf20;
   outline: none
}

.inquiry-form .form-field :is(input, textarea)[aria-invalid=true] {
   border-color: #c94d5f;
   background-color: #fffafb;
   box-shadow: 0 0 0 1px #c94d5f22
}

.form-field__error {
   display: block;
   font-size: 12px;
   line-height: 1.5;
   color: #b73549;
   margin-top: 6px;
   animation: field-feedback-in 180ms ease-out
}

.form-field__error[hidden] {
   display: none
}

.form-consent {
   flex-wrap: wrap
}

.form-consent .form-field__error {
   flex: 0 0 100%
}

.form-consent.has-error input {
   outline: 1px solid #b80000;
   outline-offset: 2px
}

.form-phone>.form-code-button {
   top: 1.84375rem
}

.inquiry-form--compact .form-phone {
   align-items: start
}

.inquiry-form--compact .form-code-button {
   min-height: 3.6875rem;
   white-space: nowrap
}

.inquiry-form--compact .form-field.has-error {
   min-width: 0
}

.inquiry-form--compact .form-field__error {
   padding: 0 6px 5px
}

.form-status:not(:empty) {
   padding: 12px 16px;
   border-radius: 10px;
   background: #f1f3fa;
   border: 1px solid #dfe4f0
}

.form-status[data-state=error] {
   color: #a93247;
   background: #fff4f5;
   border-color: #f0ccd3
}

.form-status[data-state=success] {
   color: #266765;
   background: #edf8f5;
   border-color: #cee7de
}

.form-demo {
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
   margin-top: 16px;
   padding: 14px 16px;
   border: 1px dashed #9eb8ce;
   border-radius: 10px;
   background: #f5f9fc;
   font-size: 13px;
   line-height: 1.7
}

.form-demo[hidden] {
   display: none
}

.form-demo button {
   flex-shrink: 0;
   color: var(--purple);
   border-bottom: 1px solid currentColor;
   padding: 3px 0
}

.form-demo button:hover {
   color: var(--teal)
}

@keyframes field-feedback-in {
   from {
      opacity: 0;
      translate: 0 -3px
   }

   to {
      opacity: 1;
      translate: 0 0
   }
}

@media(max-width:640px) {
   .inquiry-form .field-placeholder {
      top: 23px
   }

   .form-phone>.form-code-button {
      top: 23px
   }

   .inquiry-form--compact .form-code-button {
      min-height: 46px
   }

   .form-demo {
      align-items: flex-start;
      flex-direction: column;
      font-size: 12px
   }

   .form-field__error {
      font-size: 11px
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important
   }
}

/* Shared card families used by listing pages. */
:where(button, .home-cases__arrow, .home-featured__controls button) {
   transition-property: color, background-color, border-color, box-shadow, opacity;
   transition-duration: 220ms;
   transition-timing-function: ease
}

:is(.media-card, .publication-card, .consumables-card, .product-detail-card) {
   transition: box-shadow 480ms var(--motion-ease), translate 480ms var(--motion-ease)
}

:is(.media-card, .publication-card, .consumables-card, .product-detail-card) img {
   transition: scale 650ms var(--motion-ease)
}

@media(hover:hover) and (pointer:fine) {
   :is(.media-card, .publication-card, .consumables-card, .product-detail-card):hover {
      translate: 0 -4px;
      box-shadow: 0 16px 36px #3f32791c
   }

   :is(.media-card, .publication-card, .consumables-card, .product-detail-card):hover img:not(.button__arrow) {
      scale: 1.025
   }
}

.inquiry-form--compact .form-phone>.form-field__error {
   grid-column: 1/-1;
   margin: 0;
   padding: 3px 10px 7px
}

#brand-origin-tabs,
#domestic,
#import {
   scroll-margin-top: 140px
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-delay: 0ms !important
   }
}

/* Second refinement: one shared silhouette for the section navigation. */
.section-nav {
   --nav-slant: 3.0625rem
}

.section-nav__inner {
   clip-path: polygon(var(--nav-slant) 0, 200vw 0, 200vw 100%, 0 100%);
   overflow: visible
}

.section-nav__inner:before {
   clip-path: none
}

.section-nav a:before {
   content: "";
   position: absolute;
   inset: 0 -1.5rem;
   background: var(--teal);
   transform: skewX(-35deg);
   z-index: -1;
   opacity: 0;
   transition: opacity 260ms ease
}

.section-nav a[aria-current=page]:before,
.section-nav a:hover:before,
.section-nav a:focus-visible:before {
   opacity: 1
}

.section-nav a:hover {
   background: transparent !important;
   color: #fff
}

.section-nav a:focus-visible {
   outline-offset: -4px
}

@media(max-width:640px) {
   .section-nav__inner {
      clip-path: none
   }

   .section-nav a:before,
   .section-nav a[aria-current=page]:before,
   .section-nav a:hover:before {
      inset: 0;
      transform: skewX(-20deg)
   }
}

/* Listing-only geometry: 100 px inset, 758 px visual, 100 px copy gap at 1920 px. */
:is(.products-catalog, .brands-catalog) .product-card {
   padding-left: 6.125rem;
   grid-template-columns: 47.375rem minmax(0, 1fr);
   column-gap: 6.25rem
}

:is(.products-catalog, .brands-catalog) .product-card__visual {
   min-width: 0
}

:is(.products-catalog, .brands-catalog) .product-card__shape {
   left: 0;
   width: 100%;
   height: 30rem
}

:is(.products-catalog, .brands-catalog) .product-card__image {
   left: 4.625rem;
   width: 30rem;
   height: 30rem
}

:is(.products-catalog, .brands-catalog) .product-card__origin {
   left: 9.25rem
}

:is(.products-catalog, .brands-catalog) .product-card__copy {
   padding: 2.5rem 2.5rem 2.5rem 0
}

:is(.products-catalog, .brands-catalog) .product-card__features li {
   font-size: 1.375rem;
   margin-top: 0;
   padding-left: 2.4rem;
    background: url(../img/common/product-card-copy-product-card-features.svg) left center no-repeat;
}

@media(min-width:641px) and (max-width:1100px) {
   :is(.products-catalog, .brands-catalog) .product-card {
      padding-left: 3rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 3rem
   }

   :is(.products-catalog, .brands-catalog) .product-card__image {
      left: 0;
      width: 100%;
      object-fit: contain
   }

   :is(.products-catalog, .brands-catalog) .product-card__origin {
      left: 15%;
      width: 65%
   }

   :is(.products-catalog, .brands-catalog) .product-card__copy {
      padding: 2.5rem 2rem 2.5rem 0
   }
}

@media(max-width:640px) {
   :is(.products-catalog, .brands-catalog) .product-card {
      padding-left: 0;
      grid-template-columns: 1fr;
      gap: 0
   }

   :is(.products-catalog, .brands-catalog) .product-card__shape {
      width: 100%;
      height: 230px
   }

   :is(.products-catalog, .brands-catalog) .product-card__image {
      left: 50%;
      width: 230px;
      height: 230px
   }

   :is(.products-catalog, .brands-catalog) .product-card__origin {
      left: 50%
   }

   :is(.products-catalog, .brands-catalog) .product-card__copy {
      padding: 24px
   }

   :is(.products-catalog, .brands-catalog) .product-card__features li {
      font-size: 14px
   }
}

/* Calm, higher-contrast validation feedback. */
:root {
   --form-error: #963d45;
   --form-error-border: #b76a71
}

.inquiry-form .form-field :is(input, textarea)[aria-invalid=true] {
   border-color: var(--form-error-border);
   background: #fff;
   box-shadow: none
}

.form-field__error {
   color: var(--form-error);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.6
}

.form-consent.has-error input {
   outline-color: #b80000;
}

.form-status[data-state=error] {
   color: #83323b;
   background: #faf5f5;
   border-color: #dec2c6
}

.inquiry-form--compact .form-phone:has([aria-invalid=true]) {
   border-color: var(--form-error-border)
}

.inquiry-form--compact .form-phone .form-field input[aria-invalid=true] {
   background: #fff;
   box-shadow: none
}

@media(max-width:640px) {
   .form-field__error {
      font-size: 12px
   }
}

/* Centered HTML5 video surface, 80% of the viewport in each dimension. */
.video-dialog {
   width: 80vw;
   height: 80vh;
   height: 80dvh;
   max-width: 80vw;
   max-height: 80vh;
   max-height: 80dvh;
   margin: auto;
   border-radius: 20px;
   background: #fff
}

.video-dialog[open] {
   display: flex;
   flex-direction: column
}

.video-dialog__player {
   flex: 1;
   min-height: 0;
   aspect-ratio: auto;
   background: #101018;
   overflow: hidden
}

.video-dialog__player>video,
.video-dialog__player>img {
   display: block;
   width: 100%;
   height: 100%;
   max-height: none;
   object-fit: contain
}

.video-dialog__footer {
   flex-shrink: 0;
   padding: 20px 28px;
   gap: 20px
}

.video-dialog__footer h2 {
   font-size: clamp(16px, 1.4vw, 25px);
   line-height: 1.4
}

.video-dialog__footer button {
   font-size: 32px;
   min-width: 40px;
   min-height: 40px
}

.video-dialog__status:not(:empty) {
   margin: 0;
   padding: 0 28px 18px;
   font-size: 14px;
   flex-shrink: 0
}

@media(max-width:640px) {
   .video-dialog {
      border-radius: 14px
   }

   .video-dialog__footer {
      padding: 12px;
      gap: 8px
   }

   .video-dialog__status:not(:empty) {
      padding: 0 12px 12px;
      font-size: 12px
   }
}

/* Animate the desktop dropdown both in and out; retain existing ARIA-driven state. */
@media(min-width:641px) {

   .site-nav__group .site-nav__dropdown,
   .site-nav__group:not(.is-open):hover .site-nav__dropdown,
   .site-nav__group:not(.is-open):focus-within .site-nav__dropdown {
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(10px) scale(.98);
      transform-origin: 50% 0;
      transition: opacity 200ms ease, transform 320ms var(--motion-ease), visibility 0s linear 200ms
   }

   .site-nav__group.is-open .site-nav__dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      transition-delay: 0s
   }

   .site-nav__toggle {
      transition: transform 280ms var(--motion-ease)
   }

   .site-nav__group.is-open .site-nav__toggle {
      transform: rotate(180deg);
      transition: all 0.3s ease-in-out;
   }
}

@media(max-width:640px) {
   .site-nav__group.is-open .site-nav__dropdown {
      animation: nav-dropdown-in 250ms var(--motion-ease) both
   }
}

@keyframes nav-dropdown-in {
   from {
      opacity: 0;
      transform: translateY(-6px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

/* Third refinement: full-width navigation shell, centered 120rem content. */
.site-header__main {
   width: 100%;
   max-width: none;
   margin: 0;
   padding: 0;
   display: block;
   background: #fff
}

.site-header__inner {
   width: 100%;
   max-width: 120rem;
   height: 100%;
   margin: 0 auto;
   padding: 0 2.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem
}

.site-header.is-scrolled .site-header__main {
   background: #fff
}

.product-card__image-link {
   display: contents
}

.product-card__image-link:focus-visible .product-card__image {
   outline: 2px solid var(--teal);
   outline-offset: 5px;
   border-radius: 12px
}

@media(max-width:900px) {
   .site-header__inner {
      padding: 0 20px
   }
}

@media(max-width:640px) {
   .site-header__inner {
      gap: 12px
   }
}

/* The compact phone row uses a centered short divider, not a boxed code field. */
.inquiry-form--compact .form-phone {
   grid-template-columns: 50% minmax(0, 1fr) auto;
   align-items: start;
   background: #fff
}

.inquiry-form--compact .form-phone .form-field {
   align-self: start
}

.inquiry-form--compact .form-phone .form-field:has(input[name=code]) {
   border-left: 0;
   position: relative
}

.inquiry-form--compact .form-phone .form-field:has(input[name=code]):before {
   content: "";
   position: absolute;
   left: 0;
   top: .8125rem;
   height: 2rem;
   width: 1px;
   background: #c7ced5;
   z-index: 1
}

.inquiry-form--compact .form-phone .form-field input {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none
}

.inquiry-form--compact .form-phone .form-field:has(input[name=phone]) input {
   border-radius: .75rem 0 0 .75rem
}

.inquiry-form--compact .form-phone .form-field:has(input[name=code]) input {
   padding-left: 1.375rem
}

.inquiry-form--compact .form-phone .form-field:has(input[name=code]) .field-placeholder {
   left: 1.375rem
}

.inquiry-form--compact .form-phone .form-code-button {
   padding: 0 1.5rem
}

.inquiry-form--compact .form-phone:focus-within {
   border-color: var(--teal);
   box-shadow: 0 0 0 3px #69b7bf15
}

.inquiry-form--compact .form-phone:has([aria-invalid=true]) {
   border-color: var(--form-error-border)
}

@media(max-width:640px) {
   .inquiry-form--compact .form-phone {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto
   }

   .inquiry-form--compact .form-phone .form-field:has(input[name=code]):before {
      top: 11px;
      height: 24px
   }

   .inquiry-form--compact .form-phone .form-field:has(input[name=code]) input {
      padding-left: 12px
   }

   .inquiry-form--compact .form-phone .form-field:has(input[name=code]) .field-placeholder {
      left: 12px
   }

   .inquiry-form--compact .form-phone .form-code-button {
      padding: 0 8px
   }
}

/* Requested listing cards keep motion without elevation. */
body:is([data-page=components], [data-page=videos], [data-page=video-modal], [data-page=webinar], [data-page=journals], [data-page=downloads]) :is(.components-card, .media-card, .publication-card, .downloads-card):hover {
   box-shadow: none
}

/* Validation layout: messages never stretch the compact phone control. */
.inquiry-form {
   --form-error: #66517f;
   --form-error-border: #b6a9ca;
   --control-height: 3.6875rem
}

.inquiry-form__fields {
   align-items: start
}

.inquiry-form .form-phone,
.inquiry-form .form-phone-field,
.inquiry-form .inquiry-form__submit {
   align-self: start
}

.inquiry-form .form-phone-field {
   min-width: 0
}

.inquiry-form--compact .form-phone {
   height: var(--control-height);
   min-height: var(--control-height);
   grid-template-rows: minmax(0, 1fr);
   align-items: center
}

.inquiry-form--compact .form-phone .form-field {
   height: 100%;
   align-self: stretch
}

.inquiry-form--compact .form-phone .form-field input {
   height: 100%;
   min-height: 0;
   box-shadow: none
}

.inquiry-form--compact .form-phone .form-code-button {
   height: 100%;
   min-height: 0
}

.inquiry-form--compact .form-phone .field-placeholder {
   top: 50%
}

.form-phone-feedback {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 16px;
   margin-top: 7px
}

.form-phone-feedback[hidden],
.inquiry-form .form-field__error[hidden] {
   display: none !important
}

.inquiry-form .form-field__error {
   color: #b80000;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.6;
   margin-top: 7px;
   padding: 0 2px;
   animation: none
}

.form-phone-feedback .form-field__error {
   margin: 0;
   padding: 0 2px
}

.inquiry-form .form-field__error:not([hidden]):before {
   content: "!";
   display: inline-grid;
   place-items: center;
   width: 14px;
   height: 14px;
   margin-right: 6px;
   border: 1px solid #b80000;
   border-radius: 50%;
   font: 10px/1 Arial, sans-serif;
   vertical-align: 1px
}

.inquiry-form .form-field :is(input, textarea)[aria-invalid=true] {
   border-color: var(--form-error-border);
   background: #fff;
   box-shadow: none
}

.inquiry-form .form-status:not(:empty) {
   font-size: 13px;
   line-height: 1.7;
   padding: 12px 16px;
   border-radius: 10px;
   border: 1px solid #dcd5e7;
   background: #f6f4f9;
   color: #5b4974
}

.inquiry-form .form-status[data-state=error] {
   border-color: #b80000;
   background: #fff;
   color: #b80000
}

.inquiry-form .form-status[data-state=success] {
   border-color: #cce0e2;
   background: #f0f7f7;
   color: #34747d
}

.inquiry-form .form-demo {
   border: 1px solid #d2e2e5;
   background: #f4f9fa;
   color: #557781
}

.inquiry-form .inquiry-form__submit {
   min-height: var(--control-height)
}

@media(max-width:640px) {
   .inquiry-form {
      --control-height: 46px
   }

   .inquiry-form .form-status:not(:empty) {
      font-size: 12px;
      padding: 10px 12px
   }

   .form-phone-feedback {
      gap: 3px 10px
   }

   .inquiry-form .form-field__error {
      font-size: 11px
   }
}

/* QR popover above the navigation's own stacking context. */
.site-topbar {
   z-index: 60
}

.site-header__main {
   z-index: 20
}

.site-miniapp__qr {
   z-index: 80
}

.site-miniapp__qr:not([hidden]) {
   animation: miniapp-qr-in 180ms ease-out both
}

.site-miniapp__qr:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -12px;
   height: 12px
}

@keyframes miniapp-qr-in {
   from {
      opacity: 0;
      translate: 0 -5px
   }

   to {
      opacity: 1;
      translate: 0 0
   }
}

/* Consistent thumbnail motion on entry and exit; keep GSAP transforms separate. */
body:is([data-page=videos], [data-page=webinar], [data-page=journals]) :is(.media-card__open>img:first-child, .publication-card button>img) {
   scale: 1;
   transition: scale 850ms cubic-bezier(.25, .46, .45, .94);
}

@media(hover:hover) and (pointer:fine) {
   body:is([data-page=videos], [data-page=webinar], [data-page=journals]) :is(.media-card, .publication-card):hover :is(.media-card__open>img:first-child, .publication-card button>img) {
      scale: 1.025;
   }

   body:is([data-page=videos], [data-page=webinar], [data-page=journals]) :is(.media-card, .publication-card):hover :is(.media-card__play, .publication-card__download img) {
      scale: 1;
   }
}

/* Equal desktop tabs: one shared parallelogram, including the first item. */
@media(min-width:641px) {
   .section-nav a {
      flex: 0 0 12.5rem;
      width: 12.5rem;
      min-width: 0;
   }

   .section-nav a:before,
   .section-nav a[aria-current=page]:before,
   .section-nav a:hover:before,
   .section-nav a:focus-visible:before {
      inset: 0 calc(-1 * var(--nav-slant)) 0 0;
      transform: none;
      clip-path: polygon(var(--nav-slant) 0, 100% 0, calc(100% - var(--nav-slant)) 100%, 0 100%);
   }

   .section-nav a>span {
      translate: calc(var(--nav-slant) / 2) 0;
   }
}

/* Shared right-hand online service rail. */
.service-sidebar {
   position: fixed;
   right: 28px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 40;
   color: var(--ink);
   font-size: 18px;
   line-height: 26px
}

.service-sidebar__panel {
   width: 5.4rem;
   padding: 1.4rem 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   background: #fff;
   border: 1px solid #d1d5df;
   border-radius: 20px;
   box-shadow: 0 12px 30px #3f327924;
}

.service-sidebar__action {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   width: 5.4rem;
   color: var(--ink);
   font: inherit;
   text-align: center;
   white-space: nowrap;
   transition: color 250ms ease;
   font-size: 1rem;
}

.service-sidebar__icon {
   display: grid;
   place-items: center;
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
   border-radius: 50%;
   background: var(--purple);
   transition: background-color 250ms ease, transform 350ms cubic-bezier(.22, 1, .36, 1)
}

.service-sidebar__icon img {
   display: block;
   width: 1.8rem;
   height: 1.8rem;
}

.service-sidebar__top .service-sidebar__icon {
   background: var(--teal)
}

.service-sidebar__wechat,
.service-sidebar__phone {
   position: relative
}

.service-sidebar__popup,
.service-sidebar__phone-tip {
   position: absolute;
   right: calc(100% + 22px);
   top: 0;
   width: 204px;
   padding: 18px;
   background: #fff;
   border: 1px solid #d1d5df;
   border-radius: 16px;
   box-shadow: 0 8px 28px #3f327912;
   text-align: center;
   font-size: 13px;
   line-height: 1.7;
   color: var(--ink)
}

.service-sidebar__popup::after,
.service-sidebar__phone-tip::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 100%;
   width: 24px
}

.service-sidebar__popup strong {
   display: block;
   margin-bottom: 10px;
   color: var(--purple);
   font-size: 16px;
   font-weight: 500
}

.service-sidebar__qr {
   display: block;
   width: 160px;
   height: 160px;
   object-fit: contain;
   margin: 0 auto 8px
}

.service-sidebar__phone-tip {
   top: 8px;
   visibility: hidden;
   opacity: 0;
   transform: translateX(6px);
   transition: opacity 220ms ease, transform 220ms ease, visibility 220ms
}

.service-sidebar__phone-tip strong {
   display: block;
   color: var(--purple);
   font-size: 20px;
   font-weight: 500;
   white-space: nowrap
}

.service-sidebar__phone:hover .service-sidebar__phone-tip,
.service-sidebar__phone:focus-within .service-sidebar__phone-tip {
   visibility: visible;
   opacity: 1;
   transform: none
}

.service-sidebar__toggle {
   display: none
}

@media(hover:hover) and (pointer:fine) {
   .service-sidebar__action:hover {
      color: var(--purple)
   }

   .service-sidebar__action:hover .service-sidebar__icon {
      background: var(--teal);
      transform: translateY(-2px)
   }

   .service-sidebar__top:hover .service-sidebar__icon {
      background: var(--purple)
   }
}

@media(min-width:641px) and (max-height:600px) {
   .service-sidebar__panel {
      padding: 12px 8px;
      gap: 8px
   }

   .service-sidebar__action {
      gap: 4px;
      font-size: 14px;
      line-height: 22px
   }

   .service-sidebar__icon {
      width: 36px;
      height: 36px
   }

   .service-sidebar__icon img {
      width: 25px;
      height: 25px
   }
}

@media(max-width:1200px) and (min-width:641px) {
   .service-sidebar {
      right: 12px
   }
}

@media(max-width:640px) {
   .service-sidebar {
      top: auto;
      right: 12px;
      bottom: max(20px, env(safe-area-inset-bottom));
      transform: none;
      font-size: 13px;
      line-height: 20px
   }

   .service-sidebar__toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 52px;
      padding: 5px 0;
      border: 1px solid #d1d5df;
      border-radius: 15px;
      background: #fff;
      color: var(--purple);
      font-size: 12px;
      line-height: 18px
   }

   .service-sidebar__toggle .service-sidebar__icon {
      width: 30px;
      height: 30px
   }

   .service-sidebar__toggle .service-sidebar__icon img {
      width: 22px;
      height: 22px
   }

   .service-sidebar__panel {
      display: none;
      position: absolute;
      bottom: 70px;
      right: 0;
      width: 76px;
      padding: 12px 4px;
      gap: 8px;
      border-radius: 16px
   }

   .service-sidebar.is-open .service-sidebar__panel {
      display: flex
   }

   .service-sidebar__action {
      width: 66px;
      gap: 4px;
      font-size: 0.85rem;
   }

   .service-sidebar__icon {
      width: 34px;
      height: 34px
   }

   .service-sidebar__icon img {
      width: 24px;
      height: 24px
   }

   .service-sidebar__popup {
      width: 180px;
      right: calc(100% + 16px);
      padding: 12px;
      font-size: 12px
   }

   .service-sidebar__qr {
      width: 150px;
      height: 150px
   }

   .service-sidebar__phone-tip {
      display: none
   }
}

@media(prefers-reduced-motion:reduce) {
   .service-sidebar * {
      transition: none !important
   }
}
.product-card__origin>.product-card__brand {display:flex;flex:1;align-self:stretch;min-width:0}
.product-card__origin a {display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit;text-decoration:none}
.product-card__origin a:hover {text-decoration:none}
.product-card__origin a:focus-visible {outline:2px solid currentColor;outline-offset:3px}