/*
Theme Name: 2B Group
Theme URI: https://2bgroup.lt
Author: 2B Group
Description: Corporate group theme for 2B Group — seven logistics, transport and property companies in Lithuania and Germany.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twobgroup
*/

/* =====================================================================
   DESIGN TOKENS — deep navy + one flat, confident orange accent (the
   company's own original brand colours). Deliberately no gradients,
   no glassmorphism/blur, no glow effects — those read as generic
   AI-template decoration rather than a real brand identity.
   ===================================================================== */
:root {
	/* Ink — deep midnight navy */
	--ink:    #0B0E3D;
	--ink-2:  #171B55;
	--ink-3:  #262B70;

	/* Accent — flat blue, used deliberately (not everywhere). Two roles:
	   --accent for backgrounds/large text/icons, --accent-lt for small
	   text and icons on dark ink — blue's luminance math means one
	   shade can't cover both roles at AA contrast (unlike the orange
	   this replaced), so this is a real second token, not decoration. */
	/* Pulled back from #2B6CE0 / #1D4FB8. Those sat at 81% and 84%
	   saturation — past the point where a blue stops reading as a
	   considered brand colour and starts reading as a default. The hue
	   is unchanged; only the intensity comes down, which matters more
	   now that the whole page is dark and every accent sits against
	   navy rather than white. --accent-lt is left alone: it does small
	   text and icons on dark ink, where it needs the extra punch to
	   stay legible. */
	--accent:    #3D70CE;
	--accent-dk: #2A55A6;
	--accent-lt: #6C9BFF;

	/* Gray */
	--gray:   #6B6B72;
	--gray-2: #C4C4C9;

	/* Surfaces — light again, and deliberately so this time.

	   The site spent a while running dark end to end. Seen rather than
	   reasoned about, that was the problem: seven near-black slabs under
	   a near-black heading, photographs dimmed so far they read as grey
	   noise, and a page that felt heavy instead of expensive. Darkness
	   is not the same thing as restraint.

	   The shape of the page now is dark hero, light body, dark footer.
	   The hero keeps its drama and the footer closes the page, and
	   between them the content gets air, contrast and photographs at
	   their real brightness. The transition from the dark opening into
	   the light body becomes the moment the page turns — which is worth
	   more than another screen of grey.

	   Warm-neutral rather than pure white: #FCFCFD and #F4F5F8 have a
	   trace of the navy in them, so paper and ink belong to one family
	   instead of being black type dropped onto a blank sheet. */
	--paper:   #FCFCFD;
	--paper-2: #F4F5F8;
	--paper-3: #E7E9F0;

	/* Text, back to ink on paper */
	--tx:    #0B0E3D;
	--tx-2:  #4A4E68;
	--tx-3:  #63677E;

	/* Text on ink */
	--txw:   #FFFFFF;
	--txw-2: rgba(255,255,255,0.60);
	/* Raised from 0.36. At that value every label, eyebrow, footer line
	   and caption on the site measured about 3.2:1 against the dark
	   ground — under the 4.5:1 that small text needs, and it had been
	   that way since before today. 0.55 measures near 6:1 and still
	   reads as secondary. */
	--txw-3: rgba(255,255,255,0.55);

	/* Lines — back to ink at low opacity, to match the light surfaces.
	   --line-w / --line-w2 below stay white: those are for the hero and
	   footer, which are still dark. */
	--line:    rgba(11,14,61,0.12);
	--line-2:  rgba(11,14,61,0.06);
	--line-w:  rgba(255,255,255,0.14);
	--line-w2: rgba(255,255,255,0.07);

	/* Layout */
	--nav-h:  72px;
	--sec:    clamp(4.5rem, 9vw, 8rem);
	--px:     clamp(1.25rem, 5vw, 4rem);
	--mxw:    1280px;
	/* --mxw stays a fixed, capped width up to this point on purpose —
	   body text shouldn't stretch past a comfortable reading length no
	   matter how wide the screen is. Past standard desktop, though (see
	   the large-viewport block near the end of this file), it's raised
	   in stages for QHD/4K so the page doesn't look like a narrow
	   column stranded in the middle of a huge monitor. */

	/* Film grain, as a tileable data URI.

	   Large flat dark fields are the thing that most reliably makes a
	   dark page look computer-generated: nothing in the physical world
	   is that perfectly even. A few percent of monochrome noise over
	   them is what print and film have always had, and the eye reads it
	   as surface rather than as a rendered fill. Kept as a token so the
	   same grain is used everywhere rather than three slightly
	   different ones drifting apart.

	   Applied as an extra background layer on the sections themselves,
	   not as a fixed full-page overlay — a page-wide layer would cover
	   the hero, which is out of scope, and would cost a compositing
	   pass at 4K for no benefit. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E");

	/* Radii — restrained and architectural, not "app-bubbly" */
	--r:    12px;
	--r-lg: 16px;
	--r-sm: 8px;

	/* Shadows — ink-tinted; one modest accent-tinted shadow for the
	   primary button only, never a diffuse "glow" */
	--sh-1: 0 1px 2px rgba(11,14,61,0.05), 0 6px 18px rgba(11,14,61,0.07);
	--sh-2: 0 5px 14px rgba(11,14,61,0.08), 0 16px 34px rgba(11,14,61,0.11);
	--sh-3: 0 8px 20px rgba(11,14,61,0.12), 0 26px 54px rgba(11,14,61,0.16);
	--sh-accent: 0 6px 16px rgba(43,108,224,0.32);

	--hero-paper:   var(--paper);
	--hero-paper-2: var(--paper-2);
	/* The header's own text colour. It pointed at --ink, which was
	   correct while the header sat on white; with the surface inverted
	   it left navy lettering on a navy bar — the whole navigation
	   invisible on every inner page. Caught by the contrast audit, not
	   by looking: at 1.06:1 the words are still there, just unreadable,
	   and a screenshot of a dark header reads as "a dark header". */
	--hero-ink:     var(--ink);
	--hero-ink-60:  var(--tx-2);
	--hero-accent:  var(--accent);
	--hero-line:    var(--line);
	--hero-line-2:  var(--line-2);
}

/* =====================================================================
   RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	background: var(--paper);
	color: var(--tx);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	line-height: 1.65;
	font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4, h5, h6 {
	font-family: 'Archivo', 'Inter', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--tx);
	text-wrap: balance;
}
table { border-collapse: collapse; }

/* =====================================================================
   WORDPRESS / FSE FIXES
   ===================================================================== */
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
.wp-block-shortcode { display: block; }
header.wp-block-template-part .wp-block-group { background-color: transparent !important; }
footer.wp-block-template-part .wp-block-group { background-color: transparent !important; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.tp-inner {
	width: 100%;
	max-width: calc(var(--mxw) + 2 * var(--px));
	margin-inline: auto;
	padding-inline: var(--px);
}

/* =====================================================================
   MOTION-LINE MOTIF — the recurring signature device
   ===================================================================== */
.tp-lines {
	display: inline-flex; flex-direction: column; gap: 3px;
	width: 22px; flex-shrink: 0;
}
.tp-lines span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.tp-lines span:nth-child(1) { width: 100%; }
.tp-lines span:nth-child(2) { width: 68%; }
.tp-lines span:nth-child(3) { width: 40%; }
.tp-lines--w { color: #fff; }

.tp-eyebrow {
	display: inline-flex; align-items: center; gap: 0.65rem;
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--gray);
	margin-bottom: 1.1rem;
}
.tp-eyebrow .tp-lines { color: var(--ink); }

.tp-heading {
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	letter-spacing: -0.02em;
	color: var(--tx);
	margin-bottom: 0.55em;
}
.tp-subheading {
	font-size: clamp(0.94rem, 1.4vw, 1.05rem);
	color: var(--tx-2);
	line-height: 1.75;
	max-width: 56ch;
}

/* =====================================================================
   BUTTON SYSTEM — flat colour, no gradients
   ===================================================================== */
.tp-btn {
	display: inline-flex; align-items: center; gap: 0.65rem;
	padding: 0.9rem 1.85rem;
	border-radius: var(--r-sm);
	font-weight: 600; font-size: 0.88rem;
	letter-spacing: -0.005em;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s, transform 0.18s, border-color 0.2s, box-shadow 0.2s;
	white-space: nowrap;
	border: 1.5px solid transparent; cursor: pointer; line-height: 1;
}
.tp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.tp-btn--navy {
	background: var(--ink); color: #fff !important;
	box-shadow: var(--sh-1);
}
.tp-btn--navy:hover { background: var(--ink-2); box-shadow: var(--sh-2); transform: translateY(-2px); }

.tp-btn--orange,
.tp-btn--signal {
	background: var(--accent); color: #fff !important;
	box-shadow: var(--sh-accent);
}
.tp-btn--orange:hover,
.tp-btn--signal:hover { background: var(--accent-dk); box-shadow: var(--sh-2); transform: translateY(-2px); }

.tp-btn--outline {
	background: transparent; color: var(--tx) !important;
	border: 1.5px solid var(--line);
}
.tp-btn--outline:hover { border-color: var(--ink); background: var(--paper-2); }

.tp-btn--ghost {
	background: transparent; color: #fff !important;
	border: 1.5px solid var(--line-w);
}
.tp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.tp-btn--white {
	background: #fff; color: var(--ink) !important;
	box-shadow: var(--sh-2);
}
.tp-btn--white:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }

/* =====================================================================
   HEADER
   ===================================================================== */
header.wp-block-template-part {
	position: sticky; top: 0; inset-inline: 0;
	z-index: 900; height: var(--nav-h);
	background: var(--hero-paper);
	border-bottom: 1px solid var(--hero-line);
	transition: box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1),
		background 0.35s ease, border-color 0.35s ease;
}
header.wp-block-template-part.is-hidden { transform: translateY(-100%); }
header.wp-block-template-part.is-scrolled { box-shadow: var(--sh-1); }

/* Front page: a permanently dark solid bar (not an overlay — it never
   goes transparent) so it reads as one piece with the dark hero and
   dark "Įmonės" section beneath it, instead of a bright white strip
   sitting on top of them. */
header.wp-block-template-part.tp-header--dark {
	background: var(--ink);
	border-bottom-color: rgba(255,255,255,0.08);
}
.tp-header--dark .tp-logo-mark { filter: brightness(0) invert(1); }
.tp-header--dark .tp-logo-name,
.tp-header--dark .tp-nav a,
.tp-header--dark .tp-phone-link,
.tp-header--dark .tp-phone-link svg { color: #fff; }
.tp-header--dark .tp-logo-tagline { color: rgba(255,255,255,0.5); }
.tp-header--dark .tp-nav a:hover,
.tp-header--dark .tp-nav a.is-active,
.tp-header--dark .tp-phone-link:hover,
.tp-header--dark .tp-phone-link:hover svg { color: var(--accent-lt); }
.tp-header--dark .tp-header-btn { background: #fff; color: var(--ink) !important; }
.tp-header--dark .tp-header-btn:hover { background: var(--accent-lt); color: #fff !important; }
.tp-header--dark .tp-menu-btn:hover { background: rgba(255,255,255,0.08); }
.tp-header--dark .tp-menu-btn span,
.tp-header--dark .tp-menu-btn span::before,
.tp-header--dark .tp-menu-btn span::after { background: #fff; }

/* Front page only: header overlays the hero photo instead of sitting
   in a separate white bar above it — transparent until the visitor
   scrolls past the hero, then it solidifies like everywhere else.

   The two states use different background TYPES (a gradient, then a
   flat colour) and `background` cannot be transitioned between those
   — the browser just cuts instantly, which is what read as "not
   smooth". Fixed by giving each state its own layer (::before /
   ::after) and crossfading their opacity instead, which animates
   cleanly in every browser. */
header.wp-block-template-part.tp-header--transparent {
	position: fixed;
	background: transparent;
	border-bottom-color: transparent;
}
header.wp-block-template-part.tp-header--transparent::before,
header.wp-block-template-part.tp-header--transparent::after {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	transition: opacity 0.35s ease;
}
header.wp-block-template-part.tp-header--transparent::before {
	background: linear-gradient(180deg, rgba(6,8,33,0.6) 0%, rgba(6,8,33,0.32) 70%, transparent 100%);
	opacity: 1;
}
header.wp-block-template-part.tp-header--transparent::after {
	background: var(--hero-paper);
	box-shadow: 0 1px 0 var(--hero-line);
	opacity: 0;
}
header.wp-block-template-part.tp-header--transparent.is-scrolled::before { opacity: 0; }
header.wp-block-template-part.tp-header--transparent.is-scrolled::after { opacity: 1; }
.tp-header--transparent .tp-header-inner { position: relative; z-index: 1; }
.tp-header--transparent .tp-logo-mark { filter: brightness(0) invert(1); }
/* Was `filter: none` — which put the dark artwork back the moment the
   transparent header turned solid. That was right when solid meant
   white; it is wrong now that solid means navy. The mark stays
   inverted in every header state, because every header state is dark. */
.tp-header--transparent.is-scrolled .tp-logo-mark { filter: none; }
.tp-header--transparent .tp-logo-tagline,
.tp-header--transparent .tp-nav a,
.tp-header--transparent .tp-phone-link,
.tp-header--transparent .tp-phone-link svg { color: #fff; }
/* Pulled just off pure white so it settles to the same brightness as
   the thin white mark next to it — at full white the word still won
   the comparison even at the lighter weight. */
.tp-header--transparent .tp-logo-name { color: rgba(255,255,255,0.86); }
.tp-header--transparent .tp-nav a:hover,
.tp-header--transparent .tp-nav a.is-active,
.tp-header--transparent .tp-phone-link:hover,
.tp-header--transparent .tp-phone-link:hover svg { color: var(--accent-lt); }
.tp-header--transparent .tp-header-btn {
	background: rgba(255,255,255,0.04); color: #fff !important;
	border: 1px solid rgba(255,255,255,0.28);
}
.tp-header--transparent .tp-header-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.tp-header--transparent.is-scrolled .tp-header-btn { background: var(--accent); border-color: transparent; }
.tp-header--transparent .tp-menu-btn span,
.tp-header--transparent .tp-menu-btn span::before,
.tp-header--transparent .tp-menu-btn span::after { background: #fff; }
.tp-header--transparent.is-scrolled .tp-logo-name,
.tp-header--transparent.is-scrolled .tp-logo-tagline,
.tp-header--transparent.is-scrolled .tp-nav a,
.tp-header--transparent.is-scrolled .tp-phone-link,
.tp-header--transparent.is-scrolled .tp-phone-link svg { color: var(--hero-ink); }
.tp-header--transparent.is-scrolled .tp-phone-link { color: var(--hero-ink-60); }
.tp-header--transparent.is-scrolled .tp-header-btn { background: var(--accent); }
.tp-header--transparent.is-scrolled .tp-menu-btn span,
.tp-header--transparent.is-scrolled .tp-menu-btn span::before,
.tp-header--transparent.is-scrolled .tp-menu-btn span::after { background: var(--hero-ink); }

.tp-header-inner {
	height: var(--nav-h);
	display: flex; align-items: center; justify-content: space-between;
	padding-inline: var(--px);
	max-width: calc(var(--mxw) + 2 * var(--px));
	margin-inline: auto;
	gap: 2rem;
}

.tp-logo {
	display: inline-flex; align-items: center; gap: 0.7rem;
	flex-shrink: 0; position: relative;
}
/* The mark ships as dark navy artwork, which was correct against a
   white header. Every header on the site is dark now, so the default
   state inverts it — the two header variants below no longer need to
   be the only places that do. Without this the monogram sat navy on
   navy on every inner page: present, technically visible, and
   effectively gone. A contrast audit cannot catch this one, because
   it is an image and not text — it took looking at the page. */
.tp-logo-mark {
	width: 40px; height: 40px; flex-shrink: 0;
	object-fit: contain; display: block;
	transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.tp-logo:hover .tp-logo-mark { transform: rotate(-6deg) scale(1.05); }
/* The footer's mark sits inside a white chip, so here the artwork must
   stay dark — inverting it, as every other placement now does, would
   have put a white monogram on a white badge. A direct consequence of
   making the inversion global a moment ago: worth stating plainly,
   because it is the sort of thing that ships looking like an empty
   white square in the footer. */
.tp-logo-chip .tp-logo-mark { filter: none; }
.tp-logo-chip {
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; width: 42px; height: 42px;
	background: #fff; border-radius: var(--r-sm);
	padding: 5px;
}
.tp-logo-chip .tp-logo-mark { width: 30px; height: 30px; }
.tp-logo-text { display: flex; flex-direction: column; line-height: 1; position: relative; }
/* Weighted to match the mark beside it, not to shout over it. The
   mark is thin line art, so at 800 weight and full white the word was
   optically far heavier than the symbol it's meant to lock up with —
   the pair read as two different brightnesses. A lighter weight with
   open tracking gives the word roughly the same visual density as
   those thin strokes. */
.tp-logo-name {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.02rem; font-weight: 600;
	color: var(--hero-ink); letter-spacing: 0.16em;
	transition: color 0.2s;
}
.tp-logo::after {
	content: "";
	position: absolute; left: 0; bottom: -4px;
	width: 0; height: 2px; background: var(--hero-accent);
	transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.tp-logo:hover::after { width: 100%; }
.tp-logo-tagline {
	font-size: 0.62rem; font-weight: 600;
	color: var(--hero-ink-60); letter-spacing: 0.2em;
	text-transform: uppercase; margin-top: 4px;
}

.tp-nav {
	display: flex; align-items: center;
	list-style: none; flex: 1; justify-content: center; gap: 0.25rem;
}
.tp-nav a {
	display: inline-flex; align-items: center;
	padding: 0.5em 1.1em;
	font-size: 0.875rem; font-weight: 500;
	color: var(--hero-ink); transition: color 0.2s;
	position: relative;
}
.tp-nav a:hover,
.tp-nav a.is-active { color: var(--hero-accent); }

.tp-header-right { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }

.tp-lang-switcher {
	display: flex; align-items: center; gap: 2px;
	list-style: none; padding: 2px; margin: 0;
	border: 1px solid var(--line); border-radius: var(--r-sm);
}
.tp-lang-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; padding: 4px 6px;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
	color: var(--hero-ink-60); border-radius: calc(var(--r-sm) - 2px);
	transition: background 0.18s, color 0.18s;
}
.tp-lang-link:hover { color: var(--hero-ink); background: var(--hero-paper-2); }
.tp-lang-link.is-active { color: #fff !important; background: var(--hero-ink); }
.tp-header--transparent .tp-lang-switcher { border-color: rgba(255,255,255,0.35); }
.tp-header--transparent .tp-lang-link { color: rgba(255,255,255,0.75); }
.tp-header--transparent .tp-lang-link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.tp-header--transparent.is-scrolled .tp-lang-switcher { border-color: var(--line); }
.tp-header--transparent.is-scrolled .tp-lang-link { color: var(--hero-ink-60); }
.tp-header--transparent.is-scrolled .tp-lang-link:hover { color: var(--hero-ink); background: var(--hero-paper-2); }

.tp-lang-switcher--mobile { margin-top: 1.5rem; align-self: flex-start; }

@media (max-width: 1080px) { .tp-lang-switcher:not(.tp-lang-switcher--mobile) { display: none; } }

.tp-phone-link {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-size: 0.85rem; font-weight: 600; color: var(--hero-ink-60);
	transition: color 0.2s;
}
.tp-phone-link svg { width: 14px; height: 14px; color: var(--hero-ink-60); }
.tp-phone-link:hover { color: var(--hero-accent); }
.tp-phone-link:hover svg { color: var(--hero-accent); }

/* Background is the accent, not --hero-ink. --hero-ink is the header's
   TEXT colour and is now white, so using it as this button's fill made
   a white button with white lettering — a control that still worked and
   could not be seen. The accent is what a primary action should have
   been on a dark bar anyway. */
.tp-header-btn {
	background: var(--accent); color: #fff !important;
	padding: 12px 24px;
	border-radius: var(--r-sm);
	font-size: 0.82rem; font-weight: 600;
	transition: background 0.2s;
	white-space: nowrap;
}
.tp-header-btn:hover { background: var(--accent-lt); color: var(--ink) !important; }

.tp-menu-btn {
	display: none;
	background: none; border: none; cursor: pointer;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border-radius: var(--r-sm); padding: 0;
	transition: background 0.2s;
}
.tp-menu-btn:hover { background: var(--hero-paper-2); }
.tp-menu-btn span,
.tp-menu-btn span::before,
.tp-menu-btn span::after {
	display: block; width: 22px; height: 2px;
	background: var(--hero-ink); border-radius: 2px;
	transition: transform 0.26s ease, opacity 0.2s; position: relative;
}
.tp-menu-btn span::before { content: ""; position: absolute; top: -7px; }
.tp-menu-btn span::after  { content: ""; position: absolute; top:  7px; }
.tp-menu-btn[aria-expanded="true"] span         { background: transparent; }
.tp-menu-btn[aria-expanded="true"] span::before { transform: rotate(45deg) translate(5px,5px); }
.tp-menu-btn[aria-expanded="true"] span::after  { transform: rotate(-45deg) translate(5px,-5px); }

.tp-mobile-nav {
	display: none; position: fixed; inset: 0;
	z-index: 800;
	background: rgba(11,14,61,0.45);
	opacity: 0; transition: opacity 0.28s ease;
}
.tp-mobile-nav.is-open { opacity: 1; }
.tp-mobile-nav.is-open .tp-mobile-panel { transform: translateX(0); }
.tp-mobile-nav[hidden] { display: none !important; }

.tp-mobile-panel {
	position: absolute; inset-block: 0; right: 0;
	width: min(360px, 92vw);
	background: var(--paper-2); box-shadow: var(--sh-3);
	padding: calc(var(--nav-h) + 1.5rem) 2rem 2.5rem;
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(0.16,1,0.3,1);
	overflow-y: auto; display: flex; flex-direction: column;
}
.tp-mobile-logo {
	display: flex; align-items: center; gap: 0.75rem;
	padding-bottom: 1.5rem; margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}
.tp-mobile-logo .tp-logo-name { font-size: 1.05rem; }
.tp-mobile-links { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.tp-mobile-links a {
	display: block; padding: 0.9rem 0;
	font-size: 1.08rem; font-weight: 600; color: var(--tx);
	border-bottom: 1px solid var(--line);
	transition: color 0.18s, padding-left 0.22s;
}
.tp-mobile-links a:hover { color: var(--accent-lt); padding-left: 0.5rem; }
.tp-mobile-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tp-mobile-cta .tp-btn { justify-content: center; }

@media (max-width: 1080px) { .tp-phone-link { display: none; } }
@media (max-width: 820px) {
	.tp-nav { display: none; }
	.tp-menu-btn { display: flex; }
	.tp-mobile-nav { display: block; }
}
@media (max-width: 520px) { .tp-header-btn { display: none; } }

/* =====================================================================
   SKIP LINK
   ===================================================================== */
.tp-skip {
	position: fixed; top: -100px; left: 1rem;
	background: var(--ink); color: #fff;
	padding: 0.6rem 1.2rem;
	border-radius: var(--r-sm); font-weight: 700;
	z-index: 9999; transition: top 0.2s;
	font-size: 0.875rem;
}
.tp-skip:focus { top: 1rem; }

/* =====================================================================
   SCROLL PROGRESS BAR
   ===================================================================== */
.tp-progress {
	position: fixed; top: 0; left: 0; right: 0;
	height: 2px; z-index: 1000;
	transform-origin: left;
	background: var(--accent);
	transform: scaleX(0);
	will-change: transform;
}

/* =====================================================================
   HERO — split layout: solid ink panel for the headline (guaranteed
   contrast, no text-over-photo compromise) + a contained photo panel
   with a continuous slow Ken Burns zoom, instead of the photo running
   full-bleed behind the text. Stats live in their own full-width band
   right after ([tp_numbers]), not stacked on top of the photo.
   ===================================================================== */
.tp-hero {
	position: relative;
	min-height: calc(96svh - var(--nav-h));
	background: var(--ink);
	overflow: hidden;
	display: flex; flex-direction: column;
}

.tp-hero-photo {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 68% 45%;
}

.tp-hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11,14,61,0.55) 0%, rgba(11,14,61,0.62) 45%, rgba(11,14,61,0.8) 100%);
}

/* 2B Group mark — blended into the photo's own tones and texture
   (mix-blend-mode) rather than sitting on top as a flat opaque
   cut-out, placed in the clean roof area top-right so it never
   fights the headline or the busiest part of the photo. */
.tp-hero-group-mark {
	position: absolute; z-index: 3;
	bottom: clamp(60px, 10vh, 110px); left: clamp(70px, 12vw, 220px);
	width: clamp(110px, 13vw, 240px); height: auto;
	filter: brightness(0) invert(1);
	mix-blend-mode: overlay;
	opacity: 0.85;
	pointer-events: none;
}
/* Below ~700px the hero stack (eyebrow/headline/sub/CTAs) already
   fills the available height, so this decorative mark has nowhere
   left to sit without landing on top of the CTA row — hide it rather
   than let it collide. */
@media (max-width: 700px) {
	.tp-hero-group-mark { display: none; }
}

.tp-hero-center {
	position: relative; z-index: 5;
	flex: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	max-width: 900px;
	margin-inline: auto;
	/* Reserve room at the bottom for the 2B Group mark so it never
	   sits on top of the CTA row, at any viewport height. */
	padding: clamp(2.75rem, 6vh, 4.5rem) clamp(24px, 6vw, 60px) clamp(4.5rem, 14vh, 7.5rem);
}

@keyframes tp-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.tp-signal-eyebrow, .tp-h1-line, .tp-signal-sub, .tp-signal-actions {
	animation: tp-rise 0.5s ease-out both;
}
.tp-signal-eyebrow       { animation-delay: 0ms; }
.tp-h1-line:nth-child(1) { animation-delay: 60ms; }
.tp-h1-line:nth-child(2) { animation-delay: 110ms; }
.tp-h1-line:nth-child(3) { animation-delay: 160ms; }
.tp-signal-sub           { animation-delay: 220ms; }
.tp-signal-actions       { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
	.tp-signal-eyebrow, .tp-h1-line, .tp-signal-sub, .tp-signal-actions { animation: none; }
}

.tp-signal-eyebrow {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--txw-2);
	margin-bottom: clamp(0.9rem, 3vh, 1.5rem);
}

.tp-signal-h1 {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(2.1rem, 4.4vw, 3.9rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.tp-h1-line { display: block; }

.tp-signal-sub {
	margin-top: clamp(0.9rem, 2.5vh, 1.4rem);
	font-size: clamp(0.98rem, 1.1vw, 1.125rem);
	color: var(--txw-2); line-height: 1.65;
	max-width: 42ch;
	margin-inline: auto;
}

.tp-signal-actions {
	display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
	margin-top: clamp(1.4rem, 3vh, 2rem);
}

.tp-btn--hero-primary {
	display: inline-flex; align-items: center; gap: 0.6rem;
	height: 52px; padding-inline: 28px; border-radius: var(--r-sm);
	background: var(--accent); color: #fff !important;
	font-weight: 700; font-size: 0.95rem;
	box-shadow: var(--sh-accent);
	transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.tp-btn--hero-primary svg { width: 16px; height: 16px; transition: transform 0.2s; }
.tp-btn--hero-primary:hover { background: var(--accent-dk); box-shadow: var(--sh-3); transform: translateY(-2px); }
.tp-btn--hero-primary:hover svg { transform: translateX(4px); }

.tp-btn--hero-ghost {
	display: inline-flex; align-items: center;
	height: 52px; padding-inline: 26px; border-radius: var(--r-sm);
	color: #fff !important;
	font-weight: 600; font-size: 0.95rem; background: transparent;
	border: 1px solid rgba(255,255,255,0.4);
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tp-btn--hero-ghost:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }

@media (max-width: 700px) {
	.tp-hero { min-height: 0; }
}
@media (max-width: 640px) {
	.tp-signal-actions { flex-direction: column; align-items: stretch; gap: 1rem; }
	.tp-btn--hero-primary, .tp-btn--hero-ghost { justify-content: center; }
	.tp-signal-h1 { font-size: 2.1rem; }
}

/* =====================================================================
   HERO — BRAND VARIANT (2bgroup.local): a plain light stage instead of
   the photo hero above, letting the mark itself carry the moment.
   ===================================================================== */
/* The hero is a plain section again — no pinning, no fixed
   positioning, no scroll-driven JS. It simply scrolls up and out of
   view like every other section on the page, and the "Įmonės" strip
   follows normally underneath it. */
.tp-hero--brand {
	background: #030308;
	min-height: 100svh;
}

.tp-hero-center--brand {
	position: relative; z-index: 2;
	max-width: none;
	padding-block: clamp(2rem, 6vh, 3rem);
	perspective: 1200px;
	/* Two things in one transform, deliberately.

	   translateX(-6%): nudged left of true centre so the composition
	   balances against the light beam blooming in from the right.

	   translateY on --exit: the hero doesn't just sit still and get
	   covered any more — it lifts away as you scroll, tied to the same
	   0→1 progress the pin handler writes on the hero, so it leaves
	   under its own steam while the pillars arrive from below. It's set
	   here rather than on .tp-hero-logo because that element's own
	   transform is already taken by its drop-in and pulse animations,
	   and rather than on .tp-hero-logo-tilt because that one is driven
	   by the mouse. This wrapper is the one free layer. */
	transform:
		translateY(calc(var(--exit, 0) * -26vh))
		scale(calc(1 - var(--exit, 0) * 0.08));
	opacity: calc(1 - var(--exit, 0) * 1.15);
}
/* The line and the call to action, stacked under the mark as one
   centred block. They used to sit jammed into the bottom-right corner
   as a separate cluster, which left the hero reading as a logo
   floating in space with some leftovers beside it. Same words, put
   into the composition instead of beside it. */
/* Set as a descriptor under the mark rather than a sentence: it's a
   short phrase now, so it gets small caps-ish treatment — wider
   tracking, uppercase, no full stop — which reads as part of the
   lockup instead of a stray line of body copy floating under a logo. */
.tp-hero-line {
	margin-top: clamp(1.4rem, 3.5vh, 2.25rem);
	font-size: clamp(0.72rem, 0.9vw, 0.88rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255,255,255,0.6);
	text-align: center;
	opacity: 0;
	animation: tp-rise 0.7s ease-out 1.25s both;
}
/* Fades in rather than rising like the line above it, on purpose: the
   button's `transform` has to stay free for its own hover lift, and a
   `tp-rise` with fill:both would hold transform:none afterwards and
   quietly kill that hover. */
.tp-hero-cta {
	margin-top: clamp(1.4rem, 3vh, 2rem);
	opacity: 0;
	animation: tp-fade-in 0.7s ease-out 1.45s both;
}
@keyframes tp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.tp-hero-line, .tp-hero-cta { animation: none; opacity: 1; }
}

/* NOIR SPOTLIGHT — a single dramatic beam of light blooming in from the
   right edge, screen-blended onto black so it reads as actual light
   rather than a flat coloured shape (the same trick behind grok.com's
   hero and most "dark premium" product pages). Blurred + blended: it
   cannot render "wrong" the way a hard-edged shape can. */
/* `mix-blend-mode` permanently removed — this is the actual root
   cause of the 5fps scroll, not just a minor cost. While hero is
   pinned (position:fixed), the "Įmonės" stage rises and progressively
   covers it — that means the content BEHIND this blended layer is
   changing every single scrolled frame, so the browser cannot cache
   the blend and must recomposite it from scratch each frame. That's
   the expensive case mix-blend-mode is worst at, and it was directly
   inside the one moment (active scrolling through the pin/cover
   effect) where the user would feel every dropped frame. Softness
   now comes from extra gradient stops instead of `filter: blur()`,
   which is also non-trivial to keep compositing on an animated,
   full-section layer. */
.tp-noir-glow {
	position: absolute; z-index: 0; inset: 0;
	background:
		radial-gradient(circle at 108% 42%,
			rgba(255,255,255,0.6) 0%, rgba(217,228,255,0.46) 8%,
			rgba(180,200,255,0.35) 16%, rgba(150,180,255,0.26) 25%,
			rgba(110,145,235,0.17) 35%, rgba(80,120,230,0.1) 46%,
			rgba(40,60,150,0.05) 58%, transparent 70%);
	opacity: 0;
	will-change: opacity, transform;
	animation: tp-noir-glow-in 1.8s ease-out 0.1s both, tp-noir-glow-breathe 10s ease-in-out 1.8s infinite;
}
/* Second, dimmer light pooling in the opposite corner — balances the
   canvas across its full width instead of light living in one spot. */
.tp-noir-glow--2 {
	background:
		radial-gradient(circle at -6% 88%,
			rgba(185,200,255,0.42) 0%, rgba(140,165,240,0.3) 10%,
			rgba(100,130,220,0.19) 22%, rgba(60,80,170,0.09) 36%,
			transparent 54%);
	animation: tp-noir-glow-in 1.8s ease-out 0.4s both, tp-noir-glow-breathe 12s ease-in-out 2.2s infinite;
}
@keyframes tp-noir-glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-noir-glow-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	.tp-noir-glow { animation: none; opacity: 1; }
}

/* Above 1080p these two stop earning their keep.

   Each one is a full-viewport radial gradient with `will-change`
   holding it on its own GPU layer, and the breathe animation keeps
   that layer live for as long as the page is open. A layer costs
   width x height x 4 bytes: about 8MB apiece at 1080p, but roughly
   33MB apiece at 4K — some 66MB of texture held permanently, and
   composited on every frame. And they are worst placed exactly when
   it matters, because the hero stays pinned while the companies
   rise, so this runs underneath the heaviest moment on the page.

   The fade-in is kept; only the endless 4% breathe is dropped, along
   with the `will-change` that was reserving memory for it. On a
   screen that large a 4% drift across a soft gradient was not
   visible anyway — it was being paid for and not seen. */
@media (min-width: 1921px) {
	.tp-noir-glow {
		will-change: auto;
		animation: tp-noir-glow-in 1.8s ease-out 0.1s both;
	}
	.tp-noir-glow--2 { animation: tp-noir-glow-in 1.8s ease-out 0.4s both; }
}

/* Mouse-driven parallax wrapper — kept as a separate element from the
   drop/float keyframe animation below it, so the two transforms
   compose through the DOM instead of one CSS animation overwriting
   the other's `transform` value every frame. */
.tp-hero-logo-tilt {
	position: relative;
	transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg));
	transition: transform 0.35s cubic-bezier(.22,1,.36,1);
	transform-style: preserve-3d;
}

/* The headline moment: the mark filled with a smooth light-sweep
   gradient — dark on the left, blown out white on the right — so it
   reads as physically lit by the beam beside it (masked to the logo's
   own alpha channel, the same technique browsers use for gradient
   text, just applied to a raster mark instead of a font glyph). */
.tp-hero-logo {
	position: relative; z-index: 2;
	/* The min(86vw, …) wrapper fixes a phone bug without touching how
	   this looks anywhere else. The clamp floors the mark at 420px, so
	   on a 390px screen it was 420px wide — 54px of it cut off by the
	   page's overflow guard, silently, with no scrollbar to reveal it.
	   Capping at 86vw only ever engages below ~500px; at 1920px the
	   clamp still returns 900px and nothing changes. */
	width: min(86vw, clamp(420px, 58vw, 900px));
	aspect-ratio: 1350 / 680;
	opacity: 0;
	-webkit-mask-image: var(--mark-url);
	mask-image: var(--mark-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* Layer 1: a soft bright band that periodically travels across the
	   mark (the "shine"). Layer 2: the exact same dark-to-white sweep
	   as before — untouched, so the resting colour never changes. */
	background-image:
		linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.85) 50%, transparent 62%),
		linear-gradient(100deg, #4a4c56 0%, #9498a8 32%, #e4e8f5 62%, #ffffff 88%);
	background-size: 70% 100%, 100% 100%;
	background-repeat: no-repeat, no-repeat;
	background-position: -70% 0, 0 0;
	will-change: opacity, transform;
	/* `filter: drop-shadow()` removed — filters on a masked element
	   inside a `position:fixed` ancestor add real cost to keep
	   compositing during active scroll, on top of everything else
	   already animating here. Not worth it once actual frame rate is
	   the problem. */
	/* The sheen sweep animates `background-position`, which — unlike
	   transform/opacity — forces a repaint every frame it's running,
	   made pricier here by sitting on a masked, filtered element.
	   Capped to a handful of plays (not `infinite`) so that ongoing
	   per-frame cost stops once the animation is done, instead of
	   paying it for as long as the page stays open. */
	animation:
		tp-logo-drop 1.15s cubic-bezier(.22,1,.36,1) both,
		tp-logo-pulse 4s ease-in-out 1.15s infinite,
		tp-logo-sheen 6.5s ease-in-out 1.5s 2;
}
@keyframes tp-logo-sheen {
	0%, 62%  { background-position: -70% 0, 0 0; }
	85%      { background-position: 170% 0, 0 0; }
	100%     { background-position: 170% 0, 0 0; }
}
@keyframes tp-logo-drop {
	0%   { opacity: 0; transform: translateY(-46vh) scale(0.7); }
	55%  { opacity: 1; transform: translateY(10px)  scale(1.05); }
	75%  { transform: translateY(-8px) scale(0.99); }
	90%  { transform: translateY(2px)  scale(1.01); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Idle life without any vertical bob: a slow breathing scale, paired
   with the glow intensifying in step — reads as the mark pulsing with
   the light beside it rather than drifting up and down. */
/* Scale only — no longer animating `filter` here. Animating
   drop-shadow forces a repaint on every frame (filters aren't a
   compositor-only property the way transform/opacity are), and this
   ran on an `infinite` loop forever on a large, already-masked
   element; a confirmed, ongoing cost. The drop-shadow stays, just
   static, declared once on .tp-hero-logo. */
@keyframes tp-logo-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.022); }
}

@media (prefers-reduced-motion: reduce) {
	.tp-hero-logo { animation: none; opacity: 1; }
}

/* Bottom scroll cue, bottom-left, matching the reference's minimal arrow. */
/* Scroll cue: centred at the bottom of the hero rather than tucked in
   a corner, so it actually reads as an invitation to scroll the
   moment the page opens. Three jobs are split across three elements
   on purpose — the outer one is driven by scroll position, the inner
   one by a looping animation, and they'd overwrite each other's
   `transform` if they shared an element.

   The outer element rides --exit (written on the hero by the pin
   handler in wp_footer): as soon as you start scrolling it lifts and
   fades, handing the screen over to the pillars rising underneath.
   It's multiplied so the cue is gone well before the scroll ends,
   rather than lingering half-visible. */
.tp-noir-scroll {
	position: absolute; z-index: 3;
	left: 50%; bottom: clamp(24px, 4vh, 40px);
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
	color: rgba(255,255,255,0.55);
	transform: translate(-50%, calc(var(--exit, 0) * -60px));
	opacity: calc(1 - var(--exit, 0) * 3);
}
/* Thin guide line above the arrow with a lit segment sliding down it —
   a quieter way to suggest direction than making the arrow itself
   bigger. */
.tp-noir-scroll-line {
	position: relative; overflow: hidden;
	width: 1px; height: clamp(28px, 5vh, 46px);
	background: rgba(255,255,255,0.18);
}
.tp-noir-scroll-line::after {
	content: "";
	position: absolute; left: 0; top: 0;
	width: 100%; height: 45%;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.85));
	animation: tp-scroll-trace 2.1s cubic-bezier(.45,0,.55,1) 1.8s infinite;
}
@keyframes tp-scroll-trace {
	0%       { transform: translateY(-100%); opacity: 0; }
	25%      { opacity: 1; }
	75%, 100% { transform: translateY(240%); opacity: 0; }
}
.tp-noir-scroll-arrow {
	display: flex;
	opacity: 0;
	animation: tp-rise 0.6s ease-out 1.6s both, tp-noir-bob 2.2s ease-in-out 2.2s infinite;
}
.tp-noir-scroll-arrow svg { width: 20px; height: 20px; transform: rotate(90deg); }
@keyframes tp-noir-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* The bottom-right caption + button cluster that used to live here is
   gone — its text and its button now sit in the centred hero stack
   (.tp-hero-line / .tp-hero-cta) instead of off in a corner. */
.tp-btn--noir {
	display: inline-flex; align-items: center; flex-shrink: 0;
	height: 38px; padding-inline: 20px; border-radius: 999px;
	color: #fff; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
	border: 1px solid rgba(255,255,255,0.28);
	background: rgba(20,24,50,0.55);
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.tp-btn--noir:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	/* The cue stays and stays visible, just without the loops. Its
	   scroll-linked lift is left alone — that follows the scroll
	   position rather than playing on its own. */
	.tp-noir-scroll-arrow { animation: none; opacity: 1; }
	.tp-noir-scroll-line::after { animation: none; opacity: 0; }
}
@media (max-width: 780px) {
	.tp-noir-scroll { display: none; }
}

/* =====================================================================
   NETWORK — hub-and-spoke card grid. The hub is a solid flat accent
   block (clear visual hierarchy), not a glow or animated effect.
   ===================================================================== */
.tp-network { padding-block: var(--sec); background: var(--ink); position: relative; overflow: hidden; }
.tp-network-head .tp-eyebrow { color: var(--txw-2); }
.tp-network-head .tp-eyebrow .tp-lines { color: var(--accent-lt); }
.tp-network-head .tp-heading { color: #fff; }
.tp-network-head .tp-subheading { color: var(--txw-2); }
.tp-network-head { max-width: 560px; margin-bottom: 3rem; }
.tp-network-head .tp-heading { margin-bottom: 0.9rem; }

/* Horizontal route line — a real transit-map metaphor instead of a
   bordered data-table grid. Dots sit exactly on the connecting line;
   the hub stop is larger and solid-accent, everything else is plain
   ink so the eye reads it as one continuous route. */
.tp-route {
	position: relative;
	display: flex; justify-content: space-between; gap: 0.5rem;
	margin-top: 2.75rem;
}
.tp-route-line {
	position: absolute; top: 7px; left: 7px; right: 7px;
	height: 2px; background: var(--line-w2); z-index: 0;
}
.tp-route-stop {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	flex: 1; min-width: 0; padding: 0 0.5rem;
}
.tp-route-dot {
	display: block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
	background: var(--ink); border: 2px solid var(--txw-3);
	margin-bottom: 1.5rem;
}
.tp-route-stop--hub .tp-route-dot { background: var(--accent-lt); border-color: var(--accent-lt); }
.tp-route-index {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
	color: var(--accent-lt); margin-bottom: 0.6rem;
}
.tp-route-stop--hub .tp-route-index { font-weight: 700; }
.tp-route-city {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.4rem; font-weight: 700; color: #fff;
	letter-spacing: -0.02em; line-height: 1.15;
}
.tp-route-stop--hub .tp-route-city { color: var(--accent-lt); font-size: 1.75rem; }
.tp-route-sub {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem; color: var(--txw-3);
	font-weight: 500; letter-spacing: 0.03em; margin-top: 0.5rem;
}

@media (max-width: 760px) {
	.tp-route { flex-direction: column; align-items: stretch; gap: 2rem; margin-top: 1rem; }
	.tp-route-line { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
	.tp-route-stop { flex-direction: row; align-items: center; text-align: left; gap: 1.1rem; padding: 0; }
	.tp-route-dot { margin-bottom: 0; }
}

.tp-net-countries {
	display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
	margin-top: 2.5rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--txw-3);
}
.tp-net-country-list { display: flex; align-items: center; gap: 0.6rem; }
.tp-net-country-list strong { color: var(--txw-2); font-weight: 600; letter-spacing: 0.04em; }
.tp-net-country-sep { color: var(--txw-3); }

/* =====================================================================
   NUMBERS STRIP
   ===================================================================== */
.tp-numbers {
	background: var(--ink); padding-block: clamp(3.25rem, 6vw, 4.5rem);
	position: relative; overflow: hidden;
}

.tp-numbers-grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: repeat(4,1fr);
	gap: 1px;
	background: var(--line-w2);
	border-radius: var(--r);
	overflow: hidden;
	border-top: 2px solid var(--accent);
}

.tp-num-cell {
	padding: 2.4rem 1.75rem;
	background: var(--ink);
	position: relative; z-index: 1;
	transition: background 0.22s;
}
.tp-num-cell:hover { background: rgba(255,255,255,0.045); }

.tp-num-index {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
	color: var(--accent-lt); margin-bottom: 1.1rem;
}

.tp-num-val {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(2.6rem, 5vw, 3.75rem);
	font-weight: 700; color: #fff;
	letter-spacing: -0.03em; line-height: 1;
	margin-bottom: 0.6rem;
	font-variant-numeric: tabular-nums;
}
.tp-num-val span { color: var(--accent-lt); }

.tp-num-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem; color: var(--txw-3);
	font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 900px) { .tp-numbers-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .tp-numbers-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   SERVICES — large alternating photo/text rows (real terminal & fleet
   photography), not an icon-card grid, plus one full-width solid-
   accent coverage band closing the section.
   ===================================================================== */
/* Dark, where this used to be white paper.

   The front page ran dark hero → dark companies → WHITE services →
   blue band → dark CTA → dark footer. Seen rather than reasoned about,
   that white slab in the middle reads as a section pasted in from a
   different site: the eye crosses a hard edge twice in quick
   succession and the page stops feeling like one object. I argued for
   it earlier as "a light break between two dark sections" — having now
   looked at it, the break is the problem, not the relief.

   #0B0E3D rather than the companies' near-black, so the sections are
   still distinct — a step up in tone, not a wall — and it ties this
   band to the footer that closes the page in the same colour. */
.tp-services {
	padding-block: var(--sec);
	/* A half-step off the companies' paper, so the two light sections
	   read as separate without a rule or a gap between them. */
	background: var(--paper-2);
}
/* The head, on dark. Same override pattern the fleet band already
   uses, so there is one convention for dark sections rather than two. */
/* Sits on top wherever it's covering something during the pin/cover
   effect below — a soft shadow so the covering edge reads as
   deliberate rather than an abrupt cut. Present at all times, not
   just during the effect, so it's harmless once past it too. */
/* The shadow was a light-page shadow — navy at 14% over white. Against
   the near-black companies band it did nothing. A deeper, darker one
   reads as this section genuinely sitting above the one it covers. */
#paslaugos.tp-services { position: relative; box-shadow: 0 -24px 56px rgba(11,14,61,0.10); }
@media (min-width: 901px) { #paslaugos.tp-services { z-index: 2; } }

/* =====================================================================
   PIN & COVER — reusable pattern, applied twice on the front page:
   hero stays fixed while "Įmonės" rises to cover it, then "Įmonės"
   itself stays fixed while Paslaugos rises to cover IT. Each covering
   section is opaque and stacked higher (z-index), so it visibly rises
   up and over whatever it's covering rather than the reverse.

   `position: sticky` doesn't work here: html/body carry `overflow-x:
   hidden` (needed to stop horizontal scroll elsewhere on the site),
   which silently breaks sticky positioning in every major engine — an
   already-confirmed constraint on this project. `position: fixed`,
   toggled from the scroll listener in wp_footer (see setupPinCover),
   sidesteps it.

   The pinned element does NOT need a computed "resting position" once
   released — it simply reverts to its normal, original in-flow spot,
   which is always safely earlier in the document than whatever comes
   next, so there's nothing to park or hide. */
.tp-pin-stage { position: relative; /* height is set inline by the pin handler, for pinned stages only */ }
/* !important: [data-pin-fade] is #imones or #main-content, both ID
   selectors — any plain rule that also sets `position` on one of
   those IDs (e.g. #imones needing position:relative for its own
   background layers) would otherwise outrank this class-based rule on
   specificity alone and silently break the pin. */
.tp-pin-stage [data-pin-fade].is-pinned {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	z-index: 1;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.tp-pin-stage { height: auto; }
}
/* Once a pinned section has fully scrolled past, its infinite CSS
   animations (glow breathing, the logo sheen sweep) would otherwise
   keep running forever off-screen — every frame still costs paint and
   composite work even though nothing is visible. Pausing them here
   removes that ongoing, invisible cost. */
.tp-pin-stage [data-pin-fade].is-past .tp-noir-glow,
.tp-pin-stage [data-pin-fade].is-past .tp-hero-logo {
	animation-play-state: paused;
}
/* And while the handover is actually running — the busiest moment on
   the page — the expensive one is stopped outright.

   `animation-play-state` takes a list matched to the animation list,
   which is what makes this worth doing precisely rather than bluntly.
   On the logo that is: drop (running), pulse (running), sheen
   (paused). Drop and pulse are transform-only and effectively free on
   the compositor; the sheen animates `background-position` through a
   mask, so every frame of it is a repaint. Only that third one stops.

   The same idea on the glows: the fade-in is left alone, the endless
   breathe is held. Both resume as soon as the page is at rest, so
   nothing is lost — the flourishes just stop competing with the one
   animation the eye is actually following. */
.tp-pin-stage [data-pin-fade].is-moving .tp-hero-logo {
	animation-play-state: running, running, paused;
}
.tp-pin-stage [data-pin-fade].is-moving .tp-noir-glow {
	animation-play-state: running, paused;
}

.tp-services-head {
	display: flex; align-items: flex-end;
	justify-content: space-between; gap: 2rem;
	margin-bottom: 3.5rem; flex-wrap: wrap;
}
@media (max-width: 600px) {
	.tp-services-head { flex-direction: column; align-items: flex-start; }
	.tp-services-head .tp-btn { width: 100%; justify-content: center; }
}

/* Four service cards, replacing the two wide category rows that used to
   sit here. Those held ten bullet points split across two boxes, which
   meant a visitor had to read the lists to find out whether the thing
   they came for was offered. Four headings answer that at a glance. */
/* Asymmetric, not a 2x2 of equal boxes.

   Four identical cards in an even grid is the single most recognisable
   template layout there is, and it also says something untrue: that all
   four services carry the same weight. Freight is the group's core
   business and the other three support it, so the composition now says
   so — one lead card holding the left column at full height, three
   compact rows stacked beside it.

   The markup is identical for all four; only CSS decides which is
   which. That keeps the PHP honest (it renders four services, not "one
   special one and three others") and means reordering the array is all
   it takes to promote a different service. */
.tp-svc-grid {
	display: grid;
	grid-template-columns: 1.06fr 1fr;
	grid-template-rows: auto auto auto;
	gap: clamp(0.9rem, 1.5vw, 1.4rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	align-items: stretch;
}
.tp-svc-grid > .tp-svc-card:first-child { grid-row: 1 / span 3; }

/* The three that sit beside the lead: thumbnail against the type
   rather than photo stacked over it, so they read as an index next to
   a feature rather than as three smaller versions of it. */
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-inner {
	flex-direction: row;
	align-items: stretch;
}
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-media {
	aspect-ratio: auto;
	width: clamp(116px, 12.5vw, 200px);
	flex-shrink: 0;
}
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-body {
	justify-content: center;
	padding: clamp(1.1rem, 1.6vw, 1.6rem) clamp(1.2rem, 1.8vw, 1.8rem);
}
/* No overlap in a row layout — the badge sits in the type column with
   the rest of the text instead of hanging off the picture's edge. */
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-badge { margin-top: 0; }
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-title {
	margin-top: 0.85rem;
	font-size: clamp(1.02rem, 1.15vw, 1.28rem);
}
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-text {
	margin-top: 0.45rem;
	font-size: 0.86rem;
}
.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-tags { padding-top: 0.9rem; }

/* The lead: taller picture and display-scale type, so the hierarchy is
   carried by the composition rather than by a "featured" label. */
.tp-svc-grid > .tp-svc-card:first-child .tp-svc-card-media { aspect-ratio: 4 / 3; }
/* The lead is the only frame with a large bright sky in it, and at this
   size that sky was the brightest thing in the section by some margin —
   the one photograph pulling away from the restraint the other three
   keep. Weighting the top of its veil settles the sky without flattening
   the picture: it stays the dominant image, which is the point of the
   lead position, it just stops being a different exposure. */
.tp-svc-grid > .tp-svc-card:first-child .tp-svc-card-media::after {
	background: linear-gradient(180deg, rgba(11,14,61,0) 66%, rgba(11,14,61,0.26) 100%);
}
.tp-svc-grid > .tp-svc-card:first-child .tp-svc-card-title {
	font-size: clamp(1.45rem, 2.1vw, 2.15rem);
	letter-spacing: -0.028em;
}
.tp-svc-grid > .tp-svc-card:first-child .tp-svc-card-text {
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	max-width: 46ch;
}

/* One column below this width: the asymmetry needs two columns to
   exist, and a lead card stretched across a phone is just a tall card. */
@media (max-width: 900px) {
	.tp-svc-grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.tp-svc-grid > .tp-svc-card:first-child { grid-row: auto; }
	.tp-svc-grid > .tp-svc-card:first-child .tp-svc-card-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
	/* Thumbnails get too narrow to show anything at this width. */
	.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-inner { flex-direction: column; }
	.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-media {
		width: auto; aspect-ratio: 16 / 9;
	}
	.tp-svc-grid > .tp-svc-card:not(:first-child) .tp-svc-card-badge { margin-top: -1.5rem; }
}

/* The outer element does nothing visible. It exists to hold the
   scroll-in animation and the perspective the tilt below needs, so the
   card itself keeps its own transform free. */
.tp-svc-card { perspective: 1200px; --shot: var(--img); }
/* Density only, unlike the pillars.

   These cards stop growing once the container hits its maximum, so a
   card is never much wider than ~864px — which the 900px file already
   covers on any ordinary display, 4K at 100% scaling included. What
   does outrun it is pixel density: the same card on a 1.5x or 2x
   screen asks for 1300-1700 device pixels across. So there is no
   width-only arm here; sending the heavier set to a wide but ordinary
   monitor would be paying for nothing. */
@media (min-width: 1400px) and (min-resolution: 1.5dppx) {
	.tp-svc-card { --shot: var(--img-lg, var(--img)); }
}
/* The four don't arrive together. `.tp-anim` gives them the theme's
   standard fade-up; this only spaces them out, using the index set in
   PHP. `both` fill means each holds at opacity 0 through its own delay
   rather than flashing in first. */
.tp-js .tp-svc-card.tp-anim.in-view { animation-delay: calc(var(--i, 0) * 110ms); }

.tp-svc-card-inner {
	height: 100%;
	display: flex; flex-direction: column;
	/* A lifted surface rather than a white box with a border. On dark,
	   depth comes from the surface being fractionally lighter than what
	   is behind it plus a hairline catching the light along its edge —
	   the same way the pillars above are built. */
	background: #fff;
	border: 1px solid var(--line-w);
	border-radius: var(--r);
	overflow: hidden;
	/* Follows the pointer. The three custom properties are written by
	   the tilt handler in wp_footer — the same one the location cards
	   use — and are composed into one transform here because a second
	   transform declaration would replace this one rather than add to
	   it. All three fall back to zero, so with no JS, on touch, or
	   under reduced motion the card simply sits still. */
	transform:
		translateY(var(--tilt-lift, 0px))
		rotateX(var(--tilt-x, 0deg))
		rotateY(var(--tilt-y, 0deg));
	transition:
		transform 0.4s cubic-bezier(.16,1,.3,1),
		box-shadow 0.4s ease,
		border-color 0.3s ease;
}
/* Tinted, not black. A pure-black shadow on a navy ground reads as a
   dirty smudge; carrying the background's own hue keeps it looking
   like light falling rather than grime. */
.tp-svc-card:hover .tp-svc-card-inner {
	background: #fff;
	border-color: var(--paper-3);
	box-shadow: 0 22px 48px rgba(11,14,61,0.10);
}

.tp-svc-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	/* Dark placeholder — a pale grey one flashed as a light rectangle
	   before the photograph decoded. */
	background: var(--paper-3);
}
.tp-svc-card-shot {
	position: absolute; inset: 0;
	background-image: var(--shot, var(--img));
	background-size: cover; background-position: center;
	/* Starts a hair over 1 so the edges stay covered while it moves. */
	transform: scale(1.01);
	transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}
.tp-svc-card:hover .tp-svc-card-shot { transform: scale(1.07); }
/* A wash at the foot of the picture, so the badge that overlaps it has
   something consistent to sit against whatever the photo does there. */
/* A veil in the section's own navy, not just a foot gradient.

   Against white paper these photographs sat down by themselves. Against
   a navy ground they punched out of the page — a bright sky in a card
   on a dark band reads as a hole cut in the surface. Tinting them back
   toward the background seats them in it, and thinning the veil on
   hover means the picture opening up is the reward for pointing at it. */
.tp-svc-card-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,14,61,0) 62%, rgba(11,14,61,0.30) 100%);
	transition: opacity 0.55s cubic-bezier(.33, 0.9, 0.25, 1);
}
.tp-svc-card:hover .tp-svc-card-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,14,61,0) 62%, rgba(11,14,61,0.30) 100%);
	transition: opacity 0.55s cubic-bezier(.33, 0.9, 0.25, 1);
}

.tp-svc-card-body {
	flex: 1;
	display: flex; flex-direction: column;
	padding: 0 clamp(1.35rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2rem);
}
/* Lifted up over the photograph rather than placed under it, so it
   stitches the image and the text together instead of being a third
   band stacked below them. */
.tp-svc-card-badge {
	position: relative; z-index: 1;
	align-self: flex-start;
	margin-top: -1.5rem;
	display: inline-flex; align-items: center; gap: 0.55rem;
	padding: 0.55rem 0.85rem;
	/* Was solid --ink, which was invisible once the card behind it went
	   dark too. A translucent chip with its own hairline keeps it
	   legible against whatever part of the photograph it lands on. */
	background: rgba(9,12,34,0.72);
	border: 1px solid var(--line-w);
	color: #fff;
	border-radius: var(--r-sm);
	box-shadow: 0 8px 22px rgba(3,5,24,0.5);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(.16,1,.3,1);
}
.tp-svc-card:hover .tp-svc-card-badge {
	background: var(--accent);
	border-color: var(--accent-lt);
	transform: translateY(-3px);
}
.tp-svc-card-badge svg { width: 17px; height: 17px; }
.tp-svc-card-badge em {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-style: normal;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
	opacity: 0.75;
}

.tp-svc-card-title {
	margin-top: 1.15rem;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(1.15rem, 1.5vw, 1.45rem);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
	color: var(--tx);
}
.tp-svc-card-text {
	margin-top: 0.7rem;
	font-size: 0.92rem; line-height: 1.6;
	color: var(--tx-2);
	text-wrap: pretty;
}
/* margin-top:auto pins these to the foot of the card, so the chips line
   up across all four however long the description above them runs. */
.tp-svc-card-tags {
	list-style: none;
	margin-top: auto; padding-top: 1.35rem;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0 0.62rem;
}
/* A meta line, not a row of pills.

   Rounded tag pills are one of the default component shapes — they
   appear on every template, and three of them under every card is the
   look they give. The same words set as small caps with hairline
   separators read as a specification note under a product photograph,
   which is what they actually are, and they stop competing with the
   title for attention. */
.tp-svc-card-tags li {
	font-size: 0.68rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--accent-dk);
	background: none; border: 0; padding: 0;
}
.tp-svc-card-tags li + li::before {
	content: "";
	display: inline-block;
	width: 3px; height: 3px;
	border-radius: 50%;
	margin-right: 0.62rem;
	vertical-align: 0.22em;
	background: var(--tx-3);
}

@media (prefers-reduced-motion: reduce) {
	.tp-svc-card-inner { transform: none; transition: box-shadow 0.4s ease, border-color 0.3s ease; }
	.tp-svc-card-shot { transition: none; }
	.tp-svc-card:hover .tp-svc-card-shot { transform: scale(1.01); }
	.tp-svc-card-badge { transition: background 0.3s ease; }
	.tp-svc-card:hover .tp-svc-card-badge { transform: none; }
}

.tp-svc-highlight {
	background: var(--accent);
	border-radius: var(--r);
	padding: 2.25rem clamp(1.75rem, 4vw, 3rem);
	display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;
	color: #fff;
}
.tp-svc-highlight-desc { font-size: 0.9rem; color: #fff; opacity: 0.88; line-height: 1.6; max-width: 46ch; }
.tp-svc-highlight-cta { flex-shrink: 0; }

@media (max-width: 860px) {
	.tp-svc-highlight { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.tp-svc-highlight-cta { width: 100%; justify-content: center; }
}

/* =====================================================================
   ABOUT — INTRO
   ===================================================================== */
.tp-about-intro { padding-block: var(--sec); background: var(--paper); }

.tp-about-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.tp-about-visual-wrap { position: relative; }

.tp-about-visual-card {
	position: relative; overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 4 / 3;
	box-shadow: var(--sh-3);
	background-image: url('assets/images/terminal-kaunas.jpg');
	background-size: cover; background-position: 28% 58%;
	transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.tp-about-visual-wrap:hover .tp-about-visual-card { transform: scale(1.02); }
.tp-about-visual-card::before {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(200deg, rgba(11,14,61,0.16) 0%, rgba(11,14,61,0.02) 45%, rgba(11,14,61,0.22) 100%);
}
.tp-about-visual-card::after {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
	border-radius: var(--r);
}

.tp-about-text { display: flex; flex-direction: column; gap: 1.5rem; }
.tp-about-desc { font-size: 0.98rem; color: var(--tx-2); line-height: 1.82; }
.tp-about-desc strong { color: var(--tx); }

@media (max-width: 860px) {
	.tp-about-grid { grid-template-columns: 1fr; }
	.tp-about-visual-wrap { max-width: 520px; margin-inline: auto; }
}

/* =====================================================================
   ABOUT — VALUES GRID
   ===================================================================== */
.tp-about-values { padding-block: var(--sec); background: var(--paper-2); }

/* #imones only: dark, so it flows straight out of the hero above it
   instead of cutting to light grey — the slab gradient already lives
   in this same navy→accent palette, so the two sections now read as
   one continuous dark opening instead of two disconnected blocks. */
/* The background here is the hero's exact colour, not var(--ink).
   This section slides up over the pinned hero, so any difference
   between the two reads as the background changing colour mid-scroll —
   which is precisely what it was doing: #030308 (hero) giving way to
   #0B0E3D (a lighter navy). Matching them makes the cover invisible.

   padding-bottom: 0 on purpose — the pillar strip is meant to sit
   flush against the very bottom edge of the section rather than
   floating above a gutter. */
/* The section this index sits in.

   Light, where it used to be near-black with a grain overlay. This is
   the sheet that rises over the dark hero during the pin-and-cover, so
   the handover is now the page turning from night into day rather than
   one dark screen sliding over another — the effect finally does
   something the eye can read.

   No fixed viewport height any more. The pillars needed one because
   they were positioned against the section's bottom edge; a list sizes
   itself, and forcing 100vh around it would only add a band of empty
   paper under the last row. */
#imones.tp-about-values {
	position: relative;
	/* Above the pinned hero, which is position:fixed at z-index 1.
	   Without this the section rises exactly as intended and paints
	   underneath the thing it is supposed to be covering — the handover
	   shows a hero fading into an empty dark screen, with the light
	   page hidden behind it the whole way. */
	z-index: 2;
	background: var(--paper);
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	overflow: hidden;
}

/* The heading band: statement on the left, the group's figures on the
   right. No scroll-linked movement of its own — the whole section
   already rises over the hero, and a second animation inside something
   that is itself moving reads as drift rather than intent. */
.tp-company-head {
	padding-inline: var(--px);
	max-width: calc(var(--mxw) + var(--px) * 2);
	margin-inline: auto;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
}
.tp-company-head-text { max-width: 40rem; }
.tp-company-head-eyebrow {
	display: inline-block;
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--tx-3);
	margin-bottom: 0.9rem;
}
.tp-company-head-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(1.75rem, 3.4vw, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: var(--tx);
	margin: 0;
}
.tp-company-head-sub {
	margin-top: 1rem;
	font-size: clamp(0.92rem, 1.1vw, 1.08rem);
	line-height: 1.6;
	color: var(--tx-2);
	max-width: 44ch;
	text-wrap: pretty;
}

/* Figures, set in the monospace face with tabular numerals so the
   digits share a common width — four numbers side by side is exactly
   where a proportional face starts to look untidy. */
.tp-company-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, auto));
	gap: clamp(1.3rem, 2.4vw, 2.75rem);
	margin: 0;
	flex-shrink: 0;
}
.tp-company-facts dt {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.45rem, 2.2vw, 2.5rem);
	font-weight: 700; letter-spacing: -0.03em; line-height: 1;
	color: var(--tx);
	padding-top: 0.8rem;
	border-top: 1px solid var(--line);
}
.tp-company-facts dt span { color: var(--accent); margin-left: 0.06em; }
.tp-company-facts dd {
	margin: 0.5rem 0 0;
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--tx-3);
	white-space: nowrap;
}
@media (max-width: 1100px) { .tp-company-facts { grid-template-columns: repeat(2, minmax(0, auto)); } }
@media (max-width: 560px) {
	.tp-company-facts { gap: 1rem 1.6rem; }
	.tp-company-facts dd { white-space: normal; }
}

.tp-value-list {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: 3rem;
	margin-top: 3rem;
	border-top: 1px solid var(--line);
}
.tp-value-row {
	display: grid; grid-template-columns: 52px 1fr;
	column-gap: 1.25rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--line);
}
.tp-value-icon {
	width: 52px; height: 52px; flex-shrink: 0;
	border-radius: var(--r-sm);
	background: var(--ink); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.25s, color 0.25s, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.tp-value-icon svg { width: 22px; height: 22px; }
.tp-value-row:hover .tp-value-icon { background: var(--accent); color: var(--ink); transform: rotate(-6deg) scale(1.06); }
.tp-value-num {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
	color: var(--accent-lt); margin-bottom: 0.5rem;
}
.tp-value-row strong {
	display: block;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.02rem; font-weight: 700; color: var(--tx); letter-spacing: -0.01em;
	margin-bottom: 0.4rem;
}
.tp-value-row span { font-size: 0.86rem; color: var(--tx-2); line-height: 1.6; }

@media (max-width: 700px) { .tp-value-list { grid-template-columns: 1fr; } }

/* =====================================================================
   COMPANY PILLARS — seven tall vertical columns standing side by side,
   each cut into a leaning parallelogram (sharp point top-right,
   sharp point bottom-left) and carrying the company name set large
   and vertical, reading bottom-to-top. Name only, no icon.

   Reading direction matters: `writing-mode: vertical-rl` alone runs
   Latin text top-to-bottom (head tilts right), which is the awkward
   direction and is what an earlier attempt here used. Adding
   `rotate(180deg)` flips it to bottom-to-top — the convention actual
   book spines and wall signage use, and it reads noticeably better.

   The cut is clip-path rather than transform: skew, deliberately —
   skew would shear the letterforms themselves and need a counter-skew
   to undo; clip-path only trims the shape and leaves type untouched.
   ===================================================================== */
/* =====================================================================
   COMPANIES — the index

   Replaces seven angled, photo-filled pillars. Those failed for a
   structural reason rather than a stylistic one: to keep white names
   legible over photographs, the photographs had to be dimmed until they
   were grey texture, so the section was simultaneously photo-led and
   showing no usable photograph. Seven near-identical dark shapes was the
   result.

   Splitting the two jobs fixes it. Names are type on paper, where they
   are effortless to read. Photographs get a panel of their own, at full
   brightness, one at a time, big enough to see — which is the first time
   in this design they have actually been visible.
   ===================================================================== */
.tp-co-index {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
	column-gap: clamp(2rem, 5vw, 5.5rem);
	align-items: start;
	margin-top: clamp(2.25rem, 4.5vw, 4rem);
	/* The section is full-bleed (it had to be, for the old strip), so
	   the gutter lives here rather than on a wrapper. */
	padding-inline: var(--px);
	max-width: calc(var(--mxw) + var(--px) * 2);
	margin-inline: auto;
}

.tp-co-row {
	grid-column: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 2rem);
	padding: clamp(1rem, 1.8vh, 1.65rem) 0;
	border-bottom: 1px solid var(--line);
	color: inherit;
	/* padding-left rather than transform: the row is a grid container
	   and nudging it with transform would drag the hairline rules with
	   it, breaking the straight left edge the list is built on. */
	transition: padding-left 0.45s cubic-bezier(.33, .9, .25, 1),
	            border-color 0.35s ease;
}
/* first-child, not first-of-type — five rows are <a> and two are <div>,
   and -of-type counts those as separate sequences. */
.tp-co-row:first-child { border-top: 1px solid var(--line); }
.tp-co-row.is-link { cursor: pointer; }
.tp-co-row:hover,
.tp-co-row:focus-visible {
	padding-left: clamp(0.5rem, 1vw, 1rem);
	border-color: var(--accent);
}
.tp-co-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.tp-co-num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
	color: var(--tx-3);
	transition: color 0.35s ease;
}
.tp-co-row:hover .tp-co-num,
.tp-co-row:focus-visible .tp-co-num { color: var(--accent); }

.tp-co-name {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: 0.55rem 0.7rem;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(1.2rem, 2.2vw, 2.05rem);
	font-weight: 700; letter-spacing: -0.028em; line-height: 1.08;
	color: var(--tx);
}
/* The legal form as a set chip. Six UABs and one GmbH is the most
   useful single fact about how this group is put together, so it is
   given a shape rather than folded into the descriptor line. */
.tp-co-form {
	font-style: normal;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em;
	color: var(--tx-3);
	padding: 0.2rem 0.42rem;
	border: 1px solid var(--line);
	border-radius: 3px;
	transform: translateY(-0.16em);
	white-space: nowrap;
}
/* The one company that is not Lithuanian. Colour carries it — nothing
   says "this one is different", the eye simply finds it. */
.tp-co-form.is-foreign {
	color: var(--accent-dk);
	border-color: rgba(61,112,206,0.38);
	background: rgba(61,112,206,0.07);
}

.tp-co-what {
	display: block;
	margin-top: 0.34rem;
	font-size: clamp(0.83rem, 0.95vw, 0.95rem);
	line-height: 1.5;
	color: var(--tx-2);
}

.tp-co-go {
	display: flex; align-items: center;
	color: var(--accent);
	opacity: 0; transform: translateX(-8px);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.33, .9, .25, 1);
}
.tp-co-go svg { width: 20px; height: 20px; }
.tp-co-row:hover .tp-co-go,
.tp-co-row:focus-visible .tp-co-go { opacity: 1; transform: none; }

/* ---- the photograph panel ----------------------------------------
   Spans every row of the first column, which is what puts it beside
   the list rather than after it — and, because it is a sibling of the
   rows, is what lets a row's :hover reach it with ~ and no JavaScript.
   span 7 is literal: there are seven companies. */
.tp-co-stage {
	grid-column: 2;
	grid-row: 1 / span 7;
	position: relative;
	align-self: stretch;
	min-height: clamp(360px, 46vw, 620px);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: 0 24px 60px rgba(11,14,61,0.10);
}
.tp-co-shot {
	position: absolute; inset: 0;
	background-image: var(--img);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.045);
	transition: opacity 0.55s cubic-bezier(.33, .9, .25, 1),
	            transform 0.9s cubic-bezier(.33, .9, .25, 1);
	will-change: opacity, transform;
}
/* What shows before the pointer arrives. */
.tp-co-shot:first-child { opacity: 1; transform: scale(1); }
/* Once any row is hovered, the default stands down and the matched
   shot below takes over. Without this the first photograph would stay
   underneath every other one. */
.tp-co-index:hover .tp-co-shot,
.tp-co-index:focus-within .tp-co-shot { opacity: 0; transform: scale(1.045); }

.tp-co-row:nth-child(1):hover ~ .tp-co-stage .tp-co-shot:nth-child(1),
.tp-co-row:nth-child(2):hover ~ .tp-co-stage .tp-co-shot:nth-child(2),
.tp-co-row:nth-child(3):hover ~ .tp-co-stage .tp-co-shot:nth-child(3),
.tp-co-row:nth-child(4):hover ~ .tp-co-stage .tp-co-shot:nth-child(4),
.tp-co-row:nth-child(5):hover ~ .tp-co-stage .tp-co-shot:nth-child(5),
.tp-co-row:nth-child(6):hover ~ .tp-co-stage .tp-co-shot:nth-child(6),
.tp-co-row:nth-child(7):hover ~ .tp-co-stage .tp-co-shot:nth-child(7),
.tp-co-row:nth-child(1):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(1),
.tp-co-row:nth-child(2):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(2),
.tp-co-row:nth-child(3):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(3),
.tp-co-row:nth-child(4):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(4),
.tp-co-row:nth-child(5):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(5),
.tp-co-row:nth-child(6):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(6),
.tp-co-row:nth-child(7):focus-visible ~ .tp-co-stage .tp-co-shot:nth-child(7) {
	opacity: 1; transform: scale(1);
}

/* Below this the two columns stop fitting. The panel is a desktop
   enhancement — it depends on hover, which a touch screen does not
   have — so it goes rather than being stacked somewhere as decoration,
   and the list keeps the full width it needs. */
@media (max-width: 900px) {
	.tp-co-index { grid-template-columns: 1fr; }
	.tp-co-stage { display: none; }
	.tp-co-go { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tp-co-row { transition: border-color 0.35s ease; }
	.tp-co-row:hover, .tp-co-row:focus-visible { padding-left: 0; }
	.tp-co-shot { transition: opacity 0.2s linear; transform: none; }
	.tp-co-index:hover .tp-co-shot,
	.tp-co-index:focus-within .tp-co-shot { transform: none; }
	.tp-co-go { transition: opacity 0.2s linear; transform: none; }
}

/* Mission and values, as a pair of bordered notes rather than two more
   paragraphs. The rule down the left is the whole device: it marks them
   as a statement set apart from the body copy without needing a box, a
   tint or an icon to do it. */
.tp-about-creed {
	display: grid;
	gap: clamp(1.1rem, 2vw, 1.75rem);
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
@media (min-width: 720px) { .tp-about-creed { grid-template-columns: 1fr 1fr; } }
.tp-about-creed-item { padding-left: clamp(0.9rem, 1.4vw, 1.25rem); border-left: 2px solid var(--accent); }
.tp-about-creed-label {
	display: block;
	font-size: 0.68rem; font-weight: 700;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--accent-dk);
	margin-bottom: 0.55rem;
}
.tp-about-creed-item p {
	font-size: 0.92rem; line-height: 1.65;
	color: var(--tx-2);
	text-wrap: pretty;
}

/* =====================================================================
   ABOUT — FLEET & GROUP BAND
   ===================================================================== */
.tp-fleetband { background: var(--ink); padding-block: var(--sec); position: relative; overflow: hidden; }
.tp-fleetband-head {
	position: relative; z-index: 1;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap;
}
.tp-fleetband-head .tp-eyebrow { color: var(--txw-3); }
.tp-fleetband-head .tp-eyebrow .tp-lines { color: var(--accent-lt); }
.tp-fleetband-head .tp-heading { color: #fff; margin-bottom: 0.4rem; }
.tp-fleetband-head .tp-subheading { color: var(--txw-2); }

.tp-fleetband-grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--line-w2);
	border-radius: var(--r);
	overflow: hidden;
}
.tp-fleetband-cell {
	padding: 2rem 1.5rem;
	background: var(--ink);
	transition: background 0.22s;
}
.tp-fleetband-cell:hover { background: rgba(255,255,255,0.045); }
.tp-fleetband-val {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	font-weight: 700; color: #fff;
	letter-spacing: -0.02em; line-height: 1;
	margin-bottom: 0.55rem;
	font-variant-numeric: tabular-nums;
}
.tp-fleetband-val span { color: var(--accent-lt); font-size: 0.6em; }
.tp-fleetband-label { font-size: 0.78rem; color: var(--txw-3); line-height: 1.4; }

@media (max-width: 980px) { .tp-fleetband-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tp-fleetband-grid { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   ABOUT — META BAR
   ===================================================================== */
.tp-about-metabar {
	background: var(--paper); border-bottom: 1px solid var(--line);
	padding: 1.35rem var(--px); text-align: center;
}
.tp-about-metabar-inner {
	max-width: calc(var(--mxw) + 2 * var(--px)); margin-inline: auto;
	display: flex; align-items: center; justify-content: center;
	gap: 0.6rem 2rem; flex-wrap: wrap;
	font-size: 0.82rem; color: var(--tx-3);
}
.tp-about-metabar-inner strong { color: var(--tx-2); }
.tp-about-metabar-inner a { color: var(--accent-dk); font-weight: 600; }
.tp-about-metabar-sep { color: var(--tx-3); }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.tp-cta {
	background: var(--ink);
	padding: clamp(4rem,8vw,7rem) var(--px);
	text-align: center; position: relative; overflow: hidden;
}
.tp-cta-photo {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
	filter: saturate(1) contrast(1.05) brightness(0.95);
}
.tp-cta-fade {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	/* Stays dark enough behind the text column to guarantee contrast,
	   but fades out toward the edges so the photo reads clearly there —
	   safer than a uniform lighter wash, which risked text contrast
	   against the photo's brighter patches. */
	background: radial-gradient(ellipse 720px 460px at 50% 50%, rgba(11,14,61,0.92) 0%, rgba(11,14,61,0.85) 45%, rgba(11,14,61,0.5) 100%);
}
.tp-cta-inner {
	position: relative; z-index: 1;
	max-width: 620px; margin-inline: auto;
	display: flex; flex-direction: column; align-items: center;
}
.tp-cta-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
	color: var(--accent-lt); margin-bottom: 1.5rem;
}
.tp-cta h2 {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	color: #fff; letter-spacing: -0.02em; margin-bottom: 0.75rem;
}
.tp-cta p { font-size: 1.02rem; color: var(--txw-2); margin-bottom: 2.25rem; max-width: 46ch; }

/* =====================================================================
   LOCATIONS / CONTACTS
   ===================================================================== */
.tp-locations { padding-block: var(--sec); background: var(--paper-2); }

.tp-locs-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.tp-loc-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 2.5rem;
	position: relative; overflow: hidden;
	box-shadow: var(--sh-1);
	transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
	display: flex; flex-direction: column;
}
.tp-loc-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--accent);
}
.tp-loc-card:hover { box-shadow: var(--sh-2); }

.tp-loc-tag {
	display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
	color: var(--gray);
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 1.25rem;
}
.tp-loc-tag .tp-lines { color: var(--accent); }
.tp-loc-city {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.85rem; font-weight: 700;
	color: var(--tx); letter-spacing: -0.02em;
	margin-bottom: 0.9rem;
}
.tp-loc-addr {
	display: flex; align-items: flex-start; gap: 0.6rem;
	font-size: 0.86rem; color: var(--tx-2);
	margin-bottom: 2rem; line-height: 1.55;
}
.tp-loc-addr svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.2em; color: var(--accent-lt); }
.tp-loc-addr small { display: block; font-size: 0.8rem; color: var(--tx-3); margin-top: 0.15em; }

.tp-loc-map {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 9; width: 100%;
	border-radius: var(--r-sm); border: 1px solid var(--line);
	margin-bottom: 1.75rem;
	filter: grayscale(0.35) contrast(1.05);
	transition: filter 0.3s;
}
.tp-loc-map:hover,
.tp-loc-map:focus-within { filter: grayscale(0); }
.tp-loc-map iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.tp-contacts { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.75rem; }
.tp-person {
	display: grid; grid-template-columns: 36px 1fr; column-gap: 0.85rem; row-gap: 0.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}
.tp-person:last-child { border-bottom: none; padding-bottom: 0; }
.tp-person-avatar {
	grid-row: 1; grid-column: 1;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--ink); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Archivo', system-ui, sans-serif; font-size: 0.85rem; font-weight: 700;
}
.tp-person-avatar svg { width: 14px; height: 14px; }
.tp-person-body { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tp-person-role {
	font-size: 0.68rem; font-weight: 600;
	color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.08em;
}
.tp-person-name { font-size: 0.89rem; font-weight: 600; color: var(--tx); }
.tp-person-contacts {
	grid-row: 2; grid-column: 2;
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.tp-person-phone,
.tp-person-mail {
	display: inline-flex; align-items: center; gap: 0.5rem;
	max-width: 100%; padding: 0.4rem 0.85rem;
	border-radius: 999px; border: 1px solid var(--line); color: var(--tx-2);
	font-size: 0.82rem; font-weight: 600;
	transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.tp-person-phone { font-variant-numeric: tabular-nums; }
.tp-person-phone:hover,
.tp-person-mail:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.tp-person-phone svg,
.tp-person-mail svg { width: 13px; height: 13px; flex-shrink: 0; }
.tp-person-mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tp-loc-cta { width: 100%; justify-content: center; margin-top: auto; }

@media (max-width: 760px) { .tp-locs-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FUEL PRICE
   ===================================================================== */
.tp-fuel { padding-block: var(--sec); background: var(--paper); position: relative; }

.tp-fuel-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 2rem; align-items: start; margin-top: 3rem;
}
.tp-fuel-left { display: flex; flex-direction: column; gap: 1.6rem; }

.tp-fuel-contact-card {
	background: var(--ink);
	border-radius: var(--r);
	padding: 1.9rem;
	display: flex; flex-direction: column; gap: 1.15rem;
	box-shadow: var(--sh-2);
	border-top: 2px solid var(--accent);
}
.tp-fuel-contact-top { display: flex; align-items: center; gap: 0.95rem; }
.tp-fuel-contact-icon {
	width: 46px; height: 46px; flex-shrink: 0;
	background: rgba(43,108,224,0.22);
	border-radius: var(--r-sm);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent-lt);
}
.tp-fuel-contact-icon svg { width: 20px; height: 20px; }
.tp-fuel-contact-label {
	font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.1em; color: var(--txw-3); margin-bottom: 0.22rem;
}
.tp-fuel-contact-month {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.08rem; font-weight: 700; color: #fff; letter-spacing: -0.015em;
}
.tp-fuel-contact-big {
	display: flex; flex-direction: column; gap: 0.3rem;
	padding: 0.9rem 0; border-top: 1px solid var(--line-w2); border-bottom: 1px solid var(--line-w2);
}
.tp-fuel-contact-big strong {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 2.6rem; font-weight: 800; color: #fff;
	letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.tp-fuel-contact-big strong span { font-size: 0.5em; color: var(--accent-lt); font-weight: 700; margin-left: 0.1em; }
.tp-fuel-contact-big > span { font-size: 0.8rem; color: var(--txw-2); }
.tp-fuel-contact-desc { font-size: 0.83rem; color: var(--txw-2); line-height: 1.68; }
.tp-fuel-contact-phone {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-size: 0.85rem; font-weight: 600; color: var(--txw-2);
	transition: color 0.2s; justify-content: center;
	padding-block: 0.3rem;
}
.tp-fuel-contact-phone:hover { color: #fff; }
.tp-fuel-contact-phone svg { width: 14px; height: 14px; color: var(--accent-lt); }

.tp-fuel-steps { display: flex; flex-direction: column; gap: 0; }
.tp-fuel-step {
	display: flex; align-items: flex-start; gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}
.tp-fuel-step:last-child { border-bottom: none; }
.tp-fuel-step-num {
	flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
	background: var(--paper-2); color: var(--ink);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 0.8rem; font-weight: 700;
}
.tp-fuel-step-body { display: flex; flex-direction: column; gap: 0.18rem; padding-top: 0.3rem; }
.tp-fuel-step-body strong { font-size: 0.89rem; font-weight: 700; color: var(--tx); }
.tp-fuel-step-body span   { font-size: 0.83rem; color: var(--tx-2); line-height: 1.5; }

.tp-fuel-formula { background: var(--paper-2); border-radius: var(--r); padding: 2rem; }
.tp-fuel-formula h4 {
	font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.14em; color: var(--tx-3);
	margin-bottom: 1.1rem;
}
.tp-formula-code {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--r-sm); padding: 1.15rem 1.35rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.83rem; color: var(--tx);
	line-height: 2; margin-bottom: 1.35rem;
}
.tp-formula-notes { display: flex; flex-direction: column; gap: 0.52rem; margin-bottom: 1.6rem; }
.tp-formula-note {
	display: flex; gap: 0.6rem;
	font-size: 0.8rem; color: var(--tx-3); line-height: 1.5;
}
.tp-formula-note::before { content: "-"; color: var(--accent-lt); font-weight: 700; flex-shrink: 0; }

.tp-formula-example {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--r-sm); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.tp-formula-example-label {
	font-size: 0.68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--gray); margin-bottom: 0.7rem;
}
.tp-formula-example-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.38rem 0; border-bottom: 1px solid var(--line);
	font-size: 0.85rem; color: var(--tx-2);
}
.tp-formula-example-row:last-child { border-bottom: none; }
.tp-formula-example-row strong { font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.tp-formula-example-result {
	background: rgba(43,108,224,0.08);
	margin: 0.42rem -0.25rem 0; padding: 0.48rem 0.6rem; border-radius: var(--r-sm);
}
.tp-formula-example-result strong { color: var(--accent-lt); font-size: 1.05rem; }

.tp-fuel-source { font-size: 0.76rem; color: var(--tx-3); line-height: 1.5; }
.tp-fuel-source a { color: var(--accent-lt); }

/* Price history — real, published monthly figures, as a proper table */
.tp-fuel-history { margin-top: 4.5rem; }
.tp-fuel-history-head { max-width: 640px; margin-bottom: 2.25rem; }
.tp-fuel-history-head h3 {
	font-family: 'Archivo', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700;
	color: var(--tx); letter-spacing: -0.015em; margin-bottom: 0.5rem;
}
.tp-fuel-history-head p { font-size: 0.92rem; color: var(--tx-2); line-height: 1.6; }

.tp-fuel-year { margin-bottom: 2.5rem; }
.tp-fuel-year:last-child { margin-bottom: 0; }
.tp-fuel-year-label {
	display: inline-flex; align-items: center; gap: 0.75rem;
	font-family: 'Archivo', system-ui, sans-serif; font-size: 1.15rem; font-weight: 800;
	color: var(--ink); margin-bottom: 1.1rem;
}
.tp-fuel-year-label::after { content: ""; display: block; height: 2px; width: 32px; background: var(--accent); }

.tp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--sh-1);
	-webkit-overflow-scrolling: touch;
}
.tp-table { width: 100%; min-width: 460px; max-width: 640px; border-collapse: collapse; font-size: 0.87rem; table-layout: fixed; }
.tp-table thead th {
	text-align: left; padding: 0.95rem 1.15rem;
	font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--tx-3); background: var(--paper-2);
	border-bottom: 2px solid var(--line);
	white-space: nowrap;
}
.tp-table thead th:first-child,
.tp-table tbody th[scope="row"] { width: 32%; }
.tp-table thead th:nth-child(2),
.tp-table thead th:nth-child(3) { width: 19%; }
.tp-table tbody th[scope="row"] {
	text-align: left; font-weight: 600; color: var(--tx);
	padding: 0.95rem 1.15rem; font-size: 0.87rem;
	display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.tp-table tbody td { padding: 0.95rem 1.15rem; color: var(--tx-2); vertical-align: middle; }
.tp-table tbody tr { border-bottom: 1px solid var(--line-2); transition: background 0.15s; }
.tp-table tbody tr:last-child { border-bottom: none; }
.tp-table tbody tr:nth-child(even) { background: var(--paper-2); }
.tp-table tbody tr:hover { background: var(--paper-3); }
.tp-table-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.tp-table-pct { color: var(--accent-lt); font-weight: 700; }
.tp-table-bar-col { width: 30%; }
.tp-table-bar-track { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.tp-table-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-lt), var(--accent)); border-radius: 4px; }

/* The row matching the "current" fuel surcharge shown in the card
   above — ties the table back to that number instead of leaving the
   reader to hunt for it in the list. */
.tp-table tbody tr.tp-table-row--current {
	background: color-mix(in srgb, var(--accent) 7%, #fff);
	box-shadow: inset 3px 0 0 var(--accent);
}
.tp-table tbody tr.tp-table-row--current:hover { background: color-mix(in srgb, var(--accent) 12%, #fff); }
.tp-table-current-tag {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: #fff; background: var(--accent);
	padding: 0.15rem 0.5rem; border-radius: 999px;
	white-space: nowrap;
}
.tp-table-bar-track { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.tp-table-bar { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

@media (max-width: 620px) {
	.tp-table thead th.tp-table-bar-col,
	.tp-table td.tp-table-bar-col { display: none; }
}

@media (max-width: 840px) { .tp-fuel-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.tp-footer-wrap { background: var(--ink); }

.tp-footer-top {
	display: grid; grid-template-columns: 2fr 1fr 1fr;
	gap: 3.5rem;
	padding: clamp(3rem,6vw,5rem) var(--px);
	max-width: calc(var(--mxw) + 2 * var(--px));
	margin-inline: auto;
	border-bottom: 1px solid var(--line-w2);
}

.tp-footer-brand { display: flex; flex-direction: column; gap: 1.1rem; }
.tp-footer-brand .tp-logo-name    { color: #fff; }
.tp-footer-brand .tp-logo-tagline { color: var(--txw-3); }
.tp-footer-brand .tp-logo::after  { background: var(--accent); }
.tp-footer-desc {
	font-size: 0.85rem; color: var(--txw-3);
	line-height: 1.75; max-width: 34ch;
}

.tp-footer-col h5 {
	font-size: 0.68rem; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--txw-3); margin-bottom: 1.1rem;
}
.tp-footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.tp-footer-links a {
	font-size: 0.88rem; color: var(--txw-2);
	transition: color 0.2s, padding-left 0.22s; display: block;
	padding-block: 0.4rem;
}
.tp-footer-links a:hover { color: #fff; padding-left: 0.38rem; }

.tp-footer-contacts { display: flex; flex-direction: column; gap: 0.65rem; }
.tp-footer-contact {
	display: flex; align-items: flex-start; gap: 0.55rem;
	font-size: 0.85rem; color: var(--txw-2); line-height: 1.4;
	transition: color 0.2s;
	padding-block: 0.3rem;
}
a.tp-footer-contact:hover { color: #fff; }
.tp-footer-contact svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--accent-lt); }

.tp-footer-bottom {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	padding: 1.3rem var(--px);
	max-width: calc(var(--mxw) + 2 * var(--px));
	margin-inline: auto;
	font-size: 0.74rem; color: var(--txw-3);
}
.tp-footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 840px) {
	.tp-footer-top { grid-template-columns: 1fr 1fr; }
	.tp-footer-brand { grid-column: 1/-1; }
}
@media (max-width: 520px) {
	.tp-footer-top { grid-template-columns: 1fr; }
	.tp-footer-bottom { flex-direction: column; text-align: center; }
}

/* =====================================================================
   PAGE HERO (sub-pages)
   ===================================================================== */
.tp-page-hero {
	padding: 6rem var(--px) 5rem;
	background: var(--ink);
	background-size: cover; background-position: center;
	position: relative; overflow: hidden;
}
/* Each sub-page gets its own real photo — not a repeated generic band —
   with a dark wash strong enough for text, but clearly showing the
   photo (unlike the more subdued CTA band treatment). */
.tp-page-hero--about {
	background-image: linear-gradient(100deg, rgba(11,14,61,0.92) 0%, rgba(11,14,61,0.8) 45%, rgba(11,14,61,0.55) 100%), url('assets/images/page-hero-about.jpg');
	background-position: center 25%;
}
.tp-page-hero--services {
	background-image: linear-gradient(100deg, rgba(11,14,61,0.92) 0%, rgba(11,14,61,0.8) 45%, rgba(11,14,61,0.55) 100%), url('assets/images/page-hero-services-v2.jpg');
}
.tp-page-hero--contacts {
	background-image: linear-gradient(100deg, rgba(11,14,61,0.92) 0%, rgba(11,14,61,0.8) 45%, rgba(11,14,61,0.55) 100%), url('assets/images/page-hero-contacts.jpg');
}
.tp-page-hero--fuel {
	background-image: linear-gradient(100deg, rgba(11,14,61,0.92) 0%, rgba(11,14,61,0.8) 45%, rgba(11,14,61,0.55) 100%), url('assets/images/page-hero-fuel.jpg');
	background-position: center 65%;
}
.tp-page-hero-inner { position: relative; z-index: 1; max-width: var(--mxw); margin-inline: auto; }
.tp-page-hero .tp-eyebrow { color: var(--gray); }
.tp-page-hero .tp-eyebrow .tp-lines { color: var(--accent-lt); }
.tp-page-hero h1,
.tp-page-hero .wp-block-post-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700; color: #fff;
	letter-spacing: -0.025em; line-height: 1.08;
	margin: 0;
}
.tp-page-hero-sub {
	font-size: clamp(0.9rem, 1.5vw, 1.02rem);
	color: var(--txw-2); line-height: 1.72;
	max-width: none; margin-top: 1rem;
}

.tp-page-body,
.tp-page-body .wp-block-post-content,
.tp-page-body .is-layout-flow,
.tp-page-body .is-layout-constrained {
	width: 100%; max-width: 100%; padding: 0; margin-inline: 0;
}

/* =====================================================================
   404 PAGE
   ===================================================================== */
.tp-404 {
	display: flex; align-items: center; justify-content: center;
	min-height: calc(100svh - var(--nav-h)); padding: 4rem var(--px);
	text-align: center; background: var(--paper-2);
}
.tp-404-inner { max-width: 500px; }
.tp-404-code {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: clamp(6rem, 16vw, 12rem);
	font-weight: 700; color: #7E8499;
	letter-spacing: -0.02em; line-height: 1;
	margin-bottom: 0.5rem;
}
.tp-404 h1 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.tp-404 p  { color: var(--tx-3); margin-bottom: 2rem; }

/* =====================================================================
   SCROLL ANIMATIONS — hiding is scoped to .tp-js (added synchronously
   in <head>, see functions.php) so content is never hidden-by-default
   for no-JS visitors or crawlers. .in-view is added by the existing
   IntersectionObserver in the footer script.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@keyframes tp-fade-up    { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }
	@keyframes tp-fade-left  { from { opacity: 0; transform: translateX(-30px) scale(0.985); } to { opacity: 1; transform: none; } }
	@keyframes tp-fade-right { from { opacity: 0; transform: translateX(30px) scale(0.985); } to { opacity: 1; transform: none; } }

	.tp-js .tp-anim,
	.tp-js .tp-anim-left,
	.tp-js .tp-anim-right { opacity: 0; }

	.tp-js .tp-anim.in-view       { animation: tp-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) both; }
	.tp-js .tp-anim-left.in-view  { animation: tp-fade-left 0.7s cubic-bezier(0.16,1,0.3,1) both; }
	.tp-js .tp-anim-right.in-view { animation: tp-fade-right 0.7s cubic-bezier(0.16,1,0.3,1) both; }

	@keyframes tp-lines-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	.tp-anim.in-view .tp-lines span,
	.tp-anim-left.in-view .tp-lines span,
	.tp-anim-right.in-view .tp-lines span {
		transform-origin: left;
		animation: tp-lines-draw 0.5s cubic-bezier(0.16,1,0.3,1) both;
	}
	.tp-anim.in-view .tp-lines span:nth-child(1),
	.tp-anim-left.in-view .tp-lines span:nth-child(1),
	.tp-anim-right.in-view .tp-lines span:nth-child(1) { animation-delay: 0.4s; }
	.tp-anim.in-view .tp-lines span:nth-child(2),
	.tp-anim-left.in-view .tp-lines span:nth-child(2),
	.tp-anim-right.in-view .tp-lines span:nth-child(2) { animation-delay: 0.5s; }
	.tp-anim.in-view .tp-lines span:nth-child(3),
	.tp-anim-left.in-view .tp-lines span:nth-child(3),
	.tp-anim-right.in-view .tp-lines span:nth-child(3) { animation-delay: 0.6s; }
}

/* =====================================================================
   CONTACT FORM
   ===================================================================== */
.tp-form-wrap { padding-block: var(--sec); background: var(--paper); }

.tp-contact-split {
	display: grid; grid-template-columns: 1.5fr 1fr;
	gap: 2rem; align-items: stretch;
	max-width: 1080px; margin-inline: auto;
}

/* Hardcoded #fff, which the surface inversion could not reach — so the
   whole form became white text on a white card. A lifted dark surface,
   the same construction the service cards use. */
.tp-form-card {
	background: #fff;
	border: 1px solid var(--line); border-radius: var(--r);
	padding: clamp(1.75rem, 4vw, 3rem);
	box-shadow: 0 18px 44px rgba(11,14,61,0.07);
}
.tp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.tp-form-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.tp-form-field label { font-size: 0.76rem; font-weight: 600; color: var(--tx-2); letter-spacing: 0.02em; }
.tp-form-field input,
.tp-form-field textarea {
	width: 100%; padding: 0.8rem 1rem;
	font-family: inherit; font-size: 0.92rem; color: var(--tx);
	background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r-sm);
	transition: border-color 0.2s, background 0.2s;
}
/* Focus lightens the field rather than turning it white — white would
   put white text on white the moment the field was focused. */
.tp-form-field input:focus, .tp-form-field textarea:focus {
	outline: none; border-color: var(--accent-lt);
	background: #fff;
}
.tp-form-field input::placeholder, .tp-form-field textarea::placeholder { color: var(--txw-3); }
.tp-form-field textarea { min-height: 140px; resize: vertical; }
.tp-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-form-actions { display: flex; justify-content: flex-end; }
.tp-form-note {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.95rem 1.1rem; border-radius: var(--r-sm);
	font-size: 0.88rem; margin-bottom: 1.5rem;
}
.tp-form-note svg { width: 16px; height: 16px; flex-shrink: 0; }
.tp-form-note--ok  { background: rgba(43,108,224,0.1); color: var(--accent-lt); }
.tp-form-note--err { background: rgba(198,58,58,0.08); color: #B23A3A; }

.tp-contact-side { display: flex; flex-direction: column; gap: 1.25rem; }
.tp-contact-side-card {
	background: var(--ink); border-radius: var(--r);
	padding: 1.75rem;
}
.tp-contact-side-card:last-child { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tp-contact-side-card h3 {
	font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--txw-3); margin-bottom: 1.1rem;
}
.tp-contact-side-link {
	display: flex; align-items: center; gap: 0.9rem;
	padding: 0.7rem 0; border-bottom: 1px solid var(--line-w2);
	transition: opacity 0.2s;
}
.tp-contact-side-link:last-child { border-bottom: none; padding-bottom: 0; }
.tp-contact-side-link:first-of-type { padding-top: 0; }
.tp-contact-side-link:hover { opacity: 0.8; }
.tp-contact-side-icon {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(43,108,224,0.22); color: var(--accent-lt);
	display: flex; align-items: center; justify-content: center;
}
.tp-contact-side-icon svg { width: 18px; height: 18px; }
.tp-contact-side-link strong { display: block; font-size: 0.92rem; font-weight: 700; color: #fff; }
.tp-contact-side-link span span { font-size: 0.78rem; color: var(--txw-3); }

.tp-contact-side-office {
	display: flex; align-items: flex-start; gap: 0.9rem;
	padding: 0.7rem 0; border-bottom: 1px solid var(--line-w2);
}
.tp-contact-side-office:last-child { border-bottom: none; padding-bottom: 0; }
.tp-contact-side-office:first-of-type { padding-top: 0; }
.tp-contact-side-office-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent-lt); margin-top: 0.15em; }
.tp-contact-side-office-icon svg { width: 16px; height: 16px; }
.tp-contact-side-office strong { display: block; font-size: 0.88rem; font-weight: 700; color: #fff; }
.tp-contact-side-office span span { font-size: 0.78rem; color: var(--txw-3); }

@media (max-width: 900px) { .tp-contact-split { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tp-form-row { grid-template-columns: 1fr; } }

/* =====================================================================
   CARD TILT — JS drives --tilt-x/--tilt-y/--tilt-lift on mousemove
   ===================================================================== */
.tp-svc-cat, .tp-loc-card {
	--tilt-x: 0deg; --tilt-y: 0deg; --tilt-lift: 0px;
	transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--tilt-lift));
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.2s;
	will-change: transform;
}
.tp-svc-cat:hover, .tp-loc-card:hover { transition: box-shadow 0.3s, border-color 0.2s; }

/* =====================================================================
   TRUST-STRIP PARTNER LOGOS — auto-scrolling marquee (shortcode renders
   the list twice back-to-back; translating -50% loops seamlessly)
   ===================================================================== */
.tp-trust-strip { background: var(--paper); padding-block: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }

.tp-trust-strip-head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.tp-trust-strip-label { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-3); }

/* Explicit pause/play control — not just hover/focus-within — per
   auto-rotating-content accessibility guidance (High severity). */
.tp-trust-pause {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--line); background: #fff; color: var(--tx-2);
	cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.tp-trust-pause:hover { border-color: var(--accent); color: var(--accent-lt); }
.tp-trust-pause-icon { display: inline-flex; }
.tp-trust-pause-icon--play { display: none; }
.tp-trust-pause[aria-pressed="true"] .tp-trust-pause-icon--pause { display: none; }
.tp-trust-pause[aria-pressed="true"] .tp-trust-pause-icon--play { display: inline-flex; }

.tp-trust-track-wrap {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.tp-trust-grid.tp-trust-track {
	list-style: none; display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0.75rem;
	width: max-content;
	animation: tp-marquee 38s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.tp-trust-track-wrap:hover .tp-trust-track,
.tp-trust-track-wrap:focus-within .tp-trust-track,
.tp-trust-track-wrap.is-paused .tp-trust-track { animation-play-state: paused; }
@keyframes tp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tp-trust-grid li { display: flex; flex-shrink: 0; }
.tp-trust-card {
	display: flex; align-items: center; justify-content: center;
	width: 168px; height: 88px;
	padding: 1rem 1.5rem;
	border: 1px solid var(--line); border-radius: var(--r-sm);
	/* Opacity only (not a grayscale/contrast filter) — this strip is
	   continuously animating (marquee), and a live filter recomposited
	   every frame on ~24 moving elements was a real measured performance
	   cost. Opacity is compositor-only and effectively free. */
	opacity: 0.62;
	transition: opacity 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.tp-trust-card:hover { opacity: 1; background: var(--paper-2); border-color: var(--paper-3); box-shadow: var(--sh-1); }
/* A fixed height with auto width (not "contain within the box") is
   what actually makes a logo wall read as one consistent size — the
   source files range from near-square marks (ratio ~1.5) to very
   long wordmarks (ratio ~10), so "shrink to fit the same box" made
   the wide ones tiny and the square ones oversized relative to each
   other even though every box was identical. */
.tp-trust-card img { max-height: 34px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* Saudingos and Autecha are unusually long, thin wordmarks (~10:1) —
   even at the shared height they need more horizontal room than the
   other cards, so only these two get a wider box. */
.tp-trust-card--wide { width: 260px; padding-inline: 0.6rem; }
/* Continexus, Kečas and Saudingos read slightly smaller than the rest
   even at the same box height — a touch more height for just these
   three closes that gap without resizing the whole wall. max-height
   (not height) so width-bound logos like Saudingos scale down without
   distorting instead of leaving dead space in an oversized box. */
.tp-trust-card--lg img { max-height: 46px; }
.tp-trust-card-text {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
	color: var(--tx);
}
@media (prefers-reduced-motion: reduce) {
	.tp-svc-cat, .tp-loc-card { transform: none !important; }
	.tp-trust-grid.tp-trust-track {
		animation: none; flex-wrap: wrap; width: auto; justify-content: center;
	}
	.tp-trust-track-wrap { -webkit-mask-image: none; mask-image: none; }
	.tp-trust-track li[aria-hidden="true"] { display: none; }
	.tp-trust-pause { display: none; }
}

/* =====================================================================
   LARGE VIEWPORTS — QHD / 4K. Several sizes elsewhere are written as
   `clamp(min, Nvw, max)` or `min(Nvw, max)`, and that `max` is tuned
   to look right on an ordinary ~1920px desktop — which means at
   1920px they're often already sitting at the cap, not still growing
   with the viewport. On a genuinely larger screen that leaves the
   page looking small and stranded in the middle of all the extra
   space instead of actually using it. Raised here in two steps
   (QHD, then true 4K) rather than one big jump, and only for the
   specific width caps that plateau early — everything else (--sec,
   --px, most type sizes) already keeps scaling with vw on its own. */
@media (min-width: 1920px) {
	:root { --mxw: 1500px; }
	.tp-hero-logo { width: clamp(700px, 46vw, 1200px); }
}
@media (min-width: 2560px) {
	:root { --mxw: 1760px; }
	.tp-hero-logo { width: clamp(900px, 40vw, 1500px); }
}