:root {
  --paper: #f1e6cf;
  --paper-light: #faf3e3;
  --paper-dark: #dfcfb0;
  --ink: #282923;
  --ink-soft: #58594d;
  --olive: #4d5743;
  --olive-dark: #363c31;
  --red: #b6513c;
  --yellow: #e2b65d;
  --teal: #a6c3bb;
  --line: #34362e;
  --shadow: rgba(44, 40, 31, 0.24);
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --sans: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #d4c8ae;
  font-family: var(--mono);
  line-height: 1.42;
  padding: 22px 16px 46px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: radial-gradient(rgba(54, 45, 31, .2) .5px, transparent .8px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.browser-shell { max-width: 1180px; margin: 0 auto; border: 2px solid var(--line); box-shadow: 0 16px 32px var(--shadow); }

.page { position: relative; overflow: hidden; padding: 18px 40px 24px; background-color: var(--paper); background-image: linear-gradient(rgba(92, 82, 56, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 82, 56, .07) 1px, transparent 1px); background-size: 19px 19px; }
.page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(93deg, transparent 0 36%, rgba(94, 61, 33, .05) 36.2%, transparent 36.8% 76%, rgba(94, 61, 33, .04) 76.3%, transparent 77%); mix-blend-mode: multiply; }
.page > * { position: relative; z-index: 1; }
.page-rule { height: 4px; margin: 0 0 17px; background: linear-gradient(90deg, var(--olive) 0 28%, transparent 28% 49%, var(--red) 49% 100%); }

.masthead { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px; gap: 17px; align-items: center; padding-bottom: 15px; border-bottom: 2px solid var(--line); }
.utility-rail { display: flex; flex-direction: column; gap: 12px; height: 100%; padding-top: 2px; color: var(--ink-soft); font-size: 8px; letter-spacing: .5px; }
.color-bars { display: flex; gap: 6px; } .color-bars b { width: 16px; height: 16px; display: block; background: var(--red); } .color-bars b:nth-child(2) { background: var(--yellow); } .color-bars b:nth-child(3) { background: var(--teal); }
.utility-grid, .footer-grid { width: 45px; height: 45px; display: block; border: 1px solid #7d7869; background-image: linear-gradient(#7d7869 1px, transparent 1px), linear-gradient(90deg, #7d7869 1px, transparent 1px); background-size: 7px 7px; opacity: .7; }
.identity-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.shield-mark { width: 142px; flex: 0 0 142px; display: flex; flex-direction: column; align-items: center; color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: .4px; }
.shield-mark svg { width: 84px; height: 92px; fill: none; stroke: var(--ink); stroke-width: 4; }
.shield-mark .mark-fill { fill: var(--ink); stroke: none; }
.wordmark { min-width: 0; }
.wordmark h1 { margin: 0; font-family: var(--sans); font-size: clamp(34px, 4.7vw, 56px); line-height: .9; letter-spacing: -1.8px; text-transform: none; white-space: nowrap; }
.wordmark h1 em { font-style: normal; color: var(--red); }
.masthead-subtitle { max-width: 760px; margin: 9px 0 8px; font-family: var(--sans); font-size: clamp(13px, 1.7vw, 20px); font-weight: 800; letter-spacing: .5px; line-height: 1.05; }
.masthead-detail { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 700; } .masthead-detail span { margin-left: 20px; font-family: var(--mono); font-size: 11px; font-weight: 400; }
.masthead-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.button { display: inline-block; padding: 8px 10px; border: 1.5px solid var(--line); box-shadow: 2px 2px 0 var(--line); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .2px; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.button:hover { filter: brightness(.94); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.button-red { background: var(--red); color: #fff7e4; } .button-yellow { background: var(--yellow); } .button-paper { background: var(--paper-light); }
.micro-spec { margin-top: 5px; color: var(--ink-soft); font-size: 9px; text-align: right; line-height: 1.6; }

.page-meta { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; font-size: 9px; font-weight: 800; }
.meta-line { height: 1px; flex: 1; background: var(--line); opacity: .7; }
.service-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .94fr); gap: 15px; }
.service-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 15px; min-width: 0; }
.service-card { min-width: 0; display: flex; flex-direction: column; border: 1.5px solid var(--line); background: rgba(250, 243, 227, .38); box-shadow: 2px 2px 0 var(--line); }
.card-heading { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 6px 9px; color: var(--paper-light); background: var(--olive); border-bottom: 1.5px solid var(--line); }
.card-heading span { font-family: var(--sans); font-size: 21px; font-weight: 900; } .card-heading h2 { margin: 0; font-family: var(--sans); font-size: clamp(16px, 1.65vw, 22px); line-height: 1; letter-spacing: .1px; }
.card-content { flex: 1; padding: 11px; }
.opsec-content { display: grid; grid-template-columns: minmax(190px, .94fr) 1.15fr; gap: 11px; }
.picture-opsec { align-self: start; }
.split-content { display: grid; grid-template-columns: minmax(128px, .87fr) 1.2fr; gap: 11px; align-items: center; }
.picture-frame { margin: 0; border: 1px solid var(--line); background: var(--paper-dark); }
.photo-photo { min-height: 150px; background-color: #857663; background-position: center; background-size: cover; filter: sepia(.42) saturate(.8) contrast(1.08); mix-blend-mode: multiply; }
.picture-opsec .photo-photo { min-height: 280px; background-image: linear-gradient(120deg, rgba(29, 29, 24, .1), rgba(233, 206, 144, .35)), url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=900&q=82"); }
.picture-network .photo-photo { min-height: 146px; background-image: linear-gradient(120deg, rgba(220, 191, 103, .3), rgba(49, 75, 69, .2)), url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=700&q=82"); }
.picture-audit .photo-photo { min-height: 112px; background-image: linear-gradient(120deg, rgba(234, 212, 164, .3), rgba(49, 56, 45, .18)), url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=700&q=82"); }
.picture-frame figcaption { padding: 4px 5px; font-size: 8px; font-weight: 800; letter-spacing: .5px; background: var(--paper-light); border-top: 1px solid var(--line); }
.service-copy { min-width: 0; } .service-copy p { margin: 0 0 9px; font-size: 11px; line-height: 1.35; }
.service-copy ul { margin: 0 0 12px; padding: 0; list-style: none; font-size: 10px; line-height: 1.35; }
.service-copy li { padding-left: 12px; position: relative; margin: 5px 0; } .service-copy li::before { content: "■"; position: absolute; left: 0; color: var(--red); font-size: 8px; }
.service-opsec .button { font-size: 14px; width: 100%; margin-top: auto; }
.card-footer { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; color: var(--ink-soft); background: rgba(223, 207, 176, .65); border-top: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: .4px; } .card-footer a { color: var(--ink); text-decoration: none; }
.service-network { background: rgba(222, 235, 222, .28); } .service-network .card-heading { background: var(--red); } .service-network .picture-frame { background: var(--yellow); }
.service-network .button { margin-top: 4px; font-size: 12px; }
.service-audit .card-heading { background: var(--olive-dark); } .service-audit { background: rgba(247, 231, 190, .35); }
.audit-sheet { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 153px; padding: 10px 8px; background: var(--paper-light); border: 1px solid var(--line); box-shadow: 2px 2px 0 rgba(38, 38, 30, .2); font-size: 9px; }
.audit-sheet strong { margin-bottom: 4px; font-family: var(--sans); font-size: 12px; line-height: 1; } .audit-sheet label { display: block; line-height: 1.1; } .audit-sheet input { accent-color: var(--red); margin: 0 4px 0 0; }
.audit-stamp { position: absolute; right: 5px; bottom: 5px; padding: 2px 4px; color: var(--red); border: 1px solid var(--red); transform: rotate(-8deg); font-size: 8px; font-weight: 800; }
.service-audit .service-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .service-audit .picture-frame { margin-bottom: 9px; }

.inquiry { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 17px; padding: 15px 18px; border: 1.5px solid var(--line); background: var(--teal); box-shadow: 2px 2px 0 var(--line); }
.eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .8px; } .inquiry h2 { margin: 3px 0 3px; font-family: var(--sans); font-size: 22px; line-height: 1; } .inquiry p { margin: 0; font-size: 10px; }
.inquiry .button { flex: 0 0 auto; }
.page-footer { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding-top: 14px; margin-top: 16px; border-top: 2px solid var(--line); color: var(--ink-soft); font-size: 9px; }
.footer-mark { display: flex; align-items: center; gap: 8px; } .footer-grid { width: 34px; height: 34px; background-size: 6px 6px; } .footer-mark strong, .footer-status strong { color: var(--ink); font-size: 10px; }
.page-footer p { margin: 0; line-height: 1.5; } .footer-status { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; border: 1px solid var(--line); text-align: center; } .footer-status span { font-size: 8px; }

@media (max-width: 980px) {
  .page { padding-inline: 23px; }
  .masthead { grid-template-columns: 80px minmax(0, 1fr) 142px; gap: 10px; }
  .identity-lockup { gap: 7px; } .shield-mark { width: 82px; flex-basis: 82px; font-size: 10px; } .shield-mark svg { width: 64px; height: 72px; }
  .masthead-detail { font-size: 12px; } .masthead-detail span { display: block; margin: 2px 0 0; }
  .service-grid { grid-template-columns: 1fr; } .service-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 680px) {
  body { padding: 0; } .browser-shell { border-width: 0; }  .page { padding: 13px 13px 20px; } .masthead { grid-template-columns: 1fr; text-align: center; } .utility-rail { display: none; } .identity-lockup { justify-content: center; } .wordmark h1 { white-space: normal; font-size: 38px; } .masthead-subtitle { font-size: 14px; } .masthead-detail span { display: inline; margin-left: 7px; }
  .masthead-actions { max-width: 290px; margin: 0 auto; } .micro-spec { text-align: center; }
  .service-stack { grid-template-columns: 1fr; } .opsec-content, .split-content { grid-template-columns: 1fr; } .picture-opsec .photo-photo { min-height: 200px; }
  .inquiry { align-items: flex-start; flex-direction: column; } .inquiry .button { width: 100%; } .page-footer { grid-template-columns: 1fr; text-align: center; } .footer-mark { justify-content: center; } .footer-status { max-width: 190px; margin: 0 auto; }
}

.inquiry-form { display: grid; gap: 6px; margin-top: 10px; }
.inquiry-form label, .inquiry-form input, .inquiry-form textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); }
.inquiry-form input, .inquiry-form textarea { border: 1.5px solid var(--line); background: var(--paper-light); }
.inquiry-hp { position: absolute; left: -10000px; }
.inquiry-result--ok, .inquiry-result--error { padding: 8px; margin-top: 8px; border-left: 4px solid var(--olive); }
.inquiry-result--error { border-left-color: var(--red); }