/* ============================================================
   Design tokens
   CSS custom properties defined at the root so every rule
   below can reference them. Change a value here and it
   propagates through the whole stylesheet.
   ============================================================ */

@font-face {
  font-family: 'Tiempos Text';
  src: url('tiempos-text-vf-roman.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-ink:         #1a1a1a;
  --color-ink-muted:   #44413b;
  --color-ink-soft:    #706d66;
  --color-page:        #fdfcf8;
  --color-surface:     #f2efe6;
  --color-rule:        rgba(0, 0, 0, 0.12);

  /* Typography */
  --font-display: 'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-body:    'Tiempos Text', Georgia, 'Times New Roman', serif;

  /* Layout */
  --page-max:    640px;
  --page-pad:    1.5rem;
  --radius:      8px;
}

/* ============================================================
   Base
   Light reset plus document defaults.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul {
  margin: 0;
  padding: 0;
}

/* ============================================================
   Page frame
   The header and main share the same narrow column so
   everything aligns on a single vertical axis.
   ============================================================ */

.site-header,
main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.site-header {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

main > section {
  margin-bottom: 3rem;
}

main > section:last-child {
  margin-bottom: 3rem;
}

/* ============================================================
   Brand
   ============================================================ */

.brand {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.brand-mark {
  height: 28px;
  width: auto;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  margin-bottom: 3.5rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.125rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  max-width: 34rem;
}

.hero-sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 32rem;
}

/* ============================================================
   Section labels (small "eyebrow" above each section)
   ============================================================ */

.section-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-bottom: 1.25rem;
}

/* ============================================================
   Steps (How it works)
   Uses a CSS counter to render "01 / 02 / 03" in the display
   serif, without hardcoding the numbers in the HTML.
   ============================================================ */

.steps {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  counter-reset: step-counter;
}

.step {
  counter-increment: step-counter;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.step::before {
  content: counter(step-counter);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.step h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.step p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

/* ============================================================
   Capabilities (What we build)
   auto-fit + minmax lets the grid decide how many columns
   to show based on available width. One column on mobile,
   two on wider screens, no media query needed.
   ============================================================ */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.capability {
  padding: 0;
}

.capability h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.capability p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ============================================================
   Prose (generic paragraph style used by audience,
   typical projects, and pricing notes)
   ============================================================ */

.prose {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 35rem;
}

/* ============================================================
   Pricing
   The range is treated as an anchor fact — display serif,
   larger size — so a buyer scanning the page can't miss it.
   ============================================================ */

.price-range {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.pricing-note {
  max-width: 32rem;
}

/* ============================================================
   Contact
   ============================================================ */

.contact-section {
  border-top: 1px solid var(--color-rule);
  padding-top: 2rem;
  margin-top: 1rem;
}

.email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2px;
  transition: border-bottom-color 150ms ease;
}

.email:hover,
.email:focus-visible {
  border-bottom-color: var(--color-ink);
  outline: none;
}

.contact-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 29rem;
  margin-top: 1rem;
}

/* ============================================================
   Small screens
   The clamp() on .hero h1 already handles most responsive
   resizing. This tightens vertical rhythm on narrow screens.
   ============================================================ */

.projects-list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.projects-list li {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  padding-left: 1rem;
  position: relative;
}

.projects-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-ink-soft);
}

@media (max-width: 480px) {
  .site-header {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
  }

  main > section {
    margin-bottom: 2.5rem;
  }

  .capabilities {
    grid-template-columns: 1fr;
  }

  .email {
    font-size: 1.125rem;
    padding: 0.5rem 0;
  }
}