/*
 * Homepage services: each numbered row fades in on its own the first
 * time the list is in view. Keyframes (not a transition) so the dissolve
 * always plays when is-in is added; 8px of travel so it stays gentle.
 */
@media (scripting: enabled) {
	.woo-services.woo-fade .woo-service,
	.woo-story__body.woo-fade {
		opacity: 0;
	}
}

.woo-services.is-in .woo-service {
	animation: woo-fade-in 900ms var(--woo-ease) both;
}

.woo-services.is-in .woo-service:nth-child(1) { animation-delay: 0ms; }
.woo-services.is-in .woo-service:nth-child(2) { animation-delay: 100ms; }
.woo-services.is-in .woo-service:nth-child(3) { animation-delay: 200ms; }
.woo-services.is-in .woo-service:nth-child(4) { animation-delay: 300ms; }
.woo-services.is-in .woo-service:nth-child(5) { animation-delay: 400ms; }
.woo-services.is-in .woo-service:nth-child(6) { animation-delay: 500ms; }
.woo-services.is-in .woo-service:nth-child(7) { animation-delay: 600ms; }

.woo-story__body.woo-fade.is-in {
	animation: woo-fade-in-soft var(--woo-slow) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes woo-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes woo-fade-in-soft {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-services.woo-fade .woo-service,
	.woo-story__body.woo-fade {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/*
 * Phone-only menu. Tablets keep the desktop row of links; below 601px the
 * five links move into a full-screen panel. Its mark sits on the same
 * origin as the site header — same gutter, same 24px top padding, same size.
 */
.woo-nav__toggle,
.woo-nav__close,
.woo-nav__logo--panel,
.woo-nav__panel-head,
.woo-nav__backdrop {
	display: none;
}

.woo-nav__toggle,
.woo-nav__close {
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

body.woo-nav-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.woo-nav {
		flex-wrap: nowrap;
		align-items: center;
	}

	.woo-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 3;
		width: 44px;
		height: 44px;
		margin: -10px -12px -10px 0;
		color: var(--wp--preset--color--ink);
	}

	.woo-nav__burger,
	.woo-nav__burger::before,
	.woo-nav__burger::after {
		display: block;
		width: 22px;
		height: 1.5px;
		background: currentColor;
	}

	.woo-nav__burger {
		position: relative;
	}

	.woo-nav__burger::before,
	.woo-nav__burger::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.woo-nav__burger::before { top: -6px; }
	.woo-nav__burger::after { top: 6px; }

	.woo-nav__panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 50;
		width: 100%;
		height: 100dvh;
		margin: 0;
		padding-inline: max(var(--woo-gutter), calc((100% - 1200px) / 2));
		padding-block: 24px 40px;
		box-sizing: border-box;
		background: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.3s ease, visibility 0s 0.3s;
	}

	.home .woo-nav__panel {
		padding-block-start: var(--woo-mobile-inner);
	}

	.woo-nav.is-open .woo-nav__panel {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.3s ease, visibility 0s;
	}

	.woo-nav__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 40px;
	}

	.woo-nav__logo--panel {
		display: block;
		width: 60px;
		height: 19px;
	}

	.home .woo-nav__logo--panel {
		width: calc(60px + 120px * var(--woo-logo-scale));
		height: calc(19px + 37.36px * var(--woo-logo-scale));
	}

	.woo-nav__logo--panel svg path,
	.woo-hero-dark .woo-nav__panel .woo-nav__logo svg path,
	.woo-nav-light .woo-nav__panel .woo-nav__logo svg path {
		fill: var(--wp--preset--color--accent);
	}

	.woo-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -10px -12px -10px 0;
		color: var(--wp--preset--color--ink);
	}

	.woo-nav__x {
		position: relative;
		display: block;
		width: 22px;
		height: 22px;
	}

	.woo-nav__x::before,
	.woo-nav__x::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 22px;
		height: 1.5px;
		margin-top: -0.75px;
		background: currentColor;
	}

	.woo-nav__x::before { transform: rotate(45deg); }
	.woo-nav__x::after { transform: rotate(-45deg); }

	.woo-nav__panel nav {
		flex: 1;
	}

	.woo-nav__panel .woo-nav__links {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 20px;
		font-size: var(--wp--preset--font-size--lead);
	}

	.woo-nav__panel .woo-nav__links a {
		color: var(--wp--preset--color--ink);
	}

	.woo-nav__panel .woo-nav__links a:hover,
	.woo-nav__panel .woo-nav__links a[aria-current] {
		color: var(--wp--preset--color--accent);
		opacity: 1;
	}

	.woo-nav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0s 0.3s;
	}

	.woo-nav.is-open .woo-nav__backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.3s ease, visibility 0s;
	}

	.woo-hero-dark .woo-nav__toggle,
	.woo-nav-light .woo-nav__toggle {
		color: var(--wp--preset--color--paper);
	}

	.admin-bar .woo-nav__panel {
		top: 46px;
		height: calc(100dvh - 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-nav__panel,
	.woo-nav.is-open .woo-nav__panel,
	.woo-nav__backdrop,
	.woo-nav.is-open .woo-nav__backdrop {
		transition: none;
	}
}

/*
 * Inner pages share the homepage sticky bar. Overlay heroes stay
 * transparent; paper only fills in on the phone once the page has moved.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body:not(.home):not(.woo-hero-dark):not(.woo-nav-light) header.wp-block-template-part {
		background: var(--wp--preset--color--paper);
	}
}

/*
 * Desktop and tablet: the five links leave on a downward scroll and
 * return on the way up. The mark stays. Phone (≤600px) keeps the
 * hamburger and is left alone.
 */
@media (min-width: 601px) {
	header.wp-block-template-part {
		background: transparent;
		transition: background-color var(--woo-quick) var(--woo-ease);
	}

	header.wp-block-template-part.is-bar-paper {
		background: var(--wp--preset--color--paper);
	}

	/*
	 * Overlay mark stays white on the photograph. On paper it picks up
	 * brand red — invert would leave it black. The link row still inverts
	 * so the white type reads; the current section stays red.
	 */
	.woo-hero-dark header.wp-block-template-part:is(.is-over-light, .is-bar-paper) a.woo-nav__logo:not(.woo-nav__logo--panel) svg path,
	.woo-nav-light header.wp-block-template-part:is(.is-over-light, .is-bar-paper) a.woo-nav__logo:not(.woo-nav__logo--panel) svg path {
		fill: var(--wp--preset--color--accent);
	}

	.woo-hero-dark header.wp-block-template-part:is(.is-over-light, .is-bar-paper) .woo-nav__links a,
	.woo-nav-light header.wp-block-template-part:is(.is-over-light, .is-bar-paper) .woo-nav__links a {
		filter: invert(1);
	}

	.woo-hero-dark header.wp-block-template-part:is(.is-over-light, .is-bar-paper) .woo-nav__links a[aria-current],
	.woo-nav-light header.wp-block-template-part:is(.is-over-light, .is-bar-paper) .woo-nav__links a[aria-current] {
		filter: none;
	}

	.woo-nav__links {
		transition: opacity var(--woo-quick) var(--woo-ease),
		            transform var(--woo-quick) var(--woo-ease),
		            visibility 0s;
	}

	.woo-nav.is-links-hidden .woo-nav__links {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity var(--woo-quick) var(--woo-ease),
		            transform var(--woo-quick) var(--woo-ease),
		            visibility 0s linear var(--woo-quick);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-nav__links,
	.woo-nav.is-links-hidden .woo-nav__links {
		transition: none;
		transform: none;
	}
}

@media (max-width: 600px) {
	.woo-hero-dark header.wp-block-template-part.is-scrolled,
	.woo-nav-light header.wp-block-template-part.is-scrolled {
		background: var(--wp--preset--color--paper);
	}

	.woo-hero-dark header.wp-block-template-part.is-scrolled .woo-nav__links a,
	.woo-nav-light header.wp-block-template-part.is-scrolled .woo-nav__links a {
		color: var(--wp--preset--color--ink);
		opacity: 1;
	}

	.woo-hero-dark header.wp-block-template-part.is-scrolled .woo-nav__links a:hover,
	.woo-hero-dark header.wp-block-template-part.is-scrolled .woo-nav__links a[aria-current],
	.woo-nav-light header.wp-block-template-part.is-scrolled .woo-nav__links a:hover,
	.woo-nav-light header.wp-block-template-part.is-scrolled .woo-nav__links a[aria-current] {
		color: var(--wp--preset--color--accent);
	}

	.woo-hero-dark header.wp-block-template-part.is-scrolled .woo-nav__logo svg path,
	.woo-nav-light header.wp-block-template-part.is-scrolled .woo-nav__logo svg path {
		fill: var(--wp--preset--color--accent);
	}

	.woo-hero-dark header.wp-block-template-part.is-scrolled .woo-nav__toggle,
	.woo-nav-light header.wp-block-template-part.is-scrolled .woo-nav__toggle {
		color: var(--wp--preset--color--ink);
	}
}

/*
 * Tablet and phone: same full-viewport band as desktop, copy still
 * sits on the foot. Header overlays rather than eating the height.
 */
@media (max-width: 1279px) {
	.woo-hero {
		box-sizing: border-box;
		padding-top: 24px;
		padding-bottom: 40px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 20px;
	}

	.woo-hero__copy {
		flex-direction: column;
		align-items: flex-start!important;
		gap: 20px;
	}
}

/*
 * Mobile vertical rhythm: 60px between blocks, 30px inside a block
 * (heading to the thing it introduces, statement to heading, and so on).
 */
@media (max-width: 782px) {
	:root {
		--woo-block: 60px;
		--woo-block-inner: 30px;
	}

	.woo-section,
	.woo-pagehero,
	.woo-trust,
	.woo-cta,
	.woo-team,
	.woo-quote,
	.woo-band,
	.woo-contact,
	.woo-story,
	.woo-shout,
	.woo-footer {
		margin-block: var(--woo-mobile-outer);
	}

	.woo-hero-dark .woo-pagehero {
		margin-block: 0;
		margin-top: calc(-1 * var(--woo-header-h, 102px));
	}
  @media screen and (max-width: 782px) {
    .woo-pagehero{
      margin-bottom: 0;
    }
  }

	.woo-story.woo-story--links {
		margin-block: 0 var(--woo-mobile-outer);
	}

	.woo-svc {
		margin-bottom: var(--woo-block);
		gap: var(--woo-block-inner);
	}

	.woo-section__head,
	.woo-team .woo-section__title,
	.woo-split__side .woo-section__title {
		margin-bottom: var(--woo-block-inner);
	}

	.woo-statement,
	.woo-eyebrow,
	.woo-pagehero .woo-eyebrow {
		margin-bottom: var(--woo-block-inner);
	}

	.woo-cards__grid,
	.woo-cards__grid--2 {
		gap: 40px;
	}

	.woo-hero {
		padding-bottom: var(--woo-block);
		gap: var(--woo-block-inner);
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/*
 * Tab focus: kill the default ring on every interactive control. Links
 * and buttons already change colour on :focus-visible the same way they
 * do on hover. !important is needed because .wp-site-blocks *:focus is
 * more specific than a:focus.
 */
.wp-site-blocks :focus,
.wp-site-blocks :focus-visible,
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
summary:focus,
summary:focus-visible,
.woo-hero__cta:focus,
.woo-hero__cta:focus-visible,
.woo-section__link:focus,
.woo-section__link:focus-visible {
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

button::-moz-focus-inner {
	border: 0;
}

/*
 * Cursor trail: alternate ~250px and ~400px stills, ~210px apart, so
 * they overlap at the corners like the homepage mock.
 */
.woo-hero-wrap,
.woo-hero {
	position: relative;
	width: 100%;
	max-width: none;
}

.woo-hero {
	overflow: hidden;
}

/*
 * Full first screen, header included: pull the band up under the sticky
 * bar so the trail runs behind the mark, then fill 100dvh.
 * :root beats WP's :root :where(.is-layout-flow) > :first-child { margin 0 }.
 */
:root main > .woo-hero-wrap {
	margin-block-start: calc(-1 * var(--woo-header-h, 177px));
}

.woo-hero {
	box-sizing: border-box;
	padding-top: 0;
	height: 100svh;
	min-height: 100svh;
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	max-height: none;
}

.woo-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	box-sizing: border-box;
	padding-inline: var(--woo-gutter);
}

@media (min-width: 1280px) {
	.woo-hero__copy {
		width: 80%;
		margin-inline: auto;
		padding-inline: 0;
	}
}

.woo-hero__title {
	position: relative;
	z-index: 2;
}

.woo-hero__cta {
	position: relative;
	z-index: 4;
}

.woo-hero__trail {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.woo-hero__shot {
	position: absolute;
	display: block;
	width: 250px;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	border-radius: 0;
	box-shadow: none;
	will-change: opacity, transform;
	opacity: 1;
	transform: scale(0.5);
	transform-origin: center center;
	rotate: none;
}

.woo-hero video.woo-hero__shot {
	background: transparent;
}

.woo-hero__shot.is-in {
	animation: woo-trail-in 0.05s ease-out forwards;
}

.woo-hero__shot.is-out {
	animation: woo-trail-out 0.4s ease-out forwards;
}

@keyframes woo-trail-in {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
	}
}

@keyframes woo-trail-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-hero__trail {
		display: none;
	}
}

/*
 * Desktop: acknowledgement starts on the same track as the contact column
 * (email + socials), not after the 400+79px slot the logo row used to use.
 */
@media (min-width: 1200px) {
	.woo-footer__base {
		grid-template-columns: 28.333% 6.583% minmax(0, 1fr);
	}

	.woo-acknowledgement {
		grid-column: 3;
	}
}

/*
 * Footer grid: four percentage tracks above 1200px, two columns on tablet,
 * one column on the phone. 768px stays tablet so iPad portrait is not
 * forced into a single stack.
 */
@media (max-width: 1199px) {
	.woo-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px 24px;
		height: auto;
		align-items: stretch;
	}

	.woo-footer__contact {
		grid-column: auto;
		display: flex;
		flex-direction: column;
	}

	.woo-footer__contact .woo-socials {
		margin-top: auto;
	}

	.woo-signup {
		margin-top: 24px;
	}

	.woo-footer__base {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px 24px;
		margin-top: 40px;
	}

	.woo-acknowledgement {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.woo-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px 24px;
	}

	.woo-footer__grid > :first-child,
	.woo-footer__contact {
		grid-column: 1 / -1;
	}

	.woo-footer__base {
		grid-template-columns: 1fr;
		margin-top: 40px;
		gap: 24px;
	}

	.woo-signup {
		margin-top: 30px;
	}

	.woo-footer__contact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: flex-end;
		column-gap: 16px;
	}

	.woo-footer__contact > a {
		grid-column: 1;
	}

	.woo-footer__contact .woo-socials {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
		justify-self: end;
	}
}

/*
 * Vision and story--pic share the same 6/12 + 6/12 split (and 40px gutter)
 * as the other About bands. Copy sits in column one; the picture is only
 * 5/12 of the shell, so the leftover 1/12 sits toward the gutter as offset.
 */
.woo-vision {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 40px;
	align-items: stretch;
}

.woo-vision__col {
	flex: none;
	min-width: 0;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 48px);
}

.woo-vision__img,
.woo-story.woo-story--pic .woo-story__img {
	width: calc(100% * 5 / 6);
	max-width: 100%;
	min-width: 0;
	justify-self: end;
}

.woo-vision__img {
	flex: none;
	height: auto;
	aspect-ratio: 480 / 620;
	object-fit: cover;
}

.woo-story {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	justify-content: stretch;
	column-gap: 40px;
	row-gap: clamp(40px, 8vw, 100px);
}
@media screen and (max-width: 782px) {
	.woo-story {
		row-gap: var(--woo-mobile-inner);
    column-gap: var(--woo-mobile-inner);
	}
}

.woo-story__lead {
	max-width: 891px;
}

.woo-story__ghost {
	color: var(--wp--preset--color--ghost);
}

.woo-story:not(.woo-story--pic):not(.woo-story--links) .woo-story__body {
	width: 100%;
	max-width: none;
	justify-self: stretch;
}

.woo-story.woo-story--pic {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	justify-content: stretch;
	align-items: center;
	padding-block: 0;
	margin-block: 50px var(--woo-outer);
	row-gap: 40px;
	column-gap: 40px;
}
@media screen and (max-width: 782px) {
	.woo-story.woo-story--pic {
		padding-block: 0;
		margin-block: var(--woo-mobile-outer);
		column-gap: var(--woo-mobile-inner);
		row-gap: 40px;
	}

	.woo-story.woo-story--pic .woo-story__col {
		gap: var(--woo-mobile-inner);
	}
}

.woo-story.woo-story--pic .woo-story__col {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: none;
	justify-self: stretch;
}

.woo-story.woo-story--pic .woo-story__img {
	grid-column: 2;
	grid-row: 1;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	align-self: center;
}

.woo-story.woo-story--pic .woo-story__body {
	max-width: none;
	justify-self: stretch;
}

.woo-story.woo-story--pic .woo-story__ctas {
	grid-column: auto;
	grid-row: auto;
}

.woo-story__year {
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	font-weight: 500;
}

.woo-story--links {
	align-items: end;
}

.woo-story--links .woo-story__body {
	max-width: 499px;
}

.woo-story__ctas .woo-section__link {
	margin-top: 0;
}

@media (max-width: 900px) {
	.woo-vision,
	.woo-story,
	.woo-story.woo-story--pic {
		grid-template-columns: minmax(0, 1fr);
	}

	.woo-story.woo-story--pic .woo-story__col,
	.woo-story.woo-story--pic .woo-story__img {
		grid-column: auto;
		max-width: none;
		justify-self: stretch;
		width: auto;
	}

	.woo-story.woo-story--pic .woo-story__img {
		grid-row: 1;
	}

	.woo-story.woo-story--pic .woo-story__col {
		grid-row: 2;
	}

	.woo-story__body,
	.woo-story__col,
	.woo-story__img,
	.woo-story__ctas {
		grid-column: auto;
		grid-row: auto;
		max-width: none;
		justify-self: stretch;
		width: auto;
	}

	.woo-vision__img,
	.woo-story.woo-story--pic .woo-story__img {
		width: 100%;
		max-width: none;
		justify-self: stretch;
	}

	.woo-story.woo-story--pic {
		margin-block: 0;
		margin-block: var(--woo-mobile-outer);
	}

	.woo-story--links {
		margin-block: 0 var(--woo-mobile-outer);
	}
}

/*
 * About photo strip: two equal columns through tablet so the rows line up;
 * one picture per row on the phone.
 */
@media (max-width: 1199px) {
	.woo-strip__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 20px;
		justify-content: stretch;
	}

	.woo-strip__row--right {
		justify-content: stretch;
	}

	.woo-strip img {
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 386 / 217;
		object-fit: cover;
	}
}

@media (max-width: 767px) {
	.woo-strip__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Team favourites: on hover the person's mark sits in the middle of the
 * section at its native size, capped at 80% of the block.
 */
.woo-team {
	position: relative;
}

.woo-team .woo-member {
	position: static;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 16px;
}

.woo-team .woo-member__role {
	white-space: nowrap;
}

@media (max-width: 900px) {
	.woo-team .woo-member {
		grid-template-columns: max-content minmax(0, 1fr);
		min-height: 58px;
		padding-block: 0;
	}
}

.woo-team .woo-member__pic {
	position: absolute;
	inset: 0;
	left: 0;
	top: 0;
	width: auto;
	max-width: none;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: none;
	z-index: 3;
}

.woo-team .woo-member:hover .woo-member__pic,
.woo-team .woo-member:focus-within .woo-member__pic {
	transform: none;
}

.woo-team .woo-member__pic img {
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}

@media (pointer: coarse) {
	.woo-team .woo-member__pic {
		display: none;
	}
}

/* Temporary: hide hover portraits. Drop .woo-team--no-pic on the section to restore. */
.woo-team--no-pic .woo-member__pic {
	display: none;
}
.wp-block-group.woo-stack > section:last-child {
	margin-bottom: 0;
}
@media screen and (max-width: 782px) {
  .wp-block-group > section:last-child.woo-team{
    padding-bottom: 0;
  }
}
@media screen and (max-width: 782px) {
  #our-services, #clients, .projects-home, .mpb-0{
		padding-bottom: 0!important;
	}
}

/*
 * Contact form (Figma 2507:3651): 2px red bar, 40px inset, fields filling
 * the remaining column, grey placeholders on a #E6E6E6 rule, 40px stack.
 */
.woo-contact {
	grid-template-columns: minmax(0, 534fr) minmax(0, 616fr);
	column-gap: clamp(24px, 3.9vw, 50px);
}

.woo-contact__form {
	min-width: 0;
	box-sizing: border-box;
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 40px;
	padding-right: 40px;
}

.woo-contact .woo-form {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.woo-contact .woo-field {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	min-height: 31px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--woo-rule);
}

.woo-contact .woo-field--tall {
	min-height: 94px;
}

.woo-contact .woo-field__req {
	position: static;
	flex: none;
	line-height: 1.125;
}

.woo-contact .woo-field input,
.woo-contact .woo-field textarea {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: none;
	height: auto;
	padding: 0;
	border: 0;
	line-height: 1.125;
	color: var(--wp--preset--color--ink);
}

.woo-contact .woo-field--tall textarea {
	min-height: calc(94px - 12px);
	height: auto;
	resize: vertical;
}

.woo-contact .woo-field input::placeholder,
.woo-contact .woo-field textarea::placeholder {
	color: var(--wp--preset--color--muted);
}

.woo-contact .woo-field:focus-within {
	border-bottom-color: var(--wp--preset--color--accent);
}

.woo-contact .woo-field input:focus,
.woo-contact .woo-field textarea:focus {
	border-bottom-color: transparent;
}

.woo-contact .woo-form__foot {
	height: auto;
	min-height: 22px;
	flex-wrap: wrap;
	row-gap: 12px;
}

.woo-contact .woo-required__mark {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
	.woo-contact {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.woo-contact__form {
		border-left: 2px solid var(--wp--preset--color--accent);
		padding-left: var(--woo-mobile-inner);
		padding-right: var(--woo-mobile-inner);
	}
}

@media (max-width: 767px) {
	.woo-contact__form {
		padding-left: 20px;
		padding-right: 20px;
	}

	.woo-contact .woo-contact__formtitle {
		margin-bottom: 30px;
	}

	.woo-contact .woo-form {
		gap: 30px;
	}
}

/*
 * Services list: one sticky picture on the left, every capability list
 * on the right. The picture swaps as the matching block crosses it.
 */
.woo-svcs {
	display: grid;
	grid-template-columns: minmax(0, 570fr) minmax(0, 580fr);
	column-gap: 40px;
	align-items: start;
}

.woo-svcs__pin {
	position: sticky;
	top: calc(var(--woo-header-h, 102px) + var(--wp-admin--admin-bar--height, 0px) + 40px);
}

.woo-svcs__copy {
	min-width: 0;
}

.woo-svcs .woo-svc {
	display: block;
	margin-bottom: 100px;
}

.woo-svcs .woo-svc:last-child {
	margin-bottom: 0;
}

.woo-svcs .woo-svc__body {
	flex: none;
	width: 100%;
}

.woo-svcs .woo-svc__shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 580 / 326;
}

.woo-svcs .woo-svc__shot img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.woo-svcs .woo-svc__shot img.is-on {
	opacity: 1;
	z-index: 0;
}

.woo-svcs .woo-svc__shot img.is-front {
	z-index: 1;
	transform-origin: center center;
}

.woo-svcs .woo-svc__shot.is-dir-down img.is-front {
	animation: woo-svc-in-up 0.75s var(--woo-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}

.woo-svcs .woo-svc__shot.is-dir-up img.is-front {
	animation: woo-svc-in-down 0.75s var(--woo-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}

@keyframes woo-svc-in-up {
	from {
		opacity: 0;
		transform: translateY(8%) scale(1.05);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes woo-svc-in-down {
	from {
		opacity: 0;
		transform: translateY(-8%) scale(0.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-svcs .woo-svc__shot img.is-front {
		animation: none;
	}
}

@media (max-width: 1199px) {
	.woo-svcs {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
	}
}

@media (max-width: 767px) {
	.woo-svcs {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.woo-svcs__pin {
		top: calc(var(--woo-header-h, 102px) + var(--wp-admin--admin-bar--height, 0px));
		z-index: 2;
		background: var(--wp--preset--color--paper, #fff);
		padding-bottom: 16px;
	}

	.woo-svcs .woo-svc__shot {
		max-height: 36vh;
	}

	.woo-svcs .woo-svc {
		margin-bottom: 60px;
	}

	.woo-svc__cta {
		margin-top: 20px;
	}
}

/*
 * High trust (Figma 2487:1845): 100px stack, question 338px vs 200px
 * mark, then a 479×473 still 60px from a 393px copy column.
 */
.woo-trust {
	display: flex;
	flex-direction: column;
	gap: 100px;
	padding-block: 100px;
	border-top: 1px solid var(--woo-rule);
}

.woo-trust__top {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.woo-trust__ask {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 1 440px;
	width: auto;
	max-width: 440px;
	min-width: 0;
}

.woo-trust__sectors {
	margin: 0;
}

.woo-trust__mark {
	--woo-mark: clamp(80px, 15.625vw, 200px);
	flex: 0 0 var(--woo-mark);
	width: var(--woo-mark);
	height: var(--woo-mark);
	margin-left: auto;
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.woo-trust__mark:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.woo-trust__copy {
	scroll-margin-top: calc(var(--woo-header-h, 102px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
	scroll-margin-bottom: 16px;
}

.woo-trust__body {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 60px;
	width: min(100%, 932px);
	margin-top: 0;
}

.woo-trust__img,
.woo-trust__col {
	flex: 0 0 auto;
	min-width: 0;
}

.woo-trust__img {
	width: 479px;
	max-width: 100%;
	height: 473px;
	object-fit: cover;
	filter: grayscale(1);
}

.woo-trust__col {
	width: 393px;
	max-width: 100%;
	min-height: 473px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}

@media (max-width: 1199px) {
	.woo-trust {
		gap: 60px;
	}

	.woo-trust__body {
		width: 100%;
		gap: 40px;
	}

	.woo-trust__img {
		flex: 1 1 52%;
		width: auto;
		height: auto;
		aspect-ratio: 479 / 473;
	}

	.woo-trust__col {
		flex: 1 1 42%;
		width: auto;
		min-height: 0;
	}
}

@media (max-width: 1023px) {
	.woo-trust__body {
		flex-wrap: nowrap;
		margin-top: 0;
	}

	.woo-trust__img,
	.woo-trust__col {
		flex: 1 1 0;
		width: auto;
	}

	.woo-trust__col {
		gap: 24px;
	}
}

@media (max-width: 782px) {
	.woo-trust__top,
	.woo-trust__body {
		flex-wrap: nowrap;
	}

	.woo-trust__mark {
		flex-basis: var(--woo-mark);
		width: var(--woo-mark);
		height: var(--woo-mark);
	}
}

@media (max-width: 767px) {
	.woo-trust {
		gap: 40px;
		padding-block: var(--woo-mobile-outer) var(--woo-mobile-inner);
	}

	.woo-trust__top {
		flex-wrap: nowrap;
		gap: 16px;
	}

	.woo-trust__body {
		flex-wrap: wrap;
	}

	.woo-trust__ask {
		flex: 1 1 auto;
		max-width: none;
	}

	.woo-trust__body {
		flex-direction: column;
		gap: 30px;
	}

	.woo-trust__img,
	.woo-trust__col {
		flex: 1 1 100%;
		width: 100%;
		min-height: 0;
	}

	.woo-trust__img {
		height: auto;
		aspect-ratio: 479 / 473;
	}
}

/*
 * Services CTA (Figma 2430:10124): centred 26px headline, 20px to the
 * lead, 40px to the button. A global tablet rule was adding extra
 * margin on the link; kill that here.
 */
.woo-cta .woo-section__link {
	margin-top: 0;
}

@media (max-width: 767px) {
	.woo-cta {
		margin-block: 0;
    padding-bottom: 0;
		padding-top: 60px;
	}

	.woo-cta__title {
		max-width: none;
	}

	.woo-cta__title br {
		display: none;
	}

	.woo-cta__lead {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 782px) {
	.woo-trust--services {
		padding-bottom: 0;
	}
  .woo-trust--services .woo-section__link{
    margin-top: 0;
  }
}

/*
 * Services hero: three-quarters of the viewport on every breakpoint. The
 * sticky header overlays the top of the band. Copy is centred in the
 * banner; Discover is pinned to the foot.
 */
.woo-hero-dark .woo-pagehero {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	padding-block: 0;
	margin-block: 0;
	margin-top: calc(-1 * var(--woo-header-h, 102px));
	height: 75vh;
	min-height: 75vh;
	height: calc((100dvh - var(--wp-admin--admin-bar--height, 0px)) * 0.75);
	min-height: calc((100dvh - var(--wp-admin--admin-bar--height, 0px)) * 0.75);
	max-height: none;
}

.woo-hero-dark .woo-pagehero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	padding-top: var(--woo-header-h, 102px);
	padding-bottom: 72px;
}

.woo-hero-dark .woo-pagehero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.woo-hero-dark .woo-pagehero__copy .woo-eyebrow {
	margin: 0 0 20px;
}

.woo-hero-dark .woo-pagehero__title {
	margin: 0 0 25px;
	max-width: min(540px, 100%);
}

.woo-hero-dark .woo-pagehero__lead {
	margin: 0;
	max-width: min(580px, 100%);
}

.woo-hero-dark .woo-pagehero .woo-hero__cta {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	z-index: 2;
}

/*
 * Mirror the services hero so the yellow field sits on the right, under
 * the red Services eyebrow. The video's poster flips with it; reduced
 * motion uses the same poster as a background, so that layer is mirrored too.
 */
.woo-pagehero__video--flip {
	transform: scaleX(-1);
}

.woo-pagehero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: #f28515;
	opacity: 0.65;
}

.woo-pagehero:has(.woo-pagehero__overlay) .woo-pagehero__inner {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.woo-hero-dark .woo-pagehero:has(.woo-pagehero__video--flip) {
		background-image: none;
	}

	.woo-hero-dark .woo-pagehero:has(.woo-pagehero__video--flip)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: url("../video/services-hero-poster.jpg") center / cover no-repeat;
		transform: scaleX(-1);
	}
}

/*
 * Testimonial (Figma 2430:10367): 873px quote, 20x20 arrows pinned to the
 * top-right of the first line, then 100px of air and the 464px byline with
 * the 229x160 crest opposite. The track is a Slick fade loop; the arrows
 * sit outside it so they do not travel with the slide.
 */
.woo-quote {
	position: relative;
	margin: 0;
}

.woo-quote__nav {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.woo-quote__step.is-off,
.woo-quote__step.slick-disabled,
.woo-quote__step.is-off:hover,
.woo-quote__step.is-off:focus-visible,
.woo-quote__step.slick-disabled:hover,
.woo-quote__step.slick-disabled:focus-visible {
	color: var(--woo-rule);
	cursor: default;
}

.woo-quote__track:not(.slick-initialized) .woo-quote__slide + .woo-quote__slide {
	display: none;
}

.woo-quote .slick-list,
.woo-quote .slick-track,
.woo-quote .slick-slide {
	min-width: 0;
}

.woo-quote .slick-slide {
	height: auto;
}

.woo-quote__slide {
	margin: 0;
}

.woo-quote__text {
	max-width: 873px;
	padding-right: 0;
}

.woo-quote__by {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 40px;
	margin-top: 100px;
}

.woo-quote__who {
	width: 464px;
	max-width: 100%;
	min-width: 0;
}

.woo-quote__mark {
	flex: 0 0 229px;
	display: block;
	width: 229px;
	height: 160px;
	margin-left: auto;
	object-fit: contain;
	object-position: right center;
}

@media (max-width: 1279px) {
	.woo-quote__text {
		max-width: none;
		padding-right: 60px;
	}

	.woo-quote__mark {
		flex: 0 0 auto;
		width: clamp(120px, 18vw, 229px);
		height: auto;
		aspect-ratio: 229 / 160;
	}
}

@media (max-width: 900px) {
	.woo-quote__by {
		flex-wrap: nowrap;
		margin-top: 100px;
	}
}

@media (max-width: 767px) {
	.woo-quote__text {
		padding-right: 56px;
	}

	.woo-quote__by {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24px;
		margin-top: 40px;
	}

	.woo-quote__who {
		width: 100%;
	}

	.woo-quote__mark {
		flex: 0 0 auto;
		width: min(229px, 50vw);
		margin-left: 0;
	}
}

/*
 * Article cards: three columns on desktop, two on tablet, one on the phone.
 * :not(--2) so project / homepage pairs keep their own two-column rules.
 */
@media (max-width: 1199px) {
	.woo-cards__grid:not(.woo-cards__grid--2) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.woo-cards__grid:not(.woo-cards__grid--2) {
		grid-template-columns: 1fr;
	}
}
@media screen and (max-width: 782px) {
	.woo-section--testimonial{
		padding-bottom: 0;
	}
}
@media screen and (max-width: 782px) {
  .woo-cards--insights, .woo-section--related, .woo-section--next-projects{
    padding-bottom: 0!important;
  }
  .woo-band--gallery{
    padding-top: 0!important;
  }
}

.woo-projectinfo__title, .woo-projectinfo__scope{
  display: none!important;
}

.woo-cards__grid .woo-card__title.wp-block-post-title {
	min-width: 0;
}

.woo-cards__grid .woo-card__title.wp-block-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.woo-cards__grid > .wp-block-post:has(.woo-card__body) {
	display: flex;
	flex-direction: column;
}

.woo-card__body,
.woo-card__foot {
	margin: 0;
}

.woo-card__foot {
	margin-top: auto;
}

.woo-back-top {
	position: fixed;
	right: var(--woo-gutter, 40px);
	bottom: max(var(--woo-gutter, 40px), env(safe-area-inset-bottom));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: color var(--woo-quick) var(--woo-ease),
	            opacity var(--woo-quick) var(--woo-ease),
	            visibility 0s linear var(--woo-quick);
}

.woo-back-top.is-in {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.woo-back-top:hover,
.woo-back-top:focus-visible {
	color: var(--wp--preset--color--accent);
}
.lead-font-size{
	&.woo-pagehero__lead{
		max-width: 100%;
		font-size: var(--wp--preset--font-size--heading)!important;
	}
}
.heading-width{
	&.woo-pagehero__title{
		max-width: 100%;
		text-wrap: pretty;
	}
}
.woo-signup__row input{
	/* // remove style auto fill */
	-webkit-text-fill-color: var(--wp--preset--color--ink);
	-webkit-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
@media screen and (min-width: 1280px) {	
	.woo-story-content-section{
		margin-bottom: var(--woo-outer);
	}
}