:root{
  --brand-900:#003545;
  --brand-800:#004d66;
  --brand-600:#006680;
  --text-900:#222;
  --text-700:#333;
  --bg:#f6f7f8;
  --muted:#666;
  --radius:14px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--text-900);
  background:var(--bg);
}

.wrapper{max-width:1100px; margin-inline:auto; padding:0 1rem}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; display:inline-block; padding:.5rem .75rem;
  background:var(--brand-600); color:#fff; border-radius:8px; margin:.5rem;
}

.site-header{
  background:linear-gradient(0deg, var(--brand-800), var(--brand-900));
  color:#fff;
  padding:1rem 0;
}
.site-header .site-title{margin:0; font-size:clamp(1.25rem, 2.5vw, 2rem)}
.site-header .site-title a{color:#fff; text-decoration:none}
.primary-nav ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:.75rem; margin:.75rem 0 0; padding:0;
}
.primary-nav a{
  color:#fff; text-decoration:none; padding:.5rem .75rem; border-radius:999px;
  outline-offset:3px;
}
.primary-nav a[aria-current="page"]{background:#ffffff26}

.hero{display:grid; gap:1.25rem; padding:1rem 0}
.hero-media img{width:100%; height:auto; border-radius:var(--radius); display:block}
.hero-text .key-links{display:flex; gap:.5rem; list-style:none; padding:0; margin:1rem 0 0; flex-wrap:wrap}
.button{
  display:inline-block; background:var(--brand-600); color:#fff; text-decoration:none;
  padding:.6rem .9rem; border-radius:10px; transition:transform .06s ease-in, background .2s;
}
.button:hover{background:var(--brand-800); transform:translateY(-1px)}

.grid.two{display:grid; gap:1.25rem; grid-template-columns:repeat(2, 1fr); margin-block:1rem}
.lead img{width:100%; height:auto; border-radius:var(--radius)}
.panel{
  background:#fff; border-radius:var(--radius); padding:1rem;
  box-shadow:0 1px 3px #00000014; margin:1rem 0
}
.card{
  display:grid; grid-template-columns:120px 1fr; gap:.75rem; align-items:center;
  background:#fff; border-radius:var(--radius); padding:.75rem; box-shadow:0 1px 3px #00000014
}
.card img{width:100%; height:auto; border-radius:10px}

main{
  padding:1rem 0 2rem;
}

h2, h3{
  color:var(--text-700);
}

figure{
  margin:1rem 0;
}

figcaption{
  color:var(--muted);
  font-size:.95rem;
  margin-top:.5rem;
}

form{
  background:#fff; border-radius:var(--radius); padding:1rem;
  box-shadow:0 1px 3px #00000014; margin:1rem 0
}
fieldset{border:none; padding:0; margin:0}
label{display:block; font-weight:600; margin-top:.75rem}
input, select, textarea{
  width:100%; max-width:640px; padding:.65rem .75rem;
  border:1px solid #cbd5e1; border-radius:10px; font:inherit;
}
textarea{resize:vertical}
.form-actions{margin-top:1rem}
button{
  background:var(--brand-600); color:#fff; border:none;
  padding:.65rem 1rem; border-radius:10px; cursor:pointer;
}
button:hover{background:var(--brand-800)}

.map-embed iframe{border:0; border-radius:var(--radius)}

.muted{color:var(--muted); font-size:.95rem}

.site-footer{
  margin-top:2rem; background:var(--brand-900); color:#dbeafe
}
.site-footer p{
  margin:0; padding:1rem 0; text-align:center
}

@media (max-width: 820px){
  .grid.two{grid-template-columns:1fr}
  .card{grid-template-columns:1fr}
}