/* compiled by scssphp v0.0.10 on Wed, 30 Jul 2025 05:59:20 -0700 (0.2423s) */

@import url();
html, body {
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
  font-size: 100%;
  text-align: left;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  color: #212120;
  background-color: white; }

section {
  all: unset;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important; }

.nav-bar-mobile {
  display: none; }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: white; }

.mobile-menu.show {
  display: flex; }

.nav-bar {
  background-color: white;
  /* space above/below */
  padding: 10px 0;
  /* optional */
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  width: 100%;
  z-index: 1000; }

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  /* pushes in the logo and nav */
  padding: 0 100px; }

.logo img {
  /* or whatever suits your design */
  height: 40px;
  transition: transform 0.3s ease; }

.logo img:hover {
  transform: scale(1.05); }

.logo {
  width: 65;
  height: 65;
  position: relative;
  margin-top: -10px; }

.logo-image {
  position: absolute;
  /* overhangs upward */
  top: 0px;
  left: 0;
  height: 120px !important;
  z-index: 1001; }

.nav-list {
  display: flex;
  /* space between nav items */
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center; }

.nav-list a {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
  font-weight: 500;
  transition: transform 0.3s ease;
  color: #000;
  text-decoration: none; }

.nav-list a:hover {
  background: #bfbfbf;
  color: #fff;
  cursor: pointer;
  transform: scale(1.05); }

.nav-list .contact {
  background: #000;
  color: #fff;
  font-weight: bold; }

.page {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 75px 0px 0px 0px; }

.page h1 {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -2px;
  margin: 0px;
  width: 100%;
  text-align: Center;
  width: 400px;
  position: relative;
  margin: 0px auto;
  line-height: 38px; }

.page h2 {
  font-size: 20px;
  position: relative;
  margin: 20px auto 0px auto;
  color: #6b6b6b;
  font-weight: normal;
  width: 350px;
  text-align: Center; }

.propCard {
  background: white;
  width: 200px;
  border-radius: 20px;
  float: left;
  margin-right: 20px; }

.powerStatement, .flatEdgeBanner, .clientScroll, .basics, .powerfulAnswer, .sixD, .focusPeople, .testimonials, .propsPanel, .footer {
  display: flex; }

.powerStatement {
  background: #f7f5fe;
  height: 900px;
  background-image: url('../images/squiggle-1.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1500px 500px;
  margin-top: -140px; }

.gradient-text {
  background: linear-gradient(to right, #f49f93, #5b28a7);
  background-position: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.2em; }

.electric-blue-grad {
  background: linear-gradient(to right, #5bd8dd, #679bc7);
  background-position: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.2em; }

.gradient-text2 {
  background: linear-gradient(90deg, #ff8a80, #c95adb, #673ab7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.2em;
  display: inline-block; }

.gradient-text3 {
  background: linear-gradient(90deg, #ff8a80, #c95adb, #673ab7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.2em; }

.visionStatement {
  display: flex;
  margin: 550 auto 0 auto;
  width: 900px; }

.visionStatement h1 {
  font-weight: 500;
  font-size: 70px;
  width: 100%;
  line-height: 65px;
  letter-spacing: -2px;
  position: relative;
  z-index: 1;
  transition: transform 0.1s ease-out; }

.intro {
  background: #fff; }

.textBanner {
  max-width: 1000px;
  height: 450px;
  margin: 100px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  width: 100%; }

.midSize {
  color: #fff;
  font-size: 25px;
  padding: 0px;
  background: orange;
  justify-content: flex-end;
  display: flex;
  flex-direction: column; }

.glassPane {
  width: 320px;
  border-radius: 20px 0px 0px 20px;
  display: flex;
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
  padding: 40px 60px 40px 40px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column; }

.imagePane {
  flex: 1;
  border-radius: 0px 20px 20px 0px;
  color: #fff;
  font-size: 25px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 20px; }

.paulHeathImage {
  background: url('../resources/paulSplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.paulHeathGlass {
  background: url('../resources/paulGlass3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.kevinImage {
  background: url('../resources/kevinSplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.kevinGlass {
  background: url('../resources/kevinGlass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.nameLabel {
  font-size: 17px;
  z-index: 100; }

.right {
  text-align: right; }

.clientScroll {
  display: flex;
  flex-direction: column;
  padding: 200px 0px; }

.clientScroll .statement {
  margin: 0px auto;
  color: #fff;
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  line-height: 38px;
  letter-spacing: -2px;
  width: 350px; }

.clientScroll a {
  color: #fff;
  margin: 30px auto 0px auto;
  text-decoration: none; }

.seeWhat {
  margin-top: 30px; }

.gradOutline {
  margin: 50px auto 0px auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  /* fully rounded pill */
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: #b8b8b8;
  /* solid background */
  /* gradient border */
  background: linear-gradient(#1d1c22, #1d1c22) padding-box, linear-gradient(to right, #f49f93, #5b28a7) border-box;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.6s ease; }

.deeperprops {
  padding-left: 20px !important;
  color: #fff !important; }

.gradOutline:hover {
  /* warmer hover gradient */
  background: linear-gradient(#1d1c22, #1d1c22) padding-box, linear-gradient(to right, #ff9a8b, #fad0c4) border-box;
  /* soft glow on hover */
  box-shadow: 0 0 12px rgba(255, 95, 109, 0.3);
  /* subtle lift */
  transform: translateY(-3px);
  color: #fff;
  transform: scale(1.02); }

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 4s ease-out, transform 4s ease-out; }

.fade-in.visible {
  opacity: 1;
  transform: translateY(0); }

.clientScrollList {
  margin: 50px 0px 0px 0px;
  overflow: hidden;
  width: 100%;
  padding: 20px 0; }

.logo-track {
  display: flex;
  width: 200%;
  animation: scrollLogos 60s linear infinite; }

.logo-group {
  display: flex;
  gap: 60px; }

.logo-track img {
  height: 20px;
  object-fit: contain;
  /* optional styling */
  filter: grayscale(100%) brightness(1.2); }

.basicPanel {
  max-width: 1000px;
  min-height: 450px;
  background: #6b6b6b;
  margin: 100px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row; }

.leftPanel {
  background: #e4e4e4;
  flex: 1.5;
  border-radius: 20px 0px 0px 20px;
  display: flex;
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
  padding: 70px;
  justify-content: center;
  display: flex;
  flex-direction: column; }

.rightPanel {
  background: #3f395d;
  flex: 1;
  border-radius: 0px 20px 20px 0px;
  color: #fff;
  font-size: 25px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 40px; }

.lead-head {
  font-size: 25px;
  letter-spacing: 0px;
  color: #161616; }

.lead {
  font-size: 15px;
  letter-spacing: 0px;
  width: 60%;
  color: #8a8a8a;
  margin: 5px 0px; }

.parts {
  display: flex;
  gap: 10px;
  margin-top: 20px; }

.part {
  background: white;
  border-radius: 15px;
  color: #000;
  flex: 1;
  overflow: hidden; }

.shot {
  height: 100px;
  overflow: hidden; }

.part img {
  width: 100%; }

.part .title {
  font-size: 16px;
  letter-spacing: 0px;
  padding: 10px;
  font-weight: 500; }

.part .desc {
  font-size: 14px;
  letter-spacing: 0px;
  color: #adadad;
  padding: 10px;
  font-weight: 400;
  letter-spacing: 0px; }

.quote {
  width: 85%; }

.kevQuote img {
  width: 150px;
  margin-bottom: 30px; }

.quoteText {
  font-size: 23px;
  font-weight: 500;
  line-height: 23px; }

.attribute {
  font-size: 14px;
  margin-top: 20px; }

.powerfulAnswer {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  padding: 120px 40px;
  box-sizing: border-box; }

.powerfulAnswer h2 {
  width: 325px;
  margin: 20 auto 0 auto;
  text-align: center;
  color: #6e6e6e;
  font-weight: 500;
  letter-spacing: -0.5;
  line-height: 20px; }

.usps {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 60px auto;
  max-width: 1000px; }

.usps .tile {
  background: #f3f3f3;
  border-radius: 20px;
  flex: 1;
  padding: 70px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer; }

.usps .tile:hover {
  transform: scale(1.05); }

.usps .title {
  font-size: 18px;
  letter-spacing: 0px;
  padding: 20px 0px 0px 10px;
  font-weight: 500;
  margin: 0px;
  justify-content: center; }

.usps .desc {
  font-size: 14px;
  letter-spacing: 0px;
  color: #6e6e6e;
  padding: 0px 0px 0px 10px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
  margin: 10px 0px 0px 0px; }

.usps img {
  height: 50px;
  margin: 0 auto;
  justify-content: center; }

.icon {
  display: flex;
  justify-content: center; }

.sixD {
  flex-direction: row;
  display: flex;
  padding: 80px 0px 80px 0px; }

.sixDscroller {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  /* Optional: snap scrolling */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  scroll-behavior: smooth; }

.sixDtile {
  background: #1d1c22;
  color: #fff;
  border-radius: 20px;
  /* Prevent shrinking; keep width */
  flex: 0 0 auto;
  /* or however wide your tiles are */
  width: 350px;
  /* Optional: snap each tile into view */
  scroll-snap-align: start;
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow: hidden; }

.sixDtile .label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: 600;
  font-size: 12px;
  background: #fafafa;
  color: #1d1c22;
  border-radius: 999px;
  padding: 5px 12px; }

.sixDtile img {
  width: 100%; }

.sixDtile .title {
  padding: 20 20 5 20;
  font-size: 17px;
  color: #fafafa;
  font-weight: 600; }

.sixDtile .desc {
  padding: 0 20 20 20;
  font-size: 13px;
  color: #adadad;
  font-weight: 400; }

.sixDtile .level {
  padding: 0px;
  height: 225px;
  overflow: hidden;
  position: relative; }

.sixDtile .detail {
  background: #1d1c22;
  padding: 0px; }

.sixDtitlespacer {
  /* Prevent shrinking; keep width */
  flex: 0 0 auto;
  /* or however wide your tiles are */
  width: 80px;
  /* Optional: snap each tile into view */
  scroll-snap-align: start;
  opacity: 0;
  transition: opacity 0s ease; }

.sixDtile.faded {
  opacity: 0.3; }

.sixDscroller::-webkit-scrollbar {
  display: none; }

.sixDscroller {
  -ms-overflow-style: none;
  scrollbar-width: none; }

.sixDcontainer {
  position: relative;
  /* hide gradient overflow */
  overflow: hidden; }

.context {
  justify-content: center;
  display: flex;
  flex-direction: column; }

.head {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  padding: 20px 20px 5px 20px; }

.sub {
  text-align: center;
  font-size: 16px;
  color: #6e6e6e;
  margin-top: 15px;
  padding: 0px 20px 20px 20px; }

.context .sub {
  color: #fff !important; }

.propsPanel {
  flex-direction: column;
  color: #fff;
  background: #1d1c22;
  padding: 100px 50px 100px 50px; }

.propsPanel .bs {
  margin: 0 auto;
  font-weight: 500;
  font-size: 60px;
  text-align: center;
  max-width: 800px;
  line-height: 46px;
  letter-spacing: -2px;
  padding: 50px 0px 30px 0px; }

.propsPanel .sub {
  width: 300px;
  margin: 0 auto;
  line-height: 24px;
  color: #adadad; }

.sub2 {
  text-align: center;
  font-size: 16px;
  color: #adadad;
  margin-top: 15px;
  width: 400px;
  margin: 75 auto 0 auto;
  font-weight: 500; }

.propList {
  max-width: 800px;
  margin: 50 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center; }

.propList a {
  border: 1px solid #adadad;
  border-radius: 999px;
  padding: 10px 25px;
  font-size: 13px;
  color: #adadad;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  transition: all 0.7s ease;
  text-decoration: none; }

.propList a:hover {
  border-color: #fff;
  color: #1d1c22;
  background: white;
  cursor: pointer; }

.darkGradWhite {
  margin: 0 auto;
  font-size: 16px;
  color: #fafafa;
  padding: 10px 14px 10px 18px; }

.darkGradWhiteMax {
  margin: 0 auto;
  font-size: 15px;
  color: #fafafa;
  padding: 10px 14px 10px 18px; }

.plus-svg {
  margin-left: 12px;
  stroke: white; }

.footer {
  display: flex;
  flex-direction: column;
  color: #fafafa;
  align-items: flex-start;
  justify-content: center;
  align-items: center;
  background: #f7f7f7; }

.footerLogo {
  margin: 0px auto; }

.footerLogo img {
  height: 80px; }

.socials {
  display: none; }

.focusPeople {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  padding: 100px 0px;
  overflow: hidden;
  background-image: url('../images/purpleHaze.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: auto; }

.peopleSquiggle {
  position: absolute;
  top: 270;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; }

.peopleSquiggle img {
  position: absolute;
  top: 1200;
  left: -10%;
  width: 120%;
  transform: translateY(0);
  transition: transform 0.1s ease-out; }

.empower {
  text-align: left;
  font-size: 25px;
  color: #5f5f5f;
  margin: 0px 0px 50px 0px;
  max-width: 320px;
  letter-spacing: -1px;
  line-height: 25px; }

.cards {
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  margin: 0 auto;
  gap: 20px;
  position: relative; }

.card {
  background: white;
  border-radius: 15px;
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(var(--offset));
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform; }

.card:hover {
  transform: translateY(var(--offset)) scale(1.03);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  cursor: default; }

.card img {
  width: 150px;
  margin: 0 auto 15 auto; }

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* important */
  height: 100%;
  /* allow to grow and fill */
  flex: 1;
  margin-top: 16px; }

.meetTheTeam {
  margin: 50px auto 0px auto;
  display: flex;
  z-index: 100;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  /* fully rounded pill */
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: #fafafa;
  background: #e0106a;
  cursor: pointer;
  transition: all 0.6s ease; }

.meetTheTeam:hover {
  transform: scale(1.02); }

.focusPeopleContainer {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto; }

.wave-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-left: 10px; }

.name {
  font-size: 16px;
  color: #1d1c22;
  font-weight: 700;
  margin: 0 auto; }

.bio {
  font-size: 13px;
  color: #adadad;
  line-height: 18px; }

.role {
  font-size: 13px;
  color: #fff;
  background: #3f395d;
  width: auto;
  display: inline-block;
  width: auto;
  padding: 10px 20px;
  border-radius: 999px;
  margin: 20 auto 0 auto; }

.clientScroll {
  background: #1d1c22; }

.basics {
  background: #fafafa; }

.powerfulAnswer {
  background: #fafafa; }

.sixD {
  background: #f1f0f0; }

.testimonials {
  background: #e4e4e4;
  display: flex;
  flex-direction: column;
  padding: 100px 40px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; }

.testimonialPanel {
  background: #fafafa;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0px 40px;
  box-sizing: border-box; }

.testimonialContent {
  padding: 100px 20px;
  max-width: 100%; }

.lovedBy {
  margin: 0 auto;
  font-weight: 500;
  font-size: 60px;
  text-align: center;
  line-height: 46px;
  letter-spacing: -2px; }

.testimonialsScroller {
  background: #0f71f0;
  max-width: 80%;
  margin: 0 auto; }

.testimonial-wrapper {
  position: relative;
  background: #0f71f0;
  border-radius: 24px;
  padding: 40px 60px;
  display: flex;
  align-items: stretch;
  max-width: 500px;
  margin: 0 auto; }

.testimonial-track {
  display: flex;
  gap: 0px;
  transition: transform 0.5s ease;
  will-change: transform;
  width: 100%;
  height: 100% !important; }

.testimonial-card {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: row;
  /* 👈 this is the key */
  justify-content: center;
  /* Make sure this card fills the container */
  min-height: 300px !important;
  cursor: pointer; }

.testimonial-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%; }

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ededed;
  border-radius: 50%;
  color: black;
  border: none;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0px;
  cursor: pointer;
  font-size: 20px;
  z-index: 10; }

.arrow:hover {
  background: otNightBlue;
  color: #fff; }

.arrow.left {
  left: -25px; }

.arrow.rightA {
  right: -25px; }

.testimonial-viewport {
  max-width: 100%;
  overflow: hidden;
  align-items: stretch; }

.testimonialPanel {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto; }

.testimonial-quote {
  font-size: 16px;
  line-height: 22px; }

.testimonial-name {
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px; }

.testimonial-from {
  font-size: 14px;
  font-weight: 300; }

.testimonialStatement {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center; }

.testimonialPicture {
  width: 100px;
  height: 100px;
  justify-content: center;
  flex: 0; }

.testimonial-card-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px; }

.no-select {
  /* Safari/Chrome */
  -webkit-user-select: none;
  /* Firefox */
  -moz-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
  user-select: none; }

.footer {
  padding-bottom: 50px; }

.start-a-convo {
  font-size: 30px;
  margin: 50 auto 0 auto;
  font-weight: 700;
  letter-spacing: -1px;
  text-align: center;
  line-height: 30px; }

.contact-details {
  margin: 50px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center; }

.phone {
  color: #4d4d4d;
  font-size: 20px;
  font-weight: 500;
  cursor: default;
  margin-left: 15px; }

.email {
  color: #4d4d4d;
  font-size: 20px;
  font-weight: 500; }

.email a {
  color: #4d4d4d;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  transition: transform 0.2s ease;
  cursor: pointer;
  transition: all 0.6s ease; }

.email a:hover {
  color: #000;
  background: #000;
  color: #fff; }

.contact-details img {
  width: 30px; }

.physical-address {
  color: #b5b5b5;
  text-align: center;
  margin-top: 50px;
  font-size: 14px; }

.physical-address img {
  width: 30px;
  margin-bottom: 20px; }

.postals {
  display: flex;
  flex-direction: column;
  gap: 20px; }

.address1 {
  text-align: center; }

.contact-form {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  max-width: 700px; }

.contact-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* space between input and button */
  gap: 10px;
  max-width: 700px; }

.email-capture {
  width: 100%;
  max-width: 700px;
  /* your $lightGrey */
  background: #ededed;
  font-size: 18px;
  color: #6b6b6b;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  text-align: center;
  font-weight: 600;
  outline: none; }

.email-capture::placeholder {
  /* normal placeholder color */
  color: #6b6b6b;
  transition: opacity 0.2s ease; }

.email-capture:focus::placeholder {
  opacity: 0; }

.send {
  /* your $otNightBlue */
  background: #1d1c22;
  color: #fff;
  font-size: 12px;
  padding: 10px 25px;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  white-space: nowrap;
  cursor: pointer; }

.send:hover {
  background: #747474;
  color: #e4e4e4; }

.footerNav {
  color: #000;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #e4e4e4;
  max-width: 1000px;
  width: 100%;
  justify-content: center;
  margin-top: 50px;
  padding-top: 50px;
  gap: 35px; }

.link {
  font-size: 13px;
  color: #6e6e6e;
  text-decoration: none;
  padding: 5px 10px; }

.link:hover {
  background: #000;
  color: #fff;
  border-radius: 999px; }

.cat {
  font-weight: 600;
  font-size: 13px;
  color: 0;
  text-decoration: none;
  padding: 5px 10px; }

.cat:hover {
  background: #000;
  color: #fff;
  border-radius: 999px; }

.nav-group {
  flex-direction: column;
  gap: 0px;
  display: flex; }

.discover-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 180px 20px 120px 20px;
  background: #f0f0f0; }

.discover-intro-text {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-size: 28px;
  line-height: 35px;
  color: #adadad; }

.discover-usps {
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 30 auto 0 auto;
  gap: 20px;
  width: auto;
  max-width: 100%;
  flex-flow: row wrap;
  justify-content: center; }

.usp {
  width: 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.strong {
  display: inline !important;
  font-weight: bold;
  color: #5f5f5f; }

.black-strong {
  display: inline !important;
  font-weight: bold;
  color: #000; }

.usp-text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #5f5f5f; }

.usp-icon img {
  /* removes extra space below image */
  display: block;
  /* centers the image */
  margin: 0 auto;
  /* optional: control size */
  width: 40px;
  height: auto; }

.banner {
  max-width: 1000px;
  height: 400px;
  background: #6b6b6b;
  margin: 0px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  overflow: hidden; }

.glassPane2 {
  width: 320px;
  display: flex;
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
  padding: 40px 60px 40px 40px;
  background: orange;
  justify-content: flex-end;
  display: flex;
  flex-direction: column; }

.imagePane2 {
  background: green;
  flex: 1;
  color: #fff;
  font-size: 25px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: relative; }

.gemmaAlderImage {
  background: url('../resources/gemmaSplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.gemmaAlderGlass {
  background: url('../resources/gemmaGlass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.nameLabel {
  font-size: 17px; }

.banner-container {
  padding: 0px 20px 100px 20px;
  /* change this */
  display: block;
  background: #f0f0f0; }

.values-set {
  max-width: 700px;
  margin: 0 auto;
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); }

.value-tile {
  background: #fafafa;
  border-radius: 20px;
  padding: 30px 40px 10px 40px;
  /* if there's inner content */
  flex-direction: column;
  display: flex;
  gap : 20px; }

.value-icon {
  margin: 0;
  justify-content : center;
  align-items: center;
  display: flex; }

.value-icon img {
  width: 50px; }

.value-title {
  margin: 0;
  font-size: 20px;
  color: #5f5f5f;
  text-align: Center;
  font-weight: 500;
  letter-spacing: -0.5px; }

.value-description {
  margin: 0;
  font-size: 13px;
  color: #adadad;
  line-height: 20px; }

.values-title {
  margin: 0 auto;
  font-weight: 500;
  font-size: 60px;
  text-align: center;
  line-height: 46px;
  letter-spacing: -3px;
  padding: 50px 10px 30px 10px;
  display: inline-block; }

.values-title-bold {
  font-weight: 700; }

.values-sub {
  font-size: 15px;
  color: #adadad;
  max-width: 300px;
  margin: 20 auto 50 auto;
  text-align: center; }

.values {
  display: flex;
  align-content: center;
  flex-direction: column;
  padding: 100px 20px; }

.t-pull {
  letter-spacing: -10px; }

.rosie {
  background: #e4e4e4;
  padding: 150px 20px; }

.reverse-banner {
  max-width: 1000px;
  height: 400px;
  background: #6b6b6b;
  margin: 100px auto 0px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  overflow: hidden; }

.imagePane3 {
  background: green;
  color: #fff;
  font-size: 25px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 400px;
  position: relative; }

.glassPane3 {
  display: flex;
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
  padding: 40px 60px 40px 40px;
  background: orange;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 25px;
  align-items: center; }

.rosieImage {
  background: url('../resources/rosieSplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.rosieGlass {
  background: url('../resources/rosieGlass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.watch {
  padding: 0px 12px;
  font-size: 11px;
  background: #fafafa;
  color: #1d1c22;
  letter-spacing: 0px;
  border-radius: 999px;
  font-weight: 400;
  /* prevents it from stretching full width */
  align-self: flex-start;
  align-items: center;
  /* ensures it sizes to its content */
  display: inline-flex;
  margin-top: 13px;
  cursor: pointer; }

.watch:hover {
  background: black;
  color: #fff; }
  .watch:hover .white-play {
    display: inline; }
  .watch:hover .play-play {
    display: none; }

.watch img {
  width: 15px;
  vertical-align: middle;
  margin-left: 3px; }

.playVideo {
  margin-top: 100px; }

.playVideo img {
  width: 15px;
  vertical-align: middle;
  margin-left: 8px; }

.glass-content {
  display: flex;
  flex-direction: column;
  /* or center if you want text + button centered horizontally */
  align-items: flex-start; }

.glass-content .headline {
  max-width: 300px; }

.white-play {
  display: none; }

.rosie-story {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  flex-direction: column; }

.rosie-intro {
  display: flex;
  max-width: 440px;
  margin: 100 auto;
  flex-direction: column;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #8a8a8a;
  letter-spacing: -0.5px; }

.black {
  color: #000;
  font-weight: 700; }

.rosie-text {
  display: inline-block; }

.rosie-story {
  display: flex;
  flex-direction: row;
  gap: 20px; }

.rosie-tile {
  background: #fafafa;
  flex: 1;
  border-radius: 20px;
  padding: 100px 70px;
  gap: 20px;
  display: flex;
  flex-direction: column; }

.rosie-1 {
  font-size: 16px;
  font-weight: 700;
  padding-right: 40px;
  padding-bottom: 0px; }

.rosie-2, .rosie-4 {
  font-size: 14px;
  color: #adadad;
  line-height: 20px; }

.rosie-3 {
  font-size: 25px;
  color: #adadad;
  padding-right: 40px;
  letter-spacing: -1px;
  margin-top: auto;
  margin: 30px 0px; }

.around-the-world {
  background: #161616; }

.regions {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 40px 100px 40px; }

.region-group {
  flex: 1;
  flex-direction: column; }

.region-title {
  padding: 0 5 5 5;
  color: #fafafa; }

.region-title-padded {
  padding: 30 5 5 5;
  color: #fafafa; }

.region-title-blank {
  padding: 5;
  color: #161616; }

.country {
  font-size: 13px;
  margin: 0;
  padding: 5;
  color: #8a8a8a; }

.language-intro {
  padding: 5;
  color: #0f71f0; }

.language-intro-padded {
  padding: 20 5 5 5;
  color: #0f71f0; }

.world-intro {
  max-width: 1000px;
  margin: 100 auto 0 auto;
  padding: 0px 40px; }

.world-head {
  font-size: 35px;
  font-weight: 500;
  color: #8a8a8a;
  letter-spacing: -0.5px;
  line-height: 30px; }

.world-subhead {
  font-size: 14px;
  color: #e4e4e4;
  font-weight: 500;
  width: 300px;
  /* Modal Styling */ }

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center; }

.modal-content {
  position: relative;
  width: 90%;
  max-width: 800px; }

.modal-close {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 10000; }

.video-container {
  position: relative;
  /* 16:9 ratio */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px; }

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; }

.together {
  background: #fcfafe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150px 40px 350px 40px;
  background-image: url('../images/squiggle-2.png');
  background-repeat: no-repeat;
  background-position: center calc(100% + 230px);
  background-size: 1000px 641px; }

.together-head {
  display: flex;
  font-size: 80px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 70px; }

.together-sub {
  display: flex;
  max-width: 500px;
  text-align: center;
  margin-top: 40px;
  color: #adadad;
  line-height: 25px;
  font-size: 18px; }

.together-head {
  opacity: 1;
  transition: opacity 0.3s ease; }

.together-head.fade-out {
  opacity: 0; }

.team {
  background: #fff;
  padding: 100px 40px;
  display: flex;
  flex-direction: column; }

.principal {
  font-size: 25px;
  color: #161616;
  font-weight: 500;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  width: auto; }

.team-grid {
  display: flex;
  flex-wrap: wrap;
  /* center cards when they wrap */
  justify-content: center;
  gap: 15px;
  padding: 80px 40px 60px 40px;
  max-width: 1000px;
  margin: 0 auto; }

.team-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  width: 300px;
  height: 320px;
  position: relative;
  cursor: pointer;
  transition: all 0.6s ease; }

.team-card:hover {
  transform: scale(1.02); }

.team-card:hover .info {
  opacity: 0; }

.team-card:hover .rollover-bio {
  opacity: 1; }

.team-card img {
  width: 100%;
  height: auto;
  display: block; }

.team-card .info {
  font-size: 14px;
  position: absolute;
  left: 20px;
  bottom: 15px;
  color: #fff; }

.rollover-bio {
  position: absolute;
  background: rgba(0, 0, 0, 0.800);
  top: 0px;
  left: 0px;
  height: 100%;
  color: #fff;
  opacity: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* ← distributes top and bottom */
  justify-content: space-between; }

.team-name {
  color: #fff;
  font-size: 20px;
  margin: 0px;
  font-weight: 600;
  letter-spacing: -0.5px; }

.team-role {
  font-size: 20px;
  color: #fff;
  margin: -2px 0px 0px 0px;
  line-height: 22px; }

.team-bio {
  font-size: 14px;
  padding-bottom: 40px;
  color: #adadad; }

.rollover-bio .team-role {
  color: #adadad; }

.purple-ops {
  background: #1d1c22;
  display: flex;
  flex-direction: column;
  padding: 100px; }

.pops-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; }

.purple-ops-headline {
  font-size: 60px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  line-height: 50px;
  letter-spacing: -1px; }

.purple-ops-sub {
  font-weight: 400;
  color: #adadad;
  text-align: center;
  width: 500px;
  margin: 50 auto 0 auto;
  line-height: 25px;
  font-size: 18px; }

.purple-ops-cta {
  font-weight: 400;
  color: #adadad;
  text-align: center;
  width: 500px;
  margin: 0 auto 0 auto;
  line-height: 25px;
  font-size: 18px; }

.purpleops-features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 100px 40px 80px 40px;
  gap: 20px;
  justify-content: center; }

.purpleops-feature {
  background: #2f2f34;
  flex: 1;
  color: #adadad;
  border-radius: 20px;
  overflow: hidden;
  font-size: 14px;
  line-height: 23px;
  width: 280px;
  flex: 0 0 auto; }

.purpleops-feature .image {
  height: 175px;
  overflow: hidden; }

.purpleops-feature img {
  width: 100%; }

.purpleops-feature .detail {
  padding: 20px 45px 25px 20px;
  line-height: 20px; }

.team-wrapper {
  position: relative;
  overflow: hidden; }

.purple-ops-headline {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 2.6s ease-out, transform 2.6s ease-out; }

.purple-ops-headline.visible {
  opacity: 1;
  transform: translateX(0); }

.purple-ops-sub {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 2.6s ease-out, transform 2.6s ease-out; }

.purple-ops-sub.visible {
  opacity: 1;
  transform: translateX(0); }

.article-body {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  flex-direction: column;
  padding-top: 80px; }

.article-body .heading {
  font-weight: bold;
  font-size: 20px;
  margin: 40 0 0 0;
  padding: 0; }

.article-body .pull {
  font-size: 30px;
  font-weight: bold;
  margin: 80px 0px 40px -100px;
  line-height: 35px;
  letter-spacing: -1px; }

.article-body .copy {
  font-size: 15px;
  margin: 0;
  padding: 0;
  line-height: 23px;
  margin-top: 20px;
  color: #adadad; }

.article-body a {
  /* Branded purple */
  color: #8e2fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 2px solid transparent; }

.article-body a:hover {
  /* Slightly darker purple on hover */
  color: #5f1ecf;
  border-bottom: 2px solid #5f1ecf; }

.article-body img {
  width: 100%;
  border-radius: 20px;
  margin: 40px 0px 40px 0px; }

.authorship {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 3px solid; }

.article-title img {
  width: 75px;
  display: flex;
  margin: 0px 0px 30px 0px; }

.author-name {
  font-weight: bold; }

.author-role {
  margin: 0px 0px 0px 0px;
  font-weight: normal;
  color: #adadad; }

.publish-date {
  margin: 5px 0px 0px 0px;
  font-weight: normal;
  color: #adadad;
  font-size: 15px; }

.deets {
  margin-left: 20px; }

.article-title {
  background: #1d1c22;
  color: #fafafa;
  padding: 100px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.article-title h1 {
  font-size: 40px;
  width: 400px;
  color: #f7f5fe;
  border-bottom: 2px solid #fff;
  padding-bottom: 40px;
  margin-bottom: 30px; }

.article {
  display: flex;
  flex-direction: column;
  background: #f1f0f0;
  padding: 0px 0px 100px 0px; }

.article-top {
  padding: 0px;
  position: relative; }

.article-start {
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 100%; }

.article .headline {
  font-size: 35px;
  font-weight: 600;
  width: 420px;
  color: #fff;
  line-height: 30px;
  letter-spacing: -1px; }

.article .summary {
  font-size: 16px;
  font-weight: 400;
  width: 420px;
  color: #fff;
  margin: 20px 0px 0px 0px;
  color: #adadad;
  line-height: 20px; }

.article-top img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  /* removes whitespace below images */
  display: block; }

.article-meta {
  max-width: 1000px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease-in-out; }

.article-meta.visible {
  opacity: 1; }

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  /* allows clicks through it */
  pointer-events: none; }

.overlay-small {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  /* allows clicks through it */
  pointer-events: none; }

.story-pill {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 20px;
  width: auto;
  display: inline-block;
  margin: 0px 0px 20px 0px;
  letter-spacing: 0px; }

.type-insight {
  background: color(display-p3 0.847 0.424 0.569); }

.type-casestudy {
  background: color(display-p3 0.243 0.227 0.349); }

.type-news {
  background: color(display-p3 0.91 0.639 0.588); }

.scale-header {
  font-size: 60px;
  font-weight: 500;
  text-align: center;
  line-height: 50px;
  letter-spacing: -1px; }

.propositions {
  background: #1d1c22;
  padding: 200px 20px; }

.propositions-intro {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.propositions-header {
  font-size: 60px;
  font-weight: 500;
  text-align: center;
  width: 500px;
  line-height: 50px;
  letter-spacing: -1px; }

.propositions-sub {
  max-width: 350px;
  color: #adadad;
  text-align: center;
  margin: 30px 0px;
  font-size: 18px;
  line-height: 25px; }

.propositions-elements {
  display: flex;
  gap: 30px;
  margin-top: 50px; }

.proposition-element {
  flex: 1;
  flex-direction: column;
  display: flex;
  max-width: 190px; }

.proposition-element img {
  width: 55px;
  margin: 0 auto 20 auto; }

.proposition-element .title {
  color: white;
  font-size: 14px;
  font-weight: 600; }

.proposition-element .description {
  color: #adadad;
  font-size: 14px;
  line-height: 19px;
  margin: 4 0 0 0; }

.globalimpact-elements {
  display: flex;
  width: 90%;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 50px; }

.tenProps {
  background: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
  flex-direction: column; }

.ourTen {
  font-size: 60px;
  font-weight: 500;
  text-align: center;
  line-height: 50px;
  letter-spacing: -1px; }

.props-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 1000px;
  margin-top: 100px; }

.proposition {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 280px;
  min-height: 350px;
  box-sizing: border-box;
  transition: transform 0.2s ease; }

.proposition:hover {
  transform: translateY(-4px);
  background: #1d1c22;
  cursor: pointer; }
  .proposition:hover .title {
    color: #fff !important; }

.prop-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px; }

.proposition .title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  line-height: 17px;
  letter-spacing: -0.5px; }

.proposition .summary {
  font-size: 13px;
  color: #adadad;
  text-align: center;
  margin: 0; }

.prop-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center; }

.prop-bottom .propImage {
  width: 100%;
  border-radius: 0px 0px 12px 12px;
  object-fit: cover;
  height: 220px; }

.deep-dive {
  display: inline-flex;
  align-items: center;
  background: #efefef;
  color: #2b2a34;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 8px 5px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-bottom: 10px; }

.deep-dive:hover {
  background: #3f395d;
  color: #fff; }
  .deep-dive:hover .right-chevron-white {
    display: inline; }
  .deep-dive:hover .right-chevron {
    display: none; }

.deep-dive img {
  width: 19px;
  margin-left: 10px; }

.right-chevron-white {
  display: none; }

.props-outro {
  background: #fff; }

.frosted-panel {
  max-width: 1000px;
  height: 450px;
  margin: 100px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row; }

.pink-blending-wave {
  background: url('../resources/pink-blending-wave.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right; }

.frosted-glass {
  width: 260px;
  border-radius: 20px 0px 0px 20px;
  display: flex;
  color: #fff;
  padding: 60px;
  justify-content: center;
  gap: 20px;
  flex-direction: column;
  /* semi-transparent white */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(32px);
  /* for Safari */
  -webkit-backdrop-filter: blur(32px); }

.frosted-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; }

.imagePane {
  flex: 1;
  border-radius: 0px 20px 20px 0px;
  color: #fff;
  font-size: 25px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 20px; }

.outro-left-headline {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 24px; }

.outro-left-sub {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px; }

.outro-right {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #fff;
  flex-direction: column;
  display: flex;
  align-items: center;
  align-content: center;
  max-width: 400px;
  padding: 0 40;
  line-height: 20px; }

.propsOutroGlass {
  background: url('../resources/pink-glass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.nameLabel {
  font-size: 17px; }

.global {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 150px 0px;
  position: relative;
  display: flex;
  align-items: center; }

.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 1; }

.scroll-spacer {
  /* Creates the left indent */
  flex: 0 0 100px;
  /* No height needed – we just want the width */
  height: 1px;
  /* Don't let it snap */
  scroll-snap-align: none; }

.global-content {
  height: auto;
  width: 100%; }

.global-headline {
  font-size: 40px;
  color: #000;
  z-index: 200;
  position: relative;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 65px;
  /* Matches the .scroll-padding-left width */
  padding-left: 120px;
  max-width: 1000px;
  margin-bottom: 10px; }

.global-slider {
  z-index: 100;
  width: 100%;
  overflow: hidden;
  /* allow horizontal scrolling */
  overflow-x: auto;
  /* prevent vertical scroll */
  overflow-y: hidden;
  /* force inline layout */
  white-space: nowrap;
  /* flex-row layout */
  display: flex;
  /* optional: spacing between slides */
  gap: 20px;
  /* smooth snapping */
  scroll-snap-type: x mandatory;
  /* optional: visual spacing */
  padding-bottom: 20px;
  scroll-behavior: smooth;
  /* Firefox */
  scrollbar-width: none;
  /* IE and Edge */
  -ms-overflow-style: none;
  /* ← KEY for iOS */
  -webkit-overflow-scrolling: touch;
  /* Half the container width */
  scroll-padding-left: 50%;
  /* Optional, for end padding */
  scroll-padding-right: 50%; }

.global-slider::-webkit-scrollbar {
  /* Chrome, Safari, Opera */
  display: none; }

.content-slide {
  max-width: 1060;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* or your preferred slide width */
  min-width: 1000px;
  height: 580px;
  background: #5656b6;
  /* keep fixed width for each card */
  flex: 0 0 auto;
  scroll-snap-align: center;
  align-items: flex-start;
  justify-content: flex-end;
  /* controlled by gap in parent */
  margin-right: 0px;
  position: relative;
  overflow: hidden; }

.content-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.cs-detail {
  font-size: 28px;
  color: #fff;
  font-weight: 500;
  width: 600px;
  padding: 60px;
  align-self: flex-start;
  margin-top: auto;
  letter-spacing: -0.5px;
  word-wrap: break-word;
  white-space: normal;
  z-index: 2;
  position: relative; }

.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Adjust as needed */
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 1;
  /* allow clicks through */
  pointer-events: none; }

.discover-stats {
  background: #1f1f1f;
  padding: 200px 20px; }

.statistic {
  background: #393939;
  width: 140px;
  height: 140px;
  margin-bottom: 40px;
  border-radius: 20px;
  color: #adadad;
  font-weight: 700;
  font-size: 50px;
  position: relative;
  overflow: hidden; }

.stat-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Bottom aligned content */ }

.stat-bottom {
  position: absolute;
  /* adjust as needed */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* or whatever */
  font-size: 11px;
  text-align: center;
  font-weight: normal;
  color: #adadad; }

.creative {
  background: #1d1c22;
  padding: 200px 20px;
  background-image: url('../images/squiggle-3.png');
  background-repeat: no-repeat;
  background-position: calc(50% - 450px) calc(0% - 100px);
  background-size: 686px 700px; }

.creative-intro {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.creative-header {
  font-size: 60px;
  font-weight: 500;
  text-align: center;
  line-height: 50px;
  letter-spacing: -1px;
  width: 300px; }

.creative-sub {
  max-width: 350px;
  color: #adadad;
  text-align: center;
  margin: 30px 0px;
  font-size: 18px;
  line-height: 25px; }

.creative-elements {
  display: flex;
  gap: 30px;
  margin-top: 100px; }

.creative-element {
  flex: 1;
  flex-direction: column;
  display: flex;
  max-width: 190px; }

.creative-element img {
  width: 55px;
  margin: 0 calc(50% - 10px) 20 auto; }

.creative-element .title {
  color: white;
  font-size: 14px;
  font-weight: 600; }

.creative-element .description {
  color: #adadad;
  font-size: 14px;
  line-height: 19px;
  margin: 4 0 0 0; }

.bradWilliamsImage {
  background: url('../resources/bradSplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.bradWilliamsGlass {
  background: url('../resources/bradGlass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.creative-textBanner {
  max-width: 1000px;
  height: 450px;
  margin: 100px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: row; }

.creative-features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0px 40px 80px 40px;
  gap: 20px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto; }

.creative-feature {
  background: #fafafa;
  flex: 1;
  color: #adadad;
  border-radius: 20px;
  overflow: hidden;
  font-size: 14px;
  line-height: 23px; }

.creative-feature .image {
  height: 175px;
  overflow: hidden; }

.creative-feature img {
  width: 100%; }

.creative-feature .detail {
  line-height: 20px;
  color: #8a8a8a;
  font-size: 14px;
  margin-top: 10px; }

.creative-feature .title {
  line-height: 20px;
  color: #1f1f1f;
  font-size: 20px;
  font-weight: 600; }

.copy {
  padding: 30px; }

.kinds {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  margin: 15px 0px; }

.kindOf {
  border: 2px solid #1f1f1f;
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 15px;
  text-transform: capitalize; }

.detailIntro {
  font-size: 17px;
  font-weight: 500;
  margin: 30px 0px;
  color: #1f1f1f; }

.creative-studio {
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150px 40px 100px 40px; }

.creative-studio-head {
  display: flex;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 60px; }

.creative-studio-sub {
  display: flex;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 60px;
  color: #adadad; }

.creative-studio-detail {
  display: flex;
  max-width: 500px;
  text-align: center;
  margin-top: 40px;
  color: #adadad;
  line-height: 25px;
  font-size: 18px; }

.creativeD {
  background: #fafafa;
  flex-direction: column;
  display: flex;
  padding: 0px 0px 150px 0px; }

.creativeDscroller {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  /* Optional: snap scrolling */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  scroll-behavior: smooth; }

.creativeDtile {
  background: #1d1c22;
  color: #fff;
  border-radius: 20px;
  /* Prevent shrinking; keep width */
  flex: 0 0 auto;
  /* or however wide your tiles are */
  width: 350px;
  /* Optional: snap each tile into view */
  scroll-snap-align: start;
  opacity: 0.3;
  transition: opacity 0.3s ease;
  overflow: hidden;
  position: relative;
  height: 350px; }

.creativeDtile img {
  width: 100%;
  object-fit: cover;
  display: block; }

.creativeDtile .title {
  padding: 20 20 5 20;
  font-size: 17px;
  color: #fafafa;
  font-weight: 600; }

.creativeDtile .desc {
  padding: 0 20 20 20;
  font-size: 13px;
  color: #adadad;
  font-weight: 400; }

.creativeDtile .level {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  overflow: hidden;
  z-index: 2; }

.creativeDtile .detail {
  padding: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2; }

.creativeDtile .label {
  font-size: 18px;
  line-height: 17px;
  font-weight: 500;
  color: #fff; }

.creativeDtile .label-stage {
  font-size: 18px;
  line-height: 17px;
  font-weight: 400;
  color: #adadad; }

.creativeDtitlespacer {
  /* Prevent shrinking; keep width */
  flex: 0 0 auto;
  /* or however wide your tiles are */
  width: 80px;
  /* Optional: snap each tile into view */
  scroll-snap-align: start;
  opacity: 0;
  transition: opacity 0s ease; }

.creativeDtile.visible {
  opacity: 1; }

.creativeDscroller::-webkit-scrollbar {
  display: none; }

.creativeDscroller {
  -ms-overflow-style: none;
  scrollbar-width: none; }

.creativeDcontainer {
  position: relative;
  /* hide gradient overflow */
  overflow: hidden; }

.creativeContext {
  justify-content: center;
  display: flex;
  flex-direction: column; }

.gradOutline2 {
  margin: 50px auto 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  /* fully rounded pill */
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: #1d1c22;
  border: 2px solid #1d1c22;
  cursor: pointer;
  transition: all 0.6s ease;
  text-decoration: none; }

.gradOutline2:hover {
  background: #1d1c22;
  /* subtle lift */
  transform: translateY(-3px);
  color: #fff;
  transform: scale(1.02); }

.stories {
  padding: 150px 40px;
  background: #f0f0f0; }

.story-intro {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 50px;
  margin: 0 auto; }

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 40px;
  margin-top: 50px; }

.news-tile {
  display: flex;
  flex-direction: column;
  width: 260px;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  text-decoration: none; }

.news-tile:hover {
  transform: translateY(-4px);
  cursor: pointer; }

.news-image {
  height: 180px;
  overflow: hidden;
  background-color: #eee; }

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.news-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex-grow: 1; }

.news-category {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
  /* optional, for aesthetic spacing */
  padding: 5px 12px;
  /* optional, for pill shape */
  border-radius: 999px;
  margin-left: -5px;
  display: inline-block !important;
  width: auto !important;
  max-width: max-content; }

.cat-time {
  display: flex;
  flex-direction: row;
  gap: 7px; }

.read-time {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #adadad;
  text-transform: uppercase;
  margin-bottom: 10px;
  /* optional, for aesthetic spacing */
  padding: 5px 12px;
  /* optional, for pill shape */
  border-radius: 999px;
  margin-left: -5px;
  display: inline-block !important;
  width: auto !important;
  max-width: max-content; }

.news-title {
  font-size: 18px;
  line-height: 19px;
  font-weight: 500;
  color: #111;
  flex-grow: 1;
  margin-bottom: 30px; }

.news-date {
  font-size: 13px;
  color: #999; }

.news-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px 0; }

.news-author img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  /* fallback bg */
  background-color: #ccc; }

.news-author span {
  font-size: 14px;
  color: #555;
  font-weight: 500; }

.author-filter {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  margin: 0px auto 0px auto;
  max-width: 400px;
  flex-wrap: wrap; }

.author {
  background: #adadad;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 500; }

.author:hover {
  background: #fff;
  color: #000;
  cursor: pointer; }

.filter-intro {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 50px;
  margin: 50 auto 0 auto;
  color: #393939; }

.author-filter .active {
  background-color: #111;
  color: white; }

.kind-filter .active {
  background-color: #111;
  color: white; }

.kind-filter {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  margin: 0px auto 0px auto;
  max-width: 400px;
  flex-wrap: wrap; }

.story-kind {
  background: #adadad;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 500; }

.story-kind:hover {
  background: #fff;
  color: #000;
  cursor: pointer; }

.filter-kind {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 50px;
  margin: 50 auto 0 auto;
  color: #393939; }

.contact {
  background: #fcfafe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150px 40px 150px 40px;
  background-image: url('../images/squiggle-4.png');
  background-repeat: no-repeat;
  background-position: center calc(100% + 230px);
  background-size: 1530 553; }

.contact-sent {
  background: #fcfafe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150px 40px 150px 40px;
  background-image: url('../images/squiggle-4.png');
  background-repeat: no-repeat;
  background-position: center calc(100% + 230px);
  background-size: 1530 553;
  height: 60vh; }

.contact-head {
  display: flex;
  font-size: 80px;
  font-weight: 500;
  letter-spacing: -3px;
  text-align: center;
  line-height: 70px; }

.contact-sub {
  display: flex;
  max-width: 470px;
  text-align: center;
  margin: 40px 0px 40px 0px;
  color: #adadad;
  line-height: 25px;
  font-size: 18px; }

.contact-head {
  opacity: 1;
  transition: opacity 0.3s ease; }

.contact-head.fade-out {
  opacity: 0; }

form[name="contact-form"] {
  display: flex;
  flex-direction: column; }

.name-email {
  display: flex;
  gap: 20px;
  margin-bottom: 20px; }

input {
  font-size: 18px;
  border-radius: 999px;
  outline: none;
  border: none;
  padding: 10px 20px;
  background: #f0f0f0; }

textarea {
  border-radius: 30px;
  outline: none;
  border: none;
  padding: 20px 20px;
  height: 200px;
  background: #f0f0f0;
  font-size: 18px;
  width: 100%; }

.start-a-conversation {
  background: #5f5f5f;
  color: #fafafa;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 40px;
  text-decoration: none;
  border-radius: 999px; }

.start-a-conversation img {
  width: 20px;
  vertical-align: middle;
  margin-left: 5px; }

.start-a-conversation:hover {
  background: #000; }

.direct-contact {
  padding: 150px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

.direct-contact-head {
  display: flex;
  font-size: 50px;
  font-weight: 500;
  letter-spacing: -1px;
  text-align: center;
  line-height: 48px; }

.kerryImage {
  background: url('../resources/kerrySplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.kerryGlass {
  background: url('../resources/kerryGlass.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.nameLabel {
  font-size: 17px; }

.right {
  text-align: right; }

.warning {
  background: #e0106a;
  color: #fff;
  width: 100%;
  border-radius: 999px;
  padding: 15px 0px;
  text-align: center;
  font-size: 12px;
  margin: 20px 0px 0px 0px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease; }

.warning.show {
  opacity: 1;
  /* enough to fit the content */
  max-height: 100px; }

.rosie-head {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 60px;
  margin: 0 auto; }

.rosie-sub {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 60px;
  color: #adadad;
  margin: 0px auto 100px auto;
  width: 100%; }

.prop-header {
  background: #e4e4e4;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 auto;
  align-items: center;
  padding: 100px 0px;
  width: 100%; }

.prop-video {
  background: black;
  width: 400px;
  height: 212px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  cursor: pointer; }

.prop-video-vimeo {
  margin: 0 auto;
  transition: all 0.5s ease;
  overflow: hidden;
  border-radius: 20px; }

.prop-video-vimeo.collapsed {
  width: 520px;
  aspect-ratio: 17.1/9; }

.prop-video-vimeo.expanded {
  width: 80%;
  max-width: 1000px;
  aspect-ratio: 17.1/9; }

.prop-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 17.1/9;
  background: black;
  cursor: pointer; }

.prop-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.prop-video-iframe {
  display: none;
  width: 100%;
  height: 100%; }

.prop-video-vimeo.expanded .prop-video-iframe {
  display: block; }

.thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }

.prop-intro {
  background: white;
  border-radius: 20px;
  width: 400px;
  padding: 60px;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 20px; }

.video-title {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  position: relative;
  z-index: 1; }

.video-desc {
  color: #ccc;
  font-size: 15px;
  font-weight: 400;
  position: relative;
  z-index: 1; }

.heavy {
  font-size: 18px;
  line-height: 22px; }

.prop-banner {
  background: orange;
  max-width: 1000px;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  overflow: hidden; }

.prop-summary {
  color: #fff;
  padding: 100px 150px 100px 100px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  flex: 1; }

.prop-meta {
  padding: 80px;
  width: 250px;
  gap: 20px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  /* semi-transparent white */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(32px);
  /* for Safari */
  -webkit-backdrop-filter: blur(32px); }

.prop-meta .prop-title {
  color: #fff;
  text-align: left;
  font-size: 26px;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 25px; }

.prop-meta .synopsis {
  color: #fff;
  text-align: left;
  font-size: 14px;
  line-height: 21px; }

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Adjust depending on how much of the text area needs darkening */
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 1; }

.prop-video-meta {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 250px; }

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Adjust size as needed */
  width: 60px !important;
  height: 60px !important;
  transform: translate(-50%, -50%);
  /* Above the image and overlay */
  z-index: 2;
  cursor: pointer; }

.prop1 {
  background: url('../resources/props-banners/1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.prop-dark {
  background: #1d1c22;
  padding: 100px 40px; }

.prop-dark-highlight {
  width: 520px;
  margin: 0 auto;
  font-size: 22px; }

.prop-dark-pull {
  font-size: 15px;
  color: #e4e4e4;
  width: 520px;
  margin: 50 auto;
  transform: translateX(-100px);
  line-height: 25px;
  font-weight: 500; }

.prop-statement {
  background-color: #fdfbfd;
  padding: 100px 40px 0px 40px; }

.prop-statement-text {
  width: 420px;
  font-size: 19px;
  color: #8a8a8a;
  line-height: 24px;
  margin-left: 10%;
  letter-spacing: 0px;
  font-weight: 400; }

.prop-statement-text strong {
  color: #000; }

.prop-statement-squiggle {
  background-image: url('../images/squiggle-6.png');
  background-repeat: no-repeat;
  background-position: right top;
  height: 400px;
  width: 100%;
  background-color: #fdfbfd; }

.prop-statement-squiggle2 {
  background-image: url('../images/squiggle-5.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: calc(100% -300px) center;
  height: 400px;
  width: 100%;
  background-color: #fdfbfd; }

.prop-closing {
  padding: 150px 0px;
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center; }

.prop-closing-points {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 1000px;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center; }

.prop-closing-point {
  width: 230px;
  flex: 0 0 auto;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: column; }

.prop-closing-point strong {
  color: #000; }

.prop-closing-point .point {
  margin-top: 20px;
  color: #adadad; }

.prop-closing-point .number {
  background: #000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white; }

.prop-closing-title {
  display: flex;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -2px;
  text-align: center;
  line-height: 50px; }

.prop-closing-sub {
  display: flex;
  max-width: 350px;
  text-align: center;
  margin-top: 40px;
  color: #adadad;
  line-height: 25px;
  font-size: 18px; }

.prop-closing-statement {
  display: flex;
  max-width: 550px;
  text-align: center;
  margin-top: 80px;
  color: #000;
  line-height: 30px;
  font-size: 22px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0px; }

.prop-dark-stats {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto; }

.stat {
  flex: 1; }

.stat .statTitle {
  color: #fff;
  font-weight: 500;
  font-size: 14px; }

.stat .statDesc {
  color: #8a8a8a;
  font-size: 14px;
  margin-top: 10px; }

.stat-number {
  background: #393939;
  width: 140px;
  height: 140px;
  margin-bottom: 40px;
  border-radius: 20px;
  color: #adadad;
  font-weight: 700;
  font-size: 50px;
  line-height: 42px;
  position: relative;
  overflow: hidden; }

.stat-number-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }

.mobile-testimonial-buttons {
  display: none; }

.other-content {
  padding: 100px 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fafafa; }

.other-content-title {
  display: flex;
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -1px;
  text-align: center;
  line-height: 25px;
  margin: 0 auto; }

.mobile-bottom-nav {
  display: none; }

.global-aspects {
  display: none; }

.prop-deep-dive-header {
  padding: 150px 0px 250px 0px;
  display: flex;
  flex-direction: column;
  align-items: center; }

.prop-deep-dive-header h1 {
  width: 700px;
  margin: 0 auto;
  font-size: 60px;
  line-height: 58px;
  letter-spacing: -2px; }

.prop-deep-dive-header .deep-dive-synopsis {
  max-width: 400px;
  margin: 50px auto 100px auto;
  font-size: 25px;
  color: #adadad;
  text-align: center; }

.prop-deep-dive-header .deep-dive-summary {
  max-width: 400px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 500; }

.prop-deep-dive-header img {
  width: 50px;
  margin: 0 auto 100 auto; }

.prop-reach {
  background: url('../resources/props-banners/1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 60px; }

.reading-time {
  font-size: 13px;
  background: #fff;
  color: #1d1c22;
  border-radius: 999px;
  padding: 5px 20px;
  margin: 15px 0px 0px 0px; }

.current-page {
  background: #d86c91;
  color: #fff !important; }

.guest-contributor {
  height: 50px; }

.what-we-offer {
  height: 600px;
  max-width: 1000px;
  width: 100%;
  background: grey;
  border-radius: 20px;
  margin: 100 auto 0 auto;
  position: relative;
  overflow: hidden; }

.offerings-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  scroll-behavior: auto; }

.offering {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden; }

.offering::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* adjust as needed */
  height: 60%;
  background: linear-gradient(to top, #000, transparent);
  z-index: 1; }

.offering img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }

.offering-detail-left {
  position: absolute;
  bottom: 60px;
  left: 60px;
  max-width: 450px;
  border-radius: 10px;
  z-index: 10;
  height: auto;
  padding: 20px;
  box-sizing: border-box; }

.offering-detail-right {
  position: absolute;
  bottom: 60px;
  right: 40px;
  max-width: 420px;
  z-index: 10;
  box-sizing: border-box;
  height: auto;
  padding: 20px; }

.offering a {
  color: #fff;
  border: 1px solid #fff;
  padding: 5px 13px;
  border-radius: 999px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer; }

.offering a:hover {
  background: #fff;
  color: #000; }

.offering-title {
  font-size: 54px;
  line-height: 42px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fff;
  letter-spacing: -1px; }

.offering-content {
  font-size: 14px;
  line-height: 22px;
  color: #ddd;
  font-weight: 500;
  margin-bottom: 20px; }

.slider-dots {
  text-align: center;
  margin-top: 15px; }

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
  transition: background-color 0.3s; }

.dot.active {
  background-color: black; }

.dot6D {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
  transition: background-color 0.3s; }

.dot6D.active {
  background-color: black; }

.slider-dots-6D {
  text-align: center;
  margin-top: 15px; }

.proposition-challenges {
  display: flex;
  flex-direction: row;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 100px auto 0 auto;
  justify-content: center; }

.challenge {
  width: 220px;
  border: 2px solid #adadad;
  padding: 20px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 20px;
  color: #adadad;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.4s ease;
  cursor: pointer;
  align-items: center;
  transition: all 0.4s ease; }

.challenge-faded {
  opacity: 0.2; }

.challenge:hover {
  opacity: 1;
  padding: 60px 20px;
  /* warmer hover gradient */
  background: linear-gradient(#1d1c22, #1d1c22) padding-box, linear-gradient(to right, #ff9a8b, #fad0c4) border-box;
  /* soft glow on hover */
  box-shadow: 0 0 12px rgba(255, 95, 109, 0.3);
  /* subtle lift */
  transform: translateY(-3px);
  transform: scale(1.02);
  border: 2px solid transparent; }

.challenge a {
  color: #fff;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 999px;
  margin-top: 15px;
  display: inline-block;
  text-decoration: none;
  transition: all 0.4s ease; }

.challenge a:hover {
  background: white;
  color: #000; }

.challenge-detail {
  text-align: center; }

.challenge strong {
  color: #fff; }

@media (max-width: 768px) {
  /* 🎞️ Keyframes */
    .nav-bar {
      display: none; }
    .nav-bar-mobile {
      display: flex;
      background: white;
      height: 70px;
      position: fixed;
      width: 100%;
      z-index: 1000;
      justify-content: space-between;
      align-items: center; }
    .logo-mobile img {
      height: 100%; }
    .hamburger {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px; }
    .hamburger svg {
      display: block; }
    .mobile-menu {
      display: none;
      flex-direction: column;
      background: white; }
    .mobile-fullscreen-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0px;
      transition: opacity 0.4s ease;
      opacity: 0;
      transform: translateY(0px);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease; }
    .mobile-fullscreen-menu.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; }
    .close-btn {
      all: unset;
      font-size: 36px;
      font-weight: 400;
      margin-bottom: 40px;
      cursor: pointer;
      text-align: center;
      line-height: 1; }
    nav {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center; }
    nav a {
      font-size: 24px;
      font-weight: 600;
      color: #000;
      text-decoration: none; }
    nav a.contact {
      background: black;
      color: white;
      padding: 10px 20px;
      border-radius: 999px;
      font-weight: bold; }
    .basicPanel {
      flex-direction: column;
      margin: 40px 20px; }
    .leftPanel, .rightPanel {
      width: 100%;
      padding: 40px 0px;
      /* optional, resets for stacked layout */
      border-radius: 0; }
    .parts {
      flex-direction: column; }
    .part {
      width: 100%; }
    .lead {
      /* prevent text from being too narrow */
      width: 100%; }
    .quote {
      width: 100%; }
    .kevQuote {
      align-items: center;
      text-align: center; }
    .footerNav {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 0px 40px 0px;
      gap: 30px; }
    .nav-group {
      width: 100%; }
    .cat {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px; }
    .footerNav .link {
      font-size: 14px;
      padding: 5px 10px; }
    .link {
      font-size: 14px;
      padding: 5px 10px 5px 20px; }
    .footerLogo img {
      height: 60px; }
    .contact-details {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      gap: 0px;
      padding: 20px; }
    .contact-details .icon {
      /* optional: hide icons on small screens */
      display: none; }
    .visionStatement {
      display: flex;
      margin: 550 auto 0 auto;
      width: 800px; }
    .visionStatement h1 {
      font-weight: 500;
      font-size: 50px;
      width: 90%;
      line-height: 45px;
      letter-spacing: -2px;
      position: relative;
      z-index: 1;
      transition: transform 0.1s ease-out; }
    .intro {
      background: #fff; }
    .textBanner {
      max-width: 1000px;
      height: 650px;
      margin: 100px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      width: 90%; }
    .creative-textBanner {
      max-width: 1000px;
      height: 650px;
      margin: 100px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      width: 90%; }
    .midSize {
      color: #fff;
      font-size: 25px;
      padding: 0px;
      background: orange;
      justify-content: flex-end;
      display: flex;
      flex-direction: column; }
    .glassPane {
      width: 100%;
      border-radius: 20px 20px 0px 0px;
      display: flex;
      color: #fff;
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -1px;
      padding: 40px 40px;
      justify-content: flex-end;
      display: flex;
      flex-direction: column;
      box-sizing: border-box; }
    .imagePane {
      flex: 1;
      border-radius: 0px 0px 20px 20px;
      color: #fff;
      font-size: 25px;
      justify-content: flex-end;
      display: flex;
      flex-direction: column;
      padding: 20px; }
    .leftPanel {
      background: #fafafa; }
    .parts {
      display: flex;
      gap: 30px;
      margin-top: 20px; }
    .part {
      background: white;
      border-radius: 15px;
      color: #000;
      overflow: hidden; }
    .shot {
      height: auto;
      overflow: hidden; }
    .part .title {
      font-size: 16px;
      letter-spacing: 0px;
      padding: 30px 30px 0px 30px;
      font-weight: 500; }
    .part .desc {
      font-size: 14px;
      letter-spacing: 0px;
      color: #adadad;
      padding: 0px 30px 30px 30px;
      font-weight: 400;
      letter-spacing: 0px; }
    .rightPanel {
      background: #3f395d;
      flex: 1;
      border-radius: 20px;
      color: #fff;
      font-size: 25px;
      justify-content: center;
      display: flex;
      flex-direction: column;
      padding: 40px;
      box-sizing: border-box; }
    .basicPanel {
      background: none !important; }
    .basics {
      padding-bottom: 40px; }
    .usps {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 60px auto;
      max-width: 1000px;
      padding: 0px 20px; }
    .usps .tile {
      background: #f3f3f3;
      border-radius: 20px;
      flex: 1;
      padding: 70px 30px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      transition: all 0.3s ease;
      cursor: pointer; }
    .sixDtitlespacer {
      display: none; }
    .sixDtile {
      scroll-snap-align: center; }
    .propList {
      flex-direction: column; }
    .propList a {
      text-align: center;
      font-size: 14px; }
    .empower {
      text-align: left;
      font-size: 25px;
      color: #5f5f5f;
      margin: 0 auto;
      max-width: 320px;
      letter-spacing: -1px;
      line-height: 25px; }
    .focusPeopleContainer {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .cards {
      display: flex;
      flex-direction: column;
      max-width: 1000px;
      margin: 0 auto;
      gap: 20px;
      position: relative; }
    .card {
      background: white;
      border-radius: 15px;
      width: 90%;
      box-sizing: border-box;
      flex: 1;
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0 auto;
      transform: translateY(var(--offset));
      transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform; }
    .card:hover {
      transform: translateY(var(--offset)) scale(1.03);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2;
      cursor: pointer; }
    .card img {
      width: 150px;
      margin: 0 auto 15 auto; }
    .card-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* important */
      height: 100%;
      /* allow to grow and fill */
      flex: 1;
      margin-top: 16px; }
    .testimonials {
      padding: 100px 0px; }
    .testimonialPanel {
      width: 90% !important;
      margin: 0 auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0px 0px !important;
      box-sizing: border-box; }
    .testimonialContent {
      padding: 60px 20px; }
    .testimonial-card-content {
      flex-direction: column !important;
      align-items: center;
      text-align: center;
      gap: 10px; }
    .testimonialStatement {
      margin-top: 20px;
      align-items: center; }
    .testimonial-quote, .testimonial-name, .testimonial-from {
      text-align: center; }
    .testimonialPicture {
      margin: 0 auto; }
    .testimonial-card {
      flex: 0 0 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding: 0px;
      color: white;
      display: flex;
      flex-direction: row;
      /* 👈 this is the key */
      justify-content: center;
      /* Make sure this card fills the container */
      min-height: 300px !important;
      cursor: pointer; }
    .testimonial-wrapper {
      padding: 40px 10px; }
    .testimonial-quote {
      font-size: 16px;
      line-height: 22px;
      width: 80%;
      text-align: left; }
    .left {
      display: none; }
    .rightA {
      display: none; }
    .mobile-testimonial-buttons {
      display: flex;
      margin-top: 20px; }
    .mobile-testimonial-buttons img {
      width: 30px; }
    .spin-left {
      border: none;
      flex: 1;
      height: 50px;
      background: none; }
    .spin-right {
      border: none;
      flex: 1;
      height: 50px;
      background: none; }
    .testimonial-wrapper {
      flex-direction: column; }
    .footerNav {
      display: none; }
    .mobile-bottom-nav {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: left;
      overflow-x: hidden; }
    .mobile-bottom-nav a {
      color: #adadad;
      font-size: 14px;
      font-weight: normal;
      display: block;
      width: 100%;
      padding: 0px 20px; }
    .mobile-bottom-nav summary {
      color: #5f5f5f;
      text-align: left;
      display: block;
      width: 100%;
      padding: 0px 20px; }
    .mobile-bottom-nav details {
      border-top: 1px solid #eee;
      padding: 10px;
      align-items: flex-start; }
    .mobile-bottom-nav summary {
      position: relative;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      list-style: none; }
    .mobile-bottom-nav nav {
      padding: 20px 20px; }
    .powerStatement {
      margin-top: -220px; }
    .globalimpact-elements {
      display: flex;
      width: 90%;
      flex-wrap: wrap;
      gap: 30px;
      margin-top: 50px; }
    .globalimpact-elements .proposition-element {
      flex: 1 1 calc(50% - 15px);
      max-width: calc(50% - 15px);
      display: flex;
      flex-direction: column;
      /* ✅ this centers all child content horizontally */
      align-items: center;
      /* optional: centers inline content like text */
      text-align: center; }
    .page {
      padding: 70px 0px 0px 0px; }
    .banner {
      max-width: 1000px;
      width: 90%;
      background: #6b6b6b;
      margin: 0px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: auto; }
    .glassPane2 {
      width: 100%;
      display: flex;
      color: #fff;
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -1px;
      padding: 40px 60px 40px 40px;
      justify-content: flex-end;
      display: flex;
      flex-direction: column;
      box-sizing: border-box; }
    .imagePane2 {
      width: 100%;
      color: #fff;
      font-size: 25px;
      justify-content: flex-end;
      display: flex;
      height: 300px;
      flex-direction: column;
      padding: 20px;
      flex: none;
      box-sizing: border-box;
      position: relative; }
    .gemmaAlderImage {
      background: url('../resources/gemmaSplash.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; }
    .values-title {
      width: 250px;
      line-height: 60px; }
    .value-description {
      margin: 0;
      font-size: 14px;
      width: 80%;
      margin: 0 auto; }
    .rosie-tile {
      background: #fafafa;
      flex: 1;
      border-radius: 20px;
      padding: 30px 30px;
      gap: 20px;
      display: flex;
      flex-direction: column; }
    .rosie-1 {
      font-size: 16px;
      font-weight: 700;
      padding-right: 40px;
      padding-bottom: 0px; }
    .rosie-2, .rosie-4 {
      font-size: 14px;
      color: #adadad;
      line-height: 20px; }
    .rosie-3 {
      font-size: 25px;
      color: #adadad;
      padding-right: 40px;
      letter-spacing: -1px;
      margin-top: auto;
      margin: 30px 0px; }
    .scale-header {
      font-size: 40px;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      letter-spacing: -1px; }
    .global-headline {
      font-size: 40px;
      color: #000;
      z-index: 200;
      position: relative;
      font-weight: 500;
      letter-spacing: -1px;
      line-height: 50px;
      /* Matches the .scroll-padding-left width */
      text-align: center;
      width: 90%;
      margin: 0 auto 10px auto;
      padding-left: 0px; }
    .global-slider {
      display: none; }
    .global-aspects {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-top: 100px; }
    .aspect-slide {
      width: 90%;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      background: #f0f0f0; }
    .aspect-slide img {
      width: 100%; }
    .aspect-detail {
      color: #000;
      padding: 40px;
      display: flex;
      flex-direction: column; }
    .aspect-head {
      font-size: 22px;
      font-weight: 600; }
    .aspect-desc {
      font-size: 15px;
      font-weight: 400;
      margin-top: 10px; }
    .propositions-elements {
      flex-direction: column;
      gap: 40px; }
    .propositions {
      background: #1d1c22;
      padding: 100px 20px 800px 20px; }
    .proposition-element {
      flex: 1;
      flex-direction: column;
      display: flex;
      max-width: 260px; }
    .proposition-element .title {
      color: white;
      font-size: 14px;
      font-weight: 600;
      text-align: center; }
    .proposition-element .description {
      color: #adadad;
      font-size: 14px;
      line-height: 19px;
      margin: 4 0 0 0;
      text-align: center; }
    .frosted-panel {
      max-width: 1000px;
      width: 90%;
      margin: 100px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      padding: 0px;
      box-sizing: border-box;
      height: auto;
      gap: 20px; }
    .pink-blending-wave {
      background: none; }
    .frosted-glass {
      width: 100%;
      display: flex;
      color: #fff;
      padding: 100px 60px;
      justify-content: center;
      gap: 20px;
      flex-direction: column;
      box-sizing: border-box;
      border-radius: 20px 20px 0 0;
      background: url('../resources/pink-blending-wave.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: right; }
    .frost-overlay {
      /* semi-transparent white */
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(32px);
      /* for Safari */
      -webkit-backdrop-filter: blur(32px);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 20px 20px 0 0; }
    .frosted-right {
      display: block;
      justify-content: center;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      background: #1d1c22;
      border-radius: 0px 0px 20px 20px;
      align-items: stretch;
      flex-direction: column; }
    .outro-left-headline {
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -1px;
      line-height: 24px;
      z-index: 100; }
    .outro-left-sub {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0px;
      z-index: 100; }
    .outro-right {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.5px;
      color: #fff;
      flex-direction: column;
      display: flex;
      align-items: center;
      align-content: center;
      padding: 40px 40px;
      line-height: 20px;
      width: 100%;
      box-sizing: border-box; }
    .proposition {
      width: 90%; }
    .propositions-header {
      width: 100%; }
    .purple-ops {
      background: #1d1c22;
      display: flex;
      flex-direction: column;
      padding: 100px 0px; }
    .pops-container {
      max-width: 1000px;
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-direction: column; }
    .purpleops-features {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 100px 0px;
      gap: 20px;
      justify-content: center; }
    .purpleops-feature {
      background: #2f2f34;
      flex: 1;
      color: #adadad;
      border-radius: 20px;
      overflow: hidden;
      font-size: 14px;
      line-height: 23px;
      width: 90%;
      flex: 0 0 auto; }
    .purpleops-feature .detail {
      padding: 40px 45px 40px 40px;
      line-height: 20px;
      font-size: 17px; }
    .purpleops-feature .image {
      height: 235px;
      overflow: hidden; }
    .purple-ops-cta {
      width: 100%; }
    .purple-ops-headline {
      font-size: 60px;
      font-weight: 500;
      display: inline-block;
      text-align: center;
      margin: 0 auto;
      line-height: 50px;
      letter-spacing: -1px; }
    .purple-ops-sub {
      font-weight: 400;
      color: #adadad;
      text-align: center;
      width: 100%;
      margin: 50 auto 0 auto;
      line-height: 25px;
      font-size: 18px; }
    .purple-ops-headline {
      opacity: 1;
      transform: translateX(0px); }
    .purple-ops-headline.visible {
      opacity: 1;
      transform: translateX(0); }
    .purple-ops-sub {
      opacity: 1;
      transform: translateX(0px);
      transition: opacity 2.6s ease-out, transform 2.6s ease-out; }
    .purple-ops-sub.visible {
      opacity: 1;
      transform: translateX(0); }
    .team {
      padding: 100px 0px; }
    .team-grid {
      display: flex;
      flex-wrap: wrap;
      /* center cards when they wrap */
      justify-content: center;
      gap: 15px;
      padding: 80px 0px 60px 0px;
      max-width: 1000px;
      margin: 0 auto; }
    .team-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      text-align: left;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease;
      width: 80%;
      height: auto;
      position: relative;
      cursor: pointer;
      transition: all 0.6s ease; }
    .team-card:hover {
      transform: scale(1.02); }
    .team-card:hover .info {
      opacity: 0; }
    .team-card:hover .rollover-bio {
      opacity: 1; }
    .team-card img {
      width: 100%;
      height: auto;
      display: block; }
    .team-card .info {
      font-size: 14px;
      position: relative;
      display: none;
      color: #fff; }
    .rollover-bio {
      position: relative;
      background: #000;
      height: 100%;
      color: #fff;
      opacity: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      /* ← distributes top and bottom */
      justify-content: space-between; }
    .team-name {
      color: #fff;
      font-size: 20px;
      margin: 0px;
      font-weight: 600;
      letter-spacing: -0.5px; }
    .team-role {
      font-size: 20px;
      color: #fff;
      margin: -5px 0px 10px 0px; }
    .team-bio {
      font-size: 14px;
      padding-bottom: 40px;
      color: #adadad; }
    .rollover-bio .team-role {
      color: #adadad; }
    .regions {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 1000px;
      width: 90%;
      margin: 0 auto;
      padding: 50px 0px 100px 0px; }
    .world-head {
      text-align: center;
      margin: 0 auto; }
    .world-subhead {
      text-align: center;
      width: 300;
      margin: 20 auto 0 auto; }
    .region-title-blank {
      display: none; }
    .region-group:nth-of-type(2) {
      margin-top: -20px; }
    .region-group {
      align-items: center;
      text-align: center; }
    .country {
      text-align: center !important; }
    .name-email {
      flex-direction: column;
      width: 100%; }
    form[name="contact-form2"] {
      width: 100%; }
    form[name="contact-form2"] textarea {
      width: 100%; }
    .direct-contact {
      width: 100%;
      padding: 100px 0px 50px 0px; }
    .direct-contact-head {
      width: 300px; }
    .creative-sub {
      margin: 30px 0px 0px 0px; }
    .creative-elements {
      flex-direction: column;
      width: 90%;
      align-items: center; }
    .creative-element {
      width: 80% !important;
      max-width: 600px; }
    .creative-element img {
      width: 55px;
      margin: 0 auto 20 auto; }
    .creative-element .title {
      color: white;
      font-size: 14px;
      font-weight: 600;
      text-align: center; }
    .creative-element .description {
      color: #adadad;
      font-size: 14px;
      line-height: 19px;
      margin: 4 0 0 0;
      text-align: center; }
    .bradWilliamsImage {
      background-position: calc(50% - 10px) center; }
    .creative-features {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0px 0px 80px 0px;
      gap: 20px;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto;
      width: 90%; }
    .creative-feature {
      background: #fafafa;
      flex: 1;
      color: #adadad;
      border-radius: 20px;
      overflow: hidden;
      font-size: 14px;
      line-height: 23px; }
    .creative-feature .image {
      height: 275px;
      overflow: hidden; }
    .creativeDtile {
      scroll-snap-align: center; }
    .creativeDtitlespacer {
      display: none; }
    .gradOutline2 {
      width: auto; }
    .creativeD {
      padding: 0px 0px 75px 0px; }
    .article-top {
      padding: 0px;
      position: relative;
      width: 90%;
      border-radius: 20px;
      margin: 50 auto 0 auto;
      overflow: hidden; }
    .article-top .overlay {
      display: none; }
    .article-meta {
      background: #000;
      padding: 40px;
      box-sizing: border-box; }
    .article-start {
      position: relative;
      width: 100%;
      bottom: 0px; }
    .article .headline {
      font-size: 30px;
      font-weight: 600;
      width: 100%;
      color: #fff;
      line-height: 25px;
      letter-spacing: -1px; }
    .article .summary {
      font-size: 16px;
      font-weight: 400;
      width: 100%;
      color: #fff;
      margin: 20px 0px 0px 0px;
      color: #adadad;
      line-height: 20px; }
    .article-body {
      width: 90%; }
    .article-body .pull {
      margin: 80px 0px 40px 0px; }
    .prop-header {
      background: #e4e4e4;
      display: flex;
      flex-direction: column;
      gap: 40px;
      margin: 0 auto;
      align-items: center;
      padding: 100px 0px;
      width: 100%; }
    .prop-banner {
      width: 90%; }
    .prop-intro {
      width: 90%;
      box-sizing: border-box; }
    .prop-dark-highlight {
      width: 100%; }
    .prop-dark-pull {
      width: 100%;
      margin: 50 auto;
      transform: translateX(0px);
      line-height: 25px;
      font-weight: 500; }
    .prop-dark-stats {
      flex-direction: column;
      gap: 40px;
      align-items: center; }
    .prop-statement-text {
      width: 100%;
      margin: 0 auto; }
    .prop-closing {
      width: 90%;
      margin: 0 auto; }
    .prop-video {
      width: 90%;
      box-sizing: border-box; }
    .stat {
      flex: 1;
      margin: 0 auto;
      align-items: center;
      display: flex;
      flex-direction: column; }
    .stat .number {
      margin: 0 auto; }
    .stat .statTitle {
      color: #fff;
      font-weight: 500;
      font-size: 14px; }
    .stat .statDesc {
      color: #8a8a8a;
      font-size: 14px;
      margin-top: 10px;
      text-align: center; }
    .stat-number {
      margin-bottom: 20px; }
    .prop-closing-point {
      width: 70%; }
    .prop-banner {
      flex-direction: column; }
    .prop-deep-dive-header h1 {
      width: 400px; }
    .deep-dive-synopsis {
      width: 80%; }
    .deep-dive-summary {
      width: 80%; }
    .reverse-banner {
      max-width: 1000px;
      background: #6b6b6b;
      margin: 100px auto 0px auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 90%;
      height: auto; }
    .glassPane3 {
      display: flex;
      color: #fff;
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -1px;
      padding: 40px 40px 40px 40px;
      justify-content: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      line-height: 25px;
      align-items: center;
      width: 100%;
      box-sizing: border-box; }
    .imagePane3 {
      color: #fff;
      font-size: 25px;
      justify-content: flex-end;
      display: flex;
      flex-direction: column;
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
      flex: none;
      height: 300px;
      position: relative; }
    .glass-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      /* optional */
      padding: 20px;
      /* <--- KEY CHANGE */
      width: fit-content;
      /* <--- center it */
      margin: 0 auto;
      /* optional polish */
      border-radius: 10px; }
    .watch {
      display: flex;
      margin: 20 auto 0 auto; }
    .value-tile {
      /* Full width on narrow screens */
      flex: 0 0 100%;
      max-width: 300px;
      margin: 0 auto; }
    .values-set {
      /* one column */
      grid-template-columns: 1fr; }
    .rosie-story {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 420px; }
    .challenge-faded {
      opacity: 1; }
    .offering-detail-left {
      position: absolute;
      bottom: 10px;
      left: 10px;
      max-width: 90%;
      border-radius: 10px;
      z-index: 10;
      height: auto;
      padding: 20px;
      box-sizing: border-box; }
    .offering-detail-right {
      position: absolute;
      bottom: 10px;
      left: 10px;
      max-width: 90%;
      z-index: 10;
      box-sizing: border-box;
      height: auto;
      padding: 20px; }
    .offering-title {
      font-size: 28px;
      line-height: 30px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #fff;
      letter-spacing: -1px;
      width: 100%; }
    .powerfulAnswer h1 {
      width: 90%; }
    .sub2 {
      width: 90%; }
    .offerings-scroll {
      width: 100%; }
    .offering {
      width: 100%; }
    .powerfulAnswer {
      padding: 120px 0px;
      box-sizing: border-box; }
    .what-we-offer {
      width: 90%; }
    .sixDscroller {
      flex-direction: column;
      margin: 0 auto; }
    .sixDcontainer {
      margin: 0 auto; }
    .sixDtile {
      width: 100%; }
    .prop-video-vimeo.collapsed {
      width: 90%;
      aspect-ratio: 17.1/9; }
    .prop-video-vimeo.expanded {
      width: 90%;
      aspect-ratio: 17.1/9; }
    .play-button {
      position: absolute;
      top: 50px;
      left: 40px;
      /* Adjust size as needed */
      width: 45px !important;
      height: 45px !important;
      /* Above the image and overlay */
      z-index: 2;
      cursor: pointer; }
    .propsPanel .bs {
      width: 90%;
      padding: 0px 0px 25px 0px; }
    .propsPanel {
      padding: 100px 0px 100px 0px; } }

@keyframes scrollLogos {
  0% {
    transform: translateX(0); }

  100% {
    transform: translateX(-50%); } }