/*
Theme Name: GINGR
Theme URI: https://www.gingr.org/
Author: GINGR / migration
Description: Custom block theme for the Global Initiative for Nature, Grids and Renewables (GINGR). Clean, fully editable in the WordPress Site Editor. Migrated from Wix.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gingr
*/

/* Block theme styling lives in theme.json. This file holds only small
   refinements that theme.json cannot yet express. */

/* Sticky header */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Phones: the header slides away while scrolling down and comes back on the way
   up (assets/js/gingr.js sets the class and --gingr-header-h). It moves by
   `top`, not by a transform — a transform would make the header the containing
   block of the fixed-position mobile menu overlay and trap it inside the bar. */
@media (max-width: 599.98px) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: top 0.3s ease;
	}
	.wp-site-blocks > header.wp-block-template-part.is-scrolled-away {
		top: calc(-1 * var(--gingr-header-h, 120px) - 8px);
	}
}
@media (max-width: 599.98px) and (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* Header nav dropdown submenus (About, Our Work, News & Events) */
.gingr-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
	padding: 6px 0;
	min-width: 210px;
}
.gingr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #fff;
	padding: 9px 20px;
	font-weight: 600;
}
.gingr-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.gingr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.gingr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}
/* Tighten the gap between a parent label and its dropdown chevron */
.gingr-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding-inline: 0;
}
.gingr-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	margin-left: 4px;
}

/* Enlarged logo (220px) + the full nav no longer fit on one row at 1280px, the
   most common laptop width — they overflowed the header row by ~8px and the nav
   dropped to a second row, making the sticky header 182px tall. Tightening the
   top-level nav gap from 34px to 26px in this band reclaims ~32px and keeps the
   header a single 124px row down to ~1240px. Above 1340px the 34px gap is
   untouched; below ~1240px the nav still wraps, as it did before. */
@media (min-width: 782px) and (max-width: 1339.98px) {
	.gingr-header .wp-block-navigation.is-layout-flex {
		column-gap: 26px;
	}
}

/* Hero heading "boxes": translucent navy plates behind each line */
.gingr-hero__headline mark,
.gingr-hero__headline .has-inline-color {
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Hero: navy plates hug each headline line and stay centered */
.gingr-hero__plate {
	display: table;
	margin-inline: auto;
}
.gingr-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Eyebrow pill (bordered) */
.gingr-eyebrow {
	display: table;
	margin-inline: auto;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Section heading pill + short gold divider */
.gingr-section-heading {
	text-align: center;
}
.gingr-pill {
	display: table;
	margin-inline: auto;
	border-radius: 6px;
	/* Single source of truth for the section-heading size — keep every
	   "pill" heading (News & Events, Newsletter, archives…) identical. */
	font-size: var(--wp--preset--font-size--x-large);
}
.gingr-divider {
	width: 64px;
	max-width: 64px;
	height: 3px;
	border: 0;
	border-radius: 3px;
	margin-inline: auto;
}

/* Cards */
.gingr-card {
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
	height: 100%;
}
.gingr-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.gingr-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.gingr-card a {
	color: inherit;
	text-decoration: none;
}
.gingr-card:hover h3 a {
	color: var(--wp--preset--color--gold);
}

/* News & Events — category bar + Newsletter Signup */
.gingr-news-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-bottom: 20px;
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid #e5e8ee;
}
.gingr-news-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	align-items: center;
}
.gingr-news-cats a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.98rem;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.gingr-news-cats a:hover {
	color: var(--wp--preset--color--gold);
}
.gingr-news-cats a.is-active {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--gold);
}
.gingr-news-signup {
	flex: 0 0 auto;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.6em 1.6em;
	transition: background-color .2s ease, color .2s ease;
}
.gingr-news-signup:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

/* News cards (dynamic query loop on home + News listing) */
.gingr-news-query .gingr-card {
	display: flex;
	flex-direction: column;
}
.gingr-news-query .gingr-card__img {
	margin: 0;
}
.gingr-news-query .gingr-tag,
.gingr-news-query .gingr-tag a {
	color: var(--wp--preset--color--gold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	font-size: 0.8rem;
	margin: 0;
}
.gingr-news-query .wp-block-post-title {
	margin: 0;
}
.gingr-card__date {
	color: #6b7280;
}
.gingr-card__excerpt {
	color: #4b5563;
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 4px 0 0;
}
.gingr-card__excerpt p {
	margin: 0;
}
.gingr-news-query .wp-block-query-pagination {
	gap: 12px;
}
.gingr-news-query .wp-block-query-pagination a,
.gingr-news-query .wp-block-query-pagination .current {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* iOS Safari sizes an aspect-ratio image inside a CSS-grid track by its
   intrinsic width, which can push the card past the viewport on phones (it
   doesn't repro in Chrome). Cap the card to the content width so it can't.
   NB: this theme has no root-padding var set, so fall back to 24px. */
@media (max-width: 767px) {
	.gingr-news-query .gingr-card,
	.gingr-home-news .gingr-card {
		max-width: calc(100vw - (2 * var(--wp--style--root--padding-left, 24px)));
	}
}

/* Quote: remove default border/indent */
.gingr-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Hero video fills the cover */
.gingr-hero video.wp-block-cover__video-background {
	object-fit: cover;
}

/* Hero curved divider (navy swoop into the News section below) */
.gingr-hero {
	position: relative;
}
.gingr-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(38px, 6vw, 88px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 102.446 1920 197.554' preserveAspectRatio='none'%3E%3Cpath fill='%23354560' d='M0 102.446V300h1920S1050.116 102.446 0 102.446z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: scaleX(-1);
	pointer-events: none;
	z-index: 1;
}
.gingr-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Section icons (circular brand SVGs) */
.gingr-icon img {
	display: block;
	height: auto;
}

/* Footer */
.gingr-footer a {
	color: #fff;
	text-decoration: none;
}
.gingr-footer a:hover {
	text-decoration: underline;
}
.gingr-footer__actions {
	align-items: center;
}
.gingr-footer__linkedin a,
.gingr-footer__linkedin img {
	display: block;
}
.gingr-footer__newsletter .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}
.gingr-footer__newsletter .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--navy) !important;
	text-decoration: none;
}
.gingr-footer__partners {
	align-items: center;
}
.gingr-footer__partners img {
	display: block;
	height: auto;
}
.gingr-footer__bottom {
	align-items: center;
}
/* Keep the copyright on one line, starting at the middle column and
   spilling across the empty third column, without widening its column. */
.gingr-footer__bottom .wp-block-column {
	min-width: 0;
}
.gingr-footer__copyright {
	margin: 0;
	white-space: nowrap;
}
@media (max-width: 781px) {
	.gingr-footer__copyright {
		margin-top: 8px;
		white-space: normal;
	}
}

/* Single post */
.gingr-post-header {
	text-align: center;
}
.gingr-post-cats {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}
.gingr-post-header .wp-block-post-title {
	color: var(--wp--preset--color--navy);
}
.gingr-post-date {
	color: #6b7280;
}
/* Emphasis in post bodies renders gold (matches the original Wix posts). */
.wp-block-post-content strong,
.wp-block-post-content b {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
}
.gingr-recording-placeholder {
	background: var(--wp--preset--color--light);
	border-left: 4px solid var(--wp--preset--color--gold);
	padding: 14px 18px;
	border-radius: 4px;
}
.gingr-post-back a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
}

/* 404 / not-found page */
.gingr-404__code {
	font-size: clamp(4.5rem, 3rem + 9vw, 8rem);
	letter-spacing: -2px;
}
.gingr-404 .wp-block-search__inside-wrapper {
	border: 1px solid #d7dbe2;
	border-radius: 6px;
	overflow: hidden;
}
.gingr-404 .wp-block-search__input {
	border: 0;
	padding: 12px 16px;
}
.gingr-404 .wp-block-search__button {
	margin: 0;
	background-color: var(--wp--preset--color--navy);
	color: #fff;
	border: 0;
	padding: 0 22px;
	font-weight: 700;
	transition: background-color .2s ease;
}
.gingr-404 .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

/* Header search — white pill matching the Newsletter button */
.gingr-header-search {
	margin: 0;
}
.gingr-header-search .wp-block-search__inside-wrapper {
	background: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0 6px 0 18px;
	align-items: center;
	width: 200px;
	max-width: 200px;
}
.gingr-header-search .wp-block-search__input {
	background: transparent;
	border: 0;
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 0.95rem;
	padding: 0.6em 0;
	line-height: 1;
	min-width: 0;
}
.gingr-header-search .wp-block-search__input::placeholder {
	color: #7a8699;
	opacity: 1;
}
.gingr-header-search .wp-block-search__input:focus {
	outline: none;
}
.gingr-header-search .wp-block-search__button {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 6px;
	color: var(--wp--preset--color--navy);
	min-width: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.gingr-header-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: var(--wp--preset--color--navy);
}
.gingr-header-search .wp-block-search__button:hover svg {
	fill: var(--wp--preset--color--gold);
}
@media (max-width: 781px) {
	.gingr-header-search .wp-block-search__inside-wrapper {
		width: 100%;
		max-width: none;
	}
}

/* Publications — filter bar */
.gingr-pub-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
}
.gingr-pub-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--navy);
}
.gingr-pub-filter select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 220px;
	font-size: 0.95rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23354560' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid #d7dbe2;
	border-radius: 8px;
	padding: 10px 40px 10px 14px;
	cursor: pointer;
}
.gingr-pub-filter select:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(245, 175, 0, 0.18);
}
.gingr-pubs__empty {
	text-align: center;
	color: #6b7280;
	margin-top: 8px;
}
.gingr-pub-card[hidden] {
	display: none;
}

/* Publications — grid of download cards */
.gingr-pubs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.gingr-pub-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e8ee;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	transition: transform .25s ease, box-shadow .25s ease;
}
.gingr-pub-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.gingr-pub-card__imglink {
	display: block;
}
.gingr-pub-card__media {
	display: block;
	width: 100%;
	height: auto;          /* override the img height attr so aspect-ratio wins */
	aspect-ratio: 16 / 9;  /* uniform landscape crop for every cover */
	object-fit: cover;
}
.gingr-pub-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 24px;
}
.gingr-pub-card__type {
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--wp--preset--color--gold);
	margin-bottom: 8px;
}
.gingr-pub-card__title {
	margin: 0 0 6px;
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
}
.gingr-pub-card__subtitle {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #4b5563;
}
.gingr-pub-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.gingr-pub-card__tag {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--light);
	border-radius: 999px;
	padding: 3px 10px;
}
/* Flexible spacer: pushes the button to the card bottom while guaranteeing
   a minimum gap above it (so it never touches the tags / subtitle). */
.gingr-pub-card__push {
	flex: 1 1 auto;
	min-height: 20px;
}
.gingr-pub-card__btn {
	align-self: flex-start;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.55em 1.5em;
	transition: background-color .2s ease, color .2s ease;
}
.gingr-pub-card__btn:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

/* Databases — responsive card grid */
.gingr-db-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
/* The grid is a block group (flow layout), so WordPress adds margin-block-start
   to every card except the first — which misaligns row 1. Let the grid gap own
   the spacing instead. */
.gingr-db-grid > * {
	margin-top: 0;
	margin-bottom: 0;
}
.gingr-db-card {
	background: #fff;
	border: 1px solid #e5e8ee;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}
.gingr-db-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.gingr-db-card__media {
	margin: 0;
}
.gingr-db-card__media img {
	display: block;
	width: 100%;
	height: auto;          /* override the img height attr so aspect-ratio wins */
	aspect-ratio: 16 / 9;  /* uniform landscape crop for every card */
	object-fit: cover;
}
.gingr-db-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 26px 26px;
}
.gingr-db-card h3 {
	margin-top: 0;
}
.gingr-db-card__desc {
	flex: 1;
	line-height: 1.55;
	font-size: 0.97rem;
}
.gingr-db-card__link {
	margin: 16px 0 0;
}
.gingr-db-card__link a {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	text-decoration: none;
}
.gingr-db-card__link a:hover {
	text-decoration: underline;
}

/* Jobs notice card */
.gingr-jobs-notice {
	background: var(--wp--preset--color--light);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	padding: 20px 24px;
}
.gingr-jobs-notice a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* Newsletter: image beside the form */
.gingr-newsletter-cols {
	align-items: stretch;
}
.gingr-newsletter__media {
	margin: 0;
	height: 100%;
}
.gingr-newsletter__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: 12px;
}
@media (max-width: 781px) {
	.gingr-newsletter__media img {
		height: 320px;
		min-height: 0;
	}
}

/* Newsletter signup (Mailchimp embedded form) */
.gingr-newsletter {
	background: #fff;
	border: 1px solid #e5e8ee;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
	padding: clamp(22px, 2vw + 10px, 38px);
}
.gingr-mc-form .gingr-mc-row {
	display: flex;
	gap: 18px;
}
.gingr-mc-form .gingr-mc-field {
	flex: 1 1 0;
	margin-bottom: 18px;
}
.gingr-mc-form label {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	font-size: 0.92rem;
	margin-bottom: 6px;
}
.gingr-req {
	color: var(--wp--preset--color--gold);
}
.gingr-mc-form input[type="text"],
.gingr-mc-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7dbe2;
	border-radius: 6px;
	padding: 11px 14px;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.gingr-mc-form input[type="text"]:focus,
.gingr-mc-form input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(245, 175, 0, 0.18);
}
/* Double opt-in explainer */
.gingr-optin {
	background: var(--wp--preset--color--light);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	padding: 14px 18px;
	margin: 6px 0 22px;
}
.gingr-optin strong {
	display: block;
	color: var(--wp--preset--color--navy);
	margin-bottom: 6px;
}
.gingr-optin ol {
	margin: 0;
	padding-left: 20px;
	color: #4b5563;
	font-size: 0.95rem;
}
.gingr-optin li + li {
	margin-top: 2px;
}
/* Consent checkbox */
.gingr-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	color: #374151;
	margin-bottom: 24px;
	cursor: pointer;
}
.gingr-consent input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--navy);
	flex: 0 0 auto;
}
.gingr-consent span {
	font-weight: 400;
}
/* Submit row — navy "Submit" + white "Past Newsletters" pill side by side */
.gingr-mc-submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.gingr-mc-submit input[type="submit"],
.gingr-mc-archive {
	box-sizing: border-box;
	border-radius: 999px;
	padding: 0.7em 2.4em;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gingr-mc-submit input[type="submit"] {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border: 1px solid transparent;
}
.gingr-mc-submit input[type="submit"]:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}
/* "Past Newsletters" — white pill, navy text, navy outline */
.gingr-mc-archive {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
	text-decoration: none;
}
.gingr-mc-archive:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-mc-privacy {
	font-size: 0.8rem;
	line-height: 1.55;
	color: #6b7280;
	margin: 0 0 22px;
}
.gingr-mc-privacy a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* Inline submit feedback (JSONP result) */
.gingr-mc-feedback {
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.gingr-mc-feedback.is-pending {
	background: var(--wp--preset--color--light);
	color: #4b5563;
}
.gingr-mc-feedback.is-success {
	background: #eaf6ec;
	border-left: 4px solid #2e7d32;
	color: #1b5e20;
}
.gingr-mc-feedback.is-error {
	background: #fdecea;
	border-left: 4px solid #c0392b;
	color: #922b21;
}
.gingr-mc-feedback a {
	color: inherit;
	text-decoration: underline;
}
@media (max-width: 560px) {
	.gingr-mc-form .gingr-mc-row {
		flex-direction: column;
		gap: 0;
	}
}

/* Search results */
.wp-block-query-title {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}
.gingr-search-item:first-child {
	padding-top: 0 !important;
}
.gingr-search-item .gingr-card__date {
	margin: 0;
}

/* Scroll-reveal */
.gingr-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
.gingr-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.gingr-reveal { opacity: 1; transform: none; transition: none; }
}

/* Quote slider */
.gingr-slider {
	position: relative;
	max-width: 860px;
	margin-inline: auto;
	padding: 0 56px;
}
/* Stack every slide in a single grid cell so the track always reserves the
   height of the tallest quote — no height jump when sliding, and it
   recalculates itself on resize / font load (no JS measuring needed). */
.gingr-slider__track {
	display: grid;
}
.gingr-slide {
	grid-area: 1 / 1;
	margin: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s ease;
}
.gingr-slide.is-active {
	opacity: 1;
	visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
	.gingr-slide {
		transition: none;
	}
}
.gingr-slide blockquote {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.55;
	font-style: italic;
	font-weight: 400;
}
.gingr-slide blockquote p {
	margin: 0;
}
.gingr-slide blockquote p + p {
	margin-top: 0.8em;
}
/* Emphasised phrases (bold in the editor) render gold, same weight/italic. */
.gingr-slide blockquote strong,
.gingr-slide blockquote b {
	color: var(--wp--preset--color--gold);
	font-weight: inherit;
}
.gingr-slide figcaption {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gingr-slide__name {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	font-size: 1.05rem;
}
.gingr-slide__role {
	font-size: 0.9rem;
	opacity: 0.85;
}
.gingr-slider__arrow {
	position: absolute;
	top: 28%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.gingr-slider__arrow:hover {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}
.gingr-slider__prev { left: 0; }
.gingr-slider__next { right: 0; }
.gingr-slider__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}
.gingr-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.gingr-slider__dot.is-active {
	background: var(--wp--preset--color--gold);
	transform: scale(1.2);
}
@media (max-width: 600px) {
	.gingr-slider { padding: 0 20px; }
	.gingr-slider__arrow { display: none; }
}

/* ============================================================
   Mobile menu (overlay) — below the nav's 600px collapse point
   ============================================================ */

/* The in-overlay search + newsletter only exist for the mobile menu;
   on desktop the header-bar copies are used instead. */
@media (min-width: 600px) {
	.gingr-nav-search,
	.gingr-nav-cta {
		display: none !important;
	}
}

@media (max-width: 599.98px) {
	/* Search + newsletter move INTO the menu: drop the header-bar copies so
	   the top row is just logo (left) + hamburger (right). */
	.gingr-header .gingr-header-search,
	.gingr-header .wp-block-buttons:not(.gingr-nav-cta) {
		display: none !important;
	}

	/* Logo and hamburger share one row, hamburger pushed right & centered. */
	.gingr-header > .wp-block-group.alignwide {
		flex-wrap: nowrap;
	}

	/* Keep the phone logo at its previous 180px. The desktop logo is 220px
	   (wp:site-logo in parts/header.html); at 220px on a 390px screen it would
	   take ~56% of the viewport and push the sticky header from 107px to 124px.
	   Delete this rule if the larger logo is wanted on phones too. */
	.gingr-header .wp-block-site-logo img {
		width: 180px;
		height: auto;
	}

	/* Bigger, right-aligned hamburger, vertically centred to the logo. */
	.gingr-header .wp-block-navigation__responsive-container-open {
		padding: 6px;
	}
	.gingr-header .wp-block-navigation__responsive-container-open svg {
		width: 36px;
		height: 36px;
	}
}

/* Open overlay styling (only ever opens on mobile). */
.gingr-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 28px;
}
/* Left-align the overlay so the submenu indent reads clearly. */
.gingr-header .is-menu-open .wp-block-navigation__responsive-container-content,
.gingr-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	width: 100%;
}
.gingr-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 4px;
	padding-left: 34px;
	padding-right: 34px;
	box-sizing: border-box;
}
.gingr-header .is-menu-open .wp-block-navigation__container > * {
	align-self: flex-start !important;
}
.gingr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: flex-start;
}
/* Larger main menu items (About, Our Work, Publications, Databases, …). */
.gingr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.gingr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container ~ * .wp-block-navigation-item__label {
	font-size: 1.45rem;
	padding: 6px 0;
}
/* Submenus in the overlay: no box, just an indent. */
.gingr-header .is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
	padding-block: 0 4px;
	padding-inline-start: 28px !important;
	padding-inline-end: 0 !important;
	min-width: 0;
	margin-left: 0;
	align-items: flex-start;
}
.gingr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.05rem;
	font-weight: 600;
	padding: 6px 0;
	opacity: 0.92;
}
/* Submenu items in the overlay are column flexboxes that default to
   align-items:center, which horizontally centres each label (so a nested
   submenu like Metrics, and its children How To / Toolbox, drift off the left
   indent). Pin them to the start so every level reads as a clean left-aligned
   indent: Metrics lines up with Grids, How To / Toolbox sit one level in. */
.gingr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start;
}
.gingr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-align: left;
}
/* A submenu nested inside another submenu (How To / Toolbox under Metrics)
   inherits a large top padding; drop it so the first child sits tight under
   its parent, matching the spacing between the other items. */
.gingr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding-top: 0;
}
/* Search + newsletter inside the overlay. */
.gingr-header .is-menu-open .gingr-nav-search {
	width: 100%;
	margin-top: 22px;
}
.gingr-header .is-menu-open .gingr-nav-search .wp-block-search__inside-wrapper {
	background: #fff;
	border-radius: 999px;
	padding: 0 6px 0 18px;
	align-items: center;
	width: 100%;
	max-width: none;
}
.gingr-header .is-menu-open .gingr-nav-search .wp-block-search__input {
	background: transparent;
	border: 0;
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	padding: 0.7em 0;
	line-height: 1;
	min-width: 0;
}
.gingr-header .is-menu-open .gingr-nav-search .wp-block-search__button {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 6px;
	color: var(--wp--preset--color--navy);
	min-width: 0;
	display: flex;
	align-items: center;
}
.gingr-header .is-menu-open .gingr-nav-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	fill: var(--wp--preset--color--navy);
}
.gingr-header .is-menu-open .gingr-nav-cta {
	margin-top: 14px;
	width: 100%;
	justify-content: flex-start;
}

/* ============================================================
   Our Work + Technical Working Group sub-pages
   ============================================================ */
.gingr-twg-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
}
.gingr-twg-eyebrow {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	letter-spacing: 0.3px;
	opacity: 0.85;
	margin: 0 0 8px;
}
/* Navy title pill — an inline span inside a normal <h1> so the h1 keeps the
   same left edge (constrained-layout centering) as the eyebrow/intro above. */
.gingr-twg-title {
	display: inline-block;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 6px;
	padding: 4px 22px;
	line-height: 1.2;
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
}
/* Alternating TWG rows on the Our Work page */
.gingr-twg-row { align-items: center; }
.gingr-twg-thumb img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* Outline "Learn More" pill button */
.gingr-learn-more .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	padding: 0.55em 1.9em;
	font-weight: 700;
	transition: background-color .2s ease, color .2s ease;
}
.gingr-learn-more .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

/* ============================================================
   Offshore-metrics design system (Figma "GINGR Website", 2026-09)
   Shared pieces used by /metrics/how-to/ and /metrics/toolbox/.
   ============================================================ */

/* Small caps eyebrow above a section heading ("context", "framework"). */
.gingr-kicker {
	margin: 0 0 12px;
	line-height: 1.2; /* Figma 12/14.4 */
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px; /* style guide "12px heavy caps": 1.00px */
	text-transform: uppercase; /* Figma textCase: UPPER */
}
.gingr-kicker--caps {
	text-transform: uppercase;
}

/* The gold rule under section headings. */
.gingr-rule {
	width: 64px;
	height: 3px;
	margin: 18px 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
}
.gingr-rule--center {
	margin-inline: auto;
}

/* Gold pill button, and its navy counterpart. */
.gingr-btn {
	display: inline-block;
	padding: 11.8px 26px; /* 46px tall with the 22.4px (140%) line, as in Figma */
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4; /* style guide "16px heavy" */
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gingr-btn:hover,
.gingr-btn:focus-visible {
	background: var(--wp--preset--color--gold-soft); /* Figma hover: Light Yellow */
	color: var(--wp--preset--color--ink);
}
.gingr-btn--navy {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-btn--navy:hover,
.gingr-btn--navy:focus-visible {
	background: var(--wp--preset--color--gold); /* Figma hover: dark blue → yellow */
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
   Horizontal scroll for the two oversized graphics.

   The framework diagram and the navigator matrix are ~1120px wide by design.
   Below that they scroll sideways inside their own box rather than being
   squashed or reflowed — per the design's mobile frames.

   NOTE: this is deliberately a LOCAL wrapper. Never move overflow onto
   html/body: that breaks the sticky header on iOS Safari.
   ------------------------------------------------------------ */
.gingr-hscroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--navy) var(--wp--preset--color--line);
}
.gingr-hscroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}
.gingr-hscroll::-webkit-scrollbar {
	height: 8px;
}
.gingr-hscroll::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
}
.gingr-hscroll::-webkit-scrollbar-track {
	border-radius: 999px;
	background: var(--wp--preset--color--line);
}
/* Hint that there is more to see, shown only while scrolling is possible. */
.gingr-hscroll-hint {
	display: none;
	margin: 10px 0 0;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.875rem; /* style guide "14px bold" */
	font-weight: 700;
	line-height: 1.4;
}
.gingr-hscroll-hint.is-visible {
	display: block;
}

/* ============================================================
   Framework diagram (gingr/framework-diagram) — /metrics/how-to/
   Figma: 438px step panel + 640px components panel on #F5F7FB,
   40px gutter, chips colour-coded by type.
   ============================================================ */
.gingr-fwd {
	--gingr-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1v14M1 11l5 5 5-5' fill='none' stroke='%231E2A3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--gingr-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%231E2A3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--gingr-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 8H3M7 4 3 8l4 4' fill='none' stroke='%231E2A3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* right padding trimmed from 40px so the right rail — which Figma draws
	   outside the components panel — fits inside the scroll box */
	padding: 40px 26px 40px 40px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 22px 52px rgba(14, 35, 80, 0.15);
}
.gingr-fwd__inner {
	/* 1118px of panels + the right rail, which sits clear of them much as the
	   left rail does (1118 + 21 + 2px of rail = 1141, plus 2px of air) */
	min-width: 1143px;
}
/* the scroll viewport reaches 11px into the card's right padding so the rail is
   inside it and no scrollbar appears at full width. The 24px below gives the
   bottom row's hover shadow room before the scroller clips it. */
.gingr-fwd > .gingr-hscroll {
	margin-right: -11px;
	padding-bottom: 24px;
	margin-bottom: -24px;
}

/* legend bar above the diagram */
.gingr-fwd__legend {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 1118px; /* the panels' width; Figma sizes the legend to them */
	margin-bottom: 32px;
	padding: 20px 16px; /* Figma 20 top/bottom, 16 left/right */
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}
.gingr-fwd__legend-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 0.75px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold) no-repeat center/12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='%231E2A3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gingr-fwd__legend-text {
	flex: 1;
	margin: 0;
	white-space: nowrap; /* one line at every width; it scrolls with the diagram */
	color: var(--wp--preset--color--navy);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4;
}
.gingr-fwd__png {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4; /* style guide "16px bold" */
	text-decoration: none;
}
/* the design's download glyph: a shaft with a chevron over a baseline */
.gingr-fwd__png::before {
	content: "";
	width: 14px;
	height: 14px;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 6.2 7 9.6l3.5-3.4M1 13h12' fill='none' stroke='%231E2A3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gingr-fwd__png:hover,
.gingr-fwd__png:focus-visible {
	border-color: var(--wp--preset--color--navy); /* Figma: border only */
}

/* column headers + rows share one 438/640 track with a 40px gutter */
.gingr-fwd__head,
.gingr-fwd__row {
	display: grid;
	grid-template-columns: 438px 640px;
	gap: 40px;
}
.gingr-fwd__head {
	padding: 0 0 12px;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px; /* style guide "12px heavy caps": 1.00px, auto height */
	line-height: 1.2;
	text-transform: uppercase; /* Figma textCase: UPPER */
}
/* the step column carries two labels of its own */
.gingr-fwd__head-step {
	display: grid;
	grid-template-columns: 1fr 284px;
	gap: 48px;
}
.gingr-fwd__head-step::after {
	content: "type of guidance or tool";
}
.gingr-fwd__head-type {
	display: none; /* rendered by ::after above so it lines up with the chips */
}
.gingr-fwd__row + .gingr-fwd__row {
	position: relative;
	margin-top: 19px; /* measured between the panels in the Figma export */
}
/* (the connector wiring below replaces the single centred arrow) */

.gingr-fwd__step,
.gingr-fwd__components {
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}
.gingr-fwd__step {
	display: grid;
	grid-template-columns: 1fr 284px; /* resolves to Figma's 72 + 284 */
	gap: 48px;
	align-items: stretch;
}
.gingr-fwd__stage {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Figma centres this column both ways inside the panel: the icon and its
	   label are centred in a 72px column, and the column itself sits on the
	   panel's vertical centre (equal 24px insets top and bottom). */
	align-items: center;
	justify-content: center;
	text-align: center;
}
.gingr-fwd__icon {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
}
.gingr-fwd__icon img {
	width: 32px;
	height: 32px;
	display: block;
}
.gingr-fwd__stage-name {
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3;
}
.gingr-fwd__types {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* share the panel height evenly, as the design does */
.gingr-fwd__types > .gingr-fwd__type {
	flex: 1 1 0;
}
.gingr-fwd__type {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4;
}
.gingr-fwd__components {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gingr-fwd__line {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
/* a lone component in a row spans both columns, as in the design */
.gingr-fwd__line > .gingr-fwd__component:only-child {
	grid-column: 1 / -1;
}
.gingr-fwd__component {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	/* same lift as the cards on /databases/ (.gingr-db-card) */
	transition: transform 0.25s, box-shadow 0.25s;
}
.gingr-fwd__component:hover,
.gingr-fwd__component:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.gingr-fwd__arrow {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background: no-repeat center/12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   Connector wiring, traced from the Figma frame.

   · down arrows in the 19px gutter: two after stages 1 and 2, one centred
     after stage 3, none after stage 4
   · a rail at x=457 leaving stage 1 and feeding arrows into stages 3, 4, 5
   · a rail at the right taking arrows out of stages 2, 3 and 4 and turning
     back into stage 5

   Each row carries one overlay that starts 19px above it, so a rail segment
   spans its own row plus the gutter above and meets the segment above it
   exactly. The rails are real boxes (::before / ::after) rather than
   background bands — the bands left visible seams at every row boundary.
   ------------------------------------------------------------ */
.gingr-fwd__rows {
	position: relative;
}
.gingr-fwd__row {
	position: relative;
}
.gingr-fwd__wires {
	position: absolute;
	left: 0;
	right: 0;
	top: -19px;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-repeat: no-repeat;
}

/* Arrow glyphs for each row, in one declaration per stage. The x values are
   set so each arrow's shaft meets its rail — measured at the rail bottoms,
   the left head sat 4px clear and the right head 10px clear, which read as
   the rails not joining their arrows.
   down arrows sit in the gutter above the row; the left arrowhead marks where
   the left rail feeds the stage; the right one where it leaves for the rail. */
.gingr-fwd__row[data-index="1"] .gingr-fwd__wires {
	/* the horizontal stub out of the first stage, meeting the vertical rail */
	background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink));
	background-position: 457px calc(50% + 9px);
	background-size: 42px 2px;
}
.gingr-fwd__row[data-index="2"] .gingr-fwd__wires {
	background-image: var(--gingr-arrow-down), var(--gingr-arrow-down), var(--gingr-arrow-right);
	background-position: 615px 1px, 975px 1px, 1124px calc(50% + 9px);
	background-size: 12px 17px, 12px 17px, 16px 16px;
}
.gingr-fwd__row[data-index="3"] .gingr-fwd__wires {
	background-image: var(--gingr-arrow-down), var(--gingr-arrow-down),
		var(--gingr-arrow-right), var(--gingr-arrow-right);
	background-position: 615px 1px, 975px 1px, 457px calc(50% + 9px), 1124px calc(50% + 9px);
	background-size: 12px 17px, 12px 17px, 16px 16px, 16px 16px;
}
.gingr-fwd__row[data-index="4"] .gingr-fwd__wires {
	background-image: var(--gingr-arrow-down), var(--gingr-arrow-right), var(--gingr-arrow-right);
	background-position: 795px 1px, 457px calc(50% + 9px), 1124px calc(50% + 9px);
	background-size: 12px 17px, 16px 16px, 16px 16px;
}
.gingr-fwd__row[data-index="5"] .gingr-fwd__wires {
	background-image: var(--gingr-arrow-right), var(--gingr-arrow-left);
	background-position: 457px calc(50% + 9px), 1124px calc(50% + 9px);
	background-size: 16px 16px, 16px 16px;
}

/* left rail — one continuous 2px line built from per-row segments */
.gingr-fwd__row[data-index="1"] .gingr-fwd__wires::before,
.gingr-fwd__row[data-index="2"] .gingr-fwd__wires::before,
.gingr-fwd__row[data-index="3"] .gingr-fwd__wires::before,
.gingr-fwd__row[data-index="4"] .gingr-fwd__wires::before,
.gingr-fwd__row[data-index="5"] .gingr-fwd__wires::before {
	content: "";
	position: absolute;
	left: 457px;
	width: 2px;
	background: var(--wp--preset--color--ink);
	top: 0;
	bottom: 0;
}
/* it leaves the first stage half way down and stops half way into the last */
.gingr-fwd__row[data-index="1"] .gingr-fwd__wires::before {
	top: calc(50% + 9px); /* meets the stub leaving the first stage */
}
.gingr-fwd__row[data-index="5"] .gingr-fwd__wires::before {
	bottom: calc(50% - 9px); /* runs down to the last arrowhead */
}
/* right rail — same construction, kept inside the scroll box */
.gingr-fwd__row[data-index="2"] .gingr-fwd__wires::after,
.gingr-fwd__row[data-index="3"] .gingr-fwd__wires::after,
.gingr-fwd__row[data-index="4"] .gingr-fwd__wires::after,
.gingr-fwd__row[data-index="5"] .gingr-fwd__wires::after {
	content: "";
	position: absolute;
	left: 1138px; /* the arrowheads' points stop at 1137, so the rail starts just
	                 clear of them rather than swallowing the last two pixels */
	width: 2px;
	background: var(--wp--preset--color--ink);
	top: 0;
	bottom: 0;
}
.gingr-fwd__row[data-index="2"] .gingr-fwd__wires::after {
	top: calc(50% + 9px);
}
.gingr-fwd__row[data-index="5"] .gingr-fwd__wires::after {
	bottom: calc(50% - 9px);
}

/* --- type colours (chips and their components share them) --------------- */
.gingr-fwd__type[data-type="foundational-guidance"],
.gingr-fwd__component[data-type="foundational-guidance"] {
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
}
.gingr-fwd__type[data-type="foundational-tool"],
.gingr-fwd__component[data-type="foundational-tool"],
.gingr-fwd__type[data-type="operational-tool"],
.gingr-fwd__component[data-type="operational-tool"] {
	background: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--ink);
}
.gingr-fwd__type[data-type="operational-guidance"],
.gingr-fwd__component[data-type="operational-guidance"] {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--ink);
}
.gingr-fwd__type[data-type="implementation-guidance"],
.gingr-fwd__component[data-type="implementation-guidance"] {
	background: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--ink);
}
/* fallback for a type nobody has colour-coded yet */
.gingr-fwd__type:not([data-type]),
.gingr-fwd__component:not([data-type]) {
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--navy);
}

/* The arrow SVG cannot inherit currentColor through a data URI, so the two
   text colours are painted explicitly. */
.gingr-fwd__component[data-type="foundational-guidance"] .gingr-fwd__arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gingr-fwd__component .gingr-fwd__arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='%231E2A3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gingr-fwd__component[data-type="foundational-guidance"] .gingr-fwd__arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Figma "Arrow component": the circle fills yellow, arrow dark, while its
   component is hovered or focused */
.gingr-fwd__arrow {
	transition: background-color 0.25s, border-color 0.25s;
}
.gingr-fwd__component:hover .gingr-fwd__arrow,
.gingr-fwd__component:focus-visible .gingr-fwd__arrow {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--gold);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M7 3l3 3-3 3' fill='none' stroke='%231E2A3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The navy call-to-action strip under the diagram. */
.gingr-fwd-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	padding: 24px 28px;
	border-radius: 12px;
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-fwd-cta__title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 1.5rem; /* Figma 24/700 */
	font-weight: 700;
	line-height: 1.3;
}
.gingr-fwd-cta__text {
	margin: 0;
	color: var(--wp--preset--color--surface);
	font-size: 1rem; /* style guide "16px regular" */
	line-height: 1.6;
}

/* ============================================================
   Toolbox page (gingr/framework) — /metrics/toolbox/
   Figma "Desktop 1440 - Framework Content" (211:3164) and
   "Mobile 390 - Framework Content" (435:5460). Top to bottom: navy hero,
   filter bar, stage groups of 2-up cards, and the web-tool card lifted
   into its own full-width band after its stage.
   ============================================================ */
.gingr-tb,
.gingr-tb-hero {
	/* icons are masks, so they take the text colour */
	--tb-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12.5 7h-11M5.5 3 1.5 7l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tb-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v8M3.5 6.5 7 10l3.5-3.5M1.5 13h11' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tb-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 4.75V8l2.25 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tb-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.25 5 6.75l3.5-3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- hero ------------------------------------------------------------------
   The hero is page content (kicker, h1, a paragraph holding the button) and
   must not be re-seeded, so the Figma layout is applied here: the heading in
   a 788px column, the button bottom-right, a gold rule under the title. The
   outer tracks centre a 1200px column the way the constrained layout would. */
.gingr-tb-hero {
	display: grid;
	grid-template-columns:
		max(0px, calc((100% - 1200px) / 2))
		minmax(0, 788px)
		minmax(24px, 1fr)
		auto
		max(0px, calc((100% - 1200px) / 2));
	align-items: end;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
	/* Figma strokes the section on the inside, white at 14% */
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -1px rgba(255, 255, 255, 0.14);
	color: #fff;
}
.gingr-tb-hero > * {
	max-width: none !important;
	margin: 0 !important;
}
.gingr-tb-hero > .gingr-kicker {
	grid-column: 2;
	grid-row: 1;
	margin-bottom: 16px !important;
	padding: 0 4px;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
}
.gingr-tb-hero > h1 {
	grid-column: 2;
	grid-row: 2;
	color: #fff;
	font-size: clamp(2rem, 1.5185rem + 1.9753vw, 3rem); /* H3 32px → H1 48px */
	font-weight: 800;
	line-height: 1.1; /* Figma 48/52.8 */
}
.gingr-tb-hero > h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 16px;
	border-radius: 1000px;
	background: var(--wp--preset--color--gold);
}
.gingr-tb-hero > p:has(> .gingr-btn) {
	grid-column: 4;
	grid-row: 1 / 3;
	align-self: end;
}
.gingr-tb-hero .gingr-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10.8px 19px 10.8px 17px; /* Figma 12/20/12/18 inside a 1px stroke; 46px tall */
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4; /* style guide "16px heavy" */
	white-space: nowrap;
}
.gingr-tb-hero .gingr-btn::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--tb-i-back) no-repeat center / contain;
	mask: var(--tb-i-back) no-repeat center / contain;
}
.gingr-tb-hero .gingr-btn:hover,
.gingr-tb-hero .gingr-btn:focus-visible {
	border-color: var(--wp--preset--color--gold); /* Figma hover: yellow */
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
/* the section holding the block: the filter bar sits flush under the hero,
   and the block supplies its own spacing */
.gingr-tb-hero + .wp-block-group:has(> .gingr-tb) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- filter bar ------------------------------------------------------------ */
.gingr-tb__bar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 16px 0 17px; /* Figma 67px bar: 16 + 34 + 17 */
}
/* full-bleed 1px rules above and below: a 1px strip whose shadow is spread
   sideways and clipped back to its own height, so nothing scrolls sideways */
.gingr-tb__bar::before,
.gingr-tb__bar::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--wp--preset--color--line-strong);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--line-strong);
	clip-path: inset(0 -100vmax);
}
.gingr-tb__bar::before {
	top: 0;
}
.gingr-tb__bar::after {
	bottom: 0;
}
.gingr-tb__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
.gingr-tb__filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gingr-tb__filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gingr-tb__filter-label {
	padding: 0 4px;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}
.gingr-tb__filter {
	padding: 6.2px 16px; /* 34px tall with the 1px stroke and the 19.6px (140%) line */
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--navy-light);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4; /* style guide "14px heavy" */
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gingr-tb__filter:hover,
.gingr-tb__filter:focus-visible {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}
/* the format filter hovers in yellow (Figma "content type filter") */
.gingr-tb__filter[data-format]:hover,
.gingr-tb__filter[data-format]:focus-visible {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.gingr-tb__filter[data-step].is-active {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-tb__filter[data-format].is-active {
	border-color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.gingr-tb__count {
	margin: 0 0 0 auto;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: right;
}
.gingr-tb__empty {
	margin: 0 0 120px;
	color: var(--wp--preset--color--navy-light);
	font-weight: 700;
	text-align: center;
}

/* --- stage groups ---------------------------------------------------------- */
.gingr-tb__groups {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 56px 0 120px;
}
.gingr-tb__group[hidden] {
	display: none;
}
.gingr-tb__stage {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
}
.gingr-tb__stage-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-alt);
}
.gingr-tb__stage-icon img {
	display: block;
	width: 32px;
	height: 32px;
}
.gingr-tb__stage-name {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.3; /* Figma 24/31.2 */
}
/* the web-tool band: full-bleed pale background, same no-scroll trick */
.gingr-tb__band {
	padding: 48px 0;
	background: var(--wp--preset--color--surface-alt);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface-alt);
	clip-path: inset(0 -100vmax);
}

/* --- cards ----------------------------------------------------------------- */
.gingr-tb__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
/* framework.js measures natural card heights with this, then balances rows.
   A row holding an opened card does not stretch either — otherwise its
   neighbour grows to match and fills with blank space. */
.gingr-tb__grid.is-measuring,
.gingr-tb__grid:has(> .gingr-tb__card.is-open) {
	align-items: start;
}
/* The card is the coloured plate: a 23px band in the type's colour, with the
   white card 4px lower on top of it (the How-To challenge cards' technique). */
.gingr-tb__card {
	--tb-tone: var(--wp--preset--color--line-strong);
	display: flex;
	flex-direction: column;
	min-width: 0; /* never let a one-line teaser widen its grid track */
	padding-top: 4px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(var(--tb-tone), var(--tb-tone)) top left / 100% 23px no-repeat;
	scroll-margin-top: 130px; /* clears the sticky header when linked to */
}
.gingr-tb__card[hidden] {
	display: none;
}
.gingr-tb__card[data-type="foundational-guidance"] {
	--tb-tone: var(--wp--preset--color--navy-deep);
}
.gingr-tb__card[data-type="foundational-tool"],
.gingr-tb__card[data-type="operational-tool"] {
	--tb-tone: var(--wp--preset--color--blue-soft);
}
.gingr-tb__card[data-type="operational-guidance"] {
	--tb-tone: var(--wp--preset--color--green);
}
.gingr-tb__card[data-type="implementation-guidance"] {
	--tb-tone: var(--wp--preset--color--gold-light);
}
.gingr-tb__card-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 32px 16px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 28px -4px rgba(14, 35, 80, 0.2);
	transition: box-shadow 0.25s;
}
/* hover: the same lift as the framework diagram's links on How-To (and the
   /databases/ cards) — up 4px with a deeper shadow */
.gingr-tb__card {
	transition: transform 0.25s;
}
.gingr-tb__card:hover,
.gingr-tb__card:focus-within {
	transform: translateY(-4px);
}
.gingr-tb__card:hover .gingr-tb__card-inner,
.gingr-tb__card:focus-within .gingr-tb__card-inner {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
@media (prefers-reduced-motion: reduce) {
	.gingr-tb__card,
	.gingr-tb__card-inner {
		transition: none;
	}
}
/* Arrived from the framework diagram (framework.js) — Figma "state: focused":
   a "Selected from the framework" row with a close button, a 2px dark-blue
   border and a yellow glow that fades after 2s into "un-focused". */
.gingr-tb {
	--tb-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cpath d='M1.5 6.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--tb-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gingr-tb__card.is-target .gingr-tb__card-inner {
	padding-top: 16px; /* the 32px row takes the place of the usual top padding */
	border: 2px solid var(--wp--preset--color--navy-deep);
	transition: box-shadow 0.6s ease;
}
.gingr-tb__card.is-target.is-glowing .gingr-tb__card-inner {
	box-shadow: 0 0 12px 2px rgba(245, 175, 0, 0.9);
}
.gingr-tb__selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	margin: 0 0 16px;
	padding: 0 16px;
}
.gingr-tb__selected[hidden] {
	display: none;
}
.gingr-tb__card.is-wide .gingr-tb__selected {
	grid-column: 1 / -1;
}
.gingr-tb__selected-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}
.gingr-tb__selected-label::before {
	content: "";
	flex: none;
	width: 15px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--tb-i-check) no-repeat center / contain;
	mask: var(--tb-i-check) no-repeat center / contain;
}
.gingr-tb__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: -9px; /* the 14px cross sits flush with the content edge */
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
}
.gingr-tb__close::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--tb-i-close) no-repeat center / contain;
	mask: var(--tb-i-close) no-repeat center / contain;
	transition: transform 0.2s ease;
}
.gingr-tb__close:hover::before,
.gingr-tb__close:focus-visible::before {
	transform: rotate(90deg); /* Figma: "icon rotates 90°" */
}
.gingr-tb__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 16px;
}
.gingr-tb__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
}
.gingr-tb__type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase; /* Figma textCase: UPPER */
}
.gingr-tb__swatch {
	flex: none;
	width: 12px;
	height: 12px;
	border: 0.5px solid var(--wp--preset--color--line-strong);
	border-radius: 2px;
	background: var(--tb-tone);
}
.gingr-tb__format {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--navy);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}
.gingr-tb__title {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3; /* Figma 18/23.4 */
}
.gingr-tb__aim {
	display: flex;
	gap: 16px;
	padding: 20px 16px 12px;
}
.gingr-tb__aim::before {
	content: "";
	flex: none;
	width: 3px;
	border-radius: 1000px;
	background: var(--wp--preset--color--gold);
}
.gingr-tb__aim-body {
	min-width: 0;
}
.gingr-tb__aim-label {
	margin: 0 0 5px;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}
.gingr-tb__aim-text {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	line-height: 1.6; /* Figma 16/25.6 */
}
/* teaser row: clamped body, "Read more" beside its last line */
.gingr-tb__more-box {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 16px;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}
/* the whole box toggles once it has something to reveal (framework.js) */
.gingr-tb__more-box.is-clickable {
	cursor: pointer;
}
@media (hover: hover) {
	.gingr-tb__more-box.is-clickable:hover {
		background: var(--wp--preset--color--surface);
	}
	.gingr-tb__card.is-wide .gingr-tb__more-box.is-clickable:hover {
		background: var(--wp--preset--color--surface-alt);
	}
}
/* open: the text takes the full width and "Read less" moves below it */
.gingr-tb__more-box.is-open {
	flex-direction: column;
	align-items: flex-start;
}
.gingr-tb__body {
	flex: 1;
	min-width: 0;
	color: rgba(30, 42, 58, 0.8); /* ink at the design's 80% */
	font-size: 1rem;
	line-height: 1.6;
}
.gingr-tb__body > * {
	margin: 0 0 1em;
}
.gingr-tb__body > :last-child {
	margin-bottom: 0;
}
/* collapsed (only once framework.js is running): the paragraphs run on as one
   line of text. A one-line teaser is cut with text-overflow, which — like
   Figma's truncation — can end mid-word right up to "Read more"; teasers the
   row balancing lengthens (.is-multiline) use a line clamp instead. */
.gingr-tb.is-enhanced .gingr-tb__body:not(.is-open) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gingr-tb.is-enhanced .gingr-tb__card.is-multiline .gingr-tb__body:not(.is-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--tb-lines, 2);
	white-space: normal;
}
.gingr-tb.is-enhanced .gingr-tb__body:not(.is-open) > * {
	display: inline;
	margin: 0;
}
.gingr-tb.is-enhanced .gingr-tb__body:not(.is-open) > * + *::before {
	content: " ";
}
.gingr-tb__more {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gold);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}
.gingr-tb__more[hidden] {
	display: none;
}
.gingr-tb__more::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--tb-i-chevron) no-repeat center / contain;
	mask: var(--tb-i-chevron) no-repeat center / contain;
	transition: transform 0.2s ease;
}
.gingr-tb__more[aria-expanded="true"]::after {
	transform: rotate(180deg);
}
.gingr-tb__more:hover,
.gingr-tb__more:focus-visible {
	color: var(--wp--preset--color--navy);
}
.gingr-tb__actions {
	margin: auto 0 0; /* pinned to the bottom of equal-height cards */
	padding: 16px 16px 0;
}
.gingr-tb__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10.8px 19px 10.8px 17px; /* Figma 12/20/12/18 inside a 1px stroke; 46px tall */
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4; /* style guide "16px heavy" */
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gingr-tb__cta.is-download::before,
.gingr-tb__cta.is-disabled::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--tb-i-download) no-repeat center / contain;
	mask: var(--tb-i-download) no-repeat center / contain;
}
.gingr-tb__cta.is-download:hover,
.gingr-tb__cta.is-download:focus-visible {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-tb__cta.is-primary {
	padding: 10.8px 19px;
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.gingr-tb__cta.is-primary:hover,
.gingr-tb__cta.is-primary:focus-visible {
	border-color: var(--wp--preset--color--gold); /* Figma hover: yellow */
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
/* "PDF not yet available": pale pill, clock icon, content at 50% */
.gingr-tb__cta.is-disabled {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	cursor: default;
}
.gingr-tb__cta.is-disabled::before {
	width: 16px;
	height: 16px;
	opacity: 0.5;
	-webkit-mask-image: var(--tb-i-clock);
	mask-image: var(--tb-i-clock);
}
.gingr-tb__cta.is-disabled > span {
	opacity: 0.5;
}

/* --- the web-tool card ----------------------------------------------------- */
.gingr-tb__card.is-wide .gingr-tb__card-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	column-gap: 48px;
	border: 2px solid var(--wp--preset--color--blue-soft);
	box-shadow: 0 22px 52px -17px rgba(14, 35, 80, 0.15);
}
.gingr-tb__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.gingr-tb__aside {
	min-width: 0;
	padding: 0 16px;
}
.gingr-tb__card.is-wide .gingr-tb__title {
	font-size: 1.5rem; /* Figma 24/31.2 */
}
.gingr-tb__card.is-wide .gingr-tb__aim::before {
	background: var(--wp--preset--color--blue-soft);
}
.gingr-tb__card.is-wide .gingr-tb__aim-label,
.gingr-tb__card.is-wide .gingr-tb__more {
	color: var(--wp--preset--color--navy-light);
}
.gingr-tb__card.is-wide .gingr-tb__more:hover,
.gingr-tb__card.is-wide .gingr-tb__more:focus-visible {
	color: var(--wp--preset--color--navy);
}
.gingr-tb__card.is-wide .gingr-tb__actions {
	margin-top: 0;
}

/* metrics-table preview: a small window, clipped, fading out at the bottom */
.gingr-tb-preview {
	position: relative;
	height: 446px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 22px 33px -18px rgba(14, 35, 80, 0.25);
}
.gingr-tb-preview__bar {
	display: flex;
	align-items: center;
	height: 35px;
	padding: 0 14px;
	border-bottom: 1px solid #E4E7ED;
	background: #F6F8FB;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	line-height: 1.2;
}
.gingr-tb-preview__window {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0.6;
}
.gingr-tb-preview__window i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}
.gingr-tb-preview__name {
	margin-left: 8px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.gingr-tb-preview__tag {
	margin-left: auto;
	font-weight: 900;
	opacity: 0.6;
}
.gingr-tb-preview__table {
	width: 634px; /* the leading seven columns; the rest never show in the window */
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.75rem;
}
.gingr-tb-preview__table th,
.gingr-tb-preview__table td {
	border: 0;
	text-align: left;
	vertical-align: top;
}
.gingr-tb-preview__table th:nth-child(1) { width: 121px; }
.gingr-tb-preview__table th:nth-child(2) { width: 104px; }
.gingr-tb-preview__table th:nth-child(3) { width: 150px; }
.gingr-tb-preview__table th:nth-child(4) { width: 104px; }
.gingr-tb-preview__table th:nth-child(5) { width: 53px; }
.gingr-tb-preview__table th:nth-child(6) { width: 50px; }
.gingr-tb-preview__table th:nth-child(7) { width: 52px; }
.gingr-tb-preview__table th {
	height: 35px;
	padding: 11px 13px;
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
	font-weight: 900;
	line-height: 1.2;
	white-space: nowrap;
}
.gingr-tb-preview__table td {
	padding: 10px 13px 12px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	line-height: 1.4; /* Figma 12/16.9 */
}
.gingr-tb-preview__table tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--surface);
}
.gingr-tb-preview__table .is-indicator {
	color: var(--wp--preset--color--navy-deep);
	font-weight: 900;
	white-space: nowrap; /* one line in Figma; the browser's Lato Black is a hair wider */
}
.gingr-tb-preview__table .is-group {
	color: #6B7A91;
}
/* Figma truncates only the cells it gives a line limit (set inline as --lines);
   every other cell wraps freely */
.gingr-tb-preview__table td > span[style] {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lines);
}
.gingr-tb-preview__table .is-role {
	padding-top: 13px;
}
.gingr-tb-preview__pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 900;
	line-height: 1.2;
}
.gingr-tb-preview__pill.is-green {
	background: #E6F3E6;
	color: #2E7D32;
}
.gingr-tb-preview__pill.is-amber {
	background: #FDEBD8;
	color: #B4620A;
}
.gingr-tb-preview__pill.is-grey {
	background: var(--wp--preset--color--line);
	color: #727882;
}
.gingr-tb-preview__table .is-check {
	padding-top: 11px;
	color: #2E7D32;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
.gingr-tb-preview__table .is-check.is-no {
	color: var(--wp--preset--color--line-strong);
}
.gingr-tb-preview::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 88px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 82%);
	pointer-events: none;
}
.gingr-tb-preview__more {
	position: absolute;
	right: 0;
	bottom: 15px;
	left: 0;
	z-index: 1;
	margin: 0;
	color: var(--wp--preset--color--navy-light);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
}

/* --- narrower screens ------------------------------------------------------ */
@media (max-width: 1024px) {
	/* minmax(0, …), not 1fr: a plain 1fr track can't shrink below its content's
	   min-content width, and a one-line teaser is as wide as its whole text */
	.gingr-tb__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.gingr-tb__card.is-wide .gingr-tb__card-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
}
/* Figma "Mobile 390 - Framework Content" */
@media (max-width: 599.98px) {
	.gingr-tb-hero {
		display: block;
		padding-top: 80px !important;
	}
	/* text sits 4px inside the 10px phone margin, as elsewhere on these pages */
	.gingr-tb-hero > .gingr-kicker {
		padding: 0 4px 0 8px;
	}
	.gingr-tb-hero > h1 {
		/* Figma leaves 24px on the right; 2px less absorbs the browser's slightly
		   wider Lato Black ("Offshore Wind Nature-" is 338.7px against a 338px
		   box), so the title breaks where the design breaks it */
		padding: 0 26px 0 4px;
		font-size: 2rem;
		font-weight: 900;
		line-height: 1.1; /* Figma 32/35.2 */
	}
	.gingr-tb-hero > p:has(> .gingr-btn) {
		margin-top: 32px !important;
		padding-right: 4px;
		text-align: right;
	}
	.gingr-tb__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 16px 4px;
	}
	.gingr-tb__filters {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}
	.gingr-tb__filter-group {
		flex-direction: column;
		align-items: flex-start;
	}
	/* buttons line up in columns, each column as wide as its widest button */
	.gingr-tb__filter-buttons {
		display: grid;
		grid-template-columns: repeat(4, auto);
	}
	.gingr-tb__filter-group[data-group="format"] .gingr-tb__filter-buttons {
		grid-template-columns: repeat(3, auto);
	}
	.gingr-tb__count {
		margin: 0;
		padding: 0 4px;
		text-align: left;
	}
	.gingr-tb__groups {
		padding: 48px 0 80px;
	}
	.gingr-tb__band {
		margin-block: 4px; /* 60px around the band on phones, 56px elsewhere */
		padding: 60px 0;
	}
	.gingr-tb__stage {
		padding: 0 4px 16px;
	}
	.gingr-tb__card-inner {
		padding: 24px 10px;
	}
	.gingr-tb__head {
		padding: 0 8px;
	}
	.gingr-tb__aim {
		gap: 10px;
		padding: 20px 8px 12px;
	}
	.gingr-tb__more-box {
		padding: 8px;
	}
	.gingr-tb__more-box.is-open {
		background: var(--wp--preset--color--surface);
	}
	.gingr-tb__card.is-wide .gingr-tb__more-box.is-open {
		background: var(--wp--preset--color--surface-alt);
	}
	.gingr-tb__selected {
		padding: 0 8px;
	}
	.gingr-tb__actions {
		padding: 12px 4px 0;
	}
	.gingr-tb__card.is-wide .gingr-tb__card-inner {
		padding: 24px 10px 14px;
	}
	.gingr-tb__aside {
		padding: 0 4px 4px;
	}
	.gingr-tb-preview {
		height: 336px;
	}
}

/* ============================================================
   "How To" framework landing page (/metrics/how-to/)
   ============================================================ */
/* Type follows the style guide: the desktop style from a 1200px viewport up,
   the style Figma's 390px frame uses at 390px, scaling linearly in between. */
.gingr-howto-hero-title {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: clamp(2rem, 1.5185rem + 1.9753vw, 3rem); /* H3 32px → H1 48px */
	font-weight: 800; /* H1: Lato Heavy */
	line-height: 1.1;
}
.gingr-howto-lead {
	margin: 0;
	color: var(--wp--preset--color--navy-light); /* Figma #485E84 */
	font-size: clamp(1.25rem, 1.1296rem + 0.4938vw, 1.5rem); /* 20px bold → 24px bold */
	font-weight: 700;
	line-height: 1.3; /* "24px bold" 130% */
}
.gingr-howto-h2 {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: clamp(2rem, 1.7593rem + 0.9877vw, 2.5rem); /* H3 32px → H2 40px */
	font-weight: 900;
	line-height: 1.1;
}
.gingr-howto-sub {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.125rem, 1.0648rem + 0.2469vw, 1.25rem); /* 18px → 20px regular */
	line-height: 1.4;
}
@media (max-width: 599.98px) {
	.gingr-howto-hero-title {
		font-weight: 900; /* the phone frame sets H1 as H3: Lato Black */
	}
	.gingr-howto-lead {
		line-height: 1.4; /* "20px bold" 140% */
	}
}
.gingr-howto-body p {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6; /* Figma 16/25.6 */
}

/* Three "challenges" cards */
.gingr-challenges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.gingr-challenge {
	padding: 32px 24px; /* Figma */
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	height: 100%;
}
.gingr-challenge h3 {
	margin: 0 0 16px;
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3;
}
.gingr-challenge p {
	margin: 0;
	color: var(--wp--preset--color--navy); /* Figma #354560 */
	font-size: 1rem;
	line-height: 1.6;
}

/* This theme does not set a global box-sizing, so padding on an element is
   added OUTSIDE its width/height: the CTA banner measured 1280px inside a
   1200px column, and the diagram's type chips came out 74px tall against a
   50px min-height. Rather than list every part, everything inside these two
   pages' own containers opts into border-box. */
.gingr-om-section *,
.gingr-om-hero-card *,
.gingr-fwd *,
.gingr-nav *,
.gingr-tb * {
	box-sizing: border-box;
}

/* This theme does not set a global box-sizing, so padding on a block-level
   element is added OUTSIDE its width: the CTA banner measured 1280px and the
   framework diagram 1248px inside a 1200px column. Every component introduced
   for these two pages opts into border-box explicitly. */
.gingr-om-hero-card,
.gingr-om-hero-body,
.gingr-om-section,
.gingr-om-intro,
.gingr-om-challenges,
.gingr-challenges,
.gingr-challenge,
.gingr-cta-banner,
.gingr-cta-banner__left,
.gingr-cta-banner__right,
.gingr-steps,
.gingr-step,
.gingr-step__icon,
.gingr-fwd,
.gingr-fwd__inner,
.gingr-fwd__row,
.gingr-fwd__component,
.gingr-fwd-cta,
.gingr-hscroll,
.gingr-howto-logos,
.gingr-tb,
.gingr-tb__card,
.gingr-tb__filters,
.gingr-tb__filter,
.gingr-tb__grid,
.gingr-btn {
	box-sizing: border-box;
}

/* ------------------------------------------------------------
   /metrics/how-to/ — hero
   Figma: a 481px gradient banner with a 1200px white card pulled
   up over it (the same pattern as /our-work/), a 36px gold bar
   tucked behind the card's top edge, and the partner logo row.
   ------------------------------------------------------------ */
.gingr-om-hero {
	/* Figma applies this gradient at 70% node opacity, which is what makes it
	   read so much lighter than the raw stops. */
	background: linear-gradient(112deg,
		rgba(53, 69, 96, 0.7) -18.3%,
		rgba(178, 199, 235, 0.7) 28.7%,
		rgba(245, 175, 0, 0.7) 123.5%), #fff;
}
.gingr-om-hero-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 22px 52px rgba(14, 35, 80, 0.15);
}
/* Figma draws a coloured plate BEHIND each card: same width, 4px higher, with
   only its top corners rounded. The card covers everything except that 4px
   strip and the slivers where the card's own radius pulls away from it — which
   is what makes the colour appear to wrap the corner. Reproduced literally
   with a wrapper rather than a border or an overlay, both of which sit on top
   of the card and read far too heavy. */
.gingr-om-plate {
	padding-top: 4px;
	border-radius: 16px 16px 0 0;
	/* The plate is only 36px tall in Figma. As a wrapper it is as tall as the
	   card, so the colour is painted as a 36px band instead of a flat fill —
	   otherwise it reappears behind the card's rounded BOTTOM corners. */
	background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold))
		top left / 100% 36px no-repeat;
	box-sizing: border-box;
}
.gingr-om-plate > .gingr-om-hero-card {
	margin: 0;
}
.gingr-challenge-plate {
	padding-top: 4px;
	border-radius: 12px 12px 0 0;
	/* 23px band, for the same reason as the hero plate above */
	background: linear-gradient(var(--wp--preset--color--navy), var(--wp--preset--color--navy))
		top left / 100% 23px no-repeat;
	box-sizing: border-box;
}
.gingr-challenge-plate:nth-child(2) {
	background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold));
}
.gingr-challenge-plate:nth-child(3) {
	background-image: linear-gradient(var(--wp--preset--color--navy-light), var(--wp--preset--color--navy-light));
}

.gingr-om-hero-card > * {
	margin-block: 0;
}
.gingr-om-hero-card.gingr-om-hero-card > * + * {
	margin-top: 32px;
}
/* the heading column is narrower than the body below it */
.gingr-om-hero-head {
	max-width: 788px;
}
.gingr-om-hero-head.gingr-om-hero-head > * + * {
	margin-top: 16px;
}
.gingr-om-rule {
	width: 56px;
	height: 3px;
	margin: 0;
	border: 0;
	border-radius: 1000px;
	background: var(--wp--preset--color--gold);
}
.gingr-om-divider {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--wp--preset--color--line-strong);
}
.gingr-om-hero-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 42px;
	align-items: start;
}
.gingr-om-hero-body p {
	margin: 0 0 18px; /* Figma spaces the stacked paragraphs by 18px */
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6; /* Figma 16/25.6 */
}
.gingr-om-hero-body p:last-child {
	margin-bottom: 0;
}
.gingr-howto-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 32px;
	margin: 0;
	padding: 0;
	border: 0;
}
.gingr-howto-logos img {
	display: block;
	object-fit: contain;
	object-position: left center;
}
/* Figma fits each mark into its own box; the artwork's own aspect ratio does
   not match those boxes (RGI and Bluedot came out 20px and 16px too wide when
   sized by height alone), so both dimensions are pinned here.
   GINGR 176x60 · IUCN 67x62 · RGI 195x60 · Bluedot 168x70 */
.gingr-howto-logos img:nth-child(1) {
	width: 176px;
	height: 60px;
}
.gingr-howto-logos img:nth-child(2) {
	width: 67px;
	height: 62px;
}
.gingr-howto-logos img:nth-child(3) {
	width: 195px;
	height: 60px;
}
.gingr-howto-logos img:nth-child(4) {
	width: 168px;
	height: 70px;
}

/* ------------------------------------------------------------
   Section rhythm — the design uses a flat 80px top/bottom and a
   48px gap between blocks. The theme's spacing presets resolve
   fluidly (preset 60 is only 36px at 1440), so these are explicit.
   ------------------------------------------------------------ */
.gingr-om-section {
	padding-top: 80px;
	padding-bottom: 80px;
}
.gingr-om-section.gingr-om-section > * + * {
	margin-top: 48px;
}
.gingr-om-section--last {
	padding-bottom: 120px;
}
/* NOTE: the doubled class names in these rhythm rules are deliberate. They
   raise the selector to (0,2,0) so it outranks component-level `margin: 0`
   resets (e.g. .gingr-om-rule) that appear later in this file and would
   otherwise flatten the spacing to zero. */

/* Figma nests two groups inside the context section with their own rhythm:
   the intro (heading + body) at 32px, and the challenges (label + cards) at
   20px — both tighter than the section's 48px. */
.gingr-om-intro.gingr-om-intro > * + * {
	margin-top: 32px;
}
.gingr-om-challenges.gingr-om-challenges > * + * {
	margin-top: 20px;
}

/* Section heading blocks sit in a 782px column, not the full width. */
/* No max-width here on purpose: WordPress's constrained layout caps this at the
   section's 1200px content column and centres it. Setting any max-width (even
   `none`) overrides that and the heading slides out to the window edge. The
   782px measure lives on the children instead. */
/* WordPress's constrained layout centres any child narrower than the content
   column. Pushing the head left with margin would align it to the window's
   padding edge instead of the 1200px column, so the head fills the column and
   its children carry the 782px cap. */
.gingr-om-head > *,
.gingr-howto-body > * {
	max-width: 782px;
}
.gingr-om-hero-head {
	margin-left: 0 !important; /* inside the card, whose box is the target */
	margin-right: auto !important;
}

.gingr-om-head.gingr-om-head > * + * {
	margin-top: 16px;
}

/* "CHALLENGES" label with the rule running to the right of it */
.gingr-om-label-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.gingr-om-label-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line-strong);
}

/* Navy call-to-action banner at the end of the context section */
.gingr-cta-banner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	padding: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--navy);
}
.gingr-cta-banner__left {
	display: flex;
	gap: 20px;
	align-items: center; /* Figma counterAxisAlignItems: CENTER */
}
.gingr-cta-banner__left::before {
	content: "";
	flex: 0 0 3px;
	align-self: stretch; /* align-items:center would collapse it to 0 height */
	border-radius: 1000px;
	background: var(--wp--preset--color--gold);
}
.gingr-cta-banner__quote {
	margin: 0;
	color: #fff;
	font-size: clamp(1.25rem, 1.1296rem + 0.4938vw, 1.5rem); /* 20px bold → 24px bold */
	font-weight: 700;
	line-height: 1.3;
}
@media (max-width: 599.98px) {
	.gingr-cta-banner__quote {
		line-height: 1.4; /* "20px bold" 140% */
	}
}
.gingr-cta-banner__right {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.gingr-cta-banner__text {
	margin: 0;
	color: var(--wp--preset--color--surface);
	font-size: 1rem;
	line-height: 1.6;
}
/* gold pill button with the design's arrow glyph — Figma draws it pointing
   DOWN here, because the button jumps further down the same page */
.gingr-btn--arrow::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.6em;
	vertical-align: -0.05em;
	background: currentColor;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v11M3 8l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v11M3 8l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Five stage cards: icon tile + step number on one row, then title and text */
.gingr-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	/* no `margin: 0` here — it would cancel .gingr-om-section > * + * */
}
.gingr-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 20px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 12px;
	background: #fff;
}
.gingr-step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.gingr-step__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-alt);
}
.gingr-step__icon img {
	width: 28px;
	height: 28px;
	display: block;
}
.gingr-step__num {
	color: var(--wp--preset--color--line-strong);
	font-size: 0.875rem;
	font-weight: 900;
	line-height: 1.4; /* style guide "14px black": 140%, caps */
	text-transform: uppercase;
}
.gingr-step__title {
	margin: 8px 0 0; /* Figma's title frame carries 8px on top */
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3;
}
.gingr-step__text {
	margin: 0;
	/* Body at 70% and 16/150%, as the page frame sets it (the page frames are
	   the main reference; the style guide's body is 160% — see
	   design/feedback-for-client-and-designer.md). */
	color: rgba(30, 42, 58, 0.7);
	font-size: 1rem;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.gingr-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gingr-challenges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gingr-om-hero-body,
	.gingr-cta-banner {
		grid-template-columns: 1fr;
	}
	.gingr-om-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.gingr-om-section--last {
		padding-bottom: 72px;
	}
}
@media (max-width: 700px) {
	.gingr-steps,
	.gingr-challenges {
		grid-template-columns: 1fr;
	}
	/* Figma mobile step card: icon, name and number on one row, text below */
	.gingr-step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px 12px;
	}
	.gingr-step__top {
		display: contents;
	}
	.gingr-step__icon {
		grid-column: 1;
		grid-row: 1;
	}
	.gingr-step__title {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}
	.gingr-step__num {
		grid-column: 3;
		grid-row: 1;
	}
	.gingr-step__text {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.gingr-challenge {
		padding: 24px 20px; /* Figma mobile */
	}
	.gingr-fwd {
		padding: 16px;
	}
	.gingr-fwd-cta {
		flex-direction: column;
		align-items: flex-start;
	}
	.gingr-om-hero-card {
		padding: 32px 24px 24px !important;
	}
	.gingr-cta-banner {
		padding: 28px 24px;
	}
	/* Two rows of two. Every mark keeps its desktop box and all four shrink by
	   one factor, chosen so the wider pair (RGI 195 + Bluedot 168 = 363px)
	   fits beside a 24px gap; min() stops them growing past desktop size. */
	.gingr-howto-logos {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		gap: 20px 24px;
		container-type: inline-size;
	}
	.gingr-howto-logos img:nth-child(1) {
		width: min(176px, (100cqw - 24px) * 176 / 363);
		height: auto;
		aspect-ratio: 176 / 60;
	}
	.gingr-howto-logos img:nth-child(2) {
		width: min(67px, (100cqw - 24px) * 67 / 363);
		height: auto;
		aspect-ratio: 67 / 62;
	}
	.gingr-howto-logos img:nth-child(3) {
		width: min(195px, (100cqw - 24px) * 195 / 363);
		height: auto;
		aspect-ratio: 195 / 60;
	}
	.gingr-howto-logos img:nth-child(4) {
		width: min(168px, (100cqw - 24px) * 168 / 363);
		height: auto;
		aspect-ratio: 168 / 70;
	}
	.gingr-fwd__legend {
		padding: 10px; /* Figma mobile */
	}
}
/* How-To and Toolbox side margins, from Figma. WordPress spaces every section, card and
   alignfull breakout from --wp--style--root--padding-*, so resetting that pair
   on this page's <main> moves all edges together; header and footer sit
   outside <main> and keep the site-wide 24px.
   Desktop: Figma's 1440 frame has 120px margins, i.e. 1/12 of the width. The
   margin scales down with the window instead of collapsing to 24px; the -20px
   keeps the full 1200px column at 1440 even with a 15px classic scrollbar, so
   the framework diagram only has to scroll below ~1400px (it and the navigator
   scroll sideways there, as on tablets). */
main:has(.gingr-om-hero),
main:has(.gingr-tb) {
	--wp--style--root--padding-left: max(24px, min(120px, calc(8.333vw - 20px)));
	--wp--style--root--padding-right: max(24px, min(120px, calc(8.333vw - 20px)));
}
@media (max-width: 599.98px) {
	/* Figma phone: cards and graphics 10px from the screen edge; plain text
	   blocks (section headings, intro copy) carry 4px more, starting at 14px. */
	main:has(.gingr-om-hero),
	main:has(.gingr-tb) {
		--wp--style--root--padding-left: 10px;
		--wp--style--root--padding-right: 10px;
	}
	.gingr-om-section > .gingr-om-head,
	.gingr-om-section > .gingr-om-intro {
		padding-inline: 4px;
	}
	/* the "CHALLENGES" label row: Figma indents only its left edge, so the
	   divider line still runs out to the cards' right edge */
	.gingr-om-challenges > div:first-child {
		padding-left: 4px;
	}
}
@media (max-width: 599.98px) {
	/* Figma mobile starts the card 80px into the 481px gradient; desktop uses
	   120px. The desktop offset is the block's own inline margin (-357px incl.
	   the 4px plate), so the phone value has to override it. */
	.gingr-om-hero + .gingr-om-plate {
		margin-top: -401px !important;
	}
}

/* ============================================================
   About page — Team grid + Advisory Board list
   ============================================================ */
.gingr-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 36px 28px;
	margin-top: var(--wp--preset--spacing--40);
}
.gingr-team-card {
	text-align: center;
}
.gingr-team-card__photo {
	width: 150px;
	height: 150px;
	margin: 0 auto 16px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.gingr-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gingr-team-card__name {
	margin: 0 0 4px;
	color: var(--wp--preset--color--navy);
	font-size: 1.15rem;
}
.gingr-team-card__role {
	margin: 0 0 2px;
	color: #4b5563;
	font-size: 0.92rem;
	line-height: 1.45;
}
.gingr-team-card__org {
	margin: 0 0 6px;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.gingr-team-card__email {
	margin: 0;
	font-size: 0.88rem;
}
.gingr-team-card__email a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
.gingr-team-card__email a:hover {
	color: var(--wp--preset--color--gold);
}

/* Board cards reuse .gingr-team-card wholesale (same layout as the team, by
   request). These are the only additions: the card links through to the
   member's own page at /board/<slug>/. */
.gingr-team-card__photolink {
	display: block;
	border-radius: 50%;
}
.gingr-team-card__name a {
	color: inherit;
	text-decoration: none;
}
.gingr-team-card__name a:hover,
.gingr-team-card__name a:focus-visible {
	color: var(--wp--preset--color--gold);
}
.gingr-team-card__photolink img {
	transition: transform 0.25s ease;
}
.gingr-team-card__photolink:hover img {
	transform: scale(1.05);
}
.gingr-team-card__more {
	margin: 6px 0 0;
	font-size: 0.88rem;
}
.gingr-team-card__more a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
}
.gingr-team-card__more a:hover,
.gingr-team-card__more a:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* Single Advisory Board member page — /board/<slug>/ */
.gingr-person {
	text-align: center;
}
.gingr-person__back {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: left;
	font-size: 0.92rem;
}
.gingr-person__back a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
}
.gingr-person__back a:hover,
.gingr-person__back a:focus-visible {
	color: var(--wp--preset--color--gold);
}
.gingr-person__photo {
	width: 190px;
	height: 190px;
	margin: 0 auto 22px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.gingr-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gingr-person__name {
	margin: 0 0 6px;
	color: var(--wp--preset--color--navy);
}
.gingr-person__role {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.gingr-person__bio {
	text-align: left;
}
.gingr-person__bio p {
	margin: 0 0 1em;
}
.gingr-person__bio p:last-child {
	margin-bottom: 0;
}
.gingr-person__links {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 0.92rem;
}
.gingr-person__links a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
}
.gingr-person__links a:hover,
.gingr-person__links a:focus-visible {
	color: var(--wp--preset--color--gold);
}
.gingr-person__sep {
	margin: 0 10px;
	color: #9ca3af;
}

@media (max-width: 600px) {
	.gingr-person__photo {
		width: 150px;
		height: 150px;
	}
}

/* Offset in-page anchor targets (About submenu) for the sticky header */
#our-team, #our-board, #contact, #funding {
	scroll-margin-top: 110px;
}

/* Partner logo row at the bottom of the How To hero card */
/* ============================================================
   Navigator section (/metrics/how-to/)
   Figma: the Frame matrix in a padded #F5F7FB panel, then four
   collapsed stage rows (icon + name | summary | + toggle).
   ============================================================ */
.gingr-nav > * + * {
	margin-top: 32px;
}
.gingr-nav__matrix {
	padding: 40px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 22px 52px rgba(14, 35, 80, 0.15);
	box-sizing: border-box;
}
.gingr-nav__step {
	display: grid;
	grid-template-columns: 279px 1fr 47px;
	gap: 16px 24px; /* the opened detail sits 16px under the row */
	align-items: center; /* Figma centres the summary against the icon */
	padding: 32px 40px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 22px 52px -17px rgba(14, 35, 80, 0.15); /* Figma: spread −17 */
	box-sizing: border-box;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* The summary's children join the row grid, so the opened detail can span the
   whole box (under the icon too), as in Figma's "state: collapsed". */
.gingr-nav__summary {
	display: contents;
}
.gingr-nav__id {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}
.gingr-nav__short {
	grid-column: 2;
	grid-row: 1;
}
.gingr-nav__toggle {
	grid-column: 3;
	grid-row: 1;
}
.gingr-nav__detail {
	grid-column: 1 / -1;
	grid-row: 2;
}
.gingr-nav__icon {
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
}
.gingr-nav__icon img {
	width: 32px;
	height: 32px;
	display: block;
}
.gingr-nav__name {
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3;
}
.gingr-nav__short {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6;
}
.gingr-nav__detail {
	padding: 22px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem; /* "14px regular" 140% */
	line-height: 1.4;
}
.gingr-nav__detail p {
	margin: 0 0 1em;
}
.gingr-nav__detail p:last-child {
	margin-bottom: 0;
}
.gingr-nav__detail strong {
	color: var(--wp--preset--color--navy);
}
/* the + / − toggle */
.gingr-nav__toggle {
	justify-self: end;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.gingr-nav__toggle::before,
.gingr-nav__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--wp--preset--color--navy);
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.gingr-nav__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.gingr-nav__toggle[aria-expanded="true"]::after {
	opacity: 0;
}
.gingr-nav__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
/* the whole row toggles (see framework.js), so it points and highlights as one;
   the class is set by script, so without JS the row stays inert and plain */
.gingr-nav__step.is-clickable {
	cursor: pointer;
}
.gingr-nav__step.is-clickable:hover {
	background: var(--wp--preset--color--surface-alt); /* Figma "state: hover" */
	box-shadow: 0 22px 52px rgba(14, 35, 80, 0.15);
}

@media (max-width: 860px) {
	/* Figma mobile: icon + name with the toggle on one row, text below */
	.gingr-nav__step {
		grid-template-columns: minmax(0, 1fr) 47px;
		padding: 24px 16px;
	}
	.gingr-nav__id {
		grid-column: 1;
		padding-left: 4px;
	}
	.gingr-nav__toggle {
		grid-column: 2;
	}
	.gingr-nav__short {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 0 4px;
	}
	.gingr-nav__detail {
		grid-row: 3;
	}
	.gingr-nav__matrix {
		padding: 20px;
	}
}

/* ============================================================
   Key Concepts and Framing Navigator (native matrix, /how-to)
   ============================================================ */
.gnav {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: #2a3b53;
	font-size: 0.78rem;
	line-height: 1.5;
}
.gnav p {
	margin: 0;
}
/* The top table and each wide row share one 5-column track so everything
   lines up: a wider left column, then the four pressure columns. */
.gnav__top,
.gnav__row--wide {
	display: grid;
	grid-template-columns: 1.3fr repeat(4, 1fr);
	gap: 12px;
	align-items: stretch;
}
/* Frame label sits top-left, above the approaches box; never stretches. */
.gnav__frame-label,
.gnav__label {
	display: flex;
	flex-direction: row; /* Figma: icon and stage name on one line */
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 10px 8px;
}
.gnav__frame-label .gnav__intro,
.gnav__label .gnav__intro {
	flex: 1 1 100%;
}
.gnav__frame-label {
	align-self: start;
}
.gnav__row--wide > .gnav__label {
	grid-column: 1;
}
.gnav__icon {
	width: 60px;
	height: 60px;
	object-fit: contain;
}
.gnav__name {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	font-size: 1.15rem;
}
.gnav__intro {
	color: #2a3b53;
}
.gnav__intro strong {
	color: var(--wp--preset--color--navy);
}
/* "Pressures" labels only the middle two columns (Project + Seascape). */
.gnav__press-title {
	margin: 0;
	padding: 9px 12px;
	background: #0f254e;
	color: #00b7f3;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-align: center;
	border-radius: 8px;
	align-self: end;
}
/* Cells */
.gnav__cell {
	border-radius: 10px;
	padding: 16px 18px;
}
.gnav__cell--head {
	background: #0f254e;
	color: #dceaf6;
}
.gnav__cell-title {
	display: block;
	margin-bottom: 6px;
	color: #00b7f3;
	font-weight: 700;
	font-size: 1rem;
}
.gnav__cell--frame {
	background: #afd5ec;
	color: #14233f;
}
.gnav__cell-label {
	display: none; /* shown on mobile to keep the matrix legible */
	margin-bottom: 6px;
	font-weight: 700;
	color: #0f254e;
}
.gnav__approaches {
	background: #0f254e;
	color: #dceaf6;
	border-radius: 10px;
	padding: 18px 20px;
}
.gnav__appr-title {
	margin: 0 0 6px;
	color: #8dc63f;
	font-size: 1rem;
	font-weight: 700;
}
.gnav__approaches p {
	margin: 0 0 18px;
	color: #fff;
	font-weight: 400;
}
.gnav__approaches p:last-child {
	margin-bottom: 0;
}
/* Figma rules a hairline between the three approaches and sets their headings
   green on the navy panel. */
.gnav__approaches .gnav__appr-title {
	color: var(--wp--preset--color--green);
	font-weight: 900;
}
.gnav__approaches .gnav__appr-title:not(:first-child) {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #B7DE9C;
}
.gnav__prose {
	grid-column: 2 / 6;
	background: #eff4fa;
	border-radius: 10px;
	padding: 18px 20px;
}
.gnav__prose strong {
	color: var(--wp--preset--color--navy);
}
/* Navigator matrix type, sampled from the Figma frame:
   cell titles #96CDF2 18/900 · approach headings #B7DE9C 18/900 ·
   cell body #EEF3FA 14/400 · Frame intro #1E2A3A 14/400 · stage name 18/900. */
.gingr-nav__matrix .gnav__cell-title,
.gingr-nav__matrix .gnav__press-title {
	color: #96CDF2;
	font-size: 1.125rem; /* "18px heavy" (Lato Black) 130% */
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.3;
}
.gingr-nav__matrix .gnav__appr-title {
	color: #B7DE9C;
	font-size: 1.125rem;
	line-height: 1.3;
}
.gingr-nav__matrix .gnav__cell--head p,
.gingr-nav__matrix .gnav__approaches p {
	color: #EEF3FA;
	font-size: 0.875rem; /* "14px regular" 140% */
	line-height: 1.4;
}
/* panel colours from the style guide's Framework set (were #0F254E / #AFD5EC) */
.gingr-nav__matrix .gnav__press-title,
.gingr-nav__matrix .gnav__cell--head,
.gingr-nav__matrix .gnav__approaches {
	background: var(--wp--preset--color--navy-deep);
	border-radius: 8px;
}
.gingr-nav__matrix .gnav__cell--frame {
	background: var(--wp--preset--color--blue-soft);
	border-radius: 8px;
}
.gingr-nav__matrix .gnav {
	color: var(--wp--preset--color--ink);
}
.gingr-nav__matrix .gnav__cell--head,
.gingr-nav__matrix .gnav__approaches {
	color: var(--wp--preset--color--surface-alt);
}
/* body cells sit on light blue, so their text is dark */
.gingr-nav__matrix .gnav__cell:not(.gnav__cell--head) p,
.gingr-nav__matrix .gnav__cell:not(.gnav__cell--head) {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	line-height: 1.4; /* "14px regular" 140% */
}
.gingr-nav__matrix .gnav__intro,
.gingr-nav__matrix .gnav__intro strong {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 400; /* Figma does not emphasise this phrase */
	line-height: 1.4;
}
/* The matrix's stage icon is a bare <img>; the stage rows below wrap theirs in
   a styled tile. Give it the same 58px white tile so the two read alike. */
.gingr-nav__matrix .gnav__icon {
	width: 58px;
	height: 58px;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
	box-sizing: border-box;
}

.gingr-nav__matrix .gnav__name {
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.3; /* "18px heavy" (Lato Black) 130% */
	color: var(--wp--preset--color--navy);
}

/* The navigator matrix keeps its full 5-column shape at every width and
   scrolls horizontally inside .gingr-hscroll instead of collapsing to a
   stack — the design's mobile frames show it scrolling, not reflowing.
   (Previously this block stacked everything below 860px.) */
.gingr-hscroll > .gnav {
	min-width: 1060px;
}
@media (max-width: 860px) {
	.gnav {
		font-size: 0.74rem;
	}
}