/* ==========================================================================
   Service pages, art layer (loads after finish.css).
   One rendered object per service (assets/img/art/svc-<icon>.webp, one series: smoked graphite
   and clear glass, blue anodized metal, chrome, cyan rim from the upper left) replaces the hero
   doodle on the slab and the hover doodles in the related-services rows.
   ========================================================================== */

/* ---------- Hero: the object stands in front of the slab, larger than its face ---------- */
.tb-plate--art .tb-plate__face { overflow: hidden; }
.tb-svc-hero-art {
	position: absolute; z-index: 1; top: -14%; left: -8%; width: 116%;
	display: block; aspect-ratio: 1; pointer-events: none; user-select: none;
}
/* A square box with the object contained: tall objects (the phone stack) come out smaller, not longer. */
.tb-svc-hero-art img {
	display: block; width: 100%; height: 100%; object-fit: contain;
	/* light from the upper left: the object throws its shadow down and to the right, onto the slab */
	filter: drop-shadow(12px 20px 14px rgba(0, 6, 30, .55)) drop-shadow(30px 52px 46px rgba(0, 6, 30, .45));
}
/* The bleeding slab runs off the page edge: keep the object on the part that stays on the page. */
.tb-plate--art.tb-plate--bleed .tb-svc-hero-art { top: -10%; left: 16%; width: 96%; }
.tb-hero--inner .tb-plate--art .tb-plate__chip { z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
	/* Enters by rising onto the slab; transform only, so it is never caught invisible. */
	.tb-svc-hero-art img { animation: tb-svc-rise 1.6s var(--tb-ease) .25s both; }
	@keyframes tb-svc-rise { from { transform: translate3d(0, 34px, 0) scale(.93); } }
}

@media (max-width: 1100px) {
	.tb-plate--art.tb-plate--bleed .tb-svc-hero-art { left: -8%; width: 116%; }
}
@media (max-width: 960px) {
	/* The slab drops under the copy: leave headroom for the object that rises above it. */
	.tb-plate--art { margin-top: 64px; }
}
@media (max-width: 640px) {
	.tb-plate--art { margin-top: 52px; }
}

/* ---------- Related services: each row carries that service's object ---------- */
.tb-index__art { display: block; width: 100%; pointer-events: none; }
.tb-index__art img {
	display: block; width: 100%; height: auto;
	filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, .55));
	transition: transform .6s var(--tb-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tb-index__row:hover .tb-index__art img { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
}
@media (max-width: 640px) {
	.tb-index__art { grid-column: 3; grid-row: 1 / span 2; align-self: start; width: 64px; }
}

/* ---------- Goal / pillar lead slabs: the doodle's slot now holds the slab's own object, large ----------
   Shown exactly where main.css used to show the doodle (desktop, lead slab spanning rows); everywhere
   else the card keeps its normal 3D icon, which icons.css hides only in this same case. */
.tb-goal-card__art { display: none; }
@media (min-width: 1101px) {
	:is(.tb-goals__grid, .tb-pillars__grid) > .tb-card:first-child:is(:nth-last-child(4), :nth-last-child(5), :nth-last-child(6)) .tb-goal-card__art {
		display: block; position: absolute; z-index: 0; top: 20%; left: 0; right: 0; margin-inline: auto;
		width: clamp(150px, 13vw, 200px); pointer-events: none;
	}
	.tb-goals__grid--5 > .tb-card:first-child .tb-goal-card__art { top: 27%; }
	/* the 2x2 slab (six items) is ~850px wide: the object takes ~40% of it so the slab reads lit, not empty (680px squares = 2x) */
	:is(.tb-goals__grid, .tb-pillars__grid) > .tb-card:first-child:nth-last-child(6) .tb-goal-card__art { top: 5%; width: clamp(240px, 24vw, 340px); }
	.tb-goal-card__art img {
		display: block; width: 100%; height: auto;
		filter: drop-shadow(10px 18px 14px rgba(0, 4, 20, .6)) drop-shadow(24px 40px 36px rgba(0, 4, 20, .4));
	}
	:is(.tb-goals__grid, .tb-pillars__grid) > .tb-card:first-child > :not(.tb-goal-card__art, .tb-goal-card__step) { position: relative; z-index: 1; }
}

/* ---------- Dense feature lists: a crisp glyph in a blue-tinted chip (3D renders only from 56px up) ---------- */
.tb-feature__glyph {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px;
	background: linear-gradient(150deg, rgba(2, 83, 252, .34) 0%, rgba(2, 83, 252, .12) 100%);
	border: 1px solid rgba(2, 205, 253, .28); border-top-color: rgba(120, 200, 255, .5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
	color: var(--tb-cyan);
	transition: background-color .35s var(--tb-ease), color .35s var(--tb-ease), border-color .35s var(--tb-ease);
}
.tb-feature__glyph .tb-icon { width: 22px; height: 22px; }
.tb-feature:has(> .tb-feature__glyph) { gap: 16px; align-items: flex-start; }
.tb-feature:hover .tb-feature__glyph { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; }