:root{
  --bg: #000;
  --panel: #111;
  --text: #eaeaea;
  --muted: #cfcfcf;
  --ink: #0c0c0c;
  --surface: #121212;
  --gray: #d9d9d9;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:#eaeaea}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* Header like screenshot: black bar, logo left, nav right */
.header{background:#000;position:sticky;top:0;z-index:100;border-bottom:1px solid #0a0a0a}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:42px;object-fit:contain;border-radius:6px}
.brand .name{font-weight:600;font-size:18px;letter-spacing:.2px}
.nav{display:flex;gap:22px}
.nav a{opacity:.9}
.nav a.active{text-decoration:underline}
/* Hero on Home: roomy left-aligned layout */
.hero{padding:64px 0 80px;background:#000}
.hero h1{font-size: clamp(36px,5.6vw,64px);line-height:1.15;margin:0 0 16px;font-weight:800}
.hero p{font-size: clamp(16px,2.2vw,22px);color:var(--muted);max-width:60ch;margin:0 0 12px}
/* Spectrum Arc banner at top edge (optional decorative) */
.arc-top{height:22px;background-image:url('images/spectrum-arc.png');background-size:cover;background-repeat:no-repeat;background-position:top left}
/* About page section: light gray panel like screenshot */
.section-gray{background:#d9d9d9;color:#0d0d0d;padding:80px 0}
.section-gray h1{font-size: clamp(32px,5vw,64px);margin:0 0 24px;font-weight:700}
.section-gray p, .section-gray li{color:#222}
.two-col{display:grid;grid-template-columns: 1fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr} .header-inner{height:64px} .brand img{height:36px;width:36px}}
/* Card (generic) */
.card{background:#0f0f0f;border:1px solid #181818;border-radius:14px;padding:22px}
/* Footer: email right-aligned */
.footer{background:#000;border-top:16px solid #0a0a0a}
.footer .row{display:flex;align-items:center;justify-content:flex-end;padding:18px 0}
.footer a{font-size:18px}


/* Contact page styles (match screenshot) */
.section-contact{background:#d9d9d9;color:#0d0d0d;padding:80px 0}
.section-contact h1{font-size: clamp(28px,4vw,40px);text-align:center;margin:0 0 10px;font-weight:700}
.section-contact .lead{color:#333;text-align:center;margin:0 0 4px}
.section-contact .sub{color:#444;text-align:center;margin:0 0 40px}
.form-wrap{max-width:900px;margin:0 auto}
label{display:block;font-weight:600;color:#111;margin:18px 0 8px}
.input, .textarea{width:100%;padding:16px 18px;background:#efefef;border:2px solid #606060;
  color:#000;border-radius:28px;outline:none}
.textarea{border-radius:22px;min-height:180px;resize:vertical}
.helper{font-size:14px;color:#555;margin-left:8px;font-weight:400}
.button-send{display:inline-block;margin:24px auto 0;background:#0a0a0a;color:#fff;
  border:0;border-radius:999px;padding:14px 26px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.center{text-align:center}

/* iOS header spacing & nav readability */
.header-inner { gap: 16px; }
.brand .name { margin-right: 14px; }
.nav { gap: 28px; }
.nav a { padding: 8px 6px; letter-spacing: .3px; }

/* On very small screens, hide the wordmark to avoid run-on with nav */
@media (max-width: 520px) {
  .brand .name { display: none; }
}

/* iOS text autosize smoothing */
@supports (-webkit-touch-callout: none) {
  body { -webkit-text-size-adjust: 100%; }
}