*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;background:var(--paper);color:var(--ink)}
.wrap{max-width:1220px;margin:auto;padding:0 64px}

/* NAV */
nav{
  height:76px;position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(15,45,82,.97);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{
  font-family:"Newsreader",serif;color:#fff;text-decoration:none;
  font-size:1.28rem;letter-spacing:.18em;text-transform:uppercase
}

.nav-links a{
  color:rgba(255,255,255,.72);text-decoration:none;text-transform:uppercase;
  letter-spacing:.12em;font-size:.7rem;font-weight:500
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-contact{
  border:1px solid rgba(155,197,186,.7);
  padding:10px 18px!important;color:#fff!important
}

/* HERO */
.hero{
  padding:158px 0 92px;background:var(--navy);
  position:relative;overflow:hidden
}
.hero:before{
  content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  right:-190px;top:20px;border:1px solid rgba(155,197,186,.12)
}
.hero-inner{position:relative;z-index:2}
.eyebrow{
  color:var(--sage-light);
  text-transform:uppercase;font-weight:600;margin-bottom:24px
}
.hero h1{
  max-width:900px;font-family:"Newsreader",serif;
  font-size:clamp(3rem,5vw,4.8rem);line-height:1.06;
  font-weight:400;color:#fff;letter-spacing:-.025em
}
.hero h1 em{color:var(--sage-light);font-weight:400}
.hero-copy{
  max-width:700px;margin-top:30px;color:rgba(255,255,255,.64);
  font-size:1rem;line-height:1.9;font-weight:300
}

/* FEATURE */
.feature{padding:96px 0}
.feature-grid{
  display:grid;grid-template-columns:1.35fr .65fr;gap:80px;
  padding-bottom:78px;border-bottom:1px solid var(--line)
}
.post-meta{
  font-size:.75rem;color:var(--sage);letter-spacing:.04em;
  margin-bottom:16px;font-weight:500
}
.feature h2{
  font-family:"Newsreader",serif;font-size:clamp(2.25rem,3.5vw,3.35rem);
  line-height:1.12;color:var(--navy);font-weight:400;letter-spacing:-.02em
}
.body-copy{margin-top:26px;max-width:720px}
.body-copy p{
  color:var(--text);font-size:.96rem;line-height:1.9;font-weight:300
}
.body-copy p+p{margin-top:18px}
.read-link{
  display:inline-block;margin-top:28px;color:var(--sage);text-decoration:none;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid rgba(74,124,111,.35);padding-bottom:3px
}

/* SIDEBAR */
.sidebar{border-left:1px solid var(--line);padding-left:42px}
.sidebar-label{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--steel);font-weight:600;margin-bottom:28px
}
.outsource-item{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.outsource-item:last-child{border-bottom:0}
.outsource-item strong{
  display:block;font-family:"Newsreader",serif;font-size:1.2rem;
  color:var(--navy);font-weight:500;margin-bottom:5px
}
.outsource-item span{font-size:.84rem;color:#69727A;line-height:1.6;font-weight:300}

/* NOTEBOOK */
.notebook{padding:0 0 100px}
.section-label{
  text-transform:uppercase;
  color:var(--sage);font-weight:600;margin:54px 0 28px
}
.notes{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.note{padding:30px 30px 34px 0}
.note+.note{border-left:1px solid var(--line);padding-left:30px}
.note-type{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);font-weight:600;margin-bottom:13px
}
.note h3{
  font-family:"Newsreader",serif;font-size:1.55rem;line-height:1.25;
  color:var(--navy);font-weight:500
}
.note p{font-size:.85rem;line-height:1.75;color:#68717A;font-weight:300;margin-top:13px}

/* WHY THIS EXISTS */
.why{
  background:var(--warm);padding:92px 0;border-top:1px solid var(--line)
}
.why-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}
.why h2{
  font-family:"Newsreader",serif;font-size:clamp(2rem,3vw,2.9rem);
  line-height:1.18;color:var(--navy);font-weight:400
}
.why-copy p{font-size:.95rem;line-height:1.9;color:var(--text);font-weight:300}
.why-copy p+p{margin-top:18px}

/* CTA */
.cta{padding:90px 0;background:linear-gradient(135deg,var(--sage-dark),var(--sage))}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta h2{
  font-family:"Newsreader",serif;font-size:clamp(2rem,3vw,3rem);
  color:#fff;font-weight:400
}
.cta p{margin-top:10px;color:rgba(255,255,255,.76);font-size:.9rem}
.cta a{
  flex:none;border:1px solid rgba(255,255,255,.75);padding:15px 27px;
  color:#fff;text-decoration:none;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.13em;font-weight:600
}
.cta a:hover{background:#fff;color:var(--sage)}

/* FOOTER */
footer{background:#091F39;padding:64px 0 30px;color:#fff}
.footer-grid{display:grid;gap:55px}
.footer-logo{
  font-family:"Newsreader",serif;font-size:1.2rem;letter-spacing:.16em;
  text-transform:uppercase
}
.footer-tag{color:var(--sage-light);font-size:.75rem;margin-top:9px}
.footer-note{
  font-size:.76rem;line-height:1.75;color:rgba(255,255,255,.4);
  margin-top:18px;max-width:310px
}
.footer-col h4{
  color:var(--sage-light);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.18em;margin-bottom:17px
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a,.footer-col p{
  font-size:.77rem;color:rgba(255,255,255,.46);
  text-decoration:none;line-height:1.8
}
.footer-col a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);margin-top:45px;padding-top:25px;
  display:flex;justify-content:space-between
}
.footer-bottom p{font-size:.66rem;color:rgba(255,255,255,.25)}

@media(max-width:950px){
  .wrap{padding:0 30px}
  .nav-links{gap:45px}
  .sidebar{border-left:0;border-top:1px solid var(--line);padding:35px 0 0}
  .notes{grid-template-columns:1fr}
  .note,.note+.note{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}
  .note:last-child{border-bottom:0}
  .footer-grid{margin-top:28px}
  .footer-bottom{display:block}
  .footer-bottom p+p{margin-top:8px}
}