* { box-sizing: border-box; }
:root {
  --bg: #f3f0e8;
  --paper: #fffdf8;
  --ink: #201e1a;
  --muted: #6f695e;
  --line: #d9d2c4;
  --accent: #8a6a42;
  --dark: #24251f;
  --max: 1380px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,.brand-main {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.03;
}
h1 { margin:0 0 1.4rem; font-size:clamp(3rem,7vw,7rem); letter-spacing:-.045em; }
h2 { margin:0 0 1.4rem; font-size:clamp(2.2rem,4.4vw,4.6rem); letter-spacing:-.035em; }
h3 { margin:0 0 .7rem; font-size:clamp(1.7rem,2.3vw,2.6rem); }
p { margin-top:0; }
.site-header {
  min-height:92px; padding:1.1rem clamp(1.25rem,4vw,4rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  background:rgba(255,255,255,.97); border-bottom:1px solid rgba(0,0,0,.06);
  position:sticky; top:0; z-index:20;
}
.brand { display:flex; flex-direction:column; }
.brand-main { font-size:clamp(2rem,3vw,3.2rem); letter-spacing:.04em; }
.brand-sub { margin-top:.35rem; font-size:.58rem; font-weight:700; letter-spacing:.18em; }
.main-nav { display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.9rem; }
.main-nav a { border-bottom:1px solid transparent; padding:.3rem 0; }
.main-nav a:hover { border-bottom-color:var(--ink); }
.hero {
  min-height:min(78vh,820px);
  position:relative; display:flex; align-items:center;
  padding:clamp(5rem,9vw,9rem) clamp(1.25rem,8vw,8rem);
  color:white;
  background:
    linear-gradient(90deg, rgba(14,15,12,.70) 0%, rgba(14,15,12,.42) 38%, rgba(14,15,12,.10) 75%),
    url("harzperlen-header.jpg") center/cover no-repeat,
    #4b5142;
}
.hero-content { position:relative; z-index:2; width:min(900px,100%); }
.hero-text { max-width:760px; font-size:clamp(1.05rem,1.5vw,1.28rem); margin-bottom:2rem; }
.eyebrow {
  margin-bottom:1rem; color:var(--accent); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow.light { color:rgba(255,255,255,.78); }
.button {
  display:inline-block; padding:.95rem 1.25rem; border:1px solid currentColor;
  font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.button-light { background:rgba(255,255,255,.94); color:var(--ink); border-color:rgba(255,255,255,.94); }
.button-dark { background:var(--dark); color:white; border-color:var(--dark); }
.section { max-width:var(--max); margin:0 auto; padding:clamp(4.5rem,8vw,8rem) clamp(1.25rem,4vw,4rem); }
.section-soft { max-width:none; background:#e9e4d8; }
.narrow { width:min(900px,100%); margin:0 auto; text-align:center; }
.narrow p { font-size:clamp(1rem,1.5vw,1.16rem); }
.section-heading { width:min(900px,100%); margin:0 auto 3rem; text-align:center; }
.card-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.card { background:var(--paper); border:1px solid var(--line); padding:2rem; min-height:250px; }
.card-number { color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.14em; }
.statement { background:var(--dark); color:white; }
.statement-inner { width:min(950px,calc(100% - 2.5rem)); margin:0 auto; padding:clamp(5rem,9vw,8rem) 0; text-align:center; }
.statement p:not(.eyebrow) { max-width:780px; margin-left:auto; margin-right:auto; color:rgba(255,255,255,.78); }
.statement-strong { font-weight:700; color:white !important; }
.uelze-link { padding:clamp(4.5rem,8vw,7rem) 1.25rem; text-align:center; background:var(--paper); }
.uelze-link > div { width:min(850px,100%); margin:0 auto; }
.site-footer {
  padding:2.5rem clamp(1.25rem,4vw,4rem); background:#dfd8ca;
  display:grid; grid-template-columns:1.2fr 1fr .6fr; gap:2rem; font-size:.86rem;
  border-top:1px solid var(--line);
}
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:850px) {
  .card-grid, .site-footer { grid-template-columns:1fr; }
  .site-header { position:static; align-items:flex-start; }
}
@media (max-width:560px) {
  .site-header { flex-direction:column; }
  .main-nav { gap:.8rem 1rem; }
  .hero { min-height:620px; background-position:58% center; }
}