:root {
  --brand: #0b6e8f;
  --brand-dark: #0d2436;
  --brand-light: #e6f4f8;
  --accent: #1f7a5c;
  --ink: #12222a;
  --muted: #5a6b73;
  --bg: #ffffff;
  --card-bg: #f7fafb;
  --border: #e1e8eb;
  --radius: 12px;
  --maxw: 1600px;

  --tag-outdoor: #2f7d4f;
  --tag-household: #1c8c8c;
  --tag-medical: #2d4a7a;
  --tag-industrial: #a3631c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* Site-wide shared content container: same outer gutter/grid on every page.
   2026-09-23 revision: the previous max-width:1760px + 32px(desktop)/80px(wide) padding read as too
   full-bleed / oversized (owner feedback, referencing reccessary.com's more generous side margins).
   Desktop+ now scales proportionally -- width: min(92%, 1600px), centered -- instead of a fixed
   padding that jumps at breakpoints: ~58px side margin at 1440, ~160px at 1920, growing further on
   wider screens. Tablet/mobile keep the previous fixed-padding approach (already-approved sizes),
   since the proportional formula would pinch them too tight. */
.container { width: min(92%, 1600px); margin: 0 auto; }
@media (max-width: 900px) { .container { width: auto; margin: 0; padding: 0 24px; } }
@media (max-width: 560px) { .container { padding: 0 16px; } }

.preview-banner {
  background: #fff3cd;
  color: #7a5b00;
  text-align: center;
  font-size: 13px;
  padding: 6px 10px;
}
.preview-banner a { color: #7a5b00; text-decoration: underline; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: rgba(255,255,255,0.97);
  z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.brand strong { display: block; font-size: 15px; }
.brand small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > a, .dropdown > a { color: var(--ink); font-size: 14px; padding: 8px 12px; border-radius: 6px; }
.main-nav > a:hover, .dropdown > a:hover, .main-nav a.active { background: var(--brand-light); color: var(--brand-dark); text-decoration: none; }
.nav-cta { background: var(--brand); color: #fff !important; border-radius: 4px; padding: 8px 16px !important; }
.nav-cta:hover { background: var(--brand-dark); }
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 180px; padding: 6px; z-index: 50;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 8px 10px; font-size: 14px; border-radius: 6px; color: var(--ink); }
.dropdown-menu { min-width: 230px; }
.dropdown-menu a .lbl .en { display: block; font-size: 12px; line-height: 1.3; margin-top: 1px; }
.dropdown-menu a:hover { background: var(--brand-light); text-decoration: none; }
.dropdown-group-link { font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding-top: 10px !important; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; font-size: 20px; padding: 4px 10px; cursor: pointer; }

/* Hero */
.hero-section { padding: 24px 0; }
.hero-split { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .hero-split { grid-template-columns: 1fr; } }

.hero-media {
  position: relative;
  color: #fff;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
}
.hero-slide {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(17,24,33,0.80) 0%, rgba(17,24,33,0.62) 28%, rgba(17,24,33,0.28) 48%, rgba(17,24,33,0) 64%),
    linear-gradient(0deg, rgba(17,24,33,0.35) 0%, rgba(17,24,33,0) 40%),
    var(--slide-img) center/cover no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-media-body { position: relative; z-index: 2; padding: 24px 32px; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 62%; }
.hero-nav { position: absolute; bottom: 18px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.85); border: none; color: var(--brand-dark); font-size: 16px; cursor: pointer; }
.hero-nav.prev { right: 62px; }
.hero-nav.next { right: 18px; }
.hero-dots { position: absolute; top: 16px; right: 18px; z-index: 3; display: flex; gap: 8px; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.hero-dot.active { background: #fff; }
.hero-tag { display: inline-block; background: rgba(0,0,0,0.35); font-size: 15px; padding: 4px 11px; border-radius: 3px; margin-bottom: 10px; align-self: flex-start; }

.hero-picks { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); height: 100%; }
@media (max-width: 800px) {
  .hero-picks { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; }
  .hero-picks-label { grid-column: 1 / -1; }
  .hero-picks-note { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .hero-picks { grid-template-columns: 1fr; } }
.hero-picks-label { background: #fff; padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .04em; border-left: 3px solid var(--accent); }
.pick-item { display: flex; gap: 12px; background: #fff; padding: 10px 14px; text-decoration: none; color: var(--ink); flex: 1; align-items: center; }
.pick-item:hover { background: var(--card-bg); text-decoration: none; }
.pick-item img { width: 40%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.pick-item .pick-body { min-width: 0; }
.pick-item .pick-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-item .pick-title .en { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.pick-item .pick-excerpt { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-picks-note { font-size: 11px; color: var(--muted); padding: 8px 16px; background: #fff; }
@media (max-width: 800px) {
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-media-body { max-width: 68%; }
}
.hero {
  background: linear-gradient(135deg, rgba(6,60,77,0.9), rgba(11,110,143,0.82)), url('/assets/img/hero-banner.png') center/cover no-repeat;
  color: #fff;
}
.hero .eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; opacity: .8; margin-bottom: 10px; }
.hero h1 { font-size: 32px; margin: 0 0 14px; }
.hero .sub { font-size: 16px; opacity: 0.92; max-width: 640px; margin: 0 0 24px; }
.btn { display: inline-block; background: #fff; color: var(--brand-dark); padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 14px; }
.btn:hover { text-decoration: none; opacity: 0.92; }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }

section { padding: 56px 0; }
section.alt { background: var(--card-bg); }
h2.section-title { font-size: 24px; margin: 0 0 24px; color: var(--brand-dark); text-align: left; }
.section-lead { color: var(--muted); margin: -14px 0 24px; max-width: 700px; text-align: left; }

/* Audience split */
.audience-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.audience-split .audience-panel { background: #fff; padding: 28px; border-top: 4px solid var(--muted); }
.audience-split .audience-panel.personal { border-top-color: var(--tag-outdoor); }
.audience-split .audience-panel.business { border-top-color: var(--tag-medical); }
.audience-split .audience-panel h3 { margin: 0 0 8px; font-size: 18px; color: var(--brand-dark); }
.audience-split .audience-panel p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .audience-split { grid-template-columns: 1fr; } }

.subgroup-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 32px 0 12px; }
.subgroup-label:first-child { margin-top: 0; }

/* Solution segment cards */
.segments-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.segment-card {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.segment-card:hover { text-decoration: none; border-color: var(--brand); }
.segment-card img { height: 160px; width: 100%; object-fit: cover; }
.segment-card .segment-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.segment-card .segment-tag {
  display: inline-block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; margin-bottom: 10px;
  color: #fff; background: var(--muted);
  padding: 3px 9px; border-radius: 3px;
}
.segment-card .tag-outdoor { background: var(--tag-outdoor); }
.segment-card .tag-household { background: var(--tag-household); }
.segment-card .tag-medical { background: var(--tag-medical); }
.segment-card .tag-industrial { background: var(--tag-industrial); }
.segment-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.segment-card p { font-size: 13px; color: var(--muted); margin: 0 0 12px; flex: 1; }
.segment-card .segment-points { list-style: none; padding: 0; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.segment-card .segment-points li { display: inline; }
.segment-card .segment-points li:not(:last-child)::after { content: " · "; }
.segment-card .segment-cta { font-size: 13px; font-weight: 600; color: var(--brand); }

/* Trust layer */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.trust-strip .trust-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); text-align: left; width: 120px; }
.trust-strip img { width: 64px; height: 64px; object-fit: contain; }

/* Stat boxes */
.stat-section { background: var(--brand-dark); color: #fff; }
.stat-section .section-title { color: #fff; }
.stat-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid rgba(255,255,255,0.15); border-left: 1px solid rgba(255,255,255,0.15); }
.stat-box { border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); padding: 24px 20px; text-align: left; }
.stat-box .stat-value { font-size: 24px; font-weight: 700; color: #7fe0c9; }
.stat-box .stat-label { font-size: 13px; color: #cfe7ee; margin-top: 6px; }

/* Case study */
.case-card { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; padding: 22px; margin-bottom: 16px; }
.case-card::after { content: ""; display: table; clear: both; }
.case-card-figure { float: left; width: 260px; max-width: 40%; margin: 4px 20px 12px 0; }
.case-card-figure img { width: 100%; border-radius: 8px; display: block; }
.case-card-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 560px) { .case-card-figure { float: none; width: 100%; max-width: 100%; } }
.case-card .case-stage { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.case-card h3 { margin: 6px 0; font-size: 17px; }
/* any heading-level bilingual inline title (ut()) sitewide: Chinese primary/bold, on the heading's own
   line; English secondary/muted, on its own separate line below. Two rounds of review caught two
   distinct gaps here: first that only weight/color had changed, not order (fixed by swapping ut()'s own
   span order to zh-then-en in the DOM itself -- not a CSS trick -- so screen-reader/reading order
   matches sighted visual order, not just a flex row-reverse that would have left them mismatched);
   second that English needed to be on its own separate line, not just reordered on the same row. Scoped
   to heading contexts only, not the many other ut() call sites like nav/button labels/tags, to avoid
   repeating the earlier .bi-wide-reorder regression that once scrambled an entire case-card's order. */
h1 .bi-inline, h2 .bi-inline, h3 .bi-inline, h4 .bi-inline { display: flex; flex-direction: column; }
h1 .bi-inline .en, h2 .bi-inline .en, h3 .bi-inline .en, h4 .bi-inline .en { font-weight: 500; font-size: 0.6em; color: var(--muted); margin-top: 0.2em; }
h1 .bi-inline .zh, h2 .bi-inline .zh, h3 .bi-inline .zh, h4 .bi-inline .zh { font-weight: 700; }

table.spec-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.spec-table th, table.spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
table.spec-table th { color: var(--brand-dark); }

.contact-info p { margin: 6px 0; }

.site-footer { background: var(--brand-dark); color: #cfe7ee; margin-top: 20px; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-top: 40px; padding-bottom: 20px; }
.footer-col h4 { color: #fff; margin: 0 0 10px; font-size: 15px; }
.footer-col p { margin: 4px 0; font-size: 13px; }
.footer-col a { color: #cfe7ee; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 14px; padding-bottom: 24px; font-size: 12px; opacity: 0.85; }
.footer-bottom p { margin: 4px 0; }

/* nav collapses to the menu button below 1100px (was 900px: between ~901 and ~1000px the bilingual nav
   wrapped onto a second line even before the language switch was added) */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .main-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-top: 8px; }
  .main-nav.open { display: flex; }
  .dropdown-menu { position: static; display: block; box-shadow: none; border: none; padding-left: 14px; }
  .header-inner { flex-wrap: wrap; }
}

/* ---- v2 dev, batch 1 ---- */
.hero-media h1 {
  margin: 0 0 6px; font-weight: 800; line-height: 1.25;
  /* 2026-09-23: retuned so desktop lands ~36-42px (was ~43-46px, felt oversized per owner feedback) */
  font-size: clamp(28px, 18px + 2vw, 42px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-media .hero-lead-zh { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.hero-media .hero-en { margin: 0 0 14px; }
.hero-media .hero-en-title { margin: 0 0 3px; font-size: 19px; font-weight: 600; opacity: .92; line-height: 1.3; }
.hero-media .hero-en-lead { margin: 0; font-size: 17px; opacity: .85; line-height: 1.4; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-ctas .btn { padding: 9px 18px; font-size: 17px; }
.hero-media-col { display: flex; flex-direction: column; }
.hero-illus-note { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.btn-brand { background: var(--brand); color: #fff; }
.hero-note { position: absolute; left: 40px; top: 16px; z-index: 3; font-size: 11px; opacity: .7; }

/* ---- homepage-only colour refresh (2026-09-22 batch: layout/palette reference study,
   scoped to .page-home so other pages keep their current colours until reviewed) ---- */
.page-home {
  --home-accent: #7CB342;
  --home-accent-line: #89B56C;
  --home-btn: #4D742F;
  --home-btn-hover: #3d5c25;
  --home-ink: #1F2937;
}
.page-home .hero-tag { background: rgba(31,41,55,0.55); }
.page-home .hero-ctas .btn { background: var(--home-btn); color: #fff; border: 1px solid var(--home-btn); }
.page-home .hero-ctas .btn:hover, .page-home .hero-ctas .btn:focus-visible { background: var(--home-btn-hover); border-color: var(--home-btn-hover); }
.page-home .hero-ctas .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.85); }
.page-home .hero-ctas .btn-outline:hover, .page-home .hero-ctas .btn-outline:focus-visible { background: rgba(255,255,255,0.12); }
.page-home .hero-ctas .btn:focus-visible, .page-home .hero-ctas .btn-outline:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.page-home .hero-picks-label { border-left-color: var(--home-accent-line); color: var(--home-ink); }
.page-home .pick-item { color: var(--home-ink); }
.page-home .pick-item:hover { background: #f3f8ef; }
.page-home .pick-item:hover .pick-title { color: var(--home-btn); }
.page-home .section-title { color: var(--home-ink); }
.page-home #solutions .sol-card .segment-cta { color: var(--home-btn); }
.page-home #solutions .sol-card:hover { border-color: var(--home-accent); }
.page-home .stat-section { background: var(--home-ink); }
.page-home .stat-box .stat-value { color: var(--home-accent); }

.sol-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1200px) { .sol-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .sol-grid { grid-template-columns: 1fr; } }
.sol-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.sol-card:hover { text-decoration: none; border-color: var(--brand); }
.sol-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block; }
.sol-card .sol-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.sol-card h3 { margin: 0 0 2px; font-size: 23px; line-height: 1.3; }
.sol-card .sol-sub { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.sol-card p.sol-line { font-size: 13px; color: var(--ink); margin: 0 0 16px; flex: 1; line-height: 1.55; }   /* no line clamp: full text wraps naturally (Codex 07:04) */
.sol-card .segment-cta { font-size: 13px; font-weight: 600; color: var(--brand); margin-top: auto; }
@media (max-width: 640px) { .sol-card .sol-body { padding: 18px 16px 20px; } }
.sol-illus-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; }

.why-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.why-item { border-top: 3px solid var(--brand); padding-top: 14px; display: flex; flex-direction: column; }
.why-item h3.why-zh { display: block; color: var(--ink); font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.why-item .why-en { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.why-item .why-more { margin: auto 0 0; padding-top: 8px; font-size: 14px; }
.why-item .why-more .lbl .en { font-size: 12px; }
.why-item p { margin: 0; font-size: 14px; }
.why-item p[lang="en"]:not(.why-en) { color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .why-grid { grid-template-columns: 1fr; } }

.src-note { color: #9fc4cf; font-size: 12px; margin-top: 16px; }
.stat-box .stat-src { font-size: 11px; color: #8fb8c4; margin-top: 8px; }

.cta-band { background: var(--brand-light); text-align: center; }
.cta-band h2 { margin: 0 0 6px; color: var(--brand-dark); }
.cta-band p { margin: 0 0 18px; color: var(--muted); }
.cta-band .btn + .btn { margin-left: 8px; }
.btn-line { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

.case-card img { max-width: 100%; height: auto; }
.case-card .note { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

/* inquiry form */
.form-row { margin: 0 0 14px; }
.form-row label { display: block; font-size: 14px; margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 4px; font: inherit; background: #fff; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.form-msg { padding: 12px 14px; border-radius: 4px; margin: 0 0 16px; font-size: 14px; }
.form-msg.ok { background: #e6f5ee; border: 1px solid #b7e0c9; color: #1c5b3d; }
.form-msg.err { background: #fdecec; border: 1px solid #f2b8b8; color: #8a1f1f; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* medical page */
.spec-table.wide td:first-child { width: 34%; color: var(--muted); }
.pending-tag { display: inline-block; font-size: 11px; background: #fff4dc; color: #7a5200; border: 1px solid #f0d99b; border-radius: 3px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.doc-steps { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.doc-steps li { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 16px; font-size: 14px; }
.doc-steps b { display: block; margin-bottom: 4px; color: var(--brand-dark); }
@media (max-width: 800px) { .doc-steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hero-media-body { padding: 16px 18px 18px; max-width: 100%; }
  .hero-note { left: 22px; }
  .hero-media { aspect-ratio: auto; min-height: 380px; }
  .hero-slide { background: linear-gradient(0deg, rgba(17,24,33,0.88) 0%, rgba(17,24,33,0.78) 62%, rgba(17,24,33,0) 100%), var(--slide-img) center/cover no-repeat; }
  .hero-media .hero-lead-zh { font-size: 17px; margin-bottom: 8px; }
  .hero-media .hero-en-title { font-size: 16px; }
  .hero-media .hero-en-lead { font-size: 14px; }
  .hero-tag { font-size: 13px; }
}

.hero-media { background: #062c3b; }

/* banner + preview bar are shown on public pages */
.preview-bar { position: sticky; top: 0; z-index: 100; background: #b45309; color: #fff; text-align: center; font-size: 13px; padding: 6px 10px; }
.preview-bar a, .preview-bar button { color: #fff; }
.site-banner { background: #0b6e8f; color: #fff; text-align: center; font-size: 14px; padding: 8px 14px; }
.site-banner a { color: #fff; text-decoration: underline; }
.link-btn { background: none; border: 0; color: #7fe0c9; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* 2026-09-23: sitewide bilingual hierarchy corrected to 中文主標優先 (Chinese primary, bold; English
   secondary, smaller/muted) for every shared bilingual pattern below -- previously English rendered
   first and bold with Chinese smaller/muted, the reverse of the established priority. Visual order is
   flipped with flex column-reverse where the wrapper class is ALWAYS exactly a 2-child en+zh pair by
   construction (.bi-unit, always auto-generated by ub()/ui()) -- but NOT for the plain .bi class, which
   is applied by hand across the codebase both to simple 2-span pairs (<p class="sub bi">) AND to large
   multi-child containers (<div class="case-card bi"><h3>...</h3>...ub() output...</div>). Reordering
   .bi itself as a flex-reverse container was tried first and broke every multi-child case, reversing an
   entire case-card's Challenge/Solution/Outcome sections into nonsense order -- caught by screenshot
   review, not assumed safe. Fixed by using a direct-child selector for weight/color only (no reordering)
   on .bi, which is safe regardless of how many total children the container has: it only ever touches
   .en/.zh elements that are immediate children of something classed .bi, never ones nested inside a
   child .bi-unit. */
.bi > .en { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.bi > .zh { display: block; font-weight: 700; color: var(--ink); }
h3.bi > .en { font-size: 0.6em; font-weight: 500; }
ul.bi-list { list-style: none; padding: 0; margin: 0; }
ul.bi-list li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column-reverse; }
ul.bi-list li:last-child { border-bottom: 0; }
ul.bi-list .en { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
ul.bi-list .zh { display: block; font-weight: 700; color: var(--ink); }
.hero .sub .sub-en { display: block; }
.req-box { background: var(--brand-light); border: 1px solid #cfe7ee; border-radius: 6px; padding: 16px 18px; margin-top: 18px; }
.req-box p { margin: 0 0 6px; }
.req-box .btn { margin-top: 6px; }
.src { font-size: 12px; color: var(--muted); }

/* bilingual units (batch 4) */
.bi-unit:not(.bi-inline) { display: flex; flex-direction: column; }  /* zh is already first in the DOM */
.bi-unit:not(.bi-inline) > .en, .bi-unit:not(.bi-inline) > .zh { display: block; }
.bi-unit:not(.bi-inline) > .en { font-weight: 400; font-size: 0.85em; color: var(--muted); margin-top: 2px; }
.bi-unit:not(.bi-inline) > .zh { color: var(--ink); font-weight: 600; }
.spec-table td .bi-unit > .en, .spec-table th .bi-unit > .en { font-size: 13px; }
.spec-table td .bi-unit > .zh, .spec-table th .bi-unit > .zh { font-size: 13px; font-weight: 600; }
.hero-sub .zh, .hero-sub span[lang="zh-Hant"] { opacity: .92; }
/* dark-background sections: the rules above assume a light background (dark zh text, muted-gray en
   text) -- on a dark background that's dark-on-dark (invisible) and low-contrast gray-on-dark. These
   must come AFTER the general rules above: equal selector specificity (3 classes each) means source
   order decides the tie, and a rule placed earlier in the file (as these originally were, right next to
   .stat-section/.site-footer's own declarations) silently loses to a later general rule with the same
   specificity -- caught by checking getComputedStyle directly rather than trusting the rule "looked"
   like it should apply. */
.stat-section .bi-unit > .zh { color: #fff; }
.stat-section .bi-unit > .en { color: rgba(255,255,255,0.68); }
.site-footer .bi .zh, .site-footer .bi-unit > .zh { color: #fff; }
.site-footer .bi .en, .site-footer .bi-unit > .en { color: rgba(207,231,238,0.75); }
/* the plain dark .hero banner (About/Personal/Business/Products/Technology/Contact/Resources -- 7 pages)
   has the exact same problem: its <h1> uses .bi-inline (en gets an explicit muted-gray color, unreadable
   on this dark background) and its .sub paragraph uses .bi (en muted-gray, zh near-black -- both unreadable). */
.hero h1 .bi-inline .en { color: rgba(255,255,255,0.7); }
.hero .sub.bi > .zh, .hero .sub .bi-unit > .zh { color: #fff; }
.hero .sub.bi > .en, .hero .sub .bi-unit > .en { color: rgba(255,255,255,0.75); }

/* public preview strip */
.preview-strip { background: #b45309; color: #fff; text-align: center; font-size: 13px; padding: 7px 12px; line-height: 1.5; }
.preview-strip u { text-decoration: underline; }
.preview-strip .en { opacity: .85; font-size: 0.92em; }

/* real report thumbnails (batch: real images/reports) */
.report-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 16px 0; }
.report-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: block; color: var(--ink); }
.report-card:hover { border-color: var(--brand); text-decoration: none; }
.report-card img { width: 100%; height: 190px; object-fit: contain; background: #f4f7f8; padding: 8px; box-sizing: border-box; }
.report-card .report-cap { padding: 10px 12px 14px; font-size: 12px; line-height: 1.55; display: flex; flex-direction: column-reverse; }
.report-card .report-cap .en { display: block; color: var(--muted); margin-top: 4px; }
.report-card .report-cap .zh { display: block; color: var(--ink); font-weight: 600; }
.report-card .report-open { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--brand); }
.real-photo-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 14px 0; }
.real-photo-grid figure { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.real-photo-grid img { width: 100%; height: 180px; object-fit: cover; display: block; }
.real-photo-grid figcaption { padding: 8px 10px 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* Spec cards (Products catalog): zh key points first, one short en line, full spec folded.
   Closed: a normal grid card. Open: the card spans the whole grid row and turns into image-left /
   text-right, with the full spec as a zh list then an en list (2 columns on wide screens) -- so a long
   spec never becomes a narrow column of text. Browsers without :has() just keep the closed layout. */
.spec-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.spec-grid img { height: 200px; object-position: top; }
.spec-card figcaption { padding: 12px 14px 14px; color: var(--ink); font-size: 14px; }
.spec-card .spec-title { margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.spec-card .spec-pts { margin: 0 0 6px; padding-left: 1.1em; font-size: 14px; line-height: 1.6; }
.spec-card .spec-pts li { margin: 2px 0; }
.spec-card .spec-en { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.spec-card .spec-more { border-top: 1px solid var(--border); padding-top: 6px; font-size: 13px; }
.spec-card .spec-more summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.spec-card .spec-more summary .bi-inline { display: inline; }
.spec-card .spec-list { margin: 8px 0 0; padding-left: 1.1em; line-height: 1.6; }
.spec-card .spec-list li { margin: 3px 0; break-inside: avoid; }
.spec-card .spec-list.zh { font-size: 14px; color: var(--ink); }
.spec-card .spec-list.en { font-size: 12px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.spec-card .spec-open { margin: 8px 0 0; font-size: 12px; }
.spec-card .spec-open a { margin: 0 6px 0 0; }
.spec-grid .spec-card:has(details[open]) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .spec-grid .spec-card:has(details[open]) { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; }
  .spec-grid .spec-card:has(details[open]) .spec-img img { height: auto; object-fit: contain; }
  .spec-grid .spec-card:has(details[open]) figcaption { padding: 16px 20px 18px; }
}
@media (min-width: 1100px) {
  .spec-grid .spec-card:has(details[open]) .spec-list { column-count: 2; column-gap: 32px; }
}
.spec-caveat { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.mat-diagram { background: #fff; padding: 14px; border: 1px solid var(--border); border-radius: 6px; }
.mat-diagram img { width: 100%; height: 90px; object-fit: contain; }

.video-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 14px 0; }
.video-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; color: var(--ink); }
.video-card:hover { text-decoration: none; border-color: var(--brand); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%); }
.video-play::before { content: ''; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.55); }
.video-body { padding: 10px 12px 12px; }
.video-date { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.video-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-src { display: block; font-size: 12px; color: var(--muted); }
.video-desc { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.video-desc .zh { display: block; color: var(--ink); }
.video-desc .en { display: block; color: var(--muted); margin-top: 2px; }

/* AI-generated illustrative hero visuals (batch: Codex-provided, labeled as illustrative) */
/* split hero: text block (left, in the image's own negative space, no wash) + separate image block (right) */
.hero-illustrative { background: #fff; padding: 56px 0; }
.hero-illustrative-inner { display: flex; align-items: center; gap: 32px; min-height: 460px; }
.hero-illustrative .hero-text { flex: 0 0 46%; max-width: 46%; }
.hero-illustrative .hero-image { flex: 1; align-self: stretch; border-radius: 10px; overflow: hidden; min-height: 460px; max-height: 560px; }
.hero-illustrative .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.hero-illustrative .eyebrow { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
.hero-illustrative h1 { color: var(--brand-dark); margin: 0 0 6px; font-size: 44px; line-height: 1.2; font-weight: 800; }
.hero-illustrative .hero-sub-title { color: var(--muted); font-size: 22px; font-weight: 500; margin: 0 0 18px; }
.hero-illustrative .sub { display: flex; flex-direction: column; color: var(--muted); font-size: 15px; max-width: 480px; margin: 0 0 24px; line-height: 1.6; }
.hero-illustrative .sub .zh { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; color: #33454d; }
.hero-illustrative .hero-cta-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0 0 18px; }
.hero-illustrative .btn { background: var(--brand); color: #fff; margin: 0; }
.hero-illustrative .btn-outline { background: transparent; color: var(--brand-dark); border: 1px solid var(--brand-dark); }
@media (max-width: 480px) { .hero-illustrative .hero-cta-group { flex-direction: column; align-items: stretch; } }
.illus-note { font-size: 11px; color: var(--muted); margin-top: 18px; opacity: .85; max-width: 480px; }
.illus-note .en, .illus-note .zh { display: inline; }
.illus-note .zh::before { content: " "; }
@media (max-width: 900px) {
  .hero-illustrative-inner { flex-direction: column; align-items: stretch; min-height: 0; gap: 20px; }
  .hero-illustrative .hero-text { flex: none; max-width: none; order: 1; }
  .hero-illustrative .hero-image { order: 2; min-height: 0; max-height: none; aspect-ratio: 16 / 9; border-radius: 10px; }
  .hero-illustrative h1 { font-size: 30px; }
  .hero-illustrative .hero-sub-title { font-size: 20px; }
}
@media (max-width: 640px) {
  .hero-illustrative { padding: 28px 0 32px; }
}


/* Awards table (batch: colgroup widths, zh/en hierarchy, responsive card view) */
.awards-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.awards-table col.c-year { width: 12%; }
.awards-table col.c-award { width: 37%; }
.awards-table col.c-item { width: 51%; }
.awards-table th, .awards-table td { text-align: left; vertical-align: top; padding: 18px 14px; border-bottom: 1px solid var(--border); }
.awards-table th { font-size: 13px; color: var(--muted); font-weight: 600; padding-top: 0; padding-bottom: 10px; }
.awards-table td.year { white-space: nowrap; padding-left: 14px; padding-right: 16px; }
.awards-table td.year .yr { font-size: 16px; font-weight: 700; color: var(--brand-dark); display: block; }
.awards-table td.year .roc { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.awards-cell .zh { display: block; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.awards-cell .en { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.awards-cell .award-note { display: block; font-size: 12px; font-style: italic; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.awards-table a.award-link { font-size: 12px; color: var(--brand); display: inline-block; margin-top: 6px; }
@media (max-width: 640px) {
  .awards-table, .awards-table thead, .awards-table tbody, .awards-table th, .awards-table td, .awards-table tr { display: block; }
  .awards-table thead { position: absolute; left: -9999px; }
  .awards-table tr { border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
  .awards-table td { border-bottom: 0; padding: 4px 0; }
  .awards-table td.year { padding: 0 0 8px; }
  .awards-table td.year .yr, .awards-table td.year .roc { display: inline; margin: 0; }
  .awards-table td.year .roc::before { content: " · "; }
  .awards-table td:not(.year) { padding: 6px 0; }
}

/* Interface labels (nav, buttons, footer, eyebrows) via v2_lbl(): Chinese first in the DOM, English a
   smaller secondary word after it. Stays on one line where there's room; wraps as a unit otherwise. */
.lbl .en { font-size: 0.82em; font-weight: 400; opacity: 0.78; }
.lbl .zh { font-weight: inherit; }
.eyebrow .lbl .en { opacity: 0.85; }
.proc-figure { max-width: 1100px; margin: 14px 0 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.proc-figure img { width: 100%; height: auto; display: block; }
.proc-figure figcaption { padding: 12px 16px 14px; font-size: 13px; line-height: 1.6; }
.proc-figure .proc-src { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
/* Resources: per-event photo albums (thumbnails load only when the album is opened) */
.expo-album { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.expo-album summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; }
.expo-album summary .bi-inline { display: inline; }
.expo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.expo-grid a { display: block; position: relative; }
.expo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.expo-grid .expo-kv { grid-column: span 2; }
.expo-grid .expo-kv img { aspect-ratio: 2 / 1; }
.expo-kv-label { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.expo-kv-label .en { color: rgba(255,255,255,.8); }
.gb-albums { margin-top: 18px; }
/* Technology: in-page topic anchors (PDF: NTV-IPS / Membrane Platform / Materials) */
.tc-anchors { background: var(--card-bg); border-bottom: 1px solid var(--border); }
.tc-anchors .container { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.tc-anchors-label { color: var(--muted); font-size: 13px; }
.tc-anchors .bi-inline .en { font-size: 0.82em; color: var(--muted); }
section[id] { scroll-margin-top: 80px; }
.rep-en .rep-cap { display:block; font-size:11px; color: var(--muted); margin-top:4px; line-height:1.3; }
.spec-card .spec-ask { font-weight: 600; margin-left: 0; display: inline-block; margin-top: 4px; }
.spec-card .spec-open .spec-lk { display: block; }
/* Products: find-by-industry filter */
.ind-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ind-filter button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.ind-filter button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ind-filter button[aria-pressed="true"] .en { color: rgba(255,255,255,.85); }
.ind-status { margin: 8px 0 0; font-size: 13px; color: var(--muted); min-height: 1em; }
.spec-card[hidden], section[hidden] { display: none !important; }
.faq-list { max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; }
.faq-item summary .bi-inline { display: inline; }
.faq-item summary .bi-inline .en { font-weight: 400; font-size: .85em; color: var(--muted); }
.faq-item .bi-unit { margin-top: 8px; }

/* i18n single-language (English-only) output: English promoted from secondary to primary (lib.php filter) */
p.i18n-solo, .bi-unit:not(.bi-inline) > .i18n-solo, .award-note .i18n-solo, .spec-list.i18n-solo { font-weight: 400; }
.award-link .lbl > span { display: inline; }
html[lang="en"] .sol-card .sol-sub { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
html[lang="en"] .why-item .why-en { font-size: 17px; font-weight: 700; color: var(--ink); }
.main-nav > a.lang-switch { font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; margin: 0 2px; color: var(--ink); }
@media (min-width: 1101px) and (max-width: 1260px) {
  .main-nav > a, .dropdown > a { padding: 8px 7px; font-size: 13.5px; }
}

/* About: milestones strip (A6) -- derived from the awards table */
.milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 6px 0 10px; }
.milestones .ms-year { border-top: 3px solid var(--brand); padding-top: 8px; }
.milestones .ms-y { font-weight: 800; font-size: 20px; color: var(--brand-dark); margin-bottom: 4px; }
.milestones ul { margin: 0; padding: 0; list-style: none; }
.milestones li { font-size: 13px; line-height: 1.4; margin: 0 0 6px; }
.milestones li .en { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .milestones { grid-template-columns: 1fr 1fr; } }
.ms-note { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.ms-note .en { display: block; }
.related-row { margin: 18px 0 0; font-size: 14px; }
.why-item .why-src { font-size: 12px; color: var(--muted); margin-top: 8px; }
.form-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.orig-lbl { font-weight: 500; color: var(--muted); font-size: .85em; }

/* light split hero (business): dark-hero text colours reset for a white background */
.hero.hero-split-light h1 .en, .hero.hero-split-light h1 [lang=en] { display: block; color: var(--muted) !important; font-size: 22px; font-weight: 500; margin-top: 6px; }
.hero.hero-split-light h1 .zh { color: var(--brand-dark) !important; }
.hero.hero-split-light .sub p.zh, .hero.hero-split-light .sub .zh { color: var(--ink) !important; }
.hero.hero-split-light .sub p.en, .hero.hero-split-light .sub .en { color: var(--muted) !important; }
.hero.hero-split-light .eyebrow { color: var(--muted); }
/* native-size photos: never stretched beyond their pixel size */
.native-fig { margin: 0 0 14px; }
.native-fig img { width: auto; max-width: 100%; height: auto; border-radius: 8px; display: block; }
.native-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.segment-card img.img-contain { object-fit: contain; background: #fff; }
.table-scroll { overflow-x: auto; }
.d4-table td, .d4-table th { vertical-align: top; font-size: 13px; }

.d4-lbl { display: none; }
.d4-table { table-layout: fixed; width: 100%; }
.spec-table.wide.d4-table td:first-child { width: auto; }
.d4-table th:nth-child(1) { width: 30%; } .d4-table th:nth-child(2) { width: 10%; } .d4-table th:nth-child(3) { width: 18%; } .d4-table th:nth-child(4) { width: 14%; } .d4-table th:nth-child(5) { width: 14%; } .d4-table th:nth-child(6) { width: 14%; }
.d4-sub { margin: 18px 0 2px; font-size: 16px; } .d4-note { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.d4-table th:nth-child(1), .d4-table td:first-child { white-space: normal; }
@media (max-width: 720px) {
  .d4-table, .d4-table tbody, .d4-table tr, .d4-table td { display: block; width: auto; }
  .d4-table tr:first-child { display: none; }
  .d4-table tr { border: 1px solid #dde4ea; border-radius: 8px; margin: 0 0 12px; padding: 8px 12px; }
  .d4-table td { border: 0; padding: 5px 0; display: grid; grid-template-columns: 42% 1fr; gap: 10px; align-items: baseline; }
  .d4-table td:first-child { display: block; }
  .d4-table td:first-child { font-weight: 600; font-size: 15px; }
  .d4-lbl { display: block; font-size: 12px; color: #6b7a88; }
}

/* product photo in the illustrative hero at native resolution: contain, never upscaled (household, Codex 03:39) */
.hero-illustrative .hero-image.hero-native { background: #fff; display: flex; align-items: center; justify-content: center; }
.hero-illustrative .hero-image.hero-native img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 720px) {
  .hero-illustrative .hero-image.hero-native { aspect-ratio: auto; height: auto; padding: 12px 0; }
  .hero-illustrative .hero-image.hero-native img { max-height: 300px; }
}
/* two-column key/value tables stack on phones: test name on top, full-width result below */
@media (max-width: 720px) {
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: auto; }
  table.stack-sm tr:first-child { display: none; }
  table.stack-sm tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
  table.stack-sm td { border: 0; padding: 2px 0; }
  table.spec-table.wide.stack-sm td:first-child { width: auto; }
  table.stack-sm td:first-child { font-weight: 600; margin-bottom: 4px; }
}

/* equipment photos are tall product shots: show whole, never upscaled (was cover in a 180 px strip = 1.3x crop) */
.real-photo-grid.equip-grid img { height: 280px; object-fit: contain; background: #fff; padding: 8px 0; }

/* phones: the two hero CTAs sit side by side at equal width with a full tap area; they stack only if too narrow (Codex 04:53) */
@media (max-width: 560px) {
  .hero-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .hero-ctas .btn { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; row-gap: 2px; padding: 10px 12px; line-height: 1.25; }
}

/* hero tag: each '·' phrase stays whole, so lines break only at a separator */
.hero-tag .tag-seg { white-space: nowrap; }
@media (max-width: 560px) { .hero-tag { margin-right: 84px; } }   /* clear the slide dots (top-right) */
/* phones: slide controls get their own strip at the bottom of the carousel, never over the CTAs (Codex 08:55);
   44 px touch targets; keyboard (Tab to arrows, ←/→ on the carousel) unchanged */
@media (max-width: 560px) {
  .hero-media-body { padding-bottom: 72px; }
  .hero-nav { width: 44px; height: 44px; bottom: 14px; }
  .hero-nav.prev { right: 66px; }
  .hero-nav.next { right: 14px; }
}

/* report scans are evidence documents: show the whole page, never cropped or upscaled */
.real-photo-grid.report-grid img { height: 240px; object-fit: contain; background: #f4f7f8; padding: 6px; box-sizing: border-box; }
/* comfortable tap targets on phones (>= 40 px tall) */
.spec-card .spec-ask { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
@media (max-width: 720px) { .tc-anchors a { display: inline-flex; align-items: center; min-height: 40px; } }
/* spec card "open / download original image" links: numbered links become 40 px tap targets; single links full-height */
.spec-card .spec-open .spec-lk a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.spec-card .spec-open .spec-lk { line-height: 40px; }
/* pick titles / excerpts: full text, no ellipsis (public + trial) */
.pick-item .pick-title, .pick-item .pick-excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* carousel dots: 9 px dot, 28 px tap target (transparent padding ring) */
.hero-dot { width: 28px; height: 28px; border: 0; background: transparent; position: relative; }
.hero-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid #fff; box-sizing: border-box; }
.hero-dot.active::after { background: #fff; }
.hero-dots { gap: 0; }
/* "see report scans" links in the metric boxes: comfortable tap height */
.stat-src a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.hero-dot { width: 32px; height: 32px; }
.stat-src a { padding: 10px 0; margin: -10px 0; }
.hero-dots { top: 8px; right: 10px; }
@media (max-width: 560px) {
  .hero-dots { top: auto; bottom: 20px; left: 6px; right: auto; }   /* phones: dots share the bottom control strip with the arrows (left side) */
  .hero-tag { margin-right: 0; }
}
.hero-dot.active { background: transparent; }   /* only the 9 px inner dot is filled */
/* resources: full original video titles (no ellipsis); about: award links >= 40 px tap height */
.video-title { display: block; -webkit-line-clamp: unset; overflow: visible; }
.award-link { display: inline-flex; align-items: center; min-height: 40px; }
/* 561-1279 px: 16:9 is too short for tag + title + lead + CTAs -> box grows to its content (never clips the text), min 16:9 */
@media (min-width: 561px) and (max-width: 1279px) {
  .hero-media { aspect-ratio: auto; min-height: calc((100vw - 48px) * 0.5625 * 0.66); }
  .hero-media-body { height: auto; min-height: 100%; padding-top: 28px; padding-bottom: 72px; }
}
.tc-anchors a { display: inline-flex; align-items: center; min-height: 40px; }   /* all widths */
.audience-panel > a { display: inline-flex; align-items: center; min-height: 40px; }
.tc-anchors a { display: inline-flex; align-items: center; min-height: 40px; }

/* contact form: 48 px submit; invalid field outlined */
form button[type=submit] { min-height: 48px; padding: 12px 22px; }
form [aria-invalid=true] { outline: 2px solid #b42318; outline-offset: 1px; }

/* about: the "Give Back" link inside the milestone note stays on one line (.ms-note .en was display:block) */
.ms-note a .en { display: inline; }
.ms-note a { display: inline-flex; align-items: center; min-height: 40px; }