/* ==========================================================================
   Stonebridge Tech Solutions - shared design system
   --------------------------------------------------------------------------
   Single source of truth for design tokens, base typography, and site chrome
   (header, nav, footer). Every page links this file; no page redefines a
   token. Rationale and the competitor evidence behind these values are in
   docs/DESIGN.md.

   Registered against seven defense/government services firms (Booz Allen,
   Leidos, CACI, SAIC, GDIT, Peraton, ManTech), which converge on: one sans
   throughout, square corners, no shadows, a neutral ground with exactly one
   saturated accent, and a 4px base unit.

   Page-specific layout stays in that page's own <style> block. Page CSS must
   not restyle chrome selectors - run automation/normalize.py --check to
   verify.
   ========================================================================== */

:root {
  /* Ground and ink. Cooled 2026-08-28: the warm cream was inherited rather than
     derived from the prime research in docs/DESIGN.md s4, where six of seven
     firms ground on #FFFFFF. --ink-soft is lifted so body copy runs at 10.8:1
     rather than 17.5:1 (WCAG AAA needs 7:1). --ink and the accents are unchanged. */
  --paper:        #fafbfc;
  --paper-warm:   #f1f3f6;
  --paper-deep:   #e4e8ee;
  --surface:      #ffffff;
  --ink:          #0c1628;
  --ink-soft:     #2f3b52;
  --muted:        #5b6472;
  --rule:         #dfe3e8;

  /* The single accent. One loud colour, used sparingly - the equivalent of
     CACI's red or GDIT's orange. */
  --accent:       #b08840;
  --accent-deep:  #8a6624;

  /* Reserved semantics. Never decorative. */
  --crimson:      #8b1a1a;
  --green:        #2d6a4f;

  /* Code */
  --code-bg:      #f1f3f6;
  --code-text:    #1c2840;

  /* Type. One family for everything the reader reads as prose; mono only
     where character alignment carries meaning. */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Retained so existing page CSS that still says var(--serif) keeps
     rendering in the one family. Do not use in new code. */
  --serif: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry. Square corners and 1px rules - never shadows. */
  --radius: 0;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* Keyboard users land here first. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 13px; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}

.header-inner {
  /* Logo pins left; the nav and the Contact CTA travel together on the right.
     With space-between the CTA was pushed to the far container edge, leaving a
     wide gap between "About" and the one action in the header. */
  display: flex; align-items: center; justify-content: flex-start; gap: 32px;
  padding: 18px 0;
}
.header-inner .nav { margin-left: auto; }

.logo {
  font-family: var(--sans); font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px;
}
.logo-mark {
  width: 28px; height: 28px; border: 1.5px solid var(--ink);
  position: relative; transform: rotate(45deg);
}
.logo-mark::after { content: ''; position: absolute; inset: 5px; background: var(--accent); }

.nav { display: flex; gap: 36px; font-size: 15px; }
.nav a { color: var(--ink-soft); transition: color 0.2s; }
.nav a:hover { color: var(--accent-deep); }
.nav a.active { color: var(--accent-deep); font-weight: 600; }
/* Mobile nav. Below 880px the five links collapse behind .nav-toggle and open
   as a panel under the bar. Logo stays left; the Contact CTA and the toggle sit
   together on the right, so the CTA is never crowded against the wordmark. */
.nav-toggle {
  display: none; background: none; cursor: pointer;
  width: 44px; height: 44px; padding: 11px 9px;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  flex-direction: column; justify-content: space-between; align-items: stretch;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9.25px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9.25px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .header-inner { gap: 14px; }
  .header-cta { margin-left: auto; padding: 10px 16px; }
  .header-inner .nav { margin-left: 0; }
  .nav {
    display: none; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule); padding: 4px 0;
  }
  .site-header.nav-open .nav { display: flex; }
  .nav a { padding: 15px 32px; font-size: 16px; }
  .nav a + a { border-top: 1px solid var(--rule); }
}

.header-cta {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 10px 20px;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
}
.header-cta:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer { background: var(--ink); color: rgba(251, 250, 246, 0.72); padding: 56px 0 28px; }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 40px; margin-bottom: 36px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

footer .logo { color: var(--paper); margin-bottom: 16px; }
footer .logo-mark { border-color: var(--paper); }
footer p { font-size: 14px; line-height: 1.6; max-width: 320px; }
footer h3 a { color: inherit; }
footer h3 a:hover { color: var(--accent); }
footer h3 {
  color: var(--paper); font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px; font-weight: 500;
}
footer ul { list-style: none; }
footer li { padding: 3px 0; font-size: 14px; break-inside: avoid; }
footer a { color: rgba(251, 250, 246, 0.72); transition: color 0.2s; }
footer a:hover { color: var(--accent); }

/* Procurement identifiers, on every page - a federal buyer looks for these. */
.federal-ids {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
  padding: 14px 0; margin-top: 0;
  border-top: 1px solid rgba(251, 250, 246, 0.12);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.06em;
  color: rgba(251, 250, 246, 0.55);
}
.federal-ids strong { color: rgba(251, 250, 246, 0.85); font-weight: 500; }
.federal-ids .fid-label { text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }

.footer-base {
  border-top: 1px solid rgba(251, 250, 246, 0.12); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--sans); font-size: 12px; color: rgba(251, 250, 246, 0.7);
}
.footer-base a { color: rgba(251, 250, 246, 0.7); }
.footer-base a:hover { color: var(--accent); }
.footer-base .sep { opacity: 0.4; margin: 0 8px; }

/* --------------------------------------------------------------------------
   Calendly inline embed
   --------------------------------------------------------------------------
   The iframe does not scroll internally, so the container height has to cover
   whatever Calendly renders. These are fallbacks: the loader listens for
   Calendly's own calendly.page_height event and sets the real height, which is
   why the mobile value no longer needs to be defensively enormous.
   -------------------------------------------------------------------------- */

.calendly-inline-widget { min-width: 320px; height: 700px; }
@media (max-width: 760px) { .calendly-inline-widget { height: 820px; } }

/* --------------------------------------------------------------------------
   Code
   --------------------------------------------------------------------------
   The only place a second face appears. Config samples are the proof behind
   the offer, so they have to align.
   -------------------------------------------------------------------------- */

code, kbd, samp { font-family: var(--mono); }

pre {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  background: var(--ink); color: var(--paper);
  padding: 24px 28px; margin: 28px 0;
  overflow-x: auto; border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
pre code { background: transparent; border: none; color: inherit; padding: 0; font-size: inherit; }

:not(pre) > code {
  font-size: 0.92em; background: var(--code-bg); color: var(--code-text);
  padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Secondary hero CTA
   --------------------------------------------------------------------------
   The low-commitment half of the pair. Every hero offers a call (high
   commitment) alongside the estimator, which shows a real number before it
   asks for an email. Pages using the dark .pricebox hero stack it under the
   button; the case-study-style hero sets it beside .hero-cta.
   -------------------------------------------------------------------------- */

.pricebox-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.pricebox-alt {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  color: rgba(251, 250, 246, 0.72);
  border-bottom: 1px solid rgba(251, 250, 246, 0.28); padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.pricebox-alt:hover { color: var(--paper); border-color: var(--accent); }

.hero-cta-alt {
  display: inline-block; margin-left: 18px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.hero-cta-alt:hover { color: var(--accent-deep); border-color: var(--accent); }
@media (max-width: 560px) {
  .hero-cta-alt { display: block; margin-left: 0; margin-top: 16px; }
}

/* .control-list carries two shapes. Control mappings pair a code with a
   description, so the row is a 220px column and the rest. The diagnostic
   lists on the software and data engineering pages have no code to show, and
   without a second cell the description was rendering inside that 220px
   column with the rest of the row empty. A row with nothing to label gets
   the full width. */
.control-list li:not(:has(.code)) { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Service page components
   --------------------------------------------------------------------------
   The richer service layout: alternating bands, numbered engagement phases,
   the audience grid, the differentiator list and the founder card. These
   lived inline on services/hipaa-cicd.html, which is the page the other
   service pages are being rebuilt against, so they belong in the shared
   layer where every page can reach them.
   -------------------------------------------------------------------------- */

.narrow { max-width: 860px; margin: 0 auto; }
.hero-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  margin-top: 24px;
  transition: background 0.15s;
}
.hero-cta:hover { background: var(--accent-deep); }
/* === WHO IT'S FOR === */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px;
}
.audience-card {
  padding: 32px;
  background: var(--paper);
  border-radius: 0;
  border-left: 3px solid var(--accent);
}
.audience-card.not-for { border-left-color: var(--crimson); }
.audience-card h3 { margin-bottom: 18px; }
.audience-card ul { list-style: none; padding: 0; }
.audience-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}
.audience-card li:last-child { border-bottom: none; }
.audience-card li strong {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 4px;
}
.audience-card.not-for li strong { color: var(--crimson); }
@media (max-width: 760px) {
  .audience-grid { grid-template-columns: 1fr; }
}
/* === PRINCIPLES === */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.principle-marker {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
@media (max-width: 880px) {
  .principles { grid-template-columns: 1fr; gap: 36px; }
}
/* === PHASES === */
.phases { margin-top: 40px; }
.phase {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.phase:last-child { padding-bottom: 0; }
.phase-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: 6px;
}
.phase-tag .pid {
  display: block;
  font-size: 28px;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.phase-body h3 { font-size: 28px; margin-bottom: 14px; }
.phase-body h3 em { font-style: italic; color: var(--accent-deep); font-weight: 500; }
.phase-body p { font-size: 16px; }
.phase-meta {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--paper-warm);
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.phase-meta div { font-size: 13px; }
.phase-meta strong {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.phase-deliverables {
  margin-top: 22px;
  list-style: none;
  padding: 0;
}
.phase-deliverables li {
  font-size: 15px;
  padding: 9px 0 9px 24px;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.phase-deliverables li:last-child { border-bottom: none; }
.phase-deliverables li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
  font-weight: 600;
}
@media (max-width: 760px) {
  .phase { grid-template-columns: 1fr; gap: 18px; }
  .phase-meta { grid-template-columns: 1fr; gap: 12px; }
}
/* === DIFFERENTIATORS === */
.diffs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  margin-top: 40px;
}
.diff {
  padding: 28px;
  background: var(--paper);
  border-radius: 0;
  border-top: 3px solid var(--accent);
}
.diff h3 { font-size: 20px; margin-bottom: 12px; }
.diff p { font-size: 15px; line-height: 1.6; margin-bottom: 0; }
@media (max-width: 760px) {
  .diffs { grid-template-columns: 1fr; }
}
/* === PROOF === */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.proof-stat {
  padding: 36px 24px;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.proof-stat:last-child { border-right: none; }
@media (max-width: 760px) {
  .proof-stats { grid-template-columns: 1fr; }
  .proof-stat { border-right: none; border-bottom: 1px solid var(--rule); }
}
/* === FAQ === */
.faqs { margin-top: 40px; }
/* === RESOURCES === */
.resources-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.resource {
  padding: 24px;
  background: var(--paper);
  border-radius: 0;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.15s;
}
.resource:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.resource .rmark {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.resource h3 { font-size: 18px; margin-bottom: 8px; }
.resource p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
  .resources-list { grid-template-columns: 1fr; }
}
/* === METHODOLOGY CALLOUT === */
.method-callout {
  margin-top: 40px;
  padding: 36px;
  background: var(--paper-deep);
  border-radius: 0;
  border-left: 3px solid var(--accent);
}
.method-callout h3 { margin-bottom: 12px; }
.method-callout p { color: var(--ink-soft); margin-bottom: 18px; }
.method-callout a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.method-callout a:hover { color: var(--ink); }
.founder-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.founder-title {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.fm-item { display: flex; flex-direction: column; }
.fm-item strong {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 600;
}
.fm-item a, .fm-item span {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.fm-item a:hover { color: var(--accent-deep); }
.founder-col h3 {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin-bottom: 16px;
  font-weight: 600;
}
.founder-col ul {
  list-style: none;
  padding: 0;
}
.founder-col li {
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.founder-col li:last-child { border-bottom: none; }
.founder-cta {
  text-align: left;
  padding-top: 8px;
}
.founder-cta a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  text-decoration: none;
}
.founder-cta a:hover { color: var(--ink); }
.rs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rs-card {
  padding: 28px;
  background: var(--paper-warm);
  border-radius: 0;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: all 0.18s;
}
.rs-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: none;
}
.rs-mark {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.rs-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink);
}
.rs-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 760px) {
  .rs-grid { grid-template-columns: 1fr; }
}
.footer-brand p {
  font-size: 14px;
  color: rgba(251, 250, 246, 0.7);
  line-height: 1.6;
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col a {
  color: rgba(251, 250, 246, 0.82);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom a { color: rgba(251, 250, 246, 0.8); text-decoration: none; border-bottom: 1px solid rgba(176, 136, 64, 0.6); transition: color 0.2s; }
.footer-bottom a:hover { color: #b08840; }

/* The free-diagnostic bullet list. Every comparable firm - Cloud Posse, Mission
   Cloud, HIPAA Vault - states plainly what the free step returns before asking
   for anything. The list is that statement. */
.lead-magnet-list { list-style: none; padding: 0; margin: 20px 0 0; }
.lead-magnet-list li {
  position: relative; padding: 0 0 0 22px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.5; color: rgba(251, 250, 246, 0.82);
}
.lead-magnet-list li::before {
  content: '\2014'; position: absolute; left: 0; color: var(--accent);
}

/* --------------------------------------------------------------------------
   Founder band
   --------------------------------------------------------------------------
   Five service pages carry the .founder-bio-band markup with no CSS at all,
   so the photo, the role line and the buttons render as an unstyled stack.
   The five that do style it agreed on 23 of 24 selectors, so the component
   moves here and every page gets the same band.
   -------------------------------------------------------------------------- */

/* FOUNDER BIO BAND */
    .founder-bio-band { background: var(--paper-warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 72px 0; }
.founder-bio-band .container-narrow { display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: start; }
@media (max-width: 720px) { .founder-bio-band .container-narrow { grid-template-columns: 1fr; text-align: center; gap: 28px; } .founder-bio-band .photo-wrap { justify-self: center; } }
.founder-bio-band .photo-wrap { width: 160px; height: 160px; position: relative; overflow: hidden; border: 3px solid var(--accent); background: var(--ink); }
.founder-bio-band .photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-bio-band .section-eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.founder-bio-band
    @media (max-width: 720px) { .founder-bio-band .section-eyebrow { justify-content: center; } }
.founder-bio-band h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 8px; }
.founder-bio-band h2 em { font-style: italic; color: var(--accent-deep); }
.founder-bio-band .founder-role { font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 20px; }
.founder-bio-band p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; max-width: 660px; }
@media (max-width: 720px) { .founder-bio-band p { margin-left: auto; margin-right: auto; } }
.founder-bio-band .credentials {
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--muted);
      padding-top: 16px;
      margin-top: 16px;
      border-top: 1px solid var(--rule);
      line-height: 1.7;
      max-width: 660px;
    }
@media (max-width: 720px) {
      .founder-bio-band .credentials { margin-left: auto; margin-right: auto; }
    }
.founder-bio-band .credentials strong {
      color: var(--ink);
      font-weight: 600;
      display: block;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
.founder-bio-band a.inline { font-family: var(--sans); color: var(--accent-deep); border-bottom: 1px solid var(--accent); transition: color 0.2s; }
.founder-bio-band a.inline:hover { color: var(--ink); }
.founder-bio-band .founder-ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 720px) { .founder-bio-band .founder-ctas { justify-content: center; } }
.founder-bio-band .founder-ctas a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px; border: 1.5px solid var(--ink); color: var(--ink); transition: all 0.2s; }
.founder-bio-band .founder-ctas a:hover { background: var(--ink); color: var(--paper); }
.founder-bio-band .founder-ctas a.primary { background: var(--ink); color: var(--paper); }
.founder-bio-band .founder-ctas a.primary:hover { background: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Free-diagnostic band
   --------------------------------------------------------------------------
   The dark band offering the estimator. It sits on every service page, so it
   lives here rather than being pasted into each one. .container-narrow comes
   with it: every page that uses the class already defines it identically
   enough, and hipaa-cicd needs it to carry the same markup as the rest.
   -------------------------------------------------------------------------- */

.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container-narrow { padding: 0 20px; } }

.lead-magnet { background: var(--ink); color: var(--paper); padding: 80px 0; border-top: 1px solid var(--rule); }
@media (max-width: 720px) { .lead-magnet { padding: 56px 0; } }
.lead-magnet-title em { color: var(--accent); font-style: italic; }
.lead-magnet-form { display: flex; flex-direction: column; gap: 14px; }
.lead-magnet-form input[type="email"]::placeholder { color: rgba(251, 250, 246, 0.4); }
.lead-magnet-form button { font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--accent); border: none; padding: 14px 24px; cursor: pointer; transition: background 0.2s; }
.lead-magnet-form button:hover { background: #c89a4f; }
.lead-magnet-cta:hover { background: #c89a4f; }

/* === SHARED COMPONENTS (generated by automation/extract_components.py) === */
/* Rules that were copy-pasted into 4+ page <style> blocks. They sit at the
   end of this file so they still beat everything above, exactly as they did
   when each page carried its own copy. Edit here, not in a page. */

.lead-magnet-cta { display: inline-block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 16px 28px; text-decoration: none; transition: background 0.2s; }
.lead-magnet-fine-print { font-family: var(--sans); font-size: 11px; color: rgba(251, 250, 246, 0.5); margin-top: 4px; }
.lead-magnet-form input[type="email"] { font-family: var(--sans); font-size: 15px; padding: 14px 16px; background: rgba(251, 250, 246, 0.06); border: 1px solid rgba(251, 250, 246, 0.2); color: var(--paper); outline: none; }
.lead-magnet-form label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(251, 250, 246, 0.72); }
.lead-magnet-desc { font-size: 16px; color: rgba(251, 250, 246, 0.78); line-height: 1.55; max-width: none; }
.lead-magnet-title { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--paper); margin-bottom: 20px; }
.lead-magnet-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
@media (max-width: 880px) { .lead-magnet-inner { grid-template-columns: 1fr; gap: 40px; } }
.lead-magnet-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.testimonial-featured-role { font-family: var(--sans); font-size: 12px; color: rgba(251, 250, 246, 0.7); margin-top: 4px; }
.testimonial-featured-name { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--paper); }
.testimonial-featured-footer { border-top: 1px solid rgba(251, 250, 246, 0.16); padding-top: 18px; }
.testimonial-featured-quote { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.4; color: var(--paper); margin-bottom: 24px; max-width: none; }
.testimonial-featured-tag { position: absolute; top: -12px; left: 36px; background: var(--accent); color: var(--ink); padding: 4px 14px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.testimonial-featured { background: var(--ink); color: var(--paper); padding: 40px 36px; position: relative; margin-top: 32px; }
@media (max-width: 720px) { .anchor-case { padding: 48px 32px; } .anchor-case .metrics { grid-template-columns: 1fr; gap: 20px; } }
.anchor-case .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(251, 250, 246, 0.16); }
.anchor-case .industry-tag { position: absolute; top: -12px; left: 56px; background: var(--accent); color: var(--ink); padding: 4px 14px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.anchor-case { background: var(--ink); color: var(--paper); padding: 64px 56px; margin-top: 28px; position: relative; }
.mistakes { list-style: none; counter-reset: mistakes; margin-top: 28px; max-width: 820px; }
.stage-mark { font-family: var(--sans); font-size: 11px; color: var(--accent-deep); letter-spacing: 0.14em; margin-bottom: 14px; }
@media (max-width: 720px) { .stages { grid-template-columns: 1fr; } }
.stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 28px; }
@media (max-width: 720px) { .control-list li { grid-template-columns: 1fr; gap: 4px; } }
.control-list .desc { color: var(--ink); }
.control-list .code { font-family: var(--mono); font-size: 13px; color: var(--accent-deep); letter-spacing: 0.02em; }
.control-list li:last-child { border-bottom: 1px solid var(--rule); }
.control-list li { padding: 18px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 220px 1fr; gap: 24px; font-size: 16px; }
.control-list { list-style: none; margin: 24px 0 32px; max-width: 820px; }
.faq-q .num { font-family: var(--sans); font-size: 13px; color: var(--accent-deep); font-weight: 400; flex-shrink: 0; padding-top: 6px; letter-spacing: 0.08em; }
.engagement .price { font-family: var(--sans); font-size: 13px; color: var(--accent-deep); letter-spacing: 0.04em; margin-bottom: 16px; }
.engagement-tag { font-family: var(--sans); font-size: 11px; color: var(--accent-deep); letter-spacing: 0.16em; margin-bottom: 18px; }
.engagement { background: var(--paper); border: 1px solid var(--rule); padding: 36px 32px; }
.h4 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-top: 32px; margin-bottom: 14px; }
.faq-a { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 760px; margin-left: 56px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .sticky-bar { flex-direction: column; gap: 10px; padding: 12px 16px; text-align: center; }
  .sticky-bar-tag { font-size: 12px; line-height: 1.4; }
  .sticky-bar-tag .dot { margin: 0 6px; }
  .sticky-bar-actions { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .sticky-bar-btn { padding: 8px 14px; font-size: 12px; }
  .sticky-bar-close { position: absolute; top: 6px; right: 8px; font-size: 18px; }
}
.sticky-bar-close {
  background: transparent; border: none;
  color: rgba(251, 250, 246, 0.6); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 8px; margin-left: 4px;
  transition: color 0.15s;
}
.sticky-bar-btn.primary { background: var(--accent); color: var(--ink); }
.sticky-bar-btn {
  display: inline-block; padding: 9px 18px; border-radius: 0;
  font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: all 0.15s;
}
.sticky-bar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sticky-bar-tag .dot { color: var(--accent); margin: 0 8px; font-weight: 600; }
.sticky-bar-tag {
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(251, 250, 246, 0.92); flex: 1; min-width: 0;
}
.sticky-bar.is-hidden { transform: translateY(100%); }
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: var(--ink); color: var(--paper);
  border-top: 2px solid var(--accent);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; box-shadow: none;
  transform: translateY(0); transition: transform 0.3s ease;
}
.footer-bottom {
  padding-top: 24px; border-top: 1px solid rgba(251, 250, 246, 0.12);
  font-size: 13px; color: rgba(251, 250, 246, 0.55); text-align: center;
}
.footer-col li { margin-bottom: 10px; }
.footer-brand .brand-mark { width: 32px; height: 32px; }
.site-footer {
  background: var(--ink); color: var(--paper);
  padding: 60px 0 30px; border-top: 2px solid var(--accent);
}
@media (max-width: 760px) {
  .dc-grid { grid-template-columns: 1fr; gap: 18px; }
  .direct-contact-card { padding: 28px; }
}
.dc-item { display: flex; flex-direction: column; }
.dc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.dc-eyebrow {
  font-family: var(--sans); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-deep); margin-bottom: 12px;
}
.direct-contact-card {
  max-width: 860px; margin: 0 auto; padding: 40px;
  background: var(--paper-warm); border-radius: 0;
  border-left: 3px solid var(--accent);
}
.direct-contact { padding: 60px 0; background: var(--paper); }
.final-cta .cta-btn {
  display: inline-block; background: var(--accent); color: var(--ink);
  padding: 16px 36px; border-radius: 0; font-weight: 600;
  text-decoration: none; font-size: 16px; transition: all 0.15s;
}
.final-cta {
  padding: 100px 0; text-align: center;
  background: var(--ink); color: var(--paper);
}
.testimonial cite {
  font-style: normal; font-size: 14px; color: var(--ink-soft);
  display: block; font-family: var(--sans);
}
section.bg-ink h2 em { color: var(--accent); }
section.bg-ink .eyebrow { color: var(--accent); }
section.bg-ink h2, section.bg-ink h3 { color: var(--paper); }
.crumbs span { color: var(--ink); }
.crumbs {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); padding: 22px 0 0;
}
.cta-inner h2 em { color: var(--accent-deep); font-style: italic; }
.fact { font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--muted); }
/* Cell count varies by page now that the Engagement cell is gone. Each cell
   sizes to its own content and the row centres, so a short last cell does not
   leave a wide gap on the right the way equal 1fr columns did. Flex rather
   than grid because the cells are wider than any sane fixed track. */
.facts-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 32px 72px;
}
.facts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-warm); padding: 28px 0; }
.diagram-figure svg,
.diagram-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.diagram-figure figcaption {
  font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 14px;
}
/* SVG diagram */
.diagram-figure {
  margin: 40px 0;
  padding: 32px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}
.author-bio a.cta { display: inline-block; margin-top: 16px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: var(--accent-deep); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: all 0.2s; }
.article-body table td:last-child, .article-body table th:last-child { padding-right: 0; }
.article-body table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); vertical-align: top; }
.article-body table th { text-align: left; font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); border-bottom: 1.5px solid var(--ink); padding: 12px 16px 12px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15px; }
.article-body .callout .callout-head { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px; }
.article-body .callout { background: var(--paper-warm); border-left: 3px solid var(--accent); padding: 24px 28px; margin: 36px 0; }
.article-body strong { font-weight: 600; color: var(--ink); }
.article-meta .meta-k { color: var(--accent-deep); margin-right: 8px; }
.article-deck { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; line-height: 1.4; color: var(--ink-soft); font-style: italic; max-width: 760px; margin-bottom: 36px; }
.cta-row .k { color: rgba(251, 250, 246, 0.72); }
.author-bio-head {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 18px;
}
/* Author bio */
.author-bio {
  margin-top: 80px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 56px 0;
  max-width: 120px;
  margin-left: 0;
  border-color: var(--accent);
}
.article-body ul li {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  padding: 8px 0 8px 28px;
  position: relative;
}
.article-body ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.article-body pre code {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.article-body pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--ink);
  color: var(--paper);
  padding: 24px 28px;
  margin: 28px 0;
  overflow-x: auto;
  border-left: 3px solid var(--accent);
}
.article-body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--code-bg);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 0;
  border: 1px solid var(--rule);
}
.article-body em { font-style: italic; }
.article-body h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 36px;
  margin-bottom: 14px;
}
.article-body h2 .num {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  margin-bottom: 14px;
  font-style: normal;
}
/* Article header */
.article-header {
  padding: 56px 0 56px;
  border-bottom: 1px solid var(--rule);
}
.alt { margin-top: 18px; font-size: 15px; color: var(--muted); line-height: 1.65; }
.btn-dark { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-family: var(--sans); font-weight: 500; font-size: 16px; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); transition: all 0.2s; }
.faq-item .a { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 840px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary::-webkit-details-marker { display: none; }
.block p strong { color: var(--ink); font-weight: 600; }
.pricebox .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-family: var(--sans); font-weight: 500; font-size: 15.5px; background: var(--accent); color: var(--ink); border: 1.5px solid var(--accent); transition: all 0.2s; white-space: nowrap; }
.pricebox .terms { font-family: var(--sans); font-size: 13px; color: rgba(251, 250, 246, 0.7); line-height: 1.7; }
.pricebox .amount { font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px; }
.pricebox .label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
@media (max-width: 760px) { .pricebox { grid-template-columns: 1fr; padding: 26px 22px 24px; } }
/* Price block */
.pricebox { background: var(--ink); color: var(--paper); padding: 34px 36px 28px; border-left: 3px solid var(--accent); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
@media (max-width: 720px) { #sticky-cta { padding: 12px 16px; } #sticky-cta .message { font-size: 13px; flex: 1 1 100%; } #sticky-cta a.primary, #sticky-cta a.secondary { font-size: 10px; padding: 6px 10px; } }
#sticky-cta button.dismiss { background: transparent; color: rgba(251, 250, 246, 0.5); border: none; padding: 8px 6px; cursor: pointer; font-size: 20px; line-height: 1; transition: color 0.2s; }
#sticky-cta .actions { display: flex; gap: 8px; align-items: center; }
#sticky-cta .message { font-size: 14px; color: rgba(251, 250, 246, 0.92); flex: 1 1 280px; }
/* Sticky CTA */
#sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--paper); padding: 14px 24px; display: none; align-items: center; justify-content: space-between; z-index: 100; border-top: 2px solid var(--accent); flex-wrap: wrap; gap: 12px; box-shadow: none; }
.social-proof-band .text strong { color: var(--ink); font-weight: 600; }
.social-proof-band .text { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.social-proof-band .icon { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }
.breadcrumb { padding: 24px 0 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
/* Reading progress bar */
#reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0%; z-index: 200; transition: width 0.1s ease-out; }