/* ==========================================================================
   TradeInfra — page sections
   Loaded after theme.css, which owns the tokens and shared components.
   ========================================================================== */

/* ------------------------------------------------------- Reveal on scroll */

.ti-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ti-ease),transform .6s var(--ti-ease)}
.ti-reveal.is-revealed{opacity:1;transform:none}

/* ---------------------------------------------------------------- Hero --- */

.ti-hero{
	position:relative;
	padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem);
	background:var(--ti-white);
	overflow:hidden;
}

/* Soft brand wash behind the whole hero. */
.ti-hero__wash{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(60% 70% at 88% 18%,rgba(42,111,181,.14) 0%,transparent 62%),
		radial-gradient(46% 58% at 4% 6%,rgba(224,172,70,.13) 0%,transparent 60%),
		linear-gradient(180deg,var(--ti-blue-100) 0%,rgba(232,240,250,.35) 42%,var(--ti-white) 100%);
}

.ti-hero__inner{
	position:relative;z-index:1;
	display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
	grid-template-columns:1fr;
}
@media (min-width:940px){
	.ti-hero__inner{grid-template-columns:1.05fr .95fr}
}

.ti-hero__copy{max-width:38rem}

.ti-hero__eyebrow{
	display:inline-flex;align-items:center;gap:.5rem;
	margin:0 0 var(--ti-sp-5);padding:.5rem 1rem;
	background:var(--ti-white);border:1px solid var(--ti-gray-300);border-radius:var(--ti-r-pill);
	box-shadow:var(--ti-shadow-sm);
	color:var(--ti-gold-600);font-size:var(--ti-fs-xs);font-weight:700;
	letter-spacing:.09em;text-transform:uppercase;
}
.ti-hero__eyebrow svg{color:var(--ti-navy-600)}

.ti-hero__title{
	margin:0 0 var(--ti-sp-4);
	color:var(--ti-navy-900);
	font-size:var(--ti-fs-h1);
	font-weight:800;
	line-height:1.04;
	letter-spacing:-.035em;
}
/* Gold highlight behind the phrase that carries the positioning. Painted as a
   background on the span itself — a z-index:-1 pseudo-element escapes this
   stacking context and gets hidden behind the hero wash. */
.ti-hero__accent{
	display:inline;color:var(--ti-navy-700);
	background-image:linear-gradient(90deg,rgba(224,172,70,.55),rgba(224,172,70,.2));
	background-size:100% .26em;
	background-position:0 88%;
	background-repeat:no-repeat;
	padding-inline:.04em;
}

/* Brief 1.6: the homepage h1 is set as two explicit lines. Sized so the longer
   of the two fits the copy column without a third wrap. */
.ti-hero__title--two{font-size:clamp(2.1rem,4.4vw,4.35rem);line-height:1.08}
.ti-hero__line{display:block}

.ti-hero__sub{
	margin:0 0 var(--ti-sp-4);
	color:var(--ti-navy-700);
	font-size:clamp(1.1rem,2.2vw,1.35rem);
	font-weight:600;
}
.ti-hero__lede{
	margin:0;
	color:var(--ti-slate);
	font-size:var(--ti-fs-lg);
	line-height:1.62;
	max-width:34rem;
}
.ti-hero__hint{margin:var(--ti-sp-4) 0 0;color:var(--ti-mute);font-size:var(--ti-fs-sm)}

.ti-hero__marks{
	display:flex;flex-wrap:wrap;gap:var(--ti-sp-3) var(--ti-sp-5);
	margin:var(--ti-sp-6) 0 0;padding:0;list-style:none;
}
.ti-hero__marks li{
	display:flex;align-items:center;gap:.5rem;margin:0;
	color:var(--ti-navy-800);font-size:var(--ti-fs-sm);font-weight:600;
}
.ti-hero__marks svg{color:var(--ti-gold-600);flex:0 0 18px}

/* --- Hero visual: photo on an organic mask with floating cards ---------- */

.ti-hero__visual{position:relative;isolation:isolate}

.ti-hero__blob{
	position:absolute;inset:-9% -6% -12% -10%;z-index:-1;
	background:linear-gradient(150deg,rgba(42,111,181,.2),rgba(224,172,70,.18));
	border-radius:58% 42% 46% 54% / 44% 52% 48% 56%;
	filter:blur(2px);
	animation:ti-morph 18s ease-in-out infinite;
}
@keyframes ti-morph{
	0%,100%{border-radius:58% 42% 46% 54% / 44% 52% 48% 56%}
	50%{border-radius:44% 56% 58% 42% / 56% 44% 56% 44%}
}

.ti-hero__frame{
	margin:0;
	border-radius:var(--ti-r-xl);
	overflow:hidden;
	box-shadow:0 28px 64px rgba(10,42,74,.22),0 8px 20px rgba(10,42,74,.1);
	border:5px solid var(--ti-white);
}
.ti-hero__photo{
	display:block;width:100%;height:auto;
	aspect-ratio:5 / 4;object-fit:cover;
}

/* Floating capability cards */
.ti-float{
	position:absolute;z-index:2;
	display:flex;align-items:center;gap:.7rem;
	padding:.8rem .95rem;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border:1px solid var(--ti-gray-200);
	border-radius:var(--ti-r);
	box-shadow:var(--ti-shadow-lg);
	max-width:250px;
	animation:ti-bob 6s ease-in-out infinite;
}
.ti-float--a{top:8%;left:-6%;animation-delay:0s}
/* The overhang is a percentage of the art, and the art now grows with the
   window — at 2560 a bare -5% put this chip 24px from the edge of the
   screen. Clamped so it never hangs out by more than 48px. */
.ti-float--b{bottom:16%;right:max(-5%,-48px);animation-delay:-2s}
.ti-float--c{
	flex-direction:column;align-items:flex-start;gap:.15rem;
	bottom:-4%;left:4%;max-width:210px;animation-delay:-4s;
}
@keyframes ti-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.ti-float__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;flex:0 0 38px;border-radius:9px;
}
.ti-float__icon--blue{background:var(--ti-blue-100);color:var(--ti-navy-700)}
.ti-float__icon--gold{background:var(--ti-gold-100);color:var(--ti-gold-600)}
.ti-float__body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ti-float__body strong{color:var(--ti-navy-800);font-size:var(--ti-fs-sm);font-weight:700;line-height:1.25}
.ti-float__body span{color:var(--ti-mute);font-size:11.5px;line-height:1.4}
.ti-float__stat{color:var(--ti-gold-600);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.ti-float__statlabel{color:var(--ti-slate);font-size:11.5px;line-height:1.4}

/* The floating cards overhang the frame; keep them inside the viewport on
   narrow screens rather than causing a horizontal scrollbar. */
@media (max-width:1100px){
	.ti-float--a{left:0}
	.ti-float--b{right:0}
}
@media (max-width:640px){
	.ti-float{position:static;max-width:none;animation:none;margin-top:var(--ti-sp-3)}
	.ti-float--c{flex-direction:row;align-items:center;gap:.7rem}
	.ti-hero__visual{display:flex;flex-direction:column}
	.ti-hero__blob{display:none}
}

/* --------------------------------------------------------- Trust strip --- */

.ti-stats-band{
	padding-block:clamp(2rem,4vw,3rem);
	background:var(--ti-navy-900);
}
.ti-stats{
	display:grid;gap:var(--ti-sp-5);
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	margin:0;padding:0;list-style:none;
}
.ti-stat{
	display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
	margin:0;padding-left:var(--ti-sp-5);
	border-left:2px solid rgba(255,255,255,.14);
}
.ti-stat__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;margin-bottom:.35rem;
	background:rgba(224,172,70,.15);color:var(--ti-gold-400);
	border-radius:9px;
}
.ti-stat__value{color:#fff;font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.ti-stat__label{color:rgba(255,255,255,.62);font-size:var(--ti-fs-sm);line-height:1.45}

/* ----------------------------------------------------------------- FAQ --- */

.ti-faq{display:grid;gap:var(--ti-sp-6)}
@media (min-width:940px){.ti-faq{grid-template-columns:1fr 1fr;gap:var(--ti-sp-7)}}

.ti-faq__col{
	padding:clamp(1.5rem,3vw,2.25rem);
	background:var(--ti-white);
	border:1px solid var(--ti-line);
	border-radius:var(--ti-r-lg);
	box-shadow:var(--ti-shadow);
}
.ti-faq__col--buyer{border-top:3px solid var(--ti-blue-500)}
.ti-faq__col--supplier{border-top:3px solid var(--ti-gold-500)}

.ti-faq__heading{margin:0 0 var(--ti-sp-5);font-size:1.15rem;line-height:1.45}
.ti-faq__badge{
	display:inline-block;margin-right:.6rem;padding:.25rem .7rem;
	border-radius:var(--ti-r-pill);
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	vertical-align:2px;
}
.ti-faq__col--buyer .ti-faq__badge{background:var(--ti-blue-100);color:var(--ti-navy-700)}
.ti-faq__col--supplier .ti-faq__badge{background:var(--ti-gold-100);color:var(--ti-gold-600)}

.ti-acc__item+.ti-acc__item{border-top:1px solid var(--ti-line)}
.ti-acc__h{margin:0;font-size:inherit;font-weight:inherit}
.ti-acc__trigger{
	display:flex;align-items:flex-start;gap:.75rem;width:100%;
	padding:1rem 0;background:none;border:0;
	color:var(--ti-navy-800);font-family:inherit;font-size:var(--ti-fs-sm);font-weight:600;
	line-height:1.55;text-align:left;cursor:pointer;
}
.ti-acc__trigger:hover{color:var(--ti-blue-500)}
.ti-acc__q{margin-top:1px;color:var(--ti-gold-500);flex:0 0 20px}
.ti-acc__label{flex:1 1 auto}
.ti-acc__chev{flex:0 0 20px;margin-top:1px;color:var(--ti-mute);transition:transform .2s var(--ti-ease)}
.ti-acc__trigger[aria-expanded="true"] .ti-acc__chev{transform:rotate(180deg)}
.ti-acc__panel{padding:0 0 1rem 2.35rem}
.ti-acc__panel p{margin:0;color:var(--ti-slate);font-size:var(--ti-fs-sm)}

/* --------------------------------------------------------------- About --- */

.ti-split{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
@media (min-width:940px){.ti-split{grid-template-columns:1fr 1.02fr}}

/* The copy leads in the markup, so it leads at every width: first column on a
   desktop, first block on a phone. It used to be the other way round, which
   put the panel ahead of the heading that introduces it. No `order` rules —
   source order is the reading order. */

/* Layered photo composition */
.ti-media{position:relative;padding-bottom:clamp(2.5rem,6vw,4rem);padding-right:clamp(1.5rem,4vw,3rem)}
.ti-media__main{margin:0;border-radius:var(--ti-r-xl);overflow:hidden;box-shadow:var(--ti-shadow-lg)}
.ti-media__img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}

.ti-media__inset{
	position:absolute;right:0;bottom:clamp(.5rem,3vw,2rem);
	width:clamp(130px,26%,220px);margin:0;
	border:5px solid var(--ti-white);border-radius:var(--ti-r-lg);
	overflow:hidden;box-shadow:var(--ti-shadow-lg);
}
.ti-media__inset .ti-media__img{aspect-ratio:1 / 1}

.ti-media__badge{
	position:absolute;left:clamp(-.5rem,-1vw,0rem);bottom:0;
	display:flex;align-items:center;gap:.75rem;
	padding:.85rem 1.1rem;max-width:270px;
	background:var(--ti-white);
	border:1px solid var(--ti-gray-200);border-radius:var(--ti-r);
	box-shadow:var(--ti-shadow-lg);
}
.ti-media__badge strong{display:block;color:var(--ti-navy-800);font-size:var(--ti-fs-sm);font-weight:700}
.ti-media__badge span{color:var(--ti-mute);font-size:11.5px;line-height:1.4}
.ti-media__badge-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;flex:0 0 40px;
	background:var(--ti-gold-100);color:var(--ti-gold-600);border-radius:9px;
}
@media (max-width:520px){
	.ti-media__inset{display:none}
	.ti-media{padding-right:0}
	.ti-media__badge{position:static;max-width:none;margin-top:var(--ti-sp-4)}
	.ti-media{padding-bottom:0}
}

.ti-split__body .ti-head{margin-bottom:var(--ti-sp-5)}
.ti-about__para{color:var(--ti-slate);font-size:var(--ti-fs-base)}

.ti-about__facts{
	display:grid;gap:var(--ti-sp-4);
	grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	margin:var(--ti-sp-6) 0 0;padding:var(--ti-sp-5) 0 0;
	list-style:none;border-top:1px solid var(--ti-line);
}
.ti-about__facts li{margin:0}
.ti-about__facts strong{display:block;color:var(--ti-navy-800);font-size:1.1rem;line-height:1.3}
.ti-about__facts span{color:var(--ti-mute);font-size:var(--ti-fs-xs)}

/* ------------------------------------------------------------ Services --- */

/* Brief 4.1/4.2: a single heading, and nine blocks where the service NAME is
   the thing that lands. The name is set at display size over a tinted plate,
   with the locked description beneath a gold rule that draws across on hover. */

.ti-services__head{
	margin:0 0 clamp(2rem,4vw,3rem);
	text-align:center;
	font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--ti-navy-800);
}
.ti-services__head::after{
	content:"";display:block;width:64px;height:3px;margin:.9rem auto 0;
	background:var(--ti-gold-500);border-radius:2px;
}

.ti-services{
	display:grid;gap:var(--ti-sp-4);
	grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
/* Nine services want three rows of three. Left to auto-fit, the wider shell
   fits four across and the last row is a single stranded card. */
@media (min-width:1040px){
	.ti-services{grid-template-columns:repeat(3,1fr)}
}
.ti-service{
	position:relative;isolation:isolate;
	display:flex;flex-direction:column;
	padding:var(--ti-sp-6) var(--ti-sp-5) var(--ti-sp-6);
	background:var(--ti-white);
	border:1px solid var(--ti-line);
	border-radius:var(--ti-r-lg);
	overflow:hidden;
	transition:transform .22s var(--ti-ease),box-shadow .22s var(--ti-ease),border-color .22s var(--ti-ease);
}
/* Navy wash that rises out of the bottom edge on hover. */
.ti-service::after{
	content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:-1;
	background:linear-gradient(180deg,var(--ti-navy-800),var(--ti-navy-900));
	transition:height .3s var(--ti-ease);
}
.ti-service:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--ti-shadow-lg)}
.ti-service:hover::after{height:100%}

.ti-service__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ti-sp-4)}
.ti-service__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:56px;height:56px;flex:0 0 56px;
	background:var(--ti-blue-100);color:var(--ti-navy-700);
	border-radius:var(--ti-r);
	transition:background .22s var(--ti-ease),color .22s var(--ti-ease);
}
.ti-service:hover .ti-service__icon{background:rgba(224,172,70,.16);color:var(--ti-gold-400)}

.ti-service__num{
	color:var(--ti-gray-300);
	font-family:var(--ti-font-mono);font-size:1.75rem;font-weight:700;
	line-height:1;letter-spacing:-.04em;
	transition:color .22s var(--ti-ease);
}
.ti-service:hover .ti-service__num{color:rgba(224,172,70,.55)}

.ti-service__title{
	margin:0;
	font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:800;letter-spacing:-.02em;
	line-height:1.2;color:var(--ti-navy-800);
	transition:color .22s var(--ti-ease);
}
.ti-service:hover .ti-service__title{color:#fff}

.ti-service__rule{
	display:block;width:34px;height:3px;margin:var(--ti-sp-4) 0;
	background:var(--ti-gold-500);border-radius:2px;
	transition:width .3s var(--ti-ease);
}
.ti-service:hover .ti-service__rule{width:76px}

.ti-service__body{
	margin:0;color:var(--ti-slate);
	font-size:var(--ti-fs-sm);line-height:1.65;
	transition:color .22s var(--ti-ease);
}
.ti-service:hover .ti-service__body{color:rgba(255,255,255,.76)}

@media (max-width:520px){
	.ti-service{padding:var(--ti-sp-5) var(--ti-sp-4)}
}

/* ---------------------------------------------------------- Highlights --- */

/* Nine statements, no subtext (briefs 2.1/2.2 on both role pages). With no
   body copy to carry the block, the statement itself is the design: large
   type, a big ghosted number, and a gold sweep on hover. */

/* Brief 1.1: the welcome banner and this section used to run together. The
   section now starts on its own plane with a hard edge above it. */
.ti-hl-section{position:relative;border-top:1px solid var(--ti-line)}
.ti-hl-section__edge{
	position:absolute;inset:0 0 auto 0;height:4px;
	background:linear-gradient(90deg,var(--ti-navy-800),var(--ti-gold-500) 55%,var(--ti-navy-800));
	opacity:.85;
}
/* Dawn-style empty-element collapse guard: give the bar something inside it. */
.ti-hl-section__edge i{display:block;height:100%}

/* ------------------------------------------------------------- Sectors --- */

/* Brief 5.2: ten rows, one per sector. The name plate is fixed; only the strip
   of imagery behind it moves. Rows alternate direction and run at slightly
   different speeds, so ten bands at once read as a wall rather than a conveyor
   belt. */

.ti-secrows{
	display:flex;flex-direction:column;gap:10px;
	margin-block:clamp(1.75rem,4vw,2.75rem);
}

.ti-secrow{
	position:relative;isolation:isolate;
	display:grid;grid-template-columns:minmax(240px,32%) 1fr;
	align-items:stretch;
	height:clamp(88px,10vw,116px);
	background:var(--ti-navy-900);
	border-radius:var(--ti-r-lg);
	overflow:hidden;
}

/* --- the part that must not move --- */
.ti-secrow__plate{
	position:relative;z-index:3;
	display:flex;align-items:center;gap:var(--ti-sp-3);
	padding:0 var(--ti-sp-5);
	background:linear-gradient(90deg,var(--ti-navy-900) 72%,rgba(4,24,46,0));
}
.ti-secrow__num{
	color:var(--ti-gold-400);font-family:var(--ti-font-mono);
	font-size:var(--ti-fs-sm);font-weight:700;line-height:1;flex:0 0 auto;
}
.ti-secrow__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;flex:0 0 38px;
	background:rgba(224,172,70,.16);color:var(--ti-gold-400);
	border-radius:10px;
}
.ti-secrow__name{
	margin:0;min-width:0;color:#fff;
	font-size:clamp(.92rem,1.25vw,1.08rem);font-weight:700;
	line-height:1.25;letter-spacing:-.01em;
}

/* --- the part that does --- */
.ti-secrow__band{position:relative;overflow:hidden}
.ti-secrow__track{
	display:flex;width:max-content;height:100%;
	animation:ti-secrow var(--ti-row-speed,52s) linear infinite;
}
.ti-secrow.is-reverse .ti-secrow__track{animation-direction:reverse}
@keyframes ti-secrow{
	from{transform:translateX(0)}
	to{transform:translateX(calc(-100% / var(--ti-row-passes,2)))}
}
.ti-secrow:hover .ti-secrow__track,
.ti-secrow:focus-within .ti-secrow__track{animation-play-state:paused}

.ti-secrow__list{
	display:flex;flex:0 0 auto;gap:8px;
	margin:0;padding:0 4px;list-style:none;height:100%;
}
.ti-secframe{
	flex:0 0 auto;width:clamp(150px,17vw,220px);height:100%;
	margin:0;border-radius:10px;overflow:hidden;
}
.ti-secframe__img{
	display:block;width:100%;height:100%;
	object-fit:cover;
	filter:saturate(.85) brightness(.82);
}

/* Keeps the left edge of the strip reading as a fade into the plate rather
   than a hard cut, and darkens the whole band so white type stays legible. */
.ti-secrow__scrim{
	position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
	background:linear-gradient(90deg,var(--ti-navy-900) 0%,rgba(4,24,46,.35) 22%,rgba(4,24,46,.35) 88%,rgba(4,24,46,.75) 100%);
}
.ti-secrow__scrim i{display:block;height:100%}

@media (max-width:700px){
	.ti-secrow{grid-template-columns:minmax(150px,58%) 1fr;height:78px}
	.ti-secrow__plate{padding:0 var(--ti-sp-4);gap:.6rem}
	.ti-secrow__icon{display:none}
	.ti-secrow__name{font-size:.85rem}
}

.ti-secband__note{
	display:flex;gap:.6rem;align-items:center;justify-content:center;
	margin:0;color:var(--ti-slate);font-size:var(--ti-fs-sm);text-align:center;
}
.ti-secband__note svg{flex:0 0 18px;color:var(--ti-gold-600)}

/* Without motion the strips simply hold still. The sector names are the
   content here and they are in the fixed plate, so nothing is lost. */
@media (prefers-reduced-motion:reduce){
	.ti-secrow__track{animation:none}
}

/* ----------------------------------------------------------- Countries --- */

/* Brief 6.2: round three-dimensional flag icons, country name directly below.
   The relief is built in CSS over the flat SVG flag — a specular highlight, an
   inner shadow at the lower edge, and a cast shadow beneath — so all 25 stay
   crisp vector artwork and new markets need no new assets. */

.ti-countries--orbs{
	display:grid;gap:var(--ti-sp-5) var(--ti-sp-4);
	grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
	margin:0;padding:0;list-style:none;
}
.ti-countries--orbs .ti-country{
	display:flex;flex-direction:column;align-items:center;gap:.7rem;
	margin:0;padding:0;background:none;border:0;
	transition:transform .22s var(--ti-ease);
}
.ti-countries--orbs .ti-country:hover{transform:translateY(-4px)}

.ti-orb{
	position:relative;isolation:isolate;
	width:clamp(58px,7vw,72px);aspect-ratio:1;
	border-radius:50%;overflow:hidden;
	box-shadow:
		0 10px 20px rgba(0,0,0,.4),
		0 2px 5px rgba(0,0,0,.35),
		0 0 0 1px rgba(255,255,255,.16);
	transition:box-shadow .22s var(--ti-ease);
}
.ti-country:hover .ti-orb{
	box-shadow:
		0 16px 28px rgba(0,0,0,.48),
		0 3px 7px rgba(0,0,0,.4),
		0 0 0 1px var(--ti-gold-400);
}

/* The flag fills the sphere; ti_flag() sets width/height attributes, so both
   are overridden here rather than relying on the intrinsic 32x24. */
.ti-orb .ti-flag{
	display:block;width:100%;height:100%;
	object-fit:cover;border-radius:0;box-shadow:none;
}

/* Sphere shading: a highlight from the upper left, and a terminator that
   darkens the lower right so the disc reads as a ball, not a sticker. */
.ti-orb__shade{
	position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
	border-radius:50%;
	background:
		radial-gradient(circle at 30% 26%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 26%,transparent 46%),
		radial-gradient(circle at 68% 76%,rgba(0,0,0,.42) 0%,transparent 58%);
	box-shadow:inset -3px -5px 10px rgba(0,0,0,.4),inset 2px 3px 8px rgba(255,255,255,.22);
}
.ti-orb__shade i{display:block;height:100%}

.ti-countries--orbs .ti-country__name{
	color:rgba(255,255,255,.86);
	font-size:var(--ti-fs-xs);font-weight:600;line-height:1.35;
	text-align:center;text-wrap:balance;
}

/* Retained for any list that is not the orb treatment. */
.ti-countries{
	display:grid;gap:var(--ti-sp-3);
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	margin:0;padding:0;list-style:none;
}
.ti-country__num{color:rgba(255,255,255,.4);font-family:var(--ti-font-mono);font-size:var(--ti-fs-xs);font-weight:700;flex:0 0 auto}
.ti-country__name{color:#fff;font-size:var(--ti-fs-sm);font-weight:500;line-height:1.35}

.ti-flag{
	flex:0 0 32px;width:32px;height:24px;
	object-fit:cover;border-radius:3px;
	box-shadow:0 0 0 1px rgba(255,255,255,.22);
}
.ti-flag--fallback{
	display:inline-flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.14);color:#fff;
	font-family:var(--ti-font-mono);font-size:10px;font-weight:700;
}

/* ---------------------------------------------------------- Management --- */

.ti-leader{text-align:center}
.ti-leader__photo{
	position:relative;
	width:clamp(120px,16vw,160px);aspect-ratio:1;
	margin:0 auto var(--ti-sp-4);
	background:linear-gradient(160deg,var(--ti-navy-700),var(--ti-navy-900));
	border:3px solid var(--ti-white);border-radius:50%;
	box-shadow:var(--ti-shadow-lg);
	overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.ti-leader__photo img{width:100%;height:100%;object-fit:cover}
.ti-leader__monogram{color:var(--ti-gold-400);font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:700;letter-spacing:.04em}
.ti-leader__name{margin:0 0 var(--ti-sp-1);font-size:1.05rem}
.ti-leader__pending{color:var(--ti-mute);font-weight:500;font-style:italic;font-size:.95rem}
.ti-leader__role{
	margin:0;color:var(--ti-gold-600);
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.ti-gallery{margin-top:clamp(3rem,6vw,4.5rem);padding-top:var(--ti-sp-7);border-top:1px solid var(--ti-line)}
.ti-gallery__title{text-align:center;margin-bottom:var(--ti-sp-6);font-size:1.15rem}
/* The strip shifts by exactly one repeat, so it only stays covered while the
   repeats behind it are wider than the viewport. No repeat count can promise
   that against a viewport with no upper bound, so each repeat is instead made
   at least as wide as the viewport itself: one repeat then always covers the
   box, whatever the screen. On a phone the repeat is naturally wider than the
   box already, so min-width does nothing and the spacing stays tight. */
/* 100% would resolve against the track, and the track is width:max-content —
   so the percentage is indeterminate and the rule did nothing. Container units
   resolve against the viewport box itself, which is the measurement that
   actually matters here. */
@supports (container-type:inline-size){
	.ti-gallery__viewport{container-type:inline-size}
	.ti-gallery__list{min-width:100cqw;justify-content:space-evenly}
}

.ti-gallery__track{display:flex;gap:var(--ti-sp-6);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ti-gallery__list{display:flex;flex:0 0 auto;gap:var(--ti-sp-6);margin:0;padding:0;list-style:none;animation:ti-marquee 42s linear infinite}
.ti-gallery__track:hover .ti-gallery__list{animation-play-state:paused}
@keyframes ti-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--ti-sp-6)))}}
.ti-gallery__item{display:flex;flex-direction:column;align-items:center;gap:.6rem;flex:0 0 auto;width:120px;margin:0;text-align:center}
.ti-gallery__item img,.ti-gallery__item .ti-leader__monogram{
	width:96px;height:96px;border-radius:50%;object-fit:cover;
	background:linear-gradient(160deg,var(--ti-navy-700),var(--ti-navy-900));
	display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.ti-gallery__name{color:var(--ti-slate);font-size:var(--ti-fs-xs);font-weight:600}

/* ---------------------------------------------------------------- Fees --- */

.ti-fees{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media (min-width:940px){.ti-fees{grid-template-columns:1.35fr .9fr}}

.ti-fees__list{margin:0;padding:0;list-style:none}
.ti-fees__item{display:flex;gap:var(--ti-sp-4);align-items:flex-start;margin:0;padding:var(--ti-sp-5) 0}
.ti-fees__item+.ti-fees__item{border-top:1px solid var(--ti-line)}
.ti-fees__num{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;flex:0 0 34px;
	background:var(--ti-navy-700);color:#fff;border-radius:50%;
	font-size:var(--ti-fs-sm);font-weight:700;
}
.ti-fees__text{margin:0;color:var(--ti-slate);font-size:var(--ti-fs-base);line-height:1.65}

.ti-fees__highlight{
	position:sticky;top:calc(var(--ti-header-h) + var(--ti-adminbar-h) + 20px);
	padding:clamp(1.5rem,3vw,2rem);
	background:linear-gradient(165deg,var(--ti-navy-800),var(--ti-navy-900));
	border-radius:var(--ti-r-lg);
	box-shadow:var(--ti-shadow-lg);
	color:rgba(255,255,255,.8);text-align:center;
	overflow:hidden;
}
.ti-fees__highlight::before{
	content:"";position:absolute;inset:-40% -30% auto auto;width:240px;height:240px;
	background:radial-gradient(circle,rgba(224,172,70,.22),transparent 70%);
}
.ti-fees__highlight>*{position:relative}
.ti-fees__figure{margin:0;color:var(--ti-gold-400);font-size:clamp(2.6rem,6vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.ti-fees__figure-label{margin:var(--ti-sp-3) 0 0;color:rgba(255,255,255,.7);font-size:var(--ti-fs-sm)}
.ti-fees__rule{margin:var(--ti-sp-5) 0;border:0;border-top:1px solid rgba(255,255,255,.14)}
.ti-fees__points{margin:0;padding:0;list-style:none;text-align:left}
.ti-fees__points li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:var(--ti-sp-3);font-size:var(--ti-fs-sm)}
.ti-fees__points li:last-child{margin-bottom:0}
.ti-fees__points svg{flex:0 0 18px;margin-top:3px;color:var(--ti-gold-400)}

/* ------------------------------------------------------------- Journey --- */

.ti-journey{position:relative;margin:0;padding:0 0 0 clamp(2.25rem,5vw,3.5rem);list-style:none}
.ti-journey::before{
	content:"";position:absolute;top:14px;bottom:14px;
	left:clamp(1rem,2.4vw,1.65rem);width:2px;
	background:linear-gradient(180deg,var(--ti-gold-500),var(--ti-navy-600) 22%,var(--ti-navy-600) 78%,transparent);
}
.ti-journey__step{position:relative;margin:0 0 var(--ti-sp-6)}
.ti-journey__step:last-child{margin-bottom:0}
.ti-journey__marker{
	position:absolute;left:calc(clamp(2.25rem,5vw,3.5rem) * -1);top:2px;
	width:clamp(2rem,4.8vw,3.3rem);display:flex;justify-content:flex-start;
}
.ti-journey__num{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;
	background:var(--ti-white);border:2px solid var(--ti-navy-600);border-radius:50%;
	color:var(--ti-navy-700);font-size:var(--ti-fs-sm);font-weight:700;
	box-shadow:0 0 0 5px var(--ti-gray-100);
}
.ti-journey__step:hover .ti-journey__num{background:var(--ti-gold-500);border-color:var(--ti-gold-500);color:var(--ti-navy-900)}
.ti-journey__body{
	padding:var(--ti-sp-5);
	background:var(--ti-white);border:1px solid var(--ti-line);border-radius:var(--ti-r-lg);
	box-shadow:var(--ti-shadow-sm);
	transition:transform .2s var(--ti-ease),box-shadow .2s var(--ti-ease);
}
.ti-journey__step:hover .ti-journey__body{transform:translateX(3px);box-shadow:var(--ti-shadow)}
.ti-journey__title{margin:0 0 var(--ti-sp-3);font-size:1.15rem;line-height:1.35}
.ti-journey__step-label{
	display:block;margin-bottom:.3rem;color:var(--ti-gold-600);
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.ti-journey__text{margin:0;color:var(--ti-slate);font-size:var(--ti-fs-sm);line-height:1.7}
.ti-journey__note{
	display:flex;gap:.85rem;align-items:flex-start;
	margin-top:var(--ti-sp-7);padding:var(--ti-sp-5);
	background:var(--ti-blue-100);border-left:3px solid var(--ti-navy-600);border-radius:var(--ti-r);
}
.ti-journey__note svg{flex:0 0 20px;margin-top:3px;color:var(--ti-navy-700)}
.ti-journey__note p{margin:0;color:var(--ti-navy-800);font-size:var(--ti-fs-sm);line-height:1.7}

/* ------------------------------------------------------------ CTA band --- */

.ti-ctaband{
	position:relative;
	padding-block:clamp(3.5rem,8vw,6rem);
	overflow:hidden;
	text-align:center;
	isolation:isolate;
}
.ti-ctaband__bg{position:absolute;inset:0;z-index:-2}
.ti-ctaband__img{width:100%;height:100%;object-fit:cover}
.ti-ctaband::after{
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(120deg,rgba(4,24,46,.95) 0%,rgba(10,42,74,.9) 52%,rgba(17,58,99,.84) 100%);
}
.ti-ctaband__inner{position:relative;max-width:44rem;margin-inline:auto}
.ti-ctaband__title{margin:0 0 var(--ti-sp-4);color:#fff;font-size:var(--ti-fs-h2);letter-spacing:-.03em}
.ti-ctaband__lede{margin:0;color:rgba(255,255,255,.76);font-size:var(--ti-fs-lg)}
.ti-ctas--band{justify-content:center;margin-top:var(--ti-sp-7)}

/* ------------------------------------------------------------- Contact --- */

.ti-contact{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media (min-width:940px){.ti-contact{grid-template-columns:1.25fr .85fr}}

.ti-contact__form-wrap{
	padding:clamp(1.5rem,3vw,2.25rem);
	background:var(--ti-white);border:1px solid var(--ti-line);border-radius:var(--ti-r-lg);
	box-shadow:var(--ti-shadow);
}
.ti-contact__aside{
	padding:clamp(1.5rem,3vw,2.25rem);
	background:var(--ti-navy-800);border-radius:var(--ti-r-lg);
	color:rgba(255,255,255,.75);
}
.ti-contact__h{margin:0 0 var(--ti-sp-5);color:#fff;font-size:1.15rem}
.ti-contact__list{margin:0 0 var(--ti-sp-6);padding:0;list-style:none}
.ti-contact__list li{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:var(--ti-sp-5)}
.ti-contact__list li:last-child{margin-bottom:0}
.ti-contact__list svg{flex:0 0 20px;margin-top:2px;color:var(--ti-gold-400)}
.ti-contact__label{
	display:block;margin-bottom:2px;color:rgba(255,255,255,.5);
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.ti-contact__value{display:block;color:#fff;font-size:var(--ti-fs-sm);line-height:1.55}
a.ti-contact__value:hover{color:var(--ti-gold-400)}
.ti-contact__value--pending{color:rgba(255,255,255,.55);font-style:italic}

/* ---------------------------------------------------------------- Form --- */

.ti-form__row{display:grid;gap:var(--ti-sp-4);margin-bottom:var(--ti-sp-4)}
@media (min-width:600px){.ti-form__row{grid-template-columns:1fr 1fr}}
.ti-field{margin-bottom:var(--ti-sp-4)}
.ti-form__row .ti-field{margin-bottom:0}

.ti-field__label{display:block;margin-bottom:.4rem;color:var(--ti-navy-800);font-size:var(--ti-fs-sm);font-weight:600}
.ti-req{color:#B4232A}

.ti-input{
	display:block;width:100%;padding:.8rem .95rem;
	background:var(--ti-white);border:1.5px solid var(--ti-gray-300);border-radius:var(--ti-r-sm);
	color:var(--ti-ink);font-family:inherit;font-size:var(--ti-fs-base);line-height:1.5;
	transition:border-color .16s var(--ti-ease),box-shadow .16s var(--ti-ease);
}
.ti-input:hover{border-color:var(--ti-mute)}
.ti-input:focus{outline:none;border-color:var(--ti-blue-500);box-shadow:0 0 0 3px rgba(42,111,181,.16)}
textarea.ti-input{resize:vertical;min-height:120px}
select.ti-input{
	appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355637A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem;
}

.ti-check{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:var(--ti-sp-5);font-size:var(--ti-fs-sm);color:var(--ti-slate)}
.ti-check input{margin-top:.28rem;width:17px;height:17px;flex:0 0 17px;accent-color:var(--ti-navy-700)}

/* Honeypot — off-screen but not display:none, which some bots detect. */
.ti-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.ti-notice{
	display:flex;gap:.75rem;align-items:flex-start;
	margin-bottom:var(--ti-sp-5);padding:var(--ti-sp-4);
	border-radius:var(--ti-r-sm);font-size:var(--ti-fs-sm);
}
.ti-notice strong{display:block}
.ti-notice--success{background:#E8F6EE;border:1px solid #A8DCC0;color:#1B5E38}
.ti-notice--success svg{color:#1B7C46;flex:0 0 20px;margin-top:2px}
.ti-notice--error{background:#FDECEC;border:1px solid #F1B9B9;color:#8C1D22}

/* ==========================================================================
   February 2026 modification briefs — new components
   ========================================================================== */

/* ------------------------------------------------- Drawn illustrations --- */

/* Illustration frames are not photo frames: no white mat, no heavy border.
   The art already carries its own rounded panel, so the frame only supplies
   depth. */
.ti-hero__frame--art{
	border:0;
	background:none;
	box-shadow:0 30px 70px rgba(10,42,74,.28),0 10px 24px rgba(10,42,74,.14);
}
.ti-art{display:block;width:100%;height:auto}

.ti-media--art{padding-bottom:clamp(2rem,5vw,3.25rem);padding-right:0}
.ti-media--art .ti-art{
	border-radius:var(--ti-r-xl);
	box-shadow:var(--ti-shadow-lg);
}

/* The pulses travelling the connector wires are decoration; hold them still
   for anyone who has asked for less motion. */
@media (prefers-reduced-motion:reduce){
	.ti-art__flow{display:none}
}

/* ----------------------------------------------- Hero glass callouts ----- */

/* Brief 1.9: transparent boxes, title only, and they must survive on mobile. */
.ti-float--glass{
	gap:.6rem;padding:.7rem 1rem;max-width:none;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.4);
	box-shadow:0 8px 24px rgba(4,24,46,.22);
	backdrop-filter:blur(10px) saturate(140%);
	-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.ti-float--glass .ti-float__icon{
	width:32px;height:32px;flex-basis:32px;
	background:rgba(224,172,70,.28);color:var(--ti-gold-300);
}
.ti-float__label{
	color:#fff;font-size:var(--ti-fs-sm);font-weight:700;
	line-height:1.25;letter-spacing:-.01em;white-space:nowrap;
	text-shadow:0 1px 3px rgba(4,24,46,.5);
}

/* Reposition for the taller illustration panel. */
.ti-float--glass.ti-float--a{top:9%;left:-12%}
/* This variant is the one the hero actually uses, and it overhangs by 12%.
   With the shell uncapped that grew with the art: at 2560 it put the chip
   24px from the edge of the screen. Clamped to a fixed 48px overhang. */
.ti-float--glass.ti-float--b{top:44%;right:max(-12%,-48px);bottom:auto}
.ti-float--glass.ti-float--c{bottom:5%;left:-9%;flex-direction:row;align-items:center;gap:.6rem;max-width:none}

@media (max-width:640px){
	/* Brief 1.9 keeps the callouts on mobile, so they become a row of chips
	   under the artwork rather than disappearing. */
	.ti-float--glass{
		background:var(--ti-navy-800);border-color:rgba(255,255,255,.16);
		backdrop-filter:none;-webkit-backdrop-filter:none;
	}
	.ti-hero__visual{gap:.5rem}
}

/* ------------------------------------------------------ Two-up figures --- */

.ti-stats--pair{
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	max-width:820px;margin-inline:auto;
	gap:var(--ti-sp-6);
}
.ti-stats--pair .ti-stat{padding-left:var(--ti-sp-6)}
.ti-stats--pair .ti-stat__value{font-size:clamp(2.4rem,5vw,3.4rem)}
.ti-stats--pair .ti-stat__label{font-size:var(--ti-fs-md);color:rgba(255,255,255,.74)}

/* ------------------------------------------------------- FAQ answers ----- */

/* Brief 2.2: every question carries its own answer, so the panel now holds
   real content and is styled as an answer rather than a footnote. */
.ti-acc__answer{
	display:flex;gap:.6rem;align-items:flex-start;
	margin:0;padding:.85rem 1rem;
	background:var(--ti-gray-100);
	border-left:3px solid var(--ti-gold-500);
	border-radius:0 var(--ti-r-sm) var(--ti-r-sm) 0;
	color:var(--ti-charcoal);font-size:var(--ti-fs-sm);line-height:1.62;
}
.ti-acc__answer-mark{
	display:inline-flex;align-items:center;justify-content:center;
	width:20px;height:20px;flex:0 0 20px;margin-top:.1rem;
	background:var(--ti-gold-500);color:#fff;border-radius:50%;
}

/* ------------------------------------------------------ Management ------- */

.ti-leaders--square{
	display:grid;gap:var(--ti-sp-5);
	grid-template-columns:repeat(4,1fr);
}
/* Brief 7.1: four across, or two per row when there is not room for four. */
@media (max-width:1000px){.ti-leaders--square{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.ti-leaders--square{grid-template-columns:1fr}}

.ti-leaders--square .ti-leader__photo{
	width:100%;max-width:230px;aspect-ratio:1;
	border-radius:var(--ti-r-lg);
	border-width:4px;
}

/* --------------------------------------------------------- Fee donut ----- */

.ti-donut{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--ti-sp-4)}
.ti-donut__svg{display:block;width:100%;max-width:264px;height:auto}
.ti-donut__cap{
	display:grid;grid-template-columns:auto 1fr;gap:.4rem .55rem;align-items:center;
	width:100%;
	color:var(--ti-slate);font-size:var(--ti-fs-xs);line-height:1.4;
	/* The panel centres its text; the legend reads against its keys. */
	text-align:left;
}
.ti-donut__key{width:12px;height:12px;border-radius:3px;display:block}
.ti-donut__key--track{background:var(--ti-navy-800)}
.ti-donut__key--slice{background:var(--ti-gold-400)}

/* -------------------------------------------- Journey: stage 8 and 9 ----- */

/* Brief 3.2: the five payment instruments, presented one by one as minimal
   highlighted options rather than buried in a sentence. */
.ti-payopts{
	display:flex;flex-wrap:wrap;gap:.5rem;
	margin:var(--ti-sp-4) 0;padding:0;list-style:none;
}
.ti-payopt{
	display:inline-flex;align-items:center;gap:.45rem;
	margin:0;padding:.45rem .85rem;
	background:var(--ti-white);
	border:1px solid var(--ti-gray-300);
	border-radius:var(--ti-r-pill);
	color:var(--ti-navy-800);font-size:var(--ti-fs-xs);font-weight:700;
	transition:border-color .18s var(--ti-ease),background .18s var(--ti-ease);
}
.ti-payopt:hover{border-color:var(--ti-gold-400);background:var(--ti-gold-100)}
.ti-payopt__mark{
	display:inline-flex;align-items:center;justify-content:center;
	width:17px;height:17px;flex:0 0 17px;
	background:var(--ti-gold-500);color:#fff;border-radius:50%;
}

/* Brief 3.4: the three inspection tiers, one by one. */
.ti-tiers{
	display:grid;gap:.6rem;
	margin:var(--ti-sp-4) 0;padding:0;list-style:none;
}
.ti-tier{
	display:flex;gap:var(--ti-sp-4);align-items:flex-start;
	margin:0;padding:var(--ti-sp-4);
	background:var(--ti-white);
	border:1px solid var(--ti-line);
	border-left:3px solid var(--ti-navy-600);
	border-radius:var(--ti-r);
}
.ti-tier:nth-child(2){border-left-color:var(--ti-blue-500)}
.ti-tier:nth-child(3){border-left-color:var(--ti-gold-500)}
.ti-tier__badge{
	flex:0 0 auto;padding:.3rem .65rem;
	background:var(--ti-navy-800);color:#fff;
	border-radius:var(--ti-r-sm);
	font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
	white-space:nowrap;
}
.ti-tier:nth-child(3) .ti-tier__badge{background:var(--ti-gold-600)}
.ti-tier__body{min-width:0}
.ti-tier__title{margin:0 0 .25rem;font-size:var(--ti-fs-md);font-weight:700;line-height:1.3;color:var(--ti-navy-800)}
.ti-tier__text{margin:0;color:var(--ti-slate);font-size:var(--ti-fs-sm);line-height:1.6}

@media (max-width:560px){
	.ti-tier{flex-direction:column;gap:.5rem}
}

.ti-journey__text--after{margin-top:var(--ti-sp-3)}

/* Brief 3.5: the closing paragraph is promoted out of the timeline. */
.ti-journey__note--closing{
	display:flex;gap:var(--ti-sp-4);align-items:flex-start;
	margin-top:var(--ti-sp-7);
	padding:clamp(1.35rem,3vw,2rem);
	background:linear-gradient(135deg,var(--ti-navy-800),var(--ti-navy-900));
	border:0;border-radius:var(--ti-r-lg);
	box-shadow:var(--ti-shadow-lg);
}
.ti-journey__note--closing p{margin:0;color:rgba(255,255,255,.78);font-size:var(--ti-fs-sm);line-height:1.7}
.ti-journey__note-title{
	margin:0 0 .4rem;color:#fff;
	font-size:var(--ti-fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.25;
}
.ti-journey__note-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:48px;height:48px;flex:0 0 48px;
	background:rgba(224,172,70,.18);color:var(--ti-gold-400);
	border-radius:var(--ti-r);
}

/* ---------------------------------------------------- Solid CTA band ----- */

/* Brief 8.4: the retained CTA pair sits in a blue block, not over a photo. */
.ti-ctaband--solid{
	background:linear-gradient(135deg,var(--ti-navy-700) 0%,var(--ti-navy-900) 62%,var(--ti-navy-800) 100%);
}
.ti-ctaband--solid .ti-ctaband__bg{display:none}
.ti-ctaband__grid{
	position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
	opacity:.5;
	background-image:
		linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
	background-size:48px 48px;
	-webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
	mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.ti-ctaband__grid i{display:block;height:100%}

/* ==========================================================================
   Review corrections
   ========================================================================== */

/* The orb layout must beat the plain .ti-countries list rule that follows it in
   this file — same specificity means source order decides, so qualify it. */
.ti-countries.ti-countries--orbs{
	grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
}

/* The fee panel is navy, and the donut is drawn in navy on a light ground.
   Flip the panel to the light sand plane when it holds the graph, so the
   circle and its labels are legible. */
.ti-fees__highlight:has(.ti-donut){
	background:var(--ti-sand-100);
	color:var(--ti-charcoal);
	border:1px solid var(--ti-gray-300);
}
.ti-fees__highlight:has(.ti-donut)::before{
	background:radial-gradient(circle,rgba(224,172,70,.28),transparent 70%);
}
.ti-fees__highlight:has(.ti-donut) .ti-fees__points{
	margin-top:var(--ti-sp-5);padding-top:var(--ti-sp-5);
	border-top:1px solid var(--ti-gray-300);
	color:var(--ti-charcoal);
}
.ti-fees__highlight:has(.ti-donut) .ti-fees__points svg{color:var(--ti-gold-600)}

/* :has() is well supported now, but a browser without it would leave navy text
   on a navy panel — which is unreadable rather than merely unstyled. This
   fallback keys off the panel's own class instead. */
@supports not selector(:has(*)){
	.ti-fees__highlight{background:var(--ti-sand-100);color:var(--ti-charcoal);border:1px solid var(--ti-gray-300)}
	.ti-fees__highlight .ti-fees__points svg{color:var(--ti-gold-600)}
}

/* The About artwork's badge was sitting on top of the lower ring labels. */
.ti-media--art{padding-bottom:clamp(3.25rem,6vw,4.75rem)}

/* The executive marquee holds only two people today. A marquee needs enough
   items to fill the track twice, or it shows a visible gap and clipped names —
   so below that threshold it simply centres and holds still. */
.ti-gallery__track{justify-content:center}
.ti-gallery--few .ti-gallery__list{animation:none}
.ti-gallery--few .ti-gallery__list[aria-hidden="true"]{display:none}
.ti-gallery--few .ti-gallery__track{
	-webkit-mask-image:none;mask-image:none;
	flex-wrap:wrap;gap:var(--ti-sp-6);
}

/* ==========================================================================
   Legal documents — Privacy Policy and Website Terms & Conditions
   ========================================================================== */

.ti-legalhead{
	padding-block:clamp(2.5rem,6vw,4rem);
	background:linear-gradient(135deg,var(--ti-navy-800) 0%,var(--ti-navy-900) 70%);
	color:rgba(255,255,255,.78);
}
.ti-legalhead__kicker{
	margin:0 0 .6rem;color:var(--ti-gold-400);
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.ti-legalhead__title{
	margin:0 0 .75rem;color:#fff;
	font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;
}
.ti-legalhead__meta{
	margin:0 0 1.25rem;color:rgba(255,255,255,.55);
	font-size:var(--ti-fs-sm);
}
.ti-legalhead__scope{
	margin:0;max-width:62rem;
	padding:1rem 1.25rem;
	background:rgba(255,255,255,.06);
	border-left:3px solid var(--ti-gold-400);
	border-radius:0 var(--ti-r-sm) var(--ti-r-sm) 0;
	font-size:var(--ti-fs-sm);line-height:1.7;
}

/* Contents beside the text on a wide screen, above it on a narrow one. */
.ti-legal{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:1000px){
	.ti-legal{grid-template-columns:minmax(230px,270px) minmax(0,1fr)}
}

.ti-legal__toc{
	padding:var(--ti-sp-5);
	background:var(--ti-gray-100);
	border:1px solid var(--ti-line);
	border-radius:var(--ti-r-lg);
}
@media (min-width:1000px){
	.ti-legal__toc{
		position:sticky;
		top:calc(var(--ti-header-h) + var(--ti-adminbar-h) + 20px);
		max-height:calc(100vh - var(--ti-header-h) - 60px);
		overflow-y:auto;
	}
}
.ti-legal__toc-title{
	margin:0 0 .75rem;
	font-size:var(--ti-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:var(--ti-mute);
}
.ti-legal__toc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.1rem}
.ti-legal__toc-list a{
	display:block;padding:.4rem .55rem;border-radius:var(--ti-r-sm);
	color:var(--ti-slate);font-size:var(--ti-fs-xs);line-height:1.45;text-decoration:none;
}
.ti-legal__toc-list a:hover,.ti-legal__toc-list a:focus-visible{
	background:var(--ti-white);color:var(--ti-navy-800);
}

.ti-legal__body{min-width:0;max-width:62rem}
.ti-legal__sec{
	padding-top:var(--ti-sp-6);margin-top:var(--ti-sp-6);
	border-top:1px solid var(--ti-line);
	/* Clear the sticky header when jumped to from the contents list. */
	scroll-margin-top:calc(var(--ti-header-h) + var(--ti-adminbar-h) + 16px);
}
.ti-legal__sec:first-child{padding-top:0;margin-top:0;border-top:0}

.ti-legal__h{
	margin:0 0 var(--ti-sp-4);
	color:var(--ti-navy-800);
	font-size:clamp(1.15rem,2vw,1.4rem);font-weight:800;letter-spacing:-.015em;line-height:1.3;
}
.ti-legal__h3{
	margin:var(--ti-sp-5) 0 var(--ti-sp-3);
	color:var(--ti-navy-700);
	font-size:var(--ti-fs-md);font-weight:700;line-height:1.35;
}
.ti-legal__p{margin:0 0 var(--ti-sp-4);color:var(--ti-charcoal);font-size:var(--ti-fs-sm);line-height:1.75}
.ti-legal__p:last-child{margin-bottom:0}

.ti-legal__list{margin:0 0 var(--ti-sp-4);padding-left:1.35rem;color:var(--ti-charcoal)}
.ti-legal__list li{margin-bottom:.5rem;font-size:var(--ti-fs-sm);line-height:1.7}
.ti-legal__list li:last-child{margin-bottom:0}
.ti-legal__list--ul{list-style:disc}
.ti-legal__list--ol{list-style:decimal}
.ti-legal__list strong{color:var(--ti-navy-800)}

.ti-legal__note{
	margin:0 0 var(--ti-sp-4);padding:.9rem 1.15rem;
	background:var(--ti-gold-100);
	border-left:3px solid var(--ti-gold-500);
	border-radius:0 var(--ti-r-sm) var(--ti-r-sm) 0;
	color:var(--ti-charcoal);font-size:var(--ti-fs-sm);line-height:1.7;
}
.ti-legal__note strong{color:var(--ti-gold-600)}

.ti-legal__kv{width:100%;border-collapse:collapse;margin:0 0 var(--ti-sp-4);font-size:var(--ti-fs-sm)}
.ti-legal__kv th,.ti-legal__kv td{
	padding:.65rem .85rem;text-align:left;vertical-align:top;
	border:1px solid var(--ti-line);
}
.ti-legal__kv th{width:34%;background:var(--ti-gray-100);color:var(--ti-navy-800);font-weight:600}
@media (max-width:520px){
	.ti-legal__kv th,.ti-legal__kv td{display:block;width:100%;border-bottom:0}
	.ti-legal__kv tr:last-child td{border-bottom:1px solid var(--ti-line)}
}

.ti-legal__cross{
	display:flex;gap:.85rem;align-items:flex-start;
	margin-top:var(--ti-sp-7);padding:1.1rem 1.35rem;
	background:var(--ti-blue-100);
	border-radius:var(--ti-r-lg);
}
.ti-legal__cross svg{flex:0 0 22px;color:var(--ti-navy-700);margin-top:2px}
.ti-legal__cross p{margin:0;font-size:var(--ti-fs-sm);line-height:1.6;color:var(--ti-navy-800)}

/* ==========================================================================
   Client review round 3 — real photography, icon-free highlights, brand lockup
   ========================================================================== */

/* ---------------------------------------------------- About Us photo ----- */

.ti-media--photo{position:relative;padding-bottom:clamp(2.5rem,5vw,3.5rem);padding-right:0}
.ti-media__frame{
	margin:0;border-radius:var(--ti-r-xl);overflow:hidden;
	box-shadow:var(--ti-shadow-lg);
}
.ti-media--photo .ti-media__img{
	display:block;width:100%;height:auto;
	aspect-ratio:16 / 10;object-fit:cover;
}

/* ------------------------------------------- Role hero photograph -------- */

/* A photograph gets the white mat and deep shadow the drawn panels do not
   need — the artwork carries its own edge, a photo does not. */
.ti-hero__frame--photo{
	border:5px solid var(--ti-white);
	border-radius:var(--ti-r-xl);
	box-shadow:0 28px 64px rgba(10,42,74,.24),0 8px 20px rgba(10,42,74,.1);
}
.ti-hero__frame--photo .ti-hero__photo{
	display:block;width:100%;height:auto;
	aspect-ratio:16 / 9;object-fit:cover;
}

/* ------------------------------------------------------- Fee chart ------- */

.ti-feechart{
	margin:0 0 clamp(2.25rem,5vw,3.25rem);
	border-radius:var(--ti-r-lg);
	overflow:hidden;
	box-shadow:var(--ti-shadow);
	background:var(--ti-white);
}
.ti-feechart__img{display:block;width:100%;height:auto}

/* The two labels sit over the artwork. Their type is sized against the figure
   rather than the viewport, so a label keeps the same proportion to the pie
   whether the chart is 900px wide or 340px. The vw values are the fallback for
   anything without container queries. */
.ti-feechart{position:relative}
.ti-feechart__title{
	position:absolute;left:4.5%;top:5.5%;z-index:2;
	margin:0;max-width:36%;
	color:var(--ti-navy-800);
	font-size:clamp(.72rem,2.5vw,1.6rem);font-weight:800;
	line-height:1.18;letter-spacing:-.015em;
}
/* A chip, sized to its own text rather than to a share of the picture. The
   earlier version was a fixed 29% of the image width with large type, which
   took a quarter of the chart and kept colliding with the pie as the artwork
   scaled. Anchored to the right edge, where the pie never reaches: measured off
   the source, its silhouette stops at 68.5% of the width and only reaches about
   63% at this height. */
.ti-feechart__callout{
	position:absolute;right:2.5%;top:23%;z-index:2;
	display:inline-flex;align-items:center;gap:.45em;
	margin:0;padding:.4em .7em .4em .45em;
	background:rgba(255,255,255,.92);
	border:1px solid var(--ti-gold-300);
	border-radius:var(--ti-r-pill);
	box-shadow:0 2px 8px rgba(10,42,74,.1);
	color:var(--ti-navy-800);line-height:1.2;
	font-size:clamp(.58rem,1.5vw,.95rem);
}
.ti-feechart__callout-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:1.9em;height:1.9em;flex:0 0 1.9em;
	background:var(--ti-gold-100);color:var(--ti-gold-600);
	border-radius:50%;
}
.ti-feechart__callout-icon .ti-icon{width:1.05em;height:1.05em}
.ti-feechart__callout-text{display:block}
.ti-feechart__callout strong{
	display:block;
	font-size:1em;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
}
.ti-feechart__callout-text span{
	display:block;
	font-size:.78em;font-weight:600;color:var(--ti-slate);white-space:nowrap;
}
/* Below the tablet width the label type stops shrinking with the artwork — it
   hits a readability floor at about 10px — so the two lines take proportionally
   much more room than they do on a desktop and no longer fit the gap between
   the badge and the pie. Dropping them lower only moved the second line onto
   the pie itself, where grey text on navy is unreadable.

   Measured off the artwork, the pie's silhouette never reaches past 68.5% of
   the width, and the badge sits at 71%. So on a small screen the label stops
   being centred under the badge and is anchored to the right edge instead,
   inside the band that is always empty pale blue whatever the size. */
@media (max-width:700px){
	.ti-feechart__callout{top:22%;right:2%}
}

/* On a phone the chip's type stops shrinking with the artwork, so a two-line
   chip grows tall enough to reach down to where the pie is widening and starts
   clipping it again. One line keeps it in the narrow part of the frame. The
   second line is hidden from sight but still announced — and the same words
   are in the fee points directly below the chart. */
@media (max-width:480px){
	.ti-feechart__callout{
		gap:.3em;padding:.3em .55em .3em .35em;
		font-size:clamp(.54rem,2.6vw,.8rem);
	}
	.ti-feechart__callout-icon{width:1.6em;height:1.6em;flex:0 0 1.6em}
	.ti-feechart__callout-text span{
		position:absolute;width:1px;height:1px;padding:0;margin:-1px;
		overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
	}
}

@supports (container-type:inline-size){
	.ti-feechart{container-type:inline-size}
	.ti-feechart__title{font-size:clamp(.72rem,2.9cqw,1.6rem)}
	.ti-feechart__callout{font-size:clamp(.58rem,1.75cqw,.95rem)}
}

/* The numbered points now sit under the chart rather than beside it, so they
   read as two comfortable columns instead of one narrow one. */
.ti-fees{display:block}
.ti-fees__list{
	display:grid;gap:var(--ti-sp-4) clamp(1.5rem,4vw,3rem);
	grid-template-columns:1fr;
	max-width:1000px;margin-inline:auto;
}
@media (min-width:820px){
	.ti-fees__list{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------- Highlights: numbered rows --- */

/* Nine points, one per row, to the client's reference design: index chip,
   icon, statement, and the line that explains it.

   This replaces a three-by-three grid of cards. Nine titles of very different
   lengths never filled a grid cell evenly, and a grid asks the reader to scan
   in two directions for what is really an ordered list from one to nine. */

.ti-highlights{
	display:grid;gap:.55rem;
	margin:0;padding:0;list-style:none;
}

.ti-highlight{
	--ti-hl-accent:var(--ti-navy-600);
	--ti-hl-tint:var(--ti-gray-100);

	position:relative;overflow:hidden;
	display:grid;grid-template-columns:auto auto 1fr;align-items:center;
	gap:clamp(.8rem,1.8vw,1.3rem);
	margin:0;padding:clamp(.8rem,1.8vw,1.05rem) clamp(.95rem,2.2vw,1.4rem);
	background:var(--ti-hl-tint);
	border:1px solid transparent;
	border-radius:var(--ti-r);
	transition:transform .18s var(--ti-ease),box-shadow .18s var(--ti-ease),
			   border-color .18s var(--ti-ease);
}

/* The accent is a rule drawn inside the row rather than a border, so hovering
   cannot change the row's height by a pixel. */
.ti-highlight::before{
	content:"";position:absolute;inset:0 auto 0 0;width:3px;
	background:var(--ti-hl-accent);
}

/* Three brand tones on a cycle. Nine rows need rhythm, but nine different
   hues would be the only rainbow on the site. */
.ti-highlight--t0{--ti-hl-accent:var(--ti-gold-500);--ti-hl-tint:var(--ti-gold-100)}
.ti-highlight--t1{--ti-hl-accent:var(--ti-blue-500);--ti-hl-tint:var(--ti-blue-100)}
/* White, not grey: this section's own background is --ti-gray-100, so a grey
   row would vanish into it. White reads as a card against it. */
.ti-highlight--t2{--ti-hl-accent:var(--ti-navy-600);--ti-hl-tint:var(--ti-white)}

.ti-highlight:hover{
	transform:translateX(3px);
	box-shadow:var(--ti-shadow);
	border-color:var(--ti-hl-accent);
}

.ti-highlight__num{
	display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;
	background:var(--ti-white);
	border-radius:var(--ti-r-sm);
	color:var(--ti-hl-accent);
	font-family:var(--ti-font-mono);font-size:1.05rem;font-weight:800;
	line-height:1;letter-spacing:-.02em;
}

.ti-highlight__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;
	background:var(--ti-white);color:var(--ti-hl-accent);
	border-radius:50%;
}

.ti-highlight__text{min-width:0}

.ti-highlight__title{
	margin:0;
	font-size:clamp(.98rem,1.25vw,1.1rem);font-weight:700;
	line-height:1.3;letter-spacing:-.012em;
	color:var(--ti-navy-800);
	text-wrap:balance;
}

.ti-highlight__body{
	margin:.2rem 0 0;
	font-size:var(--ti-fs-sm);line-height:1.45;
	color:var(--ti-slate);
}

@media (max-width:560px){
	/* The icon is the one part a phone can lose: the number already marks the
	   row and the words carry the meaning. */
	.ti-highlight{grid-template-columns:auto 1fr;gap:.75rem;padding:.8rem .9rem}
	.ti-highlight__icon{display:none}
	.ti-highlight__num{width:38px;height:38px;font-size:.95rem}
	.ti-highlight__body{font-size:var(--ti-fs-xs)}
}

/* The badge sits over the corner of the About visual; give it room for two
   lines of caption so the text does not spill past its own white plate. Scoped
   to both variants — it was photo-only, which let the caption overflow again
   the moment the drawn diagram came back. */
.ti-media--photo .ti-media__badge,
.ti-media--art .ti-media__badge{
	max-width:min(320px,88%);
	left:clamp(-1rem,-2vw,0rem);
	padding:.9rem 1.15rem;
}
.ti-media--photo .ti-media__badge span,
.ti-media--art .ti-media__badge span{line-height:1.5}

/* --------------------------------- Sector rows: true full-bleed bands ---- */

/* The rows already sat at 0px from each edge, but a 16px corner radius left a
   white notch at both ends and an 8px gutter between frames left slivers of
   background showing through — both read as a gap. Squared off and butted up,
   each row is now one continuous band from edge to edge. */

.ti-secrow{border-radius:0}

.ti-secrow__list{gap:0;padding:0}
.ti-secframe{border-radius:0}

/* With no gutter the frames touch, so the plate needs its own hard edge rather
   than relying on the first frame starting a little way in. */
.ti-secrow__scrim{
	background:linear-gradient(90deg,
		var(--ti-navy-900) 0%,
		rgba(4,24,46,.34) 20%,
		rgba(4,24,46,.34) 90%,
		rgba(4,24,46,.72) 100%);
}

/* ------------------------------- Sector rows: inset from both edges ------ */

/* The rows previously ran full-bleed to the viewport edges. They now sit on the
   same measure as the section heading above them, using the shell's own
   max-width and gutter, so the left and right edges line up with the rest of
   the page instead of running past it. */

.ti-secrows{
	max-width:var(--ti-shell);
	margin-inline:auto;
	padding-inline:clamp(1.25rem,4vw,2.5rem);
}

/* Insetting the rows narrowed the fixed plate enough that the longer sector
   names wrapped to two lines. The plate takes a larger share of the row so all
   ten names stay on one line, and the name itself is allowed to shrink a little
   before it wraps. */
.ti-secrow{grid-template-columns:minmax(280px,39%) 1fr}
.ti-secrow__name{font-size:clamp(.86rem,1.15vw,1rem)}

@media (max-width:700px){
	.ti-secrow{grid-template-columns:minmax(150px,58%) 1fr}
}

/* One radius, the theme's. The row carries var(--ti-r-lg) like every other
   card on the site and clips its contents; the individual frames inside drop
   their own 10px radius so the strip reads as one continuous band rather than
   a line of separate tiles with notches between them. */
.ti-secrow{border-radius:var(--ti-r-lg)}
.ti-secframe{border-radius:0}
.ti-secrow__list{gap:0;padding:0}

/* ------------------------------- Executive gallery: always scrolling ----- */

/* Replaces the old "hold still below six people" rule. The list is repeated
   --ti-gal-passes times in the markup so the strip always overflows its box,
   and the track shifts by exactly one repeat, so the loop is seamless at any
   team size. Nothing to change as executives are added. */

.ti-gallery__viewport{
	overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ti-gallery__track{
	display:flex;width:max-content;
	animation:ti-gallery-run 34s linear infinite;
}
.ti-gallery__track:hover,
.ti-gallery__track:focus-within{animation-play-state:paused}

@keyframes ti-gallery-run{
	from{transform:translateX(0)}
	to{transform:translateX(calc(-100% / var(--ti-gal-passes,2)))}
}

.ti-gallery__list{
	display:flex;flex:0 0 auto;gap:var(--ti-sp-6);
	margin:0;padding:0 calc(var(--ti-sp-6) / 2);list-style:none;
	animation:none;                 /* motion lives on the track now */
}

/* The old threshold rules are dead; make sure they cannot re-freeze it. */
.ti-gallery--few .ti-gallery__list{animation:none}
.ti-gallery--few .ti-gallery__list[aria-hidden="true"]{display:flex}

@media (prefers-reduced-motion:reduce){
	.ti-gallery__track{animation:none}
	.ti-gallery__viewport{overflow-x:auto}
}

/* ---------------------------------------- About: the stance panel ------- */

/* Replaces the lifecycle artwork. It carries the section's argument rather
   than illustrating it, so it is built as a document — rules, marks and
   figures — instead of a picture. */

.ti-stance{
	position:relative;
	padding:clamp(1.5rem,3.4vw,2.25rem);
	background:var(--ti-white);
	border:1px solid var(--ti-line);
	border-radius:var(--ti-r-xl);
	box-shadow:var(--ti-shadow-lg);
	overflow:hidden;
}

/* The one gold rule on the page that is not a CTA; it marks this as the
   section's statement rather than another card. */
.ti-stance::before{
	content:"";
	position:absolute;inset:0 0 auto;height:4px;
	background:linear-gradient(90deg,var(--ti-gold-500),var(--ti-gold-300));
}

.ti-stance__eyebrow{
	margin:0 0 .35rem;
	color:var(--ti-gold-600);
	font-size:var(--ti-fs-xs);font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;
}
.ti-stance__title{
	margin:0 0 var(--ti-sp-5);
	color:var(--ti-navy-800);
	font-size:var(--ti-fs-h3);line-height:1.25;
}

.ti-stance__cols{display:grid;gap:var(--ti-sp-5)}

/* Between the phone and the two-column breakpoint the panel has the full
   shell to itself, which is wide enough to set the two lists side by side. */
@media (min-width:600px) and (max-width:939px){
	.ti-stance__cols{grid-template-columns:1fr 1fr;gap:var(--ti-sp-6)}
}

.ti-stance__label{
	margin:0 0 var(--ti-sp-3);
	color:var(--ti-slate);
	font-size:var(--ti-fs-xs);font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;
}

.ti-stance__list{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.ti-stance__list li{
	display:grid;grid-template-columns:22px 1fr;gap:.65rem;align-items:start;
	color:var(--ti-charcoal);
	font-size:var(--ti-fs-sm);line-height:1.5;
}
.ti-stance__col--dont .ti-stance__list li{color:var(--ti-slate)}

.ti-stance__mark{
	display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;margin-top:.06rem;border-radius:50%;
}
.ti-stance__mark--yes{background:#E8F6EE;color:var(--ti-green-500)}
.ti-stance__mark--no{background:var(--ti-gray-100);color:var(--ti-mute)}


/* ------------------------------------------------- Social links row ------ */

/* Only ever rendered on the two role pages — the buyer and supplier sides run
   separate accounts, so there is no correct single set for the homepage. */

.ti-social{
	display:flex;align-items:center;gap:var(--ti-sp-4);flex-wrap:wrap;
	margin-top:var(--ti-sp-5);padding-top:var(--ti-sp-5);
	border-top:1px solid var(--ti-line);
}
.ti-social__label{
	color:var(--ti-mute);
	font-size:var(--ti-fs-xs);font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;
}
.ti-social__list{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.ti-social__link{
	display:inline-flex;align-items:center;justify-content:center;
	width:42px;height:42px;
	color:var(--ti-navy-700);
	background:var(--ti-white);
	border:1px solid var(--ti-gray-300);border-radius:var(--ti-r);
	transition:color .18s var(--ti-ease),background .18s var(--ti-ease),
			   border-color .18s var(--ti-ease),transform .18s var(--ti-ease);
}
a.ti-social__link:hover,a.ti-social__link:focus-visible{
	color:var(--ti-gold-400);
	background:var(--ti-navy-800);
	border-color:var(--ti-navy-800);
	transform:translateY(-2px);
}

/* Accounts the client has not supplied yet. The mark is shown at full strength
   — a greyed-out icon reads as broken — but it is a span, so there is nothing
   to click and nothing to land nowhere. */
.ti-social__link--soon{cursor:default}