/* Page-specific styles: /products/brewery-game/ and /en/products/brewery-game/. All selectors are scoped with the bg- prefix. */
.bg-hero{padding:90px max(28px,calc((100vw - var(--max))/2)) 0;background:#17120e;color:#fff}
.bg-hero-text{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
.bg-hero h1{margin:0;font-family:var(--font-display);font-size:clamp(42px,6vw,86px);line-height:.98;letter-spacing:-.05em}
.bg-hero h1 em{font-style:normal;color:#e9a15a}
.bg-hero .lead{margin-top:30px;color:#efe7dc}
.bg-hero .eyebrow{color:#e9a15a}
.bg-hero .button{border-color:#fff}
.bg-hero .button.primary{background:#e9a15a;border-color:#e9a15a;color:var(--ink)}
.bg-hero .button.primary:hover{background:#f3b878;border-color:#f3b878}
.bg-hero .button.secondary:hover{background:#fff;color:var(--ink)}
.bg-status{margin:0;padding:24px 26px;border:1px solid #5a4636;background:#221a14;font-size:15px;line-height:1.6;color:#e2d8cb}
.bg-status b{display:block;margin-bottom:8px;color:#e9a15a;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.bg-shot{margin:0}
.bg-shot img{display:block;width:100%;height:auto;object-fit:contain;background:#120e0b;border:1px solid #4a3a2d}
.bg-shot figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;padding:14px 0 0;font-size:14px;line-height:1.55}
.bg-shot figcaption b{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bg-shot figcaption span{max-width:860px}
.bg-shot figcaption a{color:inherit;text-decoration:underline;font-weight:600}
.bg-hero .bg-shot{margin-top:60px;padding-bottom:80px}
.bg-hero .bg-shot figcaption{color:#d8cfc3}
.bg-hero .bg-shot figcaption b{color:#e9a15a}
.bg-facts{display:grid;grid-template-columns:repeat(4,1fr);padding:0 max(28px,calc((100vw - var(--max))/2));background:var(--acid)}
.bg-facts div{padding:36px 24px 32px 0;border-right:1px solid var(--line)}
.bg-facts div+div{padding-left:24px}
.bg-facts div:last-child{border-right:0}
.bg-facts strong{display:block;font-family:var(--font-display);font-size:clamp(20px,2.2vw,30px);line-height:1.1;letter-spacing:-.03em}
.bg-facts span{display:block;margin-top:12px;font-size:14px;line-height:1.5}
.bg-section{padding:100px max(28px,calc((100vw - var(--max))/2))}
.bg-section.alt{background:#e4dfd3}
.bg-section.dark{background:#17120e;color:#fff}
.bg-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end}
.bg-head h2{margin:0;font-family:var(--font-display);font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-.035em}
.bg-head p{max-width:760px;margin:0;font-size:18px;line-height:1.7}
.bg-num{display:block;margin-bottom:20px;font-family:var(--font-display);font-size:15px;color:var(--h1-accent)}
.bg-section.dark .bg-num{color:#e9a15a}
.bg-loop{counter-reset:bg-step;list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.bg-loop li{position:relative;min-height:210px;padding:24px 22px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}
.bg-loop li::before{counter-increment:bg-step;content:counter(bg-step,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:14px;color:var(--h1-accent)}
/* Step connectors: a 30px badge centred on the shared border between two neighbouring cards.
   Cards in one grid row stretch to equal height, so top:50% puts every connector of the row on one line;
   the badge extends 15px into each card, inside the 22px side padding, so it never covers text.
   No connector after the last card of a row (the next step wraps) or after the final step, which closes the cycle in its own text. */
.bg-loop li::after{content:"→";position:absolute;z-index:2;top:50%;right:0;transform:translate(50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;background:#f0c99a;font-size:16px;line-height:1;color:var(--ink)}
.bg-loop li:nth-child(4n)::after,.bg-loop li:last-child::after{content:none}
.bg-loop li:last-child{background:#f0c99a}
.bg-loop h3{margin:26px 0 10px;font-size:19px;line-height:1.25}
.bg-loop p{margin:0;font-size:15px;line-height:1.55}
.bg-loop .bg-loop-return{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bg-loop-note{max-width:820px;margin:26px 0 0;font-size:15px;line-height:1.6;color:#3d3f40}
.bg-decisions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.bg-decisions article{padding:26px 24px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bg-decisions span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a4b1c}
.bg-decisions h3{margin:22px 0 10px;font-size:20px;line-height:1.3}
.bg-decisions p{margin:0;font-size:15.5px;line-height:1.6}
.bg-example{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;margin-top:70px;align-items:start}
.bg-example blockquote{margin:0;padding:28px 28px 26px;border-left:5px solid #c0742f;background:#fff;font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);line-height:1.3;letter-spacing:-.02em}
.bg-example ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.bg-example li{padding:14px 0;border-bottom:1px solid var(--ink);font-size:16px;line-height:1.55}
.bg-example li b{display:block;margin-bottom:3px}
.bg-gallery{display:grid;gap:70px;margin-top:60px}
.bg-pair{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:50px;align-items:start}
.bg-pair .bg-shot figcaption{color:#3d3f40}
.bg-pair .bg-shot figcaption b{color:var(--ink)}
.bg-pair h3{margin:0 0 14px;font-size:22px;line-height:1.3}
.bg-pair p{margin:0 0 14px;font-size:16.5px;line-height:1.65}
.bg-pair ul{margin:0 0 14px;padding-left:20px}
.bg-pair li{margin-bottom:8px;font-size:16px;line-height:1.55}
.bg-pair>div>*:last-child{margin-bottom:0}
.bg-section.dark .bg-pair .bg-shot figcaption{color:#d8cfc3}
.bg-section.dark .bg-pair .bg-shot figcaption b{color:#e9a15a}
.bg-section.dark .bg-pair p,.bg-section.dark .bg-pair li{color:#ece4d9}
.bg-section.dark .bg-head p{color:#ece4d9}
.bg-has{display:grid;grid-template-columns:repeat(2,1fr);gap:0 50px;margin-top:60px;border-top:1px solid var(--ink)}
.bg-has p{margin:0;padding:16px 0;border-bottom:1px solid var(--ink);font-size:16px;line-height:1.55}
.bg-has b{font-weight:700}
.bg-next{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:60px}
.bg-next h3{margin:0 0 14px;font-size:20px}
.bg-next ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.bg-next li{padding:13px 0;border-bottom:1px solid var(--ink);font-size:16px;line-height:1.55}
.bg-flow{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #4a3a2d;border-left:1px solid #4a3a2d}
.bg-flow li{padding:24px 20px;border-right:1px solid #4a3a2d;border-bottom:1px solid #4a3a2d}
.bg-flow b{display:block;margin-bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e9a15a}
.bg-flow p{margin:0;font-size:15px;line-height:1.55;color:#ece4d9}
.bg-related{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.bg-related a{min-height:190px;padding:24px 22px;display:flex;flex-direction:column;color:inherit;text-decoration:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:background-color .18s ease}
.bg-related a:hover,.bg-related a:focus-visible{background:#fff}
.bg-related span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a4b1c}
.bg-related b{margin-top:34px;font-size:19px;line-height:1.3}
.bg-related small{margin-top:auto;padding-top:16px;font-size:14px;line-height:1.5}
.bg-section a:not(.button){color:inherit}
@media(max-width:1000px){
.bg-hero-text,.bg-head,.bg-example,.bg-pair,.bg-next{grid-template-columns:1fr;gap:34px}
.bg-loop{grid-template-columns:repeat(2,1fr)}
.bg-loop li:nth-child(2n)::after{content:none}
.bg-decisions{grid-template-columns:repeat(2,1fr)}
.bg-flow{grid-template-columns:repeat(2,1fr)}
.bg-related{grid-template-columns:repeat(2,1fr)}
.bg-facts{grid-template-columns:repeat(2,1fr)}
.bg-facts div:nth-child(2){border-right:0}
.bg-facts div:nth-child(3){padding-left:0}
.bg-facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
.bg-hero{padding:60px 18px 0}
.bg-hero .bg-shot{margin-top:40px;padding-bottom:56px}
.bg-section{padding:70px 18px}
.bg-facts{padding:0 18px}
.bg-loop,.bg-decisions,.bg-flow,.bg-related,.bg-has{grid-template-columns:1fr}
.bg-loop li{min-height:0}
/* Single column: the connector moves to the centre of the bottom border and points down to the next card. */
.bg-loop li:nth-child(n)::after{content:"↓";top:auto;right:auto;bottom:0;left:50%;transform:translate(-50%,50%)}
.bg-loop li:last-child::after{content:none}
.bg-related a{min-height:0}
.bg-shot figcaption{font-size:13px}
.bg-example blockquote{padding:22px 20px}
}
@media(max-width:520px){
.bg-facts{grid-template-columns:1fr}
.bg-facts div,.bg-facts div+div{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}
.bg-facts div:last-child{border-bottom:0}
.bg-hero h1{font-size:36px;overflow-wrap:break-word;hyphens:auto}
}
@media(prefers-reduced-motion:reduce){.bg-related a{transition:none}}