/* Our Services page — alternating text / circle-graphic rows (same layout
   pattern as smacap.com's "For Portfolio Managers / Allocators" section),
   using the same rotating broken-ring graphic as the homepage hero in
   place of that site's diamond, with a real work image fit into the
   center as a circle. No line-sweep — just fade in + spin. */

.th-svc2-hero {
	background: var(--th-white); padding: 170px 0 50px; text-align: center;
}
.th-svc2-hero-title {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.035em;
	font-size: clamp(38px, 5.6vw, 64px); color: var(--th-dark-bg); margin: 10px 0 0;
}

.th-svc2-section { background: var(--th-white); }
.th-svc2-grid { position: relative; }

/* Each row is a full-bleed background band (dark rows get their navy
   full width — see .th-svc2-dark below) wrapping a centered, max-width
   content box. Rows previously had no max-width at all, so on wide
   screens the 32px padding barely registered against the full browser
   width — capping and centering the inner cell (same idea as the
   homepage's .th-container) fixes that regardless of viewport size. */
.th-svc2-row { width: 100%; }
.th-svc2-cell {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw;
	min-height: 62vh; position: relative;
	max-width: 1320px; margin: 0 auto; padding: 0 64px;
}
.th-svc2-flip { direction: rtl; }
.th-svc2-flip > * { direction: ltr; }

.th-svc2-text { padding: 60px 0; position: relative; z-index: 2; max-width: 600px; }
.th-svc2-spacer { display: flex; align-items: center; justify-content: center; padding: 20px; }

.th-svc2-label {
	font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--th-cta); margin: 0 0 14px;
	opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.th-svc2-heading {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.03em;
	font-size: clamp(26px, 2.6vw, 36px); color: var(--th-dark-bg); margin: 0;
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.th-svc2-line {
	width: 60px; height: 2px; background: var(--th-cta); margin: 20px 0;
	opacity: 0; transition: opacity 0.6s ease 0.2s;
}
.th-svc2-body {
	font-size: 16px; line-height: 1.65; color: var(--th-black); margin: 0 0 14px;
	opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.th-svc2-body ~ .th-svc2-body { transition-delay: 0.42s; }

.th-svc2-cell.th-svc2-in .th-svc2-label,
.th-svc2-cell.th-svc2-in .th-svc2-heading,
.th-svc2-cell.th-svc2-in .th-svc2-line,
.th-svc2-cell.th-svc2-in .th-svc2-body {
	opacity: 1; transform: translateY(0);
}

/* ── Ring graphic + circular image (same rig as the homepage hero/services/
   CTA sections — see script.js's shared startRingRotation, wired up per
   row from services.js) ── */
.th-svc2-ring-graphic {
	position: relative; width: min(92%, 560px); aspect-ratio: 1 / 1;
}
.th-svc2-rings-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.th-svc2-ring-outer, .th-svc2-ring-middle, .th-svc2-ring-inner {
	fill: none; stroke: var(--th-accent);
	transform-box: fill-box; transform-origin: 50% 50%;
	opacity: 0; transition: opacity 0.5s ease;
	/* Continuous rotation driven from script.js, same rig as the hero rings. */
}
.th-svc2-ring-middle { stroke: var(--th-accent-light); }
.th-svc2-ring-inner  { stroke: var(--th-cta); }
.th-svc2-cell.th-svc2-in .th-svc2-ring-outer  { opacity: 1; }
.th-svc2-cell.th-svc2-in .th-svc2-ring-middle { opacity: 1; transition-delay: 0.35s; }
.th-svc2-cell.th-svc2-in .th-svc2-ring-inner  { opacity: 1; transition-delay: 0.7s; }

.th-svc2-photo {
	position: absolute; top: 50%; left: 50%; width: 70%; height: 70%;
	transform: translate(-50%, -50%); border-radius: 50%;
	background-size: cover; background-position: center;
	box-shadow: 0 20px 44px rgba(10,10,10,0.18);
	opacity: 0; transition: opacity 0.6s ease 0.9s;
}
.th-svc2-cell.th-svc2-in .th-svc2-photo { opacity: 1; }

@media (max-width: 860px) {
	.th-svc2-cell { grid-template-columns: 1fr; min-height: 0; padding: 0 16px; }
	.th-svc2-text { padding: 40px 0; max-width: none; }
	.th-svc2-spacer { padding: 10px 0 30px; }
	.th-svc2-ring-graphic { width: min(82vw, 380px); }
}

/* ── Dark rows (2nd + 4th) — same blue as the homepage's dark sections,
   with copy flipped to white/light so it reads against it. */
.th-svc2-dark { background: var(--th-dark-bg); }
.th-svc2-dark .th-svc2-label { color: var(--th-cta-light); }
.th-svc2-dark .th-svc2-heading { color: var(--th-white); }
.th-svc2-dark .th-svc2-line { background: var(--th-accent-light); }
.th-svc2-dark .th-svc2-body { color: var(--th-white); }

/* ── Simple closing CTA band (no ring graphic on this page) ── */
.th-cta-simple { padding: 100px 0; text-align: center; }
.th-cta-simple h2 {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.035em;
	font-size: clamp(28px, 3.8vw, 46px); margin: 0 auto 34px; max-width: 720px;
	color: var(--th-dark-bg);
}