/* ==========================================================================
   Fonts — self-hosted. No third-party request, nothing render-blocking from
   another origin, and no visitor data leaving this domain to load a typeface.
   Archivo and Source Serif 4 are variable; one file covers their whole range.
   ========================================================================== */

@font-face{font-family:Archivo;font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/source-serif-var.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/source-serif-italic-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/plex-mono-500.woff2) format("woff2")}

/* ==========================================================================
   Marquise Micro Applications, Inc. — "Cut and Set"
   Gem-cut geometry set into an engineering spec sheet.

   Contents
   ---------------------------------------------------------------------------
   1.  Design tokens (light / dark / explicit theme)
   2.  Reset and base type
   3.  Utilities
   4.  Brand mark
   5.  Masthead and navigation
   6.  Buttons
   7.  Hero and title block
   8.  Section scaffolding
   9.  Services and chips
   10. Spec plate (build metrics)
   11. Two-column content, capability grid
   12. Method steps
   13. Career timeline
   14. Pull quote
   15. Contact
   16. Footer
   17. Error page
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */

:root {
  --paper:          #F4F3F7;
  --surface:        #FFFFFF;
  --surface-sunk:   #EBE9F1;
  --ink:            #191426;
  --ink-soft:       #3D3556;
  --muted:          #635B7A;
  --rule:           #DCD8E6;
  --rule-strong:    #B4ADC6;
  --accent:         #5B4E85;
  --accent-soft:    #ECE9F6;
  --gold:           #8A6318;
  --plate:          #191426;
  --plate-ink:      #EFECF7;
  --plate-muted:    #9C93B4;
  --plate-rule:     #2E2743;
  --plate-accent:   #C9C2E0;
  --plate-gold:     #D8A94A;
  /* The logo's own two tones, straight off the 1990 mark. */
  --mark-edge:    #7E739F;
  --mark-face:    #C9C2E0;

  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 66ch;
  --shell: 1120px;
  --gut: clamp(20px, 5vw, 56px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:          #0E0B16;
    --surface:        #161226;
    --surface-sunk:   #1D182F;
    --ink:            #EAE7F2;
    --ink-soft:       #C3BCD7;
    --muted:          #968EAC;
    --rule:           #282240;
    --rule-strong:    #443C5E;
    --accent:         #B7ABDC;
    --accent-soft:    #1F1A31;
    --gold:           #D8A94A;
    --plate:          #1D182F;
    --plate-ink:      #EAE7F2;
    --plate-muted:    #968EAC;
    --plate-rule:     #382F52;
    --plate-accent:   #C9C2E0;
    --plate-gold:     #D8A94A;
    /* Inverted on dark so the outer stone stays the lighter of the two. */
    --mark-edge:    #B7ABDC;
    --mark-face:    #6C6191;
  }
}

:root[data-theme="dark"] {
  --paper:          #0E0B16;
  --surface:        #161226;
  --surface-sunk:   #1D182F;
  --ink:            #EAE7F2;
  --ink-soft:       #C3BCD7;
  --muted:          #968EAC;
  --rule:           #282240;
  --rule-strong:    #443C5E;
  --accent:         #B7ABDC;
  --accent-soft:    #1F1A31;
  --gold:           #D8A94A;
  --plate:          #1D182F;
  --plate-ink:      #EAE7F2;
  --plate-muted:    #968EAC;
  --plate-rule:     #382F52;
  --plate-accent:   #C9C2E0;
  --plate-gold:     #D8A94A;
  --mark-edge:    #B7ABDC;
  --mark-face:    #6C6191;
}

/* ---------- 2. Reset and base type ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 98px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.08;
}

p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- 3. Utilities --------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Brand mark -------------------------------------------------- */

/* The 1990 mark, flat two-tone. Both tones are tokens, so the mark inverts
   with the theme instead of needing a second file. */
.mark { display: block; }
.mark-edge { fill: var(--mark-edge); }
.mark-face { fill: var(--mark-face); }

/* ---------- 5. Masthead and navigation ------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(10px)) {
  .masthead { background: var(--paper); }
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 86px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  margin-right: auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.masthead[data-open="true"] .nav-toggle .icon-close { display: block; }
.masthead[data-open="true"] .nav-toggle .icon-open  { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 6px var(--gut) 14px;
  }
  .masthead[data-open="true"] .nav { display: flex; }
  .nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
  }
  .nav a:last-child { border-bottom: 0; }
  .logo-name { font-size: 17px; }
  .logo-sub { font-size: 11px; }
  .logo { gap: 11px; }
  .masthead .mark { width: 18px; height: 37.99px; }
  .masthead-in { min-height: 68px; }
}

@media (max-width: 480px) {
  .masthead .btn { display: none; }
}

/* ---------- 6. Buttons ----------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 17px;
  border: 1px solid var(--accent);
  color: var(--surface);
  background: var(--accent);
  transition: background .18s, color .18s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- 7. Hero ------------------------------------------------------- */

/* A brand-violet, centred stage: one short headline, one line, two pills and
   the shaded mark. The colours are fixed rather than theme tokens on purpose,
   so it looks the same in light and dark mode. */
.hero {
  background: radial-gradient(120% 90% at 50% 100%, #8475C0 0%, #4A3F70 62%);
  color: #FFFFFF;
  text-align: center;
  padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  color: #FFFFFF;
}
@media (max-width: 700px) { .hero-br { display: none; } }
.hero-sub {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 450;
  letter-spacing: -0.01em;
  color: #E7E2F5;
}
.hero-detail {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: #CFC8E6;
}
.hero-pills { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.pill {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  padding: 11px 22px;
  border: 1px solid #F4F2F8;
  border-radius: 980px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.pill-solid { background: #F4F2F8; color: #3B3160; }
.pill-solid:hover { background: #FFFFFF; border-color: #FFFFFF; }
.pill-line { color: #F4F2F8; }
.pill-line:hover { background: rgba(255, 255, 255, 0.12); }
.pill:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.hero-mark {
  display: block;
  height: clamp(170px, 21vw, 300px);
  width: auto;
  margin: clamp(32px, 4vw, 48px) auto 0;
  filter: drop-shadow(0 26px 50px rgba(20, 14, 40, 0.45));
}

/* Shared by the contact section and the 404 page. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Row labels, used by the contact rows. */
.tb-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

/* ---------- 8. Section scaffolding ----------------------------------------- */

.band { border-top: 1px solid var(--rule); }
.band-alt { background: var(--surface); }

.sec-rule {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-top: clamp(44px, 6vw, 76px);
}
.sec-title { font-size: clamp(23px, 3vw, 32px); }
.sec-line { flex: 1; height: 1px; background: var(--rule); transform: translateY(-6px); }

.sec-body { padding-bottom: clamp(48px, 7vw, 84px); }
.sec-intro {
  max-width: var(--measure);
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 18px;
}
.sec-intro.is-flush { margin-top: 0; }

/* ---------- 9. Services and chips ------------------------------------------ */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  margin-top: 42px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.service {
  background: var(--paper);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.band-alt .service { background: var(--surface); }
.service h3 { font-size: 18px; letter-spacing: -0.012em; }
.service p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; padding: 0; list-style: none; }
.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- 10. Spec plate ------------------------------------------------- */

.plate {
  margin-top: 44px;
  background: var(--plate);
  border: 1px solid var(--plate-rule);
  color: var(--plate-ink);
}
.plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--plate-gold);
}
.plate-head .eyebrow { color: var(--plate-gold); }
.plate-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--plate-muted);
}
/* Hairlines are drawn ON the cells, not by a 1px gap over a coloured
   container: eight metrics in a five-column grid leave empty cells, and a
   coloured container shows through them as a block. */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--plate);
  margin: 0;
  padding: 0;
}
.metric {
  background: var(--plate);
  padding: 24px 22px 26px;
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--plate-rule);
  border-bottom: 1px solid var(--plate-rule);
}
.metric-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--plate-accent);
}
.metric-n .unit { font-size: 0.5em; color: var(--plate-muted); letter-spacing: 0; margin-left: 3px; }
.metric-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plate-muted);
  margin-top: 12px;
  line-height: 1.5;
}
.plate-foot {
  padding: 16px 22px;
  border-top: 1px solid var(--plate-rule);
  font-size: 14.5px;
  color: var(--plate-muted);
}

/* Hidden only when scripting is confirmed present (the .js class is set by an
   inline script in <head>). If main.js fails to load, the build metrics stay
   visible instead of being permanently invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
}

/* ---------- 11. Two-column content, capability grid ------------------------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 34px;
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.prose p + p { margin-top: 16px; }
.prose p { color: var(--ink-soft); }

.stack-list { border: 1px solid var(--rule); background: var(--surface); }
.band-alt .stack-list { background: var(--paper); }
.stack-list h3 {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.stack-list ul { list-style: none; margin: 0; padding: 0; }
.stack-list li {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.stack-list li:last-child { border-bottom: 0; }
.stack-list li::before {
  content: "";
  flex: none;
  width: 5px; height: 9px;
  background: var(--mark-edge);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: translateY(1px);
}

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 22px 32px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.cap h3 {
  font-size: 15.5px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cap p { font-size: 14.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* ---------- 12. Method steps ----------------------------------------------- */

.method {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.step {
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  padding: 26px 24px;
  align-items: start;
}
.band-alt .step { background: var(--surface); }
/* A step gets a side column only when it carries a year (the case-study drafts). */
.step:has(> .step-year) { grid-template-columns: 74px minmax(0, 1fr); }
@media (max-width: 620px) { .step, .step:has(> .step-year) { grid-template-columns: 1fr; gap: 10px; } }
.step-year,
.draft-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.step-year { padding-top: 5px; }
.draft-tag { flex: none; }
.step h3 { font-size: 18px; letter-spacing: -0.012em; }
.step p { margin-top: 8px; color: var(--ink-soft); font-size: 15.5px; max-width: 62ch; }

/* ---------- 13. Career timeline -------------------------------------------- */

.timeline { border-top: 1px solid var(--rule-strong); margin-top: 34px; }
.tl-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 640px) { .tl-row { grid-template-columns: 1fr; gap: 8px; } }
.tl-when {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--gold);
  padding-top: 5px;
}
.tl-what h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.tl-org {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.tl-what p { margin-top: 9px; color: var(--ink-soft); font-size: 15.5px; max-width: 62ch; }

/* ---------- 14. Pull quote ------------------------------------------------- */

.pull {
  margin: 44px 0 0;
  padding: 30px clamp(22px, 4vw, 42px);
  border-left: 3px solid var(--gold);
  background: var(--accent-soft);
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.42;
  font-style: italic;
  max-width: 40ch;
}

/* ---------- 15. Contact ---------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: clamp(28px, 5vw, 60px);
  margin-top: 34px;
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-rows { border-top: 1px solid var(--rule-strong); }
.crow {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.crow a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.crow a:hover { border-bottom-color: var(--accent); }
.crow-val { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- 16. Footer ----------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.foot .mono { font-size: 11.5px; letter-spacing: 0.06em; }
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-mark { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) { .foot-mark { margin-left: 0; } }

/* ---------- 17. Error page ------------------------------------------------- */

.errorpage {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 12vw, 120px);
}
.errorpage .code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.errorpage h1 { font-size: clamp(30px, 5vw, 48px); margin-top: 18px; }
.errorpage p { margin-top: 20px; max-width: 52ch; color: var(--ink-soft); font-size: 18px; }

/* ---------- 18. Print -------------------------------------------------------
   Contractors print things. Flatten the ink-heavy plate, unstick the header,
   drop the interactive furniture, and never let a card break across pages. */

@media print {
  :root {
    --paper:#FFFFFF; --surface:#FFFFFF; --surface-sunk:#FFFFFF;
    --ink:#000000; --ink-soft:#1A1A1A; --muted:#444444;
    --rule:#BBBBBB; --rule-strong:#888888;
    --accent:#3D3556; --accent-soft:#FFFFFF; --gold:#6B4D12;
    --plate:#FFFFFF; --plate-ink:#000000; --plate-muted:#444444;
    --plate-rule:#BBBBBB; --plate-accent:#000000; --plate-gold:#6B4D12;
    --mark-edge:#3D3556; --mark-face:#FFFFFF;
  }

  body { font-size: 11pt; line-height: 1.45; background:#fff; }

  .masthead { position: static; border-bottom: 1.5pt solid #000; backdrop-filter: none; }
  .nav, .nav-toggle, .masthead .btn, .hero-actions, .hero-pills, .hero-mark, .skip { display: none !important; }
  .hero { background: none; color: #000; text-align: left; padding-block: 12pt 18pt; }
  .hero h1, .hero-sub, .hero-detail { color: #000; }

  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }

  .plate { border: 1pt solid #000; }
  .plate-head { border-bottom: 1pt solid #000; }
  .metrics { background: #fff; gap: 0; }
  .metric { border: 0.5pt solid #BBB; }
  .metric-n { color: #000; }

  .band, .concept { border-top: 0.5pt solid #888; }
  .sec-body { padding-bottom: 18pt; }
  .sec-rule { padding-top: 18pt; }

  .service, .step, .cap, .tl-row, .plate, .stack-list {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Print the destination of real links; skip anchors, which mean nothing on paper. */
  a[href^="http"]::after, a[href^="mailto"]::after, a[href^="tel"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono); font-size: 8.5pt; color: #444; word-break: break-all;
  }
  a[href^="#"]::after { content: ""; }
}