:root {
  --accent: #1f4e79;
  --muted: #6b7280;
  --shadow: 0 1px 0 rgba(0,0,0,.03);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background: #fff;
}

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #eee;
}
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-weight: 700; letter-spacing:.2px }
.logo img{ width: 36px; height: 36px }
.site-nav a { text-decoration: none; color: #333; padding: .45rem .65rem; border-radius: .5rem; }
.site-nav a:hover, .site-nav a.active { background: #f1f5f9; color: #000; }
.site-nav a.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang { font-weight: 700; color: var(--accent); }
.nav-toggle{ display:inline-block; width:44px; height:44px; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; position:relative }

.hero {
  padding: clamp(2rem, 4vw, 4rem) 1rem; text-align: center; border-bottom: 1px solid #eee;
}
.hero h1 { color: var(--accent); font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .5rem; }
.hero p { margin: 0 auto 1rem; max-width: 60ch; color: #333; }
.btn { display: inline-block; padding: .65rem 1rem; border-radius: .75rem; background: var(--accent); color: #fff; text-decoration: none; border: 0; cursor: pointer; box-shadow: var(--shadow) }
.btn:hover { opacity: .92; }
.btn.outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
a { color: var(--accent); }

.page{ padding: 2rem 1rem; max-width: 1100px; margin: 0 auto; }
.grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 2rem 1rem; max-width: 1100px; margin: 0 auto; }
.grid.two{ grid-template-columns: repeat(2,1fr); }
.grid.three{ grid-template-columns: repeat(3,1fr); }
.card { background:#f0f1f3; border-radius:.75rem; padding:1.5rem; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.form label{ display:block; font-weight: 600; margin: .25rem 0; }
.form input, .form textarea{
  width: 100%; padding: .65rem .75rem; border-radius: .6rem; border: 1px solid #e5e7eb; font: inherit; margin-top: .25rem;
}
.form .muted{ color:var(--muted); font-size:.9rem }
.map-embed{ width: 100%; height: 260px; border: 0; border-radius: .75rem; box-shadow: var(--shadow); margin-top:.5rem }

.site-footer{ padding: 2rem 1rem; border-top: 1px solid #eee; text-align:center; color: var(--muted) }

#toTop{
  position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: var(--accent); color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow: var(--shadow); cursor: pointer;
}
#toTop.show{ display:flex; }

.reveal{ opacity:0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible{ opacity:1; transform:none; }

@media (max-width: 900px){
  .grid, .grid.two, .grid.three { grid-template-columns: 1fr; }
  .site-nav{ display:none; position: absolute; top: 56px; right: 1rem; background:#fff; border:1px solid #eee; border-radius:.75rem; padding:.5rem; }
  .site-nav.show{ display:block; }
  .nav-toggle{ display:inline-block; width:44px; height:44px; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; position:relative }
}


.hero-media{ position: relative; overflow: hidden; border-radius: .75rem; max-width: 1200px; margin: 0 auto; }
.hero-media img{ width: 100%; height: clamp(260px, 40vw, 520px); object-fit: cover; display: block; filter: saturate(1.05) contrast(1.05); }
.hero-media .overlay{ position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)); color: #fff; }
.hero-media h1{ color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero-media p{ max-width: 70ch; margin: .5rem auto 1rem; color: #f1f5f9; }
.card img{ width:100%; height: 180px; object-fit: cover; border-radius: .5rem; margin-bottom: .5rem; display:block; }
.contact-hero{ margin-bottom: 1rem; }

.icon{ width:1.15em; height:1.15em; vertical-align:-0.2em; margin-right:.4em; }
.icon path, .icon circle, .icon rect, .icon polyline, .icon line{ stroke: var(--accent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

body { background:#f5f6f8; color:#111; font-family:system-ui, sans-serif; line-height:1.6; }

.nav-toggle::before{
  content:"";
  position:absolute;
  left:10px; right:10px;
  top:13px;
  height:2px;
  background:#000;
  box-shadow: 0 6px 0 0 #000, 0 12px 0 0 #000;
}
/* High-contrast in dark overlays */
@media (prefers-color-scheme: dark){
  .nav-toggle{ background:#fff; border-color:#d1d5db }
  .nav-toggle::before{ background:#000; box-shadow: 0 6px 0 0 #000, 0 12px 0 0 #000; }
}

/* Contact hero responsive refinements */
picture.contact-hero{ display:block; border-radius:.75rem; overflow:hidden; margin-bottom:1rem; box-shadow:0 2px 6px rgba(0,0,0,.05); }
picture.contact-hero img{ width:100%; height:auto; display:block; }
@media (max-width: 600px){
  picture.contact-hero img{ aspect-ratio: 16 / 9; object-fit: cover; }
}

/* LQIP blur placeholder */
.lqip-wrap{ position:relative; display:block; }
.lqip-wrap .lqip{
  width:100%; height:auto; display:block;
  filter: blur(14px);
  transform: scale(1.06);
  opacity:.6;
}
.lqip-wrap picture{ position:absolute; inset:0; display:block; }
.lqip-wrap.contact-hero{ border-radius:.75rem; overflow:hidden; margin-bottom:1rem; box-shadow:0 2px 6px rgba(0,0,0,.05); }
@media (max-width: 600px){
  .lqip-wrap.contact-hero img{ aspect-ratio: 16 / 9; object-fit: cover; }
}