/* Focused final-polish corrections for the reviewed About block and global shell. */

/* The production About row uses a wider editorial rail than the standard
 * content container. Keeping it here avoids changing unrelated page families. */
.about-intro__grid {
	width: min(calc(100% - 144px), 1380px);
	max-width: none;
	grid-template-columns: minmax(0, 498px) minmax(0, 1fr);
	gap: 72px;
	min-height: 0;
	padding-block: 107px 108px;
}

.about-intro__copy {
	max-width: 498px;
}

.about-intro__copy h3 {
	margin: 70px 0 36px;
	font-family: var(--lld-font-display);
	font-size: 50px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 60px;
	text-transform: uppercase;
	text-wrap: balance;
}

.about-intro__why-list {
	display: grid;
	gap: 0;
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: var(--lld-font-body);
	font-size: 18px;
	line-height: 31.5px;
	list-style: none;
}

.about-intro__copy .about-intro__why-list {
	padding-left: 0;
}

.about-intro__why-list li {
	display: grid;
	grid-template-columns: 15px minmax(0, 1fr);
	column-gap: 12px;
	min-width: 0;
	margin: 0;
	line-height: 31.5px;
}

.about-intro__copy .about-intro__why-list li + li {
	margin-top: 0;
}

.about-intro__check {
	display: block;
	width: 15px;
	height: 15px;
	margin-top: 8px;
}

.about-intro__check svg {
	display: block;
	width: 15px;
	height: 15px;
}

.about-intro__check circle {
	fill: var(--lld-color-lime);
}

.about-intro__check path {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.about-intro__cta {
	display: inline-flex;
	margin-top: 42px;
	border-radius: 10px;
}

/* The footer is one black composition; the gray credit strip is its only
 * intentional color change. */
.site-footer,
.site-footer__inner {
	background: #000;
}

.site-footer__logo {
	display: block;
	width: 150px;
	max-width: 100%;
	line-height: 0;
}

.site-footer__mark {
	display: block;
	width: 150px;
	max-width: 100%;
	max-height: 186px;
	height: auto;
	margin: 0 0 36px;
	object-fit: contain;
}

body.home .site-footer__mark {
	width: 150px;
}

.site-footer__logo .custom-logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 186px;
	height: auto;
	object-fit: contain;
}

.site-footer__name {
	display: block;
	font-family: var(--lld-font-display);
	font-size: 32px;
	line-height: 1;
}

.social-navigation__list {
	gap: 16px;
}

.social-navigation a {
	display: inline-flex;
	width: auto;
	height: 20px;
	vertical-align: top;
	align-items: center;
	justify-content: center;
}

.social-navigation__list {
	gap: 18px;
}

.site-footer .social-navigation__mark {
	width: 15.44px;
	height: 15.44px;
}

.site-footer .social-navigation__mark--x {
	width: 24.61px;
}

.site-footer .social-navigation__mark--facebook,
.site-footer .social-navigation__mark--linkedin {
	border-radius: 1.5px;
	background: var(--lld-color-surface);
	color: var(--lld-color-ink);
}

.footer-navigation .menu {
	align-items: flex-start;
	gap: 16px;
}

.footer-navigation .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 22px;
}

.footer-navigation .menu-item > a::before {
	content: "›";
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.site-footer__recruitment h2,
.site-footer__contact h2 {
	margin: 0 0 28px;
	font-family: var(--lld-font-display);
	font-size: 50px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 60px;
}

.site-footer__recruitment p {
	max-width: none;
	font-family: var(--lld-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 35px;
}

.site-footer__recruitment a {
	font-weight: 400;
	text-decoration: none;
}

.site-footer__recruitment a:hover,
.site-footer__recruitment a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.site-footer__credit {
	min-height: 46px;
	padding: 0;
	background: #2d2d2d;
}

.site-footer__credit .lld-container {
	min-height: 46px;
	align-items: center;
	justify-content: center;
	border-top: 0;
	padding-top: 0;
	font-size: 15px;
}

/* Contact details follow the production icon-row composition. Keep the
 * labels and values on one readable rail instead of treating each detail as
 * a separate editorial heading. */
.lld-contact-details {
	display: grid;
	gap: 14px;
	margin-top: 34px;
}

.lld-contact-detail {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 34px;
	align-items: center;
	min-width: 0;
}

.lld-contact-detail__icon {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.lld-contact-detail__icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.25;
}

.lld-contact-detail__content {
	min-width: 0;
	font-size: 18px;
	line-height: 29px;
}

.lld-contact-detail__content a {
	text-decoration: none;
}

.lld-contact-detail__content a:hover,
.lld-contact-detail__content a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 639px) {
	.lld-contact-details {
		gap: 18px;
		margin-top: 40px;
	}

	.lld-contact-detail {
		grid-template-columns: 42px minmax(0, 1fr);
		column-gap: 18px;
		align-items: start;
	}

	.lld-contact-detail__icon {
		width: 42px;
		height: 42px;
	}

	.lld-contact-detail__icon svg {
		width: 19px;
		height: 19px;
	}

	.lld-contact-detail__content {
		font-size: 18px;
		line-height: 28px;
	}
}

/* Keep the homepage rail independent from the content-container system. */
body.home .site-header__inner {
	width: calc(100% - (2 * var(--lld-header-gutter)));
	max-width: none;
	margin-inline: auto;
}

@media (min-width: 1600px) {
	.about-intro__grid {
	grid-template-columns: minmax(0, 533px) minmax(0, 1fr);
	}

	.about-intro__copy {
	max-width: 533px;
	}
}

@media (min-width: 960px) and (max-width: 1199px) {
	.about-intro__grid {
	width: calc(100% - 136px);
	grid-template-columns: minmax(0, 328px) minmax(0, 1fr);
	}

	.about-intro__copy {
	max-width: 328px;
	}

	.site-footer > .site-footer__inner {
	grid-template-columns: 180px 180px minmax(0, 1fr);
	width: calc(100% - 160px);
	gap: 36px;
	}
}

@media (min-width: 960px) {
	.site-footer > .site-footer__inner,
	body.home .site-footer > .site-footer__inner {
	padding-block: 72px;
	min-height: clamp(445px, 23.4vw, 480px);
	}
}

@media (max-width: 959px) {
	.about-intro__grid {
	width: calc(100% - 72px);
	grid-template-columns: 1fr;
	gap: 48px;
	padding-block: 72px 76px;
	}

	.about-intro__copy {
	max-width: none;
	}

	.about-intro__media {
	order: -1;
	}

	.about-intro__copy h3 {
	font-size: 33.3333px;
	line-height: 40px;
	}

	.site-footer > .site-footer__inner {
	width: calc(100% - 72px);
	max-width: none;
	align-items: stretch;
	flex-direction: column;
	gap: 36px;
	padding-block: 56px 102px;
	}

	body.home .site-footer > .site-footer__inner {
	gap: 36px;
	padding-block: 56px 102px;
	}

	.site-footer__brand,
	.footer-navigation,
	.site-footer__contact {
	width: 100%;
	}

	.footer-navigation .menu {
	gap: 12px;
	}

	.site-footer__recruitment p {
		font-size: 20px;
		line-height: 35px;
	}

	.site-footer__recruitment h2,
	.site-footer__contact h2 {
		font-size: 33.3333px;
		line-height: 40px;
	}
}

@media (max-width: 639px) {
	.about-intro__grid {
	padding-block: 64px 79px;
	}

	.about-intro__copy h3 {
	margin-bottom: 46px;
	font-size: 35px;
	line-height: 40px;
	}

	.site-footer > .site-footer__inner {
	padding-bottom: 162px;
	}

	body.home .site-footer > .site-footer__inner {
	gap: 36px;
	padding-bottom: 162px;
	}

	.about-intro__cta {
	min-height: 53px;
	padding: 16px 39px;
	border-radius: 8px;
	}

	.site-footer__mark,
	.site-footer__logo .custom-logo {
	max-height: 186px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header-is-hidden .site-header {
	transition: none;
	}
}

/* Case Studies landing polish.
 * Keep the category rail and card links readable against the lime treatment;
 * the global lime hover colour is intentionally unsuitable on these surfaces. */
.lld-case-studies-landing,
.lld-case-taxonomy {
	background: var(--lld-color-lime);
}

.lld-case-studies-landing .lld-taxonomy-nav a:hover,
.lld-case-studies-landing .lld-taxonomy-nav a:focus-visible,
.lld-case-taxonomy .lld-taxonomy-nav a:hover,
.lld-case-taxonomy .lld-taxonomy-nav a:focus-visible,
.lld-case-studies-landing .lld-case-card__title a:hover,
.lld-case-studies-landing .lld-case-card__title a:focus-visible,
.lld-case-taxonomy .lld-case-card__title a:hover,
.lld-case-taxonomy .lld-case-card__title a:focus-visible,
.lld-case-studies-landing .lld-case-card__terms a:hover,
.lld-case-studies-landing .lld-case-card__terms a:focus-visible,
.lld-case-taxonomy .lld-case-card__terms a:hover,
.lld-case-taxonomy .lld-case-card__terms a:focus-visible {
	color: var(--lld-color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

/* Production presents each case category as a small lime label rather than
 * an uppercase text-only metadata line. */
.lld-case-studies-landing .lld-case-card__terms a,
.lld-case-taxonomy .lld-case-card__terms a {
	display: inline-block;
	padding: 5px 10px 6px;
	background: var(--lld-color-lime);
	color: var(--lld-color-ink);
	font-family: var(--lld-font-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
}

@media (min-width: 960px) {
	/* Production holds the case-study hero below the desktop header at a
	 * stable 530px, so the intro panel enters at the same vertical seam. */
	.lld-case-studies-landing .lld-case-studies-landing-hero {
		min-height: 530px;
	}

	/* The live landing page uses a shallower, wide editorial crop. */
	.lld-case-studies-landing .lld-case-card {
		min-height: 0;
	}

	.lld-case-studies-landing .lld-case-card__media {
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
	}
}

@media (min-width: 960px) and (max-width: 1199px) {
	.lld-case-studies-landing .lld-case-card__body {
		padding: 48px;
	}

	.lld-case-studies-landing .lld-case-card__title {
		font-size: 42px;
		line-height: 48px;
	}
}

@media (min-width: 640px) and (max-width: 959px) {
	/* Tablet keeps the alternating two-column composition, but uses the same
	 * wide crop instead of inheriting the desktop minimum image height. */
	.lld-case-studies-landing .lld-case-card {
		min-height: 0;
	}

	.lld-case-studies-landing .lld-case-card__media {
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
	}

	.lld-case-studies-landing .lld-case-card__body {
		padding: 32px 28px;
	}

	.lld-case-studies-landing .lld-case-card__title {
		font-size: 30px;
		line-height: 36px;
	}
}

@media (max-width: 639px) {
	/* Preserve the production mobile portrait crop while applying the shared
	 * category-label treatment above. */
	.lld-case-studies-landing .lld-case-card__media {
		aspect-ratio: 4 / 3;
	}
}