/* ============================================================
   Forefield Engineering Services
   Design tokens
   ============================================================ */

:root {
  --navy:        #0F1B24;
  --navy-lift:   #16252F;
  --navy-line:   #22343F;
  --teal:        #3E8E7E;
  --teal-deep:   #2F6E61;
  --offwhite:    #F4F1EC;
  --paper:       #FBFAF7;
  --gray:        #9FB3AC;
  --ink:         #14202A;
  --ink-soft:    #4C5B63;
  --rule:        #DCD6CB;

  --measure: 66ch;
  --shell: 1180px;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.90vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.60rem + 1.90vw, 3.10rem);
  --step-4:  clamp(2.55rem, 1.80rem + 3.40vw, 4.60rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.012em; font-variation-settings: "wdth" 104; }
h4 { font-size: var(--step-0); font-weight: 700; font-variation-settings: "wdth" 100; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip {
  position: absolute; left: -999px;
  background: var(--teal); color: #fff; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

/* ============================================================
   Masthead
   ============================================================ */

.masthead {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  position: sticky; top: 0; z-index: 40;
}

.masthead .shell {
  display: flex; align-items: center; gap: 28px;
  min-height: 74px;
}

.mark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--offwhite);
  margin-right: auto;
}

.mark svg { display: block; width: 30px; height: 30px; flex: none; }

.mark b {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 118;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
  line-height: 1;
}

.mark span {
  display: block;
  font-size: 0.68rem; color: var(--gray); letter-spacing: 0.08em;
  line-height: 1; margin-top: 4px; font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 26px; }

.nav a {
  color: var(--gray); text-decoration: none;
  font-size: 0.93rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--offwhite); }
.nav a[aria-current="page"] { color: var(--offwhite); border-bottom-color: var(--teal); }

.nav .nav-cta {
  background: var(--teal); color: #06121A;
  padding: 9px 18px; border-bottom: none; font-weight: 600;
}
.nav .nav-cta:hover { background: var(--offwhite); color: var(--navy); }

.menu-btn {
  display: none; background: none; border: 1px solid var(--navy-line);
  color: var(--offwhite); padding: 9px 14px; font: inherit; font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 880px) {
  .menu-btn { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); border-bottom: 1px solid var(--navy-line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 20px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--navy-line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--navy-line); }
  .nav .nav-cta { text-align: center; margin-top: 14px; border: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background: var(--navy);
  color: var(--offwhite);
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 104px);
}

.contours {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.contours path { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.20; }
.contours path:nth-child(even) { opacity: 0.11; }

.hero .shell { position: relative; }

.hero h1 { max-width: 17ch; }

.hero .lede {
  font-size: var(--step-1);
  color: #D7DEDB;
  max-width: 56ch;
  margin-top: 26px;
  line-height: 1.5;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.btn {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 0.97rem;
  padding: 14px 26px; border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease;
}
.btn-solid { background: var(--teal); color: #06121A; }
.btn-solid:hover { background: var(--offwhite); color: var(--navy); }
.btn-ghost { border-color: #3B4E59; color: var(--offwhite); }
.btn-ghost:hover { border-color: var(--offwhite); color: var(--offwhite); background: rgba(255,255,255,0.05); }

/* Scope note — the liability statement */
.scope-note {
  background: var(--navy-lift);
  border-top: 1px solid var(--navy-line);
  color: var(--gray);
  padding: 20px 0;
  font-size: 0.94rem;
}
.scope-note .shell { display: flex; gap: 14px; align-items: baseline; }
.scope-note strong { color: var(--offwhite); font-weight: 600; }
.scope-note p { max-width: none; margin: 0; }

/* ============================================================
   Page header (interior pages)
   ============================================================ */

.pagehead {
  background: var(--navy); color: var(--offwhite);
  padding: clamp(52px, 6vw, 88px) 0 clamp(44px, 5vw, 72px);
  position: relative; overflow: hidden;
}
.pagehead h1 { font-size: var(--step-3); max-width: 20ch; }
.pagehead p {
  color: #CBD5D1; font-size: var(--step-1); line-height: 1.5;
  margin: 22px 0 0; max-width: 58ch;
}
.pagehead .shell { position: relative; }

/* ============================================================
   Sections
   ============================================================ */

.band { padding: clamp(56px, 7vw, 104px) 0; }
.band-paper { background: var(--paper); }
.band-navy { background: var(--navy); color: var(--offwhite); }
.band-navy h2, .band-navy h3 { color: var(--offwhite); }
.band-navy p { color: #CBD5D1; }
.band + .band { border-top: 1px solid var(--rule); }
.band-navy + .band, .band + .band-navy { border-top: none; }

.band-head { max-width: 62ch; margin-bottom: clamp(34px, 4vw, 56px); }
.band-head p { margin-top: 18px; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.band-navy .band-head p { color: #CBD5D1; }

.hairline { width: 56px; height: 3px; background: var(--teal); margin-bottom: 22px; }

/* Discipline list — bordered rows, plan-index feel */
.index-list { border-top: 1px solid var(--rule); }
.index-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 20ch) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.index-row .sheet {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem; color: var(--teal-deep); padding-top: 4px; letter-spacing: 0.04em;
}
.index-row p { margin: 0; color: var(--ink-soft); }
.index-row h3 { margin-bottom: 6px; }
.index-row .tools {
  display: block; margin-top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .index-row { grid-template-columns: 3.4rem 1fr; gap: 16px; }
  .index-row p, .index-row .tools { grid-column: 2; }
}

/* Two column prose */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Fact blocks */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.band-navy .facts { background: var(--navy-line); border-color: var(--navy-line); }
.fact { background: var(--paper); padding: 26px 24px; }
.band-navy .fact { background: var(--navy); }
.fact b {
  display: block; font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 108; font-weight: 800;
  font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em;
}
.fact span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.45; }
.band-navy .fact span { color: var(--gray); }

/* Numbered process — genuine sequence */
.steps { counter-reset: step; border-top: 1px solid var(--rule); }
.band-navy .steps { border-top-color: var(--navy-line); }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--rule);
}
.band-navy .step { border-bottom-color: var(--navy-line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace; font-size: 0.9rem;
  color: var(--teal); padding-top: 5px; letter-spacing: 0.04em;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); }
.band-navy .step p { color: #CBD5D1; }
@media (max-width: 560px) { .step { grid-template-columns: 2.6rem 1fr; gap: 14px; } }

/* Software */
.tool-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tool {
  border: 1px solid var(--rule); padding: 9px 15px;
  font-size: 0.9rem; color: var(--ink-soft); background: var(--paper);
}
.band-navy .tool { border-color: var(--navy-line); background: var(--navy-lift); color: #CBD5D1; }

/* Case blocks */
.case {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 26px;
  margin-bottom: 44px;
}
.case:last-child { margin-bottom: 0; }
.case .meta {
  font-family: "IBM Plex Mono", monospace; font-size: 0.78rem;
  color: var(--teal-deep); letter-spacing: 0.03em; margin: 0 0 10px;
}
.case h3 { margin-bottom: 10px; }
.case p { color: var(--ink-soft); }
.case ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); max-width: var(--measure); }
.case li { margin-bottom: 6px; }

/* Q&A */
.qa { border-top: 1px solid var(--rule); }
.band-navy .qa { border-top-color: var(--navy-line); }
.qa > div { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.band-navy .qa > div { border-bottom-color: var(--navy-line); }
.qa h3 { margin-bottom: 8px; }
.qa p { color: var(--ink-soft); }
.band-navy .qa p { color: #CBD5D1; }

/* CTA band */
.cta-band { background: var(--teal); color: #06121A; padding: clamp(48px, 6vw, 84px) 0; }
.cta-band h2 { color: #06121A; max-width: 20ch; }
.cta-band p { color: #0B2A24; margin-top: 18px; font-size: var(--step-1); line-height: 1.5; }
.cta-band .btn-solid { background: var(--navy); color: var(--offwhite); }
.cta-band .btn-solid:hover { background: #06121A; color: #fff; }

/* Forms */
.form { max-width: 640px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: 0.93rem; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 0.98rem;
  padding: 12px 14px; border: 1px solid var(--rule);
  background: #fff; color: var(--ink); border-radius: 0;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: 2px solid rgba(62,142,126,0.25); outline-offset: 0; }
.field .hint { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; }
button.btn { cursor: pointer; font-family: inherit; }

.contact-direct { border: 1px solid var(--rule); background: var(--paper); padding: 28px; }
.contact-direct h3 { margin-bottom: 16px; }
.contact-direct dl { margin: 0; }
.contact-direct dt { font-size: 0.83rem; color: var(--ink-soft); margin-top: 16px; }
.contact-direct dt:first-child { margin-top: 0; }
.contact-direct dd { margin: 3px 0 0; font-weight: 500; }

/* ============================================================
   Title block footer
   ============================================================ */

.titleblock { background: var(--navy); color: var(--gray); padding: 0 0 40px; }
.titleblock .shell { padding-top: 40px; }

.tb-grid {
  border: 1px solid var(--navy-line);
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1fr;
}
.tb-cell { padding: 20px 22px; border-right: 1px solid var(--navy-line); }
.tb-cell:last-child { border-right: none; }
.tb-cell .k {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: #6E8A82; display: block; margin-bottom: 9px;
}
.tb-cell .v { color: var(--offwhite); font-size: 0.94rem; line-height: 1.5; }
.tb-cell .v a { color: var(--offwhite); text-decoration: none; display: block; padding: 2px 0; }
.tb-cell .v a:hover { color: var(--teal); }
.tb-cell b {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 116;
  font-weight: 800; font-size: 1.02rem; color: var(--offwhite); letter-spacing: 0.02em;
  display: block; margin-bottom: 8px;
}
@media (max-width: 900px) { .tb-grid { grid-template-columns: 1fr 1fr; } .tb-cell { border-bottom: 1px solid var(--navy-line); } }
@media (max-width: 520px) { .tb-grid { grid-template-columns: 1fr; } .tb-cell { border-right: none; } }

.colophon {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding-top: 22px; font-size: 0.84rem; color: #6E8A82;
}