/* ============================================================
   JET ENERGY — design system "Grid & Current"
   Engineering-blueprint industrial modern. 2026 redesign.
   ============================================================ */

:root{
  --ink:        #0C1318;   /* graphite near-black */
  --ink-2:      #131C23;   /* raised dark surface */
  --ink-3:      #1B2630;   /* borders on dark */
  --paper:      #F4F3EF;   /* warm off-white */
  --paper-2:    #FFFFFF;
  --mute:       #5C6770;   /* secondary text on light */
  --mute-d:     #93A1AC;   /* secondary text on dark */
  --brand:      #1E88D0;   /* logo blue */
  --brand-deep: #0E5E96;
  --volt:       #FFB31F;   /* solar amber accent — use sparingly */
  --line:       rgba(12,19,24,.14);
  --line-d:     rgba(244,243,239,.14);
  --font-sans:  "Archivo","Noto Sans TC",sans-serif;
  --font-mono:  "IBM Plex Mono","Noto Sans TC",monospace;
  --pad:        clamp(20px, 4.5vw, 64px);
  --max:        1440px;
  --nav-h:      108px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  font-family:var(--font-sans);
  font-size:16px; line-height:1.7; color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
strong{ font-weight:600; }
::selection{ background:var(--volt); color:var(--ink); }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- type ---------- */
.kicker{
  font-family:var(--font-mono); font-size:14px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand);
  display:flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--volt); flex:none; }
.display{
  font-weight:800; font-stretch:115%;
  font-size:clamp(34px, 5.2vw, 76px);
  line-height:1.04; letter-spacing:-.015em;
  text-wrap:balance;
}
:lang(zh-Hant) .display{ font-stretch:100%; letter-spacing:.02em; line-height:1.16; font-weight:900; }
.h2{
  font-weight:800; font-stretch:112%;
  font-size:clamp(26px, 3.4vw, 46px);
  line-height:1.1; letter-spacing:-.01em; text-wrap:balance;
}
:lang(zh-Hant) .h2{ font-stretch:100%; letter-spacing:.03em; line-height:1.25; }
.h3{ font-weight:700; font-size:clamp(18px,1.6vw,22px); line-height:1.35; }
.lead{ font-size:clamp(16px,1.35vw,19px); line-height:1.85; color:var(--mute); max-width:62ch; }
.on-dark .lead{ color:var(--mute-d); }
.mono{ font-family:var(--font-mono); }

/* numbered section header */
.sec-head{
  display:grid; grid-template-columns:auto 1fr; gap:18px 28px; align-items:end;
  padding-bottom:26px; margin-bottom:clamp(30px,4vw,56px);
  border-bottom:1px solid var(--line); position:relative;
}
.on-dark .sec-head{ border-color:var(--line-d); }
.sec-head .num{
  font-family:var(--font-mono); font-size:14px; color:var(--mute);
  padding-bottom:8px;
}
.on-dark .sec-head .num{ color:var(--mute-d); }
.sec-head .num b{ color:var(--volt); font-weight:600; }
.sec-head h2{ grid-column:1/-1; }
.sec-head .kicker{ grid-column:1/-1; margin-bottom:6px; }
.sec-head::after{
  content:"+"; position:absolute; right:0; bottom:-9px;
  font-family:var(--font-mono); font-size:15px; color:var(--brand);
  background:inherit;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ink);
  color:var(--ink); background:transparent;
  transition:background .25s, color .25s, border-color .25s;
  cursor:pointer;
}
.btn .arr{ transition:transform .25s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-solid{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-solid:hover{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.btn-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--ink); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(12,19,24,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
/* blur lives on a pseudo-element: backdrop-filter on .nav itself would
   become the containing block for the fixed mobile menu overlay */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.nav.scrolled{ background:rgba(12,19,24,.92); }
.nav .wrap{ width:100%; display:flex; align-items:center; gap:32px; }
.nav-logo img{ height:85px; width:auto; }
@media (max-width:560px){ .nav-logo img{ height:58px; } }
.nav-links{ display:flex; gap:6px; margin-left:auto; align-items:center; }
.nav-links a{
  font-size:14px; font-weight:500; color:rgba(255,255,255,.82);
  padding:10px 14px; position:relative; white-space:nowrap;
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; background:var(--volt);
}
.nav-lang{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.3);
  padding:7px 14px; margin-left:10px; white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav-lang:hover{ background:#fff; color:var(--ink); }
.nav-burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:44px; height:44px; position:relative; z-index:102;
}
.nav-burger span{
  position:absolute; left:10px; right:10px; height:2px; background:#fff;
  transition:transform .3s, opacity .3s, top .3s;
}
.nav-burger span:nth-child(1){ top:15px; }
.nav-burger span:nth-child(2){ top:21px; }
.nav-burger span:nth-child(3){ top:27px; }
.nav-open .nav-burger span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-open .nav-burger span:nth-child(2){ opacity:0; }
.nav-open .nav-burger span:nth-child(3){ top:21px; transform:rotate(-45deg); }

@media (max-width: 980px){
  .nav-links{
    position:fixed; inset:0; z-index:101;
    flex-direction:column; justify-content:center; gap:8px;
    background:rgba(12,19,24,.97);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .nav-open .nav-links{ opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:22px; padding:12px 20px; }
  .nav-lang{ margin:18px 0 0; font-size:16px; padding:10px 22px; }
  .nav-burger{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.hero::before{ /* duotone wash */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(165deg, rgba(12,19,24,.42) 0%, rgba(12,19,24,.18) 42%, rgba(12,19,24,.88) 100%),
    linear-gradient(90deg, rgba(14,94,150,.32), transparent 55%);
}
.hero::after{ /* blueprint grid */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 30%, #000);
          mask-image:linear-gradient(to bottom, transparent 30%, #000);
}
.hero-inner{ width:100%; padding-top:calc(var(--nav-h) + 40px); padding-bottom:0; }
.hero .kicker{ color:#9FD3F5; }
.hero h1{ margin:22px 0 18px; max-width:13em; }
.hero .lead{ color:rgba(255,255,255,.82); max-width:54ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-foot{
  margin-top:clamp(40px,6vh,84px);
  border-top:1px solid rgba(255,255,255,.22);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.hero-foot .cell{
  padding:20px 22px 26px; border-right:1px solid rgba(255,255,255,.22);
}
.hero-foot .cell:last-child{ border-right:0; }
.hero-foot .v{
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(22px,2.4vw,32px); letter-spacing:-.02em;
}
.hero-foot .v small{ font-size:.55em; font-weight:500; color:var(--volt); margin-left:4px; }
.hero-foot .k{ font-size:14px; color:rgba(255,255,255,.66); margin-top:2px; }
@media (max-width:700px){
  .hero-foot{ grid-template-columns:1fr 1fr; }
  .hero-foot .cell{ border-top:1px solid rgba(255,255,255,.12); padding:16px 14px 20px; }
  .hero-foot .cell:nth-child(even){ border-right:0; }
  .hero-foot .v{ font-size:19px; letter-spacing:-.04em; }
  .hero-foot .k{ font-size:14px; }
}

/* stagger-in on load */
.hero [data-stagger]{ opacity:0; transform:translateY(28px); animation:rise .9s cubic-bezier(.2,.65,.25,1) forwards; }
.hero [data-stagger="1"]{ animation-delay:.15s; }
.hero [data-stagger="2"]{ animation-delay:.3s; }
.hero [data-stagger="3"]{ animation-delay:.45s; }
.hero [data-stagger="4"]{ animation-delay:.6s; }
.hero [data-stagger="5"]{ animation-delay:.78s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- sections ---------- */
.section{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.section.tight{ padding:clamp(44px,6vw,84px) 0; }
.on-dark{
  background:var(--ink); color:#EDF1F4;
}
.on-dark::before{ /* faint grid on dark sections */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--ink-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-3) 1px, transparent 1px);
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent);
          mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent);
}
.on-dark > *{ position:relative; }

/* ---------- stat band ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--line-d);
}
.stat{
  padding:clamp(24px,3vw,42px); border-right:1px solid var(--line-d);
  position:relative;
}
.stat:last-child{ border-right:0; }
.stat::before{
  content:"+"; position:absolute; top:-9px; left:-5px;
  font-family:var(--font-mono); color:var(--volt); font-size:14px;
}
.stat .v{
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(30px,3.2vw,46px); letter-spacing:-.03em; line-height:1.1;
  color:#fff;
}
.stat .unit{
  font-family:var(--font-mono); font-size:14px; color:var(--volt);
  letter-spacing:.08em; margin-top:4px;
}
.stat .k{ font-size:14px; color:var(--mute-d); margin-top:12px; line-height:1.55; }
@media (max-width:700px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-top:1px solid var(--line-d); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(even){ border-right:0; }
}

/* ---------- service cards ---------- */
.svc-grid{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.svc{
  background:var(--paper); padding:34px 28px 38px; position:relative;
  display:flex; flex-direction:column; gap:14px;
  transition:background .3s;
}
.svc:hover{ background:var(--paper-2); }
.svc .idx{
  font-family:var(--font-mono); font-size:14px; color:var(--brand); font-weight:600;
}
.svc h3{ font-size:19px; font-weight:700; }
.svc p{ font-size:15px; color:var(--mute); line-height:1.75; }
.svc .svc-img{
  aspect-ratio:16/10; overflow:hidden; margin:4px -28px -38px; margin-top:auto; order:5;
}
.svc .svc-img img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92);
  transition:transform .6s cubic-bezier(.2,.65,.25,1);
}
.svc:hover .svc-img img{ transform:scale(1.05); }

/* ---------- product grid (mounting / chargers) ---------- */
.prod-grid{
  display:grid; gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.prod{
  position:relative; overflow:hidden; background:var(--ink-2); color:#fff;
  border:1px solid var(--line); display:block;
}
.prod .ph{ aspect-ratio:4/3; overflow:hidden; }
.prod .ph img{
  width:100%; height:100%; object-fit:cover; opacity:.92;
  transition:transform .7s cubic-bezier(.2,.65,.25,1), opacity .4s;
}
.prod:hover .ph img{ transform:scale(1.06); opacity:1; }
.prod .body{
  position:absolute; inset:auto 0 0 0; padding:18px 20px;
  background:linear-gradient(transparent, rgba(12,19,24,.92) 38%);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding-top:54px;
}
.prod h3{
  font-size:17px; font-weight:700; letter-spacing:.01em; line-height:1.3;
}
.prod .sub{ font-size:14px; color:var(--mute-d); margin-top:2px; }
.prod .go{
  flex:none; width:38px; height:38px; border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; font-family:var(--font-mono);
  transition:background .25s,color .25s, transform .25s;
}
.prod:hover .go{ background:var(--volt); border-color:var(--volt); color:var(--ink); transform:translateX(3px); }
.prod.wide{ grid-column:span 2; }
@media (max-width:700px){ .prod.wide{ grid-column:span 1; } }

/* ---------- feature (characteristics) ---------- */
.feat-split{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:900px){ .feat-split{ grid-template-columns:1fr; } }
.feat-split .ph{ overflow:hidden; border:1px solid var(--line-d); }
.feat-split .ph img{ width:100%; height:100%; object-fit:cover; }
.feat-list{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-d);
  border:1px solid var(--line-d);
}
@media (max-width:520px){ .feat-list{ grid-template-columns:1fr; } }
.feat{
  background:var(--ink); padding:22px 22px 24px; transition:background .3s;
}
.feat:hover{ background:var(--ink-2); }
.feat .no{ font-family:var(--font-mono); font-size:13px; color:var(--volt); }
.feat h3{ font-size:16.5px; font-weight:600; margin-top:8px; }
.feat p{ font-size:14px; color:var(--mute-d); margin-top:6px; line-height:1.65; }

/* ---------- logo marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; }
.marquee-track{
  display:flex; gap:clamp(40px,6vw,96px); align-items:center; width:max-content;
  animation:scroll 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee img{ height:52px; width:auto; filter:grayscale(1); opacity:.6; transition:filter .3s,opacity .3s; }
.marquee img:hover{ filter:none; opacity:1; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg, var(--brand-deep), var(--brand) 55%, #2FA3E8);
}
.cta-band::after{
  content:""; position:absolute; inset:0; opacity:.2; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:72px 72px;
}
.cta-band .wrap{
  position:relative; z-index:1; padding-top:clamp(52px,7vw,96px); padding-bottom:clamp(52px,7vw,96px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
}
.cta-band .h2{ max-width:18em; }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#D6DEE4; }
.footer .top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,72px);
  padding:clamp(48px,6vw,84px) 0 40px;
  border-bottom:1px solid var(--line-d);
}
@media (max-width:860px){ .footer .top{ grid-template-columns:1fr; } }
.footer .f-logo img{ height:40px; width:auto; }
.footer .f-note{ margin-top:18px; font-size:14px; color:var(--mute-d); max-width:38ch; line-height:1.8; }
.footer h4{
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--volt); margin-bottom:18px;
}
.footer .f-list li{ margin-bottom:10px; }
.footer .f-list a{ font-size:15px; color:#D6DEE4; transition:color .2s; }
.footer .f-list a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.footer address{ font-style:normal; font-size:15px; line-height:2; color:#D6DEE4; }
.footer address a{ color:#9FD3F5; }
.footer .socials{ display:flex; gap:10px; margin-top:18px; }
.footer .socials a{
  width:40px; height:40px; border:1px solid var(--line-d); display:grid; place-items:center;
  transition:background .25s, border-color .25s;
}
.footer .socials a:hover{ background:var(--brand); border-color:var(--brand); }
.footer .socials svg{ width:17px; height:17px; fill:#fff; }
.footer .bottom{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  padding:22px 0 26px; font-family:var(--font-mono); font-size:13.5px; color:var(--mute-d);
}
.footer .bottom a{ color:var(--mute-d); }
.footer .bottom a:hover{ color:#fff; }

/* ---------- inner page hero ---------- */
.page-hero{
  position:relative; color:#fff; isolation:isolate; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(56px,9vw,120px)) 0 clamp(44px,6vw,80px);
  background:var(--ink);
}
.page-hero .bg{ position:absolute; inset:0; z-index:-2; }
.page-hero .bg img{ width:100%; height:100%; object-fit:cover; opacity:.38; }
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(165deg, rgba(12,19,24,.55), rgba(12,19,24,.92));
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.14; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:96px 96px;
}
.crumbs{
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:.06em;
  color:var(--mute-d); display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;
}
.crumbs a:hover{ color:#fff; }
.crumbs .sep{ color:var(--brand); }
.page-hero h1{ margin-bottom:14px; }
.page-hero .lead{ color:rgba(255,255,255,.8); }

/* ---------- product detail ---------- */
.detail-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,72px); align-items:start; }
@media (max-width:920px){ .detail-grid{ grid-template-columns:1fr; } }
.spec-card{ border:1px solid var(--line); background:var(--paper-2); position:sticky; top:calc(var(--nav-h) + 24px); }
@media (max-width:920px){ .spec-card{ position:static; } }
.spec-card .head{
  padding:18px 24px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.spec-card dl{ padding:8px 24px 18px; }
.spec-card .row{
  display:grid; grid-template-columns:minmax(110px,38%) 1fr; gap:16px;
  padding:11px 0; border-bottom:1px dashed var(--line); font-size:15px;
}
.spec-card .row:last-child{ border-bottom:0; }
.spec-card dt{ color:var(--mute); }
.spec-card dd{ font-weight:500; }
.spec-card .apps{ padding:16px 24px 22px; border-top:1px solid var(--line); }
.spec-card .apps li{
  position:relative; padding-left:22px; margin:8px 0; font-size:15px;
}
.spec-card .apps li::before{
  content:"+"; position:absolute; left:0; color:var(--volt); font-family:var(--font-mono); font-weight:600;
}
.shot-stack{ display:grid; gap:clamp(14px,1.6vw,22px); }
.shot-stack figure{ overflow:hidden; border:1px solid var(--line); background:#fff; }
.shot-stack img{ width:100%; }
.shot-stack figcaption{
  font-family:var(--font-mono); font-size:13.5px; color:var(--mute);
  padding:10px 16px; border-top:1px solid var(--line);
}
.shot-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px); }
@media (max-width:560px){ .shot-pair{ grid-template-columns:1fr; } }

/* prev / next product nav */
.pn{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);
}
.pn a{
  background:var(--paper); padding:24px 26px; transition:background .25s;
  display:flex; flex-direction:column; gap:4px;
}
.pn a:hover{ background:var(--paper-2); }
.pn .dir{ font-family:var(--font-mono); font-size:13px; color:var(--brand); letter-spacing:.1em; text-transform:uppercase; }
.pn .t{ font-weight:700; font-size:17px; }
.pn a.next{ text-align:right; align-items:flex-end; }
@media (max-width:560px){ .pn{ grid-template-columns:1fr; } }

/* ---------- project gallery ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,40px);
}
.filter-bar button{
  font-family:var(--font-mono); font-size:14px; letter-spacing:.06em;
  border:1px solid var(--line); background:transparent; color:var(--mute);
  padding:9px 18px; cursor:pointer; transition:all .2s;
}
.filter-bar button:hover{ border-color:var(--ink); color:var(--ink); }
.filter-bar button.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.gal{
  display:grid; gap:clamp(12px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.gal-item{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:var(--ink-2); aspect-ratio:4/3; display:block;
}
.gal-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.65,.25,1);
}
.gal-item:hover img{ transform:scale(1.05); }
.gal-item .cap{
  position:absolute; inset:auto 0 0 0; color:#fff;
  padding:38px 16px 12px;
  background:linear-gradient(transparent, rgba(12,19,24,.9));
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.gal-item .cap .t{ font-size:14.5px; font-weight:600; line-height:1.4; }
.gal-item .cap .d{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute-d); flex:none; }
.gal-item .cap .t small{
  display:block; font-weight:400; font-family:var(--font-mono);
  font-size:12px; color:var(--mute-d); margin-top:2px;
}
.gal-item .kw{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  background:var(--volt); color:var(--ink); padding:3px 9px;
}
.gal-more{ text-align:center; margin-top:clamp(28px,4vw,48px); }
.gal-item.hidden-extra{ display:none; }
/* lazy images fade in on load instead of popping (class added by JS only
   when the image isn't already cached — no JS means images stay visible) */
img.img-fade{ opacity:0; transition:opacity .55s ease; }
img.img-fade.img-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ img.img-fade{ opacity:1; transition:none; } }

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(8,12,16,.94);
  display:none; align-items:center; justify-content:center; padding:4vmin;
}
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:84vh; width:auto; height:auto; border:1px solid var(--line-d); }
.lb .lb-cap{
  position:absolute; bottom:3vmin; left:0; right:0; text-align:center;
  color:#fff; font-family:var(--font-mono); font-size:14px;
}
.lb button{
  position:absolute; background:none; border:1px solid var(--line-d); color:#fff;
  width:48px; height:48px; cursor:pointer; font-size:20px; font-family:var(--font-mono);
  transition:background .2s;
}
.lb button:hover{ background:var(--brand); border-color:var(--brand); }
.lb .lb-x{ top:3vmin; right:3vmin; }
.lb .lb-prev{ left:3vmin; top:50%; transform:translateY(-50%); }
.lb .lb-next{ right:3vmin; top:50%; transform:translateY(-50%); }

/* ---------- financial report pages ---------- */
.fin-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,4vw,48px); }
.fin-tabs a{
  font-size:14.5px; font-weight:500; border:1px solid var(--line);
  padding:10px 20px; color:var(--mute); transition:all .2s;
}
.fin-tabs a:hover{ border-color:var(--ink); color:var(--ink); }
.fin-tabs a.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
details.fin{
  border:1px solid var(--line); background:var(--paper-2); margin-bottom:14px;
}
details.fin summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:700; font-size:clamp(15.5px,1.3vw,17.5px);
  transition:background .2s;
}
details.fin summary::-webkit-details-marker{ display:none; }
details.fin summary:hover{ background:var(--paper); }
details.fin summary .mk{
  font-family:var(--font-mono); color:var(--brand); font-size:18px; flex:none;
  width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center;
  transition:transform .3s, background .2s, color .2s;
}
details.fin[open] summary .mk{ transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:#fff; }
details.fin .body{ border-top:1px solid var(--line); }
.fin-table{ width:100%; border-collapse:collapse; }
.fin-table th{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  text-align:left; color:var(--mute); padding:12px 24px; border-bottom:1px solid var(--line);
  font-weight:500;
}
.fin-table td{ padding:13px 24px; border-bottom:1px solid var(--line); font-size:15px; }
.fin-table tr:last-child td{ border-bottom:0; }
.fin-table tbody tr{ transition:background .15s; }
.fin-table tbody tr:hover{ background:var(--paper); }
.fin-table .dl{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13.5px; font-weight:600; letter-spacing:.04em;
  color:var(--brand);
}
.fin-table .dl:hover{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:4px; }
.fin-table .dl svg{ width:14px; height:14px; fill:currentColor; }

/* license callout */
.license-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px; justify-content:space-between;
  border:1px solid var(--line); border-left:4px solid var(--volt);
  background:var(--paper-2); padding:22px 26px; margin-bottom:clamp(28px,4vw,48px);
}
.license-card .t{ font-weight:700; }
.license-card .s{ font-size:14px; color:var(--mute); margin-top:2px; }

/* ---------- prose (privacy etc.) ---------- */
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(20px,2vw,26px); font-weight:700; margin:2.2em 0 .7em; }
.prose p, .prose li{ font-size:15.5px; line-height:1.9; color:#2A343B; margin-bottom:1em; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:24px; }
.prose ul li::before{ content:"+"; position:absolute; left:0; color:var(--brand); font-family:var(--font-mono); }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.08s; } .rv[data-d="2"]{ transition-delay:.16s; }
.rv[data-d="3"]{ transition-delay:.24s; } .rv[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* ---------- misc ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px); align-items:center; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }
.tag{
  display:inline-block; font-family:var(--font-mono); font-size:13px; letter-spacing:.1em;
  border:1px solid var(--line-d); color:var(--mute-d); padding:5px 12px; margin:0 8px 8px 0;
}
.hr-x{ border:0; border-top:1px solid var(--line); margin:clamp(36px,5vw,64px) 0; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:300; background:var(--volt); color:var(--ink);
  padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0; }