/* Experiential beverage pages. Scoped to preserve the shared site design. */
.production-page {
  --px-display: clamp(2.125rem, 1.25rem + 2.7vw, 3.5rem);
  --px-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --px-small: clamp(.8125rem, .78rem + .2vw, .9375rem);
  --px-label: .75rem;
}

.production-page .shell { background: var(--color-bg); }
.production-page .header__inner { gap: var(--space-4); }
.production-page .brand__wordmark .l2,
.production-page .footer h4 { font-size: var(--px-label); }
.production-page .nav a[aria-current="true"] {
  color: var(--color-text-strong);
  background: var(--color-surface-2);
}
.production-page .header__actions { justify-self: end; }
.production-page .client-login,
.production-page .px-header-call { min-height: 44px; }
.production-page .px-header-call {
  color: var(--jl-navy);
  background: var(--jl-cream);
  border-color: var(--jl-cream);
  white-space: nowrap;
}
.production-page .px-header-call:hover { background: #fff; border-color: #fff; }

.px-main {
  width: min(100%, var(--content-default));
  margin-inline: auto;
  padding: var(--space-6) var(--space-6) 0;
}
.px-main:focus { outline: none; }
.px-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: var(--px-small);
  color: var(--color-text-muted);
}
.px-breadcrumb li + li::before {
  content: "/";
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}
.px-breadcrumb a,
.px-contact-note a,
.px-prose a,
.px-related a {
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: .22em;
}
.px-breadcrumb a:hover,
.px-contact-note a:hover,
.px-prose a:hover,
.px-related a:hover {
  color: var(--color-text-strong);
  text-decoration-color: currentColor;
}
.px-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-10) 0 var(--space-12);
}
.px-eyebrow {
  color: var(--color-text-muted);
  font: 600 var(--px-label)/1.5 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.px-hero h1 {
  font-size: var(--px-display);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.035em;
  max-width: 20ch;
}
.px-hero h1 em {
  display: block;
  margin-top: var(--space-2);
  font-weight: 380;
  color: var(--color-text);
}
.px-intro {
  margin-top: var(--space-5);
  color: var(--color-text);
  max-width: 58ch;
  line-height: 1.65;
}
.px-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.px-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  min-height: 48px;
  font: 600 var(--px-small)/1.3 var(--font-body);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.px-button--primary {
  color: var(--jl-navy);
  background: var(--jl-cream);
  border-color: var(--jl-cream);
}
.px-button--primary:hover { color: var(--jl-navy); background: #fff; border-color: #fff; }
.px-button--text:hover { color: var(--color-text-strong); background: var(--color-surface-2); }
.px-contact-note {
  margin-top: var(--space-3);
  font-size: var(--px-small);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.px-contact-note span { margin-inline: var(--space-1); }
.px-brief {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--color-border-strong);
  padding-left: var(--space-8);
}
.px-brief-title {
  color: var(--color-text-strong);
  font: 450 var(--px-title)/1.15 var(--font-display);
  margin-bottom: var(--space-5);
}
.px-brief dl > div { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.px-brief dt { font-size: var(--px-label); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.px-brief dd { font-size: var(--px-small); font-weight: 500; color: var(--color-text); }
.px-brief-note { color: var(--color-text-muted); font-size: var(--px-small); margin-top: var(--space-4); }

.px-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
  gap: var(--space-12);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.px-section h2,
.px-closing h2 {
  font-size: var(--px-title);
  font-weight: 420;
  line-height: 1.15;
}
.px-prose { min-width: 0; line-height: 1.7; }
.px-prose p + p,
.px-prose ul + p,
.px-prose div + p { margin-top: var(--space-5); }
.px-prose p { max-width: 65ch; }
.px-scope-list { display: grid; gap: var(--space-4); margin-block: var(--space-5); }
.px-scope-list:first-child { margin-top: 0; }
.px-scope-list strong { color: var(--color-text-strong); font-weight: 600; }
.px-proof {
  border-top: 1px solid var(--color-border);
  padding: var(--space-8);
  background: var(--color-surface);
}
.px-proof-statement {
  max-width: 40ch;
  font: 400 var(--px-title)/1.35 var(--font-display);
  color: var(--color-text);
}
.px-routes { display: grid; }
.px-routes > a {
  display: block;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.px-routes > a:first-child { padding-top: 0; }
.px-routes > a > span:last-child { color: var(--color-text-muted); font-size: var(--px-small); }
.px-route-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  color: var(--color-text-strong);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.px-routes > a:hover .px-route-title { text-decoration: underline; text-underline-offset: .22em; }
.px-routes > a:hover { border-color: var(--color-border-strong); }
.px-faq details { border-bottom: 1px solid var(--color-border); }
.px-faq details:first-child { border-top: 1px solid var(--color-border); }
.px-faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-strong);
}
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after { content: "+"; position: absolute; right: var(--space-2); top: var(--space-5); }
.px-faq details[open] summary::after { content: "−"; }
.px-faq summary:hover { text-decoration: underline; text-underline-offset: .22em; }
.px-faq details p { padding: 0 var(--space-6) var(--space-5) 0; color: var(--color-text); }
.px-local { padding-block: var(--space-8); }
.px-local .px-prose,
.px-local-links { font-size: var(--px-small); }
.px-local-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-block: var(--space-5);
}
.px-related { border-top: 1px solid var(--color-border); padding-block: var(--space-8); }
.px-related ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--px-small); }
.px-closing {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border-strong);
}
.px-closing > div > p:not(.px-eyebrow, .px-contact-note) { margin-top: var(--space-4); }
.px-closing .px-contact { margin-top: 0; }
.production-page .footer { margin-top: var(--space-16); }
.production-page .footer__inner { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
.production-page .footer__legal { color: var(--color-text-muted); }
.px-footer-note { color: var(--color-text-muted); font-size: var(--px-small); margin-bottom: var(--space-2); }
.px-source-link { display: inline-block; font-size: var(--px-small); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.px-skip {
  position: fixed;
  z-index: 100;
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--jl-cream);
  color: var(--jl-navy);
  transform: translateY(-200%);
}
.px-skip:focus { transform: translateY(0); color: var(--jl-navy); }
.px-mobile-contact { display: none; }

@media (max-width: 1120px) {
  .production-page .header .nav { display: none; }
  .production-page .header__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 860px) {
  .px-hero { gap: var(--space-8); }
  .px-section { gap: var(--space-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .px-brief { padding-left: var(--space-5); }
  .production-page .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .production-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .production-page .client-login { display: none; }
  .px-main { padding: var(--space-4) var(--space-4) 0; }
  .px-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0 var(--space-8); }
  .px-hero h1 { max-width: 22ch; }
  .px-hero .px-eyebrow { margin-bottom: var(--space-3); }
  .px-intro { margin-top: var(--space-4); }
  .px-brief { border-left: 0; border-top: 1px solid var(--color-border); padding: var(--space-5) 0 0; }
  .px-brief-title { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; }
  .px-brief dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .px-brief dl > div { border-top: 0; padding: 0; }
  .px-brief-note { margin-top: var(--space-4); }
  .px-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-8); }
  .px-section .px-eyebrow { margin-bottom: var(--space-3); }
  .px-section h2 br { display: none; }
  .px-proof { padding: var(--space-6); }
  .px-closing { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  .px-local-links { gap: var(--space-3); }
  .px-mobile-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    position: fixed;
    z-index: 60;
    inset: auto 0 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-strong);
  }
  .px-mobile-contact a {
    text-align: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--px-small);
    min-height: 44px;
  }
  .px-mobile-contact a:first-child { background: var(--jl-cream); color: var(--jl-navy); border-color: var(--jl-cream); }
  .px-mobile-contact a:first-child:hover { background: #fff; }
  .px-mobile-contact a:last-child:hover { color: var(--color-text-strong); background: var(--color-surface-2); }
}
@media (max-width: 540px) {
  .production-page .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .production-page .footer__brand .brand__wordmark .l2 { display: block; letter-spacing: .05em; }
}
@media (max-width: 360px) {
  .px-brief dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .px-brief dl > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-2); }
  .px-local-links { grid-template-columns: minmax(0, 1fr); }
  .px-contact { gap: var(--space-2); }
  .px-button { padding-inline: var(--space-4); gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .production-page *, .production-page *::before, .production-page *::after { scroll-behavior: auto; transition: none; }
}