/* ==========================================================================
   TheCodeWork — Portfolio
   Scoped entirely under .tcwp so nothing here can reach another template.
   Sizing is in px on purpose: the theme sets html{font-size:15px} and 18px at
   md, which makes rem unreliable across breakpoints.
   ========================================================================== */

.tcwp {
	/* Colour ---------------------------------------------------------------- */
	--tcwp-bg: #fbfaf8;
	--tcwp-surface: #ffffff;
	--tcwp-surface-2: #f1f5fa;
	--tcwp-ink: #0e1f3d;
	--tcwp-ink-2: #3b4c6b;
	--tcwp-ink-3: #6d7d99;
	--tcwp-accent: #46659b;   /* site primary — matches the global nav */
	--tcwp-accent-2: #38517c; /* darker primary, hover states */
	--tcwp-line: rgba(14, 31, 61, 0.10);
	--tcwp-line-2: rgba(14, 31, 61, 0.18);
	--tcwp-invert: #f6f8fc;

	/* Status ---------------------------------------------------------------- */
	--tcwp-live: #16a34a;
	--tcwp-ongoing: #ea7317;
	--tcwp-product: #46659b;
	--tcwp-archived: #7c88a0;
	--tcwp-regional: #0e7490;

	/* Type ------------------------------------------------------------------ */
	--tcwp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;

	/* Space & shape --------------------------------------------------------- */
	--tcwp-content: 1200px;
	--tcwp-pad: 24px;
	--tcwp-section: clamp(44px, 5.4vw, 84px);
	--tcwp-gap: clamp(16px, 1.6vw, 26px);
	--tcwp-r-art: 24px;
	--tcwp-r-card: 16px;
	--tcwp-r-sm: 10px;
	--tcwp-r-pill: 999px;

	/* Elevation ------------------------------------------------------------- */
	--tcwp-shadow-sm: 0 1px 2px rgba(14, 31, 61, 0.05);
	--tcwp-shadow: 0 1px 2px rgba(14, 31, 61, 0.04), 0 16px 36px -22px rgba(14, 31, 61, 0.30);

	/* Motion ---------------------------------------------------------------- */
	--tcwp-dur: 200ms;
	--tcwp-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	background: var(--tcwp-bg);
	color: var(--tcwp-ink);
	font-family: var(--tcwp-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

@media (min-width: 768px) {
	.tcwp { --tcwp-pad: 32px; }
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.tcwp-shell {
	width: 100%;
	max-width: calc(var(--tcwp-content) + (var(--tcwp-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--tcwp-pad);
}

.tcwp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tcwp :focus-visible {
	outline: 2px solid var(--tcwp-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.tcwp-eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tcwp-ink-3);
}

.tcwp-eyebrow--lock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--tcwp-accent);
}

.tcwp-h2 {
	margin: 0;
	font-size: clamp(24px, 2.5vw, 34px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.022em;
	color: var(--tcwp-ink);
}

.tcwp-h2--invert { color: #fff; }

/* Links --------------------------------------------------------------------- */

.tcwp-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tcwp-accent);
	text-decoration: none;
	transition: color var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-link:hover { color: var(--tcwp-accent-2); }
.tcwp-link__arrow { transition: transform var(--tcwp-dur) var(--tcwp-ease); flex: none; }
.tcwp-link:hover .tcwp-link__arrow { transform: translate(2px, -2px); }
.tcwp-link--sm { font-size: 12.5px; }

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

.tcwp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--tcwp-r-sm);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tcwp-dur) var(--tcwp-ease), color var(--tcwp-dur) var(--tcwp-ease), border-color var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-btn--light { background: #fff; color: var(--tcwp-ink); }
.tcwp-btn--light:hover { background: #ecf0f6; color: var(--tcwp-accent-2); }
.tcwp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.tcwp-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* Status -------------------------------------------------------------------- */

.tcwp-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tcwp-ink-2);
}

.tcwp-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tcwp-ink-3);
	flex: none;
}

.tcwp-status--live .tcwp-status__dot { background: var(--tcwp-live); }
.tcwp-status--ongoing .tcwp-status__dot { background: var(--tcwp-ongoing); }
.tcwp-status--product .tcwp-status__dot { background: var(--tcwp-product); }
.tcwp-status--regional .tcwp-status__dot { background: var(--tcwp-regional); }
.tcwp-status--archived .tcwp-status__dot { background: transparent; border: 1.5px solid var(--tcwp-archived); }
.tcwp-status--active .tcwp-status__dot { background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: tcwp-live 2.2s var(--tcwp-ease) infinite; }
.tcwp-status--active .tcwp-status__text { color: #15803d; font-weight: 600; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.tcwp-hero { padding-top: clamp(30px, 3.8vw, 52px); padding-bottom: clamp(18px, 2.2vw, 28px); }

.tcwp-hero__inner {
	display: grid;
	gap: clamp(22px, 3vw, 48px);
	align-items: end;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.tcwp-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.tcwp-hero__title {
	margin: 12px 0 0;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--tcwp-ink);
	max-width: 22ch;
}

.tcwp-hero__intro {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcwp-ink-2);
	max-width: 56ch;
}

.tcwp-metrics {
	display: flex;
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) { .tcwp-metrics { justify-content: flex-end; } }

.tcwp-metrics__item { position: relative; padding-right: clamp(20px, 3vw, 44px); }
.tcwp-metrics__item + .tcwp-metrics__item::before {
	content: "";
	position: absolute;
	left: calc(clamp(20px, 3vw, 44px) * -0.5);
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--tcwp-line);
}
.tcwp-metrics__item:last-child { padding-right: 0; }

.tcwp-metrics__value {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--tcwp-ink);
}

.tcwp-metrics__label { margin: 6px 0 0; font-size: 12.5px; color: var(--tcwp-ink-3); }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.tcwp-filterbar__scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; contain: paint; }
.tcwp-filterbar__scroll::-webkit-scrollbar { display: none; }

.tcwp-filterbar__track {
	display: inline-flex;
	gap: 8px;
	padding: 4px 0;
	min-width: min-content;
}

.tcwp-chip {
	appearance: none;
	border: 1px solid var(--tcwp-line-2);
	background: var(--tcwp-surface);
	color: var(--tcwp-ink-2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--tcwp-r-pill);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--tcwp-dur) var(--tcwp-ease), color var(--tcwp-dur) var(--tcwp-ease), border-color var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-chip:hover { border-color: var(--tcwp-accent); color: var(--tcwp-accent); }
.tcwp-chip.is-on { background: var(--tcwp-accent); border-color: var(--tcwp-accent); color: #fff; }
.tcwp-chip--sm { min-height: 34px; font-size: 12.5px; padding: 0 14px; }

/* --------------------------------------------------------------------------
   Discovery module — capability cards and the refinements under them
   -------------------------------------------------------------------------- */

.tcwp-discover { padding: clamp(26px, 3vw, 44px) 0 clamp(18px, 2vw, 26px); }

.tcwp-discover__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px clamp(20px, 3vw, 40px); }
.tcwp-discover__intro { min-width: 0; }
.tcwp-discover .tcwp-eyebrow { color: var(--tcwp-accent); }
.tcwp-discover__lede { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--tcwp-ink-2); max-width: 56ch; }

.tcwp-discover__reset {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	appearance: none;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcwp-accent);
	cursor: pointer;
}
.tcwp-discover__reset:hover { color: var(--tcwp-accent-2); }
.tcwp-discover__reset svg { transition: transform var(--tcwp-dur) var(--tcwp-ease); }
.tcwp-discover__reset:hover svg { transform: translateX(3px); }

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

.tcwp-discover__cards { display: grid; gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(20px, 2.4vw, 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

.tcwp-capcard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-height: 100%;
	padding: clamp(14px, 1.5vw, 20px);
	appearance: none;
	text-align: left;
	background: var(--tcwp-surface);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
	font-family: inherit;
	color: var(--tcwp-ink);
	cursor: pointer;
	transition: border-color var(--tcwp-dur) var(--tcwp-ease), box-shadow var(--tcwp-dur) var(--tcwp-ease), transform var(--tcwp-dur) var(--tcwp-ease), background-color var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-capcard:hover { border-color: var(--tcwp-line-2); box-shadow: 0 10px 26px rgba(12, 60, 110, 0.09); transform: translateY(-2px); }

.tcwp-capcard__count { position: absolute; top: clamp(14px, 1.5vw, 20px); right: clamp(14px, 1.5vw, 20px); font-size: 11.5px; font-weight: 500; color: var(--tcwp-ink-3); }
.tcwp-capcard__icon { display: flex; align-items: center; justify-content: center; height: 46px; color: var(--tcwp-ink); }

/* The rule is the selected marker: invisible until the card is on, so nothing shifts when it is. */
.tcwp-capcard__rule { display: block; width: 34px; height: 3px; margin: 10px 0 12px; border-radius: 2px; background: transparent; }

.tcwp-capcard__title { font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.tcwp-capcard__terms { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--tcwp-ink-3); }

.tcwp-capcard.is-on { background: #0e1f3d; border-color: #0e1f3d; color: #fff; box-shadow: 0 14px 32px rgba(12, 31, 61, 0.22); }
.tcwp-capcard.is-on .tcwp-capcard__count { color: rgba(255, 255, 255, 0.72); }
.tcwp-capcard.is-on .tcwp-capcard__icon { color: #fff; }
.tcwp-capcard.is-on .tcwp-capcard__rule { background: #3b82f6; }
.tcwp-capcard.is-on .tcwp-capcard__terms { color: rgba(255, 255, 255, 0.72); }

/* Refinement bar ---------------------------------------------------------- */

.tcwp-discover__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px clamp(12px, 1.4vw, 20px);
	margin-top: clamp(14px, 1.6vw, 20px);
	padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 18px);
	background: var(--tcwp-surface-2);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
}

@media (min-width: 1280px) {
	.tcwp-discover__bar { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
}

.tcwp-field { display: flex; flex-direction: column; gap: 1px; min-width: 168px; padding: 6px 12px; background: var(--tcwp-surface); border: 1px solid var(--tcwp-line); border-radius: var(--tcwp-r-sm); }
.tcwp-field__label { font-size: 10.5px; font-weight: 500; color: var(--tcwp-ink-3); }
.tcwp-field__control {
	appearance: none;
	width: 100%;
	padding: 0 18px 0 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' stroke='%236d7d99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcwp-ink);
	cursor: pointer;
}
.tcwp-field__control:focus-visible { outline: 2px solid var(--tcwp-accent); outline-offset: 3px; }

.tcwp-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tcwp-ink-2); cursor: pointer; }
.tcwp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tcwp-check__box { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1px solid var(--tcwp-line-2); border-radius: 5px; background: var(--tcwp-surface); color: transparent; flex: none; transition: background-color var(--tcwp-dur) var(--tcwp-ease), border-color var(--tcwp-dur) var(--tcwp-ease); }
.tcwp-check input:checked + .tcwp-check__box { background: var(--tcwp-accent); border-color: var(--tcwp-accent); color: #fff; }
.tcwp-check input:focus-visible + .tcwp-check__box { outline: 2px solid var(--tcwp-accent); outline-offset: 3px; }

/* Named tcwp-find, not tcwp-search: the CSS artwork already owns .tcwp-search for the fake
   search bar inside its browser mockups, and its later rules were repainting this field. */
.tcwp-find { position: relative; display: flex; align-items: center; flex: 1 1 180px; min-width: 168px; }
.tcwp-find__icon { position: absolute; left: 13px; color: var(--tcwp-ink-3); pointer-events: none; }
.tcwp-find__input {
	width: 100%;
	min-height: 42px;
	padding: 0 14px 0 38px;
	appearance: none;
	background: var(--tcwp-surface);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-sm);
	font-family: inherit;
	font-size: 14px;
	color: var(--tcwp-ink);
}
.tcwp-find__input::placeholder { color: var(--tcwp-ink-3); }

/* Sharing a row with the checkbox leaves the field too narrow to read what you typed. */
@media (max-width: 759px) { .tcwp-find { flex: 1 1 100%; } }
.tcwp-find__input:focus-visible { outline: 2px solid var(--tcwp-accent); outline-offset: 2px; }

.tcwp-discover__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; margin-left: auto; padding-left: clamp(12px, 1.4vw, 20px); font-size: 13.5px; color: var(--tcwp-ink-3); }
.tcwp-discover__scope { font-weight: 700; color: var(--tcwp-ink); }
.tcwp-discover__scope::after { content: " ·"; color: var(--tcwp-ink-3); font-weight: 400; }

@media (min-width: 1280px) { .tcwp-discover__summary { border-left: 1px solid var(--tcwp-line-2); } }

/* Legend ------------------------------------------------------------------ */

.tcwp-discover__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px clamp(16px, 2vw, 30px); margin-top: clamp(14px, 1.6vw, 20px); padding-top: clamp(12px, 1.4vw, 16px); border-top: 1px solid var(--tcwp-line); }
.tcwp-discover__note { margin: 0; font-size: 12.5px; color: var(--tcwp-ink-3); }

.tcwp-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(14px, 1.8vw, 26px); margin: 0; padding: 0; list-style: none; }
.tcwp-keys__item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tcwp-ink-2); }
.tcwp-keys__mark { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; }
.tcwp-keys__mark--dot { border-radius: 50%; }
.tcwp-keys__mark--live { background: var(--tcwp-live); }
.tcwp-keys__mark--ongoing { background: var(--tcwp-ongoing); }
.tcwp-keys__mark--ring { border: 1.5px solid var(--tcwp-ink-3); border-radius: 50%; }
.tcwp-keys__mark--diamond { width: 11px; height: 11px; background: var(--tcwp-product); transform: rotate(45deg); border-radius: 2px; }
.tcwp-keys__mark--link { width: 20px; color: var(--tcwp-ink-3); }

/* --------------------------------------------------------------------------
   Showcase, captions, pairs
   -------------------------------------------------------------------------- */

.tcwp-pair { margin-top: var(--tcwp-gap); }

/* Full-bleed project bands: a muted wash of each project's accent, generous padding, and no gap
   between adjacent bands — the colour change itself is the separator. */
.tcwp-band { padding: clamp(32px, 3.7vw, 54px) 0; }
.tcwp-band--cream  { background: #eff5f2; }
.tcwp-band--sand   { background: #f8f1e8; }
.tcwp-band--cobalt { background: #edf2fb; }
.tcwp-band--navy   { background: #edf1f6; }
.tcwp-band--coral  { background: #faf0eb; }
.tcwp-band--forest { background: #edf4ef; }
.tcwp-band--ice    { background: #eef4fa; }
.tcwp-band--slate  { background: #f0f3f7; }
.tcwp-band--violet { background: #f3f0fa; }
.tcwp-band--teal   { background: #edf5f3; }
.tcwp-band--sky    { background: #eef4f9; }
.tcwp-band--mist   { background: #f0f2f6; }
.tcwp-band--mdware { background: #e8f2fa; } /* light tint of the MDware group brand blue #0878c8 */
.tcwp-band--arctic { background: #edf4f9; }

.tcwp-work { padding: clamp(28px, 3.1vw, 46px) 0; }
.tcwp-work > .tcwp-shell > * + * { margin-top: clamp(24px, 2.7vw, 42px); }

.tcwp-caption {
	display: grid;
	gap: 10px 32px;
	padding: 18px 2px 0;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.tcwp-showcase .tcwp-caption { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

.tcwp-caption__title { margin: 0; font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--tcwp-ink); }
.tcwp-caption__meta { margin: 5px 0 0; font-size: 13px; font-weight: 500; color: var(--tcwp-accent); }
.tcwp-caption__attribution { margin: 6px 0 0; font-size: 12px; color: var(--tcwp-ink-3); }
.tcwp-caption__lead .tcwp-status { margin-top: 9px; }
.tcwp-caption__summary { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tcwp-ink-2); max-width: 52ch; }
.tcwp-caption__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (min-width: 860px) {
	.tcwp-showcase .tcwp-caption__body { align-items: flex-end; text-align: right; }
	.tcwp-showcase .tcwp-caption__summary { text-align: left; }
}

.tcwp-pair { display: grid; gap: clamp(20px, 2.2vw, 32px); grid-template-columns: 1fr; }

@media (min-width: 860px) {
	.tcwp-pair--even { grid-template-columns: 1fr 1fr; }
	.tcwp-pair--wide { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
	.tcwp-pair:has(.tcwp-pair__item[hidden]) { grid-template-columns: 1fr; }
	.tcwp-pair.is-solo:not(.tcwp-pair--half) { grid-template-columns: 1fr; }
	/* An odd project count leaves the last row with a single server-rendered item; it takes the
	   full width the same way a filtered-down row does. */
	.tcwp-pair:not(.tcwp-pair--half):has(> .tcwp-pair__item:only-child) { grid-template-columns: 1fr; }
	/* A row authored with a single project (odd project count) keeps the two-column scale rather
	   than blowing one card up to full width; the filter-collapse rules above still win when items
	   are hidden, because an authored solo row carries this class from the template. */
	.tcwp-pair--half { grid-template-columns: 1fr 1fr; }
	.tcwp-pair--half .tcwp-pair__item { grid-column: 1; }
}

.tcwp-pair__item { min-width: 0; }

/* The filters hide elements via the hidden attribute. Any author display rule (a flex card, a
   grid row) would silently beat the UA stylesheet's [hidden] handling, so it is enforced here. */
.tcwp [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   No results — what eight years covers, when the filter finds nothing
   -------------------------------------------------------------------------- */

.tcwp-noresults {
	display: grid;
	gap: clamp(16px, 1.8vw, 22px);
	margin-top: clamp(20px, 2.4vw, 34px);
	padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.6vw, 38px);
	background: var(--tcwp-surface);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
	box-shadow: 0 12px 30px rgba(12, 60, 110, 0.05);
}

.tcwp-noresults__title { margin: 8px 0 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--tcwp-ink); max-width: 27ch; text-wrap: balance; }
.tcwp-noresults__text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--tcwp-ink-2); max-width: 74ch; }

/* The industry list is the substance of this panel: it is the answer to "have you done anything
   like mine", so it reads as a body of work rather than as a set of filter chips to click. */
.tcwp-noresults__industries { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcwp-noresults__industries li {
	padding: 6px 13px;
	background: var(--tcwp-surface-2);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-pill);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tcwp-ink);
}

.tcwp-noresults__nda { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--tcwp-line); }
.tcwp-noresults__nda .tcwp-noresults__text { margin: 0; }
.tcwp-noresults__lock { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tcwp-surface-2); border: 1px solid var(--tcwp-line); color: var(--tcwp-ink-2); flex: none; }

.tcwp-noresults__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }

.tcwp-btn--quiet { background: var(--tcwp-surface); border: 1px solid var(--tcwp-line-2); color: var(--tcwp-ink-2); }
.tcwp-btn--quiet:hover { border-color: var(--tcwp-accent); color: var(--tcwp-accent); }

/* --------------------------------------------------------------------------
   Filter note — the NDA reminder at the end of a filtered list
   -------------------------------------------------------------------------- */

.tcwp-filternote {
	display: grid;
	gap: 16px 20px;
	grid-template-columns: auto 1fr;
	align-items: start;
	padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
	background: var(--tcwp-surface-2);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
}

@media (min-width: 900px) {
	.tcwp-filternote { grid-template-columns: auto 1fr auto; align-items: center; }
}

.tcwp-filternote__lock { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--tcwp-line); color: var(--tcwp-ink-2); flex: none; }
.tcwp-filternote__title { margin: 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.02em; color: var(--tcwp-ink); }
.tcwp-filternote__text { margin: 7px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.6; color: var(--tcwp-ink-2); }

.tcwp-filternote__actions { grid-column: 1 / -1; }

@media (min-width: 900px) {
	.tcwp-filternote__actions { grid-column: auto; padding-left: 10px; }
}

/* --------------------------------------------------------------------------
   Origin story — the in-house product chapter below the client showcase
   -------------------------------------------------------------------------- */

.tcwp-origin__grid { display: grid; gap: clamp(26px, 3.2vw, 48px); grid-template-columns: 1fr; align-items: center; }

@media (min-width: 1000px) {
	.tcwp-origin__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.tcwp-origin__eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tcwp-ink-3); }
.tcwp-origin__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
.tcwp-origin__name { margin: 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--tcwp-ink); }
.tcwp-origin__body p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--tcwp-ink-2); max-width: 58ch; }
.tcwp-origin__facts { margin: 20px 0 0; }
.tcwp-origin__fact { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 4px 18px; padding: 9px 0; border-top: 1px solid var(--tcwp-line); }
.tcwp-origin__fact:last-child { border-bottom: 1px solid var(--tcwp-line); }
.tcwp-origin__fact dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tcwp-ink-3); align-self: center; }
.tcwp-origin__fact dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--tcwp-ink); }
.tcwp-origin__copy .tcwp-link { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Partnership — the MDware ecosystem band
   Brand blue #0878c8 is used as a literal accent throughout this block.
   -------------------------------------------------------------------------- */

.tcwp-partner { position: relative; overflow: hidden; }

/* Soft blue glows behind the composition. */
.tcwp-partner::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(46% 60% at 78% 28%, rgba(8, 120, 200, 0.10), transparent 70%),
		radial-gradient(38% 52% at 10% 84%, rgba(8, 120, 200, 0.07), transparent 70%);
}

.tcwp-partner > .tcwp-shell { position: relative; }

.tcwp-partner__hero { display: grid; gap: clamp(28px, 3.2vw, 54px); grid-template-columns: 1fr; align-items: center; }

@media (min-width: 1100px) {
	.tcwp-partner__hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.tcwp-partner__logo { display: block; width: auto; height: auto; max-height: 42px; max-width: 180px; margin-bottom: clamp(18px, 2.4vw, 34px); object-fit: contain; object-position: left center; }
.tcwp-partner__eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #0878c8; }
.tcwp-partner__headline { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 19ch; }
.tcwp-partner__para { margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: var(--tcwp-ink-2); max-width: 46ch; }

.tcwp-partner__stats { display: flex; flex-wrap: wrap; margin: clamp(22px, 2.4vw, 34px) 0 0; padding: 0; list-style: none; }
.tcwp-partner__stat { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 0; }
.tcwp-partner__stat + .tcwp-partner__stat { border-left: 1px solid rgba(8, 120, 200, 0.18); padding-left: 12px; }
.tcwp-partner__stat-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: #fff; border: 1px solid rgba(8, 120, 200, 0.14); color: #0878c8; box-shadow: 0 4px 12px rgba(12, 60, 110, 0.08); flex: none; }
.tcwp-partner__stat-text { display: flex; flex-direction: column; gap: 1px; }
.tcwp-partner__stat-text strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--tcwp-ink); }
.tcwp-partner__stat-text small { font-size: 10.5px; color: var(--tcwp-ink-3); }

/* The ecosystem diagram: Lightspeed pill above, hub circle centre, dev pill below. ----------- */

.tcwp-partner__diagram { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.tcwp-partner__eco { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 10px 20px; background: #fff; border-radius: 999px; box-shadow: var(--tcwp-shadow); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcwp-ink); }
.tcwp-partner__eco-key { display: flex; color: #b8860b; }

.tcwp-partner__stage { position: relative; display: grid; gap: 18px; width: 100%; margin-top: 30px; grid-template-columns: 1fr; justify-items: center; }

/* Drop line from the ecosystem pill into the stage. */
.tcwp-partner__eco + .tcwp-partner__stage::before { content: ''; position: absolute; top: -30px; left: 50%; height: 30px; border-left: 1.5px solid rgba(8, 120, 200, 0.40); }

/* The platform slab the products stand on. */
.tcwp-partner__stage::after {
	content: '';
	position: absolute;
	left: 1%;
	right: 1%;
	bottom: -14px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(206, 228, 248, 0.55));
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 22px 34px rgba(12, 60, 110, 0.16), 0 0 24px rgba(8, 120, 200, 0.10);
}

@media (min-width: 860px) {
	.tcwp-partner__stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
}

@media (max-width: 859px) {
	.tcwp-partner__hub-col { order: 1; }
	.tcwp-pv--kiosk { order: 2; }
	.tcwp-pv--toolkit { order: 3; }
}

.tcwp-partner__hub-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

/* Node dots and connector lines tying the hub to the pill above and the cards beside it. */
.tcwp-partner__node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #0878c8; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(8, 120, 200, 0.18); z-index: 2; }
.tcwp-partner__node--top { top: -5px; left: 50%; transform: translateX(-50%); }

.tcwp-partner__link { display: none; position: absolute; top: calc(clamp(210px, 19vw, 252px) / 2); height: 0; border-top: 2px solid rgba(8, 120, 200, 0.5); width: clamp(28px, 3.5vw, 64px); }
.tcwp-partner__link::after { content: ''; position: absolute; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #0878c8; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(8, 120, 200, 0.18); }
.tcwp-partner__link--left { right: 100%; }
.tcwp-partner__link--left::after { left: 100%; }
.tcwp-partner__link--right { left: 100%; }
.tcwp-partner__link--right::after { right: 100%; }

@media (min-width: 860px) {
	.tcwp-partner__link { display: block; }
}

.tcwp-partner__hub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: clamp(210px, 19vw, 252px); aspect-ratio: 1; padding: 28px; background: #fff; border-radius: 50%; border: 1px solid rgba(8, 120, 200, 0.30); box-shadow: 0 0 0 8px rgba(8, 120, 200, 0.06), 0 0 40px rgba(8, 120, 200, 0.18), 0 18px 44px rgba(12, 60, 110, 0.16); text-align: center; }
.tcwp-partner__hub img { max-width: 132px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.tcwp-partner__hub p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--tcwp-ink-2); }

.tcwp-partner__dev { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 11px; margin: 24px 0 0; padding: 10px 22px; background: #fff; border-radius: 999px; box-shadow: var(--tcwp-shadow); }
.tcwp-partner__dev-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #0878c8; color: #fff; flex: none; }
.tcwp-partner__dev-text { display: flex; flex-direction: column; gap: 1px; }
.tcwp-partner__dev-text strong { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tcwp-ink); }
.tcwp-partner__dev-text em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0878c8; }
.tcwp-partner__dev-note { margin: 10px 0 0; max-width: 48ch; text-align: center; font-size: 11px; line-height: 1.55; color: var(--tcwp-ink-3); }

/* Product vignettes: small decorative interfaces with illustrative figures. ------------------ */

.tcwp-pv { position: relative; z-index: 1; width: 100%; max-width: 252px; overflow: hidden; background: #fff; border: 1px solid rgba(8, 120, 200, 0.10); border-radius: 13px; box-shadow: 0 12px 30px rgba(12, 60, 110, 0.12); font-size: 9px; color: var(--tcwp-ink-2); }

/* A vignette carrying a real screenshot, framed by the card's own chrome bars. */
.tcwp-pv__shot { display: block; width: 100%; height: auto; }
.tcwp-pv--kiosk .tcwp-pv__shot { height: auto; aspect-ratio: 4 / 5; padding: 8px 8px 0; background: #fff; object-fit: contain; object-position: 50% 0; }
.tcwp-pv--toolkit .tcwp-pv__shot { height: auto; aspect-ratio: 8 / 7; object-fit: cover; object-position: 0 0; }

.tcwp-pv__bar--dark { background: #10233d; border-bottom: 0; color: #fff; }
.tcwp-pv__bar--dark .tcwp-pv__app { color: #fff; }
.tcwp-pv__key { display: inline-flex; margin-right: 5px; color: #b8860b; vertical-align: -1px; }
.tcwp-pv__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--tcwp-line); color: var(--tcwp-ink); }
.tcwp-pv__app { font-size: 9.5px; font-weight: 700; letter-spacing: -0.01em; }
.tcwp-pv__dot { width: 6px; height: 6px; border-radius: 50%; background: #0878c8; opacity: 0.4; flex: none; }
.tcwp-pv__split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 8px 10px; }

.tcwp-pv__tiles { display: grid; gap: 6px; align-content: start; }
.tcwp-pv__tiles span { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 7px; background: #eef4fa; font-size: 13px; line-height: 1; }
.tcwp-pv__order { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--tcwp-line); border-radius: 8px; }
.tcwp-pv__order strong { font-size: 9.5px; color: var(--tcwp-ink); }
.tcwp-pv__order em { font-style: normal; font-size: 8px; line-height: 1.4; }
.tcwp-pv__btn { align-self: flex-start; margin-top: 2px; padding: 3px 9px; border-radius: 6px; background: #0878c8; color: #fff; font-size: 8px; font-weight: 600; }
.tcwp-pv__tabs { display: flex; gap: 4px; padding: 0 10px 8px; }
.tcwp-pv__tabs span { flex: 1; padding: 4px 0; border: 1px solid var(--tcwp-line); border-radius: 6px; text-align: center; font-size: 7.5px; color: var(--tcwp-ink-3); }
.tcwp-pv__cta { padding: 7px 0; background: #0878c8; color: #fff; text-align: center; font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; }

.tcwp-pv--sync { max-width: 296px; margin-top: 14px; z-index: 2; }

@media (min-width: 860px) {
	/* Tucks up and left beneath the hub, the way the brief stages it. */
	.tcwp-pv--sync { margin-top: -34px; transform: translateX(-9%); }
}

.tcwp-pv__live { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: #15803d; }
.tcwp-pv__live i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.tcwp-pv__cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px 4px; }
.tcwp-pv__cells span { display: flex; flex-direction: column; gap: 1px; padding: 6px; border: 1px solid var(--tcwp-line); border-radius: 7px; }
.tcwp-pv__cells strong { font-size: 9.5px; letter-spacing: -0.01em; color: var(--tcwp-ink); }
.tcwp-pv__cells strong.is-good { color: #15803d; }
.tcwp-pv__cells small { font-size: 7px; color: var(--tcwp-ink-3); }
.tcwp-pv__rows { display: grid; gap: 4px; padding: 6px 10px 10px; }
.tcwp-pv__rows span { position: relative; padding: 4px 56px 4px 8px; background: #f3f7fb; border-radius: 6px; font-size: 8px; }
.tcwp-pv__rows span::after { content: 'Completed'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 7px; font-weight: 600; color: #15803d; }

.tcwp-pv--toolkit .tcwp-pv__split { grid-template-columns: auto 1fr; }
.tcwp-pv__nav { display: flex; flex-direction: column; gap: 3px; padding-right: 7px; border-right: 1px solid var(--tcwp-line); }
.tcwp-pv__nav span { padding: 4px 7px; border-radius: 6px; font-size: 8px; color: var(--tcwp-ink-3); }
.tcwp-pv__nav span.is-on { background: #e8f2fa; color: #0878c8; font-weight: 600; }
.tcwp-pv__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tcwp-pv__main strong { font-size: 9px; color: var(--tcwp-ink); }
.tcwp-pv__ok { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: #e8f7ee; color: #15803d; font-size: 7.5px; font-weight: 600; }
.tcwp-pv__chart { width: 100%; height: 34px; color: #0878c8; }
.tcwp-pv__list { display: grid; gap: 4px; }
.tcwp-pv__list i { position: relative; display: block; height: 10px; border-radius: 5px; background: #f3f7fb; }
.tcwp-pv__list i::after { content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #16a34a; }

/* The delivered work, grouped. ---------------------------------------------------------------- */

.tcwp-partner__groups { display: grid; gap: 14px; margin-top: clamp(28px, 3.2vw, 48px); grid-template-columns: 1fr; }

@media (min-width: 900px) {
	.tcwp-partner__groups { grid-template-columns: repeat(3, 1fr); }
}

.tcwp-partner__group { position: relative; padding: 15px 17px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(8, 120, 200, 0.10); border-radius: var(--tcwp-r-card); }

/* Dashed stems rising from each group toward the diagram, dotted at the top. */
@media (min-width: 900px) {
	.tcwp-partner__group::before { content: ''; position: absolute; bottom: 100%; left: 50%; height: clamp(18px, 2.4vw, 34px); border-left: 1.5px dashed rgba(8, 120, 200, 0.40); }
	.tcwp-partner__group::after { content: ''; position: absolute; bottom: calc(100% + clamp(18px, 2.4vw, 34px) - 3px); left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: #0878c8; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(8, 120, 200, 0.18); }
}
.tcwp-partner__group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0878c8; }
.tcwp-partner__group-icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 9px; background: #e8f2fa; color: #0878c8; flex: none; }
.tcwp-partner__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcwp-partner__chip { display: inline-flex; align-items: center; padding: 8px 16px; background: #fff; border: 1px solid var(--tcwp-line); border-radius: 999px; box-shadow: 0 2px 6px rgba(12, 60, 110, 0.05); font-size: 12.5px; font-weight: 600; color: var(--tcwp-ink); text-decoration: none; }
.tcwp-partner__chip.is-link { transition: border-color var(--tcwp-dur) var(--tcwp-ease), box-shadow var(--tcwp-dur) var(--tcwp-ease), color var(--tcwp-dur) var(--tcwp-ease); }
.tcwp-partner__chip.is-link:hover { border-color: #0878c8; box-shadow: var(--tcwp-shadow); color: #0878c8; }

/* The partnership's arc. ---------------------------------------------------------------------- */

.tcwp-partner__journey { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: clamp(24px, 2.8vw, 40px) 0 0; padding: 15px clamp(16px, 2.2vw, 30px); background: #fff; border-radius: var(--tcwp-r-card); box-shadow: var(--tcwp-shadow); list-style: none; }
.tcwp-partner__step { display: flex; align-items: center; gap: 11px; }
.tcwp-partner__step-icon { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 50%; background: #e8f2fa; color: #0878c8; flex: none; }
.tcwp-partner__step-label { font-size: 13px; font-weight: 600; color: var(--tcwp-ink); }
.tcwp-partner__step-arrow { margin-left: 8px; color: rgba(8, 120, 200, 0.55); flex: none; }

@media (max-width: 720px) {
	.tcwp-partner__journey { justify-content: flex-start; }
	.tcwp-partner__step-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Global reach
   -------------------------------------------------------------------------- */

.tcwp-global { padding-top: clamp(18px, 2.2vw, 30px); padding-bottom: clamp(30px, 3.4vw, 52px); }

.tcwp-global__panel {
	position: relative;
	border-radius: var(--tcwp-r-art);
	background: linear-gradient(140deg, #0d1c34 0%, #12294a 52%, #0e2039 100%);
	color: var(--tcwp-invert);
	padding: clamp(22px, 2.4vw, 34px);
	overflow: hidden;
}

/* minmax(0, ...) so the stacked market views can never push the column past the viewport. */
.tcwp-global__grid { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) {
	.tcwp-markets__scroll { margin-top: 0; }

	.tcwp-global__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"intro panel"
			"map   panel"
			"chips panel";
		align-items: start;
		row-gap: 22px;
	}

	.tcwp-global__intro { grid-area: intro; }
	.tcwp-global__map-col { grid-area: map; }
	.tcwp-markets__scroll { grid-area: chips; }
	.tcwp-global__panel-col { grid-area: panel; align-self: start; }

	.tcwp-chip-market { min-height: 48px; }
}

.tcwp-global__lede { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: rgba(246, 248, 252, 0.72); max-width: 44ch; }

/* The map renders at every width; on small screens it is an illustration first, with the
   chip row remaining the primary selector, but the markers stay tappable. */
.tcwp-map { position: relative; margin-top: 16px; color: rgba(150, 180, 220, 0.55); }
@media (min-width: 1000px) { .tcwp-map { margin-top: 0; } }
.tcwp-map__svg { display: block; width: 100%; height: auto; }

.tcwp-map__markers { position: absolute; inset: 0; pointer-events: none; }

.tcwp-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	appearance: none;
	background: none;
	border: 0;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	font-family: inherit;
	line-height: 0;
}

.tcwp-marker__pin {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tcwp-pin, #3b82f6);
	box-shadow: 0 0 0 3px var(--tcwp-pin-halo, rgba(59, 130, 246, 0.22));
	transition: box-shadow var(--tcwp-dur) var(--tcwp-ease), transform var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-marker--case-study { --tcwp-pin: #3b82f6; --tcwp-pin-halo: rgba(59, 130, 246, 0.24); }
.tcwp-marker--delivered { --tcwp-pin: #7dd3fc; --tcwp-pin-halo: rgba(125, 211, 252, 0.2); }
.tcwp-marker--confidential { --tcwp-pin: transparent; --tcwp-pin-halo: rgba(34, 211, 238, 0.16); }
.tcwp-marker--confidential .tcwp-marker__pin { border: 2px solid #22d3ee; }

/* A slow outward ring on every marker, staggered per pin so the map breathes rather than throbs
   in unison. Suppressed under prefers-reduced-motion by the global rule. */
.tcwp-marker__pulse {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid var(--tcwp-pin, #3b82f6);
	opacity: 0;
	pointer-events: none;
	animation: tcwp-pulse 3.4s var(--tcwp-ease) infinite;
}

.tcwp-marker--confidential .tcwp-marker__pulse { border-color: #22d3ee; }

@keyframes tcwp-pulse {
	0% { transform: scale(1); opacity: 0.55; }
	70% { transform: scale(3.2); opacity: 0; }
	100% { transform: scale(3.2); opacity: 0; }
}

.tcwp-marker:hover, .tcwp-marker:focus-visible, .tcwp-marker.is-on { z-index: 3; }
.tcwp-marker:hover .tcwp-marker__pin,
.tcwp-marker:focus-visible .tcwp-marker__pin,
.tcwp-marker.is-on .tcwp-marker__pin { transform: scale(1.3); box-shadow: 0 0 0 6px var(--tcwp-pin-halo, rgba(59, 130, 246, 0.3)); }
.tcwp-marker.is-on .tcwp-marker__pulse { animation-duration: 2.2s; }

/* Labels are revealed rather than always drawn: with many markets, permanent labels collide.
   Every name here is also in the chip row, the panel and the screen-reader list, so nothing is
   hover-only. */
.tcwp-marker__tip {
	position: absolute;
	bottom: calc(100% - 2px);
	left: 50%;
	transform: translate(-50%, 4px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(8, 17, 32, 0.94);
	border: 1px solid rgba(148, 180, 220, 0.25);
	color: #fff;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--tcwp-dur) var(--tcwp-ease), transform var(--tcwp-dur) var(--tcwp-ease), visibility var(--tcwp-dur);
}

.tcwp-marker__tip strong { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.tcwp-marker__tip em { font-style: normal; font-size: 11px; color: rgba(246, 248, 252, 0.62); }

.tcwp-marker:hover .tcwp-marker__tip,
.tcwp-marker:focus-visible .tcwp-marker__tip { opacity: 1; visibility: visible; transform: translate(-50%, -2px); }

.tcwp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tcwp-legend__item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(246, 248, 252, 0.7); }
.tcwp-legend__key { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tcwp-legend__key--case-study { background: #3b82f6; }
.tcwp-legend__key--delivered { background: #7dd3fc; }
.tcwp-legend__key--confidential { border: 2px solid #22d3ee; }

/* The container reserves the height of the tallest market so the band never resizes, but the white
   card belongs to each view — a sparse country shows a short card over the band background rather
   than a tall white void. */
.tcwp-market { display: grid; align-items: start; }

.tcwp-market__view {
	background: #fff;
	color: var(--tcwp-ink);
	border-radius: var(--tcwp-r-card);
	padding: clamp(16px, 1.5vw, 20px);
	box-shadow: var(--tcwp-shadow);
}

.tcwp-global__panel-col { display: flex; flex-direction: column; }

/* Every market is selectable from here, so the map is an enhancement rather than the only route.
   The row scrolls, which is what lets the section take a long list of places. */
.tcwp-markets__scroll { overflow-x: auto; scrollbar-width: none; contain: paint; margin-top: clamp(16px, 2vw, 22px); }
.tcwp-markets__scroll::-webkit-scrollbar { display: none; }
.tcwp-markets { display: flex; gap: 8px; min-width: min-content; padding-bottom: 2px; }

/* Fades whichever edge still has content beyond it, so a clipped chip reads as "there is more"
   rather than as a broken layout. */
.tcwp-markets__scroll.is-scrollable {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}

.tcwp-markets__scroll.is-scrollable.is-start {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent 100%);
}

.tcwp-markets__scroll.is-scrollable.is-end {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 52px);
	mask-image: linear-gradient(to right, transparent 0, #000 52px);
}

.tcwp-markets__scroll.is-scrollable.is-start.is-end { -webkit-mask-image: none; mask-image: none; }

.tcwp-chip-market { min-height: 48px; }
}

@media (min-width: 3000px) {
	.tcwp-global__grid {
		grid-template-columns: minmax(0, 3.1fr) minmax(0, 6.2fr) minmax(0, 4fr);
		grid-template-areas:
			"intro map   panel"
			"chips chips chips";
		align-items: center;
		column-gap: clamp(26px, 2.6vw, 44px);
	}
}

.tcwp-global__lede { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: rgba(246, 248, 252, 0.72); max-width: 44ch; }

/* The map renders at every width; on small screens it is an illustration first, with the
   chip row remaining the primary selector, but the markers stay tappable. */
.tcwp-map { position: relative; margin-top: 16px; color: rgba(150, 180, 220, 0.55); }
@media (min-width: 1000px) { .tcwp-map { margin-top: 0; } }
.tcwp-map__svg { display: block; width: 100%; height: auto; }

.tcwp-map__markers { position: absolute; inset: 0; pointer-events: none; }

.tcwp-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	appearance: none;
	background: none;
	border: 0;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	font-family: inherit;
	line-height: 0;
}

.tcwp-marker__pin {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tcwp-pin, #3b82f6);
	box-shadow: 0 0 0 3px var(--tcwp-pin-halo, rgba(59, 130, 246, 0.22));
	transition: box-shadow var(--tcwp-dur) var(--tcwp-ease), transform var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-marker--case-study { --tcwp-pin: #3b82f6; --tcwp-pin-halo: rgba(59, 130, 246, 0.24); }
.tcwp-marker--delivered { --tcwp-pin: #7dd3fc; --tcwp-pin-halo: rgba(125, 211, 252, 0.2); }
.tcwp-marker--confidential { --tcwp-pin: transparent; --tcwp-pin-halo: rgba(34, 211, 238, 0.16); }
.tcwp-marker--confidential .tcwp-marker__pin { border: 2px solid #22d3ee; }

/* A slow outward ring on every marker, staggered per pin so the map breathes rather than throbs
   in unison. Suppressed under prefers-reduced-motion by the global rule. */
.tcwp-marker__pulse {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid var(--tcwp-pin, #3b82f6);
	opacity: 0;
	pointer-events: none;
	animation: tcwp-pulse 3.4s var(--tcwp-ease) infinite;
}

.tcwp-marker--confidential .tcwp-marker__pulse { border-color: #22d3ee; }

@keyframes tcwp-pulse {
	0% { transform: scale(1); opacity: 0.55; }
	70% { transform: scale(3.2); opacity: 0; }
	100% { transform: scale(3.2); opacity: 0; }
}

.tcwp-marker:hover, .tcwp-marker:focus-visible, .tcwp-marker.is-on { z-index: 3; }
.tcwp-marker:hover .tcwp-marker__pin,
.tcwp-marker:focus-visible .tcwp-marker__pin,
.tcwp-marker.is-on .tcwp-marker__pin { transform: scale(1.3); box-shadow: 0 0 0 6px var(--tcwp-pin-halo, rgba(59, 130, 246, 0.3)); }
.tcwp-marker.is-on .tcwp-marker__pulse { animation-duration: 2.2s; }

/* Labels are revealed rather than always drawn: with many markets, permanent labels collide.
   Every name here is also in the chip row, the panel and the screen-reader list, so nothing is
   hover-only. */
.tcwp-marker__tip {
	position: absolute;
	bottom: calc(100% - 2px);
	left: 50%;
	transform: translate(-50%, 4px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(8, 17, 32, 0.94);
	border: 1px solid rgba(148, 180, 220, 0.25);
	color: #fff;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--tcwp-dur) var(--tcwp-ease), transform var(--tcwp-dur) var(--tcwp-ease), visibility var(--tcwp-dur);
}

.tcwp-marker__tip strong { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.tcwp-marker__tip em { font-style: normal; font-size: 11px; color: rgba(246, 248, 252, 0.62); }

.tcwp-marker:hover .tcwp-marker__tip,
.tcwp-marker:focus-visible .tcwp-marker__tip { opacity: 1; visibility: visible; transform: translate(-50%, -2px); }

.tcwp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tcwp-legend__item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(246, 248, 252, 0.7); }
.tcwp-legend__key { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tcwp-legend__key--case-study { background: #3b82f6; }
.tcwp-legend__key--delivered { background: #7dd3fc; }
.tcwp-legend__key--confidential { border: 2px solid #22d3ee; }

/* The container reserves the height of the tallest market so the band never resizes, but the white
   card belongs to each view — a sparse country shows a short card over the band background rather
   than a tall white void. */
.tcwp-market { display: grid; align-items: start; }

.tcwp-market__view {
	background: #fff;
	color: var(--tcwp-ink);
	border-radius: var(--tcwp-r-card);
	padding: clamp(16px, 1.5vw, 20px);
	box-shadow: var(--tcwp-shadow);
}
.tcwp-market__country { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -0.02em; color: var(--tcwp-accent); }
.tcwp-market__context { margin: 4px 0 0; font-size: 13px; color: var(--tcwp-ink-2); }
.tcwp-market__project { margin: 18px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.tcwp-market__meta { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--tcwp-ink-3); }

.tcwp-global__panel-col { display: flex; flex-direction: column; }

/* Every market is selectable from here, so the map is an enhancement rather than the only route.
   The row scrolls, which is what lets the section take a long list of places. */
.tcwp-markets__scroll { overflow-x: auto; scrollbar-width: none; contain: paint; margin-top: clamp(16px, 2vw, 22px); }
.tcwp-markets__scroll::-webkit-scrollbar { display: none; }
.tcwp-markets { display: flex; gap: 8px; min-width: min-content; padding-bottom: 2px; }

/* Fades the trailing edge only while there is more to scroll to, so a clipped chip reads as
   "there is more" rather than as a broken layout. */
.tcwp-markets__scroll.is-scrollable {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent 100%);
}

.tcwp-markets__scroll.is-scrollable.is-end { -webkit-mask-image: none; mask-image: none; }

.tcwp-chip-market {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 50px;
	padding: 9px 12px;
	text-align: left;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tcwp-r-sm);
	color: var(--tcwp-invert);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--tcwp-dur) var(--tcwp-ease), border-color var(--tcwp-dur) var(--tcwp-ease);
}

.tcwp-chip-market:hover { background: rgba(255, 255, 255, 0.11); }
.tcwp-chip-market.is-on { background: rgba(59, 130, 246, 0.22); border-color: rgba(96, 165, 250, 0.7); }
.tcwp-chip-market__key { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tcwp-chip-market__flag { font-size: 16px; line-height: 1; flex: none; }
.tcwp-chip-market__key--case-study { background: #3b82f6; }
.tcwp-chip-market__key--delivered { background: #7dd3fc; }
.tcwp-chip-market__key--confidential { border: 2px solid #22d3ee; }
.tcwp-chip-market__text { display: flex; flex-direction: column; gap: 2px; }
.tcwp-chip-market__country { font-size: 13.5px; font-weight: 600; }
.tcwp-chip-market__count { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 21px; padding: 0 7px; margin-left: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 11.5px; font-weight: 700; flex: none; }
.tcwp-chip-market.is-on .tcwp-chip-market__count { background: rgba(255, 255, 255, 0.22); }
.tcwp-chip-market__live { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); animation: tcwp-live 2.2s var(--tcwp-ease) infinite; }
.tcwp-chip-market__context { font-size: 11.5px; color: rgba(246, 248, 252, 0.62); }

/* Activity ------------------------------------------------------------------ */


/* A quiet breathing dot marks work in flight. */
.tcwp-stat__dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: tcwp-live 2.2s var(--tcwp-ease) infinite; }

@keyframes tcwp-live {
	0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
}

.tcwp-DEAD-a { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tcwp-ink-3); margin-bottom: 5px; }
.tcwp-DEAD-b { font-style: normal; color: var(--tcwp-ink-3); }

.tcwp-DEAD-c { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tcwp-ink-3); margin-bottom: 4px; }

.tcwp-global__note { margin: clamp(14px, 1.8vw, 20px) 0 0; font-size: 11.5px; color: rgba(246, 248, 252, 0.5); text-align: center; }

/* --------------------------------------------------------------------------
   Engineering story
   -------------------------------------------------------------------------- */

.tcwp-engineering { padding-bottom: var(--tcwp-section); }

.tcwp-engineering__panel {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	padding: clamp(24px, 3vw, 40px);
	background: var(--tcwp-surface-2);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-art);
	grid-template-columns: 1fr;
}

@media (min-width: 1000px) { .tcwp-engineering__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } }

.tcwp-engineering__lede { margin: 12px 0 14px; font-size: 14px; line-height: 1.6; color: var(--tcwp-ink-2); max-width: 40ch; }

.tcwp-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 640px) { .tcwp-flow { grid-template-columns: repeat(5, 1fr); gap: 8px; } }

.tcwp-flow__node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }

.tcwp-flow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--tcwp-surface);
	border: 1px solid var(--tcwp-line-2);
	color: var(--tcwp-accent);
	box-shadow: var(--tcwp-shadow-sm);
}

.tcwp-flow__label { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--tcwp-ink-2); max-width: 12ch; }

.tcwp-flow__link { position: absolute; top: 26px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 1px; background: var(--tcwp-line-2); }
.tcwp-flow__link::after { content: ""; position: absolute; right: 0; top: -2.5px; width: 5px; height: 5px; border-top: 1px solid var(--tcwp-line-2); border-right: 1px solid var(--tcwp-line-2); transform: rotate(45deg); }
@media (max-width: 639px) { .tcwp-flow__link { display: none; } }

/* --------------------------------------------------------------------------
   Confidential engagements
   -------------------------------------------------------------------------- */

.tcwp-confidential { padding-bottom: var(--tcwp-section); }

.tcwp-confidential__grid { display: grid; gap: var(--tcwp-gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .tcwp-confidential__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tcwp-confidential__grid { grid-template-columns: repeat(4, 1fr); } }

.tcwp-confidential__intro { align-self: center; }
.tcwp-confidential__intro .tcwp-h2 { margin-top: 14px; font-size: clamp(21px, 1.9vw, 26px); }
.tcwp-confidential__lede { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--tcwp-ink-2); }

.tcwp-nda {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--tcwp-surface);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
	box-shadow: var(--tcwp-shadow-sm);
}

.tcwp-nda__head { display: flex; gap: 10px; align-items: flex-start; }
.tcwp-nda__lock { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tcwp-surface-2); color: var(--tcwp-ink-3); flex: none; }
.tcwp-nda__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.tcwp-nda__meta { margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--tcwp-ink-3); }
.tcwp-nda__diagram { color: var(--tcwp-ink-2); background: var(--tcwp-surface-2); border-radius: var(--tcwp-r-sm); padding: 10px; }
.tcwp-nda__diagram svg { display: block; width: 100%; height: auto; }
.tcwp-nda__note { margin: auto 0 0; font-size: 11px; color: var(--tcwp-ink-3); display: flex; align-items: center; gap: 6px; }
.tcwp-nda__note::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--tcwp-line-2); flex: none; }

/* --------------------------------------------------------------------------
   Explore grid
   -------------------------------------------------------------------------- */


/* One row of four focused builds, sharing the explore-grid card anatomy. */
.tcwp-quad { display: grid; gap: clamp(16px, 1.8vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .tcwp-quad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tcwp-quad { grid-template-columns: repeat(4, 1fr); } }

.tcwp-card { display: flex; flex-direction: column; min-width: 0; }
.tcwp-card__body { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tcwp-card__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.018em; }
.tcwp-card__summary {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--tcwp-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tcwp-card__meta { margin: 0; font-size: 12px; color: var(--tcwp-accent); font-weight: 500; }
.tcwp-card__attribution { margin: 0; font-size: 11.5px; color: var(--tcwp-ink-3); }
.tcwp-card__foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Archive shelf
   -------------------------------------------------------------------------- */

/* The engagements the page cannot show — closes the compact strip with the 50+ figure. */
.tcwp-morework { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(24px, 2.6vw, 38px); padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 36px); border-radius: var(--tcwp-r-card); background: linear-gradient(112deg, #f1f4f9 0%, #eef3f8 55%, #eef5f1 100%); border: 1px solid var(--tcwp-line); }
@media (min-width: 900px) { .tcwp-morework { flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 44px); } }
.tcwp-morework__count { margin: 0; font-size: clamp(44px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--tcwp-accent); flex: none; }
.tcwp-morework__count span { font-size: 0.62em; vertical-align: 0.28em; }
.tcwp-morework__body { flex: 1; min-width: 0; }
.tcwp-morework__title { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; letter-spacing: -0.015em; }
.tcwp-morework__text { margin: 7px 0 0; max-width: 66ch; font-size: 13px; line-height: 1.6; color: var(--tcwp-ink-2); }
.tcwp-morework__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tcwp-morework__tags li { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--tcwp-line); font-size: 11px; font-weight: 600; color: var(--tcwp-ink-2); }
.tcwp-morework .tcwp-btn { flex: none; align-self: flex-start; }
@media (min-width: 900px) { .tcwp-morework .tcwp-btn { align-self: center; } }

/* Compact strip — four small cards to a row, for work that earns a mention, not a feature. */
.tcwp-compactrow { padding: clamp(28px, 3.1vw, 46px) 0 var(--tcwp-section); }
.tcwp-compactrow__lede { margin: 10px 0 0; max-width: 56ch; font-size: 13px; line-height: 1.6; color: var(--tcwp-ink-2); }
.tcwp-compactrow__grid { display: grid; gap: var(--tcwp-gap); grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
@media (min-width: 900px) { .tcwp-compactrow__grid { grid-template-columns: repeat(4, 1fr); } }
/* Small canvases carry only the placeholder label — the full description would drown the card. */
/* Outranks the later .tcwp-ph--sm clamp rule, which re-sets display to -webkit-box. */
.tcwp-compactrow .tcwp-ph .tcwp-ph__desc, .tcwp-compactrow .tcwp-ph .tcwp-ph__path { display: none; }

.tcwp-archive { padding-bottom: var(--tcwp-section); }
.tcwp-archive__lede { margin: 12px 0 24px; font-size: 14px; line-height: 1.6; color: var(--tcwp-ink-2); max-width: 68ch; }
.tcwp-archive__scroll { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--tcwp-pad) * -1); padding-inline: var(--tcwp-pad); contain: paint; }
.tcwp-archive__scroll::-webkit-scrollbar { display: none; }

.tcwp-archive__track { display: grid; grid-auto-flow: column; grid-auto-columns: 74vw; gap: var(--tcwp-gap); }
@media (min-width: 640px) { .tcwp-archive__track { grid-auto-columns: 42vw; } }
@media (min-width: 1000px) { .tcwp-archive__track { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; } }

.tcwp-shelf { display: flex; flex-direction: column; min-width: 0; }
.tcwp-shelf__body { padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tcwp-shelf__title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }
.tcwp-shelf__summary { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tcwp-ink-2); }
.tcwp-shelf__meta { margin: 0; font-size: 11.5px; color: var(--tcwp-ink-3); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.tcwp-cta { padding-bottom: var(--tcwp-section); }

.tcwp-cta__inner {
	position: relative;
	border-radius: var(--tcwp-r-art);
	background: linear-gradient(135deg, #0d1c34 0%, #17356b 55%, #0e2039 100%);
	color: #fff;
	padding: clamp(30px, 3.8vw, 56px) clamp(24px, 3vw, 48px);
	text-align: center;
	overflow: hidden;
}

.tcwp-cta__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
	background-size: 26px 26px;
	opacity: 0.5;
	pointer-events: none;
}

.tcwp-cta__inner > * { position: relative; z-index: 1; }
.tcwp-cta__lede { margin: 14px auto 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.76); max-width: 52ch; }
.tcwp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tcwp *, .tcwp *::before, .tcwp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Artwork canvases
   Each canvas is a query container. Every device inside it is a query container
   too, so interface type scales with the device rather than with the viewport —
   that is what lets a handset stay readable on a 390px screen.
   ========================================================================== */

.tcwp-canvas {
	position: relative;
	container-type: inline-size;
	container-name: canvas;
	border-radius: var(--tcwp-r-art);
	overflow: hidden;
	isolation: isolate;
}

.tcwp-canvas--full { aspect-ratio: 1180 / 520; }
.tcwp-canvas--pair-a, .tcwp-canvas--pair-b { aspect-ratio: 1 / 0.66; }

@media (min-width: 860px) {
	.tcwp-pair .tcwp-canvas--pair-a,
	.tcwp-pair .tcwp-canvas--pair-b { aspect-ratio: auto; height: clamp(365px, 26.5vw, 400px); }

	/* A lone survivor of a filtered pair row spans the full width, and swaps to the project's wide
	   composition (see dressArtwork). The fixed pair height would crop it, so it takes the image's
	   own aspect for as long as it is that shape. */
	.tcwp-pair.is-solo .tcwp-canvas.is-wide { aspect-ratio: var(--tcwp-wide-ratio); height: auto; }
	/* The 365px floor keeps the canvas at or under 16:10 while two cards share a row, so a
	   16:10 featured image is never cropped vertically — only its side edges ever trim. */
}
.tcwp-canvas--card { aspect-ratio: 16 / 10; }
.tcwp-canvas--shelf { aspect-ratio: 4 / 3.1; }

.tcwp-scene { position: absolute; inset: 0; }

/* Accent themes — client colour lives inside the artwork only. */
.tcwp-canvas--cream  { background: linear-gradient(114deg, #f8f1e3 0%, #f4efe4 44%, #d9e9e3 100%); --tcwp-art-accent: #2f6f6b; }
.tcwp-canvas--navy   { background: linear-gradient(150deg, #0b1422 0%, #141f33 55%, #0c1725 100%); --tcwp-art-accent: #3b82f6; }
.tcwp-canvas--coral  { background: linear-gradient(140deg, #f9c8ae 0%, #f5d8c1 54%, #dfe7d6 100%); --tcwp-art-accent: #ef6a4d; }
.tcwp-canvas--cobalt { background: linear-gradient(134deg, #1b52f2 0%, #1d4ed8 54%, #1a3aa8 100%); --tcwp-art-accent: #2563eb; }
.tcwp-canvas--forest { background: linear-gradient(140deg, #0d3a2c 0%, #14503c 55%, #0b3226 100%); --tcwp-art-accent: #10b981; }
.tcwp-canvas--ice    { background: linear-gradient(140deg, #e9f2fb 0%, #d8e8f7 55%, #c7dff4 100%); --tcwp-art-accent: #2563eb; }
.tcwp-canvas--slate  { background: linear-gradient(140deg, #eef2f7 0%, #dfe7f0 100%); --tcwp-art-accent: #0e7490; }
.tcwp-canvas--violet { background: linear-gradient(140deg, #f0ecfb 0%, #e2dcf7 100%); --tcwp-art-accent: #7c3aed; }
.tcwp-canvas--teal   { background: linear-gradient(140deg, #e6f5f2 0%, #d3ebe6 100%); --tcwp-art-accent: #0d9488; }
.tcwp-canvas--sand   { background: linear-gradient(140deg, #f5ede2 0%, #e9dcc9 100%); --tcwp-art-accent: #b08968; }
.tcwp-canvas--sky    { background: linear-gradient(140deg, #e8f3fb 0%, #d5e9f7 100%); --tcwp-art-accent: #0284c7; }
.tcwp-canvas--mist   { background: linear-gradient(140deg, #eef1f6 0%, #dde3ec 100%); --tcwp-art-accent: #2563eb; }
.tcwp-canvas--arctic { background: linear-gradient(140deg, #dff0fb 0%, #c8e6f8 100%); --tcwp-art-accent: #0ea5e9; }

/* ==========================================================================
   Interface atoms — sizing in cqw of the device that contains them
   ========================================================================== */

.tcwp-win {
	container-type: inline-size;
	display: flex;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #0f172a;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 24px 60px -28px rgba(15, 23, 42, 0.45);
}

.tcwp-win--dark { background: #0f1729; color: #e2e8f0; }
.tcwp-win--nosidebar { display: block; }

.tcwp-win__side {
	width: 20cqw;
	flex: none;
	padding: 1.8cqw 1.2cqw;
	background: #f8fafc;
	border-right: 1px solid rgba(15, 23, 42, 0.08);
	display: flex;
	flex-direction: column;
	gap: 1.6cqw;
}

.tcwp-win--dark .tcwp-win__side { background: #0b1220; border-right-color: rgba(226, 232, 240, 0.09); }
.tcwp-win__side--slim { width: 17cqw; }

.tcwp-brand { display: flex; align-items: center; gap: 0.9cqw; font-size: 1.85cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.tcwp-brand__mark { width: 2.7cqw; height: 2.7cqw; border-radius: 0.7cqw; background: var(--tcwp-art-accent, #2563eb); flex: none; }
.tcwp-brand__mark--ai { background: #2563eb; }
.tcwp-brand__mark--npr { background: #f97316; }
.tcwp-brand__mark--cf { background: #10b981; }
.tcwp-brand__mark--rd { background: #2563eb; }
.tcwp-brand__mark--nems { background: #0e7490; }
.tcwp-brand__mark--bright { background: #7c3aed; }
.tcwp-brand__mark--loyal { background: #0d9488; }
.tcwp-brand__name em { display: block; font-style: normal; font-size: 0.7em; font-weight: 500; opacity: 0.6; }

.tcwp-navi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25cqw; }
.tcwp-navi__i { display: flex; align-items: center; gap: 0.9cqw; font-size: 1.45cqw; font-weight: 500; color: #64748b; padding: 0.72cqw 0.9cqw; border-radius: 0.6cqw; }
.tcwp-win--dark .tcwp-navi__i { color: #94a3b8; }
.tcwp-navi__ico { width: 1.5cqw; height: 1.5cqw; border-radius: 0.35cqw; background: currentColor; opacity: 0.42; flex: none; }
.tcwp-navi__i.is-on { background: color-mix(in srgb, var(--tcwp-art-accent, #2563eb) 13%, transparent); color: var(--tcwp-art-accent, #2563eb); font-weight: 600; }
.tcwp-win--dark .tcwp-navi__i.is-on { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }

.tcwp-user { display: flex; align-items: center; gap: 0.9cqw; margin-top: auto; font-size: 1.4cqw; font-weight: 600; }
.tcwp-user__av { width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: #cbd5e1; color: #334155; display: flex; align-items: center; justify-content: center; font-size: 1.1cqw; flex: none; }
.tcwp-user__t em { display: block; font-style: normal; font-size: 0.78em; font-weight: 400; opacity: 0.62; }
.tcwp-user--bar { margin-top: 0; }

.tcwp-win__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tcwp-topbar { display: flex; align-items: center; gap: 1.1cqw; padding: 1.2cqw 1.7cqw; border-bottom: 1px solid rgba(15, 23, 42, 0.07); }
.tcwp-win--dark .tcwp-topbar { border-bottom-color: rgba(226, 232, 240, 0.09); }
.tcwp-topbar__sp { flex: 1; }
.tcwp-search { flex: 0 1 34cqw; font-size: 1.35cqw; color: #94a3b8; background: #f1f5f9; border-radius: 0.6cqw; padding: 0.75cqw 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcwp-win--dark .tcwp-search { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.tcwp-pill { font-size: 1.3cqw; font-weight: 600; color: #fff; background: var(--tcwp-art-accent, #2563eb); border-radius: 0.55cqw; padding: 0.75cqw 1.2cqw; white-space: nowrap; }
.tcwp-bell { width: 2cqw; height: 2cqw; border-radius: 50%; background: #e2e8f0; flex: none; }
.tcwp-tabs { display: flex; gap: 1.8cqw; font-size: 1.4cqw; color: #94a3b8; }
.tcwp-tabs em { font-style: normal; }
.tcwp-tabs em.is-on { color: var(--tcwp-art-accent, #2563eb); font-weight: 600; }

.tcwp-win__main { flex: 1; min-height: 0; padding: 1.7cqw; display: flex; flex-direction: column; gap: 1.4cqw; overflow: hidden; }
.tcwp-h3 { margin: 0; font-size: 1.85cqw; font-weight: 700; letter-spacing: -0.015em; }

.tcwp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1cqw; }
.tcwp-tiles--two { grid-template-columns: repeat(2, 1fr); }
.tcwp-tiles--three { grid-template-columns: repeat(3, 1fr); }
.tcwp-tiles--four { grid-template-columns: repeat(4, 1fr); }
.tcwp-win--dark .tcwp-tiles { grid-template-columns: repeat(5, 1fr); }

.tcwp-tile { display: flex; flex-direction: column; gap: 0.35cqw; padding: 1.1cqw 1.2cqw; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.8cqw; background: #fff; min-width: 0; }
.tcwp-win--dark .tcwp-tile { background: rgba(148, 163, 184, 0.07); border-color: rgba(226, 232, 240, 0.1); }
.tcwp-tile--alert { border-color: rgba(220, 38, 38, 0.4); }
.tcwp-tile__k { font-size: 1.2cqw; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcwp-tile__v { font-size: 2.9cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.tcwp-tile--alert .tcwp-tile__v { color: #f87171; }
.tcwp-tile__d { font-size: 1.05cqw; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcwp-tile__d--up { color: #16a34a; }
.tcwp-tile__d--down { color: #dc2626; }

.tcwp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1cqw; flex: 1; min-height: 17cqw; }
.tcwp-split--60 { grid-template-columns: 1.3fr 1fr; }

.tcwp-panel { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.9cqw; padding: 1.1cqw 1.2cqw; background: #fff; min-width: 0; display: flex; flex-direction: column; gap: 0.9cqw; overflow: hidden; }
.tcwp-win--dark .tcwp-panel { background: rgba(148, 163, 184, 0.06); border-color: rgba(226, 232, 240, 0.1); }
.tcwp-panel__h { margin: 0; font-size: 1.45cqw; font-weight: 600; }
.tcwp-panel--wide { flex: none; }

.tcwp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tcwp-row { display: flex; align-items: center; gap: 0.9cqw; padding: 0.85cqw 0; border-top: 1px solid rgba(15, 23, 42, 0.06); min-width: 0; }
.tcwp-win--dark .tcwp-row { border-top-color: rgba(226, 232, 240, 0.08); }
.tcwp-row:first-child { border-top: 0; }
.tcwp-rows--tight .tcwp-row { padding: 0.62cqw 0; }
.tcwp-row__av { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #e2e8f0; flex: none; }
.tcwp-win--dark .tcwp-row__av { background: rgba(148, 163, 184, 0.25); }
.tcwp-row__t { flex: 1; min-width: 0; font-size: 1.35cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcwp-row__t em { display: block; font-style: normal; font-size: 0.86em; font-weight: 400; color: #94a3b8; }
.tcwp-row__s { font-size: 1.15cqw; color: #94a3b8; white-space: nowrap; }

.tcwp-tag { font-size: 1.05cqw; font-weight: 600; padding: 0.35cqw 0.8cqw; border-radius: 999px; white-space: nowrap; flex: none; background: #f1f5f9; color: #475569; }
.tcwp-tag--ok { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.tcwp-tag--warn { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.tcwp-tag--bad { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.tcwp-tag--info { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tcwp-tag--mute { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.tcwp-win--dark .tcwp-tag--mute { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.tcwp-win--dark .tcwp-tag--info { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.tcwp-win--dark .tcwp-tag--ok { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.tcwp-win--dark .tcwp-tag--warn { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }

.tcwp-tbl { width: 100%; border-collapse: collapse; font-size: 1.2cqw; table-layout: fixed; }
.tcwp-tbl th { text-align: left; font-size: 1.1cqw; font-weight: 500; color: #94a3b8; padding: 0.6cqw 0.5cqw; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.tcwp-tbl td { padding: 0.7cqw 0.5cqw; border-bottom: 1px solid rgba(15, 23, 42, 0.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcwp-win--dark .tcwp-tbl th { border-bottom-color: rgba(226, 232, 240, 0.1); }
.tcwp-win--dark .tcwp-tbl td { border-bottom-color: rgba(226, 232, 240, 0.07); }
.tcwp-tbl tr:last-child td { border-bottom: 0; }

.tcwp-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5cqw; color: #64748b; }
.tcwp-chart svg { flex: 1; min-height: 0; width: 100%; }
.tcwp-axis { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; font-size: 0.95cqw; color: #94a3b8; }

.tcwp-carmap, .tcwp-routemap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.7cqw; color: #64748b; }
.tcwp-carmap svg, .tcwp-routemap svg { flex: 1; min-height: 0; width: 100%; }
.tcwp-win--dark .tcwp-routemap { color: #94a3b8; }
.tcwp-legendmini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.9cqw; font-size: 1cqw; color: #64748b; }
.tcwp-legendmini li { display: flex; align-items: center; gap: 0.45cqw; }
.tcwp-legendmini span { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; }
.tcwp-legendmini--dark { color: #94a3b8; }

.tcwp-donut { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; color: #64748b; }
.tcwp-donut svg { height: 100%; max-height: 22cqw; }

/* Handsets ----------------------------------------------------------------- */

.tcwp-phone {
	container-type: inline-size;
	aspect-ratio: 1 / 2.04;
	flex: none;
	filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.16)) drop-shadow(0 22px 34px rgba(15, 23, 42, 0.28));
}

.tcwp-phone__screen {
	position: relative;
	height: 100%;
	width: 100%;
	background: #fff;
	border: 1.7cqw solid #0f172a;
	border-radius: 9cqw;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: #0f172a;
}
.tcwp-phone__screen--chat { background: #ece5dd; }

.tcwp-pstat { display: flex; align-items: center; justify-content: space-between; padding: 3cqw 5cqw 1cqw; flex: none; }
.tcwp-pstat span { height: 1.6cqw; border-radius: 999px; background: #cbd5e1; }
.tcwp-pstat span:first-child { width: 12cqw; }
.tcwp-pstat span:last-child { width: 9cqw; }

.tcwp-phead { padding: 2cqw 5cqw 2.6cqw; font-size: 5cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; border-bottom: 1px solid rgba(15, 23, 42, 0.07); flex: none; }
.tcwp-phead em { display: block; font-style: normal; font-size: 0.68em; font-weight: 400; color: #94a3b8; margin-top: 0.6cqw; }
.tcwp-phead--chat { display: flex; align-items: center; gap: 2.5cqw; background: #075e54; color: #fff; border-bottom: 0; }
.tcwp-phead--chat em { color: rgba(255, 255, 255, 0.7); }
.tcwp-chat__av { width: 8cqw; height: 8cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.28); flex: none; }

.tcwp-pbody { flex: 1; min-height: 0; padding: 3cqw 5cqw; display: flex; flex-direction: column; gap: 2.4cqw; overflow: hidden; }
.tcwp-pbody--chat { gap: 2cqw; justify-content: flex-start; }
.tcwp-pbody--overlay { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 6cqw 6cqw 8cqw 8cqw; flex: none; box-shadow: 0 -4cqw 10cqw rgba(15, 23, 42, 0.12); }

.tcwp-pmeta { display: flex; justify-content: space-between; font-size: 3.6cqw; color: #64748b; }
.tcwp-pcar, .tcwp-pmap, .tcwp-arview, .tcwp-gesture { display: flex; align-items: center; justify-content: center; color: #64748b; }
.tcwp-pcar svg { width: 100%; max-height: 42cqw; }
.tcwp-pmap { flex: 1; min-height: 0; overflow: hidden; }
/* Anchored below the header so the scene sits inside the visible top of a cropped shelf handset. */
.tcwp-arview, .tcwp-gesture { flex: none; height: 68cqw; overflow: hidden; }
.tcwp-pmap svg, .tcwp-arview svg, .tcwp-gesture svg { width: 100%; height: 100%; }

.tcwp-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tcwp-plist li { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; font-size: 3.9cqw; font-weight: 500; padding: 2.4cqw 0; border-top: 1px solid rgba(15, 23, 42, 0.07); }
.tcwp-plist li:first-child { border-top: 0; }
.tcwp-plist--tight li { padding: 1.9cqw 0; }
.tcwp-plist--rich li { gap: 2.6cqw; justify-content: flex-start; }
.tcwp-pico { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; background: color-mix(in srgb, var(--tcwp-art-accent, #2563eb) 16%, #fff); flex: none; }
.tcwp-ptext { flex: 1; min-width: 0; font-size: 3.9cqw; font-weight: 600; }
.tcwp-ptext em { display: block; font-style: normal; font-size: 0.8em; font-weight: 400; color: #94a3b8; margin-top: 0.5cqw; }
.tcwp-pchev { width: 2cqw; height: 2cqw; border-top: 0.7cqw solid #cbd5e1; border-right: 0.7cqw solid #cbd5e1; transform: rotate(45deg); flex: none; }
.tcwp-pv { font-size: 3.6cqw; font-weight: 600; color: #475569; }

.tcwp-plabel { margin: 0; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.tcwp-pvalue { display: block; font-size: 3.5cqw; line-height: 1.5; color: #334155; margin-top: 0.8cqw; }
.tcwp-pblock { display: flex; flex-direction: column; }
.tcwp-pchips { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 1.4cqw; }
.tcwp-pchips em { font-style: normal; font-size: 2.9cqw; font-weight: 600; padding: 1cqw 2.2cqw; border-radius: 999px; background: #eef2ff; color: #4338ca; }
.tcwp-ptags { display: flex; gap: 1.6cqw; }
.tcwp-ptags .tcwp-tag { font-size: 2.9cqw; padding: 1cqw 2.2cqw; }

.tcwp-phone .tcwp-tag { font-size: 2.9cqw; padding: 0.9cqw 2cqw; }

.tcwp-pbtn { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 9.4cqw; border-radius: 2.6cqw; background: var(--tcwp-art-accent, #2563eb); color: #fff; font-size: 3.9cqw; font-weight: 600; flex: none; }

.tcwp-pscore { display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw; padding: 3cqw; border-radius: 3cqw; background: #f8fafc; }
.tcwp-pscore__k { font-size: 3.1cqw; color: #94a3b8; }
.tcwp-pscore__v { font-size: 9cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tcwp-pscore__v em { font-style: normal; font-size: 0.4em; font-weight: 500; color: #94a3b8; }
.tcwp-pscore .tcwp-tag { font-size: 2.9cqw; padding: 1cqw 2.2cqw; }

.tcwp-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.tcwp-pgrid span { aspect-ratio: 1; border-radius: 1.8cqw; background: linear-gradient(135deg, #e2e8f0, #cbd5e1); }
.tcwp-pgrid--row { grid-template-columns: repeat(3, 1fr); }

.tcwp-ptabs { display: flex; gap: 4cqw; font-size: 3.5cqw; color: #94a3b8; border-bottom: 1px solid rgba(15, 23, 42, 0.07); padding-bottom: 2cqw; }
.tcwp-ptabs em { font-style: normal; }
.tcwp-ptabs em.is-on { color: var(--tcwp-art-accent, #2563eb); font-weight: 700; }

.tcwp-ptabbar { display: flex; justify-content: space-around; align-items: center; padding: 3cqw 5cqw 4cqw; border-top: 1px solid rgba(15, 23, 42, 0.07); flex: none; }
.tcwp-ptabbar span { width: 6cqw; height: 6cqw; border-radius: 2cqw; background: #e2e8f0; }
.tcwp-ptabbar span.is-on { background: var(--tcwp-art-accent, #2563eb); }

.tcwp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tcwp-timeline__i { position: relative; display: flex; gap: 3cqw; padding: 0 0 3.4cqw 0; }
.tcwp-timeline__dot { position: relative; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #e2e8f0; flex: none; margin-top: 0.8cqw; }
.tcwp-timeline__i:not(:last-child) .tcwp-timeline__dot::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0.7cqw; height: 5cqw; background: #e2e8f0; }
.tcwp-timeline__i.is-done .tcwp-timeline__dot, .tcwp-timeline__i.is-done .tcwp-timeline__dot::after { background: #16a34a; }
.tcwp-timeline__i.is-live .tcwp-timeline__dot { background: var(--tcwp-art-accent, #2563eb); box-shadow: 0 0 0 1.6cqw color-mix(in srgb, var(--tcwp-art-accent, #2563eb) 22%, transparent); }
.tcwp-timeline__t { font-size: 3.5cqw; font-weight: 600; }
.tcwp-timeline__t em { display: block; font-style: normal; font-size: 0.82em; font-weight: 400; color: #94a3b8; margin-top: 0.4cqw; }

.tcwp-bubble { position: relative; max-width: 82%; font-size: 3.4cqw; line-height: 1.4; padding: 2.4cqw 3cqw 3.4cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.tcwp-bubble > em { position: absolute; right: 2.4cqw; bottom: 1.2cqw; font-style: normal; font-size: 2.5cqw; color: #94a3b8; }
.tcwp-bubble--in { align-self: flex-start; border-top-left-radius: 0.8cqw; }
.tcwp-bubble--out { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0.8cqw; }
.tcwp-bubble--file { padding-bottom: 5.4cqw; }
.tcwp-file { display: flex; align-items: center; gap: 2cqw; font-weight: 600; }
.tcwp-file em { position: static; display: block; font-size: 2.7cqw; font-weight: 400; color: #94a3b8; margin-top: 0.4cqw; }
.tcwp-file__ico { width: 7cqw; height: 8.6cqw; border-radius: 1.2cqw; background: #ef4444; flex: none; }

.tcwp-pprofile { display: flex; align-items: center; gap: 2.6cqw; padding: 2cqw 5cqw 3cqw; border-bottom: 1px solid rgba(15, 23, 42, 0.07); flex: none; }
.tcwp-pprofile__av { width: 11cqw; height: 11cqw; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #a5b4fc); flex: none; }
.tcwp-pprofile__t { font-size: 4.4cqw; font-weight: 700; letter-spacing: -0.02em; }
.tcwp-pprofile__t em { display: block; font-style: normal; font-size: 0.72em; font-weight: 400; color: #94a3b8; margin-top: 0.5cqw; }

.tcwp-petcard { display: flex; align-items: center; gap: 2.6cqw; padding: 2.6cqw; border-radius: 3cqw; background: #f8fafc; }
.tcwp-petcard__av { width: 10cqw; height: 10cqw; border-radius: 50%; background: linear-gradient(135deg, #fed7aa, #fdba74); flex: none; }
.tcwp-petcard__t { flex: 1; min-width: 0; font-size: 3.9cqw; font-weight: 700; }
.tcwp-petcard__t em { display: block; font-style: normal; font-size: 0.78em; font-weight: 400; color: #94a3b8; margin-top: 0.4cqw; }
.tcwp-petcard .tcwp-tag { font-size: 2.7cqw; padding: 0.9cqw 2cqw; }

.tcwp-pcard { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.8cqw; border-radius: 3cqw; border: 1px solid rgba(15, 23, 42, 0.08); }
.tcwp-pcard__t { font-size: 3.7cqw; font-weight: 600; }
.tcwp-pcard__t em { display: block; font-style: normal; font-size: 0.82em; font-weight: 400; color: #94a3b8; margin-top: 0.4cqw; }
.tcwp-pcard__b { font-size: 3.1cqw; font-weight: 600; color: var(--tcwp-art-accent, #2563eb); white-space: nowrap; }

.tcwp-clock { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 4cqw; border-radius: 3cqw; background: #f8fafc; }
.tcwp-clock__v { font-size: 11cqw; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.tcwp-clock__k { font-size: 3.1cqw; color: #94a3b8; }

.tcwp-scan { position: relative; display: flex; align-items: center; justify-content: center; padding: 2cqw 0; color: #64748b; }
.tcwp-scan svg { width: 100%; }
.tcwp-scan__beam { position: absolute; left: 6%; right: 6%; height: 0.8cqw; border-radius: 999px; background: var(--tcwp-art-accent, #2563eb); opacity: 0.55; top: 46%; }

.tcwp-stars { display: flex; gap: 1.6cqw; font-size: 8cqw; color: #e2e8f0; line-height: 1; }
.tcwp-stars .is-on { color: #f59e0b; }
.tcwp-readout { display: flex; align-items: center; gap: 2cqw; padding: 3cqw; }
.tcwp-readout__k { font-size: 3cqw; color: #94a3b8; }
.tcwp-readout__v { flex: 1; font-size: 3.9cqw; font-weight: 700; }
.tcwp-readout .tcwp-tag { font-size: 2.7cqw; padding: 0.9cqw 2cqw; }
.tcwp-swatches { display: flex; gap: 2.4cqw; padding: 3cqw 5cqw; flex: none; }
.tcwp-swatches span { width: 8cqw; height: 8cqw; border-radius: 50%; background: #d6bfa6; }
.tcwp-swatches span:nth-child(2) { background: #8d6e58; }
.tcwp-swatches span:nth-child(3) { background: #4b5563; }
.tcwp-swatches span:nth-child(4) { background: #1f2937; }
.tcwp-swatches span.is-on { outline: 0.9cqw solid rgba(37, 99, 235, 0.45); outline-offset: 0.9cqw; }

.tcwp-stand { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.tcwp-stand__qr { width: 100%; aspect-ratio: 1; padding: 8cqw; background: #fff; border-radius: 6cqw; color: #0f172a; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 20px 40px -22px rgba(15, 23, 42, 0.5); }
.tcwp-stand__qr svg { width: 100%; height: 100%; }
.tcwp-stand__t { font-size: 7cqw; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; }
.tcwp-stand__base { width: 58%; height: 3cqw; border-radius: 999px; background: rgba(15, 23, 42, 0.14); }

.tcwp-game { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.tcwp-game svg { width: 100%; height: 100%; display: block; }
.tcwp-game__hud { position: absolute; top: 4cqw; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; font-size: 4cqw; font-weight: 700; color: #0f172a; }
.tcwp-game__score, .tcwp-game__level { background: rgba(255, 255, 255, 0.82); border-radius: 999px; padding: 1.4cqw 3cqw; }

.tcwp-flowline { position: absolute; color: rgba(255, 255, 255, 0.75); pointer-events: none; }
.tcwp-flowline svg { width: 100%; height: 100%; }

/* ==========================================================================
   Scene composition
   Devices are placed as a percentage of the canvas, and deliberately cropped at
   the canvas edge rather than shrunk into unreadable miniatures.
   ========================================================================== */

/* Full-width flagship ------------------------------------------------------ */
.tcwp-canvas--full .tcwp-scene__desk { position: absolute; left: 2.8cqw; top: 4cqw; width: 60cqw; height: 36cqw; }
.tcwp-canvas--full .tcwp-scene__phones { position: absolute; right: 2.4cqw; top: 0; bottom: 0; display: flex; align-items: center; gap: 1.8cqw; }
.tcwp-canvas--full .tcwp-phone { width: 15.2cqw; }
.tcwp-canvas--full .tcwp-phone--a { margin-top: 3.2cqw; }


/* Wide half of a pair ------------------------------------------------------ */
.tcwp-canvas--pair-a .tcwp-scene__desk { position: absolute; left: 3cqw; top: 8%; width: 87cqw; height: 112%; }
.tcwp-canvas--pair-a .tcwp-scene__phones { position: absolute; right: 1.8cqw; top: 0; bottom: 0; display: flex; align-items: flex-end; padding-bottom: 4cqw; }
.tcwp-canvas--pair-a .tcwp-phone { height: 62%; width: auto; }

/* Narrow half of a pair ---------------------------------------------------- */
.tcwp-canvas--pair-b .tcwp-scene__desk { position: absolute; left: 4cqw; top: 12%; width: 84cqw; height: 76%; }
.tcwp-canvas--pair-b .tcwp-scene__phones { position: absolute; right: 4cqw; top: 0; bottom: 0; display: flex; align-items: flex-end; padding-bottom: 5cqw; }
.tcwp-canvas--pair-b .tcwp-phone { height: 74%; width: auto; }

.tcwp-canvas--pair-b .tcwp-scene__phones--trio {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.6cqw;
	padding-inline: 3cqw;
}

.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone { height: 80%; width: auto; }
.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone--a,
.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone--c { margin-top: 7%; }

/* Grid card ---------------------------------------------------------------- */
.tcwp-canvas--card .tcwp-scene__desk { position: absolute; left: 6cqw; top: 8cqw; width: 132cqw; height: 68cqw; }

/* Archive shelf ------------------------------------------------------------ */
.tcwp-canvas--shelf .tcwp-scene__phones { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.tcwp-canvas--shelf .tcwp-phone { width: 60cqw; margin-bottom: -48cqw; }
.tcwp-canvas--shelf .tcwp-scene__game { position: absolute; inset: 0; }
.tcwp-canvas--shelf .tcwp-scene__mix { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4cqw; padding: 0 6cqw; }
.tcwp-canvas--shelf .tcwp-scene__mix .tcwp-stand { width: 32cqw; margin-bottom: 12cqw; }
.tcwp-canvas--shelf .tcwp-scene__mix .tcwp-phone { width: 44cqw; margin-bottom: -30cqw; }

/* ==========================================================================
   Artwork responsiveness

   Thresholds are per canvas *type*, not per viewport, because a pair half is
   only ~40-58% of the content width — a single shared breakpoint would trigger
   the cropped mobile treatment on a desktop pair. Each canvas switches when its
   own box gets too narrow to keep interface type legible.
   ========================================================================== */

/* Full-width flagship: 1168px at 1440, 960 at 1024, 704 at 768, 342 at 390. */
@container canvas (max-width: 860px) {
	.tcwp-canvas--full .tcwp-scene__desk { left: -6cqw; top: 3cqw; width: 122cqw; height: 58cqw; }
	.tcwp-canvas--full .tcwp-scene__phones { right: auto; left: 0; top: auto; bottom: 2cqw; width: 100%; justify-content: center; gap: 3cqw; align-items: flex-end; }
	.tcwp-canvas--full .tcwp-phone { width: 40cqw; }
	.tcwp-canvas--full .tcwp-phone--a { margin-top: 0; }
}

@container canvas (max-width: 420px) {
	.tcwp-canvas--full .tcwp-scene__desk { left: -30cqw; width: 172cqw; height: 66cqw; }
	.tcwp-canvas--full .tcwp-phone { width: 44cqw; }
}

/* Wide pair half: 686px at 1440, 549 at 1024, 704 stacked at 768, 342 at 390. */
@container canvas (max-width: 570px) {
	.tcwp-canvas--pair-a .tcwp-split,
	.tcwp-canvas--pair-b .tcwp-split { display: none; }
	.tcwp-canvas--pair-a .tcwp-panel--wide,
	.tcwp-canvas--pair-b .tcwp-panel--wide { flex: 1; }
	.tcwp-canvas--pair-a .tcwp-scene__desk { left: -5cqw; top: 7%; width: 118cqw; height: 96%; }
	.tcwp-canvas--pair-a .tcwp-scene__phones { right: 3cqw; padding-bottom: 3.5cqw; }
	.tcwp-canvas--pair-a .tcwp-phone { height: 78%; width: auto; }

	.tcwp-canvas--pair-b .tcwp-scene__desk { left: -5cqw; top: 9%; width: 118cqw; height: 82%; }
	.tcwp-canvas--pair-b .tcwp-scene__phones { right: 3cqw; padding-bottom: 3.5cqw; }
	.tcwp-canvas--pair-b .tcwp-phone { height: 80%; width: auto; }
}

/* Below this a third handset stops being readable, so the trio drops to two. */
@container canvas (max-width: 430px) {
	.tcwp-canvas--pair-b .tcwp-scene__phones--trio { gap: 5cqw; }
	.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone { height: 88%; width: auto; }
	.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone--c { display: none; }
}

@container canvas (max-width: 400px) {
	.tcwp-canvas--pair-a .tcwp-scene__desk { left: -28cqw; top: 6%; width: 168cqw; height: 92%; }
	.tcwp-canvas--pair-a .tcwp-phone { height: 82%; width: auto; }
	.tcwp-canvas--pair-b .tcwp-scene__desk { left: -28cqw; top: 7%; width: 168cqw; height: 90%; }
	.tcwp-canvas--pair-b .tcwp-phone { height: 84%; width: auto; }
	.tcwp-canvas--pair-b .tcwp-scene__phones--trio .tcwp-phone { height: 80%; width: auto; }
}

/* Grid cards and shelves --------------------------------------------------- */
@container canvas (max-width: 330px) {
	.tcwp-canvas--card .tcwp-scene__desk { left: 5cqw; top: 7cqw; width: 168cqw; height: 84cqw; }
	.tcwp-canvas--shelf .tcwp-phone { width: 66cqw; margin-bottom: -56cqw; }
}

/* Canvas proportions per breakpoint ---------------------------------------- */
@media (max-width: 859px) {
	.tcwp-canvas--full { aspect-ratio: 1 / 1.02; }
	.tcwp-canvas--pair-a, .tcwp-canvas--pair-b { aspect-ratio: 1 / 0.78; }
}

@media (max-width: 520px) {
	.tcwp-canvas--full { aspect-ratio: 1 / 1.16; }
	.tcwp { --tcwp-r-art: 20px; }
}

/* ==========================================================================
   Hover motion — restrained, and only where a pointer exists
   ========================================================================== */

@media (hover: hover) {
	.tcwp-canvas { transition: box-shadow var(--tcwp-dur) var(--tcwp-ease); }
	.tcwp-showcase .tcwp-win, .tcwp-pair__item .tcwp-win, .tcwp-card .tcwp-win,
	.tcwp-showcase .tcwp-phone, .tcwp-pair__item .tcwp-phone, .tcwp-shelf .tcwp-phone {
		transition: transform 240ms var(--tcwp-ease);
	}
	.tcwp-showcase:hover .tcwp-win, .tcwp-pair__item:hover .tcwp-win, .tcwp-card:hover .tcwp-win { transform: translateY(-4px); }
	.tcwp-showcase:hover .tcwp-phone, .tcwp-pair__item:hover .tcwp-phone, .tcwp-shelf:hover .tcwp-phone { transform: translateY(-6px); }
}

/* Section rhythm & render cost --------------------------------------------- */
/* data-defer marks non-priority artwork. It is a hook for Phase 2, when real media
   replaces the CSS compositions and can be lazy-loaded; the CSS artwork itself is
   cheap enough that skipping its rendering costs more than it saves. */

/* ==========================================================================
   Real artwork
   Theme-hosted screenshots share the canvas box with the CSS compositions, so
   swapping one for the other changes nothing else.
   ========================================================================== */

.tcwp-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	max-width: none;
}

@media (hover: hover) {
	.tcwp-media { transition: transform 240ms var(--tcwp-ease); }
	.tcwp-showcase:hover .tcwp-media,
	.tcwp-pair__item:hover .tcwp-media,
	.tcwp-card:hover .tcwp-media { transform: scale(1.015); }
}

/* A flagship canvas carrying real artwork takes that artwork's aspect via an inline style, so the
   composition is never cropped at any width. Cards and pair halves keep their designed proportions. */

/* Card canvases originally only ever held a console. Related-work cards can carry any project, so
   handsets need placing here too — otherwise they fall out of the composition at their natural size. */
.tcwp-canvas--card .tcwp-scene__phones {
	position: absolute;
	right: 4cqw;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 3cqw;
}

.tcwp-canvas--card .tcwp-phone { height: 82%; width: auto; }

.tcwp-canvas--card .tcwp-scene__phones--trio {
	position: absolute;
	inset: 0;
	right: 0;
	justify-content: center;
	gap: 4cqw;
	padding-inline: 4cqw;
}

.tcwp-canvas--card .tcwp-scene__phones--trio .tcwp-phone { height: 86%; }
.tcwp-canvas--card .tcwp-scene__phones--trio .tcwp-phone--c { display: none; }

/* ==========================================================================
   Flagship brief — the three-column block beneath a full-width artwork
   ========================================================================== */

.tcwp-brief {
	display: grid;
	gap: clamp(18px, 2vw, 28px);
	margin-top: clamp(18px, 2vw, 24px);
	padding-top: clamp(18px, 2vw, 24px);
	border-top: 1px solid var(--tcwp-line-2);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) { .tcwp-brief { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 860px) {
	.tcwp-brief__col + .tcwp-brief__col { padding-left: clamp(22px, 2.4vw, 34px); border-left: 1px solid var(--tcwp-line); }
}

.tcwp-brief__eyebrow {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--tcwp-ink-3);
}

.tcwp-brief__logo { display: block; width: auto; height: auto; max-width: 140px; max-height: 36px; margin-bottom: 12px; object-fit: contain; object-position: left center; }

.tcwp-status--loud .tcwp-status__text { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.tcwp-brief__title { margin: 8px 0 0; font-size: clamp(23px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.tcwp-brief__terms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--tcwp-accent); }
.tcwp-brief__terms i { font-style: normal; color: var(--tcwp-line-2); }

.tcwp-brief__summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tcwp-ink); max-width: 42ch; }

.tcwp-brief__facts { margin: 0; display: grid; gap: 0; }
.tcwp-brief__summary + .tcwp-brief__facts { margin-top: 16px; }
.tcwp-brief__fact { padding: 11px 0; border-top: 1px solid var(--tcwp-line); }
.tcwp-brief__fact:first-child { border-top: 0; padding-top: 0; }
.tcwp-brief__fact:last-child { padding-bottom: 0; }
.tcwp-brief__fact dt { margin: 0 0 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tcwp-ink-3); }
.tcwp-brief__fact dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tcwp-ink); }

.tcwp-btn--primary { background: var(--tcwp-accent); color: #fff; gap: 9px; }
.tcwp-btn--primary:hover { background: var(--tcwp-accent-2); color: #fff; }
.tcwp-btn--primary svg { transition: transform var(--tcwp-dur) var(--tcwp-ease); }
.tcwp-btn--primary:hover svg { transform: translate(2px, -2px); }
.tcwp-brief__cta { margin-top: 18px; width: 100%; }

@media (min-width: 520px) { .tcwp-brief__cta { width: auto; } }

/* ==========================================================================
   Scale strip — who a flagship serves and how big it is, in two rows
   ========================================================================== */

/* A light card so the strip reads as a statement about the system rather than a fourth column of
   the brief above it. The band tint shows through, keeping it inside the chapter. */
.tcwp-scale {
	margin-top: clamp(14px, 1.6vw, 20px);
	padding: clamp(14px, 1.5vw, 19px) clamp(16px, 1.8vw, 24px);
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-card);
}

.tcwp-scale__row { display: grid; gap: 9px clamp(18px, 2vw, 28px); grid-template-columns: 1fr; align-items: center; }
.tcwp-scale__row + .tcwp-scale__row { margin-top: clamp(12px, 1.4vw, 16px); padding-top: clamp(12px, 1.4vw, 16px); border-top: 1px solid var(--tcwp-line); }

/* The row label sits in its own column on wide screens, which buys back the vertical space two
   stacked eyebrows would have cost. */
@media (min-width: 900px) { .tcwp-scale__row { grid-template-columns: 160px minmax(0, 1fr); } }

.tcwp-scale__label {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--tcwp-ink-3);
}

.tcwp-scale__audiences { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tcwp-scale__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: #fff;
	border: 1px solid var(--tcwp-line);
	border-radius: var(--tcwp-r-pill);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tcwp-ink);
}
.tcwp-scale__chip svg { color: var(--tcwp-accent); flex: none; }

.tcwp-scale__metrics { display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 3.4vw, 54px); margin: 0; }
.tcwp-scale__metric { min-width: 116px; }

/* Lining figures keep the numbers on one baseline whatever the loaded face does. */
.tcwp-scale__value { margin: 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--tcwp-accent); font-variant-numeric: lining-nums tabular-nums; }
.tcwp-scale__caption { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: var(--tcwp-ink-3); max-width: 24ch; }

/* ==========================================================================
   Market card — the detail panel in the global reach band
   ========================================================================== */

.tcwp-market__view { grid-area: 1 / 1; align-self: start; visibility: hidden; opacity: 0; transition: opacity var(--tcwp-dur) var(--tcwp-ease), visibility var(--tcwp-dur); }
.tcwp-market__view.is-on { visibility: visible; opacity: 1; }

.tcwp-mk__country { display: flex; align-items: center; gap: 9px; margin: 0; font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.03em; color: var(--tcwp-ink); }
.tcwp-mk__country span { font-size: 0.9em; line-height: 1; }
.tcwp-mk__terms { margin: 6px 0 0; font-size: 12.5px; font-weight: 500; color: var(--tcwp-ink-2); }
.tcwp-mk__context { margin: 3px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--tcwp-ink-3); }

.tcwp-mk__stats { display: flex; margin: 10px 0 0; padding: 8px 0; border-block: 1px solid var(--tcwp-line); }
/* With nothing below it the closing rule would dangle. */
.tcwp-mk__stats:last-child { border-bottom: 0; padding-bottom: 0; }
.tcwp-mk__stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.tcwp-mk__stat + .tcwp-mk__stat { border-left: 1px solid var(--tcwp-line); }
.tcwp-mk__stat-value { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--tcwp-accent); }
.tcwp-mk__stat-label { font-size: 10.5px; color: var(--tcwp-ink-3); }
.tcwp-mk__stat--live .tcwp-mk__stat-value { color: #15803d; }

.tcwp-mk__section { margin-top: 10px; }
.tcwp-mk__eyebrow { margin: 0 0 6px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcwp-ink-3); }

.tcwp-mk__featured { display: grid; gap: 10px; padding: 9px; border-radius: var(--tcwp-r-card); background: var(--tcwp-surface-2); grid-template-columns: 1fr; }
@media (min-width: 480px) { .tcwp-mk__featured { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); align-items: center; } }
.tcwp-mk__shot { width: 100%; }
.tcwp-mk__featured-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.tcwp-mk__featured-tagline { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tcwp-ink-2); }
.tcwp-mk__featured-meta { margin: 3px 0 0; font-size: 11.5px; color: var(--tcwp-ink-3); }
.tcwp-mk__featured-body .tcwp-status { display: flex; margin-top: 5px; }
.tcwp-mk__featured-body .tcwp-link { margin-top: 4px; }

.tcwp-mk__work { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tcwp-mk__work-row { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--tcwp-line); border-radius: var(--tcwp-r-sm); text-decoration: none; color: inherit; }
.tcwp-mk__work-row.is-link { transition: border-color var(--tcwp-dur) var(--tcwp-ease), background-color var(--tcwp-dur) var(--tcwp-ease); }
.tcwp-mk__work-row.is-link:hover { border-color: var(--tcwp-accent); background: rgba(70, 101, 155, 0.04); }
.tcwp-mk__work-name { font-size: 13px; font-weight: 700; flex: none; }
.tcwp-mk__work-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--tcwp-ink-2); }
.tcwp-mk__work-row .tcwp-status { flex: none; font-size: 11.5px; }
.tcwp-mk__chev { color: var(--tcwp-ink-3); flex: none; }

.tcwp-mk__confidential { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px; border-radius: var(--tcwp-r-card); background: var(--tcwp-surface-2); }
.tcwp-mk__lock { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tcwp-surface); color: var(--tcwp-ink-2); flex: none; }
.tcwp-mk__confidential-count { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.tcwp-mk__confidential-areas { margin: 2px 0 0; font-size: 11px; color: var(--tcwp-ink-2); }
.tcwp-mk__confidential-body .tcwp-status { display: flex; margin-top: 5px; font-size: 11.5px; }
.tcwp-mk__confidential-note { margin: 2px 0 0; font-size: 10.5px; line-height: 1.35; color: var(--tcwp-ink-3); }

/* ==========================================================================
   Media slots and placeholders — shared by the listing and the case study
   ========================================================================== */

/* Verification marker ------------------------------------------------------- */

.tcwp-verify {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--tcwp-r-pill);
	background: rgba(234, 115, 23, 0.12);
	color: #a8560f;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
}

/* Media and placeholders ---------------------------------------------------- */

.tcwp-shot {
	position: relative;
	border-radius: var(--tcwp-r-card);
	overflow: hidden;
	background: var(--tcwp-surface-2);
	box-shadow: var(--tcwp-shadow);
}

.tcwp-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }

.tcwp-ph {
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 22px;
	text-align: center;
	border: 1px dashed rgba(70, 101, 155, 0.35);
	border-radius: var(--tcwp-r-card);
	background:
		repeating-linear-gradient(135deg, rgba(70, 101, 155, 0.035) 0 10px, transparent 10px 20px),
		var(--tcwp-surface-2);
	color: var(--tcwp-ink-3);
}

.tcwp-ph__icon { color: var(--tcwp-accent); opacity: 0.55; flex: none; }
.tcwp-ph__text { display: flex; flex-direction: column; gap: 6px; max-width: 46ch; }
.tcwp-ph__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tcwp-accent); }
.tcwp-ph__desc { font-size: 13px; line-height: 1.5; color: var(--tcwp-ink-2); }
.tcwp-ph__path { font-size: 10.5px; color: var(--tcwp-ink-3); word-break: break-all; }

/* A placeholder in a thumbnail-sized slot cannot carry the full brief, so it states what it is and
   clamps the description. The box never outgrows its declared ratio. */
.tcwp-ph { overflow: hidden; }
.tcwp-ph--sm { padding: 12px; gap: 6px; }
.tcwp-ph--sm .tcwp-ph__icon { width: 20px; height: 20px; }
.tcwp-ph--sm .tcwp-ph__text { gap: 3px; }
.tcwp-ph--sm .tcwp-ph__label { font-size: 9px; letter-spacing: 0.1em; }
.tcwp-ph--sm .tcwp-ph__desc { font-size: 10.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcwp-ph--sm .tcwp-ph__path { display: none; }

/* Project logo marks. Files range from wide wordmarks to square icons, so the height is capped and
   the width follows the artwork rather than being forced into a box. */
.tcwp-mk__logo { width: auto; height: auto; max-width: 76px; max-height: 22px; object-fit: contain; object-position: left center; flex: none; }
.tcwp-mk__logo--sm { max-width: 58px; max-height: 17px; }

.tcwp-mk__featured-title { display: flex; align-items: center; gap: 8px; }
.tcwp-mk__work-name { display: flex; align-items: center; gap: 7px; }

/* Named projects with no published detail — names only, never an invented description. */
.tcwp-mk__named { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tcwp-mk__named li { padding: 4px 9px; border: 1px solid var(--tcwp-line); border-radius: var(--tcwp-r-pill); font-size: 11.5px; font-weight: 500; color: var(--tcwp-ink-2); }