:root {
  --navy: #07192e;
  --ivory: #faf7f3;
  --white: #fffdfa;
  --slate: #344255;
  --bronze: #a76a36;
  --line: #d9d9da;
  --gutter: clamp(1.25rem, 5.5vw, 7rem);
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--navy); font: 1rem/1.5 system-ui, sans-serif; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--bronze); outline-offset: 4px; }
.skip { position: absolute; left: 1rem; top: 1rem; z-index: 2; background: white; padding: .75rem; transform: translateY(-200%); }
.skip:focus { transform: none; }
.masthead { padding: .75rem var(--gutter); display: flex; flex-direction: column; gap: .5rem; }
.wordmark { display: inline-flex; align-items: center; align-self: flex-start; gap: .85rem; text-decoration: none; white-space: nowrap; text-transform: uppercase; letter-spacing: .19em; font: 1.55rem var(--serif); letter-spacing: .19em; }
.monogram { font-size: 2.6rem; line-height: 1; padding-right: .65rem; border-right: 1px solid var(--slate); background: linear-gradient(108deg,var(--navy) 47%,var(--bronze) 48%); background-clip: text; color: transparent; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
nav a, .cta { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; font-weight: 600; }
nav [aria-current] { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: .6rem; }
.contact, .cta { background: var(--navy); color: white; padding: .55rem 1.15rem; border-radius: 2rem; }
.hero { position: relative; background: var(--ivory); display: flex; flex-direction: column; }
.hero picture { order: 1; }
.hero img { display: block; width: 100%; height: auto; }
.intro { position: relative; padding: 2.5rem var(--gutter); }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .25em; font-weight: 500; }
.eyebrow::after { content: ""; display: block; width: 5.5rem; margin-top: .9rem; border-bottom: 2px solid var(--bronze); }
h1 { margin: 0; font: bold clamp(2.6rem, 5.5vw, 6rem)/.99 var(--serif); letter-spacing: -.045em; }
.description { color: var(--slate); font-size: clamp(1rem, 1.43vw, 1.5rem); max-width: 38rem; margin: 1.35rem 0 1.75rem; }
.cta { border-radius: .45rem; justify-content: center; gap: 1.5rem; padding: .7rem 1.5rem; }
.pillars { padding: 1.25rem var(--gutter); display: grid; }
.pillars article { display: grid; grid-template-columns: 2.75rem minmax(0,1fr); gap: 1rem; padding: 1.1rem 0; }
.pillars article + article { border-top: 1px solid var(--line); }
.pillars svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillars h2 { margin: 0 0 .35rem; font: bold clamp(1.35rem,1.85vw,2rem)/1.16 var(--serif); letter-spacing: -.03em; }
.pillars p { margin: 0; color: var(--slate); font-size: clamp(1rem,1.2vw,1.25rem); }
footer { border-top: 1px solid var(--line); padding: 1.25rem var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
@media (min-width: 701px) {
  .hero { min-height: clamp(29rem,36.75vw,49rem); justify-content: center; }
  .hero picture { position: absolute; inset: 0; }
  .hero img { height: 100%; object-fit: cover; object-position: right 44%; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg,var(--ivory) 19%,rgba(250,247,243,.97) 31%,rgba(250,247,243,.72) 42%,transparent 59%); }
  .intro { z-index: 1; max-width: 58%; padding-block: clamp(3rem,4.6vw,5rem); }
  .description { max-width: 35ch; }
  .pillars { grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: clamp(2rem,3.2vw,4rem); }
  .pillars article { grid-template-columns: clamp(2rem,4vw,4.5rem) minmax(0,1fr); padding: .45rem clamp(.85rem,2.4vw,2.6rem); }
  .pillars article:first-child { padding-left: .6rem; }
  .pillars article:last-child { padding-right: 0; }
  .pillars article + article { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 1050px) {
  .masthead { flex-direction: row; align-items: center; justify-content: space-between; min-height: clamp(4.5rem,5.65vw,6rem); }
  .wordmark { align-self: center; font-size: clamp(1.65rem,2.5vw,2.7rem); }
  .monogram { font-size: clamp(2.8rem,4vw,4.5rem); }
  nav { gap: 0 clamp(1rem,2.35vw,2.75rem); }
  .eyebrow { font-size: clamp(1rem,1.8vw,1.9rem); margin-bottom: 1.55rem; }
  .eyebrow::after { width: 7.8rem; }
  .cta { padding: .95rem 2.5rem; }
}
@media (min-width: 1050px) {
  .intro { padding-block: clamp(3rem,4.3vw,4.5rem); }
  .description { max-width: 38rem; }
  .cta { min-height: 3.75rem; min-width: 14.5rem; font-size: 1.125rem; }
  nav a { font-size: clamp(1rem,1.18vw,1.2rem); }
}
@media (max-width: 700px) {
  .masthead nav { flex-wrap: nowrap; overflow-x: auto; padding: .25rem .25rem .6rem; }
}

.interior {
  min-height: 60vh;
  padding: clamp(3rem, 7vw, 7rem) var(--gutter);
  background: var(--ivory);
}
.interior p { max-width: 58ch; color: var(--slate); }
.interior .lede { font-size: clamp(1.125rem, 2vw, 1.45rem); }
.interior h2 { margin: 2rem 0 .5rem; font: bold 1.6rem var(--serif); }
.interior h2 + p { margin-top: 0; }