/* CULTURE BREW - style.css (v3 "Scroll Story")
   Palette: #6B2737 Berry Burgundy | #D9A5A8 Dusty Rose | #111111 Black | #FFFFFF White
   Type: H2 36/700 | H3 24/600 | Body 15/400 | Buttons 16/700. Dark mode: darkmode.css. Animations: script.js */
:root{--burgundy:#6B2737;--deep:#4d1b27;--rose:#D9A5A8;--black:#111;--white:#fff;
--bg:#fff;--text:#241c1e;--heading:#111;--accent:#6B2737;--surface:#fff;--tint:#f7e9ea;--line:rgba(17,17,17,.16);--focus:#6B2737;
--head:"Playfair Display",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--hh:76px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.7 var(--body);color:var(--text);background:var(--bg);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:3px}
ul,ol,dl,dd{margin:0;padding:0}li{list-style:none}
p{margin:0 0 16px;font-size:15px;font-weight:400}
h1,h2,h3{font-family:var(--head);color:var(--heading);margin:0 0 14px;line-height:1.2}
h1{font-size:clamp(42px,7vw,84px);font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.04}
h2{font-size:36px;font-weight:700}h3{font-size:24px;font-weight:600}
address{font-style:normal;font-size:15px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:300;background:var(--burgundy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
.container{width:min(1180px,100% - 48px);margin-inline:auto}
.narrow{max-width:860px}.center{text-align:center}
.progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:250;background:linear-gradient(90deg,var(--burgundy),var(--rose));transform:scaleX(var(--p,0));transform-origin:0 50%}
html[dir="rtl"] .progress{transform-origin:100% 50%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 32px;font:700 16px/1.2 var(--body);border:2px solid transparent;border-radius:999px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background-color .25s,color .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn-primary{background:var(--burgundy);color:#fff}.btn-primary:hover{background:var(--deep)}
.btn-light{background:#fff;color:var(--burgundy)}.btn-light:hover{background:var(--rose);color:#111}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn-row.center{justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:200;background:rgba(17,17,17,.94);backdrop-filter:blur(10px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hh)}
.brand{font:700 24px/1 var(--head);letter-spacing:2px;color:#fff;text-decoration:none;white-space:nowrap}.brand span{color:var(--rose)}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav>ul{display:flex;align-items:center;gap:4px}
.main-nav a,.dropdown-toggle{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font:600 15px/1.2 var(--body);color:#fff;background:none;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:background-color .2s}
.main-nav a:hover,.dropdown-toggle:hover{background:rgba(217,165,168,.22)}
.main-nav a[aria-current="page"]{background:var(--burgundy)}
.dropdown-toggle::after{content:"";width:7px;height:7px;margin-inline-start:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.has-dropdown{position:relative}
.dropdown{position:absolute;inset-inline-start:0;top:100%;min-width:190px;padding:8px;background:#111;border:1px solid var(--rose);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;width:100%}
.header-tools{display:flex;gap:8px}
.header-tools .join-btn{min-height:44px;padding:8px 22px;font:700 16px/1.2 var(--body);color:#111;background:var(--rose);border-radius:999px}
.header-tools .join-btn:hover{background:#fff;color:#111}
.tool-btn{min-height:44px;min-width:64px;padding:8px 16px;font:600 15px/1 var(--body);color:#fff;background:transparent;border:2px solid var(--rose);border-radius:999px;cursor:pointer;transition:.2s}
.tool-btn:hover,.tool-btn[aria-pressed="true"]{background:var(--rose);color:#111}
.site-header :focus-visible{outline-color:var(--rose)}
.menu-toggle{display:none;width:48px;height:48px;padding:0;background:none;border:2px solid var(--rose);border-radius:14px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--rose);transition:transform .25s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sections */
.section{padding:110px 0;position:relative;overflow-x:clip}
.section-tint{background:var(--tint)}
.section-burgundy{background:var(--burgundy);color:#fff}
.section-dark{background:var(--black);color:#fff}
.section-burgundy h2,.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:700px;margin:0 auto 56px;text-align:center}.section-head.left{margin-inline:0;text-align:start}
.eyebrow{display:inline-block;margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.section-burgundy .eyebrow,.section-dark .eyebrow,.hero .eyebrow,.taproom .eyebrow{color:var(--rose)}

/* Hero */
.hero{position:relative;background:var(--black);overflow:hidden;padding:90px 0 0}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:calc(100vh - var(--hh) - 90px);padding-bottom:70px}
.hero-text>*{max-width:620px}.hero p{color:rgba(255,255,255,.9)}.lead{font-size:18px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;transform:translate3d(0,var(--py,0),0);animation:float 9s ease-in-out infinite}
.b1{width:460px;height:460px;background:var(--burgundy);top:-120px;inset-inline-end:-80px}
.b2{width:320px;height:320px;background:var(--rose);opacity:.25;bottom:60px;inset-inline-start:-100px;animation-delay:-4s}
@keyframes float{50%{margin-top:34px}}
.hero-art{position:relative;aspect-ratio:1;max-width:480px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.hero-art img{width:88%;height:88%;margin:6%;object-fit:cover;border-radius:50%;border:6px solid var(--rose)}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--rose);animation:spin 30s linear infinite}
.ring::after{content:"";position:absolute;top:8%;inset-inline-start:8%;width:22px;height:22px;border-radius:50%;background:var(--rose)}
.ring.dashed{border-style:dashed;border-color:var(--burgundy)}.ring.dashed::after{background:var(--burgundy)}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee,.big-marquee{overflow:hidden;direction:ltr;white-space:nowrap}
.marquee{position:relative;z-index:2;border-block:1px solid rgba(217,165,168,.35);padding:16px 0;font:600 24px/1 var(--head);color:var(--rose)}
.marquee-track{display:inline-flex;animation:slide 28s linear infinite}
.marquee-track span{padding-inline-end:24px}
@keyframes slide{to{transform:translateX(-50%)}}

/* Word reveal for hero h1 */
.js [data-words-in] .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s + .2s)}
@keyframes wordIn{to{opacity:1;transform:none}}

/* Reveal system */
.js [data-reveal]{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),clip-path 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal="up"]{transform:translateY(48px)}
.js [data-reveal="left"]{transform:translateX(90px)}
html[dir="rtl"].js [data-reveal="left"]{transform:translateX(-90px)}
.js [data-reveal="zoom"]{transform:scale(.8)}
.js [data-reveal="clip"]{opacity:1}
.js [data-reveal="clip"] img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"].js [data-reveal="clip"] img{clip-path:inset(0 0 0 100%)}
.js [data-reveal="clip"].in img{clip-path:inset(0 0 0 0)}
.js [data-reveal].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* 2 Flavour accordion: expanding panels + autoplay */
.faccordion{display:flex;gap:14px;height:540px}
.fpanel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:32px;background:var(--black);border:2px solid transparent;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1),border-color .4s}
.fpanel.is-active{flex-grow:4.4;border-color:var(--rose)}
.fpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);transform:scale(1.15);transition:filter .8s,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.fpanel.is-active img{filter:none;transform:scale(1)}
.fpanel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(107,39,55,.92),rgba(17,17,17,.1) 65%);opacity:.7;transition:opacity .6s}
.fpanel.is-active::before{opacity:1}
.fpanel-btn{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;background:none;border:0;color:#fff;cursor:pointer}
.fpanel.is-active .fpanel-btn{pointer-events:none}
.fpanel-btn:focus-visible{outline:3px solid var(--rose);outline-offset:-6px;border-radius:32px}
.fpanel-num{font:700 15px/1 var(--body);letter-spacing:2px;color:var(--rose);transition:opacity .3s}
.fpanel-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 24px/1 var(--head);letter-spacing:1px;white-space:nowrap;transition:opacity .3s}
.fpanel.is-active .fpanel-label,.fpanel.is-active .fpanel-num{opacity:0}
.fpanel-body{position:absolute;z-index:3;inset-inline-start:0;bottom:0;width:460px;max-width:100%;padding:36px;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .4s,transform .5s,visibility 0s .4s}
.fpanel.is-active .fpanel-body{opacity:1;visibility:visible;transform:none;transition:opacity .6s .35s,transform .8s .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.fpanel-body h3{color:#fff;margin-bottom:6px}.fpanel-body p{color:rgba(255,255,255,.92)}.fpanel-body .btn{margin-top:6px}
.fpanel-timer{position:absolute;z-index:4;inset-inline:0;bottom:0;height:5px;background:var(--rose);transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] .fpanel-timer{transform-origin:100% 50%}
.faccordion.auto .fpanel.is-active .fpanel-timer{animation:ftimer 4.5s linear forwards}
@keyframes ftimer{to{transform:scaleX(1)}}
.js .faccordion:not(.in) .fpanel{opacity:0}
.faccordion.in .fpanel{animation:fpIn .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*.13s)}
@keyframes fpIn{from{opacity:0;transform:translateY(70px) scale(.92)}}

/* 3 Story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.story-media{position:sticky;top:calc(var(--hh) + 24px);margin:0}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 28px 28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.stats li{padding:18px;border-top:3px solid var(--burgundy);font-size:15px}
.stats strong{display:block;font:700 40px/1.1 var(--head);color:var(--accent)}

/* 4 Fermentation jar (scroll-driven) */
.ferment{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.jar{position:sticky;top:calc(var(--hh) + 40px);text-align:center}
.jar::before{content:"";position:absolute;inset:-10% -10% 10%;background:radial-gradient(closest-side,rgba(107,39,55,.6),transparent);z-index:0}
.jar svg{position:relative;z-index:1;display:block;width:min(320px,100%);height:auto;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.jar-day{position:relative;z-index:1;margin:16px 0 0;font:600 24px/1 var(--head);color:var(--rose)}
.jar .glass{fill:rgba(255,255,255,.06);stroke:var(--rose);stroke-width:3}
.jar .shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.22}
.jar .lid{fill:var(--burgundy);stroke:var(--rose);stroke-width:2}
.jar .liquid{transform:translateY(215px);transition:transform 2.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.jar.in .liquid{transform:none}
.jar .liquid.base{fill:var(--rose);opacity:.8}
.jar .liquid.deep{fill:var(--burgundy);opacity:0}
.jar[data-stage="1"] .liquid.deep{opacity:.22}.jar[data-stage="2"] .liquid.deep{opacity:.6}.jar[data-stage="3"] .liquid.deep{opacity:.92}
.jar .scoby{fill:#f7e9ea;stroke:var(--rose);stroke-width:2;opacity:0;transform:translateY(-14px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.jar:not([data-stage="0"]) .scoby{opacity:.95;transform:none}
.jar .bub{fill:#fff;opacity:0}
.jar[data-stage="2"] .bub:not(.x),.jar[data-stage="3"] .bub{animation:rise 4s ease-in infinite;animation-delay:var(--d)}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.75}100%{transform:translateY(-165px);opacity:0}}
.fsteps{margin:36px 0 28px}
.fstep{display:flex;flex-direction:column;justify-content:center;min-height:46vh;padding:24px 0 24px 28px;border-inline-start:3px solid rgba(217,165,168,.25);opacity:.3;transition:opacity .5s,border-color .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.fstep.on{opacity:1;border-color:var(--rose);transform:translateX(10px)}
html[dir="rtl"] .fstep.on{transform:translateX(-10px)}
.fday{margin-bottom:8px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rose)}
.fstep p{margin:0;max-width:520px;color:rgba(255,255,255,.88)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{padding:10px 20px;font-weight:600;color:#fff;border:1px solid var(--rose);border-radius:999px}

/* 5 Stacking process */
.stack{display:grid;gap:24px}
.stack li{position:sticky;top:calc(var(--hh) + 20px);display:flex;gap:32px;align-items:center;min-height:240px;padding:40px;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.stack li:nth-child(2){top:calc(var(--hh) + 44px)}.stack li:nth-child(3){top:calc(var(--hh) + 68px)}.stack li:nth-child(4){top:calc(var(--hh) + 92px)}
.big-num{font:700 88px/1 var(--head);opacity:.9}
.stack p{margin:0;max-width:520px}
.card-a{background:var(--black);color:#fff}.card-a h3{color:#fff}.card-a .big-num{color:var(--rose)}
.card-b{background:var(--burgundy);color:#fff}.card-b h3{color:#fff}.card-b .big-num{color:var(--rose)}
.card-c{background:var(--rose);color:#111}.card-c h3{color:#111}.card-c .big-num{color:var(--burgundy)}
.card-d{background:var(--surface);color:var(--text);border:2px solid var(--burgundy)}.card-d .big-num{color:var(--accent)}

/* 6 Bottles */
.bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.bottle{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:24px;background:#1b1416;border:1px solid rgba(217,165,168,.35);border-radius:28px;transition:transform .4s,border-color .4s}
.bottle:hover{transform:translateY(-10px) rotate(-1deg);border-color:var(--rose)}
.bottle.lift{margin-top:48px}
.bottle img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:22px}
.bottle p{color:rgba(255,255,255,.85)}.bottle .profile{font-weight:700;color:var(--rose);margin-bottom:8px}
.bottle .btn{margin-top:8px}
.badge{position:absolute;top:16px;inset-inline-end:16px;z-index:2;padding:8px 16px;font-size:15px;font-weight:700;color:#fff;background:var(--burgundy);border:1px solid var(--rose);border-radius:999px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* 7 Why rows */
.why-rows>div{position:relative;display:grid;grid-template-columns:90px 1fr 1.3fr;gap:24px;align-items:center;padding:34px 12px;transition:padding .35s,background-color .35s}
.why-rows>div::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s .3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .why-rows>div::after{transform-origin:100% 50%}
.why-rows>div.in::after,html:not(.js) .why-rows>div::after{transform:scaleX(1)}
.why-rows>div:hover{background:var(--tint);padding-inline-start:28px}
.why-rows .n{font:700 40px/1 var(--head);color:var(--accent)}
.why-rows dt{font:600 24px/1.25 var(--head);color:var(--heading)}.why-rows dd{margin:0}

/* 8 Ingredients */
.ing{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.ing-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.ing-art img{width:86%;height:86%;margin:7%;object-fit:cover;border-radius:50%}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tags li{padding:10px 20px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--burgundy);border-radius:999px}
.tags li:nth-child(odd){background:var(--rose);color:#111;border-color:var(--rose)}

/* 9 Taproom */
.taproom{position:relative;display:grid;place-items:center;min-height:86vh;overflow:hidden;background:var(--black);text-align:center}
.taproom-bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0),0)}
.taproom-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.7),rgba(107,39,55,.6))}
.taproom-content{position:relative;z-index:1;max-width:760px;padding:100px 0}
.taproom h2{color:#fff;font-size:36px}.taproom p{color:rgba(255,255,255,.92)}

/* 10 CTA */
.final-cta{background:var(--deep);color:#fff;text-align:center;padding-top:80px}
.big-marquee{margin-bottom:56px;font:700 clamp(60px,10vw,140px)/1 var(--head);color:transparent;-webkit-text-stroke:2px var(--rose)}
.big-marquee .marquee-track{animation-duration:22s;animation-direction:reverse}
.final-cta h2{color:#fff}.final-cta p{color:rgba(255,255,255,.92)}.final-cta a{color:#fff}
.final-cta .btn-primary{background:#fff;color:var(--burgundy)}.final-cta .btn-primary:hover{background:var(--rose);color:#111}
.newsletter-form{margin:28px auto 20px;max-width:540px;text-align:start}
.newsletter-form label{display:block;margin-bottom:8px;font-weight:700}
.field-row{display:flex;gap:12px}
.newsletter-form input{flex:1;min-width:0;min-height:52px;padding:12px 22px;font:400 15px/1.2 var(--body);color:#111;background:#fff;border:2px solid transparent;border-radius:999px}
.newsletter-form input::placeholder{color:#6f6366}
.newsletter-form input:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.form-status{min-height:24px;margin:10px 0 0;font-weight:700}.form-status.error{color:#ffd9dc}

/* Footer */
.site-footer{background:#0a0a0a;color:rgba(255,255,255,.86);padding-top:76px}
.site-footer .brand{display:inline-block;margin-bottom:14px}
.site-footer h3{font-size:24px;color:var(--rose)}
.site-footer a{color:rgba(255,255,255,.86);text-decoration:none;display:inline-block;padding:4px 0}
.site-footer a:hover{color:var(--rose);text-decoration:underline}.site-footer .brand:hover{text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:52px}
.footer-grid li{margin-bottom:4px}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.site-footer .social-links a{display:grid;place-items:center;width:46px;height:46px;padding:0;color:#fff;border:1.5px solid rgba(217,165,168,.55);border-radius:50%;text-decoration:none;transition:background-color .25s,color .25s,transform .25s}
.site-footer .social-links a:hover{background:var(--rose);color:#111;transform:translateY(-4px);text-decoration:none}
.social-links svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{padding:24px 0;border-top:1px solid rgba(255,255,255,.16)}.footer-bottom p{margin:0}

/* Responsive */
@media(max-width:1024px){
  .hero-grid,.story,.ing{grid-template-columns:1fr;gap:44px}
  .hero-grid{min-height:0}.hero-art{max-width:380px}
  .story-media{position:relative;top:0;max-width:440px;margin-inline:auto}
  .bottles{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.bottle.lift{margin-top:0}
  .ferment{display:block}
  .jar{top:var(--hh);z-index:3;padding:8px 0 12px;background:#111}
  .jar svg{width:150px}.jar-day{margin-top:6px}
  .fstep{min-height:36vh}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .menu-toggle{display:flex}
  .main-nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:16px;max-height:calc(100vh - var(--hh));overflow-y:auto;padding:16px 24px 24px;background:#111;border-bottom:2px solid var(--burgundy)}
  .main-nav.open{display:flex}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a,.dropdown-toggle{width:100%;justify-content:space-between;border-radius:12px}
  .dropdown{position:static;display:none;opacity:1;visibility:visible;transform:none;border:0;border-inline-start:3px solid var(--rose);border-radius:0;margin:4px 0 4px 12px;padding:0 0 0 8px}
  .has-dropdown:hover .dropdown{display:none}.has-dropdown.open .dropdown{display:block}
  .header-tools{flex-wrap:wrap}.header-tools .tool-btn{flex:1}.header-tools .join-btn{flex:1 1 100%}
}
@media(max-width:768px){
  .section{padding:76px 0}.container{width:min(1180px,100% - 40px)}
  .stats{grid-template-columns:1fr}
  .stack li{flex-direction:column;align-items:flex-start;gap:8px;padding:28px;min-height:0}.big-num{font-size:64px}
  .why-rows>div{grid-template-columns:56px 1fr;gap:8px 16px}.why-rows dd{grid-column:2}
  .taproom{min-height:70vh}
  .faccordion{flex-direction:column;height:auto}
  .fpanel{flex:none;height:84px;transition:height .8s cubic-bezier(.2,.8,.2,1),border-color .4s}.fpanel.is-active{height:420px}
  .fpanel-btn{flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:0 24px}
  .fpanel-label{writing-mode:horizontal-tb;transform:none}.fpanel-body{width:100%;padding:24px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}.field-row{flex-direction:column}.btn-row .btn,.field-row .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-words-in] .w{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ==========================================
   CULTURE BREW — THREE HOMEPAGE SECTIONS
========================================== */

.cb-pour-section,
.cb-mood-section,
.cb-ferment-section {
  width: 100%;
  overflow: hidden;
}

.cb-pour-section {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
  padding: 100px max(6%, calc((100% - 1240px) / 2));
  background: #f8f3f0;
  color: #111111;
}

.cb-pour-image {
  min-height: 490px;
  position: relative;
  overflow: hidden;
  background: #d9a5a8;
}

.cb-pour-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 490px;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cb-pour-image:hover img {
  transform: scale(1.045);
}

.cb-image-stamp {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #6b2737;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transform: rotate(-10deg);
}

.cb-pour-content {
  max-width: 500px;
}

.cb-eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: #6b2737;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.5;
}

.cb-pour-content h2,
.cb-mood-heading h2,
.cb-ferment-intro h2 {
  margin: 0 0 22px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.cb-pour-content h2 em,
.cb-mood-heading h2 em,
.cb-ferment-intro h2 em {
  color: #6b2737;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
}

.cb-pour-content > p,
.cb-mood-heading > p,
.cb-mood-description > p,
.cb-ferment-intro > p,
.cb-ferment-step p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
}

.cb-taste-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 22px 0;
  margin: 22px 0;
  border-top: 1px solid rgba(107, 39, 55, 0.25);
  border-bottom: 1px solid rgba(107, 39, 55, 0.25);
}

.cb-taste-notes span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.cb-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 50px;
  padding: 14px 20px;
  border: 1px solid #6b2737;
  background: #6b2737;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}

.cb-custom-btn:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  transform: translateY(-2px);
}


/* SECTION 2 — FLAVOUR MOOD */

.cb-mood-section {
  padding: 100px max(6%, calc((100% - 1240px) / 2));
  background: #ffffff;
  color: #111111;
}

.cb-mood-heading {
  max-width: 740px;
  margin: 0 auto 48px;
  text-align: center;
}

.cb-mood-heading h2 {
  margin-bottom: 14px;
}

.cb-mood-heading > p {
  margin: 0;
}

.cb-mood-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: stretch;
}

.cb-mood-options {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cb-mood-option {
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 16px 12px;
  border: 0;
  border-bottom: 1px solid #e5d6d8;
  background: transparent;
  color: #111111;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, padding 0.25s ease;
}

.cb-mood-option:first-child {
  border-top: 1px solid #e5d6d8;
}

.cb-mood-option:hover,
.cb-mood-option.is-active {
  padding-left: 20px;
  background: #f8eff0;
}

.cb-mood-number {
  color: #6b2737;
  font-size: 15px;
  font-weight: 700;
}

.cb-mood-name {
  font-size: 18px;
  font-weight: 600;
}

.cb-mood-arrow {
  color: #6b2737;
  font-size: 22px;
  transition: transform 0.25s ease;
}

.cb-mood-option.is-active .cb-mood-arrow {
  transform: rotate(45deg);
}

.cb-mood-result {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  min-width: 0;
  background: #f8f3f0;
}

.cb-mood-visual {
  position: relative;
  min-height: 340px;
  background: #d9a5a8;
}

.cb-mood-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.cb-mood-tag {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 10px 12px;
  background: #ffffff;
  color: #6b2737;
  font-size: 15px;
  font-weight: 700;
}

.cb-mood-description {
  align-self: center;
  padding: 28px;
}

.cb-mood-description .cb-eyebrow {
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.cb-mood-description h3 {
  margin: 0 0 14px;
  color: #6b2737;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.cb-mood-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #6b2737;
  font-size: 16px;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}


/* SECTION 3 — FERMENTATION STORY */

.cb-ferment-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(35px, 7vw, 100px);
  padding: 100px max(6%, calc((100% - 1240px) / 2));
  background: #6b2737;
  color: #ffffff;
}

.cb-ferment-intro {
  align-self: start;
  position: sticky;
  top: 100px;
}

.cb-ferment-intro .cb-eyebrow {
  color: #d9a5a8;
}

.cb-ferment-intro h2 em {
  color: #d9a5a8;
}

.cb-ferment-intro > p {
  max-width: 420px;
  color: #f5e9eb;
}

.cb-btn-light {
  margin-top: 18px;
  border-color: #ffffff;
  background: #ffffff;
  color: #6b2737;
}

.cb-btn-light:hover {
  border-color: #d9a5a8;
  background: #d9a5a8;
  color: #111111;
}

.cb-ferment-steps {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.cb-ferment-step {
  display: grid;
  grid-template-columns: 45px 1fr 32px;
  gap: 20px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: padding 0.25s ease, background 0.25s ease;
}

.cb-ferment-step:hover {
  padding-left: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.cb-step-index {
  color: #d9a5a8;
  font-size: 15px;
  font-weight: 700;
}

.cb-step-label {
  color: #d9a5a8;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.cb-ferment-step h3 {
  margin: 10px 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.cb-ferment-step p {
  margin: 0;
  color: #f5e9eb;
}

.cb-step-mark {
  color: #d9a5a8;
  font-size: 26px;
}

.cb-ferment-note {
  font-size: 15px;
  line-height: 1.8;
  color: #f5e9eb;
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .cb-pour-section,
  .cb-ferment-section {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 70px 5%;
  }

  .cb-pour-image,
  .cb-pour-image img {
    min-height: 420px;
  }

  .cb-mood-section {
    padding: 70px 5%;
  }

  .cb-mood-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cb-mood-result {
    min-height: 320px;
  }

  .cb-ferment-intro {
    position: static;
  }
}

@media (max-width: 600px) {
  .cb-pour-section,
  .cb-ferment-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 52px 20px;
  }

  .cb-pour-image,
  .cb-pour-image img {
    min-height: 320px;
  }

  .cb-image-stamp {
    width: 82px;
    height: 82px;
    font-size: 15px;
  }

  .cb-pour-content h2,
  .cb-mood-heading h2,
  .cb-ferment-intro h2 {
    font-size: 36px;
  }

  .cb-mood-section {
    padding: 52px 20px;
  }

  .cb-mood-heading {
    margin-bottom: 30px;
    text-align: left;
  }

  .cb-mood-result {
    grid-template-columns: 1fr;
  }

  .cb-mood-visual,
  .cb-mood-visual img {
    min-height: 260px;
    max-height: 320px;
  }

  .cb-mood-description {
    padding: 24px;
  }

  .cb-mood-name {
    font-size: 16px;
  }

  .cb-ferment-step {
    grid-template-columns: 32px 1fr 22px;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-pour-image img,
  .cb-custom-btn,
  .cb-mood-option,
  .cb-mood-arrow,
  .cb-ferment-step {
    transition: none;
  }
}
.cb-pour-image {
  position: relative;
  overflow: hidden;
}

.cb-pour-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================
   CULTURE BREW — LOGIN PAGE ONLY
   Existing fonts, brand and theme preserved
========================================= */

.cb-login-page {
    --cb-login-burgundy: #6B2737;
    --cb-login-deep: #4d1b27;
    --cb-login-rose: #D9A5A8;
    --cb-login-black: #111111;
    --cb-login-white: #ffffff;

    --cb-login-panel: #ffffff;
    --cb-login-text: #241c1e;
    --cb-login-muted: #76696c;
    --cb-login-border: #e7dadd;
    --cb-login-input: #ffffff;

    min-height: 100vh;
    margin: 0;
    font-family: var(--body, "Inter", sans-serif);
    color: var(--cb-login-text);
    background: var(--cb-login-panel);
}

.cb-login-page *,
.cb-login-page *::before,
.cb-login-page *::after {
    box-sizing: border-box;
}

.cb-login-page a {
    text-decoration: none;
}

.cb-login-page button,
.cb-login-page input {
    font: inherit;
}

.cb-login-page button {
    cursor: pointer;
}

.cb-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 100vh;
}

/* LEFT VISUAL PANEL */

.cb-login-page .cb-login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 44px clamp(28px, 5vw, 76px);
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(28, 10, 16, 0.83),
            rgba(75, 23, 37, 0.76) 55%,
            rgba(17, 17, 17, 0.86)
        ),
        url("https://images.unsplash.com/photo-1551538827-9c037cb4f32a?auto=format&fit=crop&w=1400&q=85")
        center / cover no-repeat;
}

/* Social Login Divider */
.cb-login-page .cb-social-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 18px;
}

.cb-login-page .cb-social-divider span {
    flex: 1;
    height: 1px;
    background: #dedede;
}

.cb-login-page .cb-social-divider p {
    margin: 0;
    color: #777;
    font-size: 13px;
    white-space: nowrap;
}

/* Social Login Buttons */
.cb-login-page .cb-social-login {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.cb-login-page .cb-social-btn {
    width: 48px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-size: 19px;
    cursor: pointer;
    transition: border-color 0.25s ease,
                transform 0.25s ease;
}

.cb-login-page .cb-social-btn:hover {
    border-color: #6B2737;
    transform: translateY(-2px);
}

/* Dark Mode */
html[data-theme="dark"] .cb-login-page .cb-social-divider span {
    background: #444;
}

html[data-theme="dark"] .cb-login-page .cb-social-divider p {
    color: #bbb;
}

html[data-theme="dark"] .cb-login-page .cb-social-btn {
    background: #222;
    border-color: #444;
    color: #fff;
}

html[data-theme="dark"] .cb-login-page .cb-social-btn:hover {
    border-color: #D9A5A8;
}

/* RTL Support */
html[dir="rtl"] .cb-login-page .cb-social-divider {
    direction: rtl;
}
.cb-login-page .cb-social-btn i {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    color: #222;
}

html[data-theme="dark"] .cb-login-page .cb-social-btn i {
    color: #fff;
}
.cb-login-page #cbLoginForm button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative;
}

.cb-login-page #cbLoginForm button[type="submit"] > span:last-child {
    position: absolute;
    right: 24px;
}

.cb-login-page .cb-login-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 360px;
    right: -140px;
    bottom: 12%;
    border: 1px solid rgba(217, 165, 168, 0.4);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(217, 165, 168, 0.05),
        0 0 0 75px rgba(217, 165, 168, 0.04);
}

.cb-login-page .cb-login-brand {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--head, "Playfair Display", Georgia, serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #ffffff;
}

.cb-login-page .cb-login-brand span {
    color: var(--cb-login-rose);
}

.cb-login-page .cb-login-visual-content {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding: 65px 0;
}

.cb-login-page .cb-login-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--cb-login-burgundy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 2px;
}

.cb-login-page .cb-login-visual .cb-login-eyebrow {
    color: var(--cb-login-rose);
}

.cb-login-page .cb-login-visual h1 {
    margin: 0 0 24px;
    color: #ffffff;
    font-family: var(--head, "Playfair Display", Georgia, serif);
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}

.cb-login-page .cb-login-visual h1 em,
.cb-login-page .cb-login-heading h2 em {
    color: var(--cb-login-rose);
    font-family: var(--head, "Playfair Display", Georgia, serif);
    font-weight: 500;
}

.cb-login-page .cb-login-visual-content > p {
    max-width: 410px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.9;
}

.cb-login-page .cb-login-visual-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    color: var(--cb-login-rose);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.cb-login-page .cb-login-note-line {
    width: 44px;
    height: 1px;
    background: var(--cb-login-rose);
}

.cb-login-page .cb-login-visual-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

/* RIGHT LOGIN PANEL */

.cb-login-page .cb-login-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    padding: 30px clamp(24px, 4vw, 64px) 22px;
    background: var(--cb-login-border);
    color: var(--cb-login-text);
}

.cb-login-page .cb-login-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.cb-login-page .cb-login-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cb-login-muted);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.cb-login-page .cb-login-back:hover {
    color: var(--cb-login-burgundy);
}

.cb-login-page .cb-login-back span {
    font-size: 18px;
}

.cb-login-page .cb-login-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Center the login welcome content */
.cb-login-page .cb-login-welcome {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.cb-login-page .cb-login-welcome span,
.cb-login-page .cb-login-welcome h2,
.cb-login-page .cb-login-welcome p {
    width: 100% !important;
    text-align: center !important;
}

.cb-login-page .cb-login-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--cb-login-border);
    border-radius: 999px;
    background: transparent;
    color: var(--cb-login-text);
    font-size: 12px;
    font-weight: 600;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}
/* Login page tools text colour only */
.cb-login-page .cb-login-tools .tool-btn {
    color: #6B2737;
}

.cb-login-page .cb-login-tool:hover,
.cb-login-page .cb-login-tool[aria-pressed="true"] {
    border-color: var(--cb-login-burgundy);
    background: var(--cb-login-burgundy);
    color: #ffffff;
}

/* FORM */

.cb-login-page .cb-login-form-wrap {
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 48px 0;
}

.cb-login-page .cb-login-heading {
    margin-bottom: 34px;
}

.cb-login-page .cb-login-heading .cb-login-eyebrow {
    margin-bottom: 12px;
}

.cb-login-page .cb-login-heading h2 {
    margin: 0 0 13px;
    color: var(--cb-login-text);
    font-family: var(--head, "Playfair Display", Georgia, serif);
    font-size: clamp(32px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.cb-login-page .cb-login-heading h2 em {
    color: var(--cb-login-burgundy);
}

.cb-login-page .cb-login-heading > p {
    margin: 0;
    color: var(--cb-login-muted);
    font-size: 14px;
    line-height: 1.8;
}

.cb-login-page .cb-login-form {
    display: grid;
    gap: 23px;
}

.cb-login-page .cb-login-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.cb-login-page .cb-login-field label,
.cb-login-page .cb-login-label-row > label {
    color: var(--cb-login-text);
    font-size: 13px;
    font-weight: 700;
}

.cb-login-page .cb-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.cb-login-page .cb-login-field input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid var(--cb-login-border);
    border-radius: 8px;
    outline: none;
    background: var(--cb-login-input);
    color: var(--cb-login-text);
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.cb-login-page .cb-login-field input::placeholder {
    color: #a3989a;
    opacity: 1;
}

.cb-login-page .cb-login-field input:focus {
    border-color: var(--cb-login-burgundy);
    box-shadow: 0 0 0 3px rgba(107, 39, 55, 0.1);
}

.cb-login-page .cb-login-password-wrap {
    position: relative;
}

.cb-login-page .cb-login-password-wrap input {
    padding-inline-end: 70px;
}

.cb-login-page .cb-login-show-password {
    position: absolute;
    top: 50%;
    inset-inline-end: 15px;
    transform: translateY(-50%);
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--cb-login-burgundy);
    font-size: 12px;
    font-weight: 700;
}

.cb-login-page .cb-login-text-link {
    color: var(--cb-login-burgundy);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cb-login-page .cb-login-text-link:hover {
    color: var(--cb-login-deep);
}

.cb-login-page .cb-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--cb-login-muted);
    font-size: 13px;
    cursor: pointer;
}

.cb-login-page .cb-login-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cb-login-burgundy);
}

.cb-login-page .cb-login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-height: 54px;
    padding: 15px 21px;
    border: 1px solid var(--cb-login-burgundy);
    border-radius: 8px;
    background: var(--cb-login-burgundy);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.cb-login-page .cb-login-submit span {
    font-size: 20px;
    transition: transform 0.25s ease;
}

.cb-login-page .cb-login-submit:hover {
    border-color: var(--cb-login-deep);
    background: var(--cb-login-deep);
    transform: translateY(-2px);
}

.cb-login-page .cb-login-submit:hover span {
    transform: translateX(4px);
}

.cb-login-page .cb-login-message {
    min-height: 0;
    margin: -8px 0 0;
    color: var(--cb-login-burgundy);
    font-size: 13px;
    line-height: 1.6;
}

.cb-login-page .cb-login-message:empty {
    display: none;
}

.cb-login-page .cb-login-signup {
    margin: 28px 0 0;
    color: var(--cb-login-muted);
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
}

.cb-login-page .cb-login-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 34px;
    color: var(--cb-login-muted);
    text-align: center;
    font-size: 11px;
    line-height: 1.7;
}

.cb-login-page .cb-login-bottom-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cb-login-rose);
}

.cb-login-page .cb-login-copyright {
    padding-top: 18px;
    border-top: 1px solid var(--cb-login-border);
    color: var(--cb-login-muted);
    text-align: center;
    font-size: 11px;
}

/* DARK MODE — login page only */

html[data-theme="dark"] .cb-login-page {
    --cb-login-panel: #111111;
    --cb-login-text: #efe4e5;
    --cb-login-muted: #c2afb3;
    --cb-login-border: rgba(217, 165, 168, 0.3);
    --cb-login-input: #1c1517;
}

html[data-theme="dark"] .cb-login-page .cb-login-heading h2 {
    color: #efe4e5;
}

html[data-theme="dark"] .cb-login-page .cb-login-heading h2 em,
html[data-theme="dark"] .cb-login-page .cb-login-text-link,
html[data-theme="dark"] .cb-login-page .cb-login-show-password {
    color: #D9A5A8;
}

html[data-theme="dark"] .cb-login-page .cb-login-tool:hover,
html[data-theme="dark"] .cb-login-page .cb-login-tool[aria-pressed="true"] {
    background: #D9A5A8;
    border-color: #D9A5A8;
    color: #111111;
}

html[data-theme="dark"] .cb-login-page .cb-login-submit {
    border-color: #D9A5A8;
}

html[data-theme="dark"] .cb-login-page .cb-login-submit:hover {
    background: #8a3348;
}

html[data-theme="dark"] .cb-login-page .cb-login-field input {
    color: #efe4e5;
}

html[data-theme="dark"] .cb-login-page .cb-login-field input:focus {
    border-color: #D9A5A8;
    box-shadow: 0 0 0 3px rgba(217, 165, 168, 0.12);
}

html[data-theme="dark"] .cb-login-page .cb-login-message {
    color: #D9A5A8;
}

/* RTL — login page controls and text */

html[dir="rtl"] .cb-login-page .cb-login-back span {
    display: inline-block;
    transform: rotate(180deg);
}

html[dir="rtl"] .cb-login-page .cb-login-visual-footer {
    direction: rtl;
}

html[dir="rtl"] .cb-login-page .cb-login-visual-content,
html[dir="rtl"] .cb-login-page .cb-login-heading,
html[dir="rtl"] .cb-login-page .cb-login-form {
    text-align: right;
}

html[dir="rtl"] .cb-login-page .cb-login-visual-note {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .cb-login-page .cb-login-label-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cb-login-page .cb-login-submit span {
    transform: rotate(180deg);
}

html[dir="rtl"] .cb-login-page .cb-login-submit:hover span {
    transform: rotate(180deg) translateX(4px);
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .cb-login-layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .cb-login-page .cb-login-visual {
        padding: 32px 28px;
    }

    .cb-login-page .cb-login-panel {
        padding-inline: 28px;
    }

    .cb-login-page .cb-login-visual h1 {
        font-size: clamp(38px, 5vw, 54px);
    }
}

@media (max-width: 680px) {
    .cb-login-layout {
        grid-template-columns: 1fr;
    }

    .cb-login-page .cb-login-visual {
        min-height: 330px;
        padding: 28px 24px;
    }

    .cb-login-page .cb-login-visual-content {
        padding: 40px 0 30px;
    }

    .cb-login-page .cb-login-visual h1 {
        font-size: 43px;
    }

    .cb-login-page .cb-login-visual-content > p {
        max-width: 430px;
    }

    .cb-login-page .cb-login-visual-footer {
        padding-top: 15px;
    }

    .cb-login-page .cb-login-panel {
        min-height: auto;
        padding: 24px;
    }

    .cb-login-page .cb-login-form-wrap {
        max-width: 480px;
        padding: 48px 0;
    }

    .cb-login-page .cb-login-heading h2 {
        font-size: 34px;
    }

    .cb-login-page .cb-login-copyright {
        margin-top: auto;
    }
}

@media (max-width: 380px) {
    .cb-login-page .cb-login-panel {
        padding-inline: 18px;
    }

    .cb-login-page .cb-login-topbar {
        align-items: flex-start;
    }

    .cb-login-page .cb-login-back {
        padding-top: 10px;
    }

    .cb-login-page .cb-login-tool {
        padding-inline: 10px;
    }

    .cb-login-page .cb-login-visual-footer {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-login-page *,
    .cb-login-page *::before,
    .cb-login-page *::after {
        scroll-behavior: auto;
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   CULTURE BREW — 404 ERROR PAGE
========================================== */

.cb-404-page {
    --cb404-primary: #6B2737;
    --cb404-accent: #D9A5A8;
    --cb404-bg: #FAF7F5;
    --cb404-surface: #FFFFFF;
    --cb404-text: #171313;
    --cb404-muted: #777071;
    --cb404-border: rgba(107, 39, 55, 0.15);

    margin: 0;
    min-height: 100vh;
    background: var(--cb404-bg);
    color: var(--cb404-text);
    font-family: "Inter", sans-serif;
}

.cb-404-page *,
.cb-404-page *::before,
.cb-404-page *::after {
    box-sizing: border-box;
}

.cb-error-wrapper {
    min-height: 100vh;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 7%;
    display: flex;
    flex-direction: column;
}

.cb-error-header {
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--cb404-border);
}

.cb-error-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--cb404-primary);
    text-decoration: none;
}

.cb-error-logo-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cb404-primary);
    color: #FFFFFF;
    font-size: 21px;
}

.cb-error-logo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-error-logo-text strong {
    font-family: "Playfair Display", serif;
    font-size: 21px;
    letter-spacing: 1.2px;
    line-height: 1.2;
}

.cb-error-logo-text small {
    font-size: 9px;
    letter-spacing: 2.8px;
    font-weight: 600;
}

.cb-error-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-error-control {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--cb404-border);
    border-radius: 6px;
    background: var(--cb404-surface);
    color: var(--cb404-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease;
}

.cb-error-control:hover {
    background: var(--cb404-primary);
    border-color: var(--cb404-primary);
    color: #FFFFFF;
}

/* Main Layout */

.cb-error-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    padding: 65px 0;
}

.cb-error-visual {
    min-width: 0;
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.cb-error-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(107, 39, 55, 0.16);
    border-radius: 50%;
}

.cb-error-orbit-one {
    width: min(90%, 390px);
    aspect-ratio: 1;
}

.cb-error-orbit-two {
    width: min(70%, 300px);
    aspect-ratio: 1;
    border-style: dashed;
    border-color: rgba(107, 39, 55, 0.25);
}

.cb-error-number {
    color: var(--cb404-primary);
    font-family: "Playfair Display", serif;
    font-size: clamp(130px, 17vw, 230px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -12px;
    opacity: 0.95;
}

.cb-error-bottle {
    width: clamp(90px, 12vw, 155px);
    height: clamp(175px, 23vw, 285px);
    margin: 0 -8px;
    position: relative;
    z-index: 2;
    transform: rotate(-5deg);
    filter: drop-shadow(0 20px 20px rgba(36, 13, 19, 0.18));
}

.cb-error-bottle img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.cb-error-fallback {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 30px 30px 20px 20px;
    background: linear-gradient(
        135deg,
        #A74D60 0%,
        #6B2737 48%,
        #35121C 100%
    );
    color: #F9E8E9;
    font-size: 85px;
}

.cb-error-leaf {
    position: absolute;
    color: var(--cb404-primary);
    font-size: 30px;
    opacity: 0.65;
}

.cb-error-leaf-one {
    top: 18%;
    left: 15%;
    transform: rotate(-35deg);
}

.cb-error-leaf-two {
    right: 12%;
    bottom: 20%;
    transform: rotate(35deg);
    color: #82956C;
}

.cb-error-sparkle {
    position: absolute;
    color: var(--cb404-primary);
    font-size: 28px;
}

.cb-sparkle-one {
    top: 17%;
    right: 20%;
}

.cb-sparkle-two {
    left: 18%;
    bottom: 17%;
    color: #B58A50;
}

/* Content */

.cb-error-copy {
    max-width: 530px;
}

.cb-error-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--cb404-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cb-error-eyebrow span {
    width: 22px;
    height: 1px;
    background: var(--cb404-accent);
}

.cb-error-copy h1 {
    margin: 0 0 20px;
    color: var(--cb404-text);
    font-family: "Playfair Display", serif;
    font-size: clamp(43px, 5vw, 68px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.cb-error-copy h1 em {
    color: var(--cb404-primary);
    font-weight: 500;
}

.cb-error-code {
    margin: 0 0 15px;
    color: var(--cb404-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cb-error-description {
    max-width: 440px;
    margin: 0;
    color: var(--cb404-muted);
    font-size: 15px;
    line-height: 1.9;
}

.cb-error-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.cb-error-home {
    min-height: 52px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--cb404-primary);
    border-radius: 5px;
    background: var(--cb404-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.cb-error-home:hover {
    background: #4E1B29;
    transform: translateY(-2px);
}

.cb-error-back {
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: var(--cb404-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cb-error-back:hover {
    color: var(--cb404-primary);
}

.cb-error-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 45px;
    padding-top: 22px;
    border-top: 1px solid var(--cb404-border);
}

.cb-error-note-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(217, 165, 168, 0.22);
    color: var(--cb404-primary);
    font-size: 17px;
}

.cb-error-note p {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.cb-error-note strong {
    color: var(--cb404-primary);
    font-size: 10px;
    letter-spacing: 1.2px;
}

.cb-error-note p span {
    color: var(--cb404-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* Footer */

.cb-error-footer {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--cb404-border);
    color: var(--cb404-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-align: center;
}

.cb-error-footer-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cb404-accent);
}

/* Dark Mode */

html[data-theme="dark"] .cb-404-page {
    --cb404-bg: #171315;
    --cb404-surface: #241C1F;
    --cb404-text: #F8F0F0;
    --cb404-muted: #BFB1B4;
    --cb404-border: rgba(217, 165, 168, 0.18);
    --cb404-primary: #D9A5A8;
    --cb404-accent: #6B2737;
}

html[data-theme="dark"] .cb-error-logo {
    color: #F2DCDD;
}

html[data-theme="dark"] .cb-error-logo-icon {
    background: #6B2737;
}

html[data-theme="dark"] .cb-error-number {
    color: #D9A5A8;
}

html[data-theme="dark"] .cb-error-orbit {
    border-color: rgba(217, 165, 168, 0.2);
}

html[data-theme="dark"] .cb-error-home {
    background: #6B2737;
    border-color: #6B2737;
    color: #FFFFFF;
}

html[data-theme="dark"] .cb-error-home:hover {
    background: #823748;
}

html[data-theme="dark"] .cb-error-control:hover {
    background: #6B2737;
    color: #FFFFFF;
}

/* RTL */

html[dir="rtl"] .cb-error-page,
html[dir="rtl"] .cb-error-content {
    direction: rtl;
}

html[dir="rtl"] .cb-error-eyebrow {
    letter-spacing: 1px;
}

html[dir="rtl"] .cb-error-home i {
    transform: rotate(180deg);
}

/* Responsive */

@media (max-width: 900px) {
    .cb-error-wrapper {
        padding: 0 5%;
    }

    .cb-error-content {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 45px 0;
    }

    .cb-error-visual {
        min-height: 320px;
    }

    .cb-error-number {
        font-size: clamp(140px, 25vw, 200px);
    }

    .cb-error-bottle {
        width: 115px;
        height: 220px;
    }

    .cb-error-copy {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .cb-error-eyebrow,
    .cb-error-actions {
        justify-content: center;
    }

    .cb-error-description {
        margin: 0 auto;
    }

    .cb-error-note {
        justify-content: center;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .cb-error-wrapper {
        padding: 0 20px;
    }

    .cb-error-header {
        min-height: 78px;
    }

    .cb-error-logo {
        gap: 8px;
    }

    .cb-error-logo-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .cb-error-logo-text strong {
        font-size: 15px;
    }

    .cb-error-logo-text small {
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .cb-error-controls {
        gap: 6px;
    }

    .cb-error-control {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 11px;
    }

    .cb-error-content {
        gap: 25px;
        padding: 35px 0;
    }

    .cb-error-visual {
        min-height: 255px;
    }

    .cb-error-number {
        font-size: clamp(105px, 29vw, 145px);
        letter-spacing: -7px;
    }

    .cb-error-bottle {
        width: 78px;
        height: 160px;
        margin: 0 -4px;
    }

    .cb-error-orbit-one {
        width: 85%;
    }

    .cb-error-orbit-two {
        width: 65%;
    }

    .cb-error-leaf {
        font-size: 21px;
    }

    .cb-error-copy h1 {
        font-size: 42px;
    }

    .cb-error-description {
        font-size: 14px;
    }

    .cb-error-actions {
        gap: 12px;
        margin-top: 24px;
    }

    .cb-error-home {
        min-height: 48px;
        padding: 0 17px;
        font-size: 13px;
    }

    .cb-error-note {
        margin-top: 30px;
        padding-top: 18px;
    }

    .cb-error-footer {
        min-height: 65px;
        gap: 8px;
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-404-page *,
    .cb-404-page *::before,
    .cb-404-page *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   CULTURE BREW — COMING SOON
========================================= */

.cb-coming-page {
    --cs-primary: #6B2737;
    --cs-accent: #D9A5A8;
    --cs-bg: #FAF7F5;
    --cs-surface: #FFFFFF;
    --cs-text: #171313;
    --cs-muted: #777071;
    --cs-border: rgba(107, 39, 55, 0.16);

    margin: 0;
    min-height: 100vh;
    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: "Inter", sans-serif;
}

.cb-coming-page *,
.cb-coming-page *::before,
.cb-coming-page *::after {
    box-sizing: border-box;
}

.cb-coming-wrapper {
    width: 100%;
    max-width: 1600px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 7%;
    display: flex;
    flex-direction: column;
}

/* Header */

.cb-coming-header {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--cs-border);
}

.cb-coming-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--cs-primary);
    text-decoration: none;
}

.cb-coming-logo-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cs-primary);
    color: #FFFFFF;
    font-size: 21px;
}

.cb-coming-logo-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-coming-logo-copy strong {
    font-family: "Playfair Display", serif;
    font-size: 21px;
    letter-spacing: 1.2px;
    line-height: 1.2;
}

.cb-coming-logo-copy small {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.8px;
}

.cb-coming-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-coming-control {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    background: var(--cs-surface);
    color: var(--cs-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: 0.25s ease;
}

.cb-coming-control:hover {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #FFFFFF;
}

/* Hero */

.cb-coming-hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(35px, 6vw, 90px);
    padding: 65px 0;
}

.cb-coming-copy {
    width: 100%;
    max-width: 570px;
}

.cb-coming-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 27px;
    color: var(--cs-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cb-coming-status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #82956C;
    box-shadow: 0 0 0 4px rgba(130, 149, 108, 0.15);
}

.cb-coming-copy h1 {
    margin: 0 0 22px;
    font-family: "Playfair Display", serif;
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.cb-coming-copy h1 em {
    color: var(--cs-primary);
    font-weight: 500;
}

.cb-coming-description {
    max-width: 475px;
    margin: 0;
    color: var(--cs-muted);
    font-size: 14px;
    line-height: 1.95;
}

/* Countdown */

.cb-coming-countdown-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--cs-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cb-coming-countdown-line {
    width: 45px;
    height: 1px;
    background: var(--cs-accent);
}

.cb-coming-countdown {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 23px);
}

.cb-coming-time {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cb-coming-time strong {
    font-family: "Playfair Display", serif;
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cb-coming-time span {
    color: var(--cs-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.cb-coming-time-separator {
    align-self: flex-start;
    padding-top: 2px;
    color: var(--cs-accent);
    font-size: 26px;
    font-weight: 400;
}

/* Email Form */

.cb-coming-notify-heading {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
}

.cb-coming-form {
    width: 100%;
    max-width: 475px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    border: 1px solid var(--cs-border);
    border-radius: 6px;
    background: var(--cs-surface);
}

.cb-coming-form > i {
    margin-left: 12px;
    color: var(--cs-muted);
    font-size: 15px;
}

.cb-coming-form input {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--cs-text);
    font-family: inherit;
    font-size: 12px;
}

.cb-coming-form input::placeholder {
    color: var(--cs-muted);
    opacity: 0.8;
}

.cb-coming-form:focus-within {
    border-color: var(--cs-primary);
}

.cb-coming-form button {
    min-height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 17px;
    border: 0;
    border-radius: 4px;
    background: var(--cs-primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease;
}

.cb-coming-form button:hover {
    background: #4E1B29;
}

.cb-coming-form-message {
    min-height: 18px;
    margin: 8px 0 0;
    color: var(--cs-primary);
    font-size: 12px;
    line-height: 1.5;
}

.cb-coming-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: var(--cs-muted);
    font-size: 10px;
}

.cb-coming-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

/* Image */

.cb-coming-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    justify-self: end;
    padding: 0 18px 36px 0;
}

.cb-coming-image-frame {
    position: relative;
    width: 100%;
    height: clamp(400px, 48vw, 590px);
    overflow: hidden;
    background: #35121C;
}

.cb-coming-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.cb-coming-image-frame:hover img {
    transform: scale(1.04);
}

.cb-coming-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(27, 9, 14, 0.02) 40%,
        rgba(27, 9, 14, 0.78) 100%
    );
}

.cb-coming-image-label {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #FFFFFF;
    font-family: "Playfair Display", serif;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
}

.cb-coming-image-label span:last-child {
    color: #F0CBCD;
    font-style: italic;
}

.cb-coming-roundel {
    position: absolute;
    top: 35px;
    right: -15px;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(107, 39, 55, 0.15);
    border-radius: 50%;
    background: var(--cs-surface);
    color: var(--cs-primary);
    box-shadow: 0 12px 30px rgba(40, 14, 22, 0.08);
}

.cb-coming-roundel svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: currentColor;
    animation: cbComingRotate 24s linear infinite;
}

.cb-coming-roundel text {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.cb-coming-roundel > i {
    font-size: 27px;
}

.cb-coming-decoration {
    position: absolute;
    color: var(--cs-primary);
    font-size: 28px;
}

.cb-coming-decoration-one {
    top: 25%;
    left: -12px;
}

.cb-coming-decoration-two {
    right: 35px;
    bottom: 70px;
    color: var(--cs-accent);
}

.cb-coming-image-caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 17px;
    color: var(--cs-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.cb-coming-image-caption span:first-child {
    color: var(--cs-primary);
}

/* Footer */

.cb-coming-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--cs-border);
    color: var(--cs-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.cb-coming-footer-center {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cs-primary);
}

.cb-coming-footer-center span {
    width: 18px;
    height: 1px;
    background: var(--cs-accent);
}

/* Dark Mode */

html[data-theme="dark"] .cb-coming-page {
    --cs-bg: #171315;
    --cs-surface: #241C1F;
    --cs-text: #F8F0F0;
    --cs-muted: #BFB1B4;
    --cs-border: rgba(217, 165, 168, 0.18);
    --cs-primary: #D9A5A8;
    --cs-accent: #6B2737;
}

html[data-theme="dark"] .cb-coming-logo {
    color: #F2DCDD;
}

html[data-theme="dark"] .cb-coming-logo-icon {
    background: #6B2737;
}

html[data-theme="dark"] .cb-coming-form button {
    background: #6B2737;
    color: #FFFFFF;
}

html[data-theme="dark"] .cb-coming-form button:hover {
    background: #823748;
}

html[data-theme="dark"] .cb-coming-control:hover {
    background: #6B2737;
    color: #FFFFFF;
}

/* RTL */

html[dir="rtl"] .cb-coming-page {
    direction: rtl;
}

html[dir="rtl"] .cb-coming-hero {
    direction: rtl;
}

html[dir="rtl"] .cb-coming-visual {
    justify-self: start;
    padding: 0 0 36px 18px;
}

html[dir="rtl"] .cb-coming-roundel {
    right: auto;
    left: -15px;
}

html[dir="rtl"] .cb-coming-image-label {
    right: 25px;
    left: 25px;
}

html[dir="rtl"] .cb-coming-form > i {
    margin-left: 0;
    margin-right: 12px;
}

html[dir="rtl"] .cb-coming-home i,
html[dir="rtl"] .cb-coming-form button i {
    transform: rotate(180deg);
}

/* Animation */

@keyframes cbComingRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */

@media (max-width: 1000px) {
    .cb-coming-wrapper {
        padding: 0 5%;
    }

    .cb-coming-hero {
        grid-template-columns: 1fr 0.9fr;
        gap: 30px;
    }

    .cb-coming-copy h1 {
        font-size: clamp(40px, 5vw, 56px);
    }

    .cb-coming-image-frame {
        height: 440px;
    }

    .cb-coming-countdown {
        gap: 12px;
    }

    .cb-coming-time strong {
        font-size: 30px;
    }
}

@media (max-width: 760px) {
    .cb-coming-hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 45px 0;
    }

    .cb-coming-copy {
        max-width: 600px;
    }

    .cb-coming-copy h1 {
        font-size: clamp(44px, 9vw, 65px);
    }

    .cb-coming-visual {
        width: 100%;
        max-width: 520px;
        justify-self: center;
        margin: 0 auto;
    }

    html[dir="rtl"] .cb-coming-visual {
        justify-self: center;
    }

    .cb-coming-image-frame {
        height: clamp(380px, 100vw, 540px);
    }

    .cb-coming-footer {
        justify-content: center;
        padding: 18px 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cb-coming-wrapper {
        padding: 0 20px;
    }

    .cb-coming-header {
        min-height: 78px;
    }

    .cb-coming-logo {
        gap: 8px;
    }

    .cb-coming-logo-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .cb-coming-logo-copy strong {
        font-size: 15px;
    }

    .cb-coming-logo-copy small {
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .cb-coming-controls {
        gap: 6px;
    }

    .cb-coming-control {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 11px;
    }

    .cb-coming-status {
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .cb-coming-copy h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .cb-coming-description {
        font-size: 13px;
    }

    .cb-coming-countdown {
        justify-content: space-between;
        gap: 7px;
    }

    .cb-coming-time {
        min-width: 0;
    }

    .cb-coming-time strong {
        font-size: 27px;
    }

    .cb-coming-time span {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .cb-coming-time-separator {
        font-size: 20px;
    }

    .cb-coming-form {
        gap: 7px;
    }

    .cb-coming-form > i {
        margin-left: 7px;
        font-size: 13px;
    }

    .cb-coming-form input {
        font-size: 11px;
    }

    .cb-coming-form button {
        gap: 6px;
        padding: 0 10px;
        font-size: 11px;
    }

    .cb-coming-privacy {
        align-items: flex-start;
        line-height: 1.6;
    }

    .cb-coming-image-frame {
        height: 390px;
    }

    .cb-coming-roundel {
        width: 90px;
        height: 90px;
    }

    .cb-coming-roundel > i {
        font-size: 23px;
    }

    .cb-coming-image-label {
        right: 18px;
        bottom: 20px;
        left: 18px;
        font-size: 27px;
    }

    .cb-coming-image-caption {
        font-size: 8px;
        letter-spacing: 0.8px;
    }

    .cb-coming-footer {
        gap: 12px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-coming-page *,
    .cb-coming-page *::before,
    .cb-coming-page *::after {
        animation: none !important;
        transition: none !important;
    }
}
.cb-coming-copy h1 {
    color: #6B2737;
}

/* =========================================
   CULTURE BREW — CONTACT PAGE
   Primary: #6B2737
   Secondary: #D9A5A8
========================================= */

.cb-contact-page {
    --ct-primary: #6B2737;
    --ct-rose: #D9A5A8;
    --ct-black: #111111;
    --ct-white: #FFFFFF;
    --ct-bg: #FAF7F5;
    --ct-surface: #FFFFFF;
    --ct-text: #21191B;
    --ct-muted: #756B6D;
    --ct-border: rgba(107, 39, 55, 0.15);

    margin: 0;
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: "Inter", sans-serif;
}

.cb-contact-page *,
.cb-contact-page *::before,
.cb-contact-page *::after {
    box-sizing: border-box;
}

.cb-contact-page img {
    max-width: 100%;
}

.cb-contact-page h2 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}

.cb-contact-page h2 em {
    color: var(--ct-primary);
    font-weight: 500;
}

.cb-contact-page h3 {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.cb-contact-page p {
    font-size: 15px;
    line-height: 1.85;
    text-align: justify;
}

.cb-contact-page a {
    -webkit-tap-highlight-color: transparent;
}

.ct-section {
    padding: 100px 7%;
}

.ct-eyebrow {
    display: inline-block;
    color: var(--ct-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.6;
}

.ct-button {
    min-height: 52px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}

.ct-button:hover {
    transform: translateY(-2px);
}

.ct-button-primary {
    background: var(--ct-primary);
    border-color: var(--ct-primary);
    color: var(--ct-white);
}

.ct-button-primary:hover {
    background: #4E1B29;
    border-color: #4E1B29;
    color: var(--ct-white);
}

.ct-button-light {
    background: var(--ct-white);
    border-color: var(--ct-white);
    color: var(--ct-primary);
}

.ct-button-light:hover {
    background: var(--ct-rose);
    border-color: var(--ct-rose);
    color: var(--ct-black);
}

/* 01 — HERO */

.ct-hero {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ct-primary);
}

.ct-hero-image,
.ct-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ct-hero-image {
    z-index: -2;
    object-fit: cover;
    object-position: center;
}

.ct-hero-overlay {
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(24, 8, 13, 0.88) 0%,
        rgba(42, 12, 22, 0.70) 48%,
        rgba(31, 11, 17, 0.20) 100%
    );
}

.ct-hero-content {
    width: 100%;
    max-width: 760px;
    padding: 100px 9%;
    color: var(--ct-white);
}

.ct-hero-eyebrow {
    margin-bottom: 23px;
    color: var(--ct-rose);
}

.ct-hero h1 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(46px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

.ct-hero h1 em {
    color: var(--ct-rose);
    font-weight: 500;
}

.ct-hero-content > p {
    max-width: 530px;
    margin: 22px 0 30px;
    color: rgba(255, 255, 255, 0.86);
}

.ct-hero-index {
    position: absolute;
    right: 7%;
    bottom: 30px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* 02 — INTRODUCTION */

.ct-intro {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 70px;
    align-items: start;
    background: var(--ct-surface);
}

.ct-intro-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
}

.ct-section-number {
    color: var(--ct-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.ct-small-line {
    width: 45px;
    height: 1px;
    background: var(--ct-rose);
}

.ct-intro-content {
    max-width: 760px;
}

.ct-intro-content h2 {
    margin-bottom: 22px;
}

.ct-intro-content > p {
    margin: 0 0 15px;
    color: var(--ct-muted);
}

/* 03 — CONTACT INFORMATION */

.ct-information {
    background: var(--ct-bg);
}

.ct-section-heading {
    max-width: 680px;
    margin: 0 auto 45px;
    text-align: center;
}

.ct-section-heading .ct-eyebrow {
    margin-bottom: 15px;
}

.ct-section-heading h2 {
    margin-bottom: 13px;
}

.ct-section-heading > p {
    margin: 0;
    color: var(--ct-muted);
    text-align: center;
}

.ct-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ct-info-card {
    min-width: 0;
    padding: 34px 28px;
    border: 1px solid var(--ct-border);
    background: var(--ct-surface);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.ct-info-card:hover {
    transform: translateY(-5px);
    border-color: var(--ct-rose);
}

.ct-info-card-featured {
    background: var(--ct-primary);
    color: var(--ct-white);
}

.ct-info-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 23px;
    border-radius: 50%;
    background: rgba(217, 165, 168, 0.24);
    color: var(--ct-primary);
    font-size: 19px;
}

.ct-info-card-featured .ct-info-icon {
    background: rgba(255, 255, 255, 0.13);
    color: var(--ct-rose);
}

.ct-card-kicker {
    display: block;
    color: var(--ct-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.ct-info-card-featured .ct-card-kicker {
    color: var(--ct-rose);
}

.ct-info-card h3 {
    margin: 10px 0;
}

.ct-info-card > p {
    min-height: 54px;
    margin: 0 0 22px;
    color: var(--ct-muted);
    font-size: 14px;
}

.ct-info-card-featured > p {
    color: rgba(255, 255, 255, 0.75);
}

.ct-info-card > a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ct-primary);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.ct-info-card-featured > a {
    color: var(--ct-rose);
}

/* 04 — GENERAL ENQUIRY */

.ct-enquiry {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(35px, 6vw, 85px);
    align-items: center;
    background: var(--ct-surface);
}

.ct-enquiry-visual {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    background: var(--ct-primary);
}

.ct-enquiry-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-enquiry-image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 65px 28px 28px;
    background: linear-gradient(transparent, rgba(20, 7, 11, 0.85));
    color: var(--ct-white);
    font-family: "Playfair Display", serif;
    font-size: 27px;
}

.ct-enquiry-image-caption span:last-child {
    color: var(--ct-rose);
    font-style: italic;
}

.ct-enquiry-content {
    min-width: 0;
    max-width: 650px;
}

.ct-enquiry-content > .ct-eyebrow {
    margin-bottom: 14px;
}

.ct-enquiry-content h2 {
    margin-bottom: 14px;
}

.ct-enquiry-content > p {
    margin: 0 0 28px;
    color: var(--ct-muted);
}

.ct-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.ct-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.ct-form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.ct-form-group label {
    color: var(--ct-text);
    font-size: 12px;
    font-weight: 700;
}

.ct-form-group input,
.ct-form-group select,
.ct-form-group textarea {
    width: 100%;
    min-width: 0;
    min-height: 49px;
    padding: 13px 14px;
    border: 1px solid var(--ct-border);
    border-radius: 3px;
    outline: none;
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.ct-form-group textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.7;
}

.ct-form-group input:focus,
.ct-form-group select:focus,
.ct-form-group textarea:focus {
    border-color: var(--ct-primary);
}

.ct-form-group input::placeholder,
.ct-form-group textarea::placeholder {
    color: var(--ct-muted);
    opacity: 0.8;
}

.ct-form .ct-button {
    align-self: flex-start;
}

.ct-form-status {
    margin: 0;
    color: var(--ct-primary);
    font-size: 12px !important;
}

/* 05 — WHOLESALE */

.ct-business {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
    background: #F0E7E5;
}

.ct-business-image {
    height: 500px;
    overflow: hidden;
    background: var(--ct-rose);
}

.ct-business-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.ct-business-image:hover img {
    transform: scale(1.04);
}

.ct-business-content {
    max-width: 560px;
}

.ct-business-content > .ct-eyebrow {
    margin-bottom: 15px;
}

.ct-business-content h2 {
    margin-bottom: 18px;
}

.ct-business-content > p {
    margin: 0;
    color: #625558;
}

.ct-check-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 25px 0 30px;
    padding: 0;
    list-style: none;
}

.ct-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.7;
}

.ct-check-list i {
    padding-top: 4px;
    color: var(--ct-primary);
}

/* 06 — TAPROOM */

.ct-taproom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(35px, 7vw, 100px);
    align-items: center;
    background: var(--ct-primary);
    color: var(--ct-white);
}

.ct-taproom-content {
    max-width: 590px;
}

.ct-taproom-content > .ct-eyebrow {
    margin-bottom: 16px;
    color: var(--ct-rose);
}

.ct-taproom-content h2 {
    margin-bottom: 20px;
}

.ct-taproom-content h2 em {
    color: var(--ct-rose);
}

.ct-taproom-content > p {
    color: rgba(255, 255, 255, 0.78);
}

.ct-taproom-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 28px 0 32px;
}

.ct-taproom-details > div {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.ct-taproom-details i {
    width: 21px;
    color: var(--ct-rose);
    text-align: center;
}

.ct-taproom-image {
    position: relative;
    height: 500px;
    overflow: hidden;
    background: #34131D;
}

.ct-taproom-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ct-taproom-image-label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 25px;
    background: linear-gradient(transparent, rgba(17, 17, 17, 0.75));
    color: var(--ct-white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* 07 — LOCATION */

.ct-location {
    background: var(--ct-surface);
}

.ct-map-wrapper {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background: #E9E2DF;
}

.ct-map-wrapper iframe {
    width: 100%;
    height: 430px;
    display: block;
    border: 0;
}

.ct-map-card {
    position: absolute;
    top: 30px;
    left: 30px;
    width: min(320px, calc(100% - 60px));
    padding: 25px;
    background: var(--ct-surface);
    box-shadow: 0 10px 35px rgba(25, 10, 14, 0.12);
}

.ct-map-card .ct-info-icon {
    margin-bottom: 15px;
}

.ct-map-card h3 {
    margin: 0 0 10px;
}

.ct-map-card > p {
    margin: 0 0 18px;
    color: var(--ct-muted);
    font-size: 13px;
}

.ct-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ct-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* 08 — OPENING HOURS */

.ct-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    background: var(--ct-bg);
}

.ct-hours-intro {
    max-width: 500px;
}

.ct-hours-intro > .ct-eyebrow {
    margin-bottom: 16px;
}

.ct-hours-intro h2 {
    margin-bottom: 18px;
}

.ct-hours-intro > p {
    color: var(--ct-muted);
}

.ct-hours-panel {
    padding: 35px;
    border: 1px solid var(--ct-border);
    background: var(--ct-surface);
}

.ct-hours-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ct-border);
}

.ct-hours-title > i {
    color: var(--ct-primary);
    font-size: 20px;
}

.ct-hours-title h3 {
    margin: 0;
}

.ct-hours-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ct-border);
    font-size: 12px;
}

.ct-hours-row span {
    color: var(--ct-muted);
}

.ct-hours-row strong {
    color: var(--ct-text);
    font-size: 12px;
    text-align: right;
}

.ct-hours-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px 0 0;
    color: var(--ct-muted);
    font-size: 11px !important;
}

.ct-hours-note i {
    padding-top: 4px;
    color: var(--ct-primary);
}

/* 09 — FAQ */

.ct-faq {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 75px;
    align-items: start;
    background: var(--ct-surface);
}

.ct-faq-intro {
    position: sticky;
    top: 30px;
}

.ct-faq-intro > .ct-eyebrow {
    margin-bottom: 16px;
}

.ct-faq-intro h2 {
    margin-bottom: 18px;
}

.ct-faq-intro > p {
    color: var(--ct-muted);
}

.ct-faq-list {
    border-top: 1px solid var(--ct-border);
}

.ct-faq-item {
    border-bottom: 1px solid var(--ct-border);
}

.ct-faq-item summary {
    position: relative;
    padding: 23px 42px 23px 0;
    color: var(--ct-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    list-style: none;
    cursor: pointer;
}

.ct-faq-item summary::-webkit-details-marker {
    display: none;
}

.ct-faq-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}

.ct-faq-icon::before,
.ct-faq-icon::after {
    position: absolute;
    top: 8px;
    left: 2px;
    width: 14px;
    height: 1px;
    background: var(--ct-primary);
    content: "";
}

.ct-faq-icon::after {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.ct-faq-item[open] .ct-faq-icon::after {
    transform: rotate(0);
}

.ct-faq-item > p {
    margin: -3px 35px 23px 0;
    color: var(--ct-muted);
    font-size: 14px;
}

/* 10 — FINAL CTA */

.ct-final-cta {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ct-primary);
    text-align: center;
}

.ct-final-cta-image,
.ct-final-cta-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ct-final-cta-image {
    z-index: -2;
    object-fit: cover;
    object-position: center;
}

.ct-final-cta-overlay {
    z-index: -1;
    background: rgba(40, 10, 20, 0.79);
}

.ct-final-cta-content {
    width: 100%;
    max-width: 750px;
    padding: 75px 25px;
    color: var(--ct-white);
}

.ct-final-cta-content > .ct-eyebrow {
    margin-bottom: 20px;
    color: var(--ct-rose);
}

.ct-final-cta h2 {
    margin-bottom: 18px;
    font-size: clamp(36px, 5vw, 52px);
}

.ct-final-cta h2 em {
    color: var(--ct-rose);
}

.ct-final-cta-content > p {
    max-width: 520px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, 0.85);
}

/* DARK MODE */

html[data-theme="dark"] .cb-contact-page {
    --ct-bg: #181416;
    --ct-surface: #211A1C;
    --ct-text: #F8F0F0;
    --ct-muted: #C1B5B7;
    --ct-border: rgba(217, 165, 168, 0.2);
    --ct-primary: #D9A5A8;
    --ct-rose: #E9BEC1;
}

html[data-theme="dark"] .ct-business {
    background: #292022;
}

html[data-theme="dark"] .ct-business-content > p {
    color: var(--ct-muted);
}

html[data-theme="dark"] .ct-business .ct-check-list li {
    color: var(--ct-text);
}

html[data-theme="dark"] .ct-info-card-featured {
    background: #3A1C25;
}

html[data-theme="dark"] .ct-taproom {
    background: #2C171E;
}

html[data-theme="dark"] .ct-button-primary {
    background: #6B2737;
    border-color: #6B2737;
    color: #FFFFFF;
}

html[data-theme="dark"] .ct-button-primary:hover {
    background: #85394A;
}

html[data-theme="dark"] .ct-button-light {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #6B2737;
}

html[data-theme="dark"] .ct-form-group input,
html[data-theme="dark"] .ct-form-group select,
html[data-theme="dark"] .ct-form-group textarea {
    background: #181416;
    color: var(--ct-text);
}

html[data-theme="dark"] .ct-map-card {
    background: var(--ct-surface);
}

html[data-theme="dark"] .ct-final-cta-overlay {
    background: rgba(18, 9, 12, 0.83);
}

/* RTL */

html[dir="rtl"] .cb-contact-page {
    direction: rtl;
}

html[dir="rtl"] .ct-hero-overlay {
    background: linear-gradient(
        270deg,
        rgba(24, 8, 13, 0.88) 0%,
        rgba(42, 12, 22, 0.70) 48%,
        rgba(31, 11, 17, 0.20) 100%
    );
}

html[dir="rtl"] .ct-hero-index {
    right: auto;
    left: 7%;
}

html[dir="rtl"] .ct-map-card {
    left: auto;
    right: 30px;
}

html[dir="rtl"] .ct-faq-item summary {
    padding: 23px 0 23px 42px;
}

html[dir="rtl"] .ct-faq-icon {
    right: auto;
    left: 5px;
}

html[dir="rtl"] .ct-faq-item > p {
    margin: -3px 0 23px 35px;
}

html[dir="rtl"] .ct-hours-row strong {
    text-align: left;
}

html[dir="rtl"] .ct-hero-content .fa-arrow-right,
html[dir="rtl"] .ct-button .fa-arrow-right {
    transform: rotate(180deg);
}

/* RESPONSIVE */

@media (max-width: 1000px) {
    .ct-section {
        padding: 75px 5%;
    }

    .ct-intro {
        gap: 35px;
    }

    .ct-info-grid {
        gap: 15px;
    }

    .ct-info-card {
        padding: 27px 20px;
    }

    .ct-enquiry {
        gap: 35px;
    }

    .ct-enquiry-visual {
        min-height: 540px;
    }

    .ct-hours,
    .ct-faq {
        gap: 35px;
    }

    .ct-hours-panel {
        padding: 25px;
    }
}

@media (max-width: 760px) {
    .ct-hero {
        min-height: 500px;
    }

    .ct-hero-content {
        padding: 80px 7%;
    }

    .ct-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(24, 8, 13, 0.87),
            rgba(24, 8, 13, 0.48)
        );
    }

    html[dir="rtl"] .ct-hero-overlay {
        background: linear-gradient(
            270deg,
            rgba(24, 8, 13, 0.87),
            rgba(24, 8, 13, 0.48)
        );
    }

    .ct-intro {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ct-info-grid {
        grid-template-columns: 1fr;
    }

    .ct-info-card > p {
        min-height: 0;
    }

    .ct-enquiry,
    .ct-business,
    .ct-taproom,
    .ct-hours,
    .ct-faq {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ct-enquiry-visual {
        min-height: 380px;
    }

    .ct-business-image,
    .ct-taproom-image {
        height: 380px;
    }

    .ct-business-content,
    .ct-taproom-content,
    .ct-hours-intro {
        max-width: none;
    }

    .ct-faq-intro {
        position: static;
    }

    .ct-map-wrapper,
    .ct-map-wrapper iframe {
        min-height: 380px;
        height: 380px;
    }
}

@media (max-width: 480px) {
    .ct-section {
        padding: 58px 20px;
    }

    .cb-contact-page h2 {
        font-size: 32px;
    }

    .ct-hero {
        min-height: 450px;
    }

    .ct-hero-content {
        padding: 65px 22px;
    }

    .ct-hero h1 {
        font-size: 43px;
    }

    .ct-hero-index {
        right: 20px;
        bottom: 20px;
        font-size: 8px;
    }

    html[dir="rtl"] .ct-hero-index {
        right: auto;
        left: 20px;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
    }

    .ct-form .ct-button {
        width: 100%;
    }

    .ct-enquiry-visual {
        min-height: 320px;
    }

    .ct-business-image,
    .ct-taproom-image {
        height: 300px;
    }

    .ct-hours-panel {
        padding: 20px 16px;
    }

    .ct-hours-row {
        gap: 10px;
    }

    .ct-hours-row span,
    .ct-hours-row strong {
        font-size: 11px;
    }

    .ct-map-wrapper,
    .ct-map-wrapper iframe {
        min-height: 350px;
        height: 350px;
    }

    .ct-map-card {
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        padding: 18px;
    }

    html[dir="rtl"] .ct-map-card {
        right: 15px;
    }

    .ct-faq-item summary {
        font-size: 13px;
    }

    .ct-final-cta {
        min-height: 400px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-contact-page *,
    .cb-contact-page *::before,
    .cb-contact-page *::after {
        transition: none !important;
        animation: none !important;
    }
}
/* Contact Hero Banner - Center Content */
.ct-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ct-hero .ct-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.ct-hero .ct-hero-content h1,
.ct-hero .ct-hero-content p {
    text-align: center;
}

.ct-hero .ct-hero-content .ct-btn,
.ct-hero .ct-hero-content a {
    margin-left: auto;
    margin-right: auto;
}
.ct-hero .ct-hero-content p {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.ct-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

.ct-hero .ct-hero-content {
    position: relative;
    z-index: 2;
}
.ct-taproom-image {
    position: relative;
    overflow: hidden;
}

.ct-taproom-image video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* CULTURE BREW - style.css (v3 "Scroll Story")
   Palette: #6B2737 Berry Burgundy | #D9A5A8 Dusty Rose | #111111 Black | #FFFFFF White
   Type: H2 36/700 | H3 24/600 | Body 15/400 | Buttons 16/700. Dark mode: darkmode.css. Animations: script.js */
:root{--burgundy:#6B2737;--deep:#4d1b27;--rose:#D9A5A8;--black:#111;--white:#fff;
--bg:#fff;--text:#241c1e;--heading:#111;--accent:#6B2737;--surface:#fff;--tint:#f7e9ea;--line:rgba(17,17,17,.16);--focus:#6B2737;
--head:"Playfair Display",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--hh:76px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.7 var(--body);color:var(--text);background:var(--bg);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:3px}
ul,ol,dl,dd{margin:0;padding:0}li{list-style:none}
p{margin:0 0 16px;font-size:15px;font-weight:400}
h1,h2,h3{font-family:var(--head);color:var(--heading);margin:0 0 14px;line-height:1.2}
h1{font-size:clamp(42px,7vw,84px);font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.04}
h2{font-size:36px;font-weight:700}h3{font-size:24px;font-weight:600}
address{font-style:normal;font-size:15px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:300;background:var(--burgundy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
.container{width:min(1180px,100% - 48px);margin-inline:auto}
.narrow{max-width:860px}.center{text-align:center}
.progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:250;background:linear-gradient(90deg,var(--burgundy),var(--rose));transform:scaleX(var(--p,0));transform-origin:0 50%}
html[dir="rtl"] .progress{transform-origin:100% 50%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 32px;font:700 16px/1.2 var(--body);border:2px solid transparent;border-radius:999px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background-color .25s,color .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn-primary{background:var(--burgundy);color:#fff}.btn-primary:hover{background:var(--deep)}
.btn-light{background:#fff;color:var(--burgundy)}.btn-light:hover{background:var(--rose);color:#111}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn-row.center{justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:200;background:rgba(17,17,17,.94);backdrop-filter:blur(10px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hh)}
.brand{font:700 24px/1 var(--head);letter-spacing:2px;color:#fff;text-decoration:none;white-space:nowrap}.brand span{color:var(--rose)}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav>ul{display:flex;align-items:center;gap:4px}
.main-nav a,.dropdown-toggle{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font:600 15px/1.2 var(--body);color:#fff;background:none;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:background-color .2s}
.main-nav a:hover,.dropdown-toggle:hover{background:rgba(217,165,168,.22)}
.main-nav a[aria-current="page"]{background:var(--burgundy)}
.dropdown-toggle::after{content:"";width:7px;height:7px;margin-inline-start:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.has-dropdown{position:relative}
.dropdown{position:absolute;inset-inline-start:0;top:100%;min-width:190px;padding:8px;background:#111;border:1px solid var(--rose);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;width:100%}
.header-tools{display:flex;gap:8px}
.header-tools .join-btn{min-height:44px;padding:8px 22px;font:700 16px/1.2 var(--body);color:#111;background:var(--rose);border-radius:999px}
.header-tools .join-btn:hover{background:#fff;color:#111}
.tool-btn{min-height:44px;min-width:64px;padding:8px 16px;font:600 15px/1 var(--body);color:#fff;background:transparent;border:2px solid var(--rose);border-radius:999px;cursor:pointer;transition:.2s}
.tool-btn:hover,.tool-btn[aria-pressed="true"]{background:var(--rose);color:#111}
.site-header :focus-visible{outline-color:var(--rose)}
.menu-toggle{display:none;width:48px;height:48px;padding:0;background:none;border:2px solid var(--rose);border-radius:14px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--rose);transition:transform .25s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sections */
.section{padding:110px 0;position:relative;overflow-x:clip}
.section-tint{background:var(--tint)}
.section-burgundy{background:var(--burgundy);color:#fff}
.section-dark{background:var(--black);color:#fff}
.section-burgundy h2,.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:700px;margin:0 auto 56px;text-align:center}.section-head.left{margin-inline:0;text-align:start}
.eyebrow{display:inline-block;margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.section-burgundy .eyebrow,.section-dark .eyebrow,.hero .eyebrow,.taproom .eyebrow{color:var(--rose)}

/* Hero */
.hero{position:relative;background:var(--black);overflow:hidden;padding:90px 0 0}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:calc(100vh - var(--hh) - 90px);padding-bottom:70px}
.hero-text>*{max-width:620px}.hero p{color:rgba(255,255,255,.9)}.lead{font-size:18px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;transform:translate3d(0,var(--py,0),0);animation:float 9s ease-in-out infinite}
.b1{width:460px;height:460px;background:var(--burgundy);top:-120px;inset-inline-end:-80px}
.b2{width:320px;height:320px;background:var(--rose);opacity:.25;bottom:60px;inset-inline-start:-100px;animation-delay:-4s}
@keyframes float{50%{margin-top:34px}}
.hero-art{position:relative;aspect-ratio:1;max-width:480px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.hero-art img{width:88%;height:88%;margin:6%;object-fit:cover;border-radius:50%;border:6px solid var(--rose)}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--rose);animation:spin 30s linear infinite}
.ring::after{content:"";position:absolute;top:8%;inset-inline-start:8%;width:22px;height:22px;border-radius:50%;background:var(--rose)}
.ring.dashed{border-style:dashed;border-color:var(--burgundy)}.ring.dashed::after{background:var(--burgundy)}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee,.big-marquee{overflow:hidden;direction:ltr;white-space:nowrap}
.marquee{position:relative;z-index:2;border-block:1px solid rgba(217,165,168,.35);padding:16px 0;font:600 24px/1 var(--head);color:var(--rose)}
.marquee-track{display:inline-flex;animation:slide 28s linear infinite}
.marquee-track span{padding-inline-end:24px}
@keyframes slide{to{transform:translateX(-50%)}}

/* Word reveal for hero h1 */
.js [data-words-in] .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s + .2s)}
@keyframes wordIn{to{opacity:1;transform:none}}

/* Reveal system */
.js [data-reveal]{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),clip-path 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal="up"]{transform:translateY(48px)}
.js [data-reveal="left"]{transform:translateX(90px)}
html[dir="rtl"].js [data-reveal="left"]{transform:translateX(-90px)}
.js [data-reveal="zoom"]{transform:scale(.8)}
.js [data-reveal="clip"]{opacity:1}
.js [data-reveal="clip"] img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"].js [data-reveal="clip"] img{clip-path:inset(0 0 0 100%)}
.js [data-reveal="clip"].in img{clip-path:inset(0 0 0 0)}
.js [data-reveal].in{opacity:1;transform:none}

/* 2 Flavour accordion: expanding panels + autoplay */
.faccordion{display:flex;gap:14px;height:540px}
.fpanel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:32px;background:var(--black);border:2px solid transparent;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1),border-color .4s}
.fpanel.is-active{flex-grow:4.4;border-color:var(--rose)}
.fpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);transform:scale(1.15);transition:filter .8s,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.fpanel.is-active img{filter:none;transform:scale(1)}
.fpanel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(107,39,55,.92),rgba(17,17,17,.1) 65%);opacity:.7;transition:opacity .6s}
.fpanel.is-active::before{opacity:1}
.fpanel-btn{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;background:none;border:0;color:#fff;cursor:pointer}
.fpanel.is-active .fpanel-btn{pointer-events:none}
.fpanel-btn:focus-visible{outline:3px solid var(--rose);outline-offset:-6px;border-radius:32px}
.fpanel-num{font:700 15px/1 var(--body);letter-spacing:2px;color:var(--rose);transition:opacity .3s}
.fpanel-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 24px/1 var(--head);letter-spacing:1px;white-space:nowrap;transition:opacity .3s}
.fpanel.is-active .fpanel-label,.fpanel.is-active .fpanel-num{opacity:0}
.fpanel-body{position:absolute;z-index:3;inset-inline-start:0;bottom:0;width:460px;max-width:100%;padding:36px;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .4s,transform .5s,visibility 0s .4s}
.fpanel.is-active .fpanel-body{opacity:1;visibility:visible;transform:none;transition:opacity .6s .35s,transform .8s .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.fpanel-body h3{color:#fff;margin-bottom:6px}.fpanel-body p{color:rgba(255,255,255,.92)}.fpanel-body .btn{margin-top:6px}
.fpanel-timer{position:absolute;z-index:4;inset-inline:0;bottom:0;height:5px;background:var(--rose);transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] .fpanel-timer{transform-origin:100% 50%}
.faccordion.auto .fpanel.is-active .fpanel-timer{animation:ftimer 4.5s linear forwards}
@keyframes ftimer{to{transform:scaleX(1)}}
.js .faccordion:not(.in) .fpanel{opacity:0}
.faccordion.in .fpanel{animation:fpIn .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*.13s)}
@keyframes fpIn{from{opacity:0;transform:translateY(70px) scale(.92)}}

/* 3 Story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.story-media{position:sticky;top:calc(var(--hh) + 24px);margin:0}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 28px 28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.stats li{padding:18px;border-top:3px solid var(--burgundy);font-size:15px}
.stats strong{display:block;font:700 40px/1.1 var(--head);color:var(--accent)}

/* 4 Fermentation jar (scroll-driven) */
.ferment{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.jar{position:sticky;top:calc(var(--hh) + 40px);text-align:center}
.jar::before{content:"";position:absolute;inset:-10% -10% 10%;background:radial-gradient(closest-side,rgba(107,39,55,.6),transparent);z-index:0}
.jar svg{position:relative;z-index:1;display:block;width:min(320px,100%);height:auto;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.jar-day{position:relative;z-index:1;margin:16px 0 0;font:600 24px/1 var(--head);color:var(--rose)}
.jar .glass{fill:rgba(255,255,255,.06);stroke:var(--rose);stroke-width:3}
.jar .shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.22}
.jar .lid{fill:var(--burgundy);stroke:var(--rose);stroke-width:2}
.jar .liquid{transform:translateY(215px);transition:transform 2.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.jar.in .liquid{transform:none}
.jar .liquid.base{fill:var(--rose);opacity:.8}
.jar .liquid.deep{fill:var(--burgundy);opacity:0}
.jar[data-stage="1"] .liquid.deep{opacity:.22}.jar[data-stage="2"] .liquid.deep{opacity:.6}.jar[data-stage="3"] .liquid.deep{opacity:.92}
.jar .scoby{fill:#f7e9ea;stroke:var(--rose);stroke-width:2;opacity:0;transform:translateY(-14px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.jar:not([data-stage="0"]) .scoby{opacity:.95;transform:none}
.jar .bub{fill:#fff;opacity:0}
.jar[data-stage="2"] .bub:not(.x),.jar[data-stage="3"] .bub{animation:rise 4s ease-in infinite;animation-delay:var(--d)}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.75}100%{transform:translateY(-165px);opacity:0}}
.fsteps{margin:36px 0 28px}
.fstep{display:flex;flex-direction:column;justify-content:center;min-height:46vh;padding:24px 0 24px 28px;border-inline-start:3px solid rgba(217,165,168,.25);opacity:.3;transition:opacity .5s,border-color .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.fstep.on{opacity:1;border-color:var(--rose);transform:translateX(10px)}
html[dir="rtl"] .fstep.on{transform:translateX(-10px)}
.fday{margin-bottom:8px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rose)}
.fstep p{margin:0;max-width:520px;color:rgba(255,255,255,.88)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{padding:10px 20px;font-weight:600;color:#fff;border:1px solid var(--rose);border-radius:999px}

/* 5 Stacking process */
.stack{display:grid;gap:24px}
.stack li{position:sticky;top:calc(var(--hh) + 20px);display:flex;gap:32px;align-items:center;min-height:240px;padding:40px;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.stack li:nth-child(2){top:calc(var(--hh) + 44px)}.stack li:nth-child(3){top:calc(var(--hh) + 68px)}.stack li:nth-child(4){top:calc(var(--hh) + 92px)}
.big-num{font:700 88px/1 var(--head);opacity:.9}
.stack p{margin:0;max-width:520px}
.card-a{background:var(--black);color:#fff}.card-a h3{color:#fff}.card-a .big-num{color:var(--rose)}
.card-b{background:var(--burgundy);color:#fff}.card-b h3{color:#fff}.card-b .big-num{color:var(--rose)}
.card-c{background:var(--rose);color:#111}.card-c h3{color:#111}.card-c .big-num{color:var(--burgundy)}
.card-d{background:var(--surface);color:var(--text);border:2px solid var(--burgundy)}.card-d .big-num{color:var(--accent)}

/* 6 Bottles */
.bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.bottle{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:24px;background:#1b1416;border:1px solid rgba(217,165,168,.35);border-radius:28px;transition:transform .4s,border-color .4s}
.bottle:hover{transform:translateY(-10px) rotate(-1deg);border-color:var(--rose)}
.bottle.lift{margin-top:48px}
.bottle img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:22px}
.bottle p{color:rgba(255,255,255,.85)}.bottle .profile{font-weight:700;color:var(--rose);margin-bottom:8px}
.bottle .btn{margin-top:8px}
.badge{position:absolute;top:16px;inset-inline-end:16px;z-index:2;padding:8px 16px;font-size:15px;font-weight:700;color:#fff;background:var(--burgundy);border:1px solid var(--rose);border-radius:999px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* 7 Why rows */
.why-rows>div{position:relative;display:grid;grid-template-columns:90px 1fr 1.3fr;gap:24px;align-items:center;padding:34px 12px;transition:padding .35s,background-color .35s}
.why-rows>div::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s .3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .why-rows>div::after{transform-origin:100% 50%}
.why-rows>div.in::after,html:not(.js) .why-rows>div::after{transform:scaleX(1)}
.why-rows>div:hover{background:var(--tint);padding-inline-start:28px}
.why-rows .n{font:700 40px/1 var(--head);color:var(--accent)}
.why-rows dt{font:600 24px/1.25 var(--head);color:var(--heading)}.why-rows dd{margin:0}

/* 8 Ingredients */
.ing{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.ing-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.ing-art img{width:86%;height:86%;margin:7%;object-fit:cover;border-radius:50%}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tags li{padding:10px 20px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--burgundy);border-radius:999px}
.tags li:nth-child(odd){background:var(--rose);color:#111;border-color:var(--rose)}

/* 9 Taproom */
.taproom{position:relative;display:grid;place-items:center;min-height:86vh;overflow:hidden;background:var(--black);text-align:center}
.taproom-bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0),0)}
.taproom-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.7),rgba(107,39,55,.6))}
.taproom-content{position:relative;z-index:1;max-width:760px;padding:100px 0}
.taproom h2{color:#fff;font-size:36px}.taproom p{color:rgba(255,255,255,.92)}

/* 10 CTA */
.final-cta{background:var(--deep);color:#fff;text-align:center;padding-top:80px}
.big-marquee{margin-bottom:56px;font:700 clamp(60px,10vw,140px)/1 var(--head);color:transparent;-webkit-text-stroke:2px var(--rose)}
.big-marquee .marquee-track{animation-duration:22s;animation-direction:reverse}
.final-cta h2{color:#fff}.final-cta p{color:rgba(255,255,255,.92)}.final-cta a{color:#fff}
.final-cta .btn-primary{background:#fff;color:var(--burgundy)}.final-cta .btn-primary:hover{background:var(--rose);color:#111}
.newsletter-form{margin:28px auto 20px;max-width:540px;text-align:start}
.newsletter-form label{display:block;margin-bottom:8px;font-weight:700}
.field-row{display:flex;gap:12px}
.newsletter-form input{flex:1;min-width:0;min-height:52px;padding:12px 22px;font:400 15px/1.2 var(--body);color:#111;background:#fff;border:2px solid transparent;border-radius:999px}
.newsletter-form input::placeholder{color:#6f6366}
.newsletter-form input:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.form-status{min-height:24px;margin:10px 0 0;font-weight:700}.form-status.error{color:#ffd9dc}

/* Footer */
.site-footer{background:#0a0a0a;color:rgba(255,255,255,.86);padding-top:76px}
.site-footer .brand{display:inline-block;margin-bottom:14px}
.site-footer h3{font-size:24px;color:var(--rose)}
.site-footer a{color:rgba(255,255,255,.86);text-decoration:none;display:inline-block;padding:4px 0}
.site-footer a:hover{color:var(--rose);text-decoration:underline}.site-footer .brand:hover{text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:52px}
.footer-grid li{margin-bottom:4px}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.site-footer .social-links a{display:grid;place-items:center;width:46px;height:46px;padding:0;color:#fff;border:1.5px solid rgba(217,165,168,.55);border-radius:50%;text-decoration:none;transition:background-color .25s,color .25s,transform .25s}
.site-footer .social-links a:hover{background:var(--rose);color:#111;transform:translateY(-4px);text-decoration:none}
.social-links svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{padding:24px 0;border-top:1px solid rgba(255,255,255,.16)}.footer-bottom p{margin:0}

/* Responsive */
@media(max-width:1024px){
  .hero-grid,.story,.ing{grid-template-columns:1fr;gap:44px}
  .hero-grid{min-height:0}.hero-art{max-width:380px}
  .story-media{position:relative;top:0;max-width:440px;margin-inline:auto}
  .bottles{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.bottle.lift{margin-top:0}
  .ferment{display:block}
  .jar{top:var(--hh);z-index:3;padding:8px 0 12px;background:#111}
  .jar svg{width:150px}.jar-day{margin-top:6px}
  .fstep{min-height:36vh}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .menu-toggle{display:flex}
  .main-nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:16px;max-height:calc(100vh - var(--hh));overflow-y:auto;padding:16px 24px 24px;background:#111;border-bottom:2px solid var(--burgundy)}
  .main-nav.open{display:flex}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a,.dropdown-toggle{width:100%;justify-content:space-between;border-radius:12px}
  .dropdown{position:static;display:none;opacity:1;visibility:visible;transform:none;border:0;border-inline-start:3px solid var(--rose);border-radius:0;margin:4px 0 4px 12px;padding:0 0 0 8px}
  .has-dropdown:hover .dropdown{display:none}.has-dropdown.open .dropdown{display:block}
  .header-tools{flex-wrap:wrap}.header-tools .tool-btn{flex:1}.header-tools .join-btn{flex:1 1 100%}
}
@media(max-width:768px){
  .section{padding:76px 0}.container{width:min(1180px,100% - 40px)}
  .stats{grid-template-columns:1fr}
  .stack li{flex-direction:column;align-items:flex-start;gap:8px;padding:28px;min-height:0}.big-num{font-size:64px}
  .why-rows>div{grid-template-columns:56px 1fr;gap:8px 16px}.why-rows dd{grid-column:2}
  .taproom{min-height:70vh}
  .faccordion{flex-direction:column;height:auto}
  .fpanel{flex:none;height:84px;transition:height .8s cubic-bezier(.2,.8,.2,1),border-color .4s}.fpanel.is-active{height:420px}
  .fpanel-btn{flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:0 24px}
  .fpanel-label{writing-mode:horizontal-tb;transform:none}.fpanel-body{width:100%;padding:24px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}.field-row{flex-direction:column}.btn-row .btn,.field-row .btn{width:100%}
}
/* ================= HOME 2 (compact, unique layouts) ================= */
.page-home2 .section{padding:64px 0}
.page-home2 .section-head{margin-bottom:32px}
.row-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}
.row-head h2{margin-bottom:0}.row-head .hint{margin:0;max-width:340px;font-weight:600;color:var(--accent)}
.section-dark .row-head .hint{color:var(--rose)}
.text-link{font-weight:700;white-space:nowrap}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--burgundy)}.btn-outline:hover{background:var(--burgundy);color:#fff}

/* 1 Hero */
.x-hero{background:var(--tint);padding-top:44px;overflow:hidden}
.x-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-bottom:44px}
.x-hero h1{color:var(--accent);font-size:clamp(44px,6.4vw,88px)}
.x-hero h1 .w:nth-child(3),.x-hero h1 .w:nth-child(5){color:transparent;-webkit-text-stroke:2px var(--accent)}
.collage{position:relative;max-width:460px;width:100%;margin-inline:auto;aspect-ratio:4/5}
.c-main{position:absolute;inset:0 0 0 8%;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--burgundy);box-shadow:16px 16px 0 var(--rose)}
.c-main img{width:100%;height:100%;object-fit:cover;animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12)}}
.c-small{position:absolute;bottom:-4%;inset-inline-start:-6%;width:42%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--bg);transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.c-small img{width:100%;height:100%;object-fit:cover}
.spin-badge{position:absolute;top:-4%;inset-inline-end:-4%;width:124px;height:124px;animation:spin 16s linear infinite;background:var(--burgundy);border-radius:50%}
.spin-badge text{font:700 15px/1 var(--body);letter-spacing:1px;fill:#fff}.spin-badge circle{fill:var(--rose)}
.x-ticker{background:var(--burgundy);color:#fff;font:600 24px/1 var(--head);padding:14px 0;overflow:hidden;white-space:nowrap;direction:ltr}
.x-ticker .marquee-track{animation-duration:34s}

/* 2 Bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:24px;transition:transform .3s,background-color .3s,border-color .3s}
.tile:hover{transform:translateY(-6px);background:var(--tint);border-color:var(--rose)}
.tile svg{width:44px;height:44px;margin-bottom:12px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.tile:hover svg{transform:rotate(14deg) scale(1.12)}
.tile p{margin:0}
.t-main{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(150deg,var(--burgundy),var(--deep));border:0;padding:36px}
.t-main:hover{background:linear-gradient(150deg,var(--burgundy),var(--deep))}
.t-main h2{color:#fff}.t-main .eyebrow{color:var(--rose)}.t-main p{color:rgba(255,255,255,.92)}
.t-wide{grid-column:span 2}

/* 3 Triptych */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tri-card{position:relative;display:block;height:460px;overflow:hidden;border-radius:28px;background:var(--black);text-decoration:none}
.tri-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tri-card:hover img{transform:scale(1.1) rotate(1deg)}
.tri-n{position:absolute;top:18px;inset-inline-start:20px;font:700 56px/1 var(--head);color:transparent;-webkit-text-stroke:2px #fff}
.tri-card div{position:absolute;inset-inline:0;bottom:0;padding:70px 22px 22px;background:linear-gradient(to top,rgba(17,17,17,.92),transparent);transform:translateY(14px);transition:transform .45s}
.tri-card:hover div{transform:none}
.tri-card h3{color:#fff;margin-bottom:2px}.tri-card p{margin:0;color:rgba(255,255,255,.9)}

/* 4 Favourites list + preview */
.favs{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.fav-list{margin-top:20px}
.fav-row{display:grid;grid-template-columns:48px 1fr 32px;gap:16px;align-items:center;padding:18px 12px;color:var(--text);text-decoration:none;border-bottom:2px solid var(--line);position:relative;transition:padding .35s,background-color .35s}
.fav-row::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s}
.fav-row.on::after{transform:scaleX(1)}.fav-row.on{padding-inline-start:26px;background:var(--tint)}
.fn{font:700 24px/1 var(--head);color:var(--accent)}
.ft{display:grid}.fh{font:600 24px/1.2 var(--head);color:var(--heading)}
.fa{font-size:24px;color:var(--accent);transition:transform .3s}.fav-row:hover .fa,.fav-row.on .fa{transform:translateX(8px)}
html[dir="rtl"] .fa{transform:scaleX(-1)}
.fav-preview{position:relative;aspect-ratio:4/5;max-width:440px;width:100%;margin-inline:auto;border-radius:200px 200px 28px 28px;overflow:hidden;background:var(--burgundy);box-shadow:14px 14px 0 var(--rose)}
.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .7s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.pv.on{opacity:1;transform:none}

/* 5 Pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center}
.pipe::before,.pipe::after{content:"";position:absolute;top:35px;inset-inline:10%;height:3px;border-radius:3px}
.pipe::before{background:var(--line)}
.pipe::after{background:linear-gradient(90deg,var(--burgundy),var(--rose));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.2s .3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .pipe::after{transform-origin:100% 50%}
.pipe.in::after{transform:scaleX(1)}
.pipe li{position:relative;z-index:1}
.ico{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 12px;background:var(--surface);border:3px solid var(--burgundy);border-radius:50%;transition:transform .4s,background-color .4s}
.ico svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pipe.in .ico{animation:pop .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*.35s)}
@keyframes pop{from{transform:scale(0);opacity:0}}
.pipe li:hover .ico{transform:translateY(-6px) rotate(8deg);background:var(--rose)}
.pipe p{margin:0}

/* 6 Finder */
.finder{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.finder fieldset{border:0;margin:0 0 20px;padding:0}
.finder legend{padding:0;margin-bottom:12px;font:600 24px/1.2 var(--head);color:var(--heading)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label{display:inline-flex;align-items:center;min-height:46px;padding:10px 22px;font:600 15px/1 var(--body);color:var(--text);background:var(--surface);border:2px solid var(--burgundy);border-radius:999px;cursor:pointer;transition:.25s}
.choices label:hover{transform:translateY(-2px)}
.choices input:checked+label{background:var(--burgundy);color:#fff}
.choices input:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
.finder-result{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:24px;color:#fff;background:linear-gradient(135deg,var(--burgundy),var(--deep));border-radius:32px 0 32px 0}
.finder-result h3{color:#fff}.finder-result p{color:rgba(255,255,255,.92)}.finder-result .eyebrow{color:var(--rose)}
.bottle-stage svg{display:block;width:100%;height:auto}
.bottle-stage .outline{fill:rgba(255,255,255,.06);stroke:var(--rose);stroke-width:3}
.bottle-stage .cap{fill:var(--rose)}
.bottle-stage .liq{fill:var(--liq,#D9A5A8);transform:translateY(200px);transition:transform 1.4s cubic-bezier(.2,.8,.2,1),fill .6s}
.bottle-stage.filled .liq{transform:none}
.bottle-stage .fb circle{fill:#fff;opacity:0}
.bottle-stage.filled .fb circle{animation:rise2 3.4s ease-in infinite}
.bottle-stage .fb circle:nth-child(2){animation-delay:.9s!important}.bottle-stage .fb circle:nth-child(3){animation-delay:1.8s!important}.bottle-stage .fb circle:nth-child(4){animation-delay:2.6s!important}
@keyframes rise2{0%{transform:translateY(0);opacity:0}15%{opacity:.7}100%{transform:translateY(-120px);opacity:0}}
.bottle-stage.wob svg{animation:wob .8s}
@keyframes wob{25%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}

/* 7 Flip cards */
.flips{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.flip{position:relative;height:210px;padding:0;background:none;border:0;cursor:pointer;perspective:900px;font:inherit}
.flip .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.flip:hover .inner,.flip:focus-visible .inner,.flip[aria-pressed="true"] .inner{transform:rotateY(180deg)}
.flip:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:22px}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
.front{background:linear-gradient(160deg,var(--burgundy),var(--deep));border:1px solid var(--rose);color:#fff}
.front i{font:700 64px/1 var(--head);font-style:normal;color:transparent;-webkit-text-stroke:2px var(--rose)}
.back{background:var(--rose);color:#111;transform:rotateY(180deg)}
.fname{font:600 24px/1.15 var(--head)}.front .fname{font-size:24px}

/* 8 Testimonial marquees */
.tm-row{overflow:hidden;direction:ltr;margin-bottom:16px}
.tm-track{display:flex;gap:16px;width:max-content;animation:slide 40s linear infinite}
.tm-row.rev .tm-track{animation-direction:reverse;animation-duration:46s}
.tm-row:hover .tm-track{animation-play-state:paused}
.tm{flex:0 0 340px;margin:0;padding:22px;background:var(--surface);border:1px solid var(--rose);border-radius:24px 24px 24px 0;direction:ltr}
.tm blockquote{margin:0 0 12px;font:600 18px/1.5 var(--head);color:var(--heading)}
.tm figcaption{font-size:15px;font-weight:700;color:var(--accent)}

/* 9 Taproom band */
.tap{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:400px;overflow:hidden;color:#fff;background:var(--black);border-radius:32px}
.tap-text{position:relative;z-index:2;padding:40px;align-self:center}
.tap h2{color:#fff}.tap p{color:rgba(255,255,255,.9)}.tap .eyebrow{color:var(--rose)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.chips li{padding:8px 18px;font-weight:600;color:#fff;border:1px solid var(--rose);border-radius:999px}
.tap-img{position:relative;overflow:hidden;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
html[dir="rtl"] .tap-img{clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.tap-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.tap:hover .tap-img img{transform:scale(1.08)}
.tap-circle{position:absolute;z-index:3;bottom:24px;inset-inline-end:24px;width:130px;height:130px;object-fit:cover;border-radius:50%;border:5px solid var(--rose);animation:float 8s ease-in-out infinite}

/* 10 CTA duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo-tile{position:relative;display:block;min-height:190px;padding:30px;overflow:hidden;border-radius:28px;text-decoration:none;color:#fff;background:var(--burgundy);isolation:isolate}
.duo-tile.d2{background:var(--black)}
.duo-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rose);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.duo-tile:hover::before{transform:none}
.duo-tile h3,.duo-tile p{color:#fff;transition:color .4s}.duo-tile p{margin:0}
.duo-tile:hover h3,.duo-tile:hover p,.duo-tile:hover .arr{color:#111}
.arr{position:absolute;bottom:22px;inset-inline-end:26px;font-size:40px;line-height:1;color:var(--rose);transition:transform .4s,color .4s}
.duo-tile:hover .arr{transform:translateX(10px)}
html[dir="rtl"] .arr{transform:scaleX(-1)}

@media(max-width:1024px){
  .x-hero-grid,.favs,.finder{grid-template-columns:1fr}
  .collage{max-width:380px}
  .bento{grid-template-columns:repeat(2,1fr)}.t-main{grid-column:span 2;grid-row:auto}
  .pipe{grid-template-columns:1fr;max-width:420px;margin-inline:auto;text-align:start;gap:20px}
  .pipe::before,.pipe::after{top:35px;bottom:35px;height:auto;inset-inline:auto;inset-inline-start:34px;width:3px}
  .pipe::after{transform:scaleY(0);transform-origin:50% 0}.pipe.in::after{transform:scaleY(1)}
  .pipe li{display:grid;grid-template-columns:70px 1fr;gap:4px 16px;align-items:center}
  .ico{margin:0;grid-row:span 2}.pipe li h3{align-self:end;margin:0}.pipe li p{align-self:start}
  .flips{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .page-home2 .section{padding:48px 0}
  .row-head{flex-direction:column;align-items:flex-start;gap:12px}
  .tri{grid-template-columns:1fr}.tri-card{height:340px}
  .bento{grid-template-columns:1fr}.t-main,.t-wide{grid-column:auto}
  .finder-result{grid-template-columns:110px 1fr}
  .tap{grid-template-columns:1fr}.tap-img{height:240px;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}.tap-text{padding:28px 24px}
  .tap-circle{width:96px;height:96px}
  .duo{grid-template-columns:1fr}.tm{flex-basis:290px}
}
@media(max-width:560px){.flips{grid-template-columns:repeat(2,1fr)}.finder-result{grid-template-columns:1fr;text-align:center}.bottle-stage{max-width:120px;margin-inline:auto}.spin-badge{width:96px;height:96px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-words-in] .w{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* FULL BACKGROUND IMAGE BANNER */

.cb2-banner {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 24px;
    text-align: center;
    color: #FFFFFF;

    /* Background image */
    background-image:
        linear-gradient(
            rgba(17, 17, 17, 0.58),
            rgba(35, 10, 19, 0.68)
        ),
        url("../images/h2-banner-kombucha.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Centered banner content */
.cb2-banner-content {
    position: relative;
    z-index: 2;
    width: min(780px, 100%);
    margin: 0 auto;
}

.cb2-banner .eyebrow {
    color: #F0C5CA;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 24px;
}

.cb2-banner h1 {
    color: #FFFFFF;
    font-size: clamp(44px, 7vw, 82px);
    line-height: 1.08;
    font-weight: 600;
    margin: 0 0 22px;
}

.cb2-banner h1 em {
    color: #D9A5A8;
    font-style: italic;
}

.cb2-banner-description {
    max-width: 560px;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.9;
}

.cb2-banner .btn-row {
    justify-content: center;
    margin-top: 30px;
}

.cb2-banner-note {
    position: absolute;
    left: 30px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 10px;
    letter-spacing: 2px;
    z-index: 2;
}

.cb2-banner-note span:first-child {
    color: #D9A5A8;
    font-size: 14px;
}

/* Tablet */
@media (max-width: 768px) {
    .cb2-banner {
        min-height: 560px;
        padding: 80px 24px;
        background-position: center;
    }

    .cb2-banner h1 {
        font-size: clamp(42px, 8vw, 64px);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .cb2-banner {
        min-height: 500px;
        padding: 70px 20px;
        background-position: center;
    }

    .cb2-banner h1 {
        font-size: 42px;
    }

    .cb2-banner-description {
        font-size: 15px;
    }

    .cb2-banner-note {
        left: 18px;
        bottom: 18px;
        font-size: 9px;
    }
}

/* RTL */
html[dir="rtl"] .cb2-banner-note {
    left: auto;
    right: 30px;
}

@media (max-width: 480px) {
    html[dir="rtl"] .cb2-banner-note {
        right: 18px;
    }
}
/* CULTURE BREW - style.css (v3 "Scroll Story")
   Palette: #6B2737 Berry Burgundy | #D9A5A8 Dusty Rose | #111111 Black | #FFFFFF White
   Type: H2 36/700 | H3 24/600 | Body 15/400 | Buttons 16/700. Dark mode: darkmode.css. Animations: script.js */
:root{--burgundy:#6B2737;--deep:#4d1b27;--rose:#D9A5A8;--black:#111;--white:#fff;
--bg:#fff;--text:#241c1e;--heading:#111;--accent:#6B2737;--surface:#fff;--tint:#f7e9ea;--line:rgba(17,17,17,.16);--focus:#6B2737;
--head:"Playfair Display",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--hh:76px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.7 var(--body);color:var(--text);background:var(--bg);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:3px}
ul,ol,dl,dd{margin:0;padding:0}li{list-style:none}
p{margin:0 0 16px;font-size:15px;font-weight:400;text-align: justify; ;}
h1,h2,h3{font-family:var(--head);color:var(--heading);margin:0 0 14px;line-height:1.2}
h1{font-size:clamp(42px,7vw,84px);font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.04}
h2{font-size:36px;font-weight:700}h3{font-size:24px;font-weight:600}
address{font-style:normal;font-size:15px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:300;background:var(--burgundy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
.container{width:min(1180px,100% - 48px);margin-inline:auto}
.narrow{max-width:860px}.center{text-align:center}
.progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:250;background:linear-gradient(90deg,var(--burgundy),var(--rose));transform:scaleX(var(--p,0));transform-origin:0 50%}
html[dir="rtl"] .progress{transform-origin:100% 50%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 32px;font:700 16px/1.2 var(--body);border:2px solid transparent;border-radius:999px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background-color .25s,color .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn-primary{background:var(--burgundy);color:#fff}.btn-primary:hover{background:var(--deep)}
.btn-light{background:#fff;color:var(--burgundy)}.btn-light:hover{background:var(--rose);color:#111}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn-row.center{justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:200;background:rgba(17,17,17,.94);backdrop-filter:blur(10px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hh)}
.brand{font:700 24px/1 var(--head);letter-spacing:2px;color:#fff;text-decoration:none;white-space:nowrap}.brand span{color:var(--rose)}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav>ul{display:flex;align-items:center;gap:4px}
.main-nav a,.dropdown-toggle{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font:600 15px/1.2 var(--body);color:#fff;background:none;border:0;border-radius:999px;text-decoration:none;cursor:pointer;transition:background-color .2s}
.main-nav a:hover,.dropdown-toggle:hover{background:rgba(217,165,168,.22)}
.main-nav a[aria-current="page"]{background:var(--burgundy)}
.dropdown-toggle::after{content:"";width:7px;height:7px;margin-inline-start:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.has-dropdown{position:relative}
.dropdown{position:absolute;inset-inline-start:0;top:100%;min-width:190px;padding:8px;background:#111;border:1px solid var(--rose);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;width:100%}
.header-tools{display:flex;gap:8px}
.header-tools .join-btn{min-height:44px;padding:8px 22px;font:700 16px/1.2 var(--body);color:#111;background:var(--rose);border-radius:999px}
.header-tools .join-btn:hover{background:#fff;color:#111}
.tool-btn{min-height:44px;min-width:64px;padding:8px 16px;font:600 15px/1 var(--body);color:#fff;background:transparent;border:2px solid var(--rose);border-radius:999px;cursor:pointer;transition:.2s}
.tool-btn:hover,.tool-btn[aria-pressed="true"]{background:var(--rose);color:#111}
.site-header :focus-visible{outline-color:var(--rose)}
.menu-toggle{display:none;width:48px;height:48px;padding:0;background:none;border:2px solid var(--rose);border-radius:14px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--rose);transition:transform .25s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sections */
.section{padding:110px 0;position:relative;overflow-x:clip}
.section-tint{background:var(--tint)}
.section-burgundy{background:var(--burgundy);color:#fff}
.section-dark{background:var(--black);color:#fff}
.section-burgundy h2,.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:700px;margin:0 auto 56px;text-align:center}.section-head.left{margin-inline:0;text-align:start}
.eyebrow{display:inline-block;margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.section-burgundy .eyebrow,.section-dark .eyebrow,.hero .eyebrow,.taproom .eyebrow{color:var(--rose)}

/* Hero */
.hero{position:relative;background:var(--black);overflow:hidden;padding:90px 0 0}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:calc(100vh - var(--hh) - 90px);padding-bottom:70px}
.hero-text>*{max-width:620px}.hero p{color:rgba(255,255,255,.9)}.lead{font-size:18px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;transform:translate3d(0,var(--py,0),0);animation:float 9s ease-in-out infinite}
.b1{width:460px;height:460px;background:var(--burgundy);top:-120px;inset-inline-end:-80px}
.b2{width:320px;height:320px;background:var(--rose);opacity:.25;bottom:60px;inset-inline-start:-100px;animation-delay:-4s}
@keyframes float{50%{margin-top:34px}}
.hero-art{position:relative;aspect-ratio:1;max-width:480px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.hero-art img{width:88%;height:88%;margin:6%;object-fit:cover;border-radius:50%;border:6px solid var(--rose)}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--rose);animation:spin 30s linear infinite}
.ring::after{content:"";position:absolute;top:8%;inset-inline-start:8%;width:22px;height:22px;border-radius:50%;background:var(--rose)}
.ring.dashed{border-style:dashed;border-color:var(--burgundy)}.ring.dashed::after{background:var(--burgundy)}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee,.big-marquee{overflow:hidden;direction:ltr;white-space:nowrap}
.marquee{position:relative;z-index:2;border-block:1px solid rgba(217,165,168,.35);padding:16px 0;font:600 24px/1 var(--head);color:var(--rose)}
.marquee-track{display:inline-flex;animation:slide 28s linear infinite}
.marquee-track span{padding-inline-end:24px}
@keyframes slide{to{transform:translateX(-50%)}}

/* Word reveal for hero h1 */
.js [data-words-in] .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s + .2s)}
@keyframes wordIn{to{opacity:1;transform:none}}

/* Reveal system */
.js [data-reveal]{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),clip-path 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal="up"]{transform:translateY(48px)}
.js [data-reveal="left"]{transform:translateX(90px)}
html[dir="rtl"].js [data-reveal="left"]{transform:translateX(-90px)}
.js [data-reveal="zoom"]{transform:scale(.8)}
.js [data-reveal="clip"]{opacity:1}
.js [data-reveal="clip"] img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"].js [data-reveal="clip"] img{clip-path:inset(0 0 0 100%)}
.js [data-reveal="clip"].in img{clip-path:inset(0 0 0 0)}
.js [data-reveal].in{opacity:1;transform:none}

/* 2 Flavour accordion: expanding panels + autoplay */
.faccordion{display:flex;gap:14px;height:540px}
.fpanel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:32px;background:var(--black);border:2px solid transparent;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1),border-color .4s}
.fpanel.is-active{flex-grow:4.4;border-color:var(--rose)}
.fpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);transform:scale(1.15);transition:filter .8s,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.fpanel.is-active img{filter:none;transform:scale(1)}
.fpanel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(107,39,55,.92),rgba(17,17,17,.1) 65%);opacity:.7;transition:opacity .6s}
.fpanel.is-active::before{opacity:1}
.fpanel-btn{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;background:none;border:0;color:#fff;cursor:pointer}
.fpanel.is-active .fpanel-btn{pointer-events:none}
.fpanel-btn:focus-visible{outline:3px solid var(--rose);outline-offset:-6px;border-radius:32px}
.fpanel-num{font:700 15px/1 var(--body);letter-spacing:2px;color:var(--rose);transition:opacity .3s}
.fpanel-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 24px/1 var(--head);letter-spacing:1px;white-space:nowrap;transition:opacity .3s}
.fpanel.is-active .fpanel-label,.fpanel.is-active .fpanel-num{opacity:0}
.fpanel-body{position:absolute;z-index:3;inset-inline-start:0;bottom:0;width:460px;max-width:100%;padding:36px;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .4s,transform .5s,visibility 0s .4s}
.fpanel.is-active .fpanel-body{opacity:1;visibility:visible;transform:none;transition:opacity .6s .35s,transform .8s .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.fpanel-body h3{color:#fff;margin-bottom:6px}.fpanel-body p{color:rgba(255,255,255,.92)}.fpanel-body .btn{margin-top:6px}
.fpanel-timer{position:absolute;z-index:4;inset-inline:0;bottom:0;height:5px;background:var(--rose);transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] .fpanel-timer{transform-origin:100% 50%}
.faccordion.auto .fpanel.is-active .fpanel-timer{animation:ftimer 4.5s linear forwards}
@keyframes ftimer{to{transform:scaleX(1)}}
.js .faccordion:not(.in) .fpanel{opacity:0}
.faccordion.in .fpanel{animation:fpIn .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*.13s)}
@keyframes fpIn{from{opacity:0;transform:translateY(70px) scale(.92)}}

/* 3 Story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.story-media{position:sticky;top:calc(var(--hh) + 24px);margin:0}
.story-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 28px 28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.stats li{padding:18px;border-top:3px solid var(--burgundy);font-size:15px}
.stats strong{display:block;font:700 40px/1.1 var(--head);color:var(--accent)}

/* 4 Fermentation jar (scroll-driven) */
.ferment{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.jar{position:sticky;top:calc(var(--hh) + 40px);text-align:center}
.jar::before{content:"";position:absolute;inset:-10% -10% 10%;background:radial-gradient(closest-side,rgba(107,39,55,.6),transparent);z-index:0}
.jar svg{position:relative;z-index:1;display:block;width:min(320px,100%);height:auto;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.jar-day{position:relative;z-index:1;margin:16px 0 0;font:600 24px/1 var(--head);color:var(--rose)}
.jar .glass{fill:rgba(255,255,255,.06);stroke:var(--rose);stroke-width:3}
.jar .shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.22}
.jar .lid{fill:var(--burgundy);stroke:var(--rose);stroke-width:2}
.jar .liquid{transform:translateY(215px);transition:transform 2.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.jar.in .liquid{transform:none}
.jar .liquid.base{fill:var(--rose);opacity:.8}
.jar .liquid.deep{fill:var(--burgundy);opacity:0}
.jar[data-stage="1"] .liquid.deep{opacity:.22}.jar[data-stage="2"] .liquid.deep{opacity:.6}.jar[data-stage="3"] .liquid.deep{opacity:.92}
.jar .scoby{fill:#f7e9ea;stroke:var(--rose);stroke-width:2;opacity:0;transform:translateY(-14px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.jar:not([data-stage="0"]) .scoby{opacity:.95;transform:none}
.jar .bub{fill:#fff;opacity:0}
.jar[data-stage="2"] .bub:not(.x),.jar[data-stage="3"] .bub{animation:rise 4s ease-in infinite;animation-delay:var(--d)}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.75}100%{transform:translateY(-165px);opacity:0}}
.fsteps{margin:36px 0 28px}
.fstep{display:flex;flex-direction:column;justify-content:center;min-height:46vh;padding:24px 0 24px 28px;border-inline-start:3px solid rgba(217,165,168,.25);opacity:.3;transition:opacity .5s,border-color .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.fstep.on{opacity:1;border-color:var(--rose);transform:translateX(10px)}
html[dir="rtl"] .fstep.on{transform:translateX(-10px)}
.fday{margin-bottom:8px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rose)}
.fstep p{margin:0;max-width:520px;color:rgba(255,255,255,.88)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{padding:10px 20px;font-weight:600;color:#fff;border:1px solid var(--rose);border-radius:999px}

/* 5 Stacking process */
.stack{display:grid;gap:24px}
.stack li{position:sticky;top:calc(var(--hh) + 20px);display:flex;gap:32px;align-items:center;min-height:240px;padding:40px;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.stack li:nth-child(2){top:calc(var(--hh) + 44px)}.stack li:nth-child(3){top:calc(var(--hh) + 68px)}.stack li:nth-child(4){top:calc(var(--hh) + 92px)}
.big-num{font:700 88px/1 var(--head);opacity:.9}
.stack p{margin:0;max-width:520px}
.card-a{background:var(--black);color:#fff}.card-a h3{color:#fff}.card-a .big-num{color:var(--rose)}
.card-b{background:var(--burgundy);color:#fff}.card-b h3{color:#fff}.card-b .big-num{color:var(--rose)}
.card-c{background:var(--rose);color:#111}.card-c h3{color:#111}.card-c .big-num{color:var(--burgundy)}
.card-d{background:var(--surface);color:var(--text);border:2px solid var(--burgundy)}.card-d .big-num{color:var(--accent)}

/* 6 Bottles */
.bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.bottle{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:24px;background:#1b1416;border:1px solid rgba(217,165,168,.35);border-radius:28px;transition:transform .4s,border-color .4s}
.bottle:hover{transform:translateY(-10px) rotate(-1deg);border-color:var(--rose)}
.bottle.lift{margin-top:48px}
.bottle img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:22px}
.bottle p{color:rgba(255,255,255,.85)}.bottle .profile{font-weight:700;color:var(--rose);margin-bottom:8px}
.bottle .btn{margin-top:8px}
.badge{position:absolute;top:16px;inset-inline-end:16px;z-index:2;padding:8px 16px;font-size:15px;font-weight:700;color:#fff;background:var(--burgundy);border:1px solid var(--rose);border-radius:999px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* 7 Why rows */
.why-rows>div{position:relative;display:grid;grid-template-columns:90px 1fr 1.3fr;gap:24px;align-items:center;padding:34px 12px;transition:padding .35s,background-color .35s}
.why-rows>div::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s .3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .why-rows>div::after{transform-origin:100% 50%}
.why-rows>div.in::after,html:not(.js) .why-rows>div::after{transform:scaleX(1)}
.why-rows>div:hover{background:var(--tint);padding-inline-start:28px}
.why-rows .n{font:700 40px/1 var(--head);color:var(--accent)}
.why-rows dt{font:600 24px/1.25 var(--head);color:var(--heading)}.why-rows dd{margin:0}

/* 8 Ingredients */
.ing{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.ing-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;transform:translate3d(0,var(--py,0),0)}
.ing-art img{width:86%;height:86%;margin:7%;object-fit:cover;border-radius:50%}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tags li{padding:10px 20px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--burgundy);border-radius:999px}
.tags li:nth-child(odd){background:var(--rose);color:#111;border-color:var(--rose)}

/* 9 Taproom */
.taproom{position:relative;display:grid;place-items:center;min-height:86vh;overflow:hidden;background:var(--black);text-align:center}
.taproom-bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0),0)}
.taproom-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.7),rgba(107,39,55,.6))}
.taproom-content{position:relative;z-index:1;max-width:760px;padding:100px 0}
.taproom h2{color:#fff;font-size:36px}.taproom p{color:rgba(255,255,255,.92)}

/* 10 CTA */
.final-cta{background:var(--deep);color:#fff;text-align:center;padding-top:80px}
.big-marquee{margin-bottom:56px;font:700 clamp(60px,10vw,140px)/1 var(--head);color:transparent;-webkit-text-stroke:2px var(--rose)}
.big-marquee .marquee-track{animation-duration:22s;animation-direction:reverse}
.final-cta h2{color:#fff}.final-cta p{color:rgba(255,255,255,.92)}.final-cta a{color:#fff}
.final-cta .btn-primary{background:#fff;color:var(--burgundy)}.final-cta .btn-primary:hover{background:var(--rose);color:#111}
.newsletter-form{margin:28px auto 20px;max-width:540px;text-align:start}
.newsletter-form label{display:block;margin-bottom:8px;font-weight:700}
.field-row{display:flex;gap:12px}
.newsletter-form input{flex:1;min-width:0;min-height:52px;padding:12px 22px;font:400 15px/1.2 var(--body);color:#111;background:#fff;border:2px solid transparent;border-radius:999px}
.newsletter-form input::placeholder{color:#6f6366}
.newsletter-form input:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.form-status{min-height:24px;margin:10px 0 0;font-weight:700}.form-status.error{color:#ffd9dc}

/* Footer */
.site-footer{background:#0a0a0a;color:rgba(255,255,255,.86);padding-top:76px}
.site-footer .brand{display:inline-block;margin-bottom:14px}
.site-footer h3{font-size:24px;color:var(--rose)}
.site-footer a{color:rgba(255,255,255,.86);text-decoration:none;display:inline-block;padding:4px 0}
.site-footer a:hover{color:var(--rose);text-decoration:underline}.site-footer .brand:hover{text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:52px}
.footer-grid li{margin-bottom:4px}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.site-footer .social-links a{display:grid;place-items:center;width:46px;height:46px;padding:0;color:#fff;border:1.5px solid rgba(217,165,168,.55);border-radius:50%;text-decoration:none;transition:background-color .25s,color .25s,transform .25s}
.site-footer .social-links a:hover{background:var(--rose);color:#111;transform:translateY(-4px);text-decoration:none}
.social-links svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{padding:24px 0;border-top:1px solid rgba(255,255,255,.16)}.footer-bottom p{margin:0}

/* Responsive */
@media(max-width:1024px){
  .hero-grid,.story,.ing{grid-template-columns:1fr;gap:44px}
  .hero-grid{min-height:0}.hero-art{max-width:380px}
  .story-media{position:relative;top:0;max-width:440px;margin-inline:auto}
  .bottles{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.bottle.lift{margin-top:0}
  .ferment{display:block}
  .jar{top:var(--hh);z-index:3;padding:8px 0 12px;background:#111}
  .jar svg{width:150px}.jar-day{margin-top:6px}
  .fstep{min-height:36vh}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .menu-toggle{display:flex}
  .main-nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:16px;max-height:calc(100vh - var(--hh));overflow-y:auto;padding:16px 24px 24px;background:#111;border-bottom:2px solid var(--burgundy)}
  .main-nav.open{display:flex}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a,.dropdown-toggle{width:100%;justify-content:space-between;border-radius:12px}
  .dropdown{position:static;display:none;opacity:1;visibility:visible;transform:none;border:0;border-inline-start:3px solid var(--rose);border-radius:0;margin:4px 0 4px 12px;padding:0 0 0 8px}
  .has-dropdown:hover .dropdown{display:none}.has-dropdown.open .dropdown{display:block}
  .header-tools{flex-wrap:wrap}.header-tools .tool-btn{flex:1}.header-tools .join-btn{flex:1 1 100%}
}
@media(max-width:768px){
  .section{padding:76px 0}.container{width:min(1180px,100% - 40px)}
  .stats{grid-template-columns:1fr}
  .stack li{flex-direction:column;align-items:flex-start;gap:8px;padding:28px;min-height:0}.big-num{font-size:64px}
  .why-rows>div{grid-template-columns:56px 1fr;gap:8px 16px}.why-rows dd{grid-column:2}
  .taproom{min-height:70vh}
  .faccordion{flex-direction:column;height:auto}
  .fpanel{flex:none;height:84px;transition:height .8s cubic-bezier(.2,.8,.2,1),border-color .4s}.fpanel.is-active{height:420px}
  .fpanel-btn{flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:0 24px}
  .fpanel-label{writing-mode:horizontal-tb;transform:none}.fpanel-body{width:100%;padding:24px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}.field-row{flex-direction:column}.btn-row .btn,.field-row .btn{width:100%}
}
/* ================= HOME 2 (compact, unique layouts) ================= */
.page-home2 .section{padding:64px 0}
.page-home2 .section-head{margin-bottom:32px}
.row-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}
.row-head h2{margin-bottom:0}.row-head .hint{margin:0;max-width:340px;font-weight:600;color:var(--accent)}
.section-dark .row-head .hint{color:var(--rose)}
.text-link{font-weight:700;white-space:nowrap}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--burgundy)}.btn-outline:hover{background:var(--burgundy);color:#fff}

/* 1 Hero */
.x-hero{background:var(--tint);padding-top:44px;overflow:hidden}
.x-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-bottom:44px}
.x-hero h1{color:var(--accent);font-size:clamp(44px,6.4vw,88px)}
.x-hero h1 .w:nth-child(3),.x-hero h1 .w:nth-child(5){color:transparent;-webkit-text-stroke:2px var(--accent)}
.collage{position:relative;max-width:460px;width:100%;margin-inline:auto;aspect-ratio:4/5}
.c-main{position:absolute;inset:0 0 0 8%;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--burgundy);box-shadow:16px 16px 0 var(--rose)}
.c-main img{width:100%;height:100%;object-fit:cover;animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12)}}
.c-small{position:absolute;bottom:-4%;inset-inline-start:-6%;width:42%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--bg);transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.c-small img{width:100%;height:100%;object-fit:cover}
.spin-badge{position:absolute;top:-4%;inset-inline-end:-4%;width:124px;height:124px;animation:spin 16s linear infinite;background:var(--burgundy);border-radius:50%}
.spin-badge text{font:700 15px/1 var(--body);letter-spacing:1px;fill:#fff}.spin-badge circle{fill:var(--rose)}
.x-ticker{background:var(--burgundy);color:#fff;font:600 24px/1 var(--head);padding:14px 0;overflow:hidden;white-space:nowrap;direction:ltr}
.x-ticker .marquee-track{animation-duration:34s}

/* 2 Bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:24px;transition:transform .3s,background-color .3s,border-color .3s}
.tile:hover{transform:translateY(-6px);background:var(--tint);border-color:var(--rose)}
.tile svg{width:44px;height:44px;margin-bottom:12px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.tile:hover svg{transform:rotate(14deg) scale(1.12)}
.tile p{margin:0}
.t-main{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(150deg,var(--burgundy),var(--deep));border:0;padding:36px}
.t-main:hover{background:linear-gradient(150deg,var(--burgundy),var(--deep))}
.t-main h2{color:#fff}.t-main .eyebrow{color:var(--rose)}.t-main p{color:rgba(255,255,255,.92)}
.t-wide{grid-column:span 2}

/* 3 Triptych */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tri-card{position:relative;display:block;height:460px;overflow:hidden;border-radius:28px;background:var(--black);text-decoration:none}
.tri-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tri-card:hover img{transform:scale(1.1) rotate(1deg)}
.tri-n{position:absolute;top:18px;inset-inline-start:20px;font:700 56px/1 var(--head);color:transparent;-webkit-text-stroke:2px #fff}
.tri-card div{position:absolute;inset-inline:0;bottom:0;padding:70px 22px 22px;background:linear-gradient(to top,rgba(17,17,17,.92),transparent);transform:translateY(14px);transition:transform .45s}
.tri-card:hover div{transform:none}
.tri-card h3{color:#fff;margin-bottom:2px}.tri-card p{margin:0;color:rgba(255,255,255,.9)}

/* 4 Favourites list + preview */
.favs{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.fav-list{margin-top:20px}
.fav-row{display:grid;grid-template-columns:48px 1fr 32px;gap:16px;align-items:center;padding:18px 12px;color:var(--text);text-decoration:none;border-bottom:2px solid var(--line);position:relative;transition:padding .35s,background-color .35s}
.fav-row::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s}
.fav-row.on::after{transform:scaleX(1)}.fav-row.on{padding-inline-start:26px;background:var(--tint)}
.fn{font:700 24px/1 var(--head);color:var(--accent)}
.ft{display:grid}.fh{font:600 24px/1.2 var(--head);color:var(--heading)}
.fa{font-size:24px;color:var(--accent);transition:transform .3s}.fav-row:hover .fa,.fav-row.on .fa{transform:translateX(8px)}
html[dir="rtl"] .fa{transform:scaleX(-1)}
.fav-preview{position:relative;aspect-ratio:4/5;max-width:440px;width:100%;margin-inline:auto;border-radius:200px 200px 28px 28px;overflow:hidden;background:var(--burgundy);box-shadow:14px 14px 0 var(--rose)}
.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .7s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.pv.on{opacity:1;transform:none}

/* 5 Pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center}
.pipe::before,.pipe::after{content:"";position:absolute;top:35px;inset-inline:10%;height:3px;border-radius:3px}
.pipe::before{background:var(--line)}
.pipe::after{background:linear-gradient(90deg,var(--burgundy),var(--rose));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.2s .3s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .pipe::after{transform-origin:100% 50%}
.pipe.in::after{transform:scaleX(1)}
.pipe li{position:relative;z-index:1}
.ico{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 12px;background:var(--surface);border:3px solid var(--burgundy);border-radius:50%;transition:transform .4s,background-color .4s}
.ico svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pipe.in .ico{animation:pop .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*.35s)}
@keyframes pop{from{transform:scale(0);opacity:0}}
.pipe li:hover .ico{transform:translateY(-6px) rotate(8deg);background:var(--rose)}
.pipe p{margin:0}

/* 6 Finder */
.finder{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.finder fieldset{border:0;margin:0 0 20px;padding:0}
.finder legend{padding:0;margin-bottom:12px;font:600 24px/1.2 var(--head);color:var(--heading)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label{display:inline-flex;align-items:center;min-height:46px;padding:10px 22px;font:600 15px/1 var(--body);color:var(--text);background:var(--surface);border:2px solid var(--burgundy);border-radius:999px;cursor:pointer;transition:.25s}
.choices label:hover{transform:translateY(-2px)}
.choices input:checked+label{background:var(--burgundy);color:#fff}
.choices input:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
.finder-result{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:24px;color:#fff;background:linear-gradient(135deg,var(--burgundy),var(--deep));border-radius:32px 0 32px 0}
.finder-result h3{color:#fff}.finder-result p{color:rgba(255,255,255,.92)}.finder-result .eyebrow{color:var(--rose)}
.bottle-stage svg{display:block;width:100%;height:auto}
.bottle-stage .outline{fill:rgba(255,255,255,.06);stroke:var(--rose);stroke-width:3}
.bottle-stage .cap{fill:var(--rose)}
.bottle-stage .liq{fill:var(--liq,#D9A5A8);transform:translateY(200px);transition:transform 1.4s cubic-bezier(.2,.8,.2,1),fill .6s}
.bottle-stage.filled .liq{transform:none}
.bottle-stage .fb circle{fill:#fff;opacity:0}
.bottle-stage.filled .fb circle{animation:rise2 3.4s ease-in infinite}
.bottle-stage .fb circle:nth-child(2){animation-delay:.9s!important}.bottle-stage .fb circle:nth-child(3){animation-delay:1.8s!important}.bottle-stage .fb circle:nth-child(4){animation-delay:2.6s!important}
@keyframes rise2{0%{transform:translateY(0);opacity:0}15%{opacity:.7}100%{transform:translateY(-120px);opacity:0}}
.bottle-stage.wob svg{animation:wob .8s}
@keyframes wob{25%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}

/* 7 Flip cards */
.flips{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.flip{position:relative;height:210px;padding:0;background:none;border:0;cursor:pointer;perspective:900px;font:inherit}
.flip .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.flip:hover .inner,.flip:focus-visible .inner,.flip[aria-pressed="true"] .inner{transform:rotateY(180deg)}
.flip:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:22px}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
.front{background:linear-gradient(160deg,var(--burgundy),var(--deep));border:1px solid var(--rose);color:#fff}
.front i{font:700 64px/1 var(--head);font-style:normal;color:transparent;-webkit-text-stroke:2px var(--rose)}
.back{background:var(--rose);color:#111;transform:rotateY(180deg)}
.fname{font:600 24px/1.15 var(--head)}.front .fname{font-size:24px}

/* 8 Testimonial marquees */
.tm-row{overflow:hidden;direction:ltr;margin-bottom:16px}
.tm-track{display:flex;gap:16px;width:max-content;animation:slide 40s linear infinite}
.tm-row.rev .tm-track{animation-direction:reverse;animation-duration:46s}
.tm-row:hover .tm-track{animation-play-state:paused}
.tm{flex:0 0 340px;margin:0;padding:22px;background:var(--surface);border:1px solid var(--rose);border-radius:24px 24px 24px 0;direction:ltr}
.tm blockquote{margin:0 0 12px;font:600 18px/1.5 var(--head);color:var(--heading)}
.tm figcaption{font-size:15px;font-weight:700;color:var(--accent)}

/* 9 Taproom band */
.tap{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:400px;overflow:hidden;color:#fff;background:var(--black);border-radius:32px}
.tap-text{position:relative;z-index:2;padding:40px;align-self:center}
.tap h2{color:#fff}.tap p{color:rgba(255,255,255,.9)}.tap .eyebrow{color:var(--rose)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.chips li{padding:8px 18px;font-weight:600;color:#fff;border:1px solid var(--rose);border-radius:999px}
.tap-img{position:relative;overflow:hidden;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
html[dir="rtl"] .tap-img{clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.tap-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.tap:hover .tap-img img{transform:scale(1.08)}
.tap-circle{position:absolute;z-index:3;bottom:24px;inset-inline-end:24px;width:130px;height:130px;object-fit:cover;border-radius:50%;border:5px solid var(--rose);animation:float 8s ease-in-out infinite}

/* 10 CTA duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo-tile{position:relative;display:block;min-height:190px;padding:30px;overflow:hidden;border-radius:28px;text-decoration:none;color:#fff;background:var(--burgundy);isolation:isolate}
.duo-tile.d2{background:var(--black)}
.duo-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rose);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.duo-tile:hover::before{transform:none}
.duo-tile h3,.duo-tile p{color:#fff;transition:color .4s}.duo-tile p{margin:0}
.duo-tile:hover h3,.duo-tile:hover p,.duo-tile:hover .arr{color:#111}
.arr{position:absolute;bottom:22px;inset-inline-end:26px;font-size:40px;line-height:1;color:var(--rose);transition:transform .4s,color .4s}
.duo-tile:hover .arr{transform:translateX(10px)}
html[dir="rtl"] .arr{transform:scaleX(-1)}

@media(max-width:1024px){
  .x-hero-grid,.favs,.finder{grid-template-columns:1fr}
  .collage{max-width:380px}
  .bento{grid-template-columns:repeat(2,1fr)}.t-main{grid-column:span 2;grid-row:auto}
  .pipe{grid-template-columns:1fr;max-width:420px;margin-inline:auto;text-align:start;gap:20px}
  .pipe::before,.pipe::after{top:35px;bottom:35px;height:auto;inset-inline:auto;inset-inline-start:34px;width:3px}
  .pipe::after{transform:scaleY(0);transform-origin:50% 0}.pipe.in::after{transform:scaleY(1)}
  .pipe li{display:grid;grid-template-columns:70px 1fr;gap:4px 16px;align-items:center}
  .ico{margin:0;grid-row:span 2}.pipe li h3{align-self:end;margin:0}.pipe li p{align-self:start}
  .flips{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .page-home2 .section{padding:48px 0}
  .row-head{flex-direction:column;align-items:flex-start;gap:12px}
  .tri{grid-template-columns:1fr}.tri-card{height:340px}
  .bento{grid-template-columns:1fr}.t-main,.t-wide{grid-column:auto}
  .finder-result{grid-template-columns:110px 1fr}
  .tap{grid-template-columns:1fr}.tap-img{height:240px;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}.tap-text{padding:28px 24px}
  .tap-circle{width:96px;height:96px}
  .duo{grid-template-columns:1fr}.tm{flex-basis:290px}
}
@media(max-width:560px){.flips{grid-template-columns:repeat(2,1fr)}.finder-result{grid-template-columns:1fr;text-align:center}.bottle-stage{max-width:120px;margin-inline:auto}.spin-badge{width:96px;height:96px}}

/* ================= ABOUT ================= */
.page-about .section{padding:64px 0}
.page-about .section-head{margin-bottom:32px}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.btn-outline-light:hover{background:#fff;color:var(--burgundy)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}

/* 1 Hero */
.a-hero{background:var(--black);color:#fff;padding:36px 0 0;overflow:hidden;min-height: 620px;}
.a-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end}
.a-hero-grid>div:first-child{padding-bottom:48px}
.a-hero .eyebrow{color:var(--rose)}
.a-hero h1{font-size:clamp(40px,5.4vw,72px)}
.a-hero .lead{color:rgba(255,255,255,.9);max-width:540px}
.crumbs{display:flex;gap:8px;margin-bottom:18px;font-weight:600;color:rgba(255,255,255,.8)}
.crumbs a{color:var(--rose)}.crumbs li+li::before{content:"/";margin-inline-end:8px;color:rgba(255,255,255,.45)}
.strips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:470px;align-items:end}
.strip{height:100%;transform:translate3d(0,var(--py,0px),0)}
.strip:nth-child(2){height:88%}.strip:nth-child(3){height:76%}
.strip img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;border:2px solid var(--rose);border-bottom:0}

/* 2 Story */
.story2{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.s2-media{position:sticky;top:calc(var(--hh) + 24px);padding:0 0 28px;margin-inline-end:20px}
.s2-media::before{content:"";position:absolute;inset:20px -20px 8px 20px;border:2px solid var(--rose);border-radius:200px 200px 28px 28px}
.s2-media img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 28px 28px}
.s2-quote{position:absolute;bottom:0;inset-inline-start:-18px;width:78%;margin:0;padding:18px 22px;color:#fff;background:var(--burgundy);border-radius:18px;font:600 22px/1.3 var(--head);box-shadow:0 16px 36px rgba(17,17,17,.3)}

/* 3 Fan */
.insp{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.fan{display:flex;justify-content:center;padding:24px 0}
.fan-card{width:230px;min-height:250px;margin-inline-start:-34px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 40px rgba(17,17,17,.14);transition:transform .6s cubic-bezier(.2,.8,.2,1),margin .6s cubic-bezier(.2,.8,.2,1)}
.fan-card:first-child{margin-inline-start:0;transform:rotate(-8deg) translateY(18px)}
.fan-card.mid{transform:translateY(-14px);background:var(--burgundy);color:#fff;z-index:2}
.fan-card.mid h3{color:#fff}
.fan-card:last-child{transform:rotate(8deg) translateY(18px)}
.fan-card svg{width:44px;height:44px;margin-bottom:12px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fan-card.mid svg{stroke:var(--rose)}
.fan-card p{margin:0}
.fan:hover .fan-card{margin-inline-start:14px;transform:none}.fan:hover .fan-card:first-child{margin-inline-start:0}

/* 4 Accordion */
.phil{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.phil-side{position:sticky;top:calc(var(--hh) + 24px)}
.acc-item{border-bottom:2px solid var(--line)}
.acc-item h3{margin:0}
.acc-btn{display:grid;grid-template-columns:44px 1fr 28px;gap:14px;align-items:center;width:100%;padding:18px 4px;font:600 24px/1.2 var(--head);color:var(--heading);text-align:start;background:none;border:0;cursor:pointer}
.acc-n{font:700 24px/1 var(--head);color:var(--accent)}
.acc-plus{position:relative;width:20px;height:20px}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;inset:9px 0 auto;height:2px;background:var(--accent);transition:transform .4s}
.acc-plus::after{transform:rotate(90deg)}
.acc-item.open .acc-plus::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-in{overflow:hidden}.acc-in p{margin:0 0 18px;padding-inline-start:58px}
.acc-btn:hover .acc-n{transform:scale(1.15)}.acc-n{transition:transform .3s}

/* 5 Elements */
.elements{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.el{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;padding:16px;overflow:hidden;color:#fff;background:linear-gradient(160deg,var(--burgundy),var(--deep));border:1px solid var(--rose);border-radius:20px;cursor:default;transition:transform .35s}
.el:nth-child(3n+2){background:#1b1416}.el:nth-child(3n){background:var(--rose);color:#111;border-color:var(--rose)}
.el:hover,.el:focus-visible{transform:translateY(-6px)}
.el:focus-visible{outline:3px solid #fff;outline-offset:3px}
.en{position:absolute;top:14px;inset-inline-start:16px;font-weight:700}
.es{font:700 56px/1 var(--head);margin-bottom:4px}
.enm{font-weight:700}
.enote{position:absolute;inset:0;display:flex;align-items:center;padding:16px;font-weight:600;color:#111;background:#fff;transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.el:hover .enote,.el:focus-visible .enote{transform:none}

/* 6 Clock */
.clock{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.ring-wrap{position:relative;max-width:300px;margin-inline:auto;width:100%}
.ring-wrap svg{display:block;width:100%;height:auto}
.ring-track{fill:none;stroke:var(--line);stroke-width:12}
.ring-fill{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-dasharray:503;stroke-dashoffset:503;transform:rotate(-90deg);transform-origin:100px 100px;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rc-day{font:700 72px/1 var(--head);color:var(--accent)}.rc-lbl{font-weight:700;letter-spacing:2px;text-transform:uppercase}
.csteps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.cstep{min-height:46px;padding:10px 22px;font:600 15px/1 var(--body);color:var(--text);background:var(--surface);border:2px solid var(--burgundy);border-radius:999px;cursor:pointer;transition:.25s}
.cstep:hover{transform:translateY(-2px)}.cstep[aria-pressed="true"]{background:var(--burgundy);color:#fff}
.cstep:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cpanel{padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--burgundy);border-radius:18px}
.cpanel[hidden]{display:none}.cpanel:not([hidden]){animation:fadeUp .6s cubic-bezier(.2,.8,.2,1)}
.cpanel p{margin:0}
.note{margin:12px 0 0;font-size:15px;opacity:.85}

/* 7 Quality */
.qual{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.section-burgundy p{color:rgba(255,255,255,.92)}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q-card{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(217,165,168,.55);border-radius:22px;transition:transform .3s,background-color .3s}
.q-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.14)}
.q-card h3{color:#fff;margin-bottom:4px}.q-card p{margin:0}
.chk{width:40px;height:40px;margin-bottom:10px;fill:none;stroke:var(--rose);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chk path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .8s .4s ease}
.q-card.in .chk path,html:not(.js) .chk path{stroke-dashoffset:0}

/* 8 Medallions */
.meds{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.med-ring{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:0 auto 14px;border-radius:50%;background:var(--tint);transition:transform .4s,background-color .4s}
.med-ring::before{content:"";position:absolute;inset:-6px;border:2px dashed var(--burgundy);border-radius:50%;animation:spin 18s linear infinite}
.med:hover .med-ring{transform:translateY(-8px);background:var(--rose)}.med:hover .med-ring::before{animation-duration:4s}
.med-ring svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.med p{margin:0}

/* 9 Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.g-item{position:relative;padding:0;overflow:hidden;background:#1b1416;border:0;border-radius:22px;cursor:zoom-in}
.g1{grid-column:span 2;grid-row:span 2}.g4,.g5,.g6{grid-column:span 2}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.1)}
.g-item:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.g-cap{position:absolute;inset-inline:0;bottom:0;padding:34px 16px 14px;font-weight:700;color:#fff;text-align:start;background:linear-gradient(to top,rgba(17,17,17,.88),transparent);transform:translateY(100%);transition:transform .4s}
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{transform:none}
.lightbox{width:min(92vw,980px);max-width:none;padding:0;color:#fff;background:transparent;border:0;overflow:visible}
.lightbox::backdrop{background:rgba(17,17,17,.9)}
.lightbox figure{margin:0;text-align:center}.lightbox img{max-width:100%;max-height:78vh;border-radius:16px}
.lightbox figcaption{margin-top:10px;font-weight:600}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;font-size:30px;line-height:1;color:#fff;background:var(--burgundy);border:2px solid var(--rose);border-radius:50%;cursor:pointer}
.lb-btn:hover{background:var(--rose);color:#111}.lb-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb-close{top:-14px;inset-inline-end:-14px;z-index:2}.lb-prev,.lb-next{top:45%}.lb-prev{inset-inline-start:-14px}.lb-next{inset-inline-end:-14px}

/* 10 Join */
.join{position:relative;overflow:hidden;padding:56px 24px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--burgundy),var(--deep));border-radius:36px}
.join-in{position:relative;z-index:1;max-width:720px;margin-inline:auto}
.join h2{color:#fff}.join p{color:rgba(255,255,255,.92)}.join .eyebrow{color:var(--rose)}
.jb{position:absolute;border-radius:50%;pointer-events:none;animation:float 9s ease-in-out infinite}
.jb1{width:240px;height:240px;top:-90px;inset-inline-start:-70px;background:var(--rose);opacity:.25}
.jb2{width:180px;height:180px;bottom:-60px;inset-inline-end:-40px;border:34px solid var(--black);opacity:.45;animation-delay:-4s}

@media(max-width:1024px){
  .a-hero-grid,.story2,.insp,.phil,.clock,.qual{grid-template-columns:1fr;gap:32px}
  .a-hero-grid>div:first-child{padding-bottom:12px}.strips{height:340px}
  .s2-media{position:relative;top:0;max-width:420px;margin-inline:auto}.phil-side{position:relative;top:0}
  .elements{grid-template-columns:repeat(2,1fr)}
  .meds{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}.g1{grid-column:span 2}.g4,.g5,.g6{grid-column:span 1}
}
@media(max-width:768px){
  .page-about .section{padding:48px 0}
  .fan{flex-direction:column;gap:14px}.fan-card,.fan-card:first-child,.fan-card.mid,.fan-card:last-child,.fan:hover .fan-card{width:100%;min-height:0;margin:0;transform:none}
  .q-grid{grid-template-columns:1fr}.meds{grid-template-columns:repeat(2,1fr)}
  .acc-in p{padding-inline-start:0}
  .gallery{grid-auto-rows:150px}.join{padding:40px 18px;border-radius:28px}
  .lb-close{top:-10px;inset-inline-end:-6px}.lb-prev{inset-inline-start:-6px}.lb-next{inset-inline-end:-6px}
}
@media(max-width:560px){.elements{grid-template-columns:1fr 1fr}.strips{height:260px;gap:8px}.meds{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-words-in] .w{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ==================================
   CULTURE BREW — PHILOSOPHY SECTION
================================== */

.cb-philosophy {
    --cb-wine: #6B2737;
    --cb-rose: #D9A5A8;
    --cb-ink: #282323;
    --cb-muted: #777071;
    --cb-line: rgba(107, 39, 55, 0.18);

    width: 100%;
    padding: 48px 6%;
    background: #FAF7F5;
    color: var(--cb-ink);
    overflow: hidden;
}

.cb-philosophy-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 52px;
    align-items: center;
}

/* LEFT CONTENT */

.cb-philosophy-intro {
    max-width: 390px;
}

.cb-philosophy-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--cb-wine);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
}

.cb-philosophy-label span {
    width: 23px;
    height: 1px;
    background: var(--cb-wine);
}

.cb-philosophy-intro h2 {
    margin: 0 0 15px;
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1px;
}

.cb-philosophy-intro h2 em {
    color: var(--cb-wine);
    font-weight: 500;
}

.cb-philosophy-intro > p {
    max-width: 340px;
    margin: 0 0 20px;
    color: var(--cb-muted);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

.cb-philosophy-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--cb-wine);
    color: var(--cb-wine);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.25s ease;
}

.cb-philosophy-link:hover {
    gap: 18px;
}

.cb-philosophy-link span {
    font-size: 16px;
}

/* RIGHT CONTENT */

.cb-philosophy-list {
    border-top: 1px solid var(--cb-line);
}

.cb-philosophy-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 25px;
    gap: 15px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--cb-line);
    transition: padding-left 0.25s ease;
}

.cb-philosophy-item:hover {
    padding-left: 5px;
}

.cb-philosophy-number {
    padding-top: 3px;
    color: var(--cb-wine);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

.cb-philosophy-item h3 {
    margin: 0 0 6px;
    color: var(--cb-ink);
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
}

.cb-philosophy-item p {
    max-width: 410px;
    margin: 0;
    color: var(--cb-muted);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}

.cb-philosophy-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid var(--cb-rose);
    border-radius: 50%;
    color: var(--cb-wine);
    font-size: 14px;
    transition: background 0.25s ease, color 0.25s ease;
}

.cb-philosophy-item:hover .cb-philosophy-symbol {
    background: var(--cb-wine);
    color: #FFFFFF;
}

/* BOTTOM SIGNATURE */

.cb-philosophy-footer {
    max-width: 1120px;
    margin: 25px auto 0;
    padding-top: 12px;
    border-top: 1px solid var(--cb-line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--cb-muted);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.4px;
}

/* DARK MODE */

html[data-theme="dark"] .cb-philosophy {
    background: #211C1D;
    color: #F6EFEC;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-intro h2,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-item h3 {
    color: #F6EFEC;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-intro h2 em,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-number,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-symbol {
    color: #D9A5A8;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-label,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-link {
    color: #E4B9BC;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-label span {
    background: #E4B9BC;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-intro > p,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-item p,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-footer {
    color: #C8BDBE;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-list,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-item,
html[data-theme="dark"] .cb-philosophy .cb-philosophy-footer {
    border-color: rgba(217, 165, 168, 0.22);
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-symbol {
    border-color: #A96D79;
}

html[data-theme="dark"] .cb-philosophy .cb-philosophy-item:hover .cb-philosophy-symbol {
    background: #6B2737;
    color: #FFFFFF;
}

/* TABLET */

@media (max-width: 900px) {
    .cb-philosophy {
        padding: 38px 5%;
    }

    .cb-philosophy-inner {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 30px;
    }

    .cb-philosophy-intro h2 {
        font-size: 34px;
    }

    .cb-philosophy-item {
        gap: 10px;
        padding: 17px 0;
    }

    .cb-philosophy-item h3 {
        font-size: 19px;
    }
}

/* MOBILE */

@media (max-width: 640px) {
    .cb-philosophy {
        padding: 32px 20px;
    }

    .cb-philosophy-inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .cb-philosophy-intro {
        max-width: 100%;
    }

    .cb-philosophy-intro h2 {
        font-size: 35px;
    }

    .cb-philosophy-intro > p {
        max-width: 100%;
        font-size: 13px;
    }

    .cb-philosophy-item {
        grid-template-columns: 28px minmax(0, 1fr) 23px;
        gap: 10px;
        padding: 16px 0;
    }

    .cb-philosophy-item h3 {
        font-size: 19px;
    }

    .cb-philosophy-item p {
        font-size: 12px;
        line-height: 1.7;
    }

    .cb-philosophy-footer {
        margin-top: 20px;
        flex-direction: column;
        gap: 7px;
        font-size: 8px;
    }
}
/* CULTURE BREW - product-details.css : loads AFTER style.css, darkmode.css. Uses the same tokens so dark mode works. */
.pd-section{padding:clamp(64px,8vw,104px) 0;position:relative}
.pd-tint{background:var(--tint)}
.pd-dark{background:#111;color:#efe4e5}.pd-dark h2,.pd-dark h3{color:#fff}.pd-dark p{color:#d9cfd0}
.pd-head{max-width:640px;margin:0 0 48px}.pd-head.center{margin-inline:auto;text-align:center}
.pd-head h2{margin-bottom:12px}.pd-head p{margin:0;color:inherit;opacity:.85}
.pd-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.pd-2{grid-template-columns:1fr 1fr}

/* 1 Banner */
.pd-banner{position:relative;isolation:isolate;min-height:520px;display:flex;align-items:flex-end;padding:96px 0 72px;color:#fff;
background:linear-gradient(90deg,rgba(17,17,17,.82),rgba(35,10,19,.35)),url("../images/h2-banner-kombucha.jpg") center/cover no-repeat}
.pd-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;font-size:14px}
.pd-crumbs a{color:var(--rose)}.pd-crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.6}
.pd-banner h1{max-width:12ch;margin-bottom:16px}
.pd-banner p{max-width:520px;font-size:18px;color:#f1e6e7}
.pd-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pd-tags li{padding:8px 16px;font-size:14px;font-weight:600;border:1px solid rgba(217,165,168,.7);border-radius:999px;background:rgba(17,17,17,.35)}

/* 2 Overview / buy box */
.pd-buy{grid-template-columns:1.05fr .95fr;align-items:start}
.pd-gallery{display:grid;gap:16px}
.pd-main{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--tint)}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-main .badge{animation:none}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pd-thumb{padding:0;aspect-ratio:1;border:2px solid transparent;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--tint)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb[aria-pressed="true"]{border-color:var(--accent)}
.pd-info{position:sticky;top:calc(var(--hh) + 24px)}
.pd-info h2{font-size:clamp(30px,4vw,40px);margin-bottom:8px}
.pd-notes{margin:0 0 20px;color:var(--accent);font-weight:600}
.pd-price{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;font:700 32px/1 var(--head);color:var(--heading)}
.pd-price small{font:400 14px var(--body);color:var(--text);opacity:.7}
.pd-label{display:block;margin:24px 0 10px;font-weight:700;color:var(--heading)}
.pd-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pd-pack{padding:14px 10px;font:600 15px/1.3 var(--body);color:var(--text);background:var(--surface);border:2px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .2s,background-color .2s}
.pd-pack span{display:block;font-weight:400;font-size:13px;opacity:.75}
.pd-pack[aria-pressed="true"]{border-color:var(--accent);background:var(--tint)}
.pd-actions{display:flex;gap:12px;margin-top:28px}
.pd-qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;background:var(--surface)}
.pd-qty button{width:48px;height:48px;font-size:20px;color:var(--heading);background:none;border:0;cursor:pointer}
.pd-qty output{min-width:28px;text-align:center;font-weight:700}
.pd-actions .btn{flex:1}
.pd-status{min-height:24px;margin:14px 0 0;font-weight:600;color:var(--accent)}
.pd-assure{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.pd-assure li::before{content:"✓";margin-inline-end:8px;font-weight:700;color:var(--accent)}

/* 4 Flavour profile */
.pd-meters{display:grid;gap:20px}
.pd-meter{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:16px;font-weight:600;color:var(--heading)}
.pd-meter i{position:relative;height:10px;border-radius:99px;background:var(--line)}
.pd-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 20%);border-radius:inherit;background:var(--burgundy)}
html[data-theme="dark"] .pd-meter i::after{background:var(--rose)}
.pd-quote{margin:32px 0 0;padding-inline-start:20px;border-inline-start:3px solid var(--accent);font:600 20px/1.5 var(--head);color:var(--heading)}

/* 7 Details */
.pd-details{max-width:860px;margin-inline:auto}
.pd-details details{border-bottom:1px solid var(--line)}
.pd-details summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:600 20px/1.3 var(--head);color:var(--heading);cursor:pointer;list-style:none}
.pd-details summary::-webkit-details-marker{display:none}
.pd-details summary::after{content:"+";font:400 28px/1 var(--body);transition:transform .25s}
.pd-details details[open] summary::after{transform:rotate(45deg)}
.pd-details .pd-body{padding:0 0 24px}.pd-details table{width:100%;border-collapse:collapse}
.pd-details th,.pd-details td{padding:10px 0;text-align:start;border-bottom:1px solid var(--line);font-size:15px}
.pd-details th{width:42%;font-weight:600;color:var(--heading)}

/* 8 Serve */
.pd-serve{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pd-card{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:24px}
.pd-card h3{font-size:22px}.pd-card p{margin:0}

/* 9 Reviews */
.pd-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pd-review{display:flex;flex-direction:column;justify-content:space-between;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:24px}
.pd-review blockquote{margin:0 0 20px;font:500 18px/1.6 var(--head);color:var(--heading)}
.pd-review cite{font-style:normal;font-weight:600;font-size:14px}.pd-stars{margin-bottom:12px;letter-spacing:3px;color:var(--accent)}

/* 10 Related + join */
.pd-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pd-rel a{text-decoration:none;color:inherit}
.pd-rel .pd-img{aspect-ratio:1;border-radius:24px;margin-bottom:16px}
.pd-rel img{transition:transform .5s}.pd-rel a:hover img{transform:scale(1.05)}
.pd-rel h3{font-size:22px;margin-bottom:4px}.pd-rel p{margin:0;opacity:.8}
.pd-cta{margin-top:72px;padding:clamp(32px,5vw,56px);border-radius:28px;background:var(--burgundy);color:#fff;text-align:center}
.pd-cta h2{color:#fff}.pd-cta p{color:#f3dfe0}

@media (max-width:960px){
.pd-2,.pd-buy{grid-template-columns:1fr}.pd-moments{grid-template-columns:1fr}.pd-info{position:static}

.pd-serve,.pd-reviews,.pd-rel,.pd-bundles{grid-template-columns:1fr}
}
@media (max-width:560px){
.pd-banner{min-height:440px;padding:72px 0 48px}
.pd-packs{grid-template-columns:1fr}.pd-actions{flex-direction:column}
.pd-qty{justify-content:space-between}
}

/* New sections */
.pd-top{align-items:start}
.pd-stages{display:grid;gap:0;margin-top:8px}
.pd-stages li{padding:20px 0 20px 24px;border-inline-start:3px solid var(--rose)}
.pd-stages h3{font-size:22px;margin-bottom:6px}.pd-stages p{margin:0}
.pd-table{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.pd-table table{width:100%;min-width:640px;border-collapse:collapse}
.pd-table th,.pd-table td{padding:18px 24px;text-align:start;border-bottom:1px solid var(--line);font-size:15px}
.pd-table thead th{font-weight:700;color:var(--heading)}
.pd-table tbody th{font-weight:600;color:var(--heading)}.pd-table small{font-weight:400;color:var(--accent)}
.pd-table tr:last-child>*{border-bottom:0}
.pd-table .is-this{background:var(--tint)}.pd-table td span{letter-spacing:2px;color:var(--accent)}
.pd-moments{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:8px}
.pd-moments h3{font-size:20px;margin-bottom:6px}.pd-moments p{margin:0;font-size:15px}
.pd-list{display:grid;gap:0}
.pd-list li{padding:14px 0;border-bottom:1px solid rgba(217,165,168,.35)}
.pd-method{counter-reset:m;display:grid;gap:0}
.pd-method li{counter-increment:m;display:grid;grid-template-columns:36px 1fr;padding:14px 0;border-bottom:1px solid rgba(217,165,168,.35)}
.pd-method li::before{content:counter(m);font-weight:700;color:var(--rose)}
.pd-dark h3{font-size:22px}
.pd-bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pd-bundle{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:36px 32px;background:var(--surface);border:1px solid var(--line);border-radius:28px}
.pd-bundle h3{font-size:24px}.pd-bundle p{opacity:.85}
.pd-bp{margin:auto 0 20px!important;padding-top:8px;font:700 28px/1 var(--head);color:var(--heading);opacity:1!important}
.pd-bundle.is-feat{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.pd-bundle.is-feat h3,.pd-bundle.is-feat .pd-bp{color:#fff}
.pd-bundle .badge{animation:none;top:20px}
.pd-wine{background:var(--burgundy);color:#fff}.pd-wine h2{color:#fff}.pd-wine p{color:#f3dfe0}
.pd-wine .pd-list li{border-color:rgba(255,255,255,.28)}
.pd-dark address{margin-bottom:8px;color:#d9cfd0}
.pd-bundle.is-feat p{color:#f3dfe0}
/* CULTURE BREW: register page additions. Loads after login.css and reuses its cb-login-* classes. */
.cb-reg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cb-reg-row .cb-login-field{min-width:0}

/* Left panel perks (inherits the panel's text colour) */
.cb-reg-perks{margin:24px 0 28px;padding:0;list-style:none;display:grid;gap:10px}
.cb-reg-perks li{display:flex;align-items:center;gap:12px;font-weight:600}
.cb-reg-perks li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}

/* Password field with show/hide */
.cb-reg-pw{position:relative}
.cb-reg-pw input{width:100%;padding-inline-end:76px}
.cb-reg-toggle{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);min-height:36px;padding:4px 12px;font:600 13px var(--body,inherit);color:var(--accent-text,var(--accent,#6B2737));background:transparent;border:0;border-radius:999px;cursor:pointer}
.cb-reg-toggle:hover{background:var(--tint,rgba(217,165,168,.2))}

/* Strength meter */
.cb-reg-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.cb-reg-meter i{height:5px;border-radius:999px;background:var(--line,rgba(17,17,17,.16));transition:background-color .25s}
.cb-reg-meter[data-level="1"] i:nth-child(-n+1){background:#c0392b}
.cb-reg-meter[data-level="2"] i:nth-child(-n+2){background:#d98a1c}
.cb-reg-meter[data-level="3"] i:nth-child(-n+3){background:#7a9a2e}
.cb-reg-meter[data-level="4"] i:nth-child(-n+4){background:#2e7d4f}
.cb-reg-hint{margin:8px 0 0;font-size:13px;opacity:.8}

/* Field errors and form message */
.cb-reg-error{display:none;margin:6px 0 0;font-size:13px;font-weight:600;color:#b3261e}
.cb-reg-error.show{display:block}
input[aria-invalid="true"]{border-color:#b3261e !important}
html[data-theme="dark"] .cb-reg-error{color:#ff9c93}
html[data-theme="dark"] input[aria-invalid="true"]{border-color:#ff9c93 !important}
.cb-login-message.is-error{color:#b3261e}
.cb-login-message.is-success{color:#2e7d4f}
html[data-theme="dark"] .cb-login-message.is-error{color:#ff9c93}
html[data-theme="dark"] .cb-login-message.is-success{color:#8fd6a9}

@media (max-width:520px){.cb-reg-row{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){.cb-reg-meter i{transition:none}}
/* CULTURE BREW: products page (all classes prefixed pr-) */
.pr-page p,.pr-page li,.pr-page dd{text-align:start}
.pr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-sec{padding:96px 0}
.pr-tint{background:var(--tint)}
.pr-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.pr-head h2{margin:0 0 8px}.pr-head p{margin:0;max-width:56ch}
.pr-notes{margin:0 0 10px;font-weight:700;color:var(--accent-text,var(--accent))}
.pr-tag{display:inline-block;margin-inline-start:8px;padding:3px 10px;font:700 12px var(--body);color:#fff;background:var(--burgundy);border-radius:999px;vertical-align:middle}
.pr-mini{display:flex;gap:20px;margin:0 0 18px;font-size:13px}
.pr-mini div{display:flex;flex-direction:column;gap:2px}
.pr-mini dt{font-weight:700}
.pr-mini dd{margin:0;letter-spacing:3px;color:var(--accent-text,var(--accent))}
.pr-link{padding:6px 0;font:600 14px var(--body);color:var(--accent-text,var(--accent));background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pr-link.light{color:var(--rose)}
.pr-more{font-weight:700;color:var(--accent-text,var(--accent));text-decoration:underline;text-underline-offset:3px}
.pr-outline{color:#fff;background:transparent;border-color:var(--rose)}
.pr-outline:hover{background:rgba(217,165,168,.25);color:#fff}

/* 1 hero */
.pr-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(620px);padding:100px 0 72px;color:#fff;background:var(--black)}
.pr-hero>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% center}
.pr-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(77,27,39,.62) 55%,rgba(17,17,17,.2) 100%),linear-gradient(0deg,rgba(17,17,17,.65),transparent 50%)}
.pr-hero h1{margin-bottom:18px;max-width:10ch;font-size:clamp(48px,9vw,104px);line-height:1;color:#fff}
.pr-hero p{max-width:50ch;font-size:19px;color:rgba(255,255,255,.92)}
.pr-facts{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.pr-facts li{padding:8px 16px;font-size:14px;font-weight:600;background:rgba(17,17,17,.4);border:1px solid rgba(217,165,168,.6);border-radius:999px}

/* 2 list */
.pr-controls{display:flex;gap:10px;flex-wrap:wrap}
.pr-field{min-height:46px;padding:8px 14px;font:500 15px var(--body);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pr-field[type=search]{width:220px}
.pr-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pr-status p{margin:0;font-weight:600}
.pr-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pr-row{display:grid;grid-template-columns:104px minmax(170px,1fr) minmax(220px,1.4fr) 150px auto;gap:24px;align-items:center;padding:20px 12px;border-bottom:1px solid var(--line);border-radius:12px;transition:background-color .25s}
.pr-row:hover{background:var(--tint)}
.pr-row[hidden]{display:none}
.pr-row>img{width:104px;aspect-ratio:1;object-fit:cover;border-radius:50%}
.pr-row h3{margin:0 0 4px;font-size:24px}
.pr-row .pr-notes,.pr-row-d,.pr-row .pr-mini{margin:0}
.pr-row .pr-mini{flex-direction:column;gap:6px}
.pr-row .pr-mini div{flex-direction:row;justify-content:space-between;gap:10px}
.pr-flash{animation:prflash 1.6s ease-out}
@keyframes prflash{0%{box-shadow:0 0 0 0 var(--rose)}30%{box-shadow:0 0 0 8px var(--rose)}100%{box-shadow:0 0 0 0 transparent}}
.pr-empty{padding:56px 0;text-align:center}.pr-empty[hidden]{display:none}

/* 3 tiles */
.pr-tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.pr-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:200px;padding:26px;text-align:start;font:400 15px var(--body);border:0;border-radius:28px;cursor:pointer;transition:transform .3s}
.pr-tile:hover{transform:translateY(-4px)}
.pr-tile strong{font:700 28px/1.1 var(--head)}
.pr-tile-n{font-size:13px;font-weight:700;opacity:.9}
.pr-tile-d{max-width:20ch}
.pr-tile>img{position:absolute;inset-inline-end:-22px;bottom:-22px;width:136px;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid currentColor;opacity:.92}
.pr-tile[aria-pressed="true"]{outline:4px solid var(--heading);outline-offset:4px}
.pr-tile:nth-child(1){grid-column:span 4}.pr-tile:nth-child(2){grid-column:span 4}.pr-tile:nth-child(3){grid-column:span 4}
.pr-tile:nth-child(4){grid-column:span 5}.pr-tile:nth-child(5){grid-column:span 4}.pr-tile:nth-child(6){grid-column:span 3}
.t-all{color:#fff;background:var(--burgundy)}.t-fruity{color:#111;background:var(--rose)}.t-citrus{color:#fff;background:#111}
.t-herbal{color:#fff;background:var(--deep)}.t-bold{color:var(--heading);background:var(--surface);box-shadow:inset 0 0 0 2px var(--burgundy)}.t-seasonal{color:#fff;background:linear-gradient(135deg,var(--burgundy),#111)}

/* 4 signature stack */
.pr-sig{display:grid;gap:28px;margin:0;padding:0;list-style:none}
.pr-panel{position:sticky;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;min-height:440px;padding:48px;color:#fff;border-radius:32px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.pr-panel:nth-child(1){top:calc(var(--hh) + 20px);background:var(--burgundy)}
.pr-panel:nth-child(2){top:calc(var(--hh) + 44px);background:var(--deep)}
.pr-panel:nth-child(3){top:calc(var(--hh) + 68px);background:#111;border:1px solid var(--rose)}
.pr-panel-pic img{width:100%;max-width:340px;aspect-ratio:1;margin-inline:auto;display:block;object-fit:cover;border-radius:50%;border:5px solid var(--rose)}
.pr-panel h3{margin:0 0 10px;font-size:clamp(30px,4vw,44px);color:#fff}
.pr-panel p{color:rgba(255,255,255,.9)}
.pr-num{margin:0 0 6px;font-weight:700;color:var(--rose)}
.pr-lead{font-size:18px}
.pr-stages{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.pr-stages li{padding-inline-start:16px;border-inline-start:2px solid var(--rose);color:rgba(255,255,255,.92)}
.pr-panel .pr-mini dd{color:var(--rose)}

/* 5 rail */
.pr-arrows{display:flex;gap:10px}
.pr-arrow{width:52px;height:52px;font-size:22px;color:#fff;background:var(--burgundy);border:0;border-radius:50%;cursor:pointer}
.pr-arrow:disabled{opacity:.35;cursor:not-allowed}
.pr-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 24px;scrollbar-width:thin}
.pr-arch{flex:0 0 clamp(250px,27vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:150px 150px 28px 28px}
.pr-arch-pic img{width:100%;aspect-ratio:3/3.2;object-fit:cover;display:block}
.pr-arch-b{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.pr-arch-b h3{margin:0 0 4px;font-size:24px}
.pr-arch-b .btn{margin-top:auto;align-self:flex-start}

/* 6 herbal */
.pr-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pr-fig{position:relative;margin:0}
.pr-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px}
.pr-fig figcaption{position:absolute;inset-inline:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
.pr-fig figcaption span{padding:7px 14px;font:700 13px var(--body);color:#111;background:var(--rose);border-radius:999px}
.pr-herbs{display:grid;gap:20px;margin-top:28px}
.pr-herb{display:flex;gap:22px;align-items:center;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:24px}
.pr-herb>img{flex:0 0 108px;width:108px;aspect-ratio:1;object-fit:cover;border-radius:50%}
.pr-herb h3{margin:0 0 2px;font-size:22px}.pr-herb p{margin-bottom:8px}

/* 7 seasonal tickets */
.pr-season h2,.pr-season h3{color:#fff}.pr-season .pr-head p{color:rgba(255,255,255,.88)}
.pr-tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:32px}
.pr-ticket{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:center;padding:30px 34px;color:#111;background:var(--rose);border-radius:20px;transition:transform .3s;
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 16px,#000 17px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 16px,#000 17px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 16px,#000 17px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 16px,#000 17px) right/51% 100% no-repeat}
.pr-ticket:nth-child(odd){transform:rotate(-1deg)}.pr-ticket:nth-child(even){transform:rotate(1deg)}
.pr-ticket:hover{transform:rotate(0)}
.pr-ticket h3{margin:8px 0 2px;color:#111;font-size:26px}
.pr-ticket p{color:#111}.pr-ticket .pr-notes{color:var(--deep)}
.pr-ticket-pic img{width:170px;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid var(--burgundy)}
.pr-ticket-b{padding-inline-start:26px;border-inline-start:2px dashed var(--burgundy)}
.pr-limited{display:inline-block;padding:4px 12px;font:700 12px var(--body);letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--burgundy);border-radius:999px}

/* 8 compare */
.pr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.pr-chip{min-height:44px;padding:8px 20px;font:600 15px var(--body);color:var(--text);background:var(--surface);border:1px solid var(--burgundy);border-radius:999px;cursor:pointer}
.pr-chip[aria-pressed="true"]{color:#fff;background:var(--burgundy)}
.pr-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px}
.pr-table{width:100%;min-width:640px;border-collapse:collapse}
.pr-table th,.pr-table td{padding:16px 14px;text-align:start;vertical-align:middle;border-bottom:1px solid var(--line)}
.pr-table [hidden]{display:none}
.pr-table thead th{font:700 17px var(--head);color:var(--heading)}
.pr-table thead img{display:block;width:64px;aspect-ratio:1;margin-bottom:8px;object-fit:cover;border-radius:50%}
.pr-table tbody th{position:sticky;inset-inline-start:0;background:var(--bg);font-weight:700;white-space:nowrap}
.pr-dots{letter-spacing:3px;color:var(--accent-text,var(--accent))}
.pr-table tr:last-child>*{border-bottom:0}

/* 9 finder */
.pr-finder{background:var(--burgundy);color:#fff}
.pr-finder h2,.pr-finder p{color:#fff}
.pr-fin-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.pr-quiz{min-height:300px;padding:32px;background:#1b1416;border:1px solid rgba(217,165,168,.4);border-radius:28px}
.pr-quiz h3{color:#fff;font-size:28px;outline:none}
.pr-qp{margin:0 0 8px;font-weight:700;color:var(--rose)}
.pr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px 0}
.pr-opt{min-height:56px;padding:10px 16px;font:600 16px var(--body);color:#fff;background:transparent;border:1px solid var(--rose);border-radius:16px;cursor:pointer}
.pr-opt:hover{background:rgba(217,165,168,.2)}
.pr-res{display:flex;gap:24px;align-items:center}
.pr-res>img{flex:0 0 150px;width:150px;aspect-ratio:1;object-fit:cover;border-radius:50%}
.pr-acts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.pr-also{margin:0 0 6px}

/* 10 CTA */
.pr-cta{position:relative;isolation:isolate;padding:110px 0;text-align:center;color:#fff;background:var(--deep)}
.pr-cta>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.pr-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(77,27,39,.86)}
.pr-cta h2{color:#fff;font-size:clamp(34px,5vw,56px)}
.pr-page .pr-cta p{max-width:54ch;margin-inline:auto;text-align:center;color:rgba(255,255,255,.92);font-size:18px}
.pr-cta .btn-row{justify-content:center}

/* responsive */
@media (max-width:1000px){
  .pr-row{grid-template-columns:88px 1fr auto;gap:16px}
  .pr-row>img{width:88px}
  .pr-row-d{grid-column:2 / 4}
  .pr-row .pr-mini{grid-column:2;flex-direction:row;gap:16px}
  .pr-row .btn{grid-column:3;grid-row:1;align-self:start}
  .pr-tile:nth-child(n){grid-column:span 6}
}
@media (max-width:860px){
  .pr-sec{padding:64px 0}
  .pr-hero{padding:96px 0 48px}
  .pr-panel{position:static;grid-template-columns:1fr;gap:24px;padding:28px;min-height:0}
  .pr-split,.pr-fin-grid{grid-template-columns:1fr;gap:36px}
  .pr-ticket{grid-template-columns:1fr;text-align:center;justify-items:center}
  .pr-ticket-b{padding-inline-start:0;border-inline-start:0;padding-top:20px;border-top:2px dashed var(--burgundy)}
  .pr-res{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .pr-row{grid-template-columns:72px 1fr}
  .pr-row>img{width:72px}
  .pr-row-d,.pr-row .pr-mini,.pr-row .btn{grid-column:1 / 3;grid-row:auto}
  .pr-tile:nth-child(n){grid-column:span 12}
  .pr-field[type=search]{width:100%}.pr-controls{width:100%}.pr-controls .pr-field{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .pr-tile,.pr-ticket,.pr-row{transition:none}.pr-tile:hover{transform:none}.pr-ticket:nth-child(n){transform:none}
  .pr-flash{animation:none;outline:3px solid var(--burgundy);outline-offset:4px}
}/* CULTURE BREW: taproom page (all classes prefixed tr-) */
.tr-page p,.tr-page li,.tr-page dd,.tr-page figcaption{text-align:start}
.tr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tr-sec{padding:100px 0}
.tr-tint{background:var(--tint)}
.tr-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.tr-head h2{margin:0 0 8px}.tr-head p{margin:0;max-width:56ch}
.tr-sample{display:inline-block;padding:6px 14px;font:700 12px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--burgundy);border:1.5px dashed var(--burgundy);border-radius:999px}
.tr-sample[hidden]{display:none}
.tr-sample.light{color:var(--rose);border-color:var(--rose)}
.tr-small{margin:14px 0 0;font-size:13px;opacity:.85}
.tr-outline{color:#fff;background:transparent;border-color:var(--rose)}
.tr-outline:hover{background:rgba(217,165,168,.25);color:#fff}
.tr-ghost{color:var(--burgundy);background:transparent;border-color:var(--burgundy)}
.tr-ghost:hover{background:var(--tint);color:var(--burgundy)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* 1 hero */
.tr-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(900px);padding:190px 0 80px;color:#fff;background:#140c0a;overflow:hidden}
.tr-hero>img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.tr-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 100%,rgba(242,194,123,.28),transparent 55%),linear-gradient(180deg,rgba(20,12,10,.8),rgba(77,27,39,.55) 55%,rgba(20,12,10,.92))}
.tr-lights{position:absolute;inset:0 0 auto;height:70px;z-index:-1}
.tr-lights svg{position:absolute;inset:0 0 auto;width:100%;height:30px;fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5}

@keyframes trglow{0%,100%{opacity:1}50%{opacity:.55}}
.tr-kicker{margin:0 0 10px;font-weight:700;letter-spacing:4px;color:var(--rose)}
.tr-hero h1{margin:0 0 10px;font-size:clamp(38px,11vw,px);line-height:.95;color:#fff}
.tr-tag{margin:0 0 20px;font:italic 600 clamp(22px,3vw,34px) var(--head);color:#f2c27b}
.tr-live{display:inline-block;margin:0 0 28px;padding:8px 18px;font-weight:600;background:rgba(20,12,10,.55);border:1px solid rgba(242,194,123,.6);border-radius:999px}

/* 2 welcome */
.tr-wel-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.tr-big{font:600 clamp(22px,2.6vw,30px)/1.35 var(--head);color:var(--heading)}
.tr-collage{position:relative;aspect-ratio:1/1.05}
.tr-collage img{position:absolute;object-fit:cover;border-radius:28px;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.tr-c1{inset:0 22% 26% 0;width:78%;height:74%}
.tr-c2{inset:auto 0 0 28%;width:72%;height:62%;border:6px solid var(--bg)}
.tr-seal{position:absolute;inset-inline-start:2%;bottom:6%;width:128px;height:128px;color:#fff;animation:trspin 22s linear infinite}
.tr-seal circle:first-of-type{fill:var(--burgundy)}
.tr-seal circle:last-of-type{fill:var(--rose)}
.tr-seal text{font:700 11px var(--body);fill:#fff}
@keyframes trspin{to{transform:rotate(360deg)}}

/* 3 tasting */
.tr-tas-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.tr-tabs,.tr-flight{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:28px}
.tr-tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tr-tab{min-height:44px;padding:8px 18px;font:600 15px var(--body);color:var(--text);background:transparent;border:1px solid var(--burgundy);border-radius:999px;cursor:pointer}
.tr-tab[aria-selected="true"]{color:#fff;background:var(--burgundy)}
.tr-tabpanel h3,.tr-flight h3{margin:0 0 8px;font-size:26px}
.tr-tabpanel p{font-size:17px}
.tr-picks{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.tr-pick{position:relative}
.tr-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tr-pick span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;font:600 15px var(--body);color:var(--text);background:var(--surface);border:1px solid var(--burgundy);border-radius:999px}
.tr-pick input:checked+span{color:#fff;background:var(--burgundy)}
.tr-pick input:focus-visible+span{outline:3px solid var(--rose);outline-offset:2px}
.tr-flight-out{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tr-flight-out li{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--tint);border-radius:16px;font-weight:600}
.tr-flight-out b{display:grid;place-items:center;width:32px;height:32px;color:#fff;background:var(--burgundy);border-radius:50%}
.tr-flight-out .tr-flight-empty{display:block;background:transparent;font-weight:400;opacity:.8}

/* 4 tap board */
.tr-board{color:#f4e9df;background:#17110f;background-image:radial-gradient(circle at 15% 0,rgba(242,194,123,.12),transparent 45%),radial-gradient(circle at 90% 100%,rgba(217,165,168,.12),transparent 45%)}
.tr-board h2,.tr-board h3{color:#f4e9df}
.tr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.tr-chip{min-height:44px;padding:8px 20px;font:600 15px var(--body);color:#f4e9df;background:transparent;border:1px solid rgba(244,233,223,.5);border-radius:999px;cursor:pointer}
.tr-chip[aria-pressed="true"]{color:#17110f;background:#f2c27b;border-color:#f2c27b}
.tr-count{margin:0 0 18px;font-size:14px;opacity:.85}
.tr-taps{margin:0;padding:0;list-style:none;border:2px solid rgba(244,233,223,.25);border-radius:20px;box-shadow:inset 0 0 0 6px #17110f,inset 0 0 0 7px rgba(244,233,223,.18)}
.tr-tap{display:flex;align-items:center;gap:16px;padding:22px 32px;border-bottom:1px dashed rgba(244,233,223,.2)}
.tr-tap:last-child{border-bottom:0}
.tr-tap[hidden]{display:none}
.tr-tap-n{font:700 18px var(--head);color:#f2c27b}
.tr-tap-t h3{margin:0;font-size:26px}
.tr-tap-t p{margin:2px 0 0;color:rgba(244,233,223,.8)}
.tr-leader{flex:1;min-width:30px;border-bottom:2px dotted rgba(244,233,223,.35);transform:translateY(4px)}
.tr-tap-m{display:flex;gap:22px;margin:0;font-size:13px}
.tr-tap-m div{display:flex;flex-direction:column;gap:2px}
.tr-tap-m dt{font-weight:700}
.tr-tap-m dd{margin:0;letter-spacing:3px;color:#f2c27b}

/* 5 polaroids */
.tr-polas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;padding:10px 0}
.tr-pola{position:relative;padding:16px 16px 26px;color:#111;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.2);transform:rotate(var(--r));transition:transform .3s}
.tr-pola:hover{transform:rotate(0) translateY(-6px)}
.tr-pola::before{content:"";position:absolute;top:-14px;inset-inline-start:calc(50% - 44px);width:88px;height:28px;background:rgba(217,165,168,.75);transform:rotate(-3deg)}
.tr-pola img{width:100%;aspect-ratio:1;object-fit:cover}
.tr-pola h3{margin:16px 0 2px;color:#111;font-size:24px}
.tr-pola p{color:#222}
.tr-pn{margin:0 0 8px;font-weight:700;color:var(--burgundy)}

/* 6 gallery mosaic */
.tr-dark{color:#fff;background:#0f0a09}
.tr-dark h2{color:#fff}.tr-dark .tr-head p{color:rgba(255,255,255,.85)}
.tr-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px}
.tr-tile{position:relative;overflow:hidden;padding:0;border:0;border-radius:20px;cursor:zoom-in;background:#222}
.tr-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tr-tile:hover img,.tr-tile:focus-visible img{transform:scale(1.07)}
.tr-tile span{position:absolute;inset:auto 0 0;padding:28px 14px 12px;font:600 13px var(--body);text-align:start;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .3s}
.tr-tile:hover span,.tr-tile:focus-visible span{opacity:1}
.g1{grid-column:1/3;grid-row:1/3}.g2{grid-column:3/5;grid-row:1/4}.g3{grid-column:5/7;grid-row:1/3}
.g4{grid-column:1/3;grid-row:3/5}.g5{grid-column:5/7;grid-row:3/5}.g6{grid-column:3/4;grid-row:4/5}.g7{grid-column:4/5;grid-row:4/5}
.tr-lb{width:min(1000px,100% - 24px);max-height:94vh;padding:0;color:#fff;background:#0f0a09;border:1px solid rgba(217,165,168,.4);border-radius:24px}
.tr-lb::backdrop{background:rgba(0,0,0,.82)}
.tr-lb-in{position:relative;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:8px;padding:56px 12px 20px}
.tr-lb figure{margin:0}
.tr-lb img{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:12px}
.tr-lb figcaption{margin-top:12px;text-align:center;color:rgba(255,255,255,.9)}
.tr-lb-x{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;font-size:28px;color:#fff;background:rgba(255,255,255,.12);border:0;border-radius:50%;cursor:pointer}
.tr-lb-a{width:48px;height:48px;font-size:22px;color:#fff;background:var(--burgundy);border:0;border-radius:50%;cursor:pointer}

/* 7 behind the scenes */
.tr-bts{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.tr-bts-fig{position:sticky;top:calc(var(--hh) + 24px);margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:28px;background:#222}
.tr-bts-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.tr-bts-fig img.is-on{opacity:1}
.tr-bts-fig figcaption{position:absolute;inset:auto 0 6px;padding:40px 22px 18px;font-weight:700;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
.tr-bar{position:absolute;inset:auto 0 0;height:6px;background:rgba(255,255,255,.25)}
.tr-bar i{display:block;height:100%;width:25%;background:#f2c27b;transition:width .5s}
.tr-steps{margin:36px 0 0;padding:0;list-style:none}
.tr-step{display:flex;gap:24px;min-height:300px;padding:28px 0;border-top:2px solid var(--line);opacity:.45;transition:opacity .4s}
.tr-step.is-active{opacity:1;border-top-color:var(--burgundy)}
.tr-step>span{font:700 44px/1 var(--head);color:var(--accent-text,var(--accent))}
.tr-step h3{margin:0 0 6px;font-size:28px}.tr-step p{font-size:17px}

/* 8 hours + info */
.tr-hrs-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.tr-hours-wrap{padding:30px;color:#fff;background:var(--burgundy);border-radius:28px}
.tr-hours-wrap h3{margin:0 0 14px;color:#fff;font-size:26px}
.tr-hours{width:100%;border-collapse:collapse}
.tr-hours th,.tr-hours td{padding:12px 8px;text-align:start;border-bottom:1px solid rgba(255,255,255,.22)}
.tr-hours th{font-weight:700}
.tr-hours tr:last-child>*{border-bottom:0}
.tr-hours tr.is-today{background:rgba(242,194,123,.22);box-shadow:inset 4px 0 0 #f2c27b}
.tr-hours tr.is-today th::after{content:" (today)";font-weight:400;color:#f2c27b}
.tr-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.tr-info article{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.tr-info h3{margin:0 0 6px;font-size:21px}.tr-info p{margin:0}

/* 9 location */
.tr-loc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:stretch}
.tr-map{position:relative;min-height:420px;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:
  repeating-linear-gradient(90deg,transparent 0 78px,rgba(107,39,55,.14) 78px 82px),repeating-linear-gradient(0deg,transparent 0 78px,rgba(107,39,55,.14) 78px 82px),
  linear-gradient(135deg,var(--tint),var(--surface))}
.tr-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tr-map-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center}
.tr-map-ph svg{width:64px;height:64px;fill:var(--burgundy);stroke:#fff;stroke-width:1.2}
.tr-map-ph circle{fill:#fff;stroke:none}
.tr-map-ph p{max-width:26ch;margin:0;font-weight:600;text-align:center}
.tr-addr{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:28px}
.tr-addr dl{margin:0 0 20px;display:grid;gap:14px}
.tr-addr dt{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent-text,var(--accent))}
.tr-addr dd{margin:2px 0 0;font-size:17px}
.tr-addr dd a{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.tr-acts{display:flex;flex-wrap:wrap;gap:10px}
.tr-acts .btn{min-height:48px;padding:10px 22px;font-size:15px}
.tr-hint{margin:14px 0 0;font-size:13px;opacity:.85}.tr-hint[hidden]{display:none}
.tr-addr h3{margin:24px 0 8px;font-size:22px}
.tr-find{margin:0;padding-inline-start:20px}.tr-find li{list-style:disc;margin-bottom:4px}

/* 10 CTA */
.tr-cta{position:relative;isolation:isolate;padding:130px 0;text-align:center;color:#fff;background:#140c0a;overflow:hidden}
.tr-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 120%,rgba(242,194,123,.35),transparent 55%),radial-gradient(circle at 15% 0,rgba(107,39,55,.7),transparent 50%)}
.tr-cta h2{max-width:20ch;margin-inline:auto;color:#fff;font-size:clamp(36px,6vw,68px);line-height:1.05}
.tr-cta p{max-width:50ch;margin-inline:auto;text-align:center;font-size:19px;color:rgba(255,255,255,.92)}
.tr-cta .btn-row{justify-content:center}

/* responsive */
@media (max-width:1000px){
  .tr-wel-grid,.tr-tas-grid,.tr-hrs-grid,.tr-loc-grid{grid-template-columns:1fr;gap:40px}
  .tr-bts{grid-template-columns:1fr;gap:32px}
  .tr-bts-fig{position:relative;top:0;aspect-ratio:16/10}
  .tr-step{min-height:0}
  .tr-collage{max-width:520px}
  .tr-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:120px}
  .g1{grid-column:1/5;grid-row:1/3}.g2{grid-column:1/3;grid-row:3/5}.g3{grid-column:3/5;grid-row:3/5}.g4{grid-column:1/3;grid-row:5/7}.g5{grid-column:3/5;grid-row:5/7}.g6{grid-column:1/3;grid-row:7/9}.g7{grid-column:3/5;grid-row:7/9}
}
@media (max-width:640px){
  .tr-sec{padding:68px 0}
  .tr-hero{padding:120px 0 56px}
  .tr-tap{flex-wrap:wrap;padding:18px 20px;gap:8px 12px}
  .tr-leader{display:none}
  .tr-tap-m{width:100%}
  .tr-lb-in{grid-template-columns:1fr;padding-top:60px}
  .tr-lb-a{position:absolute;bottom:16px}.tr-lb-a.prev{inset-inline-start:16px}.tr-lb-a.next{inset-inline-end:16px}
  .tr-lb figcaption{padding-bottom:56px}
  .tr-map{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .tr-lights i,.tr-seal{animation:none}
  .tr-pola,.tr-tile img,.tr-bts-fig img,.tr-step,.tr-bar i{transition:none}
  .tr-pola:hover{transform:rotate(var(--r))}
}
/* Taproom Hero - Center Content */
.tr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tr-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-inline: auto;
}

.tr-hero .btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* PRODUCTS HERO — CENTER ALIGNMENT */
.pr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pr-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr-hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pr-hero h1,
.pr-hero p {
  text-align: center;
}

.pr-hero p {
  max-width: 650px;
  margin-inline: auto;
}

.pr-hero .btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pr-hero .pr-facts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding-inline: 0;
  list-style: none;
  text-align: center;
  width: 100%;
}

/* CULTURE BREW — PRODUCT DETAILS PAGE */
.cb-product-page {
  --cb-primary: #6B2737;
  --cb-secondary: #D9A5A8;
  --cb-black: #111111;
  --cb-white: #FFFFFF;
  --cb-border: rgba(107, 39, 55, 0.17);
  color: var(--cb-black);
  background: var(--cb-white);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  overflow: clip;
}

.cb-product-page *,
.cb-product-page *::before,
.cb-product-page *::after {
  box-sizing: border-box;
}

.cb-product-page h2 {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -1.2px;
}

.cb-product-page h2 em {
  color: var(--cb-primary);
  font-style: italic;
}

.cb-product-page h3 {
  margin: 24px 0 7px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
}

.cb-product-page p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
}

.cb-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--cb-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cb-products-intro {
  max-width: 850px;
  margin: 0 auto;
  padding: 70px 24px 48px;
  text-align: center;
}

.cb-products-intro > p,
.cb-quality-section > p,
.cb-final-cta > p {
  max-width: 650px;
  margin: 0 auto 24px;
}

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid var(--cb-primary);
  border-radius: 3px;
  background: var(--cb-primary);
  color: var(--cb-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.cb-btn:hover {
  background: var(--cb-secondary);
  border-color: var(--cb-secondary);
  color: var(--cb-black);
}

.cb-product-nav {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-left: 120PX;
}

.cb-product-nav a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--cb-border);
  border-radius: 2px;
  color: var(--cb-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cb-product-nav a:hover {
  background: var(--cb-primary);
  color: var(--cb-white);
}

.cb-product-detail {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 32px;
  border-bottom: 1px solid var(--cb-border);
  scroll-margin-top: 24px;
}

.cb-product-detail.cb-reverse .cb-product-visual {
  order: 2;
}

.cb-product-detail.cb-reverse .cb-product-info {
  order: 1;
}

.cb-product-visual {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 390px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f0f0;
}

.cb-product-visual img {
  display: block;
  width: 100%;
  
  object-fit: contain;
  padding: 22px;
}

.cb-product-number {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  color: var(--cb-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.cb-product-stamp {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 7px 10px;
  background: var(--cb-white);
  color: var(--cb-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.cb-product-info {
  min-width: 0;
}

.cb-product-info > p {
  max-width: 640px;
}

.cb-taste-line {
  margin-bottom: 18px !important;
  color: var(--cb-primary);
  font-weight: 700;
  letter-spacing: .4px;
}

.cb-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0;
  padding: 17px 0;
  border-top: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
}

.cb-price-row small,
.cb-spec-grid small {
  display: block;
  margin-bottom: 5px;
  color: #6f6265;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.cb-price-row strong {
  color: var(--cb-primary);
  font-size: 27px;
  line-height: 1.3;
}

.cb-availability {
  max-width: 48%;
  padding: 7px 10px;
  background: #f7eeee;
  color: var(--cb-primary);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.cb-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 20px 0;
  border-top: 1px solid var(--cb-border);
}

.cb-spec-grid > div {
  padding: 13px 0;
  border-bottom: 1px solid var(--cb-border);
}

.cb-spec-grid strong {
  font-size: 14px;
  font-weight: 600;
}

.cb-detail-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 24px;
  padding-left: 19px;
}

.cb-detail-list li {
  padding-left: 3px;
}

.cb-detail-list li::marker {
  color: var(--cb-primary);
}

.cb-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.cb-product-actions label {
  font-size: 13px;
  font-weight: 700;
}

.cb-quantity {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  background: var(--cb-white);
  color: var(--cb-black);
  font: inherit;
}

.cb-product-actions .cb-btn {
  flex: 1 1 210px;
}

.cb-placeholder-visual {
  flex-direction: column;
  background:
    radial-gradient(ellipse at center, #ead1d4 0%, #f7eeee 45%, #f3e9e8 100%);
}

.cb-placeholder-bottle {
  display: grid;
  width: 112px;
  height: 245px;
  align-content: center;
  justify-items: center;
  border: 3px solid rgba(107, 39, 55, .5);
  border-radius: 20px 20px 14px 14px;
  background: rgba(107, 39, 55, .12);
  color: var(--cb-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.cb-placeholder-bottle span {
  display: block;
  margin-top: 12px;
  font-size: 32px;
}

.cb-quality-section,
.cb-size-section,
.cb-faq-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 32px;
}

.cb-quality-section > h2,
.cb-quality-section > .cb-eyebrow,
.cb-quality-section > p,
.cb-size-section > h2,
.cb-size-section > .cb-eyebrow,
.cb-faq-section > h2,
.cb-faq-section > .cb-eyebrow {
  display: block;
  text-align: center;
}

.cb-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.cb-quality-grid article {
  padding: 22px 18px;
  border-top: 2px solid var(--cb-primary);
  background: #faf6f6;
}

.cb-quality-grid h3 {
  margin-top: 0;
}

.cb-quality-grid p {
  margin-bottom: 0;
}

.cb-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.cb-size-grid article {
  padding: 24px;
  border: 1px solid var(--cb-border);
}

.cb-size-grid article > span {
  color: var(--cb-secondary);
  font-size: 13px;
  font-weight: 700;
}

.cb-size-grid h3 {
  margin-top: 10px;
}

.cb-size-grid small {
  color: var(--cb-primary);
  font-weight: 700;
}

.cb-small-note {
  margin-top: 18px !important;
  color: #6f6265;
  font-size: 12px !important;
}

.cb-faq-section details {
  padding: 18px 0;
  border-bottom: 1px solid var(--cb-border);
}

.cb-faq-section details:first-of-type {
  margin-top: 24px;
  border-top: 1px solid var(--cb-border);
}

.cb-faq-section summary {
  color: var(--cb-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.cb-faq-section details p {
  margin: 12px 0 0;
  max-width: 800px;
}

.cb-final-cta {
  padding: 65px 24px;
  background: var(--cb-primary);
  color: var(--cb-white);
  text-align: center;
}

.cb-final-cta .cb-eyebrow,
.cb-final-cta h2 em {
  color: var(--cb-secondary);
}

.cb-final-cta h2 em {
  font-style: italic;
}

.cb-final-cta > p {
  color: rgba(255,255,255,.88);
}

.cb-final-cta .cb-btn {
  background: var(--cb-white);
  border-color: var(--cb-white);
  color: var(--cb-primary);
}

.cb-final-cta .cb-btn:hover {
  background: var(--cb-secondary);
  border-color: var(--cb-secondary);
  color: var(--cb-black);
}

@media (max-width: 900px) {
  .cb-product-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 42px 24px;
  }

  .cb-product-detail.cb-reverse .cb-product-visual,
  .cb-product-detail.cb-reverse .cb-product-info {
    order: initial;
  }

  .cb-product-visual,
  .cb-product-visual img {
    min-height: 320px;
    height: 320px;
  }

  .cb-quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cb-products-intro {
    padding: 48px 20px 32px;
  }

  .cb-product-page h2 {
    font-size: 30px;
    letter-spacing: -.7px;
  }

  .cb-product-page h3 {
    font-size: 21px;
  }

  .cb-product-detail {
    padding: 34px 18px;
  }

  .cb-product-visual,
  .cb-product-visual img {
    min-height: 280px;
    height: 280px;
  }

  .cb-quality-section,
  .cb-size-section,
  .cb-faq-section {
    padding: 48px 20px;
  }

  .cb-quality-grid,
  .cb-size-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cb-price-row {
    align-items: flex-start;
  }

  .cb-product-actions .cb-btn {
    flex-basis: 100%;
  }
}

/* DARK MODE — works when the page body has .dark-mode */
body.dark-mode .cb-product-page {
  --cb-black: #f5eeee;
  --cb-white: #171315;
  --cb-border: rgba(217, 165, 168, .23);
  background: #171315;
  color: #f5eeee;
}

body.dark-mode .cb-product-page .cb-product-visual,
body.dark-mode .cb-product-page .cb-quality-grid article,
body.dark-mode .cb-product-page .cb-size-grid article {
  background-color: #21191c;
}

body.dark-mode .cb-product-page .cb-product-number,
body.dark-mode .cb-product-page .cb-product-stamp,
body.dark-mode .cb-product-page .cb-availability,
body.dark-mode .cb-product-page .cb-price-row strong,
body.dark-mode .cb-product-page .cb-spec-grid small,
body.dark-mode .cb-product-page .cb-faq-section summary {
  color: #f0bdc3;
}

body.dark-mode .cb-product-page .cb-product-stamp,
body.dark-mode .cb-product-page .cb-availability {
  background: #302126;
}

body.dark-mode .cb-product-page .cb-quantity {
  background: #21191c;
  color: #f5eeee;
  border-color: rgba(217,165,168,.35);
}

body.dark-mode .cb-product-page .cb-final-cta {
  background: #29171d;
}

/* RTL */
body.rtl .cb-product-page,
html[dir="rtl"] .cb-product-page {
  direction: rtl;
  text-align: right;
}

body.rtl .cb-product-nav,
html[dir="rtl"] .cb-product-nav {
  direction: rtl;
}

body.rtl .cb-detail-list,
html[dir="rtl"] .cb-detail-list {
  padding-left: 0;
  padding-right: 19px;
}

body.rtl .cb-product-number,
html[dir="rtl"] .cb-product-number {
  left: auto;
  right: 18px;
}


/* ==========================================
   ABOUT PAGE — FIRST 3 SECTIONS DARK MODE FIX
   Scoped fix: other pages/sections untouched
========================================== */

/* 1. OUR BREWING ETHOS */
html[data-theme="dark"] body.page-about .cb-philosophy {
    background: #111111 !important;
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about .cb-philosophy h2,
html[data-theme="dark"] body.page-about .cb-philosophy h3,
html[data-theme="dark"] body.page-about .cb-philosophy-item h3 {
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about .cb-philosophy p,
html[data-theme="dark"] body.page-about .cb-philosophy-item p {
    color: #d9cacc !important;
}

html[data-theme="dark"] body.page-about .cb-philosophy-label,
html[data-theme="dark"] body.page-about .cb-philosophy-number,
html[data-theme="dark"] body.page-about .cb-philosophy-symbol,
html[data-theme="dark"] body.page-about .cb-philosophy-link,
html[data-theme="dark"] body.page-about .cb-philosophy h2 em {
    color: #d9a5a8 !important;
}

html[data-theme="dark"] body.page-about .cb-philosophy-item {
    border-color: rgba(217, 165, 168, 0.28) !important;
}

html[data-theme="dark"] body.page-about .cb-philosophy-footer {
    color: #d9cacc !important;
    border-color: rgba(217, 165, 168, 0.25) !important;
}

/* 2. THREE PLACES WE BORROW FROM */
html[data-theme="dark"] body.page-about #inspiration {
    background: #171214 !important;
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about #inspiration h2,
html[data-theme="dark"] body.page-about #inspiration h3 {
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about #inspiration p {
    color: #d9cacc !important;
}

html[data-theme="dark"] body.page-about #inspiration .eyebrow {
    color: #d9a5a8 !important;
}

html[data-theme="dark"] body.page-about #inspiration .fan-card {
    background: #211719 !important;
    color: #efe4e5 !important;
    border-color: rgba(217, 165, 168, 0.25) !important;
}

html[data-theme="dark"] body.page-about #inspiration .fan-card h3 {
    color: #d9a5a8 !important;
}

html[data-theme="dark"] body.page-about #inspiration .fan-card p {
    color: #d9cacc !important;
}

/* 3. WHAT TO EAT WITH IT */
html[data-theme="dark"] body.page-about .pd-section {
    background: #111111 !important;
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about .pd-section h2,
html[data-theme="dark"] body.page-about .pd-section h3 {
    color: #efe4e5 !important;
}

html[data-theme="dark"] body.page-about .pd-section p {
    color: #d9cacc !important;
}

html[data-theme="dark"] body.page-about .pd-section .pd-card {
    background: #1c1517 !important;
    color: #efe4e5 !important;
    border-color: rgba(217, 165, 168, 0.25) !important;
}

html[data-theme="dark"] body.page-about .pd-section .pd-card h3 {
    color: #d9a5a8 !important;
}

/* CULTURE BREW — FORCE 3 IMAGES PER ROW */
.page-about .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 200px !important;
    gap: 14px !important;
}

/* Override old g1, g2, g3... positioning */
.page-about .gallery > .g-item {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
}

/* All images fill their boxes */
.page-about .gallery > .g-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablet and mobile */
@media (max-width: 768px) {
    .page-about .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 170px !important;
    }
}

@media (max-width: 480px) {
    .page-about .gallery {
        grid-auto-rows: 140px !important;
        gap: 10px !important;
    }
}

/* CULTURE BREW — EVEN 3 × 2 GALLERY */
.page-about .gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 200px);
    gap: 14px;
    align-items: stretch;
}

/* All six images: equal size */
.page-about .gallery .g-item {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.page-about .gallery .g-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Tablet */
@media (max-width: 768px) {
    .page-about .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 180px);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .page-about .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 140px);
        gap: 10px;
    }
}

/* =========================================
   CULTURE BREW LOGIN — DARK MODE FIX
   ========================================= */

html[data-theme="dark"] body.cb-login-page {
    background: #111111;
    color: #efe4e5;
}

html[data-theme="dark"] .cb-login-page .cb-login-panel {
    background: #111111;
    color: #efe4e5;
}

html[data-theme="dark"] .cb-login-page .cb-login-heading h2,
html[data-theme="dark"] .cb-login-page .cb-login-heading h2 em {
    color: #efe4e5;
}

html[data-theme="dark"] .cb-login-page .cb-login-panel p,
html[data-theme="dark"] .cb-login-page .cb-login-label-row,
html[data-theme="dark"] .cb-login-page .cb-login-field label,
html[data-theme="dark"] .cb-login-page .cb-login-bottom {
    color: #c2afb3;
}

html[data-theme="dark"] .cb-login-page .cb-login-field input {
    background: #1c1517;
    color: #efe4e5;
    border-color: #514047;
}

html[data-theme="dark"] .cb-login-page .cb-login-field input::placeholder {
    color: #b5a3a8;
    opacity: 1;
}

html[data-theme="dark"] .cb-login-page .cb-login-field input:focus {
    border-color: #d9a5a8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 165, 168, 0.15);
}

html[data-theme="dark"] .cb-login-page .cb-login-text-link,
html[data-theme="dark"] .cb-login-page .cb-login-show-password {
    color: #d9a5a8;
}

html[data-theme="dark"] .cb-login-page .cb-social-divider span {
    background: #514047;
}

html[data-theme="dark"] .cb-login-page .cb-social-divider p {
    color: #c2afb3;
}

html[data-theme="dark"] .cb-login-page .cb-social-btn {
    background: #21191c;
    color: #ffffff;
    border-color: #514047;
}

html[data-theme="dark"] .cb-login-page .cb-social-btn i {
    color: #ffffff;
}

html[data-theme="dark"] .cb-login-page .cb-login-tool,
html[data-theme="dark"] .cb-login-page .tool-btn {
    color: #efe4e5;
    background: #21191c;
    border-color: #514047;
}

html[data-theme="dark"] .cb-login-page .cb-login-tool:hover,
html[data-theme="dark"] .cb-login-page .cb-login-tool[aria-pressed="true"],
html[data-theme="dark"] .cb-login-page .tool-btn:hover,
html[data-theme="dark"] .cb-login-page .tool-btn[aria-pressed="true"] {
    color: #111111;
    background: #d9a5a8;
    border-color: #d9a5a8;
}

html[data-theme="dark"] .cb-login-page .cb-login-message {
    color: #d9a5a8;
}

/* =========================================
   LOGIN — RTL FIX
   ========================================= */

html[dir="rtl"] .cb-login-page .cb-login-panel {
    direction: rtl;
}

html[dir="rtl"] .cb-login-page .cb-login-heading,
html[dir="rtl"] .cb-login-page .cb-login-form {
    text-align: right;
}

html[dir="rtl"] .cb-login-page .cb-login-label-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cb-login-page .cb-login-visual-content,
html[dir="rtl"] .cb-login-page .cb-login-visual-footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .cb-login-page .cb-login-visual-note {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cb-login-page .cb-login-back span {
    transform: rotate(180deg);
}

html[dir="rtl"] .cb-login-page .cb-login-submit span {
    transform: rotate(180deg);
}

html[dir="rtl"] .cb-login-page .cb-login-submit:hover span {
    transform: rotate(180deg) translateX(4px);
}
/* CULTURE BREW REGISTER — DARK MODE */

html[data-theme="dark"] body.cb-register-page {
    background: #111111;
    color: #efe4e5;
}

html[data-theme="dark"] .cb-register-page .cb-login-panel {
    background: #111111;
    color: #efe4e5;
}

html[data-theme="dark"] .cb-register-page .cb-login-welcome h2,
html[data-theme="dark"] .cb-register-page .cb-login-welcome p,
html[data-theme="dark"] .cb-register-page .cb-login-signup,
html[data-theme="dark"] .cb-register-page .cb-login-bottom-note,
html[data-theme="dark"] .cb-register-page .cb-login-field label,
html[data-theme="dark"] .cb-register-page .cb-login-remember {
    color: #efe4e5;
}

html[data-theme="dark"] .cb-register-page .cb-login-field input:not([type="checkbox"]) {
    background: #1c1517;
    color: #efe4e5;
    border-color: #514047;
}

html[data-theme="dark"] .cb-register-page .cb-login-field input::placeholder {
    color: #b5a3a8;
    opacity: 1;
}

html[data-theme="dark"] .cb-register-page .cb-reg-hint {
    color: #c2afb3;
}

html[data-theme="dark"] .cb-register-page .cb-reg-toggle {
    color: #d9a5a8;
    background: #21191c;
    border-color: #514047;
}

html[data-theme="dark"] .cb-register-page .cb-reg-error {
    color: #ff9da8;
}

html[data-theme="dark"] .cb-register-page .cb-social-divider p {
    color: #c2afb3;
}

html[data-theme="dark"] .cb-register-page .cb-social-divider span {
    background: #514047;
}

html[data-theme="dark"] .cb-register-page .cb-social-btn {
    background: #21191c;
    color: #ffffff;
    border-color: #514047;
}

html[data-theme="dark"] .cb-register-page .cb-social-btn i {
    color: #ffffff;
}

html[data-theme="dark"] .cb-register-page .tool-btn {
    background: #21191c;
    color: #efe4e5;
    border-color: #514047;
}

html[data-theme="dark"] .cb-register-page .tool-btn[aria-pressed="true"] {
    background: #d9a5a8;
    color: #111111;
    border-color: #d9a5a8;
}

/* REGISTER — RTL */

html[dir="rtl"] .cb-register-page .cb-login-panel {
    direction: rtl;
}

html[dir="rtl"] .cb-register-page .cb-login-welcome,
html[dir="rtl"] .cb-register-page .cb-login-form {
    text-align: right;
}

html[dir="rtl"] .cb-register-page .cb-reg-row {
    direction: rtl;
}

html[dir="rtl"] .cb-register-page .cb-login-remember {
    direction: rtl;
}

html[dir="rtl"] .cb-register-page .cb-login-visual-content,
html[dir="rtl"] .cb-register-page .cb-login-visual-footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .cb-register-page .cb-login-visual-note {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cb-register-page .cb-login-back span {
    transform: rotate(180deg);
}

html[dir="rtl"] .cb-register-page .cb-login-submit span {
    transform: rotate(180deg);
}
/* CULTURE BREW PRODUCT DETAILS — DARK MODE TEST */

html[data-theme="dark"] .cb-product-page .cb-product-detail,
html[data-theme="dark"] .cb-product-page .cb-quality-section,
html[data-theme="dark"] .cb-product-page .cb-size-section,
body.dark-mode .cb-product-page .cb-product-detail,
body.dark-mode .cb-product-page .cb-quality-section,
body.dark-mode .cb-product-page .cb-size-section,
body[data-theme="dark"] .cb-product-page .cb-product-detail,
body[data-theme="dark"] .cb-product-page .cb-quality-section,
body[data-theme="dark"] .cb-product-page .cb-size-section {
    background-color: #111111 !important;
    color: #f5eeee !important;
}

html[data-theme="dark"] .cb-product-page .cb-product-detail *,
html[data-theme="dark"] .cb-product-page .cb-quality-section *,
html[data-theme="dark"] .cb-product-page .cb-size-section *,
body.dark-mode .cb-product-page .cb-product-detail *,
body.dark-mode .cb-product-page .cb-quality-section *,
body.dark-mode .cb-product-page .cb-size-section *,
body[data-theme="dark"] .cb-product-page .cb-product-detail *,
body[data-theme="dark"] .cb-product-page .cb-quality-section *,
body[data-theme="dark"] .cb-product-page .cb-size-section * {
    color: #f5eeee !important;
}
/* CULTURE BREW — PRODUCT DETAILS OUTER SECTION DARK MODE */

html[data-theme="dark"] .cb-product-page,
html[data-theme="dark"] .cb-product-page > section,
body.dark-mode .cb-product-page,
body.dark-mode .cb-product-page > section,
body[data-theme="dark"] .cb-product-page,
body[data-theme="dark"] .cb-product-page > section {
    background-color: #111111 !important;
    color: #f5eeee !important;
}

/* Outer section headings and paragraphs */
html[data-theme="dark"] .cb-product-page > section h1,
html[data-theme="dark"] .cb-product-page > section h2,
html[data-theme="dark"] .cb-product-page > section h3,
html[data-theme="dark"] .cb-product-page > section h4,
html[data-theme="dark"] .cb-product-page > section p,
body.dark-mode .cb-product-page > section h1,
body.dark-mode .cb-product-page > section h2,
body.dark-mode .cb-product-page > section h3,
body.dark-mode .cb-product-page > section h4,
body.dark-mode .cb-product-page > section p,
body[data-theme="dark"] .cb-product-page > section h1,
body[data-theme="dark"] .cb-product-page > section h2,
body[data-theme="dark"] .cb-product-page > section h3,
body[data-theme="dark"] .cb-product-page > section h4,
body[data-theme="dark"] .cb-product-page > section p {
    color: #f5eeee !important;
}
/* CULTURE BREW — KNOW YOUR BREW DARK MODE TEXT FIX */

html[data-theme="dark"] #quality,
html[data-theme="dark"] #quality *,
body.dark-mode #quality,
body.dark-mode #quality *,
body[data-theme="dark"] #quality,
body[data-theme="dark"] #quality * {
    color: #f5eeee !important;
}

/* Section background */
html[data-theme="dark"] #quality,
body.dark-mode #quality,
body[data-theme="dark"] #quality {
    background-color: #111111 !important;
}

/* Inner information cards */
html[data-theme="dark"] #quality .cb-quality-grid article,
body.dark-mode #quality .cb-quality-grid article,
body[data-theme="dark"] #quality .cb-quality-grid article {
    background-color: #211b1d !important;
    border-color: #493a3e !important;
}

/* Card paragraph readability */
html[data-theme="dark"] #quality .cb-quality-grid article p,
body.dark-mode #quality .cb-quality-grid article p,
body[data-theme="dark"] #quality .cb-quality-grid article p {
    color: #d8cdd0 !important;
}

/* Emphasized heading */
html[data-theme="dark"] #quality h2 em,
body.dark-mode #quality h2 em,
body[data-theme="dark"] #quality h2 em {
    color: #e7b9c5 !important;
}
/* ==========================================
   PRODUCT DETAILS — DARK MODE CONTRAST FIX
   ========================================== */

/* 1. Signature Collection Badge / Availability Badge Fix */
html[data-theme="dark"] .cb-availability,
body.dark-mode .cb-availability {
  background-color: #302126 !important;
  color: #D9A5A8 !important;
  border: 1px solid rgba(217, 165, 168, 0.3);
}

/* 2. Quantity Select Dropdown Fix */
html[data-theme="dark"] .cb-quantity,
body.dark-mode .cb-quantity {
  background-color: #1c1517 !important;
  color: #efe4e5 !important;
  border: 1px solid rgba(217, 165, 168, 0.4) !important;
}

html[data-theme="dark"] .cb-quantity option,
body.dark-mode .cb-quantity option {
  background-color: #1c1517 !important;
  color: #efe4e5 !important;
}