/* Design tokens */
:root {
  --navy: #0F1F3D;
  --paper: #F7F3E9;
  --ink: #0A0E14;
  --secondary: #4A5160;
  --muted-navy: #B8C0D0;
  --number: #A8AEBA;

  --content-max: 40rem;
  --page-pad-x: 1.5rem;

  --fs-wordmark: 1rem;
  --fs-nav: 0.875rem;
  --fs-hero: 2.25rem;
  --fs-sub: 1rem;
  --fs-service-h: 1.0625rem;
  --fs-body: 1rem;
  --fs-number: 1rem;
  --fs-eyebrow: 0.8125rem;
  --fs-footer: 0.75rem;

  --lh-hero: 1.1;
  --lh-sub: 1.45;
  --lh-body: 1.55;

  --header-pad-y: 1rem;
  --hero-pad-top: 3rem;
  --hero-pad-bottom: 3.5rem;
  --content-pad-y: 3.5rem;
  --footer-pad-y: 1.25rem;
}

@media (min-width: 720px) {
  :root {
    --fs-wordmark: 1.125rem;
    --fs-nav: 0.9375rem;
    --fs-hero: 3.25rem;
    --fs-sub: 1.25rem;
    --fs-service-h: 1.125rem;
    --fs-body: 1.0625rem;
    --fs-number: 1.0625rem;
    --fs-footer: 0.8125rem;

    --header-pad-y: 1.75rem;
    --hero-pad-top: 4.5rem;
    --hero-pad-bottom: 8rem;
    --content-pad-y: 6rem;
    --footer-pad-y: 1.75rem;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

p { margin: 0; }

/* Panels */
.panel {
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.panel__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.panel--header {
  background: var(--paper);
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
}

.panel--hero {
  background: var(--navy);
  color: var(--paper);
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
}

.panel--content {
  background: var(--paper);
  padding-top: var(--content-pad-y);
  padding-bottom: var(--content-pad-y);
}

.panel--footer {
  background: var(--navy);
  color: var(--muted-navy);
  padding-top: var(--footer-pad-y);
  padding-bottom: var(--footer-pad-y);
}

/* Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img {
  display: block;
  height: 1.8rem;
  width: auto;
}

@media (min-width: 720px) {
  .wordmark img { height: 2.15rem; }
}

.nav {
  display: flex;
  gap: 1rem;
}

@media (min-width: 720px) {
  .nav { gap: 1.5rem; }
}

.nav a {
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
}

.nav a[aria-current="page"] { color: var(--ink); }

.nav a:hover { color: var(--ink); }

/* Hero */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-hero);
  color: var(--paper);
  margin: 0 0 1.25rem;
}

@media (min-width: 720px) {
  .hero-title { margin-bottom: 3rem; }
}

.hero-sub {
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: var(--lh-sub);
  color: var(--muted-navy);
  margin: 0 0 2rem;
}

@media (min-width: 720px) {
  .hero-sub { margin-bottom: 3rem; }
}

.page-title {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-hero);
  color: var(--paper);
  margin: 0 0 1.5rem;
}

@media (min-width: 720px) {
  .page-title { margin-bottom: 3rem; }
}

/* Services */
.services {
  margin: 0 0 3.5rem;
}

@media (min-width: 720px) {
  .services { margin-bottom: 5rem; }
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.service {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
  align-items: start;
}

@media (min-width: 720px) {
  .service {
    grid-template-columns: 2rem 1fr;
    gap: 2rem;
    margin-bottom: 2.25rem;
  }
}

.service:last-child { margin-bottom: 0; }

.service__number {
  font-size: var(--fs-number);
  font-weight: 400;
  color: var(--number);
  line-height: var(--lh-body);
}

.service h3 {
  font-size: var(--fs-service-h);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.625rem;
  line-height: 1.25;
}

.service p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Contact */
.contact p { margin: 0 0 0.75rem; }

.contact-link {
  display: inline-block;
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-link:hover { text-decoration-thickness: 2px; }

/* Intro paragraphs (above services on Home, above founders on Team) */
.intro {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 1.25rem;
}

.intro:last-of-type { margin-bottom: 3rem; }

@media (min-width: 720px) {
  .intro:last-of-type { margin-bottom: 4rem; }
}

/* Founders */
.founders { display: grid; gap: 2.5rem; }

@media (min-width: 720px) {
  .founders { gap: 4rem; }
}

.founder h3 {
  font-size: var(--fs-service-h);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.625rem;
}

.founder p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Footer */
.site-footer {
  font-size: var(--fs-footer);
  color: var(--muted-navy);
}