:root{
  --ink:#15241f;--ink-soft:#4a5d55;--bg:#f7f5f0;--card:#ffffff;
  --accent:#16735a;--accent-deep:#0e5240;--accent-soft:#e3f1ea;--gold:#c98a2d;--gold-soft:#f9efdd;
  --line:#e6e2d8;--warn:#9a6b1f;--warn-bg:#faf3e3;
  --radius:14px;--max:960px;
  --serif:"Fraunces",Georgia,serif;--sans:"Inter",-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.75;font-size:16.5px;-webkit-font-smoothing:antialiased}

/* ---------- header ---------- */
header.site{background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{max-width:var(--max);margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.4px;display:flex;align-items:center;gap:9px}
.brand svg{flex:none}
.brand span{color:var(--accent)}
.nav ul{display:flex;gap:22px;list-style:none;font-size:.85rem;font-weight:500}
.nav a{color:var(--ink-soft);text-decoration:none;transition:color .15s}
.nav a:hover{color:var(--accent)}

main{max-width:var(--max);margin:0 auto;padding:0 22px 70px}

/* ---------- hero ---------- */
.hero{position:relative;padding:64px 0 36px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero h1{font-family:var(--serif);font-size:2.7rem;line-height:1.14;letter-spacing:-1px;font-weight:600}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero p.lead{margin-top:18px;color:var(--ink-soft);font-size:1.08rem;max-width:560px}
.hero-art{display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:330px;height:auto}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;background:var(--accent-soft);padding:6px 14px;border-radius:99px;margin-bottom:18px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.trustline{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-size:.82rem;color:var(--ink-soft)}
.trustline div{display:flex;align-items:center;gap:8px}
.trustline svg{color:var(--accent);flex:none}

/* ---------- section headings ---------- */
.section-head{margin:46px 0 6px;display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.section-head h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:-.4px}
.section-head .sub{font-size:.85rem;color:var(--ink-soft)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),#3aa183);opacity:0;transition:opacity .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(21,36,31,.10)}
.card:hover::after{opacity:1}
.card .icon{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.card .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.card h3{font-family:var(--serif);font-size:1.12rem;line-height:1.38;font-weight:600;letter-spacing:-.2px}
.card p{font-size:.88rem;color:var(--ink-soft)}
.card .more{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:600;color:var(--accent)}

/* ---------- article ---------- */
article{max-width:760px}
article h1{font-family:var(--serif);font-size:2.1rem;line-height:1.22;letter-spacing:-.6px;margin:10px 0 10px;font-weight:600}
article .meta{font-size:.8rem;color:var(--ink-soft);margin-bottom:30px;display:flex;gap:14px;flex-wrap:wrap}
article h2{font-family:var(--serif);font-size:1.42rem;margin:40px 0 14px;letter-spacing:-.3px;font-weight:600}
article h3{font-size:1.04rem;margin:26px 0 10px;font-weight:650}
article p{margin:0 0 17px}
article ul,article ol{margin:0 0 17px 24px}
article li{margin-bottom:8px}
article a{color:var(--accent);text-decoration-color:#9ecdbb}
.breadcrumb{font-size:.78rem;color:var(--ink-soft);margin:34px 0 4px}
.breadcrumb a{color:var(--accent);text-decoration:none;font-weight:600}

/* ---------- tables / notes ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;background:var(--card);font-size:.9rem;border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
tr:last-child td{border-bottom:none}
td+td,th+th{border-left:1px solid var(--line)}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;background:var(--accent-deep);color:#fff;font-weight:600}
tr:nth-child(even) td{background:#fbfaf7}
.note{background:var(--warn-bg);border:1px solid #ecd9b4;border-left:4px solid var(--gold);padding:15px 18px;border-radius:8px;margin:20px 0;font-size:.92rem}
.note strong{color:var(--warn)}
.box{background:var(--accent-soft);border:1px solid #c9e2d6;border-radius:var(--radius);padding:20px 22px;margin:22px 0;font-size:.95rem}
.box strong{color:var(--accent-deep)}

/* ---------- footer ---------- */
footer.site{background:var(--accent-deep);color:#dcebe4;margin-top:60px}
.foot{max-width:var(--max);margin:0 auto;padding:38px 22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:.82rem}
.foot a{color:#bcd9cd;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .fbrand{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:6px}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero-art{order:-1}
  .hero-art svg{max-width:200px}
  .hero h1{font-size:1.9rem}
  article h1{font-size:1.55rem}
}