/* ============================================================
     TOKEN ARCHITECTURE (design-system/SKILL.md three-layer model)
     Layer 1 — Primitive: raw brand hex values (navy-*, gold-*, ink-*)
     Layer 2 — Semantic:  purpose aliases (--bg, --text, --accent, --surface-dark)
     Layer 3 — Component: per-component values live inline where declared
                           (e.g. .btn-gold, .badge) and always resolve back
                           through a Layer-2 semantic token, never a raw hex.
     ============================================================ */
  :root{
    /* Layer 1 — Primitive */
    --navy-950:#050d1a; --navy-900:#0A192F; --navy-800:#122644; --navy-700:#1b345a;
    --gold-600:#b4872a; --gold-500:#D4AF37; --gold-300:#e8ce85; --gold-100:#f6ecd0;
    --sand-50:#f7f3ea; --paper:#fffdf8; --ink-900:#1a2230; --ink-700:#3d4759; --ink-500:#69748a;
    --line:#e3d9c3; --confirmed:#2f7a53; --pending:#a86a1a;
    /* Layer 1 — Primitive: type stacks.
       Every font-family in this file resolves through one of these; there is
       no literal stack anywhere below. The per-language variants exist because
       Arabic and Chinese lead with a different face, and the near-duplicates
       (serif vs display-alt, mono vs mono-num) are the stacks that were already
       in use -- each is kept exactly as it was so this refactor changes no
       rendering. Unify them deliberately if ever wanted, not by accident. */
    --font-body:"Inter","Tajawal","Noto Sans SC",system-ui,sans-serif;
    --font-display:"Cormorant Garamond","Cairo","Noto Serif SC",serif;
    --font-body-zh:"Noto Sans SC","Inter",system-ui,sans-serif;
    --font-body-ar:"Tajawal","Inter",system-ui,sans-serif;
    --font-display-alt:"Cormorant Garamond","Cairo",serif;
    --font-accent:"Big Shoulders","Inter",sans-serif;
    --font-accent-ar:"Big Shoulders","Cairo",sans-serif;
    --font-mono-num:"IBM Plex Mono","Inter",monospace;
    --font-display-zh:"Noto Serif SC","Cairo",serif;
    --font-display-ar:"Cairo","Noto Serif SC",serif;
    --font-serif:"Cormorant Garamond",serif;
    --font-accent-plain:"Big Shoulders",sans-serif;
    --font-accent-serif:"Big Shoulders",serif;
    --font-mono:"IBM Plex Mono",monospace;
    --font-accent-cairo:"Cairo",sans-serif;
    /* Layer 2 — Semantic */
    --bg:var(--sand-50); --bg-elevated:var(--paper); --text:var(--ink-900); --text-muted:var(--ink-700); --text-soft:var(--ink-500);
    --border:var(--line); --surface-dark:var(--navy-900); --surface-dark-2:var(--navy-800);
    --on-dark:#f3ede0; --on-dark-muted:#b7c1d6; --accent:var(--gold-500); --accent-strong:var(--gold-600); --accent-soft:var(--gold-100);
    --shadow-1: 0 1px 2px rgba(20,15,5,.06), 0 8px 24px -12px rgba(20,15,5,.18);
    --shadow-2: 0 20px 60px -20px rgba(5,13,26,.45);
    --ring-color: var(--gold-500); --ring-width: 2px; --ring-offset: 2px;
    --dur-feedback: 140ms; --dur-state: 240ms; --dur-nav: 380ms; --dur-focal: 650ms; --header-h: 64px;
    /* emilkowalski/skill regression check: zero transition:all in this file; only transform/opacity/color/background-color are animated; */
    /* high-frequency controls (lang-switch, nav buttons) are pinned to --dur-feedback, never --dur-focal. */
    --ease-confident: cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0b1220; --bg-elevated:#111b2e; --text:#eef1f6; --text-muted:#b9c2d4; --text-soft:#8996ad;
      --border:#233247; --surface-dark:#060d1a; --surface-dark-2:#0e1a2f; --on-dark:#f3ede0; --on-dark-muted:#aab6cc;
      --accent:#e3c268; --accent-strong:#d4af37; --accent-soft:#241d0f; --shadow-2: 0 20px 70px -18px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0b1220; --bg-elevated:#111b2e; --text:#eef1f6; --text-muted:#b9c2d4; --text-soft:#8996ad;
    --border:#233247; --surface-dark:#060d1a; --surface-dark-2:#0e1a2f; --on-dark:#f3ede0; --on-dark-muted:#aab6cc;
    --accent:#e3c268; --accent-strong:#d4af37; --accent-soft:#241d0f; --shadow-2: 0 20px 70px -18px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box;}
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

  body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
  html[lang="ar"] body{ font-family:var(--font-body-ar); }
  html[lang="zh"] body{ font-family:var(--font-body-zh); }

  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; text-wrap:balance; margin:0; color:var(--text); }
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family:var(--font-display-ar); font-weight:700; }
  html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4{ font-family:var(--font-display-zh); }

  .num, .stat-num, table.spec-table td:not(:first-child), .qf .v{ font-family:var(--font-mono-num); font-variant-numeric:tabular-nums; }
  .eyebrow{ font-family:var(--font-accent); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-strong); font-weight:700; display:flex; align-items:center; gap:.5rem; }
  html[lang="ar"] .eyebrow{ font-family:var(--font-accent-cairo); letter-spacing:.02em; }
  html[lang="zh"] .eyebrow{ font-family:inherit; letter-spacing:.02em; }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent-strong); display:inline-block; }
  html[dir="rtl"] .eyebrow::before{ order:2; }

  a{ color:inherit; }
  /* height:auto is REQUIRED, not cosmetic. eleventy-img stamps width/height
     attributes onto every <img> it rewrites (good: it prevents layout shift),
     and those attributes map to presentational hints for the CSS width/height
     properties. Any rule that constrains only the width therefore leaves the
     attribute height in force and the picture renders stretched. This bit the
     splash mark on 2026-09-01: the logo rendered 180x355 instead of 180x167.
     Rules below that set BOTH dimensions (.photo-frame img, .cert-frame img,
     .brand img, .mg-media) are more specific and still win. */
  img{ max-width:100%; height:auto; display:block; }
  .container{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
  .page-section{ padding-block:clamp(3rem,7vw,5.5rem); }
  .wide-scroll{ /* overflow-x:auto removed: it auto-computed overflow-y:auto too, which broke position:sticky on the table header row below. These tables never actually need horizontal scroll at any tested breakpoint (375/768/1920px). */ }

  :focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-offset) var(--bg), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color); border-radius:4px; }

  /* ============ SPLASH — one authored focal sequence (impeccable/delight.md thesis):
     "the international buyer should feel the confidence of a serious, established mining
     house the instant the page loads, before any content." 5 staged beats, ~4.8s total. ============ */
  #splash{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:var(--navy-950);
    transition:opacity 500ms var(--ease-confident), visibility 500ms;
    overflow:hidden;
  }
  #splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  #splash::before{ /* ambient radial glow, beat 0: 0-300ms */
    content:""; position:absolute; inset:-20%;
    background:radial-gradient(900px 600px at 50% 42%, rgba(212,175,55,.16), transparent 60%),
               radial-gradient(1400px 900px at 50% 60%, var(--navy-800), var(--navy-950) 70%);
    opacity:0; animation:splashGlow 900ms ease-out 0ms forwards;
  }
  #splash::after{ /* slow breathing pulse during the hold beat, 3.3-4.2s */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(700px 500px at 50% 46%, rgba(212,175,55,.10), transparent 65%);
    opacity:0; animation:splashBreathe 900ms ease-in-out 3300ms 1;
  }
  @keyframes splashGlow{ to{ opacity:1; } }
  @keyframes splashBreathe{ 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; } }

  #splash .rig{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; transform-origin:center; animation:splashExit 600ms var(--ease-confident) 4200ms forwards; }
  /* impeccable/animate.md: the mark reveal is this site's one deliberately authored focal entrance -- bound to --dur-focal (500-800ms ceiling) rather than a bespoke value */
  #splash .mark-wrap{ position:relative; width:min(38vw,180px); opacity:0; transform:scale(.7) rotate(-6deg); animation:markIn var(--dur-focal) var(--ease-confident) 300ms forwards; }
  #splash .mark-wrap img{ width:100%; height:auto; border-radius:4px; display:block; }
  #splash .mark-wrap::after{ /* gold rim-light sweep across the mark, beat 2 */
    content:""; position:absolute; inset:0; border-radius:4px;
    background:linear-gradient(115deg, transparent 30%, rgba(255,241,199,.85) 48%, rgba(212,175,55,.9) 52%, transparent 70%);
    background-size:260% 100%; background-position:120% 0; mix-blend-mode:screen;
    animation:rimSweep 900ms ease-out 1300ms 1;
  }
  @keyframes markIn{ to{ opacity:1; transform:scale(1) rotate(0deg); } }
  @keyframes rimSweep{ from{ background-position:120% 0; opacity:1; } to{ background-position:-40% 0; opacity:0; } }

  #splash .word{ margin-top:1.3rem; text-align:center; }
  #splash .word b{
    display:block; color:var(--on-dark); font-family:var(--font-serif); font-weight:700; font-size:2rem; letter-spacing:.14em;
    background:linear-gradient(90deg, var(--on-dark) 0%, var(--on-dark) 42%, var(--gold-300) 50%, var(--on-dark) 58%, var(--on-dark) 100%);
    background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:0; animation:wordShimmer 1000ms ease-out 1300ms forwards;
  }
  #splash .word span{ display:block; color:var(--gold-300); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; margin-top:.5rem; opacity:0; animation:splashFadeUp 700ms var(--ease-confident) 2300ms forwards; }
  @keyframes wordShimmer{ from{ opacity:0; background-position:200% 0; } to{ opacity:1; background-position:0% 0; } }
  @keyframes splashFadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes splashExit{ to{ opacity:0; transform:scale(.94) translateY(-6px); } }

  @media (prefers-reduced-motion: reduce){
    #splash::before, #splash::after, #splash .mark-wrap, #splash .mark-wrap::after, #splash .word b, #splash .word span, #splash .rig{ animation:none !important; opacity:1 !important; transform:none !important; background-position:0 0 !important; }
  }
  #splash-skip{ position:absolute; bottom:2rem; z-index:2; all:unset; cursor:pointer; color:var(--on-dark-muted); font-size:.78rem; letter-spacing:.08em; border-bottom:1px solid rgba(243,237,224,.3); padding-bottom:2px; }

  /* ============ HEADER / PAGE NAV ============ */
  header.site{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--surface-dark) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid rgba(212,175,55,.18); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.6rem; }
  .brand{ display:flex; align-items:center; gap:.65rem; }
  .brand img{ height:34px; width:auto; }
  .brand-name{ color:var(--on-dark); font-family:var(--font-display-alt); font-weight:700; font-size:1.1rem; letter-spacing:.03em; }
  .brand-sub{ color:var(--gold-300); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; }

  nav.pagenav{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
  nav.pagenav button, nav.pagenav a{
    all:unset; cursor:pointer; color:var(--on-dark-muted); font-family:var(--font-accent);
    font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:.5rem .7rem; border-radius:8px;
    transition:color var(--dur-feedback) var(--ease-confident), background-color var(--dur-feedback) var(--ease-confident);
  }
  html[lang="ar"] nav.pagenav button, html[lang="zh"] nav.pagenav button, html[lang="ar"] nav.pagenav a, html[lang="zh"] nav.pagenav a{ font-family:inherit; text-transform:none; letter-spacing:.02em; }
  nav.pagenav button:hover, nav.pagenav a:hover{ color:var(--gold-300); background:rgba(212,175,55,.08); }
  nav.pagenav button[aria-current="page"], nav.pagenav a[aria-current="page"]{ color:var(--navy-950); background:var(--gold-500); }
  @media (max-width:980px){ nav.pagenav{ display:none; } }

  .lang-switch{ display:flex; gap:.25rem; background:rgba(255,255,255,.05); border:1px solid rgba(212,175,55,.25); border-radius:999px; padding:.2rem; }
  .lang-switch button, .lang-switch a{ all:unset; cursor:pointer; padding:.35rem .65rem; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--on-dark-muted); transition:color var(--dur-feedback) var(--ease-confident), background-color var(--dur-feedback) var(--ease-confident); }
  .lang-switch button[aria-pressed="true"], .lang-switch a[aria-pressed="true"]{ background:var(--gold-500); color:var(--navy-950); }

  select.pagenav-mobile{ display:none; }
  @media (max-width:980px){
    select.pagenav-mobile{ display:block; background:var(--navy-800); color:var(--on-dark); border:1px solid rgba(212,175,55,.3); border-radius:8px; padding:.4rem .6rem; font-size:.8rem; }
  }

  /* ============ PAGE VIEW SYSTEM ============ */
  .view{ display:none; }
  .view.active{ display:block; animation:viewIn var(--dur-nav) var(--ease-confident); }
  @keyframes viewIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){ .view.active{ animation:none; } }

  .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:8px; font-weight:600; font-size:.92rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform var(--dur-feedback) var(--ease-confident), box-shadow var(--dur-feedback) var(--ease-confident); }
  .btn:hover{ transform:translateY(-2px); }
  .btn-gold{ background:linear-gradient(180deg, var(--gold-300), var(--gold-500)); color:var(--navy-950); box-shadow:var(--shadow-1); }
  .btn-ghost{ background:transparent; color:var(--on-dark); border-color:rgba(243,237,224,.35); }

  /* ============ TOOLTIP (on every photo/photo-slot) ============ */
  .tip{ position:relative; }
  .tip::after{
    content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
    background:var(--navy-950); color:var(--on-dark); font-size:.74rem; line-height:1.35; padding:.5rem .7rem; border-radius:8px;
    width:max-content; max-width:230px; text-align:start; box-shadow:var(--shadow-2); border:1px solid rgba(212,175,55,.3);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur-feedback) var(--ease-confident), transform var(--dur-feedback) var(--ease-confident); z-index:30;
  }
  .tip::before{
    content:""; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy-950);
    opacity:0; visibility:hidden; transition:opacity var(--dur-feedback); z-index:30;
  }
  .tip:hover::after, .tip:hover::before, .tip:focus-visible::after, .tip:focus-visible::before, .tip.tip-open::after, .tip.tip-open::before{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }

  /* ============ PHOTO SLOTS (labeled placeholders for user-supplied photos) ============ */
  .photo-slot{
    aspect-ratio:4/3; border-radius:4px; border:1.5px dashed color-mix(in srgb, var(--accent-strong) 55%, var(--border));
    background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 6%, transparent) 0 10px, transparent 10px 20px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem; cursor:help;
  }
  .photo-slot svg{ width:26px; height:26px; color:var(--accent-strong); opacity:.8; }
  .photo-slot .slot-id{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--accent-strong); font-weight:700; }
  .photo-slot .slot-label{ font-size:.76rem; color:var(--text-soft); max-width:22ch; }
  .photo-frame{ position:relative; border-radius:4px; overflow:hidden; border:1px solid rgba(212,175,55,.18); box-shadow:var(--shadow-1); aspect-ratio:4/3; }
  .gallery-frame{ position:relative; border-radius:6px; overflow:hidden; border:1px solid rgba(212,175,55,.25); box-shadow:var(--shadow-1); background:#fff; padding:.4rem; }
  .gallery-frame img{ width:100%; height:auto; display:block; border-radius:3px; }
  @media (min-width:820px){ .gallery-frame{ max-width:920px; margin-inline:auto; } }
  .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-frame img{ filter:saturate(.94) contrast(1.03); }
  .photo-frame video.ops-video{ width:100%; height:100%; object-fit:cover; display:block; }
  /* bolder.md: amplify the identity the Hero already owns (navy scrim over real footage) instead of inventing a new treatment for this page */
  .photo-frame:has(video.ops-video){ position:relative; }
  .photo-frame:has(video.ops-video)::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(10,25,47,.12) 0%, transparent 30%, transparent 70%, rgba(10,25,47,.45) 100%); }



  .section-head{ max-width:62ch; margin-bottom:2.4rem; }
  /* h1 shares this rule: every page other than the homepage promotes its
     leading h2 to h1 so the document has exactly one top-level heading. The
     tag changed for the outline and for SEO; the rendering must not. */
  .section-head h1, .section-head h2{ font-size:clamp(1.6rem,3vw,2.35rem); margin-top:.5rem; }
  .section-head p{ color:var(--text-muted); margin-top:.75rem; font-size:1rem; }

  /* ============ HOME / HERO ============ */
  .hero{ position:relative; overflow:hidden; background:radial-gradient(1200px 600px at 15% -10%, rgba(212,175,55,.16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(212,175,55,.08), transparent 55%), linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark-2) 100%); color:var(--on-dark); padding-block:clamp(3.5rem,9vw,6rem); display:flex; align-items:center; min-height:100vh; min-height:100dvh; }
  .hero-media{ position:absolute; inset:0; z-index:0; }
  .hero-bg-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(7px) saturate(.85) brightness(.7); transform:scale(1.08); }
  /* impeccable/animate.md: nonessential loop, so it must fully stop under reduced-motion rather than just visually pause */
  .hero-bg-fallback{ display:none; }
  @media (prefers-reduced-motion:reduce){ .hero-bg-video{ display:none; } .hero-bg-fallback{ display:block; } }
  .hero-scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,25,47,.55) 0%, rgba(10,25,47,.88) 65%, rgba(10,25,47,.96) 100%); }
  .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; max-width:62ch; }
  .hero-lockup{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:1rem; }
  .hero-lockup-mark{ font-family:var(--font-accent-serif); font-size:1rem; letter-spacing:.08em; color:var(--gold-300); }
  html[lang="ar"] .hero-lockup-mark, html[lang="zh"] .hero-lockup-mark{ font-family:inherit; }
  .hero-lockup-sub{ font-size:.68rem; color:var(--on-dark-muted); letter-spacing:.03em; }
  .hero h1{ color:var(--on-dark); font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.05; margin-block:1rem; }
  .hero h1 em{
    font-style:normal; background:linear-gradient(100deg, var(--gold-300), var(--gold-500) 45%, var(--gold-300) 75%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p.lead{ color:var(--on-dark-muted); font-size:1.03rem; max-width:46ch; margin-bottom:1.7rem; }
  .hero-ctas{ display:flex; gap:.8rem; flex-wrap:wrap; }
  .hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2.3rem; background:rgba(243,237,224,.12); border-radius:12px; overflow:hidden; }
  .hero-stat{ background:rgba(5,13,26,.35); padding:1rem 1.1rem; }
  .hero-stat b{ display:block; font-family:var(--font-accent-serif); font-size:1.7rem; color:var(--gold-300); }
  .hero-stat span{ font-size:.7rem; color:var(--on-dark-muted); letter-spacing:.03em; }
  .iso-wrap{ perspective:1400px; }
  .iso-card{ background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.25); border-radius:6px; padding:1.2rem; box-shadow:var(--shadow-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transform:rotateY(-6deg) rotateX(3deg); transition:transform .5s var(--ease-confident); }
  .iso-card:hover{ transform:rotateY(-2deg) rotateX(1deg); }
  .iso-card svg{ width:100%; height:auto; display:block; }
  .hero-mini-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-top:.9rem; }
  @media (max-width:480px){ .hero-mini-grid{ grid-template-columns:repeat(3,1fr); } }
  .hero-mini-grid .photo-slot .slot-id{ font-size:.62rem; }

  .tilt{ --rx:0deg; --ry:0deg; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .3s var(--ease-confident), box-shadow .3s; will-change:transform; }
  .tilt:hover{ box-shadow:var(--shadow-2); }

  .advantage{ background:var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .advantage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
  @media (max-width:880px){ .advantage-grid{ grid-template-columns:1fr; } }
  .flag-flow{ display:flex; align-items:center; gap:1rem; margin-top:2rem; padding:1.4rem; border:1px dashed rgba(212,175,55,.3); border-radius:6px; }
  .flag-flow .node{ text-align:center; flex:1; }
  .flag-flow .node .tag{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }
  .flag-flow .node b{ display:block; font-family:var(--font-serif); font-size:1.15rem; margin-top:.15rem; }
  .flag-flow .arrow{ color:var(--accent-strong); font-size:1.3rem; }
  html[dir="rtl"] .flag-flow .arrow{ display:inline-block; transform:scaleX(-1); }
  .adv-points{ display:grid; gap:1rem; margin-top:1.6rem; }
  .adv-point{ display:flex; gap:.85rem; align-items:flex-start; }
  .adv-point svg{ flex:none; width:22px; height:22px; color:var(--accent-strong); margin-top:.15rem; }
  .adv-point b{ display:block; font-size:1rem; margin-bottom:.15rem; }
  .adv-point p{ margin:0; color:var(--text-muted); font-size:.92rem; }

  /* ============ COMPANY PAGE (vision/mission/values + why + org) ============ */
  .vmv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  @media (max-width:880px){ .vmv-grid{ grid-template-columns:1fr; } }
  .vmv-card{ background:var(--bg-elevated); border:1px solid rgba(212,175,55,.16); border-radius:6px; padding:1.8rem; box-shadow:var(--shadow-1); }
  .vmv-card .icon{ width:36px; height:36px; color:var(--accent-strong); margin-bottom:1rem; }
  .vmv-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
  .vmv-card p, .vmv-card li{ color:var(--text-muted); font-size:.94rem; }
  .vmv-card ul{ margin:0; padding-inline-start:1.1rem; display:grid; gap:.35rem; }

  .why-band{ background:var(--surface-dark); color:var(--on-dark); }
  /* Bento: 4 cards, unequal — "Financial & Supply Resilience" (the strongest trust signal) spans wider */
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:1.2rem; margin-top:2.2rem; }
  .why-grid .why-card:nth-child(4){ grid-column:span 2; }
  @media (max-width:920px){ .why-grid{ grid-template-columns:repeat(2,1fr); } .why-grid .why-card:nth-child(4){ grid-column:span 2; } }
  @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } .why-grid .why-card:nth-child(4){ grid-column:span 1; } }
  .why-card{
    background:rgba(255,255,255,.035); border:1px solid rgba(212,175,55,.2); border-radius:6px; padding:1.4rem;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .why-card .icon{ width:28px; height:28px; color:var(--gold-300); margin-bottom:.8rem; }
  .why-card h4{ color:var(--on-dark); font-size:1rem; margin-bottom:.5rem; }
  .why-card p{ color:var(--on-dark-muted); font-size:.86rem; margin:0; }
  .why-band .section-head p{ color:var(--on-dark-muted); }
  /* the global h1-h4 rule uses --text; on this permanently dark band it must not */
  .why-band .section-head h2, .why-band h3, .why-band h4{ color:var(--on-dark); }
  .why-band .section-head .eyebrow{ color:var(--gold-300); }

  .placeholder-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
  @media (max-width:880px){ .placeholder-grid{ grid-template-columns:1fr; } }
  .ph-card{ border:1px dashed rgba(212,175,55,.35); border-radius:6px; padding:1.6rem; text-align:center; color:var(--text-soft); }
  .ph-card svg{ width:30px; height:30px; margin-bottom:.8rem; color:var(--text-soft); }
  .ph-card b{ display:block; color:var(--text); margin-bottom:.4rem; }

  /* ============ PRODUCTS PAGE ============ */
  /* Item 2: explicit, predictable column counts at the three requested
     breakpoints. The previous `auto-fit, minmax(260px,1fr)` let the column
     count drift with the viewport (it could land on 4 columns on a wide
     screen, or 3 where 2 was wanted), which is why it is spelled out now.
     `align-items:stretch` is what makes every card in a row share the tallest
     card's height regardless of how long its name or description is. */
  .product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; align-items:stretch; }
  @media (max-width:1023px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:767px){ .product-grid{ grid-template-columns:1fr; } }

  /* Business-line tabs (products page) */
  .biz-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.6rem; border-bottom:1px solid var(--border); padding-bottom:0; }
  .biz-tab{ all:unset; cursor:pointer; display:flex; align-items:center; gap:.55rem; padding:.8rem 1.1rem; border-bottom:2.5px solid transparent; color:var(--text-soft); font-size:.86rem; font-weight:600; }
  .biz-tab .biz-idx{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; font-family:var(--font-mono); font-size:.7rem; flex-shrink:0; }
  .biz-tab[aria-selected="true"]{ color:var(--accent-strong); border-bottom-color:var(--accent-strong); }
  .biz-tab:hover{ color:var(--text); }
  .biz-panel{ display:none; }
  .biz-panel[data-active="true"]{ display:block; animation:techIn var(--dur-state) var(--ease-confident); }
  .biz-desc{ color:var(--text-muted); font-size:.92rem; margin-bottom:1.4rem; max-width:62ch; }
  .product-photos--iconic{ background:linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
  .photo-frame--iconic{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
  .photo-frame--iconic svg{ width:72px; height:72px; color:var(--gold-300); opacity:.85; }
  .product-card{ background:var(--bg-elevated); border:1px solid rgba(212,175,55,.18); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
  .product-photos{ display:grid; grid-template-columns:1fr; }
  .product-top{
    padding:1.4rem 1.6rem 1.1rem; color:var(--on-dark); position:relative; overflow:hidden;
    background:
      radial-gradient(220px 140px at 15% -20%, rgba(212,175,55,.22), transparent 65%),
      linear-gradient(160deg, var(--surface-dark), var(--surface-dark-2));
  }
  .product-top .tag-pill{ display:inline-block; font-family:var(--font-accent-plain); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-950); background:var(--gold-500); padding:.25rem .6rem; border-radius:999px; font-weight:700; }
  html[lang="ar"] .product-top .tag-pill, html[lang="zh"] .product-top .tag-pill{ font-family:inherit; }
  .product-top h3{ color:var(--on-dark); font-size:1.4rem; margin-top:.65rem; }
  /* Card titles now link to the product's own page (previously the detail
     pages were unreachable from anywhere except sitemap.xml). Styled to look
     identical at rest so the card design is unchanged. */
  .product-title-link{ color:inherit; text-decoration:none; }
  .product-title-link:hover, .product-title-link:focus-visible{ color:var(--gold-300); text-decoration:underline; text-underline-offset:3px; }
  .product-top p{ color:var(--on-dark-muted); font-size:.88rem; margin-top:.4rem; }
  .quick-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:.1rem 1rem; padding:1.1rem 1.6rem; }
  .quick-facts .qf{ padding-block:.5rem; }
  .quick-facts .qf .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); }
  .quick-facts .qf .v{ font-weight:600; font-size:.9rem; }
  /* ---- Product media gallery (Phase-4: cinematic auto-rotating carousel) ---- */
  /* One fixed aspect-ratio stage for ALL media so switching between a square
     image and a widescreen video never changes page height. */
  .media-gallery{ position:relative; }
  .mg-stage{
    position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    border-radius:4px; border:1px solid rgba(212,175,55,.18); box-shadow:var(--shadow-1);
    background:linear-gradient(135deg, var(--navy-950), var(--navy-800));
  }
  /* every item stacked in the same box; cross-fade via opacity only (never display) */
  .mg-item{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    transition:opacity .8s ease-in-out;
  }
  .mg-item.is-active{ opacity:1; pointer-events:auto; }
  .mg-item > picture{ display:block; width:100%; height:100%; }
  .mg-media, .mg-item img, .mg-item video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .mg-item img.mg-media{ filter:saturate(.94) contrast(1.03); transform:scale(1); }
  /* slow, subtle Ken Burns zoom while an image is the active slide (~6s show) */
  .mg-item.is-active img.mg-media{ animation:mgKen 6.4s ease-out both; }
  @keyframes mgKen{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
  @media (prefers-reduced-motion:reduce){
    .mg-item{ transition:none; }
    .mg-item.is-active img.mg-media{ animation:none; transform:none; }
  }
  /* navy vignette to match the Hero/Operations treatment */
  .mg-stage::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
    background:linear-gradient(to bottom, rgba(10,25,47,.10) 0%, transparent 26%, transparent 72%, rgba(10,25,47,.42) 100%);
  }
  /* thin Stories-style progress bar */
  .mg-progress{
    position:absolute; top:8px; left:10px; right:10px; z-index:5;
    display:flex; gap:5px;
  }
  .mg-progress-seg{
    flex:1; height:2px; border-radius:2px; overflow:hidden;
    background:rgba(255,255,255,.28);
  }
  .mg-progress-seg > i{
    display:block; height:100%; width:0%;
    background:rgba(255,255,255,.95); border-radius:2px;
  }
  /* dots */
  .mg-dots{
    position:absolute; bottom:10px; left:0; right:0; z-index:5;
    display:flex; justify-content:center; gap:7px;
  }
  .mg-dot{
    all:unset; cursor:pointer; width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(10,25,47,.25);
    transition:background-color .3s, width .3s;
  }
  .mg-dot:hover{ background:rgba(255,255,255,.7); }
  .mg-dot.is-active{ background:#fff; width:18px; border-radius:4px; }
  /* Visible caption strip under the stage (2026-08-30). All captions share one
     grid cell so the block is as tall as the LONGEST caption and the page never
     jumps as the carousel rotates. Non-active captions keep their box but are
     visibility:hidden, which also removes them from the accessibility tree.
     When no item has a caption the whole element is absent from the HTML, so
     this rule contributes nothing at all -- no empty strip, no reserved space. */
  .mg-captions{ display:grid; margin-top:.5rem; }
  .mg-caption{
    grid-area:1 / 1; margin:0; text-align:start;
    font-size:.78rem; line-height:1.45; color:var(--text-soft);
    visibility:hidden; opacity:0; transition:opacity .4s ease-in-out;
  }
  .mg-caption.is-active{ visibility:visible; opacity:1; }
  @media (prefers-reduced-motion:reduce){ .mg-caption{ transition:none; } }
  /* single-item galleries: no chrome at all */
  .media-gallery.is-single .mg-progress,
  .media-gallery.is-single .mg-dots{ display:none; }
  /* defensive empty state */
  .media-gallery.is-empty::before{
    content:""; display:block; width:100%; aspect-ratio:4/3; border-radius:4px;
    border:1px dashed rgba(212,175,55,.3);
    background:repeating-linear-gradient(135deg, rgba(212,175,55,.05) 0 10px, transparent 10px 20px);
  }
  /* iOS low-power autoplay fallback: first frame + tap-to-play button */
  .mg-play-fallback{
    all:unset; position:absolute; inset:0; z-index:4; cursor:pointer;
    display:none; align-items:center; justify-content:center;
    background:rgba(10,25,47,.35);
  }
  .mg-item.mg-video-blocked .mg-play-fallback{ display:flex; }
  .mg-play-fallback svg{
    width:56px; height:56px; color:#fff;
    background:rgba(10,25,47,.55); border-radius:50%; padding:12px;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
  }

  .product-footer{ margin-top:auto; padding:0 1.6rem 1.4rem; display:flex; }
  .link-tech{ font-size:.82rem; font-weight:700; color:var(--accent-strong); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
  .link-tech svg{ width:14px; height:14px; }

  /* ============ TECHNICAL DATA PAGE ============ */
  /* Amplifies the existing motif (gold rail, Big Shoulders labels, Plex Mono index) at
     full strength — impeccable/bolder.md — instead of a flat default <details> list. */
  .tech-shell{ display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:start; }
  @media (max-width:820px){ .tech-shell{ grid-template-columns:1fr; } }
  .tech-nav{ position:sticky; top:calc(var(--header-h) + 12px); display:flex; flex-direction:column; gap:.15rem; border-inline-start:1px solid var(--border); }
  @media (max-width:820px){ .tech-nav{ position:static; flex-direction:row; flex-wrap:wrap; border-inline-start:none; border-bottom:1px solid var(--border); padding-bottom:.6rem; } }
  .tech-tab{
    all:unset; cursor:pointer; display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem;
    border-inline-start:2px solid transparent; margin-inline-start:-1px;
    transition:background-color var(--dur-state) var(--ease-confident), border-color var(--dur-state) var(--ease-confident);
  }
  .tech-tab .tt-idx{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-soft); }
  .tech-tab .tt-label{ font-family:var(--font-accent-ar); font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); }
  html[lang="ar"] .tech-tab .tt-label, html[lang="zh"] .tech-tab .tt-label{ font-family:inherit; text-transform:none; letter-spacing:.01em; }
  .tech-tab:hover{ background:color-mix(in srgb, var(--accent-strong) 6%, transparent); }
  .tech-tab[aria-selected="true"]{ border-inline-start-color:var(--accent-strong); background:color-mix(in srgb, var(--accent-strong) 9%, transparent); }
  .tech-tab[aria-selected="true"] .tt-idx{ color:var(--accent-strong); }
  .tech-tab[aria-selected="true"] .tt-label{ color:var(--text); }
  .tech-panels{ border:1px solid rgba(212,175,55,.16); border-radius:4px; background:var(--bg-elevated); padding:1.4rem; min-height:240px; position:relative; }
  .tech-panel{ display:none; }
  /* impeccable Modes: Technical Data is Operate (scanability over expression) -- state changes use --dur-state only, no focal-entrance flourish */
  .tech-panel[data-active="true"]{ display:block; animation:techIn var(--dur-state) var(--ease-confident); }
  @keyframes techIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .tech-panel[data-active="true"]{ animation:none; } }
  .note{ font-size:.8rem; color:var(--pending); background:color-mix(in srgb, var(--pending) 12%, transparent); border:1px solid color-mix(in srgb, var(--pending) 35%, transparent); border-radius:4px; padding:.55rem .8rem; margin-block:.7rem; }
  .note-ok{ color:var(--confirmed); background:color-mix(in srgb, var(--confirmed) 12%, transparent); border-color:color-mix(in srgb, var(--confirmed) 35%, transparent); }
  /* Technical data spec-table — "lab console" component tokens, amplifying the existing navy/gold/mono system */
  table.spec-table{ width:100%; border-collapse:collapse; font-size:.85rem; background:rgba(10,25,47,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:6px; box-shadow:var(--shadow-1); color:#f3ede0; direction:ltr; }
  table.spec-table th, table.spec-table td{ text-align:start; padding:.65rem .8rem; border-bottom:1px solid color-mix(in srgb, var(--gold-300) 16%, transparent); }
  table.spec-table td:not(:first-child){ font-family:var(--font-mono); text-align:end; font-variant-numeric:tabular-nums; }
  table.spec-table th{ color:var(--gold-300); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); position:sticky; top:calc(var(--header-h) + 12px); background:linear-gradient(180deg, color-mix(in srgb, var(--gold-500) 22%, var(--navy-950)), color-mix(in srgb, var(--gold-500) 8%, var(--navy-950))); z-index:1; }
  table.spec-table th:not(:first-child), table.spec-table td:not(:first-child){ text-align:end; }
  table.spec-table tbody tr{ transition:background-color var(--dur-feedback) var(--ease-confident); }
  table.spec-table tbody tr:nth-child(odd){ background:rgba(212,175,55,.04); }
  table.spec-table tbody tr:hover{ background:rgba(212,175,55,.14); box-shadow:inset 0 0 0 9999px rgba(212,175,55,.02); }
  table.spec-table tbody tr:last-child td{ border-bottom:none; }
  .badge-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.1rem; }
  .badge{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(212,175,55,.25); border-radius:999px; padding:.4rem .9rem; font-size:.78rem; font-weight:600; background:var(--bg-elevated); }
  .badge svg{ width:16px; height:16px; color:var(--confirmed); }

  /* ============ OPERATIONS PAGE ============ */
  .flow-steps{ display:flex; align-items:flex-start; justify-content:center; gap:.4rem; flex-wrap:wrap; margin-top:1rem; }
  .flow-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:130px; padding:1rem .6rem; border:1.6px solid var(--border); border-radius:14px; }
  .flow-step-icon{ width:34px; height:34px; color:var(--accent-strong); margin-bottom:.6rem; }
  .flow-step h4{ font-size:.82rem; font-weight:600; color:var(--text); margin:0; }
  .flow-step-sub{ font-size:.68rem; color:var(--text-soft); margin-top:.2rem; }
  .flow-arrow{ width:22px; height:22px; color:var(--text-soft); opacity:.55; margin-top:2.6rem; flex-shrink:0; }
  html[dir="rtl"] .flow-arrow{ transform:scaleX(-1); }
  @media (max-width:760px){ .flow-steps{ flex-direction:column; align-items:center; } .flow-arrow{ transform:rotate(90deg); margin-top:0; } html[dir="rtl"] .flow-arrow{ transform:rotate(90deg); } }
  .flow-caption{ text-align:center; color:var(--text-soft); font-size:.82rem; margin-top:1.4rem; }
  /* Certificate slides gained an optional "issuing party withheld" line when
     the collection was wired up on 2026-08-31; the toggle had no output before. */
  .cert-withheld{ font-size:.72rem; color:var(--text-soft); margin:.25rem 0 0; text-align:center; }

  /* Technical page, dynamic rebuild 2026-08-30: the tab rail is now grouped by
     CMS category, and each panel is titled with the product it belongs to. */
  .tech-nav-group{
    font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-soft); padding:.9rem .6rem .3rem; margin-top:.2rem;
  }
  .tech-nav-group:first-child{ margin-top:0; padding-top:.3rem; }
  html[lang="ar"] .tech-nav-group, html[lang="zh"] .tech-nav-group{ text-transform:none; letter-spacing:.02em; }
  @media (max-width:820px){ .tech-nav-group{ flex-basis:100%; padding:.5rem .2rem .1rem; } }
  .tech-panel-title{ font-size:1rem; margin:0 0 .9rem; }
  .tech-panel-link{ margin-top:1.1rem; }

  /* Product-level export markets, activated 2026-08-30 (both lists were
     editable in the panel and written to disk, but never rendered). */
  .product-markets{ padding:0 1.6rem 1.2rem; display:grid; gap:.7rem; }
  .pm-group{ display:grid; gap:.35rem; }
  .pm-label{
    display:flex; align-items:center; gap:.4rem;
    font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft);
  }
  html[lang="ar"] .pm-label, html[lang="zh"] .pm-label{ text-transform:none; letter-spacing:.02em; }
  .pm-pills{ display:flex; flex-wrap:wrap; gap:.35rem; }
  .pm-pill{
    font-size:.76rem; padding:.2rem .55rem; border-radius:3px;
    border:1px solid var(--border); color:var(--text-muted);
  }
  .pm-pill.pm-confirmed{ border-color:color-mix(in srgb, var(--accent-strong) 45%, transparent); color:var(--text); }

  .minor-ing-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); margin:1.4rem 0 .5rem; }
  .cert-carousel{ position:relative; max-width:900px; margin-top:1.8rem; margin-inline:auto; }
  .cert-slide{ display:none; }
  .cert-slide[data-active="true"]{ display:block; animation:techIn var(--dur-state) var(--ease-confident); }
  .cert-frame{ aspect-ratio:3/4; max-height:780px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid rgba(212,175,55,.25); box-shadow:var(--shadow-2); }
  .cert-frame img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
  .cert-caption{ text-align:center; font-size:.82rem; color:var(--text-soft); margin-top:.8rem; }
  .cert-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
  .cert-dot{ all:unset; cursor:pointer; width:8px; height:8px; border-radius:50%; background:var(--border); transition:background-color var(--dur-feedback) var(--ease-confident), transform var(--dur-feedback) var(--ease-confident); }
  .cert-dot[data-active="true"]{ background:var(--accent-strong); transform:scale(1.3); }
  .ops-photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2.2rem; }
  /* Full-bleed cinematic video sections (Hero pattern reused for Operations stage footage) */
  .video-hero{ position:relative; min-height:100vh; min-height:100dvh; width:100%; overflow:hidden; z-index:0; display:flex; align-items:center; color:var(--on-dark); }
  .video-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
  .video-hero__fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:none; }
  .video-hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(10,25,47,.65), rgba(10,25,47,.95)); }
  .video-hero__content{ position:relative; z-index:2;  text-align:center; display:flex; flex-direction:column; align-items:center; }
  .video-hero__content h3{ font-family:var(--font-serif); font-size:clamp(1.8rem,4.5vw,3rem); color:#fff; margin-top:.5rem; }
  @media (prefers-reduced-motion:reduce){ .video-hero__bg{ display:none; } .video-hero__fallback{ display:block; } }
  /* Self-review gap #1: source clips are portrait (crop=1214:2160); the inherited 4:3 frame over-cropped them. Match the footage instead of forcing a foreign ratio. */
  .ops-photo-grid .photo-frame{ aspect-ratio:3/4; }
  .ops-photo-grid--single{ grid-template-columns:1fr; }
  .ops-photo-grid--single .photo-frame{ aspect-ratio:21/9; }
  @media (max-width:700px){ .ops-photo-grid--single .photo-frame{ aspect-ratio:4/3; } }
  .principle-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.2rem; }
  @media (max-width:820px){ .principle-row{ grid-template-columns:1fr; } }
  .principle-item{ display:flex; flex-direction:column; gap:.7rem; padding:1.4rem; border-radius:8px; background:var(--bg-elevated); border:1px solid var(--border); }
  .principle-item svg{ width:24px; height:24px; color:var(--accent-strong); }
  .principle-item p{ font-size:.9rem; color:var(--text-muted); line-height:1.5; margin:0; }
  @media (max-width:700px){ .ops-photo-grid{ grid-template-columns:1fr; } }

  /* ============ MARKETS / LOGISTICS PAGE ============ */
  .markets-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.4rem; align-items:center; }
  @media (max-width:920px){ .markets-wrap{ grid-template-columns:1fr; } }
  .market-legend{ display:flex; gap:1.2rem; margin-top:1rem; flex-wrap:wrap; }
  /* LIGHT-MODE READABILITY (2026-09-01). These three rules paired a text colour
     with a surface that flips the other way, so they were invisible in light
     mode. --on-dark* is theme-INVARIANT (for permanently dark surfaces);
     --text/--text-muted follow the theme. Each rule below now uses whichever
     one matches its own background. No new colours introduced. */
  /* on the navy markets band -> theme-invariant light text */
  .legend-item{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--on-dark-muted); }
  .legend-dot{ width:10px; height:10px; border-radius:50%; }
  .dot-confirmed{ background:var(--confirmed); } .dot-target{ background:var(--pending); }
  .market-list{ display:grid; gap:.6rem; }
  .market-row{ display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-elevated); }
  /* .market-row is var(--bg-elevated), which flips with the theme -> so must this */
  .market-name{ display:flex; align-items:center; gap:.55rem; font-weight:600; color:var(--text); }
  .market-flag{ font-size:1.1rem; }
  .market-target-group{ margin-top:1.4rem; }
  .market-target-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--on-dark-muted); margin-bottom:.6rem; }
  .market-target-grid{ display:flex; flex-wrap:wrap; gap:.55rem; }
  .market-target-pill{ display:inline-flex; align-items:center; gap:.4rem; border:1px dashed rgba(212,175,55,.4); border-radius:999px; padding:.35rem .85rem; font-size:.78rem; color:var(--on-dark-muted); }
  .status-chip{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .55rem; border-radius:999px; color:#fff; }
  .status-confirmed{ background:var(--confirmed); } .status-target{ background:var(--pending); }
  .logi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.2rem; }
  @media (max-width:920px){ .logi-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .logi-grid{ grid-template-columns:1fr; } }
  .logi-card{ border:1px solid rgba(212,175,55,.18); border-radius:6px; padding:1.4rem; background:var(--bg-elevated); }
  .logi-card svg{ width:26px; height:26px; color:var(--accent-strong); margin-bottom:.8rem; }
  .logi-card h4{ font-size:.98rem; margin-bottom:.4rem; } .logi-card p{ margin:0; color:var(--text-muted); font-size:.85rem; }

  /* ============ CONTACT + GALLERY PAGE ============ */
  .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
  @media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
  /* This band's heading sits outside .section-head, so it never had a
     font-size rule and rendered at the UA default for h2 (1.5em). It was
     promoted to h1 for the document outline, which would jump it to the h1
     default (2em), so pin it to the size it already had. */
  .contact-band h1{ font-size:1.5em; }
  .contact-band{
    color:var(--on-dark); position:relative;
    background:
      radial-gradient(700px 420px at 85% 0%, rgba(212,175,55,.10), transparent 60%),
      radial-gradient(900px 500px at 10% 100%, rgba(212,175,55,.06), transparent 55%),
      var(--surface-dark);
  }
  .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
  @media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-list{ display:grid; gap:1rem; margin-top:1.6rem; }
  .contact-row{ display:flex; align-items:center; gap:.85rem; }
  .contact-row svg{ width:20px; height:20px; color:var(--gold-300); flex:none; }
  .contact-row b{ display:block; color:var(--on-dark); font-size:.95rem; } .contact-row span{ color:var(--on-dark-muted); font-size:.82rem; }
  .contact-card{ background:rgba(255,255,255,.04); border:1px solid rgba(212,175,55,.25); border-radius:6px; position:relative; padding:2rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  /* Download hitbox is the icon only (36x36) -- deliberately NOT wrapping the whole card, per hitbox-discipline requirement */
  .card-download{ position:absolute; top:.9rem; inset-inline-end:.9rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.3); color:var(--gold-300); transition:background-color var(--dur-feedback) var(--ease-confident); }
  .card-download:hover{ background:rgba(212,175,55,.28); }
  .card-download svg{ width:18px; height:18px; }
  .bcard-download-row{ display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; margin-top:1.2rem; }
  .bcard-item{ display:flex; align-items:center; gap:.7rem; }
  .bcard-icon.card-download{ position:static; flex:none; }
  .bcard-download-row span{ color:var(--on-dark-muted); font-size:.86rem; }
  .contact-card h3{ color:var(--on-dark); font-size:1.25rem; margin-bottom:.6rem; } .contact-card p{ color:var(--on-dark-muted); font-size:.9rem; }

  footer.site{ background:var(--surface-dark); border-top:1px solid rgba(212,175,55,.2); color:var(--on-dark-muted); padding-block:1.5rem; }
  .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; }
  ::selection{ background:var(--gold-500); color:var(--navy-950); }

  /* Print: technical spec sheet only, no chrome/video/dark glass */
  @media print{
    #splash, .hero-media, .site.header, header.site, nav.pagenav, select.pagenav-mobile, .lang-switch, .btn, .hero-ctas, .footer, footer{ display:none !important; }
    body{ background:#fff !important; color:#000 !important; }
    .view{ display:none !important; }
    .view[data-view="technical"]{ display:block !important; }
    .tech-nav{ display:none !important; }
    .tech-panel{ display:none !important; }
    .tech-panel[data-active="true"]{ display:block !important; }
    table.spec-table{ background:#fff !important; backdrop-filter:none !important; box-shadow:none !important; color:#000 !important; }
    table.spec-table th{ background:#eee !important; color:#000 !important; }
    table.spec-table td{ color:#000 !important; }
    a[href]:after{ content:""; }
  }

  /* ============================================================
     PRODUCTS GRID — visual refinements (request item 2)
     Every rule below is additive and independently removable: deleting this
     whole block returns the grid to plain static cards with no behaviour or
     layout loss. Nothing here is required for the page to work.
     ============================================================ */

  /* Equal-height cards: the card is already a flex column, so letting the
     quick-facts list absorb the slack pins each card's footer link to the
     bottom edge. Without this, cards in the same row stretch but their inner
     content floats, which is what made rows look ragged. Scoped to the grid
     so the product DETAIL page's own .quick-facts is untouched. */
  .product-grid .product-card{ height:100%; position:relative; }
  .product-grid .product-card .quick-facts{ flex:1 1 auto; }

  /* Category badge (item 2). Uses the existing accent tokens rather than a new
     colour so it stays inside the established palette. The logical property
     inset-inline-end places it on the correct side automatically in RTL. */
  .cat-badge{
    position:absolute; z-index:2; top:.7rem; inset-inline-end:.7rem;
    padding:.28rem .6rem; border-radius:999px;
    background:rgba(6,13,26,.82); color:var(--gold-300);
    border:1px solid rgba(212,175,55,.35);
    font-size:.68rem; font-weight:600; letter-spacing:.02em;
    line-height:1.4; max-width:calc(100% - 1.4rem);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    backdrop-filter:blur(3px); pointer-events:none;
  }

  /* Hover lift + scroll reveal (item 2).
     IMPORTANT -- why these use `translate` and never `transform`:
     .product-card already carries .tilt (line ~237), whose whole effect IS a
     transform: perspective(900px) rotateX() rotateY() driven by JS custom
     properties. Writing `transform` here would overwrite that and silently
     kill the existing tilt (measured: it did exactly that in a first pass --
     the card's computed transform became `none` and the tilt stopped working).
     The standalone `translate` property is composited TOGETHER with
     `transform` by the browser instead of replacing it, so the lift and the
     reveal stack on top of the tilt rather than fighting it. Same reason the
     transitions below name `translate`, not `transform`.
     Hover is gated on (hover:hover) so touch devices never stick in a hover
     state. Only compositor properties are animated -- no reflow. */
  .product-grid .product-card{
    transition:translate .25s var(--ease-confident, ease), box-shadow .25s var(--ease-confident, ease);
  }
  /* The hidden state applies ONLY when site.js has added .js-reveal to <html>,
     so with JS off, or on a browser without IntersectionObserver, the cards
     are simply visible -- they can never be stranded invisible. */
  .js-reveal .reveal{ opacity:0; translate:0 14px; }
  .js-reveal .reveal.is-revealed{
    opacity:1; translate:0 0;
    transition:opacity .45s ease, translate .45s var(--ease-confident, ease);
  }

  /* Hover lift is declared AFTER the reveal rules and repeats the reveal
     classes in its second selector on purpose. `.js-reveal .reveal.is-revealed`
     sets `translate:0 0` at the same specificity as a plain
     `.product-grid .product-card:hover`, so on a tie the later rule wins --
     which meant a revealed card (i.e. every card the visitor can actually
     see) silently lost its hover lift. Measured before this fix: the hovered
     card's computed translate stayed "0px". */
  @media (hover:hover){
    .product-grid .product-card:hover,
    .js-reveal .product-grid .product-card.reveal.is-revealed:hover{
      translate:0 -4px;
      box-shadow:0 18px 40px -18px rgba(5,13,26,.55), 0 2px 8px -2px rgba(5,13,26,.3);
    }
  }
  /* Belt-and-braces: even if the class somehow lands on an element, a user who
     asked for reduced motion sees no movement and no fade. */
  @media (prefers-reduced-motion: reduce){
    .js-reveal .reveal,
    .js-reveal .reveal.is-revealed{ opacity:1 !important; translate:none !important; transition:none !important; }
    .product-grid .product-card{ transition:none; }
    .product-grid .product-card:hover{ translate:none; }
  }

  /* Product count beside each tab name (item 4). */
  .biz-tab .biz-count{ font-family:var(--font-mono); font-size:.74rem; opacity:.75; }
  .biz-tab[aria-selected="true"] .biz-count{ opacity:1; }

  /* Visible keyboard focus for the tabs (item 6). :focus-visible only shows
     the ring for keyboard users, so mouse clicks stay visually clean. */
  .biz-tab:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; color:var(--text);
  }

  /* Empty-category state (item 4 edge case) -- a calm, centred message instead
     of a blank panel. */
  .empty-category{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.9rem; padding:3.2rem 1.5rem; text-align:center;
    border:1px dashed var(--border); border-radius:6px;
    background:rgba(255,255,255,.02); color:var(--text-soft);
  }
  .empty-category svg{ width:40px; height:40px; opacity:.5; }
  .empty-category p{ margin:0; font-size:.92rem; }

  /* Screen-reader-only text (used for the spoken product count on each tab,
     where the visible "(3)" is aria-hidden so it is not read as bare
     punctuation). */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }