/* Fodl theme experiments — overrides on top of the template's palette.
   Hero: cinematic near-black #0A0A0A ("cinema black") instead of the template
   charcoal #262626. Pure #000 is deliberately avoided: near-black keeps depth
   so dark imagery, shadows and elevated surfaces still separate.
   The intro loader tiles inside the hero must match the hero background,
   otherwise the load animation flashes a two-tone grid. */
.hero-section.home-hero{background-color:#0A0A0A}
.home-hero .loader-block.is-dark{background-color:#0A0A0A}
/* Video/studio section below the hero (was #1d1d1d). */
.section.vaxel-depth-section{background-color:#0A0A0A}
/* Fodl wordmark animation section: acid yellow with near-black content
   (was cinema black with white content; before that the Boulder blue #4C00FF).
   The typed subtitle's "selection" highlight bar inverts: black bar, yellow text. */
.s-logo-text .s__inner{background-color:#FFE600}
.s-logo-text .s__logo--fodl{color:#0A0A0A}
.s-logo-text .s__text{color:#0A0A0A}
.s-logo-text .fodl-sub-hl{color:#FFE600;background:#0A0A0A}
/* Client logo marquee strip (shares .bg-dark with another section, so scoped by its own class).
   The edge-fade overlays hardcode the old charcoal, so they are retuned to match. */
.section.bg-dark.fodl-clients{background-color:#0A0A0A}
.fodl-clients .partner-logos-shadow{background-image:linear-gradient(90deg,#0A0A0A 15%,rgba(0,0,0,0))}
.fodl-clients .partner-logos-shadow.is-right{background-image:linear-gradient(-90deg,#0A0A0A,rgba(0,0,0,0))}
/* "Empathy shapes everything…" section: cinema black with light text
   (was acid yellow with near-black text). The video-frame labels inside
   (.video-details-text) are already light and stay untouched. */
.section.fodl-empathy{background-color:#0A0A0A}
.fodl-empathy .x-large-p,.fodl-empathy .medium-p,.fodl-empathy .label-text{color:#dcdcdc}
.fodl-empathy .small-p{color:rgba(220,220,220,.8)}

/* "Get Started" CTA (fcta): photo kept; the template's plum/red theme neutralized to cinema black.
   The photo wash is a multiply overlay — swapping its purple for neutral gray keeps the same
   darkening without the warm color cast. Buttons become black surfaces with faint white edges. */
.fcta-section{background-color:#0A0A0A}
.fcta-image-overlay{background-color:#4d4d4d}
.fcta-animation-color-bg{background-color:#0A0A0A}
.fcta-button-content{border-color:#ffffff33;background-color:#0a0a0a99;color:#dcdcdc;box-shadow:14px 14px 25px -10px #0a0a0a80}
.fcta-button-content:hover{background-color:#0a0a0acc;color:#fff}
.fcta-button-circle{box-shadow:14px 14px 25px -10px #0a0a0a80}
.fcta-button-circle-border{border-color:#ffffff33;background-color:#0a0a0a99}
.fcta-button-icon{filter:grayscale(1) brightness(1.75)}

/* Footer: black/yellow re-theme. The gradient.mp4 video is replaced by a live WebGL
   shader (inline footer script in index.html). A static branded gradient is painted
   under the canvas at all times — it covers no-JS, pre-init, WebGL-unavailable and
   context-loss, and kills the old orange flash before the video used to load. */
.site-foot{background:#0A0A0A}
.site-foot .b-video{background:radial-gradient(42% 55% at 22% 30%,rgba(255,230,0,.42),rgba(255,230,0,0) 70%),radial-gradient(50% 60% at 78% 75%,rgba(255,230,0,.2),rgba(255,230,0,0) 70%),#0A0A0A}
.site-foot .b-video canvas.is-fallback{display:none}
.site-foot .btn-plain--plain{--btn-color:#FFE600;--btn-text-color:#0A0A0A;--btn-active-color:#f9f8f6;--btn-active-text-color:#0A0A0A}
.site-foot .a-social--white a:before{background-color:#FFE600}
.site-foot .a-social--white a:hover{color:#0A0A0A}

/* Footer typography matched to the hero's design system:
   - marquee display type -> Funnel Display 800, hero-tight tracking (was Geist 500)
   - small text (address / FOLLOW US / nav links) -> the hero's tiny Geist 500
     uppercase label style with wide tracking (was 20px)
   - Contact button -> the hero Menu button theme: flat light rectangle, no radius,
     dark Funnel Display text (replaces the pill; its :before/:after machinery is off). */
.site-foot .b-marquee-title{font-family:"Funnel Display",sans-serif;font-weight:800;letter-spacing:-.04em}
.site-foot .t-h-xs{font-family:Geist,sans-serif;font-size:10px;font-weight:500;letter-spacing:.1em;line-height:1.5;text-transform:uppercase}
.site-foot .b-arrow{font-size:16px}
.site-foot .btn-plain,.site-foot .btn-plain--plain{background-color:#dcdcdc;color:#262626;border-radius:0;padding:0;height:25px;min-width:106px;display:inline-flex;justify-content:center;align-items:center;font-family:"Funnel Display",sans-serif;font-size:10.5px;font-weight:500;letter-spacing:normal;text-transform:capitalize;transition:background-color .25s}
.site-foot .btn-plain:hover{background-color:#fff}
.site-foot .btn-plain:before,.site-foot .btn-plain:after{display:none}
.site-foot .btn-plain__text{position:static}

/* Contact (fct): cinema black bg, orange link accents neutralized, decorative circle grid removed. */
.fct-hero{background-color:#0A0A0A}
.fct-cta-link{border-bottom-color:#ffffff40;color:#dcdcdc}
.fct-circles-block{display:none}
@media screen and (max-width:991px){
.fct-cta-link{background-image:url("/images/cta-arrow-white.svg")}
}

/* Footer brand: live "Fodl AI Studio" text lockup (replaces the masked boulder-logo.png). */
.site-foot__logo--text{background:none;-webkit-mask:none;mask:none;width:auto;display:inline-flex;align-items:baseline;gap:.45em;color:#f9f8f6;text-decoration:none;text-transform:none}
.fodl-foot-brand{font-family:Geist,sans-serif;font-weight:900;font-size:30px;line-height:1;letter-spacing:-.02em}
.fodl-foot-brand-sub{font-family:Geist,sans-serif;font-weight:500;font-size:25px;line-height:1;letter-spacing:0;text-transform:none}