:root{
  --paper:#f7f5f0;
  --ink:#273c39;
  --forest:#213c37;
  --sage:#647e72;
  --red:#ad5650;
  --gold:#d7bc91;
  --muted:#71807b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  line-height:1.95;letter-spacing:.035em;
}
a{color:inherit}
header{
  background:var(--forest);color:#fff;padding:22px 7%;
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:20px;
}
.logo{font-size:23px;font-weight:700;text-decoration:none}
.logo small{
  display:block;font:10px Arial,sans-serif;
  letter-spacing:.3em;color:#dbcfbb;
}
nav{display:flex;gap:23px;flex-wrap:wrap}
nav a{font-size:13px;text-decoration:none;color:#e0e9e3}
nav a:hover{color:var(--gold)}
.hero{
  position:relative;overflow:hidden;color:white;
  background:linear-gradient(120deg,#213c37,#4f766d,#9e7763);
  min-height:560px;padding:95px 7%;
}
.overline{
  font:700 11px Arial,sans-serif;
  letter-spacing:.23em;color:#e9d2b0;
}
.accent{color:var(--red)}
h1{
  font-size:clamp(43px,6vw,79px);
  line-height:1.45;position:relative;
  margin:25px 0;z-index:1;
}
.hero p{font-size:18px;max-width:680px;position:relative;z-index:1}
.heromark{
  position:absolute;right:6%;bottom:-150px;
  font:420px serif;color:#ffffff10;
}
.button{
  display:inline-block;margin-top:26px;
  padding:13px 29px;background:var(--gold);
  text-decoration:none;color:var(--forest);
  font-size:14px;font-weight:700;position:relative;z-index:1;
}
.intro{
  max-width:900px;margin:95px auto;
  padding:0 25px;text-align:center;
}
h2{
  font-size:clamp(30px,4vw,48px);
  line-height:1.5;margin:20px 0 30px;
}
.intro p{color:var(--muted)}
.container{
  max-width:1200px;margin:95px auto;padding:0 24px;
}
.cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
}
.card{
  padding:27px;background:white;
  border:1px solid #e4e6dc;
}
.symbol{
  color:#e4e7df;font:95px serif;
  line-height:1.3;
}
.card h3{font-size:21px}
.card p{font-size:14px;color:var(--muted)}
.feature{
  background:var(--forest);color:white;padding:95px 7%;
}
.feature h2{max-width:850px}
.feature p{max-width:770px;color:#d0e0d7;font-size:18px}
.textlink{color:var(--gold);text-decoration:none}
.notes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}
.notes article{border-top:2px solid var(--red);padding-top:20px}
.notes strong{color:var(--red);font:700 14px Arial,sans-serif}
.notes h3{font-size:21px}
.notes p{color:var(--muted);font-size:15px}
.pagehero{
  background:var(--forest);color:white;
  padding:80px 7%;
}
.pagehero h1{font-size:clamp(35px,5vw,61px)}
.prose{
  max-width:850px;margin:70px auto 110px;padding:0 25px;
}
.prose h2{font-size:30px;margin-top:45px}
.prose p{color:#536761}
footer{
  background:#172d29;color:white;padding:43px 7%;
  font-size:13px;
}
footer strong{font-size:22px}
footer p,footer small{color:#b5c6bb}
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .cards,.notes{grid-template-columns:1fr}
  .hero{padding:75px 7%;min-height:460px}
  .heromark{font-size:220px;bottom:-50px}
}