/* Page banner (commerce_brand_hero): every page except the Trade Show.
   Built on the "About the Department" banner: a navy panel of stepped diagonal blocks,
   a gold diagonal rule with a hairline echo, and a photograph cut on the same diagonal.
   All diagonals share one slope, so the blocks, rule and photo edge stay parallel. */

.bh {
  --bh-navy-1: #0e3d8c;
  --bh-navy-2: #0a2c6b;
  --bh-navy-3: #061b44;
  --bh-gold: #f7c21b;
  --bh-gold-2: #ffd95a;
  --bh-sky: #2b9bd4;
  --bh-pos: center 40%;
  --bh-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(480px, 37vw, 600px);
  display: grid;
  align-content: center;
  color: #fff;
  background: linear-gradient(158deg, var(--bh-navy-1) 0%, var(--bh-navy-2) 50%, var(--bh-navy-3) 100%);
}
.bh--compact { min-height: clamp(420px, 32vw, 520px); }

/* ---------- stepped block pattern ---------- */
.bh-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bh-pattern i { position: absolute; inset: 0; display: block; }
/* Glass panels: skewed to the banner's diagonal, with edges that feather out to nothing
   (no clip-path), so there is never a visible line where the glass begins. */
.bh-pattern .bh-slab {
  inset: -12% auto;
  left: var(--slab-x);
  width: var(--slab-w);
  background: linear-gradient(90deg, transparent 0%, var(--slab-c) 36%, var(--slab-c) 64%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 100%);
  transform: skewX(-22deg);
}
.bh-slab-1 { --slab-x: 8.5%;  --slab-w: 22%; --slab-c: rgba(255, 255, 255, .05); }
.bh-slab-2 { --slab-x: 24.2%; --slab-w: 16%; --slab-c: rgba(255, 255, 255, .075); }
.bh-slab-3 { --slab-x: 34.4%; --slab-w: 16%; --slab-c: rgba(43, 155, 212, .24); }
.bh-glow {
  background:
    radial-gradient(ellipse 46% 60% at 8% 0%, rgba(80, 160, 240, .30), transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 110%, rgba(247, 194, 27, .10), transparent 70%);
}

/* ---------- photograph ---------- */
.bh-media {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 8% 100%);
  background: var(--bh-navy-3);
}
.bh-media picture { display: contents; }
.bh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bh-pos);
  transform-origin: 70% 40%;
  animation: bh-settle 2.4s var(--bh-ease) both;
}
.bh-media-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 27, 68, .55) 0%, rgba(6, 27, 68, .12) 26%, transparent 46%),
    linear-gradient(0deg, rgba(6, 27, 68, .42) 0%, transparent 34%),
    linear-gradient(180deg, rgba(6, 27, 68, .18) 0%, transparent 18%);
}

/* Glass credential badge on the photograph */
.bh-badge {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(26px, 3.2vw, 46px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 32, 78, .62), rgba(8, 32, 78, .38));
  box-shadow: 0 18px 40px rgba(3, 14, 36, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  animation: bh-rise .9s var(--bh-ease) .9s both;
}
.bh-badge img { width: 46px; height: 46px; padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bh-badge strong { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.bh-badge small { display: block; margin-top: 2px; color: #ffd95a; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Campaign mark (e.g. Love Saint Lucia): the official logo on white, as supplied, in a card
   that replaces the Department badge. White keeps the logo in its "true form". */
.bh-campaign {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(26px, 3.2vw, 46px);
  z-index: 1;
  width: clamp(200px, 18vw, 270px);
  margin: 0;
  padding: 16px 18px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(3, 14, 36, .38), 0 0 0 1px rgba(255, 255, 255, .6);
  animation: bh-rise .9s var(--bh-ease) .9s both;
}
.bh-campaign::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--bh-gold) 0 50%, #4cc3f1 50%);
}
.bh-campaign img { display: block; width: 100%; height: auto; }
.bh-campaign figcaption {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e3eaf3;
  color: #0a2c6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- gold diagonal rule and hairline echo ---------- */
.bh-stripe, .bh-hairline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.bh-stripe {
  background: linear-gradient(180deg, var(--bh-gold-2) 0%, var(--bh-gold) 45%, #e7a912 100%);
  clip-path: polygon(55.4% 0, 57.9% 0, 41.8% 100%, 39.3% 100%);
  filter: drop-shadow(0 0 18px rgba(247, 194, 27, .35));
  animation: bh-draw 1.1s var(--bh-ease) .15s both;
}
.bh-hairline {
  background: linear-gradient(180deg, rgba(255, 217, 90, .75), rgba(255, 217, 90, .1));
  clip-path: polygon(53% 0, 53.28% 0, 37.18% 100%, 36.9% 100%);
  animation: bh-draw 1.3s var(--bh-ease) .3s both;
}

/* ---------- copy ---------- */
.bh-inner { position: relative; z-index: 3; padding-top: 56px; padding-bottom: 64px; }
.bh-copy { max-width: min(580px, 42%); }
.bh-copy > * { animation: bh-rise .8s var(--bh-ease) both; }
.bh-copy > :nth-child(2) { animation-delay: .08s; }
.bh-copy > :nth-child(3) { animation-delay: .16s; }
.bh-copy > :nth-child(4) { animation-delay: .24s; }
.bh-copy > :nth-child(5) { animation-delay: .32s; }

.bh-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: rgba(227, 237, 249, .78);
  font-size: 13px;
  font-weight: 600;
}
.bh-crumbs a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.bh-crumbs a:hover, .bh-crumbs a:focus-visible { border-color: var(--bh-gold); color: var(--bh-gold-2); }
.bh-crumbs i { font-style: normal; color: rgba(255, 217, 90, .7); }

.bh-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  color: #ffce49;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.bh-eyebrow::before { content: ""; flex: none; width: 34px; height: 3px; border-radius: 2px; background: var(--bh-gold); }

.bh-title {
  margin: 0 0 22px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 3.9vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(3, 14, 36, .25);
}
.bh-dot { color: var(--bh-gold); }
.bh--release .bh-title { font-size: clamp(30px, 2.9vw, 46px); line-height: 1.1; }

.bh-lead {
  margin: 0 0 30px;
  max-width: 48ch;
  color: #e3edf9;
  font-size: 17px;
  line-height: 1.6;
}

.bh-meta time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-left: 4px solid var(--bh-gold);
  background: rgba(3, 14, 36, .45);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}
.bh-meta i { color: var(--bh-gold-2); }

.bh-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  overflow: hidden;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--bh-ease), box-shadow .2s ease;
}
.bh-btn i { font-size: 13px; transition: transform .2s var(--bh-ease); }
.bh-btn:hover i, .bh-btn:focus-visible i { transform: translateX(3px); }
.bh-btn .fa-arrow-down { transform: none; }
.bh-btn:hover .fa-arrow-down, .bh-btn:focus-visible .fa-arrow-down { transform: translateY(3px); }
.bh-btn-gold { border: 2px solid var(--bh-gold); background: var(--bh-gold); color: #0a2456; box-shadow: 0 12px 28px rgba(247, 194, 27, .22); }
.bh-btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--bh-ease);
}
.bh-btn-gold:hover, .bh-btn-gold:focus-visible { border-color: var(--bh-gold-2); background: var(--bh-gold-2); color: #0a2456; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(247, 194, 27, .32); }
.bh-btn-gold:hover::after, .bh-btn-gold:focus-visible::after { transform: translateX(120%); }
.bh-btn-ghost { border: 2px solid rgba(255, 255, 255, .9); color: #fff; }
.bh-btn-ghost:hover, .bh-btn-ghost:focus-visible { background: #fff; color: #0a2456; transform: translateY(-2px); }
.bh-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- brand colour rule at the foot ---------- */
.bh-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 34fr 22fr 26fr 18fr;
  height: 6px;
}
.bh-rule i { display: block; }
.bh-rule i:nth-child(1) { background: #0a4c95; }
.bh-rule i:nth-child(2) { background: var(--bh-sky); }
.bh-rule i:nth-child(3) { background: var(--bh-gold); }
.bh-rule i:nth-child(4) { background: #041a3d; }

/* ---------- motion ---------- */
@keyframes bh-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bh-draw { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bh-copy { max-width: 50%; }
  .bh-media { left: 46%; clip-path: polygon(34% 0, 100% 0, 100% 100%, 8% 100%); }
  .bh-stripe { clip-path: polygon(60.9% 0, 63.4% 0, 49.3% 100%, 46.8% 100%); }
  .bh-hairline { clip-path: polygon(58.4% 0, 58.7% 0, 44.6% 100%, 44.3% 100%); }
  .bh-slab-3 { --slab-x: 38.4%; }
  .bh-badge { display: none; }
  .bh-campaign { width: 190px; padding: 12px 14px 10px; }
  .bh-campaign figcaption { font-size: 10px; letter-spacing: .12em; }
}

@media (max-width: 860px) {
  .bh, .bh--compact { display: block; min-height: 0; }
  .bh-media {
    position: relative;
    inset: auto;
    height: clamp(230px, 56vw, 380px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background: var(--bh-gold);
  }
  .bh-img { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 97%); }
  .bh-media-shade { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 97%); background: linear-gradient(0deg, rgba(6, 27, 68, .35), transparent 40%); }
  .bh-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bh-navy-1);
    clip-path: polygon(0 100%, 100% 90%, 100% 100%);
  }
  .bh-stripe, .bh-hairline { display: none; }
  .bh-campaign { right: 14px; bottom: 18%; width: min(46vw, 180px); padding: 10px 12px 8px; }
  .bh-campaign figcaption { font-size: 9.5px; letter-spacing: .14em; }
  .bh-slab-1 { --slab-x: 28%; --slab-w: 34%; }
  .bh-slab-2 { --slab-x: 57%; --slab-w: 24%; }
  .bh-slab-3 { --slab-x: 78%; --slab-w: 26%; }
  .bh-inner { padding-top: 30px; padding-bottom: 48px; }
  .bh-copy { max-width: none; }
  .bh-crumbs { margin-bottom: 16px; }
}

@media (max-width: 480px) {
  .bh-title { font-size: clamp(32px, 10vw, 40px); }
  .bh-lead { font-size: 16px; }
  .bh-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-img, .bh-badge, .bh-campaign, .bh-stripe, .bh-hairline, .bh-copy > * { animation: none; }
  .bh-btn, .bh-btn i, .bh-btn-gold::after { transition: none; }
}

/* Wide screens: the copy sits in a centred 1180px column, so the diagonals follow the
   centre of the screen (keeping their 1440px proportions) instead of stretching with it;
   the photograph simply extends further right. Positions are 1440px geometry re-expressed
   as offsets from 50%. */
@media (min-width: 1441px) {
  .bh-media { left: calc(50% - 172.8px); clip-path: polygon(303.9px 0, 100% 0, 100% 100%, 71.4px 100%); }
  .bh-stripe { clip-path: polygon(calc(50% + 77.8px) 0, calc(50% + 113.8px) 0, calc(50% - 118.1px) 100%, calc(50% - 154.1px) 100%); }
  .bh-hairline { clip-path: polygon(calc(50% + 43.2px) 0, calc(50% + 47.2px) 0, calc(50% - 184.6px) 100%, calc(50% - 188.6px) 100%); }
  .bh-slab-1 { --slab-x: calc(50% - 597.6px); --slab-w: 316.8px; }
  .bh-slab-2 { --slab-x: calc(50% - 371.5px); --slab-w: 230.4px; }
  .bh-slab-3 { --slab-x: calc(50% - 224.6px); --slab-w: 230.4px; }
}

/* ---------- glass light sweep ----------
   One band of light travels across the whole banner (navy panel, gold rule, photograph
   and badge) as if the banner sat under a pane of glass. It starts and ends fully outside
   the banner, so no starting point is ever visible, and it has no hard edges. The band is
   skewed to the banner's diagonal. Start/end offsets are variables because the skewed band
   reaches further sideways on the taller stacked mobile layout. */
.bh-sheen {
  --bh-sheen-from: -170%;
  --bh-sheen-to: 470%;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.bh-sheen::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, .28) 49.4%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .28) 50.6%, transparent 55%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .03) 20%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .12) 62%, rgba(255, 255, 255, .03) 80%, transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(var(--bh-sheen-from)) skewX(-22deg);
  animation: bh-sweep 9s cubic-bezier(.45, 0, .25, 1) 1.6s infinite;
  will-change: transform;
}
@keyframes bh-sweep {
  0%        { transform: translateX(var(--bh-sheen-from)) skewX(-22deg); }
  42%, 100% { transform: translateX(var(--bh-sheen-to)) skewX(-22deg); }
}

@media (max-width: 860px) {
  .bh-sheen { --bh-sheen-from: -280%; --bh-sheen-to: 320%; }
  .bh-sheen::before { width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-sheen { display: none; }
}

/* ---------- Love Saint Lucia: the campaign's own banner look ----------
   Scoped to .bh--love-saint-lucia only; every other banner keeps the navy Department style.
   Colours come from the campaign artwork: a light sky-blue field, the logo's gold and sky
   hearts, navy lettering. The hearts here are a background motif, not the logo itself. */
.bh--love-saint-lucia {
  --lsl-sky: #4cc3f1;
  --lsl-sky-2: #9fdcf6;
  --lsl-navy: #0a2c6b;
  color: var(--lsl-navy);
  background: linear-gradient(160deg, #f4fbfe 0%, #dff3fc 45%, #b9e6f9 100%);
}
.bh--love-saint-lucia .bh-slab-1 { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2)); }
.bh--love-saint-lucia .bh-slab-2 { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3)); }
.bh--love-saint-lucia .bh-slab-3 { background: linear-gradient(180deg, rgba(76, 195, 241, .35), rgba(76, 195, 241, .1) 70%, transparent); }
.bh--love-saint-lucia .bh-glow {
  background:
    radial-gradient(ellipse 50% 60% at 6% 0%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(ellipse 45% 55% at 30% 110%, rgba(247, 194, 27, .22), transparent 70%);
}
/* Heart motif: a gold outline heart around a sky-blue heart, behind the copy */
.bh--love-saint-lucia .bh-pattern::after {
  content: "";
  position: absolute;
  left: clamp(-60px, 18vw, 330px);
  top: 50%;
  width: clamp(260px, 30vw, 440px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-8deg);
  opacity: .36;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 176C44 136 14 104 14 70 14 42 36 22 62 22c16 0 30 8 38 22 8-14 22-22 38-22 26 0 48 20 48 48 0 34-30 66-86 106z' fill='none' stroke='%23f7c21b' stroke-width='9' stroke-linejoin='round'/%3E%3Cpath d='M100 132C70 112 54 94 54 76c0-14 11-25 25-25 9 0 16 4 21 12 5-8 12-12 21-12 14 0 25 11 25 25 0 18-16 36-46 56z' fill='%234cc3f1' fill-opacity='.55'/%3E%3C/svg%3E");
  pointer-events: none;
}
.bh--love-saint-lucia .bh-hairline { background: linear-gradient(180deg, rgba(76, 195, 241, .9), rgba(76, 195, 241, .2)); }
.bh--love-saint-lucia .bh-media-shade {
  background:
    linear-gradient(90deg, rgba(223, 243, 252, .35) 0%, transparent 30%),
    linear-gradient(0deg, rgba(10, 44, 107, .28) 0%, transparent 32%);
}
.bh--love-saint-lucia .bh-crumbs { color: rgba(10, 44, 107, .7); }
.bh--love-saint-lucia .bh-crumbs a { color: var(--lsl-navy); border-bottom-color: rgba(10, 44, 107, .3); }
.bh--love-saint-lucia .bh-crumbs a:hover, .bh--love-saint-lucia .bh-crumbs a:focus-visible { color: #8a5d00; border-color: var(--bh-gold); }
.bh--love-saint-lucia .bh-crumbs i { color: #b98500; }
.bh--love-saint-lucia .bh-eyebrow { color: #8a5d00; }
.bh--love-saint-lucia .bh-title { color: var(--lsl-navy); text-shadow: 0 2px 18px rgba(255, 255, 255, .6); }
.bh--love-saint-lucia .bh-lead { color: #28406a; }
.bh--love-saint-lucia .bh-btn-ghost { border-color: var(--lsl-navy); color: var(--lsl-navy); background: rgba(255, 255, 255, .55); }
.bh--love-saint-lucia .bh-btn-ghost:hover, .bh--love-saint-lucia .bh-btn-ghost:focus-visible { background: var(--lsl-navy); color: #fff; }
.bh--love-saint-lucia .bh-btn:focus-visible { outline-color: var(--lsl-navy); }
.bh--love-saint-lucia .bh-rule { grid-template-columns: 30fr 25fr 25fr 20fr; }
.bh--love-saint-lucia .bh-rule i:nth-child(1) { background: var(--lsl-sky); }
.bh--love-saint-lucia .bh-rule i:nth-child(2) { background: var(--bh-gold); }
.bh--love-saint-lucia .bh-rule i:nth-child(3) { background: var(--lsl-sky-2); }
.bh--love-saint-lucia .bh-rule i:nth-child(4) { background: var(--lsl-navy); }
/* The light field needs a navy-tinted sheen core rather than white-on-white */
.bh--love-saint-lucia .bh-sheen::before { mix-blend-mode: soft-light; }
@media (max-width: 860px) {
  .bh--love-saint-lucia .bh-media::after { background: #dff3fc; }
  .bh--love-saint-lucia .bh-pattern::after { left: auto; right: -40px; top: auto; bottom: 10px; width: 220px; transform: rotate(-8deg); }
}