:root{
  --bg:#0f5f4f; /* brand deep green */
  --bg-2:#0a3f34;
  --text:#0f1b1a;
  --muted:#5b6a67;
  --gold:#e9a72a;
  --surface:#ffffff;
  --card:#f7faf9;
  --ring: rgba(15,95,79,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#f6f8f7;
}

.container{width:min(1100px, 90%); margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:.5rem .75rem; border-radius:.5rem; box-shadow:var(--shadow)}

.site-header{
  background:linear-gradient(90deg, var(--bg), var(--bg-2));
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px}
.brand img{width:40px; height:40px; object-fit:contain; border-radius:.35rem; background:rgba(255,255,255,.12); padding:.25rem}
.nav .nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav a{color:#dff6ef; text-decoration:none; font-weight:600}
.nav a:hover, .nav a:focus{color:#fff; text-decoration:underline}
.cta-link{padding:.45rem .8rem; background:#fff; color:var(--bg); border-radius:.6rem}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:22px; height:2px; background:#fff; margin:4px 0}

.hero{
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(233,167,42,.25), transparent),
    radial-gradient(1000px 400px at 90% -10%, rgba(255,255,255,.18), transparent),
    linear-gradient(180deg, rgba(15,95,79,1), rgba(15,95,79,.95) 60%, rgba(15,95,79,.85));
  color:#fff;
  padding: clamp(60px, 7vw, 110px) 0;
}
.hero-inner{display:grid; gap:2rem; align-items:center}
.hero h1{font-size:clamp(1.8rem, 3vw, 3rem); line-height:1.2; margin:0 0 .5rem}
.hero p{opacity:.95; font-size:1.05rem}
.hero-cta{display:flex; gap:1rem; margin-top:1rem}
.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:.8rem; text-decoration:none; font-weight:700; letter-spacing:.3px}
.btn-primary{background:var(--gold); color:#2a1c00; box-shadow:var(--shadow)}
.btn-secondary{border:2px solid #fff; color:#fff}

.section{padding: clamp(48px, 6vw, 80px) 0}
.eyebrow{color:var(--muted); margin-top:-.6rem}

.grid{display:grid; gap:1rem}
.cards{grid-template-columns: repeat(auto-fit, minmax(220px,1fr))}
.card{background:var(--card); border-radius:1rem; padding:1rem; box-shadow:var(--shadow); border:1px solid rgba(15,95,79,.06)}
.card h3{margin:.25rem 0 .35rem; font-size:1.05rem}
.card p{margin:0; color:#273735}

.about p{max-width:80ch}

.table-wrap{overflow:auto; background:#fff; border-radius:1rem; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05)}
table.data{width:100%; border-collapse:separate; border-spacing:0}
table.data thead th{position:sticky; top:0; background:#f2fbf8; text-align:left; padding:.9rem; border-bottom:1px solid #e6f2ee}
table.data td{padding:.8rem .9rem; border-bottom:1px solid #f0f3f2; vertical-align:top}
table.data tr:last-child td{border-bottom:none}
.bar{position:relative; height:12px; background:#e9edf0; border-radius:999px; outline:1px solid rgba(0,0,0,.06)}
.bar span{position:absolute; right:.5rem; top:50%; transform:translateY(-50%); font-size:.75rem; color:#0a0a0a}
.bar::before{content:""; position:absolute; inset:0; width:0; background:linear-gradient(90deg, var(--gold), #ffd76a); border-radius:999px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}

.stories{grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}
.story{background:var(--surface); border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1rem 1.1rem; box-shadow:var(--shadow)}

.tick li{margin:.4rem 0}
.tick li::marker{content:"✓ "; color:var(--bg)}

.contact-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1rem}
.contact-card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1rem; box-shadow:var(--shadow)}
.contact .disclaimer{font-size:.9rem; color:#3a4744; background:#fff; padding:1rem; border-radius:.8rem; border:1px solid rgba(0,0,0,.06); margin-top:1rem}

.site-footer{background:#0c2f29; color:#d5efe7; padding:1.2rem 0}
.footer-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-links{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.footer-links a{color:#d5efe7; text-decoration:none}
.footer-links a:hover{text-decoration:underline}

.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (max-width: 900px){
  .nav .nav-list{display:none; flex-direction:column; background:#0d4e40; position:absolute; right:5%; top:60px; padding:1rem; border-radius:.8rem; width:min(280px, 90vw)}
  .nav-toggle{display:block}
  .nav .nav-list.show{display:flex}
}


/* --- Modern visual upgrade (images + icons) --- */
body.with-graphics{
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(233,167,42,.1), transparent 50%),
    radial-gradient(900px 500px at 110% -10%, rgba(15,95,79,.15), transparent 50%),
    #f6f8f7;
}

.section-title{font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:800; margin:0 0 1rem; letter-spacing:.2px}
.section-title span{background:linear-gradient(90deg, var(--gold), #ffe08c); -webkit-background-clip:text; background-clip:text; color:transparent}

.glass{backdrop-filter:saturate(140%) blur(8px)}

.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(0,0,0,.06)}
.hero .hero-media{position:absolute; inset:0; z-index:0}
.hero .hero-media img{width:100%; height:100%; object-fit:cover; opacity:.9}
.hero .hero-inner{position:relative; z-index:1}
.hero .hero-copy{max-width:800px}
.hero .accent{color:#ffe7a8}
.hero-bullets{display:flex; gap:1rem; flex-wrap:wrap; margin:.8rem 0 0; padding:0; list-style:none}
.hero-bullets li{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:.35rem .6rem; border-radius:999px; font-size:.9rem}

.grid-2 .split{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem}
@media (max-width: 900px){ .grid-2 .split{grid-template-columns: 1fr} }

.image-frame{border-radius:1.2rem; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); background:#fff}
.image-frame img{display:block; width:100%; height:auto}
.image-banner{margin:1rem 0 1.5rem; border-radius:1rem; overflow:hidden; border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow)}

.card{position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.12)}
.card .icon{width:40px; height:40px; border-radius:.8rem; display:grid; place-items:center; background:linear-gradient(180deg, #fff, #f6faf8); border:1px solid rgba(0,0,0,.06); margin-bottom:.5rem; box-shadow:var(--shadow)}
.card .icon svg{width:22px; height:22px; fill:var(--bg)}

.cta-link{background:linear-gradient(90deg, var(--gold), #ffdf92); color:#2a1c00}
.contact .contact-card{background:linear-gradient(180deg, #fff, #f8fbfa)}