/**
 * Gowhar Balkh — theme styles.
 *
 * Tokens come from theme.json (--wp--preset--*). Everything here is layout,
 * section styling and component detail that theme.json cannot express.
 */

:root {
	--gb-ink: #111111;
	--gb-charcoal: #202020;
	--gb-gold: #c8a34d;
	--gb-gold-light: #e2c779;
	--gb-gold-ink: #8a6a1f;
	--gb-warm: #f7f6f2;
	--gb-body: #555555;
	--gb-hairline: #e3dfd5;
	--gb-on-dark: rgba(255, 255, 255, 0.76);
	--gb-on-dark-soft: rgba(255, 255, 255, 0.58);
	--gb-header-h: 86px;
	--gb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- base */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

::selection {
	background: var(--gb-gold-light);
	color: var(--gb-ink);
}

:focus-visible {
	outline: 2px solid var(--gb-gold-ink);
	outline-offset: 3px;
}

.gb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.85rem 1.4rem;
	background: var(--gb-gold);
	color: var(--gb-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.gb-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

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

/* Core gives every direct child of the site wrapper a block-gap margin; the
   header, main and footer supply their own spacing instead. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Constrained layouts centre any child narrower than the content width, with
   !important in core's own rule. These measures belong against the left edge
   of their column, so the override has to match. */
.gb-lede,
.gb-note,
.gb-measure,
.gb-section-head,
.gb-hero__sub,
.gb-hero__support,
.gb-pagehero p {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------ typography */

.gb-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gb-gold-ink);
	margin-bottom: 0.75rem;
}

.gb-eyebrow + h1,
.gb-eyebrow + h2,
.gb-eyebrow + h3 {
	margin-top: 0;
}

.gb-lede {
	font-size: clamp(1.1rem, 0.4vw + 1.02rem, 1.3125rem);
	line-height: 1.62;
	color: #3f3f3f;
	max-width: 62ch;
}

.gb-measure {
	max-width: 68ch;
}

/* A thin gold rule used to open sections. */
.gb-rule {
	width: 64px;
	height: 2px;
	background: var(--gb-gold);
	border: 0;
	margin: 0 0 1.75rem;
	opacity: 1;
}

.gb-rule.is-centered {
	margin-inline: auto;
}

/* Quiet "subject to confirmation" notes — deliberately understated. */
.gb-note {
	font-size: 0.9rem;
	line-height: 1.62;
	color: #6b6b6b;
	border-left: 2px solid var(--gb-gold);
	padding-left: 1.1rem;
	max-width: 70ch;
}

.gb-section--ink .gb-note,
.gb-hero .gb-note {
	color: var(--gb-on-dark-soft);
}

/* ------------------------------------------------------------- sections */

.gb-section {
	padding-block: clamp(3.75rem, 7.5vw, 6.5rem);
}

.gb-section--tight {
	padding-block: clamp(2.75rem, 5vw, 4rem);
}

.gb-section--warm {
	background: var(--gb-warm);
}

.gb-section--ink {
	background: var(--gb-ink);
	color: var(--gb-on-dark);
}

.gb-section--ink :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.gb-section--ink .gb-eyebrow {
	color: var(--gb-gold);
}

.gb-section--ink p {
	color: var(--gb-on-dark);
}

.gb-section--ink a:not(.wp-element-button) {
	color: var(--gb-gold-light);
}

.gb-section-head {
	max-width: 70ch;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* --------------------------------------------------------------- header */

.gb-header {
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--gb-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--gb-header-h);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

.gb-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	flex: 0 0 auto;
}

.gb-brand:hover,
.gb-brand:focus {
	text-decoration: none;
}

.gb-brand__mark {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	display: block;
	/* The supplied logo file is square with black corners. Masking it to a
	   circle shows the mark as designed without altering the file. */
	border-radius: 50%;
	object-fit: cover;
	background: #000;
}

.gb-brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	line-height: 1;
}

.gb-brand__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.gb-brand__group {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gb-gold);
}

.gb-header__right {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* Navigation ---------------------------------------------------------- */

.gb-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
}

.gb-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	padding-block: 0.35rem;
}

.gb-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--gb-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.38s var(--gb-ease);
}

.gb-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.gb-header .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: #fff;
	text-decoration: none;
}

.gb-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.gb-header .wp-block-navigation .wp-block-navigation-item__content:focus::after,
.gb-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.gb-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: #fff;
}

.gb-header .wp-block-navigation :focus-visible {
	outline-color: var(--gb-gold-light);
}

/* Header CTA ---------------------------------------------------------- */

.gb-header .gb-cta .wp-element-button,
.gb-header .gb-cta .wp-block-button__link {
	background: transparent;
	color: var(--gb-gold);
	border: 1px solid var(--gb-gold);
	padding: 0.72rem 1.3rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transition: background-color 0.3s var(--gb-ease), color 0.3s var(--gb-ease);
}

.gb-header .gb-cta .wp-element-button:hover,
.gb-header .gb-cta .wp-element-button:focus {
	background: var(--gb-gold);
	color: var(--gb-ink);
}

/* Mobile / tablet overlay: the seven-item menu needs more room than the
   core 600px breakpoint allows. */
@media (max-width: 1100px) {
	.gb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		color: #fff;
	}

	.gb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.gb-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		background: var(--gb-ink);
		padding: clamp(1.5rem, 6vw, 3rem);
	}

	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		gap: 0.35rem;
		width: 100%;
	}

	/* The desktop menu is right-justified; inside the overlay the links read
	   better flush left. Core's generated layout rule wins without this. */
	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		width: 100%;
	}

	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		width: 100%;
	}

	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--serif);
		font-size: 1.375rem;
		padding-block: 0.85rem;
		width: 100%;
	}

	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		display: none;
	}

	.gb-header .wp-block-navigation__responsive-container-close {
		color: #fff;
	}
}

@media (max-width: 560px) {
	.gb-brand__name {
		font-size: 0.9375rem;
		letter-spacing: 0.08em;
	}

	.gb-brand__mark {
		width: 40px;
		height: 40px;
	}

	.gb-header .gb-cta {
		display: none;
	}
}

/* ----------------------------------------------------------------- hero */

.gb-hero {
	position: relative;
	isolation: isolate;
	background: var(--gb-ink);
	color: var(--gb-on-dark);
	overflow: hidden;
	padding-block: clamp(4.5rem, 11vw, 8.5rem);
}

/* Fine gold hairlines on the diagonal — a brand motif, not a stock photo. */
.gb-hero::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -2;
	background-image: repeating-linear-gradient(
		-52deg,
		rgba(200, 163, 77, 0.5) 0,
		rgba(200, 163, 77, 0.5) 1px,
		transparent 1px,
		transparent 26px
	);
	opacity: 0.16;
}

.gb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(118% 92% at 14% 8%, rgba(32, 32, 32, 0.1) 0%, rgba(17, 17, 17, 0.88) 58%, #111 100%);
}

.gb-hero :is(h1, h2, h3) {
	color: #fff;
}

.gb-hero .gb-eyebrow {
	color: var(--gb-gold);
}

.gb-hero__inner {
	max-width: 54rem;
}

.gb-hero h1 {
	margin-bottom: 1.5rem;
}

.gb-hero__sub {
	font-size: clamp(1.125rem, 0.5vw + 1.02rem, 1.375rem);
	line-height: 1.58;
	color: rgba(255, 255, 255, 0.84);
	max-width: 46ch;
}

.gb-hero__support {
	font-size: 1rem;
	color: var(--gb-on-dark-soft);
	max-width: 56ch;
}

.gb-hero .wp-block-buttons {
	margin-top: 2.5rem;
	gap: 0.85rem 1rem;
}

/* Outline variant used for the secondary call to action. */
.gb-btn-outline .wp-element-button,
.gb-btn-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.38);
	transition: border-color 0.3s var(--gb-ease), background-color 0.3s var(--gb-ease);
}

.gb-btn-outline .wp-element-button:hover,
.gb-btn-outline .wp-element-button:focus {
	border-color: var(--gb-gold);
	background: rgba(200, 163, 77, 0.12);
	color: #fff;
}

.gb-section:not(.gb-section--ink) .gb-btn-outline .wp-element-button {
	color: var(--gb-ink);
	border-color: rgba(17, 17, 17, 0.28);
}

.gb-section:not(.gb-section--ink) .gb-btn-outline .wp-element-button:hover {
	border-color: var(--gb-gold-ink);
	background: rgba(200, 163, 77, 0.12);
}

/* Compact hero for interior pages. */
.gb-pagehero {
	position: relative;
	isolation: isolate;
	/* background-color, not the shorthand: each page's photograph is set in an
	   inline style and a shorthand here would reset it to none. */
	background-color: var(--gb-ink);
	color: var(--gb-on-dark);
	overflow: hidden;
	padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.gb-pagehero::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -2;
	background-image: repeating-linear-gradient(
		-52deg,
		rgba(200, 163, 77, 0.5) 0,
		rgba(200, 163, 77, 0.5) 1px,
		transparent 1px,
		transparent 30px
	);
	opacity: 0.12;
}

.gb-pagehero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(110% 100% at 10% 0%, rgba(32, 32, 32, 0.2) 0%, rgba(17, 17, 17, 0.9) 60%, #111 100%);
}

.gb-pagehero :is(h1, h2) {
	color: #fff;
}

.gb-pagehero .gb-eyebrow {
	color: var(--gb-gold);
}

.gb-pagehero__inner {
	max-width: 52rem;
}

.gb-pagehero p {
	color: rgba(255, 255, 255, 0.8);
	max-width: 60ch;
}

/* ---------------------------------------------------------------- grids */

.gb-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.gb-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.gb-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

/* Neutralise the flow-layout margins core adds to grouped children. */
.gb-grid > * {
	margin-block: 0 !important;
}

/* ---------------------------------------------------------------- cards */

.gb-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--gb-hairline);
	border-radius: 2px;
	padding: clamp(1.5rem, 2.2vw, 2.1rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	transition: border-color 0.35s var(--gb-ease), box-shadow 0.35s var(--gb-ease),
		transform 0.35s var(--gb-ease);
}

.gb-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gb-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--gb-ease);
}

.gb-card:hover {
	border-color: #d8d1bd;
	box-shadow: 0 22px 44px -32px rgba(17, 17, 17, 0.35);
	transform: translateY(-2px);
}

.gb-card:hover::before,
.gb-card:focus-within::before {
	transform: scaleX(1);
}

.gb-card :is(h2, h3, h4) {
	margin: 0;
	font-size: 1.25rem;
}

.gb-card p {
	margin: 0;
	font-size: 0.9875rem;
	line-height: 1.68;
	color: var(--gb-body);
}

.gb-card .gb-card__index,
.gb-card__index {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--gb-gold-ink);
	margin: 0;
}

.gb-section--ink .gb-card {
	background: var(--gb-charcoal);
	border-color: rgba(255, 255, 255, 0.1);
}

.gb-section--ink .gb-card p {
	color: var(--gb-on-dark);
}

.gb-section--ink .gb-card__index {
	color: var(--gb-gold);
}

.gb-section--ink .gb-card:hover {
	border-color: rgba(200, 163, 77, 0.45);
	box-shadow: none;
}

/* Product cards carry a serif numeral instead of an invented photograph. */
.gb-product {
	padding-top: clamp(1.75rem, 2.4vw, 2.4rem);
}

.gb-card .gb-product__num,
.gb-product__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--gb-gold);
	margin: 0 0 0.35rem;
}

/* --------------------------------------------------------------- panels */

/* Decorative brand panel: typography and the gold motif, nothing implied. */
.gb-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--gb-charcoal);
	border-radius: 2px;
	padding: clamp(2.25rem, 5vw, 4rem);
	color: var(--gb-on-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 19rem;
}

.gb-panel::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	background-image: repeating-linear-gradient(
		-52deg,
		rgba(200, 163, 77, 0.45) 0,
		rgba(200, 163, 77, 0.45) 1px,
		transparent 1px,
		transparent 22px
	);
	opacity: 0.18;
}

.gb-panel :is(h2, h3, p) {
	color: #fff;
}

.gb-motto {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.25;
	color: var(--gb-gold);
	letter-spacing: 0.01em;
	margin: 0;
}

.gb-motto--sm {
	font-size: 1.125rem;
}

/* Key-value rows used for markets, corridors and contact details. */
.gb-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--gb-hairline);
}

.gb-facts li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--gb-hairline);
	font-size: 1rem;
}

.gb-facts li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: 0.62rem;
	background: var(--gb-gold);
	flex: 0 0 auto;
}

.gb-section--ink .gb-facts,
.gb-section--ink .gb-facts li {
	border-color: rgba(255, 255, 255, 0.12);
}

/* Optional slot for client photography, used only by the opt-in pattern. */
.gb-media figure,
.gb-media img {
	border-radius: 2px;
	margin: 0;
}

/* --------------------------------------------------------------- footer */

.gb-footer {
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	background: var(--gb-ink);
	color: var(--gb-on-dark);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
	font-size: 0.9375rem;
}

.gb-footer :is(h2, h3, h4) {
	color: #fff;
}

.gb-footer p {
	color: var(--gb-on-dark);
}

.gb-footer__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1.6fr 1fr 1fr;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

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

	.gb-footer__brand {
		grid-column: 1 / -1;
	}
}

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

.gb-footer__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gb-gold);
	margin: 0 0 1.1rem;
}

.gb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

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

.gb-footer a:hover,
.gb-footer a:focus {
	color: var(--gb-gold-light);
	text-decoration: underline;
}

.gb-footer :focus-visible {
	outline-color: var(--gb-gold-light);
}

.gb-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.8125rem;
	color: var(--gb-on-dark-soft);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

/* ----------------------------------------------------------------- form */

.gb-form {
	background: #fff;
	border: 1px solid var(--gb-hairline);
	border-radius: 2px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.gb-form__grid {
	display: grid;
	gap: 1.1rem 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.gb-field--full {
	grid-column: 1 / -1;
}

.gb-field label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #333;
	margin-bottom: 0.45rem;
}

.gb-field .gb-req {
	color: var(--gb-gold-ink);
	margin-left: 0.15rem;
}

.gb-field input,
.gb-field select,
.gb-field textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--gb-ink);
	background: #fff;
	border: 1px solid #d9d5c9;
	border-radius: 2px;
	padding: 0.8rem 0.95rem;
	transition: border-color 0.25s var(--gb-ease), box-shadow 0.25s var(--gb-ease);
}

.gb-field textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.gb-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	padding-right: 2.5rem;
}

.gb-field input:hover,
.gb-field select:hover,
.gb-field textarea:hover {
	border-color: #c4bda6;
}

.gb-field input:focus,
.gb-field select:focus,
.gb-field textarea:focus {
	outline: none;
	border-color: var(--gb-gold-ink);
	box-shadow: 0 0 0 3px rgba(200, 163, 77, 0.22);
}

.gb-field__hint {
	display: block;
	font-size: 0.8125rem;
	color: #6f6f6f;
	margin-top: 0.4rem;
}

.gb-field__error {
	display: none;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #96251f;
	margin-top: 0.4rem;
}

.gb-field.has-error input,
.gb-field.has-error select,
.gb-field.has-error textarea {
	border-color: #96251f;
	background: #fffafa;
}

.gb-field.has-error .gb-field__error {
	display: block;
}

.gb-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.gb-consent input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.22rem;
	flex: 0 0 auto;
	accent-color: var(--gb-gold-ink);
}

.gb-consent label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--gb-body);
	margin: 0;
	line-height: 1.6;
}

/* Honeypot — hidden from people, reachable by naive bots. */
.gb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gb-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.gb-submit {
	position: relative;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-ink);
	background: var(--gb-gold);
	border: 1px solid var(--gb-gold);
	border-radius: 2px;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: background-color 0.3s var(--gb-ease);
}

.gb-submit:hover:not([disabled]),
.gb-submit:focus:not([disabled]) {
	background: var(--gb-gold-light);
}

.gb-submit[disabled] {
	opacity: 0.68;
	cursor: progress;
}

.gb-spinner {
	display: none;
	width: 0.95rem;
	height: 0.95rem;
	margin-right: 0.6rem;
	vertical-align: -2px;
	border: 2px solid rgba(17, 17, 17, 0.25);
	border-top-color: var(--gb-ink);
	border-radius: 50%;
	animation: gb-spin 0.7s linear infinite;
}

.is-sending .gb-spinner {
	display: inline-block;
}

@keyframes gb-spin {
	to {
		transform: rotate(360deg);
	}
}

.gb-form__status {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.gb-form__status:empty {
	margin-top: 0;
}

.gb-form__status.is-error {
	color: #96251f;
	border-left: 2px solid #96251f;
	padding-left: 1rem;
}

.gb-form__success {
	border: 1px solid var(--gb-gold);
	border-left-width: 3px;
	background: #fffdf7;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 2px;
}

.gb-form__success h3 {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.gb-form__success p {
	margin: 0;
	color: var(--gb-body);
}

/* ------------------------------------------------------- misc / utility */

.gb-contact-grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: 1fr 1.15fr;
	align-items: start;
}

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

.gb-prose > * + * {
	margin-top: 1.15rem;
}

.gb-prose h3 {
	margin-top: 2.5rem;
}

.wp-block-separator.gb-sep {
	border: 0;
	border-top: 1px solid var(--gb-hairline);
	margin-block: clamp(2rem, 4vw, 3rem);
	opacity: 1;
	max-width: none;
}

.gb-section--ink .wp-block-separator.gb-sep {
	border-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================================ visuals */

/* ----------------------------------------------------------- line icons */

.gb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	color: var(--gb-gold-ink);
	background: #fff;
	border: 1px solid var(--gb-hairline);
	border-radius: 2px;
	margin-bottom: 0.35rem;
	transition: color 0.35s var(--gb-ease), border-color 0.35s var(--gb-ease),
		background-color 0.35s var(--gb-ease), transform 0.35s var(--gb-ease);
}

.gb-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.gb-card:hover .gb-icon,
.gb-card:focus-within .gb-icon {
	border-color: var(--gb-gold);
	background: #fffdf6;
	transform: translateY(-2px);
}

.gb-section--ink .gb-icon,
.gb-pagehero .gb-icon {
	color: var(--gb-gold);
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
}

.gb-section--ink .gb-card:hover .gb-icon {
	border-color: rgba(200, 163, 77, 0.6);
	background: rgba(200, 163, 77, 0.1);
}

/* Columns layouts (Business Activities, Group Companies) sit the icon above
   the index label. */
.wp-block-column > .gb-icon {
	margin-bottom: 0.9rem;
}

/* --------------------------------------------------------- hero diagram */

.gb-hero {
	background-color: var(--gb-ink);
	background-image: var(--gb-hero-image, none);
	background-size: cover;
	background-position: center;
}

.gb-hero::after {
	background: var(
		--gb-hero-overlay,
		radial-gradient(118% 92% at 14% 8%, rgba(32, 32, 32, 0.1) 0%, rgba(17, 17, 17, 0.88) 58%, #111 100%)
	);
}

.gb-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
}

.gb-hero__art {
	position: relative;
	width: 100%;
}

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

.gb-hero__spin {
	transform-origin: 210px 210px;
	animation: gb-rotate 70s linear infinite;
}

.gb-hero__node {
	animation: gb-node 3.6s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.gb-hero__node--2 {
	animation-delay: 0.6s;
}

.gb-hero__node--3 {
	animation-delay: 1.2s;
}

@keyframes gb-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes gb-node {
	0%,
	100% {
		opacity: 0.55;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.25);
	}
}

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

	.gb-hero__art {
		max-width: 290px;
		margin: 2.25rem auto 0;
		opacity: 0.92;
	}
}

/* ------------------------------------------------------------ trade map */

.gb-map {
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
	background: var(--gb-charcoal);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	padding: clamp(1rem, 3vw, 2rem);
	overflow: hidden;
}

.gb-map__svg {
	width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
	max-width: 860px;
}

.gb-map__link path {
	animation: gb-flow 2.6s linear infinite;
}

@keyframes gb-flow {
	to {
		stroke-dashoffset: -32;
	}
}

.gb-map__pulse {
	transform-box: fill-box;
	transform-origin: center;
	animation: gb-ping 3s ease-out infinite;
}

@keyframes gb-ping {
	0% {
		transform: scale(1);
		opacity: 0.85;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

.gb-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.75rem;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.66);
}

.gb-map__key {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
}

.gb-map__key::before {
	content: "";
	width: 28px;
	border-top: 2px dashed var(--gb-gold);
	opacity: 0.8;
}

.gb-map__key--corridor::before {
	border-top: 3px solid var(--gb-gold-light);
	opacity: 1;
}

/* The wide diagram cannot shrink to a phone without the labels becoming
   unreadable, so small screens get a stacked route rail instead. */
.gb-map__rail {
	display: none;
}

@media (max-width: 700px) {
	.gb-map__svg {
		display: none;
	}

	.gb-map__rail {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0.25rem 0 0 1.5rem;
		counter-reset: none;
	}

	.gb-map__rail li {
		position: relative;
		padding: 0 0 1.4rem 1.5rem;
		color: rgba(255, 255, 255, 0.82);
		font-size: 1rem;
	}

	.gb-map__rail li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.42rem;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--gb-gold);
	}

	.gb-map__rail li::after {
		content: "";
		position: absolute;
		left: 4px;
		top: 1.1rem;
		bottom: 0;
		border-left: 2px dashed rgba(200, 163, 77, 0.55);
	}

	.gb-map__rail li:last-child::after {
		display: none;
	}

	.gb-map__rail li.is-corridor::after,
	.gb-map__rail li.is-home::after {
		border-left: 3px solid var(--gb-gold-light);
	}

	.gb-map__rail li.is-home {
		font-weight: 600;
		color: #fff;
	}

	.gb-map__rail li.is-home::before {
		width: 13px;
		height: 13px;
		left: -2px;
		top: 0.35rem;
		background: var(--gb-gold-light);
	}

	.gb-map__rail small {
		display: block;
		font-size: 0.8125rem;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.55);
	}
}

/* ----------------------------------------------------- client photography */

.gb-gallery {
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.gb-photo {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--gb-charcoal);
}

.gb-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
	transition: transform 0.7s var(--gb-ease);
}

.gb-photo:hover img {
	transform: scale(1.04);
}

.gb-photo figcaption {
	font-size: 0.8125rem;
	color: #6f6f6f;
	padding-top: 0.6rem;
}

/* Three equal tiles: the minaret shots are portrait-leaning, so a wide
   hero tile would crop the tower badly. */
.gb-gallery {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.gb-project .gb-section-head {
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ------------------------------------------------------- scroll reveals */

.gb-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s var(--gb-ease), transform 0.55s var(--gb-ease);
	will-change: opacity, transform;
}

.gb-js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.gb-js [data-reveal][data-reveal-delay="1"] { transition-delay: 0.06s; }
.gb-js [data-reveal][data-reveal-delay="2"] { transition-delay: 0.12s; }
.gb-js [data-reveal][data-reveal-delay="3"] { transition-delay: 0.18s; }

/* --------------------------------------------------- header scroll state */

.gb-header {
	transition: background-color 0.35s var(--gb-ease), box-shadow 0.35s var(--gb-ease);
}

.gb-header.is-scrolled {
	background: rgba(17, 17, 17, 0.94);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------- button polish */

.wp-element-button {
	transition: background-color 0.3s var(--gb-ease), color 0.3s var(--gb-ease),
		transform 0.3s var(--gb-ease), box-shadow 0.3s var(--gb-ease);
}

.wp-block-button:not(.gb-btn-outline) .wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -18px rgba(200, 163, 77, 0.95);
}

/* ------------------------------------------------- form label alignment */

/* Two-line labels such as "Telephone / WhatsApp (optional)" used to push their
   input below the one beside it. Reserving two lines keeps every field on a
   row aligned; on one-column mobile there is nothing to align, so no gap. */
@media (min-width: 681px) {
	.gb-form__grid > .gb-field > label {
		min-height: 2.6em;
	}
}

.gb-field label {
	line-height: 1.3;
}

.gb-optional {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #8a8a8a;
}

.gb-consent label .gb-optional {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.gb-hero__spin,
	.gb-hero__node,
	.gb-map__link path,
	.gb-map__pulse,
	.gb-hero__traveller {
		animation: none !important;
	}
}

/* ===================================================== logistics styling */
/* A bolder, more commercial layout: utility bar, full-bleed photo hero, a
   floating facts card over the hero edge, centred section headers, service
   cards with circular icons, and a dark facts band. Brand palette unchanged. */

/* ------------------------------------------------------------ utility bar */

.gb-topbar {
	background: #0b0b0b;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.8125rem;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.gb-topbar__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.75rem;
	min-height: 46px;
}

.gb-topbar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.gb-topbar a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.gb-topbar a:hover,
.gb-topbar a:focus {
	color: var(--gb-gold-light);
}

.gb-topbar svg {
	width: 15px;
	height: 15px;
	color: var(--gb-gold);
	flex: 0 0 auto;
}

.gb-topbar__motto {
	color: var(--gb-gold);
	font-family: var(--wp--preset--font-family--serif);
	letter-spacing: 0.01em;
}

@media (max-width: 720px) {
	.gb-topbar__motto {
		display: none;
	}

	.gb-topbar__inner {
		justify-content: center;
	}
}

/* ------------------------------------------------------- full-bleed hero */

.gb-front .gb-hero {
	min-height: clamp(34rem, 76vh, 46rem);
	display: flex;
	align-items: center;
	padding-block: clamp(5rem, 12vh, 8rem) clamp(7rem, 14vh, 10rem);
}

.gb-front .gb-hero .gb-hero__layout {
	grid-template-columns: minmax(0, 1fr);
}

.gb-front .gb-hero__inner {
	max-width: 46rem;
}

.gb-hero h1 {
	text-wrap: balance;
}

/* Eyebrow with a leading gold rule, as on the reference. */
.gb-hero .gb-eyebrow,
.gb-pagehero .gb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}

.gb-hero .gb-eyebrow::before,
.gb-pagehero .gb-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--gb-gold);
	flex: 0 0 auto;
}

/* Secondary call to action reads as a link with an arrow. */
.gb-hero .gb-btn-outline .wp-element-button,
.gb-section .gb-btn-link .wp-element-button {
	background: transparent;
	border: 0;
	padding-inline: 0.25rem;
	color: #fff;
	text-decoration: none;
	position: relative;
}

.gb-hero .gb-btn-outline .wp-element-button::after,
.gb-section .gb-btn-link .wp-element-button::after {
	content: " →";
	color: var(--gb-gold);
	transition: transform 0.3s var(--gb-ease);
	display: inline-block;
	margin-left: 0.4rem;
}

.gb-hero .gb-btn-outline .wp-element-button:hover::after {
	transform: translateX(5px);
}

.gb-hero .gb-btn-outline .wp-element-button:hover,
.gb-hero .gb-btn-outline .wp-element-button:focus {
	background: transparent;
	color: var(--gb-gold-light);
}

/* ------------------------------------------------- floating facts card */

.gb-float {
	position: relative;
	z-index: 5;
	margin-top: clamp(-5.5rem, -7vw, -3.5rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	background: #fff;
	border: 1px solid var(--gb-hairline);
	border-top: 3px solid var(--gb-gold);
	border-radius: 2px;
	box-shadow: 0 32px 60px -40px rgba(17, 17, 17, 0.55);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	align-items: center;
}

.gb-float__item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.gb-float__item + .gb-float__item {
	border-left: 1px solid var(--gb-hairline);
	padding-left: clamp(1rem, 2vw, 1.75rem);
}

@media (max-width: 760px) {
	.gb-float__item + .gb-float__item {
		border-left: 0;
		border-top: 1px solid var(--gb-hairline);
		padding-left: 0;
		padding-top: 1.1rem;
	}
}

.gb-float__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gb-gold-ink);
	margin-bottom: 0.3rem;
}

.gb-float__value {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--gb-ink);
	line-height: 1.4;
}

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

.gb-float__value a:hover {
	color: var(--gb-gold-ink);
}

.gb-float .gb-icon {
	width: 42px;
	height: 42px;
	margin: 0;
	background: #fcf9f0;
	border-color: #ece3cd;
}

/* ------------------------------------------------- centred section heads */

.gb-section-head.is-centered {
	max-width: 46rem;
	margin-inline: auto !important;
	text-align: center;
}

.gb-section-head.is-centered .gb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
}

.gb-section-head.is-centered .gb-eyebrow::before,
.gb-section-head.is-centered .gb-eyebrow::after {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--gb-gold);
}

.gb-section-head.is-centered .gb-lede {
	margin-inline: auto !important;
}

/* ---------------------------------------------------- service card style */

.gb-card--service {
	text-align: left;
	padding: clamp(1.75rem, 2.6vw, 2.4rem);
}

.gb-card--service .gb-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fcf9f0;
	border-color: #ece3cd;
	margin-bottom: 1.1rem;
}

.gb-card--service .gb-icon svg {
	width: 30px;
	height: 30px;
}

.gb-card--service::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--gb-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.45s var(--gb-ease);
}

.gb-card--service:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.gb-card--service:hover .gb-icon {
	background: var(--gb-gold);
	border-color: var(--gb-gold);
	color: var(--gb-ink);
}

/* ------------------------------------------------------------ facts band */

.gb-band {
	background: var(--gb-charcoal);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.gb-band__item {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	position: relative;
}

.gb-band__item + .gb-band__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(0.6rem, 1.5vw, 1.1rem));
	top: 18%;
	bottom: 18%;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
	.gb-band__item + .gb-band__item::before {
		display: none;
	}
}

.gb-band .gb-icon {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--gb-gold);
	border-radius: 50%;
	width: 58px;
	height: 58px;
	margin-bottom: 0.65rem;
}

.gb-band__value {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.gb-band__label {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------- photo with floating badge */

.gb-figure {
	position: relative;
	margin: 0;
}

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

.gb-figure__badge {
	position: absolute;
	right: clamp(-0.5rem, -1vw, -1.5rem);
	bottom: clamp(1rem, 3vw, 2rem);
	background: var(--gb-gold);
	color: var(--gb-ink);
	padding: 1.1rem 1.4rem;
	border-radius: 2px;
	max-width: 15rem;
	box-shadow: 0 24px 44px -28px rgba(17, 17, 17, 0.7);
}

.gb-figure__badge strong {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	line-height: 1.25;
	margin-bottom: 0.2rem;
}

.gb-figure__badge span {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

@media (max-width: 600px) {
	.gb-figure__badge {
		position: static;
		max-width: none;
		margin-top: 0.75rem;
	}
}

/* Product cards carrying a real photograph. */
.gb-card--photo {
	padding: 0;
	overflow: hidden;
}

/* The photograph is a gb/figure block, so the crop rules target that. */
.gb-card--photo .gb-figure {
	overflow: hidden;
	border-radius: 0;
}

.gb-card--photo .gb-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.7s var(--gb-ease);
}

.gb-card--photo:hover .gb-figure img {
	transform: scale(1.05);
}

.gb-card--photo .gb-card__body {
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.gb-float__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gb-ink);
	color: #fff;
	border-radius: 2px;
	padding: 1rem 1.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	width: 100%;
	transition: background-color 0.3s var(--gb-ease), color 0.3s var(--gb-ease);
}

.gb-float__cta:hover,
.gb-float__cta:focus {
	background: var(--gb-gold);
	color: var(--gb-ink);
	text-decoration: none;
}

.gb-topbar__place {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* On a phone the headline sits over the brightest part of the photograph, so
   the overlay is darkened and flattened for contrast. */
@media (max-width: 860px) {
	.gb-front .gb-hero {
		--gb-hero-overlay: linear-gradient(
			180deg,
			rgba(17, 17, 17, 0.93) 0%,
			rgba(17, 17, 17, 0.82) 45%,
			rgba(17, 17, 17, 0.93) 100%
		);
	}

	.gb-front .gb-hero {
		min-height: auto;
		padding-block: clamp(3rem, 9vh, 4.5rem) clamp(5.5rem, 12vh, 7rem);
	}
}

/* ========================================================== hero slider */

.gb-slider {
	position: relative;
	isolation: isolate;
	background: var(--gb-ink);
	overflow: hidden;
}

.gb-slider__viewport {
	position: relative;
	display: grid;
}

.gb-slide {
	grid-area: 1 / 1;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	/* Sized so the slide, its arrows and its dots all fit above the fold
	   under the utility bar and header (about 132px together). */
	min-height: clamp(28rem, calc(100vh - 150px), 40rem);
	padding-block: clamp(2.75rem, 6vh, 4.25rem) clamp(4.5rem, 9vh, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--gb-ease), visibility 0.9s var(--gb-ease);
}

.gb-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* The photograph sits on the slide itself, so the inline style can offer a
   WebP through image-set() with the JPEG as fallback. A slow zoom on the
   visible slide keeps the hero from feeling static. */
.gb-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.gb-slide.is-active {
	animation: gb-kenburns 16s ease-out forwards;
}

@keyframes gb-kenburns {
	from {
		background-size: 104%;
	}
	to {
		background-size: 116%;
	}
}

.gb-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		95deg,
		rgba(17, 17, 17, 0.95) 0%,
		rgba(17, 17, 17, 0.82) 48%,
		rgba(17, 17, 17, 0.5) 100%
	);
}

.gb-slide__inner {
	max-width: 46rem;
	width: 100%;
	margin-inline: auto;
	max-width: min(46rem, var(--wp--style--global--wide-size));
	margin-right: auto;
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2));
}

.gb-slide__title {
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.04;
	/* Slightly tighter than the page display size, so the slide, its text,
	   its buttons and its controls all fit one screen. */
	font-size: clamp(2.25rem, 3.4vw + 1rem, 4rem);
	margin: 0 0 1.15rem;
	text-wrap: balance;
}

.gb-slide .gb-eyebrow {
	color: var(--gb-gold);
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}

.gb-slide .gb-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--gb-gold);
}

.gb-slide__text {
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
	line-height: 1.6;
	max-width: 44ch;
	margin: 0 0 1.9rem;
}

.gb-slide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.75rem;
	margin: 0;
}

.gb-slide__cta {
	display: inline-flex;
	align-items: center;
	background: var(--gb-gold);
	color: var(--gb-ink);
	border-radius: 2px;
	padding: 1.05rem 2rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s var(--gb-ease), transform 0.3s var(--gb-ease);
}

.gb-slide__cta:hover,
.gb-slide__cta:focus {
	background: var(--gb-gold-light);
	color: var(--gb-ink);
	transform: translateY(-2px);
	text-decoration: none;
}

.gb-slide__link {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.gb-slide__link::after {
	content: " →";
	color: var(--gb-gold);
	display: inline-block;
	margin-left: 0.4rem;
	transition: transform 0.3s var(--gb-ease);
}

.gb-slide__link:hover {
	color: var(--gb-gold-light);
	text-decoration: none;
}

.gb-slide__link:hover::after {
	transform: translateX(5px);
}

/* Controls ------------------------------------------------------------- */

/* Arrows ride the vertical centre of the slider, so they are in view
   whatever the hero's height; dots sit on the bottom edge. */
.gb-slider__nav {
	position: absolute;
	z-index: 4;
	right: clamp(1.25rem, 4vw, 2.5rem);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.gb-slider__arrow {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(17, 17, 17, 0.35);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color 0.3s var(--gb-ease), border-color 0.3s var(--gb-ease),
		color 0.3s var(--gb-ease);
}

.gb-slider__arrow svg {
	width: 22px;
	height: 22px;
}

.gb-slider__arrow:hover,
.gb-slider__arrow:focus-visible {
	background: var(--gb-gold);
	border-color: var(--gb-gold);
	color: var(--gb-ink);
}

.gb-slider__dots {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: clamp(1.5rem, 4vh, 2.5rem);
	margin-inline: auto;
	width: min(100%, var(--wp--style--global--wide-size));
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	display: flex;
	gap: 0.55rem;
}

.gb-slider__dot {
	width: 34px;
	height: 3px;
	border: 0;
	padding: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background-color 0.3s var(--gb-ease), width 0.3s var(--gb-ease);
}

.gb-slider__dot.is-active {
	background: var(--gb-gold);
	width: 52px;
}

/* Without JavaScript the controls do nothing, so they stay hidden. */
html:not(.gb-js) .gb-slider__nav,
html:not(.gb-js) .gb-slider__dots {
	display: none;
}

@media (max-width: 860px) {
	.gb-slide {
		min-height: auto;
		padding-block: clamp(3rem, 9vh, 4.5rem) clamp(6rem, 13vh, 7.5rem);
	}

	.gb-slide::after {
		background: linear-gradient(
			180deg,
			rgba(17, 17, 17, 0.92) 0%,
			rgba(17, 17, 17, 0.8) 42%,
			rgba(17, 17, 17, 0.94) 100%
		);
	}

	.gb-slider__nav {
		display: none;
	}

	.gb-slider__dots {
		bottom: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-slide.is-active {
		animation: none;
	}

	.gb-slide {
		transition: none;
	}
}

/* =================================================== layout system (v2) */
/* A single spacing and measure scale, applied everywhere, so the page has a
   predictable rhythm instead of ad-hoc gaps.
   Gutter:   24px phone / 40px tablet / 64px desktop
   Section:  72px phone / 104px tablet / 136px desktop
   Measure:  68ch body, 58ch lede, 46ch over photographs             */

:root {
	--gb-gutter: 1.5rem;
	--gb-section: 4.5rem;
	--gb-card-pad: 1.75rem;
}

@media (min-width: 768px) {
	:root {
		--gb-gutter: 2.5rem;
		--gb-section: 6.5rem;
		--gb-card-pad: 2rem;
	}
}

@media (min-width: 1200px) {
	:root {
		--gb-gutter: 4rem;
		--gb-section: 8.5rem;
		--gb-card-pad: 2.25rem;
	}
}

body {
	--wp--style--root--padding-left: var(--gb-gutter);
	--wp--style--root--padding-right: var(--gb-gutter);
}

.gb-section {
	padding-block: var(--gb-section);
}

.gb-section--tight {
	padding-block: calc(var(--gb-section) * 0.52);
}

.gb-header,
.gb-footer,
.gb-topbar {
	padding-inline: var(--gb-gutter);
}

.gb-section-head {
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.gb-lede {
	max-width: 58ch;
}

.gb-section p:not(.gb-lede):not(.gb-eyebrow):not(.gb-card__index) {
	max-width: 68ch;
}

.gb-card {
	padding: var(--gb-card-pad);
}

.gb-grid {
	gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* Full-bleed blocks escape the constrained content column. */
.gb-slider.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.gb-slide__inner {
	max-width: min(42rem, 100%);
	margin-left: max(var(--gb-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2));
	margin-right: var(--gb-gutter);
}

.gb-slide__text {
	max-width: 46ch;
}

/* ------------------------------------------------ vertical photo gallery */
/* The minaret is a tower; its photographs are cropped tall. */

.gb-shots {
	display: grid;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.gb-shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--gb-charcoal);
}

.gb-shot img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--gb-ease);
}

.gb-shot::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.88), rgba(10, 10, 10, 0));
	opacity: 0.9;
	transition: opacity 0.5s var(--gb-ease);
}

.gb-shot figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.25rem 1.35rem;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.45;
	transform: translateY(0.4rem);
	opacity: 0;
	transition: transform 0.5s var(--gb-ease), opacity 0.5s var(--gb-ease);
}

.gb-shot:hover img,
.gb-shot:focus-within img {
	transform: scale(1.06);
}

.gb-shot:hover figcaption,
.gb-shot:focus-within figcaption {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices never hover, so the caption is simply shown. */
@media (hover: none) {
	.gb-shot figcaption {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------- commodity tiles */

.gb-tiles {
	display: grid;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.gb-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(20rem, 32vw, 26rem);
	padding: 1.75rem;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
	background: var(--gb-charcoal);
}

.gb-tile .gb-figure,
.gb-tile figure {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.gb-tile .gb-figure img,
.gb-tile figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.8s var(--gb-ease);
}

.gb-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.92) 0%,
		rgba(10, 10, 10, 0.6) 42%,
		rgba(10, 10, 10, 0.15) 100%
	);
	transition: opacity 0.5s var(--gb-ease);
}

.gb-tile:hover .gb-figure img,
.gb-tile:hover figure img {
	transform: scale(1.06);
}

.gb-tile :is(h2, h3) {
	color: #fff;
	font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.5rem);
	margin: 0 0 0.45rem;
}

.gb-tile p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	max-width: 34ch;
}

.gb-tile .gb-card__index {
	color: var(--gb-gold);
	margin-bottom: 0.5rem;
}

/* A gold rule that grows on hover, the tile's only movement. */
.gb-tile::before {
	content: "";
	position: absolute;
	left: 1.75rem;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: var(--gb-gold);
	transform-origin: left center;
	transform: scaleX(1);
	transition: width 0.45s var(--gb-ease);
	z-index: 1;
}

.gb-tile:hover::before {
	width: calc(100% - 3.5rem);
}

/* ------------------------------------------- overlapping image composition */

.gb-compose {
	position: relative;
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	padding-right: clamp(2rem, 5vw, 4rem);
}

.gb-compose__main img {
	width: 100%;
	display: block;
	border-radius: 3px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gb-compose__inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(9rem, 38%, 15rem);
	border: 6px solid #fff;
	border-radius: 3px;
	box-shadow: 0 26px 50px -30px rgba(17, 17, 17, 0.6);
	margin: 0;
	overflow: hidden;
}

.gb-section--warm .gb-compose__inset {
	border-color: var(--gb-warm);
}

.gb-compose__inset img {
	width: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* A gold block anchoring the composition, as on the reference. */
.gb-compose__mark {
	position: absolute;
	left: 0;
	bottom: clamp(1rem, 3vw, 2.5rem);
	background: var(--gb-gold);
	color: var(--gb-ink);
	padding: 1.15rem 1.4rem;
	border-radius: 3px;
	max-width: 13rem;
	box-shadow: 0 24px 44px -28px rgba(17, 17, 17, 0.7);
}

.gb-compose__mark strong {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.25;
}

.gb-compose__mark span {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.8;
}

@media (max-width: 600px) {
	.gb-compose {
		padding-right: 0;
		padding-bottom: 0;
	}

	.gb-compose__inset,
	.gb-compose__mark {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 0.75rem;
		border-width: 0;
		box-shadow: none;
	}
}

/* ------------------------------------------------------------- checklist */

.gb-checklist {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.gb-checklist li {
	position: relative;
	padding-left: 2rem;
	font-size: 1rem;
	line-height: 1.55;
}

.gb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--gb-gold);
}

.gb-checklist li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.58rem;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--gb-gold-ink);
	border-bottom: 2px solid var(--gb-gold-ink);
	transform: rotate(45deg);
}

.gb-section--ink .gb-checklist li::after {
	border-color: var(--gb-gold);
}

/* ------------------------------------------------------------- CTA band */

.gb-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 3px;
	padding: clamp(2.5rem, 6vw, 4.5rem);
	color: #fff;
	text-align: center;
	background-color: var(--gb-ink);
	background-size: cover;
	background-position: center;
}

.gb-cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, rgba(17, 17, 17, 0.93), rgba(17, 17, 17, 0.72));
}

.gb-cta-band :is(h2, h3) {
	color: #fff;
}

.gb-cta-band p {
	color: rgba(255, 255, 255, 0.85);
	margin-inline: auto !important;
}

.gb-cta-band .gb-eyebrow {
	color: var(--gb-gold);
	justify-content: center;
}

.gb-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.gb-phone:hover {
	color: var(--gb-gold-light);
}

/* ----------------------------------------------------------- breadcrumb */

.gb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.62);
}

.gb-breadcrumb a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.gb-breadcrumb a:hover {
	color: var(--gb-gold-light);
}

.gb-breadcrumb span[aria-current] {
	color: var(--gb-gold);
}

.gb-breadcrumb li + li::before {
	content: "/";
	margin-right: 0.75rem;
	color: rgba(255, 255, 255, 0.3);
}

.gb-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------- footer polish */

.gb-footer {
	border-top: 3px solid var(--gb-gold);
	position: relative;
	isolation: isolate;
}

.gb-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		-52deg,
		rgba(200, 163, 77, 0.4) 0,
		rgba(200, 163, 77, 0.4) 1px,
		transparent 1px,
		transparent 34px
	);
	opacity: 0.07;
}

/* ------------------------------------------------- service card polish */

.gb-card--service {
	border: 0;
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 18px 40px -34px rgba(17, 17, 17, 0.5);
	background: #fff;
	overflow: hidden;
}

.gb-card--service::before {
	display: none;
}

/* A large, quiet numeral in the corner gives the card some weight. */
.gb-card--service .gb-card__index {
	position: absolute;
	top: 1.1rem;
	right: 1.4rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.75rem;
	letter-spacing: 0;
	color: rgba(17, 17, 17, 0.07);
	margin: 0;
}

.gb-section--ink .gb-card--service .gb-card__index {
	color: rgba(255, 255, 255, 0.09);
}

.gb-card--service:hover {
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06), 0 28px 50px -30px rgba(17, 17, 17, 0.45);
}

/* The seven-item menu plus the logo and CTA need more room than the wide
   page gutter leaves, so the header keeps its own tighter inline padding. */
.gb-header,
.gb-topbar {
	padding-inline: clamp(1.25rem, 2.6vw, 2.5rem);
}

.gb-header__inner {
	flex-wrap: nowrap;
	gap: clamp(0.75rem, 2vw, 2rem);
}

.gb-header .wp-block-navigation {
	flex-wrap: nowrap;
	font-size: clamp(0.8125rem, 0.65vw + 0.45rem, 0.9375rem);
}

.gb-header .wp-block-navigation__container {
	flex-wrap: nowrap;
}

.gb-header .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Below this width the menu becomes the overlay rather than being squeezed. */
@media (max-width: 1200px) {
	.gb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		color: #fff;
	}

	.gb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* ======================================================= gallery page */

.gb-gallery-grid {
	display: grid;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	grid-auto-rows: 14rem;
}

@media (min-width: 900px) {
	.gb-gallery-grid {
		grid-auto-rows: 16rem;
	}

	/* A simple editorial rhythm: every fourth tile is taller, every
	   seventh is wider. */
	.gb-gallery__item:nth-child(4n + 1) {
		grid-row: span 2;
	}

	.gb-gallery__item:nth-child(7n + 3) {
		grid-column: span 2;
	}
}

.gb-gallery__item {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--gb-charcoal);
}

.gb-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--gb-ease);
}

.gb-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0) 55%);
	opacity: 0;
	transition: opacity 0.4s var(--gb-ease);
}

.gb-gallery__item:hover img,
.gb-gallery__item:focus-visible img {
	transform: scale(1.05);
}

.gb-gallery__item:hover::after,
.gb-gallery__item:focus-visible::after {
	opacity: 1;
}

.gb-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1rem 1.1rem;
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity 0.4s var(--gb-ease), transform 0.4s var(--gb-ease);
}

.gb-gallery__item:hover .gb-gallery__caption,
.gb-gallery__item:focus-visible .gb-gallery__caption {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.gb-gallery__caption {
		opacity: 1;
		transform: none;
	}

	.gb-gallery__item::after {
		opacity: 1;
	}
}

/* Videos ---------------------------------------------------------------- */

.gb-videos {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	margin-top: clamp(2rem, 4vw, 3rem);
}

.gb-video {
	margin: 0;
	background: var(--gb-charcoal);
	border-radius: 3px;
	overflow: hidden;
}

.gb-video video {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}

.gb-video figcaption {
	padding: 0.95rem 1.15rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
}

/* Lightbox -------------------------------------------------------------- */

.gb-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(94vw, 1100px);
	max-height: 94vh;
	overflow: visible;
}

.gb-lightbox::backdrop {
	background: rgba(8, 8, 8, 0.92);
}

.gb-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	margin-inline: auto;
	border-radius: 3px;
}

.gb-lightbox__caption {
	color: rgba(255, 255, 255, 0.82);
	text-align: center;
	font-size: 0.9375rem;
	margin: 0.9rem 0 0;
}

.gb-lightbox__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.gb-lightbox__close:hover,
.gb-lightbox__close:focus-visible {
	background: var(--gb-gold);
	border-color: var(--gb-gold);
	color: var(--gb-ink);
}

/* ============================================ alignment + type scale (v3) */

/* ONE content column. Every direct child of a section — core blocks and the
   theme's own components alike — starts and ends on the same vertical lines.
   Wide components opt out with .is-wide. */

.gb-section > .gb-map,
.gb-section > .gb-shots,
.gb-section > .gb-tiles,
.gb-section > .gb-gallery-grid,
.gb-section > .gb-videos,
.gb-section > .gb-float,
.gb-section > .gb-band,
.gb-section > .gb-cta-band,
.gb-section > .gb-compose,
.gb-section > .gb-figure,
.gb-section > .gb-checklist {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	width: 100%;
}

.gb-section > .is-wide {
	max-width: var(--wp--style--global--wide-size);
}

/* Measures (lede, notes, prose) are narrower than the column but must still
   begin on its left edge — not on the section's padding edge. The max() keeps
   them flush left when they sit inside a narrower parent, such as a column. */
.gb-lede,
.gb-note,
.gb-measure,
.gb-section-head,
.gb-hero__sub,
.gb-hero__support,
.gb-pagehero p,
.gb-pagehero__inner,
.gb-section > p {
	/* Logical properties so the same rule aligns left in English and right in
	   Dari and Pashto. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Centred heads stay centred. */
.gb-section-head.is-centered {
	margin-inline: auto !important;
}

/* --------------------------------------------------------- type scale */
/* Body 17px, secondary text 16px, captions 15px, labels 12–13px.
   Nothing on the page drops below 15px except uppercase labels. */

.gb-card p,
.gb-tile p,
.gb-footer,
.gb-footer p,
.gb-video figcaption,
.gb-gallery__caption,
.gb-facts li {
	font-size: 1rem;
	line-height: 1.65;
}

.gb-note {
	font-size: 0.9375rem;
	line-height: 1.68;
}

.gb-field__hint,
.gb-field__error,
.gb-map__legend,
.gb-breadcrumb,
.gb-topbar {
	font-size: 0.875rem;
}

.gb-footer__bottom {
	font-size: 0.875rem;
}

.gb-card :is(h2, h3, h4) {
	font-size: clamp(1.1875rem, 0.6vw + 1rem, 1.375rem);
}

.gb-eyebrow,
.gb-card__index,
.gb-float__label,
.gb-footer__title,
.gb-band__label {
	font-size: 0.75rem;
}

/* The service card numeral is decoration, not a label. */
.gb-card--service .gb-card__index {
	font-size: 2.75rem;
}

/* WordPress does not set border-box on every element (figures among them),
   which made padded components overflow the content column. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ===================================== multilingual: Dari, Pashto, Russian */

/* Arabic-script text (Dari and Pashto) gets Noto Naskh Arabic, a touch larger
   because naskh runs visually smaller than Latin at the same size. */
/* The font-size bump belongs on the root only. Applied to :lang(fa) it would
   match every nested element and multiply 1.05 at each level, flattening the
   whole type scale. */
html[dir="rtl"],
html[lang|="fa"],
html[lang|="ps"] {
	font-size: 104%;
}

:lang(fa),
:lang(fa-AF),
:lang(ps),
[dir="rtl"] {
	font-family: "Noto Naskh Arabic", "Inter", system-ui, sans-serif;
}

[dir="rtl"] body,
html[lang|="fa"] body,
html[lang|="ps"] body {
	line-height: 1.85;
}

[dir="rtl"] :is(h1, h2, h3, h4, h5, h6),
:lang(fa) :is(h1, h2, h3, h4, h5, h6),
:lang(ps) :is(h1, h2, h3, h4, h5, h6) {
	font-family: "Noto Naskh Arabic", "Inter", system-ui, sans-serif;
	letter-spacing: 0;
	line-height: 1.5;
}

/* Cyrillic is covered by the bundled Inter, so Russian needs no extra font —
   only slightly looser tracking, which Cyrillic reads better with. */
:lang(ru) {
	letter-spacing: 0.005em;
}

:lang(ru) :is(h1, h2, h3) {
	letter-spacing: -0.015em;
}

/* ------------------------------------------------------- RTL direction */

[dir="rtl"] body {
	text-align: right;
}

[dir="rtl"] .gb-eyebrow::before,
[dir="rtl"] .gb-slide .gb-eyebrow::before,
[dir="rtl"] .gb-hero .gb-eyebrow::before,
[dir="rtl"] .gb-pagehero .gb-eyebrow::before {
	order: 2;
}

[dir="rtl"] .gb-rule {
	margin-inline: 0 auto;
}

[dir="rtl"] .gb-note {
	border-left: 0;
	border-right: 2px solid var(--gb-gold);
	padding-left: 0;
	padding-right: 1.1rem;
}

[dir="rtl"] .gb-checklist li {
	padding-left: 0;
	padding-right: 2rem;
}

[dir="rtl"] .gb-checklist li::before {
	left: auto;
	right: 0;
}

[dir="rtl"] .gb-checklist li::after {
	left: auto;
	right: 6px;
}

[dir="rtl"] .gb-facts li::before {
	order: 2;
}

[dir="rtl"] .gb-slide__inner {
	margin-right: max(var(--gb-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2));
	margin-left: var(--gb-gutter);
}

[dir="rtl"] .gb-slider__nav {
	right: auto;
	left: clamp(1.25rem, 4vw, 2.5rem);
}

[dir="rtl"] .gb-slider__arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .gb-slide__link::after,
[dir="rtl"] .gb-hero .gb-btn-outline .wp-element-button::after,
[dir="rtl"] .gb-section .gb-btn-link .wp-element-button::after {
	content: " ←";
	margin-left: 0;
	margin-right: 0.4rem;
}

[dir="rtl"] .gb-slide__link:hover::after,
[dir="rtl"] .gb-hero .gb-btn-outline .wp-element-button:hover::after {
	transform: translateX(-5px);
}

[dir="rtl"] .gb-tile::before {
	left: auto;
	right: 1.75rem;
	transform-origin: right center;
}

[dir="rtl"] .gb-compose {
	padding-right: 0;
	padding-left: clamp(2rem, 5vw, 4rem);
}

[dir="rtl"] .gb-compose__inset {
	right: auto;
	left: 0;
}

[dir="rtl"] .gb-compose__mark,
[dir="rtl"] .gb-figure__badge {
	left: auto;
	right: 0;
}

[dir="rtl"] .gb-card--service .gb-card__index {
	right: auto;
	left: 1.4rem;
}

[dir="rtl"] .gb-breadcrumb li + li::before {
	content: "\\\\";
	margin-right: 0;
	margin-left: 0.75rem;
}

[dir="rtl"] .gb-lightbox__close {
	right: auto;
	left: 0;
}

[dir="rtl"] .gb-float__item + .gb-float__item {
	border-left: 0;
	border-right: 1px solid var(--gb-hairline);
	padding-left: 0;
	padding-right: clamp(1rem, 2vw, 1.75rem);
}

[dir="rtl"] .gb-map__rail {
	padding: 0.25rem 1.5rem 0 0;
}

[dir="rtl"] .gb-map__rail li {
	padding: 0 1.5rem 1.4rem 0;
}

[dir="rtl"] .gb-map__rail li::before {
	left: auto;
	right: 0;
}

[dir="rtl"] .gb-map__rail li::after {
	left: auto;
	right: 4px;
	border-left: 0;
	border-right: 2px dashed rgba(200, 163, 77, 0.55);
}

[dir="rtl"] .gb-map__rail li.is-corridor::after,
[dir="rtl"] .gb-map__rail li.is-home::after {
	border-right: 3px solid var(--gb-gold-light);
}

/* The trade diagram is a map, not text: it keeps its own direction. */
[dir="rtl"] .gb-map__svg {
	direction: ltr;
}

/* --------------------------------------------------- language switcher */

.gb-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-lang li {
	margin: 0;
}

.gb-lang a,
.gb-lang span {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
	color: rgba(255, 255, 255, 0.66);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.gb-lang a:hover,
.gb-lang a:focus {
	color: var(--gb-gold-light);
}

.gb-lang .current-lang > *,
.gb-lang [aria-current="true"] {
	color: var(--gb-ink);
	background: var(--gb-gold);
}

/* Flex children default to min-width:auto and refuse to shrink, which pushed
   the navigation off-canvas once the wider Arabic-script labels were in use. */
.gb-header__inner,
.gb-header__right,
.gb-header .wp-block-navigation,
.gb-header .wp-block-navigation__responsive-container,
.gb-header .wp-block-navigation__container,
.gb-topbar__inner,
.gb-topbar__group {
	min-width: 0;
}

.gb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
	max-width: 100%;
}

/* Dari and Pashto labels are wider than their English equivalents, so the
   overlay menu takes over earlier. */
[dir="rtl"] .gb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: flex;
	color: #fff;
}

[dir="rtl"] .gb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none;
}

@media (min-width: 1400px) {
	[dir="rtl"] .gb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	[dir="rtl"] .gb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: flex;
	}
}

[dir="rtl"] .gb-topbar__inner {
	flex-wrap: wrap;
}

/* Hiding things at left:-9999px works in LTR but creates 9999px of scrollable
   page in RTL. Clipping hides them without affecting layout in either
   direction. */
.gb-skip-link {
	position: absolute;
	left: auto;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gb-skip-link:focus {
	position: fixed;
	inset-inline-start: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	clip-path: none;
	overflow: visible;
	padding: 0.85rem 1.4rem;
	z-index: 999;
}

.gb-hp {
	position: absolute !important;
	left: auto !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------- service cards with a photograph */

.gb-card--service > .gb-figure {
	margin: calc(-1 * var(--gb-card-pad)) calc(-1 * var(--gb-card-pad)) 0;
	width: calc(100% + 2 * var(--gb-card-pad));
	overflow: hidden;
}

.gb-card--service > .gb-figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.8s var(--gb-ease);
}

.gb-card--service:hover > .gb-figure img {
	transform: scale(1.05);
}

/* A logo is artwork, not a scene: contain it on the brand background. */
.gb-card--service > .gb-figure.is-logo img {
	object-fit: contain;
	background: var(--gb-ink);
	padding: 1.25rem;
}

/* The icon badge overlaps the photograph's lower edge. */
.gb-card--service > .gb-figure + .gb-icon {
	position: relative;
	z-index: 1;
	margin-top: -2.1rem;
	background: #fff;
	box-shadow: 0 10px 24px -16px rgba(17, 17, 17, 0.6);
}

/* The dark markets section needs its own card background for the badge. */
.gb-section--ink .gb-card--service > .gb-figure + .gb-icon {
	background: var(--gb-charcoal);
}

/* The map sits inside a column now, so it fills it. */
.wp-block-column > .gb-map {
	margin-bottom: 0;
}

/* ================================================ mobile header and menu */

/* The top bar costs two lines on a phone for information the overlay menu
   can carry better, so it is hidden there. */
@media (max-width: 782px) {
	.gb-topbar {
		display: none;
	}
}

/* Contact actions and the language choice, inside the overlay menu. */
.gb-menu-extras {
	display: none;
}

.gb-header .wp-block-navigation__responsive-container.is-menu-open .gb-menu-extras {
	display: block;
	width: 100%;
	margin-top: auto;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gb-menu-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.gb-menu-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color 0.25s var(--gb-ease), border-color 0.25s var(--gb-ease),
		color 0.25s var(--gb-ease);
}

.gb-menu-action svg {
	width: 18px;
	height: 18px;
	color: var(--gb-gold);
	flex: 0 0 auto;
	transition: color 0.25s var(--gb-ease);
}

.gb-menu-action:active,
.gb-menu-action:hover,
.gb-menu-action:focus-visible {
	background: var(--gb-gold);
	border-color: var(--gb-gold);
	color: var(--gb-ink);
	text-decoration: none;
}

.gb-menu-action:hover svg,
.gb-menu-action:focus-visible svg {
	color: var(--gb-ink);
}

/* Language pills: big tap targets, the current one filled gold. */
.gb-lang--menu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

.gb-lang--menu li {
	display: block;
}

.gb-lang--menu a,
.gb-lang--menu span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.5rem 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
}

.gb-lang--menu a:hover,
.gb-lang--menu a:focus-visible {
	border-color: var(--gb-gold);
	color: var(--gb-gold-light);
}

.gb-lang--menu .current-lang > * {
	background: var(--gb-gold);
	border-color: var(--gb-gold);
	color: var(--gb-ink);
}

/* The overlay becomes a column so the extras can sit at its foot. */
@media (max-width: 1200px) {
	.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start !important;
		min-height: 100%;
		width: 100%;
	}
}

/* Containers on dark backgrounds inherit the body's grey text colour, which
   would be unreadable if bare text were ever added to them. */
.gb-slide__actions,
.gb-header,
.gb-header__inner,
.gb-header__right,
.gb-topbar__inner,
.gb-hero,
.gb-pagehero {
	color: var(--gb-on-dark);
}