:root {
  --olive: #7f8156;
  --olive-dark: #56583b;
  --olive-deep: #292b22;
  --cream: #f4f1e5;
  --paper: #faf9f4;
  --ink: #1e201a;
  --muted: #6c6e5d;
  --line: rgba(30, 32, 26, .14);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.site-header {
  position: sticky; top: 0; z-index: 20; height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; background: rgba(250,249,244,.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.brand img { width: 64px; height: 64px; object-fit: contain; }
nav { display: flex; gap: clamp(18px,3vw,42px); }
nav a {
  text-decoration: none; font-size: .75rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase; opacity: .72;
}
nav a:hover { opacity: 1; }

.section { width: min(var(--max),90vw); margin: 0 auto; padding: clamp(88px,12vw,150px) 0; }
.hero {
  min-height: calc(100vh - 78px); display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr);
  align-items: center; gap: 8vw; position: relative;
}
.hero-copy { max-width: 800px; }
.eyebrow {
  margin: 0 0 22px; color: var(--olive-dark); font-size: .7rem;
  line-height: 1.2; font-weight: 850; letter-spacing: .2em;
}
h1,h2,h3 { margin: 0; line-height: 1.02; letter-spacing: -.035em; }
h1 { font-size: clamp(3.6rem,8vw,7.5rem); font-weight: 780; max-width: 950px; }
h1 em,h2 em { color: var(--olive); font-style: normal; }
.lede {
  max-width: 720px; margin: 34px 0 0; font-size: clamp(1.05rem,1.5vw,1.3rem); color: #4d4f43;
}
.hero-rule { width: 120px; height: 5px; margin: 42px 0 16px; background: var(--olive); }
.microcopy {
  margin: 0; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-weight: 700;
}
.hero-mark {
  width: min(32vw,350px); aspect-ratio: 1; justify-self: end; border-radius: 50%;
  background: var(--olive); color: var(--cream); position: relative; display: grid;
  place-items: center; box-shadow: 28px 28px 0 rgba(127,129,86,.12); overflow: hidden;
}
.hero-mark::before,.hero-mark::after {
  content:""; position:absolute; border:1px solid rgba(244,241,229,.28); border-radius:50%;
}
.hero-mark::before { inset:12%; } .hero-mark::after { inset:28%; }
.hero-mark span {
  font-family: Georgia,serif; font-size: clamp(4rem,8vw,7rem);
  font-weight: 900; letter-spacing: -.12em; transform: translateX(-.08em);
}
.crosshair { position:absolute; width:100%; height:1px; background:rgba(244,241,229,.2); }
.crosshair::after {
  content:""; position:absolute; left:50%; top:50%; width:1px; height:100vw;
  background:rgba(244,241,229,.2); transform:translate(-50%,-50%);
}

.section-heading { max-width: 820px; }
.section-heading h2 { font-size: clamp(2.7rem,5vw,5.3rem); font-weight: 760; }
.section-heading > p:last-child {
  margin:28px 0 0; color:var(--muted); font-size:1.05rem; max-width:700px;
}

.capability-grid {
  margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.capability { padding:34px 34px 12px 0; border-right:1px solid var(--line); }
.capability:not(:first-child) { padding-left:34px; }
.capability:last-child { border-right:0; }
.number { color:var(--olive); font-size:.7rem; font-weight:850; letter-spacing:.15em; }
.capability h3 { margin-top:38px; font-size:1.8rem; }
.capability p { margin:20px 0 26px; color:var(--muted); }
.capability ul {
  padding:0; margin:0; list-style:none; border-top:1px solid var(--line);
}
.capability li {
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:.82rem; font-weight:650;
}

.dark-panel {
  width:100%; max-width:none; padding-left:max(5vw,calc((100vw - var(--max))/2));
  padding-right:max(5vw,calc((100vw - var(--max))/2));
  background:var(--olive-deep); color:var(--cream);
}
.dark-panel .eyebrow { color:#c4c69c; }
.dark-panel .section-heading > p:last-child { color:#b9b9a9; }
.principles { margin-top:72px; border-top:1px solid rgba(244,241,229,.18); }
.principle {
  display:grid; grid-template-columns:90px 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid rgba(244,241,229,.18);
}
.principle > span { color:#a8aa78; font-size:.75rem; font-weight:800; letter-spacing:.1em; }
.principle h3 { font-size:1.45rem; }
.principle p { max-width:720px; margin:12px 0 0; color:#b8b8aa; }

.timeline { margin-top:70px; border-top:1px solid var(--line); }
.timeline-item {
  display:grid; grid-template-columns:240px 1fr; gap:40px;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.timeline-label {
  color:var(--olive-dark); font-size:.7rem; line-height:1.3;
  font-weight:850; letter-spacing:.16em;
}
.timeline h3 { font-size:1.7rem; }
.timeline p { max-width:760px; margin:14px 0 0; color:var(--muted); }

.closing { padding-bottom:100px; }
.closing-grid {
  display:grid; grid-template-columns:1.1fr .9fr; gap:10vw; align-items:end;
  padding:70px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.closing h2 { font-size:clamp(3rem,6vw,6.2rem); }
.closing-grid > p { margin:0; color:var(--muted); font-size:1.05rem; max-width:460px; }

.site-footer {
  width:min(var(--max),90vw); margin:0 auto; padding:28px 0 34px;
  display:flex; justify-content:space-between; gap:20px; color:var(--muted);
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}

@media (max-width:800px) {
  .site-header { height:68px; } .brand img { width:56px; height:56px; } nav { display:none; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:55px; padding-top:90px; }
  .hero-mark { width:min(60vw,280px); justify-self:start; }
  .capability-grid { grid-template-columns:1fr; }
  .capability,.capability:not(:first-child) {
    padding:34px 0; border-right:0; border-bottom:1px solid var(--line);
  }
  .capability:last-child { border-bottom:0; }
  .timeline-item { grid-template-columns:1fr; gap:14px; }
  .closing-grid { grid-template-columns:1fr; gap:40px; }
  .site-footer { flex-direction:column; }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-copy,.hero-mark { animation:rise .8s ease-out both; }
  .hero-mark { animation-delay:.12s; }
}
@keyframes rise {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}