@font-face {
  font-family: 'MonumentExtendedUltrabold';
  src: url('./fonts/madeouter.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.custom-font {
  font-family: 'MonumentExtendedUltrabold', sans-serif;
}

.box-highlight {
  /*background: linear-gradient(174deg, rgba(237, 237, 237, 1) 0%, rgba(246, 211, 161, 1) 31%, rgba(238, 129, 199, 1) 66%, rgba(187, 59, 204, 1) 100%);*/
  /* background: linear-gradient(174deg, rgba(237, 237, 237, 1) 0%, rgba(246, 211, 161, 1) 31%, rgb(238 150 129) 66%, rgb(204 59 98) 100%); */
  background-color: #080808;
  padding: 1.5rem;
  color: white;
}


::selection {
  background: #222222; /* or any custom dark color */
  color: white;         /* optional: keep text readable */
}








.logo img {
  min-height: 200px;
  display: block;
}

/* Font face already declared for MonumentExtended */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

.nav-container {
  margin-top: 1.5rem;
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

.nav-bar {
  max-width: 150rem;
  height: 6rem;
  display: flex;
  align-items: stretch;
  backdrop-filter: blur(12px);
  background-color: rgb(2 2 2 / 40%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* border-radius: 0.375rem; */
  margin: 0 auto;
}

.nav-box {
  /*border: 2px solid white;*/
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: white;
  height: 100%;
}

.nav-box a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
}

.logo {
  background-color: rgba(255, 255, 255, 0.07);
  color: #f97316; /* Tailwind orange-500 */
  font-weight: 800;
  /*border-top-left-radius: 0.3rem;*/
  /*border-bottom-left-radius: 0.3rem;*/
}

.nav-links {
  display: flex;
}



.cta {
  border-radius: 3px;
  /*background: linear-gradient(90deg, rgb(237 237 237 / 0%) 0%, rgb(246 211 161 / 58%) 31%, rgb(238 129 199 / 56%) 66%, rgb(204 59 198 / 88%) 100%);*/
  padding-left: 250px;
}



.bg-animated-gif {
  background-image: url('img/great.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




.gradient-ideas {
  background: linear-gradient(
    174deg,
    rgb(221, 200, 168) 0%,
    rgb(235, 187, 132) 31%,
    rgb(238 150 129) 66%,
    rgb(221, 75, 107)89%,
    rgb(209 45 69) 100%
  );
  background-clip: text;               /* ✅ Standard */
  -webkit-background-clip: text;       /* ✅ WebKit (Safari/Chrome) */
  -webkit-text-fill-color: transparent;
  color: transparent;                  /* ✅ Fallback for some browsers */
  display: inline-block;
}







.gradient-ideas2 {
  background: linear-gradient(
    174deg,
    rgba(246, 211, 161, 1) 0%,
    rgb(238 150 129) 31%,
    rgb(204 59 98) 66%,
    rgb(192, 56, 226) 100%
  );
  background-clip: text;               /* ✅ Standard */
  -webkit-background-clip: text;       /* ✅ WebKit (Safari/Chrome) */
  -webkit-text-fill-color: transparent;
  color: transparent;                  /* ✅ Fallback for some browsers */
  display: inline-block;
}





.rotating-image-abs {
  position: absolute;
  top: 20%;           /* Adjust vertical offset */
  left: -75px;        /* Half the width of the image to push it halfway offscreen */
  z-index: 10;
  pointer-events: none;
}

.rotating-image-abs img {
  width: 150px;
  animation: spin 10s linear infinite;
  opacity: 0.9;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




#rolling-number {
  font-family: 'MonumentExtendedUltrabold', sans-serif;
}

.digit-container {
  width: 1ch;
  height: 1em;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.digit-stack {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  transition: transform 2s ease-in-out;
}

.digit-stack div {
  height: 1em;
  line-height: 1em;
  text-align: center;
}

.dot {
  display: inline-block;
  width: 0.5ch;
}


@keyframes goup {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-goup {
  animation: goup 2s ease-out forwards;
}


.custom-bg {
  background-color: #080808; /* or any color you prefer */
}


nav a,
.nav-box a,
nav .nav-item {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

nav a:hover,
.nav-box a:hover,
nav .nav-item:hover {
  color: white;
  /*text-shadow: 0 0 14px white, 0 0 20px white;*/
  text-shadow: 0 0 16px white, 0 0 30px white, 0 0 50px white, 0 0 60px white, 0 0 70px white, 0 0 80px white;
}

.nav-box.cta {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-box.cta:hover {
  color: white;
  text-shadow: 0 0 16px white, 0 0 30px white, 0 0 50px white, 0 0 60px white, 0 0 70px white, 0 0 80px white;
  cursor: pointer;
}

#logo-click text {
  transition: fill 0.3s ease, filter 0.3s ease;
}

#logo-click:hover text {
  fill: white;
  filter: drop-shadow(0 0 6px white);
}





.somethingfont {
  /*font-family: 'Montserrat', sans-serif;
  font-weight: 600;*/

  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-weight: 300;
}
.something-bold {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}








#cookie-banner {
  font-family: 'Montserrat', sans-serif;
  border-radius: 2px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}







.scroll-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;  /* ✅ vertical centering */
}

.scroll-line {
  white-space: nowrap;
  display: inline-block;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: 5rem;

  padding: 0;
  margin: 0;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-line.left {
  animation: scrollLeft 100s linear infinite;
}

.scroll-line.right {
  animation: scrollRight 100s linear infinite;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}














.feature-section {
  padding: 10rem 6rem;
  background-color: white;
  color: black;
  /*font-family: 'Roboto', sans-serif;*/
  
  font-family: 'Montserrat', sans-serif;
}

.feature-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: flex-start;
  justify-content: space-between;
}

.feature-left {
  flex: 1;
  min-width: 320px;
  max-width: 600px;
}

.feature-title {
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: 4.5rem;
  color: #000000;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.feature-sub {
  font-size: 1.125rem;
  color: #111;
  margin-bottom: 3rem;
}

.feature-button {
  display: flex;
  align-items: center;
  border: 1px solid #000000;
  width: fit-content;
  font-weight: bold;
  border-radius: 1px;
  background: #000000;
}

.cta-text {
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  color: #ffffff;
  background: none;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border: none;
}

.cta-icon {
  font-size: 2rem;
  padding: 0 1.5rem;
  color: #000000;
}

.cta-icon svg {
  display: block;
}

.feature-right {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.icon-square {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #d85c6d;
  flex-shrink: 0;
  margin-top: 0.4rem;
  border-radius: 4px;
}

.feature-item h3 {
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: 1.25rem;
  color: #000000;
  margin-bottom: 0.5rem;
}

.feature-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.feature-button:hover {
  background-color: #00000060;
  border: 1px solid #00000050;
}

.cta-icon svg {
  transition: transform 0.3s ease;
  color: #FFFFFF;
}

.feature-button:hover .cta-icon svg {
  transform: translateX(6px); 
}







#ideas-hero .ideas-title{
  transform: translateZ(0) scale(var(--scale, 1));
  transform-origin: center center;
  will-change: transform;

  /* crisper text during fractional scales */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}









.site-footer--minimal {
  background:#080808;
  color:#fff;
  padding-top:6rem;
  padding-bottom:2rem;
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer-container { max-width:90rem; margin:0 auto; padding:0 1rem; }
.footer-divider { height:1px; margin:3rem 0 1rem; background:rgba(255,255,255,0.12); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family: 'Montserrat', sans-serif;
  padding-top:3rem; font-size:.875rem; color:#cfcfcf;
}
.legal-links { display:flex; gap:.5rem; align-items:center; }
.legal-links a { color:inherit; text-decoration:none; }
.legal-links a:hover { color:#fff; text-shadow:0 0 10px #fff; }

.site-footer--centered-brand{
  --brand-text-side-gap: 3.9%;  /* adjust if SVG textLength/viewBox changes */
  --brand-email-nudge-x: 0px;
  --brand-email-nudge-y: 0px;
}
.site-footer--centered-brand .footer-grid{
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
}
.site-footer--centered-brand .footer-brand{
  position:relative;
  width:100%;
  line-height:0;
  justify-self:stretch;
}
.site-footer--centered-brand .brand-svg{
  display:block;
  width:100%;
  height:auto;
}
.site-footer--centered-brand .brand-email{
  position:absolute;
  right: calc(var(--brand-text-side-gap) + var(--brand-email-nudge-x));
  bottom: calc(6px + var(--brand-email-nudge-y));
  font-family:'MonumentExtendedUltrabold',sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:clamp(12px, 1.05vw, 16px);
  color:#e5e5e5;
  text-decoration:none;
  transition:color .2s ease, text-shadow .2s ease;
}
.site-footer--centered-brand .brand-email:hover{
  color:#fff;
  text-shadow:0 0 12px #fff, 0 0 24px #fff;
}


@media (max-width:520px){
  .site-footer--centered-brand .brand-email{
    position:static;
    display:block;
    text-align:right;
    margin-top:.35rem;
  }
}



.site-footer--minimal .footer-bottom{
  padding-top: 1.25rem;                  /* was 3rem */
  padding-inline: clamp(1rem, 4vw, 2.5rem);/* extra inner padding on both sides */
}

@media (min-width: 1200px){
  .site-footer--minimal .footer-bottom{
    max-width: 86rem;                    /* slightly narrower than container */
    margin-inline: auto;
  }
}












#ideas-hero2{ display:grid; place-items:center; padding: clamp(16px, 36vw, 90px) 0; }
#ideas-hero2 .video-card{
  /*position: relative;*/
  width: min(86vw, 1200px);
  aspect-ratio: 16 / 9;
  overflow: hidden; 
  background: #000; 
}
#ideas-hero2 .video-card__media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#ideas-hero2 .video-card__overlay{
  position: absolute; inset: 0;
  display: flex;
  justify-content: center;
  align-items: center; 
  pointer-events: none;
}
#ideas-hero2 .video-card__overlay h3{
  margin: 0;
  text-align: center;
}
@media (max-width: 420px){
#ideas-hero2 .video-card{ width: 92vw; aspect-ratio: 4 / 3; }
}


#ideas-hero2{
  --video-tint: rgba(8, 8, 8, 0.1);
}
#ideas-hero2 .video-card__overlay{
  background: var(--video-tint);
}








#cap-cta{ background:#fff;  }
#cap-cta .cap-cta{ max-width: 1200px; margin: 0 auto; padding: clamp(24px,6vw,80px) clamp(16px,5vw,32px); display: grid; gap: clamp(28px,6vw,60px); }
#cap-cta .cap-top{ display: grid; grid-template-columns: 2fr 1fr; gap: clamp(16px,4vw,40px); align-items: start; }
#cap-cta .cap-title{ font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: .95; letter-spacing: .01em; margin: 0; color: currentColor; }
#cap-cta .cap-copy{ max-width: 46ch; }
#cap-cta .cap-eyebrow{ margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; opacity: .8; }
#cap-cta .cap-copy p{ margin: 0; opacity: .9; }
#cap-cta .cap-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,28px); }
#cap-cta .cap-card{ position: relative; display: block; border-radius: 2px; overflow: hidden; min-height: 260px; aspect-ratio: 16 / 9; color: #fff; background: #111; isolation: isolate;border: 1px solid #ffffff; }
#cap-cta .cap-card-media{ position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; filter: saturate(1.05); }
#cap-cta .cap-card::before{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35) 55%, rgba(0,0,0,.55)); z-index: 0; }
#cap-cta .cap-card-text{ position: absolute; left: 20px; right: 70px; bottom: 20px; z-index: 1; display: grid; gap: 6px; }
#cap-cta .cap-t{ font-size: clamp(1.2rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: .02em; }
#cap-cta .cap-s{ font-size: .9rem; opacity: .9; }
#cap-cta .cap-arrow{ position: absolute; right: 16px; bottom: 16px; width: 28px; height: 28px; color: #fff; opacity: .9; z-index: 1; transition: transform .25s ease, opacity .25s ease; }
#cap-cta .cap-card:hover .cap-arrow{ transform: translate(4px, -4px) scale(1.05); opacity: 1; }
#cap-cta .cap-card:hover .cap-card-media{ transform: scale(1.02); }
#cap-cta .cap-card-media{ transition: transform .4s ease; }

@media (max-width: 980px){
#cap-cta .cap-top{ grid-template-columns: 1fr; }
#cap-cta .cap-copy{ max-width: 60ch; }
}

@media (max-width: 720px){
#cap-cta .cap-cards{ grid-template-columns: 1fr; }
#cap-cta .cap-card{ aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce){
#cap-cta .cap-card-media, #cap-cta .cap-arrow{ transition: none; }
}

#cap-cta, #cap-cta .cap-title, #cap-cta .cap-copy, #cap-cta .cap-eyebrow{ color:#0b0b0f; }
#cap-cta .cap-eyebrow{ opacity:.72; }

#cap-cta .cap-card::before{ background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%); }
#cap-cta .cap-card-text{ text-shadow: 0 2px 10px rgba(0,0,0,.1); }

#cap-cta.cap-cta--dark, #cap-cta.cap-cta--dark .cap-title, #cap-cta.cap-cta--dark .cap-copy, #cap-cta.cap-cta--dark .cap-eyebrow{ color:#fff; }
#cap-cta .cap-arrow{
width: 28px; height: 28px; /* force size; ignores any w-6/h-6 utility */
transition: transform .25s ease, opacity .25s ease;
}


#cap-cta .cap-arrow{
  width: 28px;
  height: 28px;
  transform: translateX(0);                 /* baseline */
  transition: transform .3s ease, opacity .3s ease;  /* match .feature-button */
}

/* On card hover: slide right by 6px, no scale, no diagonal */
#cap-cta .cap-card:hover .cap-arrow{
  transform: translateX(6px);
  opacity: 1;
}









.story{ position: relative; }

.story-wrap{ 
  max-width: 1100px; 
  margin: 0 auto; 
  margin-top: -5rem;
  padding: clamp(40px, 2vw, 120px) 0; 
  padding-bottom: 10vw;
  display: grid; 
  gap: clamp(18px, 2.6vw, 28px); 
}

.story-title{ 
  font-size: clamp(2.1rem, 5.2vw, 4rem); 
  line-height: .96; 
  margin: 0; 
  letter-spacing: .01em; 
}

.story-lead{ 
  margin: 0; 
  opacity: .9; 
  max-width: 56ch; 
  font-size: 1.5rem; 
}

.story-grid{ 
  display: grid; 
  grid-template-columns: 1.6fr 1fr; 
  gap: clamp(18px, 3vw, 36px); 
  align-items: start; 
  font-family: 'Montserrat', sans-serif; 
}

.story-main p{ 
  margin: 0 0 1rem; 
  line-height: 1.7; 
  max-width: 70ch; 
}

.story-aside{ 
  position: relative; 
  padding: clamp(12px, 2vw, 20px);  
}

.story-aside-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.story-quote{ 
  font-size: clamp(1.4rem, 3vw, 2rem); 
  line-height: 1; 
  margin: 0 0 .75rem; 
}

.story-list{ 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: .35rem; 
  opacity: .9; 
}

.story-list li{ 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}


#brand-story .story-main > p{
  margin: 0 0 1rem;
  line-height: 1.8;
  text-wrap: balance;
  max-width: none;
  text-align: inherit;
}


#brand-story .story-main > p br{
  display: block;
  margin: 0.9rem 0;
}


#brand-story .story-main > p::after{
  content: none !important;
  display: none !important;
}


@media (min-width: 1024px){
  #brand-story .story-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 960px){ 
  .story-grid{ grid-template-columns: 1fr; } 
  .story-aside{ order: -1; } 
}

@media (max-width: 720px){
  #brand-story .story-main > p{ line-height: 1.75; }
  #brand-story .story-main > p br{ margin: 0.7rem 0; }
}
#brand-story .story-main > p{
  margin: 0 0 1rem;
  line-height: 1.8;
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-break: normal;
  text-wrap: normal;
}
/* optional: tiny extra air between paragraphs */
#brand-story .story-main > p + p{ margin-top: 0.25rem; }







.icon-square{
  --icon-size: 1.6rem;
  --icon-color: #d85c6d;
  width: var(--icon-size);
  aspect-ratio: 1;
  background: var(--icon-color);
  flex-shrink: 0;
  margin-top: 0.35rem;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
  transition: transform .25s ease, clip-path .25s ease, background .25s ease, border-radius .25s ease, box-shadow .25s ease;
}
.icon-square{
    clip-path: polygon(
    50% 88%,
    90% 53%, 80% 30%, 63% 25%,
    50% 36%,
    37% 25%, 20% 30%, 10% 53%
  );
}

.icon-square.is-heart{
  clip-path: polygon(
    50% 88%,
    90% 53%, 80% 30%, 63% 25%,
    50% 36%,
    37% 25%, 20% 30%, 10% 53%
  );
}
.icon-square.is-badge{
  background:
    conic-gradient(
      from 0turn,
      var(--icon-color, #d85c6d) 0 10%,
      transparent 10% 20%,
      var(--icon-color, #d85c6d) 20% 30%,
      transparent 30% 40%,
      var(--icon-color, #d85c6d) 40% 50%,
      transparent 50% 60%,
      var(--icon-color, #d85c6d) 60% 70%,
      transparent 70% 80%,
      var(--icon-color, #d85c6d) 80% 90%,
      transparent 90% 100%);
  -webkit-mask: radial-gradient(circle closest-side, #000 66%, transparent 67%);
          mask: radial-gradient(circle closest-side, #000 66%, transparent 67%);
  border-radius: 50%;
}
.icon-square.is-ring{
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 42%,
      var(--icon-color, #d85c6d) 43% 100%);
}
.icon-square.is-cube{
  background: linear-gradient(135deg, #d85c6d 50%, #b94d5c 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.icon-square.is-bolt{
  clip-path: polygon(
    36% 0%, 66% 0%, 52% 34%, 74% 34%,
    30% 100%, 44% 60%, 28% 60%
  );
}








.site-header .nav-bar{ position: relative; border: 1px solid transparent; }
.site-header.on-dark .nav-bar{ border-color: rgba(150,150,150,0.2); }
.site-header.on-light .nav-bar{ border-color: rgba(20,20,20,0.2); }























#cap-cta .cap-card { position: relative; isolation: isolate; }
#cap-cta .cap-card-media { position:absolute; inset:0; z-index:0; }

#cap-cta .cap-card::after{
  content:"";
  position:absolute; inset:0;
  background-image: url('img/great2.gif');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
  pointer-events: none;
}
#cap-cta .cap-card::before{ z-index: 2; }
#cap-cta .cap-card-text,
#cap-cta .cap-arrow{ z-index: 3; }
#cap-cta .cap-card:hover::after,
#cap-cta .cap-card:focus-visible::after{ opacity: .4; } /* tweak strength: .35–.65 */







.site-footer--centered-brand .brand-contact{
  position: absolute;
  /* 3.3333% = 100% - (50% + (1120/2)/1200*100%) -> pins to right edge of SVG text */
  right: calc(3.3333% + var(--brand-email-nudge-x));
  bottom: calc(10px + var(--brand-email-nudge-y));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0;
  background: transparent;
  max-width: 320px;
  white-space: nowrap;
}
.site-footer--centered-brand .brand-social{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.site-footer--centered-brand .brand-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: clamp(32px, 3.2vw, 40px);
  height: clamp(32px, 3.2vw, 40px);
  color: #ffffff;
  text-decoration: none;
  transition: color .16s ease, transform .12s ease;
  line-height: 0;
}
.site-footer--centered-brand .brand-social svg{
  width: clamp(16px, 1.6vw, 20px);
  height: auto;
  display:block;
}




.site-footer--centered-brand .brand-email{
  font-family:'MonumentExtendedUltrabold',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:15px;
  color:#e5e5e5;
  text-decoration:none;
  padding:0;
  margin:0;
  line-height:1;
  white-space:nowrap;
}
@media (max-width: 520px){
  .site-footer--centered-brand .brand-contact{
    position: static;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    margin-top: .25rem;
    max-width: none;
  }
  .site-footer--centered-brand .brand-social a{
    width: 36px;
    height: 36px;
  }
  .site-footer--centered-brand .brand-social svg{
    width: 18px;
  }
  .site-footer--centered-brand .brand-email{
    font-size:13px;
  }
}

.site-footer--centered-brand .brand-email{
  position: relative;
  z-index: 2;
}












.gradient-background1 {
  background: linear-gradient(300deg,#ebbb84,#ee9681,#dd4b6b,#d10d45);
  background-size: 240% 240%;
  animation: gradient-animation 24s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}










.overlay-getit{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 15;
  padding-top: 7rem; /* accounts for fixed header */
}
.getit-title{
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .88;
  font-size: clamp(3rem, 15vw, 15rem);
}
@media (max-width: 420px){
  .getit-title{ font-size: clamp(2.6rem, 15vw, 8rem); }
}








[data-getit].getit-anim {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
[data-getit].getit-anim .gi-ch {
  display: inline-block;
  transform: translateY(-0.6em) scale(0.92);
  filter: blur(4px);
  opacity: 0;
  animation: gi-drop 600ms cubic-bezier(.2,.7,0,1) forwards;
  animation-delay: calc(var(--i) * 60ms);
  will-change: transform, filter, opacity; 
}
@keyframes gi-drop {
  60% { transform: translateY(0) scale(1.02); filter: blur(0); opacity: 1; }
  100%{ transform: translateY(0) scale(1.00); filter: blur(0); opacity: 1; }
}


[data-getit].getit-anim::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  bottom: -0.15em;
  transform-origin: left center;
  transform: scaleX(0);
  background: currentColor;
  opacity: .9;
  animation: gi-uline 520ms ease-out forwards;
  animation-delay: calc((var(--count) - 1) * 60ms + 220ms);
}
@keyframes gi-uline { from {transform:scaleX(0);} to {transform:scaleX(1);} }


[data-getit].getit-anim .gi-uline-proxy {
  display: block;
  height: 2px;
  margin-top: 0.15em;
  visibility: hidden;
  pointer-events: none;
}

[data-getit].getit-anim::after { content: none !important; }

















.whatwedo-section {
  background:#080808;
  /*border-bottom:1px solid rgba(255,255,255,0.08);*/
  padding: clamp(48px, 10vw, 120px)  clamp(16px, 6vw, 48px);
  color:#fff;
}
.whatwedo-wrap{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.whatwedo-wrap { container-type: inline-size; }
.whatwedo-title{
  margin: 0;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 8vw, 6rem);
  display: inline-block;
}
.whatwedo-title .wwd-static{
  color:#ffffff;
}
.whatwedo-title .wwd-dynamic{
  display:inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  opacity:.95;
}
#wwd-text{
  display:inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
}
.whatwedo-title .wwd-dynamic { 
  /* parentheses are real chars in HTML; nudge them slightly */
}
.whatwedo-title .wwd-dynamic > :is(#wwd-text) {
  /* no extra spacing; rely on HTML spaces */
}


.whatwedo-sub{
  margin: clamp(12px, 2.6vw, 24px) auto 0;
  max-width: 62ch;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  line-height: 1.6;
  color:#eaeaea;
  opacity:.92;
}


#what-we-do{ display:block; }
.wwd-dynamic{ display:inline-block; }
#wwd-text{ display:inline-block; white-space:nowrap; }



#what-we-do #wwd-text{
  position: relative;
  display: inline-grid;
  place-items: center start;
  overflow: hidden;
  isolation: isolate;
}
#what-we-do #wwd-text .wwd-layer{
  grid-area: 1 / 1;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  opacity: 1;
}
#what-we-do #wwd-text .is-enter{ transform: translateY(0%); }
#what-we-do #wwd-text .is-leave{ transform: translateY(-100%); }
#what-we-do #wwd-text .is-idle { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce){
  #what-we-do #wwd-text .wwd-layer{ transition:none!important; transform:none!important; }
}

#what-we-do #wwd-text{ place-items: center center; }
#what-we-do #wwd-text .wwd-layer{ justify-self: center; }
#what-we-do #wwd-text .wwd-layer.no-trans{ transition: none !important; }
#what-we-do #wwd-text.wwd-xl{
  font-size: clamp(3.6rem, 18vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: .02em;
}

#what-we-do #wwd-text{ display:inline-grid; place-items:center center; overflow:hidden; }
#what-we-do #wwd-text .wwd-layer{ justify-self:center; }
#what-we-do #wwd-text .wwd-layer.no-trans{ transition:none !important; }
#what-we-do #wwd-text .wwd-layer.gradient-ideas{
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.whatwedo-wrap{ container-type:inline-size; }
#what-we-do #wwd-text{ display:inline-grid; place-items:center center; overflow:hidden; }
#what-we-do #wwd-text .wwd-layer{ justify-self:center; }
#what-we-do #wwd-text .wwd-layer.no-trans{ transition:none !important; }
#what-we-do #wwd-text .wwd-layer.gradient-ideas{
  background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}


#what-we-do #wwd-text.wwd-xl{
  font-size: clamp(3.6rem, 18vw, 7.5rem);
  line-height:.98; letter-spacing:.02em;
}


@container (max-width: 560px){
  #what-we-do #wwd-text.wwd-xl{
    font-size: min(20cqw, 3.8rem); 
    letter-spacing: 0;
  }
}

@media (max-width: 560px){
  @supports not (font-size: 1cqw){
    #what-we-do #wwd-text.wwd-xl{ font-size: clamp(2.2rem, 12vw, 3.8rem); }
  }
}

@media (max-width: 560px) {
  .whatwedo-section { overflow-x: hidden; }
  .whatwedo-dynamic-row {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .whatwedo-dynamic-row .whatwedo-title {
    display: block;
    margin: 0;
  }
  #what-we-do #wwd-text {
    max-width: 100%;
    overflow: hidden;
  }
}
@media (max-width: 880px){
  .whatwedo-title{ font-size: clamp(2rem, 9vw, 4rem); }
}
@media (max-width: 520px){
  .whatwedo-section{ padding: clamp(36px, 12vw, 64px) 16px; }
  .whatwedo-title{ letter-spacing: .035em; }
  .whatwedo-sub{ font-size: clamp(0.98rem, 3.8vw, 1.1rem); }
}

@media (prefers-reduced-motion: reduce){
  .whatwedo-title, .whatwedo-sub, #wwd-text { transition: none !important; }
}

/* 2) Preferred: scale the dynamic word to the container width */
@container (max-width: 560px) {
  #what-we-do #wwd-text {
    font-size: min(20cqw, 3.6rem);
    letter-spacing: 0; 
  }
}

/* 3) Fallback when container units aren't supported */
@media (max-width: 560px) {
  @supports not (font-size: 1cqw) {
    #what-we-do #wwd-text {
      font-size: clamp(2rem, 11.5vw, 3.6rem);
      letter-spacing: 0;
    }
  }
}
@media (min-width: 350px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 36px !important; } }
@media (min-width: 370px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 38px !important; } }
@media (min-width: 390px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 40px !important; } }
@media (min-width: 410px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 42px !important; } }
@media (min-width: 430px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 44px !important; } }
@media (min-width: 450px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 46px !important; } }
@media (min-width: 470px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 48px !important; } }
@media (min-width: 490px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 52px !important; } }

/* Tablet+ (50px steps) */
@media (min-width: 500px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 56px !important; } }
@media (min-width: 550px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 60px !important; } }
@media (min-width: 600px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 64px !important; } }
@media (min-width: 650px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 68px !important; } }
@media (min-width: 700px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 72px !important; } }
@media (min-width: 750px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 76px !important; } }
@media (min-width: 800px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 80px !important; } }

/* Desktop (coarser steps; tweak as you like) */
@media (min-width: 900px)  { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 92px !important; } }
@media (min-width: 1024px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 104px !important; } }
@media (min-width: 1200px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 116px !important; } }
@media (min-width: 1400px) { #what-we-do #wwd-text, #what-we-do #wwd-text.wwd-xl { font-size: 128px !important; } }














.qoq-arc{
  background:#fff;
  background:#080808;
  color:#000;
  block-size: clamp(300px, 28vh, 700px);
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:0 12px;
  border-top:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.qoq-arc__wrap{ inline-size:min(1400px,100%); block-size:100%; }

.qoq-arc__svg{
  display:block;
  inline-size:100%;
  block-size:100%;
  overflow:visible;
  preserveAspectRatio:xMidYMid meet;
}

.qoq-arc__text{
  font-family:'MonumentExtendedUltrabold','MonumentExtended',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1;
  fill:#ffffff;
  font-size:4.6rem;
}












#gi-cta.gi-cta{
  display: flow-root;
  padding-block: clamp(4rem, 12vw, 10rem);
  /* Animated light gradient */
  --gi1:#ffffff; --gi2:#fff9f8; --gi3:#ebbb84; --gi4:#dd4b6b;
  background: linear-gradient(300deg,var(--gi1),var(--gi2),var(--gi3),var(--gi4));
  background-size: 240% 240%;
  animation: gi-cta-gradient 24s ease infinite;
  color:#0b0b0f;
}
@keyframes gi-cta-gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Centered column, no vertical margins (prevents white bands) */
.gi-cta__container{
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 32px);
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.gi-cta__title{
  margin: 0;
  font-family: 'MonumentExtendedUltrabold', system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  color:#000;
}

.gi-cta__lead{
  margin: 0;
  max-width: 52rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color:#222;
}

.gi-cta__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gi-cta__link:focus{ outline: 2px solid #000; outline-offset: 2px; }

.gi-cta__btn{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: max-content;
  padding: 1rem 1.5rem;
  border-radius: 2px;
  border: 1px solid #000;
  background:#000;
  color:#fff;
  text-decoration: none;
  font-family: 'MonumentExtendedUltrabold', system-ui, sans-serif;
  letter-spacing: .04em;
  transition: background .2s ease, border-color .2s ease;
}
.gi-cta__arrow{ width: 24px; height: 24px; transition: transform .3s ease; }
.gi-cta__btn:hover .gi-cta__arrow{ transform: translateX(6px); }

@media (max-width: 640px){
  /* Keep spacing comfortable on phones */
  #gi-cta.gi-cta{ padding-block: clamp(2.25rem, 10vw, 4rem); }
}












#cap-cta .start-button1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.8vw, 20px);
  width: max-content;
  margin: 0;
  place-self: start; align-self: flex-start; justify-self: start;

  position: relative;
  border: 1px solid #ffffff;
  border-radius: 2px;
  /*background: linear-gradient(300deg,#ebbb84,#ee9681,#dd4b6b,#d10d45);
  background-size: 240% 240%;
  animation: gradient-animation 24s ease infinite;*/
  background: #000000;

  min-height: clamp(100px, 12vw, 100px);
  padding-inline: clamp(6px, 0.8vw, 12px);
}


#cap-cta .start-button1 .cta-text{
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  color: #fff;
  background: none;
  line-height: 1;
  letter-spacing: .06em;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.8rem) clamp(1.8rem, 3.2vw, 2.8rem);
}

#cap-cta .start-button1 .cta-icon{
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  padding: 0 clamp(1rem, 2vw, 1.4rem);
}
#cap-cta .start-button1 .cta-icon svg{
  width: clamp(22px, 2.6vw, 30px);
  height: clamp(22px, 2.6vw, 30px);
}
#cap-cta .start-button1:hover{
  background-color: #00000060;
  border: 1px solid #00000050;
}
@media (prefers-reduced-motion: reduce){
  #cap-cta .start-button1{ animation: none; }
}
















.hero-title .hero-ideas{
  font-size: clamp(1.08em, calc(2em + 0.6vw), 1.24em);
  line-height: 0.9;
  display: inline-block;
}

/* $$$ centered over SELL and above it */
.overlap-wrap{ position: relative; display: inline-block; isolation: isolate; } /* ensures local stacking */
.overlap-word{ position: relative; z-index: 1; }


@media (max-width: 640px){
  .overlap-dollar{ font-size: 0.62em; }
  .hero-title .hero-ideas{ font-size: 1.08em; }
}












.nav-bar{
  position: relative; 
}


.lang-switch{
  position: absolute;
  right: 0rem;
  bottom: -2.5rem;
  display: flex;
  align-items: center;
  background-color: rgb(2 2 2 / 40%);
  border: 1px solid rgba(255,255,255,.10);
  z-index: 60;
  line-height: 1;

  border-radius: 0;
}


.lang-switch .lang-item{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .5rem;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .875rem;
  color: #fff;
  text-decoration: none;
  height: 100%;
}

.lang-switch .lang-item:hover{
  text-shadow: 0 0 16px #fff, 0 0 28px #fff;
}

.site-header.on-dark .lang-switch{ border-color: rgba(150,150,150,0.2); }
.site-header.on-light .lang-switch{ border-color: rgba(20,20,20,0.2); }

.site-header.on-dark .lang-switch .lang-item + .lang-item{
  border-left-color: rgba(150,150,150,0.2);
}
.site-header.on-light .lang-switch .lang-item + .lang-item{
  border-left-color: rgba(20,20,20,0.2);
}

@media (max-width: 720px){
  .lang-switch{ right: 0rem; }
}




.lang-switch{ --glow: 255,255,255; }

.lang-switch .flagimg{ 
  width:16px; height:12px; display:block; object-fit:cover; border-radius:2px;
  transition: filter .2s ease, transform .2s ease;
}
.lang-switch .code{
  transition: text-shadow .2s ease, color .2s ease;
}

/* 3) Hover glow (PNG/SVG) — use drop-shadow on the image */
.lang-switch .lang-item:hover .flagimg{
  /* multiple shadows = stronger glow; brightness/saturate to punch colors */
  filter:
    brightness(1.10) saturate(1.15)
    drop-shadow(0 0 6px  rgba(var(--glow), .85))
    drop-shadow(0 0 16px rgba(var(--glow), .65));
  -webkit-filter:
    brightness(1.10) saturate(1.15)
    drop-shadow(0 0 6px  rgba(var(--glow), .85))
    drop-shadow(0 0 16px rgba(var(--glow), .65));
}











#ideas-hero2{ --hero2-size: clamp(2.8rem, 12vw, 14rem); }  /* override per-section if needed */
#ideas-hero2 .ideas-hero2__title{
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: var(--hero2-size); /* resizable via --hero2-size */
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .9;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,.35), 0 0 34px rgba(255,255,255,.25); /* why: readability on bright frames */
  user-select: none;
  white-space: nowrap;          /* keep it single-line like start.html hero */
}

#ideas-hero2 .ideas-hero2__title{ white-space: normal; word-break: break-word; text-wrap: balance; }








#brand-story{
  --text-scroll-h: 44px;
  --text-scroll-speed: 95s; /* smaller = faster */
}

/* the bar itself */
#brand-story .text-scrolling{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: var(--text-scroll-h);
  overflow: hidden;

  display: flex;
  align-items: center;

  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(10px);

  z-index: 5;
}

/* track moves RIGHT (reuses your existing @keyframes scrollRight) */
#brand-story .text-scrolling__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: scrollRight var(--text-scroll-speed) linear infinite;
}

#brand-story .text-scrolling__content{
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  white-space: nowrap;

  font-family: 'MonumentExtendedUltrabold', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1;
}

/* push your existing story content down so the bar sits on the top edge */
#brand-story .story-wrap{
  padding-top: calc(clamp(40px, 2vw, 120px) + var(--text-scroll-h));
}

@media (max-width: 520px){
  #brand-story{ --text-scroll-h: 38px; }
  #brand-story .text-scrolling__content{ gap: 1.1rem; letter-spacing: .11em; }
}

@media (prefers-reduced-motion: reduce){
  #brand-story .text-scrolling__track{
    animation: none;
    transform: translateX(0);
  }
}









/* 2) If what you meant is the #ideas-hero2 overlay title, raise its cap */
#ideas-hero2{
  --hero2-size: clamp(6rem, 18vw, 28rem);
}


/* =========================
   stylephone.css (replace your current .custom-bg .scroll-line override)
   ========================= */

@media (max-width: 640px){
  .custom-bg .scroll-line{
    font-size: min(34vw, 24vh) !important;
    line-height: 0.9 !important;
  }
}