/* =============================================================
   Precision Manufacturing Showcase - V10
   "Exhibition Blue Gradient"
   Single-file stylesheet; pure CSS; no preprocessor.
   Trilingual safe (zh-Hant / en / ja).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root{
  /* Surface - tuned to the exhibition blue-grey gradient */
  --bg-0:#0a1623;          /* page floor */
  --bg-1:#10263a;          /* page body */
  --bg-2:#17324a;          /* card */
  --bg-3:#214763;          /* card raised / hover */

  /* Ink */
  --ink-0:#f5f8fb;
  --ink-1:#d4dde6;
  --ink-2:#90a0b1;
  --ink-3:#5e6d7d;
  --ink-4:#3e4a58;

  /* Hairlines */
  --line-1:rgba(224,235,244,.10);
  --line-2:rgba(224,235,244,.18);
  --line-3:rgba(224,235,244,.30);
  --line-4:rgba(224,235,244,.48);

  /* Metals */
  --silver-1:#eef2f6;
  --silver-2:#c8d2dd;
  --steel-1:#8896a4;
  --gold:#d8b66e;
  --gold-d:#a88846;

  /* Type */
  --ff-sans:"IBM Plex Sans","Noto Sans JP","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* Geometry */
  --max-w:1280px;
  --pad-x:clamp(20px,3.6vw,56px);

  /* Motion */
  --t-fast:120ms;
  --t-mid:240ms;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  background:var(--bg-0);color:var(--ink-1);
  font-family:var(--ff-sans);
  font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
body{
  margin:0;background:
    linear-gradient(180deg,rgba(236,244,248,.16) 0%,rgba(120,155,184,.10) 26%,rgba(26,55,81,.20) 54%,rgba(7,17,29,.42) 100%),
    radial-gradient(1000px 680px at 10% -12%,rgba(235,244,249,.28),transparent 64%),
    radial-gradient(860px 560px at 96% 8%,rgba(83,128,164,.24),transparent 62%),
    linear-gradient(180deg,#213d56 0%,#152d44 42%,#0a1623 100%);
  min-height:100vh;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:rgba(216,182,110,.32);color:#fff}

/* CJK tightening: Japanese / Chinese set slightly smaller to compensate
   for the taller rendering of Noto vs Plex Sans ??keeps tri-lang headings
   from blowing out their containers. */
:lang(ja){font-feature-settings:"palt"}
:lang(ja) h1,:lang(ja) h2,:lang(zh-Hant) h1,:lang(zh-Hant) h2{font-size:0.92em;letter-spacing:-.04em}
:lang(ja) .display,:lang(zh-Hant) .display{font-size:0.9em}

/* Lang-conditional visibility for static labels (declared inline in HTML) */
.l10n>span{display:none}
:lang(ja)     .l10n>[lang="ja"]    {display:inline}
:lang(en)     .l10n>[lang="en"]    {display:inline}
:lang(zh-Hant).l10n>[lang="zh-Hant"]{display:inline}

/* -------------------------------------------------------------
   3. Page shell
   ------------------------------------------------------------- */
.page{
  width:min(var(--max-w),100%);
  margin:0 auto;
  padding:0 var(--pad-x) 80px;
  position:relative;
}

/* Soft vertical guide rules ??subtle "engineering paper" texture */
.page::before,.page::after{
  content:"";position:fixed;top:0;bottom:0;width:1px;
  background:var(--line-1);pointer-events:none;z-index:0;
}
.page::before{left:max(calc((100vw - var(--max-w))/2 + var(--pad-x)),var(--pad-x))}
.page::after {right:max(calc((100vw - var(--max-w))/2 + var(--pad-x)),var(--pad-x))}
@media (max-width:680px){.page::before,.page::after{display:none}}

/* -------------------------------------------------------------
   4. Topbar
   ------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;margin-bottom:0;
  background:linear-gradient(180deg,rgba(14,35,55,.94),rgba(14,35,55,.68) 80%,rgba(14,35,55,0));
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--line-1);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink-0);
  font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.04em;
}
.brand .mark{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--silver-1),var(--steel-1) 70%,#5d6b78);
  color:#0a1018;font-family:var(--ff-sans);font-weight:700;font-size:14px;letter-spacing:-.03em;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 20px rgba(0,0,0,.45);
}
.brand #siteBrand{display:inline-block;max-width:38ch}
.nav{display:flex;align-items:center;gap:10px}
.nav a{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.015);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.nav a:hover{color:var(--ink-0);border-color:var(--line-3);background:rgba(255,255,255,.04)}

/* Language switch ??segmented control, mono labels */
.langGroup{display:flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:rgba(255,255,255,.025)}
.langBtn{
  border:0;background:transparent;color:var(--ink-2);
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.10em;
  padding:6px 11px;border-radius:999px;transition:color var(--t-fast),background var(--t-fast);
}
.langBtn:hover{color:var(--ink-0)}
.langBtn.active{
  background:linear-gradient(135deg,var(--silver-1),var(--silver-2));
  color:#0a1018;font-weight:600;
}

/* -------------------------------------------------------------
   5. Shared bits ??kicker, h-rules, mono labels
   ------------------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
  padding:0;margin:0 0 22px;
  border:none;background:none;
}
.kicker::before{
  content:"";width:24px;height:1px;background:var(--line-4);
  display:inline-block;
}

/* Section ruler ??thin gold tick + hairline */
.rule{
  display:flex;align-items:center;gap:14px;margin:0 0 28px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
.rule::before{content:"";width:32px;height:1px;background:var(--gold);flex:0 0 auto}
.rule::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* Tag pills */
.tagRow{display:flex;gap:6px;flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-1);
  border:1px solid var(--line-2);background:rgba(255,255,255,.025);
  border-radius:4px;padding:5px 8px;
}

/* -------------------------------------------------------------
   6. Hero (home)
   ------------------------------------------------------------- */
.hero{
  padding:88px 0 72px;
  position:relative;
  border-bottom:1px solid var(--line-1);
}
.heroGrid{
  display:grid;grid-template-columns:1.18fr .82fr;
  gap:64px;align-items:end;
}
.hero h1{
  font-family:var(--ff-sans);
  font-size:clamp(44px,6.6vw,98px);
  line-height:.96;letter-spacing:-.045em;font-weight:500;
  margin:0 0 28px;color:var(--ink-0);
  text-wrap:balance;
  max-width:18ch;
}
.hero .lead{
  font-size:clamp(15px,1.2vw,18px);line-height:1.62;
  color:var(--ink-2);margin:0;max-width:54ch;text-wrap:pretty;
}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}

/* CTAs */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 20px;border-radius:4px;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.cta.primary{
  background:var(--gold);color:#1a1408;border:1px solid var(--gold);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 32px rgba(216,182,110,.18);
}
.cta.primary:hover{background:#e6c982;transform:translateY(-1px)}
.cta.primary::after{content:">";font-family:var(--ff-sans);font-weight:600;letter-spacing:0;transition:transform var(--t-fast)}
.cta.primary:hover::after{transform:translateX(3px)}
.cta.secondary{
  background:transparent;color:var(--ink-1);border:1px solid var(--line-3);
}
.cta.secondary:hover{border-color:var(--line-4);color:var(--ink-0);background:rgba(255,255,255,.03)}

/* Right specimen panel ??repurposed: a vertical "manufacturing index" */
.heroPanel{
  position:relative;
  border:1px solid var(--line-2);
  background:
    linear-gradient(180deg,rgba(236,244,248,.04),rgba(255,255,255,0) 60%),
    var(--bg-2);
  border-radius:6px;
  padding:36px 32px 28px;
  min-height:0;
  overflow:visible;
  box-shadow:none;
}
.heroPanel::before{
  content:"MANUFACTURING / 2026";
  position:absolute;top:14px;right:18px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-3);
}
.heroPanelInner{display:grid;gap:18px}
.heroPanel .kicker{margin-bottom:6px}
.bigBadge{
  font-family:var(--ff-sans);
  font-size:clamp(34px,4vw,52px);line-height:.95;letter-spacing:-.04em;font-weight:500;
  color:var(--ink-0);
  text-wrap:balance;
  padding-bottom:20px;border-bottom:1px solid var(--line-2);
}
.bigBadge br{display:none}
.pillRow{
  display:grid;grid-template-columns:1fr;gap:0;
  counter-reset:pill 0;
}
.pillRow .pill{
  counter-increment:pill;
  display:flex;align-items:center;gap:16px;
  font-family:var(--ff-mono);font-size:12px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-1);
  padding:13px 0;
  border:none;background:none;border-radius:0;
  border-bottom:1px solid var(--line-1);
}
.pillRow .pill:last-child{border-bottom:none}
.pillRow .pill::before{
  content:counter(pill,decimal-leading-zero);
  color:var(--ink-3);font-weight:500;font-size:11px;letter-spacing:.16em;
  min-width:24px;
}

/* -------------------------------------------------------------
   7. Sections ??generic
   ------------------------------------------------------------- */
.section{padding:104px 0 0;position:relative}
.sectionHeader{
  display:grid;grid-template-columns:1fr 1.4fr;gap:48px;
  margin:0 0 56px;padding-bottom:28px;border-bottom:1px solid var(--line-2);
  align-items:end;
}
.sectionHeader h2{
  font-family:var(--ff-sans);
  font-size:clamp(32px,3.6vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:500;
  margin:0;color:var(--ink-0);text-wrap:balance;
}
.sectionHeader p{
  font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;max-width:60ch;text-wrap:pretty;
}
.sectionHeader::before{
  content:attr(data-section-label);
  position:absolute;top:104px;left:0;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.sectionHeader[data-section-label]{padding-top:34px}

/* Centered variant retained for compatibility, but we left-align by default. */

/* -------------------------------------------------------------
   8. Product card grid (home #coreFlow / .flow / .productCard)
   ------------------------------------------------------------- */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-1);
  border:1px solid var(--line-1);
  counter-reset:card 0;
}
.productCard{
  counter-increment:card;
  display:flex;flex-direction:column;
  background:var(--bg-1);
  position:relative;
  transition:background var(--t-mid) var(--ease);
  isolation:isolate;
}
.productCard::before{
  content:counter(card,decimal-leading-zero) " / 18";
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-1);
  padding:5px 8px;background:rgba(10,28,45,.68);border:1px solid var(--line-2);border-radius:3px;
  backdrop-filter:blur(8px);
}
.productCard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color var(--t-mid) var(--ease);
}
.productCard:hover{background:var(--bg-2)}
.productCard:hover::after{border-color:var(--gold)}

.productPhoto{
  position:relative;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#dde4ec,#7e8d9c);
  overflow:hidden;
}
.productPhoto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease);
  filter:saturate(1.0);
}
.productCard:hover .productPhoto img{transform:scale(1.025)}
.productPhoto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(10,28,45,.42));
  pointer-events:none;
}

.productInfo{
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--line-1);
}
.productInfo small{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}
.productInfo h3{
  font-family:var(--ff-sans);font-size:22px;line-height:1.12;letter-spacing:-.025em;font-weight:500;
  margin:0;color:var(--ink-0);text-wrap:balance;
}
.productInfo .tagRow{margin-top:auto}

/* -------------------------------------------------------------
   9. Case (product) page ??story hero
   ------------------------------------------------------------- */
.breadcrumb{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:24px 0 0;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.breadcrumb a{color:var(--ink-1)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--ink-4)}

.productStoryHero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-1);
  border:1px solid var(--line-1);
  margin-top:32px;padding:0;
  position:relative;
}
.productStoryHero::before{
  content:"CASE";
  position:absolute;top:-1px;left:-1px;z-index:3;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.20em;color:var(--ink-3);
  padding:8px 12px;background:var(--bg-0);border:1px solid var(--line-2);
}
.storyPhoto{
  background:linear-gradient(135deg,#dde4ec,#7e8d9c);
  min-height:520px;position:relative;overflow:hidden;
  border-radius:0;
}
.storyPhoto img{
  width:100%;height:100%;min-height:520px;object-fit:cover;filter:saturate(1.0);
}
.storyIntro{
  background:var(--bg-1);
  padding:48px 44px;
  display:flex;flex-direction:column;gap:0;justify-content:space-between;
  border-radius:0;border:none;
}
.storyIntro .kicker{margin-bottom:32px}
.storyIntro h1{
  font-family:var(--ff-sans);
  font-size:clamp(38px,4.4vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:500;
  margin:0 0 24px;color:var(--ink-0);text-wrap:balance;
}
.storyIntro p{
  font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 32px;text-wrap:pretty;
}
.storyIntro .tagRow{margin-top:auto;padding-top:24px;border-top:1px solid var(--line-2)}

/* -------------------------------------------------------------
   10. Media duo - detail photo + product narrative
   ------------------------------------------------------------- */
.mediaDuo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px;background:transparent;
  border:none;
  padding:0;margin-top:22px;align-items:stretch;
}
.detailPhoto{
  background:linear-gradient(135deg,#dde4ec,#7e8d9c);
  min-height:440px;overflow:hidden;
  border:1px solid var(--line-1);border-radius:0;
}
.detailPhoto img{width:100%;height:100%;object-fit:cover;filter:saturate(1.0)}

.productNarrative{
  background:var(--bg-1);padding:32px 32px 34px;
  display:flex;flex-direction:column;gap:22px;
  border:1px solid var(--line-1);border-radius:0;
}
.narrativeHeader{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line-2);
}
.narrativeHeader .kicker{margin:0 0 8px}
.narrativeHeader h2{
  font-family:var(--ff-sans);font-size:28px;line-height:1.1;letter-spacing:-.025em;font-weight:500;
  margin:0;color:var(--ink-0);text-wrap:balance;
}
.narrativeIndex{
  flex:0 0 auto;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-2);padding:8px 10px;
}
.narrativeLead{
  margin:0;color:var(--ink-2);font-size:15px;line-height:1.75;text-wrap:pretty;
}
.narrativeMeta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-1);border:1px solid var(--line-1);
}
.narrativeMeta span{
  background:rgba(255,255,255,.025);padding:14px 16px;
  font-size:13px;line-height:1.45;color:var(--ink-1);
}
.narrativeMeta b{
  display:block;margin-bottom:6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);
}
.narrativeBlocks{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line-1);border:1px solid var(--line-1);
}
.narrativeBlock{
  display:grid;grid-template-columns:46px minmax(160px,190px) minmax(0,1fr);gap:20px 24px;
  background:var(--bg-1);padding:22px 30px;align-items:start;
}
.narrativeBlock span{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;color:var(--gold);
}
.narrativeBlock h3{
  margin:0;font-family:var(--ff-sans);font-size:19px;line-height:1.15;letter-spacing:-.02em;font-weight:500;
  color:var(--ink-0);text-wrap:balance;
}
.narrativeBlock p{
  min-width:0;margin:0;color:var(--ink-2);font-size:14px;line-height:1.65;text-wrap:pretty;
}

/* -------------------------------------------------------------
   12. Talk Track (Presenter mode)
   ------------------------------------------------------------- */
.talkTrack{
  border:1px solid var(--line-2);
  background:var(--bg-1);
  border-radius:4px;overflow:hidden;
  margin-top:64px;
}
.talkTrack summary{
  cursor:pointer;list-style:none;
  padding:22px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--ink-0);
  font-family:var(--ff-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.talkTrack summary::-webkit-details-marker{display:none}
.talkTrack summary > span[data-ui="talkTitle"]{display:flex;align-items:center;gap:14px}
.talkTrack summary > span[data-ui="talkTitle"]::before{
  content:"";width:24px;height:1px;background:var(--gold);
}
.talkTrack summary > span[data-ui="talkHint"]{
  color:var(--ink-3)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.10em;text-transform:none;
}
.talkTrack summary::after{
  content:"+";font-family:var(--ff-sans);font-size:22px;color:var(--ink-2);
  transition:transform var(--t-mid) var(--ease);font-weight:300;
}
.talkTrack[open] summary::after{transform:rotate(45deg);color:var(--gold)}
.talkTrack[open] summary{border-bottom:1px solid var(--line-2)}
.talkContent{padding:24px 28px 28px}
.talkContent ol{
  margin:0;padding-left:0;list-style:none;
  display:grid;gap:14px;counter-reset:talk 0;
}
.talkContent ol li{
  counter-increment:talk;
  display:grid;grid-template-columns:48px 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-1);
  font-size:14.5px;line-height:1.65;color:var(--ink-1);
}
.talkContent ol li:last-child{border-bottom:none}
.talkContent ol li::before{
  content:counter(talk,decimal-leading-zero);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:500;
  padding-top:4px;
}

/* -------------------------------------------------------------
   13. Application page
   ------------------------------------------------------------- */
.appHero{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:end;
  padding:64px 0 56px;border-bottom:1px solid var(--line-2);margin-top:24px;
}
.appHero h1{
  font-family:var(--ff-sans);
  font-size:clamp(40px,5.4vw,80px);line-height:.96;letter-spacing:-.04em;font-weight:500;
  margin:0 0 24px;color:var(--ink-0);text-wrap:balance;
}
.appHero p{
  font-size:15px;line-height:1.65;color:var(--ink-2);margin:0;text-wrap:pretty;max-width:54ch;
}

/* Manufacturing Focus panel ??re-uses #appFocus as a paragraph */
.focusPanel{
  display:grid;grid-template-columns:280px 1fr;gap:48px;
  padding:72px 0 0;
  align-items:start;
}
.focusPanel .focusLabel{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);position:relative;padding-left:40px;
}
.focusPanel .focusLabel::before{content:"";position:absolute;left:0;top:7px;width:24px;height:1px;background:var(--gold)}
.focusPanel #appFocus{
  font-family:var(--ff-sans);font-size:clamp(18px,1.7vw,24px);line-height:1.5;font-weight:400;letter-spacing:-.005em;
  color:var(--ink-1);margin:0;max-width:62ch;text-wrap:pretty;
}

/* Cases grid on application page reuses .productCard styling
   The content-loader emits a slightly different class set (.caseCard) ??adapt: */
.caseGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-1);border:1px solid var(--line-1);
  counter-reset:card 0;
}
.caseGrid .caseCard{
  counter-increment:card;
  background:var(--bg-1);
  display:flex;flex-direction:column;
  position:relative;border:none;border-radius:0;box-shadow:none;
  transition:background var(--t-mid) var(--ease);
  isolation:isolate;
}
.caseGrid .caseCard::before{
  content:counter(card,decimal-leading-zero);
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-1);
  padding:5px 8px;background:rgba(7,11,17,.62);border:1px solid var(--line-2);border-radius:3px;
  backdrop-filter:blur(8px);
}
.caseGrid .caseCard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color var(--t-mid) var(--ease);
}
.caseGrid .caseCard:hover{background:var(--bg-2)}
.caseGrid .caseCard:hover::after{border-color:var(--gold)}
.caseGrid .casePhoto{
  aspect-ratio:4/3;height:auto;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#dde4ec,#7e8d9c);
}
.caseGrid .casePhoto img{width:100%;height:100%;object-fit:cover;filter:saturate(1.0);transition:transform 500ms var(--ease)}
.caseGrid .caseCard:hover .casePhoto img{transform:scale(1.025)}
.caseGrid .caseMeta{
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--line-1);
}
.caseGrid .caseMeta small{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);margin:0;
}
.caseGrid .caseMeta h3{
  font-family:var(--ff-sans);font-size:22px;line-height:1.12;letter-spacing:-.025em;font-weight:500;
  margin:0;color:var(--ink-0);text-wrap:balance;
}
.caseGrid .caseMeta .tagRow{margin:0}
.caseGrid .caseCta{
  align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-1);background:transparent;border:1px solid var(--line-3);
  padding:9px 12px;border-radius:3px;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.caseGrid .caseCta::after{content:">";letter-spacing:0;transition:transform var(--t-fast)}
.caseGrid .caseCard:hover .caseCta{border-color:var(--gold);color:var(--gold)}
.caseGrid .caseCard:hover .caseCta::after{transform:translateX(3px)}

/* Capability matrix ??spec table */
.matrix{
  border:1px solid var(--line-2);background:var(--bg-1);border-radius:4px;
  overflow:auto;
}
.matrix table{width:100%;border-collapse:collapse;min-width:760px}
.matrix th,.matrix td{
  padding:18px 16px;
  border-bottom:1px solid var(--line-1);
  text-align:center;
  font-family:var(--ff-mono);font-size:13px;letter-spacing:.04em;color:var(--ink-1);
}
.matrix th{
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  background:rgba(255,255,255,.018);
  border-bottom:1px solid var(--line-2);
  padding:14px 16px;
}
.matrix th:first-child,.matrix td:first-child{
  text-align:left;font-family:var(--ff-sans);font-weight:500;color:var(--ink-0);font-size:14px;letter-spacing:-.01em;
  padding-left:22px;
}
.matrix tbody tr:last-child td{border-bottom:none}
.matrix tbody tr:hover{background:rgba(255,255,255,.02)}
.matrix td:not(:first-child){font-size:16px;color:var(--ink-1)}

/* -------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------- */
footer{
  margin-top:120px;padding:32px 0 16px;
  border-top:1px solid var(--line-1);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}

/* -------------------------------------------------------------
   15. RWD
   ------------------------------------------------------------- */
@media (max-width:1020px){
  .heroGrid{grid-template-columns:1fr;gap:48px;align-items:start}
  .heroPanel{padding:28px 24px 22px}
  .sectionHeader{grid-template-columns:1fr;gap:18px}
  .productStoryHero{grid-template-columns:1fr}
  .storyPhoto,.storyPhoto img{min-height:380px}
  .storyIntro{padding:36px 32px}
  .mediaDuo{grid-template-columns:1fr;margin-top:18px}
  .detailPhoto{min-height:340px}
  .storySceneGrid{grid-template-columns:1fr}
  .flow,.caseGrid{grid-template-columns:repeat(2,1fr)}
  .appHero{grid-template-columns:1fr;gap:24px}
  .focusPanel{grid-template-columns:1fr;gap:18px;padding-top:56px}
}
@media (max-width:680px){
  html,body{overflow-x:hidden}
  :root{--pad-x:18px}
  .productStoryHero,.mediaDuo,.storyIntro,.productNarrative,.detailPhoto{min-width:0;max-width:100%}
  .topbar{padding:10px 0;gap:8px}
  .brand{font-size:11px}
  .brand #siteBrand{display:none}
  .nav{gap:6px}
  .nav a{display:none}
  .langGroup{padding:2px}
  .langBtn{padding:5px 8px;font-size:10px}

  .hero{padding:56px 0 48px}
  .hero h1{font-size:clamp(34px,8.4vw,48px);overflow-wrap:anywhere}
  .heroPanel{padding:24px 20px 18px}
  .bigBadge{font-size:30px}

  .section{padding:72px 0 0}
  .sectionHeader{
    margin-bottom:32px;
    padding-top:0;
    padding-bottom:22px;
    gap:18px;
  }
  .sectionHeader::before{
    position:static;
    display:block;
    margin:0 0 10px;
    font-size:10.5px;
    line-height:1.25;
    letter-spacing:.14em;
  }
  .sectionHeader[data-section-label]{padding-top:0}
  .sectionHeader h2{font-size:30px;line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere}
  .sectionHeader p{font-size:15px;line-height:1.68;overflow-wrap:anywhere}

  .flow,.caseGrid{grid-template-columns:1fr}
  .productCard::before,.caseGrid .caseCard::before{top:10px;left:10px;font-size:10px}

  .storyIntro{padding:28px 22px}
  .storyIntro h1{font-size:clamp(30px,8.2vw,36px);line-height:1.12;overflow-wrap:anywhere}
  .storyIntro h1,.storyIntro p,.narrativeLead{max-width:calc(100vw - 80px)}
  .storyIntro p,.narrativeLead,.narrativeBlock h3,.narrativeBlock p{overflow-wrap:anywhere;word-break:break-word}
  :lang(ja) .storyIntro p,:lang(ja) .narrativeLead,:lang(ja) .narrativeBlock p,
  :lang(zh-Hant) .storyIntro p,:lang(zh-Hant) .narrativeLead,:lang(zh-Hant) .narrativeBlock p{word-break:break-all}

  .productNarrative{padding:24px 20px 26px}
  .narrativeHeader{flex-direction:column;gap:12px}
  .narrativeMeta{grid-template-columns:1fr}
  .narrativeBlock{grid-template-columns:32px 1fr;gap:8px 14px}
  .narrativeBlock p{grid-column:2}

  .scenePanel{padding:28px 24px}
  .talkTrack summary{padding:18px 20px;flex-direction:column;align-items:flex-start;gap:6px}
  .talkContent{padding:18px 20px 22px}

  .matrix table{min-width:560px}
  .matrix th,.matrix td{padding:14px 12px}
}

/* -------------------------------------------------------------
   16. Print
   ------------------------------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  .topbar,.langGroup,.heroActions,.talkTrack{display:none}
  .productCard,.caseCard,.scenePanel{break-inside:avoid}
}