/* Fonts are served from this site (Latin subset, SIL Open Font License). */
@font-face{
  font-family:'Big Shoulders Display'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('/fonts/bigshouldersdisplay.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/publicsans.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/spacemono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/spacemono-700.woff2') format('woff2');
}

:root{
  --bg:#10151a;
  --bg-raise:#161d23;
  --surface:#1a2229;
  --surface-2:#212b33;
  --border:#2b3941;
  --border-soft:#212c33;
  --ember:#e8672c;
  --ember-soft:#f2955f;
  --ember-dim:#5a3826;
  --steel:#7c93a3;
  --steel-dim:#3a4750;
  --text:#eef1f2;
  --text-muted:#9aa7ae;
  --text-faint:#5e6b73;
  --font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --maxw:1180px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
  color:var(--text);
}
p{ margin:0; }
a{ color:inherit; }
::selection{ background:var(--ember); color:#160c07; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
@media (min-width:640px){ .wrap{ padding-inline:40px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--ember);
  display:inline-block;
  flex:none;
}

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,21,26,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:16px;
}
.wordmark{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
}
.wordmark .name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:2.5rem;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--text);
}
.wordmark .name span{ color:var(--ember); }
.wordmark .sub{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text-faint);
}
nav.links{
  display:flex; align-items:center; gap:28px;
}
nav.links a.navlink{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-muted);
  padding-block:4px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.links a.navlink:hover{ color:var(--text); border-color:var(--steel); }
.call-pill{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--surface);
  padding:8px 14px;
  white-space:nowrap;
}
.call-pill:hover{ border-color:var(--ember); }
.beacon{
  width:7px; height:7px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 0 0 rgba(232,103,44,0.6);
  animation:pulse 2.2s ease-out infinite;
  flex:none;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(232,103,44,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(232,103,44,0); }
  100%{ box-shadow:0 0 0 0 rgba(232,103,44,0); }
}
@media (prefers-reduced-motion:reduce){ .beacon{ animation:none; } }

/* Small screens: the section links drop to their own row under the wordmark. */
@media (max-width:760px){
  .navrow{ flex-wrap:wrap; row-gap:10px; padding-block:12px; }
  .wordmark .name{ font-size:1.9rem; }
  nav.links{
    order:3; width:100%; gap:24px;
    padding-top:8px; border-top:1px solid var(--border-soft);
  }
}

/* ---------- Hero ---------- */
.hero{ padding-block:56px 40px; }
@media (min-width:900px){ .hero{ padding-block:88px 56px; } }
.hero-grid{
  display:grid; gap:36px;
}
@media (min-width:980px){
  .hero-grid{ grid-template-columns:1.05fr 0.95fr; align-items:center; gap:56px; }
}
.hero h1{
  font-size:clamp(2.5rem, 6vw, 4rem);
  margin-block:16px 20px;
}
.hero h1 em{
  font-style:normal;
  color:var(--ember);
}
.hero p.lede{
  font-size:1.06rem;
  color:var(--text-muted);
  max-width:52ch;
}
.cta-row{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:30px;
}
.btn{
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--ember); color:#180d06; }
.btn-primary:hover{ background:var(--ember-soft); }
.btn-ghost{ border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }

/* elevation diagram */
.elevation{
  border:1px solid var(--border);
  background:var(--bg-raise);
  padding:18px 18px 14px;
}
.elevation svg{ display:block; width:100%; height:auto; }
.elevation .cap{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ---------- Section scaffolding ---------- */
section{ padding-block:64px; border-top:1px solid var(--border-soft); }
@media (min-width:900px){ section{ padding-block:88px; } }
.section-head{
  display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:flex-end;
  margin-bottom:40px;
}
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.6rem); margin-top:10px; }
.strata-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  border:1px solid var(--border);
  padding:6px 12px;
  white-space:nowrap;
}

/* ---------- About ---------- */
.about-grid{
  display:grid; gap:32px;
}
@media (min-width:900px){ .about-grid{ grid-template-columns:0.9fr 1.1fr; gap:64px; } }
.about-copy p{ color:var(--text-muted); max-width:60ch; }
.about-copy p + p{ margin-top:16px; }
.stat-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
}
.stat{
  background:var(--bg-raise);
  padding:20px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.stat .num{
  font-family:var(--font-display);
  font-weight:800; font-size:2rem; color:var(--ember);
}
.stat .label{
  font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint);
}

/* ---------- Services ---------- */
.service-grid{
  display:grid; gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
@media (min-width:840px){ .service-grid{ grid-template-columns:repeat(3,1fr); } }
.service{
  background:var(--bg-raise);
  padding:32px 26px;
  display:flex; flex-direction:column; gap:16px;
}
.service .icon{
  width:42px; height:42px;
  color:var(--ember);
}
.service .band{
  font-family:var(--font-mono);
  font-size:0.64rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--steel);
}
.service h3{
  font-size:1.3rem;
  text-transform:none;
  letter-spacing:0;
}
.service p{ color:var(--text-muted); font-size:0.95rem; }
.service ul{
  margin:4px 0 0; padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:7px;
}
.service li{
  font-size:0.88rem; color:var(--text-muted);
  padding-left:16px; position:relative;
}
.service li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width:6px; height:1px; background:var(--steel);
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:40px; }
@media (min-width:940px){ .contact-grid{ grid-template-columns:0.85fr 1.15fr; gap:64px; } }
.contact-info{ display:flex; flex-direction:column; gap:22px; }
.contact-line{
  display:flex; flex-direction:column; gap:4px;
}
.contact-line .k{
  font-family:var(--font-mono); font-size:0.64rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);
}
.contact-line a{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.45rem;
  text-decoration:none;
  color:var(--text);
  text-transform:uppercase;
}
.contact-line a:hover{ color:var(--ember); }

form{
  display:flex; flex-direction:column; gap:18px;
  background:var(--bg-raise); border:1px solid var(--border);
  padding:28px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);
}
.field input, .field textarea, .field select{
  font-family:var(--font-body);
  font-size:0.98rem;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--ember);
  outline-offset:1px;
  border-color:var(--ember);
}
.form-note{
  font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-faint); line-height:1.5;
}
.form-note.is-ok{ color:var(--text); }
.form-note.is-error{ color:var(--ember-soft); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.row2{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:520px){ .row2{ grid-template-columns:1fr 1fr; } }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border-soft);
  padding-block:32px;
}
.foot-row{
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-faint);
}
.foot-row a{ text-decoration:none; color:var(--text-faint); }
.foot-row a:hover{ color:var(--steel); }

/* ---------- Former inline styles ---------- */
.contact-note{ color:var(--text-muted); max-width:38ch; font-size:0.94rem; }
form button.btn{ align-self:flex-start; cursor:pointer; }

/* Plain result page shown by contact.php when JavaScript is off. */
.fallback{ padding-block:40px; display:flex; flex-direction:column; gap:16px; }
.fallback a{ color:var(--ember); }