/* Concept 07: audience illustrations and bottle benefit callouts. */
.bar-photo-hero{position:relative;isolation:isolate;background:#e8edf1}
.bar-photo-hero .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bar-photo-hero .hero-photo{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.bar-photo-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(245,247,248,.35),rgba(245,247,248,.24) 29%,transparent 52%)}
.bar-photo-hero .hero-grid{display:flex;align-items:center;min-height:clamp(680px,50vw,820px)}
.bar-photo-hero .hero-copy{width:43%;max-width:520px;padding:38px 0 30px}
.bar-photo-hero h1{font-size:clamp(44px,4.15vw,62px);max-width:100%;margin:20px 0 22px;line-height:1.01;letter-spacing:-.025em}
.bar-photo-hero .hero-copy>p{font-size:17px;line-height:1.55;max-width:450px;color:#12171c}
.hero-audiences{display:flex;gap:22px;align-items:stretch;margin-top:28px}
.hero-audiences a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;max-width:238px;border-bottom:1px solid rgba(17,23,28,.4);padding:0 0 10px;transition:border-color .2s}
.hero-audiences a:hover{border-color:#000}
.hero-audiences .audience-label{font-size:clamp(16px,1.4vw,20px);font-weight:850;line-height:1.12;letter-spacing:-.025em}
.audience-crop{display:block;flex:none;width:98px;height:98px;overflow:hidden;position:relative}
.audience-crop img{position:absolute;top:0;left:0;width:98px;height:auto;max-width:none;transition:transform .25s}
.hero-audiences a:hover img{transform:translateY(-3px)}
.bartender-crop img{width:98px;left:0}
.chef-crop img{width:98px;left:0}
.bottle-callouts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;filter:drop-shadow(0 1px 3px rgba(0,0,0,.65))}
.callout-lines{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.callout-lines circle{fill:white;stroke:none}
.callout-labels{fill:#fff;font-family:'Urbanist',sans-serif;font-size:21px;font-weight:650;letter-spacing:.15px}
.mobile-callouts{display:none}
html[data-motion="on"] .bar-photo-hero .hero-media{animation:bar-photo-in .8s ease both}
@keyframes bar-photo-in{from{opacity:0}to{opacity:1}}
@media(min-width:1700px){.bar-photo-hero .hero-grid{min-height:clamp(800px,45vw,970px)}.bar-photo-hero .hero-copy{width:40%;max-width:510px}}
@media(min-width:1101px) and (max-width:1150px){.bar-photo-hero .hero-grid{min-height:680px}.bar-photo-hero .hero-copy{width:43%;padding:34px 0}.bar-photo-hero h1{font-size:clamp(32px,4.15vw,47px)}.bar-photo-hero .hero-copy>p{font-size:15px;line-height:1.5}.hero-audiences{gap:12px;margin-top:23px}.hero-audiences a{gap:6px;flex-direction:column;align-items:flex-start}.hero-audiences .audience-label{font-size:17px}.audience-crop{height:108px}.callout-labels{font-size:22px}}
@media(max-width:1100px){
 .bar-photo-hero{display:flex;flex-direction:column;background:#f5f7f8}
 .bar-photo-hero::before{display:none}
 .bar-photo-hero .hero-grid{display:block;order:2;min-height:0;width:100%;padding-top:0;padding-bottom:0}
 .bar-photo-hero .hero-copy{width:100%;max-width:560px;padding:32px 0 28px;margin:0 auto}
 .bar-photo-hero h1{font-size:clamp(36px,7vw,51px);line-height:1.02;margin:18px 0 21px}
 .bar-photo-hero .hero-copy>p{font-size:16px;line-height:1.55;max-width:510px}
 .hero-audiences{margin-top:25px;gap:20px}
 .hero-audiences a{gap:10px;padding-bottom:10px;flex-direction:column;align-items:flex-start}
 .hero-audiences .audience-label{font-size:18px}
 .audience-crop{width:110px;height:103px}
 .bartender-crop img{width:110px;left:0}
 .chef-crop img{width:110px;left:0}
 .bar-photo-hero .hero-media{position:relative;inset:auto;order:1;z-index:auto;width:100%;aspect-ratio:1100/887}
 .bar-photo-hero .hero-photo{position:absolute;inset:0;object-position:100% 50%}
 .bar-photo-hero .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 55%,rgba(0,0,0,.2))}
 .desktop-callouts{display:none}.mobile-callouts{display:block;z-index:1}
 .callout-labels{font-size:34px;font-weight:700}.callout-lines{stroke-width:2.3}
}
@media(max-width:370px){.hero-audiences{gap:14px}.hero-audiences a{gap:6px}.hero-audiences .audience-label{font-size:16px}.audience-crop{width:110px}}
@media(prefers-reduced-motion:reduce){html[data-motion="on"] .bar-photo-hero .hero-media{animation:none}.audience-crop img{transition:none}}
@media print{.bar-photo-hero .hero-media{display:none}.bar-photo-hero .hero-copy{width:100%;max-width:none}.bar-photo-hero .hero-grid{min-height:0}}

/* Let the photograph show through: soften only the area behind the copy. */
@media(min-width:1101px){
 .bar-photo-hero::before{background:linear-gradient(90deg,rgba(245,247,248,.3),rgba(245,247,248,.22) 34%,rgba(245,247,248,.06) 50%,transparent 58%);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 57%);mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 57%)}
 .bar-photo-hero .hero-copy{position:relative;isolation:isolate}
 .bar-photo-hero .hero-copy::before{content:"";position:absolute;inset:-25px -45px -20px -55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 48%,rgba(255,255,255,.34),rgba(255,255,255,.18) 48%,transparent 74%);filter:blur(24px)}
 .bar-photo-hero .hero-copy>p{color:#111;line-height:1.6}
}

/* Match the cover photo crop so the full packshot stays aligned with the bar scene. */
.bar-photo-hero .hero-packshot-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bar-photo-hero .hero-packshot-mobile { display: none; }
@media (max-width: 1100px) {
  .bar-photo-hero .hero-packshot-desktop { display: none; }
  .bar-photo-hero .hero-packshot-mobile { display: block; }
}