/* Financial Services page — one intro paragraph + the real services-
   offered bullet list, next to a rotating-image circle graphic (same ring
   rig as the rest of the site), and a button to the Clients page instead
   of repeating the client list here. */

.th-fin-hero {
	background: var(--th-white); padding: 170px 0 20px; text-align: center;
}
.th-fin-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-fin-section { padding: 10px 0 120px; }
.th-fin-section .th-container,
.th-fin-hero .th-container { max-width: 1600px; padding: 0 40px; }
.th-fin-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; align-items: center;
}
.th-fin-intro {
	font-size: 17px; line-height: 1.75; color: var(--th-black); margin: 0 0 32px;
}
.th-fin-bullets {
	list-style: none; margin: 0 0 36px; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto);
	grid-auto-flow: column; column-gap: 28px; row-gap: 12px;
}
.th-fin-bullets li {
	font-size: 15px; line-height: 1.6; color: var(--th-black);
	padding-left: 20px; position: relative;
}
.th-fin-bullets li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--th-cta);
}

/* ── Ring graphic + cycling image tile (same rig as the hero's circle-
   tile, just scoped to this page — see financial.js) ── */
.th-fin-graphic-wrap { display: flex; align-items: center; justify-content: center; }
.th-fin-ring-graphic {
	position: relative; width: min(96%, 820px); aspect-ratio: 1 / 1;
}
.th-fin-rings-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.th-fin-ring-outer, .th-fin-ring-middle, .th-fin-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 financial.js, same rig as the hero rings. */
}
.th-fin-ring-middle { stroke: var(--th-accent-light); }
.th-fin-ring-inner  { stroke: var(--th-cta); }
.th-fin-ring-graphic.th-fin-in .th-fin-ring-outer  { opacity: 1; }
.th-fin-ring-graphic.th-fin-in .th-fin-ring-middle { opacity: 1; transition-delay: 0.35s; }
.th-fin-ring-graphic.th-fin-in .th-fin-ring-inner  { opacity: 1; transition-delay: 0.7s; }

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

/* ── Closing CTA band — this page doesn't load about.css, so its
   .th-cta-simple styling lives here too. ── */
.th-cta-simple { padding: 70px 0 60px; 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;
}

@media (max-width: 860px) {
	.th-fin-grid { grid-template-columns: 1fr; }
	.th-fin-graphic-wrap { margin-top: 40px; }
	.th-fin-ring-graphic { max-width: 320px; }
	.th-fin-bullets { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}