/* Grandstand — custom CSS.
   Most styling comes from theme.json; put anything it can't express here.
   This file is enqueued on the front end AND registered as an editor style. */

/* ───────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS — sections appear in this order; search a title to jump.

    1. Base resets (band seam, editor canvas gap)
    2. Header / Navbar  +  Mobile overlay surface & frame
    3. Button block styles
    4. Eyebrow text style
    5. Footer
    6. Hero section (.gs-hero)  +  Careers hero overrides (.gs-careers-hero)
    7. Brands section (.gs-brands)
    8. Intelligence section (.gs-intelligence)
    9. Join Team section (.gs-join-team)
   10. Nasdaq / Investors section
   11. Careers Stats section (.gs-careers-stats)
   12. Image Trio section (.gs-image-trio)
   13. Testimonial section (.gs-testimonial)
   14. Awards Slider (.gs-awards)
   15. What's Happening section
   16. News Grid (.gs-news-grid)
   17. News Archive Link Bar (.gs-news-archive)
   18. Newsletter CTA (.gs-cta)
   19. Blog Post — Hero, Body (prose), Share + Author, Latest Posts
   20. News Hero (.gs-news-hero)
   21. Editor-only overrides (news-hub canvas cap, news-hero desktop pin)
   22. Careers — Value cards, Ethos, Perks, Open Positions, Careers Job
   23. Careers page — responsive styles (grouped at file end)
   ─────────────────────────────────────────────────────────────────────────── */

/* Band-abut seam reset — prevents default block gap between full-bleed sections. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Editor canvas only: the block list inserts a 24px block-gap above the top-level
   template blocks (main, footer), which shows as off-white strips that read like
   empty "add a section" drop zones. The front end renders the bands flush (rule
   above). .is-root-container exists only in the editor canvas, so this is inert on
   the front end; !important beats the editor's higher-specificity spacing rule. */
.is-root-container > * { margin-block-start: 0 !important; }

/* ── Header / Navbar ───────────────────────────────────────────────────────── */

/* Scoping note: the static bar (logo, inline nav links, "+") is scoped to the
   .gs-header CLASS so it styles correctly in the Site Editor (the editor does
   not render block anchors as ids — see editor-parity note in other sections).
   The mobile overlay menu below stays scoped to the #site-header id: it is a
   front-end-only interaction the editor never opens, and the id keeps the
   specificity needed to win the overlay background over core's default. */

/* Keep the header — and its open Partner Solutions dropdown — painting above
   later sections' positioned content (hero images etc.), which otherwise
   overlap the absolutely-positioned submenu panel. */
.gs-header {
	position: relative;
	z-index: 100;
}

/* Partner Solutions is a real submenu ("Navigation w/ Submenu" Figma frame).
   Core renders a chevron toggle button next to the label; restyle it as the
   carolina "+" design accent — the exact Figma vector (14x14 "open" asset),
   not a font glyph, so stroke weight/proportions match precisely. The button
   keeps core's click + keyboard toggle behaviour; hover-open comes from
   core's :hover CSS. */
.gs-header .wp-block-navigation .gs-nav-plus > .wp-block-navigation__submenu-icon {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	padding: 0;
	background: url(../images/icon-plus-nav.svg) no-repeat center / contain;
}
.gs-header .wp-block-navigation .gs-nav-plus > .wp-block-navigation__submenu-icon svg {
	display: none;
}

/* Desktop dropdown panel: black, 14px-rounded, centered under the label and
   dropped ~20px clear of the 62px bar, with a navy diamond "point" peeking
   over its top edge (Figma). The gap is bridged by a transparent ::before so
   the pointer can travel from the label to the panel without leaving the li
   (which would close :hover). left/right/transform also unwind core's
   right-justified submenu alignment. */
/* Doubled classes out-specify core's justified-right (left:auto;right:0) and
   hover (min-width:200px) submenu rules. */
.gs-header .wp-block-navigation .gs-nav-plus.gs-nav-plus > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	top: calc(100% + 42px);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 8px;
	padding: 24px;
	min-width: 192px;
	box-sizing: border-box; /* core leaves the submenu ul content-box; 192px is the Figma OUTER width */
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.gs-header .wp-block-navigation .gs-nav-plus > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -42px;
	left: 0;
	right: 0;
	height: 42px;
}
/* The point: a 7x7 square at 45deg (Figma), top-centered and straddling the
   panel's top border — its center sits ON the edge (top -3.5px), lower half
   tucked behind the panel via z-index -1. */
.gs-header .wp-block-navigation .gs-nav-plus > .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	top: -3.5px;
	left: 50%;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--dark-navy); /* Figma: Color-Brand-Dark-Navy #08192E */
	transform: translateX(-50%) rotate(45deg);
	z-index: -1;
}
/* Submenu items (Figma): GT America 400 / 15px / 100% line-height / -5%
   tracking — identical to the bar links, which the nav block already cascades
   (fontSize tagline = 15px, letterSpacing -0.75px, lineHeight 1). Only the
   weight needs stating (bar links are 400 too, but keep it explicit per spec). */
.gs-header .wp-block-navigation .gs-nav-plus .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: 0;
	font-weight: 400;
	white-space: nowrap;
}

/* Nav links: white text, GT America, remove default underline */
.gs-header .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* Nav hover: carolina highlight */
.gs-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--carolina);
}

/* ── Mobile overlay surface & frame ───────────────────────────────────────── */

/* Black full-screen surface (replaces old dark-navy rule). Scoped to open state
   so the closed/inline container is untouched at ≥768px. */
#site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--black);
}

/* 24px side gutter; top row cleared below 62px top row, left-aligned. */
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 62px 24px 0;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

/* Logo, top-left, mirroring closed bar. */
#site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 24px;
	width: 150px;
	height: 30px;
	background: url(../images/logo-grandstand-nav.svg) no-repeat left center;
	background-size: contain;
}

/* Close button: white, top-right, carolina on hover. */
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 17px;
	right: 24px;
	color: var(--wp--preset--color--white);
}
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--carolina);
}

/* Overlay fade: lengthen WP's 0.1s to a calmer 0.2s under normal motion. WP core animates
   via `@media not (prefers-reduced-motion)` (wp-includes/blocks/navigation/style.css:490),
   which Chromium evaluates true even under `reduce` — the reduce block below neutralizes it. */
@media (prefers-reduced-motion: no-preference) {
	#site-header .wp-block-navigation__responsive-container.is-menu-open {
		animation-duration: 0.2s;
	}
}

/* Suppress animation entirely when user has requested reduced motion — guards against
   WP core's `@media not (prefers-reduced-motion)` which matches `reduce` in some engines. */
@media (prefers-reduced-motion: reduce) {
	#site-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

/* Link list: full-width rows with hairline dividers. */
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
/* Dividers on TOP-LEVEL rows only (direct children of the root list) — the
   Partner Solutions submenu items render divider-free per the design. */
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--neutral-dark); /* Figma Color-Neutral-Dark */
}
#site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--neutral-dark);
}

/* Links ("Navigation w/ Submenu" Figma): GT America 400 / 24px / 140%
   line-height / -5% tracking, left-aligned, comfortable tap rows. */
#site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	width: 100%;
	padding: 12px 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.05em;
	text-align: left;
}

/* Current page = carolina (hover already carolina via the shared rule above). */
#site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--carolina);
}

/* Partner Solutions row in the overlay: label left, "+" pinned to the right
   edge, submenu expanded underneath by default, collapsible via the toggle. */
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus {
	display: flex;
	flex-direction: row; /* core forces overlay items to column; the "+" sits beside the label */
	flex-wrap: wrap;
	align-items: center;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus > a.wp-block-navigation-item__content {
	width: auto;
	flex: 1;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus > .wp-block-navigation__submenu-icon {
	display: inline-block; /* core hides submenu icons in the overlay; the design shows the "+" */
	margin-left: auto;
	width: 24px; /* Figma mobile "open" vector is a 24x24 frame */
	height: 24px;
}

/* Overlay submenu list: static (no dropdown chrome), indented, smaller rows.
   Figma: pl-20 py-12 gap-16 flex-col on the menu wrapper itself (not per-item
   padding), so items sit exactly 44px apart (28px line-height + 16px gap).
   Expanded by default (matches the original always-open behaviour). Collapse
   state is driven by our own .gs-nav-plus--collapsed class (toggled by
   assets/js/mobile-nav-collapse.js), NOT aria-expanded: core's navigation
   block shares/resets aria-expanded across sibling submenus when any one of
   them is toggled (its own single-open-panel assumption), which made
   Partner Solutions and Investors clobber each other's state when both keyed
   off it. A class scoped to just this <li> keeps each row independent.
   Padding moves to 0 while collapsed so height:0 fully clips the box (padding
   alone would otherwise still add height). */
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus > .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 12px 0 12px 20px;
	top: auto;
	left: auto;
	transform: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	transition: opacity 0.15s linear;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus.gs-nav-plus--collapsed > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
	height: 0;
	overflow: hidden;
	padding: 0 0 0 20px;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus > .wp-block-navigation__submenu-container::before,
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus > .wp-block-navigation__submenu-container::after {
	content: none;
}
#site-header .wp-block-navigation__responsive-container.is-menu-open li.gs-nav-plus .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: 0;
	font-size: 20px; /* Figma mobile submenu: GT America 400 / 20px / 140% / -5% */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.05em;
	white-space: normal;
}

/* Logo: never shrink in the flex row — hold its intrinsic 168×30 at every width. */
.gs-header figure.wp-block-image,
.gs-header figure.wp-block-image img {
	flex-shrink: 0;
}

/* Slimmer gutter on the closed bar below the desktop nav (64px is too wide for phones/small tablets). */
@media (max-width: 767.98px) {
	.gs-header {
		padding-left: var(--wp--preset--spacing--l);
		padding-right: var(--wp--preset--spacing--l);
	}
}

/* ≥1441px: fill the bar to the 64px gutters (logo left, nav right) instead of
   centring a 1312px island, matching the wide-screen sections. Only the
   constrained max-width is removed — the header's root padding already supplies
   the 64px gutter. Identical at ≤1440 (there the constrained 1312 already yields
   64px gutters). */
@media (min-width: 1441px) {
	.gs-header > .wp-block-group {
		max-width: none;
	}
}

/* Raise WP's collapse breakpoint from 600px to 768px: across 600–767.98px behave as
   collapsed — hide the inline list, show the hamburger. Reverses core rules at
   wp-includes/blocks/navigation/style.css:581 and :638. JS is breakpoint-agnostic. */
@media (min-width: 600px) and (max-width: 767.98px) {
	#site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	#site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ── Button block styles ───────────────────────────────────────────────────── */

/* Outline pill: transparent bg, 1px solid currentColor, full pill radius.
   Inherits text colour from parent — white on dark bands, navy on light. */
.wp-block-button.is-style-outline-pill .wp-block-button__link,
.wp-block-button.is-style-outline-pill a.wp-element-button {
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 100px;
	color: currentColor;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--tagline);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.75px;
}

.wp-block-button.is-style-outline-pill .wp-block-button__link:hover,
.wp-block-button.is-style-outline-pill a.wp-element-button:hover {
	opacity: 0.8;
}

/* Fill pill: solid white bg, same box model as outline-pill, text colour set
   via the button's textColor attribute (black on white). */
.wp-block-button.is-style-fill-pill .wp-block-button__link,
.wp-block-button.is-style-fill-pill a.wp-element-button {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 100px;
	color: currentColor;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--tagline);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.75px;
}

.wp-block-button.is-style-fill-pill .wp-block-button__link:hover,
.wp-block-button.is-style-fill-pill a.wp-element-button:hover {
	opacity: 0.8;
}

/* Text + arrow: no bg, no border, trailing → arrow via inline-SVG mask on ::after.
   Arrow SVG is assets/images/arrow-right.svg (standard 24px right arrow). */
.wp-block-button.is-style-text-arrow .wp-block-button__link,
.wp-block-button.is-style-text-arrow a.wp-element-button {
	background-color: transparent;
	border: none;
	border-radius: 0;
	color: currentColor;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--tagline);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.75px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-shadow: none;
}

.wp-block-button.is-style-text-arrow .wp-block-button__link::after,
.wp-block-button.is-style-text-arrow a.wp-element-button::after {
	content: "";
	display: inline-block;
	/* 24px icon box matching the design's arrow_forward; arrow-right.svg's own
	   viewBox padding (glyph spans x5–19) then renders the glyph ~16px, centred. */
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--carolina);
	-webkit-mask-image: url("../images/arrow-right.svg");
	mask-image: url("../images/arrow-right.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	flex-shrink: 0;
}

.wp-block-button.is-style-text-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-text-arrow a.wp-element-button:hover {
	opacity: 0.75;
	background-color: transparent;
}

/* ── Eyebrow text style ────────────────────────────────────────────────────── */

/* Eyebrow: uppercase small label (11px/eyebrow preset), GT America Medium, wide tracking.
   Colour is contextual — set per instance (neutral on light, carolina/white on dark). */
.is-style-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

/* Footer: min-height matches Figma 540px band. */
.gs-footer-outer.gs-footer-outer {
	min-height: 540px;
	box-sizing: border-box;
}

/* Two columns pushed to the edges (logo left, links right) with the airy gap in
   the middle, per design. Both stretched to equal height so the vertical divider
   + space-between fill the band. */
.gs-footer-outer .gs-footer-columns {
	align-items: stretch;
	justify-content: space-between;
	min-height: calc(540px - 2 * var(--wp--preset--spacing--xxl));
}

/* Left column: flex column with space-between so logo stays top, legal stays bottom.
   WP columns use is-layout-flow (block layout) by default; override to flex. */
.gs-footer-outer .gs-footer-col-left.is-vertically-aligned-space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Right column: flex column with space-between so chips+heading top, social bottom. */
.gs-footer-outer .gs-footer-col-right.is-vertically-aligned-space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Footer logo: constrain to 440px wide. */
.gs-footer-outer .gs-footer-col-left .wp-block-image img {
	width: 440px;
	max-width: 100%;
	height: auto;
}

/* Centre divider: 1px left border on the right footer column.
   Padding on the column itself using content-box so flex-basis is unaffected. */
.gs-footer-outer .gs-footer-rule {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	padding-left: var(--wp--preset--spacing--m);
}

/* Legal group: tighten paragraph spacing. */
.gs-footer-outer .gs-footer-legal {
	gap: 0.25rem;
}

/* Legal paragraph links: white, underlined. */
.gs-footer-outer .gs-footer-legal a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gs-footer-outer .gs-footer-legal a:hover {
	opacity: 0.75;
}

/* Social links in footer: white outlined circles matching Figma design. */
.gs-footer-outer .gs-footer-social .wp-block-social-link a {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	padding: 0.5rem;
}

.gs-footer-outer .gs-footer-social .wp-block-social-link a:hover {
	border-color: var(--wp--preset--color--white);
}

/* Social icon colour: logos-only uses currentColor; force white on dark bg. */
.gs-footer-outer .gs-footer-social {
	color: var(--wp--preset--color--white);
}

/* Outline-pill chips in footer: 15px (tagline) with compact 8px padding (design). */
.gs-footer-outer .wp-block-buttons .wp-block-button.is-style-outline-pill .wp-block-button__link {
	font-size: var(--wp--preset--font-size--tagline);
	padding: 8px;
}

/* Constrain the right-column link rows so pills wrap ~3 per row, per design. */
.gs-footer-outer .gs-footer-col-right .wp-block-buttons {
	max-width: 340px;
}

/* ≥1441px: fill the footer to the 64px gutters (logo hard-left, links hard-right)
   instead of centring the 1312 island — matches the other wide-screen sections. */
@media (min-width: 1441px) {
	.gs-footer-outer .gs-footer-columns {
		max-width: none;
	}
}

/* ≤1200px: stack the two columns. The fixed 440px + 487px columns only fit
   side-by-side with a comfortable gap above ~1200px; below that, wrap the links
   block beneath the logo block and turn the divider into a top rule. */
@media (max-width: 1200px) {
	.gs-footer-outer .gs-footer-columns {
		flex-wrap: wrap !important;
		justify-content: flex-start;
		min-height: 0;
	}

	.gs-footer-outer .gs-footer-col-left,
	.gs-footer-outer .gs-footer-col-right {
		flex-basis: 100% !important;
		max-width: 100%;
	}

	/* Legal no longer needs to be pinned to the bottom once stacked. */
	.gs-footer-outer .gs-footer-col-left.is-vertically-aligned-space-between {
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--xl);
	}

	.gs-footer-outer .gs-footer-rule {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--xl);
		margin-top: var(--wp--preset--spacing--xl);
	}
}

/* ── Hero section (.gs-hero) ─────────────────────────────────────────── */

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

/* Copy block: left edge sits at the 64px gutter, tracking the nav logo (and the
   body content) at every width — including 1440+, where the nav bar now fills to
   the gutters rather than centring a 1312px island. Capped to the Figma line
   wrap (535px); !important beats WP's constrained auto-centering. */
.gs-hero .wp-block-cover__inner-container > .gs-hero-copy {
	max-width: 535px;
	margin-left: var(--wp--preset--spacing--xxl) !important;
	margin-right: auto !important;
	position: relative;
	z-index: 2;
}

/* Zero the inner-container's global side padding (all widths) so the copy's own
   margin lands exactly at the 64px gutter — aligned with the nav logo — instead
   of being double-guttered (global padding + copy margin). On the homepage this
   is already cancelled by <main>'s constrained layout; on templates whose <main>
   uses layout:"default" (contact) it isn't, so state it explicitly here too —
   matches the same fix on .gs-careers-hero / .gs-partner-hero. */
.gs-hero .wp-block-cover__inner-container.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Decorative grid: hairlines (white @ 0.2) matching the Figma strokes.
   ::before = two full-width horizontals at y150 / y763 (px from hero top).
   ::after  = two full-height verticals bracketing the inset image
   (x ≈ 841 / 1244 within the 1440 design frame). */
.gs-hero::before,
.gs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.gs-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
		linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-repeat: no-repeat;
	background-size: 100% 1px, 100% 1px;
	background-position: 0 150px, 0 763px;
}

.gs-hero::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
		linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-repeat: no-repeat;
	background-size: 1px 100%, 1px 100%;
	background-position: calc(50% + 121px) 0, calc(50% + 525px) 0;
}

/* Let the inset figure escape the inner-container's positioning context so its
   position:absolute is anchored to .gs-hero (the cover), not the container.
   Core sets .wp-block-cover__inner-container { position: relative }, which would
   otherwise make it the containing block. Static restores .gs-hero. */
.gs-hero .wp-block-cover__inner-container {
	position: static;
}

/* Inset composition: real core/image block (.gs-hero-inset, editable/swappable
   via the media library) whose ::before (geometric pattern) and ::after
   (carolina bar) stack beneath it. Flex column + order keeps image → pattern →
   bar in both desktop and mobile with no decorative markup. Absolutely positioned
   to the design grid (top 150, left edge ≈ x841 at 1440). */
.gs-hero .gs-hero-inset {
	position: absolute;
	top: 150px;
	left: calc(50% + 121px);
	width: 403px;
	max-width: 403px;
	margin: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.gs-hero .gs-hero-inset img {
	display: block;
	order: 0;
	width: 403px;
	max-width: 403px;
	height: 612px;
	object-fit: cover;
	object-position: center center;
}

/* Office-page hero photo: the base rule above (fixed 403×612, cover) already
   matches the design's exact box — hairline-aligned on the right, flush to
   the hero's bottom edge — so office-hero needs no override here. Swapping the
   source from the grid's 416×416 square crop to the real 444×650 photo means
   cover now only trims ~15px of width (the box is only marginally taller,
   proportionally, than the photo) instead of the old crop's massive loss —
   as much of the photo as the design's box allows, without changing that box. */

.gs-hero .gs-hero-inset::before {
	content: "";
	order: 1;
	display: block;
	width: 100%;
	height: 137px;
	background: var(--wp--preset--color--panel-navy) url(../images/hero-pattern.png) no-repeat center / cover;
}

.gs-hero .gs-hero-inset::after {
	content: "";
	order: 2;
	display: block;
	width: 100%;
	height: 14px;
	background: var(--wp--preset--color--carolina);
}

/* CTA: inline arrow icon after a 15px label. */
.gs-hero .gs-hero-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}

.gs-hero .gs-hero-cta .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--carolina);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ≥1441px: the cover is full-bleed, so on wide screens spread the composition to
   fill rather than centring the 1312 design frame. The copy already sits at the
   left gutter (margin-left xxl above); anchor the inset and its two bracket
   hairlines to the right gutter (were centre + offset). Continuous at 1440:
   inset left ≈ 841 at 1440 vs ≈ 842 at 1441. */
@media (min-width: 1441px) {
	.gs-hero .gs-hero-inset {
		left: auto;
		right: 196px;
	}

	.gs-hero::after {
		/* Right line sits 1px right of the image's right edge (inset right:196px),
		   mirroring the +1px nudge in the ≤1440 base rule (edge 50%+524, line
		   50%+525). Without it the line lands exactly on the image edge. */
		background-position: calc(100% - 599px) 0, calc(100% - 195px) 0;
	}
}

/* ── Mobile / tablet hero (≤1080px): single top-aligned column ───────────────
   Copy on the darkened photo (top-down gradient), then the inset figure
   (image + pattern + carolina bar) stacked full-width at the site gutter.
   Breakpoint is 1080 (not 768): the desktop absolute figure only fits ≥~1048px,
   so below that we use the stacked layout. The full-bleed grid is desktop-only. */
@media (max-width: 1080px) {
	/* Normal block flow so copy then the (cover-level) figure stack and the
	   cover grows to content; release the fixed 914px min-height. The desktop
	   flex-centering would otherwise clip the stacked figure under overflow:hidden. */
	.gs-hero {
		display: block;
		min-height: 0 !important;
		padding-top: var(--wp--preset--spacing--xl);
		padding-bottom: var(--wp--preset--spacing--xl);
	}

	/* Top-down legibility gradient (darker where the copy sits, up top). */
	.gs-hero .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(180deg, rgba(8, 25, 46, 0.85) 0%, rgba(8, 25, 46, 0.55) 55%, rgba(8, 25, 46, 0.4) 100%) !important;
	}

	/* Drop the decorative grid on mobile. */
	.gs-hero::before,
	.gs-hero::after {
		display: none;
	}

	/* Copy: full-width column at the site mobile gutter (spacing-l = 32px). */
	.gs-hero .wp-block-cover__inner-container {
		width: 100%;
	}

	.gs-hero .wp-block-cover__inner-container > .gs-hero-copy {
		max-width: none;
		margin-left: var(--wp--preset--spacing--l) !important;
		margin-right: var(--wp--preset--spacing--l) !important;
	}

	/* Body copy: WP's fluid-typography engine rewrites the pattern's inline
	   1.25rem into a clamp() bottoming out at 14px — too small. !important is
	   required to beat that inline style. Eyebrows keep their own size. */
	.gs-hero .gs-hero-copy p:not(.is-style-eyebrow) {
		font-size: 18px !important;
		line-height: 1.5 !important;
		letter-spacing: -0.25px !important;
	}

	.gs-hero .gs-hero-copy p.is-style-eyebrow {
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	/* CTA never breaks the label. */
	.gs-hero .gs-hero-cta .wp-block-button__link {
		white-space: nowrap;
	}

	/* Inset block: in-flow, gutter-aligned, stacked below the copy. position:relative
	   (not static) keeps its z-index:2 above the absolutely-positioned cover bg image.
	   Reset the desktop absolute offsets or they shift it out of flow. */
	.gs-hero .gs-hero-inset {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: auto;
		max-width: none;
		margin: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l) 0;
	}

	.gs-hero .gs-hero-inset img {
		width: 100%;
		max-width: none;
		height: clamp(260px, 70vw, 360px);
	}

	/* Office-page hero only: the clamp() box above is landscape-shaped (tuned
	   for the old cover-cropped square) — on a real portrait building photo
	   shown via contain, that leaves huge empty gutters either side. Let the
	   image keep its own uncropped proportions instead; nothing here needs to
	   line up with a fixed grid on mobile (the decorative hairlines are
	   already hidden), so there's no trade-off like the desktop box has. */
	.gs-office-hero .gs-hero-inset img {
		height: auto;
		aspect-ratio: 444 / 650;
	}

	.gs-hero .gs-hero-inset::before {
		height: 90px;
	}

	.gs-hero .gs-hero-inset::after {
		height: 12px;
	}
}

/* ── Small phones (≤420px): tighter gutter + pattern ─────────────────────────── */
@media (max-width: 420px) {
	.gs-hero .wp-block-cover__inner-container > .gs-hero-copy {
		margin-left: var(--wp--preset--spacing--m) !important;
		margin-right: var(--wp--preset--spacing--m) !important;
	}

	.gs-hero .gs-hero-inset {
		margin-left: var(--wp--preset--spacing--m);
		margin-right: var(--wp--preset--spacing--m);
	}

	.gs-hero .gs-hero-inset::before {
		height: 70px;
	}
}

/* ── Careers hero: modifier overrides (.gs-careers-hero) ────────────────── */
/* Careers hero: bottom inset bar is off-white (homepage uses carolina); CTA arrow is white. */
.gs-careers-hero .gs-hero-inset::after {
	background: var(--wp--preset--color--off-white);
}
.gs-careers-hero .gs-hero-cta .wp-block-button__link::after {
	background-color: var(--wp--preset--color--white);
}
/* Background photo is a tall portrait (sky + curved roof at the top, ribbing
   below). Cover-crop from the top so the curve + sky show, matching Figma —
   default center crop would show only the mid ribbing band. */
.gs-careers-hero .wp-block-cover__image-background {
	object-position: center top;
}
/* Zero the inner-container's global side padding (all widths) so the copy's own
   margin lands exactly at the 64px gutter — aligned with the nav logo — instead
   of being double-guttered (global padding + copy margin). The inset image is
   absolutely positioned on desktop, so this only repositions the copy there; on
   ≤1080 it also lets the stacked inset reach the viewport edges. */
.gs-careers-hero .wp-block-cover__inner-container.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}
/* On stack (≤1080), the inset image + herringbone + bar run full-bleed
   (edge to edge) — they double as the divider into the next section. */
@media (max-width: 1080px) {
	.gs-careers-hero .gs-hero-inset {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── Brands section (.gs-brands) ─────────────────────────────────────── */

/* Logo grid: 10 cells in a CSS grid, responsive 5/3/2 cols, thin 1px token-coloured borders.
   Borders via container bg + 1px gap + per-cell dark-navy bg.
   Border colour: neutral-dark #414447 (matches Figma 1:393 cell borders). */
.gs-logo-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--neutral-dark);
	border: 1px solid var(--wp--preset--color--neutral-dark);
}

.gs-logo-grid .gs-logo-grid__cell {
	background: var(--wp--preset--color--dark-navy);
	box-sizing: border-box;
	min-height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--m);
	margin: 0;
}

.gs-logo-grid .gs-logo-grid__cell .wp-block-image {
	margin: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gs-logo-grid .gs-logo-grid__cell .wp-block-image img {
	/* min(px, 100%) caps the logo size yet never lets it exceed the cell's
	   content box, so logos never clip in the narrower responsive columns. */
	max-width: min(170px, 100%);
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.gs-logo-grid .gs-logo-grid__cell--cta .wp-block-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Stacked header (≤1200px): the lead column is a fixed 535px, so side-by-side
   only fits once the heading also has room (~1288px). Below that, force the two
   header columns to stack full-width (core only stacks them ≤781px, which would
   leave 782–1287px with the heading crushed to a sliver). row-gap l (32px) so
   the 80px desktop column gap doesn't balloon the stacked vertical gap. */
@media (max-width: 1200px) {
	.gs-brands > .wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--l);
	}

	.gs-brands > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Tablet (769–1024px): 3 columns. 9 logos fill 3 rows exactly, so the CTA
   spans the full last row (otherwise it would leave two empty trailing cells). */
@media (max-width: 1024px) {
	.gs-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gs-logo-grid .gs-logo-grid__cell--cta {
		grid-column: 1 / -1;
	}
}

/* ≤768px: 2 columns. 10 cells fill exactly (5 rows × 2), so the CTA stays an
   in-grid cell — no full-width pull-out and no empty slot. (Below 768 the 3-col
   cells would get too narrow and clip logos.) */
@media (max-width: 768px) {
	.gs-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-logo-grid .gs-logo-grid__cell--cta {
		grid-column: auto;
	}
}

/* ≤600px: tighten gutters + logo cap so phones get more room per logo. */
@media (max-width: 600px) {
	.gs-brands {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}

	.gs-logo-grid .gs-logo-grid__cell {
		min-height: 88px;
	}

	.gs-logo-grid .gs-logo-grid__cell .wp-block-image img {
		max-width: min(150px, 100%);
		max-height: 44px;
	}
}

/* ≤430px: single column. Below this, 2-col cells get too tight and the wider
   logos begin to crowd/overlap, so stack them one per row. */
@media (max-width: 430px) {
	.gs-logo-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Intelligence section (.gs-intelligence) ─────────────────────────── */

/* Feature grid borders (Figma 1:504): full-bleed 1px top + bottom rules on the
   grid (viewport width); the 1312 row carries the outer left + right verticals;
   per-cell box-shadow paints only the INTERNAL separators. The shadows are
   redefined per column count (desktop → tablet → mobile) and rely on source
   order at equal specificity, so each cell is set cleanly at every breakpoint —
   no doubled lines, no missing edges. Empty wrapped slots carry no cell, so
   off-white shows through (not a line block). */
.gs-feature-grid {
	border-top: 1px solid var(--wp--preset--color--neutral-lighter);
	border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	width: 100%;
}

/* Row: CSS grid, 5 equal columns, no gap. Outer verticals = its own L/R border. */
.gs-feature-grid .gs-feature-grid__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	background: var(--wp--preset--color--off-white);
	max-width: 1312px;
	width: 100%;
	margin-inline: auto;
	border-left: 1px solid var(--wp--preset--color--neutral-lighter);
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

.gs-feature-grid .gs-feature-grid__cell {
	background: var(--wp--preset--color--off-white);
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--m);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
}

/* Desktop (5-col, one row): internal verticals = right edge of cells 1–4
   (cell 5's right edge is the row border). Bottom = the full-bleed grid border. */
.gs-feature-grid .gs-feature-grid__cell:nth-child(-n+4) {
	box-shadow: inset -1px 0 0 0 var(--wp--preset--color--neutral-lighter);
}

.gs-feature-grid .gs-feature-grid__cell > * {
	margin: 0;
}

.gs-feature-grid .gs-feature-grid__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.gs-feature-grid .gs-feature-grid__content > * {
	margin: 0;
}

/* Icon row: leading icon left, ↗ arrow right. */
.gs-feature-grid .gs-feature-grid__icon-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
}

.gs-feature-grid .gs-feature-grid__icon-row .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.gs-feature-grid .gs-feature-grid__icon-row .wp-block-image img {
	width: 24px;
	height: 24px;
	display: block;
}

/* ↗ arrow SVG ships with fill #4DA7FF (carolina). */

/* ≥1441px: widen the feature row to the 64px gutters (matching the other
   full-bleed sections) instead of centring the 1312 island. The top/bottom
   rules already span full width. Continuous at 1440 (row ≈ 1312 either side). */
@media (min-width: 1441px) {
	.gs-feature-grid .gs-feature-grid__row {
		/* Fill to the 64px gutters. Cap the width (margin-inline stays auto from
		   the base rule) rather than adding margins on top of width:100%, which
		   would overflow the viewport by 128px. */
		max-width: calc(100% - 2 * var(--wp--preset--spacing--xxl));
	}
}

/* Tablet (≤1079px): 3 columns — cells 1–3 (row 1) / 4–5 (row 2) + one empty slot.
   Redefine each cell's separators for the wrapped layout (source order overrides
   the desktop rule). */
@media (max-width: 1079px) {
	.gs-feature-grid .gs-feature-grid__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.gs-feature-grid .gs-feature-grid__cell:nth-child(-n+2) {
		box-shadow: inset -1px -1px 0 0 var(--wp--preset--color--neutral-lighter); /* row1 col1/2: right + bottom */
	}
	.gs-feature-grid .gs-feature-grid__cell:nth-child(3) {
		box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--neutral-lighter);    /* row1 col3: bottom (right is the edge) */
	}
	.gs-feature-grid .gs-feature-grid__cell:nth-child(4),
	.gs-feature-grid .gs-feature-grid__cell:nth-child(5) {
		box-shadow: inset -1px 0 0 0 var(--wp--preset--color--neutral-lighter);    /* row2: right only (bottom is the grid border) */
	}
}

/* Mobile (≤600px): 1 column, horizontal dividers only (no side verticals —
   matches the original mobile treatment). Each cell's bottom draws the divider,
   except the last (full-bleed grid border). */
@media (max-width: 600px) {
	.gs-feature-grid .gs-feature-grid__row {
		grid-template-columns: 1fr;
		border-left: 0;
		border-right: 0;
	}
	.gs-feature-grid .gs-feature-grid__cell:nth-child(-n+4) {
		box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--neutral-lighter);
	}
	.gs-feature-grid .gs-feature-grid__cell:nth-child(5) {
		box-shadow: none;
	}
}

/* --4 modifier: Fintech card hidden while GS_ROLLCARD_LIVE is false (see
   patterns/intelligence.php), so the row only renders 4 cells. The base
   rules above assume exactly 5 children, so every breakpoint needs its own
   4-cell border/column logic here rather than just omitting the 5th cell. */
.gs-feature-grid .gs-feature-grid__row--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Desktop (4-col, one row): internal verticals = right edge of cells 1–3
   (cell 4's right edge is the row border). */
.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(-n+3) {
	box-shadow: inset -1px 0 0 0 var(--wp--preset--color--neutral-lighter);
}

.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(4) {
	box-shadow: none;
}

@media (max-width: 1079px) {
	/* Tablet (3-col): cells 1-3 fill row 1, cell 4 alone on row 2. */
	.gs-feature-grid .gs-feature-grid__row--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(-n+2) {
		box-shadow: inset -1px -1px 0 0 var(--wp--preset--color--neutral-lighter);
	}
	.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(3) {
		box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--neutral-lighter);
	}
	.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(4) {
		box-shadow: none;
	}
}

@media (max-width: 600px) {
	/* Mobile (1-col): cells 1-3 get the bottom divider, cell 4 (last) none. */
	.gs-feature-grid .gs-feature-grid__row--4 {
		grid-template-columns: 1fr;
	}
	.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(-n+3) {
		box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--neutral-lighter);
	}
	.gs-feature-grid .gs-feature-grid__row--4 .gs-feature-grid__cell:nth-child(4) {
		box-shadow: none;
	}
}

/* ── Join Team section (.gs-join-team) ───────────────────────────────── */

/* Outer columns: remove default gap so image flush-abuts content column. */
.gs-join-team .gs-join-team__columns {
	gap: 0;
	align-items: stretch;
}

/* Image column: fill full height, no extra margin/padding. */
.gs-join-team .gs-join-team__image-col {
	padding: 0 !important;
	margin: 0;
	min-height: 0;
	display: flex;
	align-items: stretch;
}

/* Image figure: stretch to fill the column, remove default figure margin. */
.gs-join-team .gs-join-team__image-col .gs-join-team__image {
	display: flex;
	flex: 1;
	margin: 0;
	line-height: 0;
	width: 100%;
}

/* Image itself: full cover fill with no radius, sharp corners. */
/* width/height are !important to beat the Site Editor, which puts an inline
   style="width:720px;height:720px" on a resized image's <img> (the front end
   only has width/height ATTRIBUTES, which CSS already overrides — so !important
   is a no-op there). Without this the editor renders the image at its intrinsic
   720×720, left-aligned in its column with a gap on the right, instead of
   full-bleed/right-aligned like the front end. */
.gs-join-team .gs-join-team__image-col .gs-join-team__image img {
	width: 100% !important;
	height: 100% !important;
	min-height: 400px;
	object-fit: cover;
	object-position: center center;
	display: block;
	border-radius: 0;
}

/* Editor only: when the image block is selected it gains a ResizableBox wrapper
   sized to the image's pixel dimensions; make it fill the column too so the
   selected state matches. Inert on the front end (no such wrapper there). */
.gs-join-team .gs-join-team__image-col .components-resizable-box__container {
	width: 100% !important;
	height: 100% !important;
}

/* Stat row: horizontal flex, separated by vertical 1px rules. */
.gs-stat-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

/* Each stat is sized to its content and packed left (matches the design) so the
   dividers sit beside the numbers, not at far equal-column edges. */
.gs-stat-row .gs-stat {
	flex: 0 0 auto;
	min-width: 0;
}

/* Stat numbers: never wrap mid-value (e.g. "400+" stays on one line). */
.gs-stat-row .gs-stat p:first-child {
	white-space: nowrap;
}

/* Vertical divider between stats: a dark 1px rule (neutral-dark, per design),
   CENTRED in the gap via equal padding — padding-right on the stat before the
   border and padding-left on the stat after it. */
.gs-stat-row .gs-stat:not(:last-child) {
	padding-right: var(--wp--preset--spacing--xl);
}

.gs-stat-row .gs-stat + .gs-stat {
	border-left: 1px solid var(--wp--preset--color--neutral-dark);
	padding-left: var(--wp--preset--spacing--xl);
}

/* Responsive: stack columns at tablet/mobile. Stacks at ≤1024 (not 781) because
   the content-width stat row needs ~480px and would otherwise overrun into the
   image column once the side-by-side content column drops below ~900px. */
@media (max-width: 1024px) {
	.gs-join-team .gs-join-team__columns {
		flex-wrap: wrap !important;
	}

	.gs-join-team .gs-join-team__columns .wp-block-column {
		flex-basis: 100% !important;
	}

	.gs-join-team .gs-join-team__content-col {
		max-width: 560px;
	}

	.gs-join-team .gs-join-team__image-col {
		min-height: 320px;
	}

	.gs-join-team .gs-join-team__image-col .gs-join-team__image img {
		min-height: 320px;
	}
}

/* Responsive: keep stats 3-across at narrow widths, reduce number size + padding. */
@media (max-width: 600px) {
	.gs-join-team .gs-join-team__content-col {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
	}

	.gs-stat-row {
		flex-wrap: nowrap;
		gap: 0;
	}

	/* Number scales with viewport so "400+" never overflows its cell into the divider. */
	.gs-stat-row .gs-stat p:first-child {
		font-size: clamp(1.5rem, 7vw, 2rem) !important;
	}

	.gs-stat-row .gs-stat p:last-child {
		font-size: var(--wp--preset--font-size--text-sm) !important;
	}

	/* Divider gap on phones — enough room that the rule never crowds the text. */
	.gs-stat-row .gs-stat:not(:last-child) {
		padding-right: var(--wp--preset--spacing--s);
	}

	.gs-stat-row .gs-stat + .gs-stat {
		padding-left: var(--wp--preset--spacing--s);
	}
}

/* ── Nasdaq / Investors section ─────────────────────────────────────────────── */

/* Stat stack: 3 stats arranged as horizontal rows (number LEFT, label RIGHT).
   Each row separated by a 1px horizontal rule. */
.gs-stat-stack {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Each stat row: number left, label right, flex. Gap via CSS (no blockGap in JSON). */
.gs-stat-stack .gs-stat-stack__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* First/last rows trim outer padding so the stack centres in the column. */
.gs-stat-stack .gs-stat-stack__row:first-child {
	padding-top: 0;
}

.gs-stat-stack .gs-stat-stack__row:last-child {
	padding-bottom: 0;
}

/* Override WP's default flex gap on the inner row groups (WP injects gap via style). */
.gs-stat-stack .gs-stat-stack__row.wp-block-group {
	gap: var(--wp--preset--spacing--m);
}

/* Horizontal 1px rule between rows — top border on 2nd and 3rd rows (design: black). */
.gs-stat-stack .gs-stat-stack__row + .gs-stat-stack__row {
	border-top: 1px solid var(--wp--preset--color--black);
}

/* Number takes its natural width; label fills the rest (design: labels hug each number). */
.gs-stat-stack .gs-stat-stack__row .gs-stat-stack__number {
	flex-shrink: 0;
}

/* Values never break (e.g. "$165M", "500K+"). */
.gs-stat-stack .gs-stat-stack__number p {
	white-space: nowrap;
}

/* Mobile: tighten the vertical rhythm between stacked stats a little. */
@media (max-width: 600px) {
	.gs-stat-stack .gs-stat-stack__row {
		padding-top: var(--wp--preset--spacing--l);
		padding-bottom: var(--wp--preset--spacing--l);
	}
}

/* Nasdaq columns: gap between left and right columns. */
.gs-nasdaq .gs-nasdaq__columns {
	gap: var(--wp--preset--spacing--xxl);
	align-items: center;
}

/* Left content column is a flex column so the links can be pinned to the bottom
   (design: top text group, links bottom-aligned with the last stat). */
.gs-nasdaq .gs-nasdaq__content {
	display: flex;
	flex-direction: column;
}

/* Nasdaq links row: gap between the 4 text-arrow links; wrap to rows as width shrinks.
   margin-top:auto pushes the links to the bottom of the (stretched) content column on
   desktop, leaving design space below the body; when the column is only as tall as its
   content (stacked mobile) the auto collapses and the body's margin-bottom sets the gap. */
.gs-nasdaq .gs-nasdaq__links {
	gap: var(--wp--preset--spacing--m);
	flex-wrap: wrap;
	margin-top: auto;
}

/* Responsive: stack at tablet/mobile. */
@media (max-width: 781px) {
	.gs-nasdaq .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.gs-nasdaq .wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Careers Stats section (.gs-careers-stats) ───────────────────────── */

/* Two-column layout: design caps the columns at 516 / 601 and pushes them to
   the gutters (space-between → ~195px between them at the 1312 content width).
   Top-aligned so the stat stack spans from the heading down, matching the left
   text block height (Figma: both columns ~500px). */
.gs-careers-stats .gs-stats__columns {
	justify-content: space-between;
	align-items: stretch;
	/* xxl is a FLOOR: space-between still opens the columns to the gutters at
	   1440 (~195px), but as the row shrinks the gap never drops below 64px, so
	   the stats never butt against the copy before the columns stack. */
	gap: var(--wp--preset--spacing--xxl);
	flex-wrap: nowrap;
}

/* Left content column constrained to design's 516px; right stat column to 601px. */
.gs-careers-stats .gs-stats__col-left {
	flex: 0 1 516px;
	max-width: 516px;
}
.gs-careers-stats .gs-stats__col-right {
	flex: 0 1 601px;
	max-width: 601px;
}

/* >1440: fill to the 64px gutters. The copy pins hard-left at the nav logo, and
   the stats column GROWS to the right gutter so the divider lines run to the edge
   of the section (as in the design). The number+label content stays grouped at
   the left of that column (the label doesn't flex-grow), so only the lines extend
   past the content. The 195px gap preserves the 1440 text↔stats spacing/feel. */
@media (min-width: 1441px) {
	.gs-careers-stats > .gs-stats__columns {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-content: flex-start;
		gap: 195px;
	}
	/* !important beats the inline flex-basis:46%/54% the columns block emits. */
	.gs-careers-stats .gs-stats__col-left {
		flex: 0 0 516px !important;
	}
	.gs-careers-stats .gs-stats__col-right {
		flex: 1 1 0 !important;
		max-width: none;
	}
}

/* Careers dividers: faint neutral-lighter (not the nasdaq black).
   Override the base .gs-stat-stack rule (placed after that rule so cascade wins). */
.gs-careers-stats .gs-stat-stack__row + .gs-stat-stack__row {
	border-top-color: var(--wp--preset--color--neutral-lighter);
}
/* Distribute the 4 stats to fill the column height (which the taller left text
   block defines), so the last stat's bottom aligns with the text's bottom.
   Rows are equal-height and vertically centre their content; the divider sits on
   the row boundary, equidistant from the centred stat above and below. */
.gs-careers-stats .gs-stat-stack {
	height: 100%;
}
.gs-careers-stats .gs-stat-stack__row {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Image Trio section (.gs-image-trio) ────────────────────────────────── */

/* Flex row: 3 images side-by-side, capped at 1312px (centred island; portrait
   images stay grouped on >1440 rather than spreading to the gutters).
   Gap is responsive — 51px at the 1440 design width, easing down as the row
   narrows so the thirds never get crowded by an oversized gutter. */
.gs-image-trio .gs-image-trio__row {
	display: flex;
	justify-content: space-between;
	gap: clamp(20px, 3.6vw, 51px);
	max-width: 1312px;
	margin-inline: auto;
	width: 100%;
}

/* Each figure takes an equal third; strip WP's default figure margin. */
.gs-image-trio .gs-image-trio__img {
	flex: 1 1 0;
	margin: 0;
}

/* Portrait aspect (the 403×612 design ratio) instead of a fixed height, so the
   images scale proportionally as the thirds narrow — no thin/tall slivers.
   At 1440 a third is ~403px → ~612px tall, matching the design. */
.gs-image-trio .gs-image-trio__img img {
	display: block;
	width: 100%;
	aspect-ratio: 403 / 612;
	height: auto;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* >1440: fill to the 64px gutters (align with the rest of the page, kill the
   wide-screen dead space) — the thirds grow with the row. Cap the height so the
   now-wider portrait crops don't tower; object-fit keeps them framed. */
@media (min-width: 1441px) {
	.gs-image-trio .gs-image-trio__row {
		max-width: none;
	}
	.gs-image-trio .gs-image-trio__img img {
		max-height: 700px;
	}
}

/* ── Testimonial section (.gs-testimonial) ──────────────────────────────── */

/* Centered column: max 768px, items centre-aligned (avatar, chip, quote, name, role). */
.gs-testimonial .gs-testimonial__col {
	max-width: 768px;
	margin-inline: auto;
	align-items: center;
}

/* Avatar figure: strip default WP figure margin; image is round. */
.gs-testimonial .gs-testimonial__avatar {
	margin: 0;
}

.gs-testimonial .gs-testimonial__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 100px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Tenure chip: bordered box, uppercase via is-style-eyebrow, centred. */
.gs-testimonial .gs-testimonial__tenure {
	border: 1px solid var(--wp--preset--color--neutral-light);
	padding: 6px 8px;
	width: fit-content;
	margin-inline: auto;
}

/* ── Awards Slider (.gs-awards) ───────────────────────────────────────── */

/* Intro block: left gutter (xxl/64 = design page-padding) so the heading aligns with the
   first tile; left-flush full-width (no 1312 centre cap) so the carousel can bleed right. */
.gs-awards .gs-awards__intro {
	padding-left: var(--wp--preset--spacing--xxl);
	padding-right: var(--wp--preset--spacing--xxl);
}

/* Heading + body constrained to the design's 698px column, left-aligned. */
.gs-awards .gs-awards__intro :is(h2, p) {
	max-width: 698px;
}

/* Intro → cards gap = 80px (design). This margin beats WP's flow block-gap so the gap is
   exactly band-md (80 @1440). */
.gs-awards .gs-awards-track {
	margin-top: var(--wp--preset--spacing--band-md);
}

/* Drag fix: cards and their logos are transparent to the pointer so the track owns
   the pointer drag for presses anywhere on the carousel (incl. on a card), and the
   browser never starts a native image-drag that would abort drag-to-scroll. Cards are
   non-interactive (no links), so this is safe. */
.gs-awards-track .wp-block-image,
.gs-awards-track .wp-block-image img {
	pointer-events: none;
}

/* Slider track: horizontal flex row, scrollable, no wrap. Hides scrollbar
   visually but remains scrollable (accessible + draggable). */
.gs-awards-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 24px;
	padding-left: var(--wp--preset--spacing--xxl);
	padding-right: var(--wp--preset--spacing--xxl);
	/* Snap respects the left gutter so the first tile rests aligned with the heading. */
	scroll-padding-left: var(--wp--preset--spacing--xxl);
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* No snap by default: desktop/fine pointers (wheel, trackpad, drag) scroll
	   freely and smoothly. Mandatory snap is re-enabled for touch only, below. */
	/* Hide scrollbar (visually), still scrollable */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gs-awards-track::-webkit-scrollbar {
	display: none;
}

/* Focus ring on the track for keyboard users. */
.gs-awards-track:focus {
	outline: 3px solid var(--wp--preset--color--carolina);
	outline-offset: 2px;
}

.gs-awards-track:focus:not(:focus-visible) {
	outline: none;
}

/* Each image block IS a card (364×364): dark-navy base, the chevron pattern
   stretched over the upper area (the SVG's transparent base lets the navy show),
   a mustard bottom border, and the white award logo centred on top. Rebuilt from
   CSS so only the logo is an asset — no more whole-card PNGs. */
.gs-awards .gs-awards-track .wp-block-image {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
	width: 364px;
	height: 364px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--dark-navy);
	/* Stretched to the padding box (364×353) exactly as in the design, which scales
	   the square pattern non-uniformly (the SVG is preserveAspectRatio="none"). */
	background-image: url(../images/awards/chevron.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 100%;
	background-clip: padding-box;
	border-bottom: 11px solid var(--wp--preset--color--mustard);
}

/* Logo sits on top, centred. Display width comes from each image block's own
   width attribute (per-logo, from the design); the max bounds are a safety net so
   a logo never touches the card edges or overflows on the smaller mobile card. */
.gs-awards .gs-awards-track .wp-block-image img {
	display: block;
	height: auto;
	max-width: calc(100% - 48px);
	max-height: 45%;
}

/* Touch devices keep mandatory snap so flicks page tile-to-tile with momentum
   (the natural mobile feel). Desktop/fine pointers fall through to the no-snap
   base rule and scroll freely instead of stepping. */
@media (pointer: coarse) {
	.gs-awards-track {
		scroll-snap-type: x mandatory;
	}
}

/* Respect prefers-reduced-motion: disable smooth scrolling and snap. Placed
   after the touch rule so reduced-motion wins even on touch devices. */
@media (prefers-reduced-motion: reduce) {
	.gs-awards-track {
		scroll-behavior: auto;
		scroll-snap-type: none;
	}
}

/* Responsive: at mobile, track still scrolls internally — cards shrink to 300²
   so ~1.2 cards peek. The logo max-width/height bounds scale logos to fit. */
@media (max-width: 599px) {
	.gs-awards .gs-awards__intro {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
	}

	.gs-awards-track {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
		scroll-padding-left: var(--wp--preset--spacing--m);
		gap: 16px;
	}

	.gs-awards .gs-awards-track .wp-block-image {
		width: 300px;
		height: 300px;
	}
}

/* ── What's Happening section ──────────────────────────────────────────────── */

/* Header row: heading + text-arrow link, space-between, CTA bottom-aligned (design). */
.gs-whats-happening__header {
	align-items: flex-end;
}

/* Heading: constrain width so the text wraps at "What's happening" / "at Grandstand". */
.gs-whats-happening__heading {
	max-width: min(457px, 100%);
	flex-shrink: 0;
	/* Stabilise layout height across font-display:swap FOUT. */
	min-height: 8.1rem; /* 2 lines × 3.375rem × 1.2 lh */
}

/* Query block: 3-col grid with 32px gap. The wp:post-template grid handles
   column count, but we enforce the gap and ensure image aspect ratio here. */
.gs-whats-happening__query .wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* Post card: column stack (image on top, content below); 24px image→content gap. */
.gs-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
}

/* Kill WP flow block-gap margins on the direct children so the flex gap owns the
   image→content spacing (otherwise it doubles to 48px). */
.gs-post-card > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Featured image: square aspect ratio, object-fit cover, no extra margin. */
.gs-post-card .wp-block-post-featured-image {
	margin: 0;
}

.gs-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto; /* clear HTML height attribute so aspect-ratio takes effect */
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Category tag: the block already carries is-style-eyebrow, which supplies the
   uppercase/tracking/weight/family recipe — only the per-instance differences
   (12px size, black, bottom margin) are declared here. */
.gs-post-card__tag.wp-block-post-terms {
	font-size: var(--wp--preset--font-size--text-xs);
	color: var(--wp--preset--color--black);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.gs-post-card__tag.wp-block-post-terms a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Post title: 24px GT America Regular, black (design H5). */
.gs-post-card .wp-block-post-title {
	font-size: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -1.2px;
	color: var(--wp--preset--color--black);
	margin: 0;
}

.gs-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.gs-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Byline + publish date row (SEO ask): "By {author}" left, date right. */
.gs-post-card__meta {
	display: flex;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	letter-spacing: -0.75px;
	color: var(--wp--preset--color--neutral-dark);
}

.gs-post-card__author::before {
	content: "By ";
}

/* Responsive: the post-template uses WP's grid layout (is-layout-grid), which
   has no built-in breakpoints for a fixed columnCount — so override the
   grid-template-columns directly. (Earlier .is-flex-container rules were dead:
   this is a grid container, not flex.) */

/* Tablet: 3 cols cramp (cards < ~300px) → 2-col. */
@media (max-width: 1024px) {
	.gs-whats-happening__query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Header: heading + "See all news" stop fitting on one row → stack the link
   under the heading instead of crushing it to a vertical sliver. */
@media (max-width: 767px) {
	.gs-whats-happening__header.wp-block-group {
		flex-wrap: wrap !important;
		align-items: flex-start;
		justify-content: flex-start;
		row-gap: var(--wp--preset--spacing--m);
	}
}

/* Mobile: single column. */
@media (max-width: 599px) {
	.gs-whats-happening__query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Large screens (≥1441): fill to the 64px gutters like the other sections,
   instead of remaining a centred 1312px island. */
@media (min-width: 1441px) {
	.gs-whats-happening > .gs-whats-happening__header,
	.gs-whats-happening > .gs-whats-happening__query {
		max-width: none;
	}
}

/* ── News Grid (.gs-news-grid) ───────────────────────────────────────── */
.gs-news-grid {
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--band) var(--wp--preset--spacing--xxl);
	/* Top padding flattened to 64px (xxl) instead of the `band` clamp (up to
	   80px) — band's extra growth on wide desktop viewports read as too much
	   space above the grid. Bottom keeps `band`. */
	padding-top: var(--wp--preset--spacing--xxl);
}
/* position:relative makes __inner the context for the full-section rule overlay */
.gs-news-grid__inner { max-width: 1312px; margin-inline: auto; position: relative; }
.gs-news-grid__gridwrap { position: relative; }
/* Nudge card titles/category tags 10px right of the card edge — scoped to
   this section only, not the shared .gs-post-card base (whats-happening on
   the homepage reuses that same card markup and should stay untouched). */
.gs-news-grid .gs-post-card__tag { margin-left: 10px; }
.gs-news-grid .gs-post-card__title { margin-left: 10px; margin-right: 10px; }
.gs-news-grid .gs-post-card__meta { margin-left: 10px; margin-right: 10px; }
.gs-news-grid__query {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--l); /* 64px row / 32px column, per Figma */
}
.gs-news-grid__more {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--band-md);
	position: relative; /* above the rule overlay */
	z-index: 2;
	/* White "knockout" halo around the button: invisible white-on-white, but it
	   masks any column hairline passing behind the pill (e.g. the 2-col centre
	   line at 50%) so the line breaks cleanly above/below the button instead of
	   crossing it. Centered + fit-content so it only covers the button area. */
	width: fit-content;
	margin-inline: auto;
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--m);
}
.gs-news-grid__more-btn {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--tagline);
	letter-spacing: -0.75px;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 100px;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
	cursor: pointer;
}
.gs-news-grid__more-btn[hidden] { display: none; }
.gs-news-grid__more-btn:disabled { opacity: .6; cursor: default; }

/* Column hairline overlay — append-safe (grows with Load More rows). Extends
   past __inner by the section's band padding on both ends so the verticals
   reach the section edges (touching the hero above and archive below), per design.
   z-index sits ABOVE the card grid (not below it): the left/right edge lines
   sit flush against card1's left edge and card3's right edge with no gutter
   buffer, so with cards on top an opaque featured image (a white-background
   logo PNG is the common case, but any image would do it) painted over that
   1px column and erased the line for the image's full height. Painting the
   (pointer-events:none) line above the cards instead keeps it a true
   continuous border regardless of image content. Stays below __heading/__more,
   which punch their own deliberate gaps in the line. */
.gs-news-grid__rules {
	position: absolute;
	left: 0;
	right: 0;
	/* Cancels the section's own top padding so the line reaches exactly to the
	   section's outer edge (touching the hero above) — must match whatever
	   .gs-news-grid's padding-top actually is (xxl, not band). */
	top: calc(-1 * var(--wp--preset--spacing--xxl));
	bottom: calc(-1 * var(--wp--preset--spacing--band));
	pointer-events: none;
	z-index: 1;
	background-image:
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
	background-repeat: no-repeat;
	background-size: 1px 100%;
	/* left edge, col1/col2 boundary, col2/col3 boundary, right edge */
	background-position:
		left 0 top 0,
		left calc((100% - 2 * var(--wp--preset--spacing--l)) / 3 + var(--wp--preset--spacing--l)) top 0,
		left calc((100% - 2 * var(--wp--preset--spacing--l)) / 3 * 2 + var(--wp--preset--spacing--l) * 2) top 0,
		right 0 top 0;
}
/* ≤1024: 2-col. ≤599: 1-col. (matches .gs-post-card grid breakpoints) */
@media (max-width: 1024px) {
	.gs-news-grid__query { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* 2-col: single interior line at the column boundary + edges. */
	.gs-news-grid__rules {
		background-image:
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
		background-size: 1px 100%;
		background-position:
			left 0 top 0,
			left calc((100% - var(--wp--preset--spacing--l)) / 2 + var(--wp--preset--spacing--l) / 2) top 0,
			right 0 top 0;
	}
}
@media (max-width: 599px) {
	.gs-news-grid__query { grid-template-columns: minmax(0, 1fr); }
	/* Single-column feed felt cramped on phones — the fixed 64px (xxl) side
	   gutter ate a big share of a ~390px viewport, leaving the square thumbs
	   noticeably small. Narrow the gutter so the available column (and its
	   thumbnail) gets meaningfully wider. Top padding (the `band` clamp) also
	   matches the side gutter now — it was noticeably wider than the sides,
	   reading as extra dead space above the first card. */
	.gs-news-grid { padding-top: var(--wp--preset--spacing--m); padding-left: var(--wp--preset--spacing--m); padding-right: var(--wp--preset--spacing--m); }
	/* 1-col: outer edges only. */
	.gs-news-grid__rules {
		/* top offset cancels the section's own top padding so the line reaches
		   exactly to the section's outer edge — it was still using the old
		   band offset above, so the line overshot past the (now-shorter) m
		   padding and bled up into the hero section above it. */
		top: calc(-1 * var(--wp--preset--spacing--m));
		background-image:
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
		background-size: 1px 100%;
		background-position: left 0 top 0, right 0 top 0;
	}
}
/* ≥1441: cap growth instead of filling to the gutters — per stakeholder
   feedback (Colin Brannigan, 2026-07-16) the card thumbnails were scaling up
   too far on wide screens (unbounded max-width let the 3-col row stretch past
   1312px, blowing the square featured-image thumbs well past their Figma
   size). Capping at 1440px keeps growth modest instead of unbounded. */
@media (min-width: 1441px) {
	.gs-news-grid__inner { max-width: 1440px; }
}

/* ── News Archive Link Bar (.gs-news-archive) ────────────────────────── */

/* Full-bleed off-white bar: prompt left, "View the archive" link right. */
.gs-news-archive {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* Right-side archive link: black text + mustard ↗ arrow via ::after. */
.gs-news-archive__link {
	color: var(--wp--preset--color--black);
	text-decoration: none;
	white-space: nowrap;
}

.gs-news-archive__link::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 23px;
	margin-left: 12px;
	vertical-align: middle;
	background: url(../images/news-archive-arrow.svg) center / contain no-repeat;
}

/* ≤768: stack to column, left-aligned, m row-gap (mirrors .gs-whats-happening__header wrap). */
@media (max-width: 768px) {
	.gs-news-archive {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--wp--preset--spacing--m);
	}
}

/* ── Newsletter CTA (.gs-cta) ────────────────────────────────────────── */

/* Inset dark-navy card: seamless chevron pattern bg, full-width, 9px carolina border. */
.gs-cta-card {
	background-color: var(--wp--preset--color--panel-navy);
	/* Herringbone lifted from the hero's own pattern (hero-pattern.png), cropped to a
	   seamless 173×86 unit so it carries the hero's light/dark line banding — the
	   bright accent line whose position shifts per group — not just uniform lines.
	   Rendered at native size (~86px chevron period, matching node 70:798 and the
	   hero); ground is panel-navy, so it blends with the card. */
	background-image: url("../images/cta-herringbone.png");
	background-repeat: repeat;
	background-size: 173px 86px;
	border: 9px solid var(--wp--preset--color--carolina);
	border-radius: 0;
	position: relative;
	/* Center all block children */
	text-align: center;
	/* Min-height to hit Figma target section height. */
	min-height: 463px;
}

/* White inner border (1px) at the carolina border's inner edge (design node 1:758).
   Corner medallion SVGs are painted as background layers on the card (above). */
.gs-cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--wp--preset--color--white);
	pointer-events: none;
	z-index: 2;
}

/* Corner medallions (design SVGs) at the panel's OUTER corners, over the carolina
   border. Painted as four background layers on a single ::after so they need NO
   markup: the previous .gs-cta-corners lived in a core/html block, which the Site
   Editor canvas renders empty — so the corners vanished in the editor. inset:-9px
   reaches the border's outer edge; 62px layers match the 62×62 SVGs (identical to
   the old 62px spans with background-size:contain). */
.gs-cta-card::after {
	content: "";
	position: absolute;
	inset: -9px;
	pointer-events: none;
	z-index: 3;
	background-image:
		url("../images/cta-corner-tl.svg"),
		url("../images/cta-corner-tr.svg"),
		url("../images/cta-corner-bl.svg"),
		url("../images/cta-corner-br.svg");
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 62px 62px;
}

/* G icon: centered block display. */
.gs-cta-icon {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.gs-cta-icon figure,
.gs-cta-icon.wp-block-image {
	display: flex;
	justify-content: center;
}

.gs-cta-icon img {
	width: auto;
	height: 48px;
}

/* Center the heading and paragraph text. */
.gs-cta-card .wp-block-heading,
.gs-cta-card .wp-block-paragraph {
	text-align: center;
}

/* Newsletter form: white pill container, full-width up to 520px. */
.gs-cta-form {
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border-radius: 9999px;
	padding: 0 var(--wp--preset--spacing--m);
	min-height: 62px;
	max-width: 520px;
	margin: 0 auto;
	gap: var(--wp--preset--spacing--xs);
}

.gs-cta-form input[type="email"] {
	flex: 1 1 auto;
	border: none;
	outline: none;
	background: transparent;
	font-size: var(--wp--preset--font-size--tagline);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.75px;
	color: var(--wp--preset--color--neutral);
	padding: 10px 0;
	min-width: 0;
}

.gs-cta-form input[type="email"]::placeholder {
	color: var(--wp--preset--color--neutral);
}

/* Submit: plain carolina arrow (no circle), masked from arrow-right.svg. */
.gs-cta-form button[type="submit"] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease;
}

.gs-cta-form button[type="submit"]:hover {
	opacity: 0.7;
}

.gs-cta-form__arrow {
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--carolina);
	-webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
	mask: url("../images/arrow-right.svg") center / contain no-repeat;
}

/* Editor only: core/html renders the newsletter form inside a sandbox iframe
   sized to the block's full content width (768px), so the iframe body shows as a
   faint band beside the 520px pill. Constrain the block to the pill width so the
   editor preview reads cleanly. The front end emits the raw <form> with no
   .wp-block-html wrapper, so this rule is inert there. */
.gs-cta-card .wp-block-html {
	max-width: 520px;
	margin-inline: auto;
}

/* Responsive: form full-width at mobile. */
@media (max-width: 599px) {
	.gs-cta-form {
		max-width: 100%;
		padding-left: 16px;
	}

	.gs-cta.wp-block-group {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── Blog Post Hero ──────────────────────────────────────────── */
.gs-post-hero { position: relative; overflow: hidden; }
.gs-post-hero__container {
	position: relative;
	z-index: 1;                 /* content above the decorative hairlines */
	width: 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--band-md);
}
.gs-post-hero__text { flex: 0 1 519px; max-width: 519px; }
.gs-post-hero__image { position: relative; flex: 0 0 auto; width: 681px; }
.gs-post-hero__image img { width: 100%; height: auto; display: block; object-fit: cover; }
.gs-post-hero__title { font-size: var(--wp--preset--font-size--headline); }
.gs-post-hero__date time::after { content: " ET"; }
.gs-post-hero__byline::before { content: "By "; }

/* Decorative hairline frame. ::before = two full-width horizontals at the band
   top/bottom; ::after = two full-height verticals at the image's left & right
   edges (image is 681 wide, right-aligned to the global padding edge). */
.gs-post-hero::before,
.gs-post-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
		linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
}
.gs-post-hero::before {
	background-size: 100% 1px, 100% 1px;
	background-position: 0 var(--wp--preset--spacing--band), 0 calc(100% - var(--wp--preset--spacing--band));
}
.gs-post-hero::after {
	background-size: 1px 100%, 1px 100%;
	/* right line nudged 1px toward the edge — at exactly xxl it renders invisibly against the image edge (same as the homepage hero) */
	background-position: right calc(var(--wp--preset--spacing--xxl) - 1px) top, right calc(var(--wp--preset--spacing--xxl) + 681px) top;
}

/* Herringbone panel in the bottom band, directly under the image (Figma 70:1204). */
.gs-post-hero__image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--wp--preset--spacing--band);
	background: var(--wp--preset--color--panel-navy) url(../images/post-hero-herringbone.png) center / cover no-repeat;
}

/* ── Blog Post Body (prose) ──────────────────────────────────── */
/* Article section text = pure black (Figma color-scheme-1/text #000),
   overriding the site default body grey (#202224) and navy headings. */
.gs-post-body { color: var(--wp--preset--color--black); position: relative; }
.gs-prose h1,
.gs-prose h2,
.gs-prose h3 { color: var(--wp--preset--color--black); }

/* Decorative left rule running the full height of the article body (Figma
   node 70:1256, Neutral Lighter). Sits ~63px into the left margin, just left of
   the 768 reading column. Hidden <=1080 where that margin collapses. */
.gs-post-body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 384px - 63px);
	width: 1px;
	background: var(--wp--preset--color--neutral-lighter);
	pointer-events: none;
}
.gs-post-body .gs-prose { width: 100%; max-width: 768px; }
/* Above the 1440 design width, let the article column breathe instead of
   staying pinned at 768 in a wide margin. Grows gently from ~768 toward a
   960 cap — never full-width. (<=1440 keeps the design's 768 exactly.) */
@media (min-width: 1441px) {
  .gs-post-body .gs-prose,
  .gs-post-body .gs-post-share { max-width: min(960px, 56vw); }
  /* keep the rule 63px left of the widened column */
  .gs-post-body::before { left: calc(50% - (min(960px, 56vw) / 2) - 63px); }
  /* hero text + image move out to the nav edges (drop the 1312 cap) */
  .gs-post-hero > .gs-post-hero__container { max-width: none; }
}
.gs-prose > :first-child { margin-top: 0; }
.gs-prose h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--headline);
  font-weight: 500; line-height: 1.2; letter-spacing: -2.7px;
  margin: 0 0 var(--wp--preset--spacing--m);
}
.gs-prose h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--title);
  font-weight: 500; line-height: 1.2; letter-spacing: -2px;
  margin: var(--wp--preset--spacing--m) 0;
}
.gs-prose h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--subhead);
  font-weight: 400; line-height: 1.3; letter-spacing: -1.6px;
  margin-top: var(--wp--preset--spacing--m); margin-bottom: 1.25rem;
}
/* Legal pages (privacy policy / terms & conditions): FK Roman Standard
   headers instead of the site-wide GT America, per request — scoped so
   blog-post .gs-prose headings are untouched. */
.gs-legal-prose h1,
.gs-legal-prose h2,
.gs-legal-prose h3 {
  font-family: var(--wp--preset--font-family--body);
  letter-spacing: 0;
}
.gs-prose p {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5; margin-bottom: var(--wp--preset--spacing--s);
}
.gs-prose figure.wp-block-image { margin: var(--wp--preset--spacing--xl) 0; }
.gs-prose figure.wp-block-image img { width: 100%; height: auto; display: block; }
.gs-prose figcaption,
.gs-prose .wp-element-caption {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-sm);
  line-height: 1.5; margin-top: var(--wp--preset--spacing--xs);
}
.gs-prose blockquote.wp-block-quote {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--subhead);
  line-height: 1.3; letter-spacing: -1.6px;
  margin: 2.25rem 0; padding: 0; border: 0;
}
.gs-prose blockquote.wp-block-quote p { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }

/* Lists + tables (legal-page copy: privacy policy / terms & conditions). */
.gs-prose ul,
.gs-prose ol {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
  margin: 0 0 var(--wp--preset--spacing--s);
  padding-left: 1.25em;
}
.gs-prose li { margin-bottom: var(--wp--preset--spacing--xs); }
.gs-prose li > ul,
.gs-prose li > ol { margin-top: var(--wp--preset--spacing--xs); margin-bottom: 0; }
.gs-prose strong { font-weight: 700; }
.gs-prose a {
  color: var(--wp--preset--color--black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gs-prose a:hover { color: var(--wp--preset--color--neutral-dark); }
.gs-prose .wp-block-table {
  margin: var(--wp--preset--spacing--m) 0;
  overflow-x: auto;
}
.gs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-sm);
  line-height: 1.5;
}
.gs-prose table td {
  border: 1px solid var(--wp--preset--color--neutral-lighter);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
  vertical-align: top;
}
.gs-prose table tr:first-child td {
  font-weight: 500;
  background: var(--wp--preset--color--off-white);
}

/* ── Blog Post Share + Author ────────────────────────────────── */
.gs-post-share {
  width: 100%;
  max-width: 768px;
  align-items: center;
  text-align: center;
}
.gs-post-share__share {
  align-items: center;
}
.gs-share-buttons {
  display: flex;
  gap: var(--wp--preset--spacing--xs);
  justify-content: center;
}
.gs-share-buttons__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 64px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--mustard);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.gs-share-buttons__btn svg {
  width: 24px;
  height: 24px;
}
.gs-share-buttons__btn.is-copied {
  opacity: 0.6;
}
.gs-post-share__author {
  align-items: center;
}
.gs-post-share__avatar img,
.gs-post-share__avatar .avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
}
.gs-post-share__author .wp-block-post-author-name {
  text-align: left;
}
.gs-post-share__bio {
  max-width: 768px;
}

/* Latest Posts (post page) ────────────────────────────────── */
.gs-latest__query .wp-block-post-template {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--l);
}
@media (max-width: 1080px) {
  .gs-latest__query .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gs-latest__query .wp-block-post-template { grid-template-columns: 1fr; }
}

/* ── Blog Post responsive ────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Stacked hero: text on top, then the featured image + herringbone run
     edge-to-edge as a full-bleed separator (homepage hero behaviour). Zero the
     section side padding (inline on the block → !important) so the band bleeds
     to the nav edges; the text column keeps its own gutter. The herringbone
     (.gs-post-hero__image::after, absolute top:100%) now spans the full-width
     image and sits in the section's `band` bottom padding — kept, not hidden. */
  .gs-post-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .gs-post-hero__container { flex-wrap: wrap; gap: var(--wp--preset--spacing--xl); }
  .gs-post-hero__text {
    flex: 1 1 100%;
    max-width: none;
    padding-left: var(--wp--preset--spacing--xxl);
    padding-right: var(--wp--preset--spacing--xxl);
  }
  .gs-post-hero__image { width: 100%; }
  .gs-post-hero::before, .gs-post-hero::after { display: none; } /* drop hairline frame on stack */
  .gs-post-body::before { display: none; } /* left margin collapses — hide the rule */
}
@media (max-width: 600px) {
  /* Section stays full-bleed (padding 0 from above) so the herringbone band keeps
     reaching the edges; tighten only the text gutter. */
  .gs-post-hero__text { padding-left: var(--wp--preset--spacing--m); padding-right: var(--wp--preset--spacing--m); }
  .gs-post-body { padding-left: var(--wp--preset--spacing--m); padding-right: var(--wp--preset--spacing--m); }
  .gs-latest    { padding-left: var(--wp--preset--spacing--m); padding-right: var(--wp--preset--spacing--m); }
  .gs-post-hero__image { aspect-ratio: 4 / 3; }
  .gs-post-hero__image img { height: 100%; }
}

/* ── News Hero (.gs-news-hero) ───────────────────────────────────────── */
/* Reduced from the homepage hero's 914px per stakeholder feedback (Colin
   Brannigan, 2026-07-16): a news-led hub page shouldn't spend as much vertical
   real estate on the header — focus should land on the article grid below.
   The framed right-side inset photo was removed in a follow-up round
   (2026-07-16) — just the bg photo + text now. Height is now driven by
   padding + content rather than centering inside a tall min-height (which
   left too much empty space above the title and between the subhead and the
   IR line, on both desktop and mobile) — min-height is just a floor for
   unusually short content. The IR line is a normal flow child directly under
   __content (not an absolute bottom-corner pin), so the gap above it is a
   fixed, tightened margin instead of "whatever space happened to remain". */
.gs-news-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  padding-top: var(--wp--preset--spacing--xl);
  padding-bottom: var(--wp--preset--spacing--xl);
  /* Full-bleed dark building photo (CSS so it renders in the editor). */
  background: var(--wp--preset--color--dark-navy) url(../images/news-hero-bg.jpg) center / cover no-repeat;
}
/* Left content column. margin-inline:0 overrides the constrained-layout
   auto-centering (WP applies margin:auto to non-aligned children). */
.gs-news-hero__content { max-width: 535px; margin-inline: 0; position: relative; z-index: 1; }
.gs-news-hero__title { font-size: var(--wp--preset--font-size--display); }
/* IR line with diagonal arrow — sits directly below __content. */
.gs-news-hero .gs-news-hero__ir {
  max-width: 535px;
  margin: var(--wp--preset--spacing--l) 0 0 0;
  position: relative;
  z-index: 1;
}
.gs-news-hero .gs-news-hero__ir a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}
.gs-news-hero .gs-news-hero__ir a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  background: url(../images/news-hero-arrow.svg) center / contain no-repeat;
  transform: rotate(-45deg);
}

/* ≤768 / ≤600: tighten both the section's own gutter and its top/bottom
   padding for narrower screens — !important on left/right beats the inline
   xxl padding baked into the saved block markup (top/bottom have no such
   inline conflict). */
@media (max-width: 768px) {
  .gs-news-hero {
    min-height: 0; /* the 320px floor left dead space below content on mobile */
    padding-top: var(--wp--preset--spacing--l);
    padding-bottom: var(--wp--preset--spacing--l);
    padding-left: var(--wp--preset--spacing--l) !important;
    padding-right: var(--wp--preset--spacing--l) !important;
  }
}
@media (max-width: 600px) {
  .gs-news-hero {
    padding-top: var(--wp--preset--spacing--m);
    padding-bottom: var(--wp--preset--spacing--m);
    padding-left: var(--wp--preset--spacing--m) !important;
    padding-right: var(--wp--preset--spacing--m) !important;
  }
}

/* ── Editor-only: lift the post-editor 768px canvas cap for the news hub ──────
   The post (Page) editor caps its canvas at core's default 768px writing width
   (.editor-styles-wrapper .is-root-container { max-width: 768px }). The news hub
   is a full-bleed, template-driven page (post has no content), so that squeezes
   the entire template into 768px and the hero collapses. Lift the cap ONLY for a
   root container that actually holds the hub (:has(.gs-news-hero)) so ordinary
   page editing keeps its 768 writing width — no body class or functions.php
   needed. Applies in both the Site Editor and the Page editor. */
.editor-styles-wrapper .is-root-container:has(.gs-news-hero) {
  max-width: none !important;
}

/* ── Editor-only: pin the desktop news-hero gutter in the Site Editor ────────
   The editor canvas is narrower than the viewport (settings sidebar steals
   ~295px), so it can fire the ≤768/≤600 gutter breakpoints above even on a
   wide monitor. Re-assert the desktop xxl gutter so the canvas always
   previews the same padding the live site shows at that width. */
.editor-styles-wrapper .gs-news-hero {
  padding-left: var(--wp--preset--spacing--xxl) !important;
  padding-right: var(--wp--preset--spacing--xxl) !important;
}

/* ── Careers: Value cards ──────────────────────────────────────────────────── */
.gs-careers-values .gs-careers-values__container { max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; gap: 80px; }
.gs-careers-values .gs-careers-values__rows { display: flex; flex-direction: column; gap: 13px; }
.gs-careers-values .gs-careers-values__row { gap: 12px; margin: 0; } /* override WP columns default gap */
.gs-careers-values .gs-careers-values__row > .wp-block-column { margin: 0; }
.gs-careers-values .gs-value-card { background: var(--wp--preset--color--navy); padding: var(--wp--preset--spacing--xl); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); height: 100%; }
.gs-careers-values .gs-value-card__icon { margin: 0; width: 24px; }
.gs-careers-values .gs-value-card__icon img { width: 24px; height: 24px; display: block; }
.gs-careers-values .gs-value-card h3 { margin: 0; }
.gs-careers-values .gs-value-card p { margin: 0; }

/* ── Careers: Ethos / Our Values ──────────────────────────────────────────── */
/* Sky photo pre-cropped to a sky + dome-top band (1600×580). Its aspect
   (~2.76) is always wider than the section, so cover is height-driven at
   every breakpoint: the full band shows and the dome's top arc barely meets
   the bottom edge (text stays on open sky), matching the design. */
.gs-careers-ethos .wp-block-cover__image-background {
	object-position: center bottom;
}
.gs-careers-ethos .gs-careers-ethos__container { max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; gap: 80px; }
.gs-careers-ethos .gs-ethos__rows { max-width: 900px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; }
/* Design (node 70:1055) top-aligns label/desc, no fixed row height — each
   row sizes to its own content with equal 24px top/bottom padding. */
.gs-careers-ethos .gs-ethos-row { margin: 0; padding-block: var(--wp--preset--spacing--m); border-bottom: 1px solid var(--wp--preset--color--black); flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: var(--wp--preset--spacing--l); }
.gs-careers-ethos .gs-ethos-row:first-child { border-top: 1px solid var(--wp--preset--color--black); }
.gs-careers-ethos .gs-ethos-row__label { margin: 0; flex: 0 0 auto; letter-spacing: -1.2px; }
.gs-careers-ethos .gs-ethos-row__desc { margin: 0; flex: 0 1 523px; letter-spacing: -1px; }

/* ── Careers: Perks ────────────────────────────────────────────────────────── */
/* 50/50 columns: left image bleeds to page edge, right column = heading + 2×3 bordered grid */
.gs-careers-perks { align-items: stretch; gap: var(--wp--preset--spacing--xxl); }
.gs-careers-perks > .wp-block-column:first-child { flex: 1 1 50%; position: relative; overflow: hidden; }
.gs-careers-perks > .wp-block-column:last-child { flex: 1 1 50%; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xxl); }
/* Image is taken out of flow (absolute inset) so its own aspect ratio never drives the
   row's height — only the content column's height does; the image just covers whatever
   height that resolves to. In-flow height:100% would size the row off the image itself,
   ballooning it past the content on wide viewports. */
.gs-careers-perks .gs-careers-perks__image { margin: 0; position: absolute; inset: 0; }
.gs-careers-perks .gs-careers-perks__image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
/* 2-col bordered grid, collapsing 1px lines via container top/left + cell right/bottom */
.gs-careers-perks .gs-perks__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--wp--preset--color--neutral-lighter); border-left: 1px solid var(--wp--preset--color--neutral-lighter); margin: 0; }
.gs-careers-perks .gs-perk-card { border-right: 1px solid var(--wp--preset--color--neutral-lighter); border-bottom: 1px solid var(--wp--preset--color--neutral-lighter); padding: var(--wp--preset--spacing--m); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xl); margin: 0; }
.gs-careers-perks .gs-perk-card__icon { margin: 0; width: 24px; }
.gs-careers-perks .gs-perk-card__icon img { width: 24px; height: 24px; display: block; }
.gs-careers-perks .gs-perk-card__content { gap: var(--wp--preset--spacing--xs); display: flex; flex-direction: column; }
.gs-careers-perks .gs-perk-card p { margin: 0; }

/* ── Open Positions section (.gs-open-positions) ────────────────────────── */
.gs-open-positions { background: var(--wp--preset--color--dark-navy); padding-block: var(--wp--preset--spacing--band); padding-inline: var(--wp--preset--spacing--xxl); }
.gs-open-positions__inner { display: flex; flex-direction: column; gap: 80px; }
.gs-open-positions__heading { margin: 0; color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--headline); font-weight: 500; line-height: 1.2; letter-spacing: -2.7px; }
/* Flex-wrap, not a fixed-column grid: columns hold a natural (non-stretching)
   width and wrap onto new rows only when they run out of horizontal room, so
   wide/full-bleed viewports pack departments onto one line instead of
   stretching 3 fixed columns across the extra space. */
.gs-open-positions__grid { display: flex; flex-wrap: wrap; gap: 80px; }
.gs-open-positions__dept { display: flex; flex-direction: column; gap: 23px; flex: 0 1 360px; }
.gs-open-positions__dept-name { margin: 0; color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--subhead); font-weight: 400; line-height: 1.3; letter-spacing: -1.6px; }
.gs-open-positions__jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gs-open-positions__job { color: var(--wp--preset--color--neutral-lighter); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--text-lg); line-height: 1.4; letter-spacing: -1px; text-decoration: underline; }
.gs-open-positions__job-locations { margin: 2px 0 0; color: var(--wp--preset--color--neutral-light); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--text-xs); line-height: 1.4; }
.gs-open-positions__empty { color: var(--wp--preset--color--neutral-lighter); }

/* ── Careers Job section (.gs-careers-job) ───────────────────────────────── */
.gs-careers-job__bar { align-items: center; }
.gs-careers-job__back { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.gs-careers-job__back a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.gs-careers-job__back a::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(../images/arrow-right.svg) center / contain no-repeat;
	transform: scaleX(-1); /* flips the shared right-arrow asset into a back-arrow */
}
.gs-careers-job__logo { margin: 0; }
/* Loading-state minimum only — Greenhouse's embed sets its own height once it
   mounts; this just keeps the footer from jumping up during the fetch. Not a
   Figma-specified value (the design's grey box was a placeholder label, not
   a literal height spec). */
.gs-job-embed { min-height: 400px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAREERS PAGE — RESPONSIVE STYLES
   All rules are .gs-scoped and wrapped in max-width media queries so the
   1440 desktop layout is never touched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Careers hero ─────────────────────────────────────────────────────── */
/* .gs-hero base already stacks ≤1080 (see homepage hero block above).
   The careers-hero copy must track the nav gutter at every width:
   64px ≥768 (nav logo gutter), 32px ≤767.98 (header drops to `l`). The shared
   .gs-hero mobile rules gutter the copy at `l`(32) ≤1080 and `m`(24) ≤420 — both
   wrong here, so override per range below. The inset stays full-bleed when
   stacked (handled by the ≤1080 rule above; no per-≤420 re-margin). */
/* 768–1080: nav is still at the 64px gutter, so push the (stacked) copy to xxl
   to line up with the nav logo instead of the shared 32px mobile gutter. */
@media (min-width: 768px) and (max-width: 1080px) {
	.gs-careers-hero .wp-block-cover__inner-container > .gs-hero-copy {
		margin-left: var(--wp--preset--spacing--xxl) !important;
		margin-right: auto !important;
	}
}
/* ≤767.98: header gutter is `l`(32); keep the copy at `l` too (overrides the
   shared ≤420 `m` so it still matches the nav on phones). */
@media (max-width: 767.98px) {
	.gs-careers-hero .wp-block-cover__inner-container > .gs-hero-copy {
		margin-left: var(--wp--preset--spacing--l) !important;
		margin-right: var(--wp--preset--spacing--l) !important;
	}
}

/* ── 2. Careers Stats (.gs-careers-stats) ────────────────────────────────── */
/* ≤1024: stack left copy above the stat-stack, each full width. */
@media (max-width: 1024px) {
	.gs-careers-stats .gs-stats__columns {
		flex-wrap: wrap !important;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--xl);
	}
	.gs-careers-stats .gs-stats__col-left {
		max-width: none;
		width: 100%;
	}
	/* Stat-stack fills full width; rows stay number-left. Zero the block-gap so
	   the only spacing is the rows' symmetric padding — that centres each divider
	   between its stats (the gap used to sit above the divider, pushing it low). */
	.gs-careers-stats .gs-stat-stack {
		width: 100%;
		height: auto;
		gap: 0;
	}
	/* Stacked: the desktop flex:1 fill has no text-column height to span, which
	   left the rows/dividers unevenly spaced. Revert to the base even pitch —
	   2.5rem top+bottom (80px between stats, divider centred), first/last trimmed. */
	.gs-careers-stats .gs-stat-stack__row,
	.gs-careers-stats .gs-stat-stack__row:first-child,
	.gs-careers-stats .gs-stat-stack__row:last-child {
		flex: 0 1 auto;
		align-items: center;
		/* Zero the flow-layout block-gap margin (24px) that sat ABOVE each row's
		   border — that was pushing the divider low. With margin gone, the only
		   spacing is the symmetric padding, so the divider centres between stats. */
		margin-top: 0;
		/* Compact stacked rhythm: 1rem top+bottom (= 32px between stats, divider
		   centred) — tighter again now the stats sit in their own full-width row. */
		padding-top: var(--wp--preset--spacing--s);
		padding-bottom: var(--wp--preset--spacing--s);
	}
	.gs-careers-stats .gs-stat-stack__row:first-child {
		padding-top: 0;
	}
	.gs-careers-stats .gs-stat-stack__row:last-child {
		padding-bottom: 0;
	}
}
/* ≤600: tighten section padding. */
@media (max-width: 600px) {
	.gs-careers-stats {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 3. Image Trio (.gs-image-trio) ─────────────────────────────────────── */
/* The 3-up row scales proportionally (aspect-ratio + clamp gap) down to here.
   ≤781: the thirds would get too narrow, so stack to one full-width image per
   row, switched to a 4/3 crop so a single image isn't excessively tall. */
@media (max-width: 781px) {
	.gs-image-trio .gs-image-trio__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--m);
	}
	.gs-image-trio .gs-image-trio__img {
		flex: 0 0 auto;
		width: 100%;
	}
	.gs-image-trio .gs-image-trio__img img {
		aspect-ratio: 4 / 3;
	}
}
/* ≤600: tighten the section gutters on phones. */
@media (max-width: 600px) {
	.gs-image-trio {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 4. Testimonial (.gs-testimonial) ────────────────────────────────────── */
/* ≤768: reduce inline padding to l (32px). */
@media (max-width: 768px) {
	.gs-testimonial {
		padding-left: var(--wp--preset--spacing--l) !important;
		padding-right: var(--wp--preset--spacing--l) !important;
	}
}
/* ≤600: tighter gutters; scale large quote text down so long quotes don't
   overflow narrow screens. */
@media (max-width: 600px) {
	.gs-testimonial {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
	/* Reduce oversized quote paragraphs (display/headline) to a readable size. */
	.gs-testimonial .gs-testimonial__col .wp-block-paragraph {
		font-size: clamp(1.125rem, 4.5vw, 1.5rem);
	}
}

/* ── 5. Careers Values (.gs-careers-values) ─────────────────────────────── */
/* >1440: drop the 1280 cap so the heading lines up with the nav logo and the
   cards fill to the 64px gutters — same wide-screen alignment as the rest of
   the page (no dead band on either side). */
@media (min-width: 1441px) {
	.gs-careers-values .gs-careers-values__container {
		max-width: none;
	}
}
/* ≤1024: force each 2-col and 3-col row to wrap into 2-col.
   WP columns don't auto-stack above 781px, so we override flex-basis. */
@media (max-width: 1024px) {
	.gs-careers-values .gs-careers-values__row.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}
	/* 2-col row: keep 2-col (already fits). 3-col row → 2+1 wrap. */
	.gs-careers-values .gs-careers-values__row > .wp-block-column {
		flex-basis: calc(50% - 6px) !important;
		min-width: calc(50% - 6px) !important;
	}
}
/* ≤600: all cards 1 column, full width. */
@media (max-width: 600px) {
	.gs-careers-values .gs-careers-values__row > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}
	/* Reduce card padding on mobile. */
	.gs-careers-values .gs-value-card {
		padding: var(--wp--preset--spacing--l);
	}
	.gs-careers-values {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 6. Careers Ethos (.gs-careers-ethos) ───────────────────────────────── */
/* Clamp the large display heading (72px) down to fit narrow screens. */
@media (max-width: 899px) {
	.gs-careers-ethos h2 {
		font-size: clamp(2.5rem, 8vw, 4.5rem);
	}
}
/* ≤600: stack ethos rows — label above description, reduced gap. */
@media (max-width: 600px) {
	.gs-careers-ethos .gs-ethos-row {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		gap: var(--wp--preset--spacing--xs);
	}
	.gs-careers-ethos .gs-ethos-row__desc {
		flex: 0 0 auto;
		width: 100%;
	}
	.gs-careers-ethos {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 7. Careers Perks (.gs-careers-perks) ────────────────────────────────── */
/* The block carries is-not-stacked-on-mobile, so WP's native stacking is off.
   ≤1200: stack — image becomes a full-bleed banner above the content. Below
   this width the 50/50 split cramps the 2-col grid (headings wrap 2–3 lines).
   The base section padding is asymmetric (0 left so the image bleeds, xxl
   right); once stacked that would leave the content flush to the page edge,
   so we drop the right pad (image edge-to-edge) and give the content column
   its own symmetric gutters. */
@media (max-width: 1200px) {
	.gs-careers-perks.wp-block-columns {
		flex-wrap: wrap !important;
		padding-right: 0 !important;
	}
	.gs-careers-perks > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	/* Stacked banner needs to be back in normal flow (undo the desktop
	   absolute/inset trick) so it takes its own height instead of a 0-height slot. */
	.gs-careers-perks > .wp-block-column:first-child {
		position: static;
	}
	.gs-careers-perks .gs-careers-perks__image {
		position: static;
		height: auto;
	}
	.gs-careers-perks .gs-careers-perks__image img {
		height: 400px;
		max-height: 52vh;
		min-height: 280px;
	}
	/* Override the column's inline padding-left/right:0 (set for the side-by-side
	   image bleed) so stacked content isn't flush to the page edge. */
	.gs-careers-perks > .wp-block-column:last-child {
		padding-inline: var(--wp--preset--spacing--xxl) !important;
	}
}
/* ≤600: perks grid → 1 column (container top+left + cell right+bottom still
   produces clean single lines); tighten the content gutter to mobile margin. */
@media (max-width: 600px) {
	.gs-careers-perks .gs-perks__grid {
		grid-template-columns: 1fr;
	}
	.gs-careers-perks > .wp-block-column:last-child {
		padding-inline: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 8. Open Positions (.gs-open-positions) ─────────────────────────────── */
/* ≤1024: 3-col → 2-col, reduce the column gap. */
@media (max-width: 1024px) {
	.gs-open-positions__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--xl);
	}
	.gs-open-positions {
		padding-left: var(--wp--preset--spacing--l) !important;
		padding-right: var(--wp--preset--spacing--l) !important;
	}
}
/* ≤600: 1-col, mobile gutter. */
@media (max-width: 600px) {
	.gs-open-positions__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
	}
	.gs-open-positions {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}
}

/* ── 9. Careers Job (.gs-careers-job) ────────────────────────────────────── */
/* Track nav gutter like other section: 64px ≥768, 32px ≤767.98. */
@media (max-width: 767.98px) {
	.gs-careers-job {
		padding-left: var(--wp--preset--spacing--l) !important;
		padding-right: var(--wp--preset--spacing--l) !important;
	}
}

/* ══ Partner Solutions page ═══════════════════════════════════════════════ */

/* ── Partner hero: modifier overrides (.gs-partner-hero) ─────────────────── */
/* Bottom inset bar is mustard (home = carolina, careers = off-white). */
.gs-partner-hero .gs-hero-inset::after {
	background: var(--wp--preset--color--mustard);
}
/* Background photo: crop from the top so the stadium bowl reads like Figma. */
.gs-partner-hero .wp-block-cover__image-background {
	object-position: center top;
}
/* Zero the inner-container's global side padding so the copy's own margin
   lands exactly at the 64px gutter — same fix as .gs-careers-hero. */
.gs-partner-hero .wp-block-cover__inner-container.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}
@media (max-width: 1080px) {
	.gs-partner-hero .gs-hero-inset {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ── Partner features (.gs-partner-features) — Figma "Layout / 356" ──────────
   Five features; each = TWO SIBLING rows inside the one section group:
   an __info header row and a __content row. Sibling structure is what makes
   the sticky header STACK work (Webflow demo): each header pins to a stepped
   top offset and stays pinned until the shared section ends, so headers
   accumulate under each other while content scrolls beneath. */

.gs-partner-features .gs-partner-feature__info {
	position: sticky;
	z-index: 10;
	height: 64px;
	box-sizing: border-box;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

/* Stepped stack offsets. Info rows are children 1,3,5,7,9 of the section
   group (content rows are the even siblings). Keep in sync with the pattern. */
.gs-partner-features > .gs-partner-feature__info:nth-child(1) { top: 0; }
.gs-partner-features > .gs-partner-feature__info:nth-child(3) { top: 64px; }
.gs-partner-features > .gs-partner-feature__info:nth-child(5) { top: 128px; }
.gs-partner-features > .gs-partner-feature__info:nth-child(7) { top: 192px; }
.gs-partner-features > .gs-partner-feature__info:nth-child(9) { top: 256px; }

/* Content row: 48px below its header; 520px visual defines the row height
   (632px feature pitch = 64 info + 48 gap + 520 content). */
.gs-partner-features .gs-partner-feature__content {
	margin-top: var(--wp--preset--spacing--xl);
	min-height: 520px;
}

/* Click-to-scroll (desktop, see assets/js/partner-features.js): clicking a
   stacked header scrolls its content row back into view, landing just below
   the stuck header stack. scroll-margin-top = however many headers (64px
   each) are stuck above/including this row's own header once it's reached —
   mirrors the :nth-child(odd) `top` steps above, one content row later. */
@media (min-width: 768px) {
	.gs-partner-features .gs-partner-feature__info {
		cursor: pointer;
	}
	.gs-partner-features > .gs-partner-feature__content:nth-child(2)  { scroll-margin-top: 64px; }
	.gs-partner-features > .gs-partner-feature__content:nth-child(4)  { scroll-margin-top: 128px; }
	.gs-partner-features > .gs-partner-feature__content:nth-child(6)  { scroll-margin-top: 192px; }
	.gs-partner-features > .gs-partner-feature__content:nth-child(8)  { scroll-margin-top: 256px; }
	.gs-partner-features > .gs-partner-feature__content:nth-child(10) { scroll-margin-top: 320px; }
}

.gs-partner-features .gs-partner-feature__copy {
	max-width: 499px;
}

/* Visual: 520×520 pattern tile with the product shot pinned to its
   bottom-right corner (451×395 at 1440 → percentage so it scales). */
.gs-partner-features .gs-partner-feature__visual {
	position: relative;
	width: 520px;
	max-width: 520px;
	aspect-ratio: 1;
	flex-shrink: 0;
}

.gs-partner-features .gs-partner-feature__visual figure {
	margin: 0;
}

.gs-partner-features .gs-partner-feature__tile {
	position: absolute;
	inset: 0;
}

.gs-partner-features .gs-partner-feature__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Glass frame as real CSS, not baked into each export — all 5 shot PNGs were
   re-cropped to drop their baked-in white frame (see partner-features.php).
   Figma "Frame 369" (783:648) insets the shot image 20px from the frame's
   top+left only, letting it overflow past the frame's own bottom-right — the
   blurred glass strip only ever reads on those two edges. */
.gs-partner-features .gs-partner-feature__shot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 86.7308%; /* 451/520 */
	padding: 20px 0 0 20px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.0002);
	border-width: 1px 0px 0px 1px;
	border-style: solid;
	border-color: #FFFFFF;
	backdrop-filter: blur(40px);
}

.gs-partner-features .gs-partner-feature__shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Partner "Why Grandstand?" (.gs-partner-why) — Figma "Layout / 227" ──── */

/* Figma caps the heading at 600px (the sports-data variant wraps to 2 lines). */
.gs-partner-why h2 {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.gs-partner-why .gs-partner-why__cols {
	gap: var(--wp--preset--spacing--xl);
}

/* ── Partner responsive ─────────────────────────────────────────────────── */

/* ≥1441: extend the section to the nav/hero 64px gutter (design's 80px gutter
   and 1280 island are the 1440 frame; wider screens track the header edge) and
   zoom the content rows proportionally. Everything scales off the same 1440
   ratios (tile 520/1440, copy 499/1440, H2 40/1440, body 16/1440) and caps at
   its 1920 size, so all five features stay identical — resize one, resize all.
   Info header rows are fixed chrome (11px labels, 64px height) matching the
   non-scaling nav, which also keeps the sticky-stack offsets valid. */
@media (min-width: 1441px) {
	.gs-partner-features.gs-partner-features {
		padding-left: var(--wp--preset--spacing--xxl) !important;
		padding-right: var(--wp--preset--spacing--xxl) !important;
	}

	/* Lift the constrained-layout 1280px child cap — rows span gutter to gutter. */
	.gs-partner-features > .gs-partner-feature__info,
	.gs-partner-features > .gs-partner-feature__content {
		max-width: none;
	}

	.gs-partner-features .gs-partner-feature__visual {
		width: min(36.111vw, 693px);
		max-width: min(36.111vw, 693px);
	}

	.gs-partner-features .gs-partner-feature__content {
		min-height: min(36.111vw, 693px);
	}

	.gs-partner-features .gs-partner-feature__copy {
		max-width: min(34.653vw, 665px);
	}

	/* !important: core's .has-title-font-size preset class is itself !important. */
	.gs-partner-features .gs-partner-feature__copy h2 {
		font-size: clamp(2.5rem, 2.7778vw, 3.3334rem) !important;
	}

	.gs-partner-features .gs-partner-feature__copy p {
		font-size: clamp(1rem, 1.1111vw, 1.3334rem);
	}
}


/* ≤1200: copy (499) + visual (520) no longer fit side by side in the shrinking
   container — stack copy above visual. Headers keep stacking. */
@media (max-width: 1199.98px) {
	.gs-partner-features .gs-partner-feature__content {
		flex-wrap: wrap;
		min-height: 0;
		margin-bottom: var(--wp--preset--spacing--xxl);
	}

	.gs-partner-features .gs-partner-feature__copy {
		max-width: 620px;
	}

	.gs-partner-features .gs-partner-feature__visual {
		width: 100%;
	}
}

/* ≤768: site mobile gutter; headers swap instead of stacking (a 5×64px pinned
   stack would eat a phone viewport), so every header pins at top:0 and the next
   one simply replaces it. Type steps down (title 40 → subhead 32; headline →
   title for the Why heading). */
@media (max-width: 767.98px) {
	.gs-partner-features.gs-partner-features {
		padding-left: var(--wp--preset--spacing--l) !important;
		padding-right: var(--wp--preset--spacing--l) !important;
	}

	.gs-partner-features > .gs-partner-feature__info {
		top: 0 !important;
		height: 56px;
	}

	.gs-partner-why.gs-partner-why {
		padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--l) !important;
	}

}

/* ── Editor-only: partner page parity ─────────────────────────────────────
   Lift the post-editor 768px canvas cap when the canvas holds this page
   (same technique as the news hub), and pin the desktop feature layout so the
   ~295px-narrower editor canvas doesn't fire the ≤1200 stack while the front
   end shows the desktop design. Mirrors the base rules above — keep in sync. */
.editor-styles-wrapper .is-root-container:has(.gs-partner-hero) {
	max-width: none !important;
}

.editor-styles-wrapper .gs-partner-features {
	padding-left: 80px !important;
	padding-right: 80px !important;
}

.editor-styles-wrapper .gs-partner-feature__content {
	flex-wrap: nowrap;
	min-height: 520px;
	margin-bottom: 0;
}

.editor-styles-wrapper .gs-partner-feature__copy {
	max-width: 499px;
}


.editor-styles-wrapper .gs-partner-feature__visual {
	width: 520px;
}

.editor-styles-wrapper .gs-partner-feature__info {
	top: 0 !important; /* don't pin while editing — keep headers in flow */
	height: 64px;
	position: static;
}

.editor-styles-wrapper .gs-partner-why {
	padding: 112px 80px !important;
}


/* ══ Partner Solutions — Sports Data page ═════════════════════════════════ */

/* ── SD statement (.gs-sd-statement) — Figma "Header / 1" ─────────────────
   Centred 32px statement over a faint centred G watermark (CSS decoration). */
.gs-sd-statement {
	position: relative;
}

.gs-sd-statement::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 154px;
	height: 182px;
	background: url(../images/partner/sports-data/g-watermark.svg) no-repeat center / contain;
	pointer-events: none;
}

.gs-sd-statement .gs-sd-statement__text {
	max-width: 970px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* ── SD capability bands (.gs-sd-caps) — Figma "Layout / 392" ─────────────
   Centred title, four bordered cards, optional logo strip. Card borders use
   the neutral-lighter token to match the homepage intelligence grid (the
   Figma file's #c7ccd1 is a cool transposition of that same token). */
.gs-sd-caps {
	overflow: hidden; /* logo strip centre-overflows the container by design */
}

.gs-sd-caps .gs-sd-caps__title {
	margin-bottom: var(--wp--preset--spacing--band-md); /* 80px at desktop */
}

.gs-sd-caps .gs-sd-caps__intro {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

/* Card row: same mechanics as the homepage intelligence grid
   (.gs-feature-grid) — CSS grid, 4 equal columns, no gap; outer verticals are
   the row's own L/R borders; internal separators are per-cell inset
   box-shadows (redefined per column count at each breakpoint); the top/bottom
   rules run full-bleed via the ::before/::after pseudos. Border colour is the
   neutral-lighter token, matching intelligence. */
.gs-sd-caps .gs-sd-caps__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	position: relative;
	border-left: 1px solid var(--wp--preset--color--neutral-lighter);
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

.gs-sd-caps .gs-sd-caps__card {
	min-width: 0;
	min-height: 240px;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--m);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
	align-items: flex-start;
}

/* Desktop (4-col, one row): internal verticals = right edge of cells 1–3.
   A real border, not box-shadow — box-shadow insets anti-alias with partial
   opacity at fractional device-pixel ratios (common on real phones), which
   reads as inconsistently faint hairlines; border painting gets pixel-snapped
   to a solid line instead. */
.gs-sd-caps .gs-sd-caps__card:nth-child(-n+3) {
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

/* Full-bleed hairlines extending the row's top/bottom edges to the viewport. */
.gs-sd-caps .gs-sd-caps__row::before,
.gs-sd-caps .gs-sd-caps__row::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: var(--wp--preset--color--neutral-lighter);
	pointer-events: none;
}

.gs-sd-caps .gs-sd-caps__row::before { top: 0; }
.gs-sd-caps .gs-sd-caps__row::after { bottom: 0; }

/* ≥1441px: widen the card row to the 64px gutters, matching the homepage
   intelligence grid (the constrained layout otherwise caps it at 1312), and
   scale the logo cells off their 1440 ratio (259/1440) so the strip keeps its
   edge-bleeding composition instead of floating as a fixed 1549px island. The
   logo art itself stays at its designed size, centred in the growing cells. */
@media (min-width: 1441px) {
	.gs-sd-caps > .gs-sd-caps__row {
		max-width: none;
	}

	/* Doubled class: the base 259px cell rule sits later in source order. */
	.gs-sd-caps .gs-sd-caps__logo.gs-sd-caps__logo {
		flex-basis: 17.986vw;
		width: 17.986vw;
	}
}

.gs-sd-caps .gs-sd-caps__icon {
	margin: 0;
}

/* Kill the default flow blockGap margin inside cards — the 48px flex gap is
   the whole icon→text rhythm (icon 24 + pad 24 + gap 48 = text at y96). */
.gs-sd-caps .gs-sd-caps__card-text {
	margin: 0;
}

.gs-sd-caps .gs-sd-caps__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.gs-sd-caps .gs-sd-caps__logo {
	flex: 0 0 259px;
	width: 259px;
	height: 92px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Logo strips as infinite carousels (.gs-logos-carousel on
   grandstand/awards-carousel; used by sd-optic, sd-roto, aff-who and the
   am/lb/ft logo bands): same 150px band and 259×92 centred cells as the
   static .gs-sd-caps__logos strip this replaces, but the tile set is
   deduplicated — view.js's loop clones provide the repetition the design
   mocked with duplicate images. Full-bleed via the 100vw shift so the strip
   runs edge-to-edge like the design, independent of the 1312 island. */
.gs-sd-caps .gs-logos-carousel.gs-awards-track {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	/* Core constrained layout clamps children to the 1312 content size —
	   without this the "100vw" track is a 1312px window, not full-bleed. */
	max-width: none;
	height: 150px;
	align-items: center;
	gap: 0;
	padding: 0;
	/* Rest/snap gutter: the first logo aligns with the nav logo's 64px
	   gutter (data-rest="start" in view.js reads this value). */
	scroll-padding-left: var(--wp--preset--spacing--xxl);
}

.gs-sd-caps .gs-logos-carousel.gs-awards-track .gs-sd-caps__logo {
	scroll-snap-align: start;
}

/* ── SD screen carousels (.gs-sd-carousel) — Figma "Layout / 109" ──────────
   sd-carousel-optic/roto/advertising-carousel all reuse
   grandstand/awards-carousel (drag/keyboard/touch-snap, plus an opt-in
   infinite loop — see view.js) instead of a static row. Edge-to-edge,
   unlike .gs-awards's left-gutter layout, so the centre tile reads
   full-bleed with its neighbours peeking at the sides per Figma. */
.gs-sd-carousel {
	overflow: hidden;
}

.gs-sd-carousel .gs-awards-track {
	padding-left: 0;
	padding-right: 0;
	scroll-padding-left: 0;
	gap: var(--wp--preset--spacing--band-md); /* 80px at desktop */
}

.gs-sd-carousel .gs-awards-track .wp-block-image {
	flex: 0 0 auto;
	scroll-snap-align: center;
	margin: 0;
	width: 686px;
	height: 396px;
}

.gs-sd-carousel .gs-awards-track .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* One Optic image is a phone-mockup composite, not a top-anchored dashboard
   screenshot — centring reads better than cropping from the top. */
.gs-sd-carousel .gs-awards-track .wp-block-image.gs-sd-carousel__img-center img {
	object-position: center;
}

/* ── SD why (.gs-sd-why modifier on .gs-partner-why) ──────────────────────
   Wider 114px column gap; 14px bodies come from the pattern's text-sm size. */
.gs-sd-why .gs-partner-why__cols {
	gap: 114px;
}

/* ── SD responsive ────────────────────────────────────────────────────────
   The base .gs-hero ≤1080 block already stacks the copy and kills hairlines. */
@media (max-width: 1080px) {
	.gs-sd-statement.gs-sd-statement {
		padding-top: var(--wp--preset--spacing--band) !important;
		padding-bottom: var(--wp--preset--spacing--band) !important;
	}

	.gs-sd-carousel .gs-awards-track {
		gap: var(--wp--preset--spacing--l);
	}

	.gs-sd-carousel .gs-awards-track .wp-block-image {
		width: min(686px, 84vw);
		height: auto;
		aspect-ratio: 686 / 396;
	}

	.gs-sd-why .gs-partner-why__cols {
		gap: var(--wp--preset--spacing--xl);
	}
}

/* ≤1079px: card text and section intro — the fluid clamp() WP writes over the
   inline 1.25rem bottoms out at 14px, too small to read comfortably. Hold them
   at 18px with looser tracking (!important beats the inline style). */
@media (max-width: 1079px) {
	.gs-sd-caps .gs-sd-caps__card-text,
	.gs-sd-caps .gs-sd-caps__intro {
		font-size: 18px !important;
		line-height: 1.5 !important;
		letter-spacing: -0.25px !important;
	}
}

/* Tablet (≤1079px, same breakpoint as intelligence): 2×2 grid. Redefine each
   cell's separators for the wrapped layout (source order beats the desktop
   rule): row 1 draws right+bottom / bottom; row 2 draws right only. */
@media (max-width: 1079px) {
	.gs-sd-caps .gs-sd-caps__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(1) {
		border-right: 1px solid var(--wp--preset--color--neutral-lighter);
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(2) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(3) {
		border-right: 1px solid var(--wp--preset--color--neutral-lighter);
		border-bottom: 0;
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(4) {
		border-right: 0;
		border-bottom: 0;
	}
}

/* Mobile (≤600px): 1 column, horizontal dividers only — no side verticals,
   matching the intelligence grid's mobile treatment. */
@media (max-width: 600px) {
	.gs-sd-caps .gs-sd-caps__row {
		grid-template-columns: 1fr;
		border-left: 0;
		border-right: 0;
	}
	.gs-sd-caps .gs-sd-caps__card {
		min-height: 200px;
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(-n+3) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}
	.gs-sd-caps .gs-sd-caps__card:nth-child(4) {
		border-right: 0;
		border-bottom: 0;
	}

	.gs-sd-caps .gs-sd-caps__logo {
		flex-basis: 50%;
		width: 50%;
	}
}

/* ══ Partner Solutions — Advertising page ═════════════════════════════════
   Hero reuses .gs-partner-hero (own :has() editor-parity rule above).
   Reuses .gs-sd-statement / .gs-sd-caps / .gs-sd-carousel /
   .gs-partner-why+.gs-sd-why / .gs-cta wholesale. Below: only the
   advertising-specific deltas. */

/* ── 3×2 "What you get" grid (.gs-adv-grid on .gs-sd-caps) ────────────────
   Five icon cards in 3 columns / 2 rows; the sixth slot stays empty, so the
   row carries no right border (the design draws no vertical beside the empty
   slot) and every card paints its own right edge. The design's THREE
   full-bleed horizontal hairlines (top / y240 / bottom) come from a single
   multi-layer gradient on ::before spanning the viewport. */
.gs-adv-grid .gs-sd-caps__row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-right: 0;
}

.gs-adv-grid .gs-sd-caps__row::before {
	height: 100%;
	background: none;
	background-image:
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
	background-size: 100% 1px, 100% 1px, 100% 1px;
	background-position: 0 0, 0 240px, 0 100%;
	background-repeat: no-repeat;
}

.gs-adv-grid .gs-sd-caps__row::after {
	content: none;
}

.gs-adv-grid .gs-sd-caps__card:nth-child(-n+5) {
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

/* ── CTA pill with trailing arrow (.gs-cta-pill on is-style-outline-pill) ─ */
.gs-cta .gs-cta-pill .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.gs-cta .gs-cta-pill .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask-image: url("../images/arrow-right.svg");
	mask-image: url("../images/arrow-right.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ── Advertising grid responsive ──────────────────────────────────────────
   ≤1079: 2 columns → rows (1,2)(3,4)(5,·). Middle gradient lines can't track
   the wrapped rows, so drop to top+bottom lines and let per-cell shadows draw
   the internal horizontals (intelligence-grid style). */
@media (max-width: 1079px) {
	.gs-adv-grid .gs-sd-caps__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-adv-grid .gs-sd-caps__row::before {
		background-image:
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
		background-size: 100% 1px, 100% 1px;
		background-position: 0 0, 0 100%;
	}

	.gs-adv-grid .gs-sd-caps__card:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--neutral-lighter);
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-adv-grid .gs-sd-caps__card:nth-child(even) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-adv-grid .gs-sd-caps__card:nth-child(5) {
		border-right: 1px solid var(--wp--preset--color--neutral-lighter);
		border-bottom: 0;
	}
}

/* ≤600: single column, horizontal dividers only (matches the base treatment). */
@media (max-width: 600px) {
	.gs-adv-grid .gs-sd-caps__row {
		grid-template-columns: 1fr;
	}

	.gs-adv-grid .gs-sd-caps__card:nth-child(-n+4) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-adv-grid .gs-sd-caps__card:nth-child(5) {
		border-right: 0;
		border-bottom: 0;
	}
}

/* ══ Shared partner-page deltas ═══════════════════════════════════════════
   Micro-fixes the audience-monetization / entertainment-tickets / fintech pages all
   need on the systems they reuse (.gs-sd-caps / .gs-cta). Each modifier is
   applied in the pattern markup of the pages listed on its rule. */

/* ── 3×2 fully-filled "What you get" grid (.gs-caps-grid-6 on .gs-sd-caps) —
   used by am-what + et-what. Six icon cards in 3 columns / 2 rows; unlike
   .gs-adv-grid every slot is filled, so both outer verticals stay (the row's
   own L/R borders from the base .gs-sd-caps rule) and cards 1,2,4,5 draw the
   internal verticals. The design's THREE full-bleed horizontal hairlines
   (top / y240 / bottom) come from a single multi-layer gradient on ::before
   spanning the viewport (same technique as .gs-adv-grid). */
.gs-caps-grid-6 .gs-sd-caps__row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gs-caps-grid-6 .gs-sd-caps__row::before {
	height: 100%;
	background: none;
	background-image:
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
		linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
	background-size: 100% 1px, 100% 1px, 100% 1px;
	background-position: 0 0, 0 240px, 0 100%;
	background-repeat: no-repeat;
}

.gs-caps-grid-6 .gs-sd-caps__row::after {
	content: none;
}

/* Internal verticals: right edge of every card except the 3rd column
   (the row's own border-right supplies the outer edge). Also covers cards
   4–5, which the base .gs-sd-caps :nth-child(-n+3) rule misses. */
.gs-caps-grid-6 .gs-sd-caps__card {
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

.gs-caps-grid-6 .gs-sd-caps__card:nth-child(3n) {
	border-right: 0;
}

/* ≤1079: 2 columns → rows (1,2)(3,4)(5,6). The y240 gradient line can't
   track the wrapped rows, so drop to top+bottom lines and let per-cell
   borders draw the internal horizontals (matches .gs-adv-grid). */
@media (max-width: 1079px) {
	.gs-caps-grid-6 .gs-sd-caps__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-caps-grid-6 .gs-sd-caps__row::before {
		background-image:
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter)),
			linear-gradient(var(--wp--preset--color--neutral-lighter), var(--wp--preset--color--neutral-lighter));
		background-size: 100% 1px, 100% 1px;
		background-position: 0 0, 0 100%;
	}

	.gs-caps-grid-6 .gs-sd-caps__card:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--neutral-lighter);
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-caps-grid-6 .gs-sd-caps__card:nth-child(even) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-caps-grid-6 .gs-sd-caps__card:nth-child(n+5) {
		border-bottom: 0;
	}
}

/* ≤600: single column, horizontal dividers only (matches the base
   .gs-sd-caps mobile treatment). */
@media (max-width: 600px) {
	.gs-caps-grid-6 .gs-sd-caps__row {
		grid-template-columns: 1fr;
	}

	.gs-caps-grid-6 .gs-sd-caps__card:nth-child(-n+5) {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-caps-grid-6 .gs-sd-caps__card:nth-child(6) {
		border-right: 0;
		border-bottom: 0;
	}
}

/* ── "Who it's for" numeral slot (.gs-caps-who on .gs-sd-caps) — used by
   am-who / et-who / ft-who. Figma gives the 11px "01"–"0n" numeral a 24px
   box (the same slot the icon variant fills), so the card copy lands at y96
   (24 pad + 24 slot + 48 gap); the bare is-style-eyebrow line box is only
   ~13px tall — pin the slot height. */
.gs-caps-who .gs-sd-caps__num {
	height: 24px;
}

/* Dual-enquiry button row (sd-cta): 16px gap between the two pills. Set via
   CSS rather than a wp:buttons blockGap attribute — hand-authoring that
   attribute's exact save() serialization is fragile and fails block
   validation. */
.gs-sd-cta-buttons {
	gap: var(--wp--preset--spacing--s);
}

/* ── CTA vertical centring (.gs-cta--centered on .gs-cta) — used by am-cta +
   et-cta. The homepage newsletter CTA's taller form content fills the card's
   463px min-height; these pages' shorter icon/heading/line/button stack must
   be centred in it (Figma pins the column at top:50%), not top-anchored
   under the band-md padding. Deliberately NOT on the base .gs-cta-card — the
   homepage and advertising CTAs must keep their top-flowed layout. */
.gs-cta--centered .gs-cta-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Office grid (.gs-office-grid) ───────────────────────────────────── */

.gs-office-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--l);
	row-gap: var(--wp--preset--spacing--xl);
}

.gs-office-grid__image {
	aspect-ratio: 405.33 / 405.33;
	overflow: hidden;
}

.gs-office-grid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gs-office-grid__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--wp--preset--spacing--s);
}

.gs-office-grid__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -1.2px;
	margin: 0;
}

@media (max-width: 1080px) {
	.gs-office-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ── Contact photo band (.gs-contact-photo-band) ─────────────────────── */
/* Dark-navy full-bleed band; the 64px page-padding-global on the group (in the
   pattern markup) is the "border" — image sits inset by it on every side,
   original-photo aspect ratio preserved (Figma: 3000×2001) rather than the crop
   the design's placeholder frame implies. */

.gs-contact-photo-band img {
	display: block;
	width: 100%;
	aspect-ratio: 3000 / 2001;
	object-fit: cover;
}

/* ── Contact departments (.gs-contact-departments) ───────────────────── */

.gs-contact-departments__row {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	gap: var(--wp--preset--spacing--xl);
}

.gs-contact-departments__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gs-contact-departments__icon.wp-block-image {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.gs-contact-departments__row {
		flex-direction: column;
	}
}

/* ── Office about/team shell (.gs-office-about) ──────────────────────── */
/* verticalAlignment:"top" + blockGap on the block's own layout attribute
   (set in the pattern markup above) supply the correct align-items/gap
   natively; !important below is a belt-and-suspenders guard against core's
   is-layout-flex container rules winning on load order. */

.gs-office-about {
	align-items: flex-start !important;
}

.gs-office-about__eyebrow {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-top: 0.75rem;
}

.gs-office-about__copy {
	flex: 1 1 auto;
	max-width: 970px;
	margin: 0;
}

@media (max-width: 768px) {
	.gs-office-about {
		flex-direction: column !important;
	}
}

/* ── Office contact details (.gs-office-details) ─────────────────────── */

.gs-office-details {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--xl);
	row-gap: var(--wp--preset--spacing--xxl);
}

.gs-office-details.gs-office-details--count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gs-office-details__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.66px;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.gs-office-details__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -1.2px;
	margin: 0;
}

@media (max-width: 1080px) {
	.gs-office-details,
	.gs-office-details.gs-office-details--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.gs-office-details,
	.gs-office-details.gs-office-details--count-3 {
		grid-template-columns: 1fr;
	}
}

/* ── Office Find Us (.gs-office-find-us) ─────────────────────────────── */

.gs-office-find-us__map {
	aspect-ratio: 1304 / 625;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--xxl);
	overflow: hidden;
}

.gs-office-find-us__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.gs-office-find-us__row {
	gap: var(--wp--preset--spacing--xl);
}

.gs-office-find-us__col-label {
	margin-bottom: var(--wp--preset--spacing--m);
	display: block;
}

.gs-office-find-us__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Row hairlines: border (not box-shadow) on real content, so nothing seams or
   washes out at fractional device pixel ratios (2.625x/3.5x) — see the
   hairline-rendering-fractional-dpr gotcha. Adjacent items share one border
   via negative margin, matching the Figma "mb-[-1px]" stacking. */
.gs-office-find-us__list li {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.4;
	letter-spacing: -1px;
	padding: var(--wp--preset--spacing--s) 0;
	border-top: 1px solid var(--wp--preset--color--neutral);
	border-bottom: 1px solid var(--wp--preset--color--neutral);
	margin-bottom: -1px;
}

@media (max-width: 1080px) {
	.gs-office-find-us__row {
		flex-direction: column;
	}
}

/* ── Office directory tabs (.gs-office-tabs) ─────────────────────────── */

/* Decorative grid (Figma: two full-height verticals at the 64px gutters, two
   full-width horizontals bracketing the tabs/image/detail row) — same
   language as the hero's grid, just light-on-off-white instead of
   white-on-navy. Verticals pinned to the section itself (already edge-to-edge
   via layout:"default" + direct padding, so a 64px inset lines up with every
   other left-rail element on the page); horizontals are separate full-bleed
   elements placed directly before/after the grid in markup so they land at
   its top/bottom edge without needing to know the heading's height. */
.gs-office-tabs-section {
	position: relative;
}

.gs-office-tabs-section::before,
.gs-office-tabs-section::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--wp--preset--color--neutral-lighter);
}

.gs-office-tabs-section::before {
	left: var(--wp--preset--spacing--xxl);
}

.gs-office-tabs-section::after {
	right: var(--wp--preset--spacing--xxl);
}

/* Bleeds to the section's own edge via the "alignfull" class in the markup
   (core's own has-global-padding bleed mechanism — same negative-margin trick
   every other full-bleed-inside-constrained element on the site already
   relies on), not a manual width/margin calc or a 100vw viewport trick (the
   latter overflows by the scrollbar's width and forces horizontal scroll). */
.gs-office-tabs__hairline {
	height: 1px;
	background: var(--wp--preset--color--neutral-lighter);
}

@media (max-width: 1080px) {
	.gs-office-tabs-section::before,
	.gs-office-tabs-section::after,
	.gs-office-tabs__hairline {
		display: none;
	}
}

.gs-office-tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
}

.gs-office-tabs__list {
	display: flex;
	flex-direction: column;
}

.gs-office-tabs__tab {
	appearance: none;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -1px;
	color: var(--wp--preset--color--neutral);
	padding: var(--wp--preset--spacing--xs) 0;
}

.gs-office-tabs__tab.is-active {
	color: var(--wp--preset--color--black);
}

.gs-office-tabs__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.gs-office-tabs__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gs-office-tabs__detail {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.gs-office-tabs__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -2px;
	margin: 0;
}

.gs-office-tabs__address {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.4;
	letter-spacing: -1px;
	margin: 0;
}

@media (max-width: 1080px) {
	.gs-office-tabs {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ Accordion (.gs-faq-accordion) ───────────────────────────────── */

.gs-faq-accordion {
	/* 768px matches Figma exactly up to ~1440; beyond that a fixed 768 column
	   reads as lost in a sea of side-margin on very wide screens, so let it
	   grow moderately (viewport-relative, capped) rather than stay pinned. */
	max-width: clamp(768px, 55vw, 960px);
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

.gs-faq-accordion__item {
	border-top: 1px solid var(--wp--preset--color--neutral-light);
	padding: var(--wp--preset--spacing--m) 0;
}

.gs-faq-accordion__question {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	letter-spacing: -1.2px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gs-faq-accordion__question::-webkit-details-marker {
	display: none;
}

.gs-faq-accordion__question::after {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: url("../images/faq-chevron.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.gs-faq-accordion__item[open] .gs-faq-accordion__question::after {
	transform: rotate(45deg);
}

.gs-faq-accordion__answer p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	margin: var(--wp--preset--spacing--s) 0 0;
}

/* ===== audience-monetization page ===== */
/* Reuses .gs-partner-hero / .gs-sd-statement / .gs-sd-caps (+.gs-adv-grid on
   am-who) / .gs-sd-carousel / .gs-cta wholesale. The page's deltas turned out
   to be shared with the entertainment-tickets/fintech pages and live in the "Shared
   partner-page deltas" block above: .gs-caps-grid-6 (am-what), .gs-caps-who
   (am-who), .gs-cta--centered (am-cta). No AM-specific CSS remains. */
/* ===== end audience-monetization ===== */


/* ===== entertainment-tickets page ===== */
/* Partner Solutions — Entertainment and Tickets. Hero reuses .gs-partner-hero;
   .gs-sd-statement / .gs-sd-caps / .gs-sd-carousel / .gs-partner-why+.gs-sd-why
   / .gs-cta are reused wholesale, and the deltas shared with the
   audience-monetization/fintech pages live in the "Shared partner-page
   deltas" block above (.gs-caps-grid-6 on et-what, .gs-caps-who on et-who,
   .gs-cta--centered on et-cta). Below: only the entertainment-tickets deltas. */

/* ── Statement wrap parity (.gs-et-statement on .gs-sd-statement) ─────────
   The GT America webfont rasterizes a hair narrower than Figma's, letting
   "entertainment" jump up a line at the base 970px measure — 960px
   reproduces the design's line breaks without touching any other line. */
.gs-et-statement .gs-sd-statement__text {
	max-width: 960px;
}

/* ── Why band gutters (.gs-et-why on .gs-partner-why.gs-sd-why) ───────────
   This page's Figma "Layout / 227 /" sits on the 64px page gutters (1312px
   content), not the hub/sports-data pages' 80px — the pattern carries the
   xxl padding, and the editor-parity rule below out-cascades the shared
   .editor-styles-wrapper .gs-partner-why { padding: 112px 80px } rule
   (same specificity, later in source). */
.editor-styles-wrapper .gs-et-why {
	padding: 112px var(--wp--preset--spacing--xxl) !important;
}

/* ===== end entertainment-tickets ===== */


/* ═════ Partner Solutions — Fintech page ═════════════════════════════════ */
/* The page is assembled almost entirely from existing systems
   (.gs-partner-hero, .gs-sd-statement, .gs-sd-caps, .gs-sd-carousel,
   .gs-partner-why/.gs-sd-why, .gs-cta) plus the shared .gs-caps-who numeral
   slot (see "Shared partner-page deltas") — only the fintech-scoped deltas
   below. */

/* Statement: Chrome shapes GT America ~3% narrower than Figma's renderer, so
   the 970px box fits one extra word per line and every wrap point drifts.
   940px reproduces the design's exact five-line ragging (longest design line
   is 924px in browser metrics; the first stray word lands at 956px). */
.gs-ft-statement .gs-sd-statement__text {
	max-width: 940px;
}

/* The fintech "Layout / 109" bands are exactly 64 + 396 + 64 = 524px tall in
   the design; drop the track's base 2px scrollbar-clearance padding so the
   band bottoms out on the tile edge (scrollbar is display:none anyway). */
.gs-ft-carousel .gs-awards-track {
	padding-bottom: 0;
}
/* CTA: the Figma column is vertically centred in the 463px card (top at
   y=182), but .gs-cta-card flows content from its 80px top padding (icon at
   y=153 — the homepage newsletter card's taller content masks this). Nudge
   this page's column down to the design position. Deliberately NOT the
   shared .gs-cta--centered flex-centring: a fixed 29px offset only equals
   true centring at the 1440 content height, so swapping mechanisms would
   move this card at other viewports. */
.gs-ft-cta .gs-cta-card > .wp-block-group {
	margin-top: 29px;
}

/* ═════ end fintech ══════════════════════════════════════════════════════ */


/* ===== consumer-brands page ===== */

/* ── CB hero (.gs-cb-hero modifier on .gs-hero) ────────────────────────────
   The base .gs-hero composition (hairlines, inset column, herringbone strip,
   carolina bar) matches the Consumer Brands Figma frame 1:1 — the only
   modifier needed is the mobile legibility gradient: the base ≤1080 rule
   repaints the overlay 0.85→0.4 navy, but this hero's background export
   already has the navy multiply baked in, so keep the overlay transparent
   or the photo goes near-black. */
@media (max-width: 1080px) {
	.gs-cb-hero .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(180deg, rgba(8, 25, 46, 0.35) 0%, rgba(8, 25, 46, 0) 60%) !important;
	}
}

/* Hairline registration: this Figma frame draws its grid lines one pixel
   left/up of the homepage geometry (verticals at x840/x1244, horizontals at
   y149/y762 — the left vertical is fully visible at the inset's left edge,
   not under it). Same composition, nudged -1px. ≤1440 positions here; the
   ≥1441 block below mirrors the base right-gutter anchoring with the same
   -1px shift (must stay after this rule AND after the base ≥1441 rule). */
.gs-cb-hero.gs-cb-hero::before {
	background-position: 0 149px, 0 762px;
}

@media (max-width: 1440px) {
	.gs-cb-hero.gs-cb-hero::after {
		background-position: calc(50% + 120px) 0, calc(50% + 524px) 0;
	}
}

@media (min-width: 1441px) {
	.gs-cb-hero.gs-cb-hero::after {
		background-position: calc(100% - 600px) 0, calc(100% - 196px) 0;
	}
}

/* ── CB statement (.gs-cb-statement) — Figma "Header / 1" ─────────────────
   Left-aligned 951px measure at the 64px gutter (unlike the centred
   .gs-sd-statement); band token = 112px vertical pads at desktop. */
.gs-cb-statement .gs-cb-statement__text {
	max-width: 951px;
	margin: 0;
}

@media (max-width: 1080px) {
	.gs-cb-statement .gs-cb-statement__text {
		font-size: 24px !important;
		line-height: 1.4 !important;
		letter-spacing: -0.5px !important;
	}
}

/* ── CB brand grid (.gs-cb-grid) — Figma "Layout / 392" ───────────────────
   Same mechanics as .gs-sd-caps: each __row is a 3-col CSS grid with no gap;
   outer verticals are the row's own L/R borders, internal separators are the
   first two cards' real right borders (never inset box-shadow — seams at
   fractional DPR), and the row boundaries run full-bleed via 100vw ::before
   extenders (::after closes the last row). Border colour is the
   neutral-lighter token (the Figma #c7ccd1 is its cool transposition,
   matching the sd-caps / intelligence grids). */
.gs-cb-grid {
	overflow: hidden; /* 100vw extenders would otherwise widen the page */
}

.gs-cb-grid .gs-cb-grid__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	position: relative;
	border-left: 1px solid var(--wp--preset--color--neutral-lighter);
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

/* Full-bleed hairlines on every row boundary: each row's top edge, plus the
   last row's bottom edge. */
.gs-cb-grid .gs-cb-grid__row::before,
.gs-cb-grid .gs-cb-grid__row:last-child::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: var(--wp--preset--color--neutral-lighter);
	pointer-events: none;
}

.gs-cb-grid .gs-cb-grid__row::before { top: 0; }
.gs-cb-grid .gs-cb-grid__row:last-child::after { bottom: 0; }

/* Card: fixed 368px design cell; flex column so the Visit Site row pins to
   the bottom edge (margin-top:auto) at every blurb length. */
.gs-cb-grid .gs-cb-grid__card {
	min-width: 0;
	min-height: 368px;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--m);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Internal vertical separators: right edge of cards 1–2. */
.gs-cb-grid .gs-cb-grid__card:nth-child(-n+2) {
	border-right: 1px solid var(--wp--preset--color--neutral-lighter);
}

/* Kill the flow blockGap margins — the card rhythm is set explicitly:
   logo box 56px + 48 gap, eyebrow + 8, blurb, button pinned to bottom. */
.gs-cb-grid .gs-cb-grid__card > * {
	margin: 0;
}

.gs-cb-grid .gs-cb-grid__logo {
	height: 56px;
	margin-bottom: var(--wp--preset--spacing--xl);
	display: flex;
	align-items: flex-start;
}

.gs-cb-grid .gs-cb-grid__logo img {
	display: block;
	width: auto;
}

/* Each logo at its exact Figma art size (exports are 3x). */
.gs-cb-grid .gs-cb-grid__logo--gambling img    { height: 45px; }
.gs-cb-grid .gs-cb-grid__logo--casinos img     { height: 23px; }
.gs-cb-grid .gs-cb-grid__logo--rotowire img    { height: 24px; }
.gs-cb-grid .gs-cb-grid__logo--oddsjam img     { height: 25px; }
.gs-cb-grid .gs-cb-grid__logo--opticodds img   { height: 27px; }
.gs-cb-grid .gs-cb-grid__logo--whichbingo img  { height: 30px; }
.gs-cb-grid .gs-cb-grid__logo--freebets img    { height: 34px; }
.gs-cb-grid .gs-cb-grid__logo--bonusfinder img { height: 32px; }
.gs-cb-grid .gs-cb-grid__logo--spotlight img   { height: 32px; }

.gs-cb-grid .gs-cb-grid__eyebrow {
	margin-bottom: var(--wp--preset--spacing--xs);
}

/* Visit Site: black label + 24px carolina arrow (same arrow_forward mask as
   the hero CTA), pinned to the cell bottom. */
.gs-cb-grid .gs-cb-grid__link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--m);
}

.gs-cb-grid .gs-cb-grid__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.gs-cb-grid .gs-cb-grid__link a::after {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--carolina);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gs-cb-grid .gs-cb-grid__link a:hover {
	text-decoration: underline;
}

/* ≥1441px: widen the rows to the 64px gutters (constrained layout otherwise
   caps them at 1312) — same treatment as .gs-sd-caps. */
@media (min-width: 1441px) {
	.gs-cb-grid > .gs-cb-grid__row {
		max-width: none;
	}
}

/* ≤1079px: single column (a 2-col intermediate reads ragged with three
   3-card row groups — every row would wrap 2+1). Horizontal dividers only,
   like the sd-caps mobile treatment; blurbs hold 18px against WP's fluid
   clamp (matches .gs-sd-caps__card-text). */
@media (max-width: 1079px) {
	.gs-cb-grid .gs-cb-grid__row {
		grid-template-columns: 1fr;
		border-left: 0;
		border-right: 0;
	}

	.gs-cb-grid .gs-cb-grid__card {
		min-height: 0;
	}

	.gs-cb-grid .gs-cb-grid__card:nth-child(-n+2) {
		border-right: 0;
	}

	.gs-cb-grid .gs-cb-grid__card:not(:last-child) {
		border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
	}

	.gs-cb-grid .gs-cb-grid__text {
		font-size: 18px !important;
		line-height: 1.5 !important;
		letter-spacing: -0.25px !important;
	}
}

/* ===== end consumer-brands ===== */


/* ===== about page ===== */

/* ── About hero: modifier overrides (.gs-about-hero) ───────────────────────
   Reuses the full .gs-hero composition; the About design's inset accent bar
   is mustard (homepage: carolina). The backdrop/inset photos ship with their
   Figma color treatments (navy multiply / carolina tint) baked in. */
.gs-about-hero .gs-hero-inset::after {
	background: var(--wp--preset--color--mustard);
}

/* ── About intro (.gs-about-intro) — Figma "Header / 1 /" ──────────────────
   Left 516px statement column; right 530px pair of FK Roman serif columns
   (233px each, 64px gap), space-between across the 1312 island. */
.gs-about-intro .gs-about-intro__row {
	width: 100%;
}

.gs-about-intro .gs-about-intro__main {
	max-width: 516px;
}

.gs-about-intro .gs-about-intro__cols {
	width: 530px;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--xxl);
}

.gs-about-intro .gs-about-intro__cols p {
	flex: 1 1 0;
	min-width: 0;
}

/* ── About office (.gs-about-office) — top of Figma "Layout / 109 /" ───────
   Single office photo on the 1312 island; fixed design aspect so the crop is
   deterministic at every width. */
.gs-about-office .gs-about-office__img {
	margin: 0;
}

.gs-about-office .gs-about-office__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1312 / 756.45;
	object-fit: cover;
}

/* ── About people (.gs-about-people) — bottom of Figma "Layout / 109 /" ──── */
.gs-about-people .gs-about-people__row {
	width: 100%;
}

.gs-about-people .gs-about-people__title {
	flex: 0 1 auto;
}

.gs-about-people .gs-about-people__col {
	width: 536px;
	flex-shrink: 0;
}

/* ── About leadership ribbon (.gs-about-leadership) ────────────────────────
   Heading is a link (no underline, inherits black) with a 48px white
   arrow_forward drawn from the shared arrow-right.svg mask. */
.gs-about-leadership .gs-about-leadership__row {
	width: 100%;
}

.gs-about-leadership .gs-about-leadership__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--l);
	color: inherit;
	text-decoration: none;
}

.gs-about-leadership .gs-about-leadership__link a::after {
	content: "";
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: url("../images/arrow-right.svg") no-repeat center / contain;
	        mask: url("../images/arrow-right.svg") no-repeat center / contain;
}

.gs-about-leadership .gs-about-leadership__link a:hover {
	opacity: 0.8;
}

/* Figma avatar gap is 34px (not a spacing token). */
.gs-about-leadership .gs-about-leadership__avatars {
	gap: 34px;
}

.gs-about-leadership .gs-about-leadership__avatar {
	margin: 0;
}

.gs-about-leadership .gs-about-leadership__avatar img {
	display: block;
	border-radius: 50%;
}

/* ── About timeline (.gs-about-timeline) — Figma "Timeline / 21 /" ─────────
   Horizontal axis geometry (1440 frame): five equal columns after a 40px
   leading offset (32px spacer + 8px gap), 8px column gap. Each entry is two
   fixed 180px slots (media / body) around a 15.556px progress row: the
   carolina diamond is an 11px square rotated 45° (bounding box 15.556,
   centred at x15.56 / y203.78 within the entry) and the divider is a real
   1px white/40 element running to the entry's right edge. Diamond + divider
   are ::before/::after on the entry so no decorative markup is needed. */
/* Constrained layout centres children with !important auto margins — pin the
   698px sub-line to the LEFT EDGE OF THE 1280 ISLAND (not the 64px padding
   edge, which sits 16px further out at 1440): island offset = half the
   difference between the padding box and the 1280 contentSize, floored at 0
   below 1408px content width. */
.gs-about-timeline .gs-about-timeline__sub {
	max-width: 698px;
	margin-left: max(0px, calc((100% - 1280px) / 2)) !important;
	margin-right: auto !important;
}

.gs-about-timeline .gs-about-timeline__track {
	padding-left: 40px;
}

.gs-about-timeline .gs-about-timeline__entry {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.gs-about-timeline .gs-about-timeline__entry::before {
	content: "";
	position: absolute;
	top: 198.28px;
	left: 2.28px;
	width: 11px;
	height: 11px;
	background: var(--wp--preset--color--carolina);
	transform: rotate(45deg);
}

.gs-about-timeline .gs-about-timeline__entry::after {
	content: "";
	position: absolute;
	top: 203.28px;
	left: 23.56px;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
}

/* Slots: fixed 180px rows; whichever slot comes second clears the axis row
   (16px gap + 15.556px progress row + 16px gap = 47.56px). */
.gs-about-timeline .gs-about-timeline__media,
.gs-about-timeline .gs-about-timeline__body {
	height: 180px;
}

.gs-about-timeline .gs-about-timeline__entry > * + * {
	margin-top: 47.56px;
}

.gs-about-timeline .gs-about-timeline__media {
	display: flex;
}

.gs-about-timeline .gs-about-timeline__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* The body is a flex column, so the flow block-gap margin no longer collapses
   with the year's own 8px margin — zero it (the 8px inline margin is the gap). */
.gs-about-timeline .gs-about-timeline__body > * + * {
	margin-block-start: 0;
}

/* Flip entries (2011 / 2022): copy sits above the axis, bottom-aligned. */
.gs-about-timeline .gs-about-timeline__entry--flip .gs-about-timeline__body {
	justify-content: flex-end;
}

/* Per-entry media composition (from the Figma frame):
   2006 photo bottom-left; 2011 logo top-centre (nudged 2.5px up to the
   design's y225); 2018 statue dead-centre; 2022 logo top-centre;
   2025 logo bottom-centre, flush with the axis gap. */
.gs-about-timeline .gs-about-timeline__entry--y2006 .gs-about-timeline__media {
	align-items: flex-end;
	justify-content: flex-start;
}

.gs-about-timeline .gs-about-timeline__entry--y2011 .gs-about-timeline__media {
	align-items: flex-start;
	justify-content: center;
	margin-top: 45px;
}

.gs-about-timeline .gs-about-timeline__entry--y2018 .gs-about-timeline__media {
	align-items: center;
	justify-content: center;
}

.gs-about-timeline .gs-about-timeline__entry--y2022 .gs-about-timeline__media {
	align-items: flex-start;
	justify-content: center;
}

.gs-about-timeline .gs-about-timeline__entry--y2025 .gs-about-timeline__media {
	align-items: flex-end;
	justify-content: center;
}

/* Figma places the OddsJam lockup 11.8px right of the column centre
   (optical centring of the glyph mark). */
.gs-about-timeline .gs-about-timeline__entry--y2025 .gs-about-timeline__img {
	transform: translateX(11.8px);
}

.gs-about-timeline .gs-about-timeline__img {
	margin: 0;
}

.gs-about-timeline .gs-about-timeline__img img {
	display: block;
}

/* Inline link in the 2011 copy: white + underline (theme default is carolina). */
.gs-about-timeline .gs-about-timeline__body a {
	color: inherit;
	text-decoration: underline;
}

/* ── About crosslinks (.gs-about-crosslinks) ───────────────────────────────
   Two equal columns, 80px gap (Figma's gap-80 = band-md at 1440). */
.gs-about-crosslinks .gs-about-crosslinks__row {
	width: 100%;
	gap: var(--wp--preset--spacing--band-md);
}

.gs-about-crosslinks .gs-about-crosslinks__col {
	flex: 1 1 0;
	min-width: 0;
}

/* ── About ≥1441px: widen the content islands to the 64px gutters (matches
   .gs-sd-caps / intelligence-grid behaviour; the hero already tracks the
   gutters via the shared .gs-hero rules). */
@media (min-width: 1441px) {
	.gs-about-intro > .gs-about-intro__row,
	.gs-about-office > .gs-about-office__img,
	.gs-about-people > .gs-about-people__row,
	.gs-about-leadership > .gs-about-leadership__row,
	.gs-about-timeline > .gs-about-timeline__track,
	.gs-about-crosslinks > .gs-about-crosslinks__row {
		max-width: none;
	}

	/* Keep the timeline heading + sub-line on the same left edge as the
	   now-gutter-to-gutter track (they'd otherwise stay centred on the 1280
	   island; constrained margins are !important). */
	.gs-about-timeline > h2,
	.gs-about-timeline > .gs-about-timeline__sub {
		margin-left: 0 !important;
	}

	/* Intro/people columns scale off their 1440 ratios (516/530/536 ÷ 1440)
	   so the space-between middle gap stays proportional to the design
	   instead of absorbing all the extra width; outer edges stay pinned to
	   the 64px gutters. */
	.gs-about-intro .gs-about-intro__main {
		max-width: 35.833vw;
	}

	.gs-about-intro .gs-about-intro__cols {
		width: 36.806vw;
	}

	.gs-about-people .gs-about-people__col {
		width: 37.222vw;
	}
}

/* ── About responsive (≤1080 stacks the editorial bands; ≤900 stacks the
   timeline down a left vertical axis via grid placement, which works for
   both the normal and flip DOM orders). */
@media (max-width: 1080px) {
	.gs-about-intro .gs-about-intro__row,
	.gs-about-people .gs-about-people__row {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xl);
	}

	.gs-about-intro .gs-about-intro__main,
	.gs-about-intro .gs-about-intro__cols,
	.gs-about-people .gs-about-people__col {
		width: 100%;
		max-width: none;
		flex: 1 1 100%;
	}

	/* The two serif columns get too narrow side-by-side on phones — stack. */
	.gs-about-intro .gs-about-intro__cols {
		flex-direction: column;
		gap: var(--wp--preset--spacing--m);
	}

	.gs-about-intro .gs-about-intro__cols p {
		flex: 0 0 auto;
		width: 100%;
	}

	/* 20px GT bodies: WP's fluid clamp() bottoms out too small — hold at 18px
	   (matches the .gs-sd-caps mobile treatment; !important beats the inline
	   style the fluid engine rewrites). */
	.gs-about-intro .gs-about-intro__main p,
	.gs-about-people .gs-about-people__col > p:first-child,
	.gs-about-crosslinks .gs-about-crosslinks__col p {
		font-size: 18px !important;
		line-height: 1.5 !important;
		letter-spacing: -0.25px !important;
	}

	.gs-about-leadership .gs-about-leadership__row {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--m);
	}

	.gs-about-leadership .gs-about-leadership__link a::after {
		width: 32px;
		height: 32px;
	}

	.gs-about-crosslinks .gs-about-crosslinks__row {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xl);
	}

	.gs-about-crosslinks .gs-about-crosslinks__col {
		flex: 1 1 100%;
	}
}

@media (max-width: 900px) {
	.gs-about-timeline .gs-about-timeline__track {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--xl);
		padding-left: 0;
	}

	/* Entry becomes a 32px axis rail + content grid; explicit grid-row
	   placement restores year/copy-then-image order for flip entries too. */
	.gs-about-timeline .gs-about-timeline__entry {
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--xs);
	}

	.gs-about-timeline .gs-about-timeline__body {
		grid-column: 2;
		grid-row: 1;
		height: auto;
		margin: 0;
		justify-content: flex-start;
	}

	.gs-about-timeline .gs-about-timeline__media {
		grid-column: 2;
		grid-row: 2;
		height: auto;
		min-height: 0;
		margin: var(--wp--preset--spacing--s) 0 0;
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* Empty media rows (logos smaller than the desktop 180px slot) collapse. */
	.gs-about-timeline .gs-about-timeline__entry--flip .gs-about-timeline__media,
	.gs-about-timeline .gs-about-timeline__entry--y2011 .gs-about-timeline__media {
		margin-top: var(--wp--preset--spacing--s);
	}

	/* Vertical axis: diamond at the top of each entry, rail running down
	   through the gap to the next entry; the last entry's rail stops at its
	   own bottom edge. */
	.gs-about-timeline .gs-about-timeline__entry::before {
		top: 6px;
		left: 10px;
	}

	.gs-about-timeline .gs-about-timeline__entry::after {
		top: 28px;
		bottom: calc(-1 * var(--wp--preset--spacing--xl));
		left: 15px;
		right: auto;
		width: 1px;
		height: auto;
	}

	.gs-about-timeline .gs-about-timeline__entry:last-child::after {
		bottom: 0;
	}
}
/* ===== end about ===== */