/* Mathenson Master Theme — the single source of visual truth. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* Spacing scale. Vertical rhythm is set by information density, not one padding value:
     dense pages (long capability lists) breathe internally and stay shorter overall,
     sparse pages stop looking stretched. */
  --space-section: clamp(72px, 7vw, 96px);
  --space-section-compact: clamp(52px, 5vw, 72px);
  --space-section-dense: clamp(40px, 3.6vw, 56px);
  --space-hero-gap: clamp(40px, 4vw, 56px);
  --space-section-break: clamp(56px, 5.5vw, 80px);
  --space-heading-copy: 14px;
  --space-copy-list: 18px;
  --space-copy-media: 32px;
  --mathenson-charcoal: #2f2e2d;
  --mathenson-red: #c02e36;
  --mathenson-red-dark: #981f29;
  --mathenson-red-wash: #f8e8e9;
  --rose-pale: #ef9ba0;
  --paper: #f6f3ef;
  --paper-deep: #ebe6df;
  --ink: #242322;
  --muted: #66615d;
  --line: #d8d1c9;
  --white: #ffffff;
  --display: 'Inter', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
  --page: min(1200px, calc(100% - 40px));
  --radius-sm: 3px;
  --radius-md: 3px;
  --shadow: 0 0 0 1px var(--line);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--display); }
h1, h2, h3 { font-weight: 300; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.shell { width: var(--page); margin-inline: auto; }
.eyebrow { margin: 0 0 12px; color: var(--mathenson-red); font: 700 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: "// "; color: currentColor; opacity: .55; }
.display-xl { max-width: 820px; margin: 0; font-weight: 300; font-size: clamp(2.55rem, 7vw, 5.7rem); letter-spacing: -.02em; line-height: 1.02; }
.display-lg { margin: 0; font-weight: 300; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.025em; line-height: 1.05; }
.lede { max-width: 70%; color: var(--muted); font-size: clamp(0.95rem, 1.5vw, 1.1rem); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid var(--mathenson-red); border-radius: var(--radius-sm); background: var(--mathenson-red); color: var(--white); font-size: 14px; font-weight: 800; transition: background .2s ease, transform .2s ease; }
.button:hover { background: var(--mathenson-red-dark); transform: translateY(-1px); }
.button--ghost { background: transparent; color: var(--mathenson-charcoal); border-color: var(--line); }
.button--ghost:hover { background: var(--white); color: var(--mathenson-charcoal); }
.hero--photo .button--ghost { background: rgba(246,243,239,.92); border-color: rgba(36,35,34,.28); backdrop-filter: blur(2px); }
.hero--photo .button--ghost:hover { background: var(--white); }
.section--ink--photo .button--ghost { background: rgba(47,46,45,.7); border-color: rgba(255,255,255,.5); }
.section--ink--photo .button--ghost:hover { background: rgba(47,46,45,.9); }
.site-header { border-bottom: 1px solid var(--line); border-top: 3px solid var(--mathenson-red); background: rgba(246,243,239,.94); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 40; transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 18px -8px rgba(36,35,34,.18); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 24px; }
.brand { display: inline-flex; width: 145px; font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: var(--mathenson-charcoal); }
.brand img { width: 100%; height: auto; display: block; }
.nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nav a { position: relative; display: inline-block; padding: 4px 0; transition: color .15s ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--mathenson-red); transition: right .18s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--mathenson-red); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }
/* A section the current page sits under is marked visually, but never as the
   current page itself — aria-current stays on the exact link only. */
.nav-item.is-section > a { color: var(--mathenson-red); }
.nav-item.is-section > a::after { right: 0; opacity: .45; }
.nav-item__toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; background: none; color: inherit;
  border-radius: var(--radius-sm); cursor: pointer; }
.nav-item__toggle svg { transition: transform .18s ease; }
.nav-item.is-open .nav-item__toggle svg { transform: rotate(180deg); }
.nav-item__toggle:hover { color: var(--mathenson-red); }
.nav-dropdown { display: none; }

@media (min-width: 761px) {
  /* Hover and focus-within are the no-JS fallback; .is-open is what the script drives. */
  .nav-item--dropdown:hover .nav-dropdown,
  .nav-item--dropdown:focus-within .nav-dropdown,
  .nav-item--dropdown.is-open .nav-dropdown {
    display: grid; gap: 2px;
    position: absolute; top: 100%; left: 0; padding: 6px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 14px 28px -14px rgba(36,35,34,.24); min-width: 190px; width: max-content; max-width: 320px; z-index: 50;
  }
  /* Services carries nine links; two columns keep it off the fold on short screens. */
  .nav-item--dropdown:hover .nav-dropdown--wide,
  .nav-item--dropdown:focus-within .nav-dropdown--wide,
  .nav-item--dropdown.is-open .nav-dropdown--wide { grid-template-columns: 1fr 1fr; max-width: 520px; }
  .nav-item:nth-last-child(-n+2) .nav-dropdown { left: auto; right: 0; }
  /* The trigger owns the 12px gap, so the pointer never crosses dead space. */
  .nav-item--dropdown { padding-bottom: 12px; margin-bottom: -12px; }
  .nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-dropdown a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-transform: none; font-weight: 600; letter-spacing: 0; font-size: 13px; }
  .nav-dropdown a::after { display: none; }
  .nav-dropdown a:hover { background: var(--paper); color: var(--mathenson-red); }
  .nav-dropdown a[aria-current="page"] { color: var(--mathenson-red); background: var(--mathenson-red-wash); }
  .nav-dropdown__heading { margin: 8px 10px 2px; font: 700 10px/1.2 var(--mono); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
  .nav-dropdown__heading:first-child { margin-top: 4px; }
}
.nav-toggle { display: none; }
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 0; min-height: clamp(320px, 34vw, 430px); display: flex; align-items: center; background: radial-gradient(circle at 90% 10%, #f0d3d5 0, transparent 30%), var(--paper); overflow: hidden; }
.hero h1 {
  font-weight: 300;
  /* Even line lengths, so the headline never ends on a single orphaned word. */
  text-wrap: balance;
  max-width: 960px;
  font-size: clamp(58px, 5.5vw, 76px);
  line-height: .98;
  letter-spacing: -.035em;
}
.hero--photo {
  background-image:
    linear-gradient(90deg,
      rgba(246,243,239,.98) 0%,
      rgba(246,243,239,.92) 42%,
      rgba(246,243,239,.64) 68%,
      rgba(246,243,239,.24) 100%),
    var(--hero-bg, url('../img/uploads/archive-shelves-hero.webp'));
  background-repeat: no-repeat;
  background-position: 0 0, center 38%;
  background-size: auto, cover;
}
.hero::before {
  content: "";
  position: absolute; inset: -10% -10%; z-index: 0;
  background-image: radial-gradient(rgba(192,46,54,.34) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mask-image: radial-gradient(ellipse 62% 85% at 80% 30%, #000 40%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse 62% 85% at 80% 30%, #000 40%, transparent 86%);
}
.hero::after {
  content: "";
  position: absolute; left: -20%; right: -20%; height: 220px; z-index: 0; top: -220px;
  background: linear-gradient(180deg, transparent, rgba(192,46,54,.12) 45%, rgba(192,46,54,.20) 50%, rgba(192,46,54,.12) 55%, transparent);
  animation: slow-scan 32s ease-in-out infinite;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@keyframes slow-scan { 0% { top: -220px; } 50% { top: 100%; } 100% { top: -220px; } }
.hero .shell, .hero .hero__grid { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 2fr 3fr; align-items: end; gap: 48px; }
.hero__grid--2-1 { grid-template-columns: 2fr 1fr; }
.hero__copy { max-width: none; }
.hero__copy--70 { width: 70%; max-width: 70%; }
.hero__copy--70 .lede { max-width: none; font-size: clamp(1.05rem, 2vw, 1.28rem); }

/* Three hero sizes. Large carries the homepage and the top hubs; medium the strategic
   landing pages; compact every detail, utility and legal page — so a long service title
   never produces a taller hero than the homepage. */
.hero--md { padding: clamp(44px, 6vw, 76px) 0 0; min-height: clamp(260px, 26vw, 340px); }
.hero--md h1 { font-size: clamp(42px, 4.2vw, 58px); max-width: 860px; }
.hero--sm { padding: clamp(36px, 4.6vw, 60px) 0 0; min-height: clamp(200px, 20vw, 268px); }
.hero--sm h1 { font-size: clamp(34px, 3.2vw, 46px); max-width: 780px; line-height: 1.04; }
.hero--sm .lede, .hero--md .lede { max-width: 660px; }
@media (max-width: 760px) { .hero__copy--70 { width: 100%; max-width: 100%; } }
.hero__mark { position: relative; min-height: 320px; overflow: hidden; border-radius: var(--radius-md); background: var(--mathenson-charcoal); box-shadow: var(--shadow); }
.hero__mark::before, .hero__mark::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid #6a6664; pointer-events: none; }
.hero__mark::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hero__mark::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.hero__image { width: 100%; height: 320px; object-fit: cover; object-position: 68% center; }
.hero__credit { position: absolute; right: 8px; bottom: 6px; padding: 3px 7px; border-radius: var(--radius-sm); background: rgba(0,0,0,.45); color: rgba(255,255,255,.88); font: 500 12px var(--mono); letter-spacing: .02em; }
.hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.section { padding-block: var(--space-section); border-top: 1px solid var(--line); }
/* Compact rhythm for a section that continues the one above it rather than starting a new idea.
   --tight is kept as an alias so existing templates pick up the same value. */
.section--compact, .section--tight { padding-block: var(--space-section-compact); }
/* Dense: a section whose own content carries the rhythm (long lists, card grids). */
.section--dense { padding-block: var(--space-section-dense); }
/* The first band after a hero sits closer to it than two independent sections do. */
.section--after-hero { padding-top: var(--space-hero-gap); }
/* Consecutive bands of the same ground read as one region, so drop the rule between them. */
.section--white + .section--white,
.section--white + .section--tight.section--white { border-top-color: transparent; }
/* Entering and leaving a dark band is the one transition that deserves a real break. */
.section--ink { margin-block: 0; }
.section--ink + .section { padding-top: var(--space-section-break); }
.section--roomy { padding: clamp(70px, 11vw, 140px) 0; }
.section--ink { position: relative; background: var(--mathenson-charcoal); color: var(--white); border-top-color: #4a4745; overflow: hidden; }
.section--ink::before {
  content: "";
  position: absolute; inset: -10% -10%; z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.18) 0.5px, transparent 0.5px),
    radial-gradient(circle at 82% 12%, rgba(192,46,54,.35), transparent 40%);
  background-size: 3px 3px, auto;
}
.section--ink > .shell { position: relative; z-index: 1; }
.section--ink--photo {
  background-image:
    linear-gradient(100deg, rgba(47,46,45,.94) 0%, rgba(47,46,45,.9) 45%, rgba(47,46,45,.62) 75%, rgba(47,46,45,.4) 100%),
    url('../img/uploads/server-rack.webp');
  background-repeat: no-repeat;
  background-position: 0 0, center 40%;
  background-size: auto, cover;
}
.section--ink--photo .hero__credit { position: absolute; right: 8px; bottom: 6px; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }
.section--white { background: var(--white); }
.stat-unit { display: inline-block; margin-left: .18em; font-size: .42em; font-weight: 700; letter-spacing: 0; vertical-align: baseline; }
.card-grid { --grid-gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); margin-top: 34px; }
.card { flex: 0 0 auto; width: calc((100% - (var(--cols, 4) - 1) * var(--grid-gap, 22px)) / var(--cols, 4)); box-sizing: border-box; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.card:hover { box-shadow: 0 14px 28px -16px rgba(36,35,34,.22); transform: translateY(-2px); border-color: #c7bfb5; }
.card--static, .card--static:hover { cursor: default; box-shadow: none; transform: none; border-color: var(--line); }
.card h3 { margin: 0 0 8px; font-weight: 300; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.card--numbered { justify-content: flex-start; }
.card__number { font: 800 64px/1 var(--mono, inherit); color: #f0d3d5; margin: 0 0 -14px; letter-spacing: -.02em; transition: color .15s ease; }
.card--numbered:hover .card__number { color: #e8bcc0; }
.card__icon { display: inline-flex; width: 48px; height: 48px; color: var(--mathenson-red); margin: 0 0 16px; transition: color .15s ease; }
.card__icon svg { width: 100%; height: 100%; }
.card--numbered:hover .card__icon { color: var(--mathenson-red-dark); }
.card__image { width: 100%; height: 96px; object-fit: contain; object-position: left bottom; margin-bottom: 16px; }
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 32px; background: #534f4d; border: 1px solid #534f4d; }
.process__step { min-height: 210px; padding: 24px; background: var(--mathenson-charcoal); }
.process__step span { display: block; color: #ef9ba0; font: 500 12px var(--mono); }
.process__step h3 { margin: 50px 0 8px; font-weight: 300; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.process__step p { margin: 0; color: #d6cfca; font-size: 14px; }
.process__step .card__icon { color: var(--mathenson-red); width: 32px; height: 32px; margin: 0 0 14px; }
.process__step--light h3 { color: var(--ink); }
.process__step--light p { color: var(--muted); }
.process__step--light .card__icon { color: var(--mathenson-red); }
.quote-panel { display: grid; grid-template-columns: 1.2fr auto; gap: 28px; align-items: center; padding: 34px; border-radius: var(--radius-md); background: var(--mathenson-red); color: var(--white); }
.quote-panel h2 { max-width: 620px; margin: 0; font-weight: 300; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em; }
.quote-panel--inline { margin-top: 36px; }
.quote-panel .button { border-color: var(--white); background: var(--white); color: var(--mathenson-red-dark); }
.site-footer { padding: 56px 0 0; background: #1f1e1d; color: #d9d2cb; font-size: 13px; border-top: 3px solid var(--mathenson-red); }
.site-footer .brand { color: #d9d2cb; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.site-footer__brand p { margin: 12px 0 0; max-width: 340px; color: #a39c93; line-height: 1.6; }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.site-footer__contact a { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 8px; color: #d9d2cb; transition: color .15s ease; }
.site-footer__contact a:hover { color: var(--white); }
.site-footer__icon { display: inline-flex; width: 15px; height: 15px; color: #ef9ba0; }
.site-footer__icon svg { width: 100%; height: 100%; }
.site-footer__heading { margin: 0 0 14px; color: #7a746e; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer nav a:hover { color: var(--white); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid #3a3735; color: #8a847e; font-size: 12px; }
.site-footer__bottom p { margin: 0; }
.form-shell { max-width: 760px; margin: 0 auto; padding: 28px; border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow); }
.field { display: grid; gap: 7px; margin: 17px 0; }
.field label { font-size: 13px; font-weight: 800; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--white); color: var(--ink); font: inherit; }
.field textarea { min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid #efbec2; border-color: var(--mathenson-red); }
/* The hidden attribute must win over any display rule a component sets
   (.field is display:grid, which silently defeats hidden on its own). */
[hidden] { display: none !important; }

/* Primary-category radio cards: whole label clickable, 44px minimum target. */
.radio-cards { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.radio-cards legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--ink); }
.radio-card { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.radio-card:hover { border-color: #c7bfb5; background: var(--paper); }
.radio-card input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--mathenson-red); }
.radio-card:has(input:checked) { border-color: var(--mathenson-red); background: var(--mathenson-red-wash); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--mathenson-red); outline-offset: 3px; }

/* Conditional sub-option groups. */
.subgroup legend { font-size: 13px; font-weight: 800; }
.field__req { font-weight: 600; color: var(--muted); font-size: 12px; }
.field__opt { font-weight: 500; color: var(--muted); font-size: 12px; }
.field__error { margin: 0; font-size: 13px; font-weight: 700; color: var(--mathenson-red-dark); }
[aria-invalid="true"] { border-color: var(--mathenson-red); }

/* Error summary, focused after an unsuccessful submission. */
.form-errorsummary { padding: 16px 18px; margin-bottom: 18px; border: 2px solid var(--mathenson-red);
  border-radius: var(--radius-sm); background: var(--mathenson-red-wash); }
.form-errorsummary__title { margin: 0 0 8px; font-weight: 800; color: var(--mathenson-red-dark); }
.form-errorsummary ul { margin: 0; padding-left: 18px; }
.form-errorsummary a { color: var(--mathenson-red-dark); text-decoration: underline; font-weight: 700; }

.checkbox-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0; background: var(--white); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.checkbox-group legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.checkbox-group .field--checkbox { min-height: 44px; align-items: center; }
.checkbox-group .field--checkbox label { font-size: 14px; line-height: 1.35; }
@media (max-width: 760px) { .checkbox-group { grid-template-columns: 1fr; } }
.field--checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-height: 44px; }
.field--checkbox input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin-top: 12px; accent-color: var(--mathenson-red); }
.field--checkbox label { font-weight: 500; }
.form-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.form-success, .form-error { padding: 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 700; }
.form-success { background: #e6f4ea; color: #1e6b34; }
.form-error { background: var(--mathenson-red-wash); color: var(--mathenson-red-dark); }
.pending-note { display: inline-block; margin-top: 10px; padding: 6px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.breadcrumb { margin: 0 0 18px; color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.breadcrumb a:hover { color: var(--mathenson-red); }
.breadcrumb-nav { border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumb-nav ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 0; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.breadcrumb-nav li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb-nav a { color: var(--muted); }
.breadcrumb-nav a:hover { color: var(--mathenson-red); }
.breadcrumb-nav [aria-current="page"] { color: var(--ink); }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); }
.logo-grid__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 18px 20px; background: var(--white); filter: grayscale(1) contrast(0.9) opacity(.72); transition: filter .2s ease; }
.logo-grid__item:hover { filter: none; }
.logo-grid__item--dark { background: var(--mathenson-charcoal); filter: none; }
.logo-grid__item img { width: 150px; height: 76px; object-fit: contain; }
/* Proof cards — one engagement at a time, manual controls, no motion. */
/* Testimonial panel. A substantial centred editorial block: the component is capped at
   960px and centred in the 1200px container, while the copy itself is held to a comfortable
   72–78 characters (measured in px — Inter's `ch` unit overshoots) so the text never
   runs the full width. Manual navigation only, one card at a time. */
.proof-carousel { margin-top: 30px; width: min(100%, 960px); margin-inline: auto; }
.proof-card { box-sizing: border-box; padding: 32px 36px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 12px; min-height: 210px; }
.proof-card__label { margin: 0; color: var(--mathenson-red); font: 700 12px/1.2 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; }
.proof-card__summary { margin: 0; max-width: 715px; color: var(--ink); font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.proof-card__org { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.proof-card__details { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.proof-card__details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mathenson-red);
  min-height: 24px; display: inline-flex; align-items: center; }
.proof-card__details blockquote { margin: 12px 0 0; max-width: 550px; padding-left: 14px; border-left: 2px solid var(--line);
  color: var(--muted); font-size: 14px; line-height: 1.7; }
.proof-card__details blockquote p { margin: 0; }
.proof-card__details blockquote footer { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.proof-carousel__controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.proof-carousel__controls .proof-carousel__status { margin-inline: auto; }
.proof-carousel__btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  font: 700 13px/1 var(--body, inherit); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.proof-carousel__btn:hover { border-color: var(--mathenson-red); color: var(--mathenson-red); }
.proof-carousel__status { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
@media (max-width: 760px) {
  .proof-carousel { width: 100%; }
  .proof-card { min-height: 0; padding: 22px; }
  .proof-carousel__btn { flex: 1 1 auto; }
  /* The disclosure is a control too — give it a full tap target. */
  .proof-card__details summary { min-height: 44px; }
}
.logo-marquee { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.logo-marquee__track { display: flex; width: max-content; gap: 1px; animation: logo-marquee 48s linear infinite; }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee__track { animation: none; } }
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 16px; min-height: 44px; display: flex; align-items: center; }
.faq-item p { margin: 12px 0 0; color: var(--muted); }
.legal-layout { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
.legal-nav { position: sticky; top: 32px; }
.legal-nav__title { margin: 0 0 14px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.legal-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--line); }
.legal-nav li { padding-left: 14px; }
.legal-nav a { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.legal-nav a:hover { color: var(--mathenson-red); }
.legal-content h2 { scroll-margin-top: 110px; }
/* Detail-page intro: copy left, section image right on desktop; stacked below, copy first. */
/* Section media. Three treatments, chosen per page by how much copy sits beside the image:
   standard (4:3), wide (3:2, short copy) and tall (1:1, long capability lists). Ratios stay
   near the 4:3 source so scanners, documents and archival material survive the crop.
   Flat images, no frame — the photograph is part of the composition, not a boxed inset. */
.detail-intro { display: grid; gap: 32px; align-items: start; }
.detail-intro__media { display: block; margin: 0; }
.detail-intro__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center;
  border-radius: 0; border: 0; background: var(--paper-deep);
}
.detail-intro--wide .detail-intro__media img { aspect-ratio: 3 / 2; }
.detail-intro--tall .detail-intro__media img { aspect-ratio: 1 / 1; }
.section--ink .detail-intro__media img { background: rgba(255,255,255,.08); }

/* No section image: one column, capped to a readable measure. Without this the grid
   keeps its two-column template and leaves the right-hand column empty. */
.detail-intro--single { grid-template-columns: 1fr !important; }
.detail-intro--single .detail-intro__copy > * { max-width: 720px; }
/* Role cards size to their own content — a one-line role should not stretch to match
   a long partner paragraph and leave a void underneath. */
.role-split { align-items: start; }
/* The delivery boundary is the procurement-critical sentence on these pages, so it reads
   as a statement rather than a footnote. */
.delivery-boundary { margin: 16px 0 0; padding-left: 14px;
  border-left: 2px solid var(--mathenson-red); color: var(--muted); font-size: 13.5px; line-height: 1.65; }
@media (min-width: 1024px) {
  /* Column ratio follows the treatment: copy keeps the larger share wherever the list is long. */
  .detail-intro { grid-template-columns: 55fr 45fr; gap: 44px; align-items: center; }
  .detail-intro--tall { grid-template-columns: 62fr 38fr; gap: 48px; align-items: start; }
  .detail-intro__copy > * { max-width: 640px; }
  /* Image before copy in source order would break the reading order, so the swap is visual only.
     The column template flips with it, otherwise the copy inherits the image's narrow share. */
  .detail-intro--media-left { grid-template-columns: 45fr 55fr; }
  .detail-intro--tall.detail-intro--media-left { grid-template-columns: 38fr 62fr; }
  .detail-intro--media-left .detail-intro__media { grid-column: 1; grid-row: 1; }
  .detail-intro--media-left .detail-intro__copy { grid-column: 2; grid-row: 1; }
}
/* Wide sits beside short copy, so it needs more room before the text column gets cramped. */
@media (min-width: 1140px) {
  /* Wide sits beside short copy, so the media matches the copy's height rather than
     setting its own — a short section never grows a tall picture. */
  .detail-intro--wide { grid-template-columns: 53fr 47fr; gap: 48px; align-items: stretch; }
  .detail-intro--wide.detail-intro--media-left { grid-template-columns: 47fr 53fr; }
  .detail-intro--wide .detail-intro__media { height: 100%; }
  .detail-intro--wide .detail-intro__media img { height: 100%; min-height: 240px; aspect-ratio: auto; }
}
@media (max-width: 1139px) {
  .detail-intro--wide { grid-template-columns: 1fr; }
  /* Explicit column placement would otherwise invent a second track once the grid collapses. */
  .detail-intro--wide .detail-intro__media,
  .detail-intro--wide .detail-intro__copy { grid-column: auto; grid-row: auto; }
  /* Stacked wide media stays a band, not a panel. */
  .detail-intro--wide .detail-intro__media img { aspect-ratio: 21 / 9; }
}
@media (max-width: 1023px) {
  .detail-intro { gap: 28px; grid-template-columns: 1fr; }
  .detail-intro__media, .detail-intro__copy { grid-column: auto; grid-row: auto; }
  /* Copy first, image second, at every stacked width. */
  .detail-intro__copy { order: 1; }
  .detail-intro__media { order: 2; }
  .detail-intro--tall .detail-intro__media img { aspect-ratio: 4 / 3; }
}

.feature-columns { columns: 17rem; column-gap: 40px; max-width: 900px; margin: 0; padding-left: 20px; color: var(--muted); line-height: 2; }
.feature-columns li { break-inside: avoid; }
.pull-quote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--mathenson-red); font: 600 21px/1.5 var(--display); color: var(--ink); }
@media (min-width: 761px) and (max-width: 1024px) {
  .card { width: calc((100% - (min(var(--cols, 4), 2) - 1) * var(--grid-gap, 22px)) / min(var(--cols, 4), 2)); }
  .brand { width: 112px; }
  .nav { gap: 14px; font-size: 11px; }
  .nav a { white-space: nowrap; }
  .site-header__row { gap: 10px; }
  .site-header__row .button { padding: 10px 14px; min-height: 42px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 760px) {
  :root { --page: min(100% - 32px, 1200px); }
  .site-header__row { gap: 10px; }
  .site-header__row .button { padding: 10px 12px; font-size: 12px; min-height: 44px; white-space: nowrap; }
  .section { padding-block: 56px; }
  .section--compact, .section--tight { padding-block: 40px; }
  .card-grid { --grid-gap: 16px; margin-top: 26px; }
  .display-lg { text-wrap: balance; }
  /* Inner-page titles get their own step: the hero scale is tuned for the homepage headline. */
  .hero h1.display-lg { font-size: clamp(24px, 7.6vw, 34px); }
  .hero--sm h1, .hero--sm h1.display-lg { font-size: clamp(23px, 6.6vw, 30px); }
  .hero--md h1, .hero--md h1.display-lg { font-size: clamp(24px, 7.2vw, 32px); }
  .hero h1 { max-width: 100%; font-size: clamp(26px, 8.2vw, 50px); line-height: 1.03; letter-spacing: -.03em; text-wrap: balance; }
  .hero--photo { background-image:
    linear-gradient(180deg, rgba(246,243,239,.98) 0%, rgba(246,243,239,.94) 62%, rgba(246,243,239,.76) 100%),
    var(--hero-bg, url('../img/uploads/archive-shelves-hero.webp'));
    background-position: 0 0, center 38%; background-size: auto, cover; }
  .lede { max-width: 100%; }
  .nav { display: none; }
  .nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); padding: 18px 20px 24px; border-bottom: 1px solid var(--line); z-index: 31; }
  .nav.is-open .nav-item { width: 100%; }
  .nav-item { flex-wrap: wrap; justify-content: space-between; width: 100%; }
  .nav-item > a { flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; }
  .nav-item__toggle { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); }
  .nav-item--dropdown .nav-dropdown { display: none; }
  .nav-item--dropdown.is-open .nav-dropdown,
  .nav-item--dropdown:focus-within .nav-dropdown { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 6px 0 4px; padding-left: 14px; border-left: 2px solid var(--line); }
  .nav-dropdown a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-dropdown a { color: var(--muted); font-size: 13px; text-transform: none; font-weight: 600; }
  .nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { color: var(--mathenson-red); }
  .nav-dropdown__heading { margin: 10px 0 2px; font: 700 10px/1.2 var(--mono); letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
  .nav-dropdown__heading:first-child { margin-top: 2px; }
  .nav-backdrop { display: none; }
  .nav-backdrop.is-open { display: block; position: fixed; inset: 72px 0 0 0; background: rgba(36,35,34,.32); z-index: 30; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
  .site-header__row { min-height: 72px; }
  .hero__grid, .quote-panel { grid-template-columns: 1fr; }
  .hero__mark, .hero__image { min-height: 190px; height: 230px; }
  .process { grid-template-columns: 1fr; }
  .logo-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .logo-grid__item { flex: 0 0 42%; scroll-snap-align: start; }
  .card { width: 100%; }
  .card__number { font-size: 52px; }
  .process__step h3 { margin-top: 28px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
  .legal-nav { position: static; }
  .legal-nav ol { flex-direction: row; flex-wrap: wrap; border-left: none; border-top: 2px solid var(--line); padding-top: 12px; }
  .legal-nav li { padding-left: 0; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Skip link — first focusable element, visible only while focused. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  padding: 12px 16px; background: var(--ink); color: var(--white);
  font: 700 14px/1 var(--mono); border-radius: var(--radius-sm);
  transform: translateY(-150%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Branded keyboard-focus ring — applies to any interactive element without its own
   focus style, so tabbing through nav, cards, buttons and links reads as one system
   instead of falling back to a mismatched browser-default blue outline. */
:focus-visible {
  outline: 3px solid var(--mathenson-red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Form fields draw their ring inset: the field sits flush in its container, where an
   offset outline is clipped. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--mathenson-red);
  outline-offset: -1px;
}
/* Anything scrolled to — an anchor target, or a control reached by keyboard —
   clears the sticky header rather than landing behind it. Unconditional, since
   scroll-margin only takes effect when the element is actually scrolled into view. */
:target, a, button, input, textarea, select, [tabindex], summary {
  scroll-margin-top: 110px;
}

/* Partner-delivered template: Mathenson's role beside the partner's role. */
.role-split { display: grid; gap: 24px; margin-top: 22px; }
.role-split__col { padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.role-split__title { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.role-split__col p { margin: 0; color: var(--muted); line-height: 1.8; }
@media (min-width: 860px) { .role-split { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---- Utility classes replacing repeated inline layout styles ---- */
/* Heading scale used inside sections (the hero owns .display-lg). */
.section-title { font-size: 1.6rem; }
.section-title--lg { font-size: 1.8rem; }
.section-title--sm { font-size: 1.5rem; }
.subhead { font-size: 1.3rem; }
/* Heading-to-copy and copy-to-list rhythm, applied once rather than per instance. */
.section-title + .lede, .section-title + p, .subhead + p { margin-top: var(--space-heading-copy); }
.lede + ul, .lede + ol, p + .list-body { margin-top: var(--space-copy-list); }
/* Body lists: the muted, generously led list used across service and industry pages. */
.list-body { color: var(--muted); line-height: 1.9; }
.section--ink .list-body { color: #d6cfca; }
/* Measure caps — copy stays readable instead of running the full shell width. */
.measure { max-width: 640px; }
.measure--wide { max-width: 720px; }
.measure--none { max-width: none; }
/* A strong inline link (related services, cross-references). */
.link-strong { color: var(--mathenson-red); font-weight: 700; }
/* Eyebrow on a dark band. */
.eyebrow--ink { color: var(--rose-pale); }
/* Hero call to action. */
.hero__cta { margin-top: 24px; }
/* Process band rendered on light ground rather than ink. */
.process--light { background: var(--line); border-color: var(--line); }
.process--light .process__step { background: var(--white); color: var(--ink); }
.process--light .process__step span { color: var(--mathenson-red); }
.process--light .process__step p { color: var(--muted); }

/* Certificate cards. Masked images only — never linked, never a download, never a
   higher-resolution source. Shown whole (contain, not cover) so the certification is
   identifiable while the masked regions stay masked. */
/* Certifications page. Gallery and aside sit side by side on desktop so the right-hand
   column carries the disclosure explanation and the registration panel instead of running
   empty. Source order is aside-first, so mobile keeps copy → registration → certificates. */
.cert-layout { display: grid; gap: 28px; margin-top: 20px; }
.cert-aside .lede { max-width: none; }
.cert-registration { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.cert-registration__label { margin: 0 0 10px; font: 700 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr; } }
@media (min-width: 1024px) {
  .cert-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
  .cert-aside { grid-column: 2; grid-row: 1; position: static; }
  .cert-grid { grid-column: 1; grid-row: 1; }
}
.cert-card { margin: 0; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cert-card img { display: block; width: 100%; aspect-ratio: 1100 / 1555; object-fit: contain; background: #fff; }
.cert-card figcaption { margin-top: auto; padding: 12px 14px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); border-top: 1px solid var(--line); }
/* Credential chip: a logo mention only. Not a link, no document behind it. */
.credential-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); }
.credential-chip img { height: 40px; width: auto; display: block; }
.credential-chip span { font-size: 13px; color: var(--muted); }

/* File-Eazy capabilities: the published feature set grouped into scannable panels
   rather than one 30-item column list. */
.cap-grid { display: grid; gap: 28px; margin-top: 8px; }
.cap-group { padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cap-group__title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.cap-group .list-body { margin: 0; padding-left: 18px; line-height: 1.75; }
.cap-group .list-body li + li { margin-top: 6px; }
.section--white .cap-group { background: var(--paper); }
@media (min-width: 720px)  { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .cap-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }