/* =====================================================================
   Gleg — Marketing site
   Design System v3 (Considered Editorial)
   - Headlines:        Source Serif 4 (semibold), in Deep Sea — display.
   - Body / sub-heads: Source Sans 3 — workhorse humanist sans.
   - Functional primary:  Pale Ruby — buttons, links, focus, brand mark.
   - Considered secondary: Deep Sea — display only. Never clickable.
   - Surface accent:   Copper. Atmosphere only — never functional.
   - Brand ground:     Cream. Product UI ground: Paper.
   - Borders carry structure where shadows would.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  /* Grounds */
  --gleg-paper:        #fafaf6;
  --gleg-cream:        #f3eee4;
  --gleg-cream-2:      #ebe4d4;
  --gleg-white:        #ffffff;
  --gleg-stone:        #e8e6df;
  --gleg-ink:          #14181f;
  --gleg-ink-2:        #3a3f48;
  --gleg-ink-3:        #6a7280;

  /* Functional primary — Pale Ruby */
  --gleg-ruby:         #863d2c;
  --gleg-ruby-press:   #6e3023;
  --gleg-ruby-soft:    #f5e8e3;
  --gleg-ruby-soft-cream: #ebdfd6;

  /* Considered secondary — Deep Sea */
  --gleg-sea:          #104172;
  --gleg-sea-press:    #0c2f53;
  --gleg-sea-soft:     #e3eaf1;

  /* Surface accent — Copper */
  --gleg-copper:       #fcc19b;
  --gleg-copper-soft:  #fde6d4;
  --gleg-copper-deep:  #8a4a1f;

  /* Borders */
  --border-1:          rgba(20, 24, 31, 0.10);
  --border-2:          rgba(20, 24, 31, 0.16);
  --border-strong:     rgba(20, 24, 31, 0.32);
  --border-on-dark:    rgba(243, 238, 228, 0.20);
  --border-on-cream:   rgba(20, 24, 31, 0.12);

  /* Type families */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --t-display: 56px;
  --t-h1:      40px;
  --t-h2:      28px;
  --t-h3:      20px;
  --t-h4:      16px;
  --t-subhead: 12px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 12px;

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  --tracking-display: -0.012em;
  --tracking-heading: -0.01em;
  --tracking-subhead: 0.10em;

  /* Spacing — 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Borders */
  --bw-hair: 1px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:      140ms;
  --dur-base:      200ms;

  /* Layout */
  --container-max: 1200px;
}

/* ====================================================================
   Reset and base
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gleg-paper);
  color: var(--gleg-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--gleg-ruby); color: var(--gleg-cream); }

a {
  color: var(--gleg-ruby);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }
a:focus-visible {
  outline: 2px solid var(--gleg-ruby);
  outline-offset: 2px;
}

/* ====================================================================
   Typography
   ==================================================================== */
h1, h2, h3, h4 { margin: 0; }
.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--gleg-sea);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--gleg-sea);
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--gleg-ink);
}

.eyebrow, .subhead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-subhead);
  line-height: 1;
  letter-spacing: var(--tracking-subhead);
  text-transform: uppercase;
  color: var(--gleg-ruby);
  margin: 0 0 var(--space-4);
}
.subhead { color: var(--gleg-ink); }

.lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--gleg-ink-2);
  max-width: 64ch;
  text-wrap: pretty;
}

.caption {
  font-size: var(--t-caption);
  color: var(--gleg-ink-3);
  line-height: 1.45;
}

.pull-quote {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gleg-sea);
  border-left: 3px solid var(--gleg-ruby);
  padding-left: var(--space-5);
  margin: var(--space-7) 0 0;
  max-width: 60ch;
}

/* Founder line — single italic Source Serif phrase under a section H2.
   Ruby italic is the documented "signature flourish" for emphasis
   inside a display moment. Use sparingly. */
.founder-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--gleg-ruby);
  margin: var(--space-3) 0 0;
  max-width: 50ch;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--gleg-ink); color: var(--gleg-cream);
  padding: var(--space-3) var(--space-5); font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; z-index: 100; }

/* ====================================================================
   Layout primitives
   ==================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-9) 0; }
.section-paper { background: var(--gleg-paper); }
.section-cream { background: var(--gleg-cream); }
.section-cream-2 { background: var(--gleg-cream-2); }
.section-stone { background: var(--gleg-stone); }
.section-ink {
  background: var(--gleg-ink);
  color: var(--gleg-cream);
}
.section-ink h2,
.section-ink .display { color: var(--gleg-cream); }
.section-ink .lede { color: var(--gleg-cream); opacity: 0.85; }
.section-ink .eyebrow { color: var(--gleg-copper); }

/* ====================================================================
   Hero
   ==================================================================== */
.hero {
  background: var(--gleg-cream);
  position: relative;
  border-bottom: var(--bw-hair) solid var(--border-on-cream);
}
.hero-band {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--gleg-ruby);
}

.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
}
.nav-logo {
  display: inline-flex; align-items: center;
  height: 32px;
}
.nav-logo img { height: 28px; width: auto; }
.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: var(--space-6);
}
.nav-links a {
  color: var(--gleg-ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--gleg-ruby); opacity: 1; }

.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-9);
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-subhead);
  letter-spacing: var(--tracking-subhead);
  text-transform: uppercase;
  color: var(--gleg-ruby);
  margin-bottom: var(--space-5);
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--gleg-sea);
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.hero-tagline em {
  font-style: italic;
  color: var(--gleg-ruby);
}
.hero-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--gleg-ink-2);
  max-width: 60ch;
  margin: 0 0 var(--space-7);
}
.hero-actions {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--radius-1);
  border: var(--bw-hair) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:hover { opacity: 1; }
.btn-primary {
  background: var(--gleg-ruby);
  color: var(--gleg-cream);
}
.btn-primary:hover {
  background: var(--gleg-ruby-press);
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--gleg-ruby);
  border-color: var(--gleg-ruby);
}
.btn-ghost:hover {
  background: var(--gleg-ruby);
  color: var(--gleg-cream);
}
.btn-cream {
  background: var(--gleg-cream);
  color: var(--gleg-ruby);
}
.btn-cream:hover {
  background: var(--gleg-white);
}
.btn-ghost-on-dark {
  background: transparent;
  color: var(--gleg-cream);
  border-color: var(--gleg-cream);
}
.btn-ghost-on-dark:hover {
  background: var(--gleg-cream);
  color: var(--gleg-ink);
}
.btn-lg { padding: 16px 26px; font-size: 16px; }

/* ====================================================================
   Steps (How it works)
   ==================================================================== */
.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0;
  display: grid;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--bw-hair) solid var(--border-1);
  align-items: start;
}
.step:last-child { border-bottom: var(--bw-hair) solid var(--border-1); }
.step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--gleg-ruby);
  letter-spacing: 0.08em;
  padding-top: 4px;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--gleg-sea);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--tracking-heading);
}
.step p {
  margin: 0;
  color: var(--gleg-ink-2);
  max-width: 60ch;
}

/* ====================================================================
   Cards (Why different / etc.)
   ==================================================================== */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.card {
  background: var(--gleg-white);
  padding: var(--space-6);
  border: var(--bw-hair) solid var(--border-on-cream);
}
.card .subhead {
  display: block;
  margin: 0 0 var(--space-3);
  text-transform: none;
  letter-spacing: var(--tracking-heading);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--gleg-sea);
  line-height: 1.25;
}
.card p { margin: 0; color: var(--gleg-ink-2); }

/* Disciplined accent — copper-deep eyebrow with copper-soft fill,
   used at most once per page. */
.callout-copper {
  background: var(--gleg-copper-soft);
  border-left: 3px solid var(--gleg-copper-deep);
  padding: var(--space-6);
  margin-top: var(--space-7);
}
.callout-copper .eyebrow { color: var(--gleg-copper-deep); }
.callout-copper p { margin: var(--space-3) 0 0; color: var(--gleg-ink); }

/* ====================================================================
   Dash list
   ==================================================================== */
.dash-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.dash-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: var(--bw-hair) solid var(--border-1);
  color: var(--gleg-ink-2);
  font-size: 15px;
  line-height: 1.45;
}
.dash-list li::before {
  content: "\2014";
  position: absolute; left: 0; top: var(--space-2);
  color: var(--gleg-ruby);
  font-weight: 700;
}
.dash-list li:last-child { border-bottom: none; }

/* ====================================================================
   Team grid
   ==================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.team-card {
  padding: var(--space-6);
  background: var(--gleg-white);
  border: var(--bw-hair) solid var(--border-on-cream);
}
.team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--gleg-sea);
  margin: 0;
  letter-spacing: var(--tracking-heading);
}
.team-role {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-subhead);
  text-transform: uppercase;
  color: var(--gleg-ruby);
  margin: var(--space-2) 0 var(--space-4);
}
.team-card .dash-list { margin-top: var(--space-2); }

/* ====================================================================
   Contact (deep ground)
   ==================================================================== */
.section-deep {
  background: var(--gleg-sea);
  color: var(--gleg-cream);
  position: relative;
  border-top: 4px solid var(--gleg-ruby);
}
.section-deep .display,
.section-deep h2 { color: var(--gleg-cream); }
.section-deep .eyebrow { color: var(--gleg-copper); }
.section-deep .lede { color: var(--gleg-cream); opacity: 0.88; }
.section-deep .caption { color: var(--gleg-cream); opacity: 0.65; }
.contact-actions {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-7) 0 var(--space-5);
}

/* ====================================================================
   Footer
   ==================================================================== */
.site-footer {
  background: var(--gleg-stone);
  padding: var(--space-9) 0 var(--space-6);
  border-top: var(--bw-hair) solid var(--border-1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.footer-grid .caption { margin-top: var(--space-4); max-width: 36ch; }
.footer-mark { width: auto; height: 28px; }
.footer-head {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-subhead);
  text-transform: uppercase;
  color: var(--gleg-ink);
  margin: 0 0 var(--space-3);
}
.footer-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-2);
  font-size: 14px;
  color: var(--gleg-ink-2);
}
.footer-list a { color: var(--gleg-ink-2); text-decoration: none; }
.footer-list a:hover { color: var(--gleg-ruby); }

.site-footer .copy {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--bw-hair) solid var(--border-1);
  font-size: 12px;
  color: var(--gleg-ink-3);
  display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
}

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 880px) {
  .three-col { grid-template-columns: 1fr; }
  .two-col   { grid-template-columns: 1fr; gap: var(--space-6); }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { gap: var(--space-4); font-size: 13px; }
  .hero-inner { padding: var(--space-9) var(--space-5) var(--space-8); }
  .step { grid-template-columns: 56px 1fr; gap: var(--space-4); }
  .section { padding: var(--space-8) 0; }
}
@media (max-width: 560px) {
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-tagline { font-size: 40px; }
  .lede, .hero-lede { font-size: 17px; }
  .display { font-size: 36px; }
  h2 { font-size: 26px; }
}