/* =========================================================
   AMS ENGINEERING CONSULTANTS — DESIGN SYSTEM
   Concept: structural elevation drawing / blueprint annotation.
   Colors drawn from the AMS mark and fact sheet palette.
   ========================================================= */


:root{
  /* color */
  --ink:        #1B2233;
  --ink-70:     rgba(27,34,51,.74);
  --ink-50:     rgba(27,34,51,.54);
  --navy:       #1B2A6B;
  --navy-deep:  #0F1B4C;
  --navy-light: #3E52A0;
  --grey:       #686868;
  --steel:      var(--navy);
  --steel-deep: var(--navy-deep);
  --steel-light:var(--navy-light);
  --line:       #AEB6C4;
  --line-soft:  #DBDFE6;
  --paper:      #F4F5F7;
  --paper-dim:  #E8EAEF;
  --white:      #FFFFFF;
  --rust:       #B08A20;
  --rust-dark:  #8C6E19;
  --gold:       var(--rust);

  /* type */
  /* One family site-wide, matching the AMS fact sheet (Arial) */
  --f-body: Arial, Helvetica, "Liberation Sans", sans-serif;
  --f-display: var(--f-body);
  --f-mono: var(--f-body);

  --radius: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.64;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--rust);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--rust);
  display:inline-block;
}

/* ---------- headings ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  color:var(--navy-deep);
  line-height:1.15;
  letter-spacing:0;
}
h1{ font-size:54px; }
h2{ font-size:38px; }
h3{ font-size:23px; letter-spacing:0; }
p{ color:var(--ink-70); font-size:18px; }

/* ---------- header / nav ---------- */
.site-header{
  border-bottom:1px solid var(--line-soft);
  background:var(--paper);
  position:relative;
  z-index:20;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 40px;
  max-width:1180px;
  margin:0 auto;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:70px; width:auto; display:block; }
.nav-links{
  display:flex;
  gap:36px;
  font-family:var(--f-mono);
  font-size:14.5px;
  letter-spacing:.04em;
}
.nav-links a{
  color:var(--ink-70);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:.15s;
}
.nav-links a.active,
.nav-links a:hover{
  color:var(--navy);
  border-bottom:1px solid var(--rust);
}
.nav-cta{
  font-family:var(--f-mono);
  font-size:13.5px;
  letter-spacing:.04em;
  color:var(--white);
  background:var(--steel);
  padding:11px 20px;
  border-radius:var(--radius);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:14.5px;
  letter-spacing:.03em;
  font-weight:700;
  padding:15px 24px;
  border-radius:var(--radius);
  border:1px solid var(--steel);
}
.btn-primary{ background:var(--steel); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink-50); }
.btn-rust{ background:var(--rust); border-color:var(--rust); color:var(--white); }

/* ---------- dimension-line divider (signature motif) ---------- */
.dim-rule{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--line);
  margin:0;
}
.dim-rule .tick{ width:1px; height:9px; background:var(--line); }
.dim-rule .line{ flex:1; height:1px; background:var(--line); }
.dim-rule .label{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ink-50);
  white-space:nowrap;
}

/* ---------- stat strip ---------- */
.stat-strip{
  background:var(--navy-deep);
  color:var(--white);
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:40px 0;
}
.stat{
  padding:0 28px;
  border-left:1px solid rgba(255,255,255,.16);
}
.stat:first-child{ border-left:none; }
.stat .num{
  font-family:var(--f-display);
  font-size:42px;
  font-weight:700;
  color:var(--white);
}
.stat .label{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.64);
  margin-top:8px;
}

/* ---------- section spacing ---------- */
.section{ padding:104px 0; }
.section-tight{ padding:70px 0; }
.section-dark{ background:var(--navy-deep); color:var(--white); }
.section-dark h2, .section-dark h3{ color:var(--white); }
.section-dark p{ color:rgba(255,255,255,.7); }
.section-steel{ background:var(--navy); color:var(--white); }
.section-steel h2, .section-steel h3{ color:var(--white); }
.section-steel p{ color:rgba(255,255,255,.72); }
.section-dark .list-check li, .section-steel .list-check li{ color:rgba(255,255,255,.8); }
.section-paper-dim{ background:var(--paper-dim); }

/* ---------- cards / grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.card{
  background:var(--white);
  border:1px solid var(--line-soft);
  padding:30px;
  border-radius:var(--radius);
}
.service-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  padding:28px 26px;
  border-radius:var(--radius);
}
.service-card .idx{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--rust);
  letter-spacing:.06em;
  margin-bottom:16px;
  display:block;
}
.service-card h3{ font-size:20px; margin-bottom:11px; }
.service-card p{ font-size:16px; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,.7);
  padding:70px 0 30px;
}
.footer-logo{ height:104px; width:auto; display:block; margin-bottom:6px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:46px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-h{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
  margin-bottom:18px;
}
.footer-grid a, .footer-grid p{ color:rgba(255,255,255,.74); font-size:15.5px; margin-bottom:9px; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top:24px;
  font-family:var(--f-mono);
  font-size:12.5px;
  color:rgba(255,255,255,.42);
}

/* ---------- utility ---------- */
.mono{ font-family:var(--f-mono); }
.tag{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.05em;
  border:1px solid var(--line);
  color:var(--ink-70);
  padding:6px 12px;
  border-radius:2px;
  display:inline-block;
}
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; }
.lede{ font-size:21px; color:var(--ink-70); max-width:680px; }
.list-check{ display:flex; flex-direction:column; gap:13px; }
.list-check li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:16.5px;
  color:var(--ink-70);
}
.list-check li::before{
  content:"";
  width:6px; height:6px;
  margin-top:9px;
  background:var(--rust);
  flex:0 0 auto;
}

/* ---------- pillar cards (mission / vision / values) ---------- */
.pillar-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-top:3px solid var(--navy);
  padding:34px 30px;
  border-radius:var(--radius);
}
.pillar-card.gold{ border-top-color:var(--rust); }
.pillar-card .pillar-label{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:14px;
  display:block;
}
.pillar-card h3{ margin-bottom:12px; }
.pillar-card p{ font-size:16.5px; }

.quote-block{
  font-family:var(--f-body);
  font-size:26px;
  line-height:1.5;
  color:var(--navy-deep);
  font-weight:400;
  max-width:900px;
}

.subhead{
  font-family:var(--f-body);
  font-weight:600;
  font-size:19px;
  color:var(--navy);
  max-width:760px;
  line-height:1.5;
  margin-top:6px;
}

/* ---------- working contact form ---------- */
.field label{
  display:block;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-50);
}
.field input, .field select, .field textarea{
  width:100%;
  margin-top:8px;
  padding:8px 0;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  font-family:var(--f-body);
  font-size:17px;
  color:var(--ink);
  outline:none;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--navy); }
.form-sent{
  background:var(--paper-dim);
  border-left:3px solid var(--rust);
  padding:14px 16px;
  margin-bottom:22px;
  font-size:16px;
  color:var(--navy-deep);
}
.field select{ font-size:15px; }

/* ---------- hero: identical left edge on every page ---------- */
.hero > h1, .hero > p, .hero > .eyebrow{ max-width:880px; }
.hero > .subhead{ margin-top:18px; }

/* ---------- leadership bio columns ---------- */
.bio-cols{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid var(--line-soft);
}
.bio-cols h4{
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:16px;
}

/* breathing room between card titles and their text */
.card h3{ margin-bottom:10px; }

/* leadership portrait */
.profile-head{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.profile-photo{ width:260px; height:auto; border-radius:2px; border:1px solid var(--line-soft); display:block; }
@media (max-width:760px){ .profile-head{ grid-template-columns:1fr; } .profile-photo{ width:200px; } }