@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500;600&display=swap');

:root{
  --cream: #EAF2F1;
  --cream-deep: #E1EDEC;
  --paper: #FFFFFF;
  --forest: #16262E;
  --forest-soft: #4C6167;
  --sage: #3F9CA0;
  --sage-pale: #DFF0EE;
  --clay: #1F6E74;
  --clay-pale: #D7EAE8;
  --blush: #6FC7C4;
  --line: rgba(22,38,46,0.16);
  --radius: 22px;
  --radius-sm: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 600px at 15% -5%, #DCEFED 0%, transparent 55%),
              radial-gradient(1000px 500px at 100% 20%, #E4F2F1 0%, transparent 50%),
              var(--cream);
  color: var(--forest);
  font-family: 'Jost', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.wrap{ max-width: 1040px; margin: 0 auto; padding: 0 24px 80px; }

/* header / nav */
header.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 30px 0 10px;
  flex-wrap:wrap;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.brand img{ height:84px; width:84px; object-fit:contain; }
.brand-name{ font-family:'Lora', serif; font-size:19px; line-height:1.2; color:var(--forest); }
.brand-name small{ display:block; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--forest-soft); margin-top:3px; }

nav.mainnav{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; }
nav.mainnav a{
  font-size:14.5px;
  text-decoration:none;
  color: var(--forest-soft);
  padding-bottom:3px;
  border-bottom: 2px solid transparent;
}
nav.mainnav a:hover{ color: var(--forest); }
nav.mainnav a.active{ color: var(--forest); border-bottom-color: var(--clay); }

/* card */
.card{
  background: var(--paper);
  border-radius: var(--radius);
  padding: 52px 52px 44px;
  margin-top: 22px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 1px 2px rgba(22,38,46,0.06);
  border: 1px solid rgba(22,38,46,0.06);
}
.card + .card{ margin-top: 24px; }
.card.alt-sage{ background: var(--sage-pale); border-color: rgba(22,38,46,0.08); }
.card.alt-clay{ background: var(--clay-pale); border-color: rgba(22,38,46,0.08); }
.card.alt-forest{ background: linear-gradient(135deg, var(--forest) 0%, #1F6E74 100%); border-color: var(--forest); }
.card.alt-forest h2, .card.alt-forest h1, .card.alt-forest h3{ color: var(--cream); }
.card.alt-forest p, .card.alt-forest .eyebrow{ color: #B9D8D6; }

.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clay);
  font-weight:600;
  margin-bottom:16px;
  display:block;
}
h1{ font-family:'Lora', serif; font-weight:600; font-size:46px; line-height:1.1; margin: 0 0 20px; max-width:16ch; }
h2{ font-family:'Lora', serif; font-weight:600; font-size:32px; line-height:1.15; margin: 0 0 16px; max-width:20ch; }
h3{ font-family:'Lora', serif; font-weight:600; font-size:21px; line-height:1.25; margin: 0 0 10px; display:flex; align-items:center; gap:10px; }
p{ font-size:16.5px; line-height:1.7; color: var(--forest-soft); margin: 0 0 18px; max-width: 62ch; }
.lede{ font-size:19px; line-height:1.6; color: var(--forest-soft); max-width: 52ch; margin: 0 0 30px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--forest) 0%, #1F6E74 100%);
  color: var(--cream);
  border:none; border-radius: 999px; padding: 16px 26px;
  font-family:'Jost',sans-serif; font-size:15.5px; font-weight:500;
  cursor:pointer; text-decoration:none;
  box-shadow: 0 10px 24px rgba(22,38,46,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(22,38,46,0.28); }
.btn.ghost{ background: transparent; color: var(--forest); border: 1.5px solid var(--forest); box-shadow:none; }
.btn.ghost:hover{ background: var(--cream-deep); }
.card.alt-forest .btn.ghost{ color: var(--cream); border-color: var(--cream); }

/* grid helpers */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 760px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

.tile{
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px 24px 20px;
  background: var(--paper);
}
.card.alt-sage .tile, .card.alt-clay .tile{ background: var(--paper); }

.icon-badge{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--sage-pale) 0%, #BEE6E3 100%);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow: 0 4px 12px rgba(63,156,160,0.25);
}
.icon-badge svg{ width:20px; height:20px; }
.tile.clay .icon-badge{ background: linear-gradient(135deg, var(--clay-pale) 0%, #B7DEDB 100%); box-shadow: 0 4px 12px rgba(31,110,116,0.22); }

/* edit-me callout — remove once real content is in */
.editme{
  border: 1.5px dashed #C9A227;
  background: #FBF3D9;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  color: #6b5720;
  margin: 0 0 22px;
}
.editme b{ text-transform:uppercase; letter-spacing:.06em; font-size:11px; display:block; margin-bottom:4px; }

/* leaf accent */
.leaf-accent{ position:absolute; right:-30px; top:-20px; width:220px; height:400px; opacity:0.95; pointer-events:none; }
.leaf-accent.small{ width:150px; height:230px; }
.card > *:not(.leaf-accent):not(.glow-blob){ position: relative; z-index: 1; }
@media (max-width:640px){ .leaf-accent{ width:110px; height:190px; opacity:.6; } }

/* section divider — small botanical sprig between blocks */
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 6px 0 30px; }
.divider .ln{ height:1px; width:70px; background: var(--line); }
.divider svg{ width:26px; height:26px; }

footer.foot{
  text-align:center;
  font-size:12.5px;
  color: var(--forest-soft);
  margin-top: 50px;
}
footer.foot a{ text-decoration:underline; text-underline-offset:3px; }

blockquote.testimonial{
  font-family:'Lora', serif;
  font-style: italic;
  font-size: 26px;
  line-height:1.5;
  color: var(--forest);
  max-width: 42ch;
  margin: 10px auto 6px;
  text-align:center;
  border:none;
  padding:0;
}
.glow-blob{
  position:absolute; border-radius:50%; filter: blur(50px);
  background: radial-gradient(circle, rgba(63,156,160,0.35) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.stars{ color: #E8B84B; font-size:18px; letter-spacing:3px; text-align:center; margin-bottom:12px; }
.testimonial-wrap{ text-align:center; padding: 10px 0 4px; }
.testimonial-wrap .who{ font-size:13.5px; color: var(--forest-soft); margin-top:10px; }

.pull-quote{
  font-family:'Lora', serif;
  font-style: italic;
  font-size: 23px;
  line-height:1.5;
  color: var(--forest);
  border-left: 3px solid var(--clay);
  padding: 4px 0 4px 24px;
  margin: 8px 0 26px;
  max-width: 48ch;
}

.article-meta{ font-size:13.5px; color: var(--forest-soft); margin: -8px 0 26px; }
.byline{ display:flex; align-items:center; gap:12px; margin: 6px 0 20px; }
.byline .name{ font-family:'Lora',serif; font-size:16px; }
.byline .role{ font-size:13px; color:var(--forest-soft); }

.article-list .item{ display:flex; gap:20px; border-top:1px solid var(--line); padding: 26px 0; }
.article-list .item:first-child{ border-top:none; }
.article-list .item .icon-badge{ width:52px; height:52px; margin-top:4px; }
.article-list .item .icon-badge svg{ width:26px; height:26px; }
.article-list h3{ margin-bottom:8px; display:block; }
.article-list .tag{ font-size:12px; color: var(--clay); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; display:block; font-weight:600; }
@media (max-width:640px){ .article-list .item{ flex-direction:column; } }

.profile-photo{
  width: 280px;
  border-radius: var(--radius-sm);
  float: right;
  margin: 0 0 20px 30px;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(22,38,46,0.12);
}
@media (max-width: 640px){
  .profile-photo{ float:none; width:100%; margin: 0 0 20px; }
}

.hero-logo-wrap{ text-align:center; padding: 6px 0 8px; }
.hero-logo-wrap img{ width:190px; height:190px; object-fit:contain; }

@media (max-width:640px){
  .card{ padding: 34px 24px 30px; }
  h1{ font-size:34px; }
  h2{ font-size:26px; }
  header.top{ justify-content:center; text-align:center; }
  nav.mainnav{ justify-content:center; }
  .brand img{ height:68px; width:68px; }
  .hero-logo-wrap img{ width:130px; height:130px; }
}

/* crisis / emergency notice */
.crisis-note{
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--forest-soft);
  text-align: center;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.crisis-note strong{ color: var(--forest); }
.crisis-note a{ text-decoration: underline; text-underline-offset: 3px; }

.crisis-card{
  background: #FFF6F2;
  border: 1px solid #E8C4B4;
  border-radius: var(--radius-sm);
  padding: 24px 26px 20px;
  margin-top: 22px;
}
.crisis-card h3{ margin-bottom: 12px; display:block; }
.crisis-card p{ margin-bottom: 10px; }
.crisis-card ul{ margin: 0; padding-left: 20px; color: var(--forest-soft); font-size: 16px; line-height: 1.8; }
.crisis-card ul strong{ color: var(--forest); }