/* SimPlan: technical drawing on drafting paper, in the colours of the logo
   (navy to light blue). Tektur (the logo typeface) for headings, IBM Plex
   Sans for text, Plex Mono for the labels a drawing would carry. */
:root {
  --paper: #f3f4f1;
  --paper-2: #e9ecea;
  --surface: #ffffff;
  --ink: #0b1d30;
  --ink-2: #33475b;
  --steel: #6b7680;
  --line: #d7dcdf;
  --grid: rgba(11, 29, 48, .055);
  --accent: #2f74b5;      /* logo blue, dark enough for white text */
  --accent-ink: #245d93;
  --accent-light: #489add; /* logo blue as Rich set it */
  --accent-pale: #a9d0f2;
  --radius: 4px;
  --wrap: 1180px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Tektur", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono, .kicker, .idx { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* drafting grid */
.grid-bg {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(11,29,48,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,29,48,.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* header */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(243,244,241,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 34px; height: auto; }
.logo-text { font-family: var(--display); font-weight: 700; letter-spacing: 5px; font-size: 20px; }
.logo-sub { font-family: var(--mono); font-size: 12px; color: var(--steel); padding-left: 10px; border-left: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: #fff !important; padding: 9px 16px; border-radius: var(--radius); }
.nav-cta:hover { background: var(--accent); }
.hero h1 span { color: var(--accent-light); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; margin: 0 auto; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.hero h1.kicker { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: .12em; }
.display { font-family: var(--display); font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; line-height: 1.12; text-wrap: balance; }
.lead { margin-top: 20px; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 40px 0 0; border-top: 1px solid var(--line); }
.hero-facts div { padding: 14px 16px 0 0; }
.hero-facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.hero-facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
.hero-fig { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: 14px; position: relative; }
.hero-fig::before, .hero-fig::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; }
.hero-fig::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.hero-fig::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }
.hero-fig img { width: 100%; }
.hero-fig figcaption { font-size: 13px; color: var(--steel); padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 10px; }

/* sections */
.section { padding: 88px 0; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark { background-color: var(--ink); color: #e9edf0; }
.section-dark .kicker { color: var(--accent-pale); }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; }
.sec-lead { margin-top: 14px; color: var(--ink-2); }

/* services */
.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* five services: three on top, two wider ones below, no empty cell */
.service { grid-column: span 2; }
.service:nth-child(n+4) { grid-column: span 3; }
.service { background: var(--surface); padding: 28px 26px 30px; }
.service-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.service-head .idx { font-size: 13px; color: var(--steel); }
.service svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 21px; margin-bottom: 10px; }
.service p { color: var(--ink-2); font-size: 16px; }
.service:hover svg { stroke: var(--accent); }

/* references */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { font: 500 14px var(--sans); background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.ref { margin: 0; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.ref[hidden] { display: none; }
.ref a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; cursor: zoom-in; }
.ref picture, .ref img { width: 100%; height: 100%; }
.ref img { object-fit: contain; padding: 10px; transition: transform .35s ease; }
.ref a:hover img { transform: scale(1.04); }
.ref figcaption { display: grid; gap: 2px; padding: 14px 16px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--steel); }
.ref figcaption strong { color: var(--ink); font-size: 16px; }
.ref-cat { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }

/* process */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; border-top: 2px solid var(--ink); }
.process li { padding: 22px 22px 0 0; position: relative; }
.process li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--accent); }
.process .idx { font-size: 13px; color: var(--steel); }
.process h3 { font-size: 20px; margin: 6px 0 8px; }
.process p { color: var(--ink-2); font-size: 16px; }

/* about */
.about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.about .sec-head { margin-bottom: 0; }
.about-text p + p { margin-top: 16px; }
.about-text p { color: #c9d1d8; font-size: 18px; }

/* contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 22px 24px; text-decoration: none; }
a.contact-card:hover { border-color: var(--ink); border-left-color: var(--accent); }
.contact-card .mono { font-size: 12px; letter-spacing: .1em; color: var(--steel); }
.contact-card strong { font-size: 20px; word-break: break-word; }

/* footer */
.footer { background: var(--ink); color: #9fb0bd; font-size: 14px; }
.footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; padding-bottom: 26px; }
.footer .logo-text { color: #fff; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12, 18, 24, .94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox[hidden] { display: none; }
.lb-fig { margin: 0; display: grid; justify-items: center; gap: 12px; max-height: 100vh; padding: 56px 0 24px; }
.lb-fig img { max-height: calc(100vh - 140px); width: auto; background: #fff; }
.lb-fig figcaption { color: #dfe6eb; font-size: 15px; text-align: center; padding: 0 12px; }
.lightbox button { background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; width: 64px; height: 64px; }
.lb-close { position: absolute; top: 8px; right: 8px; }
.lightbox button:hover { color: var(--accent); }

/* small screens */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 52px; gap: 36px; }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .about { grid-template-columns: 1fr; gap: 24px; }
  .contact-cards { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .service, .service:nth-child(n+4) { grid-column: span 1; }
  .service:last-child { grid-column: span 2; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  .section { padding: 64px 0; }
  .menu-btn { display: block; }
  .logo-sub { display: none; }
  .nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 18px 16px; display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0 !important; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .process { grid-template-columns: 1fr; }
  .refs { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .service:last-child { grid-column: span 1; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { position: absolute; bottom: 10px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ref img { transition: none; }
}

/* contact form */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 28px; background: var(--surface); border: 1px solid var(--line); padding: 28px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 15px; }
.field .opt { font-weight: 400; color: var(--steel); }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; width: 100%; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 116, 181, .18); }
.field textarea { resize: vertical; min-height: 140px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-status { font-size: 15px; }
.form-status.is-ok { color: #1f7a3d; font-weight: 600; }
.form-status.is-error { color: #b42318; font-weight: 600; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button[disabled] { opacity: .6; cursor: wait; }

/* footer legal links */
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: #c9d6e2; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* legal pages */
.legal { padding: 64px 0 88px; }
.legal-in { max-width: 820px; }
.legal h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 28px; }
.legal h2 { font-family: var(--sans); font-size: 20px; margin: 30px 0 10px; }
.legal p { margin-bottom: 12px; color: var(--ink-2); }
.legal a { color: var(--accent-ink); }
.facts { display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; margin: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 13px; color: var(--steel); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.facts dd { margin: 0; }
.muted { color: var(--steel); font-size: 14px; }
mark.todo { background: #fff1c2; color: #7a5300; padding: 0 6px; font-family: var(--mono); font-size: 13px; }

@media (max-width: 760px) {
  .contact-form { grid-template-columns: 1fr; padding: 20px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
}

/* service cards link to their pages */
.service h3 a { text-decoration: none; }
.service h3 a:hover { color: var(--accent); }
.more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--accent-ink); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* service landing pages */
.page-hero { border-bottom: 1px solid var(--line); padding: 36px 0 56px; }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--steel); margin-bottom: 28px; }
.crumbs a { color: var(--accent-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero-in { display: flex; gap: 24px; align-items: flex-start; }
.page-hero-in svg { flex: 0 0 56px; width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 6px; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 52px); }
.page-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.prose h2 { font-family: var(--sans); font-size: 24px; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); margin-bottom: 12px; }
.ticks { list-style: none; padding: 0; margin: 0 0 12px; }
.ticks li { position: relative; padding: 6px 0 6px 26px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; background: var(--accent); }
.faq { background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; position: relative; padding-right: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 10px; font-size: 22px; color: var(--accent); }
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 18px 16px; margin: 0; }
.side { display: grid; gap: 20px; position: sticky; top: 88px; }
.side-box { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: 22px; }
.side-box p { margin-bottom: 10px; color: var(--ink-2); }
.side-box a { color: var(--accent-ink); }
.side-box .btn { color: #fff; margin-top: 6px; }
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.side-links a { text-decoration: none; font-weight: 500; }
.footer-in { align-items: center; }
@media (max-width: 960px) {
  .page-body { grid-template-columns: 1fr; gap: 32px; }
  .side { position: static; }
}
@media (max-width: 760px) {
  .page-hero-in svg { display: none; }
  .footer-links { flex-wrap: wrap; gap: 8px 16px; }
}