/**
 * Groundshift Instrument — supplementary styles.
 *
 * theme.json holds the brand tokens and every global style. This file holds
 * only what theme.json cannot express: block styles, the readout component,
 * the skip link, and print rules.
 *
 * Selectors that override a theme.json element style repeat their own class
 * rather than leaning on :root. theme.json emits element rules at
 * :root :where(...) specificity, and a doubled class beats that in the editor
 * too, where :root sits outside the editor's style wrapper and would not match.
 *
 * --gs-accent
 * Every accent in the theme reads this one variable. The section styles set
 * it: Readout Lime in the Ink band and the Graphite panel, Ink in the Paper
 * band. Lime on Paper measures 1.1:1, so anything that carries the accent
 * corrects itself when it is moved from a dark band into a light one rather
 * than disappearing. Never write the lime hex into a component; read the
 * variable.
 */

:root,
body,
.editor-styles-wrapper {
	--gs-accent: var( --wp--preset--color--ink );
}

/* --------------------------------------------------------------------------
 * Bands sit flush
 * Header, bands and footer are full-width grounds. The default block gap
 * would show a strip of the Paper page between two dark bands.
 * ----------------------------------------------------------------------- */

.wp-site-blocks > *,
.wp-site-blocks > main > *,
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Paragraphs keep a 65ch measure (theme.json), but in a centered column that
 * measure is centered too, which knocks body copy out of line with the
 * heading above it. Hold the paragraph to the column's left edge instead.
 */
.is-layout-constrained:not(.is-content-justification-left):not(.is-content-justification-right):not(.is-content-justification-center) > p:not(.has-text-align-center):not(.alignwide):not(.alignfull) {
	margin-left: max( 0px, calc( ( 100% - var( --wp--style--global--content-size ) ) / 2 ) ) !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
 * Block style — Mono label
 * Eyebrows, metric captions, chart axes, footnotes. Never body copy.
 * ----------------------------------------------------------------------- */

.is-style-gs-label.is-style-gs-label,
.is-style-gs-label-accent.is-style-gs-label-accent {
	font-family: var( --wp--preset--font-family--label );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Block style — Metric
 * Evidence, never the serif. Tabular figures so columns of numbers line up.
 * ----------------------------------------------------------------------- */

.is-style-gs-metric.is-style-gs-metric,
.is-style-gs-metric-accent.is-style-gs-metric-accent {
	font-family: var( --wp--preset--font-family--text );
	font-size: var( --wp--preset--font-size--metric );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
 * Accent variants — Mono label and Metric
 * Eyebrows, section labels and proof numbers on dark grounds. They read
 * --gs-accent, so on Ink they are lime and on Paper they come out Ink.
 * ----------------------------------------------------------------------- */

.is-style-gs-label-accent.is-style-gs-label-accent,
.is-style-gs-metric-accent.is-style-gs-metric-accent {
	color: var( --gs-accent );
}

/* --------------------------------------------------------------------------
 * Block style — Accent rule
 * Step rules. A 2px rule in the accent: lime on Ink, Ink on Paper. Unlike the
 * hairline it is a real boundary, not texture.
 * ----------------------------------------------------------------------- */

.wp-block-separator.is-style-gs-rule-accent {
	border-top: 2px solid var( --gs-accent );
	border-bottom: 0;
	opacity: 1;
	max-width: none;
	width: 100%;
	margin-block: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 );
}

/* --------------------------------------------------------------------------
 * Navigation — the current page
 * Accent plus an underline, so the current item is marked by more than hue.
 * ----------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var( --gs-accent );
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* --------------------------------------------------------------------------
 * Block style — Quiet button
 * Secondary actions: transparent, hairline border in the current text color.
 * Since Sept 21 the primary action on a dark band is lime (the section style
 * does that); Quiet is the one that sits beside it.
 * ----------------------------------------------------------------------- */

.wp-block-button.is-style-gs-quiet .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	border-radius: 0;
}

.wp-block-button.is-style-gs-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-gs-quiet .wp-block-button__link:focus {
	background-color: currentColor;
	color: var( --wp--preset--color--paper );
}

.is-style-section-ink .wp-block-button.is-style-gs-quiet .wp-block-button__link:hover,
.is-style-section-ink .wp-block-button.is-style-gs-quiet .wp-block-button__link:focus,
.is-style-section-graphite .wp-block-button.is-style-gs-quiet .wp-block-button__link:hover,
.is-style-section-graphite .wp-block-button.is-style-gs-quiet .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
}

/* --------------------------------------------------------------------------
 * Block style — Bordered panel and Hairline
 * ----------------------------------------------------------------------- */

.wp-block-group.is-style-gs-panel {
	border: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--40 );
}

.is-style-section-ink .wp-block-group.is-style-gs-panel,
.is-style-section-graphite .wp-block-group.is-style-gs-panel {
	border-color: var( --wp--preset--color--graphite );
}

.wp-block-separator.is-style-gs-hairline {
	border-top: 1px solid var( --wp--preset--color--line );
	border-bottom: 0;
	opacity: 1;
	max-width: none;
	margin-block: var( --wp--preset--spacing--40 );
}

.is-style-section-ink .wp-block-separator.is-style-gs-hairline,
.is-style-section-graphite .wp-block-separator.is-style-gs-hairline {
	border-top-color: var( --wp--preset--color--graphite );
}

/* --------------------------------------------------------------------------
 * The readout
 *
 * A horizontal bar chart in HTML. Gain and loss are never carried by hue
 * alone: the class writes the sign, so the distinction survives grayscale,
 * print, a dim projector and forced-colors mode.
 *
 * Markup (write the number WITHOUT a sign — the class supplies it):
 *
 *   <div class="gs-readout">
 *     <div class="gs-readout__row">
 *       <span class="gs-readout__label">Weekly active</span>
 *       <span class="gs-readout__track"><span class="gs-readout__bar gs-readout__bar--loss" style="width:18%"></span></span>
 *       <span class="gs-readout__value gs-readout__value--loss">18%</span>
 *     </div>
 *   </div>
 * ----------------------------------------------------------------------- */

.gs-readout {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	margin-block: var( --wp--preset--spacing--30 );
}

.gs-readout__row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr auto;
	align-items: center;
	gap: 1rem;
}

.gs-readout__label {
	font-family: var( --wp--preset--font-family--label );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * On Paper the track is an outlined channel, not a filled one. Clay measures
 * 2.6:1 against Line, under the 3:1 floor for a graphic object, so the bar
 * must be bounded by something at full contrast rather than sitting on a
 * near-identical fill.
 */
.gs-readout__track {
	display: block;
	box-sizing: border-box;
	height: 12px;
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--ink );
	position: relative;
}

.is-style-section-ink .gs-readout__track,
.is-style-section-graphite .gs-readout__track {
	background-color: var( --wp--preset--color--graphite );
	border-color: var( --wp--preset--color--graphite );
}

.gs-readout__bar {
	display: block;
	height: 100%;
	background-color: var( --wp--preset--color--harbor );
}

.is-style-section-ink .gs-readout__bar,
.is-style-section-graphite .gs-readout__bar {
	background-color: var( --wp--preset--color--blue-lift );
}

.gs-readout__bar--loss,
.is-style-section-ink .gs-readout__bar--loss,
.is-style-section-graphite .gs-readout__bar--loss {
	background-color: var( --wp--preset--color--clay );
}

/* Second channel: a hatch on the loss bar, so it separates without color. */
.gs-readout__bar--loss {
	background-image: repeating-linear-gradient(
		135deg,
		rgba( 16, 19, 22, 0.35 ) 0 2px,
		transparent 2px 6px
	);
}

.gs-readout__value {
	font-family: var( --wp--preset--font-family--text );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.gs-readout__value--gain::before {
	content: "+";
}

.gs-readout__value--loss::before {
	content: "\2212"; /* true minus sign, not a hyphen */
}

.gs-readout__value--gain {
	color: var( --wp--preset--color--harbor );
}

/*
 * Clay measures 3.4:1 on Paper — fine for a data mark, short of the 4.5:1
 * floor for text this size. On light ground the loss value is set in Ink and
 * the minus sign does the work. On Ink, Clay is 5.0:1 and can be used.
 */
.gs-readout__value--loss {
	color: var( --wp--preset--color--ink );
}

.is-style-section-ink .gs-readout__value--gain,
.is-style-section-graphite .gs-readout__value--gain {
	color: var( --wp--preset--color--blue-lift );
}

.is-style-section-ink .gs-readout__value--loss,
.is-style-section-graphite .gs-readout__value--loss {
	color: var( --wp--preset--color--clay );
}

@media ( max-width: 600px ) {
	.gs-readout__row {
		grid-template-columns: 1fr auto;
	}

	.gs-readout__label {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
 * The lockup
 *
 * The SVG files carry intrinsic width and height so they also work as plain
 * images. Inline in the header and footer they have to scale to their box
 * instead, and they take their color from the section style around them.
 * ----------------------------------------------------------------------- */

.gs-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.gs-logo-link {
	text-decoration: none;
}

/* Type and outer bars take the text color; the displaced bar takes the accent. */
.gs-logo .gs-mark-base {
	fill: currentColor;
}

.gs-logo .gs-mark-accent {
	fill: var( --gs-accent, currentColor );
}

@media ( max-width: 480px ) {
	.gs-logo-link .gs-logo--lockup {
		display: none !important;
	}

	.gs-logo-link .gs-logo--mark {
		display: block !important;
	}
}

.gs-logo-link:hover .gs-logo,
.gs-logo-link:focus .gs-logo {
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
 * The Fault Line motif
 *
 * Three bars, the middle one displaced, used as a large cropped structure on
 * Ink. Never behind text — give it its own decorative block.
 * ----------------------------------------------------------------------- */

.gs-faultline {
	display: block;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 96 / 88;
	background-color: currentColor;
	opacity: 0.14;
	-webkit-mask-image: url( "../images/mark.svg" );
	mask-image: url( "../images/mark.svg" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
 * Skip link and utility
 * ----------------------------------------------------------------------- */

.skip-link:focus {
	background-color: var( --wp--preset--color--lime );
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--text );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

.gs-measure-full,
.gs-measure-full.gs-measure-full > p {
	max-width: none;
}

/* --------------------------------------------------------------------------
 * Print
 *
 * Readout Lime is out of gamut in CMYK and goes chalky on press. On paper the
 * system drops to Ink, with Clay as the only second color.
 * ----------------------------------------------------------------------- */

@media print {
	:root {
		--wp--preset--color--lime: #101316;
		--wp--preset--color--blue-lift: #101316;
		--wp--preset--color--harbor: #101316;
		--gs-accent: #101316;
	}

	.is-style-section-ink,
	.is-style-section-graphite,
	.is-style-section-ink *,
	.is-style-section-graphite * {
		background: #fff !important;
		color: #101316 !important;
	}

	.wp-block-button__link {
		background: transparent !important;
		color: #101316 !important;
		border: 1px solid #101316 !important;
	}

	.gs-readout__bar {
		background-color: #101316 !important;
	}

	.gs-readout__bar--loss {
		background-color: #e5533d !important;
	}

	.wp-block-navigation,
	.gs-faultline,
	.wp-block-query-pagination {
		display: none !important;
	}

	a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-family: var( --wp--preset--font-family--label );
		font-size: 9pt;
	}
}

/* Footer link columns read as a list of destinations, not a bulleted list. */
.gs-footer-nav {
	list-style: none;
	padding-left: 0;
}

.gs-footer-nav li {
	margin-bottom: 0.5rem;
}

/* ==========================================================================
 * Sept 21 components
 * The four Paper-band patterns the copy refresh added, plus the Services
 * doors table, the testimonial pair, the portrait slot and the contact form.
 * ======================================================================== */

/* --------------------------------------------------------------------------
 * Next-cohort table
 * Column order is fixed: Status · Starts · Program · Format. Status and the
 * date are set in the mono label, because every published date is.
 * ----------------------------------------------------------------------- */

.gs-cohort table {
	border-collapse: collapse;
	width: 100%;
}

.gs-cohort th,
.gs-cohort td {
	border-width: 0 0 1px;
	border-style: solid;
	border-color: var( --wp--preset--color--line );
	padding: 1rem 1.25rem 1rem 0;
	vertical-align: baseline;
	text-align: left;
}

.gs-cohort thead th,
.gs-cohort thead td {
	border-bottom: 1px solid var( --wp--preset--color--ink );
}

.gs-cohort td:nth-child(1),
.gs-cohort td:nth-child(2) {
	font-family: var( --wp--preset--font-family--label );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-cohort td:nth-child(3) {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Doors table (Services) — who delivers each offer
 * ----------------------------------------------------------------------- */

.gs-doors table {
	border-collapse: collapse;
	width: 100%;
}

.gs-doors th,
.gs-doors td {
	border-width: 0 0 1px;
	border-style: solid;
	border-color: var( --wp--preset--color--graphite );
	padding: 1rem 1.25rem 1rem 0;
	text-align: left;
	vertical-align: baseline;
}

.gs-doors td:first-child {
	font-family: var( --wp--preset--font-family--label );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --gs-accent );
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Client strip
 * Six cells. Each ships with a sector label and a descriptor. When a naming
 * permission comes back, replace that cell's descriptor with an Image block
 * holding the logo; the cell keeps its size, so nothing else moves.
 * ----------------------------------------------------------------------- */

.gs-client-strip {
	border-top: 1px solid var( --wp--preset--color--ink );
}

.gs-client-strip > .gs-client-cell {
	border-bottom: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 ) 0;
	min-height: 7.5rem;
}

.gs-client-cell .wp-block-image,
.gs-client-cell figure {
	margin: 0;
}

.gs-client-cell img {
	display: block;
	max-height: 2.5rem;
	width: auto;
	filter: grayscale( 1 );
}

/* --------------------------------------------------------------------------
 * Testimonial pair
 * On Paper, so the page keeps its two dark bands. The mono caption under the
 * pair explains why the quotes carry no names.
 * ----------------------------------------------------------------------- */

.gs-testimonials .wp-block-quote {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-large );
}

.gs-testimonials .wp-block-quote p {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Portrait slot (About)
 * Holds its 4:5 box whatever is inside it. Today it holds a quote; when the
 * portrait exists, an Image block goes in and the column does not reflow.
 * ----------------------------------------------------------------------- */

.gs-portrait-slot {
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid var( --wp--preset--color--ink );
	padding: var( --wp--preset--spacing--40 );
	box-sizing: border-box;
}

.gs-portrait-slot .wp-block-image,
.gs-portrait-slot .wp-block-image img {
	margin: calc( -1 * var( --wp--preset--spacing--40 ) );
	width: calc( 100% + 2 * var( --wp--preset--spacing--40 ) );
	height: calc( 100% + 2 * var( --wp--preset--spacing--40 ) );
	max-width: none;
	object-fit: cover;
}

@media ( max-width: 781px ) {
	.gs-portrait-slot {
		aspect-ratio: auto;
	}
}

/* --------------------------------------------------------------------------
 * Contact form
 * Rendered by the [groundshift_contact] shortcode (functions.php). Inputs take
 * their colors and borders from the section style around them.
 * ----------------------------------------------------------------------- */

.gs-form {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	max-width: 40rem;
}

.gs-form__field {
	display: grid;
	gap: 0.5rem;
}

.gs-form label {
	font-family: var( --wp--preset--font-family--label );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gs-form input,
.gs-form textarea {
	font: inherit;
	font-size: var( --wp--preset--font-size--medium );
	padding: 0.8rem 0.9rem;
	width: 100%;
	box-sizing: border-box;
}

.gs-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.gs-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gs-form__notice {
	border-left: 2px solid var( --gs-accent );
	padding: 0.75rem 1rem;
	margin: 0;
}

.gs-form__notice--error {
	border-left-color: var( --wp--preset--color--clay );
}

.gs-form button {
	justify-self: start;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	font-family: var( --wp--preset--font-family--text );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.95rem 1.5rem;
}

.gs-form button:hover,
.gs-form button:focus-visible {
	background: var( --wp--preset--color--graphite );
}

.is-style-section-ink .gs-form button,
.is-style-section-graphite .gs-form button {
	background: var( --gs-accent );
	color: var( --wp--preset--color--ink );
}

/* --------------------------------------------------------------------------
 * Consecutive Paper bands
 * Between the two dark bands a page runs several Paper sections in a row. A
 * hairline marks where one ends, without spending a third dark band.
 * ----------------------------------------------------------------------- */

.is-style-section-paper + .is-style-section-paper {
	border-top: 1px solid var( --wp--preset--color--line );
}

/* Proof numbers inside the opening Ink band sit under a Graphite hairline. */
.gs-proof-row {
	border-top: 1px solid var( --wp--preset--color--graphite );
	padding-top: var( --wp--preset--spacing--40 );
}

/* The three beliefs on About — serif, one per row, each under an accent rule. */
.gs-beliefs p {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xx-large );
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Small screens: the cohort and doors tables stack row by row.
 * Status and date share a line, then the program, then the format.
 * ----------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.gs-cohort thead,
	.gs-doors thead {
		display: none;
	}

	.gs-cohort tr,
	.gs-doors tr {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1.25rem;
		row-gap: 0.35rem;
		padding: 1rem 0;
		border-bottom: 1px solid var( --wp--preset--color--line );
	}

	.gs-doors tr {
		border-bottom-color: var( --wp--preset--color--graphite );
	}

	.gs-cohort td,
	.gs-doors td {
		display: block;
		border: 0;
		padding: 0;
	}

	.gs-cohort td:nth-child(n+3),
	.gs-doors td:nth-child(n+2) {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
 * 23 September refresh
 * Components from the approved prototype, rebuilt on the theme's tokens.
 * Colors and faces are unchanged; only sizes and new components are here.
 * ======================================================================== */

/* Buttons: 64px tall, 4px radius. The header action is 50px. */
.wp-block-button__link {
	min-height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY( -2px );
}

.gs-header .wp-block-button__link {
	min-height: 50px;
	font-size: var( --wp--preset--font-size--small );
	padding-inline: 1.375rem;
}

/* --------------------------------------------------------------------------
 * Scrolling strip — [groundshift_strip]
 * The track holds the items once for reading and once aria-hidden for the
 * loop, and slides by half its width. Speed and direction are shortcode
 * attributes. Hover or focus inside it pauses. Reduced motion stops it and
 * wraps the items as a static row.
 * ----------------------------------------------------------------------- */

.gs-strip {
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
}

.gs-strip__track {
	display: flex;
	width: max-content;
	animation: gs-strip-slide var( --gs-strip-duration, 45s ) linear infinite;
	animation-direction: var( --gs-strip-direction, normal );
}

@keyframes gs-strip-slide {
	to {
		transform: translateX( -50% );
	}
}

.gs-strip:hover .gs-strip__track,
.gs-strip:focus-within .gs-strip__track {
	animation-play-state: paused;
}

.gs-strip__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-inline: 2.25rem;
	font-family: var( --wp--preset--font-family--text );
	font-weight: 600;
	font-size: clamp( 24px, 2.4vw, 32px );
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

.gs-strip__item img,
.gs-strip__item svg {
	width: 22px;
	height: auto;
	flex: none;
}

/* Sector marks and the "works in" tags are quiet on Ink: texture, not data. */
.gs-strip__item .gs-mark-base,
.gs-strip__item .gs-mark-accent {
	fill: #5b646e;
}

.gs-strip__tag {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: #98a1ab;
	margin-left: 0.375rem;
}

/* Quote cards ride the same track. */
.gs-strip--quotes .gs-strip__track {
	gap: 0;
}

.gs-quote-card {
	width: min( 460px, 82vw );
	margin-right: 1.5rem;
	flex: none;
	background: #fff;
	border: 1.5px solid var( --wp--preset--color--ink );
	border-radius: 6px;
	padding: 2rem;
	display: grid;
	gap: 1.375rem;
	align-content: space-between;
}

.gs-quote-card p {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 24px, 2.2vw, 30px );
	line-height: 1.2;
	margin: 0;
}

.gs-quote-card cite {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	font-style: normal;
}

@media ( prefers-reduced-motion: reduce ) {
	.gs-strip__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		row-gap: 1.25rem;
	}

	.gs-strip__track [aria-hidden="true"] {
		display: none;
	}

	.gs-strip {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.wp-block-button__link:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * Proof line under the hero
 * ----------------------------------------------------------------------- */

.gs-proof {
	border-top: 1px solid var( --wp--preset--color--graphite );
	padding-block: 2.5rem 3rem;
	display: grid;
	gap: 1.75rem;
}

.gs-proof__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.125rem;
}

.gs-proof__head b {
	font-family: var( --wp--preset--font-family--text );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--metric );
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var( --gs-accent );
}

/* --------------------------------------------------------------------------
 * Forms
 * Field sizes from the change order. Colors still come from the section
 * style: Ink fields on dark grounds, white on Paper.
 * ----------------------------------------------------------------------- */

.gs-form {
	display: grid;
	gap: 1.25rem;
	max-width: none;
}

.gs-form__fields {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: 1fr 1fr;
}

.gs-form__field {
	display: grid;
	gap: 0.5rem;
}

.gs-form__field--full {
	grid-column: 1 / -1;
}

.gs-form label {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gs-form input,
.gs-form select,
.gs-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var( --wp--preset--font-family--text );
	font-size: var( --wp--preset--font-size--button );
	font-weight: 400;
	line-height: 1.3;
	padding: 0 18px;
	min-height: 64px;
	border-radius: 4px;
	border: 1.5px solid;
	background: transparent;
	color: inherit;
}

.gs-form textarea {
	padding: 16px 18px;
	min-height: 120px;
	resize: vertical;
}

.gs-form ::placeholder {
	color: currentColor;
	opacity: 0.45;
}

.is-style-section-ink .gs-form :is( input, select, textarea ),
.is-style-section-graphite .gs-form :is( input, select, textarea ) {
	background: var( --wp--preset--color--ink );
	border-color: #5b646e;
	color: var( --wp--preset--color--paper );
}

.is-style-section-ink .gs-form :is( input, select, textarea ):focus,
.is-style-section-graphite .gs-form :is( input, select, textarea ):focus {
	border-color: var( --wp--preset--color--lime );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 200, 255, 61, 0.25 );
}

.is-style-section-paper .gs-form :is( input, select, textarea ),
.gs-form-card--paper :is( input, select, textarea ) {
	background: #fff;
	border-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--ink );
}

.is-style-section-paper .gs-form :is( input, select, textarea ):focus,
.gs-form-card--paper :is( input, select, textarea ):focus {
	outline: 3px solid var( --wp--preset--color--harbor );
	outline-offset: 1px;
}

.gs-form button {
	width: 100%;
	min-height: 68px;
	cursor: pointer;
	border: 0;
	border-radius: 4px;
	background: var( --gs-accent );
	color: var( --wp--preset--color--paper );
	font-family: var( --wp--preset--font-family--text );
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	padding: 0 1.875rem;
	transition: transform 0.15s ease;
}

.is-style-section-ink .gs-form button,
.is-style-section-graphite .gs-form button {
	color: var( --wp--preset--color--ink );
}

.gs-form button:hover {
	transform: translateY( -2px );
}

.gs-form__note {
	font-size: var( --wp--preset--font-size--x-small );
	opacity: 0.75;
	margin: 0;
}

.gs-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gs-form__notice {
	border-left: 2px solid var( --gs-accent );
	padding: 0.75rem 1rem;
	margin: 0;
}

.gs-form__notice--error {
	border-left-color: var( --wp--preset--color--clay );
}

/* The card a form sits in. Graphite on dark, white card on Paper. */
.gs-form-card {
	border-radius: 6px;
	padding: clamp( 24px, 3vw, 40px );
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

.gs-form-card--paper {
	background: #fff;
	border: 1.5px solid var( --wp--preset--color--ink );
}

/* Success state, swapped in without a page load. */
.gs-form__done {
	display: grid;
	gap: 0.625rem;
	padding: 1.125rem 0;
}

.gs-form__done strong {
	font-size: 1.625rem;
	font-weight: 600;
}

@media ( max-width: 560px ) {
	.gs-form__fields {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Built visuals: agenda, timeline, workflow screen
 * Markup, not images, so they stay sharp and editable.
 * ----------------------------------------------------------------------- */

.gs-visual {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	aspect-ratio: 4 / 3;
	padding: clamp( 20px, 3vw, 34px );
	display: grid;
	align-content: center;
	gap: 0.625rem;
	font-size: 1rem;
}

.gs-visual__title,
.gs-screen__title {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	color: #98a1ab;
	margin-bottom: 0.375rem;
}

.gs-agenda {
	display: grid;
	gap: 0.625rem;
}

.gs-agenda__row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 1rem;
	align-items: baseline;
	border-bottom: 1px solid var( --wp--preset--color--graphite );
	padding-bottom: 0.625rem;
}

.gs-agenda__time {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	color: var( --wp--preset--color--lime );
	font-variant-numeric: tabular-nums;
}

.gs-agenda__row span:last-child {
	font-size: clamp( 16px, 1.6vw, 20px );
}

.gs-timeline {
	display: grid;
	gap: 0.5rem;
}

.gs-timeline__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 0.875rem;
	align-items: center;
	padding: 0.625rem 0.875rem;
	border: 1px solid var( --wp--preset--color--graphite );
	border-radius: 4px;
}

.gs-timeline__key {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #98a1ab;
}

.gs-timeline__row--now {
	border-color: var( --wp--preset--color--lime );
	background: var( --wp--preset--color--graphite );
}

.gs-timeline__row--now .gs-timeline__key {
	color: var( --wp--preset--color--lime );
}

/* The workflow screen. Labeled "Example" in its title bar, and it stays
 * labeled: this is not the readout component and not a client result. */
.gs-screen {
	border-radius: 8px;
	overflow: hidden;
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	border: 1.5px solid var( --wp--preset--color--ink );
}

.gs-screen__chrome {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.125rem;
	border-bottom: 1px solid var( --wp--preset--color--graphite );
}

.gs-screen__chrome i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var( --wp--preset--color--graphite );
}

.gs-screen__chrome span {
	margin-left: 0.75rem;
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: #98a1ab;
}

.gs-wf {
	padding: clamp( 20px, 4vw, 48px );
	display: grid;
	gap: 0.75rem;
	overflow-x: auto;
}

.gs-wf__row {
	display: grid;
	grid-template-columns: minmax( 220px, 1.4fr ) minmax( 160px, 1fr ) minmax( 220px, 1.4fr );
	gap: 1.125rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border: 1px solid var( --wp--preset--color--graphite );
	border-radius: 4px;
	min-width: 640px;
}

.gs-wf__row--head {
	border: 0;
	padding-block: 0 0.25rem;
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: #98a1ab;
}

/* Under 782px the three columns no longer fit, so each row stacks: step,
 * action chip, reason. Nothing scrolls sideways and nothing is cut off. */
@media ( max-width: 781px ) {
	.gs-wf__row {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0.625rem;
		min-width: 0;
	}

	.gs-wf__row--head {
		display: none;
	}
}

.gs-wf__step {
	font-size: var( --wp--preset--font-size--button );
}

.gs-wf__why {
	font-size: 1rem;
	color: #b9c0c8;
}

/* Chips name the one action. Each carries a word, never color alone. */
.gs-chip {
	justify-self: start;
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	padding: 0.5625rem 0.75rem;
	border-radius: 3px;
	border: 1.5px solid #5b646e;
}

.gs-chip--ai {
	border-color: var( --wp--preset--color--lime );
	color: var( --wp--preset--color--lime );
}

.gs-chip--human {
	border-color: var( --wp--preset--color--blue-lift );
	color: var( --wp--preset--color--blue-lift );
}

.gs-chip--stop {
	border-color: var( --wp--preset--color--clay );
	color: var( --wp--preset--color--clay );
}

.gs-wf__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.75rem;
	padding-top: 0.875rem;
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #98a1ab;
}

.gs-wf__foot b {
	color: var( --wp--preset--color--lime );
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Program cards, case cards, the date tag and the optional photo slot
 * ----------------------------------------------------------------------- */

.gs-card {
	display: grid;
	/* minmax( 0, 1fr ), not the implicit auto column: the visual's aspect-ratio
	 * otherwise turns its content height into a minimum width, and the card
	 * grows past its column and clips its own text. */
	grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: auto 1fr;
	border: 1.5px solid var( --wp--preset--color--ink );
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	height: 100%;
}

.gs-card__body {
	padding: clamp( 24px, 3vw, 36px );
	display: grid;
	gap: 0.875rem;
	align-content: start;
}

.gs-card__price {
	font-family: var( --wp--preset--font-family--text );
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.gs-link {
	font-weight: 600;
	font-size: var( --wp--preset--font-size--button );
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	justify-self: start;
	padding-bottom: 2px;
	margin-top: 0.5rem;
}

.gs-cases {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 1.25rem;
}

.gs-case {
	grid-column: span 2;
	border-top: 3px solid var( --wp--preset--color--ink );
	padding-top: 1.375rem;
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

.gs-case:nth-child(4),
.gs-case:nth-child(5) {
	grid-column: span 3;
}

@media ( max-width: 860px ) {
	.gs-cases {
		grid-template-columns: 1fr;
	}

	.gs-case,
	.gs-case:nth-child(4),
	.gs-case:nth-child(5) {
		grid-column: auto;
	}
}

.gs-date {
	font-family: var( --wp--preset--font-family--label );
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	padding: 0.75rem 1rem;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	justify-self: start;
}

/* Optional session photo. Empty means absent: no dashed placeholder ships. */
.gs-photo:not(:has( img )) {
	display: none;
}

.gs-photo img {
	border-radius: 6px;
	width: 100%;
	height: auto;
}

/* Speaking panel columns. */
.gs-speak-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.75rem;
}

.gs-speak-grid > * {
	border-top: 1px solid #4a525c;
	padding-top: 1.25rem;
	display: grid;
	gap: 0.625rem;
	align-content: start;
}

@media ( max-width: 860px ) {
	.gs-speak-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Sticky header and footer navigation
 * ----------------------------------------------------------------------- */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid var( --wp--preset--color--graphite );
}

.gs-footer-nav a {
	text-decoration: none;
	opacity: 0.85;
}

.gs-footer-nav a:hover,
.gs-footer-nav a:focus-visible {
	opacity: 1;
	color: var( --gs-accent );
}

/* The hero's two columns stack under 980px, as the change order asks. */
@media ( max-width: 980px ) {
	.is-style-section-ink > .wp-block-columns:not( .is-not-stacked-on-mobile ) {
		flex-wrap: wrap !important;
	}

	.is-style-section-ink > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* The panel's own grids and screens ignore the reading measure: they are
 * layout, not prose, and should fill the panel or the band. */
.gs-speak-grid,
.gs-cases,
.gs-screen,
.gs-strip {
	max-width: none !important;
	width: 100%;
}