* { box-sizing: border-box; }
:root {
  --bg: #f5f1e8;
  --paper: #fffaf0;
  --ink: #1f1b16;
  --muted: #61594d;
  --line: rgba(31, 27, 22, 0.16);
  --accent: #8f3d24;
  --accent-dark: #5f291a;
  --shadow: 0 22px 60px rgba(31, 27, 22, 0.12);
}
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(circle at top left, rgba(143, 61, 36, 0.12), transparent 34rem),
    linear-gradient(180deg, #fbf6ec 0%, var(--bg) 58%, #ede5d7 100%);
}
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 72px; }
.hero { max-width: 860px; padding: 32px 0 36px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 14px; color: var(--accent-dark); font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 8vw, 6.6rem); line-height: 0.88; letter-spacing: -0.07em; font-weight: 500; }
.intro { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 32px; }
.card {
  grid-column: span 4;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 92%, white);
  box-shadow: var(--shadow);
}
.card:first-child { grid-column: span 8; }
.card-topline { color: var(--accent); font-family: Arial, Helvetica, sans-serif; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; }
h2 { margin: 18px 0 14px; font-size: clamp(1.55rem, 2.4vw, 2.45rem); line-height: 1.03; letter-spacing: -0.04em; font-weight: 500; }
p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.52; }
.expect { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.expect span { color: var(--ink); font-weight: 700; }
.card-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.card-link:hover, .card-link:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); outline: none; }
@media (max-width: 920px) { .card, .card:first-child { grid-column: span 6; } }
@media (max-width: 680px) { main { width: min(100% - 22px, 1180px); padding-top: 34px; } .grid { grid-template-columns: 1fr; } .card, .card:first-child { grid-column: span 1; min-height: unset; } .hero { padding-top: 18px; } }