:root{
  --navy:#14213D;
  --charcoal:#2B2B2B;
  --warm-gray:#A8A296;
  --muted:#6B6558;
  --warm-white:#F7F5F0;
  --oxblood:#7A2E2E;
  --max-w: 760px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--warm-white);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Spine: fixed reading-progress indicator. Track is a faint warm-gray hairline;
   the navy fill grows with scroll position via --scroll-progress, set in script.js.
   Degrades gracefully with no JS to a static faint track. */
.spine{
  position:fixed; left:0; top:0;
  width:5px; height:100%;
  background:var(--warm-gray);
  opacity:0.3;
  z-index:50;
}
.spine::after{
  content:"";
  position:absolute; left:0; top:0; width:100%;
  height:var(--scroll-progress, 0%);
  background:var(--navy);
}

a{color:inherit;}
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:var(--warm-white);
  padding:12px 20px; z-index:100; text-decoration:none;
  font-size:14px; font-family:'Inter',sans-serif;
}
.skip-link:focus{ left:12px; top:12px; }
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 28px;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 28px;}

header{
  position:sticky; top:0;
  background:rgba(247,245,240,0.92);
  backdrop-filter:blur(6px);
  border-bottom:0.5px solid rgba(20,33,61,0.12);
  z-index:40;
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:20px 28px 20px 36px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:20px;
  letter-spacing:0.12em; color:var(--navy); text-decoration:none;
}
nav ul{
  list-style:none; display:flex; gap:32px; margin:0; padding:0;
}
nav a{
  font-size:14px; color:var(--charcoal); text-decoration:none;
  display:inline-block; padding:10px 0 3px;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease, color 0.2s ease;
}
nav a:hover{ border-color:var(--oxblood); color:var(--navy); }
nav a[aria-current="page"]{ border-color:var(--oxblood); color:var(--navy); }

section{ padding:88px 0; }
.hero{ padding-top:120px; padding-bottom:104px; }
.hero h1{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.06; letter-spacing:-0.01em;
  color:var(--navy); margin:0 0 28px;
  max-width:880px;
}
.hero p.sub{
  font-size:19px; color:var(--charcoal); max-width:560px;
  margin:0 0 40px;
}
.about-hero{ padding-top:100px; padding-bottom:64px; }

.cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:15px;
  color:var(--navy); text-decoration:none;
  border-bottom:2px solid var(--oxblood);
  padding-bottom:4px;
  transition:color 0.2s ease, gap 0.2s ease;
}
.cta:hover{ color:var(--oxblood); gap:14px; }
.cta svg{ width:16px; height:16px; }

.eyebrow{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--oxblood); font-weight:500; margin:0 0 14px; display:block;
}

h2.section-head, h1.section-head{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:clamp(26px, 3.8vw, 37px);
  color:var(--navy); line-height:1.16;
  margin:0;
}

section .wrap p, .body-col p{ font-size:17px; max-width:620px; }

.pullquote{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:23px; line-height:1.35; color:var(--navy);
  max-width:600px; margin:0 0 26px;
}

/* Editorial split: a fixed label column (eyebrow + headline) beside a
   running text column. Fills the width the single centered block used
   to leave empty, and gives every section the same structural logic:
   what this is, on the left; the argument, on the right. */
.split{
  display:grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap:56px;
  align-items:start;
}
.label-col{ position:sticky; top:120px; }
.label-col::before{
  content:"";
  display:block;
  width:32px; height:2px;
  background:var(--oxblood);
  margin-bottom:18px;
}
.body-col{ max-width:640px; }
.body-col p + p{ margin-top:20px; }

/* Alternating background wash for scroll rhythm, derived from the locked
   warm-gray token rather than a new color. */
.wash{ background:rgba(168,162,150,0.14); }

.values-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  margin-top:36px;
}
.values-grid-2{
  grid-template-columns:repeat(2, 1fr);
  max-width:644px; margin-left:auto; margin-right:auto; margin-top:32px;
}
.value-item{
  border-top:0.5px solid rgba(20,33,61,0.14); padding-top:16px;
}
.value-item:hover{ border-top-color:var(--oxblood); }
.value-name{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:17px;
  color:var(--navy); margin:0 0 8px;
}
.value-desc{ font-size:15px; color:var(--charcoal); }

.vignette{
  border-top:0.5px solid rgba(20,33,61,0.14);
  padding-top:24px; margin-top:32px;
}
.vignette:first-of-type{ margin-top:0; }
.vignette-label{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:15px;
  color:var(--navy); margin:0 0 10px;
}

.founder-name{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(26px, 4vw, 34px);
  color:var(--navy); margin:8px 0 0;
}

.close{
  background:var(--navy);
  color:var(--warm-white);
  text-align:left;
}
.close .wrap-wide{ padding-top:20px; padding-bottom:20px; }
.close h2{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(28px, 4.4vw, 42px);
  margin:0 0 28px; color:var(--warm-white);
}
.close .cta{ color:var(--warm-white); border-bottom-color:var(--warm-gray); }
.close .cta:hover{ color:var(--warm-gray); }

footer{
  padding:32px 0 48px;
  font-size:13px; color:var(--muted);
}
.footer-grid{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px;
}
.footer-copy{ text-align:left; }
.footer-social{ justify-self:center; }
footer a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
footer a:hover{ border-color:var(--muted); }
.social-icon{
  display:inline-flex; color:var(--muted); border-bottom:none !important;
  transition:color 0.2s ease;
}
.social-icon:hover{ color:var(--navy); }
.social-icon svg{ width:18px; height:18px; }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

a:focus-visible, .cta:focus-visible{
  outline:2px solid var(--oxblood); outline-offset:3px;
}

/* Tablet and phone: stack the split grid, tighten vertical rhythm */
@media (max-width:640px){
  section{ padding:60px 0; }
  .hero{ padding-top:88px; padding-bottom:60px; }
  .about-hero{ padding-top:72px; padding-bottom:48px; }
  .split{ grid-template-columns:1fr; gap:20px; }
  .label-col{ position:static; }
  .body-col{ max-width:none; }
  .values-grid, .values-grid-2{ grid-template-columns:1fr; max-width:none; }
  .footer-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px; }
  .footer-grid span[aria-hidden]{ display:none; }
}

/* Small phones: give the header room, keep nav from crowding the logo */
@media (max-width:420px){
  .nav-inner{ padding:16px 20px 16px 24px; }
  nav ul{ gap:16px; }
  .logo{ font-size:17px; letter-spacing:0.08em; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .spine::after{ transition:none; }
}