:root {
    --ground: #FFFFFF;
    --paper: #F6F5F2;
    --ink: #1A2130;
    --text: #1A2130;
    --mute: #5A6172;
    --rule: rgba(26, 33, 48, 0.16);
    --band: #1A2130;
    --band-text: #F6F5F2;
    --band-mute: rgba(246, 245, 242, 0.72);
    --band-rule: rgba(246, 245, 242, 0.28);

    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --wordmark: "Spectral", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
  }

  * { box-sizing: border-box; }

  body {
    background: var(--ground);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; }
  p { margin: 0; text-wrap: pretty; }
  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h2 { font-size: 40px; font-weight: 500; }
  h3 { font-size: 26px; font-weight: 500; }

  .wrap { padding-inline: 64px; }

  a:focus-visible, .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

  /* header */
  .header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
    padding: 30px 64px 26px;
    background: var(--band);
    color: var(--band-text);
    border-bottom: 1px solid var(--band-rule);
  }
  .wordmark {
    font-family: var(--wordmark);
    font-weight: 400;
    font-size: 42px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  .nav { display: flex; gap: 36px; align-items: baseline; flex: none; }
  .nav a {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
  }
  .nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; }

  /* buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    background: transparent;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .btn:hover { background: var(--ink); color: var(--ground); }
  .btn.solid { background: var(--ink); color: var(--ground); }
  .btn.solid:hover { opacity: 0.88; }
  .band .btn, .nav .btn { border-color: var(--band-text); color: var(--band-text); }
  .band .btn:hover, .nav .btn:hover { background: var(--band-text); color: var(--band); }

  .kicker {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .rule { height: 1px; background: var(--rule); }

  /* hero */
  .hero {
    padding: 120px 64px 110px;
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 64px;
    align-items: end;
  }
  .hero h1 {
    font-size: 76px;
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin-top: 28px;
  }
  .hero p { font-size: 16px; margin-bottom: 28px; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* sections */
  .section { padding-block: 96px; }
  .grid-2 { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .col { display: flex; flex-direction: column; gap: 14px; }
  .col.ruled { border-top: 1px solid var(--ink); padding-top: 20px; }
  .num { font-size: 11px; letter-spacing: 0.2em; color: var(--mute); }
  .col p { font-size: 14px; color: var(--mute); }
  .col > .kicker + h2 { margin-top: 4px; }
  .lead p { font-size: 15px; color: var(--text); }

  .list { display: flex; flex-direction: column; }
  .list div {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px;
  }
  .list div:last-child { border-bottom: 1px solid var(--rule); }
  .list div span:first-child { color: var(--mute); flex: none; }

  .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .fit .list { margin-top: 14px; }

  .about p { font-size: 15px; color: var(--text); }
  .about .small {
    font-size: 12px;
    color: var(--mute);
    letter-spacing: 0.04em;
    border-top: 1px solid var(--rule);
    padding-top: 16px;
    margin-top: 8px;
  }

  /* cta */
  .band { background: var(--band); color: var(--band-text); }
  .cta {
    padding: 96px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .cta h2 { font-size: 52px; font-weight: 400; line-height: 1.05; }
  .cta p { font-size: 15px; color: var(--band-mute); margin-bottom: 24px; }
  .cta .link {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    color: var(--band-text);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-underline-offset: 5px;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 28px 64px;
    font-size: 12px;
    color: var(--mute);
  }
  .footer .wordmark { color: var(--ink); font-size: 18px; }

  @media (max-width: 900px) {
    .wrap, .hero, .cta, .footer { padding-inline: 20px; }
    .header { flex-direction: column; align-items: flex-start; padding: 20px 20px 18px; gap: 18px; }
    .wordmark { font-size: 30px; }
    .nav { flex-wrap: wrap; gap: 18px; }
    .hero { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; gap: 24px; }
    .hero h1 { font-size: 42px; }
    .actions { flex-direction: column; }
    .btn { min-height: 48px; }
    .section { padding-block: 48px; }
    .grid-2, .grid-3, .grid-4, .cta, .fit { grid-template-columns: 1fr; gap: 28px; }
    h2 { font-size: 32px; }
    .cta h2 { font-size: 34px; }
    .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
  }