:root{
  --bg:#fcf5e7;
  --panel:#fffdf5;
  --green:#0d3117;
  --green-2:#123f23;
  --muted:#13251c;
  --line:#d9c8a8;
  --orange:#d04b00;
  --shadow:0 12px 26px rgba(55,36,9,.11);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--muted);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.74),transparent 32%),
    radial-gradient(circle at 84% 0%,rgba(255,255,255,.58),transparent 32%),
    linear-gradient(180deg,#fcf5e7 0%,#fff8ea 50%,#fbf0db 100%);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.58;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.page-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding-bottom:52px;
}
.wrap{
  width:min(calc(100% - 72px),var(--max));
  margin:0 auto;
  position:relative;
}
.serif{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--green);
  letter-spacing:-.045em;
}
.orange-rule{
  width:82px;
  height:3px;
  background:var(--orange);
  border-radius:5px;
  display:block;
}
.hero{
  position:relative;
  min-height:435px;
  padding:58px 0 0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:130px;
  background:linear-gradient(180deg,transparent 0%,rgba(252,245,231,.85) 62%,var(--bg) 100%);
  pointer-events:none;
}
.hero-leaves{
  position:absolute;
  left:-4px;
  top:249px;
  width:232px;
  opacity:.72;
  z-index:0;
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:535px;
  padding-top:5px;
}
.hero h1{
  margin:0 0 25px;
  font-size:clamp(4rem,8.4vw,6.75rem);
  line-height:.86;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.hero .orange-rule{
  margin:0 0 20px;
  width:78px;
  height:3px;
}
.hero p{
  max-width:430px;
  margin:0;
  font-size:20px;
  line-height:1.55;
  font-weight:650;
  color:#173321;
}
.hero-art{
  position:absolute;
  right:-12px;
  top:0;
  width:min(57vw,590px);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:multiply;
  filter:saturate(1.04);
}
.hero-art img{
  width:100%;
  height:auto;
}
.involve-options{
  position:relative;
  z-index:5;
  margin-top:-28px;
}
.action-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.action-card{
  min-height:550px;
  background:linear-gradient(180deg,rgba(255,255,255,.89),rgba(255,250,238,.94));
  border:1px solid rgba(202,178,135,.72);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 30px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
.action-icon{
  width:82px;
  height:82px;
  margin:0 auto 10px;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.65));
}
.action-card h2{
  font-size:36px;
  line-height:.94;
  text-align:center;
  margin:0 0 16px;
  font-weight:700;
}
.action-card .tiny-rule{
  width:52px;
  height:3px;
  background:var(--orange);
  border-radius:4px;
  margin:0 auto 24px;
}
.action-card p{
  align-self:stretch;
  margin:0 0 18px;
  font-size:15.5px;
  line-height:1.55;
  color:#17221b;
  font-weight:520;
}
.action-card .card-art{
  width:100%;
  height:98px;
  object-fit:contain;
  object-position:center bottom;
  margin-top:auto;
  margin-bottom:10px;
  filter:saturate(1.04);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:238px;
  height:52px;
  padding:0 24px;
  border-radius:12px;
  border:0;
  color:#fff;
  background:linear-gradient(180deg,#ef650c 0%,#d94c00 100%);
  box-shadow:0 8px 16px rgba(185,74,0,.2),inset 0 1px 0 rgba(255,255,255,.28);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn span{
  font-size:37px;
  line-height:1;
  margin-top:-2px;
  font-weight:300;
}
.btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
  box-shadow:0 12px 20px rgba(185,74,0,.24),inset 0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:980px){
  .wrap{width:min(calc(100% - 44px),var(--max))}
  .hero{min-height:445px;padding-top:42px}
  .hero h1{font-size:clamp(3.6rem,12vw,5.3rem)}
  .hero p{font-size:18px;max-width:390px}
  .hero-art{width:58%;right:-44px;top:28px;opacity:.95}
  .action-card{padding-inline:22px}
  .btn{min-width:205px;font-size:16px}
  .action-card h2{font-size:32px}
}
@media (max-width:760px){
  .page-shell{padding-bottom:34px}
  .wrap{width:min(calc(100% - 30px),520px)}
  .hero{
    min-height:auto;
    padding:34px 0 45px;
  }
  .hero::after{height:90px}
  .hero-leaves{
    width:170px;
    top:215px;
    left:-50px;
    opacity:.45;
  }
  .hero-copy{max-width:100%;padding-top:0}
  .hero h1{
    font-size:clamp(3.45rem,16vw,5.2rem);
    margin-bottom:20px;
  }
  .hero .orange-rule{margin-bottom:16px}
  .hero p{
    font-size:17px;
    max-width:330px;
  }
  .hero-art{
    position:relative;
    width:100%;
    right:auto;
    top:auto;
    margin:-3px -18px 0 auto;
    opacity:1;
    z-index:1;
  }
  .involve-options{margin-top:0}
  .action-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .action-card{
    min-height:0;
    padding:25px 25px 18px;
  }
  .action-card p{font-size:15px}
  .action-card .card-art{height:105px}
}
@media (max-width:420px){
  .wrap{width:min(calc(100% - 22px),390px)}
  .hero h1{font-size:3.35rem}
  .hero p{font-size:16px}
  .action-card h2{font-size:31px}
  .btn{width:100%;min-width:0}
}