/* ===== Design Tokens ===== */
:root{
  --c-brand:#47697d; --c-brand-600:#5a8096; --c-brand-700:#3e5c6e;
  --c-accent:#d97757;
  --c-bg:#ffffff; --c-surface:#f5f8f9; --c-border:#e0e6e8;
  --c-text:#222; --c-text-muted:#555;
  --c-success:#3b9e74; --c-danger:#c0392b; --c-warning:#e0a100; --c-info:#2d7abf;
  --fs-300:.95rem; --fs-400:1rem; --fs-500:1.125rem; --fs-600:1.25rem; --fs-700:1.5rem; --fs-800:2rem; --fs-900:2.5rem;
  --lh:1.6; --container:72rem;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem;
  --radius:.875rem; --radius-lg:1.25rem;
  --shadow-sm:0 4px 12px rgba(0,0,0,.06); --shadow:0 10px 30px rgba(0,0,0,.08);
}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--c-bg);color:var(--c-text);line-height:var(--lh)}
img{max-width:100%;height:auto}
.container{max-width:var(--container);margin-inline:auto;padding:0 var(--space-2)}
.grid{display:grid;gap:var(--space-2)} .grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--c-border);z-index:10}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:4rem}
.brand{display:flex;gap:.75rem;align-items:center;text-decoration:none;color:inherit}
.brand img{width:140px;height:auto}
.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav a{padding:.5rem .75rem;border-radius:.5rem;text-decoration:none;color:#000}
.nav a:hover{background:var(--c-surface)}
/* Headings */
h1{font-size:var(--fs-900);margin:1.5rem 0} h2{font-size:var(--fs-800);margin:1.25rem 0} h3{font-size:var(--fs-700);margin:1rem 0}
.lead{font-size:var(--fs-600);color:var(--c-text-muted)}
/* Cards */
.card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow)}
/* Buttons */
.btn{display:inline-block;border:0;border-radius:.75rem;padding:.75rem 1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.btn:focus{outline:2px solid var(--c-brand);outline-offset:2px}
.btn-primary{background:var(--c-brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--c-brand);border:2px solid var(--c-brand)}
.btn-secondary:hover{background:var(--c-brand);color:#fff}
.btn-ghost{background:transparent;color:var(--c-brand)}
/* Forms */
.form{display:grid;gap:1rem;max-width:42rem}
.field label{display:block;margin-bottom:.25rem}
.input,.textarea,.select{width:100%;padding:.75rem;border:1px solid var(--c-border);border-radius:.75rem;background:#fff}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--c-brand);outline-offset:2px}
.hint{font-size:.9rem;color:var(--c-text-muted)}
/* Hero */
.hero{padding:var(--space-5) 0;background:linear-gradient(180deg,#fff,var(--c-surface));border-bottom:1px solid var(--c-border)}
/* Footer */
.site-footer{border-top:1px solid var(--c-border);margin-top:var(--space-5)}
.footer-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:var(--space-4) 0}
/* Map 2-click */
.map-2click{display:grid;gap:.5rem;justify-items:start}
.map-2click img{border:1px solid var(--c-border);border-radius:var(--radius)}
.notice{font-size:.9rem;color:var(--c-text-muted)}
/* Utilities */
.mt-4{margin-top:2rem}.p-3{padding:1.5rem}.round{border-radius:var(--radius)}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(8px);animation:reveal .5s ease forwards}
  @keyframes reveal{to{opacity:1;transform:none}}
}