:root{
  --black:#000000;
  --charcoal:#58524f;
  --grey:#8f8a86;
  --mid-grey:#b8b3af;
  --light-grey:#d7d3d0;
  --offwhite:#efebe8;
  --paper:#f8f6f3;
  --white:#ffffff;

  --pink:#dfc1c3;
  --yellow:#f1dfa9;
  --teal:#acc7c8;
  --magenta:#a10083;
  --orange:#ff5b00;
  --blue:#1985c7;

  --text:#0b0b0b;
  --muted:#514c49;
  --max:1400px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--offwhite);
  color:var(--text);
  line-height:1.45;
}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(var(--max),calc(100% - 64px));margin:0 auto}

.topbar{position:sticky;top:0;z-index:100;background:var(--black);color:var(--white)}
.topbar-inner{
  min-height:92px;
  width:min(1540px,calc(100% - 48px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand{display:flex;align-items:center;gap:28px;text-decoration:none;color:#fff}
.brand img{width:96px;height:54px;object-fit:contain}
.brand span{font-size:14px;font-weight:700;color:#fff}
.topnav{display:flex;align-items:center;gap:58px}
.topnav a{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  font-weight:700;
  padding:37px 0 33px;
  border-bottom:3px solid transparent;
}
.topnav a:hover{border-bottom-color:#fff}

.hero{background:var(--offwhite);padding-bottom:96px}
.hero-band,.section-band{background:var(--charcoal);color:#fff}
.hero-band-inner,.section-band-inner{
  min-height:72px;
  display:flex;
  align-items:center;
}
.hero-band span,.section-band span{
  font-size:13px;
  letter-spacing:.12em;
  font-weight:700;
}
.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  gap:96px;
  align-items:end;
  padding-top:88px;
}
.hero-copy{max-width:920px}
.kicker,.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  margin:0 0 18px;
  text-transform:uppercase;
}
.kicker{color:var(--magenta)}
.eyebrow{margin-bottom:20px}
.accent-magenta{color:var(--magenta)}
.accent-orange{color:var(--orange)}
.accent-blue{color:var(--blue)}
.accent-grey{color:var(--grey)}
h1{
  font-size:clamp(62px,7vw,108px);
  line-height:.92;
  letter-spacing:-.055em;
  margin:0 0 30px;
  font-weight:700;
}
.hero-lead{font-size:21px;max-width:820px;color:var(--charcoal);margin:0 0 34px}
.hero-meta{margin:0;font-size:13px;color:var(--muted)}
.hero-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#fff;padding:4px 7px}
.hero-aside{
  align-self:center;
  padding-top:24px;
}
.hero-points{
  border-top:1px solid var(--grey);
  border-bottom:1px solid var(--light-grey);
  background:
    linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 100%),
    repeating-linear-gradient(to right,
      rgba(88,82,79,.08) 0px, rgba(88,82,79,.08) 74px,
      rgba(255,255,255,0) 74px, rgba(255,255,255,0) 132px);
}
.hero-point{
  padding:22px 6px;
  border-bottom:1px solid var(--light-grey);
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  align-items:start;
}
.hero-point:last-child{border-bottom:0}
.hero-point-number{font-size:18px;font-weight:700;color:var(--grey)}
.hero-point-copy h3{margin:0 0 6px;font-size:28px;line-height:1.04;letter-spacing:-.03em}
.hero-point-copy p{margin:0;color:var(--muted);font-size:18px}

.section{padding:0 0 110px}
.section-content{padding-top:72px}
.section-heading{margin-bottom:58px}
.split-heading{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:76px;
  align-items:end;
}
.section-heading h2,.story-intro h2{
  font-size:clamp(46px,5.2vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:700;
  margin:0;
}
.section-heading>p:last-child{font-size:19px;color:var(--muted);margin:0;max-width:720px}

.section-offer{background:var(--white)}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--charcoal);
  border-bottom:1px solid var(--charcoal);
}
.offer-card{
  min-height:380px;
  padding:34px 38px 38px 0;
  border-right:1px solid var(--light-grey);
  background:#fff;
}
.offer-card:not(:first-child){padding-left:38px}
.offer-card:last-child{border-right:0;padding-right:0}
.offer-number{font-size:44px;font-weight:300;line-height:1;color:var(--magenta);display:block;margin-bottom:34px}
.offer-card:nth-child(2) .offer-number{color:var(--blue)}
.offer-card:nth-child(3) .offer-number{color:var(--orange)}
.offer-card h3{font-size:30px;line-height:1.04;margin:0 0 20px;font-weight:700;max-width:330px}
.offer-card p{color:var(--muted);margin:0 0 22px}
.offer-card strong{display:block;margin-top:34px;margin-bottom:8px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}

.section-origin{background:var(--offwhite)}
.origin-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:92px;align-items:start}
.story-intro h2{margin-bottom:26px}
.big-copy{font-size:22px;line-height:1.5;color:var(--muted);max-width:620px;margin:0}
.story-list{border-top:1px solid var(--charcoal)}
.story-item{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:22px;
  padding:28px 0 26px;
  border-bottom:1px solid var(--light-grey);
}
.story-item b{font-size:22px;font-weight:400;line-height:1;color:var(--charcoal)}
.story-item:nth-child(1) b{color:var(--orange)}
.story-item:nth-child(2) b{color:var(--magenta)}
.story-item:nth-child(3) b{color:var(--blue)}
.story-item h3{font-size:28px;line-height:1.1;letter-spacing:-.03em;margin:0 0 8px}
.story-item p{margin:0;color:var(--muted);font-size:18px;max-width:640px}

.section-team{background:var(--white)}
.team-heading{margin-bottom:64px}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.person{
  background:#fff;
  border:1px solid var(--light-grey);
}
.person img{
  width:100%;
  aspect-ratio:4/4.6;
  object-fit:cover;
}
.person-body{padding:22px 22px 24px}
.person h3{
  font-size:20px;
  line-height:1.06;
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.role{
  font-size:14px;
  font-weight:700;
  margin:0 0 14px;
}
.person:nth-child(1) .role,.person:nth-child(6) .role{color:var(--magenta)}
.person:nth-child(2) .role,.person:nth-child(7) .role{color:var(--blue)}
.person:nth-child(3) .role,.person:nth-child(8) .role{color:var(--orange)}
.person:nth-child(4) .role,.person:nth-child(9) .role{color:var(--charcoal)}
.person:nth-child(5) .role,.person:nth-child(10) .role{color:var(--grey)}
.person p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;min-height:150px}
.tags{
  margin-top:16px;
  font-size:13px;
  color:var(--charcoal);
  line-height:1.5;
}
.tag{display:inline}
.tag:not(:last-child)::after{content:" · "; color:var(--mid-grey)}

.site-footer{background:var(--black);color:#fff;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.footer-title{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer-note{font-size:13px;color:#d9d9d9}

@media(max-width:1240px){
  .hero-layout,.split-heading,.origin-layout{grid-template-columns:1fr;gap:46px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:980px){
  .topbar-inner{align-items:flex-start;flex-direction:column;min-height:unset;padding:18px 0 12px}
  .topnav{gap:32px;flex-wrap:wrap}
  .offer-grid{grid-template-columns:1fr;border-bottom:0}
  .offer-card{padding:28px 0;border-right:0;border-bottom:1px solid var(--light-grey);min-height:0}
  .offer-card:not(:first-child){padding-left:0}
  .offer-card:last-child{border-bottom:1px solid var(--charcoal)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .wrap,.topbar-inner{width:min(100% - 28px,var(--max))}
  .topnav{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .hero{padding-bottom:60px}
  .hero-layout{padding-top:58px;gap:40px}
  h1{font-size:clamp(50px,15vw,76px)}
  .section{padding-bottom:80px}
  .section-content{padding-top:52px}
  .hero-point{grid-template-columns:54px 1fr}
  .hero-point-copy h3{font-size:24px}
  .story-item{grid-template-columns:56px 1fr}
  .team-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
