:root{--navy:#0b2340;--green:#0b3b35;--green2:#14594e;--gold:#ffc83d;--ochre:#a56d0b;--cream:#fffaf0;--paper:#fffdf8;--ink:#10233b;--muted:#657080;--line:#e9e0d0;--shadow:0 18px 50px rgba(23,35,47,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{height:76px;display:flex;align-items:center;padding:0 max(28px,calc((100vw - 1280px)/2));gap:42px;background:rgba(255,253,248,.96);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(11,35,64,.08);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand b{font-size:22px;line-height:1;color:var(--navy)}.brand small{font-size:8px;letter-spacing:.12em;font-weight:800;margin-top:4px}.logo-mark{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--navy);background:var(--gold);border-radius:12px 12px 15px 15px;font-size:25px;color:var(--navy);box-shadow:inset 0 -5px 0 rgba(255,255,255,.2)}.desktop-nav{display:flex;gap:34px;font-size:14px;font-weight:600}.desktop-nav a{padding:28px 0 23px;border-bottom:3px solid transparent}.desktop-nav a.active{color:var(--ochre);border-color:var(--ochre)}.header-actions{display:flex;align-items:center;gap:18px}.lang{display:flex;gap:5px;align-items:center;font-size:14px}.lang button{border:0;background:none;padding:3px;cursor:pointer}.lang button.active{font-weight:800}.passport-btn{background:var(--green);color:#fff;border-radius:10px;padding:12px 16px;font-weight:700;font-size:14px}.menu-btn,.mobile-menu{display:none}
.hero{position:relative;min-height:500px;color:white;background:linear-gradient(115deg,#142f3a 0%,#244c45 48%,#7d6d48 100%);overflow:hidden}.hero-art{position:absolute;inset:0;opacity:.95}.sun{position:absolute;width:500px;height:500px;border-radius:50%;right:-90px;top:-280px;background:radial-gradient(circle,rgba(255,214,111,.7),rgba(255,214,111,0) 68%)}.mountain{position:absolute;left:-5%;right:-5%;height:380px;bottom:0;clip-path:polygon(0 70%,10% 52%,18% 62%,29% 36%,38% 58%,49% 31%,59% 53%,68% 26%,79% 55%,88% 39%,100% 64%,100% 100%,0 100%)}.m1{background:#173d39;opacity:.7}.m2{bottom:-95px;background:#102e2c;transform:scaleX(1.1)}.village{position:absolute;bottom:110px;left:40%;width:390px;height:100px;opacity:.75}.village i{position:relative;display:inline-block;width:58px;height:40px;background:#e7d0a6;margin:0 3px;top:42px;clip-path:polygon(0 25%,50% 0,100% 25%,100% 100%,0 100%)}.village .tower{position:absolute;left:165px;top:5px;width:42px;height:78px;background:#d5b982;clip-path:polygon(50% 0,78% 28%,78% 100%,22% 100%,22% 28%)}.hero-inner{position:relative;z-index:2;max-width:1280px;margin:auto;min-height:500px;padding:60px 28px 40px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:800;color:#b17613}.hero .eyebrow{color:#f6d48b}.hero h1{font-family:"Fraunces",serif;font-size:68px;line-height:.92;margin:14px 0 20px;max-width:650px;letter-spacing:-.04em}.hero h1 span,.hero h1 strong{display:block}.hero h1 strong{color:var(--gold)}.hero-copy>p{font-size:18px;line-height:1.5;max-width:590px;color:rgba(255,255,255,.92)}.primary-cta{display:inline-flex;align-items:center;gap:15px;margin-top:12px;background:var(--gold);color:#10233b;padding:16px 24px;border-radius:999px;font-size:17px;box-shadow:0 12px 30px rgba(0,0,0,.2);transition:.2s}.primary-cta:hover{transform:translateY(-2px)}.scribble{font-family:"Fraunces",serif;font-style:italic;margin:14px 0 0 100px;transform:rotate(-4deg);color:#fff4d6}.hero-visual{position:relative;height:390px}.map-preview{position:absolute;width:430px;height:275px;right:0;top:25px;background:#eaf1df;border:10px solid rgba(255,255,255,.92);border-radius:24px;transform:rotate(-2deg);box-shadow:0 28px 60px rgba(0,0,0,.28);overflow:hidden}.map-grid{position:absolute;inset:0;background:linear-gradient(28deg,transparent 46%,#cad5bd 47%,#cad5bd 49%,transparent 50%),linear-gradient(100deg,transparent 47%,#d7dfcb 48%,#d7dfcb 50%,transparent 51%);background-size:80px 70px}.road{position:absolute;width:500px;height:6px;background:#fff;border:1px solid #d7d1b7;transform:rotate(22deg);top:130px;left:-30px}.r2{transform:rotate(-28deg);top:90px}.pin{position:absolute;left:58%;top:48%;width:42px;height:48px;background:var(--green);display:grid;place-items:center;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);color:var(--gold);font-size:20px}.pin::first-letter{transform:rotate(45deg)}.dot{position:absolute;width:12px;height:12px;background:#e4a320;border:3px solid white;border-radius:50%;box-shadow:0 1px 4px #555}.d1{left:22%;top:36%}.d2{left:37%;top:68%}.d3{left:78%;top:32%}.d4{left:82%;top:72%}.place-card{position:absolute;right:18px;top:16px;background:white;color:var(--ink);padding:12px 14px;border-radius:12px;width:180px;box-shadow:0 8px 20px rgba(0,0,0,.14)}.place-card b,.place-card small{display:block}.place-card small{color:var(--muted);margin:3px 0 8px}.place-card div{display:flex;gap:5px}.place-card span{font-size:9px;background:#e9f1ff;padding:4px 5px;border-radius:5px}.place-card span+span{background:#e2f2e5}.beer-mug{position:absolute;left:15px;bottom:5px;width:145px;height:220px;z-index:3}.beer{position:absolute;left:10px;bottom:0;width:105px;height:175px;border:7px solid rgba(255,255,255,.75);border-radius:8px 8px 20px 20px;background:linear-gradient(90deg,#f0a700,#ffc739 50%,#dc8b00);box-shadow:inset 12px 0 rgba(255,255,255,.12),0 20px 30px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#17312e;font-size:40px;font-weight:900}.beer small{font-size:14px}.foam{position:absolute;z-index:2;top:24px;left:5px;width:118px;height:38px;background:#fff4d4;border-radius:30px 25px 18px 25px}.handle{position:absolute;right:0;top:85px;width:48px;height:90px;border:14px solid rgba(255,255,255,.72);border-left:0;border-radius:0 38px 38px 0}.hero-stats{position:relative;z-index:3;max-width:1280px;margin:auto;min-height:90px;padding:20px 28px;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1.2fr;gap:20px;border-top:1px solid rgba(255,255,255,.2);background:rgba(6,29,29,.38);backdrop-filter:blur(8px)}.hero-stats>div{display:flex;gap:12px;align-items:center}.hero-stats>div>b{font-size:28px}.hero-stats span{display:flex;flex-direction:column}.hero-stats strong{font-size:17px}.hero-stats small{font-size:14px;color:rgba(255,255,255,.82)}
.section{max-width:1280px;margin:auto;padding:72px 28px}.section-head{text-align:center;margin-bottom:38px}.section-head.left{text-align:left}.section-head h2{font-family:"Fraunces",serif;font-size:38px;margin:5px 0 6px}.section-head p{margin:0;color:var(--muted)}.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.step-grid article{display:flex;gap:16px}.step-grid i{font-style:normal;flex:0 0 56px;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#fff1d6;color:#9d6b11;font-size:28px}.step-grid b{font-size:16px}.step-grid p{font-size:14px;line-height:1.45;color:#445063;margin:7px 0}.regions{padding-top:45px}.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.region-card{height:220px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#527f73,#173d39);box-shadow:var(--shadow);color:white;display:flex;align-items:flex-end;padding:22px;transition:.2s}.region-card:hover{transform:translateY(-4px)}.region-card.of{background:linear-gradient(145deg,#446c82,#1d4155)}.region-card.uf{background:linear-gradient(145deg,#7c8251,#38583d)}.region-scene{position:absolute;inset:0;overflow:hidden}.region-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(4,22,26,.88))}.hill{position:absolute;width:130%;height:65%;left:-15%;bottom:20%;background:rgba(18,68,52,.55);clip-path:polygon(0 90%,18% 45%,30% 68%,47% 20%,60% 65%,74% 35%,100% 80%,100% 100%,0 100%)}.church{position:absolute;right:25%;bottom:48px;font-size:72px;color:#ead3a5;opacity:.75}.region-card>div:nth-child(2){position:relative;z-index:2;display:flex;flex-direction:column}.region-card b{font-family:"Fraunces",serif;font-size:25px}.region-card strong{font-size:16px;margin-top:2px}.region-card>i{position:relative;z-index:2;margin-left:auto;width:38px;height:38px;background:white;color:var(--ink);display:grid;place-items:center;border-radius:50%;font-style:normal}.coming-soon{width:max-content;margin:26px auto 0;border:1px solid #a8afb7;border-radius:999px;padding:10px 17px;color:#596270;font-size:14px}.passport{max-width:none;background:#f6eddc;padding-left:max(28px,calc((100vw - 1224px)/2));padding-right:max(28px,calc((100vw - 1224px)/2));display:grid;grid-template-columns:180px 1fr .8fr;align-items:center;gap:50px}.passport-book{width:130px;height:175px;background:var(--green);border-radius:8px;transform:rotate(-7deg);box-shadow:8px 12px 20px rgba(0,0,0,.2);border:3px solid #082d29;outline:1px solid #d4a82d;outline-offset:-8px;color:var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center}.passport-book span{font-size:32px}.passport-book b{font-family:"Fraunces",serif;font-size:20px}.passport-book small{font-size:9px;letter-spacing:.2em}.passport-book em{font-style:normal;margin-top:16px}.passport-copy h2{font-family:"Fraunces",serif;font-size:36px;margin:5px 0}.passport-copy p{color:#4d5964;max-width:580px}.secondary-cta{display:inline-flex;gap:14px;background:var(--green);color:white;border-radius:999px;padding:13px 20px;font-weight:700;margin-top:8px}.passport ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:#73520d;font-size:14px}footer{max-width:1280px;margin:auto;padding:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.footer-brand .logo-mark{width:34px;height:34px;font-size:20px}.footer-brand b{font-size:17px}.footer-links{display:flex;gap:25px;font-size:14px}.footer-love{text-align:right;font-size:14px;color:#69717c}
@media(max-width:900px){.desktop-nav,.passport-btn{display:none}.menu-btn{display:block;border:0;background:none;font-size:25px;color:var(--navy);cursor:pointer}.mobile-menu{display:none;position:absolute;left:0;right:0;top:76px;background:white;padding:15px 22px 22px;box-shadow:0 15px 25px rgba(0,0,0,.12)}.mobile-menu.open{display:grid}.mobile-menu a{padding:12px 5px;border-bottom:1px solid #eee;font-weight:700}.hero-inner{grid-template-columns:1fr;padding-top:45px}.hero-visual{display:none}.hero h1{font-size:58px}.hero-stats{grid-template-columns:repeat(5,1fr)}.hero-stats>div{flex-direction:column;text-align:center;gap:3px}.hero-stats small{display:none}.step-grid{grid-template-columns:repeat(2,1fr)}.passport{grid-template-columns:140px 1fr}.passport ul{display:none}}
@media(max-width:600px){.site-header{height:64px;padding:0 18px}.brand b{font-size:19px}.brand small{font-size:7px}.logo-mark{width:37px;height:37px;font-size:21px}.lang{font-size:14px}.mobile-menu{top:64px}.hero{min-height:auto}.hero-inner{min-height:410px;padding:55px 20px 28px;display:block}.hero-art{opacity:1}.village{left:15%;bottom:60px;transform:scale(.8)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,24,27,.84),rgba(4,24,27,.28))}.hero-inner,.hero-stats{z-index:3}.hero h1{font-size:48px;max-width:340px;margin-top:12px}.hero-copy>p{font-size:15px;max-width:360px}.primary-cta{width:100%;justify-content:center;margin-top:15px;padding:15px 20px}.scribble{display:none}.hero-stats{padding:15px 12px;gap:4px;min-height:74px}.hero-stats>div>b{font-size:20px}.hero-stats strong{font-size:14px}.section{padding:48px 18px}.section-head{margin-bottom:25px}.section-head h2{font-size:30px}.section-head p{font-size:14px}.steps{padding-bottom:34px}.step-grid{grid-template-columns:repeat(4,1fr);gap:8px}.step-grid article{display:block;text-align:center}.step-grid i{width:48px;height:48px;min-width:48px;margin:0 auto 8px;font-size:23px}.step-grid b{font-size:14px}.step-grid p{display:none}.regions{padding-top:35px}.region-grid{grid-template-columns:1fr;gap:10px}.region-card{height:112px;border-radius:14px;padding:16px}.region-card b{font-size:21px}.region-card strong{font-size:14px}.church{font-size:52px;bottom:18px}.coming-soon{font-size:14px;margin-top:16px}.passport{padding:42px 20px;grid-template-columns:90px 1fr;gap:24px}.passport-book{width:82px;height:116px;outline-offset:-6px}.passport-book span{font-size:23px}.passport-book b{font-size:14px}.passport-book small{font-size:6px}.passport-book em{margin-top:8px}.passport-copy .eyebrow{display:none}.passport-copy h2{font-size:25px}.passport-copy p{font-size:14px;margin:6px 0}.secondary-cta{font-size:14px;padding:11px 15px}footer{padding:26px 18px;grid-template-columns:1fr auto}.footer-links{display:none}.footer-love{font-size:14px}.footer-brand small{display:none}}

/* Header & navigation */
.site-header {
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 max(28px, calc((100vw - 1280px) / 2));
  background: #171717;
  color: #fff;
  border-bottom: 1px solid #252525;
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
}

.site-header .brand {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: auto;
}

.site-header .wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  white-space: nowrap;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: #fff;
}

.site-header .wordmark strong {
  color: #ffc329;
  font: inherit;
}

.site-header .wordmark em {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 25px;
  font-style: normal;
  letter-spacing: 0;
}

.site-header .menu-btn {
  display: block;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.site-header .mobile-menu {
  display: none;
  position: absolute;
  top: 68px;
  right: max(18px, calc((100vw - 1280px) / 2));
  left: auto;
  width: 250px;
  padding: 10px;
  background: #fff;
  color: #10233b;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.site-header .mobile-menu.open { display: grid; }

.site-header .mobile-menu a,
.site-header .menu-lang {
  display: block;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #10233b;
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.site-header .mobile-menu a:hover,
.site-header .menu-lang:hover { background: #f6f0e4; }

.site-header .menu-lang.active {
  color: #9a6810;
  background: #fff7e6;
}

.site-header .menu-divider {
  height: 1px;
  margin: 7px 5px;
  background: #e8e1d5;
}

@media (max-width: 600px) {
  .site-header {
    height: 62px;
    padding: 0 16px;
  }

  .site-header .wordmark {
    font-size: 27px;
    letter-spacing: -.8px;
  }

  .site-header .wordmark em {
    margin-left: 4px;
    font-size: 21px;
  }

  .site-header .mobile-menu {
    top: 62px;
    right: 12px;
    width: min(260px, calc(100vw - 24px));
  }
}


/* v2.0.0 — unified BeerKönig typography */
:root{
  --font-ui:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
}
body{font-family:var(--font-ui)}
.hero h1,.section-head h2,.region-card b,.passport-book b,.passport-copy h2{font-family:var(--font-display)}
.site-header .wordmark{font-family:var(--font-ui)}

/* v2.0.1 — shared BeerKönig color system & semantic design tokens */
:root{
  --color-bg:#f8f5ee;
  --color-surface:#ffffff;
  --color-surface-warm:#fffaf0;
  --color-surface-subtle:#f3eee4;
  --color-ink:#171717;
  --color-text:#26302d;
  --color-muted:#68716d;
  --color-border:#e4ded3;
  --color-border-strong:#cfc6b8;
  --color-brand:#123f38;
  --color-brand-strong:#0b302c;
  --color-brand-soft:#e6efeb;
  --color-gold:#f4c430;
  --color-gold-strong:#b77a0b;
  --color-gold-soft:#fff4c7;
  --color-brewery:#176cab;
  --color-brewpub:#e4a320;
  --color-visited:#2f7d4a;
  --color-danger:#a94b3f;
  --color-on-brand:#ffffff;
  --focus-ring:rgba(244,196,48,.22);
  --shadow-soft:0 12px 32px rgba(23,23,23,.10);
  --shadow-float:0 18px 48px rgba(23,23,23,.16);

  /* legacy aliases kept while components migrate to semantic tokens */
  --navy:var(--color-ink);
  --green:var(--color-brand);
  --green2:#1d5b50;
  --gold:var(--color-gold);
  --ochre:var(--color-gold-strong);
  --cream:var(--color-surface-warm);
  --paper:var(--color-bg);
  --ink:var(--color-ink);
  --muted:var(--color-muted);
  --line:var(--color-border);
  --shadow:var(--shadow-soft);
}
body{background:var(--color-bg);color:var(--color-ink)}
/* Header stays on the shared dark navigation surface. Do not inherit the page background token. */
.site-header{background:var(--color-ink);color:var(--color-on-brand);border-bottom-color:#252525}
.site-header .wordmark{color:var(--color-on-brand)}
.site-header .wordmark strong{color:var(--color-gold)}
.site-header .menu-btn{color:var(--color-on-brand)}
.logo-mark{border-color:var(--color-ink);background:var(--color-gold);color:var(--color-ink)}
.desktop-nav a.active{color:var(--color-gold-strong);border-color:var(--color-gold-strong)}
.passport-btn,.secondary-cta{background:var(--color-brand);color:var(--color-on-brand)}
.hero{background:linear-gradient(115deg,var(--color-brand-strong) 0%,#1d5149 50%,#756748 100%)}
.primary-cta{background:var(--color-gold);color:var(--color-ink)}
.step-grid i{background:var(--color-gold-soft);color:var(--color-gold-strong)}
.section-head p,.step-grid p,.passport-copy p{color:var(--color-muted)}
.coming-soon{border-color:var(--color-border-strong);color:var(--color-muted)}
.passport{background:var(--color-surface-subtle)}
.passport-book{background:var(--color-brand);border-color:var(--color-brand-strong);outline-color:var(--color-gold);color:var(--color-gold)}


/* v2.0.2.1 — unified buttons & interactive controls */
:root{
  --control-radius:12px;
  --control-radius-sm:10px;
  --control-height:44px;
  --control-height-lg:48px;
  --control-border:var(--color-border-strong);
  --control-transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

/* Primary and secondary CTA family */
.primary-cta,.secondary-cta{
  min-height:var(--control-height);
  border:1px solid transparent;
  border-radius:var(--control-radius);
  justify-content:center;
  transition:var(--control-transition);
  text-decoration:none;
}
.primary-cta{
  min-height:var(--control-height-lg);
  background:var(--color-gold);
  color:var(--color-ink);
  box-shadow:0 8px 20px rgba(23,23,23,.14);
}
.primary-cta:hover{background:#eab927;transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,23,23,.18)}
.primary-cta:active{transform:translateY(0);box-shadow:0 5px 12px rgba(23,23,23,.13)}
.secondary-cta{
  background:var(--color-brand);
  color:var(--color-on-brand);
  box-shadow:0 5px 14px rgba(18,63,56,.14);
}
.secondary-cta:hover{background:var(--color-brand-strong);transform:translateY(-1px)}
.secondary-cta:active{transform:translateY(0)}
.primary-cta:focus-visible,.secondary-cta:focus-visible,.menu-btn:focus-visible,.mobile-menu a:focus-visible,.region-card>i:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring),0 0 0 1px var(--color-gold-strong);
}

/* Header/menu controls share one interaction language */
.site-header .menu-btn{
  width:42px;height:42px;padding:0;border-radius:var(--control-radius-sm);
  display:grid;place-items:center;
  transition:var(--control-transition);
}
.site-header .menu-btn:hover{background:rgba(255,255,255,.09)}
.site-header .menu-btn:active{background:rgba(255,255,255,.14)}
.site-header .mobile-menu{border:1px solid var(--color-border);box-shadow:var(--shadow-float)}
.site-header .mobile-menu a{
  min-height:42px;padding:11px 12px;border-radius:var(--control-radius-sm);
  display:flex;align-items:center;
  transition:var(--control-transition);
}
.site-header .mobile-menu a:hover{background:var(--color-surface-subtle)}
.site-header .mobile-menu a:active{background:#ece5d9}

/* Small round affordances use the same icon-button treatment */
.region-card>i{
  border:1px solid rgba(23,23,23,.08);
  box-shadow:0 2px 8px rgba(23,23,23,.08);
  transition:var(--control-transition);
}
.region-card:hover>i{transform:translateX(2px);box-shadow:0 4px 12px rgba(23,23,23,.12)}

/* v2.0.3 — shared BeerKönig card tokens */
:root{
  --card-radius:16px;
  --card-radius-lg:20px;
  --card-border:1px solid var(--color-border);
  --card-shadow:0 2px 10px rgba(23,23,23,.045);
  --card-shadow-hover:0 10px 26px rgba(23,23,23,.10);
}

/* Keep existing homepage composition, but make its actual cards follow the shared surface language. */
.place-card{
  border:var(--card-border);
  border-radius:var(--card-radius-sm,14px);
  box-shadow:var(--card-shadow-hover);
}
.region-card{
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--card-radius-lg);
  box-shadow:var(--card-shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.region-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.26);
  box-shadow:var(--card-shadow-hover);
}
@media(max-width:600px){
  .region-card{border-radius:var(--card-radius)}
}


/* v2.0.4 — unified BeerKönig header system */
:root{
  --header-height:68px;
  --header-height-mobile:62px;
  --header-pad-x:20px;
  --header-pad-x-mobile:14px;
  --header-bg:#171717;
  --header-border:#2a2a2a;
  --header-logo-size:34px;
  --header-logo-size-mobile:27px;
  --header-crown-size:25px;
  --header-crown-size-mobile:21px;
  --header-menu-size:42px;
  --header-menu-radius:10px;
  --header-popover-width:260px;
}
.menu-icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-close-icon{display:none}
[aria-expanded="true"] .menu-open-icon{display:none}
[aria-expanded="true"] .menu-close-icon{display:block}

.site-header{
  height:var(--header-height);
  padding:0 var(--header-pad-x);
  gap:0;
  background:var(--header-bg);
  color:var(--color-on-brand);
  border-bottom:1px solid var(--header-border);
  position:relative;
  top:auto;
  z-index:50;
  backdrop-filter:none;
}
.site-header .wordmark{font-size:var(--header-logo-size);letter-spacing:-1.2px;color:var(--color-on-brand)}
.site-header .wordmark em{margin-left:6px;font-size:var(--header-crown-size)}
.site-header .menu-btn{
  width:var(--header-menu-size);height:var(--header-menu-size);padding:0;margin-left:auto;
  display:grid;place-items:center;border-radius:var(--header-menu-radius);font-size:inherit;
}
.site-header .mobile-menu{
  top:calc(100% + 8px);right:var(--header-pad-x);width:var(--header-popover-width);
  border-radius:14px;padding:8px;
}
.site-header .mobile-menu a{min-height:44px;padding:11px 12px;border-radius:10px}
@media(max-width:600px){
  .site-header{height:var(--header-height-mobile);padding:0 var(--header-pad-x-mobile)}
  .site-header .wordmark{font-size:var(--header-logo-size-mobile);letter-spacing:-.8px}
  .site-header .wordmark em{margin-left:4px;font-size:var(--header-crown-size-mobile)}
  .site-header .mobile-menu{top:calc(100% + 8px);right:10px;width:min(var(--header-popover-width),calc(100vw - 20px))}
}


/* v2.0.7.2 — homepage cleanup: product-level hierarchy and shared component language */
:root{
  --home-max:1224px;
  --home-section-gap:80px;
}

main{overflow:hidden}
.section{
  max-width:var(--home-max);
  padding:var(--home-section-gap) 24px;
}
.section-head{margin-bottom:32px}
.section-head h2{
  margin:6px 0 8px;
  font-size:40px;
  line-height:1.05;
  letter-spacing:-.025em;
}
.section-head p{max-width:640px;margin-left:auto;margin-right:auto;line-height:1.55}
.section-head.left p{margin-left:0}

/* Hero: simplify the decorative layer and make the product preview carry the visual weight. */
.hero{min-height:560px}
.hero-art{opacity:.78}
.sun{opacity:.78}
.m1{opacity:.56}
.m2{opacity:.9}
.village{opacity:.46}
.hero-inner{
  max-width:var(--home-max);
  min-height:560px;
  padding:72px 24px 64px;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:48px;
}
.hero-copy{max-width:650px}
.hero h1{
  max-width:620px;
  margin:16px 0 22px;
  font-size:64px;
  line-height:.96;
}
.hero-copy>p{max-width:570px;margin:0 0 8px;font-size:18px;line-height:1.55}
.primary-cta{gap:12px;margin-top:18px;padding:0 18px 0 16px}
.cta-icon,.cta-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.cta-arrow{width:18px;height:18px;margin-left:2px}
.hero-visual{height:390px}
.map-preview{
  width:min(430px,100%);
  border-width:7px;
  border-radius:20px;
  transform:rotate(-1deg);
  box-shadow:0 24px 54px rgba(0,0,0,.24);
}
.place-card{padding:12px 13px;background:rgba(255,255,255,.96)}
.place-card span{font-size:11px;border-radius:6px}
.beer-mug{transform:scale(.92);transform-origin:left bottom}

/* How it works: turn loose rows into a deliberate card family. */
.steps{padding-bottom:64px}
.step-grid{gap:14px}
.step-grid article{
  min-height:176px;
  padding:20px;
  gap:14px;
  align-items:flex-start;
  background:var(--color-surface);
  border:var(--card-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.step-grid article:hover{transform:translateY(-2px);border-color:var(--color-border-strong);box-shadow:var(--card-shadow-hover)}
.step-grid i{flex-basis:46px;width:46px;height:46px;font-size:22px}
.step-grid b{display:block;margin-top:3px;font-size:17px;line-height:1.2}
.step-grid p{margin:8px 0 0;line-height:1.5;color:var(--color-muted)}

/* Regions: reduce visual noise while keeping each region distinct. */
.regions{padding-top:64px}
.region-grid{gap:16px}
.region-card{height:208px;padding:20px;border-radius:var(--card-radius-lg)}
.region-card b{font-size:24px;line-height:1.05}
.region-card strong{margin-top:6px;font-size:14px;font-weight:700;color:rgba(255,255,255,.84)}
.region-card>i{width:40px;height:40px}
.region-scene:after{background:linear-gradient(transparent 24%,rgba(4,22,26,.84))}
.coming-soon{margin-top:22px;padding:9px 14px;background:var(--color-surface);border-color:var(--color-border);font-weight:600}

/* Passport teaser: contained, premium-looking block rather than another full-width stripe. */
.passport{
  max-width:var(--home-max);
  margin:16px auto 80px;
  padding:42px 44px;
  grid-template-columns:150px minmax(0,1fr) minmax(210px,.64fr);
  gap:42px;
  background:linear-gradient(135deg,var(--color-brand-soft),#f7f1e5 78%);
  border:var(--card-border);
  border-radius:24px;
  box-shadow:var(--card-shadow);
}
.passport-book{width:118px;height:160px;transform:rotate(-4deg);box-shadow:8px 12px 22px rgba(23,23,23,.16)}
.passport-copy h2{margin:6px 0 10px;font-size:38px;line-height:1.05;letter-spacing:-.02em}
.passport-copy p{max-width:550px;margin:0;line-height:1.55}
.secondary-cta{margin-top:18px;padding:0 18px}
.passport ul{gap:11px;color:var(--color-text);font-weight:700}
.passport li{display:flex;align-items:center;gap:8px}

/* Footer: same wordmark and less visual competition with the content above. */
footer{
  max-width:var(--home-max);
  padding:28px 24px 34px;
  border-top:1px solid var(--color-border);
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.footer-brand .wordmark{font-family:var(--font-ui);font-size:23px;font-weight:800;line-height:1;letter-spacing:-.7px}
.footer-brand .wordmark strong{color:var(--color-gold-strong)}
.footer-brand .wordmark em{margin-left:3px;font-size:17px;font-style:normal}
.footer-brand>small{font-size:11px;letter-spacing:.12em;color:var(--color-muted);font-weight:800}
.footer-links a{font-weight:600;color:var(--color-text)}
.footer-links a:hover{color:var(--color-brand)}
.footer-love{color:var(--color-muted)}

@media(max-width:980px){
  :root{--home-section-gap:64px}
  .hero{min-height:auto}
  .hero-inner{min-height:auto;grid-template-columns:1fr;padding-top:58px;padding-bottom:54px}
  .hero-copy{max-width:720px}
  .hero-visual{height:330px;max-width:600px;width:100%;margin:0 auto}
  .map-preview{left:auto;right:0}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .passport{margin-left:20px;margin-right:20px;grid-template-columns:125px minmax(0,1fr);padding:36px;gap:28px}
  .passport ul{grid-column:2}
  footer{grid-template-columns:1fr 1fr}
  .footer-love{grid-column:1/-1;text-align:left}
}

@media(max-width:700px){
  :root{--home-section-gap:52px}
  .section{padding-left:16px;padding-right:16px}
  .section-head{margin-bottom:24px;text-align:left}
  .section-head h2{font-size:34px}
  .section-head p{margin-left:0;margin-right:0}
  .hero-inner{padding:44px 16px 42px;gap:30px}
  .hero h1{font-size:48px;max-width:520px}
  .hero-copy>p{font-size:16px}
  .hero-visual{height:285px}
  .map-preview{width:calc(100% - 26px);height:240px;right:0;top:10px}
  .beer-mug{left:-8px;bottom:-6px;transform:scale(.72)}
  .place-card{right:10px;top:10px;width:165px}
  .step-grid{grid-template-columns:1fr;gap:10px}
  .step-grid article{min-height:0;padding:17px}
  .region-grid{grid-template-columns:1fr}
  .region-card{height:180px}
  .coming-soon{width:100%;text-align:center}
  .passport{margin:6px 12px 60px;padding:28px 22px;grid-template-columns:1fr;gap:24px;text-align:left}
  .passport-book{margin-left:8px}
  .passport ul{grid-column:auto}
  .passport-copy h2{font-size:34px}
  .secondary-cta{width:100%}
  footer{grid-template-columns:1fr;gap:22px;padding-left:16px;padding-right:16px}
  .footer-links{flex-wrap:wrap;gap:12px 20px}
  .footer-love{text-align:left}
}

@media(max-width:430px){
  .hero h1{font-size:42px}
  .hero-visual{height:255px}
  .map-preview{height:220px;width:100%}
  .place-card{width:150px}
}


/* v2.0.7.2 — polish fixes */
.secondary-cta{
  align-items:center;
  justify-content:center;
  min-height:48px;
  line-height:1.2;
  text-align:center;
}
.eyebrow{ text-transform:uppercase; }

/* v2.0.7.8 — spacing hotfix: avoid stacked section padding between How it works and Regions */
.steps{padding-bottom:32px}
.regions{padding-top:32px}

@media(max-width:700px){
  .steps{padding-bottom:24px}
  .regions{padding-top:24px}
}

/* Available regions; keep long region names readable. */
.region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.region-card.nb{background:linear-gradient(145deg,#87649b,#463055)}
@media(max-width:600px){.region-grid{grid-template-columns:1fr}}

.region-card.opf{background:linear-gradient(145deg,#368e89,#174c49)}