:root {
  --slate: #2F3A3D;
  --warm: #F8F4ED;
  --neutral: #A49E95;
  --orange: #C65F3F;
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html {
  background: var(--warm);
  color: var(--slate);
  font-family: Montserrat, Arial, sans-serif;
  line-height: 1.5;
}

body { margin: 0; }

.site { overflow: hidden; }

a {
  color: inherit;
  text-decoration-color: rgba(198, 95, 63, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover, a:focus-visible { color: var(--orange); }

h1, h2, p { margin: 0; }

.eyebrow {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: grid;
  min-height: clamp(560px, 78vh, 820px);
  background: var(--slate);
  color: var(--warm);
  border-top: 5px solid var(--neutral);
  border-bottom: 5px solid var(--orange);
}

.hero__inner {
  position: relative;
  display: grid;
  align-content: center;
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) 0;
}

.hero__wordmark {
  margin: 0 0 clamp(34px, 5vw, 56px);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.hero__rule {
  width: min(280px, 40vw);
  height: 2px;
  margin-bottom: clamp(26px, 4vw, 42px);
  background: var(--orange);
}

.hero__title {
  max-width: none;
  font-family: Newsreader, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: normal;
}

.hero__lede {
  margin: clamp(26px, 4vw, 40px) 0 0;
  max-width: 720px;
  color: rgba(248, 244, 237, 0.82);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 400;
}

/* ---------- EXPERIENCE ---------- */
.experience { background: var(--warm); }

.experience__inner {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 0 clamp(60px, 7vw, 96px);
}

.experience-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 7vw, 92px);
}

.experience-grid__label { align-self: start; }

.experience__title {
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 560px;
  font-family: Newsreader, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 2.8vw, 3rem);
  line-height: 1.08;
}

.experience__copy {
  display: grid;
  gap: 22px;
  max-width: 660px;
  color: rgba(47, 58, 61, 0.86);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
}

/* ---------- CONTACT ---------- */
.contact { background: var(--warm); }

.contact .eyebrow { margin-bottom: clamp(16px, 2vw, 28px); }

.contact__inner {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 84px) 0 clamp(72px, 9vw, 112px);
  border-top: 1px solid rgba(164, 158, 149, 0.55);
}

.contact__title {
  margin: 0 0 clamp(30px, 4vw, 44px);
  max-width: 640px;
  font-family: Newsreader, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.3vw, 2.4rem);
  line-height: 1.12;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 36px;
}

.contact-links a {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .experience-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}