@font-face{font-family:Inter;src:url(assets/fonts/Inter-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-700.woff2) format("woff2");font-weight:700}
@font-face{font-family:Inter;src:url(assets/fonts/Inter-800.woff2) format("woff2");font-weight:800}
:root{--brand:#10253f;--accent:#d8b56a;--ink:#0e1726;--paper:#f6f3ec;--navy:#10253f;--gold:#d8b56a}
*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:18px;line-height:1.5}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 28px;background:rgba(16,37,63,.96);color:#fff;backdrop-filter:blur(8px);font-size:15px;font-weight:700}
.topbar a{text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.topbar a:hover{background:rgba(255,255,255,.1)}
.topbar .sp{flex:1}
.topbar .brandname{opacity:.7;font-weight:400}
.topbar .key{opacity:.55;font-weight:400;font-size:13px}
.hero{background:var(--brand);color:#fff;padding:72px 0 56px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 70%)}
.wrap{width:min(1280px,calc(100% - 56px));margin:0 auto;position:relative}
.hero .kicker{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.hero h1{font-size:clamp(40px,5vw,72px);line-height:1.02;margin:0 0 14px;letter-spacing:-.02em;font-weight:800}
.hero .people{font-size:18px;opacity:.8;margin:0 0 24px}
.hero .summary{font-size:24px;line-height:1.45;max-width:52ch;margin:0}
.hero .logo{position:absolute;right:0;top:0;max-width:320px;max-height:120px;object-fit:contain;background:#fff;padding:14px 18px;border-radius:16px}
.hero .logo.dark{background:transparent;padding:0}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chips span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700}
.chips a{padding:8px 16px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:14px;font-weight:800;text-decoration:none}
section.block{padding:56px 0}
section.block h2{font-size:32px;margin:0 0 18px;letter-spacing:-.01em}
.built{columns:2;column-gap:48px;font-size:19px;margin:0;padding-left:22px}
.built li{break-inside:avoid;margin:0 0 10px}
.frame{position:relative;border-radius:18px;overflow:hidden;border:8px solid #1b2b44;background:#fff;box-shadow:0 26px 60px rgba(16,37,63,.25)}
.frame .url{background:#1b2b44;color:#cfd8e6;font-size:14px;padding:8px 16px;display:flex;justify-content:space-between;align-items:center}
.frame .url a{color:var(--gold);text-decoration:none;font-weight:700}
.frame iframe{display:block;width:100%;height:78vh;border:0;background:#fff}
.frame img.shot{display:block;width:100%}
.frame .scroller{max-height:78vh;overflow:auto}
.ba{position:relative;aspect-ratio:1440/1000;border-radius:18px;overflow:hidden;border:8px solid #1b2b44;user-select:none;box-shadow:0 26px 60px rgba(16,37,63,.25)}
.ba img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:5px;background:var(--gold);transform:translateX(-2px);cursor:ew-resize}
.ba .handle::after{content:"\21D4";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:26px;font-weight:800}
.ba .tag{position:absolute;top:16px;padding:7px 14px;border-radius:999px;font-weight:800;font-size:15px;background:rgba(11,26,46,.8);color:#fff}
.ba .tag.before{left:16px}.ba .tag.after-tag{right:16px;background:var(--gold);color:var(--navy)}
.ba-note{font-size:15px;opacity:.65;margin:10px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.piece{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 14px 36px rgba(16,37,63,.12);border:1px solid rgba(16,37,63,.08);cursor:zoom-in}
.piece img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;background:#eee}
.piece figcaption{padding:12px 14px;font-size:14px;font-weight:700}
.piece.wide img{aspect-ratio:16/10}
.lightbox{position:fixed;inset:0;background:rgba(5,12,22,.92);display:none;z-index:50;padding:30px;cursor:zoom-out;overflow-y:auto;overscroll-behavior:contain}
.lightbox.on{display:flex}
.lightbox img{margin:auto;display:block;width:min(1100px,100%);height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pager{display:flex;justify-content:space-between;gap:14px;padding:40px 0 70px}
.pager a{text-decoration:none;font-weight:800;padding:14px 20px;border-radius:999px;background:#fff;border:1px solid rgba(16,37,63,.12)}
footer{background:var(--navy);color:rgba(255,255,255,.7);padding:22px 0;font-size:14px}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:10px 0 60px}
.tile{display:block;text-decoration:none;color:#fff;border-radius:20px;overflow:hidden;min-height:220px;position:relative;padding:24px 24px 48px;background:var(--b,#10253f);box-shadow:0 18px 44px rgba(16,37,63,.18);transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile img{max-height:54px;max-width:200px;object-fit:contain;background:#fff;padding:8px 10px;border-radius:10px;margin-bottom:18px;display:block}
.tile b{display:block;font-size:24px;line-height:1.15;letter-spacing:-.01em}
.tile small{display:block;margin-top:8px;opacity:.8;font-size:14px}
.tile .n{position:absolute;right:18px;bottom:16px;font-size:13px;opacity:.75;font-weight:700}
@media (max-width:900px){.built{columns:1}.hero .logo{position:static;margin-bottom:18px}}
.tile .ppmini{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:16px}
.tile .ppmini img{width:100%;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;margin:0;max-width:none;max-height:none}

/* motion layer (fx.js adds .fx to <html>; static without it or under reduced-motion) */
.fx .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease var(--d,0ms),transform .55s ease var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}
.fx .tile{transition:transform .18s ease,box-shadow .18s ease,opacity .55s ease var(--d,0ms)}
.fx .tile:hover{box-shadow:0 26px 60px rgba(16,37,63,.30)}
.fx .lightbox img{transition:transform .25s ease,opacity .25s ease;transform:scale(.97);opacity:0}
.fx .lightbox.on img{transform:scale(1);opacity:1}

/* hub look-and-feel: ambient glow, terminal, PP tile pulse */
.hero--home{background:
  radial-gradient(900px 420px at 20% -10%, rgba(134,188,222,.16), transparent 60%),
  radial-gradient(700px 380px at 92% 12%, rgba(31,138,93,.14), transparent 60%),
  var(--brand)}
.mkTerm{max-width:680px;margin:18px 0 22px;border-radius:16px;border:1px solid rgba(120,255,170,.25);background:rgba(0,0,0,.42);box-shadow:0 18px 46px rgba(0,0,0,.28);overflow:hidden}
.mkTerm__top{display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(120,255,170,.16)}
.mkTerm__dot{width:9px;height:9px;border-radius:999px;background:rgba(120,255,170,.45)}
.mkTerm__label{margin-left:8px;color:rgba(120,255,170,.72);font-weight:900;letter-spacing:.08em;font-size:12px}
.mkTerm__body{padding:14px 14px 16px;color:rgba(120,255,170,.95);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(17px,1.4vw,21px);line-height:1.45;text-shadow:0 0 10px rgba(120,255,170,.18);min-height:34px;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.mkTerm__prompt{color:rgba(120,255,170,.75);font-weight:900;user-select:none}
.mkTerm__cursor{width:9px;height:1.2em;background:rgba(120,255,170,.85);box-shadow:0 0 10px rgba(120,255,170,.3);animation:mkBlink 1s steps(1) infinite;margin-top:2px}
@keyframes mkBlink{50%{opacity:0}}
.mkTerm__cursor.is-hidden{animation:none;opacity:0}
.mkFinal{position:relative;display:inline-block;min-width:10px}
.mkFinal__text,.mkFinal__brand{display:inline-block;font-weight:900;letter-spacing:-.01em;white-space:nowrap}
.mkFinal__text{color:rgba(120,255,170,.95);transition:color 2.2s ease,opacity .7s ease}
.mkFinal__brand{position:absolute;left:0;top:0;opacity:0;color:#f5dfa3;text-shadow:0 0 18px rgba(216,181,106,.25);transition:opacity .7s ease;pointer-events:none}
.mkFinal.is-morphing .mkFinal__text{color:#f5dfa3;text-shadow:0 0 18px rgba(216,181,106,.2)}
.mkFinal.is-swapped .mkFinal__text{opacity:0}
.mkFinal.is-swapped .mkFinal__brand{opacity:1}
.tile--pp{position:relative}
.tile--pp::before{content:"";position:absolute;inset:-8px;border-radius:26px;background:radial-gradient(circle at center, rgba(231,201,127,.32) 0%, rgba(231,201,127,.12) 40%, rgba(231,201,127,0) 72%);filter:blur(10px);opacity:.7;pointer-events:none;animation:ppPulse 2.8s ease-in-out infinite;z-index:-1}
@keyframes ppPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.03);opacity:.95}}
@media (prefers-reduced-motion: reduce){.mkTerm__cursor{animation:none}.tile--pp::before{animation:none}}
@media (max-width:640px){.mkFinal__text,.mkFinal__brand{white-space:normal}}