/* ============================================================
   MANGO STUDIO — warm rebrand of the Cinery (dark) template.
   Loaded after the template CSS; flips the dark monochrome
   theme to the warm Mango palette + Viga/Poppins.
   ============================================================ */
:root{
  /* Dark -> warm light flip */
  --background-color--primary-background:#FFFCF7;
  --background-color--secondary-background:#FFF4E1;
  --primary-color--black:#1F2430;
  --primary-color--white:#1F2430;        /* text was white -> ink */
  --primary-color--dark:#FFFFFF;          /* dark surfaces -> white paper */
  --primary-color--dark-02:#5b2b6e;
  --primary-color--dark-03:#7a4b8c;
  --neutral-color--secondary-neutral:#6b6b6b;
  --border-color--primary-border:rgba(31,36,48,.12);
  --border-color--secondary-border:rgba(31,36,48,.18);
  /* Fonts: Overused Grotesk -> Poppins (body) + Viga (display) */
  --_typography---font-family--primary:"Poppins",Arial,sans-serif;
  --_typography---h1--h1-font-family:"Viga","Poppins",sans-serif;
  --_typography---h2--h2-font-family:"Viga","Poppins",sans-serif;
  --_typography---h3--h3-font-family:"Viga","Poppins",sans-serif;
}
html,body{ background:#FFFCF7 !important; color:#1F2430; font-family:"Poppins",sans-serif; }
/* Mango accent on buttons */
.link-button .button-background-01,.link-button .button-background-02{ background-color:#F97316 !important; }
.link-button .button-text{ color:#ffffff !important; }
.button-border{ border-color:rgba(249,115,22,.6) !important; }
/* Nav links in ink */
.nav-link,.nav-text{ color:#1F2430 !important; }
/* Logo sizing (img replaced via HTML) */
.logo{ height:40px !important; width:auto !important; }

/* ---- Warm gradient display headings (replaces Cinery white->black text gradient) ---- */
.heading-style-h1,.heading-style-h2,.heading-style-h3,.cube-title,.cta-text,.service-title,.prcing-title,
.blog-post-title,.blog-title,.utility-page-title,.section-number,.process-number,.form-heading,
.text-rich-text h1,.text-rich-text h2,.text-rich-text h3,.fs-styleguide-heading-header,.fs-styleguide-heading-medium{
  background-image:linear-gradient(165deg,#5b2b6e 0%,#F97316 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.heading-style-h4,.heading-style-h5,.heading-style-h6,
.text-rich-text h4,.text-rich-text h5,.text-rich-text h6{
  background-image:none!important; -webkit-text-fill-color:#5b2b6e!important; color:#5b2b6e!important;
}
/* ---- Primary button -> Mango orange (only real buttons via .button-background;
   NOT .link-button, which is used for plain footer text links) ---- */
.button-background-01,.button-background-02{ background-color:#F97316!important; background-image:none!important; }
.main-button .button-text{ color:#ffffff!important; }
.button-border{ border-color:rgba(249,115,22,.55)!important; }
/* Footer / inline text links (.link-button) are plain text, not orange chips */
.link-button{ background-color:transparent!important; background-image:none!important; }
.link-text{ color:#1F2430!important; }
.link-button:hover .link-text{ color:#F97316!important; }
/* CTA marquee band: dark radial (#000) -> warm cream card */
.cta-button-background,.cta-button-background._01,.cta-button-background._02{
  background-image:radial-gradient(circle,#FFF4E1,#FFFCF7)!important; border-color:rgba(31,36,48,.08)!important;
}
/* Contact form submit button: dark -> Mango orange */
input[type="submit"].button,input[type="submit"].w-button,.button.w-button{
  background-color:#F97316!important; background-image:none!important; color:#fff!important;
  border:none!important; border-radius:2.5rem!important;
}
input[type="submit"].w-button:hover,.button.w-button:hover{ background-color:#e8650a!important; }
/* "One Studio" capability tiles: labels sit on a dark scrim -> white text */
.member-content-wrap .text-size-large{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
.member-content-wrap .text-color-secondary,.member-content-wrap .text-size-regular{ color:rgba(255,255,255,.88)!important; }

/* Subheadline: smaller (was too large) */
.section-home-header .text-size-large{ font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important; line-height: 1.5 !important; max-width: 60ch; }

/* Remove "Made in Webflow" badge */
.w-webflow-badge{ display:none !important; }
/* Lighten Cinery's dark placeholder videos -> warm light design (until real media is added) */
.w-background-video, .background-video{ background-color:#FFF4E1 !important; }
.w-background-video > video, .background-video > video{ filter: brightness(1.5) saturate(.82) sepia(.12) contrast(.92) !important; }

/* Hero floating cube labels: were grey + mix-blend difference (showed green
   against the light bg) -> solid plum, normal blend so the color reads true */
.cube-text{ color:#5b2b6e !important; -webkit-text-fill-color:#5b2b6e !important; mix-blend-mode:normal !important; }
/* Service-title grey resting copy: ensure the warm gradient (not neutral grey) */
.service-title.text-color-grey{
  background-image:linear-gradient(165deg,#5b2b6e 0%,#F97316 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important; color:transparent!important;
}
/* Kill the full-bleed dark background video -> light cream hero/statement bg */
.background-video-wrapper{ background:#FFFCF7 !important; }
.background-video-wrapper video, .background-video-wrapper .background-video{ display:none !important; }
/* Hero video fade overlay faded to #000 -> fade to cream (soft section blend) */
.video-opacity{ background-image:linear-gradient(rgba(255,252,247,0),#FFFCF7)!important; }
/* Partner logos: ensure they read on light (our colored logos) */
.partner-logo{ filter:none !important; opacity:1 !important; max-height:34px; width:auto; }
/* Case studies: real client mockups now sit in .case-video as bg images.
   Hide the placeholder logoipsum logos + soften the dark image overlay. */
.case-logo{ display:none !important; }
.case-study-overlay{ background-color:rgba(91,43,110,.06) !important; }
.case-video{ background-size:cover !important; background-position:center !important; }