/* ============================================================
   Entertainment Transportation — cinematic FX (scoped)
   Loaded ONLY on body.fb-entertainment via inc/entertainment-fx.php
   ============================================================ */

body.fb-entertainment { background: #05070f; }

/* Eyebrows — neon sky, wide tracking */
.fb-entertainment .section-eyebrow {
	color: #47b8e7 !important;
	letter-spacing: .3em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Headings — bold, uppercase, cinematic */
.fb-entertainment h1,
.fb-entertainment h2,
.fb-entertainment .section-heading,
.fb-entertainment .image-text-split__heading {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.04;
}

/* Neon accent underline beneath section headings */
.fb-entertainment .section-heading::after,
.fb-entertainment .image-text-split__heading::after {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin-top: 20px;
	border-radius: 3px;
	background: linear-gradient(90deg, #47b8e7, #1d76bb);
	box-shadow: 0 0 22px rgba(71, 184, 231, .75);
}
.fb-entertainment .text-center .section-heading::after,
.fb-entertainment [style*="text-align: center"] .section-heading::after { margin-left: auto; margin-right: auto; }

/* Hero — taller, bigger, more dramatic (capped so it stays sane on big screens) */
.fb-entertainment .hero { min-height: clamp(560px, 82vh, 880px); }
.fb-entertainment .hero h1,
.fb-entertainment .hero .hero__title { font-size: clamp(2.6rem, 6.5vw, 5.5rem); }

/* CTA glow (non-hero buttons — the hero's own buttons use the 3D tilt
   effect below instead) */
.fb-entertainment .btn--primary {
	transition: box-shadow .3s ease, transform .3s ease;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
.fb-entertainment .btn--primary:hover {
	box-shadow: 0 0 30px rgba(255, 255, 255, .3);
	transform: translateY(-2px);
}

/* ===== 3D tilt + directional shadow on hero CTA buttons =====
   The classic "tilt card" hover effect: the button rotates in 3D toward
   the cursor and its shadow falls on the opposite side, as if a light
   source sitting at the cursor's position were casting it — reads as a
   real light hitting a raised surface rather than a flat glow. JS
   (entertainment-fx.js) drives --tilt-x/--tilt-y/--shadow-x/--shadow-y
   from the cursor's position over each button; @property registration
   lets the browser smoothly tween between updates and back to neutral on
   pointerleave (plain custom properties can't be transitioned). */
@property --tilt-x { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --tilt-y { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --shadow-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --shadow-y { syntax: '<length>'; inherits: true; initial-value: 6px; }
@property --shadow-blur { syntax: '<length>'; inherits: true; initial-value: 18px; }
@property --shadow-spread { syntax: '<length>'; inherits: true; initial-value: 1px; }

.fb-entertainment .hero .btn.fb-tilt {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	--shadow-x: 0px;
	--shadow-y: 6px;
	--shadow-blur: 18px;
	--shadow-spread: 1px;
	transform: perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
	/* A single soft black shadow barely reads against the hero's own dark
	   backdrop — it needs real contrast: a tight, dark, higher-opacity
	   "contact" shadow close to the button plus a larger, further-thrown
	   one (both scaled off the same --shadow-x/y so they move together) to
	   actually sell the sense of the button lifting off the page. The far
	   shadow's own blur/spread grow with --shadow-blur/--shadow-spread —
	   set by JS from how off-center (grazing) the cursor is — so at a
	   steep angle near a corner the shadow visibly stretches further, not
	   just shifts position. */
	box-shadow:
		calc(var(--shadow-x) * 0.4) calc(var(--shadow-y) * 0.4) 18px 0px rgba(0, 0, 0, .38),
		var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) rgba(0, 0, 0, .28);
	transition: --tilt-x .3s ease, --tilt-y .3s ease, --shadow-x .3s ease, --shadow-y .3s ease, --shadow-blur .3s ease, --shadow-spread .3s ease;
	will-change: transform, box-shadow;
}
@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .hero .btn.fb-tilt { transition: none; }
}

/* Hero intro — pure CSS staggered rise (always ends visible; safe if JS/GSAP fail) */
@keyframes fbHeroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.fb-entertainment .hero .section-eyebrow,
.fb-entertainment .hero h1,
.fb-entertainment .hero .hero__title,
.fb-entertainment .hero p,
.fb-entertainment .hero .btn,
.fb-entertainment .hero [class*="value"] { animation: fbHeroRise .75s both; }
.fb-entertainment .hero h1 { animation-delay: .10s; }
.fb-entertainment .hero p  { animation-delay: .22s; }
.fb-entertainment .hero .btn { animation-delay: .32s; }
.fb-entertainment .hero [class*="value"] { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) { .fb-entertainment .hero * { animation: none !important; } }

/* Keep parallax-moved images from showing gaps */
.fb-entertainment .hero__bg,
.fb-entertainment .content-block__bg { overflow: hidden; }

/* Slightly tighter, punchier prose on dark stage */
.fb-entertainment .prose-invert p { color: rgba(255,255,255,.82); }

/* ===== Competitive polish (perf-safe; copy stays server-rendered & crawlable) ===== */

/* Hero — slow cinematic Ken Burns zoom (CSS-driven, time-based) PLUS a
   scroll-linked pan layered on top via a CSS custom property. GSAP never
   touches `transform` directly here — a running CSS animation on the same
   property would just win the cascade and silently swallow it. Instead JS
   only updates --hero-parallax-y (see entertainment-fx.js), which this
   keyframe references, so both effects compose into one transform. */
@property --hero-parallax-y {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
@keyframes fbKenBurns {
	/* +6% over the original 1.03/1.13 range — pure headroom so the scroll
	   pan layered on top (via --hero-parallax-y) never exposes an edge. */
	from { transform: scale(1.09) translateY(var(--hero-parallax-y, 0px)); }
	to   { transform: scale(1.19) translateY(var(--hero-parallax-y, 0px)); }
}
.fb-entertainment .hero__bg-img--desktop,
.fb-entertainment .hero__bg-img--fallback,
.fb-entertainment .hero__bg-img--mobile {
	animation: fbKenBurns 20s ease-out both;
	transform-origin: 62% 42%;
}

/* Service cards — lift + neon edge on hover */
.fb-entertainment .service-card__inner {
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
	will-change: transform;
}
.fb-entertainment .service-card__inner:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 52px rgba(0,0,0,.5), 0 0 0 1px rgba(71,184,231,.55), 0 0 26px rgba(71,184,231,.28);
}

/* Primary buttons — sweep shine on hover */
.fb-entertainment .btn--primary { position: relative; overflow: hidden; }
.fb-entertainment .btn--primary::after {
	content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.fb-entertainment .btn--primary:hover::after { left: 150%; }

/* Heading underline draws in as each section reveals */
.fb-entertainment .fb-reveal .section-heading::after,
.fb-entertainment .fb-reveal .image-text-split__heading::after { width: 0; transition: width .7s ease .15s; }
.fb-entertainment .fb-reveal.fb-in .section-heading::after,
.fb-entertainment .fb-reveal.fb-in .image-text-split__heading::after { width: 72px; }

/* Stat numbers — neon glow */
.fb-entertainment .proof-stat__number { text-shadow: 0 0 24px rgba(71,184,231,.45); }

/* Scrolling tour-type marquee under the hero */
.fb-entertainment .fb-marquee {
	overflow: hidden;
	background: #0a0f1e;
	border-top: 1px solid rgba(71,184,231,.18);
	border-bottom: 1px solid rgba(71,184,231,.18);
	padding: 15px 0;
}
.fb-entertainment .fb-marquee__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: fbMarquee 30s linear infinite;
}
.fb-entertainment .fb-marquee span {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .95rem;
	color: #fff;
	padding: 0 1.5rem;
}
.fb-entertainment .fb-marquee__dot { color: #47b8e7; font-size: .7rem; }
@keyframes fbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fb-entertainment .fb-marquee__track { animation: none; } }

/* ===== Specialized Divisions — big image cards (Music / Film) ===== */
#industry-spotlight .service-card { list-style: none; }
#industry-spotlight .service-card__inner {
	display: block; height: 100%; text-decoration: none;
	border-radius: 16px; overflow: hidden;
	background: #0c1426; border: 1px solid rgba(71,184,231,.22);
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
#industry-spotlight .service-card__inner:hover {
	transform: translateY(-8px);
	/* Solid neon blue, tightly wrapped — a big soft blur read as too
	   washed-out/transparent; less blur + a touch of spread gives a
	   crisper, more solid-looking edge glow instead of a diffuse halo. */
	border-color: rgba(56, 200, 255, .95);
	box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 16px 2px rgba(56, 200, 255, .65);
}
#industry-spotlight .service-card__image-wrap {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: 0;
}
#industry-spotlight .service-card__image {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
#industry-spotlight .service-card__inner:hover .service-card__image { transform: scale(1.07); }
#industry-spotlight .service-card__image-wrap::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(5,7,15,0) 38%, rgba(5,7,15,.78) 100%);
}
#industry-spotlight .service-card__body { padding: 1.6rem 1.7rem 1.9rem; }
#industry-spotlight .service-card__title {
	color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800;
	text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 .55rem;
}
#industry-spotlight .service-card__description { color: rgba(255,255,255,.72); margin: 0 0 1.1rem; line-height: 1.6; }
#industry-spotlight .service-card__cta {
	display: inline-flex; align-items: center; gap: .45rem;
	color: #47b8e7; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
	transition: gap .25s ease;
}
#industry-spotlight .service-card__inner:hover .service-card__cta { gap: .85rem; }
@media (prefers-reduced-motion: reduce) {
	#industry-spotlight .service-card__inner,
	#industry-spotlight .service-card__image { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .hero__bg-img--desktop,
	.fb-entertainment .hero__bg-img--fallback,
	.fb-entertainment .hero__bg-img--mobile { animation: none; }
	.fb-entertainment .service-card__inner { transition: none; }
}

/* Bulletproof scroll reveals — only active once JS opts in (body has no
   pre-hide, so no-JS / reduced-motion users always see content). */
.fb-entertainment.fb-fx-on .fb-reveal {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.fb-entertainment.fb-fx-on .fb-reveal.fb-in {
	opacity: 1;
	transform: none;
}

/* Background photo layers (image + overlay) now brighten via a GSAP
   scrollTrigger scrub tween (see entertainment-fx.js) instead of a
   trigger-once CSS transition — opacity is tied directly to scroll
   position so it visibly tracks scrolling instead of "instantly" playing
   out on its own timer once a threshold is crossed. GSAP sets its own
   inline opacity, so reduced-motion users (who skip the GSAP block
   entirely) always see the photo at full opacity by default. */

@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .btn--primary { transition: none; }
	.fb-entertainment .fb-reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Flashlight reveal — punch a hole in the dark overlay at the cursor,
   so the actual photo brightness shows through there while everything else
   stays darkened. Applies to every section with a photo background + dark
   overlay (hero, content_block, photo_banner, service_grid all render one
   of these overlay classes when in photo mode); JS tags each qualifying
   section with .fb-photo-reveal.

   The reveal circle's radius is a registered custom property (--reveal-r)
   so it can be transitioned — plain CSS can't animate between two
   mask-image gradients, so toggling the mask on/off with a class made the
   hole snap to full size instantly. Registering it via @property lets the
   browser tween the radius itself: 0 on enter, .fb-photo-hovered raises it
   to 260px, and removing the class eases it back down to 0 on exit. */
@property --reveal-r {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
.fb-entertainment .fb-photo-reveal {
	--reveal-r: 0px;
}
.fb-entertainment .fb-photo-reveal.fb-photo-hovered {
	--reveal-r: 280px;
}
.fb-entertainment .fb-photo-reveal .hero__overlay,
.fb-entertainment .fb-photo-reveal .content-block__overlay,
.fb-entertainment .fb-photo-reveal .photo-banner__overlay,
.fb-entertainment .fb-photo-reveal .service-grid__overlay {
	-webkit-mask-image: radial-gradient(circle var(--reveal-r) at var(--spot-x, 50%) var(--spot-y, 30%), transparent 0%, transparent 78%, black 100%);
	mask-image: radial-gradient(circle var(--reveal-r) at var(--spot-x, 50%) var(--spot-y, 30%), transparent 0%, transparent 78%, black 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: --reveal-r .6s ease;
}
@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .fb-photo-reveal .hero__overlay,
	.fb-entertainment .fb-photo-reveal .content-block__overlay,
	.fb-entertainment .fb-photo-reveal .photo-banner__overlay,
	.fb-entertainment .fb-photo-reveal .service-grid__overlay { transition: none; }
}

/* The mask above only ever REMOVES darkness — it reveals whatever the
   photo truly is at that spot. Over a naturally dark part of the photo
   (smoke, shadow, night sky, dark clothing), that means the "spotlight"
   paradoxically reads as a DARKER circle instead of a light hitting the
   scene, since there was never any actual light added. This blends in a
   small amount of real white light within the same circle so it always
   brightens, regardless of what's underneath. mix-blend-mode: screen only
   ever lightens (can't tint or flatten color the way a plain translucent
   overlay would), and it's confined to the reveal circle via the same
   --reveal-r/--spot-x/--spot-y, so it can't spread into a hazy wash the
   way the old always-visible glow did.

   z-index matters a lot here: this needs to sit ABOVE the (masked) photo/
   overlay layer but BELOW the actual text/button content — not above
   everything. It was originally z-index:5 (above literally everything in
   the section), which meant it was also screen-blending with button drop
   shadows and any other chrome near the cursor, tinting dark shadows a
   dingy yellow-white wherever a warm-toned part of the photo showed
   through them. Content Block/Photo Banner/Service Grid stack their text
   at z-index:2 above their own overlay at z-index:1, so z-index:1 here
   keeps the glow under that text. The hero stacks differently — its
   background layer (photo+overlay together) is z-index:0 and its content
   is z-index:1 — so it needs its own lower override below. */
.fb-entertainment .fb-photo-reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(circle var(--reveal-r) at var(--spot-x, 50%) var(--spot-y, 30%), rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .15) 78%, transparent 100%);
	transition: --reveal-r .6s ease;
}
.fb-entertainment .hero.fb-photo-reveal::after {
	z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .fb-photo-reveal::after { transition: none; }
}

/* ===== Word-stagger hero headline ===== */
.fb-entertainment .hero h1 .fb-word,
.fb-entertainment .hero .hero__title .fb-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .08em;
}
/* The overflow:hidden above masks each word while it slides up during the
   intro reveal — but it also crops the heading's heavy text-shadow to each
   word's box (a hard rectangle, most visible where the spotlight brightens
   the area just above a word). Once the reveal has finished, the JS adds
   .fb-words-revealed and we stop clipping so the glow can breathe. */
.fb-entertainment .hero h1.fb-words-revealed .fb-word,
.fb-entertainment .hero .hero__title.fb-words-revealed .fb-word {
	overflow: visible;
}
.fb-entertainment .hero h1 .fb-word__inner,
.fb-entertainment .hero .hero__title .fb-word__inner {
	display: inline-block;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.fb-entertainment .hero h1 .fb-word__inner,
	.fb-entertainment .hero .hero__title .fb-word__inner { transform: none !important; }
}

/* ===== Force full dark-theme coverage on every section, regardless of its
   own section_background_style =====
   These pages mix light/dark section backgrounds by design (the theme's own
   light/dark contrast logic picks matching text color per-section). Forcing
   body.fb-entertainment to solid black breaks that logic for any section
   still set to a light background_style — its "light bg → dark text" choice
   now sits on a black page background, making the text invisible. Rather
   than hand-edit every section's background_style field, force a dark
   card color + light text across all of them here.

   Three DIFFERENT dark shades (not one flat color) so that when two
   adjacent sections both need a dark treatment, they still read as
   visually separate panels instead of melting into one undifferentiated
   block — matching the native "dark" bg_style's own #0f172a as a 4th tone. */
.fb-entertainment .bg-white       { background-color: #0c1426 !important; }
.fb-entertainment .bg-\[\#f8fafd\] { background-color: #0a0f1e !important; }
.fb-entertainment .bg-fb-light\/10 { background-color: #111c36 !important; }

/* The featured testimonial module is injected outside the ACF row list.
   Give it the alternate navy surface so it does not merge into the
   off-white-mapped quote form that immediately follows it. */
.fb-entertainment .section-testimonials {
	background-color: #0c1426 !important;
}

/* :not(.quote-form__form-card *):not(.contact-form__form-card *) — the form
   card is a white card that must ALWAYS have dark text, regardless of the
   surrounding page's dark theme. This originally excluded by ANCESTOR
   SECTION class (:not(.section-quote-form)), which failed: the native form
   itself wraps each step in its OWN <section class="fb-native-form__step">
   (see fb_render_native_form() in native-forms.php) — a section that is a
   CLOSER ancestor to the step heading than the outer .section-quote-form
   one, doesn't carry that excluded class, and so still matched. Excluding
   by "is this element anywhere inside the form card" instead sidesteps the
   nesting question entirely — it doesn't matter how many <section> tags
   are in between. The outer section's LEFT intro column doesn't need these
   rules either — it already carries its own light/dark text-white classes
   conditionally (see layout_quote_form.php's $is_dark). */
.fb-entertainment section .section-heading:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section h2:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section h3:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section .image-text-split__heading:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section strong:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section b:not(.quote-form__form-card *):not(.contact-form__form-card *) {
	color: #fff !important;
}
.fb-entertainment section p:not(.quote-form__form-card *):not(.contact-form__form-card *):not(.resource-card *),
.fb-entertainment section li:not(.quote-form__form-card *):not(.contact-form__form-card *):not(.resource-card *),
.fb-entertainment section .prose:not(.quote-form__form-card *):not(.contact-form__form-card *),
.fb-entertainment section .prose :where(p, li, span):not(.quote-form__form-card *):not(.contact-form__form-card *) {
	color: rgba(255,255,255,.85) !important;
}
.fb-entertainment section a:not(.btn):not(.fb-marquee *):not(.quote-form__form-card *):not(.contact-form__form-card *):not(.hero__breadcrumbs *):not(.resource-card *) {
	color: #64a8dc !important;
}

/* Belt-and-suspenders on top of the :not() exclusion above — force the
   correct dark colors directly on the form card's own text, so it's
   readable no matter what else on the page might be targeting it. This
   card is always a light background, on every page, regardless of theme. */
.fb-entertainment .quote-form__form-card,
.fb-entertainment .contact-form__form-card {
	color: #172033 !important;
}
.fb-entertainment .quote-form__form-card .fb-native-form__step-heading,
.fb-entertainment .contact-form__form-card .fb-native-form__step-heading {
	color: #172033 !important;
}
.fb-entertainment .quote-form__form-card .fb-native-form__step-copy,
.fb-entertainment .contact-form__form-card .fb-native-form__step-copy,
.fb-entertainment .quote-form__form-card .fb-native-form__label,
.fb-entertainment .contact-form__form-card .fb-native-form__label,
.fb-entertainment .quote-form__form-card .fb-native-form__help,
.fb-entertainment .contact-form__form-card .fb-native-form__help {
	color: #70809a !important;
}
.fb-entertainment .quote-form__form-card .fb-native-form__control,
.fb-entertainment .contact-form__form-card .fb-native-form__control {
	color: #172033 !important;
}

/* FAQ accordion — the template never gives this a light-text variant at all
   (it's not wired to section_background_style like other layouts), so on a
   dark page it needs its own explicit override. */
.fb-entertainment .faq-accordion__trigger span,
.fb-entertainment .faq-accordion__trigger { color: #fff !important; }
.fb-entertainment .faq-accordion__trigger svg { color: #64a8dc; }
.fb-entertainment .faq-accordion__answer,
.fb-entertainment .faq-accordion__answer :where(p, li) { color: rgba(255,255,255,.82) !important; }
.fb-entertainment .faq-accordion__item { border-color: rgba(71,184,231,.18) !important; }

/* These two card components have no native dark-mode variant in the base
   theme (they render solid white regardless of section_background_style),
   unlike industry-card/process-step which already have a --dark class the
   theme adds automatically when a section is dark. Cover them explicitly. */
.fb-entertainment .service-card__inner {
	background: #0c1426 !important;
	border: 1px solid rgba(71,184,231,.18) !important;
}
.fb-entertainment .service-card__title { color: #fff !important; }
.fb-entertainment .service-card__description { color: rgba(255,255,255,.75) !important; }
.fb-entertainment .service-card__cta { color: #64a8dc !important; }

/* Resource cards (related-reading grid) — same story as service/testimonial
   cards above: no native dark variant, and the blanket text overrides painted
   the date/excerpt white-on-white-card (which read as an empty card). The
   card is excluded from those blanket rules and rethemed as a dark panel. */
.fb-entertainment .resource-card {
	background: #0c1426 !important;
	border: 1px solid rgba(71,184,231,.18) !important;
}
.fb-entertainment .resource-card__date { color: rgba(255,255,255,.55) !important; }
.fb-entertainment .resource-card__title a { color: #fff !important; }
.fb-entertainment .resource-card__title a:hover { color: #47b8e7 !important; }
.fb-entertainment .resource-card__excerpt { color: rgba(255,255,255,.75) !important; }
.fb-entertainment .resource-card__more { color: #64a8dc !important; }
.fb-entertainment .resource-card__more:hover { color: #47b8e7 !important; }

.fb-entertainment .testimonial-card {
	background: #0c1426 !important;
	border: 1px solid rgba(71,184,231,.18) !important;
}
.fb-entertainment .testimonial-card__quote,
.fb-entertainment .testimonial-card__quote p { color: rgba(255,255,255,.85) !important; }
.fb-entertainment .testimonial-card__name { color: #fff !important; }
.fb-entertainment .testimonial-card__company { color: rgba(255,255,255,.6) !important; }
.fb-entertainment .testimonial-card::before { color: rgba(71,184,231,.25) !important; }

/* Text over a photo background gets its own drop shadow as a second line
   of defense for legibility — the dark overlay alone can still lose to a
   busy, high-contrast photo (neon signage, bright skies) at its edges/hot
   spots even at full configured darkness. */
.fb-entertainment .content-block--photo .section-eyebrow,
.fb-entertainment .content-block--photo .section-heading,
.fb-entertainment .content-block--photo .prose,
.fb-entertainment .content-block--photo .prose :where(p, li),
.fb-entertainment .service-grid--photo .section-eyebrow,
.fb-entertainment .service-grid--photo .section-heading,
.fb-entertainment .service-grid--photo .section-subheading,
.fb-entertainment .section-photo-banner .photo-banner__eyebrow,
.fb-entertainment .section-photo-banner .photo-banner__heading,
.fb-entertainment .section-photo-banner .photo-banner__text,
.fb-entertainment .hero .hero__eyebrow,
.fb-entertainment .hero .hero__headline,
.fb-entertainment .hero .hero__subheadline {
	text-shadow:
		0 1px 2px rgba(0,0,0,.95),
		0 2px 6px rgba(0,0,0,.9),
		0 4px 18px rgba(0,0,0,.85),
		0 8px 36px rgba(0,0,0,.7);
}

/* Text scrim — a permanent, flat darkening layer over the WHOLE photo,
   completely separate from the .xxx__overlay div. The flashlight
   hover-reveal (.fb-photo-reveal) punches a hole straight through that
   overlay wherever the cursor sits — if that happens to land on text,
   text-shadow alone can't keep up once the overlay's darkening is gone
   entirely underneath it.

   This used to be a radial-gradient patch sized just behind the text
   block, but any gradient shape smaller than the full photo shows its own
   fade-to-transparent edge somewhere on-screen, which read as a hard cut/
   ring across the image — a visible rectangle-ish blob, not natural
   shading. Covering the entire frame at one flat, modest opacity has no
   edge to speak of: it just reads as a slightly moodier photo everywhere,
   the same way the overlay itself already does, and it isn't part of what
   the hover mask reveals, so text keeps its contrast floor no matter
   where the reveal circle sits. Sits between the __bg (z:0) and __overlay
   (z:1) layers below and the text content (z:2) above. */
.fb-entertainment .content-block--photo::before,
.fb-entertainment .section-photo-banner::before,
.fb-entertainment .service-grid--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 7, 15, .3);
	pointer-events: none;
}
/* Same idea on the hero — .hero__bg (photo + overlay + the glow's own
   ::after) is z-index:0 and .hero__content is z-index:1. z-index only
   accepts integers (a fractional 0.5 is invalid and the whole declaration
   gets dropped, leaving the scrim at auto — UNDER the photo), so instead:
   scrim at 1, and bump the hero content to 2 on entertainment pages so it
   stays above the scrim. */
.fb-entertainment .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 7, 15, .3);
	pointer-events: none;
}
.fb-entertainment .hero__content {
	z-index: 2;
}

/* Sticky header's scrolled state (scrolled-header.css) uses a white 40%-opacity
   frosted-glass background — built for light pages. Over this dark cinematic
   hero it reads as a hazy gray wash instead of glass. Swap in a dark tint so
   the same blur effect reads as smoked glass instead. */
.fb-entertainment #site-header.header--scrolled {
	background: rgba(5, 7, 15, .64) !important;
	background-color: rgba(5, 7, 15, .64) !important;
	backdrop-filter: blur(20px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(145%) !important;
	border-color: rgba(71, 184, 231, .22) !important;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .72) !important;
}

/* transparent-header.css forces scrolled nav links to dark navy
   (rgb(30,41,59) !important) — correct on the site-wide white/frosted
   scrolled header, invisible on this dark one.

   Scoped to "> ul > li > a" (TOP-LEVEL nav items only, sitting directly on
   the dark header bar) — NOT a bare "nav[...] a" descendant selector. The
   dropdown/mega-menu panels (.sub-menu, .fb-mega-menu-panel) are their own
   separate white floating cards regardless of header state (see
   transparent-header.css: "Dropdown links always dark — they sit on a
   white panel"), so their own links must keep the theme's normal dark
   text. A bare "nav[...] a" here previously matched EVERY link at any
   depth inside the nav, including every plain sub-menu item and mega-menu
   card link — painting them near-white on their own white panel
   background, i.e. invisible text. That was the actual cause of "the
   regular menus are messed up when scrolled". */
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li > a {
	color: rgba(255, 255, 255, .85) !important;
}

/* The hover pill (.nav-pill, a separate sliding element in app.css) AND the
   active-page pill (.current-menu-item/.current-menu-ancestor background,
   set directly on the <a> in transparent-header.css) both hardcode the same
   light/near-white gradient "calibrated for the scrolled (light) header."
   Text-only overrides don't hold up here: that pill fades in/out via
   opacity (liquid-nav.js GSAP tween), and a semi-opaque LIGHT pill fading
   over a DARK header blends to grey mid-transition — which is most of the
   time a real cursor is sweeping across the nav, not a rare edge case.
   Fix: retheme the pill itself to a dark, brand-tinted background so both
   ends of every transition (dark header ↔ dark-tinted pill) stay tonally
   consistent and never pass through grey. Text stays white throughout. */
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] .nav-pill {
	background: linear-gradient(180deg, rgba(32, 65, 154, .55), rgba(15, 30, 65, .6)) !important;
	border-color: rgba(71, 184, 231, .4) !important;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li > a:hover {
	color: #ffffff !important;
}
/* Same "top-level only" scoping problem as the plain-text rule above: these
   three selectors used to be bare ".current-menu-item > a" /
   ".current-menu-ancestor > a" / ".current-page-ancestor > a" with no
   "> ul > li" restriction. WordPress also stamps "current-menu-item" (etc.)
   on the matching card <li> INSIDE the Industries/Services mega-menu grid
   (see .fb-mega-menu-card-item) and on the matching row inside a plain
   .sub-menu — so the dark, semi-transparent pill gradient meant for the
   small top-level nav pill was also painting over those cards' own opaque
   white background. A ~55-60%-alpha navy gradient over solid white
   composites to a muddy blue-grey wash, with the accompanying white text on
   top reading as washed-out/low-contrast — exactly the "muddy blue-grey
   tinted wash" reported on the mega-menu panel. Restricting to "> ul > li"
   keeps this treatment on the top-level pill only; the mega-menu/sub-menu
   current-item styling is left to its own (already light-panel-appropriate)
   rules in app.css / transparent-header.css. */
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-menu-item > a,
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-menu-ancestor > a,
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-page-ancestor > a {
	color: #ffffff !important;
	background: linear-gradient(180deg, rgba(32, 65, 154, .55), rgba(15, 30, 65, .6)) !important;
	border-color: rgba(71, 184, 231, .4) !important;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
body.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-menu-item > a,
body.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-menu-ancestor > a,
body.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current-page-ancestor > a,
body.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.current_page_ancestor > a {
	color: #ffffff !important;
}
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] .sub-menu a:hover {
	color: #47b8e7 !important;
	background-color: rgba(71, 184, 231, .12) !important;
}

/* Dropdown chevrons — the base icon is a dim grey SVG (opacity .7) with no
   scrolled-state brightening; the site only flips it white via `filter:
   brightness(0) invert(1)` for the UNSCROLLED transparent header
   (transparent-header.css). Same treatment needed here for the dark
   scrolled header. Scoped to `> ul > li` (top-level only) to avoid the
   same leak-into-dropdowns bug already fixed above — the chevrons on cards
   *inside* an open dropdown sit on that dropdown's own white background
   and should keep their normal dark styling. Kept white in every state
   (rest/hover/open) since the top-level item always sits on the dark bar
   itself, unlike the light-header convention of flipping it dark to blend
   into the dropdown panel opening directly beneath it. */
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.menu-item-has-children > a::after {
	filter: brightness(0) invert(1);
	opacity: .85;
}
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.menu-item-has-children:hover > a::after,
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.menu-item-has-children:focus-within > a::after,
.fb-entertainment #site-header.header--scrolled nav[aria-label="Primary navigation"] > ul > li.fb-mega-open > a::after {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* Mobile nav drawer + compact header are now a universal liquid-glass
   design (app.css + transparent-header.css) that already reads correctly
   on this dark theme, so no entertainment-specific override is needed here
   any more. */