:root {
  --cb-footer-accent: #e84a5b;
  --cb-footer-text: #f7f8f2;
  --cb-footer-muted: rgba(247, 248, 242, .58);
  --cb-footer-ease: cubic-bezier(.22, 1, .36, 1);
  --cb-footer-text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  --cb-footer-shell-desktop: url("./media/CBC-desktop-Shell.webp");
  --cb-footer-shell-tablet: url("./media/CBC-tablet-shell.webp");
  --cb-footer-shell-mobile: url("./media/CBC-mobile-Shell.webp");
  --cb-footer-contour-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='920' viewBox='0 0 1600 920' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.12' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-96 104C-14 34 136 20 288 48c150 27 297 66 430 52 120-13 211-64 333-72 129-8 278 30 381 18 101-12 185-57 280-48 82 8 161 50 220 103'/%3E%3Cpath d='M-52 178c88-71 224-87 356-56 132 31 252 103 381 113 149 11 270-62 401-95 134-34 298-24 428 23 126 46 221 124 285 213'/%3E%3Cpath d='M-76 336c56-74 168-126 294-130 130-5 249 40 365 32 120-9 202-73 316-96 128-27 281 4 381 83 93 73 130 177 221 238 101 67 265 79 403 53'/%3E%3Cpath d='M-112 474c76-66 159-109 252-123 110-17 219 5 315 59 100 56 175 146 282 188 114 45 248 31 355 11 113-21 205-48 311-31 117 18 219 85 350 84 98-1 183-38 247-92'/%3E%3Cpath d='M-44 648c63-46 143-71 216-55 69 15 123 65 164 123 44 61 81 126 146 163 71 40 163 43 254 16 92-27 171-81 259-119 88-39 192-63 302-51 119 13 225 69 339 66 104-3 203-56 284-128'/%3E%3C/g%3E%3C/svg%3E");
  --cb-footer-line-flow-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='980' viewBox='0 0 1800 980' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.28' stroke-width='2.15' stroke-linecap='round'%3E%3Cpath d='M-120 258C34 150 216 125 423 181c224 60 359 181 596 146 234-35 348-181 594-161 128 10 235 54 342 118'/%3E%3Cpath d='M-86 646c171-105 351-116 539-32 173 78 314 125 512 71 203-55 352-150 558-123 145 19 255 79 393 171'/%3E%3C/g%3E%3C/svg%3E");
  --cb-footer-line-flow-two: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='980' viewBox='0 0 1800 980' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M-150 393c155-83 309-87 462-11 145 72 265 153 456 112 184-40 294-158 499-155 211 3 331 132 536 103'/%3E%3Cpath d='M-122 758c130-54 253-48 371 19 116 66 205 137 353 113 159-25 253-134 421-139 191-6 321 117 523 103 122-8 227-59 332-138'/%3E%3C/g%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #f4f0e7;
}

.cb-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  padding: 38px 0 0;
  color: var(--cb-footer-text);
  font-family: "Montserrat", Arial, sans-serif;
}

.cb-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #f4f0e7 0%, #f4f0e7 13%, #f3c1c8 28%, #e84a5b 48%, #e84a5b 100%);
  pointer-events: none;
}

.cb-footer__shell {
  /* Approved desktop anchors: keep headline and image paired so the image barely covers the headline. */
  --cb-footer-logo-top: 5.1cqh;
  --cb-footer-logo-width: clamp(150px, 14cqw, 240px);
  --cb-footer-nav-top: 21.4cqh;
  --cb-footer-nav-x: 3.45cqw;
  --cb-footer-nav-gap: clamp(14px, 3.2cqh, 24px);
  --cb-footer-nav-font: clamp(1.95rem, 3cqw, 2.55rem);
  --cb-footer-title-top: 42.1cqh;
  --cb-footer-title-font: clamp(2.7rem, 4.35cqw, 5.8rem);
  --cb-footer-stage-width: clamp(275px, 28.2cqw, 520px);
  --cb-footer-stage-bottom: .4cqh;
  position: relative;
  z-index: 1;
  width: min(91.6vw, 1980px);
  max-width: 1980px;
  margin: clamp(44px, 5.9vw, 86px) auto 0;
  aspect-ratio: 1920 / 840;
  overflow: hidden;
  background: var(--cb-footer-shell-desktop) center top / 100% 100% no-repeat;
  color: var(--cb-footer-text);
  container-type: size;
}

.cb-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: var(--cb-footer-shell-desktop);
  mask-image: var(--cb-footer-shell-desktop);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.cb-footer__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--cb-footer-contour-pattern);
  background-position: center;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: .68;
  pointer-events: none;
}

.cb-footer__line-flow {
  position: absolute;
  inset: -6% -12%;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 112% 112%;
  mix-blend-mode: screen;
  opacity: .66;
  pointer-events: none;
  will-change: transform;
}

.cb-footer__line-flow--one {
  background-image: var(--cb-footer-line-flow-one);
  animation: cb-footer-line-drift-one 18s var(--cb-footer-ease) infinite alternate;
}

.cb-footer__line-flow--two {
  background-image: var(--cb-footer-line-flow-two);
  animation: cb-footer-line-drift-two 23s var(--cb-footer-ease) infinite alternate;
  opacity: .52;
}

.cb-footer__top {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  padding: 0;
}

.cb-footer__group {
  position: absolute;
  top: var(--cb-footer-nav-top);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--cb-footer-nav-gap);
  padding-top: 0;
}

.cb-footer__group--left {
  left: var(--cb-footer-nav-x);
}

.cb-footer__group--right {
  right: var(--cb-footer-nav-x);
  width: max-content;
  align-items: flex-start;
  text-align: left;
}

.cb-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--cb-footer-nav-gap);
  transform: none;
}

.cb-footer__roll-link {
  display: inline-flex;
  width: fit-content;
  color: var(--cb-footer-text);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--cb-footer-nav-font);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: .95;
  overflow: hidden;
  perspective: 700px;
  text-decoration: none;
  text-shadow: var(--cb-footer-text-shadow);
  text-transform: uppercase;
}

.cb-footer__roll-stack {
  position: relative;
  display: block;
  min-height: 1em;
  transform-style: preserve-3d;
}

.cb-footer__roll-stack span {
  display: block;
  min-height: 1em;
  backface-visibility: hidden;
  transform-origin: 50% 50% -.5em;
  transition: transform .8s var(--cb-footer-ease), opacity .8s var(--cb-footer-ease);
}

.cb-footer__roll-stack span:first-child {
  opacity: 1;
  transform: rotateX(0deg) rotateZ(0deg);
}

.cb-footer__roll-stack span:last-child {
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--cb-footer-accent);
  opacity: 0;
  text-shadow: var(--cb-footer-text-shadow);
  transform: rotateX(-92deg) rotateZ(7deg);
}

.cb-footer__roll-link:hover .cb-footer__roll-stack span:first-child,
.cb-footer__roll-link:focus-visible .cb-footer__roll-stack span:first-child {
  opacity: 0;
  transform: rotateX(92deg) rotateZ(-7deg);
}

.cb-footer__roll-link:hover .cb-footer__roll-stack span:last-child,
.cb-footer__roll-link:focus-visible .cb-footer__roll-stack span:last-child {
  opacity: 1;
  transform: rotateX(0deg) rotateZ(0deg);
  animation: cb-footer-link-wiggle .28s ease-out .18s 1 both;
}

.cb-footer__roll-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .82);
  outline-offset: 4px;
}

@keyframes cb-footer-link-wiggle {
  0% { transform: rotateX(0deg) rotateZ(0deg); }
  35% { transform: rotateX(0deg) rotateZ(-1.2deg) translateY(-.5px); }
  62% { transform: rotateX(0deg) rotateZ(.7deg) translateY(0); }
  100% { transform: rotateX(0deg) rotateZ(0deg) translateY(0); }
}

@keyframes cb-footer-line-drift-one {
  0% { transform: translate3d(-1.2%, -.7%, 0) scale(1.01); }
  100% { transform: translate3d(1.2%, .8%, 0) scale(1.03); }
}

@keyframes cb-footer-line-drift-two {
  0% { transform: translate3d(1%, .6%, 0) scale(1.02); }
  100% { transform: translate3d(-1.1%, -.8%, 0) scale(1.04); }
}

.cb-footer__centerpiece {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  display: block;
  padding-top: 0;
  pointer-events: none;
  text-align: center;
}

.cb-footer__logo {
  position: absolute;
  top: var(--cb-footer-logo-top);
  left: 50%;
  z-index: 6;
  display: block;
  width: var(--cb-footer-logo-width);
  margin: 0;
  pointer-events: auto;
  text-decoration: none;
  transform: translateX(-50%);
}

.cb-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .72));
}

.cb-footer__title {
  position: absolute;
  top: var(--cb-footer-title-top);
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: min(82cqw, 980px);
  margin: 0;
  color: var(--cb-footer-text);
  font-family: "Poppins", "Montserrat", Arial, sans-serif;
  font-size: var(--cb-footer-title-font);
  font-weight: 900;
  letter-spacing: -.022em;
  line-height: .834;
  pointer-events: none;
  text-shadow: var(--cb-footer-text-shadow);
  text-transform: uppercase;
  transform: translateX(-50%);
}

.cb-footer__title span {
  display: inline-block;
  white-space: nowrap;
}

.cb-footer__title-light {
  color: var(--cb-footer-text);
}

.cb-footer__title-accent {
  color: var(--cb-footer-accent);
  text-shadow: var(--cb-footer-text-shadow);
}

.cb-footer__stage {
  position: absolute;
  left: 50%;
  bottom: var(--cb-footer-stage-bottom);
  z-index: 6;
  width: var(--cb-footer-stage-width);
  pointer-events: none;
  transform: translateX(-50%);
}

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

.cb-footer__bottom {
  position: relative;
  z-index: 4;
  width: calc(100% - 24px);
  max-width: 1980px;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 0 4px 16px;
  color: #4b1119;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.cb-footer__copy {
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 42px;
}

.cb-footer__legal {
  display: flex;
  gap: 20px;
  padding-top: 6px;
}

.cb-footer__legal a {
  color: #4b1119;
  text-decoration: none;
  text-transform: uppercase;
}

.cb-footer__legal a:hover,
.cb-footer__legal a:focus-visible {
  color: #fff;
}

@media (min-width: 768px) {
  .cb-footer__bottom {
    --cb-footer-copy-center: 7.9%;
    --cb-footer-legal-center: 93.6%;
    --cb-footer-legal-size: clamp(9px, calc(6.2px + .34vw), 11px);
    --cb-footer-legal-top: clamp(10px, calc(5px + .45vw), 14px);
    width: calc(100% - 24px);
    max-width: 1980px;
    margin: 10px auto 0;
    gap: 18px;
    padding: 0 4px 16px;
    font-size: var(--cb-footer-legal-size);
    line-height: 1.05;
    align-items: flex-start;
    display: block;
    position: relative;
    min-height: 28px;
  }

  .cb-footer__copy {
    position: absolute;
    top: var(--cb-footer-legal-top);
    left: var(--cb-footer-copy-center);
    transform: translateX(-50%);
    padding-left: 0;
    text-align: center;
    white-space: nowrap;
  }

  .cb-footer__legal {
    position: absolute;
    top: var(--cb-footer-legal-top);
    left: var(--cb-footer-legal-center);
    transform: translateX(-50%);
    display: block;
    gap: 0;
    padding-top: 0;
    padding-right: 0;
    text-align: center;
    white-space: nowrap;
  }

  .cb-footer__legal a {
    display: inline-block;
  }
}

@media (min-width: 768px) and (max-width: 1088px) {
  .cb-footer {
    padding-top: clamp(28px, 4vw, 38px);
  }

  .cb-footer__shell {
    /* Approved tablet anchors: tuned to the tablet shell asset. */
    --cb-footer-logo-top: 5.4cqh;
    --cb-footer-logo-width: clamp(120px, 18cqw, 185px);
    --cb-footer-nav-top: 16.7cqh;
    --cb-footer-nav-x: 3.25cqw;
    --cb-footer-nav-gap: clamp(9px, 2.7cqh, 18px);
    --cb-footer-nav-font: clamp(1.05rem, 2.55cqw, 1.58rem);
    --cb-footer-title-top: 49.7cqh;
    --cb-footer-title-font: clamp(2rem, 4.75cqw, 3.15rem);
    --cb-footer-stage-width: clamp(260px, 31cqw, 365px);
    --cb-footer-stage-bottom: .8cqh;
    width: min(93.5vw, calc(100vw - 48px));
    aspect-ratio: 173 / 100;
    margin-top: clamp(38px, 6vw, 62px);
    background-image: var(--cb-footer-shell-tablet);
  }

  .cb-footer__inner {
    -webkit-mask-image: var(--cb-footer-shell-tablet);
    mask-image: var(--cb-footer-shell-tablet);
  }

  .cb-footer__title {
    max-width: min(78cqw, 760px);
  }

  .cb-footer__bottom {
    width: calc(100% - 24px);
  }
}

@media (max-width: 767px) {
  .cb-footer {
    padding: clamp(18px, 5vw, 30px) 0 0;
  }

  .cb-footer__shell {
    /* Approved mobile anchors: locked from the final mobile review. */
    --cb-footer-logo-top: 4.2cqh;
    --cb-footer-logo-width: clamp(134px, 32cqw, 246px);
    --cb-footer-nav-top: 27.8cqh;
    --cb-footer-nav-x: 5.35cqw;
    --cb-footer-nav-gap: clamp(12px, 3.7cqw, 31px);
    --cb-footer-nav-font: clamp(1.28rem, 5cqw, 2.55rem);
    --cb-footer-title-top: 54.5cqh;
    --cb-footer-title-font: clamp(1.85rem, 8.15cqw, 4.2rem);
    --cb-footer-stage-width: clamp(280px, 76cqw, 610px);
    --cb-footer-stage-bottom: .4cqh;
    width: min(88vw, 620px);
    aspect-ratio: 1440 / 1960;
    margin-top: clamp(28px, 6vw, 58px);
    background-image: var(--cb-footer-shell-mobile);
  }

  .cb-footer__inner {
    -webkit-mask-image: var(--cb-footer-shell-mobile);
    mask-image: var(--cb-footer-shell-mobile);
  }

  .cb-footer__title {
    max-width: 88cqw;
  }

  .cb-footer__group,
  .cb-footer__group--right {
    width: 38cqw;
    padding-top: 0;
  }

  .cb-footer__group--left {
    left: var(--cb-footer-nav-x);
    align-items: flex-start;
    text-align: left;
  }

  .cb-footer__group--right {
    right: var(--cb-footer-nav-x);
    align-items: flex-end;
    text-align: right;
  }

  .cb-footer__group--right .cb-footer__links {
    align-items: flex-end;
  }

  .cb-footer__roll-link {
    width: auto;
    line-height: .92;
    white-space: normal;
  }

  .cb-footer__group--right .cb-footer__roll-link {
    justify-content: flex-end;
  }

  .cb-footer__roll-stack span {
    white-space: normal;
  }

  .cb-footer__bottom {
    width: calc(100% - 16px);
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    padding-bottom: 12px;
    color: #4b1119;
    font-size: 11px;
    text-align: center;
  }

  .cb-footer__copy {
    width: 100%;
    padding-left: 0;
    text-align: center;
    white-space: normal;
  }

  .cb-footer__legal {
    display: none;
  }
}

@media (max-width: 430px) {
  .cb-footer__shell {
    /* Approved small-mobile anchors: locked from the final mobile review. */
    --cb-footer-logo-width: 34cqw;
    --cb-footer-nav-top: 28.3cqh;
    --cb-footer-nav-gap: 3.4cqw;
    --cb-footer-nav-font: clamp(1.05rem, 5.05cqw, 1.5rem);
    --cb-footer-title-top: 54.1cqh;
    --cb-footer-title-font: 8.05cqw;
    --cb-footer-stage-width: 79cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-footer__line-flow {
    animation: none;
    transform: none;
  }

  .cb-footer__roll-stack span {
    transition: none;
  }

  .cb-footer__roll-link:hover .cb-footer__roll-stack span:first-child,
  .cb-footer__roll-link:focus-visible .cb-footer__roll-stack span:first-child {
    opacity: 1;
    transform: none;
  }

  .cb-footer__roll-link:hover .cb-footer__roll-stack span:last-child,
  .cb-footer__roll-link:focus-visible .cb-footer__roll-stack span:last-child {
    opacity: 0;
    animation: none;
  }
}
