/* Press strip: black band, logos knocked out to white, scrolling forever.

   brightness(0) invert(1) is the knock-out trick: brightness(0) flattens every
   pixel to black regardless of its original colour, then invert(1) flips that
   to pure white. It works on any colour logo without needing white versions,
   but it only suits line art - a photograph becomes a white rectangle. */
.press-strip{background:var(--v2-bg);padding:30px 0;overflow:hidden}
.press-strip .ps-kicker{
	display:block;color:rgba(237,241,246,0.55);font-size:11px;letter-spacing:0.14em;
	text-transform:uppercase;margin-bottom:20px}

/* Fade both edges so items enter and leave instead of being chopped off. */
.ps-mask{
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}

/* Two identical runs side by side; shifting the track by exactly -50% lands
   the second run where the first began, so the seam is invisible. */
.ps-track{display:flex;width:max-content;animation:ps-scroll var(--ps-speed,38s) linear infinite}
.ps-run{display:flex;align-items:center;flex:0 0 auto}
.ps-item{display:flex;align-items:center;justify-content:center;gap:11px;padding:0 clamp(26px,5vw,58px)}
@keyframes ps-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.ps-logo{
	height:calc(26px * var(--ps-scale,1));width:auto;max-width:none;object-fit:contain;display:block;
	filter:brightness(0) invert(1);opacity:0.8;transition:opacity .2s}
.ps-item:hover .ps-logo{opacity:1}
.ps-text{
	font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-0.01em;
	color:#fff;opacity:0.8;white-space:nowrap;transition:opacity .2s}
.ps-item:hover .ps-text{opacity:1}

/* Motion is decorative here, so stop it outright rather than slowing it. */
@media (prefers-reduced-motion:reduce){
	.ps-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
	.ps-run[aria-hidden="true"]{display:none}
}

/* Hero mode: the strip IS the page hero. Same height ratios v2-hero uses, with
   the logo run centred where a background image would otherwise be. */
/* Hero mode inherits .v2-hero for the background (photo + wash, or the designed
   gradient fallback), so height and imagery match every other page hero. Only
   the contents differ: a scrolling logo run instead of a headline block. The
   band background is cleared so the hero's own treatment shows through. */
.press-strip.is-hero{
	background:none;display:flex;flex-direction:column;justify-content:center;gap:22px;
	padding:calc(var(--header-h,74px) + 24px) 0 30px}
.press-strip.is-hero .ps-mask,
.press-strip.is-hero .ps-head{position:relative;z-index:2}
.press-strip.is-hero .ps-head{text-align:center}
.press-strip.is-hero .ps-title{
	font-family:var(--f-display);font-weight:700;color:var(--v2-fg);
	font-size:clamp(30px,5.4vw,58px);line-height:1.1;letter-spacing:-0.025em;margin:10px 0 0}
.press-strip.is-hero .ps-title .a{color:var(--v2-accent-soft)}
.press-strip.is-hero .ps-kicker{margin-bottom:0}
.press-strip.is-hero .ps-logo{height:calc(30px * var(--ps-scale,1))}
.press-strip.is-hero .ps-text{font-size:24px}

/* Wordmark with an optional qualifier under it (e.g. the platform a channel
   lives on), so it reads as one entry rather than two logos side by side. */
.ps-words{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.ps-sub{
	font-family:var(--f-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
	color:rgba(255,255,255,0.55);margin-top:5px;white-space:nowrap}
.press-strip.is-hero .ps-sub{font-size:11px}

/* Tint variant: light pills in the same four colours the review cards rotate
   through, on the page background rather than a black band. Used where the
   items are words (topics) instead of outlet logos. */
.press-strip.is-tint{background:none;padding:22px 0}
.press-strip.is-tint .ps-item{padding:0 7px}
.press-strip.is-tint .ps-text{
	display:block;color:var(--ink);opacity:1;font-size:17px;font-weight:600;
	padding:10px 20px;border-radius:999px;border:1px solid rgba(20,39,62,0.06)}
.press-strip.is-tint .ps-item.tint-blue   .ps-text{background:#EAF2FB}
.press-strip.is-tint .ps-item.tint-pink   .ps-text{background:#FBEAF2}
.press-strip.is-tint .ps-item.tint-yellow .ps-text{background:#FBF7EA}
.press-strip.is-tint .ps-item.tint-orange .ps-text{background:#FBEFE5}
/* Logos keep their own colours here; the white knock-out is a dark-band trick. */
.press-strip.is-tint .ps-logo{filter:none;opacity:1}
.press-strip.is-tint .ps-sub{color:var(--muted)}

/* Optional desktop-only size for a single mark. Artwork that balances on a
   phone can read too large once the row has more room, so this overrides the
   base scale from the tablet breakpoint up. */
@media (min-width:768px){
	.ps-logo{height:calc(26px * var(--ps-scale-lg, var(--ps-scale,1)))}
	.press-strip.is-hero .ps-logo{height:calc(30px * var(--ps-scale-lg, var(--ps-scale,1)))}
}

/* Word strip: the same scrolling mechanism the logo strip uses, but the items
   are words, so they are set as type rather than sized as artwork. Sizes step
   through four values by position to give the row rhythm, with a centre dot
   between entries. Colours cycle through the four review tints, which read as
   light-on-dark here (the pill treatment is only for the light variant). */
.press-strip.is-dark:not(.is-hero) .ps-item{padding:0;gap:0}
.press-strip.is-dark:not(.is-hero) .ps-item::after{
	content:"\00B7";margin:0 clamp(15px,2.4vw,32px);
	font-size:24px;line-height:1;color:rgba(237,241,246,0.4)}
.press-strip.is-dark:not(.is-hero) .ps-text{
	font-family:var(--f-display);font-weight:700;letter-spacing:-0.02em;
	line-height:1.1;white-space:nowrap;opacity:1}
.press-strip.is-dark:not(.is-hero) .ps-item:nth-child(4n+1) .ps-text{font-size:clamp(24px,3.9vw,42px);color:#EAF2FB}
.press-strip.is-dark:not(.is-hero) .ps-item:nth-child(4n+2) .ps-text{font-size:clamp(19px,2.7vw,29px);color:#FBF7EA}
.press-strip.is-dark:not(.is-hero) .ps-item:nth-child(4n+3) .ps-text{font-size:clamp(22px,3.5vw,37px);color:#FBEAF2}
.press-strip.is-dark:not(.is-hero) .ps-item:nth-child(4n+4) .ps-text{font-size:clamp(18px,2.4vw,26px);color:#FBEFE5}
/* Logo items keep their own spacing; only word items collapse to type. */
.press-strip.is-dark:not(.is-hero) .ps-item:has(.ps-logo){padding:0 clamp(26px,5vw,58px)}
.press-strip.is-dark:not(.is-hero) .ps-item:has(.ps-logo)::after{content:none}

/* Overlay the word band on the hero, WITHOUT taking it out of flow.

   Absolute positioning was tried twice and clipped both times: .press-strip
   must keep overflow:hidden to clip its moving track, and an out-of-flow box
   with no reliable height slices the type. So the strip stays in normal flow
   and only its ORDER changes.

   DOM inside .hero-strip is: hero, crumbs bar (v2-hero prints it itself), then
   the strip. Flex order puts the strip between the hero and the crumbs, and a
   negative margin lifts it onto the hero's lower edge. Being in flow, its own
   height is whatever the type needs, so nothing gets cut. */
.hero-strip{display:flex;flex-direction:column}
.hero-strip > .v2-hero{order:0}
.hero-strip > .press-strip.is-overlay{
	order:1;position:relative;z-index:3;background:none;
	margin-top:calc(-1 * var(--ps-lift,86px));margin-bottom:0}
.hero-strip > .crumbs-bar{order:2}
@media (max-width:767.98px){
	.hero-strip > .press-strip.is-overlay{--ps-lift:62px}
}


/* An item carrying a sub-label stacks: mark or wordmark on top, qualifier
   under it. Without this the sub sits beside the logo instead of beneath. */
.ps-item.has-sub{flex-direction:column;gap:6px}
.ps-item.has-sub .ps-sub{margin-top:0}

/* Curved variant. The SVG carries its own type, so the flat-row rules do not
   apply. Height matches the viewBox height (240) so one user unit is one pixel
   vertically and the wave is a literal 100px each way; preserveAspectRatio
   "none" scales the axes independently, so any other height would distort it.
   Width is unconstrained: the path runs past both edges by design. */
.press-strip.is-curve .ps-svg{display:block;width:100%;height:90px}
.press-strip.is-curve .ps-curve-text{
	font-family:var(--f-display);font-weight:700;letter-spacing:-0.02em}
.press-strip.is-curve:not(.is-hero){overflow:hidden;padding:0;background:var(--v2-bg)}

/* Curve inside a hero: the SVG sits over the hero background, full bleed, and
   the heading block sits above it. Both need to clear the floating nav. */
/* The ratio class fixes an exact height and .v2-hero clips overflow, which
   would slice a 190px wave once the floating nav is cleared. For the curve the
   ratio becomes a MINIMUM and the section grows to whatever the wave needs. */
/* The nav is .nav-on-dark here, so it is position:absolute and takes no space
   in flow: the hero already starts at the top of the page and the pill floats
   over it at z-index:50. Dropping the top padding therefore lets the wave run
   BEHIND the menu and logo rather than starting below them, and a -50px pull
   takes the same amount off the section's overall height. */
/* A straight baseline needs far less vertical room than the wave did, so the
   hero can go back to honouring its ratio class exactly (h-1-4) instead of
   growing to fit. The negative pull still tucks it behind the floating nav. */
.press-strip.is-hero.is-curve{
	display:flex;flex-direction:column;justify-content:center;gap:8px;
	margin-top:-50px;padding:14px 0 10px}
.press-strip.is-hero.is-curve .ps-svg{position:relative;z-index:2}
.press-strip.is-hero .ps-lede{
	color:var(--v2-fg-dim);font-size:clamp(15px,1.7vw,18px);line-height:1.6;
	max-width:620px;margin:12px auto 0}
.press-strip.is-hero .ps-head{position:relative;z-index:2}

@media (max-width:767.98px){
	.press-strip.is-curve .ps-svg{height:70px}
	.press-strip.is-hero.is-curve{padding-top:calc(var(--header-h,74px) + 10px)}
}

/* Background for the curved hero.

   The shared hero background paints four coloured radial blobs (the theme's
   canal-house palette: brick, sky, water, warm light). That is right behind a
   photo or a headline, but the wave already carries four pastel tints of its
   own, and stacking eight colours made the band muddy. A turquoise overlay was
   tried on top and only made it worse: it landed a shade away from the
   existing water green, so the two fought.

   So the blobs are replaced here, not layered over. A deep near-black base
   with ONE soft navy pool centred where the type runs: enough depth that the
   band is not a flat rectangle, quiet enough that the coloured words are the
   only thing competing for attention. Navy is already in the palette
   (--v2-navy), so this introduces no new hue. */
/* Background tones. Each is a deep pool of one hue under the type, a lighter
   lift top-left, and a two-stop base - same structure throughout, so switching
   tone is one attribute on the block rather than a CSS edit. Every tone keeps
   white nav text above 8:1, which .nav-on-dark (set sitewide) requires. */
.press-strip.is-hero.tone-slate .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(58,84,116,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(88,140,200,0.24), transparent 68%),
		linear-gradient(180deg, #24344A 0%, #1B2838 100%)}
.press-strip.is-hero.tone-wine .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(120,44,60,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(166,19,25,0.24), transparent 68%),
		linear-gradient(180deg, #3B2430 0%, #2A1922 100%)}
.press-strip.is-hero.tone-orange .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(196,98,26,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(232,140,40,0.24), transparent 68%),
		linear-gradient(180deg, #6B3A16 0%, #4A270C 100%)}
.press-strip.is-hero.tone-green .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(40,110,72,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(80,170,110,0.24), transparent 68%),
		linear-gradient(180deg, #20452F 0%, #15301F 100%)}
.press-strip.is-hero.tone-bordo .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(166,19,25,0.42), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(214,70,78,0.2), transparent 68%),
		linear-gradient(180deg, #3A1C22 0%, #26121A 100%)}
.press-strip.is-hero.tone-pink .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(150,52,96,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(206,90,140,0.24), transparent 68%),
		linear-gradient(180deg, #55273D 0%, #3B1A2A 100%)}

/* The shared wash is tuned for photos; here it only greys the base. */
.press-strip.is-hero[class*="tone-"] .wash{
	background:linear-gradient(180deg, rgba(24,12,16,0.16) 0%, rgba(24,12,16,0) 50%, rgba(24,12,16,0.3) 100%)}

/* How light this can go is capped by the header: .nav-on-dark is set sitewide
   in parts/header.html and paints the wordmark #fff over a translucent pill.
   A genuinely light hero would leave the logo and menu unreadable, so this is
   a lifted slate-blue rather than a pale background. */


/* Bare hero: no strip, just enough band for the floating nav.

   The nav is .nav-on-dark, so it is position:absolute and contributes no
   height. Something must stand behind it or the menu lands on the content
   below. This is that: the ratio class is dropped in favour of exactly the
   nav's height plus breathing room. */
.press-strip.is-hero.is-bare{
	height:auto;min-height:calc(var(--header-h,74px) + 30px);max-height:none;
	margin-top:0;padding:0}

.press-strip.is-hero.tone-turquoise .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(22,96,98,0.6), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(58,158,158,0.22), transparent 68%),
		linear-gradient(180deg, #17423F 0%, #0E2C2C 100%)}

/* Blue, built on the theme's own accent (--v2-accent #2F6DB5) rather than a
   new hue, so it reads as the site's blue rather than a generic one. Deeper
   and more saturated than tone-slate, which is closer to a blue-grey. */
.press-strip.is-hero.tone-blue .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(47,109,181,0.55), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(120,175,235,0.22), transparent 68%),
		linear-gradient(180deg, #1B3A63 0%, #122747 100%)}

/* Flat light band: the same --gray the "3rd Party Opinions" section uses on the
   front page (#ECEEF2). No gradient and no wash, so it is one solid colour. */
.press-strip.is-hero.tone-light .photo.default-gradient{background:var(--gray)}
.press-strip.is-hero.tone-light .wash{background:none}

/* Flat light blue: the tint the review cards use on the front page (#EAF2FB). */
.press-strip.is-hero.tone-lightblue .photo.default-gradient{background:#EAF2FB}
.press-strip.is-hero.tone-lightblue .wash{background:none}

/* A darker tone of the same colour the "3rd Party Opinions" section uses.
   band-gray is #ECEEF2 = HSL(220, 19%, 94%); this is the identical hue and
   saturation taken down to 24% lightness, so it reads as the same grey family
   rather than a different colour. Flat, like that section. */
.press-strip.is-hero.tone-graydark .photo.default-gradient{background:#323949}
.press-strip.is-hero.tone-graydark .wash{background:none}

/* Two-part hero: the same #323949 as the blog hero across the top, where the
   logo and menu sit, then flat black from there down so the logo strip runs on
   black. The stop is a hard edge at exactly the nav's height, so the split
   lines up with the floating pill rather than landing at an arbitrary point. */
.press-strip.is-hero.tone-splitgray .photo.default-gradient{
	background:linear-gradient(180deg,
		#323949 0,
		#323949 calc(var(--header-h,74px) + 22px),
		var(--v2-bg) calc(var(--header-h,74px) + 22px),
		var(--v2-bg) 100%)}
.press-strip.is-hero.tone-splitgray .wash{background:none}

/* Flat black: the strip's original look, before any tone was introduced. No
   radial pools and no wash, just the theme's dark base, so the knocked-out
   white logos sit on solid black. */
.press-strip.is-hero.tone-black .photo.default-gradient{background:var(--v2-bg)}
.press-strip.is-hero.tone-black .wash{background:none}

/* Neutral dark tone: no hue, for heroes that should recede entirely. */
.press-strip.is-hero.tone-dark .photo.default-gradient{
	background:
		radial-gradient(120% 150% at 50% 58%, rgba(38,46,58,0.7), transparent 72%),
		radial-gradient(95% 130% at 14% 14%, rgba(90,102,120,0.14), transparent 68%),
		linear-gradient(180deg, #1A1E24 0%, #0F1319 100%)}