/* Brand navigation, three-image hero and consolidated company profile. */
.hero { padding-bottom: 108px; }
.hero-content { max-width: 1440px; }
.hero-slides { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-slides .hero-slide { position: absolute; inset: 0; z-index: auto; opacity: 0; transform: scale(1.035); transition: opacity 700ms ease; will-change: opacity; }
.hero-slides .hero-slide.is-active { opacity: 1; }
.hero-slide .hero-image { transform: none; }
.hero-slide-controls { position: absolute; z-index: 2; bottom: 30px; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); }
.hero-slide-controls button { display: grid; place-items: center; width: 42px; height: 26px; border: 0; background: transparent; color: var(--hero-title); border-radius: 4px; cursor: pointer; font: 18px inherit; }
.hero-dot::after { content: ''; width: 28px; height: 3px; display: block; background: var(--hero-title); opacity: .3; transition: opacity 200ms, transform 200ms; }
.hero-dot.is-active::after { opacity: 1; transform: scaleX(1.25); }
.hero-slide .hero-image-light { opacity: 0; }
html[data-theme="light"] .hero-slide .hero-image-dark { opacity: 0; }
html[data-theme="light"] .hero-slide .hero-image-light { opacity: 1; }
.hero-slide .hero-image-dark,
.hero-slide .hero-image-light { transition: opacity 220ms ease; }
.mobile-inquiry { width: 100%; padding: 16px 0; border: 0; background: transparent; color: var(--accent-label); font: 650 16px/1.25 inherit; text-align: left; cursor: pointer; }
.contact-details .whatsapp-qr, .contact-page-card .whatsapp-qr { grid-row: 1; }
.contact-details .wechat-qr, .contact-page-card .wechat-qr { grid-column: 3; grid-row: 2; min-height: 0; display: grid; align-items: center; justify-items: center; align-content: center; gap: 10px; padding: 20px 0 20px 22px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.contact-details .wechat-qr > span, .contact-page-card .wechat-qr > span { color: var(--quiet); font-size: 12px; font-weight: 700; }
.contact-page-card .wechat-qr > span { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.contact-details .wechat-qr img, .contact-page-card .wechat-qr img { width: 108px; height: 108px; display: block; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; object-fit: contain; }
.inquiry-modal { z-index: 100; }
.proof-rail, .page-proof { position: relative; z-index: 3; }
:is(.proof-item, .page-proof article) { position: relative; min-width: 0; cursor: default; transition: background-color 180ms ease; }
:is(.proof-item, .page-proof article):focus-visible { outline: 2px solid var(--accent-label); outline-offset: -4px; }
:is(.proof-item, .page-proof article).is-proof-open { z-index: 5; background: var(--surface-raised); background: color-mix(in srgb, var(--surface) 72%, var(--accent) 28%); }
:is(.proof-item, .page-proof article) .proof-tooltip {
  position: absolute; z-index: 12; left: var(--proof-center, 50%); top: calc(100% + 14px); bottom: auto;
  width: min(300px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 15px 17px;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--accent-label) 42%, var(--line)); border-radius: 8px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  box-shadow: 0 18px 42px rgb(9 47 71 / 18%), 0 4px 12px rgb(9 47 71 / 10%);
  color: var(--strong); font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: 0; overflow-wrap: anywhere;
  visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
:is(.proof-item, .page-proof article) .proof-tooltip::before { content: ''; position: absolute; inset: -16px 0; z-index: -1; }
:is(.proof-item, .page-proof article) .proof-tooltip::after {
  content: ''; position: absolute; left: var(--proof-arrow, 50%); top: -7px; bottom: auto; width: 12px; height: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid color-mix(in srgb, var(--accent-label) 42%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-label) 42%, var(--line));
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); transform: translateX(-50%) rotate(225deg);
}
:is(.proof-item, .page-proof article).is-proof-open .proof-tooltip { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { :is(.proof-item, .page-proof article) .proof-tooltip { transition: none; } }
/* Phones / touch screens (2026-10-31): tapping a highlight opens its explanation
   as a FULL-WIDTH panel directly under that row. The first version expanded the
   card inside the tapped cell, which made that column very tall and left the
   neighbouring number floating in the middle of the row (client feedback the
   same day). The script moves the bubble next to the tapped item, so here it is
   a grid item that spans every column of the rail. */
@media (max-width: 960px), (hover: none), (pointer: coarse) {
  :is(.proof-item, .page-proof article) .proof-tooltip { display: none; }
  :is(.proof-rail, .page-proof, .page-proof-inner) > .proof-tooltip.proof-panel {
    position: static; left: auto; top: auto; width: auto; max-width: none;
    grid-column: 1 / -1; grid-row: auto;
    margin: 0; padding: 15px 18px; transform: none;
    display: block; visibility: visible; opacity: 1; pointer-events: auto;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
    box-shadow: none;
    color: var(--strong); font-size: 13.5px; font-weight: 400; line-height: 1.7;
    letter-spacing: 0; overflow-wrap: anywhere;
  }
  :is(.proof-rail, .page-proof, .page-proof-inner) > .proof-tooltip.proof-panel::before,
  :is(.proof-rail, .page-proof, .page-proof-inner) > .proof-tooltip.proof-panel::after { display: none; }
  :is(.proof-item, .page-proof article).is-proof-open { z-index: auto; }
}
.product-stage { position: relative; cursor: pointer; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.7,.2,1); }
.product-stage:hover, .product-stage:focus-visible { border-color: color-mix(in srgb, var(--accent-label) 56%, var(--line)); box-shadow: 0 20px 48px rgb(9 47 71 / 14%); transform: translateY(-5px); }
.product-stage:hover .product-media img, .product-stage:focus-visible .product-media img { transform: translateY(-4px) scale(1.025); }
.product-gallery-thumbnails { position: relative; }
/* Article teaser used on the home and product pages so the article hub has
   internal links from the pages that actually get crawled most often. */
.article-teaser-section .article-list { display: block; margin-top: 28px; border-top: 1px solid var(--line); }
.article-teaser-section .article-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.article-teaser-section .article-row-copy { min-width: 0; }
.article-teaser-section .article-row h3 { margin-top: 8px; color: var(--strong); font-size: clamp(18px,2vw,24px); line-height: 1.25; }
.article-teaser-section .article-row h3 a { color: inherit; text-decoration: none; }
.article-teaser-section .article-row h3 a:hover, .article-teaser-section .article-row h3 a:focus-visible { color: var(--accent-label); }
.article-teaser-section .article-card-meta { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.article-teaser-section .article-card-excerpt { max-width: 820px; margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.article-teaser-section .article-card-link { flex: 0 0 auto; margin-top: 26px; color: var(--accent-label); white-space: nowrap; }
.article-teaser-more { margin-top: 22px; }
/* Category pages: unique introduction + article count (anti thin-page). */
.category-intro { max-width: 860px; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.category-count { margin-top: 12px; color: var(--accent-label); font-size: 13px; letter-spacing: .04em; }
@media (max-width: 767px) {
  .article-teaser-section .article-row { flex-direction: column; gap: 10px; }
  .article-teaser-section .article-card-link { margin-top: 0; }
}
/* Product detail magnifier (lens on the photo + magnified panel on its right). */
.detail-page .product-gallery-stage.is-zooming { cursor: crosshair; }
.detail-page .product-gallery-stage.is-zooming > #detail-image { cursor: crosshair; }
.product-zoom-lens {
  position: absolute; left: 0; top: 0; z-index: 3; display: none; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent-label) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 6px 18px rgb(9 47 71 / 18%);
}
.detail-page .is-zooming .product-zoom-lens { display: block; }
.product-zoom-panel {
  position: fixed; z-index: 60; display: none; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent-label) 45%, var(--line));
  border-radius: 10px; background-color: var(--surface); background-repeat: no-repeat;
  box-shadow: 0 24px 56px rgb(9 47 71 / 24%), 0 6px 16px rgb(9 47 71 / 12%);
}
.product-zoom-panel.is-visible { display: block; }
@media (hover: none), (pointer: coarse) { .product-zoom-panel, .product-zoom-lens { display: none !important; } }
.product-gallery-thumbnails button { position: relative; z-index: 0; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.product-gallery-thumbnails button:hover, .product-gallery-thumbnails button:focus-visible { z-index: 3; transform: translateY(-4px) scale(1.14); border-color: var(--accent); box-shadow: 0 12px 26px rgb(9 47 71 / 22%); }
.product-gallery-thumbnails button img { transition: transform 180ms ease; }
.product-gallery-thumbnails button:hover img, .product-gallery-thumbnails button:focus-visible img { transform: scale(1.06); }
.company-page .page-hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); }
.company-page .page-hero-copy { padding-right: 52px; }
.company-page .page-hero h1 { font-size: clamp(62px,7vw,104px); max-width: 900px; }
.company-page .feature-intro { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 64px; }
.company-page .feature-copy h2 { font-size: clamp(32px,3.2vw,48px); line-height: 1.22; }
.company-page .feature-image { min-height: 0; aspect-ratio: 4 / 5; }
.company-page .feature-image img { position: absolute; inset: 0; }
.company-page .page-proof strong { font-size: clamp(22px,2.2vw,30px); }
.core-business { padding-top: 0; }
.core-business-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 64px; padding-top: 48px; border-top: 1px solid var(--line-strong); }
.core-business h2 { color: var(--strong); font-size: clamp(38px,4vw,60px); line-height: 1.1; }
.core-business p { color: var(--muted); font-size: 19px; line-height: 1.8; }
.core-business .text-link { margin-top: 26px; }
.company-page .environment-grid { margin-top: 24px; }
/* Company qualifications: a single row of small cards, no click-to-enlarge. */
.qualifications-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.qualification-card { margin: 0; min-width: 0; }
.qualification-image { display: flex; height: clamp(150px,15vw,210px); padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #e9edf1; justify-content: center; align-items: center; }
.qualification-image img { width: 100%; height: 100%; object-fit: contain; }
.qualification-card figcaption { padding: 12px 2px 0; }
.qualification-card strong { display: block; color: var(--strong); font-size: 14px; font-weight: 650; line-height: 1.45; }
@media (min-width: 961px) { .nav-shell { gap: 24px; } .desktop-nav { gap: clamp(22px,2.8vw,46px); } }
@media (max-width: 1120px) and (min-width: 961px) { .desktop-nav a { font-size: 14px; } .brand-logo { width: 166px; } .nav-actions { gap: 8px; } .nav-contact { padding: 0 10px; font-size: 13px; } }
@media (max-width: 960px) {
  .hero h1 { max-width: 850px; font-size: clamp(44px,7.2vw,68px); }
  .company-page .page-hero-grid,.company-page .feature-intro { grid-template-columns: 1fr; }
  .company-page .page-hero-copy { padding-right: 0; }
  .company-page .feature-image { aspect-ratio: 4 / 3; }
  .core-business-layout { grid-template-columns: 1fr; gap: 28px; }
  .qualifications-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
}
@media (max-width: 767px) {
  .hero { min-height: 800px; min-height: max(760px,92dvh); padding-bottom: 110px; }
  .hero h1 { font-size: clamp(36px,7.9vw,54px); max-width: 100%; }
  .hero-slide-controls { bottom: 28px; }
  .product-explorer, .product-tabs { min-width: 0; }
  .product-tabs { max-width: 100%; }
  .company-page .page-hero h1 { font-size: clamp(48px,10vw,68px); }
  .company-page .feature-intro { gap: 36px; }
  .qualifications-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .qualification-image { height: 130px; padding: 8px; }
  .qualification-card strong { font-size: 13px; }
  .core-business p { font-size: 17px; }
}
@media (max-width: 767px) {
  .contact-details .whatsapp-qr, .contact-details .wechat-qr,
  .contact-page-card .whatsapp-qr, .contact-page-card .wechat-qr {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .hero-slides .hero-slide { transform: none !important; transition: none; } }

/* Compact section rhythm (2026-09-30): the old 132px/104px/82px vertical
   padding left nearly a blank screen between sections. Roughly halved
   site-wide so pages read as one continuous flow. */
.section { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 1120px) { .section { padding-top: 62px; padding-bottom: 62px; } }
@media (max-width: 767px) { .section { padding-top: 48px; padding-bottom: 48px; } }

/* The home product tabs are <a href> links (so crawlers reach all six products)
   while JavaScript keeps the in-page switching; keep the button appearance. */
.product-tab { display: block; color: var(--muted); text-decoration: none; }
.product-tab:hover, .product-tab:focus-visible, .product-tab.is-active { color: var(--strong); }