/* ===== header =========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 74px;
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The full lockup's tagline is ~8% of the artwork height. At a 38px header that
   would render it near 3px — illegible, and it reads as "blurry" rather than
   "too small". So the header uses the compact lockup, which has no tagline to
   lose, instead of scaling the full one down until it turns to mush. */
.brand img { height: 38px; width: auto; }
@media (max-width: 22rem) { .brand img { height: 32px; } }

/* Theme-swapped lockup: the navy wordmark vanishes on the dark background. */
.brand__dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__light { display: none; }
  :root:not([data-theme="light"]) .brand__dark { display: block; }
}
:root[data-theme="dark"] .brand__light { display: none; }
:root[data-theme="dark"] .brand__dark { display: block; }
:root[data-theme="light"] .brand__light { display: block; }
:root[data-theme="light"] .brand__dark { display: none; }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li + li { margin-top: 0; }

.nav__link {
  color: var(--text);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent); border-bottom-color: var(--border-strong); }
.nav__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-2);
  cursor: pointer;
  line-height: 0;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 62rem) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) 1.25rem var(--space-5);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--border); }
  .nav .btn { margin-top: var(--space-4); justify-content: center; }
}

/* ===== buttons ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .78rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn--light { background: #fff; border-color: #fff; color: var(--brand-navy); }
.btn--light:hover { background: var(--navy-50); border-color: var(--navy-50); color: var(--brand-navy); }

.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn--sm { padding: .55rem 1.05rem; font-size: .9rem; }
.btn--lg { padding: .95rem 1.8rem; font-size: 1.03rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ===== hero ============================================================= */

.hero {
  background: linear-gradient(168deg, var(--navy-900) 0%, #002A7A 58%, #003AAD 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);
  position: relative;
  overflow: hidden;
}
/* Faint echo of the process-loop mark. Decorative only. */
.hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  background: url('/assets/img/brand/icon-mark.svg') center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
@media (max-width: 62rem) { .hero::after { display: none; } }

.hero__inner { max-width: 40rem; position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero p { color: #C7D4EC; }
.hero .lead { color: #D8E2F4; }
.hero .eyebrow { color: #8FA8D4; }

/* ===== trust bar ======================================================== */

.trustbar {
  background: var(--navy-900);
  color: #C7D4EC;
  padding-block: var(--space-4);
  font-size: .92rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  text-align: center;
}
.trustbar strong { color: #fff; font-weight: 600; }
.trustbar__sep { color: rgba(255,255,255,.3); }

/* ===== cards / grids ====================================================
   Fixed column counts, not auto-fit. auto-fit with an odd number of items
   leaves a ragged final row (5 items land 3 + 2 with the pair stretched).   */

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 62rem) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card h3 { margin-bottom: var(--space-1); }
.card p { color: var(--text-muted); font-size: .97rem; }
.card__foot { margin-top: auto; padding-top: var(--space-3); }

.card--link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card--link:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
.card--link:hover h3 { color: var(--accent); }

/* Feature card — the Architecture service leads the page, so it gets width. */
.card--feature {
  background: linear-gradient(155deg, var(--navy-900), #002E85);
  border-color: transparent;
  color: #fff;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}
.card--feature h3 { color: #fff; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.card--feature p { color: #C7D4EC; font-size: 1.02rem; }

.card__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.card--feature .card__tag { border-color: rgba(255,255,255,.35); color: #A8C0E8; }

/* ===== numbered steps =================================================== */

.step { display: flex; gap: var(--space-4); }
.step__num {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 1rem;
}
.step h3 { margin-bottom: var(--space-1); }
.step p { color: var(--text-muted); margin: 0; font-size: .97rem; }
:root[data-theme="dark"] .step__num,
.section--dark .step__num { background: rgba(255,255,255,.12); color: #fff; }

/* ===== split ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}
/* When one column is a long list, centring the short column strands it in the
   middle of a tall gap. Anchor both to the top instead. */
.split--top { align-items: start; }
@media (max-width: 62rem) { .split { grid-template-columns: 1fr; } }

/* ===== stat list ======================================================== */

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.facts li { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; }
.facts__k {
  flex: 0 0 8.5rem;
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts__v { font-size: .98rem; }

/* ===== callout ========================================================== */

.callout {
  border-left: 3px solid var(--brand-blue);
  background: var(--bg-subtle);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ===== form ============================================================= */

.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--space-2); }
.field > label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .84rem; color: var(--text-muted); }

.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .72rem .9rem;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field__error { font-size: .86rem; color: var(--danger); min-height: 0; }
.field__error:empty { display: none; }

.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .28rem; flex: 0 0 auto; }
.check label { font-size: .92rem; color: var(--text-muted); font-weight: 400; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

.form__status {
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: .96rem;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"] {
  background: color-mix(in srgb, var(--success) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--bg));
}
.form__status[data-state="error"] {
  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--bg));
}

/* ===== footer =========================================================== */

/* No margin-top: sections already carry their own padding, and a margin here
   punches a white band between a tinted final section and the footer. */
.site-footer {
  background: var(--navy-900);
  color: #C7D4EC;
  padding-block: var(--space-8) var(--space-5);
}
.site-footer a { color: #C7D4EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 {
  color: #fff;
  font-size: .78rem;
  font-family: var(--font-accent);
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 62rem) { .site-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .site-footer__main { grid-template-columns: 1fr; } }

.site-footer__brand img { height: 44px; width: auto; margin-bottom: var(--space-4); }
.site-footer__brand p { font-size: .95rem; max-width: 30ch; }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 var(--space-2); font-size: .95rem; }

.site-footer__offices { display: grid; gap: var(--space-4); }
.site-footer__office strong {
  display: block;
  color: #fff;
  font-size: .9rem;
  margin-bottom: var(--space-1);
}
.site-footer__office span { display: block; font-size: .92rem; }

.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__legal li { margin: 0; font-size: .87rem; }
.site-footer__legal p { margin: 0; }

/* ===== breadcrumb ======================================================= */

.crumbs { font-size: .88rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--text); }

/* ===== page head ======================================================== */

.pagehead {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.pagehead h1 { margin-bottom: var(--space-3); }
.pagehead .lead { max-width: 46rem; margin-bottom: 0; }