/* ==========================================================================
   TRANSPEK INDUSTRY LIMITED — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Consumed by the Elementor page templates via CSS classes (til-*).
   Brand DNA retained (Transpek blue), modernised with a teal accent, a
   disciplined type scale and generous vertical rhythm. Primary calls to action
   are white with deep blue text on dark grounds, solid blue on light ones;
   amber is reserved for the "to be supplied" content markers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Brand — core */
	--til-ink:            #06182B; /* deepest navy, hero + footer grounds  */
	--til-ink-2:          #0A2540; /* raised navy, cards on dark           */
	--til-blue:           #0A5CA8; /* Transpek primary blue                */
	--til-blue-600:       #094B8A;
	--til-blue-400:       #1B84D8; /* bright, for links + highlights       */
	--til-teal:           #00A8A0; /* chemistry accent                     */
	--til-teal-400:       #23C4BB;
	--til-amber:          #F2A33C; /* CTA / attention                      */
	--til-amber-600:      #D8862A;

	/* Neutrals */
	--til-white:          #FFFFFF;
	--til-paper:          #F5F8FB; /* section alt background               */
	--til-paper-2:        #EAF1F8;
	--til-border:         #DCE6EF;
	--til-border-strong:  #C2D3E3;
	--til-body:           #3C4A57; /* body copy                            */
	--til-muted:          #6B7C8C; /* secondary copy                       */
	--til-heading:        #06182B;

	/* On-dark */
	--til-on-dark:        #E8F0F8;
	--til-on-dark-muted:  #9DB2C6;
	--til-on-dark-border: rgba(255, 255, 255, .14);

	/* Type */
	--til-font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--til-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--til-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Spacing scale */
	--til-s1: 4px;   --til-s2: 8px;   --til-s3: 12px;  --til-s4: 16px;
	--til-s5: 24px;  --til-s6: 32px;  --til-s7: 48px;  --til-s8: 64px;
	--til-s9: 88px;  --til-s10: 120px;

	/* Radii */
	--til-r-sm: 4px;
	--til-r:    8px;
	--til-r-lg: 14px;
	--til-r-xl: 22px;

	/* Elevation */
	--til-shadow-sm: 0 1px 2px rgba(6, 24, 43, .06), 0 1px 3px rgba(6, 24, 43, .04);
	--til-shadow:    0 4px 6px -1px rgba(6, 24, 43, .07), 0 2px 4px -2px rgba(6, 24, 43, .05);
	--til-shadow-md: 0 12px 20px -6px rgba(6, 24, 43, .12), 0 4px 8px -4px rgba(6, 24, 43, .06);
	--til-shadow-lg: 0 24px 48px -12px rgba(6, 24, 43, .18), 0 8px 16px -8px rgba(6, 24, 43, .08);

	/* Motion */
	--til-ease: cubic-bezier(.22, .61, .36, 1);
	--til-ease-out: cubic-bezier(.16, 1, .3, 1);
	--til-dur: .35s;

	/* Layout */
	--til-container: 1280px;
	--til-gutter: 24px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
	font-family: var(--til-font-body);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--til-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--til-font-head);
	color: var(--til-heading);
	letter-spacing: -.018em;
	line-height: 1.16;
	font-weight: 700;
	text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--til-blue); text-decoration: none; transition: color var(--til-dur) var(--til-ease); }
a:hover { color: var(--til-blue-400); }

::selection { background: var(--til-teal); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--til-teal);
	outline-offset: 2px;
	border-radius: var(--til-r-sm);
}

img { max-width: 100%; height: auto; }

/* Skip link */
.til-skip {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--til-ink); color: #fff; padding: 12px 20px;
	border-radius: 0 0 var(--til-r) 0; font-weight: 600;
}
.til-skip:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

/* Eyebrow / kicker above headings */
.til-eyebrow,
.til-eyebrow .elementor-heading-title {
	font-family: var(--til-font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--til-teal);
	line-height: 1.4;
	margin: 0;
}
.til-eyebrow--onDark .elementor-heading-title,
.til-eyebrow--onDark { color: var(--til-teal-400); }

/* Eyebrow with a leading rule */
.til-eyebrow--rule .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 28px; height: 2px;
	background: currentColor;
	vertical-align: middle;
	margin-right: 12px;
	transform: translateY(-1px);
}

/* Display / hero headline */
.til-display .elementor-heading-title,
.til-display {
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	line-height: 1.04;
	letter-spacing: -.028em;
	font-weight: 700;
}

/* Section headline */
.til-h2 .elementor-heading-title,
.til-h2 {
	font-size: clamp(1.85rem, 3.4vw, 2.7rem);
	line-height: 1.14;
	letter-spacing: -.022em;
}

.til-h3 .elementor-heading-title, .til-h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.26; }

/* Lede paragraph under a headline */
.til-lede,
.til-lede p {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.66;
	color: var(--til-muted);
	font-weight: 400;
}
.til-lede--onDark, .til-lede--onDark p { color: var(--til-on-dark-muted); }

.til-onDark, .til-onDark p, .til-onDark li { color: var(--til-on-dark); }
.til-onDark h1, .til-onDark h2, .til-onDark h3, .til-onDark h4,
.til-onDark .elementor-heading-title { color: #fff; }

/* Gradient text accent for a single emphasised word */
.til-grad-text {
	background: linear-gradient(96deg, var(--til-teal-400) 0%, var(--til-blue-400) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* Rich text blocks */
.til-prose p { margin-bottom: 1.15em; }
.til-prose p:last-child { margin-bottom: 0; }
.til-prose h3 { margin: 1.9em 0 .6em; }
.til-prose h4 { margin: 1.6em 0 .5em; font-size: 1.1rem; }
.til-prose ul, .til-prose ol { margin: 0 0 1.2em 1.1em; }
.til-prose li { margin-bottom: .5em; }
.til-prose strong { color: var(--til-heading); font-weight: 650; }
.til-prose blockquote {
	margin: 1.8em 0; padding: 4px 0 4px 26px;
	border-left: 3px solid var(--til-teal);
	font-size: 1.15rem; line-height: 1.6; color: var(--til-heading);
	font-family: var(--til-font-head); font-weight: 500;
}

/* Mono data label, used for CAS numbers and formulae */
.til-mono { font-family: var(--til-font-mono); font-size: .92em; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.til-btn .elementor-button,
a.til-btn {
	font-family: var(--til-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .005em;
	border-radius: var(--til-r);
	padding: 15px 28px;
	transition: transform var(--til-dur) var(--til-ease),
	            box-shadow var(--til-dur) var(--til-ease),
	            background-color var(--til-dur) var(--til-ease),
	            color var(--til-dur) var(--til-ease),
	            border-color var(--til-dur) var(--til-ease);
	will-change: transform;
	border: 1.5px solid transparent;
	line-height: 1.3;
}
.til-btn .elementor-button:hover,
a.til-btn:hover { transform: translateY(-2px); }
.til-btn .elementor-button:active,
a.til-btn:active { transform: translateY(0); }

/* Primary — solid blue */
.til-btn--primary .elementor-button,
a.til-btn--primary {
	background: var(--til-blue);
	color: #fff;
	box-shadow: 0 4px 14px -4px rgba(10, 92, 168, .45);
}
.til-btn--primary .elementor-button:hover,
a.til-btn--primary:hover {
	background: var(--til-blue-600);
	color: #fff;
	box-shadow: 0 10px 24px -6px rgba(10, 92, 168, .5);
}

/* Accent — the single most important action on a page. White with deep blue
   text: every accent button sits on a dark brand ground, where white reads as
   the strongest possible call to action without introducing a third hue. */
.til-btn--accent .elementor-button,
a.til-btn--accent {
	background: var(--til-white);
	color: var(--til-blue-600);
	border-color: var(--til-white);
	box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .38);
}
.til-btn--accent .elementor-button:hover,
a.til-btn--accent:hover {
	background: var(--til-paper);
	border-color: var(--til-paper);
	color: var(--til-ink);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .46);
}

/* Outline on light */
.til-btn--outline .elementor-button,
a.til-btn--outline {
	background: transparent;
	color: var(--til-blue);
	border-color: var(--til-border-strong);
}
.til-btn--outline .elementor-button:hover,
a.til-btn--outline:hover {
	background: var(--til-blue);
	border-color: var(--til-blue);
	color: #fff;
}

/* Outline on dark (hero secondary action) */
.til-btn--ghost .elementor-button,
a.til-btn--ghost {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border-color: rgba(255, 255, 255, .32);
	backdrop-filter: blur(6px);
}
.til-btn--ghost .elementor-button:hover,
a.til-btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--til-ink);
}

/* Text link with animated arrow */
.til-link,
.til-link .elementor-button {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 650; font-size: 15px;
	color: var(--til-blue);
	background: none; padding: 0; border: 0;
}
.til-link::after,
.til-link .elementor-button::after {
	content: "";
	width: 18px; height: 8px;
	background: currentColor;
	/* arrow glyph as a mask so it inherits colour */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h15M11.5.5 15.5 4l-4 3.5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h15M11.5.5 15.5 4l-4 3.5' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--til-dur) var(--til-ease);
}
.til-link:hover::after,
.til-link .elementor-button:hover::after { transform: translateX(5px); }
.til-link--onDark, .til-link--onDark .elementor-button { color: var(--til-teal-400); }

/* --------------------------------------------------------------------------
   5. SURFACES & BACKGROUNDS
   -------------------------------------------------------------------------- */

/* Molecular lattice — subtle hexagonal chemistry motif for dark grounds */
.til-bg-lattice { position: relative; isolation: isolate; }
.til-bg-lattice::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M30 0 60 17.3 60 52 30 69.3 0 52 0 17.3z'/%3E%3Cpath d='M90 0 120 17.3 120 52 90 69.3 60 52 60 17.3z'/%3E%3Cpath d='M60 52 90 69.3 90 104 60 121.3 30 104 30 69.3z'/%3E%3C/g%3E%3C/svg%3E");
	opacity: .85;
	pointer-events: none;
}

/* Fine dot grid for light sections */
.til-bg-dots { position: relative; isolation: isolate; }
.til-bg-dots::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(var(--til-border-strong) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: .55;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
	        mask-image: linear-gradient(to bottom, #000, transparent);
	pointer-events: none;
}

/* Radial glow accents for hero grounds */
.til-bg-glow { position: relative; isolation: isolate; overflow: hidden; }
.til-bg-glow::after {
	content: ""; position: absolute; z-index: -1;
	width: 780px; height: 780px; right: -180px; top: -320px;
	background: radial-gradient(circle, rgba(0, 168, 160, .22) 0%, rgba(0, 168, 160, 0) 68%);
	pointer-events: none;
}

/* Photographic page hero.
   Elementor supplies the background image on the outer container; this lays a
   brand gradient over it so headline contrast never depends on how light or
   busy the photograph happens to be. */
.til-hero--photo {
	position: relative;
	isolation: isolate;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
.til-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(96deg, rgba(6, 24, 43, .95) 0%, rgba(6, 24, 43, .86) 34%, rgba(8, 45, 80, .60) 68%, rgba(10, 92, 168, .38) 100%);
}
/* On narrow screens text spans the full width, so the wash must be even. */
@media (max-width: 767px) {
	.til-hero--photo::after {
		background: linear-gradient(180deg, rgba(6, 24, 43, .93) 0%, rgba(6, 24, 43, .88) 60%, rgba(8, 45, 80, .82) 100%);
	}
}
/* Keep the content above the wash. */
.til-hero--photo > * { position: relative; z-index: 1; }

/* Mid-page photographic band.
   A page hero needs a heavy wash so the headline holds contrast, but that same
   wash on a mid-page band made it read as another flat navy panel — identical
   to an adjacent .til-sec--ink section. This variant is far more transparent so
   the photograph itself carries the band, with the darkening concentrated
   behind the text on the left only. */
.til-sec--photoband::after {
	background:
		linear-gradient(96deg,
			rgba(6, 24, 43, .88) 0%,
			rgba(6, 24, 43, .70) 30%,
			rgba(8, 45, 80, .34) 58%,
			rgba(10, 92, 168, .12) 100%) !important;
}
/* Hairline top and bottom edges so the band reads as a deliberate insert. */
.til-sec--photoband {
	border-top: 1px solid rgba(255, 255, 255, .10);
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}
/* Text sits on the darkest part, so give it a little extra weight. */
.til-sec--photoband .til-lede { color: #EEF5FB; }

@media (max-width: 767px) {
	.til-sec--photoband::after {
		background: linear-gradient(180deg,
			rgba(6, 24, 43, .90) 0%,
			rgba(6, 24, 43, .82) 60%,
			rgba(8, 45, 80, .74) 100%) !important;
	}
}

/* Angled section divider */
.til-clip-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%); }

/* Hairline top border used to separate stacked light sections */
.til-hr-top { border-top: 1px solid var(--til-border); }

/* --------------------------------------------------------------------------
   5a. ELEMENTOR CONTAINER GRID
   The boxed inner wrapper of every section band. Setting the measure here
   rather than in the Kit keeps it consistent even if the Kit is reset.
   -------------------------------------------------------------------------- */
/* --til-container is the *content* measure, and the gutter is added outside it.
   Written as max-width = container + 2 x gutter so widening the gutter gives
   sections more breathing room from the screen edge without ever narrowing the
   content itself. A flat 24px gutter made sections look flush to the edge on
   1280-1440px laptops. */
.til-wrap > .e-con-inner,
.e-con.til-wrap > .e-con-inner {
	max-width: calc(var(--til-container) + var(--til-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--til-gutter);
	width: 100%;
}
/* Elementor injects its own widget spacing; our sections manage their own. */
.til-wrap > .e-con-inner > .elementor-widget:last-child { margin-bottom: 0; }

/* Gutter scales with the viewport so content never sits flush to the edge. */
@media (min-width: 600px)  { :root { --til-gutter: 30px; } }
@media (min-width: 768px)  { :root { --til-gutter: 38px; } }
@media (min-width: 1025px) { :root { --til-gutter: 48px; } }
@media (max-width: 599px)  { :root { --til-gutter: 20px; } }

/* --------------------------------------------------------------------------
   5b. SECTION RHYTHM
   Applied to the outer (full-width) Elementor container of every band, so
   vertical rhythm and ground colour live in CSS rather than in per-page
   Elementor settings. Keeps pages portable and consistently spaced.
   -------------------------------------------------------------------------- */
/* Adjacent sections stack their padding at the boundary, so the gap between two
   bands is the sum of both. The previous scale produced 56px + 88px = 144px
   between the stats and the next heading, which read as dead space. These
   values keep the bands clearly separated at roughly 100px combined. */
.til-sec { padding-block: clamp(32px, 3.4vw, 54px); }
.til-sec--tight { padding-block: clamp(22px, 2.4vw, 34px); }
.til-sec--loose { padding-block: clamp(42px, 4.4vw, 68px); }
.til-sec--flush { padding-block: 0; }

/* --------------------------------------------------------------------------
   CARD ROW GRID
   Elementor columns carry explicit width percentages. Three columns at 33% plus
   two 24px gaps exceed 100% of the measure, so rows silently wrapped or
   misaligned. These classes drop the percentages and use real grid tracks, so
   the arithmetic cannot break regardless of gap or container width.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   MULTI-COLUMN ROW WRAPPING
   Elementor sets each column an explicit width percentage while the row adds a
   fixed pixel gap. A row of 54% + 42% with a 48px gap therefore only fits when
   the row is at least 1200px wide (0.96W + 48 <= W). The content box is
   min(viewport, 1280) - 48px of gutter, so every viewport below roughly 1248px
   pushed the second column onto its own line — the hero art, and the right-hand
   panels on several pages, dropped below the text leaving a large empty band.

   Above the tablet breakpoint the columns are allowed to shrink instead of
   wrapping, which keeps their proportions and removes the dependency on the
   arithmetic working out. Below 1025px the columns go full width and stack, so
   wrapping is left alone there.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.e-con.til-row { flex-wrap: nowrap !important; }
	.e-con.til-row > .e-con { min-width: 0; flex-shrink: 1; }
}

.til-grid { display: grid !important; align-items: stretch; }
.til-grid > * { width: auto !important; max-width: 100% !important; min-width: 0; flex: none !important; }
.til-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.til-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.til-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.til-grid--3, .til-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.til-grid { grid-template-columns: 1fr !important; }
}

.til-sec--white  { background: var(--til-white); }
.til-sec--paper  { background: var(--til-paper); }
.til-sec--paper2 { background: var(--til-paper-2); }
.til-sec--ink    { background: var(--til-ink); }
.til-sec--ink2   { background: var(--til-ink-2); }

/* Signature brand gradient ground for hero + CTA bands */
.til-sec--brand {
	background:
		radial-gradient(1100px 620px at 82% -8%, rgba(0, 168, 160, .30) 0%, transparent 62%),
		radial-gradient(900px 520px at 8% 108%, rgba(27, 132, 216, .26) 0%, transparent 60%),
		linear-gradient(158deg, #06182B 0%, #0A2540 52%, #0B3C68 100%);
}

/* Inner ground for split panels */
.til-sec--blue { background: linear-gradient(150deg, var(--til-blue-600) 0%, var(--til-blue) 100%); }

/* Dark grounds get on-dark text by default so widgets need no colour settings */
.til-sec--ink, .til-sec--ink2, .til-sec--brand, .til-sec--blue { color: var(--til-on-dark); }
.til-sec--ink p, .til-sec--ink2 p, .til-sec--brand p, .til-sec--blue p,
.til-sec--ink li, .til-sec--ink2 li, .til-sec--brand li, .til-sec--blue li { color: var(--til-on-dark); }
.til-sec--ink h1, .til-sec--ink h2, .til-sec--ink h3, .til-sec--ink h4, .til-sec--ink h5, .til-sec--ink h6,
.til-sec--ink2 h1, .til-sec--ink2 h2, .til-sec--ink2 h3, .til-sec--ink2 h4,
.til-sec--brand h1, .til-sec--brand h2, .til-sec--brand h3, .til-sec--brand h4,
.til-sec--blue h1, .til-sec--blue h2, .til-sec--blue h3, .til-sec--blue h4,
.til-sec--ink .elementor-heading-title, .til-sec--ink2 .elementor-heading-title,
.til-sec--brand .elementor-heading-title, .til-sec--blue .elementor-heading-title { color: #fff; }
/* On dark grounds, plain links go teal — but buttons must keep their own
   colour, otherwise an amber button inherits teal text and fails contrast.
   :not() chains here also outrank the .til-btn--* rules, so buttons are
   excluded explicitly rather than fought with !important. */
.til-sec--ink   a:not(.elementor-button):not(.til-btn):not(.til-link):not(.til-tag):not(.til-pill):not(.til-chip),
.til-sec--brand a:not(.elementor-button):not(.til-btn):not(.til-link):not(.til-tag):not(.til-pill):not(.til-chip),
.til-sec--ink2  a:not(.elementor-button):not(.til-btn):not(.til-link):not(.til-tag):not(.til-pill):not(.til-chip),
.til-sec--blue  a:not(.elementor-button):not(.til-btn):not(.til-link):not(.til-tag):not(.til-pill):not(.til-chip) {
	color: var(--til-teal-400);
}

/* Re-assert button text colours at matching specificity for dark sections. */
.til-sec--ink   a.til-btn--accent, .til-sec--brand a.til-btn--accent,
.til-sec--ink2  a.til-btn--accent, .til-sec--blue  a.til-btn--accent,
.til-aside a.til-btn--accent, .til-panel--dark a.til-btn--accent { color: var(--til-blue-600); }
.til-sec--ink   a.til-btn--accent:hover, .til-sec--brand a.til-btn--accent:hover,
.til-sec--ink2  a.til-btn--accent:hover, .til-sec--blue  a.til-btn--accent:hover,
.til-aside a.til-btn--accent:hover, .til-panel--dark a.til-btn--accent:hover { color: var(--til-ink); }

.til-sec--ink   a.til-btn--primary, .til-sec--brand a.til-btn--primary,
.til-sec--ink2  a.til-btn--primary, .til-sec--blue  a.til-btn--primary,
.til-sec--ink   a.til-btn--ghost,   .til-sec--brand a.til-btn--ghost,
.til-sec--ink2  a.til-btn--ghost,   .til-sec--blue  a.til-btn--ghost,
.til-aside a.til-btn--primary, .til-panel--dark a.til-btn--primary { color: #fff; }

.til-sec--ink   a.til-btn--ghost:hover, .til-sec--brand a.til-btn--ghost:hover,
.til-sec--ink2  a.til-btn--ghost:hover, .til-sec--blue  a.til-btn--ghost:hover { color: var(--til-ink); }

.til-sec--ink   a.til-link, .til-sec--brand a.til-link,
.til-sec--ink2  a.til-link, .til-sec--blue  a.til-link,
.til-aside a.til-link, .til-panel--dark a.til-link { color: var(--til-teal-400); }

/* Panel — a bordered/filled inner block used for split layouts and callouts */
.til-panel {
	background: #fff; border: 1px solid var(--til-border);
	border-radius: var(--til-r-xl); padding: clamp(26px, 3.6vw, 46px);
	box-shadow: var(--til-shadow);
}
.til-panel--dark {
	background: linear-gradient(160deg, var(--til-ink) 0%, var(--til-ink-2) 100%);
	border-color: var(--til-on-dark-border); color: var(--til-on-dark);
}
.til-panel--flat { box-shadow: none; }
.til-panel--accent { border-left: 4px solid var(--til-teal); }

/* Media frame — for images that need a branded treatment */
.til-frame { border-radius: var(--til-r-xl); overflow: hidden; box-shadow: var(--til-shadow-lg); position: relative; }
.til-frame img { display: block; width: 100%; }
.til-frame--tilt { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transition: transform .7s var(--til-ease-out); }
.til-frame--tilt:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

/* Numbered process steps */
.til-steps { counter-reset: til-step; display: grid; gap: 18px; }
.til-step {
	counter-increment: til-step;
	display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
	background: #fff; border: 1px solid var(--til-border); border-radius: var(--til-r-lg);
	padding: 22px 24px; transition: all var(--til-dur) var(--til-ease-out);
}
.til-step:hover { border-color: var(--til-blue-400); box-shadow: var(--til-shadow-md); }
.til-step::before {
	content: counter(til-step, decimal-leading-zero);
	font-family: var(--til-font-head); font-size: 1.15rem; font-weight: 700;
	color: var(--til-teal); line-height: 1.4;
	border-right: 1px solid var(--til-border); padding-right: 18px;
}
.til-step h4 { font-size: 1.06rem; margin: 0 0 6px; }
.til-step p { margin: 0; font-size: 15px; color: var(--til-muted); }

/* Two-column definition grid for compact facts */
.til-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--til-border); border: 1px solid var(--til-border); border-radius: var(--til-r-lg); overflow: hidden; }
.til-fact { background: #fff; padding: 22px 24px; }
.til-fact__k { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--til-muted); margin-bottom: 8px; }
.til-fact__v { font-family: var(--til-font-head); font-size: 1.05rem; font-weight: 650; color: var(--til-heading); line-height: 1.4; }

/* Photograph slot — an explicit, designed placeholder for an image we do not
   have yet. Deliberately looks like a reserved space rather than a broken
   image, so the layout can be judged and the gap stays obvious. */
.til-imgslot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 4 / 3;
	width: 100%;
	border: 2px dashed var(--til-border-strong);
	border-radius: var(--til-r-xl);
	background:
		repeating-linear-gradient(135deg,
			rgba(10, 92, 168, .04) 0 12px,
			rgba(10, 92, 168, .07) 12px 24px);
	color: var(--til-muted);
	text-align: center;
	padding: 20px;
}
.til-imgslot__label {
	font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--til-blue);
}
.til-imgslot__note {
	font-family: var(--til-font-head);
	font-size: 1.05rem; font-weight: 650; color: var(--til-heading);
}

/* "Content to be supplied" marker — makes placeholder sections unmistakable */
.til-todo {
	border: 1px dashed var(--til-amber); border-radius: var(--til-r-lg);
	background: rgba(242, 163, 60, .07); padding: 20px 24px;
	font-size: 14.5px; color: #8A5A12;
}
.til-todo strong { color: #6B4409; display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */

/* Generic lifted card */
.til-card {
	background: #fff;
	border: 1px solid var(--til-border);
	border-radius: var(--til-r-lg);
	box-shadow: var(--til-shadow-sm);
	transition: transform var(--til-dur) var(--til-ease-out),
	            box-shadow var(--til-dur) var(--til-ease-out),
	            border-color var(--til-dur) var(--til-ease);
	height: 100%;
	overflow: hidden;
}
.til-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--til-shadow-lg);
	border-color: var(--til-border-strong);
}

/* Card on a dark ground */
.til-card--dark {
	background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
	border-color: var(--til-on-dark-border);
	box-shadow: none;
	backdrop-filter: blur(4px);
}
.til-card--dark:hover { border-color: rgba(35, 196, 187, .5); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); }

/* Accent rule that grows on hover — used on capability + market cards */
.til-card--rule { position: relative; }
.til-card--rule::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px; background: linear-gradient(180deg, var(--til-teal), var(--til-blue-400));
	transform: scaleY(0); transform-origin: top;
	transition: transform .45s var(--til-ease-out);
}
.til-card--rule:hover::before { transform: scaleY(1); }

/* Elementor icon-box tuned as a feature card.
   The icon-box widget brings no padding of its own, so as a card its icon sat
   flush against the top edge. Padding is applied here rather than per-widget in
   Elementor so every feature card matches. Note Elementor 4 renders the widget
   div directly around .elementor-icon-box-wrapper with no
   .elementor-widget-container, so the padding goes on the widget itself. */
.til-feature.til-card {
	padding: 30px 28px;
	height: 100%;
}
.til-feature.til-card > .elementor-widget-container { padding: 0; height: 100%; }
.til-feature .elementor-icon-box-wrapper { text-align: left; }
.til-feature .elementor-icon-box-icon { margin-bottom: 20px !important; }
.til-feature .elementor-icon-box-icon .elementor-icon {
	width: 54px; height: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--til-r);
	background: linear-gradient(150deg, rgba(0,168,160,.14), rgba(27,132,216,.12));
	color: var(--til-blue);
	border: 1px solid rgba(10, 92, 168, .14);
	transition: transform var(--til-dur) var(--til-ease-out), background var(--til-dur) var(--til-ease);
}
.til-feature:hover .elementor-icon-box-icon .elementor-icon {
	transform: scale(1.06) rotate(-3deg);
	background: linear-gradient(150deg, var(--til-teal), var(--til-blue));
	color: #fff;
}
.til-feature .elementor-icon-box-title { font-size: 1.2rem; margin-bottom: 10px; }
.til-feature .elementor-icon-box-description { color: var(--til-muted); font-size: 15.5px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   7. PRODUCT CATALOGUE
   -------------------------------------------------------------------------- */
.til-catalogue { display: grid; gap: 28px; grid-template-columns: 268px minmax(0, 1fr); align-items: start; }

/* Filter rail */
.til-filters {
	position: sticky; top: 104px;
	background: #fff; border: 1px solid var(--til-border);
	border-radius: var(--til-r-lg); padding: 22px;
	box-shadow: var(--til-shadow-sm);
}
.til-filters__group + .til-filters__group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--til-border); }
.til-filters__legend {
	font-family: var(--til-font-body); font-size: 12px; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--til-muted);
	margin: 0 0 12px;
}
.til-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15px; color: var(--til-body); }
.til-check input { width: 17px; height: 17px; accent-color: var(--til-blue); cursor: pointer; flex: 0 0 auto; }
.til-check:hover { color: var(--til-blue); }
.til-check__count { margin-left: auto; font-size: 12.5px; color: var(--til-muted); font-variant-numeric: tabular-nums; }

/* Search box */
.til-search { position: relative; }
.til-search input {
	width: 100%; padding: 14px 16px 14px 44px;
	border: 1.5px solid var(--til-border-strong); border-radius: var(--til-r);
	font-family: var(--til-font-body); font-size: 15.5px; color: var(--til-heading);
	background: #fff; transition: border-color var(--til-dur) var(--til-ease), box-shadow var(--til-dur) var(--til-ease);
}
.til-search input::placeholder { color: var(--til-muted); }
.til-search input:focus { border-color: var(--til-blue); box-shadow: 0 0 0 4px rgba(10,92,168,.1); outline: none; }
.til-search__icon {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--til-muted); pointer-events: none;
}

/* Result meta bar */
.til-resultbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; margin-bottom: 18px; font-size: 14.5px; color: var(--til-muted);
}
.til-resultbar strong { color: var(--til-heading); font-weight: 650; }
.til-chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--til-paper-2); border: 1px solid var(--til-border);
	color: var(--til-blue); border-radius: 999px;
	padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.til-chip:hover { background: var(--til-blue); color: #fff; border-color: var(--til-blue); }
.til-chip__x { font-size: 15px; line-height: 1; }

/* Product grid */
.til-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 20px; }

.til-pcard {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--til-border);
	border-radius: var(--til-r-lg); padding: 24px;
	transition: transform var(--til-dur) var(--til-ease-out), box-shadow var(--til-dur) var(--til-ease-out), border-color var(--til-dur) var(--til-ease);
	position: relative; overflow: hidden;
}
.til-pcard::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(135deg, rgba(0,168,160,.05), transparent 55%);
	opacity: 0; transition: opacity var(--til-dur) var(--til-ease);
}
.til-pcard:hover { transform: translateY(-4px); box-shadow: var(--til-shadow-md); border-color: var(--til-blue-400); }
.til-pcard:hover::after { opacity: 1; }

.til-pcard__cas {
	font-family: var(--til-font-mono); font-size: 12px; font-weight: 500;
	color: var(--til-teal); letter-spacing: .02em; margin-bottom: 10px;
	display: block;
}
.til-pcard__title {
	font-family: var(--til-font-head); font-size: 1.08rem; font-weight: 650;
	line-height: 1.32; color: var(--til-heading); margin: 0 0 12px;
	letter-spacing: -.012em;
}
.til-pcard__title a { color: inherit; }
.til-pcard__title a:hover { color: var(--til-blue); }
.til-pcard__formula {
	font-family: var(--til-font-mono); font-size: 13px; color: var(--til-muted);
	margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--til-border);
}
.til-pcard__formula sub { font-size: .78em; }
.til-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.til-tag {
	font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
	padding: 4px 9px; border-radius: var(--til-r-sm);
	background: var(--til-paper-2); color: var(--til-blue-600);
	border: 1px solid rgba(10,92,168,.12);
	white-space: nowrap;
}
.til-tag--agro     { background: rgba(0,168,160,.1);  color: #067A74; border-color: rgba(0,168,160,.2); }
.til-tag--pharma   { background: rgba(27,132,216,.1); color: #0B5FA5; border-color: rgba(27,132,216,.2); }
.til-tag--polymer  { background: rgba(122,90,200,.1); color: #5B41A0; border-color: rgba(122,90,200,.2); }
.til-tag--dyes     { background: rgba(216,88,120,.1); color: #A83A5C; border-color: rgba(216,88,120,.2); }
.til-tag--surf     { background: rgba(242,163,60,.14); color: #A96A12; border-color: rgba(242,163,60,.26); }
.til-tag--spec     { background: rgba(70,110,140,.1);  color: #3C5A72; border-color: rgba(70,110,140,.2); }
.til-pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Empty state */
.til-empty { text-align: center; padding: 72px 24px; border: 1px dashed var(--til-border-strong); border-radius: var(--til-r-lg); background: var(--til-paper); }
.til-empty h3 { font-size: 1.25rem; margin: 0 0 8px; }
.til-empty p { color: var(--til-muted); margin: 0 0 18px; }

/* --------------------------------------------------------------------------
   8. PRODUCT DETAIL — SPEC TABLE
   -------------------------------------------------------------------------- */
.til-spec { border: 1px solid var(--til-border); border-radius: var(--til-r-lg); overflow: hidden; background: #fff; }
.til-spec__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; }
.til-spec__row + .til-spec__row { border-top: 1px solid var(--til-border); }
.til-spec__k {
	padding: 15px 20px; background: var(--til-paper);
	font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--til-muted); border-right: 1px solid var(--til-border);
	display: flex; align-items: center;
}
.til-spec__v { padding: 15px 20px; color: var(--til-heading); font-size: 15.5px; }
.til-spec__v--mono { font-family: var(--til-font-mono); font-size: 14.5px; }

/* Downstream intermediates as pills */
.til-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.til-pill {
	font-size: 13.5px; padding: 6px 13px; border-radius: 999px;
	background: var(--til-paper); border: 1px solid var(--til-border);
	color: var(--til-body);
	transition: all var(--til-dur) var(--til-ease);
}
.til-pill:hover { background: var(--til-blue); color: #fff; border-color: var(--til-blue); }

/* Sticky enquiry aside on product pages */
.til-aside {
	position: sticky; top: 104px;
	background: linear-gradient(165deg, var(--til-ink) 0%, var(--til-ink-2) 100%);
	border-radius: var(--til-r-lg); padding: 30px; color: var(--til-on-dark);
	box-shadow: var(--til-shadow-lg);
	overflow: hidden; isolation: isolate;
}
.til-aside h3 { color: #fff; font-size: 1.28rem; margin: 0 0 10px; }
.til-aside p { color: var(--til-on-dark-muted); font-size: 15px; margin: 0 0 20px; }
.til-aside__list { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--til-on-dark-border); }
.til-aside__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; margin-bottom: 12px; color: var(--til-on-dark-muted); }
.til-aside__list li::before {
	content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px;
	background: var(--til-teal-400);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.9 10.5l1.4-1.4 2.3 2.3 6.7-6.7 1.4 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.9 10.5l1.4-1.4 2.3 2.3 6.7-6.7 1.4 1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   8b. HERO SUPPORT
   -------------------------------------------------------------------------- */
/* The artwork must fill and centre within its column, otherwise it hugs the
   left edge and leaves a large empty band of brand gradient to its right. */
.til-hero__art,
.til-hero__art .elementor-widget-container,
.til-hero__art figure,
.til-hero__art .elementor-image { width: 100%; }
.til-hero__art img {
	display: block;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .42));
	animation: til-float 9s var(--til-ease) infinite;
}
@keyframes til-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.til-hero__art img { animation: none; }
}

/* Certification / trust strip beneath the hero */
.til-trust {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	padding-top: 28px; border-top: 1px solid var(--til-on-dark-border);
}
.til-trust__label {
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--til-on-dark-muted); margin-right: 6px;
}
.til-trust__i {
	font-size: 13px; font-weight: 600; color: var(--til-on-dark);
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--til-on-dark-border);
	border-radius: 999px; padding: 6px 14px;
	backdrop-filter: blur(4px);
	transition: all var(--til-dur) var(--til-ease);
}
.til-trust__i:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.til-trust__i--accent { border-color: rgba(35, 196, 187, .55); color: var(--til-teal-400); }

/* EcoVadis Gold sits first and is the one chip allowed to use gold, so it reads
   as the strongest third-party credential rather than one of a row of equals. */
a.til-trust__i--gold,
.til-trust__i--gold {
	color: #F0C775;
	border-color: rgba(217, 167, 60, .55);
	background: rgba(217, 167, 60, .15);
	font-weight: 700;
}
a.til-trust__i--gold:hover {
	color: var(--til-ink);
	background: #F0C775;
	border-color: #F0C775;
}

/* --------------------------------------------------------------------------
   8c. APPLICATION CARDS (homepage product entry points)
   -------------------------------------------------------------------------- */
.til-appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }

.til-appcard {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 18px; align-items: center;
	background: #fff; border: 1px solid var(--til-border);
	border-radius: var(--til-r-lg); padding: 22px 24px;
	transition: all var(--til-dur) var(--til-ease-out);
	color: inherit;
}
.til-appcard:hover {
	border-color: var(--til-blue-400);
	box-shadow: var(--til-shadow-md);
	transform: translateY(-3px);
	color: inherit;
}
.til-appcard__ico {
	width: 50px; height: 50px; border-radius: var(--til-r);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; color: var(--til-blue);
	background: linear-gradient(150deg, rgba(0,168,160,.14), rgba(27,132,216,.12));
	border: 1px solid rgba(10, 92, 168, .14);
	transition: all var(--til-dur) var(--til-ease);
}
.til-appcard:hover .til-appcard__ico {
	background: linear-gradient(150deg, var(--til-teal), var(--til-blue));
	color: #fff;
}
.til-appcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.til-appcard__t {
	font-family: var(--til-font-head); font-size: 1.06rem; font-weight: 650;
	color: var(--til-heading); letter-spacing: -.012em;
}
.til-appcard:hover .til-appcard__t { color: var(--til-blue); }
.til-appcard__d { font-size: 14px; color: var(--til-muted); line-height: 1.55; }
.til-appcard__n {
	font-size: 12px; font-weight: 700; letter-spacing: .04em;
	color: var(--til-teal); white-space: nowrap; align-self: flex-start;
	background: rgba(0,168,160,.09); border-radius: 999px; padding: 5px 11px;
}

@media (max-width: 767px) {
	.til-appgrid { grid-template-columns: 1fr; }
	.til-appcard { grid-template-columns: 44px minmax(0,1fr); padding: 18px; }
	.til-appcard__n { grid-column: 2; }
	.til-trust { gap: 8px 10px; }
}

/* --------------------------------------------------------------------------
   8d. AWARD / RATING BLOCK  (EcoVadis and future ratings)
   -------------------------------------------------------------------------- */
.til-award {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}
.til-award__medal { display: flex; justify-content: center; }
.til-award__medal img {
	width: 100%;
	max-width: 190px;
	height: auto;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .35));
}
.til-award__label {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: #F0C775;
	background: rgba(217, 167, 60, .14);
	border: 1px solid rgba(217, 167, 60, .42);
	border-radius: 999px; padding: 7px 15px;
	margin-bottom: 18px;
}

/* Four EcoVadis assessment themes */
.til-themes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin-top: 26px;
}
.til-theme {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--til-on-dark-border);
	border-radius: var(--til-r-lg);
	padding: 18px 20px;
	transition: all var(--til-dur) var(--til-ease);
}
.til-theme:hover { background: rgba(255, 255, 255, .11); border-color: rgba(217, 167, 60, .5); }
.til-theme__k {
	font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
	color: #F0C775; margin-bottom: 7px;
}
.til-theme__v { font-size: 14.5px; color: var(--til-on-dark-muted); line-height: 1.55; }

/* Light-ground variant, used in the trust strip and on white sections */
.til-award--light .til-award__label { color: #8A6612; background: rgba(217, 167, 60, .16); border-color: rgba(217, 167, 60, .5); }
.til-award--light .til-theme { background: var(--til-paper); border-color: var(--til-border); }
.til-award--light .til-theme__k { color: #8A6612; }
.til-award--light .til-theme__v { color: var(--til-muted); }

@media (max-width: 767px) {
	.til-award { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: left; }
	.til-award__medal img { max-width: 150px; }
}

/* --------------------------------------------------------------------------
   9. STATS
   -------------------------------------------------------------------------- */
.til-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.til-stat { padding: 8px 28px; border-left: 1px solid var(--til-border); }
.til-stat:first-child { border-left: 0; padding-left: 0; }
.til-stat__n {
	font-family: var(--til-font-head); font-size: clamp(2.1rem, 4vw, 3.1rem);
	font-weight: 700; line-height: 1; letter-spacing: -.03em;
	color: var(--til-blue); display: flex; align-items: baseline; gap: 2px;
	font-variant-numeric: tabular-nums;
}
.til-stat__suffix { font-size: .5em; color: var(--til-teal); font-weight: 700; }
.til-stat__l { font-size: 14px; color: var(--til-muted); margin-top: 10px; line-height: 1.5; }
.til-stats--onDark .til-stat { border-color: var(--til-on-dark-border); }
.til-stats--onDark .til-stat__n { color: #fff; }
.til-stats--onDark .til-stat__suffix { color: var(--til-teal-400); }
.til-stats--onDark .til-stat__l { color: var(--til-on-dark-muted); }

/* --------------------------------------------------------------------------
   10. TIMELINE (milestones)
   -------------------------------------------------------------------------- */
.til-timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }
.til-timeline::before {
	content: ""; position: absolute; left: 91px; top: 10px; bottom: 10px; width: 2px;
	background: linear-gradient(180deg, var(--til-teal), var(--til-blue-400) 45%, var(--til-border) 100%);
}
.til-tl {
	display: grid; grid-template-columns: 74px 36px minmax(0, 1fr); gap: 0 16px;
	padding-bottom: 34px; align-items: start;
}
.til-tl:last-child { padding-bottom: 0; }
.til-tl__year {
	font-family: var(--til-font-head); font-size: 1.12rem; font-weight: 700;
	color: var(--til-blue); text-align: right; padding-top: 5px; letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.til-tl__dot { display: flex; justify-content: center; padding-top: 10px; }
.til-tl__dot i {
	width: 13px; height: 13px; border-radius: 50%;
	background: #fff; border: 3px solid var(--til-teal);
	box-shadow: 0 0 0 4px rgba(0, 168, 160, .14);
	transition: all var(--til-dur) var(--til-ease);
}
.til-tl:hover .til-tl__dot i { background: var(--til-teal); box-shadow: 0 0 0 7px rgba(0, 168, 160, .2); }
.til-tl__body {
	background: #fff; border: 1px solid var(--til-border); border-radius: var(--til-r-lg);
	padding: 18px 22px; box-shadow: var(--til-shadow-sm);
	transition: transform var(--til-dur) var(--til-ease-out), box-shadow var(--til-dur) var(--til-ease-out);
}
.til-tl:hover .til-tl__body { transform: translateX(4px); box-shadow: var(--til-shadow-md); }
.til-tl__body h4 { font-size: 1.02rem; margin: 0 0 5px; }
.til-tl__body p { margin: 0; font-size: 14.8px; color: var(--til-muted); }

/* --------------------------------------------------------------------------
   11. NEWS / DOWNLOADS / CAREERS LISTS
   -------------------------------------------------------------------------- */
.til-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }
.til-ncard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--til-border); border-radius: var(--til-r-lg); overflow: hidden; transition: transform var(--til-dur) var(--til-ease-out), box-shadow var(--til-dur) var(--til-ease-out); height: 100%; }
.til-ncard:hover { transform: translateY(-5px); box-shadow: var(--til-shadow-lg); }
.til-ncard__media { aspect-ratio: 16 / 9; background: linear-gradient(140deg, var(--til-ink) 0%, var(--til-blue-600) 100%); position: relative; overflow: hidden; }
.til-ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--til-ease-out); }
.til-ncard:hover .til-ncard__media img { transform: scale(1.05); }
.til-ncard__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.til-ncard__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--til-muted); margin-bottom: 12px; }
.til-ncard__cat { color: var(--til-teal); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.til-ncard h3 { font-size: 1.14rem; line-height: 1.34; margin: 0 0 10px; }
.til-ncard p { font-size: 15px; color: var(--til-muted); margin: 0 0 18px; }
.til-ncard__foot { margin-top: auto; }

/* Download row */
.til-dl { border: 1px solid var(--til-border); border-radius: var(--til-r-lg); overflow: hidden; background: #fff; }
.til-dl__row {
	display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto;
	gap: 18px; align-items: center; padding: 17px 22px;
	transition: background var(--til-dur) var(--til-ease);
}
.til-dl__row + .til-dl__row { border-top: 1px solid var(--til-border); }
.til-dl__row:hover { background: var(--til-paper); }
.til-dl__ico {
	width: 42px; height: 42px; border-radius: var(--til-r-sm);
	display: flex; align-items: center; justify-content: center;
	background: var(--til-paper-2); color: var(--til-blue);
	font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
	border: 1px solid var(--til-border);
}
.til-dl__ico--sds { background: rgba(216,88,120,.1);  color: #A83A5C; border-color: rgba(216,88,120,.2); }
.til-dl__ico--tds { background: rgba(0,168,160,.1);   color: #067A74; border-color: rgba(0,168,160,.2); }
.til-dl__ico--cert{ background: rgba(242,163,60,.14); color: #A96A12; border-color: rgba(242,163,60,.26); }
.til-dl__name { font-weight: 600; color: var(--til-heading); font-size: 15.5px; line-height: 1.4; }
.til-dl__sub { font-size: 13px; color: var(--til-muted); margin-top: 3px; }
.til-dl__size { font-size: 13px; color: var(--til-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Job / vacancy row */
.til-job {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center;
	background: #fff; border: 1px solid var(--til-border); border-radius: var(--til-r-lg);
	padding: 24px 26px; transition: all var(--til-dur) var(--til-ease-out);
}
.til-job + .til-job { margin-top: 14px; }
.til-job:hover { border-color: var(--til-blue-400); box-shadow: var(--til-shadow-md); transform: translateY(-2px); }
.til-job h3 { font-size: 1.14rem; margin: 0 0 8px; }
.til-job__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--til-muted); }
.til-job__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   12. ACCORDION / TABS (Elementor overrides)
   -------------------------------------------------------------------------- */
.til-acc .elementor-accordion .elementor-accordion-item {
	border: 1px solid var(--til-border) !important;
	border-radius: var(--til-r-lg);
	margin-bottom: 12px; overflow: hidden; background: #fff;
	transition: box-shadow var(--til-dur) var(--til-ease);
}
.til-acc .elementor-accordion .elementor-accordion-item:hover { box-shadow: var(--til-shadow-sm); }
.til-acc .elementor-tab-title { padding: 19px 24px !important; font-family: var(--til-font-head); font-weight: 650; font-size: 1.04rem; }
.til-acc .elementor-tab-title.elementor-active { color: var(--til-blue); }
.til-acc .elementor-tab-content { padding: 0 24px 24px !important; border: 0 !important; color: var(--til-muted); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   13. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
/* Sticky must live on Elementor's header location wrapper: if it sits on the
   inner container, the containing block is only header-height and sticking
   never engages. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Anchor jumps must clear the sticky header, otherwise the target heading
   lands underneath it (e.g. /careers/#vacancies). */
html { scroll-padding-top: 130px; }
@media (max-width: 767px) { html { scroll-padding-top: 96px; } }
.til-sec[id] { scroll-margin-top: 130px; }

.til-header {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--til-border);
	transition: box-shadow var(--til-dur) var(--til-ease), background var(--til-dur) var(--til-ease);
}
.til-header.is-stuck { box-shadow: var(--til-shadow-md); background: rgba(255,255,255,.96); }

/* Brand lockup — inline SVG mark + wordmark in the real brand font.
   Rendered as markup rather than an image file so the wordmark uses the
   loaded webfont and stays crisp at any density. Replace the mark with the
   official logo artwork when it is supplied. */
.til-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.til-logo__mark { flex: 0 0 auto; width: 42px; height: 42px; display: block; }
.til-logo__text { display: flex; flex-direction: column; line-height: 1; }
.til-logo__name {
	font-family: var(--til-font-head);
	font-size: 22px; font-weight: 800; letter-spacing: -.022em;
	color: var(--til-ink); line-height: 1;
}
.til-logo__sub {
	font-family: var(--til-font-body);
	font-size: 9.5px; font-weight: 700; letter-spacing: .215em;
	text-transform: uppercase; color: var(--til-teal);
	margin-top: 5px;
}
.til-logo:hover .til-logo__name { color: var(--til-blue); }
.til-logo--onDark .til-logo__name { color: #fff; }
.til-logo--onDark .til-logo__sub { color: var(--til-teal-400); }
.til-logo--onDark:hover .til-logo__name { color: var(--til-teal-400); }

@media (max-width: 767px) {
	.til-logo__mark { width: 34px; height: 34px; }
	.til-logo__name { font-size: 18px; }
	.til-logo__sub { font-size: 8px; letter-spacing: .18em; margin-top: 4px; }
}

/* Utility strip above the main bar */
.til-utility {
	background: var(--til-ink);
	color: var(--til-on-dark-muted);
	font-size: 13px;
}
.til-utility a { color: var(--til-on-dark-muted); }
.til-utility a:hover { color: #fff; }

/* The six top-level items must sit on one line at every desktop width.
   Below 1025px Elementor swaps to the burger, so only 1025–1400 needs care. */
.til-header__row { flex-wrap: nowrap !important; }
.til-header__logo { flex: 0 0 auto; justify-content: center; }
.til-header__nav  { flex: 1 1 auto; min-width: 0; }
.til-header__cta  { flex: 0 0 auto; }

/* The logo lives in an HTML widget, which is a block that fills the column —
   so the column's justify-content could not centre it. Centre inside the
   widget instead. */
.til-header__logo > .elementor-widget,
.til-header__logo .elementor-widget-container {
	display: flex;
	align-items: center;
	width: 100%;
}
.til-header__row { min-height: 74px; }
/* Scoped to the primary nav: the utility bar has its own 4 links that must be
   free to wrap on small screens, otherwise they push the page wider than the
   viewport and the whole document scrolls sideways. */
.til-header__nav .elementor-nav-menu { flex-wrap: nowrap !important; }
.til-header__nav .elementor-nav-menu > li { white-space: nowrap; }

/* Utility strip navigation */
.til-nav--utility .elementor-nav-menu { flex-wrap: wrap; justify-content: flex-end; }
.til-nav--utility .elementor-nav-menu .elementor-item {
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 8px 10px !important;
	color: var(--til-on-dark-muted) !important;
}
.til-nav--utility .elementor-nav-menu .elementor-item:hover,
.til-nav--utility .elementor-nav-menu .elementor-item:focus,
.til-nav--utility .elementor-nav-menu .elementor-item.elementor-item-active {
	color: #fff !important;
	/* Elementor paints an active-state background here, which reads as a stray
	   box on the dark utility strip. */
	background: transparent !important;
}
.til-nav--utility .elementor-nav-menu > li > a::after { display: none; }

@media (max-width: 767px) {
	/* Utility bar becomes a single centred, wrapping row. */
	.til-utility__wrap > .e-con-inner { padding-inline: var(--til-gutter); }
	.til-nav--utility .elementor-nav-menu { justify-content: center; }
	.til-nav--utility .elementor-nav-menu .elementor-item { padding: 6px 8px !important; font-size: 12.5px !important; }
}

/* Elementor Nav Menu tuning */
.til-nav .elementor-nav-menu .elementor-item {
	font-family: var(--til-font-body);
	font-weight: 600; font-size: 15px; letter-spacing: -.005em;
	color: var(--til-heading);
	padding: 10px 12px !important;
	border-radius: var(--til-r-sm);
	transition: color var(--til-dur) var(--til-ease), background var(--til-dur) var(--til-ease);
}

/* Tighten further in the band where space is tightest. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.til-nav .elementor-nav-menu .elementor-item {
		font-size: 14.2px;
		padding: 10px 9px !important;
	}
	.til-nav .elementor-nav-menu > li > a::after { left: 9px; right: 9px; }
}
.til-nav .elementor-nav-menu .elementor-item:hover,
.til-nav .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--til-blue); background: var(--til-paper); }

/* Underline indicator */
.til-nav .elementor-nav-menu > li > a { position: relative; }
.til-nav .elementor-nav-menu > li > a::after {
	content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px;
	background: var(--til-teal); transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--til-ease-out);
}
.til-nav .elementor-nav-menu > li > a:hover::after,
.til-nav .elementor-nav-menu > li > a.elementor-item-active::after { transform: scaleX(1); }

/* Dropdowns */
.til-nav .elementor-nav-menu--dropdown {
	border-radius: var(--til-r-lg) !important;
	box-shadow: var(--til-shadow-lg) !important;
	border: 1px solid var(--til-border);
	overflow: hidden; padding: 8px !important;
	min-width: 264px;
}
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
	font-size: 14.5px !important; font-weight: 500 !important;
	padding: 11px 14px !important; border-radius: var(--til-r-sm);
	color: var(--til-body) !important;
}
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
	background: var(--til-paper) !important; color: var(--til-blue) !important;
}

/* Current page inside a dropdown.
   Elementor paints its own dark "active" background here, which against our
   dark sub-item text rendered the current item as a blank bar. Both the
   background and the text colour are set explicitly, including the .highlighted
   class Elementor applies during keyboard navigation. */
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted,
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.til-nav .elementor-nav-menu--dropdown li.current-menu-item > a.elementor-sub-item,
.til-nav .elementor-nav-menu--dropdown li.current_page_item > a.elementor-sub-item {
	background: var(--til-paper-2) !important;
	color: var(--til-blue-600) !important;
	font-weight: 650 !important;
}
/* A left rule marks the current item without relying on colour alone. */
.til-nav .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
	box-shadow: inset 3px 0 0 var(--til-teal);
}

/* Same treatment for the top-level item when a child page is open. */
.til-nav .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,
.til-nav .elementor-nav-menu > li.current-menu-parent > a.elementor-item {
	color: var(--til-blue) !important;
	background: var(--til-paper) !important;
}

/* Mobile drawer */
.til-nav .elementor-menu-toggle { color: var(--til-heading); border-radius: var(--til-r-sm); }

/* --------------------------------------------------------------------------
   14. PAGE HERO / BREADCRUMB
   -------------------------------------------------------------------------- */
.til-crumb { font-size: 13.5px; color: var(--til-on-dark-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.til-crumb a { color: var(--til-on-dark-muted); }
.til-crumb a:hover { color: #fff; }
.til-crumb__sep { opacity: .5; }
.til-crumb span[aria-current] { color: var(--til-teal-400); font-weight: 600; }

/* Light variant */
.til-crumb--light { color: var(--til-muted); }
.til-crumb--light a { color: var(--til-muted); }
.til-crumb--light a:hover { color: var(--til-blue); }
.til-crumb--light span[aria-current] { color: var(--til-blue); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.til-footer { background: var(--til-ink); color: var(--til-on-dark-muted); }
.til-footer h4 {
	color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; margin: 0 0 20px; font-family: var(--til-font-body);
}
.til-footer ul { list-style: none; margin: 0; padding: 0; }
.til-footer li { margin-bottom: 11px; }
.til-footer a { color: var(--til-on-dark-muted); font-size: 14.8px; }
.til-footer a:hover { color: var(--til-teal-400); }
.til-footer__bottom { border-top: 1px solid var(--til-on-dark-border); font-size: 13.5px; }
.til-footer address { font-style: normal; font-size: 14.8px; line-height: 1.75; }

/* Column layout as a grid rather than percentage widths. Five columns at
   27/17/17/19/19% plus four 34px gaps overflowed the 1265px measure and wrapped
   onto a second row; grid tracks cannot overflow that way. */
.til-footer__cols {
	display: grid !important;
	grid-template-columns: 1.55fr 1fr 1fr 1.05fr 1.05fr;
	gap: 34px;
	align-items: start;
}
.til-footer__cols > * { width: auto !important; max-width: 100% !important; min-width: 0; }

@media (max-width: 1024px) {
	.til-footer__cols { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
}
@media (max-width: 560px) {
	.til-footer__cols { grid-template-columns: 1fr; gap: 26px; }
}

/* Elementor's per-element CSS sets nav links to the kit's body colour, which is
   near-invisible on the navy footer. Its selectors are more specific than any
   class chain we can write here, so these are forced. */
.til-footer .elementor-nav-menu .elementor-item,
.til-footer .elementor-nav-menu a.elementor-item {
	color: var(--til-on-dark-muted) !important;
	background: transparent !important;
	font-family: var(--til-font-body) !important;
	font-size: 14.8px !important;
	font-weight: 400 !important;
	padding: 5px 0 !important;
	line-height: 1.5 !important;
	fill: currentColor;
}
.til-footer .elementor-nav-menu .elementor-item:hover,
.til-footer .elementor-nav-menu .elementor-item:focus-visible,
.til-footer .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--til-teal-400) !important;
	background: transparent !important;
}
/* No underline indicator in the footer. */
.til-footer .elementor-nav-menu > li > a::after { display: none !important; }

/* Elementor menu items inherit .til-footer li's 11px margin on top of their own
   anchor padding, which left the link lists too airy. Spacing now comes from the
   anchor padding alone. Note Elementor marks vertical menus with .sm-vertical,
   not .elementor-nav-menu--layout-vertical. */
.til-footer .elementor-nav-menu li { margin-bottom: 0 !important; }
.til-footer .elementor-nav-menu.sm-vertical > li > a {
	padding: 3px 0 !important;
	line-height: 1.45 !important;
}

/* Bottom legal bar: horizontal, wrapping, smaller. */
.til-footer__legalrow { margin-top: 22px; }
.til-footer .til-footer__legal .elementor-nav-menu {
	flex-wrap: wrap;
	gap: 2px 22px;
}
.til-footer .til-footer__legal .elementor-nav-menu .elementor-item {
	font-size: 13.2px !important;
	padding: 4px 0 !important;
}

/* --------------------------------------------------------------------------
   16. FORMS (Elementor Pro Form)
   -------------------------------------------------------------------------- */
.til-form .elementor-field-group > label {
	font-size: 13px !important; font-weight: 650 !important;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--til-muted) !important; margin-bottom: 8px !important;
}
.til-form .elementor-field-textual {
	border: 1.5px solid var(--til-border-strong) !important;
	border-radius: var(--til-r) !important;
	padding: 14px 16px !important;
	font-family: var(--til-font-body) !important; font-size: 15.5px !important;
	color: var(--til-heading) !important; background: #fff !important;
	transition: border-color var(--til-dur) var(--til-ease), box-shadow var(--til-dur) var(--til-ease);
	min-height: 52px;
}
.til-form .elementor-field-textual:focus {
	border-color: var(--til-blue) !important;
	box-shadow: 0 0 0 4px rgba(10, 92, 168, .1) !important;
	outline: none !important;
}
.til-form textarea.elementor-field-textual { min-height: 132px; }
/* Submit sits on a white section by default, so it is solid blue.
   Elementor Pro emits per-element form-button CSS whose specificity beats any
   class chain here, so the colours are forced rather than fought. */
.til-form .elementor-button[type="submit"] {
	background: var(--til-blue) !important; color: #fff !important;
	font-weight: 700; border-radius: var(--til-r); padding: 16px 34px;
	font-size: 15px; border: 0;
	box-shadow: 0 4px 14px -4px rgba(10, 92, 168, .45);
	transition: all var(--til-dur) var(--til-ease);
}
.til-form .elementor-button[type="submit"]:hover {
	background: var(--til-blue-600) !important; color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -6px rgba(10, 92, 168, .5);
}

/* On a dark ground it inverts to match the accent buttons. */
.til-form--onDark .elementor-button[type="submit"] {
	background: #fff !important; color: var(--til-blue-600) !important;
	box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .38);
}
.til-form--onDark .elementor-button[type="submit"]:hover {
	background: var(--til-paper) !important; color: var(--til-ink) !important;
}

/* Form on a dark ground */
.til-form--onDark .elementor-field-group > label { color: var(--til-on-dark-muted) !important; }
.til-form--onDark .elementor-field-textual {
	background: rgba(255,255,255,.07) !important;
	border-color: var(--til-on-dark-border) !important;
	color: #fff !important;
}
.til-form--onDark .elementor-field-textual::placeholder { color: var(--til-on-dark-muted) !important; }

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* The hidden starting state is scoped to .til-js, which site.js adds to <html>
   as its first action. If the script fails to load or errors, the class is
   never added and every reveal element simply renders visible — content must
   never depend on JavaScript succeeding. */
@media (prefers-reduced-motion: no-preference) {
	.til-js .til-reveal { opacity: 0; transform: translateY(22px); }
	.til-js .til-reveal.is-in {
		opacity: 1; transform: none;
		transition: opacity .7s var(--til-ease-out), transform .7s var(--til-ease-out);
	}
	.til-js .til-reveal.is-in:nth-child(2) { transition-delay: .07s; }
	.til-js .til-reveal.is-in:nth-child(3) { transition-delay: .14s; }
	.til-js .til-reveal.is-in:nth-child(4) { transition-delay: .21s; }
	.til-js .til-reveal.is-in:nth-child(5) { transition-delay: .28s; }
	.til-js .til-reveal.is-in:nth-child(6) { transition-delay: .35s; }
}
/* Editor + reduced motion must never hide content */
.elementor-editor-active .til-reveal,
body.elementor-editor-preview .til-reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	.til-reveal { opacity: 1 !important; transform: none !important; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   18. HELPERS
   -------------------------------------------------------------------------- */
.til-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.til-hide { display: none !important; }
.til-nowrap { white-space: nowrap; }
.til-center { text-align: center; }
.til-maxw-60 { max-width: 60ch; }
.til-maxw-70 { max-width: 70ch; }

/* Table — used for investor results and generic data */
.til-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.til-table th, .til-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--til-border); }
.til-table thead th {
	background: var(--til-ink); color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	border-bottom: 0;
}
.til-table tbody tr { transition: background var(--til-dur) var(--til-ease); }
.til-table tbody tr:hover { background: var(--til-paper); }
.til-table tbody tr:last-child td { border-bottom: 0; }
.til-table-wrap { border: 1px solid var(--til-border); border-radius: var(--til-r-lg); overflow-x: auto; box-shadow: var(--til-shadow-sm); }
.til-table--zebra tbody tr:nth-child(even) { background: rgba(245,248,251,.7); }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.til-catalogue { grid-template-columns: 1fr; }
	.til-filters { position: static; }
	.til-stat { padding: 8px 18px; }
	.til-spec__row { grid-template-columns: 168px minmax(0,1fr); }
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	.til-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
	.til-stat { border-left: 0; padding: 0 12px; }
	.til-stat:first-child { padding-left: 12px; }

	.til-spec__row { grid-template-columns: 1fr; }
	.til-spec__k { border-right: 0; border-bottom: 1px solid var(--til-border); padding: 11px 16px; }
	.til-spec__v { padding: 13px 16px; }

	.til-timeline::before { left: 6px; }
	.til-tl { grid-template-columns: 14px minmax(0,1fr); gap: 0 18px; padding-bottom: 26px; }
	.til-tl__year { grid-column: 2; text-align: left; padding-top: 0; margin-bottom: 6px; font-size: 1rem; }
	.til-tl__dot { grid-column: 1; grid-row: 1 / span 2; padding-top: 4px; justify-content: flex-start; }
	.til-tl__body { grid-column: 2; padding: 15px 18px; }

	.til-dl__row { grid-template-columns: 38px minmax(0,1fr); gap: 14px; padding: 15px 16px; }
	.til-dl__size { grid-column: 2; }

	.til-job { grid-template-columns: 1fr; padding: 20px; }
	.til-pgrid { grid-template-columns: 1fr; }
	.til-clip-bottom { clip-path: none; }
	.til-aside { position: static; padding: 24px; }
	.til-bg-glow::after { width: 420px; height: 420px; right: -140px; top: -200px; }
}

/* --------------------------------------------------------------------------
   20. PRINT
   -------------------------------------------------------------------------- */
@media print {
	.til-header, .til-footer, .til-aside, .til-filters { display: none !important; }
	body { color: #000; font-size: 11pt; }
	.til-card, .til-spec, .til-table-wrap { box-shadow: none !important; border-color: #999 !important; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}