/*
 * WorkingPrint WP 02 — Home page (patterns/w2-home.php).
 * Figma "Home — Desktop" 450:727 (1920 wide) and "Home — Mobile" 454:1184 (440 wide).
 * All sizes are Figma px × var(--u) (see wp2.css). Class prefix: w2h-.
 *
 * Dirtyline metrics used below (font ships with the theme): ascent .75em, cap height .70em.
 * With line-height:1 the top of a box is the top of the swash capitals, which is where
 * Figma's outlined "wp2/type/…" vectors start; text-box-trimmed Figma text starts .05em lower.
 */

/* ======================================================= 01 · Hero (450:745) */
.w2.w2h-hero { overflow: clip; background: var(--c-white); isolation: isolate; }
.w2h-hero__in { position: relative; width: calc(1920 * var(--u)); height: calc(1200 * var(--u)); margin: 0 auto; }
.w2h-hero__in > * { position: absolute !important; margin: 0 !important; }
/* black column (0–680) runs to the left edge, purple block (1640, 380) to the right edge on wide screens */
.w2h-hero__in::before, .w2h-hero__in::after { content: ""; position: absolute; z-index: 0; }
.w2h-hero__in::before { top: 0; bottom: 0; right: calc(100% - 680 * var(--u)); width: 100vw; background: var(--c-black); }
.w2h-hero__in::after { left: calc(1640 * var(--u)); top: calc(380 * var(--u)); bottom: 0; width: 100vw; background: var(--c-purple); }

/* collage frame 450:748 — the flat image fills it; the 3D canvas (hero3d.js) reaches
   360 design px further on every side (PAD in hero3d.js) so nothing is cut off on hover */
.w2h-hero__collage, .w2h-hero__3d {
	left: calc(566.85 * var(--u)); top: calc(31 * var(--u)); width: calc(1330.51 * var(--u)); height: calc(989.77 * var(--u)); z-index: 1;
}
.w2h-hero__3d { --pad: 360; translate: calc(var(--pad) * -1 * var(--u)) calc(var(--pad) * -1 * var(--u)); width: calc((1330.51 + 2 * var(--pad)) * var(--u)); height: calc((989.77 + 2 * var(--pad)) * var(--u)); }
.w2h-hero figure.w2h-hero__collage img { object-fit: contain; }
.w2h-hero__collage { transition: opacity .6s ease; }
.w2h-hero__collage.is-replaced { opacity: 0; }
.w2h-hero__3d { opacity: 0; transition: opacity .6s ease; overflow: hidden; }
.w2h-hero__3d.is-ready { opacity: 1; }
.w2h-hero__3d canvas { display: block; width: 100% !important; height: 100% !important; }

.w2h-hero__intro { left: calc(80 * var(--u)); top: calc(112 * var(--u)); width: calc(470 * var(--u)); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.w2h-hero__intro > * { margin: 0 !important; }
.w2h-hero__name { --fs: 84; line-height: 1.2; letter-spacing: 1px; white-space: nowrap; margin-top: calc(20 * var(--u)) !important; }
.w2h-hero__disc { letter-spacing: .8px; margin-top: calc(-3 * var(--u)) !important; }
.w2h-hero__text { --fs: 21; color: rgba(255, 255, 255, .85); max-width: calc(459 * var(--u)); margin-top: calc(30 * var(--u)) !important; }
.w2h-hero__btns { flex-direction: column; align-items: flex-start; margin-top: calc(68 * var(--u)) !important; }
/* Resume: outline button filled black, so where it meets the "Art Director" headline (the intro sits above it) the letters never show through */
.w2h-hero__btns .w2-btn.is-outline-dark .wp-block-button__link { background: var(--c-black); }
.w2h-hero__btns .w2-btn.is-outline-dark .wp-block-button__link:hover { background: var(--c-white); }

/* "Art / Director" — live Dirtyline; Director inverts across the black column, white page and collage */
.w2h-hero__art, .w2h-hero__director { --fs: 340; line-height: 1; letter-spacing: .6px; pointer-events: none; }
.w2h-hero__art { left: calc(80 * var(--u)); top: calc(664 * var(--u)); z-index: 4; color: var(--c-white); }
.w2h-hero__director { left: calc(64 * var(--u)); top: calc(902 * var(--u)); z-index: 5; color: var(--c-white); mix-blend-mode: difference; }

.w2h-hero__hint {
	left: calc(738 * var(--u)); top: calc(869 * var(--u)); z-index: 6; display: flex; align-items: center; gap: calc(12 * var(--u));
	--fs: 13; letter-spacing: .5px; line-height: 1.3; white-space: nowrap; background: var(--c-white); color: var(--c-black); pointer-events: none;
}
.w2h-hero__hint::before { content: ""; flex: none; width: max(8px, calc(10 * var(--u))); height: max(8px, calc(10 * var(--u))); border-radius: 50%; background: var(--c-pink); }

.w2h-hero__stat { left: calc(1693 * var(--u)); top: calc(653 * var(--u)); z-index: 3; display: flex; flex-direction: column; }
.w2h-hero__stat > * { margin: 0 !important; }
.w2h-hero__num { --fs: 150; line-height: .85; }
.w2h-hero__statlabel { --fs: 13; width: calc(200 * var(--u)); margin: calc(12.5 * var(--u)) 0 0 calc(4 * var(--u)) !important; }
.w2h-hero__scroll { left: calc(1676 * var(--u)); top: calc(1140 * var(--u)); z-index: 3; --fs: 13; letter-spacing: 1px; }
.w2h-hero__scroll a:hover { color: var(--c-yellow); }

/* hover lines (Figma 561:10699) live in the page; hero3d.js shows them in .w2h-hero__hint */
.w2h-hero__tips { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* while the pointer is over the collage, hero3d.js floats the hint just above the cursor */
.w2h-hero__hint.is-following { bottom: auto !important; }

/* Desktop hero fills the screen (Figma page "WP 02 - Homepage breakpoints": Laptop 1366×768
   573:9555, Wide 1920×1080 573:9633, Ultrawide 2560×1080 573:9711). It is exactly one screen
   tall below the nav and spans the full width: the black column (35.4%) and the purple block
   (14.6%, from 31.7% down) stretch with the screen, "Art Director" runs on one line up to the
   purple block, and the collage scales to the largest size that fits the hero's height with
   every object in view (4% spare for the hover lift), in front of the headline. Where there is
   more width than the collage needs (wide screens), the 3D canvas is up to 30% wider and
   hero3d.js spreads the objects out across it. The intro copy fills the black column the way it
   does at 1920 (scaled with the column, --ku), as far as the height allows; on large screens the
   buttons sit side by side. --u here is the usual width unit, capped by the height so short
   screens shrink everything together; cqw/cqh are the hero's own size. */
@media (min-width: 900px) {
	.w2.w2h-hero { container-type: size; height: max(520px, calc(100svh - max(64px, calc(96 * clamp(.5px, 100vw / 1920, 1px))))); }
	.w2h-hero__in {
		--u: min(clamp(.5px, 100cqw / 1920, 1px), 100cqh / 984);
		--hfs: min(calc(340 * var(--u)), calc((85.4cqw - 94 * var(--u)) / 6.16)); /* headline size: "Art Director" is 6.16em wide */
		--headtop: calc(28 * var(--u) + .78 * var(--hfs)); /* headline cap top, from the bottom */
		--rw: calc(50cqw + 370 * var(--u)); /* collage area: from 120 before the black column's edge to 250 into the purple block */
		--rh: calc(100cqh - 48 * var(--u)); /* 24 from the top and bottom */
		--cu: calc(min(var(--rw) / 1330.51, var(--rh) / 989.77) * .96);
		--cx: calc(35.4cqw - 120 * var(--u) + (var(--rw) - 1330.51 * var(--cu)) / 2);
		--sw: min(var(--rw), 1.3 * 1330.51 * var(--cu)); /* 3D canvas width: room to spread out */
		--stackh: 628; /* intro: 96 from the top + 532 tall (buttons stacked) */
		--ku: min(calc(35.4cqw / 680), calc((100cqh - var(--headtop) - 40 * var(--u)) / var(--stackh)));
		width: 100%; height: 100%;
	}
	.w2h-hero__in::before { left: 0; right: auto; width: 35.4%; }
	.w2h-hero__in::after { left: 85.4%; top: 31.7%; width: auto; right: 0; }

	.w2h-hero__collage, .w2h-hero__3d {
		left: var(--cx); top: calc(24 * var(--u) + (var(--rh) - 989.77 * var(--cu)) / 2);
		width: calc(1330.51 * var(--cu)); height: calc(989.77 * var(--cu));
	}
	.w2h-hero__3d {
		left: calc(35.4cqw - 120 * var(--u) + (var(--rw) - var(--sw)) / 2);
		translate: calc(var(--pad) * -1 * var(--cu)) calc(var(--pad) * -1 * var(--cu));
		width: calc(var(--sw) + 2 * var(--pad) * var(--cu)); height: calc((989.77 + 2 * var(--pad)) * var(--cu));
	}
	/* collage in front of the headline, so no object is ever covered */
	.w2h-hero__collage, .w2h-hero__3d { z-index: 6; }
	/* its padded canvas now overlaps the intro, so the canvas lets clicks through (hero3d.js picks objects itself) */
	.w2h-hero__3d { pointer-events: none; }

	.w2h-hero__intro { --u: var(--ku); left: calc(80 * var(--u)); top: calc(96 * var(--u)); z-index: 7; } /* above the collage where they meet */
	.w2h-hero__art, .w2h-hero__director { --fmin: 0px; font-size: var(--hfs); top: auto; bottom: calc(28 * var(--u) - .25em); }
	.w2h-hero__art { left: calc(64 * var(--u)); }
	.w2h-hero__director { left: calc(64 * var(--u) + 1.82 * var(--hfs)); }
	.w2h-hero__hint { left: calc(var(--cx) + 80 * var(--cu)); top: auto; bottom: calc(var(--headtop) + 18 * var(--u)); z-index: 7; }

	.w2h-hero__stat { left: 88.2cqw; top: 56.3cqh; }
	.w2h-hero__statlabel { width: min(calc(200 * var(--u)), 9cqw); }
	.w2h-hero__scroll { left: 87.3cqw; top: auto; bottom: calc(43 * var(--u)); }
}
@media (min-width: 1480px) {
	.w2h-hero__in { --stackh: 548; } /* buttons side by side: one row of 64 + 16 less */
	.w2h-hero__btns { flex-direction: row; flex-wrap: nowrap; gap: calc(16 * var(--u)); }
}

@media (max-width: 899px) {
	.w2h-hero__in { width: calc(440 * var(--u)); height: calc(1160 * var(--u)); }
	.w2h-hero__in::before { right: auto; left: calc(50% - 50vw); bottom: auto; width: 100vw; height: calc(560 * var(--u)); }
	.w2h-hero__in::after { left: calc(336 * var(--u)); top: calc(740 * var(--u)); }
	.w2h-hero__collage, .w2h-hero__3d { left: calc(-30.23 * var(--u)); top: calc(652 * var(--u)); width: calc(517.26 * var(--u)); height: calc(384.79 * var(--u)); }
	.w2h-hero__3d { --pad: 139.96; width: calc((517.26 + 2 * var(--pad)) * var(--u)); height: calc((384.79 + 2 * var(--pad)) * var(--u)); } /* 360 × 517.26/1330.51 */
	.w2h-hero__intro { left: calc(24 * var(--u)); top: calc(32 * var(--u)); width: calc(392 * var(--u)); }
	.w2h-hero__name { --fs: 56; margin-top: calc(10 * var(--u)) !important; }
	.w2h-hero__disc { margin-top: calc(3 * var(--u)) !important; }
	.w2h-hero__text { --fs: 17; max-width: none; margin-top: calc(16 * var(--u)) !important; }
	.w2h-hero__btns { align-self: stretch; gap: calc(12 * var(--u)); margin-top: calc(62 * var(--u)) !important; }
	.w2h-hero__art { --fs: 122; --fmin: 0px; left: calc(24 * var(--u)); top: calc(470 * var(--u)); }
	.w2h-hero__director { --fs: 89.2; --fmin: 0px; left: calc(24 * var(--u)); top: calc(580 * var(--u)); }
	.w2h-hero__stat { left: calc(24 * var(--u)); top: calc(1040 * var(--u)); color: var(--c-black); flex-direction: row; align-items: flex-start; gap: calc(14 * var(--u)); }
	.w2h-hero__num { --fs: 72; }
	.w2h-hero__statlabel { --fs: 12; width: calc(180 * var(--u)); margin: calc(3.5 * var(--u)) 0 0 !important; }
}

/* full-width buttons on phones (Figma mobile buttons are 392 wide, label left, arrow right) */
@media (max-width: 899px) {
	.w2h-hero__btns .w2-btn, .w2h-case1__btn .w2-btn, .w2h-card .w2-btn, .w2h-work__all-m .w2-btn { width: 100%; }
	.w2h-hero__btns .w2-btn .wp-block-button__link, .w2h-case1__btn .w2-btn .wp-block-button__link,
	.w2h-card .w2-btn .wp-block-button__link, .w2h-work__all-m .w2-btn .wp-block-button__link { width: 100%; justify-content: space-between; font-size: max(14px, calc(18 * var(--u))); }
	.w2h-hero__btns .w2-btn .wp-block-button__link:hover, .w2h-case1__btn .w2-btn .wp-block-button__link:hover,
	.w2h-card .w2-btn .wp-block-button__link:hover, .w2h-work__all-m .w2-btn .wp-block-button__link:hover { transform: none; }
}

/* ======================================================= 02 · Client logos (450:789) */
.w2h-clients { border-top: 1px solid var(--c-black); border-bottom: 1px solid var(--c-black); overflow: clip; }
.w2h-clients__in { display: flex; align-items: center; gap: calc(183 * var(--u)); box-sizing: border-box; max-width: calc(1920 * var(--u)); height: calc(198 * var(--u)); margin: 0 auto; padding-left: calc(100 * var(--u)); }
.w2h-clients__in > * { margin: 0 !important; flex: none; }
.w2h-clients__label { white-space: nowrap; }
.w2h-logos { display: flex; align-items: center; gap: calc(62 * var(--u)); }
.w2h-logos > * { margin: 0 !important; }
.w2h-logo { --k: 1; flex: none; width: calc(var(--w) * var(--k) * var(--u)); height: calc(var(--h) * var(--k) * var(--u)); opacity: .9; transition: opacity .2s ease, filter .2s ease; }
.w2h-logo.is-vertiv { --w: 116; --h: 28; opacity: 1; }
.w2h-logo.is-dkny { --w: 140; --h: 37.84; }
.w2h-logo.is-pfizer { --w: 100.53; --h: 48; }
.w2h-logo.is-xerox { --w: 96; --h: 21; }
.w2h-logo.is-pepperidge { --w: 120.62; --h: 48; }
.w2h-logo.is-kettle { --w: 88.8; --h: 48; }
.w2h-logo.is-goldfish { --w: 118.4; --h: 48; }
.w2h-logo.is-audible { --w: 133.2; --h: 48; }
.w2h-clients figure.w2h-logo img { object-fit: contain; }
@media (hover: hover) {
	.w2h-logos:hover .w2h-logo { opacity: .45; }
	.w2h-logos .w2h-logo:hover { opacity: 1; }
}
@media (max-width: 899px) {
	.w2h-clients__in { display: block; height: auto; padding: calc(28 * var(--u)) var(--gx) calc(34 * var(--u)); }
	.w2h-logos { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(34 * var(--u)); row-gap: calc(26 * var(--u)); margin-top: calc(27 * var(--u)) !important; }
	.w2h-logo { --k: .72; justify-self: center; align-self: center; }
	.w2h-logo.is-dkny, .w2h-logo.is-xerox { --k: .743; }
}

/* ======================================================= 03 · Selected work (450:802) */
.w2h-work__in { padding-top: calc(120 * var(--u)); padding-bottom: calc(140 * var(--u)); }
.w2h-work__in > * { margin: 0 !important; }
.w2h-work__head { display: grid; grid-template-columns: calc(1100 * var(--u)) 1fr; }
.w2h-work__head > *, .w2h-work__title > *, .w2h-work__aside > * { margin: 0 !important; }
.w2h-work__word { --fs: 274; line-height: 1; height: calc(220 * var(--u)); margin-top: calc(30 * var(--u)) !important; }
.w2h-work__aside { padding-top: calc(70 * var(--u)); }
.w2h-work__intro { --fs: 22; line-height: 1.55; max-width: calc(560 * var(--u)); }
.w2h-work__count { color: var(--c-black); margin-top: calc(62 * var(--u)) !important; }
.w2h-work__all { margin-top: calc(32 * var(--u)) !important; }

/* case 01 — featured */
.w2h-case1 { display: grid; grid-template-columns: calc(1100 * var(--u)) 1fr; align-items: start; margin-top: calc(86 * var(--u)) !important; }
.w2h-case1 > * { margin: 0 !important; }
/* Figma "case 01 graphic area" 579:11159 (1047×947 at x17 y407; text column starts at y520) */
.w2h-case1__media { position: relative; width: calc(1047 * var(--u)); height: calc(947 * var(--u)); margin: calc(-113 * var(--u)) 0 calc(46 * var(--u)) calc(-63 * var(--u)) !important; }
.w2h-case1__media > * { margin: 0 !important; }
.w2h-case1__img { position: absolute !important; left: 0; top: 0; width: calc(878 * var(--u)); height: calc(702 * var(--u)); }
/* screenshots: 15px frames drawn outside the image (Figma strokes "outside"), so nothing on the screen is covered */
.w2h-case1__desk { position: absolute !important; left: calc(601 * var(--u)); top: calc(382 * var(--u)); width: calc(342 * var(--u)); height: calc(565 * var(--u)); box-shadow: 0 0 0 calc(15 * var(--u)) var(--c-yellow); }
.w2h-case1__phone { position: absolute !important; left: calc(878 * var(--u)); top: calc(99 * var(--u)); width: calc(169 * var(--u)); height: calc(492 * var(--u)); box-shadow: 0 0 0 calc(15 * var(--u)) var(--c-purple); transition: transform .35s ease; }
/* if the slot ever crops a screenshot, keep its top right (logo, menu) in view */
.w2 figure.w2h-case1__desk img, .w2 figure.w2h-case1__phone img { object-position: right top; }
.w2h-case1:hover .w2h-case1__phone { transform: translateY(calc(-12 * var(--u))); }
.w2h-case1__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); width: calc(660 * var(--u)); }
.w2h-case1__text > * { margin: 0 !important; }
.w2h-case1__index { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: calc(20 * var(--u)); row-gap: calc(24 * var(--u)); }
.w2h-case1__index > * { margin: 0 !important; }
.w2h-case1__num { --fs: 140; line-height: .8; color: var(--c-pink); }
.w2h-case1__kicker { --fs: 13; color: var(--c-black); }
.w2h-case1__name { grid-column: 1 / -1; --fs: 80; line-height: .9; white-space: nowrap; }
.w2h-case1__text .w2-rule { max-width: calc(600 * var(--u)); }
.w2h-meta { display: flex; gap: calc(40 * var(--u)); }
.w2h-meta > *, .w2h-meta__item > *, .w2h-block > * { margin: 0 !important; }
.w2h-meta__item { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.w2h-k { --fs: 12; font-weight: 400; color: rgba(0, 0, 0, .55); }
.w2h-v { font-family: var(--f-body); font-weight: 500; font-size: max(15px, calc(18 * var(--u))); line-height: 1.2; white-space: nowrap; }
.w2h-block { display: flex; flex-direction: column; gap: calc(8 * var(--u)); max-width: calc(600 * var(--u)); }
.w2h-block .w2h-k { --fs: 13; font-weight: 500; }
.w2h-block__text { --fs: 19; line-height: 1.55; }
.w2h-result, .w2h-result .w2h-k { color: var(--c-pink); }
.w2h-result__text { --fs: 16; line-height: 1.55; text-transform: none; letter-spacing: 0; }
.w2h-case1__name a, .w2h-card__name a { transition: color .2s ease; }
.w2h-case1__name a:hover, .w2h-card__name a:hover { color: var(--c-purple); }

/* accent bars (separator blocks) */
hr.w2h-accent { border: 0 !important; width: 100%; height: calc(10 * var(--u)) !important; margin: 0 !important; opacity: 1; background: var(--c-purple); }
hr.w2h-accent.is-yellow { background: var(--c-yellow); }

/* cases 02 + 03 (wp2/project-card) */
.w2h-cards { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(40 * var(--u)); margin-top: calc(100 * var(--u)) !important; }
.w2h-card { display: flex; flex-direction: column; align-items: flex-start; gap: calc(22 * var(--u)); }
.w2h-card > *, .w2h-card__title > *, .w2h-card__meta > * { margin: 0 !important; }
.w2h-card__img { width: 100%; height: calc(560 * var(--u)); overflow: hidden; }
.w2 .w2h-card__img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.w2h-card:hover .w2h-card__img img { transform: scale(1.035); }
.w2h-card__title { display: flex; align-items: flex-end; gap: calc(20 * var(--u)); }
.w2h-card__num { --fs: 72; line-height: .85; color: var(--c-pink); }
.w2h-card__name { --fs: 64; line-height: .9; white-space: nowrap; }
.w2h-desc { --fs: 20; line-height: 1.55; max-width: calc(760 * var(--u)); }
.w2h-card__meta { display: flex; gap: calc(48 * var(--u)); }
.w2h-card__meta .w2h-meta__item { gap: calc(8 * var(--u)); width: calc(340 * var(--u)); }
.w2h-card__meta .w2h-result { width: calc(300 * var(--u)); }
.w2h-card__meta .w2h-k { --fs: 13; font-weight: 500; }
.w2h-card__meta .w2h-v { font-weight: 400; font-size: max(15px, calc(17 * var(--u))); line-height: 1.55; white-space: normal; }
.w2h-card__meta .w2h-result__text { --fs: 15; }

@media (max-width: 899px) {
	.w2h-work__in { padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2h-work__head { display: block; }
	.w2h-work__word { --fs: 124.6; height: calc(100 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-work__aside { }
	.w2h-work__intro { --fs: 17; max-width: none; }

	.w2h-case1 { display: flex; flex-direction: column; align-items: stretch; gap: calc(16 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-case1__media { width: 100%; height: calc(300 * var(--u)); margin: 0 !important; }
	.w2h-case1__img-m { height: 100%; }
	hr.w2h-accent { height: calc(8 * var(--u)) !important; }
	.w2h-case1__text { width: auto; gap: calc(16 * var(--u)); }
	.w2h-case1__index { display: flex; align-items: flex-end; gap: calc(14 * var(--u)); }
	.w2h-case1__num { --fs: 56; line-height: .85; }
	.w2h-case1__name { --fs: 44; }
	.w2h-desc { --fs: 17; max-width: none; }
	.w2h-meta { flex-direction: column; gap: calc(6 * var(--u)); }
	.w2h-meta__item, .w2h-card__meta .w2h-meta__item { gap: calc(6 * var(--u)); width: auto; }
	.w2h-k, .w2h-block .w2h-k, .w2h-card__meta .w2h-k { --fs: 11; font-weight: 400; }
	.w2h-v, .w2h-card__meta .w2h-v { font-weight: 500; font-size: max(14px, calc(16 * var(--u))); line-height: 1.2; }
	.w2h-result__text, .w2h-card__meta .w2h-result__text { --fs: 14; }
	.w2h-case1__btn { align-self: stretch; }
	.w2h-case1__btn .w2-btn.is-purple .wp-block-button__link { background: transparent; border-color: var(--c-black); color: var(--c-black); }

	.w2h-cards { grid-template-columns: 1fr; row-gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-card { gap: calc(16 * var(--u)); align-items: stretch; }
	.w2h-card > .w2-tags, .w2h-card__title { align-self: flex-start; }
	.w2h-card__img { height: calc(300 * var(--u)); }
	.w2h-card__title { gap: calc(14 * var(--u)); }
	.w2h-card__num { --fs: 56; }
	.w2h-card__name { --fs: 44; }
	.w2h-card__meta { flex-direction: column; gap: calc(6 * var(--u)); }
	.w2h-work__all-m { margin-top: calc(28 * var(--u)) !important; }
}

/* ======================================================= 04 · AI workflow (451:796) */
.w2.w2h-ai { background: var(--c-yellow); color: var(--c-black); overflow-x: clip; scroll-margin-top: 24px; }
.w2h-ai__in { display: grid; grid-template-columns: calc(540 * var(--u)) 1fr; padding-top: calc(120 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.w2h-ai__in > * { margin: 0 !important; position: relative; z-index: 1; }
/* "ai collage 01" (639:1945), exported at its render bounds so the roomba's shadow on the right is in the image */
.w2h-ai__in > .w2h-ai__collage { position: absolute !important; z-index: 0; left: calc(1378 * var(--u)); top: calc(10 * var(--u)); width: calc(499 * var(--u)); height: calc(673.93 * var(--u)); }
.w2h-ai figure.w2h-ai__collage img { object-fit: contain; }
.w2h-ai__label { grid-column: 1 / -1; }
.w2h-ai__word { --fs: 520; line-height: 1; height: calc(420 * var(--u)); margin-top: calc(32 * var(--u)) !important; }
.w2h-ai__copy { margin-top: calc(42 * var(--u)) !important; }
.w2h-ai__copy > * { margin: 0 !important; }
.w2h-ai__head { --fs: 150; line-height: .88; white-space: nowrap; }
.w2h-ai__intro { --fs: 24; line-height: 1.55; max-width: calc(780 * var(--u)); margin-top: calc(26 * var(--u)) !important; }

/* wp2/step-card 451:795 */
.w2h-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); margin-top: calc(110 * var(--u)) !important; }
.w2h-step { box-sizing: border-box; display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-height: calc(400 * var(--u)); padding: calc(36 * var(--u)); background: var(--c-black); color: var(--c-white); transition: transform .25s ease, box-shadow .25s ease; }
.w2h-step > * { margin: 0 !important; }
.w2h-step:hover { transform: translate(calc(-6 * var(--u)), calc(-6 * var(--u))); box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 var(--c-purple); }
.w2h-step__num { --fs: 96; line-height: .85; color: var(--c-yellow); }
.w2h-step__title { --fs: 44; line-height: 1.2; letter-spacing: 1px; }
.w2h-step__text { --fs: 18; line-height: 1.55; color: rgba(255, 255, 255, .82); max-width: calc(350 * var(--u)); }

.w2h-ai__foot { grid-column: 1 / -1; display: grid; grid-template-columns: calc(1100 * var(--u)) 1fr; column-gap: calc(100 * var(--u)); align-items: start; margin-top: calc(70 * var(--u)) !important; }
.w2h-ai__foot > * { margin: 0 !important; }
.w2h-proof { box-sizing: border-box; display: grid; grid-template-columns: calc(520 * var(--u)) auto; column-gap: calc(92 * var(--u)); min-height: calc(330 * var(--u)); padding: calc(41 * var(--u)) calc(45 * var(--u)); background: var(--c-white); border: 3px solid var(--c-black); box-shadow: calc(20 * var(--u)) calc(20 * var(--u)) 0 rgba(98, 55, 255, .85); }
.w2h-proof > *, .w2h-proof__main > * { margin: 0 !important; }
.w2h-proof__label { --fs: 13; }
.w2h-proof__title { --fs: 80; line-height: .9; margin-top: calc(15 * var(--u)) !important; }
.w2h-proof__text { --fs: 20; line-height: 1.55; margin-top: calc(28 * var(--u)) !important; }
.w2h-pipe { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-top: calc(26 * var(--u)); }
.w2h-pipe > * { margin: 0 !important; }
.w2h-pipe__row { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.w2h-pipe__row > * { margin: 0 !important; }
.w2h-pipe__num { --fs: 32; line-height: 1.2; color: var(--c-purple); }
.w2h-pipe__txt { --fs: 14; letter-spacing: .6px; line-height: 1.2; white-space: nowrap; }
.w2h-toolkit { display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin-top: calc(10 * var(--u)) !important; }
.w2h-toolkit > * { margin: 0 !important; }
.w2h-toolkit__label { --fs: 13; }
.w2h-toolkit .w2-tags { max-width: calc(560 * var(--u)); }
.w2h-toolkit__note { --fs: 13; line-height: 1.6; }

@media (max-width: 899px) {
	.w2h-ai__in { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2h-ai__in > .w2h-ai__collage { left: calc(244 * var(--u)); top: calc(34 * var(--u)); width: calc(189.6 * var(--u)); height: calc(256.1 * var(--u)); }
	.w2h-ai__word { --fs: 210; height: calc(170 * var(--u)); margin-top: 0 !important; }
	.w2h-ai__copy { margin-top: 0 !important; }
	.w2h-ai__head { --fs: 68; line-height: .9; }
	.w2h-ai__intro { --fs: 17; margin-top: calc(24 * var(--u)) !important; }
	.w2h-steps { display: flex; flex-direction: column; margin-top: 0 !important; }
	.w2h-step { min-height: 0; gap: calc(10 * var(--u)); padding: calc(24 * var(--u)); }
	.w2h-step__num { --fs: 56; }
	.w2h-step__title { --fs: 34; }
	.w2h-step__text { --fs: 16; max-width: none; }
	.w2h-ai__foot { display: flex; flex-direction: column; gap: calc(24 * var(--u)); margin-top: 0 !important; }
	.w2h-proof { display: flex; flex-direction: column; gap: calc(14 * var(--u)); width: calc(380 * var(--u)); min-height: 0; padding: calc(28 * var(--u)) calc(24 * var(--u)); box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 rgba(98, 55, 255, .85); }
	.w2h-proof__label { --fs: 12; }
	.w2h-proof__title { --fs: 56; margin-top: 0 !important; }
	.w2h-proof__text { --fs: 16; margin-top: 0 !important; }
	.w2h-proof__line { --fs: 12; letter-spacing: .4px; }
	.w2h-toolkit { gap: calc(24 * var(--u)); margin-top: 0 !important; }
	.w2h-toolkit__label { --fs: 12; }
}

/* ======================================================= 05 · Capabilities (451:860) */
.w2h-caps__in { padding-top: calc(120 * var(--u)); padding-bottom: calc(160 * var(--u)); }
.w2h-caps__in > * { margin: 0 !important; }
.w2h-caps__head { display: grid; grid-template-columns: calc(920 * var(--u)) 1fr; }
.w2h-caps__head > * { margin: 0 !important; }
.w2h-caps__label { grid-column: 1 / -1; }
.w2h-caps__word { --fs: 320; line-height: 1; height: calc(240 * var(--u)); margin-top: calc(32 * var(--u)) !important; }
.w2h-stats { display: flex; gap: calc(40 * var(--u)); margin-top: calc(62 * var(--u)) !important; }
.w2h-stats > *, .w2h-stat > * { margin: 0 !important; }
.w2h-stat { display: flex; flex-direction: column; gap: calc(6 * var(--u)); width: calc(170 * var(--u)); }
.w2h-stat__num { --fs: 104; line-height: .85; white-space: nowrap; }
.w2h-stat__label { --fs: 13; line-height: 1.3; }
.w2h-caplist { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(40 * var(--u)); row-gap: calc(100 * var(--u)); margin-top: calc(110 * var(--u)) !important; }
.w2h-cap { display: flex; flex-direction: column; }
.w2h-cap > * { margin: 0 !important; }
.w2h-cap__num { --fs: 13; margin-top: calc(23 * var(--u)) !important; }
.w2h-cap__title { --fs: 52; line-height: .95; margin-top: calc(11 * var(--u)) !important; white-space: nowrap; }
.w2h-cap__text { --fs: 19; line-height: 1.55; max-width: calc(500 * var(--u)); margin-top: calc(21 * var(--u)) !important; }
.w2h-cap .w2-rule { transform-origin: left; transition: transform .4s ease; }
.w2h-cap:hover .w2-rule { background: var(--c-pink); }

@media (max-width: 899px) {
	.w2h-caps__in { padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2h-caps__head { display: block; }
	.w2h-caps__word { --fs: 138.5; height: calc(104 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--u)) calc(24 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-stat { width: auto; gap: calc(4 * var(--u)); }
	.w2h-stat__num { --fs: 72; }
	.w2h-stat__label { --fs: 11; --fmin: 10px; }
	.w2h-caplist { display: flex; flex-direction: column; gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)) !important; }
	.w2h-cap { gap: calc(8 * var(--u)); }
	.w2h-cap > * { margin-top: 0 !important; }
	.w2h-cap__num { --fs: 12; }
	.w2h-cap__title { --fs: 40; white-space: normal; }
	.w2h-cap__text { --fs: 16; max-width: none; }
}

/* ======================================================= 06 · Testimonial (485:11722) */
.w2.w2h-quote { background: var(--c-purple); color: var(--c-white); z-index: 1; }
.w2h-quote__in { display: grid; grid-template-columns: calc(180 * var(--u)) 1fr; padding-top: calc(40 * var(--u)); padding-bottom: calc(110 * var(--u)); }
.w2h-quote__in > * { margin: 0 !important; position: relative; z-index: 1; }
.w2h-quote__mark { --fs: 360; line-height: .8; color: rgba(255, 255, 255, .35); }
.w2h-quote__body { margin-top: calc(70 * var(--u)) !important; }
.w2h-quote__body > * { margin: 0 !important; }
.w2h-quote__text { --fs: 84; line-height: .95; max-width: calc(988 * var(--u)); }
.w2h-quote__by { --fs: 15; color: var(--c-white); margin-top: calc(120 * var(--u)) !important; }
@media (max-width: 899px) {
	.w2h-quote__in { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding-top: calc(48 * var(--u)); padding-bottom: calc(64 * var(--u)); }
	.w2h-quote__mark { --fs: 160; line-height: .6; }
	.w2h-quote__body { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin-top: 0 !important; }
	.w2h-quote__text { --fs: 44; max-width: none; }
	.w2h-quote__by { --fs: 12; margin-top: 0 !important; }
}

/* Home — Desktop places the contact block's collage ("Collage More" 539:3289) higher and larger
   than the shared block does: across the testimonial and into the contact block (page y 6772,
   so 634 px above the contact block). Only while the testimonial shows: it is a placeholder
   section, hidden from visitors until its text is real. */
@media (min-width: 900px) {
	.w2-main:has(.w2h-quote:not(.is-placeholder)) .w2-contact__collage,
	.logged-in .w2-main:has(.w2h-quote) .w2-contact__collage { left: calc(629 * var(--u)); top: calc(-634 * var(--u)); width: calc(1675 * var(--u)); height: calc(1174 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
	.w2h-hero__collage, .w2h-hero__3d, .w2h-card__img img, .w2h-case1__phone, .w2h-step { transition: none !important; }
	.w2h-card:hover .w2h-card__img img, .w2h-case1:hover .w2h-case1__phone, .w2h-step:hover { transform: none; }
}