/*
Theme Name: Cogent Base
Theme URI: https://github.com/JBMEPCA/cogent-incubator
Author: Cogent Multimedia
Description: Shared parent theme for the Cogent title fleet. Holds the layout, templates, patterns, tools and advertising positions that every title has in common. A title is a child theme carrying only its palette, fonts, masthead and section patterns. Do not activate this directly.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cogent-base
*/

/* ------------------------------------------------------------------
   theme.json owns the tokens (colours, type, spacing). This file owns
   what block styles can't express. Mobile-first throughout.
------------------------------------------------------------------- */

:root {
	--fm-radius: 10px;
	--fm-shadow: 0 1px 2px rgba(10, 12, 22, 0.06), 0 8px 24px rgba(10, 12, 22, 0.07);
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.15em;
}

/* ---------- Header ---------- */

.site-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Logo lockup (matches the title's app brand; the artwork lives in the child) */

.logo-lockup {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.logo-lockup:hover .logo-row {
	color: var(--wp--preset--color--brand-bright);
}

/* The lockup is a brand asset shared with the title's app, so it is pinned to
   its own token. It must not follow the headline face when that changes. */
.logo-row {
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--brand);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: color 0.15s ease;
}

/* The masthead chip defaults to the title's PRIMARY brand colour, which is what
   a title means by "our colour". It briefly used the amber slug because The
   Fleet Magazine wanted a signal-amber chip, and Smart SME promptly turned
   orange: amber is a semantic slot every title fills, so pointing a shared rule
   at it hands one title's aesthetic to all of them.

   A title that wants a different chip overrides this one declaration in its own
   style.css. That is exactly the split the child is for. */
.logo-mark {
	background: var(--wp--preset--color--brand);
	color: #fff;
	padding: 3px 7px;
	border-radius: 4px;
	box-shadow: 0 0 14px color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
}

.logo-mag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8px;
	letter-spacing: 0.42em;
	color: var(--wp--preset--color--brand-bright);
	margin-top: 4px;
	align-self: flex-end;
}

.site-brand__tag {
	display: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted-light);
	margin: 0;
}

/* The header bar is capped at the 1200px wide size, so the row is a fixed
   budget rather than something a wider window fixes: brand + gap + nav + search
   must stay under 1200.

   The strapline used to sit here at 1280px and up. It is gone from
   parts/header.html on this title, and deliberately: Smart SME's line was short
   enough to be decoration, whereas "Vans, trucks and company cars, the
   operator's side of the fleet" runs to 62 characters and pushed a seven-item
   nav onto a second row. The hero and the footer both still carry it, so
   nothing is lost by leaving the masthead to the lockup and the nav.

   The rule stays rather than being deleted, so a title with a short strapline
   can put it back by restoring the paragraph in the header part. If a nav item
   is ever added, spend the budget here before touching the nav gap: the bar
   does not get wider than 1200 and the tag is the thing with least to say. */
@media (min-width: 1280px) {
	.site-brand__tag {
		display: block;
	}
}

/* Push the nav overlay breakpoint from WordPress's 600px out to 1000px.
   Eight top-level items need 652px, which will not sit beside the logo on a
   tablet, and the header silently wrapped onto two rows instead. These two
   rules re-assert the mobile behaviour across that range; both carry .site-nav
   so they outrank the core rules they mirror, and both exclude .is-menu-open so
   opening the overlay still works exactly as core intends. */
@media (min-width: 600px) and (max-width: 999.98px) {
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.site-nav a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	font-weight: 500;
}

/* Tighter than the 24px block gap, and only where the nav is a horizontal row
   beside the logo. Eight sections at 24px do not fit the 742px the tag leaves
   them; at 16px and 0.9rem they do, with room to spare. The overlay keeps the
   looser gap, where vertical space is not the constraint. */
@media (min-width: 1000px) {
	.site-nav .wp-block-navigation__container {
		gap: 1rem;
	}
}

/* ---------- Header search ---------- */

.site-header__right {
	gap: 0.75rem;
}

/* Touch targets: every header control clears 44x44 so the icon can stay small
   while the hit area meets the accessibility minimum.

   Never set `display` on the nav toggles. WordPress hides them above the
   overlay breakpoint with its own display rule, and any selector here is
   specific enough to beat it, which forces the hamburger to show on desktop
   alongside the full nav and wraps the header onto two rows. Size only. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.header-search .wp-block-search__button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--base);
	border-radius: 8px;
	padding: 0.45em 0.55em;
	cursor: pointer;
}

.header-search .wp-block-search__button:hover {
	border-color: var(--wp--preset--color--brand-bright);
	color: var(--wp--preset--color--brand-bright);
}

.header-search .wp-block-search__button svg {
	fill: currentColor;
}

.header-search .wp-block-search__input {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--wp--preset--color--base);
	border-radius: 8px;
	padding: 0.4em 0.75em;
	font-size: 0.9rem;
}

.header-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted-light);
}

/* ---------- Mobile nav overlay ----------

   Almost everything here is scoped to .is-menu-open, so it only ever describes
   the open overlay and never the desktop row. The one deliberate exception is
   the .nav-overlay__brand rule below, and it has to be: core leaves the dialog
   in the flow above the overlay breakpoint, so the injected masthead needs an
   explicit closed state or it renders on the desktop header as a second logo.
   Anything else added to the dialog by a filter needs the same treatment.

   TWO CORE BEHAVIOURS ARE BEING ANSWERED, and both were live on all three
   titles:

   1. No padding. Core sizes the overlay with

        padding: clamp(1rem, var(--wp--style--root--padding-top), 20rem) ...

      and theme.json sets no root padding, so each middle term is an empty
      token, all four declarations are invalid, and the overlay computed to
      padding: 0.

   2. Right-aligned. The nav block carries layout justifyContent:"right", which
      is correct for the desktop row sitting beside the search, but core feeds
      the same value into --navigation-layout-justification-setting and the
      overlay reads it too. Every item stacked hard against flex-end.

   Together those put the right edge of every menu item at exactly the right
   edge of the viewport. Measured at 375px on all three titles before this
   change: every top-level item ended at x=375 of 375, last letter on the
   bezel. That is the "cut off" this replaces.

   DO NOT FIX THIS BY CHANGING justifyContent IN A CHILD'S header.html. That
   moves the desktop nav in from the right and leaves a hole where it sat. The
   overlay is the thing that should not have inherited it.

   ---- Why the selectors below are so long ----

   Every rule spells out the full core chain,

     .site-nav .wp-block-navigation__responsive-container.is-menu-open
       .wp-block-navigation__responsive-container-content <target>

   rather than the much more readable `.site-nav .is-menu-open <target>`. That
   is arithmetic, not decoration. Core's overlay rules are two classes deep
   before they start, e.g.

     .wp-block-navigation__responsive-container.is-menu-open
       :where(:not(.disable-default-overlay))
       .wp-block-navigation__responsive-container-content
       .wp-block-navigation-item__content { padding: 0 }

   which is 0-4-0 — :where() contributes nothing, the rest does. The short form
   is 0-3-0 and loses. The first version of this section used it, and the result
   was instructive: font-size and display applied, padding-block silently did
   not, and the rows looked left-aligned but were 23px tall instead of 55px.
   Half-applied is the worst failure mode here, because it looks fixed.

   ---- The hook that looks right and is not ----

   Core 7.0 added `disable-default-overlay`, and a class that turns off every
   default overlay rule in one move is exactly what this section wants. It is
   not for us. It also carries:

     .disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content
       > :not(.wp-block-navigation__overlay-container) { display: none }

   It is the switch for core's own custom overlay-content block. Setting it
   without providing that block hides the entire menu. Do not reach for it.

   ---- Colour ----

   Derived from currentColor, never rgba(255, 255, 255, ...). The overlay takes
   its colour from overlayTextColor, and Golf Resort Magazine has already had to
   override six parent rules that assumed a dark title. A rule written against
   currentColor is correct on a light overlay without anybody having to notice
   it was wrong. */

.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* Line up with the header this replaces: .site-header pads 1.25rem at the
	   sides and 0.75rem on top (spacing 40 and 30), so the close button lands
	   where the hamburger was. max() keeps a notch or a rounded corner off the
	   text. */
	--nav-overlay-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));

	padding: 0;
	overscroll-behavior: contain;
}

/* The dialog holds the brand row and the list. Two columns, so the injected
   lockup and core's close button share row 1 and the menu spans row 2.

   The close button comes out of position:absolute to sit in that grid. Setting
   `position` is safe where setting `display` would not be — see the note on the
   toggles above. Core hides those above the overlay breakpoint with a display
   rule this file must never outrank, and .is-menu-open cannot exist above that
   breakpoint in any case. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	padding:
		max(0.75rem, env(safe-area-inset-top))
		var(--nav-overlay-gutter)
		calc(2rem + env(safe-area-inset-bottom));
}

/* The lockup is display:none until the overlay is actually open.

   Core does not take the responsive container out of the page above the overlay
   breakpoint. It keeps the container, the dialog and the list in the flow and
   hides only the two toggle buttons, so anything injected into the dialog is
   rendered on the desktop header too — and the title gets a second masthead
   stacked on top of its own navigation. Every other rule in this section is
   scoped to .is-menu-open, which is why the closed state had no styling at all
   rather than merely the wrong styling.

   Scoped to .site-nav to match the render filter, which decorates that nav and
   no other. */
.site-nav .nav-overlay__brand {
	display: none;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-overlay__brand {
	display: block;
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	grid-column: 2;
	grid-row: 1;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 8px;
	color: inherit;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	border-color: currentColor;
}

/* The lockup is the title's own masthead, rendered by the parent from
   cogent_brand(). inc/nav-overlay.php explains why it is injected at render
   time rather than authored into each child's header.html.

   logo-mag takes its colour from currentColor rather than inheriting the
   masthead's. Golf Resort Magazine sets .logo-mag to its dark brand green,
   which is right on its white header and measures about 1.5:1 on the dark
   overlay. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-overlay__brand .logo-mag {
	color: color-mix(in srgb, currentColor 65%, transparent);
}

/* Fleet's masthead reads FLEET where its site name says Fleet, and Golf's reads
   RESORT for Resort. All three titles set the chip in caps, so the derived
   lockup does too rather than making each child correct its own casing. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .nav-overlay__brand .logo-mark {
	text-transform: uppercase;
}

/* Row 2: the menu itself, left-aligned and full width.

   align-items on both the content wrapper and the list is what actually undoes
   flex-end. The custom property is reset alongside it because core reads it in
   places this file does not enumerate, and leaving it at flex-end invites a
   future core rule to re-introduce the bug somewhere new. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-align: stretch;

	grid-column: 1 / -1;
	grid-row: 2;
	align-items: stretch;
	width: 100%;
	margin-top: 0.85rem;
	/* Core reserves calc(24px + 2rem) up here to clear its absolutely positioned
	   close button. Ours is in the flow, so that reservation is now just a hole. */
	padding-top: 0.35rem;
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
	gap: 0;
}

/* Core applies --navigation-layout-justification-setting to every row as well
   as to the list, so each <li> is itself a column flexbox aligned flex-end.
   Resetting the property on the content wrapper above is not enough to undo it:
   the nav element also carries core's items-justified-right class, which sets
   flex-end literally.

   Both levels have to be said out loud. Without this the submenu <ul> hugs the
   right edge of its parent row and the links inside it overflow their own <li>
   to the left — measured at x=144 on a 375px screen against a 20px gutter, i.e.
   still ragged, just ragged in a new place. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: stretch;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation__submenu-container {
	align-items: stretch;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

/* Full-width rows, so the whole strip is the tap target and not just the word.
   0.9rem either side of a 1.15rem line clears the 44px minimum the rest of the
   header controls are held to. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	/* width:100% against a content-box would put the padding outside the row and
	   overflow it. Every other full-width control in this theme is border-box;
	   core leaves these alone. */
	box-sizing: border-box;
	width: 100%;
	padding-block: 0.9rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-bright);
}

/* A submenu is always expanded in the overlay — core renders it in the flow
   rather than on hover — so its parent is a heading, not a control. "More"
   pointing at "#" read as a link that did nothing; as a label it says what it
   is. Core already hides the arrow in the overlay; this states the intent
   rather than depending on it, because there is nothing left to toggle. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content:hover {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: color-mix(in srgb, currentColor 60%, transparent);
	padding-bottom: 0.35rem;
	cursor: default;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: none;
}

/* Children sit under a rule rather than core's 32px indent, so the group reads
   as one block instead of a second, ragged column. The .has-child in the
   selector is not cosmetic — core's rule that clears the submenu border carries
   it, and without it this loses by one class. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	position: static;
	padding: 0 0 0.6rem;
	margin-left: 0.1rem;
	border-left: 2px solid color-mix(in srgb, currentColor 18%, transparent);
	gap: 0;
	min-width: 0;
	width: auto;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	/* Stated as a shorthand, not padding-block + padding-left: core keeps a 1em
	   padding-right on submenu links to clear the arrow it draws in a dropdown.
	   There is no arrow here, and leaving it in pushed the right-hand edge 15px
	   in from the gutter the top-level rows sit on. */
	padding: 0.55rem 0 0.55rem 0.9rem;
	font-size: 0.98rem;
	font-weight: 500;
	color: color-mix(in srgb, currentColor 82%, transparent);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-bright);
}

/* The panel arrives rather than appearing. One animation on the wrapper and not
   a stagger per item: a stagger across a ten-item menu is still finishing after
   the thumb has already moved. Core runs its own 0.1s fade on the container, so
   this is the second half of a handover, not a competing animation. */
@media (prefers-reduced-motion: no-preference) {
	.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation: cogent-nav-overlay-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
}

@keyframes cogent-nav-overlay-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

/* ---------- Trending ticker (marquee conveyor) ---------- */

/* Kill default top-level template gaps so header/ticker/hero sit flush */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.ticker {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ticker__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	max-width: 1200px;
	margin-inline: auto;
	overflow: hidden;
}

.ticker__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-bright);
	flex-shrink: 0;
	padding-right: 1rem;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* The label eats a third of a phone screen at full size; buy the headlines room */
@media (max-width: 600px) {
	.ticker__inner {
		gap: 0.6rem;
	}

	.ticker__label {
		font-size: 0.62rem;
		letter-spacing: 0.1em;
		padding-right: 0.6rem;
	}
}

/* Slow "live" pulse on the label, so the bar reads as active even mid-headline */
.ticker__pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-bright);
	animation: ticker-pulse 2.4s ease-in-out infinite;
}

@keyframes ticker-pulse {
	0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--brand-bright) 60%, transparent); }
	50%      { opacity: 0.5; box-shadow: 0 0 0 5px transparent; }
}

.ticker__viewport {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 3%, black 92%, transparent);
}

.ticker__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: ticker-scroll var(--ticker-duration, 60s) linear infinite;
}

/* Let readers stop the belt to actually click a headline */
.ticker__inner:hover .ticker__track,
.ticker__inner:focus-within .ticker__track {
	animation-play-state: paused;
}

.ticker__items {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticker__item {
	white-space: nowrap;
	display: flex;
	align-items: center;
	--cat-color: var(--wp--preset--color--brand-bright);
}

.ticker__item.category-finance      { --cat-color: var(--wp--preset--color--green); }
.ticker__item.category-operations   { --cat-color: var(--wp--preset--color--cyan); }
.ticker__item.category-marketing    { --cat-color: var(--wp--preset--color--violet); }
.ticker__item.category-case-studies { --cat-color: var(--wp--preset--color--amber); }
.ticker__item.category-news         { --cat-color: var(--wp--preset--color--muted-light); }

/* Trailing separator on every item, so the loop seam is separated like any other join */
.ticker__item::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cat-color);
	opacity: 0.65;
	margin: 0 1.5rem;
	flex-shrink: 0;
}

.ticker__item a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ticker__item a:hover,
.ticker__item a:focus-visible {
	color: var(--wp--preset--color--base);
}

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ticker__track {
		animation: none;
	}
	.ticker__track [aria-hidden="true"] {
		display: none;
	}
	.ticker__pulse {
		animation: none;
	}
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
}

/*
 * The blue glow used to sit top-right, which is now where the lead image goes.
 * Moved behind the headline so it still lifts the band without muddying the
 * photograph.
 */
.hero::before {
	content: "";
	position: absolute;
	inset: auto auto -35% -18%;
	width: 55%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(46, 62, 238, 0.5), transparent 70%);
	pointer-events: none;
}

.hero > * {
	position: relative;
}

.hero__kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-bright);
	margin-bottom: 1.25rem;
}

.hero .cat-pill a {
	color: var(--wp--preset--color--brand-bright);
}

/*
 * Lead story runs as a split: headline left, picture right. The markup order is
 * still pill > headline > standfirst > image so the reading order matches the
 * hierarchy; the grid does the moving.
 */
.hero-feature .wp-block-post-template > li {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	/* Explicit rows so the picture's grid-row: 1 / -1 has real lines to span. */
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.hero-feature .cat-pill,
.hero-feature .wp-block-post-title,
.hero-feature .wp-block-post-excerpt {
	grid-column: 1;
}

/* Posts published without a featured image fall back to the old full-width stack. */
.hero-feature .wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) {
	display: block;
}

.hero-feature .wp-block-post-title {
	letter-spacing: -0.03em;
	margin: 0.75rem 0 0.75rem;
	max-width: none;
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
	line-height: 1.04;
}

.hero-feature .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.hero-feature .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-bright);
}

.hero-feature .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted-light);
	max-width: 46ch;
	margin: 0;
}

.hero-feature .wp-block-post-featured-image {
	position: relative;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin: 0;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.hero-feature .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Two overlays so the picture reads as part of the dark band rather than a
 * rectangle dropped on top of it: the first dissolves its left edge into the
 * hero background, the second pushes brand blue through the highlights.
 */
.hero-feature .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--wp--preset--color--contrast) 0%, rgba(10, 12, 22, 0.5) 24%, transparent 58%),
		linear-gradient(200deg, rgba(46, 62, 238, 0.32), transparent 62%);
}

@media (max-width: 880px) {
	.hero-feature .wp-block-post-template > li {
		display: block;
	}

	.hero-feature .wp-block-post-featured-image {
		aspect-ratio: 16 / 9;
		margin-top: 1.5rem;
	}

	/* Edge fade is a two-column trick; on one column it just dims the picture. */
	.hero-feature .wp-block-post-featured-image::after {
		background: linear-gradient(200deg, rgba(46, 62, 238, 0.32), transparent 62%);
	}
}

.hero-sub {
	margin-top: 2.5rem;
}

.hero-sub li {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	padding-left: 1rem;
}

.hero-sub .wp-block-post-title {
	margin: 0.5rem 0 0;
	line-height: 1.35;
}

.hero-sub .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.hero-sub .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-bright);
}

/* ---------- Section furniture ---------- */

.section-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand);
	margin: 0 0 0.25rem;
}

.cat-section {
	margin-top: var(--wp--preset--spacing--60);
	border-top: 2px solid var(--sec-color, var(--wp--preset--color--brand));
	padding-top: 1.25rem;
}

.cat-section--finance      { --sec-color: var(--wp--preset--color--green); }
.cat-section--operations   { --sec-color: var(--wp--preset--color--cyan); }
.cat-section--marketing    { --sec-color: var(--wp--preset--color--violet); }
.cat-section--case-studies { --sec-color: var(--wp--preset--color--amber); }
.cat-section--news         { --sec-color: var(--wp--preset--color--muted); }

/* Section head sits on a heavy rule in the category's own colour, with the
   masthead hairline running out to the full width beneath it. Gives each
   section a masthead of its own without adding another box. */
.cat-section__head {
	margin-bottom: 1.25rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
}

.cat-section__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	background: var(--cat-color, var(--wp--preset--color--brand));
}

.cat-section__head h2 {
	margin: 0;
	letter-spacing: -0.02em;
}

.cat-section__more {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.cat-section__more a {
	text-decoration: none;
}

.cat-section__more a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* ---------- Post cards ---------- */

.wp-block-post {
	--cat-color: var(--wp--preset--color--brand);
}

.wp-block-post.category-finance      { --cat-color: var(--wp--preset--color--green); }
.wp-block-post.category-operations   { --cat-color: var(--wp--preset--color--cyan); }
.wp-block-post.category-marketing    { --cat-color: var(--wp--preset--color--violet); }
.wp-block-post.category-case-studies { --cat-color: var(--wp--preset--color--amber); }
.wp-block-post.category-news         { --cat-color: var(--wp--preset--color--muted); }

/* Editorial tiles, not cards.

   These were bordered, rounded, drop-shadowed boxes that lifted on hover: the
   stock look of a generated template, and the thing that made the grid read as
   software rather than a publication. Structure now comes from a hairline rule
   above each item and from type, which is how print does it. The only hover
   affordance is on the things you actually click. */
.post-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-grid .wp-block-post > * {
	margin: 0;
}

/* Close the row when the count is odd.
 *
 * Sections ask for four and the grid is two across, so this normally never
 * fires. It is here for the young category that only has three articles to
 * give: rather than leave the bottom-right cell empty, which is the exact hole
 * this layout was fixed to remove, the last card takes the full width and the
 * row closes. It reads as a deliberate lead item rather than a gap.
 *
 * Scoped to .home-cols, because "the grid is two across" is only true inside
 * the homepage's two-thirds column. The same .post-grid class is used by the
 * archive, author and index templates, where the grid is alignwide and four
 * across — and there grid-column: 1 / -1 stretched a single trailing card to
 * the full 1200px beside 282px neighbours. One orphan cell in a row of four is
 * ordinary; a card four times the size of everything around it looks like a
 * fault. Category pages show sixteen a page for the same reason: page one is
 * always four clean rows.
 *
 * Only above the breakpoint where the grid is actually multi-column: on a
 * phone every card is full width already and the rule would do nothing. */
@media (min-width: 700px) {
	.home-cols .post-grid .wp-block-post-template > .wp-block-post:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Spanning the width must not also double the height. At 16/9 across the
	   full column the picture came out 747x420 against its neighbours' 203, so
	   the odd card stopped being the last item in a row and became the thing
	   the section appeared to be about. A wider crop holds it to roughly the
	   height of the cards beside it.
	 *
	 * The ratio has to be overridden on the FIGURE, and with !important: core
	 * writes `aspect-ratio:16/9` as an inline style on the wrapper, and the
	 * image is only width/height 100% of it, so a rule aimed at the img changes
	 * nothing and a rule without !important loses to the attribute. */
	.home-cols .post-grid .wp-block-post-template > .wp-block-post:last-child:nth-child(odd) .wp-block-post-featured-image {
		aspect-ratio: 32 / 9 !important;
	}
}

.post-grid .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 3px;
}

.post-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
	.post-grid .wp-block-post:hover .wp-block-post-featured-image img {
		transform: scale(1.03);
	}
}

.post-grid .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
	transition: color 0.15s ease;
}

.post-grid .wp-block-post-title a:hover {
	color: var(--cat-color, var(--wp--preset--color--brand));
}

/* Branded gradient stand-in when an article has no featured image yet */
.post-grid .wp-block-post:not(:has(figure))::before {
	content: "◈";
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	background:
		radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--cat-color) 65%, transparent) 0%, transparent 55%),
		linear-gradient(135deg, #0F1519 0%, color-mix(in srgb, var(--cat-color) 45%, #0F1519) 100%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.7rem;
}

.post-grid .wp-block-post-title {
	letter-spacing: -0.015em;
	line-height: 1.28;
}

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

.post-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.post-grid .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
}

.post-grid .wp-block-post-date {
	margin-top: auto;
	padding-top: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}

/* Category pill */

.wp-block-post-terms.cat-pill {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* A rule and a word, not a pill. The rounded outlined chip is one of the stock
   tells; the accent colour still does the category-coding work, and reads
   quieter so the headline stays the loudest thing in the tile. */
.wp-block-post-terms.cat-pill a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	color: var(--cat-color, var(--wp--preset--color--brand));
	transition: opacity 0.15s ease;
}

.wp-block-post-terms.cat-pill a::before {
	content: "";
	width: 14px;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

.wp-block-post-terms.cat-pill a:hover {
	opacity: 0.72;
}

/* ---------- Ad slots ---------- */

.ad-slot {
	box-sizing: border-box;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--brand) 40%, var(--wp--preset--color--line));
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	padding: 0.6rem 1rem 1rem;
	text-align: center;
}

.ad-slot__tag {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
}

.ad-slot__body {
	display: grid;
	place-items: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
}

.ad-slot__body a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ad-slot__body a:hover {
	color: var(--wp--preset--color--brand);
}

.ad-slot--leaderboard .ad-slot__body {
	min-height: 100px;
}

@media (min-width: 782px) {
	.ad-slot--leaderboard .ad-slot__body {
		min-height: 90px;
	}
}

.ad-slot--billboard .ad-slot__body {
	min-height: clamp(140px, 22vw, 250px);
}

.ad-slot--mpu {
	max-width: 340px;
	margin-inline: auto;
}

.ad-slot--mpu .ad-slot__body {
	min-height: 250px;
}

/* House ad: an unsold slot filled with our own promo rather than a dashed box */

.ad-slot--house {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.house-ad {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	min-height: 250px;
	padding: 1.25rem;
	border-radius: 6px;
	text-align: left;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	background:
		radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--brand-bright) 55%, transparent) 0%, transparent 58%),
		linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, color-mix(in srgb, var(--wp--preset--color--brand) 55%, var(--wp--preset--color--contrast)) 100%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.house-ad--alt {
	background:
		radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--violet) 50%, transparent) 0%, transparent 58%),
		linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, color-mix(in srgb, var(--wp--preset--color--brand) 40%, var(--wp--preset--color--contrast)) 100%);
}

.house-ad:hover,
.house-ad:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(10, 12, 22, 0.22);
}

.house-ad__kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.house-ad__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
}

.house-ad__text {
	font-size: 0.82rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

.house-ad__cta {
	margin-top: auto;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
}

/* ---------- Homepage columns & sidebar ---------- */

.home-cols {
	gap: 2.5rem;
}

.site-sidebar > * + * {
	margin-top: 1.5rem;
}

@media (min-width: 782px) {
	.site-sidebar .ad-slot--mpu:last-child {
		position: sticky;
		top: 1.5rem;
	}
}

.sidebar-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fm-radius);
	padding: 1.25rem;
}

/* Section rule sits under the title, masthead-style, rather than as a coloured
   tab down its left edge: the accent rail on a rounded card is one of the
   stock tells of generated UI, and a hairline reads as editorial next to the
   serif. */
.sidebar-card__title {
	font-size: 1.05rem;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sidebar-newsletter {
	border-color: transparent;
}

.sidebar-newsletter .sidebar-card__title {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.sidebar-newsletter p {
	color: var(--wp--preset--color--muted-light);
}

/* Explore topics */

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

.explore__list li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.explore__list li:first-child {
	border-top: 0;
}

.explore__list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	font-weight: 500;
}

.explore__list a:hover .explore__name {
	color: var(--wp--preset--color--brand);
}

.explore__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--wp--preset--color--brand);
}

.explore__dot--finance      { background: var(--wp--preset--color--green); }
.explore__dot--operations   { background: var(--wp--preset--color--cyan); }
.explore__dot--marketing    { background: var(--wp--preset--color--violet); }
.explore__dot--case-studies { background: var(--wp--preset--color--amber); }
.explore__dot--news         { background: var(--wp--preset--color--muted); }

/* LinkedIn card */

.sidebar-linkedin {
	border-color: transparent;
}

.sidebar-linkedin__kicker {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-bright);
}

.sidebar-linkedin .sidebar-card__title {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.sidebar-linkedin p {
	color: var(--wp--preset--color--muted-light);
}

/* Most read */

.most-read ul {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mr;
}

.most-read li {
	counter-increment: mr;
	display: grid;
	grid-template-columns: 1.7rem 1fr;
	gap: 0.6rem;
	padding: 0.65rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	align-items: start;
}

.most-read li:first-child {
	border-top: 0;
	padding-top: 0;
}

.most-read li::before {
	content: counter(mr, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--brand);
	line-height: 1.5;
}

.most-read__title {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.35;
}

.most-read__title a {
	color: inherit;
	text-decoration: none;
}

.most-read__title a:hover {
	color: var(--wp--preset--color--brand);
}

/* ---------- Article ---------- */

.article-header .wp-block-post-title {
	letter-spacing: -0.025em;
}

/* Standfirst: the deck between headline and body. Sets up the piece, gives the
   eye somewhere to land before the article proper, and is the same text the
   search snippet uses, so it earns its place twice. */
/* No measure cap here. A 46ch limit on 21.6px type worked out around 590px
   against a 700px column, so the standfirst wrapped short and sat visibly
   narrower than the meta row beneath it, which read as a mistake rather than as
   a deliberate measure. It is three lines at most; it can run the full column
   with everything else. */
.article-standfirst {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	margin: 0.9rem 0 0;
}

/* The lead picture sits between the text column and the wide slot: enough
   wider than the article to read as a lead rather than as an inline figure,
   not so wide that the column looks like a ribbon underneath it. */
.article-lead {
	max-width: 900px;
	margin-inline: auto;
}

.article-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	gap: 0.6rem 1rem;
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* No separator glyph: the flex gap already spaces the three meta items, and a
   dot before only one of them reads as an inconsistency rather than a system. */

/* ---------- Breadcrumbs (Yoast block) ---------- */

.article-breadcrumbs,
.yoast-breadcrumbs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1rem;
}

.article-breadcrumbs a,
.yoast-breadcrumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.article-breadcrumbs a:hover,
.yoast-breadcrumbs a:hover {
	color: var(--wp--preset--color--brand);
}

/* ---------- Archive description ---------- */

.archive-description {
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
	margin-top: 0.5rem;
}

/* ---------- 404 ---------- */

.error-code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	letter-spacing: 0.3em;
	color: var(--wp--preset--color--brand);
	margin-bottom: 0.25rem;
}

.error-sub {
	color: var(--wp--preset--color--muted);
}

.error-search {
	margin-top: 1.5rem;
}

.error-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 0.6em 0.9em;
}

.error-search .wp-block-search__button {
	background: var(--wp--preset--color--brand);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.6em 1.1em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Pagination ---------- */

.wp-block-query-pagination {
	margin-top: 2.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

/* ---------- CTA band ---------- */

.cta-band {
	position: relative;
	overflow: hidden;
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: auto auto -60% -10%;
	width: 50%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent 70%);
	pointer-events: none;
}

.cta-band .wp-block-button__link {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	border-radius: 8px;
}

/* ---------- Cookie consent banner ---------- */

.consent-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9999;
	display: none;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-top: 2px solid var(--wp--preset--color--brand);
	padding: 0.9rem 1.25rem;
	font-size: 0.88rem;
	box-shadow: 0 -8px 30px rgba(10, 12, 22, 0.35);
}

.consent-banner p {
	margin: 0;
	max-width: 60ch;
}

.consent-banner a {
	color: var(--wp--preset--color--brand-bright);
}

.consent-banner__actions {
	display: flex;
	gap: 0.6rem;
	flex-shrink: 0;
}

.consent-banner__accept,
.consent-banner__decline {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.88rem;
	font-weight: 600;
	border-radius: 8px;
	padding: 0.5em 1.1em;
	min-height: 44px;
	cursor: pointer;
	transition: transform 160ms ease-out, background-color 160ms ease,
		border-color 160ms ease, color 160ms ease;
}

.consent-banner__accept:active,
.consent-banner__decline:active {
	transform: scale(0.97);
}

.consent-banner__accept {
	background: var(--wp--preset--color--brand);
	color: #fff;
	border: 1px solid var(--wp--preset--color--brand);
}

.consent-banner__accept:hover {
	background: var(--wp--preset--color--brand-bright);
	border-color: var(--wp--preset--color--brand-bright);
}

.consent-banner__decline {
	background: transparent;
	color: var(--wp--preset--color--muted-light);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.consent-banner__decline:hover {
	color: #fff;
	border-color: #fff;
}

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

.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted-light);
}

.site-footer a {
	color: inherit;
}

/* ==================================================================
   Byline and author
   ================================================================== */

.article-byline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.article-byline__avatar,
.author-card__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
}

.article-byline__avatar {
	width: 26px;
	height: 26px;
	font-size: 0.6rem;
}

/* No rule under the name. The byline sits in a row of small-caps meta, where an
   underline reads as a defect rather than as a link; weight and the hover
   colour carry it instead. */

.article-byline__text a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.article-byline__text a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* The author card carries the whole trust load of the byline, so it is a panel
   rather than a line of text: portrait, name, what they do, and the routes to
   go and check them out. */

.author-card {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fm-radius);
	background: var(--wp--preset--color--base);
}

.author-card--archive {
	padding: 1.6rem;
	background: var(--wp--preset--color--surface);
}

.author-card__avatar {
	width: 76px;
	height: 76px;
	font-size: 1.4rem;
}

.author-card--archive .author-card__avatar {
	width: 104px;
	height: 104px;
	font-size: 1.9rem;
}

.author-card__body {
	min-width: 0;
}

.author-card__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
}

.author-card__name {
	margin: 0.25rem 0 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.author-card--archive .author-card__name {
	font-size: clamp(1.6rem, 4vw, 2.1rem);
}

.author-card__name a {
	color: inherit;
	text-decoration: none;
}

.author-card__name a:hover {
	color: var(--wp--preset--color--brand);
}

.author-card__bio {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.author-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.85rem;
}

.author-card__links a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.author-card__links a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.author-card__links span {
	color: var(--wp--preset--color--muted-light);
}

@media (max-width: 600px) {
	.author-card {
		flex-direction: column;
		gap: 0.9rem;
	}
}

/* ==================================================================
   Article footer: end bar, author, read next, similar, signup
   ================================================================== */

.article-footer {
	display: flex;
	flex-direction: column;
	gap: 2.6rem;
	margin-top: 2.6rem;
}

/* End bar: what the piece is filed under on the left, share on the right. */

.article-endbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.article-endbar__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.article-endbar__label {
	margin-right: 0.15rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
}

.article-term {
	display: inline-block;
	padding: 0.24rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 0.76rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.article-term:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

/* The category is the one term worth colouring: it is the section the reader
   is in, and the colour matches the pill at the top of the article. */

.article-term--cat {
	--cat-color: var(--wp--preset--color--brand);
	color: var(--cat-color);
	border-color: color-mix(in srgb, var(--cat-color) 35%, var(--wp--preset--color--line));
	font-weight: 600;
}

.article-term--cat:hover {
	color: var(--wp--preset--color--base);
	background: var(--cat-color);
	border-color: var(--cat-color);
}

.article-term--cat.category-finance {
	--cat-color: var(--wp--preset--color--green);
}

.article-term--cat.category-operations {
	--cat-color: var(--wp--preset--color--cyan);
}

.article-term--cat.category-marketing {
	--cat-color: var(--wp--preset--color--violet);
}

.article-term--cat.category-case-studies {
	--cat-color: var(--wp--preset--color--amber);
}

.article-term--cat.category-news {
	--cat-color: var(--wp--preset--color--red);
}

.article-share {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.article-share__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
}

.article-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-share__btn {
	display: grid;
	place-items: center;
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.article-share__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.article-share__btn:hover,
.article-share__btn:focus-visible {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.article-share__btn--linkedin:hover {
	background: #0a66c2;
	border-color: #0a66c2;
}

.article-share__btn--whatsapp:hover {
	background: #1da851;
	border-color: #1da851;
}

.article-share__copied {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.65rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}

.article-share__btn.is-copied .article-share__copied {
	opacity: 1;
}

/* Section headings in the footer, with the route to the category hub sitting
   on the same baseline. */

.article-next__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.article-next__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.article-similar .article-next__title {
	margin-bottom: 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.article-next__more {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	white-space: nowrap;
}

.article-next__more:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Three across. Editorial tiles, matching the homepage grid: picture, kicker,
   headline, date, and nothing else competing. */

.related-rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 620px) {
	.related-rail {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Two siblings share the full width rather than leaving a visible hole
	   where a third should be. A lone sibling is rendered as a strip instead,
	   in inc/article-footer.php. */
	.related-rail--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.related-card {
	--cat-color: var(--wp--preset--color--brand);
	min-width: 0;
}

.related-card.category-finance {
	--cat-color: var(--wp--preset--color--green);
}

.related-card.category-operations {
	--cat-color: var(--wp--preset--color--cyan);
}

.related-card.category-marketing {
	--cat-color: var(--wp--preset--color--violet);
}

.related-card.category-case-studies {
	--cat-color: var(--wp--preset--color--amber);
}

.related-card.category-news {
	--cat-color: var(--wp--preset--color--red);
}

.related-card__link {
	display: block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.related-card__link:hover {
	text-decoration: none;
}

/* The ratio lives on the wrapper, not the image.

   WordPress prints width and height attributes on the image tag, so a picture
   that loses its aspect-ratio declaration for any reason falls back to its
   intrinsic height and grows to several hundred pixels tall in a 190px column.
   Fixing the box and filling it absolutely means the picture cannot drag the
   layout around whatever happens. */

.related-card__media,
.related-strip__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color) 20%, var(--wp--preset--color--surface)), var(--wp--preset--color--surface));
}

.related-card__media img,
.related-strip__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	.related-card__link:hover .related-card__media img,
	.related-strip:hover .related-strip__media img {
		transform: scale(1.03);
	}
}

.related-card__body {
	display: block;
	padding-top: 0.7rem;
}

.related-card__cat,
.related-strip__cat {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cat-color);
}

.related-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.related-card__link:hover .related-card__title {
	color: var(--wp--preset--color--brand);
}

.related-card__date {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted-light);
}

/* The single similar piece: a strip, not a lone card. One card in the same
   shape as the rail above reads as a row that failed to fill. */

.related-strip {
	--cat-color: var(--wp--preset--color--brand);
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fm-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color 0.15s;
}

.related-strip:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, var(--wp--preset--color--line));
	text-decoration: none;
}

@media (min-width: 560px) {
	.related-strip {
		grid-template-columns: 190px 1fr;
		align-items: center;
		gap: 1.2rem;
	}
}

.related-strip.category-finance {
	--cat-color: var(--wp--preset--color--green);
}

.related-strip.category-operations {
	--cat-color: var(--wp--preset--color--cyan);
}

.related-strip.category-marketing {
	--cat-color: var(--wp--preset--color--violet);
}

.related-strip.category-case-studies {
	--cat-color: var(--wp--preset--color--amber);
}

.related-strip.category-news {
	--cat-color: var(--wp--preset--color--red);
}

.related-strip__body {
	display: block;
	min-width: 0;
}

.related-strip__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.related-strip:hover .related-strip__title {
	color: var(--wp--preset--color--brand);
}

.related-strip__excerpt {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.article-signup {
	padding: 1.6rem;
	border-radius: var(--fm-radius);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.article-signup__title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
}

.article-signup__text {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted-light);
}
/* ==================================================================
   Newsletter form
   ================================================================== */

.nl-form {
	margin: 0;
}

.nl-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.nl-form__row {
		flex-direction: row;
	}
}

.nl-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.95rem;
}

.nl-form__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}

.nl-form__button {
	flex: 0 0 auto;
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s;
}

.nl-form__button:hover:not(:disabled) {
	background: var(--wp--preset--color--brand-bright);
}

.nl-form__button:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Honeypot. Positioned off-screen rather than display:none, because some bots
   skip fields that are not rendered at all. */

.nl-form__hp,
.enq-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-form__note {
	margin: 0.55rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.nl-form__msg {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	font-weight: 500;
}

.nl-form__msg:empty {
	display: none;
}

.nl-form.is-done .nl-form__msg {
	color: var(--wp--preset--color--green);
}

.nl-form.is-error .nl-form__msg {
	color: var(--wp--preset--color--red);
}

/* On dark grounds the supporting text has to lift off the background. */

.article-signup .nl-form__note,
.cta-band .nl-form__note {
	color: var(--wp--preset--color--muted-light);
}

.cta-band .nl-form {
	max-width: 520px;
	margin-inline: auto;
}

.cta-band .nl-form__note,
.cta-band .nl-form__msg {
	text-align: center;
}

.cta-band .nl-form__button {
	background: var(--wp--preset--color--contrast);
}

.cta-band .nl-form__button:hover:not(:disabled) {
	background: #000;
}

.cta-band .nl-form.is-done .nl-form__msg,
.article-signup .nl-form.is-done .nl-form__msg {
	color: #6ee7b7;
}

.cta-band .nl-form.is-error .nl-form__msg,
.article-signup .nl-form.is-error .nl-form__msg {
	color: #fca5a5;
}

/* MPU house ad: the slot is 250px tall, so the form has to be compact. */

.house-ad--newsletter {
	gap: 0.35rem;
	text-align: left;
}

.house-ad--newsletter .nl-form {
	margin-top: 0.5rem;
}

.house-ad--newsletter .nl-form__row {
	flex-direction: column;
}

.house-ad--newsletter .nl-form__note {
	font-size: 0.68rem;
}

/* ==================================================================
   Enquiry form
   ================================================================== */

.enq-form {
	margin: 1.5rem 0 0;
}

.enq-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.enq-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.enq-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.enq-form__field--wide {
	margin-top: 1rem;
}

.enq-form__field label {
	font-size: 0.82rem;
	font-weight: 600;
}

.enq-form__opt {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.enq-form__field input,
.enq-form__field select,
.enq-form__field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.95rem;
}

.enq-form__field textarea {
	min-height: 120px;
	resize: vertical;
}

.enq-form__field input:focus-visible,
.enq-form__field select:focus-visible,
.enq-form__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}

.enq-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.2rem;
}

.enq-form__button {
	padding: 0.75rem 1.4rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.enq-form__button:hover:not(:disabled) {
	background: var(--wp--preset--color--brand-bright);
}

.enq-form__button:disabled {
	opacity: 0.7;
	cursor: default;
}

.enq-form__msg {
	font-size: 0.88rem;
	font-weight: 500;
}

.enq-form.is-done .enq-form__msg {
	color: var(--wp--preset--color--green);
}

.enq-form.is-error .enq-form__msg {
	color: var(--wp--preset--color--red);
}

/* ==================================================================
   News treatment

   News was visually indistinguishable from an evergreen guide: same grey
   category pill, same "August 1, 2026" stamp. It now runs red, and anything
   published in the last two days carries a live relative timestamp, which is
   the difference between reading as an archive and reading as a newsroom.
   ================================================================== */

.wp-block-post.category-news,
.ticker__item.category-news {
	--cat-color: var(--wp--preset--color--red);
}

.is-news-date .post-date__live {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	animation: sme-pulse 2.4s ease-in-out infinite;
}

.is-news-date time {
	color: var(--wp--preset--color--red);
	font-weight: 600;
}

@keyframes sme-pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

/* The News section used to run as a pictureless newsroom list. It reads as a
   broken card next to the sections above and below it, especially while the
   news desk is only filling one or two slots, so News now uses the same 16:9
   card as every other section and keeps its identity through the red rule,
   the red heading and the live timestamp. */

.cat-section--news .cat-section__head h2 {
	color: var(--wp--preset--color--red);
}

@media (min-width: 700px) {
	.cat-section--news .post-grid .wp-block-post {
		border-top-color: color-mix(in srgb, var(--wp--preset--color--red) 30%, var(--wp--preset--color--line));
	}
}

/* ==================================================================
   Cogent Multimedia brands carousel

   Ported from MEPCA unchanged so the two sites stay in step. The artwork is
   white, so on a light title it sits in its own dark band.
   ================================================================== */

.cogent-band {
	margin: 2.5rem 0 0;
	padding: 1.6rem 1rem;
	border-radius: var(--fm-radius);
	background: var(--wp--preset--color--contrast);
}

.cogent-wrap {
	padding: 6px 0;
}

.cogent-heading {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-align: center;
	color: #8f8f96;
}

.cogent-carousel {
	position: relative;
	padding: 16px 0;
	overflow: hidden;
	background: transparent;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cogent-track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: cogent-scroll 38s linear infinite;
}

.cogent-carousel:hover .cogent-track {
	animation-play-state: paused;
}

@keyframes cogent-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.cogent-cell {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 210px;
	height: 66px;
	padding: 0 24px;
}

.cogent-cell img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.82;
	transition: opacity 0.2s;
}

.cogent-cell:hover img {
	opacity: 1;
}

@media (max-width: 600px) {
	.cogent-cell {
		width: 160px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cogent-track {
		animation: none;
	}

	.cogent-carousel {
		overflow-x: auto;
	}

	.is-news-date .post-date__live {
		animation: none;
	}
}