/* ==========================================================================
   TradeInfra — design system
   Palette: deep navy + corporate blue on white/light-grey, charcoal body copy,
   and a single restrained gold accent reserved for CTAs and highlights.
   ========================================================================== */

:root{
	/* Brand */
	--ti-navy-900:#04182E;
	--ti-navy-800:#0A2A4A;
	--ti-navy-700:#113A63;
	--ti-navy-600:#1A4E80;
	--ti-blue-500:#2A6FB5;
	--ti-blue-400:#4E90D0;
	--ti-blue-100:#E8F0FA;

	--ti-gold-600:#A8791D;
	--ti-gold-500:#C8942A;
	--ti-gold-400:#E0AC46;
	--ti-gold-300:#EDC172;
	--ti-gold-100:#FBF3E2;

	/* Used only for the verified ticks inside the illustrations. */
	--ti-green-500:#2E9E63;

	--ti-sand-100:#F7F3EC;

	/* Neutrals */
	--ti-charcoal:#26303C;
	--ti-slate:#55637A;
	--ti-mute:#7A8699;
	--ti-gray-100:#F4F6F9;
	--ti-gray-200:#E7EBF1;
	--ti-gray-300:#D3DAE5;
	--ti-white:#FFFFFF;

	/* Semantic */
	--ti-ink:var(--ti-charcoal);
	--ti-bg:var(--ti-white);
	--ti-line:var(--ti-gray-200);

	/* Type */
	--ti-font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
	--ti-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

	--ti-fs-xs:.8125rem;
	--ti-fs-sm:.9063rem;
	--ti-fs-base:1rem;
	--ti-fs-md:1.0625rem;
	/* Ceilings raised with the shell. Every one of these was already at its
	   maximum by about 1160px, so once the layout stopped being capped at 1200
	   the headings stayed the same size while the column under them grew by half
	   again — which is why they stopped reading as headings on a laptop. The
	   floor and the vw term are unchanged, so nothing moves on a phone. */
	--ti-fs-lg:clamp(1.125rem,1.6vw,1.45rem);
	--ti-fs-h3:clamp(1.3rem,2vw,1.9rem);
	--ti-fs-h2:clamp(2rem,4vw,3.75rem);
	--ti-fs-h1:clamp(2.5rem,5.4vw,5.5rem);

	/* Space */
	--ti-sp-1:.25rem;  --ti-sp-2:.5rem;   --ti-sp-3:.75rem;
	--ti-sp-4:1rem;    --ti-sp-5:1.5rem;  --ti-sp-6:2rem;
	--ti-sp-7:2.5rem;  --ti-sp-8:3rem;    --ti-sp-9:4rem;
	--ti-sp-10:5rem;
	--ti-section-y:clamp(3.5rem,7vw,6.5rem);

	/* Shape */
	--ti-r-sm:6px; --ti-r:10px; --ti-r-lg:16px; --ti-r-xl:24px; --ti-r-pill:999px;

	--ti-shadow-sm:0 1px 2px rgba(10,42,74,.06),0 1px 3px rgba(10,42,74,.05);
	--ti-shadow:0 4px 12px rgba(10,42,74,.07),0 2px 4px rgba(10,42,74,.05);
	--ti-shadow-lg:0 18px 44px rgba(10,42,74,.12),0 6px 14px rgba(10,42,74,.06);

	/* Fluid and uncapped, at the client's request. A fixed 1200px left 360px of
	   dead margin on each side of a 1920 screen and 680px on a 2560 one; the
	   shell now simply follows the window. Readability is defended where it
	   actually matters instead — headings and body copy carry their own measure
	   caps, so a wider window widens the layout without widening the text. */
	--ti-shell:92vw;
	--ti-shell-narrow:820px;

	--ti-ease:cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------- Base ---- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ti-header-h) + 22px)}

body{
	margin:0;
	background:var(--ti-bg);
	color:var(--ti-ink);
	font-family:var(--ti-font);
	font-size:var(--ti-fs-md);
	line-height:1.68;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-wrap:break-word;
}

body.ti-nav-open{overflow:hidden}

h1,h2,h3,h4{
	margin:0 0 var(--ti-sp-3);
	color:var(--ti-navy-800);
	font-weight:700;
	line-height:1.2;
	letter-spacing:-.02em;
}
h1{font-size:var(--ti-fs-h1);letter-spacing:-.028em}
h2{font-size:var(--ti-fs-h2)}
h3{font-size:var(--ti-fs-h3);letter-spacing:-.012em}

p{margin:0 0 var(--ti-sp-4)}
p:last-child{margin-bottom:0}

a{color:var(--ti-blue-500);text-decoration:none;transition:color .18s var(--ti-ease)}
a:hover,a:focus-visible{color:var(--ti-navy-700)}

img,svg{max-width:100%;height:auto;display:block}

ul,ol{margin:0 0 var(--ti-sp-4);padding-left:1.15rem}
li{margin-bottom:var(--ti-sp-2)}

:focus-visible{outline:3px solid var(--ti-gold-500);outline-offset:2px;border-radius:2px}

.ti-skip{
	position:absolute;left:-9999px;top:0;z-index:200;
	padding:12px 20px;background:var(--ti-navy-800);color:#fff;border-radius:0 0 var(--ti-r) 0;
}
.ti-skip:focus{left:0;color:#fff}

/* Visible to assistive technology only. Used where a decorative treatment
   swallows text that still needs to be readable — the sector rows describe
   their photographs this way. */
.screen-reader-text{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.ti-icon{flex:0 0 auto}

/* Screen-reader only */
.ti-sr{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- Layout ---- */

.ti-shell{
	width:100%;
	max-width:var(--ti-shell);
	margin-inline:auto;
	padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.ti-shell--narrow{max-width:var(--ti-shell-narrow)}
/* The member area earns more width than a marketing page: it shows tables. */
.ti-shell--wide{max-width:95vw}

.ti-main{display:block}

.ti-section{position:relative}
.ti-section--pad{padding-block:var(--ti-section-y)}
.ti-section--tint{background:var(--ti-gray-100)}
.ti-section--navy{background:var(--ti-navy-800);color:rgba(255,255,255,.86)}
.ti-section--navy h2,.ti-section--navy h3{color:#fff}

.ti-grid{display:grid;gap:var(--ti-sp-5)}
.ti-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ti-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ti-grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ------------------------------------------------------ Section heads ---- */

.ti-head{margin-bottom:clamp(2rem,4vw,3rem);max-width:52rem}
.ti-head--center{margin-inline:auto;text-align:center}
.ti-head--left{text-align:left}

.ti-head__eyebrow{
	margin:0 0 var(--ti-sp-3);
	color:var(--ti-gold-600);
	font-size:var(--ti-fs-xs);
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
}
.ti-head__title{margin:0}
.ti-head__lede{
	margin:var(--ti-sp-4) 0 0;
	color:var(--ti-slate);
	font-size:var(--ti-fs-lg);
	line-height:1.6;
}

.ti-head--dark .ti-head__eyebrow{color:var(--ti-gold-400)}
.ti-head--dark .ti-head__title{color:#fff}
.ti-head--dark .ti-head__lede{color:rgba(255,255,255,.74)}

/* ------------------------------------------------------------ Buttons ---- */

.ti-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
	padding:.875rem 1.6rem;
	border:1.5px solid transparent;border-radius:var(--ti-r);
	font-family:inherit;font-size:var(--ti-fs-base);font-weight:600;line-height:1.2;
	text-align:center;text-decoration:none;cursor:pointer;
	transition:background .18s var(--ti-ease),border-color .18s var(--ti-ease),
			   color .18s var(--ti-ease),transform .18s var(--ti-ease),box-shadow .18s var(--ti-ease);
}
.ti-btn__arrow{transition:transform .18s var(--ti-ease)}
.ti-btn:hover .ti-btn__arrow,.ti-btn:focus-visible .ti-btn__arrow{transform:translateX(3px)}

.ti-btn--accent{
	background:var(--ti-gold-500);border-color:var(--ti-gold-500);color:var(--ti-navy-900);
	box-shadow:0 2px 10px rgba(200,148,42,.28);
}
.ti-btn--accent:hover,.ti-btn--accent:focus-visible{
	background:var(--ti-gold-400);border-color:var(--ti-gold-400);color:var(--ti-navy-900);
	transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,148,42,.34);
}

.ti-btn--primary{background:var(--ti-navy-700);border-color:var(--ti-navy-700);color:#fff}
.ti-btn--primary:hover,.ti-btn--primary:focus-visible{
	background:var(--ti-navy-800);border-color:var(--ti-navy-800);color:#fff;transform:translateY(-1px);
}

/* Outline defaults to the light-background treatment, since most sections are
   light. Dark contexts opt into the white version below. */
.ti-btn--outline{background:var(--ti-white);border-color:var(--ti-navy-600);color:var(--ti-navy-700)}
.ti-btn--outline:hover,.ti-btn--outline:focus-visible{
	background:var(--ti-navy-700);border-color:var(--ti-navy-700);color:#fff;transform:translateY(-1px);
}

.ti-section--navy .ti-btn--outline,
.ti-ctaband .ti-btn--outline{
	background:transparent;border-color:rgba(255,255,255,.45);color:#fff;
}
.ti-section--navy .ti-btn--outline:hover,
.ti-ctaband .ti-btn--outline:hover{
	background:rgba(255,255,255,.12);border-color:#fff;color:#fff;
}

.ti-btn--ghost{background:var(--ti-white);border-color:var(--ti-gray-300);color:var(--ti-navy-700)}
.ti-btn--ghost:hover,.ti-btn--ghost:focus-visible{
	border-color:var(--ti-navy-600);color:var(--ti-navy-800);background:var(--ti-blue-100);
}

.ti-btn--block{width:100%}
.ti-btn--sm{padding:.6rem 1.05rem;font-size:var(--ti-fs-sm);border-radius:var(--ti-r-sm)}
.ti-btn--lg{padding:1.05rem 2rem;font-size:var(--ti-fs-md)}

.ti-btn--quiet{background:transparent;border-color:transparent;color:var(--ti-navy-700)}
.ti-btn--quiet:hover,.ti-btn--quiet:focus-visible{background:var(--ti-blue-100);color:var(--ti-navy-800)}

.ti-ctas{display:flex;flex-wrap:wrap;gap:var(--ti-sp-4)}
.ti-ctas--hero{margin-top:var(--ti-sp-7)}
.ti-ctas--inline{justify-content:center;margin-top:var(--ti-sp-7)}
.ti-ctas--panel{flex-direction:column;gap:var(--ti-sp-3)}
.ti-ctas--panel .ti-btn{width:100%}

@media (max-width:520px){
	.ti-ctas .ti-btn{width:100%}
}

/* ------------------------------------------------------------- Header ---- */

/* Header height, so the nav panel and scroll-padding stay in sync with it. */
:root{--ti-header-h:76px;--ti-adminbar-h:0px}
body.admin-bar{--ti-adminbar-h:32px}
@media screen and (max-width:782px){body.admin-bar{--ti-adminbar-h:46px}}

/* --------------------------------------------------- Announcement bar ---- */

.ti-announce{
	background:linear-gradient(90deg,var(--ti-navy-900),var(--ti-navy-700) 55%,var(--ti-navy-800));
	color:rgba(255,255,255,.9);
	font-size:var(--ti-fs-sm);
}
.ti-announce__inner{
	display:flex;align-items:center;justify-content:center;gap:.7rem;
	min-height:44px;padding-block:.5rem;text-align:center;
}
.ti-announce__dot{
	width:7px;height:7px;flex:0 0 7px;border-radius:50%;
	background:var(--ti-gold-400);
	animation:ti-pulse 2.4s ease-in-out infinite;
}
@keyframes ti-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.ti-announce__text{margin:0}
.ti-announce__text strong{color:var(--ti-gold-400);font-weight:700}
@media (max-width:820px){
	.ti-announce__text{font-size:var(--ti-fs-xs)}
}

/* -------------------------------------------------------------- Header --- */

.ti-header{
	position:sticky;top:var(--ti-adminbar-h);z-index:80;
	background:rgba(255,255,255,.88);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid var(--ti-line);
}
.ti-header__inner{
	display:flex;align-items:center;justify-content:space-between;gap:var(--ti-sp-4);
	min-height:var(--ti-header-h);
}
.ti-header__actions{display:flex;align-items:center;gap:.6rem}

/* Brand lockup. The name is set larger than the surrounding UI and carries the
   strapline beneath it, per homepage brief 1.2. */
.ti-brand{display:inline-flex;align-items:center;gap:.75rem;color:var(--ti-navy-800);text-decoration:none}
.ti-brand:hover,.ti-brand:focus-visible{color:var(--ti-navy-800)}
.ti-brand__mark,.ti-brand__logo{width:46px;height:46px;flex:0 0 46px}
.ti-brand__logo{display:inline-flex;align-items:center}
.ti-brand__text{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.ti-brand__name{font-size:1.9rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.ti-brand__name span{color:var(--ti-gold-500)}
/* The strapline must read as subordinate to the name and must not out-measure
   it. Both are sized from the same em so the ratio holds at every breakpoint,
   and the letter-spacing is tuned so the strapline ends inside the wordmark
   rather than running past it. */
.ti-brand__tag{
	font-size:.545em;font-weight:600;letter-spacing:.028em;text-transform:uppercase;
	color:var(--ti-mute);line-height:1;
}
.ti-brand__text{font-size:1.9rem}
.ti-brand__name{font-size:1em}
.ti-brand .custom-logo{max-height:46px;width:auto}

.ti-header__signout{margin:0;display:flex;min-width:0}
.ti-header__actions{min-width:0;flex-shrink:0}

/* A signed-in member's header carries the brand, "My dashboard", "Sign out"
   and the menu button. On a phone that is more than the row can hold and the
   brand mark ends up underneath the dashboard link. The link is dropped here —
   it is the first item in the menu panel, and the brand itself already links
   to the dashboard for a signed-in member. */
@media (max-width:620px){
	.ti-header__login{display:none}
}

.ti-brand{min-width:0}
.ti-brand__name,.ti-brand__tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:820px){
	.ti-brand__tag{display:none}
}
@media (max-width:560px){
	.ti-brand__text{font-size:1.5rem}
	.ti-brand__mark,.ti-brand__logo{width:40px;height:40px;flex-basis:40px}
}
@media (max-width:400px){
	.ti-brand__text{font-size:1.25rem}
}

.ti-navtoggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:46px;height:46px;padding:0;margin-left:.25rem;
	background:var(--ti-white);border:1.5px solid var(--ti-gray-300);border-radius:var(--ti-r-sm);
	color:var(--ti-navy-800);cursor:pointer;
	transition:background .18s var(--ti-ease),border-color .18s var(--ti-ease);
}
.ti-navtoggle:hover{background:var(--ti-blue-100);border-color:var(--ti-navy-600)}
.ti-navtoggle__bars{display:block;width:22px}
.ti-navtoggle__bars i{
	display:block;height:2px;background:currentColor;border-radius:2px;
	transition:transform .22s var(--ti-ease),opacity .18s var(--ti-ease);
}
.ti-navtoggle__bars i+i{margin-top:5px}
.ti-navtoggle[aria-expanded="true"] .ti-navtoggle__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ti-navtoggle[aria-expanded="true"] .ti-navtoggle__bars i:nth-child(2){opacity:0}
.ti-navtoggle[aria-expanded="true"] .ti-navtoggle__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------- Nav panel ---- */

.ti-navpanel{
	position:fixed;z-index:79;
	top:calc(var(--ti-adminbar-h) + var(--ti-header-h));
	right:0;bottom:0;left:0;
	background:var(--ti-navy-900);
	overflow-y:auto;
	animation:ti-fade .22s var(--ti-ease);
}
.ti-navpanel[hidden]{display:none}
@keyframes ti-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.ti-navpanel__inner{
	display:grid;gap:var(--ti-sp-8);
	grid-template-columns:1fr;
	padding-block:clamp(2rem,5vw,3.5rem);
}
@media (min-width:860px){
	.ti-navpanel__inner{grid-template-columns:1.4fr .8fr;gap:var(--ti-sp-10)}
}

.ti-navlist{list-style:none;margin:0;padding:0;columns:1}
@media (min-width:600px){.ti-navlist{columns:2;column-gap:var(--ti-sp-6)}}
.ti-navlist li{margin:0;break-inside:avoid}
.ti-navlist a{
	display:block;padding:.7rem 0;
	color:rgba(255,255,255,.82);font-size:1.15rem;font-weight:600;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.ti-navlist a:hover,.ti-navlist a:focus-visible{color:var(--ti-gold-400)}

.ti-navpanel__label{
	margin:0 0 var(--ti-sp-4);
	color:var(--ti-gold-400);font-size:var(--ti-fs-xs);font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;
}

/* Role cards in the nav panel — the primary way into either interface. */
.ti-navcard{
	display:flex;align-items:center;gap:var(--ti-sp-4);
	margin-bottom:var(--ti-sp-3);padding:var(--ti-sp-4);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--ti-r);
	color:#fff;
	transition:background .18s var(--ti-ease),border-color .18s var(--ti-ease),transform .18s var(--ti-ease);
}
.ti-navcard:hover,.ti-navcard:focus-visible{
	background:rgba(255,255,255,.1);border-color:var(--ti-gold-500);color:#fff;transform:translateY(-2px);
}
.ti-navcard__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;flex:0 0 44px;
	background:rgba(224,172,70,.16);color:var(--ti-gold-400);
	border-radius:var(--ti-r-sm);
}
.ti-navcard__body{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto}
.ti-navcard__body strong{font-size:var(--ti-fs-base);font-weight:600}
.ti-navcard__body span{color:rgba(255,255,255,.6);font-size:var(--ti-fs-xs);line-height:1.5}
.ti-navcard__chev{color:rgba(255,255,255,.4);flex:0 0 18px}
.ti-navcard:hover .ti-navcard__chev{color:var(--ti-gold-400)}

.ti-navpanel__contact{
	display:flex;flex-direction:column;gap:var(--ti-sp-3);
	margin-top:var(--ti-sp-6);padding-top:var(--ti-sp-5);
	border-top:1px solid rgba(255,255,255,.1);
}
.ti-navpanel__contact a{
	display:flex;align-items:center;gap:.6rem;
	color:rgba(255,255,255,.7);font-size:var(--ti-fs-sm);
}
.ti-navpanel__contact a:hover{color:var(--ti-gold-400)}
.ti-navpanel__contact svg{color:var(--ti-gold-400);flex:0 0 18px}

/* -------------------------------------------------------------- Cards ---- */

.ti-card{
	position:relative;
	padding:var(--ti-sp-6);
	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),border-color .2s var(--ti-ease);
}
.ti-card:hover{transform:translateY(-3px);box-shadow:var(--ti-shadow);border-color:var(--ti-gray-300)}
.ti-card__title{margin:0 0 var(--ti-sp-2);font-size:1.125rem}
.ti-card__body{margin:0;color:var(--ti-slate);font-size:var(--ti-fs-sm);line-height:1.65}

.ti-card__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:52px;height:52px;margin-bottom:var(--ti-sp-4);
	background:var(--ti-blue-100);color:var(--ti-navy-700);
	border-radius:var(--ti-r);
}
.ti-card:hover .ti-card__icon{background:var(--ti-gold-100);color:var(--ti-gold-600)}

/* -------------------------------------------------------------- Prose ---- */

.ti-prose{max-width:70ch}
.ti-prose__title{margin-bottom:var(--ti-sp-5)}
.ti-prose h2{margin-top:var(--ti-sp-7)}
.ti-prose h3{margin-top:var(--ti-sp-6)}

/* ------------------------------------------------------------- Footer ---- */

.ti-footer{
	margin-top:0;
	background:var(--ti-navy-900);
	color:rgba(255,255,255,.66);
	font-size:var(--ti-fs-sm);
}
.ti-footer__grid{
	display:grid;gap:var(--ti-sp-7);
	grid-template-columns:1fr;
	padding-block:clamp(3rem,6vw,4.5rem) var(--ti-sp-7);
}
@media (min-width:700px){.ti-footer__grid{grid-template-columns:repeat(2,1fr)}}
/* Three columns since the Primary Sectors list came out; a four-column track
   list would have left the last quarter of the footer empty. */
@media (min-width:1020px){.ti-footer__grid{grid-template-columns:1.6fr 1fr 1.4fr}}

.ti-brand--footer{margin-bottom:var(--ti-sp-4)}
.ti-footer__tagline{margin:0 0 var(--ti-sp-4);color:rgba(255,255,255,.6);max-width:34ch}
.ti-footer__legal-name{margin:0;color:#fff;font-weight:600}
.ti-footer__meta{margin:var(--ti-sp-1) 0 0;color:rgba(255,255,255,.5);font-size:var(--ti-fs-xs)}

.ti-footer__heading{
	margin:0 0 var(--ti-sp-4);
	color:#fff;font-size:var(--ti-fs-sm);font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;
}
.ti-footer__list{list-style:none;margin:0;padding:0}
.ti-footer__list li{margin-bottom:var(--ti-sp-3)}
.ti-footer__list--tight li{margin-bottom:var(--ti-sp-2);font-size:var(--ti-fs-xs);color:rgba(255,255,255,.55)}
.ti-footer__list a{color:rgba(255,255,255,.7)}
.ti-footer__list a:hover,.ti-footer__list a:focus-visible{color:var(--ti-gold-400)}
.ti-footer__list--contact li{display:flex;gap:.65rem;align-items:flex-start}
.ti-footer__list--contact svg{margin-top:3px;color:var(--ti-gold-400);opacity:.9}

.ti-footer__bar{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ti-sp-4);
	padding-block:var(--ti-sp-5);
	border-top:1px solid rgba(255,255,255,.1);
}
.ti-footer__copy{margin:0;font-size:var(--ti-fs-xs);color:rgba(255,255,255,.5)}
.ti-footer__policy{display:flex;flex-wrap:wrap;gap:var(--ti-sp-5);list-style:none;margin:0;padding:0}
.ti-footer__policy li{margin:0}
.ti-footer__policy a{color:rgba(255,255,255,.6);font-size:var(--ti-fs-xs)}
.ti-footer__policy a:hover{color:var(--ti-gold-400)}

/* --------------------------------------------------------- WhatsApp FAB -- */

.ti-whatsapp-fab{
	--ti-wa-green:#25D366;

	position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:70;
	display:inline-flex;align-items:center;justify-content:center;
	width:58px;height:58px;
	background:var(--ti-wa-green);
	/* The bubble is filled with currentColor; white on the brand green is the
	   treatment the service itself uses. */
	color:#fff;
	border-radius:50%;
	/* A neutral drop shadow rather than a green one. The coloured glow was
	   half of what made this button look like a 2015 chat widget. */
	box-shadow:0 6px 18px rgba(9,32,20,.24),0 2px 6px rgba(9,32,20,.16);
	transition:transform .18s var(--ti-ease),box-shadow .18s var(--ti-ease),
			   background .18s var(--ti-ease);
}
.ti-whatsapp-fab__mark{display:block}
.ti-whatsapp-fab:hover,.ti-whatsapp-fab:focus-visible{
	color:#fff;background:#1EBE5B;
	transform:translateY(-2px);
	box-shadow:0 10px 26px rgba(9,32,20,.3),0 3px 8px rgba(9,32,20,.18);
}

/* ----------------------------------------------------------- Reduced ----- */

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{
		animation-duration:.001ms!important;animation-iteration-count:1!important;
		transition-duration:.001ms!important;
	}
}

/* ------------------------------------------------- Client logo lockup ---- */

/* The supplied mark is a circular badge, so it is sized by height and given a
   little more room than the square placeholder needed. */
.ti-brand__logo{display:inline-flex;align-items:center;justify-content:center}
.ti-brand__logo img,.ti-brand .custom-logo{
	/* A detailed circular badge needs a little more height than a flat
	   wordmark before the chain and padlock read at all. */
	width:auto;height:58px;max-height:58px;display:block;
}
@media (max-width:560px){
	.ti-brand__logo img,.ti-brand .custom-logo{height:42px;max-height:42px}
}

/* The footer sits on navy, and .ti-brand sets a navy name colour for the light
   header — which rendered "Trade" invisible down here. Both the wordmark and
   the strapline are re-set for the dark ground; the gold "Infra" already
   carries its own colour. */
.ti-brand--footer,
.ti-brand--footer .ti-brand__name{color:#fff}
.ti-brand--footer .ti-brand__tag{color:rgba(255,255,255,.5)}
.ti-brand--footer .ti-brand__logo img,.ti-brand--footer .custom-logo{height:46px;max-height:46px}

/* ------------------------------------- Brand lockup: equal-width lines ---- */

/* Measured: "TradeInfra" is 149px at 30.4px, the strapline 316px at 16.6px.
   Matching them by shrinking the strapline alone needs 7.8px — unreadable — and
   by growing the name alone needs 64.7px, which will not fit a 77px header. So
   they meet in the middle: the name grows, the strapline drops to a quarter of
   it, and text-align-last:justify tracks the strapline out to land exactly on
   the name's right edge. Both are sized in em off one parent, so the ratio
   holds at every breakpoint. */

.ti-brand__text{font-size:clamp(1.9rem,2.6vw,2.75rem);gap:.1rem}
.ti-brand__name{font-size:1em;letter-spacing:-.035em}

.ti-brand__tag{
	display:block;
	font-size:.25em;
	letter-spacing:0;            /* justification supplies the tracking */
	text-align:justify;
	text-align-last:justify;
	white-space:normal;          /* justify cannot track a nowrap line */
}

/* Below the point where the strapline would fall under about 10px it stops
   being readable, so it leaves rather than shrinking further. */
@media (max-width:900px){
	.ti-brand__tag{display:none}
	.ti-brand__text{font-size:1.6rem}
}

/* --------------------------------------- Header lockup on small phones --- */

/* Placed at the end of the file on purpose. The brand sizes are set further up
   and again at the 900px breakpoint; these rules have the same specificity, so
   anywhere earlier in the file they simply lose and the wordmark carries on
   being clipped to "TradeIn…".
   The mark and the name step down together so the lockup keeps its
   proportions instead of being cut off. */
@media (max-width:520px){
	.ti-brand{gap:.55rem}
	.ti-brand__mark,.ti-brand__logo{width:38px;height:38px;flex:0 0 38px}
	.ti-brand__text{font-size:1.3rem}
	.ti-header__actions{gap:.45rem}
}

@media (max-width:400px){
	.ti-brand{gap:.4rem}
	.ti-brand__mark,.ti-brand__logo{width:32px;height:32px;flex:0 0 32px}
	.ti-brand__text{font-size:1.05rem}
	.ti-header__actions{gap:.35rem}
	.ti-header__actions .ti-btn--sm{padding:.5rem .65rem;font-size:.85rem}
}

/* The narrowest phones still in use. Rare, but the name should not be clipped
   on any of them. */
@media (max-width:340px){
	.ti-brand__mark,.ti-brand__logo{width:28px;height:28px;flex:0 0 28px}
	.ti-brand__text{font-size:.95rem}
	.ti-header__actions .ti-btn--sm{padding:.45rem .55rem;font-size:.8rem}
}