/*
 * Charleston Booth responsive system
 *
 * This file is intentionally loaded after every page and section stylesheet.
 * Existing mobile art direction remains in control below 768px. From 768px
 * upward, components retain their desktop composition and scale fluidly.
 */

:root {
  --cbc-page-gutter: clamp(16px, 4vw, 72px);
  --cbc-section-space: clamp(48px, 7vw, 112px);
  --cbc-layout-gap: clamp(18px, 2.5vw, 42px);
  --cbc-radius-large: clamp(22px, 3vw, 52px);
  --cbc-display-large: clamp(42px, 6vw, 96px);
}

@media (max-width: 720px) {
  body.cbc-homepage .msx-booth-service__tagline {
    color: #fff;
  }
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
}

main,
section,
article,
header,
footer,
div {
  min-width: 0;
}

@media (min-width: 768px) {
  body.cbc-homepage .cb-hero,
  body.cbc-homepage .msx-section,
  body.cbc-homepage .social-share-demo,
  body.cbc-homepage .bcf-showcase,
  body.cbc-homepage .complete-experience,
  body.cbc-homepage .cbg-gallery,
  body.cbc-homepage .cbc-local-experts,
  body.cbc-homepage .cbc-faq,
  body.cbc-about-page main,
  body.photobooth-page main,
  body.cbc-faqs-page main,
  body.contact-page main {
    width: 100%;
    max-width: 100%;
  }
}

/*
 * Tablet is a proportionally smaller desktop, not an enlarged mobile layout.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  body.cbc-homepage .cb-hero {
    min-height: clamp(620px, 78vw, 780px);
  }

  body.cbc-homepage .cb-hero__inner {
    min-height: inherit;
    padding:
      clamp(205px, 25vw, 270px)
      clamp(20px, 3vw, 38px)
      clamp(64px, 8vw, 96px);
    align-items: flex-end;
  }

  body.cbc-homepage .cb-hero__headline {
    font-size: clamp(34px, 5.25vw, 62px);
    line-height: 0.92;
  }

  body.cbc-homepage .cb-hero__subtitle-lockup {
    --cb-modern-size: clamp(25px, 3.7vw, 43px);
    --cb-subtop-word-size: clamp(11px, 1.35vw, 17px);
    --cb-subtop-number-size: clamp(17px, 2vw, 25px);
  }

  body.cbc-homepage .cb-hero__subtop {
    top: clamp(-31px, -2.4vw, -24px);
    left: clamp(-8px, -0.6vw, -3px);
  }

  body.cbc-homepage .cb-hero__buttons {
    gap: clamp(10px, 1.4vw, 18px);
  }

  body.cbc-homepage .cb-hero__button {
    min-height: clamp(50px, 5.2vw, 60px);
    padding-inline: clamp(20px, 3vw, 40px);
  }

  body.cbc-homepage .social-share-demo {
    min-height: clamp(370px, 43vw, 480px);
  }

  body.cbc-homepage .social-share-demo__inner {
    display: grid;
    width: min(calc(100% - clamp(30px, 5vw, 64px)), 1120px);
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: center;
  }

  body.cbc-homepage .social-share-demo__content {
    padding:
      clamp(24px, 3vw, 36px)
      clamp(12px, 2.5vw, 34px)
      clamp(24px, 3vw, 36px)
      0;
    transform: translateX(clamp(14px, 2.5vw, 32px));
  }

  body.cbc-homepage .social-share-demo__title {
    font-size: clamp(42px, 6vw, 68px);
  }

  body.cbc-homepage .social-share-demo__method-list {
    display: flex;
  }

  body.cbc-homepage .social-share-demo__method-list li {
    padding-inline: clamp(5px, 0.75vw, 10px);
    font-size: clamp(8px, 0.82vw, 11px);
  }

  body.cbc-homepage .social-share-demo__method-list svg {
    width: clamp(17px, 2vw, 21px);
    height: clamp(17px, 2vw, 21px);
  }

  body.cbc-homepage .social-share-demo__stage {
    min-height: clamp(370px, 43vw, 480px);
  }

  body.cbc-homepage .social-share-demo__phone {
    left: 42%;
  }

  body.cbc-homepage .bcf-showcase,
  body.cbc-homepage .complete-experience,
  body.cbc-homepage .cbg-gallery {
    --cbc-tablet-inline-space: clamp(18px, 3vw, 42px);
  }

  body.cbc-homepage .complete-experience__stage {
    width: min(calc(100% - (2 * var(--cbc-tablet-inline-space))), 1180px);
    margin-inline: auto;
  }

  body.cbc-homepage .complete-experience__benefits {
    width: min(calc(100% - (2 * var(--cbc-tablet-inline-space))), 1180px);
    margin-inline: auto;
  }

  body.cbc-homepage .cbg-gallery__lab-preview {
    max-width: min(100%, 1120px);
    margin-inline: auto;
  }

  body.cbc-homepage .cbc-local-experts__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    align-items: center;
    gap: clamp(22px, 3.4vw, 48px);
  }

  body.cbc-homepage .cbc-local-experts__image {
    height: clamp(205px, 23vw, 270px);
  }

  body.cbc-homepage .cbc-local-experts__content {
    width: min(100%, 680px);
    padding: clamp(4px, 0.7vw, 10px) 0;
    text-align: left;
  }

  body.cbc-homepage .cbc-local-experts__copy {
    margin-inline: 0;
  }

  body.cbc-homepage .cbc-local-experts__title {
    font-size: clamp(32px, 4vw, 50px);
  }

  body.cbc-homepage .cb-footer__shell,
  body.cbc-about-page .cb-footer__shell,
  body.photobooth-page .cb-footer__shell,
  body.cbc-faqs-page .cb-footer__shell,
  body.contact-page .cb-footer__shell {
    width: min(calc(100% - clamp(20px, 3vw, 42px)), 1880px);
    margin-inline: auto;
  }
}

/*
 * The booth-service cards use the same two-up, image-over-content composition
 * as desktop. Measurements become fluid so the composition fits 768–1199px.
 */
@media (min-width: 768px) and (max-width: 1199px) {
  body.cbc-homepage .msx-booth-services {
    width: min(calc(100% - clamp(28px, 5vw, 64px)), 1080px);
    margin-top: clamp(42px, 5.5vw, 70px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 28px);
  }

  body.cbc-homepage .msx-booth-service {
    min-height: 0;
    border-radius: clamp(20px, 2.6vw, 28px);
  }

  body.cbc-homepage .msx-booth-service--image-left,
  body.cbc-homepage .msx-booth-service--image-right {
    grid-template-areas:
      "media"
      "content";
    grid-template-columns: minmax(0, 1fr);
  }

  body.cbc-homepage .msx-booth-service--image-left .msx-booth-service__media::after,
  body.cbc-homepage .msx-booth-service--image-right .msx-booth-service__media::after {
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 84%,
        rgba(214, 86, 95, 0.35) 92%,
        var(--msx-service-coral) 100%
      );
  }

  body.cbc-homepage .msx-booth-service--image-left .msx-booth-service__media,
  body.cbc-homepage .msx-booth-service--image-right .msx-booth-service__media {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 88%,
        rgba(0, 0, 0, 0.75) 94%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 88%,
        rgba(0, 0, 0, 0.75) 94%,
        transparent 100%
      );
  }

  body.cbc-homepage .msx-booth-service__media {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  body.cbc-homepage .msx-booth-service__content {
    display: grid;
    margin-top: -1px;
    padding:
      clamp(14px, 1.9vw, 22px)
      clamp(16px, 2.5vw, 30px)
      clamp(14px, 1.8vw, 20px);
    grid-template-areas:
      "title title"
      "tagline tagline"
      "features button";
    grid-template-columns: minmax(0, 1fr) clamp(104px, 14vw, 154px);
    align-items: center;
    column-gap: clamp(8px, 1.4vw, 18px);
    row-gap: clamp(4px, 0.7vw, 8px);
    justify-content: stretch;
  }

  body.cbc-homepage .msx-booth-service__number,
  body.cbc-homepage .msx-booth-service__description {
    display: none;
  }

  body.cbc-homepage .msx-booth-service__title {
    grid-area: title;
    font-size: clamp(23px, 3.15vw, 37px);
    letter-spacing: -0.035em;
    line-height: 0.92;
  }

  body.cbc-homepage .msx-booth-service__tagline {
    grid-area: tagline;
    max-width: 100%;
    margin-top: 0;
    font-size: clamp(13px, 1.7vw, 19px);
    line-height: 0.9;
  }

  body.cbc-homepage .msx-booth-service__features {
    grid-area: features;
    margin-top: clamp(5px, 0.8vw, 9px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(4px, 0.7vw, 9px);
  }

  body.cbc-homepage .msx-booth-service__icon-ring {
    width: clamp(30px, 4vw, 44px);
    height: clamp(30px, 4vw, 44px);
  }

  body.cbc-homepage .msx-booth-service__icon {
    width: clamp(15px, 2vw, 22px);
    height: clamp(15px, 2vw, 22px);
  }

  body.cbc-homepage .msx-booth-service__feature-label {
    max-width: 12ch;
    margin-top: 5px;
    font-size: clamp(8px, 0.78vw, 10px);
    letter-spacing: 0.045em;
    line-height: 1.15;
  }

  body.cbc-homepage .msx-booth-service__button {
    position: static;
    grid-area: button;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    min-height: clamp(42px, 5.8vw, 58px);
    margin-top: clamp(5px, 0.8vw, 9px);
    padding: 8px;
    gap: 6px;
    border: 1px solid rgba(23, 25, 23, 0.8);
    background: transparent;
    color: var(--msx-service-ink);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(6px, 0.72vw, 8px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body.cbc-homepage .msx-booth-service__button-arrow {
    font-size: clamp(11px, 1.4vw, 15px);
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body.cbc-homepage .cbc-local-experts {
    padding: clamp(10px, 1.8vw, 16px) clamp(16px, 3vw, 28px);
  }

  body.cbc-homepage .cbc-local-experts__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
    gap: clamp(18px, 2.8vw, 30px);
  }

  body.cbc-homepage .cbc-local-experts__image {
    height: clamp(190px, 25vw, 225px);
  }

  body.cbc-homepage .cbc-local-experts__content {
    padding: 0;
    text-align: left;
  }

  body.cbc-homepage .cbc-local-experts__copy {
    margin-inline: 0;
  }
}

/*
 * Homepage tablet parity pass
 *
 * Legacy 768–899px rules changed several approved desktop compositions into
 * narrow mobile columns. Keep their desktop relationships and scale the
 * measurements instead.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Design Lab: preserve the desktop three-panel relationship. */
  body.cbc-homepage .cbg-gallery__lab {
    width: min(calc(100% - clamp(32px, 5vw, 64px)), 1062px);
  }

  body.cbc-homepage .cbg-gallery__lab-preview {
    grid-template-columns:
      minmax(108px, 0.165fr)
      minmax(0, 0.58fr)
      minmax(164px, 0.238fr);
    gap: clamp(7px, 1vw, 10px);
  }

  body.cbc-homepage .cbg-gallery__steps,
  body.cbc-homepage .cbg-gallery__booth-preview,
  body.cbc-homepage .cbg-gallery__strip-preview {
    height: clamp(350px, 44vw, 454px);
    min-height: 0;
  }

  body.cbc-homepage .cbg-gallery__studio-scene {
    height: 100%;
    aspect-ratio: auto;
  }

  body.cbc-homepage .cbg-gallery__steps {
    padding: clamp(14px, 1.8vw, 20px) clamp(9px, 1.3vw, 14px);
  }

  body.cbc-homepage .cbg-gallery__step {
    min-height: clamp(43px, 5.4vw, 56px);
    grid-template-columns: clamp(34px, 4.2vw, 44px) minmax(0, 1fr);
    gap: clamp(7px, 1vw, 11px);
  }

  body.cbc-homepage .cbg-gallery__step-number {
    width: clamp(32px, 4vw, 42px);
    height: clamp(32px, 4vw, 42px);
  }

  body.cbc-homepage .cbg-gallery__step:not(:last-child)::after {
    left: calc(clamp(32px, 4vw, 42px) / 2);
  }

  body.cbc-homepage .cbg-gallery__strip-preview {
    padding: clamp(12px, 1.8vw, 20px);
  }

  body.cbc-homepage .cbg-gallery__strip-head {
    gap: clamp(6px, 1vw, 14px);
  }

  body.cbc-homepage .cbg-gallery__strip-kicker {
    font-size: clamp(12px, 1.75vw, 18px);
  }

  body.cbc-homepage .cbg-gallery__strip-meta {
    font-size: clamp(7px, 0.95vw, 11px);
  }

  body.cbc-homepage .cbg-gallery__strip-status {
    padding: clamp(4px, 0.65vw, 7px) clamp(5px, 0.8vw, 9px);
    font-size: clamp(5px, 0.7vw, 8px);
  }

  body.cbc-homepage .cbg-gallery__strip-frame {
    margin-top: clamp(10px, 1.5vw, 18px);
  }

  body.cbc-homepage .cbg-gallery__strip-frame img {
    max-width: 82%;
    height: min(78%, 390px);
  }

  /* Animate the awards contents, never the complete tablet composition. */
  body.cbc-homepage .msx-awards-shell {
    --msx-awards-shell-shift: 0px !important;
    --msx-awards-shell-shift-y: 0px !important;
    width: 100%;
    transform: none !important;
  }

  body.cbc-homepage .msx-awards-title-wrap,
  body.cbc-homepage .msx-awards-script,
  body.cbc-homepage .msx-awards-lede,
  body.cbc-homepage .msx-awards-image-wrap,
  body.cbc-homepage .msx-awards-top-marquee,
  body.cbc-homepage .msx-awards-stat {
    opacity: 1;
    transition: none;
  }

  body.cbc-homepage .msx-awards-title-wrap,
  body.cbc-homepage .msx-awards-script,
  body.cbc-homepage .msx-awards-lede,
  body.cbc-homepage .msx-awards-top-marquee,
  body.cbc-homepage .msx-awards-image-wrap,
  body.cbc-homepage .msx-awards-stat {
    transform: none !important;
  }

  body.cbc-homepage .msx-awards-image-wrap {
    --msx-awards-base-x: 0px;
    --msx-awards-base-y: 0px;
  }

  body.cbc-homepage .msx-awards-stat {
    --msx-awards-stat-base-x: 0px;
  }

  body.cbc-homepage .msx-awards-stats-grid {
    transform: none;
  }

  /* Keep the footer labels inside the coral bar at every tablet width. */
  body.cbc-homepage .cb-footer__bottom,
  body.cbc-about-page .cb-footer__bottom,
  body.photobooth-page .cb-footer__bottom,
  body.cbc-faqs-page .cb-footer__bottom,
  body.contact-page .cb-footer__bottom {
    display: flex;
    width: calc(100% - clamp(34px, 5vw, 58px));
    min-height: 28px;
    margin-inline: auto;
    padding-inline: 0;
    align-items: flex-start;
    justify-content: space-between;
  }

  body.cbc-homepage .cb-footer__copy,
  body.cbc-homepage .cb-footer__legal,
  body.cbc-about-page .cb-footer__copy,
  body.cbc-about-page .cb-footer__legal,
  body.photobooth-page .cb-footer__copy,
  body.photobooth-page .cb-footer__legal,
  body.cbc-faqs-page .cb-footer__copy,
  body.cbc-faqs-page .cb-footer__legal,
  body.contact-page .cb-footer__copy,
  body.contact-page .cb-footer__legal {
    position: static;
    padding: clamp(8px, 1vw, 12px) 0 0;
    transform: none;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  /* Meet CBC: restore the two-column desktop composition at tablet scale. */
  body.cbc-homepage .msx-section {
    --msx-tablet-wrap: calc(100vw - clamp(34px, 5vw, 46px));
    --msx-tablet-shell-inset: calc((100vw - var(--msx-tablet-wrap)) / 2);
    padding:
      calc(var(--msx-curve-height, 20px) + clamp(42px, 6vw, 54px))
      0
      clamp(34px, 5vw, 46px);
  }

  body.cbc-homepage .msx-wrap {
    width: var(--msx-tablet-wrap);
    max-width: none;
    transform: none;
  }

  body.cbc-homepage .msx-grid {
    display: grid;
    min-height: clamp(370px, 49vw, 430px);
    grid-template-columns: minmax(300px, 0.94fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 36px);
  }

  body.cbc-homepage .msx-copy-col {
    width: auto;
    max-width: none;
    margin: 0;
    padding: clamp(16px, 2.4vw, 24px) 0 0;
  }

  body.cbc-homepage .msx-heading-mark {
    top: -4px;
    left: clamp(-30px, -3.4vw, -20px);
    width: clamp(60px, 8.6vw, 76px);
  }

  body.cbc-homepage .msx-title {
    width: auto;
    max-width: none;
    font-size: clamp(37px, 5vw, 44px);
    line-height: 0.89;
  }

  body.cbc-homepage .msx-title-line--desktop {
    display: block;
  }

  body.cbc-homepage .msx-title-line--mobile {
    display: none;
  }

  body.cbc-homepage .msx-title-display {
    max-width: 340px;
    margin-top: 7px;
    font-size: 0.47em;
    line-height: 1.04;
  }

  body.cbc-homepage .msx-body {
    max-width: 325px;
    margin-top: 10px;
    font-size: clamp(11px, 1.5vw, 13px);
    line-height: 1.42;
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap {
    display: flex;
    margin-top: 14px;
  }

  body.cbc-homepage .msx-media-col {
    position: relative;
    width: auto;
    max-width: none;
    min-height: clamp(370px, 49vw, 430px);
    margin: 0;
  }

  body.cbc-homepage .msx-photo-main,
  body.cbc-homepage .msx-overlap-card,
  body.cbc-homepage .msx-button-wrap--mobile,
  body.cbc-homepage .msx-meta--mobile {
    display: none;
  }

  body.cbc-homepage .msx-photo-main-overlap,
  body.cbc-homepage .msx-overlap-card-overflow,
  body.cbc-homepage .msx-media-col > .msx-meta {
    display: block;
  }

  body.cbc-homepage .msx-photo-main-overlap {
    top: clamp(70px, 9vw, 82px);
    right: clamp(20px, 3vw, 28px);
    left: auto;
    width: clamp(300px, 39vw, 342px);
    aspect-ratio: 577 / 369;
    overflow: hidden;
  }

  body.cbc-homepage .msx-photo-main-overlap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.cbc-homepage .msx-overlap-card-overflow {
    top: clamp(254px, 32vw, 286px);
    right: clamp(242px, 30.5vw, 270px);
    left: auto;
    width: clamp(112px, 14.5vw, 128px);
    overflow: hidden;
    border-radius: 14px;
    transform: none;
  }

  body.cbc-homepage .msx-overlap-card-overflow img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 285 / 208;
    object-fit: cover;
    border-radius: inherit;
    transform: none;
  }

  body.cbc-homepage .msx-media-col > .msx-meta {
    top: clamp(248px, 31vw, 276px);
    right: clamp(4px, 0.8vw, 9px);
    left: auto;
    width: clamp(270px, 35vw, 305px);
    gap: 5px;
    transform: none;
  }

  body.cbc-homepage .msx-meta-title {
    font-size: 9px;
  }

  body.cbc-homepage .msx-list {
    gap: 5px;
  }

  body.cbc-homepage .msx-list li {
    padding-left: 12px;
    font-size: clamp(7px, 0.96vw, 8.5px);
    letter-spacing: 0.035em;
    line-height: 1.25;
    white-space: normal;
  }

  body.cbc-homepage .msx-section > .msx-cta-row {
    display: none;
  }

  body.cbc-homepage .msx-awards-shell {
    margin: clamp(22px, 3vw, 30px) 0 0;
    padding-top: clamp(34px, 5vw, 44px);
    border-top: 1px solid rgba(232, 74, 91, 0.18);
  }

  body.cbc-homepage .msx-awards-intro {
    display: grid;
    min-height: clamp(126px, 17vw, 150px);
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.92fr);
    gap: clamp(30px, 4.5vw, 42px);
    align-items: start;
  }

  body.cbc-homepage .msx-awards-title-wrap {
    width: 100%;
    min-height: clamp(122px, 16vw, 142px);
    margin-left: 0;
    align-items: flex-start;
  }

  body.cbc-homepage .msx-awards-title {
    font-size: clamp(48px, 6.8vw, 58px);
    line-height: 0.86;
  }

  body.cbc-homepage .msx-awards-title em {
    margin-top: 4px;
    font-size: 0.38em;
  }

  body.cbc-homepage .msx-awards-script {
    top: clamp(70px, 9.5vw, 84px);
    left: clamp(58px, 8vw, 72px);
    width: clamp(255px, 35vw, 305px);
  }

  body.cbc-homepage .msx-awards-lede {
    max-width: none;
    margin: 2px 0 0;
    font-size: clamp(10.5px, 1.4vw, 12px);
    line-height: 1.55;
  }

  body.cbc-homepage .msx-awards-lower {
    display: grid;
    margin-top: clamp(-42px, -5vw, -30px);
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.92fr);
    gap: clamp(30px, 4.5vw, 42px);
    align-items: start;
  }

  body.cbc-homepage .msx-awards-left {
    padding-top: clamp(105px, 14vw, 124px);
  }

  body.cbc-homepage .msx-awards-image-wrap {
    width: min(100%, 330px);
    margin: 0 auto;
  }

  body.cbc-homepage .msx-awards-stats-col {
    width: 100%;
    gap: clamp(12px, 2vw, 18px);
    justify-items: stretch;
  }

  body.cbc-homepage .msx-awards-top-marquee {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
  }

  body.cbc-homepage .msx-awards-logo img {
    height: clamp(24px, 3.2vw, 30px);
  }

  body.cbc-homepage .msx-awards-stats-grid {
    width: 100%;
    margin: clamp(22px, 3vw, 28px) 0 0;
    gap: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 36px);
  }

  body.cbc-homepage .msx-awards-stat {
    min-height: clamp(68px, 9vw, 78px);
    padding: 0;
  }

  body.cbc-homepage .msx-awards-stat-label {
    margin-bottom: 5px;
    font-size: clamp(8px, 1.1vw, 10px);
  }

  body.cbc-homepage .msx-awards-stat-value {
    font-size: clamp(36px, 5vw, 42px);
  }
}

/*
 * Mobile hero lockup.
 *
 * The explicit <br> in the headline owns the only line break. Scale from the
 * viewport width so both lines use the available space without ever crossing
 * the safe page inset. The CTA pair shares one compact, matched footprint.
 */
@media (max-width: 767px) {
  body.cbc-homepage .cb-hero__headline {
    width: calc(100vw - 26px);
    max-width: calc(100vw - 26px);
    font-size: clamp(24px, 8.05vw, 60px);
    line-height: 0.92;
    white-space: nowrap;
  }

  body.cbc-homepage .cb-hero__buttons {
    gap: 8px;
    width: 100%;
    margin-top: clamp(18px, 5vw, 24px);
  }

  body.cbc-homepage .cb-hero__button,
  body.cbc-homepage .cb-hero__button--contact {
    --cb-button-script-size: clamp(.82rem, 3.6vw, 1.05rem);
    --cb-button-label-size: clamp(1.25rem, 5.8vw, 1.65rem);
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: clamp(54px, 15vw, 62px);
    padding: 7px 6px;
    gap: clamp(3px, 1.5vw, 7px);
  }

  body.cbc-homepage .cb-hero__button::before {
    inset: 7px;
    border-width: 2px;
  }

  body.cbc-homepage .cb-hero__button:not(.cb-hero__button--contact) .cb-hero__button-script {
    transform: translateY(.26em) rotate(-2deg);
  }

  body.cbc-homepage .cb-hero__button--contact .cb-hero__button-script {
    transform: translate(-.58em, .08em) rotate(-2deg);
  }
}

/*
 * Key Credentials collision guard.
 *
 * The floating supporting photo lives outside `.msx-wrap`, while the
 * credentials live inside the media column. At compact desktop/tablet widths
 * those two independent positioning systems can otherwise cross. Keep a real
 * vertical clearance between them and give the credentials' containing stack
 * priority so scroll transforms can never place an image over the copy.
 */
body.cbc-homepage .msx-media-col {
  z-index: 7;
}

body.cbc-homepage .msx-media-col > .msx-meta,
body.cbc-homepage .msx-meta--mobile {
  z-index: 9 !important;
  isolation: isolate;
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.cbc-homepage .msx-media-col > .msx-meta {
    translate: 0 clamp(46px, 5vw, 54px);
  }
}


@media (min-width: 900px) and (max-width: 1100px) {
  body.cbc-homepage .msx-media-col {
    min-height: clamp(500px, 50vw, 520px);
  }
}

@media (max-width: 767px) {
  :root {
    --cbc-mobile-body-size: clamp(16px, 4.25vw, 18px);
    --cbc-mobile-body-leading: 1.52;
  }

  body.cbc-homepage .msx-wrap {
    width: calc(100vw - 20px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  body.cbc-homepage .msx-copy-col {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  body.cbc-homepage .msx-title {
    width: 100%;
    max-width: none;
    font-size: clamp(2rem, 8.5vw, 2.55rem);
    line-height: .9;
  }

  body.cbc-homepage .msx-title-display {
    width: 100%;
    max-width: none;
    margin-top: clamp(7px, 2vw, 10px);
    font-size: clamp(1.2rem, 5vw, 1.42rem);
    line-height: 1.08;
  }

  body.cbc-homepage .msx-heading-mark {
    right: 0;
    left: auto;
    width: clamp(68px, 18vw, 82px);
  }

  body.cbc-homepage .msx-body,
  body.cbc-homepage .msx-body p {
    width: 100%;
    max-width: none;
    padding-right: 0;
    font-size: var(--cbc-mobile-body-size);
    line-height: var(--cbc-mobile-body-leading);
    overflow-wrap: normal;
    word-break: normal;
  }

  body.cbc-homepage .msx-body {
    margin-top: clamp(12px, 3.5vw, 16px);
  }

  body.cbc-homepage .msx-body p {
    margin-right: 0;
    margin-left: 0;
  }

  body.cbc-homepage .msx-button-wrap--mobile .msx-button {
    --msx-button-border: 4px;
    width: clamp(150px, 42vw, 180px);
    min-width: 0;
    min-height: clamp(52px, 14vw, 58px);
    padding: 8px 14px 7px;
  }

  body.cbc-homepage .msx-button-wrap--mobile .msx-button__main {
    font-size: clamp(18px, 5vw, 22px);
  }

  body.cbc-homepage .msx-button-wrap--mobile .msx-button__script {
    font-size: clamp(14px, 3.8vw, 17px);
  }

  body.cbc-homepage .msx-awards-top-marquee {
    --msx-mobile-logo-gap: clamp(44px, 13vw, 58px);
    width: 100vw;
    max-width: none;
    margin: clamp(64px, 18vw, 82px) calc(50% - 50vw) 0;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.cbc-homepage .msx-awards-marquee-track {
    display: flex;
    width: max-content;
    gap: var(--msx-mobile-logo-gap);
    will-change: transform;
  }

  body.cbc-homepage .msx-awards-marquee-group,
  body.cbc-homepage .msx-awards-marquee-group[aria-hidden="true"] {
    display: flex;
    width: auto;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: var(--msx-mobile-logo-gap);
  }

  body.cbc-homepage .msx-awards-logo,
  body.cbc-homepage .msx-awards-logo:nth-child(n) {
    display: flex;
    flex: 0 0 auto;
  }

  body.cbc-homepage .msx-awards-logo img,
  body.cbc-homepage .msx-awards-logo:nth-child(n) img {
    width: auto;
    max-width: none;
    height: clamp(28px, 8.7vw, 38px);
  }

  body.cbc-homepage .msx-awards-logo:nth-child(3) img {
    height: clamp(38px, 11vw, 50px);
  }

  body.cbc-homepage .msx-awards-stats-grid {
    margin-top: clamp(60px, 17vw, 76px);
  }

  body.cbc-homepage .msx-meta--mobile {
    position: relative;
    translate: none;
  }
}

/*
 * Mobile awards flow.
 *
 * Keep the editorial media collage compact, then let the press logos, stats,
 * award marks, and credentials participate in normal document flow before the
 * Our Booths heading. This removes the oversized spacer below the photos and
 * prevents the credentials from ever sitting underneath the following title.
 */
@media (max-width: 767px) {
  body.cbc-homepage .msx-media-col {
    height: clamp(310px, 52.8vw, 380px);
  }

  body.cbc-homepage .msx-awards-shell {
    --msx-awards-shell-shift: 0px !important;
    --msx-awards-shell-shift-y: 0px !important;
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: -68px;
    transform: none !important;
  }

  body.cbc-homepage .msx-awards-lower {
    order: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body.cbc-homepage .msx-awards-stats-col {
    order: 1;
  }

  body.cbc-homepage .msx-awards-left {
    order: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body.cbc-homepage .msx-awards-image-wrap {
    order: 1;
    margin-top: clamp(26px, 7vw, 34px);
  }

  body.cbc-homepage .msx-meta--mobile {
    order: 2;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 348px);
    margin: clamp(12px, 3.5vw, 18px) auto 0;
  }

  body.cbc-homepage .msx-meta--mobile .msx-list {
    width: min(100%, 330px);
  }

  body.cbc-homepage .msx-meta--mobile .msx-list li {
    width: 100%;
    font-size: clamp(8.75px, 2.35vw, 10px);
    line-height: 1.35;
    white-space: normal;
  }

  body.cbc-homepage .msx-awards-stat-label {
    font-size: clamp(8px, 2.2vw, 9px);
  }

  body.cbc-homepage .msx-awards-intro {
    order: 2;
    margin-top: clamp(28px, 7vw, 38px);
  }

  body.cbc-homepage .msx-booth-service__content {
    padding: 30px 24px;
  }

  body.cbc-homepage .msx-booth-service__tagline {
    margin: 6px 0 0;
    font-size: clamp(13px, 4.35vw, 15.5px);
    line-height: clamp(10.66px, 3.444vw, 12.71px);
  }

  body.cbc-homepage .msx-booth-service:nth-child(3) .msx-booth-service__tagline {
    font-size: clamp(10.5px, 3.3vw, 13px);
  }

  body.cbc-homepage .msx-booth-service__button {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
 * This file loads after the component stylesheet, so repeat the final camera
 * anchor here to preserve the desktop lockup throughout tablet widths.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  body.cbc-homepage .msx-heading-mark {
    left: clamp(-48px, -2.45vw, -30px);
    top: clamp(-14px, -0.72vw, -7px);
    width: clamp(91px, 6.11vw, 114px);
    transform: rotate(-10deg);
    transform-origin: 50% 50%;
  }
}

/*
 * Meet CBC + Our Booths tablet parity
 *
 * Treat the approved 1280px composition as a fixed visual system that scales
 * continuously down to 768px. This final layer intentionally replaces the
 * older 768–899px rearrangement and removes fixed-size controls that otherwise
 * became proportionally larger as the viewport became smaller.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  body.cbc-homepage .msx-section {
    --msx-tablet-stage: 97.1875vw;
    --msx-tablet-stage-inset: calc((100vw - var(--msx-tablet-stage)) / 2);
    padding:
      19.21875vw
      0
      clamp(18px, 2.2vw, 28px);
  }

  body.cbc-homepage .msx-wrap {
    width: var(--msx-tablet-stage);
    max-width: none;
    transform: translateY(-4vw);
  }

  body.cbc-homepage .msx-grid {
    display: grid;
    min-height: 45.3125vw;
    grid-template-columns: minmax(0, 46.06625vw) minmax(0, 47.52078vw);
    gap: 3.60047vw;
    align-items: start;
  }

  body.cbc-homepage .msx-copy-col {
    width: auto;
    max-width: none;
    margin: 0;
    padding:
      2.8vw
      0
      0
      1.25vw;
  }

  body.cbc-homepage .msx-heading-mark {
    top: clamp(-9px, -0.7vw, -5px);
    left: clamp(-48px, -3.75vw, -29px);
    width: clamp(55px, 7.1vw, 91px);
  }

  body.cbc-homepage .msx-title {
    width: 52vw;
    max-width: none;
    font-size: 5vw;
    line-height: 0.88;
  }

  body.cbc-homepage .msx-title-line--desktop {
    display: block;
  }

  body.cbc-homepage .msx-title-line--mobile {
    display: none;
  }

  body.cbc-homepage .msx-title-display {
    max-width: 46.875vw;
    margin-top: 0;
    font-size: 0.46em;
    line-height: 0.96;
  }

  body.cbc-homepage .msx-body {
    width: 40.625vw;
    max-width: none;
    margin-top: 1.09375vw;
    font-size: 1.171875vw;
    line-height: 1.5;
  }

  body.cbc-homepage .msx-body p {
    width: auto;
    max-width: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap {
    display: inline-block;
    margin-top: 2.8125vw;
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button {
    --msx-button-border: clamp(4px, 0.546875vw, 7px);
    width: 18.8836vw;
    min-width: 0;
    min-height: 5vw;
    padding:
      0.78125vw
      1.40625vw;
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__block {
    gap: clamp(5px, 0.63vw, 8px);
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__main {
    font-size: 2.25vw;
    transform: translateY(0.3125vw);
  }

  body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__script {
    font-size: 1.52vw;
    transform: translateY(0.625vw);
  }

  body.cbc-homepage .msx-media-col {
    position: relative;
    width: auto;
    max-width: none;
    height: 45.3125vw;
    min-height: 45.3125vw;
    margin: 0;
  }

  body.cbc-homepage .msx-photo-main,
  body.cbc-homepage .msx-overlap-card,
  body.cbc-homepage .msx-button-wrap--mobile,
  body.cbc-homepage .msx-meta--mobile {
    display: none;
  }

  body.cbc-homepage .msx-photo-main-overlap {
    display: block;
    top: 13.4195vw;
    right: auto;
    left: 51.1016vw;
    width: 45.4211vw;
    aspect-ratio: 577 / 369;
    overflow: hidden;
  }

  body.cbc-homepage .msx-photo-main-overlap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.cbc-homepage .msx-overlap-card-overflow {
    display: block;
    top: 38.6066vw;
    right: auto;
    left: 45.6648vw;
    width: 19.6133vw;
    overflow: hidden;
    border-radius: clamp(16px, 2vw, 26px);
    transform: translate3d(0, var(--msx-shift, 0px), 0);
  }

  body.cbc-homepage .msx-overlap-card-overflow img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 208;
    object-fit: cover;
    border-radius: inherit;
    transform: none;
  }

  body.cbc-homepage .msx-media-col > .msx-meta {
    display: grid;
    top: 34.346vw;
    right: auto;
    bottom: auto;
    left: 16.86vw;
    width: 34.41vw;
    gap: clamp(6px, 0.78vw, 10px);
    translate: none;
    transform: none;
  }

  body.cbc-homepage .msx-meta-title {
    font-size: clamp(8px, 1.02vw, 13px);
  }

  body.cbc-homepage .msx-list {
    gap: clamp(6px, 0.78vw, 10px);
  }

  body.cbc-homepage .msx-list li {
    padding-left: clamp(11px, 1.4vw, 18px);
    font-size: clamp(8.4px, 1.09vw, 14px);
    line-height: 1.35;
    white-space: nowrap;
  }

  body.cbc-homepage .msx-list li::before {
    top: 0.58em;
    width: clamp(5px, 0.63vw, 8px);
    height: clamp(5px, 0.63vw, 8px);
  }

  body.cbc-homepage .msx-section > .msx-cta-row {
    display: none;
  }

  body.cbc-homepage .msx-awards-shell {
    display: block;
    width: 100%;
    margin: 8.7vw 0 -1.2vw;
    padding-top: 0;
    border-top: 0;
  }

  body.cbc-homepage .msx-awards-intro {
    display: grid;
    order: 0;
    min-height: 10vw;
    margin-top: 0;
    grid-template-columns: minmax(0, 52.55555vw) minmax(0, 39.83156vw);
    gap: 4.8vw;
    align-items: end;
  }

  body.cbc-homepage .msx-awards-title-wrap {
    width: fit-content;
    min-height: 10.854vw;
    margin-left: 0;
    align-items: flex-end;
  }

  body.cbc-homepage .msx-awards-title {
    font-size: 7.2vw;
    line-height: 0.9;
  }

  body.cbc-homepage .msx-awards-title em {
    margin-top: 0;
    font-size: 0.62em;
  }

  body.cbc-homepage .msx-awards-script {
    top: 26%;
    left: -4%;
    width: 150%;
  }

  body.cbc-homepage .msx-awards-lede {
    display: block;
    max-width: none;
    margin: 0 0 3.4375vw;
    font-size: 1.171875vw;
    line-height: 1.7;
  }

  body.cbc-homepage .msx-awards-lower {
    display: grid;
    order: 0;
    margin-top: -2.65625vw;
    grid-template-columns: minmax(0, 52.55555vw) minmax(0, 39.83156vw);
    gap: 4.8vw;
    align-items: start;
  }

  body.cbc-homepage .msx-awards-left {
    display: grid;
    order: 0;
    width: auto;
    padding-top: 11.4vw;
  }

  body.cbc-homepage .msx-awards-image-wrap {
    order: 0;
    width: 42vw;
    max-width: 100%;
    margin: 0;
  }

  body.cbc-homepage .msx-awards-stats-col {
    display: grid;
    order: 0;
    width: 100%;
    gap: 3vw;
    justify-items: end;
  }

  body.cbc-homepage .msx-awards-top-marquee {
    width: 100%;
    margin-top: clamp(7px, 0.94vw, 12px);
    padding-top: clamp(5px, 0.63vw, 8px);
  }

  body.cbc-homepage .msx-awards-logo img {
    height: 2.9vw;
  }

  body.cbc-homepage .msx-awards-stats-grid {
    order: 0;
    width: 100%;
    margin: 9.15vw 0 0;
    gap: 0 5.31vw;
    transform: none;
  }

  body.cbc-homepage .msx-awards-stat {
    min-height: 10.55vw;
    padding: 0;
  }

  body.cbc-homepage .msx-awards-stat-label {
    margin-bottom: 0.78125vw;
    font-size: clamp(8px, 0.9375vw, 12px);
  }

  body.cbc-homepage .msx-awards-stat-value {
    font-size: 4.8vw;
  }
}

/*
 * Exact tablet parity for the two post-hero compositions.
 *
 * Keep the approved 1280px canvas intact and scale that single canvas as a
 * unit. This prevents the legacy 768–899px component breakpoint from
 * independently reordering or resizing its children.
 */
@supports (zoom: calc(100vw / 1280px)) {
  @media (min-width: 768px) and (max-width: 1279px) {
    body.cbc-homepage .msx-section {
      --msx-tablet-parity-scale: calc(100vw / 1280px);
      --msx-curve-height: 28px;
      left: 50%;
      right: 50%;
      width: 1280px;
      margin-right: -640px;
      margin-left: -640px;
      padding: 246px 0 56px;
      overflow: visible;
      zoom: var(--msx-tablet-parity-scale);
    }

    body.cbc-homepage .msx-wrap {
      width: 1244px;
      max-width: none;
      margin: 0 18px;
      transform: translateY(-51.2px);
    }

    body.cbc-homepage .msx-grid {
      display: grid;
      width: 1244px;
      min-height: 580px;
      grid-template-columns: 589.648px 608.266px;
      gap: 46.086px;
      align-items: start;
    }

    body.cbc-homepage .msx-copy-col {
      width: 589.648px;
      max-width: none;
      margin: 0;
      padding: 35.84px 0 0 16px;
    }

    body.cbc-homepage .msx-heading-mark {
      top: -9.216px;
      left: -31.36px;
      width: 91px;
    }

    body.cbc-homepage .msx-title {
      width: 665.594px;
      max-width: none;
      font-size: 64px;
      line-height: 0.88;
    }

    body.cbc-homepage .msx-title-line--desktop {
      display: block;
    }

    body.cbc-homepage .msx-title-line--mobile {
      display: none;
    }

    body.cbc-homepage .msx-title-display {
      width: 600px;
      max-width: 600px;
      margin-top: 6px;
      font-size: 0.46em;
      line-height: 1.04;
    }

    body.cbc-homepage .msx-body,
    body.cbc-homepage .msx-body p {
      width: 520px;
      max-width: 520px;
      font-size: 15px;
      line-height: 1.48;
    }

    body.cbc-homepage .msx-body {
      margin-top: 14px;
    }

    body.cbc-homepage .msx-body p {
      margin: 0;
    }

    body.cbc-homepage .msx-copy-col > .msx-button-wrap {
      display: inline-block;
      width: 241.711px;
      margin-top: 20px;
    }

    body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button {
      --msx-button-border: 7px;
      width: 241.711px;
      min-width: 0;
      min-height: 64px;
      padding: 9px 24px;
    }

    body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__block {
      gap: 8px;
    }

    body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__main {
      font-size: 31.2px;
      transform: none;
    }

    body.cbc-homepage .msx-copy-col > .msx-button-wrap .msx-button__script {
      font-size: 23.04px;
      transform: translateY(3.2256px) rotate(-2deg);
    }

    body.cbc-homepage .msx-media-col {
      position: relative;
      width: 608.266px;
      max-width: none;
      height: 580px;
      min-height: 580px;
      margin: 0;
    }

    body.cbc-homepage .msx-photo-main,
    body.cbc-homepage .msx-overlap-card,
    body.cbc-homepage .msx-button-wrap--mobile,
    body.cbc-homepage .msx-meta--mobile {
      display: none;
    }

    body.cbc-homepage .msx-photo-main-overlap {
      display: block;
      top: 171.775px;
      right: auto;
      left: 654.102px;
      width: 581.391px;
      aspect-ratio: 577 / 369;
      overflow: hidden;
    }

    body.cbc-homepage .msx-photo-main-overlap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body.cbc-homepage .msx-overlap-card-overflow {
      display: block;
      top: 480.09px;
      right: auto;
      left: 584.508px;
      width: 251.055px;
      overflow: hidden;
      border-radius: 24.32px;
      transform: translate3d(0, calc(var(--msx-shift, 0px) + 14.08px), 0);
    }

    body.cbc-homepage .msx-overlap-card-overflow img {
      position: static;
      display: block;
      width: 100%;
      height: 183.227px;
      aspect-ratio: 285 / 208;
      object-fit: cover;
      border-radius: inherit;
      transform: none;
    }

    body.cbc-homepage .msx-media-col > .msx-meta {
      display: grid;
      top: 439.639px;
      right: auto;
      bottom: auto;
      left: 215.82px;
      width: 440.445px;
      gap: 10px;
      translate: none;
      transform: none;
    }

    body.cbc-homepage .msx-meta-title {
      font-size: 10px;
      line-height: 1.1;
    }

    body.cbc-homepage .msx-list {
      gap: 10px;
    }

    body.cbc-homepage .msx-list li {
      padding-left: 13px;
      font-size: 10px;
      line-height: 1.22;
      white-space: nowrap;
    }

    body.cbc-homepage .msx-list li::before {
      top: 0.58em;
      width: 8px;
      height: 8px;
    }

    body.cbc-homepage .msx-section > .msx-cta-row {
      display: none;
    }

    body.cbc-homepage .msx-awards-shell {
      --msx-awards-shell-shift: 0px !important;
      --msx-awards-shell-shift-y: 40.96px !important;
      display: block;
      width: 1244px;
      margin: 70.4px 0 -15.36px;
      padding-top: 0;
      border-top: 0;
      transform: translate3d(0, 40.96px, 0) !important;
    }

    body.cbc-homepage .msx-awards-intro {
      display: grid;
      order: 0;
      width: 1244px;
      min-height: 128px;
      margin: 0;
      grid-template-columns: 672.711px 509.844px;
      gap: 61.445px;
      align-items: end;
    }

    body.cbc-homepage .msx-awards-title-wrap {
      width: 658.531px;
      min-height: 138.93px;
      margin: 0;
      padding: 0 0 0 64px;
      align-items: flex-end;
      transform: none !important;
    }

    body.cbc-homepage .msx-awards-title {
      font-size: 92.16px;
      line-height: 0.9;
    }

    body.cbc-homepage .msx-awards-title em {
      margin-top: 0;
      font-size: 0.62em;
    }

    body.cbc-homepage .msx-awards-script {
      top: 80.578px;
      left: 320px;
      width: 396.797px;
      transform: none !important;
    }

    body.cbc-homepage .msx-awards-lede {
      display: block;
      width: 509.844px;
      max-width: none;
      margin: 0 0 34px;
      font-size: 15px;
      line-height: 1.55;
      transform: none !important;
    }

    body.cbc-homepage .msx-awards-lower {
      display: grid;
      order: 0;
      width: 1244px;
      margin: -34px 0 0;
      grid-template-columns: 672.711px 509.844px;
      gap: 61.445px;
      align-items: start;
    }

    body.cbc-homepage .msx-awards-left {
      display: grid;
      order: 0;
      width: 672.711px;
      padding: 115.2px 0 0;
    }

    body.cbc-homepage .msx-awards-image-wrap {
      --msx-awards-base-x: 42px;
      --msx-awards-base-y: 0px;
      order: 0;
      width: 537.594px;
      max-width: none;
      margin: 29.44px 0 0;
      transform: translate3d(42px, 0, 0) !important;
    }

    body.cbc-homepage .msx-awards-stats-col {
      display: grid;
      order: 0;
      width: 509.844px;
      gap: 38px;
      justify-items: end;
    }

    body.cbc-homepage .msx-awards-top-marquee {
      width: 509.844px;
      margin: 12px 0 0;
      padding-top: 8px;
      transform: none !important;
    }

    body.cbc-homepage .msx-awards-logo img {
      height: 37.117px;
    }

    body.cbc-homepage .msx-awards-stats-grid {
      order: 0;
      width: 509.844px;
      margin: 22px 0 0;
      grid-template-columns: 220.922px 220.922px;
      gap: 38px 68px;
      transform: none;
    }

    body.cbc-homepage .msx-awards-stat {
      min-height: 116px;
      padding: 6px 0;
      transform: none !important;
    }

    body.cbc-homepage .msx-awards-stat-label {
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 1;
    }

    body.cbc-homepage .msx-awards-stat-value {
      font-size: 61.44px;
      line-height: 0.82;
    }
  }
}

/* Keep the desktop/tablet credentials clear of the supporting photo. */
@media (min-width: 768px) {
  body.cbc-homepage .msx-media-col > .msx-meta {
    translate: none;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.cbc-homepage .msx-media-col > .msx-meta {
    translate: 0 clamp(46px, 5vw, 54px);
  }
}

/* Final mobile rhythm for the ticker, counters, awards, and credentials. */
@media (max-width: 767px) {
  body.cbc-homepage .msx-awards-shell {
    --msx-mobile-stack-gap: clamp(60px, 17vw, 76px);
  }

  body.cbc-homepage .msx-awards-lower,
  body.cbc-homepage .msx-awards-left {
    gap: 0;
  }

  body.cbc-homepage .msx-awards-left {
    padding-top: 0;
  }

  body.cbc-homepage .msx-awards-stats-grid {
    margin-top: var(--msx-mobile-stack-gap);
  }

  body.cbc-homepage .msx-awards-image-wrap {
    margin: var(--msx-mobile-stack-gap) auto 0;
  }

  body.cbc-homepage .msx-meta--mobile {
    width: calc(100vw - 20px);
    max-width: none;
    margin: var(--msx-mobile-stack-gap) auto 0;
    text-align: center;
    justify-items: center;
  }

  body.cbc-homepage .msx-meta--mobile .msx-meta-title {
    width: 100%;
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.15;
    letter-spacing: .06em;
    text-align: center;
  }

  body.cbc-homepage .msx-meta--mobile .msx-list {
    width: 100%;
    max-width: none;
    margin: clamp(12px, 3.5vw, 16px) 0 0;
    gap: clamp(7px, 2vw, 10px);
    justify-items: stretch;
  }

  body.cbc-homepage .msx-meta--mobile .msx-list li {
    width: 100%;
    max-width: none;
    padding-left: 18px;
    font-size: clamp(13.5px, 3.7vw, 15.5px);
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.cbc-homepage .msx-meta--mobile .msx-list li::before {
    top: .55em;
    width: 5px;
    height: 5px;
  }
}
