/*
 * 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 */
}

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

/*
 * The page runs edge to edge; the content sits in a 1200px column in the middle.
 *
 * In the design the artboard is 1280 wide with a 40px margin, so the section
 * rules touch both edges while the text starts 40px in. Capping the section
 * itself at 1280 made the rules stop short of the screen — they have to reach
 * the edge on any width, with the 1200px column simply centred inside.
 */
.woo-shell {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: max(var(--woo-gutter), calc((100% - 1200px) / 2));
	box-sizing: border-box;
}

/* 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 { 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 shrinks it to 59x18 in a 102px bar. Using the
 * homepage header everywhere pushed each inner page 75px down.
 */
.woo-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-block: 40px 44px;
	gap: 24px;
}

.home .woo-nav { padding-block: 40px; }

.woo-nav__logo {
	display: block;
	width: 59px;
	max-width: 40vw;
}

.home .woo-nav__logo { width: 312px; }

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

.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 .woo-nav__cta a {
	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: 100px;
}

/*
 * 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;
}

/* 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;
}

/*
 * Column positions read off the file: the four columns start at 0, 479, 796 and
 * 947 inside the 1200px content width, so the tracks are the gaps between those
 * marks rather than a set of guessed fractions.
 */
.woo-footer__grid {
	display: grid;
	grid-template-columns: 479px 317px 151px 253px;
	gap: 0;
	align-items: start;
}

/* 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__menu .woo-nav__cta a { color: var(--wp--preset--color--accent); }

.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 is 400x31. */
.woo-signup {
	margin-top: 75px;
	width: min(400px, 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: 400px;
	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); }

/* 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: 479px minmax(0, 721px);
	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: 180px; }
	.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-statement { margin-bottom: 48px; }
	.woo-footer__grid,
	.woo-footer__base { grid-template-columns: 1fr; }
}

/* ---------------- 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: 340px; }

.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" and hangs an ON_HOVER
 * interaction on it: CHANGE_TO the second variant, SMART_ANIMATE / EASE_OUT /
 * 300ms. 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 hover
 * 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 hover target is the component itself, 1198x200 — the heading and the
 * sector list included — not just the red square.
 */
.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__top:hover .woo-trust__mark svg,
.woo-trust__top:focus-within .woo-trust__mark 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: 48px; }
	.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 50px;
}

.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-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-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);
}

/* 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 { padding-block: 50px 100px; text-align: center; }

.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-block: 40px 64px; }
}

/* ---------------- 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;
	padding-block: 0 50px;
}

.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 {
	padding-block: 50px;
}

.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;
	padding-block: 50px;
}

.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; padding-block: 50px 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 { padding-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: 100px;
	border-top: 0.5px solid var(--woo-rule);
}

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

.woo-team__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 575px));
	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: 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: 326px; 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; }

/*
 * 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 {
	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;
}

/* 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-cards__grid { grid-template-columns: 1fr; }
	.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 var(--woo-gutter) 88px;
	box-sizing: border-box;
	overflow: hidden;
	color: var(--wp--preset--color--paper);
}

.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. */
@media (prefers-reduced-motion: reduce) {
	.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.
 */
.woo-projecthero::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;
}

.woo-projecthero__title {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 1200px;
	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: 100px 0;
}

.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; }

/* 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;
}

/* Same pill as the article card's: padding 12, 1px border, border-box = 52. */
.woo-tags a {
	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;
}

.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 {
	padding-block: 50px 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.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: 900px) {
	.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-story__body p,
.woo-contact__lead,
.woo-shout__lead {
	text-wrap: balance;
}

/* 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;
}

.woo-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	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; }

.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 flex row once the control is open. */
.woo-filter__list { display: none; }

.woo-filter[open] .woo-filter__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 16px;
}

.woo-filter a {
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--woo-ls-tiny);
	text-decoration: none;
	border: 1px solid var(--woo-rule);
	border-radius: 100px;
	padding: 6px 14px;
}

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

/* The archive closes with 100px of air before the testimonial's rule. */
.woo-cards--archive { padding-bottom: 100px; }

@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;
}

.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),
	            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 {
	color: var(--wp--preset--color--ghost);
	transition: color var(--woo-quick) var(--woo-ease);
}

.woo-statement .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 {
		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; }

/* 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: 900px) {
	.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.

   Figma stores no duration for it, so the 60s pace below is ours.
   ================================================================== */

.woo-wall {
	overflow: hidden;
	padding-block: 0 100px;
}

.woo-wall__track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: woo-wall-run 60s linear infinite;
}

.woo-wall:hover .woo-wall__track { animation-play-state: paused; }

.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;
}

/* One full strip is 16 tiles of 150 plus 16 gaps of 20 = 2720px. */
@keyframes woo-wall-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-2720px); }
}

@media (prefers-reduced-motion: reduce) {
	.woo-wall__track { animation: none; }
	.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: 100px; }

/*
 * 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: 177px; }

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

@media (max-width: 782px) {
	.woo-nav,
	.home .woo-nav { height: auto; }
	.woo-footer__grid { min-height: 0; }
	.woo-footer__base { margin-top: 40px; }
}


/* 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: -102px;
	text-align: center;
	align-items: center;
	padding-block: 252px 100px;
	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: 228px; }

.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; }

.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: -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%; }

	/* The footer's four tracks are exact pixels — below 1200 they have to
	   become proportions or they push the page sideways. */
	.woo-footer__grid { grid-template-columns: minmax(0, 479fr) minmax(0, 317fr) minmax(0, 151fr) minmax(0, 253fr); }
	.woo-footer__base { grid-template-columns: minmax(0, 479fr) minmax(0, 721fr); }

	.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-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
	.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-footer__grid { grid-template-columns: 1fr; }
	.woo-quote__mark svg { width: 100%; height: auto; }
	.woo-story__ctas { grid-row: auto; }
}