/* Brouwerij De Hoppige Bloem — branded public layer */
.brand-hoppige{
  --bg:#090907;
  --surface:#11100d;
  --surface2:#171510;
  --surface3:#1e1a14;
  --border:#393126;
  --amber:#b78a50;
  --amber2:#d8b77c;
  --cream:#f3ecdf;
  --muted:#aa9e8c;
  --text:#e8dfd1;
  background:
    radial-gradient(circle at 12% 8%,rgba(183,138,80,.09),transparent 28rem),
    var(--bg);
}
.brand-hoppige .nav{
  background:linear-gradient(to bottom,rgba(9,9,7,.98),rgba(9,9,7,.88) 72%,rgba(9,9,7,.18));
}
.brand-hoppige .nav::after{
  background:linear-gradient(90deg,transparent,rgba(216,183,124,.26),transparent);
}
.brand-hoppige .nav-logo-img{
  height:78px;
  filter:none;
}
.brand-hoppige .footer-logo img{
  height:96px;
  filter:none;
}
.brand-hoppige .section-label{
  color:var(--amber2);
  letter-spacing:3.4px;
}
.brand-hoppige .btn-primary{
  background:linear-gradient(180deg,#d7b77d,#a9773f);
  border-color:rgba(255,239,207,.2);
  box-shadow:0 16px 42px rgba(95,64,30,.25);
}
.brand-hoppige .btn-primary:hover{
  box-shadow:0 19px 48px rgba(123,83,39,.34);
}
.hb-hero{
  min-height:100vh;
}
.hb-hero .hero-bg{
  background-image:url('/branding/hero-bg.png?v=2');
  filter:grayscale(.72) sepia(.18) contrast(1.1) brightness(.62);
  background-position:center 35%;
}
.hb-hero .hero-bg::before{
  background:
    linear-gradient(90deg,rgba(7,7,6,.92) 0%,rgba(7,7,6,.7) 46%,rgba(7,7,6,.48) 100%),
    linear-gradient(180deg,rgba(7,7,6,.12),rgba(7,7,6,.74)),
    radial-gradient(ellipse 52% 68% at 27% 40%,rgba(183,138,80,.13),transparent 72%);
}
.hb-hero-content{
  width:100%;
  padding-top:152px;
  padding-bottom:92px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hb-hero-logo{
  width:min(360px,72vw);
  max-height:310px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:20px;
  filter:none;
  opacity:.97;
}
.hb-hero-title{
  max-width:760px;
  margin:0 0 24px;
  color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(2.7rem,6.2vw,5.5rem);
  font-weight:700;
  line-height:.99;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.hb-hero .hero-sub{
  max-width:620px;
  color:#c9bead;
  font-size:1.08rem;
}
.hb-hero-actions{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.hb-secondary-link{
  color:var(--cream);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(216,183,124,.42);
  padding:8px 0;
  transition:color .2s,border-color .2s;
}
.hb-secondary-link:hover{
  color:var(--amber2);
  border-color:var(--amber2);
}
.hb-intro-section{
  background:
    radial-gradient(circle at 85% 20%,rgba(183,138,80,.08),transparent 22rem),
    #0d0c09;
  border-top:1px solid rgba(216,183,124,.08);
  border-bottom:1px solid rgba(216,183,124,.08);
}
.hb-intro-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:start;
}
.hb-intro-grid .section-title{
  margin-bottom:0;
}
.hb-intro-copy{
  max-width:680px;
}
.hb-intro-copy>p{
  margin-bottom:20px;
  color:#b9ae9d;
  line-height:1.9;
  font-size:1.03rem;
}
.hb-intro-copy strong{
  color:var(--cream);
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
}
.hb-origin-note{
  margin-top:34px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  border:1px solid rgba(216,183,124,.18);
  background:rgba(216,183,124,.045);
  border-radius:10px;
}
.hb-origin-note>span{
  min-width:64px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(216,183,124,.36);
  border-radius:999px;
  color:var(--amber2);
  font-family:var(--serif);
  font-weight:800;
}
.hb-origin-note p{
  color:#ac9f8d;
  margin:0;
  line-height:1.6;
  font-size:.86rem;
}
.hb-beers-section .section-bg{
  background-image:url('/branding/bg-bieren.png?v=1');
  filter:grayscale(.78) sepia(.15) brightness(.52) contrast(1.12);
}
.hb-beers-section .section-bg::after,
.hb-live-section .section-bg::after,
.hb-chart-section .section-bg::after{
  background:linear-gradient(180deg,rgba(9,9,7,.69),rgba(9,9,7,.81)),linear-gradient(90deg,rgba(9,9,7,.6),rgba(9,9,7,.24),rgba(9,9,7,.58));
}
.hb-section-intro{
  max-width:720px;
  color:#b4a897;
  margin:-25px 0 42px;
  line-height:1.8;
}
.hb-beer-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,rgba(29,26,20,.96),rgba(13,12,10,.97));
  border-color:rgba(216,183,124,.16);
}
.hb-beer-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--amber),transparent);
  opacity:.55;
}
.hb-beer-card:hover{
  border-color:rgba(216,183,124,.58);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}
.hb-origin-badge{
  color:#d9c19b;
  background:rgba(216,183,124,.08);
  border:1px solid rgba(216,183,124,.25);
}
.hb-stories-section{
  background:#0a0908;
}
.hb-story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.hb-story-card,
.hb-story-empty{
  min-height:210px;
  padding:30px;
  border:1px solid rgba(216,183,124,.16);
  background:linear-gradient(145deg,rgba(28,25,19,.86),rgba(13,12,10,.92));
  border-radius:10px;
}
.hb-story-card{
  transition:transform .2s,border-color .2s,background .2s;
}
.hb-story-card:hover{
  transform:translateY(-3px);
  border-color:rgba(216,183,124,.55);
  background:linear-gradient(145deg,rgba(32,28,21,.92),rgba(15,13,10,.96));
}
.hb-story-card h3{
  font-family:var(--serif);
  color:var(--cream);
  font-size:1.35rem;
  margin-bottom:10px;
}
.hb-story-card p{
  color:#a99d8b;
  margin-bottom:28px;
}
.hb-story-card span{
  color:var(--amber2);
  font-size:.88rem;
  font-weight:700;
}
.hb-story-empty{
  grid-column:1/-1;
  color:var(--muted);
}
.hb-live-section .section-bg{
  background-image:url('/branding/bg-live.png?v=1');
  filter:grayscale(.8) sepia(.12) brightness(.48) contrast(1.15);
}
.brand-hoppige .live-widget,
.brand-hoppige .chart-wrap{
  border-color:rgba(216,183,124,.18);
  background:linear-gradient(180deg,rgba(28,25,19,.94),rgba(13,12,10,.96));
}
.brand-hoppige .live-stat-value{
  color:var(--amber2);
}
.hb-chart-section .section-bg{
  background-image:url('/branding/bg-grafiek.png?v=1');
  filter:grayscale(.86) sepia(.1) brightness(.42) contrast(1.16);
}
.hb-about-section{
  background:
    radial-gradient(circle at 10% 75%,rgba(183,138,80,.07),transparent 24rem),
    #12100d;
}
.brand-hoppige .equip-card{
  border-color:rgba(216,183,124,.18);
  background:linear-gradient(145deg,rgba(28,25,19,.96),rgba(12,11,9,.95));
}
.brand-hoppige .equip-card:hover{
  border-color:rgba(216,183,124,.52);
}
.brand-hoppige .dagboek-page,
.brand-hoppige .proces-page{
  background:
    radial-gradient(circle at 85% 5%,rgba(183,138,80,.07),transparent 24rem),
    var(--bg);
}
.brand-hoppige .proces-hero .section-bg{
  filter:grayscale(.84) sepia(.12) brightness(.45);
}
.brand-hoppige .batch-brewdag{
  background:linear-gradient(145deg,rgba(27,24,19,.92),rgba(13,12,10,.96));
  border-color:rgba(216,183,124,.16);
}
.hb-footer-link{
  margin-top:14px;
  font-size:.78rem;
  color:var(--amber2);
}
.hb-footer-link a:hover{
  text-decoration:underline;
}
@media(max-width:900px){
  .hb-intro-grid{grid-template-columns:1fr;gap:36px}
  .hb-story-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .brand-hoppige .nav-logo-img{height:64px}
  .hb-hero-content{padding-top:128px;padding-bottom:78px}
  .hb-hero-logo{width:min(285px,72vw);max-height:240px}
  .hb-hero-title{font-size:clamp(2.45rem,12vw,4rem)}
  .hb-hero-actions{align-items:flex-start;flex-direction:column;gap:14px}
  .hb-story-grid{grid-template-columns:1fr}
  .hb-origin-note{grid-template-columns:1fr}
  .hb-origin-note>span{width:68px}
  .hb-section-intro{margin-top:-24px}
}