/*
 * Measurements taken from the Figma file "0862_Woo Agency Website Redesign_v0.10",
 * page "Desktop - WOO Agency Website - 2026 Update - v0.2", frame "01 / Homepage".
 * The design is drawn at 1280px wide with a 40px page margin, so the content
 * column is 1200px. Type is Graphik at 400/500 only.
 */

:root {
	/* Tracking is fixed per size in the Figma file: 45→-0.45, 26→-0.52,
	   20→-0.2, 13→-0.13, 10→-0.2; 16px and 12px are set solid. */
	--woo-ls-display: -0.45px;
	--woo-ls-heading: -0.52px;
	--woo-ls-lead: -0.2px;
	--woo-ls-tiny: -0.13px;
	--woo-ls-micro: -0.2px;

	--woo-gutter: 40px;
	--woo-rule: #E6E6E6;   /* the hairline colour used throughout the design */
	--woo-mobile-inner: 24px;
	--woo-mobile-outer: 60px;
	--woo-outer: 100px;
}

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

/*
 * Tablet and phone stay full-width with the design gutter. Desktop is a
 * centred 80% column — not the old 1200px padding inset.
 */
.woo-shell {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--woo-gutter);
	box-sizing: border-box;
}

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

/* A pattern that carries its own shell can end up inside the page's — the
   inner one must not pay the gutter a second time. */
.woo-shell .woo-shell {
	width: 100%;
	padding-inline: 0;
}

/*
 * A plain full-width flow container. Sections that carry a rule have to reach
 * both edges as they do in the file, so the gutter belongs to each section
 * rather than to a wrapper around them.
 */
.woo-stack { width: 100%; }
.woo-stack > * { margin-block-start: 0; }

/* ---------------- Navigation (frame height 177) ---------------- */

/*
 * Two headers, not one. The homepage gives the mark its full 312x97 and stands
 * 177px tall; every other page uses 60x19 in a 102px bar. Using the homepage
 * header everywhere pushed each inner page 75px down.
 *
 * On the home page the mark follows the scroll: --woo-logo-scale starts at 1
 * and runs to 0 over the first 180px, landing on the same 60x19 used inside.
 */
.woo-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-block: 40px 44px;
	gap: 24px;
}

.home .woo-nav {
	--woo-logo-scale: 1;
	padding-block: 40px;
}
@media screen and (max-width: 782px) {
	.home .woo-nav {
		padding-block: var(--woo-mobile-inner);
	}
}


/*
 * The mark has to stay on screen while it shrinks, otherwise the 60x19
 * landing size is already off the top of the page. The template-part is the
 * sticky element — it is a sibling of <main>, so it has the whole page to
 * stick against. Sticking the inner shell does nothing: that box is only as
 * tall as the nav itself.
 */
.home header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
	/* background: var(--wp--preset--color--paper); */
}

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

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

.woo-nav__logo {
	display: block;
	flex-shrink: 0;
	width: 60px;
	height: 19px;
	max-width: 40vw;
}

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

.woo-nav__logo img,
.woo-nav__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

.woo-nav__links {
	display: flex;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
	line-height: 1.4;
}

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

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

/* ---------------- Hero (frame height 675) ---------------- */

/*
 * The headline sits at the BOTTOM of the hero, not the top: in the design it
 * starts 459px down a 675px frame, with the call to action on the same
 * baseline over on the right.
 */
/*
 * The headline starts 459px down the 675px hero frame and the frame ends 100px
 * after it, so the space is written as padding rather than a minimum height —
 * a min-height plus padding overshot the frame by 100px.
 */
.woo-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: 459px;
	padding-bottom: 100px;
}

/*
 * 604px, not the 954px of the frame around it: the text box itself is 604 wide,
 * which is what puts the line break after "and" instead of after "as".
 */
.woo-hero__title {
	max-width: 604px;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: var(--woo-ls-display);
	line-height: 1.289;
	font-weight: 500;
}

.woo-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	white-space: nowrap;
}

/* ---------------- Section scaffolding ---------------- */

/*
 * Every section in the design sits on the same rhythm: 100px of air above the
 * heading, 100px below the last row, and 50px between the heading and whatever
 * it introduces. Measured off frames [OUR SERVICES], [CLIENTS], [PROJECT] and
 * [JOURNAL] on the homepage, which all agree.
 */
.woo-section {
	padding-block: var(--woo-outer);
}
@media screen and (max-width: 782px) {
	.woo-section {
		padding-block: var(--woo-mobile-outer);
	}
}

/*
 * Sections are separated by a rule along their top edge. Most are 0.5px; the
 * clients, projects, journal and high-trust sections use a full 1px. Both
 * values come straight from the file.
 */
.woo-section--ruled { border-top: 0.5px solid var(--woo-rule); }
.woo-section--rule1 { border-top: 1px solid var(--woo-rule); }

.woo-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 50px;
}

.woo-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

/*
 * Every "Read more / Let's chat / Download" link is 22px tall: 16px at 500 on
 * a 1.4 line, with its 20px arrow sitting on the same line. The file gives the
 * Button component a hover variant — "Property 1=Positive / Hover" — whose only
 * change is the type turning WOO red, so that is all these do.
 */
.woo-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
	font-weight: 500;
	white-space: nowrap;
	
}
@media screen and (max-width: 1024px) {
	.woo-section__link{
		margin-top: var(--woo-mobile-inner);
	}
}
@media screen and (max-width: 768px) {
	.woo-section__head .woo-section__link{
		margin-top: 0;
	}
}

/* Big statement paragraph, 26/36 in the design. */
.woo-statement {
	max-width: 760px;
	margin: 0 0 100px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 400;
}

/* ---------------- Services list (2 columns, numbered) ---------------- */

/*
 * The seven services read DOWN the left column first (01-04) and then down the
 * right (05-07), which is how Figma stacks them — not left-to-right in pairs.
 */
.woo-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	column-gap: 40px;
}

/* A list item is 103px tall with a 0.5px rule beneath it. */
.woo-service {
	display: grid;
	grid-template-columns: 60px 1fr;
	align-content: center;
	align-items: start;
	min-height: 103px;
	box-sizing: border-box;
	padding-block: 20px;
	border-bottom: 0.5px solid var(--woo-rule);
}

/* The service numbers are #EF4444 in the design, a shade off the logo red. */
.woo-service__no {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
	color: var(--wp--preset--color--number);
}

.woo-service__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

.woo-service__desc {
	margin: 5px 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

/* ---------------- Footer (frame height 479) ---------------- */

.woo-footer {
	padding-block: 100px 50px;
}
@media screen and (max-width: 782px) {
	.woo-footer {
		padding-block: var(--woo-mobile-outer) 0;
	}
}

/*
 * Column positions read off the file, as percentages of the 1200px content
 * width so they shrink together. The 79px of air between the heading column
 * (400px of copy) and contact is its own track — otherwise the 400px signup
 * fills the first column as soon as the page is narrower than the frame.
 *
 * 400 / 79 / 317 / 151 / 253
 */
.woo-footer__grid {
	display: grid;
	grid-template-columns: 28.333% 6.583% 26.417% 12.583% 21.083%;
	gap: 0;
	align-items: start;
}

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

/* Grid items default to min-width:auto, which lets a long line push the track
   wider than its declared size. */
.woo-footer__grid > *,
.woo-footer__base > * { min-width: 0; }

/* 254x72 in the file: two lines. Graphik renders a touch wider on the web, so
 * the box gets a few pixels more rather than being forced onto three lines. */
.woo-footer__title {
	margin: 0;
	max-width: 280px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

.woo-footer__contact a {
	display: block;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
	text-decoration: none;
}

.woo-footer__label {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	font-weight: 500;
}

.woo-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	font-weight: 500;
}

.woo-footer__menu a { text-decoration: none; }

.woo-footer__place + .woo-footer__place { margin-top: 24px; }
.woo-footer__place strong { display: block; font-size: var(--wp--preset--font-size--tiny); letter-spacing: var(--woo-ls-tiny); font-weight: 500; margin-bottom: 4px; }
.woo-footer__place span { display: block; line-height: 1.4; }

/* "Sign up" sits 147px below the heading; the field fills the first track. */
.woo-signup {
	margin-top: 75px;
	width: 100%;
}

.woo-signup label {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	font-weight: 500;
	margin-bottom: 20px;
}

.woo-signup input {
	width: 100%;
	max-width: 100%;
	height: 31px;
	box-sizing: border-box;
	border: 0;
	border-bottom: 1px solid var(--woo-rule);
	padding: 0 0 8px;
	font: inherit;
	background: transparent;
}

.woo-signup input::placeholder { color: var(--wp--preset--color--muted); }

.woo-signup__row {
	position: relative;
	display: flex;
	align-items: center;
}

.woo-signup__row input { padding-right: 28px; }

.woo-signup__submit {
	position: absolute;
	right: 0;
	bottom: 6px;
	display: flex;
	border: 0;
	background: none;
	padding: 0;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
}

.woo-signup__submit:disabled { opacity: 0.5; cursor: default; }

/* Bots fill every input; a real visitor and screen reader never reach this one. */
.woo-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.woo-signup__message {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

.woo-signup__message--error { color: var(--wp--preset--color--accent); }

/* The lower row starts at y=391: the upper row is 216 tall from y=100, so 75px
 * of air follows it. The grid is capped at 216 so a taller column cannot push
 * the logo down. */
.woo-footer__base {
	display: grid;
	grid-template-columns: 39.917% 60.083%;
	gap: 0;
	align-items: start;
	margin-top: 75px;
}

.woo-footer__mark { width: 107px; color: var(--wp--preset--color--accent); }
.woo-footer__mark svg, .woo-footer__mark img { display: block; width: 100%; height: auto; }

/* 721px wide, mid grey #808080 — a shade darker than the muted text elsewhere. */
/* 12/19 in the file — a size below the smallest preset, and set solid. */
.woo-acknowledgement {
	margin: 0;
	max-width: 721px;
	font-size: var(--wp--preset--font-size--fine);
	letter-spacing: 0;
	line-height: 1.583;
	color: #808080;
}

/* ---------------- Narrow screens ----------------
 * The 2026 design has no mobile frames, so this is the sensible reduction of
 * the desktop layout, not a copy of a design: single column, same type scale.
 */
@media (max-width: 782px) {
	:root { --woo-gutter: 20px; }

	.woo-nav { flex-wrap: wrap; padding-block: 24px; }
	.home .woo-nav__logo {
		width: calc(60px + 120px * var(--woo-logo-scale));
		height: calc(19px + 37.36px * var(--woo-logo-scale));
	}
	.woo-nav__links { gap: 16px; flex-wrap: wrap; }

	.woo-hero { min-height: 60vh; flex-direction: column; align-items: flex-start; padding-bottom: 48px; }
	.woo-services { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
	.woo-service:last-child { border-bottom: none; padding-bottom: 0; }
	.woo-statement { margin-bottom: 48px; }
}

/* ---------------- Inner page hero (Services 02, height 847) ---------------- */

.woo-eyebrow {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * The inner-page hero is CENTRED, not left aligned: in the file the eyebrow,
 * the 540px headline and the button all sit on the middle of the 1280 artboard.
 * Built left aligned it reads as a different page entirely.
 */
/*
 * The inner-page hero (Projects, Insights, About us) is ranged left inside the
 * 1200px column: 40px of air under the navigation, the eyebrow, then 20px to a
 * 45/58 headline that runs at most 976px, then 20px to the lead. Services is
 * the exception and overrides all of this further down.
 */
.woo-pagehero {
	padding-block: 40px 50px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.woo-pagehero .woo-eyebrow { margin: 0 0 20px; }

.woo-pagehero__title {
	margin: 0 0 20px;
	max-width: 976px;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: var(--woo-ls-display);
	line-height: 1.289;                               /* 58 / 45 */
	font-weight: 500;
}

.woo-pagehero__lead {
	margin: 0;
	max-width: 976px;
	line-height: 1.4;                                 /* 22.4 / 16 */
}

/* Insights holds its lead to 658px; Projects lets it run the full 976. */
.woo-pagehero--narrow .woo-pagehero__lead { max-width: 658px; }

/* About us closes on the headline, so it carries 100px of air beneath it —
   and the headline drops the margin it would otherwise add on top of that. */
.woo-pagehero--tall { padding-bottom: 100px; }
.woo-pagehero__title:last-child { margin-bottom: 0; }

/* ---------------- Service blocks with capability lists ---------------- */

/*
 * A service block is as tall as its picture — 321px for most, 398px for the
 * first, which carries a button under the image — and blocks sit exactly 100px
 * apart. Padding of my own on top of that was making every block 407px.
 */
/*
 * A service block is two columns: the picture on the left with the block's link
 * under it, the heading and its capability list on the right at 580px. The
 * first block's picture is a touch wider (580 against 570) and is the only one
 * with a link. Blocks sit 100px apart.
 */
.woo-svc {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	padding: 0;
	margin-bottom: 100px;
}

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

.woo-svc__media { flex: 0 0 570px; }
.woo-svc:first-child .woo-svc__media { flex-basis: 580px; }

.woo-svc__body { flex: 0 1 580px; }

.woo-svc__name {
	margin: 0 0 5px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

.woo-svc__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* Each capability is an 18px line on a 0.5px rule, 42px apart; a line that
   wraps grows the row to 48, as the last block's longest entry does. */
.woo-svc__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	line-height: 1.385;                              /* 18.0 at 13px */
}

/* 18 of text + 11.5 of air + the 0.5 rule = the 30 Figma draws; a wrapped
   line comes to 48, which is what the file shows for the longest entry. */
.woo-svc__list li {
	padding-bottom: 11.5px;
	border-bottom: 0.5px solid var(--woo-rule);
}

/* ---------------- High trust + closing call to action ---------------- */

/* High trust opens with a 1px rule, the closing call to action with 0.5px. */
.woo-trust {
	padding-block: 100px;
	border-top: 1px solid var(--woo-rule);
}

/*
 * The closing call to action is centred on the page, not ranged left: Figma
 * puts a 530px headline at x=375 with the lead 20px under it and the link 40px
 * under that, inside 100px of padding top and bottom (374px in all).
 */
.woo-cta {
	padding-block: 100px;
	border-top: 0.5px solid var(--woo-rule);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * The high trust block is two rows. The top row pairs the question with a red
 * 200px square; the bottom row sets a 479px picture beside a 393px column of
 * copy whose link is pinned to the picture's bottom edge.
 */
.woo-trust__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

/*
 * Figma hugs this text box to 338px, which is the exact width of its first
 * line once the -0.52px tracking is counted. Rounding at that width costs the
 * line a pixel and breaks it early, so the box gets two to sit in.
 */
.woo-trust__ask { max-width: 400px; }

.woo-trust__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading);   /* 26px */
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;                                 /* 36.4px */
	font-weight: 500;
}

.woo-trust__sectors {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--body);  /* 16px */
	line-height: 1.4;
}

/* Figma: 200x200, fill #FF021F, arrow stroked at 10.26px. */
.woo-trust__mark {
	flex: 0 0 200px;
	width: 200px;
	height: 200px;
	background: var(--wp--preset--color--accent);
}

.woo-trust__mark svg { display: block; width: 100%; height: 100%; }

/*
 * Figma calls this component "Animation Arrow". The two variants differ
 * only in that both of the arrow's vectors carry rotation -0.7854rad —
 * the glyph turns 45deg, so the left-pointing arrow becomes a down-left one.
 *
 * The direction comes from where the chevron's centre lands, not from the
 * bounding boxes: a node box rotated 45deg always reports a square box, so
 * those numbers say nothing about the sign. Inside the 200x200 icon the rule's
 * centre sits at (99.9, 99.5) and the chevron's at (70.8, 99.5); in the turned
 * variant the rule stays put and the chevron moves to (79.4, 120.6) — down and
 * right. Turning the glyph about the rule's centre by -45deg predicts
 * (79.2, 120.2), which matches; +45deg would send it up to (79.5, 78.9).
 *
 * The turn fires once, when the copy block below has scrolled past the
 * midpoint of the viewport — not on hover.
 */
.woo-trust__mark svg {
	transform-origin: 50% 50%;   /* rule centre (99.9, 99.5) of 200, i.e. dead centre */
	transition: transform 300ms ease-out;
}

.woo-trust__mark.is-turned svg {
	transform: rotate(-45deg);
}

.woo-trust__body {
	display: flex;
	align-items: stretch;
	gap: 60px;                                        /* 579 - (40 + 479) */
	margin-top: 100px;                                /* 4764 - 4664 */
}

/* The picture is desaturated in the file (image filter saturation: -1). */
.woo-trust__img {
	flex: 0 0 479px;
	width: 479px;
	height: 473px;
	object-fit: cover;
	filter: grayscale(1);
}

.woo-trust__col {
	flex: 0 0 393px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;   /* the link is 182px wide, not the whole column */
}

.woo-trust__copy p { margin: 0 0 20px; }              /* paragraphSpacing 20 */
.woo-trust__copy p:last-child { margin-bottom: 0; }

/* Only the opening line carries the heavier 20px setting. */
.woo-trust__lead {
	font-size: var(--wp--preset--font-size--lead);    /* 20px */
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
	font-weight: 500;
}

.woo-trust__copy p + p {
	font-size: var(--wp--preset--font-size--body);  /* 16px */
	line-height: 1.4;
	font-weight: 400;
}

.woo-cta__lead {
	margin: 0 0 40px;
	max-width: 720px;
	font-size: var(--wp--preset--font-size--body);   /* 16/22.4, not the 20px lead */
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.woo-trust__mark svg { transition-duration: 0s; }
}

/*
 * Figma colours part of a heading rather than all of it: the CTA's key phrase
 * carries its own #FF021F fill inside one text node.
 */
.woo-hot { color: var(--wp--preset--color--accent); }

.woo-cta__title {
	margin: 0 0 20px;
	/*
	 * Figma hugs this to 530px, but its own first line measures 533 once the
	 * -0.52 tracking is counted — rounding at 530 breaks the line early, so the
	 * box gets the few pixels it actually needs. The break itself is explicit.
	 */
	max-width: 536px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;                                 /* 36.4 / 26 */
	font-weight: 500;
}

/* Below the 1200px column the two fixed widths have to give way. */
@media (max-width: 1023px) {
	.woo-trust__body { flex-wrap: wrap; gap: 40px; margin-top: 60px; }
	.woo-trust__img,
	.woo-trust__col { flex: 1 1 100%; width: 100%; }
	.woo-trust__col { gap: 24px; }
}

@media (max-width: 782px) {
	.woo-svc { gap: 20px; }
	.woo-svc__list { grid-template-columns: minmax(0, 1fr); }
	.woo-trust, .woo-cta, .woo-pagehero { padding-block: var(--woo-mobile-outer) var(--woo-mobile-inner); }
	.woo-trust__mark { flex-basis: 120px; width: 120px; height: 120px; }
}

/* ---------------- Contact (frame 08, hero 606 + statement 370) ---------------- */

/*
 * Contact is 534 + 616 with 50px between them (x=40..574, 624..1240). The form
 * column carries a 2px rule down its left edge and starts 42px past it.
 */
.woo-contact {
	display: grid;
	grid-template-columns: 534px minmax(0, 616px);
	column-gap: 50px;
	padding-block: 40px 0;
}

.woo-contact__title {
	margin: 20px 0 20px;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: var(--woo-ls-display);
	line-height: 1.289;
	font-weight: 500;
}

.woo-contact__lead {
	margin: 0;
	max-width: 522px;
	line-height: 1.4;
}

.woo-contact__form {
	border-left: 2px solid var(--wp--preset--color--ink);
	padding-left: 40px;
}

.woo-contact__formtitle {
	margin: 0 0 40px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

/* A field is a 31px box: the placeholder on a 1px rule, 40px to the next. */
.woo-field {
	position: relative;
	margin: 0 0 40px;
}

/* The required marker is WOO red in the file, like the CTA's key phrase. */
.woo-field__req {
	position: absolute;
	right: 0;
	top: 0;
	line-height: 1.125;
	color: var(--wp--preset--color--accent);
}

.woo-field input,
.woo-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 31px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	background: transparent;
	padding: 0 0 12px;
	font: inherit;
	line-height: 1.125;                               /* 18 / 16 */
	color: inherit;
}

.woo-field--tall textarea { height: 94px; resize: vertical; }

.woo-field input::placeholder,
.woo-field textarea::placeholder { color: inherit; opacity: 1; }

.woo-field input:focus,
.woo-field textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Screen-reader-only: the visible label is the placeholder. */
.woo-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woo-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	height: 22px;
}

.woo-submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	color: inherit;
}

/* The Button component's hover state, applied wherever that component is used. */
.woo-section__link,
.woo-hero__cta,
.woo-card__more,
.woo-svc__cta,
.woo-filter__toggle,
.woo-quote__step,
.woo-submit { transition: color var(--woo-quick) var(--woo-ease); }

.woo-submit { transition: color var(--woo-quick) var(--woo-ease), opacity var(--woo-quick) var(--woo-ease); }

.woo-submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.woo-section__link:hover,
.woo-section__link:focus-visible,
.woo-hero__cta:hover,
.woo-hero__cta:focus-visible,
.woo-card__more:hover,
.woo-card__more:focus-visible,
.woo-footer__menu a:hover,
.woo-footer__menu a:focus-visible,
.woo-svc__cta:hover,
.woo-svc__cta:focus-visible,
.woo-filter__toggle:hover,
.woo-quote__step:hover,
.woo-quote__step:focus-visible,
.woo-submit:hover,
.woo-submit:focus-visible { color: var(--wp--preset--color--accent); }

.woo-required {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	color: var(--wp--preset--color--muted);
}

/* Bots fill every input; a real visitor and screen reader never reach this one. */
.woo-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.woo-field__error {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--accent);
}

.woo-field input.is-invalid,
.woo-field textarea.is-invalid { border-bottom-color: var(--wp--preset--color--accent); }

.woo-form__message {
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--accent);
}

/* The closing line is set at 200px in the design — it is the page, not a heading. */
/* "Say hello!" sits 50px under the form and 100px above the footer rule. */
.woo-shout { margin-block: var(--woo-outer) !important; text-align: center; }
@media screen and (max-width: 782px) {
	.woo-shout {
		margin-block: var(--woo-mobile-outer) !important;
	}
}

.woo-shout__word {
	margin: 0;
	font-size: clamp(56px, 15.6vw, 200px);
	line-height: 1.1;                    /* 220 / 200 */
	font-weight: 400;
	letter-spacing: -0.01em;             /* -2px at 200px */
}

.woo-shout__lead {
	margin: 0 0 20px;
	line-height: 1.4;
}

/*
 * Thank you gives the mark the whole page: 150px of air, the 200/220 line, then
 * 211px before the confirmation and its link, and 100px down to the footer.
 */
.woo-shout--ty {
	padding-block: 150px 100px;
	text-align: center;
}

.woo-shout--ty .woo-shout__word { margin-bottom: 211px; }
.woo-shout--ty .woo-section__link { justify-content: center; }

@media (max-width: 782px) {
	.woo-contact { grid-template-columns: 1fr; padding-top: 40px;  padding-bottom: 0; }
}

/* ---------------- About us (frame 07) ---------------- */

/* ---------------- About us ----------------
 * Seven bands, measured off frame 07: 294 / 670 / 555 / 482 / 630 / 404 / 808.
 */

/* The vision: a 451px column of copy beside a 480x620 picture, the closing
   line pinned to the foot of the column so both end on the same edge. */
.woo-vision {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 40px;
	margin-block: 0 var(--woo-outer);
}

@media screen and (max-width: 782px) {
	.woo-vision {
		margin-block: 0 var(--woo-mobile-outer);
	}
}

.woo-vision__col {
	flex: 0 0 451px;
	/* min-height: 620px; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.woo-vision__statement {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 400;
}

.woo-vision__sub {
	margin: 0;
	max-width: 373px;
	line-height: 1.4;
}

.woo-vision__img {
	flex: 0 0 480px;
	width: 480px;
	height: 620px;
	object-fit: cover;
}

/* Four pictures, 386x217, two to a row — the second row ranged right. */
.woo-strip {
	margin-block: 0 var(--woo-outer);
}
@media screen and (max-width: 782px) {
	.woo-strip {
		margin-block: 0 var(--woo-mobile-outer);
	}
}

.woo-strip__row {
	display: flex;
	gap: 20px;
}

.woo-strip__row + .woo-strip__row { margin-top: 20px; }
.woo-strip__row--right { justify-content: flex-end; }

.woo-strip img {
	width: 386px;
	height: 217px;
	object-fit: cover;
}

/*
 * The three story bands share a two-column measure — 580px on the right at
 * x=660 — but differ in what stands opposite: nothing, a 480x480 picture, or
 * the three links.
 */
.woo-story {
	display: grid;
	grid-template-columns: minmax(0, 580px) minmax(0, 580px);
	justify-content: space-between;
	gap: 100px 40px;
	margin-block: 0 var(--woo-mobile-outer);
}

.woo-story__lead {
	grid-column: 1 / -1;
	margin: 0;
	max-width: 891px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 400;
}

.woo-story__body { grid-column: 2; }
.woo-story__body p { margin: 0 0 20px; line-height: 1.4; }
.woo-story__body p:last-child { margin-bottom: 0; }
.woo-story__year { font-weight: 500; }

/* "Today": the picture sits left and the copy is set on its bottom edge. */
.woo-story--pic { align-items: end; margin-block: var(--woo-mobile-outer) 100px; }

.woo-story__img {
	grid-column: 1;
	width: 480px;
	height: 480px;
	object-fit: cover;
	align-self: start;
}

/* The last band opens flush with the one above and closes on the links. */
.woo-story--links { margin-block: 0 100px; align-items: end; }
.woo-story--links .woo-story__body { max-width: 499px; }

.woo-story__ctas {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	gap: 20px;
	align-content: end;
	justify-items: start;
}

/*
 * The team.
 *
 * Not a photo grid: in the design each person is a 575x58 row — name on the
 * left, job title 317px across — stacked in two columns 50px apart.
 */
.woo-team {
	padding-block: var(--woo-outer);
	border-top: 0.5px solid var(--woo-rule);
}
@media screen and (max-width: 782px) {
	.woo-team {
		padding-block: var(--woo-mobile-outer);
	}
}

.woo-team .woo-section__title { margin: 0 0 50px; }

.woo-team__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 100%));
	justify-content: space-between;
	gap: 0 50px;
	margin-top: 0;
}

.woo-team__col { margin: 0; padding: 0; list-style: none; }

.woo-member {
	position: relative;
	display: grid;
	grid-template-columns: 317px minmax(0, 1fr);
	align-items: center;
	min-height: 58px;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
}

/* The job title is #8C8C8C and ends on the row's right edge, not the name's. */
.woo-member__role {
	text-align: right;
	color: var(--wp--preset--color--muted);
}

/*
 * The Team Card component set has a "Team Member Pic" variant, 459x666: a
 * 459x600 photograph at the card's own x=0 with the name and job title moved
 * beneath it. The row state ("Just name", 459x58) carries the very same
 * rectangle with visible: false.
 *
 * Figma wires NO trigger to that variant — the whole set has interactions: []
 * — so the reveal itself is our reading of the design, not a measurement. What
 * is measured is the picture's geometry: 459x600 at the card's left edge. It
 * used to sit at left: 317px here, which pushed it 156px past the 1280 measure
 * on the right-hand column and made the About page scroll sideways.
 */
.woo-member__pic {
	position: absolute;
	left: 0;
	top: 50%;
	width: 459px;
	max-width: 100%;
	height: 600px;
	transform: translateY(-50%) scale(.98);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 2;
	transition: opacity var(--woo-quick) var(--woo-ease),
	            transform var(--woo-quick) var(--woo-ease),
	            visibility 0s linear var(--woo-quick);
}

.woo-member__pic img { width: 100%; height: 100%; display: block; object-fit: cover; }

.woo-member:hover .woo-member__pic,
.woo-member:focus-within .woo-member__pic {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1);
	transition-delay: 0s;
}

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

/* ---------------- Article cards (Insights, Journal) ---------------- */

.woo-cards { padding-block: 0; margin-block: 0; }

/*
 * Three 375px columns inside the 1200px measure leave 37.5px between them; rows
 * sit 50px apart. A card is 384 tall: a 210px picture, 20px, a 20/28 title,
 * 20px, the 26px tag pills, 30px, then "Read more".
 */
.woo-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px 37.5px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Project cards are 580x368 with a 326px picture, two to a row. */
.woo-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

.woo-card__shot { position: relative; }

.woo-card__shot img { width: 100%; height: auto; display: block; object-fit: cover; }

/* The card's video sits over its own poster, filling the same box. */
.woo-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	pointer-events: none;
}

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

.woo-cards__grid:not(.woo-cards__grid--2) .woo-card__shot img { height: 210px; }

/*
 * Every project card shows the same shape.
 *
 * The design's picture is 326px tall in a 580px card, but the uploads are not
 * all cut to that — 1920x1100, 2160x1440 and 1440x965 all sit in the archive —
 * so at height:auto each card took its own file's ratio and the rows came out
 * ragged. The box carries the design's proportion at whatever width the column
 * happens to be, and object-fit crops the picture into it.
 *
 * The journal pair on the homepage uses this grid as well; its own 210px
 * picture is set further down, so the box is released there.
 */
.woo-cards__grid--2 .woo-card__shot {
	aspect-ratio: 580 / 326;
}

.woo-cards__grid--2 .woo-card__shot img {
	height: 100%;
}

.woo-split .woo-cards__grid--2 .woo-card__shot {
	aspect-ratio: auto;
}

/*
 * Figma's article thumbnail is a fixed 384px component, so every row lines up
 * whatever the headline's length. The title keeps its two-line box and clips
 * anything longer rather than pushing the card taller.
 */
.woo-cards__grid:not(.woo-cards__grid--2) > * { 
	/* min-height: 384px;  */
}

.woo-cards__grid:not(.woo-cards__grid--2) .woo-card__title {
	/* min-height: 56px; */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* WordPress gives the post-title and read-more blocks margins of their own,
   so these are written one level deeper to win. */
.woo-cards__grid .woo-card__title {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
	font-weight: 400;
}

.woo-card__title a { text-decoration: none; }

/*
 * Tags are 26px pills, 1px black, 10/12 at 500 — not the small caps I had.
 * The type belongs to the pill itself, not to the card grid: scoping it to
 * .woo-cards__grid left the same block in the article head inheriting 16px,
 * which made every pill there about 16px too wide.
 */
.woo-card__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--woo-ls-micro);
	font-weight: 500;
}

/* Only the card needs to out-rank the block's own margin. */
.woo-cards__grid .woo-card__tag { margin: 20px 0 0; }

/*
 * Figma's Tag: 52x26 hugging "News", radius 100, a 1px #000000 stroke drawn
 * INSIDE, no fill, padding 6/12, text 10/12 at 500 with -0.2 tracking. With
 * border-box the 12px padding lands the pill on 1+12+26+12+1 = 52 exactly;
 * the 13px I had here was compensating for a border I had not counted.
 */
.woo-card__tag a,
.woo-tags a,
.btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 26px;
	padding-inline: 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 100px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--woo-quick) var(--woo-ease),
	            color var(--woo-quick) var(--woo-ease);
}

/*
 * Tag Property 1=Variant2: black fill, white 10/12 type, the same 1px
 * stroke. The rest state is an empty pill; hover inverts it.
 */
.woo-card__tag a:hover,
.woo-card__tag a:focus-visible,
.woo-tags a:hover,
.woo-tags a:focus-visible,
.btn:hover,
.btn:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* WordPress writes a separator between terms; the pills stand on their own. */
.woo-card__tag .wp-block-post-terms__separator { display: none; }

.woo-cards__grid .woo-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;                       /* 109 - 83 - 20, read off the button */
	margin: 30px 0 0;
	padding: 0;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

@media (max-width: 900px) {
	.woo-team__cols { grid-template-columns: 1fr; }
	.woo-member { grid-template-columns: 1fr; min-height: 0; padding-block: 8px; }
	.woo-story { grid-template-columns: 1fr; }
}

/* While the splash plays the live site locks the page with a class on <body>. */
body.woo-preloading { overflow: hidden; }

/* ---------------- Preloader (frame 00 + the live site's timeline) ----------------

   Frame 00 is static: the 313x98 mark in white, dead centre on a field of
   #FF021F (x=484 y=351 of 1280x800). The movement is not in the file, so it
   comes from the site that is live today —
   wp-content/themes/wooagency/public/assets/js/all.js — which drives it with a
   GSAP timeline:

     s.tl.staggerFromTo(logo.querySelectorAll('span'), 0.5,
                        { opacity: 0, y: '1rem' },
                        { delay: 1, opacity: 1, y: 0, ease: 'expo.inOut' }, 0.05)
         .to(intro, 1.5, { clipPath: 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)',
                           ease: 'expo.inOut' }, '+=.75')
         .set(intro, { autoAlpha: 0 });

   Read as a schedule: one second of plain red, then the three letters rise and
   fade in over 0.5s at 0.05s apart (last one lands at 1.6s), three quarters of
   a second of stillness, then the whole panel wipes off to the right over 1.5s
   and is gone at 3.85s. The panel there is position: fixed; right: 0 with
   clip-path collapsing toward its right edge, and the body carries a scroll
   lock for the duration.

   Two details worth writing down. The letters live inside a scale(0.5)
   wrapper on the live site, so their 1rem of travel reads as 8px on screen —
   which is 8 user units here, because the mark is drawn at its 313px design
   size. And expo.inOut has no exact bezier; cubic-bezier(.87, 0, .13, 1) is
   the standard easeInOutExpo curve and tracks it closely.
   ---------------------------------------------------------------------------- */

.woo-preloader {
	position: fixed;
	inset: 0;
	z-index: 101;                  /* the live site's own stacking value */
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--accent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	animation: woo-preloader-wipe 1500ms cubic-bezier(.87, 0, .13, 1) 2350ms forwards,
	           woo-preloader-gone 1ms linear 3850ms forwards;
}

.woo-preloader__mark { width: 313px; max-width: 60vw; display: block; }
.woo-preloader__mark svg { width: 100%; height: auto; display: block; }

/* One letter each, 0.05s apart, from 8 units down and transparent. */
.woo-preloader__ch {
	opacity: 0;
	transform: translateY(8px);
	animation: woo-preloader-letter 500ms cubic-bezier(.87, 0, .13, 1) forwards;
}

.woo-preloader__ch:nth-of-type(1) { animation-delay: 1000ms; }
.woo-preloader__ch:nth-of-type(2) { animation-delay: 1050ms; }
.woo-preloader__ch:nth-of-type(3) { animation-delay: 1100ms; }

@keyframes woo-preloader-letter {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes woo-preloader-wipe {
	from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	to   { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

/* GSAP's autoAlpha: opacity and visibility together, so nothing is left to
   catch a click or a screen reader. */
@keyframes woo-preloader-gone {
	to { opacity: 0; visibility: hidden; }
}

/* Only the first page of a visit plays the splash; the inline script stamps
   this class before the first paint on every page after it. */
.woo-preloader.is-skipped { display: none; }

/*
 * What the other pages get instead. Figma hangs the only transition it defines
 * on this journey on the preloader's own logo — ON_CLICK to the home page,
 * DISSOLVE, EASE_OUT, 0.3s — so that is the arrival for every page after the
 * first, the logo back to home included.
 */
body.woo-arriving { animation: woo-arriving 300ms ease-out both; }

@keyframes woo-arriving {
	from { opacity: 0; }
	to   { opacity: 1; }
}

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

/* ---------------- Project detail (frame 04) ---------------- */

/*
 * The hero is the project's own picture running the full 1280 for 844px, with
 * the title set on it 88px up from the foot — not a banner with the title
 * underneath.
 */
.woo-projecthero {
	position: relative;
	height: 844px;
	display: flex;
	align-items: flex-end;
	padding: 0 0 88px;
	box-sizing: border-box;
	overflow: hidden;
	color: var(--wp--preset--color--paper);
}

/* Image stays full-bleed; the title uses the same .woo-shell column as the nav. */
.woo-projecthero > .woo-shell {
	position: relative;
	z-index: 1;
	margin-block-start: 0;
	margin-inline: auto;
}

.woo-projecthero__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.woo-projecthero__shot img,
.woo-projecthero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/*
 * The still is the video's poster; when motion is unwelcome it is all there is. The site
 * this content came from played the banner video on desktop only (d-none d-lg-block), and
 * the mobile crop in the <picture> is the frame that stands in its place.
 */
@media (prefers-reduced-motion: reduce), (max-width: 991px) {
	.woo-projecthero__video { display: none; }
}

/*
 * Figma lays a third fill over the video: black to #666666 down the top 21.5%
 * of the frame, multiplied at 20%. It is what keeps the navigation legible when
 * the animation's white linework runs behind it.
 *
 * It is drawn only where the project asks for it: banner_block.overlay is off on eleven of
 * the twenty projects, whose banners were composed dark enough to carry the title unaided.
 */
.woo-projecthero--overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	/* The ramp ends at 21.48% of the frame; below it the fill stays #666666. */
	background: linear-gradient(to bottom, #000000 0%, #666666 21.48%, #666666 100%);
	mix-blend-mode: multiply;
	opacity: 0.2;
	z-index: 0;
	pointer-events: none;
}

/* banner_block.color_of_banner_text: paper is the default, ink is the other choice. */
.woo-projecthero--ink { color: var(--wp--preset--color--ink); }

.woo-projecthero__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: var(--woo-ls-display);
	line-height: 1.289;
	font-weight: 500;
}

/* Below it: a 600px summary with its tags, and 580px of copy opposite. */
.woo-projectinfo {
	display: grid;
	grid-template-columns: minmax(0, 600px) minmax(0, 580px);
	justify-content: space-between;
	gap: 20px;
	padding-block: var(--woo-outer) 0;
}
@media screen and (max-width: 782px) {
	.woo-projectinfo {
		padding-block: var(--woo-mobile-outer) 0;
		gap: var(--woo-mobile-inner);
	}
}

.woo-projectinfo__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;
	font-weight: 500;
}

.woo-projectinfo__head .woo-tags { margin-top: 40px; }
@media screen and (max-width: 782px) {
	.woo-projectinfo__head .woo-tags { margin-top: var(--woo-mobile-inner); }
}
/* WordPress opens the content block with its own 16px; the design butts it
   against the summary opposite. */
.woo-projectinfo > .woo-projectinfo__body { margin-block-start: 0; }
.woo-projectinfo__body > * { margin-block: 0 20px; line-height: 1.4; }
.woo-projectinfo__body > *:last-child { margin-bottom: 0; }

/*
 * The same Tag component as the article cards: a 26px pill, 1px black, 10/12
 * at 500. It was drawn here with a grey border and set in small caps, neither
 * of which the file does.
 */
.woo-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-content: start;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--woo-ls-micro);
	font-weight: 500;
}

.woo-tags .wp-block-post-terms__separator { display: none; }

/* ---------------- Journal article (frame 06) ----------------
 * The head is centred: an 800px headline, the date and byline 40px under it,
 * then the tags. The body runs in a 580px column with its pictures bleeding
 * out to 791px, both centred on the page.
 */

.woo-articlehead {
	padding-block: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.woo-articlehead__title {
	margin: 0;
	max-width: 800px;
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: var(--woo-ls-display);
	line-height: 1.289;
	font-weight: 500;
}

/*
 * Figma's Frame 1033: horizontal, itemSpacing 10, centred, 163x18 — the date
 * and the byline both 13/18 Regular at -0.13 tracking and filled #8C8C8C,
 * not black. Ten pixels each side of the dot, not twelve.
 */
.woo-articlemeta {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* A 2x2 #8C8C8C dot between the date and the byline, as in the file. */
.woo-articlemeta > * + *::before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	vertical-align: middle;
}

.woo-articlehead__tags { justify-content: center; margin-top: 20px; }

.woo-article {
	/* Frame 06 spaces the whole column in 50s: the tags sit 50 above the picture
	   (tags end at 362, the picture starts at 412) and every block after it is
	   another 50 apart. */
	margin-block: 50px!important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

/*
 * The copy is a group, and a group inside a flow parent is handed WordPress's
 * block gap on top of the flex gap above — which put 66px between the picture
 * and the first paragraph instead of 50.
 */
.woo-article > * { margin-block-start: 0; }
@media screen and (max-width: 782px) {
	.woo-article {
		margin-block: 50px !important;
	}
	.woo-article__body{
		margin-top: 0 !important;
	}
}

.woo-article__shot { margin: 0; width: 100%; max-width: 791px; }

.woo-article__shot img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 791 / 445;
	object-fit: cover;
}

.woo-article__body { width: 100%; max-width: 580px; }
.woo-article__body > * { margin-block: 0 20px; line-height: 1.4; }
.woo-article__body > *:last-child { margin-bottom: 0; }

/* Pictures inside the copy bleed past the measure to the same 791px. */
.woo-article__body figure,
.woo-article__body .wp-block-image {
	width: 791px;
	max-width: calc(100vw - 2 * var(--woo-gutter));
	margin-inline: calc((580px - 791px) / 2);
	margin-block: 50px;
}

.woo-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 767px) {
	.woo-projectinfo { grid-template-columns: 1fr; }
	.woo-cards__grid--2 { grid-template-columns: 1fr; }
}

/* ---------------- Client wall (frame [CLIENTS], height 487) ---------------- */

/* The logo block is 150px tall in the design, sitting 100px under the heading. */
.woo-clients {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: 30px 32px;
	min-height: 150px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woo-client img {
	display: block;
	width: 100%;
	height: 44px;
	object-fit: contain;
	object-position: center;
	filter: grayscale(1);
	opacity: .75;
	transition: opacity .2s ease, filter .2s ease;
}

.woo-client img:hover { filter: none; opacity: 1; }

/*
 * Figma: 16/22.4 Regular, fill #000000, box 276 wide, textWrapStyle BALANCE.
 * The grey I had here was invented — the design has no muted body copy in this
 * band — and it is the balanced wrap that puts "and" on the third line rather
 * than the second.
 */
.woo-section__sub {
	margin: 8px 0 0;
	max-width: 276px;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.woo-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==================================================================
   Line breaking, straight from the design.

   Figma stores a wrap style per text node, and this file uses it everywhere:
   40 of the 16px body paragraphs carry textWrapStyle BALANCE and the four
   26px statement/quote blocks carry PRETTY. Everything else is left alone
   (427 nodes have no wrap style at all). Letting the browser wrap greedily
   instead is what moved a word onto the wrong line in the Insights band and
   in every service subtitle.

   BALANCE keeps the same number of lines and evens their lengths, so no
   section changes height; only the break points move.
   ================================================================== */

.woo-section__sub,
.woo-svc__lead,
.woo-service__desc,
.woo-pagehero__lead,
.woo-trust__sectors,
.woo-cta__lead,
.woo-vision__sub,
.woo-contact__lead,
.woo-shout__lead {
	text-wrap: balance;
}
.woo-story__body p{
	text-wrap: pretty;
}

/* The 26px blocks: 705 (homepage statement), 873 (testimonial), 451 (vision)
   and 891 (the About opening) — all PRETTY, which only tidies the last line. */
.woo-statement,
.woo-quote__text,
.woo-vision__statement,
.woo-story__lead {
	text-wrap: pretty;
}

/* ---------------- Testimonial (frame [TESTIMONIAL], height 640) ---------------- */

/*
 * The testimonial is two stacked rows inside 100px of padding: the 873px quote
 * with its stepper arrows pinned right, then 100px of air, then the speaker's
 * name and the roll of commissions at 464px with the client mark opposite.
 */
.woo-quote {
	margin: 0;
	padding-block: 0;
}

.woo-quote__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

.woo-quote__text {
	margin: 0;
	max-width: 873px;
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: var(--woo-ls-heading);
	line-height: 1.4;                                 /* 36.4 / 26 */
	font-weight: 400;
}

.woo-quote__nav { display: flex; gap: 10px; flex: 0 0 auto; }

.woo-quote__step {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.woo-quote__step svg { display: block; }

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

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

.woo-quote__mark { flex: 0 0 229px; display: block; width: 229px; height: 160px; }

.woo-quote__name {
	display: block;
	margin-bottom: 12px;
	line-height: 1.4;
	font-weight: 500;
}

.woo-quote__roles {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	line-height: 1.4;                                 /* 18.2 / 13 */
}

/* ---------------- Project filter ---------------- */

/*
 * Figma places one 88x22 "Filter by" control 50px under the hero, and the grid
 * 50px under that. The categories only appear once it is opened.
 */
/* 50px of air above the control and 50 below it, so the grid starts at 532
   as it does in the file. Padding, because a margin here would collapse out
   of the wrapper the shortcode sits in. */
.woo-filter {
	padding-block: 50px;
}
@media (max-width: 782px) {
	.woo-filter {
		padding-block: var(--woo-mobile-inner);
	}
}

.woo-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	height: 22px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.woo-filter__toggle::-webkit-details-marker { display: none; }

/* The open state draws the same icon pointing up, so the head turns over on
   the panel's own timing rather than jumping. */
.woo-filter .woo-arrow { transition: transform var(--woo-quick) var(--woo-ease); }

.woo-filter[open] .woo-filter__toggle .woo-arrow { transform: rotate(180deg); }

/* Declaring a display value would defeat the closed <details>, so the list
   only becomes a column once the control is open. Open, the control is spaced
   in 25s: the groups sit 25px under the toggle and 25px from each other, and
   each label sits 12px over its own row of pills. */
.woo-filter__list { display: none; }

.woo-filter[open] .woo-filter__list {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding-top: 25px;
	/* The panel's height is animated open in filter.js: overflow so the pills
	   are not drawn outside it for those 300ms, and border-box so the height it
	   measures is the one it animates to — content-box would add the 25px on
	   top of every frame and overshoot. */
	overflow: hidden;
	box-sizing: border-box;
}

.woo-filter__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* "Services" and "Industry": the same 13px label the rest of the design uses.
   The Insights control has one unlabelled group, so this never renders there. */
.woo-filter__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	font-weight: 500;
	line-height: 1.4;
}

.woo-filter__terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* The pill, variant 1 of the Filter component (2430:10728): 10/1.2/-0.2 in
   Medium inside a 1px black hairline, 12 across and 6 down. The 6px gap is for
   the cross the chosen pill carries. */
.woo-filter a,
.woo-cards__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: -0.2px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 100px;
	padding: 6px 12px;
}

/* Hovering a pill fills it black (variant 2, 2430:10730) — the same move the
   chosen pill has already made, which is why hovering the chosen one changes
   nothing. The prototype leaves variant 4, the red fill, unused. */
.woo-filter a:hover,
.woo-cards__reset:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Chosen: variant 3 (2430:10733), filled black with the label in white and the
   cross after it. The pill grows to the right to make room for the cross;
   filter.js animates that width so the neighbours slide over rather than jump. */
.woo-filter a[aria-current] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.woo-filter__clear {
	display: block;
	flex: none;
}

/* While a filtered grid is on its way the cards already on screen stay put,
   dimmed, so the page keeps its height and the layout never jumps. */
.wp-block-query[aria-busy="true"] {
	opacity: 0.4;
	transition: opacity 120ms ease-out;
}

/* The archive closes with 100px of air before the testimonial's rule. */
.woo-cards--archive { padding-bottom: var(--woo-outer); }
@media screen and (max-width: 782px) {
	.woo-cards--archive {
		padding-bottom: var(--woo-mobile-outer);
	}
}

/* A filter that matches nothing. The design has no frame for it, so the line
   takes the lead's size and sits where the first row of cards would have. */
.woo-cards__empty {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.4;
}

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

/* ---------------- Full-width image band (About, Projects) ---------------- */

.woo-band {
	margin: 0;
}

/* The project's own picture: 1200x675 with 100px of air either side. Padding,
   because the shell rule above zeroes block margins on its children. */
.woo-band--gallery {
	margin: 0;
	padding-block: 100px;
}

@media screen and (max-width: 782px) {
	.woo-band--gallery {
		padding-block: var(--woo-mobile-outer);
	}
}
.woo-band--gallery img { aspect-ratio: 1200 / 675; object-fit: cover; }

.woo-band img {
	display: block;
	width: 100%;
	height: auto;
}


@media (max-width: 900px) {
}

/* ==================================================================
   Motion.
   Timings are the ones written in the prototype: 300ms for a hover,
   1250ms for the slow reveals, 1000ms for the preloader handing over.
   ================================================================== */

:root {
	--woo-quick: 300ms;
	--woo-slow: 1250ms;
	--woo-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

/* Hover, 300ms dissolve — links, nav, buttons, section links. */
.woo-nav__links a,
.woo-section__link,
.woo-hero__cta,
.woo-footer__menu a,
.woo-footer__contact a,
.woo-submit,
.woo-filter a,
.woo-card__title a {
	transition: color var(--woo-quick) var(--woo-ease),
	            border-color var(--woo-quick) var(--woo-ease),
	            background-color var(--woo-quick) var(--woo-ease),
	            opacity var(--woo-quick) var(--woo-ease);
}

.woo-card__title a:hover { color: var(--wp--preset--color--accent); }

/* The slow 1250ms hover lives on imagery: the picture lifts as it fades in. */
.woo-card__shot,
.woo-band { overflow: hidden; }

.woo-card__shot img,
.woo-client img {
	transition: transform var(--woo-slow) var(--woo-ease),
	            opacity var(--woo-slow) var(--woo-ease),
	            filter var(--woo-slow) var(--woo-ease);
}

.woo-card__shot:hover img { transform: scale(1.03); }

/*
 * The statement that reads itself.
 *
 * In the design this paragraph carries two colours inside one block of text:
 * black for the part already read, #E6E6E6 for the part still to come. That is
 * a scroll-linked reveal, so the words are wrapped one by one and lit as the
 * section travels up the screen.
 */
.woo-statement .woo-word,
.woo-story__lead .woo-word {
	color: var(--wp--preset--color--ghost);
	transition: color var(--woo-quick) var(--woo-ease);
}

.woo-statement .woo-word.is-read,
.woo-story__lead .woo-word.is-read { color: var(--wp--preset--color--ink); }

/*
 * Sections arriving from below, once.
 *
 * The starting state hides them, and only the observer in motion.js brings them
 * back — so it is applied only where scripting actually runs. Without it the
 * page reads normally instead of going blank.
 */
@media (scripting: enabled) {
	.woo-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--woo-slow) var(--woo-ease), transform var(--woo-slow) var(--woo-ease);
	}
}

.woo-reveal.is-in { opacity: 1; transform: none; }

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

	.woo-reveal,
	.woo-statement .woo-word,
	.woo-story__lead .woo-word {
		opacity: 1 !important;
		transform: none !important;
		color: var(--wp--preset--color--ink) !important;
		transition: none !important;
	}

	.woo-card__shot img,
	.woo-client img { transition: none; }
}

/* ---------------- Heading beside content (homepage Insights) ----------------
 * The design splits this section into a 276px column for the heading and a
 * 790px column for the two cards, with 134px of air between them.
 */
/*
 * 276px heading column, 790px of cards, 134px between them — and the column is
 * 384px tall with "Read all" sitting on its bottom edge, not tucked under the
 * paragraph.
 */
.woo-split {
	display: grid;
	grid-template-columns: 276px 790px;
	justify-content: space-between;
	gap: 0;
	/* min-height: 384px; */
}

.woo-split__side {
	display: flex;
	flex-direction: column;
}

.woo-split__side .woo-section__title { margin-bottom: 16px; }
.woo-split__side .woo-section__link { display: inline-flex; align-items: center; margin-top: auto; }
@media screen and (max-width: 1024px) {
	.woo-split__side .woo-section__link {
		margin-top: var(--woo-mobile-inner);
	}
}

/* Inside the split the two cards keep the article picture height, not the project one. */
/*
 * Two 375px thumbnails, 40px apart, each picture 210 tall. The 20px under the
 * picture is the title's own margin-top — putting a margin-bottom here as well
 * made the gap 40 and pushed the card's content past its 384px height, at
 * which point the flex column shrank every child: the picture rendered 194
 * tall instead of 210 and the two-line title 52 instead of 56.
 */
.woo-split .woo-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 375px)); gap: 40px; }
.woo-split .woo-cards__grid--2 .woo-card__shot img { height: 210px; }

@media (max-width: 767px) {
	.woo-split { grid-template-columns: 1fr; }
	.woo-split .woo-cards__grid--2 { grid-template-columns: 1fr; }
}

/* ---------------- Card heights, straight from the design ----------------
 * A project card is 580x368 (picture 326 + title beneath) and an article
 * thumbnail is 375x384 (picture 210 + tag, title and link beneath). Fixing the
 * card height is what keeps a section the same height as its frame, whatever
 * length of title the client types.
 */
/*
 * Fixed, not minimum: a card in the design is exactly 580x368, so a two-line
 * title has to be clipped rather than allowed to push the row — otherwise one
 * long project name makes the whole section taller than its frame.
 */
.woo-cards__grid--2 > li,
.woo-cards__grid--2 > .wp-block-post {
	/* height: 368px; */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.woo-split .woo-cards__grid--2 > li,
.woo-split .woo-cards__grid--2 > .wp-block-post {
	/* height: 384px; */
}

/* The link sits on the card's bottom edge; its 30px gap is set with the rest
   of the card's gaps above, so no padding of its own here. */
.woo-card__more { margin-top: auto; }

/* The image block brings its own figure margin; the card measures its own gaps.
   flex: none keeps the picture at the height the design gives it even when a
   long title would otherwise overflow the fixed card. */
.woo-card__shot { margin: 0; flex: none; }
.woo-card__shot img { margin: 0; }

/*
 * A project card names its client on one 16/22 line at 500 — not the 20/28
 * setting an article thumbnail uses. The journal pair on the homepage sits in
 * a --2 grid too, so it takes the article setting back.
 */
.woo-cards__grid--2 .woo-card__title {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: 0;
	line-height: 1.4;
	font-weight: 500;
}

.woo-split .woo-cards__grid--2 .woo-card__title {
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: var(--woo-ls-lead);
	line-height: 1.4;
	font-weight: 400;
}

/* Two lines of title keeps every article card the height the design gives it. */
.woo-cards__grid:not(.woo-cards__grid--2) .woo-card__title,
.woo-split .woo-cards__grid--2 .woo-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Block layout adds its own gap between blocks; the sections set their own. */
.woo-section > .wp-block-query,
.woo-section > .woo-split { margin-block: 0; }

/* ---------------- Service illustration (frame 02, 580x326) ----------------
 * Each service block carries a picture beside its capability list. The GIF
 * slideshow that once sat here was switched off by the designer in v0.2, so
 * this is a still — matching what the current file actually shows.
 */


.woo-svc__shot { margin: 0; }

.woo-svc__shot img {
	display: block;
	width: 100%;
	height: 321px;
	object-fit: cover;
}

.woo-svc:first-child .woo-svc__shot img { height: 327px; }

/* 50px of air between the picture and the link beneath it. */
.woo-svc__cta { margin-top: 50px; }


@media (max-width: 1200px) {
	.woo-svc { flex-wrap: wrap; }
	.woo-svc__media,
	.woo-svc__body { flex: 1 1 100%; }

	/* The first block's picture is sized by a stronger selector upstream, so it
	   has to be released by one just as strong. */
	.woo-svc__shot img,
	.woo-svc:first-child .woo-svc__shot img {
		width: 100%;
		height: auto;
		aspect-ratio: 580 / 326;
	}
}

/* ==================================================================
   Client wall (frame [CLIENTS], height 487).

   Sixteen 150px tiles, 20px apart, each carrying its own brand colour. The
   strip measures 2700px inside a 1200px frame and starts 1460px to the LEFT
   of it, so in the design it is already mid-travel: a marquee, not a grid.
   Making it a tidy row of grey logos on white — which is what this was
   before — is a different design altogether.

   The strip is a marquee: rAF in motion.js keeps the 60s pace of one
   2720px copy, and slows 6× on hover the way Holocron Marquee does.
   ================================================================== */

.woo-wall {
	overflow: hidden;
	padding-block: 0 100px;
	
}
@media screen and (max-width: 782px) {
	.woo-wall {
		padding-block: 0 var(--woo-mobile-outer);
	}
}

.woo-wall__track {
	display: flex;
	gap: 20px;
	width: max-content;
}

.woo-wall__tile {
	flex: 0 0 150px;
	width: 150px;
	height: 150px;
	display: grid;
	place-items: center;
	padding: 24px;
	box-sizing: border-box;
}

.woo-wall__tile img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.woo-wall { overflow-x: auto; }
}

/* ---------------- Block gaps the design does not have ----------------
 * WordPress puts its own margin between the header, main and footer. The
 * design has none: the hero frame starts exactly where the 177px navigation
 * ends, so a stray 16px here shifts every section below it.
 */
body > .wp-site-blocks > header,
body > .wp-site-blocks > main,
body > .wp-site-blocks > footer,
.wp-site-blocks > * { margin-block: 0; }

/*
 * WordPress also puts its block gap on every top-level block inside <main>,
 * which opens a 16px seam between sections that the design butts together —
 * each band already carries its own 100px padding and its own top rule.
 */
main > .woo-shell,
main > .woo-section,
main > .woo-wall,
main > .woo-pagehero,
main > .woo-preloader { margin-block-start: 0; }

/*
 * WordPress puts its block gap on the children of any flow group. Sections
 * butt together in the design, so it is removed where sections are the
 * children — never on the contents of a section, which set their own rhythm.
 */
main > .woo-shell,
main > .woo-stack,
main > .woo-stack > *,
.wp-block-post-content > .woo-stack,
.wp-block-post-content > .woo-shell,
.wp-block-post-content > .woo-pagehero,
.wp-block-post-content > .woo-stack > * { margin-block-start: 0; }

/* The project hero carries the navigation inside it, as frame 04 does.
   WordPress zeroes the first child's margin at (0,2,0), so this has to out-rank
   that, not merely come after it. */
main.wp-block-group > .woo-projecthero { margin-block-start: -102px; }

/*
 * The call to action sits on the last line of the headline: 720px down a page
 * whose headline runs 636-752, so 84px below the headline's own top — not
 * flush with its foot.
 */
.woo-hero .woo-hero__cta { margin-bottom: 10px; }


/* ---------------- Arrows ----------------
 * Drawn, not typed: the design uses 1.5px stroked vectors — a 12x12 diagonal
 * for section links and an 11x16 downward arrow for the hero. The Unicode
 * characters are a different weight and sit on a different baseline.
 */
/* Every button is a flex row with a 6px gap, so the arrow adds no margin of
   its own — that was left over from when these were inline. */
.woo-arrow {
	display: block;
	flex: none;
}

/* ==================================================================
   Hairlines, exactly as the file draws them.

   Every rule in the design is 0.5px of #E6E6E6 — except the form fields,
   which are a full 1px, and the form block itself, which carries a 2px red
   bar down its left edge.
   ================================================================== */

/* Footer sits under a rule on every page. */
.woo-footer { border-top: 0.5px solid var(--woo-rule); }

/* Each row of the team list is ruled top and bottom. */
.woo-member {
	border-top: 0.5px solid var(--woo-rule);
	border-bottom: 0.5px solid var(--woo-rule);
}

.woo-member + .woo-member { border-top: 0; }

/* Service blocks on the Services page share the same top rule as the section. */
.woo-svcs { border-top: 0.5px solid var(--woo-rule); padding-block: var(--woo-outer);	 }

@media screen and (max-width: 782px) {
	.woo-svcs {
		padding-block: var(--woo-mobile-outer);
	}
}
/*
 * The enquiry form: a 2px red bar on the left, the fields inset 42px from it,
 * each field 534px wide and 31px tall with a 1px rule beneath.
 */
.woo-contact__form {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 42px;
}

.woo-field input,
.woo-field textarea {
	max-width: 534px;
	border-bottom-width: 1px;
}

.woo-field input { height: 31px; padding: 0 0 8px; }

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

/* ---------------- Header and footer, to the pixel ----------------
 * Navigation is 177px on the homepage and 102px everywhere else; the footer is
 * 479px on every page. Fixing the heights rather than letting them fall out of
 * the content is what keeps each page the same length as its frame.
 */
.woo-nav {
	height: 102px;
	box-sizing: border-box;
	align-items: flex-start;
}

.home .woo-nav { height: calc(102px + 75px * var(--woo-logo-scale, 1)); }

.woo-footer__grid { height: 216px; }
.woo-footer__base { margin-top: 75px; }

@media (max-width: 782px) {
	.woo-nav,
	.home .woo-nav { height: auto; }
}


/* Social icons, 54x20 in the file: two 20px marks 14px apart, in WOO red. */
.woo-socials {
	display: flex;
	align-items: center;
	gap: 15px;                      /* LinkedIn ends at 20, Instagram starts at 35 */
	margin-top: 140px;
	color: var(--wp--preset--color--accent);
}

.woo-socials a { display: block; color: inherit; }
.woo-socials svg { display: block; }

/* ==================================================================
   Pages that open on a photograph.

   The Services hero is an 847px image with white type over it, navigation
   included. The mark switches to its white version by inverting it, so there
   is only one logo file to keep.
   ================================================================== */

.woo-hero-dark .woo-pagehero {
	position: relative;
	margin-top: calc(-1 * var(--woo-header-h, 102px));
	text-align: center;
	align-items: center;
	padding-block: 0;
	color: var(--wp--preset--color--paper);
	overflow: hidden;
	background: #E8452B;
}

/* The video sits behind everything, cropped to fill, exactly as "Crop" in the file. */
.woo-pagehero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.woo-pagehero__inner { position: relative; z-index: 1; }

/* The still is the video's poster; when motion is unwelcome it is all there is. */
@media (prefers-reduced-motion: reduce) {
	.woo-pagehero__video { display: none; }

	.woo-hero-dark .woo-pagehero {
		background-image: url(../video/services-hero-poster.jpg);
		background-size: cover;
		background-position: center;
	}
}

.woo-hero-dark .woo-pagehero__title { max-width: 540px; margin-bottom: 25px; }
.woo-hero-dark .woo-pagehero__lead { max-width: 580px; margin-bottom: 0; }

.woo-hero-dark .woo-pagehero .woo-eyebrow,
.woo-hero-dark .woo-pagehero .woo-pagehero__title,
.woo-hero-dark .woo-pagehero .woo-pagehero__lead,
.woo-hero-dark .woo-pagehero .woo-hero__cta {
	color: var(--wp--preset--color--paper);
}

/* The header sits on top of the image, so its type turns white too. */
.woo-hero-dark .woo-nav,
.woo-nav-light .woo-nav { position: relative; z-index: 2; }

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

.woo-hero-dark .woo-nav__links a:hover,
.woo-nav-light .woo-nav__links a:hover { opacity: .7; }

/* White nav over a photograph, but the section being viewed still reads red,
   as it does on every other page. */
.woo-hero-dark .woo-nav__links a[aria-current],
.woo-nav-light .woo-nav__links a[aria-current] { color: var(--wp--preset--color--accent); }

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

/* The picture reaches both edges; the words stay in the 1200px column. */
.woo-hero-dark .woo-pagehero { margin-top: calc(-1 * var(--woo-header-h, 102px)); }

.woo-pagehero__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--woo-gutter);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ----------------------------------------------------------------
 * Narrow screens.
 *
 * The 2026 Figma page carries desktop frames only, so every rule below is an
 * inference from the desktop measurements rather than a drawn design, and is
 * written to do one thing: stop the fixed column widths from pushing the page
 * sideways. It still needs the client's sign-off.
 * ---------------------------------------------------------------- */

@media (max-width: 1279px) {
	/* Anything given an exact pixel width upstream may now shrink. */
	.woo-vision__col,
	.woo-vision__img,
	.woo-trust__img,
	.woo-trust__col,
	.woo-story__img,
	.woo-quote__mark,
	.woo-quote__who,
	.woo-contact__form,
	.woo-article__shot,
	.woo-signup,
	.woo-signup input,
	.woo-footer__signup input { max-width: 100%; }

	.woo-vision__col,
	.woo-vision__img,
	.woo-trust__img,
	.woo-trust__col,
	.woo-quote__mark { flex: 0 1 auto; }

	/* Flex and grid children default to min-width:auto, which stops them
	   shrinking past their content and pushes the page sideways. */
	.woo-vision > *,
	.woo-trust__top > *,
	.woo-trust__body > *,
	.woo-quote__top > *,
	.woo-quote__by > *,
	.woo-split > * { min-width: 0; }

	/* The homepage journal band's two fixed tracks become proportions. */
	.woo-split { grid-template-columns: minmax(0, 276fr) minmax(0, 790fr); column-gap: 40px; }
}

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

	.woo-strip img,
	.woo-story__img,
	.woo-vision__img { width: auto; max-width: 100%; height: auto; }

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

	/* The article's pictures stop bleeding once there is nothing to bleed into. */
	.woo-article__body figure,
	.woo-article__body .wp-block-image { width: 100%; margin-inline: 0; }
}

@media (max-width: 900px) {
	.woo-vision { flex-wrap: wrap; }
	.woo-vision__col { flex-basis: 100%; min-height: 0; gap: 40px; }
	.woo-vision__img { flex-basis: 100%; width: 100%; }
	.woo-contact { grid-template-columns: 1fr; }
	.woo-contact__form { border-left: 0; padding-left: 0; }
	.woo-quote__by { flex-wrap: wrap; }
	.woo-projectinfo { grid-template-columns: 1fr; }
	.woo-projecthero { height: auto; min-height: 60vh; padding-bottom: 40px; }
}

@media (max-width: 782px) {
	.woo-trust__top,
	.woo-trust__body { flex-wrap: wrap; }
	.woo-quote__mark svg { width: 100%; height: auto; }
	.woo-story__ctas { grid-row: auto; }
}