/* =============================================================================
 * THI MOTION LAYER
 * Shared motion + the House Explorer, Roof Explorer, and Thermal Compare
 * graphics. Loaded on the homepage, service pages, city pages, and the extra
 * templates in trusted_home_motion_extra_templates(). Paired with
 * assets/js/thi-motion.js.
 *
 * Principles (Apple fluid-interface rules):
 *  - Springs, not fixed-duration eases. Critically damped by default;
 *    a little bounce only where a gesture carried momentum.
 *  - Feedback on press, not on release.
 *  - Everything stays visible without JS: hidden-until-revealed states only
 *    apply under html.thi-motion, which the script sets.
 *  - prefers-reduced-motion: no movement, content shown immediately.
 * ============================================================================= */

:root {
	/* Critically damped spring, response 0.45s (settles in ~600ms) */
	--thi-spring: linear(0, 0.067, 0.205, 0.358, 0.499, 0.619, 0.715, 0.79, 0.848, 0.89, 0.921, 0.944, 0.96, 0.972, 0.981, 0.986, 0.991, 0.993, 0.995, 0.997, 1);
	--thi-spring-dur: 600ms;
	/* Damping 0.72, response 0.4s: ~4% overshoot. Momentum moments only. */
	--thi-bounce: linear(0, 0.064, 0.209, 0.383, 0.554, 0.703, 0.822, 0.91, 0.971, 1.009, 1.029, 1.038, 1.038, 1.034, 1.027, 1.021, 1.014, 1.009, 1.005, 1.002, 1);
	--thi-bounce-dur: 700ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
	:root {
		--thi-spring: cubic-bezier(0.22, 1, 0.36, 1);
		--thi-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
	}
}

/* ── PRESS FEEDBACK: respond on pointer-down ──────────────────────────── */
html.thi-motion :is(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-white, .thi-hx-mode):active {
	transform: scale(0.97);
	transition: transform 100ms ease-out;
}

/* ── STAGGERED REVEAL for card grids ──────────────────────────────────── */
html.thi-motion [data-thi-stagger] > * {
	opacity: 0;
	transform: translateY(18px);
}
html.thi-motion [data-thi-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 400ms ease-out calc(var(--i, 0) * 70ms),
		transform var(--thi-spring-dur) var(--thi-spring) calc(var(--i, 0) * 70ms);
}
/* Once the reveal finishes, the script removes data-thi-stagger so the
   cards' own hover transforms apply again. */

/* Card hover lift on the spring curve instead of a material ease. */
html.thi-motion :is(.why-card, .sf-card, .sp-system-card, .sp-region-card, .process-card):hover {
	transition: transform var(--thi-spring-dur) var(--thi-spring), box-shadow 300ms ease, border-color 300ms ease, background-color 300ms ease;
}

/* ── STEP NUMBERS: pop in + connector line draws ─────────────────────── */
html.thi-motion [data-thi-steps] :is(.sp-step-num, .process-num) {
	transform: scale(0.6);
	opacity: 0;
}
html.thi-motion [data-thi-steps].is-in :is(.sp-step-num, .process-num) {
	transform: none;
	opacity: 1;
	transition:
		transform var(--thi-spring-dur) var(--thi-spring) calc(var(--i, 0) * 160ms + 120ms),
		opacity 250ms ease-out calc(var(--i, 0) * 160ms + 120ms);
}
html.thi-motion .sp-steps[data-thi-steps]::before {
	transform: scaleX(0);
	transform-origin: left center;
}
html.thi-motion .sp-steps[data-thi-steps].is-in::before {
	transform: scaleX(1);
	transition: transform 900ms var(--thi-spring) 100ms;
}

/* Count-up numbers keep their width while counting. */
[data-thi-count] { font-variant-numeric: tabular-nums; }

/* =============================================================================
 * HOUSE EXPLORER
 * ============================================================================= */
.thi-hx {
	--hx-navy: var(--navy, #1a2b45);
	--hx-gold: var(--gold, #b8912a);
	--hx-gold-dark: var(--gold-dark, #7d6118);
	--hx-gold-wash: var(--gold-wash, rgba(184,145,42,0.12));
	--hx-ink-2: var(--gray-600, #4b5563);
	--hx-line: var(--gray-200, #e5e7eb);
	padding: 96px 24px;
	background: var(--white, #fff);
	color: var(--hx-navy);
}
.thi-hx.is-cream { background: var(--cream, #f5f4f0); }
.thi-hx.is-cream .thi-hx-stagewrap { background: #fff; box-shadow: var(--shadow-sm, 0 2px 8px rgba(26,43,69,0.06)); }
.thi-hx-inner { max-width: var(--container, 1200px); margin: 0 auto; }
.thi-hx .thi-hx-header { max-width: var(--measure-sm, 700px); margin: 0 auto 48px; text-align: center; }
.thi-hx .thi-hx-header h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
	color: var(--hx-navy); margin: 0 0 16px;
	text-wrap: balance;
}
.thi-hx .thi-hx-header h2 em { color: var(--hx-gold-dark); font-style: italic; }
.thi-hx .thi-hx-header p:not(.section-label) { font-size: 18px; line-height: 1.7; color: var(--hx-ink-2); margin: 0; }
.thi-hx .section-label { justify-content: center; }

.thi-hx-grid {
	display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 32px; align-items: start;
}

/* Stage */
.thi-hx-stagewrap {
	background: var(--cream, #f5f4f0);
	border-radius: var(--radius-lg, 24px);
	padding: 20px 20px 16px;
	position: relative;
}
.thi-hx-stage {
	position: relative;
	touch-action: pan-y;
	-webkit-user-select: none; user-select: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: var(--radius, 16px);
	outline: none;
}
.thi-hx-stage:focus-visible { box-shadow: 0 0 0 3px var(--hx-navy); }
.thi-hx-svg { display: block; width: 100%; height: auto; overflow: hidden; }

/* Line art */
.thi-hx-art path, .thi-hx-art rect {
	fill: none; stroke: var(--hx-navy); stroke-width: 2.6;
	stroke-linecap: round; stroke-linejoin: round;
}
.thi-hx-art .thi-hx-thin { stroke-width: 1.8; opacity: 0.75; }
.thi-hx-art .thi-hx-dash { stroke-dasharray: 2 6; stroke-width: 1.4; opacity: 0.6; }
.thi-hx-art .thi-hx-ground { stroke-width: 1.6; opacity: 0.5; }
.thi-hx-art .thi-hx-soil { stroke: none; fill: rgba(26,43,69,0.05); }
.thi-hx-art .thi-hx-wall { fill: #fff; }
.thi-hx-art .thi-hx-door { fill: rgba(26,43,69,0.06); }
.thi-hx-art .thi-hx-roof { stroke-width: 3.2; }
.thi-hx-art .thi-hx-wave { stroke: var(--hx-gold); stroke-width: 1.6; opacity: 0.9; }
.thi-hx-art .thi-hx-fill { fill: #fff; }

/* Zones light up gold when their hotspot is selected. */
.thi-hx-zone :is(path, rect) {
	transition: stroke 300ms ease, fill 300ms ease;
}
.thi-hx-zone.is-active :is(path, rect) { stroke: var(--hx-gold-dark); }
.thi-hx-zone.is-active .thi-hx-fill { fill: #f6ecd2; }
[data-mode="thermal"] .thi-hx-zone.is-active :is(path, rect) { stroke: var(--hx-navy); }
[data-mode="thermal"] .thi-hx-zone.is-active .thi-hx-fill { fill: #fff; }

/* Draw-in when the section first enters view */
html.thi-motion .thi-hx:not(.is-drawn) .thi-hx-art :is(path, rect) {
	stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
html.thi-motion .thi-hx.is-drawn .thi-hx-art :is(path, rect) {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1600ms cubic-bezier(0.4, 0, 0.2, 1), stroke 300ms ease, fill 300ms ease;
}
html.thi-motion .thi-hx.is-drawn .thi-hx-art .thi-hx-dash { stroke-dasharray: 2 6; }

/* Hotspots */
.thi-hx .thi-hx-spot {
	position: absolute; left: var(--x); top: var(--y);
	width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
	border: 0; border-radius: 50%; background: transparent;
	cursor: pointer; z-index: 2;
	-webkit-tap-highlight-color: transparent;
}
.thi-hx .thi-hx-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.thi-hx .thi-hx-spot::before,
.thi-hx .thi-hx-spot::after {
	content: ''; position: absolute; inset: 11px; border-radius: 50%;
}
.thi-hx .thi-hx-spot::before {
	background: var(--hx-gold); border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(26,43,69,0.28);
	transition: transform 400ms var(--thi-bounce), background-color 200ms ease;
}
.thi-hx .thi-hx-spot::after {
	border: 2px solid var(--hx-gold); opacity: 0;
}
.thi-hx .thi-hx-spot:hover,
.thi-hx .thi-hx-spot:focus { background: transparent; }
.thi-hx .thi-hx-spot:hover::before { transform: scale(1.15); }
.thi-hx .thi-hx-spot:active::before { transform: scale(0.88); transition-duration: 100ms; }
.thi-hx .thi-hx-spot[aria-pressed="true"]::before { background: var(--hx-navy); transform: scale(1.2); }
.thi-hx .thi-hx-spot:focus-visible { outline: 3px solid var(--hx-navy); outline-offset: 2px; }
/* Three short pulses on first view: says "tap me" then stops. */
html.thi-motion .thi-hx.is-drawn .thi-hx-spot[aria-pressed="false"]::after {
	animation: thi-hx-ping 1.4s ease-out calc(1.4s + var(--i, 0) * 120ms) 3;
}
@keyframes thi-hx-ping {
	0% { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.2); }
}
html.thi-motion .thi-hx:not(.is-drawn) .thi-hx-spot { opacity: 0; transform: scale(0.4); }
html.thi-motion .thi-hx.is-drawn .thi-hx-spot {
	opacity: 1; transform: none;
	transition: opacity 250ms ease-out calc(900ms + var(--i, 0) * 80ms), transform var(--thi-bounce-dur) var(--thi-bounce) calc(900ms + var(--i, 0) * 80ms);
}
/* After the intro, mode switches show/hide the spots with no stagger delay. */
html.thi-motion .thi-hx.is-ready .thi-hx-spot {
	transition: opacity 200ms ease-out, transform var(--thi-spring-dur) var(--thi-spring);
}

/* Thermal lens */
.thi-hx-thermal { display: none; }
.thi-hx-thermal-lines path { fill: none; stroke: rgba(255,240,255,0.55); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.thi-hx-lensring {
	display: none; fill: none;
	stroke: var(--hx-gold); stroke-width: 3;
	filter: drop-shadow(0 6px 14px rgba(15,30,48,0.35));
	vector-effect: non-scaling-stroke;
}
[data-mode="thermal"] .thi-hx-thermal,
[data-mode="thermal"] .thi-hx-lensring { display: inline; }
[data-mode="thermal"] .thi-hx-stage { cursor: grab; touch-action: none; }
[data-mode="thermal"] .thi-hx-stage.is-dragging { cursor: grabbing; }
html .thi-hx [data-mode="thermal"] .thi-hx-spot,
html.thi-motion .thi-hx.is-drawn [data-mode="thermal"] .thi-hx-spot { opacity: 0; pointer-events: none; transform: scale(0.4); transition: opacity 150ms ease, transform 200ms ease; }

/* Segmented control with a sliding pill */
.thi-hx-modes {
	position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
	background: rgba(26,43,69,0.07); border-radius: var(--radius-pill, 100px);
	padding: 4px; margin-bottom: 12px;
}
.thi-hx-modes-pill {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
	background: #fff; border-radius: var(--radius-pill, 100px);
	box-shadow: 0 2px 8px rgba(26,43,69,0.12);
	transition: transform 450ms var(--thi-spring);
}
[data-mode="thermal"] .thi-hx-modes-pill { transform: translateX(100%); }
.thi-hx .thi-hx-mode {
	position: relative; z-index: 1;
	min-height: 40px; padding: 8px 18px;
	background: transparent; border: 0; border-radius: var(--radius-pill, 100px);
	font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
	/* Beats the Elementor kit's global `button { text-transform: uppercase }`. */
	text-transform: none; letter-spacing: normal;
	color: var(--hx-ink-2); cursor: pointer; white-space: nowrap;
	transition: color 200ms ease;
}
.thi-hx .thi-hx-mode:hover, .thi-hx .thi-hx-mode:focus { background: transparent; color: var(--hx-navy); }
.thi-hx .thi-hx-mode[aria-pressed="true"] { color: var(--hx-navy); }
.thi-hx .thi-hx-mode:focus-visible { outline: 3px solid var(--hx-navy); outline-offset: 2px; }

.thi-hx .thi-hx-caption { font-size: 13px; color: var(--hx-ink-2); margin: 10px 4px 0; line-height: 1.5; }
.thi-hx .thi-hx-caption[hidden] { display: none; }

/* Detail card */
.thi-hx-detail {
	background: #fff; border: 1px solid var(--hx-line);
	border-radius: var(--radius-lg, 24px);
	box-shadow: var(--shadow, 0 4px 20px rgba(26,43,69,0.08));
	padding: 36px 32px 28px;
	position: sticky; top: calc(var(--header-height, 68px) + 24px);
	overflow: hidden;
}
.thi-hx-card[hidden] { display: none; }
.thi-hx-card { will-change: transform, opacity; }
.thi-hx .thi-hx-card-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--hx-gold-dark); margin: 0 0 10px;
}
.thi-hx .thi-hx-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px; line-height: 1.15; letter-spacing: -0.015em;
	color: var(--hx-navy); margin: 0 0 12px;
}
.thi-hx .thi-hx-card-desc { font-size: 15px; line-height: 1.7; color: var(--hx-ink-2); margin: 0 0 20px; }
.thi-hx .thi-hx-card ul { list-style: none; margin: 0 0 24px; padding: 0; }
.thi-hx .thi-hx-card li {
	position: relative; padding: 10px 0 10px 28px;
	border-bottom: 1px solid var(--gray-100, #f3f4f6);
	font-size: 15px; line-height: 1.5; color: var(--hx-navy);
}
.thi-hx .thi-hx-card li:last-child { border-bottom: 0; }
.thi-hx .thi-hx-card ul:not(.thi-hx-legend) li::before {
	content: ''; position: absolute; left: 2px; top: 17px;
	width: 12px; height: 7px;
	border-left: 2px solid var(--hx-gold-dark); border-bottom: 2px solid var(--hx-gold-dark);
	transform: rotate(-45deg);
}
.thi-hx .thi-hx-legend li { padding-left: 32px; }
.thi-hx-swatch {
	position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%;
}
.thi-hx-swatch.is-cold { background: radial-gradient(circle, #7fe3ff, #2f6bff); }
.thi-hx-swatch.is-hot { background: radial-gradient(circle, #fff3b0, #ffc233 40%, #ff5e1a); }
.thi-hx .thi-hx-fineprint {
	font-size: 12px; line-height: 1.6; color: var(--gray-500, #5f6773);
	margin: 0; padding-top: 16px; border-top: 1px solid var(--gray-100, #f3f4f6);
}

/* Responsive */
@media (max-width: 1024px) {
	.thi-hx-grid { grid-template-columns: 1fr; }
	.thi-hx-detail { position: static; }
}
@media (max-width: 768px) {
	.thi-hx { padding: 64px 16px; }
	.thi-hx-stagewrap { padding: 14px 10px 12px; }
	.thi-hx-detail { padding: 28px 20px 22px; }
	.thi-hx .thi-hx-card h3 { font-size: 24px; }
	.thi-hx-modes { display: grid; width: 100%; }
	.thi-hx .thi-hx-spot { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.thi-hx .thi-hx-spot::before, .thi-hx .thi-hx-spot::after { inset: 11px; }
}

/* =============================================================================
 * ROOF EXPLORER (hotspots-only House Explorer, partials/roof-explorer.php)
 * ============================================================================= */
.thi-hx .thi-hx-header p.thi-rx-eyebrow,
.thi-tc .thi-tc-header p.thi-tc-eyebrow {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--hx-gold-dark); margin: 0 0 12px;
}
.thi-rx .thi-hx-header h2 { text-wrap: balance; }
.thi-hx-art .thi-rx-flash { stroke: var(--hx-gold-dark); stroke-width: 3.4; }
.thi-hx-art .thi-rx-valley { stroke-width: 2; stroke-dasharray: 7 5; }
html.thi-motion .thi-hx.is-drawn .thi-hx-art .thi-rx-valley { stroke-dasharray: 7 5; }
.thi-hx-art .thi-rx-slots { stroke-dasharray: 10 14; stroke-width: 3; opacity: 0.55; }
html.thi-motion .thi-hx.is-drawn .thi-hx-art .thi-rx-slots { stroke-dasharray: 10 14; }
.thi-hx-zone.is-active .thi-rx-flash { stroke: var(--hx-gold); }

/* =============================================================================
 * ERA TABS (city pages): a spring-driven pill replaces the per-tab fill
 * ============================================================================= */
.hb-era-tabs[data-thi-seg] { position: relative; }
.hb-era-tabs[data-thi-seg] .thi-seg-pill {
	position: absolute; top: 0; left: 0; width: 0; height: 0;
	background: var(--navy, #1a2b45); border-radius: 7px;
	box-shadow: 0 2px 8px rgba(26,43,69,0.18);
	pointer-events: none; will-change: transform, width;
}
.hb-era-tabs[data-thi-seg] .hb-era-tab { position: relative; z-index: 1; transition: color 220ms ease, background-color 220ms ease; }
.hb-era-tabs[data-thi-seg] .hb-era-tab.active,
.hb-era-tabs[data-thi-seg] .hb-era-tab.active:hover,
.hb-era-tabs[data-thi-seg] .hb-era-tab.active:focus { background: transparent; color: var(--white, #fff); }
html.thi-motion .hb-era-tab:active { transform: scale(0.97); transition: transform 100ms ease-out; }
.hb-era-panel.active { will-change: auto; }

/* =============================================================================
 * THERMAL COMPARE (partials/thermal-compare.php)
 * ============================================================================= */
.thi-tc {
	--tc-navy: var(--navy, #1a2b45);
	--tc-deep: var(--navy-deep, #0f1e30);
	--tc-gold: var(--gold-light, #d4a843);
	--hx-gold-dark: var(--gold-light, #d4a843);
	padding: 96px 24px;
	background: var(--tc-deep);
	color: #fff;
}
.thi-tc-inner { max-width: 1000px; margin: 0 auto; }
.thi-tc .thi-tc-header { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.thi-tc .thi-tc-header h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
	color: #fff; margin: 0 0 16px; text-wrap: balance;
}
.thi-tc .thi-tc-header h2 em { color: var(--tc-gold); font-style: italic; }
.thi-tc .thi-tc-header p:not(.thi-tc-eyebrow) { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; }
.thi-tc-figure { margin: 0; }
.thi-tc-stage {
	position: relative;
	border-radius: var(--radius-lg, 24px); overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
	cursor: ew-resize; touch-action: pan-y;
	-webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.thi-tc-stage.is-dragging { cursor: grabbing; }
.thi-tc-svg { display: block; width: 100%; height: auto; }

/* Visible view */
.thi-tc-wall { fill: #f4efe6; }
.thi-tc-ceiling { fill: #fbf8f2; }
.thi-tc-base { fill: #e7dfd1; }
.thi-tc-window { fill: #dfeaf2; stroke: var(--tc-navy); stroke-width: 3; }
.thi-tc-plate { fill: #fff; stroke: var(--tc-navy); stroke-width: 2; }
.thi-tc-tub { fill: #fff; stroke: var(--tc-navy); stroke-width: 2.6; }
.thi-tc-line { fill: none; stroke: var(--tc-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thi-tc-thin { stroke-width: 1.6; }
.thi-tc-tile { fill: none; stroke: rgba(26,43,69,0.16); stroke-width: 1.2; }
.thi-tc-sill { stroke-width: 4; }

/* Infrared view */
.thi-tc-ir-lines path { fill: none; stroke: rgba(255,240,255,0.5); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* Divider + handle follow --p (set by the script) */
.thi-tc-divider {
	position: absolute; top: 0; bottom: 0; left: var(--p, 50%);
	width: 2px; margin-left: -1px; background: #fff;
	box-shadow: 0 0 0 1px rgba(15,30,48,0.15), 0 0 18px rgba(0,0,0,0.35);
	pointer-events: none;
}
.thi-tc-handle {
	position: absolute; top: 50%; left: var(--p, 50%);
	width: 48px; height: 48px; margin: -24px 0 0 -24px;
	display: grid; place-items: center;
	background: rgba(255,255,255,0.86);
	-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.9); border-radius: 50%;
	color: var(--tc-navy);
	box-shadow: 0 6px 20px rgba(15,30,48,0.3);
	transition: transform 300ms var(--thi-spring);
	outline: none;
}
.thi-tc-stage.is-dragging .thi-tc-handle { transform: scale(1.1); }
.thi-tc-handle:focus-visible { box-shadow: 0 0 0 3px var(--tc-deep), 0 0 0 6px #fff; }

.thi-tc-tag {
	position: absolute; top: 16px;
	font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 100px; pointer-events: none;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: opacity 200ms ease;
}
.thi-tc-tag.is-ir { left: 16px; background: rgba(15,30,48,0.55); color: #fff; }
.thi-tc-tag.is-vis { right: 16px; background: rgba(255,255,255,0.75); color: var(--tc-navy); }
.thi-tc-stage.is-near-left .thi-tc-tag.is-ir,
.thi-tc-stage.is-near-right .thi-tc-tag.is-vis { opacity: 0; }

/* Marks: appear once the infrared side reaches them */
.thi-tc-mark {
	position: absolute; left: var(--x); top: var(--y);
	display: flex; align-items: center; gap: 10px;
	translate: 0 -50%;
	pointer-events: none;
	opacity: 0; transform: translateY(6px) scale(0.96);
	transition: opacity 220ms ease-out, transform 450ms var(--thi-bounce);
}
.thi-tc-mark.is-shown { opacity: 1; transform: none; }
.thi-tc-mark.is-left { flex-direction: row-reverse; transform-origin: right center; translate: -100% -50%; }
.thi-tc-dot {
	flex: none; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
}
.thi-tc-mark.is-left .thi-tc-dot { margin: 0 -7px 0 0; }
.thi-tc-label {
	font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.35;
	color: var(--tc-navy); background: rgba(255,255,255,0.88);
	-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
	padding: 8px 12px; border-radius: 12px; max-width: 210px;
	box-shadow: 0 6px 18px rgba(15,30,48,0.25);
}
.thi-tc-label strong { display: block; font-weight: 700; }

.thi-tc .thi-tc-caption { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 14px 4px 0; text-align: center; }
.thi-tc .thi-tc-list { display: none; list-style: none; margin: 24px 0 0; padding: 0; }
.thi-tc .thi-tc-list li { position: relative; padding: 10px 0 10px 32px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(255,255,255,0.1); }
.thi-tc .thi-tc-list li:last-child { border-bottom: 0; }
.thi-tc-swatch { position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%; }
.thi-tc-swatch.is-cold { background: radial-gradient(circle, #9af0ff, #2f6bff); }
.thi-tc-swatch.is-hot { background: radial-gradient(circle, #fff6c2, #ffc233 40%, #ff5e1a); }

@media (max-width: 720px) {
	.thi-tc { padding: 64px 16px; }
	.thi-tc-stage { border-radius: var(--radius, 16px); }
	.thi-tc-label { display: none; }
	.thi-tc .thi-tc-list { display: block; }
	.thi-tc-tag { top: auto; bottom: 10px; font-size: 11px; padding: 5px 10px; }
	.thi-tc-tag.is-ir { left: 10px; }
	.thi-tc-tag.is-vis { right: 10px; }
	.thi-tc-handle { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-transparency: reduce) {
	.thi-tc-handle, .thi-tc-label, .thi-tc-tag.is-vis { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.thi-tc-tag.is-ir { background: var(--tc-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── REVIEWS: stars fill left to right as each card arrives ──────────── */
html.thi-motion .pe-review-grid[data-thi-stagger] .pe-review-stars span { display: inline-block; clip-path: inset(0 100% 0 0); }
html.thi-motion .pe-review-grid[data-thi-stagger].is-revealed .pe-review-stars span {
	clip-path: inset(0 0 0 0);
	transition: clip-path 520ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 70ms + 180ms);
}

/* ── STEPS (pe- service pages): rail grows down as the steps arrive ──── */
html.thi-motion .pe-svc-steps[data-thi-stagger] > li::after { transform: scaleY(0); transform-origin: top; }
html.thi-motion .pe-svc-steps[data-thi-stagger].is-revealed > li::after {
	transform: none; transition: transform 500ms var(--thi-spring) calc(var(--i, 0) * 70ms + 120ms);
}

/* ── REDUCED MOTION: show everything, move nothing ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html.thi-motion [data-thi-stagger] > *,
	html.thi-motion [data-thi-steps] :is(.sp-step-num, .process-num),
	html.thi-motion .thi-hx .thi-hx-spot {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
	html.thi-motion .sp-steps[data-thi-steps]::before { transform: none !important; }
	html.thi-motion .pe-review-stars span { clip-path: none !important; }
	html.thi-motion .pe-svc-steps > li::after { transform: none !important; }
	html.thi-motion .thi-hx .thi-hx-art :is(path, rect) { stroke-dashoffset: 0 !important; transition: none !important; }
	.thi-hx .thi-hx-spot::after { animation: none !important; }
	.thi-hx-modes-pill { transition: opacity 150ms ease !important; }
	.thi-tc-mark { transition: opacity 150ms ease !important; transform: none !important; }
	.thi-tc-handle { transition: none !important; }
}