/*
Theme Name: iStart 2026
Description: Custom theme for the iStart rebuild — clean modern trade publication direction.
Author: iStart
Version: 1.0.0
*/

:root {
	/* Editorial magazine direction (2026 re-skin). Variable NAMES are kept
	   stable even where the concept shifted (e.g. --color-charcoal is now
	   the near-black "ink" tone) because ~15 templates reference these by
	   name inline — recolouring in place avoids a site-wide find/replace. */
	--color-amber: #E8993A;
	/* The real iStart logo orange (sampled directly from assets/logo-full.png:
	   RGB 237,155,24) — was a muted dark brown before, which read as "amber"
	   rather than the brand's own distinct, more saturated orange. Variable
	   name kept as-is (see note above) since every title/badge across the
	   site already references it by name. */
	--color-amber-dark: #ED9B18;
	/* Distinct from the brand amber above — a warning colour reserved for
	   "this exhibitor hasn't paid" status (the Exhibitor Expired badge),
	   never used for a neutral/positive highlight like the amber tones. */
	--color-warning-orange: #C2410C;
	--color-charcoal: #1A1917;
	--color-text-body: #33312D;
	--color-text-muted: #5C594F;
	--color-text-faint: #8C887B;
	--color-border: #DBD5C4;
	--color-border-faint: #E7E1D0;
	--color-bg-page: #FFFFFF;
	--color-bg-card: #FFFFFF;
	--color-bg-offwhite: #F4F0E4;
	--color-bg-accordion: #F4F0E4;
	--color-bg-image-placeholder: #EEE8D9;
	--color-image-placeholder-icon: #B3AC98;
	--color-vendor-contrib-bg: #F6E7C8;
	--color-vendor-contrib-icon: #854F0B;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-serif: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
	/* Was 1440px, briefly 1320px (checked bbc.com's own content column,
	   which holds at a fixed 1248px and lets margin grow with the
	   viewport) — that read as too much margin in practice, so this
	   splits the difference between the original 1440 and that 1320. */
	--content-max: 1380px;
}

* {
	box-sizing: border-box;
}

/* Safety net for migrated content: legacy post bodies occasionally carry
   explicit width="" attributes (WPBakery-era images, video embeds) wider
   than the column they now render in — without this, that one post
   overflows its container instead of scaling down to fit. */
img, iframe, video, table {
	max-width: 100%;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
	background: var(--color-bg-card);
	font-family: var(--font-sans);
	color: var(--color-charcoal);
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.1px;
}

/* Editorial display serif — the headline/section-title/product-name
   baseline for every template. Individual templates override size/weight
   per context (hero vs. card title vs. eyebrow) but never the family. */
h1, h2, h3,
.serif-display {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.3px;
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Full-width site shell — no boxed/bordered "card" wrapper. That treatment
   came from the small preview-panel wireframes and reads wrong at real
   browser width; the site now spans the page like a real publication. */
.site-shell {
	width: 100%;
}

.site-main,
.site-header,
.site-footer,
.site-search-form {
	max-width: var(--content-max);
	margin: 0 auto;
	padding-left: 72px;
	padding-right: 72px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Site header / nav */
.site-header {
	padding-top: 36px;
	padding-bottom: 36px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--color-border);
}

.site-header-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.logo-full {
	display: block;
}

.logo-full img {
	display: block;
	height: 62px;
	width: auto;
}

.primary-nav {
	display: flex;
	gap: 40px;
	font-size: 1.08rem;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--color-text-muted);
	align-items: center;
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center;
	padding-bottom: 18px;
	margin-bottom: -18px;
}

.primary-nav a {
	position: relative;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateY(-6px);
	margin-top: 0;
	width: max-content;
	min-width: 240px;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	box-shadow: 0 16px 34px rgba(20, 18, 15, 0.12);
	padding: 20px 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
	z-index: 50;
}

.nav-dropdown-right {
	left: auto;
	right: 0;
}

.nav-dropdown-grid {
	width: 480px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.nav-dropdown-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin-bottom: 12px;
	white-space: nowrap;
}

.nav-dropdown-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 24px;
}

.nav-dropdown-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nav-dropdown-link {
	display: block;
	padding: 5px 0;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text-muted);
	border-bottom: none;
}

.nav-dropdown-link:hover {
	color: var(--color-amber-dark);
}

.nav-dropdown-viewall {
	display: block;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border-faint);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	border-bottom: none;
}

/* Buyer's guides nav dropdown — each guide's own real cover photo (same
   image the index/hero use) instead of a plain text link, 2-up so it
   stays a normal anchored-under-the-link dropdown rather than needing
   the News menu's fixed/centered treatment. Photo is a fixed 3:2, same
   rule as everywhere else on the site — cropped, never stretched. */
.nav-dropdown-guides {
	width: 380px;
}

.nav-guide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.nav-guide-card {
	display: block;
	border-bottom: none;
}

.nav-guide-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	margin-bottom: 8px;
}

.nav-guide-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nav-guide-title {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.nav-guide-card:hover .nav-guide-title {
	color: var(--color-amber-dark);
}

/* News/Case studies mega menus — shared treatment: real latest stories
   at card size (photo, title, date), plus a "got something for us?" CTA,
   centered on the viewport rather than anchored under the link (News has
   4 cards, Case studies has 3 — flexbox rather than a fixed-column grid
   so .nav-story-card just shares out the row equally either way, with
   .nav-dropdown-cta staying a fixed width on the end). */
.nav-dropdown-stories {
	/* Wide enough to read as a real page-width mega menu (like the legacy
	   site's own News hover) rather than a cramped list squeezed under the
	   link, so this one breaks out of .nav-dropdown's normal
	   anchored-under-the-link positioning: fixed + centered on the
	   viewport instead of absolute + left:0 relative to .nav-item. */
	position: fixed;
	top: 135px;
	left: 50%;
	width: min(1200px, 92vw);
	display: flex;
	gap: 28px;
	padding: 32px;
	transform: translate(-50%, -6px);
}

body.admin-bar .nav-dropdown-stories {
	top: 167px;
}

.nav-item:hover .nav-dropdown-stories,
.nav-item:focus-within .nav-dropdown-stories,
.nav-dropdown-stories:hover {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

/* .nav-dropdown-stories is fixed + centered, so it opens flush under the
   header with real dead space between the nav link and the menu's top
   edge. The old bridge inflated .nav-item-mega's own hover box down 135px
   — a permanent invisible strip under the link that opened the menu on any
   stray pass. This one is a per-link strip that only conducts the pointer
   AFTER the menu is already open: pointer-events is none until
   .nav-item-mega:hover / :focus-within (i.e. until you're actually on the
   link), then auto, so travel link → strip → menu keeps :hover alive the
   whole way, but nothing below the link ever opens it. It's absolute
   inside each .nav-item-mega (at that link's own x, link-width), so the
   News and Case-studies strips never overlap or cross-trigger — unlike the
   two fixed, exactly-stacked dropdowns themselves. 60px spans the gap in
   both the logged-out and admin-bar cases (the link row + its 18px
   padding already reaches ~halfway). */
.nav-item-mega::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 60px;
	pointer-events: none;
}

.nav-item-mega:hover::after,
.nav-item-mega:focus-within::after {
	pointer-events: auto;
}

.nav-story-card {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	border-bottom: none;
}

.nav-story-card-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	margin-bottom: 12px;
}

.nav-story-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nav-story-card-title {
	font-family: var(--font-serif);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--color-charcoal);
	margin-bottom: 6px;
}

.nav-story-card:hover .nav-story-card-title {
	color: var(--color-amber-dark);
}

.nav-story-card-date {
	font-size: 0.78rem;
	color: var(--color-text-faint);
}

.nav-dropdown-cta {
	flex: 0 0 240px;
	border-left: 1px solid var(--color-border-faint);
	padding-left: 24px;
}

.nav-dropdown-cta-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin-bottom: 10px;
}

.nav-dropdown-cta-text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.45;
	margin-bottom: 10px;
}

.nav-dropdown-cta-link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	border-bottom: none;
}

.primary-nav .current {
	color: var(--color-charcoal);
	font-weight: 600;
	border-bottom-color: var(--color-amber);
}

.primary-nav a:hover {
	color: var(--color-amber-dark);
	border-bottom-color: var(--color-amber);
}

.nav-icon {
	font-size: 1.3rem;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	color: inherit;
	padding: 0;
	transition: color 0.2s ease, transform 0.2s ease;
}

.nav-icon:hover {
	color: var(--color-amber-dark);
	transform: scale(1.1);
}

/* Mobile hamburger toggle — display:none here (not just visually tucked
   away) means it never becomes a third flex child in .site-header's
   desktop justify-content:space-between row; only the mobile media query
   below turns it on, so desktop's exact current two-item header layout
   (brand, primary-nav) is untouched. */
.mobile-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	background: none;
	color: var(--color-charcoal);
	cursor: pointer;
}

.mobile-nav-toggle .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

/* Accordion chevron the mobile-nav script injects next to any nav item
   that has dropdown content — hidden by default for the same reason as
   .mobile-nav-toggle above (it's injected via JS on every page load
   regardless of viewport, so the CSS is what actually keeps it off
   desktop; only the 800px query below turns it on). */
.nav-item-expand {
	display: none;
}

/* Site-wide search — a full-width bar that drops down from the header when
   the nav's search icon is toggled (see the JS in footer.php), instead of
   the icon being a dead link to an empty ?s= (it linked straight to a blank
   search with no way to actually type a query — nothing was ever wired up
   to accept input). */
.site-search-form {
	display: none;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border-faint);
}

.site-search-form.is-open {
	display: flex;
}

.site-search-input-wrap {
	position: relative;
	flex: 1;
	max-width: 480px;
}

.site-search-input {
	width: 100%;
	font-size: 16px;
	font-family: inherit;
	padding: 10px 18px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-charcoal);
}

.site-search-input:focus {
	outline: none;
	border-color: var(--color-amber);
}

/* Generic form field — plain text/email/select inputs outside the header
   search (Subscribe page and any future form), same visual language as
   .site-search-input but its own class since the name shouldn't imply
   "search". */
.form-input {
	width: 100%;
	font-size: 16px;
	font-family: inherit;
	padding: 10px 16px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-charcoal);
	background: var(--color-bg-card);
}

.form-input:focus {
	outline: none;
	border-color: var(--color-amber);
}

/* Search-as-you-type dropdown (istart_live_search_callback() in
   functions.php) — anchored to the input's own wrapper, not the whole
   form, so it doesn't stretch under the submit button too. */
.site-search-live {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	z-index: 50;
	max-height: 420px;
	overflow-y: auto;
}

.site-search-live.is-open {
	display: block;
}

.site-search-live-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--color-border-faint);
}

.site-search-live-item:hover {
	background: var(--color-bg-offwhite);
}

.site-search-live-icon {
	width: 28px;
	height: 28px;
	border-radius: 0;
	background: var(--color-bg-offwhite);
	color: var(--color-amber-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.site-search-live-icon .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.site-search-live-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1.3;
}

.site-search-live-type {
	display: block;
	font-size: 11.5px;
	color: var(--color-text-faint);
	margin-top: 1px;
}

.site-search-live-all {
	display: block;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-amber-dark);
	text-align: center;
}

.site-search-live-all:hover {
	background: var(--color-bg-offwhite);
}

.site-search-live-empty {
	padding: 14px;
	font-size: 13px;
	color: var(--color-text-faint);
	text-align: center;
}

.site-search-submit {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 0;
	border: none;
	background: var(--color-charcoal);
	color: var(--color-bg-page);
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
	padding: 20px 0 0;
	font-size: 0.9rem;
	color: var(--color-text-faint);
}

.breadcrumb .current {
	color: var(--color-charcoal);
}

/* Image placeholder (used until real images render) */
.img-placeholder {
	background: var(--color-bg-image-placeholder);
	color: var(--color-image-placeholder-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}

/* Once a real photo is present, it must fill and crop to the box the
   template gave it — used for small avatars/thumbnails ONLY (e.g. the
   circular case-study avatars on the homepage). */
.img-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Single vendor page's header logo box — a real company logo is almost
   always wider than tall, so the shared .img-placeholder's object-fit:
   cover (built for cropping photos to fill a box) was cutting off both
   edges. Same "show the whole logo, never crop it" treatment the
   Directory grid tiles already use (.gd-logo-tile-img img). */
.vendor-logo-box img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Hero/story photos (news, case study, in-depth, featured cards): shown at
   a fixed 3:2 ratio, FULL image visible, never cropped — letterboxed on
   the placeholder background if the source aspect doesn't match exactly. */
.photo-3-2 {
	aspect-ratio: 3 / 2;
	width: 100%;
	max-width: 600px;
}

.photo-3-2 img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Square variant — team/person photos (About page). Cropped, not
   letterboxed: a face fills the frame better than the contain-and-pad
   treatment .photo-3-2 uses for story photography. */
/* Any case study card/photo slot with no real photography of its own
   (unverified ones by design, or a verified one that just never got a
   photo) shows the linked vendor's own logo instead — greyscaled and
   padded down so it reads as a placeholder-ish stand-in, not a real hero
   photo. Used wherever a case study's image renders: the archive grid,
   the single post page, vendor-page scroll rows, homepage teasers. */
.cs-card-photo-unverified {
	padding: 32px;
}

.cs-card-photo-unverified .cs-card-vendor-logo-greyed {
	max-width: 65%;
	max-height: 65%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.55;
}

.photo-1-1 {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.photo-1-1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lead-story hero photo variant: no 600px cap (fills the column, so it
   reads noticeably larger), and one corner clipped at an angle instead
   of the uniform rounded rectangle used everywhere else — a small
   deliberate break from the standard photo treatment for the single
   most prominent image on a page. */
.photo-hero {
	max-width: none;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px));
}

/* Pull quote */
.pull-quote {
	border-left: 3px solid var(--color-amber);
	padding: 6px 0 6px 20px;
	margin-bottom: 20px;
}

.pull-quote .quote-text {
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1.5;
}

.pull-quote .quote-attribution {
	font-size: 0.9rem;
	color: var(--color-text-faint);
	margin-top: 8px;
}

/* Native <blockquote> tags already present in migrated body content (many
   legacy articles have a real blockquote wrapping the pull quote) get the
   same bold-italic pull-quote treatment automatically. */
.story-body {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--color-text-body);
}

/* In-body section breaks ("Solution", "Results"...) — see
   istart_mark_story_section_headings() in inc/helpers.php, which tags
   these and guarantees they're isolated in their own paragraph before
   this ever runs, so no structural selector games needed here. */
.story-section-heading {
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-charcoal);
	margin: 6px 0 2px;
}

.story-body a {
	color: var(--color-amber);
	text-decoration: underline;
}

.story-body a:hover {
	color: var(--color-amber-dark);
}

.story-body blockquote {
	border-left: 3px solid var(--color-amber);
	padding: 6px 0 6px 20px;
	margin: 24px 0;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 600;
	color: var(--color-charcoal);
}

.story-body blockquote p {
	margin: 0;
}

.story-lede {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: 20px;
}

/* At-a-glance card */
.at-a-glance {
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 24px 26px;
}

.at-a-glance .label {
	font-size: 0.8rem;
	color: var(--color-amber-dark);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

/* Simple horizontal bar — a plain, non-interactive percentage readout
   (Media Kit's readership breakdowns) rather than a full charting library,
   in keeping with "visually simple and easy to follow" over a real chart's
   axes/legends/tooltips this data doesn't need. */
.mk-bar-row {
	display: grid;
	grid-template-columns: 132px 1fr 44px;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.mk-bar-row:last-child {
	margin-bottom: 0;
}

.mk-bar-label {
	font-size: 14px;
	color: var(--color-text-muted);
}

.mk-bar-track {
	height: 10px;
	background: var(--color-bg-offwhite);
	border: 0.5px solid var(--color-border);
	overflow: hidden;
}

.mk-bar-fill {
	height: 100%;
	background: var(--color-amber-dark);
}

.mk-bar-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-charcoal);
	text-align: right;
}

/* Vendor Contribution distinct tint (In Depth hub) */
.vendor-contribution-card .img-placeholder {
	background: var(--color-vendor-contrib-bg);
	color: var(--color-vendor-contrib-icon);
}

.vendor-contribution-card .label {
	color: var(--color-text-faint);
}

/* Accordion (Buyer's Guide vendor fact sheets) */
.accordion-row summary {
	position: relative;
}

.accordion-row summary::-webkit-details-marker {
	display: none;
}

.accordion-row summary::after {
	content: '\203A';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	color: var(--color-text-faint);
	font-size: 20px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-row[open] summary::after {
	transform: translateY(-50%) rotate(-90deg);
}
/* While a row is animating shut it is still [open]; its arrow turns back at once. */
.accordion-row.is-collapsing summary::after {
	transform: translateY(-50%) rotate(90deg);
}

/* Pills / tags — flat rectangular labels, not pill-shaped, per the 2026
   editorial re-skin (no rounded chips anywhere on the site). */
.pill {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 14px 20px;
	border-radius: 0;
	background: #F1EFE8;
	color: var(--color-charcoal);
	display: inline-block;
	/* Harmless on the <a class="pill"> usages elsewhere; needed so a
	   <button class="pill"> (industry filter pills below) doesn't pick up
	   default button chrome. */
	font-family: var(--font-sans);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pill:hover {
	background: var(--color-amber);
}

.pill.active {
	background: var(--color-charcoal);
	color: var(--color-bg-page);
}

.pill .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	margin-right: 2px;
	color: var(--color-amber-dark);
}

/* Buttons — flat rectangular blocks, ink/paper contrast, uppercase
   letter-spaced labels (no rounded corners, no shadow, no gradient). */
.btn-solid {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--color-bg-page);
	background: var(--color-charcoal);
	padding: 14px 26px;
	border: 1px solid var(--color-charcoal);
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn-solid:hover {
	background: var(--color-amber-dark);
	border-color: var(--color-amber-dark);
}

.btn-outline {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--color-charcoal);
	border: 1px solid var(--color-charcoal);
	padding: 14px 26px;
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
	background: var(--color-charcoal);
	color: var(--color-bg-page);
}

.link-amber {
	color: var(--color-amber-dark);
}

/* About header flourish — a small heritage badge, since this page's job is
   warmth/credibility ("we've been doing this a long time") rather than
   urgency or comparison. */
.about-kicker {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	border: 1px solid var(--color-amber);
	border-radius: 0;
	padding: 5px 14px;
}

/* About page — "Inform / Educate / Motivate" — the site's own tagline,
   pulled out of the intro sentence and made the actual structure of the
   section, as three columns running across the page (same shape as a
   plain 3-up values row) rather than three stacked alternating
   image/text banners — each column keeps its own real legacy photo
   (istart.com.au/about-istart/), just smaller, sitting above the word. */
.about-3col-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.about-3col-item {
	display: flex;
	flex-direction: column;
}

.about-3col-photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 20px;
}

.about-3col-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-word {
	display: inline-block;
	font-family: var(--font-serif);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--color-amber-dark);
	margin-bottom: 14px;
}

.about-row-text {
	font-size: 17px;
	color: var(--color-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* Meet the team (About page) — same flat bordered-card language as
   .at-a-glance elsewhere on this page, just in a repeating grid. */
.about-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.about-team-card {
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.about-team-body {
	padding: 16px 18px 20px;
}

.about-team-name {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-charcoal);
}

.about-team-role {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--color-amber-dark);
	margin-top: 2px;
}

.about-team-bio {
	font-size: 14.5px;
	color: var(--color-text-muted);
	line-height: 1.55;
	margin: 10px 0 0;
}

.about-audience-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Shared "pop" hover for story/vendor cards — same lift+shadow .gd-card
   already uses on Buyer's Guides, reused here so News, the homepage and
   Directory feel consistent with it rather than static by comparison. */
.pop-card {
	display: block;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pop-card:hover {
	transform: translateY(-3px);
	box-shadow: none;
}

/* Homepage "Buyer's guides" tile — the lead guide's own real cover photo
   full-bleed behind a scrim (falls back to plain charcoal if a guide
   somehow has no thumbnail, so text stays legible either way), the three
   smaller rows get a small photo instead of a bare category icon. */
.gd-home-feature {
	position: relative;
	overflow: hidden;
	background: var(--color-charcoal);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 24px;
}

.gd-home-feature-photo {
	position: absolute;
	inset: 0;
}

.gd-home-feature-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gd-home-feature-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 12, 8, 0.85) 0%, rgba(15, 12, 8, 0.3) 55%, rgba(15, 12, 8, 0.05) 85%);
}

.gd-home-feature-body {
	position: relative;
	z-index: 1;
	color: #fff;
}

.gd-home-feature-body .dashicons {
	display: block;
	color: var(--color-amber);
	font-size: 30px;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
}

.gd-home-thumb {
	flex: 0 0 104px;
	width: 104px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-offwhite);
}

.gd-home-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Newsletter subscribe strip — small/compact by design (a slim icon +
   line + pill button, not a full stat-strip banner), dropped at the
   bottom of News stories and the homepage. */
.newsletter-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 28px 0;
	padding: 16px 22px;
	border-radius: 0;
	background: var(--color-bg-offwhite);
	border: 1px solid var(--color-border-faint);
	flex-wrap: wrap;
}

.newsletter-cta-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-amber);
	color: var(--color-bg-page);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
}

.newsletter-cta-icon .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.newsletter-cta-text {
	flex: 1;
	min-width: 200px;
}

.newsletter-cta-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-charcoal);
}

.newsletter-cta-desc {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 1px;
}

.newsletter-cta-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-charcoal);
	background: var(--color-amber);
	padding: 9px 18px;
	border-radius: 0;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

/* FROM ISTART strip */
.from-istart-strip {
	margin-bottom: 28px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 18px 22px;
	display: flex;
	gap: 32px;
	align-items: center;
	flex-wrap: wrap;
}

.from-istart-strip .kicker {
	font-size: 0.85rem;
	color: var(--color-text-faint);
	white-space: nowrap;
}

/* Footer */
.site-footer {
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid var(--color-border);
	font-size: 0.85rem;
	color: var(--color-text-faint);
	display: flex;
	justify-content: space-between;
}

.region-toggle-active {
	color: var(--color-amber-dark);
	font-weight: 600;
}

/* Sitewide footer strip, every page, directly above the copyright bar —
   two things that used to be separate legacy widgets ("About iStart"
   quick links + "Proudly supported by" exhibitor list) combined into one
   compact band. Deliberately low-key (small type, muted colour, no CTA)
   so it reads as footer plumbing, not another promo strip. Pavilions are
   ONE WRAPPED LINE each ("Category: Vendor, Vendor, Vendor…") rather than
   a vertical list per vendor — the vertical-list version made the ERP
   pavilion's 15 exhibitors into 15 separate stacked rows and the whole
   footer felt twice as deep as the rest of the page combined. */
.supporters-strip {
	/* A flatter, quieter ink tone than --color-charcoal on purpose — the
	   near-black ink used for the site's other dark strips (e.g.
	   .stat-strip-dark) reads as a deliberate promo block; this one is
	   meant to sit back the way the legacy site's did. */
	background: var(--color-text-muted);
	color: rgba(250, 248, 243, 0.55);
	margin-top: 24px;
	margin-bottom: 24px;
	padding: 22px 28px;
}

.supporters-kicker {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(250, 248, 243, 0.55);
	text-decoration: none;
	margin-bottom: 10px;
}

a.supporters-kicker:hover {
	color: rgba(250, 248, 243, 0.85);
}

.supporters-cols {
	display: grid;
	grid-template-columns: 1fr minmax(160px, 200px);
	gap: 32px;
}

.supporters-about {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.82rem;
	border-left: 1px solid rgba(250, 248, 243, 0.12);
	padding-left: 32px;
}

.supporters-about a {
	color: rgba(250, 248, 243, 0.55);
}

.supporters-about a:hover {
	color: rgba(250, 248, 243, 0.85);
}

/* Copyright / Legal / AU-NZ switch: the row that used to sit in its own bar
   below the dark box, now the last line inside it. */
.supporters-base {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(250, 248, 243, 0.12);
	font-size: 0.8rem;
	color: rgba(250, 248, 243, 0.45);
}

.supporters-base a {
	color: rgba(250, 248, 243, 0.55);
}

.supporters-base a:hover {
	color: rgba(250, 248, 243, 0.85);
}

.supporters-base .region-toggle-active {
	color: var(--color-amber);
	font-weight: 600;
}

.supporters-phones {
	margin-top: 4px;
	font-size: 0.78rem;
	color: rgba(250, 248, 243, 0.35);
}

/* each number stays in one piece when the narrow column has to wrap */
.supporters-phones span {
	white-space: nowrap;
}

.supporters-row {
	font-size: 0.78rem;
	line-height: 1.6;
	margin-bottom: 4px;
}

.supporters-row-label {
	color: rgba(250, 248, 243, 0.65);
	font-weight: 600;
}

.supporters-row a {
	color: rgba(250, 248, 243, 0.6);
}

.supporters-row a:hover {
	color: rgba(250, 248, 243, 0.95);
}

/* Single news article: two-column layout (main + sticky sidebar), plus a
   full-width "More news in X" row that breaks out of the two columns.
   No align-items: start here deliberately — a sticky child needs its
   containing block (.news-sidebar) to be as TALL as the main column so
   it has room to stay pinned while the (much longer) article scrolls
   past; with align-items: start the sidebar shrinks to its own short
   content height and the sticky strip runs out of room almost
   immediately, scrolling away with everything else. Default `stretch`
   makes both columns match the tallest one instead. */
.news-layout {
	display: grid;
	/* Fixed 320px, not a fraction — matches .pub-layout exactly so the
	   sidebar is the same physical width on every page that has one,
	   News/AppWrap included, rather than each page's sidebar floating to
	   whatever share of the page its own main-column ratio leaves it. */
	grid-template-columns: 1fr 320px;
	gap: 56px;
}

/* Without this, a grid item's automatic minimum width defaults to its
   content's intrinsic size — normally harmless, but a long unwrapped run
   inside a nested flex row (e.g. the At a Glance bullet rows on
   single-case_study.php) can drag that intrinsic size up, forcing this
   whole column wider than its 1.3fr/1.7fr share and pushing the sidebar
   column into overflow. min-width: 0 lets the column shrink to its
   grid-track share and wrap normally instead. */
.news-main {
	min-width: 0;
}

/* Cap the reading measure on single news / in-depth / AppWrap articles.
   .news-main is a 1fr grid track, so on a wide screen the body text would
   run 130+ characters a line. This narrows only the content inside the
   column — the grid tracks and the 320px sidebar are untouched, so the
   text simply stops short of the gap instead of the whole layout
   rebalancing. 800px sits about halfway between the old unbounded column
   (~930-1000px on a real desktop viewport) and an initial too-tight 680px
   pass. single-case_study keeps its own wider measure (its grid override
   + bespoke sidebar), so it's left out here deliberately. */
.single-news .news-main > *,
.single-in_depth .news-main > *,
.single-appwrap .news-main > * {
	max-width: 800px;
}

/* The hero photo doesn't share the text's measure: our source images are
   published at 600x400, so stretching that up to fill an 800px-wide
   column (or the old, wider one) upscales and softens it. Cap it at its
   native width instead — same 3:2 crop, just not blown up. */
.single-news .news-main .img-placeholder.photo-3-2,
.single-in_depth .news-main .img-placeholder.photo-3-2,
.single-appwrap .news-main .img-placeholder.photo-3-2 {
	max-width: 600px;
}

.news-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.news-share-strip {
	position: sticky;
	top: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border-faint);
	z-index: 2;
	background: var(--color-bg-card);
}

.news-progress-track {
	width: 100%;
	height: 3px;
	background: var(--color-border);
	border-radius: 0;
	margin-bottom: 16px;
	overflow: hidden;
}

/* Full-width box that's visually scaled via transform rather than an
   animated `width` percentage — confirmed the percentage-width approach
   was rendering at 0px despite the correct inline style being set
   (offsetWidth/getBoundingClientRect both measured 0 even after a full
   paint cycle), so this sidesteps whatever containing-block quirk
   caused that and is the standard technique for this exact UI pattern
   regardless. No `transition` on transform here deliberately — combined
   with the `position: sticky` ancestor (.news-share-strip) it made the
   computed transform get stuck at its starting value permanently
   (confirmed: identical setup with transition: none renders correctly,
   scroll events fire often enough that the bar still reads as smooth
   without it). */
.news-progress-fill {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--color-amber);
}

.news-share-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.news-read-time {
	font-size: 0.9rem;
	color: var(--color-text-faint);
}

.news-share-icons {
	display: flex;
	gap: 8px;
}

.news-share-icons a,
.news-share-icons button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-text-muted);
	background: none;
	cursor: pointer;
	padding: 0;
}

.news-share-icons a:hover,
.news-share-icons button:hover {
	border-color: var(--color-amber);
	color: var(--color-amber-dark);
}

.news-copy-link-copied {
	border-color: var(--color-amber) !important;
	color: var(--color-amber-dark) !important;
}

.news-sidebar-box-title {
	font-size: 0.8rem;
	color: var(--color-amber-dark);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
	text-transform: uppercase;
}

/* News sidebar "Proudly supported by" — a single-logo-at-a-time rotator
   (the legacy site's version of this was a banner with "<< Previous |
   Next >>" text links; this is the same idea — cycle through sponsor
   logos in a small fixed footprint — done as a plain auto-advancing
   crossfade instead). JS (single-news.php) just toggles .is-active; the
   fade itself is CSS so there's no layout jump between logos of
   different aspect ratios. */
/* Real exhibitor logo files vary wildly in native size (uploaded over
   years by different people) — the real site's own version doesn't cap
   height at all, just width, so a small logo (Microsoft's own file is
   only 200x42) stays small and a big one (SAP's) shows properly large,
   neither one stretched to fill a fixed box. 150px is a generous
   ceiling, not a target every logo gets forced up or down to. */
.supporter-logo-rotator {
	position: relative;
	height: 150px;
}

.supporter-logo-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.supporter-logo-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.supporter-logo-slide img {
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.supporter-logo-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}

.supporter-logo-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-border);
	padding: 0;
	border: 0;
	cursor: pointer;
}

.supporter-logo-dot.is-active {
	background: var(--color-amber);
}

.news-sidebar-box-placeholder {
	border: 1px dashed var(--color-border);
	border-radius: 0;
	padding: 24px 26px;
}

.news-sidebar-box-placeholder-text {
	font-size: 0.9rem;
	font-style: italic;
	color: var(--color-text-faint);
	line-height: 1.5;
}

/* AppWrap box: one real rolling news story per region, so the sidebar
   just teases that single post (photo + title + CTA) and links straight
   to it, rather than listing several separate items. */
.appwrap-teaser {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

.appwrap-teaser:hover {
	opacity: 0.8;
}

.appwrap-teaser-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin: 4px 0 12px;
}

.appwrap-teaser-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.appwrap-teaser-title {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-charcoal);
	margin-bottom: 10px;
}

.appwrap-teaser-cta {
	font-size: 0.88rem;
	font-weight: 600;
}

/* Case study sidebar: the WHOLE box stack pins (unlike single-news.php,
   where only the top share strip is sticky — that sidebar holds a long
   stack of boxes that shouldn't all stay glued to the viewport). This is
   a child of .news-sidebar (which stays a plain flex column, stretched
   tall by .news-layout's default align-items: stretch) rather than being
   the stretched grid item itself — a sticky element needs a container
   TALLER than itself to have room to travel and stay pinned; marking the
   already-stretched grid item sticky would give it no such room (this
   exact nesting mirrors .news-share-strip inside .news-sidebar, the
   already-verified-working pattern on single-news.php). */
.cs-sidebar-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Case Study Highlights: label/value rows (Product, Partner, Industry,
   Scope) — same amber tint already used for Vendor Contribution cards
   (--color-vendor-contrib-bg). .stat-callout-icon is unused here (no icon
   in the label/value row) but left in place since single-news.php's "In
   This Story" placeholder still uses the icon+number+label shape. */
.stat-callout-box {
	background: var(--color-vendor-contrib-bg);
	border-radius: 0;
	padding: 20px 22px;
}

.stat-callout {
	display: flex;
	align-items: center;
	gap: 12px;
}

.stat-callout + .stat-callout {
	margin-top: 14px;
}

.stat-callout-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1.5px solid var(--color-amber-dark);
	border-radius: 0;
}

.stat-callout-number {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-charcoal);
}

.stat-callout-label {
	font-size: 13px;
	font-style: italic;
	color: var(--color-text-faint);
}

.shortlist-prompt-box {
	border: 1px solid var(--color-amber);
	border-radius: 0;
	padding: 20px 22px;
}

.news-more-list-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border-faint);
	font-size: 0.95rem;
}

.news-more-list-item:last-child {
	border-bottom: none;
}

.news-more-list-date {
	color: var(--color-text-faint);
	white-space: nowrap;
	font-size: 0.85rem;
}

.news-scroll-row-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.news-scroll-row {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 12px;
	scroll-behavior: smooth;
}

.news-scroll-card {
	flex: 0 0 230px;
	text-align: left;
	display: block;
}

.news-scroll-card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 0;
}

.news-scroll-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.news-scroll-card:hover .news-scroll-card-photo img {
	transform: scale(1.06);
}

.news-scroll-card-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 18, 15, 0.88) 0%, rgba(20, 18, 15, 0.35) 45%, transparent 72%);
	z-index: 1;
}

.news-scroll-card-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 14px 12px;
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.32;
	opacity: 0.8;
	transition: opacity 0.25s ease;
}

.news-scroll-card:hover .news-scroll-card-title,
.news-scroll-card:focus-visible .news-scroll-card-title {
	opacity: 1;
}

.news-scroll-card-vendor {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.news-scroll-card-more {
	width: 100%;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--color-amber-dark);
	font-size: 22px;
}

.news-scroll-card-more span {
	font-size: 15.5px;
	font-weight: 600;
}

.news-scroll-arrow {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	color: var(--color-amber-dark);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-scroll-arrow:hover {
	border-color: var(--color-amber);
}

/* Homepage In Depth rows (Features/Research/Opinion) — same
   .news-scroll-row-wrap scroll mechanism as Case studies, but a
   rectangular-photo card instead of the circular avatar-style
   .news-scroll-card. Sized so exactly 3 cards sit in view at once (this
   is a 3-card-per-row browsing strip, not a dense thumbnail list) —
   roughly a third of .site-main's content width, minus the row's gap and
   arrow buttons. */
.id-scroll-card {
	flex: 0 0 380px;
	display: block;
}

.id-scroll-card-title {
	font-size: 1.05rem;
}

/* News header flourish — a small pulsing "live" indicator, since this is
   the one section of the site that's genuinely time-sensitive (everywhere
   else is reference material or evergreen stories). */
.news-live-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
}

.news-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-amber);
	flex-shrink: 0;
	animation: news-live-pulse 1.8s ease-out infinite;
}

@keyframes news-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(232, 153, 58, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(232, 153, 58, 0); }
	100% { box-shadow: 0 0 0 0 rgba(232, 153, 58, 0); }
}

/* News archive "More news" card grid. */
.news-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px 24px;
}

/* First two cards break the uniform 3-across rhythm: one large lead (half
   the row, full height) beside two stacked half-width cards — a masonry
   moment rather than a third identical tile. Cards 3+ fall back to the
   plain 1-col-per-2-tracks (i.e. 3-across) rhythm below. */
.news-grid > a:first-child {
	grid-column: span 3;
	grid-row: span 2;
}

.news-grid > a:first-child .img-placeholder {
	aspect-ratio: 4 / 3;
}

.news-grid > a:nth-child(2),
.news-grid > a:nth-child(3) {
	grid-column: span 3;
}

.news-grid > a:nth-child(n+4) {
	grid-column: span 2;
}

/* Publication layout: dense content column + a persistent, sticky
   utility sidebar (search / follow / subscribe / talk-to-us) that stays
   in view while a long, compact story list scrolls past it — the
   Economist-Pro-style density device replacing "one big photo card per
   story" so far more stories fit per screen, with room to scroll a lot
   further before hitting pagination. Reused (with a narrower sidebar
   column and different box mix) wherever a content feed wants this
   companion-rail treatment rather than the full-width single-column
   pattern used elsewhere on the site — see archive-news.php. */
.pub-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	align-items: start;
}

.pub-main {
	min-width: 0;
}

.pub-sidebar {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.pub-sidebar-box {
	border: 1px solid var(--color-border);
	padding: 20px 22px;
}

/* Ad creative is real 300x250 MREC artwork — shown at that native size,
   not scaled to match the box's usual padding (a stretched/squeezed ad
   looks broken, not "on brand"). Tighter horizontal padding just gives
   the image the ~300px of room it needs; .pub-sidebar-title keeps its
   usual look since it's a block-level sibling, unaffected by the image's
   own width. */
.pub-ad-box {
	padding: 20px 8px;
	text-align: center;
}

.pub-ad-box .pub-sidebar-title {
	padding: 0 12px;
}

.pub-ad-box img {
	width: 300px;
	max-width: 100%;
	height: auto;
}

/* Any number of ads can run at once now (pub_ad post type) — just spacing
   between them when there's more than one. */
.pub-ad-item + .pub-ad-item {
	margin-top: 14px;
}

.pub-sidebar-title {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 14px;
}

.pub-search-box input {
	width: 100%;
	font-size: 15px;
	font-family: inherit;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-charcoal);
	background: var(--color-bg-page);
}

.pub-search-box input:focus {
	outline: none;
	border-color: var(--color-amber);
}

/* Small square outline icons — deliberately not circular avatars, the
   same graphic language as the mockup's little dark AppWrap/Follow
   squares. Reuses the exact icon-button treatment already proven on
   single-news.php's share-icon row (.news-share-icons) rather than
   inventing a second one. */
.pub-follow-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pub-follow-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
}

.pub-follow-icon:hover {
	border-color: var(--color-amber);
	color: var(--color-amber-dark);
}

.pub-subscribe-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--color-amber);
	color: var(--color-charcoal);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 15px;
	border: 1px solid var(--color-amber);
}

.pub-subscribe-btn:hover {
	background: var(--color-amber-dark);
	border-color: var(--color-amber-dark);
	color: var(--color-bg-page);
}

.pub-sidebar-link {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--color-text-faint);
	text-align: center;
}

.pub-sidebar-link:hover {
	color: var(--color-amber-dark);
}

/* The "we're not just a newsfeed" reminder — dark, distinct from every
   other box in the rail on purpose, since it's selling advisory help
   rather than presenting content like its neighbours. */
.pub-consult-box {
	border: 1px solid var(--color-charcoal);
	background: var(--color-charcoal);
	padding: 22px;
}

.pub-consult-box .pub-sidebar-title {
	color: var(--color-amber);
}

.pub-consult-box p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(250, 248, 243, 0.75);
	margin: 0 0 14px;
}

.pub-consult-box .btn-outline {
	width: 100%;
	text-align: center;
	color: var(--color-bg-page);
	border-color: rgba(250, 248, 243, 0.4);
}

.pub-consult-box .btn-outline:hover {
	background: var(--color-bg-page);
	color: var(--color-charcoal);
}

/* News archive — photo-led. Top featured block: ONE main story, given
   real emphasis (full-width, side-by-side photo+text layout, its own
   bigger type scale) rather than just a wider column next to the other
   two — those two sit in their own row below it, clearly secondary, in
   the same stacked photo-then-text shape the "More news" grid below
   uses. Every photo box on this page is a fixed 3:2 — cropped
   (object-fit: cover), never stretched — regardless of how large or
   small the card around it is; only the box's overall SIZE changes, not
   its proportions. The category tag lives as plain text next to the
   title, not as a badge overlaid on the image, so nothing ever competes
   with the photo itself. */
.news-feature-grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-bottom: 40px;
}

.news-feature-card {
	display: block;
}

.news-feature-lead {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 36px;
	align-items: center;
}

.news-feature-sub-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.news-feature-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	margin-bottom: 16px;
}

.news-feature-lead .news-feature-photo {
	margin-bottom: 0;
}

.news-feature-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.news-feature-card:hover .news-feature-photo img {
	transform: scale(1.04);
}

.news-feature-title {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-charcoal);
	font-size: 19px;
	margin-bottom: 8px;
}

.news-feature-lead .news-feature-title {
	font-size: 36px;
	margin-bottom: 14px;
}

.news-feature-card:hover .news-feature-title {
	color: var(--color-amber-dark);
}

.news-feature-excerpt {
	font-size: 15px;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-bottom: 10px;
}

.news-feature-lead .news-feature-excerpt {
	font-size: 18px;
	line-height: 1.55;
}

.news-feature-date {
	font-size: 13px;
	color: var(--color-text-faint);
}

.news-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}

.news-card {
	display: block;
}

.news-card-photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	margin-bottom: 12px;
}

.news-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.news-card:hover .news-card-photo img {
	transform: scale(1.05);
}

/* Plain text label, not a badge overlaid on the photo — sits with the
   rest of the card's text so the photo stays uncluttered. Shared between
   the featured cards above and this grid. */
.news-card-tag {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 6px;
}

.news-card-title {
	font-family: var(--font-serif);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--color-charcoal);
	margin-bottom: 8px;
}

.news-card:hover .news-card-title {
	color: var(--color-amber-dark);
}

.news-card-date {
	font-size: 12.5px;
	color: var(--color-text-faint);
}

/* Cross-promo band — breaks the list's own rhythm partway down (real
   Buyer's Guides data, not decorative) and is the one place on the News
   feed that makes the "also does consulting" side of the business
   visible without a full-width banner interrupting the read twice. */
.pub-cross-promo {
	grid-column: 1 / -1;
	margin: 6px 0 8px;
	padding: 20px 24px;
	border: 1px solid var(--color-amber);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pub-cross-promo-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 5px;
}

.pub-cross-promo-title {
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--color-charcoal);
}

.pub-cross-promo-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* Browse by Solution/Industry: compact <select> filters — a closed
   dropdown takes one line regardless of how many terms it holds. */
.news-filter-select {
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--color-charcoal);
	background: var(--color-bg-card);
	border: 0.5px solid var(--color-amber);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.news-filter-select:hover {
	border-color: var(--color-amber-dark);
}

/* Case studies archive — draws the eye to the industry filter for anyone
   arriving via a Buyer's Guide's "search case studies by industry" link
   (archive-case_study.php adds this class + scrolls/focuses on ?focus=
   industry). Pulses twice then stops so it doesn't linger and nag. */
.cs-filter-pop {
	border-color: var(--color-amber) !important;
	animation: cs-filter-pop-pulse 1.3s ease-out 2;
}

@keyframes cs-filter-pop-pulse {
	0% { box-shadow: 0 0 0 0 rgba(232, 153, 58, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(232, 153, 58, 0); }
	100% { box-shadow: 0 0 0 0 rgba(232, 153, 58, 0); }
}

/* Site-wide pagination (News/Case studies/In Depth archives) — WordPress's
   paginate_links() always puts a `page-numbers` class on every link/current
   span/dots span regardless of the 'type' arg, so styling that class inside
   this wrapper covers all three usages without touching the PHP call. */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.pagination a.page-numbers:hover {
	border-color: var(--color-amber);
	color: var(--color-amber-dark);
}

.pagination .page-numbers.current {
	background: var(--color-charcoal);
	border-color: var(--color-charcoal);
	color: var(--color-bg-page);
	font-weight: 600;
}

.pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--color-text-faint);
	min-width: auto;
	padding: 0 4px;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	font-weight: 600;
	color: var(--color-text-muted);
}

/* In Depth hub — editorial "journal" identity. Centered masthead + serif
   headlines (the one new type role here, applied to headlines rather than
   quotes like Case studies) + underline section tabs instead of the pill
   filter used on every other archive page — deliberately its own thing,
   not a reskin of an existing pattern. No stat strip. */
.id-masthead {
	padding: 28px 0 8px;
	text-align: center;
}

.id-masthead-rule {
	height: 1px;
	background: var(--color-charcoal);
	margin: 0 0 22px;
}

.id-masthead-title {
	font-family: var(--font-serif);
	font-size: 2.6rem;
	font-weight: 600;
	color: var(--color-charcoal);
	margin-bottom: 10px;
}

.id-masthead-tagline {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--color-text-muted);
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.5;
}

.id-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
	padding: 26px 0 22px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
}

.id-tab {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	padding-bottom: 12px;
	border-bottom: 2px solid transparent;
	margin-bottom: -23px;
}

.id-tab:hover {
	color: var(--color-amber-dark);
}

.id-tab.active {
	color: var(--color-charcoal);
	font-weight: 600;
	border-bottom-color: var(--color-amber);
}

.id-featured {
	margin: 0 0 32px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	overflow: hidden;
}

.id-featured-link {
	display: grid;
	grid-template-columns: 420px 1fr;
}

.id-featured-body {
	padding: 26px 30px;
}

.id-kicker {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 10px;
}

.id-featured-title {
	font-family: var(--font-serif);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-charcoal);
	margin-bottom: 10px;
}

.id-article-title {
	font-family: var(--font-serif);
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-charcoal);
	margin: 0 0 10px;
}

.id-featured-excerpt {
	font-size: 1.05rem;
	color: var(--color-text-muted);
	line-height: 1.55;
	margin-bottom: 14px;
}

.id-byline-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 0.85rem;
	color: var(--color-text-faint);
}

.id-byline-row > span {
	white-space: nowrap;
}

.id-byline {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-text-muted);
}

.id-byline-dot {
	color: var(--color-border);
}

.id-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 32px;
	padding: 0 0 20px;
}

.id-card-link {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 22px;
	align-items: start;
}

.id-card-title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-charcoal);
	margin-bottom: 6px;
}

.id-card-excerpt {
	font-size: 0.92rem;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-bottom: 8px;
}

/* Case studies archive — quote-forward redesign. One new type role
   (--font-serif) used ONLY for real customer pull-quotes; the oversized
   quotation-mark glyph is the page's signature device, repeated at two
   scales (hero-size in the featured slot, small on grid cards). Everything
   else — chips, headings, filters — stays inside the existing sans/amber/
   charcoal system already used sitewide. */
.stat-strip {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 22px 0 28px;
	padding: 20px 28px;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	border-radius: 0;
	flex-wrap: wrap;
}

.stat {
	display: flex;
	flex-direction: column;
}

.stat-number {
	font-family: var(--font-serif);
	font-size: 2.6rem;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1;
}

.stat-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--color-text-faint);
	margin-top: 5px;
}

.stat-divider {
	width: 1px;
	height: 48px;
	background: var(--color-border);
}

/* The "Submit your project" prompt lives inside the stat strip itself —
   the strip is a fixed height regardless of how few stats it holds, so
   folding the CTA in here (instead of a separate box further down the
   page) uses that space instead of leaving it empty. margin-left: auto
   (not flex: 1 + justify-content: space-between) — the old version
   stretched this block to fill every spare pixel in the row, which on a
   wide screen shoved the button far away from its own text instead of
   just pushing the whole tight block to the right edge. */
.stat-cta {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

.stat-cta-title {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-charcoal);
}

.stat-cta-text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 3px;
}

.stat-cta-btn {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Dark variant of the stat strip (Buyer's Guides) — same layout/markup as
   the light one on Case studies, just inverted, so the two archive pages
   don't read as the exact same banner reused. */
.stat-strip-dark {
	background: var(--color-charcoal);
}

.stat-strip-dark .stat-number,
.stat-strip-dark .stat-cta-title {
	color: var(--color-bg-page);
}

.stat-strip-dark .stat-label,
.stat-strip-dark .stat-cta-text {
	color: rgba(250, 248, 243, 0.65);
}

.stat-strip-dark .stat-divider {
	background: rgba(250, 248, 243, 0.2);
}

.stat-strip-dark .stat-cta-btn {
	background: var(--color-amber);
	color: var(--color-charcoal);
}

/* Featured case study: quote-forward row. The oversized quotation-mark
   glyph (not a big photo) is this page's real signature device, so the
   photo is a modest fixed-width column — a supporting thumbnail, not a
   hero. Cropped (object-fit: cover, plain .img-placeholder default) since
   it's small enough now that a letterboxed/contain crop would look like
   an accident rather than an editorial choice. */
.cs-featured {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
	margin: 0 0 32px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	overflow: hidden;
}

.cs-featured-photo {
	display: block;
	position: relative;
	min-height: 300px;
}

.cs-featured-photo .img-placeholder {
	position: absolute;
	inset: 0;
}

.cs-featured-body {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	background: var(--color-bg-card);
}

.cs-featured-kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 14px;
}

.cs-quote-mark {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	line-height: 0.5;
	color: var(--color-amber);
	opacity: 0.55;
	margin-bottom: 6px;
}

.cs-quote-mark-sm {
	font-size: 2.2rem;
}

.cs-quote {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-charcoal);
	margin: 0 0 14px;
}

.cs-quote-lg {
	font-size: 1.55rem;
	line-height: 1.4;
}

.cs-quote-attribution {
	font-size: 0.9rem;
	color: var(--color-text-faint);
	margin-bottom: 20px;
}

.cs-featured-excerpt {
	font-size: 1.05rem;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: 20px;
}

.cs-chip-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.cs-chip {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 0;
	background: var(--color-bg-image-placeholder);
	color: var(--color-text-muted);
}

.cs-chip-vendor {
	background: var(--color-vendor-contrib-bg);
	color: var(--color-amber-dark);
}

/* Partner chip: same shape as the vendor (product) chip but outlined
   rather than filled, so the two read as related-but-distinct at a
   glance — product is the solid amber chip, partner is the implementer. */
.cs-chip-partner {
	background: transparent;
	color: var(--color-amber-dark);
	border: 1px solid var(--color-amber-dark);
}

.cs-featured-title {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1.25;
	margin: 0 0 14px;
}

.cs-read-link {
	font-size: 0.95rem;
	font-weight: 600;
}

.cs-filter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 24px;
}

.cs-filter-label {
	font-size: 14px;
	color: var(--color-text-faint);
	flex-shrink: 0;
}

.cs-filter-row .news-filter-select {
	width: auto;
	min-width: 170px;
}

/* Multi-select filter groups (Case studies archive) — same amber-outline
   button look as .news-filter-select, but opens a checkbox panel instead
   of a native <select> so more than one value can be picked per facet. */
.cs-filter-group {
	position: relative;
}

.cs-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--color-charcoal);
	background: var(--color-bg-card);
	border: 0.5px solid var(--color-amber);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.cs-filter-toggle:hover {
	border-color: var(--color-amber-dark);
}

.cs-filter-toggle .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.cs-filter-toggle-active {
	border-color: var(--color-amber-dark);
	color: var(--color-amber-dark);
	font-weight: 600;
}

.cs-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--color-amber-dark);
}

.cs-filter-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	min-width: 220px;
	max-height: 280px;
	overflow-y: auto;
	padding: 10px 4px;
	background: var(--color-bg-card);
	border: 0.5px solid var(--color-border);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.cs-filter-panel-open {
	display: block;
}

.cs-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	font-size: 14px;
	color: var(--color-text-muted);
	cursor: pointer;
}

.cs-filter-option:hover {
	background: var(--color-bg-offwhite);
}

.cs-filter-option input {
	flex-shrink: 0;
}

.cs-filter-apply {
	padding: 8px 16px;
	font-size: 14px;
}

/* Currently-applied filters as removable chips, right under the filter
   bar — answers "what do I have selected" at a glance, and each one
   removes just itself (a plain link to the same page minus that value). */
.cs-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -8px 0 20px;
}

.cs-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-amber-dark);
	background: var(--color-vendor-contrib-bg);
	text-decoration: none;
}

.cs-active-filter-chip .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.cs-active-filter-chip:hover {
	background: var(--color-amber);
	color: #fff;
}

/* "Clear filters" — a real button sitting inline with the filter dropdowns
   themselves (News, Case studies, In Depth all share this markup/class)
   rather than a text link off to the side, so it reads as part of the same
   filter control group instead of an unrelated status message. Only
   rendered by the templates when a filter is actually active. */
.cs-filter-clear-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px 8px 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--color-text-muted);
	background: transparent;
	border: 0.5px dashed var(--color-border);
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-filter-clear-btn:hover {
	color: var(--color-amber-dark);
	border-color: var(--color-amber);
}

.cs-filter-clear-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Case studies grid — three columns, real card-width photos. The photo is
   the thing that draws someone into a story, so it stays a proper size
   here rather than a token thumbnail; density instead comes from having
   three columns (not one big feed) and pagination doing its job. */
.cs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 8px;
}

.cs-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg-card);
	transition: border-color 0.15s ease;
}

.cs-card:hover {
	border-color: var(--color-amber);
}

.cs-card .photo-3-2 {
	max-width: none;
}

.cs-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cs-card-title {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1.3;
	margin-bottom: 8px;
}

.cs-card .cs-quote {
	font-size: 0.98rem;
	line-height: 1.5;
	margin-bottom: 10px;
}

.cs-card-excerpt {
	font-size: 0.92rem;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-bottom: 10px;
}

.cs-card-footer {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--color-border-faint);
	font-size: 0.8rem;
	color: var(--color-text-faint);
}

/* Buyer's Guide index — each card leads with the guide's own real intro
   copy (see archive-guide.php's docblock) rather than just a title and a
   count, plus a small overlapping stack of the actual vendor logos inside
   it as a "who's in here" preview — distinct from Case studies' quote
   motif, since a guide's job is reference/comparison, not a story. */
.gd-kicker {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 6px;
}

/* Guide hub page — a centered "Download the print-ready PDF" mini-CTA,
   same idea as the legacy site's big DOWNLOAD NOW button but using the
   site's own .btn-solid rather than a bitmap image, and the guide's real
   pdf_url meta rather than the legacy button's self-referential link. */
.gd-pdf-cta {
	text-align: center;
	margin: 22px 0 4px;
	padding: 26px 20px;
	background: var(--color-bg-offwhite);
	border-radius: 0;
}

.gd-pdf-cta-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-charcoal);
	margin-bottom: 16px;
}

.gd-pdf-cta-title span {
	font-weight: 400;
	color: var(--color-text-faint);
}

.gd-pdf-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Directory header flourish — a row of the same category-colour swatches
   used on every card/badge further down the page, previewing "this is a
   colour-coded index" before the visitor even scrolls. */
.gd-swatch-row {
	display: flex;
	gap: 6px;
	margin-top: 16px;
}

.gd-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Directory category page title: the category name, large serif in the dark amber
   (restored to how it was before the intro was briefly set in the Buyer's Guides
   style). The title is an <h1>; the global h1 rule would tighten its line height. */
.cat-hero {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	border-radius: 0;
	padding: 28px 0;
	margin: 16px 0 20px;
}

.cat-hero-title {
	font-family: var(--font-serif);
	font-size: 64px;
	font-size: clamp(28px, 7cqw, 64px);
	font-weight: 600;
	color: var(--color-text-body);
	margin-bottom: 8px;
}

h1.cat-hero-title {
	line-height: inherit;
	letter-spacing: inherit;
}

/* The same orange marker stroke the Buyer's Guides intro uses (.gd-about-hl),
   drawn through the category name; each wrapped line gets its own stroke. */
h1.cat-hero-title .gd-about-hl {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.gd-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: 24px 0 32px;
}

/* The lead guide (ERP Buyer's Guide, sorted first) gets the full-width
   treatment — a genuine featured slot rather than the same card size
   repeated for every guide in the index. Layout stays the normal vertical
   stack (icon row / title / excerpt / footer), just spans full width with
   larger type, so the footer's own logos+link row reads left-to-right
   beneath a wide title instead of squeezed into a narrow column. */
.gd-grid > a:first-child {
	grid-column: 1 / -1;
	padding: 30px 36px;
}

.gd-grid > a:first-child .gd-card-title {
	font-size: 1.9rem;
}

.gd-grid > a:first-child .gd-card-excerpt {
	max-width: 720px;
}

.gd-card {
	--gd-accent: var(--color-amber-dark);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--gd-accent);
	border-radius: 0;
	padding: 22px 26px 24px;
	background: var(--color-bg-card);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gd-card:hover {
	transform: translateY(-3px);
	box-shadow: none;
}

/* Media Kit page's download card — an editor-supplied cover image (falls
   back to a plain document icon until one's uploaded) with a "Download
   PDF" button overlaid near the bottom, so the whole thing reads as one
   clickable resource rather than an image plus a separate link. */
.mk-download-card {
	position: relative;
	display: block;
	border: 1px solid var(--color-border);
	overflow: hidden;
	background: var(--color-bg-offwhite);
}

.mk-download-card img {
	width: 100%;
	display: block;
}

.mk-download-placeholder {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	color: var(--color-image-placeholder-icon);
}

.mk-download-btn-overlay {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.gd-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-bottom: 14px;
}

.gd-icon-badge {
	width: 44px;
	height: 44px;
	border-radius: 0;
	background: color-mix(in srgb, var(--gd-accent) 14%, var(--color-bg-page));
	color: var(--gd-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: auto;
}

.gd-icon-badge .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.gd-chip {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 0;
	background: color-mix(in srgb, var(--gd-accent) 14%, var(--color-bg-page));
	color: var(--gd-accent);
}

.gd-pdf-flag {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.78rem;
	color: var(--color-text-faint);
}

.gd-pdf-flag .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.gd-card-title {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--color-charcoal);
	line-height: 1.25;
	margin-bottom: 8px;
}

.gd-card-excerpt {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: 18px;
}

.gd-card-footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--color-border-faint);
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Overlapping circular avatars (object-fit: cover) worked for square-icon
   logos but turned wide wordmark logos (Sage, Salesforce, MYOB...) into an
   illegible, overlapping mess. Small spaced-out chips with object-fit:
   contain — same fix already applied to .gd-vendor-logo — keep each logo
   legible instead. */
.gd-logo-stack {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-right: auto;
}

.gd-logo {
	width: 34px;
	height: 34px;
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	border: 1px solid var(--color-border-faint);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gd-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.gd-vendor-count {
	font-size: 0.85rem;
	color: var(--color-text-faint);
	white-space: nowrap;
}

.gd-view-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	white-space: nowrap;
}

/* Single guide page — vendor fact-sheet accordion logo. Deliberately NOT
   the shared .img-placeholder (object-fit: cover, built for square
   avatars) — a wordmark logo like MYOB's gets cropped down to an
   unreadable sliver at cover-crop. object-fit: contain shows the whole
   logo, letterboxed inside the box instead. */
.gd-vendor-logo {
	width: 140px;
	height: 140px;
	border-radius: 0;
	/* White, matching the row's own background — a grey/cream fill (the
	   old .img-placeholder-style treatment) read as a visible box around
	   every logo instead of letting it sit flush in the row. */
	background: var(--color-bg-page);
	color: var(--color-image-placeholder-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.gd-vendor-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Directory category page vendor grid — legacy pavilions did "mouseover a
   logo, click through to the exhibit", a pure logo wall rather than
   logo+name+tagline cards. This is that, modernised: bigger clickable
   logo tiles, a small persistent "View profile" caption standing in for
   the old mouseover hint (a hover-only affordance isn't discoverable on
   touch, so it's always visible instead). */
.gd-logo-tile {
	display: flex;
	flex-direction: column;
	border: 0.5px solid var(--color-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg-card);
}

.gd-logo-tile-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	padding: 18px;
}

.gd-logo-tile-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.gd-logo-tile-img .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--color-image-placeholder-icon);
}

/* Expired-listing treatment mirrors the Case studies archive's "Unverified"
   pattern (see .cs-card-vendor-logo-greyed) — a desaturated logo plus a
   small badge, so a lapsed exhibitor reads as visibly lower-priority next
   to a paying one without looking broken or removed. */
.gd-logo-tile-expired .gd-logo-tile-img img {
	filter: grayscale(100%);
	opacity: 0.55;
}

.gd-logo-tile-expired-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-warning-orange);
	padding: 3px 7px;
}

/* "Other vendors previously listed" strip on a category page — real
   Buyer's/Partner Guide members get the full-size grid above; everyone
   else (legacy content carrying the same category term but never part of
   a guide) is demoted here: denser grid, smaller tile, dimmed logo, no
   "View profile" caption. Still a real, working link — just visibly
   lower-priority, not hidden. */
.gd-logo-tile-minor .gd-logo-tile-img {
	height: 84px;
	padding: 10px;
}

.gd-logo-tile-minor .gd-logo-tile-img img {
	opacity: 0.6;
}

.gd-logo-tile-minor .gd-logo-tile-img .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.gd-logo-tile-minor .gd-logo-tile-expired-badge {
	font-size: 8.5px;
	padding: 2px 4px;
	top: 4px;
	right: 4px;
}

@media (max-width: 800px) {
	/* Higher specificity than the plain .gd-logo-grid mobile rule further
	   down (which drops the main grid to 2 columns) — the minor strip stays
	   denser than that even on mobile, it's meant to read as compact. */
	.gd-logo-grid.gd-logo-grid-minor {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Buyer's Guides index — the photo IS the card. Every guide's own real
   cover photo (same image single-guide.php uses as its hero) fills the
   whole tile edge to edge, with just the title resting faintly over it
   (a soft scrim, enough to keep it legible without it reading as a text
   card) so tiles stay identifiable at rest on any device, touch included.
   The vendor count + "View guide" line only join in on hover/focus on
   devices that actually support hovering (mouse/trackpad) — see the
   `(hover: hover)` block further down — where the scrim also darkens a
   touch further to hold the extra line. */
/* Buyer's Guides index — "About iStart" intro above the guide tiles. Plain type
   on the page; the only decoration is a marker highlight under the key verbs. */
.gd-about {
	max-width: 680px;
	padding: 4px 0 26px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--color-border-faint);
}
.gd-about-lead {
	font-size: 39px;
	line-height: 1.28;
	color: var(--color-text-body);
	margin-bottom: 16px;
	text-wrap: balance;
}
.gd-about-hl {
	padding: 0 0.1em;
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.62em;
}
.gd-about-hl:nth-of-type(1) {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 11 C 18 3, 34 16, 54 8 S 86 6, 98 10' fill='none' stroke='%23E8993A' stroke-opacity='.5' stroke-width='10' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}
.gd-about-hl:nth-of-type(2) {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 8 C 22 15, 40 4, 60 11 S 88 14, 98 7' fill='none' stroke='%23E8993A' stroke-opacity='.5' stroke-width='10' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}
.gd-about-hl:nth-of-type(3) {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 10 C 16 14, 36 5, 56 9 S 82 3, 98 11' fill='none' stroke='%23E8993A' stroke-opacity='.5' stroke-width='10' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}
.gd-about-body {
	margin: 0;
	font-size: 19.5px;
	line-height: 1.7;
	color: var(--color-text-muted);
}
/* Category page intro: same block, a touch wider and smaller for the longer
   welcome paragraph. */
.cat-about {
	max-width: 760px;
	padding-top: 22px;
}
h1.gd-about-lead {
	letter-spacing: inherit;
}
/* The category name inside the lead: larger, bolder, iStart orange (no marker
   stroke here, unlike the Buyer's Guides intro). */
.cat-about .gd-about-lead .gd-about-hl {
	padding: 0;
	background: none;
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-amber-dark);
}
.cat-about .gd-about-lead .gd-about-hl.is-md {
	font-size: 1.5em;
}
.cat-about .gd-about-lead .gd-about-hl.is-sm {
	font-size: 1.25em;
}
.cat-about .gd-about-lead {
	font-size: 30px;
}
.cat-about .gd-about-body {
	font-size: 18px;
}
.cat-about .gd-about-body + .gd-about-body {
	margin-top: 16px;
}
@media (max-width: 560px) {
	.gd-about-lead {
		font-size: 28px;
	}
	.cat-about .gd-about-lead {
		font-size: 22px;
	}
	.gd-about-body,
	.cat-about .gd-about-body {
		font-size: 17.5px;
	}
}

/* Directory landing page — ERP as a large feature block, every other
   category a tile in a grid; each with an image spot (a grey placeholder
   until the category has a Directory image). The marker highlight draws
   under a name on hover/focus only. */
.dir-title {
	font-size: 60px;
	line-height: 1.08;
	margin-bottom: 14px;
	color: var(--color-amber-dark);
	text-wrap: balance;
}
.dir-lead {
	max-width: 640px;
	font-size: 19.5px;
	line-height: 1.6;
	color: var(--color-text-muted);
}
.dir-media {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	position: relative;
	isolation: isolate;
	background: #fcf3e6; /* the brand amber (#E8993A) at about 12% */
}
.dir-media-wide {
	aspect-ratio: 16 / 7;
}
/* Whatever fills the image spot is veiled in the same orange so it sits back and
   the name written over it reads. */
.dir-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fcf3e6;
	opacity: 0.78;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.dir-card:hover .dir-media::after,
.dir-card:focus-visible .dir-media::after,
.dir-feature:hover .dir-media::after,
.dir-feature:focus-visible .dir-media::after {
	opacity: 0.66;
}
.dir-tile {
	position: relative;
	display: block;
	container-type: inline-size;
}
.dir-over {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 20px;
	text-align: center;
	pointer-events: none;
	isolation: isolate;
}
/* A soft wash behind the words so they stay clear of the faded logos. */
.dir-over::before {
	content: "";
	position: absolute;
	inset: 12% 6%;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(252, 243, 230, 0.95) 0%, rgba(252, 243, 230, 0.75) 45%, rgba(252, 243, 230, 0) 72%);
}
.dir-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Logo collage: rows of white tiles separated by thin grey gaps. */
.dir-media.is-collage {
	display: block;
	padding: 4px;
}
.dir-collage {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	height: 100%;
}
.dir-collage-row {
	display: flex;
	gap: 3px;
	flex: 1 1 0;
	min-height: 0;
}
.dir-collage-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 10px;
}
.dir-collage-tile img {
	mix-blend-mode: multiply; /* a logo's own white box drops out into the orange */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.dir-collage-name {
	font-family: var(--font-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--color-text-muted);
}
.dir-media-wide .dir-collage-name {
	font-size: 15px;
}
.dir-media.is-placeholder .dashicons {
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #c4c4bf;
}
.dir-media-wide.is-placeholder .dashicons {
	width: 64px;
	height: 64px;
	font-size: 64px;
}
.dir-feature {
	display: block;
	margin: 30px 0 0;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-border);
}
.dir-feature-name {
	font-family: var(--font-serif);
	font-size: 64px;
	font-size: clamp(28px, 7cqw, 64px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.4px;
	color: var(--color-text-body);
}
.dir-feature-count {
	flex-shrink: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--color-amber-dark);
}
.dir-grid {
	list-style: none;
	margin: 32px 0 6px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 22px;
}
.dir-grid li {
	margin: 0;
}
.dir-card {
	display: block;
}
.dir-card-name {
	display: block;
	font-family: var(--font-serif);
	font-size: 27px;
	font-size: clamp(17px, 8.4cqw, 28px);
	font-weight: 600;
	line-height: 1.22;
	color: var(--color-text-body);
}
.dir-card-count {
	display: block;
	font-size: 15px;
	color: var(--color-text-muted);
}
.dir-card-count b {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-amber-dark);
}
.dir-card.is-quiet .dir-card-name {
	font-weight: 400;
	color: var(--color-text-muted);
}
.dir-feature-name span,
.dir-card-name span {
	margin-left: -0.1em;
	padding: 0 0.1em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 11 C 18 3, 34 16, 54 8 S 86 6, 98 10' fill='none' stroke='%23E8993A' stroke-opacity='.5' stroke-width='10' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0 0.62em;
	transition: background-size 0.3s ease;
}
.dir-feature:hover .dir-feature-name span,
.dir-feature:focus-visible .dir-feature-name span,
.dir-card:hover .dir-card-name span,
.dir-card:focus-visible .dir-card-name span {
	background-size: 100% 0.62em;
}
.dir-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 30px 0 8px;
	margin-bottom: 24px;
}
.dir-cta-title {
	font-size: 27px;
	margin-bottom: 4px;
}
.dir-cta-text {
	margin: 0;
	font-size: 17.5px;
	line-height: 1.5;
	color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) {
	.dir-feature-name span,
	.dir-card-name span {
		transition: none;
	}
}
@media (max-width: 760px) {
	.dir-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
	}
}
@media (max-width: 560px) {
	.dir-title {
		font-size: 40px;
	}
	.dir-lead {
		font-size: 17.5px;
	}
	.dir-media-wide {
		aspect-ratio: 4 / 3;
	}
	.dir-grid .dir-media {
		aspect-ratio: 1 / 1;
	}
	.dir-feature-name {
		font-size: clamp(28px, 9cqw, 40px);
	}
}

.gd-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	padding: 24px 0 40px;
}

.gd-photo-tile {
	--gd-accent: var(--color-amber-dark);
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-offwhite);
	border: 1px solid var(--color-border);
}

.gd-photo-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.5s ease;
}

.gd-photo-tile:hover img {
	transform: scale(1.05);
}

.gd-photo-tile-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: color-mix(in srgb, var(--gd-accent) 40%, var(--color-bg-offwhite));
	background: color-mix(in srgb, var(--gd-accent) 8%, var(--color-bg-page));
}

.gd-photo-tile-icon {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gd-accent);
}

.gd-photo-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 12, 8, 0.55) 0%, rgba(15, 12, 8, 0.08) 50%, rgba(15, 12, 8, 0) 100%);
	transition: background 0.3s ease;
}

.gd-photo-tile-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 20px;
	color: #fff;
}

.gd-photo-tile-title {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.gd-photo-tile-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	margin-top: 6px;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: opacity 0.25s ease;
}

/* Hover-capable pointer (mouse/trackpad) only: on interaction, darken the
   scrim further and reveal the vendor-count/"View guide" line beneath the
   title — the title itself is already visible at rest for every device. */
@media (hover: hover) and (pointer: fine) {
	.gd-photo-tile:hover .gd-photo-tile-scrim,
	.gd-photo-tile:focus-visible .gd-photo-tile-scrim {
		background: linear-gradient(to top, rgba(15, 12, 8, 0.85) 0%, rgba(15, 12, 8, 0.25) 55%, rgba(15, 12, 8, 0) 100%);
	}
	.gd-photo-tile:hover .gd-photo-tile-meta,
	.gd-photo-tile:focus-visible .gd-photo-tile-meta {
		opacity: 0.9;
		height: auto;
		overflow: visible;
	}
}

.gd-logo-tile-cta {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-amber-dark);
	padding: 9px;
	border-top: 0.5px solid var(--color-border-faint);
	background: var(--color-bg-offwhite);
}

/* Vendor accordion expanded panel body — the migrated legacy fact-sheet
   content (PRODUCT OVERVIEW / INDUSTRY FOCUS / A/NZ VENDOR CONTACTS / A/NZ
   RESELLER CONTACTS) comes through as plain <h4>/<br>-separated text, which
   read as an undifferentiated wall of grey copy. Section headings get the
   guide's own accent colour (--gv-accent, set inline per accordion row —
   same colour as that row's left border) plus a divider ahead of every
   section but the first, so the panel reads as distinct chunks instead of
   one continuous block; <br>-separated lines (bullet points, contact
   details) get real vertical rhythm instead of sitting flush together. */
.gv-content h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--gv-accent, var(--color-amber-dark));
	margin: 22px 0 10px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border-faint);
}

.gv-content h4:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.gv-content p {
	margin: 0 0 12px;
}

.gv-content br {
	content: "";
	display: block;
	margin-bottom: 8px;
}

/* Vendor accordion sub-sections — legacy site split a vendor's fact sheet
   into 4 independently-collapsible dropdowns (Product overview / Industry
   focus / A/NZ vendor contacts / A/NZ reseller contacts) rather than one
   continuous scroll; this is that same idea, styled with the site's own
   icon-badge language (colour comes from --gv-accent, set on the parent
   .gv-content to the guide's own category colour) instead of the bare
   "+ LABEL:" text rows the legacy site used. First section starts open so
   the product overview is visible without an extra click. */
.gv-subsection {
	border: 1px solid var(--color-border-faint);
	border-radius: 0;
	margin-bottom: 8px;
	overflow: hidden;
}

.gv-subsection-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 40px 12px 14px;
	background: var(--color-bg-offwhite);
	cursor: pointer;
	list-style: none;
	position: relative;
}

.gv-subsection-summary::-webkit-details-marker {
	display: none;
}

.gv-subsection-summary::after {
	content: '\203A';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	color: var(--color-text-faint);
	font-size: 18px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gv-subsection[open] .gv-subsection-summary::after {
	transform: translateY(-50%) rotate(-90deg);
}
.gv-subsection.is-collapsing .gv-subsection-summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.gv-subsection-icon {
	width: 28px;
	height: 28px;
	border-radius: 0;
	background: var(--gv-accent, var(--color-amber-dark));
	color: var(--color-bg-page);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gv-subsection-icon .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.gv-subsection-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-charcoal);
}

.gv-subsection-body {
	padding: 16px 18px;
	font-size: 16px;
	color: var(--color-text-muted);
	line-height: 1.65;
	border-top: 0.5px solid var(--color-border-faint);
}

.gv-subsection-body p {
	margin: 0 0 12px;
}

.gv-subsection-body p:last-child {
	margin-bottom: 0;
}

/* Opening/closing a .gv-subsection (and a vendor row) is animated by the
   script in single-guide.php, which sets overflow:hidden on the panel only
   while it's moving. */

/* Implementation Partner Guide only — the partner's own "partner
   information" PDF, deliberately styled as a standalone CTA (outline
   button, own row) rather than folded into the .gv-products-list below
   it, so it doesn't read as just another product/fact-sheet line — it's
   a PDF about the partner company, not any one ERP solution. */
.gv-partner-info-cta {
	margin-bottom: 18px;
}

.gv-partner-info-cta .btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

/* Products supported — vendor's product list plus a per-product fact
   sheet link where one exists, shown before the collapsible sections
   rather than buried at the bottom (matches the legacy site's layout). */
.gv-products-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gv-products-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 14px;
	background: var(--color-bg-offwhite);
	border-radius: 0;
	font-size: 15px;
	color: var(--color-charcoal);
	font-weight: 600;
}

.gv-products-list li a {
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Compare-solutions tool (single-guide.php) — the industry+turnover
   picker and the resulting tick-to-select solution grid. Sits in its own
   bordered/tinted block so it reads as a distinct interactive module,
   not just another content section. */
.cmp-tool {
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 24px;
	margin: 8px 0 20px;
}

.cmp-tool-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-amber-dark);
	margin-bottom: 4px;
}

.cmp-tool-desc {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

.cmp-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.cmp-field {
	min-width: 220px;
}

.cmp-label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-charcoal);
	margin-bottom: 6px;
}

/* Industry filter — a checkbox dropdown, not a native <select multiple>
   (ctrl/cmd-click to multi-select is not a discoverable interaction for
   most visitors), so more than one industry can be ticked at once and
   the trigger button summarises the current selection. */
.cmp-multiselect {
	position: relative;
}

.cmp-multiselect-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	text-align: left;
}

.cmp-multiselect-trigger .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--color-text-faint);
	flex-shrink: 0;
}

.cmp-multiselect-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	/* Above .cmp-bar's sticky z-index (20) — the panel can be taller than
	   the gap to the sticky compare bar below it, and needs to stay on top
	   of that bar rather than disappearing behind it while open. */
	z-index: 30;
	max-height: 280px;
	overflow-y: auto;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: none;
	padding: 6px;
}

.cmp-multiselect-clear {
	display: block;
	width: 100%;
	text-align: right;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-border-faint);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	padding: 4px 10px 8px;
	margin-bottom: 4px;
	cursor: pointer;
}

.cmp-multiselect-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	cursor: pointer;
}

.cmp-multiselect-option:hover {
	background: var(--color-bg-offwhite);
}

.cmp-multiselect-option input {
	accent-color: var(--color-amber);
	flex-shrink: 0;
}

.cmp-toggle {
	display: inline-flex;
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: 3px;
	background: var(--color-bg-card);
}

.cmp-toggle-btn {
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.88rem;
	padding: 7px 14px;
	border-radius: 0;
	cursor: pointer;
	color: var(--color-text-muted);
}

.cmp-toggle-btn.active {
	background: var(--color-charcoal);
	color: var(--color-bg-page);
}

.cmp-results-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.cmp-count {
	font-size: 0.85rem;
	color: var(--color-text-faint);
}

.cmp-select-all {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.88rem;
	cursor: pointer;
}

/* "Click to expand" affordance for the Vendor fact sheets accordion —
   previously there was no visual cue at all that the row was expandable,
   which was part of why the compare tick-box (also unlabelled) read as
   just another ambiguous control next to it. Positioned as a sibling of
   <summary>, not inside it, with pointer-events:none so it's purely a
   visual cue — clicks pass straight through to the row underneath. */
/* A real inline SVG, not a font glyph — every earlier version of this
   (rotated dashicon, swapped dashicon pair, CSS content:"▾"/"▴" unicode
   characters) rendered as some kind of doubled/compound shape in real
   testing despite looking correct in computed-style checks, which points
   at font/glyph rendering rather than the CSS logic itself. An SVG path
   is drawn directly, not looked up in any font, so there's no glyph
   fallback or hinting behaviour left that could cause this. One element,
   rotated on open — no swapping, nothing to get out of sync. */
.gv-summary-chevron {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--color-text-faint);
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] > summary > .gv-summary-chevron {
	transform: translateY(-50%) rotate(180deg);
}
details.is-collapsing > summary > .gv-summary-chevron {
	transform: translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
	.gv-summary-chevron,
	.accordion-row summary::after,
	.gv-subsection-summary::after {
		transition: none;
	}
}

/* The actual second arrow: .accordion-row (further up this file) already
   has its own generic summary::after "›" pseudo-element at this exact
   same position (right:14px, top:50%) for every plain accordion on the
   site. .gv-summary carries its own explicit chevron instead, so the
   generic one has to be turned off here specifically — every previous
   attempt was debugging the wrong element, since .gv-summary-chevron
   itself was never duplicated; it was always this pre-existing pseudo-
   element rendering underneath/behind it. */
.gv-summary::after {
	/* !important because the rule being overridden — .accordion-row
	   summary::after, further up this file — is a class+element+pseudo
	   selector (0,1,2), which outranks a same-shape single-class override
	   like this one (0,1,1) on specificity alone, not just source order.
	   Confirmed via computed style that a plain override here was still
	   losing before adding this. */
	content: none !important;
}

/* Compare tick-box on each matching row in the "Vendor fact sheets"
   accordion (single-guide.php) — the filters above narrow which rows show,
   this is how a visible row gets added to the sticky compare bar.
   Deliberately rendered as a sibling of <summary> in the markup (not
   nested inside it) and positioned as its own bordered chip, well clear of
   the chevron — a structurally separate control, not just a styled-different
   one, so there's no ambiguity with "click row to expand" and no reliance
   on stopPropagation to keep the two from colliding. On the right, with a
   real "Add to compare" label so it reads as an obvious, deliberate
   control rather than a small ambiguous tick. */
.gv-cmp-check {
	/* Positioned relative to <summary> (its actual parent now — see the
	   PHP markup), whose own height never changes when the row opens or
	   closes, so top:50% is safe here — unlike being a sibling of
	   <summary> and a direct child of <details>, which resized this
	   against the row's full expanded height and pushed it out of the
	   visible, clipped area. */
	position: absolute;
	top: 50%;
	right: 56px;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	padding: 9px 14px;
	border: 1.5px solid var(--color-border);
	border-radius: 0;
	background: var(--color-bg-card);
	transition: border-color 0.15s ease;
}

.gv-cmp-check:hover {
	border-color: var(--color-amber);
}

.gv-cmp-checkbox {
	/* Visually hidden but still focusable/operable — .gv-cmp-check-box is
	   the visible custom checkbox, driven off this input's :checked state.
	   Sized and positioned to exactly cover the visible box (not shrunk to
	   1px) so there's no gap where the native control could paint its own
	   default appearance. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gv-cmp-check-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--color-text-muted);
	border-radius: 0;
	background: var(--color-bg-offwhite);
	flex-shrink: 0;
	position: relative;
	transition: border-color 0.15s ease;
}

.gv-cmp-check-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.gv-cmp-check-box .dashicons {
	font-size: 17px;
	width: 17px;
	height: 17px;
	color: var(--color-bg-page);
	opacity: 0;
	transition: opacity 0.1s ease;
}

.gv-cmp-checkbox:checked ~ .gv-cmp-check-box {
	background: var(--color-amber);
	border-color: var(--color-amber);
}

.gv-cmp-checkbox:checked ~ .gv-cmp-check-box .dashicons {
	opacity: 1;
}

.gv-cmp-checkbox:focus-visible ~ .gv-cmp-check-box {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

.gv-row-cmp:has(.gv-cmp-checkbox:checked) {
	border-left-color: var(--color-amber) !important;
}

.gv-row-cmp:has(.gv-cmp-checkbox:checked) > .gv-cmp-check {
	border-color: var(--color-amber);
}

.gv-row-cmp:has(.gv-cmp-checkbox:checked) > .gv-cmp-check .gv-cmp-check-label {
	color: var(--color-amber-dark);
}

.cmp-bar {
	position: sticky;
	bottom: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--color-charcoal);
	color: var(--color-bg-page);
	border-radius: 0;
	padding: 14px 20px;
	margin-bottom: 20px;
	box-shadow: none;
}

.cmp-bar #cmp-bar-btn {
	background: var(--color-amber);
	color: var(--color-charcoal);
}

/* Comparison page (page-compare-guide.php) — a real data table (label
   column + one column per selected solution) rather than stacked cards,
   so the same row is genuinely scannable across every solution at once. */
.cmp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: 0;
}

/* Explicit "there's more, swipe" affordance — only shown on the mobile
   breakpoint (see .cmp-scroll-hint's display:flex override in the
   max-width:800px block), since on desktop the whole table already fits
   or the browser's own scrollbar makes the overflow obvious. */
.cmp-scroll-hint {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	margin-bottom: 8px;
}

.cmp-scroll-hint .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.05rem;
}

.cmp-table th,
.cmp-table td {
	padding: 22px 20px;
	border-bottom: 1px solid var(--color-border-faint);
	vertical-align: top;
	min-width: 230px;
}

.cmp-table th:first-child,
.cmp-table td:first-child {
	position: sticky;
	left: 0;
	background: var(--color-bg-card);
	font-weight: 600;
	color: var(--color-charcoal);
	font-size: 1.05rem;
	/* Capped, not unlimited — a row label like "Key reference sites in X,
	   Y, Z" grows with however many industries are ticked in the filter,
	   and without a real cap it stretches the whole column wider instead
	   of wrapping onto more lines. Wide enough for real words to wrap
	   whole rather than being cut mid-word (no overflow-wrap:break-word —
	   that's what caused "Defenc-e"-style breaks at the old, tighter
	   width). A solid right border doubles as this column's own visual
	   separator from the data, since sticky positioning alone doesn't
	   read clearly as "this is the row title" while scrolling. */
	width: 220px;
	min-width: 220px;
	max-width: 220px;
	border-right: 1px solid var(--color-border);
	z-index: 1;
}

.cmp-table thead th {
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-offwhite);
}

.cmp-solution-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cmp-solution-logo {
	height: 44px;
	display: flex;
	align-items: center;
}

.cmp-solution-logo img {
	max-width: 160px;
	max-height: 100%;
	object-fit: contain;
}

.cmp-solution-name {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-charcoal);
}

.cmp-bar-track {
	background: var(--color-border-faint);
	border-radius: 0;
	height: 12px;
	overflow: hidden;
	margin-bottom: 8px;
}

.cmp-bar-fill {
	height: 100%;
	background: var(--color-amber);
	border-radius: 0;
}

.cmp-bar-label {
	font-size: 1rem;
	color: var(--color-text-muted);
}

.cmp-cost-tier {
	color: var(--color-amber-dark);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 1px;
}

.cmp-cost-tier .cmp-cost-tier-dim {
	color: var(--color-border);
}

.cmp-cost-raw,
.cmp-share-raw {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin-top: 6px;
	white-space: pre-line;
}

.cmp-ref-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cmp-ref-pill {
	font-size: 0.9rem;
	padding: 6px 13px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* A reference site with its own unverified iStart case study (see
   linked_case_study_id on guide_reference_site) is a real clickable link,
   not just a name — amber border/text distinguishes it from the plain
   (no case study yet) pills around it. */
.cmp-ref-pill-linked {
	color: var(--color-amber-dark);
	border-color: var(--color-amber);
	font-weight: 600;
	text-decoration: none;
}

.cmp-ref-pill-linked:hover {
	background: var(--color-amber);
	color: #fff;
}

.cmp-ref-empty {
	font-size: 0.98rem;
	color: var(--color-text-faint);
	font-style: italic;
}

/* "Certified iStart case studies" row — the count reuses .cmp-cost-tier's
   bold-amber treatment (same look as the Recent awards row), this is just
   the button underneath it linking to the Case studies archive pre-
   filtered to this vendor (?vendor_id=, see archive-case_study.php). Sized
   down from .btn-outline, which is built for a page-level CTA and reads
   too heavy stacked inside a table cell. */
.cmp-cs-btn {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 7px 13px;
	border: 1px solid var(--color-amber);
	border-radius: 0;
	color: var(--color-amber-dark);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.cmp-cs-btn:hover {
	background: var(--color-amber);
	color: var(--color-charcoal);
}

.cmp-row-note {
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--color-text-faint);
	margin-top: 2px;
}

.cmp-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cmp-share svg {
	flex-shrink: 0;
}

.cmp-share-pct {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-charcoal);
}

.cmp-share-pct .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.cmp-share-group {
	font-size: 0.85rem;
	color: var(--color-text-faint);
	margin-top: 3px;
}

.cmp-footer-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-bg-offwhite);
	margin-bottom: 32px;
}

.cmp-footer-cta-text {
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.cmp-footer-cta-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

/* Buyer's Guide hub redesign (single-guide.php) — hero band, stat chips,
   compact vendor trust strip and closing CTA. All wrap or sit alongside
   the existing .cmp-tool/.accordion-row/.gv-* markup rather than touching
   it, so the compare tool and fact-sheet accordion keep working exactly
   as before this pass. */
.gd-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	border-radius: 0;
	padding: 30px 0;
	margin: 16px 0 22px;
}

.gd-hero.has-photo {
	grid-template-columns: 1fr minmax(360px, 540px);
}

.gd-hero-photo {
	border-radius: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: none;
	aspect-ratio: 4 / 3;
	width: 100%;
}

.gd-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gd-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 4px;
}

.gd-stat-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border-radius: 0;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-charcoal);
}

.gd-stat-chip .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--gd-accent, var(--color-amber-dark));
}

.section-eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-amber-dark);
	margin-bottom: 8px;
}

/* "Make the most of this guide" — legacy intro copy reformatted as a short
   list of tip rows (see single-guide.php) instead of one dense paragraph. */
.gd-tip-list {
	border: 1px solid var(--color-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg-card);
}

.gd-tip-row {
	display: flex;
	gap: 14px;
	padding: 18px 22px;
}

.gd-tip-row + .gd-tip-row {
	border-top: 1px solid var(--color-border-faint);
}

.gd-tip-number {
	flex: 0 0 56px;
	width: 56px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 32px;
	line-height: 1;
	color: var(--color-amber);
}

.gd-tip-body {
	flex: 1;
	min-width: 0;
}

.gd-tip-lead {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-charcoal);
	margin-bottom: 4px;
}

.gd-tip-row .gv-content {
	font-size: 16px;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.gd-tip-row .gv-content p {
	margin: 0;
}

/* Quick comparisons tiles — the image is a real crop of that PDF's own
   cover page, not a stock photo or icon. */
.qc-tile {
	background: var(--color-bg-offwhite);
	border-radius: 0;
	overflow: hidden;
}

.qc-tile-inert {
	text-align: center;
	padding: 18px 10px;
}

.qc-tile-photo {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-image-placeholder);
}

.qc-tile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

.qc-tile-label {
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	padding: 12px 10px;
}

.gd-close-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	background: var(--color-charcoal);
	border-radius: 0;
	padding: 30px 32px;
	margin: 8px 0 32px;
}

.gd-close-cta-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-bg-page);
	margin-bottom: 6px;
}

.gd-close-cta-text {
	font-size: 0.92rem;
	color: rgba(250, 248, 243, 0.68);
	max-width: 440px;
}

.gd-close-cta-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.gd-close-cta-actions .btn-solid {
	background: var(--color-amber);
	color: var(--color-charcoal);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gd-close-cta-actions .link-amber {
	color: var(--color-amber);
	font-size: 0.92rem;
}

@media (max-width: 1000px) {
	.pub-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.gd-grid {
		grid-template-columns: 1fr;
	}
	.gd-photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cs-featured {
		grid-template-columns: 1fr;
	}
	.cs-featured-photo {
		min-height: 240px;
	}
	.adv-pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.dir-most-active-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.find-out-more-grid,
	.gd-resources-grid,
	.gd-quick-cmp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 800px) {
	/* Mobile nav — the desktop version is a hover-driven mega menu, which
	   doesn't exist as a concept on a touchscreen. Below this width the
	   whole thing becomes a tap-to-open panel: hamburger button visible,
	   logo shrunk to fit, .primary-nav hidden until toggled then laid out
	   as a full-width vertical list instead of a horizontal hover-bar.
	   Nothing above 800px is touched — every rule here either targets
	   classes that don't exist in the desktop layout (.mobile-nav-toggle,
	   .nav-item-expand) or is scoped inside this query. */
	.site-header {
		flex-wrap: wrap;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.logo-full img {
		height: 40px;
	}
	.mobile-nav-toggle {
		display: flex;
	}
	.primary-nav {
		display: none;
		width: 100%;
		order: 3;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 18px;
		padding-top: 2px;
		border-top: 1px solid var(--color-border);
		font-size: 1.05rem;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}
	body.mobile-nav-open .primary-nav {
		display: flex;
	}
	.nav-item {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		margin: 0;
		border-bottom: 1px solid var(--color-border-faint);
	}
	.primary-nav > .nav-item > a {
		flex: 1;
		padding: 15px 0;
		border-bottom: none;
	}
	.nav-item-expand {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: var(--color-text-muted);
		cursor: pointer;
	}
	.nav-item-expand .dashicons {
		transition: transform 0.15s ease;
	}
	.nav-item-expanded .nav-item-expand .dashicons {
		transform: rotate(180deg);
	}
	.nav-dropdown,
	.nav-dropdown-stories,
	.nav-dropdown-guides {
		display: none;
		position: static;
		width: 100%;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 16px;
		margin: 0;
		flex-direction: column;
		min-width: 0;
	}
	.nav-item-expanded .nav-dropdown,
	.nav-item-expanded .nav-dropdown-stories,
	.nav-item-expanded .nav-dropdown-guides {
		display: flex;
	}
	.nav-dropdown-grid,
	.nav-guide-grid {
		grid-template-columns: 1fr;
	}
	/* Photo previews suit a hover mega menu, not a tap accordion already
	   competing for vertical space with the rest of the list — the story
	   itself is one tap away either way, this just keeps the open panel
	   from turning into a long scroll of thumbnails. */
	.nav-story-card-photo,
	.nav-guide-photo {
		display: none;
	}
	.nav-story-card,
	.nav-guide-card {
		padding: 10px 0;
		border-bottom: 1px solid var(--color-border-faint);
	}
	.nav-dropdown-cta {
		display: none;
	}
	.nav-icon {
		padding: 15px 0;
	}
	.news-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.adv-services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.news-feature-lead {
		grid-template-columns: 1fr;
	}
	.news-feature-sub-row {
		grid-template-columns: 1fr;
	}
	.news-feature-lead .news-feature-title {
		font-size: 24px;
	}
	/* Homepage hero — desktop is a 1.5fr/1fr side-by-side (lead story +
	   secondary list); below 800px that stacks to one column, and the
	   lead headline's inline 42px drops to something that doesn't take
	   up the whole first screen on a phone. */
	.hero-section {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.hero-lead .serif-display {
		font-size: 28px !important;
	}
	.hero-lead .img-placeholder {
		max-height: 220px !important;
	}
	.hero-secondary {
		border-left: none !important;
		padding-left: 0 !important;
		border-top: 1px solid var(--color-border);
		padding-top: 24px !important;
	}
	.gd-photo-grid {
		grid-template-columns: 1fr;
	}
	.gd-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.gd-hero {
		padding: 22px 0;
	}
	.gd-hero.has-photo {
		grid-template-columns: 1fr;
	}
	.gd-hero-photo {
		max-width: 100%;
	}
	.gd-close-cta {
		flex-direction: column;
		align-items: flex-start;
	}
	/* The "Add to compare" chip's label + generous right-hand padding are
	   sized for desktop; that padding is set inline per-row (see
	   single-guide.php), so !important is the only way to shrink it here
	   without overriding it row-by-row in PHP. Below this width the label
	   text is dropped and the chip becomes an icon-only tap target, same
	   idea as the desktop version just more compact. */
	.gv-summary {
		padding-right: 96px !important;
	}
	.gv-cmp-check {
		right: 44px;
		padding: 7px;
		gap: 0;
	}
	.gv-cmp-check-label {
		display: none;
	}
	/* The vendor name sits in a flex row next to a fixed 96px logo box
	   with no shrink of its own — on a narrow phone that leaves too
	   little width for a longer name (e.g. "HansaWorld Ltd", "Microsoft
	   Dynamics 365 for Finance and Supply Chain"), and since the row is
	   overflow:visible, the text doesn't wrap cleanly, it bleeds out
	   under the compare checkbox. Smaller logo box = the actual fix;
	   this isn't cosmetic shrinkage, the text has nowhere else to go. */
	.gd-vendor-logo {
		width: 56px;
		height: 56px;
	}
	.primary-nav {
		gap: 14px;
		font-size: 0.85rem;
	}
	.site-main, .site-header, .site-footer, .site-search-form {
		padding-left: 24px;
		padding-right: 24px;
	}
	.news-layout {
		grid-template-columns: 1fr !important;
	}
	.supporters-cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.supporters-about {
		border-left: none;
		border-top: 1px solid rgba(250, 248, 243, 0.12);
		padding-left: 0;
		padding-top: 16px;
	}
	.news-share-strip {
		position: static;
	}
	.news-grid {
		grid-template-columns: 1fr;
	}
	.cs-grid {
		grid-template-columns: 1fr;
	}
	.stat-divider {
		display: none;
	}
	.stat-strip {
		gap: 18px 28px;
	}
	.stat-cta {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	/* .stat-cta itself stacks above (flex-direction:column), but its
	   action row (Software Shortlist link + Download guide button) is a
	   separate inline flex with its own gap and no wrap — on a phone that
	   pushed the button straight off the edge of the screen instead of
	   wrapping under the link. */
	.stat-cta-actions {
		flex-wrap: wrap;
		width: 100%;
		margin-top: 4px;
	}
	.newsletter-cta {
		border-radius: 0;
		text-align: center;
		justify-content: center;
	}
	.newsletter-cta-text {
		text-align: left;
	}
	.cs-featured-body {
		padding: 26px 24px;
	}
	.id-masthead-title {
		font-size: 2rem;
	}
	.id-tabs {
		justify-content: flex-start;
		gap: 20px;
	}
	.id-featured-link {
		grid-template-columns: 1fr;
	}
	.id-featured-body {
		padding: 20px 22px;
	}
	.id-grid {
		grid-template-columns: 1fr;
	}
	.id-card-link {
		grid-template-columns: 1fr;
	}
	.about-3col-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.about-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.about-audience-grid {
		grid-template-columns: 1fr;
	}
	/* Homepage teaser rows (front-page.php) — these used one-off inline
	   grid-template-columns with no responsive handling at all, unlike
	   every other homepage grid, which is how the featured case study
	   row was overflowing the viewport on a phone instead of stacking. */
	.home-cs-featured {
		grid-template-columns: 1fr !important;
	}
	.home-cs-grid {
		grid-template-columns: 1fr !important;
	}
	.home-guides-row {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.home-guides-grid {
		grid-template-columns: 1fr !important;
	}
	.gd-home-feature {
		grid-row: auto !important;
	}
	/* In Depth scroll row (front-page.php, taxonomy-solution_type.php) —
	   380px cards were sized for a 3-across desktop strip and never given
	   a mobile size, so a single card was wider than the phone's own
	   viewport (couldn't be fully seen without scrolling mid-card). 260px
	   comfortably fits with a peek of the next card, same idea as
	   .news-scroll-card's existing 230px. */
	.id-scroll-card {
		flex-basis: 260px;
	}
	/* Directory archive "Most active categories" (archive-vendor.php) —
	   3 columns with no responsive handling at all before this. */
	.dir-most-active-grid {
		grid-template-columns: 1fr !important;
	}
	/* Category page "{X} Overview" section (taxonomy-solution_type.php) —
	   the heading's nowrap ran the title off the edge of the screen on
	   anything longer than a couple of words, and the fixed 280px sidebar
	   card had nothing to stack under it, so it just overlapped the body
	   text instead of sitting below it. */
	.cat-overview-heading {
		white-space: normal !important;
	}
	.cat-overview-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	/* "Find out more" 3-card row (page-advertise.php, page-media-kit.php),
	   Media Kit's "Readership at a glance" 3-column row, and single-
	   guide.php's "Other helpful resources" / "Quick comparisons" rows —
	   all plain repeat(3,...) grids with no responsive handling. */
	.find-out-more-grid,
	.mk-glance-grid,
	.gd-resources-grid,
	.gd-quick-cmp-grid {
		grid-template-columns: 1fr !important;
	}
	/* Vendor profile header (single-vendor.php) — fixed 180px logo box +
	   a flex:1 text column with no wrap on the title/badges row meant the
	   "Exhibitor Expired" badge (or region badge) ran off the edge of the
	   screen instead of wrapping under the vendor name. */
	.vendor-header-row {
		flex-direction: column;
	}
	.vendor-name-row {
		flex-wrap: wrap;
	}
	/* AU/NZ office contact cards (page-contact-us.php, page-advertise.php)
	   — plain 1fr 1fr with no responsive handling, unlike every other
	   2-column content grid on the site. */
	.office-cards-grid {
		grid-template-columns: 1fr !important;
	}
	/* Legacy migrated post content (vendor bios, some older case studies)
	   occasionally hard-codes an old WPBakery-style 3-column layout as
	   inline float:left + a percentage width — e.g. MYOB's "Office
	   locations" (Australia/Sydney/Perth/New Zealand addresses across 3
	   floated 33%-wide divs). No modern template inline style uses float
	   at all, so this is safe to target globally: stack those columns
	   full-width instead of leaving them at a fixed 33% on a phone, which
	   read as jumbled, interleaved text. */
	[style*="float:left"],
	[style*="float: left"],
	[style*="float:right"],
	[style*="float: right"] {
		float: none !important;
		width: 100% !important;
	}
	/* ERP guide compare-tool results table (page-compare-guide.php) — the
	   label column and data columns are both sized for desktop reading
	   comfort, which on a phone left barely a sliver of even a single
	   vendor's column on screen at once with no hint that swiping reveals
	   more. Shrinking both (the label column especially, since its content
	   is short row titles, not the actual data) means a phone screen shows
	   the label plus a full column and a peek of the next one — combined
	   with the explicit "Swipe" hint (.cmp-scroll-hint) shown only here. */
	.cmp-table th,
	.cmp-table td {
		min-width: 170px;
		padding: 16px 14px;
	}
	.cmp-table th:first-child,
	.cmp-table td:first-child {
		width: 130px;
		min-width: 130px;
		max-width: 130px;
		padding: 16px 12px;
		font-size: 0.92rem;
	}
	.cmp-solution-name {
		font-size: 1.1rem;
	}
	.cmp-scroll-hint {
		display: flex;
	}
}

@media (max-width: 560px) {
	.about-team-grid {
		grid-template-columns: 1fr;
	}
	.adv-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.adv-pricing-grid {
		grid-template-columns: 1fr !important;
	}
	.news-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Full-bleed masthead banners that collapse in place as you scroll past
   them (About, Advertise) — see assets/hero-shrink.js, which shrinks the
   wrapper's own height in step with scroll position. Plain in-flow
   block, not sticky/pinned — the banner is meant to visibly compress as
   you scroll, not float at the top of the viewport. */
.hero-shrink-wrap {
	overflow: hidden;
	height: 420px;
}

/* "N min read" above the story title — phones only. On a phone the sidebar
   (where it lives on desktop) drops below the story, so it moves to the top. */
.story-readtime-top {
	display: none;
}

@media (max-width: 800px) {
	/* Banners (About, Advertise): the wide banner graphic (logo, tagline, nav
	   words) was cropped to a sliver of itself in a 420px-tall box on a phone.
	   Here it shows whole, at its own proportions; the scroll collapse is
	   switched off in hero-shrink.js. !important because the image's own
	   height is set inline in the template. */
	.hero-shrink-wrap {
		height: auto;
	}
	.hero-shrink-wrap img {
		height: auto !important;
	}

	/* Menu: the latest News and Case study stories show a small photo beside
	   the headline (they were hidden outright). */
	.nav-story-card {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
	}
	.nav-story-card-photo {
		display: block;
		grid-row: 1 / span 2;
		margin: 0;
	}
	.nav-story-card-title,
	.nav-story-card-date {
		grid-column: 2;
	}
	.nav-story-card-title {
		font-size: 1rem;
		margin-bottom: 4px;
	}
	.nav-story-card.no-photo {
		display: block;
	}
	.nav-story-card.no-photo .nav-story-card-photo {
		display: none;
	}

	/* Read time moves to the top of the story. */
	.story-readtime-top {
		display: block;
		margin-bottom: 10px;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: var(--color-text-faint);
	}
	.news-share-row .news-read-time,
	.id-read-time,
	.id-read-time-dot {
		display: none;
	}
}