/* Giant Truss — About page */

.gt-about {
	--gt-amax: 1400px;
	--gt-narrow: 78ch;
	--gt-gut: clamp(16px, 4vw, 48px);
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	color: var(--gt-body, #4a4a4a);
	font-size: var(--gt-t-body, 16px);
	line-height: var(--gt-t-lh, 1.5);
}
.gt-about * { box-sizing: border-box; }

.gt-about h2 {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.15;
	color: var(--gt-title, #242424);
	margin: 0 0 18px;
}
.gt-about h3 {
	font-family: "Inter Tight", Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.3vw, 18px);
	color: var(--gt-title, #242424);
	margin: 14px 0 6px;
}
.gt-about p { margin: 0 0 14px; }
.gt-about-narrow { max-width: var(--gt-narrow); margin: 0 auto; }

/* Hero */
.gt-about-hero {
	position: relative;
	background: #101010 center/cover no-repeat;
	min-height: clamp(240px, 30vw, 400px);
	display: flex;
	align-items: center;
}
.gt-about-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.35) 100%);
}
.gt-about-hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--gt-amax);
	margin: 0 auto;
	width: 100%;
	padding: clamp(38px, 5vw, 70px) var(--gt-gut);
}
.gt-eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gt-purple, #7B4FF4);
	margin: 0 0 12px;
}
.gt-about-hero h1 {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.12;
	color: #fff;
	margin: 0 0 16px;
}
.gt-about-lede { max-width: 62ch; color: rgba(255,255,255,.82); font-size: clamp(14px, 1.1vw, 16px); margin: 0; }

/* Stats */
.gt-stats {
	max-width: var(--gt-amax);
	margin: 0 auto;
	padding: clamp(26px, 3vw, 42px) var(--gt-gut);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 30px);
	border-bottom: 1px solid #ececec;
}
.gt-stat { text-align: center; }
.gt-stat-n {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 38px);
	line-height: 1;
	color: var(--gt-purple, #7B4FF4);
}
.gt-stat-l { display: block; margin-top: 6px; font-size: 13px; color: #7a7a7a; }

/* Blocks */
.gt-about-block { padding: clamp(38px, 5vw, 72px) var(--gt-gut); }
.gt-about-block > .gt-about-narrow { max-width: var(--gt-narrow); }
.gt-tint { background: #f7f6fb; }
.gt-dark { background: #0b0b0b; color: rgba(255,255,255,.78); }
.gt-dark h2 { color: #fff; }
.gt-about-sub { color: var(--gt-purple, #7B4FF4); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

.gt-about-cta { color: var(--gt-purple, #7B4FF4); font-weight: 600; text-decoration: none; }
.gt-about-cta:hover { text-decoration: underline; }

/* Timeline */
.gt-timeline {
	max-width: 900px;
	margin: 26px auto 0;
	padding: 0 0 0 26px;
	list-style: none;
	border-left: 2px solid rgba(123, 79, 244, .45);
}
.gt-timeline li {
	position: relative;
	margin-bottom: 20px;
	padding-left: 4px;
	font-size: var(--gt-t-body, 16px);
	line-height: var(--gt-t-lh, 1.5);
}
.gt-timeline li::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gt-purple, #7B4FF4);
}

/* Capability cards */
.gt-capability {
	max-width: var(--gt-amax);
	margin: clamp(26px, 3vw, 40px) auto 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}
.gt-cap { background: #fff; border: 1px solid #e9e9e9; border-radius: 10px; overflow: hidden; padding-bottom: 16px; }
.gt-cap-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: #f2f2f2; }
.gt-cap-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-cap h3 { padding: 0 16px; }
.gt-cap p { padding: 0 16px; margin: 0; font-size: var(--gt-t-card, 13px); line-height: var(--gt-t-card-lh, 1.55); color: #666; }

/* Exhibitions */
.gt-exhibitions { list-style: none; margin: 0 0 18px; padding: 0; }
.gt-exhibitions li {
	padding: 9px 0;
	border-bottom: 1px solid rgba(255,255,255,.12);
	font-size: var(--gt-t-body, 16px);
}

@media (max-width: 1024px) {
	.gt-capability { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.gt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
	.gt-capability { grid-template-columns: 1fr; }
}

/* ── Default page template ──────────────────────────────────── */
.gt-page {
	--gt-pmax: 1400px;
	--gt-gut: clamp(16px, 4vw, 48px);
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
	color: var(--gt-body, #4a4a4a);
}
.gt-page * { box-sizing: border-box; }

.gt-page-hero { background: #0b0b0b; }
.gt-page-hero-inner {
	max-width: var(--gt-pmax);
	margin: 0 auto;
	padding: clamp(28px, 3.6vw, 52px) var(--gt-gut);
}
.gt-page-crumb { margin: 0 0 8px; font-size: 12.5px; }
.gt-page-crumb a { color: var(--gt-purple, #7B4FF4); text-decoration: none; }
.gt-page-hero h1 {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	font-size: clamp(24px, 3vw, 42px);
	line-height: 1.05;
	color: #fff;
	margin: 0;
}

.gt-page-body {
	max-width: 82ch;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 56px) var(--gt-gut) clamp(50px, 6vw, 84px);
	font-size: var(--gt-t-body, 16px);
	line-height: var(--gt-t-lh, 1.5);
}
.gt-page-body h2 {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--gt-title, #242424);
	margin: 30px 0 12px;
}
.gt-page-body h3 {
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 600;
	color: var(--gt-title, #242424);
	margin: 22px 0 8px;
}
.gt-page-body p { margin: 0 0 14px; }
.gt-page-body ul { margin: 0 0 16px; padding-left: 20px; }
.gt-page-body li { margin-bottom: 7px; }

.gt-child-pages { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.gt-child-pages a {
	font-size: 13.5px; font-weight: 600; text-decoration: none;
	color: var(--gt-purple, #7B4FF4);
	border: 1px solid #e4e0f5; border-radius: 40px; padding: 9px 18px;
}
.gt-child-pages a:hover { background: var(--gt-purple, #7B4FF4); color: #fff; }

/* ── Kicker (small label above a heading) ───────────────────── */
.gt-kicker {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gt-purple, #7B4FF4);
	margin: 0 0 10px;
}
.gt-dark .gt-kicker { color: #B49BFF; }

/* ── Journey — monochrome record cards ──────────────────────── */
.gt-journey { }
.gt-journey-grid {
	max-width: var(--gt-amax);
	margin: 30px auto 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}
.gt-journey-card { margin: 0; }
.gt-journey-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	border: 1px solid rgba(255,255,255,.10);
	display: block;
}
.gt-journey-card figcaption { padding-top: 12px; }
.gt-journey-no {
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--gt-purple, #7B4FF4);
	margin-bottom: 6px;
}
.gt-journey-card p { font-size: 13px; line-height: 1.55; margin: 0; color: rgba(255,255,255,.72); }

.gt-journey-chips {
	max-width: var(--gt-amax);
	margin: clamp(26px, 3vw, 38px) auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.gt-chip {
	font-size: 12px;
	padding: 8px 15px;
	border: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.7);
	border-radius: 40px;
}

/* ── Stage — colour, the moment the truss holds up ──────────── */
.gt-stage-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 36px) auto 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}
.gt-shot { position: relative; margin: 0; overflow: hidden; background: #000; }
.gt-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .6s ease; }
.gt-shot:hover img { transform: scale(1.04); }
.gt-shot figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 34px 16px 14px;
	background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.gt-shot strong { display: block; color: #fff; font-family: "Inter Tight", sans-serif; font-size: 15px; }
.gt-shot span { display: block; margin-top: 3px; font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.66); }

/* ── Leadership ──────────────────────────────────────────────── */
.gt-leadership {
	margin-top: clamp(22px, 3vw, 34px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 30px);
}
.gt-leader { text-align: center; }
.gt-leader-photo {
	display: block;
	aspect-ratio: 1 / 1;
	max-width: 160px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	background: #e7e3f7;
}
.gt-leader-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); }
.gt-leader-initial {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 40px;
	color: var(--gt-purple, #7B4FF4);
}
.gt-leader strong { display: block; font-family: "Inter Tight", sans-serif; font-size: 16px; color: var(--gt-title, #242424); }
.gt-leader-role { display: block; margin-top: 3px; font-size: 12.5px; color: #8a8a8a; }

/* ── Certification split ─────────────────────────────────────────
   Lives inside .gt-about-narrow (like every other text block on this
   page), so its heading lines up with "Our story", "Inside the factory"
   etc. instead of sitting flush against the section's outer edge. ── */
.gt-cert-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
}
.gt-cert-copy { min-width: 0; }
.gt-cert-award { margin: 0; }
.gt-cert-award img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid #ececec; }

/* ── Exhibition grid ─────────────────────────────────────────── */
.gt-expo-grid {
	max-width: var(--gt-amax);
	margin: clamp(22px, 3vw, 34px) auto 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}
.gt-expo-card { margin: 0; }
.gt-expo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid rgba(255,255,255,.12); display: block; }
.gt-expo-card figcaption { margin-top: 10px; }
.gt-expo-card strong { display: block; font-family: "Inter Tight", sans-serif; font-size: 14.5px; color: #fff; }
.gt-expo-card span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.6); }

@media (max-width: 1024px) {
	.gt-journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gt-stage-grid, .gt-expo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-cert-grid { grid-template-columns: 1fr; }
	.gt-leadership { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.gt-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-stage-grid, .gt-expo-grid { grid-template-columns: 1fr; }
	.gt-leadership { grid-template-columns: 1fr; max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* ── Solution pages: project showcase ─────────────────────────────────────
   Same card language as the category archives (thumb in a bordered frame,
   label beneath, motion-only hover) so /solutions/* reads as part of the same
   site rather than a bolted-on section. */
.gt-sol-projects {
	margin-top: clamp(34px, 4vw, 56px);
}
.gt-sol-heading {
	font-family: "Satoshi", "Inter Tight", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(19px, 2.1vw, 28px);
	line-height: 1.15;
	color: var(--gt-title, #242424);
	margin: 0 0 clamp(16px, 2vw, 24px);
	display: inline-block;
	border-bottom: 2px solid var(--gt-purple, #7B4FF4);
	padding-bottom: 4px;
}
.gt-sol-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
}
.gt-sol-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #fff;
	transition: transform .34s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow .34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-sol-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .22);
}
.gt-sol-thumb {
	display: block;
	overflow: hidden;
	border: 1px solid #d9d9d9;
	background: #f4f4f6;
	aspect-ratio: 16 / 10;
	transition: border-color .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-sol-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-sol-card:hover .gt-sol-thumb { border-color: var(--gt-purple, #7B4FF4); }
.gt-sol-card:hover .gt-sol-thumb img { transform: scale(1.05); }
.gt-sol-cat {
	display: block;
	margin-top: 11px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gt-purple, #7B4FF4);
}
.gt-sol-title {
	display: block;
	margin-top: 3px;
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--gt-title, #242424);
	transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-sol-card:hover .gt-sol-title { transform: translateX(2px); }

@media (max-width: 1024px) {
	.gt-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gt-sol-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.gt-sol-card, .gt-sol-thumb, .gt-sol-thumb img, .gt-sol-title { transition: none !important; }
}

/* GT: prose measure vs grids ----------------------------------------------
 * .gt-page-body carried max-width:82ch (~656px), which also caged the
 * project-card grid that page.php injects into it: cards rendered 203px wide
 * against 325px for the identical card on /shop/, and the grid's own
 * max-width media queries were dead because the container never tracked the
 * viewport. Move the measure onto the text elements so the prose column does
 * not shift, and let grids use the page's full 1400px line.
 * The :not() list exempts the listing/team/download grids, which are <ul>.
 * -------------------------------------------------------------------------- */
.gt-page-body {
  max-width: var(--gt-pmax, 1400px);
}
.gt-page-body > :is(p, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, table, figure, .gt-child-pages, .page-links):not(.gt-listing-grid):not(.gt-team-grid):not(.gt-dl-list) {
  max-width: 82ch;
  margin-inline: auto;
}
/* GT: end prose measure vs grids */

/* GT: about additions */
/* ==========================================================================
   Giant Truss — About page, 2026 mockup sections
   APPEND THIS FILE TO THE END OF assets/about.css. Nothing above is changed.

   Conventions deliberately inherited from about.css:
   · everything scoped under .gt-about, because about.css is enqueued on every
     page (is_page()) and must not leak into other templates;
   · section padding / max width reuse .gt-about-block, --gt-amax and --gt-gut,
     so the new bands sit on exactly the same rhythm as the old ones;
   · headings come from the existing .gt-about h2 / h3 rules — no new type
     scale is introduced, so a new section is indistinguishable from an old one;
   · every grid uses minmax(0, 1fr) so long words can never force an overflow;
   · every image has an explicit aspect-ratio and object-fit: cover, and is
     sized with width only (never width AND height together).

   Breakpoints: about.css works at max-width 1024px and 640px. These rules are
   written mobile-first, so they use the exact complements of those two
   breakpoints — min-width 641px and min-width 1025px — rather than inventing
   new ones. Verified at 320 / 375 / 768 / 1024 / 1440px.
   ========================================================================== */

/* Shared: purple button. 44px minimum tap target. ----------------------- */
.gt-about .gt-about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 24px;
	max-width: 100%;
	font-family: "Inter Tight", Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--gt-purple, #7B4FF4);
	border: 1px solid var(--gt-purple, #7B4FF4);
	border-radius: 40px;
	transition: background .25s ease, border-color .25s ease;
}
.gt-about .gt-about-btn:hover,
.gt-about .gt-about-btn:focus-visible {
	background: var(--gt-purple-dark, #5F34D6);
	border-color: var(--gt-purple-dark, #5F34D6);
	color: #fff;
}

/* The existing .gt-about-cta arrow link is inline text, ~20px tall. Where a new
   section uses one as a standalone control it is padded out to the 44px minimum
   tap target; the inline ones inside body copy elsewhere are left alone. */
.gt-about .gt-process-foot .gt-about-cta,
.gt-about .gt-enquiry-copy .gt-about-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
}

/* ── Numbers that build trust ──────────────────────────────────────────────
   Same visual family as the .gt-stats band at the top of the page, but boxed
   so the extra third line of context has somewhere to sit. Two-up on a 320px
   phone, five-up on desktop. ---------------------------------------------- */
.gt-about .gt-trust-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 38px) auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.6vw, 20px);
}
.gt-about .gt-trust-cell {
	min-width: 0;
	background: #fff;
	border: 1px solid #e9e6f5;
	border-radius: 10px;
	padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 20px);
	text-align: center;
}
.gt-about .gt-trust-n {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 38px);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--gt-purple, #7B4FF4);
	overflow-wrap: break-word;
}
.gt-about .gt-trust-l {
	display: block;
	margin-top: 8px;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--gt-title, #242424);
}
.gt-about .gt-trust-note {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #8a8a8a;
}

/* ── Giant Truss anthem ────────────────────────────────────────────────────
   The film sits in a fixed 16/9 frame so the band's height never depends on
   whether the video has loaded. object-fit: contain on the <video> because a
   brand film must not be cropped; the placeholder still is cover. ---------- */
.gt-about .gt-anthem-stage {
	max-width: 1040px;
	margin: clamp(24px, 3vw, 38px) auto 0;
}
.gt-about .gt-anthem-media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .12);
	aspect-ratio: 16 / 9;
}
.gt-about .gt-anthem-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #000;
}
.gt-about .gt-anthem-still img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* An iframe cannot be object-fit, so it is stretched inside the ratio box. */
.gt-about .gt-anthem-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* Purple play affordance. Only drawn on a band that actually has a player
   (.gt-anthem-player), and removed the moment playback starts — the template's
   inline script toggles .is-playing. pointer-events: none so it can never
   intercept the <video> element's own controls. A provider iframe draws its own
   play button, so it does not get one, and neither does the placeholder still:
   a play badge over something that cannot play would be a broken affordance. */
.gt-about .gt-anthem-player::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--gt-purple, #7B4FF4) no-repeat 55% 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath fill='%23fff' d='M21 12 0 24V0z'/%3E%3C/svg%3E");
	background-size: 20px 22px;
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .6);
	pointer-events: none;
	opacity: 1;
	transition: opacity .25s ease;
}
.gt-about .gt-anthem-player.is-playing::after { opacity: 0; }

/* ── Engineered to German standards ───────────────────────────────────────── */
.gt-about .gt-process-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 38px) auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 2vw, 26px);
}
.gt-about .gt-process-step {
	min-width: 0;
	background: #fff;
	border: 1px solid #e9e6f5;
	border-radius: 10px;
	padding: clamp(18px, 2vw, 26px);
}
.gt-about .gt-process-no {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--gt-purple, #7B4FF4);
}
.gt-about .gt-process-step h3 { margin: 10px 0 8px; }
.gt-about .gt-process-step p {
	margin: 0;
	font-size: var(--gt-t-card, 13px);
	line-height: var(--gt-t-card-lh, 1.55);
	color: #666;
}
.gt-about .gt-process-foot {
	max-width: var(--gt-amax);
	margin: clamp(22px, 2.6vw, 32px) auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

/* ── Complete event infrastructure solutions ─────────────────────────────── */
.gt-about .gt-solutions-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 38px) auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 1.8vw, 22px);
}
.gt-about .gt-solution-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: 16px;
	transition: transform .34s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow .34s cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color .34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-about a.gt-solution-card:hover,
.gt-about a.gt-solution-card:focus-visible {
	transform: translateY(-5px);
	border-color: var(--gt-purple, #7B4FF4);
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .22);
}
.gt-about .gt-solution-thumb {
	display: block;
	overflow: hidden;
	background: #f4f4f6;
	aspect-ratio: 16 / 10;
}
.gt-about .gt-solution-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-about a.gt-solution-card:hover .gt-solution-thumb img { transform: scale(1.05); }
.gt-about .gt-solution-name {
	display: block;
	margin: 14px 16px 0;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	font-size: var(--gt-h-tile, 18px);
	line-height: 1.25;
	color: var(--gt-title, #242424);
	overflow-wrap: break-word;
}
.gt-about .gt-solution-note {
	display: block;
	margin: 5px 16px 0;
	font-size: var(--gt-t-card, 13px);
	line-height: var(--gt-t-card-lh, 1.55);
	color: #666;
}
.gt-about .gt-solution-count {
	display: block;
	margin: 10px 16px 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gt-purple, #7B4FF4);
}

/* ── Our experiences & highlights ───────────────────────────────────────────
   Same caption-over-photo language as .gt-shot, restated for a light band. -- */
.gt-about .gt-experience-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 36px) auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(12px, 1.6vw, 20px);
}
.gt-about .gt-experience-card {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
}
.gt-about .gt-experience-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}
.gt-about .gt-experience-card:hover img { transform: scale(1.04); }
.gt-about .gt-experience-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
}
.gt-about .gt-experience-card strong {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-size: 15px;
	color: #fff;
}
.gt-about .gt-experience-card span {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .66);
}

/* ── Custom projects built for bigger visions ─────────────────────────────── */
.gt-about .gt-custom-grid {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 38px) auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.2vw, 30px);
}
.gt-about .gt-custom-col {
	min-width: 0;
	padding-top: 16px;
	border-top: 2px solid rgba(123, 79, 244, .3);
}
.gt-about .gt-custom-no {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--gt-purple, #7B4FF4);
}
.gt-about .gt-custom-col h3 { margin: 8px 0 8px; }
.gt-about .gt-custom-col p {
	margin: 0;
	font-size: var(--gt-t-card, 13px);
	line-height: var(--gt-t-card-lh, 1.55);
	color: #666;
}

/* ── Founder's note ────────────────────────────────────────────────────────
   Lives on a .gt-dark band, so it inherits that band's light-on-dark colours
   and only needs the quotation treatment. ---------------------------------- */
.gt-about .gt-founder-note {
	margin: 0;
	padding-left: clamp(16px, 2.4vw, 26px);
	border-left: 3px solid var(--gt-purple, #7B4FF4);
}
.gt-about .gt-founder-note blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
}
.gt-about .gt-founder-note blockquote p {
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: clamp(17px, 1.6vw, 22px);
	line-height: 1.45;
	color: #fff;
	margin: 0 0 14px;
}
.gt-about .gt-founder-note blockquote p:last-child { margin-bottom: 0; }
.gt-about .gt-founder-sign {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(18px, 2vw, 26px);
}
.gt-about .gt-founder-photo {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, .12);
}
.gt-about .gt-founder-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.gt-about .gt-founder-who { min-width: 0; }
.gt-about .gt-founder-who strong {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-size: 15px;
	color: #fff;
}
.gt-about .gt-founder-who span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}
/* Unattributed variant: the name is the company, so it reads as a sign-off
   rather than a byline. */
.gt-about .gt-founder-sign--house .gt-founder-who strong::before {
	content: "\2014\00a0";
	color: var(--gt-purple, #7B4FF4);
}

/* ── Celebrating Giant Night ───────────────────────────────────────────────
   One lead photograph of the evening itself, then the recognition strip. The
   two are labelled separately on purpose: the strip is awards the company has
   received, not photographs of Giant Night. ------------------------------- */
.gt-about .gt-night-lead {
	max-width: var(--gt-amax);
	margin: clamp(24px, 3vw, 38px) auto clamp(26px, 3vw, 40px);
	overflow: hidden;
	border-radius: 12px;
	background: #000;
	position: relative;
}
.gt-about .gt-night-lead img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.gt-about .gt-night-lead figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 18px 16px;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
}
.gt-about .gt-night-label {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gt-body, #767676);
	margin: 0;
}
.gt-about .gt-night-grid {
	max-width: var(--gt-amax);
	margin: clamp(14px, 1.8vw, 20px) auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}
.gt-about .gt-night-card { min-width: 0; }
.gt-about .gt-night-thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #e4e0f0;
	background: #fff;
	aspect-ratio: 3 / 4;
}
.gt-about .gt-night-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.gt-about .gt-night-card strong {
	display: block;
	margin-top: 10px;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--gt-title, #242424);
	overflow-wrap: break-word;
}
.gt-about .gt-night-year {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: #8a8a8a;
}

/* ── Tell us about your project ────────────────────────────────────────────
   contact.css styles Contact Form 7 only inside .gt-contact-col-right (a white
   form on the purple contact band). This is the light-band equivalent, scoped
   to .gt-enquiry-form so the two never fight. ----------------------------- */
.gt-about .gt-enquiry-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3vw, 44px);
	align-items: start;
}
.gt-about .gt-enquiry-copy { min-width: 0; }
.gt-about .gt-enquiry-form { min-width: 0; }

.gt-about .gt-enquiry-form .wpcf7 { color: var(--gt-body, #767676); }
.gt-about .gt-enquiry-form .wpcf7 p { margin: 0 0 18px; }
.gt-about .gt-enquiry-form .wpcf7 .wpcf7-form-control-wrap { display: block; }
.gt-about .gt-enquiry-form .wpcf7 input[type="text"],
.gt-about .gt-enquiry-form .wpcf7 input[type="tel"],
.gt-about .gt-enquiry-form .wpcf7 input[type="email"],
.gt-about .gt-enquiry-form .wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: "Inter Tight", Arial, sans-serif;
	/* 16px on purpose: anything smaller makes iOS Safari zoom on focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--gt-ink, #111);
	background: #fff;
	border: 1px solid #ddd8ee;
	border-radius: 8px;
	appearance: none;
}
.gt-about .gt-enquiry-form .wpcf7 textarea {
	min-height: 132px;
	resize: vertical;
}
.gt-about .gt-enquiry-form .wpcf7 ::placeholder { color: #9b9b9b; opacity: 1; }
.gt-about .gt-enquiry-form .wpcf7 input:focus,
.gt-about .gt-enquiry-form .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--gt-purple, #7B4FF4);
	box-shadow: 0 0 0 3px rgba(123, 79, 244, .16);
}
.gt-about .gt-enquiry-form .wpcf7 input[type="submit"] {
	min-height: 48px;
	padding: 13px 28px;
	max-width: 100%;
	font-family: "Inter Tight", Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	background: var(--gt-purple, #7B4FF4);
	border: 0;
	border-radius: 40px;
	cursor: pointer;
	transition: background .25s ease;
}
.gt-about .gt-enquiry-form .wpcf7 input[type="submit"]:hover,
.gt-about .gt-enquiry-form .wpcf7 input[type="submit"]:focus-visible {
	background: var(--gt-purple-dark, #5F34D6);
}
.gt-about .gt-enquiry-form .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: #c0392b; }
.gt-about .gt-enquiry-form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
}
.gt-about .gt-enquiry-fallback { margin: 0; }

/* ── Breakpoints ───────────────────────────────────────────────────────────
   Complements of about.css's 640 / 1024 max-width queries. ---------------- */
@media (min-width: 641px) {
	.gt-about .gt-trust-grid       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gt-about .gt-process-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-about .gt-solutions-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-about .gt-experience-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-about .gt-custom-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gt-about .gt-night-grid       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gt-about .gt-night-lead img   { aspect-ratio: 2 / 1; }
}

@media (min-width: 1025px) {
	.gt-about .gt-trust-grid       { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.gt-about .gt-process-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gt-about .gt-solutions-grid   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.gt-about .gt-experience-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gt-about .gt-custom-grid      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gt-about .gt-night-grid       { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.gt-about .gt-night-lead img   { aspect-ratio: 21 / 9; }
	.gt-about .gt-enquiry-grid     { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
	/* Five cards across leaves little room for a long category name, so the
	   tile heading steps down rather than wrapping to three lines. */
	.gt-about .gt-solution-name    { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.gt-about .gt-solution-card,
	.gt-about .gt-solution-thumb img,
	.gt-about .gt-experience-card img,
	.gt-about .gt-anthem-player::after,
	.gt-about .gt-about-btn { transition: none !important; }
	.gt-about a.gt-solution-card:hover { transform: none; }
	.gt-about a.gt-solution-card:hover .gt-solution-thumb img,
	.gt-about .gt-experience-card:hover img { transform: none; }
}
/* GT: end about additions */