:root { --clay: #b5653f; --sand: #f5efe6; --ink: #2b2522; --muted: #74685f; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 17px/1.8 "Jost", system-ui, sans-serif; }
h1, h2, .logo { font-family: "Bodoni Moda", Georgia, serif; font-weight: 600; line-height: 1.1; }
h1 i, .logo i { color: var(--clay); }
img { display: block; width: 100%; height: auto; object-fit: cover; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

.head .wrap { display: flex; justify-content: space-between; align-items: center; padding: 22px; border-bottom: 1px solid #e2d6c6; }
.logo { text-decoration: none; color: var(--ink); font-size: 28px; }
.head nav a { margin-left: 24px; text-decoration: none; color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

.hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; padding-top: 44px; }
.kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--clay); margin: 0 0 14px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); margin: 0 0 18px; }
.text p:last-child { margin: 0; font-size: 18px; }
.hero img { aspect-ratio: 4 / 5; }

section { padding-top: 70px; }
h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 12px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.three > div { border-top: 2px solid var(--clay); padding-top: 18px; }
.three p { margin: 0; color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.split img { aspect-ratio: 1 / 1; }

.foot { margin-top: 70px; padding: 26px 0; border-top: 1px solid #e2d6c6; color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
  .hero, .split, .three { grid-template-columns: 1fr; }
  .head nav { display: none; }
}