:root {
  color-scheme: light;
  --forest: #1F3A2E;
  --forest-soft: #B7C4AC;
  --ivory: #F6F4EF;
  --paper: #FFFEFA;
  --sage: #A7B59A;
  --sage-light: #dfe8da;
  --ember: #C76E4A;
  --line: rgba(246, 244, 239, 0.22);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--forest);
  color: var(--ivory);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.page-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 7vw, 108px) clamp(24px, 4vw, 48px);
  background: var(--forest);
}

.page-shell::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(31, 58, 46, 0.58), rgba(31, 58, 46, 0.78)), url("welcome-atmosphere-v2.png") center / cover no-repeat; background-blend-mode: normal, luminosity; opacity: 0.52; }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; object-fit: contain; }
.brand-wordmark { width: 74px; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.header-note, .site-footer { color: var(--forest-soft); font-size: 13px; letter-spacing: 0; }

.hero { display: flex; width: min(700px, 100%); flex-direction: column; align-items: flex-start; margin: auto 0; padding: clamp(76px, 13vh, 140px) 0 clamp(82px, 14vh, 150px); }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 8vw, 98px); font-weight: 400; letter-spacing: -0.06em; line-height: 0.95; }
.intro { max-width: 445px; margin: 38px 0 30px; color: var(--ivory); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; color: var(--ivory); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; }
.contact-link span { color: var(--ember); font-size: 20px; transition: transform 180ms ease; }
.contact-link:hover span, .contact-link:focus-visible span { transform: translate(3px, -3px); }
.contact-link:focus-visible { outline: 2px solid var(--ember); outline-offset: 8px; }

.site-footer { justify-content: space-between; }

@media (max-width: 600px) {
  .page-shell::before { opacity: 0.42; }
  .header-note { display: none; }
  .hero { padding-top: 24vh; }
  .site-footer { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; line-height: 1.4; }
}