/**
 * G. Batista — main stylesheet: fonts, tokens, header, footer, and components
 * shared by 3+ contexts (buttons, CTA panels, page-hero, section utilities).
 * Per-block styles live in blocks/<name>/style.css; single-template-only
 * styles live in assets/css/single-<template>.css (single-project.css,
 * single-service.css) — both load only on pages using them. See
 * PAGE-BUILD-CONTEXT.md for the split convention.
 * Palette mirrors theme.json so PHP templates and blocks share the same tokens.
 *
 * Specificity convention: avoid `!important` for ordinary style overrides —
 * past specificity collisions here (blog prose selectors clobbering nested
 * block typography, a shared `a` rule overriding button/contact-card colors)
 * were fixed by scoping the broader selector to direct children
 * (`.gb-blog-content > p` instead of `.gb-blog-content p`) or adding a
 * `:not(...)` exclusion, not by escalating specificity. The one deliberate
 * exception is the Section Settings utility block below (`.gb-sect--*`),
 * which needs to beat any block's own stylesheet by design — see the comment
 * there before adding another `!important` anywhere else in this file.
 */

/* Fonts (self-hosted variable Open Sans, latin subset) ---------------------- */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display headings: Cinzel (SIL Open Font License, free for commercial web
   use). Chosen per client direction as the free stand-in for the design's
   Felix Titling — a classical inscribed Roman capital face with the same
   feel. The paid Felix Titling/Eras Demi desktop fonts were removed. */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin.woff2") format("woff2");
}

/* Italic accent words inside headings (design: Playfair Display Italic). */
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/playfair-italic-latin.woff2") format("woff2");
}

/* Sub-headings / footer column titles / CTA panels: Poppins SemiBold (SIL
   Open Font License, free for commercial web use). Chosen per client
   direction as the free stand-in for the design's Eras Demi ITC — a common
   humanist geometric sans used widely on the web. */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600-latin.woff2") format("woff2");
}

/* Hero slide headings (design: Manrope Bold). */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
}

:root {
	--gb-navy: #10233F;
	--gb-gold: #F2C540;
	--gb-white: #FFFFFF;
	--gb-dark: #0A0F1A;
	--gb-gray: #A9A9A9;
	--gb-light: #F3F4F6;

	--gb-gold-bright: #FFC845;
	--gb-indigo: #201E60;
	--gb-band: #1C2163; /* big indigo band behind services/work/table/CTA (from design) */

	--gb-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gb-font-display: "Cinzel", Georgia, "Times New Roman", serif;
	--gb-font-accent: "Playfair Display", Georgia, serif;
	--gb-font-subheading: "Poppins", var(--gb-font-body);
	--gb-font-hero: "Manrope", var(--gb-font-body);

	/* Display heading scale. The design sets every section heading to 50px/68px
	   (Felix Titling Regular; we render its free stand-in Cinzel). 3.472vw resolves
	   to 50.0px at the design's 1440px frame and caps there on wider viewports. */
	--gb-display-lg: clamp(2rem, 3.472vw, 3.125rem);
	--gb-display-lg-lh: 1.36; /* 68 / 50 */

	--gb-content: 1264px;
	--gb-wide: 1440px;
}

/* Display headings — one shared rule so every section heading uses the
   display face (Cinzel; regular weight, natural titling caps). */
.gb-page-hero__heading,
.gb-about__heading,
.gb-services__heading,
.gb-statement__heading,
.gb-founder__statement,
.gb-founder__video-heading,
.gb-projects__heading,
.gb-projects__table-heading,
.gb-khub__heading,
.gb-services-list__title,
.gb-service-download__heading,
.gb-service-process__heading,
.gb-service-faq__heading,
.gb-service-related__heading,
.gb-fprofile__name,
.gb-books__heading,
.gb-news__heading,
.gb-team__heading {
	font-family: var(--gb-font-display);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.01em;
}

.gb-heading-accent {
	font-family: var(--gb-font-accent);
	font-style: italic;
	text-transform: none;
}

/* Google 5-star badge — design node 38:881: 195×158 card, #1c2163,
   radius 11.23px; Google wordmark ~46px, gold stars, Open Sans Semibold
   14.29px caption. */
.gb-google-badge {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 195px;
	height: 158px;
	padding: 1rem 1.25rem;
	background: var(--gb-band);
	border-radius: 11.23px;
	color: var(--gb-white);
	text-align: center;
}

.gb-google-badge__logo {
	font-size: 2.125rem; /* ~34px glyphs → ~46px block */
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.gb-google-badge__logo span:nth-child(1) { color: #4285f4; }
.gb-google-badge__logo span:nth-child(2) { color: #ea4335; }
.gb-google-badge__logo span:nth-child(3) { color: #fbbc05; }
.gb-google-badge__logo span:nth-child(4) { color: #4285f4; }
.gb-google-badge__logo span:nth-child(5) { color: #34a853; }
.gb-google-badge__logo span:nth-child(6) { color: #ea4335; }

.gb-google-badge__stars {
	color: var(--gb-gold);
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: 0.1em;
}

.gb-google-badge__caption {
	font-size: 0.8933rem; /* 14.29px */
	line-height: 1.2283; /* 19.65px */
	font-weight: 600;
	white-space: nowrap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Decorative elements (ghost watermarks, sketch collages, breakout images)
   intentionally bleed past the page edges like the design — clip the canvas
   so they can't create a horizontal scrollbar. `clip` (unlike `hidden`)
   doesn't turn the element into a scroll container, so the sticky header
   keeps working; `hidden` stays as the older-browser fallback. */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--gb-dark);
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--gb-navy);
}

.button {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	background: var(--gb-gold);
	color: var(--gb-navy);
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.button:hover {
	opacity: 0.9;
}

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

.skip-link:focus {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.85rem 1.5rem;
	overflow: visible;
	clip: auto;
	background: var(--gb-navy);
	color: var(--gb-white);
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(10, 15, 26, 0.3);
}

/* Layout ------------------------------------------------------------------ */
.site-nav__menu {
	list-style: none;
	display: flex;
	gap: 1.875rem; /* 30px between items per design */
	margin: 0;
	padding: 0;
}

/* Buttons ------------------------------------------------------------------ */
.gb-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9.5px 10px 9.5px 21px; /* 51px tall pill per design */
	font-weight: 400;
	font-size: 1rem;
	line-height: 2;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 54px;
	box-shadow: 0 9px 12.5px rgba(0, 0, 0, 0.26);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.gb-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.3);
}

.gb-button--gold {
	background: var(--gb-gold);
	color: #000;
}

.gb-button--navy {
	background: var(--gb-navy);
	color: var(--gb-white);
}

.gb-button--outline {
	background: transparent;
	color: var(--gb-white);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.gb-button__arrow {
	flex-shrink: 0;
}

/* Chip-less pill: centered label, symmetric padding (design's plain
   "View Service Details" service-row buttons). */
.gb-button--nochip {
	justify-content: center;
	gap: 0;
	padding-right: 21px;
}

/* Header ------------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: -50px; /* top bar (50px) scrolls away, main row stays pinned */
	z-index: 100;
}

.site-topbar {
	height: 50px;
	background: var(--gb-gold-bright);
}

.site-topbar__inner {
	max-width: var(--gb-content);
	height: 100%;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-topbar__email {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--gb-navy);
	text-decoration: none;
}

.site-topbar__email:hover span {
	text-decoration: underline;
}

.site-topbar__social {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
}

.site-topbar__social a {
	display: inline-flex;
	color: var(--gb-navy);
	transition: opacity 0.2s ease;
}

.site-topbar__social a:hover {
	opacity: 0.65;
}

.site-header__main {
	background: var(--gb-white);
	transition: box-shadow 0.2s ease;
}

.is-scrolled .site-header__main {
	box-shadow: 0 4px 18px rgba(10, 15, 26, 0.12);
}

.site-header__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 26px 0 24px; /* Figma: main row y=50..159; logo y=76..135. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-header__brand img {
	display: block;
	max-height: 59px;
	width: auto;
}

.site-nav__menu > li {
	position: relative;
}

.site-nav__menu a {
	font-size: 1rem;
	font-weight: 600;
	line-height: 22px;
	color: var(--gb-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
	color: var(--gb-navy);
}

/* Thin chevron caret after items with a dropdown (design shows it on Services / About Us) */
.site-nav__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.45rem;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	opacity: 1;
}

/* Mobile-only submenu toggle (injected by main.js) */
.site-nav__submenu-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0.75rem;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-nav__submenu-toggle::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 17px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--gb-navy);
	border-bottom: 2px solid var(--gb-navy);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.site-nav__submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(225deg) translate(-3px, -3px);
}

/* Gold book icon — add the "menu-item-icon-book" class to a menu item (used by Knowledge Hub) */
.site-nav__menu .menu-item-icon-book > a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 0.45rem;
	vertical-align: -2px;
	background: var(--gb-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dropdown submenus */
.site-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 110;
	min-width: 305px; /* widest item ("Special & Threshold Inspections") on one line */
	margin: 0;
	padding: 0.75rem 0;
	list-style: none;
	background: var(--gb-white);
	box-shadow: 0 12px 28px rgba(10, 15, 26, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__menu .sub-menu a {
	display: block;
	padding: 0.45rem 1.25rem;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 1.4rem 0.65rem 1.05rem;
	background: var(--gb-indigo);
	color: var(--gb-white);
	font-size: 1.04rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 100px;
	box-shadow: 0 9px 13px rgba(0, 0, 0, 0.26);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.site-header__phone:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.3);
	color: var(--gb-white);
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	height: 2px;
	background: var(--gb-navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.site-header__inner {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}

	.site-header__toggle {
		display: flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--gb-white);
		box-shadow: 0 16px 24px rgba(10, 15, 26, 0.14);
		display: none;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__menu {
		flex-direction: column;
		gap: 0;
		padding: 0.75rem 0;
	}

	.site-nav__menu a {
		display: block;
		padding: 0.7rem 1.5rem;
	}

	.site-nav__menu li {
		position: relative;
	}

	/* Dropdowns collapse into a tap accordion (toggle button injected by main.js) */
	.site-nav__menu .menu-item-has-children > a::after {
		display: none;
	}

	.site-nav__submenu-toggle {
		display: block;
	}

	.site-nav__menu .sub-menu {
		display: none;
		position: static;
		min-width: 0;
		padding: 0 0 0.35rem 1rem;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.site-nav__menu li.is-open > .sub-menu {
		display: block;
	}
}

@media (max-width: 640px) {
	.site-topbar__social {
		display: none;
	}

	.site-header__phone span {
		display: none;
	}

	/* The footer pill has room for the full number, unlike the header */
	.site-footer .site-header__phone span {
		display: inline;
	}

	.site-header__phone {
		padding: 0.55rem;
	}
}

/* CTA panels ---------------------------------------------------------------- */
.gb-cta-panels {
	padding: 3rem 1.25rem;
}

.gb-cta-panels__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gb-cta-panels__panel {
	position: relative;
	overflow: hidden;
	/* Design (contact 181:762): heading top 31, button top 284 in a 375px panel,
	   i.e. 40px below the button. Top-anchor the stack and pin the button. */
	padding: 31px 2rem 40px 3.4rem;
	min-height: 375px;
	display: flex;
	align-items: stretch;
	border-radius: 20px;
}

.gb-cta-panels__panel--navy {
	background: var(--gb-band);
	color: var(--gb-white);
}

.gb-cta-panels__panel--gold {
	/* Design pairs a brighter panel gold with the brand-gold button on top of it. */
	background: var(--gb-gold-bright);
	color: var(--gb-navy);
}

.gb-cta-panels__panel--black {
	background: #0c0c0c;
	color: var(--gb-white);
}

.gb-cta-panels--detail .gb-cta-panels__panel {
	min-height: 331px;
	border-radius: 24px;
}

/* Design: bigger pills on the detail-page panels (78px tall, 41px chips) */
.gb-cta-panels--detail .gb-button {
	padding: 14px 16px 14px 38px;
	font-size: 1.25rem;
	line-height: 2;
}

.gb-cta-panels--detail .gb-button__arrow {
	width: 41px;
	height: 41px;
}

/* SIRS landing page: the 375px dual cards overlap the bottom of the indigo
   guide band by 175px exactly as in Figma 479:608. */
.gb-cta-panels--sirs {
	position: relative;
	z-index: 2;
	margin-top: -175px;
	padding-top: 0;
	padding-bottom: 0;
}

.gb-cta-panels--sirs .gb-cta-panels__inner {
	max-width: 1230px;
}

.gb-cta-panels__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	position: relative;
	z-index: 2;
	max-width: 26rem;
}

.gb-cta-panels__heading {
	margin: 0 0 44px; /* puts the body at the design's 205px */
	font-family: var(--gb-font-subheading);
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	line-height: 1.2;
	font-weight: 600;
}

.gb-cta-panels__text {
	/* button is pinned with margin-top:auto, so no bottom margin here */
	margin: 0;
	flex: 0 0 auto;
	font-size: 1.05rem;
	opacity: 0.88;
}

.gb-cta-panels__content .gb-button {
	margin-top: auto; /* 40px bottom padding puts the button top at the design's 284px */
}

.gb-cta-panels__watermark {
	position: absolute;
	/* Design tucks the monogram inside the panel; -3rem pushed it 48px past the
	   edge where overflow:hidden sliced the final glyph. */
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	height: 96%;
	width: auto;
	opacity: 0.14;
	filter: brightness(0) invert(1);
	z-index: 1;
	pointer-events: none;
}

.gb-cta-panels__panel--gold .gb-cta-panels__watermark {
	filter: none;
	opacity: 0.18;
}

/* About Us dual-simple CTA variant (Figma 537:932): single navy panel,
   centered heading/text, two buttons side by side. --------------------- */
.gb-cta-panels__simple {
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 3.5rem 2rem;
	background: var(--gb-band); /* was --gb-navy — Figma 537:932 uses the indigo band color here, not navy */
	border-radius: 20px;
	text-align: center;
	color: var(--gb-white);
}

.gb-cta-panels__simple-heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
}

.gb-cta-panels__simple-text {
	margin: 0 0 2rem;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.85);
}

.gb-cta-panels__simple-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* About Us desktop calibration — Figma frame 537:932. The constituent
   blocks remain reusable; these dimensions only apply to the About page. */
@media (min-width: 1024px) {
	.page-id-152 .gb-about-hero {
		display: block;
		height: 563px;
		min-height: 563px;
		padding: 0;
	}

	.page-id-152 .gb-about-hero__inner {
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
	}

	.page-id-152 .gb-about-hero__card {
		position: absolute;
		left: 49px;
		top: 123px;
		width: 637px;
		height: 436px;
		padding: 34px 43px 36px;
		border-width: 10px;
	}

	.page-id-152 .gb-about-hero__edge--left,
	.page-id-152 .gb-about-hero__edge--right {
		bottom: 0;
		width: 49px;
	}

	.page-id-152 .gb-about-hero__edge--bottom {
		display: none;
	}

	.page-id-152 .gb-about-hero__heading {
		margin-bottom: 12px;
		font-size: 36px;
		line-height: 48px;
	}

	.page-id-152 .gb-about-hero__body {
		max-width: 535px;
		margin-bottom: 18px;
		line-height: 24px;
	}

	.page-id-152 .gb-who-we-are {
		height: 835px;
		padding: 0;
	}

	.page-id-152 .gb-who-we-are__inner {
		/* Was width:100%; max-width:none — the absolutely-positioned copy/
		   media children below use fixed left offsets (93px / 659px)
		   measured from this box's own edge. With no max-width this box
		   spanned the full viewport, so on screens wider than the 1440px
		   the offsets were designed at, the whole pairing stayed pinned
		   near the left edge instead of the block reading centered.
		   659+741 (media's left + width) needs 1400px, more than the
		   site's normal 1264px content width, so this block gets its own
		   1440px cap instead of var(--gb-content). */
		position: relative;
		display: block;
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		height: 100%;
	}

	.page-id-152 .gb-who-we-are__copy {
		position: absolute;
		left: 93px;
		top: 231px;
		width: 394px;
	}

	.page-id-152 .gb-who-we-are__heading {
		margin-bottom: 39px;
	}

	.page-id-152 .gb-who-we-are__body {
		width: 377px;
		font-size: 24px;
		line-height: 35px;
	}

	.page-id-152 .gb-who-we-are__media {
		position: absolute;
		left: 659px;
		top: 145px;
		width: 741px;
		height: 569px;
	}

	.page-id-152 .gb-who-we-are__media img {
		border-radius: 0;
	}

	.page-id-152 .gb-who-we-are__stat {
		left: -17px;
		bottom: 36px;
		width: 264px;
		height: 193px;
		padding: 30px 29px;
		border-width: 9px;
	}

	.page-id-152 .gb-who-we-are__stat-value {
		font-size: 88px;
		line-height: 0.9;
	}

	.page-id-152 .gb-who-we-are__stat-label {
		margin: 12px 0 0 13px;
		font-size: 16px;
	}

	/* This page uses absolute positioning (not the block's default grid) for
	   the whole section (Figma 537:932 node 685:9) — the grid-based
	   .gb-who-we-are__cta rule has no effect here since .inner isn't a grid
	   on this page, so it needs its own absolute placement to match. */
	.page-id-152 .gb-who-we-are__cta {
		position: absolute;
		left: 924px;
		top: 724px;
		margin-top: 0;
	}

	.page-id-152 .gb-services-teaser {
		height: 886px;
	}

	.page-id-152 .gb-services-teaser__band {
		height: 499px;
		padding: 224px 76px 0;
	}

	.page-id-152 .gb-services-teaser__band-inner {
		max-width: none;
	}

	.page-id-152 .gb-services-teaser__heading {
		margin-bottom: 19px;
		max-width: 1035px;
	}

	.page-id-152 .gb-services-teaser__intro {
		max-width: 655px;
		font-size: 16px;
		line-height: 24px;
	}

	.page-id-152 .gb-services-teaser__grid {
		height: 387px;
	}

	.page-id-152 .gb-services-teaser__card {
		position: relative;
		padding: 24px 37px;
	}

	.page-id-152 .gb-services-teaser__card-title {
		margin-bottom: 15px;
		font-size: 20px;
		line-height: 32px;
	}

	.page-id-152 .gb-services-teaser__card-desc {
		font-size: 16px;
		line-height: 24px;
	}

	.page-id-152 .gb-services-teaser__icon {
		position: absolute;
		left: 37px;
		bottom: 64px;
		width: 68px;
		height: 69px;
		margin: 0;
	}

	.page-id-152 .gb-why-choose {
		/* Was a fixed height: 886px — sized for a taller reference layout
		   (or longer copy) than what's actually here; real content is only
		   ~2 lines per reason item, so this left a huge (~1500px) blank
		   gap below the actual content before the next section. The base
		   block rule has no fixed height at all — removing it here lets
		   the grid size to its real content, same as everywhere else. */
		padding: 97px 0 4.5rem;
	}

	.page-id-152 .gb-why-choose__inner {
		width: auto;
		max-width: none;
		margin: 0 51px 0 93px;
		grid-template-columns: 394px 1fr;
		gap: 148px;
	}

	.page-id-152 .gb-why-choose__heading {
		margin-bottom: 32px;
	}

	.page-id-152 .gb-why-choose__intro-body {
		font-size: 16px;
		line-height: 24px;
	}

	.page-id-152 .gb-why-choose__grid {
		gap: 58px 120px;
	}

	.page-id-152 .gb-why-choose__item-title {
		margin-bottom: 14px;
		font-size: 26px;
		line-height: 37px;
	}

	.page-id-152 .gb-why-choose__item-desc {
		font-size: 16px;
		line-height: 24px;
	}

	.page-id-152 .gb-fprofile__panel {
		width: 1070px;
		/* Was a fixed height: 422px — same overflow-clipping risk as the
		   other fixed heights in this section if the bio/content is ever
		   longer than the reference copy this was sized for. */
		min-height: 422px;
		max-width: none;
		margin: 514px 0 -204px 55px;
		padding: 38px 74px 26px 55px;
		border-radius: 0;
		box-shadow: none;
	}

	.page-id-152 .gb-fprofile {
		/* Was a fixed height: 732px — same fix as .page-id-161 above. */
		min-height: 732px;
		aspect-ratio: auto !important;
	}

	.page-id-152 .gb-fprofile__bio {
		margin-top: 8px;
		max-width: 941px;
	}

	.page-id-152 .gb-media-featured {
		height: 792px;
		padding: 0;
	}

	.page-id-152 .gb-media-featured__inner {
		/* Was width:100%; max-width:none — the absolutely-positioned copy/
		   media children below use fixed left offsets (105px / 649px)
		   measured from this box's own edge. With no max-width this box
		   spanned the full viewport, so on screens wider than the design
		   was calibrated for, the whole pairing stayed pinned near the
		   left edge instead of reading centered. 649+651 (media's left +
		   width) needs 1300px, more than the site's normal 1264px content
		   width, so this block gets its own 1440px cap instead of
		   var(--gb-content) — same pattern as the Who We Are section. */
		position: relative;
		display: block;
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		height: 100%;
	}

	.page-id-152 .gb-media-featured__copy {
		position: absolute;
		left: 105px;
		top: 305px;
		width: 445px;
	}

	.page-id-152 .gb-media-featured__body {
		line-height: 24px;
	}

	.page-id-152 .gb-media-featured__media {
		position: absolute;
		left: 649px;
		top: 238px;
		width: 651px;
		height: 464px;
	}

	.page-id-152 .gb-media-featured__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 35px;
	}

	.page-id-152 .gb-cta-panels--dual-simple {
		height: 244px;
		padding: 0;
	}

	.page-id-152 .gb-cta-panels__simple {
		height: 244px;
		padding: 38px 32px 22px;
		border-radius: 16px;
	}

	.page-id-152 .gb-cta-panels__simple-text {
		margin-bottom: 27px;
	}
}

/* Our Team desktop calibration — Figma frame 359:4593. */
@media (min-width: 1024px) {
	.page-id-161 .gb-fprofile {
		/* Was a fixed height: 540px — sized for shorter reference bio copy.
		   Real content (Greg's ~230-word bio) is taller and was getting
		   hard-clipped, with the panel rendering past the section's own
		   bottom edge into whatever section follows. min-height keeps the
		   same 540px floor for shorter content but lets the section grow
		   to fit real content instead. */
		min-height: 540px;
		aspect-ratio: auto !important;
	}

	.page-id-161 .gb-fprofile__panel {
		height: auto;
		margin-top: 24px;
		margin-bottom: 24px;
		padding-bottom: 40px;
	}

	.page-id-161 .gb-team {
		padding-top: 80px;
	}

	.page-id-161 .gb-cta-panels--single {
		height: 231px;
		padding: 23px 1.25rem 0;
	}

	.page-id-161 .gb-cta-panels--single .gb-cta-panels__band {
		height: 208px;
	}
}

/* Home page single-band CTA variant -------------------------------------- */
.gb-cta-panels--single .gb-cta-panels__band {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 2rem 2.5rem;
	border-radius: 20px;
}

.gb-cta-panels--single .gb-cta-panels__band--gold {
	background: var(--gb-gold-bright);
	color: var(--gb-navy);
}

/* Project Detail's "Have a project in mind?" band (Figma 537:1243): same
   single-band layout, indigo instead of gold, icon/heading/text in white.
   Class is named "navy" but the design's actual fill (sampled #1C2163) is
   the shared --gb-band indigo token, not --gb-navy — kept the class name
   for compatibility, fixed the color it resolves to. */
.gb-cta-panels--single .gb-cta-panels__band--navy {
	background: var(--gb-band);
	color: var(--gb-white);
}

.gb-cta-panels__band--navy .gb-cta-panels__band-icon {
	filter: brightness(0) invert(1);
}

.gb-cta-panels__band-icon {
	flex-shrink: 0;
	/* Real Figma asset (node 537:525) is 121x94.5, not square. */
	width: 130px;
	height: auto;
}

.gb-cta-panels__watermark--band {
	right: 8rem;
	height: 130%;
	opacity: 0.05;
	filter: none;
}

.gb-cta-panels--single .gb-cta-panels__band-heading {
	margin: 0 0 0.4rem;
	font-family: var(--gb-font-subheading);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 700;
}

.gb-cta-panels--single .gb-cta-panels__band-text {
	margin: 0;
	max-width: 40rem;
	font-size: 1rem;
}

/* Quote page CTA, measured from revised Figma frame 368:2259. The inline
   block carries this modifier, keeping the normal sitewide CTA untouched. */
.gb-cta-panels--quote {
	padding-bottom: 0;
}

.gb-cta-panels--quote .gb-cta-panels__band {
	display: grid;
	grid-template-columns: 121px 48px 620px 103px 230px;
	column-gap: 0;
	min-height: 208px;
	padding: 0 75px 0 67px;
	border-radius: 16px;
}

.gb-cta-panels--quote .gb-cta-panels__band-icon {
	grid-column: 1;
	width: 121px;
}

.gb-cta-panels--quote .gb-cta-panels__band-inner {
	grid-column: 3;
	width: 620px;
}

@media (min-width: 1024px) {
	.page-id-771 .gb-sirs-guide + .gb-cta-panels {
		margin-top: -190px;
	}

	.page-id-117 .gb-cta-panels--single {
		height: 280px;
		padding-top: 72px;
		padding-bottom: 0;
	}

	.page-id-117 .gb-cta-panels--single .gb-cta-panels__band {
		height: 208px;
	}
}

.gb-cta-panels--quote .gb-cta-panels__band-text {
	position: relative;
	left: 6px;
}

.gb-cta-panels--quote .gb-button {
	grid-column: 5;
	min-width: 230px;
	justify-content: center;
}

.gb-cta-panels--quote .gb-cta-panels__watermark--band {
	right: 102px;
	height: 201px;
}

@media (max-width: 1200px) {
	.gb-cta-panels--quote .gb-cta-panels__band {
		display: flex;
		min-height: 0;
		padding: 2rem 2.5rem;
	}

	.gb-cta-panels--quote .gb-cta-panels__band-inner,
	.gb-cta-panels--quote .gb-button {
		width: auto;
		min-width: 0;
		margin-left: 0;
	}

	.gb-cta-panels--quote .gb-cta-panels__band-text {
		left: 0;
	}
}

@media (max-width: 767px) {
	.gb-cta-panels--single .gb-cta-panels__band {
		flex-direction: column;
		align-items: flex-start;
	}

	.gb-cta-panels--quote .gb-cta-panels__band {
		display: flex;
		min-height: 0;
		padding: 2rem 1.5rem;
	}

	.gb-cta-panels--quote .gb-cta-panels__band-inner,
	.gb-cta-panels--quote .gb-button {
		width: auto;
		min-width: 0;
		margin-left: 0;
	}

	.gb-cta-panels--quote .gb-cta-panels__band-text {
		left: 0;
	}
}

/* Footer (white per design; dark text, indigo phone pill) -------------------- */
.site-footer {
	background: var(--gb-white);
	color: var(--gb-dark);
}

.site-footer a {
	color: var(--gb-dark);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--gb-navy);
	text-decoration: underline;
}

.site-footer__main {
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 5.2rem 1.25rem 4rem;
	display: grid;
	/* Brand column ~340px, link columns size to content, spread like the design */
	grid-template-columns: minmax(300px, 380px) auto auto auto;
	justify-content: space-between;
	gap: 2.5rem 3rem;
}

.site-footer__logo img {
	display: block;
	max-height: 78px;
	width: auto;
}

.site-footer__rating {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 1.4rem 0 2.2rem;
	max-width: 480px;
}

/* Compact footer variant of the Google badge (design node 537:322:
   111x90, much smaller than the 195x158 card used elsewhere). */
.site-footer__rating .gb-google-badge {
	width: 111px;
	height: 90px;
	padding: 0.5rem;
	border-radius: 6.4px;
	gap: 0.25rem;
}

.site-footer__rating .gb-google-badge__logo {
	font-size: 1.1rem;
}

.site-footer__rating .gb-google-badge__stars {
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

.site-footer__rating .gb-google-badge__caption {
	font-size: 0.5rem;
	line-height: 1.2;
	white-space: normal;
}

.site-footer__about {
	margin: 0;
	max-width: 330px;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--gb-dark);
}

.site-footer a.site-footer__phone {
	padding: 0.75rem 1.8rem 0.75rem 1.2rem;
	background: var(--gb-indigo);
	color: var(--gb-white);
	font-size: 1.15rem;
	box-shadow: 0 9px 13px rgba(0, 0, 0, 0.26);
}

.site-footer a.site-footer__phone:hover {
	color: var(--gb-white);
	text-decoration: none;
}

.site-footer__heading {
	margin: 0.4rem 0 1.5rem;
	font-family: var(--gb-font-subheading);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--gb-dark);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1.9; /* 34px rows per design */
}

/* Address / Email strip between the columns and the bottom bar (per design) */
.site-footer__strip {
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
}

.site-footer__strip-inner {
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 1.45rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.site-footer__strip-item {
	display: flex;
	align-items: center;
	gap: 1.55rem;
}

.site-footer__strip-icon {
	flex-shrink: 0;
}

.site-footer__strip-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.site-footer__strip-label {
	font-size: 1.0625rem;
	color: #656565;
}

.site-footer__strip-value {
	font-size: 1.25rem;
	font-weight: 600;
	color: #111111;
	line-height: 1.3;
}

a.site-footer__strip-value:hover {
	color: var(--gb-navy);
}

.site-footer__bottom-inner {
	max-width: var(--gb-content);
	margin: 0 auto;
	padding: 2.9rem 1.25rem 3.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.0625rem;
	line-height: 2;
	color: #3d3d3d;
	flex-wrap: wrap;
}

.site-footer__policy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.6rem;
}

/* Separator after every policy link, incl. before the copyright (per design) */
.site-footer__policy li::after {
	content: "|";
	margin-left: 0.6rem;
	color: #d8d8d8;
}

.site-footer__social {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.site-footer__social a {
	display: inline-flex;
	color: #555555; /* gray icons per design bottom bar */
	transition: color 0.2s ease;
}

.site-footer__social a:hover {
	color: var(--gb-gold);
}

@media (min-width: 1024px) {
	.home .gb-cta-panels--single { padding-top: 93px; padding-bottom: 0; }
	.home .gb-cta-panels--single .gb-cta-panels__band { height: 208px; }
	.home .site-footer__main { padding: 93px 34px 44px; }
	.home .site-footer__strip-inner { padding-top: 19px; padding-bottom: 19px; }
	.home .site-footer__bottom-inner { padding-top: 35px; padding-bottom: 35px; }
	.page-id-51 .gb-cta-panels--single { padding-top: 68px; padding-bottom: 0; }
	.page-id-51 .gb-cta-panels--single .gb-cta-panels__band { height: 208px; }
	.page-id-51 .site-footer__main { padding: 93px 34px 44px; }
	.page-id-51 .site-footer__strip-inner { padding-top: 19px; padding-bottom: 19px; }
	.page-id-51 .site-footer__bottom-inner { padding-top: 35px; padding-bottom: 35px; }
}

@media (max-width: 1023px) {
	.site-footer__main {
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
	}

	.gb-cta-panels__inner {
		grid-template-columns: 1fr;
	}

	.gb-cta-panels__panel {
		min-height: 300px;
	}
}

@media (max-width: 640px) {
	.site-footer__main {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.site-footer__strip-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.site-footer__bottom-inner {
		padding: 2rem 1.25rem 2.5rem;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Ghost outline watermark (giant heavy-sans text behind section headings).
   Design uses Nexa Black, transparent fill + faint outline, ~13–19% opacity,
   centered per section. We render it in Manrope (our heaviest free sans) as
   the Nexa stand-in. Size/opacity are tuned per section via modifiers. */
.gb-watermark {
	position: absolute;
	z-index: 0;
	font-family: var(--gb-font-hero); /* Manrope — heavy geometric sans (Nexa stand-in) */
	font-weight: 800;
	font-size: clamp(6rem, 12.15vw, 10.9375rem); /* 175px */
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.19);
	pointer-events: none;
	user-select: none;
}

.gb-watermark--dark {
	-webkit-text-stroke-color: rgba(28, 33, 99, 0.13);
}

/* Per-section size (design: 175px most, 126px for the clients strip). */
.gb-watermark--126 {
	font-size: clamp(4.5rem, 8.75vw, 7.875rem); /* 126px */
}

/* Opacity variants (design: 13% service/customer, 19% projects/clients). */
.gb-watermark--o13 {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.13);
}

.gb-watermark--o13.gb-watermark--dark {
	-webkit-text-stroke-color: rgba(28, 33, 99, 0.13);
}

.gb-watermark--o19 {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.19);
}

.gb-watermark--o19.gb-watermark--dark {
	-webkit-text-stroke-color: rgba(28, 33, 99, 0.19);
}

/* Section label (small label + rule line, used by most sections) ----------- */
.gb-section-label {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 0 0 2.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gb-dark);
	white-space: nowrap;
}

.gb-section-label__line {
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.25;
}

.gb-section-label--light {
	color: var(--gb-white);
}

/* Page Hero (block + reused directly by single-service.php) ------------------ */
.gb-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 457px;
	padding: 5rem 1.25rem;
	background-color: var(--gb-navy);
	background-size: cover;
	background-position: center;
	color: var(--gb-white);
}

.gb-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 35, 63, 0.6);
}

.gb-page-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--gb-content);
	margin: 0 auto;
	text-align: center; /* heading centered per hub/detail design */
}

.gb-page-hero__heading {
	margin: 0;
	font-size: clamp(2.2rem, 4.8vw, 3.4rem);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.gb-page-hero__subtext {
	margin: 1rem auto 0;
	max-width: 340px; /* design wraps to 3 short centered lines, not 2 wide ones */
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* Services hub frame 577:2. */
@media (min-width: 1024px) {
	.page-id-51 .gb-page-hero__heading { font-size: 50px; line-height: 68px; }
	.page-id-51 .gb-about { padding-top: 74px; padding-bottom: 69px; }
	.page-id-51 .gb-about__inner { max-width: 1240px; }
	.page-id-51 .gb-about__head { margin-bottom: 59px; }
	.page-id-51 .gb-about__body {
		width: 1211px; margin-bottom: 0; line-height: 24px;
	}
}

/* CTA panels button treatment per design (sampled from the Figma exports):
   navy pills are the brighter indigo #201E60 with a gold chip + black arrow;
   gold pills carry a black chip with a gold arrow (all variants). */
.gb-cta-panels .gb-button--navy {
	background: var(--gb-indigo);
}

.gb-cta-panels .gb-button--navy .gb-button__arrow path {
	fill: #000;
}

.gb-cta-panels .gb-button--gold .gb-button__arrow circle {
	fill: #000;
	stroke: none;
}

.gb-cta-panels .gb-button--gold .gb-button__arrow path {
	fill: var(--gb-gold);
}

/* Subtle diagonal hatch texture on white sections (per design) --------------- */
.gb-hatch,
.gb-services-list {
	background-image: repeating-linear-gradient(45deg, transparent 0, transparent 5px, #f4f4f4 5px, #f4f4f4 6px);
}

/* Contact/Quote intro ("We are always ready...") — plain white, no hatch. */
.gb-about--contact:not(:has(.gb-about__sketch)) {
	background-image: none;
}

/* Detail-page knowledge hub: design's 517px portrait on the left */

/* ---------------------------------------------------------------------------
   Section Settings utilities (per-block "Section" tab): background palette and
   top/bottom spacing overrides. !important so a user-picked override always
   beats the block's own stylesheet; the background shorthand also clears any
   texture (hatch) the block applies via background-image. Custom colors are
   inlined on the element (style attribute wins without !important).
--------------------------------------------------------------------------- */
.gb-sect--bg-white { background: var(--gb-white) !important; }
.gb-sect--bg-light { background: var(--gb-light) !important; }
.gb-sect--bg-navy { background: var(--gb-navy) !important; }
.gb-sect--bg-indigo { background: var(--gb-band) !important; }
.gb-sect--bg-gold { background: var(--gb-gold) !important; }

/* Dark backgrounds flip common text to white (best effort; blocks designed
   dark already set their own colors and are unaffected by the flip). */
section.gb-sect--dark :is(h1, h2, h3, h4, p, li, figcaption, blockquote) {
	color: var(--gb-white);
}

.gb-sect--pt-none { padding-top: 0 !important; }
.gb-sect--pt-sm { padding-top: 2rem !important; }
.gb-sect--pt-md { padding-top: 4rem !important; }
.gb-sect--pt-lg { padding-top: 6rem !important; }
.gb-sect--pt-xl { padding-top: 8rem !important; }
.gb-sect--pb-none { padding-bottom: 0 !important; }
.gb-sect--pb-sm { padding-bottom: 2rem !important; }
.gb-sect--pb-md { padding-bottom: 4rem !important; }
.gb-sect--pb-lg { padding-bottom: 6rem !important; }
.gb-sect--pb-xl { padding-bottom: 8rem !important; }

/* Publications strip (About page): the press-logos image runs wider than the
   statement block's 1050px measure — this modifier opens it up. */
.gb-statement--wide .gb-statement__inner {
	max-width: 1366px;
}

.gb-statement--wide .gb-statement__heading {
	margin-bottom: 1.5rem;
}

/* Client-logo marquee rows (Our Projects): 19px gap between stacked strips. */
.gb-logo-row {
	padding-bottom: 19px;
}

/* Knowledge Hub listings (topic archives, blog index, search) — deliberate
   skeleton styling until the listing designs land; URLs/queries are final. */
.gb-khl-hero {
	padding: 4.5rem 1.25rem;
	background: var(--gb-band);
	color: var(--gb-white);
}

.gb-khl-hero__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-khl-hero__crumb {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

.gb-khl-hero__crumb a {
	color: var(--gb-white);
	text-decoration: none;
}

.gb-khl-hero__heading {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: clamp(2rem, 3.4vw, 2.9375rem);
	font-weight: 400;
	color: var(--gb-white);
}

.gb-khl-hero__sub {
	margin: 1rem 0 0;
	max-width: 820px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

/* "Explore [Type] by [Service/Topic]" — sits inside the hero band on
   /blog/ and the White Papers/Knowledge Videos/Books & Guides listing
   pages. Not width-capped like .gb-khl-hero__sub/.gb-page-hero__subtext
   (both built for short taglines) since this is a real heading and needs
   to fit longer type names on one line without an awkward wrap. */
.gb-khl-hero__type-heading {
	margin: 1rem 0 0;
	font-family: var(--gb-font-subheading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--gb-white);
}

/* Blog service search + filter chips (client request, /blog/ only). */
.gb-blog-filter {
	padding: 3rem 1.25rem 2rem;
	background: var(--gb-white);
	text-align: center;
}

.gb-blog-filter__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-blog-filter__heading {
	margin: 0 0 0.5rem;
	font-family: var(--gb-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	color: var(--gb-dark);
}

.gb-blog-filter__subtext {
	margin: 0 0 1.75rem;
	color: var(--gb-gray);
}

.gb-blog-filter__search {
	position: relative;
	max-width: 560px;
	margin: 0 auto 1.75rem;
}

.gb-blog-filter__search-icon {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gb-gray);
	pointer-events: none;
}

.gb-blog-filter__search input {
	width: 100%;
	padding: 0.85rem 1.25rem 0.85rem 2.75rem;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 1rem;
	color: var(--gb-dark);
	background: var(--gb-white);
}

.gb-blog-filter__search input:focus {
	outline: none;
	border-color: var(--gb-band);
}

.gb-blog-filter__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

.gb-blog-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 0.92rem;
	color: var(--gb-dark);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gb-blog-filter__chip:hover {
	border-color: var(--gb-band);
}

.gb-blog-filter__chip.is-active {
	background: var(--gb-band);
	border-color: var(--gb-band);
	color: var(--gb-white);
}

.gb-blog-filter__chip-count {
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 0.8rem;
}

.gb-blog-filter__chip.is-active .gb-blog-filter__chip-count {
	background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) {
	.gb-blog-filter__chips {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 0.25rem;
	}

	.gb-blog-filter__chip {
		flex-shrink: 0;
	}
}

.gb-khl {
	padding: 4rem 1.25rem 5rem;
	background: var(--gb-white);
}

/* Brief dim while the AJAX search/filter fetch on /blog/ is in flight —
   swapped back in (a fresh, non-dimmed element) the moment the new
   results replace this one, so this never needs to be manually removed. */
.gb-khl.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.gb-khl__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-khl__group {
	margin-bottom: 4rem;
}

.gb-khl__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.gb-khl__group-heading {
	margin: 0;
	font-family: var(--gb-font-subheading);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--gb-dark);
}

.gb-khl__group-all {
	font-size: 0.95rem;
	color: var(--gb-band);
	text-decoration: none;
	white-space: nowrap;
}

.gb-khl__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.gb-khl-card {
	background: var(--gb-white);
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	overflow: hidden;
}

.gb-khl-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.gb-khl-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 309 / 217;
	object-fit: cover;
}

.gb-khl-card__body {
	display: block;
	padding: 1.1rem 1.2rem 1.4rem;
}

.gb-khl-card__badge {
	display: inline-block;
	margin-bottom: 0.6rem;
	padding: 3px 12px;
	font-size: 0.75rem;
	color: var(--gb-band);
	border: 1px solid rgba(28, 33, 99, 0.35);
	border-radius: 12px;
}

.gb-khl-card__title {
	display: block;
	font-family: var(--gb-font-subheading);
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--gb-dark);
}

.gb-khl-card__excerpt {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--gb-dark);
}

.gb-khl__pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.gb-khl__empty {
	margin: 0;
	font-size: 1.05rem;
	color: var(--gb-gray);
}

.gb-khl__inner--single {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.gb-khl-single__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.gb-khl-single__content {
	font-size: 1rem;
	line-height: 1.7;
	color: #333;
}

.gb-khl-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.75rem 0;
}

.gb-khl-single__topics {
	font-size: 0.9rem;
	color: var(--gb-gray);
}

.gb-khl-single__topics a {
	color: var(--gb-band);
}

@media (max-width: 1023px) {
	.gb-khl__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gb-khl__inner--single {
		grid-template-columns: 1fr;
	}
}

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

/* ===========================================================================
   Knowledge Hub listing pages (topic x type) - revised frames 368:4945,
   368:3973, 368:4220 and 368:4730. Shared dynamic shell.
   =========================================================================== */

.gb-khl-intro {
	min-height: 230px;
	padding: 58px 1.25rem 48px;
}

.gb-khl-intro .gb-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 456px) minmax(0, 1fr);
	gap: 41px; /* design: heading col 456px, body starts at x=585 in the 1264 container */
	align-items: start;
}

.gb-khl-intro .gb-about__head {
	margin-bottom: 0;
}

.gb-khl-intro .gb-about__grid {
	grid-template-columns: 1fr;
	padding-top: 6px;
}

.gb-khl-intro .gb-about__heading {
	font-size: clamp(2rem, 3.6vw, 3.125rem);
	line-height: 1.23;
}

/* Outranks .gb-about--contact .gb-about__grid > .gb-about__content:only-child
   .gb-about__body (0,5,0), which would otherwise force line-height 1.5. */
.gb-khl-intro.gb-about--contact .gb-about__grid > .gb-about__content .gb-about__body.gb-khl-intro__body {
	max-width: 768px;
	/* design node 230:159 / 230:411: Open Sans 18px / 26px, black */
	font-size: 18px;
	line-height: 26px;
	color: #000;
}

/* Type tabs: gold band, 301x88 pills, active = indigo. */
.gb-khl-tabs {
	padding: 40px 1.25rem;
	background: var(--gb-white);
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.07);
}

.gb-khl-tabs__inner {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--gb-content);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.gb-khl-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 88px;
	padding: 12px 20px;
	background: #fbbc05;
	border-radius: 0;
	font-family: var(--gb-font-subheading);
	font-size: 1.4555rem;
	line-height: 1.05;
	color: #000;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.gb-khl-tab img {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.gb-khl-tab.is-active {
	background: var(--gb-indigo);
	color: var(--gb-white);
}

.gb-khl-tab.is-active img {
	filter: brightness(0) invert(1);
}

.gb-khl-tab span {
	max-width: 150px;
}

.gb-khl {
	padding: 3.5rem 1.25rem 5rem;
	background: var(--gb-white);
}

.gb-khl--blogs-articles {
	padding: 45px 1.25rem 26px;
}

.gb-khl__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-khl__empty {
	margin: 2rem 0;
	font-size: 1.05rem;
	color: var(--gb-gray);
}

.gb-khl__pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.gb-khl__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	color: var(--gb-dark);
	text-decoration: none;
}

.gb-khl__pagination .page-numbers.current {
	background: var(--gb-indigo);
	border-color: var(--gb-indigo);
	color: var(--gb-white);
}

/* Revised blogs grid: exact 3 x 408px card rhythm from frame 368:4945. */
.gb-khl-blogs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px 20px;
}

.gb-khl-blog__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gb-khl-blog__media {
	display: block;
	margin-bottom: 27px;
	overflow: hidden;
}

.gb-khl-blog__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gb-khl-blog__link:hover .gb-khl-blog__media img {
	transform: scale(1.04);
}

.gb-khl-blog__chip {
	display: inline-block;
	margin-bottom: 19px;
	padding: 4px 18px;
	font-size: 1.125rem;
	line-height: 26px;
	color: #000;
	border: 1px solid #a5a5a5;
	border-radius: 18px;
}

.gb-khl-blog__title {
	display: -webkit-box;
	overflow: hidden;
	max-width: 389px;
	font-family: var(--gb-font-subheading);
	font-size: 1.875rem;
	line-height: 34px;
	color: #000;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* White Papers: rich rows */
.gb-khl-papers {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

.gb-khl-paper {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 65px;
	align-items: start;
}

.gb-khl-paper__cover {
	/* Design 230:215: the front cover is a 419.7 x 542.1 PORTRAIT document. */
	position: relative;
	aspect-ratio: 419.715 / 542.104;
}

/* Two of the three white sheets that peek out behind the cover (230:212-214),
   each carrying the design's 0 0 36.827px rgba(0,0,0,0.25) drop shadow. */
.gb-khl-paper__cover::before,
.gb-khl-paper__cover::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: #fff;
	border-radius: 0;
	box-shadow: 0 0 36.827px rgba(0, 0, 0, 0.25);
}

.gb-khl-paper__cover::before {
	inset: 6% 0 0 2.6%;
}

.gb-khl-paper__cover::after {
	inset: 9.5% 0 0 5.2%;
}

.gb-khl-paper__cover a,
.gb-khl-paper__cover img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: 0 24px 44px rgba(0, 0, 0, 0.22);
}

.gb-khl-paper__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.gb-khl-paper__chip {
	padding: 5px 18px;
	font-size: 0.9375rem;
	color: #000;
	border: 1px solid #d9d9d9;
	border-radius: 18px;
}

.gb-khl-paper__title {
	margin: 0 0 13px;
	max-width: 625px;
	font-family: var(--gb-font-display);
	font-size: 50px;
	line-height: 55px;
	font-weight: 400;
	color: #000;
}

.gb-khl-paper__title a {
	color: inherit;
	text-decoration: none;
}

.gb-khl-paper__excerpt {
	margin: 0 0 20px;
	max-width: 678px;
	font-size: 1rem;
	line-height: 1.5;
	color: #000;
}

.gb-khl-paper__meta {
	display: flex;
	gap: 2rem;
	margin-bottom: 41px;
}

.gb-khl-paper__metaitem {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 1rem;
	color: #333;
}

.gb-khl-paper__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-bottom: 36px;
}

.gb-khl-paper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 49px;
	padding: 0 20px;
	border-radius: 30px;
	font-size: 1rem;
	text-decoration: none;
}

.gb-khl-paper__btn--outline {
	width: 186px;
	color: var(--gb-white);
	background: var(--gb-indigo);
	border: 0;
}

.gb-khl-paper__btn--fill {
	width: 196px;
	color: var(--gb-white);
	background: var(--gb-indigo);
}

.gb-khl-paper__share {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 1rem;
	color: #333;
}

.gb-khl-paper__author {
	/* Design node 230:238: 697x110 card. Photo 73x72 at (20,19); text column at x=110;
	   the two 50px serif stats at x=420 / x=498; QR 65x65 at x=609. */
	display: grid;
	/* Tracks derived from the design: photo 73 | text 293 | Papers 61 | Experience 94 | QR 65,
	   with 17px gutters, so the stats land at card-local x=420 and x=498. */
	grid-template-columns: 73px minmax(0, 293px) 61px 94px 65px;
	align-items: center;
	gap: 17px;
	max-width: 697px;
	min-height: 110px;
	padding: 19px 23px 19px 20px;
	background: var(--gb-white);
	border: 1px solid #c4c4c4;
	border-radius: 0;
	box-shadow: none;
}

.gb-khl-paper__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.gb-khl-paper__stat-number {
	font-family: var(--gb-font-display);
	font-size: 50px;
	line-height: 55px;
	font-weight: 400;
	color: #000;
}

.gb-khl-paper__stat-label {
	font-family: var(--gb-font-body);
	font-size: 12px;
	line-height: 11px;
	color: #000;
}

.gb-khl-paper__author-qr {
	width: 65px;
	height: 65px;
	display: block;
}

.gb-khl-paper__author-photo {
	width: 73px;
	height: 72px;
	object-fit: cover;
	border-radius: 0;
	flex-shrink: 0;
}

.gb-khl-paper__author-text {
	position: relative;
	display: block;
	height: 72px;
}

.gb-khl-paper__author-label {
	position: absolute;
	top: -1px;
	left: 0;
	font-size: 12px;
	line-height: 28.476px;
	color: var(--gb-gray);
}

.gb-khl-paper__author-name {
	position: absolute;
	top: 22px;
	left: 0;
	font-family: var(--gb-font-subheading);
	font-size: 1.972rem;
	line-height: 0.916;
	text-transform: uppercase;
	color: #000;
}

.gb-khl-paper__author-role {
	position: absolute;
	top: 54px;
	left: 0;
	font-size: 12px;
	line-height: 14px;
	white-space: nowrap;
	color: var(--gb-gray);
}

@media (max-width: 900px) {
	.gb-khl-paper__author {
		grid-template-columns: 73px minmax(0, 1fr);
		min-height: 0;
	}

	.gb-khl-paper__stat,
	.gb-khl-paper__author-qr {
		display: none;
	}
}

/* Knowledge Videos: 2-column embeds */
.gb-khl-videos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.gb-khl-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	overflow: hidden;
	background: #000;
}

.gb-khl-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gb-khl-video__poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: #111;
	color: var(--gb-white);
	text-decoration: none;
	cursor: pointer;
}

.gb-khl-video__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}

.gb-khl-video__launch:hover img,
.gb-khl-video__launch:focus-visible img {
	opacity: 0.88;
}

.gb-khl-video__launch .gb-khl-video__play {
	display: none;
}

.gb-khl-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.gb-khl-video__title {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	top: 1.1rem;
	font-family: var(--gb-font-subheading);
	font-size: 1.25rem;
	line-height: 1.25;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Books: reuse the About books-block shelf styling */
.gb-khl-books {
	padding: 0;
	background: transparent;
	background-image: none;
}

.gb-khl-books .gb-books__inner {
	max-width: none;
}

@media (min-width: 1161px) {
	/* Frame-local geometry measured from the revised 1440px designs. */
	.gb-khl--white-papers {
		padding-top: 105px;
		padding-bottom: 150px;
	}

	.gb-khl--white-papers .gb-khl-paper {
		grid-template-columns: 433px minmax(0, 1fr);
		gap: 55px;
	}

	.gb-khl--white-papers .gb-khl-paper__cover {
		width: 420px;
		margin-left: 13px;
	}

	.gb-khl-paper__chip:first-child {
		width: 192px;
		text-align: center;
	}

	.gb-khl-paper__chip:nth-child(2) {
		width: 136px;
		text-align: center;
	}

	.gb-khl-paper__author {
		box-sizing: border-box;
		height: 110px;
		min-height: 110px;
	}

	.gb-khl--knowledge-videos {
		padding-top: 64px;
		padding-bottom: 113px;
	}

	.gb-khl--knowledge-videos .gb-khl-videos {
		width: calc(100% + 10px);
	}

	.gb-khl--books-guides {
		padding-top: 81px;
		padding-bottom: 60px;
	}

	.gb-khl--books-guides .gb-books__shelf--featured {
		transform: translateX(-12px);
	}

	.gb-khl--white-papers + .gb-khl-related {
		padding-bottom: 47px;
	}

	.gb-khl--knowledge-videos + .gb-khl-related {
		padding-bottom: 21px;
	}

	.gb-khl--books-guides + .gb-khl-related {
		padding-bottom: 23px;
	}
}

/* Related Topics strip */
.gb-khl-related {
	padding: 51px 1.25rem 7px;
	background: var(--gb-white);
}

.gb-khl-related__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-khl-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 41px;
}

.gb-khl-related__head .gb-button {
	/* design pill 230:221: 225x56, indigo, 16.594px Open Sans, full radius */
	min-width: 225px;
	min-height: 56px;
	justify-content: center;
	padding: 0 22px;
	font-size: 1.037rem;
	line-height: 1.2;
	border-radius: 56px;
	background: var(--gb-indigo);
}

.gb-khl-related__heading {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: clamp(2rem, 3.6vw, 3.125rem);
	line-height: 68px;
	font-weight: 400;
	color: #000;
}

.gb-khl-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px; /* design: 4x301px cards + 3x20px gaps = the 1264px container */
}

.gb-khl-related__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gb-khl-related__media {
	display: block;
	margin-bottom: 18px;
	overflow: hidden;
}

.gb-khl-related__media img {
	display: block;
	width: 100%;
	aspect-ratio: 301 / 308;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gb-khl-related__card:hover .gb-khl-related__media img {
	transform: scale(1.04);
}

.gb-khl-related__name {
	display: block;
	max-width: 278px;
	font-family: var(--gb-font-subheading);
	font-size: 1.875rem;
	line-height: 30px;
	color: #000;
}

/* The revised listing-frame CTA is the same 1264 x 208 single gold band used
   by Quote, but remains scoped to topic archives so sitewide CTAs do not move. */
.tax-resource_topic .gb-cta-panels--single .gb-cta-panels__band {
	min-height: 208px;
	padding: 0 75px 0 67px;
	border-radius: 16px;
}

@media (max-width: 1160px) {
	.gb-khl-tabs__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.gb-khl-blogs {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 24px;
	}

	.gb-khl-paper {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 36px;
	}

	.gb-khl-related__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

	.gb-khl-intro .gb-about__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 767px) {
	.gb-khl-intro {
		min-height: 0;
		padding: 3rem 1.25rem;
	}

	.gb-khl-intro .gb-about__grid {
		padding-top: 0;
	}

	.gb-khl-tabs {
		padding: 2rem 1.25rem;
	}

	.gb-khl-tabs__inner {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.gb-khl-tab {
		min-height: 76px;
		padding: 10px;
		font-size: 1rem;
	}

	.gb-khl-blogs {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.gb-khl-blog__media {
		margin-bottom: 18px;
	}

	.gb-khl-blog__chip {
		margin-bottom: 12px;
		font-size: 0.9375rem;
		line-height: 22px;
	}

	.gb-khl-blog__title {
		font-size: 1.5rem;
		line-height: 30px;
	}

	.gb-khl-videos {
		grid-template-columns: 1fr;
	}

	.gb-khl-paper {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.gb-khl-paper__title {
		font-size: 2.5rem;
		line-height: 1.15;
	}

	.gb-khl-paper__cover {
		max-width: 300px;
	}

	.gb-khl-related__grid {
		grid-template-columns: 1fr 1fr;
	}

	.gb-khl-related__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.gb-khl-related {
		padding: 3.25rem 1.25rem;
	}

	.gb-khl-related__heading {
		line-height: 1.2;
	}

	.gb-khl-related__name {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.tax-resource_topic .gb-cta-panels--single .gb-cta-panels__band {
		min-height: 0;
		padding: 2rem 1.5rem;
	}
}

/* Single blog article (single.php) — Knowledge Hub design language until a
   dedicated blog design lands; semantics are launch-ready. */
.gb-article__hero {
	padding: 3.5rem 1.25rem;
}

.gb-article__meta {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
}

.gb-article__body {
	padding: 3.5rem 1.25rem 4.5rem;
	background: var(--gb-white);
}

.gb-article__inner {
	max-width: 820px;
	margin: 0 auto;
}

.gb-article__media {
	margin: 0 0 2.5rem;
}

.gb-article__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.gb-article__content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #333;
}

.gb-article__content > * {
	margin: 0 0 1.4rem;
}

.gb-article__content h2 {
	margin: 2.4rem 0 1rem;
	font-family: var(--gb-font-subheading);
	font-size: 1.7rem;
	color: var(--gb-dark);
}

.gb-article__content h3 {
	margin: 2rem 0 0.8rem;
	font-family: var(--gb-font-subheading);
	font-size: 1.35rem;
	color: var(--gb-dark);
}

.gb-article__content a {
	color: var(--gb-band);
	text-decoration: underline;
}

.gb-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.gb-article__topics {
	margin: 2.5rem 0 0;
	font-size: 0.95rem;
	color: var(--gb-gray);
}

.gb-article__topics a {
	color: var(--gb-band);
}

.gb-article__nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid #e3e3e3;
}

.gb-article__nav a {
	color: var(--gb-band);
	text-decoration: none;
	font-size: 0.95rem;
}

.gb-article__nav-next {
	margin-left: auto;
	text-align: right;
}

.gb-article__related {
	padding-top: 4rem;
}

.gb-article__related-heading {
	margin: 0 0 2rem;
	font-family: var(--gb-font-display);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 400;
	color: #000;
}

@media (max-width: 640px) {
	.gb-article__nav {
		flex-direction: column;
	}

	.gb-article__nav-next {
		margin-left: 0;
		text-align: left;
	}
}

/* =========================================================================
   Blog Detail page (single.php) — revised Figma frame 368:5163.
   Navy hero + gold breadcrumb + sticky share rail + article body + sticky
   Table of Contents + author bio card + related blogs row.
   ========================================================================= */

/* --- Hero band (navy 255:86, H1 255:204, byline, featured image 255:203) --- */
.gb-blog-hero {
	background: var(--gb-indigo);
	color: #fff;
}

.gb-blog-hero__inner {
	position: relative;
	max-width: var(--gb-content);
	height: 457px;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 585px) 600px;
	gap: 77px;
	align-items: start;
}

.gb-blog-hero__text {
	padding-top: 81px;
}

.gb-blog-hero__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: 50px;
	line-height: 68px;
	color: #fff;
}

.gb-blog-hero__byline {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 15px;
}

.gb-blog-hero__avatar {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.gb-blog-hero__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gb-blog-hero__author {
	font-family: var(--gb-font-body);
	font-weight: 400;
	font-size: 18.711px;
	line-height: 1;
	color: #fff;
}

.gb-blog-hero__date {
	font-family: var(--gb-font-body);
	font-size: 18px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.85);
	margin-left: 46px;
}

.gb-blog-hero__media {
	margin: 0;
	margin-top: 60px;
	width: 600px;
	max-width: 100%;
	aspect-ratio: 600 / 338;
	border-radius: 10px;
	overflow: hidden;
}

.gb-blog-hero__media img,
.gb-blog-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Gold breadcrumb bar (255:205) --- */
.gb-blog-crumb {
	background: #ffc845;
}

.gb-blog-crumb__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
	min-height: 46px;
	padding: 12px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 22px;
	color: var(--gb-navy);
}

.gb-blog-crumb__inner a {
	color: var(--gb-navy);
	font-weight: 700;
	text-decoration: none;
}

.gb-blog-crumb__inner a:hover {
	text-decoration: underline;
}

.gb-blog-crumb__sep {
	width: 16px;
	height: 14px;
	background: url("../images/icon-arrow-right.svg") center / contain no-repeat;
	flex-shrink: 0;
}

.gb-blog-crumb__current {
	font-weight: 700;
	color: var(--gb-navy);
}

.gb-blog-crumb__pdf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 14px;
	border-radius: 20px;
	background: var(--gb-navy);
	color: var(--gb-white) !important;
	font-weight: 600 !important;
	font-size: 14px;
	white-space: nowrap;
}

.gb-blog-crumb__pdf:hover {
	text-decoration: none !important;
	opacity: 0.9;
}

/* --- Body: share rail | content | ToC --- */
.gb-blog-body {
	background: #fff;
}

.gb-blog-body__inner {
	max-width: 1268px;
	margin: 0 auto;
	padding: 56px 0 79px;
	display: grid;
	grid-template-columns: 45px 52px 807px 47px 319px;
	align-items: start;
}

/* content sits in the middle column; there is a 52px gap after the share rail */
.gb-blog-content {
	grid-column: 3;
	min-width: 0;
}

.gb-blog-body--no-toc .gb-blog-body__inner {
	grid-template-columns: 45px 52px minmax(0, 1fr);
}

/* --- Sticky share rail (255:207) --- */
.gb-blog-share {
	grid-column: 1;
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gb-blog-share__list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gb-blog-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border: 1px solid var(--gb-band);
	border-radius: 999px;
	color: var(--gb-band);
	transition: background 0.2s ease, color 0.2s ease;
}

.gb-blog-share__btn:hover {
	background: var(--gb-band);
	color: #fff;
}

.gb-blog-share__rule {
	width: 2px;
	height: 56px;
	background: var(--gb-band);
	margin: 8px 0 14px;
}

.gb-blog-share__label {
	writing-mode: vertical-rl;
	font-family: var(--gb-font-body);
	font-size: 16px;
	letter-spacing: 0.06em;
	color: var(--gb-band);
}

/* --- Article content (WYSIWYG) --- */
.gb-blog-content > * {
	max-width: 807px;
}

/* Prose typography targets DIRECT children only, so ACF inline blocks
   (their own <p>/<h3>/buttons are nested deeper) keep their own styling. */
.gb-blog-content > p {
	font-family: var(--gb-font-body);
	font-size: 18px;
	line-height: 26px;
	color: #000;
	margin: 0 0 26px;
}

.gb-blog-content > h2 {
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 35px;
	color: #000;
	margin: 44px 0 20px;
	scroll-margin-top: 120px;
}

.gb-blog-content > h3 {
	font-family: var(--gb-font-subheading);
	font-size: 22px;
	line-height: 1.3;
	color: var(--gb-navy);
	margin: 32px 0 16px;
	scroll-margin-top: 120px;
}

.gb-blog-content h4 {
	font-family: var(--gb-font-body);
	font-weight: 700;
	font-size: 18px;
	color: var(--gb-navy);
	margin: 24px 0 12px;
}

/* Text links inside prose — but never the buttons/pills of inline blocks
   (their own colors must win, so exclude them from the content link color). */
.gb-blog-content a:not(.gb-button):not(.gb-contact-card__btn) {
	color: var(--gb-indigo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gb-blog-content ul,
.gb-blog-content ol {
	font-family: var(--gb-font-body);
	font-size: 18px;
	line-height: 26px;
	color: #000;
	margin: 0 0 26px;
	padding-left: 1.4em;
}

.gb-blog-content li {
	margin-bottom: 8px;
}

.gb-blog-content img {
	height: auto;
	border-radius: 0;
}

.gb-blog-content figure {
	margin: 26px 0;
}

.gb-blog-content .wp-block-image {
	margin: 26px 0;
}

.gb-blog-content blockquote {
	border-left: 4px solid var(--gb-gold);
	margin: 26px 0;
	padding: 8px 0 8px 24px;
	font-family: var(--gb-font-accent);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: var(--gb-navy);
}

/* Full/wide-aligned inline blocks (CTA banners, contact card) may break the
   807px measure — allow them to fill the content column. */
.gb-blog-content > .alignwide,
.gb-blog-content > .alignfull,
.gb-blog-content > .gb-inline-cta,
.gb-blog-content > .gb-contact-card {
	max-width: none;
}

/* Revised article imagery uses native Gutenberg media blocks, keeping every
   image editor-replaceable while reproducing the frame's fixed desktop grid. */
.gb-blog-photo-row {
	display: grid;
	grid-template-columns: repeat(3, 272px);
	gap: 0;
	margin: 38px 0;
}

.gb-blog-photo-row + h2 {
	margin-top: 36px;
}

.gb-blog-content .gb-blog-photo-row .wp-block-image {
	margin: 0;
	width: 272px;
	height: 282px;
}

.gb-blog-photo-row img,
.gb-blog-media-split img,
.gb-blog-wide-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gb-blog-media-split {
	display: grid;
	align-items: start;
	margin: 33px 0 35px;
}

.gb-blog-media-split--image-left {
	grid-template-columns: 331px 1fr;
	gap: 34px;
}

.gb-blog-media-split--image-right {
	grid-template-columns: 1fr 295px;
	gap: 39px;
}

.gb-blog-media-split + .gb-blog-media-split {
	margin-top: 50px;
	margin-bottom: 54px;
}

.gb-blog-content .gb-blog-media-split .wp-block-image,
.gb-blog-media-split p {
	margin: 0;
}

.gb-blog-media-split--image-left .wp-block-image {
	height: 372px;
}

.gb-blog-media-split--image-right .wp-block-image {
	height: 306px;
}

.gb-blog-media-split p {
	font-size: 18px;
	line-height: 26px;
	color: #000;
}

.gb-blog-content .gb-blog-wide-photo {
	margin: 55px 0 38px;
	width: 801px;
	height: 366px;
}

.gb-blog-wide-photo + h2,
.gb-blog-content > h2:nth-of-type(5) {
	margin-top: 58px;
}

.gb-blog-content > h2:nth-of-type(6) {
	margin-top: 43px;
}

.gb-blog-content > p:last-child {
	margin-bottom: 0;
}

.gb-blog-content__pagelinks {
	margin: 24px 0;
	font-weight: 700;
}

/* --- Table of Contents (255:231) --- */
.gb-blog-toc {
	grid-column: 5;
}

.gb-blog-toc__box {
	position: sticky;
	top: 120px;
	background: var(--gb-indigo);
	border-radius: 11px;
	padding: 28px 26px 30px;
	min-height: 569px;
	color: #fff;
}

.gb-blog-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.gb-blog-toc__title {
	font-family: var(--gb-font-body);
	font-weight: 600;
	font-size: 19.2px;
	line-height: 1.45;
	color: #fff;
}

.gb-blog-toc__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 32px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
}

.gb-blog-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.gb-blog-toc__list li + li {
	margin-top: 16px;
}

.gb-blog-toc__list a {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 12px;
	align-items: start;
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
	transition: color 0.15s ease;
}

.gb-blog-toc__arrow {
	width: 12px;
	height: 10px;
	margin-top: 5px;
	background: url("../images/icon-arrow-right.svg") center / contain no-repeat;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.gb-blog-toc__list a:hover,
.gb-blog-toc__list a.is-active {
	color: var(--gb-gold);
}

.gb-blog-toc__list a:hover .gb-blog-toc__arrow,
.gb-blog-toc__list a.is-active .gb-blog-toc__arrow {
	filter: invert(82%) sepia(45%) saturate(884%) hue-rotate(352deg) brightness(98%) contrast(96%);
	opacity: 1;
}

.gb-blog-toc__box.is-collapsed .gb-blog-toc__list {
	display: none;
}

/* --- Author bio card (255:283) --- */
.gb-blog-author {
	background: #fff;
	padding: 0 20px;
}

.gb-blog-author__card {
	box-sizing: border-box;
	max-width: 1274px;
	height: 249px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 135px minmax(0, 1fr) 135px;
	gap: 34px;
	align-items: start;
	background: #fff;
	border: 1.828px solid #c4c4c4;
	border-radius: 7px;
	padding: 32px 44px 32px 33px;
}

/* Design 255:283 stacks the QR and the social row in the right column. */
.gb-blog-author__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
}

.gb-blog-author__photo {
	width: 135px;
	height: 133px;
	border-radius: 50%;
	overflow: hidden;
}

.gb-blog-author__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gb-blog-author__name {
	margin: 0 0 12px;
	font-family: var(--gb-font-subheading);
	font-size: 35px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #000;
}

.gb-blog-author__bio {
	margin: 0;
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 25.96px;
	color: #000;
}

.gb-blog-author__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
}

.gb-blog-author__social a {
	color: var(--gb-navy);
	display: inline-flex;
}

.gb-blog-author__social a:hover {
	color: var(--gb-indigo);
}

.gb-blog-author__qr {
	width: 135px;
	height: 135px;
}

.gb-blog-author__qr img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* --- Related Blogs & Articles (255:196 heading, 255:200-202 cards) --- */
.gb-blog-related {
	background: #fff;
	padding: 55px 20px 93px;
}

.gb-blog-related__inner {
	max-width: 1268px;
	margin: 0 auto;
}

.gb-blog-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

.gb-blog-related__heading {
	margin: 0;
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: var(--gb-display-lg);
	line-height: var(--gb-display-lg-lh);
	color: #000;
}

.gb-blog-related__head .gb-button {
	width: 189px;
	min-width: 189px;
	height: 56px;
	justify-content: center;
	transform: translate(-2px, -2px);
}

.gb-blog-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 408px);
	gap: 22px;
}

.gb-blog-rcard:nth-child(3) {
	transform: translateX(-2px);
}

.gb-blog-rcard__link {
	display: block;
	text-decoration: none;
}

.gb-blog-rcard__media {
	display: block;
	aspect-ratio: 408 / 408;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 27px;
}

.gb-blog-rcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.gb-blog-rcard__link:hover .gb-blog-rcard__media img {
	transform: scale(1.04);
}

.gb-blog-rcard__chip {
	display: inline-block;
	box-sizing: border-box;
	width: 174px;
	height: 36px;
	padding: 4px 10px;
	border: 1px solid #c9c9c9;
	border-radius: 999px;
	font-family: var(--gb-font-body);
	font-size: 18px;
	line-height: 26px;
	text-align: center;
	color: #000;
	margin-bottom: 19px;
}

.gb-blog-rcard__title {
	display: block;
	font-family: var(--gb-font-subheading);
	font-size: 30px;
	line-height: 34px;
	color: #000;
}

.gb-blog-rcard__link:hover .gb-blog-rcard__title {
	color: var(--gb-indigo);
}

.single-post .gb-cta-panels--single .gb-cta-panels__band {
	min-height: 208px;
	padding: 0 75px 0 67px;
	border-radius: 16px;
}

@media (min-width: 1161px) {
	/* The revised article frame uses the compact 645px footer composition. */
	.single-post .site-footer__main {
		padding: 44.6px 34px 37px;
	}

	.single-post .site-footer__strip-inner {
		padding: 19px 34px;
	}

	.single-post .site-footer__bottom-inner {
		padding-bottom: 31px;
	}
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.gb-blog-hero__inner {
		height: auto;
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 60px 20px 48px;
	}

	.gb-blog-hero__text {
		padding-top: 0;
	}

	.gb-blog-hero__media {
		width: 100%;
		margin-top: 0;
	}

	.gb-blog-body__inner,
	.gb-blog-body--no-toc .gb-blog-body__inner {
		grid-template-columns: 45px minmax(0, 1fr);
		column-gap: 32px;
		padding-right: 20px;
		padding-left: 20px;
	}

	.gb-blog-content {
		grid-column: 2;
	}

	.gb-blog-toc {
		grid-column: 1 / -1;
		order: -1;
	}

	.gb-blog-toc__box {
		position: static;
		margin-bottom: 32px;
	}

	.gb-blog-author__card {
		height: auto;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 28px;
	}

	.gb-blog-author__qr {
		display: none;
	}

	.gb-blog-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.gb-blog-photo-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gb-blog-content .gb-blog-photo-row .wp-block-image {
		width: 100%;
		height: auto;
		aspect-ratio: 272 / 282;
	}

	.gb-blog-media-split,
	.gb-blog-media-split--image-left,
	.gb-blog-media-split--image-right {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.gb-blog-content .gb-blog-wide-photo {
		width: 100%;
		height: auto;
		aspect-ratio: 801 / 366;
	}
}

@media (max-width: 720px) {
	.single-post .gb-cta-panels--single .gb-cta-panels__band {
		min-height: 0;
		padding: 2rem 1.5rem;
	}

	.gb-blog-rcard:nth-child(3) {
		transform: none;
	}

	.gb-blog-crumb__inner {
		padding-right: 20px;
		padding-left: 20px;
	}
	.gb-blog-hero__title {
		font-size: 34px;
		line-height: 1.2;
	}

	.gb-blog-hero__date {
		margin-left: 0;
	}

	.gb-blog-hero__byline {
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.gb-blog-body__inner,
	.gb-blog-body--no-toc .gb-blog-body__inner {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.gb-blog-content {
		grid-column: 1;
	}

	.gb-blog-share {
		grid-column: 1;
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.gb-blog-share__list {
		flex-direction: row;
		margin-bottom: 0;
	}

	.gb-blog-share__rule {
		width: 40px;
		height: 2px;
		margin: 0 6px;
	}

	.gb-blog-share__label {
		writing-mode: horizontal-tb;
	}

	.gb-blog-content p,
	.gb-blog-content ul,
	.gb-blog-content ol {
		font-size: 17px;
	}

	.gb-blog-author__card {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 32px 24px;
	}

	.gb-blog-author__photo {
		margin: 0 auto;
	}

	.gb-blog-author__social {
		justify-content: center;
	}

	.gb-blog-related__heading {
		font-size: 32px;
	}

	.gb-blog-related__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Generic legal/info page prose (Privacy Policy, SMS Consent,
   Suggestions, etc.) — a simple centered content column used on plain
   pages that are just page-hero + body copy, not a purpose-built block
   layout. Scoped to its own wrapper (not .page-content generally) so it
   doesn't affect Contact/Quote, which also use page.php but need their
   hero and blocks to stay full-width. */
.gb-legal-content {
	padding: 4rem 1.25rem 5rem;
}

.gb-legal-content__inner {
	max-width: 900px;
	margin: 0 auto;
}

.gb-legal-content__inner > h1 {
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	color: var(--gb-navy);
	margin: 0 0 24px;
}

.gb-legal-content__inner > h2 {
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.3;
	color: var(--gb-navy);
	margin: 40px 0 16px;
	scroll-margin-top: 120px;
}

.gb-legal-content__inner > h3 {
	font-family: var(--gb-font-subheading);
	font-size: 19px;
	line-height: 1.3;
	color: var(--gb-navy);
	margin: 28px 0 12px;
}

.gb-legal-content__inner > p,
.gb-legal-content__inner > ul,
.gb-legal-content__inner > ol {
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 26px;
	color: #313131;
	margin: 0 0 20px;
}

.gb-legal-content__inner > ul,
.gb-legal-content__inner > ol {
	padding-left: 1.4em;
}

.gb-legal-content__inner li {
	margin-bottom: 8px;
}

.gb-legal-content__inner a {
	color: var(--gb-indigo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gb-legal-content__inner strong {
	color: var(--gb-navy);
}

.gb-legal-content__inner .gb-legal-toc {
	background: #f2f2f4;
	border-radius: 12px;
	padding: 24px 28px;
	margin: 0 0 32px;
}

.gb-legal-content__inner .gb-legal-toc a {
	display: block;
	margin-bottom: 8px;
	text-decoration: none;
}

.gb-legal-content__inner .gb-legal-toc a:hover {
	text-decoration: underline;
}

.gb-legal-content__inner .gb-legal-attribution {
	font-size: 13px;
	color: #767676;
}

@media (max-width: 767px) {
	.gb-legal-content {
		padding: 2.5rem 1.25rem 3.5rem;
	}

	.gb-legal-content__inner > h1 {
		font-size: 28px;
	}

	.gb-legal-content__inner > h2 {
		font-size: 22px;
	}
}

/* --- Podcasts page (/podcasts/) --- */
.gb-podcasts {
	padding: 4.5rem 1.25rem 6rem;
	background: var(--gb-light);
}

.gb-podcasts__inner {
	max-width: var(--gb-content);
	margin: 0 auto;
}

.gb-podcasts__intro {
	max-width: 760px;
	font-family: var(--gb-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: #313131;
	margin: 0 0 3.5rem;
}

.gb-podcast-card {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 2.5rem;
	align-items: center;
	background: var(--gb-white);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(16, 35, 63, 0.08);
	padding: 2.5rem;
	margin-bottom: 2.5rem;
}

.gb-podcast-card--reverse {
	grid-template-columns: 1fr 340px;
}

.gb-podcast-card--reverse .gb-podcast-card__media {
	order: 2;
}

.gb-podcast-card__media img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	display: block;
	box-shadow: 0 12px 24px rgba(16, 35, 63, 0.16);
}

.gb-podcast-card__title {
	display: flex;
	flex-direction: column;
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--gb-navy);
	margin: 0 0 14px;
}

.gb-podcast-card__title span {
	font-family: var(--gb-font-subheading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-gold);
	margin-top: 6px;
}

.gb-podcast-card__desc {
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: #4a4a4a;
	margin: 0 0 20px;
}

.gb-podcast-card__embed {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: 0 4px 14px rgba(16, 35, 63, 0.1);
}

.gb-podcast-card__embed iframe {
	display: block;
}

@media (max-width: 900px) {
	.gb-podcast-card,
	.gb-podcast-card--reverse {
		grid-template-columns: 1fr;
		padding: 1.75rem;
		gap: 1.5rem;
	}

	.gb-podcast-card--reverse .gb-podcast-card__media {
		order: 0;
	}

	.gb-podcast-card__media img {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ---------- 404 page ---------- */
.gb-404 {
	background: var(--gb-navy);
	padding: 6rem 1.25rem 7rem;
	position: relative;
	overflow: hidden;
}

.gb-404::before {
	content: "404";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--gb-font-display);
	font-size: clamp(10rem, 28vw, 22rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.04);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.gb-404__inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.gb-404__eyebrow {
	font-family: var(--gb-font-subheading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gb-gold);
	margin: 0 0 1.25rem;
}

.gb-404__heading {
	font-family: var(--gb-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.15;
	color: var(--gb-white);
	margin: 0 0 1.25rem;
}

.gb-404__text {
	font-family: var(--gb-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 2.25rem;
}

.gb-404__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 2.75rem;
}

.gb-404__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 28px;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.gb-404__links a {
	font-family: var(--gb-font-subheading);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.gb-404__links a:hover,
.gb-404__links a:focus-visible {
	color: var(--gb-gold);
	border-color: var(--gb-gold);
}

@media (max-width: 560px) {
	.gb-404 {
		padding: 4.5rem 1.25rem 5rem;
	}
	.gb-404__actions {
		flex-direction: column;
		align-items: center;
	}
}