:root{
  --teal:#0a7f8c;
  --teal2:#075f68;
  --teal3:#064a51;
  --ink:#132229;
  --muted:#55646d;
  --paper:#ffffff;
  --sand:#f3f1ed;
  --line:#e3dfd9;
  --shadow:0 14px 46px rgba(0,0,0,.12);
  --radius:18px;
  --max:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  background:var(--sand);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}

/* Header (lighter) */
header{
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;
}
.brand img{
  height:44px;width:auto;display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
.pill{
  display:inline-flex;gap:12px;align-items:center;
  font-size:12px;opacity:.92;white-space:nowrap
}
.pill a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

.nav{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  padding:9px 0 12px;
  border-top:1px solid rgba(255,255,255,.16);
}
.nav a{
  color:#fff;text-decoration:none;
  font-weight:600;font-size:12.5px;letter-spacing:.15px;
  opacity:.92;padding:2px 0
}
.nav a.active{border-bottom:2px solid rgba(255,255,255,.85)}

/* Page card */
.shell{margin:20px auto 28px}
.page{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Hero (mockup style, refined) */
.hero{
  position:relative;
  min-height:395px;
  background:center/cover no-repeat;
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,0) 100%);
}
.hero .panel{
  position:absolute;left:22px;top:22px;bottom:22px;
  width:min(585px,calc(100% - 44px));
  background:rgba(243,241,237,.94);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  padding:20px 20px 16px;
  z-index:2;
}
.hero h1{
  margin:0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight:600;
  letter-spacing:.2px;
  font-size:42px;
  line-height:1.06;
  color:#0f1c22;
}
.hero p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14.5px;
  max-width:58ch;
}

/* Buttons (less chunky) */
.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;text-decoration:none;
  font-weight:600;font-size:13px;letter-spacing:.15px;
  padding:9px 13px;
  border-radius:11px;
  border:0;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.btn.ghost{
  background:#fff;color:var(--teal2);
  border:1px solid var(--line);
  box-shadow:none;
}

/* Sections */
.section{padding:20px 0}
.section.tight{padding:12px 0}
.rule{border-top:1px solid var(--line)}

.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Cards (lighter) */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.07);
  transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
.card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.card .pad{padding:15px}
.card h3{
  margin:0 0 6px;
  font-size:14.5px;
  font-weight:600;
  color:#0f1c22
}
.card p{margin:0;color:var(--muted);font-size:13.2px}

/* Rich copy (refined) */
.rich{color:var(--muted)}
.rich h2{
  margin:0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  color:#0f1c22;
  font-size:28px;
  font-weight:600;
  letter-spacing:.15px;
}
.rich h3{
  margin:16px 0 8px;
  color:#0f1c22;
  font-size:14.5px;
  font-weight:600
}
.rich p{margin:0 0 12px}
.rich ul{margin:0 0 12px 18px}

/* Split blocks */
.split{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14px;
  align-items:start;
}
.side{
  background:linear-gradient(135deg,var(--teal2),var(--teal3));
  color:#fff;
  border-radius:16px;
  padding:15px;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
.side h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.28px;
  text-transform:uppercase;
  font-weight:600;
  opacity:.95;
}
.side ul{margin:0 0 0 18px}
.side li{margin:0 0 6px}
.side a{color:#fff}

/* Image strip */
.strip{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.07);
}
.strip img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover}

/* Contact band */
.contactband{
  background:linear-gradient(135deg,var(--teal2),var(--teal3));
  color:#fff;
  padding:16px 0;
}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-weight:600;font-size:12px;letter-spacing:.15px}
input,textarea{
  width:100%;
  padding:10px 11px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
  color:#fff;
  outline:none;
  margin-top:6px;
}
textarea{resize:vertical}

/* Footer */
footer{
  background:#f0ede7;
  color:#14252d;
  border-top:1px solid var(--line);
}
footer .wrap{padding:12px 0}
.footnav{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:12px;font-weight:600;letter-spacing:.12px;
}
.footnav a{text-decoration:none;color:#14252d}
.small{font-size:12px;color:#4c5961;text-align:center;margin-top:8px}

/* Responsive */
@media (max-width:980px){
  .split{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero:after{display:none}
  .hero .panel{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin:14px}
  .hero h1{font-size:38px}
}