
:root{
  --ink:#14211b;
  --muted:#66746d;
  --green:#0b8f37;
  --green-2:#18b54d;
  --forest:#082f24;
  --forest-2:#051f19;
  --blue:#0f5ea8;
  --cream:#f3f0e8;
  --soft:#f5f7f4;
  --line:rgba(15,47,35,.12);
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
.shell{width:min(1220px,calc(100% - 48px));margin-inline:auto}

.page-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0;
  background:linear-gradient(90deg,var(--green),#61d675);
  z-index:100;
}

.header{
  position:fixed;
  inset:0 0 auto;
  z-index:90;
  border-bottom:1px solid transparent;
  transition:.3s ease;
}
.header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-color:rgba(10,50,34,.08);
  box-shadow:0 10px 35px rgba(6,30,22,.08);
}
.header-inner{
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{
  width:205px;
  display:block;
  transition:.25s ease;
}
.header:not(.scrolled) .brand{
  background:rgba(255,255,255,.93);
  padding:8px 12px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.1);
}
.nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.nav a{
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  transition:.2s ease;
}
.header.scrolled .nav a{color:var(--ink)}
.nav a:hover{color:#8cf0a6}
.header.scrolled .nav a:hover{color:var(--green)}
.nav-button{
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
}
.header.scrolled .nav-button{
  border-color:rgba(7,58,38,.15);
  background:var(--forest);
  color:white!important;
}
.menu-button{
  display:none;
  width:44px;height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.menu-button span{
  position:absolute;
  width:24px;height:2px;
  left:10px;
  background:white;
  transition:.2s ease;
}
.header.scrolled .menu-button span{background:var(--ink)}
.menu-button span:first-child{top:17px}
.menu-button span:last-child{top:25px}

.hero{
  min-height:920px;
  position:relative;
  color:white;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:-5%;
  background:url("field-with-house-made-clouds.jpg") center/cover no-repeat;
  transform:scale(1.04);
  animation:slowZoom 18s ease-in-out infinite alternate;
}
@keyframes slowZoom{
  from{transform:scale(1.04)}
  to{transform:scale(1.11)}
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 28%,rgba(26,184,76,.16),transparent 27%),
    linear-gradient(90deg,rgba(2,30,22,.94) 0%,rgba(3,35,25,.83) 42%,rgba(4,28,20,.38) 74%,rgba(4,28,20,.22) 100%),
    linear-gradient(0deg,rgba(2,25,18,.72) 0%,transparent 55%);
}
.hero-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(to right,black 0%,transparent 78%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding-top:125px;
  padding-bottom:120px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:70px;
  align-items:end;
}
.hero-copy{max-width:860px}
.eyebrow{
  margin:0 0 18px;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#a7efb8;
}
.eyebrow.dark{color:var(--green)}
.eyebrow.light{color:#a7efb8}
.hero h1{
  margin:0;
  max-width:900px;
  font-size:clamp(58px,8vw,108px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:700;
}
.hero h1 em{
  font-family:"Libre Baskerville",serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.045em;
  color:#b9f1c7;
}
.hero-text{
  max-width:680px;
  margin:28px 0 0;
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.65;
  color:rgba(255,255,255,.82);
}
.hero-actions{
  margin-top:36px;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.button{
  min-height:54px;
  padding:0 24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:.25s ease;
}
.button.primary{
  background:#fff;
  color:var(--forest);
  box-shadow:0 14px 35px rgba(0,0,0,.14);
}
.button.primary:hover{
  transform:translateY(-2px);
  background:#effff2;
}
.text-button{
  padding-left:0;
  color:white;
}
.text-button:hover{color:#a7efb8}

.hero-note{
  align-self:end;
  margin-bottom:10px;
  padding:26px 26px 24px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(3,31,22,.62);
  backdrop-filter:blur(16px);
  border-radius:18px;
  box-shadow:0 20px 55px rgba(0,0,0,.18);
}
.note-label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#a7efb8;
  margin-bottom:9px;
  font-weight:800;
}
.hero-note strong{
  display:block;
  font-family:"Libre Baskerville",serif;
  font-size:23px;
  line-height:1.3;
  margin-bottom:8px;
}
.hero-note p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:30px;
  z-index:3;
  transform:translateX(-50%);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.6);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.2em;
}
.scroll-hint i{
  width:1px;height:36px;
  background:linear-gradient(to bottom,rgba(255,255,255,.1),rgba(255,255,255,.8));
}

.intro{
  padding:130px 0 120px;
  background:#fff;
}
.intro-grid{
  display:grid;
  grid-template-columns:100px 1.15fr .85fr;
  gap:50px;
  align-items:start;
}
.section-index{
  font-family:"Libre Baskerville",serif;
  font-size:55px;
  color:rgba(10,80,47,.16);
  line-height:1;
}
.intro-heading h2,
.editorial-copy h2,
.section-top h2,
.development h2,
.manifesto h2,
.contact h2{
  margin:0;
  font-size:clamp(40px,5vw,70px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.intro-heading h2 span{
  font-family:"Libre Baskerville",serif;
  font-weight:400;
  font-style:italic;
  color:#365548;
}
.intro-copy{
  padding-top:34px;
  color:var(--muted);
  font-size:18px;
}
.intro-copy p{margin:0 0 20px}

.editorial{
  padding:0 0 130px;
}
.editorial-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}
.editorial-image{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  min-height:670px;
  background:#ddd;
}
.editorial-image img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  filter:saturate(.9) contrast(1.03);
}
.image-caption{
  position:absolute;
  left:0;bottom:0;
  padding:18px 24px;
  background:rgba(5,37,27,.82);
  color:white;
  font-size:12px;
  letter-spacing:.08em;
}
.editorial-copy{
  padding-right:30px;
}
.editorial-copy p{
  color:var(--muted);
  font-size:17px;
  margin:22px 0 0;
}
.quote{
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
}
.quote span{
  font-family:"Libre Baskerville",serif;
  font-size:54px;
  line-height:1;
  color:var(--green);
}
.quote p{
  margin:0;
  font-family:"Libre Baskerville",serif;
  font-style:italic;
  font-size:22px;
  color:#30493d;
}

.resilience{
  padding:120px 0 130px;
  background:
    radial-gradient(circle at 85% 10%,rgba(44,181,88,.18),transparent 25%),
    linear-gradient(135deg,var(--forest-2),#0b3b2d);
  color:white;
}
.section-top{
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:80px;
  align-items:end;
}
.section-lead{
  margin:0 0 6px;
  color:rgba(255,255,255,.72);
  font-size:18px;
}
.pillars{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.17);
  border-bottom:1px solid rgba(255,255,255,.17);
}
.pillar{
  padding:34px 28px 40px 0;
  min-height:300px;
  border-right:1px solid rgba(255,255,255,.13);
}
.pillar:not(:first-child){padding-left:28px}
.pillar:last-child{border-right:0}
.pillar-no{
  font-size:11px;
  letter-spacing:.2em;
  color:#86dda1;
  font-weight:800;
}
.pillar h3{
  margin:46px 0 12px;
  font-size:22px;
}
.pillar p{
  margin:0;
  color:rgba(255,255,255,.66);
  font-size:14px;
}

.development{
  padding:130px 0;
  background:var(--cream);
}
.development-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:start;
}
.development-left{
  position:sticky;
  top:130px;
}
.large-copy{
  margin:28px 0 0;
  max-width:550px;
  color:#516157;
  font-size:20px;
}
.development-right{
  border-top:1px solid rgba(20,40,30,.15);
}
.development-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  padding:34px 0;
  border-bottom:1px solid rgba(20,40,30,.15);
}
.development-item>span{
  color:var(--green);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
}
.development-item h3{
  margin:0 0 8px;
  font-size:24px;
}
.development-item p{
  margin:0;
  color:#68736d;
  font-size:16px;
}

.manifesto{
  background:#fff;
  padding:0;
}
.manifesto-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,80,49,.18),transparent);
}
.manifesto-inner{
  padding:130px 0;
  text-align:center;
}
.manifesto-inner>p{
  margin:0 0 30px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.28em;
  color:var(--green);
}
.manifesto h2{
  font-size:clamp(46px,6.5vw,88px);
  line-height:1.03;
}
.manifesto h2 em{
  font-family:"Libre Baskerville",serif;
  font-weight:400;
  color:#2a5942;
}

.contact{
  padding:80px 0 100px;
}
.contact-card{
  border-radius:28px;
  padding:58px 62px;
  background:
    radial-gradient(circle at 80% 20%,rgba(38,190,88,.25),transparent 26%),
    linear-gradient(135deg,#072d22,#0a4633);
  color:white;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  box-shadow:0 24px 60px rgba(5,45,31,.16);
}
.contact h2{
  max-width:760px;
  font-size:clamp(36px,4.5vw,62px);
}
.contact-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  white-space:nowrap;
}
.button.pale{
  background:white;
  color:var(--forest);
}
.contact-actions span{
  color:rgba(255,255,255,.55);
  font-size:11px;
  letter-spacing:.08em;
}

.footer{
  padding:44px 0;
  background:#fafbf9;
  border-top:1px solid var(--line);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.footer img{width:205px}
.footer-text{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:12px;
  color:#7a847f;
}
.footer-text a{
  text-decoration:none;
  color:var(--forest);
  font-weight:800;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible{
  opacity:1;
  transform:none;
}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
.delay-3{transition-delay:.32s}

@media (max-width: 980px){
  .hero{min-height:820px}
  .hero-content{
    grid-template-columns:1fr;
    gap:40px;
    align-items:start;
  }
  .hero-note{
    width:min(360px,100%);
    margin-bottom:0;
  }
  .intro-grid{
    grid-template-columns:70px 1fr;
  }
  .intro-copy{
    grid-column:2;
    padding-top:0;
  }
  .editorial-wrap{
    grid-template-columns:1fr;
    gap:45px;
  }
  .editorial-image{min-height:520px}
  .editorial-copy{padding-right:0}
  .section-top{
    grid-template-columns:1fr;
    gap:24px;
  }
  .pillars{grid-template-columns:1fr 1fr}
  .pillar:nth-child(2){border-right:0}
  .pillar:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
  .development-grid{
    grid-template-columns:1fr;
    gap:55px;
  }
  .development-left{position:static}
  .contact-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .contact-actions{align-items:flex-start}
}

@media (max-width: 760px){
  .shell{width:min(100% - 30px,1220px)}
  .header-inner{height:78px}
  .brand{width:170px}
  .nav{
    display:none;
    position:absolute;
    top:78px;left:0;right:0;
    background:rgba(255,255,255,.98);
    padding:24px;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    box-shadow:0 16px 32px rgba(0,0,0,.08);
  }
  .nav.open{display:flex}
  .nav a,.header:not(.scrolled) .nav a{color:var(--ink)}
  .nav-button{
    background:var(--forest);
    color:white!important;
    border-color:transparent;
  }
  .menu-button{display:block}
  .hero{
    min-height:780px;
  }
  .hero-content{
    padding-top:115px;
    padding-bottom:95px;
  }
  .hero h1{
    font-size:clamp(50px,15vw,74px);
  }
  .scroll-hint{display:none}
  .intro{padding:95px 0 90px}
  .intro-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .intro-copy{grid-column:auto}
  .section-index{font-size:42px}
  .editorial{padding-bottom:95px}
  .editorial-image{min-height:430px}
  .resilience{padding:90px 0}
  .pillars{
    grid-template-columns:1fr;
    margin-top:45px;
  }
  .pillar,
  .pillar:not(:first-child){
    padding:28px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.13);
    min-height:auto;
  }
  .pillar h3{margin-top:24px}
  .development{padding:95px 0}
  .manifesto-inner{padding:95px 0}
  .contact{padding:60px 0 80px}
  .contact-card{padding:38px 28px}
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-text{align-items:flex-start}
}

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