:root {
  color-scheme: light;
  --primary: #c96845;
  --primary-strong: #af5434;
  --sage: #6f8372;
  --paper: #f7f1e4;
  --surface: #fffaf0;
  --ink: #203a42;
  --ink-strong: #112d34;
  --muted: #52676c;
  --line: rgba(32, 58, 66, .18);
  --focus: #165dff;
  --shadow: 0 22px 60px rgba(23, 43, 50, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 84% 12%, rgba(201, 104, 69, .14), transparent 29rem), linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: auto, 100% 32px; }
a:focus-visible { outline: .2rem solid var(--focus); outline-offset: .2rem; }

.home-page { width: min(1120px, calc(100% - 3rem)); min-height: calc(100vh - 72px); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); margin: auto; padding: 5rem 0; }
.brand { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(3rem, 8vh, 5rem); color: var(--ink-strong); font-size: 1rem; font-weight: 900; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--surface); box-shadow: inset 0 -3px rgba(0, 0, 0, .08); }
.eyebrow { margin: 0; color: var(--primary-strong); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
h1 { max-width: 760px; margin: .8rem 0 1.2rem; color: var(--ink-strong); font: 900 clamp(2.8rem, 6vw, 5.2rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.lead { max-width: 540px; margin: 0; color: var(--muted); font-size: 1rem; }
.home-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.button { min-width: 8rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid var(--primary); border-radius: .65rem; background: var(--primary); color: var(--surface); font-weight: 850; text-decoration: none; }
.button:hover { background: var(--primary-strong); }
.button-secondary { border-color: var(--line); background: var(--surface); color: var(--ink-strong); }
.button-secondary:hover { background: #efe7d7; }
.brand-field { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 250, 240, .72); box-shadow: var(--shadow); }
.brand-field::before, .brand-field::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.brand-field::before { inset: 14%; }
.brand-field::after { inset: 29%; }
.brand-field strong { color: var(--primary); font: 900 clamp(5rem, 12vw, 9rem)/1 Georgia, "Times New Roman", serif; }
.brand-field span { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.brand-field span:nth-child(1) { top: 13%; right: 24%; }
.brand-field span:nth-child(2) { bottom: 19%; left: 17%; background: var(--sage); }
.brand-field span:nth-child(3) { top: 48%; right: 5%; background: #d6b85e; }
footer { width: min(1120px, calc(100% - 3rem)); margin: auto; padding: 1.25rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }

@media (max-width: 820px) {
  .home-page { grid-template-columns: 1fr; min-height: auto; padding: 3rem 0 4rem; }
  .brand { margin-bottom: 3rem; }
  .brand-field { width: min(480px, 88vw); justify-self: center; }
}
@media (max-width: 520px) {
  .home-page, footer { width: min(100% - 2rem, 1120px); }
  .home-page { gap: 2.5rem; padding-top: 1.5rem; }
  .brand { margin-bottom: 2.5rem; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
  .home-actions { display: grid; }
  .button { width: 100%; }
}