:root {
  /* BUS-STD-001 paragraph 8.0 is authoritative for these three.
     Everything else below is derived from them for the site's own use,
     which paragraph 2.1.b leaves to the site. */
  --brand-primary:   #152230;   /* deep slate  */
  --brand-accent:    #2E9E8F;   /* teal - restraint required, see below */
  --brand-secondary: #4A5C6E;   /* supporting text */

  --color-bg: #f7f9fb;
  --color-surface: #ffffff;
  --color-text: var(--brand-primary);
  --color-muted: var(--brand-secondary);
  --color-primary: var(--brand-primary);
  --color-primary-light: #24384c;
  --color-border: #dce4ea;
  --radius: 8px;
  --max-width: 1080px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.2; margin-top: 0; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.9rem; margin-bottom: 8px; }
h3 { font-size: 1.2rem; }

a { color: var(--color-primary-light); }

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-decoration: none;
}
.nav a {
  margin-left: 28px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
}
.nav a:hover { color: var(--color-primary-light); }

/* Hero */
.hero {
  padding: 88px 0 72px;
  text-align: center;
}
.hero h1 { color: var(--color-primary); max-width: 760px; margin-left: auto; margin-right: auto; }
.lede {
  max-width: 620px;
  margin: 20px auto 32px;
  color: var(--color-muted);
  font-size: 1.1rem;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-light); }

/* Services */
.services { padding: 64px 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { color: var(--color-primary); }
.card p { color: var(--color-muted); margin-bottom: 0; }

/* Approach */
.approach {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 64px 0;
}
.approach p { max-width: 680px; color: var(--color-muted); font-size: 1.05rem; }

/* Contact */
.contact { padding: 64px 0 88px; }
.contact-form {
  max-width: 520px;
  margin-top: 24px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.field input,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

/* Honeypot field — hidden from sighted users and screen readers alike.
   A real visitor never sees or interacts with this; only an automated
   form-filler that ignores CSS/ARIA state would populate it, which is
   exactly the signal server/routes/contact.js uses to reject the submission. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 14px;
  font-weight: 600;
  min-height: 1.2em;
}
.form-status[data-state="success"] { color: #1a7a3c; }
.form-status[data-state="error"] { color: #b3261e; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  h1 { font-size: 1.9rem; }
  .hero { padding: 56px 0 48px; }
  .nav a { margin-left: 16px; }
}

/* ---------------------------------------------------------------
   Multi-page structure: skip link, active nav, page heads, footer.
   Appended rather than rewritten so the existing hero, card, and
   form rules stay exactly as they were.
   --------------------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px;
  background: var(--color-primary); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

.nav a.is-active { color: var(--color-primary); font-weight: 600; }

.page-head { padding: 3rem 0 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.page-head h1 { margin: 0 0 .5rem; }
.page-head .meta { color: var(--color-muted); font-size: .9rem; margin: .25rem 0 0; }

.wrap.narrow { max-width: 720px; }

.service-detail { padding: 2.5rem 0; }
.service-detail.alt { background: var(--color-surface); }
.service-detail h2 { margin-top: 0; }
.service-detail + .service-detail { border-top: 1px solid var(--color-border); }

.ticks { list-style: none; padding: 0; margin: 1rem 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin: .5rem 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-primary);
}

.aside { color: var(--color-muted); font-size: .95rem; border-left: 3px solid var(--color-border); padding-left: 1rem; }

.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.btn-ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary); color: #fff; }

.card-link { font-weight: 600; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

.cta { padding: 3rem 0; background: var(--color-primary); color: #fff; text-align: center; }
.cta h2 { margin-top: 0; color: #fff; }
.cta .btn-primary { background: #fff; color: var(--color-primary); }

.hint { display: block; color: var(--color-muted); font-size: .85rem; margin-top: .25rem; }

.site-footer { background: var(--color-text); color: #c9d4dd; padding: 2rem 0; margin-top: 0; }
.footer-inner { display: flex; flex-direction: column; gap: .75rem; align-items: center; text-align: center; }
.footer-brand { font-weight: 700; color: #fff; margin: 0; }
.footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a, .footer-note a { color: #9fb6c7; }
.footer-note { font-size: .9rem; margin: 0; }

@media (max-width: 600px) {
  .header-inner { flex-direction: column; gap: .5rem; }
  .nav { gap: .9rem; }
}

/* ===================================================================
   VERTICAL RHYTHM AND RESPONSIVE LAYOUT
   ===================================================================
   Spacing was set per-section, so every section chose its own padding
   and the gaps between them were whatever two neighbours happened to
   add up to. Below the hero buttons that came to 152px of empty space
   — 72px hero padding, 16px button margin, 64px section padding.

   These rules replace that with one scale. Every section uses the same
   token, so the rhythm is a property of the page rather than an
   accident of which two sections meet.

   clamp() makes the scale fluid: it shrinks on a phone and grows on a
   wide display without a breakpoint for each size. The middle value is
   viewport-relative, the outer two are the floor and ceiling.
   =================================================================== */

:root {
  --space-section: clamp(2.25rem, 4.5vw, 3.5rem);  /* between major bands   */
  --space-block:   clamp(1.25rem, 2.5vw, 2rem);  /* between blocks within */
  --space-tight:   clamp(.75rem, 1.5vw, 1rem);   /* label-to-control      */
}

/* One padding rule for every band, so no two neighbours can disagree. */
.hero,
.services,
.approach,
.contact,
.cta,
.service-detail { padding: var(--space-section) 0; }

/* The hero is asymmetric on purpose.
   More above, because nothing precedes it and the page needs a top edge.
   LESS below, because the next section contributes its own padding and the
   two add together - a symmetric hero makes the space under the buttons the
   largest gap on the page, which is where the eye is least served by it. */
.hero {
  padding-top:    calc(var(--space-section) * 1.5);
  padding-bottom: calc(var(--space-section) * 0.7);
}

/* The buttons are the last thing in the hero; the section padding is the
   space below them. A margin here would be added to that, not instead of it. */
.hero-actions { margin: var(--space-block) 0 0; }
.hero .lede   { margin: var(--space-tight) auto var(--space-block); }

/* Consecutive bands of the same colour need a divider, not double padding. */
.service-detail + .service-detail { border-top: 1px solid var(--color-border); }

.page-head { padding: calc(var(--space-section) * .9) 0 var(--space-block); }

/* --- mobile ----------------------------------------------------------
   Below 620px the header stacks, the nav becomes a wrapped row, and every
   interactive target is at least 44px on its shortest side, which is the
   minimum WCAG 2.2 Target Size (Minimum) 2.5.8 accepts and the size a
   thumb actually hits.
   -------------------------------------------------------------------- */
@media (max-width: 620px) {
  .header-inner { flex-direction: column; align-items: center; gap: .5rem; }
  .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; }
  .nav a { margin-left: 0; padding: .55rem .25rem; display: inline-block; min-height: 44px; line-height: 1.9; }

  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .btn { padding: .85rem 1.25rem; min-height: 44px; }

  .cards { grid-template-columns: 1fr; gap: var(--space-block); }
  .two-col { grid-template-columns: 1fr; }

  /* Inputs at 16px or larger stop iOS zooming the page on focus. */
  input, textarea, select { font-size: 16px; min-height: 44px; }
  textarea { min-height: 8rem; }

  .footer-nav { gap: .25rem 1rem; }
  .footer-nav a { padding: .4rem 0; display: inline-block; }
}

/* Nothing may force a horizontal scrollbar. A single wide element does it
   to the whole document, and it is the most common phone layout fault. */
html, body { overflow-x: hidden; }
img, svg, table, pre { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Standalone links need a target, not just a text run.
   WCAG 2.2 SC 2.5.8 Target Size (Minimum), Level AA, requires 24x24 CSS px.
   Its exception is for links INLINE in a sentence, which these are not - they
   sit alone as the call to action for a card or a section, so the exception
   does not apply and the bar does. 44px is used rather than the 24px minimum
   because that is what a thumb actually hits, and it costs nothing here. */
.card-link {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* Footer navigation is a row of standalone links, same reasoning. */
.footer-nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 .15rem;
}

/* Brand mark. The logo is decorative in the footer (alt="") because the word
   "Fawcett Systems" sits beside it — announcing it twice helps nobody using a
   screen reader. In the header it carries the alt text, because there it IS
   the link's accessible name. */
.brand img { display: block; height: 44px; width: auto; }
.footer-mark { vertical-align: middle; margin-right: .4rem; opacity: .9; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: .1rem; }
@media (max-width: 620px) { .brand img { height: 38px; } }

/* ---- accent -------------------------------------------------------------
   BUS-STD-001 paragraph 8.2: the accent SHALL NOT be used for large fills,
   backgrounds, or body text. It is also too light for text on white -
   #2E9E8F against #ffffff is roughly 2.9:1, below the 4.5:1 WCAG 2.2 SC 1.4.3
   requires. So it appears only as a small non-text mark: the rule under a
   heading and the focus ring, where SC 1.4.11 asks 3:1 against the adjacent
   colour and it comfortably passes.
   ------------------------------------------------------------------------- */
.hero h1::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 2px;
  background: var(--brand-accent); margin: 1rem auto 0;
}
.page-head h1::after {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 2px;
  background: var(--brand-accent); margin: .75rem 0 0;
}
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.cta { background: var(--brand-primary); }