/* ==========================================================================
   THEEB-TEAM-CINEMATIC-HIERARCHY — dedicated Team page only (assets/js/team-hierarchy.js).
   Page-scoped (see inc/team-hierarchy.php); never touches the homepage Team slider (.th__…,
   assets/css/sections.css) or any other page. Reuses the site's palette/grid/type tokens only.

   No-JS / reduced-motion baseline: the connector <path> ships with NO stroke-dasharray, so it is
   fully drawn and visible by default; JS adds `.is-enhanced` on `.tmc` (and only when motion is
   allowed) before switching to the progressive-draw state — the same isolated-effect contract used
   throughout this theme (Hero light, V/M/O Scroll Draw, Services Focus, WOW small 3D document).
   ========================================================================== */

.tmc {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--c-ink);
	color: var(--c-text-on-dark);
	padding-block-start: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem));
	padding-block-end: clamp(1rem, 2vw, 2rem);
}
/* Atmospheric background — THEEB-TEAM-BACKGROUND-DEPTH-V1 (BACKGROUND ONLY; no layout/hierarchy/
   connector/light change). Three perceived depths, all static CSS gradients on two pseudo-elements
   behind the content (z-index:0, content stays at z-index:1 — see `.tmc > *` below):
     1. `.tmc`'s own flat --c-ink base.
     2. `.tmc::before` — a few very large, very soft warm radial "light zones" loosely tracking the
        organisational journey (near Chairman → a mid-page transition → near Lawyers), plus the
        original deep base vignette. One continuous field, not per-section repeats — nothing here is
        tied to exact group boundaries, so there is no visible seam between groups.
     3. `.tmc::after` — two extremely faint diagonal "light beam" bands and two narrow soft vertical
        "architectural fin" shadows, each a single non-repeating gradient placed once in a chosen
        empty zone (never a repeating/tiled pattern). */
.tmc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 44% at 82% 5%, rgb(192 138 62 / 0.24), transparent 56%),    /* Chairman zone — THEEB-TEAM-BACKGROUND-VISIBILITY-V1: 0.11→0.24, falloff 62%→56% for a steeper, more perceptible local pool */
		radial-gradient(50% 40% at 15% 44%, rgb(192 138 62 / 0.15), transparent 58%),   /* Exec → Consultants transition: 0.065→0.15 */
		radial-gradient(46% 36% at 66% 74%, rgb(192 138 62 / 0.12), transparent 58%),   /* Lawyers zone: 0.05→0.12 */
		linear-gradient(168deg, rgb(192 138 62 / 0.045), transparent 38%),              /* directional warmth: 0.025→0.045 — kept small, this is a whole-page wash (BRIEF §10: no flat/global brightening) */
		radial-gradient(66% 55% at 46% 102%, rgb(61 42 29 / 0.68), transparent 70%);    /* deep base vignette: 0.6→0.68, strengthens the near-black end of the tonal range (BRIEF §1) */
}
.tmc::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(112deg, transparent 32%, rgb(247 242 233 / 0.065) 49%, transparent 66%),  /* primary beam — 0.026→0.065, the one meant to read clearly (BRIEF §5) */
		linear-gradient(100deg, transparent 40%, rgb(247 242 233 / 0.028) 51%, transparent 64%),   /* secondary beam — 0.02→0.028, kept restrained */
		linear-gradient(90deg, transparent, rgb(0 0 0 / 0.24), transparent),                        /* fin A — 0.12→0.24 */
		linear-gradient(90deg, transparent, rgb(0 0 0 / 0.18), transparent);                        /* fin B — 0.09→0.18 */
	background-position: 0 0, 0 58%, 10% 24%, 74% 70%;
	background-size: 72% 52%, 62% 44%, 5.5% 34%, 5% 30%;
}
@media (max-width: 899px) {
	/* BRIEF: mobile is significantly simplified — base gradient + 1–2 soft radial zones + at most
	   one architectural shadow, no beams. Reduced complexity, not visibility: same stronger values
	   as desktop. */
	.tmc::before {
		background:
			radial-gradient(70% 30% at 70% 4%, rgb(192 138 62 / 0.2), transparent 58%),
			radial-gradient(60% 30% at 30% 68%, rgb(192 138 62 / 0.11), transparent 60%),
			radial-gradient(80% 45% at 50% 104%, rgb(61 42 29 / 0.68), transparent 70%);
	}
	.tmc::after {
		background-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.2), transparent);
		background-position: 14% 30%;
		background-size: 8% 28%;
	}
}
.tmc > * { position: relative; z-index: 1; }
.tmc .label { color: var(--section-eyebrow-color-on-dark); }

/* Head ---------------------------------------------------------------- */
.tmc__head { padding-block-end: clamp(2.25rem, 4.5vw, 4rem); }
.tmc__head .crumbs { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.tmc__title { margin-block-start: 0.75rem; max-width: 20ch; font-size: var(--fs-h1i); font-weight: 600; line-height: 1.3; color: var(--c-ivory); text-wrap: balance; }
html:lang(en) .tmc__title { line-height: 1.14; }
.tmc__lead { margin-block-start: 1.1rem; max-width: 38rem; font-size: var(--fs-lead); font-weight: 300; line-height: 1.85; color: var(--c-text-on-dark-muted); }

/* Connector SVG --------------------------------------------------------- */
.tmc__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.tmc__line-base { fill: none; stroke: rgb(192 138 62 / 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tmc__line-light {
	fill: none; stroke: var(--c-gold-soft); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
	opacity: 0; filter: drop-shadow(0 0 3px rgb(192 138 62 / 0.55));
	transition: opacity 250ms var(--ease);
}
.tmc.is-enhanced.is-lit .tmc__line-light { opacity: 1; }
.tmc:not(.is-enhanced) .tmc__line-light { display: none; }   /* also the permanent reduced-motion state — .is-enhanced is never added then */

/* Anchors (measurement points only — never painted) --------------------- */
.tmc-anchor { position: absolute; inset-inline-start: var(--tmc-spine-x, 50%); width: 0; height: 0; pointer-events: none; }
.tmc-anchor[data-tmc-anchor="entry"] { inset-block-start: 0; }
.tmc-anchor[data-tmc-anchor="exit"] { inset-block-end: 0; }

/* Groups ------------------------------------------------------------------ */
.tmc__group { position: relative; padding-block: clamp(2rem, 4.5vw, 4rem) 0; }
.tmc__group:last-of-type { padding-block-end: clamp(1.5rem, 3vw, 3rem); }
.tmc__group-label { margin-block-end: clamp(1.5rem, 3.5vw, 2.75rem); }

.tmc__group--chairman { --tmc-spine-x: 46%; padding-block-start: clamp(0.5rem, 1.5vw, 1.5rem); }
.tmc__group--exec { --tmc-spine-x: 63%; }
.tmc__group--consultants { --tmc-spine-x: 50%; }
.tmc__group--lawyers { --tmc-spine-x: 42%; }
.tmc__group--other { --tmc-spine-x: 42%; }

.tmc__terminus { position: relative; height: 2.5rem; }
.tmc__terminus [data-tmc-anchor] { inset-inline-start: 42%; inset-block-start: 100%; }
.tmc__terminus-dot {
	position: absolute; inset-inline-start: 42%; inset-block-start: 100%; width: 8px; height: 8px; margin: -4px;
	border-radius: 50%; background: var(--c-gold); opacity: 0.45;
	transition: opacity 500ms var(--ease), box-shadow 500ms var(--ease);
}
.tmc.is-complete .tmc__terminus-dot { opacity: 1; box-shadow: 0 0 10px 2px rgb(192 138 62 / 0.5); }

/* Rows (Consultants / Lawyers / Other) — count-aware, fully dynamic. Chairman/Executive are always
   excluded (:not(...)) — they are single asymmetric compositions spanning the full row width, never
   subject to the multi-column count rules below (BRIEF §11/§13 vs §15–18: two different systems). */
.tmc__row { display: flex; flex-wrap: wrap; gap: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); }
.tmc__row .tmc-profile { flex: 0 0 auto; width: 100%; }
.tmc-profile--chairman, .tmc-profile--exec { width: 100%; }
@media (min-width: 640px) {
	.tmc__row--n1 .tmc-profile:not(.tmc-profile--chairman):not(.tmc-profile--exec) { width: min(58%, 26rem); margin-inline-start: 8%; }
	.tmc__row--n2 .tmc-profile:not(.tmc-profile--chairman):not(.tmc-profile--exec) { width: calc(50% - 1.5rem); }
	.tmc__row--n2 .tmc-profile:nth-child(2) { margin-block-start: clamp(1.5rem, 3vw, 2.75rem); }
	.tmc__row--n3 .tmc-profile:not(.tmc-profile--chairman):not(.tmc-profile--exec) { width: calc(33.333% - 2rem); }
	.tmc__row--n4p .tmc-profile:not(.tmc-profile--chairman):not(.tmc-profile--exec) { width: calc(50% - 1.5rem); }
}
@media (min-width: 1024px) {
	.tmc__row--n4p .tmc-profile:not(.tmc-profile--chairman):not(.tmc-profile--exec) { width: calc(25% - 1.6rem); }
	.tmc__row--n4p .tmc-profile:nth-child(3n+2) { margin-block-start: clamp(1rem, 2vw, 1.75rem); }
	.tmc__row--n4p .tmc-profile:nth-child(3n) { margin-block-start: clamp(0.5rem, 1vw, 1rem); }
}

/* Profile ------------------------------------------------------------------ */
.tmc-profile { position: relative; }
.tmc-profile__frame { position: relative; display: block; box-shadow: 0 18px 34px -22px rgb(0 0 0 / 0.55); }
.tmc-profile__frame .portrait { background: var(--c-brown-tint); }
.tmc-profile__frame .portrait--fallback { background: rgb(247 242 233 / 0.06); box-shadow: inset 0 0 0 1px rgb(247 242 233 / 0.14); }
.tmc-profile__frame .portrait__mark { color: rgb(247 242 233 / 0.5); }
.tmc-profile__frame { border: 1px solid rgb(192 138 62 / 0.22); transition: border-color 400ms var(--ease); }
.tmc-profile__cap { margin-block-start: 1rem; }
.tmc-profile__name { font-family: var(--font-display); color: var(--c-ivory); line-height: 1.4; }
.tmc-profile__pos { margin-block-start: 0.3rem; font-size: var(--fs-small); color: var(--c-text-on-dark-muted); }
.tmc-profile__desc { margin-block-start: 0.85rem; max-width: 32rem; font-size: var(--fs-body); font-weight: 300; line-height: 1.8; color: rgb(247 242 233 / 0.78); }

/* THEEB-TEAM-BACKGROUND-DEPTH-V1: a very soft, static ambient glow behind the two leadership
   portraits only, helping them read as part of the environment rather than pasted on top of it.
   `z-index:0` gives the frame its own local stacking context so the glow's `z-index:-1` stays behind
   the portrait image without dropping behind sibling profiles or the page background. */
.tmc-profile--chairman .tmc-profile__frame, .tmc-profile--exec .tmc-profile__frame { position: relative; z-index: 0; }
.tmc-profile--chairman .tmc-profile__frame::before, .tmc-profile--exec .tmc-profile__frame::before {
	content: "";
	position: absolute;
	inset: -18% -14%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(62% 62% at 50% 42%, rgb(192 138 62 / 0.22), transparent 74%);   /* THEEB-TEAM-BACKGROUND-VISIBILITY-V1: 0.16→0.22, kept broad/diffuse (no tight halo) */
}

.tmc-profile--chairman .tmc-profile__frame, .tmc-profile--exec .tmc-profile__frame { max-width: 320px; }
.tmc-profile--exec .tmc-profile__frame { max-width: 250px; }
.tmc-profile--consultant .tmc-profile__frame { max-width: 210px; }
.tmc-profile--lawyer .tmc-profile__frame, .tmc-profile--other .tmc-profile__frame { max-width: 190px; }

.tmc-profile--chairman .tmc-profile__name, .tmc-profile--exec .tmc-profile__name { font-size: var(--fs-h2s); font-weight: 500; }
.tmc-profile--consultant .tmc-profile__name, .tmc-profile--lawyer .tmc-profile__name, .tmc-profile--other .tmc-profile__name { font-size: var(--fs-h3); font-weight: 500; }
.tmc-profile--consultant .tmc-profile__desc, .tmc-profile--lawyer .tmc-profile__desc, .tmc-profile--other .tmc-profile__desc { font-size: var(--fs-small); }

/* Leadership asymmetric two-column composition (desktop) — BRIEF §11/§13 */
@media (min-width: 900px) {
	.tmc-profile--chairman, .tmc-profile--exec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
	.tmc-profile--chairman .tmc-profile__fig-col { grid-column: 2 / 6; }
	.tmc-profile--chairman .tmc-profile__cap { grid-column: 7 / 12; margin-block-start: 0; }
	.tmc-profile--exec .tmc-profile__fig-col { grid-column: 8 / 11; order: 2; }
	.tmc-profile--exec .tmc-profile__cap { grid-column: 2 / 7; order: 1; margin-block-start: 0; }
}
@media (max-width: 899px) {
	.tmc-profile--chairman .tmc-profile__fig-col { max-width: 70vw; margin-inline-end: auto; }
	.tmc-profile--exec .tmc-profile__fig-col { max-width: 60vw; margin-inline-start: auto; }
}
@media (max-width: 639px) {
	.tmc-profile--chairman .tmc-profile__frame { max-width: 190px; }
	.tmc-profile--exec .tmc-profile__frame { max-width: 170px; }
	.tmc-profile--consultant .tmc-profile__frame, .tmc-profile--lawyer .tmc-profile__frame, .tmc-profile--other .tmc-profile__frame { max-width: 150px; }
	.tmc__row .tmc-profile:nth-child(odd) { margin-inline-end: 10vw; }
	.tmc__row .tmc-profile:nth-child(even) { margin-inline-start: 10vw; }
}

/* Mobile spine — one shared near-edge route for every group (BRIEF §34) */
@media (max-width: 899px) { .tmc__group { --tmc-spine-x: 12%; } .tmc__terminus [data-tmc-anchor], .tmc__terminus-dot { inset-inline-start: 12%; } }

/* Connector node (the branch's endpoint at each profile) -------------------- */
.tmc-node {
	position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: 7px; height: 7px; margin: -3.5px;
	border-radius: 50%; background: var(--c-gold-soft); opacity: 0; transform: scale(0.5); pointer-events: none;
	transition: opacity 350ms var(--ease), transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
.tmc.is-enhanced .tmc-node { opacity: 0.4; transform: scale(0.7); }
.tmc.is-enhanced .tmc-profile.is-in .tmc-node { opacity: 1; transform: scale(1); box-shadow: 0 0 7px 1px rgb(192 138 62 / 0.55); }

/* Reveal — profile "the line has reached this person" (BRIEF §10) ---------- */
.tmc.is-enhanced .tmc-profile {
	opacity: 0.75; transform: translateY(13px) scale(0.985);
	transition: opacity 550ms var(--ease), transform 650ms var(--ease);
}
.tmc.is-enhanced .tmc-profile.is-in { opacity: 1; transform: none; }
.tmc.is-enhanced .tmc-profile.is-in .tmc-profile__frame { border-color: rgb(192 138 62 / 0.55); }

/* Hover / focus (desktop only, restrained — BRIEF §20) ---------------------- */
@media (hover: hover) {
	.tmc-profile:hover .tmc-profile__frame, .tmc-profile:focus-within .tmc-profile__frame { border-color: rgb(192 138 62 / 0.6); }
	.tmc-profile:hover .tmc-profile__frame .portrait__in, .tmc-profile:focus-within .tmc-profile__frame .portrait__in { transform: scale(1.02); }
}
.tmc-profile__frame .portrait__in { transition: transform 500ms var(--ease); }

/* Reduced motion — belt & suspenders (JS never adds .is-enhanced under reduce, so the rules above
   never apply in the first place; this only silences any leftover hover transitions). */
@media (prefers-reduced-motion: reduce) {
	.tmc-profile, .tmc-node, .tmc__line-light, .tmc__terminus-dot, .tmc-profile__frame .portrait__in { transition: none !important; }
}