/* ==========================================================================
   Amidon Shield — design system
   One file. Readable selectors. No generated hash classes.
   ========================================================================== */

:root {
  /* Palette — anchored to the existing logo, not reinvented */
  --ink:       #0B2239;  /* deep navy, outer shield of the logo */
  --ink-2:     #16344F;  /* raised surface on dark ground */
  --brand:     #057BC4;  /* existing brand blue, unchanged */
  --bright:    #2B9CE8;  /* inner shield blue, for highlights */
  --paper:     #F5F7F9;  /* cool off-white */
  --white:     #FFFFFF;
  --steel:     #64778A;  /* secondary and technical text */
  --rule:      #D8E0E7;  /* hairlines */
  --rule-dark: #23415C;  /* hairlines on dark ground */
  --signal:    #E8543F;  /* threat/impact data ONLY — the red end of the
                            stress gradient in Amidon's own FEM analysis */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 68ch;       /* readable line length — the fix for dense columns */
  --page:    1200px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8rem);

  --shadow: 0 18px 48px rgba(11, 34, 57, 0.13);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--bright); }

:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Type ------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.125rem); }
h3 { font-size: 1.3125rem; letter-spacing: -0.015em; line-height: 1.25; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.measure { max-width: var(--measure); }
.lead { font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.65; color: #2C4257; }

/* The mono eyebrow — a section's label, not decoration */
.eyebrow {
  font-family: var(--data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 5rem;
}
.on-dark .eyebrow { color: var(--bright); }
.on-dark .eyebrow::after { background: var(--rule-dark); }

/* Layout ----------------------------------------------------------------- */
.wrap {
  width: min(var(--page), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.on-dark { background: var(--ink); color: #DCE6EF; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-paper { background: var(--paper); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--data);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--bright); color: var(--white); }
.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-dark .btn-ghost { color: var(--white); }
.on-dark .btn-ghost:hover { background: var(--white); color: var(--ink); }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 1.25rem;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
/* No box, no shadow, no panel — the logo sits directly on the hero */
.site-logo img { width: 190px; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.nav a:hover { color: var(--white); border-bottom-color: var(--bright); }

.nav-item { position: relative; }
.nav-item > a::after { content: none; }
.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
/* Dropdown: opens on hover with no dead gap, and works on keyboard focus.
   The parent's padding bridges the distance to the panel, so the pointer
   never leaves the hover target on the way down. */
.submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--ink);
  border-top: 2px solid var(--brand);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.9375rem;
  border-bottom: 0;
  white-space: nowrap;
}
.submenu a:hover { background: var(--brand); color: var(--white); }

.site-header.is-solid {
  position: static;
  background: var(--ink);
}
.site-header.is-solid + main > section:first-child { padding-top: var(--section); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  padding-block: 9rem 5rem;
}
/* Full-bleed by construction. Nothing boxes this in, so the video simply
   fills it — no runtime measurement required. */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto; height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;     /* cover, relative to the container — not the viewport */
  border: 0;
  pointer-events: none;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11,34,57,0.92) 0%, rgba(11,34,57,0.72) 45%, rgba(11,34,57,0.35) 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero h1 { color: var(--white); margin-bottom: 0.15em; }

/* Rotating phrase. Owns its own markup, so nothing can hide it:
   inactive items are display:none and the active one is display:block. */
.rotator {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bright);
  min-height: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 2.25rem;
}
.rotator::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-left: 10px solid var(--signal);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.rotator-item { display: none; }
.rotator-item.is-active { display: block; animation: rise 0.4s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(0.25em); }
  to   { opacity: 1; transform: none; }
}

/* Test record — the signature band ---------------------------------------
   Amidon's four verified figures, set as instrumentation output rather
   than marketing statistics. */
.record { background: var(--ink); color: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem); }
.record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule-dark);
}
.record-head .eyebrow { margin: 0; }
.record-standards {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8AA3B8;
}
.record-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2.5rem;
  gap: 0;
}
.record-cell { padding: 0 clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--rule-dark); }
.record-cell:first-child { padding-left: 0; border-left: 0; }
.record-figure {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--white);
  display: block;
}
.record-cell.is-signal .record-figure { color: var(--signal); }
.record-label {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8AA3B8;
  margin-top: 0.75rem;
  display: block;
}

/* Split: text + image, with the image given real presence ----------------
   The old layout put dense text beside a thumbnail. Here the image is an
   equal partner and the text is capped to a readable measure. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split-media img { border-radius: 3px; box-shadow: var(--shadow); width: 100%; }
.split.is-reversed .split-text { order: 2; }

/* Cards ------------------------------------------------------------------ */
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Equal heights come from the grid itself — items stretch by default and
   the card fills its track. No script, no measuring. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--steel); font-size: 0.9688rem; }
.card-link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.card-link::after { content: " →"; }

/* Service tiles — solid blue, equal height by grid */
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--brand);
  color: var(--white);
  padding: 2rem 1.5rem;
  border-radius: 3px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.tile:hover { background: var(--bright); color: var(--white); transform: translateY(-3px); }
.tile svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tile h3 { font-size: 1.0625rem; color: var(--white); margin: 0; }

/* Audience list ---------------------------------------------------------- */
.audience { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.audience li {
  list-style: none;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-top: 2px solid var(--ink);
  margin-right: 1.5rem;
}
.audience .n {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--brand);
  display: block;
  margin-bottom: 0.6rem;
}
.audience strong { font-family: var(--display); font-size: 1.0625rem; letter-spacing: -0.01em; display: block; }

/* Checklist — real list semantics, hanging indent, CSS-drawn mark --------- */
.checklist { list-style: none; margin: 1.25rem 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5rem;
  width: 0.72rem;
  height: 0.38rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.on-dark .checklist li::before { border-color: var(--bright); }

/* Proof strip ------------------------------------------------------------ */
.proof { display: grid; gap: 1px; background: var(--rule); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.proof div { background: var(--paper); padding: 1.75rem 1.5rem; }
.proof dt {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.5rem;
}
.proof dd { margin: 0; font-weight: 500; line-height: 1.45; }

/* CTA band --------------------------------------------------------------- */
.cta { background: var(--brand); color: var(--white); text-align: center; }
.cta h2 { color: var(--white); }
.cta p { margin-inline: auto; }
.cta .btn-ghost { color: var(--white); margin-top: 1.75rem; }
.cta .btn-ghost:hover { background: var(--white); color: var(--brand); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #9FB3C6; padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule-dark);
}
.site-footer h4 {
  font-family: var(--data);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a { color: #9FB3C6; font-size: 0.9375rem; }
.site-footer a:hover { color: var(--white); }
.footer-logo img { width: 150px; margin-bottom: 1.25rem; }
.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #7793AB;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .record-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .record-cell:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-top: 2px solid var(--brand);
    box-shadow: var(--shadow);
    padding: 0.5rem 0;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav > li > a { padding: 0.75rem 1.25rem; border-bottom: 0; }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 0.5rem 1.25rem;
  }
  .split { grid-template-columns: 1fr; }
  .split.is-reversed .split-text { order: 0; }
}
@media (max-width: 560px) {
  .record-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .record-cell { padding-left: 0; border-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* The solid header and the page hero share the navy ground, so they read as
   one masthead rather than two stacked bars. */
.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--rule-dark);
}
.site-header.is-solid + main > .page-hero { padding-top: clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: clamp(2.25rem, 4.8vw, 3.75rem); margin-bottom: 0.35em; }
.page-hero .lead { color: #B9CDDE; }
.nav a.is-current { border-bottom-color: var(--bright); }

/* Prose inside a section */
.measure h3 { margin-top: 2.25rem; }
.measure h4 {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.measure > :first-child { margin-top: 0; }

/* Secondary images from a section, below the split */
.gallery {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 3px; box-shadow: var(--shadow); }
.gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--steel);
}

/* Articles ---------------------------------------------------------------- */
.article-hero { border-bottom: 0; }
.article-meta {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8AA3B8;
  margin: 0;
}
.article-hero-media { margin-top: -2.5rem; position: relative; z-index: 2; }
.article-hero-media img {
  width: 100%;
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.article-body { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.article-body .measure > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: #2C4257;
}
.article-cta {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border-left: 3px solid var(--brand);
  border-radius: 2px;
}
.article-cta p { margin: 0; }

/* Cards on the Briefing index */
.card-media { display: block; overflow: hidden; }
.card-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.card:hover .card-media img { transform: scale(1.03); }
.card-date {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 0.5rem;
}
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--brand); }

/* Contact ----------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-details { margin: 2rem 0 0; }
.contact-details > div { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.contact-details dt {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.35rem;
}
.contact-details dd { margin: 0; font-weight: 500; }
.contact-form iframe {
  width: 100%;
  min-height: 1360px;
  border: 0;
  background: var(--white);
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .article-hero-media { margin-top: -1.5rem; }
}

/* A page hero already carries its own bottom space; the section that follows
   doesn't need a full section's worth on top of it. */
.page-hero + section { padding-top: clamp(2.75rem, 5vw, 4rem); }

/* Briefing cards: keep the summary from dominating the card */
.card-body p { font-size: 0.9375rem; color: #55697C; }
.card h3 { font-size: 1.1875rem; }

/* Calculator --------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.calc-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: 3px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.calc-label {
  display: block;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.6rem;
}
.calc-input { display: flex; align-items: stretch; max-width: 20rem; }
.calc-input input {
  flex: 1;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  background: var(--white);
  width: 100%;
  -moz-appearance: textfield;
}
.calc-input input:focus { outline: 3px solid var(--bright); outline-offset: -1px; }
.calc-unit {
  display: flex; align-items: center;
  padding: 0 1rem;
  font-family: var(--data);
  font-size: 0.875rem;
  color: var(--steel);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 0 2px 2px 0;
}
.calc-help { font-size: 0.875rem; color: var(--steel); margin: 0.6rem 0 0; }
.calc-error {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--signal);
  margin: 0.75rem 0 0;
}

.calc-result { margin: 2rem 0 0; }
.calc-result > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.calc-result dt {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.calc-result dd { margin: 0; font-weight: 600; font-size: 1.0625rem; }
.calc-total { border-top: 2px solid var(--ink) !important; }
.calc-total dt { color: var(--ink); }
.calc-total dd {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}

/* Savings prompt — fires when a larger order genuinely costs less */
.calc-tip {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--ink);
  color: #DCE6EF;
  border-radius: 3px;
  border-left: 3px solid var(--signal);
}
.calc-tip p { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.55; }
.calc-tip strong { color: var(--white); font-size: 1.0625rem; }
.calc-tip .btn { margin-top: 0.4rem; padding: 0.7rem 1.25rem; }
.calc-note { font-size: 0.875rem; color: var(--steel); margin: 1.75rem 0 1.25rem; }

.calc-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.calc-table th, .calc-table td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.calc-table thead th {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 2px solid var(--ink);
}
.calc-table tbody th { font-weight: 600; }
.calc-table .num { text-align: right; font-family: var(--data); font-weight: 500; }
.calc-table tbody tr:last-child td, .calc-table tbody tr:last-child th { border-bottom: 0; }

@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }

/* Demonstration — the side-by-side ballistic comparison ------------------- */
.demo { padding-bottom: 0; }
.demo .lead { color: #B9CDDE; }
.demo-media {
  margin-top: clamp(2rem, 4vw, 3rem);
  width: 100%;
  background: #000;
  line-height: 0;               /* no baseline gap under the video */
}
.demo-media video,
.demo-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Calculator additions --------------------------------------------------- */
.calc-next {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--white);
  border-left: 3px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--steel);
  border-radius: 2px;
}
.calc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.calc-actions .btn { cursor: pointer; font-family: var(--data); }
.calc-table tbody tr.is-current { background: #E8F2FA; }
.calc-table tbody tr.is-current th,
.calc-table tbody tr.is-current td { color: var(--ink); font-weight: 600; }
.calc-table tbody tr.is-current th { box-shadow: inset 3px 0 0 var(--brand); }

/* Calculator — entry modes and derived coverage --------------------------- */
.calc-modes { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.5rem; }
.calc-modes button {
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  background: var(--white);
  color: var(--steel);
  border: 1px solid var(--rule);
  margin-left: -1px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.calc-modes button:first-child { margin-left: 0; border-radius: 2px 0 0 2px; }
.calc-modes button:last-child { border-radius: 0 2px 2px 0; }
.calc-modes button:hover { color: var(--ink); }
.calc-modes button.is-active {
  background: var(--brand); color: var(--white); border-color: var(--brand);
  position: relative; z-index: 1;
}
.calc-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc-dims .calc-input { max-width: none; }

.calc-derived { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px; }
.calc-derived > div { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0; font-size: 0.9375rem; }
.calc-derived dt { color: var(--steel); }
.calc-derived dd { margin: 0; font-weight: 600; text-align: right; }

/* A page's own hero figure, standing on its own rather than paired with text */
.page-figure { padding-block: 0 var(--section); }
.page-figure img { width: 100%; border-radius: 3px; box-shadow: var(--shadow); }
.page-hero + .page-figure { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Build stamp — review aid, removed at launch */
.build-stamp { margin-left: 1rem; opacity: 0.55; }

/* Disclosure line under the demonstration — small, but it must be readable */
.demo-note {
  max-width: var(--measure);
  margin-top: 1rem;
  font-family: var(--data);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8AA3B8;
}
.demo-note a { color: var(--bright); text-decoration: underline; text-underline-offset: 2px; }

/* A figure set into the flow of a long article */
.article-figure { margin: 2.5rem 0; }
.article-figure img { width: 100%; border-radius: 3px; box-shadow: var(--shadow); }

/* Amidon Labs — engagement flow ------------------------------------------- */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.flow-step {
  background: var(--white);
  padding: 1.6rem 1.4rem;
  position: relative;
}
.flow-n {
  font-family: var(--data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--white);
  background: var(--brand);
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.flow-step h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.flow-step p { font-size: 0.9063rem; line-height: 1.55; color: var(--steel); margin: 0; }
/* Chevron between steps, hidden when they stack */
.flow-step::after {
  content: "";
  position: absolute;
  top: 2.1rem; right: -7px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--rule);
  border-right: 2px solid var(--rule);
  transform: rotate(45deg);
  background: var(--white);
  z-index: 2;
}
.flow-step:last-child::after { display: none; }

/* Amidon Labs — capability matrix ----------------------------------------- */
.cap-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cap-col { border-top: 3px solid var(--brand); padding-top: 1.1rem; }
.cap-col h3 {
  font-family: var(--data);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}
.cap-col ul { list-style: none; margin: 0; padding: 0; }
.cap-col li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.cap-col li:last-child { border-bottom: 0; }

@media (max-width: 760px) { .flow-step::after { display: none; } }

/* Product cutouts — contained rather than filling the column ------------- */
.split-media.is-product {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.split-media.is-product img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  box-shadow: none;     /* a cutout has no edge to cast one */
  border-radius: 0;
}

/* Specification table — real data, not a screenshot ---------------------- */
.spec-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0.5rem; }
.spec-table caption {
  text-align: left; font-size: 0.9375rem; color: var(--steel);
  padding-bottom: 0.9rem; font-style: italic;
}
.spec-table th, .spec-table td {
  text-align: left; padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--rule); font-size: 0.9375rem;
}
.spec-table thead th {
  font-family: var(--data); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel); border-bottom: 2px solid var(--ink);
}
.spec-table tbody th { font-weight: 600; }
.spec-table .num { text-align: right; font-family: var(--data); font-weight: 500; white-space: nowrap; }
.spec-source { font-size: 0.8125rem; color: var(--steel); margin-top: 0.6rem; }


/* SDVOSB badge — used on Gov Info and Contact. PNG with transparency so it
   sits on either background; fixed width/height attributes prevent shift. */
.sdvosb-badge { margin: 1.5rem 0 0; }
.sdvosb-badge img { width: 150px; height: auto; display: block; }
.sdvosb-badge figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 22rem;
  color: var(--steel);
}


/* Technology page: its split sections pair long text with short images, so the
   shared center alignment drops each image toward the middle of a tall column
   and it reads as belonging to the section below. Top-align here so every image
   starts level with its heading. Scoped to this page; the global .split rule
   (used by ~60 splits elsewhere) is unchanged. */
.page-technology .split { align-items: start; }


/* A split whose right column holds more than one image: stack them with a
   gap instead of dropping the extras into a full-width gallery below. */
.split-media-stack { display: grid; gap: 1.25rem; align-content: start; }


/* Field-proof stats: big fielded numbers, distinct from lab-test credits.
   Reuses the .proof grid; the number leads, the qualifier follows. */
.field-stats .fig {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.01em;
}
.field-stats .fig-unit { display: block; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand);
  margin-top: 0.35rem; font-family: var(--data); }
.field-stats dd { margin: 0.75rem 0 0; color: var(--steel); line-height: 1.5; }


/* Media gallery (Photos & Videos) ---------------------------------------- */
.media-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.media-item { margin: 0; }
.media-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink, #0e1b26);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.media-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.media-item figcaption {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #17222b);
}
/* Featured single video (the intro) spans wider */
.media-feature { max-width: 900px; margin-inline: auto; }
.media-feature .media-embed { box-shadow: var(--shadow); }
.media-feature figcaption { font-size: 1.0625rem; text-align: center; margin-top: 0.85rem; }
/* Photo grid reuses gallery look */
.photo-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow); }
.photo-grid figcaption { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--steel); line-height: 1.4; }


/* ArmorBlock configurator (Design Your Wall) ----------------------------- */
#ab-configurator .abc-head { margin: 0 0 1.75rem; }
@media (max-width: 880px) { }
.abc-stage { background: var(--ink); border-radius: 6px; padding: 1.25rem; box-shadow: var(--shadow); }
.abc-stage-svg svg { display: block; width: 100%; height: auto; }
.abc-stage-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12); }
.abc-stage-foot span { font-family: var(--data); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8FB6D6; }
.abc-controls { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 1.4rem; }
.abc-field { margin-bottom: 1.4rem; }
.abc-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.abc-label label { font-weight: 600; font-size: .9rem; }
.abc-val { font-family: var(--data); font-size: 1.05rem; color: var(--brand); font-weight: 500; }
.abc-val small { color: var(--steel); font-weight: 400; font-size: .78rem; }
#ab-configurator input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--rule); outline: none; margin: 0; }
#ab-configurator input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 6px rgba(11,34,57,.25); }
#ab-configurator input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); cursor: pointer; border: 3px solid var(--white); }
#ab-configurator input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--bright); outline-offset: 2px; }
.abc-range-scale { display: flex; justify-content: space-between; font-family: var(--data); font-size: .68rem; color: var(--steel); margin-top: .35rem; }
.abc-spec { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.abc-spec dl { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; margin: 0; }
.abc-spec dt { color: var(--steel); font-size: .88rem; }
.abc-spec dd { margin: 0; font-family: var(--data); font-weight: 500; text-align: right; }
.abc-price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.abc-price-lbl { font-weight: 700; }
.abc-amt { font-family: var(--display); font-weight: 800; font-size: 1.65rem; color: var(--ink); }
.abc-tier { font-family: var(--data); font-size: .72rem; color: var(--brand); text-align: right; margin: .15rem 0 0; }
.abc-note { font-size: .76rem; color: var(--steel); line-height: 1.5; margin: .9rem 0 0; }
.abc-actions { display: flex; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.abc-actions .btn { flex: 1; min-width: 140px; }
@media print {
  .site-header, .site-footer, .abc-controls .abc-actions, .calc-grid, .page-figure { display: none !important; }
  .abc-stage { box-shadow: none; }
}


/* ArmorBlock configurator — multi-wall layout additions */
.abc-wall { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start;
  background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 880px) { .abc-wall { grid-template-columns: 1fr; } }
.abc-wall-stage { background: var(--ink); border-radius: 5px; padding: 1rem; }
.abc-wall-stage svg { display: block; width: 100%; height: auto; }
.abc-wall-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.abc-pos { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px; padding: .4rem .6rem; background: var(--paper); cursor: pointer; }
.abc-remove { background: none; border: none; color: var(--signal); font-family: var(--body); font-size: .82rem;
  font-weight: 600; cursor: pointer; padding: .3rem .2rem; }
.abc-remove:hover { text-decoration: underline; }
.abc-mirror { display: flex; align-items: baseline; gap: .5rem; font-size: .88rem; font-weight: 600;
  cursor: pointer; margin: .5rem 0 0; }
.abc-mirror input { margin: 0; width: 16px; height: 16px; accent-color: var(--brand); }
.abc-mirror-hint { font-weight: 400; color: var(--steel); font-size: .8rem; }
.abc-wall-sub { font-size: .82rem; color: var(--steel); margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); font-family: var(--data); }
.abc-wall-sub strong { color: var(--ink); }
.abc-add { margin: 0 0 2rem; }
.abc-total { background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 1.4rem; }
.abc-total-head { margin-bottom: .5rem; }
.abc-total-spec { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; margin: 0; }
.abc-total-spec dt { color: var(--steel); font-size: .9rem; }
.abc-total-spec dd { margin: 0; font-family: var(--data); font-weight: 500; text-align: right; }
@media print {
  .site-header, .site-footer, .abc-actions, .abc-add, .abc-remove, .calc-grid, .page-figure, .preview-bar { display: none !important; }
  .abc-wall-stage { background: #fff; border: 1px solid #ccc; }
  .abc-wall-stage svg rect { fill: #ddd !important; }
}


/* ArmorBlock inline video */
.ab-video { max-width: 900px; margin: 1.5rem auto 0; }
.ab-video-embed { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.ab-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* FAQ accordion */
.faq details { border-bottom: 1px solid var(--rule); padding: .3rem 0; }
.faq summary { font-family: var(--display); font-weight: 700; font-size: 1.05rem; padding: .9rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; font-size: 1.4rem; }
.faq details[open] summary::after { content: "‘2"; }
.faq details p { margin: 0 0 1rem; color: var(--steel); }


/* Footer social links */
.footer-social h4 { margin-bottom: .6rem; }
.social-list { list-style: none; padding: 0; margin: 0; }
.social-list li { margin-bottom: .4rem; }
.social-list a { color: inherit; opacity: .85; }
.social-list a:hover { opacity: 1; text-decoration: underline; }