/* ==========================================================================
   Caribbean Bottling Company (Bahamas) Ltd.
   Homepage draft stylesheet
   Palette drawn from the original logo: red, blue, orange, white
   ========================================================================== */

:root {
  --red: #E4002B;
  --red-dark: #B80022;
  --blue: #0072BC;
  --blue-deep: #0B3A5D;
  --orange: #F5821F;

  --ink: #14181C;
  --ink-2: #3C464F;
  --ink-3: #6A757E;
  --line: #DFE4E9;
  --tint: #F5F7F9;
  --white: #FFFFFF;

  --shell: 1320px;
  --header-h: 100px;
  --logo-w: 460px;

  --r: 4px;
  --sp: 8px;

  --f-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --shadow: 0 1px 2px rgba(20, 24, 28, .06), 0 8px 24px rgba(20, 24, 28, .06);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--sp) * 2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 calc(var(--sp) * 2); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 calc(var(--sp) * 1.5);
}
.eyebrow--light { color: #FFB3C1; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  line-height: 0;
  text-decoration: none;
}

.brand__logo {
  width: var(--logo-w);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.nav { flex: 0 1 auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--f-display);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.nav__link:hover { color: var(--red); }
.nav__link:active { color: var(--red-dark); }

.nav__link.is-active {
  color: var(--red);
  font-weight: 600;
  border-bottom-color: var(--red);
}

/* Future pages: visibly present, deliberately not yet functional */
.nav__link--coming-soon { cursor: default; }
.nav__link--coming-soon:hover { color: var(--ink-3); }

.nav__search-item { display: flex; align-items: center; }

.search-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.search-btn:hover { border-color: var(--red); color: var(--red); }
.search-btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}

.header-note {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 24px 12px;
  font-size: .88rem;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(11, 58, 93, .42);
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: var(--r);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); }
.btn--primary:active { background: #98001C; }

.btn--outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn--outline:hover { background: var(--red); color: var(--white); }
.btn--outline:active { background: var(--red-dark); border-color: var(--red-dark); }

.btn--ghost { background: rgba(255, 255, 255, .1); color: var(--white); border-color: rgba(255, 255, 255, .7); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

a.btn.nav__link--coming-soon { cursor: default; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: calc(var(--sp) * 4); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.link-arrow.nav__link--coming-soon { cursor: default; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--blue-deep); color: #D5E2EC; }
.section--dark h2 { color: var(--white); }

.section-head { max-width: 680px; margin-bottom: calc(var(--sp) * 5); }
.section-head__lede { color: var(--ink-3); margin: 0; }

.section-cta { margin-top: calc(var(--sp) * 5); }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 58vh, 620px);
  display: flex;
  align-items: center;
  padding: 72px 0;
  background: var(--blue-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 58, 93, .92) 0%, rgba(11, 58, 93, .72) 48%, rgba(11, 58, 93, .35) 100%);
}
.hero__inner > * { max-width: 700px; }
.hero__title { color: var(--white); margin-bottom: calc(var(--sp) * 2.5); }
.hero__lede { color: #DCE8F1; font-size: 1.1rem; margin: 0; }

/* Split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split__text .btn { margin-top: calc(var(--sp) * 3); }
.split__figure { margin: 0; }
.split__figure img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.split--reverse .split__text { order: 2; }
.split--reverse .split__figure { order: 1; }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: calc(var(--sp) * 2) 0 0;
}
.pill-list li {
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--white);
}

/* Cards */
.cards { display: grid; gap: 24px; }
.cards--products { grid-template-columns: repeat(3, 1fr); }
.cards--three { grid-template-columns: repeat(3, 1fr); }

.pcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pcard:hover { border-color: #C9D2DA; box-shadow: var(--shadow); }
.pcard__media { margin-bottom: 16px; }
.pcard__media img { width: 100%; border-radius: var(--r); }
.pcard__name { margin: 0 0 4px; }
.pcard__cat { font-size: .87rem; color: var(--ink-3); margin: 0 0 4px; }

.scard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
}
.scard__mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: var(--r);
  background: #FDECEF;
  color: var(--red);
}
.scard__mark svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.scard p { font-size: .95rem; color: var(--ink-3); margin: 0; }

.ncard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ncard__media img { width: 100%; aspect-ratio: 40 / 26; object-fit: cover; }
.ncard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ncard__date {
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 10px;
}
.ncard__title { margin: 0 0 10px; font-size: 1.05rem; }
.ncard__sum { font-size: .93rem; color: var(--ink-3); margin: 0 0 8px; }
.ncard .link-arrow { margin-top: auto; }

/* Promotion */
.promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.promo__figure { margin: 0; }
.promo__figure img { width: 100%; border-radius: var(--r); }
.promo__text .btn { margin-top: calc(var(--sp) * 3); }
.promo__terms {
  margin: calc(var(--sp) * 2) 0 0;
  font-size: .8rem;
  color: #8FA6B8;
}

/* Careers callout */
.callout { background: var(--white); }
.callout__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(32px, 4vw, 48px);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--r);
  background: var(--tint);
}
.callout__inner h2 { margin-bottom: 8px; }
.callout__inner p { margin: 0; color: var(--ink-3); }

/* Contact */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.contact__text .btn { margin-top: calc(var(--sp) * 2); }
.contact__list { margin: 0; }
.contact__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.contact__row:last-child { border-bottom: 1px solid var(--line); }
.contact__row dt {
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact__row dd { margin: 0; color: var(--ink-2); }
.contact__row dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.contact__row dd a:hover { text-decoration: underline; }
[data-placeholder] { color: var(--ink-3); font-style: italic; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--tint);
  border-top: 1px solid var(--line);
  padding-top: clamp(44px, 5vw, 64px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer__logo { width: 100%; max-width: 380px; height: auto; object-fit: contain; }

.footer__heading {
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .94rem;
  color: var(--ink-2);
  text-decoration: none;
}
.footer__link:hover { color: var(--red); }
.footer__link.nav__link--coming-soon { cursor: default; }
.footer__link.nav__link--coming-soon:hover { color: var(--ink-3); }

.footer__static { font-size: .94rem; color: var(--ink-3); padding: 10px 0; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-3);
}
.footer__base p { margin: 0; }
.footer__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}
.footer__base a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  :root { --logo-w: 380px; }
  .nav__list { gap: 15px; }
  .nav__link { font-size: .88rem; }
}

@media (max-width: 1199px) {
  :root { --header-h: 84px; --logo-w: 320px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    width: min(86vw, 360px);
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-left: 1px solid var(--line);
    padding: 84px 24px 40px;
    transform: translateX(101%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }

  .nav__link {
    min-height: 56px;
    width: 100%;
    font-size: 1.02rem;
    border-bottom: none;
  }
  .nav__link.is-active {
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--red);
    padding-left: 12px;
  }

  .nav__search-item { border-bottom: none; padding-top: 18px; }
  .search-btn { width: 100%; height: 48px; }
}

@media (max-width: 900px) {
  .cards--products { grid-template-columns: repeat(2, 1fr); }
  .cards--three { grid-template-columns: 1fr; }
  .split, .promo, .contact { grid-template-columns: 1fr; }
  .split--reverse .split__text { order: 1; }
  .split--reverse .split__figure { order: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --header-h: 72px; --logo-w: min(66vw, 260px); }

  body { font-size: 16px; }
  .shell { padding-inline: 18px; }

  .hero { min-height: auto; padding: 56px 0; }
  .hero__veil { background: linear-gradient(180deg, rgba(11, 58, 93, .78) 0%, rgba(11, 58, 93, .92) 100%); }
  .hero__lede { font-size: 1rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; padding-inline: 20px; }

  .cards--products { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; gap: 4px; }
  .callout__inner { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__logo { max-width: min(72vw, 300px); }
  .footer__base { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   BATCH 1 ADDITIONS
   Appended for the multi page build. Nothing above this block was changed
   except the .footer__grid column count, which went from four columns to
   five so the footer can carry all twelve destinations.

   Contents
     1. Dropdown navigation
     2. Interior page header band
     3. Prose measure
     4. Bulleted lists
     5. Spec list, with timeline, split and dark variants
     6. Filter bar
     7. Numbered steps
     8. Small extensions: h4, .scard__tel, footer breakpoint
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dropdown navigation
   Opens on hover and on :focus-within, so keyboard users get it with no
   JavaScript. main.js only adds a tap fallback for touch devices that sit
   above the drawer breakpoint, for example a tablet in landscape.
   -------------------------------------------------------------------------- */

.nav__item--has-menu { position: relative; }

.nav__caret {
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s var(--ease);
}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret {
  transform: translateY(1px) rotate(225deg);
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 214px;
  padding: 6px 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}

.nav__item--has-menu:hover > .nav__menu,
.nav__item--has-menu:focus-within > .nav__menu,
.nav__item--has-menu.is-menu-open > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The rightmost dropdown opens leftward. Left aligned it was measured
   spilling past the viewport between 1200px and 1320px. */
.nav__menu--right { left: auto; right: 0; }

.nav__sub {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--f-body);
  font-size: .92rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__sub:hover { color: var(--red); background: var(--tint); }
.nav__sub.is-active { color: var(--red); font-weight: 600; box-shadow: inset 3px 0 0 var(--red); }
.nav__sub.nav__link--coming-soon { cursor: default; color: var(--ink-3); }
.nav__sub.nav__link--coming-soon:hover { color: var(--ink-3); background: transparent; }

/* --------------------------------------------------------------------------
   2. Interior page header band
   Deliberately image free. Thirteen interior pages would otherwise need
   thirteen more photographs from the client before the site could launch.
   -------------------------------------------------------------------------- */

.pagehead {
  background: var(--blue-deep);
  padding: clamp(40px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 60px);
  border-bottom: 4px solid var(--red);
}
.pagehead__inner > * { max-width: 780px; }
.pagehead h1 { color: var(--white); margin-bottom: calc(var(--sp) * 2); }
.pagehead__lede { color: #DCE8F1; font-size: 1.06rem; margin: 0; }

/* --------------------------------------------------------------------------
   3. Prose measure
   Body copy inside a full width .shell would otherwise run to 1272px, which
   is unreadable. The homepage never needed this because all of its copy sits
   inside a half width .split__text.
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose > h3 { margin-top: calc(var(--sp) * 4); }
.prose > h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   4. Bulleted lists
   The global reset sets list-style: none on every ul, so there was no way to
   render an ordinary prose bullet anywhere on the site.
   -------------------------------------------------------------------------- */

.bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 calc(var(--sp) * 2);
}
.bullets li { margin-bottom: 8px; }
.bullets li:last-child { margin-bottom: 0; }
.bullets li::marker { color: var(--red); }
.section--dark .bullets li::marker { color: var(--orange); }

/* --------------------------------------------------------------------------
   5. Spec list
   Two column data rows. Carries product pack sizes, wine and spirit
   catalogues, job listings, management names, opening hours and department
   directories. A .pcard grid cannot hold a hundred plus rows and
   .contact__row is a four row layout with a fixed 150px label column.
   -------------------------------------------------------------------------- */

.speclist { margin: 0; padding: 0; list-style: none; }

.speclist__head {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
}

.speclist__row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 1.5fr;
  gap: 6px 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.speclist__name {
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
}

.speclist__meta { font-size: .93rem; color: var(--ink-3); }

.speclist__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.speclist__meta a:hover { text-decoration: underline; }

/* Timeline variant: a year or era in place of a name */
.speclist--timeline .speclist__row { grid-template-columns: 190px 1fr; }
.speclist--timeline .speclist__name { color: var(--red); font-size: 1.02rem; }

/* Dark variant, for use inside .section--dark */
.speclist--dark .speclist__row { border-bottom-color: rgba(255, 255, 255, .16); }
.speclist--dark .speclist__name { color: var(--white); }
.speclist--dark .speclist__meta { color: #B9CEDE; }
.speclist--dark .speclist__meta a { color: var(--white); }

/* Split variant: two columns of rows on wide screens, for long name lists */
@media (min-width: 901px) {
  .speclist--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
  .speclist--split .speclist__row { grid-template-columns: 1fr 1fr; gap: 6px 20px; }
}

/* --------------------------------------------------------------------------
   6. Filter bar
   Rendered as real anchor links so the page still works with JavaScript off,
   where they behave as jump links. main.js upgrades them to filters.
   .pill-list was not reusable here: at roughly 32px tall it fails the 44px
   tap target rule the moment those pills become interactive.
   -------------------------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 calc(var(--sp) * 5);
  padding: 0;
  list-style: none;
}

.filterbar__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--f-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filterbar__btn:hover { border-color: var(--red); color: var(--red); }
.filterbar__btn[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.catalogue__block { margin-bottom: calc(var(--sp) * 7); }
.catalogue__block:last-child { margin-bottom: 0; }
.catalogue__block[hidden] { display: none; }
.catalogue__none { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   7. Numbered steps
   A three across .scard grid loses the sequence, which is the whole point
   of a process list.
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 26px;
  margin: 0 0 calc(var(--sp) * 6);
  padding: 0;
  list-style: none;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  min-height: 44px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #FDECEF;
  color: var(--red);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50%;
}
.steps h3 { margin: 0 0 4px; padding-top: 9px; }
.steps p { font-size: .95rem; color: var(--ink-3); margin: 0; }

/* --------------------------------------------------------------------------
   8. Small extensions
   -------------------------------------------------------------------------- */

/* h4 was falling back to the body font, since only h1 to h3 were styled */
h4 {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 calc(var(--sp) * 1.5);
}

/* Department telephone inside a service card */
.scard__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.scard__tel:hover { text-decoration: underline; }

.section-head .btn-row { margin-top: calc(var(--sp) * 3); }
.section--dark .section-head__lede { color: #B9CEDE; }

/* --------------------------------------------------------------------------
   9. Responsive additions
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  /* Inside the drawer the submenus are simply open. No accordion to tap
     through, and nothing that breaks when JavaScript is unavailable. */
  .nav__menu {
    position: static;
    min-width: 0;
    padding: 0 0 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    /* inherit, not visible: a forced value would leave these links focusable
       while the drawer is closed */
    visibility: inherit;
  }
  .nav__menu--right { left: auto; right: auto; }
  .nav__caret { display: none; }
  .nav__sub { min-height: 48px; padding-left: 16px; font-size: .96rem; }
  /* .nav__list li already carries a divider, so submenu rows drop theirs */
  .nav__menu li { border-bottom: none; }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .pagehead { padding: 34px 0 30px; }
  .pagehead__lede { font-size: 1rem; }

  .speclist__row,
  .speclist--timeline .speclist__row { grid-template-columns: 1fr; gap: 4px; }

  .steps li { padding-left: 54px; }
  .steps li::before { width: 40px; height: 40px; font-size: .98rem; }
  .steps h3 { padding-top: 7px; }

  .prose { max-width: none; }
}

/* ==========================================================================
   BATCH 2 ADDITIONS
   Caribbean Wines and Spirits. Two new components only, everything else on
   the CWS pages reuses the existing system.
     10. Age notice
     11. Brand mark panel
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. Age notice
   Sits directly under the page header on every CWS page. Not a .callout:
   .callout__inner is a space-between flex row built to pair a heading block
   with a button, and this is a single persistent legal notice.
   -------------------------------------------------------------------------- */

.age-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 28px 0 0;
  padding: 18px 22px;
  background: #FDECEF;
  border: 1px solid #F4C2CC;
  border-left: 4px solid var(--red);
  border-radius: var(--r);
}

.age-notice__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--red);
}
.age-notice__mark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.age-notice p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   11. Brand mark panel
   The CWS logo is artwork for dark backgrounds. .split__figure would give it
   a white radius and a drop shadow, which is wrong for a transparent PNG on
   a dark panel.
   -------------------------------------------------------------------------- */

.brandmark {
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
}
.brandmark img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .age-notice { padding: 16px; gap: 12px; }
  .brandmark { padding: 28px 20px; }
}

/* ==========================================================================
   BATCH 3 AND 4 ADDITIONS
     12. FAQ accordion, built on native details and summary
     13. FAQ search, revealed by script only
     14. .speclist--stack, for spec lists inside a narrow card
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. FAQ accordion
   Native details and summary, so every question opens with JavaScript off
   and the browser handles keyboard and screen reader behaviour.
   -------------------------------------------------------------------------- */

.faq__group { margin-bottom: calc(var(--sp) * 7); }
.faq__group:last-child { margin-bottom: 0; }
.faq__group[hidden] { display: none; }

.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item[hidden] { display: none; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 14px 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s var(--ease);
}
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(225deg); }
.faq__q:hover { color: var(--red); }

.faq__a {
  padding: 0 0 20px;
  max-width: 72ch;
}
.faq__a p { font-size: .96rem; color: var(--ink-2); margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--red); font-weight: 600; text-decoration: none; }
.faq__a a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. FAQ search
   Hidden in the markup and revealed by main.js, so it never appears as a
   dead control when scripting is unavailable.
   -------------------------------------------------------------------------- */

.faq-search { margin-bottom: calc(var(--sp) * 5); max-width: 520px; }
.faq-search[hidden] { display: none; }

.faq-search__label {
  display: block;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.faq-search__input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s var(--ease);
}
.faq-search__input:hover { border-color: #C9D2DA; }
.faq-search__input:focus { border-color: var(--blue); }

.faq-search__count {
  margin: 10px 0 0;
  font-size: .88rem;
  color: var(--ink-3);
  min-height: 21px;
}

/* --------------------------------------------------------------------------
   14. Stacked spec list
   Inside a three across card the two column row leaves the value with about
   80px, which is not enough for a telephone number or an address.
   -------------------------------------------------------------------------- */

.speclist--stack .speclist__row { grid-template-columns: 1fr; gap: 4px; }
.speclist--stack .speclist__name {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.speclist--stack .speclist__meta { color: var(--ink-2); }
.scard .speclist { margin-top: 16px; }
.scard .speclist__row:last-child { border-bottom: none; padding-bottom: 0; }

/* ==========================================================================
   FINAL PASS FIXES
   Both found by the full site audit, not by eye.
   ========================================================================== */

/* Long unbroken strings, chiefly email addresses, were pushing the location
   cards on contact.html 32px past a 360px viewport. */
/* overflow-wrap: anywhere, not break-word. break-word wraps the text but
   does not reduce the intrinsic min-content width, so the card still forced
   the layout wider than the viewport. */
.speclist__name,
.speclist__meta,
.speclist__meta a { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 640px) {
  .scard { padding: 22px; }
}

/* Inline links inside FAQ answers measured between 18px and 43px tall, under
   the 44px minimum. Given as inline-flex they keep reading position inside
   the sentence while meeting the target, with the answer line-height opened
   up so the taller boxes do not look cramped. */
.faq__a { line-height: 1.85; }
.faq__a p { line-height: 1.85; }
.faq__a a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==========================================================================
   CATALOGUE, PORTFOLIO AND VIDEO HERO
     15. Screen reader utility
     16. Catalogue search bar and controls
     17. Category pills
     18. Filter drawer
     19. Catalogue table
     20. Catalogue cards, with the alcohol logo swap
     21. Beverage portfolio grid
     22. Video hero
   ========================================================================== */

/* An explicit display value beats the hidden attribute, so every element
   given display: grid or flex below would ignore hidden and stay on screen.
   This restores hidden as the single source of truth for visibility. */
[hidden] { display: none !important; }

/* 15. ---------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 16. Search bar and controls ---------------------------------------------- */

.cat-controls-section { padding-bottom: 0; }

.cat-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(var(--sp) * 4);
}

/* The field wrapper is the positioning context. Without it the absolutely
   positioned icon and clear button anchored to the viewport and pushed the
   document wider than the screen at every breakpoint. */
.cat-searchbar__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.cat-searchbar__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-3);
}
.cat-searchbar__icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.cat-searchbar__input {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 0 52px 0 52px;
  font-family: var(--f-body);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cat-searchbar__input::-webkit-search-cancel-button { display: none; }
.cat-searchbar__input:hover { border-color: #C9D2DA; }
.cat-searchbar__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228, 0, 43, .12);
}

.cat-searchbar__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: none; background: transparent;
  color: var(--ink-3); cursor: pointer;
}
.cat-searchbar__clear svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.cat-searchbar__clear:hover { color: var(--red); }

.cat-filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 60px;
  padding: 0 22px;
  font-family: var(--f-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.cat-filterbtn:hover { border-color: var(--red); color: var(--red); }
.cat-filterbtn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.cat-filterbtn__count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--red); color: var(--white);
  border-radius: 999px;
  font-size: .74rem;
}

.cat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: calc(var(--sp) * 3) 0;
  border-top: 1px solid var(--line);
}
.cat-count { margin: 0; font-size: .95rem; color: var(--ink-3); }
.cat-count strong { font-family: var(--f-display); color: var(--ink); font-size: 1.05rem; }

.cat-meta__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cat-sort {
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--f-body);
  font-size: .9rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cat-view { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cat-view__btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  font-family: var(--f-display); font-size: .85rem; font-weight: 600;
  color: var(--ink-2); background: var(--white);
  border: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.cat-view__btn + .cat-view__btn { border-left: 1px solid var(--line); }
.cat-view__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cat-view__btn:hover { background: var(--tint); }
.cat-view__btn.is-active { background: var(--red); color: var(--white); }

.cat-activefilters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: calc(var(--sp) * 3);
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  font-family: var(--f-body); font-size: .85rem;
  color: var(--ink-2); background: var(--tint);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
}
.cat-chip:hover { border-color: var(--red); color: var(--red); }
.cat-chip--clear { background: transparent; font-weight: 600; color: var(--red); }

/* 17. Category pills ------------------------------------------------------- */

.cat-pills {
  display: flex;
  gap: 10px;
  margin: 0 0 calc(var(--sp) * 3);
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cat-pills::-webkit-scrollbar { height: 4px; }
.cat-pills::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.cat-pill {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 20px;
  font-family: var(--f-display); font-size: .86rem; font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cat-pill:hover { border-color: var(--red); color: var(--red); }
.cat-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.cat-pills--portfolio { margin-bottom: calc(var(--sp) * 5); }

/* 18. Filter drawer -------------------------------------------------------- */

.cat-drawer-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 26, 36, .45);
}

.cat-filters {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 61;
  width: min(360px, 88vw);
  display: flex; flex-direction: column;
  background: var(--white);
  border-left: 1px solid var(--line);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .28s var(--ease), visibility .28s;
}
.cat-filters.is-open { transform: translateX(0); visibility: visible; }

.cat-filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.cat-filters__head h2 { margin: 0; font-size: 1.1rem; }
.cat-filters__close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: none; background: transparent; color: var(--ink-2); cursor: pointer;
}
.cat-filters__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cat-filters__body { flex: 1; overflow-y: auto; padding: 20px 22px; }

.cat-fieldset { border: none; padding: 0; margin: 0 0 calc(var(--sp) * 5); }
.cat-fieldset legend {
  font-family: var(--f-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: 0; margin-bottom: 10px;
}
.cat-checkscroll { max-height: 210px; overflow-y: auto; padding-right: 4px; }

.cat-check {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; cursor: pointer;
  font-size: .9rem; color: var(--ink-2);
}
.cat-check input { width: 18px; height: 18px; accent-color: var(--red); flex: 0 0 auto; }
.cat-check:hover { color: var(--red); }

.cat-filters__foot {
  display: grid; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line);
}

@media (min-width: 1100px) {
  .cat-filters__apply { display: none; }
}

/* 19. Catalogue table ------------------------------------------------------ */

.cat-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cat-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.cat-table thead th {
  text-align: left;
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: 12px 14px; border-bottom: 2px solid var(--red); white-space: nowrap;
}
.cat-table tbody td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cat-table tbody tr:hover { background: var(--tint); }

.cat-td-item { font-family: var(--f-mono, monospace); font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
.cat-td-desc { min-width: 220px; }
.cat-td-name { display: block; font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.cat-td-sub { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }

.cat-none { color: var(--ink-3); font-size: .84rem; font-style: italic; }

mark { background: #FFF1A8; color: var(--ink); padding: 0 2px; border-radius: 2px; }

/* 20. Catalogue cards ------------------------------------------------------ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
  margin: 0 0 calc(var(--sp) * 5);
  padding: 0;
  list-style: none;
}

.pcard2 {
  display: flex; flex-direction: column;
  padding: 20px 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pcard2:hover { border-color: #D6DDE4; transform: translateY(-2px); }
.pcard2:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Fixed height media box. Nothing inside changes the card size, so hovering
   never shifts the grid. */
.pcard2__media {
  position: relative;
  height: 170px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
}

.pcard2__product,
.pcard2__logo {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 170px;
  width: auto; height: auto;
  object-fit: contain;
  transition: opacity .36s var(--ease), transform .36s var(--ease);
}

.pcard2__product { opacity: 1; }
.pcard2__logo { opacity: 0; transform: scale(.94); }

/* The swap. Alcohol only, on hover and on keyboard focus. */
.pcard2--alcohol:hover .pcard2__product,
.pcard2--alcohol:focus-visible .pcard2__product,
.pcard2--alcohol:focus-within .pcard2__product { opacity: 0; transform: scale(1.02); }

.pcard2--alcohol:hover .pcard2__logo,
.pcard2--alcohol:focus-visible .pcard2__logo,
.pcard2--alcohol:focus-within .pcard2__logo { opacity: 1; transform: scale(1); }

/* Non alcohol cards keep the packaging visible, a gentle lift only */
.pcard2:not(.pcard2--alcohol):hover .pcard2__product { transform: scale(1.04); }

/* Branded fallback when an image file has not been supplied yet */
.pcard2__fallback {
  grid-area: 1 / 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  padding: 12px;
  text-align: center;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  color: var(--ink-3);
  background: var(--tint);
  border-radius: 8px;
}
.pcard2__product.is-missing,
.pcard2__logo.is-missing { display: none; }
.pcard2__product.is-missing ~ .pcard2__fallback { display: flex; }

.pcard2__brand {
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--red);
  margin: 0 0 4px;
}
.pcard2__name { font-size: .98rem; margin: 0 0 6px; }
.pcard2__size { font-size: .84rem; color: var(--ink-2); margin: 0 0 2px; }
.pcard2__cat { font-size: .8rem; color: var(--ink-3); margin: 0 0 10px; }
.pcard2__price { margin: auto 0 0; font-family: var(--f-display); font-weight: 700; font-size: .95rem; }

/* Touch devices never see the hover swap, so the brand is stated in text */
.pcard2__brandline { display: none; font-size: .78rem; color: var(--ink-3); margin: 8px 0 0; }

.cat-empty { text-align: center; padding: calc(var(--sp) * 8) 0; }
.cat-empty h2 { margin-bottom: calc(var(--sp) * 2); }
.cat-empty p { color: var(--ink-3); margin-bottom: calc(var(--sp) * 4); }

.cat-loadmore { text-align: center; padding-top: calc(var(--sp) * 2); }
.cat-note {
  margin-top: calc(var(--sp) * 6);
  padding-top: calc(var(--sp) * 4);
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-3);
}
/* Inline, but still a 44px target */
.cat-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.cat-note a:hover { text-decoration: underline; }

/* 21. Beverage portfolio grid ---------------------------------------------- */

.pfgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  margin: 0 0 calc(var(--sp) * 5);
  padding: 0;
  list-style: none;
}
.pfgrid__empty { text-align: center; color: var(--ink-3); }

.pfcard__link {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
  padding: 8px;
  border-radius: var(--r);
}
.pfcard__link:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.pfcard__media {
  position: relative;
  height: 190px;
  width: 100%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.pfcard__product,
.pfcard__logo {
  grid-area: 1 / 1;
  max-width: 100%; max-height: 190px;
  width: auto; height: auto;
  object-fit: contain;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.pfcard__logo { opacity: 0; transform: scale(.94); }

.pfcard--alcohol:hover .pfcard__product,
.pfcard--alcohol:focus-within .pfcard__product { opacity: 0; transform: scale(1.02); }
.pfcard--alcohol:hover .pfcard__logo,
.pfcard--alcohol:focus-within .pfcard__logo { opacity: 1; transform: scale(1); }

.pfcard:not(.pfcard--alcohol):hover .pfcard__product { transform: scale(1.05); }

.pfcard__name {
  font-family: var(--f-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: var(--ink);
}

/* 22. Video hero ----------------------------------------------------------- */

.vhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  background: var(--blue-deep);
  border-bottom: 4px solid var(--red);
}

.vhero__video,
.vhero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vhero__video { opacity: 0; transition: opacity .5s var(--ease); }
.vhero.is-playing .vhero__video { opacity: 1; }
.vhero.is-playing .vhero__poster { opacity: 0; }
.vhero__poster { opacity: 1; transition: opacity .5s var(--ease); }

.vhero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 38, .40) 0%, rgba(11, 26, 38, .78) 100%);
}

.vhero__inner {
  position: relative;
  padding-top: clamp(60px, 10vw, 110px);
  padding-bottom: clamp(40px, 6vw, 66px);
}
.vhero__inner > * { max-width: 720px; }

.vhero__title {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: calc(var(--sp) * 3);
}
.vhero__lede {
  color: #DCE8F1;
  font-size: 1.06rem;
  margin-bottom: calc(var(--sp) * 4);
}

.vhero__toggle {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--white);
  background: rgba(11, 26, 38, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.vhero__toggle:hover { background: rgba(11, 26, 38, .8); }
.vhero__toggle svg { width: 17px; height: 17px; fill: currentColor; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1279px) {
  .pfgrid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .pfgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pfcard__media { height: 160px; }
  .pfcard__product, .pfcard__logo { max-height: 160px; }
}

@media (max-width: 767px) {
  .pfgrid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pcard2 { padding: 14px 12px 16px; }
  .pcard2__media { height: 130px; }
  .pcard2__product, .pcard2__logo { max-height: 130px; }
  .vhero { min-height: 420px; }
}

@media (max-width: 520px) {
  .cat-searchbar { flex-wrap: wrap; }
  .cat-searchbar__input { min-height: 54px; }
  .cat-filterbtn { min-height: 48px; width: 100%; justify-content: center; }
  .cat-meta__right { width: 100%; }
  .cat-sort { flex: 1; }
}

/* Touch devices cannot hover, so the logo swap is disabled entirely and the
   brand is shown as text instead. Nothing essential sits behind hover. */
@media (hover: none) {
  .pcard2--alcohol .pcard2__logo,
  .pfcard--alcohol .pfcard__logo { display: none; }
  .pcard2--alcohol .pcard2__product { opacity: 1 !important; transform: none !important; }
  .pfcard--alcohol .pfcard__product { opacity: 1 !important; transform: none !important; }
  .pcard2__brandline { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard2, .pcard2__product, .pcard2__logo,
  .pfcard__product, .pfcard__logo,
  .vhero__video, .vhero__poster { transition: none !important; }
  .pcard2:hover { transform: none; }
  .pcard2:not(.pcard2--alcohol):hover .pcard2__product,
  .pfcard:not(.pfcard--alcohol):hover .pfcard__product { transform: none; }
}

/* --------------------------------------------------------------------------
   Staff login, footer base
   Discreet rather than hidden. Obscurity is not security: the login is
   protected by Cloudflare Access and the password, not by being hard to
   find. A visible link stops CBC losing the URL a year from now.
   rel="nofollow" keeps it out of search engines.
   -------------------------------------------------------------------------- */

/* Selector is specific enough to beat .footer__base a, which would
   otherwise render this in brand red and compete with the Baha Connect
   credit for attention. Staff know to look for it; visitors should not
   notice it. */
.footer__base .footer__staff {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-3);
  font-weight: 400;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.footer__base .footer__staff:hover { color: var(--red); text-decoration: underline; }
.footer__sep { margin: 0 9px; color: var(--ink-3); opacity: .5; }

/* ==========================================================================
   BEVERAGE SHOWCASE AND CATALOG
   One system, two divisions. CBC reads bright and corporate, CWS reads
   premium and editorial. They differ by surface colour, type treatment and
   pacing only. Structure, spacing and components are shared.
   ========================================================================== */

.showcase,
.collection {
  --bev-surface: #FFFFFF;
  --bev-ink: var(--ink);
  --bev-accent: var(--red);
  background: var(--bev-surface);
  padding: clamp(56px, 8vw, 106px) 0;
}

/* CWS: a warmer, quieter surface and more editorial spacing */
.showcase--cws,
.collection--cws {
  --bev-surface: #FBFAF7;
  --bev-accent: #8A6D3B;
  padding: clamp(64px, 9vw, 124px) 0;
}

.showcase__head,
.collection__head {
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 66px);
}
.showcase__head h1, .showcase__head h2,
.collection__head h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: calc(var(--sp) * 2);
}
.showcase--cws .showcase__head h1,
.showcase--cws .showcase__head h2,
.collection--cws .collection__head h1 { letter-spacing: -0.03em; }

.showcase--cws .eyebrow,
.collection--cws .eyebrow { color: var(--bev-accent); }

.showcase__lede,
.collection__lede { color: var(--ink-3); font-size: 1.02rem; margin: 0; }

/* --------------------------------------------------------------------------
   The product, shared by carousel and grid
   -------------------------------------------------------------------------- */

.bev { display: flex; flex-direction: column; align-items: center; list-style: none; }

/* Invisible stage. Every image uses one canvas with its base on the same
   baseline, so bottoms line up and relative heights stay true with no per
   product CSS. Products keep their natural proportions. */
.bev__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: clamp(220px, 25vw, 380px);
  margin-bottom: 24px;
}
.showcase--cws .bev__stage,
.collection--cws .bev__stage { height: clamp(240px, 27vw, 420px); }

.bev__bottle,
.bev__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              filter .34s var(--ease);
}
.bev__bottle { opacity: 1; transform: scale(1); }
.bev__logo   { opacity: 0; transform: scale(.9); padding: 0 14%; }

.bev__name {
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bev-ink);
  text-align: center;
}
.bev__meta { margin-top: 6px; font-size: .8rem; color: var(--ink-3); text-align: center; }

/* --------------------------------------------------------------------------
   Carousel
   -------------------------------------------------------------------------- */

.showcase__viewport { overflow: hidden; padding: 8px 0 4px; }
.showcase__track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }

.bev--carousel {
  flex: 0 0 auto;
  width: clamp(190px, 20vw, 300px);
  padding: 0 clamp(14px, 2vw, 34px);
}
.bev--carousel .bev__bottle { transform-origin: bottom center; }
.bev--carousel:hover .bev__bottle {
  transform: translateY(-8px) scale(1.06);
  filter: drop-shadow(0 18px 26px rgba(20, 20, 20, .17));
}

.showcase__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 66px);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s var(--ease), transform .12s var(--ease);
}
.btn-dark:hover { background: var(--red); }
.showcase--cws .btn-dark:hover { background: var(--bev-accent); }
.btn-dark:active { transform: scale(.98); }

.showcase__controls { display: flex; gap: 8px; }
.showcase__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.showcase__btn:hover { border-color: var(--bev-accent); color: var(--bev-accent); }
.showcase__btn svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.showcase__btn svg path[d^="M15"], .showcase__btn svg path[d^="M9"] {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Catalog grid and filter pills
   -------------------------------------------------------------------------- */

.bev-pills__scroll {
  margin-bottom: clamp(40px, 5vw, 62px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bev-pills__scroll::-webkit-scrollbar { display: none; }

.bev-pills { display: flex; gap: 10px; margin: 0; padding: 2px; list-style: none; }

.bev-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  white-space: nowrap;
  background: #F4F2EC;
  color: var(--ink-2);
  border: none;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.bev-pill:hover { background: #E9E6DD; }
.bev-pill.is-active { background: var(--ink); color: var(--white); }

.bev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(44px, 5vw, 78px) clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bev--grid:focus-visible { outline: 3px solid var(--bev-accent); outline-offset: 10px; }

/* The swap. Both assets are already in the DOM, so there is no load delay
   and no layout movement. */
.bev--grid:hover .bev__bottle,
.bev--grid:focus-visible .bev__bottle { opacity: 0; transform: scale(.94); }
.bev--grid:hover .bev__logo,
.bev--grid:focus-visible .bev__logo { opacity: 1; transform: scale(1); }

.bev-empty { text-align: center; color: var(--ink-3); padding: 40px 0 0; }
.bev-count { margin: 34px 0 0; font-size: .84rem; color: var(--ink-3); }

.proto-note { background: #FBFAF7; border-top: 1px solid var(--line); padding: 26px 0; }
.proto-note p { margin: 0; font-size: .87rem; color: var(--ink-3); line-height: 1.6; max-width: 76ch; }
.proto-note strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) { .bev-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 720px) {
  .bev-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 18px; }
  /* Roughly 2.4 products visible, so the row reads as continuing */
  .bev--carousel { width: 42vw; padding: 0 10px; }
  .showcase__foot { flex-direction: column; align-items: stretch; }
  .showcase__controls { justify-content: center; }
}

/* Touch has no hover, so the logo swap is off and the product always shows.
   Nothing essential sits behind hover. */
@media (hover: none) {
  .bev__logo { display: none; }
  .bev--grid:hover .bev__bottle,
  .bev--carousel:hover .bev__bottle { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bev__bottle, .bev__logo { transition: none; }
  .bev--carousel:hover .bev__bottle { transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   Catalog search
   -------------------------------------------------------------------------- */

.bev-search {
  position: relative;
  display: flex;
  max-width: 520px;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.bev-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-3);
}
.bev-search__icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.bev-search__input {
  width: 100%;
  min-height: 54px;
  padding: 0 52px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.bev-search__input::-webkit-search-cancel-button { display: none; }
.bev-search__input:focus {
  outline: none;
  border-color: var(--bev-accent);
  box-shadow: 0 0 0 3px rgba(228, 0, 43, .12);
}
.bev-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: none; background: transparent;
  color: var(--ink-3); cursor: pointer;
}
.bev-search__clear svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.bev-search__clear:hover { color: var(--red); }

.bev-count { margin: 0 0 clamp(30px, 4vw, 46px); font-size: .86rem; color: var(--ink-3); }

/* Five across on very wide screens, where the whitespace still holds up */
@media (min-width: 1500px) {
  .bev-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 520px) {
  .bev-search__input { min-height: 50px; padding: 0 46px; }
}