/* ==========================================================================
   Genesis Engineering Co. — Design tokens
   ========================================================================== */
:root{
  --navy: #101E36;
  --navy-2: #17284A;
  --ink: #0B1524;
  --porcelain: #F5F3EC;
  --paper: #FFFFFF;
  --copper: #E08E3E;
  --copper-dim: #C97830;
  --signal: #6FA8A0;
  --line: #DAD4C6;
  --line-dark: rgba(255,255,255,.14);
  --muted: #5B6472;
  --muted-on-dark: #AEB8CC;

  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--muted); max-width: 62ch; }

.mono{ font-family: var(--mono); }
.eyebrow{
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  display:flex; align-items:center; gap:.6em;
  margin-bottom: .9em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--copper);
  display:inline-block;
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section{ padding: clamp(56px, 9vw, 108px) 0; }
.section-tight{ padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }

.on-dark{ background: var(--navy); color: #fff; }
.on-dark p{ color: var(--muted-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3{ color: #fff; }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  display:inline-flex; align-items:center; gap:.5em;
  padding: .85em 1.5em;
  border-radius: 3px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }
.btn-copper{ background: var(--copper); color: var(--navy); }
.btn-copper:hover{ background: var(--copper-dim); transform: translateY(-1px); }
.btn-ghost-dark{ border-color: var(--line-dark); color:#fff; }
.btn-ghost-dark:hover{ border-color: var(--copper); color: var(--copper); }
.btn-ghost-light{ border-color: var(--line); color: var(--ink); }
.btn-ghost-light:hover{ border-color: var(--copper); color: var(--copper-dim); }

/* ---------- Header / Nav ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(16,30,54,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.nav{
  max-width: var(--max); margin:0 auto; padding: 0 var(--gutter);
  height: 76px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.7em; text-decoration:none; color:#fff; }
.brand-mark{ width: 34px; height: 34px; flex:none; }
.brand-word{ font-family: var(--display); font-weight:700; font-size: 1rem; letter-spacing:.02em; line-height:1.1; }
.brand-word small{ display:block; font-family: var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.14em; color: var(--muted-on-dark); margin-top:.25em; }

.nav-links{ display:flex; align-items:center; gap: clamp(18px,2.4vw,34px); list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color: var(--muted-on-dark); font-size:.92rem; font-weight:500;
  position:relative; padding: 6px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--copper);
}
.nav-cta{ display:flex; align-items:center; gap: 18px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; padding:8px; cursor:pointer; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    background: var(--navy); flex-direction:column; align-items:flex-start;
    padding: 8px var(--gutter) 24px; gap: 4px;
    border-bottom: 1px solid var(--line-dark);
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 10px 0; width:100%; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-copper{ display:none; }
}

/* ---------- Hero / title block ---------- */
.hero{ position:relative; overflow:hidden; padding-top: clamp(56px,8vw,96px); }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,5vw,56px);
  align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero h1{ margin-bottom:.45em; }
.hero-sub{ font-size: 1.06rem; max-width: 46ch; }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 1.8em; }

.sld-wrap{ width:100%; aspect-ratio: 1/1; max-width: 460px; margin: 0 auto; }
.sld-wrap svg{ width:100%; height:100%; }
.sld-line{ fill:none; stroke: rgba(255,255,255,.22); stroke-width:2; }
.sld-node{ fill: var(--navy-2); stroke: rgba(255,255,255,.35); stroke-width:1.5; }
.sld-label{ font-family: var(--mono); font-size:9px; fill: var(--muted-on-dark); letter-spacing:.04em; }
.pulse{
  fill: var(--copper);
  offset-rotate: 0deg;
  animation: run 3.6s linear infinite;
}
@keyframes run{
  0%{ offset-distance: 0%; opacity:0; }
  6%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance: 100%; opacity:0; }
}
.sld-path-motion{ offset-path: path(var(--d)); }

/* ---------- Title block spec strip ---------- */
.specstrip{
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(40px,6vw,72px);
}
.specstrip .wrap{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--line-dark);
}
@media (max-width: 760px){ .specstrip .wrap{ grid-template-columns: repeat(2,1fr); } }
.specitem{ background: var(--navy); padding: 20px clamp(14px,2vw,28px); }
.specitem .k{ font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; color: var(--muted-on-dark); text-transform:uppercase; }
.specitem .v{ font-family: var(--mono); font-size:.92rem; color:#fff; margin-top:.35em; }

/* ---------- Client roster ---------- */
.roster{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.roster-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
}
@media (max-width: 760px){ .roster-grid{ grid-template-columns: repeat(2,1fr); } }
.roster-item{
  background: var(--porcelain); padding: 26px 20px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--display); font-weight:600; font-size:1rem; color: var(--ink);
  min-height: 92px;
}

/* ---------- Cards ---------- */
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
@media (max-width: 860px){ .grid3{ grid-template-columns: 1fr; } }
.card{ background: var(--paper); padding: clamp(22px,3vw,32px); }
.card h3{ margin-bottom:.4em; }
.card p{ margin-bottom:0; font-size:.95rem; }
.card .tag{ font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; color: var(--copper-dim); text-transform:uppercase; }

/* ---------- Scope list (services) ---------- */
.scope-item{
  display:grid; grid-template-columns: 90px 1fr; gap: clamp(16px,3vw,36px);
  padding: clamp(26px,3.4vw,40px) 0;
  border-top: 1px solid var(--line);
}
.scope-item:last-child{ border-bottom: 1px solid var(--line); }
.scope-num{ font-family: var(--mono); color: var(--copper-dim); font-size: 1rem; padding-top:.15em; }
.scope-body h3{ margin-bottom:.5em; }
.scope-list{ list-style:none; margin: .8em 0 0; padding:0; display:grid; gap:.4em; }
.scope-list li{ font-size:.92rem; color: var(--muted); padding-left: 1.1em; position:relative; }
.scope-list li::before{ content:"—"; position:absolute; left:0; color: var(--copper); }

/* ---------- Status / current project callout ---------- */
.statuscard{
  border:1px solid var(--line-dark);
  background: var(--navy-2);
  padding: clamp(24px,3.4vw,40px);
  display:grid; grid-template-columns: auto 1fr auto; gap: clamp(16px,3vw,32px);
  align-items:center;
}
@media (max-width: 760px){ .statuscard{ grid-template-columns: 1fr; text-align:left; } }
.rev-badge{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--navy); background: var(--copper);
  padding: .4em .8em; border-radius:2px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.5em;
}
.rev-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--navy); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ---------- Credentials list (about) ---------- */
.creds{ display:grid; gap: 1px; background: var(--line); border:1px solid var(--line); }
.cred-row{ background: var(--paper); display:grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px clamp(16px,2.4vw,28px); }
@media (max-width:700px){ .cred-row{ grid-template-columns: 1fr; } }
.cred-row .k{ font-family: var(--mono); font-size:.78rem; color: var(--copper-dim); letter-spacing:.04em; }
.cred-row .v{ font-size:.95rem; color: var(--ink); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.field{ margin-bottom: 1.1em; }
.field label{ display:block; font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:.5em; }
.field input, .field textarea{
  width:100%; font-family: var(--body); font-size:.98rem; color: var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius:2px;
  padding: .8em .9em; resize: vertical;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--copper); outline-offset:1px; border-color:var(--copper); }
.form-note{ font-size:.82rem; color: var(--muted); margin-top: .6em; }
.map-frame{ width:100%; aspect-ratio: 4/3; border:1px solid var(--line); filter: grayscale(.15) contrast(1.02); }

/* ---------- Illustration cards (field work diagrams) ---------- */
.illus-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
@media (max-width: 980px){ .illus-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .illus-grid{ grid-template-columns: 1fr; } }
.illus-card{ background: var(--paper); padding: 20px 20px 22px; }
.illus-card svg{ width:100%; height:auto; display:block; margin-bottom: 14px; }
.illus-card h4{ font-family: var(--display); font-weight:700; font-size:.98rem; margin:0 0 .3em; color: var(--ink); }
.illus-card p{ font-size: .85rem; margin:0; color: var(--muted); }
.illus-stroke{ fill:none; stroke: var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.illus-stroke-thin{ fill:none; stroke: var(--navy); stroke-width:1; opacity:.55; }
.illus-copper{ fill:none; stroke: var(--copper); stroke-width:1.8; stroke-linecap:round; }
.illus-copper-fill{ fill: var(--copper); }
.illus-signal{ fill:none; stroke: var(--signal); stroke-width:1.4; stroke-dasharray:3 3; }
.illus-fill-soft{ fill: var(--porcelain); stroke: var(--navy); stroke-width:1.2; }
.illus-label{ font-family: var(--mono); font-size:7.5px; fill: var(--muted); letter-spacing:.03em; }

/* ---------- Notable projects ---------- */
.projects-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
@media (max-width: 860px){ .projects-grid{ grid-template-columns: 1fr; } }
.project-card{ background: var(--paper); padding: clamp(20px,2.6vw,28px); }
.project-card .illus-mini{ width: 100%; max-width: 220px; height:auto; margin-bottom: 16px; }
.project-card .tag{ font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; color: var(--copper-dim); text-transform:uppercase; }
.project-card h3{ margin: .3em 0 .4em; }
.project-card p{ font-size:.92rem; margin:0; }
footer.site{ background: var(--navy); color: var(--muted-on-dark); padding: 44px 0 28px; }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.footer-brand{ display:flex; align-items:center; gap:.7em; }
.footer-links{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; font-size:.9rem; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color: var(--muted-on-dark); }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top: 20px; font-size:.78rem; font-family: var(--mono); color: var(--muted-on-dark); }

/* ---------- Reveal on scroll (progressive enhancement only) ---------- */
.reveal{ opacity:1; transform:none; }
html.has-js .reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.has-js .reveal.in{ opacity:1; transform:none; }

/* ---------- Page hero (non-home) ---------- */
.page-hero{ padding: clamp(48px,7vw,80px) 0 clamp(32px,5vw,48px); }
.page-hero p{ font-size: 1.02rem; max-width: 58ch; }

.breadcrumb{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; color: var(--muted-on-dark); text-transform:uppercase; }