/* ============================================================================
   WANPORTS public site — UI R2 launch stylesheet (dark tech design system).
   One shared, cacheable file for every public page: home, about, oem-odm,
   trade-guide, cases, privacy, terms, category placeholders.

   Merged from the founder-approved v11 preview suite. No external resources:
   system font stack, inline SVG artwork, self-hosted logo via
   /media/branding/logo. Progressive enhancement only — every page renders
   complete without JavaScript (reveal animations default to visible via
   <noscript> and prefers-reduced-motion).
   ========================================================================== */


/* ==================== from home page ==================== */
:root {
    --bg-0: #04060c;
    --bg-1: #070d18;
    --panel: #0b1424;
    --panel-2: #0d1a2e;
    --navy-800: #12304f;
    --amber: #d9962e;
    --amber-bright: #f0b95e;
    /* accent used as a FILL (buttons, dots): identical in both themes */
    --accent-fill-a: #f0b95e;
    --accent-fill-b: #d9962e;
    --scene-bg: #0d1a2e;
    --ok: #7fd1a8;
    --warn: #ff8a70;
    --info: #4fc3f7;
    --scene-ink: #e8eef5;
    --logo-filter: brightness(0) invert(1);
    /* light text literals that were inline */
    --fg-01: rgba(232, 238, 245, 0.75);
    --fg-02: rgba(232, 238, 245, 0.78);
    --fg-03: rgba(232, 238, 245, 0.6);
    --fg-04: #e8eef5;
    --fg-05: #f0b95e;
    /* SVG artwork colours that live in CSS (world map, isometric containers) */
    --art-01: rgba(147, 165, 187, 0.5);
    --art-02: rgba(240, 185, 94, 0.13);
    --art-03: #e8eef5;
    --art-04: #93a5bb;
    --art-05: #7f9cbd;
    --art-06: rgba(127, 156, 189, 0.12);
    --art-07: #a9bdd2;
    --art-08: #f0b95e;
    --art-09: rgba(79, 195, 247, 0.25);
    --art-10: rgba(240, 185, 94, 0.25);
    --art-11: rgba(127, 209, 168, 0.25);
    --art-12: rgba(232, 238, 245, 0.07);
    --art-13: rgba(232, 238, 245, 0.04);
    --art-14: rgba(232, 238, 245, 0.02);
    --art-15: rgba(232, 238, 245, 0.5);
    --art-16: rgba(232, 238, 245, 0.16);
    --art-17: rgba(232, 238, 245, 0.1);
    --art-18: rgba(240, 185, 94, 0.55);
    /* dark literals that used to be inline; the light theme overrides these */
    --ink-03: #0b1424;
    --ink-07: rgba(6, 11, 20, 0.62);
    --ink-08: rgba(0, 0, 0, 0.45);
    --ink-09: rgba(6, 11, 20, 0.94);
    --ink-10: rgba(0, 0, 0, 0.6);
    --ink-11: #101f36;
    --ink-12: #081020;
    --ink-13: rgba(4, 6, 12, 0);
    --ink-14: rgba(4, 6, 12, 0.55);
    --ink-15: rgba(7, 13, 24, 0.55);
    --ink-16: rgba(0, 0, 0, 0.5);
    --ink-17: rgba(6, 12, 22, 0.55);
    --ink-18: rgba(4, 6, 12, 0.5);
    --ink-19: #060b16;
    --ink-20: rgba(0, 0, 0, 0.35);
    --ink-21: #030509;
    --ink-22: rgba(4, 6, 12, 0.12);
    --ink-23: rgba(4, 6, 12, 0.85);
    --ink-24: #050a12;
    --ink-25: rgba(4, 6, 12, 0.66);
    --ink-26: rgba(4, 6, 12, 0.05);
    --ink-27: rgba(4, 6, 12, 0.6);
    --ink-28: rgba(4, 6, 12, 0.65);
    --ink-on-amber: #2a1a04;
    --text: #e8eef5;
    --text-strong: #ffffff;
    --text-soft: #93a5bb;
    --line-soft: rgba(232, 238, 245, 0.09);
    --line-mid: rgba(232, 238, 245, 0.16);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.10);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-pill: 999px;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.nav-wrap {
    position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 16px; pointer-events: none;
}
.pill-nav {
    pointer-events: auto;
    display: flex; align-items: center; gap: 6px;
    width: 100%; max-width: 1080px;
    padding: 10px 12px 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--ink-07);
    border: 1px solid var(--line-mid);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px var(--ink-08);
}
.brand-logo-link { display: flex; align-items: center; margin-right: auto; }
.brand-logo-link img { height: 40px; width: auto; display: block; }
.pill-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
.pill-nav ul a {
    display: block; padding: 8px 13px; border-radius: var(--radius-pill);
    color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}
.pill-nav ul a:hover { background: var(--glass-strong); color: var(--text-strong); }
.theme-toggle {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: 6px;
    border: 1px solid var(--line-mid); border-radius: var(--radius-pill);
    background: var(--glass); color: var(--text-soft);
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { color: var(--amber-bright); border-color: var(--amber-line); background: var(--glass-strong); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: none; }
.nav-cta {
    margin-left: auto;
    display: inline-block; padding: 10px 22px; border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--accent-fill-a), var(--accent-fill-b));
    color: var(--ink-on-amber); font-weight: 700; font-size: 14.5px; text-decoration: none;
    box-shadow: 0 6px 20px rgba(217, 150, 46, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(217, 150, 46, 0.45); }
.nav-burger { display: none; }
.mobile-menu {
    pointer-events: none; display: flex;
    visibility: hidden; opacity: 0;
    transform: translateY(-14px) scale(0.98);
    width: 100%; max-width: 1080px; margin-top: 10px;
    flex-direction: column; padding: 10px;
    border-radius: 24px;
    background: var(--ink-09);
    border: 1px solid var(--line-mid);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 50px var(--ink-10);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
}
.mobile-menu.open {
    pointer-events: auto; visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.mobile-menu a {
    padding: 13px 18px; border-radius: 14px; color: var(--text); text-decoration: none;
    font-weight: 600; font-size: 15.5px;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.04s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.08s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.12s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.16s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.2s; }
.mobile-menu.open a:nth-child(6) { transition-delay: 0.24s; }
.mobile-menu.open a:nth-child(7) { transition-delay: 0.28s; }
.mobile-menu.open a:nth-child(8) { transition-delay: 0.32s; }
.mobile-menu.open a:nth-child(9) { transition-delay: 0.36s; }
.mobile-menu.open a:nth-child(10) { transition-delay: 0.4s; }
.mobile-menu.open a:nth-child(11) { transition-delay: 0.44s; }
.mobile-menu.open a:nth-child(12) { transition-delay: 0.48s; }
.mobile-menu a:hover, .mobile-menu a:active { background: var(--glass-strong); color: var(--text-strong); }
@media (min-width: 1021px) {
    .mobile-menu { display: none !important; }
}
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 34px; border-radius: var(--radius-pill);
    font-size: 16px; font-weight: 700; text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent-fill-a), var(--accent-fill-b));
    color: var(--ink-on-amber);
    box-shadow: 0 10px 30px rgba(217, 150, 46, 0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(217, 150, 46, 0.5); }
.btn-ghost {
    background: var(--glass); border: 1px solid var(--line-mid); color: var(--text);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--glass-strong); transform: translateY(-2px); }
.hero {
    position: relative;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    background: radial-gradient(130% 80% at 50% -10%, var(--ink-11) 0%, var(--ink-12) 42%, var(--bg-0) 100%);
    color: var(--text);
    padding: 150px 0 40px;
}
/* H5-a: an optional photo under the route scene. The element exists only while the
   published page names an image (RenderedMedia), so a page without one is unchanged.
   The shade is the same pair the about-hero uses over its photo, so a photo never
   fights the headline in either theme. */
.hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink-18) 0%, var(--ink-22) 40%, var(--ink-23) 100%); }
.hero-scene { position: absolute; inset: 0; }
.hero-scene svg { width: 100%; height: 100%; display: block; }
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(70% 50% at 50% 44%, var(--ink-13) 0%, var(--ink-14) 100%);
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; padding: 0 28px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--amber-bright);
    padding: 8px 18px;
    border: 1px solid rgba(240, 185, 94, 0.35);
    border-radius: var(--radius-pill);
    background: rgba(240, 185, 94, 0.07);
    margin: 0 0 26px;
}
.hero h1 {
    margin: 0 0 22px;
    font-size: clamp(40px, 6.4vw, 76px);
    line-height: 1.06; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text-strong); text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 700; color: var(--amber-bright); }
.hero-lead { margin: 0 auto 34px; max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 14px; }
.hero-microcopy { font-size: 13.5px; color: var(--text-soft); margin: 0 0 30px; }
.hero-boundary {
    display: inline-flex; align-items: flex-start; gap: 10px; text-align: left;
    max-width: 620px; margin: 0 auto;
    padding: 12px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    font-size: 13px; color: var(--text-soft);
}
.hero-boundary svg { flex: none; margin-top: 2px; }
.hud-chip {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
    color: var(--text-soft);
    background: var(--ink-15);
    border: 1px solid var(--line-mid);
    border-radius: 10px; padding: 9px 14px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: floaty 6s ease-in-out infinite;
}
.hud-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 8px rgba(240, 185, 94, 0.8); }
.hud-1 { left: 6%; top: 40%; }
.hud-2 { right: 5%; top: 30%; animation-delay: 1.6s; }
.hud-3 { right: 8%; top: 63%; animation-delay: 3.1s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1020px) {
    .hud-chip { display: none; }
}
.scan { animation: scanmove 9s ease-in-out infinite; }
@keyframes scanmove { 0% { transform: translateX(-220px); } 55% { transform: translateX(1750px); } 100% { transform: translateX(1750px); } }
.spin-slow { animation: spin360 46s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.spark-tw { animation: spark 2.8s ease-in-out infinite; }
.spark-tw.s2 { animation-delay: 0.9s; }
.spark-tw.s3 { animation-delay: 1.8s; }
@keyframes spark { 0%,100% { opacity: 0.15; } 45% { opacity: 0.95; } }
.led-blink { animation: led 2.4s steps(1) infinite; }
.led-blink.b2 { animation-delay: 0.7s; }
.led-blink.b3 { animation-delay: 1.5s; }
@keyframes led { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.25; } }
.lamp-glow { animation: lamp 4.5s ease-in-out infinite; }
.lamp-glow.l2 { animation-delay: 1.4s; }
.lamp-glow.l3 { animation-delay: 2.7s; }
@keyframes lamp { 0%,100% { opacity: 0.85; } 50% { opacity: 0.45; } }
.belt-dash { stroke-dasharray: 14 10; animation: belt 1.6s linear infinite; }
@keyframes belt { to { stroke-dashoffset: -24; } }
.arm-sway { animation: arm 6s ease-in-out infinite; }
@keyframes arm { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
.mold-cycle { animation: mold 4.2s ease-in-out infinite; }
@keyframes mold { 0%,42%,100% { transform: translateX(0); } 55%,80% { transform: translateX(9px); } }
.cap-strip {
    position: relative; z-index: 2; margin-top: 56px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    overflow: hidden;
}
.cap-track { display: flex; gap: 14px; width: max-content; padding: 4px 0; }
.cap-row { display: flex; gap: 14px; }
/* The scroll starts only once JS has cloned enough rows and measured the
   exact loop distance; until then the strip is a correct static row. */
.cap-track.cap-ready { animation: cap-scroll 36s linear infinite; }
.cap-strip:hover .cap-track { animation-play-state: paused; }
.cap-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: var(--radius-pill);
    background: var(--glass); border: 1px solid var(--line-mid);
    color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap;
}
@keyframes cap-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--cap-shift, 50%))); } }
.section { padding: 104px 0; }
.s-a { background: var(--bg-0); }
.s-b { background: var(--bg-1); }
.section-head { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.kicker {
    display: inline-block;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--amber-bright);
    background: rgba(240, 185, 94, 0.07);
    border: 1px solid rgba(240, 185, 94, 0.3);
    padding: 7px 16px; border-radius: var(--radius-pill);
    margin: 0 0 18px;
}
.section-head h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12; font-weight: 800; letter-spacing: -0.015em;
    color: var(--text-strong); text-wrap: balance;
}
.section-head h2 em { font-style: italic; color: var(--amber-bright); }
.section-head p { margin: 0; font-size: 17px; color: var(--text-soft); }
.boundary-note {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    max-width: 680px; margin: 22px auto 0;
    padding: 12px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    font-size: 13px; color: var(--text-soft);
}
.boundary-note svg { flex: none; margin-top: 2px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.bento-card {
    position: relative;
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    display: flex; flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.bento-card:hover {
    transform: translateY(-6px);
    border-color: rgba(240, 185, 94, 0.28);
    box-shadow: 0 30px 60px var(--ink-16);
}
.bento-scene { position: relative; display: block; }
.bento-scene svg { display: block; width: 100%; height: auto; }
.card-lg { grid-column: span 7; }
.card-md { grid-column: span 5; }
.scene-chips { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.glass-chip {
    border-radius: var(--radius-md); padding: 16px 18px;
    background: var(--ink-17);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--text-strong);
}
.glass-chip .chip-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(240, 185, 94, 0.16); margin-bottom: 10px; }
.glass-chip h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.glass-chip p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-01); }
.scene-title { position: absolute; left: 26px; top: 22px; right: 26px; color: var(--text-strong); z-index: 2; }
.scene-title h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.scene-title p { margin: 0; font-size: 13.5px; color: var(--fg-02); max-width: 420px; }
.scene-tag {
    position: absolute; right: 20px; top: 20px; z-index: 2;
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-03);
    background: var(--ink-18); border: 1px solid var(--line-soft);
    padding: 5px 10px; border-radius: var(--radius-pill);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-body { padding: 22px 26px 26px; }
.card-body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-strong); }
.card-body p { margin: 0; font-size: 14.5px; color: var(--text-soft); }
.match-card { background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 70%); padding: 30px; }
.match-ui { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.match-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 13px 18px;
    font-size: 14.5px; font-weight: 600; color: var(--text);
}
.match-row .led { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.match-run {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft);
    border-radius: var(--radius-pill); padding: 10px 12px 10px 18px;
    font-size: 13.5px; color: var(--text-soft);
}
.match-run .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(240, 185, 94, 0.25); border-top-color: var(--amber-bright); animation: spinr 1.1s linear infinite; flex: none; }
.match-run .go { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-bright), var(--amber)); display: flex; align-items: center; justify-content: center; flex: none; }
@keyframes spinr { to { transform: rotate(360deg); } }
.flowmini { padding: 30px; background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 70%); }
.flowmini-ui { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.fm-node {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft); border-radius: 14px;
    padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 10px; position: relative; z-index: 1;
}
.fm-node small { display: block; font-weight: 500; color: var(--text-soft); font-size: 12px; }
.fm-branch { display: flex; gap: 14px; }
.fm-links { display: flex; align-items: flex-start; height: 22px; position: relative; width: 200px; }
.fm-links::before { content: ""; position: absolute; left: 50%; top: 0; height: 11px; width: 2px; background: var(--line-mid); }
.fm-links::after { content: ""; position: absolute; left: 15%; right: 15%; top: 11px; height: 2px; background: var(--line-mid); }
.fm-links span { position: absolute; top: 11px; width: 2px; height: 11px; background: var(--line-mid); }
.fm-links span:first-child { left: 15%; }
.fm-links span:last-child { right: 15%; }
.fm-done {
    margin-top: 22px;
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--accent-fill-a), var(--accent-fill-b));
    color: var(--ink-on-amber); font-weight: 700; font-size: 13.5px;
    padding: 10px 20px; border-radius: var(--radius-pill);
    box-shadow: 0 8px 22px rgba(217, 150, 46, 0.35);
}
.qc-scene { padding: 30px 30px 0; }
.qc-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 0 6px; }
.qc-bar { flex: 1; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--amber-bright), var(--amber)); opacity: 0.9; transform-origin: bottom; animation: qc-grow 2.6s ease-in-out infinite alternate; }
.qc-bar:nth-child(2n) { background: linear-gradient(180deg, #3d6a94, #35597f); }
@keyframes qc-grow { from { transform: scaleY(0.72); } to { transform: scaleY(1); } }
.flow-band { position: relative; overflow: hidden; }
.flow-band .bp-grid { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.flow-rail { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.flow-rail::before {
    content: ""; position: absolute; left: 3%; right: 3%; top: 34px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(240, 185, 94, 0.55) 8%, rgba(240, 185, 94, 0.55) 92%, transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.6s ease 0.2s;
}
.flow-rail.in::before { transform: scaleX(1); }
.flow-rail::after {
    content: ""; position: absolute; top: 28px; left: 3%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--amber-bright);
    box-shadow: 0 0 18px 4px rgba(240, 185, 94, 0.55);
    opacity: 0;
}
.flow-rail.in::after { animation: flow-dot 7s linear 1.9s infinite; }
@keyframes flow-dot {
    0% { left: 3%; opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; }
    100% { left: calc(97% - 14px); opacity: 0; }
}
.flow-step { position: relative; text-align: center; }
.flow-node {
    position: relative; z-index: 1;
    width: 68px; height: 68px; margin: 0 auto 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-mid);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.flow-step:hover .flow-node { transform: translateY(-4px) scale(1.05); background: rgba(240, 185, 94, 0.13); border-color: rgba(240, 185, 94, 0.5); }
.flow-num {
    display: inline-block;
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    color: var(--amber-bright);
    border: 1px solid rgba(240, 185, 94, 0.4);
    background: rgba(240, 185, 94, 0.07);
    padding: 3px 10px; border-radius: var(--radius-pill);
    margin-bottom: 9px;
}
.flow-step h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--text-strong); }
.flow-step p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.flow-note { margin: 54px auto 0; max-width: 560px; text-align: center; font-size: 13.5px; color: var(--text-soft); }
.flow-note strong { color: var(--amber-bright); font-weight: 700; }
.map-scroll { overflow-x: auto; }
.map-wrap {
    position: relative;
    min-width: 880px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--ink-12) 0%, var(--ink-19) 100%);
    border: 1px solid var(--line-soft);
    padding: 26px 18px 12px;
    overflow: hidden;
}
.map-wrap::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(232, 238, 245, 0.016) 0 2px, transparent 2px 6px);
    pointer-events: none;
}
.map-corner {
    position: absolute; width: 22px; height: 22px;
    border-color: rgba(240, 185, 94, 0.5); border-style: solid; border-width: 0;
}
.map-corner.tl { left: 12px; top: 12px; border-left-width: 2px; border-top-width: 2px; }
.map-corner.tr { right: 12px; top: 12px; border-right-width: 2px; border-top-width: 2px; }
.map-corner.bl { left: 12px; bottom: 12px; border-left-width: 2px; border-bottom-width: 2px; }
.map-corner.br { right: 12px; bottom: 12px; border-right-width: 2px; border-bottom-width: 2px; }
.map-dots { fill: none; stroke: var(--art-01); stroke-width: 4.6; stroke-linecap: round; }
.route-glow { fill: none; stroke: var(--art-02); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.route {
    fill: none; stroke: var(--amber-bright); opacity: 0.8;
    stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 3 7;
    animation: routeflow 1.5s linear infinite;
}
@keyframes routeflow { to { stroke-dashoffset: -20; } }
.m-dot { fill: var(--art-03); }
.m-dot.origin { fill: var(--amber-bright); }
.m-ring {
    fill: none; stroke: var(--amber-bright); stroke-width: 1.6;
    transform-box: fill-box; transform-origin: center;
    animation: ringpulse 2.8s ease-out infinite;
}
@keyframes ringpulse {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}
.map-label { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; fill: var(--art-03);
    paint-order: stroke; stroke: var(--ink-19); stroke-width: 4px; stroke-linejoin: round; }
.map-label.origin { fill: var(--amber-bright); }
.map-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--art-04);
    paint-order: stroke; stroke: var(--ink-19); stroke-width: 3.5px; stroke-linejoin: round; }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.legend-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: var(--radius-pill);
    background: var(--glass); border: 1px solid var(--line-mid);
    color: var(--text); font-size: 14px; font-weight: 600;
}
.legend-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 8px rgba(240, 185, 94, 0.7); }
.legend-chip.muted::before { background: #7f9cbd; box-shadow: none; }
.map-note { text-align: center; margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-soft); }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 920px; margin: 0 auto 30px; }
.mode-tab {
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 16px 20px; border-radius: var(--radius-md);
    background: var(--glass); border: 1px solid var(--line-mid);
    color: var(--text); cursor: pointer; font-family: inherit;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.mode-tab:hover { transform: translateY(-2px); }
.mode-tab .mt-icon {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(240, 185, 94, 0.08); border: 1px solid rgba(240, 185, 94, 0.25);
}
.mode-tab .mt-title { display: block; font-size: 16px; font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.mode-tab .mt-sub { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.mode-tab[aria-pressed="true"] { border-color: rgba(240, 185, 94, 0.6); background: rgba(240, 185, 94, 0.08); box-shadow: 0 10px 30px var(--ink-20); }
.mode-layer { opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.mode-layer.on { opacity: 1; visibility: visible; }
.route-alt {
    fill: none; stroke: var(--art-05); opacity: 0.65;
    stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 2 6;
    animation: routeflow 1.9s linear infinite;
}
.route-glow-alt { fill: none; stroke: var(--art-06); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.m-dot.alt { fill: var(--art-07); }
.m-ring.alt { stroke: var(--art-05); }
.map-label.alt { fill: var(--art-07); }
.rf-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.rf-label { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-bright); }
.rf-select {
    appearance: none; -webkit-appearance: none;
    background: var(--glass) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f0b95e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;
    border: 1px solid var(--line-mid); border-radius: var(--radius-pill);
    color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 600;
    padding: 12px 44px 12px 20px; cursor: pointer; min-width: 300px;
    transition: border-color 0.25s ease;
}
.rf-select:hover, .rf-select:focus { border-color: rgba(240, 185, 94, 0.55); outline: none; }
.rf-select option { background: var(--ink-03); color: var(--fg-04); }
.rf-clear {
    background: transparent; border: 1px solid var(--line-mid); border-radius: var(--radius-pill);
    color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 10px 18px; cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease;
}
.rf-clear:hover { border-color: rgba(240, 185, 94, 0.5); color: var(--text); }
.rf-result { margin: 0 0 26px; }
.rf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 920px; margin: 0 auto; }
.rf-card {
    text-align: left; background: var(--panel); border: 1px solid var(--line-mid);
    border-radius: var(--radius-md); padding: 16px 20px;
    color: var(--text); font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.rf-card:hover { transform: translateY(-2px); border-color: rgba(240, 185, 94, 0.45); }
.rf-card.active { border-color: rgba(240, 185, 94, 0.65); background: rgba(240, 185, 94, 0.07); }
.rf-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.rf-badge {
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    padding: 2.5px 8px; border-radius: var(--radius-pill);
}
.rf-badge.fast { color: var(--amber-bright); border: 1px solid rgba(240, 185, 94, 0.55); }
.rf-badge.opt { color: var(--ink-on-amber); background: linear-gradient(135deg, var(--amber-bright), var(--amber)); }
.rf-eta { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--amber-bright); }
.rf-via { font-size: 12.5px; color: var(--text-soft); }
.rf-note { text-align: center; margin: 14px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-soft); }
.route, .route-alt, .route-glow, .route-glow-alt { transition: opacity 0.4s ease; }

/* --- Neutral browse view + full-screen map -------------------------------
   Founder decision 2026-08-31: the DEFAULT map must not single out any
   country. Key-market lanes and destination markers therefore render exactly
   like every other mainstream lane until the visitor picks a market. The
   WANPORTS origin marker keeps its amber because it is the origin, not a
   destination — it sits in a bare <g>, outside the g[data-dest] scope below.
   Focus colouring (.focused.f-sea / .f-air / .f-land) is more specific and
   still wins the moment a market is chosen, so the route finder is unchanged. */
.route-glow { stroke: var(--art-06); }
.route { stroke: var(--art-05); }
g[data-dest] .m-dot { fill: var(--art-07); }
g[data-dest] .m-ring { stroke: var(--art-05); }
g[data-dest] .map-label { fill: var(--art-07); }

.map-expand {
    position: absolute; top: 14px; right: 16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--radius-pill);
    background: var(--glass); border: 1px solid var(--line-mid);
    color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.map-expand:hover { border-color: rgba(240, 185, 94, 0.5); background: var(--glass-strong); }
.map-expand:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }

/* Native Fullscreen API, plus a fixed-position fallback for browsers with no
   element fullscreen (iOS Safari). Both paths share one rule set. */
.map-wrap:fullscreen,
.map-wrap:-webkit-full-screen,
.map-wrap.is-expanded {
    min-width: 0; width: 100%; height: 100%;
    border-radius: 0; border: none;
    display: flex; flex-direction: column; justify-content: center;
    padding: 32px 24px;
}
.map-wrap.is-expanded { position: fixed; inset: 0; z-index: 1000; }
.map-wrap:fullscreen > svg,
.map-wrap:-webkit-full-screen > svg,
.map-wrap.is-expanded > svg { width: 100%; height: auto; max-height: 100%; }

.mode-layer g[data-dest] { transition: opacity 0.4s ease; }
g.extra-m .m-ring, g.extra-m text { display: none; }
g.extra-m.focus-show .m-ring, g.extra-m.focus-show text { display: inline; }
path.dimmed { opacity: 0.06 !important; }
g.dimmed { opacity: 0.1; }
path.focused { opacity: 1 !important; }
.route.focused, .route-alt.focused { stroke-width: 2.6; }
.route.focused.f-sea, .route-alt.focused.f-sea { stroke: var(--info); }
.route.focused.f-air, .route-alt.focused.f-air { stroke: var(--art-08); }
.route.focused.f-land, .route-alt.focused.f-land { stroke: var(--ok); }
.route-glow.focused.f-sea, .route-glow-alt.focused.f-sea { stroke: var(--art-09); }
.route-glow.focused.f-air, .route-glow-alt.focused.f-air { stroke: var(--art-10); }
.route-glow.focused.f-land, .route-glow-alt.focused.f-land { stroke: var(--art-11); }
.mode-tabs.overlay .mode-tab { opacity: 0.55; }
.mode-tabs.overlay .mode-tab:hover { opacity: 1; }
.legend-chip.mode-sea::before { background: var(--info); box-shadow: 0 0 8px rgba(79, 195, 247, 0.7); }
.legend-chip.mode-air::before { background: #f0b95e; box-shadow: 0 0 8px rgba(240, 185, 94, 0.7); }
.legend-chip.mode-land::before { background: var(--ok); box-shadow: 0 0 8px rgba(127, 209, 168, 0.7); }
.rf-card[data-mode="sea"] { border-left: 3px solid var(--info); }
.rf-card[data-mode="air"] { border-left: 3px solid #f0b95e; }
.rf-card[data-mode="land"] { border-left: 3px solid var(--ok); }
.rf-card[data-mode="sea"] .rf-eta { color: var(--info); }
.rf-card[data-mode="air"] .rf-eta { color: var(--fg-05); }
.rf-card[data-mode="land"] .rf-eta { color: var(--ok); }
.faq-wrap { max-width: 820px; margin: 56px auto 0; }
.faq-h { margin: 0 0 18px; text-align: center; font-size: 21px; font-weight: 800; color: var(--text-strong); }
.faq-wrap details {
    background: var(--glass); border: 1px solid var(--line-soft);
    border-radius: 14px; margin-bottom: 10px;
}
.faq-wrap summary {
    cursor: pointer; padding: 15px 20px; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    font-weight: 700; font-size: 14.5px; color: var(--text-strong);
}
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: "+"; color: var(--amber-bright); font-size: 18px; font-weight: 600; flex: none; }
.faq-wrap details[open] summary::after { content: "\2013"; }
.faq-a { margin: 0; padding: 0 20px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 54px; }
.step-card { text-align: left; }
.step-thumb {
    border-radius: 22px; overflow: hidden; margin-bottom: 20px;
    border: 1px solid var(--line-soft);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.step-card:hover .step-thumb { transform: translateY(-6px); border-color: rgba(240, 185, 94, 0.3); box-shadow: 0 30px 60px var(--ink-16); }
.step-thumb svg { display: block; width: 100%; height: auto; }
.step-pill {
    display: inline-block;
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--amber-bright);
    border: 1.5px solid rgba(240, 185, 94, 0.5);
    padding: 4px 14px; border-radius: var(--radius-pill);
    margin-bottom: 12px;
}
.step-card h3 { margin: 0 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-strong); }
.step-card p { margin: 0; font-size: 15px; color: var(--text-soft); }
.steps-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-outline { background: var(--glass); color: var(--text); border: 1.5px solid var(--line-mid); }
.btn-outline:hover { transform: translateY(-2px); border-color: rgba(240, 185, 94, 0.5); background: var(--glass-strong); }
.cat-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 860px; margin: 0 auto; }
.cat-chip {
    padding: 12px 24px; border-radius: var(--radius-pill);
    background: var(--glass); border: 1px solid var(--line-mid);
    font-size: 15px; font-weight: 600; color: var(--text);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cat-chip:hover { transform: translateY(-3px); border-color: rgba(240, 185, 94, 0.55); background: rgba(240, 185, 94, 0.07); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
    background: var(--panel); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pillar:hover { transform: translateY(-5px); border-color: rgba(240, 185, 94, 0.28); box-shadow: 0 24px 50px var(--ink-08); }
.pillar-icon {
    width: 52px; height: 52px; border-radius: 15px;
    background: rgba(240, 185, 94, 0.1); border: 1px solid rgba(240, 185, 94, 0.3);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.pillar h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--text-strong); }
.pillar p { margin: 0; font-size: 14.5px; color: var(--text-soft); }
.vessel-card {
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--ink-12) 0%, var(--ink-19) 100%);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    margin-bottom: 26px;
}
.vessel-card svg { display: block; width: 100%; height: auto; }
.cargo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cargo-card {
    border-radius: var(--radius-lg);
    background: var(--panel); border: 1px solid var(--line-soft);
    padding: 24px 24px 26px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cargo-card:hover { transform: translateY(-6px); border-color: rgba(240, 185, 94, 0.3); box-shadow: 0 30px 60px var(--ink-16); }
.cargo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cargo-head h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 0.01em; color: var(--text-strong); font-family: var(--mono); }
.cargo-tag {
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--amber-bright);
    border: 1px solid rgba(240, 185, 94, 0.4);
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.iso-svg { display: block; width: 100%; height: auto; margin: 2px 0 10px; }
.iso-top { fill: var(--art-12); }
.iso-right { fill: var(--art-13); }
.iso-left { fill: var(--art-14); }
.iso-edge { stroke: var(--art-15); stroke-width: 1.4; }
.iso-edge.iso-hidden { stroke: var(--art-16); stroke-dasharray: 3 4; }
.iso-corr { stroke: var(--art-17); stroke-width: 1; }
.iso-accent { stroke: var(--amber-bright); stroke-width: 1.7; }
.iso-dim { stroke: var(--art-18); stroke-width: 1; }
.iso-txt { font-family: var(--mono); font-size: 11px; fill: var(--art-03);
    paint-order: stroke; stroke: var(--ink-03); stroke-width: 3px; stroke-linejoin: round; }
.cargo-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cargo-specs li {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 2px;
    border-top: 1px dashed var(--line-soft);
    font-family: var(--mono); font-size: 12.5px;
}
.cargo-specs .k { color: var(--text-soft); }
.cargo-specs .v { color: var(--text); font-weight: 600; text-align: right; }
.cargo-note { text-align: center; margin: 26px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-soft); }
.samples-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.sample-card {
    background: var(--panel); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: 34px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.sample-card:hover { transform: translateY(-4px); border-color: rgba(240, 185, 94, 0.28); }
.sample-card h3 { margin: 0 0 10px; font-size: 24px; font-weight: 800; color: var(--text-strong); }
.sample-card > p { color: var(--text-soft); font-size: 15px; margin: 0 0 20px; }
.sample-points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sample-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.sample-points svg { flex: none; margin-top: 3px; }
.pay-badges { display: flex; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.pay-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 12px;
    background: var(--glass); border: 1px solid var(--line-mid);
    font-weight: 700; font-size: 14.5px; color: var(--text-strong);
}
.pay-stub {
    border: 1.5px dashed rgba(240, 185, 94, 0.45);
    border-radius: var(--radius-md); padding: 18px; text-align: center;
    background: rgba(240, 185, 94, 0.04);
}
#paypal-button-container {
    min-height: 44px; display: flex; align-items: center; justify-content: center;
    color: var(--text-soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
}
.pay-note { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--amber-bright); }
.page-stub-tag {
    display: inline-block; margin-left: 10px;
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--text-soft); border: 1px dashed var(--line-mid);
    border-radius: var(--radius-pill); padding: 3px 9px; vertical-align: 3px;
}
.btn-cookie {
    border-radius: var(--radius-pill); padding: 10px 22px;
    font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit;
    transition: transform 0.2s ease;
}
.btn-cookie:hover { transform: translateY(-1px); }
.btn-cookie.accept { background: linear-gradient(135deg, var(--amber-bright), var(--amber)); border: 0; color: var(--ink-on-amber); }
.btn-cookie.decline { background: transparent; border: 1px solid var(--line-mid); color: var(--text-soft); }
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { margin: 0 0 18px; font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-strong); text-wrap: balance; }
.cta-band h2 em { font-style: italic; color: var(--amber-bright); }
.cta-band p { margin: 0 auto 34px; max-width: 560px; color: var(--text-soft); font-size: 17px; }
.cta-glow {
    position: absolute; left: 50%; top: -180px; transform: translateX(-50%);
    width: 720px; height: 420px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(217, 150, 46, 0.2), transparent 70%);
    pointer-events: none;
}
.enq-hint { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.enq-chip {
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--amber-bright);
    border: 1px solid rgba(240, 185, 94, 0.4); background: rgba(240, 185, 94, 0.06);
    padding: 6px 13px; border-radius: var(--radius-pill);
}
.enq-line { margin: 0 0 26px; font-size: 13.5px; color: var(--text-soft); }
.enq-line a { color: var(--amber-bright); text-decoration: none; font-weight: 700; }
.enq-line a:hover { text-decoration: underline; }
.site-footer { background: var(--ink-21); color: var(--text-soft); padding: 72px 0 34px; font-size: 14.5px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; margin-bottom: 46px; }
.footer-logo { height: 44px; width: auto; display: block; margin-bottom: 14px; }
.site-footer p { margin: 0 0 8px; }
.footer-heading { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-strong); margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--text-soft); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--amber-bright); }
.footer-boundary {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 18px; padding: 12px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
    font-size: 12.5px; line-height: 1.55;
}
.footer-boundary svg { flex: none; margin-top: 2px; }
/* R9-A: the company's own profiles, when published in Site settings */
.footer-follow { margin-top: 14px; font-size: 13.5px; }
.footer-follow-label { display: block; color: var(--text-strong); margin-bottom: 8px; }
/* R3-1: one chip per profile, icon before the name (the sprite is inlined just above). */
.footer-follow-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.footer-follow-list li { margin: 0; }
.footer-follow-list a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 9px; border: 1px solid var(--line-mid); border-radius: var(--radius-pill);
    color: var(--text-soft); text-decoration: none; font-size: 13px; line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-follow-list a:hover { border-color: rgba(240, 185, 94, 0.6); color: var(--text-strong); }
.social-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }
.footer-copyright {
    border-top: 1px solid var(--line-soft);
    padding-top: 26px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13px;
}
/* Discreet admin-console entry. The path is already public knowledge (robots.txt
   discloses Disallow: /admin/), so a quiet footer link adds convenience without
   adding exposure — login throttling, audit logging and RBAC are the real defence. */
.admin-entry { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.5; transition: opacity 0.2s ease, color 0.2s ease; }
.admin-entry:hover { opacity: 1; color: var(--amber-bright); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }
.reveal[data-delay="6"] { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}
@media (max-width: 1020px) {
    .pill-nav ul { display: none; }
    .nav-burger { display: inline-flex; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 10px; cursor: pointer; }
    .nav-burger span { width: 22px; height: 2.5px; border-radius: 2px; background: #e8eef5; transition: transform 0.25s ease, opacity 0.25s ease; }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    .card-lg, .card-md { grid-column: span 12; }
    .scene-chips { grid-template-columns: 1fr; }
    .flow-rail { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
    .flow-rail::before, .flow-rail::after { display: none; }
    .steps-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .pillars { grid-template-columns: 1fr; }
    .cargo-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .mode-tabs { grid-template-columns: 1fr; }
    .samples-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 740px) {
    .bento-scene { display: flex; flex-direction: column; }
    .bento-scene > svg { order: 2; height: auto; }
    .scene-title { position: static; order: 1; padding: 20px 22px 0; }
    .scene-title p { max-width: none; }
    .scene-chips {
        position: static; order: 3;
        grid-template-columns: 1fr; gap: 12px;
        margin: 14px 16px 18px;
    }
    .scene-tag { display: none; }
    .rf-select { min-width: 0; width: 100%; }
    .rf-bar { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 620px) {
    .section { padding: 72px 0; }
    .hero { padding-top: 150px; }
    .flow-rail { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-copyright { flex-direction: column; }
}

/* ==================== from about page ==================== */
.pill-nav ul a[aria-current="page"] { background: var(--glass-strong); color: var(--amber-bright); }
.about-hero {
    position: relative;
    min-height: 74svh;
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: radial-gradient(130% 80% at 50% -10%, var(--ink-11) 0%, var(--ink-12) 42%, var(--bg-0) 100%);
    color: var(--text);
    padding: 180px 0 84px;
}
.about-hero-art { position: absolute; inset: 0; z-index: 0; }
.about-hero-art svg { width: 100%; height: 100%; display: block; }
.about-hero-photo {
    position: absolute; inset: 0; z-index: 1;
    background-image: var(--about-hero-image);
    background-size: cover; background-position: center;
}
.about-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, var(--ink-18) 0%, var(--ink-22) 40%, var(--ink-23) 100%);
    pointer-events: none;
}
.about-hero .container { position: relative; z-index: 3; }
.about-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 5.6vw, 68px);
    line-height: 1.08; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text-strong); max-width: 780px; text-wrap: balance;
}
.about-hero h1 em { font-style: italic; color: var(--amber-bright); }
.about-hero p.lead { margin: 0; max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-soft); }
.identity-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; }
.identity-copy h2 { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: var(--text-strong); }
.identity-copy h2 em { font-style: italic; color: var(--amber-bright); }
.identity-copy p { margin: 0 0 16px; font-size: 16.5px; color: var(--text-soft); }
.identity-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.fact {
    background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
    padding: 16px 18px;
}
.fact small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-bright); margin-bottom: 6px; }
.fact span { font-size: 14.5px; font-weight: 600; color: var(--text); }
.fact a { color: var(--text); text-decoration: none; }
.fact a:hover { color: var(--amber-bright); }
.logo-panel {
    background: var(--glass);
    border: 1px solid var(--line-mid);
    border-radius: var(--radius-lg);
    padding: 72px 44px;
    display: flex; align-items: center; justify-content: center;
}
.logo-panel img { width: 72%; max-width: 360px; height: auto; }
.ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ops-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; transition: transform 0.3s ease, border-color 0.3s ease; }
.ops-card:hover { transform: translateY(-4px); border-color: rgba(240, 185, 94, 0.3); }
.ops-card h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
.ops-card > p { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.console {
    background: var(--ink-24); border: 1px solid var(--line-soft); border-radius: 14px;
    padding: 18px; font-family: var(--mono); font-size: 12px; color: var(--text-soft);
    display: flex; flex-direction: column; gap: 10px;
}
.c-k { color: var(--text-strong); font-weight: 700; }
.c-a { color: var(--amber-bright); }
.c-g { color: var(--ok); }
.c-bar { display: inline-block; width: 104px; height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; vertical-align: middle; margin: 0 7px; }
.c-bar i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--amber-bright), var(--amber)); transform-origin: left; animation: fillx 1.6s ease 0.4s both; }
@keyframes fillx { from { transform: scaleX(0); } }
.cursor { display: inline-block; width: 8px; height: 13px; background: var(--amber-bright); vertical-align: -2px; animation: blinkc 1.1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.gate { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.03); margin-bottom: 9px; }
.gate svg { flex: none; }
.gate b { display: block; color: var(--text-strong); font-size: 13px; font-weight: 700; }
.gate span { display: block; color: var(--text-soft); font-size: 11.5px; }
.g-ok { margin-left: auto; font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--ok); border: 1px solid rgba(127, 209, 168, 0.5); padding: 2px 8px; border-radius: var(--radius-pill); flex: none; }
.docs-anim { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.docs-anim li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 12px;
    background: rgba(255, 255, 255, 0.03); font-size: 12.5px; color: var(--text);
    animation: docpop 0.45s ease both;
}
.docs-anim li:nth-child(1) { animation-delay: 0.15s; }
.docs-anim li:nth-child(2) { animation-delay: 0.3s; }
.docs-anim li:nth-child(3) { animation-delay: 0.45s; }
.docs-anim li:nth-child(4) { animation-delay: 0.6s; }
.docs-anim li:nth-child(5) { animation-delay: 0.75s; }
@keyframes docpop { from { opacity: 0; transform: translateY(6px); } }
.docs-foot { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--amber-bright); text-align: center; }
.cap2-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 920px; margin: 0 auto; }
.cap2-chip {
    padding: 11px 22px; border-radius: var(--radius-pill);
    background: var(--glass); border: 1px solid var(--line-mid);
    font-size: 14px; font-weight: 600; color: var(--text);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cap2-chip:hover { transform: translateY(-3px); border-color: rgba(240, 185, 94, 0.55); background: rgba(240, 185, 94, 0.07); }
/* The line that turns the chip cloud from "capacity we hold" into "processes we
   can put an order through". It is the qualifier, so it sits quieter than the
   chips but must stay legible - not a footnote nobody reads. Tokens only, so it
   follows both palettes. */
.cap2-note {
    max-width: 620px; margin: 28px auto 0;
    font-size: 15px; line-height: 1.65; text-align: center;
    color: var(--text-soft);
}
.about-band {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background: var(--bg-1);
    color: var(--text-strong); text-align: center;
}
.about-band-art { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.about-band-photo {
    position: absolute; inset: 0; z-index: 1;
    background-image: var(--about-band-image);
    background-size: cover; background-position: center;
}
.about-band::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ink-25); }
.about-band .container { position: relative; z-index: 3; }
.about-band blockquote {
    margin: 0 auto; max-width: 780px;
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance;
}
.about-band blockquote em { font-style: italic; color: var(--amber-bright); }
.about-band p { margin: 20px 0 0; color: var(--text-soft); font-size: 15.5px; }
.mini-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mini-step {
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 26px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.mini-step:hover { transform: translateY(-5px); border-color: rgba(240, 185, 94, 0.28); }
.mini-num {
    display: inline-block;
    font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--amber-bright);
    border: 1.5px solid rgba(240, 185, 94, 0.5);
    padding: 3px 12px; border-radius: var(--radius-pill);
    margin-bottom: 14px;
}
.mini-step h3 { margin: 0 0 6px; font-size: 17.5px; font-weight: 800; color: var(--text-strong); }
.mini-step p { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.micro { font-size: 13.5px; color: var(--text-soft); margin: 18px 0 0; }
@media (max-width: 1020px) {
    .identity-grid { grid-template-columns: 1fr; }
    .mini-steps { grid-template-columns: 1fr 1fr; }
    .ops-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .about-hero { padding-top: 170px; }
    .mini-steps { grid-template-columns: 1fr; }
    .identity-facts { grid-template-columns: 1fr; }
}

/* ==================== from oem page ==================== */
.oem-hero {
    position: relative; padding: 190px 0 90px; overflow: hidden;
    background: radial-gradient(130% 80% at 50% -10%, var(--ink-11) 0%, var(--ink-12) 42%, var(--bg-0) 100%);
    text-align: center;
}
.oem-hero h1 { margin: 0 0 18px; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); text-wrap: balance; }
.oem-hero h1 em { font-style: italic; color: var(--amber-bright); }
.oem-hero p.lead { margin: 0 auto; max-width: 660px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-soft); }
.oem-hero .grid-bg { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.oem-hero .hero-photo { z-index: 0; }
.oem-hero .grid-bg, .oem-hero .container { z-index: 1; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
.mode-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 34px; transition: transform 0.3s ease, border-color 0.3s ease; }
.mode-card:hover { transform: translateY(-5px); border-color: rgba(240, 185, 94, 0.3); }
.mode-card .tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--amber-bright); }
.mode-card h3 { margin: 8px 0 10px; font-size: 24px; font-weight: 800; color: var(--text-strong); }
.mode-card p { margin: 0 0 16px; font-size: 14.5px; color: var(--text-soft); }
.mode-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mode-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); }
.mode-card li svg { flex: none; margin-top: 3px; }
.proc-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.proc-step { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 22px 18px; transition: transform 0.3s ease, border-color 0.3s ease; }
.proc-step:hover { transform: translateY(-4px); border-color: rgba(240, 185, 94, 0.3); }
.proc-num { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--amber-bright); border: 1px solid rgba(240, 185, 94, 0.4); padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.proc-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--text-strong); }
.proc-step p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
.rwork-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rwork-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px; transition: transform 0.3s ease, border-color 0.3s ease; }
.rwork-card:hover { transform: translateY(-4px); border-color: rgba(240, 185, 94, 0.3); }
.rwork-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rwork-num { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--amber-bright); border: 1px solid rgba(240, 185, 94, 0.4); padding: 3px 10px; border-radius: var(--radius-pill); }
.rwork-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-strong); }
.rwork-card dl { margin: 0; }
.rwork-card dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.rwork-card dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rwork-card dd { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.rwork-card dd.gate { color: var(--amber-bright); font-weight: 600; }
/* The six stage cards share one set of rows across the grid row, so YOU PROVIDE,
   WANPORTS DOES and CONFIRMED sit at the same height on all three cards however
   long the text above them runs. The card is a subgrid of the grid's rows (head +
   three label/text pairs = 7), and the <dl> is a subgrid of the card's, which keeps
   the list in the accessibility tree. Where subgrid is unsupported the last pair is
   pushed to the bottom instead, so at least CONFIRMED lines up. */
.rwork-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
.rwork-card dl { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
@supports not (grid-template-rows: subgrid) {
    .rwork-card { display: flex; flex-direction: column; }
    .rwork-card dl { display: flex; flex-direction: column; flex: 1; }
    .rwork-card dt:last-of-type { margin-top: auto; }
}
.terms-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 34px auto 0; }
.terms-card { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px; }
.terms-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--text-strong); }
.terms-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.comp-bar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.comp-select {
    appearance: none; -webkit-appearance: none;
    background: var(--glass) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f0b95e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;
    border: 1px solid var(--line-mid); border-radius: var(--radius-pill);
    color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 600;
    padding: 12px 44px 12px 20px; cursor: pointer; min-width: 260px;
    transition: border-color 0.25s ease;
}
.comp-select:hover, .comp-select:focus { border-color: rgba(240, 185, 94, 0.55); outline: none; }
.comp-select option, .comp-select optgroup { background: var(--ink-03); color: var(--fg-04); }
.comp-result { max-width: 980px; margin: 0 auto; }
.comp-empty { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--text-soft); padding: 26px; border: 1.5px dashed var(--line-mid); border-radius: var(--radius-md); }
.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.comp-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px; }
.comp-card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 10px; }
.cert-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cert-chip { padding: 8px 15px; border-radius: var(--radius-pill); background: rgba(240, 185, 94, 0.08); border: 1px solid rgba(240, 185, 94, 0.4); color: var(--amber-bright); font-size: 13px; font-weight: 700; }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.doc-list svg { flex: none; margin-top: 3px; }
.comp-note { margin: 20px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line-soft); font-size: 13px; color: var(--text-soft); }
.comp-note strong { color: var(--amber-bright); }
.comp-disclaimer { text-align: center; margin: 22px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-soft); }
/* .copy-btn is shared with the trade-guide enquiry-template button - keep. */
.copy-btn {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--radius-pill);
    background: rgba(240, 185, 94, 0.08); border: 1px solid rgba(240, 185, 94, 0.45);
    color: var(--amber-bright); font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.copy-btn:hover { background: rgba(240, 185, 94, 0.14); transform: translateY(-1px); }
.copy-btn.done { background: rgba(127, 209, 168, 0.12); border-color: rgba(127, 209, 168, 0.55); color: var(--ok); }
@media (max-width: 1020px) {
    .mode-cards { grid-template-columns: 1fr; }
    .proc-rail { grid-template-columns: repeat(2, 1fr); }
    .rwork-grid { grid-template-columns: repeat(2, 1fr); }
    .terms-pair { grid-template-columns: 1fr; }
    .comp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .oem-hero { padding-top: 170px; }
    .proc-rail { grid-template-columns: 1fr; }
    .rwork-grid { grid-template-columns: 1fr; }
    .comp-select { min-width: 0; width: 100%; }
}

/* ==================== from trade page ==================== */
.ict-scroll { overflow-x: auto; }
.ict-table { min-width: 780px; max-width: 1040px; margin: 0 auto; }
.ict-row { display: grid; grid-template-columns: 170px repeat(7, 1fr); gap: 6px; align-items: center; margin-bottom: 8px; }
.ict-head { margin-bottom: 12px; }
.ict-head span { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-soft); text-align: center; }
.ict-head .ict-term { text-align: left; }
.ict-term { font-weight: 800; font-size: 15px; color: var(--text-strong); }
.ict-term small { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-soft); }
.seg { position: relative; height: 26px; border-radius: 7px; }
.seg.s { background: linear-gradient(135deg, rgba(240, 185, 94, 0.85), rgba(217, 150, 46, 0.85)); }
.seg.o { background: repeating-linear-gradient(45deg, rgba(240, 185, 94, 0.45) 0 6px, rgba(240, 185, 94, 0.2) 6px 12px); }
.seg.b { background: rgba(127, 156, 189, 0.28); border: 1px solid rgba(127, 156, 189, 0.35); }
.seg.risk::before { content: "\2691"; position: absolute; left: -13px; top: -17px; font-size: 15px; color: var(--warn); }
.ict-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
.ict-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); font-weight: 600; }
.ict-key i { width: 22px; height: 13px; border-radius: 4px; display: inline-block; }
.ict-key .k-s { background: linear-gradient(135deg, rgba(240, 185, 94, 0.85), rgba(217, 150, 46, 0.85)); }
.ict-key .k-o { background: repeating-linear-gradient(45deg, rgba(240, 185, 94, 0.45) 0 5px, rgba(240, 185, 94, 0.2) 5px 10px); }
.ict-key .k-b { background: rgba(127, 156, 189, 0.28); border: 1px solid rgba(127, 156, 189, 0.35); }
.ict-key .k-r { color: var(--warn); font-size: 15px; width: auto; height: auto; }
.ict-note { text-align: center; margin: 18px auto 0; max-width: 720px; font-size: 13.5px; color: var(--text-soft); }
.ict-note strong { color: var(--amber-bright); }
.term-wrap { max-width: 860px; margin: 44px auto 0; }
.term-wrap details { background: var(--glass); border: 1px solid var(--line-soft); border-radius: 14px; margin-bottom: 10px; }
.term-wrap summary { cursor: pointer; padding: 15px 20px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 700; font-size: 14.5px; color: var(--text-strong); }
.term-wrap summary::-webkit-details-marker { display: none; }
.term-wrap summary::after { content: "+"; color: var(--amber-bright); font-size: 18px; font-weight: 600; flex: none; }
.term-wrap details[open] summary::after { content: "\2013"; }
.term-body { padding: 0 20px 16px; font-size: 13.5px; line-height: 1.65; color: var(--text-soft); }
.term-body b { color: var(--text); }
.term-body .warn { display: block; margin-top: 8px; color: var(--amber-bright); }
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
.chk-item { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 16px 18px; transition: transform 0.25s ease, border-color 0.25s ease; }
.chk-item:hover { transform: translateY(-2px); border-color: rgba(240, 185, 94, 0.3); }
.chk-item svg { flex: none; margin-top: 2px; }
.chk-item b { display: block; color: var(--text-strong); font-size: 14.5px; }
.chk-item span { color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto 26px; }
.enq-card { border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--line-soft); background: var(--panel); }
.enq-card.good { border-color: rgba(127, 209, 168, 0.4); }
.enq-card.bad { border-color: rgba(255, 138, 112, 0.35); }
.enq-flag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; }
.enq-card.good .enq-flag { color: var(--ok); }
.enq-card.bad .enq-flag { color: var(--warn); }
.enq-quote { margin: 12px 0 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); font-size: 14px; color: var(--text); font-style: italic; }
.enq-card p.res { margin: 0; font-size: 13px; color: var(--text-soft); }
.enq-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1020px) {
    .chk-grid { grid-template-columns: 1fr; }
    .enq-grid { grid-template-columns: 1fr; }
}

/* ==================== from cases page ==================== */
.video-shell {
    position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--panel); border: 1px solid var(--line-soft);
}
.video-empty, .video-error {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
    color: var(--text-soft);
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(240, 185, 94, 0.05), transparent 70%),
        repeating-linear-gradient(45deg, rgba(232, 238, 245, 0.02) 0 14px, transparent 14px 28px);
}
.video-error { color: var(--warn); }
.yt-facade {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0; cursor: pointer;
    background-color: #000; background-size: cover; background-position: center;
}
.yt-facade::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, var(--ink-26) 40%, var(--ink-27) 100%); }
.yt-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 78px; height: 78px; border-radius: 50%;
    background: linear-gradient(135deg, var(--amber-bright), var(--amber));
    box-shadow: 0 14px 40px rgba(217, 150, 46, 0.5);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
}
.yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.07); }
.yt-play::after { content: ""; display: block; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ink-on-amber); }
.yt-hint {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--text); background: var(--ink-28); border: 1px solid var(--line-soft);
    padding: 6px 12px; border-radius: var(--radius-pill); backdrop-filter: blur(6px);
}
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 24px 24px 22px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.case-card:hover { transform: translateY(-4px); border-color: rgba(240, 185, 94, 0.35); }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.case-cat { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--amber-bright); }
.case-tag { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-soft); border: 1px dashed var(--line-mid); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }
.case-card h3 { margin: 0; font-size: 17.5px; line-height: 1.35; font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; }
.case-metrics { list-style: none; margin: 2px 0 0; padding: 0; }
.case-metrics li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.case-metrics li span { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-soft); flex: none; }
.case-metrics li b { font-size: 12.5px; font-weight: 600; color: var(--text); text-align: right; }
.case-video {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    color: var(--amber-bright); border: 1px dashed rgba(240, 185, 94, 0.45);
    border-radius: var(--radius-pill); padding: 6px 13px;
}
@media (max-width: 1020px) {
    .case-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .case-grid { grid-template-columns: 1fr; }
}

/* ==================== launch addenda (port-only rules) ==================== */

/* restore second-pass rule dropped by merge dedupe */
.rf-card { cursor: default; }

/* accessibility: skip link + visible keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--amber-bright); color: var(--ink-on-amber); padding: 10px 18px; border-radius: 0 0 12px 0; font-weight: 700; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }

/* Brand mark on the dark chrome.
   The uploaded logo master is the navy print asset — it is ALSO the favicon and the
   Open Graph image, where a light mark would be invisible on a light browser tab or a
   white social card. So the master file stays exactly as uploaded and the nav/footer
   render it light instead: brightness(0) collapses every opaque pixel to black and
   invert(1) flips it to white; transparency is untouched. If a light logo master is
   ever uploaded, delete this one rule. */
.brand-logo-link img, .footer-logo { filter: var(--logo-filter); }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-mark { font-size: 19px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-strong); }

/* answer-first GEO paragraph in the hero */
.geo-lead { margin: 18px auto 0; max-width: 720px; font-size: 15px; line-height: 1.7; color: var(--text-soft); }

/* services strip (What WANPORTS supports) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; }
.svc-item { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 18px 20px; transition: transform 0.25s ease, border-color 0.25s ease; }
.svc-item:hover { transform: translateY(-2px); border-color: rgba(240, 185, 94, 0.3); }
.svc-item svg { flex: none; margin-top: 3px; }
.svc-item b { display: block; color: var(--text-strong); font-size: 14.5px; margin-bottom: 3px; }
.svc-item span { color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }

/* legal / simple prose pages (privacy, terms, category placeholder) */
.page-hero { position: relative; padding: 170px 0 56px; background: radial-gradient(130% 80% at 50% -10%, var(--ink-11) 0%, var(--ink-12) 42%, var(--bg-0) 100%); }
.page-hero h1 { margin: 0 0 10px; font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.page-hero { overflow: hidden; }
.page-hero .hero-photo { z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }
/* The error page's one-line lead (go-live batch): the legal pages have no lead, so this is new. */
.page-hero p.lead { margin: 0; max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-soft); }
.container.narrow { max-width: 860px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-soft); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.breadcrumbs a { color: var(--text-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--amber-bright); }
.breadcrumbs [aria-current="page"] { color: var(--text); }
.prose { color: var(--text-soft); font-size: 15.5px; }
.prose h2 { margin: 34px 0 10px; font-size: 20px; font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; }
.prose p { margin: 0 0 14px; }
.prose a { color: var(--amber-bright); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.page-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-soft); margin-top: 30px; }

/* legacy button classes used by dormant flag-gated modules + legal pages */
.button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.button-primary { background: linear-gradient(135deg, var(--amber-bright), var(--amber)); color: var(--ink-on-amber); box-shadow: 0 10px 30px rgba(217, 150, 46, 0.4); }
.button-primary:hover { transform: translateY(-2px); }
.button-secondary, .button-outline { background: var(--glass); color: var(--text); border: 1.5px solid var(--line-mid); }
.button-secondary:hover, .button-outline:hover { border-color: rgba(240, 185, 94, 0.5); }
.link-more { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.link-more:hover { color: var(--amber-bright); }

/* dormant WEB-MFG1-LR-001 modules restyled for the dark system (render only
   when the mfg1 flags are enabled; copy intentionally untouched pending the
   founder-approved reframe of that lane) */
.mfg1-band { padding: 96px 0; background: var(--bg-1); }
.mfg1-band h2 { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; color: var(--text-strong); }
.mfg1-network-statement { max-width: 760px; color: var(--text-soft); margin: 0 0 30px; }
.mfg1-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.mfg1-profile-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 22px; }
.mfg1-profile-label { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--amber-bright); margin: 0 0 8px; }
.mfg1-profile-card h3 { margin: 0 0 8px; color: var(--text-strong); font-size: 17px; }
.mfg1-profile-region { display: flex; gap: 8px; align-items: center; color: var(--text-soft); font-size: 12.5px; margin: 0 0 10px; }
.mfg1-profile-summary { color: var(--text-soft); font-size: 13.5px; margin: 0 0 16px; }
.mfg1-band-cta { margin: 6px 0 18px; }
.mfg1-boundary, .hero-boundary { display: flex; gap: 10px; align-items: flex-start; max-width: 720px; margin: 14px auto 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.55; color: var(--text-soft); text-align: left; }
.kicker.on-dark { color: var(--amber-bright); }

@media (max-width: 1020px) {
    .svc-grid { grid-template-columns: 1fr 1fr; }
    .mfg1-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .svc-grid { grid-template-columns: 1fr; }
    .page-hero { padding-top: 150px; }
}

/* cases page (launch build) + category chip links */
.video-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.yt-link { position: absolute; inset: 0; display: block; text-decoration: none; }
.yt-link:hover .video-empty { color: var(--amber-bright); }
.case-video-shell { position: relative; margin-top: auto; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line-soft); }
.case-empty { max-width: 640px; margin: 0 auto; text-align: center; color: var(--text-soft); background: var(--panel); border: 1px dashed var(--line-mid); border-radius: var(--radius-md); padding: 30px 26px; }
.case-empty p { margin: 0; }
a.cat-chip { text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
a.cat-chip:hover { border-color: rgba(240, 185, 94, 0.5); color: var(--amber-bright); }

/* inside the stack the shell fills the column (auto margins would disable
   grid stretch and collapse the aspect-ratio box) */
.video-stack .video-shell { margin: 0; width: 100%; }


/* ==================== light theme =========================================
   The dark palette above is the default: with no data-theme attribute the
   rendered output is unchanged. A light palette is applied only when the
   viewer (or the OS, via the inline head script) asks for it.

   Two deliberate constants across both themes:
   - the amber FILL used on buttons and dots stays bright; the amber used as
     TEXT darkens, because #f0b95e on white is unreadable;
   - the large decorative artwork panels stay dark. They are drawn with glows
     and dark grounds; a dark illustration card on a light page is a design
     choice, not an oversight.
   ========================================================================= */
:root[data-theme="light"] {
    --bg-0: #f4f6f9;
    --bg-1: #eaeef4;
    --panel: #ffffff;
    --panel-2: #f2f5fa;
    --navy-800: #12304f;
    --amber: #7f5309;
    --amber-bright: #9a6510;
    --ink-on-amber: #2a1a04;
    --text: #16202e;
    --text-soft: #56677d;
    --line-soft: rgba(18, 48, 79, 0.12);
    --line-mid: rgba(18, 48, 79, 0.22);
    --glass: rgba(18, 48, 79, 0.04);
    --glass-strong: rgba(18, 48, 79, 0.08);
    --text-strong: #0a1420;
    --ok: #157a52;
    --warn: #b8412a;
    --info: #0b6ea8;
    --ink-03: #e9edf3;
    --ink-07: rgba(244, 246, 249, 0.62);
    --ink-08: rgba(18, 48, 79, 0.15);
    --ink-09: rgba(244, 246, 249, 0.94);
    --ink-10: rgba(18, 48, 79, 0.20);
    --ink-11: #e1e6ef;
    --ink-12: #eceff5;
    --ink-13: rgba(244, 246, 249, 0.0);
    --ink-14: rgba(244, 246, 249, 0.55);
    --ink-15: rgba(244, 246, 249, 0.55);
    --ink-16: rgba(18, 48, 79, 0.17);
    --ink-17: rgba(244, 246, 249, 0.55);
    --ink-18: rgba(244, 246, 249, 0.5);
    --ink-19: #f0f2f7;
    --ink-20: rgba(18, 48, 79, 0.12);
    --ink-21: #f6f7fa;
    --ink-22: rgba(244, 246, 249, 0.12);
    --ink-23: rgba(244, 246, 249, 0.85);
    --ink-24: #f2f4f8;
    --ink-25: rgba(244, 246, 249, 0.66);
    --ink-26: rgba(244, 246, 249, 0.05);
    --ink-27: rgba(244, 246, 249, 0.6);
    --ink-28: rgba(244, 246, 249, 0.65);
    --art-01: rgba(51, 64, 81, 0.5);
    --art-02: rgba(201, 138, 15, 0.13);
    --art-03: #16202c;
    --art-04: #334051;
    --art-05: #30455d;
    --art-06: rgba(48, 69, 93, 0.12);
    --art-07: #263749;
    --art-08: #c98a0f;
    --art-09: rgba(11, 110, 168, 0.25);
    --art-10: rgba(201, 138, 15, 0.25);
    --art-11: rgba(21, 122, 82, 0.25);
    --art-12: rgba(22, 32, 44, 0.07);
    --art-13: rgba(22, 32, 44, 0.04);
    --art-14: rgba(22, 32, 44, 0.02);
    --art-15: rgba(22, 32, 44, 0.5);
    --art-16: rgba(22, 32, 44, 0.16);
    --art-17: rgba(22, 32, 44, 0.1);
    --art-18: rgba(201, 138, 15, 0.55);
    --fg-01: rgba(22, 31, 41, 0.75);
    --fg-02: rgba(22, 31, 41, 0.78);
    --fg-03: rgba(22, 31, 41, 0.6);
    --fg-04: #161f29;
    --fg-05: #9a6510;
    --logo-filter: none;
    color-scheme: light;
}

:root[data-theme="light"] body { background: var(--bg-0); color: var(--text); }
:root[data-theme="light"] .pill-nav { background: rgba(255, 255, 255, 0.82); border-color: var(--line-mid); box-shadow: 0 10px 34px rgba(18, 48, 79, 0.10); }
:root[data-theme="light"] .pill-nav ul a { color: var(--text-soft); }
:root[data-theme="light"] .kicker { background: rgba(217, 150, 46, 0.10); border-color: rgba(217, 150, 46, 0.38); }
:root[data-theme="light"] .site-footer { background: var(--bg-1); border-top: 1px solid var(--line-soft); }

/* --- the two hero grounds are radial gradients built from dark literals ---- */
/* Heroes and artwork follow the theme: the SVG recolouring block at the end of
   this file re-tints every blueprint line, ground and glow for a light ground. */
:root[data-theme="light"] .hero { background: radial-gradient(120% 90% at 50% -10%, #ffffff 0%, #eef2f7 45%, var(--bg-0) 100%); }
:root[data-theme="light"] .oem-hero { background: radial-gradient(130% 80% at 50% -10%, #ffffff 0%, #edf1f7 42%, var(--bg-0) 100%); }
:root[data-theme="light"] .hero::after { background: linear-gradient(180deg, rgba(244, 246, 249, 0) 55%, #f4f6f9 100%); }
:root[data-theme="light"] .about-hero::after { background: linear-gradient(180deg, rgba(244, 246, 249, 0) 60%, #f4f6f9 100%); }

/* --- decorative artwork keeps its dark ground in both themes --------------- */
/* --- shadows are tuned for a dark ground; soften them on light ------------- */
:root[data-theme="light"] .btn-primary { box-shadow: 0 8px 22px rgba(217, 150, 46, 0.35); }
:root[data-theme="light"] .btn-primary:hover { box-shadow: 0 14px 30px rgba(217, 150, 46, 0.42); }

/* ==================== light theme - SVG artwork ==========================
   The blueprint artwork is drawn with presentation attributes (fill=, stroke=,
   stop-color=), which carry specificity 0 - so a plain attribute selector
   overrides them without touching a single template. Dark output is unchanged:
   every rule below is scoped to the light theme.

   Grounds are inverted in lightness (so the depth ordering of the panels is
   preserved, not flattened), ink lines are darkened, amber is stepped down to
   #c98a0f so it still reads on a light ground, status colours use the same
   readable variants as the rest of the light palette.
   ======================================================================== */
:root[data-theme="light"] [stroke="#f0b95e"] { stroke: #c98a0f; }
:root[data-theme="light"] [fill="#f0b95e"] { fill: #c98a0f; }
:root[data-theme="light"] [stop-color="#f0b95e"] { stop-color: #c98a0f; }
:root[data-theme="light"] [stroke="#93a5bb"] { stroke: #303d4d; }
:root[data-theme="light"] [stroke="#7fd1a8"] { stroke: #157a52; }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.4)"] { stroke: rgba(21, 32, 43, 0.4); }
:root[data-theme="light"] [fill="#e8eef5"] { fill: #15202b; }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.2)"] { stroke: rgba(21, 32, 43, 0.2); }
:root[data-theme="light"] [fill="#050b14"] { fill: #f1f4f8; }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.8)"] { stroke: rgba(201, 138, 15, 0.8); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.5)"] { stroke: rgba(201, 138, 15, 0.5); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.05)"] { stroke: rgba(21, 32, 43, 0.05); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.25)"] { stroke: rgba(21, 32, 43, 0.25); }
:root[data-theme="light"] [fill="#0d2137"] { fill: #e2e8ef; }
:root[data-theme="light"] [fill="#0a1322"] { fill: #eaeef4; }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.55)"] { stroke: rgba(21, 32, 43, 0.55); }
:root[data-theme="light"] [fill="rgba(7,13,24,0.8)"] { fill: rgba(239, 242, 246, 0.8); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.6)"] { stroke: rgba(201, 138, 15, 0.6); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.3)"] { stroke: rgba(21, 32, 43, 0.3); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.18)"] { stroke: rgba(21, 32, 43, 0.18); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.45)"] { stroke: rgba(201, 138, 15, 0.45); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.04)"] { stroke: rgba(21, 32, 43, 0.04); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.7)"] { stroke: rgba(201, 138, 15, 0.7); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.5)"] { stroke: rgba(21, 32, 43, 0.5); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.35)"] { stroke: rgba(21, 32, 43, 0.35); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.14)"] { stroke: rgba(21, 32, 43, 0.14); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.22)"] { stroke: rgba(21, 32, 43, 0.22); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.4)"] { stroke: rgba(201, 138, 15, 0.4); }
:root[data-theme="light"] [stroke="#cfdcec"] { stroke: #1a2635; }
:root[data-theme="light"] [stop-color="#0e2440"] { stop-color: #dee5ed; }
:root[data-theme="light"] [stop-color="#071120"] { stop-color: #ecf0f5; }
:root[data-theme="light"] [fill="#d9962e"] { fill: #c98a0f; }
:root[data-theme="light"] [fill="#081221"] { fill: #ebeff4; }
:root[data-theme="light"] [fill="#7fd1a8"] { fill: #157a52; }
:root[data-theme="light"] [fill="#7f9cbd"] { fill: #2d4157; }
:root[data-theme="light"] [fill="rgba(11,20,36,0.7)"] { fill: rgba(233, 237, 243, 0.7); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.35)"] { stroke: rgba(201, 138, 15, 0.35); }
:root[data-theme="light"] [fill="rgba(240,185,94,0.6)"] { fill: rgba(201, 138, 15, 0.6); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.3)"] { stroke: rgba(201, 138, 15, 0.3); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.1)"] { stroke: rgba(48, 61, 77, 0.1); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.12)"] { stroke: rgba(48, 61, 77, 0.12); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.15)"] { stroke: rgba(21, 32, 43, 0.15); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.38)"] { stroke: rgba(21, 32, 43, 0.38); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.85)"] { stroke: rgba(201, 138, 15, 0.85); }
:root[data-theme="light"] [stroke="#e8eef5"] { stroke: #15202b; }
:root[data-theme="light"] [stroke="#46586a"] { stroke: #c0cbd5; }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.07)"] { stroke: rgba(21, 32, 43, 0.07); }
:root[data-theme="light"] [fill="#93a5bb"] { fill: #303d4d; }
:root[data-theme="light"] [fill="#1a4066"] { fill: #ccd8e4; }
:root[data-theme="light"] [fill="#f6e2c0"] { fill: #362c1b; }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.16)"] { stroke: rgba(21, 32, 43, 0.16); }
:root[data-theme="light"] [stroke="rgba(127,209,168,0.4)"] { stroke: rgba(21, 122, 82, 0.4); }
:root[data-theme="light"] [fill="#b7791f"] { fill: #755d3a; }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.4)"] { stroke: rgba(48, 61, 77, 0.4); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.035)"] { stroke: rgba(21, 32, 43, 0.035); }
:root[data-theme="light"] [fill="rgba(240,185,94,0.7)"] { fill: rgba(201, 138, 15, 0.7); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.3)"] { stroke: rgba(48, 61, 77, 0.3); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.16)"] { stroke: rgba(48, 61, 77, 0.16); }
:root[data-theme="light"] [fill="rgba(13,33,55,0.4)"] { fill: rgba(226, 232, 239, 0.4); }
:root[data-theme="light"] [fill="rgba(240,185,94,0.1)"] { fill: rgba(201, 138, 15, 0.1); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.5)"] { stroke: rgba(48, 61, 77, 0.5); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.09)"] { stroke: rgba(48, 61, 77, 0.09); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.11)"] { stroke: rgba(48, 61, 77, 0.11); }
:root[data-theme="light"] [stroke="rgba(147,165,187,0.35)"] { stroke: rgba(48, 61, 77, 0.35); }
:root[data-theme="light"] [stroke="rgba(240,185,94,0.55)"] { stroke: rgba(201, 138, 15, 0.55); }
:root[data-theme="light"] [stroke="rgba(232,238,245,0.28)"] { stroke: rgba(21, 32, 43, 0.28); }

/* ---- §N cookie notice banner (P1c-1; restyled R3-1, 2026-09-07) --------
   Informational only: it states a fact and links to the policy. A page-wide bar in
   the site's own vocabulary — pill button, amber link, panel surface (Eason,
   2026-09-07: as wide as the page); it never asks for consent, so the one button
   just closes it. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--panel);
    border-top: 1px solid var(--line-mid);
    box-shadow: 0 -14px 44px rgba(4, 6, 12, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="light"] .cookie-notice {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -14px 44px rgba(18, 48, 79, 0.14);
}
.cookie-notice[hidden] { display: none !important; }
.cookie-notice-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
}
.cookie-notice p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-soft); }
.cookie-notice b { margin-right: .5em; color: var(--text-strong); }
.cookie-notice a {
    margin-left: .4em;
    color: var(--amber-bright);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(240, 185, 94, .45);
    white-space: nowrap;
}
.cookie-notice a:hover { text-decoration-color: currentColor; }
.cookie-notice-close {
    flex: none;
    background: linear-gradient(135deg, var(--accent-fill-a), var(--accent-fill-b));
    color: var(--ink-on-amber);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 11px 22px;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(217, 150, 46, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cookie-notice-close:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(217, 150, 46, 0.45); }
.cookie-notice-close:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; }
@media (max-width: 640px) {
    .cookie-notice-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 18px; }
    .cookie-notice a { white-space: normal; }
    .cookie-notice-close { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-notice-close { transition: none; }
    .cookie-notice-close:hover { transform: none; }
}
.prose-table-scroll { overflow-x: auto; margin: 1rem 0; }
.prose-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.prose-table th, .prose-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(128, 128, 128, .25);
    vertical-align: top;
}
.prose-table th {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}