/* KETAI is the company identity; Material World remains the site identity. */
.ketai-company-mark { display:block; width:104px; height:auto; margin:0 0 18px; }
.company-story .ketai-company-mark { width:96px; margin-bottom:22px; }
.footer-grid .ketai-footer-mark { display:inline-block; margin-top:16px; line-height:0; }
.footer-grid .ketai-footer-mark img { display:block; width:82px; height:auto; }
@media(max-width:760px) {
  .ketai-company-mark { width:88px; margin-bottom:14px; }
  .company-story .ketai-company-mark { width:88px; margin-bottom:18px; }
}

/* Header: company identity with the Material World name. */
.site-header .brand { display:flex; align-items:center; gap:10px; line-height:1; }
.site-header .brand .ketai-header-logo { display:block; width:64px; height:auto; max-height:54px; flex:0 0 64px; }
.site-header .site-wordmark { display:flex; flex-direction:column; gap:6px; min-width:0; color:#242629; white-space:nowrap; }
.site-header .site-wordmark strong { font-size:19px; font-weight:600; letter-spacing:.02em; }
.site-header .site-wordmark small { font:600 9px/1 Arial,sans-serif; letter-spacing:.12em; color:#666b73; }
@media(max-width:950px){ .site-header .brand .ketai-header-logo{width:55px;flex-basis:55px}.site-header .site-wordmark strong{font-size:16px} }
@media(max-width:760px){ .site-header .brand{gap:7px}.site-header .brand .ketai-header-logo{width:46px;flex-basis:46px}.site-header .site-wordmark{gap:5px}.site-header .site-wordmark strong{font-size:15px}.site-header .site-wordmark small{font-size:8px;letter-spacing:.06em} }
@media(max-width:360px){ .site-header .brand .ketai-header-logo{width:41px;flex-basis:41px}.site-header .site-wordmark strong{font-size:14px} }

/* Footer Procurement Channels & QR Code Grid */
.footer-social-row { display:flex; justify-content:space-between; align-items:flex-start; gap:36px; padding:28px 0 32px; border-top:1px solid #3c424a; flex-wrap:wrap; }
.footer-channels-block { flex:1 1 360px; }
.footer-channels-block .channels-label { display:block; font-size:12px; font-weight:500; color:#f0f1f3; margin-bottom:14px; letter-spacing:.03em; }
.footer-channels-block .channel-links { display:flex; flex-wrap:wrap; gap:10px 14px; }
.footer-channels-block .channel-link { display:inline-flex; align-items:center; gap:6px; background:#32373e; color:#d1d5db; padding:8px 14px; border-radius:4px; font-size:12px; border:1px solid #434952; transition:all .15s ease; text-decoration:none; }
.footer-channels-block .channel-link:hover { background:#3e444d; color:#ffffff; border-color:#58606c; }
.footer-qr-container { display:flex; gap:16px; flex-wrap:wrap; }
.footer-qr-item { text-align:center; background:#1e2125; border:1px solid #363b43; border-radius:6px; padding:10px 10px 8px; width:108px; box-shadow:0 4px 12px rgba(0,0,0,0.18); transition:transform .2s, border-color .2s; }
.footer-qr-item:hover { transform:translateY(-2px); border-color:#555d69; }
.footer-qr-item img { display:block; width:88px; height:88px; margin:0 auto 6px; border-radius:3px; background:#fff; padding:2px; object-fit:contain; }
.footer-qr-item p { font-size:11px; color:#a0aab6; margin:0; line-height:1.3; }

/* Contact Page QR Section */
.contact-qr-section { margin-top:35px; padding-top:30px; border-top:1px solid var(--line); }
.contact-qr-section h3 { font-size:18px; font-weight:500; margin-bottom:16px; }
.contact-qr-grid { display:flex; gap:20px; flex-wrap:wrap; }
.contact-qr-card { text-align:center; background:var(--canvas); border:1px solid var(--line); border-radius:6px; padding:16px 14px; width:130px; }
.contact-qr-card img { display:block; width:100px; height:100px; margin:0 auto 8px; border-radius:4px; background:#fff; padding:3px; border:1px solid #e2e5e8; }
.contact-qr-card strong { display:block; font-size:12px; color:var(--text); margin-bottom:4px; }
.contact-qr-card span { display:block; font-size:11px; color:var(--muted); line-height:1.3; }

@media(max-width:760px) {
  .footer-social-row { flex-direction:column; gap:22px; padding:20px 0 24px; }
  .footer-qr-container { display:grid; grid-template-columns:repeat(2, 1fr); width:100%; gap:12px; }
  .footer-qr-item { width:100%; }
  .footer-qr-item img { width:96px; height:96px; }
  .contact-qr-grid { display:grid; grid-template-columns:repeat(2, 1fr); width:100%; gap:12px; }
  .contact-qr-card { width:100%; }
}

/* Combined logo is the complete header wordmark. */
.site-header .brand .combined-header-logo { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }

/* Subtle official procurement & media channel links in homepage Hero */
.hero-channels-subtle {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12.5px;
  line-height: 1.6;
}
.hero-channels-subtle-title {
  color: #7b808c;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.hero-channels-subtle .hero-channel-link {
  color: #b2b6bf;
  text-decoration: none;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  transition: color 0.2s ease;
  white-space: nowrap;
  font-weight: 400;
}
.hero-channels-subtle .hero-channel-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-color: #aa2837 !important;
}
.hero-channels-subtle .hero-channel-sep {
  color: #434751;
  user-select: none;
  font-size: 11px;
}
@media (max-width: 760px) {
  .hero-channels-subtle {
    margin-top: 20px;
    gap: 6px 10px;
    font-size: 11px;
  }
}

/* Hero Ambient Background Carousel with Counter-Parallax & Frosted Blur */
.brand-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #0f1115 !important;
}

.hero-ambient-container {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-ambient-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  transform: scale(1.06) translate3d(24px, 0, 0);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(5px) saturate(0.65) brightness(0.70);
  will-change: opacity, transform;
}

.hero-ambient-slide.is-active {
  opacity: 1;
  transform: scale(1.04) translate3d(0, 0, 0);
}

.hero-ambient-slide.is-leaving {
  opacity: 0;
}

/* Frosted glass & high-contrast dark overlay to guarantee 100% text readability */
.hero-ambient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(14, 16, 20, 0.88) 0%,
    rgba(14, 16, 20, 0.74) 45%,
    rgba(14, 16, 20, 0.60) 100%
  );
  backdrop-filter: blur(3px);
}

/* Foreground content floating sharply above ambient background */
.brand-hero .hero-stage,
.brand-hero .hero-foot {
  position: relative;
  z-index: 2;
}

.brand-hero .hero-copy h1 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.brand-hero .hero-copy p {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.brand-hero .hero-channels-subtle {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Extended Navigation Dropdowns (.nav-tools, .nav-about) */
:is(.nav-products, .nav-tools, .nav-support, .nav-about) { position:relative; font-size:13px; white-space:nowrap; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about) summary { list-style:none; cursor:pointer; padding:30px 0; position:relative; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about) summary::-webkit-details-marker { display:none; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about) summary>span { font-size:12px; margin-left:4px; color:#777; display:inline-block; transition:rotate var(--motion-ui, 0.25s) ease; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about).current summary:after { content:''; width:16px; height:2px; background:var(--red, #aa2837); position:absolute; bottom:17px; left:calc(50% - 8px); }
:is(.nav-products, .nav-tools, .nav-support, .nav-about) summary:focus-visible { outline:2px solid var(--red, #aa2837); outline-offset:3px; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about)[open] summary { color:var(--red, #aa2837); }
:is(.nav-products, .nav-tools, .nav-support, .nav-about)[open] summary>span { rotate:180deg; }
:is(.nav-products, .nav-tools, .nav-support, .nav-about)[open] .nav-flyout { animation:mw-panel-in var(--motion-panel, 0.25s) ease; }

@media(max-width:950px) {
  :is(.nav-products, .nav-tools, .nav-support, .nav-about) { width:100%; }
  :is(.nav-products, .nav-tools, .nav-support, .nav-about) summary { padding:12px 0; }
  :is(.nav-products, .nav-tools, .nav-support, .nav-about) .nav-flyout { position:static; box-shadow:none; min-width:0; background:#f5f5f6; border:0; margin:0 0 10px; padding:6px; }
  :is(.nav-products, .nav-tools, .nav-support, .nav-about).current summary:after { display:none; }
}


/* Consistent alignment for the shared navigation. */
@media(min-width:761px){.site-header .nav{align-items:center;gap:clamp(12px,1.35vw,22px)}.site-header .nav>a:not(.nav-contact-btn),.site-header .nav>details>summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0;line-height:1.4;white-space:nowrap}.site-header .nav>details{display:flex;align-items:center}.site-header .nav>a.current:after,.site-header .nav>details.current>summary:after{bottom:-8px}.site-header .header-inner{align-items:center}}
@media(max-width:760px){.site-header .nav.open{align-items:stretch}.site-header .nav.open>details>summary,.site-header .nav.open>a:not(.nav-contact-btn){display:flex;align-items:center;min-height:46px;box-sizing:border-box;padding:12px 0;line-height:1.4}}