/*
Theme Name: iGaming Platforms Providers
Theme URI: https://seo.casino/
Author: SEO.Casino
Author URI: https://seo.casino/
Description: Dark premium WordPress block theme for a B2B iGaming platform provider review directory. Concept "The Rack": graphite surfaces, hairline structure, a monospace data layer and three strictly scoped accents (aqua for technical signal, gold for rank, coral for risk).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igaming-providers
Tags: block-theme, full-site-editing, dark, one-column, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   0. LOCAL VARIABLES AND ICON TOKENS
   Icons are hand-drawn 24x24 stroke glyphs applied through mask-image, so
   markup stays free of decorative SVG and colours follow the section accent.
   ========================================================================== */

:root {
	--igp-hairline: var(--wp--custom--hairline, rgba(255, 255, 255, 0.07));
	--igp-hairline-strong: var(--wp--custom--hairline-strong, rgba(255, 255, 255, 0.14));
	--igp-ease: var(--wp--custom--easing, cubic-bezier(0.16, 1, 0.3, 1));
	--igp-radius: var(--wp--custom--radius--card, 8px);
	--igp-accent: var(--wp--preset--color--aqua, #00e0b8);
	--igp-header-h: 68px;

	/* Icon glyphs: 24x24, stroke 1.75, round joins. Accent colour is baked in so a
	   single pseudo-element can carry the tinted plate and the glyph together. */
	--igp-ic-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.5 3.5h-3A1.5 1.5 0 0 0 3 5.2C3 13.4 10.6 21 18.8 21a1.5 1.5 0 0 0 1.7-1.5v-3a1.2 1.2 0 0 0-.95-1.18l-3.1-.62a1.2 1.2 0 0 0-1.2.5l-1.05 1.5a13.5 13.5 0 0 1-5.4-5.4l1.5-1.05a1.2 1.2 0 0 0 .5-1.2l-.62-3.1A1.2 1.2 0 0 0 7.5 3.5Z'/></svg>");
	--igp-ic-database: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5.5' rx='7.5' ry='3'/><path d='M4.5 5.5v13c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-13'/><path d='M4.5 12c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3'/></svg>");
	--igp-ic-gift: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB627' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 9.5h17V21h-17V9.5Z'/><path d='M12 9.5V21'/><path d='M2.5 9.5h19'/><path d='M12 9.5C10 9.5 6.5 9 6.5 6.2 6.5 4.4 8 3.5 9.2 3.5c2 0 2.8 3 2.8 6Z'/><path d='M12 9.5c2 0 5.5-.5 5.5-3.3 0-1.8-1.5-2.7-2.7-2.7-2 0-2.8 3-2.8 6Z'/></svg>");
	--igp-ic-card: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='5' width='19' height='14' rx='2.5'/><path d='M2.5 10h19'/><path d='M6 14.5h4'/></svg>");
	--igp-ic-scan: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5C6E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8V5.5A2.5 2.5 0 0 1 5.5 3H8'/><path d='M16 3h2.5A2.5 2.5 0 0 1 21 5.5V8'/><path d='M21 16v2.5A2.5 2.5 0 0 1 18.5 21H16'/><path d='M8 21H5.5A2.5 2.5 0 0 1 3 18.5V16'/><path d='M3 12h18'/></svg>");
	--igp-ic-scale: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB627' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><path d='M7 21h10'/><path d='M4 7h16'/><path d='M4 7 1.8 13h4.4L4 7Z'/><path d='M20 7l-2.2 6h4.4L20 7Z'/></svg>");
	--igp-ic-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5 4.5 5.4v6.1c0 4.7 3.1 8.6 7.5 10 4.4-1.4 7.5-5.3 7.5-10V5.4L12 2.5Z'/><path d='m8.8 11.8 2.3 2.3 4.1-4.4'/></svg>");
	--igp-ic-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='16.5' r='4'/><path d='m10.3 13.7 8.2-8.2'/><path d='m15.5 8.5 2.5 2.5 2.5-2.5-2.5-2.5'/></svg>");
	--igp-ic-tag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB627' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11.6 2.8H20a1.2 1.2 0 0 1 1.2 1.2v8.4a2 2 0 0 1-.6 1.4l-7 7a2 2 0 0 1-2.8 0l-7-7a2 2 0 0 1 0-2.8l7-7a2 2 0 0 1 1.4-.6Z'/><circle cx='16.6' cy='7.4' r='1.6'/></svg>");
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--igp-header-h) + 24px);
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	/* No overflow-x here on purpose: it would turn body into a scroll
	   container and break position:sticky on the header. Overflow is
	   contained on the individual sections that need it instead. */
}

/* Headings use Archivo's width axis, set wider than the body cut. Size alone
   was not separating them from body copy; the wider shapes are what make a
   heading look like a heading rather than bold text. */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	font-variation-settings: "wght" 700, "wdth" 112;
	font-stretch: 112%;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Inline keyword highlights inside headings. The editor's text-colour format
   writes a <mark>, which browsers give a yellow background by default. */
mark.has-inline-color {
	background-color: transparent;
	color: inherit;
}

::selection {
	background: rgba(0, 224, 184, 0.28);
	color: #fff;
}

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--aqua);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Utility: monospace data layer. Applied only where the value is a measurement. */
.igp-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

/* Section rhythm. Single owner of vertical padding, modifiers raise specificity. */
.igp-section {
	padding-block: var(--wp--preset--spacing--70);
	position: relative;
}

.igp-section.igp-section--hero {
	padding-block: calc(var(--igp-header-h) + var(--wp--preset--spacing--60)) var(--wp--preset--spacing--70);
}

.igp-section.igp-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.igp-section.igp-section--surface {
	background: linear-gradient(180deg, rgba(13, 19, 28, 0) 0%, rgba(13, 19, 28, 0.75) 18%, rgba(13, 19, 28, 0.75) 82%, rgba(13, 19, 28, 0) 100%);
}

/* Shared lead paragraph under a heading. */
/* Lead paragraphs share the layout's content width. Setting a max-width here
   would outrank the constrained-layout rule and give the page two measures. */
.igp-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */

.igp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: var(--igp-header-h);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.2s linear, border-color 0.2s linear, backdrop-filter 0.2s linear;
}

.igp-header.is-stuck {
	background: rgba(7, 10, 15, 0.82);
	border-bottom-color: var(--igp-hairline);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

/* Three slots on one row: logo pinned left, navigation centred on the page
   axis, call-to-action pinned right. A 1fr auto 1fr grid centres the nav
   against the page rather than against the space left over by the logo. */
.igp-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "logo nav cta";
	align-items: center;
	gap: 1.5rem;
	padding-block: 1rem;
}

.igp-header__row > * {
	margin-block: 0;
}

.igp-header__row > .igp-logo {
	grid-area: logo;
	justify-self: start;
}

.igp-header__nav {
	grid-area: nav;
	justify-self: center;
}

.igp-header__cta {
	grid-area: cta;
	justify-self: end;
}

.igp-header .wp-block-navigation__container {
	gap: clamp(1rem, 2vw, 2rem);
}

.igp-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--text-body);
	transition: color 0.18s linear;
}

.igp-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: var(--wp--preset--color--aqua);
	transition: right 0.24s var(--igp-ease);
}

.igp-header .wp-block-navigation-item__content:hover,
.igp-header .current-menu-item > .wp-block-navigation-item__content,
.igp-header .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
}

.igp-header .wp-block-navigation-item__content:hover::after,
.igp-header .wp-block-navigation-item.is-active > .wp-block-navigation-item__content::after {
	right: 0;
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

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

.igp-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -30%;
	height: 120%;
	background: radial-gradient(58% 46% at 22% 8%, rgba(0, 224, 184, 0.16) 0%, rgba(7, 10, 15, 0) 68%);
	pointer-events: none;
	z-index: 0;
}

.igp-hero > * {
	position: relative;
	z-index: 1;
}

.igp-hero__grid {
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.igp-hero__figure {
	position: relative;
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.igp-hero__figure svg {
	display: block;
	width: 100%;
	height: auto;
}

/* If a photograph is dropped in later, this is the treatment it gets:
   desaturated, darkened, then washed with the aqua duotone below. Excluded
   from the podium, whose logos must keep their own colour. */
.igp-hero__figure:not(.igp-podium) img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: saturate(0.35) contrast(1.08) brightness(0.78);
}

/* Hero podium: the same medal language as the rack, compact enough to sit
   beside the H1. */
.igp-podium {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(1rem, 2vw, 1.5rem);
}

.igp-podium__item {
	display: grid;
	grid-template-columns: 42px 44px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.9rem;
	padding: 0.9rem 1.05rem;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--igp-medal) 42%, transparent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--igp-medal) 7%, transparent) 0%,
		var(--wp--preset--color--surface) 65%);
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s linear, transform 0.2s var(--igp-ease);
}

.igp-podium__item > * {
	margin-block: 0;
}

.igp-podium__item:hover {
	border-color: color-mix(in srgb, var(--igp-medal) 80%, transparent);
	transform: translateX(2px);
}

.igp-podium__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 38%,
		color-mix(in srgb, var(--igp-medal) 16%, transparent) 50%, transparent 62%);
	transform: translateX(-100%);
	animation: igp-sheen 6s var(--igp-ease) var(--igp-sheen-delay, 1.5s) infinite;
	pointer-events: none;
}

.igp-podium__item--gold {
	--igp-medal: var(--wp--preset--color--gold);
	--igp-sheen-delay: 1.5s;
	width: 100%;
}

.igp-podium__item--silver {
	--igp-medal: var(--wp--preset--color--silver);
	--igp-sheen-delay: 2.3s;
	width: 94%;
}

.igp-podium__item--bronze {
	--igp-medal: var(--wp--preset--color--bronze);
	--igp-sheen-delay: 3.1s;
	width: 88%;
}

.igp-podium__rank {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--igp-medal);
	padding-right: 0.9rem;
	border-right: 1px solid var(--igp-hairline);
	position: relative;
}

.igp-podium__rank::after {
	content: "";
	position: absolute;
	top: 0.1em;
	right: 0.4rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--igp-medal);
	box-shadow: 0 0 7px color-mix(in srgb, var(--igp-medal) 90%, transparent);
}

.igp-podium__logo {
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--igp-medal) 35%, transparent);
	background: var(--wp--preset--color--surface-raised);
}

.igp-podium__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.igp-podium__body > * {
	margin-block: 0;
}

.igp-podium__name {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "wght" 700, "wdth" 112;
	font-size: 1.1875rem;
	line-height: 1.2;
	color: var(--wp--preset--color--text-primary);
}

.igp-podium__tags {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-top: 0.3rem;
}

.igp-podium__score-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	color: var(--igp-medal);
	white-space: nowrap;
}

.igp-podium__score-value em {
	font-style: normal;
	font-size: 0.625rem;
	color: var(--wp--preset--color--text-muted);
	margin-left: 0.1em;
}

.igp-podium__all {
	margin: 0.4rem 0 0;
	width: 100%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.igp-podium__all a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition: color 0.16s linear;
}

.igp-podium__all a:hover {
	color: var(--wp--preset--color--aqua);
	text-decoration: none;
}

/* Hero meta strip: counts drawn from the ranking itself, nothing invented. */
.igp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.igp-hero__meta span {
	position: relative;
	padding-left: 1rem;
}

.igp-hero__meta span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--aqua);
	opacity: 0.7;
}

/* Header call-to-action carries a phone glyph so it reads as contact, not
   as another navigation item. */
.igp-btn-call .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--igp-ic-phone) center / contain no-repeat;
	mask: var(--igp-ic-phone) center / contain no-repeat;
}

/* SVG text layer: technical labels only, never marketing copy. */
.igp-svg-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	fill: var(--wp--preset--color--text-muted);
}

.igp-svg-label--strong {
	font-size: 11px;
	fill: var(--wp--preset--color--text-primary);
}

.igp-svg-label--aqua {
	fill: var(--wp--preset--color--aqua);
}

.igp-svg-label--coral {
	fill: var(--wp--preset--color--coral);
}

/* Aqua duotone wash plus a 48px technical grid, applied only when the hero
   holds a photograph. The inline SVG is already drawn in palette. */
.igp-hero__figure:not(.igp-podium):has(img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(160deg, rgba(0, 224, 184, 0.3) 0%, rgba(46, 123, 255, 0.16) 45%, rgba(7, 10, 15, 0.85) 100%),
		linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 100% 100%, 48px 48px, 48px 48px;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.igp-hero__buttons {
	margin-top: 2.25rem;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
	transition: color 0.2s linear, border-color 0.2s linear, transform 0.2s var(--igp-ease);
}

.wp-block-button__link::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg) translateX(0);
	transition: transform 0.2s var(--igp-ease);
	flex: none;
}

.wp-block-button__link:hover::after {
	transform: rotate(45deg) translateX(3px);
}

/* Ghost variant */
.is-style-igp-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--igp-hairline-strong);
}

.is-style-igp-ghost > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua);
}

/* Gold outline variant, reserved for the operator side of the dual CTA. */
.is-style-igp-gold > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--gold);
	border: 1px solid rgba(255, 182, 39, 0.45);
}

.is-style-igp-gold > .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   5. ICON PLATE (criteria cards)
   ========================================================================== */

/* One pseudo-element only: tinted plate as background-color, glyph as
   background-image. No absolute positioning, so padding changes cannot break it. */
.igp-ico::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	margin-bottom: 1.1rem;
	background-color: color-mix(in srgb, var(--igp-accent) 12%, transparent);
	background-image: var(--igp-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	flex: none;
}



/* ==========================================================================
   6. THE RACK (signature: ranked providers as stacked rack units)
   ========================================================================== */

.igp-rack {
	gap: 8px;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.igp-unit {
	--igp-row-accent: var(--wp--preset--color--aqua);
	display: grid;
	grid-template-columns: 72px 56px minmax(0, 1fr) 108px auto;
	grid-template-areas: "rank logo body score cta";
	align-items: center;
	column-gap: clamp(1rem, 2vw, 1.75rem);
	padding: 1.25rem clamp(1.1rem, 2vw, 1.75rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s linear, background-color 0.2s linear, transform 0.2s var(--igp-ease);
}

.igp-unit > * {
	margin-block: 0;
}

.igp-unit:hover {
	background: var(--wp--preset--color--surface-raised);
	border-color: rgba(0, 224, 184, 0.4);
	transform: translateY(-1px);
}

.igp-unit__rank {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--text-body);
	position: relative;
	padding-right: 1.25rem;
	border-right: 1px solid var(--igp-hairline);
	transition: color 0.2s linear;
}

/* Status LED, the only decorative dot on the page. */
.igp-unit__rank::after {
	content: "";
	position: absolute;
	top: 0.15em;
	right: 0.55rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--aqua);
	box-shadow: 0 0 8px rgba(0, 224, 184, 0.9);
}

.igp-unit__logo {
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--igp-hairline);
	transition: border-color 0.2s linear, background-color 0.2s linear;
}

.igp-unit__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.igp-unit__rank { grid-area: rank; }
.igp-unit__logo { grid-area: logo; }
.igp-unit__body { grid-area: body; }
.igp-unit__score { grid-area: score; }
.igp-unit__cta { grid-area: cta; }

.igp-unit__body > * {
	margin-block: 0;
}

/* Score reads in the row's own accent: medal for the podium places, aqua for
   the rest. One property drives numeral, bar and hover state together. */
.igp-unit__score {
	display: grid;
	gap: 0.45rem;
	justify-items: end;
}

.igp-unit__score-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--igp-row-accent);
}

.igp-unit__score-value em {
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-muted);
	margin-left: 0.15em;
}

.igp-unit__score-bar {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--igp-hairline-strong);
	overflow: hidden;
}

.igp-unit__score-bar i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--igp-row-accent);
}

.igp-unit__score-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.igp-unit__cta .wp-block-button__link {
	padding: 0.6rem 1rem;
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Spec pills, used on rack rows and on provider pages. */
.igp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.7rem;
}

.igp-tags span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	border: 1px solid var(--igp-hairline);
	border-radius: 4px;
	padding: 0.3rem 0.5rem;
	line-height: 1;
}

.igp-unit:hover .igp-tags span {
	border-color: color-mix(in srgb, var(--igp-row-accent) 35%, transparent);
}

.igp-unit__name {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.igp-unit__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-body);
	margin-top: 0.3rem;
	line-height: 1.55;
}


.igp-unit.igp-unit--medal {
	padding-block: 1.6rem;
	border-color: color-mix(in srgb, var(--igp-medal) 42%, transparent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--igp-medal) 6%, transparent) 0%,
		var(--wp--preset--color--surface) 60%);
}

.igp-unit.igp-unit--medal:hover {
	border-color: color-mix(in srgb, var(--igp-medal) 78%, transparent);
}

.igp-unit--medal .igp-unit__rank {
	color: var(--igp-medal);
}

.igp-unit--medal .igp-unit__rank::after {
	background: var(--igp-medal);
	box-shadow: 0 0 8px color-mix(in srgb, var(--igp-medal) 90%, transparent);
}

.igp-unit--medal .igp-unit__logo {
	border-color: color-mix(in srgb, var(--igp-medal) 35%, transparent);
	background: color-mix(in srgb, var(--igp-medal) 8%, transparent);
}


.igp-unit--medal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 38%,
		color-mix(in srgb, var(--igp-medal) 15%, transparent) 50%, transparent 62%);
	transform: translateX(-100%);
	animation: igp-sheen 6s var(--igp-ease) var(--igp-sheen-delay, 1.5s) infinite;
	pointer-events: none;
}

.igp-rack > .igp-unit--gold {
	--igp-medal: var(--wp--preset--color--gold);
	--igp-sheen-delay: 1.5s;
	width: 100%;
}

.igp-rack > .igp-unit--silver {
	--igp-medal: var(--wp--preset--color--silver);
	--igp-sheen-delay: 2.3s;
	width: 96%;
}

.igp-rack > .igp-unit--bronze {
	--igp-medal: var(--wp--preset--color--bronze);
	--igp-sheen-delay: 3.1s;
	width: 92%;
}

.igp-unit--gold .igp-unit__name {
	font-size: 2rem;
}

@keyframes igp-sheen {
	0% { transform: translateX(-100%); }
	23% { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}

/* ==========================================================================
   7. ARCHITECTURE SCHEMATIC
   ========================================================================== */

.igp-arch {
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.igp-arch__figure {
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	background:
		linear-gradient(180deg, rgba(20, 28, 40, 0.7) 0%, rgba(13, 19, 28, 0.7) 100%);
	padding: clamp(1rem, 2vw, 1.75rem);
}

.igp-arch__figure svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Each node lifts slightly on hover and settles back on leave. */
.igp-arch__figure .igp-node {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.24s var(--igp-ease), filter 0.24s linear;
}

.igp-arch__figure .igp-node:hover {
	transform: scale(1.07);
	filter: brightness(1.35);
}

.igp-arch__figure .igp-node rect,
.igp-arch__figure .igp-node text {
	transition: stroke 0.24s linear;
}

/* ==========================================================================
   8. DELIVERY MODEL PANELS (owned vs leased)
   ========================================================================== */

.igp-panel {
	position: relative;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	border-radius: var(--igp-radius);
	overflow: hidden;
}

.igp-panel > *:last-child {
	margin-bottom: 0;
}

.igp-panel::after {
	content: "";
	position: absolute;
	right: clamp(1.25rem, 3vw, 2.5rem);
	top: clamp(1.25rem, 3vw, 2.25rem);
	width: 96px;
	height: 96px;
	background-color: var(--igp-accent);
	opacity: 0.12;
	-webkit-mask: var(--igp-icon) center / contain no-repeat;
	mask: var(--igp-icon) center / contain no-repeat;
	pointer-events: none;
}

.igp-panel > h2,
.igp-panel > p {
	max-width: min(100%, 62ch);
	position: relative;
	z-index: 1;
}

/* Owned: solid fill, solid border, cut corner. */
.igp-panel--owned {
	--igp-accent: var(--wp--preset--color--aqua);
	--igp-icon: var(--igp-ic-key);
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(0, 224, 184, 0.28);
	clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}

.igp-panel--owned > h2 {
	color: var(--wp--preset--color--text-primary);
}

/* Leased: translucent fill, dashed border, no cut. */
.igp-panel--leased {
	--igp-accent: var(--wp--preset--color--gold);
	--igp-icon: var(--igp-ic-tag);
	background: rgba(13, 19, 28, 0.5);
	border: 1px dashed rgba(255, 182, 39, 0.4);
}

.igp-models {
	gap: 1.5rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   9. CRITERIA GRID (6 cards, fills 3x2 evenly)
   ========================================================================== */

.igp-grid {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	/* Equal rows, so the longest card does not make the first row look bigger. */
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.igp-grid > * {
	height: 100%;
}

.igp-grid.igp-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.igp-grid.igp-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.igp-card {
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	position: relative;
	transition: border-color 0.18s linear, transform 0.18s var(--igp-ease), box-shadow 0.18s linear;
}

.igp-card > * {
	margin-block: 0;
}

.igp-card > * + * {
	margin-top: 0.85rem;
}

.igp-card:hover {
	border-color: rgba(0, 224, 184, 0.38);
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(0, 224, 184, 0.06) inset, 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}

.igp-card p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-body);
	line-height: 1.62;
}

.igp-card--pam { --igp-accent: var(--wp--preset--color--aqua); --igp-icon: var(--igp-ic-database); }
.igp-card--bonus { --igp-accent: var(--wp--preset--color--gold); --igp-icon: var(--igp-ic-gift); }
.igp-card--pay { --igp-accent: var(--wp--preset--color--aqua); --igp-icon: var(--igp-ic-card); }
.igp-card--fraud { --igp-accent: var(--wp--preset--color--coral); --igp-icon: var(--igp-ic-scan); }
.igp-card--license { --igp-accent: var(--wp--preset--color--gold); --igp-icon: var(--igp-ic-scale); }
.igp-card--security { --igp-accent: var(--wp--preset--color--aqua); --igp-icon: var(--igp-ic-shield); }

/* ==========================================================================
   10. PITFALLS (4 cards, coral, no icons)
   ========================================================================== */

.igp-section--risk {
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 92, 110, 0.05) 0 2px, transparent 2px 14px);
}

.igp-pitfall {
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-top: 2px solid var(--wp--preset--color--coral);
	border-radius: 2px 2px var(--igp-radius) var(--igp-radius);
	transition: border-top-width 0.18s linear, box-shadow 0.18s linear, transform 0.18s var(--igp-ease);
}

.igp-pitfall > * {
	margin-block: 0;
}

.igp-pitfall > * + * {
	margin-top: 0.75rem;
}

.igp-pitfall:hover {
	border-top-width: 3px;
	transform: translateY(-2px);
	box-shadow: 0 -10px 26px -18px rgba(255, 92, 110, 0.9);
}

.igp-pitfall h3 {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.igp-pitfall p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-body);
	line-height: 1.62;
}

/* ==========================================================================
   11. DIAGNOSTIC LOG (post-launch SEO findings, no checklist icons)
   ========================================================================== */

.wp-block-list.is-style-igp-log,
ol.is-style-igp-log {
	list-style: none;
	counter-reset: igplog;
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	padding: 0.5rem 0 0.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-left: 2px solid var(--wp--preset--color--coral);
	border-radius: 2px var(--igp-radius) var(--igp-radius) 2px;
}

.is-style-igp-log > li {
	counter-increment: igplog;
	display: grid;
	grid-template-columns: 48px 62px minmax(0, 1fr);
	align-items: start;
	column-gap: 1rem;
	padding: 1.05rem clamp(1.1rem, 2vw, 1.75rem);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-body);
	line-height: 1.6;
}

.is-style-igp-log > li + li {
	border-top: 1px solid var(--igp-hairline);
}

.is-style-igp-log > li::before {
	content: "0" counter(igplog);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
	padding-top: 0.15em;
}

.is-style-igp-log > li::after {
	content: "FAIL";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--coral);
	border: 1px solid rgba(255, 92, 110, 0.4);
	border-radius: 3px;
	padding: 0.2rem 0.4rem;
	justify-self: start;
	grid-column: 2;
	grid-row: 1;
	line-height: 1;
	margin-top: 0.1em;
}

/* Callout that closes the SEO section and bridges into the CTA. */
.igp-callout {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding: clamp(1.2rem, 2.4vw, 1.75rem) clamp(1.3rem, 2.4vw, 2rem);
	background: rgba(0, 224, 184, 0.06);
	border-left: 2px solid var(--wp--preset--color--aqua);
	border-radius: 2px var(--igp-radius) var(--igp-radius) 2px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--text-primary);
	max-width: none;
}

/* ==========================================================================
   12. DUAL CTA
   ========================================================================== */

.igp-section--cta {
	background:
		radial-gradient(46% 60% at 20% 40%, rgba(0, 224, 184, 0.1) 0%, rgba(7, 10, 15, 0) 70%),
		radial-gradient(46% 60% at 80% 60%, rgba(255, 182, 39, 0.08) 0%, rgba(7, 10, 15, 0) 70%);
}

.igp-cta-pair {
	gap: 0;
	margin-top: clamp(2rem, 4vw, 3rem);
	position: relative;
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	overflow: hidden;
}

/* Junction marker: the two offers are alternatives, not a sequence. */
.igp-cta-pair::before {
	content: "OR";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--igp-hairline-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--text-muted);
}

.igp-cta-pair > .wp-block-column {
	padding: clamp(1.75rem, 3.4vw, 2.75rem);
}

.igp-cta-pair > .wp-block-column > *:last-child {
	margin-bottom: 0;
}

/* Each CTA panel opens with its own illustration instead of a small icon:
   an open rack slot for providers, a magnifier over a page for operators. */
.igp-cta-figure {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin-bottom: 1.75rem;
}

.igp-cta--provider {
	--igp-accent: var(--wp--preset--color--aqua);
	--igp-icon: var(--igp-ic-listplus);
	background: linear-gradient(135deg, rgba(0, 224, 184, 0.12) 0%, rgba(46, 123, 255, 0.07) 100%);
}

.igp-cta--operator {
	--igp-accent: var(--wp--preset--color--gold);
	--igp-icon: var(--igp-ic-searchcheck);
	background: linear-gradient(135deg, rgba(255, 182, 39, 0.08) 0%, rgba(255, 182, 39, 0.02) 100%);
	border-left: 1px solid var(--igp-hairline);
}

.igp-benefit {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-body);
	padding-top: 0.9rem;
	border-top: 1px solid var(--igp-hairline);
}

.igp-benefit strong {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--igp-accent);
	display: block;
	margin-bottom: 0.4rem;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.igp-footer {
	border-top: 1px solid var(--igp-hairline);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.igp-footer h2,
.igp-footer h3 {
	font-variation-settings: normal;
	font-stretch: normal;
	font-size: 0.6875rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 1rem;
}

.igp-footer a {
	color: var(--wp--preset--color--text-body);
	text-decoration: none;
	transition: color 0.16s linear;
}

.igp-footer a:hover {
	color: var(--wp--preset--color--aqua);
	text-decoration: none;
}

.igp-footer__legal {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.5rem;
	border-top: 1px solid var(--igp-hairline);
	font-size: 0.8125rem;
	line-height: 1.65;
}

.igp-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
}

/* ==========================================================================
   14. MOTION
   ========================================================================== */

/* Scroll reveal is progressive enhancement: the hidden state only applies once
   JS has flagged the document. Without JS, or if the script fails, every block
   renders visible instead of being stuck at opacity 0. */
.igp-js .igp-reveal {
	opacity: 0;
	transform: translateY(10px);
}

.igp-js .igp-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.42s var(--igp-ease), transform 0.42s var(--igp-ease);
	transition-delay: var(--igp-delay, 0ms);
}

/* Rack units slide into the rack from the left. */
.igp-js .igp-unit.igp-reveal {
	transform: translateX(-12px);
}

.igp-js .igp-unit.igp-reveal.is-visible {
	transform: none;
}

/* Hero load cascade, runs once on page load. */
.igp-hero .igp-load > * {
	animation: igp-rise 0.52s var(--igp-ease) both;
}

.igp-hero .igp-load > *:nth-child(1) { animation-delay: 0.04s; }
.igp-hero .igp-load > *:nth-child(2) { animation-delay: 0.11s; }
.igp-hero .igp-load > *:nth-child(3) { animation-delay: 0.18s; }
.igp-hero .igp-load > *:nth-child(4) { animation-delay: 0.25s; }

.igp-hero__figure {
	animation: igp-rise 0.62s var(--igp-ease) 0.3s both;
}

@keyframes igp-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.igp-grid.igp-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The review button drops to its own row before anything gets crushed. */
	.igp-unit {
		grid-template-columns: 64px 52px minmax(0, 1fr) 100px;
		grid-template-areas:
			"rank logo body score"
			"rank logo cta  cta";
		align-items: start;
		row-gap: 0.9rem;
	}

	.igp-unit__score {
		align-self: center;
	}

	.igp-unit__cta {
		justify-self: start;
	}

	.igp-unit__logo {
		width: 52px;
		height: 52px;
	}
}

/* Between the two breakpoints the links are still a full list but no longer
   fit beside the logo, so they take a centred row of their own. */
@media (max-width: 980px) {
	.igp-header__row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"logo cta"
			"nav  nav";
		row-gap: 0.85rem;
		gap: 1rem;
	}
}

/* At 600px WordPress collapses the navigation to its toggle, which fits back
   on the first row. */
@media (max-width: 600px) {
	.igp-header__row {
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "logo nav cta";
		row-gap: 0;
	}

	.igp-header__nav {
		justify-self: end;
	}
}

@media (max-width: 781px) {
	:root {
		--igp-header-h: 60px;
	}

	.igp-grid.igp-grid--3,
	.igp-grid.igp-grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.igp-cta-pair > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--igp-hairline);
	}

	/* Stacked columns put the centre point inside a panel, so drop the marker. */
	.igp-cta-pair::before {
		display: none;
	}

	.igp-hero__figure:not(.igp-podium) img {
		aspect-ratio: 3 / 2;
	}

	.igp-panel::after {
		width: 64px;
		height: 64px;
		opacity: 0.09;
	}

	.igp-panel--owned {
		clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
	}

	/* Keep three columns. Dropping to two auto-places the row text into the
	   narrow index column, which crushes it to ~38px. */
	.is-style-igp-log > li {
		grid-template-columns: 28px 52px minmax(0, 1fr);
		column-gap: 0.6rem;
		padding-inline: 1rem;
	}

	.is-style-igp-log > li::before {
		font-size: 0.6875rem;
	}
}

@media (max-width: 560px) {
	.igp-rack > .igp-unit,
	.igp-rack > .igp-unit--gold,
	.igp-rack > .igp-unit--silver,
	.igp-rack > .igp-unit--bronze,
	.igp-podium__item--gold,
	.igp-podium__item--silver,
	.igp-podium__item--bronze {
		width: 100%;
	}

	.igp-unit {
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas:
			"rank score"
			"logo body"
			"cta  cta";
		row-gap: 1rem;
	}

	.igp-unit__score {
		justify-items: end;
		align-self: start;
	}

	.igp-unit__score-bar {
		width: 90px;
	}

	.igp-unit__logo {
		width: 44px;
		height: 44px;
	}

	.igp-unit__rank {
		font-size: 1.5rem;
		padding-right: 0.9rem;
	}

	.igp-unit__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   17. PROVIDER REVIEW PAGE
   ========================================================================== */

.igp-backlink {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 2.25rem;
}

.igp-backlink a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	transition: color 0.16s linear;
}

.igp-backlink a::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s var(--igp-ease);
}

.igp-backlink a:hover { color: var(--wp--preset--color--aqua); text-decoration: none; }
.igp-backlink a:hover::before { transform: rotate(45deg) translate(2px, -2px); }

/* Two columns with a sticky rating card. The identity block sits above the
   body in the same column, so on mobile the order becomes identity, rating,
   detail rather than burying the score at the foot of the page. */
.igp-pv {
	--igp-medal: var(--wp--preset--color--aqua);
	position: relative;
	overflow: hidden;
	/* Container query rather than a media query: if anything ever constrains
	   this section again, the grid drops to one column instead of squeezing
	   the text into a word-per-line column. */
	container-type: inline-size;
	container-name: igppv;
}

.igp-pv.igp-pv--gold { --igp-medal: var(--wp--preset--color--gold); }
.igp-pv.igp-pv--silver { --igp-medal: var(--wp--preset--color--silver); }
.igp-pv.igp-pv--bronze { --igp-medal: var(--wp--preset--color--bronze); }

.igp-pv::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 150%;
	background: radial-gradient(48% 40% at 20% 0%,
		color-mix(in srgb, var(--igp-medal) 13%, transparent) 0%,
		rgba(7, 10, 15, 0) 70%);
	pointer-events: none;
}

.igp-pv > * { position: relative; }

.igp-pv__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 336px;
	grid-template-areas:
		"id    aside"
		"body  aside";
	column-gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.igp-pv__id { grid-area: id; }
.igp-pv__aside { grid-area: aside; }
.igp-pv__body { grid-area: body; }

/* Identity */
.igp-pv__id {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 1.5rem;
	padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.igp-pv__logo {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--igp-medal) 38%, transparent);
	background: var(--wp--preset--color--surface-raised);
}

/* Grid children default to min-width:auto, which lets a long unbroken string
   push the column past its track. */
.igp-pv__idtext {
	min-width: 0;
}

.igp-pv__rank {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--igp-medal);
	border: 1px solid color-mix(in srgb, var(--igp-medal) 40%, transparent);
	background: color-mix(in srgb, var(--igp-medal) 8%, transparent);
	border-radius: 999px;
	padding: 0.32rem 0.7rem;
	margin-bottom: 0.85rem;
}

.igp-pv__name {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "wght" 700, "wdth" 112;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text-primary);
}

.igp-pv__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	color: var(--wp--preset--color--text-body);
}

/* Sticky rating card */
.igp-pv-card {
	position: sticky;
	top: calc(var(--igp-header-h) + 24px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	text-align: center;
}

.igp-dial {
	display: block;
	width: 100%;
	max-width: 210px;
	margin: 0 auto 1.1rem;
	height: auto;
}

.igp-dial__tick {
	fill: rgba(255, 255, 255, 0.09);
	transition: fill 0.3s linear;
}

.igp-dial__tick.is-on {
	fill: var(--igp-medal);
}

.igp-dial__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 46px;
	font-weight: 500;
	fill: var(--wp--preset--color--text-primary);
}

.igp-dial__frac {
	fill: var(--igp-medal);
}

.igp-dial__scale {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	fill: var(--wp--preset--color--text-muted);
}

.igp-trend {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

.igp-trend::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.igp-trend--up { color: var(--wp--preset--color--aqua); }
.igp-trend--up::before { transform: rotate(-45deg) translateY(1px); }
.igp-trend--down { color: var(--wp--preset--color--coral); }
.igp-trend--down::before { transform: rotate(135deg) translateY(1px); }

.igp-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.5rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--igp-hairline);
	border-bottom: 1px solid var(--igp-hairline);
}

.igp-stat b {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--text-primary);
}

.igp-stat span {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.igp-updated {
	margin: 0.9rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.igp-pv-actions {
	display: grid;
	gap: 0.6rem;
	margin-top: 1.35rem;
}

.igp-pv-btn {
	display: block;
	padding: 0.85rem 1rem;
	border-radius: var(--wp--custom--radius--button);
	border: 1px solid var(--igp-hairline-strong);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	transition: border-color 0.18s linear, color 0.18s linear, background-color 0.18s linear;
}

.igp-pv-btn:hover {
	border-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua);
	text-decoration: none;
}

.igp-pv-btn--primary {
	background: var(--wp--preset--color--aqua);
	border-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--ink);
}

.igp-pv-btn--primary:hover {
	background: transparent;
	color: var(--wp--preset--color--aqua);
}

/* Section heads shared by brands, breakdown and feedback */
.igp-feedback-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.igp-feedback-head h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "wght" 700, "wdth" 112;
	font-size: var(--wp--preset--font-size--panel);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text-primary);
}

.igp-feedback-count {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.igp-pv__body > section + section {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.igp-panel-card {
	padding: clamp(1.3rem, 2.4vw, 1.75rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
}

.igp-panel-card .igp-feedback-head { margin-bottom: 1rem; }

.igp-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
}

.igp-brands span {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-body);
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--igp-hairline);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	line-height: 1;
}

/* Category breakdown */
.igp-metrics {
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.igp-metric {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 48px;
	grid-template-areas:
		"label value"
		"bar   bar"
		"q     q";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.6rem;
	padding: 1.25rem clamp(1.1rem, 2vw, 1.6rem);
}

.igp-metric + .igp-metric { border-top: 1px solid var(--igp-hairline); }

.igp-metric__label {
	grid-area: label;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "wght" 700, "wdth" 112;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--text-primary);
}

.igp-metric__value {
	grid-area: value;
	justify-self: end;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--igp-medal);
}

/* The track carries ten tick divisions, so a bar reads against a scale
   instead of floating. Same idea as the dial, one step quieter. */
.igp-metric__bar {
	grid-area: bar;
	display: block;
	height: 6px;
	border-radius: 3px;
	background:
		repeating-linear-gradient(to right,
			transparent 0 calc(10% - 1px),
			rgba(255, 255, 255, 0.16) calc(10% - 1px) 10%),
		var(--igp-hairline-strong);
	overflow: hidden;
}

.igp-metric__bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--igp-medal);
	opacity: 0.85;
}

.igp-metric__q {
	grid-area: q;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.5;
}

/* Professional feedback */
.igp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.35rem;
}

.igp-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	background: transparent;
	border: 1px solid var(--igp-hairline);
	border-radius: 999px;
	padding: 0.5rem 0.85rem;
	cursor: pointer;
	transition: border-color 0.16s linear, color 0.16s linear, background-color 0.16s linear;
}

.igp-filter em {
	font-style: normal;
	opacity: 0.55;
}

.igp-filter:hover:not(:disabled) {
	border-color: var(--igp-hairline-strong);
	color: var(--wp--preset--color--text-body);
}

.igp-filter.is-active {
	color: var(--wp--preset--color--aqua);
	border-color: color-mix(in srgb, var(--wp--preset--color--aqua) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--aqua) 8%, transparent);
}

.igp-filter:disabled {
	opacity: 0.35;
	cursor: default;
}

.igp-reviews { display: grid; gap: 1rem; }

.igp-review {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--igp-hairline);
	border-radius: var(--igp-radius);
	padding: clamp(1.3rem, 2.4vw, 1.75rem);
}

.igp-review[hidden] { display: none; }

.igp-review p {
	margin: 0;
	color: var(--wp--preset--color--text-body);
	line-height: 1.7;
}

.igp-review--empty p { color: var(--wp--preset--color--text-muted); }

.igp-review__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.15rem;
	padding-bottom: 1.15rem;
	border-bottom: 1px solid var(--igp-hairline);
}

.igp-review__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--igp-hairline);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--aqua);
	text-transform: uppercase;
}

.igp-review__who {
	display: grid;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-width: 0;
}

.igp-review__who > b {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-primary);
	font-weight: 600;
}

.igp-review__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.igp-badge {
	font-family: var(--wp--preset--font-family--mono);
	font-style: normal;
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	border: 1px solid var(--igp-hairline);
	border-radius: 3px;
	padding: 0.25rem 0.4rem;
	line-height: 1;
}

.igp-badge--trust {
	color: var(--wp--preset--color--aqua);
	border-color: color-mix(in srgb, var(--wp--preset--color--aqua) 35%, transparent);
}

.igp-badge--type {
	color: var(--wp--preset--color--gold);
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent);
}

.igp-review__date {
	flex: none;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

@container igppv (max-width: 900px) {
	.igp-pv__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "id" "aside" "body";
		row-gap: 2rem;
	}

	.igp-pv-card { position: static; }

	.igp-pv__id { padding-bottom: 0; }
}

@media (max-width: 900px) {
	.igp-pv__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "id" "aside" "body";
		row-gap: 2rem;
	}

	.igp-pv-card { position: static; }

	.igp-pv__id { padding-bottom: 0; }
}

@media (max-width: 600px) {
	.igp-pv__id {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 1.1rem;
	}

	.igp-pv__logo { width: 60px; height: 60px; }

	.igp-review__head { flex-wrap: wrap; }

	.igp-review__date { width: 100%; }
}

/* ==========================================================================
   18. LOGO
   ========================================================================== */

/* The mark is the site's own idea in miniature: three stacked rack units with
   the top one in gold, and a status LED per row fading down the stack. */
.igp-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	line-height: 1;
}

.igp-logo:hover {
	text-decoration: none;
}

.igp-logo__mark {
	width: 34px;
	height: 34px;
	flex: none;
	display: block;
	transition: transform 0.22s var(--igp-ease);
}

.igp-logo:hover .igp-logo__mark {
	transform: translateY(-1px);
}

.igp-logo__text {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "wght" 700, "wdth" 112;
	font-stretch: 112%;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--text-primary);
	white-space: nowrap;
}

.igp-logo__text b {
	font-weight: inherit;
	color: var(--wp--preset--color--aqua);
}

.igp-logo--footer .igp-logo__mark {
	width: 38px;
	height: 38px;
}

.igp-logo--footer .igp-logo__text {
	font-size: 1.1875rem;
}

@media (max-width: 600px) {
	.igp-logo__text {
		font-size: 0.9375rem;
	}

	.igp-logo__mark {
		width: 30px;
		height: 30px;
	}
}

/* ==========================================================================
   16. ACCESSIBILITY AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.igp-js .igp-reveal {
		opacity: 1;
		transform: none;
	}

	.igp-unit--medal::after,
	.igp-podium__item::after {
		display: none;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.7rem 1.1rem;
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button);
	font-weight: 600;
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.igp-header,
	.igp-section--cta,
	.igp-hero__figure {
		display: none;
	}
}