/* ==========================================================================
   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 img { width: 100%; border-radius: 3px; box-shadow: var(--shadow); }

/* 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; }