/* About TCM page — a short "About TCM" statement on the site's dark navy,
   followed by the real "TCM Founder & Creative Director" bio + headshot
   pulled from the site's former Creative Direction sub-page (no client
   list), photo set inside the same rotating ring graphic used elsewhere
   on the site. */

/* Title + "About TCM" description merged into one dark-navy section (not
   a separate white hero band above a blue intro) — kept tight (small gap
   between title and paragraph) so it reads as one statement. */
.th-about-hero {
	padding: 170px 0 90px; text-align: center;
}
.th-about-hero-title {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.035em;
	font-size: clamp(38px, 5.6vw, 64px); margin: 10px 0 28px;
}
.th-about-intro-text {
	max-width: 820px; margin: 0 auto; text-align: left;
	font-size: 16px; line-height: 1.7;
}

.th-about-director { padding: 40px 0 120px; }
.th-about-director-grid {
	display: grid; grid-template-columns: 420px 1fr; gap: 6vw; align-items: center;
}
.th-about-director-text .th-eyebrow { margin-bottom: 14px; }
.th-about-director-heading {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.035em;
	font-size: clamp(26px, 2.8vw, 38px); color: var(--th-dark-bg); margin: 0 0 22px;
}
.th-about-director-body {
	font-size: 16px; line-height: 1.7; color: var(--th-black); max-width: 680px; margin: 0;
}

/* ── Ring graphic + circular headshot (same rig as the homepage hero/
   services/CTA sections and the Our Services rows — see about.js) ── */
.th-about-ring-graphic {
	position: relative; width: min(92%, 460px); aspect-ratio: 1 / 1; margin: 0 auto;
}
.th-about-rings-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.th-about-ring-outer, .th-about-ring-middle, .th-about-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 about.js, same rig as the hero rings. */
}
.th-about-ring-middle { stroke: var(--th-accent-light); }
.th-about-ring-inner  { stroke: var(--th-cta); }
.th-about-ring-graphic.th-about-in .th-about-ring-outer  { opacity: 1; }
.th-about-ring-graphic.th-about-in .th-about-ring-middle { opacity: 1; transition-delay: 0.35s; }
.th-about-ring-graphic.th-about-in .th-about-ring-inner  { opacity: 1; transition-delay: 0.7s; }

.th-about-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-about-ring-graphic.th-about-in .th-about-photo { opacity: 1; }

/* ── Closing CTA band — this page doesn't load services.css, so its
   .th-cta-simple styling lives here. More top/bottom breathing room than
   the Services page's version, per feedback. ── */
.th-cta-simple { padding: 140px 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;
}

@media (max-width: 760px) {
	.th-about-director-grid { grid-template-columns: 1fr; gap: 32px; }
	.th-about-ring-graphic { max-width: 300px; }
}