:root {
  
  --navy: #012334;
  --navy-deep: #011a27;
  --navy-raised: #062c3f;
  --beige: #E3DBCF;
  --beige-light: #faf8f4;
  --beige-medium: #f1ece3;
  --beige-dim: #c8c0b4;
  --accent: #E07A5F;
  --accent-dark: #c9613d;
  
  --accent-on-light: #a34f32;
  --offwhite: #f6f6f6;
  --light-grey: #ecf0f1;
  --charcoal: #333333;
  --white: #ffffff;

  
  --font: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;

  
  --radius-sm: 3px;
  --radius-md: 4px;

  
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-hero: 140px;

  
  --space-section: 120px;
  --space-section-mobile: 72px;

  
  --nav-height: 94px;

  
  --focus-ring: 2px;
  --focus-offset: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { font-family: var(--font); color: var(--beige); background: var(--navy); }
h1, h2 { font-family: var(--font); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; }
section, nav { padding: var(--space-section) var(--space-xl); position: relative; overflow: hidden; }

section[id] { scroll-margin-top: var(--nav-height); }
.wrap { max-width: 1100px; margin: 0 auto; }

.pane-navy { background: var(--navy); color: var(--beige); }
.pane-deep { background: var(--navy-deep); color: var(--beige); }
.pane-raised { background: var(--navy-raised); color: var(--beige); }
.pane-beige { background: var(--beige-light); color: var(--charcoal); }
.pane-medium { background: var(--beige-medium); color: var(--charcoal); }
.pane-offwhite { background: var(--offwhite); color: var(--charcoal); }
.pane-accent { background: var(--accent); color: var(--navy); }

.pane-warm { background: var(--beige); color: var(--charcoal); }

.pane-beige h2, .pane-medium h2, .pane-offwhite h2, .pane-warm h2 { color: var(--navy); }

:where(.pane-beige, .pane-medium, .pane-offwhite, .pane-warm) p { color: rgba(51,51,51,0.82); }

@media (max-width: 900px) {
  :root { --nav-height: 86px; }
  section, nav { padding: var(--space-section-mobile) var(--space-sm); }
}
@media (max-width: 560px) {
  :root { --nav-height: 77px; }
}