/**
 * Small reusable blocks shared across simple/service pages: a heading +
 * 2-column bullet list ("Features" on Stages & Studios, "Tech Specs" on
 * Podcast, Vodcast & Voice -- same pattern, different heading/content
 * per page), a photo-background "Inquire" block, and a decorative
 * pattern-background intro paragraph. Originally built as page-stages.css
 * only, then Podcast needed the identical pattern -- promoted here
 * rather than duplicating the CSS per page. Colors/sizes measured
 * directly against production via headless browser. Bare-element rules
 * scoped, same reason as everywhere else (see footer.css).
 *
 * Also holds the eyebrow label, step-list, and cta-block components
 * (below) -- these started as page-social-media-content.css-only when
 * Social Media Content was the sole net-new-design page, then Podcast/
 * Vodcast & Voice's own redesign reused all three, so they were
 * promoted here per this project's own rule: "when a repeating pattern
 * shows up on a second page, promote its CSS to a shared globally-
 * loaded file immediately." See MIGRATION.md.
 */

/**
 * `<p class="cwf-eyebrow">` -- scoped by parent section (two classes per
 * context, not one) to beat Elementor's kit-wide `.elementor-kit-13 p`
 * rule (specificity 0,1,1 vs. a plain `.cwf-eyebrow` alone at 0,1,0).
 * Same collision/fix already documented in footer.css. Every section
 * that uses this label across all three net-new-design pages (Social
 * Media Content, Podcast/Vodcast & Voice, Drone Cinematography) is
 * listed here so the rule lives in one place instead of drifting
 * between page stylesheets. `.cwf-media-grid` ("Watch It Fly") was
 * missing from this list until now -- an oversight from Drone's own
 * build, caught while making this change.
 */
.cwf-video-showcase .cwf-eyebrow,
.cwf-service-cards .cwf-eyebrow,
.cwf-step-list .cwf-eyebrow,
.cwf-creator-grid .cwf-eyebrow,
.cwf-studio-picker .cwf-eyebrow,
.cwf-feature-row .cwf-eyebrow,
.cwf-card-grid .cwf-eyebrow,
.cwf-image-grid .cwf-eyebrow,
.cwf-media-grid .cwf-eyebrow,
.cwf-faq .cwf-eyebrow {
	margin: 0 0 32px;
	font-family: var(--font-nav-submenu); /* Montserrat, matches this
	                                          theme's other small-label
	                                          uses (nav submenu, gallery
	                                          heading) */
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-primary); /* was #8F8F8F (muted gray) -- per the
	                                 client's explicit request to make
	                                 these yellow, e.g. "What We Fly For" */
}

/* "How It Works" specifically sat too close to its 4 numbered step
   circles below -- client request, sitewide (every page using
   step-list.php: Event Coverage, Drone, Podcast/Vodcast & Voice, Social
   Media Content). Overrides just this one context's margin-bottom from
   the shared 32px above -- first built as a Drone-only override, then
   promoted here once the client asked for every page, per this
   project's own "promote on 2nd+ use" rule. See MIGRATION.md. */
.cwf-step-list .cwf-eyebrow {
	margin-bottom: 56px;
}

/* ---- Feature row (icon+label list, e.g. "Every Session Includes" /
   "Flown Right") ---- */

.cwf-feature-row {
	padding: 24px 56px 56px;
	background: var(--color-black);
}
.cwf-feature-row__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 56px;
	row-gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
}
.cwf-feature-row__item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cwf-feature-row__icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-primary);
}
.cwf-feature-row .cwf-feature-row__label {
	font-family: var(--font-body);
	font-size: 20px;
	color: var(--color-white);
}

/* ---- Card grid (heading+text card grid, e.g. "Post-Production" /
   "What We Fly For") ---- */

.cwf-card-grid {
	padding: 24px 56px 64px;
	background: var(--color-black);
}
.cwf-card-grid .cwf-card-grid__heading {
	max-width: 800px;
	margin: 0 auto 32px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches Event
		Coverage's client-supplied mockup, now this project's shared
		template for section headings across every net-new-design page,
		not just this theme's usual Oswald. See MIGRATION.md. */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
}
.cwf-card-grid__row {
	display: grid;
	grid-template-columns: repeat(var(--cwf-card-grid-columns, 3), 1fr);
	gap: 20px;
	max-width: 1328px;
	margin: 0 auto;
	text-align: center;
}
/* Drone Cinematography's "What We Fly For" cards -- left-aligned body
   content (heading/text/meta/button), unlike Post-Production's
   centered cards -- see card-grid.php's `align` arg. */
.cwf-card-grid__row--left {
	text-align: left;
}
.cwf-card-grid__card {
	background: var(--color-bg-dark-1);
	border: 1px solid var(--color-border-on-dark);
	border-radius: 10px;
	overflow: hidden;
}
/* Small muted label strip above the card body -- Drone Cinematography
   only (Post-Production's cards have no `tag`, so this is inert
   there). Matches studio-picker__media's two-tone card convention,
   text instead of an icon. */
.cwf-card-grid .cwf-card-grid__tag {
	margin: 0;
	padding: 16px 24px;
	background: var(--color-bg-dark-2);
	border-bottom: 1px solid var(--color-border-on-dark);
	font-family: var(--font-nav-submenu);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: #8F8F8F;
}
.cwf-card-grid__body {
	padding: 28px 24px 32px;
}
.cwf-card-grid .cwf-card-grid__card-heading {
	margin: 0 0 12px;
	font-family: var(--font-nav-submenu); /* Montserrat -- the client's mockup uses it for literally everything, not just section H2s */
	font-size: 30px;
	font-weight: 700;
	color: var(--color-white);
}
.cwf-card-grid .cwf-card-grid__card-text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 1.5;
	color: var(--color-text);
}
/* "Perfect for: ..." meta line -- Drone Cinematography only. */
.cwf-card-grid .cwf-card-grid__meta {
	margin: 12px 0 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-style: italic;
	color: var(--color-text);
}
/* Outline button -- Drone Cinematography only. Same visual as
   studio-picker.php's `--outline` button variant, just under a
   different class since card-grid.php has no highlight/solid variant
   of its own yet. */
.cwf-card-grid .cwf-card-grid__btn {
	display: inline-block;
	margin-top: 20px;
	padding: var(--button-padding);
	background: transparent;
	color: var(--color-primary);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-decoration: none;
	border: 1px solid var(--color-primary);
	border-radius: var(--button-radius);
}
/* Solid yellow border on every card, not just a highlighted one --
   Event Coverage's "What We Cover"/"How We Cover It" cards only, so
   far -- see card-grid.php's `card_border` arg. */
.cwf-card-grid__card--border {
	border-color: var(--color-primary);
}
/* Short centered closing line below the row -- Event Coverage's "How
   We Cover It" only, so far -- see card-grid.php's `closing_text` arg,
   same pattern as creator-grid.php's own closing_text. */
.cwf-card-grid .cwf-card-grid__closing {
	max-width: 800px;
	margin: 32px auto 0;
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--color-text);
	text-align: center;
}
.cwf-card-grid .cwf-card-grid__closing strong {
	color: var(--color-white);
}

/* ---- Event gallery / video reel / marquee ("videos lead, stills
   support", e.g. "Gallery" / "Watch It Fly") ----
 * Built for Event Coverage's client-supplied mockup, promoted here once
 * Drone Cinematography's own redesign reused the pattern too (its old
 * media-grid.php "Watch It Fly" section converted to this same
 * video-reel+marquee combo). See MIGRATION.md. */

.cwf-event-gallery {
	padding: 24px 56px 64px;
	background: var(--color-black);
	text-align: center;
}
.cwf-event-gallery .cwf-event-gallery__heading {
	max-width: 800px;
	margin: 0 auto 40px;
	font-family: var(--font-nav-submenu); /* Montserrat, matches the shared heading template */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
}

/* Video reel */
.cwf-video-reel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1328px;
	margin: 0 auto;
}
/* !important on background/border below is justified, not decorative:
   the parent Hello Elementor theme's reset.css ships a sitewide
   `button{border:1px solid #c36}` / `button:focus,button:hover{
   background:#c36}` default (a dusty pink) -- confirmed a real,
   winning collision on this exact button pattern elsewhere on this
   site (the video/gallery carousels' own arrows). Guarded here from
   the start instead of waiting for the same bug to resurface. See
   MIGRATION.md. */
.cwf-video-reel .cwf-video-reel__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--color-primary) !important;
	border: 0 !important;
	border-radius: 50%;
	color: var(--color-black) !important;
	cursor: pointer;
	z-index: 2;
}
.cwf-video-reel .cwf-video-reel__arrow:hover,
.cwf-video-reel .cwf-video-reel__arrow:focus {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.cwf-video-reel .cwf-video-reel__arrow svg {
	width: 20px;
	height: 20px;
}
.cwf-video-reel__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}
.cwf-video-reel__track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s ease;
}
.cwf-video-reel .cwf-video-reel__slide {
	flex: 0 0 calc((100% - (var(--cwf-slides-per-view) - 1) * 20px) / var(--cwf-slides-per-view));
	min-width: 0;
}
.cwf-video-reel .cwf-video-reel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	background: var(--color-bg-dark-1);
}

/* Marquee */
.cwf-marquee {
	overflow: hidden;
	margin-top: 24px;
}
.cwf-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: cwf-marquee-scroll 40s linear infinite;
}
.cwf-marquee:hover .cwf-marquee__track {
	animation-play-state: paused;
}
.cwf-marquee__item img {
	display: block;
	width: 220px;
	height: 220px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--color-bg-dark-1);
}
@keyframes cwf-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ---- Section divider (template-parts/section-divider.php) ---- */

/* Sitewide, between two adjoining solid-color sections that would
   otherwise sit flush against each other -- introduced on Social Media
   Content (between "Trusted By" and "Our Work", both solid black), then
   promoted here once the client asked for it between every page's
   solid-color section boundaries. Deliberately NOT used at a boundary
   where either neighboring section has a full-bleed photo/video
   background -- the divider's own black background would cut into the
   image awkwardly there. See MIGRATION.md.
   Own black background, not transparent -- sits between two <section>s
   in the DOM (not inside either one), so without this it would show the
   page's white default background as a sliver, same bug already caught
   once on Home's "Our Credits" gap (margin vs. padding) -- see
   MIGRATION.md. NO padding of its own by design: the two neighboring
   sections' own top/bottom padding is what creates the space around it
   -- verify (and if needed adjust) each side's padding so the divider
   sits vertically symmetric, don't assume the existing values already
   match (they didn't, the first time -- see MIGRATION.md). */
.cwf-section-divider {
	background: var(--color-black);
	padding: 0;
}
.cwf-section-divider__mark {
	position: relative;
	display: block;
	width: 100%;
	max-width: 160px;
	height: 8px;
	margin: 0 auto;
}
.cwf-section-divider__mark::before {
	/* Faint line, not a hard rule -- fades to nothing at both ends so it
	   doesn't read as a harsh full-stop between the two sections. */
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.cwf-section-divider__mark::after {
	/* The "unique" part, per the client's request -- a small rotated
	   square (diamond) in the site's own accent yellow with a soft glow,
	   echoing the cube-facet mark in the site logo rather than a generic
	   divider glyph. */
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	background: var(--color-primary);
	transform: translate(-50%, -50%) rotate(45deg);
	box-shadow: 0 0 8px rgba(245, 255, 0, 0.55);
}

/* ---- Media split (text + boxed autoplaying video, e.g. "Filmed.
   Edited. Unforgettable." / "Captured. Edited. Unforgettable.") ----
   Promoted here from page-event-coverage.css once Drone Cinematography
   reused this component too -- this project's own "promote on 2nd use"
   rule. See MIGRATION.md. */
.cwf-media-split {
	padding: 24px 56px 64px;
	background: var(--color-black);
}
.cwf-media-split__row {
	display: flex;
	align-items: center;
	gap: 56px;
	max-width: 1328px;
	margin: 0 auto;
}
.cwf-media-split__row--reverse {
	flex-direction: row-reverse;
}
.cwf-media-split__col {
	flex: 1 1 0;
	min-width: 0;
}
.cwf-media-split .cwf-media-split__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-nav-submenu);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-primary);
	text-align: left;
}
.cwf-media-split .cwf-media-split__heading {
	margin: 0 0 20px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--color-white);
}
.cwf-media-split .cwf-media-split__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}
.cwf-media-split .cwf-media-split__text strong {
	color: var(--color-white);
}
.cwf-media-split .cwf-media-split__btn {
	display: inline-block;
	margin-top: 28px;
	padding: var(--button-padding);
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-decoration: none;
	border-radius: var(--button-radius);
}
.cwf-media-split__media {
	border-radius: 14px;
	overflow: hidden;
	background: var(--color-bg-dark-1);
}
.cwf-media-split__media video,
.cwf-media-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.cwf-marquee__track {
		animation: none;
	}
	.cwf-marquee {
		overflow-x: auto;
	}
}

/* ---- Inquire strip (slim standalone button, e.g. right after "Watch
   It Fly" / a video showcase) -- see template-parts/inquire-strip.php ---- */
.cwf-inquire-strip {
	display: flex;
	justify-content: center;
	padding: 40px 56px;
	background: var(--color-black);
}
.cwf-inquire-strip .cwf-inquire-strip__btn {
	display: inline-block;
	padding: var(--button-padding);
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: var(--button-radius);
	border: 1px solid var(--color-primary);
}
.cwf-inquire-strip .cwf-inquire-strip__btn:hover,
.cwf-inquire-strip .cwf-inquire-strip__btn:focus-visible {
	background: transparent;
	color: var(--color-primary);
}
@media (max-width: 767px) {
	.cwf-inquire-strip {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---- FAQ accordion (e.g. "Common Questions") ---- */

.cwf-faq {
	padding: 24px 56px 64px;
	background: var(--color-black);
}
/* Text-selection highlight: site yellow, not the browser/OS default
   (shows as pink on at least one Windows setup, per the client) --
   readable against it needs a dark foreground, not the surrounding
   white/gray text colors. */
.cwf-faq ::selection {
	background: var(--color-primary);
	color: var(--color-black);
}
.cwf-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 900px;
	margin: 0 auto;
}
.cwf-faq__item {
	background: var(--color-bg-dark-1);
	border: 1px solid var(--color-border-on-dark);
	border-radius: 8px;
	overflow: hidden;
}
.cwf-faq .cwf-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	background: transparent !important; /* !important justified: the parent
		Hello Elementor theme's own reset.css ships a sitewide
		`button:focus,button:hover{background-color:#c36;color:#fff}`
		default (a dusty pink) that was confirmed actually winning
		against this rule's higher class-specificity in the client's
		real browser -- not just in the resting state guarded here, but
		fighting the interactive states below too. Rather than keep
		chasing why the specificity math isn't holding in practice,
		every state this component cares about (resting/hover/focus/
		open) now wins unconditionally. See MIGRATION.md. */
	border: 0;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 600;
	color: var(--color-white) !important;
	text-align: left;
	cursor: pointer;
}
/* Explicit yellow highlight -- the question TEXT itself, not an
   outline/box -- hover, keyboard/click focus, AND the open state (so
   it stays marked after focus is lost, e.g. clicking into the answer
   text below to select it) all resolve to the exact same look,
   combined in one rule so there's no risk of one state's override
   winning over another's. */
.cwf-faq .cwf-faq__question:hover,
.cwf-faq .cwf-faq__question:focus,
.cwf-faq__item--open .cwf-faq__question {
	color: var(--color-primary) !important;
}
.cwf-faq__chevron {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--color-text);
	transition: transform 0.2s ease;
}
.cwf-faq__item--open .cwf-faq__chevron {
	transform: rotate(180deg);
}
.cwf-faq .cwf-faq__answer {
	padding: 0 24px 20px;
}
.cwf-faq .cwf-faq__answer p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}

/* ---- Step list ("How It Works") ---- */

.cwf-step-list {
	padding: 90px 56px 124px;
	background: var(--color-black);
}
.cwf-step-list__row {
	display: flex;
	justify-content: center;
	gap: 60px;
	max-width: 1328px;
	margin: 0 auto;
}
.cwf-step-list__step {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.cwf-step-list__icon {
	width: 36px;
	height: 36px;
	margin-top: 16px;
	color: var(--color-primary);
}
.cwf-step-list__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	background: var(--color-bg-dark-2);
	color: var(--color-white);
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 20px;
	font-weight: 700;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
}
.cwf-step-list .cwf-step-list__label {
	margin: 0;
	font-family: var(--font-body);
	font-size: 24px; /* was 20px, then 18px before that -- client asked for
	                     the step title to read bigger than its own
	                     description line below (__subtext, still 20px) */
	font-weight: 600; /* was inheriting the body default (400) -- a title
	                      that's merely larger but the same weight as its
	                      description didn't read as clearly bigger next
	                      to it, per the client's own comparison */
	color: var(--color-white);
}
/* Podcast/Vodcast & Voice's redesigned "How It Works" adds a short
   description line under the label instead of an icon -- see
   step-list.php's `subtext` support. */
.cwf-step-list .cwf-step-list__subtext {
	margin: 6px 0 0;
	font-family: var(--font-body);
	font-size: 20px; /* was 15px -- same promotion/reasoning as __label above */
	line-height: 1.4;
	color: var(--color-text);
}

/* ---- CTA block ---- */

.cwf-cta-block {
	padding: 0 56px 60px;
	background: var(--color-black);
}
.cwf-cta-block__box {
	max-width: 1328px;
	margin: 0 auto;
	padding: 60px 40px;
	background: var(--color-bg-dark-1);
	border-radius: 12px;
	text-align: center;
}
.cwf-cta-block .cwf-cta-block__heading {
	margin: 0 0 24px;
	font-family: var(--font-nav-submenu); /* Montserrat, matches the shared card-grid.php heading treatment above */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
}
/* Podcast/Vodcast & Voice's redesigned CTA adds a short description
   line between the heading and the button -- see cta-block.php's
   `text` support. Social Media Content's CTA has no `text`, so this
   rule is inert there. */
.cwf-cta-block .cwf-cta-block__text {
	max-width: 600px;
	margin: 0 auto 24px;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-text);
}
/* Wraps 1 or 2 buttons -- most callers only ever pass one (button_text),
   which centers fine as a single flex child; Event Coverage's redesign
   is the first to pass a second (button2_text), side by side. */
.cwf-cta-block__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}
.cwf-cta-block .cwf-cta-block__btn {
	display: inline-block;
	padding: var(--button-padding);
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-decoration: none;
	border-radius: var(--button-radius);
	border: 1px solid var(--color-primary);
}
/* Second button -- Event Coverage's "@CubeWorldFilms" only, so far. */
.cwf-cta-block .cwf-cta-block__btn--outline {
	background: transparent;
	color: var(--color-primary);
}
.cwf-cta-block .cwf-cta-block__subtext {
	display: block;
	margin: 20px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
}
.cwf-cta-block .cwf-cta-block__subtext a {
	color: var(--color-text);
	text-decoration: none;
}
a.cwf-cta-block__subtext:hover,
.cwf-cta-block .cwf-cta-block__subtext a:hover {
	color: var(--color-white);
}

.cwf-inquire-block {
	background: var(--color-black); /* letterbox color either side of the inset image */
}
.cwf-inquire-block__inset {
	position: relative;
	max-width: 1328px;
	margin: 0 auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden; /* clips the video variant to the inset's own rounded box */
}

.cwf-inquire-block__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cwf-inquire-block__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	opacity: 0.3; /* measured: background_overlay_opacity 0.3 */
}
.cwf-inquire-block__row {
	position: relative;
	z-index: 1;
	padding: 450px 40px 80px; /* measured from production */
	display: flex;
	justify-content: flex-end;
}
.cwf-inquire-block .cwf-inquire-block__btn {
	display: inline-block;
	padding: 12px 25px;
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-white);
	text-shadow: var(--text-shadow-halo); /* per the client's request --
	                                          legibility over the photo,
	                                          see tokens.css */
	border: 1px solid var(--color-white);
	border-radius: 2px;
	text-decoration: none; /* now a real <a> to Contact Us, not the static span it started as -- see inquire-block.php. Matches .cwf-split__btn's plain style, no hover effect, same as every other button on this site. */
}

.cwf-pattern-intro {
	position: relative;
	padding: 0 56px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.cwf-pattern-intro__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	opacity: 0.54; /* measured: background_overlay_opacity 0.54 */
}
.cwf-pattern-intro .cwf-pattern-intro__text {
	position: relative;
	z-index: 1;
	max-width: 930px;
	margin: 0 auto;
	/* Tightened from the measured 80px -- deliberate deviation from
	   production, per the client's request: with the hero now 90vh
	   (not full-screen), this padding needs to be small enough that
	   real text is visible in the leftover sliver on initial load,
	   not just blank padding. See MIGRATION.md. */
	padding: 40px 0;
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	/* Bumped from the measured 26px -- deliberate deviation, per the
	   client's request ("it should be bigger"). See MIGRATION.md. */
	font-size: 32px;
	line-height: 1.5;
	color: var(--color-bg-light-2); /* measured: #F3EFEF */
	text-align: center;
	text-shadow: var(--text-shadow-halo); /* per the client's request --
	                                          legibility over the
	                                          decorative pattern image,
	                                          see tokens.css */
}
.cwf-pattern-intro .cwf-pattern-intro__text .cwf-hero__intro-highlight {
	color: var(--color-primary); /* unified site yellow, was #f5c542 */
	text-transform: capitalize;
}

/* Production Services variant: measured Inter 18px, base text regular
   but the highlighted phrase bold (700) -- NOT the same weight as the
   rest like Stages & Studios/Podcast's Montserrat 26px version, where
   the highlight is regular too. Verified via computed style, not
   assumed consistent with the other two pages. */
.cwf-pattern-intro .cwf-pattern-intro__text--inter {
	font-family: var(--font-nav-title); /* Inter */
	font-size: 18px;
}
.cwf-pattern-intro .cwf-pattern-intro__text--inter .cwf-hero__intro-highlight {
	font-weight: 700;
}

/* Event Spaces variant: Montserrat base text (like Stages & Studios/
   Podcast) but a bold highlighted phrase (like Production Services'
   Inter variant) -- font family and highlight weight are independent
   per page, don't assume they're coupled. */
.cwf-pattern-intro .cwf-pattern-intro__text--bold-highlight .cwf-hero__intro-highlight {
	font-weight: 700;
}

.cwf-bullet-list {
	padding: 60px 56px;
	background: var(--color-black);
}

.cwf-bullet-list .cwf-bullet-list__heading {
	max-width: 1328px;
	margin: 0 auto 30px; /* matches .cwf-bullet-list__row's own
	                         max-width+centering below -- without this,
	                         centering only the row would leave the
	                         heading flush against the section's raw
	                         56px padding while the list centers below
	                         it, visibly misaligned past ~1440px
	                         viewport width. See MIGRATION.md. */
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-size: 45px;
	font-weight: 600;
	color: var(--color-bg-light-1); /* measured: #F8F8F8 */
	text-transform: uppercase;
}

.cwf-bullet-list__row {
	display: flex;
	gap: 20px;
	max-width: 1328px;
	margin: 0 auto; /* was missing -- at any viewport wider than the
	                    content's own 1328px+112px padding (~1440px+),
	                    the row hugged the left edge instead of
	                    centering in the section's full-bleed black
	                    background. Same max-width+margin:auto pattern
	                    split-section.php's non-image variant already
	                    uses. See MIGRATION.md. */
}

.cwf-bullet-list .cwf-bullet-list__list {
	flex: 1 1 0;
	margin: 0;
	padding-left: 20px;
	font-family: var(--font-nav-title); /* Inter, measured */
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text); /* measured: #D0D0D0 */
}
.cwf-bullet-list .cwf-bullet-list__list li {
	margin-bottom: 10px;
}
.cwf-bullet-list .cwf-bullet-list__list li::marker {
	color: var(--color-text);
}

@media (max-width: 900px) {
	.cwf-media-split {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-media-split__row,
	.cwf-media-split__row--reverse {
		flex-direction: column;
		gap: 32px;
	}
	.cwf-inquire-block__row {
		padding: 200px 20px 40px;
		justify-content: center;
	}
	.cwf-pattern-intro {
		display: none; /* hidden on mobile, per the client's request -- desktop
		                   (above this breakpoint) is unaffected. The
		                   padding/font-size overrides below are kept, not
		                   removed, in case this is ever shown again at a
		                   narrower breakpoint later. */
		padding: 0 20px;
	}
	.cwf-pattern-intro .cwf-pattern-intro__text {
		padding: 40px 0;
		font-size: 20px;
	}
	.cwf-bullet-list {
		padding: 40px 20px;
	}
	.cwf-bullet-list__row {
		flex-direction: column;
		gap: 8px;
	}
	.cwf-step-list {
		padding: 56px 20px 80px;
	}
	.cwf-step-list__row {
		gap: 24px;
		flex-wrap: wrap;
	}
	.cwf-step-list__step {
		flex: 1 1 calc(50% - 12px);
	}
	.cwf-cta-block {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-cta-block__box {
		padding: 40px 24px;
	}
	.cwf-cta-block .cwf-cta-block__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	.cwf-feature-row,
	.cwf-card-grid,
	.cwf-faq {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-feature-row__row {
		column-gap: 32px;
	}
	.cwf-card-grid .cwf-card-grid__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	/* Single column on mobile -- without this, `.cwf-card-grid__row`'s
	   grid-template-columns stays at its full desktop count (e.g. Event
	   Coverage's 4) all the way down to phone widths, squeezing each
	   card into an unreadable sliver (client screenshot: card headings
	   wrapping to one word per line, body text a single word per line).
	   Was previously duplicated per-page (page-drone.css, 2 cols ->
	   1) rather than shared, and Event Coverage's own page CSS never
	   got it added at all when the page was built -- promoted here so
	   every card-grid gets it by default. Podcast's page CSS still
	   overrides this with its own 3 -> 2 -> 1 two-step progression
	   (loads after shared-blocks.css, wins the cascade at equal
	   specificity) -- unaffected. See MIGRATION.md. */
	.cwf-card-grid__row {
		grid-template-columns: 1fr;
	}
	.cwf-event-gallery {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-event-gallery .cwf-event-gallery__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	.cwf-video-reel .cwf-video-reel__slide {
		flex: 0 0 85%;
	}
	.cwf-marquee__item img {
		width: 160px;
		height: 160px;
	}
}

@media (max-width: 600px) {
	.cwf-video-reel .cwf-video-reel__slide {
		flex: 0 0 100%;
	}
}