:root {
  --page-max-width: 1180px;
  --page-gutter: 24px;

  --color-primary-navy: #071a3a;
  --color-primary-blue: #145de8;
  --color-accent-blue: #49c7ff;
  --color-text: #0d1b32;
  --color-text-muted: #64748b;
  --color-page-background: #f4f7fb;
  --color-surface: #fff;
  --color-border: #e5eaf1;

  --shadow-subtle: 0 8px 25px rgba(7, 26, 58, 0.06);
  --shadow-strong: 0 20px 60px rgba(7, 26, 58, 0.1);

  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;

  --space-section: clamp(72px, 8vw, 100px);
  --space-card: clamp(30px, 4vw, 46px);

  --font-size-page-heading: clamp(40px, 6vw, 64px);
  --font-size-section-heading: clamp(28px, 3.4vw, 42px);
  --font-size-body: 15px;
  --font-size-supporting: 13px;

  /* Compatibility aliases for existing page components. */
  --navy: var(--color-primary-navy);
  --blue: var(--color-primary-blue);
  --cyan: var(--color-accent-blue);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --soft: var(--color-page-background);
  --white: var(--color-surface);
  --line: var(--color-border);
  --shadow: var(--shadow-strong);
}

.page-shell,
.shell {
  width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
  margin-right: auto;
  margin-left: auto;
}

.site-footer {
  width: 100%;
  margin: 0;
  padding: 40px 0;
  color: #8d9aae;
  background: var(--color-primary-navy);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 25px;
}

.site-footer p {
  float: none;
  margin: 0;
  color: #8d9aae;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 15px;
  }

  .site-footer__inner {
    justify-content: flex-start;
  }
}