/* Self-hosted fonts — no font is fetched from a third party. Sora 300 was
   dropped (unused); Inter 700 added (.skip-link was rendering faux-bold). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sora-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sora-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/sora-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/noto-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FDFD}
@font-face{font-family:'Noto Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/noto-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FDFD}
@font-face{font-family:'Noto Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/noto-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FDFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root, :root[data-theme="dark"]{
  --font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Sora',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  --bg:#04060e; --bg-2:#080c1a; --panel:#0b1122;
  --ink:#eaeef8; --muted:#8a93a8;
  --line:rgba(140,160,210,.14);
  --accent:#4de3ff;
  --accent-soft:rgba(77,227,255,.1);
  --accent-border:rgba(77,227,255,.45);
  --btn-ink:#050810;
  --scrim-strong:rgba(4,6,14,.65);
  --scrim-soft:rgba(4,6,14,.25);
  --hover-tint:rgba(77,227,255,.03);
  --control-border:rgba(140,160,210,.62);
  --error-ink:#ff9aa3;
  --error-border:#ff7b86;
  --error-glow:rgba(255,123,134,.16);
  --glass-bar:rgba(7,12,26,.58);
  --glass-bar-top:rgba(7,12,26,.16);
  /* Menus sit over page titles; at .6 the title ghosted through the panel. */
  --glass-panel:rgba(9,13,26,.975);
  --glass-edge:rgba(255,255,255,.3);
  --glass-border:rgba(183,224,255,.2);
  --glass-sheen:linear-gradient(112deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 30%,rgba(77,227,255,.045) 58%,rgba(255,255,255,.08) 100%);
  --glass-filter:blur(24px) saturate(1.8) brightness(.8);
  --glass-ink:#f2f6ff;
  --glass-muted:#c5cfde;
  --glass-shadow:rgba(0,0,0,.34);
  /* Video frames deliberately stay dark in both themes — footage is night-sky. */
  --frame-bg:#04060e;
  --frame-cap:#7deaff;
  --frame-fade:rgba(4,6,14,.92);
  /* Formation gold: the amber of the phoenix in the hero footage. Reserved for
     drone counts and the show strip — the one place the page raises its voice. */
  --formation-gold:#f4c76a;
  --formation-gold-soft:rgba(244,199,106,.14);
  /* Layer scale: nav chrome 60-82, skip link above everything. */
  --z-nav:60; --z-mega:70; --z-nav-scrim:72; --z-nav-panel:78; --z-nav-top:82; --z-skip:1000;
  /* Two section rhythms: a thesis breathes, a list does not. */
  --section-pad:104px; --section-pad-list:72px;
}
:root[data-theme="light"]{
  --bg:#f7f9fc; --bg-2:#ffffff; --panel:#eef2f8;
  --ink:#0b1220; --muted:#5b6474;
  --line:rgba(20,40,80,.12);
  --accent:#006a8e;
  --accent-soft:rgba(0,106,142,.08);
  --accent-border:rgba(0,106,142,.7);
  --btn-ink:#ffffff;
  --scrim-strong:rgba(8,14,28,.6);
  --scrim-soft:rgba(8,14,28,.22);
  --hover-tint:rgba(0,106,142,.04);
  --control-border:rgba(20,40,80,.62);
  --error-ink:#b3202c;
  --error-border:#b3202c;
  --error-glow:rgba(179,32,44,.14);
  --glass-bar:rgba(229,238,248,.6);
  --glass-bar-top:rgba(229,238,248,.22);
  --glass-panel:rgba(247,250,254,.985);
  --glass-edge:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.68);
  --glass-sheen:linear-gradient(112deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.07) 31%,rgba(109,211,255,.08) 58%,rgba(255,255,255,.18) 100%);
  --glass-filter:blur(24px) saturate(1.75) brightness(1.22);
  --glass-ink:#07111f;
  --glass-muted:#3d4a5c;
  --glass-shadow:rgba(15,23,42,.18);
  --formation-gold:#9a6700;
  --formation-gold-soft:rgba(154,103,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.65;font-kerning:normal;font-synthesis-weight:none;overflow-x:hidden;transition:background .35s,color .35s}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;text-wrap:balance}
p,li{overflow-wrap:break-word;text-wrap:pretty}
.mono{font-family:var(--font-mono)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:var(--section-pad) 0}
@media(max-width:640px){:root{--section-pad:64px;--section-pad-list:48px}}
section.list{padding:var(--section-pad-list) 0}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);opacity:.6}
.h2{font-size:clamp(1.75rem,3.2vw,2.375rem);font-weight:800;line-height:1.14;letter-spacing:-.02em}
.h2.thesis{font-size:clamp(1.875rem,4.5vw,3.25rem);line-height:1.12}
.h2.quiet{font-size:clamp(1.375rem,2.2vw,1.625rem);font-weight:700;letter-spacing:-.01em}
.sub{color:var(--muted);max-width:580px;margin-top:18px;font-size:1.03125rem}
.breadcrumb{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:flex;gap:8px;align-items:center}
.breadcrumb a{color:var(--accent)}
/* A number is dialled left to right; in an Arabic line its digit groups would otherwise flip. */
a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
/* The current page (an article's full title, say) keeps to one line. */
.breadcrumb>span:last-child{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* NAV */
.site-nav{position:fixed;top:calc(12px + var(--banner-h,0px));left:max(16px,calc((100vw - 1200px)/2));right:max(16px,calc((100vw - 1200px)/2));z-index:var(--z-nav);background:transparent;border:1px solid var(--glass-border);border-radius:999px;box-shadow:0 12px 36px var(--glass-shadow),inset 0 1px 0 var(--glass-edge);transition:border-color .3s ease,box-shadow .3s ease}
.site-nav:not(.frosted):not(.menu-open):not(:has(.nav-item.open))::before{background:var(--glass-sheen),var(--glass-bar-top)}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass-sheen),var(--glass-bar);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border-radius:inherit;box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(255,255,255,.08);transition:background .3s ease}
.site-nav::after{content:"";position:absolute;inset:1px;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 28% 130% at 8% -35%,rgba(255,255,255,.38),transparent 68%),radial-gradient(ellipse 34% 150% at 78% 145%,rgba(77,227,255,.18),transparent 70%),linear-gradient(105deg,transparent 18%,rgba(255,255,255,.11) 39%,transparent 60%);background-size:145% 120%,135% 145%,160% 100%;mix-blend-mode:screen;opacity:.7;animation:liquid-caustic 10s ease-in-out infinite alternate}
@keyframes liquid-caustic{from{background-position:0 0,100% 100%,-25% 0;opacity:.55}to{background-position:9% 5%,88% 92%,35% 0;opacity:.78}}
.nav-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding-block:8px;padding-inline:18px 12px;display:flex;align-items:center;justify-content:space-between;gap:18px}
/* Light theme, bar floating over the dark hero: the ink, border and accent
   all flip for a dark backdrop — and so must the fill *inside* a control.
   Leaving --glass-ctl at the light theme's 55% white put near-white ink
   and a bright cyan label on a near-white pill: 1.4:1 for "Book now".
   The bar and the buttons on it are one surface; they flip together. */
:root[data-theme="light"] body:has(.hero) .site-nav:not(.frosted):not(.menu-open):not(:has(.nav-item.open)){--glass-ink:#f5fbff;--glass-muted:#dceeff;--glass-bar-top:rgba(8,27,50,.34);--glass-border:rgba(220,245,255,.62);--glass-edge:rgba(255,255,255,.82);--glass-filter:blur(18px) saturate(2) brightness(.66);--accent:#67e9ff;--accent-soft:rgba(103,233,255,.14);--accent-border:rgba(103,233,255,.6);--control-border:rgba(220,245,255,.45);--glass-ctl:rgba(6,20,38,.32);--glass-ctl-strong:rgba(6,20,38,.48);--glass-shine:rgba(255,255,255,.26);text-shadow:0 1px 12px rgba(0,10,28,.46)}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.1875rem;letter-spacing:.04em;white-space:nowrap;flex:none}
.logo svg{display:block;height:21px;width:auto}
.site-nav .logo,.site-nav :is(.theme-toggle,.menu-toggle){color:var(--glass-ink)}
.nav-links{display:flex;gap:22px;font-size:.875rem;font-weight:600;color:var(--glass-muted)}
.nav-links a{transition:color .2s;white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--glass-ink)}
.nav-links a.active{color:var(--accent);border-color:var(--accent)}
.cta{font-size:.875rem;font-weight:600;padding:10px 19px;border:1px solid var(--accent-border);border-radius:999px;color:var(--accent);transition:.25s;white-space:nowrap}
.cta:hover,.cta:focus-visible{background:var(--accent-soft)}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--control-border);background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;flex:none}
.theme-toggle:hover{border-color:var(--accent-border);color:var(--accent)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* The button shows the mode in force: automatic (follows the device), light or dark. */
.theme-toggle :is(.icon-sun,.icon-moon,.icon-auto){display:none}
[data-theme-mode="auto"] .theme-toggle .icon-auto,[data-theme-mode="light"] .theme-toggle .icon-sun,[data-theme-mode="dark"] .theme-toggle .icon-moon{display:block}

/* MOBILE MENU TOGGLE (hamburger) */
.menu-toggle{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--control-border);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex:none;transition:.25s}
.menu-toggle:hover{border-color:var(--accent-border)}
.menu-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.menu-toggle .icon-close{display:none}
.menu-toggle.open .icon-burger{display:none}
.menu-toggle.open .icon-close{display:block}



@media(max-width:480px){
  .nav-in{padding:12px 16px}
  .cta{padding:9px 14px;font-size:.75rem}
  .logo{font-size:1.0625rem}
}


/* HERO (full, video) */
/* HOME HERO — two screens. Screen 1 (.hero-stage) is the show video alone;
   the headline, copy and actions follow as their own block (.hero), so the
   first thing a visitor sees is the performance and the words arrive on
   scroll. The block stays night-palette in BOTH themes: its type is tuned
   for the video frame, not for the page background. */
.hero-stage{position:relative;height:100svh;overflow:hidden;background:#04060e}
.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The build paints each clip's poster as a real <picture> under its <video>: an <img> is
   the page's LCP at first paint (a poster= attribute was not, so the cookie bar was), it
   loads lazily below the fold, and phones get a WebP or a portrait crop. */
.vposter,.vposter img{position:absolute;inset:0;width:100%;height:100%}
.vposter img{object-fit:cover}
.vframe video{position:relative}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--scrim-strong) 0%,transparent 28%,transparent 72%,#04060e 100%)}
.hero-cue{position:absolute;left:50%;bottom:26px;z-index:2;width:30px;height:30px;margin-left:-15px;color:#f2f5fc;opacity:.75;animation:hero-cue 2.4s ease-in-out infinite}
.hero-cue svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes hero-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
.hero{position:relative;padding:clamp(88px,13vh,150px) 0;background:#04060e radial-gradient(ellipse 70% 90% at 22% 55%,#0d1730,transparent)}
/* Phones: a shorter stage, so the headline starts on the first screen under the footage. */
@media(max-width:700px){.hero-stage{height:50svh}.hero{padding-top:32px}}
.hero-in{position:relative;z-index:2}
.hero .tag{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#cdd6e8;margin-bottom:22px;display:flex;gap:18px;flex-wrap:wrap;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero .tag b{color:#7deaff;font-weight:400}
.hero h1{font-size:clamp(2.5rem,6.8vw,5.375rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;max-width:17ch;color:#f2f5fc;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 .lit{color:#7deaff}
.hero h1 .nowrap-line{white-space:nowrap;display:inline-block}
/* 17ch and the unbreakable lines above are calibrated to the English
   headline. A language that says the same thing in twice the characters
   must be allowed to wrap and to use more of the column, or it runs off
   the side of the page — off the LEFT edge in Arabic, where it is not
   even obvious that something is missing. Chinese is compact enough that
   nothing here changes what it renders. */
html:not([lang="en"]) .hero h1{max-width:24ch;font-size:clamp(2.25rem,5.2vw,4.25rem)}
html:not([lang="en"]) .hero h1 .nowrap-line{white-space:normal;display:inline}
.hero p{margin-top:24px;max-width:560px;color:#c3cbdd;font-size:1.03125rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* PAGE HERO (compact, no video — for sub-pages) */
.page-hero{padding:170px 0 70px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.page-hero .code{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);letter-spacing:.16em}
@media(max-width:640px){.page-hero{padding:120px 0 50px}}

.btn{font-family:var(--font-display);font-weight:600;font-size:.90625rem;line-height:1.35;padding:15px 30px;border-radius:999px;transition:.25s;display:inline-block}
.btn-primary{background:var(--accent);color:var(--btn-ink)}
.btn-primary:hover{box-shadow:0 12px 34px var(--accent-soft)}
.hero .btn-ghost{border:1px solid rgba(255,255,255,.35);color:#f2f5fc}
.hero .btn-ghost:hover{border-color:#7deaff}
.btn-ghost{border:1px solid var(--control-border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent-border)}
/* TELEMETRY */
.telemetry{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.telemetry .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tcell{min-width:0;padding:34px 24px 32px;text-align:start;border-inline-start:1px solid var(--line)}
.tcell:first-child{border-inline-start:none}
.tcell .num{font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.tcell .num em{font-style:normal;color:var(--accent);font-size:.6em;vertical-align:super}
.tcell .lbl{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:760px){.telemetry .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.tcell:nth-child(3){border-inline-start:none}}


.alt{--card-fill:var(--panel);background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}


/* CATALOG */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.filter-btn{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border:1px solid var(--control-border);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;transition:.2s}
.filter-btn:hover{color:var(--ink);border-color:var(--accent-border)}
.filter-btn.active{color:var(--btn-ink);background:var(--accent);border-color:transparent}
.cat-list{margin-top:44px;border-top:1px solid var(--line)}
.cat-row{display:grid;grid-template-columns:104px 1.15fr 1.9fr 150px;gap:24px;align-items:center;padding:24px 6px;border-bottom:1px solid var(--line);transition:.25s}
.cat-row.hide{display:none}
.cat-row .idx{font-family:var(--font-mono);color:var(--muted);font-size:.75rem;letter-spacing:.14em}
.cat-row .name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,2vw,1.375rem);line-height:1.3;letter-spacing:-.01em}
.cat-row .desc{color:var(--muted);font-size:.9375rem}
.cat-row .chip{justify-self:end;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--accent);white-space:nowrap}
@media(max-width:860px){.cat-row{grid-template-columns:1fr;gap:7px}.cat-row .chip{justify-self:start}}




/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.astat{background:var(--bg);padding:30px 26px}
.astat .n{font-family:var(--font-display);font-weight:800;font-size:1.75rem;font-variant-numeric:lining-nums tabular-nums}
.astat .n span{color:var(--accent)}
.astat .l{font-size:.78125rem;color:var(--muted);margin-top:6px}
.about p.body{color:var(--muted);margin-top:20px;font-size:.96875rem}
.honors{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.honor{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px}}


/* CONTACT */
.contact-hero{background:radial-gradient(ellipse 70% 90% at 50% 110%,var(--accent-soft),transparent 60%),var(--bg-2);border-top:1px solid var(--line);text-align:center}
.contact-hero .h2{max-width:22ch;margin:0 auto;font-size:clamp(1.875rem,4vw,3rem)}
.contact-hero .sub{margin:18px auto 0;text-align:center}
.contact-hero .btn-primary{margin-top:38px}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:1px;margin-top:56px}
.contact-card{box-shadow:var(--card-shadow);background:var(--bg-2);padding:36px 32px}
.contact-card .code{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);letter-spacing:.16em}
.contact-card h4,.contact-card .contact-card-title{font-size:1.1875rem;font-weight:700;margin:12px 0 10px}
.contact-card p{font-size:.9375rem;color:var(--muted);margin-bottom:6px}
.contact-card a{color:var(--accent)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* The form stops on the contact grid's centre line rather than on an arbitrary
   width: 50% of the wrap is exactly where the two cards above meet, so the
   short right edge reads as an alignment instead of a truncation. A form field
   the full 1152px would be unusable, which is why it is capped at all. Below
   760px the cards stack full-width and the form follows them. */
.form-grid{margin-top:56px;display:grid;gap:16px;max-width:50%;container-type:inline-size}
@media(max-width:760px){.form-grid{max-width:none}}
.form-grid label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
/* Required fields: the mark is visual only — the field's own `required` is what is announced. */
.form-grid label:has(+ [required])::after{content:" *";content:" *" / "";color:var(--accent)}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;background:var(--panel);border:1px solid var(--control-border);border-radius:6px;padding:13px 15px;color:var(--ink);font-family:var(--font-body);font-size:.90625rem}
.form-grid textarea{min-height:120px;resize:vertical}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Paired fields split on the FORM's width, not the viewport's: the form is half
   the wrap, so a viewport rule would have to guess at the result. Under 560px of
   form, two fields side by side leave ~200px each — too tight to type a company
   name into — so they stack instead. */
@container (max-width:560px){.form-row2{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:38px 0;font-size:.78125rem;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}

.js .reveal{opacity:0;transform:translateY(30px) scale(.975);filter:blur(5px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.on{opacity:1;transform:none;filter:none}
/* A page's title is its LCP: it is there at first paint, not after the script and a 0.9s fade. */
.js :is(.page-hero,.hero) .reveal{opacity:1;transform:none;filter:none;transition:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;filter:none}}


/* ============ ARCHITECTURE BUILD — additions ============ */

/* MEGA NAV */
.nav-item{position:static}
.nav-item>a{display:inline-block;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s}
.nav-item>a:hover{color:var(--glass-ink)}
.nav-item.active>a{color:var(--accent);border-color:var(--accent)}
.mega{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:var(--z-mega);
  background:var(--glass-panel);
  -webkit-backdrop-filter:blur(34px) saturate(1.8);backdrop-filter:blur(34px) saturate(1.8);
  border:1px solid var(--glass-border);border-radius:24px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 24px 56px var(--glass-shadow),inset 0 1px 0 var(--glass-edge);
}
.site-nav.menus-dismissed .mega{opacity:0!important;visibility:hidden!important;transform:translateY(-6px)!important}
.mega-in{max-width:1200px;margin:0 auto;padding:32px 24px 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,210px));gap:30px;align-items:start;justify-content:start}
.mega-h{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
@media(max-width:1080px){.nav-item>a{width:100%;color:var(--ink)}}


/* VIDEO SLOT (to be filled with generated footage) */
.vslot{margin-top:52px;position:relative;border:1px solid var(--line);border-radius:4px;background:radial-gradient(ellipse 80% 100% at 50% 120%,var(--accent-soft),transparent 60%),var(--bg-2);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.vslot .code{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vslot .slot-h{color:var(--muted);font-size:1.125rem;font-weight:700;margin:10px 0 6px}
.vslot p{font-size:.8125rem;color:var(--muted);font-family:var(--font-mono);opacity:.65}
.vframe{margin-top:52px;position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--frame-bg)}
.vframe video{width:100%;max-height:520px;object-fit:cover}
/* Pause / play for a looping clip (WCAG 2.2.2), added by app.js once the clip loads. */
.vtoggle{position:absolute;top:14px;inset-inline-end:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(4,6,14,.55);color:#f2f5fc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.vtoggle:hover{border-color:#7deaff}
.vtoggle:focus-visible{outline:2px solid #7deaff;outline-offset:2px}
.vtoggle svg{width:16px;height:16px;fill:currentColor}
.hero-stage .vtoggle{top:auto;bottom:22px}
.vframe .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;background:linear-gradient(transparent,var(--frame-fade));font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frame-cap)}
/* The frame is dark in both themes (night footage), so the note takes the frame's own caption colour. */
.vframe .cap-note{color:var(--frame-cap);opacity:.62;font-weight:400}
.vframe .cap-note::before{content:'·';margin:0 10px;opacity:.7}

/* CARD GRID (products & topics) */
.card-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard{background:var(--card-fill);padding:30px 28px 28px;display:flex;flex-direction:column;box-shadow:var(--card-shadow);transition:box-shadow .3s}
.pcard .code{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);letter-spacing:.16em}
.pcard h3{font-weight:700}
.pcard p{font-size:.9375rem;color:var(--muted);flex:1}
/* Direction C. A tile is a door: title, one line, a corner arrow — the card itself
   is the target, so no "Read more" line. Section indexes lead with one tile that
   carries the section's own footage still; the rest stay compact. */
.pcard{position:relative;gap:10px;overflow:hidden}
.pcard h3{font-size:1.1875rem;line-height:1.28;letter-spacing:-.01em;margin:0}
.pcard .code+h3{margin-top:6px}
.pcard p{margin:0;font-size:.9375rem;line-height:1.55}
.pcard .go{display:none}
.pcard h3::after{content:"";display:inline-block;width:15px;height:15px;margin-inline-start:10px;vertical-align:-2px;background:var(--accent);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTQuNSAxMmgxNC42TTEzLjQgNi4ybDUuOCA1LjgtNS44IDUuOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") no-repeat center/contain;mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTQuNSAxMmgxNC42TTEzLjQgNi4ybDUuOCA1LjgtNS44IDUuOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") no-repeat center/contain;transition:transform .35s var(--spring)}
html[dir="rtl"] .pcard h3::after{transform:scaleX(-1)}
/* The rule the corner arrow used to be: a 3px accent edge that draws in. */
.pcard::after{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--spring)}
html[dir="rtl"] .pcard::after{transform-origin:right center}
.pcard:hover h3,.pcard:focus-visible h3{color:var(--accent)}
.pcard:hover::after,.pcard:focus-visible::after{transform:scaleX(1)}
.pcard:hover h3::after,.pcard:focus-visible h3::after{transform:translateX(4px)}
html[dir="rtl"] .pcard:hover h3::after,html[dir="rtl"] .pcard:focus-visible h3::after{transform:scaleX(-1) translateX(4px)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* lead tile */
.card-grid.lead-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
.card-grid.lead-grid .pcard:not(.lead){min-height:150px}
/* Six entries = lead (2 rows) + 5: the last one would orphan on a third row, so it
   closes the block full-width. Every section index has six today; with five it is
   a clean 2×2 and the rule does nothing. */
.card-grid.lead-grid .pcard:last-child:nth-child(2n){grid-column:1/-1;flex-direction:row;align-items:baseline;gap:18px;min-height:0;padding:18px 22px}
.card-grid.lead-grid .pcard:last-child:nth-child(2n) h3{flex:0 0 auto}
.card-grid.lead-grid .pcard:last-child:nth-child(2n) p{flex:1}
.pcard.lead{grid-row:span 2;justify-content:flex-end;gap:8px;padding:30px 30px 28px;min-height:340px;background:#04060e;color:#f2f5fc;overflow:hidden}
.pcard.lead .lead-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.2s var(--spring)}
.pcard.lead:hover .lead-img{transform:scale(1.03)}
.pcard.lead .lead-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(4,6,14,.05) 30%,rgba(4,6,14,.88) 100%)}
.pcard.lead>:not(.lead-img):not(.lead-scrim){position:relative;z-index:1}
.pcard.lead h3{font-size:clamp(1.5rem,2.4vw,1.875rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#f2f5fc}
.pcard.lead:hover h3{color:#fff}
.pcard.lead p{color:#c3cbdd;max-width:34ch;flex:0 0 auto}
.pcard.lead::after{background:#7deaff}
.pcard.lead h3::after{background:#7deaff}
.pcard.lead .cap-note{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#7deaff;opacity:.72;margin-top:6px}
@media(max-width:940px){.card-grid,.card-grid.four,.card-grid.lead-grid{grid-template-columns:1fr 1fr}.pcard.lead{grid-column:1/-1;grid-row:auto;min-height:260px}}
@media(max-width:620px){
  .card-grid,.card-grid.four,.card-grid.two,.card-grid.lead-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .pcard{padding:18px 18px 16px}
  .pcard.lead{min-height:240px;padding:22px 20px;grid-column:auto}
  .card-grid.lead-grid .pcard:last-child:nth-child(2n){flex-direction:column;align-items:stretch;gap:6px;padding:18px 18px 16px}
  .card-grid.lead-grid .pcard:last-child:nth-child(2n) h3{padding-inline-end:30px}
}

/* SPEC TABLE */
.spec-table{margin-top:40px;border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:16px 6px;border-bottom:1px solid var(--line)}
.spec-row dt{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec-row dd{font-size:.9375rem;font-variant-numeric:lining-nums tabular-nums}
.spec-note{margin-top:18px;font-size:.78125rem;color:var(--muted)}
@media(max-width:640px){.spec-row{grid-template-columns:1fr;gap:4px}}

/* TWO COLUMN COPY */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.split ul{list-style:none;display:grid;gap:10px;margin-top:6px}
.split li{font-size:.9375rem;color:var(--muted);padding-inline-start:18px;position:relative}
.split li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:6px;height:6px;background:var(--accent);border-radius:50%}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* LINK LIST */
.linklist{margin-top:40px;border-top:1px solid var(--line)}
.linkrow{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:center;padding:20px 6px;border-bottom:1px solid var(--line);transition:.25s}
.linkrow .idx{font-family:var(--font-mono);color:var(--muted);font-size:.75rem;letter-spacing:.14em}
.linkrow .name{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.3}
.linkrow .desc{color:var(--muted);font-size:.9375rem;margin-top:3px}
.linkrow .chip{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--accent);white-space:nowrap}
@media(max-width:760px){.linkrow{grid-template-columns:1fr;gap:6px}.linkrow .chip{justify-self:start}}





/* ============ GENERATED SITE SHELL ============ */
.skip-link{position:fixed;top:10px;left:12px;z-index:var(--z-skip);padding:10px 14px;border-radius:6px;background:var(--accent);color:var(--btn-ink);font-weight:700;transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.site-nav{isolation:isolate}
.site-nav .nav-in{min-height:70px}
.nav-panel{min-width:0}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-mobile-actions{display:none}
.nav-expand{width:28px;height:44px;border:0;background:transparent;color:var(--glass-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s ease,transform .18s ease}
.nav-expand:hover,.nav-expand:focus-visible,.nav-item.open .nav-expand{color:var(--accent)}
.nav-expand svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item.open .nav-expand{transform:rotate(180deg)}
.nav-scrim{display:none}
.mega-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.mega-group-head,.mega-group-links{display:contents}
.mega-group-toggle{display:none}
.mega-group .mega-h{display:block;padding:0;border:0;color:var(--ink);font-size:.78125rem;font-weight:700;line-height:1.45;white-space:normal}
/* Stack rhythm matches the column gap below, so a column of mixed stacks and
   groups reads as one continuous list instead of a list with holes in it. */
.mega-stack{gap:18px}
.mega-colwrap{display:contents}
.mega-group .mega-group-links>a{padding:0;border:0;color:var(--muted);font-size:.875rem;line-height:1.5;white-space:normal}
.mega-group a:hover,.mega-group a:focus-visible{color:var(--accent)}
.nav-status{font-family:var(--font-mono);font-size:.75rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media(min-width:1081px){
  .site-nav .nav-links{align-items:center;gap:12px}
  .site-nav .nav-item{display:flex;align-items:center;position:static}
  .site-nav .nav-item>a{padding:12px 2px}
  .site-nav .mega{max-height:calc(100dvh - 98px);overflow-y:auto}
  .site-nav .mega-in{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px 36px}
  .site-nav .mega-colwrap{display:flex;flex-direction:column;gap:18px}
  /* A group note belongs to the head above it, not to the list rhythm. */
  .site-nav .mega-stack .nav-status{margin-top:-10px}
  .site-nav .nav-item.open .mega{opacity:1;visibility:visible;transform:none}
  /* Hover corridor: bridges the bar padding below an open item so pointer
     travel into the panel never counts as leaving the menu. */
  .site-nav .nav-item.open::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
}


.media-placeholder{width:100%;height:100%;min-height:240px;display:flex;align-items:center;justify-content:center;gap:22px;padding:32px;border:1px dashed var(--accent-border);border-radius:6px;background:radial-gradient(circle at 50% 120%,var(--accent-soft),transparent 64%),var(--bg-2);color:var(--muted);text-align:start}
.media-placeholder>svg{width:50px;height:50px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.media-placeholder .code,.coming-soon .code{display:block;margin-bottom:7px;color:var(--accent);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.media-placeholder strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.125rem;font-weight:700;line-height:1.3}
.media-placeholder p{margin-top:5px;color:var(--muted);font-size:.875rem}
.sourced-product-media{width:100%;height:100%;display:block;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.08),transparent 58%),var(--bg-2);box-shadow:inset 0 1px 0 var(--glass-edge)}
.sourced-product-media[data-source-id="efy-show-products"]{background:#03050b}
.sourced-product-media img{width:100%;height:100%;object-fit:contain;padding:clamp(10px,2vw,24px)}
.sourced-product-media.source-native-small{display:flex;align-items:center;justify-content:center}
.sourced-product-media.source-native-small img{width:min(100%,var(--source-native-width));height:auto;max-height:100%}
/* A generated product visualisation: full-frame still, captioned as such. It borrows the
   sourced-media frame so the page layout does not change when a real photo replaces it. */
.vis-media{position:relative;aspect-ratio:16/9;background:#04060e}
.vis-media img{object-fit:cover;padding:0}
.vis-media figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;background:linear-gradient(transparent,rgba(4,6,14,.82));font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.vis-media .cap-note{color:var(--frame-cap);opacity:.85}
.spec-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.vslot.coming-soon{gap:20px;text-align:start;aspect-ratio:auto;min-height:280px}
/* The home is the only page with a .hero. A slot that has no footage yet stays
   in the build's inventory but is not shown to visitors on the front page. */
body:has(.hero) .vslot.coming-soon{display:none}
.coming-soon-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent-border);border-radius:50%;color:var(--accent);flex:none}
.coming-soon-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.vslot.coming-soon .slot-h{margin:0 0 4px;color:var(--ink)}
.vslot.coming-soon p{opacity:1;font-family:var(--font-body);font-size:.875rem;line-height:1.6}

.form-grid input,.form-grid select,.form-grid textarea{min-height:48px;font-size:1rem;transition:border-color .18s ease,box-shadow .18s ease}
.form-grid textarea{min-height:132px}
.form-grid :is(input,select,textarea){scroll-margin-top:84px}
.form-grid [aria-invalid="true"]{border-color:var(--error-border);box-shadow:0 0 0 2px var(--error-glow)}
.form-error{display:block;margin-top:6px;color:var(--error-ink);font-size:.8125rem}
.form-status{margin-top:8px;padding:12px 14px;border-inline-start:2px solid var(--accent);background:var(--accent-soft);color:var(--ink);font-size:.875rem}
.form-fallback{color:var(--muted);font-size:.8125rem}
.form-fallback a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.foot-links{font-size:.75rem;letter-spacing:.1em}

@media(max-width:1080px){
  body.nav-open{overflow:hidden}
  .site-nav{top:calc(10px + var(--banner-h,0px));left:12px;right:12px}
  /* Like the desktop panel (--glass-panel .975): the sheet must be near
     opaque — at .48 the page's own text stayed readable through the blur
     and collided with the menu rows. */
  .site-nav.menu-open{--mobile-menu-bg:rgba(8,22,42,.97);--mobile-menu-sheen:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 34%,rgba(77,227,255,.09) 68%,rgba(255,255,255,.11));--glass-ink:#f5fbff;--glass-muted:#eef8ff;--glass-border:rgba(220,245,255,.42);--glass-edge:rgba(255,255,255,.62);--glass-shadow:rgba(0,7,20,.46);--ink:#f5fbff;--muted:#cce0ef;--line:rgba(220,245,255,.16);--accent:#67e9ff;--accent-soft:rgba(103,233,255,.12);--accent-border:rgba(103,233,255,.58);--control-border:rgba(220,245,255,.42);--scrim-strong:rgba(1,7,18,.34);border-color:transparent;box-shadow:none;text-shadow:0 1px 12px rgba(0,7,20,.48)}
  .site-nav.menu-open::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .site-nav.menu-open::after{opacity:0;animation:none}
  .site-nav .nav-in{padding:7px 9px 7px 16px;min-height:62px}
  .site-nav.menu-open .nav-in{z-index:var(--z-nav-panel)}
  .site-nav .logo,.site-nav .nav-actions{position:relative;z-index:var(--z-nav-top)}
  .site-nav .desktop-theme,.site-nav .desktop-cta{display:none}
  .site-nav .menu-toggle{display:flex;width:44px;height:44px}
  .site-nav .nav-panel{position:fixed;top:12px;right:12px;bottom:12px;z-index:var(--z-nav-panel);isolation:isolate;width:min(calc(100vw - 24px),420px);padding:78px 22px 28px;background:var(--mobile-menu-sheen,var(--glass-sheen)),var(--mobile-menu-bg,var(--glass-panel));-webkit-backdrop-filter:blur(32px) saturate(2.1) brightness(.72);backdrop-filter:blur(32px) saturate(2.1) brightness(.72);border:1px solid var(--glass-border);border-radius:28px;box-shadow:0 28px 80px var(--glass-shadow),inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(255,255,255,.1);transform:translateX(calc(100% + 24px));visibility:hidden;overflow-y:auto;transition:transform .24s cubic-bezier(.16,1,.3,1),visibility .24s}
  .site-nav .nav-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 72% 34% at 12% 2%,rgba(255,255,255,.3),transparent 72%),radial-gradient(ellipse 65% 46% at 92% 88%,rgba(77,227,255,.18),transparent 70%),linear-gradient(155deg,transparent 20%,rgba(255,255,255,.1) 45%,transparent 68%);background-size:145% 135%,140% 150%,170% 145%;mix-blend-mode:screen;opacity:.68;animation:liquid-caustic 10s ease-in-out infinite alternate}
  .site-nav .nav-panel>:is(.nav-links,.nav-mobile-actions){position:relative;z-index:1}
  .site-nav .nav-panel.open{transform:none;visibility:visible}
  .site-nav .nav-links{position:static;inset:auto;height:auto;padding:0;overflow:visible;opacity:1;visibility:visible;pointer-events:auto;background:transparent;display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-nav .nav-links::after{display:none}
  .site-nav .nav-item{display:grid;grid-template-columns:minmax(0,1fr) 44px;width:100%;border-bottom:1px solid var(--line)}
  .site-nav .nav-item>a{grid-column:1;padding:15px 4px;font-size:1rem;line-height:1.4;border:0;white-space:normal}
  .site-nav .nav-expand{grid-column:2;grid-row:1;width:44px;height:52px}
  .site-nav .mega{grid-column:1/-1;position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;max-height:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-nav .nav-item.open .mega{display:block}
  .site-nav .mega-in{display:grid;grid-template-columns:1fr;gap:8px;padding:8px 0 14px}
  .site-nav .mega-colwrap{display:contents}
  .site-nav .mega-group{gap:0;padding:0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(77,227,255,.025));overflow:hidden;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
  .site-nav .mega-group.group-open{border-color:var(--accent-border);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(77,227,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .site-nav .mega-group-head{display:flex;align-items:center;min-width:0}
  .site-nav .mega-group-head .mega-h,.site-nav .mega-stack>.mega-h{min-height:48px;display:flex;align-items:center;flex:1;padding:10px 14px;font-size:.8125rem;letter-spacing:.12em}
  .site-nav .mega-group-toggle{display:flex;width:48px;height:48px;flex:none;align-items:center;justify-content:center;border:0;border-inline-start:1px solid var(--line);background:transparent;color:var(--glass-muted);cursor:pointer;transition:color .2s ease,transform .2s ease}
  .site-nav .mega-group-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .site-nav .mega-group.group-open .mega-group-toggle{color:var(--accent);transform:rotate(180deg)}
  .site-nav .mega-group-links{display:flex;flex-direction:column;gap:0;padding:0 12px 12px}
  .site-nav .mega-group-links[hidden]{display:none}
  .site-nav .mega-group-links .nav-status{padding:0 10px 8px}
  .site-nav .mega-stack>.nav-status{padding:0 14px 8px}
  .site-nav .mega-group .mega-group-links>a{min-height:44px;display:flex;align-items:center;padding:8px 10px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.45}
  .site-nav .mega-stack{gap:0}
  .nav-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:24px}
  .nav-mobile-actions .theme-toggle{width:100%;height:48px;border-radius:999px;gap:10px}
  .nav-mobile-actions .theme-toggle span{display:inline;font-size:.875rem}
  .nav-mobile-actions .cta{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:.875rem}
  .site-nav .nav-scrim{display:block;position:fixed;inset:0;z-index:var(--z-nav-scrim);border:0;background:var(--scrim-strong);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
  .site-nav.menu-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto}
}

@media(max-width:720px){
  .site-nav .nav-panel{left:12px;right:12px;width:auto}
  .wrap{padding-left:20px;padding-right:20px}
  .hero h1 .nowrap-line{display:inline;white-space:normal}
  .hero h1{font-size:clamp(2.375rem,12vw,3.625rem);max-width:11ch}
  .hero-actions{align-items:stretch}
  .hero-actions .btn{width:100%;text-align:center}
  .breadcrumb{flex-wrap:wrap;line-height:1.6}
  .media-placeholder{min-height:220px;flex-direction:column;text-align:center;padding:28px 20px}
  .vslot.coming-soon{min-height:240px;flex-direction:column;text-align:center}
  .pcard p,.cat-row .desc,.linkrow .desc,.contact-card p,.split li,.media-placeholder p,.vslot.coming-soon p,.spec-row dd,.form-status{font-size:1rem;line-height:1.6}
  .spec-note,.form-error,.form-fallback{font-size:.875rem;line-height:1.5}
  .foot-in{align-items:flex-start}
  .foot-links{gap:12px 18px}
}

@media(max-width:420px){
  .site-nav{left:10px;right:10px}
  .site-nav .nav-in{padding-inline:14px 8px}
  .site-nav .logo{font-size:1.0625rem}
  .site-nav .nav-panel{left:10px;right:10px;width:auto;padding-left:18px;padding-right:18px}
  .nav-mobile-actions{grid-template-columns:1fr}
  .wrap{padding-left:16px;padding-right:16px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(prefers-reduced-transparency:reduce){
  .site-nav::before,.mega,.site-nav .nav-panel,.btn,.cta,.filter-btn,.lang-switch,.form-grid input,.form-grid select,.form-grid textarea,.reach-box,.reach-pill,.reach-scrim{-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-nav::before{background:var(--bg-2)}
  .mega,.site-nav .nav-panel{background:var(--bg-2)}
  .site-nav.menu-open .nav-panel{background:#0b1b30}
  .btn:not(.btn-primary),.cta,.filter-btn,.lang-switch,.reach-pill{background-color:var(--panel)}
  .form-grid input,.form-grid select,.form-grid textarea{background:var(--bg-2)}
  .reach-box{background:var(--bg-2)}
  .site-nav::after,.site-nav .nav-panel::before,.btn::before,.cta::before,.filter-btn::before,.chip::before,.lang-switch::before,.pcard::before,.case::before,.scenario::before,.linkrow::before,.contact-card::before,.reach-market::before,.reach-lang::before,.btn::after,.cta::after{display:none}
}

/* ============ CLEAN PASS — additions ============ */
[id]{scroll-margin-top:96px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* PAGER RAIL — the one page ending. A compact hairline rail: previous · where
   you are · next, walking the menu's own order. Arrows are stroke SVGs from
   the nav-chevron family; the previous side mirrors them, RTL mirrors again. */
.pager-rail{padding:64px 0 48px}
.rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 4px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rail-side{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.rail-next{justify-content:flex-end}
.rail-side .code{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.rail-side strong{font-family:var(--font-display);font-size:1rem;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.rail-side:hover strong,.rail-side:focus-visible strong{color:var(--accent)}
.rail-side:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rail-side svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--spring)}
.rail-prev svg{transform:scaleX(-1)}
.rail-next:hover svg,.rail-next:focus-visible svg{transform:translateX(4px)}
.rail-prev:hover svg,.rail-prev:focus-visible svg{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .rail-prev svg{transform:none}
html[dir="rtl"] .rail-next svg{transform:scaleX(-1)}
html[dir="rtl"] .rail-prev:hover svg,html[dir="rtl"] .rail-prev:focus-visible svg{transform:translateX(4px)}
html[dir="rtl"] .rail-next:hover svg,html[dir="rtl"] .rail-next:focus-visible svg{transform:scaleX(-1) translateX(4px)}
.rail-ctx{flex:none;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:640px){
  .pager-rail{padding:48px 0 40px}
  .rail{flex-direction:column;align-items:stretch;gap:0;padding:0;border-top:0;border-bottom:0}
  .rail-ctx{display:none}
  .rail-side{border-top:1px solid var(--line);padding:15px 4px}
  .rail-side:last-child{border-bottom:1px solid var(--line)}
}

/* ============ CONTENT IMPORT — sourced sections ============ */
/* Shared grammar: hairline grids (a 1px shadow per tile, so short rows leave no
   empty slab), tiles on --bg-2, mono eyebrows. */
.case,.scenario,.fact,.process li,.honor-card,.solution,.generation{box-shadow:0 0 0 1px var(--line)}
.sourced-media{display:block;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.sourced-media img{display:block;width:100%;height:100%;object-fit:cover}
.section-more{margin-top:34px}
.plain-list{margin:12px 0 0 18px;color:var(--muted);font-size:.9375rem;line-height:1.7}
.h4{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.hero-stats{margin-top:22px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.na{color:var(--muted)}

/* Show cases */
.case-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.case{background:var(--bg-2);display:flex;flex-direction:column;min-width:0;transition:background .3s}
.case:hover{background:var(--panel)}
.case .case-media{border:0;border-radius:0;aspect-ratio:16/9;background:var(--bg)}
.case-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.case-count{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display)}
.case-count strong{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--accent)}
.case-count span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case h3,.case h4{font-size:1.0625rem;font-weight:700;line-height:1.35}
.case-meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.case-body p:not(.case-meta){font-size:.9rem;color:var(--muted);line-height:1.6}
/* Featured strip (home, show landing): the drone count is the industry's own
   metric, so it is the largest type after the H1 and the rows are ordered by
   it — a ranking that means something. */
.case-strip{grid-template-columns:1fr;gap:1px}
.case-strip .case{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}
.case-strip .case .case-media{aspect-ratio:21/9;height:100%}
.case-strip .case-body{padding:32px 36px;justify-content:center;gap:10px}
.case-strip .case-count{flex-direction:column;align-items:flex-start;gap:4px}
.case-strip .case-count strong{font-size:clamp(2.75rem,5.5vw,4.5rem);line-height:.95;letter-spacing:-.04em;color:var(--formation-gold)}
.case-strip .case-count span{color:var(--muted)}
.case-strip .case h3{font-size:1.25rem;line-height:1.3;max-width:26ch}
@media(max-width:860px){.case-strip .case{grid-template-columns:1fr}.case-strip .case .case-media{aspect-ratio:16/9;height:auto}.case-strip .case-body{padding:22px 24px 26px}.case-strip .case-count strong{font-size:2.5rem}}
.case-group{margin-top:52px}
.case-group h3{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:12px;border-bottom:1px solid var(--line)}
.case-group .case-grid{margin-top:0}
@media(max-width:940px){.case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.case-grid{grid-template-columns:1fr}}

/* Show scenarios */
.scenario-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.scenario{background:var(--bg-2);display:flex;flex-direction:column;min-width:0;color:inherit;transition:background .3s}
.scenario:hover{background:var(--panel)}
.scenario .scenario-media{border:0;border-radius:0;aspect-ratio:16/9;background:var(--bg)}
.scenario-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.scenario h3{font-size:1.125rem;font-weight:700}
.scenario p{font-size:.9rem;color:var(--muted);line-height:1.6;flex:1}
.scenario .chip{align-self:flex-start;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--accent)}
@media(max-width:940px){.scenario-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.scenario-grid{grid-template-columns:1fr}}

/* Planning facts */
.fact-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.fact{background:var(--bg-2);padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.fact strong{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.fact span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.fact-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fact-grid{grid-template-columns:1fr}}

/* Process — a real sequence, so it is numbered */
.process{margin-top:40px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:1px}
.process li{background:var(--bg-2);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.process .step{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;color:var(--accent)}
.process h3{font-size:1.0625rem;font-weight:700}
.process p{font-size:.9rem;color:var(--muted);line-height:1.6;flex:1}
.process time{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:940px){.process{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.process{grid-template-columns:1fr}}

/* FAQ and jobs — native disclosure, no script */
.faq,.jobs{margin-top:40px;border-top:1px solid var(--line)}
.faq-item,.job{border-bottom:1px solid var(--line)}
.faq-item summary,.job summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 6px;font-family:var(--font-display);font-size:1.0625rem;font-weight:700;line-height:1.4}
.faq-item summary::-webkit-details-marker,.job summary::-webkit-details-marker{display:none}
.faq-item summary::after,.job summary::after{content:"+";flex:none;font-family:var(--font-mono);font-size:1.25rem;color:var(--accent);transition:transform .25s}
.faq-item[open] summary::after,.job[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover,.job summary:hover{color:var(--accent)}
.faq-item summary:focus-visible,.job summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-a,.job-body{padding:0 6px 24px;max-width:70ch}
.faq-a p,.job-body p,.job-body li{font-size:.9375rem;color:var(--muted);line-height:1.7}
.faq-a p+p{margin-top:10px}
.job summary h3{font-size:inherit;font-weight:inherit;flex:1}
.job-meta{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);letter-spacing:.08em}
.job-body h4{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:18px 0 8px}
.job-body ul{margin-left:18px}
.job-body .btn{margin-top:18px}

/* Honours, timeline, news */
.honor-grid{margin-top:40px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.honor-card{background:var(--bg-2);padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;font-size:.9375rem;line-height:1.5}
.honor-card::before{content:"";width:22px;height:2px;background:var(--accent)}
@media(max-width:900px){.honor-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.honor-grid{grid-template-columns:1fr}}
.timeline{margin-top:40px;max-width:860px;list-style:none;border-left:1px solid var(--line);padding-left:0}
.timeline li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:24px;padding:18px 0 22px 28px}
.timeline li::before{content:"";position:absolute;left:-4px;top:26px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.alt .timeline li::before{box-shadow:0 0 0 4px var(--bg-2)}
.timeline time{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.1em;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:3px}
.timeline h3{font-size:1.0625rem;font-weight:700;line-height:1.4}
.timeline p{margin-top:6px;font-size:.9rem;color:var(--muted);line-height:1.6}
@media(max-width:600px){.timeline li{grid-template-columns:1fr;gap:6px}}
/* EXPLODED VIEW (AGILE BEE III): a turnable 3D model beside the list that controls it. */
.xv-layout{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}
.xv-stage{position:relative;aspect-ratio:16/11;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 42%,#18284a,#070b16 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(125,234,255,.22),0 30px 70px -40px rgba(0,0,0,.8)}
.xv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;outline:none}
.xv-canvas:active{cursor:grabbing}
.xv-canvas:focus-visible{box-shadow:inset 0 0 0 2px #7deaff}
.xv-hint{position:absolute;left:18px;bottom:14px;margin:0;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,236,255,.55);pointer-events:none}
.xv-stage:not(:has(.xv-canvas)) .xv-hint{display:none}
.xv-card{position:absolute;top:16px;inset-inline-start:16px;max-width:min(320px,calc(100% - 32px));padding:14px 16px;border-radius:16px;color:#eaf4ff;background:rgba(9,14,28,.62);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(125,234,255,.3),0 18px 40px -20px rgba(0,0,0,.7);animation:glass-settle .45s var(--spring) both}
.xv-card-name{display:block;font-family:var(--font-display);font-size:1rem}
.xv-card-text{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:#c3d1e6}
.xv-side{display:flex;flex-direction:column;gap:14px}
.xv-range-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.xv-range{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.xv-parts{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.xv-parts button{width:100%;display:flex;flex-direction:column;gap:2px;text-align:start;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card-fill);color:var(--ink);font:inherit;cursor:pointer;box-shadow:inset 0 1px 0 var(--glass-edge);transition:border-color .25s,background-color .25s,transform .3s var(--spring)}
.xv-parts button:hover{border-color:var(--accent-border);transform:translateX(3px)}
html[dir="rtl"] .xv-parts button:hover{transform:translateX(-3px)}
.xv-parts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.xv-parts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xv-name{font-weight:700;font-size:.9375rem}
.xv-text{font-size:.8125rem;color:var(--muted);line-height:1.45}
/* Before three.js arrives, and wherever WebGL is missing, the list stands alone. */
.xv:not(.xv-live) .xv-stage{display:none}
.xv:not(.xv-live) .xv-layout{grid-template-columns:1fr}
.xv:not(.xv-live) .xv-range,.xv:not(.xv-live) .xv-range-label{display:none}
.xv:not(.xv-live) .xv-parts{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:1080px){.xv-layout{grid-template-columns:1fr}.xv-parts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.xv-parts{grid-template-columns:1fr}.xv-stage{aspect-ratio:1/1}}
/* SHOW VIDEOS: a self-hosted still; the YouTube player replaces it only once pressed. */
.yt-grid .yt-card{display:flex;flex-direction:column;gap:12px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;border-radius:14px}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--bg-2);box-shadow:var(--card-shadow),inset 0 1px 0 var(--glass-edge)}
.yt-thumb :is(picture,img){display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--spring)}
.yt-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(4,6,14,.38);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(125,234,255,.35),0 10px 30px -10px rgba(0,0,0,.6);transition:transform .45s var(--spring),background-color .3s}
.yt-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.yt-title{font-weight:600;font-size:.9375rem;line-height:1.45}
.yt-card:hover .yt-thumb img,.yt-card:focus-visible .yt-thumb img{transform:scale(1.04)}
.yt-card:hover .yt-play,.yt-card:focus-visible .yt-play{transform:scale(1.1);background:var(--accent);color:var(--btn-ink)}
.yt-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.yt-card.playing{cursor:default}
.yt-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
@media(max-width:760px){.card-grid.yt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.card-grid.yt-grid{grid-template-columns:1fr}}
/* NEWS CARDS (home): a .pcard whose cover sits flush at the top. WeChat covers are
   2.35:1, so 16:9 crops less than the 16:10 used elsewhere. */
.card-grid.news-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.news-cards .news-card{padding-top:0}
.news-card .news-cover{display:block;margin:0 -28px 8px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.news-card .news-cover :is(picture,img){display:block;width:100%;height:100%;object-fit:cover}
.news-card time{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
/* The source article opens on WeChat: the arrow turns north-east, as on every external link. */
.news-card.ext h3::after,html[dir="rtl"] .news-card.ext h3::after{transform:rotate(-45deg)}
.news-card.ext:is(:hover,:focus-visible) h3::after{transform:rotate(-45deg) translateX(3px)}
@media(max-width:760px){.card-grid.news-cards{grid-template-columns:1fr}}
@media(max-width:620px){.news-card .news-cover{margin-inline:-18px}}
.news-list{margin-top:40px;list-style:none;border-top:1px solid var(--line)}
.news-list li{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:20px 6px;border-bottom:1px solid var(--line)}
.news-list time{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px}
.news-list h3{font-size:1.0625rem;font-weight:700;line-height:1.45}
.news-list p{margin-top:6px;font-size:.9rem;color:var(--muted);line-height:1.6}
.source-link{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media(max-width:600px){.news-list li{grid-template-columns:1fr;gap:6px}}

/* Solutions, platforms, after-sales, generations */
.solution-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;padding:1px}
.solution,.generation{background:var(--bg-2);padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.solution h3,.generation h3{font-size:1.125rem;font-weight:700;line-height:1.35}
.solution p,.generation p{font-size:.9375rem;color:var(--muted);line-height:1.65}
.generation .generation-media{aspect-ratio:4/3;background:var(--bg)}
.generation .generation-media img{object-fit:contain;padding:12px}
.generation .spec-table{border-top:1px solid var(--line)}
.generation .spec-row{grid-template-columns:1fr;gap:2px;padding:10px 0}
.banner-media{margin-top:36px;aspect-ratio:1920/660;max-height:360px}
.photo-grid{margin-top:40px;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto;gap:12px}
.photo-grid>*{aspect-ratio:4/3;min-height:0}
.photo-grid .sourced-product-media img{object-fit:cover;padding:0}
@media(max-width:760px){.photo-grid{grid-template-columns:1fr 1fr}.photo-grid>:first-child{grid-column:1/-1}}

/* Key features under a spec table */
.key-features{margin-top:30px}
.key-features .eyebrow{margin-bottom:12px}
.key-features ul{list-style:none;columns:2;column-gap:32px}
.key-features li{font-size:.9rem;color:var(--muted);line-height:1.55;padding-block:5px;padding-inline:16px 0;position:relative;break-inside:avoid}
.key-features li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.key-features li.feature-group{padding-inline-start:0;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:10px;column-span:all}
.key-features li.feature-group::before{display:none}
@media(max-width:600px){.key-features ul{columns:1}}

/* Comparison table */
.table-scroll{margin-top:40px;overflow-x:auto;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.875rem;font-variant-numeric:lining-nums tabular-nums}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.compare-table thead th{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);font-weight:400}
.compare-table tbody th{position:sticky;left:0;background:var(--bg);font-weight:700;z-index:1;box-shadow:1px 0 0 var(--line)}
.compare-table tbody th a{color:var(--ink)}
.compare-table tbody th a:hover{color:var(--accent)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table td{color:var(--muted)}

/* Resource library */
.download-group{margin-top:44px}
.download-group h3{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:12px;border-bottom:1px solid var(--line)}
.downloads{list-style:none}
.downloads li{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 6px;border-bottom:1px solid var(--line)}
.downloads .name{display:block;font-size:.9375rem}
.downloads .meta{display:block;margin-top:2px;font-family:var(--font-mono);font-size:.75rem;color:var(--muted);letter-spacing:.08em}
.downloads .chip{flex:none;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--accent);white-space:nowrap}
.downloads .chip:hover{border-color:var(--accent)}
@media(max-width:560px){.downloads li{flex-direction:column;align-items:flex-start;gap:10px}}

/* Sources — the verifiability contract, quiet by design */
.sources{padding-top:28px;padding-bottom:28px;border-top:1px solid var(--line)}
.sources details{max-width:820px}
.sources summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:'';width:34px;height:1px;background:var(--accent);opacity:.6;flex:none}
.sources summary .count{color:var(--accent)}
.sources summary:hover,.sources summary:focus-visible{color:var(--ink)}
.sources summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sources details[open] summary{margin-bottom:14px}
.sources .h3{font-size:1.125rem;font-weight:700}
.source-list{margin-top:18px;list-style:none;display:grid;gap:6px}
.source-list li{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;color:var(--muted);word-break:break-all}
.source-list a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.source-list a:hover{color:var(--accent)}
.source-list .meta{white-space:nowrap}

/* Footer legal line: company name, ICP filing, social chips */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--accent)}
.foot-social{display:flex;flex-wrap:wrap;gap:14px;margin-inline-start:auto}
.foot-social span{color:var(--muted)}
.contact-card .qr-placeholder{height:auto;min-height:150px;margin-top:8px;padding:18px}
.contact-card p[lang]{color:var(--muted);font-size:.9rem}
@media(max-width:600px){.foot-social{margin-inline-start:0}}

/* ============ CHINESE LOCALE ============ */
/* The Latin webfonts carry unicode-range subsets, so CJK glyphs fall to the
   system stacks below with no extra download; tracking and line-breaking are
   set for Chinese text. */
:lang(zh),:lang(zh-CN){--font-cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',sans-serif;line-break:strict;overflow-wrap:anywhere}
/* Each script's own face straight after the Latin one: a family list is tried in order,
   so the system fonts that used to come first drew the Chinese and Arabic, and a mono label
   no rule listed fell back to the platform's CJK or Arabic default (NSimSun, Courier New). */
html:root:lang(zh-CN){--font-body:'Inter',var(--font-cjk);--font-display:'Sora',var(--font-cjk);--font-mono:'Space Mono',var(--font-cjk)}
html:lang(zh-CN) :is(.h2,h1,h2,h3,.btn,.pcard h3,.contact-card-title){letter-spacing:0}
html:lang(zh-CN) :is(.h2,h1,h2,h3){line-height:1.3}
html:lang(zh-CN) .eyebrow,html:lang(zh-CN) .code,html:lang(zh-CN) .chip,html:lang(zh-CN) .lbl,html:lang(zh-CN) .foot-links,html:lang(zh-CN) .honor,html:lang(zh-CN) .case-meta,html:lang(zh-CN) .spec-row dt,html:lang(zh-CN) .tcell .lbl,html:lang(zh-CN) .fact span,html:lang(zh-CN) .process time,html:lang(zh-CN) .news-list time{letter-spacing:.06em}
html:lang(zh-CN) .hero-stats{letter-spacing:.06em}
html:lang(zh-CN) .sub,html:lang(zh-CN) p{line-height:1.8}
.lang-switch{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--glass-muted);white-space:nowrap;padding:8px 10px;border:1px solid var(--glass-border);border-radius:999px;transition:color .2s,border-color .2s}
.lang-switch:hover{color:var(--accent);border-color:var(--accent-border)}
/* The browser asks for another language we publish: a quiet accent, and the switch opens on it. */
.lang-switch[data-suggest]{color:var(--accent);border-color:var(--accent-border)}
.nav-mobile-actions .lang-switch{grid-column:1/-1;text-align:center;color:var(--ink);border-color:var(--line)}
.translation-banner{position:sticky;top:0;z-index:calc(var(--z-nav) + 1);background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.875rem;color:var(--ink)}
.translation-banner .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-top:12px;padding-bottom:12px}
.translation-banner a{color:var(--accent);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em}
@media(max-width:1180px){.nav-actions .lang-switch span{display:none}}

/* ============ LIQUID GLASS — controls & interactions ============ */
/* One glass grammar for every control: a translucent surface that blurs the
   page behind it, a light edge on top, a cursor-following highlight
   (--mx/--my set by app.js), a soft press. Motion is short and eased; all of
   it is switched off under prefers-reduced-motion. */
:root{--card-fill:var(--bg-2);--card-shadow:0 1px 2px rgba(0,0,0,.28),0 10px 30px -22px rgba(0,0,0,.6);--card-shadow-hover:0 1px 2px rgba(0,0,0,.32),0 20px 44px -24px rgba(0,0,0,.75);--glass-ctl:rgba(255,255,255,.06);--glass-ctl-strong:rgba(255,255,255,.12);--glass-shine:rgba(255,255,255,.22);--press-ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.16,1,.3,1)}
:root[data-theme="light"]{--card-shadow:0 1px 2px rgba(20,40,80,.05),0 10px 30px -22px rgba(20,40,80,.35);--card-shadow-hover:0 1px 2px rgba(20,40,80,.07),0 20px 44px -24px rgba(20,40,80,.5);--glass-ctl:rgba(255,255,255,.55);--glass-ctl-strong:rgba(255,255,255,.8);--glass-shine:rgba(255,255,255,.9)}
.btn,.cta,.chip,.filter-btn,.theme-toggle,.lang-switch,.menu-toggle,.mega-group-toggle,.nav-expand,.reach-market,.reach-lang,.reach-close{position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn,.cta,.filter-btn,.lang-switch{background-color:var(--glass-ctl);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 var(--glass-edge),0 1px 2px rgba(0,0,0,.08);transition:transform .32s var(--spring),box-shadow .32s var(--spring),background-color .25s,border-color .25s,color .25s}
.btn::before,.cta::before,.filter-btn::before,.chip::before,.lang-switch::before,.pcard::before,.case::before,.scenario::before,.linkrow::before,.contact-card::before,.reach-market::before,.reach-lang::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),var(--glass-shine),transparent 62%);transition:opacity .35s ease;border-radius:inherit}
.btn::after,.cta::after,.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.28) 50%,transparent 100%);transform:skewX(-18deg) translateX(-140%);opacity:0}
@keyframes glass-sheen{0%{transform:skewX(-18deg) translateX(-140%);opacity:0}25%{opacity:1}100%{transform:skewX(-18deg) translateX(520%);opacity:0}}
.btn:active,.cta:active,.filter-btn:active,.chip:active,.theme-toggle:active,.lang-switch:active,.reach-market:active,.reach-lang:active,.menu-toggle:active,.mega-group-toggle:active,.nav-expand:active,.reach-close:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn-primary{background-color:var(--accent);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px -10px var(--accent),0 1px 2px rgba(0,0,0,.14)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 36px -10px var(--accent),0 2px 4px rgba(0,0,0,.14)}
.btn-primary:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 6px 16px -8px var(--accent)}
.btn-ghost{background-color:var(--glass-ctl)}
.btn-ghost:hover{background-color:var(--glass-ctl-strong);border-color:var(--accent-border)}
.hero .btn-ghost{background-color:rgba(255,255,255,.08);color:#f2f5fc}
.hero .btn-ghost:hover{background-color:rgba(255,255,255,.16)}
.cta{background-color:var(--glass-ctl)}
.cta:hover,.cta:focus-visible{background-color:var(--accent-soft);box-shadow:inset 0 1px 0 var(--glass-edge),0 6px 18px -8px var(--accent)}
.filter-btn{transition:transform .25s var(--spring),background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.filter-btn.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -8px var(--accent)}
.theme-toggle,.menu-toggle{transition:transform .32s var(--spring),background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.theme-toggle:hover,.menu-toggle:hover{background-color:var(--glass-ctl-strong);box-shadow:inset 0 1px 0 var(--glass-edge)}
.theme-toggle svg{transition:transform .5s var(--spring)}
.theme-toggle:hover svg{transform:rotate(22deg)}
.lang-switch{display:inline-flex;align-items:center;gap:6px;border-color:var(--glass-border)}
.lang-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--spring)}
.lang-switch:hover svg{transform:rotate(-30deg)}
.nav-mobile-actions .lang-switch{grid-column:auto;justify-content:center;min-height:48px;color:var(--ink);border-color:var(--line)}
.nav-mobile-actions .cta{grid-column:1/-1}
/* Cards lift and light up; the hairline grids stay put. */
.pcard,.case,.scenario,.contact-card,.linkrow{position:relative;isolation:isolate;transition:background-color .3s,transform .4s var(--spring),box-shadow .4s var(--spring)}
.linkrow .chip{transition:transform .35s var(--spring),color .25s}
/* Hover-driven liquid motion fires only where hover is real; taps keep the
   press state instead of a stuck highlight or lift. */
@media(hover:hover){
  .btn:hover::before,.cta:hover::before,.filter-btn:hover::before,.chip:hover::before,.lang-switch:hover::before,.pcard:hover::before,.case:hover::before,.scenario:hover::before,.linkrow:hover::before,.contact-card:hover::before,.reach-market:hover::before,.reach-lang:hover::before{opacity:.55}
  .btn:hover::after,.cta:hover::after{animation:glass-sheen .9s var(--spring) forwards}
  .btn:hover,.cta:hover{transform:translateY(-1px)}
  .btn-primary:hover{transform:translateY(-2px)}
  .pcard:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}
  .case:hover,.scenario:hover{transform:translateY(-3px)}
  .linkrow:hover .chip{transform:translateX(3px)}
  html[dir="rtl"] .linkrow:hover .chip{transform:translateX(-3px)}
  .cat-row:hover{background:var(--hover-tint);padding-inline-start:16px}
  .linkrow:hover{background:var(--hover-tint);padding-inline-start:16px}
}
/* The lead card's photo sits above the default shine layer; lift the shine
   over the image (still under the text) so its hover reads. */
.pcard.lead::before{z-index:1}
/* Inline label arrows: the stroke icon that ends a button or chip label —
   typed glyphs left the strings, this is the one arrow everywhere. */
.tarr{width:14px;height:14px;margin-inline-start:8px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip .tarr{width:12px;height:12px;margin-inline-start:6px;vertical-align:-1px}
.tarr-ne{transform:rotate(-45deg)}
html[dir="rtl"] .tarr{transform:scaleX(-1)}
/* External-link arrows point out-and-up in every direction. */
html[dir="rtl"] .tarr-ne{transform:rotate(-45deg)}
/* Disclosures and form controls */
.faq-item summary,.job summary{transition:color .25s,padding-inline-start .35s var(--spring)}
.faq-item[open] summary,.job[open] summary{padding-inline-start:10px}
.faq-a,.job-body{animation:disclose .45s var(--spring)}
@keyframes disclose{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.form-grid input,.form-grid select,.form-grid textarea{background:var(--glass-ctl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 var(--glass-edge)}
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:var(--accent-border)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 3px var(--accent-border)}
.form-grid .btn-primary[aria-busy="true"]{opacity:.7;cursor:progress}
.form-status:not([hidden]){animation:disclose .45s var(--spring)}
/* Nav pills */
.nav-item>a{transition:color .25s,transform .3s var(--spring)}
.mega{transition:opacity .28s var(--spring),transform .36s var(--spring),visibility .28s}
/* ---- Liquid glass, second pass: a lit rim, a specular that follows the pointer,
   surfaces that settle in on a spring. No animation loops: everything moves
   only in answer to the visitor (hover, scroll, open), and stops. ---- */
:root{--glass-rim:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.07) 34%,rgba(125,234,255,.26) 66%,rgba(255,255,255,.28));--glass-spec:rgba(255,255,255,.55)}
:root[data-theme="light"]{--glass-rim:linear-gradient(135deg,#fff,rgba(255,255,255,.4) 34%,rgba(0,106,142,.2) 66%,rgba(255,255,255,.85));--glass-spec:#fff}
/* Bar: the rim replaces the flat border and brightens where the pointer is. */
.site-nav{border-color:transparent;box-shadow:0 12px 36px var(--glass-shadow),inset 0 -12px 24px -20px rgba(125,234,255,.45);transition:top .6s var(--spring),left .6s var(--spring),right .6s var(--spring),box-shadow .4s ease}
.site-nav::after{inset:-1px;padding:1px;opacity:1;mix-blend-mode:normal;animation:none;background:radial-gradient(320px circle at var(--mx,16%) var(--my,0%),var(--glass-spec),transparent 60%),var(--glass-rim);background-size:auto;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* Scrolled: the bar draws in and lifts, as a single piece of glass. */
@media(min-width:1081px){
  .site-nav.frosted{top:calc(8px + var(--banner-h,0px));left:max(28px,calc((100vw - 1120px)/2));right:max(28px,calc((100vw - 1120px)/2));box-shadow:0 20px 48px var(--glass-shadow),inset 0 -12px 24px -20px rgba(125,234,255,.45)}
}
/* Controls: light caught on the top edge, a cyan refraction along the bottom. */
.btn-ghost,.cta,.lang-switch,.theme-toggle,.menu-toggle,.filter-btn:not(.active),.reach-close{box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(125,234,255,.24),0 1px 2px rgba(0,0,0,.08)}
.btn-ghost:hover,.cta:hover,.cta:focus-visible,.lang-switch:hover,.theme-toggle:hover,.menu-toggle:hover,.filter-btn:not(.active):hover,.reach-close:hover{box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(125,234,255,.45),0 8px 22px -12px var(--accent)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.14),0 10px 28px -10px var(--accent),0 1px 2px rgba(0,0,0,.14)}
@media(hover:hover){
  .btn-ghost:hover,.cta:hover,.lang-switch:hover{transform:translateY(-1px) scale(1.015)}
}
/* Menu panel: rises out of the bar on a spring; its columns follow in turn. */
.mega{transform-origin:50% 0;transform:translateY(-10px) scale(.975);border-color:transparent;background:linear-gradient(var(--glass-panel),var(--glass-panel)) padding-box,var(--glass-rim) border-box;transition:opacity .3s var(--spring),transform .5s var(--spring),visibility .3s}
/* The hero stays night-palette in both themes: a softer pointer highlight on its dark glass. */
.hero{--glass-shine:rgba(255,255,255,.16)}
@keyframes glass-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1081px){
  .site-nav .nav-item.open .mega-in>*{animation:glass-rise .55s var(--spring) both}
  .site-nav .nav-item.open .mega-in>:nth-child(2){animation-delay:.04s}
  .site-nav .nav-item.open .mega-in>:nth-child(3){animation-delay:.08s}
  .site-nav .nav-item.open .mega-in>:nth-child(4){animation-delay:.12s}
  .site-nav .nav-item.open .mega-in>:nth-child(n+5){animation-delay:.16s}
}
/* Dialog and cookie bar: the same rim, and they settle in rather than appear. */
.reach-box{border-color:transparent;background:linear-gradient(var(--glass-panel),var(--glass-panel)) padding-box,var(--glass-rim) border-box}
.consent{border-color:transparent;background:linear-gradient(var(--glass-panel),var(--glass-panel)) padding-box,var(--glass-rim) border-box;-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);animation:glass-settle .7s var(--spring) both}
@keyframes glass-settle{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-transparency:reduce){
  .consent{background:var(--panel);border-color:var(--control-border)}
  .mega,.reach-box{background:var(--bg-2);border-color:var(--glass-border)}
}
@media(prefers-reduced-motion:reduce){
  .btn,.cta,.filter-btn,.theme-toggle,.lang-switch,.menu-toggle,.pcard,.case,.scenario,.contact-card,.linkrow,.faq-item summary,.job summary{transition:none}
  .btn:hover,.cta:hover,.pcard:hover,.case:hover,.scenario:hover,.btn-primary:hover{transform:none}
  .theme-toggle:hover svg,.lang-switch:hover svg,.linkrow:hover .chip{transform:none}
}

/* ============ REACH PICKER ============ */
/* EFY's map of where it flies, in the same glass as the rest of the site.
   The SVG is decoration (aria-hidden); the market strip below it is the real
   control, so the keyboard and screen-reader path never depends on paths. */
.reach-overlay{position:fixed;inset:0;z-index:calc(var(--z-skip) - 10);display:grid;place-items:center;padding:16px}
.reach-overlay[hidden]{display:none}
.reach-scrim{position:absolute;inset:0;background:var(--scrim-strong);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);opacity:0;transition:opacity .3s ease}
.reach-overlay.show .reach-scrim{opacity:1}
.reach-box{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:34px clamp(20px,4vw,44px) 28px;border-radius:24px;border:1px solid var(--glass-border);background:var(--glass-panel);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:inset 0 1px 0 var(--glass-edge),0 40px 100px -30px var(--glass-shadow);color:var(--ink);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .34s var(--spring),transform .42s var(--spring)}
.reach-overlay.show .reach-box{opacity:1;transform:none}
.reach-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--control-border);background:var(--glass-ctl);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--spring),background-color .25s}
.reach-close:hover{background:var(--glass-ctl-strong);transform:rotate(90deg)}
.reach-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.reach-title{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.reach-lead{margin-top:8px;color:var(--muted);font-size:.9375rem;max-width:58ch}

/* Figures read off the map, so they cannot drift from the cases behind it. */
.reach-figures{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-top:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.reach-figure{display:flex;align-items:baseline;gap:8px}
.reach-figure strong{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.reach-figure span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.reach-more{margin-inline-start:auto;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Fixed night palette: the map keeps its own surface in both themes, so the
   coastlines never wash out and the accent always reads at full strength. */
.reach-stage{--map-land:#1b2b46;--map-market:#24395e;--map-shore:rgba(150,200,235,.3);--map-leader:rgba(165,205,235,.5);--map-label:#dbe9fa;--accent:#4de3ff;--accent-soft:rgba(77,227,255,.16)}
.reach-stage{position:relative;margin-top:18px;border-radius:16px;border:1px solid var(--line);background:radial-gradient(78% 105% at 71% 18%,#16305a 0%,#0b1a34 52%,#060d1d 100%);overflow:hidden}
.reach-stage::after{content:"";position:absolute;inset:-30%;pointer-events:none;background:var(--glass-sheen);opacity:.5;animation:liquid-caustic 22s linear infinite}
.reach-map-host{display:block;height:min(44vh,400px);min-height:170px}
.reach-map{display:block;width:100%;height:100%}

/* Map layers */
.land-rest{fill:var(--map-land);stroke:var(--map-shore);stroke-width:.35}
.market-shape{fill:var(--map-market);stroke:var(--map-shore);stroke-width:.4;transition:fill .35s var(--spring),stroke .35s var(--spring)}
.market,.market-label,.city{cursor:pointer}
.city .city-halo{transition:r .3s var(--spring)}
.market-label.hot .leader-dot,.market-label.active .leader-dot{fill:var(--accent)}
.market.hot .market-shape,.market.active .market-shape{fill:var(--accent-soft);stroke:var(--accent)}
.market.active .market-shape{filter:drop-shadow(0 0 14px var(--accent-soft))}
/* The countries where EFY has flown shows, red as on EFY's own map; a market's cyan hover stays around them. */
.reach-stage{--map-flown:#e5483d}
.flown-shape{fill:var(--map-flown);stroke:rgba(4,6,14,.55);stroke-width:.3}
.flown-dot{fill:var(--map-flown);stroke:#04060e;stroke-width:.6}
/* China as on China's standard map: province lines, and the South China Sea line. */
.market[data-market="china"] .flown-shape{stroke:rgba(255,255,255,.5);stroke-width:.3}
.china-dashes{fill:var(--map-flown)}
.market.hot .flown-shape,.market.active .flown-shape{stroke:var(--accent);stroke-width:.45}
.arc-line{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.45}
.arc-line.domestic{stroke-width:.55;opacity:.2}
.arc-end{fill:var(--accent);opacity:.5}
.arc-spark{fill:var(--accent);filter:drop-shadow(0 0 5px var(--accent))}
.city-dot{fill:var(--accent)}
.city-halo{fill:var(--accent-soft)}
.city{transition:opacity .3s ease}
.city.dim{opacity:.25}
.hub-ring{fill:none;stroke:var(--accent);stroke-width:1.2;transform-origin:center;transform-box:fill-box;animation:hub-pulse 2.6s ease-out infinite}
.hub-dot{fill:#eaeef8}
@keyframes hub-pulse{0%{transform:scale(.45);opacity:.85}100%{transform:scale(2);opacity:0}}
.leader{fill:none;stroke:var(--map-leader);stroke-width:.6}
.leader-dot{fill:var(--map-leader)}
.label{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--map-label);transition:fill .3s;paint-order:stroke;stroke:rgba(4,6,14,.8);stroke-width:3px;stroke-linejoin:round}
.market-label.hot .label,.market-label.active .label{fill:var(--accent)}
/* The map carries every language's labels; the host element's locale picks
   one. Doing it in CSS rather than script means the inlined map on the
   Worldwide page reads correctly with no JavaScript at all. */
.reach-map-host[data-locale="en"] .label-zh,.reach-map-host[data-locale="en"] .label-fr,.reach-map-host[data-locale="en"] .label-es,.reach-map-host[data-locale="en"] .label-ar,.reach-map-host[data-locale="zh"] .label-en,.reach-map-host[data-locale="zh"] .label-fr,.reach-map-host[data-locale="zh"] .label-es,.reach-map-host[data-locale="zh"] .label-ar,.reach-map-host[data-locale="fr"] .label-en,.reach-map-host[data-locale="fr"] .label-zh,.reach-map-host[data-locale="fr"] .label-es,.reach-map-host[data-locale="fr"] .label-ar,.reach-map-host[data-locale="es"] .label-en,.reach-map-host[data-locale="es"] .label-zh,.reach-map-host[data-locale="es"] .label-fr,.reach-map-host[data-locale="es"] .label-ar,.reach-map-host[data-locale="ar"] .label-en,.reach-map-host[data-locale="ar"] .label-zh,.reach-map-host[data-locale="ar"] .label-fr,.reach-map-host[data-locale="ar"] .label-es{display:none}

/* The market strip is the real control: a hairline legend, not a card grid. */
.reach-strip{display:flex;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--line)}
.reach-market{position:relative;flex:1 1 auto;padding:13px 16px;border:0;border-inline-end:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--font-display);font-size:.875rem;font-weight:600;text-align:start;cursor:pointer;transition:color .25s,background-color .25s}
.reach-market:last-child{border-inline-end:0}
.reach-market::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--spring)}
.reach-market:hover,.reach-market:focus-visible{color:var(--ink);background:var(--hover-tint)}
.reach-market.active{color:var(--ink)}
.reach-market.active::after{transform:scaleX(1)}
.reach-dot{display:inline-block;width:5px;height:5px;margin-inline-start:7px;border-radius:50%;background:var(--accent);vertical-align:middle}

.reach-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.reach-proof{display:flex;flex-direction:column;gap:5px;max-width:52ch;font-size:.9375rem}
.reach-proof strong{font-family:var(--font-display);font-size:1.125rem;font-weight:800}
.reach-proof span{color:var(--muted)}
.reach-suggests{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.reach-note{color:var(--muted);font-size:.875rem}
.reach-choice{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.reach-pill{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--glass-ctl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.reach-lang{position:relative;padding:8px 18px;border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .25s,background-color .25s}
.reach-lang[aria-current]{color:var(--btn-ink);background:var(--accent)}
.reach-lang:hover:not([aria-current]){color:var(--ink)}
.reach-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
body.reach-open{overflow:hidden}
@media(max-width:860px){
  .reach-box{padding:28px 18px 22px;border-radius:18px}
  .reach-map-host{height:min(30vh,250px)}
  .reach-figures{gap:8px 20px}
  .reach-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .reach-strip::-webkit-scrollbar{display:none}
  .reach-market{flex:0 0 auto}
  .reach-foot{flex-direction:column;align-items:stretch}
  .reach-choice{align-items:stretch}
  .reach-actions{justify-content:stretch}
  .reach-actions .btn{flex:1 1 auto;text-align:center}
  .reach-more{margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  .arc-spark{display:none}
}

.tcell .num .unit{font-size:.45em;font-weight:600;margin-inline-start:4px;color:var(--accent);vertical-align:baseline}

/* Reach section on the Worldwide page (same map, page-level treatment) */
.reach-figures .reach-figure strong{font-size:clamp(1.375rem,2.6vw,1.875rem)}
[data-generated-reach] .reach-figures{border-bottom:0;padding-bottom:0;margin-top:28px;gap:14px 40px}
[data-generated-reach] .reach-stage{margin-top:22px}
[data-generated-reach] .reach-map-host{height:auto;aspect-ratio:960/500}
.market-list{margin-top:36px;list-style:none;border-top:1px solid var(--line)}
.market-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:20px 6px;border-bottom:1px solid var(--line)}
.market-row h3{font-size:1.0625rem;font-weight:700}
.market-row p{margin-top:5px;font-size:.9375rem;color:var(--muted);max-width:62ch}
.market-row .market-quiet{color:var(--muted)}
.market-row .code{flex:none;color:var(--muted)}
.market-row.flown h3::after{content:"";display:inline-block;width:6px;height:6px;margin-inline-start:9px;border-radius:50%;background:var(--accent);vertical-align:middle}
.market-row.flown .code{color:var(--accent)}
@media(max-width:600px){.market-row{flex-direction:column;gap:8px}}

/* ============ RIGHT TO LEFT (Arabic) ============ */
/* The Arabic build sets dir="rtl" on <html>. Only genuinely directional
   things flip: the map is geography and must not mirror, and Latin product
   names keep their own direction inside Arabic prose. */
html:root[dir="rtl"]{--font-body:'Inter','Noto Arabic',system-ui,sans-serif;--font-display:'Sora','Noto Arabic',system-ui,sans-serif;--font-mono:var(--font-body)}
/* Tracking opens gaps in a joined script, and Arabic marks need room above and below. */
html[dir="rtl"] *{letter-spacing:0!important}
html[dir="rtl"] :is(.h2,h1,h2,h3){line-height:1.35}
html[dir="rtl"] .sub,html[dir="rtl"] p,html[dir="rtl"] li{line-height:1.9}
html[dir="rtl"] .reach-market,html[dir="rtl"] .faq-item summary,html[dir="rtl"] .job summary,html[dir="rtl"] .form-grid label,html[dir="rtl"] .process .step,html[dir="rtl"] .case-meta,html[dir="rtl"] .market-list{text-align:right}
html[dir="rtl"] .reach-market::after{transform-origin:right}
html[dir="rtl"] .reach-close{right:auto;left:16px}
html[dir="rtl"] .skip-link{left:auto;right:12px}
html[dir="rtl"] .plain-list,html[dir="rtl"] .job-body ul{margin-left:0;margin-right:18px}
html[dir="rtl"] .timeline{border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .timeline li{padding-left:0;padding-right:28px}
html[dir="rtl"] .timeline li::before{left:auto;right:-4px}
/* The drawer mirrors: anchored and sliding from the inline-end side. The
   closed-state override must not outrank .open, so open is restated. */
@media(max-width:1080px){
  html[dir="rtl"] .site-nav .nav-panel{right:auto;left:12px;transform:translateX(calc(-100% - 24px))}
  html[dir="rtl"] .site-nav .nav-panel.open{transform:none}
}
@media(max-width:720px){
  html[dir="rtl"] .site-nav .nav-panel{right:12px}
}
@media(max-width:420px){
  html[dir="rtl"] .site-nav .nav-panel{left:10px;right:10px}
}
/* Never mirrored: geography, and columns of figures. */
html[dir="rtl"] .reach-stage,html[dir="rtl"] .reach-map-host,html[dir="rtl"] .table-scroll{direction:ltr}
html[dir="rtl"] .compare-table th[scope="row"]{text-align:right}
/* A run of Latin or Chinese inside Arabic keeps its own direction, so a
   product code cannot reorder the sentence around it and an untranslated
   English paragraph does not have its full stop moved to the left. */
html[dir="rtl"] [lang="en"],html[dir="rtl"] [lang="zh-CN"]{direction:ltr;unicode-bidi:isolate}
/* A block that still holds untranslated English reads left-to-right as a
   whole, so a heading split across an accent span does not come out with
   its clauses in the wrong order. Only pages the build marked pending can
   contain [lang="en"] here, so a finished Arabic page is untouched. Where
   :has() is unsupported the text still reads — a page that already says it
   is not translated is the right place to degrade. */
html[dir="rtl"] :is(h1,h2,h3,h4,h5,p,ul,ol,li,dt,dd,figcaption,blockquote,summary,td,th,label,legend,.eyebrow,.sub,.go,.nowrap-line,.case-count,.market-quiet):has([data-en]){direction:ltr}

/* ARTICLES — news items and projects written in the site editor. */
.article{padding-top:36px}
.article .article-wrap{max-width:820px}
.article-cover{margin:0 0 32px}
.article-cover img,.article-cover picture,.article-figure img,.article-figure picture{display:block;width:100%;height:auto;border-radius:8px}
.article-cover img{box-shadow:var(--card-shadow)}
.article-body{font-size:1.0625rem;line-height:1.75;max-width:70ch}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote{margin:0 0 20px}
.article-body h2,.article-body h3,.article-body h4{margin:36px 0 12px;line-height:1.3}
.article-body h2{font-size:1.5rem}.article-body h3{font-size:1.25rem}.article-body h4{font-size:1.0625rem}
.article-body ul,.article-body ol{padding-inline-start:1.4em}
.article-body blockquote{border-inline-start:3px solid var(--accent);padding-block:4px;padding-inline:18px 0;color:var(--muted)}
.article-body a{color:var(--accent);text-decoration:underline}
.article-figure{margin:28px 0}
.article-figure figcaption{margin-top:8px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.article .vframe{margin:0 0 36px}
.article-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:36px 0}
.article-gallery figure{margin:0}
.article-gallery a{display:block;border-radius:6px;overflow:hidden;cursor:zoom-in}
.article-gallery img,.article-gallery picture{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;transition:transform .35s ease}
.article-gallery a:hover img{transform:scale(1.03)}
.article-source{margin-top:28px}
.article-footer{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-more{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.article-more ul{list-style:none;margin-top:14px}
.article-more li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.article-more time{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted);padding-top:3px}
.article-more a{color:inherit;font-weight:600;line-height:1.45}
.article-more a:hover{color:var(--accent)}
dialog.lightbox{margin:auto;border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(2,6,12,.88);backdrop-filter:blur(6px)}
dialog.lightbox img{display:block;max-width:100%;max-height:90vh;border-radius:8px;cursor:zoom-out}
.news-list li.has-thumb{grid-template-columns:130px 1fr 220px;align-items:start}
.news-list li{transition:background .2s}
.news-list li:hover{background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.news-list h3{font-size:1.125rem}
.news-list p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-thumb img,.news-thumb picture{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:4px}
.news-list h3 a{color:inherit}
.news-list h3 a:hover{color:var(--accent)}
.case h3 a,.case h4 a{color:inherit}
img.case-media{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
@media(max-width:760px){.article-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.news-list li.has-thumb{grid-template-columns:1fr}.article-more li{grid-template-columns:1fr;gap:4px}}

/* Figures are Latin-ordered even in Arabic rows: "140+" not "+ 140". */
html[dir="rtl"] .num{direction:ltr;unicode-bidi:isolate}
/* WCAG 2.5.8: link lists reach a 24 px hit area without moving anything. */
.foot-links a,.foot-social a,.foot-icp,.breadcrumb a,.source-link,.article-source a,.source-list a,.contact-card p a{padding-block:4px;margin-block:-4px}
.breadcrumb a,.foot-links a,.foot-social a,.foot-icp{display:inline-block}
/* Links inside contact prose are underlined, not colour-only. */
.contact-card p a{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
/* Lightbox close control. */
.lightbox-close{position:fixed;top:16px;inset-inline-end:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.lightbox-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Article pages: the reading column and its hero text share one centred measure. */
.article-wrap{margin-inline:auto}
main:has(.article-wrap) .page-hero .wrap{max-width:calc(820px + 48px)}
/* The skip link lands here; the ring belongs on controls, not the whole page. */
main:focus{outline:none}
/* Print: the sheet, not the chrome. */
@media print{
  .site-nav,.skip-link,.hero-stage,.hero-cue,video,.vframe,.menu-toggle,.theme-toggle,.lang-switch,.translation-banner,.reach-overlay,.lightbox,.pager-rail,.contact-hero,.section-more,.btn,.cta{display:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  html,body{background:#fff!important;color:#000!important}
  main{padding-top:0!important}
  a{color:inherit!important;text-decoration:underline}
  .page-hero{padding-top:24px!important;background:none!important}
}
/* Consent bar: one line, bottom of the viewport, never modal. */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-nav-top);max-width:760px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.28);font-size:.9375rem;line-height:1.45}
.consent p{margin:0;max-width:56ch}
@media(max-width:600px){.consent{left:10px;right:10px;bottom:10px;padding:10px 12px;gap:8px 12px;font-size:.8125rem;line-height:1.4}.consent .btn{padding:9px 18px}}
.consent p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:10px;flex:none}
@media print{.consent{display:none!important}}