/*
 * interworks-hello overrides — loaded after the transitional Bridge/old-child
 * cascade (see inc/assets.php), so rules here win on equal specificity.
 */

/*
 * Fix: with the WP admin bar visible, #top-block (rendered on blog singles +
 * the /blog page) sat ~110px too low — the old .admin-bar override was -20px
 * against a -130px baseline. Correct compensation for the 32px admin bar is
 * baseline + 32 ≈ -98px; -100px per QA. Long-standing bug that also exists on
 * live under Bridge; fixed here as part of the migration. Other pages render
 * #top-block-primary (opacity: 0), which is why they were never affected.
 */
.admin-bar #top-block {
	top: -100px;
}



/*
 * Restored after coverage-pruning (Aug 2026): homepage dynamic-CTA rules.
 * JS-injected seconds into the animation - runtime coverage never saw
 * them; static extractor missed bare '.className =' assignments.
 * Complete set lifted verbatim from legacy-style.css incl @media.
 */
.iw-dynamic-cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 20px;
    background: #6633ff40;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(102, 51, 255, 0.28);
    border-radius: 8px;
    max-width: 700px;
    margin: 25px auto 0;
    /* Sequenced entrance — starts hidden + scaled down, then JS toggles
       .iw-is-in to scale-pop the whole prompt into existence after the
       title has settled. Typing animation is gated to start after this. */
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center top;
    transition:
        opacity 0.45s ease,
        transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    /* Override the fire host's crosshair so cursor reads as interactive
       UI when over the prompt. Buttons/links inside set their own pointer. */
    cursor: default;
}

.iw-dynamic-cta.iw-is-in {
    opacity: 1;
    transform: scale(1);
}

.iw-dynamic-cta__text {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    min-height: 1.5em;
    line-height: 1.5;
}

.iw-dynamic-cta__cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #ffffff;
    margin-left: 2px;
    vertical-align: middle;
    animation: iw-cta-blink 0.65s step-end infinite;
}

.iw-dynamic-cta__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Reserve space on the right for the absolutely-positioned action
       button, plus enough vertical room that the absolute button doesn't
       get clipped if the history row is shorter. The right padding is
       sized for the longest CTA label ("VIEW CASE STUDIES") with breathing
       room. Mobile drops back to inline flow (handled in mobile media query). */
    position: relative;
    min-height: 44px;
    padding-right: 230px;
}

.iw-dynamic-cta-history {
    display: flex;
    align-items: center;
    flex: 1;
}

.iw-cta-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 1;
    transition: background 0.2s ease, opacity 0.2s ease;
    color: #fff !important;
}

.iw-cta-history-btn:hover {
    background: #1C0056;
    color: #fff !important;
    opacity: 1;
}

.iw-cta-history-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.iw-dynamic-cta__action-btn {
    display: inline-flex;
    align-items: center;
    /* Right-align content so as the button widens/narrows, the right edge
       (and any trailing icon) stays anchored. */
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 22px;
    background: #6633ff;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    /* Absolute positioning isolates the button from any sibling reflows —
       history pills sliding in/out can't push the button. Right edge stays
       pinned to the right of .iw-dynamic-cta__bottom (which has padding-
       right reserved for it). */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s ease, width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.iw-dynamic-cta__action-btn:hover {
    background: #7a4fff;
}

.iw-dynamic-cta__action-label {
    display: inline-block;
    /* JS handles the pop — opacity + scale on label change. Defaults here
       so the very first render has a clean state. */
    transform-origin: 50% 50%;
}

@media (max-width: 1024px) {
.iw-dynamic-cta__text {
        font-size: 20px;
    }
}

@media (max-width: 1024px) {
.iw-dynamic-cta__action-btn {
        font-size: 14px;
        padding: 7px 18px;
    }
}

@media (max-width: 1024px) {
.iw-cta-history-btn {
        font-size: 13px;
        padding: 7px 10px;
    }
}

@media (max-width: 1024px) {
.iw-dynamic-cta__bottom {
        padding-right: 200px;
    }
}

@media (max-width: 600px) {
.iw-dynamic-cta {
        /* Pull the prompt closer to the title so the hero feels tighter. */
        margin-top: 12px;
        gap: 18px;
    }
}

@media (max-width: 600px) {
.iw-dynamic-cta__text {
        font-size: 17px;
        min-height: 3em;
    }
}

@media (max-width: 600px) {
.iw-dynamic-cta__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        /* Reset desktop's absolute-positioning reservations — on phone the
           button stacks below the history row in normal flow. */
        position: static;
        padding-right: 0;
        min-height: 0;
    }
}

@media (max-width: 600px) {
.iw-dynamic-cta__action-btn {
        font-size: 12px;
        padding: 10px 14px;
        justify-content: center;
        width: 100%;
        /* Back to inline flow — drop the desktop absolute pinning. */
        position: static;
        transform: none;
    }
}

@media (max-width: 600px) {
.iw-cta-history-btn {
        font-size: 11px;
        padding: 6px 8px;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 600px) {
.iw-cta-history-icon {
        width: 12px;
        height: 12px;
    }
}

/* Restored after pruning: scramble-hover portrait images + team-count card (JS-injected on hover — same blind spot as the CTA chips). */
.iw-hover-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    position: relative;
    /* Keep the element on its own GPU compositor layer even after the
       entrance animations finish — otherwise the parent's translateX(-50%)
       centering can leave the image at a fractional-pixel position when
       it gets re-rasterized, which reads as a slight blur. will-change
       pins the layer without conflicting with the animation's transform. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation:
        iw-img-spring 0.8s linear(0, 0.409 5.7%, 0.68 10.7%, 0.838 15.5%, 0.877 17.9%, 0.89 20.3%, 0.883 22.1%, 0.862 24%, 0.775 28.1%, 0.103 46.8%, -0.03 51.9%, -0.11 56.9%, -0.142 61.2%, -0.143 65.9%, -0.124 70.2%, -0.021 86%, -0.004 92.1%, 0) both,
        iw-img-fade 0.25s ease-out both;
}

.iw-hover-img + .iw-hover-img {
    margin-left: -30px;
}

.iw-hover-img--pill {
    width: auto;
    /* Match circle height (70px) so the pill aligns with other tooltip images */
    height: 70px;
    border-radius: 9999px;
    object-fit: contain;
}

.iw-hover-img--pill + .iw-hover-img--pill,
.iw-hover-img + .iw-hover-img--pill,
.iw-hover-img--pill + .iw-hover-img {
    margin-left: 6px;
}

.iw-hover-img--count {
    /* Match the photos' rendered size: photos use content-box so a 70px
       width with a 4px border renders 78px outer. Override here to 78px
       outer with border-box so the count circle matches. */
    width: 78px;
    height: 78px;
    background: #090014;
    font-family: "Doto", Monospace;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    padding: 0;
}

.iw-hover-img + .iw-hover-img--count {
    margin-left: -10px;
}

/*
 * Fix: /videos landing (videos_landing shortcode) featured images.
 * .post_image here is a background-image DIV (unlike blog archives'
 * real <img>), so it needs explicit dimensions. Under Bridge those came
 * from the option-generated style_dynamic_callback CSS — our frozen
 * snapshot was fetched without WP context and never contained them, so
 * the divs collapsed to zero height from cutover day onward
 * (user-reported Aug 2026). Scoped to videos_landing_holder only;
 * blog archives are unaffected.
 */
.videos_landing_holder.blog_holder.blog_small_image article .post_content_holder {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.videos_landing_holder.blog_holder.blog_small_image article .post_content_holder > a {
	flex: 0 0 400px;
	display: block;
}
.videos_landing_holder.blog_holder.blog_small_image article .post_image {
	width: 400px !important;
	max-width: 100% !important;
	height: 250px !important;
	float: none !important;
	margin: 0 !important;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
}
.videos_landing_holder .post_text {
	flex: 1;
	min-width: 0;
}
@media screen and (max-width: 900px) {
	.videos_landing_holder.blog_holder.blog_small_image article .post_content_holder {
		flex-direction: column;
		gap: 16px;
	}
	.videos_landing_holder.blog_holder.blog_small_image article .post_content_holder > a {
		flex: none;
		width: 100%;
	}
	.videos_landing_holder .post_image {
		width: 100%;
		height: auto;
		aspect-ratio: 400 / 250;
	}
}


/*
 * Taxonomy archives (industries, case_study_type, event_region, event_type,
 * german_case_study_type) + the generic archive.php.
 *
 * These are the last templates still rendering the legacy Bridge chrome:
 * get_template_part('title') for the page title and templates/blog-structure
 * for the listing. Modern pages are built in Elementor and never hit this path,
 * so the archives drifted visually — the title sat at y:0 underneath the fixed
 * 135px header, the filter row had ~170px of dead space above the results, and
 * posts rendered as bare title + excerpt with no card, image or read-more.
 *
 * Scoped to body.archive so only these templates are touched; Elementor pages
 * and blog singles keep their own layout. Rewriting title.php / blog-structure
 * would be the deeper fix, but both are shared Bridge partials — styling here
 * gets the archives in line with the rest of the site at far lower risk.
 */

/*
 * Legacy term header images. title.php renders .title.term-title-image with an
 * inline background-image whenever a term carries the ACF `term_image` field —
 * 14 industries still do, all 2017-era stock photos from a design that is long
 * retired. They sat behind the page title, hurting legibility and looking
 * nothing like the rest of the site.
 *
 * The image is killed in CSS rather than by editing title.php or clearing the
 * ACF field: .term-title-image is the wrapper for the whole title block, so
 * removing the element would take the heading with it, and clearing the field
 * would destroy content that is still referenced elsewhere. !important is
 * required because the declaration is inline.
 */
body.archive .title .term-title-image,
body.archive .title.term-title-image {
	background-image: none !important;
	background-color: transparent !important;
}

/*
 * The same retired design has a second branch: when a term carries the ACF
 * `term_video` field, title.php emits a <video id="term-video"> plus an inline
 * <style> setting position:fixed / 100% / 100%. Its wrapper is zero-height with
 * z-index:-1, so the video escaped the header entirely and covered the whole
 * viewport behind the page — content rendered on top of full-bleed video and
 * the archive read as broken.
 *
 * Exactly one term uses it (series/quantified). Hidden rather than removed
 * from the template for the same reason as the image above: the branch also
 * opens the .title wrapper the heading lives in. !important is required to
 * beat the inline <style> block.
 */
body.archive #term-video {
	display: none !important;
}

/*
 * The video branch's .title wrapper carries an inline `height: auto` and
 * `z-index: -1`, and with the <video> removed it collapses to zero height.
 * Because .title_holder inside it is position:absolute, the heading then had
 * no space reserved for it and was overlaid on top of the first post rather
 * than sitting above the list — it looked missing entirely.
 *
 * Restoring a normal flow height for this wrapper puts the title back in the
 * document and gives the listing its own space. Only ever applies to terms
 * that used the retired video header (one: series/quantified).
 */
body.archive .title.has_fixed_background {
	z-index: auto !important;
	height: auto !important;
	min-height: 230px;
}

/* Clear the fixed header (135px) and give the title room to breathe. */
body.archive .title_holder {
	height: auto !important;
	padding: 175px 0 0;
}
body.archive .title_holder .container,
body.archive .title_holder .container_inner,
body.archive .title_holder .title_subtitle_holder {
	height: auto !important;
	padding-top: 0;
	padding-bottom: 0;
}
body.archive .title_holder h1 {
	font-size: 48px;
	line-height: 1.15;
	margin: 0;
}
/* The legacy title markup wraps the h1 in fixed-height holders; collapse them
   to the heading's own height. */
body.archive .title_holder .title_subtitle_holder,
body.archive .title_holder .title_subtitle_holder_inner {
	height: auto !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: block !important;
}
body.archive .title_holder .container_inner {
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * The global Bridge title subtitle ("— Insights & Discussion —") renders on
 * every archive, including these taxonomy pages where it is simply wrong. It
 * is already invisible — light text on the light title background — but still
 * occupies 33px plus 40px of margin, which was the mystery gap between the
 * heading and the filter row. Hidden rather than restyled: there is no useful
 * subtitle for an industry or case-study-type archive.
 */
body.archive .title_holder h4.subtitle {
	display: none;
}

/* Filter row: close the dead space, align it to the page container. */
body.archive .action-bar {
	padding: 24px 0 0;
}
body.archive .action-bar .event-filters {
	margin: 0;
}
body.archive .action-bar .filter-option {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
body.archive .action-bar .filter-option h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: inherit;
}

/* The bare <select> was the most off-brand element on the page; give it the
   same pill treatment .blog-menu links get on the sibling archives. */
body.archive select.event-filter {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 40px 10px 18px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background-color: #f4f4f6;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	font-size: 15px;
	line-height: 1.2;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.archive select.event-filter:hover {
	background-color: #ebebef;
	border-color: rgba(0, 0, 0, 0.22);
}
body.archive select.event-filter:focus-visible {
	outline: 2px solid #63e;
	outline-offset: 2px;
}

/* Term description, when the term has one. */
/*
 * Term description. 14 industries carry one, and it was rendering hard against
 * the left viewport edge in a grey box, because .industry-description-wrapper
 * sits inside a full-bleed .container. Centre it over the listing and drop the
 * box — it reads as body copy, not a callout.
 */
body.archive .industry-description-wrapper {
	box-sizing: border-box;
	/* Full width of the content column. The wrapper's parent is the full-bleed
	   .container, not .container_inner, so it needs the same 1100px cap the
	   heading, filter row and post listing sit on — otherwise "full width"
	   would mean edge-to-edge browser width and break alignment. */
	width: calc(100% - 40px);
	max-width: 1100px;
	margin: 32px auto 0;
	padding: 22px 28px;
	/* Very light tint of the brand purple, so the panel reads as a soft callout
	   rather than the old flat grey box. */
	background: #f5f2ff;
	border-radius: 12px;
	text-align: center;
}
/* The description arrives as wrapped <p> markup carrying the theme's default
   body colour, so the paragraphs have to be targeted directly. */
body.archive .industry-description,
body.archive .industry-description p {
	/* site.css ships `.industry-description p { font-size: 19px !important }`,
	   so matching specificity is not enough to shrink it. */
	font-size: 15px !important;
	line-height: 1.55;
	/* Muted, desaturated take on the brand purple — #612bd1 read too vivid for
	   a paragraph of body copy at this size. Deeper and softer, still clearly
	   purple against the tinted panel. */
	color: #4a3b7a;
}
/* site.css gives these paragraphs `padding: 40px 0` and `margin: 0 53px`,
   which is where the old box got its bulk. Reset both so the panel's own
   padding is what actually controls the spacing. */
body.archive .industry-description p {
	padding: 0;
	margin: 0 0 10px;
}
body.archive .industry-description p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 600px) {
	body.archive .industry-description-wrapper {
		padding: 18px 20px;
	}
}

/* Listing: turn the bare title+excerpt stack into separated rows that match
   the card-ish rhythm used elsewhere, and make the whole row feel clickable. */
body.archive .container > .container_inner {
	padding-top: 32px;
}
body.archive .blog_holder article {
	padding: 0 0 28px;
	margin: 0 0 28px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.archive .blog_holder article:last-child {
	border-bottom: 0;
}
body.archive .blog_holder article .post_title h2,
body.archive .blog_holder article h2 {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 10px;
}
body.archive .blog_holder article .post_title a:hover,
body.archive .blog_holder article h2 a:hover {
	color: #63e;
}
body.archive .blog_holder article .post_excerpt,
body.archive .blog_holder article .post_text p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	/* Legacy default was #666 on white — too faint next to the rest of the
	   site's body copy, and short of 4.5:1 at this size. */
	color: #3d3d47;
}

/*
 * Featured image to the left of the text.
 *
 * The markup already contains the image — .post_image is a background-image
 * DIV wrapped in the permalink <a> — but like the /videos landing above, it
 * lost its dimensions at the Bridge cutover (they came from the option
 * generated style_dynamic_callback CSS, which the frozen snapshot never
 * captured). So it computed to 0x0 and the archives looked text-only.
 *
 * Giving it a size and flexing the row puts case-study thumbnails and blog
 * featured images to the left, which is what these listings were built for.
 */
body.archive .blog_holder article .post_content_holder {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
body.archive .blog_holder article .post_content_holder > a {
	flex: 0 0 260px;
	display: block;
	position: relative;
}
body.archive .blog_holder article .post_image {
	width: 260px !important;
	max-width: 100% !important;
	height: 165px !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	overflow: hidden;
}
body.archive .blog_holder article .post_text {
	flex: 1;
	min-width: 0;
}

/*
 * ~27% of published posts have no featured image, but no empty-state rule is
 * needed: the template falls back to images/default.jpg, so .post_image always
 * carries a background and the column is never blank.
 */

/*
 * Category badge. The global Bridge default is teal (#1abbb4) with a solid
 * fill — the "old topic/category style". The modern blog templates already
 * restyle it to flat purple text (see .page-template-iw-blog-iv rules in
 * site.css); the archives never inherited that, so they kept the teal chip.
 * Matching the newer treatment rather than inventing a third style.
 *
 * Inside .blog-meta-wrapper the badge sits over the image, so it keeps a
 * legible pill there; in the text column it becomes plain purple caps.
 */
body.archive .blog_holder article .blog-meta-wrapper {
	padding: 12px;
}
body.archive .blog_holder article .blog-meta-wrapper span.post-cat {
	background: rgba(255, 255, 255, 0.92);
	color: #612bd1;
	letter-spacing: 1px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
}
body.archive .blog_holder article a:hover .blog-meta-wrapper {
	padding-bottom: 12px;
}
body.archive .blog_holder article .post_text span.post-cat {
	background: transparent;
	color: #612bd1;
	letter-spacing: 0;
	padding: 0;
	font-size: 14px;
}

/*
 * Gutters below the desktop grid.
 *
 * .container_inner is a fixed 1100px with padding:0 — above 1100px it centres
 * with margin, but from 1100px down it simply fills the viewport edge to edge.
 * Bridge only patches this at <=480px (width:90%), so every width in between —
 * the whole tablet range, iPad portrait included — had the title, post list
 * and images running flush into both screen edges.
 *
 * .action-bar wraps its own .grid_section/.section_inner and never had a
 * gutter at any width, which is why the filter row and search box were flush
 * on phones too.
 *
 * One rule for both, so the filter row always lines up with the content.
 */
@media screen and (max-width: 1350px) {
	body.archive .content .container .container_inner,
	body.archive .action-bar .section_inner {
		box-sizing: border-box;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The heading's own wrapper is zeroed by
	   `.content .title .container_inner { padding: 0 !important }` in site.css,
	   so it needs naming separately and at the same weight — otherwise the
	   title alone sits flush while the rest of the page is inset. */
	body.archive .content .title .container_inner {
		box-sizing: border-box;
		width: 100%;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/*
	 * The search box is position:absolute, pinned to the right of the action
	 * bar. That works at desktop width, where the channel pills fit alongside
	 * it — but below the desktop grid the pills grow to full width and the
	 * search simply floats on top of them, covering the right-hand topics.
	 *
	 * Drop it back into normal flow on its own line, full width beneath the
	 * pills.
	 */
	body.archive .action-bar .blog-search {
		position: static;
		width: 100%;
		margin-top: 18px;
		float: none;
	}
	/* The input is `height:30px` + 10px vertical padding under content-box,
	   which is what produces its 50px pill. Under border-box that padding eats
	   the height, so restate the 50px explicitly — that way width:100% lines
	   the field up with the pills above it (its 50px left padding, which makes
	   room for the search icon, would otherwise inset the visible box). */
	body.archive .action-bar .blog-search form {
		width: 100%;
	}
	body.archive .action-bar .blog-search input {
		box-sizing: border-box;
		width: 100%;
		height: 50px;
	}
}

/* Below 480px Bridge's own width:90% takes over on .container_inner; match it
   on the filter row so the two stay aligned. */
@media screen and (max-width: 480px) {
	body.archive .content .container .container_inner {
		width: 100%;
	}
}

@media screen and (max-width: 900px) {
	/* Bridge's responsive rules zero the title padding below this breakpoint,
	   which put the heading back under the fixed header — hence !important. */
	body.archive .title_holder,
	body.archive .title_outer .title_holder {
		padding-top: 130px !important;
	}
	body.archive .title_holder h1 {
		font-size: 34px;
	}
}

/*
 * Stack the row only once there genuinely isn't room for image + text. At
 * 900px there still is: a 768px iPad was getting a full-width 768px-wide
 * thumbnail, which dwarfed the post it belonged to.
 */
@media screen and (max-width: 680px) {
	body.archive .blog_holder article .post_content_holder {
		flex-direction: column;
		gap: 14px;
	}
	body.archive .blog_holder article .post_content_holder > a {
		flex: none;
		width: 100%;
	}
	body.archive .blog_holder article .post_image {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 260 / 165;
	}
}


/* ==========================================================================
 * /blog/series (page id 6687)
 *
 * Unlike the taxonomy archives above this is an Elementor page, so it has no
 * body.archive, no .title_holder and no "Channel" eyebrow — none of the rules
 * above reach it, and it had drifted from its siblings:
 *
 *   - The h1 sat at y:120, tight under the fixed header, with no eyebrow.
 *   - Each series row is an Elementor <section> carrying a 1px solid #6633ff
 *     border, which read as stray purple rules across the page. The taxonomy
 *     archives separate rows with a subtle rgba(0,0,0,0.08) hairline.
 *
 * Scoped to .page-id-6687 so nothing here can affect other Elementor pages.
 * The eyebrow is injected with ::before rather than by editing the Elementor
 * document, which keeps this reversible and out of the page content.
 * ========================================================================== */

/* Push the heading clear of the fixed header, matching the archives' rhythm. */
/* fa32e1b is the page-title heading widget; the series rows all share
   widget id ff90cab, so targeting the id keeps this off the 98 row headings. */
.page-id-6687 .elementor-element-fa32e1b .elementor-widget-container {
	padding-top: 90px;
}

/* "CHANNEL" eyebrow — same treatment as .title-topic on the archives
   (26px / 900 / uppercase / brand purple, 30px above the heading). */
.page-id-6687 .elementor-element-fa32e1b h1.elementor-heading-title::before {
	content: "Channel";
	display: block;
	margin-bottom: 30px;
	color: #6633ff;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Row separators: swap the purple Elementor border for the same hairline the
   taxonomy archives use. */
.page-id-6687 .elementor-section.elementor-top-section {
	border-color: rgba(0, 0, 0, 0.08) !important;
}

@media screen and (max-width: 900px) {
	.page-id-6687 .elementor-element-fa32e1b .elementor-widget-container {
		padding-top: 60px;
	}
	.page-id-6687 .elementor-element-fa32e1b h1.elementor-heading-title::before {
		font-size: 20px;
		margin-bottom: 18px;
	}
}

/*
 * Restored after coverage-pruning (Aug 2026): blog post-content list styling.
 * Pruning blind spot #2 — the single blog post in the coverage crawl had no
 * <ul>/<ol>, so these rules registered as "unused" and were dropped. Result:
 * lists in blog content lost their indentation and vertical spacing
 * (margin-left/bottom → 0). Verified via oracle test (same post, pruned vs
 * pre-prune cascade) that these are the exact rules that differ. Lifted
 * verbatim from legacy-style.css.
 */
article ul, article ol {
	margin-left: 30px;
	font-size: 18px;
	margin-bottom: 30px;
}
article ul li, article ol li {
	color: #000;
	padding: 3px 0px;
	list-style-position: outside;
	margin-left: 5px;
}

/* ------------------------------------------------------------------ *
 * Locations page (/locations, page-id 47548) — regional office cards.
 * The ElementsKit image-box widgets requested the old-theme image size
 * "latest_post_boxes", which was removed in the Aug/Sept 2026 image
 * cleanup. Without it the widgets fall back to the full-size original,
 * so each office photo rendered at its own native dimensions (all
 * different sizes). Force a uniform 4:3 frame with object-fit:cover so
 * every office image matches regardless of source dimensions.
 * ------------------------------------------------------------------ */
body.page-id-47548 .ekit-image-box .elementskit-box-header {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
body.page-id-47548 .ekit-image-box .elementskit-box-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}