/* ==========================================================================
   Homepage
   ==========================================================================
   Plain CSS, loaded on the front page and inside the block editor so the
   editor preview matches the site (see includes/scripts-and-styles.php and
   app/Blocks/Blocks.php). Deliberately outside the Tailwind bundle: the
   homepage is one long bespoke composition rather than utility work, and
   keeping it here means editing it never needs a build step.

   Everything is scoped to .tcwh so nothing leaks into the rest of the site.

   Contents
     1. Tokens
     2. Shell, type and shared components
     3. Motion primitives
     4. Hero
     5. Trust rail
     6. Engagement modules
     7. Engineering depth
     8. Long-term partnerships
     9. Rapid product engineering
    10. Owned products
    11. Client reviews
    12. Insights
    13. Strategy call
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.tcwh {
	/* Ink ------------------------------------------------------------------ */
	--h-ink: #0f2544;
	--h-ink-2: #47597a;
	--h-ink-3: #7d8ca6;
	--h-ink-invert: #ffffff;
	--h-ink-invert-2: #a8bcd8;
	--h-ink-invert-3: #7b93b4;

	/* Brand ---------------------------------------------------------------- */
	/*
	 * The brand blue is the logo's own colour, and everything blue on the page is a step of the
	 * same ramp: one hue, one saturation, lightness alone. The two "on-dark" steps exist because
	 * the brand blue is a mid-tone, and a mid-tone blue on the navy bands is a smudge rather than
	 * an accent. Use --h-blue on the pale grounds and --h-blue-lift or --h-blue-on-dark on navy.
	 */
	--h-blue: #46659b;
	--h-blue-hover: #38517d;
	--h-blue-deep: #2d4164;
	--h-blue-lift: #7994c3;
	--h-blue-on-dark: #a9bad8;
	--h-blue-soft: #e5eaf3;
	--h-blue-line: rgba(70, 101, 155, 0.30);
	--h-green: #1eb980;
	--h-green-soft: #e4f7ef;

	/* Ground --------------------------------------------------------------- */
	--h-paper: #fbfafa;
	--h-ice: #eef4fd;
	--h-ice-2: #f4f8fd;
	--h-navy: #071b38;
	--h-navy-2: #0c2748;
	--h-navy-3: #12325a;

	/* Lines and depth ------------------------------------------------------ */
	--h-line: rgba(15, 37, 68, 0.10);
	--h-line-strong: rgba(15, 37, 68, 0.16);
	--h-line-invert: rgba(255, 255, 255, 0.13);
	--h-line-invert-strong: rgba(255, 255, 255, 0.22);
	--h-shadow-1: 0 1px 2px rgba(15, 37, 68, 0.05);
	--h-shadow-2: 0 1px 2px rgba(15, 37, 68, 0.05), 0 8px 22px -10px rgba(15, 37, 68, 0.16);
	--h-shadow-3: 0 2px 4px rgba(15, 37, 68, 0.05), 0 20px 44px -18px rgba(15, 37, 68, 0.24);

	/* Shape ---------------------------------------------------------------- */
	/* The site shell (assets/css/site-shell.css): one measure for every page. */
	--h-content: var(--tcw-content, 1280px);
	--h-pad: var(--tcw-gutter, 24px);
	--h-gap: 24px;
	--h-r-xs: 6px;
	--h-r-sm: 8px;
	--h-r: 12px;
	--h-r-lg: 16px;

	/* Rhythm --------------------------------------------------------------- */
	--h-section-y: clamp(56px, 6.4vw, 92px);

	/* Type ----------------------------------------------------------------- */
	--h-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
	--h-font-hand: "Caveat", "Segoe Script", cursive;
	--h-fs-1: clamp(34px, 4vw, 53px);
	--h-fs-2: clamp(26px, 2.9vw, 39px);
	--h-fs-3: clamp(18px, 1.35vw, 20px);
	--h-fs-body: clamp(15px, 1.05vw, 16.5px);
	--h-fs-sm: 14px;
	--h-fs-xs: 12.5px;
	--h-fs-eyebrow: 11.5px;

	/* Motion --------------------------------------------------------------- */
	--h-t-fast: 180ms;
	--h-t: 260ms;
	--h-t-view: 340ms;
	--h-t-reveal: 640ms;
	--h-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--h-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	font-family: var(--h-font);
	color: var(--h-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tcwh *,
.tcwh *::before,
.tcwh *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Shell, type and shared components
   ========================================================================== */

.tcwh-shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--h-content) + (var(--h-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--h-pad);
}

/* The 12-column field every section lays out against. */
.tcwh-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--h-gap);
}

.tcwh-eyebrow {
	margin: 0;
	font-size: var(--h-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--h-blue);
}

.tcwh-eyebrow--invert {
	color: var(--h-blue-on-dark);
}

.tcwh-h2 {
	margin: 12px 0 0;
	font-size: var(--h-fs-2);
	font-weight: 700;
	letter-spacing: -0.032em;
	line-height: 1.15;
	color: var(--h-ink);
	text-wrap: balance;
}

.tcwh-h2--invert {
	color: var(--h-ink-invert);
}

.tcwh-lede {
	margin: 14px 0 0;
	font-size: var(--h-fs-body);
	line-height: 1.68;
	color: var(--h-ink-2);
	max-width: 62ch;
}

.tcwh-lede--invert {
	color: var(--h-ink-invert-2);
}

/* Buttons ------------------------------------------------------------------ */

.tcwh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--h-r-sm);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--h-t) var(--h-ease), border-color var(--h-t) var(--h-ease),
		color var(--h-t) var(--h-ease), transform var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease);
}

.tcwh-btn svg {
	flex: none;
	transition: transform var(--h-t) var(--h-ease);
}

.tcwh-btn:hover svg,
.tcwh-btn:focus-visible svg {
	transform: translateX(3px);
}

.tcwh-btn--primary {
	background: var(--h-blue);
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 37, 68, 0.12);
}

/*
 * The brand blue is a mid-tone, so on the navy bands the filled button would be a blue on a blue
 * at under 3:1: present, but not obviously a button. There it steps up the same ramp instead and
 * takes dark text, which is what a filled control does on any dark surface.
 */
.tcwh-band--navy .tcwh-btn--primary {
	background: var(--h-blue-on-dark);
	color: var(--h-navy);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.tcwh-band--navy .tcwh-btn--primary:hover,
.tcwh-band--navy .tcwh-btn--primary:focus-visible {
	background: #c3cfe4;
	color: var(--h-navy);
}

.tcwh-btn--primary:hover,
.tcwh-btn--primary:focus-visible {
	background: var(--h-blue-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -6px rgba(70, 101, 155, 0.55);
}

.tcwh-btn--ghost {
	background: #fff;
	border-color: var(--h-line-strong);
	color: var(--h-ink);
}

.tcwh-btn--ghost:hover,
.tcwh-btn--ghost:focus-visible {
	border-color: var(--h-blue);
	color: var(--h-blue);
	transform: translateY(-1px);
}

/* A text link that reads as an action: label, then a short arrow. */
.tcwh-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--h-fs-sm);
	font-weight: 600;
	color: var(--h-blue);
	text-decoration: none;
	transition: color var(--h-t) var(--h-ease);
}

.tcwh-link svg {
	flex: none;
	transition: transform var(--h-t) var(--h-ease);
}

.tcwh-link:hover,
.tcwh-link:focus-visible {
	color: var(--h-blue-hover);
}

.tcwh-link:hover svg,
.tcwh-link:focus-visible svg {
	transform: translateX(3px);
}

.tcwh-link--invert {
	color: #a9bad8;
}

.tcwh-link--invert:hover,
.tcwh-link--invert:focus-visible {
	color: #c3cfe4;
}

.tcwh-link--quiet {
	color: var(--h-ink-2);
}

.tcwh-link--quiet:hover,
.tcwh-link--quiet:focus-visible {
	color: var(--h-blue);
}

/* Focus is visible everywhere, including on the navy bands. */
.tcwh a:focus-visible,
.tcwh button:focus-visible {
	outline: 2px solid var(--h-blue);
	outline-offset: 3px;
	border-radius: var(--h-r-xs);
}

.tcwh-band--navy a:focus-visible,
.tcwh-band--navy button:focus-visible {
	outline-color: #a9bad8;
}

/* Section header block: eyebrow, heading, optional lede. */
.tcwh-head {
	max-width: 62ch;
}

.tcwh-head--center {
	margin-inline: auto;
	text-align: center;
}

.tcwh-head--wide {
	max-width: 74ch;
}

/* Bands -------------------------------------------------------------------- */

.tcwh-band {
	position: relative;
	padding-block: var(--h-section-y);
	overflow: hidden;
}

.tcwh-band--paper {
	background: var(--h-paper);
}

.tcwh-band--white {
	background: #fff;
}

.tcwh-band--ice {
	background: var(--h-ice);
}

.tcwh-band--ice-2 {
	background: var(--h-ice-2);
}

.tcwh-band--navy {
	background: var(--h-navy);
	color: var(--h-ink-invert);
}

/* The faint drafting grid, reused on any band that wants paper under it. */
.tcwh-paper-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(70, 101, 155, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.04) 1px, transparent 1px),
		linear-gradient(to right, rgba(70, 101, 155, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.07) 1px, transparent 1px);
	background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}

.tcwh-paper-grid--invert {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* A fine technical annotation in the margin of a band.

   These are drafting furniture: every one of them sits inside an aria-hidden container and repeats
   nothing, so they are decoration rather than content. They are still kept near a 3:1 ratio so they
   read as marks on paper instead of disappearing on a dim screen. */
.tcwh-note {
	position: absolute;
	margin: 0;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: rgba(70, 101, 155, 0.74);
	white-space: nowrap;
	pointer-events: none;
}

.tcwh-note--invert {
	color: rgba(255, 255, 255, 0.58);
}

/* ==========================================================================
   3. Motion primitives
   ==========================================================================
   Enhancement only. The pre-animation state is applied under html.js, a class
   the document sets synchronously in the head, so there is no flash of hidden
   content and no JavaScript is needed for the page to read correctly. Without
   scripting, and inside the block editor, every element renders in its final
   state.
   ========================================================================== */

/* a. Reveal: fade and a short lift, staggered by --i within a group. */
html.js .tcwh [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
}

.tcwh [data-reveal] {
	transition:
		opacity var(--h-t-reveal) var(--h-ease-out),
		transform var(--h-t-reveal) var(--h-ease-out);
	transition-delay: calc(var(--i, 0) * 80ms);
}

html.js .tcwh [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* b. Line draw: pathLength is normalised to 1, so one rule draws any path at
      any size and the geometry can change freely between breakpoints. */
.tcwh-thread {
	position: absolute;
	pointer-events: none;
	overflow: visible;
}

.tcwh-thread__draw {
	fill: none;
	stroke-linecap: round;
	stroke-width: 2;
	stroke-opacity: 0.62;
}

html.js .tcwh-thread__draw {
	stroke-dasharray: 1.001;
	stroke-dashoffset: calc(1.001 - var(--p, 0) * 1.001);
}

/* The head of the line: a small mark that rides along as it draws. */
.tcwh-thread__head {
	fill: var(--h-green);
	opacity: 0;
	transition: opacity var(--h-t) var(--h-ease);
}

html.js .tcwh-thread.is-drawing .tcwh-thread__head {
	opacity: 1;
}

/* c. Flow nodes: one node at a time takes focus as the section is read. */
.tcwh-node {
	transition: color var(--h-t) var(--h-ease), opacity var(--h-t) var(--h-ease);
}

/* d. Card lift: the only hover transform on the page, 3px, never more. */
.tcwh-lift {
	transition: transform var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease),
		border-color var(--h-t) var(--h-ease);
}

.tcwh-lift:hover,
.tcwh-lift:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--h-shadow-3);
}

/* e. Reduced motion: keep every state change, drop every movement. */
@media (prefers-reduced-motion: reduce) {

	html.js .tcwh [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.tcwh *,
	.tcwh *::before,
	.tcwh *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	html.js .tcwh-thread__draw {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.tcwh-lift:hover,
	.tcwh-lift:focus-within {
		transform: none;
	}
}

/* ==========================================================================
   4. Hero — the brief on the drafting table
   ========================================================================== */

.tcwh-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, var(--h-paper) 52%, #f2f6fc 100%);
	padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 7.6vw, 116px);
}

.tcwh-hero__inner {
	align-items: center;
	row-gap: clamp(36px, 5vw, 56px);
}

.tcwh-hero__copy {
	grid-column: 1 / -1;
}

.tcwh-hero__visual {
	position: relative;
	grid-column: 1 / -1;
}

@media (min-width: 1000px) {

	.tcwh-hero__copy {
		grid-column: 1 / span 6;
	}

	.tcwh-hero__visual {
		grid-column: 7 / -1;
	}
}

/* Drafting furniture ------------------------------------------------------- */

.tcwh-hero__marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: rgba(70, 101, 155, 0.3);
}

@media (max-width: 1099px) {
	.tcwh-hero__marks {
		display: none;
	}
}

.tcwh-mark {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
}

.tcwh-mark::before,
.tcwh-mark::after {
	content: "";
	position: absolute;
	background: currentColor;
	opacity: 0.55;
}

.tcwh-mark::before {
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
}

.tcwh-mark::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
}

.tcwh-hero__note {
	left: var(--x);
	top: var(--y);
}

.tcwh-hero__note b {
	display: block;
	font-weight: 600;
	color: rgba(70, 101, 155, 0.95);
}

.tcwh-hero__note--right {
	transform: translateX(-100%);
	text-align: right;
}

/* The scale down the left margin. */
.tcwh-hero__rule {
	position: absolute;
	left: 1.1%;
	top: 26%;
	bottom: 24%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 1px solid rgba(70, 101, 155, 0.18);
	list-style: none;
}

.tcwh-hero__rule li {
	position: relative;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: rgba(70, 101, 155, 0.74);
}

.tcwh-hero__rule li::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 50%;
	width: 7px;
	height: 1px;
	background: rgba(70, 101, 155, 0.32);
}

/* Copy --------------------------------------------------------------------- */

.tcwh-hero__eyebrow {
	margin: 0;
	font-size: var(--h-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--h-blue);
}

.tcwh-hero__title {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	font-size: var(--h-fs-1);
	font-weight: 700;
	letter-spacing: -0.038em;
	line-height: 1.06;
	color: var(--h-ink);
	max-width: 15ch;
	text-wrap: balance;
}

.tcwh-hero__lead {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--h-ink);
	max-width: 46ch;
}

.tcwh-hero__body {
	margin: 14px 0 0;
	font-size: var(--h-fs-body);
	line-height: 1.68;
	color: var(--h-ink-2);
	max-width: 50ch;
}

.tcwh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(24px, 2.8vw, 32px);
}

.tcwh-hero__proof {
	margin: clamp(18px, 2vw, 24px) 0 0;
	font-size: var(--h-fs-sm);
	font-weight: 600;
	color: var(--h-blue);
}

.tcwh-hero__proof span:not(:last-child)::after {
	content: "·";
	margin: 0 8px;
	color: var(--h-ink-3);
	font-weight: 500;
}

/* The brief sheet ---------------------------------------------------------- */

.tcwh-brief {
	position: relative;
	z-index: 2;
	width: min(100%, 560px);
	margin-inline: auto;
	padding: clamp(26px, 2.6vw, 36px) clamp(20px, 2.4vw, 34px) clamp(28px, 2.8vw, 38px);
	background: linear-gradient(115deg, #ffffff 0%, #fbfaf7 46%, #f2f1ec 100%);
	box-shadow:
		0 2px 3px rgba(15, 37, 68, 0.05),
		0 22px 44px rgba(15, 37, 68, 0.13),
		0 48px 90px rgba(15, 37, 68, 0.09);
	transform: rotate(1.8deg);
}

/* The sheet settles into place: a touch more tilt and depth on arrival. */
html.js .tcwh-brief[data-reveal] {
	opacity: 0;
	transform: rotate(4.4deg) translateY(20px) scale(0.985);
	transition:
		opacity 700ms var(--h-ease-out),
		transform 700ms var(--h-ease-out);
	transition-delay: 260ms;
}

html.js .tcwh-brief[data-reveal].is-in {
	opacity: 1;
	transform: rotate(1.8deg);
}

.tcwh-brief__clip {
	position: absolute;
	top: -26px;
	left: clamp(28px, 3.4vw, 46px);
	width: 26px;
	height: 82px;
	border: 3.5px solid var(--h-blue);
	border-radius: 13px;
	transform: rotate(-4deg);
	transform-origin: 50% 12px;
}

.tcwh-brief__clip::after {
	content: "";
	position: absolute;
	inset: 8px 6px 18px;
	border: 3.5px solid var(--h-blue);
	border-radius: 9px;
	opacity: 0.85;
}

/* One small settle, once, and only if the visitor is happy with motion. */
html.js .tcwh-brief.is-in .tcwh-brief__clip {
	animation: tcwh-clip-settle 720ms var(--h-ease-out) 420ms both;
}

@keyframes tcwh-clip-settle {
	0% { transform: rotate(-11deg); }
	62% { transform: rotate(-2.2deg); }
	100% { transform: rotate(-4deg); }
}

.tcwh-brief__title {
	margin: 0 0 0 clamp(58px, 5.4vw, 76px);
	font-size: clamp(21px, 2vw, 27px);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #1b2c45;
}

.tcwh-brief__subtitle {
	margin: 4px 0 0 clamp(58px, 5.4vw, 76px);
	font-size: 14px;
	font-weight: 500;
	color: var(--h-blue);
}

.tcwh-brief__rows {
	margin: clamp(18px, 2vw, 26px) 0 0;
	padding: 0;
	list-style: none;
}

.tcwh-brief__rows li {
	display: grid;
	grid-template-columns: 30px minmax(72px, 88px) minmax(0, 1fr) 24px;
	gap: clamp(8px, 1vw, 14px);
	align-items: center;
	padding: clamp(11px, 1.2vw, 15px) 0;
	border-top: 1px solid rgba(15, 37, 68, 0.11);
}

.tcwh-brief__icon {
	display: flex;
	color: var(--h-blue);
}

.tcwh-brief__rows b {
	font-size: 14.5px;
	font-weight: 600;
	color: #24364f;
}

/* The answers are handwritten on a ruled line, the way a brief is filled in. */
.tcwh-brief__rows i {
	font-style: normal;
	font-family: var(--h-font-hand);
	font-size: 17px;
	line-height: 1.3;
	color: #46586f;
	border-bottom: 1px solid rgba(15, 37, 68, 0.16);
	padding-bottom: 2px;
}

.tcwh-brief__sketch {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	color: #5b6b81;
}

.tcwh-brief__sketch svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 200px;
}

.tcwh-brief__check {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1.6px solid #7e8ca0;
	border-radius: 2px;
	justify-self: end;
}

.tcwh-brief__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	width: 7px;
	height: 13px;
	border: solid #2f4468;
	border-width: 0 2.4px 2.4px 0;
	transform: rotate(42deg);
}

.tcwh-brief__check--done {
	border-color: var(--h-green);
}

.tcwh-brief__check--done::after {
	border-color: var(--h-green);
}

/* The pencil ---------------------------------------------------------------
   The pencil itself, and the anchor its point rests on, are styled in
   assets/css/engineering-thread.css along with the line it draws. */

.tcwh-anchor {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}

.tcwh-anchor--rest {
	left: 83%;
	top: 97%;
	z-index: 3;
}

/* The thread leaves the sheet and heads down the page, across the whole hero. */
.tcwh-thread--hero {
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

@media (max-width: 999px) {

	.tcwh-hero__visual {
		max-width: 520px;
		margin-inline: auto;
	}

	.tcwh-brief {
		transform: rotate(1.2deg);
	}

	html.js .tcwh-brief[data-reveal].is-in {
		transform: rotate(1.2deg);
	}

	.tcwh-anchor--rest {
		left: 74%;
		top: 101%;
	}

	.tcwh-thread--hero {
		display: none;
	}
}

@media (max-width: 600px) {

	.tcwh-brief__rows li {
		grid-template-columns: 26px minmax(64px, 78px) minmax(0, 1fr) 20px;
	}

	.tcwh-brief__rows i {
		font-size: 15px;
	}
}

/* ==========================================================================
   5. Trust rail
   ========================================================================== */

.tcwh-trust {
	padding-block: clamp(28px, 3.2vw, 40px);
	border-top: 1px solid rgba(70, 101, 155, 0.08);
	border-bottom: 1px solid rgba(70, 101, 155, 0.08);
}

.tcwh-trust__heading {
	margin: 0 0 22px;
	font-size: clamp(15px, 1.15vw, 17px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--h-ink);
}

.tcwh-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
}

.tcwh-trust__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0;
	padding: 0 clamp(18px, 2.4vw, 34px) 0 0;
	border-right: 1px solid rgba(70, 101, 155, 0.16);
	list-style: none;
}

.tcwh-trust__proof li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tcwh-trust__icon {
	display: flex;
	color: var(--h-blue);
}

.tcwh-trust__figure {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.tcwh-trust__figure b {
	font-size: 16px;
	font-weight: 700;
	color: var(--h-ink);
}

.tcwh-trust__figure i {
	font-style: normal;
	font-size: var(--h-fs-xs);
	color: var(--h-ink-2);
}

.tcwh-trust__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3.4vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Quiet by default, normal contrast when a reader points at one. The height is fixed in CSS so
   the row cannot shift as the marks load, whatever each file's intrinsic size is. */
.tcwh-trust__logos img {
	display: block;
	width: auto;
	height: clamp(20px, 2vw, 26px);
	max-width: 130px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.78;
	transition: filter var(--h-t) var(--h-ease), opacity var(--h-t) var(--h-ease);
}

.tcwh-trust__logos li:hover img {
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 719px) {

	.tcwh-trust__proof {
		width: 100%;
		padding-right: 0;
		border-right: 0;
		padding-bottom: 18px;
		border-bottom: 1px solid rgba(70, 101, 155, 0.16);
	}
}

/* ==========================================================================
   6. Engagement modules
   ========================================================================== */

.tcwh-engage__track {
	position: relative;
	margin-top: clamp(30px, 3.6vw, 46px);
	/* Fixed, not fluid: the thread below is aligned to the node dots in these exact pixels. */
	padding-bottom: 66px;
}

/* The line runs along the bottom of the row, through the three nodes, and leaves to the right on
   its way to the navy band. */
.tcwh-thread--engage {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 66px;
}

.tcwh-engage__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--h-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Three abreast or one under the other. Two, with a third hanging below, reads as an accident. */
@media (min-width: 900px) {
	.tcwh-engage__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tcwh-engage__item {
	position: relative;
	display: flex;
}

.tcwh-engage__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: clamp(20px, 2vw, 26px);
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-1);
}

.tcwh-engage__head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.tcwh-engage__no {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--h-blue-soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--h-blue);
}

.tcwh-engage__title {
	margin: 4px 0 0;
	font-size: var(--h-fs-3);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--h-ink);
}

.tcwh-engage__text {
	margin: 8px 0 0;
	font-size: var(--h-fs-sm);
	line-height: 1.6;
	color: var(--h-ink-2);
}

.tcwh-engage__figure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: 12px;
	align-items: stretch;
	margin-top: auto;
	padding-top: clamp(18px, 2vw, 26px);
}

/* The node the thread lights up as the module is read. */
.tcwh-engage__node {
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--h-ink-3);
	transition: border-color var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease);
}

.tcwh-engage__item.is-in .tcwh-engage__node,
.tcwh-engage__node.is-passed {
	border-color: var(--h-blue);
	box-shadow: 0 0 0 5px rgba(70, 101, 155, 0.12);
}

.tcwh-engage__item:last-child.is-in .tcwh-engage__node,
.tcwh-engage__item:last-child .tcwh-engage__node.is-passed {
	border-color: var(--h-green);
	box-shadow: 0 0 0 5px rgba(30, 185, 128, 0.14);
}

/* While the Engineering Thread is running, the line decides which nodes are lit. */
html.tcwt-on .tcwh-engage__item.is-in .tcwh-engage__node:not(.is-passed) {
	border-color: var(--h-ink-3);
	box-shadow: none;
}

/* Drawn figures ------------------------------------------------------------ */

.tcwh-fig {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px;
	background: #f7f9fc;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	transition: border-color var(--h-t) var(--h-ease), background var(--h-t) var(--h-ease);
}

.tcwh-engage__card:hover .tcwh-fig,
.tcwh-engage__card:focus-within .tcwh-fig {
	border-color: var(--h-blue-line);
	background: #f3f5f9;
}

.tcwh-fig__bar {
	height: 9px;
	border-radius: 3px;
	background: #cdd8ea;
}

.tcwh-fig__cols {
	display: flex;
	gap: 7px;
	flex: 1;
	min-height: 34px;
}

.tcwh-fig__cols i {
	flex: 1;
	border-radius: 4px;
	background: #dfe7f4;
}

.tcwh-fig__cols i:first-child {
	background: #ccd6e8;
}

.tcwh-fig__row {
	display: block;
	height: 7px;
}

.tcwh-fig__row i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: #dbe3ef;
}

.tcwh-fig__row--on i {
	background: var(--h-blue);
	opacity: 0.5;
}

.tcwh-fig--backlog {
	justify-content: center;
	gap: 9px;
}

.tcwh-fig--platform {
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.tcwh-fig__cloud {
	position: relative;
	width: 54px;
	height: 22px;
	border-radius: 11px;
	background: #ccd6e8;
}

.tcwh-fig__cloud::before,
.tcwh-fig__cloud::after {
	content: "";
	position: absolute;
	bottom: 4px;
	border-radius: 50%;
	background: #ccd6e8;
}

.tcwh-fig__cloud::before {
	left: 9px;
	width: 20px;
	height: 20px;
}

.tcwh-fig__cloud::after {
	right: 10px;
	width: 15px;
	height: 15px;
}

.tcwh-fig__rack {
	display: flex;
	gap: 5px;
	width: 100%;
	max-width: 92px;
	padding: 5px 6px;
	border-radius: 4px;
	background: #e3eaf6;
}

.tcwh-fig__rack i {
	flex: 1;
	height: 7px;
	border-radius: 2px;
	background: #b9c9e4;
}

.tcwh-fig__rack:last-child i:first-child {
	background: var(--h-green);
	opacity: 0.65;
}

/* Checklist ---------------------------------------------------------------- */

.tcwh-checks {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	list-style: none;
	font-size: var(--h-fs-xs);
	font-weight: 500;
	color: var(--h-ink-2);
}

.tcwh-checks li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tcwh-checks__box {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	border: 1.4px solid var(--h-blue);
	border-radius: 3px;
}

.tcwh-checks__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--h-blue);
	border-width: 0 1.8px 1.8px 0;
	transform: rotate(42deg);
}

@media (max-width: 899px) {

	.tcwh-thread--engage {
		display: none;
	}

	.tcwh-engage__node {
		display: none;
	}
}

/* ==========================================================================
   7. Engineering depth
   ========================================================================== */

.tcwh-depth {
	--h-section-y: clamp(64px, 7vw, 104px);
	color: var(--h-ink-invert);
}

.tcwh-depth__annotation {
	right: 2%;
	top: 26%;
	writing-mode: vertical-rl;
	letter-spacing: 0.28em;
}

@media (max-width: 1199px) {
	.tcwh-depth__annotation {
		display: none;
	}
}

.tcwh-depth__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 40px);
}

.tcwh-depth__intro {
	max-width: 58ch;
}

/* The view switcher -------------------------------------------------------- */

.tcwh-switch {
	display: inline-flex;
	padding: 4px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--h-line-invert);
	border-radius: 10px;
}

.tcwh-switch__btn {
	min-height: 44px;
	padding: 0 clamp(14px, 1.6vw, 22px);
	background: transparent;
	border: 0;
	border-radius: 7px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--h-ink-invert-2);
	cursor: pointer;
	transition: background var(--h-t) var(--h-ease), color var(--h-t) var(--h-ease);
}

.tcwh-switch__btn:hover {
	color: #fff;
}

.tcwh-switch__btn.is-on {
	background: var(--h-blue-on-dark);
	color: var(--h-navy);
}

/* Stage: both views share one cell, so switching cannot change the height ---- */

.tcwh-depth__stage {
	display: grid;
	margin-top: clamp(28px, 3.4vw, 44px);
}

.tcwh-depth__panel {
	grid-area: 1 / 1;
	transition:
		opacity var(--h-t-view) var(--h-ease),
		transform var(--h-t-view) var(--h-ease);
}

/* Without scripting both views are present; the script hides the one not chosen. */
html.js .tcwh-depth__panel {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

html.js .tcwh-depth__panel.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* With no scripting the switch cannot switch, so both views are shown, one after the other, and
   the control that would do nothing is not offered. */
html.no-js .tcwh-depth__panel + .tcwh-depth__panel {
	margin-top: 40px;
	position: static;
}

html.no-js .tcwh-depth__stage {
	display: block;
}

html.no-js .tcwh-switch {
	display: none;
}

/* Screens ------------------------------------------------------------------ */

.tcwh-depth__screens {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwh-depth__screens > li {
	text-align: center;
	transition: opacity var(--h-t) var(--h-ease);
}

.tcwh-depth__screen-title {
	margin: 14px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
}

.tcwh-depth__screen-text {
	margin: 4px 0 0;
	font-size: var(--h-fs-xs);
	line-height: 1.5;
	color: var(--h-ink-invert-3);
}

/* A drawn interface. Structure without data: no names, no prices, no records. */
.tcwh-scr {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	max-width: 168px;
	margin-inline: auto;
	aspect-ratio: 168 / 300;
	padding: 16px 11px 12px;
	background: linear-gradient(180deg, #12294a 0%, #0c1f3b 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	transition: border-color var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease);
}

.tcwh-depth__screens > li:hover .tcwh-scr {
	border-color: rgba(169, 186, 216, 0.5);
}

.tcwh-scr__notch {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 34px;
	height: 4px;
	margin-left: -17px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
}

.tcwh-scr__bar {
	height: 8px;
	border-radius: 3px;
	background: rgba(169, 186, 216, 0.5);
	width: 54%;
}

.tcwh-scr__field {
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.11);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.tcwh-scr__pill {
	width: 62%;
	height: 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.tcwh-scr__pill--on {
	background: rgba(30, 185, 128, 0.5);
}

.tcwh-scr__map {
	flex: 1;
	min-height: 62px;
	border-radius: 8px;
	background:
		linear-gradient(115deg, rgba(121, 148, 195, 0.28) 0%, rgba(30, 185, 128, 0.16) 100%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 13px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 13px);
}

.tcwh-scr__line {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.15);
}

.tcwh-scr__item {
	display: flex;
	align-items: center;
	gap: 7px;
}

.tcwh-scr__item b {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.14);
}

.tcwh-scr__item i {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.13);
}

.tcwh-scr__tiles {
	display: flex;
	gap: 7px;
}

.tcwh-scr__tiles i {
	flex: 1;
	height: 30px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
}

.tcwh-scr__tiles i:first-child {
	background: rgba(121, 148, 195, 0.32);
}

.tcwh-scr__chart {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	flex: 1;
	min-height: 58px;
}

.tcwh-scr__chart i {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: rgba(169, 186, 216, 0.45);
}

.tcwh-scr__chart i:last-child {
	background: rgba(30, 185, 128, 0.65);
}

.tcwh-scr__stat {
	display: flex;
	gap: 7px;
}

.tcwh-scr__stat i {
	flex: 1;
	height: 26px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
}

/* Both views: interfaces on the left, and the column that changes on the right --------------
   The two panels share a shape as well as a grid cell, so switching swaps only the right column
   and can never move the page. */

.tcwh-depth__panel--product,
.tcwh-depth__panel--system {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {

	.tcwh-depth__panel--product,
	.tcwh-depth__panel--system {
		grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	}
}

/* A use case is a row of the same build as a discipline, with a sentence rather than a list. */
.tcwh-layer--case .tcwh-layer__items em {
	color: var(--h-ink-invert-2);
}

.tcwh-depth__screens--small {
	gap: clamp(8px, 1vw, 14px);
}

.tcwh-depth__screens--small .tcwh-scr {
	max-width: 122px;
	padding: 13px 8px 10px;
	border-radius: 14px;
	gap: 5px;
}

.tcwh-depth__screens--small .tcwh-depth__screen-title {
	margin-top: 10px;
	font-size: 12.5px;
}

.tcwh-depth__screens--small .tcwh-depth__screen-text {
	font-size: 11px;
}

.tcwh-depth__layers-title {
	margin: 0 0 14px;
	font-size: var(--h-fs-sm);
	font-weight: 600;
	color: var(--h-ink-invert-2);
}

.tcwh-depth__layers ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwh-layer {
	display: grid;
	grid-template-columns: 34px minmax(74px, auto) minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--h-line-invert);
	border-radius: var(--h-r);
	transition: background var(--h-t) var(--h-ease), border-color var(--h-t) var(--h-ease);
}

/* The layers arrive in order once the view is shown. */
html.js .tcwh-depth__panel--system.is-on .tcwh-layer {
	animation: tcwh-layer-in 420ms var(--h-ease-out) both;
	animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes tcwh-layer-in {
	from { opacity: 0; transform: translateY(9px); }
	to { opacity: 1; transform: none; }
}

.tcwh-layer:hover {
	background: rgba(255, 255, 255, 0.075);
	border-color: var(--h-line-invert-strong);
}

.tcwh-layer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(121, 148, 195, 0.16);
	color: #a9bad8;
}

.tcwh-layer__title {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.tcwh-layer__items {
	font-size: var(--h-fs-xs);
	color: var(--h-ink-invert-3);
	line-height: 1.5;
}

.tcwh-layer__items em {
	font-style: normal;
}

.tcwh-layer__items i {
	font-style: normal;
	margin: 0 7px;
	opacity: 0.5;
}

/* Flow rail ---------------------------------------------------------------- */

.tcwh-depth__flow {
	position: relative;
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: 26px;
}

.tcwh-thread--depth {
	left: 0;
	right: 0;
	top: 12px;
	width: 100%;
	height: 32px;
}

.tcwh-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwh-flow__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
	color: var(--h-ink-invert-3);
}

.tcwh-flow__dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--h-navy);
	border: 2.5px solid #3d5a86;
	transition: border-color var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease),
		transform var(--h-t) var(--h-ease);
}

.tcwh-flow__label {
	font-size: var(--h-fs-xs);
	font-weight: 500;
	line-height: 1.35;
}

.tcwh-flow__item.is-passed .tcwh-flow__dot {
	border-color: #7994c3;
}

.tcwh-flow__item.is-passed {
	color: var(--h-ink-invert-2);
}

.tcwh-flow__item.is-active .tcwh-flow__dot {
	border-color: var(--h-green);
	box-shadow: 0 0 0 5px rgba(30, 185, 128, 0.18);
	transform: scale(1.12);
}

.tcwh-flow__item.is-active {
	color: #fff;
}

.tcwh-flow__item.is-active .tcwh-flow__label {
	font-weight: 600;
}

/* One named system, as evidence rather than as the subject of the section. */
.tcwh-depth__example {
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	padding-left: 14px;
	border-left: 2px solid rgba(169, 186, 216, 0.4);
	max-width: 70ch;
	font-size: var(--h-fs-sm);
	line-height: 1.6;
	color: var(--h-ink-invert-2);
}

.tcwh-depth__example a {
	color: #a9bad8;
}

/* Foot --------------------------------------------------------------------- */

.tcwh-depth__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: clamp(30px, 3.6vw, 46px);
	padding-top: clamp(22px, 2.6vw, 32px);
	border-top: 1px solid var(--h-line-invert);
}

.tcwh-depth__closing {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(15px, 1.15vw, 17px);
	font-weight: 500;
	color: #fff;
}

.tcwh-depth__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

/* Small screens: the diagram stacks instead of being squeezed. --------------- */

@media (max-width: 899px) {

	.tcwh-depth__head {
		align-items: flex-start;
	}

	.tcwh-depth__screens {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.tcwh-depth__screens--small .tcwh-scr {
		max-width: 148px;
	}

	.tcwh-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Vertical, so six labels never crush into two characters each. */
	.tcwh-flow__item {
		flex-direction: row;
		gap: 12px;
		text-align: left;
		padding: 9px 0;
	}

	.tcwh-depth__flow {
		padding-top: 0;
		padding-left: 6px;
	}

	.tcwh-thread--depth {
		display: none;
	}

	.tcwh-flow__item + .tcwh-flow__item {
		border-top: 1px solid var(--h-line-invert);
	}
}

/* ==========================================================================
   8. Long-term partnerships
   ========================================================================== */

.tcwh-partner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.4vw, 44px);
	margin-top: clamp(28px, 3.2vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.tcwh-partner__inner {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}
}

/* The section heading, with the way through to the full list beside it. */
.tcwh-partner__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.tcwh-partner__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
}

/* Lifecycle path ----------------------------------------------------------- */

.tcwh-partner__cycle {
	position: relative;
	padding-bottom: 26px;
}

.tcwh-thread--cycle,
.tcwh-thread--ladder {
	left: 0;
	right: 0;
	bottom: 6px;
	width: 100%;
	height: 22px;
}

.tcwh-cycle,
.tcwh-ladder {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 560px) {
	.tcwh-cycle {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tcwh-ladder {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.tcwh-ladder {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tcwh-cycle__item,
.tcwh-ladder__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 26px;
}

.tcwh-cycle__item b,
.tcwh-ladder__item b {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--h-ink);
}

.tcwh-cycle__item i,
.tcwh-ladder__item i {
	font-style: normal;
	font-size: var(--h-fs-xs);
	line-height: 1.45;
	color: var(--h-ink-2);
}

.tcwh-cycle__dot,
.tcwh-ladder__dot {
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--h-ink-3);
	transition: border-color var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease),
		transform var(--h-t) var(--h-ease);
}

.tcwh-cycle__item.is-passed .tcwh-cycle__dot,
.tcwh-ladder__item.is-passed .tcwh-ladder__dot {
	border-color: var(--h-blue);
}

.tcwh-cycle__item.is-active .tcwh-cycle__dot,
.tcwh-ladder__item.is-active .tcwh-ladder__dot {
	border-color: var(--h-green);
	box-shadow: 0 0 0 5px rgba(30, 185, 128, 0.16);
	transform: scale(1.1);
}

/* Cards -------------------------------------------------------------------- */

.tcwh-partner__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--h-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwh-partner__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(18px, 1.9vw, 24px);
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-1);
}

.tcwh-partner__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: 34px;
}

.tcwh-partner__logo {
	display: block;
	width: auto;
	height: 26px;
	max-width: 116px;
	object-fit: contain;
}

.tcwh-partner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--h-blue-soft);
	color: var(--h-blue);
}

.tcwh-partner__badge {
	padding: 4px 9px;
	border: 1px solid var(--h-line-strong);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--h-ink-2);
}

.tcwh-partner__title {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;
	color: var(--h-ink);
}

.tcwh-partner__subtitle {
	margin: 4px 0 0;
	font-size: var(--h-fs-sm);
	font-weight: 600;
	color: var(--h-blue);
}

.tcwh-partner__text {
	margin: 10px 0 18px;
	font-size: var(--h-fs-xs);
	line-height: 1.6;
	color: var(--h-ink-2);
}

.tcwh-partner__card .tcwh-link {
	margin-top: auto;
	font-size: var(--h-fs-xs);
}

/* ==========================================================================
   9. Rapid product engineering
   ========================================================================== */

.tcwh-sprint__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.4vw, 44px);
	margin-top: clamp(28px, 3.2vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.tcwh-sprint__inner {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}
}

.tcwh-sprint__ladder {
	position: relative;
	padding-top: 6px;
}

.tcwh-sprint__note {
	margin: 26px 0 0;
	padding-left: 14px;
	border-left: 2px solid var(--h-blue-line);
	font-size: var(--h-fs-xs);
	line-height: 1.65;
	color: var(--h-ink-2);
	max-width: 56ch;
}

.tcwh-sprint__panel {
	padding: clamp(20px, 2.2vw, 28px);
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-2);
}

.tcwh-sprint__panel-title {
	margin: 0 0 16px;
	font-size: var(--h-fs-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--h-ink);
}

.tcwh-sprint__model {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 18px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.tcwh-sprint__model li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--h-fs-xs);
	font-weight: 500;
	color: var(--h-ink-2);
}

.tcwh-sprint__model-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: var(--h-blue-soft);
	color: var(--h-blue);
}

.tcwh-sprint__cta {
	width: 100%;
}

/* ==========================================================================
   10. Owned products
   ========================================================================== */

.tcwh-products__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--h-gap);
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1000px) {

	.tcwh-products__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.42fr);
	}
}

.tcwh-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	height: 100%;
	padding: clamp(18px, 2vw, 24px);
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-1);
}

@media (min-width: 560px) {
	.tcwh-product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
		align-items: center;
	}
}

.tcwh-product__logo {
	display: block;
	width: auto;
	height: 26px;
	max-width: 150px;
	object-fit: contain;
	object-position: left center;
}

.tcwh-product__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
}

.tcwh-product__brand--mark .tcwh-product__logo {
	height: 30px;
	max-width: 40px;
	object-fit: contain;
}

.tcwh-product__name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--h-ink);
}

.tcwh-product__category {
	margin: 8px 0 0;
	font-size: var(--h-fs-xs);
	font-weight: 600;
	color: var(--h-blue);
}

.tcwh-product__text {
	margin: 8px 0 14px;
	font-size: var(--h-fs-xs);
	line-height: 1.6;
	color: var(--h-ink-2);
}

.tcwh-product__visual {
	position: relative;
}

.tcwh-product__visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--h-r-sm);
	border: 1px solid var(--h-line);
}

/* A drawn application window, used until an approved screenshot exists. */
.tcwh-win {
	display: block;
	overflow: hidden;
	border: 1px solid var(--h-line-strong);
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 10px 26px -14px rgba(15, 37, 68, 0.5);
	transition: transform var(--h-t) var(--h-ease), box-shadow var(--h-t) var(--h-ease);
}

.tcwh-product:hover .tcwh-win {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(15, 37, 68, 0.55);
}

.tcwh-win__chrome {
	display: flex;
	gap: 4px;
	padding: 7px 9px;
	background: #f1f4f9;
	border-bottom: 1px solid var(--h-line);
}

.tcwh-win__chrome em {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c8d2e2;
}

.tcwh-win__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 11px;
	min-height: 118px;
}

.tcwh-win__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tcwh-win__row i {
	height: 7px;
	border-radius: 3px;
	background: #c9d5e9;
}

.tcwh-win__row b {
	width: 34px;
	height: 13px;
	border-radius: 4px;
	background: var(--h-blue);
	opacity: 0.75;
}

.tcwh-win__tiles {
	display: flex;
	gap: 6px;
}

.tcwh-win__tiles i {
	flex: 1;
	height: 24px;
	border-radius: 5px;
	background: #eaf0f9;
	border: 1px solid #dde5f2;
}

.tcwh-win__tiles i:first-child {
	background: var(--h-blue-soft);
	border-color: #ccd6e8;
}

.tcwh-win__table {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tcwh-win__table i {
	height: 6px;
	border-radius: 3px;
	background: #e3e9f3;
}

.tcwh-win__table i:nth-child(2) {
	background: #d3dff2;
}

.tcwh-win__split {
	display: flex;
	gap: 7px;
	flex: 1;
}

.tcwh-win__map {
	flex: 1.2;
	min-height: 62px;
	border-radius: 6px;
	background:
		linear-gradient(120deg, rgba(70, 101, 155, 0.14), rgba(30, 185, 128, 0.12)),
		repeating-linear-gradient(0deg, rgba(15, 37, 68, 0.06) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(90deg, rgba(15, 37, 68, 0.06) 0 1px, transparent 1px 12px);
}

.tcwh-win__list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.tcwh-win__list i {
	height: 7px;
	border-radius: 3px;
	background: #e3e9f3;
}

.tcwh-win__list i:nth-child(3) {
	background: rgba(30, 185, 128, 0.4);
}

/* Explore all ---------------------------------------------------------------- */

.tcwh-products__more-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 120px;
	padding: clamp(18px, 2vw, 24px);
	background: #fff;
	border: 1px dashed var(--h-line-strong);
	border-radius: var(--h-r-lg);
	font-size: var(--h-fs-sm);
	font-weight: 600;
	color: var(--h-blue);
	text-decoration: none;
}

.tcwh-products__more-link:hover {
	border-color: var(--h-blue);
	border-style: solid;
}

/* ==========================================================================
   11. Client reviews
   ========================================================================== */

.tcwh-reviews__head,
.tcwh-insights__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.tcwh-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--h-gap);
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

.tcwh-review {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: clamp(24px, 2.6vw, 34px);
	background: var(--h-ice-2);
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
}

/* The mark moves in; the words it introduces never do. */
.tcwh-review__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	line-height: 0.6;
	color: var(--h-blue);
	opacity: 0.24;
}

html.js [data-reveal] .tcwh-review__mark {
	transform: translateY(6px);
	opacity: 0;
	transition: opacity 520ms var(--h-ease-out) 120ms, transform 520ms var(--h-ease-out) 120ms;
}

html.js [data-reveal].is-in .tcwh-review__mark {
	transform: none;
	opacity: 0.24;
}

.tcwh-review__quote {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
}

.tcwh-review__quote p {
	margin: 0;
	font-size: clamp(14.5px, 1.1vw, 16px);
	line-height: 1.72;
	color: var(--h-ink);
}

.tcwh-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: clamp(20px, 2.2vw, 28px);
}

.tcwh-review__who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.tcwh-review__photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.tcwh-review__who b {
	display: block;
	font-size: var(--h-fs-sm);
	font-weight: 700;
	color: var(--h-ink);
}

.tcwh-review__who i {
	display: block;
	font-style: normal;
	font-size: var(--h-fs-xs);
	color: var(--h-ink-2);
}

.tcwh-review__meta {
	color: var(--h-ink-2) !important;
}

.tcwh-review__score {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.tcwh-review__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--h-fs-sm);
	font-weight: 700;
	color: var(--h-ink);
}

.tcwh-review__star {
	color: #f0a92e;
	fill: #f0a92e;
}

.tcwh-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--h-green);
}

/* ==========================================================================
   12. Insights
   ========================================================================== */

.tcwh-insights__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--h-gap);
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.tcwh-insights__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tcwh-insight {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(96px, 0.6fr);
	gap: 16px;
	align-items: stretch;
	height: 100%;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-1);
}

.tcwh-insight__media {
	order: 2;
	overflow: hidden;
	border-radius: var(--h-r-sm);
	background: var(--h-ice);
}

.tcwh-insight__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 108px;
	object-fit: cover;
}

/* No approved image yet: a drafting panel rather than a stock photograph. */
.tcwh-insight__panel {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 108px;
	background-color: var(--h-ice);
	background-image:
		linear-gradient(to right, rgba(70, 101, 155, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.08) 1px, transparent 1px);
	background-size: 14px 14px;
}

.tcwh-insight__body {
	order: 1;
	display: flex;
	flex-direction: column;
}

.tcwh-insight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}

.tcwh-insight__tag {
	padding: 4px 9px;
	background: var(--h-blue-soft);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h-blue);
}

.tcwh-insight__read {
	font-size: 11.5px;
	color: var(--h-ink-3);
}

.tcwh-insight__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.35;
}

.tcwh-insight__title a {
	color: var(--h-ink);
	text-decoration: none;
}

/* The whole card is the target; the heading link supplies the accessible name. */
.tcwh-insight__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--h-r-lg);
}

.tcwh-insight {
	position: relative;
}

.tcwh-insight:hover .tcwh-insight__title a {
	color: var(--h-blue);
}

.tcwh-insight__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	font-size: var(--h-fs-xs);
	font-weight: 600;
	color: var(--h-blue);
}

.tcwh-insight__cta svg {
	transition: transform var(--h-t) var(--h-ease);
}

.tcwh-insight:hover .tcwh-insight__cta svg {
	transform: translateX(3px);
}

/* ==========================================================================
   13. Strategy call
   ========================================================================== */

.tcwh-cta {
	--h-section-y: clamp(58px, 6.6vw, 96px);
}

.tcwh-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.4vw, 48px);
	align-items: center;
}

@media (min-width: 900px) {
	.tcwh-cta__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	}
}

.tcwh-cta__copy {
	max-width: 60ch;
}

.tcwh-cta__points {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: clamp(22px, 2.6vw, 30px) 0 0;
	padding: 0;
	list-style: none;
}

.tcwh-cta__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--h-fs-sm);
	font-weight: 500;
	color: var(--h-ink-invert-2);
}

.tcwh-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--h-line-invert);
	color: #a9bad8;
}

.tcwh-cta__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

@media (min-width: 900px) {
	.tcwh-cta__action {
		align-items: flex-end;
		text-align: right;
	}
}

.tcwh-cta__note {
	margin: 0;
	font-size: var(--h-fs-xs);
	color: var(--h-ink-invert-3);
}

.tcwh-thread--cta {
	right: 2%;
	top: 6%;
	width: min(46%, 520px);
	height: 88%;
	opacity: 0.9;
}

.tcwh-cta__end {
	opacity: 0;
	transition: opacity var(--h-t) var(--h-ease);
}

html.js .tcwh-thread--cta[style*="--p: 1"] .tcwh-cta__end,
html.no-js .tcwh-cta__end {
	opacity: 1;
}

@media (max-width: 899px) {
	.tcwh-thread--cta {
		display: none;
	}
}

/* ==========================================================================
   Small screens: the horizontal rails have no row to run along
   ========================================================================== */

@media (max-width: 559px) {

	.tcwh-thread--cycle,
	.tcwh-thread--ladder {
		display: none;
	}

	.tcwh-cycle__dot,
	.tcwh-ladder__dot {
		position: static;
		margin-top: 8px;
	}

	.tcwh-cycle__item,
	.tcwh-ladder__item {
		padding-bottom: 14px;
	}
}

/* ==========================================================================
   Touch: inline actions get a finger-sized target
   ==========================================================================
   The label stays the same size; the box around it grows. Card headings are
   left alone because the whole card is already the target.
   ========================================================================== */

@media (max-width: 899px) {

	.tcwh-link {
		min-height: 44px;
	}
}