/*
 * UCL — design system.
 *
 * Palette and typeface come from the brand sheet on slide 1 of the design
 * draft: cream text on a deep green-black ground, aqua for actions, blush for
 * eyebrows, and three further accents for the services columns.
 */

/* ---------------------------------------------------------------- tokens */

:root {
	--ink:        #2f3330;   /* page ground, and the header banner */
	--ink-deep:   #232623;   /* footer and contrast bands */
	--ink-lift:   #383d39;   /* cards, chips, form fields */
	--ink-line:   rgba(228, 225, 211, 0.16);

	--cream:      #e4e1d3;   /* headings and primary text        21:1 on --ink */
	--cream-mute: rgba(228, 225, 211, 0.74); /* body copy       6.1:1 */
	--cream-soft: rgba(228, 225, 211, 0.64); /* meta, captions  4.9:1 */
	/* The two muted tones are set where they are because anything lighter than
	   0.64 alpha drops the small 15px type below the 4.5:1 WCAG AA threshold. */

	--aqua:       #8bb8c0;   /* links and buttons */
	--blush:      #eec8cc;   /* eyebrows and captions */
	--ochre:      #b47b42;
	--coral:      #e37a68;

	--shell:      1280px;
	--gutter:     clamp(20px, 5vw, 64px);
	--section:    clamp(40px, 4.6vw, 88px);

	--radius:     4px;
	--radius-pill: 999px;

	--ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

	/* The site is dark by design. Saying so stops Android Chrome's Auto Dark
	   Theme from darkening it a second time — it was flattening --ink to near
	   black, dimming the cream text, and inverting the award seals into pale
	   grey discs, which is the "logo does not display correctly on mobile" in
	   the 26 Aug review. It also gives form fields and scrollbars dark UA
	   defaults, which is what this design wants anyway. */
	color-scheme: dark;

	--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--font);
	/* One step up from 16/17px on the 26 Aug review's "please make the font
	   bigger to match the rest of the body text". Every body block on the site
	   shares this one size, so raising it here keeps them matched rather than
	   singling one section out. */
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a { color: var(--aqua); text-decoration: none; }
a:hover { color: var(--cream); }

:focus-visible {
	outline: 2px solid var(--aqua);
	outline-offset: 3px;
	border-radius: 2px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.ucl-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--cream);
	color: var(--ink);
	font-weight: 700;
	border-radius: var(--radius);
	transition: top 0.2s var(--ease);
}
.ucl-skip:focus { top: 16px; color: var(--ink); }

/* --------------------------------------------------------------- layout */

.ucl-shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

/* Heading on the left, supporting copy on the right — the draft's workhorse.
   The review asked twice for the two halves to sit centred against each other
   ("Image should centre vertically with text", "Text should centre vertically
   left and right side"), so every split now centres rather than top-aligns. */
.ucl-split {
	display: grid;
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}

/* Two columns only once each one can still hold a display heading. Splitting at
   900px left the lead column at 383px carrying 48px type, which broke a
   two-line heading into one word per line right across the tablet range. */
@media (min-width: 1024px) {
	.ucl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Text beside an image. */
.ucl-media-split {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.ucl-media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ucl-media-split--reverse .ucl-media-split__media { order: -1; }
}

.ucl-media-split__media img { border-radius: var(--radius); width: 100%; }

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

.ucl-h1,
.ucl-h2,
.ucl-h3 {
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--cream);
}

/* One display size for both heading levels. The review reads "Text is too
   large. All headers and body text have the same size" — h1 was 80px against
   h2's 56px, so h1 now takes the h2 scale and keeps only a tighter leading. */
.ucl-h1 {
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.5rem);
	line-height: 1.02;
}

.ucl-h2 {
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.5rem);
	line-height: 1.04;
}

.ucl-h3 {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ucl-eyebrow {
	margin: 0 0 1.1em;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ucl-eyebrow--blush { color: var(--blush); }
.ucl-eyebrow--aqua  { color: var(--aqua); }

.ucl-prose {
	color: var(--cream-mute);
	max-width: 62ch;
}

/* "All body text have same text size" — the lead paragraphs used to run a
   step larger, so this now only marks intent, not a size. */
.ucl-prose--lead { line-height: 1.6; }

.ucl-prose a { color: var(--aqua); }
.ucl-prose strong { color: var(--cream); font-weight: 700; }

/* ----------------------------------------------------------- actions */

/* Every call to action is a link and every link looks the same: blue text.
   The review asked for "only blue colour without underline or oval border",
   so the pill and the rule under the inline link are both gone and the two
   classes now differ only in the space they leave above themselves. */
.ucl-btn,
.ucl-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--aqua);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.25s var(--ease);
}

.ucl-btn  { margin-top: 1.75rem; }
.ucl-link { margin-top: 1.5rem; }

.ucl-btn:hover,
.ucl-btn:focus-visible,
.ucl-link:hover,
.ucl-link:focus-visible { color: var(--cream); }

.ucl-btn__arrow { transition: transform 0.25s var(--ease); }
.ucl-btn:hover .ucl-btn__arrow,
.ucl-link:hover .ucl-btn__arrow { transform: translateX(4px); }

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

.ucl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ink);
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.ucl-header.is-stuck {
	background: rgba(35, 38, 35, 0.9);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--ink-line);
}

.ucl-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 48px);
	min-height: 78px;
}

.ucl-logo { flex: 0 0 auto; }
.ucl-logo img { width: auto; height: 30px; }
.ucl-logo__text {
	color: var(--cream);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ucl-nav { display: none; margin-inline: auto; }

@media (min-width: 1000px) {
	.ucl-nav { display: block; }
}

.ucl-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
}

.ucl-nav__list a {
	position: relative;
	color: var(--cream);
	font-size: 0.9375rem;
	font-weight: 600;
	padding-block: 6px;
}

.ucl-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--coral);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}

/* Blue is reserved for hyperlinks, so the page you are on is marked in
   #E37A68 instead. "Contact Us" is the exception the review asked for: it
   stays blue in every state, current page included.

   Matched two ways on purpose. The `ucl-nav-cta` class comes from a filter in
   functions.php and follows the contact page even if it is renamed; the href
   selector needs no PHP at all, which is what makes the colour survive a server
   that is still running an older functions.php. Either one on its own is
   enough. */
.ucl-nav__list a:hover,
.ucl-nav__list .current-menu-item > a { color: var(--coral); }
.ucl-nav__list a:hover::after,
.ucl-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.ucl-nav__list .ucl-nav-cta > a,
.ucl-nav__list .ucl-nav-cta > a:hover,
.ucl-nav__list a[href$="/contact/"],
.ucl-nav__list a[href$="/contact/"]:hover { color: var(--aqua); }

.ucl-nav__list .ucl-nav-cta > a::after,
.ucl-nav__list a[href$="/contact/"]::after { background: var(--aqua); }

.ucl-mobile-nav__list .ucl-nav-cta > a,
.ucl-mobile-nav__list a[href$="/contact/"] { color: var(--aqua); }
.ucl-mobile-nav__list .current-menu-item > a { color: var(--coral); }

.ucl-header__end {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

@media (min-width: 1000px) {
	.ucl-header__end { margin-left: 0; }
}

/* -------------------------------------------------------------- social */

.ucl-social { display: flex; align-items: center; gap: 4px; }

/* Icons sit straight on the page — no tile behind them. The box keeps its
   size so the tap target does not shrink to the 18px artwork. */
.ucl-social a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--cream);
	transition: color 0.25s var(--ease);
}

.ucl-social a:hover { color: var(--aqua); }

.ucl-social--header { display: none; }

@media (min-width: 1000px) {
	.ucl-social--header { display: flex; }
}

/* ------------------------------------------------------- mobile nav */

.ucl-burger {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	color: var(--cream);
	cursor: pointer;
}

@media (min-width: 1000px) {
	.ucl-burger { display: none; }
}

.ucl-burger__box { position: relative; width: 18px; height: 12px; }

.ucl-burger__box span,
.ucl-burger__box::before,
.ucl-burger__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.ucl-burger__box::before { top: 0; }
.ucl-burger__box span    { top: 5.25px; }
.ucl-burger__box::after  { bottom: 0; }

.ucl-burger[aria-expanded="true"] .ucl-burger__box::before { transform: translateY(5.25px) rotate(45deg); }
.ucl-burger[aria-expanded="true"] .ucl-burger__box span    { opacity: 0; }
.ucl-burger[aria-expanded="true"] .ucl-burger__box::after  { transform: translateY(-5.25px) rotate(-45deg); }

.ucl-mobile-nav {
	padding: 8px var(--gutter) 32px;
	border-top: 1px solid var(--ink-line);
	background: var(--ink);
}

.ucl-mobile-nav[hidden] { display: none; }

.ucl-mobile-nav__list { display: grid; gap: 4px; margin-bottom: 24px; }

.ucl-mobile-nav__list a {
	display: block;
	padding: 12px 0;
	color: var(--cream);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--ink-line);
}

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

.ucl-hero { padding-block: clamp(32px, 3.6vw, 64px) clamp(32px, 3.6vw, 64px); }

.ucl-hero__inner {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.ucl-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Measure the heading, not the block around it — the block also holds the
   eyebrow and the lead paragraph, and ch on it resolves against 17px rather
   than the 80px the heading actually renders at. */
.ucl-hero--text .ucl-h1 { max-width: 10ch; }

.ucl-hero__media img {
	width: 100%;
	border-radius: var(--radius);
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/* -------------------------------------------------------------- chips */

.ucl-chips {
	padding: clamp(22px, 3vw, 40px);
	background: rgba(228, 225, 211, 0.04);
	border: 1px solid var(--ink-line);
	border-radius: 10px;
}

.ucl-chips__title {
	margin-bottom: 1.4em;
	color: var(--cream);
	font-size: 1.0625rem;
	font-weight: 700;
}

.ucl-chips__list { display: flex; flex-wrap: wrap; gap: 10px; }

.ucl-chip {
	padding: 0.65em 1.15em;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-pill);
	color: var(--cream-mute);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: default;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.ucl-chip:hover {
	color: var(--ink);
	background: var(--blush);
	border-color: var(--blush);
}

/* -------------------------------------------------------------- stats */

.ucl-stats {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	margin-top: clamp(48px, 7vw, 104px);
	padding-top: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--ink-line);
}

@media (min-width: 780px) {
	.ucl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ucl-stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
}

.ucl-stat__value {
	font-size: clamp(2.6rem, 1.4rem + 4vw, 4.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.ucl-stat__suffix {
	font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--coral);
}

.ucl-stat__word {
	max-width: 9ch;
	color: var(--cream-mute);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
}

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

.ucl-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ucl-tiles__item img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius);
	transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.ucl-tiles__item a { display: block; overflow: hidden; border-radius: var(--radius); }
.ucl-tiles__item a:hover img { transform: scale(1.05); }

/* ----------------------------------------------------------- services */

.ucl-services {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	margin-top: clamp(48px, 6vw, 88px);
}

@media (min-width: 700px)  { .ucl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ucl-services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ucl-accent--blush { --accent: var(--blush); }
.ucl-accent--ochre { --accent: var(--ochre); }
.ucl-accent--coral { --accent: var(--coral); }
.ucl-accent--aqua  { --accent: var(--aqua); }

.ucl-services__col { padding-top: 20px; border-top: 2px solid var(--accent, var(--blush)); }

.ucl-services__title {
	margin: 0 0 1.2em;
	color: var(--accent, var(--blush));
	/* 19px bold clears the WCAG "large text" threshold (18.66px bold), where
	   3:1 applies — which the ochre and coral accents from the brand sheet meet
	   but the 4.5:1 body-text threshold they would not. */
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ucl-services__list { display: grid; gap: 1.4em; }

.ucl-services__name {
	display: block;
	color: var(--cream);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.ucl-services__desc {
	display: block;
	margin-top: 0.3em;
	color: var(--cream-soft);
	line-height: 1.6;
}

/* ------------------------------------------------------------ marquee */

.ucl-marquee {
	margin-top: clamp(48px, 6vw, 88px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ucl-marquee__track {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: ucl-marquee 56s linear infinite;
}

.ucl-marquee:hover .ucl-marquee__track { animation-play-state: paused; }

.ucl-marquee__item img {
	width: clamp(200px, 22vw, 300px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}

@keyframes ucl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ucl-marquee { overflow-x: auto; }
	.ucl-marquee__track { animation: none; }
}

/* ------------------------------------------------------------ filters */

.ucl-filters { padding-block: 0; }

.ucl-filters__inner {
	padding-block: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--ink-line);
	border-bottom: 1px solid var(--ink-line);
}

.ucl-filters__list { display: flex; flex-wrap: wrap; gap: 10px; }

.ucl-filter {
	display: inline-block;
	padding: 0.65em 1.2em;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-pill);
	color: var(--cream-mute);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.ucl-filter:hover {
	color: var(--ink);
	background: var(--blush);
	border-color: var(--blush);
}

.ucl-filter.is-active {
	color: var(--ink);
	background: var(--cream);
	border-color: var(--cream);
}

/* ------------------------------------------------------------ library */

.ucl-library__active {
	margin: 0 0 1.5em;
	color: var(--cream-soft);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ucl-library__title { margin: clamp(48px, 6vw, 88px) 0 clamp(20px, 2vw, 32px); }
.ucl-library__title:first-of-type { margin-top: 0; }

.ucl-library__empty { color: var(--cream-soft); }

.ucl-grid {
	display: grid;
	gap: clamp(16px, 2vw, 28px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Not a link any more — the review asked that no project open a page of its
   own — so there is nothing here that reacts to the pointer. */
.ucl-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 20px;
	background: rgba(228, 225, 211, 0.04);
	border: 1px solid var(--ink-line);
	border-radius: 10px;
	color: inherit;
}

/* The review called the title and badge alignment inconsistent, and it was:
   a card whose sector tags wrapped to two rows pushed its title down, and only
   some projects carry a badge, so the title band changed height card to card.
   Reserving both rows fixes every card to the same rhythm. */
.ucl-card .ucl-tags {
	min-height: 58px;   /* two rows of 26px chips plus the 6px gap */
	align-content: flex-start;
}

.ucl-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 88px;   /* the badge height, badge or no badge */
}

.ucl-card__title {
	margin: 0;
	min-width: 0;
	color: var(--cream);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ucl-card__media { margin-top: auto; overflow: hidden; border-radius: var(--radius); }

.ucl-card__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.ucl-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ucl-tag {
	padding: 0.4em 0.85em;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius-pill);
	color: var(--cream-soft);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.ucl-tag a { color: inherit; }
.ucl-tag a:hover { color: var(--aqua); }

/* ------------------------------------------------------------ listings */

.ucl-listing + .ucl-listing { margin-top: clamp(32px, 4vw, 56px); }

.ucl-listing__title {
	margin: 0 0 0.9em;
	color: var(--blush);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ucl-listing__row {
	display: grid;
	gap: 2px 24px;
	padding: 0.85em 0;
	border-bottom: 1px solid var(--ink-line);
}

@media (min-width: 640px) {
	.ucl-listing__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: baseline; }
}

.ucl-listing__name { color: var(--cream); font-weight: 700; }

.ucl-listing__size {
	margin-left: 0.5em;
	color: var(--cream-soft);
	font-weight: 500;
	font-size: 0.9375rem;
}

.ucl-listing__place { color: var(--cream-soft); font-size: 0.9375rem; }

/* -------------------------------------------------------------- awards */

.ucl-awards { display: grid; gap: clamp(18px, 3vw, 34px); }

.ucl-awards__row {
	display: grid;
	grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
	gap: clamp(16px, 3vw, 40px);
	align-items: center;
}

.ucl-awards__year {
	margin: 0;
	color: var(--cream-soft);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.ucl-awards__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.ucl-awards__badges img { width: clamp(72px, 9vw, 104px); height: auto; }

/* Big enough that the award name and year inside the seal can be read —
   at 46px they were a smudge. */
.ucl-awards--inline { display: flex; gap: 8px; flex: 0 0 auto; }
.ucl-awards--inline img { width: 88px; height: auto; }

/* ------------------------------------------------------------ timeline */

.ucl-timeline {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(48px, 6vw, 88px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--ink-line);
}

@media (min-width: 760px) {
	.ucl-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.ucl-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ucl-timeline__year {
	margin: 0 0 0.5em;
	color: var(--ochre);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.ucl-timeline__body { color: var(--cream-mute); line-height: 1.6; }

/* ---------------------------------------------------------------- FAQ */

.ucl-faq__list {
	display: grid;
	border-top: 1px solid var(--ink-line);
}

.ucl-faq__item { border-bottom: 1px solid var(--ink-line); }

.ucl-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(20px, 2.4vw, 30px) 0;
	color: var(--cream);
	font-size: clamp(1.0625rem, 1rem + 0.55vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	cursor: pointer;
	list-style: none;
	transition: color 0.25s var(--ease);
}

.ucl-faq__question::-webkit-details-marker { display: none; }
.ucl-faq__question:hover { color: var(--coral); }

.ucl-faq__marker {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.3em;
}

.ucl-faq__marker::before,
.ucl-faq__marker::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.ucl-faq__marker::after { transform: rotate(90deg); }
details[open] .ucl-faq__marker::after { transform: rotate(0deg); opacity: 0; }

.ucl-faq__answer { padding-bottom: clamp(20px, 2.4vw, 30px); max-width: 78ch; }

/* ------------------------------------------------------------- options */

.ucl-options { display: grid; gap: clamp(24px, 3vw, 40px); }

.ucl-options__title {
	margin: 0 0 0.4em;
	color: var(--cream);
	/* Tracks the body size above it: at 1.125rem it would now be level with the
	   copy underneath and stop reading as a heading. */
	font-size: 1.1875rem;
	font-weight: 700;
}

/* -------------------------------------------------------------- forms */

.ucl-form {
	padding: clamp(22px, 3vw, 40px);
	background: rgba(228, 225, 211, 0.04);
	border: 1px solid var(--ink-line);
	border-radius: 10px;
}

.ucl-form__missing { color: var(--blush); }

.ucl-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--cream);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ucl-form input[type="text"],
.ucl-form input[type="email"],
.ucl-form input[type="tel"],
.ucl-form input[type="url"],
.ucl-form textarea,
.ucl-form select {
	width: 100%;
	padding: 0.85em 1em;
	background: transparent;
	border: 1px solid rgba(228, 225, 211, 0.35);
	border-radius: var(--radius);
	color: var(--cream);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.ucl-form input::placeholder,
.ucl-form textarea::placeholder { color: var(--cream-soft); }

.ucl-form input:focus,
.ucl-form textarea:focus {
	border-color: var(--aqua);
	background: rgba(228, 225, 211, 0.05);
	outline: none;
}

.ucl-form textarea { min-height: 150px; resize: vertical; }

.ucl-form .ucl-field-row {
	display: grid;
	gap: 16px;
	margin-bottom: 18px;
}

@media (min-width: 560px) {
	.ucl-form .ucl-field-row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ucl-form .ucl-required { color: var(--coral); }

.ucl-form input[type="submit"],
.ucl-form button[type="submit"] {
	margin-top: 8px;
	padding: 0.95em 2em;
	background: var(--cream);
	border: 1px solid var(--cream);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.ucl-form input[type="submit"]:hover,
.ucl-form button[type="submit"]:hover {
	background: var(--aqua);
	border-color: var(--aqua);
}

/* Contact Form 7's own furniture, toned to the palette. */
.wpcf7-spinner { background-color: var(--cream-soft); }

.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 0.9em 1.1em;
	border-radius: var(--radius);
	border-width: 1px;
	color: var(--cream);
	font-size: 0.9375rem;
}

.wpcf7 form.sent .wpcf7-response-output      { border-color: var(--aqua); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output    { border-color: var(--coral); }

.wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--coral);
	font-size: 0.8125rem;
	font-weight: 600;
}

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

/* The band no longer changes colour: the review asked for the background to
   "continue consistently from above". */
.ucl-cta {
	padding-block: var(--section);
	background: var(--ink);
}

.ucl-cta__inner {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.ucl-cta__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
}

.ucl-cta__mark img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--radius);
}

.ucl-cta__body .ucl-h2 { margin-bottom: 0.4em; }

/* ------------------------------------------------------------ promise */

.ucl-promise__inner {
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}

.ucl-promise__statement { font-weight: 800; }

.ucl-promise__note { margin-top: 1.5em; color: var(--cream-soft); font-size: 0.9375rem; }

/* A line of air between the invitation and the email fallback under it. */
.ucl-contact__skip { margin-top: 1.6em; }

/* ------------------------------------------------------------ project */

.ucl-project__header { padding-bottom: clamp(28px, 3vw, 44px); }

.ucl-project__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	margin-top: 18px;
}

.ucl-project__title-row .ucl-h1 { margin: 0; }
.ucl-project__title-row .ucl-awards--inline img { width: clamp(56px, 6vw, 76px); }

.ucl-project__meta {
	margin-top: 1em;
	color: var(--cream-soft);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ucl-project__summary { margin-top: 1.5em; }

.ucl-project__lead img {
	width: 100%;
	max-height: 78vh;
	object-fit: cover;
	border-radius: var(--radius);
}

.ucl-project__gallery {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	margin-top: clamp(12px, 1.6vw, 20px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.ucl-project__gallery img { width: 100%; border-radius: var(--radius); }

.ucl-project__body { margin-top: clamp(40px, 5vw, 72px); }
.ucl-project__back { padding-block: clamp(40px, 5vw, 72px); }

/* ------------------------------------------------------------ article */

.ucl-article__inner { max-width: 760px; }
.ucl-article__media { margin: 2em 0; }
.ucl-article__media img { width: 100%; border-radius: var(--radius); }

.ucl-prose h2, .ucl-prose h3 { color: var(--cream); margin: 1.6em 0 0.5em; letter-spacing: -0.02em; }
.ucl-prose ul, .ucl-prose ol { margin: 0 0 1em 1.2em; list-style: disc; }
.ucl-prose ol { list-style: decimal; }
.ucl-prose li { margin-bottom: 0.4em; }

.ucl-postlist { display: grid; gap: 2px; margin-top: 2em; }
.ucl-postlist__item a { display: block; padding: 1.4em 0; border-bottom: 1px solid var(--ink-line); color: inherit; }
.ucl-postlist__item a:hover .ucl-h3 { color: var(--aqua); }

.ucl-pagination { margin-top: 3em; }
.ucl-pagination .page-numbers { display: inline-block; padding: 0.5em 0.9em; color: var(--cream-mute); }
.ucl-pagination .current { color: var(--ink); background: var(--cream); border-radius: var(--radius); }

.ucl-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

.ucl-search { display: flex; gap: 10px; margin-top: 1.5em; }
.ucl-search input {
	flex: 1 1 auto;
	padding: 0.8em 1em;
	background: transparent;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	color: var(--cream);
	font-family: inherit;
}
.ucl-search button {
	padding: 0.8em 1.4em;
	background: var(--cream);
	border: 0;
	border-radius: var(--radius);
	color: var(--ink);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

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

.ucl-footer {
	padding-top: clamp(56px, 7vw, 104px);
	background: var(--ink-deep);
	border-top: 1px solid var(--ink-line);
}

.ucl-footer__inner {
	display: grid;
	gap: clamp(32px, 4vw, 64px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

@media (min-width: 800px) {
	.ucl-footer__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.ucl-logo--footer img { height: 34px; }

.ucl-footer__tagline {
	max-width: 34ch;
	margin: 1.4em 0;
	color: var(--cream-mute);
	font-size: 0.9375rem;
}

/* "Explore" and "Get in touch" have to stand off the links below them. */
.ucl-footer__title {
	margin: 0 0 1.2em;
	color: var(--blush);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ucl-footer__list { display: grid; gap: 0.7em; }
.ucl-footer__list a { color: var(--cream-mute); font-size: 0.9375rem; }
.ucl-footer__list a:hover { color: var(--aqua); }
.ucl-footer__list address { font-style: normal; color: var(--cream-mute); font-size: 0.9375rem; }

.ucl-footer__legal {
	padding-block: 24px;
	border-top: 1px solid var(--ink-line);
}

.ucl-footer__legal p { margin: 0; color: var(--cream-soft); font-size: 0.8125rem; }

/* --------------------------------------------------------- reveal */

[data-ucl-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-ucl-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-ucl-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- pitch */

/* Three statements, one under the other. Side by side they read as three
   narrow columns of small print; the review asked for "3 different sections",
   so each one now gets a full band with the heading facing its own copy. */
.ucl-pitch__list { display: grid; gap: var(--section); }

.ucl-pitch__item {
	display: grid;
	gap: clamp(20px, 4vw, 72px);
	align-items: center;
}

@media (min-width: 1024px) {
	.ucl-pitch__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ucl-pitch__heading { margin-bottom: 0; }

/* The CTA band shows a photo when one is set, and the logo when it is not. */

/* The logo stands on the page, not on a panel. */
.ucl-cta__mark--logo {
	display: grid;
	place-items: center;
}

.ucl-cta__mark--logo img {
	width: min(100%, 260px);
	max-height: none;
	object-fit: contain;
}

.ucl-cta__inner--textonly { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------- refinements */

/* The partner promise reads as a statement, not a page heading — it needs a
   measure of its own and a calmer size than .ucl-h2 gives it.

   The measure belongs on the statement, not on the wrapper: ch resolves against
   the element's own font-size, so a 24ch wrapper at 17px came out as a 300px
   column holding 44px text — about one word per line. On the statement itself
   it tracks the clamped font-size and holds four to six lines at every width. */
.ucl-promise__statement {
	max-width: 24ch;
	margin-inline: auto;
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.75rem);
	line-height: 1.12;
}

/* Stats: give each figure its own line so the labels stop fighting the
   numbers for horizontal room. */
.ucl-stat {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas: "prefix prefix prefix" "value suffix label";
	align-items: baseline;
	gap: 0 0.3em;
}

.ucl-stat__word:first-child { grid-area: prefix; margin-bottom: 0.35em; }
.ucl-stat__value  { grid-area: value; }
.ucl-stat__suffix { grid-area: suffix; }
.ucl-stat__word:last-child { grid-area: label; max-width: 14ch; padding-left: 0.35em; }

/* Give the home portfolio tiles a little more of the row. Tracks the breakpoint
   .ucl-split itself splits at — at 900px this re-created the two columns the
   base rule had just been moved past. */
@media (min-width: 1024px) {
	.ucl-portfolio .ucl-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}