/* =====================================================================
   2B GROUP — section styles

   Loaded after style.css, in its own `m-` namespace, so the original
   section rules simply stop matching rather than being fought.

   THE IDEA

   Warm paper, an architected grid, and type doing the work.

   Three decisions carry the whole thing. First, the ground is a warm
   off-white rather than a cool grey — it is the single biggest reason
   a light page reads as printed rather than as unstyled, and it makes
   the one accent in the palette land as a deliberate mark instead of
   as more of the same. Second, every section opens with a numbered
   gutter and a rule that runs down it, so the page has a spine: you
   always know where you are, and the content is hung off a structure
   instead of stacked in boxes. Third, nothing is a card unless being a
   card earns it — the company list floods its own rows with
   photography, and the services alternate across the grid with their
   pictures running off the page edge.
   ===================================================================== */

:root {
	/* Paper, warm. #F4F1EC against #FFFFFF cards gives a quiet
	   separation that needs no borders. */
	--p-paper:   #F4F1EC;
	--p-raised:  #FCFAF7;

	/* #00004C is not a colour chosen for this page — it is the exact
	   value sampled out of the logotype artwork itself
	   (2bgroup-icon-mark.png, 22 193 of its pixels). The theme's own
	   #0B0E3D was close but not it, and the accent used to be a lighter
	   steel blue, so the site was carrying three blues none of which
	   were the company's. One now, and it is the right one. */
	--p-ink:     #00004C;
	/* A softer step for body paragraphs — pure #00004C over several
	   lines of running text is heavier than it needs to be. */
	--p-ink-2:   #2A2A66;
	/* 5.2:1 on this paper — every service description and company role
	   is set in it, so it has to clear 4.5:1. */
	--p-muted:   #5B5B79;

	--p-line:    rgba(0, 0, 76, .14);
	/* Firmer than --p-line: this one has to read across 1320px as a
	   boundary, not as a hairline inside a list. */
	--p-rule:    rgba(0, 0, 76, .22);
	--p-line-2:  rgba(0, 0, 76, .27);

	/* The accent is the same navy. The lighter blue it replaces was the
	   one thing on the page not drawn from the mark, and with a colour
	   this deep an accent works by weight rather than by hue — the
	   figure, the button, the numbered label all read as emphasis
	   because of what they are, not because they are a second colour.
	   --p-accent-2 is a half-step used only for depth inside the mark;
	   never as a second colour. */
	--p-accent:  #00004C;
	--p-accent-2:#000033;

	/* For the few elements that sit ON the navy — icon discs on the
	   contact cards, footer link hovers. An accent the same colour as
	   its own background is invisible, so those keep a tint of it. */
	--p-on-ink:  #A6A6D9;

	/* Page gutters, and the two figures that build the left spine.
	   Declared here because the services section pulls its photographs
	   back out to the page edge by exactly these amounts. */
	--m-pad:     clamp(1.25rem, 5vw, 5rem);
	--gut-w:     clamp(2.5rem, 6vw, 6rem);
	--gut-gap:   clamp(1.1rem, 3vw, 3.25rem);

	--p-shadow:  0 1px 2px rgba(0, 0, 76, .05),
	             0 22px 50px -26px rgba(0, 0, 76, .26);
}

/* =====================================================================
   THE THEME'S OWN TOKENS

   style.css defines its palette once and then refers to it 176 times —
   68 uses of --accent, 108 of --ink/--tx. Repainting the components one
   selector at a time (as the header, footer, contact card and progress
   bar rules further down this file were doing) treats the symptom;
   redefining the tokens treats the cause, and it reaches the parts
   nobody thought to look at — the focus ring, ::selection, the form
   field's focus border, the 404.
   ===================================================================== */

:root {
	--accent:    #00004C;
	--accent-dk: #000033;
	/* The one that has to stay light: it is used for small text and
	   icons sitting ON the ink, where the accent itself would vanish. */
	--accent-lt: #A6A6D9;

	--ink:    #00004C;
	--ink-2:  #12124F;
	--ink-3:  #22225F;

	--tx:    #00004C;
	--tx-2:  #2A2A66;
	--tx-3:  #5B5B79;

	--line:   rgba(0, 0, 76, .14);
	--line-2: rgba(0, 0, 76, .06);

	--paper:   #F4F1EC;
	--paper-2: #FCFAF7;
	--paper-3: #EAE6DF;
}

/* =====================================================================
   SHELL — the spine
   ===================================================================== */

.m-sec {
	position: relative;
	background: var(--p-paper);
	color: var(--p-ink);
	/* Was clamp(4.5rem, 10vw, 9rem): two of those back to back left
	   ~310px of empty paper between blocks at 1440px, and the page read
	   as stretched rather than spacious. */
	padding: clamp(3.75rem, 7vw, 6.25rem) 0;
	/* `clip`, not `hidden`: it contains the services' edge-bleed without
	   turning the section into a scroll container, which `hidden` would
	   do — and a scroll container here would break the page's anchors
	   and trap the bleed inside a stray scrollbar. */
	overflow: clip;
}

.m-inner {
	width: min(1320px, 100% - var(--m-pad) * 2);
	margin-inline: auto;
	display: grid;
	grid-template-columns: var(--gut-w) minmax(0, 1fr);
}

.m-gut { position: relative; }
.m-gut-num {
	display: block;
	padding-top: .55rem;
	font: 500 .78rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .1em;
	color: var(--p-muted);
}

/* The rule is the spine. One hairline per section, sitting on the left
   edge of the content column and running its full height. */
.m-main {
	border-left: 1px solid var(--p-line);
	padding-left: var(--gut-gap);
	min-width: 0;
}
/* A section whose heading is carried by the page title above it. The
   content would otherwise start hard against the top of the column,
   where the heading's own bottom margin used to hold the space. */
/* Enough room for the chapter mark to clear what follows. On the
   services page the first row's photograph bleeds left across the
   gutter, and at .5rem it covered the figure — leaving the tick above
   it hanging on the rule with nothing under it. */
.m-main--nohead { padding-top: clamp(2.25rem, 4vw, 3.25rem); }

/* =====================================================================
   TYPE
   ===================================================================== */

.m-title {
	margin: 0 0 clamp(2.5rem, 5.5vw, 4.5rem);
	font: 700 clamp(2.4rem, 7vw, 5.6rem)/.96 "Archivo", Inter, system-ui, sans-serif;
	letter-spacing: -.045em;
	color: var(--p-ink);
}
/* Solid, not a gradient. A multi-stop run across a headline is the most
   recognisable "made this year" effect there is, and it stops being
   emphasis the moment it becomes decoration. One colour, held. */
.m-title-accent { color: var(--p-accent); }

/* A second heading size, for the sections that close a page rather than
   open one. Requisites set at 5.6rem would shout louder than the work
   above them. */
.m-title--sm {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	letter-spacing: -.035em;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* =====================================================================
   04 — NARYSTĖS IR ĮVERTINIMAI

   A ledger, not badges. Graphic seals would have to be invented — the
   client has no artwork for these — and inventing a certification mark
   is the one thing a credentials section must never do. Set as ruled
   entries, the same way the locations and values rows are set, it reads
   as a statement of record, which is what it is.
   ===================================================================== */

.m-cred-list { border-top: 1px solid var(--p-line); }

.m-cred {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: clamp(.75rem, 2vw, 2.5rem);
	align-items: baseline;
	padding: clamp(1.3rem, 2.6vw, 2rem) 0;
	border-bottom: 1px solid var(--p-line);
}
.m-cred-name {
	font: 700 clamp(1.15rem, 2vw, 1.6rem)/1.15 "Archivo", Inter, sans-serif;
	letter-spacing: -.025em;
	color: var(--p-ink);
}
.m-cred-body {
	margin: 0;
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: .4rem clamp(1rem, 2.5vw, 2rem);
}
/* Who actually holds it. Kept beside the description rather than inside
   it so the attribution cannot be skimmed past. */
/* Fixed width so the descriptions beside them start on one line. The
   badges vary in length, and without this each row's text began at a
   different place — which on a page of records reads as carelessness
   rather than as rhythm. */
.m-cred-who {
	flex: none;
	min-width: 7.5rem;
	text-align: center;
	font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--p-accent);
	border: 1px solid var(--p-line-2);
	border-radius: 99px;
	padding: .45em .7em;
}
.m-cred-desc {
	font-size: clamp(.92rem, 1.15vw, 1.02rem);
	line-height: 1.55;
	color: var(--p-muted);
}

/* =====================================================================
   REKVIZITAI
   ===================================================================== */

.m-legal { padding-block: clamp(3.5rem, 8vw, 7rem); }
.m-legal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	border-top: 1px solid var(--p-line);
}
.m-legal-block {
	padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.8rem) clamp(1.5rem, 3vw, 2.2rem) 0;
	border-bottom: 1px solid var(--p-line);
}
.m-legal-block + .m-legal-block {
	border-left: 1px solid var(--p-line);
	padding-left: clamp(1rem, 2vw, 1.8rem);
}
.m-legal-label {
	display: block;
	font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--p-accent);
	margin-bottom: 1.1rem;
}
.m-legal-name {
	margin: 0;
	font: 700 clamp(1.05rem, 1.6vw, 1.25rem)/1.25 "Archivo", Inter, sans-serif;
	letter-spacing: -.02em;
	color: var(--p-ink);
}
.m-legal-lines {
	margin: 0 0 1rem;
	font-size: .95rem; line-height: 1.7;
	color: var(--p-ink-2);
}
.m-legal-lines:last-child { margin-bottom: 0; }
.m-legal-lines a { color: var(--p-ink); text-decoration: none; transition: color .25s ease; }
.m-legal-lines a:hover { color: var(--p-accent); }

/* Label and value on one line, the label in mono so the two never read
   as a sentence. */
.m-legal-pairs { margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.m-legal-pairs > div { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.m-legal-pairs dt {
	font: 500 .68rem/1.4 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--p-muted);
	min-width: 8rem;
}
.m-legal-pairs dd {
	margin: 0;
	font: 600 .95rem/1.4 Inter, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--p-ink);
}

/* =====================================================================
   HERO
   ===================================================================== */

.m-hero {
	position: relative;
	min-height: 100svh;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(6rem, 12vh, 9rem) var(--m-pad) clamp(6rem, 12vh, 9rem);
	background: var(--p-paper);
	overflow: hidden;
	isolation: isolate;
}

/* The hero clips its aurora, and a blob still at strength where the
   clip falls leaves a visible colour edge along the join — the section
   below is the same paper, so the cut reads as a band rather than as a
   boundary. Dissolving the last stretch into the ground colour leaves
   nothing to cut. */
.m-hero::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 22vh;
	background: linear-gradient(to bottom, transparent, var(--p-paper));
	z-index: 0; pointer-events: none;
}

/* Aurora — two colour fields drifting behind the mark. The only thing
   moving on a resting page, and the reason a light hero reads as alive
   rather than as a blank screen with a logo on it. Animated on
   `transform` alone, so it stays on the compositor and costs nothing
   per frame. */
.m-hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.m-hero-blob {
	position: absolute;
	width: 44rem; height: 44rem;
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform;
}
/* Two fields, both in the brand's own blues, and quieter than before.
   Three drifting colours was the other tell — a light of its own,
   changing hue as it moved. What is left is closer to daylight moving
   across paper: enough to keep the screen from being dead, not enough
   to be a feature. */
.m-hero-blob--1 {
	top: -13rem; left: 2%;
	background: radial-gradient(circle, rgba(0, 0, 76, .20), transparent 62%);
	animation: m-drift-a 32s ease-in-out infinite;
}
.m-hero-blob--2 {
	top: 14%; right: -9rem;
	background: radial-gradient(circle, rgba(0, 0, 76, .13), transparent 62%);
	animation: m-drift-b 40s ease-in-out infinite;
}
@keyframes m-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(6vw, 4vh, 0) scale(1.14); }
}
@keyframes m-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
	50%      { transform: translate3d(-7vw, 6vh, 0) scale(.94); }
}

/* Two full-height rules at the page gutters, echoing the spine that
   runs down every section below. They are what tie the hero to the rest
   of the document instead of leaving it a separate poster. */
.m-hero-rules {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(to right, var(--p-line) 1px, transparent 1px),
		linear-gradient(to left,  var(--p-line) 1px, transparent 1px);
	background-size: 1px 100%, 1px 100%;
	background-position: var(--m-pad) 0, calc(100% - var(--m-pad)) 0;
	background-repeat: no-repeat;
	-webkit-mask: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.m-hero-inner {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
}

/* The mark, drawn through the theme's own PNG as a mask so the artwork
   is untouched and only the fill changes: ink into accent, the exact
   inverse of the silver-on-black it used to carry. It is the hero, not
   an element in it. */
.m-hero-mark {
	margin: 0;
	/* The clamp floor is above any phone's 92vw on purpose, so `min()`
	   hands phones the viewport-relative figure and the mark fills the
	   screen there too rather than stopping at a fixed pixel width. */
	width: min(92vw, clamp(380px, 66vw, 1080px));
	aspect-ratio: 1350 / 680;
	-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;
	/* Flat #00004C — the artwork's own colour, with nothing done to it.
	   Earlier passes ran a gradient through the mark for depth; every
	   one of them meant the logotype on the site was a colour the
	   logotype is not. The sheen above it is a passing highlight, not a
	   recolouring, so it stays. */
	background-image:
		linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .42) 50%, transparent 58%),
		linear-gradient(var(--p-ink), var(--p-ink));
	background-size: 60% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: -60% 0, 0 0;
}
@keyframes m-sheen {
	0%        { background-position: -60% 0, 0 0; }
	38%, 100% { background-position: 160% 0, 0 0; }
}

/* A label between two rules, not a sentence. At this size next to a
   mark that wide, a paragraph would read as something to get through. */
.m-hero-tag {
	margin: clamp(1.5rem, 3.2vh, 2.4rem) 0 0;
	display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.5rem);
	font: 500 clamp(.68rem, .95vw, .78rem)/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .3em; text-transform: uppercase;
	color: var(--p-muted);
}
.m-hero-tag::before,
.m-hero-tag::after {
	content: ""; height: 1px; width: clamp(1.5rem, 5vw, 4rem);
	background: var(--p-line-2);
}
.m-hero-tag span { padding-left: .3em; }

.m-hero-cta { margin-top: clamp(1.9rem, 3.6vh, 2.7rem); }

/* The corner marks. They give the eye edges to measure the mark
   against, which is the difference between a composition and a logo
   parked in the middle of an empty screen. */
.m-hero-corner {
	position: absolute; z-index: 1;
	font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--p-muted);
}
.m-hero-corner--tl { top: clamp(5.5rem, 12vh, 8rem); left: calc(var(--m-pad) + 1.25rem); }
.m-hero-corner--tr { top: clamp(5.5rem, 12vh, 8rem); right: calc(var(--m-pad) + 1.25rem); }
.m-hero-corner--bl { bottom: clamp(2rem, 5vh, 3.5rem); left: calc(var(--m-pad) + 1.25rem); }

/* The anchor is the hit area and the span inside it is the mark. They
   have to be separate: styling the anchor itself as the rule made the
   whole link one pixel wide, which is a target nobody can hit. */
.m-hero-cue {
	position: absolute; z-index: 1;
	left: 50%; bottom: clamp(1rem, 3vh, 2rem);
	transform: translateX(-50%);
	width: 44px; height: clamp(44px, 7vh, 64px);
	display: flex; align-items: center; justify-content: center;
}
.m-hero-cue-line {
	position: relative;
	width: 1px; height: clamp(32px, 5.5vh, 50px);
	background: var(--p-line-2);
	overflow: hidden;
	transition: background .3s ease;
}
.m-hero-cue:hover .m-hero-cue-line { background: rgba(0, 0, 76, .55); }
/* A lit segment falling down the rule, rather than a bouncing arrow —
   direction without asking for attention. */
.m-hero-cue-line::after {
	content: "";
	position: absolute; left: 0; top: -60%;
	width: 100%; height: 60%;
	background: linear-gradient(180deg, transparent, var(--p-accent));
	animation: m-cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes m-cue {
	0%        { transform: translateY(0); opacity: 0; }
	22%       { opacity: 1; }
	80%, 100% { transform: translateY(270%); opacity: 0; }
}

/* Everything in the hero arrives rather than appearing: one shared
   animation, staggered down the block. Pure CSS — no observer, so
   nothing can arrive late on a slow first paint. */
.m-hero-mark,
.m-hero-tag,
.m-hero-cta,
.m-hero-corner {
	animation-name: m-rise;
	animation-duration: .9s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	animation-fill-mode: both;
}
/* Two animations on the mark: the entrance, then the sheen. Declared as
   matched lists so the second one's delay and iteration count are not
   applied to the first. Three passes only — an endlessly shining logo
   is a decoration that never settles. */
.m-hero-mark {
	animation-name: m-rise, m-sheen;
	animation-duration: .9s, 9s;
	animation-delay: .06s, 1.2s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1), ease-in-out;
	animation-iteration-count: 1, 3;
	animation-fill-mode: both, none;
}
.m-hero-tag    { animation-delay: .3s; }
.m-hero-cta    { animation-delay: .42s; }
.m-hero-corner { animation-delay: .6s; }
@keyframes m-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* =====================================================================
   01 — GRUPĖ

   Editorial rows that flood with their own photograph on hover. One
   image at a time, at the scale of the thing being pointed at, beats a
   thumbnail panel off to the side — and it makes the list the design
   rather than half of it.
   ===================================================================== */

.m-co { border-top: 1px solid var(--p-line); }

.m-co-row {
	position: relative;
	display: grid;
	/* City and role get fixed tracks: each row is its own grid, so `auto`
	   sized them to their own text and the two columns zig-zagged from
	   row to row. Wide enough for the longest entry in LT and EN. */
	grid-template-columns: auto minmax(0, 1fr) 10.5rem 16.5rem auto;
	align-items: center;
	gap: clamp(.9rem, 2vw, 2rem);
	padding: clamp(1.15rem, 2.4vw, 2rem) clamp(.9rem, 2vw, 1.6rem);
	border-bottom: 1px solid var(--p-line);
	text-decoration: none;
	color: var(--p-ink);
	overflow: hidden;
	transition: color .4s ease;
}

/* The photograph and its scrim in one layer: a gradient listed before
   the image in the same `background-image` paints over it, which saves
   a second element and a second compositing layer per row. */
.m-co-fill {
	position: absolute; inset: 0;
	/* The scrim has to hold white type all the way across the row, not
	   just under the name — the role text sits at the far right, and at
	   45% the photograph was still showing through enough to swallow
	   it. */
	background-image:
		linear-gradient(90deg, rgba(0, 0, 76, .94) 18%, rgba(0, 0, 76, .68) 100%),
		var(--img);
	background-size: auto, cover;
	background-position: center, center 42%;
	opacity: 0;
	transform: scale(1.07);
	transition: opacity .45s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.m-co-row > :not(.m-co-fill) { position: relative; z-index: 1; }

.m-co-row:hover,
.m-co-row:focus-visible { color: #fff; }
.m-co-row:hover .m-co-fill,
.m-co-row:focus-visible .m-co-fill { opacity: 1; transform: none; }

.m-co-num {
	font: 500 .72rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .08em;
	color: var(--p-muted);
	transition: color .4s ease;
}
.m-co-row:hover .m-co-num { color: rgba(255, 255, 255, .6); }

.m-co-name {
	font: 700 clamp(1.4rem, 3.4vw, 2.6rem)/1.08 "Archivo", Inter, sans-serif;
	letter-spacing: -.035em;
	display: inline-flex; align-items: center; gap: .6rem;
}

.m-co-form {
	font: 500 .58rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .13em; text-transform: uppercase;
	font-style: normal;
	color: var(--p-muted);
	border: 1px solid var(--p-line-2);
	border-radius: 99px;
	padding: .36em .62em;
	transition: color .4s ease, border-color .4s ease;
}
.m-co-row:hover .m-co-form { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.38); }

.m-co-what {
	font-size: .9rem;
	color: var(--p-muted);
	text-align: left;
	white-space: nowrap;
	transition: color .4s ease;
	min-width: 11rem;
}
.m-co-row:hover .m-co-what { color: rgba(255, 255, 255, .78); }

/* Where each company actually is. Set in mono so it reads as a data
   column beside the role rather than as a second description. */
.m-co-where {
	font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--p-muted);
	white-space: nowrap;
	text-align: left;
	transition: color .4s ease;
}
.m-co-row:hover .m-co-where { color: rgba(255, 255, 255, .62); }

.m-co-go {
	width: 2.4rem; height: 2.4rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--p-line-2);
	color: var(--p-ink);
	opacity: 0; transform: translateX(-.5rem);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1),
	            background .35s ease, border-color .35s ease, color .35s ease;
}
.m-co-go svg { width: .95rem; height: auto; }
.m-co-row:hover .m-co-go {
	opacity: 1; transform: none;
	background: #fff; border-color: #fff; color: var(--p-ink);
}
/* Rows with nowhere to go keep the space, so the role and city columns
   stay aligned across all seven — but the control itself is never
   painted. Hiding only its border was not enough: the hover rule above
   still filled it white, so four of the seven rows grew a blank white
   disc on hover that did nothing when clicked. */
.m-co-row:not(.is-link) .m-co-go,
.m-co-row:not(.is-link):hover .m-co-go {
	opacity: 0;
	background: none;
	border-color: transparent;
	transform: none;
}

/* =====================================================================
   02 — PASLAUGOS

   Spreads that alternate side to side, each photograph running off the
   page edge. The rhythm is the point: four equal cards said all four
   services carry the same weight and gave the eye nowhere to start.
   ===================================================================== */

.m-svc-list {
	display: flex; flex-direction: column;
	gap: clamp(3rem, 6vw, 5.5rem);
}

.m-svc {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
}
.m-svc-media { grid-column: 1 / 8; position: relative; }
.m-svc-text  { grid-column: 8 / 13; }

/* Odd spreads pull left, back through the spine and the page gutter, so
   the photograph meets the edge of the screen. Even spreads mirror it.
   The section clips, so neither can put the page into horizontal
   scroll. */
.m-svc:nth-child(odd) .m-svc-media {
	margin-left: calc(-1 * (var(--gut-w) + var(--gut-gap) + var(--m-pad)));
}
.m-svc:nth-child(even) .m-svc-media {
	grid-column: 6 / 13;
	order: 2;
	margin-right: calc(-1 * var(--m-pad));
}
.m-svc:nth-child(even) .m-svc-text { grid-column: 1 / 6; order: 1; }

.m-svc-media {
	/* Cinematic rather than square-ish. At 16/10 these ran over 500px
	   tall once the bleed had widened them, which turned four services
	   into four screens of scrolling. */
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--p-raised);
}
.m-svc-shot {
	position: absolute; inset: 0;
	background-image: var(--img);
	background-size: cover; background-position: center;
	transform: scale(1.02);
	transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.m-svc:hover .m-svc-shot { transform: scale(1.06); }

.m-svc-num {
	display: block;
	font: 500 .74rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--p-accent);
	margin-bottom: 1.1rem;
}
.m-svc-title {
	margin: 0;
	font: 700 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 "Archivo", Inter, sans-serif;
	letter-spacing: -.035em;
	color: var(--p-ink);
}
.m-svc-desc {
	margin: .9rem 0 0;
	font-size: clamp(.95rem, 1.15vw, 1.05rem);
	line-height: 1.6;
	color: var(--p-muted);
}

/* =====================================================================
   03 — KUR VEIKIAME

   Four address blocks divided by rules rather than boxed into cards —
   the same device the values row on the About page uses, so the two
   read as one system.
   ===================================================================== */

.m-place-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	border-top: 1px solid var(--p-line);
}
.m-place {
	display: flex; flex-direction: column;
	padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem) clamp(1.6rem, 3vw, 2.4rem) 0;
	border-bottom: 1px solid var(--p-line);
}
.m-place + .m-place {
	border-left: 1px solid var(--p-line);
	padding-left: clamp(1rem, 2vw, 1.8rem);
}

.m-place-city {
	font: 500 .7rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--p-accent);
	margin-bottom: 1.1rem;
}
.m-place-addr {
	margin: 0;
	font: 700 clamp(1.1rem, 1.7vw, 1.35rem)/1.25 "Archivo", Inter, sans-serif;
	letter-spacing: -.025em;
	color: var(--p-ink);
}
.m-place-addr span {
	display: block;
	margin-top: .3rem;
	font: 500 .72rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .1em;
	color: var(--p-muted);
}
.m-place-role {
	margin: .9rem 0 0;
	font-size: .92rem; line-height: 1.5;
	color: var(--p-ink-2);
}
.m-place-meta {
	list-style: none;
	margin: 1rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .35rem;
}
.m-place-meta li {
	font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .04em;
	color: var(--p-muted);
	border: 1px solid var(--p-line);
	border-radius: 99px;
	padding: .45em .7em;
}
.m-place-tel {
	margin-top: auto;
	padding-top: 1.2rem;
	display: inline-flex; align-items: center; gap: .45rem;
	font: 600 .88rem/1 Inter, system-ui, sans-serif;
	color: var(--p-ink);
	text-decoration: none;
	transition: color .25s ease;
}
.m-place-tel svg { width: .9rem; height: auto; }
.m-place-tel:hover { color: var(--p-accent); }


@keyframes m-rise { from { transform: translateY(108%); } to { transform: none; } }


@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-draw { from { transform: scaleX(0); } to { transform: none; } }


@media (min-width: 820px) { .m-ab-disc { grid-template-columns: repeat(4, 1fr); } }


@media (max-width: 560px) {
	/* Five figures across a phone would be five columns of one
	   character each. */
}
/* =====================================================================
   THE CLOSING SPREAD

   Light, split, and set in a serif. See the note above the shortcode in
   inc/sections-modern.php for why all three.
   ===================================================================== */

/* A band, not a screen. It ran two thirds of a viewport tall because it
   was carrying a contact list the footer repeats a centimetre below it;
   with the list gone there is one line to say and one thing to press,
   and the picture reads better as a strip than as a panel. */
.m-close {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(19rem, 40vh, 26rem);
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--p-ink);
	color: #fff;
}

/* Edge to edge and at full strength. The version before last had this
   photograph at 22% under a full desaturate — you could not tell what
   it was, and a picture nobody can read is worse than no picture. The
   scrim below does the work of holding type instead. */
.m-close-shot {
	position: absolute; inset: 0; z-index: -2;
	background-image: var(--img);
	background-size: cover;
	/* Low in the frame: the trucks at the docks sit in the lower right
	   of this aerial, and the band is a slice of it. */
	background-position: center 62%;
	/* The tarmac in this shot is a warm beige that sits oddly against a
	   navy palette. Pulled down just enough to read as the same site,
	   not far enough to lose the trucks. */
	filter: saturate(.7) contrast(1.04);
}
/* One gradient now, running the way the content does: heavy on the left
   under the statement, thinning across to the right where the trailers
   and the lit doors are. The vertical wash that used to weight the foot
   went with the contact row it was there to hold. */
.m-close::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	/* The right end no longer thins to nothing. The button is white and
	   the tarmac under it is pale — at 20% the two were almost the same
	   value and the control stopped reading as a control. */
	background: linear-gradient(100deg,
		rgba(0, 0, 76, .92) 0%,
		rgba(0, 0, 76, .80) 28%,
		rgba(0, 0, 76, .58) 62%,
		rgba(0, 0, 76, .46) 100%);
	pointer-events: none;
}

.m-close-inner {
	position: relative;
	width: min(1320px, 100% - var(--m-pad) * 2);
	margin-inline: auto;
	padding-left: calc(var(--gut-w) + var(--gut-gap));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.75rem, 5vw, 4rem);
	flex-wrap: wrap;
}

/* The same label-between-rules the hero opens with, so the first screen
   of the site and the last one are set by one hand. */
.m-close-label {
	margin: 0 0 clamp(1.4rem, 3vw, 2rem);
	display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.2rem);
	font: 500 .7rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .28em; text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
}
.m-close-label::after {
	content: ""; height: 1px; flex: 1; max-width: 5rem;
	background: rgba(255, 255, 255, .3);
}

/* The one serif on the site. Regular weight, not bold: at this size a
   bold serif reads as a newspaper headline, and the line is meant to
   read as something signed rather than announced. */
.m-close-title {
	margin: 0;
	/* Archivo, the same face every other heading on the site uses. The
	   serif experiment is dropped: a 400-weight serif reversed out of a
	   photograph has thin strokes fighting a busy ground, which is what
	   made it look weak — and it was the one place on the site set in a
	   different family for no reason the reader could see.
	   The text-shadow went with it. A shadow behind white type on a
	   photograph does not sharpen it, it smears the edges; the scrim
	   below the type is what buys legibility. */
	max-width: 15ch;
	font: 700 clamp(2rem, 4.2vw, 3.6rem)/1.02 "Archivo", Inter, system-ui, sans-serif;
	letter-spacing: -.035em;
	color: #fff;
}

/* Beside the statement, not under it. On a short band a button stacked
   below the line makes the block tall again for no reason, and the
   right half of the strip is where the eye finishes reading anyway. */
.m-close-btn { flex: none; }

@media (max-width: 860px) {
	.m-close-inner {
		padding-left: 0;
		flex-direction: column;
		align-items: flex-start;
	}
	/* Stacked, the block is three short elements, so the desktop band's
	   height leaves a hand's width of empty photograph under the button
	   for nothing. */
	.m-close { min-height: clamp(14rem, 34vh, 19rem); }
	.m-close-title { max-width: none; }
	.m-close-btn { margin-top: .5rem; }
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.m-btn {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: 1.05rem 1.9rem;
	border-radius: 99px;
	font: 600 .9rem/1 Inter, system-ui, sans-serif;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .35s ease,
	            background .3s ease, border-color .3s ease, color .3s ease;
}
.m-btn svg { width: 1rem; height: auto; }

.m-btn--brand {
	color: #fff;
	background: var(--p-accent);
	box-shadow: 0 14px 30px -12px rgba(0, 0, 76, .45);
}
.m-btn--brand:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 42px -14px rgba(0, 0, 76, .6);
}
.m-btn--solid {
	background: #fff; color: var(--p-ink);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.m-btn--solid:hover { transform: translateY(-2px); }

/* On the photograph. White rather than the accent: the accent blue is
   close enough to the brand navy in the scrim that a blue button on a
   blue-washed picture stops reading as a control. */
.m-btn--light {
	background: #fff; color: var(--p-ink);
	box-shadow: 0 16px 34px -16px rgba(0, 0, 76, .8);
}
.m-btn--light:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 44px -16px rgba(0, 0, 76, .9);
}
.m-btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .28);
}
.m-btn--ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

/* =====================================================================
   THE PAGE GROUND

   The theme's own blocks — the contact form, the generic page body, the
   404 — sit on #FCFCFD, a cool near-white. Against the warm paper every
   section here uses, that showed as a band changing colour partway down
   the contacts page. One ground for the whole site; the white form card
   inside still separates from it cleanly, which is the job the cool
   white was doing before.
   ===================================================================== */

body,
.tp-form-wrap,
.tp-page-body,
.tp-404 {
	background: var(--p-paper) !important;
}

/* The theme sets its global text colour to the brand navy, and every
   element that does not set its own inherits it — so any copy outside
   the rewritten sections came out blue on a graphite page. The heading
   tags are listed too: the theme colours them directly, which beats an
   inherited value from `body`. */
body,
body h1, body h2, body h3, body h4 { color: var(--p-ink); }

/* The scroll-progress bar across the top of every page was a flat blue
   and is the first thing that moves on the screen. */
#tp-progress, .tp-progress { background: var(--p-accent) !important; }
/* Keyboard-only, but it is still a navy slab when it appears. */
.tp-skip { background: var(--p-ink) !important; }

/* --- The contact page's own components -------------------------------
   The form and the aside beside it are the theme's, built in the brand
   navy: dark cards, blue icon discs, a navy submit button and navy
   headings. On a graphite and burnt-orange page they were the last
   blue things left. Repainted, not rebuilt — the layout is fine. */

.tp-form-wrap .tp-heading,
.tp-form-wrap .tp-lines,
.tp-form-wrap input,
.tp-form-wrap textarea { color: var(--p-ink); }
.tp-form-wrap .tp-lines span { background: var(--p-accent); }
.tp-form-wrap input,
.tp-form-wrap textarea {
	border-color: var(--p-line) !important;
	background: var(--p-paper) !important;
}
.tp-form-wrap input:focus,
.tp-form-wrap textarea:focus {
	border-color: var(--p-accent) !important;
	outline-color: var(--p-accent);
}
.tp-form-wrap .tp-btn--navy {
	background: var(--p-accent) !important;
	color: #fff;
}
.tp-contact-side-card { background: var(--p-ink) !important; }
.tp-contact-side-icon {
	background: rgba(166, 166, 217, .20) !important;
	color: var(--p-on-ink) !important;
}
.tp-contact-side-icon svg,
.tp-contact-side-office-icon,
.tp-contact-side-office-icon svg { color: var(--p-on-ink) !important; }

/* =====================================================================
   FOOTER

   Bound to the same token as everything else rather than left on its
   own hard-coded navy, so the footer and the closing band directly
   above it can never drift apart again — they were two different darks
   for a while, and the join showed.
   ===================================================================== */

.tp-footer-wrap { background: var(--p-ink) !important; }
.tp-footer-wrap a:hover,
.tp-footer-wrap .tp-footer-links a:hover { color: var(--p-on-ink) !important; }
/* No filter on the footer's mark. It does not sit on the dark ground
   directly — the theme puts it on a white chip — so flipping it white
   turned the monogram the same colour as the chip behind it and left a
   blank white square in the corner of every page. */
.tp-footer-wrap .tp-logo-mark { filter: none; }

/* =====================================================================
   HEADER — the transparent front-page variant only

   The bar is the theme's and stays the theme's on every inner page.
   The front page asks it to sit transparently over the hero, and that
   variant was written for white type on a black screen; the hero is
   light now, so these rules repaint only that one state.
   ===================================================================== */

/* The theme paints a dark scrim behind the transparent bar so white
   type stays legible over a photographic hero. There is no white type
   here any more, and the hero is light. */
header.tp-header--transparent:not(.is-scrolled)::before { opacity: 0; }
/* The monogram is a navy PNG that the theme flips to white for the dark
   hero it used to sit on. The hero is light, so the filter comes off
   and the artwork shows in its own colour — which is the page's ink. */
header.tp-header--transparent:not(.is-scrolled) .tp-logo-mark { filter: none; }

header.tp-header--transparent:not(.is-scrolled) .tp-nav a,
header.tp-header--transparent:not(.is-scrolled) .tp-logo-name,
header.tp-header--transparent:not(.is-scrolled) .tp-phone-link {
	color: var(--p-ink);
}
header.tp-header--transparent:not(.is-scrolled) .tp-nav a:hover,
header.tp-header--transparent:not(.is-scrolled) .tp-nav a.is-active {
	color: var(--p-accent);
}
header.tp-header--transparent:not(.is-scrolled) .tp-logo-tagline { color: var(--p-muted); }
/* The phone glyph is given its own light colour for the dark bar, so
   inheriting from the link is not enough. */
header.tp-header--transparent:not(.is-scrolled) .tp-phone-link svg {
	color: var(--p-ink); stroke: currentColor;
}
header.tp-header--transparent:not(.is-scrolled) .tp-menu-btn { color: var(--p-ink); }
header.tp-header--transparent:not(.is-scrolled) .tp-menu-btn span { background: var(--p-ink); }

/* The solid bar on every inner page is the theme's near-white; against
   warm paper it reads faintly blue. Brought onto the same ground. */
header.wp-block-template-part:not(.tp-header--transparent),
header.wp-block-template-part.is-scrolled {
	background: rgba(252, 250, 247, .88) !important;
	-webkit-backdrop-filter: saturate(130%) blur(12px);
	backdrop-filter: saturate(130%) blur(12px);
}

/* The solid bar's own type. The rules above only repaint the
   transparent front-page variant; on the inner pages the wordmark and
   the nav were still set in the brand navy the rest of the site has
   left behind. */
header.wp-block-template-part .tp-logo-name,
header.wp-block-template-part .tp-nav a,
header.wp-block-template-part .tp-phone-link { color: var(--p-ink); }
header.wp-block-template-part .tp-nav a:hover,
header.wp-block-template-part .tp-nav a.is-active { color: var(--p-accent); }
header.wp-block-template-part .tp-logo-tagline { color: var(--p-muted); }
/* The burger's bars. Only visible below 900px, which is why they
   survived every earlier sweep — they are drawn as unclassed spans
   with the navy as their own background. */
header.wp-block-template-part .tp-menu-btn { color: var(--p-ink); }
header.wp-block-template-part .tp-menu-btn span { background: var(--p-ink); }

/* One treatment for the header's call to action, everywhere. It was an
   outlined white button over the hero and a flat blue one on the inner
   pages — two shapes for one control. */
header.wp-block-template-part .tp-header-btn,
header.wp-block-template-part .tp-btn--orange {
	background: var(--p-accent) !important;
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 76, .4);
	transition: transform .3s ease, box-shadow .35s ease;
}
header.wp-block-template-part .tp-header-btn:hover,
header.wp-block-template-part .tp-btn--orange:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -10px rgba(0, 0, 76, .55);
}
/* The mobile drop-down is its own sheet and keeps its own dark type —
   the rules above must not leak into it, so it states its own. Only
   visible under 900px, which is why its outlined phone button and that
   button's glyph kept the brand navy through several sweeps. */
/* `.tp-mobile-panel`, not `#tp-mobile-nav`: the phone button lives in a
   `.tp-mobile-cta` inside the panel, so an id-scoped selector aimed at
   the nav wrapper kept missing it. */
#tp-mobile-nav a,
.tp-mobile-panel a { color: var(--p-ink); }
.tp-mobile-panel .tp-btn--outline {
	color: var(--p-ink) !important;
	border-color: var(--p-line-2) !important;
}
.tp-mobile-panel .tp-btn--outline svg { color: var(--p-accent); }
/* The drop-down's own backdrop is a navy scrim. */
.tp-mobile-nav { background: rgba(0, 0, 76, .45) !important; }

/* The last of the theme's blue-greys: #4A4E68 on form labels and the
   header's phone glyph, and the 12%-navy hairline around the form card
   and the map frame. Each is small, and together they were what kept
   the page reading faintly cool. */
.tp-form-wrap label,
header.wp-block-template-part .tp-phone-link svg { color: var(--p-muted); }
.tp-form-card,
.tp-loc-map { border-color: var(--p-line) !important; }

/* =====================================================================
   INNER-PAGE TITLE BAND

   Was a navy slab with a photograph behind it, above three otherwise
   light pages — correct when the whole site was dark, a leftover now.
   Same ground as everything else, opened with the same spine.
   ===================================================================== */

.tp-page-hero {
	position: relative;
	overflow: hidden;
	background-image: none !important;
	background-color: var(--p-paper) !important;
	padding: clamp(8rem, 15vh, 11rem) var(--m-pad) clamp(3rem, 6vh, 4.5rem) !important;
}
.tp-page-hero::before {
	content: "";
	position: absolute;
	top: -20rem; right: -12rem;
	width: 44rem; height: 44rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 0, 76, .18), transparent 62%);
	filter: blur(70px);
	pointer-events: none;
}
.tp-page-hero-inner {
	position: relative;
	width: min(1320px, 100%);
	margin-inline: auto;
	padding-left: calc(var(--gut-w) + var(--gut-gap));
	border-left: 0;
}
.tp-page-hero .wp-block-post-title {
	margin: 0;
	font: 700 clamp(2.4rem, 7vw, 5.2rem)/.98 "Archivo", Inter, system-ui, sans-serif;
	letter-spacing: -.045em;
	color: var(--p-ink);
}
.tp-page-hero-sub {
	margin: 1.2rem 0 0;
	max-width: 50ch;
	font-size: clamp(.98rem, 1.25vw, 1.08rem);
	line-height: 1.6;
	color: var(--p-muted);
}

/* =====================================================================
   SMOOTH SCROLLING
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
/* The header is fixed, so an anchor would otherwise land with its
   heading tucked underneath it. */
[id] { scroll-margin-top: 6.5rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Short viewports — a 1280x720 laptop, or any window with browser
   chrome eating into it. The hero is sized by content, so without this
   the mark and the cue slide past the fold on exactly the machines most
   likely to be looking at it. */
@media (max-height: 800px) {
	.m-hero { padding-block: clamp(4.5rem, 9vh, 6rem); }
	.m-hero-mark { width: min(82vw, clamp(300px, 50vw, 760px)); }
	.m-hero-tag { margin-top: clamp(1.1rem, 2.4vh, 1.6rem); }
	.m-hero-cta { margin-top: clamp(1.4rem, 3vh, 2rem); }
	.m-hero-corner--tl, .m-hero-corner--tr { top: clamp(4.5rem, 10vh, 6rem); }
}

@media (max-width: 900px) {
	/* The spine collapses: the number moves above the content and the
	   rule goes with it. Keeping a 6rem gutter on a phone would leave
	   the content column too narrow to set a headline in. */
	.m-inner { grid-template-columns: 1fr; }
	.m-gut { margin-bottom: 1.5rem; }
	.m-main { border-left: 0; padding-left: 0; }

	/* With no spine to cross, the bleed is just the page gutter. */
	.m-svc:nth-child(odd) .m-svc-media,

	.m-svc { grid-template-columns: 1fr; gap: 1.5rem; }
	.m-svc-media,
	.m-svc:nth-child(even) .m-svc-media { grid-column: 1 / -1; order: 1; }
	.m-svc-text,
	.m-svc:nth-child(even) .m-svc-text { grid-column: 1 / -1; order: 2; }
	.m-svc:nth-child(even) .m-svc-media { margin-left: 0; margin-right: calc(-1 * var(--m-pad)); }


	.tp-page-hero-inner { padding-left: 0; }
}

@media (max-width: 640px) {
	.m-co-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: .3rem;
		align-items: start;
	}
	.m-co-what {
		grid-column: 2 / -1;
		text-align: left;
		white-space: normal;
		font-size: .82rem;
	}
	.m-co-go { display: none; }
	.m-co-where { display: none; }
	.m-co-what { min-width: 0; }
	.m-hero-corner--tr { display: none; }
	/* The longer tagline does not fit one line beside its rules on a
	   phone: drop the rules, tighten the tracking and let it wrap. */
	.m-hero-tag { max-width: 100%; letter-spacing: .2em; line-height: 1.7; text-align: center; }
	.m-hero-tag::before, .m-hero-tag::after { display: none; }
	.m-place + .m-place,
	.m-legal-block + .m-legal-block { border-left: 0; padding-left: 0; }
	.m-place, .m-legal-block { padding-right: 0; }
	.m-cred { grid-template-columns: 1fr; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.m-hero-blob,
	.m-hero-cue-line::after { animation: none; }
	/* The staggered entrance is motion for its own sake; the content
	   must still be visible, so the animation is removed rather than
	   shortened — `fill-mode: both` would otherwise hold the opening
	   frame's opacity: 0 forever. */
	.m-hero-mark, .m-hero-tag, .m-hero-cta, .m-hero-corner {
		animation: none; opacity: 1; transform: none;
	}
	.m-co-row, .m-co-fill, .m-svc-shot, .m-btn {
		transition-duration: .01ms !important;
	}
}


/* ---------------------------------------------------------------------
   2. KEYBOARD FOCUS

   There was none. Every interactive element on the rewritten sections
   relied on the browser default, which the theme's resets had already
   flattened — so tabbing through the page showed nothing at all.
   --------------------------------------------------------------------- */

.m-btn:focus-visible,
.m-co-row:focus-visible,
.m-hero-cue:focus-visible,
.m-close-facts a:focus-visible,
.m-legal-lines a:focus-visible,
.m-place-tel:focus-visible {
	outline: 2px solid var(--p-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
/* On the photograph the navy ring disappears into the scrim. */
.m-close .m-btn:focus-visible,
.m-close-facts a:focus-visible { outline-color: #fff; }
/* The row already fills with its own photograph on focus; the ring sits
   inside it so it does not straddle the fill's edge. */
.m-co-row:focus-visible { outline-offset: -3px; outline-color: #fff; }

/* ---------------------------------------------------------------------
   3. PRESSED STATE

   Hover told you a control was live; nothing told you it had been hit.
   A single pixel of travel is enough to read as a press.
   --------------------------------------------------------------------- */

.m-btn:active { transform: translateY(1px) scale(.994); transition-duration: .06s; }
.m-co-row.is-link:active .m-co-go { transform: scale(.92); }
.m-hero-cue:active .m-hero-cue-line { background: var(--p-accent); }


/* Measures. Three descriptions had none and ran the full width of their
   column, which on a wide screen is well past a comfortable line. */
.m-svc-desc   { max-width: 42ch; }
.m-cred-desc  { max-width: 58ch; }

.m-place-role { max-width: 26ch; }

/* ---------------------------------------------------------------------
   5. GRAIN

   A fixed, unclickable film of noise over the page. It is the single
   cheapest thing that separates a screen that was designed from one
   that was generated: flat vector colour reads as digital, and a few
   percent of tooth reads as printed. z-index 700 places it under the
   theme's own scale — mobile nav 800, header 900, progress bar 1000 —
   so it films the content and never the chrome.
   --------------------------------------------------------------------- */

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 700;
	pointer-events: none;
	/* The theme already declares a --grain token and then never uses it
	   anywhere — and its version is the better one: it runs the
	   turbulence through feColorMatrix saturate=0, so the noise is grey.
	   A raw feTurbulence produces independent RGB channels, which is
	   coloured static; at this opacity it reads as a faint rainbow cast
	   rather than as tooth. */
	opacity: .55;
	background-image: var(--grain);
	background-size: 160px 160px;
}

/* ---------------------------------------------------------------------
   6. OPTICAL SPACING

   Equal top and bottom padding measures equal and looks top-heavy: the
   heading at the top of a section occupies its space visually, the last
   line at the bottom does not. The foot gets the difference.
   --------------------------------------------------------------------- */

.m-sec { padding: clamp(3.75rem, 7vw, 6.25rem) 0 clamp(4.25rem, 8vw, 7.25rem); }

/* ---------------------------------------------------------------------
   7. REDUCED MOTION
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tp-js .m-co-row.tp-anim.in-view,
	.tp-js .m-svc.tp-anim.in-view,
	.tp-js .m-place.tp-anim.in-view,
	.tp-js .m-cred.tp-anim.in-view,
	.tp-js .m-prin.tp-anim.in-view { animation-delay: 0s; }
	.m-btn:active { transform: none; }
}

/* ---------------------------------------------------------------------
   8. THREE INTERACTIONS THAT WERE DEFAULTS

   Each of these was doing the obvious thing — a crossfade, a static
   image, an arrow that sat still. None of them were wrong; all three
   were the version you get without deciding anything.
   --------------------------------------------------------------------- */

/* (a) The company row's photograph wipes in from the left edge instead
   of crossfading. A fade says "another state"; a wipe says the row is
   being filled, which is what the interaction is actually for — and it
   runs in the reading direction, so it arrives under the name first. */
.m-co-fill {
	opacity: 1;
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
}
.m-co-row:hover .m-co-fill,
.m-co-row:focus-visible .m-co-fill { clip-path: inset(0 0 0 0); }

/* (b) The service photographs settle rather than appear. They enter
   fractionally over-scaled and ease back as the spread arrives, timed
   off the same `--i` as the stagger so the picture and the block it
   belongs to move as one thing. The hover scale keeps its own, much
   shorter duration — otherwise pointing at a card would start a
   second-and-a-half-long zoom. */
.tp-js .m-svc.tp-anim .m-svc-shot { transform: scale(1.14); }
.tp-js .m-svc.tp-anim.in-view .m-svc-shot {
	transform: scale(1.02);
	transition: transform 1.5s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 80ms + 100ms);
}
.m-svc:hover .m-svc-shot { transform: scale(1.07); transition-duration: .7s; transition-delay: 0s; }

/* (c) The arrow leads. A chevron that stays put while its button lifts
   is the one part of the control that did not react. */
.m-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.m-btn:hover svg { transform: translateX(3px); }
.m-hero-cue:hover .m-hero-cue-line::after { animation-duration: 1.4s; }

@media (prefers-reduced-motion: reduce) {
	.m-co-fill { transition: none; clip-path: inset(0 100% 0 0); }
	.m-co-row:hover .m-co-fill { clip-path: inset(0 0 0 0); }
	.tp-js .m-svc.tp-anim .m-svc-shot,
	.tp-js .m-svc.tp-anim.in-view .m-svc-shot { transform: none; transition: none; }
	.m-btn svg, .m-btn:hover svg { transition: none; transform: none; }
}


/* --- Where one section ends and the next begins --------------------- */

/* Until now they didn't. Every block sat on the same paper, at the same
   measure, separated by nothing but air, and the only marker was a
   .78rem figure in a muted grey you had to go looking for. Read at
   speed the whole page was one continuous column.

   Three marks now open each block, and they meet in the same corner:
   a rule across the full measure, a solid tick sitting on that rule
   over the gutter, and the figure hanging beneath it. With the spine
   already running down the left edge of the content, the rule closes
   the top of that bracket — so a section is a shape, not an interval.

   The space above the rule is two sections' padding and the space below
   it is a single line, which is what makes the rule belong to the block
   it opens rather than float between two. */
.m-sec > .m-inner { border-top: 1px solid var(--p-rule); }

.m-gut::before {
	content: "";
	position: absolute;
	top: -1px; left: 0;
	width: clamp(1.75rem, 4vw, 2.5rem);
	height: 2px;
	background: var(--p-accent);
}
/* Set as a chaptering figure, not as a caption. At .78rem in muted grey
   it was a detail you found after you had already lost your place; at
   this size it is the first thing in the block and it carries from
   across the room. No word beside it — the heading a few centimetres
   to the right already names the section, and the figure's job is
   position, not subject. */
.m-gut-num {
	padding-top: clamp(.8rem, 1.6vw, 1.05rem);
	font-size: clamp(1.1rem, 1.55vw, 1.45rem);
	font-weight: 700;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	color: var(--p-accent);
}

/* Collapsed gutter: the tick still sits on the rule, the figure still
   hangs off it, and the pair now opens the row above the content. */
@media (max-width: 900px) {
	.m-gut { margin-bottom: 1.25rem; }
}

/* The closing band indents its text to clear the numbered spine the
   other pages use. This page has no spine, so the band lines up with
   the page's own left edge instead. */
body:has(.ab) .m-close-inner { padding-left: 0; }
/* Which company in the group provides each service. One line in the
   same mono as the numbers above it — enough to fill the empty half of
   the row with something a client actually wants to know. */
.m-svc-by {
	margin: 1.4rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--p-line);
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .45rem .5rem;
	max-width: 30rem;
}
.m-svc-by span {
	margin-right: .35rem;
	font: 500 .64rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--p-muted);
}
.m-svc-by b {
	padding: .38rem .7rem;
	border: 1px solid var(--p-line-2);
	border-radius: 999px;
	font: 600 .8rem/1 Inter, system-ui, sans-serif;
	color: var(--p-ink);
}

/* =====================================================================
   MOTION LAYER

   Added on top of the finished design without changing any of it. Every
   rule that moves something on its own is gated on .m-motion, which the
   script in sections-modern.php only sets when the visitor has not asked
   for reduced motion — so with that preference on, the site renders
   exactly as it did before this block existed.

   1. The logo is drawn on, not faded in.
   2. The hero follows the pointer, and gives way as you scroll past it.
   3. Section headings rise word by word from behind their own baseline.
   4. Each section's rule is swept by a navy line as the section arrives.
   5. Service photographs are unveiled from the edge they bleed off, and
      drift against the scroll.
   6. Buttons lean toward the pointer; the header steps aside while you
      read and comes back the moment you scroll up.
   ===================================================================== */

/* 1 ------------------------------------------------------------------
   The opening. Two things made the logo "teleport" before: the first
   frame was painted before the web fonts and layout had settled, so
   the mark flashed up fully drawn in the wrong place; then the motion
   class arrived from the footer script and restarted its animation
   from zero somewhere else.

   Now the motion class is set in <head>, before anything paints, and
   the hero is held invisible (.m-pre) until fonts are ready and the
   layout is final. Only then (.m-go) does the sequence run, once, from
   a single start:

     0.00s  the light fields fade up behind
     0.10s  the mark resolves: out of a soft focus, settling from a
            little lower and a little smaller — one continuous move
     0.80s  the rules either side of the tagline draw outward
     0.85s  the tagline, then the button, rise into place
     1.20s  the corner labels and the scroll cue fade in
     2.00s  a single highlight passes across the mark
   ------------------------------------------------------------------- */
/* html-qualified: the scroll-out rule further down sets .m-hero-inner's
   opacity at the same specificity and would otherwise win. */
html.m-pre .m-hero-inner,
html.m-pre .m-hero-mark,
html.m-pre .m-hero-corner,
html.m-pre .m-hero-cue,
html.m-pre .m-hero-aurora { opacity: 0 !important; }

.m-motion .m-hero-mark,
.m-motion .m-hero-tag,
.m-motion .m-hero-cta,
.m-motion .m-hero-corner,
.m-motion .m-hero-tag::before,
.m-motion .m-hero-tag::after { animation: none; }

@keyframes m-logo-in {
	0%   { opacity: 0; transform: translateY(22px) scale(.93); filter: blur(18px); }
	45%  { opacity: 1; }
	70%  { filter: blur(0); }
	100% { opacity: 1; transform: none; filter: none; }
}
@keyframes m-soft-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-grow { from { transform: scaleX(0); } to { transform: none; } }

.m-go .m-hero-aurora { animation: m-fade-in 1.8s ease both; }
.m-go .m-hero-mark {
	animation:
		m-logo-in 1.6s cubic-bezier(.16, 1, .3, 1) .1s both,
		m-sheen 3.2s ease-in-out 2s 1;
}
.m-go .m-hero-tag::before { transform-origin: right; animation: m-grow 1s cubic-bezier(.16, 1, .3, 1) .8s both; }
.m-go .m-hero-tag::after  { transform-origin: left;  animation: m-grow 1s cubic-bezier(.16, 1, .3, 1) .8s both; }
.m-go .m-hero-tag    { animation: m-soft-up .9s cubic-bezier(.16, 1, .3, 1) .85s both; }
.m-go .m-hero-cta    { animation: m-soft-up .9s cubic-bezier(.16, 1, .3, 1) 1s both; }
.m-go .m-hero-corner { animation: m-fade-in 1.2s ease 1.2s both; }
.m-go .m-hero-cue    { animation: m-fade-in 1.2s ease 1.4s both; }
/* 2 ------------------------------------------------------------------ */
.m-motion .m-hero-aurora {
	translate: calc(var(--mx, 0) * 38px) calc(var(--my, 0) * 26px);
	transition: translate 1.4s cubic-bezier(.2, .7, .2, 1);
}
.m-motion .m-hero-mark {
	translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -8px);
	transition: translate 1s cubic-bezier(.2, .7, .2, 1);
}
.m-motion .m-hero-inner {
	opacity: calc(1 - var(--hs, 0) * 1.15);
	translate: 0 calc(var(--hs, 0) * 80px);
	scale: calc(1 - var(--hs, 0) * .05);
	will-change: opacity, translate;
}

/* 3 ------------------------------------------------------------------ */
.m-motion .m-split .m-w {
	display: inline-block;
	overflow: clip;
	vertical-align: top;
	padding: 0 .05em .16em;
	margin: 0 -.05em -.16em;
}
.m-motion .m-split .m-w > span {
	display: inline-block;
	transform: translateY(112%);
	transition: transform 1.05s cubic-bezier(.2, .75, .2, 1);
	transition-delay: calc(var(--wi, 0) * 60ms);
}
.m-motion .m-split.is-on .m-w > span { transform: none; }

/* 4 ------------------------------------------------------------------ */
.m-motion .m-sec > .m-inner { position: relative; }
.m-motion .m-sec > .m-inner::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -1px;
	height: 1px;
	background: var(--p-ink);
	transform: scaleX(0); transform-origin: left;
	pointer-events: none;
}
@keyframes m-scan {
	0%   { transform: scaleX(0); opacity: 1; }
	55%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
.m-motion .m-sec.is-on > .m-inner::before { animation: m-scan 1.9s cubic-bezier(.65, 0, .35, 1) both; }
.m-motion .m-gut::before {
	transform: scaleX(0); transform-origin: left;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1) .2s;
}
.m-motion .m-sec.is-on .m-gut::before { transform: none; }
.m-motion .m-gut-num {
	opacity: 0; translate: 0 10px;
	transition: opacity .7s ease .35s, translate .8s cubic-bezier(.2, .7, .2, 1) .35s;
}
.m-motion .m-sec.is-on .m-gut-num { opacity: 1; translate: 0 0; }

/* 5 ------------------------------------------------------------------ */
.m-motion .m-svc-media {
	clip-path: inset(0 100% 0 0 round 6px);
	transition: clip-path 1.5s cubic-bezier(.77, 0, .18, 1);
}
.m-motion .m-svc:nth-child(even) .m-svc-media { clip-path: inset(0 0 0 100% round 6px); }
/* Observed on the row, not the photograph: a fully clipped element has
   no visible area, so an observer on it never fires. */
.m-motion .m-svc.is-on:nth-child(n) .m-svc-media { clip-path: inset(0 0 0 0 round 6px); }
/* Taller than their frame so the drift never shows an edge. */
.m-motion .m-svc-shot { inset: -9% 0; translate: 0 var(--py, 0px); }
.m-motion .m-close-shot { inset: -14% 0; translate: 0 var(--py, 0px); }

/* 6 ------------------------------------------------------------------ */
.m-btn,
header.wp-block-template-part .tp-header-btn {
	transition: translate .4s cubic-bezier(.2, .7, .2, 1), transform .3s ease, box-shadow .35s ease, background-color .25s ease, color .25s ease;
}
header.wp-block-template-part {
	transition: translate .5s cubic-bezier(.2, .7, .2, 1), background-color .35s ease, box-shadow .35s ease;
}
header.wp-block-template-part.m-hide { translate: 0 -110%; }

/* Hover details, independent of the motion preference because they only
   answer the pointer. */
.m-co-name { transition: translate .55s cubic-bezier(.2, .7, .2, 1); }
.m-co-row:hover .m-co-name { translate: 12px 0; }
.m-cred-name { transition: translate .55s cubic-bezier(.2, .7, .2, 1); }
.m-cred:hover .m-cred-name { translate: 8px 0; }
.m-place { position: relative; }
.m-place::after {
	content: "";
	position: absolute; left: 0; right: 0; top: -1px;
	height: 2px;
	background: var(--p-ink);
	transform: scaleX(0); transform-origin: left;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}
.m-place:hover::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.m-co-name, .m-cred-name, .m-place::after { transition: none; }
}

/* =====================================================================
   ĮMONĖS PAGE

   Eight companies, grouped by the three things the group does. An index
   strip on top says how many companies sit under each direction; below
   it every direction gets its own heading and an asymmetric grid of
   photo-led cards - 7 + 5, then 5 + 7, with a full-width card where a
   direction has one company left over.
   ===================================================================== */

.cx { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cx-wrap { width: min(1320px, 100% - var(--m-pad) * 2); margin-inline: auto; }

/* This page's content runs the full container width, so its heading
   drops the left spine indent the other inner pages use and lines up
   with the cards below it. */
body .tp-page-hero--imones .tp-page-hero-inner {
	width: min(1320px, 100%); max-width: 1320px;
	margin-inline: auto; padding-left: 0;
}
/* Index strip: ruled columns, not boxes. */
.cx-index {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--p-rule); border-bottom: 1px solid var(--p-line);
}
.cx-ix {
	position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .45rem;
	align-items: baseline;
	padding: clamp(1.2rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
	color: var(--p-ink); text-decoration: none;
	transition: background-color .35s ease;
}
.cx-ix + .cx-ix { border-left: 1px solid var(--p-line); }
.cx-ix:first-child { padding-left: 0; }
.cx-ix:hover { background: var(--p-raised); }
.cx-ix:first-child:hover { box-shadow: -1.25rem 0 0 var(--p-raised); }
.cx-ix-n {
	font: 500 .72rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .12em; color: var(--p-muted);
}
.cx-ix-name {
	font: 700 clamp(1.25rem, 2vw, 1.7rem)/1.1 "Archivo", Inter, sans-serif;
	letter-spacing: -.035em;
}
.cx-ix-list {
	grid-column: 2 / 3;
	font-size: .9rem; line-height: 1.5; color: var(--p-muted);
}
.cx-ix-go {
	grid-row: 1; grid-column: 3;
	display: grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	border: 1px solid var(--p-line-2);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cx-ix-go svg { width: .9rem; height: .9rem; rotate: 90deg; }
.cx-ix:hover .cx-ix-go { background: var(--p-ink); border-color: var(--p-ink); color: #fff; }

/* One direction */
.cx-group { padding-top: clamp(4rem, 8vw, 7rem); scroll-margin-top: 5rem; }
.cx-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem);
	align-items: end; column-gap: clamp(1rem, 2vw, 1.75rem);
	padding-bottom: clamp(1.2rem, 2vw, 1.75rem);
	margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
	border-bottom: 1px solid var(--p-line);
}
.cx-head-n {
	align-self: start; padding-top: .55rem;
	font: 500 .74rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .14em; color: var(--p-muted);
}
.cx-head-t {
	margin: 0;
	font: 700 clamp(2.3rem, 5.4vw, 4.4rem)/.98 "Archivo", Inter, sans-serif;
	letter-spacing: -.05em; color: var(--p-ink);
}
.cx-head-d { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--p-muted); text-align: right; text-wrap: balance; }

.cx-grid {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* Card */
.cx-card {
	grid-column: span var(--span, 6);
	display: flex; flex-direction: column;
	border-radius: 22px; overflow: hidden;
	background: var(--p-raised);
	box-shadow: 0 0 0 1px var(--p-line), 0 24px 50px -34px rgba(0, 0, 76, .35);
	scroll-margin-top: 6rem;
	transition: box-shadow .5s ease, translate .5s cubic-bezier(.2, .7, .2, 1);
}
.cx-card:hover { translate: 0 -4px; box-shadow: 0 0 0 1px var(--p-line-2), 0 34px 60px -30px rgba(0, 0, 76, .42); }
/* Arriving from a link elsewhere on the site: mark the card briefly. */
.cx-card:target { box-shadow: 0 0 0 2px var(--p-ink), 0 34px 60px -30px rgba(0, 0, 76, .42); }

.cx-media {
	position: relative; margin: 0; overflow: hidden;
	height: clamp(15rem, 27vw, 24rem);
	background: var(--p-sunk, #EDE9E2);
}
.cx-media > img:first-child {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: scale 1.4s cubic-bezier(.2, .7, .2, 1);
}
.cx-card:hover .cx-media > img:first-child { scale: 1.045; }
/* The scrim exists only to carry the white logotype. */
.cx-media.has-brand::after {
	content: ""; position: absolute; inset: 40% 0 0;
	background: linear-gradient(to top, rgba(0, 0, 40, .72), rgba(0, 0, 40, 0));
	pointer-events: none;
}
.cx-brand {
	position: absolute; z-index: 1; left: clamp(1.1rem, 2vw, 1.6rem); bottom: clamp(1rem, 1.8vw, 1.5rem);
	height: clamp(2rem, 3.1vw, 2.9rem); width: auto;
}
.cx-role {
	position: absolute; z-index: 1; left: clamp(.9rem, 1.6vw, 1.25rem); top: clamp(.9rem, 1.6vw, 1.25rem);
	padding: .5rem .75rem; border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font: 600 .66rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink);
}

.cx-body {
	flex: 1; display: flex; flex-direction: column;
	padding: clamp(1.4rem, 2.4vw, 2.1rem);
}
.cx-name {
	margin: 0;
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	font: 700 clamp(1.7rem, 2.9vw, 2.6rem)/1.04 "Archivo", Inter, sans-serif;
	letter-spacing: -.045em; color: var(--p-ink);
}
.cx-desc {
	margin: .75rem 0 0; max-width: 46ch;
	font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.6;
	color: var(--p-ink-2); text-wrap: pretty;
}
.cx-facts { margin: 1.4rem 0 0; border-top: 1px solid var(--p-line); }
.cx-facts > div {
	display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem;
	padding: .68rem 0; border-bottom: 1px solid var(--p-line);
}
.cx-facts dt {
	font: 500 .64rem/1.6 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted);
}
.cx-facts dd { margin: 0; font-size: .97rem; line-height: 1.45; color: var(--p-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cx-facts a {
	color: var(--p-ink); text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .3s ease;
}
.cx-facts a:hover { background-size: 100% 1px; }

/* Pinned to the bottom so the links of two cards in a row line up
   whatever the length of the text above them. */
.cx-foot {
	margin-top: auto; padding-top: 1.4rem;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem;
}
.cx-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.cx-tags li {
	padding: .42rem .75rem;
	border: 1px solid var(--p-line-2); border-radius: 999px;
	font: 600 .78rem/1 Inter, system-ui, sans-serif; color: var(--p-ink);
}
.cx-link {
	display: inline-flex; align-items: center; gap: .55rem;
	margin-left: auto; padding: .7rem 1.05rem .7rem 1.15rem; border-radius: 999px;
	background: var(--p-ink); color: #fff; text-decoration: none;
	font: 600 .9rem/1 Inter, system-ui, sans-serif;
	transition: background-color .3s ease, translate .2s ease;
}
.cx-link svg { width: .95rem; height: .95rem; rotate: -45deg; transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
.cx-link:hover { background: var(--p-accent-2, #000033); }
.cx-link:hover svg { translate: 2px -2px; }
.cx-link:active { translate: 0 1px; }

/* Full-width card: photograph beside the text. */
.cx-card--wide { flex-direction: row; }
.cx-card--wide .cx-media { flex: 0 0 56%; height: auto; min-height: clamp(20rem, 32vw, 28rem); }
.cx-card--wide.cx-card--flip .cx-media { order: 2; }
.cx-card--wide .cx-body { justify-content: center; padding: clamp(1.6rem, 3.4vw, 3rem); }
.cx-card--wide .cx-foot { margin-top: 0; }

/* Panorama card: a wide architectural render shown whole across the
   top, with the text and the specification side by side beneath it. */
.cx-card--pano .cx-media { height: auto; aspect-ratio: 3.1 / 1; }
.cx-card--pano .cx-media > img:first-child { object-position: center bottom; }
.cx-card--pano .cx-body {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(2rem, 5vw, 4.5rem); align-content: start;
	padding: clamp(1.6rem, 3vw, 2.6rem);
}
.cx-card--pano .cx-name, .cx-card--pano .cx-desc, .cx-card--pano .cx-foot { grid-column: 1; }
.cx-card--pano .cx-facts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.cx-card--pano .cx-foot { align-self: end; }
.cx-card--pano .cx-link { margin-left: 0; }
@media (max-width: 900px) {
	.cx-card--pano .cx-media { aspect-ratio: 16 / 9; height: auto; }
	.cx-card--pano .cx-body { display: flex; }
	.cx-card--pano .cx-facts { margin-top: 1.4rem; }
}
@media (max-width: 900px) {
	.cx-index { grid-template-columns: 1fr; }
	.cx-ix, .cx-ix:first-child { padding-left: 0; padding-right: 0; }
	.cx-ix + .cx-ix { border-left: 0; border-top: 1px solid var(--p-line); }
	.cx-ix:first-child:hover { box-shadow: none; }
	.cx-head { grid-template-columns: auto minmax(0, 1fr); }
	.cx-head-d { grid-column: 2; margin-top: .7rem; text-align: left; }
	.cx-card { grid-column: 1 / -1; }
	.cx-card--wide { flex-direction: column; }
	.cx-card--wide .cx-media { flex: none; min-height: 0; order: 0 !important; }
	.cx-media, .cx-card--wide .cx-media { height: clamp(13rem, 56vw, 22rem); }
	.cx-card--wide .cx-foot { margin-top: auto; }
}
@media (max-width: 480px) {
	.cx-facts > div { grid-template-columns: 1fr; gap: .15rem; }
	.cx-card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.cx-card, .cx-media > img:first-child, .cx-link, .cx-link svg, .cx-ix, .cx-ix-go { transition: none; }
	.cx-card:hover { translate: none; }
}

/* =====================================================================
   PASLAUGOS PAGE

   Built from the same parts as the companies page so the two read as
   one family: the ruled index strip on top, then one large card per
   service - photograph with the title set on it, what the service
   covers beside the figures and the companies that provide it, and a
   navy contact bar closing each card.
   ===================================================================== */

/* Site-wide, not specific to this page: the theme sets
   body { overflow-x: hidden }, which turns <body> into a scroll
   container that never scrolls - and silently disables every
   position: sticky inside it (the header, the growing photograph on the
   About page). clip blocks sideways overflow the same way without
   creating one. */
body { overflow-x: clip !important; }

body .tp-page-hero--services .tp-page-hero-inner {
	width: min(1320px, 100%); max-width: 1320px;
	margin-inline: auto; padding-left: 0;
}

.cx-index--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-index--4 .cx-ix-name { font-size: clamp(1.1rem, 1.55vw, 1.4rem); }

.sv-list { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); padding-top: clamp(3rem, 6vw, 5rem); }

.sv-card {
	border-radius: 22px; overflow: hidden;
	background: var(--p-raised);
	box-shadow: 0 0 0 1px var(--p-line), 0 24px 50px -34px rgba(0, 0, 76, .35);
	scroll-margin-top: 6rem;
}
.sv-card:target { box-shadow: 0 0 0 2px var(--p-ink), 0 34px 60px -30px rgba(0, 0, 76, .42); }

/* Photograph with the service's name set on it. */
.sv-top {
	position: relative; overflow: hidden;
	height: clamp(15rem, 31vw, 26rem);
	background: var(--p-ink);
}
.sv-top > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: scale 1.6s cubic-bezier(.2, .7, .2, 1);
}
.sv-card:hover .sv-top > img { scale: 1.035; }
.sv-top::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 40, .82), rgba(0, 0, 40, .18) 55%, rgba(0, 0, 40, .1));
	pointer-events: none;
}
.sv-title {
	position: absolute; z-index: 1;
	left: clamp(1.4rem, 3.2vw, 2.8rem); right: clamp(1.4rem, 3.2vw, 2.8rem); bottom: clamp(1.3rem, 2.8vw, 2.4rem);
	margin: 0;
	font: 700 clamp(2rem, 5.2vw, 4.2rem)/1 "Archivo", Inter, sans-serif;
	letter-spacing: -.05em; color: #fff; text-wrap: balance;
}

.sv-body {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: clamp(1.6rem, 3.2vw, 2.8rem);
}
.sv-lead {
	margin: 0; max-width: 58ch;
	font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.62;
	color: var(--p-ink-2); text-wrap: pretty;
}
.sv-sub {
	margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 .5rem;
	font: 500 .66rem/1.3 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted);
}

.sv-incl {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.25rem);
	border-top: 1px solid var(--p-line);
}
.sv-incl li {
	display: flex; align-items: flex-start; gap: .7rem;
	padding: .78rem 0; border-bottom: 1px solid var(--p-line);
	font-size: .98rem; line-height: 1.4; color: var(--p-ink);
}
.sv-incl svg {
	flex: none; width: 1.3rem; height: 1.3rem; padding: .22rem; margin-top: .03rem;
	border-radius: 50%; background: var(--p-ink); color: #fff;
}

/* Figures: the few hard facts, set large. */
.sv-figs {
	margin: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: .6rem;
}
.sv-figs > div {
	padding: 1rem 1.1rem 1.05rem;
	border-radius: 14px;
	background: var(--p-paper); box-shadow: inset 0 0 0 1px var(--p-line);
}
.sv-figs dt {
	font: 700 clamp(1.3rem, 2vw, 1.75rem)/1.05 "Archivo", Inter, sans-serif;
	letter-spacing: -.035em; color: var(--p-ink); font-variant-numeric: tabular-nums;
}
.sv-figs dd { margin: .45rem 0 0; font-size: .82rem; line-height: 1.35; color: var(--p-muted); }

.sv-by { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
.sv-by a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .2rem;
	align-items: center;
	padding: .8rem 0; border-bottom: 1px solid var(--p-line);
	color: var(--p-ink); text-decoration: none;
}
.sv-by b { font: 600 1.02rem/1.2 Inter, system-ui, sans-serif; }
.sv-by em {
	font: 500 .6rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .12em; font-style: normal; color: var(--p-muted); vertical-align: middle;
}
.sv-by a > span { grid-column: 1; font-size: .86rem; color: var(--p-muted); }
.sv-by svg {
	grid-column: 2; grid-row: 1 / span 2;
	width: 1rem; height: 1rem; opacity: .35;
	transition: opacity .25s ease, translate .3s cubic-bezier(.2, .7, .2, 1);
}
.sv-by a:hover svg { opacity: 1; translate: 4px 0; }

/* The one saturated band on each card. */
.sv-contact {
	display: flex; flex-wrap: wrap; align-items: center; gap: .7rem clamp(1rem, 2.4vw, 2rem);
	padding: 1.05rem clamp(1.6rem, 3.2vw, 2.8rem);
	background: var(--p-ink); color: #fff;
}
.sv-contact-label {
	font: 500 .64rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase; color: var(--p-on-ink);
}
.sv-contact-item {
	display: inline-flex; align-items: center; gap: .55rem;
	font: 600 .98rem/1.2 Inter, system-ui, sans-serif; color: #fff; text-decoration: none;
	overflow-wrap: anywhere;
}
.sv-contact-item svg { flex: none; width: 1rem; height: 1rem; color: var(--p-on-ink); }
a.sv-contact-item { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
a.sv-contact-item:hover { background-size: 100% 1px; }
.sv-cta {
	display: inline-flex; align-items: center; gap: .55rem;
	margin-left: auto; padding: .72rem 1.05rem .72rem 1.2rem; border-radius: 999px;
	background: #fff; color: var(--p-ink); text-decoration: none;
	font: 600 .9rem/1 Inter, system-ui, sans-serif;
	transition: background-color .3s ease, translate .2s ease;
}
.sv-cta svg { width: .95rem; height: .95rem; transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
.sv-cta:hover { background: var(--p-paper); }
.sv-cta:hover svg { translate: 3px 0; }
.sv-cta:active { translate: 0 1px; }

@media (max-width: 1100px) {
	.cx-index--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cx-index--4 .cx-ix:nth-child(n + 3) { border-top: 1px solid var(--p-line); }
	.cx-index--4 .cx-ix:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
	.cx-index--4 { grid-template-columns: 1fr; }
	.sv-body { grid-template-columns: 1fr; }
	.sv-side .sv-figs { margin-top: 0; }
}
@media (max-width: 560px) {
	.sv-incl { grid-template-columns: 1fr; }
	.sv-card { border-radius: 16px; }
	.sv-cta { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.sv-top > img, .sv-by svg, .sv-cta, .sv-cta svg, a.sv-contact-item { transition: none; }
}

/* =====================================================================
   APIE MUS — site frame, one modern device per section
   ===================================================================== */

/* 01 — the statement lights up word by word as it scrolls through */
.sx-say {
	margin: 0; max-width: 26ch;
	font: 700 clamp(2rem, 4.6vw, 3.9rem)/1.12 "Archivo", Inter, sans-serif;
	letter-spacing: -.04em; color: var(--p-ink);
}
.sx-say span { color: rgba(0, 0, 76, .16); transition: color .35s ease; }
.sx-say span.on, .sx-say.is-static span, html:not(.tp-js) .sx-say span { color: var(--p-ink); }
.sx-wide { margin: clamp(3rem, 6vw, 4.5rem) 0 0; overflow: hidden; border-radius: 6px; aspect-ratio: 21 / 9; }
.sx-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-cols { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); }
.sx-cols p { margin: .8rem 0 0; font-size: 1.04rem; line-height: 1.72; color: var(--p-ink-2); }
.sx-k {
	font: 500 .7rem/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted);
}

/* 02 — cards that stack as you scroll */
.sx-stack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.sx-card {
	position: sticky; top: calc(6.5rem + var(--i) * 1.1rem);
	min-height: clamp(15rem, 34vh, 20rem);
	display: flex; flex-direction: column;
	padding: clamp(1.8rem, 4vw, 3rem);
	border-radius: 6px; background: var(--p-raised);
	border: 1px solid var(--p-line);
	box-shadow: 0 -18px 40px -30px rgba(0, 0, 76, .35);
}
.sx-card--ink { background: var(--p-ink); border-color: var(--p-ink); color: #fff; }
.sx-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 2rem; }
.sx-card--ink .sx-k { color: var(--p-on-ink); }
.sx-card-ico {
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	border: 1px solid var(--p-line-2); color: var(--p-ink);
}
.sx-card--ink .sx-card-ico { border-color: rgba(255, 255, 255, .3); color: #fff; }
.sx-card-ico svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.7; }
.sx-card h3 {
	margin: 0; font: 700 clamp(1.7rem, 3.4vw, 2.8rem)/1.05 "Archivo", Inter, sans-serif;
	letter-spacing: -.04em; color: var(--p-ink);
}
.sx-card--ink h3 { color: #fff; }
.sx-card p { margin: .9rem 0 0; max-width: 52ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--p-muted); }
.sx-card--ink p { color: rgba(255, 255, 255, .8); }

/* 03 — a slowly running strip of the companies */
.sx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.sx-head .m-title { margin-bottom: 0; }
.sx-marquee {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	overflow: hidden;
	-webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.sx-track { display: flex; gap: 1.25rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: sx-run 60s linear infinite; }
.sx-marquee:hover .sx-track, .sx-marquee:focus-within .sx-track { animation-play-state: paused; }
@keyframes sx-run { to { transform: translateX(calc(-50% - .625rem)); } }
.sx-track a {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end;
	width: clamp(16rem, 24vw, 22rem); aspect-ratio: 4 / 5;
	border-radius: 6px; color: #fff; text-decoration: none; background: var(--p-ink);
}
.sx-track img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1s cubic-bezier(.2, .7, .2, 1); }
.sx-track a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 40, .85), rgba(0, 0, 40, .05) 55%); }
.sx-track a:hover img { scale: 1.06; }
.sx-track a span { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem; }
.sx-track small { font: 500 .64rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--p-on-ink); }
.sx-track b { font: 700 1.5rem/1.1 "Archivo", Inter, sans-serif; letter-spacing: -.03em; }

/* 04 — team */
.sx-team { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.sx-team li { display: flex; flex-direction: column; padding: 1.5rem; border-top: 1px solid var(--p-line-2); }
.sx-av {
	display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1.4rem;
	border-radius: 50%; background: var(--p-ink); color: #fff;
	font: 700 1.1rem/1 "Archivo", Inter, sans-serif;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.sx-team li:hover .sx-av { transform: scale(1.08); }
.sx-team b { font: 700 1.2rem/1.25 "Archivo", Inter, sans-serif; letter-spacing: -.02em; color: var(--p-ink); }
.sx-team span:last-child { margin-top: .35rem; font-size: .95rem; color: var(--p-muted); }

@media (max-width: 900px) {
	.sx-cols { grid-template-columns: 1fr; }
	.sx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-wide { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
	.sx-team { grid-template-columns: 1fr; }
	.sx-card { top: calc(5.5rem + var(--i) * .8rem); }
}
@media (prefers-reduced-motion: reduce) {
	.sx-track { animation: none; }
	.sx-marquee { overflow-x: auto; }
	.sx-say span { transition: none; }
}

/* --- About: fixes after review -------------------------------------- */
/* One sentence, not a wall: the statement is now the section's lead. */
.sx-say { max-width: 30ch; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.2; }

/* Mission as one band; values as a compact 2×2, no empty card middles. */
.sx-mission {
	display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline;
	padding: clamp(1.8rem, 4vw, 2.75rem);
	border-radius: 6px; background: var(--p-ink); color: #fff;
}
.sx-mission .sx-k { color: var(--p-on-ink); }
.sx-mission p {
	margin: 0; max-width: 36ch;
	font: 600 clamp(1.3rem, 2.4vw, 1.95rem)/1.3 "Archivo", Inter, sans-serif;
	letter-spacing: -.03em; color: #fff; text-wrap: balance;
}
.sx-vals {
	margin: 1rem 0 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.sx-vals li {
	display: flex; gap: 1.2rem; align-items: flex-start;
	padding: clamp(1.4rem, 2.6vw, 1.9rem);
	border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-raised);
	transition: border-color .3s ease;
}
.sx-vals li:hover { border-color: var(--p-line-2); }
.sx-vico {
	flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
	border-radius: 50%; background: var(--p-ink); color: #fff;
}
.sx-vico svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.8; }
.sx-vals h3 { margin: .15rem 0 0; font: 700 1.3rem/1.2 "Archivo", Inter, sans-serif; letter-spacing: -.025em; color: var(--p-ink); }
.sx-vals p { margin: .45rem 0 0; font-size: .98rem; line-height: 1.6; color: var(--p-muted); }

/* Team: framed, so it no longer floats in empty paper. */
.sx-team li { border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-raised); }

@media (max-width: 700px) {
	.sx-mission { grid-template-columns: 1fr; gap: .8rem; }
	.sx-vals { grid-template-columns: 1fr; }
}

/* --- About: stacking cards, compact -------------------------------- */
.sx-say { max-width: 28ch; }
.sx-note {
	margin: 1.4rem 0 0; max-width: 60ch;
	font-size: 1.05rem; line-height: 1.65; color: var(--p-muted);
}
.sx-card {
	display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto;
	align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 0;
	padding: clamp(1.8rem, 3.6vw, 2.6rem) clamp(1.5rem, 3.6vw, 2.8rem);
	top: calc(6.5rem + var(--i) * 1.4rem);
	border-radius: 14px;
	box-shadow: 0 -10px 30px -18px rgba(0, 0, 76, .28);
}
.sx-num {
	font: 700 clamp(2.4rem, 4vw, 3.4rem)/1 "Archivo", Inter, sans-serif;
	letter-spacing: -.05em; color: rgba(0, 0, 76, .16);
}
.sx-card--ink .sx-num { color: rgba(255, 255, 255, .25); }
.sx-card-main .sx-k { display: block; margin-bottom: .55rem; }
.sx-card h3 { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
.sx-card p { margin-top: .5rem; font-size: 1.02rem; }
.sx-card-top { display: none; }
.sx-card-ico { width: 3.4rem; height: 3.4rem; }
.sx-card:not(.sx-card--ink) .sx-card-ico { background: var(--p-ink); border-color: var(--p-ink); color: #fff; }
@media (max-width: 640px) {
	.sx-card { grid-template-columns: minmax(0, 1fr) auto; }
	.sx-num { display: none; }
}
.sx-card--ink .sx-num { visibility: hidden; }

/* =====================================================================
   APIE MUS — Apple-style (stacking cards use the .sx-card rules above)
   ===================================================================== */

.ap { background: var(--p-paper); color: var(--p-ink); text-align: center; }
.ap-wrap { width: min(1200px, 100% - var(--m-pad) * 2); margin-inline: auto; }
.ap-sec { padding: clamp(6rem, 14vw, 11rem) var(--m-pad) 0; }
.ap-sec--tight { padding-top: clamp(4rem, 8vw, 6rem); }
.ap > .ap-sec:last-child { padding-bottom: clamp(6rem, 12vw, 9rem); }

.ap-eyebrow { margin: 0 0 1.4rem; font: 600 1.05rem/1 Inter, system-ui, sans-serif; color: var(--p-muted); }
.ap-h1 {
	/* Two even lines on a desktop instead of four stacked words: the
	   size follows the viewport so the longer line always fits, and on
	   a phone the forced break is dropped and the lines are balanced. */
	margin: 0 auto; max-width: 100%; text-wrap: balance;
	font: 700 clamp(2.1rem, 5.3vw, 5rem)/1.04 "Archivo", Inter, sans-serif;
	letter-spacing: -.045em; color: var(--p-ink);
}
/* The statement, then its continuation a step quieter - the same
   two-tone the lit sentence further down the page uses. */
.ap-h1-soft { color: rgba(0, 0, 76, .42); }
@media (max-width: 760px) { .ap-h1-br { display: none; } }
/* The label wears the same mono caps and flanking rules as the front
   page's tagline, so the two heroes read as one family. */
.ap-hero .ap-eyebrow {
	display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 2vw, 1.5rem);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	font: 500 clamp(.68rem, .95vw, .78rem)/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .3em; text-transform: uppercase;
}
.ap-hero .ap-eyebrow::before,
.ap-hero .ap-eyebrow::after { content: ""; height: 1px; width: clamp(1.5rem, 5vw, 4rem); background: var(--p-line-2); }
.ap-hero .ap-sub { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 44ch; text-wrap: balance; }
.ap-sub { margin: 1.8rem auto 0; max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--p-muted); }
.ap-h2 {
	margin: 0 0 clamp(3rem, 6vw, 4.5rem);
	font: 700 clamp(2.6rem, 6vw, 5rem)/1 "Archivo", Inter, sans-serif;
	letter-spacing: -.05em; color: var(--p-ink);
}
.ap-center { margin: 2.5rem 0 0; }
.ap-link { display: inline-flex; align-items: center; gap: .5rem; font: 600 1.1rem/1 Inter, system-ui, sans-serif; color: var(--p-ink); text-decoration: none; }
.ap-link svg { width: 1.1rem; height: 1.1rem; transition: translate .3s ease; }
.ap-link:hover svg { translate: 4px 0; }

@keyframes ap-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.tp-js .ap-in { animation: ap-up 1.1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 140ms + 120ms); }

/* Hero */
.ap-hero {
	padding: clamp(6rem, 16vh, 10rem) var(--m-pad) clamp(4rem, 9vh, 6rem);
	/* A barely-there lift behind the heading so the opening is not one
	   flat sheet of paper. */
	background: radial-gradient(60% 70% at 50% 45%, var(--p-raised), transparent 70%);
}

/* Growing photograph: 220vh of scroll, the frame sticks and opens up */
.ap-grow { position: relative; height: 220vh; }
.ap-grow-stick { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.ap-grow-frame {
	--g: 0;
	position: relative; overflow: hidden;
	width: calc(62% + 38% * var(--g));
	height: calc(58% + 42% * var(--g));
	border-radius: calc(28px * (1 - var(--g)));
}
.ap-grow-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: calc(1.15 - .15 * var(--g)); }
.ap-grow-frame::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(0, 0, 40, calc(.15 + .4 * var(--g)));
}
.ap-grow-t {
	position: absolute; inset: 0; z-index: 1; margin: 0;
	display: grid; place-content: center;
	/* One line at every width: the size is tied to the viewport so the
	   whole phrase always fits inside the frame without wrapping. */
	font: 700 clamp(.8rem, 4.2vw, 5rem)/1 "Archivo", Inter, sans-serif;
	white-space: nowrap; text-align: center;
	letter-spacing: -.05em; color: #fff;
	opacity: calc((var(--g) - .45) * 2.2);
	transform: translateY(calc(30px * (1 - var(--g))));
}
.ap-grow { --g: 0; }
.ap-grow .ap-grow-frame { --g: inherit; }

/* Sentence that lights up */
.ap-say {
	margin: 0 auto; max-width: 31ch; text-wrap: balance;
	font: 600 clamp(1.6rem, 3.1vw, 2.9rem)/1.24 "Archivo", Inter, sans-serif;
	letter-spacing: -.032em;
}
/* A short rule to hang the statement from, so it does not float in the
   middle of an empty band. */
.ap-say::before {
	content: ""; display: block; width: 3rem; height: 2px;
	margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
	background: var(--p-ink);
}
.ap-say span { color: rgba(0, 0, 76, .14); transition: color .45s ease; }
.ap-say span.on, .ap-static .ap-say span, html:not(.tp-js) .ap-say span { color: var(--p-ink); }
.ap-say span.soft.on, .ap-static .ap-say span.soft, html:not(.tp-js) .ap-say span.soft { color: var(--p-muted); }

/* Counts */
/* One white panel split by hairlines — the same card language as the
   company cards further down, instead of three loose figures. */
.ap-stats {
	margin: 0 auto; padding: 0; list-style: none; max-width: 1000px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	background: #fff; border: 1px solid rgba(0, 0, 76, .07); border-radius: 10px;
	box-shadow: 0 24px 48px -36px rgba(0, 0, 76, .3);
}
.ap-stats li { padding: clamp(1.75rem, 3.5vw, 2.5rem) 1.5rem; }
.ap-stats li + li { border-left: 1px solid rgba(0, 0, 76, .08); }
.ap-stats b {
	display: block;
	font: 700 clamp(2.6rem, 5vw, 4rem)/1 "Archivo", Inter, sans-serif;
	letter-spacing: -.045em; color: var(--p-ink);
}
.ap-stats span { display: block; margin-top: .7rem; font-size: .95rem; color: var(--p-muted); }

/* Stacking cards: left-aligned inside a centred page */
.ap .sx-stack { text-align: left; }

/* Companies */
.ap-cos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: 1rem; text-align: left; }
.ap-cos li:first-child { grid-column: span 2; grid-row: span 2; }
.ap-cos li:nth-child(6), .ap-cos li:nth-child(7) { grid-column: span 2; }
.ap-cos a {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end; height: 100%;
	border-radius: 22px; color: #fff; text-decoration: none; background: var(--p-ink);
}
.ap-cos img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s cubic-bezier(.2, .7, .2, 1); }
.ap-cos a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 30, .8), rgba(0, 0, 30, 0) 55%); }
.ap-cos a:hover img { scale: 1.06; }
.ap-cos a span { padding: 1.4rem 1.5rem; }
.ap-cos b { display: block; font: 700 1.45rem/1.1 "Archivo", Inter, sans-serif; letter-spacing: -.03em; }
.ap-cos li:first-child b { font-size: clamp(2rem, 3.4vw, 3rem); }
.ap-cos small { display: block; margin-top: .35rem; font-size: .92rem; color: rgba(255, 255, 255, .8); }

/* Team */
.ap-team { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.ap-team li { display: flex; flex-direction: column; align-items: center; }
.ap-av {
	display: grid; place-items: center; width: 8rem; height: 8rem; margin-bottom: 1.3rem; border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #2A2AA0, var(--p-ink) 70%); color: #fff;
	font: 700 2rem/1 "Archivo", Inter, sans-serif; letter-spacing: -.02em;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ap-team li:hover .ap-av { transform: scale(1.05); }
.ap-team b { font: 700 1.2rem/1.25 "Archivo", Inter, sans-serif; letter-spacing: -.02em; }
.ap-team span:last-child { margin-top: .3rem; font-size: 1rem; color: var(--p-muted); }

@media (max-width: 900px) {
	.ap-grow { height: 180vh; }
	.ap-grow-frame { width: calc(86% + 14% * var(--g)); height: calc(52% + 48% * var(--g)); }
	.ap-cos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-cos li:nth-child(6) { grid-column: auto; }
	.ap-cos li:nth-child(7) { grid-column: 1 / -1; }
	.ap-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ap-stats { grid-template-columns: 1fr; }
	.ap-stats li + li { border-left: 0; border-top: 1px solid rgba(0, 0, 76, .08); }
	.ap-cos { grid-template-columns: 1fr; grid-auto-rows: 13rem; }
	.ap-cos li:first-child, .ap-cos li:nth-child(7) { grid-column: auto; grid-row: auto; }
	.ap-av { width: 6rem; height: 6rem; font-size: 1.5rem; }
}
/* Reduced motion: the photograph is simply shown full, the text lit. */
.ap-static .ap-grow { height: auto; }
.ap-static .ap-grow-stick { position: static; height: 80vh; }
.ap-static .ap-grow-frame { --g: 1; }
@media (prefers-reduced-motion: reduce) {
	.tp-js .ap-in { animation: none; }
	.ap-cos img, .ap-av { transition: none; }
}
body:has(.ap) .m-close-inner { padding-left: 0; }
/* --- About: companies as expanding panels -------------------------- */
.ap .ap-cos {
	display: flex; gap: .6rem; height: clamp(26rem, 60vh, 34rem);
	grid-template-columns: none; grid-auto-rows: auto;
}
.ap .ap-cos li, .ap .ap-cos li:first-child, .ap .ap-cos li:nth-child(6), .ap .ap-cos li:nth-child(7) {
	flex: 1 1 0; min-width: 0; grid-column: auto; grid-row: auto;
	transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1);
}
.ap .ap-cos li.is-open { flex-grow: 5; }
.ap .ap-cos a { border-radius: 20px; }
.ap .ap-cos a::before {
	background: linear-gradient(to top, rgba(0, 0, 40, .92) 0%, rgba(0, 0, 40, .55) 45%, rgba(0, 0, 40, .35) 100%);
	transition: background .6s ease;
}
.ap .ap-cos li.is-open a::before { background: linear-gradient(to top, rgba(0, 0, 40, .9) 0%, rgba(0, 0, 40, .25) 50%, rgba(0, 0, 40, 0) 75%); }
.ap .ap-cos img { filter: saturate(.85); transition: scale 1.1s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.ap .ap-cos li.is-open img { filter: none; }
.ap-co-n {
	position: absolute; top: 1.2rem; left: 50%; translate: -50% 0;
	font: 500 .72rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; color: rgba(255, 255, 255, .75);
	transition: left .6s ease, translate .6s ease;
}
.ap .ap-cos li.is-open .ap-co-n { left: 1.5rem; translate: 0 0; }
.ap-co-v {
	position: absolute; left: 50%; bottom: 1.5rem;
	writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
	font: 700 1.25rem/1 "Archivo", Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; color: #fff;
	transition: opacity .3s ease;
}
.ap .ap-cos li.is-open .ap-co-v { opacity: 0; }
.ap .ap-cos .ap-co-body {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.8rem;
	opacity: 0; transform: translateY(14px);
	transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
	white-space: nowrap;
}
.ap .ap-cos li.is-open .ap-co-body { opacity: 1; transform: none; transition-delay: .25s; }
.ap-co-body small { font: 500 .66rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--p-on-ink); }
.ap .ap-cos .ap-co-body b, .ap .ap-cos li:first-child .ap-co-body b { font: 700 clamp(2rem, 3.2vw, 2.8rem)/1.05 "Archivo", Inter, sans-serif; letter-spacing: -.04em; }
.ap-co-body em { font-style: normal; font-size: 1rem; color: rgba(255, 255, 255, .82); }
.ap-co-go {
	position: absolute; right: 1.5rem; bottom: 1.8rem;
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: #fff; color: var(--p-ink);
	opacity: 0; transform: scale(.6);
	transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ap-co-go svg { width: 1.1rem; height: 1.1rem; }
.ap .ap-cos li.is-open .ap-co-go { opacity: 1; transform: none; transition-delay: .3s; }
.ap .ap-cos a:hover img { scale: 1; }

@media (max-width: 800px) {
	.ap .ap-cos { flex-direction: column; height: auto; }
	.ap .ap-cos li, .ap .ap-cos li:first-child, .ap .ap-cos li:nth-child(6), .ap .ap-cos li:nth-child(7) { flex: none; height: 5.5rem; }
	.ap .ap-cos li.is-open { height: 16rem !important; }
	.ap .ap-cos li { transition: height .6s cubic-bezier(.2, .7, .2, 1); }
	.ap-co-v { writing-mode: horizontal-tb; transform: none; left: 3.6rem; bottom: auto; top: 50%; translate: 0 -50%; }
	.ap-co-n { top: 50%; left: 1.3rem; translate: 0 -50%; }
	.ap .ap-cos li.is-open .ap-co-n { top: 1.2rem; translate: 0 0; }
	.ap .ap-cos .ap-co-body { padding: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ap .ap-cos li, .ap-co-body, .ap-co-go, .ap-co-n { transition: none; }
}

/* =====================================================================
   KONTAKTAI
   ===================================================================== */
.kt { background: var(--p-paper); padding: 0 0 clamp(4rem, 8vw, 6rem); }
.kt-wrap { width: min(1320px, 100% - var(--m-pad) * 2); margin-inline: auto; }
.tp-page-hero--contacts { padding-bottom: clamp(2rem, 4vh, 3rem) !important; }

/* Three quick tiles */
.kt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kt-tile {
	position: relative; display: flex; flex-direction: column; gap: .35rem;
	padding: clamp(1.5rem, 2.6vw, 2rem); min-height: 12rem;
	border-radius: 20px; background: #fff; color: var(--p-ink); text-decoration: none;
	border: 1px solid var(--p-line);
	transition: translate .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.kt-tile:hover { translate: 0 -4px; box-shadow: var(--p-shadow); border-color: var(--p-line-2); }
.kt-tile--ink { background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.kt-tile-ico {
	display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: auto;
	border-radius: 50%; background: rgba(0, 0, 76, .07); color: var(--p-ink);
}
.kt-tile--ink .kt-tile-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.kt-tile-ico svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; }
.kt-tile-k { margin-top: 2rem; font-size: .95rem; color: var(--p-muted); }
.kt-tile--ink .kt-tile-k { color: var(--p-on-ink); }
.kt-tile b { font: 700 clamp(1.3rem, 2vw, 1.65rem)/1.15 "Archivo", Inter, sans-serif; letter-spacing: -.03em; }
.kt-go {
	position: absolute; top: clamp(1.5rem, 2.6vw, 2rem); right: clamp(1.5rem, 2.6vw, 2rem);
	display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
	border: 1px solid var(--p-line-2); transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .3s ease, color .3s ease;
}
.kt-tile--ink .kt-go { border-color: rgba(255, 255, 255, .3); }
.kt-go svg { width: 1rem; height: 1rem; }
.kt-tile:hover .kt-go { transform: rotate(-45deg); background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.kt-tile--ink:hover .kt-go { background: #fff; color: var(--p-ink); border-color: #fff; }

/* Form + side */
.kt-main { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.kt-form-card { padding: clamp(1.8rem, 3.6vw, 3rem); border-radius: 20px; background: #fff; border: 1px solid var(--p-line); }
.kt-h { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.5rem)/1.05 "Archivo", Inter, sans-serif; letter-spacing: -.04em; color: var(--p-ink); }
.kt-sub { margin: .6rem 0 2rem; color: var(--p-muted); }
.kt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kt-field { position: relative; }
.kt-field--full { grid-column: 1 / -1; }
.kt-field input, .kt-field textarea {
	width: 100%; padding: 1.55rem 1rem .6rem;
	border: 1px solid var(--p-line-2); border-radius: 12px; background: var(--p-paper);
	font: 400 1rem/1.4 Inter, system-ui, sans-serif; color: var(--p-ink);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kt-field textarea { resize: vertical; min-height: 9rem; }
.kt-field label {
	position: absolute; left: 1rem; top: 1.05rem;
	font: 500 1rem/1 Inter, system-ui, sans-serif; color: var(--p-muted);
	pointer-events: none; transform-origin: left top;
	transition: transform .2s ease, color .2s ease;
}
.kt-field input:focus + label, .kt-field input:not(:placeholder-shown) + label,
.kt-field textarea:focus + label, .kt-field textarea:not(:placeholder-shown) + label { transform: translateY(-.55rem) scale(.78); color: var(--p-ink); }
.kt-field input:focus, .kt-field textarea:focus { outline: none; border-color: var(--p-ink); background: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 76, .08); }
.kt-field input:user-invalid, .kt-field textarea:user-invalid { border-color: #B42318; }
.kt-actions { display: flex; justify-content: flex-end; }
.kt-btn {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: 1rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--p-ink); color: #fff; font: 600 1rem/1 Inter, system-ui, sans-serif;
	transition: background .25s ease, box-shadow .3s ease;
}
.kt-btn svg { width: 1rem; height: 1rem; transition: translate .3s ease; }
.kt-btn:hover { background: var(--p-accent-2); box-shadow: 0 14px 30px -14px rgba(0, 0, 76, .55); }
.kt-btn:hover svg { translate: 3px 0; }
.kt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.kt-note { display: flex; gap: .7rem; margin-bottom: 1.5rem; padding: 1rem 1.1rem; border-radius: 12px; font-size: .95rem; line-height: 1.5; }
.kt-note svg { flex: none; width: 1.2rem; height: 1.2rem; }
.kt-note--ok { background: #E7F4EC; color: #0E5A2E; }
.kt-note--err { background: #FCEBEA; color: #8A1C12; }
.kt-note a { color: inherit; font-weight: 600; }

.kt-side { display: grid; grid-template-rows: minmax(15rem, 1fr) auto; gap: 1rem; }
.kt-map { border-radius: 20px; overflow: hidden; border: 1px solid var(--p-line); background: #E8E4DC; }
.kt-map iframe { display: block; width: 100%; height: 100%; min-height: 15rem; border: 0; filter: grayscale(.3) contrast(1.02); }
.kt-depts { padding: 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--p-line); }
.kt-depts-k { margin: 0 0 .6rem; font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted); }
.kt-dept { display: flex; gap: .9rem; padding: .9rem 0; border-top: 1px solid var(--p-line); }
.kt-dept:first-of-type { border-top: 0; }
.kt-dept-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--p-ink); color: #fff; }
.kt-dept-ico svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.8; }
.kt-dept b { display: block; font: 700 1.02rem/1.25 "Archivo", Inter, sans-serif; letter-spacing: -.015em; color: var(--p-ink); }
.kt-dept small { display: block; margin-top: .15rem; font-size: .85rem; color: var(--p-muted); }
.kt-dept-links { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .4rem; }
.kt-dept-links a { font: 600 .92rem/1.3 Inter, system-ui, sans-serif; color: var(--p-ink); text-decoration: none; }
.kt-dept-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
	.kt-main { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.kt-tiles { grid-template-columns: 1fr; }
	.kt-tile { min-height: 0; }
	.kt-tile-k { margin-top: 1rem; }
	.kt-form { grid-template-columns: 1fr; }
	.kt-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .kt-tile, .kt-go, .kt-field label { transition: none; } }
.tp-page-hero--contacts .tp-page-hero-inner { width: min(1320px, 100%); padding-left: 0; }
.kt { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* Contacts: one warm family instead of pure white on warm paper. */
.kt-tile:not(.kt-tile--ink), .kt-form-card, .kt-depts { background: var(--p-raised); border-color: rgba(0, 0, 76, .08); }
.kt-field input, .kt-field textarea { background: var(--p-paper); border-color: rgba(0, 0, 76, .14); }
.kt-field input:focus, .kt-field textarea:focus { background: var(--p-raised); }
.kt-tile-ico { background: var(--p-paper); }
.kt-map { border-color: rgba(0, 0, 76, .08); }
.kt-map iframe { filter: grayscale(.55) sepia(.12) contrast(.98); }
.kt-tile--ink { background: linear-gradient(145deg, #0A0A5E, var(--p-ink)); }
/* The grey-blue blot in the top-right of every page title band read as a
   stain on the warm paper, not as light. Removed. */
.tp-page-hero::before { display: none !important; }
/* Input fields white, so it is obvious where to type. */
.kt-field input, .kt-field textarea, .kt-field input:focus, .kt-field textarea:focus { background: #fff; }
/* Map in its own light colours, no warm tint. */
.kt-map { background: #fff; }
.kt-map iframe { filter: none; }
/* --- About: companies by direction --------------------------------- */
.ap-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; text-align: left; align-items: start; }
.ap-dir {
	border-radius: 22px; overflow: hidden; background: var(--p-raised);
	border: 1px solid rgba(0, 0, 76, .08);
	transition: translate .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.ap-dir:hover { translate: 0 -5px; box-shadow: 0 30px 60px -34px rgba(0, 0, 76, .4); }
.ap-dir-img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.ap-dir-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.ap-dir:hover .ap-dir-img img { scale: 1.05; }
.ap-dir-count {
	position: absolute; left: 1rem; top: 1rem;
	padding: .5rem .85rem; border-radius: 999px;
	background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font: 600 .82rem/1 Inter, system-ui, sans-serif; color: var(--p-ink);
}
.ap-dir-body { padding: 1.6rem 1.6rem 1rem; }
.ap-dir-body h3 { margin: 0; font: 700 1.65rem/1.1 "Archivo", Inter, sans-serif; letter-spacing: -.035em; color: var(--p-ink); }
.ap-dir-body > p { margin: .55rem 0 1.2rem; font-size: .98rem; line-height: 1.55; color: var(--p-muted); }
.ap-dir-body ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(0, 0, 76, .1); }
.ap-dir-body li + li { border-top: 1px solid rgba(0, 0, 76, .1); }
.ap-dir-body a {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .85rem 0; color: var(--p-ink); text-decoration: none;
}
.ap-dir-body b { display: block; font: 700 1.05rem/1.25 "Archivo", Inter, sans-serif; letter-spacing: -.015em; }
.ap-dir-body small { display: block; margin-top: .15rem; font-size: .86rem; color: var(--p-muted); }
.ap-dir-body a svg {
	flex: none; width: 2.2rem; height: 2.2rem; padding: .55rem; border-radius: 50%;
	border: 1px solid rgba(0, 0, 76, .18); transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s ease;
}
.ap-dir-body a:hover svg { background: var(--p-ink); color: #fff; border-color: var(--p-ink); transform: rotate(-45deg); }
@media (max-width: 1000px) { .ap-dirs { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .ap-dir, .ap-dir-img img, .ap-dir-body a svg { transition: none; } }
/* --- About: company list + live preview ---------------------------- */
.ap-co2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; text-align: left; }
.ap-co2-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(0, 0, 76, .12); }
.ap-co2-list li { border-bottom: 1px solid rgba(0, 0, 76, .12); }
.ap-co2-list a {
	display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
	padding: 1.05rem .2rem; color: var(--p-ink); text-decoration: none;
	transition: padding .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
.ap-co2-thumb { display: none; }
.ap-co2-n { font: 500 .72rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; color: var(--p-muted); }
.ap-co2-t b { display: block; font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 "Archivo", Inter, sans-serif; letter-spacing: -.035em; }
.ap-co2-t small { display: block; margin-top: .25rem; font-size: .92rem; color: var(--p-muted); }
.ap-co2-go {
	display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
	border: 1px solid rgba(0, 0, 76, .18); opacity: 0; transform: translateX(-8px);
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1), background .3s ease, color .3s ease;
}
.ap-co2-go svg { width: 1rem; height: 1rem; }
.ap-co2-list:hover a { opacity: .45; }
.ap-co2-list li.is-on a, .ap-co2-list:hover li.is-on a { opacity: 1; padding-left: .9rem; }
.ap-co2-list li.is-on .ap-co2-go { opacity: 1; transform: none; background: var(--p-ink); color: #fff; border-color: var(--p-ink); }
.ap-co2-list li.is-on .ap-co2-n { color: var(--p-ink); }

.ap-co2-view { position: relative; aspect-ratio: 4 / 4.4; border-radius: 26px; overflow: hidden; background: var(--p-ink); box-shadow: 0 40px 80px -45px rgba(0, 0, 76, .6); }
.ap-co2-view figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.ap-co2-view figure.is-on { opacity: 1; }
.ap-co2-view img { width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.08; transition: scale 1.4s cubic-bezier(.2, .7, .2, 1); }
.ap-co2-view figure.is-on img { scale: 1; }
.ap-co2-view figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 40, .75), rgba(0, 0, 40, 0) 50%); }
.ap-co2-view figcaption { position: absolute; left: 1.8rem; bottom: 1.6rem; z-index: 1; color: #fff; }
.ap-co2-view figcaption small { display: block; margin-bottom: .45rem; font: 500 .68rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--p-on-ink); }
.ap-co2-view figcaption b { font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 "Archivo", Inter, sans-serif; letter-spacing: -.04em; }
.ap-co2-view figcaption em { font: 500 .7rem/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal; letter-spacing: .12em; color: rgba(255, 255, 255, .7); vertical-align: middle; }

@media (max-width: 900px) {
	.ap-co2 { grid-template-columns: 1fr; }
	.ap-co2-view { display: none; }
	.ap-co2-list a { grid-template-columns: 4rem minmax(0, 1fr) auto; }
	.ap-co2-n { display: none; }
	.ap-co2-thumb { display: block; width: 4rem; height: 4rem; border-radius: 12px; object-fit: cover; }
	.ap-co2-go { opacity: 1; transform: none; }
	.ap-co2-list:hover a { opacity: 1; }
	.ap-co2-list li.is-on a { padding-left: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .ap-co2-list a, .ap-co2-go, .ap-co2-view figure, .ap-co2-view img { transition: none; } }
/* --- About: company logo wall -------------------------------------- */
.ap-logos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; text-align: left; }
/* Eight companies: two even rows of four. */
.ap-logos li { grid-column: span 3; }
/* Clean white cards: logo, then one line of text and a small arrow.
   No tinted footer band, no pop-up badge — the card itself responds. */
.ap-logos a {
	position: relative; display: flex; flex-direction: column; height: 100%;
	padding: 1.25rem;
	border-radius: 10px; background: #fff; border: 1px solid rgba(0, 0, 40, .1);
	/* A dark, soft glow so the white cards lift clearly off the warm
	   page background instead of melting into it. */
	box-shadow: 0 2px 4px rgba(0, 0, 30, .06), 0 14px 34px -10px rgba(0, 0, 30, .28);
	color: var(--p-ink); text-decoration: none;
	transition: translate .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.ap-logos a:hover, .ap-logos a:focus-visible {
	translate: 0 -4px; border-color: rgba(0, 0, 40, .16);
	box-shadow: 0 4px 8px rgba(0, 0, 30, .08), 0 26px 50px -14px rgba(0, 0, 30, .42);
}
.ap-logos a:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
/* Logo sits on the same left edge as the text under it, so every card
   reads down one line: 2B mark, role, category. A hairline separates the
   two parts instead of a block of empty white around the logo. */
.ap-logo {
	display: flex; align-items: center; justify-content: center;
	padding: 1.1rem .25rem 1.35rem; margin-bottom: .9rem;
	border-bottom: 1px solid rgba(0, 0, 40, .07);
	background: #fff;
	container-type: inline-size;
}
/* Every logo file is cut at the same height, so one height keeps the 2B
   mark identical in every card. It is as large as the card allows:
   capped so the widest logo (Transpakas, 4.6 : 1) still fits the width. */
.ap-logo-full { display: block; height: min(3.9rem, 100cqw / 4.6); width: auto; max-width: 100%; object-fit: contain; }
.ap-logo-word { font: 800 clamp(1.05rem, 1.6vw, 1.35rem)/1 "Archivo", Inter, sans-serif; letter-spacing: .04em; color: var(--p-ink); }
.ap-logo-meta {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .25rem .25rem 0;
}
.ap-logo-meta b { display: block; font: 600 .92rem/1.3 Inter, system-ui, sans-serif; color: var(--p-ink); }
.ap-logo-meta small { display: block; margin-top: .2rem; font-size: .82rem; color: var(--p-muted); }
.ap-logo-go {
	flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px;
	color: var(--p-ink); background: rgba(0, 0, 76, .05);
	transition: background .3s ease, color .3s ease;
}
.ap-logo-go svg { width: .85rem; height: .85rem; transition: translate .3s ease; }
.ap-logos a:hover .ap-logo-go { background: var(--p-ink); color: #fff; }
.ap-logos a:hover .ap-logo-go svg { translate: 2px 0; }
@media (max-width: 1000px) { .ap-logos li { grid-column: span 6; } }
@media (max-width: 560px) { .ap-logos li { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ap-logos a, .ap-logo, .ap-logo-go, .ap-logo-go svg { transition: none; } }
.ap-logo-word--solo { font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: .02em; text-align: center; line-height: 1.05; }
/* --- Closing band, light version (client: "labiau baltai") --------- */
/* The closing band as the bridge between the paper and the footer. It
   used to be a pale strip with a hard edge against the navy footer -
   two colours meeting on a line. Now the photograph rises out of the
   paper at the top and dissolves into the footer at the bottom, so the
   page deepens in one continuous move instead of stepping from light
   to dark. */
.m-close {
	min-height: clamp(27rem, 58vh, 36rem);
	align-items: flex-end;
	padding: clamp(8rem, 13vw, 11rem) 0 clamp(3.25rem, 5.5vw, 5rem);
	/* The band rarely starts on a whole pixel, and its two edges then
	   anti-alias against whatever is behind them: navy showing as a
	   hairline under the paper fade at the top, paper showing between
	   the band and the footer at the bottom. So its own ground is paper
	   for the first few pixels, and a navy line is painted just below
	   it. */
	background: linear-gradient(180deg, var(--p-paper) 0, var(--p-paper) 4px, var(--p-ink) 4px);
	box-shadow: 0 1px 0 var(--p-ink);
	color: #fff; border-top: 0;
}
/* And a solid cap over each edge: the blended photograph underneath
   was still showing through the very first and last row of pixels. */
.m-close::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(var(--p-paper), var(--p-paper)) top / 100% 3px no-repeat,
		linear-gradient(var(--p-ink), var(--p-ink)) bottom / 100% 3px no-repeat;
}
/* A true duotone rather than a tinted colour photograph: the picture
   gives only its light and shade, the navy underneath gives the colour,
   so every tone in it already belongs to the palette. */
.m-close-shot {
	/* The picture sits in the right-hand part of the band only, so the
	   row of trailers lands clear of the statement instead of running
	   under it. The strip to its left is solid navy from the gradient
	   below, which also hides the picture's left edge. */
	background-size: max(76%, 62rem) auto; background-position: 100% 60%; background-repeat: no-repeat;
}
.m-close::before {
	background:
		/* out of the paper */
		linear-gradient(180deg, rgba(244, 241, 236, 1) 0%, rgba(244, 241, 236, .86) 8%, rgba(244, 241, 236, .4) 21%, rgba(244, 241, 236, 0) 38%),
		/* into the footer */
		linear-gradient(180deg, rgba(0, 0, 76, 0) 40%, rgba(0, 0, 76, .62) 70%, rgba(0, 0, 76, .95) 91%, rgba(0, 0, 76, 1) 100%),
		/* A solid navy ground under the statement and its actions, so no
		   part of the photograph sits behind type; it clears to the
		   right, where the trailers keep their light. */
		linear-gradient(90deg, rgba(0, 0, 76, 1) 0%, rgba(0, 0, 76, 1) 30%, rgba(0, 0, 76, .92) 40%, rgba(0, 0, 76, .5) 52%, rgba(0, 0, 76, 0) 66%);
}
/* Everything in one column on the left: label, statement, then the
   button and the phone number on one line beneath it. */
.m-close-inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: clamp(1.6rem, 2.6vw, 2.2rem); }
.m-close-label { color: var(--p-on-ink); margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.m-close-label::after { background: rgba(255, 255, 255, .32); }
.m-close-title {
	max-width: 13ch;
	font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: .98; letter-spacing: -.05em;
	color: #fff !important;
}
/* The last word steps back a tone - the same two-tone the About page's
   heading uses. The spans come from the word-split script; without it
   the whole line simply stays white. */
.m-close-title .m-w:last-child > span { color: var(--p-on-ink); }
.m-close-acts { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.m-close .m-btn--light {
	padding: 1.15rem 1.6rem 1.15rem 1.8rem; font-size: 1.04rem;
	background: #fff; color: var(--p-ink);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 20, .8);
}
.m-close .m-btn--light:hover { background: var(--p-paper); color: var(--p-ink); }
.m-close .m-btn:focus-visible, .m-close-tel:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.m-close-tel {
	display: inline-flex; align-items: center; gap: .55rem;
	font: 600 1rem/1 Inter, system-ui, sans-serif; color: #fff; text-decoration: none;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(currentColor, currentColor) 0 calc(100% + 0px) / 0 1px no-repeat; padding-bottom: .3rem;
	transition: background-size .35s ease;
}
.m-close-tel svg { width: 1.05rem; height: 1.05rem; color: var(--p-on-ink); }
.m-close-tel:hover { background-size: 100% 1px; }
/* The companies and services pages run the full container width, so
   the band's statement lines up with their cards. */
body:has(.cx) .m-close-inner { padding-left: 0; }
@media (max-width: 860px) {
	.m-close { min-height: clamp(26rem, 70vh, 32rem); padding-top: clamp(7rem, 26vw, 9rem); }
	.m-close-shot { background-size: cover; background-position: 64% 50%; }
	.m-close::before {
		background:
			linear-gradient(180deg, rgba(244, 241, 236, 1) 0%, rgba(244, 241, 236, .8) 7%, rgba(244, 241, 236, 0) 30%),
			linear-gradient(180deg, rgba(0, 0, 76, .1) 20%, rgba(0, 0, 76, .82) 52%, rgba(0, 0, 76, 1) 100%);
	}
}
@media (prefers-reduced-motion: reduce) { .m-close-tel { transition: none; } }/* --- About team: three people, monogram tiles ---------------------- */
.ap-team { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; gap: 1.25rem; }
.ap-team li {
	padding: 2rem 1.5rem 1.8rem; border-radius: 24px;
	background: #fff; border: 1px solid rgba(0, 0, 76, .08);
	transition: translate .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.ap-team li:hover { translate: 0 -5px; box-shadow: 0 30px 60px -34px rgba(0, 0, 76, .4); }
.ap-av {
	position: relative;
	width: 6.5rem; height: 6.5rem; margin-bottom: 1.4rem;
	border-radius: 22px; background: var(--p-paper); color: var(--p-ink);
	font: 800 2rem/1 "Archivo", Inter, sans-serif; letter-spacing: -.03em;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 76, .12);
	transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ap-av::after {
	content: ""; position: absolute; right: -.35rem; bottom: -.35rem;
	width: 1.3rem; height: 1.3rem; border-radius: 7px; background: var(--p-ink);
	box-shadow: 0 0 0 4px #fff; transition: background .4s ease;
}
.ap-team li:hover .ap-av { background: var(--p-ink); color: #fff; transform: rotate(-4deg); }
.ap-team li:hover .ap-av::after { background: var(--p-on-ink); }
.ap-team span:last-child { max-width: 22ch; text-wrap: balance; }
@media (max-width: 900px) { .ap-team { grid-template-columns: 1fr; max-width: 26rem; } }
@media (prefers-reduced-motion: reduce) { .ap-team li, .ap-av { transition: none; } }

/* =====================================================================
   LANGUAGE SWITCH — LT | EN (inc/i18n.php)
   A small segmented control beside the header button; inside the mobile
   sheet it sits under the call-to-action buttons.
   ===================================================================== */
.tb-lang {
	display: inline-flex; align-items: center; gap: 2px; padding: 3px;
	border: 1px solid rgba(0, 0, 76, .12); border-radius: 8px; background: rgba(255, 255, 255, .6);
}
.tb-lang a {
	display: grid; place-items: center; min-width: 2.1rem; height: 1.9rem; padding: 0 .45rem;
	border-radius: 6px; font: 600 .75rem/1 Inter, system-ui, sans-serif; letter-spacing: .06em;
	color: var(--p-muted) !important; text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
.tb-lang a:hover { color: var(--p-ink) !important; background: rgba(0, 0, 76, .06); }
.tb-lang a.is-on { background: var(--p-ink); color: #fff !important; }
.tb-lang--mobile { display: flex; width: max-content; margin: 1.5rem auto 0; }
.tb-lang--mobile a { min-width: 3rem; height: 2.4rem; font-size: .85rem; }
@media (max-width: 520px) {
	/* The header button hides here; keep the switch, just tighter. */
	.tp-header-right .tb-lang a { min-width: 1.9rem; height: 1.75rem; }
}
/* The header's frosted-glass blur makes it the containing block for its
   fixed children, so the mobile menu (position: fixed; inset: 0) was
   being boxed into the 70px bar instead of covering the screen. While
   the menu is open the blur and any transform come off the header. */
header.wp-block-template-part:has(.tp-mobile-nav:not([hidden])) {
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	filter: none !important; transform: none !important;
}

/* =====================================================================
   FOOTER

   Four columns on the same container the pages use: the lockup and a
   line about the group, the site's pages, the four services, and the
   contact details set large enough to be the thing you came down here
   for. A hairline, then the copyright and a way back to the top.
   ===================================================================== */

.ft { padding: 0 var(--m-pad); color: rgba(255, 255, 255, .72); }
.ft-inner { width: min(1320px, 100%); margin-inline: auto; }
.ft-top {
	display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 4vw, 4rem);
	padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.ft-logo { display: inline-flex; align-items: center; gap: .9rem; color: #fff; text-decoration: none; }
.ft-chip { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: #fff; }
.ft-chip img { width: 34px; height: 34px; display: block; }
.ft-logo-text { display: grid; gap: .45rem; }
.ft-logo-name { font: 700 1.3rem/1 "Archivo", Inter, sans-serif; letter-spacing: .2em; color: #fff; }
.ft-logo-tag {
	font: 500 .62rem/1.4 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: .16em; text-transform: uppercase; color: var(--p-on-ink);
}
.ft-desc { margin: 1.6rem 0 0; max-width: 40ch; font-size: .98rem; line-height: 1.65; color: rgba(255, 255, 255, .66); text-wrap: pretty; }

.ft-h {
	margin: .35rem 0 1.4rem;
	font: 500 .66rem/1 "JetBrains Mono", ui-monospace, monospace !important;
	letter-spacing: .2em; text-transform: uppercase; color: var(--p-on-ink) !important;
}
.ft-links { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.ft-links a, .ft-big, .ft-up {
	color: rgba(255, 255, 255, .86); text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: color .25s ease, background-size .35s cubic-bezier(.2, .7, .2, 1);
}
.ft-links a { font: 500 1rem/1.3 Inter, system-ui, sans-serif; padding-bottom: .15rem; }
.ft-links a:hover, .ft-big:hover, .ft-up:hover { color: #fff !important; background-size: 100% 1px; }

.ft-col--contact { display: flex; flex-direction: column; align-items: flex-start; }
.ft-big {
	font: 600 clamp(1.15rem, 1.6vw, 1.4rem)/1.2 "Archivo", Inter, sans-serif;
	letter-spacing: -.01em; color: #fff; padding-bottom: .2rem;
	font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ft-big + .ft-big { margin-top: .7rem; }
.ft-addr { margin: 1.3rem 0 0; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .66); }

.ft-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem;
	padding: 1.5rem 0 1.8rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .85rem; color: rgba(255, 255, 255, .55);
}
.ft-up { display: inline-flex; align-items: center; gap: .5rem; font: 500 .85rem/1 Inter, system-ui, sans-serif; padding-bottom: .2rem; }
.ft-up svg { width: .9rem; height: .9rem; rotate: -90deg; transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
.ft-up:hover svg { translate: 0 -3px; }
.ft a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }

@media (max-width: 1000px) {
	.ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
	.ft-col--contact { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ft-links a, .ft-big, .ft-up, .ft-up svg { transition: none; } }
/* =====================================================================
   PERFORMANCE

   Measured by scrolling every page at 2560px wide and timing each
   frame. Three things cost real time, and each is replaced here by
   something that looks the same and costs nothing per frame.
   ===================================================================== */

/* 1. The closing band. Its photograph was turned into a navy duotone
   live - grayscale + contrast filters and a luminosity blend against
   the band, all re-run across the full width of the window on every
   scroll frame (the band also has parallax). That one section caused
   150-170ms stalls. The duotone is now baked into the image file
   (n-cta-duotone.jpg), so the browser only has to move a picture. */
.m-close-shot { filter: none; mix-blend-mode: normal; opacity: 1; }

/* 2. Frosted glass. A sticky header that blurs whatever scrolls under it
   re-blurs a strip the full width of the screen every frame - on a 4K
   monitor that is the single most expensive thing a header can do. The
   bar is now simply near-opaque paper, which reads the same. The small
   labels on photographs lose their blur for the same reason. */
header.wp-block-template-part:not(.tp-header--transparent),
header.wp-block-template-part.is-scrolled {
	background: rgba(252, 250, 247, .97) !important;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.cx-role, .ap-dir-count { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .94); }

/* 3. The photograph that grows on the About page. It used to animate
   its own width and height, which made the browser lay the page out
   again and rescale a full-screen image on every scroll frame. The
   frame now stays full-size and is revealed through a clip that opens
   up - the same movement, done by the compositor. */
.ap-grow-frame {
	width: 100%; height: 100%; border-radius: 0;
	clip-path: inset(calc(21% * (1 - var(--g))) calc(19% * (1 - var(--g))) round calc(28px * (1 - var(--g))));
}
@media (max-width: 900px) {
	.ap-grow-frame { width: 100%; height: 100%; clip-path: inset(calc(24% * (1 - var(--g))) calc(7% * (1 - var(--g))) round calc(22px * (1 - var(--g)))); }
}
.ap-static .ap-grow-frame { clip-path: none; }

/* 4. Blurred light fields. The two drifting fields in the front-page
   hero and the one behind every inner page's heading were radial
   gradients with an 80px blur filter on top - a blur of something that
   is already a soft gradient, kept alive as a large off-screen surface.
   The softness now comes from the gradient's own falloff. */
.m-hero-blob, .tp-page-hero::before { filter: none; will-change: auto; }
.m-hero-blob--1 { background: radial-gradient(closest-side, rgba(0, 0, 76, .17), rgba(0, 0, 76, .09) 45%, rgba(0, 0, 76, 0) 100%); }
.m-hero-blob--2 { background: radial-gradient(closest-side, rgba(0, 0, 76, .11), rgba(0, 0, 76, .06) 45%, rgba(0, 0, 76, 0) 100%); }
.tp-page-hero::before { background: radial-gradient(closest-side, rgba(0, 0, 76, .15), rgba(0, 0, 76, .08) 45%, rgba(0, 0, 76, 0) 100%); }
/* Photographs decode off the main thread and each card is its own
   paint boundary, so a hover or a reveal on one never repaints its
   neighbours. */
.cx-card, .sv-card { contain: layout paint; }
.cx-card:target, .sv-card:target { contain: layout; }

/* Moving between pages: a short cross-fade instead of a hard cut, in
   browsers that support it. Nothing happens in those that do not. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}