:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", Arial, sans-serif;
  --background: oklch(0.965 0.003 100);
  --foreground: oklch(0.292 0.051 153);
  --forest: oklch(0.302 0.059 151);
  --paper: oklch(0.919 0.023 88);
  --hero: oklch(0.97 0.01 90);
  --hero-overlay: oklch(0.11 0.02 30 / 0.36);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-size: inherit; font-weight: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.page-main { overflow: hidden; background: var(--background); color: var(--foreground); }
.bg-forest { background: var(--forest); color: var(--paper); }
.mt-7 { margin-top: 1.75rem; }
.mt-10 { margin-top: 2.5rem; }

.section-shell { width: min(100% - 3rem, 1320px); margin-inline: auto; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 6vw, 6.1rem);
  font-weight: 400;
  line-height: 0.82;
}
.body-copy {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.24em;
}
.image-panel { border-radius: 13px; object-fit: cover; }
.bg-forest .section-title { color: var(--paper); }

.brand-mark { height: 1.75rem; width: auto; }
.brand-mark--light { filter: brightness(0) invert(1); opacity: 0.8; }

/* Hero */
.hero-section { position: relative; width: 100%; min-height: 690px; overflow: hidden; color: var(--hero); }
.hero-photo, .hero-photo img, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { width: 102%; max-width: none; object-fit: cover; object-position: 50% 70%; }
.hero-shade { background: var(--hero-overlay); }
.hero-header {
  position: relative; z-index: 2; display: flex;
  width: min(100% - 7rem, 1260px); margin-inline: auto; padding-top: 2.25rem;
  align-items: center; justify-content: space-between;
}
.hero-header-mark { display: block; }
.hero-nav { display: flex; align-items: center; gap: 2.5rem; font-size: 12px; font-weight: 400; letter-spacing: 0.22em; }
.hero-nav a { transition: opacity 180ms ease; }
.hero-nav a:hover { opacity: 0.72; }
.hero-brand {
  position: absolute; z-index: 2; top: 45%; left: 50%; display: flex;
  transform: translate(-50%, -50%); flex-direction: column; align-items: center;
}
.hero-brand h1 {
  margin: 0.35rem 0 0; font-family: var(--font-display); font-size: 128px; font-weight: 400; line-height: 0.82;
}

/* Split sections */
.split { display: grid; align-items: center; gap: 2.5rem; }
.split--about { padding-block: 4rem; }
.split--second { padding-bottom: 4rem; }
.split--purpose { padding-block: 4rem; }
.split-img { width: 100%; max-width: 520px; justify-self: center; }
.ratio-88 { aspect-ratio: .88; }
.ratio-square { aspect-ratio: 1; }
.split-text--480 { max-width: 480px; }
.split-text--510 { max-width: 510px; }
.split-text--520 { max-width: 520px; }
.about-title { margin-top: 3rem; text-align: center; }

/* Projects */
.projects { padding-block: 4rem; }
.projects-copy { max-width: 1140px; }
.gallery { margin-top: 3rem; display: grid; align-items: center; gap: 1.25rem; }
.gallery img { width: 100%; }
.gallery figcaption { margin-top: 0.75rem; font-size: 12px; line-height: 1.25; }
.gallery-arrow {
  display: none; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--forest); color: var(--paper);
}
.projects-closing { margin-top: 3rem; }

/* Contact */
.contact { display: grid; }
.contact-text { display: flex; min-height: 520px; align-items: center; padding: 5rem 2rem; }
.contact-inner { max-width: 500px; }
.contact-copy { margin-top: 4rem; }
.contact-button {
  display: inline-flex; margin-top: 2.5rem; border-radius: 6px; background: var(--paper);
  padding: 0.75rem 1.5rem; font-family: var(--font-display); font-size: 15px; line-height: 1.5;
  color: var(--forest); transition: opacity 150ms ease;
}
.contact-button:hover { opacity: 0.9; }
.contact-img { height: 100%; min-height: 480px; width: 100%; object-fit: cover; }

a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

@media (min-width: 768px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
  .split--about { padding-block: 9rem; }
  .split--second { padding-bottom: 9rem; }
  .split--purpose { padding-block: 8rem; }
  .about-title { text-align: left; }
  .projects { padding-block: 8rem; }
  .gallery { margin-top: 5rem; grid-template-columns: 32px 1fr 1fr 1fr 32px; }
  .gallery-arrow { display: flex; }
  .projects-closing { margin-top: 5rem; }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-text { min-height: 650px; padding-inline: max(3rem, calc((100vw - 1320px) / 2 + 3rem)); }
}

@media (min-width: 1024px) {
  .split-text { padding-left: 3rem; }
  .projects-intro, .projects-closing { padding-inline: 3rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .body-copy { font-size: 14px; letter-spacing: 0.2em; }
}

@media (max-width: 767px) {
  .body-copy { font-size: 12px; letter-spacing: 0.18em; }
  .gallery figcaption { font-size: 12px; }
  .section-shell { width: min(100% - 2.5rem, 560px); }
  .hero-section { min-height: clamp(520px, 125vw, 690px); }
  .hero-photo img { object-position: center; }
  .hero-header { width: calc(100% - 2.5rem); padding-top: 1.75rem; }
  .hero-header-mark img { height: 1.15rem; }
  .hero-nav { gap: 1rem; font-size: 10px; letter-spacing: 0; }
  .hero-nav a, .hero-header-mark { padding: 15px 0.5rem; margin: -15px -0.5rem; }
  .hero-brand { top: 47%; }
  .hero-brand h1 { margin-top: 0.55rem; font-size: clamp(74px, 17vw, 128px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}