/* Shared site styles consolidated from the final release cascade. */
:root {
  color-scheme: light;
  --brand-cosmic: #112d5f;
  --brand-secondary: #244d8c;
  --brand-ice: #d6deeb;
  --brand-dawn: #e8ebf0;
  --brand-system: #14c4e7;
  --brand-aurora: #00d4d4;
  --brand-ink: #112d5f;
  --neutral-0: #ffffff;
  --neutral-1: #f7f8fa;
  --neutral-2: #f0f2f5;
  --neutral-4: #c9cfd8;
  --neutral-6: #7b8494;
  --neutral-7: #555f70;
  --neutral-8: #353f50;
  --neutral-9: #1a2332;
  --accent-ink: #112d5f;
  --active-indicator: var(--brand-secondary);
  --canvas: var(--neutral-1);
  --surface: #ffffff;
  --section-surface: #ffffff;
  --surface-subtle: var(--neutral-2);
  --text: var(--neutral-9);
  --text-heading: var(--brand-cosmic);
  --text-muted: var(--neutral-8);
  --line: var(--neutral-4);
  --line-strong: var(--neutral-6);
  --header: rgba(17, 45, 95, 0.98);
  --header-text: #ffffff;
  --focus: var(--brand-secondary);
  --shadow-float: 0 16px 40px rgba(17, 45, 95, 0.12);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --type-display: 72px;
  --type-section: 48px;
  --type-statement: 56px;
  --type-lead: 22px;
  --type-title: 24px;
  --type-card-title: 34px;
  --type-layer-title: 42px;
  --type-feature-title: 42px;
  --type-metric: 40px;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --autoplay-duration: 5500ms;
  --carousel-duration: 6800ms;
}
/* 2026-08-06 site-wide layout and interaction refresh */
:root {
  --qnbot-deep: #050b16;
  --qnbot-cyan: #66e9f1;
  --qnbot-page: #f4f7fb;
}

/* Header: the home header and hero are one continuous dark surface. */
.home-page .site-header,
.home-page .site-header.is-scrolled,
.about-page .site-header,
.about-page .site-header.is-scrolled {
  background: var(--qnbot-deep) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.home-page .site-header::before,
.about-page .site-header::before { display: none !important; }
.home-page .site-header .brand img,
.home-page .site-header.is-scrolled .brand img,
.about-page .site-header .brand img,
.about-page .site-header.is-scrolled .brand img { filter: brightness(0) invert(1) !important; }

.main-nav a,
.home-page .main-nav a,
.home-page .site-header.is-scrolled .main-nav a,
.about-page .main-nav a,
.about-page .site-header.is-scrolled .main-nav a {
  position: relative;
  color: rgba(235,242,248,.76) !important;
  background: transparent !important;
}
.main-nav a::before { display: none !important; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(102,233,241,.65), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.45);
  transition: opacity .2s ease, transform .25s ease, filter .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.home-page .main-nav a:hover,
.home-page .main-nav a:focus-visible,
.about-page .main-nav a:hover,
.about-page .main-nav a:focus-visible {
  color: rgba(154,240,246,.92) !important;
  transform: none;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { opacity: .55; transform: translateX(-50%) scaleX(1); }
.main-nav a.active,
.home-page .main-nav a.active,
.about-page .main-nav a.active {
  color: var(--qnbot-cyan) !important;
  font-weight: 700;
}
.main-nav a.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  background: linear-gradient(90deg, transparent, #66e9f1 22%, #9ef8fc 50%, #66e9f1 78%, transparent);
  box-shadow: 0 0 8px rgba(102,233,241,.85), 0 0 18px rgba(102,233,241,.42);
}
.home-page .header-consult-button,
.home-page .site-header.is-scrolled .header-consult-button,
.about-page .header-consult-button,
.about-page .site-header.is-scrolled .header-consult-button { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.07) !important; }
.subnav,
.subnav.is-scrolled { background: rgba(255,255,255,.98) !important; color: var(--text); }

/* Every major desktop story panel owns one viewport; mobile keeps natural flow. */
@media (min-width: 1024px) {
  .home-page main > section:not(.home-video-hero),
  .teleop-page main > section,
  .data-platform-page main > section {
    min-height: calc(100svh - 72px);
    display: grid;
    align-content: center;
  }
}

/* Product overview rebuilt around the two service modes in the planning PDF. */
#legacy-products-main,
.products-page > .context-cta { display: none !important; }
.service-overview-main { background: var(--qnbot-page); }
.service-screen {
  min-height: calc(100svh - 122px);
  padding: clamp(64px, 8vh, 104px) 0;
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 122px;
}
.service-screen-inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.service-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(42px, 7vw, 110px); }
.service-hero h1 { margin: 0; max-width: 760px; color: var(--text-heading); font-size: clamp(48px, 5.5vw, 82px); line-height: 1.08; }
.service-hero p { max-width: 690px; margin: 26px 0 0; color: var(--text-muted); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.75; }
.service-anchor-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.service-hero-visual { position: relative; min-height: min(600px, 62vh); border-radius: 28px; background: linear-gradient(145deg,#e7edf5,#f9fbfd); overflow: hidden; }
.service-hero-visual img { position: absolute; object-fit: contain; }
.service-hero-visual img:nth-child(1) { inset: 12% 20% auto auto; width: 62%; }
.service-hero-visual img:nth-child(2) { left: 3%; bottom: 0; width: 48%; height: 63%; }
.service-hero-visual img:nth-child(3) { right: 0; bottom: -2%; width: 46%; height: 58%; }
.service-screen-head { max-width: 920px; margin-bottom: clamp(30px, 5vh, 56px); }
.service-screen-head h2 { margin: 0; color: var(--text-heading); font-size: clamp(40px, 4.4vw, 66px); line-height: 1.1; }
.service-screen-head p { margin: 16px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.7; }
.service-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); }
.service-card { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); min-height: min(540px,58vh); border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.service-card-media { min-height: 0; display: grid; place-items: center; padding: 26px; background: #e9eef5; }
.service-card-media img { width: 100%; height: 100%; max-height: 460px; object-fit: contain; }
.service-card-media-wide img { max-width: 94%; max-height: 88%; }
.service-card-copy { align-self: center; padding: clamp(28px,3vw,48px); }
.service-card-copy h3 { margin: 0; color: var(--text-heading); font-size: clamp(28px,2.6vw,42px); }
.service-card-copy p { margin: 16px 0; color: var(--text-muted); line-height: 1.7; }
.service-card-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.service-card-copy li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-heading); font-size: 13px; }
.service-final { text-align: center; }
.service-final .service-screen-inner { display: grid; justify-items: center; }
.service-final h2 { max-width: 1000px; margin: 0; color: var(--text-heading); font-size: clamp(42px,5vw,74px); }
.service-final p { margin: 20px 0 34px; color: var(--text-muted); font-size: 18px; }

/* Product detail screens share one background and one viewport rhythm. */
.pdf-product-page .pdf-screen,
.pdf-product-page .pdf-screen:nth-child(even) { background: var(--qnbot-page) !important; }
.pdf-product-page .pdf-screen { min-height: calc(100svh - 122px); padding-block: clamp(48px,6vh,76px); }
.pdf-product-page .pdf-hero-title { display: grid; gap: .04em; }
.pdf-product-page .product-name { font-size: .92em; letter-spacing: -.035em; white-space: nowrap; }
.pdf-product-page .product-cn { font-size: .8em; }
.product-feature-screen .pdf-split-grid { align-items: center; }
.pdf-gallery-main { position: relative; }
.pdf-gallery-main.is-empty img { visibility: hidden; }
.pdf-gallery-main.is-empty::after { content: "SDK 硬件组件图待补充"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 18px; }
.pdf-gallery-thumbs button,
.pdf-feature-list button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pdf-gallery-thumbs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pdf-gallery-thumbs button { min-width: 0; width: 100%; height: 100%; padding: 8px; border: 1px solid transparent; border-radius: 10px; }
.pdf-gallery-thumbs button.is-active { border-color: var(--brand-aurora); box-shadow: 0 0 0 2px rgba(0,212,212,.12); }
.pdf-gallery-thumbs img { width: 100%; height: 68px; object-fit: contain; }
.pdf-feature-list > li { transition: background .2s ease, color .2s ease; }
.pdf-feature-list > li.is-active { background: rgba(0,212,212,.07); }
.pdf-feature-list button { width: 100%; padding: 14px 16px; }
.pdf-hardware-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,2.5vw,30px); }
.pdf-hardware-cards article { min-width: 0; display: grid; grid-template-rows: minmax(145px,22vh) auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.pdf-hardware-cards article img { width: 100%; height: 100%; padding: 18px; object-fit: contain; background: #e9eef5; }
.pdf-hardware-cards article > div { padding: 22px 24px 26px; }
.pdf-hardware-cards article h3 { margin-top: 0; }
.staged-cards article { opacity: 0; transform: translateY(24px); }
.staged-cards.is-inview article { animation: qnbot-card-in .58s cubic-bezier(.2,.7,.2,1) forwards; }
.staged-cards.is-inview article:nth-child(2) { animation-delay: .13s; }
.staged-cards.is-inview article:nth-child(3) { animation-delay: .26s; }
@keyframes qnbot-card-in { to { opacity: 1; transform: none; } }
.static-spec-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(26px,4vw,56px); margin-top: 0; }
.static-spec-details dl { margin: 0; }
.static-spec-details dl > div { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(0,1fr); align-items: center; gap: 20px; min-height: 58px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.static-spec-details dt { color: var(--text-muted); }
.static-spec-details dd { margin: 0; color: var(--text-heading); font-weight: 650; text-align: right; line-height: 1.5; }
.glove-bundle-screen .pdf-bundle-grid,
.exo-bundle-screen .pdf-bundle-grid { align-items: stretch; }
.glove-bundle-screen .pdf-bundle-card,
.exo-bundle-screen .pdf-bundle-card { height: 100%; min-height: 0; grid-template-rows: minmax(210px,30vh) auto; }
.glove-bundle-screen .pdf-bundle-media,
.exo-bundle-screen .pdf-bundle-media { width: 100%; height: auto; min-height: 0; aspect-ratio: 16/8.5; padding: 22px; }
.glove-bundle-screen .pdf-bundle-media img,
.exo-bundle-screen .pdf-bundle-media img { width: 100%; height: 100%; max-width: 88%; max-height: 88%; object-fit: contain; }
.glove-bundle-screen .pdf-bundle-copy,
.exo-bundle-screen .pdf-bundle-copy { padding: 24px 28px 28px; }
.unified-contact-cta.pdf-screen { min-height: min(480px,56svh) !important; background: #fff !important; text-align: center; }
.unified-contact-cta .pdf-screen-inner { display: grid; justify-items: center; gap: 28px; }
.unified-contact-cta h2 { max-width: 1100px; margin: 0; color: var(--text-heading); font-size: clamp(40px,5vw,70px); }

/* About: one topic per viewport, replaying motion when the panel re-enters. */
#legacy-about-main { display: none !important; }
.about-story-refresh { background: #fff; scroll-snap-type: y proximity; }
.about-story-panel { min-height: calc(100svh - 72px); padding: clamp(70px,9vh,112px) 0; display: grid; align-content: center; scroll-snap-align: start; overflow: hidden; }
.about-story-panel > .container { width: min(100% - (var(--gutter) * 2), var(--container)); }
.about-story-hero { background: var(--qnbot-deep); color: #fff; }
.about-story-hero h1 { max-width: 920px; margin: 0; font-size: clamp(64px,8vw,124px); line-height: 1.02; }
.about-story-hero p { max-width: 900px; margin: 38px 0 0; color: rgba(255,255,255,.62); font-size: 20px; line-height: 1.8; }
.about-story-panel h2 { margin: 0 0 34px; color: var(--text-heading); font-size: clamp(48px,6vw,88px); text-align: center; }
.about-story-panel .lead { max-width: 1200px; margin-inline: auto; color: var(--text-muted); font-size: clamp(18px,1.7vw,25px); line-height: 2; text-align: center; }
.about-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 38px; }
.about-value-grid article { padding: clamp(28px,3vw,46px); border: 1px solid var(--line); border-radius: 18px; background: var(--qnbot-page); }
.about-value-grid h3 { margin-top: 0; color: var(--text-heading); font-size: 28px; }
.replay-reveal > * { opacity: 0; transform: translateY(22px); }
.replay-reveal.is-inview > * { animation: qnbot-reveal .58s ease forwards; }
.replay-reveal.is-inview > *:nth-child(2) { animation-delay: .12s; }
.replay-reveal.is-inview > *:nth-child(3) { animation-delay: .24s; }
@keyframes qnbot-reveal { to { opacity: 1; transform: none; } }

/* Compact unified footer. */
.footer { padding: 0 !important; background: var(--qnbot-deep) !important; color: #fff; }
.footer-simple-main { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 36px; }
.footer-brand { display: flex; align-items: center; gap: 28px; }
.footer-brand img { width: 150px; height: auto; }
.footer-brand p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.65; }
.footer-contact-button { min-height: 52px; display: inline-flex; align-items: center; gap: 18px; padding: 0 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; }
.footer-contact-button:hover { border-color: var(--qnbot-cyan); color: var(--qnbot-cyan); }
.footer-simple-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-simple-bottom .container { min-height: 66px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 13px; }

/* Contact modal: light page surface, direct channel selection below the form. */
.contact-modal { background: var(--qnbot-page) !important; color: var(--text) !important; }
.contact-modal-scroll { background: var(--qnbot-page) !important; }
.contact-modal-header { background: var(--qnbot-page) !important; border-bottom: 1px solid var(--line) !important; }
.contact-modal-header h2 { color: var(--text-heading) !important; }
.contact-modal-close { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; padding: 0 !important; border-color: rgba(17,45,95,.3) !important; background: #fff !important; color: var(--text-heading) !important; font-size: 30px !important; line-height: 1 !important; }
.contact-modal-grid,
.contact-modal-grid-simple { min-height: 0 !important; background: var(--qnbot-page) !important; }
.contact-modal-form-wrap { background: transparent !important; }
.contact-modal .field label { color: var(--text-heading) !important; }
.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea { background: #fff !important; color: var(--text) !important; border-color: #cfd8e5 !important; }
.contact-channels { max-width: 900px; margin: 36px auto 0; padding: 26px; display: grid; grid-template-columns: minmax(230px,.72fr) minmax(300px,1.28fr); gap: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.contact-channels-copy h3 { margin: 0 0 8px; color: var(--text-heading); font-size: 26px; }
.contact-channels-copy a { color: var(--brand-cosmic); font-weight: 700; }
.contact-channels-copy p { color: var(--text-muted); line-height: 1.6; }
.contact-channel-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-channel-tabs button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--qnbot-page); color: var(--text); cursor: pointer; }
.contact-channel-tabs button.is-active { border-color: var(--brand-aurora); color: var(--brand-cosmic); box-shadow: 0 0 0 2px rgba(0,212,212,.1); }
.contact-channel-preview { display: grid; justify-items: center; align-content: center; min-height: 230px; padding: 18px; border-radius: 14px; background: var(--qnbot-page); }
.contact-channel-preview img { width: 190px; height: 190px; object-fit: contain; background: #fff; transition: opacity .18s ease, transform .18s ease; }
.contact-channel-preview.is-changing img { opacity: .25; transform: scale(.96); }
.contact-channel-preview p { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; }

/* All end-of-page contact calls use the same centered title + button pattern. */
.context-cta .eyebrow,
.context-cta .cta-copy > p { display: none; }
.context-cta .cta-inner { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.context-cta .actions { justify-content: center; }

@media (max-width: 1023px) {
  .service-screen { min-height: auto; }
  .service-hero-grid,
  .service-card { grid-template-columns: 1fr; }
  .service-card-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card-media { min-height: 320px; }
  .pdf-hardware-cards { grid-template-columns: 1fr; }
  .static-spec-details { grid-template-columns: 1fr; }
  .about-story-panel { min-height: calc(100svh - 64px); }
}

@media (max-width: 767px) {
  .main-nav a::after { display: none; }
  .home-page .main-nav,
  .about-page .main-nav { background: var(--qnbot-deep); }
  .service-screen { padding-block: 56px; scroll-margin-top: 120px; }
  .service-hero-grid { gap: 36px; }
  .service-hero h1 { font-size: 42px; }
  .service-hero-visual { min-height: 360px; }
  .service-card-media { min-height: 260px; }
  .pdf-product-page .pdf-screen { min-height: auto; }
  .pdf-product-page .product-name { white-space: normal; }
  .pdf-gallery-thumbs img { height: 48px; }
  .static-spec-details dl > div { grid-template-columns: 1fr; gap: 6px; }
  .static-spec-details dd { text-align: left; }
  .pdf-bundle-grid { grid-template-columns: 1fr; }
  .about-story-refresh { scroll-snap-type: none; }
  .about-story-panel { min-height: 100svh; padding-block: 70px; }
  .about-story-hero h1 { font-size: 54px; }
  .about-value-grid { grid-template-columns: 1fr; }
  .footer-simple-main { min-height: 0; flex-direction: column; align-items: flex-start; padding-block: 34px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-simple-bottom .container { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
  .contact-modal-grid-simple { display: block !important; }
  .contact-modal-form-wrap { padding: 20px 16px 26px !important; }
  .contact-modal-fields { grid-template-columns: 1fr !important; }
  .contact-channels { grid-template-columns: 1fr; padding: 18px; }
  .contact-channel-preview { min-height: 220px; }
  .contact-channel-preview img { width: 180px; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .staged-cards article,
  .replay-reveal > * { opacity: 1; transform: none; animation: none !important; }
}

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }

/* Header state correction: only immersive first screens are dark. */
body:not(.home-page):not(.about-page) .site-header,
body:not(.home-page):not(.about-page) .site-header.is-scrolled,
body.home-page .site-header.is-scrolled,
body.about-page .site-header.is-scrolled {
  background: rgba(255,255,255,.985) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 10px 30px rgba(17,45,95,.09) !important;
  color: var(--brand-ink) !important;
}
body:not(.home-page):not(.about-page) .site-header .brand img,
body.home-page .site-header.is-scrolled .brand img,
body.about-page .site-header.is-scrolled .brand img { filter: none !important; }

body:not(.home-page):not(.about-page) .site-header .main-nav a,
body:not(.home-page):not(.about-page) .site-header.is-scrolled .main-nav a,
body.home-page .site-header.is-scrolled .main-nav a,
body.about-page .site-header.is-scrolled .main-nav a {
  color: var(--text-muted) !important;
}
body:not(.home-page):not(.about-page) .site-header .main-nav a:hover,
body:not(.home-page):not(.about-page) .site-header .main-nav a:focus-visible,
body.home-page .site-header.is-scrolled .main-nav a:hover,
body.home-page .site-header.is-scrolled .main-nav a:focus-visible,
body.about-page .site-header.is-scrolled .main-nav a:hover,
body.about-page .site-header.is-scrolled .main-nav a:focus-visible {
  color: #168fa7 !important;
}
body:not(.home-page):not(.about-page) .site-header .main-nav a.active,
body.home-page .site-header.is-scrolled .main-nav a.active,
body.about-page .site-header.is-scrolled .main-nav a.active {
  color: #087f96 !important;
}
body:not(.home-page):not(.about-page) .site-header .main-nav a::after,
body.home-page .site-header.is-scrolled .main-nav a::after,
body.about-page .site-header.is-scrolled .main-nav a::after {
  background: linear-gradient(90deg, transparent, rgba(20,196,231,.75), transparent);
  box-shadow: none;
}
body:not(.home-page):not(.about-page) .site-header .main-nav a.active::after,
body.home-page .site-header.is-scrolled .main-nav a.active::after,
body.about-page .site-header.is-scrolled .main-nav a.active::after {
  background: linear-gradient(90deg, transparent, #14c4e7 22%, #52dcec 50%, #14c4e7 78%, transparent);
  box-shadow: 0 0 7px rgba(20,196,231,.48);
}
body:not(.home-page):not(.about-page) .site-header .header-consult-button,
body.home-page .site-header.is-scrolled .header-consult-button,
body.about-page .site-header.is-scrolled .header-consult-button {
  border-color: var(--brand-ink) !important;
  background: var(--brand-ink) !important;
  color: #fff !important;
}

body.home-page .site-header:not(.is-scrolled),
body.about-page .site-header:not(.is-scrolled) {
  background: var(--qnbot-deep) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.home-page .site-header:not(.is-scrolled) .main-nav a,
body.about-page .site-header:not(.is-scrolled) .main-nav a { color: rgba(235,242,248,.76) !important; }
body.home-page .site-header:not(.is-scrolled) .main-nav a:hover,
body.home-page .site-header:not(.is-scrolled) .main-nav a:focus-visible,
body.about-page .site-header:not(.is-scrolled) .main-nav a:hover,
body.about-page .site-header:not(.is-scrolled) .main-nav a:focus-visible { color: rgba(154,240,246,.92) !important; }
body.home-page .site-header:not(.is-scrolled) .main-nav a.active,
body.about-page .site-header:not(.is-scrolled) .main-nav a.active { color: var(--qnbot-cyan) !important; }

@media (max-width: 767px) {
  body:not(.home-page):not(.about-page) .main-nav,
  body.home-page .site-header.is-scrolled .main-nav,
  body.about-page .site-header.is-scrolled .main-nav { background: #fff !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand-aurora); color: var(--brand-ink); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000; transform: translateY(-160%);
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--brand-aurora); color: var(--brand-ink); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }

.site-header {
  position: sticky; top: 0; z-index: 100; height: 80px; background: rgba(255,255,255,.96); color: var(--brand-ink); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px);
  transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { background: rgba(255,255,255,.985); border-bottom-color: var(--line); box-shadow: 0 10px 30px rgba(17,45,95,.09); }
.header-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 132px; height: auto; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.header-consult-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--brand-ink);
  border-radius: var(--radius-sm);
  background: var(--brand-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(17,45,95,.12);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.header-consult-button:hover,
.header-consult-button:focus-visible { background: var(--neutral-9); border-color: var(--neutral-9); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(17,45,95,.18); }
.main-nav {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 56px; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.main-nav a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 48px; padding: 0;
  border-radius: 0; color: var(--text-muted); font-size: 15px; font-weight: 500;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.main-nav a::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px; background: var(--brand-aurora); opacity: 0; transform: scale(.45) rotate(45deg);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-standard);
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--brand-cosmic); background: transparent; transform: translateY(-1px); }
.main-nav a:hover::before, .main-nav a:focus-visible::before { opacity: .55; transform: scale(.72) rotate(45deg); }
.main-nav a.active { color: var(--brand-cosmic); font-weight: 700; }
.main-nav a.active::before { opacity: 1; transform: scale(1) rotate(45deg); box-shadow: 0 0 14px rgba(0,212,212,.48); }
.icon-button {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--brand-ink); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast), border-color var(--duration-fast);
}
.icon-button:hover { background: var(--neutral-2); border-color: var(--brand-secondary); transform: translateY(-1px); }
.icon-button:active { transform: translateY(0) scale(.96); }
.menu-toggle { display: none; }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 20px; height: 2px; background: currentColor; transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast); }
.menu-lines { position: relative; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-6px) rotate(-45deg); }

.subnav { position: sticky; top: 80px; z-index: 90; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(17,45,95,.035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.subnav-scroll { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.subnav-scroll::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  border-radius: 6px; color: var(--text-muted); font-size: 14px; font-weight: 500; scroll-snap-align: center;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.subnav a::before {
  content: ""; width: 5px; height: 5px; flex: 0 0 5px; background: var(--brand-secondary); opacity: 0; transform: scale(.5) rotate(45deg);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-enter);
}
.subnav a:hover { color: var(--brand-cosmic); background: var(--neutral-2); transform: translateY(-1px); }
.subnav a:hover::before { opacity: .45; transform: scale(.75) rotate(45deg); }
.subnav a.active { color: var(--brand-cosmic); font-weight: 700; }
.subnav a.active::before { opacity: 1; transform: scale(1) rotate(45deg); }

.hero { position: relative; min-height: min(820px, calc(100svh - 80px)); display: grid; align-items: center; overflow: clip; background: var(--canvas); }
.hero-grid { position: relative; z-index: 1; align-items: center; padding-block: clamp(48px, 6vw, 96px); }
.hero-copy { grid-column: 1 / span 5; }
.hero-visual { grid-column: 7 / -1; position: relative; min-height: clamp(420px, 52vw, 680px); display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 8% 4%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
.hero-visual img { position: relative; z-index: 2; width: min(88%, 620px); max-height: 650px; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(11,30,63,.18)); transform: translate3d(var(--px, 0), calc(var(--py, 0px) + var(--sy, 0px)), 0) scale(var(--hover-scale, 1)); transition: transform 500ms var(--ease-enter); }
.hero-visual:hover img { --hover-scale: 1.012; }
.hero-visual.diagram img { width: min(94%, 720px); filter: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--brand-aurora); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text-heading); letter-spacing: 0; }
h1 { margin-bottom: 24px; font-size: var(--type-display); line-height: 1.08; font-weight: 700; }
h1 em { display: block; color: var(--text-heading); font-style: normal; }
h2 { margin-bottom: 20px; font-size: var(--type-section); line-height: 1.18; font-weight: 700; }
h3 { margin-bottom: 12px; font-size: var(--type-title); line-height: 1.35; font-weight: 600; }
.lead { margin-bottom: 20px; color: var(--text); font-size: var(--type-lead); line-height: 1.55; font-weight: 500; }
.copy { max-width: 680px; color: var(--text-muted); line-height: 1.8; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--brand-ink); border-radius: var(--radius-sm); background: var(--brand-ink); color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast); }
.button:hover { background: var(--neutral-9); border-color: var(--neutral-9); transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.985); }
.button > span[aria-hidden="true"] { display: inline-block; transition: transform var(--duration-base) var(--ease-enter); }
.button:hover > span[aria-hidden="true"] { transform: translateX(4px); }
.button[href*="#"]:hover > span[aria-hidden="true"] { transform: translateY(3px); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button.secondary:hover { border-color: var(--brand-secondary); color: var(--text-heading); background: var(--surface); }
.button.light { background: var(--brand-aurora); border-color: var(--brand-aurora); color: var(--brand-ink); }
.button.light:hover { background: var(--brand-system); border-color: var(--brand-system); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 700; border-bottom: 2px solid var(--brand-aurora); transition: gap var(--duration-base) var(--ease-enter), color var(--duration-fast); }
.text-link:hover { gap: 12px; }

.section { padding-block: clamp(80px, 9vw, 144px); border-top: 1px solid var(--line); }
.section.surface { background: var(--section-surface); }
.section.dark { background: var(--neutral-0); color: var(--text); border-top: 1px solid var(--line); }
.section.dark h2, .section.dark h3, .section.dark .lead { color: var(--text-heading); }
.section.dark .copy, .section.dark .section-intro { color: var(--text-muted); }
.section.dark .eyebrow { color: var(--accent-ink); }
.section.dark .metric-band { border-color: var(--line-strong); }
.section.dark .metric { border-color: var(--line-strong); }
.section.dark .metric strong { color: var(--text-heading); }
.section.dark .metric span { color: var(--text-muted); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head > div { grid-column: 1 / span 7; }
.section-head > p { grid-column: 9 / -1; margin-bottom: 4px; color: var(--text-muted); }
.kicker { color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: 0; }

.statement { padding-block: clamp(72px, 10vw, 160px); text-align: center; }
.statement p { width: min(980px, 100%); margin: 0 auto; color: var(--text); font-size: var(--type-statement); line-height: 1.25; font-weight: 600; }
.statement strong { color: var(--text-heading); }

/* Current event and source-backed product detail */
.event-section { background: var(--section-surface); }
.event-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.event-layout.reveal { opacity: 1; transform: none; }
.event-copy { grid-column: 1 / span 6; }
.event-copy > p:not(.eyebrow, .event-date, .event-lead) { max-width: 680px; color: var(--text-muted); line-height: 1.8; }
.event-date { margin: 0 0 16px; color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.event-lead { margin-bottom: 24px; color: var(--text); font-size: 22px; font-weight: 600; }
.event-facts { margin: 36px 0 0; border-top: 1px solid var(--line); }
.event-facts div { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.event-facts dt { color: var(--text-muted); }
.event-facts dd { margin: 0; color: var(--text); font-weight: 600; }
.event-poster { grid-column: 8 / -1; position: relative; justify-self: end; width: min(100%, 520px); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-float); }
.event-poster img { width: 100%; height: auto; max-height: 720px; display: block; object-fit: contain; object-position: top; }

.hero-visual-source img { width: min(82%, 600px); max-height: 580px; border-radius: var(--radius-sm); filter: none; }
.evidence-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: center; }
.evidence-visual { grid-column: 1 / span 6; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.evidence-visual img { width: 100%; max-height: 720px; display: block; object-fit: cover; object-position: center; }
.evidence-visual-contain img { padding: clamp(16px, 3vw, 40px); object-fit: contain; }
.evidence-visual figcaption { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 13px; }
.evidence-copy { grid-column: 8 / -1; }
.evidence-copy > p:not(.eyebrow) { color: var(--text-muted); line-height: 1.8; }
.evidence-layout-reverse .evidence-copy { grid-column: 1 / span 5; grid-row: 1; }
.evidence-layout-reverse .evidence-visual { grid-column: 7 / -1; grid-row: 1; }
.spec-list { margin: 36px 0 0; border-top: 1px solid var(--line-strong); }
.spec-list div { display: grid; grid-template-columns: minmax(112px, 1fr) 2fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--text-muted); }
.spec-list dd { margin: 0; color: var(--text); font-weight: 600; }
.plain-points { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.plain-points li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.feature-media.source-detail img { width: min(94%, 620px); max-height: 500px; }
.application-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.application-strip article { min-height: 220px; padding: 32px 28px; border-right: 1px solid var(--line); }
.application-strip article:last-child { border-right: 0; }
.application-strip b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; }
.application-strip h3 { margin-top: 40px; font-size: 20px; }
.application-strip p { margin: 0; color: var(--text-muted); font-size: 15px; }
.variant-table-wrap { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.variant-comparison { width: 100%; border-collapse: collapse; table-layout: fixed; }
.variant-comparison th, .variant-comparison td { padding: 24px 28px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: middle; }
.variant-comparison tr:last-child > * { border-bottom: 0; }
.variant-comparison tr > *:last-child { border-right: 0; }
.variant-comparison thead th { background: var(--surface); color: var(--text-heading); font-size: 22px; }
.variant-comparison thead th:first-child { width: 22%; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.variant-comparison thead span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.variant-comparison tbody th { background: var(--surface); color: var(--text); font-weight: 600; }
.variant-comparison tbody td { color: var(--text); font-weight: 600; }
.variant-comparison tbody td:last-child { background: color-mix(in srgb, var(--brand-aurora) 5%, var(--surface)); }
.comparison-note { max-width: 840px; margin: 24px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; }

.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { min-width: 0; padding: 32px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; color: var(--text); font-family: "Open Sans", system-ui, sans-serif; font-size: var(--type-metric); line-height: 1.2; }
.metric span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 16px; font-weight: 500; }

/* S1M01 revision layer */
.header-consult {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--brand-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast);
}
.header-consult:hover { background: var(--neutral-9); transform: translateY(-1px); }
.cta-note { margin: 14px 0 0; color: var(--text-muted); font-size: 14px; }
.role-entry { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.role-entry a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 700;
}
.role-entry a:hover { border-color: var(--brand-secondary); background: var(--neutral-1); }
.s1-hero { background: linear-gradient(180deg, #fff, #f7f8fa); }
.home-page .site-header {
  position: sticky;
  top: 0;
  background: #050b16;
  border-bottom-color: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}
.home-page .site-header::before {
  display: none;
}
.home-page .site-header.is-scrolled {
  background: rgba(255,255,255,.985);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(17,45,95,.09);
  color: var(--brand-ink);
}
.home-page .brand img {
  filter: brightness(0) invert(1);
  transition: filter var(--duration-base) var(--ease-standard);
}
.home-page .main-nav a { color: rgba(255,255,255,.82); }
.home-page .main-nav a:hover,
.home-page .main-nav a:focus-visible,
.home-page .main-nav a.active { color: #fff; }
.home-page .site-header.is-scrolled .brand img { filter: none; }
.home-page .site-header.is-scrolled .main-nav a { color: var(--text-muted); }
.home-page .site-header.is-scrolled .main-nav a:hover,
.home-page .site-header.is-scrolled .main-nav a:focus-visible,
.home-page .site-header.is-scrolled .main-nav a.active { color: var(--brand-ink); }
.home-page .header-consult-button {
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.home-page .header-consult-button:hover {
  background: rgba(255,255,255,.2);
}
.home-page .site-header.is-scrolled .header-consult-button {
  border-color: var(--brand-ink);
  background: var(--brand-ink);
  color: #fff;
}
.home-page .icon-button {
  border-color: rgba(255,255,255,.34);
  color: #fff;
  background: rgba(255,255,255,.1);
}
.home-page .site-header.is-scrolled .icon-button {
  border-color: var(--line-strong);
  color: var(--brand-ink);
  background: transparent;
}
.home-video-hero {
  height: calc(100svh - 72px);
  min-height: calc(100svh - 72px);
  padding: 0;
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
  background: var(--neutral-9);
  overflow: hidden;
}
.home-video-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--neutral-9);
}
.home-video-stage video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.home-video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.04) 28%, rgba(0,0,0,.12) 56%, rgba(0,0,0,.68) 100%),
    linear-gradient(90deg, rgba(5,13,26,.44) 0%, rgba(5,13,26,0) 46%, rgba(5,13,26,.26) 100%);
}
.video-scroll-cue {
  position: absolute;
  z-index: 2;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  bottom: clamp(26px, 4vw, 56px);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.video-scroll-cue b {
  width: 1px;
  height: 38px;
  display: block;
  overflow: hidden;
  background: rgba(255,255,255,.28);
}
.video-scroll-cue b::after {
  content: "";
  width: 1px;
  height: 16px;
  display: block;
  background: var(--brand-secondary);
  animation: scroll-cue-drop 1600ms var(--ease-standard) infinite;
}
.home-intro-section {
  min-height: min(760px, 86svh);
  display: grid;
  align-items: center;
  border-top: 0;
  background: #fff;
}
.home-intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}
.home-intro-grid .hero-copy {
  grid-column: 1 / span 7;
}
.home-intro-grid h1 {
  max-width: 920px;
  font-size: clamp(52px, 5.8vw, 92px);
}
.home-intro-grid .lead {
  max-width: 840px;
}
.home-intro-grid .hero-actions {
  grid-column: 9 / -1;
}
.home-intro-grid .role-entry {
  margin-top: 0;
}
@keyframes scroll-cue-drop {
  0% { transform: translateY(-18px); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}
@keyframes scroll-cue-slide {
  0% { transform: translateX(-18px); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translateX(50px); opacity: 0; }
}
.task-chain-visual {
  grid-column: 6 / -1;
  min-height: clamp(460px, 48vw, 620px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-float);
}
.task-chain-visual article {
  min-height: 330px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--neutral-1);
}
.task-chain-visual img { width: 100%; height: 210px; object-fit: contain; }
.task-chain-visual span,
.image-card span,
.chain-grid span,
.product-system-board span,
.solution-grid article > span {
  color: var(--brand-secondary);
  font-size: 13px;
  font-weight: 800;
}
.task-chain-visual strong { color: var(--text-heading); font-size: 18px; line-height: 1.3; }
.task-chain-visual > b { color: var(--brand-secondary); font-size: 24px; text-align: center; }
.compact-section { padding-block: clamp(64px, 7vw, 112px); }
.highlight-cards,
.story-board,
.task-picker-grid,
.starter-grid,
.trust-grid,
.resource-slots,
.boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.image-card {
  min-height: 420px;
  display: grid;
  grid-template-rows: 230px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 45, 95, .08);
  transition: transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base);
}
.image-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.image-card img { width: 100%; height: 100%; object-fit: cover; background: var(--neutral-1); }
.image-card div { padding: 24px; }
.story-board article,
.task-picker-grid a,
.starter-grid article,
.trust-grid article,
.resource-slots article,
.boundary-grid article {
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.story-board span { color: var(--brand-secondary); font-weight: 800; }
.story-board small { display: block; margin-top: 22px; color: var(--text-heading); font-weight: 700; }
.mode-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.mode-compare article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-aurora) 6%, #fff);
}
.chain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.chain-grid a {
  min-height: 260px;
  padding: 28px;
  border-right: 1px solid var(--line);
  transition: background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.chain-grid a:last-child { border-right: 0; }
.chain-grid a:hover { background: var(--neutral-1); transform: translateY(-2px); }
.chain-grid span,
.product-system-board span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--brand-aurora);
  color: var(--brand-ink);
  font-size: 24px;
}
.production-flow { background: #fff; }
.flow-timeline,
.data-chain {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  list-style: none;
  background: #fff;
}
.flow-timeline li,
.data-chain li {
  min-height: 250px;
  padding: 24px;
  border-right: 1px solid var(--line);
}
.flow-timeline li:last-child,
.data-chain li:last-child { border-right: 0; }
.flow-timeline b,
.data-chain b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; }
.flow-timeline span,
.data-chain span { display: block; margin: 42px 0 12px; color: var(--text-heading); font-size: 22px; font-weight: 800; }
.solution-hero,
.product-detail-hero { background: linear-gradient(180deg, #fff, #f7f8fa); }
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.solution-grid article {
  min-height: 320px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.solution-grid ul { margin: 22px 0; padding-left: 18px; color: var(--text-muted); }
.product-system-board {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  min-height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.product-system-board div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border-right: 1px solid var(--line);
}
.product-system-board div:last-child { border-right: 0; }
.product-system-board div:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -13px;
  top: 50%;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-secondary);
  transform: translateY(-50%);
}
.product-system-board strong { color: var(--text-heading); font-size: 22px; line-height: 1.25; }
.product-system-board small { margin-top: 10px; color: var(--text-muted); }
.task-picker-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.task-picker-grid a { min-height: 210px; }
.layer-model {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.layer-model a {
  display: grid;
  grid-template-rows: 210px 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base);
}
.layer-model a:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.layer-model img { width: 100%; height: 210px; object-fit: contain; padding: 18px; background: var(--neutral-1); }
.layer-model div { padding: 22px; }
.layer-model span { color: var(--brand-secondary); font-weight: 800; font-size: 13px; }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.selection-matrix { width: 100%; min-width: 880px; border-collapse: collapse; }
.selection-matrix th,
.selection-matrix td { padding: 20px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; }
.selection-matrix tr:last-child td { border-bottom: 0; }
.selection-matrix th:last-child,
.selection-matrix td:last-child { border-right: 0; }
.selection-matrix th { color: var(--text-heading); background: var(--neutral-1); }
.metric-section { padding-block: clamp(40px, 5vw, 72px); background: #fff; }
.metric-band-emphasis {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(17,45,95,.07);
}
.metric-band-emphasis .metric strong { color: var(--brand-secondary); }
.capability-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.capability-stats article { padding: 28px; border-right: 1px solid var(--line); }
.capability-stats article:last-child { border-right: 0; }
.capability-stats b { display: block; color: var(--brand-secondary); font-size: 28px; }
.capability-stats span { color: var(--text-muted); }
.annotated-shell .feature-slide { align-items: stretch; }
.hotspot-media {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--neutral-1);
}
.hotspot-media img { width: min(92%, 620px); max-height: 560px; object-fit: contain; }
.hotspot-media i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 34px;
  height: 34px;
  border: 2px solid var(--brand-aurora);
  border-radius: 50%;
  background: rgba(0, 212, 212, .18);
  box-shadow: 0 0 0 10px rgba(0, 212, 212, .08);
  transform: translate(-50%, -50%);
  animation: hotspot-pulse 1.8s ease-in-out infinite;
}
.module-hotspot i,
.exo-hotspot i { width: 52px; height: 52px; border-radius: var(--radius-sm); }
@keyframes hotspot-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.96); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
.spec-switch {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}
.spec-tabs {
  display: grid;
  gap: 8px;
}
.spec-tabs button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}
.spec-tabs button.active { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
.spec-visual {
  min-height: 430px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.spec-visual img { width: min(92%, 560px); max-height: 390px; object-fit: contain; }
.zoomable-media {
  border: 0;
  cursor: zoom-in;
}
.media-dialog { width: min(1120px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius-sm); background: #fff; }
.media-dialog::backdrop { background: rgba(5, 16, 36, .68); }
.media-dialog img { width: 100%; max-height: 82vh; object-fit: contain; background: var(--neutral-1); }
.media-dialog button { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--text-heading); font-size: 24px; cursor: pointer; }
.data-chain { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.resource-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.fact-strip article { min-height: 150px; padding: 24px; border-right: 1px solid var(--line); }
.fact-strip article:last-child { border-right: 0; }
.fact-strip span { color: var(--brand-secondary); font-size: 13px; font-weight: 800; }
.fact-strip strong { display: block; margin-top: 22px; color: var(--text-heading); font-size: 20px; line-height: 1.35; }
.context-cta .cta-inner { align-items: center; }
.inquiry-context {
  margin: 18px 0 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-heading);
  font-weight: 800;
}
@media (max-width: 1180px) {
  .task-chain-visual,
  .product-system-board { grid-column: 1 / -1; }
  .hero-copy { grid-column: 1 / -1; }
  .highlight-cards,
  .story-board,
  .layer-model,
  .task-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-timeline,
  .data-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-timeline li,
  .data-chain li { border-bottom: 1px solid var(--line); }
  .spec-switch { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .header-consult { display: none; }
  .task-chain-visual {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .task-chain-visual > b { transform: rotate(90deg); }
  .task-chain-visual article { min-height: 220px; }
  .task-chain-visual img { height: 150px; }
  .highlight-cards,
  .story-board,
  .mode-compare,
  .chain-grid,
  .solution-grid,
  .task-picker-grid,
  .layer-model,
  .capability-stats,
  .resource-slots,
  .boundary-grid,
  .starter-grid,
  .trust-grid,
  .fact-strip {
    grid-template-columns: 1fr;
  }
  .chain-grid a,
  .fact-strip article,
  .capability-stats article { border-right: 0; border-bottom: 1px solid var(--line); }
  .chain-grid a:last-child,
  .fact-strip article:last-child,
  .capability-stats article:last-child { border-bottom: 0; }
  .flow-timeline,
  .data-chain { grid-template-columns: 1fr; }
  .flow-timeline li,
  .data-chain li { min-height: 190px; border-right: 0; }
  .product-system-board {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .product-system-board div { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-system-board div::after { display: none !important; }
  .hotspot-media { min-height: 320px; }
  .spec-visual { min-height: 300px; }
}

/* 2026-08-06 site-wide layout and interaction refresh */
:root {
  --qnbot-deep: #050b16;
  --qnbot-cyan: #66e9f1;
  --qnbot-page: #f4f7fb;
}

/* Header: the home header and hero are one continuous dark surface. */
.home-page .site-header,
.home-page .site-header.is-scrolled,
.about-page .site-header,
.about-page .site-header.is-scrolled {
  background: var(--qnbot-deep) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.home-page .site-header::before,
.about-page .site-header::before { display: none !important; }
.home-page .site-header .brand img,
.home-page .site-header.is-scrolled .brand img,
.about-page .site-header .brand img,
.about-page .site-header.is-scrolled .brand img { filter: brightness(0) invert(1) !important; }

.main-nav a,
.home-page .main-nav a,
.home-page .site-header.is-scrolled .main-nav a,
.about-page .main-nav a,
.about-page .site-header.is-scrolled .main-nav a {
  position: relative;
  color: rgba(235,242,248,.76) !important;
  background: transparent !important;
}
.main-nav a::before { display: none !important; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(102,233,241,.65), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.45);
  transition: opacity .2s ease, transform .25s ease, filter .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.home-page .main-nav a:hover,
.home-page .main-nav a:focus-visible,
.about-page .main-nav a:hover,
.about-page .main-nav a:focus-visible {
  color: rgba(154,240,246,.92) !important;
  transform: none;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { opacity: .55; transform: translateX(-50%) scaleX(1); }
.main-nav a.active,
.home-page .main-nav a.active,
.about-page .main-nav a.active {
  color: var(--qnbot-cyan) !important;
  font-weight: 700;
}
.main-nav a.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  background: linear-gradient(90deg, transparent, #66e9f1 22%, #9ef8fc 50%, #66e9f1 78%, transparent);
  box-shadow: 0 0 8px rgba(102,233,241,.85), 0 0 18px rgba(102,233,241,.42);
}
.home-page .header-consult-button,
.home-page .site-header.is-scrolled .header-consult-button,
.about-page .header-consult-button,
.about-page .site-header.is-scrolled .header-consult-button { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.07) !important; }
.subnav,
.subnav.is-scrolled { background: rgba(255,255,255,.98) !important; color: var(--text); }

/* Every major desktop story panel owns one viewport; mobile keeps natural flow. */
@media (min-width: 1024px) {
  .home-page main > section:not(.home-video-hero),
  .teleop-page main > section,
  .data-platform-page main > section {
    min-height: calc(100svh - 72px);
    display: grid;
    align-content: center;
  }
}

/* Product overview rebuilt around the two service modes in the planning PDF. */
#legacy-products-main,
.products-page > .context-cta { display: none !important; }
.service-overview-main { background: var(--qnbot-page); }
.service-screen {
  min-height: calc(100svh - 122px);
  padding: clamp(64px, 8vh, 104px) 0;
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 122px;
}
.service-screen-inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.service-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(42px, 7vw, 110px); }
.service-hero h1 { margin: 0; max-width: 760px; color: var(--text-heading); font-size: clamp(48px, 5.5vw, 82px); line-height: 1.08; }
.service-hero p { max-width: 690px; margin: 26px 0 0; color: var(--text-muted); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.75; }
.service-anchor-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.service-hero-visual { position: relative; min-height: min(600px, 62vh); border-radius: 28px; background: linear-gradient(145deg,#e7edf5,#f9fbfd); overflow: hidden; }
.service-hero-visual img { position: absolute; object-fit: contain; }
.service-hero-visual img:nth-child(1) { inset: 12% 20% auto auto; width: 62%; }
.service-hero-visual img:nth-child(2) { left: 3%; bottom: 0; width: 48%; height: 63%; }
.service-hero-visual img:nth-child(3) { right: 0; bottom: -2%; width: 46%; height: 58%; }
.service-screen-head { max-width: 920px; margin-bottom: clamp(30px, 5vh, 56px); }
.service-screen-head h2 { margin: 0; color: var(--text-heading); font-size: clamp(40px, 4.4vw, 66px); line-height: 1.1; }
.service-screen-head p { margin: 16px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.7; }
.service-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); }
.service-card { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); min-height: min(540px,58vh); border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.service-card-media { min-height: 0; display: grid; place-items: center; padding: 26px; background: #e9eef5; }
.service-card-media img { width: 100%; height: 100%; max-height: 460px; object-fit: contain; }
.service-card-media-wide img { max-width: 94%; max-height: 88%; }
.service-card-copy { align-self: center; padding: clamp(28px,3vw,48px); }
.service-card-copy h3 { margin: 0; color: var(--text-heading); font-size: clamp(28px,2.6vw,42px); }
.service-card-copy p { margin: 16px 0; color: var(--text-muted); line-height: 1.7; }
.service-card-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.service-card-copy li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-heading); font-size: 13px; }
.service-final { text-align: center; }
.service-final .service-screen-inner { display: grid; justify-items: center; }
.service-final h2 { max-width: 1000px; margin: 0; color: var(--text-heading); font-size: clamp(42px,5vw,74px); }
.service-final p { margin: 20px 0 34px; color: var(--text-muted); font-size: 18px; }

/* Product detail screens share one background and one viewport rhythm. */
.pdf-product-page .pdf-screen,
.pdf-product-page .pdf-screen:nth-child(even) { background: var(--qnbot-page) !important; }
.pdf-product-page .pdf-screen { min-height: calc(100svh - 122px); padding-block: clamp(48px,6vh,76px); }
.pdf-product-page .pdf-hero-title { display: grid; gap: .04em; }
.pdf-product-page .product-name { font-size: .92em; letter-spacing: -.035em; white-space: nowrap; }
.pdf-product-page .product-cn { font-size: .8em; }
.product-feature-screen .pdf-split-grid { align-items: center; }
.pdf-gallery-main { position: relative; }
.pdf-gallery-main.is-empty img { visibility: hidden; }
.pdf-gallery-main.is-empty::after { content: "SDK 硬件组件图待补充"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 18px; }
.pdf-gallery-thumbs button,
.pdf-feature-list button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pdf-gallery-thumbs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pdf-gallery-thumbs button { min-width: 0; width: 100%; height: 100%; padding: 8px; border: 1px solid transparent; border-radius: 10px; }
.pdf-gallery-thumbs button.is-active { border-color: var(--brand-aurora); box-shadow: 0 0 0 2px rgba(0,212,212,.12); }
.pdf-gallery-thumbs img { width: 100%; height: 68px; object-fit: contain; }
.pdf-feature-list > li { transition: background .2s ease, color .2s ease; }
.pdf-feature-list > li.is-active { background: rgba(0,212,212,.07); }
.pdf-feature-list button { width: 100%; padding: 14px 16px; }
.pdf-hardware-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,2.5vw,30px); }
.pdf-hardware-cards article { min-width: 0; display: grid; grid-template-rows: minmax(145px,22vh) auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.pdf-hardware-cards article img { width: 100%; height: 100%; padding: 18px; object-fit: contain; background: #e9eef5; }
.pdf-hardware-cards article > div { padding: 22px 24px 26px; }
.pdf-hardware-cards article h3 { margin-top: 0; }
.staged-cards article { opacity: 0; transform: translateY(24px); }
.staged-cards.is-inview article { animation: qnbot-card-in .58s cubic-bezier(.2,.7,.2,1) forwards; }
.staged-cards.is-inview article:nth-child(2) { animation-delay: .13s; }
.staged-cards.is-inview article:nth-child(3) { animation-delay: .26s; }
@keyframes qnbot-card-in { to { opacity: 1; transform: none; } }
.static-spec-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(26px,4vw,56px); margin-top: 0; }
.static-spec-details dl { margin: 0; }
.static-spec-details dl > div { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(0,1fr); align-items: center; gap: 20px; min-height: 58px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.static-spec-details dt { color: var(--text-muted); }
.static-spec-details dd { margin: 0; color: var(--text-heading); font-weight: 650; text-align: right; line-height: 1.5; }
.glove-bundle-screen .pdf-bundle-grid,
.exo-bundle-screen .pdf-bundle-grid { align-items: stretch; }
.glove-bundle-screen .pdf-bundle-card,
.exo-bundle-screen .pdf-bundle-card { height: 100%; min-height: 0; grid-template-rows: minmax(210px,30vh) auto; }
.glove-bundle-screen .pdf-bundle-media,
.exo-bundle-screen .pdf-bundle-media { width: 100%; height: auto; min-height: 0; aspect-ratio: 16/8.5; padding: 22px; }
.glove-bundle-screen .pdf-bundle-media img,
.exo-bundle-screen .pdf-bundle-media img { width: 100%; height: 100%; max-width: 88%; max-height: 88%; object-fit: contain; }
.glove-bundle-screen .pdf-bundle-copy,
.exo-bundle-screen .pdf-bundle-copy { padding: 24px 28px 28px; }
.unified-contact-cta.pdf-screen { min-height: min(480px,56svh) !important; background: #fff !important; text-align: center; }
.unified-contact-cta .pdf-screen-inner { display: grid; justify-items: center; gap: 28px; }
.unified-contact-cta h2 { max-width: 1100px; margin: 0; color: var(--text-heading); font-size: clamp(40px,5vw,70px); }

/* About: one topic per viewport, replaying motion when the panel re-enters. */
#legacy-about-main { display: none !important; }
.about-story-refresh { background: #fff; scroll-snap-type: y proximity; }
.about-story-panel { min-height: calc(100svh - 72px); padding: clamp(70px,9vh,112px) 0; display: grid; align-content: center; scroll-snap-align: start; overflow: hidden; }
.about-story-panel > .container { width: min(100% - (var(--gutter) * 2), var(--container)); }
.about-story-hero { background: var(--qnbot-deep); color: #fff; }
.about-story-hero h1 { max-width: 920px; margin: 0; font-size: clamp(64px,8vw,124px); line-height: 1.02; }
.about-story-hero p { max-width: 900px; margin: 38px 0 0; color: rgba(255,255,255,.62); font-size: 20px; line-height: 1.8; }
.about-story-panel h2 { margin: 0 0 34px; color: var(--text-heading); font-size: clamp(48px,6vw,88px); text-align: center; }
.about-story-panel .lead { max-width: 1200px; margin-inline: auto; color: var(--text-muted); font-size: clamp(18px,1.7vw,25px); line-height: 2; text-align: center; }
.about-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 38px; }
.about-value-grid article { padding: clamp(28px,3vw,46px); border: 1px solid var(--line); border-radius: 18px; background: var(--qnbot-page); }
.about-value-grid h3 { margin-top: 0; color: var(--text-heading); font-size: 28px; }
.replay-reveal > * { opacity: 0; transform: translateY(22px); }
.replay-reveal.is-inview > * { animation: qnbot-reveal .58s ease forwards; }
.replay-reveal.is-inview > *:nth-child(2) { animation-delay: .12s; }
.replay-reveal.is-inview > *:nth-child(3) { animation-delay: .24s; }
@keyframes qnbot-reveal { to { opacity: 1; transform: none; } }

/* Compact unified footer. */
.footer { padding: 0 !important; background: var(--qnbot-deep) !important; color: #fff; }
.footer-simple-main { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 36px; }
.footer-brand { display: flex; align-items: center; gap: 28px; }
.footer-brand img { width: 150px; height: auto; }
.footer-brand p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.65; }
.footer-contact-button { min-height: 52px; display: inline-flex; align-items: center; gap: 18px; padding: 0 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; }
.footer-contact-button:hover { border-color: var(--qnbot-cyan); color: var(--qnbot-cyan); }
.footer-simple-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-simple-bottom .container { min-height: 66px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 13px; }

/* Contact modal: light page surface, direct channel selection below the form. */
.contact-modal { background: var(--qnbot-page) !important; color: var(--text) !important; }
.contact-modal-scroll { background: var(--qnbot-page) !important; }
.contact-modal-header { background: var(--qnbot-page) !important; border-bottom: 1px solid var(--line) !important; }
.contact-modal-header h2 { color: var(--text-heading) !important; }
.contact-modal-close { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; padding: 0 !important; border-color: rgba(17,45,95,.3) !important; background: #fff !important; color: var(--text-heading) !important; font-size: 30px !important; line-height: 1 !important; }
.contact-modal-grid,
.contact-modal-grid-simple { min-height: 0 !important; background: var(--qnbot-page) !important; }
.contact-modal-form-wrap { background: transparent !important; }
.contact-modal .field label { color: var(--text-heading) !important; }
.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea { background: #fff !important; color: var(--text) !important; border-color: #cfd8e5 !important; }
.contact-channels { max-width: 900px; margin: 36px auto 0; padding: 26px; display: grid; grid-template-columns: minmax(230px,.72fr) minmax(300px,1.28fr); gap: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.contact-channels-copy h3 { margin: 0 0 8px; color: var(--text-heading); font-size: 26px; }
.contact-channels-copy a { color: var(--brand-cosmic); font-weight: 700; }
.contact-channels-copy p { color: var(--text-muted); line-height: 1.6; }
.contact-channel-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-channel-tabs button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--qnbot-page); color: var(--text); cursor: pointer; }
.contact-channel-tabs button.is-active { border-color: var(--brand-aurora); color: var(--brand-cosmic); box-shadow: 0 0 0 2px rgba(0,212,212,.1); }
.contact-channel-preview { display: grid; justify-items: center; align-content: center; min-height: 230px; padding: 18px; border-radius: 14px; background: var(--qnbot-page); }
.contact-channel-preview img { width: 190px; height: 190px; object-fit: contain; background: #fff; transition: opacity .18s ease, transform .18s ease; }
.contact-channel-preview.is-changing img { opacity: .25; transform: scale(.96); }
.contact-channel-preview p { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; }

/* All end-of-page contact calls use the same centered title + button pattern. */
.context-cta .eyebrow,
.context-cta .cta-copy > p { display: none; }
.context-cta .cta-inner { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.context-cta .actions { justify-content: center; }

@media (max-width: 1023px) {
  .service-screen { min-height: auto; }
  .service-hero-grid,
  .service-card { grid-template-columns: 1fr; }
  .service-card-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card-media { min-height: 320px; }
  .pdf-hardware-cards { grid-template-columns: 1fr; }
  .static-spec-details { grid-template-columns: 1fr; }
  .about-story-panel { min-height: calc(100svh - 64px); }
}

@media (max-width: 767px) {
  .main-nav a::after { display: none; }
  .home-page .main-nav,
  .about-page .main-nav { background: var(--qnbot-deep); }
  .service-screen { padding-block: 56px; scroll-margin-top: 120px; }
  .service-hero-grid { gap: 36px; }
  .service-hero h1 { font-size: 42px; }
  .service-hero-visual { min-height: 360px; }
  .service-card-media { min-height: 260px; }
  .pdf-product-page .pdf-screen { min-height: auto; }
  .pdf-product-page .product-name { white-space: normal; }
  .pdf-gallery-thumbs img { height: 48px; }
  .static-spec-details dl > div { grid-template-columns: 1fr; gap: 6px; }
  .static-spec-details dd { text-align: left; }
  .pdf-bundle-grid { grid-template-columns: 1fr; }
  .about-story-refresh { scroll-snap-type: none; }
  .about-story-panel { min-height: 100svh; padding-block: 70px; }
  .about-story-hero h1 { font-size: 54px; }
  .about-value-grid { grid-template-columns: 1fr; }
  .footer-simple-main { min-height: 0; flex-direction: column; align-items: flex-start; padding-block: 34px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-simple-bottom .container { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
  .contact-modal-grid-simple { display: block !important; }
  .contact-modal-form-wrap { padding: 20px 16px 26px !important; }
  .contact-modal-fields { grid-template-columns: 1fr !important; }
  .contact-channels { grid-template-columns: 1fr; padding: 18px; }
  .contact-channel-preview { min-height: 220px; }
  .contact-channel-preview img { width: 180px; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .staged-cards article,
  .replay-reveal > * { opacity: 1; transform: none; animation: none !important; }
}

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.product-card { position: relative; min-height: 640px; display: grid; grid-template-rows: minmax(320px, 1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base) var(--ease-enter); }
.product-card:hover { border-color: var(--brand-secondary); transform: translateY(-4px); box-shadow: var(--shadow-float); }
.product-card:active { transform: translateY(-1px); }
.product-media { min-height: 360px; display: grid; place-items: center; padding: 40px; background: var(--surface-subtle); overflow: hidden; }
.product-media img { width: min(88%, 520px); height: 340px; object-fit: contain; transition: transform 640ms var(--ease-enter); }
.product-card:hover .product-media img { transform: scale(1.035); }
.product-card:hover .text-link { gap: 12px; }
.product-media.diagram img { width: 96%; }
.product-media.software-preview,
.workflow-product-media.software-preview { padding: 24px; background: #11151a; }
.product-media.software-preview img,
.workflow-product-media.software-preview img {
  width: 100%; height: auto; aspect-ratio: 874 / 402; object-fit: cover;
  border: 1px solid #343a43; border-radius: 4px; box-shadow: 0 20px 48px rgb(0 0 0 / .22);
}
.product-body { padding: 32px; border-top: 1px solid var(--line); }
.product-body .kicker { margin-bottom: 8px; }
.product-body p { color: var(--text-muted); }
.product-body :is(h2, h3) { font-size: var(--type-card-title); line-height: 1.25; }
.product-body .text-link::after { content: "→"; }

.workflow-rail {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 80px; padding: 0; list-style: none;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.workflow-rail::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 3px; background: var(--brand-aurora);
  transform: scaleX(0); transform-origin: left center;
}
.workflow-rail.workflow-animated::before { transform: scaleX(1); transition: transform 1500ms linear; }
.workflow-rail li { position: relative; min-width: 0; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 28px 24px; border-right: 1px solid var(--line); }
.workflow-rail.workflow-ready li { opacity: .52; transform: translateY(4px); }
.workflow-rail.workflow-animated li { animation: workflow-step-in 520ms var(--ease-enter) both; animation-delay: calc(var(--workflow-step) * 300ms); }
.workflow-rail li:nth-child(1) { --workflow-step: 0; }
.workflow-rail li:nth-child(2) { --workflow-step: 1; }
.workflow-rail li:nth-child(3) { --workflow-step: 2; }
.workflow-rail li:nth-child(4) { --workflow-step: 3; }
.workflow-rail li:last-child { border-right: 0; }
.workflow-rail li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; right: -11px; top: 50%; translate: 0 -50%; width: 21px; height: 24px; display: grid; place-items: center; background: var(--section-surface); color: var(--brand-secondary); font-size: 15px; }
.workflow-rail b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; }
.workflow-rail span, .workflow-rail small { display: block; }
.workflow-rail span { color: var(--text-heading); font-weight: 700; }
.workflow-rail small { margin-top: 4px; color: var(--text-muted); font-size: 14px; }
@keyframes workflow-step-in {
  0% { opacity: .52; transform: translateY(4px); }
  58% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.solution-layer { display: block; }
.layer-intro { width: min(920px, 100%); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; margin-bottom: 40px; }
.layer-index { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--brand-secondary); color: var(--brand-cosmic); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; font-weight: 700; }
.layer-intro h3 { margin-bottom: 16px; font-size: var(--type-layer-title); }
.layer-intro p:last-child { width: min(720px, 100%); color: var(--text-muted); }
.layer-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.workflow-product-card { min-width: 0; min-height: 336px; display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--duration-fast), transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base) var(--ease-enter); }
.workflow-product-card:hover { border-color: var(--brand-secondary); transform: translateY(-4px); box-shadow: var(--shadow-float); }
.workflow-product-card:active { transform: translateY(-1px); }
.workflow-product-media { min-height: 336px; display: grid; place-items: center; padding: 32px; overflow: hidden; background: var(--surface-subtle); }
.workflow-product-media img { width: 82%; height: clamp(216px, 18vw, 272px); object-fit: contain; transition: transform 640ms var(--ease-enter); }
.workflow-product-media.diagram img { width: 100%; }
.workflow-product-card:hover .workflow-product-media img { transform: scale(1.035); }
.workflow-product-copy { display: flex; flex-direction: column; justify-content: center; padding: 40px; border-left: 1px solid var(--line); }
.workflow-product-copy h3 { margin-bottom: 12px; font-size: 30px; }
.workflow-product-copy p { color: var(--text-muted); }
.workflow-product-copy .text-link::after { content: "→"; }
.workflow-handoff { position: relative; display: flex; align-items: center; justify-content: center; min-height: 144px; }
.workflow-handoff::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--brand-secondary); }
.workflow-handoff::after { content: "↓"; position: absolute; bottom: -2px; left: 50%; translate: -50% 0; padding: 0 8px; background: var(--section-surface); color: var(--brand-secondary); font-size: 20px; }
.workflow-handoff span { position: relative; z-index: 1; padding: 8px 16px; background: var(--section-surface); color: var(--text-muted); font-size: 14px; font-weight: 600; }

.product-carousel { min-width: 0; }
.carousel-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-viewport::-webkit-scrollbar { display: none; }
.product-carousel .product-grid {
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2);
  gap: 24px; align-items: stretch;
}
.product-carousel .product-card { scroll-snap-align: start; scroll-snap-stop: always; }
.carousel-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; }
.carousel-status { min-width: 0; display: flex; align-items: center; gap: 16px; }
.carousel-range { margin: 0; color: var(--text-muted); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.carousel-pagination { display: flex; align-items: center; gap: 4px; }
.carousel-page { position: relative; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.carousel-page::before, .carousel-page::after { content: ""; position: absolute; left: 3px; right: 3px; top: 21px; height: 2px; border-radius: 1px; }
.carousel-page::before { background: var(--line); }
.carousel-page::after { background: var(--brand-secondary); transform: scaleX(0); transform-origin: left center; }
.carousel-page.active::before { background: color-mix(in srgb, var(--brand-secondary) 28%, var(--line)); }
.carousel-page.active.progress-running::after { animation: carousel-progress var(--carousel-duration) linear forwards; }
.product-carousel.autoplay-paused .carousel-page.active::after { animation-play-state: paused; }
.carousel-page:hover::before, .carousel-page:focus-visible::before { background: var(--brand-secondary); }
@keyframes carousel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.carousel-button {
  width: 48px; height: 48px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.carousel-button:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--brand-secondary); background: var(--surface-subtle); transform: translateX(var(--arrow-shift, 0)); }
.carousel-button[data-carousel-prev] { --arrow-shift: -2px; }
.carousel-button[data-carousel-next] { --arrow-shift: 2px; }
.carousel-button:active:not(:disabled) { transform: scale(.94); }
.carousel-button:disabled { color: var(--line-strong); border-color: var(--line); background: var(--surface-subtle); cursor: default; }

.capability-list { border-top: 1px solid var(--line); }
.capability-row { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 32px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.capability-row > b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.capability-row p { color: var(--text-muted); margin-bottom: 0; }

.feature-shell { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.feature-slide { display: none; grid-template-columns: 7fr 5fr; min-height: 560px; }
.feature-slide.active { display: grid; animation: feature-in 480ms var(--ease-enter); }
.feature-media { min-height: 460px; display: grid; place-items: center; padding: 48px; overflow: hidden; background: var(--surface-subtle); }
.feature-media img { width: min(88%, 600px); max-height: 480px; object-fit: contain; }
.feature-slide.active .feature-media img { animation: feature-media-in 620ms var(--ease-enter) both; }
.feature-media.diagram img { width: 100%; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); border-left: 1px solid var(--line); }
.feature-slide.active .feature-copy > * { animation: feature-copy-in 520ms var(--ease-enter) both; }
.feature-slide.active .feature-copy p { animation-delay: 70ms; }
.feature-copy :is(h2, h3) { font-size: var(--type-feature-title); }
.feature-copy p { color: var(--text-muted); }
.feature-copy .feature-index { margin-bottom: 16px; color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.feature-controls { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); }
.feature-controls button { position: relative; min-height: 72px; padding: 16px 20px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; transition: color var(--duration-fast), background-color var(--duration-fast), padding-left var(--duration-base) var(--ease-enter); }
.feature-controls button:last-child { border-right: 0; }
.feature-controls button:hover { color: var(--text); background: var(--surface-subtle); padding-left: 24px; }
.feature-controls button.active { color: var(--text); background: color-mix(in srgb, var(--brand-aurora) 7%, var(--surface)); }
.feature-controls button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--active-indicator); transform: scaleX(0); transform-origin: left center; }
.feature-controls button.active.progress-running::after { animation: feature-progress var(--autoplay-duration) linear forwards; }
.feature-shell.autoplay-paused .feature-controls button.active::after { animation-play-state: paused; }
@keyframes feature-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes feature-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes feature-media-in { from { opacity: .2; transform: scale(.965); } to { opacity: 1; transform: scale(1); } }
@keyframes feature-copy-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* Teleoperation software page */
.teleop-hero .hero-grid { align-items: center; }
.teleop-hero .hero-copy { grid-column: 1 / span 5; }
.teleop-hero .teleop-window { grid-column: 6 / -1; }
.teleop-window { min-height: 0; display: block; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #090b0e; box-shadow: var(--shadow-float); }
.teleop-window::before { display: none; }
.teleop-window-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #30343a; background: #171a1f; }
.teleop-window-bar span { width: 8px; height: 8px; border-radius: 50%; background: #69717c; }
.teleop-window-bar span:first-child { background: var(--brand-secondary); }
.teleop-window-bar b { margin-left: 8px; color: #c9cdd3; font-size: 12px; font-weight: 600; }
.teleop-window > img { width: 100%; aspect-ratio: 874 / 402; display: block; object-fit: cover; transition: transform 900ms var(--ease-enter); }
.teleop-window:hover > img { transform: scale(1.018); }

.teleop-proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.teleop-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.teleop-proof article { min-width: 0; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 32px; border-right: 1px solid var(--line); }
.teleop-proof article:last-child { border-right: 0; }
.teleop-proof b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; }
.teleop-proof h2 { margin: 0 0 6px; font-size: 20px; }
.teleop-proof p { margin: 0; color: var(--text-muted); font-size: 15px; }

.teleop-feature-shell .feature-slide { grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); min-height: 520px; }
.teleop-feature-shell .feature-media { min-height: 520px; padding: clamp(24px, 3vw, 48px); background: #11151a; }
.teleop-software-media img { width: 100%; max-width: 920px; max-height: none; aspect-ratio: 874 / 402; border: 1px solid #343a43; border-radius: 4px; object-fit: cover; box-shadow: 0 24px 56px rgb(0 0 0 / 22%); }
.teleop-feature-shell .feature-copy { background: var(--surface); }

.teleop-flow-section { overflow: hidden; }
.teleop-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); list-style: none; }
.teleop-flow::before { content: ""; position: absolute; top: -2px; left: 0; width: 25%; height: 3px; background: var(--active-indicator); animation: teleop-flow-scan 5.2s var(--ease-standard) infinite; }
.teleop-flow li { position: relative; min-height: 176px; display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-content: center; padding: 32px 28px; border-right: 1px solid var(--line); }
.teleop-flow li:last-child { border-right: 0; }
.teleop-flow li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 50%; right: -13px; translate: 0 -50%; width: 26px; height: 26px; display: grid; place-items: center; background: var(--section-surface); color: var(--brand-secondary); }
.teleop-flow b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; }
.teleop-flow h3 { margin-bottom: 8px; font-size: 20px; }
.teleop-flow p { margin: 0; color: var(--text-muted); font-size: 14px; }
@keyframes teleop-flow-scan { 0% { transform: translateX(0); } 25% { transform: translateX(100%); } 50% { transform: translateX(200%); } 75%, 100% { transform: translateX(300%); } }

.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.process article { position: relative; min-height: 240px; padding: 32px 24px; border-right: 1px solid var(--line); background: var(--surface); }
.process article:last-child { border-right: 0; }
.process b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.process h3 { margin-top: 40px; font-size: 19px; }
.process p { color: var(--text-muted); font-size: 16px; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 128px); }
.number-list { border-top: 1px solid var(--line); }
.number-list article { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.number-list b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.number-list p { margin-bottom: 0; color: var(--text-muted); }

.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact { min-height: 180px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.fact span { display: block; margin-bottom: 36px; color: var(--accent-ink); font-size: 15px; font-weight: 700; }
.fact strong { color: var(--text); font-size: 18px; }
.milestone { display: grid; grid-template-columns: 160px 1fr 2fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.milestone:last-child { border-bottom: 1px solid var(--line); }
.milestone time { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; font-weight: 700; }
.milestone p { color: var(--text-muted); }

.form-shell { width: min(100%, 1200px); display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-inline: auto; }
.topic-panel, .form-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.topic-panel { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; padding-top: 24px; }
.topic-panel .eyebrow, .topic-panel h2 { grid-column: 1 / -1; margin-inline: 24px; }
.topic-panel h2 { margin-bottom: 24px; font-size: var(--type-title); }
.topic-panel button { position: relative; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); color: var(--text-muted); text-align: center; cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); }
.topic-panel button:last-child { border-right: 0; }
.topic-panel button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--active-indicator); opacity: 0; transform: scaleX(.3); transform-origin: center; transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-enter); }
.topic-panel button:hover { background: var(--surface-subtle); color: var(--text); }
.topic-panel button.active { color: var(--text); background: color-mix(in srgb, var(--brand-aurora) 7%, var(--surface)); font-weight: 700; }
.topic-panel button.active::after { opacity: 1; transform: scaleX(1); }
.form-card { padding: clamp(24px, 4vw, 56px); }
.form-context { display: grid; grid-template-columns: 112px minmax(160px, 220px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.form-context p, .form-context strong, .form-context span { margin: 0; }
.form-context p { color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.form-context strong { color: var(--text-heading); font-size: 20px; }
.form-context > span { color: var(--text-muted); }
.form-card.topic-updated .form-context { animation: topic-context-in 360ms var(--ease-enter); }
@keyframes topic-context-in { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.form-section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; color: var(--text); font-size: 15px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--canvas); color: var(--text); transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast); }
textarea { min-height: 160px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-secondary); outline: 3px solid color-mix(in srgb, var(--brand-secondary) 34%, transparent); outline-offset: 1px; }
input:user-invalid, textarea:user-invalid { border-color: #d54941; }
.form-note { margin-top: 16px; color: var(--text-muted); font-size: 14px; }

.cta { padding-block: clamp(72px, 8vw, 112px); background: var(--neutral-0); color: var(--brand-ink); border-top: 1px solid var(--line); }
.cta-inner { display: grid; grid-template-columns: 8fr 4fr; gap: 32px; align-items: end; }
.cta h2 { margin: 0; color: var(--brand-ink); }
.cta .actions { justify-content: flex-end; margin: 0; }
.footer { padding: 64px 0 24px; background: var(--neutral-9); color: var(--brand-dawn); }
.footer-main { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 3fr; gap: 32px; padding-bottom: 56px; }
.footer-brand img { width: 132px; margin-bottom: 24px; }
.footer p { color: var(--brand-dawn); }
.footer h3 { color: #ffffff; font-size: 16px; }
.footer-nav { display: grid; align-content: start; gap: 0; }
.footer-nav a { min-height: 44px; display: flex; align-items: center; }
.footer-contact a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-social p { margin: -4px 0 16px; font-size: 14px; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--neutral-7); border-radius: var(--radius-sm); background: transparent; color: #ffffff; cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.social-link img { width: 22px; height: 22px; object-fit: contain; }
.social-link:first-child img { width: 28px; }
.social-link:hover { border-color: var(--brand-aurora); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.social-link:active { transform: translateY(0) scale(.96); }
.social-tooltip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2; translate: -50% 4px; width: max-content;
  padding: 5px 8px; border-radius: var(--radius-xs); background: #ffffff; color: var(--neutral-9); font-size: 12px; font-weight: 600;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast), translate var(--duration-fast) var(--ease-enter), visibility 0s linear var(--duration-fast);
}
.social-link:hover .social-tooltip, .social-link:focus-visible .social-tooltip { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.social-dialog { width: min(360px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(5,16,36,.3); }
.social-dialog::backdrop { background: rgba(5,16,36,.72); backdrop-filter: blur(4px); }
.social-dialog-inner { position: relative; padding: 32px; text-align: center; }
.social-dialog-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
}
.social-dialog h2 { margin: 8px 48px 8px; font-size: 24px; }
.social-dialog p { margin-bottom: 24px; color: var(--text-muted); }
.social-dialog img { width: min(256px, 100%); margin-inline: auto; border: 1px solid var(--line); }
.footer a { color: var(--brand-dawn); transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-standard); }
.footer a:hover { color: var(--brand-aurora); }
.footer-nav a:hover { transform: translateX(3px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--neutral-7); color: var(--brand-dawn); font-size: 14px; }

.reveal { opacity: 1; transform: none; }
.has-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter); transition-delay: var(--reveal-delay, 0ms); }
.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-visible :is(.metric, .fact, .process article) { animation: content-step-in 620ms var(--ease-enter) both; animation-delay: calc(var(--step-index, 0) * 70ms); }
@keyframes content-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  :root {
    --container: 1536px;
    --type-display: 80px;
    --type-section: 52px;
    --type-statement: 64px;
  }
  .hero { min-height: 820px; }
}
@media (min-width: 2560px) {
  :root { --container: 1760px; --gutter: 96px; }
  body { font-size: 18px; }
}
@media (max-width: 1279px) {
  :root {
    --type-display: 60px;
    --type-section: 42px;
    --type-statement: 48px;
    --type-lead: 20px;
    --type-card-title: 32px;
    --type-layer-title: 38px;
    --type-feature-title: 38px;
    --type-metric: 36px;
  }
  .hero-copy { grid-column: 1 / span 6; }
  .hero-visual { grid-column: 7 / -1; }
  .product-card { min-height: 580px; }
  .process { grid-template-columns: repeat(3, 1fr); }
  .process article { border-bottom: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-visual { grid-column: 1 / -1; min-height: 480px; }
  .section-head > div { grid-column: 1 / span 8; }
  .section-head > p { grid-column: 9 / -1; }
  .feature-slide { grid-template-columns: 1fr; }
  .feature-copy { border-left: 0; border-top: 1px solid var(--line); }
  .feature-controls { grid-template-columns: repeat(2, 1fr); }
  .metric-band, .fact-grid { grid-template-columns: repeat(2,1fr); }
  .event-copy { grid-column: 1 / span 6; }
  .event-poster { grid-column: 7 / -1; }
  .evidence-visual { grid-column: 1 / span 6; }
  .evidence-copy { grid-column: 7 / -1; }
  .evidence-layout-reverse .evidence-copy { grid-column: 1 / span 6; }
  .evidence-layout-reverse .evidence-visual { grid-column: 7 / -1; }
  .application-strip { grid-template-columns: repeat(2, 1fr); }
  .application-strip article:nth-child(2) { border-right: 0; }
  .application-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-main { grid-template-columns: 2fr 1fr 1fr; }
  .footer-contact, .footer-social { grid-column: span 1; }
  .topic-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-panel button:nth-of-type(2n) { border-right: 0; }
  .layer-products { grid-template-columns: 1fr; }
  .workflow-product-card { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
  .teleop-hero .hero-copy, .teleop-hero .teleop-window { grid-column: 1 / -1; }
  .teleop-hero .teleop-window { min-height: 0; }
  .teleop-feature-shell .feature-slide { grid-template-columns: 1fr; }
  .teleop-feature-shell .feature-media { min-height: 0; }
  .teleop-flow { grid-template-columns: repeat(2, 1fr); }
  .teleop-flow::before { width: 50%; animation-name: teleop-flow-scan-tablet; }
  .teleop-flow li:nth-child(2) { border-right: 0; }
  .teleop-flow li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .teleop-flow li::after { display: none; }
}
@keyframes teleop-flow-scan-tablet { 0%, 20% { transform: translate(0, 0); } 40% { transform: translate(100%, 0); } 60% { transform: translate(0, 176px); } 80%, 100% { transform: translate(100%, 176px); } }
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --type-display: 44px;
    --type-section: 34px;
    --type-statement: 36px;
    --type-lead: 18px;
    --type-title: 22px;
    --type-card-title: 30px;
    --type-layer-title: 32px;
    --type-feature-title: 32px;
    --type-metric: 32px;
  }
  html { scroll-padding-top: 112px; }
  .site-header { height: 64px; }
  .brand img { width: 116px; }
  .header-inner { display: flex; justify-content: space-between; }
  .header-actions { margin-left: auto; }
  .header-consult-button { min-height: 40px; padding-inline: 14px; font-size: 13px; }
  .main-nav { display: flex; position: fixed; inset: 64px 0 auto; z-index: 110; width: 100%; height: calc(100dvh - 64px); min-height: 0; justify-content: flex-start; gap: 8px; padding: 24px 20px; flex-direction: column; align-items: stretch; border: 0; border-radius: 0; background: var(--neutral-0); box-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-enter), visibility 0s linear var(--duration-base); }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .main-nav a { min-height: 64px; padding-inline: 4px; justify-content: flex-start; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text-muted); font-size: 19px; }
  .main-nav a:hover, .main-nav a:focus-visible { color: var(--brand-cosmic); transform: none; }
  .main-nav a.active { color: var(--brand-cosmic); background: transparent; border-color: var(--line); }
  .main-nav.open a { animation: mobile-nav-in 420ms var(--ease-enter) both; animation-delay: calc(var(--nav-index, 0) * 45ms); }
  .menu-toggle { display: inline-grid; }
  .subnav { top: 64px; }
  .subnav-scroll { justify-content: flex-start; gap: 4px; min-height: 56px; scroll-snap-type: x mandatory; }
  .subnav a { min-height: 44px; padding-inline: 12px; scroll-snap-align: start; }
  .hero { min-height: calc(100svh - 64px); }
  .hero-grid { padding-block: 72px 56px; }
  .hero-visual { min-height: 400px; }
  .section-head { display: block; }
  .event-layout, .evidence-layout { grid-template-columns: 1fr; gap: 48px; }
  .event-copy, .event-poster, .evidence-visual, .evidence-copy, .evidence-layout-reverse .evidence-copy, .evidence-layout-reverse .evidence-visual { grid-column: 1; grid-row: auto; }
  .event-poster { justify-self: stretch; width: 100%; }
  .event-poster img { max-height: none; }
  .evidence-visual img { max-height: 560px; }
  .spec-list div { grid-template-columns: 1fr; gap: 4px; }
  .section-head > p { margin-top: 24px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-carousel .product-grid { grid-template-columns: none; grid-auto-columns: 92%; padding-right: 8%; }
  .product-card { min-height: 0; }
  .product-carousel .product-card { min-height: 560px; }
  .product-media { min-height: 320px; }
  .workflow-rail { grid-template-columns: 1fr 1fr; margin-bottom: 56px; }
  .workflow-rail::before { width: 100%; }
  .workflow-rail li:nth-child(2) { border-right: 0; }
  .workflow-rail li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .workflow-rail li::after { display: none !important; }
  .layer-intro { margin-bottom: 32px; }
  .workflow-handoff { min-height: 96px; margin-left: 0; }
  .workflow-product-card { min-height: 0; grid-template-columns: 1fr; }
  .workflow-product-media { min-height: 280px; }
  .workflow-product-copy { padding: 32px; border-left: 0; border-top: 1px solid var(--line); }
  .capability-row { grid-template-columns: 48px 1fr; gap: 16px; }
  .capability-row p { grid-column: 2; }
  .feature-controls { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .feature-controls::-webkit-scrollbar { display: none; }
  .feature-controls button { flex: 0 0 72%; min-height: 64px; scroll-snap-align: start; }
  .process { grid-template-columns: 1fr; }
  .application-strip { grid-template-columns: 1fr; }
  .application-strip article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .application-strip article:last-child { border-bottom: 0; }
  .variant-table-wrap { border-bottom: 0; }
  .variant-comparison, .variant-comparison tbody, .variant-comparison tr, .variant-comparison th, .variant-comparison td { display: block; width: 100%; }
  .variant-comparison thead { display: none; }
  .variant-comparison tbody tr { padding: 24px 0; border-bottom: 1px solid var(--line-strong); }
  .variant-comparison tbody th, .variant-comparison tbody td { padding: 0; border: 0; background: transparent; }
  .variant-comparison tbody th { margin-bottom: 16px; color: var(--text-heading); font-size: 19px; }
  .variant-comparison tbody td { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 10px 0; font-size: 15px; }
  .variant-comparison tbody td::before { content: attr(data-model); color: var(--text-muted); font-size: 13px; font-weight: 600; }
  .process article { min-height: 0; border-right: 0; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .form-shell { grid-template-columns: 1fr; }
  .form-context { grid-template-columns: 1fr; gap: 6px; }
  .fields { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta .actions { justify-content: flex-start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-contact, .footer-social { grid-column: 1 / -1; }
  .milestone { grid-template-columns: 1fr; gap: 8px; }
  .teleop-proof-grid { grid-template-columns: 1fr; }
  .teleop-proof article { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .teleop-proof article:last-child { border-bottom: 0; }
  .teleop-feature-shell .feature-media { padding: 16px; }
  .teleop-feature-shell .feature-copy { padding: 32px 24px; }
  .teleop-flow { grid-template-columns: 1fr; }
  .teleop-flow::before { display: none; }
  .teleop-flow li { min-height: 136px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .teleop-flow li:last-child { border-bottom: 0; }
}
@keyframes mobile-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 479px) {
  :root {
    --type-display: 40px;
    --type-section: 32px;
    --type-statement: 32px;
    --type-card-title: 28px;
    --type-layer-title: 28px;
    --type-feature-title: 28px;
    --type-metric: 30px;
  }
  .hero-visual { min-height: 340px; }
  .hero-visual::before { inset: 4% 0; }
  .workflow-rail li { grid-template-columns: 32px 1fr; gap: 8px; padding: 20px 16px; }
  .workflow-rail small { font-size: 13px; }
  .layer-intro { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .workflow-product-media { min-height: 264px; padding: 24px; }
  .workflow-product-copy { padding: 28px 24px; }
  .metric-band, .fact-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .fact-grid { border-left: 0; }
  .fact { min-height: 144px; }
  .feature-media { min-height: 320px; padding: 24px; }
  .feature-controls button { flex-basis: 86%; }
  .topic-panel { grid-template-columns: 1fr; }
  .topic-panel button { border-right: 0; text-align: left; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand, .footer-contact, .footer-social { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; --type-display: 38px; --type-section: 30px; --type-statement: 30px; }
  .button { width: 100%; }
  .actions { display: grid; }
  .carousel-footer { gap: 10px; }
  .carousel-status { gap: 10px; }
  .carousel-pagination { gap: 2px; }
  .carousel-page { width: 26px; }
  .brand img { width: 104px; }
  .header-consult-button { padding-inline: 10px; }
}
@media (hover: none) {
  .hero-visual:hover img { --hover-scale: 1; }
  .product-card:hover { transform: none; box-shadow: none; }
  .product-card:hover .product-media img { transform: none; }
  .feature-controls button:hover { padding-left: 20px; }
  .teleop-window:hover > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-viewport { scroll-behavior: auto; }
  .feature-controls button.active::after { animation: none; transform: scaleX(1); }
  .teleop-flow::before { animation: none; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-visual img { transform: none !important; }
  .main-nav a, .feature-slide.active .feature-media img, .feature-slide.active .feature-copy > *, .reveal.is-visible :is(.metric, .fact, .process article) { animation: none !important; }
}

/* Homepage data-production narrative pass */
.home-hero {
  min-height: min(880px, calc(100svh - 80px));
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,248,250,.96)),
    var(--canvas);
}

.home-hero .hero-copy {
  grid-column: 1 / span 6;
}

.home-hero .lead {
  max-width: 760px;
}

.home-hero .copy {
  max-width: 760px;
}

.home-system-visual {
  grid-column: 8 / -1;
  min-height: clamp(460px, 46vw, 640px);
}

.home-system-visual::before {
  inset: 5%;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.system-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.92);
}

.system-node {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--neutral-1);
}

.system-node.primary {
  background: var(--brand-cosmic);
  border-color: var(--brand-cosmic);
  color: #fff;
}

.system-node span {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}

.system-node.primary span {
  color: rgba(255,255,255,.74);
}

.system-node strong {
  color: var(--text-heading);
  font-size: 18px;
  line-height: 1.45;
}

.system-node.primary strong {
  color: #fff;
}

.system-line {
  width: 1px;
  height: 30px;
  margin-inline: auto;
  background: var(--line-strong);
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.data-grid.reveal,
.path-layout.reveal,
.system-grid.reveal,
.workflow-grid.reveal,
.value-layout.reveal {
  opacity: 1;
  transform: none;
}

.data-grid article {
  min-height: 230px;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.data-grid article:last-child {
  border-right: 0;
}

.data-grid b,
.workflow-grid b {
  color: var(--accent-ink);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 14px;
}

.data-grid h3 {
  margin-top: 42px;
}

.data-grid p,
.workflow-grid p,
.path-card p,
.path-card li,
.system-card p,
.value-copy p,
.path-note span,
.context-summary {
  color: var(--text-muted);
}

.context-summary {
  width: min(920px, 100%);
  margin: clamp(32px, 4vw, 56px) 0 0;
  font-size: 18px;
  line-height: 1.85;
}

.path-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.path-card {
  min-height: 560px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.path-card.emphasized {
  border-color: var(--brand-cosmic);
  background: linear-gradient(180deg, rgba(17,45,95,.05), rgba(255,255,255,1));
}

.path-card h3 {
  max-width: 620px;
  margin-bottom: 24px;
  color: var(--text-heading);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}

.path-card ul {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.path-card li {
  position: relative;
  padding-left: 20px;
}

.path-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-aurora);
}

.path-note {
  display: grid;
  grid-template-columns: minmax(240px, .35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--neutral-1);
}

.path-note strong {
  color: var(--text-heading);
  font-size: 20px;
  line-height: 1.45;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.system-card {
  min-height: 520px;
  display: grid;
  grid-template-rows: 260px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform var(--duration-base) var(--ease-enter), border-color var(--duration-fast), box-shadow var(--duration-base) var(--ease-enter);
}

.system-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-secondary);
  box-shadow: var(--shadow-float);
}

.system-card.wide {
  grid-column: span 2;
}

.system-card figure {
  min-height: 260px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 28px;
  overflow: hidden;
  background: var(--neutral-2);
}

.system-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.system-card figure.ego-preview {
  background:
    linear-gradient(135deg, rgba(17,45,95,.08), rgba(0,212,212,.12)),
    var(--neutral-2);
}

.ego-preview span {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-heading);
  font-size: 28px;
  font-weight: 700;
  background: rgba(255,255,255,.8);
}

.system-card > div {
  padding: 28px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
}

.workflow-grid article {
  min-height: 250px;
  padding: 30px;
  background: var(--surface);
}

.workflow-grid h3 {
  margin-top: 40px;
}

.value-section {
  background: var(--brand-cosmic);
  color: #fff;
}

.value-section .eyebrow,
.value-section h2,
.value-section p {
  color: #fff;
}

.value-section .eyebrow::before {
  background: var(--brand-aurora);
}

.value-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.value-copy p {
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.85;
}

.value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.value-list span {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 600;
}

.cta .eyebrow {
  margin-bottom: 12px;
}

.cta p:not(.eyebrow) {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 1279px) {
  .home-hero .hero-copy {
    grid-column: 1 / span 7;
  }

  .home-system-visual {
    grid-column: 8 / -1;
  }

  .data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .data-grid article {
    border-bottom: 1px solid var(--line);
  }

  .data-grid article:nth-child(3n) {
    border-right: 0;
  }

  .data-grid article:nth-last-child(-n+3) {
    border-bottom: 0;
  }

  .system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .home-hero .hero-copy,
  .home-system-visual {
    grid-column: 1 / -1;
  }

  .home-system-visual {
    min-height: auto;
  }

  .path-layout,
  .value-layout {
    grid-template-columns: 1fr;
  }

  .path-card {
    min-height: auto;
  }

  .path-note {
    grid-template-columns: 1fr;
  }

  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .system-panel {
    padding: 18px;
  }

  .data-grid,
  .system-grid,
  .workflow-grid,
  .value-list {
    grid-template-columns: 1fr;
  }

  .data-grid article,
  .data-grid article:nth-child(3n),
  .data-grid article:nth-last-child(-n+3) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .data-grid article:last-child {
    border-bottom: 0;
  }

  .data-grid h3,
  .workflow-grid h3 {
    margin-top: 24px;
  }

  .system-card,
  .system-card.wide {
    grid-column: auto;
    min-height: auto;
    grid-template-rows: 220px auto;
  }

  .system-card figure {
    min-height: 220px;
  }

  .workflow-grid article {
    min-height: 0;
  }

  .value-list span {
    min-height: 56px;
  }
}

/* 2026-07-23 brand, evidence and conversion redesign */
.site-header { height: 72px; }
.subnav { top: 72px; }
.subnav-scroll { min-height: 50px; }
.subnav a { min-height: 40px; padding-inline: 14px; }
.subnav + main .hero { min-height: min(740px, calc(100svh - 122px)); }

/* Content must remain readable before and during enhancement. */
.has-js .reveal,
.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.home-hero-redesign {
  min-height: min(860px, calc(100svh - 72px));
  background:
    radial-gradient(circle at 82% 30%, rgba(0,212,212,.09), transparent 24%),
    linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
}
.home-hero-redesign .hero-grid { padding-block: clamp(56px, 6vw, 88px); }
.home-hero-redesign .hero-copy { grid-column: 1 / span 6; z-index: 2; }
.home-hero-redesign h1 { max-width: 820px; font-size: clamp(54px, 5.35vw, 78px); }
.home-hero-redesign .lead { max-width: 720px; color: var(--neutral-8); }
.hero-proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 44px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
  list-style: none;
}
.hero-proof-list li { min-height: 118px; padding: 18px; background: rgba(255,255,255,.94); }
.hero-proof-list strong { display: block; color: var(--text-heading); font-size: 15px; }
.hero-proof-list span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

.home-product-stage {
  grid-column: 7 / -1;
  position: relative;
  min-height: clamp(560px, 48vw, 680px);
  overflow: hidden;
  border: 1px solid #1e2733;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(5,11,20,.08), rgba(5,11,20,.88)),
    url("../assets/official-industrial-background.jpeg") center / cover no-repeat,
    #080b10;
  box-shadow: 0 30px 80px rgba(17,45,95,.2);
}
.home-product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.stage-label { position: absolute; z-index: 4; top: 28px; left: 28px; right: 28px; display: grid; gap: 4px; }
.stage-label span { color: var(--brand-aurora); font: 700 12px/1.4 "Open Sans", system-ui, sans-serif; letter-spacing: .12em; }
.stage-label strong { color: rgba(255,255,255,.84); font-size: 13px; font-weight: 600; }
.stage-exo { position: absolute; z-index: 2; left: 3%; bottom: 5%; width: 66%; max-height: 74%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.5)); }
.stage-glove { position: absolute; z-index: 3; right: -8%; top: 13%; width: 49%; max-height: 66%; object-fit: contain; transform: rotate(8deg); filter: drop-shadow(0 26px 32px rgba(0,0,0,.54)); }
.stage-live-view { position: absolute; z-index: 5; left: 7%; right: 7%; bottom: 5%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-sm); background: #11151a; box-shadow: 0 20px 48px rgba(0,0,0,.38); }
.stage-live-view img { width: 100%; height: clamp(104px, 10vw, 150px); object-fit: cover; object-position: center; opacity: .92; }
.stage-live-view figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: rgba(255,255,255,.78); font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-aurora); box-shadow: 0 0 12px var(--brand-aurora); }

.proof-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--brand-cosmic); color: #fff; }
.proof-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-band article { min-height: 170px; padding: 32px; border-right: 1px solid rgba(255,255,255,.16); }
.proof-band article:last-child { border-right: 0; }
.proof-band span { color: var(--brand-aurora); font: 700 13px/1.4 "Open Sans", system-ui, sans-serif; }
.proof-band strong { display: block; margin-top: 18px; font-size: 22px; }
.proof-band p { margin: 8px 0 0; color: rgba(255,255,255,.68); font-size: 14px; }

.system-narrative { background: #f7f8fa; }
.narrative-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.narrative-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.narrative-card figure { height: 300px; display: grid; place-items: center; margin: 0; padding: 24px; overflow: hidden; background: var(--neutral-2); }
.narrative-card figure img { width: 100%; height: 100%; object-fit: contain; }
.narrative-card figure.software-media { padding: 16px; background: #101419; }
.narrative-card figure.software-media img { object-fit: cover; border: 1px solid #343a43; border-radius: 4px; }
.narrative-card > div { padding: 28px; }
.narrative-card > div > span { color: var(--brand-secondary); font: 700 12px/1.4 "Open Sans", system-ui, sans-serif; letter-spacing: .08em; }
.narrative-card h3 { margin-top: 18px; font-size: 25px; }
.narrative-card p { margin: 0; color: var(--text-muted); }
.collection-mode-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.collection-mode-strip article { padding: 30px; }
.collection-mode-strip article + article { border-left: 1px solid var(--line); background: linear-gradient(135deg, rgba(17,45,95,.035), rgba(0,212,212,.06)); }
.collection-mode-strip span { color: var(--brand-secondary); font-size: 14px; font-weight: 700; }
.collection-mode-strip strong { display: block; margin-top: 10px; color: var(--text-heading); font-size: 21px; }
.collection-mode-strip p { margin: 8px 0 0; color: var(--text-muted); }

.ecosystem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ecosystem-card { min-height: 390px; display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: transform var(--duration-base) var(--ease-enter), border-color var(--duration-fast), box-shadow var(--duration-base) var(--ease-enter); }
.ecosystem-card:hover { transform: translateY(-4px); border-color: var(--brand-secondary); box-shadow: var(--shadow-float); }
.ecosystem-card figure { min-height: 390px; display: grid; place-items: center; margin: 0; padding: 26px; overflow: hidden; background: var(--neutral-2); }
.ecosystem-card figure img { width: 100%; height: 100%; max-height: 330px; object-fit: contain; transition: transform 620ms var(--ease-enter); }
.ecosystem-card:hover figure img { transform: scale(1.035); }
.ecosystem-card figure.software-media { padding: 14px; background: #101419; }
.ecosystem-card figure.software-media img { object-fit: cover; border: 1px solid #343a43; border-radius: 4px; }
.ecosystem-card > div { display: flex; flex-direction: column; justify-content: center; padding: 32px; border-left: 1px solid var(--line); }
.ecosystem-card span { color: var(--brand-secondary); font-size: 14px; font-weight: 700; }
.ecosystem-card h3 { margin-top: 14px; font-size: 29px; }
.ecosystem-card p { color: var(--text-muted); }
.ecosystem-card b { margin-top: auto; color: var(--text-heading); font-size: 14px; }
.center-action { display: flex; justify-content: center; margin-top: 40px; }

.evidence-section,
.about-evidence { background: var(--neutral-9); color: #fff; }
.evidence-home-layout { display: grid; grid-template-columns: minmax(340px,5fr) minmax(0,7fr); gap: clamp(48px,7vw,112px); align-items: center; }
.evidence-poster { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 28px 72px rgba(0,0,0,.32); }
.evidence-poster img { width: 100%; max-height: 610px; object-fit: cover; object-position: top; }
.evidence-poster figcaption { padding: 14px 18px; background: #fff; color: var(--text-muted); font-size: 13px; }
.evidence-home-copy .eyebrow,
.evidence-home-copy h2 { color: #fff; }
.evidence-home-copy > p:not(.eyebrow) { color: rgba(255,255,255,.7); font-size: 17px; }
.evidence-facts { margin-top: 36px; border-top: 1px solid rgba(255,255,255,.2); }
.evidence-facts > a,
.evidence-facts > div { display: grid; grid-template-columns: 86px minmax(180px,.8fr) minmax(0,1fr); gap: 20px; align-items: center; min-height: 88px; border-bottom: 1px solid rgba(255,255,255,.2); }
.evidence-facts span { color: var(--brand-aurora); font: 700 13px/1.4 "Open Sans", system-ui, sans-serif; }
.evidence-facts strong { color: #fff; }
.evidence-facts small { color: rgba(255,255,255,.62); font-size: 13px; }
.evidence-facts > a { transition: background-color var(--duration-fast), padding var(--duration-base) var(--ease-enter); }
.evidence-facts > a:hover { padding-inline: 12px; background: rgba(255,255,255,.05); }

.about-hero-redesign { min-height: min(790px, calc(100svh - 72px)); display: grid; align-items: center; overflow: hidden; background: linear-gradient(180deg,#fff,#f5f7fa); }
.about-hero-redesign .hero-copy { grid-column: 1 / span 5; }
.about-product-stage { grid-column: 7 / -1; position: relative; min-height: 600px; padding: 40px; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg,#0b1018,#182438 72%,#0c1119); box-shadow: var(--shadow-float); }
.about-product-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(0,212,212,.18), transparent 38%); }
.about-product-stage img { position: relative; z-index: 1; width: 88%; height: 370px; margin: 8px auto 30px; object-fit: contain; filter: drop-shadow(0 28px 28px rgba(0,0,0,.5)); }
.about-product-stage > div { position: relative; z-index: 2; display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.about-product-stage span { color: var(--brand-aurora); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.about-product-stage strong { color: rgba(255,255,255,.88); font-size: 14px; }
.focus-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); gap: 1px; }
.focus-grid article { min-height: 330px; display: flex; flex-direction: column; padding: 34px; background: #fff; }
.focus-grid span { color: var(--brand-secondary); font: 700 13px/1.4 "Open Sans", system-ui, sans-serif; }
.focus-grid h3 { margin-top: 38px; font-size: 25px; }
.focus-grid p { color: var(--text-muted); }
.focus-grid a { margin-top: auto; color: var(--text-heading); font-weight: 700; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.principle-grid article { min-height: 220px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.principle-grid b { color: var(--text-heading); font-size: 28px; }
.principle-grid p { margin: 36px 0 0; color: var(--text-muted); }

.contact-hero-redesign { padding-block: clamp(72px,8vw,112px); background: linear-gradient(180deg,#fff,#f5f7fa); border-bottom: 1px solid var(--line); }
.contact-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: clamp(48px,8vw,120px); align-items: center; }
.contact-hero-redesign h1 { max-width: 780px; font-size: clamp(52px,5vw,72px); }
.contact-hero-redesign .lead { max-width: 720px; }
.contact-direct-card { padding: clamp(28px,4vw,48px); border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-float); }
.contact-direct-card .direct-email { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--text-heading); font-size: clamp(24px,2.4vw,34px); font-weight: 700; }
.contact-direct-card > p:not(.kicker,.copy-status) { color: var(--text-muted); }
.direct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.copy-status { min-height: 24px; margin: 12px 0 0; color: var(--brand-secondary); font-size: 13px; }
.contact-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(48px,8vw,120px); align-items: start; }
.contact-side { position: sticky; top: 112px; }
.contact-side > p:not(.eyebrow) { color: var(--text-muted); }
.contact-steps { display: grid; margin-top: 36px; border-top: 1px solid var(--line); }
.contact-steps span { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.contact-steps b { color: var(--brand-secondary); font-size: 13px; }
.contact-form-wrap { min-width: 0; }
.compact-topic-panel { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.compact-topic-panel button:nth-of-type(2n) { border-right: 0; }
.compact-topic-panel button:nth-of-type(-n+2) { border-bottom: 1px solid var(--line); }
.compact-form-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.compact-fields { margin-top: 0; }
.form-action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.mobile-contact-dock { display: none; }

.products-hero-redesign { background: linear-gradient(180deg,#fff,#f5f7fa); }
.products-hero-stage { grid-column: 7 / -1; position: relative; min-height: 570px; overflow: hidden; border: 1px solid #202a37; border-radius: 12px; background: radial-gradient(circle at 50% 38%, rgba(0,212,212,.17), transparent 34%), linear-gradient(150deg,#0b1018,#182438 72%,#0c1119); box-shadow: var(--shadow-float); }
.products-hero-stage::before { content: "PRODUCT SYSTEM"; position: absolute; top: 24px; left: 26px; color: var(--brand-aurora); font: 700 11px/1.4 "Open Sans",system-ui,sans-serif; letter-spacing: .12em; }
.products-stage-exo { position: absolute; left: -2%; bottom: 15%; width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.54)); }
.products-stage-glove { position: absolute; right: -11%; top: 10%; width: 50%; height: 68%; object-fit: contain; transform: rotate(8deg); filter: drop-shadow(0 24px 30px rgba(0,0,0,.54)); }
.products-hero-stage > div { position: absolute; left: 6%; right: 6%; bottom: 5%; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); background: rgba(8,13,21,.78); color: rgba(255,255,255,.82); text-align: center; font-size: 12px; backdrop-filter: blur(12px); }
.products-hero-stage b { color: var(--brand-aurora); }

@media (max-width: 1279px) {
  .home-hero-redesign .hero-copy { grid-column: 1 / span 6; }
  .home-product-stage { grid-column: 7 / -1; min-height: 590px; }
  .hero-proof-list { grid-template-columns: 1fr; }
  .hero-proof-list li { min-height: 0; }
  .ecosystem-card { grid-template-columns: 1fr; }
  .ecosystem-card figure { min-height: 280px; }
  .ecosystem-card > div { min-height: 260px; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 1023px) {
  .home-hero-redesign .hero-copy,
  .home-product-stage,
  .about-hero-redesign .hero-copy,
  .about-product-stage,
  .products-hero-redesign .hero-copy,
  .products-hero-stage { grid-column: 1 / -1; }
  .home-product-stage { min-height: 620px; }
  .proof-band-grid,
  .narrative-grid,
  .focus-grid,
  .principle-grid { grid-template-columns: 1fr; }
  .proof-band article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .proof-band article:last-child { border-bottom: 0; }
  .narrative-card { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); }
  .narrative-card figure { height: 100%; min-height: 300px; }
  .evidence-home-layout,
  .contact-hero-grid,
  .contact-layout { grid-template-columns: 1fr; }
  .evidence-poster { width: min(100%,520px); }
  .about-product-stage { min-height: 560px; }
  .focus-grid { gap: 1px; }
  .focus-grid article { min-height: 0; }
  .contact-side { position: static; }
}

@media (max-width: 767px) {
  .site-header { height: 64px; }
  .subnav { top: 64px; }
  .subnav + main .hero { min-height: auto; }
  .home-video-hero {
    min-height: 100svh;
    grid-template-rows: 1fr;
  }
  .home-video-stage {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
  }
  .video-scroll-cue {
    right: 20px;
    bottom: 28px;
    justify-items: end;
  }
  .video-scroll-cue b {
    width: 48px;
    height: 1px;
  }
  .video-scroll-cue b::after {
    width: 18px;
    height: 1px;
    animation-name: scroll-cue-slide;
  }
  .home-intro-section {
    min-height: auto;
    padding-block: 84px;
  }
  .home-intro-grid {
    display: block;
  }
  .home-intro-grid h1 {
    font-size: 40px;
  }
  .home-intro-grid .lead {
    font-size: 17px;
  }
  .home-intro-grid .role-entry {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 18px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .home-intro-grid .role-entry::-webkit-scrollbar { display: none; }
  .home-intro-grid .role-entry a {
    flex: 0 0 auto;
  }
  .home-intro-grid .actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
  .home-intro-grid .button {
    width: 100%;
  }
  .home-hero-redesign { min-height: auto; }
  .home-hero-redesign .hero-grid { padding-block: 56px 32px; }
  .home-hero-redesign h1,
  .contact-hero-redesign h1 { font-size: 42px; }
  .home-hero-redesign .lead { font-size: 18px; }
  .home-hero-redesign .copy { display: none; }
  .hero-proof-list { display: none; }
  .home-product-stage { min-height: 460px; margin-top: 20px; }
  .products-hero-stage { min-height: 460px; margin-top: 20px; }
  .stage-label { top: 20px; left: 20px; right: 20px; }
  .stage-exo { left: -3%; width: 72%; bottom: 12%; }
  .stage-glove { right: -18%; width: 58%; top: 15%; }
  .stage-live-view { left: 5%; right: 5%; bottom: 4%; }
  .stage-live-view img { height: 88px; }
  .proof-band-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .proof-band-grid::-webkit-scrollbar { display: none; }
  .proof-band article { flex: 0 0 86%; min-height: 176px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 0; scroll-snap-align: start; }
  .section { padding-block: 80px; }
  .section-head { margin-bottom: 40px; }
  .narrative-grid { display: flex; overflow-x: auto; gap: 14px; padding-right: 7%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .narrative-grid::-webkit-scrollbar { display: none; }
  .narrative-card { flex: 0 0 88%; display: block; scroll-snap-align: start; }
  .narrative-card figure { height: 260px; min-height: 0; }
  .collection-mode-strip { grid-template-columns: 1fr; }
  .collection-mode-strip article + article { border-left: 0; border-top: 1px solid var(--line); }
  .ecosystem-grid { display: flex; overflow-x: auto; gap: 14px; padding-right: 7%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ecosystem-grid::-webkit-scrollbar { display: none; }
  .ecosystem-card { flex: 0 0 88%; min-height: 0; scroll-snap-align: start; }
  .ecosystem-card figure { min-height: 250px; }
  .ecosystem-card > div { min-height: 250px; }
  .evidence-home-layout { gap: 44px; }
  .evidence-poster { width: 100%; }
  .evidence-facts > a,
  .evidence-facts > div { grid-template-columns: 72px 1fr; gap: 12px; padding: 18px 0; }
  .evidence-facts small { grid-column: 2; }
  .about-hero-redesign { min-height: auto; }
  .about-hero-redesign .hero-grid { padding-block: 56px; }
  .about-product-stage { min-height: 500px; padding: 24px; }
  .about-product-stage img { height: 300px; }
  .about-product-stage > div { grid-template-columns: 120px 1fr; }
  .contact-hero-redesign { padding-block: 56px; }
  .contact-direct-card { padding: 24px; }
  .direct-actions .button { flex: 1 1 100%; }
  .compact-topic-panel { grid-template-columns: 1fr; }
  .compact-topic-panel button { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); text-align: left; }
  .compact-topic-panel button:last-child { border-bottom: 0; }
  .compact-form-card { padding: 24px; }
  .form-action-row { display: grid; }
  .mobile-contact-dock {
    position: fixed;
    z-index: 80;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(17,35,62,.94);
    box-shadow: 0 18px 48px rgba(5,16,36,.32);
    backdrop-filter: blur(18px);
  }
  .mobile-contact-dock a { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 700; }
  .mobile-contact-dock a:first-child { background: var(--brand-aurora); color: var(--brand-ink); }
  .mobile-contact-dock a:last-child { border: 1px solid rgba(255,255,255,.22); color: #fff; }
  body.has-mobile-contact-dock .footer { padding-bottom: 112px; }
  body.home-page .mobile-contact-dock { display: none; }
  body.home-page.has-mobile-contact-dock .footer { padding-bottom: 0; }
}

@media (max-width: 479px) {
  .home-hero-redesign h1,
  .contact-hero-redesign h1 { font-size: 38px; }
  .home-product-stage { min-height: 420px; }
  .stage-live-view figcaption { font-size: 11px; }
  .about-product-stage { min-height: 460px; }
  .about-product-stage img { height: 250px; }
}

/* 2026-08-03 homepage layout refinement */
.video-scroll-cue {
  left: 50%;
  right: auto;
  bottom: clamp(28px, 4vw, 54px);
  width: 52px;
  height: 64px;
  display: grid;
  place-content: center;
  gap: 0;
  color: transparent;
  transform: translateX(-50%);
}

.video-scroll-cue > span {
  width: 24px;
  height: 24px;
  display: block;
  margin-top: -10px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  animation: home-cue-fade 1.8s var(--ease-standard) infinite;
}

.video-scroll-cue > span:nth-child(2) { animation-delay: .18s; }
.video-scroll-cue > span:nth-child(3) { animation-delay: .36s; }

@keyframes home-cue-fade {
  0%, 18% { opacity: 0; transform: translateY(-5px) rotate(45deg); }
  46% { opacity: 1; }
  86%, 100% { opacity: 0; transform: translateY(6px) rotate(45deg); }
}

.home-intro-section {
  min-height: 100svh;
  padding-block: clamp(96px, 10vw, 160px);
}

.home-intro-grid { align-items: start; }

.home-intro-grid .hero-copy { grid-column: 1 / -1; }

.home-intro-grid h1 {
  max-width: none;
  margin-bottom: 34px;
  font-size: clamp(56px, 5.65vw, 84px);
  line-height: 1.1;
}

.home-intro-grid h1 span,
.home-intro-grid .lead span { display: block; }

.home-intro-grid h1 span + span { margin-top: 8px; }

.home-intro-grid .lead {
  max-width: none;
  margin-bottom: 0;
  color: var(--neutral-8);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.7;
}

.home-intro-grid .hero-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(48px, 6vw, 80px);
}

.home-intro-grid .role-entry {
  grid-column: 1 / span 8;
  margin: 0;
}

.home-intro-grid .actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 12px;
}

.home-intro-grid .actions .button.secondary {
  grid-column: 1 / span 3;
  justify-self: start;
}

.home-intro-grid .actions .button:not(.secondary) {
  grid-column: 10 / -1;
  justify-self: end;
}

.highlight-cards { align-items: stretch; }

.image-card {
  height: 100%;
  grid-template-rows: 230px minmax(230px, 1fr);
}

.image-card > div {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding: 30px;
}

.image-card > div > span { margin: 0; }
.image-card > div > h3 { margin: 16px 0 12px; }
.image-card > div > p { margin: 0; }

.home-story-section {
  min-height: 100svh;
  display: grid;
  align-items: center;
}

.home-story-section .section-head > div { grid-column: 1 / span 10; }

.home-story-section .section-head > p { grid-column: 10 / -1; }

.home-story-section h2,
.flow-head h2 { white-space: nowrap; }

.story-board { align-items: stretch; }

.story-board article {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 36px;
}

.story-board article h3 { margin: 32px 0 14px; font-size: 28px; }
.story-board article p { margin: 0; color: var(--text-muted); }
.story-board article small { margin-top: auto; padding-top: 36px; }

.collection-modes-section {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-top-color: rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 14% 30%, rgba(0,212,212,.13), transparent 27%),
    radial-gradient(circle at 88% 74%, rgba(36,77,140,.35), transparent 34%),
    #0b1423;
  color: #fff;
}

.collection-modes-section .eyebrow,
.collection-modes-section h2,
.collection-modes-section .section-head > p { color: #fff; }

.collection-modes-section .section-head > p { color: rgba(255,255,255,.64); }
.collection-head > div { grid-column: 1 / span 8; }

.collection-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.collection-mode-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
}

.collection-mode-visual {
  position: relative;
  height: clamp(300px, 26vw, 390px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.collection-mode-human .collection-mode-visual {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(160deg, #dce4ef, #8194b0 60%, #24395b);
}

.mode-visual-primary {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 0;
  width: 54%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.35));
}

.mode-visual-secondary {
  position: absolute;
  z-index: 1;
  right: -3%;
  top: -11%;
  width: 50%;
  height: 122%;
  object-fit: contain;
  transform: rotate(13deg);
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.28));
}

.mode-signal {
  position: absolute;
  inset: auto auto 17% 31%;
  width: 150px;
  aspect-ratio: 1;
  border: 1px solid rgba(0,212,212,.5);
  border-radius: 50%;
}

.mode-signal-two { inset: auto auto 8% 23%; width: 250px; opacity: .48; }

.collection-mode-robot .collection-mode-visual { background: #080c13; }

.mode-robot-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .54;
  filter: saturate(.65) contrast(1.12);
}

.collection-mode-robot .collection-mode-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,12,19,.74), transparent 45%, rgba(8,12,19,.28));
}

.mode-robot-product {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: -16%;
  width: 54%;
  height: 106%;
  object-fit: contain;
  filter: drop-shadow(0 28px 36px rgba(0,0,0,.68));
}

.mode-status {
  position: absolute;
  z-index: 3;
  left: 28px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(8,12,19,.62);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.mode-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-aurora);
  box-shadow: 0 0 14px var(--brand-aurora);
}

.collection-mode-copy { padding: 36px; }

.mode-index {
  color: var(--brand-aurora);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.collection-mode-copy h3 {
  margin: 16px 0 14px;
  color: #fff;
  font-size: 34px;
}

.collection-mode-copy p { margin: 0; color: rgba(255,255,255,.72); }

.collection-mode-copy ul {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  list-style: none;
}

.collection-mode-copy li { position: relative; padding-left: 18px; }
.collection-mode-copy li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-aurora); }

.collection-bridge {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto minmax(260px, 1.7fr);
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.74);
}

.collection-bridge span { font-size: 13px; font-weight: 700; white-space: nowrap; }
.collection-bridge b { height: 1px; background: linear-gradient(90deg, rgba(0,212,212,.25), var(--brand-aurora)); }
.collection-bridge strong { justify-self: end; color: #fff; font-size: 14px; text-align: right; }

.product-showcase-section {
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: #f4f6f9;
}

.showcase-head { margin-bottom: clamp(36px, 4vw, 58px); }

.product-showcase {
  overflow: hidden;
  border: 1px solid #26354d;
  border-radius: 12px;
  background: #09111e;
  box-shadow: 0 28px 72px rgba(17,45,95,.22);
}

.showcase-viewport {
  position: relative;
  height: clamp(500px, 48vw, 680px);
  overflow: hidden;
  outline-offset: -4px;
}

.showcase-track { position: absolute; inset: 0; }

.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-standard);
}

.showcase-slide.is-active { opacity: 1; pointer-events: auto; }

.showcase-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,12,23,.98) 0%, rgba(5,12,23,.9) 32%, rgba(5,12,23,.22) 66%, rgba(5,12,23,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}

.showcase-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.03);
  transition: transform 6.8s linear;
}

.showcase-slide.is-active .showcase-background { transform: scale(1.09); }

.showcase-background-contain {
  padding: 5% 0 5% 33%;
  object-fit: contain;
  opacity: .5;
  background: #e8edf4;
  filter: saturate(.65) brightness(.58) contrast(1.15);
}

.showcase-copy {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 84px);
  color: #fff;
}

.showcase-count {
  color: rgba(255,255,255,.52);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.showcase-copy b {
  margin: 18px 0 2px;
  color: var(--brand-aurora);
  font-size: clamp(72px, 7vw, 104px);
  line-height: 1;
}

.showcase-copy small { color: rgba(255,255,255,.64); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.showcase-copy h3 { max-width: 520px; margin: 20px 0 14px; color: #fff; font-size: clamp(32px, 3vw, 46px); line-height: 1.18; }
.showcase-copy p { max-width: 500px; margin: 0; color: rgba(255,255,255,.72); font-size: 17px; }
.showcase-copy em { margin-top: 32px; color: #fff; font-size: 14px; font-style: normal; font-weight: 700; }

.showcase-product {
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 7%;
  width: 49%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 32px 38px rgba(0,0,0,.65));
  transform: translateX(28px) scale(.96);
  opacity: 0;
  transition: transform 850ms var(--ease-enter), opacity 650ms var(--ease-standard);
}

.showcase-slide.is-active .showcase-product { transform: translateX(0) scale(1); opacity: 1; }
.showcase-glove { right: -1%; top: -6%; height: 112%; transform: translateX(28px) rotate(-5deg) scale(.96); }
.showcase-slide.is-active .showcase-glove { transform: translateX(0) rotate(-5deg) scale(1); }
.showcase-exo { right: 4%; top: 4%; width: 52%; height: 94%; }
.showcase-console { right: 3%; top: 19%; width: 52%; height: 62%; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: 0 30px 54px rgba(0,0,0,.45); }
.showcase-data { right: 1%; top: 13%; width: 55%; height: 74%; padding: 18px; border: 1px solid rgba(255,255,255,.23); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 30px 54px rgba(0,0,0,.42); filter: none; }

.showcase-controls {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(7,14,25,.96);
}

.showcase-controls button {
  position: relative;
  min-height: 72px;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.54);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.showcase-controls button:last-child { border-right: 0; }
.showcase-controls button span { margin-right: 14px; color: rgba(255,255,255,.3); font-family: "Open Sans", system-ui, sans-serif; font-size: 11px; }
.showcase-controls button:hover,
.showcase-controls button.is-active { color: #fff; background: rgba(255,255,255,.055); }
.showcase-controls button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-aurora); animation: showcase-progress 6.8s linear both; }
.product-showcase.is-paused .showcase-controls button.is-active::after { animation-play-state: paused; }

@keyframes showcase-progress { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.production-flow { min-height: 100svh; display: grid; align-items: center; }
.flow-head { margin-bottom: clamp(44px, 5vw, 72px); }
.flow-head > div { grid-column: 1 / -1; }

.flow-timeline {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.flow-timeline li {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  padding: 34px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.flow-timeline li:last-child { border: 1px solid var(--line); }

.flow-timeline b {
  position: absolute;
  top: -28px;
  left: 14px;
  color: rgba(17,45,95,.075);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.08em;
  user-select: none;
}

.flow-timeline span {
  position: relative;
  display: block;
  margin: 92px 0 30px;
  color: var(--text-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}

.flow-timeline dl { display: grid; gap: 20px; margin: 0; }
.flow-timeline dl div { display: grid; gap: 5px; }
.flow-timeline dt { color: var(--brand-secondary); font-size: 13px; font-weight: 800; }
.flow-timeline dd { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; }

@media (max-width: 1279px) {
  .home-intro-grid h1 { font-size: clamp(52px, 5.7vw, 70px); }
  .home-story-section h2,
  .flow-head h2 { white-space: normal; }
  .collection-head > div { grid-column: 1 / span 9; }
  .flow-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .flow-timeline li { min-height: 420px; }
}

@media (max-width: 1023px) {
  .home-intro-grid .role-entry { grid-column: 1 / -1; }
  .home-intro-grid .actions .button.secondary { grid-column: 1 / span 5; }
  .home-intro-grid .actions .button:not(.secondary) { grid-column: 8 / -1; }
  .home-story-section .section-head > div,
  .home-story-section .section-head > p { grid-column: 1 / -1; }
  .collection-modes { grid-template-columns: 1fr; }
  .collection-mode-card { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
  .collection-mode-visual { height: 100%; min-height: 440px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
  .collection-bridge { grid-template-columns: auto 1fr auto 1fr auto; }
  .collection-bridge strong { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .showcase-copy { width: 57%; padding: 48px; }
  .showcase-product { right: -5%; width: 51%; }
  .flow-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .video-scroll-cue { left: 50%; right: auto; bottom: 24px; justify-items: center; transform: translateX(-50%); }
  .video-scroll-cue > span { width: 21px; height: 21px; }
  .home-intro-section { min-height: auto; padding-block: 88px; }
  .home-intro-grid h1 { font-size: 39px; }
  .home-intro-grid h1 span,
  .home-intro-grid .lead span { display: inline; }
  .home-intro-grid h1 span + span { margin-top: 0; }
  .home-intro-grid .hero-actions { display: block; margin-top: 40px; }
  .home-intro-grid .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .home-intro-grid .actions .button.secondary,
  .home-intro-grid .actions .button:not(.secondary) { grid-column: auto; justify-self: stretch; width: 100%; }
  .image-card { grid-template-rows: 220px minmax(220px, 1fr); }
  .image-card > div { padding: 28px; }
  .home-story-section { min-height: auto; }
  .home-story-section .section-head > p { display: none; }
  .story-board { display: flex; gap: 14px; overflow-x: auto; padding-right: 8%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .story-board::-webkit-scrollbar { display: none; }
  .story-board article { flex: 0 0 86%; min-height: 350px; scroll-snap-align: start; }
  .collection-head > div,
  .collection-modes-section .section-head > p { grid-column: 1 / -1; }
  .collection-modes-section .section-head > p { display: block; }
  .collection-mode-card { display: block; }
  .collection-mode-visual { height: 290px; min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .collection-mode-copy { padding: 28px; }
  .collection-mode-copy h3 { font-size: 30px; }
  .collection-bridge { display: flex; flex-wrap: wrap; gap: 12px; }
  .collection-bridge b { flex: 1 1 30px; }
  .collection-bridge strong { flex-basis: 100%; }
  .product-showcase-section { min-height: auto; }
  .showcase-head > p { display: none; }
  .showcase-viewport { height: 610px; }
  .showcase-slide::after { background: linear-gradient(180deg, rgba(5,12,23,.12), rgba(5,12,23,.78) 50%, rgba(5,12,23,.98) 100%); }
  .showcase-product { top: 2%; right: 0; width: 100%; height: 48%; }
  .showcase-glove { top: -8%; right: -4%; height: 60%; }
  .showcase-exo { top: 1%; right: 0; width: 100%; height: 48%; }
  .showcase-console,
  .showcase-data { top: 6%; right: 5%; width: 90%; height: 39%; }
  .showcase-copy { inset: auto 0 0; width: 100%; height: 60%; justify-content: flex-end; padding: 28px; }
  .showcase-copy b { margin-top: 10px; font-size: 64px; }
  .showcase-copy h3 { margin-top: 12px; font-size: 31px; }
  .showcase-copy p { font-size: 15px; }
  .showcase-copy em { margin-top: 18px; }
  .showcase-controls { overflow-x: auto; grid-template-columns: repeat(4, minmax(116px, 1fr)); scrollbar-width: none; }
  .showcase-controls::-webkit-scrollbar { display: none; }
  .showcase-controls button { min-height: 64px; padding: 0 16px; }
  .production-flow { min-height: auto; }
  .flow-timeline { display: flex; gap: 14px; overflow-x: auto; padding-right: 8%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .flow-timeline::-webkit-scrollbar { display: none; }
  .flow-timeline li { flex: 0 0 84%; min-height: 430px; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .video-scroll-cue > span,
  .showcase-controls button.is-active::after { animation: none; }
  .video-scroll-cue > span { opacity: .72; }
  .showcase-background,
  .showcase-product,
  .showcase-slide { transition: none; }
}

/* Global footer reflow after removing the Solutions column. */
.footer-main {
  grid-template-columns: minmax(300px, 4fr) minmax(170px, 2fr) minmax(230px, 2.4fr) minmax(270px, 3fr);
  gap: clamp(32px, 4vw, 72px);
}

@media (max-width: 1080px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* PDF-directed six-screen hardware product detail pages. */
.pdf-product-page > main#main,
.pdf-product-page > .cta.context-cta { display: none !important; }

.pdf-product-page .pdf-screen {
  min-height: max(740px, calc(100svh - 122px));
  display: grid;
  align-items: center;
  padding-block: clamp(38px, 5vh, 64px);
  border-top: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 122px;
}

.pdf-product-page .pdf-screen:nth-child(even) { background: var(--neutral-1); }
.pdf-product-page .pdf-screen:first-child { border-top: 0; }

.pdf-screen-inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

.pdf-screen-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(24px, 3vh, 38px);
}

.pdf-screen-head > div { max-width: 920px; }
.pdf-screen-head .eyebrow { margin-bottom: 10px; }
.pdf-screen-head h2 { margin: 0; font-size: clamp(34px, 3.7vw, 54px); line-height: 1.08; color: var(--text-heading); }
.pdf-screen-head p:last-child { margin: 12px 0 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; }

.pdf-hero-grid,
.pdf-feature-grid,
.pdf-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(390px, 45fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.pdf-hero-visual {
  min-height: min(650px, calc(100svh - 220px));
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, #f8fafc, #e8edf4);
  overflow: hidden;
}

.pdf-hero-visual img { width: auto; height: auto; max-width: 92%; max-height: min(590px, calc(100svh - 280px)); object-fit: contain; }
.pdf-hero-copy .eyebrow { margin-bottom: 14px; }
.pdf-hero-copy h1 { margin: 0; color: var(--text-heading); font-size: clamp(46px, 5vw, 76px); line-height: 1.02; }
.pdf-hero-copy .lead { margin: 22px 0 12px; color: var(--text); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; }
.pdf-hero-copy .copy { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.7; }

.pdf-product-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.pdf-product-tags span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--neutral-1); color: var(--text-heading); font-size: 14px; font-weight: 750; }

.pdf-gallery {
  min-height: min(610px, calc(100svh - 260px));
  display: grid;
  grid-template-rows: minmax(0, 1fr) 92px;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #e8edf4;
  overflow: hidden;
}

.pdf-gallery-main { min-width: 0; min-height: 0; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #fff, #eef2f7); overflow: hidden; }
.pdf-gallery-main img { width: auto; height: auto; max-width: 90%; max-height: 90%; object-fit: contain; }
.pdf-gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pdf-gallery-thumbs img { width: 100%; height: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }

.pdf-feature-copy h2 { margin: 0 0 22px; color: var(--text-heading); font-size: clamp(34px, 3.4vw, 50px); line-height: 1.08; }
.pdf-feature-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: feature; }
.pdf-feature-list li { counter-increment: feature; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pdf-feature-list li::before { content: counter(feature, decimal-leading-zero); color: var(--brand-secondary); font-size: 13px; font-weight: 800; letter-spacing: .05em; }
.pdf-feature-list strong { display: block; margin-bottom: 4px; color: var(--text-heading); font-size: 17px; }
.pdf-feature-list span { color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.pdf-hardware-visual { height: clamp(250px, 34vh, 360px); display: grid; place-items: center; margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(145deg, #f7f9fc, #e8edf4); overflow: hidden; }
.pdf-hardware-visual img { width: auto; height: auto; max-width: 90%; max-height: 100%; object-fit: contain; }
.pdf-hardware-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pdf-hardware-cards article { min-height: 170px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.pdf-hardware-cards h3 { margin: 0 0 10px; color: var(--text-heading); font-size: 21px; }
.pdf-hardware-cards ul { display: grid; gap: 6px; margin: 0; padding: 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; list-style: none; }

.pdf-spec-shell { padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.pdf-spec-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.pdf-spec-group h3 { margin: 0 0 16px; color: var(--text-heading); font-size: 22px; }
.pdf-spec-group dl { margin: 0; }
.pdf-spec-group dl > div { display: grid; grid-template-columns: minmax(130px, .8fr) 1.4fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pdf-spec-group dt { color: var(--text-muted); font-size: 13px; }
.pdf-spec-group dd { margin: 0; color: var(--text-heading); font-size: 14px; font-weight: 650; text-align: right; }
.pdf-spec-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin-top: 18px; }
.pdf-spec-details details { align-self: start; border: 1px solid var(--line); border-radius: 8px; background: var(--neutral-1); }
.pdf-spec-details summary { padding: 14px 16px; color: var(--text-heading); font-weight: 750; cursor: pointer; }
.pdf-spec-details p { margin: 0; padding: 0 16px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

.pdf-bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.pdf-bundle-card { min-height: min(610px, calc(100svh - 270px)); display: grid; grid-template-rows: minmax(220px, 52%) 1fr; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.pdf-bundle-media { min-height: 0; display: grid; place-items: center; padding: 24px; background: #e8edf4; }
.pdf-bundle-media img { width: auto; height: auto; max-width: 90%; max-height: 100%; object-fit: contain; }
.pdf-bundle-copy { padding: clamp(24px, 3vw, 38px); }
.pdf-bundle-copy h3 { margin: 0 0 14px; color: var(--text-heading); font-size: clamp(26px, 2.5vw, 38px); }
.pdf-bundle-copy ul { display: grid; gap: 8px; margin: 0; padding: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; list-style: none; }
.pdf-bundle-copy li strong { color: var(--text-heading); }

.pdf-contact-screen { background: linear-gradient(135deg, #0b203d, #17365f) !important; color: #fff; }
.pdf-contact-grid { min-height: 430px; }
.pdf-contact-grid .eyebrow { color: var(--brand-aurora); }
.pdf-contact-grid h2 { margin: 0; max-width: 820px; color: #fff; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.08; }
.pdf-contact-grid p { max-width: 760px; margin: 20px 0 0; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.7; }
.pdf-contact-actions { display: grid; gap: 14px; justify-items: stretch; }
.pdf-contact-actions .button { min-height: 58px; justify-content: center; background: #fff; border-color: #fff; color: var(--brand-ink); }
.pdf-contact-actions .button.secondary { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }

/* Hardware product screens 3–6: balanced viewport use without stretching adjacent content. */
.glove-hardware-screen .pdf-screen-inner,
.exo-hardware-screen .pdf-screen-inner { display: grid; gap: clamp(34px, 5vh, 58px); }
.glove-hardware-screen .pdf-screen-head,
.exo-hardware-screen .pdf-screen-head { margin-bottom: 0; }
.glove-hardware-screen .pdf-hardware-cards,
.exo-hardware-screen .pdf-hardware-cards { gap: clamp(18px, 2vw, 28px); }
.glove-hardware-screen .pdf-hardware-cards article,
.exo-hardware-screen .pdf-hardware-cards article {
  min-height: clamp(230px, 30vh, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 42px);
}
.glove-hardware-screen .pdf-hardware-cards h3,
.exo-hardware-screen .pdf-hardware-cards h3 { margin-bottom: 18px; font-size: clamp(22px, 2vw, 28px); }
.glove-hardware-screen .pdf-hardware-cards ul,
.exo-hardware-screen .pdf-hardware-cards ul { gap: 10px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; }

.glove-bundle-screen .pdf-screen-head,
.exo-bundle-screen .pdf-screen-head { margin-bottom: clamp(22px, 2.8vh, 32px); }
.glove-bundle-screen .pdf-bundle-grid,
.exo-bundle-screen .pdf-bundle-grid { align-items: start; }
.glove-bundle-screen .pdf-bundle-card,
.exo-bundle-screen .pdf-bundle-card {
  min-height: 0;
  height: auto;
  grid-template-rows: 240px auto;
}
.glove-bundle-screen .pdf-bundle-media,
.exo-bundle-screen .pdf-bundle-media { min-height: 240px; height: 240px; padding: 22px; }
.glove-bundle-screen .pdf-bundle-media img,
.exo-bundle-screen .pdf-bundle-media img {
  width: min(78%, 430px);
  height: 190px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.glove-bundle-screen .pdf-bundle-copy,
.exo-bundle-screen .pdf-bundle-copy { padding: clamp(22px, 2.3vw, 30px); }
.glove-bundle-screen .pdf-bundle-copy h3,
.exo-bundle-screen .pdf-bundle-copy h3 { margin-bottom: 12px; font-size: clamp(25px, 2.2vw, 34px); }
.glove-bundle-screen .pdf-bundle-copy ul,
.exo-bundle-screen .pdf-bundle-copy ul { gap: 6px; line-height: 1.45; }

.glove-contact-overview.pdf-screen,
.exo-contact-overview.pdf-screen { min-height: 360px; background: #fff !important; color: var(--text); }
.glove-contact-overview .pdf-contact-grid,
.exo-contact-overview .pdf-contact-grid {
  min-height: 220px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 6vw, 100px);
}
.glove-contact-overview .pdf-contact-grid h2,
.exo-contact-overview .pdf-contact-grid h2 {
  max-width: 1180px;
  color: var(--text-heading);
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1.08;
}
.glove-contact-overview .pdf-contact-grid p,
.exo-contact-overview .pdf-contact-grid p {
  max-width: 900px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.glove-contact-overview .pdf-contact-actions,
.exo-contact-overview .pdf-contact-actions { display: block; }
.glove-contact-overview .pdf-contact-actions .button,
.exo-contact-overview .pdf-contact-actions .button {
  min-width: 154px;
  min-height: 52px;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

@media (max-width: 1023px) {
  .pdf-product-page .pdf-screen { min-height: auto; overflow: visible; }
  .pdf-hero-grid,
  .pdf-feature-grid,
  .pdf-contact-grid { grid-template-columns: 1fr; }
  .pdf-hero-copy { grid-row: 1; }
  .pdf-hero-visual { min-height: 480px; }
  .pdf-gallery { min-height: 560px; }
  .pdf-hardware-cards { grid-template-columns: 1fr; }
  .pdf-spec-columns,
  .pdf-spec-details,
  .pdf-bundle-grid { grid-template-columns: 1fr; }
  .pdf-bundle-card { min-height: 580px; }
  .glove-bundle-screen .pdf-bundle-card,
  .exo-bundle-screen .pdf-bundle-card { min-height: 0; }
  .glove-contact-overview .pdf-contact-grid,
  .exo-contact-overview .pdf-contact-grid { grid-template-columns: 1fr; min-height: 0; }
  .glove-contact-overview .pdf-contact-actions,
  .exo-contact-overview .pdf-contact-actions { justify-self: start; }
}

@media (max-width: 640px) {
  .pdf-product-page .pdf-screen { padding-block: 48px; scroll-margin-top: 120px; }
  .pdf-screen-head { align-items: start; }
  .pdf-screen-head h2 { font-size: 34px; }
  .pdf-hero-visual { min-height: 360px; }
  .pdf-hero-copy h1 { font-size: 42px; }
  .pdf-gallery { min-height: 460px; grid-template-rows: minmax(0, 1fr) 74px; padding: 14px; }
  .pdf-gallery-thumbs img { height: 64px; }
  .pdf-feature-copy h2 { font-size: 34px; }
  .pdf-spec-group dl > div { grid-template-columns: 1fr; gap: 5px; }
  .pdf-spec-group dd { text-align: left; }
}

/* Global, non-blocking inquiry layer. Navigation remains browse-only; every task CTA opens this dialog in place. */
body.contact-modal-lock { overflow: hidden; }

.contact-modal {
  width: min(1040px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100svh - 40px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #050b16;
  color: rgba(255,255,255,.78);
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(5,16,36,.34);
}

.contact-modal::backdrop {
  background: rgba(5,16,36,.66);
  backdrop-filter: blur(8px);
}

.contact-modal-scroll {
  max-height: calc(100svh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.contact-modal-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 26px 18px 30px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(5,11,22,.92);
  backdrop-filter: blur(18px);
}

.contact-modal-header .eyebrow { margin-bottom: 8px; }
.contact-modal-header h2 { margin: 0; color: #fff; font-size: clamp(26px,2.4vw,34px); line-height: 1.16; }
.contact-modal-close {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.contact-modal-close:hover { border-color: var(--brand-aurora); background: rgba(255,255,255,.14); transform: rotate(4deg); }

.contact-modal-grid { display: grid; grid-template-columns: 310px minmax(0,1fr); min-height: 660px; }
.contact-modal-aside {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  background:
    radial-gradient(circle at 20% 5%, rgba(0,212,212,.16), transparent 34%),
    linear-gradient(145deg, #0b203d, #152f56);
  color: #fff;
}
.contact-modal-aside .kicker { color: var(--brand-aurora); }
.contact-modal-aside h3 { margin: 14px 0 12px; color: #fff; font-size: 28px; line-height: 1.2; }
.contact-modal-aside > p:not(.kicker) { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.75; }
.contact-modal-context { margin-top: 32px; padding: 18px 0; border-block: 1px solid rgba(255,255,255,.16); }
.contact-modal-context small { display: block; margin-bottom: 6px; color: rgba(255,255,255,.5); }
.contact-modal-context strong { color: #fff; font-size: 18px; }
.contact-modal-steps { display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; }
.contact-modal-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.76); font-size: 14px; }
.contact-modal-steps b { color: var(--brand-aurora); font-size: 12px; letter-spacing: .08em; }
.contact-modal-email { margin-top: auto; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(0,212,212,.6); text-underline-offset: 5px; }

.contact-modal-form-wrap { min-width: 0; padding: 24px 30px 30px; background: transparent; }
.contact-modal .contact-modal-topics { padding-top: 0; margin-bottom: 24px; border-radius: 10px; }
.contact-modal .contact-modal-topics button { min-height: 52px; padding-inline: 12px; border-top: 0; font-size: 14px; }
.contact-modal .contact-modal-form { padding: 0; border: 0; border-radius: 0; background: transparent; }
.contact-modal-form-context {
  grid-template-columns: 110px minmax(150px,190px) minmax(0,1fr);
  gap: 18px;
  padding: 0 0 20px;
  margin: 0 0 22px;
}
.contact-modal-form-context strong { font-size: 18px; }
.contact-modal-form-context > span { font-size: 14px; }
.contact-modal-fields { gap: 16px 18px; }
.contact-modal-fields input,
.contact-modal-fields select { min-height: 48px; }
.contact-modal-fields textarea { min-height: 92px; }
.contact-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.contact-modal-actions .button { min-width: 196px; }
.contact-modal .form-note { display: none; }
.contact-modal .field label { color: rgba(255,255,255,.86); }
.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.contact-modal .field input::placeholder,
.contact-modal .field textarea::placeholder { color: rgba(255,255,255,.42); }
.contact-modal .field input:focus,
.contact-modal .field select:focus,
.contact-modal .field textarea:focus {
  border-color: var(--brand-aurora);
  box-shadow: 0 0 0 3px rgba(0,212,212,.16);
}

@media (max-width: 900px) {
  .contact-modal-grid { grid-template-columns: 1fr; }
  .contact-modal-aside { padding: 28px 32px; }
  .contact-modal-aside h3 { font-size: 24px; }
  .contact-modal-aside > p:not(.kicker),
  .contact-modal-steps { display: none; }
  .contact-modal-context { margin-top: 18px; }
  .contact-modal-email { margin-top: 16px; }
}

@media (max-width: 640px) {
  .contact-modal { width: 100%; max-height: 100svh; border-radius: 0; }
  .contact-modal-scroll { max-height: 100svh; }
  .contact-modal-header { min-height: 88px; padding: 18px 20px; }
  .contact-modal-header h2 { font-size: 28px; }
  .contact-modal-close { width: 44px; height: 44px; }
  .contact-modal-aside { padding: 24px 20px; }
  .contact-modal-form-wrap { padding: 22px 20px 32px; }
  .contact-modal .contact-modal-topics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-modal .contact-modal-topics button { min-height: 54px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
  .contact-modal .contact-modal-topics button:nth-child(2n) { border-right: 0; }
  .contact-modal .contact-modal-topics button:nth-last-child(-n+2) { border-bottom: 0; }
  .contact-modal-form-context { grid-template-columns: 1fr; gap: 6px; }
  .contact-modal-fields { grid-template-columns: 1fr; }
  .contact-modal-fields .field.full { grid-column: 1; }
  .contact-modal-actions { display: grid; }
  .contact-modal-actions .button { width: 100%; min-width: 0; }
}

.contact-modal-grid-simple {
  grid-template-columns: 1fr;
  min-height: 0;
}

.contact-modal-grid-simple .contact-modal-form-wrap {
  padding: clamp(24px, 3vw, 44px);
}

.contact-modal-grid-simple .contact-modal-form-context {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.contact-modal-grid-simple .contact-modal-form-context p {
  margin: 0;
}

.contact-modal-grid-simple .contact-modal-form-context strong {
  color: var(--text-heading);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .contact-modal-grid-simple .contact-modal-form-wrap {
    padding: 22px 20px 32px;
  }

  .contact-modal-grid-simple .contact-modal-form-context {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-05 structure cleanup: homepage narrative, product matrix, about story, compact modal. */
.home-page .home-video-hero {
  height: calc(100svh - 72px);
  min-height: calc(100svh - 72px);
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.home-page .home-video-stage {
  top: 0;
  height: 100%;
}

.home-page .home-intro-section {
  min-height: 78svh;
  padding-block: clamp(96px, 10vw, 168px);
  text-align: center;
}

.home-page .home-intro-grid {
  display: block;
}

.home-page .home-intro-grid .hero-copy {
  max-width: 1560px;
  margin-inline: auto;
}

.home-page .home-intro-grid h1 {
  max-width: 1480px;
  margin-inline: auto;
  margin-bottom: clamp(34px, 4vw, 56px);
  line-height: 1.18;
}

.home-page .home-intro-grid .lead {
  max-width: 1180px;
  margin-inline: auto;
  color: var(--neutral-8);
  line-height: 1.95;
}

.home-page .compact-section,
.home-page .home-story-section {
  text-align: center;
}

.home-page .compact-section .section-head,
.home-page .home-story-section .section-head {
  display: block;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.home-page .compact-section .section-head > div,
.home-page .home-story-section .section-head > div {
  max-width: 1540px;
  margin-inline: auto;
}

.home-page .compact-section h2,
.home-page .home-story-section h2 {
  max-width: 1520px;
  margin-inline: auto;
  line-height: 1.24;
  white-space: normal;
}

.home-page .highlight-cards,
.home-page .story-board {
  text-align: left;
}

.home-page .context-cta {
  padding-block: clamp(96px, 8vw, 136px);
  background: #fff;
  text-align: center;
}

.home-page .context-cta .cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 32px;
}

.home-page .context-cta h2 {
  max-width: 1320px;
  margin-inline: auto;
  line-height: 1.22;
  text-align: center;
}

.home-page .context-cta .actions {
  justify-content: center;
}

@media (max-width: 767px) {
  .home-page .home-video-hero {
    height: calc(100svh - 64px);
    min-height: calc(100svh - 64px);
  }

  .home-page .home-intro-section {
    min-height: auto;
    padding-block: 72px;
  }

  .home-page .home-intro-grid h1 span,
  .home-page .home-intro-grid .lead span {
    display: inline;
  }
}
/* 2026-08-06 site-wide layout and interaction refresh */
:root {
  --qnbot-deep: #050b16;
  --qnbot-cyan: #66e9f1;
  --qnbot-page: #f4f7fb;
}

/* Header: the home header and hero are one continuous dark surface. */
.home-page .site-header,
.home-page .site-header.is-scrolled,
.about-page .site-header,
.about-page .site-header.is-scrolled {
  background: var(--qnbot-deep) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.home-page .site-header::before,
.about-page .site-header::before { display: none !important; }
.home-page .site-header .brand img,
.home-page .site-header.is-scrolled .brand img,
.about-page .site-header .brand img,
.about-page .site-header.is-scrolled .brand img { filter: brightness(0) invert(1) !important; }

.main-nav a,
.home-page .main-nav a,
.home-page .site-header.is-scrolled .main-nav a,
.about-page .main-nav a,
.about-page .site-header.is-scrolled .main-nav a {
  position: relative;
  color: rgba(235,242,248,.76) !important;
  background: transparent !important;
}
.main-nav a::before { display: none !important; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(102,233,241,.65), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.45);
  transition: opacity .2s ease, transform .25s ease, filter .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.home-page .main-nav a:hover,
.home-page .main-nav a:focus-visible,
.about-page .main-nav a:hover,
.about-page .main-nav a:focus-visible {
  color: rgba(154,240,246,.92) !important;
  transform: none;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { opacity: .55; transform: translateX(-50%) scaleX(1); }
.main-nav a.active,
.home-page .main-nav a.active,
.about-page .main-nav a.active {
  color: var(--qnbot-cyan) !important;
  font-weight: 700;
}
.main-nav a.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  background: linear-gradient(90deg, transparent, #66e9f1 22%, #9ef8fc 50%, #66e9f1 78%, transparent);
  box-shadow: 0 0 8px rgba(102,233,241,.85), 0 0 18px rgba(102,233,241,.42);
}
.home-page .header-consult-button,
.home-page .site-header.is-scrolled .header-consult-button,
.about-page .header-consult-button,
.about-page .site-header.is-scrolled .header-consult-button { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.07) !important; }
.subnav,
.subnav.is-scrolled { background: rgba(255,255,255,.98) !important; color: var(--text); }

/* Every major desktop story panel owns one viewport; mobile keeps natural flow. */
@media (min-width: 1024px) {
  .home-page main > section:not(.home-video-hero),
  .teleop-page main > section,
  .data-platform-page main > section {
    min-height: calc(100svh - 72px);
    display: grid;
    align-content: center;
  }
}

/* Product overview rebuilt around the two service modes in the planning PDF. */
#legacy-products-main,
.products-page > .context-cta { display: none !important; }
.service-overview-main { background: var(--qnbot-page); }
.service-screen {
  min-height: calc(100svh - 122px);
  padding: clamp(64px, 8vh, 104px) 0;
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 122px;
}
.service-screen-inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.service-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(42px, 7vw, 110px); }
.service-hero h1 { margin: 0; max-width: 760px; color: var(--text-heading); font-size: clamp(48px, 5.5vw, 82px); line-height: 1.08; }
.service-hero p { max-width: 690px; margin: 26px 0 0; color: var(--text-muted); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.75; }
.service-anchor-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.service-hero-visual { position: relative; min-height: min(600px, 62vh); border-radius: 28px; background: linear-gradient(145deg,#e7edf5,#f9fbfd); overflow: hidden; }
.service-hero-visual img { position: absolute; object-fit: contain; }
.service-hero-visual img:nth-child(1) { inset: 12% 20% auto auto; width: 62%; }
.service-hero-visual img:nth-child(2) { left: 3%; bottom: 0; width: 48%; height: 63%; }
.service-hero-visual img:nth-child(3) { right: 0; bottom: -2%; width: 46%; height: 58%; }
.service-screen-head { max-width: 920px; margin-bottom: clamp(30px, 5vh, 56px); }
.service-screen-head h2 { margin: 0; color: var(--text-heading); font-size: clamp(40px, 4.4vw, 66px); line-height: 1.1; }
.service-screen-head p { margin: 16px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.7; }
.service-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); }
.service-card { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); min-height: min(540px,58vh); border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.service-card-media { min-height: 0; display: grid; place-items: center; padding: 26px; background: #e9eef5; }
.service-card-media img { width: 100%; height: 100%; max-height: 460px; object-fit: contain; }
.service-card-media-wide img { max-width: 94%; max-height: 88%; }
.service-card-copy { align-self: center; padding: clamp(28px,3vw,48px); }
.service-card-copy h3 { margin: 0; color: var(--text-heading); font-size: clamp(28px,2.6vw,42px); }
.service-card-copy p { margin: 16px 0; color: var(--text-muted); line-height: 1.7; }
.service-card-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.service-card-copy li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-heading); font-size: 13px; }
.service-final { text-align: center; }
.service-final .service-screen-inner { display: grid; justify-items: center; }
.service-final h2 { max-width: 1000px; margin: 0; color: var(--text-heading); font-size: clamp(42px,5vw,74px); }
.service-final p { margin: 20px 0 34px; color: var(--text-muted); font-size: 18px; }

/* Product detail screens share one background and one viewport rhythm. */
.pdf-product-page .pdf-screen,
.pdf-product-page .pdf-screen:nth-child(even) { background: var(--qnbot-page) !important; }
.pdf-product-page .pdf-screen { min-height: calc(100svh - 122px); padding-block: clamp(48px,6vh,76px); }
.pdf-product-page .pdf-hero-title { display: grid; gap: .04em; }
.pdf-product-page .product-name { font-size: .92em; letter-spacing: -.035em; white-space: nowrap; }
.pdf-product-page .product-cn { font-size: .8em; }
.product-feature-screen .pdf-split-grid { align-items: center; }
.pdf-gallery-main { position: relative; }
.pdf-gallery-main.is-empty img { visibility: hidden; }
.pdf-gallery-main.is-empty::after { content: "SDK 硬件组件图待补充"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 18px; }
.pdf-gallery-thumbs button,
.pdf-feature-list button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pdf-gallery-thumbs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pdf-gallery-thumbs button { min-width: 0; width: 100%; height: 100%; padding: 8px; border: 1px solid transparent; border-radius: 10px; }
.pdf-gallery-thumbs button.is-active { border-color: var(--brand-aurora); box-shadow: 0 0 0 2px rgba(0,212,212,.12); }
.pdf-gallery-thumbs img { width: 100%; height: 68px; object-fit: contain; }
.pdf-feature-list > li { transition: background .2s ease, color .2s ease; }
.pdf-feature-list > li.is-active { background: rgba(0,212,212,.07); }
.pdf-feature-list button { width: 100%; padding: 14px 16px; }
.pdf-hardware-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,2.5vw,30px); }
.pdf-hardware-cards article { min-width: 0; display: grid; grid-template-rows: minmax(145px,22vh) auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.pdf-hardware-cards article img { width: 100%; height: 100%; padding: 18px; object-fit: contain; background: #e9eef5; }
.pdf-hardware-cards article > div { padding: 22px 24px 26px; }
.pdf-hardware-cards article h3 { margin-top: 0; }
.staged-cards article { opacity: 0; transform: translateY(24px); }
.staged-cards.is-inview article { animation: qnbot-card-in .58s cubic-bezier(.2,.7,.2,1) forwards; }
.staged-cards.is-inview article:nth-child(2) { animation-delay: .13s; }
.staged-cards.is-inview article:nth-child(3) { animation-delay: .26s; }
@keyframes qnbot-card-in { to { opacity: 1; transform: none; } }
.static-spec-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(26px,4vw,56px); margin-top: 0; }
.static-spec-details dl { margin: 0; }
.static-spec-details dl > div { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(0,1fr); align-items: center; gap: 20px; min-height: 58px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.static-spec-details dt { color: var(--text-muted); }
.static-spec-details dd { margin: 0; color: var(--text-heading); font-weight: 650; text-align: right; line-height: 1.5; }
.glove-bundle-screen .pdf-bundle-grid,
.exo-bundle-screen .pdf-bundle-grid { align-items: stretch; }
.glove-bundle-screen .pdf-bundle-card,
.exo-bundle-screen .pdf-bundle-card { height: 100%; min-height: 0; grid-template-rows: minmax(210px,30vh) auto; }
.glove-bundle-screen .pdf-bundle-media,
.exo-bundle-screen .pdf-bundle-media { width: 100%; height: auto; min-height: 0; aspect-ratio: 16/8.5; padding: 22px; }
.glove-bundle-screen .pdf-bundle-media img,
.exo-bundle-screen .pdf-bundle-media img { width: 100%; height: 100%; max-width: 88%; max-height: 88%; object-fit: contain; }
.glove-bundle-screen .pdf-bundle-copy,
.exo-bundle-screen .pdf-bundle-copy { padding: 24px 28px 28px; }
.unified-contact-cta.pdf-screen { min-height: min(480px,56svh) !important; background: #fff !important; text-align: center; }
.unified-contact-cta .pdf-screen-inner { display: grid; justify-items: center; gap: 28px; }
.unified-contact-cta h2 { max-width: 1100px; margin: 0; color: var(--text-heading); font-size: clamp(40px,5vw,70px); }

/* About: one topic per viewport, replaying motion when the panel re-enters. */
#legacy-about-main { display: none !important; }
.about-story-refresh { background: #fff; scroll-snap-type: y proximity; }
.about-story-panel { min-height: calc(100svh - 72px); padding: clamp(70px,9vh,112px) 0; display: grid; align-content: center; scroll-snap-align: start; overflow: hidden; }
.about-story-panel > .container { width: min(100% - (var(--gutter) * 2), var(--container)); }
.about-story-hero { background: var(--qnbot-deep); color: #fff; }
.about-story-hero h1 { max-width: 920px; margin: 0; font-size: clamp(64px,8vw,124px); line-height: 1.02; }
.about-story-hero p { max-width: 900px; margin: 38px 0 0; color: rgba(255,255,255,.62); font-size: 20px; line-height: 1.8; }
.about-story-panel h2 { margin: 0 0 34px; color: var(--text-heading); font-size: clamp(48px,6vw,88px); text-align: center; }
.about-story-panel .lead { max-width: 1200px; margin-inline: auto; color: var(--text-muted); font-size: clamp(18px,1.7vw,25px); line-height: 2; text-align: center; }
.about-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 38px; }
.about-value-grid article { padding: clamp(28px,3vw,46px); border: 1px solid var(--line); border-radius: 18px; background: var(--qnbot-page); }
.about-value-grid h3 { margin-top: 0; color: var(--text-heading); font-size: 28px; }
.replay-reveal > * { opacity: 0; transform: translateY(22px); }
.replay-reveal.is-inview > * { animation: qnbot-reveal .58s ease forwards; }
.replay-reveal.is-inview > *:nth-child(2) { animation-delay: .12s; }
.replay-reveal.is-inview > *:nth-child(3) { animation-delay: .24s; }
@keyframes qnbot-reveal { to { opacity: 1; transform: none; } }

/* Compact unified footer. */
.footer { padding: 0 !important; background: var(--qnbot-deep) !important; color: #fff; }
.footer-simple-main { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 36px; }
.footer-brand { display: flex; align-items: center; gap: 28px; }
.footer-brand img { width: 150px; height: auto; }
.footer-brand p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.65; }
.footer-contact-button { min-height: 52px; display: inline-flex; align-items: center; gap: 18px; padding: 0 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; }
.footer-contact-button:hover { border-color: var(--qnbot-cyan); color: var(--qnbot-cyan); }
.footer-simple-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-simple-bottom .container { min-height: 66px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 13px; }

/* Contact modal: light page surface, direct channel selection below the form. */
.contact-modal { background: var(--qnbot-page) !important; color: var(--text) !important; }
.contact-modal-scroll { background: var(--qnbot-page) !important; }
.contact-modal-header { background: var(--qnbot-page) !important; border-bottom: 1px solid var(--line) !important; }
.contact-modal-header h2 { color: var(--text-heading) !important; }
.contact-modal-close { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; padding: 0 !important; border-color: rgba(17,45,95,.3) !important; background: #fff !important; color: var(--text-heading) !important; font-size: 30px !important; line-height: 1 !important; }
.contact-modal-grid,
.contact-modal-grid-simple { min-height: 0 !important; background: var(--qnbot-page) !important; }
.contact-modal-form-wrap { background: transparent !important; }
.contact-modal .field label { color: var(--text-heading) !important; }
.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea { background: #fff !important; color: var(--text) !important; border-color: #cfd8e5 !important; }
.contact-channels { max-width: 900px; margin: 36px auto 0; padding: 26px; display: grid; grid-template-columns: minmax(230px,.72fr) minmax(300px,1.28fr); gap: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.contact-channels-copy h3 { margin: 0 0 8px; color: var(--text-heading); font-size: 26px; }
.contact-channels-copy a { color: var(--brand-cosmic); font-weight: 700; }
.contact-channels-copy p { color: var(--text-muted); line-height: 1.6; }
.contact-channel-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-channel-tabs button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--qnbot-page); color: var(--text); cursor: pointer; }
.contact-channel-tabs button.is-active { border-color: var(--brand-aurora); color: var(--brand-cosmic); box-shadow: 0 0 0 2px rgba(0,212,212,.1); }
.contact-channel-preview { display: grid; justify-items: center; align-content: center; min-height: 230px; padding: 18px; border-radius: 14px; background: var(--qnbot-page); }
.contact-channel-preview img { width: 190px; height: 190px; object-fit: contain; background: #fff; transition: opacity .18s ease, transform .18s ease; }
.contact-channel-preview.is-changing img { opacity: .25; transform: scale(.96); }
.contact-channel-preview p { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; }

/* All end-of-page contact calls use the same centered title + button pattern. */
.context-cta .eyebrow,
.context-cta .cta-copy > p { display: none; }
.context-cta .cta-inner { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.context-cta .actions { justify-content: center; }

@media (max-width: 1023px) {
  .service-screen { min-height: auto; }
  .service-hero-grid,
  .service-card { grid-template-columns: 1fr; }
  .service-card-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card-media { min-height: 320px; }
  .pdf-hardware-cards { grid-template-columns: 1fr; }
  .static-spec-details { grid-template-columns: 1fr; }
  .about-story-panel { min-height: calc(100svh - 64px); }
}

@media (max-width: 767px) {
  .main-nav a::after { display: none; }
  .home-page .main-nav,
  .about-page .main-nav { background: var(--qnbot-deep); }
  .service-screen { padding-block: 56px; scroll-margin-top: 120px; }
  .service-hero-grid { gap: 36px; }
  .service-hero h1 { font-size: 42px; }
  .service-hero-visual { min-height: 360px; }
  .service-card-media { min-height: 260px; }
  .pdf-product-page .pdf-screen { min-height: auto; }
  .pdf-product-page .product-name { white-space: normal; }
  .pdf-gallery-thumbs img { height: 48px; }
  .static-spec-details dl > div { grid-template-columns: 1fr; gap: 6px; }
  .static-spec-details dd { text-align: left; }
  .pdf-bundle-grid { grid-template-columns: 1fr; }
  .about-story-refresh { scroll-snap-type: none; }
  .about-story-panel { min-height: 100svh; padding-block: 70px; }
  .about-story-hero h1 { font-size: 54px; }
  .about-value-grid { grid-template-columns: 1fr; }
  .footer-simple-main { min-height: 0; flex-direction: column; align-items: flex-start; padding-block: 34px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-simple-bottom .container { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
  .contact-modal-grid-simple { display: block !important; }
  .contact-modal-form-wrap { padding: 20px 16px 26px !important; }
  .contact-modal-fields { grid-template-columns: 1fr !important; }
  .contact-channels { grid-template-columns: 1fr; padding: 18px; }
  .contact-channel-preview { min-height: 220px; }
  .contact-channel-preview img { width: 180px; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .staged-cards article,
  .replay-reveal > * { opacity: 1; transform: none; animation: none !important; }
}

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }


/* source: s1m01-system.css */
/*
 * Qnbot S1M01 system pass
 * Shared tokens and components derived from the supplied website audit.
 */

:root {
  /* Nine-step, blue-tinted neutral scale. */
  --neutral-0: #ffffff;
  --neutral-1: #f7f9fc;
  --neutral-2: #eef2f7;
  --neutral-3: #e2e8f0;
  --neutral-4: #cbd5e1;
  --neutral-5: #9aa8ba;
  --neutral-6: #6f7e91;
  --neutral-7: #4b596c;
  --neutral-8: #2d394a;
  --neutral-9: #141f30;

  --canvas: var(--neutral-1);
  --surface: var(--neutral-0);
  --section-surface: var(--neutral-0);
  --surface-subtle: var(--neutral-2);
  --text: var(--neutral-9);
  --text-heading: var(--brand-cosmic);
  --text-muted: var(--neutral-7);
  --line: var(--neutral-3);
  --line-strong: var(--neutral-5);

  --success: #23845b;
  --success-surface: #eaf7f0;
  --warning: #a9600d;
  --warning-surface: #fff4e3;
  --error: #bd3645;
  --error-surface: #fff0f2;

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 12px;
  --radius-xs: 4px;
  --radius-sm: var(--radius-control);
  --shadow-card: 0 12px 32px rgba(17, 45, 95, .07);
  --shadow-hover: 0 18px 42px rgba(17, 45, 95, .11);
  --shadow-dialog: 0 32px 90px rgba(5, 16, 36, .3);

  --type-display: 68px;
  --type-section: 48px;
  --type-statement: 54px;
  --type-lead: 20px;
  --type-title: 24px;
  --type-card-title: 32px;
  --type-layer-title: 40px;
  --type-feature-title: 40px;
  --type-metric: 38px;

  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --carousel-duration: 6800ms;
}

body {
  background: var(--canvas);
  color: var(--text);
}

/* Clearer type hierarchy: title, body and annotation. */
h1,
h2,
h3 { text-wrap: balance; }

.copy,
.section-intro,
.section-head > p { color: var(--text-muted); }

.kicker,
.eyebrow,
.card-index,
.index { letter-spacing: .02em; }

.section {
  padding-block: clamp(72px, 8vw, 128px);
  border-top-color: var(--line);
}

.compact-section { padding-block: clamp(64px, 7vw, 112px); }

.section-head {
  gap: var(--space-2) var(--space-3);
  align-items: start;
  margin-bottom: clamp(48px, 5vw, 72px);
}

.section-head > div {
  grid-column: 1 / -1;
  max-width: 1240px;
}

.section-head > p {
  grid-column: 1 / -1;
  max-width: 920px;
  margin: -4px 0 0;
  font-size: 17px;
}

.section-head h2 { max-width: none; }

/* One button language across every page. */
.button,
.header-consult,
.header-consult-button {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: var(--radius-control);
  box-shadow: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.button:hover,
.header-consult:hover,
.header-consult-button:hover {
  background: #0c234a;
  border-color: #0c234a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17, 45, 95, .14);
}

.button.secondary:hover {
  background: var(--neutral-2);
  border-color: var(--brand-secondary);
  box-shadow: none;
}

.button:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

/* Standard card shell and a restrained, consistent hover response. */
:is(
  .product-card,
  .workflow-product-card,
  .feature-shell,
  .story-board,
  .task-chain-visual,
  .product-system-board,
  .form-card,
  .contact-direct-card,
  .glove-capability-card,
  .exo-capability-card,
  .teleop-capability-card,
  .platform-capability-card,
  .glove-spec-card,
  .exo-spec-card,
  .about-product-carousel,
  .products-overview-carousel
) {
  border-color: var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

:is(
  .product-card,
  .workflow-product-card,
  .highlight-cards article,
  .teleop-summary article,
  .teleop-boundary-grid article,
  .about-principles article,
  .about-foundations article
) {
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-base) var(--ease-enter),
    box-shadow var(--duration-base) var(--ease-enter);
}

:is(
  .product-card,
  .workflow-product-card,
  .highlight-cards article,
  .teleop-summary article,
  .teleop-boundary-grid article,
  .about-principles article,
  .about-foundations article
):hover {
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.product-card:hover .product-media img,
.workflow-product-card:hover .workflow-product-media img { transform: scale(1.012); }

/* Clickable regions must advertise interactivity. */
:is(
  .topic-panel button,
  .feature-controls button,
  .showcase-controls button,
  .glove-capability-thumb,
  .exo-capability-thumb,
  .teleop-capability-thumb,
  .platform-capability-thumb,
  .glove-spec-tabs button,
  .exo-spec-tabs button
):hover {
  color: var(--text-heading);
  background-color: var(--neutral-2);
}

/* Four carousel dots; the active item becomes a longer rounded rectangle. */
.carousel-pagination { gap: 8px; }

.carousel-page {
  width: 24px;
  height: 32px;
}

.carousel-page::before,
.carousel-page::after {
  left: 8px;
  right: auto;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: none;
}

.carousel-page::before { background: var(--neutral-4); }
.carousel-page::after { display: none; }

.carousel-page.active { width: 40px; }
.carousel-page.active::before {
  left: 4px;
  width: 32px;
  background: var(--brand-secondary);
}

.carousel-page:hover::before,
.carousel-page:focus-visible::before { background: var(--brand-aurora); }

/* Homepage banner navigation follows the same dot language. */
.showcase-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
}

.showcase-controls button {
  min-height: 28px;
  width: 28px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 0;
  text-align: center;
}

.showcase-controls button span { display: none; }
.showcase-controls button::before {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  margin: 10px auto;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  transition: width var(--duration-base) var(--ease-enter), background-color var(--duration-fast);
}

.showcase-controls button:hover,
.showcase-controls button.is-active { width: 48px; background: transparent; }
.showcase-controls button:hover::before { background: rgba(255,255,255,.72); }
.showcase-controls button.is-active::before { width: 32px; background: var(--brand-aurora); }
.showcase-controls button.is-active::after { display: none; }

/* Calm, shared motion. */
.reveal {
  transition: opacity 480ms var(--ease-standard), transform 480ms var(--ease-enter);
}

.feature-slide.active,
.feature-slide.active .feature-media img,
.feature-slide.active .feature-copy > * { animation-duration: 420ms; }

.contact-modal-close:hover { transform: none; }

/* Consistent product-page reading stages. */
.product-stage-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--neutral-6);
  font: 700 12px/1.4 "Open Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.product-stage-label::before {
  content: attr(data-step);
  color: var(--brand-secondary);
}

.product-stage-label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}

/* Standardized form and dialog template. */
.contact-modal {
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-dialog);
}

.contact-modal {
  --contact-modal-background: #0b1f3a;
  background: var(--contact-modal-background);
  color: #e7eef8;
}

.contact-modal-header,
.contact-modal-form-wrap {
  background: var(--contact-modal-background);
}

.contact-modal-header h2,
.contact-modal .field label {
  color: #ffffff;
}

.contact-modal-close {
  position: relative;
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-size: 0;
  line-height: 0;
}

.contact-modal-close::before,
.contact-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.contact-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-modal-close:hover {
  border-color: #54e1e1;
  background: rgba(84, 225, 225, .18);
}

.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea {
  border-color: #9fb0c6;
  background: #f8fafc;
  color: #141f30;
}

.contact-modal .field input::placeholder,
.contact-modal .field textarea::placeholder {
  color: #627187;
}

.contact-modal .field input:focus,
.contact-modal .field select:focus,
.contact-modal .field textarea:focus {
  border-color: #54e1e1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(84, 225, 225, .28);
}

.contact-modal-email-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.5;
}

.contact-modal-email-field a {
  color: #54e1e1;
  font-weight: 700;
  text-decoration: none;
}

.contact-modal-email-field a:hover,
.contact-modal-email-field a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-modal-aside {
  background:
    radial-gradient(circle at 20% 4%, rgba(0, 212, 212, .13), transparent 32%),
    linear-gradient(145deg, #102b51, #17365f);
}

.contact-modal-form-context {
  border-bottom: 1px solid var(--line);
}

.field input,
.field select,
.field textarea {
  border-color: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--neutral-1);
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--neutral-6); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-secondary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(36, 77, 140, .12);
}

.field :is(input, select, textarea):user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 13%, transparent);
}

.privacy-consent input {
  accent-color: var(--brand-secondary);
}

.form-note {
  min-height: 24px;
  color: var(--text-muted);
}

.form-note[data-state="success"] { color: var(--success); }
.form-note[data-state="warning"] { color: var(--warning); }
.form-note[data-state="error"] { color: var(--error); }

.contact-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100svh - 48px));
  max-height: none;
  overflow: hidden;
}

.contact-modal-scroll {
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.contact-modal-header {
  min-height: 112px;
  flex: 0 0 auto;
  padding: 28px 40px;
  border-bottom: 1px solid var(--line);
}

.contact-modal-header .eyebrow {
  display: none;
}

.contact-modal-header h2 {
  max-width: 760px;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.32;
}

.contact-modal-grid,
.contact-modal-grid-simple {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.contact-modal-grid-simple .contact-modal-form-wrap,
.contact-modal-form-wrap {
  height: 100%;
  overflow: auto;
}

.contact-modal-grid-simple .contact-modal-form-context,
.contact-modal-form-context {
  display: none;
}

@media (min-width: 641px) {
  .contact-modal-scroll {
    display: grid;
    grid-template-rows: auto auto;
    align-content: safe center;
    overflow: auto;
  }

  .contact-modal-header {
    position: static;
  }

  .contact-modal-grid-simple {
    min-height: auto;
    overflow: visible;
  }

  .contact-modal-grid-simple .contact-modal-form-wrap {
    height: auto;
    overflow: visible;
  }

  .contact-modal-grid-simple .contact-modal-form {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .contact-modal {
    width: 100%;
    height: 100svh;
    border-radius: 0;
  }

  .contact-modal-header {
    min-height: 96px;
    padding: 20px;
  }
}

.inquiry-result-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-dialog);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
}

.inquiry-result-dialog::backdrop {
  background: rgba(5, 16, 36, .62);
  backdrop-filter: blur(6px);
}

.inquiry-result-inner { padding: 32px; }

.inquiry-result-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--success-surface);
  color: var(--success);
  font-size: 24px;
  font-weight: 800;
}

.inquiry-result-dialog[data-state="error"] .inquiry-result-mark {
  background: var(--error-surface);
  color: var(--error);
}

.inquiry-result-dialog h2 { margin-bottom: 12px; font-size: 30px; }
.inquiry-result-dialog p { color: var(--text-muted); }
.inquiry-reference {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--neutral-1);
}

.inquiry-reference b { color: var(--text-heading); }

@media (max-width: 900px) {
  :root {
    --type-display: 54px;
    --type-section: 40px;
    --type-statement: 44px;
  }

  .section-head > p { font-size: 16px; }
}

@media (max-width: 640px) {
  :root {
    --type-display: 42px;
    --type-section: 34px;
    --type-statement: 38px;
    --type-lead: 18px;
  }

  .section { padding-block: 64px; }
  .showcase-controls { padding-block: 12px; }
  .inquiry-result-inner { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* source: layout-refinements.css */
/* 2026-08-06 final layout refinements */

/* Header and product sub-navigation: one calm, readable interaction system. */
.site-header,
.products-page .site-header,
.vetraglove-page .site-header,
.exo-page .site-header,
.teleop-page .site-header,
.data-page .site-header {
  box-shadow: none !important;
}

.main-nav a,
.subnav a {
  position: relative;
  color: #4d5b70 !important;
  text-shadow: none !important;
  transition: color 180ms ease !important;
}

.main-nav a::after,
.subnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: #35c7d7;
  opacity: 0;
  transform: translateX(-50%) scaleX(.55);
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.subnav a:hover,
.subnav a:focus-visible {
  color: #149caf !important;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.subnav a:hover::after,
.subnav a:focus-visible::after {
  opacity: .42;
  transform: translateX(-50%) scaleX(.82);
}

.main-nav a.active,
.main-nav a[aria-current="page"],
.subnav a.active,
.subnav a[aria-current="page"] {
  color: #0796aa !important;
}

.main-nav a.active::after,
.main-nav a[aria-current="page"]::after,
.subnav a.active::after,
.subnav a[aria-current="page"]::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.main-nav a::before,
.subnav a::before {
  display: none !important;
}

.subnav,
.products-page .subnav,
.vetraglove-page .subnav,
.exo-page .subnav,
.teleop-page .subnav,
.data-page .subnav {
  background: #fff !important;
  background-image: none !important;
  border-top: 1px solid #e8edf3 !important;
  border-bottom: 1px solid #e8edf3 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Immersive first screens keep the navigation legible without glow. */
.home-page:not(.is-scrolled) .main-nav a,
.about-page:not(.is-scrolled) .main-nav a {
  color: rgba(242, 247, 252, .72) !important;
}

.home-page:not(.is-scrolled) .main-nav a:hover,
.home-page:not(.is-scrolled) .main-nav a:focus-visible,
.about-page:not(.is-scrolled) .main-nav a:hover,
.about-page:not(.is-scrolled) .main-nav a:focus-visible,
.home-page:not(.is-scrolled) .main-nav a.active,
.home-page:not(.is-scrolled) .main-nav a[aria-current="page"],
.about-page:not(.is-scrolled) .main-nav a.active,
.about-page:not(.is-scrolled) .main-nav a[aria-current="page"] {
  color: #4fd7e3 !important;
}

/* Product overview hero: type only, centered in one viewport. */
.service-overview-main .service-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  min-height: calc(100svh - 148px) !important;
}

.service-overview-main .service-hero-copy {
  width: min(1060px, 100%) !important;
  text-align: center !important;
  justify-self: center !important;
}

.service-overview-main .service-hero-copy h1 {
  max-width: none !important;
  margin-inline: auto !important;
  text-wrap: balance;
}

.service-overview-main .service-hero-copy p {
  max-width: 920px !important;
  margin-inline: auto !important;
}

.service-overview-main .service-composite,
.service-overview-main .service-anchor-actions {
  display: none !important;
}

/* Product feature screens: centered headline, then balanced image/details columns. */
.pdf-screen.product-feature-screen > .pdf-screen-inner {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: center !important;
  gap: clamp(28px, 4vh, 52px) !important;
}

.pdf-feature-title {
  margin: 0 auto !important;
  max-width: none !important;
  color: #0f356f !important;
  font-size: clamp(34px, 4.1vw, 66px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
  text-align: center !important;
  white-space: nowrap;
}

.pdf-feature-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) !important;
  align-items: stretch !important;
  gap: clamp(34px, 5vw, 82px) !important;
  min-height: 0 !important;
}

.pdf-feature-grid .pdf-gallery,
.pdf-feature-grid .pdf-feature-copy {
  min-height: 0 !important;
  height: 100% !important;
}

.pdf-feature-grid .pdf-feature-copy {
  display: flex !important;
  align-items: stretch !important;
}

.pdf-feature-grid .pdf-feature-list {
  width: 100% !important;
  margin: 0 !important;
}

/* Equal hardware cards and equal visual windows. */
.pdf-hardware-cards {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

.pdf-hardware-cards > article {
  display: grid !important;
  grid-template-rows: clamp(168px, 23vh, 228px) auto 1fr !important;
  align-content: start !important;
  height: 100% !important;
  overflow: hidden !important;
}

.pdf-hardware-cards .hardware-card-media {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pdf-hardware-cards .hardware-card-media img {
  display: block !important;
  width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Bundle cards: image remains in the blue zone; copy remains in the white zone. */
.pdf-bundle-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

.pdf-bundle-card {
  display: grid !important;
  grid-template-rows: clamp(210px, 30vh, 310px) minmax(250px, auto) !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
}

.pdf-bundle-card .pdf-bundle-media {
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(22px, 3vw, 46px) !important;
  overflow: hidden !important;
  background: #eaf0f8 !important;
}

.pdf-bundle-card .pdf-bundle-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.pdf-bundle-card .pdf-bundle-copy {
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
  padding: clamp(24px, 3vw, 44px) !important;
  background: #fff !important;
  color: #4f6076 !important;
  overflow: hidden !important;
}

/* Every contact screen follows the homepage: headline, then button, centered. */
.context-cta .cta-inner,
.unified-contact-cta .pdf-contact-grid,
.service-final .service-final-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(28px, 4vh, 46px) !important;
  text-align: center !important;
}

.context-cta .eyebrow,
.context-cta p,
.teleop-page main .eyebrow,
.data-page main .eyebrow {
  display: none !important;
}

.context-cta h2,
.unified-contact-cta h2,
.service-final h2 {
  margin: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.context-cta .actions,
.unified-contact-cta .pdf-contact-actions,
.service-final .actions {
  display: flex !important;
  width: auto !important;
  justify-content: center !important;
}

.context-cta .actions .button,
.unified-contact-cta .button,
.service-final .button {
  width: auto !important;
}

/* About: no seam, one idea per viewport, horizontally scrollable equal cards. */
.about-narrative {
  background: #050b16 !important;
}

.about-narrative-hero {
  height: calc(100svh - 72px) !important;
  min-height: calc(100svh - 72px) !important;
  margin: 0 !important;
  border: 0 !important;
  background: #050b16 !important;
  box-shadow: 0 3px 0 #050b16 !important;
}

.about-section {
  display: grid !important;
  min-height: calc(100svh - 72px) !important;
  align-content: center !important;
  padding-block: clamp(64px, 9vh, 112px) !important;
}

.about-company-slogan,
.about-slogan-screen {
  background: #fff !important;
}

.about-slogan-screen {
  text-align: center;
}

.about-slogan-screen h2 {
  margin: 0 auto !important;
  color: #0f356f;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.08;
  text-wrap: balance;
}

.about-slogan-screen p {
  margin: 28px auto 0;
  color: #56657a;
  font-size: clamp(17px, 1.5vw, 24px);
  letter-spacing: .03em;
}

.about-foundation {
  background: #f4f7fb !important;
}

.about-foundation .story-container {
  width: min(100%, 1440px) !important;
}

.about-foundation-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(18px, 2.2vw, 32px) !important;
  margin-top: clamp(34px, 5vh, 60px) !important;
  padding: 8px max(24px, calc((100vw - 1440px) / 2)) 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(24px, calc((100vw - 1440px) / 2));
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.about-foundation-grid article,
.about-foundation-grid article:first-child,
.about-foundation-grid article:nth-child(2),
.about-foundation-grid article:nth-child(n+3) {
  flex: 0 0 min(72vw, 540px) !important;
  display: grid !important;
  min-height: clamp(300px, 42vh, 420px) !important;
  grid-column: auto !important;
  place-content: center !important;
  padding: clamp(32px, 4vw, 58px) !important;
  scroll-snap-align: center;
  text-align: center !important;
}

@media (max-width: 900px) {
  .service-overview-main .service-hero-grid {
    min-height: calc(100svh - 120px) !important;
  }

  .pdf-feature-title,
  .context-cta h2,
  .unified-contact-cta h2,
  .service-final h2 {
    white-space: normal !important;
  }

  .pdf-feature-grid {
    grid-template-columns: 1fr !important;
  }

  .pdf-hardware-cards > article {
    grid-template-rows: 190px auto 1fr !important;
  }

  .pdf-bundle-card {
    grid-template-rows: 230px auto !important;
  }

  .about-foundation-grid article,
  .about-foundation-grid article:first-child,
  .about-foundation-grid article:nth-child(2),
  .about-foundation-grid article:nth-child(n+3) {
    flex-basis: min(84vw, 480px) !important;
  }
}

/* Contact dialog only: compact light treatment. */
.contact-modal[data-contact-dialog] {
  width: min(1320px, calc(100vw - 96px)) !important;
  max-width: 1320px !important;
  max-height: calc(100svh - 96px) !important;
  border: 1px solid #d8e1ec !important;
  background: #f4f7fb !important;
  color: #17345f !important;
  box-shadow: 0 24px 70px rgba(16, 36, 66, .24) !important;
}
.contact-modal[data-contact-dialog] .contact-modal-scroll { max-height: calc(100svh - 96px) !important; background: #f4f7fb !important; }
.contact-modal[data-contact-dialog] .contact-modal-header { min-height: 96px !important; padding: 20px 38px !important; border-bottom: 1px solid #d8e1ec !important; background: #f4f7fb !important; }
.contact-modal[data-contact-dialog] .contact-modal-header h2 { color: #113165 !important; font-size: clamp(23px, 1.7vw, 32px) !important; }
.contact-modal[data-contact-dialog] .contact-modal-grid-simple,
.contact-modal[data-contact-dialog] .contact-modal-form-wrap,
.contact-modal[data-contact-dialog] .contact-modal-form,
.contact-modal[data-contact-dialog] .form-card { background: #f4f7fb !important; }
.contact-modal[data-contact-dialog] .contact-modal-form-wrap { padding: 22px 38px 28px !important; }
.contact-modal[data-contact-dialog] .contact-modal-fields { gap: 16px 26px !important; }
.contact-modal[data-contact-dialog] .field label { margin-bottom: 6px !important; color: #17345f !important; }
.contact-modal[data-contact-dialog] .field input,
.contact-modal[data-contact-dialog] .field select,
.contact-modal[data-contact-dialog] .field textarea { background: #fff !important; color: #263247 !important; }
.contact-modal[data-contact-dialog] .field textarea { min-height: 100px !important; }
.contact-modal[data-contact-dialog] .contact-modal-close { width: 46px !important; height: 46px !important; flex-basis: 46px !important; border-color: #aebdce !important; background: #fff !important; color: #17345f !important; }
.contact-modal[data-contact-dialog] .contact-modal-actions { margin-top: 18px !important; }
.contact-modal[data-contact-dialog] .contact-modal-email-row { margin-top: 14px !important; color: #63748a !important; }
.contact-modal[data-contact-dialog] .contact-modal-email-row a { color: #078e9d !important; }
@media (max-width: 900px) {
  .contact-modal[data-contact-dialog] { width: calc(100vw - 24px) !important; max-height: calc(100svh - 24px) !important; }
  .contact-modal[data-contact-dialog] .contact-modal-scroll { max-height: calc(100svh - 24px) !important; }
  .contact-modal[data-contact-dialog] .contact-modal-header { padding: 18px 22px !important; }
  .contact-modal[data-contact-dialog] .contact-modal-form-wrap { padding: 20px 22px 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a,
  .main-nav a::after,
  .subnav a,
  .subnav a::after {
    transition: none !important;
  }
}

/* 2026-08-06 visibility and layout corrections. */
.contact-modal { width: min(1180px, calc(100% - 96px)) !important; max-height: min(88svh, 900px) !important; background: #f4f7fb !important; color: #17345f !important; box-shadow: 0 24px 72px rgba(20, 43, 75, .24) !important; }
.contact-modal-scroll, .contact-modal-grid, .contact-modal-grid-simple, .contact-modal-form-wrap, .contact-modal .form-card { background: #f4f7fb !important; }
.contact-modal-scroll { max-height: min(88svh, 900px) !important; }
.contact-modal-header { min-height: 108px !important; padding: 24px clamp(28px, 3.2vw, 48px) !important; border-bottom-color: #d7e0eb !important; background: rgba(244, 247, 251, .96) !important; }
.contact-modal-header h2 { color: #113165 !important; font-size: clamp(24px, 1.8vw, 34px) !important; }
.contact-modal-close { flex-basis: 48px !important; width: 48px !important; height: 48px !important; border-color: #aebdce !important; background: #fff !important; color: #17345f !important; font-size: 31px !important; }
.contact-modal-close:hover, .contact-modal-close:focus-visible { background: #e4f7f8 !important; color: #087f8d !important; }
.contact-modal-form-wrap { padding: 26px clamp(28px, 3.2vw, 48px) 30px !important; }
.contact-modal .contact-modal-fields { gap: 18px 28px !important; }
.contact-modal .field label { margin-bottom: 7px !important; color: #17345f !important; }
.contact-modal .field input, .contact-modal .field select, .contact-modal .field textarea { background: #fff !important; color: #263247 !important; }
.contact-modal .field textarea { min-height: 112px !important; }
.contact-modal-actions { margin-top: 20px !important; }
.contact-modal-email-row { margin-top: 16px !important; color: #63748a !important; }
.contact-modal-email-row a { color: #078e9d !important; }

.module-carousel-slide > img { box-sizing: border-box !important; width: calc(100% - clamp(140px, 15vw, 260px)) !important; height: calc(100% - clamp(80px, 10vh, 130px)) !important; max-width: 1480px !important; max-height: 620px !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; }
.module-slide-copy h3, .module-slide-copy li { opacity: 1 !important; transform: none !important; }
.module-slide-copy h3 { color: #113165 !important; visibility: visible !important; }
.module-slide-copy li { color: #56677e !important; visibility: visible !important; }
.module-carousel-slide.is-active .module-slide-copy h3, .module-carousel-slide.is-active .module-slide-copy li { animation: module-copy-soft-in 420ms ease-out both !important; }
@keyframes module-copy-soft-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.motion-panel .delivery-media, .motion-panel .delivery-copy h3, .motion-panel .delivery-copy h4, .motion-panel .delivery-copy li { opacity: 1 !important; transform: none !important; }
.motion-panel .delivery-media, .motion-panel .delivery-copy { visibility: visible !important; }
.motion-panel.is-inview .delivery-media, .motion-panel.is-inview .delivery-copy h3, .motion-panel.is-inview .delivery-copy h4, .motion-panel.is-inview .delivery-copy li { animation: delivery-soft-in 500ms ease-out both !important; }
@keyframes delivery-soft-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.about-company-slogan, .about-slogan-screen { min-height: calc(82svh - 72px) !important; padding-block: clamp(48px, 6vh, 76px) !important; }
.about-company-slogan .story-container, .about-slogan-screen .story-container { max-width: 1260px !important; }
.about-foundation h2, .about-foundation-grid article, .about-foundation-grid article:first-child, .about-foundation-grid article:nth-child(2), .about-foundation-grid article:nth-child(n+3) { opacity: 1 !important; transform: none !important; }
.about-foundation.is-inview h2, .about-foundation.is-inview .about-foundation-grid article { animation: foundation-soft-in 350ms ease-out both !important; }
@keyframes foundation-soft-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .contact-modal { width: calc(100% - 24px) !important; max-height: calc(100svh - 24px) !important; }
  .contact-modal-scroll { max-height: calc(100svh - 24px) !important; }
  .module-carousel-slide > img { width: calc(100% - 40px) !important; height: calc(100% - 190px) !important; max-height: none !important; }
  .about-company-slogan, .about-slogan-screen { min-height: auto !important; padding-block: 72px !important; }
}

/* Contact modal: restore the compact dark form version. */
.contact-modal {
  width: min(1460px, calc(100% - 64px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 48px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #0b2545 !important;
  color: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 26px 80px rgba(2, 10, 24, .38) !important;
  overflow: hidden !important;
}

.contact-modal::backdrop {
  background: rgba(8, 18, 34, .66) !important;
  backdrop-filter: blur(8px) !important;
}

.contact-modal-scroll,
.contact-modal-grid,
.contact-modal-grid-simple,
.contact-modal-form-wrap,
.contact-modal .form-card {
  background: #0b2545 !important;
}

.contact-modal-scroll {
  max-height: calc(100svh - 48px) !important;
  overflow: auto !important;
}

.contact-modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  min-height: 142px !important;
  padding: 34px clamp(34px, 4vw, 64px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .42) !important;
  background: #0b2545 !important;
  backdrop-filter: none !important;
}

.contact-modal-header h2 {
  margin: 0 !important;
  max-width: 1160px !important;
  color: #fff !important;
  font-size: clamp(25px, 2.1vw, 42px) !important;
  line-height: 1.24 !important;
  letter-spacing: -.02em !important;
}

.contact-modal-close {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .52) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font: 300 38px/1 Arial, sans-serif !important;
  cursor: pointer !important;
  transform: none !important;
}

.contact-modal-close:hover,
.contact-modal-close:focus-visible {
  border-color: #55dce5 !important;
  background: rgba(85, 220, 229, .14) !important;
  color: #70eef4 !important;
}

.contact-modal-grid-simple {
  display: block !important;
  padding: 0 !important;
}

.contact-modal-form-wrap {
  padding: clamp(30px, 4vh, 52px) clamp(34px, 4vw, 64px) clamp(28px, 4vh, 48px) !important;
}

.contact-modal .contact-modal-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.contact-modal .contact-modal-fields {
  gap: clamp(20px, 2.5vh, 30px) clamp(24px, 2.4vw, 40px) !important;
}

.contact-modal .field label {
  margin-bottom: 10px !important;
  color: #fff !important;
  font-weight: 650 !important;
}

.contact-modal .field input,
.contact-modal .field select,
.contact-modal .field textarea {
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #263247 !important;
  box-shadow: none !important;
}

.contact-modal .field input:focus,
.contact-modal .field select:focus,
.contact-modal .field textarea:focus {
  border-color: #38d7df !important;
  box-shadow: 0 0 0 4px rgba(56, 215, 223, .2) !important;
  outline: none !important;
}

.contact-modal .field input::placeholder,
.contact-modal .field textarea::placeholder {
  color: #75849b !important;
  opacity: 1 !important;
}

.contact-modal-actions {
  margin-top: clamp(22px, 3vh, 34px) !important;
  justify-content: center !important;
}

.contact-modal-actions .button {
  min-width: 260px !important;
}

.contact-modal-email-row {
  margin: 22px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  color: rgba(255, 255, 255, .64) !important;
  font-size: 16px !important;
}

.contact-modal-email-row a {
  color: #52dce5 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Footer: fixed brand stack plus contact email and normalized social icons. */
.footer {
  overflow: visible !important;
}

.footer-simple-main {
  min-height: 184px !important;
  padding-top: 34px !important;
  padding-bottom: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(36px, 6vw, 96px) !important;
}

.footer-brand-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 15px !important;
}

.footer-brand-stack img {
  width: auto !important;
  height: 54px !important;
  margin: 0 !important;
}

.footer-brand-stack p {
  margin: 0 !important;
  color: rgba(238, 245, 255, .72) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

.footer-brand-stack p span {
  color: rgba(238, 245, 255, .56) !important;
}

.footer-contact-social {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 18px !important;
}

.footer-email {
  display: flex !important;
  align-items: baseline !important;
  gap: 13px !important;
  color: rgba(238, 245, 255, .62) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.footer-email strong {
  color: #f2f7ff !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

.footer-email:hover strong,
.footer-email:focus-visible strong {
  color: #55dce5 !important;
}

.footer-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.footer-social-item {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(206, 220, 239, .28) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: rgba(238, 245, 255, .78) !important;
  cursor: pointer !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease !important;
}

.footer-social-item:hover,
.footer-social-item:focus-visible,
.footer-social-item:focus-within {
  border-color: rgba(85, 220, 229, .78) !important;
  background: rgba(85, 220, 229, .1) !important;
  color: #62e5ed !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

.footer-social-icon {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: var(--footer-icon) center / contain no-repeat !important;
  mask: var(--footer-icon) center / contain no-repeat !important;
}

.footer-social-item.is-xiaohongshu { --footer-icon: url('../assets/footer-social/xiaohongshu.svg'); }
.footer-social-item.is-weixin { --footer-icon: url('../assets/footer-social/weixin.svg'); }
.footer-social-item.is-douyin { --footer-icon: url('../assets/footer-social/douyin.svg'); }
.footer-social-item.is-bilibili { --footer-icon: url('../assets/footer-social/bilibili.svg'); }

.footer-qr-popover {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 14px) !important;
  z-index: 20 !important;
  width: 166px !important;
  padding: 10px 10px 8px !important;
  display: grid !important;
  gap: 7px !important;
  border: 1px solid rgba(85, 220, 229, .42) !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  color: #0c2b52 !important;
  box-shadow: 0 18px 46px rgba(0, 8, 22, .34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(.98) !important;
  transform-origin: bottom right !important;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
}

.footer-qr-popover img {
  width: 144px !important;
  height: 144px !important;
  display: block !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  background: #fff !important;
}

.footer-qr-popover b {
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.footer-social-item:hover .footer-qr-popover,
.footer-social-item:focus-visible .footer-qr-popover,
.footer-social-item:focus-within .footer-qr-popover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.footer-simple-bottom {
  border-top-color: rgba(202, 216, 236, .16) !important;
}

@media (max-width: 720px) {
  .contact-modal {
    width: calc(100% - 24px) !important;
    max-height: calc(100svh - 24px) !important;
    border-radius: 16px !important;
  }

  .contact-modal-scroll {
    max-height: calc(100svh - 24px) !important;
  }

  .contact-modal-header {
    min-height: 104px !important;
    padding: 22px 20px !important;
  }

  .contact-modal-header h2 {
    font-size: 22px !important;
  }

  .contact-modal-close {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 30px !important;
  }

  .contact-modal-form-wrap {
    padding: 24px 20px 30px !important;
  }

  .contact-modal .contact-modal-fields {
    grid-template-columns: 1fr !important;
  }

  .contact-modal-email-row {
    flex-wrap: wrap !important;
  }

  .footer-simple-main {
    min-height: 0 !important;
    padding-top: 34px !important;
    padding-bottom: 32px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
  }

  .footer-contact-social {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .footer-email {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .footer-qr-popover {
    right: auto !important;
    left: 0 !important;
    transform-origin: bottom left !important;
  }
}

/* Manual full-width product module carousel. */
.glove-hardware-screen, .exo-hardware-screen { min-height: calc(100svh - 158px) !important; display: grid !important; align-items: center !important; }
.glove-hardware-screen .pdf-screen-inner, .exo-hardware-screen .pdf-screen-inner { width: min(100% - 40px, 1600px) !important; margin-inline: auto !important; }
.module-carousel-head { display: block !important; margin: 0 0 clamp(24px, 3.5vh, 42px) !important; text-align: center !important; }
.module-carousel-head h2 { max-width: 1220px !important; margin: 0 auto !important; text-align: center !important; }
.product-module-carousel { width: 100% !important; touch-action: pan-y !important; user-select: none !important; }
.module-carousel-viewport { position: relative !important; overflow: hidden !important; border: 1px solid #d9e1ec !important; border-radius: 24px !important; background: #e9eef5 !important; box-shadow: 0 18px 52px rgba(25, 51, 88, .1) !important; }
.module-carousel-track { display: flex !important; transition: transform 480ms cubic-bezier(.2, .72, .2, 1) !important; will-change: transform !important; }
.module-carousel-slide { position: relative !important; flex: 0 0 100% !important; height: clamp(500px, 64vh, 720px) !important; display: grid !important; place-items: center !important; overflow: hidden !important; background: linear-gradient(145deg, #f7f9fc, #e4eaf3) !important; }
.module-carousel-slide > img { width: 100% !important; height: 100% !important; padding: clamp(54px, 7vw, 110px) clamp(74px, 10vw, 160px) !important; object-fit: contain !important; object-position: center !important; transform: scale(.96) !important; }
.module-slide-copy { position: absolute !important; z-index: 2 !important; width: min(440px, calc(100% - 64px)) !important; padding: clamp(22px, 2.4vw, 34px) !important; border: 1px solid rgba(255, 255, 255, .72) !important; border-radius: 18px !important; background: rgba(255, 255, 255, .86) !important; color: #122f5d !important; box-shadow: 0 18px 50px rgba(17, 45, 95, .15) !important; backdrop-filter: blur(18px) !important; }
.overlay-top-left .module-slide-copy { top: clamp(30px, 4vw, 58px) !important; left: clamp(30px, 4vw, 58px) !important; }
.overlay-bottom-left .module-slide-copy { bottom: clamp(30px, 4vw, 58px) !important; left: clamp(30px, 4vw, 58px) !important; }
.overlay-bottom-right .module-slide-copy { right: clamp(30px, 4vw, 58px) !important; bottom: clamp(30px, 4vw, 58px) !important; }
.module-slide-copy h3 { margin: 0 0 16px !important; font-size: clamp(28px, 2.5vw, 42px) !important; line-height: 1.15 !important; }
.module-slide-copy ul { margin: 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; color: #56677e !important; list-style: none !important; }
.module-slide-copy h3, .module-slide-copy li { opacity: 0 !important; transform: translateY(12px) !important; }
.module-carousel-slide.is-active .module-slide-copy h3, .module-carousel-slide.is-active .module-slide-copy li { animation: module-copy-in 420ms ease-out forwards !important; }
.module-carousel-slide.is-active .module-slide-copy li:nth-child(1) { animation-delay: 90ms !important; }
.module-carousel-slide.is-active .module-slide-copy li:nth-child(2) { animation-delay: 160ms !important; }
.module-carousel-slide.is-active .module-slide-copy li:nth-child(3) { animation-delay: 230ms !important; }
.module-carousel-slide.is-active .module-slide-copy li:nth-child(4) { animation-delay: 300ms !important; }
@keyframes module-copy-in { to { opacity: 1; transform: translateY(0); } }
.module-carousel-arrow { position: absolute !important; top: 50% !important; z-index: 4 !important; width: 52px !important; height: 52px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 1px solid rgba(17, 45, 95, .18) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .86) !important; color: #123468 !important; box-shadow: 0 10px 28px rgba(17, 45, 95, .14) !important; font: 300 36px/1 Arial, sans-serif !important; cursor: pointer !important; transform: translateY(-50%) !important; }
.module-carousel-arrow:hover, .module-carousel-arrow:focus-visible { border-color: #28cbd5 !important; color: #0798a8 !important; outline: none !important; }
.module-carousel-arrow.prev { left: 18px !important; } .module-carousel-arrow.next { right: 18px !important; }
.module-carousel-dots { margin-top: 18px !important; display: flex !important; justify-content: center !important; gap: 10px !important; }
.module-carousel-dots button { width: 9px !important; height: 9px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #aeb9c8 !important; cursor: pointer !important; transition: width 240ms ease, background 240ms ease !important; }
.module-carousel-dots button.is-active { width: 30px !important; background: #18cbd5 !important; }

/* Alternating delivery panels. */
.product-delivery-stack { display: grid !important; gap: clamp(32px, 6vh, 72px) !important; }
.delivery-panel { min-height: clamp(500px, 68vh, 680px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; overflow: hidden !important; border: 1px solid #dce4ef !important; border-radius: 24px !important; background: #fff !important; box-shadow: 0 18px 56px rgba(24, 50, 86, .08) !important; }
.delivery-media { min-width: 0 !important; min-height: 460px !important; display: grid !important; place-items: center !important; padding: clamp(42px, 5vw, 80px) !important; overflow: hidden !important; background: #e8eef6 !important; }
.delivery-media img { width: 100% !important; height: 100% !important; max-height: 520px !important; object-fit: contain !important; transition: transform 320ms ease-out !important; }
.delivery-panel:hover .delivery-media img { transform: scale(1.03) !important; }
.delivery-copy { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: clamp(42px, 6vw, 88px) !important; }
.delivery-copy h3 { margin: 0 0 clamp(24px, 3vh, 38px) !important; color: #113165 !important; font-size: clamp(34px, 3.5vw, 56px) !important; line-height: 1.1 !important; }
.delivery-lines, .delivery-group ul { margin: 0 !important; padding: 0 !important; display: grid !important; list-style: none !important; }
.delivery-lines li { padding: 13px 0 !important; display: grid !important; grid-template-columns: 130px minmax(0, 1fr) !important; gap: 20px !important; border-bottom: 1px solid #e2e8f0 !important; color: #5c6b80 !important; }
.delivery-lines strong { color: #17386d !important; }
.delivery-group + .delivery-group { margin-top: 26px !important; }
.delivery-group h4 { margin: 0 0 10px !important; color: #17386d !important; font-size: 17px !important; }
.delivery-group li { padding: 11px 14px !important; border-bottom: 1px solid #e5eaf1 !important; color: #5b6c82 !important; transition: color 200ms ease, background 200ms ease !important; }
.delivery-group.optional li:hover { border-radius: 8px !important; background: #e7f6f7 !important; color: #0e5771 !important; }
.motion-panel .delivery-media, .motion-panel .delivery-copy h3, .motion-panel .delivery-copy li, .motion-panel .delivery-copy h4 { opacity: 0 !important; }
.motion-panel.image-left .delivery-media { transform: translateX(54px) !important; } .motion-panel.image-right .delivery-media { transform: translateX(-54px) !important; }
.motion-panel .delivery-copy h3, .motion-panel .delivery-copy h4, .motion-panel .delivery-copy li { transform: translateY(14px) !important; }
.motion-panel.is-inview .delivery-media, .motion-panel.is-inview .delivery-copy h3, .motion-panel.is-inview .delivery-copy h4, .motion-panel.is-inview .delivery-copy li { animation: delivery-in 500ms ease-out forwards !important; }
.motion-panel.is-inview .delivery-copy h3 { animation-delay: 100ms !important; } .motion-panel.is-inview .delivery-copy h4 { animation-delay: 160ms !important; }
.motion-panel.is-inview .delivery-copy li:nth-child(1) { animation-delay: 220ms !important; } .motion-panel.is-inview .delivery-copy li:nth-child(2) { animation-delay: 290ms !important; } .motion-panel.is-inview .delivery-copy li:nth-child(3) { animation-delay: 360ms !important; } .motion-panel.is-inview .delivery-copy li:nth-child(4) { animation-delay: 430ms !important; } .motion-panel.is-inview .delivery-copy li:nth-child(5) { animation-delay: 500ms !important; } .motion-panel.is-inview .delivery-copy li:nth-child(6) { animation-delay: 570ms !important; }
@keyframes delivery-in { to { opacity: 1; transform: translate(0, 0); } }

/* Mission, vision and values: centered single viewport. */
.about-foundation { min-height: 100svh !important; display: grid !important; place-items: center !important; overflow: hidden !important; background: #f4f7fb !important; }
.about-foundation .story-container { width: min(calc(100% - 48px), 1440px) !important; margin-inline: auto !important; }
.about-foundation h2 { margin: 0 0 clamp(42px, 7vh, 76px) !important; text-align: center !important; opacity: 0 !important; transform: translateY(12px) !important; }
.about-foundation-grid, .about-foundation-grid.replay-reveal { width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 2.4vw, 34px) !important; overflow: visible !important; scroll-snap-type: none !important; }
.about-foundation-grid article, .about-foundation-grid article:first-child, .about-foundation-grid article:nth-child(2), .about-foundation-grid article:nth-child(n+3) { min-width: 0 !important; min-height: clamp(310px, 42vh, 420px) !important; padding: clamp(34px, 4vw, 56px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; border: 1px solid #dce4ef !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 16px 46px rgba(25, 52, 88, .08) !important; text-align: left !important; opacity: 0 !important; transform: translateY(28px) !important; transition: transform 350ms ease-out, box-shadow 350ms ease-out !important; }
.about-foundation.is-inview h2, .about-foundation.is-inview .about-foundation-grid article { animation: foundation-in 350ms ease-out forwards !important; }
.about-foundation.is-inview .about-foundation-grid article:nth-child(1) { animation-delay: 120ms !important; } .about-foundation.is-inview .about-foundation-grid article:nth-child(2) { animation-delay: 240ms !important; } .about-foundation.is-inview .about-foundation-grid article:nth-child(3) { animation-delay: 360ms !important; }
@keyframes foundation-in { to { opacity: 1; transform: translateY(0); } }
.about-foundation-grid article:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 64px rgba(25, 52, 88, .15) !important; }
.about-foundation-grid h3 { margin: 0 0 26px !important; color: #113165 !important; font-size: clamp(28px, 2.8vw, 42px) !important; text-align: left !important; }
.about-foundation-grid p { margin: 0 !important; color: #596b82 !important; font-size: clamp(17px, 1.4vw, 21px) !important; line-height: 1.8 !important; text-align: left !important; }
.value-tags { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.value-tags span { padding: 11px 18px !important; border: 1px solid #d6e4ed !important; border-radius: 999px !important; background: #edf6f7 !important; color: #12536e !important; font-weight: 700 !important; transition: background 220ms ease, color 220ms ease, transform 220ms ease !important; }
.value-tags span:hover { background: #d7eef0 !important; color: #0b4058 !important; transform: translateY(-2px) !important; }

/* Render the supplied SVG icons directly, preserving their original shapes. */
.footer-social-icon { width: 23px !important; height: 23px !important; display: block !important; object-fit: contain !important; background: none !important; -webkit-mask: none !important; mask: none !important; filter: grayscale(1) brightness(0) invert(1) !important; opacity: .78 !important; }
.footer-social-item:hover .footer-social-icon, .footer-social-item:focus-visible .footer-social-icon { opacity: 1 !important; filter: brightness(0) saturate(100%) invert(91%) sepia(28%) saturate(1615%) hue-rotate(132deg) brightness(96%) contrast(91%) !important; }

@media (max-width: 900px) {
  .module-carousel-slide { height: clamp(540px, 72svh, 680px) !important; }
  .module-carousel-slide > img { padding: 70px 48px 180px !important; }
  .module-slide-copy { width: calc(100% - 48px) !important; right: 24px !important; bottom: 24px !important; left: 24px !important; top: auto !important; }
  .module-carousel-arrow { width: 44px !important; height: 44px !important; }
  .delivery-panel { grid-template-columns: 1fr !important; }
  .delivery-panel.image-right .delivery-copy { grid-row: 2 !important; } .delivery-panel.image-right .delivery-media { grid-row: 1 !important; }
  .delivery-media { min-height: 380px !important; }
  .about-foundation { min-height: auto !important; padding-block: 100px !important; }
  .about-foundation-grid, .about-foundation-grid.replay-reveal { grid-template-columns: 1fr !important; }
  .about-foundation-grid article, .about-foundation-grid article:first-child, .about-foundation-grid article:nth-child(2), .about-foundation-grid article:nth-child(n+3) { min-height: 260px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .module-carousel-track, .delivery-media img, .about-foundation-grid article, .value-tags span { transition: none !important; }
  .module-slide-copy h3, .module-slide-copy li, .motion-panel .delivery-media, .motion-panel .delivery-copy h3, .motion-panel .delivery-copy h4, .motion-panel .delivery-copy li, .about-foundation h2, .about-foundation-grid article { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* source: qnbot-polish.css */
/* Qnbot 2026-08-07 visual and interaction refinement layer */
:root {
  --qn-brand: #112D5F;
  --qn-cyan: #00D4D4;
  --qn-ink: #07101f;
  --qn-page: #f3f6fa;
  --qn-card: #fff;
  --qn-radius: 24px;
  --qn-title: clamp(38px, 4.15vw, 68px);
  --qn-subtitle: clamp(28px, 3vw, 48px);
  --qn-body: clamp(16px, 1.18vw, 19px);
  --qn-note: 14px;
}

html { scroll-behavior: smooth; }
body { background: var(--qn-page); color: #26354a; }

/* 01 — header, selected state and home/video continuity */
html body[class] .site-header,
html body[class] .site-header.is-scrolled { background: #000 !important; border-bottom-color: rgba(255,255,255,.09) !important; }
html body[class] .site-header .brand img,
html body[class] .site-header.is-scrolled .brand img { filter: brightness(0) invert(1) !important; }
html body[class] .site-header .main-nav a,
html body[class] .site-header.is-scrolled .main-nav a { color: rgba(255,255,255,.66) !important; }
html body[class] .site-header .main-nav a:hover,
html body[class] .site-header .main-nav a:focus-visible { color: #fff !important; }
html body[class] .site-header .main-nav a.active,
html body[class] .site-header.is-scrolled .main-nav a.active {
  padding-inline: 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--qn-brand) !important;
}
html body.home-page .site-header:not(.is-scrolled) .main-nav a.active,
html body.about-page .site-header:not(.is-scrolled) .main-nav a.active { color: var(--qn-brand) !important; }
html body[class] .site-header .main-nav a.active::after,
html body[class] .site-header.is-scrolled .main-nav a.active::after { display: none !important; }
html body[class] .header-consult-button,
html body[class] .site-header.is-scrolled .header-consult-button {
  min-height: 46px !important;
  padding-inline: 25px !important;
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
html body[class] .header-consult-button:hover,
html body[class] .header-consult-button:focus-visible { border-color: var(--qn-cyan) !important; background: rgba(0,212,212,.12) !important; }
.home-video-hero,
.home-video-stage { background: #000 !important; }
.home-video-stage video { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* 02 — one global type hierarchy */
main h1,
.service-heading h2,
.pdf-feature-title,
.pdf-screen-head h2,
.about-section h2,
.home-intro-section h1,
.section-head h2 { font-size: var(--qn-title) !important; line-height: 1.08 !important; letter-spacing: -.045em !important; }
main h2:not(.pdf-feature-title):not(.service-heading h2):not(.pdf-screen-head h2) { line-height: 1.12; }
main h3 { font-size: clamp(22px, 1.9vw, 31px); line-height: 1.22; }
main p,
main li,
.footer { font-size: var(--qn-body); }
.eyebrow,
main small,
.pdf-product-tags,
.service-card-copy li { font-size: var(--qn-note) !important; }

/* 03–06 — product overview, shared surface and horizontal vertical-cards */
.subnav,
.service-overview-main,
.service-screen,
.service-hero,
.service-category { background: var(--qn-page) !important; }
.service-hero { min-height: clamp(620px, 78svh, 820px) !important; }
.service-hero-copy h1 { color: var(--qn-brand) !important; }
.service-heading { margin-bottom: clamp(34px, 5vw, 64px) !important; }
.service-heading p { display: none !important; }
.service-card-grid { align-items: stretch !important; gap: clamp(22px, 3vw, 42px) !important; }
.service-card {
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(320px, 43vw) auto !important;
  min-height: 0 !important;
  border-radius: var(--qn-radius) !important;
  background: var(--qn-card) !important;
  box-shadow: 0 18px 54px rgba(17,45,95,.09) !important;
}
.service-card-media { min-height: 0 !important; padding: clamp(28px, 4vw, 60px) !important; background: #e8edf5 !important; }
.service-card-media img { width: 100% !important; height: 100% !important; max-height: 450px !important; object-fit: contain !important; }
.service-card-copy { align-self: auto !important; padding: clamp(28px, 3.4vw, 48px) !important; }
.service-card-copy h3 { font-size: clamp(28px, 2.6vw, 42px) !important; }
.service-final { display: none !important; }

/* 07 — visually aligned footer with two balanced columns */
.footer-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 18px clamp(48px, 8vw, 150px) !important;
}
.footer-brand { grid-column: 1; grid-row: 1 / 3; align-self: stretch; display: flex !important; flex-direction: column; justify-content: center; }
.footer-brand img { margin-left: -8px !important; }
.footer-brand p { margin-left: 0 !important; }
.footer-nav { display: none !important; }
.footer-contact { grid-column: 2; grid-row: 1; }
.footer-contact h3 { margin: 0 0 14px !important; color: #fff !important; }
.footer-contact > a { display: inline-block; color: #fff !important; font-size: 18px !important; font-weight: 700; }
.footer-contact p { display: none !important; }
.footer-social { grid-column: 2; grid-row: 2; }
.footer-social > h3,
.footer-social > p { display: none !important; }
.social-links { justify-content: flex-start !important; }
.footer-simple-main { min-height: 230px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important; align-items: center !important; gap: clamp(56px, 10vw, 160px) !important; }
.footer-brand-stack { height: 138px; justify-content: center !important; align-items: flex-start !important; }
.footer-brand-stack img { margin-left: -8px !important; }
.footer-brand-stack p { margin-left: 0 !important; }
.footer-contact-social { min-height: 138px; display: grid !important; grid-template-rows: auto 1fr !important; align-content: center !important; gap: 18px !important; }
.footer-email { display: grid !important; justify-items: start !important; gap: 7px !important; }
.footer-email span { color: rgba(255,255,255,.62) !important; font-size: 15px !important; }
.footer-email strong { color: #fff !important; font-size: 19px !important; }
.footer-social-icons { justify-content: flex-start !important; }

/* 08 — immersive product openings */
.pdf-product-page .pdf-product-flow > .pdf-screen:first-child { position: relative; min-height: min(850px, calc(100svh - 136px)) !important; background: #06101f !important; overflow: hidden; }
.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-screen-inner { width: 100% !important; max-width: none !important; min-height: inherit; padding: 0 !important; }
.pdf-product-page .pdf-hero-grid { position: relative !important; display: block !important; min-height: inherit !important; }
.pdf-product-page .pdf-hero-visual { position: absolute !important; inset: 0 !important; overflow: hidden; border: 0 !important; border-radius: 0 !important; background: #07101d !important; }
.pdf-product-page .pdf-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,8,16,.82) 0%, rgba(2,8,16,.46) 42%, rgba(2,8,16,.12) 72%), linear-gradient(0deg, rgba(2,8,16,.65), transparent 45%); }
.pdf-product-page .pdf-hero-visual img { width: 100% !important; height: 100% !important; padding: clamp(30px, 5vw, 84px) clamp(20px, 7vw, 120px) !important; object-fit: contain !important; object-position: 72% center !important; transform: none !important; filter: drop-shadow(0 28px 42px rgba(0,0,0,.48)); }
.pdf-product-page .pdf-hero-copy { position: absolute !important; z-index: 2; left: max(var(--gutter), calc((100% - 1440px)/2)); bottom: clamp(54px, 8vh, 100px); width: min(660px, calc(100% - (var(--gutter) * 2))); color: #fff !important; }
.pdf-product-page .pdf-hero-copy h1,
.pdf-product-page .pdf-hero-copy .product-name,
.pdf-product-page .pdf-hero-copy .product-cn,
.pdf-product-page .pdf-hero-copy .lead { color: #fff !important; }
.pdf-product-page .pdf-hero-copy .product-name,
.pdf-product-page .pdf-hero-copy .product-cn { display: block !important; }
.pdf-product-page .pdf-hero-copy .product-cn { margin-top: 8px !important; font-size: clamp(30px, 3.1vw, 50px) !important; }
.pdf-product-page .pdf-hero-copy .copy { color: rgba(255,255,255,.72) !important; }
.pdf-product-page .pdf-product-tags span { border-color: rgba(255,255,255,.25) !important; background: rgba(255,255,255,.09) !important; color: #fff !important; backdrop-filter: blur(12px); }
.pdf-product-page .pdf-hero-copy .button.secondary { border-color: rgba(255,255,255,.45) !important; color: #fff !important; }

/* 09 / 15 — deliberate, fixed-stage feature interaction */
.product-feature-screen .pdf-screen-inner { padding-top: clamp(72px, 9vw, 140px) !important; }
.pdf-feature-title { margin-bottom: clamp(70px, 7vw, 112px) !important; }
.pdf-feature-grid { align-items: stretch !important; }
.pdf-gallery { height: 620px !important; min-height: 620px !important; grid-template-rows: minmax(0, 1fr) 104px !important; }
.pdf-gallery-main { min-height: 0 !important; height: 100% !important; }
.pdf-gallery-main img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.pdf-feature-list { height: 100%; display: grid !important; grid-template-rows: repeat(4, minmax(72px, auto)); align-content: center; }
.pdf-feature-list li { min-height: 76px; }
.pdf-feature-list li button { height: 100%; }
.pdf-feature-list li:not(.is-active) span { display: none !important; }
.pdf-feature-list li.is-active { min-height: 150px; }
.pdf-feature-list li.is-active span { display: block !important; animation: qn-copy-in .36s ease both; }

/* 10 / 16 — full-image module slides, copy overlaid at bottom-right */
.module-carousel-viewport { border: 0 !important; border-radius: var(--qn-radius) !important; background: #07101f !important; }
.module-carousel-slide { height: clamp(560px, 72svh, 820px) !important; place-items: stretch !important; background: #07101f !important; }
.module-carousel-slide > img { width: 100% !important; height: 100% !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; background: #e8edf5 !important; }
.module-slide-copy {
  inset: auto clamp(28px, 5vw, 72px) clamp(28px, 5vw, 66px) auto !important;
  width: min(520px, calc(100% - 56px)) !important;
  max-width: none !important;
  padding: clamp(22px, 3vw, 36px) !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(4,13,28,.88), rgba(17,45,95,.78)) !important;
  color: #fff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(18px) !important;
}
.module-slide-copy h3,
.module-slide-copy li { color: #fff !important; }

/* 11 / 17 — mathematically and optically centered arrows */
.module-carousel-arrow { display: flex !important; align-items: center !important; justify-content: center !important; text-indent: 0 !important; line-height: 1 !important; padding: 0 0 4px !important; }

/* 12 / 13 / 18 — consistent specification rows */
.static-spec-details { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 clamp(34px, 5vw, 80px) !important; }
.static-spec-details dl { margin: 0 !important; }
.static-spec-details dl > div { min-height: 68px; display: grid !important; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr) !important; align-items: center; gap: 18px; border-top: 1px solid #d8e0ea; }
.static-spec-details dt,
.static-spec-details dd { font-size: 16px !important; line-height: 1.55 !important; }
.static-spec-details dd { margin: 0 !important; font-weight: 700; text-align: right; color: var(--qn-brand); }
.exo-page .static-spec-details { grid-template-columns: 1fr !important; }

/* 14 / 19 — vertically sequenced 60/40 delivery stories */
.product-delivery-stack { display: grid !important; grid-template-columns: 1fr !important; gap: clamp(30px, 5vw, 70px) !important; }
.delivery-panel { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr) !important; min-height: 520px !important; border-radius: var(--qn-radius) !important; overflow: hidden; background: #fff !important; box-shadow: 0 18px 50px rgba(17,45,95,.09) !important; }
.delivery-panel.image-right { grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr) !important; }
.delivery-media { min-height: 100% !important; background: #e8edf5 !important; }
.delivery-media img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; padding: clamp(28px, 4vw, 64px); }
.delivery-copy { align-self: center; padding: clamp(30px, 4vw, 64px) !important; }
.delivery-panel.is-inview .delivery-media img { animation: qn-image-in .7s cubic-bezier(.2,.75,.2,1) both; }
.delivery-panel.is-inview .delivery-copy { animation: qn-copy-in .62s .12s ease both; }

/* 20 / 21 — contact modal state and centered card content */
.contact-modal-grid-simple { display: grid !important; place-items: center !important; }
.contact-modal-form-wrap { width: min(100%, 1540px) !important; margin-inline: auto !important; }
.contact-modal-actions { display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; }
.contact-modal-email-row { justify-content: center !important; text-align: center !important; }
.contact-modal-email-row a { color: var(--qn-brand) !important; }
.contact-modal-email-row a:hover,
.contact-modal-email-row a:focus-visible { color: var(--qn-cyan) !important; }

/* 22 — centered values composition and staged reveal */
.about-foundation .story-container > h2 { text-align: center !important; }
.about-foundation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; }
.about-foundation-grid article { min-height: 330px !important; height: 100%; border-radius: var(--qn-radius) !important; padding: clamp(30px, 4vw, 54px) !important; box-shadow: 0 18px 54px rgba(17,45,95,.1) !important; }
.about-foundation.is-inview > .story-container > h2 { animation: qn-fade-in .55s ease both !important; }
.about-foundation.is-inview .about-foundation-grid article { animation: qn-rise-in .65s ease both !important; }
.about-foundation.is-inview .about-foundation-grid article:nth-child(2) { animation-delay: .14s !important; }
.about-foundation.is-inview .about-foundation-grid article:nth-child(3) { animation-delay: .28s !important; }
.about-foundation.is-inview .about-foundation-grid h3 { animation: qn-fade-in .4s .32s ease both; }
.about-foundation.is-inview .about-foundation-grid p,
.about-foundation.is-inview .value-tags { animation: qn-fade-in .5s .48s ease both; }
.about-foundation.motion-complete h2,
.about-foundation.motion-complete .about-foundation-grid article,
.about-foundation.motion-complete .about-foundation-grid h3,
.about-foundation.motion-complete .about-foundation-grid p,
.about-foundation.motion-complete .value-tags { animation: none !important; opacity: 1 !important; transform: none !important; }
.delivery-panel.motion-complete .delivery-media,
.delivery-panel.motion-complete .delivery-media img,
.delivery-panel.motion-complete .delivery-copy,
.delivery-panel.motion-complete .delivery-copy h3,
.delivery-panel.motion-complete .delivery-copy h4,
.delivery-panel.motion-complete .delivery-copy li { animation: none !important; opacity: 1 !important; transform: none !important; }

@keyframes qn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qn-rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qn-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qn-image-in { from { opacity: .5; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 900px) {
  html body[class][class] .site-header { background: #000 !important; }
  html body[class][class] .site-header .brand img { filter: brightness(0) invert(1) !important; }
  html body[class][class] .site-header .menu-toggle { border-color: rgba(255,255,255,.42) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
  html body[class][class] .site-header .menu-lines,
  html body[class][class] .site-header .menu-lines::before,
  html body[class][class] .site-header .menu-lines::after { background: #fff !important; }
  .service-card-grid,
  .about-foundation-grid { grid-template-columns: 1fr !important; }
  .service-card { grid-template-rows: 330px auto !important; }
  .footer-main { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .footer-brand,
  .footer-contact,
  .footer-social { grid-column: 1 !important; grid-row: auto !important; }
  .footer-brand { min-height: 150px; }
  .footer-simple-main { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pdf-product-page .pdf-hero-copy { bottom: 38px; }
  .pdf-product-page .pdf-hero-visual img { object-position: center 22%; opacity: .74; }
  .pdf-feature-grid { grid-template-columns: 1fr !important; }
  .pdf-gallery { height: 520px !important; min-height: 520px !important; }
  .delivery-panel,
  .delivery-panel.image-right { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .delivery-panel.image-right .delivery-copy { order: 2; }
  .delivery-panel.image-right .delivery-media { order: 1; }
  .delivery-media { min-height: 360px !important; }
  .static-spec-details { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  :root { --qn-title: clamp(34px, 10vw, 46px); }
  .pdf-product-page .pdf-product-flow > .pdf-screen:first-child { min-height: calc(100svh - 116px) !important; }
  .pdf-product-page .pdf-hero-copy { left: 20px; width: calc(100% - 40px); }
  .pdf-product-page .pdf-hero-copy .copy { display: none; }
  .module-carousel-slide { height: 72svh !important; }
  .module-slide-copy { right: 18px !important; bottom: 18px !important; width: calc(100% - 36px) !important; }
  .module-slide-copy li { font-size: 13px !important; }
  .static-spec-details dl > div { grid-template-columns: 1fr !important; gap: 5px; padding: 12px 0; }
  .static-spec-details dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


/* source: final-overrides.css */
/* Qnbot final UI specification — 2026-08-07 */
:root { --qn-transition: 260ms ease; }

/* Unified header states. Active shape is always an underline, never a pill. */
html body .site-header,
html body .site-header.is-scrolled {
  background: rgba(4, 10, 20, .96) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
  transition: background-color var(--qn-transition), border-color var(--qn-transition), box-shadow var(--qn-transition), color var(--qn-transition) !important;
}

/* Follow-up 34: consolidated about layout, shared section rhythm and requested backgrounds */
:root {
  --qn-section-title-gap: clamp(52px, 6svh, 76px);
  --qn-section-title-top: clamp(96px, 10svh, 128px);
}

html body.about-page .about-company-combined {
  min-height: calc(100svh - var(--qn-header-height, 96px)) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(76px, 8svh, 104px) 0 !important;
  background: var(--qn-light-page, #f4f7fb) !important;
}

html body.about-page .about-company-combined > .story-container {
  width: min(calc(100% - clamp(48px, 8vw, 144px)), 1500px) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: clamp(58px, 7svh, 88px) !important;
  text-align: center !important;
}

html body.about-page .about-company-copy h2 {
  margin: 0 0 clamp(34px, 4.4svh, 52px) !important;
}

html body.about-page .about-company-copy .about-body {
  max-width: 1200px !important;
  margin: 0 auto !important;
  line-height: 2 !important;
}

html body.about-page .about-combined-slogan {
  padding-top: clamp(34px, 4svh, 50px) !important;
  border-top: 1px solid rgba(19, 52, 99, 0.12) !important;
}

html body.about-page .about-combined-slogan h2 {
  margin: 0 0 16px !important;
  color: var(--brand-deep, #12366a) !important;
  font-size: clamp(34px, 3.5vw, 58px) !important;
  line-height: 1.25 !important;
}

html body.about-page .about-combined-slogan p {
  margin: 0 !important;
  color: var(--text-muted, #66758b) !important;
  font-size: clamp(17px, 1.5vw, 24px) !important;
  letter-spacing: 0.02em !important;
}

html body.about-page .about-foundation-tabs {
  min-height: calc(100svh - var(--qn-header-height, 96px)) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(82px, 9svh, 118px) 0 !important;
  background: var(--qn-light-page, #f4f7fb) !important;
}

html body.about-page .about-foundation-tabs > .story-container {
  width: min(calc(100% - clamp(48px, 8vw, 144px)), 1500px) !important;
  margin: 0 auto !important;
}

html body.about-page .about-tabs-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
  gap: clamp(54px, 7vw, 120px) !important;
  align-items: stretch !important;
}

html body.about-page .about-tab-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 1px solid rgba(19, 52, 99, 0.16) !important;
  padding-right: clamp(28px, 3vw, 48px) !important;
}

html body.about-page .about-tab {
  width: 100% !important;
  min-height: 88px !important;
  padding: 16px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(19, 52, 99, 0.12) !important;
  background: transparent !important;
  color: #607086 !important;
  font: inherit !important;
  font-size: clamp(28px, 2.3vw, 42px) !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color 220ms ease, padding-left 220ms ease !important;
}

html body.about-page .about-tab:hover,
html body.about-page .about-tab:focus-visible {
  color: var(--brand-deep, #12366a) !important;
  padding-left: 18px !important;
  outline: none !important;
}

html body.about-page .about-tab.is-active {
  color: var(--brand-cyan, #00cfd2) !important;
  font-weight: 800 !important;
}

html body.about-page .about-tab-panels {
  min-height: 340px !important;
  display: grid !important;
  align-items: center !important;
  padding: clamp(36px, 5vw, 76px) !important;
}

html body.about-page .about-tab-panel {
  animation: qnAboutPanelIn 260ms ease both !important;
}

html body.about-page .about-tab-panel[hidden] {
  display: none !important;
}

html body.about-page .about-tab-panel p {
  max-width: 900px !important;
  margin: 0 !important;
  color: var(--brand-deep, #12366a) !important;
  font-size: clamp(28px, 3vw, 50px) !important;
  font-weight: 650 !important;
  line-height: 1.6 !important;
}

html body.about-page .about-tab-panel .value-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

html body.about-page .about-tab-panel .value-keywords span {
  min-width: 112px !important;
  padding: 15px 24px !important;
  border: 1px solid rgba(19, 52, 99, 0.16) !important;
  border-radius: 12px !important;
  color: var(--brand-deep, #12366a) !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 750 !important;
  text-align: center !important;
}

@keyframes qnAboutPanelIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

html body.home-page main > .section:not(.home-intro-section):not(.context-cta) .section-head {
  margin-bottom: var(--qn-section-title-gap) !important;
}

html body.products-page .service-overview-main > section:not(.service-hero) .service-heading {
  margin-bottom: var(--qn-section-title-gap) !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:not(:first-child):not(.pdf-contact-screen) .pdf-screen-inner {
  padding-top: var(--qn-section-title-top) !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:not(:first-child):not(.pdf-contact-screen) .pdf-screen-head,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:not(:first-child):not(.pdf-contact-screen) > .pdf-screen-inner > h2 {
  margin-bottom: var(--qn-section-title-gap) !important;
}

html body.products-page .service-overview-main > .service-hero .service-hero-copy h1 {
  margin-bottom: clamp(38px, 4.8svh, 58px) !important;
  line-height: 1.2 !important;
}

html body.products-page .service-overview-main > .service-hero .service-hero-copy p {
  line-height: 1.9 !important;
}

html body.home-page .home-story-section,
html body.home-page .context-cta {
  background: var(--qn-light-page, #f4f7fb) !important;
}

html body.pdf-product-page #exo-pdf-specs .pdf-spec-group > h3 {
  margin: 0 0 22px !important;
  color: var(--brand-deep, #12366a) !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

@media (max-width: 800px) {
  html body.about-page .about-tabs-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  html body.about-page .about-tab-list {
    flex-direction: row !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(19, 52, 99, 0.16) !important;
    padding-right: 0 !important;
  }

  html body.about-page .about-tab {
    min-height: 64px !important;
    text-align: center !important;
    font-size: 24px !important;
  }

  html body.about-page .about-tab:hover,
  html body.about-page .about-tab:focus-visible {
    padding-left: 10px !important;
  }

  html body.about-page .about-tab-panels {
    min-height: 250px !important;
    padding: 28px 10px !important;
  }
}

html body .site-header .brand img { filter: brightness(0) invert(1) !important; transition: filter var(--qn-transition) !important; }
html body .site-header .main-nav a {
  position: relative;
  padding: 10px 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.68) !important;
  transition: color var(--qn-transition), background-color var(--qn-transition) !important;
}
html body .site-header .main-nav a:hover,
html body .site-header .main-nav a:focus-visible { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html body .site-header .main-nav a.active {
  background: transparent !important;
  color: var(--qn-cyan) !important;
}
html body .site-header .main-nav a.active::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  transform: none !important;
}
html body .site-header.qn-header-light,
html body .site-header.qn-header-light.is-scrolled {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: #dce3ec !important;
  box-shadow: 0 8px 26px rgba(17,45,95,.08) !important;
}
html body .site-header.qn-header-light .brand img { filter: none !important; }
html body .site-header.qn-header-light .main-nav a { color: #536176 !important; }
html body .site-header.qn-header-light .main-nav a:hover,
html body .site-header.qn-header-light .main-nav a:focus-visible { background: #f0f3f7 !important; color: var(--qn-brand) !important; }
html body .site-header.qn-header-light .main-nav a.active { background: transparent !important; color: var(--qn-brand) !important; }
html body .site-header.qn-header-light .header-consult-button { border-color: var(--qn-brand) !important; background: var(--qn-brand) !important; color: #fff !important; }

.subnav a { border-radius: 8px; transition: background-color var(--qn-transition), color var(--qn-transition); }
.subnav a:hover,
.subnav a:focus-visible { background: #edf2f7; color: var(--qn-brand); }
.subnav a.active { background: #e6ecf4 !important; color: var(--qn-brand) !important; box-shadow: none !important; }
.subnav a.active::after { display: none !important; }

/* Compact, optically balanced footer. */
.footer-simple-main {
  width: min(100% - (var(--gutter) * 2), var(--container)) !important;
  min-height: 166px !important;
  padding-block: 24px !important;
  grid-template-columns: minmax(0,1fr) minmax(300px,420px) !important;
  align-items: center !important;
  gap: clamp(48px,8vw,140px) !important;
}
.footer-brand-stack,
.footer-contact-social { min-height: 112px !important; height: 112px !important; }
.footer-contact-social { gap: 10px !important; }
.footer-email { gap: 3px !important; }
.footer-social-icons { gap: 10px !important; }
.footer-simple-bottom .container { min-height: 50px !important; }

/* Product overview: centered headings and one viewport per category. */
.service-hero-copy { text-align: center; }
.service-hero-copy h1 { max-width: 960px; margin-inline: auto !important; }
.service-hero-copy p { margin-inline: auto; }
.service-anchor-actions { justify-content: center; }
.service-heading { text-align: center !important; }
.service-heading h2 { margin-inline: auto !important; }
@media (min-width: 1024px) {
  .service-category {
    min-height: calc(100svh - 128px) !important;
    padding-block: clamp(24px,3vh,38px) !important;
  }
  .service-category > .container { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; }
  .service-heading { margin-bottom: clamp(18px,2.2vh,28px) !important; }
  .service-heading h2 { font-size: clamp(38px,4.2vh,50px) !important; }
  .service-card-grid { min-height: 0; height: 100%; gap: clamp(18px,2.2vw,30px) !important; }
  .service-card { grid-template-rows: minmax(190px,1fr) auto !important; height: 100%; }
  .service-card-media { padding: clamp(16px,2.4vh,28px) !important; }
  .service-card-media img { max-height: 36vh !important; }
  .service-card-copy { padding: clamp(18px,2.3vh,28px) clamp(22px,2.5vw,34px) !important; }
  .service-card-copy h3 { font-size: clamp(26px,3vh,34px) !important; }
  .service-card-copy p { margin: 10px 0 12px !important; font-size: 15px !important; }
  .service-card-copy ul { margin: 0 0 14px !important; gap: 7px !important; }
  .service-card-copy li { padding: 6px 10px !important; }
  .service-card-copy .button { min-height: 44px !important; padding-inline: 18px !important; }
}

/* Product detail opening: no dead bands, two equal-height columns. */
.pdf-product-page .pdf-product-flow > .pdf-screen:first-child {
  min-height: calc(100svh - 128px) !important;
  background: #06101f !important;
}
.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-screen-inner { min-height: calc(100svh - 128px) !important; }
.pdf-product-page .pdf-hero-grid {
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  align-items: stretch !important;
}
.pdf-product-page .pdf-hero-copy {
  position: static !important;
  width: auto !important;
  padding: clamp(38px,6vw,96px) clamp(28px,5vw,80px) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  order: 1;
}
.pdf-product-page .pdf-hero-visual {
  position: static !important;
  inset: auto !important;
  min-width: 0;
  display: grid !important;
  place-items: center !important;
  order: 2;
  background: #06101f !important;
}
.pdf-product-page .pdf-hero-visual::after { display: none !important; }
.pdf-product-page .pdf-hero-visual img {
  width: min(82%,620px) !important;
  height: min(76vh,680px) !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}
.pdf-product-page .pdf-hero-copy .button.secondary {
  min-height: 46px !important;
  padding-inline: 25px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.pdf-product-page .pdf-hero-copy .button.secondary:hover,
.pdf-product-page .pdf-hero-copy .button.secondary:focus-visible { border-color: var(--qn-cyan) !important; background: rgba(0,212,212,.12) !important; }

/* Feature screen: remove nested frames and keep image/copy synchronized. */
.product-feature-screen .pdf-feature-title { text-align: center !important; }
.pdf-feature-grid { grid-template-columns: 55% 45% !important; align-items: stretch !important; }
.pdf-gallery { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pdf-gallery-main { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.pdf-feature-copy { display: flex; align-items: stretch; }
.pdf-feature-list { width: 100%; }
.pdf-feature-list li:not(.is-active) span { display: none !important; }
.pdf-feature-list li.is-active span { display: block !important; }

/* Dark full-screen 55:45 module carousel. */
.glove-hardware-screen,
.exo-hardware-screen { background: #000 !important; color: #fff !important; }
.glove-hardware-screen .pdf-screen-inner,
.exo-hardware-screen .pdf-screen-inner { background: #000 !important; }
.glove-hardware-screen .pdf-screen-head,
.exo-hardware-screen .pdf-screen-head { margin-bottom: 24px !important; text-align: center; }
.glove-hardware-screen .pdf-screen-head h2,
.exo-hardware-screen .pdf-screen-head h2 { color: #fff !important; }
.module-carousel-viewport { border: 0 !important; border-radius: 0 !important; background: #000 !important; }
.module-carousel-slide {
  grid-template-columns: 55% 45% !important;
  align-items: center !important;
  height: min(72svh,760px) !important;
  background: #000 !important;
}
.module-carousel-slide > img {
  grid-column: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: clamp(28px,5vw,76px) !important;
  object-fit: contain !important;
  background: #000 !important;
}
.module-slide-copy {
  position: static !important;
  grid-column: 2 !important;
  width: auto !important;
  margin: 0 clamp(34px,6vw,90px) 0 clamp(18px,3vw,46px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.module-slide-copy h3 { font-size: clamp(34px,4vw,60px) !important; }
.module-slide-copy li { color: rgba(255,255,255,.78) !important; font-size: clamp(15px,1.25vw,19px) !important; }
.module-slide-copy h3,
.module-slide-copy li { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; }
.module-carousel-track { transition: transform 300ms ease !important; }
.module-carousel-dots button { background: rgba(255,255,255,.35) !important; }
.module-carousel-dots button.is-active { background: var(--qn-cyan) !important; }

/* Specifications: centered title, no subtitle, no card shell, consistent rows. */
.pdf-screen-head { text-align: center !important; }
.pdf-screen-head > div { margin-inline: auto !important; }
.pdf-screen-head p { display: none !important; }
.pdf-spec-shell { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pdf-spec-group dl > div,
.static-spec-details dl > div { min-height: 56px !important; padding: 10px 0 !important; border-bottom: 1px solid #d8e0ea !important; border-top: 0 !important; }
.pdf-spec-group dt,
.pdf-spec-group dd,
.static-spec-details dt,
.static-spec-details dd { font-size: 15px !important; line-height: 1.45 !important; }
.static-spec-details { padding-top: 0 !important; border-top: 0 !important; }

/* Delivery stories: no outer card, one compact viewport each, 55:45 split. */
.glove-bundle-screen .pdf-screen-head,
.exo-bundle-screen .pdf-screen-head { text-align: center !important; }
.product-delivery-stack { gap: 0 !important; }
.delivery-panel,
.delivery-panel.image-right {
  min-height: calc(100svh - 128px) !important;
  grid-template-columns: 55% 45% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.delivery-panel.image-right { grid-template-columns: 45% 55% !important; }
.delivery-media { background: transparent !important; }
.delivery-media img { padding: clamp(24px,4vw,58px) !important; max-height: 72vh !important; }
.delivery-copy { padding: clamp(24px,4vw,58px) !important; }
.delivery-lines li,
.delivery-group li { padding-block: 10px !important; border-bottom: 1px solid #d8e0ea !important; }

/* About: white, centered, text-only foundation and precise one-shot reveals. */
.about-company-slogan,
.about-slogan-screen,
.about-foundation { background: #fff !important; }
.about-company-slogan h2,
.about-company-slogan .about-line,
.about-slogan-screen h2,
.about-slogan-screen p,
.about-foundation h2,
.about-foundation-grid article { opacity: 0 !important; transition-property: opacity, transform !important; transition-timing-function: ease !important; }
.about-company-slogan h2 { transition-duration: 350ms !important; }
.about-company-slogan .about-line { transition-duration: 350ms !important; transition-delay: calc(200ms + (var(--line-index) * 120ms)) !important; }
.about-company-slogan.is-inview h2,
.about-company-slogan.is-inview .about-line { opacity: 1 !important; }
.about-slogan-screen h2 { transform: translateY(6px) !important; transition-duration: 400ms !important; }
.about-slogan-screen p { transition-duration: 300ms !important; transition-delay: 220ms !important; }
.about-slogan-screen.is-inview h2,
.about-slogan-screen.is-inview p { opacity: 1 !important; transform: none !important; }
.about-foundation .story-container > h2 { text-align: center !important; }
.about-foundation-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: clamp(32px,5vw,80px) !important; }
html body.about-page .about-foundation .about-foundation-grid article,
html body.about-page .about-foundation .about-foundation-grid article:first-child,
html body.about-page .about-foundation .about-foundation-grid article:nth-child(2),
html body.about-page .about-foundation .about-foundation-grid article:nth-child(n+3) {
  min-height: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  text-align: left !important;
}
.about-foundation-grid article h3,
.about-foundation-grid article p { text-align: left !important; }
.about-foundation-grid article p { margin-inline: 0 !important; }
.about-foundation > .story-container > h2 { transform: none !important; transition-duration: 350ms !important; }
.about-foundation .about-foundation-grid article { transform: none !important; transition-duration: 350ms !important; transition-delay: 200ms !important; }
.about-foundation .about-foundation-grid article:nth-child(2) { transition-delay: 330ms !important; }
.about-foundation .about-foundation-grid article:nth-child(3) { transition-delay: 460ms !important; }
.about-foundation.is-inview > .story-container > h2,
.about-foundation.is-inview .about-foundation-grid article { opacity: 1 !important; animation: none !important; }
.value-tags { justify-content: flex-start !important; }
.about-foundation .value-tags span {
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 900px) {
  .pdf-product-page .pdf-hero-grid,
  .pdf-feature-grid,
  .module-carousel-slide,
  .delivery-panel,
  .delivery-panel.image-right { grid-template-columns: 1fr !important; }
  .pdf-product-page .pdf-hero-copy { order: 2; }
  .pdf-product-page .pdf-hero-visual { order: 1; min-height: 42vh; }
  .module-carousel-slide { grid-template-rows: 52% 48%; }
  .module-carousel-slide > img,
  .module-slide-copy { grid-column: 1 !important; }
  .module-slide-copy { margin: 0 28px 28px !important; }
  .about-foundation-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .about-company-slogan h2,
  .about-company-slogan .about-body,
  .about-slogan-screen h2,
  .about-slogan-screen p,
  .about-foundation h2,
  .about-foundation-grid article { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* 2026-08-09: balanced mission, vision and values cards. */
html body.about-page .about-foundation {
  min-height: calc(100svh - 80px) !important;
  padding-block: clamp(64px,6vw,92px) !important;
  background: #fff !important;
}

html body.about-page .about-foundation > .story-container {
  width: min(100% - 80px,1420px) !important;
}

html body.about-page .about-foundation > .story-container > h2 {
  position: relative !important;
  width: fit-content !important;
  margin: 0 auto clamp(36px,4vw,56px) !important;
  padding-bottom: 0 !important;
  font-size: clamp(42px,4.4vw,70px) !important;
}

html body.about-page .about-foundation > .story-container > h2::after {
  display: none !important;
  content: none !important;
}

html body.about-page .about-foundation .about-foundation-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: clamp(18px,2.2vw,32px) !important;
  margin-top: 0 !important;
}

html body.about-page .about-foundation .about-foundation-grid article,
html body.about-page .about-foundation .about-foundation-grid article:first-child,
html body.about-page .about-foundation .about-foundation-grid article:nth-child(2),
html body.about-page .about-foundation .about-foundation-grid article:nth-child(n+3) {
  box-sizing: border-box !important;
  min-height: clamp(310px,37svh,390px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(30px,3vw,42px) !important;
  border: 1px solid rgba(17,45,95,.11) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(17,45,95,.04) !important;
  text-align: center !important;
  transform: none !important;
  transition:
    opacity 350ms ease,
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

html body.about-page .about-foundation .about-foundation-grid article:nth-child(1) { transition-delay: 200ms !important; }
html body.about-page .about-foundation .about-foundation-grid article:nth-child(2) { transition-delay: 330ms !important; }
html body.about-page .about-foundation .about-foundation-grid article:nth-child(3) { transition-delay: 460ms !important; }

html body.about-page .about-foundation.is-inview .about-foundation-grid article {
  opacity: 1 !important;
}

html body.about-page .about-foundation .about-foundation-grid article:hover {
  border-color: rgba(17,45,95,.22) !important;
  box-shadow: 0 14px 32px rgba(17,45,95,.07) !important;
  transform: translateY(-3px) !important;
}

html body.about-page .foundation-mark {
  display: none !important;
}

html body.about-page .foundation-mark::after {
  width: 34px !important;
  height: 1px !important;
  background: rgba(17,45,95,.24) !important;
  content: "" !important;
}

html body.about-page .about-foundation-grid article h3 {
  margin: 0 0 20px !important;
  color: var(--qn-brand) !important;
  font-size: clamp(30px,2.4vw,40px) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

html body.about-page .about-foundation-grid article p {
  max-width: 470px !important;
  margin: 0 !important;
  color: #5b6c82 !important;
  font-size: clamp(17px,1.25vw,20px) !important;
  line-height: 1.85 !important;
  text-align: center !important;
}

html body.about-page .values-card .value-content {
  width: fit-content !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body.about-page .values-card .value-content h3 {
  width: 100% !important;
  margin-bottom: 18px !important;
  text-align: center !important;
}

html body.about-page .value-keywords {
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}

html body.about-page .value-keywords span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 76px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(17,45,95,.12) !important;
  border-radius: 12px !important;
  background: #f4f7fb !important;
  color: var(--qn-brand) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  html body.about-page .about-foundation > .story-container {
    width: min(100% - 40px,680px) !important;
  }

  html body.about-page .about-foundation .about-foundation-grid {
    grid-template-columns: 1fr !important;
  }

  html body.about-page .about-foundation .about-foundation-grid article,
  html body.about-page .about-foundation .about-foundation-grid article:first-child,
  html body.about-page .about-foundation .about-foundation-grid article:nth-child(2),
  html body.about-page .about-foundation .about-foundation-grid article:nth-child(n+3) {
    min-height: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.about-page .about-foundation .about-foundation-grid article,
  html body.about-page .about-foundation .about-foundation-grid article:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Final specificity guard for legacy per-page header rules. */
html body[class][class] .site-header,
html body[class][class] .site-header.is-scrolled {
  background: rgba(4,10,20,.96) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}
html body[class][class] .site-header .brand img { filter: brightness(0) invert(1) !important; }
html body[class][class] .site-header .main-nav a,
html body[class][class] .site-header.is-scrolled .main-nav a {
  padding: 10px 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.68) !important;
}
html body[class][class] .site-header .main-nav a:hover,
html body[class][class] .site-header .main-nav a:focus-visible { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html body[class][class] .site-header .main-nav a.active,
html body[class][class] .site-header.is-scrolled .main-nav a.active { background: transparent !important; color: var(--qn-cyan) !important; }
html body[class][class] .site-header .main-nav a.active::after,
html body[class][class] .site-header.is-scrolled .main-nav a.active::after { display: block !important; }
html body[class][class] .site-header.qn-header-light,
html body[class][class] .site-header.qn-header-light.is-scrolled { background: rgba(255,255,255,.97) !important; border-bottom-color: #dce3ec !important; }
html body[class][class] .site-header.qn-header-light .brand img { filter: none !important; }
html body[class][class] .site-header.qn-header-light .main-nav a { color: #536176 !important; }
html body[class][class] .site-header.qn-header-light .main-nav a:hover,
html body[class][class] .site-header.qn-header-light .main-nav a:focus-visible { background: #f0f3f7 !important; color: var(--qn-brand) !important; }
html body[class][class] .site-header.qn-header-light .main-nav a.active { background: transparent !important; color: var(--qn-brand) !important; }

/* 2026-08-07 follow-up: pill states, flat subnav, persistent consult CTA. */
html body[class][class] .site-header .main-nav a,
html body[class][class] .site-header.is-scrolled .main-nav a,
html body[class][class] .site-header.qn-header-light .main-nav a {
  min-height: 46px !important;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(218, 225, 234, .72) !important;
  font-weight: 500 !important;
  transform: none !important;
  transition: color var(--qn-transition), background-color var(--qn-transition), border-color var(--qn-transition) !important;
}
html body[class][class] .site-header.qn-header-light .main-nav a {
  color: #687487 !important;
}
html body[class][class] .site-header .main-nav a:hover,
html body[class][class] .site-header .main-nav a:focus-visible {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(218, 225, 234, .72) !important;
}
html body[class][class] .site-header.qn-header-light .main-nav a:hover,
html body[class][class] .site-header.qn-header-light .main-nav a:focus-visible {
  border-color: rgba(17,45,95,.08) !important;
  background: rgba(17,45,95,.065) !important;
  color: #687487 !important;
}
html body[class][class] .site-header .main-nav a.active,
html body[class][class] .site-header.is-scrolled .main-nav a.active {
  border-color: rgba(0,212,212,.18) !important;
  background: rgba(255,255,255,.10) !important;
  color: var(--qn-cyan) !important;
  font-weight: 700 !important;
}
html body[class][class] .site-header.qn-header-light .main-nav a.active {
  border-color: rgba(17,45,95,.10) !important;
  background: rgba(17,45,95,.08) !important;
  color: var(--qn-brand) !important;
}
html body[class][class] .site-header .main-nav a::before,
html body[class][class] .site-header .main-nav a::after,
html body[class][class] .site-header.is-scrolled .main-nav a::before,
html body[class][class] .site-header.is-scrolled .main-nav a::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 761px) {
  html body .site-header .header-actions,
  html body .site-header.is-scrolled .header-actions,
  html body .site-header.qn-header-light .header-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .site-header .header-consult-button,
  html body .site-header.is-scrolled .header-consult-button,
  html body .site-header.qn-header-light .header-consult-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 761px) {
  html body[class][class] .site-header:has(+ .subnav),
  html body[class][class] .site-header:has(+ .subnav).is-scrolled {
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    will-change: auto !important;
    background: rgba(4,10,20,.20) !important;
    backdrop-filter: saturate(125%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(125%) blur(24px) !important;
  }

  html body[class][class] .site-header.qn-header-light:has(+ .subnav),
  html body[class][class] .site-header.qn-header-light:has(+ .subnav).is-scrolled {
    background: rgba(255,255,255,.38) !important;
  }

  html body[class][class] .site-header + .subnav,
  html body[class][class] .site-header + .subnav.is-scrolled,
  html body[class][class] .site-header.qn-header-light + .subnav,
  html body[class][class] .site-header.qn-header-light + .subnav.is-scrolled {
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Home and About: draw the hero beneath a persistent translucent header. */
@media (min-width: 761px) {
  html body[class][class].home-page .site-header,
  html body[class][class].about-page .site-header,
  html body[class][class].home-page .site-header:not(.is-scrolled),
  html body[class][class].about-page .site-header:not(.is-scrolled) {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 100 !important;
    width: 100% !important;
    height: 72px !important;
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    will-change: auto !important;
    background: rgba(4,10,20,.18) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(125%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(125%) blur(24px) !important;
  }

  html body[class][class].home-page .site-header.is-scrolled,
  html body[class][class].about-page .site-header.is-scrolled,
  html body[class][class].home-page .site-header.qn-header-light,
  html body[class][class].about-page .site-header.qn-header-light {
    background: rgba(255,255,255,.42) !important;
    border-bottom-color: rgba(17,45,95,.075) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(120%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(120%) blur(24px) !important;
  }

  html body[class][class].home-page .site-header:not(.qn-header-light) .main-nav a,
  html body[class][class].about-page .site-header:not(.qn-header-light) .main-nav a {
    color: rgba(242,247,252,.84) !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.22) !important;
  }

  html body[class][class].home-page > main,
  html body[class][class].about-page > main {
    margin-top: 0 !important;
  }

  html body[class][class].home-page > main > :first-child,
  html body[class][class].about-page > main > :first-child {
    box-sizing: border-box !important;
    min-height: 100svh !important;
    padding-top: 72px !important;
  }

  html body[class][class].home-page .home-video-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}

/* 2026-08-09 product-detail refinement pass. */
html body[class][class] .site-header,
html body[class][class] .site-header.is-scrolled {
  background: rgba(5, 11, 20, .78) !important;
  border-bottom-color: rgba(255,255,255,.055) !important;
  backdrop-filter: saturate(135%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(135%) blur(22px) !important;
}
html body[class][class] .site-header.qn-header-light,
html body[class][class] .site-header.qn-header-light.is-scrolled {
  background: rgba(255,255,255,.84) !important;
  border-bottom-color: rgba(148,163,184,.12) !important;
  backdrop-filter: saturate(135%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(135%) blur(22px) !important;
}
html body[class][class] .site-header + .subnav {
  background: rgba(5,11,20,.72) !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
}
html body[class][class] .site-header.qn-header-light + .subnav {
  background: rgba(255,255,255,.86) !important;
  border-top-color: rgba(148,163,184,.14) !important;
}

@media (min-width: 901px) {
  html body.pdf-product-page .product-feature-screen {
    min-height: calc(100svh - 124px) !important;
    padding-block: clamp(32px,4vh,52px) !important;
  }
  html body.pdf-product-page .product-feature-screen > .pdf-screen-inner {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    gap: clamp(24px,3vh,36px) !important;
    min-height: calc(100svh - 124px - clamp(64px,8vh,104px)) !important;
  }
  html body.pdf-product-page .pdf-feature-grid {
    grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
    gap: clamp(32px,4vw,64px) !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }
  html body.pdf-product-page .pdf-gallery {
    position: relative !important;
    height: clamp(460px,62vh,640px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-rows: minmax(0,1fr) !important;
    overflow: hidden !important;
  }
  html body.pdf-product-page .pdf-gallery-main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(24px,3vw,46px) !important;
    padding-bottom: 126px !important;
    overflow: hidden !important;
    background: #edf1f6 !important;
  }
  html body.pdf-product-page .pdf-gallery-main img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs {
    position: absolute !important;
    z-index: 3 !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 18px !important;
    height: 90px !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(255,255,255,.64) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 12px 30px rgba(17,45,95,.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs button {
    position: relative !important;
    height: 70px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: transform 180ms ease, background-color 180ms ease !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs button:hover,
  html body.pdf-product-page .pdf-gallery-thumbs button:focus-visible {
    background: rgba(17,45,95,.055) !important;
    transform: scale(1.035) !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs button::after {
    content: "" !important;
    position: absolute !important;
    left: 32% !important;
    right: 32% !important;
    bottom: -5px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--qn-brand) !important;
    opacity: 0 !important;
    transform: scaleX(.35) !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs button.is-active::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
  html body.pdf-product-page .pdf-gallery-thumbs img {
    width: 100% !important;
    height: 58px !important;
    padding: 3px !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
  }
  html body.pdf-product-page .pdf-feature-copy {
    height: clamp(460px,62vh,640px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(17,45,95,.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.74) !important;
  }
  html body.pdf-product-page .pdf-feature-list {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  html body.pdf-product-page .pdf-feature-list > li {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    counter-increment: none !important;
  }
  html body.pdf-product-page .pdf-feature-list > li::before { display: none !important; }
  html body.pdf-product-page .pdf-feature-list > li.is-active { display: flex !important; }
  html body.pdf-product-page .pdf-feature-list > li > button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: clamp(38px,5vw,76px) !important;
    cursor: default !important;
  }
  html body.pdf-product-page .pdf-feature-list strong {
    margin: 0 0 20px !important;
    font-size: clamp(28px,2.5vw,42px) !important;
    line-height: 1.18 !important;
  }
  html body.pdf-product-page .pdf-feature-list span {
    display: block !important;
    font-size: clamp(16px,1.2vw,19px) !important;
    line-height: 1.85 !important;
  }
}

html body.pdf-product-page .pdf-gallery-main,
html body.pdf-product-page .pdf-feature-copy {
  opacity: 1;
  transition: opacity 150ms ease !important;
}
html body.pdf-product-page .pdf-gallery-main.is-switching-out,
html body.pdf-product-page .pdf-feature-copy.is-switching-out,
html body.pdf-product-page .pdf-gallery-main.is-switching-in,
html body.pdf-product-page .pdf-feature-copy.is-switching-in { opacity: 0 !important; }

html body.pdf-product-page .glove-hardware-screen,
html body.pdf-product-page .exo-hardware-screen {
  min-height: 100svh !important;
  padding-block: clamp(48px,6vh,72px) !important;
  background: linear-gradient(145deg,#07101e 0%,#0c192c 54%,#101c2d 100%) !important;
}
html body.pdf-product-page .glove-hardware-screen > .pdf-screen-inner,
html body.pdf-product-page .exo-hardware-screen > .pdf-screen-inner {
  min-height: calc(100svh - clamp(96px,12vh,144px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
  background: transparent !important;
}
html body.pdf-product-page .glove-hardware-screen .module-carousel-head,
html body.pdf-product-page .exo-hardware-screen .module-carousel-head {
  margin: 0 0 clamp(28px,4vh,44px) !important;
}
html body.pdf-product-page .product-module-carousel {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0,1fr) auto !important;
  gap: clamp(18px,2.5vh,28px) !important;
}
html body.pdf-product-page .module-carousel-viewport {
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  background: rgba(3,9,18,.34) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body.pdf-product-page .module-carousel-track { height: 100% !important; }
html body.pdf-product-page .module-carousel-slide {
  min-height: 0 !important;
  height: 100% !important;
  padding-block: clamp(28px,4vh,50px) !important;
  background: transparent !important;
}
html body.pdf-product-page .module-carousel-slide > img { background: transparent !important; }
html body.pdf-product-page .module-carousel-arrow {
  width: 48px !important;
  height: 48px !important;
  padding: 0 0 3px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
  font-size: 28px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background-color 180ms ease, border-color 180ms ease !important;
}
html body.pdf-product-page .module-carousel-arrow:hover,
html body.pdf-product-page .module-carousel-arrow:focus-visible {
  border-color: rgba(0,212,212,.36) !important;
  background: rgba(0,212,212,.13) !important;
  color: #fff !important;
}
html body.pdf-product-page .module-carousel-dots {
  margin: 0 !important;
  min-height: 20px !important;
  align-items: center !important;
}

html body.pdf-product-page .pdf-spec-group > h3,
html body.pdf-product-page .static-spec-details { display: none !important; }

@media (max-width: 900px) {
  html body.pdf-product-page .pdf-gallery,
  html body.pdf-product-page .pdf-feature-copy { height: auto !important; min-height: 420px !important; }
  html body.pdf-product-page .pdf-gallery-main { min-height: 420px !important; padding-bottom: 112px !important; }
  html body.pdf-product-page .pdf-feature-list > li:not(.is-active) { display: none !important; }
  html body.pdf-product-page .pdf-feature-list > li.is-active { display: flex !important; min-height: 320px !important; }
}

html body .subnav,
html body .subnav.is-scrolled {
  background: inherit !important;
  border-top: 1px solid #dce2ea !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body[class][class] .subnav,
html body[class][class] .subnav.is-scrolled {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html body .site-header + .subnav {
  background: rgba(4,10,20,.96) !important;
  border-top-color: rgba(255,255,255,.12) !important;
}
html body .site-header + .subnav a { color: rgba(218,225,234,.72) !important; }
html body .site-header + .subnav a:hover,
html body .site-header + .subnav a:focus-visible { background: rgba(255,255,255,.08) !important; color: rgba(218,225,234,.72) !important; }
html body .site-header + .subnav a.active { background: rgba(255,255,255,.10) !important; color: var(--qn-cyan) !important; }
html body .site-header.qn-header-light + .subnav {
  background: rgba(255,255,255,.97) !important;
  border-top-color: #dce2ea !important;
}
html body .site-header.qn-header-light + .subnav a { color: #687487 !important; }
html body .site-header.qn-header-light + .subnav a:hover,
html body .site-header.qn-header-light + .subnav a:focus-visible { background: #edf2f7 !important; color: #687487 !important; }
html body .site-header.qn-header-light + .subnav a.active { background: #e6ecf4 !important; color: var(--qn-brand) !important; }

html body .footer-main {
  min-height: 0 !important;
  padding: 22px 0 18px !important;
  gap: 8px clamp(48px,8vw,150px) !important;
}
html body .footer-brand {
  align-self: center !important;
  justify-content: center !important;
}
html body .footer-contact,
html body .footer-social {
  justify-self: end !important;
  width: 100% !important;
  text-align: right !important;
}
html body .footer-contact h3 { margin-bottom: 6px !important; }
html body .footer-contact > a { min-height: 32px !important; }
html body .footer-social .social-links { justify-content: flex-end !important; }
html body .footer-bottom {
  padding: 13px 0 !important;
}
html body .footer-simple-main {
  min-height: 136px !important;
  height: 136px !important;
  box-sizing: border-box !important;
  padding-block: 18px !important;
}
html body .footer-brand-stack,
html body .footer-contact-social {
  min-height: 96px !important;
  height: 96px !important;
}
html body .footer-contact-social {
  justify-items: end !important;
  text-align: right !important;
  gap: 7px !important;
}
html body .footer-email { justify-items: end !important; }
html body .footer-social-icons { justify-content: flex-end !important; }
html body .footer-simple-bottom .container { min-height: 42px !important; }

/* 2026-08-09: shared themed capsule CTA, unified home surface and footer spacing. */
html body[class][class] .site-header .header-consult-button[data-theme] {
  --capsule-bg: rgba(255,255,255,.08);
  --capsule-border: rgba(255,255,255,.38);
  --capsule-text: #fff;
  --capsule-hover-bg: #fff;
  --capsule-hover-border: #fff;
  --capsule-hover-text: var(--qn-brand);
  display: inline-flex !important;
  min-height: 46px !important;
  padding-inline: 25px !important;
  border: 1px solid var(--capsule-border) !important;
  border-radius: 999px !important;
  background: var(--capsule-bg) !important;
  color: var(--capsule-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--qn-transition), border-color var(--qn-transition), color var(--qn-transition) !important;
}
html body[class][class] .site-header .header-consult-button[data-theme="light"] {
  --capsule-bg: var(--qn-brand);
  --capsule-border: var(--qn-brand);
  --capsule-text: #fff;
  --capsule-hover-bg: #0a2149;
  --capsule-hover-border: #0a2149;
  --capsule-hover-text: #fff;
}
html body[class][class] .site-header .header-consult-button[data-theme]:hover,
html body[class][class] .site-header .header-consult-button[data-theme]:focus-visible {
  border-color: var(--capsule-hover-border) !important;
  background: var(--capsule-hover-bg) !important;
  color: var(--capsule-hover-text) !important;
  box-shadow: 0 10px 24px rgba(5,16,36,.14) !important;
  transform: none !important;
}

html body.home-page .home-story-section {
  background: #fff !important;
}

html body .footer-simple-main {
  min-height: 196px !important;
  height: auto !important;
  padding-top: 26px !important;
  padding-bottom: 32px !important;
  align-items: flex-start !important;
}
html body .footer-brand-stack {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  gap: 24px !important;
}
html body .footer-brand-stack img,
html body .footer-brand-stack p {
  margin: 0 !important;
}
html body .footer-contact-social {
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
}
html body .footer-simple-bottom {
  position: relative !important;
  z-index: 1 !important;
}
@media (min-width: 901px) {
  html body .footer-simple-main .footer-brand-stack {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }
  html body .footer-simple-main .footer-contact-social {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }
}
@media (max-width: 900px) {
  html body .footer-simple-main .footer-brand-stack,
  html body .footer-simple-main .footer-contact-social {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* 2026-08-09: lock desktop product-module carousel to one visual viewport. */
@media (min-width: 901px) {
  html body.pdf-product-page .glove-hardware-screen,
  html body.pdf-product-page .exo-hardware-screen {
    box-sizing: border-box !important;
    height: 100svh !important;
    min-height: 720px !important;
  }

  html body.pdf-product-page .glove-hardware-screen > .pdf-screen-inner,
  html body.pdf-product-page .exo-hardware-screen > .pdf-screen-inner {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* 2026-08-09: transparent glass navigation and one shared capsule language. */
html body[class][class] .site-header,
html body[class][class] .site-header.is-scrolled {
  background: rgba(4,10,20,.26) !important;
  border-bottom-color: rgba(255,255,255,.075) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(125%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(125%) blur(24px) !important;
}

html body[class][class] .site-header.qn-header-light,
html body[class][class] .site-header.qn-header-light.is-scrolled {
  background: rgba(255,255,255,.48) !important;
  border-bottom-color: rgba(17,45,95,.075) !important;
  backdrop-filter: saturate(120%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(24px) !important;
}

html body[class][class] .site-header + .subnav,
html body[class][class] .site-header + .subnav.is-scrolled,
html body[class][class] .site-header.qn-header-light + .subnav,
html body[class][class] .site-header.qn-header-light + .subnav.is-scrolled {
  background: transparent !important;
  border-top: 1px solid rgba(148,163,184,.12) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: saturate(115%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(115%) blur(18px) !important;
}

html body[class][class] .site-header .main-nav a,
html body[class][class] .site-header .header-consult-button[data-theme],
html body[class][class] .site-header + .subnav a {
  min-height: 46px !important;
  padding-inline: 24px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease !important;
}

html body[class][class] .site-header .main-nav a:hover,
html body[class][class] .site-header .main-nav a:focus-visible,
html body[class][class] .site-header .main-nav a.active,
html body[class][class] .site-header .header-consult-button[data-theme="dark"],
html body[class][class] .site-header + .subnav a:hover,
html body[class][class] .site-header + .subnav a:focus-visible,
html body[class][class] .site-header + .subnav a.active {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.065) !important;
}

html body[class][class] .site-header .header-consult-button[data-theme="dark"] {
  color: rgba(255,255,255,.92) !important;
}

html body[class][class] .site-header .header-consult-button[data-theme="dark"]:hover,
html body[class][class] .site-header .header-consult-button[data-theme="dark"]:focus-visible {
  border-color: rgba(0,212,212,.30) !important;
  background: rgba(0,212,212,.10) !important;
  color: var(--qn-cyan) !important;
}

html body[class][class] .site-header.qn-header-light .main-nav a:hover,
html body[class][class] .site-header.qn-header-light .main-nav a:focus-visible,
html body[class][class] .site-header.qn-header-light .main-nav a.active,
html body[class][class] .site-header .header-consult-button[data-theme="light"],
html body[class][class] .site-header.qn-header-light + .subnav a:hover,
html body[class][class] .site-header.qn-header-light + .subnav a:focus-visible,
html body[class][class] .site-header.qn-header-light + .subnav a.active {
  border-color: rgba(17,45,95,.11) !important;
  background: rgba(17,45,95,.06) !important;
  color: var(--qn-brand) !important;
}

html body[class][class] .site-header .header-consult-button[data-theme="light"]:hover,
html body[class][class] .site-header .header-consult-button[data-theme="light"]:focus-visible {
  border-color: rgba(17,45,95,.18) !important;
  background: rgba(17,45,95,.11) !important;
  color: var(--qn-brand) !important;
}

/* 2026-08-09: place the product navigation on one continuous glass plane. */
@media (min-width: 761px) {
  html body.products-page,
  html body.pdf-product-page,
  html body.teleop-page,
  html body.data-page {
    --qn-header-row: 72px;
    --qn-subnav-row: 51px;
    --qn-product-nav-stack: 123px;
  }

  html body.products-page .site-header,
  html body.pdf-product-page .site-header,
  html body.teleop-page .site-header,
  html body.data-page .site-header {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 100 !important;
    width: 100% !important;
    height: var(--qn-product-nav-stack) !important;
    overflow: visible !important;
    contain: none !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    will-change: backdrop-filter !important;
    background: rgba(4,10,20,.20) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    backdrop-filter: saturate(125%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(125%) blur(24px) !important;
  }

  html body.products-page .site-header.qn-header-light,
  html body.pdf-product-page .site-header.qn-header-light,
  html body.teleop-page .site-header.qn-header-light,
  html body.data-page .site-header.qn-header-light {
    background: rgba(255,255,255,.38) !important;
    border-bottom-color: rgba(17,45,95,.07) !important;
  }

  html body.products-page .site-header .header-inner,
  html body.pdf-product-page .site-header .header-inner,
  html body.teleop-page .site-header .header-inner,
  html body.data-page .site-header .header-inner {
    height: var(--qn-header-row) !important;
  }

  html body.products-page .site-header + .subnav,
  html body.pdf-product-page .site-header + .subnav,
  html body.teleop-page .site-header + .subnav,
  html body.data-page .site-header + .subnav,
  html body.products-page .site-header.qn-header-light + .subnav,
  html body.pdf-product-page .site-header.qn-header-light + .subnav,
  html body.teleop-page .site-header.qn-header-light + .subnav,
  html body.data-page .site-header.qn-header-light + .subnav {
    position: fixed !important;
    inset: var(--qn-header-row) 0 auto !important;
    z-index: 101 !important;
    width: 100% !important;
    height: var(--qn-subnav-row) !important;
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: translateZ(0) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.products-page .subnav-scroll,
  html body.pdf-product-page .subnav-scroll,
  html body.teleop-page .subnav-scroll,
  html body.data-page .subnav-scroll {
    height: var(--qn-subnav-row) !important;
    min-height: var(--qn-subnav-row) !important;
    overflow-y: visible !important;
  }

  html body.products-page > main,
  html body.pdf-product-page > main,
  html body.teleop-page > main,
  html body.data-page > main {
    margin-top: 0 !important;
  }

  html body.products-page > main > :first-child,
  html body.pdf-product-page > main > :first-child,
  html body.teleop-page > main > :first-child,
  html body.data-page > main > :first-child {
    box-sizing: border-box !important;
    padding-top: var(--qn-product-nav-stack) !important;
  }
}

/* Final cascade guard: the header owns the whole glass plane; subnav is paint-free. */
@media (min-width: 761px) {
  html body[class][class] .site-header:has(+ .subnav),
  html body[class][class] .site-header:has(+ .subnav).is-scrolled {
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    will-change: auto !important;
    background: rgba(4,10,20,.20) !important;
    backdrop-filter: saturate(125%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(125%) blur(24px) !important;
  }

  html body[class][class] .site-header.qn-header-light:has(+ .subnav),
  html body[class][class] .site-header.qn-header-light:has(+ .subnav).is-scrolled {
    background: rgba(255,255,255,.38) !important;
  }

  html body[class][class] .site-header + .subnav,
  html body[class][class] .site-header + .subnav.is-scrolled,
  html body[class][class] .site-header.qn-header-light + .subnav,
  html body[class][class] .site-header.qn-header-light + .subnav.is-scrolled {
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 2026-08-09: VetraGlove screen-two spacing and container cleanup. */
@media (min-width: 901px) {
  html body.vetraglove-page .product-feature-screen,
  html body.exo-page .product-feature-screen {
    box-sizing: border-box !important;
    min-height: calc(100svh - var(--qn-product-nav-stack, 123px)) !important;
    padding: 28px 0 !important;
    scroll-margin-top: var(--qn-product-nav-stack, 123px) !important;
  }

  html body.vetraglove-page .product-feature-screen > .pdf-screen-inner,
  html body.exo-page .product-feature-screen > .pdf-screen-inner {
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-title,
  html body.exo-page .product-feature-screen .pdf-feature-title {
    margin: 0 !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-grid,
  html body.exo-page .product-feature-screen .pdf-feature-grid {
    min-height: 0 !important;
    gap: clamp(32px, 4vw, 52px) !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-gallery,
  html body.vetraglove-page .product-feature-screen .pdf-gallery-main,
  html body.vetraglove-page .product-feature-screen .pdf-gallery-thumbs,
  html body.exo-page .product-feature-screen .pdf-gallery,
  html body.exo-page .product-feature-screen .pdf-gallery-main,
  html body.exo-page .product-feature-screen .pdf-gallery-thumbs {
    border-radius: 18px !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-gallery,
  html body.exo-page .product-feature-screen .pdf-gallery {
    overflow: hidden !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-copy,
  html body.exo-page .product-feature-screen .pdf-feature-copy {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-list > li > button,
  html body.exo-page .product-feature-screen .pdf-feature-list > li > button {
    padding: clamp(24px, 4vw, 58px) !important;
  }
}

/* 2026-08-09: opaque screen-aware navigation for consistent readability. */
html body[class][class] .site-header,
html body[class][class] .site-header.is-scrolled,
html body[class][class] .site-header:has(+ .subnav),
html body[class][class] .site-header:has(+ .subnav).is-scrolled {
  background: #07101e !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[class][class] .site-header.qn-header-light,
html body[class][class] .site-header.qn-header-light.is-scrolled,
html body[class][class] .site-header.qn-header-light:has(+ .subnav),
html body[class][class] .site-header.qn-header-light:has(+ .subnav).is-scrolled {
  background: #fff !important;
  border-bottom-color: rgba(17,45,95,.09) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[class][class] .site-header + .subnav,
html body[class][class] .site-header + .subnav.is-scrolled,
html body[class][class] .site-header.qn-header-light + .subnav,
html body[class][class] .site-header.qn-header-light + .subnav.is-scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2026-08-09: light product carousel and compact fifth/sixth delivery screens. */
html body.pdf-product-page .glove-hardware-screen,
html body.pdf-product-page .exo-hardware-screen {
  background: #f4f7fb !important;
  color: var(--qn-brand) !important;
}

html body.pdf-product-page .glove-hardware-screen > .pdf-screen-inner,
html body.pdf-product-page .exo-hardware-screen > .pdf-screen-inner {
  background: transparent !important;
}

html body.pdf-product-page .glove-hardware-screen .pdf-screen-head h2,
html body.pdf-product-page .exo-hardware-screen .pdf-screen-head h2,
html body.pdf-product-page .module-slide-copy h3 {
  color: var(--qn-brand) !important;
}

html body.pdf-product-page .module-carousel-viewport {
  border: 1px solid #dce4ef !important;
  background: #fff !important;
}

html body.pdf-product-page .module-carousel-slide,
html body.pdf-product-page .module-carousel-slide > img {
  background: transparent !important;
}

html body.pdf-product-page .module-slide-copy li {
  color: #5b6c82 !important;
}

html body.pdf-product-page .module-carousel-arrow {
  border-color: #d4dce8 !important;
  background: #fff !important;
  color: var(--qn-brand) !important;
  box-shadow: 0 8px 22px rgba(17,45,95,.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.pdf-product-page .module-carousel-arrow:hover,
html body.pdf-product-page .module-carousel-arrow:focus-visible {
  border-color: rgba(17,45,95,.22) !important;
  background: #edf2f7 !important;
  color: var(--qn-brand) !important;
}

html body.pdf-product-page .module-carousel-dots button {
  background: #c9d3df !important;
}

html body.pdf-product-page .module-carousel-dots button.is-active {
  background: var(--qn-brand) !important;
}

@media (min-width: 901px) {
  html body.pdf-product-page .module-carousel-slide {
    position: relative !important;
  }

  html body.pdf-product-page .module-carousel-slide > img {
    position: absolute !important;
    top: 24px !important;
    bottom: auto !important;
    left: 0 !important;
    width: 55% !important;
    height: calc(100% - 48px) !important;
    max-height: none !important;
    padding: 12px clamp(28px, 4vw, 58px) !important;
    object-fit: contain !important;
  }
}

@media (min-width: 901px) {
  html body.pdf-product-page .glove-bundle-screen,
  html body.pdf-product-page .exo-bundle-screen {
    box-sizing: border-box !important;
    min-height: calc(200svh - 246px) !important;
    padding: 28px 0 0 !important;
  }

  html body.pdf-product-page .glove-bundle-screen > .pdf-screen-inner,
  html body.pdf-product-page .exo-bundle-screen > .pdf-screen-inner {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
  }

  html body.pdf-product-page .glove-bundle-screen .pdf-screen-head,
  html body.pdf-product-page .exo-bundle-screen .pdf-screen-head {
    margin: 0 !important;
  }

  html body.pdf-product-page .product-delivery-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  html body.pdf-product-page .product-delivery-stack > .delivery-panel:first-child {
    height: calc(100svh - var(--qn-product-nav-stack, 123px) - 134px) !important;
    min-height: 0 !important;
    margin: 0 0 29px !important;
  }

  html body.pdf-product-page .product-delivery-stack > .delivery-panel:last-child {
    height: calc(100svh - var(--qn-product-nav-stack, 123px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.pdf-product-page .delivery-panel {
    grid-template-columns: minmax(0,60fr) minmax(0,40fr) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.pdf-product-page .delivery-panel.image-right {
    grid-template-columns: minmax(0,40fr) minmax(0,60fr) !important;
  }

  html body.pdf-product-page .delivery-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 18px 28px !important;
    background: transparent !important;
  }

  html body.pdf-product-page .delivery-media img {
    width: 82% !important;
    height: clamp(280px,52svh,420px) !important;
    max-width: 82% !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
  }

  html body.pdf-product-page .delivery-copy {
    height: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    padding: 20px clamp(26px,3vw,42px) !important;
  }

  html body.pdf-product-page .delivery-copy h3 {
    margin: 0 0 14px !important;
    color: var(--qn-brand) !important;
    font-size: clamp(30px,2.8vw,40px) !important;
    line-height: 1.12 !important;
  }

  html body.pdf-product-page .delivery-lines,
  html body.pdf-product-page .delivery-group ul {
    gap: 0 !important;
  }

  html body.pdf-product-page .delivery-lines li,
  html body.pdf-product-page .delivery-group li {
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #d8e0ea !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5b6c82 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  html body.pdf-product-page .delivery-lines li {
    grid-template-columns: minmax(108px,38%) minmax(0,1fr) !important;
    gap: 18px !important;
  }

  html body.pdf-product-page .delivery-lines strong,
  html body.pdf-product-page .delivery-group h4 {
    color: var(--qn-brand) !important;
    font-weight: 600 !important;
  }

  html body.pdf-product-page .delivery-group + .delivery-group {
    margin-top: 16px !important;
  }

  html body.pdf-product-page .delivery-group h4 {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* 2026-08-09: standard/optional boundary modules and restrained feedback. */
html body.pdf-product-page .delivery-panel.motion-panel {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease !important;
}

html body.pdf-product-page .delivery-panel.motion-panel.is-inview {
  opacity: 1 !important;
  transform: none !important;
}

html body.pdf-product-page .delivery-panel.motion-panel .delivery-media,
html body.pdf-product-page .delivery-panel.motion-panel .delivery-media img,
html body.pdf-product-page .delivery-panel.motion-panel .delivery-copy,
html body.pdf-product-page .delivery-panel.motion-panel .delivery-copy h3,
html body.pdf-product-page .delivery-panel.motion-panel .delivery-copy h4,
html body.pdf-product-page .delivery-panel.motion-panel .delivery-copy li {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html body.pdf-product-page .delivery-panel:hover {
  background-color: rgba(17,45,95,.035) !important;
  box-shadow: inset 0 0 0 1px rgba(17,45,95,.075) !important;
}

html body.pdf-product-page .delivery-media img {
  transform: none !important;
  transition: transform 220ms ease !important;
}

html body.pdf-product-page .delivery-panel:hover .delivery-media img {
  transform: scale(1.025) !important;
}

html body.pdf-product-page .delivery-lines li,
html body.pdf-product-page .delivery-group li {
  transition:
    padding 180ms ease,
    color 180ms ease,
    background-color 180ms ease !important;
}

html body.pdf-product-page .delivery-lines li:hover,
html body.pdf-product-page .delivery-group li:hover {
  padding-right: 10px !important;
  padding-left: 10px !important;
  background-color: rgba(17,45,95,.055) !important;
  color: var(--qn-brand) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.pdf-product-page .delivery-panel.motion-panel,
  html body.pdf-product-page .delivery-panel.motion-panel.is-inview,
  html body.pdf-product-page .delivery-media img,
  html body.pdf-product-page .delivery-panel:hover .delivery-media img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 2026-08-09: keep each page's existing frame; only unify title-to-content spacing. */
html body {
  --qn-title-content-gap: clamp(52px,6.5svh,72px);
}

html body main#main .section-head,
html body.products-page .service-overview-main .service-heading,
html body.pdf-product-page .pdf-product-flow .pdf-screen-head,
html body.about-page .about-foundation > .story-container > h2 {
  margin-top: 0 !important;
  margin-bottom: var(--qn-title-content-gap) !important;
}

html body.pdf-product-page .pdf-product-flow > .product-feature-screen > .pdf-screen-inner {
  gap: var(--qn-title-content-gap) !important;
}

@media (max-width: 900px) {
  html body {
    --qn-title-content-gap: 36px;
  }
}

/* 2026-08-09: software product openings reuse the two hardware product heroes. */
html body.teleop-page main#main > .teleop-hero,
html body.data-page main#main > .data-platform-hero {
  min-height: 100svh !important;
  background: #06101f !important;
  color: #fff !important;
}

html body.teleop-page .teleop-hero > .hero-grid,
html body.data-page .data-platform-hero > .hero-grid {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--qn-product-nav-stack,123px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.teleop-page .teleop-hero .hero-copy,
html body.data-page .data-platform-hero .hero-copy {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(38px,6vw,96px) clamp(28px,5vw,80px) !important;
}

html body.teleop-page .teleop-hero .hero-copy h1,
html body.teleop-page .teleop-hero .hero-copy .lead,
html body.data-page .data-platform-hero .hero-copy h1,
html body.data-page .data-platform-hero .hero-copy h1 em,
html body.data-page .data-platform-hero .hero-copy .lead {
  color: #fff !important;
}

html body.teleop-page .teleop-hero .hero-copy h1,
html body.data-page .data-platform-hero .hero-copy h1 {
  margin: 0 !important;
  font-size: clamp(46px,5vw,76px) !important;
  line-height: 1.02 !important;
}

html body.teleop-page .teleop-hero .hero-copy .lead,
html body.data-page .data-platform-hero .hero-copy .lead {
  margin: 22px 0 12px !important;
  font-size: clamp(20px,1.6vw,26px) !important;
  line-height: 1.5 !important;
}

html body.teleop-page .teleop-hero .hero-copy .copy,
html body.data-page .data-platform-hero .hero-copy .copy {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

html body.teleop-page .software-hero-tags,
html body.data-page .software-hero-tags {
  margin: 24px 0 0 !important;
}

html body.teleop-page .software-hero-tags span,
html body.data-page .software-hero-tags span {
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.90) !important;
}

html body.teleop-page .teleop-hero .actions,
html body.data-page .data-platform-hero .actions {
  width: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin-top: 24px !important;
}

html body.teleop-page .teleop-hero .button,
html body.data-page .data-platform-hero .button {
  width: auto !important;
  min-height: 46px !important;
  padding-inline: 25px !important;
  border-radius: 999px !important;
}

html body.teleop-page .teleop-hero .button.secondary,
html body.data-page .data-platform-hero .button.secondary {
  border-color: rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

html body.teleop-page .teleop-hero .button.secondary:hover,
html body.teleop-page .teleop-hero .button.secondary:focus-visible,
html body.data-page .data-platform-hero .button.secondary:hover,
html body.data-page .data-platform-hero .button.secondary:focus-visible {
  border-color: var(--qn-cyan) !important;
  background: rgba(0,212,212,.12) !important;
}

html body.teleop-page .teleop-hero .teleop-window,
html body.data-page .data-platform-hero .hero-visual {
  grid-column: auto !important;
  align-self: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body.teleop-page .teleop-hero .teleop-window {
  width: min(82%,720px) !important;
  justify-self: center !important;
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: #06101f !important;
  box-shadow: 0 28px 54px rgba(0,0,0,.34) !important;
}

html body.data-page .data-platform-hero .hero-visual {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
}

html body.data-page .data-platform-hero .hero-visual::before {
  display: none !important;
  content: none !important;
}

html body.data-page .data-platform-hero .hero-visual img {
  width: min(82%,720px) !important;
  height: min(76vh,680px) !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 28px 44px rgba(0,0,0,.30)) !important;
  transform: none !important;
}

@media (max-width: 900px) {
  html body.teleop-page main#main > .teleop-hero,
  html body.data-page main#main > .data-platform-hero,
  html body.teleop-page .teleop-hero > .hero-grid,
  html body.data-page .data-platform-hero > .hero-grid {
    min-height: auto !important;
  }

  html body.teleop-page .teleop-hero > .hero-grid,
  html body.data-page .data-platform-hero > .hero-grid {
    grid-template-columns: 1fr !important;
  }

  html body.teleop-page .teleop-hero .hero-copy,
  html body.data-page .data-platform-hero .hero-copy {
    order: 2 !important;
    padding: 30px 20px 44px !important;
  }

  html body.teleop-page .teleop-hero .teleop-window,
  html body.data-page .data-platform-hero .hero-visual {
    order: 1 !important;
    min-height: 34svh !important;
    margin: 28px 20px 0 !important;
  }

  html body.teleop-page .teleop-hero .hero-copy h1,
  html body.data-page .data-platform-hero .hero-copy h1 {
    font-size: 42px !important;
  }
}

/* 2026-08-09: contact dialog email follows the brand link state. */
html body .contact-modal[data-contact-dialog] .contact-modal-email-row a {
  display: inline-flex !important;
  color: #112d5f !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 220ms ease, transform 220ms ease, text-shadow 220ms ease !important;
}

html body .contact-modal[data-contact-dialog] .contact-modal-email-row a:hover,
html body .contact-modal[data-contact-dialog] .contact-modal-email-row a:focus-visible {
  color: #00d4d4 !important;
  transform: translateY(-2px) !important;
  text-shadow: 0 8px 20px rgba(0,199,207,.24) !important;
}

/* 2026-08-10: align the product-overview opening with the home/about dark hero. */
html body.products-page .service-overview-main > .service-hero {
  box-sizing: border-box !important;
  min-height: 100svh !important;
  background: #06101f !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

html body.products-page .service-overview-main > .service-hero .service-hero-grid {
  min-height: calc(100svh - var(--qn-product-nav-stack, 123px)) !important;
}

html body.products-page .service-overview-main > .service-hero .service-hero-copy h1 {
  color: #fff !important;
}

html body.products-page .service-overview-main > .service-hero .service-hero-copy p {
  color: rgba(255,255,255,.68) !important;
}

@media (max-width: 760px) {
  html body.products-page .service-overview-main > .service-hero,
  html body.products-page .service-overview-main > .service-hero .service-hero-grid {
    min-height: 100svh !important;
  }
}

/* 2026-08-10 follow-up 30: unified navigation and VetraGlove screens 2–6. */

/* The same primary active capsule is used on home, products and about. */
html body .site-header .main-nav > a.active,
html body .site-header .main-nav > a[aria-current="page"] {
  box-sizing: border-box !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 25px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.065) !important;
  color: var(--qn-cyan, #00d4d4) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

html body .site-header .main-nav > a.active::after,
html body .site-header .main-nav > a[aria-current="page"]::after {
  display: none !important;
  content: none !important;
}

html body.nav-theme-light .site-header .main-nav > a.active,
html body.nav-theme-light .site-header .main-nav > a[aria-current="page"],
html body .site-header.is-light .main-nav > a.active,
html body .site-header.is-light .main-nav > a[aria-current="page"],
html body .site-header.qn-header-light .main-nav > a.active,
html body .site-header.qn-header-light .main-nav > a[aria-current="page"] {
  border-color: rgba(17,45,95,.14) !important;
  background: rgba(17,45,95,.055) !important;
  color: #112d5f !important;
}

/* Secondary navigation has no capsule in any state. */
html body .subnav .subnav-scroll > a,
html body .subnav .subnav-scroll > a:hover,
html body .subnav .subnav-scroll > a:focus-visible,
html body .subnav .subnav-scroll > a.active,
html body .subnav .subnav-scroll > a[aria-current="page"] {
  min-height: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .subnav .subnav-scroll > a.active,
html body .subnav .subnav-scroll > a[aria-current="page"] {
  color: var(--qn-cyan, #00d4d4) !important;
  font-weight: 750 !important;
}

html body.nav-theme-light .subnav .subnav-scroll > a.active,
html body.nav-theme-light .subnav .subnav-scroll > a[aria-current="page"],
html body .subnav.is-light .subnav-scroll > a.active,
html body .subnav.is-light .subnav-scroll > a[aria-current="page"],
html body .site-header.qn-header-light + .subnav .subnav-scroll > a.active,
html body .site-header.qn-header-light + .subnav .subnav-scroll > a[aria-current="page"] {
  color: #112d5f !important;
}

html body .subnav .subnav-scroll > a::before,
html body .subnav .subnav-scroll > a::after {
  display: none !important;
  content: none !important;
}

/* Screen 2: one stable image, with expandable core advantages on the right. */
html body.vetraglove-page .product-feature-screen .pdf-feature-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0,55fr) minmax(360px,45fr) !important;
  gap: clamp(44px,5vw,84px) !important;
  align-items: stretch !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery {
  height: clamp(500px,61svh,650px) !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #e8edf5 !important;
  box-shadow: none !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(20px,2vw,32px) !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-thumbs {
  display: none !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-copy {
  height: clamp(500px,61svh,650px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: repeat(4,minmax(74px,auto)) !important;
  align-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list > li,
html body.vetraglove-page .product-feature-screen .pdf-feature-list > li:not(.is-active),
html body.vetraglove-page .product-feature-screen .pdf-feature-list > li.is-active {
  min-height: 74px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-bottom-color: rgba(17,45,95,.13) !important;
  border-radius: 14px !important;
  background: transparent !important;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list > li:hover,
html body.vetraglove-page .product-feature-screen .pdf-feature-list > li:focus-within {
  border-color: rgba(0,180,190,.20) !important;
  background: rgba(0,180,190,.055) !important;
  transform: translateX(3px) !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list > li.is-active {
  min-height: 138px !important;
  border-color: rgba(17,45,95,.15) !important;
  background: rgba(17,45,95,.06) !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list > li > button {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 18px 22px !important;
  text-align: left !important;
  color: #112d5f !important;
  cursor: pointer !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list strong {
  display: block !important;
  font-size: clamp(20px,1.65vw,28px) !important;
  line-height: 1.3 !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list span {
  display: block !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  color: #68778d !important;
  line-height: 1.75 !important;
  transition: max-height 240ms ease, opacity 200ms ease, margin-top 240ms ease !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list > li.is-active span {
  max-height: 90px !important;
  margin-top: 10px !important;
  opacity: 1 !important;
}

/* Screen 3: transparent layout container; carousel controls sit outside the content. */
html body.vetraglove-page .glove-hardware-screen {
  background: #f4f7fb !important;
  color: #112d5f !important;
}

html body.vetraglove-page .glove-hardware-screen .product-module-carousel {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-viewport {
  height: clamp(500px,62svh,680px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-track {
  height: 100% !important;
  background: transparent !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide > img {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: clamp(24px,3.2vw,52px) !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  transform: none !important;
}

html body.vetraglove-page .glove-hardware-screen .module-slide-copy {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: clamp(28px,4vw,64px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #112d5f !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.vetraglove-page .glove-hardware-screen .module-slide-copy h3,
html body.vetraglove-page .glove-hardware-screen .module-slide-copy li {
  color: inherit !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow {
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(17,45,95,.14) !important;
  background: rgba(255,255,255,.58) !important;
  color: #112d5f !important;
  opacity: .42 !important;
  transform: translateY(-50%) !important;
  transition: opacity 200ms ease, border-color 200ms ease, background-color 200ms ease !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.prev { left: -64px !important; }
html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.next { right: -64px !important; }

html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow:hover,
html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow:focus-visible {
  border-color: rgba(17,45,95,.34) !important;
  background: #fff !important;
  opacity: 1 !important;
}

/* Screen 4: two named specification groups with consistent label/value rows. */
html body.vetraglove-page #glove-pdf-specs .pdf-spec-shell {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.vetraglove-page #glove-pdf-specs .pdf-spec-columns {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: clamp(44px,5vw,84px) !important;
}

html body.vetraglove-page #glove-pdf-specs .pdf-spec-group > h3 {
  display: block !important;
  margin: 0 0 18px !important;
  color: #112d5f !important;
  font-size: clamp(23px,1.8vw,30px) !important;
  line-height: 1.3 !important;
}

html body.vetraglove-page #glove-pdf-specs .pdf-spec-group dl > div {
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: minmax(120px,42%) minmax(0,58%) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(17,45,95,.12) !important;
}

html body.vetraglove-page #glove-pdf-specs dt {
  color: #66758a !important;
}

html body.vetraglove-page #glove-pdf-specs dd {
  margin: 0 !important;
  color: #112d5f !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* Screens 5–6: no card shells, only the global transparent layout grid. */
html body.vetraglove-page .glove-bundle-screen,
html body.vetraglove-page .glove-bundle-screen .pdf-screen-inner,
html body.vetraglove-page .glove-bundle-screen .product-delivery-stack {
  background: #f4f7fb !important;
}

html body.vetraglove-page .glove-bundle-screen .product-delivery-stack {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(64px,10svh,110px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel,
html body.vetraglove-page .glove-bundle-screen .delivery-panel:hover {
  min-height: clamp(520px,64svh,680px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-left {
  display: grid !important;
  grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
  align-items: center !important;
  gap: clamp(42px,5vw,78px) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right {
  display: grid !important;
  grid-template-columns: minmax(0,45fr) minmax(0,55fr) !important;
  align-items: center !important;
  gap: clamp(42px,5vw,78px) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-media,
html body.vetraglove-page .glove-bundle-screen .delivery-copy {
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-media img,
html body.vetraglove-page .glove-bundle-screen .delivery-panel:hover .delivery-media img {
  width: 100% !important;
  height: clamp(430px,57svh,600px) !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  transform: none !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-copy h3 {
  margin: 0 0 24px !important;
  color: #112d5f !important;
  font-size: clamp(34px,3vw,52px) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines li,
html body.vetraglove-page .glove-bundle-screen .delivery-group li {
  border-bottom-color: rgba(17,45,95,.12) !important;
}

@media (max-width: 1100px) {
  html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.prev { left: 8px !important; }
  html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.next { right: 8px !important; }
}

@media (max-width: 820px) {
  html body .site-header .main-nav > a.active,
  html body .site-header .main-nav > a[aria-current="page"] {
    min-height: 42px !important;
    padding-inline: 18px !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-grid,
  html body.vetraglove-page .glove-hardware-screen .module-carousel-slide,
  html body.vetraglove-page #glove-pdf-specs .pdf-spec-columns,
  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-left,
  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right {
    grid-template-columns: 1fr !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-gallery,
  html body.vetraglove-page .product-feature-screen .pdf-feature-copy {
    height: auto !important;
    min-height: 420px !important;
  }

  html body.vetraglove-page .product-feature-screen .pdf-feature-copy { min-height: 0 !important; }

  html body.vetraglove-page .glove-hardware-screen .module-carousel-viewport { height: 680px !important; }
  html body.vetraglove-page .glove-hardware-screen .module-carousel-slide { grid-template-rows: 52% 48% !important; }
  html body.vetraglove-page .glove-hardware-screen .module-carousel-slide > img { grid-column: 1 !important; grid-row: 1 !important; }
  html body.vetraglove-page .glove-hardware-screen .module-slide-copy { grid-column: 1 !important; grid-row: 2 !important; padding: 24px !important; }

  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-copy { order: 1 !important; }
  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-media { order: 2 !important; }
  html body.vetraglove-page .glove-bundle-screen .delivery-panel { min-height: 0 !important; gap: 26px !important; }
  html body.vetraglove-page .glove-bundle-screen .delivery-media img { height: 400px !important; }
}

/* 2026-08-10 follow-up 31: final primary/secondary navigation state normalization. */

/*
 * Historical page-specific rules use body[class][class], so the final shared
 * dark-theme active state deliberately matches that specificity. Home, product
 * center and about now share the exact same cyan active text treatment.
 */
html body[class][class] .site-header:not(.qn-header-light) .main-nav > a.active,
html body[class][class] .site-header:not(.qn-header-light) .main-nav > a[aria-current="page"] {
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.065) !important;
  color: var(--qn-cyan, #00d4d4) !important;
  font-weight: 700 !important;
}

/*
 * Product sub-navigation uses typography alone for the selected page. Clear
 * every inherited capsule property in default, hover, focus and active states.
 */
html body[class][class] .site-header + nav.subnav .subnav-scroll > a,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a:hover,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a:focus-visible,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a.active,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a[aria-current="page"] {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: none !important;
}

html body[class][class] .site-header + nav.subnav .subnav-scroll > a.active,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a[aria-current="page"] {
  color: var(--qn-cyan, #00d4d4) !important;
  font-weight: 750 !important;
}

html body[class][class] .site-header + nav.subnav .subnav-scroll > a::before,
html body[class][class] .site-header + nav.subnav .subnav-scroll > a::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* 2026-08-10 follow-up 32: one light theme, stable primary spacing. */
:root {
  --qn-light-page: #f4f7fb;
  --qn-page: var(--qn-light-page);
  --qnbot-page: var(--qn-light-page);
}

/* Light primary and secondary selections use the same deep brand blue. */
html body[class][class] .site-header.qn-header-light .main-nav > a.active,
html body[class][class] .site-header.qn-header-light .main-nav > a[aria-current="page"],
html body[class][class] .site-header.qn-header-light + nav.subnav .subnav-scroll > a.active,
html body[class][class] .site-header.qn-header-light + nav.subnav .subnav-scroll > a[aria-current="page"] {
  color: #112d5f !important;
  font-weight: 750 !important;
}

/* Keep the three primary links on one fixed rhythm in every scroll/theme state. */
@media (min-width: 761px) {
  html body[class][class] .site-header .main-nav,
  html body[class][class] .site-header.is-scrolled .main-nav,
  html body[class][class] .site-header.qn-header-light .main-nav,
  html body[class][class] .site-header.qn-header-light.is-scrolled .main-nav {
    display: flex !important;
    align-items: center !important;
    gap: clamp(48px,5vw,84px) !important;
    column-gap: clamp(48px,5vw,84px) !important;
    row-gap: 0 !important;
  }

  html body[class][class] .site-header .main-nav > a,
  html body[class][class] .site-header.is-scrolled .main-nav > a {
    flex: 0 0 auto !important;
  }
}

/* The light header is the same solid surface as every light page screen. */
html body[class][class] .site-header.qn-header-light,
html body[class][class] .site-header.qn-header-light.is-scrolled,
html body[class][class] .site-header.qn-header-light:has(+ .subnav),
html body[class][class] .site-header.qn-header-light:has(+ .subnav).is-scrolled {
  background: var(--qn-light-page) !important;
  border-bottom-color: rgba(17,45,95,.08) !important;
}

html body[class][class] .site-header.qn-header-light + nav.subnav,
html body[class][class] .site-header.qn-header-light + nav.subnav.is-scrolled {
  background: transparent !important;
  border-bottom-color: rgba(17,45,95,.08) !important;
}

/* Normalize page-level light canvases without flattening white content cards. */
html body,
html body .section,
html body .section.surface,
html body.products-page .service-overview-main,
html body.products-page .service-category,
html body.about-page .about-company-slogan,
html body.about-page .about-slogan-screen,
html body.about-page .about-foundation,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:not(:first-child):not(.pdf-contact-screen),
html body.pdf-product-page .pdf-product-flow > .pdf-screen:not(:first-child):not(.pdf-contact-screen) > .pdf-screen-inner {
  background-color: var(--qn-light-page) !important;
}

/* 2026-08-10 follow-up 33: VetraGlove product-media and delivery alignment. */

/* Screen 2: transparent product cutouts, a calmer title/content rhythm and a blank SDK media state. */
html body.vetraglove-page .product-feature-screen .pdf-feature-title {
  margin: 0 0 clamp(52px, 6svh, 76px) !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-grid {
  margin-top: 0 !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main {
  overflow: hidden !important;
  border-radius: 18px !important;
  background: rgba(17,45,95,.035) !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main img {
  width: 94% !important;
  height: 94% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main img[hidden] {
  display: none !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main.is-empty {
  background: rgba(17,45,95,.035) !important;
}

html body.vetraglove-page .product-feature-screen .pdf-gallery-main.is-empty::before,
html body.vetraglove-page .product-feature-screen .pdf-gallery-main.is-empty::after {
  display: none !important;
  content: none !important;
}

html body.vetraglove-page .product-feature-screen .pdf-feature-list li.is-active span {
  margin-top: 18px !important;
}

/* Screen 3: arrows sit inside the page gutter; every slide shares one responsive 55:45 stage. */
html body.vetraglove-page .glove-hardware-screen .module-carousel-head {
  margin-bottom: clamp(20px, 2.5svh, 32px) !important;
}

html body.vetraglove-page .glove-hardware-screen .product-module-carousel {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-inline: clamp(62px, 5vw, 92px) !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-viewport,
html body.vetraglove-page .glove-hardware-screen .module-carousel-track,
html body.vetraglove-page .glove-hardware-screen .module-carousel-slide {
  min-width: 0 !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide {
  grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
  align-items: center !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide > img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: clamp(30px, 3.8vw, 62px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide:nth-child(3) > img {
  max-width: 100% !important;
  max-height: 100% !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-slide:nth-child(3) .module-slide-copy {
  width: 100% !important;
  max-width: 560px !important;
  align-self: center !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.prev {
  left: 8px !important;
}

html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.next {
  right: 8px !important;
}

/* Screens 5–6: identical gutters, type scale, row language and visual image footprint. */
html body.vetraglove-page .glove-bundle-screen .pdf-screen-inner {
  width: 100% !important;
  max-width: 1920px !important;
  padding-top: clamp(108px, 12svh, 142px) !important;
  padding-inline: clamp(56px, 5vw, 96px) !important;
  box-sizing: border-box !important;
}

html body.vetraglove-page .glove-bundle-screen .pdf-screen-head {
  margin: 0 0 clamp(58px, 7svh, 84px) !important;
}

html body.vetraglove-page .glove-bundle-screen .product-delivery-stack {
  gap: clamp(72px, 9svh, 108px) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-left,
html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right {
  grid-template-columns: minmax(0,55fr) minmax(0,45fr) !important;
  gap: clamp(48px, 5vw, 84px) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right {
  grid-template-columns: minmax(0,45fr) minmax(0,55fr) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-copy {
  grid-column: 1 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-media {
  grid-column: 2 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-media {
  min-height: clamp(500px, 60svh, 640px) !important;
  align-items: center !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-media img,
html body.vetraglove-page .glove-bundle-screen .delivery-panel:hover .delivery-media img {
  width: min(100%, 660px) !important;
  height: clamp(480px, 58svh, 620px) !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-copy {
  width: 100% !important;
  max-width: 620px !important;
  justify-self: center !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-copy h3 {
  margin: 0 0 28px !important;
  font-size: clamp(34px, 3vw, 52px) !important;
  line-height: 1.2 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines li {
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 38%) minmax(0, 62%) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(17,45,95,.12) !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines strong,
html body.vetraglove-page .glove-bundle-screen .delivery-lines span {
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1.65 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines strong {
  color: #112d5f !important;
  font-weight: 700 !important;
}

html body.vetraglove-page .glove-bundle-screen .delivery-lines span {
  color: #66758a !important;
}

@media (max-width: 820px) {
  html body.vetraglove-page .product-feature-screen .pdf-feature-title {
    margin-bottom: 36px !important;
  }

  html body.vetraglove-page .glove-hardware-screen .product-module-carousel {
    padding-inline: 46px !important;
  }

  html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.prev { left: 2px !important; }
  html body.vetraglove-page .glove-hardware-screen .module-carousel-arrow.next { right: 2px !important; }

  html body.vetraglove-page .glove-bundle-screen .pdf-screen-inner {
    padding-top: 82px !important;
    padding-inline: 24px !important;
  }

  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-left,
  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right {
    grid-template-columns: 1fr !important;
  }

  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-copy,
  html body.vetraglove-page .glove-bundle-screen .delivery-panel.image-right .delivery-media {
    grid-column: 1 !important;
  }

  html body.vetraglove-page .glove-bundle-screen .delivery-media {
    min-height: 0 !important;
  }
}

/* Follow-up 35 — final cascade lock for the consolidated 2026-08-10 review */
:root {
  --qn-section-title-top: clamp(92px, 9.5svh, 124px);
  --qn-section-title-gap: clamp(48px, 5.5svh, 72px);
}

html body.about-page main.about-narrative > section.about-company-combined {
  min-height: calc(100svh - 96px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(58px, 6.5svh, 82px) 0 !important;
  background: var(--qn-light-page, #f4f7fb) !important;
}

html body.about-page main.about-narrative > section.about-company-combined > .story-container {
  width: min(calc(100% - clamp(48px, 8vw, 144px)), 1500px) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: clamp(42px, 5svh, 64px) !important;
  text-align: center !important;
}

html body.about-page .about-company-combined .about-company-copy,
html body.about-page .about-company-combined .about-slogan-copy {
  width: min(100%, 1240px) !important;
  margin: 0 auto !important;
}

html body.about-page .about-company-combined .about-company-copy h2 {
  margin: 0 0 clamp(34px, 4svh, 52px) !important;
}

html body.about-page .about-company-combined .about-body {
  margin: 0 auto !important;
  line-height: 2.05 !important;
}

html body.about-page .about-company-combined .about-slogan-copy {
  padding-top: clamp(32px, 4svh, 48px) !important;
  border-top: 1px solid rgba(17, 45, 95, .10) !important;
}

html body.about-page .about-company-combined .about-slogan-copy h2 {
  margin: 0 0 18px !important;
}

html body.about-page main.about-narrative > section.about-foundation-tabs {
  min-height: calc(100svh - 96px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(72px, 8svh, 104px) 0 !important;
  background: var(--qn-light-page, #f4f7fb) !important;
}

html body.about-page .about-foundation-tabs > .story-container {
  width: min(calc(100% - clamp(48px, 8vw, 144px)), 1400px) !important;
  margin: 0 auto !important;
}

html body.about-page .about-foundation-tabs .about-tabs-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, .34fr) minmax(0, .66fr) !important;
  gap: clamp(48px, 7vw, 110px) !important;
  align-items: stretch !important;
}

html body.about-page .about-foundation-tabs .about-tab-list {
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
}

html body.about-page .about-foundation-tabs .about-tab {
  width: 100% !important;
  padding: 22px 28px !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #66758a !important;
  font: inherit !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color .24s ease, border-color .24s ease, background-color .24s ease !important;
}

html body.about-page .about-foundation-tabs .about-tab:hover {
  color: #112d5f !important;
  background: rgba(17, 45, 95, .035) !important;
}

html body.about-page .about-foundation-tabs .about-tab[aria-selected="true"] {
  color: #112d5f !important;
  border-left-color: #14cbd0 !important;
  font-weight: 750 !important;
}

html body.about-page .about-foundation-tabs .about-tab-panels {
  min-height: clamp(320px, 42svh, 470px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(42px, 6vw, 84px) !important;
  border: 1px solid rgba(17, 45, 95, .10) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .58) !important;
}

html body.about-page .about-foundation-tabs .about-tab-panel {
  width: 100% !important;
}

html body.about-page .about-foundation-tabs .about-tab-panel[hidden] {
  display: none !important;
}

html body.about-page .about-foundation-tabs .about-tab-panel h2 {
  margin: 0 0 30px !important;
  font-size: clamp(36px, 4vw, 60px) !important;
}

html body.about-page .about-foundation-tabs .about-tab-panel p {
  margin: 0 !important;
  color: #66758a !important;
  font-size: clamp(20px, 1.6vw, 28px) !important;
  line-height: 1.9 !important;
}

html body.about-page .about-foundation-tabs .about-value-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

html body.about-page .about-foundation-tabs .about-value-tags span {
  min-width: 96px !important;
  padding: 14px 24px !important;
  border: 1px solid rgba(17, 45, 95, .14) !important;
  border-radius: 12px !important;
  color: #112d5f !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Shared heading-to-content rhythm; contact screens are intentionally excluded. */
html body.home-page main > section:not(.context-cta) .section-head,
html body.products-page main.service-overview-main > section:not(.service-final):not(.context-cta) .service-heading,
html body.pdf-product-page main.pdf-product-flow > section.pdf-screen:not(:first-child):not(.pdf-contact-screen) .pdf-screen-head {
  margin-bottom: var(--qn-section-title-gap) !important;
}

html body.pdf-product-page main.pdf-product-flow > section.pdf-screen:not(:first-child):not(.pdf-contact-screen) .pdf-screen-inner {
  padding-top: var(--qn-section-title-top) !important;
}

html body.products-page main.service-overview-main > section.service-hero .service-hero-copy h1 {
  margin-bottom: clamp(30px, 3.5svh, 46px) !important;
  line-height: 1.24 !important;
}

html body.products-page main.service-overview-main > section.service-hero .service-hero-copy p {
  line-height: 1.9 !important;
}

/* Homepage screens four and five use the same light surface as the light navbar. */
html body.home-page main > section.home-story-section,
html body.home-page main + section.context-cta,
html body.home-page section.context-cta {
  background-color: var(--qn-light-page, #f4f7fb) !important;
}

/* Qnbot Exo Plus engineering parameters: exact two-group specification layout. */
html body.exo-page main.pdf-product-flow > #exo-pdf-specs .pdf-spec-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(54px, 7vw, 110px) !important;
}

html body.exo-page main.pdf-product-flow > #exo-pdf-specs .pdf-spec-group > h3 {
  display: block !important;
  margin: 0 0 26px !important;
  color: #112d5f !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;
}

@media (max-width: 820px) {
  html body.about-page .about-foundation-tabs .about-tabs-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  html body.about-page .about-foundation-tabs .about-tab-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.about-page .about-foundation-tabs .about-tab {
    padding: 16px 10px !important;
    border-left: 0 !important;
    border-bottom: 3px solid transparent !important;
    text-align: center !important;
  }

  html body.about-page .about-foundation-tabs .about-tab[aria-selected="true"] {
    border-bottom-color: #14cbd0 !important;
  }

  html body.about-page .about-foundation-tabs .about-tab-panels {
    min-height: 300px !important;
    padding: 34px 26px !important;
  }

  html body.exo-page main.pdf-product-flow > #exo-pdf-specs .pdf-spec-columns {
    grid-template-columns: 1fr !important;
  }
}


/* source: i18n.css */
/* Qnbot bilingual language control */
.language-switcher { position: relative; flex: 0 0 auto; z-index: 140; }
.language-toggle {
  width: 54px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  border: 1px solid rgba(17,45,95,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  color: #112d5f;
  box-shadow: 0 5px 16px rgba(17,45,95,.07);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.language-toggle:hover,
.language-toggle:focus-visible,
.language-toggle[aria-expanded="true"] { background: #fff; border-color: rgba(17,45,95,.35); box-shadow: 0 10px 24px rgba(17,45,95,.13); transform: translateY(-1px); }
.language-current { display: block; font-size: 14px; font-weight: 650; line-height: 1; white-space: nowrap; }
.language-glyph { position: relative; width: 20px; height: 20px; display: none; font-weight: 750; line-height: 1; }
.language-glyph span:first-child { position: absolute; left: 0; top: 0; font-size: 13px; }
.language-glyph span:last-child { position: absolute; right: 0; bottom: 0; font-size: 12px; }
.language-glyph::after { content: ""; position: absolute; left: 4px; top: 10px; width: 13px; height: 1px; background: currentColor; transform: rotate(-45deg); opacity: .8; }
.language-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.language-toggle[aria-expanded="true"] .language-chevron { transform: translateY(2px) rotate(225deg); }
.language-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 224px;
  padding: 10px;
  border: 1px solid rgba(17,45,95,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 55px rgba(17,45,95,.2);
  color: #112d5f;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: language-menu-in .18s ease both;
}
.language-menu[hidden] { display: none !important; }
.language-menu-title { margin: 0; padding: 8px 10px 7px; color: #6c7788; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.language-menu button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: #112d5f; text-align: left; cursor: pointer; }
.language-menu button:hover,
.language-menu button:focus-visible { background: #f0f4f8; }
.language-menu button.is-active { background: #eaf5f7; }
.language-menu button span { display: grid; gap: 4px; }
.language-menu button strong { font-size: 14px; font-weight: 750; }
.language-menu button small { color: #788394; font-size: 12px; }
.language-menu button i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #112d5f; color: #fff; font-size: 12px; font-style: normal; opacity: 0; transform: scale(.7); }
.language-menu button.is-active i { opacity: 1; transform: scale(1); }
html[data-language="en"] body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
html[data-language="en"] .main-nav { gap: clamp(32px,4vw,64px) !important; }
html[data-language="en"] .header-consult-button { padding-inline: 15px; }
@keyframes language-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Preserve the light/dark header behavior already used by the site. */
html body.home-page .site-header:not(.is-scrolled) .language-toggle,
html body.about-page .site-header:not(.is-scrolled) .language-toggle,
html body .site-header:not(.qn-header-light) .language-toggle { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
html body.home-page .site-header:not(.is-scrolled) .language-toggle:hover,
html body.about-page .site-header:not(.is-scrolled) .language-toggle:hover,
html body .site-header:not(.qn-header-light) .language-toggle:hover,
html body .site-header:not(.qn-header-light) .language-toggle[aria-expanded="true"] { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
html body .site-header.qn-header-light .language-toggle,
html body:not(.home-page):not(.about-page) .site-header .language-toggle,
html body.home-page .site-header.is-scrolled .language-toggle,
html body.about-page .site-header.is-scrolled .language-toggle { border-color: rgba(17,45,95,.15); background: rgba(255,255,255,.78); color: #112d5f; box-shadow: 0 5px 16px rgba(17,45,95,.07); }

@media (max-width: 767px) {
  .language-toggle { width: 42px; height: 40px; border-radius: 10px; }
  .language-toggle .language-chevron { display: none; }
  .language-menu { position: fixed; top: 72px; right: 16px; width: min(240px, calc(100vw - 32px)); }
  .header-actions { gap: 6px; }
  html[data-language="en"] .header-consult-button { padding-inline: 10px; font-size: 12px; }
}

@media (max-width: 390px) {
  .header-consult-button { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .language-menu { animation: none; }
}


/* source: qnbot-grid-system.css */
/*
 * Qnbot responsive grid system — 2026-08-13
 * Reference canvas: 1920 × 1080
 * Desktop grid: 12 columns, 1440px content, 24px gutters, 240px outer margins.
 *
 * Breakpoint contract:
 * ≥1920       12 cols / 1440 max / 24 gutter / 240+ margin
 * 1440–1919   12 cols / 24 gutter / 96 fluid side padding
 * 1200–1439   12 cols / 24 gutter / 64 side padding
 * 1024–1199   12 cols / 20 gutter / 48 side padding
 * 768–1023     8 cols / 20 gutter / 32 side padding
 * 480–767      4 cols / 16 gutter / 24 side padding
 * <480         4 cols / 12 gutter / 16 side padding
 *
 * The homepage video hero is intentionally full bleed and never inherits
 * the safe content margins. Its overlay UI may still opt into .container.
 */

:root {
  --qn-canvas-reference-width: 1920px;
  --qn-canvas-reference-height: 1080px;
  --qn-grid-columns: 12;
  --qn-grid-content: 1440px;
  --qn-grid-gutter: 24px;
  --qn-grid-margin: max(240px, calc((100vw - var(--qn-grid-content)) / 2));
  --qn-page-bg: #e8ebf0;
  --qn-container-bg: #ffffff;
  --qn-header-video-bg: #020305;
  --qn-brand: #112d5f;
  --qn-header-video-active: #1586ff;
  --qn-text-on-dark: #ffffff;
  --qn-header-height: 80px;
  --qn-control-height: 48px;
  --container: var(--qn-grid-content);
  --gutter: var(--qn-grid-margin);
  --canvas: var(--qn-page-bg);
  --surface: var(--qn-container-bg);
  --section-surface: var(--qn-container-bg);
}

html,
body { background: var(--qn-page-bg) !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.container,
.story-container,
.service-screen-inner,
.pdf-screen-inner {
  width: min(calc(100% - (2 * var(--qn-grid-margin))), var(--qn-grid-content)) !important;
  max-width: var(--qn-grid-content) !important;
  margin-inline: auto !important;
}

.grid-12,
.section-head,
.hero-grid {
  display: grid;
  grid-template-columns: repeat(var(--qn-grid-columns), minmax(0, 1fr));
  column-gap: var(--qn-grid-gutter);
}

/* Primary canvas/container hierarchy. */
main,
.service-overview-main,
.pdf-product-flow,
.about-narrative { background: var(--qn-page-bg) !important; }

main > .section,
main > .hero:not(.home-video-hero),
main > [class*="section"],
.service-screen,
.pdf-screen,
.contact-hero-redesign,
.contact-form-section,
.about-section { background-color: var(--qn-container-bg) !important; }

main > .section.surface,
main > .surface,
.service-category:nth-child(even),
.pdf-screen:nth-child(even),
.about-section:nth-child(even) { background-color: var(--qn-page-bg) !important; }

/* Header is one 12-column composition: logo + 3 nav items + language + contact. */
html body .site-header,
html body .site-header.is-scrolled,
html body .site-header.qn-header-light,
html body .site-header.qn-header-light.is-scrolled {
  height: var(--qn-header-height) !important;
  background: var(--qn-container-bg) !important;
  border-bottom: 1px solid rgba(17,45,95,.12) !important;
  color: var(--qn-brand) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body .site-header .header-inner {
  width: min(calc(100% - (2 * var(--qn-grid-margin))), var(--qn-grid-content)) !important;
  max-width: var(--qn-grid-content) !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: var(--qn-grid-gutter) !important;
  align-items: center !important;
  margin-inline: auto !important;
}

html body .site-header .brand {
  grid-column: 1 / span 2;
  justify-self: start !important;
}

html body .site-header .brand img {
  width: min(100%, 180px) !important;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

html body .site-header .main-nav {
  grid-column: 4 / span 6;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--qn-grid-gutter) !important;
  min-height: var(--qn-control-height) !important;
}

html body .site-header .main-nav > a,
html body .site-header.is-scrolled .main-nav > a,
html body .site-header.qn-header-light .main-nav > a {
  min-height: var(--qn-control-height) !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--qn-brand) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

html body .site-header .main-nav > a::before,
html body .site-header .main-nav > a::after { display: none !important; }

html body .site-header .main-nav > a:hover,
html body .site-header .main-nav > a:focus-visible { background: rgba(17,45,95,.07) !important; color: var(--qn-brand) !important; }

html body .site-header .main-nav > a.active,
html body .site-header .main-nav > a[aria-current="page"] {
  background: var(--qn-brand) !important;
  color: var(--qn-text-on-dark) !important;
}

html body .site-header .header-actions {
  grid-column: 10 / span 3;
  justify-self: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(72px, .9fr) minmax(92px, 1.1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

html body[class][class] header.site-header .header-actions,
html body[class][class] header.site-header.is-scrolled .header-actions,
html body[class][class] header.site-header.qn-header-light .header-actions,
html body header.site-header .header-actions,
html body header.site-header.is-scrolled .header-actions,
html body header.site-header.qn-header-light .header-actions {
  display: grid !important;
  grid-template-columns: minmax(72px, .9fr) minmax(92px, 1.1fr) !important;
}

html body .site-header .language-switcher { width: 100%; }
html body .site-header .language-toggle,
html body .site-header .header-consult-button {
  width: 100% !important;
  min-height: var(--qn-control-height) !important;
  border: 1px solid var(--qn-brand) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--qn-brand) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .site-header .language-toggle:hover,
html body .site-header .language-toggle:focus-visible,
html body .site-header .language-toggle[aria-expanded="true"],
html body .site-header .header-consult-button:hover,
html body .site-header .header-consult-button:focus-visible {
  background: var(--qn-brand) !important;
  color: var(--qn-text-on-dark) !important;
}

/* Immersive homepage header: independently themeable through --qn-header-video-bg. */
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) {
  background: var(--qn-header-video-bg) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: var(--qn-text-on-dark) !important;
}

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .brand img { filter: brightness(0) invert(1) !important; }

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a {
  background: transparent !important;
  color: var(--qn-text-on-dark) !important;
}

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a:hover,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a:focus-visible { background: rgba(255,255,255,.1) !important; }

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
  background: var(--qn-header-video-active) !important;
  color: var(--qn-text-on-dark) !important;
}

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button {
  border-color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  color: var(--qn-text-on-dark) !important;
}

html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle:hover,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle:focus-visible,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle[aria-expanded="true"],
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button:hover,
html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button:focus-visible {
  border-color: var(--qn-header-video-active) !important;
  background: var(--qn-header-video-active) !important;
  color: var(--qn-text-on-dark) !important;
}

/* The first video screen remains true full bleed. */
html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  width: 100vw !important;
  max-width: none !important;
  background: var(--qn-header-video-bg) !important;
}

html body.home-page .home-video-hero { margin-inline: calc(50% - 50vw) !important; }
html body.home-page .home-video-stage { margin-inline: 0 !important; }

html body.home-page .home-video-hero {
  height: calc(100svh - var(--qn-header-height)) !important;
  min-height: calc(100svh - var(--qn-header-height)) !important;
}

html body.home-page .home-video-stage video { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Keep dropdown elevation aligned with the TDesign DropdownMenu token. */
html body .language-menu {
  border-radius: 12px;
  box-shadow: 0 3px 14px 2px rgba(0,0,0,.05), 0 8px 10px 1px rgba(0,0,0,.06), 0 5px 5px -3px rgba(0,0,0,.10);
}

@media (max-width: 1919px) {
  :root { --qn-grid-margin: 96px; }
}

@media (max-width: 1439px) {
  :root { --qn-grid-margin: 64px; }
}

@media (max-width: 1199px) {
  :root { --qn-grid-margin: 48px; --qn-grid-gutter: 20px; }
  html body .site-header .brand { grid-column: 1 / span 2; }
  html body .site-header .main-nav { grid-column: 3 / span 7; }
  html body .site-header .header-actions { grid-column: 10 / span 3; }
}

@media (max-width: 1023px) {
  :root { --qn-grid-columns: 8; --qn-grid-margin: 32px; --qn-grid-gutter: 20px; --qn-header-height: 72px; }

  html body .site-header .header-inner {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  html body .site-header .brand { grid-column: 1 / span 2; }
  html body .site-header .main-nav {
    grid-column: 3 / span 4;
    gap: 12px !important;
  }
  html body .site-header .header-actions {
    grid-column: 7 / span 2;
    grid-template-columns: 48px minmax(76px, 1fr) !important;
    gap: 8px !important;
  }
  html body[class][class] header.site-header .header-actions,
  html body[class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class] header.site-header.qn-header-light .header-actions,
  html body header.site-header .header-actions {
    grid-template-columns: 48px minmax(76px, 1fr) !important;
  }
  html body .site-header .main-nav > a { padding-inline: 8px !important; font-size: 13px !important; }
  html body .site-header .language-toggle { min-width: 48px !important; padding-inline: 0 !important; }
  html body .site-header .header-consult-button { padding-inline: 10px !important; font-size: 13px !important; }
}

@media (max-width: 767px) {
  :root { --qn-grid-columns: 4; --qn-grid-margin: 24px; --qn-grid-gutter: 16px; --qn-header-height: 64px; }

  html body .site-header .header-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    display: grid !important;
  }
  html body .site-header .brand { grid-column: 1 / span 2; }
  html body .site-header .brand img { width: 124px !important; }
  html body .site-header .header-actions {
    grid-column: 3 / span 2;
    display: flex !important;
    justify-content: flex-end !important;
  }
  html body[class][class] header.site-header .header-actions,
  html body[class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class] header.site-header.qn-header-light .header-actions,
  html body header.site-header .header-actions { display: flex !important; }
  html body .site-header .language-switcher { width: auto; }
  html body .site-header .language-toggle { width: 44px !important; min-height: 44px !important; }
  html body .site-header .header-consult-button { width: auto !important; min-height: 44px !important; }
  html body .site-header .menu-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; display: inline-grid !important; }

  html body .site-header .main-nav,
  html body .site-header.qn-header-light .main-nav,
  html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav {
    position: fixed !important;
    inset: var(--qn-header-height) 0 auto !important;
    width: 100% !important;
    height: calc(100dvh - var(--qn-header-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 24px var(--qn-grid-margin) !important;
    background: var(--qn-container-bg) !important;
  }
  html body .site-header .main-nav > a,
  html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a {
    min-height: 56px !important;
    justify-content: flex-start !important;
    padding-inline: 18px !important;
    border-radius: 12px !important;
    color: var(--qn-brand) !important;
    font-size: 16px !important;
  }
  html body .site-header .main-nav > a.active,
  html body .site-header .main-nav > a[aria-current="page"],
  html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
  html body.home-page .site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
    background: var(--qn-brand) !important;
    color: var(--qn-text-on-dark) !important;
  }
  .language-menu { top: calc(var(--qn-header-height) + 8px) !important; }
}

@media (max-width: 479px) {
  :root { --qn-grid-margin: 16px; --qn-grid-gutter: 12px; }
  html body .site-header .brand img { width: 112px !important; }
  html body .site-header .header-consult-button { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header *,
  html body .language-menu { transition: none !important; animation: none !important; }
}

/* Final state lock: outrank legacy refinement layers without editing them. */
html body[class][class]:not(.home-page) header.site-header,
html body[class][class]:not(.home-page) header.site-header.is-scrolled,
html body[class][class]:not(.home-page) header.site-header.qn-header-light,
html body[class][class]:not(.home-page) header.site-header.qn-header-light.is-scrolled,
html body[class][class].home-page header.site-header.qn-header-light,
html body[class][class].home-page header.site-header.is-scrolled {
  background: var(--qn-container-bg) !important;
  border-bottom-color: rgba(17,45,95,.12) !important;
  color: var(--qn-brand) !important;
  box-shadow: none !important;
}

html body[class][class].about-page header.site-header,
html body[class][class].about-page header.site-header:not(.is-scrolled),
html body[class][class].about-page header.site-header:not(.qn-header-light) {
  background: var(--qn-container-bg) !important;
  border-bottom: 1px solid rgba(17,45,95,.12) !important;
  color: var(--qn-brand) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[class][class]:not(.home-page) header.site-header .brand img,
html body[class][class].home-page header.site-header.qn-header-light .brand img,
html body[class][class].home-page header.site-header.is-scrolled .brand img { filter: none !important; }

html body[class][class].about-page header.site-header .brand img { filter: none !important; }

html body[class][class]:not(.home-page) header.site-header .main-nav > a,
html body[class][class].home-page header.site-header.qn-header-light .main-nav > a,
html body[class][class].home-page header.site-header.is-scrolled .main-nav > a {
  background: transparent !important;
  color: var(--qn-brand) !important;
}

html body[class][class].about-page header.site-header .main-nav > a { background: transparent !important; color: var(--qn-brand) !important; text-shadow: none !important; }

html body[class][class].about-page header.site-header:not(.qn-header-light) .main-nav > a,
html body[class][class].about-page header.site-header:not(.is-scrolled) .main-nav > a { color: var(--qn-brand) !important; text-shadow: none !important; }

html body[class][class]:not(.home-page) header.site-header .main-nav > a:hover,
html body[class][class]:not(.home-page) header.site-header .main-nav > a:focus-visible,
html body[class][class].home-page header.site-header.qn-header-light .main-nav > a:hover,
html body[class][class].home-page header.site-header.qn-header-light .main-nav > a:focus-visible,
html body[class][class].home-page header.site-header.is-scrolled .main-nav > a:hover,
html body[class][class].home-page header.site-header.is-scrolled .main-nav > a:focus-visible { background: rgba(17,45,95,.07) !important; color: var(--qn-brand) !important; }

html body[class][class]:not(.home-page) header.site-header .main-nav > a.active,
html body[class][class]:not(.home-page) header.site-header .main-nav > a[aria-current="page"],
html body[class][class].home-page header.site-header.qn-header-light .main-nav > a.active,
html body[class][class].home-page header.site-header.qn-header-light .main-nav > a[aria-current="page"],
html body[class][class].home-page header.site-header.is-scrolled .main-nav > a.active,
html body[class][class].home-page header.site-header.is-scrolled .main-nav > a[aria-current="page"] {
  background: var(--qn-brand) !important;
  color: var(--qn-text-on-dark) !important;
}

html body[class][class]:not(.home-page) header.site-header .language-toggle,
html body[class][class]:not(.home-page) header.site-header .header-consult-button,
html body[class][class].home-page header.site-header.qn-header-light .language-toggle,
html body[class][class].home-page header.site-header.qn-header-light .header-consult-button,
html body[class][class].home-page header.site-header.is-scrolled .language-toggle,
html body[class][class].home-page header.site-header.is-scrolled .header-consult-button {
  border-color: var(--qn-brand) !important;
  background: transparent !important;
  color: var(--qn-brand) !important;
}

html body[class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) {
  background: var(--qn-header-video-bg) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: var(--qn-text-on-dark) !important;
}

html body[class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
html body[class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
  background: var(--qn-header-video-active) !important;
  color: var(--qn-text-on-dark) !important;
}

@media (min-width: 768px) {
  html body[class][class] header.site-header .main-nav,
  html body[class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class] header.site-header.qn-header-light .main-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* High-specificity exceptions for legacy immersive/product hero selectors. */
@media (min-width: 1024px) {
  html body[class][class][class].home-page header.site-header .main-nav,
  html body[class][class][class].home-page header.site-header.is-scrolled .main-nav,
  html body[class][class][class].about-page header.site-header .main-nav,
  html body[class][class][class].about-page header.site-header.is-scrolled .main-nav {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body[class][class][class].home-page header.site-header .main-nav > a,
  html body[class][class][class].home-page header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class].home-page header.site-header .language-toggle,
  html body[class][class][class].home-page header.site-header.is-scrolled .language-toggle,
  html body[class][class][class].home-page header.site-header .header-consult-button,
  html body[class][class][class].home-page header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class].about-page header.site-header .main-nav > a,
  html body[class][class][class].about-page header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class].about-page header.site-header .language-toggle,
  html body[class][class][class].about-page header.site-header.is-scrolled .language-toggle,
  html body[class][class][class].about-page header.site-header .header-consult-button,
  html body[class][class][class].about-page header.site-header.is-scrolled .header-consult-button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding-block: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

html body[class][class][class].pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid {
  background: var(--qn-surface) !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-section) !important;
  box-shadow: var(--qn-shadow-card) !important;
}

html body[class][class][class].pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  background: var(--qn-surface-media) !important;
  border-radius: var(--qn-radius-card) !important;
}

@media (max-width: 479px) {
  html body[class][class][class] header.site-header .header-inner {
    grid-template-columns: 112px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  html body[class][class][class] header.site-header .brand,
  html body[class][class][class] header.site-header .brand img {
    width: 112px !important;
    max-width: 112px !important;
  }

  html body[class][class][class] header.site-header .header-actions {
    width: 120px !important;
    min-width: 120px !important;
    grid-template-columns: 68px 44px !important;
    gap: 8px !important;
  }

  html body[class][class][class] header.site-header .header-consult-button {
    display: none !important;
  }

  html body[class][class][class] header.site-header .language-toggle {
    width: 68px !important;
    min-width: 68px !important;
    padding-inline: 8px !important;
  }

  html body[class][class][class] header.site-header .menu-toggle {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  html body[class][class][class]:not(.home-page) header.site-header .menu-toggle,
  html body[class][class][class].home-page header.site-header.qn-header-light .menu-toggle,
  html body[class][class][class].home-page header.site-header.is-scrolled .menu-toggle {
    color: var(--qn-ink) !important;
    background: var(--qn-surface) !important;
    border-color: var(--qn-border-strong) !important;
  }

  html body[class][class][class]:not(.home-page) header.site-header .menu-lines,
  html body[class][class][class]:not(.home-page) header.site-header .menu-lines::before,
  html body[class][class][class]:not(.home-page) header.site-header .menu-lines::after,
  html body[class][class][class].home-page header.site-header.qn-header-light .menu-lines,
  html body[class][class][class].home-page header.site-header.qn-header-light .menu-lines::before,
  html body[class][class][class].home-page header.site-header.qn-header-light .menu-lines::after,
  html body[class][class][class].home-page header.site-header.is-scrolled .menu-lines,
  html body[class][class][class].home-page header.site-header.is-scrolled .menu-lines::before,
  html body[class][class][class].home-page header.site-header.is-scrolled .menu-lines::after {
    background: var(--qn-ink) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html body.products-page,
  html body.pdf-product-page,
  html body.teleop-page,
  html body.data-page {
    --qn-header-row: var(--qn-header-height);
    --qn-subnav-row: 52px;
    --qn-product-nav-stack: calc(var(--qn-header-height) + var(--qn-subnav-row));
  }

  html body[class][class] header.site-header .header-inner,
  html body[class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: var(--qn-header-height) !important;
  }

  html body[class][class] header.site-header + nav.subnav,
  html body[class][class] header.site-header.is-scrolled + nav.subnav,
  html body[class][class] header.site-header.qn-header-light + nav.subnav,
  html body[class][class] header.site-header.qn-header-light.is-scrolled + nav.subnav {
    inset: var(--qn-header-height) 0 auto !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-08-14 unified UI system
 *
 * This is the single final contract for structural surfaces, navigation
 * geometry, typography and vertical rhythm.  The legacy stylesheets remain as
 * component sources, while this block normalises their public visual API.
 * ----------------------------------------------------------------------- */
:root {
  --qn-canvas: #e8ebf0;
  --qn-surface: #ffffff;
  --qn-surface-subtle: #f5f7fa;
  --qn-surface-media: #eef2f7;
  --qn-ink: #112d5f;
  --qn-ink-body: #33445e;
  --qn-ink-muted: #66758a;
  --qn-border: rgba(17, 45, 95, .12);
  --qn-border-strong: rgba(17, 45, 95, .22);
  --qn-accent: #1586ff;
  --qn-radius-control: 12px;
  --qn-radius-card: 20px;
  --qn-radius-section: 28px;
  --qn-shadow-card: 0 16px 42px rgba(17, 45, 95, .07);
  --qn-shadow-overlay: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, .06), 0 5px 5px -3px rgba(0, 0, 0, .10);
  --qn-section-space: clamp(72px, 7.5vw, 112px);
  --qn-section-gap: clamp(28px, 3vw, 44px);
}

html,
html body[class],
html body[class] main,
html body[class] .service-overview-main,
html body[class] .pdf-product-flow,
html body[class] .about-narrative {
  background: var(--qn-canvas) !important;
  color: var(--qn-ink-body) !important;
}

/* Stable navigation geometry: every state uses the same external box. */
@media (min-width: 1024px) {
  html body[class][class][class] header.site-header,
  html body[class][class][class] header.site-header.is-scrolled,
  html body[class][class][class] header.site-header.qn-header-light,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled {
    height: 72px !important;
    min-height: 72px !important;
  }

  html body[class][class][class] header.site-header .header-inner,
  html body[class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 72px !important;
    min-height: 72px !important;
    grid-template-columns: 180px minmax(0, 1fr) 184px !important;
    column-gap: 48px !important;
  }

  html body[class][class][class] header.site-header .main-nav,
  html body[class][class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    width: 408px !important;
    min-width: 408px !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 48px !important;
  }

  html body[class][class][class] header.site-header .main-nav > a,
  html body[class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a,
  html body[class][class][class] header.site-header .language-toggle,
  html body[class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class][class] header.site-header .header-consult-button,
  html body[class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    border-width: 1px !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
  }

  html body[class][class][class] header.site-header .header-actions,
  html body[class][class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class][class] header.site-header.qn-header-light .header-actions,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-actions {
    width: 184px !important;
    min-width: 184px !important;
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: 76px 96px !important;
    gap: 12px !important;
    align-items: center !important;
  }
}

html body[class] header.site-header,
html body[class] nav.subnav,
html body[class] footer.footer,
html body[class] .language-menu {
  background-color: var(--qn-surface) !important;
}

html body[class] .language-menu {
  border: 1px solid var(--qn-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--qn-shadow-overlay) !important;
}

/* Bounded white surfaces on the grey page canvas. */
html body[class] main > section:not(.home-video-hero),
html body[class] .service-screen,
html body[class] .pdf-screen,
html body[class] .about-section,
html body[class] .contact-hero-redesign,
html body[class] .contact-form-section,
html body[class] .context-cta {
  background: transparent !important;
  border: 0 !important;
}

html body[class] main > section:not(.home-video-hero) > .container,
html body[class] .service-screen > .container,
html body[class] .service-screen > .service-screen-inner,
html body[class] .pdf-screen > .pdf-screen-inner,
html body[class] .about-narrative-hero > .story-container,
html body[class] .about-section > .story-container,
html body[class] .contact-hero-redesign > .container,
html body[class] .contact-form-section > .container,
html body[class] .context-cta > .container {
  background: var(--qn-surface) !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-section) !important;
  box-shadow: var(--qn-shadow-card) !important;
}

html body[class] main > section:not(.home-video-hero),
html body[class] .service-screen,
html body[class] .pdf-screen,
html body[class] .about-section,
html body[class] .contact-hero-redesign,
html body[class] .contact-form-section {
  min-height: 0 !important;
  height: auto !important;
  padding-block: var(--qn-section-gap) !important;
}

html body[class] main > section:not(.home-video-hero) > .container,
html body[class] .service-screen > .container,
html body[class] .service-screen > .service-screen-inner,
html body[class] .pdf-screen > .pdf-screen-inner,
html body[class] .about-narrative-hero > .story-container,
html body[class] .about-section > .story-container {
  min-height: 0 !important;
  padding: var(--qn-section-space) clamp(48px, 5vw, 80px) !important;
}

/* Page and section type scale: maintain hierarchy without repeating 60px titles. */
html body[class] main h1,
html body[class] .pdf-hero-copy h1 {
  font-size: clamp(42px, 3.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  color: var(--qn-ink) !important;
}

html body[class] main h2,
html body[class] .context-cta h2,
html body[class] .service-screen h2,
html body[class] .pdf-screen h2 {
  font-size: clamp(32px, 2.8vw, 46px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  color: var(--qn-ink) !important;
}

html body[class] main h3,
html body[class] .service-card h3,
html body[class] .pdf-screen h3 {
  color: var(--qn-ink) !important;
}

html body[class] main p,
html body[class] main li,
html body[class] main dt,
html body[class] main dd {
  color: var(--qn-ink-body) !important;
}

html body[class] main .copy,
html body[class] main .lead,
html body[class] main .about-body {
  max-width: 760px !important;
  line-height: 1.75 !important;
}

html body[class] .section-head,
html body[class] .pdf-screen-head,
html body[class] .module-carousel-head {
  margin-bottom: clamp(32px, 4vw, 56px) !important;
}

/* Homepage: preserve full-bleed media, remove the dark-start flash and tighten content. */
html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: #020305 !important;
  background-image: url("../assets/home-video-poster.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

html body.home-page .home-video-stage video {
  opacity: 1;
  transition: opacity 500ms ease !important;
}

html body.home-page .home-video-stage.is-enhanced video { opacity: 0 !important; }
html body.home-page .home-video-stage.is-enhanced.is-visual-ready video { opacity: 1 !important; }

html body.home-page .home-intro-section > .container {
  min-height: clamp(430px, 56svh, 560px) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

html body.home-page .home-intro-grid .hero-copy,
html body.home-page .home-intro-grid .lead {
  max-width: 1050px !important;
  margin-inline: auto !important;
}

html body.home-page .compact-section > .container,
html body.home-page .home-story-section > .container {
  padding-block: clamp(64px, 7vw, 96px) !important;
}

html body.home-page .compact-section .image-card {
  min-height: 0 !important;
  grid-template-rows: 260px auto !important;
  overflow: hidden !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  box-shadow: none !important;
}

html body.home-page .compact-section .image-card > img {
  width: 100% !important;
  height: 260px !important;
  padding: 28px !important;
  object-fit: contain !important;
  background: var(--qn-surface-media) !important;
  mix-blend-mode: multiply !important;
}

html body.home-page .compact-section .image-card > div { padding: 28px !important; }

html body.home-page .story-board article,
html body.teleop-page .teleop-boundary-grid article {
  min-height: 0 !important;
  padding: 28px !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface-subtle) !important;
  box-shadow: none !important;
}

/* Product overview: same media stage, same visual scale. */
html body.products-page .service-screen > .service-screen-inner,
html body.products-page .service-screen > .container {
  min-height: 0 !important;
}

html body.products-page .service-hero > .service-screen-inner {
  min-height: clamp(500px, 65svh, 650px) !important;
  display: grid !important;
  place-items: center !important;
}

html body.products-page .service-card {
  overflow: hidden !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface) !important;
  box-shadow: none !important;
}

html body.products-page .service-card-media {
  height: 300px !important;
  min-height: 300px !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  background: var(--qn-surface-media) !important;
}

html body.products-page .service-card-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 520px !important;
  object-fit: contain !important;
}

html body.products-page .service-card-copy { padding: 32px !important; }

/* Product detail pages: bounded hero, transparent cutouts and compact spec rhythm. */
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner {
  min-height: clamp(600px, 76svh, 740px) !important;
}

html body.pdf-product-page .pdf-hero-visual,
html body.pdf-product-page .pdf-gallery-main,
html body.pdf-product-page .delivery-media,
html body.pdf-product-page .module-carousel-viewport {
  background: var(--qn-surface-media) !important;
  border-radius: var(--qn-radius-card) !important;
}

html body.pdf-product-page .pdf-hero-visual img,
html body.pdf-product-page .pdf-gallery-main img,
html body.pdf-product-page .delivery-media img,
html body.pdf-product-page .module-carousel-slide > img {
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

html body.pdf-product-page .product-feature-screen > .pdf-screen-inner,
html body.pdf-product-page .glove-hardware-screen > .pdf-screen-inner,
html body.pdf-product-page .exo-hardware-screen > .pdf-screen-inner {
  min-height: clamp(620px, 78svh, 760px) !important;
}

html body.pdf-product-page .pdf-spec-columns,
html body.pdf-product-page .product-delivery-stack {
  gap: 24px !important;
}

html body.pdf-product-page .pdf-spec-group,
html body.pdf-product-page .delivery-panel {
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface-subtle) !important;
  box-shadow: none !important;
}

html body.pdf-product-page .delivery-panel {
  min-height: 0 !important;
  padding: 24px !important;
}

html body.pdf-product-page .glove-bundle-screen > .pdf-screen-inner,
html body.pdf-product-page .exo-bundle-screen > .pdf-screen-inner {
  padding-block: clamp(64px, 7vw, 96px) !important;
}

/* About: connect the bilingual slogan and strengthen tab discoverability. */
html body.about-page .about-narrative-hero > .story-container {
  min-height: clamp(500px, 64svh, 620px) !important;
}

html body.about-page .about-company-combined > .story-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr) !important;
  gap: clamp(48px, 6vw, 88px) !important;
  align-items: center !important;
}

html body.about-page .about-combined-slogan {
  align-self: center !important;
  padding: 32px !important;
  border-left: 3px solid var(--qn-accent) !important;
  border-radius: 0 var(--qn-radius-card) var(--qn-radius-card) 0 !important;
  background: var(--qn-surface-subtle) !important;
  text-align: left !important;
}

html body.about-page .about-combined-slogan h2 {
  font-size: clamp(28px, 2.4vw, 38px) !important;
}

html body.about-page .about-combined-slogan p {
  margin-top: 12px !important;
  color: var(--qn-ink-muted) !important;
}

html body.about-page .about-foundation-tabs > .story-container {
  min-height: 500px !important;
}

html body.about-page .about-tab {
  color: rgba(17, 45, 95, .72) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  border-radius: 12px !important;
}

html body.about-page .about-tab:hover,
html body.about-page .about-tab:focus-visible {
  color: var(--qn-ink) !important;
  background: rgba(17, 45, 95, .06) !important;
}

html body.about-page .about-tab.is-active,
html body.about-page .about-tab[aria-selected="true"] {
  color: #fff !important;
  background: var(--qn-ink) !important;
}

html body.about-page .about-tab-panel {
  padding: clamp(36px, 5vw, 64px) !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface-subtle) !important;
}

/* Software and data pages: compact heroes and consistent console media. */
html body.teleop-page .teleop-hero > .hero-grid,
html body.data-page .data-platform-hero > .hero-grid {
  min-height: clamp(560px, 72svh, 700px) !important;
}

html body.teleop-page .metric-section > .container,
html body.data-page #data-chain > .container {
  padding-block: clamp(56px, 6vw, 80px) !important;
}

html body.teleop-page .teleop-capability-card,
html body.data-page .data-capability-card,
html body.exo-page .exo-capability-card,
html body.exo-page .exo-spec-card {
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface-subtle) !important;
  box-shadow: none !important;
}

/* Contact and CTA: retain task clarity without a 1300px empty section. */
html body.contact-page .contact-hero-redesign > .container {
  min-height: clamp(560px, 72svh, 700px) !important;
}

html body.contact-page .contact-form-section > .contact-layout {
  padding-block: clamp(64px, 7vw, 96px) !important;
  align-items: start !important;
}

html body.contact-page .contact-direct-card,
html body.contact-page .topic-panel,
html body.contact-page .form-card {
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  background: var(--qn-surface) !important;
  box-shadow: none !important;
}

html body.contact-page input,
html body.contact-page select,
html body.contact-page textarea {
  background: var(--qn-surface-subtle) !important;
  border-color: var(--qn-border-strong) !important;
}

html body[class] .context-cta {
  padding: var(--qn-section-gap) 0 !important;
}

html body[class] .context-cta > .container,
html body[class] .unified-contact-cta > .pdf-screen-inner {
  min-height: 0 !important;
  padding: clamp(48px, 5vw, 72px) !important;
}

html body[class] .context-cta .cta-inner,
html body[class] .unified-contact-cta .pdf-contact-grid {
  align-items: center !important;
}

@media (max-width: 1023px) {
  :root { --qn-section-space: clamp(48px, 7vw, 72px); }

  html body[class] main > section:not(.home-video-hero) > .container,
  html body[class] .service-screen > .container,
  html body[class] .service-screen > .service-screen-inner,
  html body[class] .pdf-screen > .pdf-screen-inner,
  html body[class] .about-narrative-hero > .story-container,
  html body[class] .about-section > .story-container {
    border-radius: 22px !important;
    padding-inline: 32px !important;
  }

  html body.about-page .about-company-combined > .story-container {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  :root {
    --qn-section-space: 40px;
    --qn-section-gap: 16px;
    --qn-radius-section: 18px;
  }

  html body[class] main > section:not(.home-video-hero) > .container,
  html body[class] .service-screen > .container,
  html body[class] .service-screen > .service-screen-inner,
  html body[class] .pdf-screen > .pdf-screen-inner,
  html body[class] .about-narrative-hero > .story-container,
  html body[class] .about-section > .story-container,
  html body[class] .contact-hero-redesign > .container,
  html body[class] .contact-form-section > .container,
  html body[class] .context-cta > .container {
    padding: 40px 20px !important;
    border-radius: 18px !important;
  }

  html body[class] main h1,
  html body[class] .pdf-hero-copy h1 { font-size: clamp(34px, 10vw, 44px) !important; }

  html body[class] main h2,
  html body[class] .context-cta h2,
  html body[class] .service-screen h2,
  html body[class] .pdf-screen h2 { font-size: clamp(28px, 8vw, 36px) !important; }

  html body.home-page .compact-section .image-card { grid-template-rows: 220px auto !important; }
  html body.home-page .compact-section .image-card > img { height: 220px !important; }

  html body.products-page .service-card-media {
    height: 240px !important;
    min-height: 240px !important;
  }

  html body.about-page .about-combined-slogan { padding: 24px !important; }
  html body.about-page .about-foundation-tabs > .story-container { min-height: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .home-video-stage video { transition: none !important; }
  html body[class] .motion-panel,
  html body[class] [data-motion-panel],
  html body[class] .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-08-13 UI detail pass
 * Compact navigation, divider-free surfaces, one light content theme and a
 * hard 1440px content boundary. The homepage video remains the sole dark,
 * full-bleed content surface.
 * ----------------------------------------------------------------------- */

:root {
  --qn-nav-control-height: 42px;
  --qn-nav-item-width: 104px;
  --qn-nav-language-width: 76px;
  --qn-nav-contact-width: 96px;
  --qn-content-text: #112d5f;
  --qn-content-muted: #535d6d;
}

/* 1. Return desktop navigation controls to the compact original proportions. */
@media (min-width: 1024px) {
  html body header.site-header .main-nav,
  html body[class][class] header.site-header .main-nav,
  html body[class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class] header.site-header.qn-header-light .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(32px, 3.4vw, 64px) !important;
  }

  html body header.site-header .main-nav > a,
  html body[class][class] header.site-header .main-nav > a {
    flex: 0 0 var(--qn-nav-item-width) !important;
    width: var(--qn-nav-item-width) !important;
    min-width: var(--qn-nav-item-width) !important;
    min-height: var(--qn-nav-control-height) !important;
    height: var(--qn-nav-control-height) !important;
    padding-inline: 12px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  html body header.site-header .header-actions,
  html body[class][class] header.site-header .header-actions,
  html body[class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class] header.site-header.qn-header-light .header-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  html body header.site-header .language-switcher { width: var(--qn-nav-language-width) !important; }

  html body header.site-header .language-toggle {
    width: var(--qn-nav-language-width) !important;
    min-width: var(--qn-nav-language-width) !important;
    min-height: var(--qn-nav-control-height) !important;
    height: var(--qn-nav-control-height) !important;
    padding-inline: 12px !important;
    border-radius: 9px !important;
  }

  html body header.site-header .header-consult-button {
    flex: 0 0 var(--qn-nav-contact-width) !important;
    width: var(--qn-nav-contact-width) !important;
    min-width: var(--qn-nav-contact-width) !important;
    min-height: var(--qn-nav-control-height) !important;
    height: var(--qn-nav-control-height) !important;
    padding-inline: 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
  }
}

/* 2. Remove structural dividers. Control and card outlines remain functional. */
html body header.site-header,
html body header.site-header.is-scrolled,
html body header.site-header.qn-header-light,
html body nav.subnav,
html body nav.subnav.is-scrolled,
html body main > section,
html body .section,
html body .hero,
html body .service-screen,
html body .pdf-screen,
html body .about-section,
html body .contact-hero-redesign,
html body .contact-form-section,
html body .cta,
html body footer.footer,
html body .footer-simple-bottom,
html body .section-head,
html body .about-combined-slogan,
html body .about-tabs-layout,
html body .about-tab-list {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body hr,
html body .divider,
html body [class*="divider"],
html body .proof-band::before,
html body .proof-band::after { display: none !important; }

/* 3. Every content surface except the homepage video uses the light palette. */
html body:not(.home-page),
html body:not(.home-page) main,
html body.home-page main > section:not(.home-video-hero),
html body:not(.home-page) main > section,
html body:not(.home-page) .service-overview-main,
html body:not(.home-page) .service-screen,
html body:not(.home-page) .pdf-product-flow,
html body:not(.home-page) .pdf-screen,
html body:not(.home-page) .about-narrative,
html body:not(.home-page) .about-narrative-hero,
html body:not(.home-page) .about-section,
html body:not(.home-page) .teleop-hero,
html body:not(.home-page) .data-platform-hero,
html body:not(.home-page) .proof-band,
html body .footer,
html body .footer-simple-main,
html body .footer-simple-bottom {
  background-color: var(--qn-container-bg) !important;
  background-image: none !important;
  color: var(--qn-content-text) !important;
}

html body.home-page main > section:not(.home-video-hero):nth-child(even),
html body:not(.home-page) main > section:nth-child(even),
html body:not(.home-page) .service-screen:nth-child(even),
html body:not(.home-page) .pdf-screen:nth-child(even),
html body:not(.home-page) .about-section:nth-child(even) {
  background-color: var(--qn-page-bg) !important;
}

html body:not(.home-page) main h1,
html body:not(.home-page) main h2,
html body:not(.home-page) main h3,
html body:not(.home-page) main h4,
html body:not(.home-page) main strong,
html body:not(.home-page) main dt,
html body:not(.home-page) .eyebrow,
html body:not(.home-page) .product-name,
html body:not(.home-page) .pdf-feature-title,
html body:not(.home-page) .footer h3,
html body:not(.home-page) .footer strong,
html body .footer h3,
html body .footer strong {
  color: var(--qn-content-text) !important;
  text-shadow: none !important;
}

html body:not(.home-page) main p,
html body:not(.home-page) main li,
html body:not(.home-page) main dd,
html body:not(.home-page) main small,
html body:not(.home-page) main .copy,
html body:not(.home-page) main .lead,
html body:not(.home-page) main .section-intro,
html body .footer,
html body .footer p,
html body .footer a,
html body .footer span {
  color: var(--qn-content-muted) !important;
  text-shadow: none !important;
}

html body .footer-brand img { filter: none !important; content: url("../assets/qnbot-logo-black.png"); }

/* Previously dark first screens and media stages. */
html body.products-page .service-hero,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-screen-inner,
html body.pdf-product-page .pdf-hero-visual,
html body.teleop-page .teleop-hero,
html body.data-page .data-platform-hero,
html body.about-page .about-narrative-hero,
html body.about-page .about-narrative,
html body .exo-hardware-screen,
html body .exo-hardware-screen .pdf-screen-inner,
html body .glove-hardware-screen,
html body .glove-hardware-screen .pdf-screen-inner,
html body .module-carousel-viewport,
html body .module-carousel-slide,
html body .collection-modes-section,
html body .showcase-stage,
html body .showcase-slide,
html body .pdf-contact-screen {
  background-color: var(--qn-container-bg) !important;
  background-image: none !important;
  color: var(--qn-content-text) !important;
}

html body.pdf-product-page .pdf-hero-copy,
html body.pdf-product-page .pdf-hero-copy .lead,
html body.pdf-product-page .pdf-hero-copy .copy,
html body .module-slide-copy,
html body .module-slide-copy h2,
html body .module-slide-copy h3,
html body .module-slide-copy p,
html body .module-slide-copy li,
html body .pdf-contact-grid h2,
html body .pdf-contact-grid p,
html body.about-page .about-hero-copy h1,
html body.about-page .about-hero-copy p {
  color: var(--qn-content-text) !important;
  text-shadow: none !important;
}

html body.pdf-product-page .pdf-product-tags span,
html body.pdf-product-page .pdf-hero-copy .button.secondary,
html body .module-slide-copy li {
  border-color: rgba(17,45,95,.24) !important;
  background: rgba(17,45,95,.04) !important;
  color: var(--qn-content-text) !important;
  backdrop-filter: none !important;
}

html body.pdf-product-page .pdf-hero-visual,
html body .teleop-window,
html body .teleop-capability-image,
html body .data-capability-image {
  background-color: var(--qn-page-bg) !important;
  background-image: none !important;
}

html body.about-page .about-symbol {
  filter: brightness(0) saturate(100%) !important;
  opacity: .08 !important;
}

/* 4. Enforce a single 1440px safe content boundary everywhere but home video. */
html body .container,
html body .story-container,
html body .service-screen-inner,
html body .pdf-screen-inner,
html body .service-hero-grid,
html body .product-delivery-stack,
html body .teleop-hero > .hero-grid,
html body .data-platform-hero > .hero-grid,
html body .about-narrative > section > .story-container,
html body .contact-hero-grid,
html body .contact-layout,
html body .cta-inner {
  width: min(calc(100% - (2 * var(--qn-grid-margin))), var(--qn-grid-content)) !important;
  max-width: var(--qn-grid-content) !important;
  margin-inline: auto !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-screen-inner,
html body.pdf-product-page .glove-bundle-screen .pdf-screen-inner,
html body.pdf-product-page .exo-bundle-screen .pdf-screen-inner,
html body.pdf-product-page .glove-bundle-screen .product-delivery-stack,
html body.pdf-product-page .exo-bundle-screen .product-delivery-stack {
  width: min(calc(100% - (2 * var(--qn-grid-margin))), var(--qn-grid-content)) !important;
  max-width: var(--qn-grid-content) !important;
  margin-inline: auto !important;
}

/* The homepage video is the explicit exception to both rules 3 and 4. */
html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  width: 100vw !important;
  max-width: none !important;
  background-color: var(--qn-header-video-bg) !important;
  color: #fff !important;
}

@media (max-width: 1023px) {
  :root {
    --qn-nav-control-height: 40px;
    --qn-nav-item-width: auto;
  }
}

/* Final cascade lock: retire legacy full-bleed dark software/product openings. */
html body[class][class].products-page main.service-overview-main > section.service-screen.service-hero,
html body[class][class].teleop-page main#main > section.hero.teleop-hero,
html body[class][class].data-page main#main > section.hero.data-platform-hero {
  background: var(--qn-container-bg) !important;
  color: var(--qn-content-text) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body[class][class].teleop-page main#main > section.teleop-hero > .container.grid-12.hero-grid,
html body[class][class].data-page main#main > section.data-platform-hero > .container.grid-12.hero-grid {
  box-sizing: border-box !important;
  width: min(calc(100% - (2 * var(--qn-grid-margin))), var(--qn-grid-content)) !important;
  max-width: var(--qn-grid-content) !important;
  margin-inline: auto !important;
}

html body[class][class].products-page .service-hero .service-hero-copy h1,
html body[class][class].teleop-page .teleop-hero .hero-copy h1,
html body[class][class].data-page .data-platform-hero .hero-copy h1,
html body[class][class].data-page .data-platform-hero .hero-copy h1 em {
  color: var(--qn-content-text) !important;
  text-shadow: none !important;
}

html body[class][class].products-page .service-hero .service-hero-copy p,
html body[class][class].teleop-page .teleop-hero .hero-copy .lead,
html body[class][class].teleop-page .teleop-hero .hero-copy .copy,
html body[class][class].data-page .data-platform-hero .hero-copy .lead,
html body[class][class].data-page .data-platform-hero .hero-copy .copy {
  color: var(--qn-content-muted) !important;
  text-shadow: none !important;
}

html body[class][class].teleop-page .teleop-hero .software-hero-tags span,
html body[class][class].data-page .data-platform-hero .software-hero-tags span {
  border-color: rgba(17,45,95,.24) !important;
  background: rgba(17,45,95,.04) !important;
  color: var(--qn-content-text) !important;
}

html body[class][class].teleop-page .teleop-hero .button.secondary,
html body[class][class].data-page .data-platform-hero .button.secondary {
  border-color: rgba(17,45,95,.32) !important;
  background: transparent !important;
  color: var(--qn-brand) !important;
}

html body[class][class].teleop-page .teleop-hero .teleop-window,
html body[class][class].data-page .data-platform-hero .hero-visual,
html body[class][class].teleop-page .teleop-capability-image,
html body[class][class].data-page .data-capability-image {
  background: var(--qn-page-bg) !important;
  color: var(--qn-content-text) !important;
  box-shadow: none !important;
}

/* Structural separators are removed without stripping component/card outlines. */
html body[class][class] header.site-header,
html body[class][class] nav.subnav,
html body[class][class] main#main > section,
html body[class][class] main.service-overview-main > section,
html body[class][class] main.pdf-product-flow > section,
html body[class][class] footer.footer {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}

/* Header theme rules are injected with high specificity; this lock removes their final hairline. */
html body[class][class][class][class] header.site-header,
html body[class][class][class][class] header.site-header.is-scrolled,
html body[class][class][class][class] header.site-header.qn-header-light {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
 * 2026-08-13 full UI audit pass
 * TDesign semantic palette, compact navigation, opaque product tabs, readable
 * product heroes, visible footer accounts and one consistent slogan axis.
 * ----------------------------------------------------------------------- */
:root {
  --qn-bg-page: #e8ebf0;
  --qn-bg-container: #ffffff;
  --qn-text-primary: #112d5f;
  --qn-text-secondary: #535d6d;
  --qn-text-helper: #6f7686;
  --qn-line-control: #c4c6cd;
  --qn-state-soft: rgba(17,45,95,.06);
  --qn-light-page: var(--qn-bg-page);
  --qn-page: var(--qn-bg-page);
  --qnbot-page: var(--qn-bg-page);
  --neutral-1: var(--qn-bg-page);
}

/* Only the requested page and container surfaces remain in the content UI. */
html,
html body,
html body main,
html body .service-overview-main,
html body .pdf-product-flow,
html body .about-narrative { background: var(--qn-bg-page) !important; }

html body main > section:not(.home-video-hero),
html body .service-screen,
html body .pdf-screen,
html body .about-section,
html body .contact-hero-redesign,
html body .contact-form-section,
html body .context-cta,
html body footer.footer,
html body .footer-simple-main,
html body .footer-simple-bottom {
  background: var(--qn-bg-container) !important;
  background-image: none !important;
}

html body main > section.surface,
html body main > section:nth-child(even):not(.home-video-hero),
html body .service-screen:nth-child(even),
html body .pdf-screen:nth-child(even),
html body .about-section:nth-child(even) {
  background: var(--qn-bg-page) !important;
  background-image: none !important;
}

/* The video is the sole dark surface and keeps the automatically extracted tone. */
html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  background: var(--qn-header-video-bg) !important;
}

/* Restore the original compact relationship between the three primary tabs. */
@media (min-width: 1024px) {
  html body header.site-header .header-inner,
  html body[class][class] header.site-header .header-inner {
    display: grid !important;
    grid-template-columns: 180px minmax(0,1fr) 184px !important;
    column-gap: 48px !important;
  }

  html body header.site-header .brand,
  html body[class][class] header.site-header .brand {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  html body header.site-header .main-nav,
  html body[class][class] header.site-header .main-nav,
  html body[class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class] header.site-header.qn-header-light .main-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 48px !important;
  }

  html body header.site-header .header-actions,
  html body[class][class] header.site-header .header-actions,
  html body[class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class] header.site-header.qn-header-light .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 184px !important;
  }
}

/* Product secondary navigation owns an opaque layer and never collides with copy. */
@media (min-width: 761px) {
  html body.products-page,
  html body.pdf-product-page,
  html body.teleop-page,
  html body.data-page {
    --qn-header-row: 80px;
    --qn-subnav-row: 52px;
    --qn-product-nav-stack: 132px;
  }

  html body[class][class] header.site-header + nav.subnav,
  html body[class][class] header.site-header.qn-header-light + nav.subnav,
  html body[class][class] header.site-header.is-scrolled + nav.subnav {
    inset: var(--qn-header-row) 0 auto !important;
    height: var(--qn-subnav-row) !important;
    background: var(--qn-bg-container) !important;
    color: var(--qn-text-primary) !important;
    box-shadow: 0 3px 14px 2px rgba(0,0,0,.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body[class][class] nav.subnav .subnav-scroll {
    height: var(--qn-subnav-row) !important;
    min-height: var(--qn-subnav-row) !important;
    background: var(--qn-bg-container) !important;
  }
}

html body nav.subnav a {
  color: var(--qn-text-secondary) !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html body nav.subnav a:hover,
html body nav.subnav a:focus-visible {
  color: var(--qn-text-primary) !important;
  background: var(--qn-state-soft) !important;
}

html body nav.subnav a.active,
html body nav.subnav a[aria-current="page"] {
  color: var(--qn-text-primary) !important;
  background: var(--qn-state-soft) !important;
  opacity: 1 !important;
}

/* Legacy inner wrappers used a third gray; wrappers now inherit their section. */
html body .pdf-screen > .pdf-screen-inner,
html body .product-delivery-stack,
html body .service-screen > .container,
html body .about-section > .story-container {
  background: transparent !important;
  background-image: none !important;
}

html body .context-cta,
html body main > section.surface,
html body .about-foundation,
html body .pdf-screen:nth-child(even) {
  background: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body[class][class] section.cta.context-cta,
html body[class][class] main + section.cta.context-cta {
  background: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body .about-company-combined,
html body .pdf-screen:nth-child(odd) {
  background: var(--qn-bg-container) !important;
  background-image: none !important;
}

/* Hardware product opening: light copy on white was legacy dark-theme residue. */
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid {
  display: grid !important;
  grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  column-gap: var(--qn-grid-gutter) !important;
  align-items: center !important;
  min-height: calc(100svh - var(--qn-product-nav-stack,132px)) !important;
  padding-top: var(--qn-product-nav-stack,132px) !important;
  padding-bottom: clamp(56px,6vw,96px) !important;
  background: var(--qn-bg-container) !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / span 6 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: auto !important;
  max-width: 620px !important;
  color: var(--qn-text-primary) !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy h1,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy .product-name,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy .product-cn {
  color: var(--qn-text-primary) !important;
  text-shadow: none !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy .lead {
  color: var(--qn-text-primary) !important;
  text-shadow: none !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy .copy,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy p {
  color: var(--qn-text-secondary) !important;
  text-shadow: none !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  position: static !important;
  inset: auto !important;
  grid-column: 7 / -1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  min-height: 620px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--qn-bg-container) !important;
  box-shadow: none !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual::before,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual::after {
  content: none !important;
  display: none !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual img {
  position: static !important;
  width: min(88%,620px) !important;
  height: min(70svh,680px) !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}

/* Use black brand assets on every light surface. */
html body:not(.home-page) header.site-header .brand img,
html body.home-page header.site-header.qn-header-light .brand img,
html body.home-page header.site-header.is-scrolled .brand img,
html body footer.footer .footer-brand img {
  content: url("../assets/qnbot-logo-black.png") !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.about-page .about-symbol {
  content: url("../assets/qnbot-icon-black.png") !important;
  filter: none !important;
  opacity: .07 !important;
}

/* Footer account icons stay visible at rest; the QR card remains a hover/focus reveal. */
html body footer.footer .footer-social-item {
  border-color: var(--qn-line-control) !important;
  background: var(--qn-bg-container) !important;
  color: var(--qn-text-primary) !important;
}

html body footer.footer .footer-social-icon {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body footer.footer .footer-social-item:hover,
html body footer.footer .footer-social-item:focus-visible,
html body footer.footer .footer-social-item:focus-within {
  border-color: var(--qn-brand) !important;
  background: var(--qn-state-soft) !important;
  color: var(--qn-brand) !important;
}

html body footer.footer .footer-qr-popover {
  border-color: rgba(17,45,95,.18) !important;
  background: var(--qn-bg-container) !important;
  color: var(--qn-text-primary) !important;
  box-shadow: 0 3px 14px 2px rgba(0,0,0,.05),0 8px 10px 1px rgba(0,0,0,.06) !important;
}

html body footer.footer .footer-email span,
html body footer.footer .footer-email strong,
html body footer.footer .footer-brand-stack p,
html body footer.footer .footer-brand-stack p span {
  color: var(--qn-text-secondary) !important;
}

html body footer.footer .footer-email strong { color: var(--qn-text-primary) !important; }

/* Chinese and English slogan lines share one centered optical axis. */
html body.about-page .about-combined-slogan {
  width: min(100%,960px) !important;
  margin-inline: auto !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

html body.about-page .about-combined-slogan h2,
html body.about-page .about-combined-slogan p {
  width: 100% !important;
  max-width: 960px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Carousel indicators keep a small visual dot but expose a TDesign-size hit area. */
html body.pdf-product-page .module-carousel-dots {
  gap: 0 !important;
}

html body.pdf-product-page .module-carousel-dots button,
html body.pdf-product-page .module-carousel-dots button.is-active {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  background: transparent !important;
}

html body.pdf-product-page .module-carousel-dots button::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #a2a6b1 !important;
  transform: translate(-50%,-50%) !important;
  transition: width 220ms ease,background-color 220ms ease !important;
}

html body.pdf-product-page .module-carousel-dots button.is-active::after {
  width: 30px !important;
  background: var(--qn-brand) !important;
}

@media (max-width: 760px) {
  html body[class][class] header.site-header + nav.subnav,
  html body[class][class] header.site-header.qn-header-light + nav.subnav,
  html body[class][class] header.site-header.is-scrolled + nav.subnav {
    top: var(--qn-header-height) !important;
    background: var(--qn-bg-container) !important;
    box-shadow: 0 3px 14px 2px rgba(0,0,0,.05) !important;
  }

  html body[class][class] nav.subnav .subnav-scroll {
    background: var(--qn-bg-container) !important;
  }

  html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding-top: calc(var(--qn-header-height) + 36px) !important;
  }

  html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy,
  html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
    grid-column: 1 !important;
  }

  html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy { grid-row: 1 !important; }
  html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual { grid-row: 2 !important; min-height: 380px !important; }
}

/* --------------------------------------------------------------------------
 * 2026-08-14 HeroUI-informed UI lock
 * One semantic canvas, invariant navigation geometry and an explicit overlay
 * layer scale. HeroUI is used as an audit/design reference only; this website
 * intentionally remains static HTML/CSS/JS.
 * ----------------------------------------------------------------------- */
:root {
  --qn-z-content: 0;
  --qn-z-sticky-subnav: 200;
  --qn-z-site-header: 300;
  --qn-z-dropdown: 400;
  --qn-z-modal: 500;
  --qn-z-toast: 600;
}

/* The main navigation keeps exactly the same track in default and scrolled states. */
html body[class] header.site-header,
html body[class] header.site-header.is-scrolled,
html body[class] header.site-header.qn-header-light,
html body[class] header.site-header.qn-header-light.is-scrolled {
  z-index: var(--qn-z-site-header) !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  transform: none !important;
  filter: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

html body[class] header.site-header .header-inner,
html body[class] header.site-header.is-scrolled .header-inner,
html body[class] header.site-header.qn-header-light .header-inner,
html body[class] header.site-header.qn-header-light.is-scrolled .header-inner,
html body[class] header.site-header .header-actions,
html body[class] header.site-header .language-switcher {
  overflow: visible !important;
}

@media (min-width: 1024px) {
  html body[class] header.site-header .header-inner,
  html body[class] header.site-header.is-scrolled .header-inner,
  html body[class] header.site-header.qn-header-light .header-inner,
  html body[class] header.site-header.qn-header-light.is-scrolled .header-inner {
    grid-template-columns: 180px minmax(0,1fr) 184px !important;
    column-gap: 48px !important;
  }

  html body[class] header.site-header .main-nav,
  html body[class] header.site-header.is-scrolled .main-nav,
  html body[class] header.site-header.qn-header-light .main-nav,
  html body[class] header.site-header.qn-header-light.is-scrolled .main-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 408px !important;
    min-width: 408px !important;
    gap: 48px !important;
    column-gap: 48px !important;
    row-gap: 0 !important;
    transition: none !important;
  }

  /* Match the legacy double-attribute selector so scroll-state rules cannot win. */
  html body[class][class] header.site-header .main-nav,
  html body[class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 408px !important;
    min-width: 408px !important;
    gap: 48px !important;
    column-gap: 48px !important;
    row-gap: 0 !important;
    transition: none !important;
  }

  html body[class] header.site-header .main-nav > a,
  html body[class] header.site-header.is-scrolled .main-nav > a,
  html body[class] header.site-header.qn-header-light .main-nav > a,
  html body[class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    flex: 0 0 var(--qn-nav-item-width) !important;
    width: var(--qn-nav-item-width) !important;
    min-width: var(--qn-nav-item-width) !important;
    height: var(--qn-nav-control-height) !important;
    min-height: var(--qn-nav-control-height) !important;
    padding: 0 12px !important;
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }

  html body[class][class] header.site-header .main-nav > a,
  html body[class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    flex: 0 0 var(--qn-nav-item-width) !important;
    width: var(--qn-nav-item-width) !important;
    min-width: var(--qn-nav-item-width) !important;
    height: var(--qn-nav-control-height) !important;
    min-height: var(--qn-nav-control-height) !important;
    padding: 0 12px !important;
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }

  html body[class] header.site-header .header-actions,
  html body[class] header.site-header.is-scrolled .header-actions,
  html body[class] header.site-header.qn-header-light .header-actions,
  html body[class] header.site-header.qn-header-light.is-scrolled .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 184px !important;
    min-width: 184px !important;
    gap: 12px !important;
  }

  html body[class] header.site-header .language-toggle,
  html body[class] header.site-header.is-scrolled .language-toggle,
  html body[class] header.site-header.qn-header-light .language-toggle,
  html body[class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class] header.site-header .header-consult-button,
  html body[class] header.site-header.is-scrolled .header-consult-button,
  html body[class] header.site-header.qn-header-light .header-consult-button,
  html body[class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    height: var(--qn-nav-control-height) !important;
    min-height: var(--qn-nav-control-height) !important;
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }

  html body[class][class] header.site-header .language-toggle,
  html body[class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class] header.site-header .header-consult-button,
  html body[class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    height: var(--qn-nav-control-height) !important;
    min-height: var(--qn-nav-control-height) !important;
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }
}

html body[class] header.site-header + nav.subnav,
html body[class] header.site-header.is-scrolled + nav.subnav,
html body[class] header.site-header.qn-header-light + nav.subnav,
html body[class] header.site-header.qn-header-light.is-scrolled + nav.subnav {
  z-index: var(--qn-z-sticky-subnav) !important;
}

html body[class] header.site-header .header-actions { position: relative !important; z-index: 1 !important; }
html body[class] header.site-header .language-switcher { position: relative !important; z-index: 2 !important; }
html body[class] header.site-header .language-menu {
  z-index: var(--qn-z-dropdown) !important;
  background: var(--qn-bg-container) !important;
  opacity: 1 !important;
}

/* A single structural canvas; white is reserved for bounded surfaces and chrome. */
html,
html body[class],
html body[class] main,
html body[class] main#main,
html body[class] .service-overview-main,
html body[class] .pdf-product-flow,
html body[class] .about-narrative {
  background-color: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body[class] main > section:not(.home-video-hero),
html body[class] main#main > section:not(.home-video-hero),
html body[class] .service-screen,
html body[class] .pdf-screen,
html body[class] .about-section,
html body[class] .contact-hero-redesign,
html body[class] .contact-form-section,
html body[class] .context-cta,
html body[class] .about-company-combined {
  background-color: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body[class][class] main > section:not(.home-video-hero),
html body[class][class] main#main > section:not(.home-video-hero),
html body[class][class] .service-screen,
html body[class][class] .pdf-screen,
html body[class][class] .about-section,
html body[class][class] .teleop-hero,
html body[class][class] .data-platform-hero,
html body[class][class] .contact-hero-redesign,
html body[class][class] .contact-form-section,
html body[class][class] .context-cta,
html body[class][class] .about-company-combined {
  background-color: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body[class] header.site-header,
html body[class] nav.subnav,
html body[class] nav.subnav .subnav-scroll,
html body[class] footer.footer,
html body[class] .footer-simple-main,
html body[class] .footer-simple-bottom,
html body[class] .language-menu {
  background-color: var(--qn-bg-container) !important;
  background-image: none !important;
}

html body.home-page main > .home-video-hero,
html body.home-page .home-video-stage {
  background-color: var(--qn-header-video-bg) !important;
}

html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
html body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  background: transparent !important;
}

html body[class][class].pdf-product-page .pdf-product-flow > .pdf-screen:first-child,
html body[class][class].products-page main.service-overview-main > section.service-screen.service-hero,
html body[class][class].teleop-page main#main > section.hero.teleop-hero,
html body[class][class].data-page main#main > section.hero.data-platform-hero {
  background-color: var(--qn-bg-page) !important;
  background-image: none !important;
}

html body[class][class].pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
html body[class][class].pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  background: transparent !important;
}

@media (max-width: 767px) {
  html body[class] header.site-header .language-menu {
    position: fixed !important;
    top: calc(var(--qn-header-height) + 8px) !important;
    right: var(--qn-grid-margin) !important;
    z-index: var(--qn-z-dropdown) !important;
  }
}

/* Final tablet stack: 72px header + 52px product subnavigation. */
@media (min-width: 768px) and (max-width: 1023px) {
  html body[class][class].products-page,
  html body[class][class].pdf-product-page,
  html body[class][class].teleop-page,
  html body[class][class].data-page {
    --qn-header-row: 72px !important;
    --qn-subnav-row: 52px !important;
    --qn-product-nav-stack: 124px !important;
  }

  html body[class][class] header.site-header .header-inner,
  html body[class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 72px !important;
  }

  html body[class][class] header.site-header + nav.subnav,
  html body[class][class] header.site-header.is-scrolled + nav.subnav,
  html body[class][class] header.site-header.qn-header-light + nav.subnav,
  html body[class][class] header.site-header.qn-header-light.is-scrolled + nav.subnav {
    top: 72px !important;
    inset: 72px 0 auto !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-08-14 final cascade lock
 * Keep this block last. It resolves the legacy override chain into one visual
 * contract: grey canvas, white bounded surfaces, stable navigation geometry.
 * ----------------------------------------------------------------------- */
html body[class][class][class],
html body[class][class][class] main,
html body[class][class][class] .service-overview-main,
html body[class][class][class] .pdf-product-flow,
html body[class][class][class] .about-narrative {
  background: var(--qn-canvas) !important;
  color: var(--qn-ink-body) !important;
}

html body[class][class][class] main > section:not(.home-video-hero),
html body[class][class][class] .service-screen,
html body[class][class][class] .pdf-screen,
html body[class][class][class] .about-section,
html body[class][class][class] .about-company-combined,
html body[class][class][class] .contact-hero-redesign,
html body[class][class][class] .contact-form-section,
html body[class][class][class] .context-cta,
html body[class][class][class] .teleop-hero,
html body[class][class][class] .data-platform-hero {
  min-height: 0 !important;
  height: auto !important;
  padding-block: var(--qn-section-gap) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

html body[class][class][class] main > section:not(.home-video-hero) > .container,
html body[class][class][class] .service-screen > .container,
html body[class][class][class] .service-screen > .service-screen-inner,
html body[class][class][class] .pdf-screen > .pdf-screen-inner,
html body[class][class][class] .about-narrative-hero > .story-container,
html body[class][class][class] .about-section > .story-container,
html body[class][class][class] .about-company-combined > .story-container,
html body[class][class][class] .contact-hero-redesign > .container,
html body[class][class][class] .contact-form-section > .container,
html body[class][class][class] .contact-form-section > .contact-layout,
html body[class][class][class] .context-cta > .container,
html body[class][class][class] .teleop-hero > .hero-grid,
html body[class][class][class] .data-platform-hero > .hero-grid {
  box-sizing: border-box !important;
  width: min(var(--qn-content-width, 1440px), calc(100% - (2 * var(--qn-grid-margin)))) !important;
  max-width: var(--qn-content-width, 1440px) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: var(--qn-section-space) clamp(48px, 5vw, 80px) !important;
  background: var(--qn-surface) !important;
  background-image: none !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-section) !important;
  box-shadow: var(--qn-shadow-card) !important;
}

html body[class][class][class] header.site-header,
html body[class][class][class] header.site-header.is-scrolled,
html body[class][class][class] nav.subnav,
html body[class][class][class] footer.footer,
html body[class][class][class] .footer-simple-main,
html body[class][class][class] .footer-simple-bottom {
  background: var(--qn-surface) !important;
  background-image: none !important;
  border-color: transparent !important;
}

html body[class][class][class] header.site-header { z-index: 1200 !important; }
html body[class][class][class] nav.subnav { z-index: 1050 !important; }
html body[class][class][class] header.site-header .language-menu {
  z-index: 1400 !important;
  background: var(--qn-surface) !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-control) !important;
  box-shadow: var(--qn-shadow-overlay) !important;
}

html body[class][class][class] header.site-header.qn-header-light .brand img,
html body[class][class][class] header.site-header.is-scrolled .brand img,
html body[class][class][class]:not(.home-page):not(.about-page) header.site-header .brand img {
  content: url("../assets/qnbot-logo-black.png") !important;
  filter: none !important;
}

@media (min-width: 1024px) {
  html body[class][class][class] header.site-header,
  html body[class][class][class] header.site-header.is-scrolled,
  html body[class][class][class] header.site-header.qn-header-light,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled,
  html body[class][class][class] header.site-header .header-inner,
  html body[class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  html body[class][class][class] header.site-header .header-inner,
  html body[class][class][class] header.site-header.is-scrolled .header-inner {
    grid-template-columns: 180px minmax(408px, 1fr) 184px !important;
    column-gap: 48px !important;
    padding-block: 0 !important;
  }

  html body[class][class][class] header.site-header .main-nav,
  html body[class][class][class] header.site-header.is-scrolled .main-nav {
    width: 408px !important;
    min-width: 408px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    gap: 48px !important;
    align-items: center !important;
  }

  html body[class][class][class] header.site-header .main-nav > a,
  html body[class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class] header.site-header .language-toggle,
  html body[class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class] header.site-header .header-consult-button,
  html body[class][class][class] header.site-header.is-scrolled .header-consult-button {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding-block: 0 !important;
    transform: none !important;
  }

  html body[class][class][class] header.site-header .header-actions,
  html body[class][class][class] header.site-header.is-scrolled .header-actions {
    width: 184px !important;
    min-width: 184px !important;
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: 76px 96px !important;
    gap: 12px !important;
    align-items: center !important;
  }
}

html body[class][class][class] main h1,
html body[class][class][class] .pdf-hero-copy h1 {
  font-size: clamp(42px, 3.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  color: var(--qn-ink) !important;
}

html body[class][class][class] main h2,
html body[class][class][class] .context-cta h2,
html body[class][class][class] .service-screen h2,
html body[class][class][class] .pdf-screen h2 {
  font-size: clamp(32px, 2.8vw, 46px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  color: var(--qn-ink) !important;
}

html body[class][class][class] main h3,
html body[class][class][class] main p,
html body[class][class][class] main li,
html body[class][class][class] main dt,
html body[class][class][class] main dd {
  color: var(--qn-ink-body) !important;
}

html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020305 url("../assets/home-video-poster.jpg") center / cover no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.home-page .home-video-stage video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1;
  transition: opacity 500ms ease !important;
}

html body.home-page .home-video-stage.is-enhanced video { opacity: 0 !important; }
html body.home-page .home-video-stage.is-enhanced.is-visual-ready video { opacity: 1 !important; }

html body.home-page .home-intro-section > .container,
html body.products-page .service-hero > .service-hero-grid,
html body.about-page .about-narrative-hero > .story-container,
html body.contact-page .contact-hero-redesign > .container {
  min-height: clamp(500px, 66svh, 680px) !important;
}

html body.home-page .compact-section .image-card,
html body.products-page .service-card,
html body.pdf-product-page .pdf-spec-group,
html body.pdf-product-page .delivery-panel,
html body.teleop-page .teleop-capability-card,
html body.data-page .data-capability-card,
html body.contact-page .contact-direct-card,
html body.contact-page .topic-panel,
html body.contact-page .form-card {
  min-height: 0 !important;
  background: var(--qn-surface-subtle) !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: var(--qn-radius-card) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.home-page .compact-section .image-card {
  grid-template-rows: 260px auto !important;
}

html body.home-page .compact-section .image-card > img,
html body.products-page .service-card-media,
html body.pdf-product-page .pdf-hero-visual,
html body.pdf-product-page .pdf-gallery-main,
html body.pdf-product-page .delivery-media,
html body.pdf-product-page .module-carousel-viewport {
  background: var(--qn-surface-media) !important;
  border-radius: var(--qn-radius-card) !important;
}

html body.home-page .compact-section .image-card > img {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 260px !important;
  padding: 28px !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

html body.products-page .service-card-media {
  height: 300px !important;
  min-height: 300px !important;
  padding: 28px !important;
}

html body.products-page .service-card-media img,
html body.pdf-product-page .pdf-hero-visual img,
html body.pdf-product-page .pdf-gallery-main img,
html body.pdf-product-page .delivery-media img,
html body.pdf-product-page .module-carousel-slide > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

html body.about-page .about-company-combined > .story-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr) !important;
  gap: clamp(48px, 6vw, 88px) !important;
  align-items: center !important;
}

html body.about-page .about-combined-slogan {
  align-self: center !important;
  margin: 0 !important;
  padding: 32px !important;
  text-align: left !important;
  background: var(--qn-surface-subtle) !important;
  border-left: 3px solid var(--qn-accent) !important;
  border-radius: 0 var(--qn-radius-card) var(--qn-radius-card) 0 !important;
}

html body.about-page .about-tab {
  color: rgba(17, 45, 95, .74) !important;
  border-radius: var(--qn-radius-control) !important;
}

html body.about-page .about-tab:hover,
html body.about-page .about-tab:focus-visible {
  color: var(--qn-ink) !important;
  background: rgba(17, 45, 95, .06) !important;
}

html body.about-page .about-tab.is-active,
html body.about-page .about-tab[aria-selected="true"] {
  color: #fff !important;
  background: var(--qn-ink) !important;
}

html body.contact-page input,
html body.contact-page select,
html body.contact-page textarea {
  color: var(--qn-ink) !important;
  background: var(--qn-surface-subtle) !important;
  border-color: var(--qn-border-strong) !important;
}

html body[class][class][class] .context-cta,
html body[class][class][class] .unified-contact-cta {
  min-height: 0 !important;
  padding-block: var(--qn-section-gap) !important;
}

html body[class][class][class] .context-cta > .container,
html body[class][class][class] .unified-contact-cta > .pdf-screen-inner {
  min-height: 0 !important;
  padding: clamp(48px, 5vw, 72px) !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  html body[class][class][class] header.site-header,
  html body[class][class][class] header.site-header .header-inner {
    height: 72px !important;
    min-height: 72px !important;
  }

  html body[class][class][class] header.site-header + nav.subnav,
  html body[class][class][class] header.site-header.is-scrolled + nav.subnav {
    top: 72px !important;
    inset: 72px 0 auto !important;
  }

  html body[class][class][class] main > section:not(.home-video-hero) > .container,
  html body[class][class][class] .service-screen > .container,
  html body[class][class][class] .service-screen > .service-screen-inner,
  html body[class][class][class] .pdf-screen > .pdf-screen-inner,
  html body[class][class][class] .about-section > .story-container,
  html body[class][class][class] .contact-form-section > .contact-layout {
    padding: 64px 32px !important;
    border-radius: 22px !important;
  }

  html body.about-page .about-company-combined > .story-container {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  html body[class][class][class] main > section:not(.home-video-hero),
  html body[class][class][class] .service-screen,
  html body[class][class][class] .pdf-screen,
  html body[class][class][class] .about-section,
  html body[class][class][class] .contact-hero-redesign,
  html body[class][class][class] .contact-form-section,
  html body[class][class][class] .context-cta {
    padding-block: 16px !important;
  }

  html body[class][class][class] main > section:not(.home-video-hero) > .container,
  html body[class][class][class] .service-screen > .container,
  html body[class][class][class] .service-screen > .service-screen-inner,
  html body[class][class][class] .pdf-screen > .pdf-screen-inner,
  html body[class][class][class] .about-narrative-hero > .story-container,
  html body[class][class][class] .about-section > .story-container,
  html body[class][class][class] .contact-hero-redesign > .container,
  html body[class][class][class] .contact-form-section > .container,
  html body[class][class][class] .contact-form-section > .contact-layout,
  html body[class][class][class] .context-cta > .container {
    width: calc(100% - (2 * var(--qn-grid-margin))) !important;
    padding: 40px 20px !important;
    border-radius: 18px !important;
  }

  html body[class][class][class] main h1,
  html body[class][class][class] .pdf-hero-copy h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
  }

  html body[class][class][class] main h2,
  html body[class][class][class] .context-cta h2,
  html body[class][class][class] .service-screen h2,
  html body[class][class][class] .pdf-screen h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  html body.home-page .compact-section .image-card {
    grid-template-rows: 220px auto !important;
  }

  html body.home-page .compact-section .image-card > img {
    height: 220px !important;
  }

  html body.products-page .service-card-media {
    height: 240px !important;
    min-height: 240px !important;
  }

  html body.about-page .about-company-combined > .story-container {
    grid-template-columns: 1fr !important;
  }

  html body[class][class][class] header.site-header .language-menu {
    position: fixed !important;
    top: calc(var(--qn-header-height) + 8px) !important;
    right: var(--qn-grid-margin) !important;
    z-index: 1400 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .home-video-stage video { transition: none !important; }
}

/* Product navigation occupies a single, gapless 72 + 52px stack. */
@media (min-width: 768px) {
  html body[class][class][class].products-page,
  html body[class][class][class].pdf-product-page,
  html body[class][class][class].teleop-page,
  html body[class][class][class].data-page {
    --qn-header-row: 72px !important;
    --qn-subnav-row: 52px !important;
    --qn-product-nav-stack: 124px !important;
  }

  html body[class][class][class].products-page header.site-header + nav.subnav[aria-label],
  html body[class][class][class].pdf-product-page header.site-header + nav.subnav[aria-label],
  html body[class][class][class].teleop-page header.site-header + nav.subnav[aria-label],
  html body[class][class][class].data-page header.site-header + nav.subnav[aria-label] {
    top: 72px !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    inset: 72px 0 auto !important;
    height: 52px !important;
    min-height: 52px !important;
    z-index: 1050 !important;
  }

  html body[class][class][class].products-page main,
  html body[class][class][class].pdf-product-page main,
  html body[class][class][class].teleop-page main,
  html body[class][class][class].data-page main {
    padding-top: 124px !important;
  }
}


/* source: tdesign-site.css */
/* Qnbot TDesign Web adaptation — shared navigation + homepage story. */
:root {
  --td-brand-color: #0f2b56;
  --td-brand-color-hover: #173d73;
  --td-brand-color-active: #092143;
  --td-brand-color-focus: rgba(15, 43, 86, .18);
  --td-bg-color-page: #e8ebf0;
  --td-bg-color-container: #ffffff;
  --td-text-color-primary: #182233;
  --td-text-color-secondary: #3f4a5a;
  --td-text-color-placeholder: #7d8795;
  --td-text-color-anti: #ffffff;
  --td-border-level-1-color: rgba(15, 43, 86, .18);
  --td-radius-default: 8px;
  --td-shadow-2: 0 3px 14px 2px rgba(0,0,0,.05), 0 8px 10px 1px rgba(0,0,0,.06);
  --td-font-family: "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --td-site-container: 1440px;
  --td-site-gutter: clamp(24px, 5vw, 96px);
  --td-site-header-height: 120px;
  --td-motion-duration-base: 200ms;
  --td-motion-easing-standard: cubic-bezier(.38, 0, .24, 1);
}

/* Homepage capability carousel, scroll story, and compact footer: final cascade lock. */
@media (min-width: 900px) {
  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final.home-page .home-benefits-section {
    height: 400svh !important;
    min-height: 3200px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final.home-page .home-benefits-section > .container {
    position: sticky !important;
    top: 0 !important;
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    height: 100svh !important;
    min-height: 720px !important;
    margin-inline: auto !important;
    padding: 138px 0 64px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: center !important;
    align-items: center !important;
  }

  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final.home-page .home-benefits-section h2 {
    margin: 0 auto 64px !important;
  }

  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final.home-page .home-benefit-story {
    width: min(100%, 1200px) !important;
    height: 410px !important;
    margin-inline: auto !important;
  }
}

.home-benefit-eyebrow {
  margin: 0 0 12px;
  color: #4778c8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer {
  height: 300px !important;
  min-height: 300px !important;
  background: #c9d1dc !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  height: 300px !important;
  min-height: 300px !important;
  margin-inline: auto !important;
  padding: 30px 0 22px !important;
  row-gap: 12px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-logo {
  width: 180px !important;
  height: auto !important;
  margin-bottom: 18px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-brand p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-brand p span {
  font-size: 13px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-contact {
  gap: 16px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-email span {
  font-size: 13px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-email strong {
  font-size: 16px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social {
  gap: 12px !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-item {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-item:hover {
  background: transparent !important;
  transform: translateY(-2px) !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-item:active {
  transform: translateY(0) scale(.96) !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-icon {
  width: 40px !important;
  height: 40px !important;
  opacity: .9 !important;
  filter: grayscale(1) saturate(.2) contrast(.92) !important;
}

html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-bottom {
  padding-top: 8px !important;
  font-size: 13px !important;
}

@media (max-width: 899px) {
  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer,
  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-main {
    padding: 32px 0 24px !important;
  }

  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-item,
  html body.qn-unified.qn-nav-compact.qn-system-nav.qn-density-lock.qn-footer-lock.qn-home-refresh.qn-footer-compact.qn-carousel-refine.qn-home-final footer.footer .footer-simple-social-icon {
    width: 36px !important;
    height: 36px !important;
  }
}

/* 2026-08-19 — final visual refinement lock */
@media (min-width: 769px) {
  html body.qn-unified nav.subnav,
  html body.qn-unified .site-header + nav.subnav {
    background: #e8ebf0 !important;
  }

  html body.qn-unified header.site-header .language-toggle,
  html body.qn-unified header.site-header .header-consult-button {
    font-size: 16px !important;
    line-height: 1 !important;
  }
}

html body.qn-unified.home-page .home-centered-copy p {
  color: #112d5f !important;
}

/* Homepage capability cards: local brand accent instead of a full-width stripe. */
html body.qn-unified.home-page .capability-item::before {
  content: none !important;
}

html body.qn-unified.home-page .capability-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 20px 20px auto auto !important;
  width: 66px !important;
  height: 66px !important;
  border: 1px solid rgba(35, 136, 245, .26) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(35,136,245,.14) 0 3px, transparent 4px) !important;
  box-shadow: 0 0 0 12px rgba(35,136,245,.045) !important;
  pointer-events: none !important;
  transition: transform 220ms var(--qn-ease), border-color 220ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .capability-item:hover::after {
  transform: scale(1.08) rotate(8deg) !important;
  border-color: rgba(35, 136, 245, .5) !important;
}

/* Homepage benefits: balanced centered composition and emphasized outcome. */
html body.qn-unified.home-page .home-benefits-section .container {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
}

html body.qn-unified.home-page .benefit-list {
  width: min(100%, 1080px) !important;
  margin: 80px auto 0 !important;
  gap: 24px !important;
}

html body.qn-unified.home-page .benefit-item,
html body.qn-unified.home-page .benefit-item.is-reversed {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 144px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 14px 0 !important;
}

html body.qn-unified.home-page .benefit-item.is-reversed .benefit-icon-zone,
html body.qn-unified.home-page .benefit-item.is-reversed .benefit-copy {
  grid-column: auto !important;
  grid-row: auto !important;
}

html body.qn-unified.home-page .benefit-icon-zone {
  width: 120px !important;
  height: 120px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(35,136,245,.11) 0 46%, transparent 47%) !important;
  position: relative !important;
}

html body.qn-unified.home-page .benefit-icon-zone::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border: 1px dashed rgba(17,45,95,.26) !important;
  border-radius: 50% !important;
  animation: qn-benefit-orbit 14s linear infinite !important;
}

html body.qn-unified.home-page .benefit-icon-zone img {
  width: 72px !important;
  height: 72px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: transform 220ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .benefit-item:hover .benefit-icon-zone img {
  transform: translateY(-4px) scale(1.04) !important;
}

html body.qn-unified.home-page .benefit-copy {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

html body.qn-unified.home-page .benefit-copy strong.benefit-output {
  width: fit-content !important;
  margin-top: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 9px 16px 9px 10px !important;
  border: 1px solid rgba(35,136,245,.24) !important;
  border-radius: 999px !important;
  background: rgba(35,136,245,.075) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: transform 180ms var(--qn-ease), background-color 180ms var(--qn-ease), border-color 180ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .benefit-output > span {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #112d5f !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
}

html body.qn-unified.home-page .benefit-output > b {
  color: #112d5f !important;
  font-weight: 650 !important;
}

html body.qn-unified.home-page .benefit-item:hover .benefit-output {
  transform: translateX(6px) !important;
  border-color: rgba(35,136,245,.46) !important;
  background: rgba(35,136,245,.12) !important;
}

@keyframes qn-benefit-orbit { to { transform: rotate(360deg); } }

/* Shared footer: every line stays in the same 1440px container. */
html body.qn-unified footer.footer {
  height: 360px !important;
  min-height: 360px !important;
}

html body.qn-unified footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  height: 360px !important;
  min-height: 360px !important;
  margin: 0 auto !important;
  padding: 46px 0 26px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr auto !important;
  gap: 20px 24px !important;
  align-items: center !important;
}

html body.qn-unified footer.footer .footer-brand-stack {
  grid-column: 1 / span 6 !important;
  grid-row: 1 !important;
}

html body.qn-unified footer.footer .footer-contact-social {
  grid-column: 9 / -1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

html body.qn-unified footer.footer .footer-simple-bottom {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 0 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.7) !important;
}

html body.qn-unified footer.footer .footer-social-icons {
  gap: 14px !important;
}

html body.qn-unified footer.footer .footer-social-item {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f6fb !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.12) !important;
}

html body.qn-unified footer.footer .footer-social-item:hover,
html body.qn-unified footer.footer .footer-social-item:focus-visible {
  background: #fff !important;
  transform: translateY(-3px) !important;
}

html body.qn-unified footer.footer .footer-social-icon {
  width: 32px !important;
  height: 32px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Product overview carousel: no fading; controls remain inside the 1440px grid. */
html body.qn-unified.products-page .products-overview-hero {
  margin-bottom: 48px !important;
  padding-bottom: 48px !important;
}

html body.qn-unified.products-page .products-carousel,
html body.qn-unified.products-page .products-carousel-controls {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.qn-unified.products-page .products-carousel::before,
html body.qn-unified.products-page .products-carousel::after,
html body.qn-unified.products-page .products-carousel-viewport::before,
html body.qn-unified.products-page .products-carousel-viewport::after {
  content: none !important;
  display: none !important;
}

html body.qn-unified.products-page .products-carousel-card,
html body.qn-unified.products-page .products-carousel-card:not(.is-active) {
  opacity: 1 !important;
  filter: none !important;
}

html body.qn-unified.products-page .products-carousel-dots button {
  background: #9fb1c7 !important;
}

html body.qn-unified.products-page .products-carousel-dots button.is-active {
  background: #2388f5 !important;
}

html body.qn-unified.products-page .products-carousel-arrows button,
html body.qn-unified.products-page .products-carousel-arrows button:hover {
  border: 0 !important;
  background: #d7e1ef !important;
  box-shadow: none !important;
}

html body.qn-unified.products-page .products-carousel-arrows button img {
  filter: none !important;
  opacity: .88 !important;
}

html body.qn-unified.products-page .product-category-section:first-of-type {
  padding-top: 36px !important;
}

/* VetraGlove hero: no white card shell; content aligns with product overview. */
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.qn-unified.pdf-product-page .pdf-product-tags {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html body.qn-unified.pdf-product-page .pdf-product-tags span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* VetraGlove capability story: alternating editorial rows for scroll exploration. */
html body.qn-unified.pdf-product-page .glove-story-section {
  min-height: 0 !important;
  padding-bottom: 48px !important;
}

html body.qn-unified.pdf-product-page .glove-story-list {
  width: min(100%, 1200px) !important;
  margin: 80px auto 0 !important;
  display: grid !important;
  gap: 72px !important;
}

html body.qn-unified.pdf-product-page .glove-story-item,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
}

html body.qn-unified.pdf-product-page .glove-story-media,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
}

html body.qn-unified.pdf-product-page .glove-story-copy,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
}

html body.qn-unified.pdf-product-page .glove-story-media {
  height: 390px !important;
  margin: 0 !important;
  padding: 28px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}

html body.qn-unified.pdf-product-page .glove-story-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body.qn-unified.pdf-product-page .glove-story-copy {
  padding: 0 24px !important;
}

/* Product specification tabs: image changes with the selected parameter group. */
html body.qn-unified.pdf-product-page .qn-spec-media {
  overflow: hidden !important;
}

html body.qn-unified.pdf-product-page .qn-spec-media img {
  transition: opacity 180ms var(--qn-ease), transform 220ms var(--qn-ease) !important;
}

/* Packaging / options rebuilt into the prototype's horizontal two-column layout. */
html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
  writing-mode: horizontal-tb !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel[hidden] {
  display: none !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 500px !important;
  padding: 32px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  padding: 0 !important;
  writing-mode: horizontal-tb !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy,
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy * {
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines {
  margin: 28px 0 0 !important;
  display: grid !important;
  gap: 0 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines li {
  min-height: 62px !important;
  padding: 14px 0 !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  border-bottom: 1px solid #c8d3e2 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines strong,
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines span {
  display: block !important;
  width: auto !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

@media (max-width: 899px) {
  html body.qn-unified.home-page .benefit-item,
  html body.qn-unified.home-page .benefit-item.is-reversed,
  html body.qn-unified.pdf-product-page .glove-story-item,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed,
  html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
    grid-template-columns: 1fr !important;
  }

  html body.qn-unified.home-page .benefit-icon-zone,
  html body.qn-unified.home-page .benefit-copy,
  html body.qn-unified.pdf-product-page .glove-story-media,
  html body.qn-unified.pdf-product-page .glove-story-copy,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.qn-unified footer.footer,
  html body.qn-unified footer.footer .footer-simple-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified footer.footer .footer-simple-main {
    grid-template-columns: 1fr !important;
    padding: 40px 0 24px !important;
  }

  html body.qn-unified footer.footer .footer-brand-stack,
  html body.qn-unified footer.footer .footer-contact-social,
  html body.qn-unified footer.footer .footer-simple-bottom {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* 2026-08-20 homepage capability carousel, pinned benefit story, compact footer. */
html body.qn-unified.home-page .home-capabilities-section {
  overflow: clip !important;
  background: #e8ebf0 !important;
}

html body.qn-unified.home-page .home-capabilities-section > .container {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}

html body.qn-unified.home-page .home-capabilities-section h2 {
  max-width: 1180px !important;
  margin: 0 auto 80px !important;
  text-align: center !important;
}

.home-capability-carousel {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.home-capability-stage {
  position: relative;
  width: 100%;
  height: 604px;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(17, 45, 95, 0.08);
}

.home-capability-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
  opacity: 0;
  transform: translateX(34px);
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.2, .8, .2, 1), transform 520ms cubic-bezier(.2, .8, .2, 1);
}

.home-capability-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.home-capability-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: #dce4ef;
}

.home-capability-media::after {
  content: "";
  position: absolute;
  inset: auto 8% 8% 8%;
  height: 18%;
  border-radius: 50%;
  background: rgba(17, 45, 95, 0.16);
  filter: blur(34px);
  transform: scale(.72);
}

.home-capability-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
  transition: transform 650ms cubic-bezier(.2, .8, .2, 1);
}

.home-capability-slide.is-active:hover .home-capability-media img {
  transform: scale(1.025);
}

.home-capability-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 64px 48px;
  color: #182233;
  background: #ffffff;
}

.home-capability-index {
  margin: 0 0 26px;
  color: #74849a;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
}

.home-capability-copy h3 {
  margin: 0 0 36px;
  color: #182233;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.28;
}

.home-capability-copy p {
  margin: 0;
  color: #26364d;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.72;
}

.home-capability-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 210px;
  min-height: 70px;
  margin-top: 50px;
  padding: 0 30px;
  border: 1px solid #8290a5;
  border-radius: 999px;
  color: #66758b;
  background: transparent;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.home-capability-link svg {
  width: 24px;
  height: 24px;
  transition: transform 180ms ease;
}

.home-capability-link:hover {
  color: #ffffff;
  border-color: #112d5f;
  background: #112d5f;
  box-shadow: 0 10px 24px rgba(17, 45, 95, 0.2);
  transform: translateY(-2px);
}

.home-capability-link:hover svg {
  transform: translateX(4px);
}

.home-capability-link:active {
  color: #ffffff;
  border-color: #091f43;
  background: #091f43;
  box-shadow: none;
  transform: translateY(0) scale(.98);
}

.home-capability-link:focus-visible,
.home-capability-dot:focus-visible,
.home-benefit-rail button:focus-visible {
  outline: 3px solid rgba(0, 82, 217, .3);
  outline-offset: 3px;
}

.home-capability-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  margin-top: 28px;
}

.home-capability-dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-capability-dot span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #c2ccda;
  transition: width 240ms ease, background-color 240ms ease;
}

.home-capability-dot.is-active {
  width: 98px;
}

.home-capability-dot.is-active span {
  width: 90px;
  background: #112d5f;
}

@media (min-width: 900px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section {
    position: relative !important;
    height: 400svh !important;
    min-height: 3200px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section > .container {
    position: sticky !important;
    top: 0 !important;
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    height: 100svh !important;
    min-height: 720px !important;
    margin-inline: auto !important;
    padding: 138px 0 64px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: center !important;
    align-items: center !important;
  }

  html body.qn-unified.home-page .home-benefits-section h2 {
    max-width: 1200px !important;
    margin: 0 auto 64px !important;
    text-align: center !important;
  }
}

.home-benefit-story {
  width: min(100%, 1200px);
  height: 410px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 54px;
  align-items: stretch;
}

.home-benefit-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}

.home-benefit-rail > i {
  position: absolute;
  z-index: 0;
  top: 38px;
  bottom: 38px;
  left: 50%;
  width: 2px;
  overflow: hidden;
  background: #d4dce7;
  transform: translateX(-50%);
}

.home-benefit-rail > i::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--story-progress, 0%);
  background: #112d5f;
  transition: height 260ms ease;
}

.home-benefit-rail button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #bdc8d7;
  border-radius: 50%;
  color: #78879b;
  background: #e8ebf0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.home-benefit-rail button.is-active {
  color: #ffffff;
  border-color: #112d5f;
  background: #112d5f;
  transform: scale(1.08);
}

.home-benefit-panels {
  position: relative;
  min-width: 0;
}

.home-benefit-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 76px;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 360ms ease, transform 460ms cubic-bezier(.2, .8, .2, 1);
}

.home-benefit-panel.is-active {
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.home-benefit-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 340px;
  height: 340px;
  overflow: hidden;
  border-radius: 8px;
  background: #d8e1ed;
}

.home-benefit-media::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 30px;
  bottom: 28px;
  border-radius: 50%;
  background: rgba(17, 45, 95, .16);
  filter: blur(18px);
}

.home-benefit-media img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  object-fit: contain;
  transform: translateY(8px) scale(.97);
  transition: transform 680ms cubic-bezier(.2, .8, .2, 1);
}

.home-benefit-panel.is-active .home-benefit-media img {
  transform: translateY(0) scale(1);
}

.home-benefit-number {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 24px;
  color: #112d5f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
}

.home-benefit-copy h3 {
  margin: 0 0 28px;
  color: #182233;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.35;
}

.home-benefit-copy > p {
  margin: 0;
  color: #253a59;
  font-size: 22px;
  line-height: 1.72;
}

.home-benefit-result {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  margin-top: 28px !important;
  padding: 8px 18px 8px 8px;
  border: 1px solid #aec9ec;
  border-radius: 999px;
  color: #112d5f !important;
  background: #dce8f8;
  font-size: 20px !important;
  font-weight: 600;
}

.home-benefit-result span {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  color: #ffffff;
  background: #112d5f;
  font-size: 15px;
  font-weight: 600;
}

.home-benefit-result b {
  font-weight: 600;
}

/* Compact footer: one visual container per social mark and type smaller than body copy. */
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer {
  height: 300px !important;
  min-height: 300px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-main {
  height: 300px !important;
  min-height: 300px !important;
  padding: 30px 0 24px !important;
  row-gap: 12px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack > img {
  width: 180px !important;
  margin-bottom: 18px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p {
  font-size: 16px !important;
  line-height: 1.62 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p span,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email span {
  font-size: 14px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email strong {
  font-size: 16px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-contact-social {
  gap: 16px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icons {
  gap: 14px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:hover,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:focus-visible,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:focus-within {
  background: transparent !important;
  transform: translateY(-2px) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icon {
  width: 40px !important;
  height: 40px !important;
  opacity: .9 !important;
  filter: grayscale(1) saturate(.2) contrast(.92) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-bottom {
  padding-top: 12px !important;
  font-size: 13px !important;
}

@media (max-width: 899px) {
  .home-capability-stage {
    height: auto;
    min-height: 650px;
    border-radius: 12px;
  }

  .home-capability-slide {
    grid-template-columns: 1fr;
    grid-template-rows: 310px auto;
  }

  .home-capability-copy {
    padding: 34px 28px 38px;
  }

  .home-capability-copy h3 {
    margin-bottom: 20px;
    font-size: 30px;
  }

  .home-capability-copy p {
    font-size: 17px;
  }

  .home-capability-link {
    min-width: 170px;
    min-height: 52px;
    margin-top: 28px;
    font-size: 16px;
  }

  html body.qn-unified.home-page .home-capabilities-section h2 {
    margin-bottom: 44px !important;
  }

  html body.qn-unified.home-page .home-benefits-section {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified.home-page .home-benefits-section > .container {
    display: block !important;
  }

  .home-benefit-story {
    height: 620px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 20px;
  }

  .home-benefit-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 230px auto;
    gap: 26px;
    align-content: center;
  }

  .home-benefit-media {
    width: min(100%, 340px);
    height: 230px;
  }

  .home-benefit-copy h3 {
    margin-bottom: 16px;
    font-size: 28px;
  }

  .home-benefit-copy > p {
    font-size: 17px;
  }

  .home-benefit-result {
    margin-top: 18px !important;
    font-size: 16px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    padding: 32px 0 24px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-item,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-icon {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-capability-slide,
  .home-capability-media img,
  .home-benefit-panel,
  .home-benefit-media img,
  .home-benefit-rail > i::before {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.qn-unified.home-page .benefit-icon-zone::before { animation: none !important; }
}

/* 2026-08-19 product and home refinement lock */
@media (min-width: 769px) {
  html body[class][class][class][class][class][class][class][class][class][class][class][class] nav.subnav,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] .site-header + nav.subnav {
    background: #e8ebf0 !important;
    border-bottom-color: rgba(17, 45, 95, .06) !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-toggle *,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-consult-button {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }
}

html body.qn-unified.home-page .home-centered-copy p {
  color: #112d5f !important;
}

html body.qn-unified.home-page .capability-item::before,
html body.qn-unified.home-page .capability-item::after {
  content: none !important;
  display: none !important;
}

html body.qn-unified.home-page .capability-icon-zone {
  position: relative !important;
  overflow: visible !important;
}

html body.qn-unified.home-page .capability-icon-zone::before {
  content: "" !important;
  position: absolute !important;
  top: -28px !important;
  left: 50% !important;
  width: 48px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #2388f5 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 0 6px rgba(35, 136, 245, .08) !important;
  transition: width 180ms var(--qn-ease), box-shadow 180ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .capability-item:hover .capability-icon-zone::before,
html body.qn-unified.home-page .capability-item:focus-visible .capability-icon-zone::before {
  width: 72px !important;
  box-shadow: 0 0 0 8px rgba(35, 136, 245, .11) !important;
}

html body.qn-unified.home-page .benefit-list {
  width: min(100%, 1080px) !important;
  gap: 16px !important;
}

html body.qn-unified.home-page .benefit-item,
html body.qn-unified.home-page .benefit-item.is-reversed {
  min-height: 164px !important;
  grid-template-columns: 144px minmax(0, 720px) !important;
  justify-content: center !important;
  gap: 56px !important;
}

html body.qn-unified.home-page .benefit-icon-zone {
  position: relative !important;
  width: 144px !important;
  height: 144px !important;
  padding: 28px !important;
  border-radius: 50% !important;
  background: rgba(215, 225, 239, .55) !important;
  transition: background-color 180ms var(--qn-ease), transform 180ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .benefit-icon-zone::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px dashed rgba(17, 45, 95, .28) !important;
  border-radius: 50% !important;
  animation: qn-benefit-orbit 14s linear infinite !important;
}

html body.qn-unified.home-page .benefit-icon-zone::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #2388f5 !important;
  box-shadow: 0 0 0 5px rgba(35, 136, 245, .12) !important;
  transform: translateX(-50%) !important;
}

html body.qn-unified.home-page .benefit-icon-zone img {
  position: relative !important;
  z-index: 1 !important;
  transition: transform 200ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .benefit-item:hover .benefit-icon-zone {
  background: rgba(196, 212, 232, .72) !important;
  transform: translateY(-4px) !important;
}

html body.qn-unified.home-page .benefit-item:nth-child(1):hover .benefit-icon-zone img { transform: rotate(-8deg) scale(1.06) !important; }
html body.qn-unified.home-page .benefit-item:nth-child(2):hover .benefit-icon-zone img { transform: translateX(6px) scale(1.06) !important; }
html body.qn-unified.home-page .benefit-item:nth-child(3):hover .benefit-icon-zone img { transform: rotate(10deg) scale(1.06) !important; }

html body.qn-unified.home-page .benefit-copy strong.benefit-output {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 10px 16px 10px 12px !important;
  border: 0 !important;
  border-left: 4px solid #2388f5 !important;
  border-radius: 4px !important;
  background: rgba(35, 136, 245, .08) !important;
  color: #112d5f !important;
  box-shadow: none !important;
  transition: transform 180ms var(--qn-ease), background-color 180ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .benefit-output > span {
  color: #526b88 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

html body.qn-unified.home-page .benefit-output > b {
  color: #112d5f !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body.qn-unified.home-page .benefit-item:hover .benefit-output {
  background: rgba(35, 136, 245, .14) !important;
  transform: translateX(6px) !important;
}

@keyframes qn-benefit-orbit {
  to { transform: rotate(360deg); }
}

html body.qn-unified footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  min-height: 360px !important;
  height: 360px !important;
  margin: 0 auto !important;
  padding: 52px 0 32px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto !important;
  column-gap: 80px !important;
  row-gap: 24px !important;
  align-items: start !important;
}

html body.qn-unified footer.footer .footer-simple-brand,
html body.qn-unified footer.footer .footer-simple-contact {
  width: 100% !important;
  max-width: none !important;
  align-self: start !important;
}

html body.qn-unified footer.footer .footer-simple-brand { grid-column: 1 !important; grid-row: 1 !important; }
html body.qn-unified footer.footer .footer-simple-contact { grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; text-align: right !important; }

html body.qn-unified footer.footer .footer-simple-bottom {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 20px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
  background: transparent !important;
}

html body.qn-unified footer.footer .footer-socials {
  gap: 14px !important;
  justify-content: flex-end !important;
}

html body.qn-unified footer.footer .footer-social-link {
  width: 52px !important;
  height: 52px !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f6fb !important;
  opacity: 1 !important;
  transition: transform 160ms var(--qn-ease), background-color 160ms var(--qn-ease), box-shadow 160ms var(--qn-ease) !important;
}

html body.qn-unified footer.footer .footer-social-link img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

html body.qn-unified footer.footer .footer-social-link:hover,
html body.qn-unified footer.footer .footer-social-link:focus-visible {
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(35, 136, 245, .34) !important;
  transform: translateY(-3px) !important;
}

html body.qn-unified.products-page .products-overview-hero {
  min-height: 900px !important;
  margin-bottom: 48px !important;
  padding-bottom: 56px !important;
}

html body.qn-unified.products-page .products-carousel,
html body.qn-unified.products-page .products-carousel-controls {
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}

html body.qn-unified.products-page .products-carousel-viewport {
  overflow: hidden !important;
}

html body.qn-unified.products-page .products-carousel-card,
html body.qn-unified.products-page .products-carousel-card.is-active,
html body.qn-unified.products-page .products-carousel-card:not(.is-active) {
  opacity: 1 !important;
  filter: none !important;
}

html body.qn-unified.products-page .products-carousel-card:not(.is-active) {
  transform: scale(.9) !important;
  pointer-events: none !important;
}

html body.qn-unified.products-page .products-carousel-dots button {
  background: #9fb1c7 !important;
}

html body.qn-unified.products-page .products-carousel-dots button.is-active {
  background: #2388f5 !important;
}

html body.qn-unified.products-page .products-carousel-arrows button,
html body.qn-unified.products-page .products-carousel-arrows button:hover,
html body.qn-unified.products-page .products-carousel-arrows button:active {
  border: 1px solid rgba(17, 45, 95, .10) !important;
  background: #d7e1ef !important;
  box-shadow: none !important;
}

html body.qn-unified.products-page .products-carousel-arrows button:hover {
  background: #c4d4e8 !important;
}

html body.qn-unified.products-page .products-carousel-arrows img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(33%) saturate(1941%) hue-rotate(182deg) brightness(89%) contrast(96%) !important;
}

html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.qn-unified.pdf-product-page .pdf-product-tags {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
}

html body.qn-unified.pdf-product-page .pdf-product-tags span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body.qn-unified.pdf-product-page .glove-story-section {
  min-height: auto !important;
  padding: 104px 0 !important;
}

html body.qn-unified.pdf-product-page .glove-story-list {
  width: min(100%, 1120px) !important;
  margin: 80px auto 0 !important;
  display: grid !important;
  gap: 96px !important;
}

html body.qn-unified.pdf-product-page .glove-story-item {
  min-height: 420px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: center !important;
}

html body.qn-unified.pdf-product-page .glove-story-media {
  grid-column: 1 / span 7 !important;
  height: 420px !important;
  margin: 0 !important;
  padding: 32px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}

html body.qn-unified.pdf-product-page .glove-story-copy {
  grid-column: 8 / -1 !important;
  padding-left: 32px !important;
}

html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media {
  grid-column: 6 / -1 !important;
  grid-row: 1 !important;
}

html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy {
  grid-column: 1 / span 4 !important;
  grid-row: 1 !important;
  padding: 0 32px 0 0 !important;
}

html body.qn-unified.pdf-product-page .glove-story-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 260ms var(--qn-ease) !important;
}

html body.qn-unified.pdf-product-page .glove-story-item:hover .glove-story-media img { transform: scale(1.035) !important; }
html body.qn-unified.pdf-product-page .glove-story-copy > span { color: #2388f5 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .12em !important; }
html body.qn-unified.pdf-product-page .glove-story-copy h3 { margin: 18px 0 14px !important; color: #112d5f !important; font-size: 32px !important; line-height: 1.3 !important; }
html body.qn-unified.pdf-product-page .glove-story-copy p { margin: 0 !important; color: #4d5e74 !important; font-size: 19px !important; line-height: 1.7 !important; }

html body.qn-unified.pdf-product-page .qn-spec-media {
  overflow: hidden !important;
}

html body.qn-unified.pdf-product-page .qn-spec-media img {
  object-position: center !important;
  transition: transform 220ms var(--qn-ease) !important;
}

html body.qn-unified.pdf-product-page .qn-spec-panel:hover .qn-spec-media img { transform: scale(1.025) !important; }

html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
  width: 100% !important;
  min-height: 500px !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 500px !important;
  margin: 0 !important;
  padding: 32px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy,
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  white-space: normal !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy h3 {
  margin: 0 0 24px !important;
  color: #112d5f !important;
  font-size: 28px !important;
  line-height: 1.35 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines li {
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  border-bottom: 1px solid rgba(17, 45, 95, .10) !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines strong {
  color: #112d5f !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines span {
  color: #26364c !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

@media (max-width: 768px) {
  html body.qn-unified.home-page .benefit-item,
  html body.qn-unified.home-page .benefit-item.is-reversed,
  html body.qn-unified.pdf-product-page .glove-story-item,
  html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  html body.qn-unified.home-page .benefit-icon-zone { width: 120px !important; height: 120px !important; }
  html body.qn-unified.pdf-product-page .glove-story-media,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media { width: 100% !important; height: 320px !important; }
  html body.qn-unified.pdf-product-page .glove-story-copy,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy { width: 100% !important; padding: 0 !important; }
  html body.qn-unified footer.footer .footer-simple-main { height: auto !important; min-height: 0 !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  html body.qn-unified footer.footer .footer-simple-brand,
  html body.qn-unified footer.footer .footer-simple-contact,
  html body.qn-unified footer.footer .footer-simple-bottom { grid-column: 1 !important; grid-row: auto !important; text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body.qn-unified.home-page .benefit-icon-zone::before { animation: none !important; }
}

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

body { font-family: var(--td-font-family) !important; }

html body .container,
html body .site-header .header-inner {
  width: min(calc(100% - (2 * var(--td-site-gutter))), var(--td-site-container)) !important;
  max-width: var(--td-site-container) !important;
  margin-inline: auto !important;
}

/* Shared navigation: one geometry and one state model across every page. */
html body[class] header.site-header,
html body[class] header.site-header.is-scrolled,
html body[class] header.site-header.qn-header-light,
html body[class] header.site-header.qn-header-light.is-scrolled {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 1100 !important;
  height: var(--td-site-header-height) !important;
  background: var(--td-bg-color-page) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--td-brand-color) !important;
  backdrop-filter: none !important;
  transition: background-color var(--td-motion-duration-base) var(--td-motion-easing-standard) !important;
}

html body[class] header.site-header .header-inner {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  align-items: center !important;
}

html body[class] header.site-header .brand {
  grid-column: 1 / span 2 !important;
  min-width: 0 !important;
  justify-self: start !important;
}

html body[class] header.site-header .brand img {
  width: min(100%, 212px) !important;
  max-width: 212px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: left center !important;
  content: url("../assets/qnbot-logo-black.png") !important;
  filter: none !important;
}

html body[class] header.site-header .main-nav,
html body[class] header.site-header.is-scrolled .main-nav,
html body[class] header.site-header.qn-header-light .main-nav {
  grid-column: 4 / span 6 !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 0 !important;
}

html body[class] header.site-header .main-nav > a,
html body[class] header.site-header.is-scrolled .main-nav > a,
html body[class] header.site-header.qn-header-light .main-nav > a {
  width: 100% !important;
  min-width: 0 !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--td-brand-color) !important;
  font-size: clamp(16px, 1.25vw, 24px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--td-motion-duration-base) var(--td-motion-easing-standard), color var(--td-motion-duration-base) var(--td-motion-easing-standard) !important;
}

html body[class] header.site-header .main-nav > a::before,
html body[class] header.site-header .main-nav > a::after { content: none !important; display: none !important; }

html body[class] header.site-header .main-nav > a:hover,
html body[class] header.site-header .main-nav > a:focus-visible {
  background: rgba(15, 43, 86, .08) !important;
  color: var(--td-brand-color) !important;
}

html body[class] header.site-header .main-nav > a.active,
html body[class] header.site-header .main-nav > a[aria-current="page"] {
  background: var(--td-brand-color) !important;
  color: var(--td-text-color-anti) !important;
}

html body[class] header.site-header .header-actions,
html body[class] header.site-header.is-scrolled .header-actions,
html body[class] header.site-header.qn-header-light .header-actions {
  grid-column: 10 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(98px, 1fr) minmax(98px, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

html body[class] header.site-header .language-switcher { width: 100% !important; }

html body[class] header.site-header .language-toggle,
html body[class] header.site-header .header-consult-button,
html body[class] header.site-header.is-scrolled .language-toggle,
html body[class] header.site-header.is-scrolled .header-consult-button,
html body[class] header.site-header.qn-header-light .language-toggle,
html body[class] header.site-header.qn-header-light .header-consult-button {
  width: 100% !important;
  min-width: 0 !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 16px !important;
  border: 1px solid var(--td-brand-color) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--td-brand-color) !important;
  font-size: clamp(16px, 1.2vw, 23px) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[class] header.site-header .language-toggle:hover,
html body[class] header.site-header .language-toggle:focus-visible,
html body[class] header.site-header .language-toggle[aria-expanded="true"],
html body[class] header.site-header .header-consult-button:hover,
html body[class] header.site-header .header-consult-button:focus-visible {
  background: var(--td-brand-color) !important;
  border-color: var(--td-brand-color) !important;
  color: var(--td-text-color-anti) !important;
}

html body[class] header.site-header .language-chevron { display: none !important; }

html body[class] nav.subnav { top: var(--td-site-header-height) !important; }

/* The hero and its header form one uninterrupted black screen. */
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) {
  background: #000000 !important;
  color: #ffffff !important;
}

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .brand img {
  content: url("../assets/qnbot-logo-black.png") !important;
  filter: brightness(0) invert(1) !important;
}

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a {
  color: #ffffff !important;
  background: transparent !important;
}

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a:hover,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a:focus-visible { background: rgba(255,255,255,.1) !important; }

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
  background: #2388f5 !important;
  color: #ffffff !important;
}

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button {
  border-color: rgba(255,255,255,.88) !important;
  background: transparent !important;
  color: #ffffff !important;
}

html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle:hover,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle:focus-visible,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .language-toggle[aria-expanded="true"],
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button:hover,
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .header-consult-button:focus-visible {
  border-color: #2388f5 !important;
  background: #2388f5 !important;
  color: #ffffff !important;
}

/* Homepage: only the capability tiles and icon squares own filled containers. */
html body.home-page main,
html body.home-page main > section:not(.home-video-hero) { background: var(--td-bg-color-page) !important; }

html body.home-page .home-video-hero,
html body.home-page .home-video-stage {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  background: #000 !important;
}

html body.home-page .home-video-hero {
  height: calc(100svh - var(--td-site-header-height)) !important;
  min-height: 620px !important;
  overflow: hidden !important;
}

html body.home-page .home-video-stage,
html body.home-page .home-video-stage video { height: 100% !important; }

html body.home-page .home-video-stage {
  background: #000 url("../assets/home-video-poster.jpg") center / cover no-repeat !important;
}

html body.home-page .home-video-stage video {
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  opacity: 0 !important;
  transition: opacity 300ms var(--td-motion-easing-standard) !important;
}

html body.home-page .home-video-stage.is-visual-ready video { opacity: 1 !important; }

html body.home-page .video-scroll-cue { display: none !important; }

.home-value-section,
.home-capabilities-section,
.home-benefits-section,
.home-contact-section {
  color: var(--td-text-color-primary);
  border: 0;
  background: var(--td-bg-color-page);
}

.home-value-section {
  min-height: 960px;
  display: grid;
  place-items: center;
  padding-block: 120px;
}

.home-centered-copy {
  max-width: 1120px !important;
  display: grid;
  justify-items: center;
  gap: 56px;
  text-align: center;
}

.home-centered-copy h1,
.home-capabilities-section h2,
.home-benefits-section h2,
.home-contact-section h2 {
  margin: 0;
  color: var(--td-text-color-primary) !important;
  font-weight: 650;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.home-centered-copy h1 {
  max-width: 1040px;
  font-size: clamp(44px, 3.35vw, 64px);
  line-height: 1.48;
}

.home-centered-copy p {
  max-width: 980px;
  margin: 0;
  color: #111820;
  font-size: clamp(20px, 1.55vw, 29px);
  font-weight: 500;
  line-height: 1.7;
}

.home-capabilities-section { min-height: 960px; padding-block: 112px 116px; }

.home-capabilities-section h2,
.home-benefits-section h2 {
  max-width: 1100px;
  margin-inline: auto;
  font-size: clamp(42px, 3.15vw, 60px);
  line-height: 1.52;
  text-align: center;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 104px;
}

.capability-item {
  min-height: 326px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 28px 42px;
  border: 0;
  border-radius: 8px;
  background: #0f2b56;
  color: #ffffff;
  text-align: center;
  box-shadow: none;
  transition: background-color var(--td-motion-duration-base) var(--td-motion-easing-standard), transform var(--td-motion-duration-base) var(--td-motion-easing-standard);
}

.capability-item:hover,
.capability-item:focus-visible { background: #173d73; transform: translateY(-2px); color: #ffffff; }

.capability-icon-zone {
  width: 106px;
  height: 106px;
  flex: 0 0 106px;
  display: grid;
  place-items: center;
  color: #ffffff;
}

.capability-icon-zone > img {
  width: 82px;
  height: 82px;
  display: block;
  object-fit: contain;
  color: #fff;
  filter: brightness(0) invert(1);
}

.capability-teleop-icon {
  grid-template-columns: 44px 10px 44px;
  column-gap: 4px;
}

.capability-teleop-icon > img { width: 44px; height: 44px; }

.capability-teleop-icon > i {
  position: relative;
  width: 10px;
  height: 2px;
  background: #ffffff;
}

.capability-teleop-icon > i::before,
.capability-teleop-icon > i::after {
  content: "";
  position: absolute;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.capability-teleop-icon > i::before { top: -4px; transform: rotate(45deg); }
.capability-teleop-icon > i::after { left: 0; top: -3px; transform: rotate(225deg); }

.capability-item h3 {
  margin: 16px 0 12px;
  color: #ffffff !important;
  font-size: clamp(24px, 1.7vw, 32px);
  font-weight: 600;
  line-height: 1.35;
}

.capability-item p {
  margin: 0;
  color: rgba(255,255,255,.9) !important;
  font-size: clamp(17px, 1.25vw, 24px);
  line-height: 1.6;
}

.home-benefits-section { padding-block: 108px 130px; }

.benefit-list {
  width: min(100%, 1240px);
  display: grid;
  gap: 88px;
  margin: 96px auto 0;
}

.benefit-item {
  display: grid;
  grid-template-columns: clamp(164px, 11vw, 204px) minmax(0, 1fr);
  gap: clamp(72px, 7vw, 136px);
  align-items: center;
}

.benefit-item.is-reversed { grid-template-columns: minmax(0, 1fr) clamp(164px, 11vw, 204px); }

.benefit-icon-zone {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(28px, 2.2vw, 42px);
  border-radius: 8px;
  background: #0f2b56;
  color: #ffffff;
}

.benefit-icon-zone img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  color: #ffffff;
  filter: brightness(0) invert(1);
}

.benefit-copy { min-width: 0; text-align: left; }
.benefit-item.is-reversed .benefit-copy { text-align: right; }

.benefit-copy h3 {
  margin: 0 0 20px;
  color: #090d13 !important;
  font-size: clamp(27px, 2vw, 38px);
  font-weight: 650;
  line-height: 1.35;
}

.benefit-copy p,
.benefit-copy strong {
  display: block;
  margin: 0;
  color: #090d13 !important;
  font-size: clamp(18px, 1.45vw, 27px);
  line-height: 1.65;
}

.benefit-copy strong { margin-top: 24px; font-weight: 500; }

.home-contact-section {
  min-height: 840px;
  display: grid;
  place-items: center;
  padding-block: 120px;
  text-align: center;
}

.home-contact-section .container { display: grid; justify-items: center; gap: 60px; }

.home-contact-section h2 {
  max-width: 1020px;
  font-size: clamp(46px, 3.4vw, 64px);
  line-height: 1.48;
}

.home-contact-button {
  min-width: 220px;
  min-height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  border: 1px solid #0f2b56;
  border-radius: 12px;
  background: #0f2b56;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  transition: background-color var(--td-motion-duration-base) var(--td-motion-easing-standard), border-color var(--td-motion-duration-base) var(--td-motion-easing-standard), transform var(--td-motion-duration-base) var(--td-motion-easing-standard);
}

.home-contact-button:hover,
.home-contact-button:focus-visible { border-color: #173d73; background: #173d73; color: #fff; transform: translateY(-2px); }

/* Shared footer, populated by site.js, matches the approved light composition. */
html body footer.footer {
  min-height: 600px !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--td-bg-color-page) !important;
  color: var(--td-text-color-primary) !important;
}

html body footer.footer .footer-simple-main {
  min-height: 470px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  align-items: center !important;
  padding-block: 78px !important;
}

html body footer.footer .footer-brand-stack { grid-column: 1 / span 5 !important; align-items: flex-start !important; }
html body footer.footer .footer-brand-stack img { width: 212px !important; max-height: 68px !important; margin: 0 0 46px !important; }

html body footer.footer .footer-brand-stack p,
html body footer.footer .footer-brand-stack p span {
  margin: 0 !important;
  color: var(--td-text-color-primary) !important;
  font-size: 22px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

html body footer.footer .footer-contact-social {
  grid-column: 9 / -1 !important;
  display: grid !important;
  justify-items: end !important;
  gap: 46px !important;
  text-align: right !important;
}

html body footer.footer .footer-email { display: grid !important; justify-items: end !important; gap: 6px !important; }
html body footer.footer .footer-email span { color: var(--td-text-color-primary) !important; font-size: 18px !important; }
html body footer.footer .footer-email strong { color: #0f2b56 !important; font-size: 20px !important; font-weight: 650 !important; }

html body footer.footer .footer-social-icons { display: flex !important; gap: 28px !important; }

html body footer.footer .footer-social-item {
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #0f2b56 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #0f2b56 !important;
  box-shadow: none !important;
}

html body footer.footer .footer-social-icon {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(.35) sepia(.35) hue-rotate(168deg) saturate(3) !important;
}

html body footer.footer .footer-social-item:hover,
html body footer.footer .footer-social-item:focus-visible,
html body footer.footer .footer-social-item:focus-within { background: rgba(15,43,86,.08) !important; border-color: #0f2b56 !important; }

html body footer.footer .footer-simple-bottom { min-height: 130px !important; border: 0 !important; background: var(--td-bg-color-page) !important; }

html body footer.footer .footer-simple-bottom .container {
  min-height: 130px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding-top: 26px !important;
  color: var(--td-text-color-primary) !important;
  font-size: 16px !important;
}

/* TDesign focus indication and motion preference. */
html body :focus-visible { outline: 2px solid var(--td-brand-color) !important; outline-offset: 3px !important; }
html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) :focus-visible { outline-color: #7db8ff !important; }

@media (max-width: 1279px) {
  :root { --td-site-gutter: 48px; --td-site-header-height: 88px; }
  html body[class] header.site-header .brand img { max-width: 166px !important; }
  html body[class] header.site-header .main-nav,
  html body[class] header.site-header.is-scrolled .main-nav,
  html body[class] header.site-header.qn-header-light .main-nav { min-height: 54px !important; gap: 14px !important; }
  html body[class] header.site-header .main-nav > a,
  html body[class] header.site-header.is-scrolled .main-nav > a,
  html body[class] header.site-header.qn-header-light .main-nav > a { height: 54px !important; min-height: 54px !important; font-size: 16px !important; }
  html body[class] header.site-header .header-actions,
  html body[class] header.site-header.is-scrolled .header-actions,
  html body[class] header.site-header.qn-header-light .header-actions { gap: 12px !important; grid-template-columns: minmax(72px, 1fr) minmax(78px, 1fr) !important; }
  html body[class] header.site-header .language-toggle,
  html body[class] header.site-header .header-consult-button,
  html body[class] header.site-header.is-scrolled .language-toggle,
  html body[class] header.site-header.is-scrolled .header-consult-button { height: 54px !important; min-height: 54px !important; font-size: 15px !important; }
  .home-centered-copy h1 { font-size: 52px; }
  .capability-grid { margin-top: 76px; }
  .capability-item { min-height: 300px; }
  .benefit-list { gap: 72px; }
}

@media (max-width: 1023px) {
  :root { --td-site-gutter: 32px; --td-site-header-height: 72px; }
  html body[class] header.site-header .header-inner { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; column-gap: 20px !important; }
  html body[class] header.site-header .brand { grid-column: 1 / span 2 !important; }
  html body[class] header.site-header .main-nav,
  html body[class] header.site-header.is-scrolled .main-nav,
  html body[class] header.site-header.qn-header-light .main-nav { grid-column: 3 / span 4 !important; gap: 10px !important; }
  html body[class] header.site-header .header-actions,
  html body[class] header.site-header.is-scrolled .header-actions,
  html body[class] header.site-header.qn-header-light .header-actions { grid-column: 7 / span 2 !important; gap: 8px !important; }
  .home-value-section { min-height: 820px; }
  .home-capabilities-section { min-height: auto; }
  .capability-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .benefit-item,
  .benefit-item.is-reversed { gap: 48px; }
  .benefit-copy p,
  .benefit-copy strong { font-size: 19px; }
  html body footer.footer .footer-brand-stack { grid-column: 1 / span 6 !important; }
  html body footer.footer .footer-contact-social { grid-column: 8 / -1 !important; }
  html body footer.footer .footer-social-icons { gap: 12px !important; }
  html body footer.footer .footer-social-item { width: 52px !important; height: 52px !important; }
}

@media (max-width: 767px) {
  :root { --td-site-gutter: 24px; --td-site-header-height: 72px; }
  html body[class] header.site-header .header-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 16px !important; }
  html body[class] header.site-header .brand { grid-column: 1 / span 2 !important; }
  html body[class] header.site-header .brand img { width: 124px !important; }
  html body[class] header.site-header .header-actions,
  html body[class] header.site-header.is-scrolled .header-actions,
  html body[class] header.site-header.qn-header-light .header-actions { grid-column: 3 / span 2 !important; display: flex !important; gap: 8px !important; justify-content: flex-end !important; }
  html body[class] header.site-header .language-switcher { width: auto !important; }
  html body[class] header.site-header .language-toggle,
  html body[class] header.site-header .header-consult-button { width: auto !important; min-width: 56px !important; height: 44px !important; min-height: 44px !important; padding-inline: 10px !important; border-radius: 12px !important; font-size: 13px !important; }
  html body[class] header.site-header .menu-toggle { width: 44px !important; height: 44px !important; display: inline-grid !important; border-radius: 12px !important; }
  html body.home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .menu-toggle { border-color: rgba(255,255,255,.88) !important; color: #fff !important; background: transparent !important; }
  html body[class] header.site-header .main-nav,
  html body[class] header.site-header.is-scrolled .main-nav,
  html body[class] header.site-header.qn-header-light .main-nav,
  html body.home-page header.site-header:not(.is-scrolled) .main-nav {
    position: fixed !important;
    inset: var(--td-site-header-height) 0 auto !important;
    width: 100% !important;
    height: calc(100dvh - var(--td-site-header-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 24px var(--td-site-gutter) !important;
    background: var(--td-bg-color-page) !important;
  }
  html body[class] header.site-header .main-nav > a,
  html body.home-page header.site-header:not(.is-scrolled) .main-nav > a {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    justify-content: flex-start !important;
    padding-inline: 20px !important;
    border-radius: 999px !important;
    color: var(--td-brand-color) !important;
    font-size: 16px !important;
  }
  html body[class] header.site-header .main-nav > a.active,
  html body[class] header.site-header .main-nav > a[aria-current="page"],
  html body.home-page header.site-header:not(.is-scrolled) .main-nav > a.active,
  html body.home-page header.site-header:not(.is-scrolled) .main-nav > a[aria-current="page"] { background: var(--td-brand-color) !important; color: #fff !important; }
  html body .language-menu { top: calc(var(--td-site-header-height) + 8px) !important; }
  html body.home-page .home-video-hero { height: calc(100svh - var(--td-site-header-height)) !important; min-height: 520px !important; }
  .home-value-section,
  .home-capabilities-section,
  .home-benefits-section,
  .home-contact-section { min-height: auto; padding-block: 88px; }
  .home-centered-copy { gap: 32px; }
  .home-centered-copy h1,
  .home-capabilities-section h2,
  .home-benefits-section h2,
  .home-contact-section h2 { font-size: clamp(32px, 9vw, 44px); line-height: 1.4; }
  .home-centered-copy p { font-size: 18px; line-height: 1.75; }
  .capability-grid { gap: 16px; margin-top: 56px; }
  .capability-item { min-height: 280px; padding: 38px 24px 34px; }
  .capability-item p { font-size: 17px; }
  .benefit-list { gap: 64px; margin-top: 64px; }
  .benefit-item,
  .benefit-item.is-reversed { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
  .benefit-item.is-reversed .benefit-icon-zone { order: -1; }
  .benefit-icon-zone { width: 144px; height: 144px; }
  .benefit-copy,
  .benefit-item.is-reversed .benefit-copy { text-align: left; }
  .benefit-copy h3 { margin-bottom: 14px; }
  .benefit-copy strong { margin-top: 16px; }
  .home-contact-section .container { gap: 42px; }
  .home-contact-button { min-width: 180px; min-height: 60px; font-size: 20px; }
  html body footer.footer { min-height: auto !important; }
  html body footer.footer .footer-simple-main { min-height: auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 64px !important; padding-block: 72px !important; }
  html body footer.footer .footer-brand-stack,
  html body footer.footer .footer-contact-social { grid-column: 1 !important; justify-items: start !important; text-align: left !important; }
  html body footer.footer .footer-email { justify-items: start !important; }
  html body footer.footer .footer-brand-stack img { width: 180px !important; margin-bottom: 32px !important; }
  html body footer.footer .footer-brand-stack p,
  html body footer.footer .footer-brand-stack p span { font-size: 18px !important; }
  html body footer.footer .footer-social-icons { gap: 16px !important; }
  html body footer.footer .footer-simple-bottom .container { min-height: 112px !important; display: grid !important; gap: 12px !important; justify-content: start !important; padding-top: 22px !important; }
}

@media (max-width: 479px) {
  :root { --td-site-gutter: 16px; }
  html body[class] header.site-header .header-consult-button { display: none !important; }
  .home-centered-copy h1,
  .home-capabilities-section h2,
  .home-benefits-section h2,
  .home-contact-section h2 { font-size: 32px; }
  .capability-icon-zone { width: 92px; height: 92px; flex-basis: 92px; }
  .capability-icon-zone > img { width: 70px; height: 70px; }
  .capability-teleop-icon { grid-template-columns: 30px 16px 30px; }
  .capability-teleop-icon > img { width: 30px; height: 30px; }
  html body footer.footer .footer-social-item { width: 52px !important; height: 52px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-item,
  .home-contact-button,
  html body[class] header.site-header * { transition: none !important; }
}

/* Final specificity lock: supersedes the legacy site's triple-class cascade. */
html body[class][class][class] main > section:not(.home-video-hero) > .container,
html body[class][class][class] .service-screen > .container,
html body[class][class][class] .service-screen > .service-screen-inner,
html body[class][class][class] .pdf-screen > .pdf-screen-inner,
html body[class][class][class] .about-narrative-hero > .story-container,
html body[class][class][class] .about-section > .story-container,
html body[class][class][class] .about-company-combined > .story-container,
html body[class][class][class] .contact-hero-redesign > .container,
html body[class][class][class] .contact-form-section > .container,
html body[class][class][class] .contact-form-section > .contact-layout,
html body[class][class][class] .context-cta > .container,
html body[class][class][class] .teleop-hero > .hero-grid,
html body[class][class][class] .data-platform-hero > .hero-grid {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body[class][class][class].home-page main > section:not(.home-video-hero) {
  height: auto !important;
  padding: 0 !important;
  background: var(--td-bg-color-page) !important;
  border: 0 !important;
}

html body[class][class][class].home-page main > section:not(.home-video-hero) > .container {
  width: min(calc(100% - (2 * var(--td-site-gutter))), var(--td-site-container)) !important;
  max-width: var(--td-site-container) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

html body[class][class][class].home-page .home-value-section { min-height: 960px !important; padding-block: 120px !important; }
html body[class][class][class].home-page .home-capabilities-section { min-height: 960px !important; padding-block: 112px 116px !important; }
html body[class][class][class].home-page .home-benefits-section { min-height: 0 !important; padding-block: 108px 130px !important; }
html body[class][class][class].home-page .home-contact-section { min-height: 840px !important; padding-block: 120px !important; }

html body[class][class][class].home-page .home-centered-copy h1 {
  color: var(--td-text-color-primary) !important;
  font-size: clamp(44px, 3.35vw, 64px) !important;
  font-weight: 650 !important;
  line-height: 1.48 !important;
  letter-spacing: -.035em !important;
}

html body[class][class][class].home-page .home-centered-copy p {
  color: #111820 !important;
  font-size: clamp(20px, 1.55vw, 29px) !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

html body[class][class][class].home-page .home-capabilities-section h2,
html body[class][class][class].home-page .home-benefits-section h2 {
  color: var(--td-text-color-primary) !important;
  font-size: clamp(42px, 3.15vw, 60px) !important;
  font-weight: 650 !important;
  line-height: 1.52 !important;
  letter-spacing: -.035em !important;
}

html body[class][class][class].home-page .capability-item h3 {
  color: #e8ebf0 !important;
  font-size: clamp(24px, 1.7vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html body[class][class][class].home-page .capability-item p {
  color: #e8ebf0 !important;
  font-size: clamp(17px, 1.25vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

html body[class][class][class].home-page .benefit-copy h3 {
  color: #090d13 !important;
  font-size: clamp(27px, 2vw, 38px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

html body[class][class][class].home-page .benefit-copy p,
html body[class][class][class].home-page .benefit-copy strong {
  color: #090d13 !important;
  font-size: clamp(18px, 1.45vw, 27px) !important;
  line-height: 1.65 !important;
}

html body[class][class][class].home-page .home-contact-section h2 {
  color: var(--td-text-color-primary) !important;
  font-size: clamp(46px, 3.4vw, 64px) !important;
  font-weight: 650 !important;
  line-height: 1.48 !important;
  letter-spacing: -.035em !important;
}

html body[class][class][class] footer.footer,
html body[class][class][class] footer.footer .footer-simple-main,
html body[class][class][class] footer.footer .footer-simple-bottom {
  background: var(--td-bg-color-page) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body[class][class][class] footer.footer .footer-simple-main {
  width: min(calc(100% - (2 * var(--td-site-gutter))), var(--td-site-container)) !important;
  max-width: var(--td-site-container) !important;
  min-height: 470px !important;
  margin-inline: auto !important;
  padding: 78px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  align-items: center !important;
}

html body[class][class][class] footer.footer .footer-brand-stack { grid-column: 1 / span 5 !important; }
html body[class][class][class] footer.footer .footer-contact-social { grid-column: 9 / -1 !important; }
html body[class][class][class] footer.footer .footer-social-item { border-radius: 12px !important; }

@media (min-width: 1280px) {
  html body[class][class][class] header.site-header,
  html body[class][class][class] header.site-header.is-scrolled,
  html body[class][class][class] header.site-header.qn-header-light,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled,
  html body[class][class][class] header.site-header .header-inner,
  html body[class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  html body[class][class][class] header.site-header .header-inner,
  html body[class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    width: min(calc(100% - (2 * var(--td-site-gutter))), 1440px) !important;
    max-width: 1440px !important;
    grid-template-columns: 212px minmax(0, 1fr) 220px !important;
    column-gap: 24px !important;
    padding: 0 !important;
  }

  html body[class][class][class] header.site-header .brand { grid-column: 1 !important; }
  html body[class][class][class] header.site-header .brand img { width: 212px !important; max-width: 212px !important; max-height: 74px !important; }

  html body[class][class][class] header.site-header .main-nav,
  html body[class][class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    grid-column: 2 !important;
    width: 708px !important;
    min-width: 708px !important;
    height: 74px !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 220px) !important;
    gap: 24px !important;
    margin: 0 auto !important;
  }

  html body[class][class][class] header.site-header .main-nav > a,
  html body[class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    flex: none !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 16px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
  }

  html body[class][class][class] header.site-header .header-actions,
  html body[class][class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class][class] header.site-header.qn-header-light .header-actions,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-actions {
    grid-column: 3 !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 74px !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: 98px 98px !important;
    gap: 24px !important;
  }

  html body[class][class][class] header.site-header .language-switcher { width: 98px !important; min-width: 98px !important; }

  html body[class][class][class] header.site-header .language-toggle,
  html body[class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class][class] header.site-header .header-consult-button,
  html body[class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    width: 98px !important;
    min-width: 98px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  html body[class][class][class].home-page .home-video-hero,
  html body[class][class][class].home-page .home-video-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100svh - 120px) !important;
    min-height: calc(100svh - 120px) !important;
    margin: 0 !important;
  }
}

/* Product overview 2026-08: three-part layout based on the approved prototypes. */
html body[class][class][class][class][class][class][class][class].products-page main.products-overview-main,
html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero,
html body[class][class][class][class][class][class][class][class].products-page .product-category-section {
  background: var(--td-bg-color-page, #e8ebf0) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero {
  min-height: 1220px !important;
  display: block !important;
  margin: 0 0 96px !important;
  padding: 104px 0 112px !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero > .container,
html body[class][class][class][class][class][class][class][class].products-page .product-category-section > .container {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy {
  display: grid !important;
  justify-items: center !important;
  gap: 48px !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy h1 {
  margin: 0 !important;
  color: #172131 !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy p {
  max-width: 1030px !important;
  margin: 0 !important;
  color: #112d5f !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero .products-carousel {
  margin-top: 88px !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-category-section {
  min-height: 1050px !important;
  margin: 0 0 96px !important;
  padding: 88px 0 104px !important;
  border: 0 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-category-section h2 {
  margin: 0 !important;
  color: #112d5f !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 40px !important;
  margin-top: 72px !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-card {
  min-width: 0 !important;
  height: 680px !important;
  display: grid !important;
  grid-template-rows: 390px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid var(--td-border-level-2-color, #dcdde1) !important;
  border-radius: var(--td-radius-large, 9px) !important;
  background: rgba(255, 255, 255, .34) !important;
  box-shadow: none !important;
  transition: transform 240ms cubic-bezier(.22, .61, .36, 1), border-color 240ms ease, box-shadow 240ms ease !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-card:hover,
html body[class][class][class][class][class][class][class][class].products-page .product-detail-card:focus-within {
  border-color: #aebbd0 !important;
  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.12)) !important;
  transform: translateY(-6px) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-media {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 28px 44px !important;
  background: #eef2f7 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:first-child .product-detail-media img {
  width: auto !important;
  height: 334px !important;
  max-width: 72% !important;
  max-height: 334px !important;
  transform: none !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:nth-child(2) .product-detail-media img {
  max-width: 80% !important;
  max-height: 80% !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-card:hover .product-detail-media img,
html body[class][class][class][class][class][class][class][class].products-page .product-detail-card:focus-within .product-detail-media img {
  transform: scale(1.035) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:first-child:hover .product-detail-media img,
html body[class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:first-child:focus-within .product-detail-media img {
  transform: scale(1.035) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-body {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 30px 40px 34px !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-body h3 {
  margin: 0 !important;
  color: #243752 !important;
  font-size: 32px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-body p {
  min-height: 30px !important;
  margin: 0 !important;
  color: #3f5067 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-tags {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-tags li {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border: 1px solid var(--td-border-level-2-color, #dcdde1) !important;
  border-radius: var(--td-radius-default, 6px) !important;
  background: rgba(255, 255, 255, .28) !important;
  color: #41536b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-action {
  width: fit-content !important;
  min-width: 160px !important;
  height: 56px !important;
  align-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 24px !important;
  border: 1px solid #112d5f !important;
  border-radius: var(--td-radius-default, 6px) !important;
  background: #112d5f !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-action:hover {
  border-color: var(--td-brand-color-hover, #366ef4) !important;
  background: #173d73 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-action:active {
  border-color: var(--td-brand-color-active, #003cab) !important;
  background: #092143 !important;
  transform: translateY(0) !important;
}

html body[class][class][class][class][class][class][class][class].products-page .product-detail-action img {
  width: 20px !important;
  height: 20px !important;
  filter: brightness(0) invert(1) !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer {
  min-height: 458px !important;
  margin: 0 !important;
  background: #c7ced9 !important;
  color: #4d5e74 !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-simple-main {
  min-height: 340px !important;
  padding-block: 56px !important;
  align-items: center !important;
  background: transparent !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-brand-stack img {
  width: 212px !important;
  max-height: 68px !important;
  margin: 0 0 34px !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-brand-stack p,
html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-brand-stack p span,
html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-email span {
  color: #4d5e74 !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-contact-social {
  gap: 34px !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-social-icons {
  gap: 28px !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-social-item {
  border-color: #536579 !important;
  border-radius: var(--td-radius-default, 6px) !important;
  background: transparent !important;
}

html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-simple-bottom,
html body[class][class][class][class][class][class][class][class].products-page footer.footer .footer-simple-bottom .container {
  min-height: 118px !important;
  background: #c7ced9 !important;
  color: #4d5e74 !important;
}

@media (max-width: 1279px) {
  html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero {
    min-height: 0 !important;
    padding: 88px 0 96px !important;
  }

  html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy h1 { font-size: clamp(44px, 6vw, 60px) !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-category-section { min-height: 0 !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-grid { gap: 24px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-card { height: 650px !important; grid-template-rows: 350px minmax(0, 1fr) !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-body { padding-inline: 28px !important; }
}

@media (max-width: 767px) {
  html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero,
  html body[class][class][class][class][class][class][class][class].products-page .product-category-section {
    margin-bottom: 64px !important;
    padding: 64px 0 !important;
  }

  html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy { gap: 32px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy h1 { font-size: 38px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .products-overview-copy p { font-size: 19px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .products-overview-hero .products-carousel { margin-top: 64px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-category-section h2 { font-size: 38px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-grid { grid-template-columns: 1fr !important; margin-top: 56px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-card { height: 620px !important; grid-template-rows: 330px minmax(0, 1fr) !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-body { padding: 26px 24px 30px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-detail-body h3 { font-size: 28px !important; }
  html body[class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:first-child .product-detail-media img {
    height: 280px !important;
    max-height: 280px !important;
  }
}

/* Product matrix immersive cascade: center card is the only actionable item. */
html body[class][class][class][class][class][class][class].products-page .products-carousel-viewport {
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  padding-block: 24px !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-track {
  align-items: center !important;
  column-gap: 24px !important;
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1) !important;
  will-change: transform !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card {
  flex: 0 0 clamp(760px, 50vw, 960px) !important;
  width: clamp(760px, 50vw, 960px) !important;
  height: 452px !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #112d5f !important;
  box-shadow: none !important;
  opacity: .52 !important;
  filter: saturate(.68) brightness(.78) !important;
  transform: translateY(24px) scale(.96) !important;
  transform-origin: center !important;
  cursor: default !important;
  transition: opacity 280ms ease, filter 280ms ease, transform 280ms cubic-bezier(.22, .61, .36, 1), box-shadow 280ms ease !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 42% 0 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 0, rgba(4, 18, 39, .36) 42%, rgba(4, 18, 39, .94) 100%) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card.is-active {
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) scale(1) !important;
  cursor: pointer !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card:not(.is-active):hover {
  opacity: .76 !important;
  filter: saturate(.88) brightness(.9) !important;
  transform: translateY(14px) scale(.975) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card.is-active:hover {
  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.12)) !important;
  transform: translateY(-4px) scale(1.008) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card.is-active:active {
  transform: translateY(0) scale(.996) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card:focus-visible {
  outline: 3px solid var(--td-brand-color, #0052d9) !important;
  outline-offset: -3px !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 56px 76px !important;
  background: radial-gradient(circle at 50% 34%, rgba(73, 119, 197, .22), transparent 58%), #112d5f !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1), opacity 280ms ease !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-card:hover .products-carousel-media img {
  transform: scale(1.035) !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-copy {
  position: absolute !important;
  inset: auto 0 0 !important;
  z-index: 3 !important;
  min-width: 0 !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: end !important;
  gap: 32px !important;
  padding: 24px 32px 28px !important;
  background: transparent !important;
  color: #fff !important;
  pointer-events: none !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-copy strong,
html body[class][class][class][class][class][class][class].products-page .products-carousel-copy > span {
  min-width: 0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-copy > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  text-align: left !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-copy strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  text-align: right !important;
}

html body[class][class][class][class][class][class][class].products-page .products-carousel-controls {
  margin-top: 32px !important;
}

@media (max-width: 1279px) {
  html body[class][class][class][class][class][class][class].products-page .products-carousel-card {
    flex-basis: min(78vw, 900px) !important;
    width: min(78vw, 900px) !important;
  }
}

@media (max-width: 767px) {
  html body[class][class][class][class][class][class][class].products-page .products-carousel-viewport {
    padding-block: 12px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  }

  html body[class][class][class][class][class][class][class].products-page .products-carousel-card {
    flex-basis: calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    height: 430px !important;
    transform: translateY(12px) scale(.97) !important;
  }

  html body[class][class][class][class][class][class][class].products-page .products-carousel-copy {
    min-height: 132px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 20px 24px 24px !important;
  }

  html body[class][class][class][class][class][class][class].products-page .products-carousel-copy > span,
  html body[class][class][class][class][class][class][class].products-page .products-carousel-copy strong {
    grid-column: 1 !important;
    min-height: 0 !important;
    justify-self: start !important;
    font-size: 19px !important;
    text-align: left !important;
  }

  html body[class][class][class][class][class][class][class].products-page .products-carousel-copy > span { grid-row: 1 !important; }
  html body[class][class][class][class][class][class][class].products-page .products-carousel-copy strong { grid-row: 2 !important; }
}

/* Product overview: single-focus, full-width carousel. */
html body[class][class][class][class][class][class].products-page .products-carousel-viewport {
  position: relative !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-track {
  column-gap: 0 !important;
  transition: transform 560ms cubic-bezier(.22, .61, .36, 1) !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 500px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
  grid-template-rows: 1fr !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-card:hover,
html body[class][class][class][class][class][class].products-page .products-carousel-card:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-card:focus-visible {
  outline: 3px solid #0052d9 !important;
  outline-offset: -3px !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 72px 24px 24px !important;
  background: transparent !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-media img {
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: 94% !important;
  object-fit: contain !important;
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1), opacity 280ms ease !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-card:hover .products-carousel-media img {
  transform: scale(1.018) !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 24px !important;
  padding: 48px 48px 48px 80px !important;
  background: transparent !important;
  color: #112d5f !important;
  text-align: left !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-copy strong {
  color: #112d5f !important;
  font-size: 52px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-copy > span {
  color: #46566a !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

html body[class][class][class][class][class][class].products-page .products-carousel-controls {
  margin-top: 40px !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body[class][class][class][class][class][class].products-page .products-carousel-card {
    flex-basis: 100% !important;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-media {
    padding: 24px 32px 24px 16px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-copy {
    padding: 40px 32px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-copy strong {
    font-size: 40px !important;
  }
}

@media (max-width: 767px) {
  html body[class][class][class][class][class][class].products-page .products-carousel-card {
    flex-basis: 100% !important;
    height: 500px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 300px 200px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 16px 24px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-content: start !important;
    gap: 16px !important;
    padding: 24px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-copy strong {
    font-size: 32px !important;
  }

  html body[class][class][class][class][class][class].products-page .products-carousel-copy > span {
    font-size: 18px !important;
  }
}

/* Product overview terminal lock: overrides the legacy service-screen bundle. */
html body[class][class][class][class][class].products-page main.products-overview-main > section > .container,
html body[class][class][class][class][class].products-page > .subnav > .container {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

html body[class][class][class][class][class].products-page main.products-overview-main {
  margin: 0 !important;
  padding: 0 !important;
}

html body[class][class][class][class][class].products-page main.products-overview-main > section > .container {
  padding-block: 0 !important;
}

html body[class][class][class][class][class].products-page .products-overview-copy {
  max-width: 1440px !important;
}

html body[class][class][class][class][class].products-page .products-overview-copy h1 {
  max-width: 1200px !important;
  margin-inline: auto !important;
}

html body[class][class][class][class][class].products-page .products-overview-copy h1,
html body[class][class][class][class][class].products-page .products-carousel-section h2 {
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

@media (min-width: 1280px) {
  html body[class][class][class][class][class].products-page > .subnav,
  html body[class][class][class][class][class].products-page .site-header + .subnav,
  html body[class][class][class][class][class].products-page .site-header.qn-header-light + .subnav {
    position: sticky !important;
    inset: 88px 0 auto !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  html body[class][class][class][class][class].products-page > .subnav .subnav-scroll {
    height: 64px !important;
    min-height: 64px !important;
  }

  html body[class][class][class][class][class].products-page main.products-overview-main > section.products-overview-hero {
    min-height: calc(100svh - 152px) !important;
    padding: 80px 0 !important;
  }

  html body[class][class][class][class][class].products-page main.products-overview-main > section.products-carousel-section {
    min-height: calc(100svh - 152px) !important;
    padding: 64px 0 !important;
  }
}

/* Final contract lock; kept last because legacy theme rules use deep selectors. */
@media (min-width: 1280px) {
  html body[class][class][class][class][class][class] header.site-header .main-nav > a.active,
  html body[class][class][class][class][class][class] header.site-header .main-nav > a[aria-current="page"] {
    background: #112d5f !important;
  }

  html body[class][class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
  html body[class][class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
    background: #2388f5 !important;
  }

  html body[class][class][class][class][class][class] footer.footer {
    min-height: 512px !important;
    background: #e8ebf0 !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-main {
    min-height: 350px !important;
    padding: 118px 0 32px !important;
    align-items: start !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom,
  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    min-height: 162px !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    padding-top: 40px !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-08-18 homepage visual QA revision
 * Compact shared navigation, true full-height hero, reduced inter-screen
 * rhythm, centered benefit content and undistorted brand/social assets.
 * ----------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --td-site-header-height: 88px;
    --td-home-screen-gap: 60px;
  }

  html body[class][class][class][class][class][class][class] header.site-header,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled,
  html body[class][class][class][class][class][class][class] header.site-header .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    width: min(calc(100% - (2 * var(--td-site-gutter))), 1440px) !important;
    max-width: 1440px !important;
    grid-template-columns: 212px minmax(0, 1fr) 196px !important;
    column-gap: 24px !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .brand img {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1797 / 600 !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .main-nav,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    grid-column: 2 !important;
    width: 600px !important;
    min-width: 600px !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: repeat(3, 184px) !important;
    gap: 24px !important;
    margin-inline: auto !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .main-nav > a,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    width: 184px !important;
    min-width: 184px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding-inline: 16px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .header-actions,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .header-actions,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-actions {
    grid-column: 3 !important;
    width: 196px !important;
    min-width: 196px !important;
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: repeat(2, 88px) !important;
    gap: 20px !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .language-switcher {
    width: 88px !important;
    min-width: 88px !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class][class][class][class][class][class] header.site-header .header-consult-button,
  html body[class][class][class][class][class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    width: 88px !important;
    min-width: 88px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  html body[class][class][class][class][class][class][class] header.site-header .language-current {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-video-hero,
  html body[class][class][class][class][class][class][class].home-page .home-video-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[class][class][class].home-page main > .home-video-hero,
  html body[class][class][class].home-page main > .home-value-section,
  html body[class][class][class].home-page main > .home-capabilities-section,
  html body[class][class][class].home-page main > .home-benefits-section {
    margin-bottom: 60px !important;
  }

  html body[class][class][class].home-page main > .home-contact-section {
    margin-bottom: 40px !important;
  }

  html body[class][class][class][class].home-page .home-capabilities-section h2,
  html body[class][class][class][class].home-page .home-benefits-section h2 {
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  html body[class][class][class][class].home-page .benefit-list {
    width: min(100%, 1200px) !important;
    margin: 80px auto 0 !important;
  }

  html body[class][class][class][class].home-page .benefit-item,
  html body[class][class][class][class].home-page .benefit-item.is-reversed {
    grid-template-columns: 168px minmax(0, 1fr) !important;
    gap: 96px !important;
  }
}

html body.home-page .capability-teleop-icon > i {
  height: 6px !important;
  border-radius: 999px;
}

html body.home-page .capability-teleop-icon > i::before,
html body.home-page .capability-teleop-icon > i::after {
  width: 10px;
  height: 10px;
  border-top-width: 6px;
  border-right-width: 6px;
}

html body[class][class][class][class] footer.footer .footer-brand-stack img {
  content: url("../assets/qnbot-logo-black.png") !important;
  width: 240px !important;
  max-width: 240px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1797 / 600 !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}

html body[class][class][class][class] footer.footer .footer-social-icons {
  gap: 12px !important;
}

html body[class][class][class][class] footer.footer .footer-social-item {
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}

html body[class][class][class][class] footer.footer .footer-social-icon {
  width: 38px !important;
  height: 38px !important;
}

html body[class][class][class][class] footer.footer .footer-social-item:hover,
html body[class][class][class][class] footer.footer .footer-social-item:focus-visible,
html body[class][class][class][class] footer.footer .footer-social-item:focus-within {
  border: 0 !important;
  background: rgba(17, 45, 95, .08) !important;
}

html body[class][class][class][class][class][class].home-page .home-centered-copy h1,
html body[class][class][class][class][class][class].home-page .home-capabilities-section h2,
html body[class][class][class][class][class][class].home-page .home-benefits-section h2,
html body[class][class][class][class][class][class].home-page .home-contact-section h2 {
  color: #112d5f !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  html body[class][class][class][class][class][class].home-page .home-centered-copy h1,
  html body[class][class][class][class][class][class].home-page .home-capabilities-section h2,
  html body[class][class][class][class][class][class].home-page .home-benefits-section h2,
  html body[class][class][class][class][class][class].home-page .home-contact-section h2 {
    font-size: 32px !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-08-18 fixed six-screen contract
 * Numeric values below intentionally override the previous fluid draft.
 * ----------------------------------------------------------------------- */
:root {
  --td-brand-color: #112d5f;
  --td-bg-color-page: #e8ebf0;
  --td-home-screen-gap: 120px;
  --td-home-title-gap: 80px;
}

html body.home-page main,
html body.home-page main > section,
html body footer.footer { background-color: #e8ebf0 !important; }

html body.home-page main > .home-video-hero { background-color: #000 !important; }

html body.home-page .home-centered-copy h1,
html body.home-page .home-capabilities-section h2,
html body.home-page .home-benefits-section h2,
html body.home-page .home-contact-section h2 {
  margin: 0 !important;
  color: #112d5f !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
}

html body.home-page .home-centered-copy { gap: 48px !important; }
html body.home-page .capability-grid,
html body.home-page .benefit-list { margin-top: 80px !important; }
html body.home-page .home-contact-section .container { gap: 80px !important; }

html body.home-page .capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

html body.home-page .capability-item {
  padding: 48px 24px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #112d5f !important;
  box-shadow: none !important;
}

html body.home-page .capability-item:hover,
html body.home-page .capability-item:focus-visible { background: #173d73 !important; }

html body.home-page .benefit-list {
  width: min(100%, 1240px) !important;
  gap: 80px !important;
}

html body.home-page .benefit-item,
html body.home-page .benefit-item.is-reversed {
  display: grid !important;
  grid-template-columns: 204px minmax(0, 1fr) !important;
  gap: 136px !important;
  align-items: center !important;
}

html body.home-page .benefit-item .benefit-icon-zone,
html body.home-page .benefit-item.is-reversed .benefit-icon-zone {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: initial !important;
}

html body.home-page .benefit-item .benefit-copy,
html body.home-page .benefit-item.is-reversed .benefit-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: left !important;
}

@media (min-width: 1280px) {
  html body[class][class][class].home-page main > .home-video-hero,
  html body[class][class][class].home-page main > .home-value-section,
  html body[class][class][class].home-page main > .home-capabilities-section,
  html body[class][class][class].home-page main > .home-benefits-section {
    margin-bottom: 120px !important;
  }

  html body[class][class][class].home-page main > .home-contact-section {
    margin-bottom: 80px !important;
  }

  html body[class][class][class][class][class].home-page .home-value-section {
    min-height: 960px !important;
    padding: 120px 0 !important;
  }

  html body[class][class][class][class][class].home-page .home-capabilities-section {
    min-height: 960px !important;
    padding: 112px 0 116px !important;
  }

  html body[class][class][class][class][class].home-page .home-benefits-section {
    min-height: 1432px !important;
    padding: 220px 0 130px !important;
  }

  html body[class][class][class][class][class].home-page .home-contact-section {
    min-height: 960px !important;
    padding: 120px 0 !important;
  }

  html body[class][class][class] footer.footer { min-height: 512px !important; }

  html body[class][class][class] footer.footer .footer-simple-main {
    min-height: 350px !important;
    padding: 80px 0 32px !important;
    align-items: start !important;
  }

  html body[class][class][class] footer.footer .footer-simple-bottom,
  html body[class][class][class] footer.footer .footer-simple-bottom .container {
    min-height: 162px !important;
  }

  html body[class][class][class] footer.footer .footer-simple-bottom .container {
    padding-top: 40px !important;
  }

  html body.home-page .home-contact-button { background: #112d5f !important; border-color: #112d5f !important; }
}

@media (max-width: 1023px) {
  html body.home-page .capability-grid { grid-template-columns: 1fr !important; }
  html body.home-page .benefit-item,
  html body.home-page .benefit-item.is-reversed {
    grid-template-columns: 144px minmax(0, 1fr) !important;
    gap: 32px !important;
  }
}

@media (max-width: 767px) {
  html body.home-page .home-centered-copy h1,
  html body.home-page .home-capabilities-section h2,
  html body.home-page .home-benefits-section h2,
  html body.home-page .home-contact-section h2 { font-size: 32px !important; }

  html body.home-page .benefit-item,
  html body.home-page .benefit-item.is-reversed {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 767px) {
  html body[class][class][class].home-page main > section:not(.home-video-hero) { min-height: 0 !important; padding-block: 88px !important; }
  html body[class][class][class].home-page .home-centered-copy h1,
  html body[class][class][class].home-page .home-capabilities-section h2,
  html body[class][class][class].home-page .home-benefits-section h2,
  html body[class][class][class].home-page .home-contact-section h2 { font-size: 32px !important; line-height: 1.4 !important; }
  html body[class][class][class] footer.footer .footer-simple-main {
    width: min(calc(100% - (2 * var(--td-site-gutter))), 1440px) !important;
    min-height: 0 !important;
    padding: 72px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 64px !important;
  }
  html body[class][class][class] footer.footer .footer-brand-stack,
  html body[class][class][class] footer.footer .footer-contact-social { grid-column: 1 !important; }
}

@media (min-width: 1280px) {
  html body[class][class][class][class][class] header.site-header .main-nav > a,
  html body[class][class][class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    width: 220px !important;
    min-width: 220px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 16px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
  }

  html body[class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class][class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class][class][class][class] header.site-header .header-consult-button,
  html body[class][class][class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    width: 98px !important;
    min-width: 98px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  html body[class][class][class][class][class] header.site-header,
  html body[class][class][class][class][class] header.site-header.is-scrolled,
  html body[class][class][class][class][class] header.site-header.qn-header-light,
  html body[class][class][class][class][class] header.site-header.qn-header-light.is-scrolled {
    background: #e8ebf0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) { background: #000000 !important; }

  html body[class][class][class][class][class] header.site-header .main-nav > a.active,
  html body[class][class][class][class][class] header.site-header .main-nav > a[aria-current="page"] {
    background: #0f2b56 !important;
    color: #ffffff !important;
  }

  html body[class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
  html body[class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] { background: #2388f5 !important; }

  html body[class][class][class][class][class].home-page .home-capabilities-section {
    min-height: 960px !important;
    display: block !important;
    padding: 112px 0 116px !important;
  }

  html body[class][class][class][class][class].home-page .home-benefits-section {
    min-height: 1432px !important;
    display: block !important;
    padding: 220px 0 130px !important;
  }

  html body[class][class][class][class][class].home-page .home-contact-section {
    min-height: 960px !important;
    display: grid !important;
    padding: 120px 0 !important;
  }

  html body[class][class][class][class][class].home-page .home-video-hero,
  html body[class][class][class][class][class].home-page .home-video-stage {
    padding: 0 !important;
  }

  html body[class][class][class][class][class] footer.footer { min-height: 960px !important; }
}

@media (max-width: 767px) { .desktop-break { display: none; } }

/* QA lock: exact authored radii/type plus invisible icon hot zones. */
html body[class][class][class] .benefit-icon-zone {
  background: transparent !important;
  color: #112d5f !important;
}

html body[class][class][class] .benefit-icon-zone img {
  width: min(100%, 120px) !important;
  height: min(100%, 120px) !important;
  filter: none !important;
}

@media (min-width: 1280px) {
  html body[class][class][class][class][class] header.site-header .language-current {
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  html body[class][class][class][class][class] header.site-header .header-consult-button,
  html body[class][class][class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    border-radius: 12px !important;
  }
}

html body[class][class][class][class][class][class].home-page .home-centered-copy h1,
html body[class][class][class][class][class][class].home-page .home-capabilities-section h2,
html body[class][class][class][class][class][class].home-page .home-benefits-section h2,
html body[class][class][class][class][class][class].home-page .home-contact-section h2 {
  color: #112d5f !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  html body[class][class][class][class][class][class].home-page .home-centered-copy h1,
  html body[class][class][class][class][class][class].home-page .home-capabilities-section h2,
  html body[class][class][class][class][class][class].home-page .home-benefits-section h2,
  html body[class][class][class][class][class][class].home-page .home-contact-section h2 {
    font-size: 32px !important;
  }
}

/* Six-screen contract: terminal specificity lock. */
@media (min-width: 1280px) {
  html body[class][class][class][class][class][class] header.site-header .main-nav > a.active,
  html body[class][class][class][class][class][class] header.site-header .main-nav > a[aria-current="page"] {
    background: #112d5f !important;
  }

  html body[class][class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a.active,
  html body[class][class][class][class][class][class].home-page header.site-header:not(.is-scrolled):not(.qn-header-light) .main-nav > a[aria-current="page"] {
    background: #2388f5 !important;
  }

  html body[class][class][class][class][class][class] footer.footer {
    min-height: 512px !important;
    background: #e8ebf0 !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-main {
    min-height: 350px !important;
    padding: 118px 0 32px !important;
    align-items: start !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom,
  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    min-height: 162px !important;
  }

  html body[class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    padding-top: 40px !important;
  }
}

/* Terminal homepage rhythm corrections from 1920x1080 visual QA. */
@media (min-width: 1280px) {
  :root { --td-home-screen-gap: 96px; }

  html body[class][class][class][class][class][class][class].home-page main > .home-video-hero,
  html body[class][class][class][class][class][class][class].home-page main > .home-value-section,
  html body[class][class][class][class][class][class][class].home-page main > .home-capabilities-section,
  html body[class][class][class][class][class][class][class].home-page main > .home-benefits-section,
  html body[class][class][class][class][class][class][class].home-page main > .home-contact-section {
    margin-bottom: var(--td-home-screen-gap) !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-value-section {
    min-height: 0 !important;
    padding: 60px 0 !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-centered-copy {
    gap: 80px !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-capabilities-section {
    min-height: 0 !important;
    padding: 56px 0 58px !important;
  }

  html body[class][class][class][class][class][class][class].home-page .capability-grid {
    margin-top: 80px !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-benefits-section {
    min-height: 0 !important;
    padding: 110px 0 65px !important;
  }

  html body[class][class][class][class][class][class][class].home-page .benefit-list {
    width: min(100%, 1200px) !important;
    gap: 68px !important;
    margin: 80px auto 0 !important;
  }

  html body[class][class][class][class][class][class][class].home-page .benefit-item,
  html body[class][class][class][class][class][class][class].home-page .benefit-item.is-reversed {
    grid-template-columns: 168px minmax(0, 1fr) !important;
    gap: 84px !important;
  }

  html body[class][class][class][class][class][class][class].home-page .benefit-copy strong {
    color: #112d5f !important;
    font-weight: 700 !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-contact-section {
    min-height: 0 !important;
    padding: 60px 0 !important;
  }

  html body[class][class][class][class][class][class][class].home-page .home-contact-section .container {
    gap: 80px !important;
  }

  html body[class][class][class][class][class][class][class] footer.footer .footer-simple-main {
    align-items: center !important;
  }

  html body[class][class][class][class][class][class][class] footer.footer .footer-brand-stack,
  html body[class][class][class][class][class][class][class] footer.footer .footer-contact-social {
    align-self: center !important;
  }

  html body[class][class][class][class][class][class][class] footer.footer .footer-brand-stack {
    justify-content: center !important;
  }

  html body[class][class][class][class][class][class][class] footer.footer .footer-contact-social {
    align-content: center !important;
  }
}

/* --------------------------------------------------------------------------
 * Product overview: two-screen product matrix carousel.
 * Custom marketing content built on TDesign layout, button and carousel states.
 * ----------------------------------------------------------------------- */
html body.products-page,
html body.products-page main.products-overview-main,
html body.products-page .products-overview-hero,
html body.products-page .products-carousel-section {
  background: var(--td-bg-color-page) !important;
}

html body.products-page main.products-overview-main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--td-text-color-primary) !important;
}

html body.products-page .products-overview-hero,
html body.products-page .products-carousel-section {
  width: 100% !important;
  margin-bottom: 96px !important;
  border: 0 !important;
}

html body.products-page .products-overview-hero {
  min-height: 680px !important;
  display: grid !important;
  place-items: center !important;
  padding: 96px 0 !important;
}

html body.products-page .products-overview-copy {
  max-width: 1120px !important;
  display: grid !important;
  justify-items: center !important;
  gap: 80px !important;
  text-align: center !important;
}

html body.products-page .products-overview-copy h1,
html body.products-page .products-carousel-section h2 {
  width: 100% !important;
  margin: 0 !important;
  color: #112d5f !important;
  font-size: clamp(40px, 4vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

html body.products-page .products-overview-copy p {
  max-width: 1040px !important;
  margin: 0 !important;
  color: #112d5f !important;
  font-size: clamp(19px, 1.5vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  text-align: center !important;
}

html body.products-page .products-carousel-section {
  min-height: 760px !important;
  padding: 80px 0 !important;
}

html body.products-page .products-carousel {
  width: 100% !important;
  margin-top: 80px !important;
  outline: 0 !important;
}

html body.products-page .products-carousel-viewport {
  width: 100% !important;
  overflow: hidden !important;
}

html body.products-page .products-carousel-track {
  width: 100% !important;
  display: flex !important;
  column-gap: 24px !important;
  will-change: transform !important;
  transition: transform 480ms var(--td-motion-easing-standard) !important;
}

html body.products-page .products-carousel-card {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  min-width: 0 !important;
  height: 480px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 120px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--td-radius-default) !important;
  background: #112d5f !important;
  color: var(--td-text-color-anti) !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
  transition: transform var(--td-motion-duration-base) var(--td-motion-easing-standard), background-color var(--td-motion-duration-base) var(--td-motion-easing-standard) !important;
}

html body.products-page .products-carousel-card:hover {
  background: #173d73 !important;
  transform: translateY(-4px) !important;
}

html body.products-page .products-carousel-card:active {
  background: #092143 !important;
  transform: translateY(-1px) !important;
}

html body.products-page .products-carousel-card:focus-visible {
  outline: 3px solid var(--td-brand-color-focus) !important;
  outline-offset: 4px !important;
}

html body.products-page .products-carousel-media {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px 32px 12px !important;
  background: rgba(255,255,255,.035) !important;
}

html body.products-page .products-carousel-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.products-page .products-carousel-copy {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
  padding: 18px 24px 22px !important;
  color: #e8ebf0 !important;
}

html body.products-page .products-carousel-copy strong,
html body.products-page .products-carousel-copy > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.products-page .products-carousel-copy strong {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html body.products-page .products-carousel-copy > span {
  color: #e8ebf0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

html body.products-page .products-carousel-controls {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-top: 48px !important;
}

html body.products-page .products-carousel-dots,
html body.products-page .products-carousel-arrows {
  display: flex !important;
  align-items: center !important;
}

html body.products-page .products-carousel-dots { gap: 12px !important; }
html body.products-page .products-carousel-arrows { gap: 16px !important; }

html body.products-page .products-carousel-dots button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: width var(--td-motion-duration-base) var(--td-motion-easing-standard) !important;
}

html body.products-page .products-carousel-dots button::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px 0 !important;
  border-radius: 999px !important;
  background: #536579 !important;
}

html body.products-page .products-carousel-dots button.is-active {
  width: 90px !important;
}

html body.products-page .products-carousel-dots button.is-active::before {
  background: #112d5f !important;
}

html body.products-page .products-carousel-dots button:focus-visible,
html body.products-page .products-carousel-arrows button:focus-visible {
  outline: 3px solid var(--td-brand-color-focus) !important;
  outline-offset: 3px !important;
}

html body.products-page .products-carousel-arrows button {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--td-radius-default) !important;
  background: #536579 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: background-color var(--td-motion-duration-base) var(--td-motion-easing-standard), transform var(--td-motion-duration-base) var(--td-motion-easing-standard) !important;
}

html body.products-page .products-carousel-arrows button:hover { background: #112d5f !important; }
html body.products-page .products-carousel-arrows button:active { background: #092143 !important; transform: scale(.96) !important; }

html body.products-page .products-carousel-arrows img {
  width: 28px !important;
  height: 28px !important;
  filter: brightness(0) invert(1) !important;
}

html body.products-page [data-product-carousel-status] {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (min-width: 1280px) {
  html body.products-page > .subnav,
  html body.products-page .site-header + .subnav,
  html body.products-page .site-header.qn-header-light + .subnav {
    position: sticky !important;
    inset: 88px 0 auto !important;
    z-index: 1090 !important;
    width: 100% !important;
    height: 64px !important;
    background: var(--td-bg-color-page) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html body.products-page .subnav .subnav-scroll {
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: center !important;
  }

  html body.products-page .products-overview-hero,
  html body.products-page .products-carousel-section {
    min-height: calc(100svh - 152px) !important;
  }

  html body.products-page .products-overview-hero { padding: 80px 0 !important; }
  html body.products-page .products-carousel-section { padding: 64px 0 !important; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body.products-page .products-carousel-card {
    flex-basis: calc((100% - 24px) / 2) !important;
  }
}

@media (max-width: 767px) {
  html body.products-page .products-overview-hero,
  html body.products-page .products-carousel-section {
    min-height: 0 !important;
    padding: 72px 0 !important;
  }

  html body.products-page .products-overview-copy { gap: 40px !important; }
  html body.products-page .products-carousel { margin-top: 56px !important; }
  html body.products-page .products-carousel-card { flex-basis: 100% !important; height: 500px !important; }
  html body.products-page .products-carousel-controls { margin-top: 32px !important; }
  html body.products-page .products-carousel-copy strong { font-size: 24px !important; }
  html body.products-page .products-carousel-copy > span { font-size: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body.products-page .products-carousel-track,
  html body.products-page .products-carousel-card,
  html body.products-page .products-carousel-dots button,
  html body.products-page .products-carousel-arrows button {
    transition-duration: 0ms !important;
  }
}

/* Product overview absolute terminal lock for the legacy light/dark nav theme. */
html body[class][class][class][class][class][class].products-page #product-matrix {
  scroll-margin-top: 152px !important;
}

@media (min-width: 1280px) {
  html body[class][class][class][class][class][class].products-page > .subnav,
  html body[class][class][class][class][class][class].products-page .site-header + .subnav,
  html body[class][class][class][class][class][class].products-page .site-header.qn-header-light + .subnav {
    background: #e8ebf0 !important;
    border: 0 !important;
  }

  html body[class][class][class][class][class][class].products-page > .subnav a {
    background: transparent !important;
    border: 0 !important;
    color: #7d8795 !important;
  }

  html body[class][class][class][class][class][class].products-page > .subnav .subnav-scroll {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[class][class][class][class][class][class].products-page > .subnav a:hover,
  html body[class][class][class][class][class][class].products-page > .subnav a:focus-visible,
  html body[class][class][class][class][class][class].products-page > .subnav a.active,
  html body[class][class][class][class][class][class].products-page > .subnav a[aria-current="page"] {
    background: transparent !important;
    color: #112d5f !important;
  }
}

/* 2026-08-18 final visual refinement: 1440 desktop baseline and compact screens. */

/* Lighter capability surfaces use the same brand palette while preserving contrast. */
html body[class][class][class][class][class][class][class][class][class].home-page .capability-item {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42)),
    linear-gradient(180deg, rgba(17, 45, 95, .08), rgba(17, 45, 95, .03)) !important;
  color: #112d5f !important;
  box-shadow: 0 14px 34px rgba(17, 45, 95, .08) !important;
  transition: transform 200ms cubic-bezier(.38, 0, .24, 1), box-shadow 200ms cubic-bezier(.38, 0, .24, 1), background-color 200ms cubic-bezier(.38, 0, .24, 1) !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 4px !important;
  background: linear-gradient(90deg, #112d5f 0%, #2388f5 100%) !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-item::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 190px !important;
  height: 190px !important;
  inset: -96px -76px auto auto !important;
  border-radius: 50% !important;
  background: rgba(35, 136, 245, .08) !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-item:hover,
html body[class][class][class][class][class][class][class][class][class].home-page .capability-item:focus-visible {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .56)),
    linear-gradient(180deg, rgba(17, 45, 95, .10), rgba(17, 45, 95, .04)) !important;
  color: #112d5f !important;
  box-shadow: 0 20px 44px rgba(17, 45, 95, .13) !important;
  transform: translateY(-6px) !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-item h3,
html body[class][class][class][class][class][class][class][class][class].home-page .capability-item p {
  color: #112d5f !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-icon-zone > img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(44%) saturate(1995%) hue-rotate(188deg) brightness(89%) contrast(98%) !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-teleop-icon > i {
  background: #112d5f !important;
}

html body[class][class][class][class][class][class][class][class][class].home-page .capability-teleop-icon > i::before,
html body[class][class][class][class][class][class][class][class][class].home-page .capability-teleop-icon > i::after {
  border-color: #112d5f !important;
}

/* Footer is now one shared, shorter composition on every page. */
html body[class][class][class][class][class][class][class][class][class] footer.footer,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-main,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
  border: 0 !important;
  background: #c7ced9 !important;
  color: #4d5e74 !important;
}

html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p span,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-email span {
  color: #4d5e74 !important;
}

html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-email strong {
  color: #112d5f !important;
}

html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item:hover,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item:focus-visible,
html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item:focus-within {
  background: rgba(255, 255, 255, .32) !important;
}

@media (min-width: 1280px) {
  /* Global navigation: same 1440 geometry, with the requested 20px type. */
  :root { --td-site-header-height: 120px; }

  html body[class][class][class][class][class][class][class][class][class] header.site-header,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled,
  html body[class][class][class][class][class][class][class][class][class] header.site-header .header-inner,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .header-inner,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .header-inner,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-inner {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .header-inner {
    grid-template-columns: 212px minmax(0, 1fr) 220px !important;
    column-gap: 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .brand img {
    width: 212px !important;
    max-width: 212px !important;
    height: auto !important;
    max-height: 74px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .main-nav,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    width: 708px !important;
    min-width: 708px !important;
    height: 74px !important;
    min-height: 74px !important;
    grid-template-columns: repeat(3, 220px) !important;
    gap: 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header .language-current,
  html body[class][class][class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class][class][class] header.site-header .header-consult-button {
    font-size: 20px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    width: 220px !important;
    min-width: 220px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .header-actions,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .header-actions,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-actions {
    width: 220px !important;
    min-width: 220px !important;
    height: 74px !important;
    min-height: 74px !important;
    grid-template-columns: 98px 98px !important;
    gap: 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .language-switcher {
    width: 98px !important;
    min-width: 98px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .language-toggle,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .language-toggle,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .language-toggle,
  html body[class][class][class][class][class][class][class][class][class] header.site-header .header-consult-button,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .header-consult-button,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .header-consult-button,
  html body[class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-consult-button {
    width: 98px !important;
    min-width: 98px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    font-size: 20px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] nav.subnav,
  html body[class][class][class][class][class][class][class][class][class].products-page > .subnav,
  html body[class][class][class][class][class][class][class][class][class].products-page .site-header + .subnav,
  html body[class][class][class][class][class][class][class][class][class].products-page .site-header.qn-header-light + .subnav {
    inset: 120px 0 auto !important;
    top: 120px !important;
  }

  /* Screen 4: centered, compact rows that fit the 1920 × 1080 content viewport. */
  html body[class][class][class][class][class][class][class][class][class].home-page .home-benefits-section {
    min-height: calc(100svh - 120px) !important;
    padding: 48px 0 52px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .home-benefits-section > .container {
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-list {
    width: min(100%, 1120px) !important;
    display: grid !important;
    gap: 24px !important;
    margin: 80px auto 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-item,
  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-item.is-reversed {
    min-height: 132px !important;
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 56px !important;
    align-items: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-item.is-reversed .benefit-icon-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-item.is-reversed .benefit-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-icon-zone {
    width: 128px !important;
    height: 128px !important;
    aspect-ratio: 1 !important;
    padding: 18px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-icon-zone img {
    width: 92px !important;
    height: 92px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-copy h3 {
    margin: 0 0 10px !important;
    font-size: 30px !important;
    line-height: 1.3 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-copy p,
  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-copy strong {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].home-page .benefit-copy strong {
    margin-top: 8px !important;
  }

  /* Product overview controls share one centered 1440px baseline. */
  html body[class][class][class][class][class][class][class][class][class].products-page .products-overview-hero .products-carousel-controls {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 32px auto 0 !important;
    padding: 0 !important;
  }

  /* Product screens 2–3: title + 80px gap + cards fit into one viewport. */
  html body[class][class][class][class][class][class][class][class][class].products-page .product-category-section {
    min-height: calc(100svh - 184px) !important;
    margin: 0 0 96px !important;
    padding: 44px 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-category-section > .container {
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-grid {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin: 80px auto 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-card {
    height: 560px !important;
    grid-template-rows: 306px minmax(0, 1fr) !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-media {
    padding: 22px 36px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:first-child .product-detail-media img {
    width: auto !important;
    height: 250px !important;
    max-width: 70% !important;
    max-height: 250px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-category-hardware .product-detail-card:nth-child(2) .product-detail-media img {
    max-width: 74% !important;
    max-height: 74% !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-body {
    gap: 10px !important;
    padding: 22px 32px 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-body h3 {
    font-size: 28px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-body p {
    min-height: 25px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-tags li {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  html body[class][class][class][class][class][class][class][class][class].products-page .product-detail-action {
    min-width: 144px !important;
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 16px !important;
  }

  /* A 384px unified footer is 25% shorter than the prior 512px global lock. */
  html body[class][class][class][class][class][class][class][class][class] footer.footer {
    min-height: 384px !important;
    height: 384px !important;
    margin: 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-main {
    min-height: 282px !important;
    height: 282px !important;
    padding: 38px 0 !important;
    align-items: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack,
  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-contact-social {
    align-self: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack img {
    width: 196px !important;
    max-height: 62px !important;
    margin: 0 0 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p,
  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p span {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-contact-social {
    gap: 24px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-icons {
    gap: 18px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item {
    width: 52px !important;
    height: 52px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-social-icon {
    width: 42px !important;
    height: 42px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom,
  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    min-height: 102px !important;
    height: 102px !important;
  }

  html body[class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
    align-items: flex-start !important;
    padding-top: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .capability-item { transition-duration: 0ms !important; }
}

/* 2026-08-19 unified product and marketing system.
   TDesign-aligned semantic states, 1440 desktop grid, 4px spacing rhythm. */
:root {
  --qn-page: #e8ebf0;
  --qn-surface: #f4f7fb;
  --qn-surface-2: #dce6f5;
  --qn-navy: #112d5f;
  --qn-navy-2: #183d73;
  --qn-ink: #172033;
  --qn-muted: #5f6f84;
  --qn-border: #ccd6e3;
  --qn-focus: #2388f5;
  --qn-footer: #354258;
  --qn-ease: cubic-bezier(.38, 0, .24, 1);
}

html body.qn-unified {
  overflow-x: clip !important;
  background: var(--qn-page) !important;
  color: var(--qn-ink) !important;
  font-family: "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}

html body.qn-unified .container,
html body.qn-unified .pdf-screen-inner,
html body.qn-unified .subnav-scroll {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}

html body.qn-unified :where(a, button):focus-visible {
  outline: 3px solid var(--qn-focus) !important;
  outline-offset: 3px !important;
}

html body.qn-unified header.site-header,
html body.qn-unified header.site-header.is-scrolled,
html body.qn-unified header.site-header.qn-header-light,
html body.qn-unified header.site-header.qn-header-light.is-scrolled {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
}

html body.qn-unified header.site-header .header-inner,
html body.qn-unified header.site-header.is-scrolled .header-inner,
html body.qn-unified header.site-header.qn-header-light .header-inner,
html body.qn-unified header.site-header.qn-header-light.is-scrolled .header-inner {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding: 0 !important;
  grid-template-columns: 184px minmax(0, 1fr) 196px !important;
  gap: 24px !important;
}

html body.qn-unified header.site-header .brand img {
  width: 184px !important;
  max-width: 184px !important;
  max-height: 64px !important;
  object-fit: contain !important;
}

html body.qn-unified header.site-header .main-nav,
html body.qn-unified header.site-header.is-scrolled .main-nav,
html body.qn-unified header.site-header.qn-header-light .main-nav,
html body.qn-unified header.site-header.qn-header-light.is-scrolled .main-nav {
  width: 588px !important;
  min-width: 588px !important;
  height: 60px !important;
  min-height: 60px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 180px) !important;
  gap: 24px !important;
  margin-inline: auto !important;
}

html body.qn-unified header.site-header .main-nav > a,
html body.qn-unified header.site-header.is-scrolled .main-nav > a,
html body.qn-unified header.site-header.qn-header-light .main-nav > a,
html body.qn-unified header.site-header.qn-header-light.is-scrolled .main-nav > a {
  width: 180px !important;
  min-width: 180px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  border-radius: 999px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  transition: background-color 180ms var(--qn-ease), color 180ms var(--qn-ease), transform 180ms var(--qn-ease) !important;
}

html body.qn-unified header.site-header .main-nav > a:hover { transform: translateY(-2px) !important; }

html body.qn-unified header.site-header .header-actions {
  width: 196px !important;
  min-width: 196px !important;
  height: 60px !important;
  min-height: 60px !important;
  grid-template-columns: 86px 86px !important;
  gap: 24px !important;
}

html body.qn-unified header.site-header .language-switcher,
html body.qn-unified header.site-header .language-toggle,
html body.qn-unified header.site-header .header-consult-button {
  width: 86px !important;
  min-width: 86px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  border-radius: 9px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

html body.qn-unified nav.subnav,
html body.qn-unified .site-header + nav.subnav {
  top: 96px !important;
  inset-block-start: 96px !important;
  height: 72px !important;
  min-height: 72px !important;
  background: rgba(232, 235, 240, .94) !important;
  border: 0 !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

html body.qn-unified .subnav-scroll {
  height: 72px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 0 !important;
}

html body.qn-unified .subnav-scroll a {
  min-width: 0 !important;
  padding: 12px 8px !important;
  color: #7c8899 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-align: center !important;
  transition: color 160ms var(--qn-ease), background-color 160ms var(--qn-ease) !important;
}

html body.qn-unified .subnav-scroll a:hover,
html body.qn-unified .subnav-scroll a:focus-visible,
html body.qn-unified .subnav-scroll a.active { color: var(--qn-navy) !important; }

/* Homepage */
html body.qn-unified.home-page .home-video-hero,
html body.qn-unified.home-page .home-video-stage {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 720px !important;
  margin: 0 !important;
  background: #020306 !important;
}

html body.qn-unified.home-page .home-video-stage video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body.qn-unified.home-page main > section:not(.home-video-hero) {
  min-height: 760px !important;
  margin: 0 0 96px !important;
  padding: 96px 0 !important;
  display: flex !important;
  align-items: center !important;
  background: var(--qn-page) !important;
}

html body.qn-unified.home-page .home-centered-copy h1,
html body.qn-unified.home-page .home-capabilities-section h2,
html body.qn-unified.home-page .home-benefits-section h2,
html body.qn-unified.home-page .home-contact-section h2 {
  max-width: 1120px !important;
  margin: 0 auto !important;
  color: var(--qn-ink) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
}

html body.qn-unified.home-page .home-centered-copy p {
  max-width: 1040px !important;
  margin: 48px auto 0 !important;
  color: var(--qn-navy) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

html body.qn-unified.home-page .capability-grid {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 80px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

html body.qn-unified.home-page .capability-item {
  min-height: 360px !important;
  padding: 48px 28px !important;
  border: 1px solid rgba(17, 45, 95, .08) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #f7f9fc, #dfe7f2) !important;
  box-shadow: 0 1px 2px rgba(17, 45, 95, .04) !important;
  color: var(--qn-navy) !important;
  transition: transform 200ms var(--qn-ease), box-shadow 200ms var(--qn-ease), border-color 200ms var(--qn-ease) !important;
}

html body.qn-unified.home-page .capability-item::before,
html body.qn-unified.home-page .capability-item::after { content: none !important; }
html body.qn-unified.home-page .capability-item:hover,
html body.qn-unified.home-page .capability-item:focus-visible {
  transform: translateY(-8px) !important;
  border-color: rgba(35, 136, 245, .36) !important;
  box-shadow: 0 18px 42px rgba(17, 45, 95, .14) !important;
}

html body.qn-unified.home-page .capability-icon-zone { width: 106px !important; height: 106px !important; }
html body.qn-unified.home-page .capability-item h3 { color: var(--qn-navy) !important; font-size: 28px !important; font-weight: 600 !important; }
html body.qn-unified.home-page .capability-item p { color: #4d5e74 !important; font-size: 19px !important; line-height: 1.6 !important; }

html body.qn-unified.home-page .benefit-list {
  width: min(100%, 1120px) !important;
  margin: 80px auto 0 !important;
  display: grid !important;
  gap: 12px !important;
}

html body.qn-unified.home-page .benefit-item,
html body.qn-unified.home-page .benefit-item.is-reversed {
  min-height: 144px !important;
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: center !important;
}

html body.qn-unified.home-page .benefit-icon-zone {
  width: 128px !important;
  height: 128px !important;
  padding: 18px !important;
  background: transparent !important;
  border: 0 !important;
}

html body.qn-unified.home-page .benefit-item.is-reversed .benefit-icon-zone { grid-column: 1 !important; grid-row: 1 !important; }
html body.qn-unified.home-page .benefit-item.is-reversed .benefit-copy { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; }
html body.qn-unified.home-page .benefit-copy h3 { margin: 0 0 8px !important; font-size: 28px !important; line-height: 1.3 !important; }
html body.qn-unified.home-page .benefit-copy p { margin: 0 !important; font-size: 18px !important; line-height: 1.55 !important; }
html body.qn-unified.home-page .benefit-copy strong {
  display: inline-block !important;
  margin-top: 10px !important;
  color: var(--qn-navy) !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  padding-bottom: 3px !important;
  border-bottom: 3px solid var(--qn-focus) !important;
}

html body.qn-unified.home-page .home-contact-section { min-height: 640px !important; margin-bottom: 80px !important; }
html body.qn-unified.home-page .home-contact-button {
  width: 220px !important;
  height: 60px !important;
  margin: 80px auto 0 !important;
  border-radius: 9px !important;
  background: var(--qn-navy) !important;
  font-size: 20px !important;
  transition: background-color 180ms var(--qn-ease), transform 180ms var(--qn-ease) !important;
}
html body.qn-unified.home-page .home-contact-button:hover { background: #1e4e8c !important; transform: translateY(-3px) !important; }

/* Product overview */
html body.qn-unified.products-page .products-overview-hero {
  min-height: 980px !important;
  margin: 0 0 96px !important;
  padding: 104px 0 72px !important;
  background: var(--qn-page) !important;
}

html body.qn-unified.products-page .products-overview-copy h1,
html body.qn-unified.products-page .product-category-section h2 {
  color: var(--qn-ink) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body.qn-unified.products-page .products-overview-copy p {
  max-width: 960px !important;
  margin: 48px auto 0 !important;
  color: var(--qn-navy) !important;
  font-size: 21px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

html body.qn-unified.products-page .products-carousel {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 80px auto 0 !important;
}

html body.qn-unified.products-page .products-carousel-viewport { width: 100% !important; height: 500px !important; overflow: visible !important; }
html body.qn-unified.products-page .products-carousel-track { gap: 24px !important; }
html body.qn-unified.products-page .products-carousel-card {
  width: 880px !important;
  height: 500px !important;
  flex: 0 0 880px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #173a6c, #071528) !important;
  box-shadow: 0 14px 32px rgba(17, 45, 95, .16) !important;
  opacity: .42 !important;
  transform: scale(.88) !important;
  transition: opacity 240ms var(--qn-ease), transform 240ms var(--qn-ease), filter 240ms var(--qn-ease) !important;
}

html body.qn-unified.products-page .products-carousel-card.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

html body.qn-unified.products-page .products-carousel-card:not(.is-active) { filter: saturate(.55) !important; pointer-events: none !important; }
html body.qn-unified.products-page .products-carousel-media { height: 100% !important; background: transparent !important; }
html body.qn-unified.products-page .products-carousel-media img { max-width: 78% !important; max-height: 76% !important; object-fit: contain !important; transition: transform 260ms var(--qn-ease) !important; }
html body.qn-unified.products-page .products-carousel-card.is-active:hover .products-carousel-media img { transform: scale(1.035) !important; }
html body.qn-unified.products-page .products-carousel-copy {
  inset: auto 32px 28px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  color: #fff !important;
}
html body.qn-unified.products-page .products-carousel-copy strong { font-size: 28px !important; }
html body.qn-unified.products-page .products-carousel-copy span { font-size: 23px !important; }
html body.qn-unified.products-page .products-carousel-controls { width: 100% !important; margin: 28px auto 0 !important; }
html body.qn-unified.products-page .products-carousel-arrows button { width: 52px !important; height: 52px !important; border-radius: 6px !important; transition: transform 160ms var(--qn-ease), background-color 160ms var(--qn-ease) !important; }
html body.qn-unified.products-page .products-carousel-arrows button:hover { transform: translateY(-3px) !important; background: var(--qn-navy) !important; }

html body.qn-unified.products-page .product-category-section {
  min-height: 860px !important;
  margin: 0 0 96px !important;
  padding: 72px 0 !important;
  background: var(--qn-page) !important;
}
html body.qn-unified.products-page .product-detail-grid { width: min(100%, 1280px) !important; margin: 80px auto 0 !important; gap: 32px !important; }
html body.qn-unified.products-page .product-detail-card {
  height: 560px !important;
  grid-template-rows: 304px 1fr !important;
  overflow: hidden !important;
  border: 1px solid var(--qn-border) !important;
  border-radius: 12px !important;
  background: rgba(247, 249, 252, .72) !important;
  box-shadow: none !important;
  transition: transform 200ms var(--qn-ease), box-shadow 200ms var(--qn-ease), border-color 200ms var(--qn-ease) !important;
}
html body.qn-unified.products-page .product-detail-card:hover { transform: translateY(-6px) !important; border-color: #9dbce2 !important; box-shadow: 0 16px 36px rgba(17, 45, 95, .12) !important; }
html body.qn-unified.products-page .product-detail-media { background: linear-gradient(145deg, #edf3fa, #dce6f5) !important; }
html body.qn-unified.products-page .product-detail-body { padding: 22px 32px 24px !important; }
html body.qn-unified.products-page .product-detail-body h3 { color: var(--qn-navy) !important; font-size: 28px !important; }
html body.qn-unified.products-page .product-detail-action { height: 44px !important; border-radius: 6px !important; background: var(--qn-navy) !important; }

/* Product detail pages */
html body.qn-unified.pdf-product-page .pdf-product-flow { padding-top: 168px !important; }
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen {
  min-height: 860px !important;
  height: auto !important;
  margin: 0 0 96px !important;
  padding: 80px 0 !important;
  background: var(--qn-page) !important;
}

html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child {
  min-height: 840px !important;
  margin-top: 0 !important;
  padding: 64px 0 80px !important;
  background: var(--qn-page) !important;
  overflow: visible !important;
}

html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid {
  min-height: 680px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 0 !important;
}

html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  color: var(--qn-navy) !important;
}
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  grid-column: 1 / span 6 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  overflow: visible !important;
}
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual::before,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual::after { content: none !important; }
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual img {
  width: 100% !important;
  height: 590px !important;
  max-width: 640px !important;
  max-height: 590px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 22px 32px rgba(17, 45, 95, .16)) !important;
}
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy { grid-column: 7 / -1 !important; grid-row: 1 !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy h1,
html body.qn-unified.pdf-product-page .pdf-hero-copy .product-name,
html body.qn-unified.pdf-product-page .pdf-hero-copy .product-cn,
html body.qn-unified.pdf-product-page .pdf-hero-copy .lead { color: var(--qn-navy) !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy .product-name { font-size: 56px !important; line-height: 1.2 !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy .product-cn { margin-top: 40px !important; font-size: 30px !important; line-height: 1.35 !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy .lead { margin-top: 32px !important; font-size: 21px !important; line-height: 1.65 !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy .copy { color: var(--qn-muted) !important; font-size: 18px !important; line-height: 1.7 !important; }
html body.qn-unified.pdf-product-page .pdf-product-tags { gap: 12px !important; }
html body.qn-unified.pdf-product-page .pdf-product-tags span { min-height: 52px !important; padding: 0 20px !important; border: 0 !important; border-radius: 6px !important; background: #d7e1ef !important; color: #4d5e74 !important; font-size: 16px !important; }
html body.qn-unified.pdf-product-page .pdf-hero-copy .button.secondary { width: 100% !important; height: 56px !important; border: 0 !important; border-radius: 999px !important; background: var(--qn-navy) !important; color: #fff !important; }

html body.qn-unified.pdf-product-page .product-feature-screen { min-height: 900px !important; }
html body.qn-unified.pdf-product-page .pdf-feature-title,
html body.qn-unified.pdf-product-page .pdf-screen-head h2,
html body.qn-unified.pdf-product-page .pdf-contact-grid h2 {
  max-width: 1120px !important;
  margin: 0 auto !important;
  color: var(--qn-ink) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
html body.qn-unified.pdf-product-page .pdf-screen-head p { max-width: 760px !important; margin: 20px auto 0 !important; text-align: center !important; color: var(--qn-muted) !important; }
html body.qn-unified.pdf-product-page .pdf-feature-grid {
  margin-top: 80px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
html body.qn-unified.pdf-product-page .pdf-gallery { grid-column: 1 / span 7 !important; height: 560px !important; }
html body.qn-unified.pdf-product-page .pdf-gallery-main {
  height: 560px !important;
  min-height: 560px !important;
  padding: 36px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}
html body.qn-unified.pdf-product-page .pdf-gallery-main img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body.qn-unified.pdf-product-page .pdf-feature-copy { grid-column: 8 / -1 !important; height: 560px !important; min-height: 560px !important; padding: 0 !important; }
html body.qn-unified.pdf-product-page .pdf-feature-list { height: 100% !important; display: grid !important; grid-template-rows: repeat(auto-fit, minmax(0, 1fr)) !important; gap: 8px !important; }
html body.qn-unified.pdf-product-page .pdf-feature-list > li,
html body.qn-unified.pdf-product-page .pdf-feature-list > li:not(.is-active),
html body.qn-unified.pdf-product-page .pdf-feature-list > li.is-active {
  display: flex !important;
  min-height: 0 !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 6px 6px 0 !important;
  background: transparent !important;
}
html body.qn-unified.pdf-product-page .pdf-feature-list > li.is-active { border-left-color: var(--qn-focus) !important; background: rgba(255,255,255,.56) !important; }
html body.qn-unified.pdf-product-page .pdf-feature-list > li > button { width: 100% !important; min-height: 0 !important; padding: 18px 20px !important; text-align: left !important; }
html body.qn-unified.pdf-product-page .pdf-feature-list strong { color: var(--qn-ink) !important; font-size: 24px !important; }
html body.qn-unified.pdf-product-page .pdf-feature-list span { margin-top: 8px !important; color: var(--qn-muted) !important; font-size: 16px !important; line-height: 1.55 !important; }

html body.qn-unified.pdf-product-page .glove-hardware-screen,
html body.qn-unified.pdf-product-page .exo-hardware-screen { display: none !important; }

html body.qn-unified.pdf-product-page .pdf-spec-shell,
html body.qn-unified.pdf-product-page .product-delivery-stack { margin-top: 64px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

html body.qn-unified.pdf-product-page .qn-product-tabs {
  width: min(100%, 960px) !important;
  margin: 0 auto 56px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack > .qn-product-tabs { grid-template-columns: repeat(2, 220px) !important; justify-content: center !important; }
html body.qn-unified.pdf-product-page .qn-product-tabs button {
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--qn-navy) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: color 160ms var(--qn-ease), background-color 160ms var(--qn-ease), transform 160ms var(--qn-ease) !important;
}
html body.qn-unified.pdf-product-page .qn-product-tabs button:hover { background: rgba(17,45,95,.08) !important; transform: translateY(-2px) !important; }
html body.qn-unified.pdf-product-page .qn-product-tabs button.is-active { background: var(--qn-navy) !important; color: #fff !important; }
html body.qn-unified.pdf-product-page .qn-product-tab-panel[hidden] { display: none !important; }
html body.qn-unified.pdf-product-page .qn-spec-panel {
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
}
html body.qn-unified.pdf-product-page .qn-spec-media {
  grid-column: 1 / span 7 !important;
  height: 500px !important;
  display: grid !important;
  place-items: center !important;
  padding: 32px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}
html body.qn-unified.pdf-product-page .qn-spec-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body.qn-unified.pdf-product-page .qn-spec-list { grid-column: 8 / -1 !important; display: grid !important; gap: 0 !important; }
html body.qn-unified.pdf-product-page .qn-spec-list > div {
  min-height: 50px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.4fr) !important;
  gap: 18px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--qn-border) !important;
}
html body.qn-unified.pdf-product-page .qn-spec-list dt { color: var(--qn-navy) !important; font-weight: 600 !important; }
html body.qn-unified.pdf-product-page .qn-spec-list dd { color: #26364c !important; }

html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel[hidden] {
  display: none !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
  height: 500px !important;
  padding: 32px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #edf3fa, #dce6f5) !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
  padding: 0 !important;
}
html body.qn-unified.pdf-product-page .delivery-copy h3 { color: var(--qn-navy) !important; font-size: 28px !important; }

html body.qn-unified.pdf-product-page .pdf-contact-screen {
  min-height: 600px !important;
  margin-bottom: 80px !important;
  display: flex !important;
  align-items: center !important;
}
html body.qn-unified.pdf-product-page .pdf-contact-grid { min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 64px !important; align-items: center !important; }
html body.qn-unified.pdf-product-page .pdf-contact-actions .button { min-width: 220px !important; height: 60px !important; border-radius: 9px !important; background: var(--qn-navy) !important; font-size: 20px !important; }

/* Shared dark footer */
html body.qn-unified footer.footer,
html body.qn-unified footer.footer .footer-simple-main,
html body.qn-unified footer.footer .footer-simple-bottom,
html body.qn-unified footer.footer .footer-simple-bottom .container {
  background: var(--qn-footer) !important;
  color: rgba(255,255,255,.72) !important;
  border: 0 !important;
}
html body.qn-unified footer.footer { height: 384px !important; min-height: 384px !important; margin: 0 !important; }
html body.qn-unified footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  min-height: 282px !important;
  height: 282px !important;
  padding: 42px 0 32px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: center !important;
}
html body.qn-unified footer.footer .footer-brand-stack { grid-column: 1 / span 6 !important; }
html body.qn-unified footer.footer .footer-contact-social { grid-column: 9 / -1 !important; align-self: center !important; }
html body.qn-unified footer.footer .footer-brand-stack img { width: 196px !important; max-height: 62px !important; margin: 0 0 24px !important; }
html body.qn-unified footer.footer .footer-brand-stack p,
html body.qn-unified footer.footer .footer-brand-stack p span,
html body.qn-unified footer.footer .footer-email span { color: rgba(255,255,255,.72) !important; font-size: 17px !important; line-height: 1.55 !important; }
html body.qn-unified footer.footer .footer-email strong { color: #fff !important; }
html body.qn-unified footer.footer .footer-social-icons { gap: 16px !important; }
html body.qn-unified footer.footer .footer-social-item { width: 52px !important; height: 52px !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 9px !important; background: transparent !important; }
html body.qn-unified footer.footer .footer-social-item:hover,
html body.qn-unified footer.footer .footer-social-item:focus-visible { background: rgba(255,255,255,.12) !important; transform: translateY(-3px) !important; }
html body.qn-unified footer.footer .footer-social-icon { width: 38px !important; height: 38px !important; }
html body.qn-unified footer.footer .footer-simple-bottom,
html body.qn-unified footer.footer .footer-simple-bottom .container { min-height: 102px !important; height: 102px !important; }
html body.qn-unified footer.footer .footer-simple-bottom .container { width: min(calc(100% - 48px), 1440px) !important; max-width: 1440px !important; padding-top: 20px !important; }

@media (max-width: 1279px) {
  html body.qn-unified header.site-header .header-inner { grid-template-columns: 164px minmax(0,1fr) auto !important; }
  html body.qn-unified header.site-header .main-nav { width: auto !important; min-width: 0 !important; grid-template-columns: repeat(3, minmax(128px, 1fr)) !important; }
  html body.qn-unified header.site-header .main-nav > a { width: auto !important; min-width: 0 !important; }
  html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual img { height: 500px !important; }
}

@media (max-width: 899px) {
  html body.qn-unified header.site-header,
  html body.qn-unified header.site-header .header-inner { height: 76px !important; min-height: 76px !important; max-height: 76px !important; }
  html body.qn-unified nav.subnav,
  html body.qn-unified .site-header + nav.subnav { top: 76px !important; inset-block-start: 76px !important; }
  html body.qn-unified .subnav-scroll { display: flex !important; gap: 8px !important; overflow-x: auto !important; }
  html body.qn-unified .subnav-scroll a { min-width: max-content !important; }
  html body.qn-unified.home-page main > section:not(.home-video-hero),
  html body.qn-unified.products-page .product-category-section,
  html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen { min-height: 0 !important; padding: 72px 0 !important; }
  html body.qn-unified.home-page .home-centered-copy h1,
  html body.qn-unified.home-page .home-capabilities-section h2,
  html body.qn-unified.home-page .home-benefits-section h2,
  html body.qn-unified.home-page .home-contact-section h2,
  html body.qn-unified.products-page .products-overview-copy h1,
  html body.qn-unified.products-page .product-category-section h2,
  html body.qn-unified.pdf-product-page .pdf-feature-title,
  html body.qn-unified.pdf-product-page .pdf-screen-head h2,
  html body.qn-unified.pdf-product-page .pdf-contact-grid h2 { font-size: 38px !important; }
  html body.qn-unified.home-page .capability-grid,
  html body.qn-unified.products-page .product-detail-grid { grid-template-columns: 1fr !important; }
  html body.qn-unified.products-page .products-carousel-card { width: calc(100vw - 56px) !important; flex-basis: calc(100vw - 56px) !important; }
  html body.qn-unified.pdf-product-page .pdf-product-flow { padding-top: 148px !important; }
  html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
  html body.qn-unified.pdf-product-page .pdf-feature-grid,
  html body.qn-unified.pdf-product-page .qn-spec-panel,
  html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel { display: grid !important; grid-template-columns: 1fr !important; }
  html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual,
  html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy,
  html body.qn-unified.pdf-product-page .pdf-gallery,
  html body.qn-unified.pdf-product-page .pdf-feature-copy,
  html body.qn-unified.pdf-product-page .qn-spec-media,
  html body.qn-unified.pdf-product-page .qn-spec-list,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy { grid-column: 1 !important; grid-row: auto !important; }
  html body.qn-unified.pdf-product-page .qn-product-tabs { grid-template-columns: 1fr !important; gap: 8px !important; }
  html body.qn-unified.pdf-product-page .product-delivery-stack > .qn-product-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  html body.qn-unified footer.footer { height: auto !important; min-height: 0 !important; }
  html body.qn-unified footer.footer .footer-simple-main { height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 36px !important; }
  html body.qn-unified footer.footer .footer-brand-stack,
  html body.qn-unified footer.footer .footer-contact-social { grid-column: 1 !important; justify-items: start !important; text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body.qn-unified *,
  html body.qn-unified *::before,
  html body.qn-unified *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Final shared-footer theme lock: supersedes historical page-specific light themes. */
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-main,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom .container {
  background: #354258 !important;
  color: rgba(255, 255, 255, .72) !important;
  border: 0 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack img {
  filter: brightness(0) invert(1) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-brand-stack p span,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-email span,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom .container,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-simple-bottom span {
  color: rgba(255, 255, 255, .72) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class] footer.footer .footer-email strong {
  color: #fff !important;
}

/* 2026-08-19 shared navigation lock
   One compact desktop header is reused by every page.  The secondary product
   navigation uses a 952px rail: 1920 - (484 * 2) = 952. */
@media (min-width: 1280px) {
  :root { --td-site-header-height: 80px; }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-inner {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-inner {
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    grid-template-columns: 164px minmax(0, 1fr) 160px !important;
    column-gap: 20px !important;
    align-items: center !important;
    padding: 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .brand {
    width: 164px !important;
    min-width: 164px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .brand img {
    width: 164px !important;
    max-width: 164px !important;
    height: auto !important;
    max-height: 54px !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .main-nav,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav {
    width: 476px !important;
    min-width: 476px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 148px) !important;
    gap: 16px !important;
    align-items: center !important;
    margin: 0 auto !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .main-nav > a,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .main-nav > a {
    width: 148px !important;
    min-width: 148px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 17px !important;
    line-height: 48px !important;
    font-weight: 600 !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-actions,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.is-scrolled .header-actions,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light .header-actions,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header.qn-header-light.is-scrolled .header-actions {
    width: 160px !important;
    min-width: 160px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 72px 72px !important;
    gap: 16px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-switcher,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-consult-button {
    box-sizing: border-box !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    align-self: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-switcher {
    display: block !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .language-toggle,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] header.site-header .header-consult-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] nav.subnav,
  html body[class][class][class][class][class][class][class][class][class][class][class][class] .site-header + nav.subnav {
    inset: 80px 0 auto !important;
    top: 80px !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] nav.subnav .subnav-scroll {
    width: min(calc(100% - 48px), 952px) !important;
    max-width: 952px !important;
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: center !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class] nav.subnav .subnav-scroll > a {
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
  }

  html body[class][class][class][class][class][class][class][class][class][class][class][class].home-page .home-video-hero,
  html body[class][class][class][class][class][class][class][class][class][class][class][class].home-page .home-video-stage {
    height: calc(100svh - 80px) !important;
    min-height: calc(100svh - 80px) !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page .pdf-product-flow {
    padding-top: 144px !important;
  }
}

/* 2026-08-19 — terminal refinement overrides (keep last) */
@media (min-width: 769px) {
  html body.qn-unified nav.subnav,
  html body.qn-unified .site-header + nav.subnav { background: #e8ebf0 !important; }
  html body.qn-unified header.site-header .language-toggle,
  html body.qn-unified header.site-header .header-consult-button { font-size: 16px !important; line-height: 1 !important; }
}

html body.qn-unified.home-page .home-centered-copy p { color: #112d5f !important; }
html body.qn-unified[class][class][class][class][class][class][class][class][class][class].home-page .home-value-section .home-centered-copy > p {
  color: #112d5f !important;
}
html body.qn-unified.home-page .capability-item::before { content: none !important; display: none !important; }
html body.qn-unified.home-page .capability-item::after {
  content: "" !important; display: block !important; position: absolute !important;
  inset: 20px 20px auto auto !important; width: 66px !important; height: 66px !important;
  border: 1px solid rgba(35,136,245,.26) !important; border-radius: 50% !important;
  background: radial-gradient(circle, rgba(35,136,245,.14) 0 3px, transparent 4px) !important;
  box-shadow: 0 0 0 12px rgba(35,136,245,.045) !important; pointer-events: none !important;
  transition: transform 220ms var(--qn-ease), border-color 220ms var(--qn-ease) !important;
}
html body.qn-unified.home-page .capability-item:hover::after { transform: scale(1.08) rotate(8deg) !important; border-color: rgba(35,136,245,.5) !important; }
html body.qn-unified.home-page .capability-icon-zone::before,
html body.qn-unified.home-page .capability-icon-zone::after {
  content: none !important;
  display: none !important;
}

html body.qn-unified.home-page .benefit-list { width: min(100%,1080px) !important; margin: 80px auto 0 !important; gap: 24px !important; }
html body.qn-unified.home-page .benefit-item,
html body.qn-unified.home-page .benefit-item.is-reversed {
  width: 100% !important; display: grid !important; grid-template-columns: 144px minmax(0,1fr) !important;
  gap: 48px !important; align-items: center !important; padding: 14px 0 !important;
}
html body.qn-unified.home-page .benefit-item.is-reversed .benefit-icon-zone,
html body.qn-unified.home-page .benefit-item.is-reversed .benefit-copy { grid-column: auto !important; grid-row: auto !important; }
html body.qn-unified.home-page .benefit-icon-zone {
  width: 120px !important; height: 120px !important; display: grid !important; place-items: center !important;
  border-radius: 50% !important; position: relative !important;
  background: radial-gradient(circle,rgba(35,136,245,.11) 0 46%,transparent 47%) !important;
}
html body.qn-unified.home-page .benefit-icon-zone::before {
  content: "" !important; position: absolute !important; inset: 7px !important;
  border: 1px dashed rgba(17,45,95,.26) !important; border-radius: 50% !important;
  animation: qn-benefit-orbit 14s linear infinite !important;
}
html body.qn-unified.home-page .benefit-icon-zone img { width: 72px !important; height: 72px !important; position: relative !important; z-index: 1 !important; transition: transform 220ms var(--qn-ease) !important; }
html body.qn-unified.home-page .benefit-item:hover .benefit-icon-zone img { transform: translateY(-4px) scale(1.04) !important; }
html body.qn-unified.home-page .benefit-copy { width: 100% !important; max-width: none !important; text-align: left !important; }
html body.qn-unified.home-page .benefit-copy strong.benefit-output {
  width: fit-content !important; margin-top: 16px !important; padding: 9px 16px 9px 10px !important;
  display: inline-flex !important; align-items: center !important; gap: 14px !important;
  border: 1px solid rgba(35,136,245,.24) !important; border-radius: 999px !important;
  background: rgba(35,136,245,.075) !important; box-shadow: none !important; text-decoration: none !important;
  transition: transform 180ms var(--qn-ease),background-color 180ms var(--qn-ease),border-color 180ms var(--qn-ease) !important;
}
html body.qn-unified.home-page .benefit-output > span {
  min-width: 48px !important; height: 28px !important; display: inline-grid !important; place-items: center !important;
  border-radius: 999px !important; background: #112d5f !important; color: #fff !important;
  font-size: 13px !important; letter-spacing: .08em !important;
}
html body.qn-unified.home-page .benefit-output > b { color: #112d5f !important; font-weight: 650 !important; }
html body.qn-unified.home-page .benefit-item:hover .benefit-output { transform: translateX(6px) !important; border-color: rgba(35,136,245,.46) !important; background: rgba(35,136,245,.12) !important; }
@keyframes qn-benefit-orbit { to { transform: rotate(360deg); } }

html body.qn-unified footer.footer { height: 360px !important; min-height: 360px !important; }
html body.qn-unified footer.footer .footer-simple-main {
  width: min(calc(100% - 48px),1440px) !important; max-width: 1440px !important;
  height: 360px !important; min-height: 360px !important; margin: 0 auto !important; padding: 46px 0 26px !important;
  display: grid !important; grid-template-columns: repeat(12,minmax(0,1fr)) !important; grid-template-rows: 1fr auto !important;
  gap: 20px 24px !important; align-items: center !important;
}
html body.qn-unified footer.footer .footer-brand-stack { grid-column: 1/span 6 !important; grid-row: 1 !important; }
html body.qn-unified footer.footer .footer-contact-social { grid-column: 9/-1 !important; grid-row: 1 !important; align-self: center !important; }
html body.qn-unified footer.footer .footer-simple-bottom {
  position: static !important; grid-column: 1/-1 !important; grid-row: 2 !important;
  width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 20px 0 0 !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  border-top: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.7) !important;
}
html body.qn-unified footer.footer .footer-social-icons { gap: 14px !important; }
html body.qn-unified footer.footer .footer-social-item {
  width: 52px !important; height: 52px !important; border: 0 !important; border-radius: 8px !important;
  background: #f3f6fb !important; box-shadow: 0 5px 16px rgba(0,0,0,.12) !important;
}
html body.qn-unified footer.footer .footer-social-item:hover,
html body.qn-unified footer.footer .footer-social-item:focus-visible { background: #fff !important; transform: translateY(-3px) !important; }
html body.qn-unified footer.footer .footer-social-icon { width: 32px !important; height: 32px !important; opacity: 1 !important; filter: none !important; }

html body.qn-unified.products-page .products-overview-hero { margin-bottom: 48px !important; padding-bottom: 48px !important; }
html body.qn-unified.products-page .products-carousel,
html body.qn-unified.products-page .products-carousel-controls { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; }
html body.qn-unified.products-page .products-carousel::before,
html body.qn-unified.products-page .products-carousel::after,
html body.qn-unified.products-page .products-carousel-viewport::before,
html body.qn-unified.products-page .products-carousel-viewport::after { content: none !important; display: none !important; }
html body.qn-unified.products-page .products-carousel-card,
html body.qn-unified.products-page .products-carousel-card:not(.is-active) { opacity: 1 !important; filter: none !important; }
html body.qn-unified.products-page .products-carousel-dots button { background: #9fb1c7 !important; }
html body.qn-unified.products-page .products-carousel-dots button.is-active { background: #2388f5 !important; }
html body.qn-unified.products-page .products-carousel-arrows button,
html body.qn-unified.products-page .products-carousel-arrows button:hover { border: 0 !important; background: #d7e1ef !important; box-shadow: none !important; }
html body.qn-unified.products-page .products-carousel-arrows button img { filter: none !important; opacity: .88 !important; }
html body.qn-unified.products-page .product-category-section:first-of-type { padding-top: 36px !important; }

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].products-page .products-overview-hero {
  margin-bottom: 48px !important;
  padding-bottom: 24px !important;
}
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].products-page .products-carousel-card,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].products-page .products-carousel-card:not(.is-active) {
  opacity: 1 !important;
  filter: none !important;
}

html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual,
html body.qn-unified.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html body.qn-unified.pdf-product-page .pdf-product-tags { width: 100% !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; align-items: stretch !important; }
html body.qn-unified.pdf-product-page .pdf-product-tags span { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }

html body.qn-unified.pdf-product-page .glove-story-section { min-height: 0 !important; padding-bottom: 48px !important; }
html body.qn-unified.pdf-product-page .glove-story-list { width: min(100%,1200px) !important; margin: 80px auto 0 !important; display: grid !important; gap: 72px !important; }
html body.qn-unified.pdf-product-page .glove-story-item,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed { display: grid !important; grid-template-columns: repeat(12,minmax(0,1fr)) !important; gap: 48px !important; align-items: center !important; }
html body.qn-unified.pdf-product-page .glove-story-media,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy { grid-column: 1/span 7 !important; grid-row: 1 !important; }
html body.qn-unified.pdf-product-page .glove-story-copy,
html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media { grid-column: 8/-1 !important; grid-row: 1 !important; }
html body.qn-unified.pdf-product-page .glove-story-media {
  height: 390px !important; margin: 0 !important; padding: 28px !important; display: grid !important; place-items: center !important;
  overflow: hidden !important; border-radius: 10px !important; background: linear-gradient(145deg,#edf3fa,#dce6f5) !important;
}
html body.qn-unified.pdf-product-page .glove-story-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body.qn-unified.pdf-product-page .glove-story-copy { padding: 0 24px !important; }

html body.qn-unified.pdf-product-page .qn-spec-media { overflow: hidden !important; }
html body.qn-unified.pdf-product-page .qn-spec-media img { transition: opacity 180ms var(--qn-ease),transform 220ms var(--qn-ease) !important; }
html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
  min-height: 500px !important; display: grid !important; grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  gap: 48px !important; align-items: center !important; writing-mode: horizontal-tb !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel[hidden] { display: none !important; }
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media {
  grid-column: 1/span 7 !important; grid-row: 1 !important; width: 100% !important; height: 500px !important; padding: 32px !important;
  display: grid !important; place-items: center !important; overflow: hidden !important; border-radius: 10px !important;
  background: linear-gradient(145deg,#edf3fa,#dce6f5) !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy {
  grid-column: 8/-1 !important; grid-row: 1 !important; width: 100% !important; padding: 0 !important; writing-mode: horizontal-tb !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy,
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy * { writing-mode: horizontal-tb !important; word-break: normal !important; }
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines { margin: 28px 0 0 !important; display: grid !important; gap: 0 !important; }
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines li {
  min-height: 62px !important; padding: 14px 0 !important; display: grid !important; grid-template-columns: 120px minmax(0,1fr) !important;
  gap: 22px !important; align-items: start !important; border-bottom: 1px solid #c8d3e2 !important;
}
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines strong,
html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-lines span { display: block !important; width: auto !important; font-size: 18px !important; line-height: 1.65 !important; }

@media (max-width: 899px) {
  html body.qn-unified.home-page .benefit-item,
  html body.qn-unified.home-page .benefit-item.is-reversed,
  html body.qn-unified.pdf-product-page .glove-story-item,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed,
  html body.qn-unified.pdf-product-page .product-delivery-stack .qn-product-tab-panel { grid-template-columns: 1fr !important; }
  html body.qn-unified.home-page .benefit-icon-zone,
  html body.qn-unified.home-page .benefit-copy,
  html body.qn-unified.pdf-product-page .glove-story-media,
  html body.qn-unified.pdf-product-page .glove-story-copy,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-media,
  html body.qn-unified.pdf-product-page .glove-story-item.is-reversed .glove-story-copy,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-media,
  html body.qn-unified.pdf-product-page .product-delivery-stack .delivery-copy { grid-column: 1 !important; grid-row: auto !important; }
  html body.qn-unified footer.footer,
  html body.qn-unified footer.footer .footer-simple-main { height: auto !important; min-height: 0 !important; }
  html body.qn-unified footer.footer .footer-simple-main { grid-template-columns: 1fr !important; padding: 40px 0 24px !important; }
  html body.qn-unified footer.footer .footer-brand-stack,
  html body.qn-unified footer.footer .footer-contact-social,
  html body.qn-unified footer.footer .footer-simple-bottom { grid-column: 1 !important; grid-row: auto !important; }
}
@media (prefers-reduced-motion: reduce) { html body.qn-unified.home-page .benefit-icon-zone::before { animation: none !important; } }

/* Desktop runtime locks: overcome legacy page-specific rules without changing mobile behavior. */
@media (min-width: 900px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .pdf-product-flow > .pdf-screen:first-child > .pdf-screen-inner.pdf-hero-grid {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack {
    display: block !important;
    width: min(100%, 1169px) !important;
    max-width: none !important;
    margin: 64px auto 0 !important;
    writing-mode: horizontal-tb !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack > .qn-product-tabs {
    width: min(100%, 960px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack > .qn-product-tab-panels,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack .qn-product-tab-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack .qn-product-tab-panel {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack .qn-product-tab-panel[hidden] {
    display: none !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack .delivery-media {
    grid-column: 1 / span 7 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 500px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].pdf-product-page
  .product-delivery-stack .delivery-copy {
    grid-column: 8 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    writing-mode: horizontal-tb !important;
  }
}

/* Final specificity locks: remove legacy capability stripe and unify footer social affordances. */
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].home-page .capability-item {
  border-top: 0 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class].home-page .capability-item::before {
  content: none !important;
  display: none !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item {
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f6fb !important;
  box-shadow: 0 5px 16px rgba(9, 30, 58, 0.16) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class] footer.footer .footer-social-item:hover {
  background: #ffffff !important;
  transform: translateY(-3px) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class] footer.footer .footer-social-icon {
  width: 32px !important;
  height: 32px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 2026-08-19 latest homepage/footer locks: full-bleed hero, centered benefits, light global footer. */
@media (min-width: 900px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  main > .home-video-hero,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  main > .home-video-hero > .home-video-stage {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 720px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #020306 !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-video-stage > video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section > .container {
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section .benefit-list {
    width: min(100%, 1120px) !important;
    margin: 80px auto 0 !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section .benefit-item {
    width: 100% !important;
    margin-inline: auto !important;
  }
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer {
  width: 100% !important;
  height: 400px !important;
  min-height: 400px !important;
  margin: 0 !important;
  color: #526075 !important;
  background: #c9d1dc !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  height: 400px !important;
  min-height: 400px !important;
  margin-inline: auto !important;
  padding: 46px 0 42px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr auto !important;
  column-gap: 24px !important;
  row-gap: 18px !important;
  align-items: center !important;
  color: #526075 !important;
  background: #c9d1dc !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack {
  grid-column: 1 / span 6 !important;
  grid-row: 1 !important;
  align-self: center !important;
  color: #526075 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack > img {
  width: 210px !important;
  height: auto !important;
  margin: 0 0 28px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p {
  margin: 0 !important;
  color: #526075 !important;
  font-size: 22px !important;
  line-height: 1.7 !important;
  opacity: 1 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p span {
  color: #526075 !important;
  font-size: 18px !important;
  opacity: 1 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-contact-social {
  grid-column: 9 / -1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 28px !important;
  color: #526075 !important;
  opacity: 1 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email {
  color: #526075 !important;
  text-align: right !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email span {
  color: #526075 !important;
  font-size: 18px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email strong {
  color: #112d5f !important;
  font-size: 20px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item {
  width: 64px !important;
  height: 64px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #5d687c !important;
  box-shadow: none !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:hover,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:focus-visible,
html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:focus-within {
  background: #112d5f !important;
  transform: translateY(-3px) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icon {
  width: 44px !important;
  height: 44px !important;
  opacity: .84 !important;
  filter: grayscale(1) brightness(0) invert(1) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-bottom {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #526075 !important;
  font-size: 16px !important;
  background: transparent !important;
  opacity: 1 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-bottom span {
  color: #526075 !important;
  opacity: 1 !important;
}

@media (max-width: 899px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    width: min(calc(100% - 40px), 1440px) !important;
    padding: 40px 0 28px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 32px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-brand-stack,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-contact-social,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-bottom {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-contact-social {
    align-items: flex-start !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-email { text-align: left !important; }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-icons { justify-content: flex-start !important; gap: 16px !important; }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-item { width: 52px !important; height: 52px !important; }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-icon { width: 36px !important; height: 36px !important; }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* 2026-08-20 — homepage story and compact footer, final cascade lock */
@media (min-width: 900px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section {
    height: 400svh !important;
    min-height: 3200px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section > .container {
    position: sticky !important;
    top: 0 !important;
    width: min(calc(100% - 48px), 1440px) !important;
    max-width: 1440px !important;
    height: 100svh !important;
    min-height: 720px !important;
    margin-inline: auto !important;
    padding: 138px 0 64px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: center !important;
    align-items: center !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefits-section > .container > h2 {
    margin: 0 auto 64px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class].home-page
  .home-benefit-story {
    width: min(100%, 1200px) !important;
    height: 410px !important;
    margin: 0 auto !important;
  }
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer {
  height: 300px !important;
  min-height: 300px !important;
  background: #c9d1dc !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-main {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  height: 300px !important;
  min-height: 300px !important;
  margin-inline: auto !important;
  padding: 30px 0 22px !important;
  row-gap: 12px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack > img {
  width: 180px !important;
  height: auto !important;
  margin-bottom: 18px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p {
  margin: 0 !important;
  color: #526075 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-brand-stack p span {
  font-size: 13px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-contact-social {
  gap: 16px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email span {
  font-size: 13px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-email strong {
  font-size: 16px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icons {
  gap: 12px !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:hover {
  background: transparent !important;
  transform: translateY(-2px) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-item:active {
  transform: scale(.96) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-social-icon {
  width: 40px !important;
  height: 40px !important;
  opacity: .9 !important;
  filter: grayscale(1) saturate(.35) contrast(.92) !important;
}

html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
footer.footer .footer-simple-bottom {
  padding-top: 8px !important;
  font-size: 13px !important;
}

@media (max-width: 899px) {
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-simple-main {
    padding: 32px 0 24px !important;
  }

  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-item,
  html body.qn-unified[class][class][class][class][class][class][class][class][class][class][class][class][class]
  footer.footer .footer-social-icon {
    width: 36px !important;
    height: 36px !important;
  }
}


/* source: qnbot-final-20260821.css */
:root {
  --qn-page: #f7f8fa;
  --qn-card: #e8ebf0;
  --qn-ink: #182232;
  --qn-navy: #12356e;
  --qn-muted: #718096;
}

html, body { background: var(--qn-page); }
html body#site-page,
html body#site-page main,
html body#site-page .surface,
html body#site-page .section.surface { background-color: var(--qn-page) !important; }
html body#site-page header.site-header,
html body#site-page header.site-header.is-scrolled,
html body#site-page nav.subnav,
html body#site-page nav.subnav > .container {
  background: rgba(247, 248, 250, .97) !important;
  border-color: rgba(18, 53, 110, .08) !important;
  box-shadow: none !important;
}
.surface, .section.surface, main, .products-overview-main { background-color: var(--qn-page) !important; }
img { max-width: 100%; }

/* The desktop reference grid is exactly 240 px from either viewport edge at 1920. */
@media (min-width: 1440px) {
  body .container,
  body .pdf-screen-inner,
  body .story-container {
    width: calc(100% - 480px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
  }
}

/* Stable global/product navigation surfaces. */
body .site-header,
body .site-header.is-scrolled {
  z-index: 300 !important;
  background: rgba(247, 248, 250, .97) !important;
  border-bottom-color: rgba(18, 53, 110, .08) !important;
  box-shadow: none !important;
  color: var(--qn-navy) !important;
  backdrop-filter: blur(14px) !important;
}
body .site-header .brand img,
body .site-header.is-scrolled .brand img { filter: none !important; }
body .site-header .main-nav a,
body .site-header.is-scrolled .main-nav a { color: var(--qn-navy) !important; }
body .subnav,
body .subnav.is-scrolled {
  z-index: 200 !important;
  background: rgba(247, 248, 250, .97) !important;
  border-color: rgba(18, 53, 110, .08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

/* Home screen 3. */
@media (min-width: 900px) {
  html body#site-page.home-page main > .home-video-hero,
  html body#site-page.home-page main > .home-value-section,
  html body#site-page.home-page main > .home-capabilities-section,
  html body#site-page.home-page main > .home-benefits-section,
  html body#site-page.home-page main > .home-contact-section {
    margin: 0 !important;
    background: var(--qn-page) !important;
  }
  html body#site-page.home-page main > .home-video-hero {
    background: #000 !important;
  }
  html body#site-page.home-page .home-value-section {
    min-height: 100svh !important;
    padding: 120px 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  body.home-page .home-capabilities-section {
    height: 100svh !important;
    min-height: 900px !important;
    padding: 154px 0 72px !important;
    background: var(--qn-page) !important;
    overflow: hidden !important;
  }
  body.home-page .home-capabilities-section > .container { width: calc(100% - 480px) !important; max-width: 1440px !important; }
  body.home-page .home-capabilities-section h2 {
    max-width: none !important;
    margin: 0 auto 72px !important;
    font-size: clamp(48px, 3.25vw, 64px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  body.home-page .home-capabilities-section h2 br { display: none !important; }
  body.home-page .home-capability-stage { height: min(56svh, 604px) !important; min-height: 500px !important; border-radius: 22px !important; overflow: hidden !important; }
  body.home-page .home-capability-slide { grid-template-columns: minmax(0, 2fr) minmax(400px, 1fr) !important; background: #fff !important; }
  body.home-page .home-capability-media { min-width: 0 !important; background: #e8ecf2 !important; overflow: hidden !important; }
  body.home-page .home-capability-media img {
    width: 100% !important;
    height: 100% !important;
    padding: 44px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  body.home-page .home-capability-copy { padding: 64px 48px !important; justify-content: center !important; }
}
body.home-page .home-capability-index { display: none !important; }
body.home-page .home-capability-link {
  transition: transform 180ms ease, box-shadow 180ms ease !important;
  background: transparent !important;
  color: var(--qn-muted) !important;
}
body.home-page .home-capability-link:hover,
body.home-page .home-capability-link:focus-visible {
  transform: scale(1.055) !important;
  background: transparent !important;
  color: var(--qn-muted) !important;
}
body.home-page .home-capability-link svg { width: 25px !important; height: 25px !important; stroke-width: 1.5 !important; }

/* Home screen 4 is one viewport; progression is controlled by wheel state, not spacer height. */
@media (min-width: 900px) {
  html body.home-page #data-flow {
    height: 100svh !important;
    min-height: 760px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--qn-page) !important;
  }
  html body.home-page #data-flow > .container {
    position: relative !important;
    top: auto !important;
    width: calc(100% - 480px) !important;
    max-width: 1440px !important;
    height: 100svh !important;
    min-height: 760px !important;
    padding: 150px 0 72px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
  }
  html body.home-page #data-flow > .container > h2 {
    max-width: none !important;
    margin: 0 auto 72px !important;
    font-size: clamp(48px, 3.25vw, 64px) !important;
    white-space: nowrap !important;
  }
  html body.home-page #data-flow h2 br { display: none !important; }
  html body.home-page #data-flow .home-benefit-story { width: 100% !important; height: 420px !important; margin: 0 !important; }
}

html body#site-page.home-page #data-flow,
html body#site-page.home-page #data-flow > .container,
html body#site-page.home-page .home-capabilities-section {
  background-color: var(--qn-page) !important;
}
body.home-page .home-benefit-number,
body.home-page .home-benefit-eyebrow,
body.home-page [data-benefit-live] { display: none !important; }
body.home-page .home-benefit-media { background: #dbe3ee !important; overflow: hidden !important; }
body.home-page .home-benefit-media img { width: 100% !important; height: 100% !important; padding: 30px !important; object-fit: contain !important; object-position: center !important; }
body.home-page .home-benefit-result {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3f79c9 !important;
}
body.home-page .home-benefit-result span,
body.home-page .home-benefit-result b { display: inline !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; }
body.home-page .home-benefit-result span::after { content: "："; }

/* Footer icon artwork uses one monochrome treatment. */
body footer.footer .footer-social-icon {
  opacity: .72 !important;
  filter: grayscale(1) brightness(.48) contrast(1.2) !important;
}

/* Product overview: centered, click-to-focus carousel with no masks or arrows. */
body.products-page .products-overview-hero { background: var(--qn-page) !important; }
body.products-page .products-carousel-viewport,
body.products-page .products-carousel-viewport::before,
body.products-page .products-carousel-viewport::after { mask-image: none !important; -webkit-mask-image: none !important; background-image: none !important; }
body.products-page .products-carousel-card {
  background: var(--qn-card) !important;
  cursor: pointer !important;
  transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease !important;
}
body.products-page .products-carousel-card.is-active { box-shadow: 0 18px 42px rgba(18,53,110,.12) !important; }
body.products-page .products-carousel-arrows { display: none !important; }
body.products-page .products-carousel-controls { justify-content: center !important; }
body.products-page .products-carousel-dots { margin-inline: auto !important; }
body.products-page #product-matrix .products-carousel-viewport {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
body.products-page #product-matrix .products-carousel-card,
body.products-page #product-matrix .products-carousel-card.is-active,
body.products-page #product-matrix .products-carousel-card.is-before,
body.products-page #product-matrix .products-carousel-card.is-after {
  background: var(--qn-card) !important;
  opacity: 1 !important;
}
body.products-page #product-matrix .products-carousel-arrows { display: none !important; }
body.products-page #product-matrix .products-carousel-controls { justify-content: center !important; }
body.products-page #product-matrix .products-carousel-card::after { content: none !important; display: none !important; background: none !important; }
body.products-page #product-matrix .products-carousel-media { background: var(--qn-card) !important; background-image: none !important; }
body.products-page #product-matrix .products-carousel-copy,
body.products-page #product-matrix .products-carousel-copy strong,
body.products-page #product-matrix .products-carousel-copy span { color: var(--qn-navy) !important; }

/* Product overview screens 2/3. */
body.products-page .product-category-section { min-height: 100svh !important; background: var(--qn-page) !important; }
body.products-page .product-detail-card { cursor: pointer !important; overflow: hidden !important; background: #fff !important; }
body.products-page .product-detail-body { text-align: center !important; align-items: center !important; }
body.products-page .product-detail-body p { text-align: center !important; }
body.products-page .product-detail-tags { justify-content: center !important; }
body.products-page .product-detail-action { display: none !important; }
body.products-page .product-detail-card:hover,
body.products-page .product-detail-card:focus-visible { transform: translateY(-8px) scale(1.012) !important; box-shadow: 0 20px 46px rgba(18,53,110,.14) !important; }

/* Product detail reference layout and image containment. */
body.pdf-product-page .pdf-product-flow { background: var(--qn-page) !important; }
body.pdf-product-page .pdf-product-flow > .pdf-screen { margin-bottom: 0 !important; background: var(--qn-page) !important; }
body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child { min-height: calc(100svh - 168px) !important; }
body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-grid { grid-template-columns: repeat(12, minmax(0,1fr)) !important; }
body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy { grid-column: 1 / span 6 !important; }
body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual { grid-column: 8 / -1 !important; }
html body#site-page.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-copy {
  grid-column: 1 / span 6 !important;
  grid-row: 1 !important;
}
html body#site-page.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
}
body.pdf-product-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual img,
body.pdf-product-page .pdf-gallery-main img,
body.pdf-product-page .qn-spec-media img,
body.pdf-product-page .delivery-media img { object-fit: contain !important; object-position: center !important; }
body.pdf-product-page .glove-hardware-screen,
body.pdf-product-page .exo-hardware-screen { display: none !important; }
body.pdf-product-page .pdf-gallery-main,
body.pdf-product-page .qn-spec-media,
body.pdf-product-page .delivery-media { background: #dbe3ee !important; overflow: hidden !important; }
html body#site-page.pdf-product-page .glove-story-copy > span { display: none !important; }
html body#site-page.pdf-product-page #glove-pdf-specs,
html body#site-page.pdf-product-page #exo-pdf-specs,
html body#site-page.pdf-product-page .glove-bundle-screen,
html body#site-page.pdf-product-page .exo-bundle-screen {
  min-height: calc(100svh - 168px) !important;
  height: auto !important;
  margin-bottom: 0 !important;
}
html body#site-page.pdf-product-page .product-delivery-stack .qn-product-tab-panel {
  min-height: 500px !important;
  height: 500px !important;
}
html body#site-page.pdf-product-page .product-delivery-stack .qn-product-tab-panel[hidden] { display: none !important; }
html body#site-page.products-page .product-detail-action { display: none !important; }
html body#site-page.products-page .product-detail-body,
html body#site-page.products-page .product-detail-body p { text-align: center !important; }
html body#site-page.products-page .product-detail-tags { justify-content: center !important; }
html body#site-page footer.footer .footer-social-icon,
html body#site-page footer.footer .social-link > img {
  opacity: .72 !important;
  filter: grayscale(1) brightness(.48) contrast(1.2) !important;
}

/* Software detail pages use the same three-screen system. */
body.teleop-page, body.data-page { background: var(--qn-page) !important; }
body.teleop-page main > .hero,
body.data-page main > .hero,
body.teleop-page main > .section#console,
body.data-page main > .section#platform-capability { min-height: calc(100svh - 168px) !important; background: var(--qn-page) !important; }
body.teleop-page main > .metric-section,
body.teleop-page main > section:not(.hero):not(#console),
body.data-page main > #data-chain { display: none !important; }
body.teleop-page .hero-grid,
body.data-page .hero-grid { width: calc(100% - 480px) !important; max-width: 1440px !important; }
body.teleop-page .hero-visual img,
body.data-page .hero-visual img,
body.teleop-page .teleop-capability-image img,
body.data-page .data-capability-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }
html body#site-page.teleop-page .hero-grid .hero-visual,
html body#site-page.data-page .hero-grid .hero-visual { grid-column: 1 / span 6 !important; grid-row: 1 !important; }
html body#site-page.teleop-page .hero-grid .hero-copy,
html body#site-page.data-page .hero-grid .hero-copy { grid-column: 7 / -1 !important; grid-row: 1 !important; }
html body#site-page.teleop-page .teleop-hero-actions,
html body#site-page.data-page .data-hero-actions { display: none !important; }

/* About: three exact screens before the contact/footer. */
body.about-page, body.about-page .about-narrative { background: var(--qn-page) !important; color: var(--qn-navy) !important; }
body.about-page .about-narrative-hero {
  min-height: 100svh !important;
  background: var(--qn-page) !important;
  color: var(--qn-navy) !important;
  text-align: center !important;
}
body.about-page .about-hero-copy { max-width: 1120px !important; margin-inline: auto !important; text-align: center !important; }
body.about-page .about-hero-copy h1 { color: var(--qn-navy) !important; font-size: clamp(48px, 3.5vw, 68px) !important; }
body.about-page .about-hero-copy p:not(.story-kicker) { max-width: 980px !important; margin-inline: auto !important; color: var(--qn-navy) !important; }
body.about-page .about-symbol { inset: 50% auto auto 50% !important; width: min(52vw, 920px) !important; opacity: .035 !important; transform: translate(-50%, -44%) !important; }
body.about-page .about-company-combined { min-height: 100svh !important; background: var(--qn-page) !important; }
body.about-page .about-company-copy { text-align: center !important; }
body.about-page .about-company-copy h2 { color: var(--qn-navy) !important; }
body.about-page .about-company-copy .about-body { max-width: 1200px !important; color: var(--qn-navy) !important; text-align: center !important; }
body.about-page .about-combined-slogan { display: none !important; }
body.about-page .about-foundation-tabs { min-height: 100svh !important; padding: 0 !important; background: var(--qn-page) !important; overflow: hidden !important; }
body.about-page .about-tabs-layout { min-height: 100svh !important; display: grid !important; grid-template-rows: auto 1fr !important; align-content: center !important; padding: 220px 0 120px !important; }
body.about-page .about-tab-list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 64px !important; }
body.about-page .about-tab { border: 0 !important; background: transparent !important; color: #8a95a7 !important; font-size: clamp(30px, 2.4vw, 46px) !important; font-weight: 700 !important; cursor: pointer !important; }
body.about-page .about-tab.is-active { color: var(--qn-navy) !important; }
body.about-page .about-tab-panels { display: grid !important; place-items: center !important; }
body.about-page .about-tab-panel { max-width: 1240px !important; color: var(--qn-navy) !important; font-size: clamp(38px, 3.2vw, 60px) !important; font-weight: 700 !important; line-height: 1.45 !important; text-align: center !important; }
body.about-page .value-keywords { display: flex !important; justify-content: center !important; gap: .45em !important; }
body.about-page .value-keywords span:not(:last-child)::after { content: "、"; }
html body.about-page #about-hero {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 0 !important;
  background: var(--qn-page) !important;
}
html body.about-page #about-hero .about-hero-copy {
  max-width: 1120px !important;
  margin-inline: auto !important;
  text-align: center !important;
}
html body.about-page #about-company {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 120px 0 !important;
  background: var(--qn-page) !important;
}
html body.about-page #about-company .about-company-copy {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  text-align: center !important;
}
html body.about-page #about-company .about-body { opacity: 1 !important; color: var(--qn-navy) !important; }
html body.about-page #about-company .about-combined-slogan { display: none !important; }
html body.about-page #about-beliefs {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 0 !important;
  background: var(--qn-page) !important;
  overflow: hidden !important;
}
html body.about-page #about-beliefs .about-tabs-layout {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 220px 0 120px !important;
}

@media (max-width: 1439px) {
  body .container, body .pdf-screen-inner, body .story-container { width: min(calc(100% - 64px), 1200px) !important; }
  body.home-page .home-capabilities-section > .container,
  html body.home-page .home-benefits-section > .container,
  body.teleop-page .hero-grid,
  body.data-page .hero-grid { width: min(calc(100% - 64px), 1200px) !important; }
}

@media (max-width: 899px) {
  body .container, body .pdf-screen-inner, body .story-container { width: min(calc(100% - 40px), 720px) !important; }
  body.home-page .home-capability-index { display: none !important; }
  body.home-page .home-benefits-section { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  body.home-page .home-benefits-section > .container { position: static !important; height: auto !important; }
  body.home-page .home-benefit-panel { position: relative !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body.home-page .home-benefit-story { height: auto !important; }
  body.home-page .home-benefit-rail { display: none !important; }
  body.products-page .product-category-section { min-height: 0 !important; }
  body.teleop-page .hero-grid, body.data-page .hero-grid { width: min(calc(100% - 40px), 720px) !important; }
  body.about-page .about-tabs-layout { padding: 140px 0 80px !important; }
  body.about-page .about-tab-list { gap: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Terminal cascade lock. The legacy stylesheet intentionally uses long
   repeated-class selectors, so the page id is repeated here to keep the
   authored screen geometry invariant without adding runtime inline styles. */
@media (min-width: 900px) {
  html body#site-page#site-page.home-page main > .home-value-section,
  html body#site-page#site-page.home-page main > .home-capabilities-section,
  html body#site-page#site-page.home-page main > .home-benefits-section,
  html body#site-page#site-page.home-page main > .home-contact-section {
    margin: 0 !important;
    background: #f7f8fa !important;
  }

  html body#site-page#site-page.home-page main > .home-value-section,
  html body#site-page#site-page.home-page main > .home-capabilities-section {
    height: 100svh !important;
    min-height: 900px !important;
  }

  html body#site-page#site-page.home-page main > .home-capabilities-section {
    padding: 154px 0 72px !important;
  }
}

/* 2026-08-21 latest reference pass: TDesign semantic-state lock. */
html body#site-page,
html body#site-page main,
html body#site-page main > section:not(.home-video-hero) {
  background-color: #f7f8fa !important;
}

/* The home hero is a dark media surface; navigation keeps identical geometry
   while switching only semantic foreground/surface tokens. */
html body#site-page.home-page .site-header:not(.is-scrolled) {
  background: rgba(2, 7, 14, .86) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
html body#site-page.home-page .site-header:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1) !important;
}
html body#site-page.home-page .site-header:not(.is-scrolled) .main-nav a,
html body#site-page.home-page .site-header:not(.is-scrolled) .header-consult-button {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .7) !important;
}
html body#site-page.home-page .site-header:not(.is-scrolled) .main-nav a.active {
  background: #163a78 !important;
  color: #fff !important;
}

html body#site-page.home-page [data-capability-live] { display: none !important; }
html body#site-page.home-page .home-benefit-rail { pointer-events: none !important; }

@media (min-width: 900px) {
  html body#site-page#site-page.home-page main > .home-capabilities-section {
    padding: 142px 0 56px !important;
  }
  html body#site-page.home-page .home-capabilities-section h2 {
    margin-bottom: 92px !important;
  }
  html body#site-page.home-page .home-capability-stage {
    height: min(53svh, 572px) !important;
  }
  html body#site-page.home-page .home-capability-slide[data-capability-slide="0"] .home-capability-media img,
  html body#site-page.home-page .home-capability-slide[data-capability-slide="2"] .home-capability-media img {
    padding: 72px !important;
  }
  html body#site-page.home-page .home-capability-media img {
    position: absolute !important;
    inset: 44px auto auto 44px !important;
    width: calc(100% - 88px) !important;
    height: calc(100% - 88px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body#site-page.home-page .home-capability-slide[data-capability-slide="0"] .home-capability-media img,
  html body#site-page.home-page .home-capability-slide[data-capability-slide="2"] .home-capability-media img {
    inset: 72px auto auto 72px !important;
    width: calc(100% - 144px) !important;
    height: calc(100% - 144px) !important;
  }
  html body#site-page.home-page .home-contact-inner {
    gap: 42px !important;
  }
  html body#site-page.home-page .home-contact-inner h2 {
    margin-bottom: 0 !important;
  }
  html body#site-page#site-page.home-page .home-contact-section > .container {
    gap: 40px !important;
  }
  html body#site-page#site-page.home-page .home-contact-button {
    margin: 0 auto !important;
  }
}

/* Footer platform marks are deliberately monochrome, preserving footer color. */
html body#site-page footer.footer .footer-social-icon {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(12%) saturate(641%) hue-rotate(178deg) brightness(94%) contrast(89%) !important;
}

/* Product overview carousel: pale-blue cards and semantic dot/pill state. */
html body#site-page.products-page #product-matrix .products-carousel-card,
html body#site-page.products-page #product-matrix .products-carousel-card.is-active,
html body#site-page.products-page #product-matrix .products-carousel-media {
  background: #d6deeb !important;
}
html body#site-page.products-page #product-matrix .products-carousel-card.is-before,
html body#site-page.products-page #product-matrix .products-carousel-card.is-after {
  pointer-events: auto !important;
  cursor: pointer !important;
}
html body#site-page.products-page #product-matrix .products-carousel-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body#site-page.products-page #product-matrix .products-carousel-dots button {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #c7d0df !important;
  box-shadow: none !important;
  transition: width 180ms ease, background-color 180ms ease !important;
}
html body#site-page.products-page #product-matrix .products-carousel-dots button.is-active,
html body#site-page.products-page #product-matrix .products-carousel-dots button[aria-current="true"] {
  width: 84px !important;
  min-width: 84px !important;
  background: #163a78 !important;
}
html body#site-page.products-page #product-matrix .products-carousel-dots button:focus-visible {
  outline: 2px solid #0052d9 !important;
  outline-offset: 4px !important;
}

/* Product overview screens share one centered card action model. */
html body#site-page.products-page .product-detail-card:focus-visible {
  outline: 2px solid #0052d9 !important;
  outline-offset: 4px !important;
}

/* Hardware hero and highlight images remain entirely inside their media bounds. */
html body#site-page.vetraglove-page .pdf-product-flow > .pdf-screen:first-child .pdf-hero-visual img {
  transform: scaleX(-1) !important;
}
html body#site-page.pdf-product-page .pdf-hero-visual,
html body#site-page.pdf-product-page .glove-story-media,
html body#site-page.pdf-product-page .qn-spec-media,
html body#site-page.pdf-product-page .delivery-media {
  overflow: hidden !important;
}
html body#site-page.pdf-product-page .pdf-hero-visual img,
html body#site-page.pdf-product-page .glove-story-media img,
html body#site-page.pdf-product-page .qn-spec-media img,
html body#site-page.pdf-product-page .delivery-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
html body#site-page.pdf-product-page .glove-story-media img {
  position: absolute !important;
  inset: 36px auto auto 36px !important;
  width: calc(100% - 72px) !important;
  height: calc(100% - 72px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* One alternating long-form pattern for every core-highlight screen. */
html body#site-page .glove-story-section,
html body#site-page #console,
html body#site-page #platform-capability {
  height: auto !important;
  min-height: calc(100svh - 168px) !important;
  padding: 96px 0 140px !important;
  overflow: visible !important;
  background: #f7f8fa !important;
}
html body#site-page .glove-story-section .pdf-feature-title,
html body#site-page .qn-software-story .section-head h2 {
  max-width: 1120px !important;
  margin: 0 auto 96px !important;
  color: #172033 !important;
  font-size: clamp(44px, 3.2vw, 62px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
html body#site-page .glove-story-list,
html body#site-page .qn-software-story-list {
  display: grid !important;
  gap: 72px !important;
}
html body#site-page .glove-story-item,
html body#site-page .qn-software-story-item {
  min-height: 420px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr) !important;
  gap: 80px !important;
  align-items: center !important;
}
html body#site-page .glove-story-item.is-reversed,
html body#site-page .qn-software-story-item.is-reversed {
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1fr) !important;
}
html body#site-page .glove-story-item.is-reversed .glove-story-media,
html body#site-page .qn-software-story-item.is-reversed .qn-software-story-media { order: 2 !important; }
html body#site-page .glove-story-media,
html body#site-page .qn-software-story-media {
  position: relative !important;
  height: 420px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 36px !important;
  border-radius: 20px !important;
  background: #dbe3ee !important;
}
html body#site-page .qn-software-story-media img {
  position: absolute !important;
  inset: 36px auto auto 36px !important;
  width: calc(100% - 72px) !important;
  height: calc(100% - 72px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
html body#site-page .glove-story-copy,
html body#site-page .qn-software-story-copy {
  max-width: 560px !important;
  color: #172033 !important;
}
html body#site-page .glove-story-copy h3,
html body#site-page .qn-software-story-copy h3 {
  margin: 0 0 24px !important;
  font-size: clamp(30px, 2.2vw, 42px) !important;
  line-height: 1.3 !important;
}
html body#site-page .glove-story-copy p,
html body#site-page .qn-software-story-copy p {
  margin: 0 !important;
  font-size: clamp(18px, 1.25vw, 24px) !important;
  line-height: 1.75 !important;
}
.qn-scroll-reveal {
  opacity: 0 !important;
  transform: translateY(44px) !important;
  transition: opacity 620ms cubic-bezier(.2,.8,.2,1), transform 720ms cubic-bezier(.2,.8,.2,1) !important;
}
.qn-scroll-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Software product overviews use the same stable 12-column hero geometry. */
@media (min-width: 900px) {
  html body#site-page.teleop-page main > .hero,
  html body#site-page.data-page main > .hero {
    min-height: calc(100svh - 168px) !important;
    padding: 72px 0 !important;
  }
  html body#site-page.teleop-page .hero-grid,
  html body#site-page.data-page .hero-grid {
    min-height: calc(100svh - 312px) !important;
    align-items: center !important;
  }
  html body#site-page.teleop-page .hero-grid .hero-visual,
  html body#site-page.data-page .hero-grid .hero-visual {
    height: 430px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    padding: 28px !important;
    border-radius: 18px !important;
    background: #dbe3ee !important;
  }
  html body#site-page.teleop-page .hero-grid .hero-copy,
  html body#site-page.data-page .hero-grid .hero-copy {
    align-self: center !important;
    padding-left: 48px !important;
  }
  html body#site-page.teleop-page .teleop-window-bar { display: none !important; }
}

/* About screen 2 and culture screen match the centered reference composition. */
html body#site-page.about-page #about-company {
  display: grid !important;
  place-items: center !important;
  padding: 120px 0 !important;
}
html body#site-page.about-page #about-company .story-container,
html body#site-page.about-page #about-company .about-company-copy {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}
html body#site-page.about-page #about-company .about-body {
  margin: 0 auto !important;
  max-width: 1200px !important;
  text-align: center !important;
}
html body#site-page.about-page #about-beliefs .story-container {
  width: calc(100% - 480px) !important;
  max-width: 1440px !important;
  height: 100% !important;
}
html body#site-page.about-page #about-beliefs .about-tabs-layout {
  padding: 180px 0 104px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
html body#site-page.about-page #about-beliefs .about-tab-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 72px !important;
  align-items: center !important;
}
html body#site-page.about-page #about-beliefs .about-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  color: #8b96a8 !important;
}
html body#site-page.about-page #about-beliefs .about-tab img {
  width: 44px !important;
  height: 44px !important;
  opacity: .9 !important;
  filter: invert(61%) sepia(10%) saturate(539%) hue-rotate(178deg) !important;
}
html body#site-page.about-page #about-beliefs .about-tab.is-active { color: #163a78 !important; }
html body#site-page.about-page #about-beliefs .about-tab.is-active img {
  filter: invert(21%) sepia(33%) saturate(2023%) hue-rotate(181deg) brightness(86%) contrast(91%) !important;
}
html body#site-page.about-page #about-beliefs .about-tab:focus-visible {
  outline: 2px solid #0052d9 !important;
  outline-offset: 8px !important;
  border-radius: 4px !important;
}
html body#site-page.about-page #about-beliefs .about-tab-panels {
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}
html body#site-page.about-page #about-beliefs .about-tab-panel {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Terminal locks for the about screens: one light canvas and a full-width
   horizontal culture selector, matching the desktop TDesign navigation model. */
html body#site-page#site-page.about-page main > #about-company,
html body#site-page#site-page.about-page main > #about-beliefs {
  background: #f7f8fa !important;
  background-image: none !important;
}
html body#site-page#site-page.about-page #about-beliefs .about-tabs-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
}
html body#site-page#site-page.about-page #about-beliefs .about-tab-list {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html body#site-page#site-page.about-page #about-beliefs .about-tab-panels {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

@media (max-width: 899px) {
  html body#site-page .glove-story-item,
  html body#site-page .qn-software-story-item,
  html body#site-page .glove-story-item.is-reversed,
  html body#site-page .qn-software-story-item.is-reversed { grid-template-columns: 1fr !important; gap: 28px !important; }
  html body#site-page .glove-story-item.is-reversed .glove-story-media,
  html body#site-page .qn-software-story-item.is-reversed .qn-software-story-media { order: 0 !important; }
  html body#site-page .glove-story-media,
  html body#site-page .qn-software-story-media { height: 300px !important; }
  html body#site-page.about-page #about-beliefs .story-container { width: min(calc(100% - 40px), 720px) !important; }
  html body#site-page.about-page #about-beliefs .about-tabs-layout { padding: 132px 0 72px !important; }
  html body#site-page.about-page #about-beliefs .about-tab-list { gap: 8px !important; }
  html body#site-page.about-page #about-beliefs .about-tab { gap: 8px !important; font-size: 20px !important; }
  html body#site-page.about-page #about-beliefs .about-tab img { width: 26px !important; height: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qn-scroll-reveal { opacity: 1 !important; transform: none !important; }
}

/* 2026-08-21 refinement pass 12: final reference locks. */

/* Home hero header: all five controls use the requested 30% outline. */
html body#site-page.home-page .site-header:not(.is-scrolled) .main-nav a,
html body#site-page.home-page .site-header:not(.is-scrolled) .language-toggle,
html body#site-page.home-page .site-header:not(.is-scrolled) .header-consult-button {
  border-color: rgba(255, 255, 255, .3) !important;
}

html body#site-page.home-page .site-header:not(.is-scrolled) .main-nav a.active {
  border-color: rgba(255, 255, 255, .3) !important;
}

/* Home screen 4 remains wheel-controlled while numbered steps stay clickable. */
html body#site-page.home-page .home-benefit-rail {
  pointer-events: auto !important;
}
html body#site-page.home-page .home-benefit-step {
  cursor: pointer !important;
}
html body#site-page.home-page .home-benefit-step:focus-visible {
  outline: 2px solid #0052d9 !important;
  outline-offset: 5px !important;
}

/* Product overview uses one uninterrupted light canvas. */
html body#site-page#site-page.products-page,
html body#site-page#site-page.products-page main,
html body#site-page#site-page.products-page main > section,
html body#site-page#site-page.products-page .products-overview-hero,
html body#site-page#site-page.products-page .product-category-section,
html body#site-page#site-page.products-page #product-matrix {
  background-color: #f7f8fa !important;
  background-image: none !important;
}

html body#site-page#site-page.products-page .product-carousel-section,
html body#site-page#site-page.products-page .product-carousel-viewport,
html body#site-page#site-page.products-page .product-grid-section {
  background-color: #f7f8fa !important;
  background-image: none !important;
}

/* Hardware detail screens 2–4 sit directly on the page canvas. Media wells stay
   pale blue so product cutouts remain legible without a second dark card. */
html body#site-page#site-page.pdf-product-page .glove-story-section,
html body#site-page#site-page.pdf-product-page .glove-story-section > .pdf-screen-inner,
html body#site-page#site-page.pdf-product-page .glove-hardware-screen,
html body#site-page#site-page.pdf-product-page .glove-hardware-screen > .pdf-screen-inner,
html body#site-page#site-page.pdf-product-page .glove-bundle-screen,
html body#site-page#site-page.pdf-product-page .glove-bundle-screen > .pdf-screen-inner,
html body#site-page#site-page.pdf-product-page .exo-hardware-screen,
html body#site-page#site-page.pdf-product-page .exo-hardware-screen > .pdf-screen-inner,
html body#site-page#site-page.pdf-product-page .exo-bundle-screen,
html body#site-page#site-page.pdf-product-page .exo-bundle-screen > .pdf-screen-inner {
  background: #f7f8fa !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body#site-page#site-page.pdf-product-page,
html body#site-page#site-page.pdf-product-page main,
html body#site-page#site-page.pdf-product-page .pdf-screen,
html body#site-page#site-page.pdf-product-page #glove-pdf-specs,
html body#site-page#site-page.pdf-product-page #exo-pdf-specs,
html body#site-page#site-page.pdf-product-page #glove-pdf-specs > .pdf-screen-inner,
html body#site-page#site-page.pdf-product-page #exo-pdf-specs > .pdf-screen-inner {
  background-color: #f7f8fa !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body#site-page#site-page.pdf-product-page .pdf-spec-shell,
html body#site-page#site-page.pdf-product-page .pdf-spec-columns,
html body#site-page#site-page.pdf-product-page .product-delivery-stack,
html body#site-page#site-page.pdf-product-page .delivery-panel {
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  /* Exact 240 px desktop gutters and a stable two-column alternating rhythm. */
  html body#site-page#site-page.pdf-product-page .glove-story-section > .pdf-screen-inner {
    width: calc(100% - 480px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding-inline: 0 !important;
  }
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-list {
    width: 100% !important;
    gap: 72px !important;
  }
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-item,
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-item.is-reversed {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 390px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "media copy" !important;
    gap: 80px !important;
    align-items: center !important;
  }
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-item.is-reversed {
    grid-template-areas: "copy media" !important;
  }
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-media,
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-item.is-reversed .glove-story-media {
    grid-area: media !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 390px !important;
  }
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-copy,
  html body#site-page#site-page.pdf-product-page .glove-story-section .glove-story-item.is-reversed .glove-story-copy {
    grid-area: copy !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 560px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    visibility: visible !important;
  }
}

/* About screens share the same light background. */
html body#site-page#site-page.about-page,
html body#site-page#site-page.about-page main,
html body#site-page#site-page.about-page #about-hero,
html body#site-page#site-page.about-page #about-company,
html body#site-page#site-page.about-page #about-beliefs {
  background-color: #f7f8fa !important;
  background-image: none !important;
}

/* Company introduction: center the content block itself, not only its glyphs. */
html body#site-page#site-page.about-page #about-company .story-container {
  width: calc(100% - 480px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
}
html body#site-page#site-page.about-page #about-company .about-company-copy {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
html body#site-page#site-page.about-page #about-company .about-company-copy h2,
html body#site-page#site-page.about-page #about-company .about-company-copy .about-body {
  width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Culture switcher and copy form one vertically centred group with half the gap. */
html body#site-page#site-page.about-page #about-beliefs {
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
}
html body#site-page#site-page.about-page #about-beliefs .story-container {
  height: auto !important;
  min-height: 0 !important;
}
html body#site-page#site-page.about-page #about-beliefs .about-tabs-layout {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 64px !important;
}
html body#site-page#site-page.about-page #about-beliefs .about-tab-panels {
  min-height: 200px !important;
  align-self: center !important;
}

@media (max-width: 899px) {
  html body#site-page#site-page.about-page #about-company .story-container {
    width: min(calc(100% - 40px), 720px) !important;
  }
  html body#site-page#site-page.about-page #about-beliefs .about-tabs-layout {
    gap: 64px !important;
    padding: 88px 0 64px !important;
  }
}

/* 2026-08-24 reference pass 14
   Shared software overview layout and continuous light-page surfaces. */
html body#site-page#site-page.teleop-page,
html body#site-page#site-page.teleop-page main,
html body#site-page#site-page.teleop-page main > section,
html body#site-page#site-page.data-page,
html body#site-page#site-page.data-page main,
html body#site-page#site-page.data-page main > section {
  background-color: #f7f8fa !important;
  background-image: none !important;
}

html body#site-page#site-page.teleop-page > section.context-cta,
html body#site-page#site-page.data-page > section.context-cta {
  background: #f7f8fa !important;
  background-color: #f7f8fa !important;
  background-image: none !important;
  border-color: transparent !important;
}

html body#site-page#site-page .software-overview-screen {
  min-height: calc(100svh - 188px) !important;
  padding: 72px 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #f7f8fa !important;
}

html body#site-page#site-page .software-overview-inner {
  width: calc(100% - 480px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(72px, 7vw, 132px) !important;
}

html body#site-page#site-page .software-overview-media {
  width: 100% !important;
  height: clamp(330px, 31vw, 440px) !important;
  margin: 0 !important;
  padding: clamp(28px, 3vw, 48px) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #d6deeb !important;
}

html body#site-page#site-page .software-overview-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body#site-page#site-page .software-overview-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: #17376f !important;
}

html body#site-page#site-page .software-overview-copy h1 {
  margin: 0 0 52px !important;
  color: #17376f !important;
  font-size: clamp(48px, 4vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

html body#site-page#site-page .software-overview-lead {
  margin: 0 0 18px !important;
  color: #17376f !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

html body#site-page#site-page .software-overview-description {
  max-width: 680px !important;
  margin: 0 0 34px !important;
  color: #17376f !important;
  font-size: clamp(18px, 1.3vw, 22px) !important;
  line-height: 1.75 !important;
}

html body#site-page#site-page .software-overview-tags {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

html body#site-page#site-page .software-overview-tags span {
  min-height: 72px !important;
  padding: 14px 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #d6deeb !important;
  color: #555f70 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Lock the two requested software-section headings to their reference lines. */
html body#site-page#site-page.teleop-page #console .qn-software-story > .section-head,
html body#site-page#site-page.data-page #platform-capability .qn-software-story > .section-head {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

html body#site-page#site-page.teleop-page #console .qn-software-story > .section-head h2,
html body#site-page#site-page.data-page #platform-capability .qn-software-story > .section-head h2 {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

html body#site-page#site-page .qn-title-line {
  display: block !important;
  white-space: nowrap !important;
}

/* Company introduction is centred as a complete block within its screen. */
html body#site-page#site-page.about-page #about-company {
  min-height: calc(100svh - 96px) !important;
  padding: 80px 0 !important;
  display: grid !important;
  place-items: center !important;
}

html body#site-page#site-page.about-page #about-company .story-container {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 480px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

html body#site-page#site-page.about-page #about-company .about-company-copy {
  flex: 0 1 1200px !important;
  width: 1200px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  align-items: center !important;
  text-align: center !important;
}

html body#site-page#site-page.about-page #about-company .about-company-copy h2,
html body#site-page#site-page.about-page #about-company .about-company-copy .about-body {
  width: 1200px !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

@media (max-width: 1199px) {
  html body#site-page#site-page .software-overview-inner,
  html body#site-page#site-page.about-page #about-company .story-container {
    width: min(calc(100% - 80px), 960px) !important;
  }
  html body#site-page#site-page .software-overview-inner {
    gap: 56px !important;
  }
}

@media (max-width: 899px) {
  html body#site-page#site-page .software-overview-screen {
    min-height: auto !important;
    padding: 56px 0 72px !important;
  }
  html body#site-page#site-page .software-overview-inner,
  html body#site-page#site-page.about-page #about-company .story-container {
    width: min(calc(100% - 40px), 720px) !important;
  }
  html body#site-page#site-page .software-overview-inner {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  html body#site-page#site-page .software-overview-media {
    height: min(62vw, 390px) !important;
  }
  html body#site-page#site-page .software-overview-copy h1 {
    margin-bottom: 30px !important;
    font-size: clamp(40px, 11vw, 56px) !important;
  }
  html body#site-page#site-page .software-overview-lead {
    font-size: 23px !important;
  }
  html body#site-page#site-page .software-overview-tags {
    gap: 10px !important;
  }
  html body#site-page#site-page .software-overview-tags span {
    min-height: 58px !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
  }
  html body#site-page#site-page .qn-title-line {
    white-space: normal !important;
  }
  html body#site-page#site-page.about-page #about-company {
    min-height: auto !important;
    padding: 72px 0 !important;
  }
}