/* Import Playfair Display font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* Hide Christmas/Advent Calendar banner - SAFE SELECTORS ONLY */
#bf-banner {
  display: none !important;
}

.bf-banner {
  display: none !important;
}

/* Remove body padding for banner */
body.bf-banner-active {
  padding-top: 0 !important;
}

/* Hide any advent/christmas related elements by ID or class */
#snow-container {
  display: none !important;
}

/* Hide links to gift.uncommonable.com */
a[href*="gift.uncommonable"] {
  display: none !important;
}

/* Additional banner hiding - target by common banner classes/IDs */
.site-banner,
.announcement-banner,
.holiday-banner,
.seasonal-banner,
.top-banner,
.header-banner,
.notification-banner,
#announcement-banner,
#holiday-banner,
#top-banner {
  display: none !important;
}

/* Hide any element with the gift link */
[href*="gift.uncommonable"] {
  display: none !important;
}

/* Banner hiding removed - was too aggressive and hiding essential elements */

/* Fix portfolio carousel image cropping - preserve aspect ratio */
.other-projects .item img {
  height: auto !important;
  max-height: 500px;
  width: 100%;
  object-fit: contain !important;
}

/* Fix portfolio main image being cut off on mobile */
@media (max-width: 767px) {
  /* Override Bootstrap container constraints */
  .portfolio-full-width .container.image,
  .node--type-portfolio .container.image {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .portfolio-full-width .container.image img,
  .node--type-portfolio .container.image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* Fix mobile hamburger menu icon - only show on mobile */
@media (max-width: 991px) {
  .navbar-toggler {
    display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 0.75rem !important;
  }

  .navbar-toggler .fas.fa-bars {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-size: 1.5rem !important;
    color: #fff !important;
  }

  .navbar-toggler .fas.fa-bars:before {
    content: "\f0c9" !important;
  }
}

/* Hide navbar-toggler on desktop */
@media (min-width: 992px) {
  .navbar-toggler,
  button.navbar-toggler {
    display: none !important;
  }
}


/* Make UNCOMMON word Poppins bold in homepage slideshow */
.carousel-item h2 .montserrat-bold,
.home-banner h2 .montserrat-bold,
h2 .montserrat-bold,
.montserrat-bold {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* Reduce line height in homepage slider to bring UNCOMMON and MARKETING closer */
.home-banner-3 .item-content h2,
.carousel-item h2,
.home-banner h2 {
  line-height: 70px !important;
}

/* Tighter line height on mobile for closer vertical spacing */
@media (max-width: 991.98px) {
  .home-banner-3 .item-content h2,
  .home-banner-3 .carousel-item h2,
  .carousel-item h2,
  .home-banner h2 {
    line-height: 45px !important;
    font-size: inherit !important;
  }

  /* Make tagline bigger and move it higher on mobile */
  .home-banner-3 .item-content > span,
  .carousel-item .item-content > span {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    display: block !important;
    line-height: 1.6 !important;
  }

  /* Move entire item-content higher */
  .home-banner-3 .item-content,
  .carousel-item .item-content {
    transform: translateY(-30px) !important;
  }
}

@media (max-width: 767.98px) {
  .home-banner-3 .item-content h2,
  .home-banner-3 .carousel-item h2,
  .carousel-item h2,
  .home-banner h2 {
    line-height: 45px !important;
  }

  .home-banner-3 .item-content > span,
  .carousel-item .item-content > span {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
  }

  .home-banner-3 .item-content,
  .carousel-item .item-content {
    transform: translateY(-30px) !important;
  }
}

@media (max-width: 575.98px) {
  .home-banner-3 .item-content h2,
  .home-banner-3 .carousel-item h2,
  .carousel-item h2,
  .home-banner h2 {
    line-height: 45px !important;
  }

  .home-banner-3 .item-content > span,
  .carousel-item .item-content > span {
    font-size: 20px !important;
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
  }

  .home-banner-3 .item-content,
  .carousel-item .item-content {
    transform: translateY(-40px) !important;
  }
}

@media (max-width: 480px) {
  .home-banner-3 .item-content h2,
  .home-banner-3 .carousel-item h2,
  .carousel-item h2,
  .home-banner h2 {
    line-height: 45px !important;
    font-size: 34px !important;
  }

  .home-banner-3 .item-content > span,
  .carousel-item .item-content > span {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }

  .home-banner-3 .item-content,
  .carousel-item .item-content {
    transform: translateY(-40px) !important;
  }
}

@media (max-width: 400px) {
  .home-banner-3 .item-content h2,
  .home-banner-3 .carousel-item h2,
  .carousel-item h2,
  .home-banner h2 {
    line-height: 45px !important;
  }

  .home-banner-3 .item-content > span,
  .carousel-item .item-content > span {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }

  .home-banner-3 .item-content,
  .carousel-item .item-content {
    transform: translateY(-40px) !important;
  }
}

/* Hide visit-link arrow if link is empty */
.visit-link:empty,
.visit-link svg:only-child {
  display: none !important;
}

/* Make parent menu items with children clickable on desktop */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown .nav-link {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Show dropdown on hover instead of click */
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Remove Bootstrap's click-to-toggle behavior */
  .navbar-nav .nav-item.dropdown .dropdown-toggle::after {
    pointer-events: none !important;
  }
}

/* Ensure Let's Get Uncommon button text stays on one line */
.btn,
.btn-primary,
.btn-style-1,
.btn-style-1-lg,
.btn-style-2,
.btn-style-2-lg {
  white-space: nowrap !important;
  min-width: max-content !important;
  width: auto !important;
}

/* Ensure button spans also don't wrap */
.btn span,
.btn-primary span,
.btn-style-1 span,
.btn-style-1-lg span,
.btn-style-2 span,
.btn-style-2-lg span {
  white-space: nowrap !important;
}

/* Add padding between button text and arrow icon */
.btn span:not(.icon),
.btn-primary span:not(.icon),
.btn-style-1 span:not(.icon),
.btn-style-1-lg span:not(.icon),
.btn-style-2 span:not(.icon),
.btn-style-2-lg span:not(.icon) {
  padding-right: 8px !important;
}

.btn .icon,
.btn-primary .icon,
.btn-style-1 .icon,
.btn-style-1-lg .icon,
.btn-style-2 .icon,
.btn-style-2-lg .icon {
  margin-left: 8px !important;
}

/* Fix portfolio/case study images being cut off */
.portfolio-full-width .image img,
.portfolio-full-width.portfolio-sidebar .image img {
  object-fit: contain !important;
  height: auto !important;
  max-height: 680px !important;
  width: 100% !important;
}

.portfolio-grid-2-column .item-content img,
.portfolio-grid-3-column .item-content img,
.portfolio-grid-4-column .item-content img {
  object-fit: contain !important;
  height: auto !important;
  width: 100% !important;
}

/* On case studies page, hide the overlay completely so images are clickable */
.page-node-74 .portfolio-tab .item-content .overlay {
  display: none !important;
}

/* Make sure the main image link is clickable */
.page-node-74 .portfolio-tab .item-content > a {
  display: block !important;
  cursor: pointer !important;
}

/* Set content area headings to navy (excludes banners/sliders with white text) */
.services-details-sidebar .full-width .content h1,
.services-details-sidebar .full-width .content h2,
.services-details-sidebar .full-width .content h3,
.services-details-sidebar .full-width .content h4,
.services-details-sidebar .full-width .content h5,
.services-details-sidebar .full-width .content h6,
.services-details-full-width .full-width .content h1,
.services-details-full-width .full-width .content h2,
.services-details-full-width .full-width .content h3,
.services-details-full-width .full-width .content h4,
.services-details-full-width .full-width .content h5,
.services-details-full-width .full-width .content h6,
.portfolio-full-width .full-width .content h1,
.portfolio-full-width .full-width .content h2,
.portfolio-full-width .full-width .content h3,
.portfolio-full-width .full-width .content h4,
.portfolio-full-width .full-width .content h5,
.portfolio-full-width .full-width .content h6,
.about .content h1,
.about .content h2,
.about .content h3,
.about .content h4,
.about .content h5,
.about .content h6,
.node--type-service .content h1,
.node--type-service .content h2,
.node--type-service .content h3,
.node--type-service .content h4,
.node--type-service .content h5,
.node--type-service .content h6,
.node--type-service h1,
.node--type-service h2,
.node--type-service h3,
.node--type-service h4,
.node--type-service h5,
.node--type-service h6,
.node--type-service .full-width h1,
.node--type-service .full-width h2,
.node--type-service .full-width h3,
.node--type-service .full-width h4,
.node--type-service .full-width h5,
.node--type-service .full-width h6,
.node--type-service .section h1,
.node--type-service .section h2,
.node--type-service .section h3,
.node--type-service .section h4,
.node--type-service .section h5,
.node--type-service .section h6,
.services-details-sidebar h1,
.services-details-sidebar h2,
.services-details-sidebar h3,
.services-details-sidebar h4,
.services-details-sidebar h5,
.services-details-sidebar h6,
.services-details-full-width h1,
.services-details-full-width h2,
.services-details-full-width h3,
.services-details-full-width h4,
.services-details-full-width h5,
.services-details-full-width h6,
.node--type-portfolio .content h1,
.node--type-portfolio .content h2,
.node--type-portfolio .content h3,
.node--type-portfolio .content h4,
.node--type-portfolio .content h5,
.node--type-portfolio .content h6,
.sidebar h3,
.about-style-2-who-we-are h2,
.about-style-2-who-we-are h3,
.about-style-2-who-we-are span,
.pages-title h2,
.pages-title h3,
.pages-title span,
.services-3 .home-3-title h2,
.services-3 .home-3-title h3,
.services-3 .home-3-title span,
.services-3 h2,
.services-3 h3,
.services-style-3 h2,
.services-style-3 h3,
.other-projects .title h2,
.other-projects .title span,
.cta-1 h2,
.cta-2 h2,
.node--type-service .content strong,
.node--type-service strong,
.content strong,
ul strong,
ol strong,
.list-style-2 strong {
  color: #062139 !important;
}

/* Keep banner text white on all pages */
.page-banner h1,
.page-banner h2,
.page-banner h3,
.page-banner h4,
.page-banner h5,
.page-banner h6,
.page-banner .title h1,
.page-banner .title h2,
.page-banner .title h3,
.page-banner .title h4,
.page-banner .title h5,
.page-banner .title h6 {
  color: #ffffff !important;
}

/* Apply Playfair Display to all headings and buttons */
h1, h2, h3, h4, h5, h6,
.other-projects .title h2,
.other-projects h2,
.services-style-3 .item h3,
.services-3 .item h3,
.services-3 .item-content h3,
.services-3 .item-content a h3,
.services-montserrat .item h3,
.services-montserrat .item-content h3,
.services-montserrat .item-content a h3,
.services-3 h3,
.services-style-3 h3,
.home-3-title h2,
.home-3-title span,
.services-3 .home-3-title h2,
.pages-title h2,
.pages-title h4,
.pages-title span,
.about-style-2-who-we-are .pages-title h2,
.about-style-2-who-we-are h2,
.about-style-2-who-we-are .content h4,
.about-style-2-who-we-are .content h4 span,
.our-features-3 .item h3,
.our-features-3 h2,
.our-features-3 span,
.home-banner-3 h2,
.carousel-item h2,
.carousel-item .item-content h2,
.list-style-2 li strong,
.list-style-2 .list-item strong,
ul strong,
ol strong,
p strong,
.content strong,
strong,
.content ul li,
.content ol li,
.portfolio-full-width ul li,
.portfolio-full-width ol li,
.btn,
.btn-primary,
.btn-style-1,
.btn-style-1-lg,
.btn-style-2,
.btn-style-2-lg,
.read-more-btn,
.read-more-btn span,
.search-btn,
.hamburger-btn,
.webform-button--submit,
button,
.button,
.button--primary,
input[type="submit"] {
  font-family: 'Playfair Display', serif !important;
}

/* Fix list-style-2 checkmark overlap issue */
.list-style-2 .list-item {
  padding-left: 30px !important;
  display: block;
}

.list-style-2 li {
  position: relative !important;
  list-style: none !important;
}

.list-style-2 li span {
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
}

.list-style-2 li strong {
  display: block;
  margin-bottom: 5px;
}

.list-style-2 li p {
  margin-bottom: 0 !important;
}

/* Style CTAs when rendered inside service node content - remove blue background */
.node--type-service .cta-1.history-cta,
.node--type-service section.history-cta,
section.cta-1.history-cta {
  background-color: transparent !important;
  background: none !important;
  padding: 40px 0 !important;
}

/* Override white color for all elements in history-cta */
.node--type-service .cta-1.history-cta *,
.node--type-service section.history-cta *,
section.cta-1.history-cta * {
  color: inherit !important;
}

/* Make CTA heading navy blue */
.node--type-service .cta-1.history-cta h2,
.node--type-service section.history-cta h2,
section.cta-1.history-cta h2 {
  color: #062139 !important;
  width: 100% !important;
  margin-bottom: 30px !important;
}

/* Keep flexbox layout but center everything */
.node--type-service .cta-1.history-cta .item,
.node--type-service section.history-cta .item,
section.cta-1.history-cta .item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 20px !important;
}

/* Style button properly with primary color */
.node--type-service .cta-1.history-cta .btn,
.node--type-service section.history-cta .btn,
section.cta-1.history-cta .btn,
.node--type-service .cta-1.history-cta a.btn-style-1-lg,
.node--type-service section.history-cta a.btn-style-1-lg,
section.cta-1.history-cta a.btn-style-1-lg {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  padding: 15px 30px !important;
}

/* Ensure button text and icon are white */
.node--type-service .cta-1.history-cta .btn span,
.node--type-service section.history-cta .btn span,
section.cta-1.history-cta .btn span,
.node--type-service .cta-1.history-cta .btn svg,
.node--type-service section.history-cta .btn svg,
section.cta-1.history-cta .btn svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Fix hover behavior for CTA buttons */
.node--type-service .cta-1.history-cta .btn:hover,
.node--type-service section.history-cta .btn:hover,
section.cta-1.history-cta .btn:hover,
.node--type-service .cta-1.history-cta a.btn-style-1-lg:hover,
.node--type-service section.history-cta a.btn-style-1-lg:hover,
section.cta-1.history-cta a.btn-style-1-lg:hover {
  background-color: #ffffff !important;
  border: 2px solid var(--primary-color) !important;
}

.node--type-service .cta-1.history-cta .btn:hover span,
.node--type-service section.history-cta .btn:hover span,
section.cta-1.history-cta .btn:hover span {
  color: var(--primary-color) !important;
}

.node--type-service .cta-1.history-cta .btn:hover .icon,
.node--type-service section.history-cta .btn:hover .icon,
section.cta-1.history-cta .btn:hover .icon {
  background-color: var(--primary-color) !important;
}

.node--type-service .cta-1.history-cta .btn:hover svg,
.node--type-service section.history-cta .btn:hover svg,
section.cta-1.history-cta .btn:hover svg,
.node--type-service .cta-1.history-cta .btn:hover svg path,
.node--type-service section.history-cta .btn:hover svg path,
section.cta-1.history-cta .btn:hover svg path {
  fill: #ffffff !important;
}

/* Replace Services Sidebar bullets with custom Uncommon logo mark */
.list-style-3 li span::before {
  background: url(/sites/default/files/2025-11/Uncommon_LogoMarkNavy.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 18px !important;
  background-position: center !important;
  width: 22px !important;
  height: 22px !important;
  top: -2px !important;
  left: -5px !important;
}

.lists .list-style-3 li span::before {
  background: url(/sites/default/files/2025-11/Uncommon_LogoMarkNavy.svg) !important;
  background-size: 15px !important;
  background-position: center !important;
  top: -2px !important;
}

/* Match services sidebar text color to navy logo mark */
.list-style-3 li p,
.list-style-3 li a,
.list-style-3 li {
  color: #112236 !important;
}

/* Set services sidebar list to Playfair Display */
.list-style-3 li,
.list-style-3 li p,
.list-style-3 li a {
  font-family: 'Playfair Display', serif !important;
}

/* Reduce page-banner height to half site-wide and vertically center text */
.page-banner {
  height: 280px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 0 0 0 !important;
  margin: 0 !important;
}

/* Ensure dark overlay doesn't interfere */
.page-banner::before {
  height: 280px !important;
}

/* Move title down within the extended banner */
.page-banner .title {
  transform: translateY(24px) !important;
}

/* Reset all nested wrapper elements to not interfere */
.page-banner > *:not(.title),
.page-banner .region,
.page-banner .region-breadcrumb,
.page-banner .block,
.page-banner .views-element-container,
.page-banner .content,
.page-banner .view,
.page-banner .view-content,
.page-banner .view-dom-id,
.page-banner .container,
.page-banner > div {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Absolutely position and center the title */
.page-banner .title {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 20px !important;
  margin: 0 !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.page-banner .title h1 {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
}

/* Responsive adjustments for page-banner */
@media (max-width: 991.98px) {
  .page-banner {
    height: 340px !important;
    padding: 100px 0 0 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-banner::before {
    height: 340px !important;
  }
}

@media (max-width: 575.98px) {
  .page-banner {
    height: 340px !important;
    padding: 95px 0 0 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-banner::before {
    height: 340px !important;
  }
}

/* Reduce spacing between page-banner and page content */
.section {
  padding-top: 27px !important;
}

@media (max-width: 991.98px) {
  .section {
    padding-top: 55px !important;
  }
}

/* Make all pricing boxes the same height */
.pricing-style-3 .item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.pricing-style-3 .item-content {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.pricing-style-3 .item-content ul {
  flex-grow: 1 !important;
  min-height: 300px !important;
}


/* Reset navigation to top without Christmas banner */
.navigation-sticky,
.navigation-sticky.sticky-nav,
.header .navigation-sticky,
.sticky-nav.fixed-top {
  top: 0 !important;
  z-index: 1030 !important;
}