:root {
  --ink:#05080b;
  --panel:#0c1319;
  --panel-2:#111b22;
  --text:#f5f8fa;
  --muted:#aab6c0;
  --line:rgba(255,255,255,.14);
  --accent:#32d5e5;
  --accent-rgb:50,213,229;
  --max:1240px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { min-width:320px; margin:0; color:var(--text); background:var(--ink); font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.55; }
body.generator { --accent:#ff8b2b; --accent-rgb:255,139,43; }
body.custom { --accent:#b36cff; --accent-rgb:179,108,255; }
img { display:block; max-width:100%; }
a { color:inherit; }
.shell { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }

.site-header { position:sticky; z-index:20; top:0; height:72px; border-bottom:1px solid var(--line); background:rgba(5,8,11,.9); backdrop-filter:blur(18px); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:34px; height:34px; object-fit:contain; filter:invert(1); opacity:.88; }
.brand-name { display:flex; align-items:baseline; gap:.35rem; margin:0; font-size:clamp(.9rem,2vw,1.16rem); font-weight:800; letter-spacing:.07em; line-height:1; text-transform:uppercase; }
.brand-name span { color:#8d9aa4; font-size:.72em; letter-spacing:.13em; }
.site-nav { display:flex; align-items:center; gap:24px; font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.site-nav a { text-decoration:none; }
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current="page"] { color:var(--accent); }
.contact-link { display:inline-flex; align-items:center; gap:8px; }
.contact-link::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.8); }

.hero { position:relative; min-height:620px; display:grid; align-items:end; overflow:hidden; border-bottom:1px solid rgba(var(--accent-rgb),.26); isolation:isolate; }
.hero-media { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(3,6,9,.97) 0%,rgba(3,6,9,.76) 48%,rgba(3,6,9,.23) 100%),linear-gradient(0deg,#05080b 0%,transparent 45%); }
.hero-content { max-width:760px; padding:96px 0 72px; }
.eyebrow { margin:0 0 15px; color:var(--accent); font-size:.8rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,p { text-wrap:pretty; }
h1 { margin:0; font-size:clamp(3.35rem,9vw,7.4rem); line-height:.84; letter-spacing:-.065em; text-transform:uppercase; }
.hero-summary { max-width:650px; margin:26px 0 0; color:#d2d9de; font-size:clamp(1.05rem,2vw,1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#07090a; font-weight:900; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; }
.button.secondary { background:rgba(5,8,11,.6); color:var(--text); }
.button:hover,.button:focus-visible { filter:brightness(1.12); transform:translateY(-1px); }

.section { padding:88px 0; }
.section + .section { border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(32px,7vw,96px); align-items:start; margin-bottom:42px; }
.section-heading h2 { margin:0; font-size:clamp(2.25rem,5vw,4.7rem); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; }
.section-heading p { max-width:650px; margin:0; color:var(--muted); font-size:1.1rem; }
.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.capability { min-height:190px; padding:26px; background:var(--panel); }
.capability strong { display:block; margin-bottom:12px; color:var(--accent); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.capability h3 { margin:0 0 10px; font-size:1.35rem; line-height:1.05; }
.capability p { margin:0; color:var(--muted); }

.project { display:grid; grid-template-columns:1.08fr .92fr; min-height:520px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 22px 60px rgba(0,0,0,.28); }
.project + .project { margin-top:26px; }
.project.reverse { grid-template-columns:.92fr 1.08fr; }
.project.reverse .project-media { order:2; }
.project-media { min-height:430px; }
.project-media img { width:100%; height:100%; object-fit:cover; }
.project-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,64px); }
.project-number { margin:0 0 14px; color:var(--accent); font-size:.75rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.project-copy h2 { margin:0; font-size:clamp(2rem,4vw,3.7rem); line-height:.92; letter-spacing:-.045em; }
.project-copy > p { margin:20px 0 0; color:var(--muted); font-size:1.05rem; }
.project-copy ul { margin:24px 0 0; padding:0; display:grid; gap:9px; list-style:none; }
.project-copy li { position:relative; padding-left:18px; color:#d7dfe4; }
.project-copy li::before { content:""; position:absolute; left:0; top:.65em; width:7px; height:2px; background:var(--accent); }

.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.gallery figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.gallery img { width:100%; height:390px; object-fit:cover; }
.gallery figcaption { padding:18px 20px 20px; color:var(--muted); }
.gallery strong { display:block; margin-bottom:4px; color:var(--text); font-size:1.12rem; }
.video-wrap { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#000; box-shadow:0 20px 55px rgba(0,0,0,.32); }
.video-wrap iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }

.cta { padding:82px 0; border-top:1px solid rgba(var(--accent-rgb),.28); background:radial-gradient(circle at 20% 50%,rgba(var(--accent-rgb),.11),transparent 36%),var(--panel); }
.cta-inner { display:flex; align-items:end; justify-content:space-between; gap:36px; }
.cta h2 { max-width:760px; margin:0; font-size:clamp(2.3rem,5.5vw,5rem); line-height:.9; letter-spacing:-.05em; text-transform:uppercase; }
.cta p { max-width:600px; margin:20px 0 0; color:var(--muted); font-size:1.05rem; }
.site-footer { padding:28px 0; color:#7e8b94; text-align:center; font-size:.8rem; }
.fine-print { max-width:780px; margin:12px auto 0; color:#66737c; font-size:.75rem; }

@media (max-width:900px) {
  .site-nav a:not(.contact-link) { display:none; }
  .hero { min-height:560px; }
  .hero::before { background:linear-gradient(0deg,rgba(3,6,9,.98) 0%,rgba(3,6,9,.7) 68%,rgba(3,6,9,.3) 100%); }
  .section-heading { grid-template-columns:1fr; }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
  .project,.project.reverse { grid-template-columns:1fr; }
  .project.reverse .project-media { order:0; }
  .project-media { min-height:360px; }
  .cta-inner { display:grid; }
}
@media (max-width:600px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .site-header { height:66px; }
  .brand-mark { width:29px; height:29px; }
  .brand-name { font-size:.82rem; letter-spacing:.04em; }
  .hero { min-height:520px; }
  .hero-content { padding:72px 0 52px; }
  .section { padding:64px 0; }
  .capability-grid,.gallery { grid-template-columns:1fr; }
  .capability { min-height:0; }
  .project-media { min-height:300px; }
  .gallery img { height:310px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }
