/* =================================================================
 * Techspirit Solutions — Premium Design System
 * Brand-matched: deep navy + brand red (from the Techspirit logo) on clean
 * white. Architectural, technical, high-trust. Apply the .ts-* classes to
 * Elementor containers/widgets via Advanced > CSS Classes.
 * ================================================================= */

:root {
	/* ---- Surfaces (v2 brand palette — matches child-theme tokens.css) ---- */
	--ts-ink:        #051023;   /* v2 --ts-dark (hero / premium) */
	--ts-ink-2:      #081A3A;   /* navy graphite surface (derived from dark->navy) */
	--ts-ink-3:      #0A224C;   /* raised navy surface */
	--ts-line-dark:  rgba(255,255,255,.10);

	--ts-paper:      #FFFFFF;   /* white content cards */
	--ts-paper-2:    #F7F8FA;   /* v2 --ts-light section bg */
	--ts-paper-3:    #EDF0F4;   /* v2 --ts-muted raised */
	--ts-line:       #E2E6EB;   /* v2 --ts-line border */

	/* ---- Accent: brand red (CTA) + brand navy + blue (from logo) ---- */
	--ts-red:        #EC282D;   /* v2 --ts-red, primary CTA (white text) */
	--ts-red-600:    #C22125;   /* v2 --ts-red-dark, CTA hover */
	--ts-red-700:    #A81D21;   /* red text on light (AA strong) */
	--ts-red-300:    #F69EA0;   /* red accent on dark */
	--ts-navy:       #11387D;   /* v2 --ts-navy */
	--ts-steel:      #647EAA;   /* v2 --ts-blue (logo emblem) */
	--ts-star:       #C8973F;   /* amber, review-star glyphs only */

	/* ---- Text ---- */
	--ts-text:       #14181F;   /* v2 --ts-text */
	--ts-text-muted: #5B6470;   /* v2 --ts-text-muted (AA) */
	--ts-text-inv:   #EEF1F6;   /* off-white on dark */
	--ts-text-inv-muted: #A6AEBF;

	--ts-success:    #2E8B57;   /* subtle green, sparing use */

	/* ---- Typography ---- */
	--ts-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--ts-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

	/* ---- Z-index scale ---- */
	--ts-z-header: 50;
	--ts-z-dropdown: 80;
	--ts-z-mobilecta: 90;

	/* ---- Radius / shadow / layout ---- */
	--ts-radius-sm: 10px;
	--ts-radius:    16px;
	--ts-radius-lg: 24px;
	--ts-shadow-sm: 0 1px 2px rgba(5,16,35,.05), 0 4px 14px rgba(5,16,35,.06);
	--ts-shadow:    0 14px 38px rgba(5,16,35,.12);
	--ts-shadow-lg: 0 30px 70px rgba(5,16,35,.20);
	--ts-ring:      0 0 0 3px rgba(236,40,45,.32);

	--ts-container: 1200px;
	--ts-gap:       clamp(16px, 3vw, 32px);
}

/* ---------- Base / typography ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--ts-font-body); color: var(--ts-text); background: var(--ts-paper); -webkit-font-smoothing: antialiased; overflow-x: clip; line-height: 1.65; }
img, svg, video, iframe { max-width: 100%; }
h1,h2,h3,h4,h5,h6,.ts-display { font-family: var(--ts-font-head); letter-spacing: -.02em; line-height: 1.12; font-weight: 700; overflow-wrap: break-word; }
/* Consistent heading scale → clearer hierarchy */
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.14; text-wrap: balance; }
h3 { font-size: 1.25rem; }
p { overflow-wrap: break-word; }

.ts-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--ts-font-head); font-weight: 600; font-size: .78rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ts-text-muted);
}
.ts-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ts-navy); border-radius: 2px; }
.ts-dark .ts-eyebrow::before, .ts-hero-cine .ts-eyebrow::before { background: currentColor; opacity: .85; }
.ts-dark .ts-eyebrow { color: var(--ts-steel); }

.ts-lead { font-size: clamp(1.06rem, 1.35vw, 1.22rem); color: var(--ts-text-muted); line-height: 1.7; max-width: 64ch; }
.ts-center .ts-lead, .ts-center p { margin-inline: auto; }

/* ---------- Surfaces ---------- */
.ts-dark  { background: var(--ts-ink); color: var(--ts-text-inv); }
.ts-dark  h1, .ts-dark h2, .ts-dark h3, .ts-dark h4 { color: #fff; }
.ts-dark  p, .ts-dark li, .ts-dark .ts-lead { color: var(--ts-text-inv-muted); }
.ts-light { background: var(--ts-paper); color: var(--ts-text); }
.ts-muted-bg { background: var(--ts-paper-2); }

/* Premium glow (steel top-right, faint red bottom-left) + faint grid on dark */
.ts-hero-bg {
	position: relative;
	background:
		radial-gradient(1150px 540px at 80% -12%, rgba(100,126,170,.18), transparent 60%),
		radial-gradient(760px 480px at -6% 112%, rgba(236,40,45,.14), transparent 55%),
		var(--ts-ink);
}
.ts-hero-bg::after {
	content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
	background-image:
		linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(75% 75% at 50% 30%, #000 38%, transparent 100%);
	        mask-image: radial-gradient(75% 75% at 50% 30%, #000 38%, transparent 100%);
}

/* ---------- Buttons ---------- */
.ts-btn, a.ts-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--ts-font-head); font-weight: 600; font-size: 1rem; line-height: 1;
	padding: 1rem 1.6rem; border-radius: 12px; border: 1.5px solid transparent;
	cursor: pointer; text-decoration: none;
	transition: transform .2s cubic-bezier(.2,.6,.2,1), box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
	min-height: 50px;
}
.ts-btn:focus-visible { outline: none; box-shadow: var(--ts-ring); }
/* Clean lift on hover, gentle press on click (no 3D tilt). */
.ts-btn:hover { transform: translateY(-2px); }
.ts-btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

/* Darker brand red for button fills — white text reads at AA contrast. */
.ts-btn--primary   { background: var(--ts-red-600); color: #fff; font-weight: 700; box-shadow: 0 10px 28px rgba(194,33,37,.35); }
.ts-btn--primary:hover { background: var(--ts-red-700); color: #fff; }
.ts-btn--accent    { background: var(--ts-navy); color: #fff; }
.ts-btn--accent:hover { background: #0C1424; }

/* Ghost / secondary button: smooth red-fill fade on hover (background fades via
   the base .ts-btn transition — no pseudo-element sweep, so it never flickers). */
.ts-btn--ghost     { background: transparent; color: var(--ts-text); border-color: var(--ts-line); }
.ts-btn--ghost:hover { background: var(--ts-red); color:#fff; border-color: var(--ts-red); }
/* White outline on dark surfaces + dark split cards (fixes invisible text) */
.ts-dark .ts-btn--ghost, .ts-split .ts-btn--ghost { color:#fff; border-color: rgba(255,255,255,.5); }
.ts-dark .ts-btn--ghost:hover, .ts-split .ts-btn--ghost:hover { background: var(--ts-red); color:#fff; border-color: var(--ts-red); }

.ts-btn--call      { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.22); }
.ts-btn--call:hover { background: var(--ts-red); border-color: var(--ts-red); color:#fff; }
@media (prefers-reduced-motion: reduce) {
	.ts-btn, .ts-btn:hover, .ts-btn:active { transform: none; transition: none; }
}
.ts-btn--lg        { padding: 1.15rem 2rem; font-size: 1.05rem; }
.ts-btn--block     { width: 100%; }

/* Glossy white secondary on dark surfaces (lit pill: white gradient +
 * translucent border) — pairs with the red primary on navy heroes/CTA bands. */
.ts-btn--call,
.ts-dark .ts-btn--ghost, .ts-split .ts-btn--ghost {
	background: #fff;
	color: var(--ts-ink);
	border-color: rgba(255,255,255,.12);
	box-shadow: 0 6px 18px rgba(5,16,35,.25);
}
.ts-btn--call:hover,
.ts-dark .ts-btn--ghost:hover, .ts-split .ts-btn--ghost:hover {
	background: var(--ts-red);
	color: #fff;
	border-color: var(--ts-red);
}

/* ---------- Cards ---------- */
.ts-card {
	background: var(--ts-paper); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); padding: clamp(22px, 2.4vw, 32px);
	box-shadow: var(--ts-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	height: 100%;
}
.ts-card:hover { transform: translateY(-4px); box-shadow: var(--ts-shadow); border-color: transparent; }
.ts-dark .ts-card { background: var(--ts-ink-2); border-color: var(--ts-line-dark); }
.ts-dark .ts-card:hover { border-color: rgba(240,138,151,.5); }

.ts-card__icon {
	width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center;
	background: var(--ts-paper-3); color: var(--ts-navy); margin-bottom: 1.1rem;
}
.ts-dark .ts-card__icon { background: rgba(255,255,255,.07); color: var(--ts-steel); }
.ts-card__icon svg { width: 27px; height: 27px; }
.ts-card h3 { font-size: 1.22rem; margin: 0 0 .45rem; }
.ts-card p  { margin: 0 0 1rem; color: var(--ts-text-muted); line-height: 1.6; }
.ts-card a.ts-arrow { font-weight: 600; color: var(--ts-navy); text-decoration: none; }
.ts-dark .ts-card a.ts-arrow, .ts-dark .ts-arrow { color: var(--ts-steel); }
.ts-card a.ts-arrow::after { content: " →"; }

/* Big split cards */
.ts-split {
	position: relative; overflow: hidden; border-radius: var(--ts-radius-lg);
	min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(24px, 3vw, 42px); color: #fff; isolation: isolate;
	border: 1px solid var(--ts-line-dark);
}
.ts-split::before {
	content:""; position:absolute; inset:0; z-index:-1;
	background: linear-gradient(180deg, rgba(5,16,35,.10) 0%, rgba(5,16,35,.90) 100%);
}
.ts-split img.ts-split__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.ts-split h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 .4rem; color:#fff; }
.ts-split p  { color: rgba(255,255,255,.86); margin: 0 0 1.2rem; max-width: 46ch; }
.ts-split { transition: transform .25s ease, box-shadow .25s ease; }
.ts-split:hover { transform: translateY(-4px); box-shadow: var(--ts-shadow-lg); }
.ts-split:hover .ts-btn--primary { background: var(--ts-red-700); }

/* ---------- Process stepper — numbered dots on a connected rail.
 * The rail fills and dots activate in sequence when scrolled into view
 * (.is-in added by the small IO script in the page shell). ---------- */
.ts-steps { position: relative; }
.ts-steps__rail { position:absolute; left:0; right:0; top:22px; height:3px; border-radius:2px; background: var(--ts-paper-3); overflow:hidden; }
.ts-steps__fill { display:block; width:100%; height:100%; border-radius:2px; background: var(--ts-navy); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.4,0,.2,1) .15s; }
/* Animation states apply only once the script marks the element ([data-anim]) —
 * without JS everything renders in its final, visible state. */
.ts-steps[data-anim]:not(.is-in) .ts-steps__fill { transform: scaleX(0); }
.ts-steps__list { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap: clamp(18px, 2.5vw, 28px); position:relative; }
.ts-steps__item { position:relative; }
.ts-steps__dot {
	display:inline-flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:50%;
	background: var(--ts-navy); border:2px solid var(--ts-navy);
	font-family:var(--ts-font-head); font-weight:800; font-size:.95rem; color:#fff;
	position:relative; z-index:1;
	transition: background .35s ease, border-color .35s ease, color .35s ease;
	transition-delay: calc(var(--step-i, 0) * 160ms + .35s);
}
.ts-steps[data-anim]:not(.is-in) .ts-steps__dot { background:#fff; border-color: var(--ts-line); color: var(--ts-text-muted); }
.ts-steps__item h3 { margin:14px 0 .35rem; font-size:1.15rem; }
.ts-steps__item p { margin:0; color: var(--ts-text-muted); font-size:.95rem; }
.ts-steps__item h3, .ts-steps__item p { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--step-i, 0) * 160ms + .45s); }
.ts-steps[data-anim]:not(.is-in) .ts-steps__item h3, .ts-steps[data-anim]:not(.is-in) .ts-steps__item p { opacity:0; transform: translateY(10px); }
@media (max-width: 767px) {
	.ts-steps__list { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:24px; }
	.ts-steps__rail { left:23px; right:auto; top:0; bottom:0; width:3px; height:auto; }
	.ts-steps__fill { transform-origin: 50% 0; }
	.ts-steps[data-anim]:not(.is-in) .ts-steps__fill { transform: scaleY(0); }
	.ts-steps__item { padding-left:68px; }
	.ts-steps__dot { position:absolute; left:0; top:0; }
	.ts-steps__item h3 { margin-top:10px; }
}
@media (prefers-reduced-motion: reduce) {
	.ts-steps__fill, .ts-steps__dot, .ts-steps__item h3, .ts-steps__item p { transition:none; }
	.ts-steps[data-anim]:not(.is-in) .ts-steps__fill { transform:none; }
	.ts-steps[data-anim]:not(.is-in) .ts-steps__dot { background: var(--ts-navy); border-color: var(--ts-navy); color:#fff; }
	.ts-steps[data-anim]:not(.is-in) .ts-steps__item h3, .ts-steps[data-anim]:not(.is-in) .ts-steps__item p { opacity:1; transform:none; }
}

/* Oversized display type — fork doors + section statements (v2 system) */
.ts-display {
	font-family: var(--ts-font-head);
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.02em;
	text-transform: uppercase;
	display: block;
	margin: 0 0 .35rem;
}

/* The fork — two cinematic photographic doors (YOUR HOME / YOUR BUSINESS).
 * The whole door is the link; media zooms and the arrow slides on hover. */
.ts-fork { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 900px) { .ts-fork { grid-template-columns: 1fr 1fr; } }
.ts-fork__door {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 52vh, 560px);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--ts-ink);
	isolation: isolate;
}
.ts-fork__media { position: absolute; inset: 0; z-index: -2; transition: transform .5s ease; }
.ts-fork__media img, .ts-fork__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* client-set card background photo/video */
.ts-fork .ph span { display: none; } /* placeholder label stays out of the composition */
.ts-fork__door::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(5,16,35,.85) 0%, rgba(5,16,35,.30) 55%, rgba(5,16,35,.15) 100%);
}
.ts-fork__door:hover .ts-fork__media,
.ts-fork__door:focus-visible .ts-fork__media { transform: scale(1.04); }
.ts-fork__inner { display: block; padding: clamp(24px, 4vw, 44px); width: 100%; }
.ts-fork__inner .ts-eyebrow { color: rgba(255,255,255,.78); }
.ts-fork__inner .ts-eyebrow::before { background: currentColor; opacity: .85; }
.ts-fork__inner .ts-display { color: #fff; }
.ts-fork__sub { display: block; font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 34ch; }
.ts-fork__arrow { display: inline-block; margin-top: 14px; font-size: 1.6rem; line-height: 1; transition: transform .25s ease; }
.ts-fork__door:hover .ts-fork__arrow,
.ts-fork__door:focus-visible .ts-fork__arrow { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) {
	.ts-fork__media, .ts-fork__arrow { transition: none; }
	.ts-fork__door:hover .ts-fork__media { transform: none; }
}
.ts-split:hover .ts-btn--ghost { background: var(--ts-red); color:#fff; border-color: var(--ts-red); }
.ts-split:hover .ts-split__play > span { background: rgba(100,126,170,.55); border-color: var(--ts-steel); }
@media (prefers-reduced-motion: reduce) { .ts-split:hover { transform: none; } }

/* ---------- Trust strip ---------- */
.ts-trust { display:flex; flex-wrap:nowrap; gap: clamp(10px, 1vw, 16px); align-items:center; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.ts-trust::-webkit-scrollbar { display:none; }
.ts-trust__item { display:flex; align-items:center; gap:.42rem; font-weight:600; color: var(--ts-text-muted); font-size:.82rem; white-space:nowrap; flex:none; }
.ts-dark .ts-trust__item { color: var(--ts-text-inv-muted); }
.ts-trust__item svg { width: 18px; height: 18px; color: var(--ts-navy); flex: none; }
.ts-dark .ts-trust__item svg { color: var(--ts-steel); }
/* Below ~1200px the single line no longer fits the container — wrap naturally (2-up on tablets, stacked on phones). */
@media (max-width: 1200px) { .ts-trust { flex-wrap:wrap; overflow-x:visible; gap: 12px 22px; } .ts-trust__item { flex:0 1 auto; min-width:0; white-space:normal; font-size:.9rem; } }

/* ---------- Layout container + grids ---------- */
.ts-container { width: 100%; max-width: var(--ts-container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 30px); }
.ts-container--wide { max-width: 1320px; }
.ts-container--narrow { max-width: 880px; }

.ts-grid-2, .ts-grid-3, .ts-grid-4 { display: grid; gap: var(--ts-gap); }
.ts-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ts-split-2 { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.ts-split-2--media-first { display:grid; gap: clamp(28px,4vw,64px); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items:center; }
.ts-split-2 > *, .ts-split-2--media-first > * { min-width: 0; }

@media (max-width: 980px) {
	.ts-grid-3, .ts-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ts-split-2, .ts-split-2--media-first { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .ts-grid-2, .ts-grid-3, .ts-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hero ---------- */
.ts-hero { position: relative; z-index: 1; }
.ts-hero__inner { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; padding-block: clamp(72px, 9vw, 130px); }
.ts-hero__inner > * { min-width: 0; }
.ts-hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin: 1rem 0 1.25rem; letter-spacing: -.03em; }
.ts-hero .ts-lead { max-width: 54ch; color: var(--ts-text-inv-muted); }
@media (max-width: 900px) { .ts-hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: clamp(48px, 9vw, 80px); } }

/* ---------- Lifestyle hero (Control4-led): content left, media frame right ---------- */
.ts-hero-cine { position: relative; overflow: hidden; }
.ts-hero-cine__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 4vw, 56px); align-items: center; padding-block: clamp(52px, 7vw, 92px); }
.ts-hero-cine__grid > * { min-width: 0; }
.ts-hero-cine__content { display: flex; flex-direction: column; justify-content: center; }
.ts-hero-cine .ts-eyebrow { color: var(--ts-steel); }
.ts-hero-cine h1 { color:#fff; font-size: clamp(2.2rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing:-.028em; margin: 1rem 0 1.15rem; }
.ts-hero-cine .ts-lead { color: rgba(238,241,246,.86); max-width: 52ch; font-size: clamp(1rem, 1.2vw, 1.12rem); }

/* Right-side media placeholder — defined, balanced height; drop an image/video here */
.ts-hero-cine__frame { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; margin-inline: auto; border-radius: var(--ts-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--ts-shadow-lg); background: var(--ts-ink-2); }
.ts-hero-cine__frame > .ph, .ts-hero-cine__frame > img, .ts-hero-cine__frame > video, .ts-hero-cine__frame > iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ts-hero-cine__play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.ts-hero-cine__play span { width:76px; height:76px; border-radius:50%; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); display:grid; place-items:center; backdrop-filter: blur(4px); }
.ts-hero-cine__play svg { width:26px; height:26px; color:#fff; margin-left:3px; }
.ts-hero-cine__label { position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.62); }
@media (max-width: 900px) {
	.ts-hero-cine__grid { grid-template-columns: minmax(0, 1fr); padding-block: clamp(44px, 11vw, 72px); }
	.ts-hero-cine__content { justify-content: flex-start; }
	.ts-hero-cine__frame { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/* Split cards: image/video placeholder affordance (matches the hero frame) */
.ts-split__play { position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); z-index:0; display:flex; flex-direction:column; align-items:center; gap:.55rem; pointer-events:none; }
.ts-split__play > span { width:58px; height:58px; border-radius:50%; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.30); display:grid; place-items:center; backdrop-filter: blur(4px); }
.ts-split__play svg { width:21px; height:21px; color:#fff; margin-left:2px; }
.ts-split__play small { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.62); }

/* One-touch "scene" chips */
/* Hero fold line — trust row lives inside the dark hero, under a hairline,
 * pulled up toward the content with breathing room below before the section ends. */
.ts-hero-cine__grid:has(+ .ts-hero-cine__fold) { padding-bottom: clamp(22px, 3vw, 34px); }
.ts-hero-cine__fold { padding-top: clamp(18px, 2.5vw, 26px); padding-bottom: clamp(30px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.10); }

.ts-scenes { display:flex; flex-wrap:wrap; gap:.5rem; margin: 1.5rem 0 1.9rem; }
.ts-scene { display:inline-flex; align-items:center; gap:.45rem; padding:.52rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color:#fff; font-size:.85rem; font-weight:600; }
.ts-scene svg { width:15px; height:15px; color: var(--ts-steel); }
.ts-scene--more { background: transparent; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }

/* ---------- Section helpers ---------- */
.ts-section { padding-block: clamp(52px, 6.5vw, 100px); }
.ts-section--tight { padding-block: clamp(28px, 3.5vw, 48px); }
.ts-kicker-row { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom: clamp(26px, 3.5vw, 44px); }
/* Eyebrow + heading get consistent rhythm */
.ts-eyebrow { margin-bottom: .9rem; }
.ts-section h2 + .ts-lead, .ts-section h2 + p { margin-top: .9rem; }
.ts-feature-list { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.ts-feature-list li { position:relative; padding-left: 2rem; color: var(--ts-text-muted); line-height:1.6; }
.ts-dark .ts-feature-list li { color: var(--ts-text-inv-muted); }
.ts-feature-list li::before {
	content:""; position:absolute; left:0; top:.1rem; width:21px; height:21px; border-radius:50%;
	background: rgba(17,56,125,.10);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2311387D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center;
}
.ts-dark .ts-feature-list li::before {
	background-color: rgba(255,255,255,.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647EAA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Stats / numbered steps ---------- */
.ts-stat { text-align:center; }
.ts-stat__num { font-family: var(--ts-font-head); font-weight:800; font-size: clamp(1.9rem, 3.5vw, 2.7rem); color: var(--ts-navy); line-height:1; }
.ts-dark .ts-stat__num { color: #fff; }
.ts-stat__label { color: var(--ts-text-muted); font-size:.95rem; margin-top:.35rem; }
.ts-dark .ts-stat__label { color: var(--ts-text-inv-muted); }

/* ---------- Before / after diagram ---------- */
.ts-ba { display:grid; gap: var(--ts-gap); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items:stretch; }
.ts-ba__col { border-radius: var(--ts-radius); padding: clamp(20px,2.4vw,30px); border:1px solid var(--ts-line); background: var(--ts-paper); }
.ts-ba__col--before { background: var(--ts-paper-2); }
.ts-ba__col--after { background: var(--ts-ink); color:#fff; border-color: var(--ts-line-dark); }
.ts-ba__col h3 { margin:0 0 1rem; font-size:1.15rem; }
.ts-ba__col--after h3 { color:#fff; }
.ts-ba__list { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.ts-ba__list li { display:flex; gap:.6rem; align-items:flex-start; color: var(--ts-text-muted); line-height:1.5; }
.ts-ba__col--after .ts-ba__list li { color: var(--ts-text-inv-muted); }
.ts-ba__list li svg { width:18px; height:18px; flex:none; margin-top:.15rem; }
.ts-ba__col--before .ts-ba__list li svg { color: var(--ts-red); }
.ts-ba__col--after .ts-ba__list li svg { color: #46C98A; }
.ts-ba__arrow { display:grid; place-items:center; color: var(--ts-navy); }
.ts-ba__arrow svg { width:34px; height:34px; }
@media (max-width: 860px){ .ts-ba { grid-template-columns: 1fr; } .ts-ba__arrow { transform: rotate(90deg); } }

/* ---------- Media frame (prevents CLS) ---------- */
.ts-media { position:relative; border-radius: var(--ts-radius); overflow:hidden; background: var(--ts-paper-3); aspect-ratio: 16 / 10; }
.ts-media img, .ts-media video, .ts-media iframe { width:100%; height:100%; object-fit:cover; display:block; }
.ts-media--square { aspect-ratio: 1/1; } .ts-media--portrait { aspect-ratio: 3/4; }
/* Premium framed placeholder (hero + feature media) — depth + play/label affordance to match the homepage. */
.ts-media--frame { background: var(--ts-ink-2); box-shadow: var(--ts-shadow-lg); }
.ts-media--frame > .ph { position:absolute; inset:0; width:100%; height:100%; }
.ts-media__badge { position:absolute; top:14px; left:14px; background: rgba(5,16,35,.80); color:#fff; font-size:.76rem; font-weight:600; padding:.32rem .7rem; border-radius:999px; letter-spacing:.02em; }

/* ---------- Header navigation dropdowns (Hello Elementor header) ---------- */
/* Scoped to .site-header so footer / in-content menus are unaffected. The lean
   top bar stays short; each parent reveals its services on hover/focus. */
.site-header .menu-item-has-children { position: relative; }
.site-header .menu-item-has-children > a::after { content: "▾"; font-size: .7em; opacity: .55; margin-left: .35em; }
.site-header ul.sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: .5rem;
	list-style: none; background: #fff; border: 1px solid var(--ts-line);
	border-radius: 14px; box-shadow: var(--ts-shadow); display: none; z-index: 80;
}
.site-header .menu-item-has-children:hover > ul.sub-menu,
.site-header .menu-item-has-children:focus-within > ul.sub-menu { display: block; }
.site-header ul.sub-menu li { margin: 0; }
.site-header ul.sub-menu a { display: block; padding: .55rem .75rem; border-radius: 9px; text-decoration: none; color: var(--ts-text); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.site-header ul.sub-menu a:hover { background: var(--ts-paper-2); color: var(--ts-navy); }
/* On small screens let the theme's mobile menu stack submenus (no absolute pop-out) */
@media (max-width: 1024px) {
	.site-header ul.sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: 1rem; min-width: 0; }
	.site-header .menu-item-has-children > a::after { content: ""; }
}

/* ---------- Sticky mobile CTA bar ---------- */
.ts-mobile-cta {
	position: fixed; left:0; right:0; bottom:0; z-index: 9990;
	display: none; gap:.6rem; padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
	background: rgba(5,16,35,.97); backdrop-filter: blur(8px);
	border-top: 1px solid var(--ts-line-dark); box-shadow: 0 -8px 24px rgba(0,0,0,.28);
}
.ts-mobile-cta .ts-btn { flex:1; padding:.9rem .5rem; font-size:.96rem; min-height:52px; }
@media (max-width: 1024px) {
	.ts-mobile-cta { display: flex; }
	body.ts-has-mobile-cta { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ---------- Phone pill ---------- */
.ts-phone-pill { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color: var(--ts-text); text-decoration:none; }
.ts-phone-pill svg { width:18px; height:18px; color: var(--ts-navy); }
.ts-dark .ts-phone-pill { color:#fff; } .ts-dark .ts-phone-pill svg { color: var(--ts-steel); }

/* ---------- Breadcrumbs ---------- */
.ts-breadcrumbs { font-size:.85rem; color: var(--ts-text-muted); }
.ts-breadcrumbs a { color: var(--ts-text-muted); text-decoration:none; }
.ts-breadcrumbs a:hover { color: var(--ts-navy); }
.ts-breadcrumbs span[aria-current] { color: var(--ts-text); font-weight:600; }
.ts-dark .ts-breadcrumbs, .ts-dark .ts-breadcrumbs a { color: var(--ts-text-inv-muted); }

/* ---------- FAQ accordion ---------- */
.ts-faq { display:grid; gap:.7rem; }
.ts-faq__item { border:1px solid var(--ts-line); border-radius: var(--ts-radius-sm); background: var(--ts-paper); overflow:hidden; }
.ts-dark .ts-faq__item { background: var(--ts-ink-2); border-color: var(--ts-line-dark); }
.ts-faq__q {
	width:100%; text-align:left; background:none; border:0; cursor:pointer;
	font-family: var(--ts-font-head); font-weight:600; font-size:1.06rem; color:inherit;
	padding: 1.1rem 3rem 1.1rem 1.2rem; position:relative; line-height:1.4;
}
.ts-faq__q:focus-visible { outline:none; box-shadow: var(--ts-ring) inset; }
.ts-faq__q::after { content:"+"; position:absolute; right:1.15rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color: var(--ts-navy); transition: transform .2s ease; }
.ts-dark .ts-faq__q::after { color: var(--ts-steel); }
.ts-faq__item[open] .ts-faq__q::after, .ts-faq__q[aria-expanded="true"]::after { content:"–"; }
.ts-faq__a { padding: 0 1.2rem 1.2rem; color: var(--ts-text-muted); line-height:1.65; }
.ts-dark .ts-faq__a { color: var(--ts-text-inv-muted); }

/* ---------- Project grid ---------- */
.ts-grid { display:grid; gap: var(--ts-gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ts-project { border-radius: var(--ts-radius); overflow:hidden; border:1px solid var(--ts-line); background: var(--ts-paper); box-shadow: var(--ts-shadow-sm); transition: transform .2s, box-shadow .2s; }
.ts-project:hover { transform: translateY(-4px); box-shadow: var(--ts-shadow); }
.ts-project__body { padding: 1.1rem 1.25rem 1.3rem; }
.ts-project__meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.ts-tag { font-size:.72rem; font-weight:600; letter-spacing:.03em; padding:.28rem .65rem; border-radius:999px; background: var(--ts-paper-3); color: var(--ts-navy); text-transform:uppercase; }
.ts-project h3 { font-size:1.14rem; margin:.1rem 0 .45rem; }
.ts-project p { color: var(--ts-text-muted); font-size:.95rem; margin:0; line-height:1.55; }

/* Filters */
.ts-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: var(--ts-gap); }
.ts-filter { font-family: var(--ts-font-head); font-weight:600; font-size:.9rem; padding:.55rem 1.05rem; border-radius:999px; border:1px solid var(--ts-line); background:var(--ts-paper); color: var(--ts-text-muted); cursor:pointer; transition: all .15s; }
.ts-filter[aria-pressed="true"], .ts-filter:hover { background: var(--ts-navy); color:#fff; border-color: var(--ts-navy); }
.ts-project.is-hidden { display:none; }

/* ---------- Testimonials ---------- */
.ts-quote { background: var(--ts-paper); border:1px solid var(--ts-line); border-radius: var(--ts-radius); padding: clamp(22px,2.4vw,30px); height:100%; }
.ts-dark .ts-quote { background: var(--ts-ink-2); border-color: var(--ts-line-dark); }
.ts-quote__stars { color: var(--ts-star); letter-spacing:2px; margin-bottom:.6rem; }
.ts-quote blockquote { margin:0 0 1rem; font-size:1.08rem; line-height:1.6; }
.ts-quote__author { font-weight:700; } .ts-quote__role { color: var(--ts-text-muted); font-size:.9rem; }

/* Placeholder note block */
.ts-placeholder { border:2px dashed rgba(236,40,45,.45); border-radius: var(--ts-radius); background: rgba(236,40,45,.05); padding: 1.4rem; color: var(--ts-text-muted); font-size:.92rem; text-align:center; }

/* Certification / brand badge tiles (admin replaces with approved logos) */
.ts-badges { display:grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items:center; margin-top: clamp(22px, 3vw, 38px); }
.ts-badge { aspect-ratio: 3 / 2; border:1px dashed var(--ts-line); border-radius: var(--ts-radius); display:grid; place-items:center; background:#fff; color: var(--ts-text-muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; text-align:center; padding:1rem; transition: border-color .2s, color .2s; }
.ts-badge:hover { border-color: var(--ts-navy); color: var(--ts-navy); }
/* Real brand logos (from [ts_logo_strip]) fit inside the badge with a clean
   solid border instead of the dashed placeholder cue. */
.ts-badge--logo { border-style: solid; border-color: var(--ts-line); }
.ts-badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ts-dark .ts-badge { background: var(--ts-ink-2); border-color: var(--ts-line-dark); color: var(--ts-text-inv-muted); }

/* ---------- Lead form ---------- */
.ts-form { display:grid; gap: 1rem; }
.ts-form .ts-field { display:grid; gap:.35rem; }
.ts-form .ts-field--row { grid-template-columns: 1fr 1fr; gap:1rem; display:grid; }
.ts-form label { font-weight:600; font-size:.92rem; }
.ts-form .ts-req { color: var(--ts-red); }
.ts-form input, .ts-form select, .ts-form textarea {
	width:100%; padding:.85rem .95rem; border:1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	font: inherit; background:#fff; color: var(--ts-text); min-height:48px;
}
.ts-form textarea { min-height: 120px; resize: vertical; }
.ts-form input:focus, .ts-form select:focus, .ts-form textarea:focus { outline:none; border-color: var(--ts-red); box-shadow: var(--ts-ring); }
.ts-form .ts-consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color: var(--ts-text-muted); }
.ts-dark .ts-form .ts-consent { color: var(--ts-text-inv-muted); }
.ts-form .ts-consent input { width:auto; min-height:auto; margin-top:.2rem; }
.ts-form__hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.ts-form__note { font-size:.82rem; color: var(--ts-text-muted); }
.ts-form__msg { padding:.9rem 1.1rem; border-radius: var(--ts-radius-sm); font-weight:600; }
.ts-form__msg--ok  { background: rgba(46,139,87,.10); color: var(--ts-success); border:1px solid rgba(46,139,87,.3); }
.ts-form__msg--err { background: rgba(236,40,45,.10); color: var(--ts-red-700); border:1px solid rgba(236,40,45,.32); }

/* ---------- Contact info ---------- */
.ts-contact-row { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.1rem; }
.ts-contact-row svg { width:22px; height:22px; color: var(--ts-navy); flex:none; margin-top:.15rem; }
.ts-dark .ts-contact-row svg { color: var(--ts-steel); }
.ts-contact-row a { color:inherit; text-decoration:none; font-weight:600; }

/* ---------- Utilities ---------- */
.ts-center { text-align:center; } .ts-mx-auto { margin-inline:auto; }
.ts-maxw-720 { max-width: 720px; } .ts-maxw-820 { max-width: 820px; }
.ts-mt-1 { margin-top:.5rem; } .ts-mt-2 { margin-top:1rem; } .ts-mt-3 { margin-top:1.6rem; }
.ts-btn-row { display:flex; flex-wrap:wrap; gap:.8rem; }
.ts-visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ---------- Stats row (Why choose us) ---------- */
.ts-stats { display:grid; gap: clamp(16px,2.5vw,28px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align:center; }
/* Architectural quadrant — reasons grid divided by hairlines (no card boxes).
 * On reveal the dividing rules DRAW themselves (vertical sweeps down,
 * horizontal sweeps across), then cells fade up in sequence. The [data-anim]
 * marker is added by the reveal script — without JS everything is visible. */
.ts-quad {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--ts-radius);
	overflow: hidden;
}
.ts-quad::before { /* vertical rule */
	content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
	background: rgba(255,255,255,.12);
	transform-origin: 50% 0;
	transition: transform .9s cubic-bezier(.4,0,.2,1) .1s;
}
.ts-quad::after { /* horizontal rule */
	content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
	background: rgba(255,255,255,.12);
	transform-origin: 0 50%;
	transition: transform .9s cubic-bezier(.4,0,.2,1) .35s;
}
.ts-quad[data-anim]:not(.is-in)::before { transform: scaleY(0); }
.ts-quad[data-anim]:not(.is-in)::after { transform: scaleX(0); }
.ts-quad__cell { padding: clamp(24px, 3vw, 38px); }
.ts-quad__cell svg { width: 22px; height: 22px; color: var(--ts-steel); }
.ts-quad__cell h3 { font-size: 1.12rem; margin: .7rem 0 .4rem; color: #fff; }
.ts-quad__cell p { margin: 0; color: var(--ts-text-inv-muted); font-size: .95rem; line-height: 1.6; max-width: 44ch; }
.ts-quad__cell > * { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--q-i, 0) * 140ms + .55s); }
.ts-quad[data-anim]:not(.is-in) .ts-quad__cell > * { opacity: 0; transform: translateY(10px); }
@media (max-width: 700px) {
	.ts-quad { grid-template-columns: 1fr; }
	.ts-quad::before, .ts-quad::after { display: none; } /* cross doesn't apply stacked */
	.ts-quad__cell + .ts-quad__cell { border-top: 1px solid rgba(255,255,255,.12); }
}
@media (prefers-reduced-motion: reduce) {
	.ts-quad::before, .ts-quad::after, .ts-quad__cell > * { transition: none; }
	.ts-quad[data-anim]:not(.is-in)::before { transform: none; }
	.ts-quad[data-anim]:not(.is-in)::after { transform: none; }
	.ts-quad[data-anim]:not(.is-in) .ts-quad__cell > * { opacity: 1; transform: none; }
}

/* Hairline divider sets the stats row apart from the cards above (dark sections). */
.ts-dark .ts-stats { border-top: 1px solid rgba(255,255,255,.10); margin-top: clamp(30px, 4.5vw, 48px); padding-top: clamp(26px, 4vw, 40px); }
.ts-stat-item b { display:block; font-family: var(--ts-font-head); font-weight:800; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ts-navy); line-height:1; letter-spacing:-.02em; }
.ts-dark .ts-stat-item b { color: #fff; }
.ts-stat-item span { display:block; margin-top:.45rem; color: var(--ts-text-muted); font-size:.92rem; }
.ts-dark .ts-stat-item span { color: var(--ts-text-inv-muted); }

/* ---------- Generic media play overlay (clean-install / project video) ---------- */
.ts-media__play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.ts-media__play > span { width:66px; height:66px; border-radius:50%; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.36); display:grid; place-items:center; backdrop-filter: blur(4px); }
.ts-media__play svg { width:24px; height:24px; color:#fff; margin-left:2px; }
.ts-media__label { position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); }

/* ---------- Partner / brand logo strip (under hero) ---------- */
.ts-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(14px, 3vw, 40px); }
.ts-logos__item { height:46px; min-width:104px; padding:0 14px; border:1px dashed var(--ts-line); border-radius:10px; display:grid; place-items:center; color: var(--ts-text-muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; background:#fff; }
.ts-dark .ts-logos__item { background: var(--ts-ink-2); border-color: var(--ts-line-dark); color: var(--ts-text-inv-muted); }

/* ---------- Modal (consultation) ---------- */
.ts-modal { position: fixed; inset:0; z-index: 1000; display:none; align-items:center; justify-content:center; padding: 1.2rem; }
.ts-modal.is-open { display:flex; }
.ts-modal__overlay { position:absolute; inset:0; background: rgba(5,16,35,.64); backdrop-filter: blur(3px); }
.ts-modal__dialog { position:relative; z-index:1; width:100%; max-width: 640px; max-height: 90vh; overflow:auto; background:#fff; color: var(--ts-text); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg); padding: clamp(22px, 3vw, 38px); }
.ts-modal__close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--ts-line); background:#fff; cursor:pointer; display:grid; place-items:center; color: var(--ts-text); }
.ts-modal__close:hover { background: var(--ts-paper-2); color: var(--ts-navy); }
.ts-modal__close svg { width:18px; height:18px; }
.ts-modal__dialog h3 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin:0 0 .35rem; }
.ts-modal__dialog .ts-lead { margin: 0 0 1.2rem; }
@media (prefers-reduced-motion: reduce) { .ts-modal__overlay { backdrop-filter:none; } }

/* Consultation-type chips */
.ts-choice { display:flex; flex-wrap:wrap; gap:.5rem; }
.ts-choice label { border:1px solid var(--ts-line); border-radius:999px; padding:.5rem .9rem; font-size:.88rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.ts-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.ts-choice label:has(input:checked) { border-color: var(--ts-red); background: rgba(236,40,45,.08); color: var(--ts-red-700); }

/* Subtle reveal (opt-in via .ts-reveal; safe default visible) */
.ts-reveal { opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.ts-reveal.is-in { opacity:1; transform:none; }

/* ---------- Site footer ---------- */
/* Footer is a distinct panel (step-lighter navy + hairline edge) so the dark
 * CTA band above it doesn't merge into one continuous wall. */
.ts-foot { background: var(--ts-ink-2); border-top: 1px solid rgba(255,255,255,.10); color: var(--ts-text-inv-muted); }
/* CTA bands (#quote) run tighter than full sections — less dark realestate. */
section#quote.ts-section { padding-block: clamp(56px, 7vw, 84px); }
.ts-foot a { color: var(--ts-text-inv-muted); text-decoration: none; transition: color .15s ease; }
.ts-foot a:hover { color: #fff; }
.ts-foot__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.6fr; gap: clamp(28px, 3vw, 48px); padding-block: clamp(44px, 6vw, 68px); }
.ts-foot__main > * { min-width: 0; } /* allow tracks to shrink so long tokens (email) wrap instead of overflowing */
.ts-foot__brand { max-width: 34ch; }
.ts-foot__logo { display: inline-block; font-family: var(--ts-font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; }
.ts-foot__logo span { color: var(--ts-steel); }
.ts-foot__about { margin: .9rem 0 0; font-size: .92rem; line-height: 1.65; }
.ts-foot__facts { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ts-foot__facts li { font-size: .9rem; }
.ts-foot__facts b { color: #fff; font-weight: 700; }
.ts-foot__col h4 { color: var(--ts-steel); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1rem; }
.ts-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ts-foot__col ul a { font-size: .92rem; }
.ts-foot__contact address { font-style: normal; display: grid; gap: .7rem; }
.ts-foot__line { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; font-size: .92rem; line-height: 1.5; }
.ts-foot__line span { overflow-wrap: anywhere; }
/* The email is one unbreakable token — keep it on a single line (never split
   mid-address like "…solutions.c a"); the wider contact column gives it room. */
.ts-foot__line[href^="mailto:"] span { overflow-wrap: normal; white-space: nowrap; font-size: .86rem; }
/* Footer "follow us" social icons — settings-driven (Social profiles). */
.ts-foot__socials { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.ts-foot__social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ts-line-dark); color: var(--ts-steel); transition: color .2s, border-color .2s, background .2s; }
.ts-foot__social:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.ts-foot__social:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ts-foot__line svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ts-steel); }
.ts-foot__cta { display: inline-flex; margin-top: 1.1rem; padding: .65rem 1.1rem; min-height: auto; }
.ts-foot__bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center;
	padding-block: 18px; border-top: 1px solid var(--ts-line-dark); font-size: .85rem; }
.ts-foot__bottom p { margin: 0; }
.ts-foot__legal a { white-space: nowrap; }
/* Lighter focus ring for AA contrast against the navy footer (red on ink is only ~3:1). */
.ts-foot :where(a, button):focus-visible { outline-color: #fff; }
@media (max-width: 960px) {
	.ts-foot__main { grid-template-columns: 1fr 1fr; }
	.ts-foot__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
	/* Compact 2-up grid on phones — brand full-width on top, the three link
	   columns tiled two-across, and the contact + CTA as a centered full-width
	   strip so the button sits in the middle (not squished in a side column). */
	.ts-foot__main { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
	.ts-foot__bottom { justify-content: flex-start; }
	.ts-foot__contact { grid-column: 1 / -1; text-align: center; margin-top: .5rem; padding-top: 1.6rem; border-top: 1px solid var(--ts-line-dark); }
	.ts-foot__contact address { align-items: center; }
	.ts-foot__line { justify-content: center; text-align: left; }
	.ts-foot__cta { width: auto; margin-top: 1.15rem; }
}

/* ---------- Accessibility / motion ---------- */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ts-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.ts-btn:hover, .ts-card:hover, .ts-project:hover { transform:none; }
	.ts-reveal { opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
	.ts-form .ts-field--row { grid-template-columns: 1fr; }
	.ts-kicker-row { flex-direction:column; align-items:flex-start; }
}

/* ---------- Fork doors: premium interactive motion (2026-07) ----------
 * Cursor-tracking spotlight + subtle tilt (JS sets --mx/--my/--fx/--fy),
 * hover lift + shadow, deeper media zoom, and the arrow becomes a circular
 * fill button (warm red on residential, cool blue on commercial). Degrades to
 * plain hover without JS, and goes fully static under prefers-reduced-motion. */
.ts-fork__door {
	--accent: var(--ts-blue, #647EAA);
	transform: perspective(1100px) rotateX(var(--fy, 0deg)) rotateY(var(--fx, 0deg)) translateY(var(--flift, 0));
	transition: transform .2s ease, box-shadow .35s ease;
	will-change: transform;
}
.ts-fork__door:has(.ph--warm) { --accent: var(--ts-red, #EC282D); }
.ts-fork__door:hover,
.ts-fork__door:focus-visible { --flift: -6px; box-shadow: 0 32px 64px -24px rgba(5, 16, 35, .7); }
.ts-fork__door::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), transparent 62%);
	opacity: 0;
	transition: opacity .3s ease;
}
.ts-fork__door:hover::before,
.ts-fork__door:focus-visible::before { opacity: 1; }
.ts-fork__inner { position: relative; z-index: 1; }
.ts-fork__door:hover .ts-fork__media,
.ts-fork__door:focus-visible .ts-fork__media { transform: scale(1.06); }
.ts-fork__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-top: 22px;
	font-size: 1.25rem;
	border: 1.5px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.ts-fork__door:hover .ts-fork__arrow,
.ts-fork__door:focus-visible .ts-fork__arrow {
	transform: translateX(6px);
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.ts-fork__door { transform: none; transition: none; }
	.ts-fork__door::before { display: none; }
	.ts-fork__door:hover .ts-fork__arrow,
	.ts-fork__door:focus-visible .ts-fork__arrow { transform: none; }
}

/* ---------- Service-card link alignment (2026-07) ----------
 * Cards already stretch to equal height in a row; make any card that carries a
 * link a flex column and pin the link to the bottom, so the links line up across
 * the row no matter how long each heading or description runs. */
.ts-card:has(a.ts-arrow) { display: flex; flex-direction: column; }
.ts-card:has(a.ts-arrow) a.ts-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- FAQ accordion — refined (2026-07) ----------
 * Restyles the <details class="ts-card"> FAQ items: SVG chevron (no default
 * triangle) that rotates on open, clean hover, navy open-state emphasis,
 * refined type/spacing, and a subtle answer reveal. Pure CSS, no markup change. */
details.ts-card {
	padding: 0;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
details.ts-card:hover { transform: none; border-color: var(--ts-blue); box-shadow: none; }
details.ts-card[open] { border-color: var(--ts-navy); box-shadow: var(--ts-shadow-sm); }

details.ts-card > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.15rem clamp(1.15rem, 2vw, 1.6rem);
	font-family: var(--ts-font-head);
	font-weight: 600;
	font-size: 1.06rem;
	line-height: 1.4;
	color: var(--ts-text);
	transition: color .2s ease;
}
details.ts-card > summary::-webkit-details-marker { display: none; }
details.ts-card > summary strong { font-weight: 600; }
details.ts-card:hover > summary,
details.ts-card[open] > summary { color: var(--ts-navy); }
details.ts-card > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ts-navy); }

/* Chevron in a subtle circle; rotates on open */
details.ts-card > summary::after {
	content: "";
	flex: none;
	width: 30px; height: 30px;
	border-radius: 999px;
	border: 1.5px solid var(--ts-line);
	background: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2311387D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
details.ts-card:hover > summary::after,
details.ts-card[open] > summary::after { border-color: var(--ts-navy); }
details.ts-card[open] > summary::after { transform: rotate(180deg); }

/* Answer panel */
details.ts-card > :not(summary) {
	margin: 0;
	padding: 0 clamp(1.15rem, 2vw, 1.6rem);
	color: var(--ts-text-muted);
	line-height: 1.65;
}
details.ts-card > summary + :not(summary) { padding-top: .3rem; }
details.ts-card > :not(summary):last-child { padding-bottom: 1.35rem; }
details.ts-card > :not(summary) + :not(summary) { margin-top: .7rem; }
details.ts-card[open] > summary ~ * { animation: ts-faq-reveal .28s ease both; }
@keyframes ts-faq-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	details.ts-card > summary::after { transition: border-color .2s ease; }
	details.ts-card[open] > summary::after { transform: rotate(180deg); }
	details.ts-card[open] > summary ~ * { animation: none; }
}


/* ===================================================================
 * Smart Home Automation page — premium components (2026-07)
 * Editorial statement, day-scene cards, approach pillars, layered
 * stack, media caption. Additive and WP-safe: lives in theme.css (the
 * file the child theme enqueues as preview-theme.css). No JS required —
 * everything renders statically in both the static preview and WP.
 * =================================================================== */

/* Large editorial statement line — inherits colour, so it works on a
 * dark band (light text) or a light band (dark text). */
.ts-statement {
	max-width: 24ch;
	margin: clamp(30px,4vw,54px) auto 0;
	text-align: center;
	font-family: var(--ts-font-head);
	font-weight: 700;
	font-size: clamp(1.55rem, 3.1vw, 2.4rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.ts-statement::before {
	content: "";
	display: block;
	width: 42px; height: 3px;
	border-radius: 2px;
	background: var(--ts-red);
	margin: 0 auto 1.2rem;
}

/* Day-scene cards — richer than a service grid: time label + title + copy */
.ts-scene-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ts-scene-card {
	position: relative;
	background: var(--ts-paper);
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	padding: clamp(20px, 2vw, 28px);
	display: flex; flex-direction: column;
	overflow: hidden;
	transition: transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.ts-scene-card::before {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
	background: linear-gradient(90deg, var(--ts-navy), var(--ts-steel));
	opacity: 0; transition: opacity .25s ease;
}
.ts-scene-card:hover { transform: translateY(-4px); box-shadow: var(--ts-shadow); border-color: transparent; }
.ts-scene-card:hover::before { opacity: 1; }
.ts-scene-card__time {
	align-self: flex-start;
	font-family: var(--ts-font-head); font-weight: 600; font-size: .72rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--ts-navy); background: rgba(17,56,125,.07);
	border-radius: 999px; padding: .34rem .72rem; margin-bottom: 1.05rem;
}
.ts-scene-card h3 { font-size: 1.24rem; margin: 0 0 .5rem; }
.ts-scene-card p { margin: 0; color: var(--ts-text-muted); line-height: 1.6; }

/* Approach pillars — numbered, borderless, tuned for dark bands */
.ts-pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3vw, 46px); }
.ts-pillar { border-top: 1px solid var(--ts-line-dark); padding-top: 1.25rem; }
.ts-pillar__no { display:block; font-family: var(--ts-font-head); font-weight: 700; font-size: .82rem; letter-spacing: .14em; color: var(--ts-steel); margin-bottom: .7rem; }
.ts-pillar h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .45rem; }
.ts-pillar p { color: var(--ts-text-inv-muted); margin: 0; line-height: 1.6; }

/* Layered stack — the whole home in layers: big number + copy, no icons */
.ts-layers { display: grid; gap: 0; max-width: 900px; }
.ts-layer { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 36px); align-items: start; padding: clamp(20px, 2.3vw, 30px) 0; border-bottom: 1px solid var(--ts-line); }
.ts-layer:first-child { padding-top: .3rem; }
.ts-layer:last-child { border-bottom: 0; }
.ts-layer__no { font-family: var(--ts-font-head); font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1; color: var(--ts-steel); letter-spacing: -.02em; min-width: 2.4ch; transition: color .2s ease; }
.ts-layer:hover .ts-layer__no { color: var(--ts-navy); }
.ts-layer__title { font-size: 1.24rem; margin: .05rem 0 .5rem; }
.ts-layer__body p { margin: 0; color: var(--ts-text-muted); line-height: 1.6; max-width: 62ch; }
.ts-layer__link { display: inline-block; margin-top: .75rem; font-weight: 600; color: var(--ts-navy); text-decoration: none; }
.ts-layer__link:hover { text-decoration: underline; }

/* Editorial caption under a media frame */
.ts-fig-cap { margin: .7rem 0 0; font-size: .82rem; color: var(--ts-text-muted); line-height: 1.5; }
.ts-dark .ts-fig-cap { color: var(--ts-text-inv-muted); }

@media (max-width: 920px) {
	.ts-scene-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.ts-pillars { grid-template-columns: 1fr; gap: 1.5rem; }
	.ts-pillar { border-top: 0; border-left: 2px solid var(--ts-line-dark); padding: .2rem 0 .2rem 1.1rem; }
}
@media (max-width: 560px) {
	.ts-scene-cards { grid-template-columns: 1fr; }
	.ts-layer { grid-template-columns: 1fr; gap: .35rem; }
	.ts-layer__no { font-size: 1.15rem; }
}


/* ---------- Primary CTA text colour fix (2026-07) ----------
 * The "Book a Consultation" button is a primary CTA that lives inside the
 * header nav (.pv-nav > a) and the footer (.ts-foot a). Those link-colour
 * rules (specificity 0,1,1) were overriding .ts-btn--primary (0,1,0), so the
 * button text rendered dark/muted on the red fill. These 0,2,1 rules restore
 * the intended white text in both places (and on hover). */
.pv-nav > a.ts-btn--primary,
.pv-nav > a.ts-btn--primary:hover,
.ts-foot a.ts-btn--primary,
.ts-foot a.ts-btn--primary:hover { color: #fff; }


/* ---------- Custom logo image (WordPress Site Identity, 2026-07) ----------
 * When a logo is set in Appearance > Customize > Site Identity, it renders in
 * place of the text wordmark in the header (.pv-logo__img) and footer
 * (.ts-foot__logo-img). Sized to sit in the header without pushing the nav. */
.pv-logo__img { height: 42px; width: auto; max-width: 260px; display: block; }
.pv-logo:has(.pv-logo__img) { gap: 0; }
/* Footer sits on dark navy — render the logo as clean white/mono so it stays
   legible (the header keeps the full-colour logo). To keep the logo's own
   colours instead, remove this filter and use a light chip. */
.ts-foot__logo-img { height: 44px; width: auto; max-width: 240px; display: block; margin-bottom: .3rem; filter: brightness(0) invert(1); }
@media (max-width: 640px) {
	.pv-logo__img { height: 34px; max-width: 190px; }
}


/* ---------- Articles (blog) — 2026-07 ---------- */
.ts-card--article { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.ts-card--article .ts-card__media { display:block; aspect-ratio:16/10; background:var(--ts-ink-2); overflow:hidden; }
.ts-card--article .ts-card__media img, .ts-card--article .ts-card__img { width:100%; height:100%; object-fit:cover; display:block; }
.ts-card--article .ts-card__img--empty { display:block; width:100%; height:100%; background:radial-gradient(120% 120% at 72% 8%, rgba(100,126,170,.20), transparent 60%), var(--ts-ink-2); }
.ts-card--article .ts-card__body { display:flex; flex-direction:column; flex:1; padding:clamp(18px,2vw,24px); }
.ts-card--article .ts-eyebrow { margin-bottom:.5rem; font-size:.72rem; }
.ts-card--article .ts-card__title { font-size:1.2rem; line-height:1.3; margin:0 0 .5rem; }
.ts-card--article .ts-card__title a { color:var(--ts-text); text-decoration:none; }
.ts-card--article:hover .ts-card__title a { color:var(--ts-navy); }
.ts-card--article p { color:var(--ts-text-muted); line-height:1.6; margin:0 0 1rem; flex:1; }
.ts-card--article .ts-arrow { margin-top:auto; align-self:flex-start; font-weight:600; color:var(--ts-navy); text-decoration:none; }
.ts-card--article .ts-arrow::after { content:" \2192"; }

.ts-pagination .nav-links { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ts-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 .7rem; border:1px solid var(--ts-line); border-radius:var(--ts-radius-sm); color:var(--ts-text); text-decoration:none; font-weight:600; }
.ts-pagination .page-numbers.current { background:var(--ts-navy); border-color:var(--ts-navy); color:#fff; }
.ts-pagination a.page-numbers:hover { border-color:var(--ts-navy); color:var(--ts-navy); }

.ts-article { font-size:1.06rem; line-height:1.8; color:var(--ts-text); }
.ts-article > *:first-child { margin-top:0; }
.ts-article p, .ts-article ul, .ts-article ol { margin:0 0 1.2rem; }
.ts-article h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin:2rem 0 .8rem; }
.ts-article h3 { font-size:1.28rem; margin:1.6rem 0 .6rem; }
.ts-article a { color:var(--ts-navy); text-decoration:underline; text-underline-offset:2px; }
.ts-article ul, .ts-article ol { padding-left:1.4rem; }
.ts-article li { margin:.4rem 0; }
.ts-article img { border-radius:var(--ts-radius); height:auto; margin:1rem 0; }
.ts-article blockquote { border-left:3px solid var(--ts-red); padding:.2rem 0 .2rem 1.2rem; margin:1.6rem 0; color:var(--ts-text-muted); font-size:1.12rem; }
.ts-article figure { margin:1.6rem 0; }
.ts-article figcaption { font-size:.85rem; color:var(--ts-text-muted); margin-top:.5rem; text-align:center; }
.ts-article code { background:var(--ts-paper-3); padding:.1rem .35rem; border-radius:4px; font-size:.9em; }
.ts-article pre { background:var(--ts-ink-2); color:var(--ts-text-inv); padding:1rem 1.2rem; border-radius:var(--ts-radius-sm); overflow-x:auto; }

/* ---------- Article body: tables, photo placeholders, lead-magnet CTA — 2026-07 ---------- */
.ts-article table { width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.96rem; }
.ts-article table thead th { background:var(--ts-ink); color:var(--ts-text-inv); text-align:left; font-weight:700; }
.ts-article table th, .ts-article table td { border:1px solid var(--ts-line); padding:.6rem .8rem; vertical-align:top; line-height:1.55; }
.ts-article table tbody tr:nth-child(even) { background:var(--ts-paper-2); }
@media (max-width:600px){ .ts-article table { font-size:.85rem; } .ts-article table th, .ts-article table td { padding:.45rem .55rem; } }

.ts-figph { margin:1.8rem 0; }
.ts-figph__box { aspect-ratio:16/9; border:1px dashed var(--ts-line); border-radius:var(--ts-radius); background:repeating-linear-gradient(135deg, var(--ts-paper-2), var(--ts-paper-2) 12px, var(--ts-paper-3) 12px, var(--ts-paper-3) 24px); }
.ts-figph figcaption { font-size:.82rem; color:var(--ts-text-muted); margin-top:.5rem; text-align:center; }

.ts-magnet { margin:2.6rem 0; padding:clamp(22px,2.6vw,34px); border:1px solid var(--ts-line); border-radius:var(--ts-radius); background:radial-gradient(120% 140% at 90% 0%, rgba(17,56,125,.07), transparent 60%), var(--ts-paper-2); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; }
.ts-magnet__intro h2 { margin:.4rem 0 .6rem; font-size:clamp(1.3rem,2.2vw,1.7rem); }
.ts-magnet__intro p { margin:0; color:var(--ts-text-muted); line-height:1.65; }
.ts-magnet__form { min-width:0; }
.ts-magnet .ts-qf { margin:0; }
@media (max-width:760px){ .ts-magnet { grid-template-columns:1fr; } }