:root {
    --charcoal-900: #1C1917;
    --charcoal-700: #44403C;
    --charcoal-500: #78716C;
    --charcoal-400: #A8A29E;
    --charcoal-200: #E7E5E4;
    --charcoal-50:  #FAFAF9;
    --cream: #FAF7F2;
    --soft-stone: #F0EDE8;
    --sage-100: #E8EBE0;
    --terracotta: #C2410C;
    --terracotta-hover: #D4550F;
    --terracotta-50: #FDF4EE;
    --shadow-lift: 0 16px 48px rgba(28,25,23,0.10);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--cream);
    color: var(--charcoal-900);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0;
  }
  a { color: var(--terracotta); }
  a:hover { color: var(--terracotta-hover); }
  .container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
  .narrow { max-width: 760px; margin: 0 auto; }

  /* header */
  header { padding: 28px 0; border-bottom: 1px solid var(--charcoal-200); background: var(--cream); }
  .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .header-row img { display: block; height: 44px; width: auto; }
  .nav-links { display: flex; gap: 20px; font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; font-size: 14px; }
  .nav-links a { color: var(--charcoal-700); text-decoration: none; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--terracotta); }

  /* hero */
  .hero { padding: 72px 0 40px; }
  .eyebrow {
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 14px;
  }
  .hero h1 { font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); margin: 0 0 20px; }
  .hero .lede { font-size: 19px; color: var(--charcoal-500); margin: 0; }

  /* fact card */
  .fact-card {
    background: #fff; border: 1px solid var(--charcoal-200); border-left: 4px solid var(--terracotta);
    border-radius: 18px; padding: 36px 40px; margin: 8px 0 0;
  }
  .fact-card h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--charcoal-500); margin-bottom: 22px;
  }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 0; }
  .facts dt {
    font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-500); margin-bottom: 4px;
  }
  .facts dd { margin: 0; font-size: 16px; color: var(--charcoal-900); }
  .facts .wide { grid-column: 1 / -1; }
  @media (max-width: 600px) {
    .fact-card { padding: 28px 22px; }
    .facts { grid-template-columns: 1fr; }
  }

  /* sections */
  section.block { padding: 72px 0; }
  section.alt { background: var(--soft-stone); }
  section.white { background: #fff; border-top: 1px solid var(--charcoal-200); border-bottom: 1px solid var(--charcoal-200); }
  .block h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; margin-bottom: 14px; }
  .block .intro { color: var(--charcoal-500); margin: 0 0 36px; }
  .block p { margin: 0 0 16px; }

  .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  @media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
  .card {
    background: #fff; border: 1px solid var(--charcoal-200); border-radius: 16px; padding: 26px 28px;
  }
  .card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
  .card p { color: var(--charcoal-500); margin: 0; font-size: 15.5px; }

  ol.parts { margin: 0; padding: 0; list-style: none; counter-reset: part; }
  ol.parts li {
    counter-increment: part; position: relative; padding: 18px 0 18px 56px;
    border-bottom: 1px solid var(--charcoal-200);
  }
  ol.parts li:last-child { border-bottom: 0; }
  ol.parts li::before {
    content: counter(part, decimal-leading-zero); position: absolute; left: 0; top: 16px;
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 20px; color: var(--terracotta);
  }
  ol.parts strong { font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; display: block; margin-bottom: 2px; }
  ol.parts span { color: var(--charcoal-500); font-size: 15.5px; }

  .reading h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-500); margin: 0 0 14px; }
  .reading ul { margin: 0 0 36px; padding: 0; list-style: none; }
  .reading li { padding: 10px 0; border-bottom: 1px solid var(--charcoal-200); }
  .reading li:last-child { border-bottom: 0; }
  .reading a { color: var(--charcoal-900); text-decoration: underline; text-decoration-color: var(--charcoal-200); text-underline-offset: 3px; }
  .reading a:hover { text-decoration-color: var(--terracotta); color: var(--charcoal-900); }

  .contact-box {
    background: var(--charcoal-900); color: #fff; border-radius: 18px; padding: 40px 44px;
  }
  .contact-box h2 { color: #fff; }
  .contact-box p { color: var(--charcoal-400); }
  .contact-box a { color: #fff; font-weight: 600; }
  @media (max-width: 600px) { .contact-box { padding: 30px 22px; } }

  footer {
    background: var(--charcoal-900); color: var(--charcoal-400);
    padding: 28px 0 36px; font-size: 13px; text-align: center; border-top: 1px solid #2a2724;
  }
  footer a { color: var(--charcoal-400); text-decoration: underline; text-decoration-color: #3a3633; text-underline-offset: 2px; }
  footer a:hover { color: #fff; }

  /* shared additions: buttons, stat row, project blocks */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; font-size: 14px;
    text-decoration: none; padding: 14px 26px; border-radius: 12px;
    transition: all 0.18s ease; border: 1px solid transparent;
  }
  .btn-primary { background: var(--terracotta); color: #fff; }
  .btn-primary:hover { background: var(--terracotta-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .btn-secondary { background: #fff; color: var(--charcoal-900); border-color: var(--charcoal-200); }
  .btn-secondary:hover { color: var(--charcoal-900); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

  .card .label {
    font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 8px;
  }
  .card ul { margin: 12px 0 0; padding-left: 18px; color: var(--charcoal-500); font-size: 15px; }
  .card li { margin: 4px 0; }

  .project {
    background: #fff; border: 1px solid var(--charcoal-200); border-radius: 18px;
    padding: 36px 40px; margin: 0 0 28px;
  }
  .project-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
  .project h3 { font-size: 26px; font-weight: 700; }
  .project .meta { color: var(--charcoal-500); font-size: 14px; margin: 0 0 18px; }
  .project h4 {
    font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--charcoal-500); margin: 22px 0 8px;
  }
  .project ul { margin: 0; padding-left: 18px; }
  .project li { margin: 5px 0; }
  .project blockquote {
    margin: 24px 0 0; padding: 18px 22px; background: var(--sage-100); border-radius: 12px;
    font-style: italic; color: var(--charcoal-700);
  }
  .project blockquote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--charcoal-900); }
  .stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .badge {
    font-size: 13px; font-weight: 500; color: var(--charcoal-500); padding: 5px 11px;
    border: 1px solid var(--charcoal-200); border-radius: 6px; background: var(--charcoal-50);
  }
  @media (max-width: 600px) { .project { padding: 28px 22px; } }