@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Newsreader; font-weight: 300; font-display: swap; src: url(/fonts/newsreader-300.woff2) format('woff2'); }
@font-face { font-family: Newsreader; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/newsreader-300-italic.woff2) format('woff2'); }
@font-face { font-family: 'Gilda Display'; font-weight: 400; font-display: swap; src: url(/fonts/gilda-display-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url(/fonts/barlow-semi-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Display'; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-display-400.woff2) format('woff2'); }

:root {
  --navy: #14233A; --navy-2: #1A2C47; --sand: #D8C08E; --cream: #F6F4EF;
  --w1: #EADDB8; --w2: #D8C08E; --w3: #B9BF9E; --w4: #8FB0A8; --w5: #6E9DB0;
  --soft: rgba(246, 244, 239, .76); --faint: rgba(246, 244, 239, .5);
  --gutter: 56px; --max: 1280px;
  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy); color: var(--cream); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; border-radius: 2px; }
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; }
.caps { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--sand); color: var(--navy); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

.site-head, main > section, footer { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.site-head { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; position: relative; z-index: 3; }
.logo { display: flex; align-items: center; gap: 16px; }
.logo img { display: block; width: 44px; height: auto; }
.logo span { font-weight: 500; letter-spacing: .3em; font-size: 14px; }
nav { display: flex; gap: 36px; }
nav a, .foot-row a, a.out { font-size: 13px; letter-spacing: .08em; position: relative; padding-block: 6px; }
nav a::after, .foot-row a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--sand); transition: right .3s ease; }
nav a:hover::after, nav a:focus-visible::after, .foot-row a:hover::after { right: 0; }

#approach { padding-block: 40px 110px; }
#approach h2 { color: var(--faint); margin-bottom: 34px; }
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.beats li { border-top: 1px solid rgba(216, 192, 142, .28); padding-top: 18px; }
.beats .caps { color: var(--sand); }
.beats p { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; margin-top: 12px; max-width: 16ch; }

footer { padding-block: 0 44px; }
.foot-row { border-top: 1px solid rgba(216, 192, 142, .2); padding-top: 34px; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 12px; letter-spacing: .06em; color: var(--faint); }
.foot-row a { color: var(--sand); }
#legal { margin-top: 18px; font-size: 11px; color: var(--faint); max-width: 70ch; }

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .site-head { padding-block: 20px; }
  nav { gap: 22px; }
  .beats { grid-template-columns: 1fr; gap: 26px; }
  .foot-row { flex-direction: column; gap: 10px; }
}
@media (max-width: 420px) { .logo { gap: 10px; } .logo img { width: 34px; } .logo span { font-size: 11px; letter-spacing: .2em; } nav { gap: 12px; } nav a { font-size: 11.5px; letter-spacing: .04em; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }