@font-face {
  font-family: "ABC Prophet";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/abcprophet-regular.woff2") format("woff2");
}
@font-face {
  font-family: "ABC Prophet";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/abcprophet-regular-italic.woff2") format("woff2");
}
:root {
  --sand: #D9D4D1;
  --taupe: #BAB1AD;
  --mist: #AEC0C2;
  --teal: #098698;
  --teal-deep: #186663;
  --navy: #002037;
  --ink: #3D444B;
  --slate: #505A63;
  --wood: #8C7361;
  --bronze: #088669;
  --paper: #f4efe9;
  --white: #fbf8f4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  color: var(--sand);
  background: var(--navy);
  line-height: 1.65;
  letter-spacing: 0.01em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.arc {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.kicker {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--teal);
}
h1, h2, h3 {
  font-family: "ABC Prophet", "Cormorant Garamond", serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0 0 16px;
}
h1 .arc {
  font-family: "ABC Prophet", serif;
  letter-spacing: 0.06em;
}
h1 { font-size: clamp(42px, 7vw, 92px); }
h2 { font-size: clamp(32px, 4.5vw, 58px); }
h3 { font-size: 28px; }
p { margin: 0 0 16px; }
.lede { font-size: 18px; color: var(--mist); max-width: 42em; }

header {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  background: linear-gradient(to bottom, rgba(0,32,55,.72), transparent);
  mix-blend-mode: normal;
}
header .word {
  font-size: 12px;
  color: var(--sand);
}
header .word span { display: block; font-size: 10px; letter-spacing: 0.28em; opacity: .7; margin-top: 4px; }
header nav { display: flex; gap: 22px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
header nav a { opacity: .78; }
header nav a:hover { opacity: 1; color: var(--teal); }
.seal {
  width: 64px; height: 64px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(174,192,194,.25);
}
.menu-toggle { display: none; background: none; border: 0; color: var(--sand); font-size: 22px; }

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: end start;
  padding: 12vh 8vw 10vh;
  overflow: hidden;
}
.hero img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,32,55,.78) 0%, rgba(0,32,55,.35) 55%, rgba(0,32,55,.15) 100%),
    linear-gradient(to top, rgba(0,32,55,.7), transparent 42%);
}
.hero-copy { position: relative; z-index: 1; max-width: 760px; }
.hero-copy h1 { color: var(--white); }
.hero-copy p { font-size: 18px; max-width: 28em; color: var(--sand); }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.cta {
  display: inline-block;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--white);
  padding: 14px 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}
.cta.ghost { background: transparent; color: var(--sand); border-color: rgba(217,212,209,.45); }
.cta:hover { filter: brightness(1.08); }

.arc-line {
  position: absolute; left: 8vw; right: 8vw; bottom: 36px; z-index: 1;
  height: 1px; background: rgba(174,192,194,.35);
}
.arc-line i {
  position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
}

section { padding: 100px 8vw; }
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.split.reverse { grid-template-columns: .95fr 1.05fr; }
.split.reverse .copy { order: 2; }
.split img {
  width: 100%; height: 72vh; object-fit: cover;
  border-radius: 2px;
  filter: grayscale(.12) contrast(1.05);
}
.paper {
  background: var(--paper);
  color: var(--ink);
}
.paper .kicker { color: var(--teal-deep); }
.paper .lede, .paper p { color: var(--slate); }
.navy { background: var(--navy); }
.wood-band {
  background:
    linear-gradient(180deg, rgba(0,32,55,.55), rgba(0,32,55,.72)),
    url("../assets/wood.jpg") center/cover;
}

.houses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.house {
  display: block;
  padding: 28px 24px 32px;
  border: 1px solid rgba(174,192,194,.22);
  min-height: 280px;
  background: rgba(0,32,55,.35);
  transition: border-color .25s, transform .25s;
}
.house:hover { border-color: var(--teal); transform: translateY(-4px); }
.house h3 { color: var(--white); margin-top: 18px; }
.house p { color: var(--mist); font-size: 15px; }
.house .go { color: var(--teal); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-family: "Montserrat", sans-serif; }

.quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.quote blockquote {
  font-family: "ABC Prophet", "Cormorant Garamond", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.45;
  font-style: italic;
  color: var(--sand);
  margin: 0 0 22px;
}
.quote cite { font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }

.founder {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.founder img {
  width: 100%; height: 78vh; object-fit: cover; object-position: center 18%;
  filter: grayscale(.35) contrast(1.08);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 36px 0 8px;
}
.stat b {
  display: block;
  font-family: "ABC Prophet", "Cormorant Garamond", serif;
  font-size: 32px;
  color: var(--teal);
  font-weight: 400;
}
.stat span { font-size: 13px; color: var(--mist); }

footer {
  padding: 48px 8vw 36px;
  border-top: 1px solid rgba(174,192,194,.15);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--mist);
}
.socials { display: flex; gap: 16px; }
.socials a {
  width: 36px; height: 36px; border: 1px solid rgba(174,192,194,.3);
  display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; letter-spacing: 0;
}
.socials a:hover { border-color: var(--teal); color: var(--teal); }

@media (max-width: 900px) {
  header nav { display: none; }
  .menu-toggle { display: block; }
  .split, .split.reverse, .founder { grid-template-columns: 1fr; }
  .split.reverse .copy { order: 0; }
  .split img, .founder img { height: 52vh; }
  .houses, .stats { grid-template-columns: 1fr; }
  section { padding: 72px 6vw; }
  .hero { padding: 18vh 6vw 12vh; }
}