/* ---------- tokens ---------- */
:root{
  --paper: #F2ECDC;
  --paper-alt: #EAE1CB;
  --ink: #2A2118;
  --ink-soft: #574A3B;
  --oxblood: #7A2A2A;
  --oxblood-dark: #5E1F1F;
  --moss: #57623E;
  --wheat: #C99A4A;
  --rule: rgba(42,33,24,0.16);

  --font-head: "Zilla Slab", Georgia, serif;
  --font-body: "Karla", Arial, sans-serif;

  --max: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--font-head);
  color: var(--oxblood-dark);
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 600;
}

h2{ font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; max-width: 62ch; color: var(--ink-soft); }

a{ color: var(--oxblood); }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(242,236,220,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 12px; padding-bottom: 12px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-mark{ width:44px; height:44px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family: var(--font-head); font-weight:600; font-size:1.05rem; color: var(--oxblood-dark); }
.brand-place{ font-size:0.78rem; color: var(--ink-soft); letter-spacing:0.02em; }

.site-nav{ display:flex; gap:28px; }
.site-nav a{
  text-decoration:none; color: var(--ink); font-size:0.95rem; font-weight:500;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.site-nav a:hover{ border-bottom-color: var(--wheat); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:1px solid var(--rule); border-radius:4px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background: var(--ink); margin:0 auto; }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 56px; text-align:center; }
.hero-stamp{
  width: 148px; height: 148px; object-fit: contain;
  margin: 0 auto 28px;
  animation: stamp-in 0.6s cubic-bezier(.22,1.1,.36,1) both;
}
@keyframes stamp-in{
  0%{ opacity:0; transform: scale(1.5) rotate(-8deg); }
  70%{ opacity:1; }
  100%{ opacity:1; transform: scale(1) rotate(0deg); }
}
.hero h1{
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  max-width: 18ch; margin-left:auto; margin-right:auto;
}
.hero-lede{
  max-width: 48ch; margin: 0 auto 28px; font-size: 1.05rem;
}
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; padding: 12px 24px; text-decoration:none;
  font-family: var(--font-body); font-weight:600; font-size:0.95rem;
  border-radius: 2px; border: 1px solid transparent;
}
.btn-primary{ background: var(--oxblood); color: var(--paper); }
.btn-primary:hover{ background: var(--oxblood-dark); }
.btn-ghost{ border-color: var(--oxblood); color: var(--oxblood-dark); }
.btn-ghost:hover{ background: rgba(122,42,42,0.08); }

/* ---------- sections ---------- */
.section{ padding: 56px 0; border-top: 1px solid var(--rule); }
.section-alt{ background: var(--paper-alt); }

.two-col{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items:start;
}
.two-col.reverse .col-map{ order:2; }
.two-col.reverse .col-text{ order:1; }

.stat-block{
  display:flex; flex-direction:column; gap:2px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.stat-block:first-child{ padding-top:0; }
.stat-label{ font-size:0.78rem; letter-spacing:0.03em; color: var(--moss); font-weight:600; }
.stat-value{ font-family: var(--font-head); font-size:1.1rem; color: var(--ink); }

.feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
  margin-top: 32px;
}
.feature{ border-top: 2px solid var(--oxblood); padding-top: 16px; }
.feature-mark{
  display:block; font-family: var(--font-head); font-size:0.85rem;
  color: var(--wheat); font-weight:700; margin-bottom: 10px;
}
.feature p{ font-size: 0.96rem; }

.col-map iframe{
  width:100%; height: 320px; border: 1px solid var(--rule); filter: sepia(8%);
}

address{ font-style:normal; color: var(--ink-soft); line-height:1.7; }

.contact-lede{ max-width: 50ch; }
.contact-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px;
}
.contact-card{
  display:flex; flex-direction:column; gap:6px;
  padding: 20px; background: var(--paper);
  border: 1px solid var(--rule); text-decoration:none; color: inherit;
  transition: border-color .15s ease;
}
.contact-card:not(.contact-card-static):hover{ border-color: var(--oxblood); }
.contact-label{ font-size:0.78rem; letter-spacing:0.03em; color: var(--moss); font-weight:600; }
.contact-value{ font-family: var(--font-head); font-size:1.15rem; color: var(--oxblood-dark); }

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--rule); padding: 26px 0; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap: 8px 20px; justify-content:space-between;
  font-size: 0.85rem; color: var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction:column; gap:0; padding: 8px 24px 16px;
    display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle{ display:flex; }

  .two-col, .two-col.reverse{ grid-template-columns: 1fr; }
  .two-col.reverse .col-map{ order:1; }
  .two-col.reverse .col-text{ order:2; }

  .feature-grid{ grid-template-columns: 1fr; gap: 24px; }
  .contact-grid{ grid-template-columns: 1fr; }
}