.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.container-narrow { --container: 56rem; }
.section { padding-block: var(--space-7); }
.section-muted { background: var(--color-surface-muted); }
.section-dark { background: var(--color-dark); color: var(--color-on-dark); }
.site-header { position: relative; z-index: 100; background: var(--color-surface); border-block-end: 1px solid var(--color-line); }
.utility-bar { min-height: var(--utility-height); display: flex; align-items: center; background: #0f609d; color: var(--color-on-brand); font-size: 14px; }
.utility-row { display: flex; width: 94%; max-width: 93.75rem; min-height: var(--utility-height); align-items: center; justify-content: space-between; gap: var(--space-3); }
.utility-contact { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.utility-contact > a, .utility-contact > span { display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; }
.utility-contact span > span, .utility-contact a > span { opacity: .78; }
.navigation-bar { position: relative; background: var(--color-surface); }
.header-row { min-height: var(--header-height); display: grid; width: 94%; max-width: 93.75rem; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; min-width: 10rem; color: var(--color-ink); font-size: var(--step-1); font-weight: 700; text-decoration: none; }
.brand-logo { max-width: 21.9375rem; max-height: 3.875rem; object-fit: contain; }
.brand-logo-mobile { display: none; }
.primary-navigation { justify-self: end; margin-inline-end: 4.75rem; }
.nav-list, .submenu-list, .submenu-list ul, .footer-nav, .contact-list, .contact-channels { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 2.7rem; }
.nav-item { position: static; }
.submenu { position: absolute; inset-block-start: 100%; inset-inline: 0; height: 22.625rem; visibility: hidden; opacity: 0; transform: translateY(.5rem); background: #f2f3f1; border-block-end: 3px solid var(--color-brand); box-shadow: var(--shadow); transition: var(--transition); }
.nav-item:hover > .submenu, .nav-item:focus-within > .submenu, .nav-item.is-open > .submenu { visibility: visible; opacity: 1; transform: none; }
.submenu-inner { display: grid; width: 92%; max-width: 93.75rem; height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) 27.04rem; grid-template-rows: 1.625rem 1fr; column-gap: 5.75rem; padding-block: 3.75rem 3rem; }
.submenu-heading { grid-column: 1; grid-row: 1; color: var(--color-ink); font-size: 26px; font-weight: 700; line-height: 1; text-decoration: none; }
.submenu-list { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0; min-width: 0; margin-block-start: 1.875rem; }
.submenu-list > li { min-width: 0; padding-inline-end: 2.45rem; }
.submenu-list > li > a { display: flex; min-height: 3.125rem; align-items: center; gap: .5rem; border-block-end: 1px solid #d7d8d6; font-size: 16px; font-weight: 400; line-height: 1.2; text-decoration: none; white-space: normal; }
.submenu-list > li > a::after { content: "›"; flex: 0 0 auto; margin-inline-start: auto; color: #8a8a8a; font-size: 14px; }
.submenu-list > li.is-current > a, .submenu-list > li.is-ancestor > a, .submenu-list a:hover { color: var(--color-brand); }
.submenu-list ul { display: grid; gap: .3rem; margin-block-start: .65rem; }
.submenu-list ul a { color: var(--color-ink-soft); font-size: 14px; line-height: 1.45; text-decoration: none; white-space: normal; }
.submenu-media { display: none; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 27.04rem; height: 16.9rem; margin-block-start: -1rem; overflow: hidden; background: var(--color-surface-muted); }
.submenu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.submenu-media:hover img { transform: scale(1.02); }
.nav-list > .nav-item:nth-child(2) .submenu-media-about, .nav-list > .nav-item:nth-child(3) .submenu-media-product { display: block; }
.site-footer { background: #333; color: var(--color-on-dark); }
.site-footer > .container { width: 92%; max-width: 93.75rem; }
.footer-main { display: grid; grid-template-columns: 20% 45% 25%; column-gap: 5%; min-height: 0; padding-block: calc(3.125rem + 2%) 3.125rem; }
.footer-qr-area, .footer-navigation-groups, .footer-contact-area { min-height: 20.4375rem; }
.footer-qr-area { padding: 0; }
.footer-qr-list { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-around; gap: 2rem 1.5rem; }
.footer-navigation-groups { display: grid; grid-template-columns: 35.72% 64.28%; gap: 0; padding-inline: 22.316% 11.208%; border-inline: 1px solid rgba(255, 255, 255, .14); }
.footer-contact-area { padding: 0; }
.site-footer > .footer-bottom { position: relative; width: 90%; max-width: 93.75rem; min-height: 4rem; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.footer-bottom::before { position: absolute; inset-block-start: 0; inset-inline-start: 50%; width: 102.222222%; max-width: 93.75rem; border-block-start: 1px solid rgba(255, 255, 255, .14); content: ""; transform: translateX(-50%); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.content-list { display: grid; gap: 0; }
.split-feature, .inquiry-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .7fr); gap: var(--space-7); align-items: start; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); gap: var(--space-6); }
.product-content { grid-column: 1 / -1; }
.page-heading { max-width: 55rem; padding-block: var(--space-7) var(--space-6); }
@media (max-width: 960px) {
  .header-row { width: 100%; max-width: none; min-height: 3.75rem; grid-template-columns: 1fr 3.75rem; gap: 0; padding-inline-start: .9375rem; }
  .primary-navigation { position: absolute; inset-block-start: 100%; inset-inline: 0; display: none; width: 100%; max-height: calc(100vh - var(--utility-height) - 3.75rem); justify-self: stretch; margin-inline-end: 0; overflow-y: auto; background: var(--color-surface); border-block-end: 1px solid var(--color-line); box-shadow: var(--shadow); }
  .primary-navigation.is-open { display: block; }
  .nav-list { display: block; padding: 0; }
  .nav-item { position: relative; border-block-end: 1px solid var(--color-line); }
  .nav-item > a { display: block; padding: var(--space-2); }
  .submenu { position: static; display: none; height: auto; visibility: visible; opacity: 1; transform: none; background: var(--color-surface); border-block-start: 1px solid var(--color-line); border-block-end: 0; box-shadow: none; }
  .nav-item.is-open > .submenu { display: block; }
  .submenu-inner { display: block; width: 100%; height: auto; min-height: 0; padding-block: .35rem .85rem; }
  .submenu-heading, .submenu-media { display: none !important; }
  .submenu-list { display: grid; grid-template-columns: 1fr; gap: 0; }
  .submenu-list > li > a { display: block; padding: .65rem 2.75rem .65rem 1rem; font-size: var(--step--1); white-space: normal; }
  .submenu-list ul { gap: 0; margin: 0; padding-inline-start: var(--space-2); }
  .submenu-list ul a { display: block; padding: .5rem 1rem; white-space: normal; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-feature, .inquiry-layout, .product-detail { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; min-height: 0; padding-block: 0; }
  .footer-qr-area, .footer-navigation-groups, .footer-contact-area { min-height: 0; padding: 2.5rem 0; border-inline: 0; }
  .footer-qr-area, .footer-navigation-groups { border-block-end: 1px solid rgba(255, 255, 255, .14); }
  .footer-qr-list { justify-content: flex-start; }
  .footer-navigation-groups { gap: var(--space-5); }
  .site-footer > .footer-bottom { width: min(calc(100% - 2rem), var(--container)); }
  .footer-bottom::before { width: 100%; }
}
@media (max-width: 640px) {
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .utility-row { width: 94%; }
  .header-row { width: 100%; }
  .utility-row { justify-content: flex-end; }
  .utility-contact { display: none; }
  .brand-logo-desktop { display: none; }
  .brand-logo-mobile { display: block; }
  .brand-logo { max-width: 12.5rem; max-height: 3rem; }
  .card-grid { grid-template-columns: 1fr; }
  .site-footer > .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .footer-qr-area, .footer-navigation-groups, .footer-contact-area { padding-block: 2rem; }
  .footer-navigation-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .footer-bottom { display: grid; }
}