/*
 * ZOOM LIVE - White Theme Restyle
 * Concept: Luminous Minimalist Spectacle
 * Core colors: Pure White, Cobalt Blue, Deep Charcoal
 */

:root {
  /* BACKGROUNDS (formerly dark) -> WHITE/LIGHT */
  --swatch--dark-900: #ffffff; /* Main background */
  --swatch--dark-800: #f4f4f5; /* Secondary offset background */
  --swatch--dark-700: #e5e5e5;
  --swatch--dark-600: #d4d4d4;
  --swatch--dark-200: #737373;
  --swatch--dark-100: #404040;
  
  /* Semi-transparent overlays for the new light theme */
  --swatch--dark-900-o20: rgba(255, 255, 255, 0.7);

  /* FOREGROUNDS (formerly light) -> DARK */
  --swatch--light-100: #0a0a0a; /* Main text */
  --swatch--light-200: #27272a; /* Secondary text */
  
  /* Dark transparent layers */
  --swatch--light-100-o10: rgba(10, 10, 10, 0.05);
  --swatch--light-100-o20: rgba(10, 10, 10, 0.15);
  --swatch--light-100-o80: rgba(10, 10, 10, 0.8);

  /* BRAND ACCENT — Zoom orange (the brand's only accent color) */
  --swatch--brand-500: #FF7300;
  --swatch--brand-300: #FF9B4D;
  --swatch--brand-600: #CC5C00;
  --swatch--brand-text: #ffffff;
  
  /* Fallback aliases if anything relies on these */
  --black: #ffffff;
  --white: #000000;
  --zoom-orange: var(--swatch--brand-500);

  /* THEME MAPPINGS */
  --_theme---background: var(--swatch--dark-900);
  --_theme---background-2: var(--swatch--dark-800);
  --_theme---text: var(--swatch--light-100);
  --_theme---border: rgba(0,0,0,0.1);
  --_theme---nav--background: rgba(255, 255, 255, 0.95);

  /* TYPOGRAPHY OVERRIDES (Lighter weights on white background for elegance) */
  --_typography---font--primary-regular: 300;
  --_typography---font--primary-medium: 400;
  --_typography---font--primary-semibold: 500;
  --_typography---font--primary-bold: 600;
}

/* =========================================
   DEEP HARDCODED OVERRIDES
   ========================================= */

/* GLOBAL DARK OVERRIDES */
body, .page_wrap, .page_main,
.footer_wrap,
.about_bod_wrap .modal_content,
.video-modal__panel,
.work_section {
  background: var(--swatch--dark-900) !important;
  background-color: var(--swatch--dark-900) !important;
  color: var(--swatch--light-100) !important;
}

/* CARDS & ELEMENTS: White background, subtle border */
#brand-foundations .bf_principle,
.bod_card,
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_item,
.zoom-services-disciplines-grid .services_item,
.blog_item {
  background: var(--swatch--dark-900) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* DARK OFFSETS */
.spotlight_intro,
#brand-foundations .bf_promise,
.recognition_cert_img,
html::-webkit-scrollbar {
  background: var(--swatch--dark-800) !important;
  background-color: var(--swatch--dark-800) !important;
}

/* About team intro: this title section is the white break before the dark
   team cards below it. */
.about_bod_title_wrap.u-section {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #070707 !important;
}
.about_bod_title_wrap .eyebrow_text p,
.about_bod_title_wrap .bod_head_grid > div > div,
.about_bod_title_wrap .bod_head_grid > p,
.about_bod_title_wrap h2 {
  color: #070707 !important;
}
.about_bod_title_wrap h2 span {
  color: #FF7300 !important;
}

/* White canvas behind the About sub-brands and Behind The Scenes sections.
   The individual sub-brand cards stay dark as framed content. */
main > div.u-zindex-3:has(.sticky-card-wrap),
main > div.u-zindex-3 > div.u-zindex-3:has(.sticky-card-wrap),
main > div.u-zindex-3 > div.u-zindex-3:has(.sticky-card-wrap) > section,
main > div.u-zindex-3 > section:has(.bts_contain) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
main > div.u-zindex-3 > div.u-zindex-3:has(.sticky-card-wrap) .marquee-advanced,
main > div.u-zindex-3 > section:has(.bts_contain) .marquee-advanced {
  background: #ffffff !important;
}
main > div.u-zindex-3 > section:has(.bts_contain) .bts_text {
  color: #070707 !important;
}

/* ORANGE TO COBALT OVERRIDES - TEXT */
#brand-foundations .bf_num,
.bod_card_info h2,
.services_number_wrap .u-opacity-60,
.zoom-services-disciplines-grid .services_number_wrap .u-opacity-60,
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_number_wrap .u-opacity-60,
.sector_item:hover [data-sector-title],
.sector_item:focus-visible [data-sector-title] {
  color: var(--swatch--brand-500) !important;
}

/* ORANGE TO COBALT OVERRIDES - BACKGROUND (and corresponding borders) */
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_item:hover,
.zoom-services-disciplines-grid .services_item:hover,
#sectors .sector_item:hover, 
#sectors .sector_item:focus-visible,
.recognition_row:hover,
.services_item:hover {
  background: var(--swatch--brand-500) !important;
  background-color: var(--swatch--brand-500) !important;
  border-color: var(--swatch--brand-500) !important;
  border-top-color: var(--swatch--brand-500) !important;
}

/* Ensure text inside hovered/active blue backgrounds remains readable */
#sectors .sector_item:hover *,
#sectors .sector_item:focus-visible *,
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_item:hover *,
.zoom-services-disciplines-grid .services_item:hover *,
.recognition_row:hover *,
.services_item:hover * {
  color: #ffffff !important;
}

/* ORANGE TO COBALT OVERRIDES - BORDER ONLY */
#brand-foundations .bf_principle:hover,
.bod_card:hover, .bod_card:focus-visible {
  border-color: var(--swatch--brand-500) !important;
  box-shadow: 0 10px 40px rgba(255, 115, 0, 0.15) !important;
}

/* NAV LINKS */
.nav_desktop_link::after {
  background: linear-gradient(100deg, var(--swatch--brand-600) 0%, var(--swatch--brand-500) 70%) !important;
}
.nav_desktop_link:hover .nav_desktop_link_text, 
.nav_desktop_link:hover .nav_desktop_link_subtext,
.nav_desktop_link.is-current-page .nav_desktop_link_text,
.nav_desktop_link.is-current-page .nav_desktop_link_subtext {
  color: #ffffff !important;
}

/* INSIGHTS CAPSULES */
.insights-section-btn {
  background: rgba(0,0,0,0.06) !important;
  color: var(--swatch--light-100) !important;
}
.insights-section-btn:hover,
.insights-section-btn[data-filter-status="active"] {
  background: var(--swatch--brand-500) !important;
  color: #ffffff !important;
}

/* BACK TO TOP */
#zoom-backtotop {
  background: var(--swatch--brand-500) !important;
  color: #ffffff !important;
}
#zoom-backtotop:hover {
  background: var(--swatch--brand-600) !important;
}

/* SOFTEN SPOTLIGHT ORANGE GLOWS (keep brand orange, just subtle on white) */
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_item::after,
.zoom-services-disciplines-grid .services_item::after,
#brand-foundations .bf_principle::after {
  opacity: 0.05 !important;
}

/* BRAND FOUNDATIONS GRID LINES */
#brand-foundations .bf_row,
#brand-foundations .bf_promise_bottom {
  border-top-color: rgba(0,0,0,0.08) !important;
}

/* TEAM CARDS GRADIENT */
.bod_card_info {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 40%, #ffffff 100%) !important;
}
.bod_card_info h2 {
  color: var(--swatch--light-100) !important;
}
.bod_card:hover .bod_card_info h2,
.bod_card:focus-visible .bod_card_info h2 {
  color: var(--swatch--brand-500) !important;
}

/* =========================================
   PHOTOGRAPHY & DESIGN TOUCHES
   (Full-bleed dark sections framing)
   ========================================= */

/* Hero video/images on index, about, and cases are often full screen black.
   Constrain them to floating gallery cards instead. */
.home_hero_contain,
.about_header_wrap.u-section,
.cs_hero_section,
.blog_hero_section,
.videos_hero_section,
.parallax-demo-row__half {
  /* --max-width--main is ~full width at common viewports, so use an
     explicit inset to make the white gallery frame visible */
  max-width: min(calc(100% - 5rem), 1400px);
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.08) !important;
}

/* Make sure inner absolute positioning behaves inside the new constrained bounds */
.home_hero_contain,
.about_header_wrap.u-section,
.cs_hero_section,
.blog_hero_section,
.videos_hero_section {
  position: relative !important;
  min-height: 0 !important;
  height: max(70vh, 500px) !important;
}

/* Target the wrapper sections that used to bleed black to the edges */
.u-section.u-min-height-screen:has(.home_hero_contain),
.u-section:has(> .about_header_contain) {
  min-height: 0 !important;
  background: var(--swatch--dark-900) !important;
  padding: 2rem 1rem !important;
}

/* Protect text readability overlaying these images by ensuring the images stay dark 
   or giving the text a subtle dark scrim */
.home_hero_title_wrap,
.about_header_contain {
  position: relative;
  z-index: 5;
}

/* Adjust margins on About page header since it's now framed */
.about_header_wrap.u-section {
  margin-top: 5rem !important;
  margin-bottom: 4rem;
}

/* About hero: match the home hero's breathing room and keep all overlay
   content readable against the photography. */
.about_header_wrap .u-section-spacer:first-child {
  height: 3rem !important;
}
.about_header_contain {
  padding: 1.5rem 2.5rem 2.5rem !important;
}
.about_header_contain > h1,
.about_header_contain .about_header_text,
.about_header_contain .about_header_text *,
.about_header_contain .about_stats_grid .u-text-style-main {
  color: #ffffff !important;
}
.about_header_contain > h1 {
  opacity: 1 !important;
}
.about_header_contain .about_stats_grid .u-text-style-main {
  opacity: 0.8 !important;
}
.about_header_contain .insights-section-btn {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}
.about_header_contain .insights-section-btn:hover,
.about_header_contain .insights-section-btn:focus-visible {
  background: var(--swatch--brand-500) !important;
  border-color: var(--swatch--brand-500) !important;
  color: #ffffff !important;
}

@media screen and (max-width: 767px) {
  .about_header_contain {
    padding: 1rem !important;
  }
}

/* =========================================
   CASE STUDY HERO: HOME-STYLE FRAMED CARD
   ========================================= */
/* The case detail hero used to position its absolute image against the
   full section, which made it bleed to every viewport edge. Make the
   section a white frame and the inner hero the containing block. */
.u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap) {
  min-height: 0 !important;
  padding: 3rem 0 3rem !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap)
  > .u-section-spacer:first-child,
.u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap)
  > .u-section-spacer:last-child {
  height: 3rem !important;
}

.section_contain.work_heading_wrap {
  position: relative !important;
  isolation: isolate;
  width: calc(100% - 5rem) !important;
  max-width: 1400px !important;
  height: max(86vh, 640px) !important;
  min-height: max(86vh, 640px) !important;
  margin: 0 auto !important;
  padding: 2.5rem !important;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

.section_contain.work_heading_wrap > img.u-cover-absolute {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

.section_contain.work_heading_wrap > .work_overlay {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.62) 100%),
    rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

.section_contain.work_heading_wrap > .u-zindex-2 {
  position: relative;
  z-index: 2 !important;
}

.section_contain.work_heading_wrap .work_heading {
  max-width: 1050px;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

.section_contain.work_heading_wrap > .u-zindex-2 .work_heading_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.25rem;
  color: #ffffff !important;
}

.section_contain.work_heading_wrap
  > .u-zindex-2
  .work_heading_wrap
  .work_heading_subtext {
  color: var(--swatch--brand-500) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

@media screen and (max-width: 767px) {
  .u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap) {
    padding: 1rem 0 2rem !important;
  }

  .u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap)
    > .u-section-spacer:first-child,
  .u-section.u-min-height-screen:has(> .section_contain.work_heading_wrap)
    > .u-section-spacer:last-child {
    height: 2rem !important;
  }

  .section_contain.work_heading_wrap {
    width: calc(100% - 2rem) !important;
    height: max(74svh, 520px) !important;
    min-height: max(74svh, 520px) !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem;
  }

  .section_contain.work_heading_wrap .work_heading {
    max-width: 100%;
  }
}

/* Home stats band: framed card + lift the very dark inline image filter */
.parallax-demo-row__half {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.08) !important;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.parallax-demo-row__half .parallax-img[style*="brightness"] {
  filter: grayscale(1) brightness(.5) !important;
}

/* Structural borders around in-flow imagery so they feel curated on the white canvas */
.work_image_wrap,
.home_work_item .u-overflow-clip,
.blog_image_wrap,
.cs_image_wrap {
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* Soft inset shadow to ground dark imagery */
.work_image_wrap::after,
.home_work_item .u-overflow-clip::after,
.blog_image_wrap::after,
.cs_image_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), inset 0 0 40px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.4s ease;
}

.work_item:hover .work_image_wrap::after,
.home_work_item:hover .u-overflow-clip::after,
.blog_item:hover .blog_image_wrap::after {
  opacity: 0;
}

/* =========================================
   ICONS & GRAPHICS INVERSION
   ========================================= */

/* Explicitly scoped icon overrides preferring currentColor */
.nav_menu_icon-svg path[fill="#fff"],
.social_link svg path[fill="#fff"],
.menu_showreel_btn svg path[fill="#fff"],
.footer_group_item svg path[fill="#fff"] {
  fill: currentColor !important;
}

.footer_group_item svg path[stroke="#fff"] {
  stroke: currentColor !important;
}

.footer_link_wrap.is-large svg path[stroke="#000"] {
  stroke: currentColor !important;
}

/* Brand action icons on the white canvas. The shared down-right asset is
   orange at source; keep inline related-case arrows on the same token. */
img[src*="/down-right.svg"] {
  filter: none !important;
}

.cs_btn_wrap svg path[fill="#000"],
.cs_btn_wrap svg path[fill="#000000"] {
  fill: var(--swatch--brand-500) !important;
}

/* Keep the existing white arrow treatment when a related-case action is
   hovered over its orange background. */
.cs_work_item .work_item:hover .cs_btn_wrap svg path,
.related_work_item .work_item:hover .cs_btn_wrap svg path {
  fill: #ffffff !important;
}

/* Hover-state exceptions for elements that get Cobalt backgrounds */
.services_item:hover svg path[fill],
#sectors .sector_item:hover svg path[fill],
#sectors .sector_item:focus-visible svg path[fill],
.recognition_row:hover svg path[fill] {
  fill: #ffffff !important;
}

.services_item:hover svg path[stroke],
#sectors .sector_item:hover svg path[stroke],
#sectors .sector_item:focus-visible svg path[stroke],
.recognition_row:hover svg path[stroke] {
  stroke: #ffffff !important;
}

/* Specific buttons text color inheritance */
.btn-bubble-arrow__content-text {
  color: inherit !important;
}
.btn-bubble-arrow__arrow {
  color: var(--swatch--brand-500) !important;
}

/* The shared logo asset is now natively black/orange for the white theme.
   Do not filter it: invert/hue-rotate made the orange appear blue during
   Works-page transitions and while the asset was settling. */
.nav_mobile_logo img[src*="white"],
.footer_logo_wrap img[src*="white"] {
  filter: none !important;
}

.nav_menu_line {
  background-color: var(--swatch--light-100) !important;
}
.nav_menu_wrap {
  background-color: rgba(255, 255, 255, 0.98) !important;
}
.nav_menu_text {
  color: var(--swatch--light-100) !important;
}
.footer_link_bg {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Contact form fields need a visible edge on the white redesign. */
.form_main_field {
  background: #ffffff !important;
  border: 1px solid rgba(10, 10, 10, 0.28) !important;
  color: #070707 !important;
}
.form_main_field::placeholder {
  color: rgba(10, 10, 10, 0.52) !important;
  opacity: 1 !important;
}
.form_main_label_wrap:focus-within .form_main_field {
  border-color: var(--swatch--brand-500) !important;
  box-shadow: 0 0 0 2px rgba(255, 115, 0, 0.14) !important;
  outline: none !important;
}
.recognition_cert_img {
  background: var(--swatch--dark-800) !important;
  border: 1px solid rgba(0,0,0,0.08);
}
::selection {
  background: var(--swatch--brand-500) !important;
  color: #ffffff !important;
}
html { 
  scrollbar-color: #d4d4d8 #f4f4f5 !important; 
}
html::-webkit-scrollbar { 
  background: #f4f4f5 !important; 
}
html::-webkit-scrollbar-thumb { 
  background: #d4d4d8 !important; 
}
html::-webkit-scrollbar-thumb:hover { 
  background: var(--swatch--brand-500) !important; 
}

/* Rich-text paragraphs use the same near-black as the white theme */
.u-rich-text p {
  color: #191818 !important;
}

/* Statistics card descriptions stay readable over the dark imagery */
.parallax-demo-card .c-paragraph,
.parallax-demo-card .c-paragraph p {
  color: #ffffff !important;
}

/* Home "About Us" intro paragraph */
.about_heading .u-rich-text,
.about_heading .c-paragraph {
  opacity: 1 !important;
}

/* Typography refinements */
h1, h2, h3, .u-text-style-h1, .u-text-style-h2, .u-text-style-h3, .u-text-style-display {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
p, .c-paragraph, .u-text-style-text-main {
  font-weight: 300 !important;
}

/* Case-study and blog copy sits on the new white canvas, not the old dark
   page surface. Keep the hero text white because it overlays media. */
.cs_grid_info_column,
.cs_grid_info_column *,
.cs_grid_text_column,
.cs_grid_text_column *,
.cs_rich_text,
.cs_rich_text *,
.page_main > section > article[style*="color:#fff"],
.page_main > section > article[style*="color:#fff"] [data-post-title],
.page_main > section > article[style*="color:#fff"] [data-post-excerpt],
.page_main > section > article[style*="color:#fff"] [data-post-body],
.page_main > section > article[style*="color:#fff"] [data-post-body] * {
  color: #070707 !important;
}
.cs_grid_info_column .eyebrow_text p {
  color: var(--swatch--brand-500) !important;
}
.page_main > section > article[style*="color:#fff"] [data-post-category] {
  color: var(--swatch--brand-500) !important;
}
.page_main > section > article[style*="color:#fff"] [data-testid="link-back-to-blog"] {
  color: #070707 !important;
  border-color: rgba(10, 10, 10, 0.28) !important;
}

/* =========================================
   INLINE STYLE-ATTRIBUTE OVERRIDES
   (style="color:#FF7300" etc. beat stylesheet
   specificity; match the attribute itself)
   ========================================= */

/* Featured clients */
.featured_client .client-a {
  color: var(--swatch--light-100) !important;
}
.featured_client .client-b {
  color: var(--swatch--brand-500) !important;
}
.featured_client .client-a.client-accent {
  color: var(--swatch--brand-500) !important;
}

[style*="FF7300" i][style*="color" i] {
  color: var(--swatch--brand-500) !important;
}
[style*="FF7300" i][style*="background" i] {
  background-color: var(--swatch--brand-500) !important;
}

/* =========================================
   REMAINING HARDCODED ORANGE (inline <style>
   blocks + cms-loader injected rules)
   ========================================= */
.work_item:hover .work_item_info,
.cs_btn_bg,
.work_item:hover .cs_btn_bg,
.insights-section-btn:hover {
  background-color: var(--swatch--brand-500) !important;
}

/* Signature play capsule + hero swash are natively brand orange — leave as-is */

/* =========================================
   CMS-LOADER INJECTED ORANGE — FULL SWEEP
   ========================================= */
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_number_wrap .u-opacity-60,
.zoom-services-disciplines-grid .services_number_wrap .u-opacity-60,
.zoom-contact-details__eyebrow,
.zoom-contact-details a:hover,
.zoom-contact-details a:focus-visible,
.nav_desktop_link.is-section-active .nav_desktop_link_subtext {
  color: var(--swatch--brand-500) !important;
}
.page_main > section:nth-of-type(2) > .section_contain:not(#sectors) .services_item:hover,
.zoom-services-disciplines-grid .services_item:hover,
#sectors .sector_item:hover,
#sectors .sector_item:focus-visible,
.recognition_row:hover,
#zoom-backtotop,
.insights-section-btn:hover,
.insights-section-btn[data-filter-status="active"] {
  background: var(--swatch--brand-500) !important;
  border-color: var(--swatch--brand-500) !important;
}
#sectors .sector_item:hover,
#sectors .sector_item:focus-visible {
  border-top-color: var(--swatch--brand-500) !important;
}
#sectors .sector_item:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch--brand-500) !important;
}
#zoom-backtotop { color: #fff !important; box-shadow: 0 6px 24px rgba(255,115,0,.25) !important; }
.nav_desktop_link::after {
  background: linear-gradient(100deg, var(--swatch--brand-600, #CC5C00) 0%, var(--swatch--brand-500) 70%) !important;
}

/* Active filter labels: injected rule paints them #fff (invisible on white)
   or orange; use brand color on the light background */
.video-filter-row .filter-btn[data-filter-status="active"],
.filter-btn[data-filter-status="active"] {
  color: var(--swatch--brand-500) !important;
}

/* JS-set inline colors (element.style serializes as rgb()) */
[style*="rgb(255, 115, 0)"] { color: var(--swatch--brand-500) !important; }

/* =========================================
   USER FEEDBACK 3: Contrast Fixes
   ========================================= */

/* Fix 1: Force readable dark text on sections that formerly sat on dark */
.section_home_client,
.section_home_client *,
.marquee-advanced,
.marquee-advanced *,
.work_section,
.work_section *,
.footer_wrap,
.footer_wrap * {
  color: var(--swatch--light-100);
}

/* Stats caption cards used to sit on a full-viewport dark image; the image
   is now a framed card, so the captions fall on white — make them dark.
   (Keeps the orange counters: only non-orange text inherits.) */
.parallax-demo-row .parallax-demo-card,
.parallax-demo-row .parallax-demo-card p,
.parallax-demo-row .parallax-demo-card div:not([class*="brand"]) {
  color: var(--swatch--light-100);
}

/* The Featured Clients section reserved ~a full viewport of dark canvas;
   on white that reads as a huge empty gap — let it size to its content */
.section_home_client.section_wrap,
.section_home_client .featured_client_component {
  min-height: auto !important;
}

/* Ensure headings inside marquee/client keep dark color */
.featured_client .client-a {
  color: var(--swatch--light-100) !important;
}

/* The "Ready to Create" scaling-video section stays a DARK framed card on
   the white page: dark bg + white text over its video. */
.section_scale {
  background: #070707 !important;
  background-color: #070707 !important;
  max-width: min(calc(100% - 5rem), 1400px);
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.12);
}
.section_scale,
.section_scale .scailing_text,
.section_scale .scailing_text *,
.section_scale h1, .section_scale h2, .section_scale h3,
.section_scale p, .section_scale div {
  color: #ffffff;
}

/* Fix 2: Too-pale footer */
.footer_link_wrap {
  opacity: 1 !important;
}
.footer_link_text {
  color: var(--swatch--light-100) !important;
  font-weight: 600 !important;
}
/* Ensure icons are dark */
.footer_wrap svg path {
  opacity: 1 !important;
}
.footer_wrap svg path[stroke="#fff"],
.footer_wrap svg path[stroke="#ffffff"] {
  stroke: var(--swatch--light-100) !important;
}
.footer_wrap svg path[fill="#fff"],
.footer_wrap svg path[fill="#ffffff"] {
  fill: var(--swatch--light-100) !important;
}
.footer_wrap svg circle[fill="#fff"],
.footer_wrap svg circle[fill="#ffffff"] {
  fill: var(--swatch--light-100) !important;
}
/* Visible dividers */
.footer_link_wrap {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}
.footer_bottom_wrap {
  border-top: 1px solid rgba(0,0,0,0.12) !important;
}
.footer_nav {
  border-left: 0 !important;
}

/* Footer CTA card: its Webflow bg var now resolves to dark, which is fine
   as a framed dark card — but the text/arrow must be WHITE on it, not the
   global dark footer color (dark-on-black = invisible black box). */
.footer_link_wrap.is-large {
  background-color: #0d0d0d !important;
  border-radius: 0.75rem;
}
.footer_link_wrap.is-large,
.footer_link_wrap.is-large .footer_link_text,
.footer_link_wrap.is-large * {
  color: #ffffff !important;
}
.footer_link_wrap.is-large svg path {
  stroke: #ffffff !important;
}

/* Fix 3: Near-black Insights thumbnails */
/* Neutralize dark overlays on case study thumbnails */
.blog_item_bg {
  background-color: var(--swatch--light-100-o10) !important;
}
.blog_image_wrap::before,
.blog_image_wrap::after,
.blog_image_overlay,
.cs_image_overlay,
[data-blog-item-image]::after,
[data-blog-item-image]::before,
.blog_item::before,
.blog_item::after {
  display: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
}
.blog_image, .featured_image {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* The case-study cover photos are very dark night-event shots; on the white
   page they read as black boxes. Lift them noticeably. */
.cs_work_item .work_image_wrap img {
  filter: brightness(1.7) contrast(1.05) saturate(1.1) !important;
  opacity: 1 !important;
}

/* (Hero white gradient sheet removed — framed card layout no longer needs it) */
/* Keep hero text above media */
.home_hero_title_wrap,
.about_header_contain,
.cs_hero_title_wrap,
.blog_hero_title_wrap,
.videos_hero_title_wrap,
.scailing_text_wrap,
.home_hero_bottom_wrap {
  position: relative;
  z-index: 5;
}

/* Spotlight decor PNGs are baked brand orange — leave as-is */

/* About story text sits over mid-gray photography inside the framed card:
   render it white with a soft scrim for readability */
.about_header_wrap .about_header_text,
.about_header_wrap .about_header_text * {
  color: #ffffff !important;
}
.about_header_wrap .about_header_text {
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* =========================================
   HOME HERO: taller card + white overlay links
   ========================================= */
/* Space between the nav and the hero card (enough to clear the fixed nav) */
.u-section.u-min-height-screen > .u-section-spacer:first-child {
  height: 3rem !important;
}

/* Inner side padding so hero content doesn't stick to the card edges
   (the NEW PROJECT featured bar is intentionally left flush) */
.home_hero_title_wrap,
.home_hero_bottom_wrap {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

/* Breakthrough section: shorten the existing scroll spacer without
   changing the pinned text/video structure. */
.section_scale .scaling-video__before {
  height: 29vh !important;
}
.section_scale .scailing_text_contain {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
.section_scale {
  margin-bottom: 3rem !important;
}

@media screen and (max-width: 767px) {
  .section_scale .scaling-video__before {
    height: 22svh !important;
  }
  .section_scale .scailing_text_contain {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .section_scale {
    margin-bottom: 2rem !important;
  }
}

/* =========================================
   WORKS PAGE: LIGHT CONTROLS + MODAL CONTRAST
   ========================================= */
body:has([data-barba-namespace="works"]) .nav_mobile_logo img[src*="zoom-live-logo-white"],
body:has([data-barba-namespace="works"]) .footer_logo_wrap img[src*="zoom-live-logo-white"] {
  content: url("/site/images/zoom-live-works-logo.png?v=1");
  filter: none !important;
}

.video-filter-row .filter-btn {
  color: #070707 !important;
}

.video-filter-row .filter-btn[data-filter-status="active"],
.video-filter-row .filter-btn:hover {
  color: var(--swatch--brand-500) !important;
}

.video-search-row {
  border-top-color: rgba(10, 10, 10, 0.14) !important;
}

.video-search-input {
  background: #ffffff !important;
  border-color: rgba(10, 10, 10, 0.28) !important;
  color: #070707 !important;
}

.video-search-input::placeholder {
  color: rgba(10, 10, 10, 0.52) !important;
}

.video-search-input:focus {
  border-color: var(--swatch--brand-500) !important;
  box-shadow: 0 0 0 2px rgba(255, 115, 0, 0.14);
}

.video-private-btn {
  background: #ffffff !important;
  border: 1px solid rgba(10, 10, 10, 0.34) !important;
  color: #070707 !important;
  box-shadow: 0 3px 12px rgba(10, 10, 10, 0.08);
}

.video-private-btn:hover,
.video-private-btn:focus-visible {
  background: #ffffff !important;
  border-color: var(--swatch--brand-500) !important;
  color: var(--swatch--brand-500) !important;
}

.video-private-btn.is-unlocked {
  background: var(--swatch--brand-500) !important;
  border-color: var(--swatch--brand-500) !important;
  color: #ffffff !important;
}

.video-modal__panel {
  background: #ffffff !important;
  color: #070707 !important;
  border: 1px solid rgba(10, 10, 10, 0.14);
}

.video-modal__footer {
  color: #070707 !important;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

.video-modal__title,
.video-modal__sub {
  color: #070707 !important;
}

.video-modal__sub {
  opacity: 0.62 !important;
}

.video-action-btn {
  background: #ffffff !important;
  border: 1px solid rgba(10, 10, 10, 0.28) !important;
  color: #070707 !important;
}

.video-action-btn:hover,
.video-action-btn:focus-visible {
  background: #ffffff !important;
  border-color: var(--swatch--brand-500) !important;
  color: var(--swatch--brand-500) !important;
}

.home_hero_contain {
  height: max(86vh, 640px) !important;
  /* the parent section is a flexbox: without this the hero gets
     flex-shrunk back down to its content height */
  flex: none !important;
}

/* Social links (LINKED IN / FACEBOOK / ...) sit over the dark hero media:
   white by default, brand orange on hover */
.home_hero_bottom_wrap .link,
.home_hero_bottom_wrap .link div {
  white-space: nowrap;
  color: #ffffff !important;
  transition: color .25s ease;
}
.home_hero_bottom_wrap .link:hover,
.home_hero_bottom_wrap .link:hover div {
  color: var(--zoom-orange, #FF7300) !important;
}
.home_hero_bottom_wrap .text-block-10 {
  color: #ffffff !important;
}

/* "NEW PROJECT / DOHA TATTOO 2025" featured card over the hero media:
   white by default, brand orange on hover */
.home_hero_contain .featured_info_text,
.home_hero_contain .featured_cs_title {
  color: #ffffff !important;
  transition: color .25s ease;
}
.home_hero_contain a:hover .featured_info_text,
.home_hero_contain a:hover .featured_cs_title {
  color: var(--zoom-orange, #FF7300) !important;
}