/* =========================================================
   Fonts — self-hosted, latin subset (see fonts/)
   Newsreader & IBM Plex are SIL Open Font License 1.1.
   ========================================================= */

/* Variable: opsz 6-72, wght 400-700 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-variable-latin.woff2") format("woff2");
}

/* Variable: wght 400-700 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-variable-latin.woff2") format("woff2");
}

/* Static — no variable version is published for Plex Mono */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
}
/* 700 is the heaviest weight IBM Plex Mono publishes */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
}

/* =========================================================
   Polymathic Group — Design Tokens
   ========================================================= */
:root {
  /* Color */
  --navy-950: #041c2e;
  --navy-900: #052d49;
  --navy-700: #0d4066;
  /* Neutrals lean a few degrees warm so they sit with brass rather than
     against it. Body grey on paper is 6.4:1. */
  --paper: #f6f4ee;
  --paper-dim: #ebe7dd;
  --line: #ddd7ca;
  --line-dark: rgba(255, 255, 255, 0.14);
  --ink: #1d2733;
  --ink-soft: #4f5a63;
  /* Brass and gold, shared with the Parsons sister sites (parsons.ca uses the
     same #c9a55c). Gold signals highlights on navy: eyebrows, stat figures,
     focus rings, nav hovers; 9.2:1 on navy-950. */
  --gold: #dcb96b;
  /* Brass is the action colour on navy: primary and outline buttons and their
     hovers. Gold is kept for highlights, so the two read as related colours
     doing different jobs. Navy text on --action is 7.5:1, on --action-hover
     9.4:1; --action-hover as text on navy-900 is 7.4:1. */
  --action: #c9a55c;
  --action-hover: #d9bb78;
  /* Text-safe brass: small text, icons, bullets and rules on light surfaces.
     5.8:1 on paper, 6.4:1 on white, 5.4:1 on --brass-pale. */
  --brass: #7a5a1e;
  /* One pale brass for every tinted surface: callouts, row hovers, the closing
     band, the yes-flag halo. Icon tiles use --navy-pale instead. Solid, so it
     is the same colour on white cards and on paper. Navy text on it is 12:1. */
  --brass-pale: #f3ecdc;
  /* Pale navy for icon tiles only. A cool tile against the warm paper gives the
     card grids hue contrast without adding a new colour; the icon on it is
     navy-900 at 11.6:1. On hover a card's tile deepens to --sky, one step
     further into the same blue, with the icon still navy-900 at 9.5:1. */
  --navy-pale: #e3e9ef;
  --sky: #c5d5e5;
  /* Auditor's green, for the ledger's "Reconciled" stamp only: auditors tick
     and sign off in green ink. 6.2:1 on the ledger paper (4.5:1 at the
     stamp's 85% opacity; the stamp text is large). */
  --audit-green: #2d6a4f;
  --focus-ring: var(--brass);
  --surface: #fff;
  --text-on-dark: #c7d2d8;
  --text-on-dark-muted: #b9c6cd;
  
  --section-space: 5.25rem;
  --section-space-compact: 3rem;
  --content-gap: 2.5rem;
  --grid-gap: 1.5rem;
  --row-space: 1.5rem;
  --transition-fast: 0.15s ease;

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  /* 12px minimum at the default root size; labels use a consistent 13px.
     Relative units preserve browser text-size preferences and zoom. */
  --text-min: 0.75rem;
  --text-label: 0.8125rem;
  /* Labels are tracked capitals in the body sans, standing in for small caps:
     neither Plex Sans nor Newsreader ships an smcp feature in its latin subset,
     and font-variant: small-caps would synthesise shrunken full caps. Mono is
     kept for figures — the ledger, codes, spec values — not for labels. */
  --label-font: 600 var(--text-label)/1.5 var(--font-body);
  --label-tracking: 0.08em;

  /* All outer containers include the same responsive gutters. */
  --wrap: 1180px;
  --gutter: clamp(1rem, 3vw, 1.5rem);
  /* Nearly square, to carry the monogram's ruled square through buttons,
     cards and panels. Circles (avatars, dots) and the rubber stamp keep their
     own shapes. */
  --radius-sm: 3px;
  --radius-md: 4px;
  --shadow-card: 0 10px 26px rgba(5, 45, 73, 0.07);
}

@media (max-width: 640px) {
  :root {
    --section-space: 3.5rem;
    --section-space-compact: 2rem;
    --content-gap: 2rem;
    --row-space: 1.25rem;
  }
}

/* =========================================================
   Reset & base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
/* Display headings set tight: at the body's 1.55 a two-line serif heading
   reads as double-spaced. Components that need a different value still set
   their own. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--navy-900);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
h3 {
  line-height: 1.3;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
address {
  font-style: normal;
}
img {
  max-width: 100%;
  display: block;
}
/* Rounded caps and joins are the icon set's house style: line ends and corners
   soften rather than cut square. Note this makes zero-length segments (`M8 10h.01`,
   the usual way to draw a dot) actually render — the building and chat-bubble
   icons had three each, deliberately removed, so don't reintroduce that idiom
   expecting it to stay invisible. */
svg {
  width: 22px;
  height: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inline arrow cue, sized to the text it sits beside rather than to the icon
   grid. It is an SVG rather than a → character because U+2192 is in none of
   the self-hosted latin subsets, so the character falls back to a system face
   and shifts weight and baseline between platforms.

   The box is a full 1em square, centred in the line. That puts the shaft on
   the text's x-height centre at any line-height, because the position lives in
   the viewBox geometry rather than in a nudge tuned to one font size. Sizing
   in em keeps it tracking the text; stroke 1.1 in a 16-unit box lands near the
   weight of the character it replaces, not the heavier 22px icon set that the
   rule above governs. Cues that hold one are flex containers, so align-self
   positions it there; vertical-align covers the outside-link arrow below,
   which sits inline in running text. */
.icon-arrow {
  display: inline-block;
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

/* The down cue carries narrower ink, so its viewBox is cropped horizontally
   rather than redrawn at a different scale. Without this the 1em box would
   leave a wider gap beside the label than the right cue does. */
.icon-arrow--down {
  width: 0.5em;
}

/* Outside-link cue: links to other websites open in a new tab and end with a
   diagonal arrow. It sits directly after the last word, with no space, so the
   underline stops at the text; the margin and the viewBox padding give the
   gap instead. Wrap the last word and the arrow in .nowrap so the arrow never
   starts a line on its own. */
.icon-arrow--out {
  margin-left: 0.1em;
}

.wrap,
.prod-shell,
.ap-shell,
.law-shell {
  width: 100%;
  max-width: var(--wrap);
  min-width: 0;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

small,
sub,
sup {
  font-size: max(var(--text-min), 0.8em);
}

/* Available to assistive tech, removed from the visual layout. Use for
   structural headings that the visual design conveys some other way, and for
   link text that would otherwise read as bare context ("opens in new tab"). */
/* Keeps a hyphenated compound ("owner-managed") on one line. A class rather
   than a non-breaking hyphen, which the latin font subsets don't carry, and
   rather than style="", which the CSP blocks. */
.nowrap {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  transform: translateY(-140%);
  background: var(--navy-950);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 100;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--gold);
}

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

/* Focus follows the surface: gold on navy, brass on paper or white.
   Light components reset the inherited colour inside dark sections. */
:where(.site-header, .site-footer, .industries, .prod-section--dark,
       .ap-advantages, .ca-capabilities, .error-page) {
  --focus-ring: var(--gold);
}
:where(.nav__mobile-panel, .solution-card, .callout) {
  --focus-ring: var(--brass);
}

/* Press feedback is shared by buttons and the mobile menu control. */
.btn:active,
.nav__mobile summary:active,
.nav__mobile-cta:active {
  filter: brightness(0.94);
}

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

  /* The rule above kills the transition, not the transform, so the card lift
     would still snap into place. Neutralize the lift itself, anchor-qualified
     to match the rule it cancels. */
  a.solution-card:is(:hover, :focus-visible) {
    transform: none !important;
  }
}

/* =========================================================
   Buttons & small type utilities
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.btn--large {
  padding: 15px 26px;
}
.btn--accent {
  background: var(--action);
  color: var(--navy-950);
}
.btn--accent:is(:hover, :focus-visible) {
  background: var(--action-hover);
}
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn--ghost:is(:hover, :focus-visible) {
  border-color: var(--action-hover);
  color: var(--action-hover);
  background: rgba(255, 255, 255, 0.06);
}
.btn--dark {
  background: var(--navy-950);
  color: #fff;
}
.btn--dark:is(:hover, :focus-visible) {
  background: var(--navy-700);
}
.btn--outline-accent {
  border-color: var(--action-hover);
  color: var(--action-hover);
}
.btn--outline-accent:is(:hover, :focus-visible) {
  background: var(--action);
  border-color: var(--action);
  color: var(--navy-950);
}

.text-link {
  font-weight: 600;
  color: var(--navy-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-fast);
}
/* The underline lives on the label, never on the anchor. text-decoration set
   on an ancestor is drawn across ALL of its inline content and cannot be
   switched off by a descendant, so underlining .text-link itself would strike
   through the arrow as well. Same reason .solution-card underlines its h3. */
.text-link__label {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:is(:hover, :focus-visible) {
  color: var(--brass);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}
.eyebrow--light {
  color: var(--gold) !important;
}
/* The dot takes its label's colour, so it follows the surface: gold on navy
   (.eyebrow--light), brass on paper and white. A fixed gold dot on a light
   surface is too faint against the paper and reads as a stray spot beside
   brass text. .prod-kicker::before uses the same dot. */
.eyebrow--light .eyebrow__dot,
.eyebrow .eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
}

/* =========================================================
   Header / hero
   ========================================================= */
.site-header {
  position: relative;
  background: var(--navy-950);
  color: #fff;
  overflow: hidden;
}

.site-header--compact .header-ring--large {
    right: -120px;
    top: -360px;
}

.site-header--compact .header-ring--small {
    left: 12%;
    bottom: -350px;
}

.page-hero {
    position: relative;
    max-width: 62ch;
    padding: var(--section-space-compact) 0 var(--section-space);
}

.page-hero__title {
    margin-top: 4px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.15;
}

.page-hero__lede {
    max-width: 58ch;
    margin-top: 20px;
    color: #c7d2d8;
    font-size: 1.1rem;
    line-height: 1.65;
}

/* Interior pages open with text only; the ledger card belongs to the
   homepage. At most one action sits under the lede. */
.page-hero__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.header-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.header-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
}
.header-ring--large {
  width: 620px;
  height: 620px;
  right: -180px;
  top: -220px;
  border-color: rgba(220, 185, 107, 0.16);
  border-width: 40px;
}
.header-ring--small {
  width: 420px;
  height: 420px;
  left: 18%;
  bottom: -260px;
}

.header-diagonal {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.04) 51%,
        transparent 51%
    );
}

.topbar {
  position: relative;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.9rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter);
  flex-wrap: wrap;
}
.topbar__tag {
  color: #b9c6cd;
}
.topbar__contact {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
}
.topbar__contact a:is(:hover, :focus-visible) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .topbar__tag {
    display: none;
  }

  .topbar__inner {
    justify-content: flex-end;
  }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
/* Serif monogram and wordmark. The mark is a hairline-ruled square holding a
   display-optical-size P, the way a firm's seal sits on its letterhead; the
   wordmark is Newsreader in spaced capitals over a thin rule and GROUP in the
   tracked label sans. Both only ever sit on navy (header and footer). */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__mark {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  outline: 1px solid rgba(255, 255, 255, 0.18);
  outline-offset: 3px;
  color: #fff;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  /* Newsreader's capitals sit high in the em box. At wght 500 / opsz 72 the
     P's ink spans 0.02em-0.735em from the top of a line-height:1 box, so its
     centre is 0.1225em above the box's. Flex centring splits padding in half,
     so 0.245em of top padding moves the ink down exactly that far. In em, so
     it holds if the font size changes. Horizontally the ink is within 0.006em
     of the advance centre and needs nothing. */
  padding-top: 0.245em;
}
.brand__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brand__name-top {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  letter-spacing: 0.14em;
  font-size: 1.15rem;
  line-height: 1.1;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.brand__name-bottom {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.32em;
  font-size: var(--text-min);
  line-height: 1.2;
  color: var(--text-on-dark);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 28px;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav__links a:not(.btn):is(:hover, :focus-visible) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav__links a[aria-current="page"]:not(.btn) {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: rgba(220, 185, 107, 0.6);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.nav__mobile {
  position: relative;
}
.nav__mobile summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.nav__mobile summary:is(:hover, :focus-visible),
.nav__mobile[open] summary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(220, 185, 107, 0.5);
}
.nav__mobile summary::-webkit-details-marker {
  display: none;
}
.nav__mobile-panel {
  position: absolute;
  right: 0;
  top: 46px;
  width: 240px;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  padding: 10px;
  z-index: 20;
}
.nav__mobile-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.nav__mobile-panel a:not(.nav__mobile-cta):is(:hover, :focus-visible) {
  background: var(--paper-dim);
}
/* The panel is a white surface, so the call to action is navy rather than
   the brass reserved for actions on navy. It takes the heading navy, a step
   lighter than the header it drops down from, so it reads as a button rather
   than a patch of the header. */
.nav__mobile-panel a.nav__mobile-cta {
  background: var(--navy-900);
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
}
.nav__mobile-panel a.nav__mobile-cta:is(:hover, :focus-visible) {
  background: var(--navy-700);
  color: #fff;
}
.nav__mobile-cta {
  margin-top: 6px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--content-gap);
  padding: var(--section-space-compact) 0 var(--section-space);
}
.hero__copy,
.hero__signature {
  min-width: 0;
}

.hero__title {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.12;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 15ch;
}
.hero__lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 1.1rem;
  color: #c7d2d8;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero__stats {
  margin: 48px 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 20px;
  max-width: 520px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}

.hero__stats > div {
  min-width: 0;
  text-align: left;
}

.hero__stats dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
}

.hero__stats dd {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #a9b7bd;
  text-align: left;
}

/* Ledger signature element */
.hero__signature {
  display: flex;
  justify-content: center;
}
.ledger {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 440px;
  background: #fdfcf8;
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  padding: 30px 28px 26px;
}
.ledger__perf {
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 12px;
  background-image: radial-gradient(
    circle,
    var(--navy-950) 3px,
    transparent 3.2px
  );
  background-size: 18px 12px;
  background-repeat: repeat-x;
  background-position: top;
}
.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--navy-950);
  padding-bottom: 14px;
}
.ledger__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.ledger__ref {
  font-family: var(--font-mono);
  font-size: var(--text-min);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.ledger__table {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.ledger__row {
  display: grid;
  grid-template-columns: 0.8fr 2fr 1fr 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.ledger__row--head {
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-min);
  border-bottom: 1px solid var(--ink);
}
.ledger__row span:nth-child(3),
.ledger__row span:nth-child(4) {
  text-align: right;
}

.ledger__balance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--navy-950);
  font-weight: 600;
}
.ledger__balance-figure {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--navy-900);
}

/* Keep the stamp in flow so it cannot obscure the balance at larger sizes.
   It prints like a hand stamp that was never pressed quite flat: the filter
   (#stamp-wear, inline in index.html) roughens the edges and adds a little
   speckle and uneven ink, and the mask rocks the pressure from a full left
   side to a lighter right. Browsers without SVG filters on HTML still
   get the colour and the fade. */
.ledger__stamp {
  display: table;
  margin: 20px 0 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--audit-green);
  border: 3px solid var(--audit-green);
  border-radius: 8px;
  padding: 4px 14px;
  transform: rotate(-8deg);
  opacity: 0.85;
  filter: url(#stamp-wear);
  -webkit-mask-image: linear-gradient(100deg, #000 35%, rgb(0 0 0 / 0.62) 100%);
  mask-image: linear-gradient(100deg, #000 35%, rgb(0 0 0 / 0.62) 100%);
}
/* Holds the filter definition. Collapsed rather than display: none, which
   makes some browsers drop the filter; the base svg rule would otherwise give
   it a 22px box. */
.ledger__filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  .nav__links {
    display: flex;
  }
  .nav__mobile {
    display: none;
  }
}

/* Stacked under the hero copy, the ledger is a supporting illustration rather
   than a second hero: capped in width, tighter rows, a smaller stamp, and one
   line per entry — the detail after each description (.ledger__detail) drops
   out, since two-line rows were most of its height on a phone. Its text is
   already at the 12px minimum there, so the saving has to come from layout. */
@media (max-width: 899px) {
    .ledger {
        max-width: 360px;
        padding: 24px 20px 18px;
    }

    .ledger__detail {
        display: none;
    }

    .ledger__head {
        padding-bottom: 10px;
    }

    .ledger__title {
        font-size: 1.05rem;
    }

    .ledger__row {
        padding: 7px 0;
    }

    .ledger__balance {
        margin-top: 10px;
        padding-top: 10px;
    }

    .ledger__balance-figure {
        font-size: 1rem;
    }

    .ledger__stamp {
        margin-top: 10px;
        font-size: 1.1rem;
        border-width: 2px;
        padding: 2px 10px;
    }
}

@media (max-width: 480px) {
    .ledger {
        padding-inline: 18px;
    }

    .ledger__table {
        font-size: var(--text-min);
    }

    .ledger__row {
        grid-template-columns: 0.72fr 1.65fr 0.9fr 0.9fr;
        gap: 5px;
    }
}

/* =========================================================
   Trust strip
   ========================================================= */
.trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.trust-strip__grid {
  display: grid;
  gap: var(--grid-gap);
  padding: var(--section-space-compact) var(--gutter);
}
.trust-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.trust-item__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-pale);
  border-radius: var(--radius-sm);
  color: var(--navy-900);
}
/* h3 is the correct level: these panels sit under the strip's own heading, so
   they must not outrank the page's real section headings. downloads/manuals.htm
   uses h3; index.html and business.htm still use h2 and want
   the same correction. */
.trust-item h2,
.trust-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
}
.trust-item p {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

@media (min-width: 800px) {
  .trust-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   Section intros
   ========================================================= */
.solutions,
.resources,
.about {
  padding: var(--section-space) 0;
}
/* Two paper sections in a row read as one band (business.htm: the intro and
   demo callout lead into the module cards), so the second drops its top
   padding rather than doubling the gap. */
.solutions + .resources {
  padding-top: 0;
}
.section-intro {
  max-width: 640px;
}
.section-intro h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  margin-top: 6px;
}
.section-intro__lede {
  margin-top: 18px;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.section-intro--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
}

/* =========================================================
   Solution cards
   ========================================================= */
.card-grid {
  margin-top: var(--content-gap);
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
.solution-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
/* Anchor-qualified on purpose: the lift is a click affordance, so it only
   applies where the card actually navigates. eis.htm reuses .solution-card as
   a static <article>, which keeps the skin but correctly gets no hover.
   The heading underline carries the same cue without relying on colour or
   motion; see the reduced-motion block for why the lift needs a second rule. */
a.solution-card:is(:hover, :focus-visible) {
  border-color: var(--brass);
  transform: translateY(-3px);
}
a.solution-card:is(:hover, :focus-visible) h3 {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* The tile deepens to sky blue on hover: the calm pale tile at rest keeps a
   grid of six from tiring the eye, and the one card in play lifts quietly. */
a.solution-card:is(:hover, :focus-visible) .solution-card__icon {
  background: var(--sky);
}

.solution-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-pale);
  border-radius: var(--radius-sm);
  color: var(--navy-900);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.solution-card h3 {
  margin-top: 20px;
  font-size: 1.3rem;
  font-weight: 600;
}
/* :not(.eyebrow) because this selector outranks .eyebrow, and a label at the
   top of a card (polysoft/eis.htm) would otherwise take body-text grey and a
   stray top margin. */
.solution-card p:not(.eyebrow) {
  margin-top: 10px;
  color: var(--ink-soft);
}
.solution-card__link {
  margin-top: 18px;
  display: inline-flex;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.callout {
  margin-top: var(--content-gap);
  background: var(--brass-pale);
  border: 1px solid rgba(169, 132, 52, 0.35);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.callout h3 {
  font-size: 1.15rem;
  font-weight: 600;
}
.callout p {
  margin-top: 4px;
  color: var(--ink-soft);
}
.callout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.callout__actions .btn {
  flex: 0 0 auto;
}
.callout__actions .btn--outline-accent {
  border-color: var(--navy-900);
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.72);
}
.callout__actions .btn--outline-accent:is(:hover, :focus-visible) {
  background: var(--navy-900);
  color: #fff;
}

@media (max-width: 640px) {
  .callout__actions {
    width: 100%;
  }

  .callout__actions .btn {
    flex: 1 1 220px;
  }
}

/* =========================================================
   Q&A specification rows
   Shared by the product pages' "Commonly asked questions" sections. Most
   answers there are a word or two, so these are spec rows: question on the
   left, answer on the right, everything visible at once.

   The page supplies the width container; this component only styles rows.
   ========================================================= */
.qa-list {
  margin-top: var(--content-gap);
  border-top: 1px solid var(--line);
}
.qa-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px 40px;
  align-items: baseline;
  /* Negative inline margin lets the hover tint breathe past the text edge. */
  padding: 20px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
/* Neutral tint - these sections sit on white on some pages
   and on the paper gradient on others. */
.qa-list__row:hover,
.qa-list__row:focus-within {
  background: rgba(5, 45, 73, 0.035);
}
.qa-list dt {
  margin: 0;
  font-weight: 600;
  color: var(--navy-900);
}
.qa-list dd {
  margin: 0;
  color: var(--ink-soft);
}
.qa-list dd ul {
  display: grid;
  gap: 6px;
}
.qa-list dd li {
  position: relative;
  padding-left: 18px;
}
.qa-list dd li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brass);
}

/* Yes/no answers carry a marker so the column can be scanned without
   reading. Brass reads as affirmative, muted grey as negative. */
.qa-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--navy-900);
}
.qa-flag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-pale);
}
.qa-flag--no::before {
  background: rgba(5, 45, 73, 0.3);
  box-shadow: 0 0 0 4px rgba(5, 45, 73, 0.07);
}

@media (max-width: 860px) {
  .qa-list__row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }
}

/* =========================================================
   Product page sections
   The shared skeleton for the polysoft product pages: an overview panel
   beside the basic-product-information table, a dark "key advantages"
   roster, flat feature groups, and the Q&A band.
   ========================================================= */
.prod-sheet {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(246, 244, 238, 0.96) 100%
  );
}

.prod-section {
  padding: var(--section-space) 0;
}

/* Tail sections follow the same rhythm as other full-width bands. */
.prod-section--tail {
  padding-bottom: var(--section-space);
}

.prod-section--white {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.prod-section--dark {
  background: var(--navy-900);
}

.prod-section--dark .section-intro h2 {
  color: #fff;
}

.prod-section--dark .section-intro__lede {
  color: var(--text-on-dark);
}

/* Overview and product facts.
   The copy sits directly on the sheet and the columns are divided by a
   hairline. The facts heading is the mono label used by .prod-index, so the
   table reads as a labelled index. */
.prod-overview__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 2.5rem;
  /* The kicker is inline-flex, so it sits on a line box and inherits the
     parent's leading, while the label opposite it is a block that hugs the
     top — start alignment leaves the label riding high. Baseline alignment
     puts the two on the same line and stays correct at any font size. */
  align-items: baseline;
}

.prod-overview__grid > * + * {
  padding-left: 2.5rem;
  border-left: 1px solid var(--line);
}

.prod-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--brass);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.prod-kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  content: "";
}

.prod-overview h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
}

.prod-lede {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.prod-bullets {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.prod-bullets li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}

.prod-bullets li::before {
  position: absolute;
  top: 0.52rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--brass);
  content: "";
}

/* Scoped to the grid so it outranks the .prod-overview h2 display size. */
.prod-overview__grid .prod-facts-title {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-700);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.prod-facts {
  width: 100%;
  table-layout: fixed;
  overflow-wrap: anywhere;
  border-collapse: collapse;
}

.prod-facts th,
.prod-facts td {
  padding: 0.75rem 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(5, 45, 73, 0.08);
  text-align: left;
}

.prod-facts th {
  width: 32%;
  padding-right: 1rem;
  color: var(--navy-900);
  font-weight: 600;
}

.prod-facts td {
  color: var(--ink-soft);
}

/* Key advantages
   Hairline rows: name, then one line of description. Unnumbered, because
   none of these lists is a sequence. */
.prod-roster {
  margin: var(--content-gap) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line-dark);
}

.prod-roster__row {
  display: grid;
  grid-template-columns: minmax(12rem, 24%) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  /* Negative inline margin keeps the row edge inside .prod-shell's gutter. */
  padding: var(--row-space) 0.75rem;
  margin: 0 -0.75rem;
  border-top: 1px solid var(--line-dark);
}

.prod-roster__name {
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
}

.prod-roster__desc {
  color: var(--text-on-dark);
}

/* On this page — the jump list at the top of a long page.
   Short, parallel names scanned rather than read: a label over a rule, then
   one hairline row per section with a down arrow, because every link moves
   further down the same page. Three columns keep it shallow on a wide screen.
   Used by polysoft/products.htm and polysoft/polymod.htm; it replaces the
   pill buttons the specification sheet used to have, which read as filters
   and were the only fully rounded rectangles on the site. */
.page-index {
  margin-top: var(--content-gap);
}

.page-index__label {
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-700);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.page-index__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
}

.page-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Negative inline margin lets the hover tint breathe past the text edge
     while staying inside the container's gutter. */
  padding: 0.85rem 0.75rem;
  margin: 0 -0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-900);
  font-weight: 600;
  transition: background 0.15s ease;
}

.page-index a:hover,
.page-index a:focus-visible {
  background: var(--brass-pale);
  color: var(--brass);
}

/* On the name, not the anchor: an ancestor's text-decoration is drawn across
   everything inline inside it and a descendant cannot opt out, so underlining
   .page-index a would underline the arrow cue too. */
.page-index a:is(:hover, :focus-visible) .page-index__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-index__cue {
  color: var(--brass);
}

@media (max-width: 900px) {
  .page-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.75rem;
  }
}

@media (max-width: 560px) {
  .page-index__list {
    grid-template-columns: 1fr;
  }
}

/* Features
   Flat groups — a rule above the heading and hairlines between 
   items carry the grouping. */
.prod-feature-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap) var(--content-gap);
  margin-top: var(--content-gap);
}

.prod-feature-group {
  min-width: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--navy-900);
}

.prod-feature-group h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

/* Optional heading icon.
   Same recipe as .solution-card__icon — pale navy behind a navy stroke — but at
   30px, not 48px. The big tile is card vocabulary; at full size it outweighs a
   flat group's hairline rule and re-boxes the section. Keeping the stroke navy 
   also avoids a second brass against the brass bullet dots below it.
   Icons are decorative: the h3 text carries the meaning. */
.prod-feature-group__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--navy-pale);
  color: var(--navy-900);
}

.prod-feature-group__icon svg {
  width: 16px;
  height: 16px;
}

.prod-feature-group > p {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
}

.prod-feature-group ul {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.prod-feature-group p + ul {
  margin-top: 0.9rem;
}

.prod-feature-group li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.prod-feature-group li:first-child {
  border-top: 0;
}

.prod-feature-group li::before {
  position: absolute;
  top: 1.37rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--brass);
  content: "";
}

/* Three-column variant.
   For three peer groups of short lists, which would otherwise strand the
   third group on a row of its own. The groups stay flat — the same rule,
   dots and hairlines as the default — so a services list reads like the
   product features rather than a deck of cards. The stacking rule below
   still applies. */
.prod-feature-groups--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Catalogue index
   Report and output names are short, parallel, and scanned rather than read,
   so they get hairline rows under a mono label — no group rule and no bullet
   dots, which are the .prod-feature-group signature. */
.prod-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap) var(--content-gap);
  margin-top: var(--content-gap);
}

.prod-index__group {
  min-width: 0;}

.prod-index__group h3 {
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-700);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.prod-index__group ul {
  margin: 0;
  padding: 0;
  list-style: none;}

.prod-index__group li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

/* Three-column variant.
   Three catalogues in the two-column grid strand the third on row two, which
   loads the left column with two lists against the right column's one — and
   reordering only trades that for a gap mid-column, since row one's height is
   set by the longest list. Report names are short by definition here, so they
   hold the narrower measure. The stacking rule below still applies. */
.prod-index--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2.5rem;
}

.prod-callout p {
  max-width: 78ch;
}

@media (max-width: 1020px) {
  .prod-feature-groups,
  .prod-index {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Rows stack under the index rather than reflowing into narrower columns,
   which would squeeze the text to a few words per line. */
@media (max-width: 860px) {
  .prod-overview__grid {
    grid-template-columns: 1fr;
  }

  /* Stacked, the dividing rule belongs above the second column, not beside it. */
  .prod-overview__grid > * + * {
    padding-top: 2.5rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .prod-roster__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .prod-facts th {
    width: 38%;
  }
}

/* =========================================================
   Industries
   ========================================================= */
.industries {
  background: var(--navy-950); /*v1*/
  background: rgb(5, 45, 73); /*v2*/
  color: #fff;
  padding: var(--section-space) 0;
}
.industries__grid {
  display: grid;
  gap: var(--content-gap);
}
.industries__intro p:not(.eyebrow) {
  margin-top: 18px;
  font-size: 1.08rem;
  color: #c7d2d8;
  max-width: 44ch;
}
.industries__intro .btn {
  margin-top: var(--content-gap);
}

.industry-list {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
.industry-card {
  position: relative;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 24px 24px 24px 30px;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
a.industry-card:is(:hover, :focus-visible) {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
}
a.industry-card:is(:hover, :focus-visible) h3 {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.industry-card__tab {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--gold);
}
.industries h2 {
  color: #fff;
}
.industry-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}
.industry-card p {
  margin-top: 8px;
  font-size: 0.92rem;
  color: #b9c6cd;
}

@media (min-width: 720px) {
  .industry-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .industries__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* =========================================================
   Resources
   Rows - read as fields of a record instead of competing headings.
   ========================================================= */
.resource-directory {
  margin-top: var(--content-gap);
  border-bottom: 1px solid var(--line);
}

.resource-row {
  display: grid;
  grid-template-columns: minmax(8rem, 13%) minmax(11rem, 22%) 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  /* Negative inline margin lets the hover tint breathe past the text edge
     while staying inside .wrap's 24px gutter. */
  padding: var(--row-space) 0.75rem;
  margin: 0 -0.75rem;
  border-top: 1px solid var(--line);
  transition: background 0.15s ease;
}

.resource-row:hover,
.resource-row:focus-visible {
  background: var(--brass-pale);
}

.resource-row__kind {
  color: var(--navy-700);
  font: var(--label-font);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.resource-row__name {
  margin: 0;
  color: var(--navy-900);
  font-size: 1.08rem;
  font-weight: 600;
}

.resource-row:hover .resource-row__name,
.resource-row:focus-visible .resource-row__name {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.resource-row__desc {
  color: var(--ink-soft);
}

.resource-row__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--navy-900);
  font-weight: 600;
  white-space: nowrap;
}

.resource-row__cue .icon-arrow {
  color: var(--brass);
}

/* Rows stack rather than reflowing into narrower columns, which would
   squeeze the description to three or four words a line. */
@media (max-width: 860px) {
  .resource-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: start;
  }

  .resource-row__cue {
    margin-top: 0.35rem;
  }
}

/* =========================================================
   About & CTA band
   ========================================================= */
.about {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about__grid {
  display: grid;
  gap: var(--content-gap);
}
.about__copy p {
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.about__copy p + p {
  margin-top: 18px;
}
.about__copy .text-link {
  margin-top: 26px;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A quiet closing invitation rather than a second hero.
   The navy action remains the strongest element on this pale brass surface. */
.cta-band {
  background: var(--brass-pale);
  border-top: 1px solid rgba(122, 90, 30, 0.18);
}
.cta-band__inner {
  padding: var(--section-space-compact) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 6px;
}
.cta-band p {
  margin-top: 6px;
  color: var(--ink-soft);
}
.cta-band .eyebrow {
  color: var(--brass);
}
/* The jobs page puts a contact block in this band. It reads at body size
   here, unlike the footer's — .cta-band p already spaces the lines inside. */
.cta-band address {
  margin-top: 18px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--navy-950);
  color: #b9c6cd;
}
.footer__grid {
  display: grid;
  gap: var(--content-gap);
  padding: var(--section-space-compact) var(--gutter);
}
.footer__brand p {
  margin-top: 20px;
  max-width: 42ch;
  color: #93a3aa;
}
.site-footer h2 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
}
.site-footer ul {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  font-size: 0.92rem;
}
.site-footer a:not(.brand):is(:hover, :focus-visible) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Scoped to the footer — these are the footer contact block's styles, not a
   base treatment for <address>. Unscoped, they also hit the address in the
   jobs page CTA band, shrinking it below the copy it sits beside. The only
   genuine normalization, `font-style: normal`, stays in the reset above. */
.site-footer address {
  margin-top: 16px;
  font-size: 0.92rem;
  display: grid;
  gap: 12px;
}
.site-footer address p + p {
  margin-top: 12px;
}

.footer__legal {
  border-top: 1px solid var(--line-dark);
}
.footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 1.5rem var(--gutter);
  font-size: 0.85rem;
  color: #7c8b92;
}
/* The privacy link sits after the copyright line on every page. */
.footer__legal a {
  margin-left: 0.4em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__legal a:is(:hover, :focus-visible),
.footer__legal a[aria-current="page"] {
  color: #fff;
}

/* Long-form text: the privacy and accessibility page. A readable measure,
   headings spaced from the text above, and links underlined in brass like
   .text-link__label, since running text has no other link cue. */
.legal-copy {
  max-width: 46rem;
}
.legal-copy h2 {
  margin-top: 2.25rem;
  font-size: 1.45rem;
}
.legal-copy > p:not(.prod-lede) {
  margin-top: 0.9rem;
  color: var(--ink-soft);
}
.legal-copy .prod-bullets {
  margin-top: 0.9rem;
}
.legal-copy a {
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 4px;
}
.legal-copy a:is(:hover, :focus-visible) {
  color: var(--brass);
}
.legal-copy__updated {
  font-size: 0.9rem;
}

@media (min-width: 780px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* =========================================================
   404 page
   ---------------------------------------------------------
   404.html is served by Static Web Apps for any unresolved path (see the
   responseOverrides block in staticwebapp.config.json), so its styling has to
   live here rather than in a page-specific stylesheet or a <style> block —
   the site's CSP has no 'unsafe-inline' on style-src.

   It reuses the dark navy treatment from the header rather than the paper
   body background, so a wrong URL is visibly a different kind of page.
   ========================================================= */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy-950);
  color: var(--text-on-dark);
  padding: var(--section-space) 0;
}
.error-page__inner {
  max-width: 720px;
}
.error-page__brand {
  display: inline-flex;
  margin-bottom: 56px;
}
.error-page__rule {
  width: 64px;
  height: 4px;
  background: var(--gold);
  margin-bottom: 28px;
}
.error-page h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.12;
  margin-top: 4px;
}
.error-page__lede {
  margin-top: 20px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}
.error-page__actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.error-page__help {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-on-dark-muted);
}
.error-page__help a {
  color: var(--gold);
  font-weight: 600;
}
.error-page__help a:is(:hover, :focus-visible) {
  color: #fff;
}