/* ==========================================================================
   MFA Engineering & Consulting
   Direction: engineering consultancy. Logo-led, service-first, generous
   white space. Imagery is the practice's own drawing work, not stock.
   ========================================================================== */

:root{
  --ink:      #0d1733;
  --navy:     #15235c;
  --navy-mid: #33447f;
  --slate:    #5b678d;
  --gold:     #f5be1e;
  --gold-hero:#f5be1e;   /* exact brand gold, matched to the logo */
  --gold-deep:#8e6a05;   /* passes 4.5:1 on white and mist */
  --paper:    #ffffff;
  --mist:     #f2f5f9;
  --mist-2:   #e7ecf4;
  --rule:     #d6dced;

  --display:"Archivo","Archivo Expanded",Helvetica,Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1240px;
  --gut: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:none !important; transition:none !important; }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
img{ display:block; }
a{ color:var(--navy); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

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

.skip{ position:absolute; left:-9999px; background:var(--navy); color:#fff; padding:12px 18px; z-index:300; }
.skip:focus{ left:8px; top:8px; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.05; margin:0 0 .5em; }
h1{ font-size:clamp(40px,6.6vw,82px); letter-spacing:-.02em; text-transform:uppercase; }
h2{ font-size:clamp(28px,3.8vw,46px); letter-spacing:-.015em; }
h3{ font-size:clamp(19px,2vw,23px); letter-spacing:-.005em; }
p{ margin:0 0 1.15em; }
.lede{ font-size:clamp(17.5px,1.9vw,21px); line-height:1.62; color:#38446e; max-width:64ch; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep); margin:0 0 16px;
}
.eyebrow--on-navy{ color:var(--gold); }

/* ---------- header ---------- */
.topline{
  background:#fff; color:var(--navy); border-bottom:2px solid var(--gold);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
}
.topline .wrap{ display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:36px; flex-wrap:wrap; }
.topline a{ color:var(--navy); text-decoration:none; }
.topline a:hover{ color:var(--gold-deep); }
@media (max-width:640px){
  .topline{ font-size:10.5px; letter-spacing:.06em; }
  .topline .wrap{ justify-content:center; gap:6px 14px; padding-block:7px; }
}

.masthead{ background:#fff; border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:200; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:104px; }
.logo img{ height:62px; width:auto; }
@media (max-width:520px){ .logo img{ height:46px; } }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  font-size:14px; font-weight:500; letter-spacing:.02em; text-decoration:none; color:var(--ink);
  text-transform:uppercase; padding:8px 0; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--gold); }
.nav .cta-link{
  background:var(--navy); color:#fff !important; border:0; padding:13px 22px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
}
.nav .cta-link:hover{ background:var(--gold); color:var(--ink) !important; }

.navtoggle{
  display:none; background:none; border:1px solid var(--rule); padding:10px 14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; cursor:pointer; color:var(--navy);
}
@media (max-width:1000px){
  .nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
        border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; gap:0;
        padding:6px var(--gut) 22px; }
  .nav.open{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--mist-2); }
  .nav .cta-link{ margin-top:16px; text-align:center; }
  .navtoggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; border-bottom:1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(242,245,249,.97) 100%),
    repeating-linear-gradient(0deg,  var(--rule) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 46px);
}
.hero .wrap{ position:relative; padding-block:clamp(64px,9vw,116px) clamp(48px,6vw,72px); }
.hero__inner{ max-width:920px; }
.hero__rule{ width:76px; height:5px; background:var(--gold); margin-bottom:30px; }
.hero__index{
  border-top:1px solid var(--rule); margin-top:clamp(40px,5vw,56px); padding-top:22px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px 24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
}
.hero__index span::before{ content:"—"; color:var(--gold); margin-right:9px; }
@media (max-width:820px){ .hero__index{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .hero__index{ grid-template-columns:1fr; } }
.hero h1{ color:var(--navy); }
.hero h1 span{ display:block; color:var(--gold-hero); }
.hero .lede{ margin-top:22px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
@media (max-width:1000px){
  .hero__dwg{ position:static; transform:none; width:100%; opacity:.62; margin-top:34px; }
  .hero__inner{ max-width:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-size:13.5px; letter-spacing:.05em;
  font-weight:500; text-decoration:none; padding:16px 30px; border:1px solid var(--navy);
  text-transform:uppercase;
}
.btn--solid{ background:var(--navy); color:#fff; }
.btn--solid:hover{ background:var(--ink); }
.btn--ghost{ background:transparent; color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:#fff; }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:#e0ad12; border-color:#e0ad12; }
.btn--onnavy{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--onnavy:hover{ background:#fff; color:var(--navy); }

/* ---------- sections ---------- */
.section{ padding-block:clamp(60px,8vw,110px); }
.section--mist{ background:var(--mist); border-block:1px solid var(--rule); }
.section--navy{ background:var(--navy); color:#dae1f4; }
.section--navy h2,.section--navy h3{ color:#fff; }
.section--navy .lede{ color:#b7c2e4; }
.section__head{ max-width:66ch; margin-bottom:clamp(32px,4.5vw,56px); }

/* ---------- statement + figures ---------- */
.statement{ display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(34px,6vw,84px); align-items:start; }
.panel{ border:1px solid var(--rule); background:var(--mist); padding:30px; }
.panel h3{ color:var(--navy); font-size:20px; margin-bottom:18px; }
.panel ul{ list-style:none; margin:0 0 24px; padding:0; }
.panel li{ position:relative; padding-left:24px; margin-bottom:14px; font-size:15.5px; color:#46527d; line-height:1.55; }
.panel li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--gold); }
@media (max-width:860px){ .statement{ grid-template-columns:1fr; } }

/* ---------- capability grid ---------- */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:1080px){ .caps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .caps{ grid-template-columns:1fr; } }
.cap{ background:#fff; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.cap:hover{ background:var(--mist); }
.cap__fig{ background:var(--mist); border-bottom:1px solid var(--rule); padding:14px; }
.cap:hover .cap__fig{ background:#fff; }
.cap__fig img{ width:100%; height:158px; object-fit:contain; }
.cap__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.cap__no{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--gold-deep); margin-bottom:12px; }
.cap h3{ color:var(--navy); margin-bottom:10px; }
.cap p{ font-size:15.5px; color:#46527d; margin:0 0 18px; }
.cap__go{ margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.09em; color:var(--navy); text-transform:uppercase; }
.cap:hover .cap__go{ color:var(--gold-deep); }

/* ---------- sectors ---------- */
.sectors{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.22); }
@media (max-width:1080px){ .sectors{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sectors{ grid-template-columns:1fr; } }
.sector{ background:var(--navy); padding:30px 24px 34px; }
.sector__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--gold); margin-bottom:14px; }
.sector h3{ font-size:20px; margin-bottom:8px; }
.sector p{ font-size:14.5px; color:#b7c2e4; margin:0; }

/* ---------- approach ---------- */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(26px,4vw,54px); }
.pillar{ border-top:3px solid var(--gold); padding-top:22px; }
.pillar h3{ color:var(--navy); }
.pillar p{ font-size:15.5px; color:#46527d; margin:0; }

/* ---------- split figure block ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split--rev .split__fig{ order:-1; }
.split__fig{ background:var(--mist); border:1px solid var(--rule); padding:22px; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } .split--rev .split__fig{ order:0; } }

/* ---------- jurisdictions ---------- */
.juris{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.juris a{ background:#fff; padding:20px 22px; text-decoration:none; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.juris a:hover{ background:var(--mist); }
.juris__name{ font-size:15.5px; color:var(--ink); font-weight:500; }
.juris__code{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; color:var(--slate); }

/* ---------- inner pages ---------- */
.pagehead{ background:var(--mist); border-bottom:1px solid var(--rule); }
.pagehead .wrap{ padding-block:clamp(38px,5.5vw,72px); }
.pagehead h1{ color:var(--navy); font-size:clamp(30px,4.6vw,54px); margin-bottom:.3em; }

.breadcrumb{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding-top:28px; }
.breadcrumb a{ color:var(--slate); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold-deep); }

.twocol{ display:grid; grid-template-columns:1.55fr .8fr; gap:clamp(30px,5vw,66px); align-items:start; }
@media (max-width:940px){ .twocol{ grid-template-columns:1fr; } }

.prose{ max-width:70ch; }
.prose h2{ margin-top:1.7em; }
.prose h3{ margin-top:1.5em; }
.prose ul{ list-style:none; padding:0; margin:0 0 1.4em; }
.prose li{ position:relative; padding-left:26px; margin-bottom:10px; }
.prose li::before{ content:""; position:absolute; left:0; top:.66em; width:11px; height:2px; background:var(--gold); }
.prose figure{ margin:2em 0; background:var(--mist); border:1px solid var(--rule); padding:20px; }
.prose figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-top:14px; }

.aside{ border:1px solid var(--rule); background:var(--mist); padding:28px; position:sticky; top:120px; }
.aside h3{ font-size:18px; color:var(--navy); margin-bottom:12px; }
.aside p{ font-size:15px; }
.aside .btn{ width:100%; text-align:center; }
@media (max-width:940px){ .aside{ position:static; } }

.note{ font-family:var(--mono); font-size:12.5px; color:var(--slate); border-left:2px solid var(--gold); padding:6px 0 6px 16px; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; padding:22px 44px 22px 0; position:relative; list-style:none;
  font-family:var(--display); font-weight:600; font-size:19px; color:var(--navy);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:8px; top:19px; font-family:var(--mono); font-size:22px; color:var(--gold-deep); }
.faq details[open] summary::after{ content:"–"; }
.faq__a{ padding:0 0 24px; max-width:72ch; }
.faq__a p:last-child{ margin-bottom:0; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; padding:14px; border:1px solid var(--rule); background:#fff;
  font-family:var(--body); font-size:16px; color:var(--ink);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--navy); }
.lines{ border:1px solid var(--rule); }
.lines a,.lines div{ display:flex; gap:16px; padding:18px 22px; border-bottom:1px solid var(--mist-2); text-decoration:none; color:var(--ink); align-items:baseline; }
.lines a:last-child,.lines div:last-child{ border-bottom:0; }
.lines a:hover{ background:var(--mist); }
.lines .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); width:66px; flex:none; }

/* ---------- CTA ---------- */
.cta{ background:var(--ink); color:#fff; }
.cta .wrap{ padding-block:clamp(50px,7vw,84px); display:flex; gap:32px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.cta h2{ margin:0; max-width:18ch; color:#fff; }
.cta p{ margin:10px 0 0; color:#aab6dd; }

/* ---------- footer ---------- */
.foot{ background:var(--navy); color:#adbadf; font-size:15px; }
.foot a{ color:#dde3f5; text-decoration:none; }
.foot a:hover{ color:var(--gold); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px; padding-block:clamp(46px,6vw,72px); }
.foot h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:10px; }
.foot__logo img{ height:52px; width:auto; margin-bottom:18px; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.15); padding-block:20px; font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:#8b9ac9; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:940px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }


/* ---------- coverage statement ---------- */
.coverage{ background:var(--mist); border-block:1px solid var(--rule); }
.coverage .wrap{ padding-block:clamp(52px,7vw,88px); text-align:center; }
.coverage h2{ color:var(--navy); max-width:22ch; margin-inline:auto; }
.coverage .lede{ margin-inline:auto; }
.coverage__marks{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px 40px; margin-top:30px;
  font-family:var(--mono); font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:var(--navy);
}
.coverage__marks span::before{ content:"\25AA"; color:var(--gold); margin-right:10px; }


/* ---------- coverage town list ---------- */
.coverage__towns{
  max-width:74ch; margin:26px auto 0; font-size:14.5px; line-height:1.9; color:var(--slate);
}

/* ---------- areas index groups ---------- */
.areagroup{ margin-bottom:clamp(40px,5vw,64px); }
.areagroup:last-child{ margin-bottom:0; }
.areagroup h2{
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  font-family:var(--mono); font-weight:500; margin-bottom:18px;
  padding-bottom:12px; border-bottom:2px solid var(--gold);
}


/* ---------- form supporting copy ---------- */
.formnote{
  margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--slate);
  border-left:2px solid var(--gold); padding-left:14px; max-width:52ch;
}


/* ---------- service categories on the homepage ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:1080px){ .cats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .cats{ grid-template-columns:1fr; } }
.cat{ background:#fff; display:flex; flex-direction:column; }
.cat__fig{ background:var(--mist); border-bottom:1px solid var(--rule); padding:12px; }
.cat__fig img{ width:100%; height:132px; object-fit:contain; }
.cat__body{ padding:26px 26px 28px; }
.cat__no{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--gold-deep); margin-bottom:12px; }
.cat h3{ color:var(--navy); margin-bottom:10px; font-size:20px; }
.cat p{ font-size:15px; color:#46527d; margin:0 0 16px; }
.cat__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.cat__list li{ border-bottom:1px solid var(--mist-2); }
.cat__list a{ display:block; padding:9px 0; font-size:14px; color:var(--ink); text-decoration:none; }
.cat__list a:hover{ color:var(--gold-deep); }
.cat__list a::before{ content:"\2014"; color:var(--gold); margin-right:9px; }

/* ---------- grouped services index ---------- */
.svcgroup{ margin-bottom:clamp(44px,6vw,72px); }
.svcgroup:last-child{ margin-bottom:0; }
.svcgroup h2{ font-size:clamp(24px,3vw,32px); color:var(--navy); margin-bottom:.3em; }
.svcgroup .lede{ margin-bottom:24px; }

/* ---------- inline FAQ on service pages ---------- */
.faq--inline{ border-top:1px solid var(--rule); margin-top:.5em; }
.faq--inline summary{ font-size:17px; padding:16px 40px 16px 0; }
.faq--inline summary::after{ top:14px; font-size:20px; }
.faq--inline .faq__a{ padding-bottom:18px; }
.faq--inline .faq__a p{ font-size:15.5px; }

/* ---------- articles ---------- */
.article h2{ font-size:clamp(22px,2.6vw,28px); }
.article p{ font-size:16.5px; }
.article strong{ color:var(--navy); font-weight:600; }

/* ---------- floating call button (mobile only) ---------- */
.callfab{
  display:none; position:fixed; right:16px; bottom:16px; z-index:250;
  background:var(--navy); color:#fff; text-decoration:none;
  padding:14px 20px; border-radius:40px; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(13,23,51,.28);
}
.callfab:hover,.callfab:focus{ background:var(--gold); color:var(--ink); }
@media (max-width:820px){ .callfab{ display:inline-flex; } body{ padding-bottom:76px; } }
@media print{ .callfab{ display:none !important; } }


/* ---------- town link list on service pages ---------- */
.townlinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px 18px; }
.townlinks li{ padding-left:20px; margin-bottom:5px; font-size:15px; }
.townlinks li::before{ width:8px; }
@media (max-width:640px){ .townlinks{ grid-template-columns:repeat(2,1fr); } }