/* Dream Digital brand layer for the exact Rayo template. */
:root {
  --accent--light: #198bd3;
  --accent-rgb--light: 25, 139, 211;
  --additional--light: #7357f6;
  --additional-rgb--light: 115, 87, 246;
  --accent--dark: #4bc3ee;
  --accent-rgb--dark: 75, 195, 238;
  --additional--dark: #7357f6;
  --additional-rgb--dark: 115, 87, 246;
  --pt-purple-rgb: 75, 195, 238;
  --pt-purple-dark-rgb: 9, 53, 88;
}

html,
body {
  overflow-x: clip;
}

.mxd-logo {
  width: 17rem;
  height: 5.6rem;
  background: url("../img/dream/logo.png") left center / contain no-repeat;
}

.mxd-logo__image,
.mxd-logo__text {
  display: none;
}

.divider-image-10 {
  background-image: linear-gradient(90deg, rgba(5, 10, 18, .12), rgba(5, 10, 18, .3)), url("../img/portfolio/boys-champions-vision-mission.jpeg");
  background-position: center;
}

.divider-image-1,
.divider-image-3,
.divider-image-8,
.divider-image-9 {
  background-image: linear-gradient(90deg, rgba(5, 10, 18, .12), rgba(5, 10, 18, .3)), url("../img/portfolio/boys-champions-strategy-cover.jpeg");
  background-position: center;
}

.headline-img-06::before {
  background-image: url("../img/portfolio/chaise-hero-phone.jpeg");
}

.headline-img-02::before {
  background-image: url("../img/portfolio/kuepass-brand-kit.jpeg");
}

.image-values-1 {
  background-image: url("../img/portfolio/ambassadors-brand-deck.jpeg");
}

.image-values-2 {
  background-image: url("../img/portfolio/chaise-marketplace-screens.jpeg");
}

.mxd-promo__bg {
  background-image: linear-gradient(135deg, rgba(25, 139, 211, .9), rgba(115, 87, 246, .84)), url("../img/portfolio/ambassadors-audience-deck.jpeg");
  background-position: center;
  background-size: cover;
}

.headline-img-07::before {
  background-image: url("../img/portfolio/custom/product-design/reeves-africa-website.jpg");
}

.preview-image-1 { background-image: url("../img/portfolio/custom/logos/micos-pastries.jpg"); }
.preview-image-2 { background-image: url("../img/portfolio/chaise-hero-phone.jpeg"); }
.preview-image-3 { background-image: url("../img/portfolio/boys-champions-strategy-cover.jpeg"); }
.preview-image-4 { background-image: url("../img/portfolio/ambassadors-brand-deck.jpeg"); }
.preview-image-5 { background-image: url("../img/portfolio/kuepass-brand-kit.jpeg"); }
.preview-image-6 { background-image: url("../img/portfolio/viicsoft-shirts.jpeg"); }
.preview-image-7 { background-image: url("../img/portfolio/custom/product-packaging/ripples-banga-spice.jpg"); }
.preview-image-8 { background-image: url("../img/portfolio/custom/worship/church-afro-gospel.jpg"); }
.preview-image-9 { background-image: url("../img/portfolio/custom/brand-mockups/nxtdoor-guidelines.png"); }
.preview-image-10 { background-image: url("../img/portfolio/custom/avatars/avatar-ok.png"); }
.preview-image-11 { background-image: url("../img/portfolio/custom/product-design/reeves-africa-website.jpg"); }

.blog-preview-image-1 {
  background-image: linear-gradient(180deg, transparent, rgba(5, 10, 18, .16)), url("../img/portfolio/chaise-product-flow.jpeg");
}

.blog-preview-image-2 {
  background-image: linear-gradient(180deg, transparent, rgba(5, 10, 18, .16)), url("../img/portfolio/chiade-brand-guide.jpeg");
}

.blog-preview-image-3 {
  background-image: linear-gradient(180deg, transparent, rgba(5, 10, 18, .16)), url("../img/portfolio/boys-champions-problem-statement.jpeg");
}

.mxd-pinned__img,
.mxd-pinned__img-mobile img,
.marquee__item img,
.mxd-hero-05__worksblock > img,
.works-template .works-template__image-grid img,
.works-template .mxd-promo__images img,
.insights-template .post-featured__thumb img,
.insights-template .post-simple__thumb img,
.insights-template .recent-post__thumb img,
.insights-template .widget__image img,
.insights-template .mxd-promo__images img {
  object-fit: cover;
}

.insights-template .post-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 10, 18, .72), rgba(5, 10, 18, .18) 62%, rgba(5, 10, 18, .38));
}

.insights-template .post-featured__categories,
.insights-template .post-featured__content {
  z-index: 1;
}

.insights-template .post-featured__meta img,
.insights-template .post-simple__meta img,
.insights-template .recent-post__meta img,
.insights-template .mxd-point-subtitle img {
  width: 1.6rem;
  height: 1.6rem;
}

.insights-template .post-simple__descr > .t-small {
  max-width: 68rem;
  color: var(--t-muted);
}

.insights-template .widget__image {
  display: block;
  min-height: 42rem;
}

.insights-template .widget__image img {
  width: 100%;
  height: 100%;
}

.mxd-hero-05-videoblock__video,
.menu-promo__video {
  background: url("../img/portfolio/chaise-hero-phone.jpeg") center / cover no-repeat;
}

.mxd-hero-05-videoblock__video video,
.menu-promo__video video {
  visibility: hidden;
}

.btn-rotating__image {
  object-fit: contain;
  background: transparent;
  padding: .45rem;
  filter: drop-shadow(0 1rem 2.4rem rgba(25, 139, 211, .22));
}

.mxd-promo__icon img {
  object-fit: contain;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 1.2rem 2.6rem rgba(0, 0, 0, .34));
}

.works-template__intro {
  max-width: 62rem;
  margin-top: 2.4rem;
  color: var(--t-muted);
}

.pricing-template__intro {
  max-width: 76rem;
  margin-top: 2.4rem;
  color: var(--t-muted);
}

.pricing-template__cards {
  row-gap: 1.5rem;
}

.pricing-template .mxd-pricing-table__item {
  padding: .75rem;
}

.pricing-template .mxd-pricing-table__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.6rem;
}

.pricing-template .pricing-header__descr {
  max-width: 36rem;
  min-height: 6.4rem;
}

.pricing-template__from {
  margin-bottom: .6rem;
  color: var(--t-muted);
  font-size: 1.6rem;
}

.pricing-template .pricing-data__header {
  margin-bottom: 2rem;
}

.pricing-template .pricing-data__price {
  min-height: 8.2rem;
}

.pricing-template .pricing-data__num {
  align-items: baseline;
}

.pricing-template .pricing-data__amount {
  font-size: clamp(5rem, 5.2vw, 7rem);
}

.pricing-template .pricing-data__amount--custom {
  font-size: clamp(3.8rem, 4vw, 5.2rem);
  letter-spacing: -0.08rem;
}

.pricing-template .pricing-data__num--custom {
  min-height: 6.4rem;
  align-items: center;
}

.pricing-template .pricing-data__features {
  padding-top: .4rem;
}

.pricing-template .mxd-check-list li + li {
  margin-top: 1rem;
}

.pricing-template .mxd-pricing-table__btn {
  margin-top: 2rem;
}

.pricing-template .padding-mtext {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pricing-template .marquee__text {
  font-size: clamp(4.8rem, 9vw, 9rem);
  line-height: .96;
}

.pricing-template .mxd-promo__content {
  gap: 3rem;
  margin-top: 8rem;
  margin-bottom: 9rem;
}

.pricing-template .mxd-promo__caption {
  font-size: clamp(4rem, 7vw, 8.6rem);
  line-height: 1;
}

.pricing-template__process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.pricing-template__process-card {
  min-height: 100%;
  padding: 2.4rem;
  border: 1px solid var(--stroke-elements);
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
}

.pricing-template__process-card span {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--t-muted);
  font-size: 1.2rem;
  letter-spacing: .08em;
}

.pricing-template__process-card h3 {
  margin-bottom: 1.2rem;
}

.pricing-template__process-card p {
  color: var(--t-muted);
}

.works-template__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

.works-template__nav a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border: 1px solid var(--stroke-elements);
  border-radius: var(--_radius-m);
  color: var(--t-bright);
  text-decoration: none;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.works-template__nav a:hover {
  color: var(--base);
  background-color: var(--base-opp);
  border-color: var(--base-opp);
  transform: translateY(-0.2rem);
}

.works-template__nav span {
  flex: 0 0 auto;
  color: var(--t-muted);
  font-size: 1.2rem;
  letter-spacing: .04em;
}

.works-template__collections {
  display: grid;
  gap: 7rem;
}

.works-template__collection {
  display: grid;
  gap: 3rem;
  padding-top: 6rem;
  border-top: 1px solid var(--stroke-elements);
}

.works-template__collection-copy {
  max-width: 86rem;
}

.works-template__collection-copy p {
  margin-top: 1.8rem;
  color: var(--t-muted);
}

.works-template__image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.works-template__image-grid img {
  width: 100%;
  height: 32rem;
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
}

.works-template__image-grid--posters img {
  height: 48rem;
  object-position: top center;
}

.works-template__image-grid--avatars img {
  object-fit: contain;
  padding: 2rem;
}

@media only screen and (min-width: 768px) {
  .works-template__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-template__image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-template__process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1200px) {
  .works-template__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .works-template__image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .works-template__image-grid img {
    height: 38rem;
  }

  .works-template__image-grid--posters img {
    height: 54rem;
  }
}

.mxd-footer__svg-v2 {
  display: none;
}

.mxd-footer__fullwidth-text {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}

.mxd-footer__fullwidth-text::before {
  content: "Dream Digital";
  display: inline-block;
  color: currentColor;
  font-family: var(--_font-accent);
  font-weight: var(--fw-bold);
  font-size: clamp(5.2rem, 11.6vw, 16rem);
  line-height: .82;
  letter-spacing: -.07em;
}

.mxd-footer__fullwidth-text::after {
  content: "";
  display: none;
}

@media only screen and (max-width: 767px) {
  .mxd-logo {
    width: 12rem;
    height: 4.6rem;
  }

  .pricing-template .padding-mtext {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .pricing-template .marquee__text {
    font-size: clamp(3.4rem, 11vw, 4.8rem);
  }

  .pricing-template .mxd-promo__inner {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  .pricing-template .mxd-promo__content {
    gap: 2.4rem;
    margin-top: 5.6rem;
    margin-bottom: 6.4rem;
  }

  .pricing-template .mxd-promo__bg {
    right: 0;
    width: 100%;
    opacity: .32;
  }

  .pricing-template .mxd-promo__caption {
    font-size: clamp(3.2rem, 10vw, 4.6rem);
  }

  .mxd-footer__fullwidth-text {
    align-items: center;
  }

  .mxd-footer__fullwidth-text::before {
    font-size: clamp(3.8rem, 14vw, 6.4rem);
  }
}
.main-menu__simple {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu__simple .main-menu__link {
  display: inline-flex;
}

.main-menu__content > .main-menu__accordion {
  display: none !important;
}

.mxd-menu__contain {
  overflow-y: auto;
}

/* Unified Dream Digital menu overlay
   Keeps the original Rayo animation, but matches the dark navigation style
   used across the rest of the site. */
.mxd-menu__wrapper {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background-color: #161616 !important;
}

.mxd-menu__base {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  background-color: #161616 !important;
}

.mxd-menu__contain {
  min-height: 100vh !important;
  min-height: 100svh !important;
  background-color: #161616 !important;
}

.mxd-nav__hamburger.nav-open .hamburger__base,
.mxd-menu__contain > .hamburger__base {
  background-color: #161616 !important;
  border-radius: 0 !important;
}

.mxd-nav__hamburger.nav-open .hamburger__line {
  background-color: #ffffff !important;
}

.mxd-menu__caption {
  display: none !important;
}

.mxd-menu__right,
.mxd-menu__data {
  display: none !important;
}

.mxd-menu__left {
  width: 100% !important;
}

.main-menu__simple {
  gap: .35rem;
}

.main-menu__simple .main-menu__link,
.main-menu__simple .main-menu__link .btn-caption,
.main-menu__simple .main-menu__link .btn-caption span {
  color: #ffffff !important;
}

.main-menu__simple .main-menu__link {
  text-decoration: none;
}

.mxd-menu__data p,
.mxd-menu__data p a {
  color: rgba(255, 255, 255, .72) !important;
}

.mxd-menu__data p a {
  background-image: linear-gradient(to right, rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)), linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) !important;
}

@media (max-height: 600px) {
  .mxd-menu__caption {
    margin-bottom: 1.2rem;
  }

  .main-menu__simple .main-menu__link,
  .main-menu__simple .main-menu__link .btn-caption {
    height: 3rem;
    line-height: 3rem;
    font-size: 2.8rem;
  }
}
