/**
 * Custom Component Styles — Atomicdust Base Theme
 *
 * Styles for base theme patterns and custom blocks.
 * All classes prefixed .ad- (kebab-case).
 *
 * BASE THEME PATTERNS (ship with every project):
 *   Hero Split, Logo Carousel, Text Ticker, Section Label,
 *   Card Row, Where It Fits, How It Works (Tabs), Testimonials Carousel,
 *   Case Studies, Video CTA, Hero Full Bleed, Grid Hover Cards,
 *   Card Links Image, Dual Panel Slider, Bento Grid
 *
 * PROJECT-SPECIFIC CSS:
 *   Add below the base theme patterns as new patterns are built.
 *   Never remove base theme pattern CSS — it supports the pattern library.
 */

/* Section spacing is set via block attributes (style.spacing.padding)
   on each pattern's outer group. No CSS fallbacks needed — inline
   styles from block attributes always apply. */

/* -----------------------------------------------
   Hero Split Pattern
   ----------------------------------------------- */

/* Site padding on full-width hero — use root padding vars, not hardcoded clamp() */
.ad-hero-split {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Pre-JS hidden state — prevents FOUC on back-navigation.
   Scoped to .js so content stays visible if JS fails to load.
   GSAP's autoAlpha animation overrides this once the timeline runs. */
.js .ad-hero-split > .wp-block-column {
	visibility: hidden;
}

/* Pre-hide fade-up animated elements — prevents FOUC before GSAP initializes.
   Matches the selectors in custom.js fade-up section.
   Two-rule approach: hide all, then un-hide inside excluded containers
   (which have their own animation and are skipped by the JS). */
.js .entry-content :where(.wp-block-heading, .wp-block-buttons, .ad-section-label, .wp-block-paragraph, .wp-block-image, .wp-block-columns, .wp-block-quote) {
	visibility: hidden;
}

/* Un-hide inside containers that have their own motion or shouldn't fade-up.
   Must match the hide rule's specificity (.js .entry-content = 0,2,0). */
.js .entry-content :where(.ad-home-hero, .ad-hero-split, .ad-newsletter-hero, .ad-logo-carousel, .ad-text-ticker, .ad-testimonials__track, .ad-dual-slider__wrapper, .ad-image-stack, .ad-bento, .ad-footer, .ad-footer-logo, .ad-home-philosophy, .ad-services-process, .ad-services-showcase, .ad-contact-gallery__grid, .ad-about-philosophy__bg, .ad-services-marquee, .ad-marquee, .ad-team, .ad-branding-benefits, .ad-branding-intro-image, .ad-single-work__images, .ad-story-drawer__body, .ad-about-story, .hero, .ad-wd-tabs-section, .ad-wd-accordion, .ad-careers-hero, .ad-careers-lede, .ad-careers-openings, .ad-careers-benefits, .ad-careers-values, .ad-careers-cta, .ad-home-audits, .ad-audits-hero, .ad-audits-intro, .ad-audits-grid, .ad-audits-industry, .ad-audits-cta, .ad-restaurant-work, .ad-restaurant-casestudies, .ad-healthcare-casestudies, .ad-hc-scanner) :where(.wp-block-heading, .wp-block-buttons, .ad-section-label, .wp-block-paragraph, .wp-block-image, .wp-block-columns, .wp-block-quote) {
	visibility: visible;
}

/* Hero FOUC — must come AFTER the un-hide rule above (same specificity,
   source order wins). The un-hide re-shows .wp-block-heading inside
   .ad-home-hero; these rules re-hide the specific elements GSAP animates in. */
.js .ad-home-hero__headline,
.js .ad-home-hero > .wp-block-columns,
.js .ad-home-hero__video-wrap,
.js .ad-home-hero__overlay-headline {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.js .ad-hero-split > .wp-block-column {
		visibility: visible;
	}

	.js .ad-home-hero__headline,
	.js .ad-home-hero > .wp-block-columns,
	.js .ad-home-hero__video-wrap,
	.js .ad-home-hero__overlay-headline {
		visibility: visible;
	}

	/* Undo fade-up pre-hide when motion is reduced (no animations run) */
	.js .entry-content :where(.wp-block-heading, .wp-block-buttons, .ad-section-label, .wp-block-paragraph, .wp-block-image, .wp-block-columns, .wp-block-quote) {
		visibility: visible;
	}
}

/* -----------------------------------------------
   Fade-up reveal — IntersectionObserver (custom.js)
   -----------------------------------------------
   .ad-reveal is added by JS to each non-excluded fade-up element. It overrides
   the .js visibility:hidden pre-hide above (equal specificity, later source
   order) and holds the from-state (opacity:0 + translateY). .is-visible is
   toggled on when the element scrolls into view. Replaces the old
   gsap.from() + ScrollTrigger reveal, which could strand elements hidden if a
   refresh fired at the wrong moment. */
.js .ad-reveal {
	/* Rendered-transparent (opacity:0), NOT visibility:hidden. WebKit/Safari never
	   paints a visibility:hidden element, so a leaf scrolled into view has no
	   painted "from" frame and snaps straight to the end instead of fading;
	   opacity:0 keeps it painted so the imperative (WAAPI) fade plays. opacity:0
	   also keeps the text in the accessibility tree, so screen readers can still
	   read not-yet-revealed copy. Every hidden state here is gated on `.js`
	   (added by JS), so with JavaScript disabled nothing is hidden and all content
	   renders normally. */
	visibility: visible;
	opacity: 0;
	transform: translateY(40px);
}

/* Two-step reveal (Safari fix). WebKit skips the opacity/transform transition if
   visibility flips hidden->visible in the SAME frame the transition starts —
   exactly what happens the instant an off-screen element scrolls into view, so
   scroll-revealed elements would pop in with no fade. reveal.js first adds
   .ad-revealing (paints the element visible but still transparent), then on the
   next animation frame adds .is-visible (opacity/transform animate). That gives
   the transition a real visible starting frame, so the fade runs in Safari too;
   Chrome/Firefox were unaffected either way.

   Fail-safe by design: .is-visible alone still sets the final visible state, so
   if the transition never runs the content is shown, never stranded hidden. */
.js .ad-reveal.ad-revealing {
	visibility: visible;
}

/* Resting (revealed) state. The fade itself is animated imperatively by
   reveal.js via the Web Animations API — a CSS transition here doesn't reliably
   play in Safari for elements revealed on scroll (no painted from-frame), so
   this rule only holds the final state. */
.js .ad-reveal.is-visible {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/* Whole-block priority: descendants of a reveal element that were de-animated
   (so the block fades as one unit, not nested fades that break in Safari). Shown
   statically — they ride the outer element's single fade. Overrides the pre-hide
   gate (equal specificity, later source order) so they're never stranded. */
.js .ad-reveal-skip {
	visibility: visible;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .ad-reveal {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Failsafe — if the reveal controller never initialized (custom.js failed to
   load or threw before setup), ad_js_class()'s head script adds
   .ad-anim-failsafe after load. Drop every fade-up pre-hide so content can
   never be stranded invisible; worst case degrades to shown-un-animated. */
.ad-anim-failsafe .entry-content :where(.wp-block-heading, .wp-block-buttons, .ad-section-label, .wp-block-paragraph, .wp-block-image, .wp-block-columns, .wp-block-quote),
.ad-anim-failsafe .ad-reveal {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Content column — tall proportion via min-height */
.ad-hero-split__inner {
	min-height: clamp(28rem, 70vh, 48rem);
}

/* Media column — clip child cover image to rounded corners */
.ad-hero-split__media {
	overflow: hidden;
}

/* Cover inner container — absolute fill + flex bottom-right, overrides WP constrained layout */
.ad-hero-split__cover .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1.5rem;
}

/* Testimonial card — constrain width, override constrained layout auto margins */
.ad-hero-split__testimonial {
	max-width: 20rem;
	margin: 0;
}

/* Testimonial quote — reset default blockquote styles */
.ad-hero-split__testimonial .wp-block-quote {
	border: none;
	padding: 0;
	margin: 0;
}

.ad-hero-split__testimonial .wp-block-quote cite {
	display: block;
	margin-top: var(--ad-space-sm);
	font-style: normal;
	font-weight: 600;
}

/* Testimonial role text — uses body color slug (verify contrast on project bg) */
.ad-hero-split__testimonial-role {
	color: var(--wp--preset--color--body);
	font-weight: 400;
}

/* Pause/play toggle — positioning only (shape via .ad-pause-btn in global.css) */
.ad-hero-split__pause-btn {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
}

/* Cover needs relative positioning for the pause button */
.ad-hero-split__cover {
	position: relative;
	background-color: var(--wp--preset--color--primary); /* Loading placeholder — covered by video */
}

/* -----------------------------------------------
   Hero Split — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hero-split__inner {
		min-height: auto;
	}

	/* Inline min-height:100% has no parent reference when stacked — override with explicit value */
	.ad-hero-split__cover {
		min-height: 20rem !important;
	}

	/* Keep testimonial from overlapping the pause button at bottom-left */
	.ad-hero-split__testimonial {
		max-width: calc(100% - 3.5rem);
	}
}

/* -----------------------------------------------
   Logo Carousel
   ----------------------------------------------- */

/* Outer container — clip overflow, fade edges via CSS mask */
.ad-logo-carousel {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black clamp(2rem, 8vw, 8rem),
		black calc(100% - clamp(2rem, 8vw, 8rem)),
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		black clamp(2rem, 8vw, 8rem),
		black calc(100% - clamp(2rem, 8vw, 8rem)),
		transparent
	);
}

/* Track — flex row, no wrap, width determined by content */
.ad-logo-carousel__track {
	width: max-content;
	flex-wrap: nowrap !important;
}

/* Animated state — JS adds .is-animated after cloning children */
.ad-logo-carousel.is-animated .ad-logo-carousel__track {
	animation: ad-logo-scroll var(--ad-carousel-duration, 30s) linear infinite;
}

@keyframes ad-logo-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(var(--ad-carousel-width) * -1));
	}
}

/* Logo images — consistent height, grayscale treatment */
.ad-logo-carousel__logo {
	flex-shrink: 0;
	margin: 0;
}

.ad-logo-carousel__logo img {
	height: clamp(1.5rem, 2.5vw, 2.5rem);
	width: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.4);
}

/* Carousel wrapper — flex row so carousel + pause button sit inline.
   Uses !important to override WP constrained layout's display:flex / flow-root. */
.ad-logo-carousel-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 1.5rem;
}

/* Carousel fills available space */
.ad-logo-carousel-wrapper .ad-logo-carousel {
	flex: 1;
	min-width: 0;
}

/* Pause/play button — inline with carousel (shape via .ad-pause-btn in global.css) */
.ad-logo-carousel__pause-btn {
	flex-shrink: 0;
}

/* -----------------------------------------------
   Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-logo-carousel.is-animated .ad-logo-carousel__track {
		animation: none;
	}
}

/* -----------------------------------------------
   Text Ticker — Vertical Infinite Scroll
   ----------------------------------------------- */

/* Ticker container — fixed height, vertical mask fade */
.ad-text-ticker {
	position: relative;
	height: 20rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent,
		black clamp(1.5rem, 4vw, 3rem),
		black calc(100% - clamp(1.5rem, 4vw, 3rem)),
		transparent
	);
	mask-image: linear-gradient(
		to bottom,
		transparent,
		black clamp(1.5rem, 4vw, 3rem),
		black calc(100% - clamp(1.5rem, 4vw, 3rem)),
		transparent
	);
}

/* Track — vertical flex column */
.ad-text-ticker__track {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

/* Items — no margin (gap handles spacing) */
.ad-text-ticker__item {
	margin: 0 !important;
	line-height: 1.3;
}

/* Animated state — JS adds .is-animated after cloning children */
.ad-text-ticker.is-animated .ad-text-ticker__track {
	animation: ad-text-scroll var(--ad-ticker-duration, 20s) linear infinite;
}

@keyframes ad-text-scroll {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(var(--ad-ticker-height) * -1));
	}
}

/* Pause/play button — bottom-right of ticker */
.ad-text-ticker__pause-btn {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	z-index: 1;
}

/* Reduced motion — no animation */
@media (prefers-reduced-motion: reduce) {
	.ad-text-ticker.is-animated .ad-text-ticker__track {
		animation: none;
	}
}

/* Mobile — shorter ticker */
@media (max-width: 781px) {
	.ad-text-ticker {
		height: 14rem;
	}
}

/* -----------------------------------------------
   Character Stagger — roll hover on nav links + buttons
   ----------------------------------------------- */

/* Prevent FOUC — text is transparent until JS splits it. */
.js .ad-header__menu-link:not([data-chars-ready]),
.js .ad-header .wp-block-button__link:not([data-chars-ready]),
.js .ad-btn:not([data-chars-ready]) {
	color: transparent;
}

.ad-char-split {
	display: inline-flex !important;
	gap: 0 !important;
}

/* Inherit the surrounding text color for split nav links, but NOT for buttons.
   A button's text color must come from its block style (fill = light text,
   outline = dark text) — not the section it happens to sit in. Without this
   exclusion, `color: inherit` made fill buttons pick up the section's body
   color (e.g. gray on a light section) instead of their styled color. */
.ad-char-split:not(.wp-block-button__link) {
	color: inherit;
}

.ad-char {
	display: inline-block;
	overflow: hidden;
	line-height: 1.2;
}

.ad-char--space {
	width: 0.25em;
}

.ad-char__inner {
	display: inline-block;
	position: relative;
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.ad-char__inner::after {
	content: attr(data-char);
	display: block;
	position: absolute;
	left: 0;
	top: 100%;
}

/* Hover — slide characters up to reveal ::after clone */
.ad-char-split:hover .ad-char__inner {
	transform: translateY(-100%);
}

/* Keep SVG icons (chevrons) spaced correctly after split */
.ad-char-split svg {
	margin-left: 0.25rem;
}

.ad-char-split .ad-header__chevron,
.ad-char-split .ad-header__arrow {
	margin-left: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.ad-header__menu-link:not([data-chars-ready]),
	.ad-header .wp-block-button__link:not([data-chars-ready]),
	.ad-btn:not([data-chars-ready]) {
		color: inherit;
	}

	.ad-char__inner {
		transition: none;
	}
}

/* -----------------------------------------------
   Section Label
   ----------------------------------------------- */

/* Reusable section label */
.ad-section-label {
	font-weight: 500;
	margin-bottom: 0;
}

.ad-section-label--center {
	justify-content: center;
}

/* Audit/tool thumbnail cards (hub + homepage band): dark, undecorated title links */
.adx-tool-thumb h3 a,
.adx-tool-thumb h3 {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.adx-tool-thumb h3 a:hover {
	text-decoration: underline;
}

/* Trailing arrow on the homepage tool names — the same SVG used by the footer
   newsletter "Sign up" button (.ad-footer__signup-btn). The arrow glyph that
   used to live in the text was removed so this renders consistently. Scoped to
   .ad-home-audits: on the /audits/ hub the tile <p> is a description, not the
   name (the name is an <h3> there), so an arrow must not attach to it. */
.ad-home-audits .adx-tool-thumb p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ad-home-audits .adx-tool-thumb p::after {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	/* The same arrow used in the header mega-menu (.ad-header__mega-all-arrow /
	   .ad-mega-featured-arrow): 20×20 viewBox, rounded head, stroke-width 1.5. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10h10M11 6l4 4-4 4' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The tool names are set to `lg` in the block so they match the Insights post
   titles on phones (≤600px, single column). From tablet up the tiles sit
   multiple-across (3-up on tablet, 6-up on desktop) where `lg` is too large for
   the narrow cells — drop back to `sm` at ≥601px. */
@media (min-width: 601px) {
	.ad-home-audits .adx-tool-thumb p {
		/* !important to beat WP's `.has-lg-font-size` utility, which itself
		   ships with !important — a plain rule would lose to it. */
		font-size: var(--wp--preset--font-size--sm) !important;
	}
}

/* Tablet: lay the 6 audit tiles out 3-up (2 rows) instead of the desktop
   6-across row. Switching the columns wrapper to a 3-col grid overrides WP's
   flex layout — including its ≤781px "stack to 1 column" rule, which only sets
   flex-basis (ignored inside a grid container). Phones (≤600px) keep the
   single-column stack. */
@media (min-width: 601px) and (max-width: 1024px) {
	.ad-home-audits > .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem 1.25rem;
	}
}
/* translateZ(0) promotes the figure to its own compositing layer so Safari
   re-clips the scaled child against the rounded box — without it the bottom
   corners lose their radius on hover. */
.adx-tool-thumb .wp-block-image { overflow: hidden; border-radius: 0.25rem; margin: 0; transform: translateZ(0); }
.adx-tool-thumb .wp-block-image img { display: block; transition: transform 0.4s ease; }
.adx-tool-thumb:hover .wp-block-image img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.adx-tool-thumb .wp-block-image img { transition: none; }
	.adx-tool-thumb:hover .wp-block-image img { transform: none; }
}

/* Service-page team cards (.adx-team): the photo grows inside its rounded mask
   when the whole card (.has-card-link overlay) is hovered. translateZ(0) keeps
   Safari clipping the scaled image to the rounded figure. */
.adx-team .wp-block-image { overflow: hidden; border-radius: 0.25rem; margin: 0; transform: translateZ(0); }
.adx-team .wp-block-image img { display: block; transition: transform 0.5s ease; }
.adx-team .has-card-link:hover .wp-block-image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
	.adx-team .wp-block-image img { transition: none; }
	.adx-team .has-card-link:hover .wp-block-image img { transform: none; }
}

/* Team card grids: max 3 per row on tablet, 2 on mobile (desktop keeps the
   per-page 5/6 inline rule). Selector is (0,4,0) — outranks the inline
   .adx-team__cards{,6} flex-basis and WP's mobile-stack, both !important.
   :not(.ad-stats) leaves the stat-number columns alone. The generated layout
   class sets flex-wrap:nowrap + gap 2rem, so we force wrap below desktop. */
@media (max-width: 1024px) {
	.adx-team .wp-block-columns:not(.ad-stats) { flex-wrap: wrap !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.adx-team .wp-block-columns:not(.ad-stats) > .wp-block-column {
		flex-basis: calc((100% - 4rem) / 3) !important;
		flex-grow: 0;
	}
}
@media (max-width: 600px) {
	.adx-team .wp-block-columns:not(.ad-stats) > .wp-block-column {
		flex-basis: calc((100% - 2rem) / 2) !important;
		flex-grow: 0;
	}
}

/* Service-page team cards — Query Loop variant (.adx-team__query).
   Mirrors the static .adx-team card behavior but for post-template (CSS grid)
   + post-featured-image. The whole card is one accessible link: the post-title
   anchor is stretched to cover the card via ::after, so the image carries no
   second link (avoids a redundant-link flag). */

/* Whole-card stretched link off the single post-title anchor. */
.adx-team__query .adx-team__card { position: relative; }
.adx-team__query .adx-team__card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Photo grows inside its rounded mask on hover. overflow:hidden clips the
   scaled image; translateZ(0) keeps Safari re-clipping to the rounded figure.
   margin:0 is a UA reset on the <figure> the block renders. */
.adx-team__query .wp-block-post-featured-image { overflow: hidden; border-radius: 0.25rem; margin: 0; transform: translateZ(0); }
.adx-team__query .wp-block-post-featured-image img { display: block; transition: transform 0.5s ease; }
.adx-team__query .adx-team__card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
	.adx-team__query .wp-block-post-featured-image img { transition: none; }
	.adx-team__query .adx-team__card:hover .wp-block-post-featured-image img { transform: none; }
}

/* Responsive columns: desktop keeps the block's columnCount (6); tablet caps at
   3 per row, mobile at 2. post-template's grid layout emits
   grid-template-columns:repeat(N,...) via a generated container class — override
   it below desktop (!important is expected for post-template layout overrides). */
@media (max-width: 1024px) {
	.adx-team__query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	/* Override WP's .columns-6 > li fixed width (16.66%) so each item fills its
	   wider track in the reduced column count. */
	.adx-team__query .wp-block-post-template.is-layout-grid > li { width: auto !important; }
}
@media (max-width: 600px) {
	.adx-team__query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -----------------------------------------------
   Card Row
   ----------------------------------------------- */

/* Card — rounded corners, overflow clip. Background set natively via backgroundColor attribute. */
.ad-card {
	border-radius: 0.75rem;
	overflow: hidden;
}

/* Card image — flush to edges, consistent aspect ratio */
.ad-card__image {
	margin: 0;
}

.ad-card__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Where It Fits — Image Stack
   ----------------------------------------------- */

/* Container — height stretches to match sibling column */
.ad-image-stack {
	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
	height: 100%;
	min-height: 20rem;
}

/* Each figure is absolutely positioned and fills the container */
.ad-image-stack .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ad-image-stack .wp-block-image.is-active {
	opacity: 1;
}

.ad-image-stack .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Where It Fits — Industry List
   ----------------------------------------------- */

.ad-industry-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ad-industry-list li {
	/* Uses muted color slug for border — update if project muted color changes */
	border-bottom: 1px solid var(--wp--preset--color--muted);
	transition: border-color 0.25s ease;
}

.ad-industry-list li:hover {
	border-color: var(--wp--preset--color--primary);
}

.ad-industry-list a {
	display: block;
	padding: 1.25rem 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	line-height: 1.2;
}

.ad-industry-list li:first-child a {
	padding-top: 0;
}

.ad-industry-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ad-image-stack .wp-block-image,
	.ad-industry-list li {
		transition: none;
	}
}

/* -----------------------------------------------
   How It Works — Tabs
   ----------------------------------------------- */

/* Tab bar container — pill-shaped background wrapping all tab buttons.
   Width fits content via inline-flex; centered via margin auto. */
.ad-tabs__bar {
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	padding: 0.375rem;
	display: inline-flex !important;
	justify-content: center !important;
}

/* Center the inline-flex bar within the flow parent.
   Reset text-align so panel content stays left-aligned. */
.ad-tabs {
	text-align: center;
}

.ad-tabs__panels {
	text-align: left;
}

/* Tab bar — pill-shaped buttons on dark background */
.ad-tabs__bar .wp-block-button .wp-block-button__link {
	background-color: transparent;
	color: #9e9e9e;
	border: none;
	border-radius: 100px;
	padding: 0.625rem 1.5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ad-tabs__bar .wp-block-button .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--secondary);
}

.ad-tabs__bar .wp-block-button.is-active .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--secondary);
}

.ad-tabs__bar .wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Panels — hidden by default, visible when active.
   Extra specificity beats WordPress generated layout classes. */
.ad-tabs .ad-tabs__panel {
	display: none;
}

.ad-tabs .ad-tabs__panel.is-active {
	display: block;
}

/* Panel — clip children to rounded corners */
.ad-tabs__panel {
	overflow: hidden;
}

/* Panel image — fill height, cover crop, round left corners */
.ad-tabs__panel-image {
	overflow: hidden;
	border-radius: 0.75rem 0 0 0.75rem;
}

.ad-tabs__panel-image .wp-block-image {
	margin: 0;
	height: 100%;
}

.ad-tabs__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Panel video — cover block fills column like an image */
.ad-tabs__panel-image .wp-block-cover {
	min-height: 100% !important;
	background-color: var(--wp--preset--color--primary); /* Loading placeholder — covered by video */
}

/* Panel minimum height so video/image panels aren't collapsed */
.ad-tabs__panel .wp-block-columns {
	min-height: 24rem;
}

/* Pause button inside panel video — positioned bottom-left */
.ad-tabs__panel-image {
	position: relative;
}

.ad-tabs__panel-image .ad-pause-btn {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
}

/* Panel label — uppercase treatment. Color set natively via textColor attribute. */
.ad-tabs__panel-label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* Tighten space between panel label and heading */
.ad-tabs__panel-content h3 {
	margin-top: 0.5rem !important;
}

/* Section label centered in dark section */
.ad-how-it-works .ad-section-label {
	justify-content: center;
}

/* Panel content column — stretch to fill image height */
.ad-tabs__panel-content {
	display: flex;
	align-items: stretch;
}

/* Inner content group — flex column, body copy pushed to bottom */
.ad-tabs__panel-content > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ad-tabs__panel-content > .wp-block-group > p:last-child {
	margin-top: auto;
}

/* -----------------------------------------------
   How It Works — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	/* Tab bar wraps on small screens */
	.ad-tabs__bar {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}

	/* Stacked columns — image rounds top corners only, content below */
	.ad-tabs__panel-image {
		border-radius: 0.75rem 0.75rem 0 0;
	}

	.ad-tabs__panel-image img {
		aspect-ratio: 16 / 9;
	}

	/* Video cover block needs explicit min-height (percentage has no reference when columns stack) */
	.ad-tabs__panel-image .wp-block-cover {
		min-height: 280px !important;
	}
}

/* -----------------------------------------------
   How It Works — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-tabs__bar .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* -----------------------------------------------
   Testimonials Carousel
   ----------------------------------------------- */

/* Section — full-width, clip overflow so cards bleed right without scrollbar.
   overflow:clip (not hidden) avoids creating a scroll container. */
.ad-testimonials-section {
	padding-top: clamp(3rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 8vw, 8rem);
	overflow: clip;
}

/* Nav arrow group — inline flex with gap */
.ad-testimonials__nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Track — transform-based slider, overflow visible so cards bleed right.
   WP post-template renders as <ul>. Override grid/flex + reset list styles. */
.ad-testimonials__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem;
	overflow: visible;
	margin: 0;
	padding-left: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 4rem));
	transition: transform 0.4s ease;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}

/* Disable transition during drag so track follows pointer immediately */
.ad-testimonials__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

/* Post-template list items — flex children with fixed width.
   WP renders <ul class="track"><li>...<div class="card">...</li></ul>. */
.ad-testimonials__track > li {
	flex-shrink: 0;
	width: calc((100vw - clamp(1rem, 4vw, 4rem) - 3rem) / 2.5);
	list-style: none;
}

/* Card — rounded corners, muted background, fill its <li> parent */
.ad-testimonials__card {
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--muted);
	height: 100%;
}

/* Card image — flush, consistent aspect ratio */
.ad-testimonials__card-image {
	margin: 0;
}

.ad-testimonials__card-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Card content — flex column, push footer to bottom */
.ad-testimonials__card-content {
	display: flex;
	flex-direction: column;
	min-height: 14rem;
}

/* Blockquote wrapper — reset default browser/WP styles (added by render_block filter) */
.ad-testimonials__blockquote {
	margin: 0;
	padding: 0;
	border: none;
	flex: 1;
}

/* Quote text */
.ad-testimonials__quote {
	line-height: 1.5;
}

/* Card footer — name + role pushed to bottom */
.ad-testimonials__card-footer {
	margin-top: auto;
}

/* Name — bold, primary color */
.ad-testimonials__name {
	font-weight: 600;
	margin: 0;
}

/* Role */
.ad-testimonials__role {
	margin: 0;
}

/* Prevent text selection + image drag during carousel interaction */
.ad-testimonials__track.is-dragging * {
	user-select: none;
	-webkit-user-drag: none;
}

/* -----------------------------------------------
   Testimonials Carousel — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-testimonials__track > li {
		width: 80vw;
	}

	.ad-testimonials__card-content {
		min-height: auto;
	}
}

/* -----------------------------------------------
   Testimonials Carousel — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-testimonials__track {
		transition: none;
	}
}

/* -----------------------------------------------
   Case Studies — Expandable Cards
   ----------------------------------------------- */

.ad-case-studies {
	padding-top: clamp(3rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 8vw, 8rem);
}

/* Card container — flex row */
.ad-case-studies__cards {
	display: flex !important;
	flex-flow: row !important;
	gap: 1.5rem;
	margin-top: var(--ad-space-lg) !important;
}

/* Card (wp:column) — expand/shrink via width.
   Both items start at width:100% in a flex row.
   Hovered item goes to width:150% — flex distributes proportionally. */
.ad-case-studies__card {
	display: block !important;
	width: 100% !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	overflow: hidden;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: width 0.45s ease;
}

.ad-case-studies__card:hover,
.ad-case-studies__card.is-focused {
	width: 150% !important;
}

.ad-case-studies__cover {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 28rem !important;
}

/* Override WP flow layout constraints on card children */
.ad-case-studies__card > * {
	max-width: none !important;
}

/* Replace the solid dim overlay with a bottom gradient */
.ad-case-studies__cover .wp-block-cover__background {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%) !important;
	opacity: 1 !important;
}

/* Image scale on hover */
.ad-case-studies__cover .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

.ad-case-studies__card:hover .wp-block-cover__image-background,
.ad-case-studies__card.is-focused .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Inner content — flex column, arrow absolutely positioned */
.ad-case-studies__cover .wp-block-cover__inner-container {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	width: 100% !important;
	height: 100%;
	position: relative;
	padding-right: 4rem !important;
}

.ad-case-studies__title {
	font-weight: 600;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Reveal text — height-based reveal */
.ad-case-studies__reveal {
	height: 0 !important;
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.5;
	transition: height 0.4s ease;
}

.ad-case-studies__card:hover .ad-case-studies__reveal,
.ad-case-studies__card.is-focused .ad-case-studies__reveal {
	height: 3rem !important;
	padding-top: 0.5rem;
}

/* Arrow button — absolutely pinned to bottom-right */
.ad-case-studies__link {
	position: absolute !important;
	right: 0;
	bottom: 0;
	margin: 0 !important;
}

.ad-case-studies__btn .wp-block-button__link {
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-width: 2.75rem;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: transparent !important;
	color: var(--wp--preset--color--secondary) !important;
	font-size: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.ad-case-studies__btn .wp-block-button__link::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='10' x2='16' y2='10'/%3E%3Cpolyline points='11 5 16 10 11 15'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='10' x2='16' y2='10'/%3E%3Cpolyline points='11 5 16 10 11 15'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}

.ad-case-studies__card:hover .ad-case-studies__btn .wp-block-button__link,
.ad-case-studies__card.is-focused .ad-case-studies__btn .wp-block-button__link {
	transform: translateX(4px);
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.ad-case-studies__btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Case Studies — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-case-studies__cards {
		flex-flow: column !important;
	}

	.ad-case-studies__cover {
		min-height: 22rem !important;
	}

	.ad-case-studies__card,
	.ad-case-studies__card:hover,
	.ad-case-studies__card.is-focused {
		width: 100% !important;
	}

	/* Reveal text always visible on mobile */
	.ad-case-studies__reveal {
		height: auto !important;
		overflow: visible;
		padding-top: 0.5rem;
		transition: none;
	}

	.ad-case-studies__card,
	.ad-case-studies__cover .wp-block-cover__image-background,
	.ad-case-studies__btn .wp-block-button__link {
		transition: none !important;
	}

	.ad-case-studies__card:hover .wp-block-cover__image-background {
		transform: none !important;
	}

	.ad-case-studies__card:hover .ad-case-studies__reveal {
		height: auto !important;
		padding-top: 0.5rem;
	}

	.ad-case-studies__card:hover .ad-case-studies__btn .wp-block-button__link {
		transform: none !important;
	}
}

/* -----------------------------------------------
   Case Studies — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-case-studies__card,
	.ad-case-studies__cover .wp-block-cover__image-background,
	.ad-case-studies__reveal,
	.ad-case-studies__btn .wp-block-button__link {
		transition: none;
	}
}

/* -----------------------------------------------
   Video CTA — Background Video Call-to-Action
   ----------------------------------------------- */

/* Site padding — use root padding vars, not hardcoded clamp() */
.ad-video-cta {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Cover — relative for pause button, loading placeholder. */
.ad-video-cta__cover {
	position: relative;
	min-height: clamp(28rem, 80vh, 52rem) !important;
	background-color: var(--wp--preset--color--primary);
}

/* Filled button on dark overlay — reverse to light bg / dark text */
.ad-video-cta__cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.ad-video-cta__cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	opacity: 0.85;
}

/* Outline buttons on dark overlay — invert to white for readability */
.ad-video-cta__cover .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--secondary);
}

.ad-video-cta__cover .is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Pause/play toggle — bottom-right (shape via .ad-pause-btn in global.css) */
.ad-video-cta__pause-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
}

/* -----------------------------------------------
   Video CTA — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-video-cta__cover {
		min-height: 20rem !important;
	}
}

/* -----------------------------------------------
   Hero Full Bleed — Image Hero with Floating Card
   ----------------------------------------------- */

.ad-hero-card {
	max-width: 22rem;
	margin-left: auto;
	box-shadow: var(--ad-shadow-md);
}

.ad-hero-card__image {
	margin: 0;
}

.ad-hero-card__image img {
	display: block;
	object-fit: cover;
}

.ad-hero-card__label {
	margin: 0 !important;
}

.ad-hero-card__description {
	margin: 0 !important;
}

/* -----------------------------------------------
   Hero Full Bleed — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hero-card {
		max-width: none;
		margin-left: 0;
	}
}

/* -----------------------------------------------
   Grid Hover Cards — Card Grid with Hover Tooltips
   ----------------------------------------------- */

.ad-hover-card {
	position: relative;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	text-align: center;
	transition: background 0.2s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.ad-hover-card:hover {
	background: rgba(255, 255, 255, 0.08);
}

.ad-hover-card__logo {
	margin: 0;
	max-width: 120px;
}

.ad-hover-card__logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ad-hover-card__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
}

.ad-hover-card__trigger svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ad-hover-card__trigger:hover svg,
.ad-hover-card__trigger:focus-visible svg {
	transform: translateX(3px);
}

.ad-hover-card__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Tooltip */
.ad-hover-card__tooltip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 280px;
	max-width: 320px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	border-radius: 0.75rem;
	box-shadow: var(--ad-shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 10;
	text-align: left;
}

/* Caret pointing down */
.ad-hover-card__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: var(--wp--preset--color--secondary);
}

/* Active state */
.ad-hover-card.is-active .ad-hover-card__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.ad-hover-card__quote { margin: 0; }
.ad-hover-card__name { margin: 0; }
.ad-hover-card__role { margin: 0; }

.ad-hover-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	margin: 0;
}

.ad-hover-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------------------------
   Grid Hover Cards — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-hover-card,
	.ad-hover-card__tooltip,
	.ad-hover-card__trigger svg {
		transition: none;
	}
}

/* -----------------------------------------------
   Grid Hover Cards — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hover-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ad-hover-card__tooltip {
		min-width: 240px;
		max-width: 280px;
	}
}

/* -----------------------------------------------
   Card Links Image — Cards + Tall Image Section
   ----------------------------------------------- */

.ad-card-links__row {
	transition: background 0.2s ease;
}

.ad-card-links__row:hover {
	background: rgba(0, 0, 0, 0.03) !important;
}

.ad-card-links__row .wp-block-buttons {
	margin-top: 0 !important;
}

.ad-card-links__arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1;
	border-radius: 50% !important;
	background: var(--wp--preset--color--primary) !important;
	color: transparent !important;
	font-size: 0;
	text-decoration: none;
	position: relative;
}

.ad-card-links__row .wp-block-heading {
	padding-top: 0.125rem;
}

.ad-card-links__arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ad-card-links__arrow .wp-block-button__link:hover {
	opacity: 0.85;
}

.ad-card-links__arrow .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-card-links__image {
	height: 100%;
	margin: 0;
}

.ad-card-links__image img {
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Card Links Image — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-card-links__row {
		transition: none;
	}
}

/* -----------------------------------------------
   Card Links Image — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-card-links__image {
		min-height: 20rem;
	}
}

/* -----------------------------------------------
   Dual Panel Slider
   ----------------------------------------------- */

/* Track — stack slides for fade transition */
.ad-dual-slider__track {
	display: grid;
}

.ad-dual-slider__track > li {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Before JS initialises, show the first slide to prevent layout shift */
.ad-dual-slider__track:not(.is-initialised) > li:first-child {
	opacity: 1;
	visibility: visible;
}

/* Once JS adds .is-initialised, only .is-active slide is visible */
.ad-dual-slider__track.is-initialised > li.is-active {
	opacity: 1;
	visibility: visible;
}

.ad-dual-slider__avatar {
	flex-shrink: 0;
}

.ad-dual-slider__avatar img {
	object-fit: cover;
}

.ad-dual-slider__logo {
	margin: auto 0;
	text-align: center;
}

.ad-dual-slider__logo img {
	max-width: 280px;
	height: auto;
}

/* Wrapper — position context for nav overlay */
.ad-dual-slider__wrapper {
	position: relative;
}

/* Navigation arrows — positioned over bottom-center of right panel */
.ad-dual-slider__nav {
	position: absolute;
	bottom: 3.5rem;
	right: 0;
	width: 50%;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}

.ad-dual-slider__nav button {
	pointer-events: auto;
}

/* -----------------------------------------------
   Dual Panel Slider — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-dual-slider__track > li {
		transition: none;
	}
}

/* -----------------------------------------------
   Dual Panel Slider — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-dual-slider__quote-panel {
		min-height: auto;
	}

	.ad-dual-slider__company-panel {
		min-height: 300px !important;
	}

	.ad-dual-slider__nav {
		position: relative;
		width: auto;
		margin-top: -4.5rem;
		margin-bottom: 1.5rem;
		z-index: 2;
	}
}

/* -----------------------------------------------
   Project-Specific Styles
   Add below this line. Do not modify base theme patterns above.
   ----------------------------------------------- */

/* -----------------------------------------------
   Hero Header — shared
   `.hero-header-at-top` is added by both hero.js (home) and
   about-hero.js (about) when their heroes are at scroll-top.
   Stays in custom.css so it loads on both pages.
   The rest of Home Hero styles live in home.css.
   ----------------------------------------------- */

.hero-header-at-top .ad-header {
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* -----------------------------------------------
   Home Work Showcase
   ----------------------------------------------- */

.ad-home-work__icon {
	flex-shrink: 0;
	margin: 0 !important;
}

.ad-home-work__icon img {
	display: block;
}

/* Accolade links (work showcase) and the services-bar heading links share a
   treatment: inherit the surrounding text color, with a persistent offset
   underline matching the work-card titles (1px primary line, 2px gap below the
   text) instead of the thin default text-decoration. */
.ad-home-work__accolades a,
.ad-home-services h3 a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-position: 0 100%;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	padding-bottom: 1px;
}

/* Suppress the theme's default link :hover underline — otherwise it stacks a
   second line on top of the persistent gradient underline above. */
.ad-home-work__accolades a:hover,
.ad-home-services h3 a:hover {
	text-decoration: none;
}

.ad-home-work__card {
	transition: transform 0.3s ease;
}

.ad-home-work__card:hover {
	transform: scale(1.01);
}

.ad-home-work__card-link h3 {
	display: inline;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-position: 0 100%;
	background-size: 0% 2px;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	padding-bottom: 1px;
}

.ad-home-work__card-link:hover h3 {
	background-size: 100% 2px;
}

/* The global reveal system adds `.ad-reveal` to this heading and its
   `.js .ad-reveal` rule (0,2,0) replaces the transition above, so the hover
   draw-on jumps instantly with no easing. Re-declare at higher specificity
   (`h3.wp-block-heading` = 0,2,1) including BOTH the reveal's opacity/transform
   (so the fade-in still animates) AND background-size (so the draw-on animates).
   Same collision/fix as `.ad-services-list__row h3` below. */
.ad-home-work__card-link h3.wp-block-heading {
	transition: opacity 0.8s, transform 0.8s, background-size 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ad-home-work__card-link h3.wp-block-heading {
		transition: none;
	}
}

.ad-home-work__card-image {
	margin: 0 0 var(--ad-space-sm) 0;
	/* anchor for the GIF pause button + its frozen-frame canvas overlay */
	position: relative;
}

.ad-home-work__card-image img {
	width: 100%;
	display: block;
	border-radius: 0.25rem;
}

/* Frozen frame drawn over an animated GIF while it's "paused" (GIFs can't be
   natively paused, so JS covers them with a static canvas of the current
   frame). Matches the image's rounded corners. */
.ad-home-work__gif-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0.25rem;
}

.ad-home-work__video-wrap {
	position: relative;
	margin-bottom: var(--ad-space-sm);
}

.ad-home-work__card-video {
	overflow: hidden;
}

.ad-home-work__card-video video {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Stretched-link cards — any block with adCardUrl attribute */
.has-card-link {
	position: relative;
	cursor: pointer;
}

.ad-home-work__card-link h3 a,
.ad-home-work__card h3 a {
	color: inherit;
	text-decoration: none;
}

.ad-home-work__stretched-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
}

/* The overlay is the card's only link and is keyboard-focusable — show a clear
   focus ring around the whole card for keyboard users. */
.ad-home-work__stretched-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 0.25rem;
}

.ad-home-work__card-btn,
.ad-home-work__card-btn .wp-block-button {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
	font-size: 0;
}

.ad-home-work__card-btn .wp-block-button__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: transparent !important;
	font-size: 0;
	text-decoration: none;
	cursor: pointer;
}

.ad-home-work__card-btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Pause button — bottom-right of card video, above the stretched link.
   video-wrap has position:relative + z-index:auto so it does NOT create
   a stacking context — the button's z-index competes at the card level. */
.has-card-link .ad-pause-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 3;
}

/* Mouse-following cursor label */
.ad-home-work,
.ad-work-featured {
	position: relative;
}

/* "The Latest" intro subline — shrink-wrap and anchor to the right edge of the
   header column so it hugs the right of the screen on large monitors. Text stays
   left-aligned; the width cap comes from the block's editor Max Width (adMaxWidth). */
.ad-home-work__intro-copy {
	width: fit-content;
	margin-left: auto;
}

.ad-cursor-label {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--secondary);
	background: rgba(14, 14, 14, 0.5);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 0.125rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	white-space: nowrap;
	will-change: transform;
}

@supports (backdrop-filter: blur(1px)) {
	.ad-cursor-label {
		background: rgba(14, 14, 14, 0.35);
	}
}

.ad-cursor-label.is-visible {
	opacity: 1;
}

/* Cursor image — follows mouse on cards with data-cursor-image */
.ad-cursor-image {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	border-radius: 0.25rem;
	transition: opacity 0.3s ease;
	will-change: transform;
}

.ad-cursor-image.is-visible {
	opacity: 1;
}

.ad-cursor-image img {
	display: block;
	width: 250px;
	/* Fixed ratio so EVERY hover image crops to the same box regardless of the
	   uploaded file's native dimensions — object-fit:cover needs a definite
	   height to crop against (height:auto alone keeps each image's own ratio). */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

/* Logo variant (awards) — show the WHOLE mark, scaled, never cropped. JS adds
   this modifier when the hovered card is inside .ad-about-awards. */
.ad-cursor-image--contain img {
	aspect-ratio: auto;
	object-fit: contain;
}

@media (max-width: 781px) {
	.ad-home-work__card {
		min-height: 18rem !important;
	}
}

/* -----------------------------------------------
   Work — Showcase Slideshows
   ----------------------------------------------- */

.ad-work-featured {
	position: relative;
	z-index: 1;
}

.ad-work-showcase__slideshow {
	position: relative;
	z-index: 1;
	height: clamp(300px, 40vw, 600px);
	overflow: hidden;
	border-radius: 0.25rem;
}

.ad-work-showcase__slideshow .wp-block-image {
	margin: 0;
}

.ad-work-showcase__slideshow .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ad-work-showcase__slideshow .ad-pause-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 5;
}

/* Color crossfade overrides — GSAP animates container bg + color.
   WP preset color classes use !important, so we must override them
   with higher-specificity selectors that also use !important. */
.ad-work-featured [class*="has-"][class*="-color"],
.ad-work-showcase [class*="has-"][class*="-color"] {
	color: inherit !important;
}

/* After JS strips WP color classes, headings and paragraphs
   fall back to theme.json global heading color. Force inherit. */
.ad-work-featured h1,
.ad-work-featured h2,
.ad-work-featured h3,
.ad-work-featured h4,
.ad-work-featured p,
.ad-work-showcase h1,
.ad-work-showcase h2,
.ad-work-showcase h3,
.ad-work-showcase h4,
.ad-work-showcase p {
	color: inherit !important;
}

.ad-work-showcase .ad-work-showcase__tag {
	position: relative;
	z-index: 3; /* sit above .ad-home-work__stretched-link at z-index: 2 */
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem !important;
	border-radius: 0.125rem !important;
	background: var(--wp--preset--color--muted) !important;
	color: var(--wp--preset--color--primary) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 300;
	text-decoration: none;
	border: none;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
}

.ad-work-showcase .ad-work-showcase__tag::after {
	content: "+";
	font-weight: 300;
	font-size: 1.1em;
	transform: translateY(-0.05em);
}

.ad-work-showcase__project:hover .ad-work-showcase__tag:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--secondary) !important;
}

.ad-work-showcase__project {
	border-bottom: 1px solid currentColor;
	border-bottom-color: rgba(128, 128, 128, 0.2);
}

.ad-work-showcase__project:last-child {
	border-bottom: none;
}

/* Tags — collapsed by default, expand + fade in on card hover */
.ad-work-showcase__project div:has(> .ad-work-showcase__tag) {
	overflow: hidden;
	max-height: 0;
	margin-block-start: 0 !important;
	transition: max-height 0.35s ease, margin-block-start 0.3s ease;
}

.ad-work-showcase__project .ad-work-showcase__tag {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ad-work-showcase__project:hover div:has(> .ad-work-showcase__tag) {
	max-height: 4rem;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.ad-work-showcase__project:hover .ad-work-showcase__tag {
	opacity: 1;
}

/* -----------------------------------------------
   Work — All Projects Grid
   ----------------------------------------------- */

/* Thumbnail — image and video */
.ad-work-grid__thumb {
	margin: 0;
	overflow: hidden;
	border-radius: 4px; /* CSS fallback — block attribute overrides when set */
	position: relative;
}

.ad-work-grid__thumb img,
.ad-work-grid__thumb video {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform 0.5s ease;
}

.ad-work-grid__card:hover .ad-work-grid__thumb img,
.ad-work-grid__card:hover .ad-work-grid__thumb video {
	transform: scale(1.04);
}

/* Video card — pause button sits above the <a> link */
.ad-work-grid__pause {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: 2;
}

/* Text area */
.ad-work-grid__card .wp-block-post-title {
	margin: 0;
}

.ad-work-grid__card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.ad-work-grid__card .wp-block-post-title a:hover {
	opacity: 0.7;
}

/* Whole-card click — stretch the title link over the entire card so the
   thumbnail is clickable too, without a second (redundant) link on the image.
   The featured image is now isLink:false, so each card has ONE link (the
   title), which is also the card's accessible name. */
.ad-work-grid__card {
	position: relative;
}

.ad-work-grid__card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Tag pills link to different URLs — keep them clickable above the overlay.
   (The video pause button already sits at z-index: 2.) */
.ad-work-grid__tags-wrap {
	position: relative;
	z-index: 2;
}

/* Tagline */
.ad-work-grid__card .wp-block-paragraph {
	margin: 0;
}

/* Tags — pill style (matches showcase pills) */
.ad-work-grid__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 !important;
}

.ad-work-grid__tags a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
	border-radius: 0.125rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ad-work-grid__tags a::after {
	content: "+";
	font-weight: 300;
	font-size: 1.1em;
	transform: translateY(-0.05em);
}

.ad-work-grid__tags a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
}

.ad-work-grid__tags .wp-block-post-terms__separator {
	display: none;
}

/* Tags wrapper — space is permanently reserved so rows never shift when the
   pills reveal on hover; the pills themselves just fade in. */
.ad-work-grid__tags-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-block-start: 0.5rem !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ad-work-grid__tags {
	display: contents;
}

.ad-work-grid__card:hover .ad-work-grid__tags-wrap,
.ad-work-grid__card:focus-within .ad-work-grid__tags-wrap {
	opacity: 1;
	visibility: visible;
}

/* Grid layout */
.ad-work-grid__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.ad-work-grid__query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 781px) {
	/* Hide tag pills on work cards — no hover on touch */
	.ad-work-grid__tags-wrap,
	.ad-work-showcase__project div:has(> .ad-work-showcase__tag) {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.ad-work-grid__query .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* -----------------------------------------------
   Work Archive — Load More
   ----------------------------------------------- */

.ad-work-archive .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 2rem;
	border: 1px solid rgba(14, 14, 14, 0.2);
	border-radius: var(--ad-btn-radius);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.ad-work-archive .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--muted);
}

.ad-work-archive .wp-block-query-pagination-next.is-loading,
.ad-work-archive .wp-block-query-pagination-next[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* -----------------------------------------------
   Home Services Detail
   ----------------------------------------------- */

@media (min-width: 1025px) {
	/* Desktop only: equal-height subgrid for the home section's symmetric 3+3
	   card layout (heading column + two card columns). On tablet (≤1024) the
	   two card columns collapse into a single stacked column — see the
	   max-width:1024 rule below. On branding-related the split is 3+2 which
	   would leave empty rows and stretch cards beyond their content. */
	.ad-home-services-detail > .wp-block-columns:has(.ad-service-card) {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* auto (not 1fr) rows so each row is only as tall as its content —
		   1fr split the column height into three equal bands and left a big
		   empty gap under each short card. height:100% on the card still keeps
		   the two columns' cards aligned row-for-row. */
		grid-template-rows: repeat(3, auto);
		gap: var(--wp--preset--spacing--40);
	}

	.ad-home-services-detail > .wp-block-columns > .wp-block-column:has(.ad-service-card) {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		align-items: stretch;
	}

	.ad-home-services-detail .ad-service-card {
		height: 100%;
	}
}

/* Tablet: keep the "Services" heading in its own left column, but collapse the
   two card columns into a single column on the right (all 6 cards stacked).
   2-col grid; the heading spans both card-column rows, and the two card
   columns are placed one above the other in grid column 2. Phones (≤600) fall
   back to the WP single-column stack (heading on top). */
@media (min-width: 601px) and (max-width: 1024px) {
	.ad-home-services-detail > .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 2fr;
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
		align-items: start;
	}

	.ad-home-services-detail > .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.ad-home-services-detail > .wp-block-columns > .wp-block-column:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.ad-home-services-detail > .wp-block-columns > .wp-block-column:nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}
}

.ad-service-card {
	--_card-hover-bg: var(--wp--preset--color--muted);

	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	border-radius: 0.5rem;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.ad-service-card:hover {
	background-color: var(--_card-hover-bg);
}

/* Tighten the gap between the card's heading and its description. WP's
   layout system applies the theme-level blockGap (24px) between every
   pair of children in a `layout: default` group, which is too much for
   closely-related title + body copy inside a compact card.
   Specificity (0,2,0) with `.ad-service-card.wp-block-group` beats WP's
   `.is-layout-flow > * + *` rule (0,1,0) without needing `!important`. */
.ad-service-card.wp-block-group > * + * {
	margin-block-start: 0.5rem;
}

/* On the muted-background section the default hover (→ muted) is a no-op
   because the section is already muted. Use white instead so the hover
   is clearly visible. */
.ad-branding-related .ad-service-card {
	--_card-hover-bg: var(--wp--preset--color--secondary);
}

/* Related Services card grid — flows all six service cards in a single
   CSS grid so when the `ad_service_card_hide_current` filter strips the
   card for the current page, the remaining five auto-flow and there's no
   empty-column gap. `grid-auto-flow: column` + 3 explicit rows means the
   left column always fills first (3 cards), right column takes the
   remainder (2 cards when 5 are visible). */
.ad-branding-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.ad-branding-related__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-service-card {
		transition: none;
	}
}

/* Tablet + mobile: the hover background that signals "clickable" on desktop
   never fires on touch, so drop the card padding and hover state and add a
   persistent arrow as the affordance instead. padding uses !important to beat
   the inline spacing|50 set on each card in the block markup. */
@media (max-width: 1024px) {
	.ad-home-services-detail .ad-service-card {
		padding: 0 !important;
	}

	.ad-home-services-detail .ad-service-card:hover {
		background-color: transparent;
	}

	/* Arrow sits inline directly after the service name, using the same SVG as
	   the audit-tile arrows (.ad-home-audits .adx-tool-thumb p::after) rather
	   than the old top-right corner glyph. */
	.ad-home-services-detail .ad-service-card h3 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.ad-home-services-detail .ad-service-card h3::after {
		content: "";
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		/* Same mega-menu arrow as the audit tiles (kept in sync). */
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10h10M11 6l4 4-4 4' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* -----------------------------------------------
   More Services List (atomicdust/services-list-more)
   Two-column "More Marketing Services" — label pair on the left, a divided
   service link list on the right. Each row is one core/group carrying an
   adCardUrl; the ad_service_card_hide_current() filter strips the row whose
   URL matches the current page (separator included, since it lives inside the
   row), so the remaining rows keep a clean divider rhythm.
   ----------------------------------------------- */
/* Flat 1px tone-dark divider. The separator has `has-background`, so core
   would otherwise render it as a filled 2px line — `border:0; height:1px`
   collapses it to a hairline (same fix as .ad-industry-hero__rule). */
.ad-services-list__row .wp-block-separator.is-style-wide {
	margin: 0;
	width: 100%;
	border: 0;
	height: 1px;
}

/* The whole row is the link: `adCardUrl` makes the theme inject a stretched
   `.ad-home-work__stretched-link` overlay (position:absolute; inset:0) over the
   row, so the heading is PLAIN TEXT, not a second nested link. The hover
   affordance therefore keys off the ROW, not an inner <a>: hovering anywhere on
   the row (or keyboard-focusing the overlay link → :focus-within) draws the
   underline and slides the arrow on the heading.

   Two background layers on the heading: (1) a draw-on underline and (2) the
   mega-menu arrow. A background gradient is used for the underline instead of
   `text-decoration` (which paints unreliably on these big headings). The
   heading is inline-block so it hugs the text — the underline width animates
   0 → calc(100% - 2.25rem) = exactly the text width (100% of the padding box =
   text + the 2.25rem arrow gutter), stopping where the text ends so it never
   runs under the arrow. Arrow glyph = the header arrow (inc/header-tokens.php).
   padding-bottom lifts the underline off the descenders. */
.ad-services-list__row h3 {
	display: inline-block;
	padding-right: 2.25rem;
	padding-bottom: 2px;
	background-image:
		linear-gradient(currentColor, currentColor),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10h10M11 6l4 4-4 4' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	/* Per-layer origin: the underline is measured against the CONTENT box, so
	   `100%` = exactly the text width and it never runs under the arrow; the
	   arrow is measured against the PADDING box, so it sits in the 2.25rem right
	   gutter. Animating 0% → 100% (both percentages) gives the smooth draw-on of
	   the insights post titles — calc()↔length mismatched units would jump. */
	background-origin: content-box, padding-box;
	background-position:
		left bottom,
		right 0.5rem center;
	background-size:
		0% 2px,
		1.25rem 1.25rem;
}

/* The global reveal system adds `.ad-reveal` to each heading and its
   `.js .ad-reveal` rule (specificity 0,2,0) sets `transition: opacity/transform`
   for the fade-in — which OUTRANKS `.ad-services-list__row h3` (0,1,1) and
   replaces our transition, so the draw-on/arrow-slide would jump with no easing.
   Re-declare the transition at higher specificity (`h3.wp-block-heading` = 0,2,1)
   and include BOTH the reveal's opacity/transform (so the fade-in still animates)
   AND our background props (so the hover draw-on animates). */
.ad-services-list__row h3.wp-block-heading {
	transition: opacity 0.8s, transform 0.8s, background-size 0.4s ease, background-position 0.2s ease;
}

.ad-services-list__row:hover h3,
.ad-services-list__row:focus-within h3 {
	background-size:
		100% 2px,
		1.25rem 1.25rem;
	background-position:
		left bottom,
		right 0.25rem center; /* arrow slides ~4px right */
}

@media (prefers-reduced-motion: reduce) {
	.ad-services-list__row h3.wp-block-heading {
		transition: none;
	}
}

.ad-home-testimonial {
	max-width: 500px;
}

@media (max-width: 781px) {
	.ad-home-testimonial {
		max-width: 100%;
	}
}

.ad-home-testimonial__logo-wrap {
	max-width: 125px;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ad-home-testimonial__logo-wrap .wp-block-post-featured-image {
	width: 120px;
	margin: 0;
}

.ad-home-testimonial__content {
	gap: 0.25rem;
}

/* -----------------------------------------------
   Query Loop — shared grid sizing
   Used by Home Insights, archive pages, Insights Filters, and any other
   query-loop pattern wrapped in `.ad-query-loop`.
   ----------------------------------------------- */

.ad-query-loop .wp-block-post-template.is-layout-grid {
	row-gap: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 1024px) {
	.ad-query-loop .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.ad-query-loop .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Home / Healthcare-Thinking insights grid. WP's grid layout holds its column
   count at every width, and the .ad-query-loop steps above don't apply (this
   grid uses .ad-home-insights__grid, not .ad-query-loop) — plus home.css, which
   would stack it on the homepage, isn't enqueued on industry pages. Mirror the
   same 3 → 2 → 1 steps here so the posts stack on tablet and phone. */
@media (max-width: 1024px) {
	.ad-home-insights__grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.ad-home-insights__grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	/* With the grid at 1-up, lay each card out horizontally: featured image on
	   the left, badges / title / excerpt stacked on the right. The card is
	   normally a vertical flex; switch it to a 2-col grid and place the four
	   children explicitly. The image spans all three text rows and fills its
	   column (drop the inline 3/2 ratio so it covers the full card height). */
	.ad-home-insights__grid .ad-home-insights__card {
		display: grid;
		grid-template-columns: 40% 1fr;
		grid-template-rows: auto auto auto;
		column-gap: clamp(0.875rem, 3vw, 1.25rem);
		row-gap: 0.4rem;
		align-items: start;
	}

	.ad-home-insights__grid .ad-home-insights__card .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: stretch;
		margin: 0;
		aspect-ratio: auto !important;
	}

	.ad-home-insights__grid .ad-home-insights__card .ad-home-insights__badges {
		grid-column: 2;
		grid-row: 1;
	}

	.ad-home-insights__grid .ad-home-insights__card .wp-block-post-title {
		grid-column: 2;
		grid-row: 2;
	}

	.ad-home-insights__grid .ad-home-insights__card .wp-block-post-excerpt {
		grid-column: 2;
		grid-row: 3;
	}
}

/* -----------------------------------------------
   Insights cards (.ad-home-insights__card / __badges)
   Shared by Home Insights, Branding Insights, and Single Related Posts.
   Lives here (not home.css) so the styling loads on every page that
   reuses these classes — otherwise title links render default-link blue
   and category badges lose their box + plus styling off the homepage.
   ----------------------------------------------- */

.ad-home-insights__card {
	position: relative;
}

.ad-home-insights__card .wp-block-post-title {
	line-height: 1.4;
	margin-top: 0.25rem;
}

.ad-home-insights__card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.has-primary-background-color .ad-home-insights__card .wp-block-post-title a,
.has-dark-background-color .ad-home-insights__card .wp-block-post-title a {
	color: var(--wp--preset--color--secondary);
}

.ad-home-insights__card .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ad-home-insights__card .wp-block-post-title a {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 0% 2px;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	padding-bottom: 2px;
}

.ad-home-insights__card:hover .wp-block-post-title a {
	background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ad-home-insights__card .wp-block-post-title a {
		transition: none;
	}
}

.ad-home-insights__badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ad-home-insights__badges a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	border-radius: 0.125rem;
	background: var(--wp--preset--color--muted);
	border: none;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	position: relative;
	z-index: 1;
}

.ad-home-insights__badges a::after {
	content: '+';
}

.ad-home-insights__badges .wp-block-post-terms__separator {
	display: none;
}

.ad-home-insights__card .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.has-primary-background-color .ad-home-insights__card .wp-block-post-excerpt__more-text a,
.has-dark-background-color .ad-home-insights__card .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--secondary);
}

.ad-home-insights__card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 0.375rem;
}

.ad-home-insights__card .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.ad-home-insights__card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* -----------------------------------------------
   Insights Filters
   ----------------------------------------------- */

.ad-insights-filters__toggle {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--tone-light);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sohne);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--primary);
	padding: 0.875rem 0;
	text-align: left;
}

.ad-insights-filters__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.ad-insights-filters__toggle[aria-expanded="true"] .ad-insights-filters__chevron {
	transform: rotate(45deg);
}

.ad-insights-filters__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.ad-insights-filters__panel.is-open {
	grid-template-rows: 1fr;
}

.ad-insights-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	overflow: hidden;
	padding: 0;
	transition: padding 0.3s ease;
}

.ad-insights-filters__panel.is-open .ad-insights-filters__list {
	padding: 1rem 0 1.25rem;
}

.ad-insights-filters__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border-radius: 0.125rem;
	background: var(--wp--preset--color--tone-light);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ad-insights-filters__pill:hover {
	background: var(--wp--preset--color--tone-dark);
	color: var(--wp--preset--color--primary);
}

.ad-insights-filters__pill.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
}

/* Loading state */
.ad-query-loop.is-loading .wp-block-post-template {
	opacity: 0.3;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* Card enter animation */
.ad-card-enter {
	opacity: 0;
	transform: translateY(1rem);
}

.ad-card-enter--active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ad-insights-filters__pill {
		transition: none;
	}
	.ad-insights-filters__chevron {
		transition: none;
	}
	.ad-insights-filters__panel,
	.ad-insights-filters__list {
		transition: none;
	}
	.ad-query-loop.is-loading .wp-block-post-template {
		transition: none;
	}
	.ad-card-enter,
	.ad-card-enter--active {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Load-more "More +" button — appended by insights-filter.js after the post grid
   on Insights (home.html) and all post archives (archive, category, tag, search). */
.ad-load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	min-height: 3rem;
	padding: 0 2rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--ad-btn-radius);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ad-load-more:hover,
.ad-load-more:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.ad-load-more.is-loading,
.ad-load-more[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.ad-load-more__plus {
	display: inline-block;
	line-height: 1;
	transform: translateY(-1px);
}

/* -----------------------------------------------
   Parallax Footer
   ----------------------------------------------- */

.ad-footer-parallax {
	overflow: clip;
}

/* ── Logo footer ── */

.ad-footer-logo .wp-block-image {
	margin: 0;
}

.ad-footer-logo .wp-block-image img,
.ad-footer-logo svg,
.ad-footer-logo__canvas {
	width: 100%;
	height: auto;
	display: block;
}
.ad-footer-logo__svg {
	overflow: visible;
}

/* -----------------------------------------------
   Services — Showcase Slideshow
   ----------------------------------------------- */

.ad-services-showcase {
	position: relative;
	z-index: 1;
	height: 100svh;
	overflow: hidden;
}

.ad-services-showcase .wp-block-image {
	margin: 0;
}

.ad-services-showcase .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ad-services-showcase__pause {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
}

/* Intro copy directly after the showcase: lift above the slideshow so the
   parallax y-shift on .ad-services-showcase (position:relative; z-index:1)
   can't slide its images over the text. Mirrors .ad-services-statement. */
.ad-showcase-intro {
	position: relative;
	z-index: 2;
}

/* -----------------------------------------------
   Services — Statement
   ----------------------------------------------- */

.ad-services-statement {
	position: relative;
	z-index: 2;
	padding-top: var(--wp--preset--spacing--section);
	padding-bottom: var(--wp--preset--spacing--section);
}

/* -----------------------------------------------
   Services — Cards Grid (flex-wrap, nth-child sizing)
   ----------------------------------------------- */

/* — Grid container — */
.ad-services-grid {
	align-items: stretch;
}

.ad-services-grid > * {
	min-height: 400px;
}

/* Row 1 (items 1-3): thirds */
.ad-services-grid > *:nth-child(-n+3) {
	flex: 0 0 calc((100% - 2rem) / 3);
}

/* Row 2 (items 4-5): halves */
.ad-services-grid > *:nth-child(4),
.ad-services-grid > *:nth-child(5) {
	flex: 0 0 calc((100% - 1rem) / 2);
}

/* Row 3 (items 6-8): thirds */
.ad-services-grid > *:nth-child(n+6) {
	flex: 0 0 calc((100% - 2rem) / 3);
}

/* — Card styles — */
.ad-services-card {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark hover state — !important needed to beat WP's .has-tone-light-background-color */
.ad-services-card.has-card-link:hover {
	background-color: var(--wp--preset--color--primary) !important;
}

.ad-services-card.has-card-link:hover .wp-block-heading {
	color: var(--wp--preset--color--secondary) !important;
}

.ad-services-card.has-card-link:hover p {
	color: var(--wp--preset--color--tone-dark) !important;
}

.ad-services-card .wp-block-button__link {
	color: var(--wp--preset--color--secondary);
}

.ad-services-card.has-card-link:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* — Image cells — */
.ad-services-grid__image-cell {
	overflow: hidden;
	border-radius: 0.25rem;
	height: 100%;
}

/* Front end */
.ad-services-grid__image-cell .wp-block-image {
	margin: 0;
	height: 100%;
}

.ad-services-grid__image-cell .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.25rem;
}

/* Editor: pass height through WP's inner wrapper divs */
.ad-services-grid__image-cell > .block-editor-inner-blocks,
.ad-services-grid__image-cell > .block-editor-inner-blocks > .block-editor-block-list__layout,
.ad-services-grid__image-cell > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
	height: 100%;
}

.ad-services-grid__image-cell .wp-block-image figure,
.ad-services-grid__image-cell figure.wp-block-image {
	height: 100%;
	margin: 0;
}

.ad-services-grid__image-cell figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.25rem;
}

/* — Tablet: 2-col reflow — */
@media (max-width: 1024px) {
	.ad-services-grid > * {
		flex: 0 0 calc((100% - 1rem) / 2) !important;
		min-height: 300px;
	}
}

/* — Mobile: single column — */
@media (max-width: 782px) {
	.ad-services-grid > * {
		flex: 0 0 100% !important;
		min-height: auto;
	}

	.ad-services-grid__image-cell .wp-block-image img {
		height: 250px;
	}
}

/* -----------------------------------------------
   Industries — Cards Grid
   ----------------------------------------------- */

.ad-industries-grid {
	align-items: stretch;
}

.ad-industries-grid > * {
	min-height: 400px;
	flex: 0 0 calc((100% - 2rem) / 3);
}

@media (max-width: 1024px) {
	.ad-industries-grid > * {
		flex: 0 0 calc((100% - 1rem) / 2) !important;
		min-height: 300px;
	}
}

@media (max-width: 782px) {
	.ad-industries-grid > * {
		flex: 0 0 100% !important;
		min-height: auto;
	}

	.ad-industries-grid .ad-services-grid__image-cell .wp-block-image img {
		height: 250px;
	}
}

/* ==========================================================================
   Branding Page — Hero
   ========================================================================== */

/* Statement paints above showcase (z-index:1) as it scrolls over it */
.ad-branding-statement {
	position: relative;
	z-index: 2;
}

.ad-branding-hero .ad-branding-hero__title {
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Service & industry detail heroes: align right-column paragraph with h1 top.
   Pattern markup pins both columns to bottom; we override to top-align and
   pad the right column down by the left column's section-padding + eyebrow
   line + 20-gap so <p> first line == <h1> first line. */
@media (min-width: 781px) {
	.ad-branding-hero .ad-branding-hero__cols {
		align-items: flex-start;
	}
	.ad-branding-hero .ad-branding-hero__cols > .wp-block-column {
		align-self: flex-start;
	}
	.ad-branding-hero__cols > .wp-block-column:nth-child(2) > .wp-block-group {
		padding-top: calc(
			var(--wp--preset--spacing--section)
			+ var(--wp--preset--font-size--xs) * 1.5
			+ var(--wp--preset--spacing--20)
		);
	}
}

/* Tablet & mobile: the service hero's 8rem inline bottom padding leaves a large
   empty gap above the next section. Trim it. Targeted by the inline 8rem value
   itself ([style*="padding-bottom:8rem"]) rather than the following section —
   that following section varies per page (services showcase, or a wrapper that
   nests the intro-image, or the statement) and isn't always an adjacent sibling.
   Every service hero carries padding-bottom:8rem; the Industries hero doesn't,
   so it's excluded automatically. !important beats the inline declaration. */
@media (max-width: 1024px) {
	.ad-branding-hero[style*="padding-bottom:8rem"] {
		padding-bottom: 3rem !important;
	}

	/* Branding Statement: when its two columns stack (title over the intro
	   paragraph) the 3rem row-gap reads as too much space — tighten to 1rem.
	   Higher specificity than WP's generated wp-container gap rule; row-gap
	   only, so the side-by-side column gutter on wider tablets is untouched. */
	.ad-branding-statement > .wp-block-columns {
		row-gap: 1rem;
	}

	/* Trim the section's bottom padding on tablet/mobile — the inline value is
	   --spacing--section (up to 8rem), too much above the dark program box that
	   follows. !important to beat the per-block inline padding-bottom. */
	.ad-branding-statement {
		padding-bottom: 2rem !important;
	}

	/* Left-align the intro-copy column on tablet/mobile. Its outer group is a
	   vertical flex with justifyContent:right, which WP renders as
	   align-items:flex-end (content hugs the right) — fine side-by-side, wrong
	   once stacked. Force flex-start + left text. */
	.ad-branding-statement .wp-block-column:last-child .wp-block-group {
		align-items: flex-start;
		text-align: left;
	}

	/* Same fix for the hero's right column (paragraph + CTA button): its group
	   is also vertical-flex justifyContent:right → align-items:flex-end. Left-
	   align once stacked on tablet/mobile. */
	.ad-branding-hero .wp-block-column:last-child .wp-block-group {
		align-items: flex-start;
		text-align: left;
	}

	/* Cap the slideshow height on tablet & mobile — full-height (100svh) is too
	   tall on small screens. max-height keeps the true 100svh on very short
	   viewports; slides are position:absolute inset:0 and images object-fit:cover,
	   so they just crop to fill the shorter box. */
	.ad-services-showcase {
		max-height: 500px;
	}
}
@media (max-width: 600px) {
	.ad-branding-hero[style*="padding-bottom:8rem"] {
		padding-bottom: 2.5rem !important;
	}
}

/* ==========================================================================
   Branding Page — Services List (grid)
   ========================================================================== */

@media (max-width: 1023px) {
	.ad-branding-services-list__grid.wp-block-group {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 599px) {
	.ad-branding-services-list__grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ==========================================================================
   Parallax Speed — generic fixed-background effect
   ========================================================================== */

[data-parallax-speed] > .wp-block-group {
	position: relative;
	z-index: 1;
}

/* Dark intro copy scrolls over the image */
.ad-branding-intro {
	position: relative;
	z-index: 2;
}

/* Intro hero (background image) — cap height on smaller screens.
   The block sets min-height:100vh as an inline style (editor dimensions
   support), so the responsive overrides need !important to win against it.
   Using min-height (not max-height) shrinks the image area to these caps
   while letting it grow if the headline/copy ever runs taller — no clipping.
   Shared across all six /marketing-services/ hero pages. */
@media (max-width: 1024px) {
	.ad-branding-intro-image {
		min-height: 550px !important;
	}
}

@media (max-width: 600px) {
	.ad-branding-intro-image {
		min-height: 450px !important;
	}
}

/* ==========================================================================
   Branding Page — Process
   ========================================================================== */

/* Fallback for editor "reset" — matches block attribute pad_top/pad_bot */
.ad-branding-process {
	padding-top: clamp(3rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 8vw, 8rem);
}

/* Constrain content width in left column */
.ad-branding-process__left {
	max-width: 600px;
}

/* Video wrapper — position context for pause button */
.ad-branding-process__video-wrap {
	position: relative;
}

/* Hide cover block overlay and inner container — video only, no content layer */
.ad-branding-process__video .wp-block-cover__inner-container {
	display: none;
}

.ad-branding-process__pause {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 1;
}

/* ==========================================================================
   Branding Page — Benefits scroll strips
   ========================================================================== */

/* Client name marquee — repurposes the scroll-strip for two scrolling lines
   of client names (text only). Keep each name on one line, no block margins. */
.ad-client-marquee__name {
	margin: 0;
	white-space: nowrap;
	/* Larger than the lg token set on the block. !important beats the
	   has-lg-font-size preset utility class, which is itself !important. */
	font-size: calc(var(--wp--preset--font-size--lg) * 1.8) !important;
}

/* Wider spacing between names. */
.ad-client-marquee .ad-marquee__track {
	gap: clamp(3rem, 6vw, 5rem);
}

/* Slower, calmer auto-scroll (default marquee is 30s). */
.ad-client-marquee .ad-marquee {
	--ad-marquee-duration: 90s;
}

.ad-scroll-strip {
	overflow: hidden;
	/* Constrain to the container so overflow:hidden clips the wide marquee
	   track. The parent (.ad-branding-benefits__strips) is a vertical flex
	   with align-items:flex-start, which would otherwise let this grow to
	   the track's full content width and blow out the page horizontally. */
	width: 100%;
	align-self: stretch;
}

.ad-scroll-strip__track {
	gap: clamp(0.75rem, 2vw, 1rem);
}

.ad-branding-benefits-pill {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 0.375rem;
	padding: 0.875rem 1.5rem;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Editor: make scroll-strip pills wrap so all items are visible & editable */
.editor-styles-wrapper .ad-scroll-strip {
	overflow: visible;
}

.editor-styles-wrapper .ad-scroll-strip__track {
	flex-wrap: wrap !important;
}

.editor-styles-wrapper .ad-branding-benefits-pill {
	white-space: normal;
}

.editor-styles-wrapper .ad-branding-benefits__strips {
	position: relative;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	padding: 1.5rem 1rem 1rem;
	border-radius: 0.5rem;
}

.editor-styles-wrapper .ad-branding-benefits__strips::before {
	content: "Scroll Strip Rows";
	position: absolute;
	top: -0.7em;
	left: 1rem;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray, #757575);
	background: var(--wp--preset--color--primary, #0e0e0e);
	padding: 0 0.5rem;
}

.editor-styles-wrapper .ad-scroll-strip {
	position: relative;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 0.375rem;
	padding: 1.25rem 1rem 0.75rem;
	margin-top: 0.5rem;
}

.editor-styles-wrapper .ad-scroll-strip::before {
	position: absolute;
	top: -0.7em;
	left: 0.75rem;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray, #757575);
	background: var(--wp--preset--color--primary, #0e0e0e);
	padding: 0 0.4rem;
}

.editor-styles-wrapper .ad-scroll-strip:not(.ad-scroll-strip--reverse)::before {
	content: "Row 1 — Scrolls Right to Left";
}

.editor-styles-wrapper .ad-scroll-strip--reverse::before {
	content: "Row 2 — Scrolls Left to Right";
}

/* ==========================================================================
   Branding Page — Related Services
   ========================================================================== */

/* Below-782px: the :has()-based desktop grid is suppressed; WP's stock
   stacked-on-mobile column behaviour takes over. Columns stack, each card
   fills width. No extra rules needed. */

/* ── About Hero Source ── */

/* Frontend: zero out WP layout spacing — hero animation manages its own layout. */
.ad-about-hero-source {
	padding: 0;
	margin: 0;
}
.ad-about-hero-source > * + * {
	margin-block-start: 0;
}

/* Editor: labeled container for hero content blocks. */
.editor-styles-wrapper .ad-about-hero-source {
	position: relative;
	border: 1px dashed var(--wp--preset--color--tone-dark, #d3d3d3);
	padding: 2rem 1.5rem 1.5rem;
	border-radius: 0.5rem;
}
.editor-styles-wrapper .ad-about-hero-source::before {
	content: "About Hero Content";
	position: absolute;
	top: -0.7em;
	left: 1rem;
	background: var(--wp--preset--color--secondary, #fff);
	padding: 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body, #555);
}

/* -----------------------------------------------
   Contact Page (light) — hero, form, studio
   ----------------------------------------------- */

/* Hero title — thin + tight. Matches the airy display typography on the
   reference page (weight 100–200 on a 108px headline). Our lightest weight
   is 300, so we lean on tight line-height + letter-spacing for the feel. */
.ad-contact-hero__title {
	line-height: 0.98;
	letter-spacing: -0.025em;
	font-weight: 300;
	margin: 0;
}

/* Labels above each info-row item — tiny and spaced out slightly so they
   read as meta-info, not body copy. No uppercase per spec. */
.ad-contact-hero__label,
.ad-contact-studio__credentials .wp-block-paragraph:not([class*="value"]):first-child,
.ad-contact-studio__credentials p.has-gray-color {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	font-weight: 400;
	color: var(--wp--preset--color--gray);
}

.ad-contact-hero__value {
	font-weight: 300;
	line-height: 1.5;
}

/* Body copy in form intro — airier line-height to match reference
   (28.8px on 18px → 1.6). */
.ad-contact-form .ad-contact-form__intro .wp-block-paragraph:not(.ad-section-label):not(.ad-contact-form__quote-attr) {
	line-height: 1.6;
}

.ad-contact-form__title {
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 300;
	margin: 0;
}

.ad-contact-form__quote-text {
	line-height: 1.55;
}

/* Four-column info row — links always underlined so they read as links;
   underline thickens on hover/focus for affordance. */
.ad-contact-hero__info a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-thickness 0.2s ease;
}

.ad-contact-hero__info a:hover,
.ad-contact-hero__info a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Form section — the contact-page form sits in a light-gray padded "box" on the
   white section. Field chrome (white fill, gray hairline border, dark text,
   labels, placeholder, dark button, muted asterisk) inherits the shared light
   .ad-contact-cta__form base in contact-cta.css. Here we only set the box,
   tighten the corner radius to match the site button (0.25rem), keep an
   accessible focus indicator, and space the relocated Turnstile. */
.ad-contact-form__form.ad-contact-cta__form {
	background-color: var(--wp--preset--color--muted);
	border-radius: 0.25rem;
	padding: clamp(1.75rem, 4vw, 3rem);
}

/* (Field corner radius now comes from the base .ad-contact-cta__form rule in
   contact-cta.css — 0.25rem site-button radius — for both the contact page and
   the CTA pages, so no contact-page override is needed here.) */

/* Keyboard-only focus — a real outline on top of the base border-color change
   (WCAG 2.4.7 / 2.4.13). */
.ad-contact-form__form.ad-contact-cta__form .ginput_container input:focus-visible,
.ad-contact-form__form.ad-contact-cta__form .ginput_container textarea:focus-visible,
.ad-contact-form__form.ad-contact-cta__form .ginput_container select:focus-visible,
.ad-contact-form__form.ad-contact-cta__form input[type="checkbox"]:focus-visible,
.ad-contact-form__form.ad-contact-cta__form input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.ad-contact-form__form.ad-contact-cta__form .gform_footer .gform_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Turnstile is relocated by contact-form.js to sit AFTER the submit button
   (contact page + CTA pages); give it breathing room below the button. */
.ad-contact-cta__form .gfield--type-turnstile {
	margin-top: 1.25rem;
}

/* --- Studio section --- */

.ad-contact-studio__title {
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 300;
	margin: 0;
}

.ad-contact-studio__address-line {
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

/* Credential row values — smaller than md to match reference (16px/1.4) */
.ad-contact-studio__credentials p.has-primary-color {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	font-weight: 300;
}

.ad-contact-studio__directions a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: opacity 0.2s ease;
}

.ad-contact-studio__directions a:hover,
.ad-contact-studio__directions a:focus-visible {
	opacity: 0.7;
}

/* Map wrapper — iframe is keyboard-navigable in place, then the
   "Open in Google Maps" link sits below it as a sibling (not a wrapper),
   so assistive tech can access the embedded map controls independently
   from the external link. */
.ad-contact-studio__map {
	overflow: hidden;
	border-radius: 0.25rem;
	position: relative;
}

.ad-contact-studio__map-iframe {
	filter: grayscale(0.4);
	display: block;
}

.ad-contact-studio__map-iframe:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.ad-contact-studio__map-cta {
	display: block;
	padding: 0.85rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--body);
	background-color: rgba(14, 14, 14, 0.04);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ad-contact-studio__map-cta:hover,
.ad-contact-studio__map-cta:focus-visible {
	color: var(--wp--preset--color--primary);
	background-color: rgba(14, 14, 14, 0.07);
}

.ad-contact-studio__map-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Studio photo — taller than the old 320px so it aligns with the right column
   (map iframe 320 + the "Open in Google Maps" bar ≈ 395px total). Fixed height
   rather than 100% to avoid flex circular-sizing blowing the image up. */
.ad-contact-studio__photo {
	border-radius: 0.25rem;
	overflow: hidden;
}

.ad-contact-studio__photo img {
	display: block;
	width: 100%;
	height: 395px;
	object-fit: cover;
}

/* Stacked on mobile — shorter, fixed height. */
@media (max-width: 781px) {
	.ad-contact-studio__photo img {
		height: 320px;
	}
}

/* --- Responsive --- */

@media (max-width: 781px) {
	.ad-contact-hero__info.wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
	}

	.ad-contact-studio__credentials.wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.5rem;
	}

	.ad-contact-studio__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.ad-contact-hero__info.wp-block-columns {
		grid-template-columns: 1fr;
	}

	.ad-contact-studio__credentials.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   ad-wd-tabs — stripped-down vertical tabs (desktop) / accordion (mobile)
   Labels live in .ad-wd-tabs__list (left), content in .ad-wd-tabs__panels
   (right); only the active panel shows. wd-tabs.js pairs them by index and,
   on mobile (<= 880px), relocates each panel under its tab to form an
   accordion (.ad-wd-tabs__panels is emptied + hidden).
   ========================================================================== */
.ad-wd-tabs {
	display: grid;
	grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.75fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	background-color: var(--wp--preset--color--tone-light);
	border-radius: 0.25rem;
	/* Padding is set on the block in the editor (admin-controlled), not here. */
}

/* ---- Header (heading + subhead) — spans full width above the tab grid ---- */
.ad-wd-tabs__header {
	grid-column: 1 / -1;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ad-wd-tabs__header-sub {
	max-width: 52rem;
}

/* ---- Left column: tab triggers ---- */
.ad-wd-tabs__list {
	display: flex;
	flex-direction: column;
}
.ad-wd-tabs__tab {
	cursor: pointer;
	position: relative;
	padding-top: clamp(0.4rem, 1vw, 0.6rem);
	padding-bottom: clamp(0.4rem, 1vw, 0.6rem);
	padding-left: 1.25rem;
	transition: padding-left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Active-state dot in the left gutter */
.ad-wd-tabs__tab::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: -0.1875rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ad-wd-tabs__tab[data-active="true"]::before {
	opacity: 1;
	transform: scale(1);
}
.ad-wd-tabs__tab:hover,
.ad-wd-tabs__tab:focus-visible {
	padding-left: 1.75rem;
}
.ad-wd-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}
.ad-wd-tabs__label {
	color: var(--wp--preset--color--gray);
	transition: color 200ms ease;
}
.ad-wd-tabs__tab:hover .ad-wd-tabs__label,
.ad-wd-tabs__tab[data-active="true"] .ad-wd-tabs__label {
	color: var(--wp--preset--color--primary);
}

/* ---- Right column: active panel ---- */
.ad-wd-tabs__panel[hidden] {
	display: none;
}
/* Eyebrow (size/weight/color via block attrs) + headline (natural h3 from
   theme.json) need no custom rules. Body just gets a readable measure. */
.ad-wd-tabs__panel-body {
	line-height: 1.6;
	max-width: 42rem;
}

/* Services list — full-width multi-column list under the tab grid, inside the
   gray card. Auto-fits columns to the available width. */
.ad-wd-tabs__services {
	grid-column: 1 / -1;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--tone-dark);
}
.ad-wd-tabs__services-list {
	columns: 3;
	column-gap: clamp(2rem, 5vw, 4rem);
	list-style: none;
	/* Don't reset margin-top here — that's the group's blockGap (admin-controlled
	   gap between the "Website services" label and the list). Only reset the
	   list's default indent + bottom margin. */
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}
@media (max-width: 900px) {
	.ad-wd-tabs__services-list { columns: 2; }
}
@media (max-width: 600px) {
	.ad-wd-tabs__services-list { columns: 1; }
}
.ad-wd-tabs__services-list li {
	break-inside: avoid;
	padding: 0.45rem 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
}

@keyframes adTabFade {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: none; }
}
.ad-wd-tabs__panel[data-active="true"] {
	animation: adTabFade 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- Mobile: accordion (panels moved under their tab by JS) ---- */
@media (max-width: 880px) {
	.ad-wd-tabs {
		display: block;
	}
	.ad-wd-tabs__panels {
		display: none;
	}
	.ad-wd-tabs__tab:hover,
	.ad-wd-tabs__tab:focus-visible {
		padding-left: 1.25rem;
	}
	.ad-wd-tabs__panel {
		padding-bottom: clamp(1.25rem, 5vw, 1.75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-wd-tabs__tab,
	.ad-wd-tabs__num,
	.ad-wd-tabs__label {
		transition: none;
	}
	.ad-wd-tabs__panel[data-active="true"] {
		animation: none;
	}
}

/* -----------------------------------------------
   Program / process step numbers (01, 02, 03…)
   -----------------------------------------------
   Decorative ordinals on the "How we build…" numbered lists are rendered
   via a CSS counter instead of literal text, so WAVE no longer flags them
   as "Possible heading" (large text reads as a heading to its heuristic)
   and screen readers don't announce a bare number before the real <h3>.
   The .ad-step-num paragraph is left empty in the markup; its styling
   (size/weight/color) is inherited by the generated ::before. Same
   technique as .ad-faq__count. No counter-reset is needed — each page has
   a single list. The counter is reset on the wrapping .ad-step-list card so
   the numbers share one scope and ascend (the rows live in separate columns
   blocks, so without this each would restart at 01). Same as .ad-faq__list. */
.ad-step-list {
	counter-reset: ad-step;
}

.ad-step-num {
	counter-increment: ad-step;
}

.ad-step-num::before {
	content: counter(ad-step, decimal-leading-zero);
}

/* -----------------------------------------------
   Healthcare Capabilities list — numbered, ruled rows
   ----------------------------------------------- */

/* Linked capability title — use the heading color (not the accent link
   blue), with an underline that grows on hover. */
.ad-cap-list__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-position: 0 100%;
	background-size: 0% 1px;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	padding-bottom: 2px;
}

.ad-cap-list__title a:hover,
.ad-cap-list__title a:focus-visible {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.ad-cap-list__title a {
		transition: none;
	}
}

/* -----------------------------------------------
   Industry Hero — stats row
   3-up label/value metrics with a top rule and
   vertical dividers between items. Used by the
   editorial industry hero (e.g. /industries/*).
   ----------------------------------------------- */

.ad-industry-stats {
	border-top: 1px solid var(--wp--preset--color--tone-dark);
}

/* Match the hero hairline to the stats rule: a flat 1px tone-dark line
   (core renders a filled/2px separator otherwise). */
.ad-industry-hero__rule {
	border: 0;
	height: 1px;
}

/* Accolade points — icon + single line, mirroring the homepage
   three-points (.ad-home-work__accolades). No eyebrow, no dividers. */
.ad-industry-stats__icon {
	flex-shrink: 0;
	margin: 0;
}

/* Kill the inline baseline gap below the SVG so the figure box is exactly the
   icon height (20px). Otherwise the img sits at the bottom of a taller line-box
   and centers ~3px below the text. display:block lets the flex row (align-items:
   center) align the icon to the text's optical center. */
.ad-industry-stats__icon img {
	display: block;
}

.ad-industry-stats__point p {
	margin: 0;
}

/* -----------------------------------------------
   Industry Hero — Work grid
   2x2 query loop of the latest projects in this
   industry's work-category. Card link + floating
   cursor image are wired server-side (see
   ad_industry_work_card_link in functions.php).
   ----------------------------------------------- */

.ad-industry-work__card {
	position: relative;
}

/* The cursor "View Project" label is appended to the post wrapper (<li>) and
   positioned absolutely against it, so the wrapper must be a positioning
   context — otherwise the label lands off-screen. */
.ad-industry-work .wp-block-post {
	position: relative;
}

.ad-industry-work__thumb img {
	border-radius: 0.25rem;
	display: block;
	width: 100%;
}

/* Video card — matches the 4/3 featured-image framing (see the post-featured-image
   aspectRatio attr). The PHP filter swaps the image for an autoplay loop video
   when a work post has an ad_work_card_video meta value. */
.ad-industry-work__thumb--video {
	/* Match the inline margin WP applies to the image figure so the title
	   lines up across image and video cards. */
	margin: 0 0 var(--wp--preset--spacing--40);
	overflow: hidden;
	border-radius: 0.25rem;
	position: relative;
}

.ad-industry-work__video {
	display: block;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Pause button sits above the stretched card link (z-index 2). */
.ad-industry-work__pause {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 3;
}

/* Title — plain text (the whole card is one link via .ad-industry-work__stretched-link).
   Animated underline grows on card hover; inline-block so it hugs the text, and
   no z-index so the stretched overlay catches clicks across the title too. */
.ad-industry-work__card .wp-block-post-title {
	display: inline-block;
	color: inherit;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-position: 0 100%;
	background-size: 0% 2px;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	padding-bottom: 2px;
}

.ad-industry-work__card:hover .wp-block-post-title {
	background-size: 100% 2px;
}

/* Tighten the gap between the project title and its descriptor. */
.ad-industry-work__desc {
	margin-top: 0.25rem;
}

.ad-industry-work__stretched-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
}

/* The overlay is the card's only link and is keyboard-focusable — show a clear
   focus ring around the whole card for keyboard users. */
.ad-industry-work__stretched-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.ad-industry-work__card .wp-block-post-title {
		transition: none;
	}
}

/* -----------------------------------------------
   Branding Benefits — on-light variant
   The default benefit pill uses a translucent-white
   fill tuned for dark sections. On a light section,
   swap to the muted token so pills stay visible.
   ----------------------------------------------- */

.ad-branding-benefits--on-light .ad-branding-benefits-pill {
	background: var(--wp--preset--color--muted);
}

/* ==========================================================================
   ad-process-carousel — process steps as a card slider.
   Mirrors the light testimonials carousel: transform-based track, shared
   .ad-carousel-btn nav (created by process-carousel.js), cards bleed right
   and are clipped by the section. Section bg = lightest gray, cards = white
   (both set via block attrs / admin). Card: name large top, desc bottom.
   ========================================================================== */
/* Nav arrows — bottom-right of the header, close to the track. (WP's flex
   layout doesn't emit a vertical-alignment class for the group, so pin here.) */
.ad-process-carousel__nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
	align-self: flex-end;
}

/* Track — native scroll-snap carousel, contained within the section's
   (admin-controlled) padding. No alignfull, no hardcoded padding, no clip —
   so the left edge matches the editor and every card is reachable. Scrollbar
   hidden; arrows (process-carousel.js) scroll by one card. */
.ad-process-carousel__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* The track is alignfull (spans the viewport edge-to-edge), so cards bleed
	   off BOTH viewport edges as they rotate. The inline padding (= the real
	   root/global padding, not a hardcoded value) insets the first card to the
	   content-left at rest and gives the last card a content-right gutter so it
	   scrolls fully into view; scroll-padding-left snaps to that same content
	   line. No negative margins — alignfull already reaches the viewport, and
	   WP's constrained-layout auto-margins would override them anyway. */
	padding-inline: var(--wp--style--root--padding-left, clamp(0.75rem, 2.5vw, 2.5rem));
	scroll-padding-left: var(--wp--style--root--padding-left, clamp(0.75rem, 2.5vw, 2.5rem));
	/* a little bottom room so the card shadow isn't clipped by the scroll box */
	padding-bottom: 0.5rem;
	cursor: grab;
}
.ad-process-carousel__track::-webkit-scrollbar {
	display: none;
}
.ad-process-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}
.ad-process-carousel__track.is-dragging * {
	user-select: none;
	-webkit-user-drag: none;
}

/* Cards — equal height; name top / desc bottom via the block's own flex
   space-between. Subtle lift off the gray section. */
.ad-process-carousel__track > .ad-process-carousel__card {
	scroll-snap-align: start;
	/* ~2 full cards with the third bleeding off the right edge. Percentage of
	   the track width scales to any number of cards (other pages have more). */
	flex: 0 0 clamp(17rem, 40%, 32rem);
	/* All cards stretch to the tallest (align-items: stretch on the track); a
	   modest floor keeps them from getting too short. */
	min-height: clamp(20rem, 24vw, 24rem);
	box-shadow: 0 1px 3px rgba(14, 14, 14, 0.05);
}
.ad-process-carousel__card-name {
	color: var(--wp--preset--color--primary);
}
.ad-process-carousel__card-desc {
	line-height: 1.6;
	/* Pin the body to the bottom of the (equal-height) card so the free space
	   sits BETWEEN the headline and the body — not below it. Reliable in a flex
	   column regardless of WP's justify-content layout class. !important beats
	   the block's inline margin-top:0. */
	margin-top: auto !important;
}

@media (max-width: 781px) {
	.ad-process-carousel__track > .ad-process-carousel__card {
		flex-basis: min(78vw, 22rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-process-carousel__track {
		scroll-behavior: auto;
	}
}

/* Editor — render the cards as a stackable grid so every one is visible and
   editable (no horizontal scroll/bleed/clip inside the block canvas). */
.editor-styles-wrapper .ad-process-carousel__track {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
	overflow: visible;
	margin-inline: 0;
	padding-inline: 0;
}
.editor-styles-wrapper .ad-process-carousel__track > .ad-process-carousel__card {
	flex: initial;
	width: auto;
}

/* ==========================================================================
   Brand Visibility audit ([adbvs_audit]) — restyle the scan form to match the
   theme. Scoped under .adbvs so it beats the plugin's single-class rules
   regardless of stylesheet load order.
   ========================================================================== */

/* Label — drop the plugin's all-caps/tracking (the site never uses uppercase). */
.adbvs .adbvs__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--gray);
}

/* Input — soften the heavy square field: rounded + light border + accent focus. */
.adbvs .adbvs__input {
	border: 1px solid rgba(14, 14, 14, 0.2);
	border-radius: 0.25rem;
	font-size: 1rem;
}
.adbvs .adbvs__input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ==========================================================================
   ad-wd-accordion — full-width dark disclosure accordion (Website Design
   benefits). Native-block triggers; wd-accordion.js adds ARIA + GSAP reveal.
   ========================================================================== */
.ad-wd-accordion__list {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ad-wd-accordion__item {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Trigger row — heading + sub on the left, +/- marker on the right */
.ad-wd-accordion__trigger {
	cursor: pointer;
	position: relative;
	align-items: flex-start; /* top-align title + second headline */
	padding-top: clamp(1.5rem, 3vw, 2rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	padding-right: 3rem; /* room for the absolute +/- marker */
	column-gap: clamp(1.5rem, 4vw, 3rem);
	transition: padding-left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ad-wd-accordion__trigger:hover {
	padding-left: 0.5rem;
}
.ad-wd-accordion__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}
/* Title + second headline are fixed 25% columns, so the second headlines
   left-align across every row. */
.ad-wd-accordion__title {
	color: var(--wp--preset--color--secondary);
	flex: 0 0 25%;
}
.ad-wd-accordion__sub {
	color: var(--wp--preset--color--tone-dark);
	flex: 0 0 25%;
}

/* +/- marker (becomes − when open) — pinned to the right, clear of the columns */
.ad-wd-accordion__trigger::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1.5px, 1.5px 1rem;
	color: var(--wp--preset--color--secondary);
	transition: background-size 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.ad-wd-accordion__item[data-open="true"] > .ad-wd-accordion__trigger::after {
	background-size: 1rem 1.5px, 0 1rem;
}

/* Panel — GSAP animates height + opacity */
.ad-wd-accordion__panel {
	height: 0;
	opacity: 0;
	overflow: hidden;
}
.ad-wd-accordion__body {
	color: var(--wp--preset--color--tone-dark);
	line-height: 1.6;
	max-width: 64ch;
}

/* Mobile — 25% columns are too narrow; stack the title + second headline. */
@media (max-width: 781px) {
	.ad-wd-accordion__trigger {
		flex-wrap: wrap;
		row-gap: 0.25rem;
	}
	.ad-wd-accordion__title,
	.ad-wd-accordion__sub {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-wd-accordion__trigger,
	.ad-wd-accordion__trigger::after {
		transition: none;
	}
}

/* Button — match the site's filled button (theme.json core/button). */
.adbvs .adbvs__btn {
	border: 1px solid transparent;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--sohne);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	line-height: 1;
	padding: 1rem 2rem;
	transition: opacity 0.25s ease;
}
.adbvs .adbvs__btn:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	opacity: 0.85;
}


/* ==========================================================================
   Audit CTA on a dark section (.ad-audit-cta) — invert the [adbvs_audit] form
   for legibility on black. Flips the plugin's ink/paper vars (covers the score
   UI etc.) and overrides the theme-styled form bits for dark.
   ========================================================================== */
.ad-audit-cta .adbvs {
	--adbvs-ink: var(--wp--preset--color--secondary);
	--adbvs-paper: var(--wp--preset--color--primary);
	--adbvs-gray: var(--wp--preset--color--tone-dark);
	color: var(--wp--preset--color--secondary);
	/* Left-align the form (plugin centers it with margin: 0 auto). */
	margin-left: 0;
	margin-right: auto;
}
.ad-audit-cta .adbvs__label,
.ad-audit-cta .adbvs__fine {
	color: var(--wp--preset--color--tone-dark);
}
.ad-audit-cta .adbvs__input {
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--secondary);
	background: transparent;
}
.ad-audit-cta .adbvs__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.ad-audit-cta .adbvs__btn {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}
.ad-audit-cta .adbvs__btn:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	opacity: 0.85;
}

/* -----------------------------------------------
   Stat rows — keep the big numbers and their descriptions
   top-aligned regardless of +/× superscripts. The <sup> on
   "25+"/"200+" was expanding those number boxes taller than
   "5×", pushing their descriptions down a few px.
   (BugHerd #9 / #33 / #184)
   ----------------------------------------------- */
.ad-stats {
	align-items: flex-start;
}
.ad-stats sup {
	line-height: 0;
}

/* Tablet & mobile: tighten the gap between each big number and its description.
   The columns' own 3rem blockGap (the larger space *between* stacked stats) is
   left alone — this only targets the inner number→description rhythm, which
   otherwise inherits the default ~24px block-gap and reads too loose at size. */
@media (max-width: 1024px) {
	.ad-stats .wp-block-column > * + * {
		margin-block-start: 0.4rem;
	}
}

/* ==========================================================================
   About — "Our philosophy" split (30/70: black text column + b-roll video)
   ========================================================================== */

/* Equal-height columns so the video matches the text column's height.
   blockGap is 0 on the block (no gutter); media column is edge-to-edge. */
.ad-philosophy-split {
	align-items: stretch;
}

/* Make the media column a flex context so the video-wrap fills its height. */
.ad-philosophy-split__media {
	display: flex;
	flex-direction: column;
}

/* Video wrapper — positioning context for the JS-injected pause button,
   stretches to fill the column height. */
.ad-philosophy-split__video-wrap {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

/* Cover block fills the wrapper; its video is cropped to cover. */
.ad-philosophy-split__video,
.ad-philosophy-split__video .wp-block-cover__video-background {
	height: 100%;
	min-height: 100%;
}

.ad-philosophy-split__video .wp-block-cover__video-background {
	object-fit: cover;
}

/* No text layer over the video — hide the cover's empty inner container. */
.ad-philosophy-split__video .wp-block-cover__inner-container {
	display: none;
}

/* Pause/play toggle — bottom-right over the video (shape via .ad-pause-btn). */
.ad-philosophy-split__pause {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 1;
}

/* Stacked layout: give the video a fixed ratio so it doesn't collapse when
   the columns are no longer side-by-side. */
@media (max-width: 781px) {
	.ad-philosophy-split__video-wrap {
		flex: none;
		aspect-ratio: 16 / 10;
	}
}

/* Two-image row — the full-width columns pair of cover photos (a 70vh + 50vh
   cover) that recurs on most service / industry / about pages — capped at 400px
   tall on phones so the row doesn't tower over the content. The covers carry no
   shared class, so we target them by their inline vh min-heights scoped to a
   columns block (the 100vh newsletter hero, 0px covers, and work covers are left
   alone). min() keeps smaller viewports scaling down with the screen instead of
   being forced up to 400px. .ad-cover-cap-mobile is the explicit opt-in for any
   other cover. Desktop height stays editor-controlled via the cover's minHeight
   attr; !important is needed because the block renders min-height inline. */
@media (max-width: 781px) {
	.ad-cover-cap-mobile.wp-block-cover,
	.wp-block-columns .wp-block-cover[style*="min-height:50vh"] {
		min-height: min(50vh, 400px) !important;
	}
	.wp-block-columns .wp-block-cover[style*="min-height:70vh"] {
		min-height: min(70vh, 400px) !important;
	}
}

/* Service-page awards rows (.adx-awards): the rows are authored with
   isStackedOnMobile:false, so on phones the year (8% col), award name, and
   client list cram into three skinny columns — and the year ("2026") breaks
   mid-number. Override that and let the cells STACK on mobile: each column goes
   full-width and wraps to its own line (year, then name, then clients). */
@media (max-width: 781px) {
	.adx-awards .wp-block-columns.is-not-stacked-on-mobile {
		/* !important is required: core ships
		   `.wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important }`,
		   so without it the columns never wrap and stay side-by-side (shrunk). */
		flex-wrap: wrap !important;
		/* The authored column gap (24px row / 32px col) becomes the vertical gap
		   once stacked, leaving year/name/clients too far apart. Tighten the
		   row-gap so the three lines read as one grouped award; the column-gap is
		   irrelevant when each cell is full-width. */
		row-gap: 0.25rem;
	}
	.adx-awards .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Footer phone | address separator (#262) */
.ad-footer__contact-info .ad-footer__sep { margin: 0 0.5rem; opacity: 0.5; }

/* ==========================================================================
   Private Equity industry page — 2026 live-mirror sections
   Open editorial layout that mirrors atomicdust.com/industries/private-equity/
   using existing site styles. Layout/colors/padding are block-attr driven;
   these rules only cover what palette + block attrs can't express: the
   subtle light hairlines on the two dark sections (rgba — no palette slug
   for a near-black hairline) and the fit-content architecture label chip.
   All selectors scoped to .ad-pe-* so nothing else is affected.
   ========================================================================== */

/* Architecture label chip — hug its text instead of filling the column */
.ad-pe-chip { display: inline-block; width: fit-content; }

/* Architecture columns — thin black top rule above each chip (matches live) */
.ad-pe-arch__col { border-top: 1px solid var(--wp--preset--color--primary); }

/* Dark sections (Challenges, ROI): subtle light hairline the palette lacks
   (gray #6e6e6e reads too strong on near-black; live uses low-opacity white) */
.ad-pe-cc__card { border: 1px solid rgba(255, 255, 255, 0.14); }
.ad-pe-roi__list { border-top: 1px solid rgba(255, 255, 255, 0.28); }
.ad-pe-roi__item + .ad-pe-roi__item { border-top: 1px solid rgba(255, 255, 255, 0.13); }