/* Shared Dark Monochrome design foundation for all four pages. */
:root {
  color-scheme: dark;
  --paper: #08090b;
  --ink: #f5f5f7;
  --muted: #c4c5ca;
  --line: #2b2d32;
  --blue: #f5f5f7;
  --orange: #c4c5ca;
  --orange-art: #4d4f56;
  --lime: #202126;
  --sans: 'Inter', Arial, Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --content-width: 1320px;
  --page-gutter: 48px;
}
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: normal; }
::selection { background: var(--blue); color: #fff; }
.container { width: calc(100% - var(--page-gutter) - var(--page-gutter)); max-width: var(--content-width); margin-inline: auto; }
.site-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 750; letter-spacing: -1.6px; white-space: nowrap; position: relative; }
/* Expand the logo's touch area without moving the approved lettering. */
.brand::after { content: ''; position: absolute; inset: -8px 0; }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.site-header nav a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding-block: 12px; transition: color .25s; }
.site-header nav a:hover, .site-header nav a:last-child { color: var(--blue); }
.eyebrow { font: 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.site-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; border-top: 1px solid var(--line); padding-block: 30px 36px; }
.footer-brand { font-size: 25px; }
.footer-legal { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.footer-legal > span { display: inline; text-align: left; }
.footer-trade-name { color: #92949c; }
@media (min-width: 1024px) {
  .footer-legal { white-space: nowrap; }
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; line-height: 1.7; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer nav a:hover { color: var(--blue); }

/* The inner pages share title typography, while keeping their content layouts. */
.page-header { padding-block: 65px 48px; }
.page-header > .eyebrow { display: inline-block; background: var(--lime); padding: 7px 12px; margin: 0; }
.page-title { max-width: 950px; font-size: clamp(44px,5.2vw,72px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; margin: 27px 0 25px; }
.page-intro { max-width: 750px; font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 0; }

@media (max-width: 1100px) {
  :root { --page-gutter: 32px; }
  .site-footer { grid-template-columns: auto 1fr; gap: 20px; }
  .site-footer nav { grid-column: 1 / -1; }
  .footer-legal { justify-self: end; }
}
@media (max-width: 700px) {
  :root { --page-gutter: 20px; }
  .site-header { display: grid; grid-template-columns: 1fr; gap: 8px; padding-block: 18px 12px; }
  .brand { font-size: 25px; gap: 10px; }
  .site-header nav { gap: 17px; font-size: 13px; justify-content: space-between; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; }
  .site-footer nav { gap: 12px 18px; }
  .footer-legal { justify-self: start; }
  .page-header { padding-block: 45px 35px; }
  .page-title { font-size: clamp(40px,10.5vw,58px); }
  .page-intro { font-size: 16px; }
}
@media (max-width: 380px) {
  :root { --page-gutter: 16px; }
  .site-header nav { gap: 14px; }
}