/* ============================================================
   Arenim Design System
   Inspired by kvantphone.com visual language:
   - Alternating dark / light section bands
   - Generous vertical rhythm
   - Clean corporate typography
   - Navy + cyan accent palette
   ============================================================ */

:root {
	/* ---- Palette ---- */
	--navy-900: #071821;
	--navy-800: #0b2231;
	--navy-700: #142e41;
	--navy-600: #1a3d55;
	--navy-500: #204a68;

	--cyan-500: #0994d4;
	--cyan-600: #0772a3;
	--cyan-400: #2ea3f2;
	--cyan-glow: rgba(9, 148, 212, 0.25);

	--white: #ffffff;
	--grey-50: #f5f7fa;
	--grey-100: #eaeef2;
	--grey-200: #d3dee5;
	--grey-400: #8a9baa;
	--grey-600: #556677;
	--grey-800: #2a3a48;

	/* ---- Brand semantic tokens ---- */
	--primary: var(--navy-500);
	--secondary: var(--cyan-500);
	--neutral: var(--grey-200);

	/* ---- Decoration stripes ---- */
	--stripe-width: 6px;
	--stripe-h: linear-gradient(to right, var(--primary), var(--secondary));
	--stripe-v: linear-gradient(to bottom, var(--secondary), var(--primary));

	/* ---- Semantic tokens ---- */
	--bg-dark: var(--navy-900);
	--bg-dark-alt: var(--navy-800);
	--bg-light: var(--grey-50);
	--bg-white: var(--white);

	--text-on-dark: #f3fbff;
	--text-on-dark-muted: #b8ccda;
	--text-on-light: #1a2a36;
	--text-on-light-muted: #556677;

	--accent: var(--cyan-500);
	--accent-hover: var(--cyan-400);
	--accent-dark: var(--cyan-600);

	--border-on-dark: rgba(132, 174, 194, 0.2);
	--border-on-light: rgba(20, 46, 65, 0.1);

	/* ---- Spacing ---- */
	--section-py: clamp(26px, 3.2vw, 45px);
	--section-py-sm: clamp(19px, 2.4vw, 32px);
	--content-width: 1080px;
	--content-wide: 1200px;
	--gutter: 24px;

	/* ---- Shape ---- */
	--radius: 5px;
	--radius-lg: 5px;
	--radius-pill: 999px;

	/* ---- Typography ---- */
	/* Subtitle ("alcím") size */
	--font-size-subtitle: 1.38rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--text-on-dark);
	background: var(--bg-dark);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
	margin: 0 0 0.4em;
	font-family: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p, li {
	line-height: 1.4;
	font-weight: 400;
	font-size: 1.15rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button,
.button-secondary,
.button-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-pill);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 200ms ease;
}

.button {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}
.button:hover, .button:focus-visible {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(9, 148, 212, 0.3);
}

.button-secondary {
	background: var(--white);
	color: var(--navy-700);
	border-color: var(--border-on-light);
}
.button-secondary:hover, .button-secondary:focus-visible {
	background: var(--grey-50);
	transform: translateY(-1px);
}

/* Secondary on dark backgrounds (e.g., contact CTA) */
.section-dark .button-secondary {
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.25);
}
.section-dark .button-secondary:hover,
.section-dark .button-secondary:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.4);
}

.button-outline {
	background: transparent;
	border-color: var(--border-on-dark);
	color: var(--text-on-dark);
}
.button-outline:hover, .button-outline:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

/* productHero dark hero — solid white border + text for the "More about the service" CTA, smaller radius matching the services Learn more buttons */
#preventing-eavesdropping .button-outline {
	border-color: var(--white);
	color: var(--white);
	border-radius: var(--radius);
	font-size: 1.05rem;
}
#preventing-eavesdropping .button-outline:hover,
#preventing-eavesdropping .button-outline:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

/* Solutions product cards — match the services Learn more radius */
#kvantphone .service-card .actions .button-outline {
	border-radius: var(--radius);
}

/* On light backgrounds */
.section-light .button-outline,
.section-white .button-outline,
.light .button-outline,
.page-header .button-outline,
.page-hero-light .button-outline {
	border-color: var(--border-on-light);
	color: var(--text-on-light);
}
.section-light .button-outline:hover,
.section-white .button-outline:hover,
.light .button-outline:hover,
.page-header .button-outline:hover,
.page-hero-light .button-outline:hover,
.section-light .button-outline:focus-visible,
.section-white .button-outline:focus-visible,
.light .button-outline:focus-visible,
.page-header .button-outline:focus-visible,
.page-hero-light .button-outline:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

/* Hero CTAs — when a hero shows a pair of buttons, make them equal width so
   the pair looks symmetrical regardless of label length (and language). Both
   1fr columns resolve to the wider button's natural width, and the grid stays
   only as wide as the pair needs. On narrow screens they stack full-width. */
.page-hero .actions {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

@media (max-width: 540px) {
	.page-hero .actions {
		grid-auto-flow: row;
		width: 100%;
	}
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.shell {
	width: 100%;
}

.site-main {
	/* Full-bleed sections handle their own padding */
}

.container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container-wide {
	max-width: var(--content-wide);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg-light);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   MEGA MENU (mirrors first 4 footer columns)
   ============================================================ */
.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
	z-index: 99;
	pointer-events: none;
}

.mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.mega-menu-wrap {
	width: 100%;
}

.mega-menu-inner {
	position: relative;
	background: var(--bg-light);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	padding: 20px 0;
}

/* Tagline that fills the freed space at the left of the mega-menu, between
   the brand logo's left edge and the first column's text minus the inter-
   column gap. */
.mega-tagline {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Panel's left edge tracks the page container's left so it sits flush
	   with the Arenim logo at any viewport width. */
	left: max(var(--gutter), calc((100% - var(--content-width)) / 2 + var(--gutter)));
	width: 241px;
	height: 200px;
	margin: 0;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	padding: 20px 20px 20px calc(20px + var(--stripe-width));
	overflow: hidden;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	display: block;
}

.mega-tagline-title {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 8px;
}

.mega-tagline-body {
	display: block;
}

.mega-tagline::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

/* Mega-only: hide compliance badges to keep the menu compact */
.mega-grid .footer-badge {
	display: none;
}

/* Mega-only: tighten spacing between links and under titles */
.mega-grid .footer-column ul {
	gap: 4px;
}

.mega-grid .footer-column h2 {
	margin-bottom: 10px;
}

/* Mega-only: slim down the Sales/Support contact panel */
.mega-grid .footer-about {
	padding-top: 10px;
	padding-bottom: 10px;
}

.mega-grid .footer-contact-group + .footer-contact-group {
	margin-top: 0.5em;
}

.mega-grid {
	/* Auto-sized columns + fit-content max-width so the highlight boxes sit
	   exactly 78px apart (was 30, +48 to match the wider nav gap). */
	max-width: max-content;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 78px;
}

/* Shift each mega column individually so the 3 columns' text left edges
   line up with their corresponding nav items (About Us, EaaS, Solutions),
   matching the nav shift (115.8 - 96 = 19.8px effective). */
.mega-grid > .mega-col:nth-child(1) {
	transform: translateX(184px);
}
.mega-grid > .mega-col:nth-child(2) {
	transform: translateX(130px);
}
.mega-grid > .mega-col:nth-child(3) {
	transform: translateX(100px);
}

.mega-col-inner {
	padding: 12px;
	border-radius: var(--radius);
	transition: background 160ms ease;
	/* Shrink to fit so the focus highlight has the same 12px breathing room on
	   the right (past the widest text) as it has on the left. */
	width: fit-content;
}

.mega-col.is-highlighted .mega-col-inner {
	background: var(--grey-100);
}

/* Mega-only: centre GDPR badge in first column */
.mega-grid > .footer-column:first-child .footer-badge {
	justify-content: center;
}

/* Crop chair out of team photo wherever it appears */
img[src$="arenim-team-2019.jpeg"] {
	clip-path: inset(0 0 22% 0);
}

/* Team-photo hero: full-width background photo, text in the upper portion */
.page-hero:has(img[src$="arenim-team-2019.jpeg"]) {
	padding-top: 0;
	padding-bottom: 0;
	min-height: clamp(520px, 65vh, 680px);
}

.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .page-hero-media {
	width: 100%;
	opacity: 1;
}

/* Override the global chair-clip; cover the hero with the image cropped so the
   front row finishes around chest height (same treatment as the home banner). */
.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .page-hero-media img {
	clip-path: none;
	object-fit: cover;
	object-position: center 9%;
	width: 100%;
	height: 100%;
}

.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .page-hero-media::after {
	background: linear-gradient(to bottom, var(--bg-light) 0%, rgba(245, 247, 250, 0.95) 45%, rgba(245, 247, 250, 0) 70%);
}

.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .container {
	position: relative;
	z-index: 2;
	padding-top: clamp(34px, 5.25vh, 59px);
}

.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .page-hero-copy {
	max-width: none;
	padding-bottom: clamp(32px, 4vw, 48px);
	text-align: center;
}

.page-hero:has(img[src$="arenim-team-2019.jpeg"]) .page-hero-copy h1 {
	text-align: center;
	color: #000;
	margin-bottom: clamp(34px, 5.25vh, 59px);
}


.site-section#who-we-are {
	background: var(--white);
	color: var(--text-on-light);
}

/* Who-we-are: 3-col grid on the container so the image (col 3) spans both the title row and the text row */
#who-we-are .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"title title image"
		"text  text  image";
	column-gap: 24px;
	row-gap: var(--section-py);
}

#who-we-are .section-header {
	grid-area: title;
	margin-bottom: 0;
}

#who-we-are .prose-block {
	display: contents;
	max-width: none;
}

#who-we-are .prose-block-text {
	grid-area: text;
}

#who-we-are .prose-block-figure {
	grid-area: image;
	align-self: stretch;
}

#who-we-are .prose-block-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Mobile-only adjustments for the who-we-are block. */
@media (max-width: 640px) {
	/* Stack to a single column (the 3-col grid keeps the image column even when
	   the figure is hidden, leaving a gap — so collapse the grid too). */
	#who-we-are .container {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"text";
	}
	/* Drop the AI-development image on phones. */
	#who-we-are .prose-block-figure {
		display: none;
	}
	/* Drop the second "We combine our expertise..." paragraph on phones. */
	#who-we-are .prose-block-text > p:nth-of-type(2) {
		display: none;
	}
	/* Centre the "Our locations" heading on phones, and match the section's main
	   title: same font size and the same vertical spacing above/below it as the
	   main title has (the section's --section-py rhythm). */
	#who-we-are .prose-locations {
		margin-top: var(--section-py);
	}
	#who-we-are .prose-locations-title {
		text-align: center;
		font-size: clamp(1.6rem, 3.2vw, 2.4rem);
		margin-bottom: var(--section-py);
	}
}

/* About Us hero — scoped via the next-sibling section id so the rules survive
   even after the hero image was removed. Force the intro paragraph to render
   in dark navy instead of the default muted grey. */
.page-hero:has(~ #who-we-are) .page-hero-intro {
	font-size: 1.21rem;
	color: var(--primary);
	text-align: center;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.page-hero:has(~ #who-we-are) .intro-highlight {
	display: block;
	margin-top: 0;
	font-size: 1.37rem;
	color: var(--primary);
}

.page-hero:has(~ #who-we-are) .intro-accent {
	display: block;
	color: var(--primary);
	font-size: 1.37rem;
}

/* Mobile: flow the two emphasised sentences continuously (no forced break). */
@media (max-width: 640px) {
	.page-hero:has(~ #who-we-are) .intro-accent,
	.page-hero:has(~ #who-we-are) .intro-highlight {
		display: inline;
		margin-top: 0;
	}
	.page-hero:has(~ #who-we-are) .intro-highlight::before {
		content: "\00a0";
	}
}

/* Ten Commandments hero — mirrors the About Us hero treatment: centred dark-
   navy intro, subtitle line slightly larger and bolder above the description. */
.page-hero:has(~ #why-we-created-them) .page-hero-intro {
	font-size: 1.21rem;
	color: var(--primary);
	text-align: center;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.page-hero:has(~ #why-we-created-them) .hero-subtitle {
	display: block;
	margin-bottom: 14px;
	font-size: 1.37rem;
	font-weight: 600;
	color: var(--primary);
}

.page-hero:has(~ #why-we-created-them) .hero-description {
	display: block;
}

/* Ten Commandments hero spacing — mirrors About Us so the spacing above
   the h1 equals the spacing below the intro, then drop bottom padding when
   the montage is present so the bottom row meets the next section flush. */
.page-hero:has(~ #why-we-created-them) {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(26px, 3.6vw, 48px);
}

.page-hero:has(~ #why-we-created-them):has(+ .page-hero-montage) {
	padding-bottom: clamp(24px, 3vw, 40px);
}

/* About Us hero — top padding matches the intro→montage gap (= the montage
   margin-top, clamp(24px, 3vw, 40px)) so the breathing room above the h1
   equals the breathing room below the intro paragraph. */
.page-hero:has(~ #who-we-are) {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(26px, 3.6vw, 48px);
}

/* About Us hero with a montage — equalize padding-bottom with padding-top so
   the intro paragraph has the same breathing room below it as the h1 has above
   it. The montage itself sits flush thanks to `.page-hero + .page-hero-montage`. */
.page-hero:has(~ #who-we-are):has(+ .page-hero-montage) {
	padding-bottom: clamp(24px, 3vw, 40px);
}

/* Principle list — centered vertical stack of commandment-style entries.
   Each item has a bold navy title above a cyan slash-quoted description.
   Used on the Ten Commandments page to show the original framework. */
.principle-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	margin: 0;
}

.principle-list-item {
	display: grid;
	grid-template-columns: 72px 1fr;
	align-items: center;
	gap: 40px;
	width: 100%;
	padding: 22px 0;
}

.principle-list-item:nth-child(odd) {
	background: var(--grey-50);
}

.principle-list-number {
	text-align: right;
	color: #000;
	font-weight: 700;
	font-size: 1.425rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.principle-list-body {
	text-align: center;
}

.principle-list-title {
	font-weight: 700;
	font-size: 1.18rem;
	color: var(--primary);
	margin-bottom: 8px;
	line-height: 1.3;
}

.principle-list-description {
	color: var(--cyan-500);
	font-size: 1rem;
	line-height: 1.55;
}

@media (max-width: 540px) {
	.principle-list-item {
		grid-template-columns: 56px 1fr;
		gap: 14px;
	}

	.principle-list-number {
		font-size: 1.2rem;
	}
}

/* Centre the section header above the principle list relative to the
   full container width — the title sits over the whole table, not
   only over the right-hand body column. */
.site-section:has(> .container > .principle-list) .section-header {
	text-align: center;
}

/* Commandments outro paragraph — sits inside a light panel the same width
   as the commandments table above. Text mirrors the hero description
   treatment (centred, dark navy, slightly larger than body text). The
   commandments section above drops its bottom padding so the visible gap
   above the panel equals the gap below it. */
#commandments {
	padding-bottom: 0;
}

#commandments-outro .prose-block {
	position: relative;
	overflow: hidden;
	max-width: none;
	margin: 0;
	background: var(--grey-50);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	padding: 32px 40px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Left-edge gradient stripe — the standard cyan→navy motif used on
   service/award/about cards. */
#commandments-outro .prose-block::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

#commandments-outro .prose-block-text {
	text-align: center;
}

#commandments-outro .prose-block-text p {
	font-size: 1.21rem;
	color: var(--primary);
	line-height: 1.55;
	margin: 0;
}

/* Podcast video section on the Ten Commandments page — centre the title,
   stack the description above the video, and style the description with
   the hero-description treatment (centred, dark navy, 1.21rem). */
#podcast .section-header {
	text-align: center;
}

#podcast .video-grid {
	grid-template-columns: 1fr;
	margin: 0 auto;
	gap: 32px;
}

#podcast .video-grid .prose-block {
	max-width: 800px;
	margin: 0 auto;
}

#podcast .video-grid .prose-block p {
	font-size: 1.21rem;
	color: var(--primary);
	line-height: 1.55;
	text-align: center;
	margin: 0;
}

/* Video frame size: mirrors the width the iframe used to have in the
   original 2-column layout (~60% of the container content), bumped by
   10%. Centred so it sits below the description on its own axis. */
#podcast .video-grid .video-frame {
	max-width: 665px;
	margin: 0 auto;
	width: 100%;
}

/* Image strip — full-bleed horizontal row of images used as a section
   divider. Mirrors the cell sizing/aspect of the hero montage so strips
   can be visually paired with the hero. */
.image-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	width: 100%;
	margin: 0;
}

.image-strip-cell {
	position: relative;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: rgba(7, 24, 33, 0.4);
}

.image-strip-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 960px) {
	.image-strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.image-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Hero photo montage — 5x3 full-bleed grid below the intro inside the hero
   section. Cells touch edge-to-edge (no padding) and use cover. */
.page-hero-montage {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	width: 100%;
}

/* When the montage sits as the next sibling of a hero, it should be flush
   against it — the hero's padding-bottom already provides any breathing room. */
.page-hero + .page-hero-montage {
	margin-top: 0;
}

.page-hero-montage-cell {
	position: relative;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: rgba(7, 24, 33, 0.4);
}

.page-hero-montage-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.object-position-50-0 {
	object-position: 50% 0% !important;
}

.object-position-50-16 {
	object-position: 50% 16% !important;
}

.object-fit-contain { object-fit: contain !important; }
.object-fit-cover { object-fit: cover !important; }
.object-fit-fill { object-fit: fill !important; }
.object-fit-none { object-fit: none !important; }
.object-fit-scale-down { object-fit: scale-down !important; }

.grid-row-span-2 { grid-row: span 2; }
.grid-row-span-3 { grid-row: span 3; }
.grid-row-span-4 { grid-row: span 4; }
.grid-row-span-5 { grid-row: span 5; }
.grid-row-span-6 { grid-row: span 6; }

/* Montage cells flagged mobileOnly are hidden on desktop/tablet (where they
   would break the single-row layout) and revealed only in the 2-column phone
   grid below, where they fill an otherwise-trailing gap. */
.montage-cell-mobile-only {
	display: none;
}

@media (max-width: 960px) {
	.page-hero-montage {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.page-hero-montage {
		grid-template-columns: repeat(2, 1fr);
	}

	.montage-cell-mobile-only {
		display: block;
	}
}

/* Home recognition block — 5x3 photo montage replaces the old composite
   awards image. The montage sits flush with the next (dark) section, so
   the section's bottom padding collapses to zero. Double-class selector
   is required to outrank the generic .home-section padding shorthand. */
.home-section.home-awards-section {
	padding-bottom: 0;
}

/* Legacy `#awards-and-recognitions .section-header p` has specificity
   (1,1,1) with `max-width: none; color: #000`. Chain `.section-header`
   on this selector to reach (1,2,0) and win. */
#awards-and-recognitions .section-header .home-awards-description {
	max-width: 720px;
	margin: 16px auto 0;
}

/* Second sentence sits on its own line (forced by an inline <br>) and
   must not wrap. Inline-block lets it claim its full text width so the
   surrounding paragraph stays centred without shrinking the line. On
   narrow viewports the parent's max-width caps the line and the no-wrap
   relaxes so the text can flow normally instead of overflowing. */
.home-awards-description-statement {
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.home-awards-description-statement {
		display: inline;
		white-space: normal;
	}
}

.home-awards-montage {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	width: 100%;
	margin-top: var(--section-py);
}

.home-awards-montage-cell {
	position: relative;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: rgba(7, 24, 33, 0.4);
}

.home-awards-montage-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* HOME ↔ About-us montage flip animation. Hovering a flip-enabled cell
   rotates an inner wrapper 180° on the Y axis, swapping front ↔ back. */
.montage-flip-cell {
	perspective: 1000px;
}

.montage-flip-cell .montage-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.montage-flip-cell.is-flipped .montage-flip-inner {
	transform: rotateY(180deg);
}

.montage-flip-cell .montage-flip-front,
.montage-flip-cell .montage-flip-back {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.montage-flip-cell .montage-flip-back {
	transform: rotateY(180deg);
}

.montage-flip-cell .montage-flip-front img,
.montage-flip-cell .montage-flip-back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.montage-flip-cell .montage-flip-inner {
		transition: none;
	}
}

/* Per-image crop anchors — match the /test page HOME montage so the
   subjects' heads / mastheads stay inside the visible 2:1 frame. */
.home-awards-montage-cell img[src*="Robot-Arenim-team-photo"],
.home-awards-montage-cell img[src*="management-photo-infopark-park"],
.home-awards-montage-cell img[src$="/aboutus-web/photo-10.jpg"] {
	object-position: 50% 10%;
}

.home-awards-montage-cell img[src$="/aboutus-web/photo-14.jpg"] {
	object-position: 50% 16%;
}

@media (max-width: 960px) {
	.home-awards-montage {
		grid-template-columns: repeat(3, 1fr);
	}
	.home-awards-montage--single-row {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 640px) {
	.home-awards-montage {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Career bottom montage: on phones drop the single-row layout and mirror the
	   6-image hero montage at the top of the page — 2 columns × 3 rows (the 6th
	   cell is a mobileOnly image revealed only here). */
	.home-awards-montage--single-row {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Mobile: trim the home montage by dropping the team photo, the Parliament
	   award shot, the foil-wrapped-desk gag, the Simkó office presentation, and
	   the elevator selfie. */
	.home-awards-montage:not(.home-awards-montage--single-row)
		.home-awards-montage-cell:has(img[src$="1-Arenim-team-2017.jpeg"]),
	.home-awards-montage:not(.home-awards-montage--single-row)
		.home-awards-montage-cell:has(img[src$="/aboutus-web/photo-03.jpg"]),
	.home-awards-montage:not(.home-awards-montage--single-row)
		.home-awards-montage-cell:has(img[src$="3-Csoki-alufolia-desk-no-people.jpeg"]),
	.home-awards-montage:not(.home-awards-montage--single-row)
		.home-awards-montage-cell:has(img[src$="1-Simko-prezentacio.jpeg"]),
	.home-awards-montage:not(.home-awards-montage--single-row)
		.home-awards-montage-cell:has(img[src$="ITBN_Liftben_csapatkep-edit.JPG"]) {
		display: none;
	}
}

.mega-grid > .footer-about[data-mega-col].is-highlighted {
	background: var(--grey-100);
}

/* Mega-only: underline the 4 category titles */
.mega-grid .footer-column > .mega-col-inner > h2 {
	text-decoration: underline;
	text-decoration-color: var(--primary);
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.mega-menu ul a[href$="/case-studies/"] {
	font-weight: 700;
}

@media (max-width: 960px) {
	.mega-menu {
		display: none;
	}
}

.header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.brand {
	display: flex;
	align-items: center;
}

.brand-logo {
	height: 32px;
	width: auto;
	display: block;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(64px * 1.2 + 48px);
	flex: 1;
	/* After removing "Other", shift the 3 remaining nav items right by the
	   freed-up width (115.8px), then back left by 96px for final placement.
	   Extra +48 to keep EaaS at the same x after About Us was pulled closer
	   to EaaS (both inter-item gaps narrowed to 77px). */
	transform: translateX(67.8px);
}

/* Pull About Us closer to EaaS by shaving 48px off the gap on both sides
   of EaaS — both visible gaps end up at 124.8 - 48 = 76.8px (≈ the original
   EaaS↔Solutions gap). The mega columns are left at their current x so the
   About Us mega panel does not move. */
.site-nav a:nth-child(1) {
	transform: translateX(24px);
}
.site-nav a:nth-child(2) {
	margin-left: -48px;
	transform: translateX(24px);
}
.site-nav a:nth-child(3) {
	margin-left: -48px;
	transform: translateX(24px);
}

.site-nav a {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--primary);
	transition: color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--secondary);
	font-weight: 700;
}

.site-nav a.active {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.nav-cta {
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--white) !important;
	font-weight: 600;
	font-size: 0.88rem;
	transition: all 200ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
	background: var(--accent-hover);
	transform: translateY(-1px);
}

/* Language selector — inline links like arenim.com */
.lang-selector {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: 16px;
}

.lang-selector a {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--grey-400);
	text-decoration: none;
	padding: 4px 6px;
	transition: color 160ms ease;
}

.lang-selector a:hover,
.lang-selector a:focus-visible {
	color: var(--accent);
}

.lang-selector a.active {
	color: var(--accent);
	font-weight: 600;
}

.lang-separator {
	color: var(--grey-200);
	font-size: 0.88rem;
	user-select: none;
}

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--text-on-light);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px;
}

/* ============================================================
   SECTIONS — Alternating bands
   ============================================================ */
.section-dark {
	background: var(--bg-dark);
	color: var(--text-on-dark);
}

.section-dark p,
.section-dark li {
	color: var(--text-on-dark-muted);
}

.section-dark-alt {
	background: var(--bg-dark-alt);
	color: var(--text-on-dark);
}

.section-dark-alt p,
.section-dark-alt li {
	color: var(--text-on-dark-muted);
}

.section-dark-alt h2,
.section-dark-alt h3 {
	color: var(--text-on-dark);
}

.section-dark-alt .button-outline {
	border-color: var(--border-on-dark);
	color: var(--text-on-dark);
}
.section-dark-alt .button-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.section-light {
	background: var(--bg-light);
	color: var(--text-on-light);
}

.section-light .h2,
.section-light h2,
.section-light h3 {
	color: var(--text-on-light);
}

.section-light p,
.section-light li {
	color: var(--text-on-light-muted);
}

.section-white {
	background: var(--bg-white);
	color: var(--text-on-light);
}

.section-white h2,
.section-white h3 {
	color: var(--text-on-light);
}

.section-white p,
.section-white li {
	color: var(--text-on-light-muted);
}

.home-section {
	padding: var(--section-py) 0;
}

.home-section > .container,
.home-section > .container-wide {
	/* children use container for width */
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
	margin-bottom: 48px;
}

.section-header.section-header-centered {
	text-align: center;
}

.section-header .case-studies-intro-wide {
	max-width: none;
}

.structured-page-content {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.contact-cta.is-hidden {
	display: none;
}

/* Mobile: make the space below a section title equal to the space above it
   (the section's top padding = var(--section-py)). */
@media (max-width: 640px) {
	.section-header {
		margin-bottom: var(--section-py);
	}
}

.section-header h2 {
	margin-bottom: 0;
}

.section-header p {
	margin-top: 16px;
	max-width: 58ch;
	font-size: 1.2rem;
}

/* Digital transformation: let the business-impact intro span the full block width */
#business-impact .section-header p {
	max-width: none;
}

/* Career: let the mood-block intro span the full block width */
#mood-block .section-header p {
	max-width: none;
}

/* Career open-positions + bottom-navigation cards: vertical flex layout so
   the CTA button can be pinned to the bottom of the card; the .actions row
   aligns the button itself to the right edge inside the card padding. */
#open-positions .service-card,
#bottom-navigation .service-card {
	display: flex;
	flex-direction: column;
}

#open-positions .service-card .actions,
#bottom-navigation .service-card .actions {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

/* When a card has both a "Details" trigger and an Apply CTA, push them to
   opposite edges of the action row (Details left, Apply right). */
#open-positions .service-card .actions.actions-split,
#bottom-navigation .service-card .actions.actions-split {
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* Card-details expandable panel: full-width container under the card grid.
   Each panel is hidden by default and revealed when its matching "Details"
   button is clicked. Used on /career/ open-positions. */
.card-details-panels {
	margin-top: clamp(20px, 2.4vw, 32px);
}

.card-details-panel {
	background: var(--white);
	color: var(--text-on-light);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-details-panel h3 {
	color: var(--text-on-light);
	margin: clamp(18px, 2vw, 26px) 0 8px;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.card-details-panel h3:first-of-type {
	margin-top: 4px;
}

.card-details-panel p {
	color: var(--text-on-light-muted);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 12px;
}

.card-details-panel li {
	color: var(--text-on-light-muted);
	font-size: 1rem;
	line-height: 1.55;
}

.card-details-panel li::marker {
	color: var(--accent-hover);
}

.card-details-panel .role-details-position {
	font-size: 1.65rem;
	color: var(--text-on-light);
	margin-bottom: 16px;
}

.card-details-panel .role-details-position strong {
	color: var(--text-on-light);
}

.card-details-panel ul {
	margin: 0 0 4px;
	padding-left: 22px;
}

.card-details-panel li {
	margin-bottom: 6px;
}

.card-details-panel .card-details-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: clamp(20px, 2.4vw, 32px);
}

.card-details-panel .card-details-apply,
.card-details-panel .card-details-close {
	border-radius: var(--radius);
	color: var(--primary);
	border-color: var(--primary);
}

.card-details-panel .card-details-apply:hover,
.card-details-panel .card-details-apply:focus-visible,
.card-details-panel .card-details-close:hover,
.card-details-panel .card-details-close:focus-visible {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

/* Phones: keep "Apply now" and "Close" on one row at equal width instead of
   letting the wider button wrap onto its own line. */
@media (max-width: 640px) {
	.card-details-panel .card-details-actions {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.card-details-panel .card-details-apply,
	.card-details-panel .card-details-close {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 12px;
		padding-right: 12px;
		text-align: center;
		white-space: nowrap;
	}
}

/* Career open-positions + bottom-navigation cards: match the home "Two
   ways we create value" card-button styling (rounded-corner outline using
   --primary, accent-fill on hover/focus). */
#open-positions .service-card .actions .button-outline,
#bottom-navigation .service-card .actions .button-outline {
	border-radius: var(--radius);
	color: var(--primary);
	border-color: var(--primary);
}

#open-positions .service-card:hover .actions .button-outline,
#open-positions .service-card:focus-within .actions .button-outline,
#open-positions .service-card .actions .button-outline:hover,
#open-positions .service-card .actions .button-outline:focus-visible,
#bottom-navigation .service-card:hover .actions .button-outline,
#bottom-navigation .service-card:focus-within .actions .button-outline,
#bottom-navigation .service-card .actions .button-outline:hover,
#bottom-navigation .service-card .actions .button-outline:focus-visible {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

/* Career mood-block section: navy → accent gradient backdrop matching the
   home "Why our clients choose us" section. White headline + subtitle. */
.site-section#mood-block {
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--accent) 100%);
	color: var(--white);
}

/* Career bottom-navigation section: keep the white card panels and white
   heading copy that pair with the surrounding dark section background. */
#bottom-navigation .section-header,
#bottom-navigation .section-header h2,
#bottom-navigation .section-header p {
	color: var(--white);
}

#bottom-navigation .service-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	color: var(--text-on-light);
}

#bottom-navigation .service-card h3 {
	color: var(--text-on-light);
}

#bottom-navigation .service-card p {
	color: var(--text-on-light-muted);
}

/* Section-header inline CTA (outlined "Learn more" button + subtitle).
   margin-top mirrors .positioning-pillars-action so the gap above the
   subtitle matches the gap above the button. */
.section-header .section-header-cta-subtitle {
	margin-top: clamp(28px, 3vw, 48px);
	margin-bottom: 0;
	color: var(--white);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	text-align: center;
	max-width: none;
}

/* mood-block on /career has no cards under the section-header, so the
   default 48px section-header margin-bottom + section padding-bottom would
   double the bottom gap. Collapse the header margin so the gap below the
   subtitle equals the section top padding. */
#mood-block .section-header {
	margin-bottom: 0;
}

/* Outlined pillars-cta button placed on a dark section background — invert
   colors so the button stays readable (matches home recognition button on
   light bg, but adapted for dark surroundings). */
.section-dark .positioning-pillars-action .button-outline.pillars-cta {
	color: var(--white);
	border-color: var(--white);
}

.section-dark .positioning-pillars-action .button-outline.pillars-cta:hover,
.section-dark .positioning-pillars-action .button-outline.pillars-cta:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

/* DevOps services: let the intro span the full block width and centre the heading */
#devops-services .section-header {
	text-align: center;
}

#devops-services .section-header p {
	max-width: none;
	text-align: left;
	/* Match the space between the top of the section and the title */
	margin-top: var(--section-py);
}

/* DevOps tech logos: centred title, full-width intro, fixed 5-column logo grid */
#technology-logos .section-header {
	text-align: center;
}

#technology-logos .section-header p {
	max-width: none;
	text-align: center;
	/* Match the space between the top of the section and the title */
	margin-top: var(--section-py);
}

#technology-logos .tech-logo-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* DevOps tools and platforms panels: match panel padding-top to the
   "Where our specialist depth shows up" pillars on /services (28px). */
#tools-and-platforms .tech-groups-list .site-detail-card {
	padding: 28px;
}

/* DevOps tools and platforms: centred title, optional 50/50 split with image on the right */
#tools-and-platforms .section-header {
	text-align: center;
}

#tools-and-platforms .section-header p {
	margin-left: auto;
	margin-right: auto;
}

.tech-groups-with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.tech-groups-with-image .tech-groups-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: start;
}

.tech-groups-with-image .tech-groups-list .site-detail-card {
	min-height: 0;
}

/* DevOps services: each card has a logo on the left (vertically centred),
   title + description on the right. Description font-size matches the
   Leadership panels on /about-us. */
#devops-services .service-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
}

#devops-services .detail-card-media {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 88px;
	height: 88px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	align-self: center;
}

#devops-services .detail-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#devops-services .service-card h3 {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 8px;
	align-self: end;
}

#devops-services .service-card > p {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	align-self: start;
	font-size: 0.92rem;
	line-height: 1.7;
}

/* Mobile: logo + title share the top row, description spans the full
   panel width underneath — so the logo no longer occupies the whole
   left side of the card. */
@media (max-width: 640px) {
	#devops-services .service-card {
		align-items: start;
		row-gap: 14px;
	}

	#devops-services .detail-card-media {
		grid-row: 1;
		align-self: center;
	}

	#devops-services .service-card h3 {
		grid-row: 1;
		align-self: center;
		margin: 0;
	}

	#devops-services .service-card > p {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.tech-groups-with-image .tech-groups-media {
	position: relative;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.tech-groups-with-image .tech-groups-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 800px) {
	.tech-groups-with-image {
		grid-template-columns: 1fr;
	}
	.tech-groups-with-image .tech-groups-media {
		order: -1;
	}
}

.section-header-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: end;
	margin-bottom: 48px;
}

.section-header-split p {
	margin: 0;
	font-size: 1.2rem;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	position: relative;
	padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 80px);
	background: var(--white);
	overflow: hidden;
}

/* Background image — faded, positioned right */
.hero-bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 55%;
	height: 100%;
	pointer-events: none;
}

.hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--white) 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.3) 100%);
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero-content {
	max-width: 560px;
}

.hero h1 {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
	color: var(--text-on-light);
}

.hero p {
	font-size: 1.2rem;
	color: var(--text-on-light-muted);
	max-width: 50ch;
	line-height: 1.7;
	margin: 0;
}

.hero .actions .button-outline {
	color: var(--text-on-light);
	border-color: var(--border-on-light);
}

.hero .actions .button-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.hero-stats {
	display: flex;
	gap: 40px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--border-on-light);
}

.hero-stat strong {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--text-on-light);
	line-height: 1;
	margin-bottom: 4px;
}

.hero-stat span {
	font-size: 0.82rem;
	color: var(--text-on-light-muted);
	font-weight: 400;
}

.hero-eyebrow {
	display: inline-flex;
	margin-bottom: 14px;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.section-light .hero-eyebrow,
.section-white .hero-eyebrow,
.page-hero-light .hero-eyebrow {
	background: rgba(9, 148, 212, 0.12);
	color: var(--accent-dark);
}

.section-dark .hero-eyebrow,
.section-dark-alt .hero-eyebrow,
.page-hero-dark .hero-eyebrow {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-on-dark);
}

/* ============================================================
   PAGE HEADER — compact subpage banner
   ============================================================ */
.page-header {
	padding: 48px 0 40px;
	background: var(--grey-50);
	border-bottom: 1px solid var(--border-on-light);
}

.page-header h1 {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--text-on-light);
	margin: 0;
}

.page-header-intro {
	font-size: 1.2rem;
	color: var(--text-on-light-muted);
	max-width: 56ch;
	line-height: 1.6;
	margin: 16px 0 0;
}

.page-header .actions {
	margin-top: 20px;
}

.page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(26px, 3.6vw, 48px) 0;
}

.page-hero-light {
	background: linear-gradient(180deg, #ffffff 0%, var(--grey-50) 100%);
	color: var(--text-on-light);
}

.page-hero-dark {
	background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
	color: var(--text-on-dark);
}

/* Opt-in hero gradient that matches the home "Why our clients choose us"
   and the career "Explore more about us" section backgrounds. */
.page-hero-dark.page-hero-gradient-accent {
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--accent) 100%);
}

/* Generic hero subtitle/description spans inside .page-hero-intro. Used
   when a hero needs a larger subtitle line above its descriptive copy. */
.page-hero .page-hero-intro .hero-subtitle {
	display: block;
	margin-bottom: 14px;
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	font-weight: 600;
}

.page-hero .page-hero-intro .hero-description {
	display: block;
}

.page-hero-dark .page-hero-intro .hero-subtitle {
	color: var(--white);
}

.page-hero-media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 48%;
	pointer-events: none;
	opacity: 0.7;
}

.page-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero-light .page-hero-media::after,
.page-hero-dark .page-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
}

.page-hero-light .page-hero-media::after {
	background: linear-gradient(to right, rgba(255,255,255,0.85), rgba(255,255,255,0.05));
}

.page-hero-dark .page-hero-media::after {
	background: linear-gradient(to right, rgba(7,24,33,0.96), rgba(7,24,33,0.2));
}

/* KvantMail hero: split text/image roughly 50/50, keep the image inside
   the language-selector right edge, soften the seam between the two halves. */
.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-copy {
	max-width: 50%;
}

.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-copy h1 {
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	line-height: 1.12;
}

.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-media {
	inset: 0 140px 0 auto;
	width: clamp(360px, 46%, 600px);
	opacity: 1;
}

.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-media img {
	object-fit: contain;
	object-position: right center;
}

.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-media::after {
	background: transparent;
}

@media (max-width: 860px) {
	.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-copy {
		max-width: none;
	}
	.page-hero:has(img[src$="kvantmail-devices.webp"]) .page-hero-media {
		inset: 0 0 0 auto;
		width: 60%;
		opacity: 0.55;
	}
}

.page-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
	gap: 32px;
	align-items: end;
}

.page-hero-grid-single {
	grid-template-columns: minmax(0, 1fr);
}

.page-hero-grid-single .page-hero-copy {
	max-width: 760px;
}

.page-hero:has(~ #trust-intro) .page-hero-copy {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	text-align: center;
}

.page-hero:has(~ #trust-intro) {
	padding-bottom: clamp(26px, 3.6vw, 48px);
}

.page-hero:has(~ #trust-intro) .page-hero-intro {
	margin-left: auto;
	margin-right: auto;
	font-size: 1.5rem;
	font-weight: 500;
}

.page-hero:has(~ #trust-intro) .page-hero-intro .hero-intro-line {
	display: block;
}

/* /media-appearances/ hero: no media, no CTA — copy spans the full
   container width and stays horizontally centered. Scope keyed off the
   `#featured-articles` section that sits right after this hero. */
.page-hero:has(~ #featured-articles) .page-hero-copy {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	text-align: center;
}

.page-hero:has(~ #featured-articles) .page-hero-intro {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Equalize bottom padding with top padding (override the
   no-media-no-actions 18px rule). */
.page-hero:has(~ #featured-articles) {
	padding-bottom: clamp(26px, 3.6vw, 48px);
}

/* Inline no-wrap span used in hero intro text to force a single line for
   a specific sentence (e.g. /media-appearances/ second sentence). */
.page-hero-intro .hero-intro-nowrap {
	display: inline-block;
	white-space: nowrap;
}

/* Career hero: equalize bottom padding with top padding (override the
   no-media-no-actions rule), and remove the gap between the hero and the
   adjacent montage strip. */
.page-hero:has(~ #ai-first-and-culture) {
	padding-bottom: clamp(26px, 3.6vw, 48px);
}

#operating-principles .prose-block-text > ul > li::marker {
	color: var(--accent);
}

.page-hero-stats-band,
.site-section:has(> .container > .page-hero-stats) {
	background: var(--stripe-h);
	padding: 32px 0;
	color: var(--white);
}

.page-hero-stats-band .page-hero-stats,
.site-section > .container > .page-hero-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}

.page-hero-stat {
	text-align: center;
}

.page-hero-stat strong {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
}

.page-hero-stat span {
	display: block;
	margin-top: 8px;
	font-size: 1.1rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
}

/* Mobile-only label variant: hidden on tablet/desktop, swapped in on phones
   (see @media max-width: 640px below). Double class outranks `.page-hero-stat span`. */
.page-hero-stat .page-hero-stat-label-mobile {
	display: none;
}

@media (max-width: 640px) {
	.page-hero-stat .page-hero-stat-label {
		display: none;
	}
	.page-hero-stat .page-hero-stat-label-mobile {
		display: block;
	}
}

@media (max-width: 720px) {
	.page-hero-stats-band .page-hero-stats,
	.site-section > .container > .page-hero-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

.page-hero-copy h1 {
	margin-bottom: 18px;
}

.page-hero-copy h1 .hero-title-line2 {
	display: block;
}

/* Secure Software Development hero — long title needs ~5% reduction. */
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .page-hero-copy h1 {
	font-size: clamp(2.28rem, 4.75vw, 3.61rem);
}

/* Secure Software Development — "Proven experience" and "Selected press
   coverage" headers centred across the full panel width. */
#proof-and-recognitions .section-header,
#media-recognition .section-header {
	text-align: center;
}

#proof-and-recognitions .section-header p,
#media-recognition .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

#media-recognition .section-header p {
	color: #000;
}

/* Hero with no right-side media (e.g. /solutions): center copy across the full container */
.page-hero:not(:has(.page-hero-media)) .page-hero-grid {
	grid-template-columns: 1fr;
	max-width: none;
}

.page-hero:not(:has(.page-hero-media)) .page-hero-copy {
	text-align: center;
	max-width: var(--content-width);
	margin: 0 auto;
}

.page-hero:not(:has(.page-hero-media)) .page-hero-copy h1 {
	text-align: center;
}

.page-hero:not(:has(.page-hero-media)) .page-hero-copy .page-hero-intro {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Solutions-style hero (no image, no action buttons): tighten padding-bottom
   so the gap below the intro paragraph matches the gap above it (h1
   margin-bottom = 18px) — symmetric breathing room around the intro. */
.page-hero:not(:has(.page-hero-media)):not(:has(.actions)) {
	padding-bottom: 18px;
}

.page-hero-light .page-hero-copy h1 {
	color: var(--text-on-light);
}

.page-hero-dark .page-hero-copy h1 {
	color: var(--text-on-dark);
}

.page-hero-intro {
	margin: 0;
	max-width: 62ch;
	font-size: 1.2rem;
	line-height: 1.7;
}

.page-hero-light .page-hero-intro {
	color: var(--text-on-light-muted);
}

.page-hero-dark .page-hero-intro {
	color: var(--text-on-dark-muted);
}

.page-hero-panel {
	display: grid;
	gap: 16px;
	border-radius: var(--radius-lg);
	padding: 24px;
	backdrop-filter: blur(12px);
}

.page-hero-light .page-hero-panel {
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.page-hero-dark .page-hero-panel {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border-on-dark);
}

.hero-panel-metric strong {
	display: block;
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: 6px;
}

.hero-panel-metric span {
	display: block;
	font-weight: 600;
}

.hero-panel-metric p {
	margin: 8px 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
}

/* ============================================================
   LOGO GRID (client logos as images)
   ============================================================ */
.logo-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

/* Landing page "Two ways we create value" block — equal-height cards with
   image at the top and the CTA pinned to the bottom of each card. The whole
   card is a link, with the CTA rendered as a styled span (mirrors the
   solutions/kvantphone panel styling, including the cyan accent border). */
/* Match the "Why our clients choose us" gradient backdrop. */
.value-ways-section {
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--accent) 100%);
	/* Offset the hash-scroll target so the sticky header (72px) doesn't cover
	   the top of the section when navigating from the mega-menu panel. */
	scroll-margin-top: 72px;
}

.value-ways-section .section-header h2 {
	color: var(--white);
}

.value-ways-grid {
	gap: clamp(20px, 2vw, 32px);
	align-items: stretch;
}

.value-ways-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.value-ways-card.service-card:hover,
.value-ways-card.service-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	background: var(--bg-light);
}

/* Landing case-studies cards: full-card link with hover lift; the inner
   button-outline (now a <span>) flips to accent on card hover/focus to
   mirror the kvantphone/value-ways pattern. */
.case-track-card {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.home-section .case-track-card .actions {
	margin-top: auto;
}

.home-section .case-track-card:hover .actions .button-outline,
.home-section .case-track-card:focus-visible .actions .button-outline {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

/* Single "See case studies" button below the case-track grid, centred. */
.case-tracks-action {
	display: flex;
	justify-content: center;
	margin-top: var(--section-py);
}

.case-tracks-action .button-outline {
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
	background: transparent;
	color: var(--white);
	border-color: var(--white);
	/* Centre the label when it wraps to multiple lines (e.g. on mobile). */
	text-align: center;
}

.case-tracks-action .button-outline:hover,
.case-tracks-action .button-outline:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

/* Mobile: the three case-study track panels eat too much vertical space —
   hide them and keep just the title, intro, and the CTA button below. */
@media (max-width: 768px) {
	#case-tracks .grid-3 {
		display: none;
	}
}

/* Landing page panel buttons — unified to match the solutions/kvantphone
   panel CTA: cyan accent border, slight corner rounding (not pill), fills
   cyan on hover. Scoped to .home-section so it does not leak into shared
   service-card uses. Covers panel actions and the contact CTA email buttons. */
.home-section .service-card .actions .button-outline,
.home-section .service-card .actions .button-outline:link,
.home-section .service-card .actions .button-outline:visited,
.contact-cta .contact-actions .button-outline,
.contact-cta .contact-actions .button-outline:link,
.contact-cta .contact-actions .button-outline:visited {
	border-color: var(--white);
	background: transparent;
	border-radius: var(--radius);
}

.home-section .section-light .service-card .actions .button-outline,
.home-section .section-white .service-card .actions .button-outline {
	color: var(--primary);
}

.home-section .value-ways-card .actions .button-outline {
	color: var(--primary);
	border-color: var(--primary);
}

.home-section .section-dark .service-card .actions .button-outline,
.home-section .section-dark-alt .service-card .actions .button-outline,
.contact-cta .contact-actions .button-outline {
	color: var(--white);
}

.home-section .service-card .actions .button-outline:hover,
.home-section .service-card .actions .button-outline:focus-visible,
.home-section .value-ways-card:hover .actions .button-outline,
.home-section .value-ways-card:focus-visible .actions .button-outline {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

.contact-cta .contact-actions .button-outline:hover,
.contact-cta .contact-actions .button-outline:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

/* Landing contact-form panel fade-in: panel starts transparent and fades up
   to 1 over ~700ms once the .is-visible class is added by the toggle script. */
.contact-form-panel {
	opacity: 0;
	transition: opacity 0.7s ease;
}

.contact-form-panel.is-visible {
	opacity: 1;
}

/* Highlight the closing call-to-action sentence in pure white. */
.contact-form-panel .contact-copy p strong {
	color: var(--white);
}

.value-ways-card.service-card h3 {
	margin: 0 0 32px;
}

.value-ways-card .detail-card-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	margin-bottom: clamp(16px, 1.6vw, 22px);
}

.value-ways-card .detail-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.value-ways-card p {
	flex: 1;
}

.value-ways-card .actions {
	margin-top: clamp(16px, 1.6vw, 22px);
}

/* Landing page "As featured in" — small heading + a row of media-outlet
   logos rendered above the "More from Arenim" block. Logos are desaturated
   to keep the visual focus on the cards below; they regain color on hover. */
/* As featured in: extra padding-bottom so the logos have more breathing
   room before the next section begins (~32% more than the .section-header
   margin-bottom default of 48px). */
.home-section:has(> .container > .featured-in-logos) {
	padding-bottom: 63.36px;
}

.featured-in-logos {
	display: grid;
	grid-template-columns: 1fr 1fr auto 1fr 1fr;
	align-items: center;
	gap: clamp(12px, 2vw, 32px);
}

/* Featured-in nested inside the recognition block: breathing room above
   and below the title + logo row. */
.recognition-featured-in {
	margin: clamp(20px, 2.5vw, 36px) 0;
}

.recognition-featured-in h3 {
	font-size: clamp(1.4375rem, 2.5vw, 1.75rem);
	margin: 0 0 var(--section-py);
}

.featured-in-logo {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(28px, 2.6vw, 40px);
}

.featured-in-logo img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Per-logo visual-balance tweaks: scale individual logos so they read at
   a comparable size to the rest of the row. */
.featured-in-logo img[src$="financial-times.jpg"] {
	transform: scale(1.1);
}

.featured-in-logo img[src$="Forbes_logo_black.png"],
.featured-in-logo img[src$="politico.png"] {
	transform: scale(0.9);
}

/* Landing page "CORE SERVICES" + "FEATURED PRODUCTS" — eyebrow + title,
   grid of cards, centered CTA button below the grid. Button style mirrors
   #satisfied-customers .logo-wall-action .button for visual consistency. */
.core-services-action,
.featured-products-action {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 2vw, 32px);
}

/* Match the section's bottom padding so the space above each CTA equals
   the space below it. */
.core-services-action,
.featured-products-action {
	margin-top: var(--section-py);
}

/* Featured Products cards: when they carry an href they render as <a>; keep
   the card's own colours and add a hover lift like the other clickable panels. */
a.featured-products-card {
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

a.featured-products-card:hover,
a.featured-products-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Featured Products cards: centered product logo below the title.
   All three logos use the same max-height so they visually align across the row. */
.featured-products-card-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: clamp(12px, 1.5vw, 20px) 0 clamp(16px, 2vw, 24px);
}

.featured-products-card-logo img {
	max-height: clamp(36px, 4vw, 56px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.core-services-action .button,
.featured-products-action .button {
	border-radius: var(--radius);
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
	font-size: 1.425rem;
	padding: 14px 28px;
}

.core-services-action .button:hover,
.core-services-action .button:focus-visible,
.featured-products-action .button:hover,
.featured-products-action .button:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* Core Services panel: text on the left, illustration bleeding to the right.
   The card removes its own padding so the image cell can extend to the top,
   bottom, and right edges of the card; the text cell restores padding. */
.core-services-card.service-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	padding: 0;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

/* On non-touch (desktop) the card lifts on hover like the other panels —
   the blue arrow affordance is reserved for mobile (see the max-width rule). */
.core-services-card.service-card:hover,
.core-services-card.service-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.core-services-card-text {
	min-width: 0;
	padding: 32px;
	align-self: center;
}

/* Title + "clickable" arrow affordance on each panel. */
.core-services-card-titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

/* Higher specificity than the later `.service-card h3` rule so the title's
   margin is truly zeroed — otherwise its residual bottom margin pushes the
   text's centre line above the arrow's inside the centred flex row. */
.core-services-card .core-services-card-titlerow h3 {
	margin: 0;
}

.core-services-card-arrow {
	flex: none;
	/* Hidden on desktop — the hover lift signals clickability there. Shown
	   on mobile (see the max-width rule below) where there is no hover. */
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--accent);
	border-radius: 50%;
	color: var(--accent);
}

.core-services-card-arrow svg {
	width: 18px;
	height: 18px;
}

.core-services-card-media {
	min-width: 0;
	align-self: stretch;
	overflow: hidden;
}

.core-services-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 560px) {
	.core-services-grid,
	.featured-products-grid {
		grid-template-columns: 1fr;
	}
	.core-services-card.service-card {
		grid-template-columns: 1fr;
	}
	/* Show only the top half of the mockup (natural ratio is 800:560, so an
	   800:280 box keeps the top 50% and clips the bottom). */
	.core-services-card-media {
		aspect-ratio: 800 / 280;
	}
	.core-services-card-media img {
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	/* /services/ overview bands: make the service-card images match the home
	   "Engineering services that move business forward" cards on phones — a wide
	   800:280 banner showing the top half of the illustration (cover, top), not
	   the full contained SVG. Scoped to the four overview-band ids; id selectors
	   outrank the generic stacked-band SVG-contain rules. */
	#ai-native-software-development .feature-visual,
	#secure-software-development .feature-visual,
	#digital-transformation-with-ai .feature-visual,
	#devops-and-it-services .feature-visual {
		aspect-ratio: 800 / 280;
		min-height: 0;
		padding: 0;
		overflow: hidden;
	}
	#ai-native-software-development .feature-img,
	#secure-software-development .feature-img,
	#digital-transformation-with-ai .feature-img,
	#devops-and-it-services .feature-img {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		object-position: top;
	}
}

/* Landing page "Why our clients choose us" — gradient navy→cyan section with
   six explore-card style panels in a 3-column grid. */
.why-us-section {
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--accent) 100%);
}

.why-us-section .section-header {
	margin-bottom: clamp(28px, 3vw, 44px);
	color: var(--white);
}

.why-us-section .section-header h2 {
	color: var(--white);
}

.why-us-section .why-us-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	min-height: 100%;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.why-us-section .why-us-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.why-us-number {
	font-family: 'Roboto Mono', monospace;
	font-size: clamp(1.3rem, 1.6vw, 1.6rem);
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.04em;
	line-height: 1;
}

.why-us-section .why-us-card h3 {
	margin: 0;
	color: var(--primary);
	font-size: clamp(1.1rem, 1.3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
}

.why-us-section .why-us-card p {
	margin: 0;
	color: var(--text-on-light);
	line-height: 1.55;
}

/* The leading icon is a mobile-only affordance for the condensed title list. */
.why-us-icon {
	display: none;
}

/* The heading reads "clients" on desktop, "customers" on mobile (EN). */
.why-us-title-mobile {
	display: none;
}

@media (max-width: 900px) {
	.why-us-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.why-us-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.why-us-title-full {
		display: none;
	}
	.why-us-title-mobile {
		display: inline;
	}

	/* Mobile: collapse the six panels into a plain title list on the section's
	   gradient — drop the card chrome and descriptions, prefix each title with
	   a relevant icon. */
	.why-us-section .why-us-card {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		min-height: 0;
		gap: 0;
	}
	.why-us-section .why-us-card:hover {
		transform: none;
		box-shadow: none;
	}
	.why-us-section .why-us-card::before {
		display: none;
	}
	.why-us-section .why-us-card p {
		display: none;
	}
	.why-us-card-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.why-us-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 26px;
		height: 26px;
		color: var(--white);
	}
	.why-us-icon svg {
		width: 100%;
		height: 100%;
		stroke-width: 1.5;
	}
	.why-us-section .why-us-card h3 {
		color: var(--white);
		font-size: 1.1rem;
		font-weight: 400;
	}
}

/* Landing page intro paragraph (under the clientsTitle h2) — same accent +
   highlight styling pattern as the about-us hero intro. */
.clients-intro {
	max-width: none;
	margin: clamp(28px, 3vw, 44px) 0 0;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--text-on-light);
	text-align: center;
}

.clients-intro u {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

.clients-intro .intro-accent {
	display: block;
	color: var(--primary);
	font-size: 1.37rem;
}

.clients-intro .intro-highlight {
	display: block;
	margin-top: 12px;
	font-size: 1.37rem;
	color: var(--primary);
}

/* Mobile: flow the two emphasised sentences continuously (no forced break)
   and match the hero intro's font size. */
@media (max-width: 640px) {
	.clients-intro .intro-accent,
	.clients-intro .intro-highlight {
		display: inline;
		margin-top: 0;
		font-size: 1.2rem;
	}
	.clients-intro .intro-highlight::before {
		content: "\00a0";
	}
}

/* Landing page trust pillars — four trust messages with outline-style icons
   above (matching the kvantphone.com hero badge aesthetic) and the heading
   centred underneath. */
.trust-pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
	margin-top: clamp(28px, 3vw, 44px);
}

.trust-pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: clamp(12px, 1.6vw, 20px) clamp(8px, 1vw, 16px);
}

.trust-pillar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	flex: none;
}

.trust-pillar-icon img,
.trust-pillar-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.trust-pillar h3 {
	margin: 0;
	color: var(--primary);
	font-size: clamp(1.1rem, 1.4vw, 1.3rem);
	font-weight: 400;
	line-height: 1.3;
	max-width: 22ch;
}

@media (max-width: 900px) {
	.trust-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	/* Keep the four trust pillars in a 2×2 grid on mobile, with icons 25%
	   smaller so they fit two-up. */
	.trust-pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trust-pillar-icon {
		width: 72px;
		height: 72px;
	}
}

.logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 400 / 256;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-light .logo-item {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.section-dark .logo-item {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border-on-dark);
}

.logo-item:hover {
	transform: translateY(-2px);
}

.section-light .logo-item:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.logo-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
}

/* Fallback text pills for logos without images */
.logo-pill {
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 0.92rem;
	text-align: center;
}

.section-light .logo-pill {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	color: var(--text-on-light);
}

/* ============================================================
   GRID SYSTEM
   ============================================================ */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Legacy compat */
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* ============================================================
   FEATURE BANDS (services alternating layout)
   ============================================================ */
.feature-stack {
	display: grid;
	gap: 32px;
}

.feature-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* On dark backgrounds */
.section-dark .feature-band,
.section-dark-alt .feature-band {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

/* On light backgrounds */
.section-light .feature-band,
.section-white .feature-band {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.feature-band-reversed .feature-copy {
	order: 2;
}

.feature-band-reversed .feature-visual {
	order: 1;
}

/* featureBand with imageAfterTitleMobile: a duplicate title is rendered as the
   first child and shown only when the band stacks (see the ≤840px rule), so the
   order becomes title → image → body/button. Hidden on the side-by-side desktop
   layout, where the in-copy title is used instead. */
.feature-band-mobile-title {
	display: none;
}

.feature-copy {
	padding: clamp(32px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.feature-copy p {
	margin: 0 0 4px;
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	display: grid;
	gap: 10px;
}

.feature-list li {
	position: relative;
	padding-left: 20px;
	font-size: 0.95rem;
}

.feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5lh;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.feature-visual {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: stretch;
}

.feature-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: 0;
}

.feature-img[src*="Revolut_inappcalling_KvantPhone"] {
	object-position: center center;
}

.feature-img[src*="SCC_architecture"] {
	object-fit: contain;
	padding: 16px;
}

.feature-img[src*="iphone-contacts-callscreen-elder"] {
	object-fit: contain;
	width: 82%;
	height: auto;
	min-height: 0;
	margin: 0 auto;
}

#architecture .feature-band {
	grid-template-columns: 1fr 2fr;
}

#total-security .feature-band {
	grid-template-columns: 1.4fr 1fr;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

#total-security .feature-band::before {
	display: none;
}

#total-security .feature-copy {
	padding-left: 0;
	padding-top: 8px;
	padding-bottom: 8px;
}

#total-security .feature-copy h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	margin-bottom: 1.4em;
}

#total-security .feature-copy > p {
	margin-bottom: 1.4em;
}

#total-security .feature-copy > p:last-of-type {
	margin-bottom: 0;
}

#total-security .feature-quantum-line {
	display: block;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cyan-400);
}

#b2g-defence .feature-visual {
	border-right: 1px solid rgba(20, 46, 65, 0.1);
}

.action-followup-link {
	display: inline-block;
	text-align: center;
	color: var(--accent);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	text-decoration: none;
}

.action-followup-link:hover,
.action-followup-link:focus-visible {
	color: var(--primary);
	text-decoration: none;
}

.feature-footer {
	grid-column: 1 / -1;
	padding: 0 clamp(32px, 4vw, 48px) clamp(32px, 4vw, 48px);
	margin: 0;
	color: var(--text-muted, inherit);
}

#main-advantages .section-header p,
#distinguishing-features .section-header p,
#kvantphone-advantages .section-header p,
#quantum-resistant-features .section-header p,
#secure-yet-convenient .section-header p {
	max-width: none;
}

#quantum-resistant-features .service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 16px;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 16px;
}

#quantum-resistant-features .service-card::before,
#quantum-resistant-features .service-card::after {
	display: none;
}

#quantum-resistant-features .service-card h3 {
	order: 1;
	margin: 0;
}

#quantum-resistant-features .detail-card-media {
	order: 2;
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: var(--grey-100, #f0f3f5);
	border: none;
	border-radius: 50%;
	padding: 12px;
}

#quantum-resistant-features .detail-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#quantum-resistant-features .service-card p {
	order: 3;
	margin: 0;
}

.section-actions {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

#no-backdoor .gradient-stripe-content p {
	max-width: none;
}

.visual-scene {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.section-dark .visual-scene,
.section-dark-alt .visual-scene {
	background:
		linear-gradient(180deg, rgba(7, 24, 33, 0.6), rgba(20, 46, 65, 0.8));
}

.section-light .visual-scene,
.section-white .visual-scene {
	background: linear-gradient(180deg, var(--grey-50), var(--grey-100));
}

.visual-window,
.visual-window-small {
	position: absolute;
	border-radius: var(--radius);
}

.section-dark .visual-window,
.section-dark .visual-window-small {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(132, 174, 194, 0.15);
}

.section-light .visual-window,
.section-light .visual-window-small {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.visual-window { inset: 24px 28px 72px; }
.visual-window-small { width: 34%; height: 28%; right: 24px; bottom: 22px; }

.visual-badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 72px;
	height: 72px;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--accent), var(--accent-dark));
	box-shadow: 0 12px 32px rgba(9, 148, 212, 0.25);
}

/* Visual scene pattern overlays */
.visual-ai::before,
.visual-security::before,
.visual-transformation::before,
.visual-devops::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.6;
}

.visual-ai::before {
	background:
		linear-gradient(90deg, transparent 0 8%, rgba(132, 174, 194, 0.18) 8% 8.6%, transparent 8.6% 100%),
		repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(132, 174, 194, 0.08) 26px, rgba(132, 174, 194, 0.08) 27px);
}

.visual-security::before {
	background:
		radial-gradient(circle at 50% 42%, rgba(9, 148, 212, 0.24), transparent 24%),
		conic-gradient(from 120deg at 50% 42%, rgba(132, 174, 194, 0.1), transparent 25%, rgba(9, 148, 212, 0.22), transparent 55%, rgba(132, 174, 194, 0.1));
}

.visual-transformation::before {
	background:
		linear-gradient(135deg, rgba(132, 174, 194, 0.1) 0 25%, transparent 25% 100%),
		repeating-linear-gradient(90deg, rgba(132, 174, 194, 0.08) 0 1px, transparent 1px 52px),
		repeating-linear-gradient(0deg, rgba(132, 174, 194, 0.08) 0 1px, transparent 1px 52px);
}

.visual-devops::before {
	background:
		radial-gradient(circle at 30% 30%, rgba(9, 148, 212, 0.22), transparent 22%),
		radial-gradient(circle at 70% 72%, rgba(132, 174, 194, 0.18), transparent 20%);
}

/* ============================================================
   CARDS — General purpose
   ============================================================ */
.card {
	border-radius: var(--radius-lg);
	padding: 32px;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-dark .card,
.section-dark-alt .card {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .card,
.section-white .card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.card:hover {
	transform: translateY(-2px);
}

.section-light .card:hover,
.section-white .card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* ============================================================
   DESIGN BOX — reusable panel with left gradient stripe
   Applied via `.design-box` class on any container.
   ============================================================ */
.design-box {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	padding-left: calc(32px + var(--stripe-width));
}

.design-box::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
}

/* Service/case-study cards (legacy compat) */
.service-card {
	border-radius: var(--radius-lg);
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.section-dark .service-card {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-dark-alt .service-card {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .service-card,
.section-white .service-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	overflow: hidden;
}

.section-light .service-card::before,
.section-white .service-card::before,
.why-us-section .why-us-card::before {
	top: -1px;
	bottom: -1px;
	left: -1px;
}

.service-card h3 {
	margin-bottom: 10px;
}

.service-card > *:last-child {
	margin-bottom: 0;
}

/* Remove the old radial glow after pseudo */
.service-card::after {
	display: none;
}

/* Left gradient stripe — primary design motif */
.service-card::before,
.award-card::before,
.about-card::before,
.feature-band::before,
.case-study-band::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

.award-card {
	position: relative;
	overflow: hidden;
}

.feature-band {
	position: relative;
	overflow: hidden;
}

/* ============================================================
   ABOUT SECTION — full-width photo with overlapping card
   ============================================================ */
.about-section {
	position: relative;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.about-photo-banner {
	position: relative;
	width: 100%;
	height: clamp(280px, 40vw, 480px);
	overflow: hidden;
}

.about-photo-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.about-photo-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, var(--grey-50) 0%, transparent 100%);
	pointer-events: none;
}

.about-card {
	position: relative;
	overflow: hidden;
	margin-top: -80px;
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: clamp(32px, 4vw, 48px);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border-on-light);
	margin-bottom: clamp(48px, 6vw, 80px);
}

.about-card h2 {
	margin-bottom: 20px;
}

.about-card-body {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	margin-top: 8px;
}

.about-card-text p {
	margin: 0 0 12px;
	color: var(--text-on-light-muted);
	line-height: 1.7;
}

.about-card-text .actions {
	margin-top: 20px;
}

.leadership-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-content: start;
}

.leader-card {
	padding: 14px 16px;
	border-radius: var(--radius);
	transition: border-color 200ms ease;
	background: var(--grey-50);
	border: 1px solid var(--border-on-light);
}

.leader-card:hover {
	border-color: var(--accent);
}

.leader-card strong {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text-on-light);
}

.leader-card span {
	font-size: 0.85rem;
	color: var(--text-on-light-muted);
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-grid {
	align-items: stretch;
}

.product-card {
	display: grid;
	align-content: start;
}

.product-visual {
	position: relative;
	min-height: 200px;
	margin-bottom: 20px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.product-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 200px;
}

.product-placeholder {
	position: relative;
	width: 100%;
	min-height: 200px;
	background:
		radial-gradient(circle at 28% 26%, rgba(9, 148, 212, 0.2), transparent 22%),
		linear-gradient(180deg, rgba(7, 24, 33, 0.7), rgba(20, 46, 65, 0.85));
}

.device {
	position: absolute;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.section-dark .device {
	border: 1px solid rgba(132, 174, 194, 0.15);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.section-light .device {
	border: 1px solid var(--border-on-light);
	background: var(--white);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.device::before {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 12px;
	background:
		repeating-linear-gradient(0deg, rgba(132, 174, 194, 0.1) 0 1px, transparent 1px 24px),
		linear-gradient(180deg, rgba(9, 148, 212, 0.12), transparent);
}

.device-large { width: 42%; height: 78%; left: 14%; top: 12%; }
.device-small { width: 34%; height: 62%; right: 12%; bottom: 10%; }

.meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font-size: 0.85rem;
}

.section-dark .meta { color: var(--text-on-dark-muted); }
.section-light .meta { color: var(--text-on-light-muted); }

/* ============================================================
   AWARD GRID
   ============================================================ */
/* ============================================================
   AWARDS SHOWCASE — interactive fan stack
   ============================================================ */
.site-section#awards-and-recognitions {
	background: var(--white);
	color: var(--text-on-light);
	padding-bottom: calc(var(--section-py) / 2);
}

.site-section#awards {
	background: var(--white);
	color: var(--text-on-light);
}

#awards-and-recognitions .section-header,
#awards .section-header {
	text-align: center;
	margin-bottom: var(--section-py);
}

#awards .section-header h2,
#awards .section-header p {
	max-width: none;
}

#awards-and-recognitions h2,
#awards h2 {
	color: var(--text-on-light);
}

#awards-and-recognitions .section-header p,
#awards .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}

#awards-and-recognitions .awards-descriptions,
#awards .awards-descriptions {
	color: var(--text-on-light-muted);
}

/* Management section: force light background with white cards, centred title */
.site-section#management {
	background: var(--bg-light);
	color: var(--text-on-light);
}

#management .section-header {
	text-align: center;
}

#management .section-header h2 {
	color: var(--text-on-light);
}

#management .service-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	color: var(--text-on-light);
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 40px 40px auto;
	column-gap: 20px;
	align-items: center;
	align-content: start;
}

#management .service-card .detail-card-media {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

#management .service-card .detail-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#management .service-card h3 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	align-self: end;
}

#management .service-card .card-kicker {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	align-self: start;
}

#management .service-card .actions {
	grid-column: 3;
	grid-row: 1 / 3;
	align-self: center;
	margin: 0;
}

#management .service-card > p {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 16px 0 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--text-on-light-muted);
}

#management .leadership-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--primary);
	transition: color 160ms ease, transform 160ms ease;
}

#management .leadership-linkedin:hover,
#management .leadership-linkedin:focus-visible {
	color: var(--secondary);
	transform: translateY(-1px);
}

#management .leadership-linkedin svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Satisfied customers: standard title above the logo block (no full-bleed
   stripe, no white sliver above). */
#satisfied-customers > .container > .section-header {
	text-align: center;
}

#satisfied-customers .section-header h2 {
	color: var(--primary);
	text-align: center;
}

/* Services variant (marquee): drop the blue stripe, center title + intro on white, intro in dark blue */
#satisfied-customers:has(.section-header > p) {
	padding-top: var(--section-py);
}

#satisfied-customers:has(.section-header > p) > .container > .section-header {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background: none;
}

#satisfied-customers:has(.section-header > p) .section-header h2 {
	color: var(--text-on-light);
}

#satisfied-customers:has(.section-header > p) .section-header p {
	color: var(--primary);
	text-align: center;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Swap satisfied-customers → white, our-story-timeline → grey */
#satisfied-customers {
	background: var(--white);
}

.site-section#our-story-timeline {
	background: var(--bg-light);
}

/* References grid: drop the panel chrome, let the logos speak. */
#satisfied-customers .logo-grid {
	grid-template-columns: repeat(4, 1fr);
	column-gap: clamp(24px, 3vw, 56px);
	row-gap: clamp(2px, 0.25vw, 4px);
	align-items: center;
}

#satisfied-customers .logo-item {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	aspect-ratio: 2;
}

#satisfied-customers .logo-item:hover {
	box-shadow: none;
	transform: none;
}

#satisfied-customers .logo-item img {
	padding: 0;
	max-width: 70%;
	max-height: 94%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 200ms ease;
}

/* Per-logo scale tweaks so wordmarks and icon-only marks feel balanced. */
#satisfied-customers .logo-item img[src$="/profession.png"] {
	max-width: 85%;
	max-height: 60%;
}

#satisfied-customers .logo-item img[src$="/amrest.png"] {
	max-width: 52.5%;
	max-height: 71%;
	transform: translateY(-14%);
}

#satisfied-customers .logo-item:hover img[src$="/amrest.png"] {
	transform: translateY(-14%) scale(1.05);
}

#satisfied-customers .logo-item img[src$="/one.png"],
#satisfied-customers .logo-item img[src$="/tixr.png"] {
	max-width: 59.5%;
	max-height: 80%;
}

#satisfied-customers .logo-item img[src$="/rossmann.png"] {
	max-width: 85%;
	max-height: 100%;
}

#satisfied-customers .logo-item img[src$="/server-garden.png"] {
	max-width: 80.5%;
	max-height: 100%;
	transform: scale(1.15);
}

#satisfied-customers .logo-item:hover img[src$="/server-garden.png"] {
	transform: scale(1.2075);
}

#satisfied-customers .logo-item img[src$="/kpmg.png"] {
	max-width: 56%;
	max-height: 75%;
}

#satisfied-customers .logo-item img[src$="/bauhaus.svg"] {
	max-width: 78%;
	max-height: 99%;
}

#satisfied-customers .logo-item:hover img {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	#satisfied-customers .logo-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Trim the reference wall on mobile: drop the One and Budapesti Közművek
	   marks so the remaining logos stay on tidy rows. */
	#satisfied-customers .logo-item:has(img[src$="/one.png"]),
	#satisfied-customers .logo-item:has(img[src$="/budapesti-kozmuvek.png"]) {
		display: none;
	}

	/* Swap the last pair on mobile so Vodafone sits left of Tixr. */
	#satisfied-customers .logo-item:has(img[src$="/vodafone.png"]) {
		order: 1;
	}
	#satisfied-customers .logo-item:has(img[src$="/tixr.png"]) {
		order: 2;
	}
}

#satisfied-customers .logo-wall-action {
	display: flex;
	justify-content: center;
	margin-top: clamp(12px, 1.25vw, 20px);
}

#satisfied-customers .logo-wall-action .button {
	border-radius: var(--radius);
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
	font-size: 1.425rem;
	padding: 14px 28px;
}

#satisfied-customers .logo-wall-action .button:hover,
#satisfied-customers .logo-wall-action .button:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.awards-showcase {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.awards-stack {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	padding: 0 0 24px;
	min-height: 300px;
}

.awards-static {
	display: block;
	width: 100%;
	max-width: 864px;
}

.awards-static img {
	display: block;
	width: 100%;
	height: auto;
}

.award-item {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 -38px;
	cursor: pointer;
	transform-origin: bottom center;
	transition: transform 300ms ease, filter 300ms ease, z-index 0ms;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
}

.award-item img {
	display: block;
	width: 160px;
	height: auto;
	max-height: 260px;
	object-fit: contain;
}

/* Straight line layout — all aligned on the same baseline; z-index staggered so middle cards sit on top */
.award-item[data-award-index="0"]  { z-index: 1; }
.award-item[data-award-index="1"]  { z-index: 2; }
.award-item[data-award-index="2"]  { z-index: 3; }
.award-item[data-award-index="3"]  { z-index: 4; }
.award-item[data-award-index="4"]  { z-index: 5; }
.award-item[data-award-index="5"]  { z-index: 5; }
.award-item[data-award-index="6"]  { z-index: 4; }
.award-item[data-award-index="7"]  { z-index: 3; }
.award-item[data-award-index="8"]  { z-index: 2; }
.award-item[data-award-index="9"]  { z-index: 1; }
.award-item[data-award-index="10"] { z-index: 1; }
.award-item[data-award-index="11"] { z-index: 1; }

.award-item:hover,
.award-item:focus-visible {
	transform: translateY(-24px) scale(1.2);
	z-index: 10;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.25));
}

.awards-descriptions {
	margin: 0;
	text-align: center;
	max-width: 900px;
	line-height: 1.7;
	color: var(--text-on-light-muted);
}

.award-desc-item {
	font-size: 0.92rem;
	transition: font-size 200ms ease, color 200ms ease, font-weight 200ms ease;
}

.award-desc-item.is-highlighted {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--primary);
}

.awards-sep {
	color: var(--accent);
	margin: 0 4px;
	vertical-align: middle;
}

.award-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.award-card {
	border-radius: var(--radius-lg);
	padding: 28px;
	text-align: center;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.award-card:hover {
	transform: translateY(-3px);
}

.section-dark .award-card {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .award-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.section-light .award-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.award-image {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.award-image img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.award-card h3 {
	font-size: 1.05rem;
	margin-bottom: 8px;
}

.card-note {
	font-size: 0.92rem;
}

.section-dark .card-note { color: var(--text-on-dark-muted); }
.section-light .card-note { color: var(--text-on-light-muted); }

/* Optional subtitle line that sits between a card's h3 and its body copy.
   Lighter weight + accent color so it reads as a tagline. The section-*
   overrides exist because .section-white/light/dark generic `p` rules win
   on specificity (0,1,1) over a bare `.card-subtitle` (0,1,0). */
.card-subtitle {
	margin: 8px 0 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--accent);
}

.section-white .card-subtitle,
.section-light .card-subtitle {
	color: var(--accent);
}

#open-positions .card-subtitle {
	font-size: 1.15rem;
}

.section-dark .card-subtitle,
.section-dark-alt .card-subtitle {
	color: var(--accent-hover);
}

/* ============================================================
   CONTACT CTA
   ============================================================ */
.contact-cta {
	padding: var(--section-py) 0;
	text-align: center;
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 35%, var(--accent) 100%);
}

.contact-cta .contact-actions .button-outline {
	font-size: 1.425rem;
	padding: 14px 28px;
}

.site-section {
	padding: var(--section-py) 0;
	scroll-margin-top: 96px;
}

.prose-block {
	max-width: 74ch;
}

.prose-block p {
	margin: 0 0 18px;
}

.prose-block-wide {
	max-width: none;
}

.prose-block-wide .prose-block-text > h3 {
	margin: 32px 0 18px;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: inherit;
}

.prose-block-wide .prose-block-text > ul {
	margin: 0 0 18px;
	padding-left: 1.4em;
}

.prose-block-wide .prose-block-text > ul > li {
	margin: 0 0 8px;
	line-height: 1.6;
}

.prose-block-wide .prose-block-text > ul ul {
	margin: 8px 0 8px;
	padding-left: 1.4em;
}

.prose-block-wide .prose-block-text > ul ul li {
	margin: 0 0 4px;
}

.prose-block-wide a.cookie-link {
	color: var(--cyan-400);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.prose-block-wide a.cookie-link:hover,
.prose-block-wide a.cookie-link:focus-visible {
	color: var(--cyan-500);
	text-decoration: underline;
}

.site-detail-card {
	min-height: 100%;
}

/* Solutions products (#kvantphone): make the entire card clickable.
   The button keeps the visible affordance, but a transparent ::before
   stretches across the whole card so a hover anywhere triggers the
   button's :hover state and a click anywhere fires its href. */
#kvantphone .site-detail-card {
	position: relative;
}

#kvantphone .site-detail-card:has(a.button-outline) {
	cursor: pointer;
}

#kvantphone .site-detail-card .actions .button-outline::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Solutions products (#kvantphone): lift the product name (h3) above the
   image on each panel; matches the home/value-ways treatment. */
#kvantphone .site-detail-card {
	display: flex;
	flex-direction: column;
}

#kvantphone .site-detail-card h3 {
	order: -1;
	margin: 0 0 32px;
}

.detail-card-media {
	margin-bottom: 18px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--grey-50);
	border: 1px solid var(--border-on-light);
}

.detail-card-media img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.detail-card-media-award {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-height: 160px;
}

.detail-card-media-award img {
	width: auto;
	max-width: min(100%, 180px);
	height: 110px;
	object-fit: contain;
}

/* Secure Call Center card: the call-center diagram has key elements at the
   edges, so contain-fit it on a white background instead of cropping. */
#kvantphone .detail-card-media:has(> img[src$="secure-call-center.png"]) {
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

#kvantphone .detail-card-media img[src$="secure-call-center.png"] {
	object-fit: contain;
	padding: 16px;
}

.detail-quote {
	margin: 18px 0 0;
	padding-left: 16px;
	border-left: 3px solid var(--accent);
	font-size: 0.96rem;
	line-height: 1.7;
}

.testimonial-slider {
	position: relative;
	margin-top: clamp(32px, 4vw, 56px);
}

.testimonial-slides {
	display: grid;
	grid-template-areas: "stack";
}

.testimonial-slides > .testimonial-band {
	grid-area: stack;
}

.testimonial-band {
	margin: 0 10%;
	padding: 0 16px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"photo quote"
		"attribution quote";
	column-gap: clamp(48px, 6vw, 80px);
	row-gap: 12px;
	align-items: start;
	transition: opacity 0.35s ease;
}

.testimonial-band[data-active="false"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.testimonial-band[data-active="true"] {
	opacity: 1;
	visibility: visible;
}

.testimonial-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bg-white);
	color: var(--text-on-light);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

.testimonial-arrow svg {
	width: 22px;
	height: 22px;
}

.testimonial-arrow-prev {
	left: 16px;
}

.testimonial-arrow-next {
	right: 16px;
}

.testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.testimonial-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease;
}

.testimonial-dot[data-active="true"] {
	background: var(--accent);
}

@media (max-width: 640px) {
	.testimonial-arrow-prev {
		left: 4px;
	}

	.testimonial-arrow-next {
		right: 4px;
	}
}

.testimonial-photo {
	grid-area: photo;
	justify-self: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.testimonial-quote {
	grid-area: quote;
	margin: 0;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: inherit;
	align-self: center;
}

.testimonial-quote::before {
	content: "“";
	margin-right: 2px;
}

.testimonial-quote::after {
	content: "”";
	margin-left: 2px;
}

.testimonial-attribution {
	grid-area: attribution;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.testimonial-author {
	font-weight: 600;
	font-size: 1.2rem;
	white-space: nowrap;
}

.testimonial-role {
	font-size: 1rem;
	opacity: 0.8;
	white-space: nowrap;
}

.testimonial-company-logo {
	margin-top: 8px;
	max-width: 96px;
	height: auto;
	display: block;
}

@media (max-width: 640px) {
	.testimonial-band {
		grid-template-columns: 1fr;
		grid-template-areas:
			"photo"
			"attribution"
			"quote";
		column-gap: 0;
		/* Release the quote to the full width of the block on mobile. */
		margin: 0;
		padding: 0;
	}

	.testimonial-attribution {
		width: auto;
	}
}

.timeline-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.timeline-item {
	border-radius: var(--radius-lg);
	padding: 28px;
	position: relative;
}

.section-dark .timeline-item,
.section-dark-alt .timeline-item {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .timeline-item,
.section-white .timeline-item {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.timeline-year {
	display: inline-flex;
	margin-bottom: 14px;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
}

.section-light .timeline-year,
.section-white .timeline-year {
	background: rgba(9, 148, 212, 0.12);
	color: var(--accent-dark);
}

.section-dark .timeline-year,
.section-dark-alt .timeline-year {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-on-dark);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.88rem;
	font-weight: 600;
}

.section-light .tag-pill,
.section-white .tag-pill {
	background: var(--grey-50);
	color: var(--text-on-light);
	border: 1px solid var(--border-on-light);
}

.section-dark .tag-pill,
.section-dark-alt .tag-pill {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-on-dark);
	border: 1px solid var(--border-on-dark);
}

.video-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 24px;
	align-items: start;
}

.video-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-on-light);
	background: #000;
}

.section-dark .video-frame,
.section-dark-alt .video-frame {
	border-color: var(--border-on-dark);
}

.video-frame iframe {
	display: block;
	width: 100%;
	min-height: 360px;
	border: 0;
}

/* Thumbnail-link variant of a video section: a clickable poster with a
   centered YouTube play glyph that opens the video in a new tab, mirroring the
   podcast cards on /media-appearances/. */
.video-frame .video-thumb-link {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video-frame .video-thumb-link .link-card-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	transition: transform 300ms ease;
}

.video-frame .video-thumb-link:hover .link-card-thumb {
	transform: scale(1.03);
}

.video-frame .video-thumb-link:hover .link-card-play {
	transform: scale(1.08);
}

.cta-note {
	margin-top: 18px !important;
	font-size: 0.92rem;
}

.contact-inner {
	max-width: 640px;
	margin: 0 auto;
}

.contact-inner h2 {
	margin-bottom: 16px;
}

.contact-inner p {
	margin: 0 0 32px;
	font-size: 1.2rem;
}

.contact-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.social-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 32px;
}

.social-row a {
	font-weight: 500;
	font-size: 0.95rem;
	transition: color 200ms ease;
}

.section-dark .social-row a { color: var(--text-on-dark-muted); }
.section-dark .social-row a:hover { color: var(--white); }
.section-light .social-row a { color: var(--text-on-light-muted); }
.section-light .social-row a:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--bg-light);
	border-top: 1px solid var(--border-on-light);
	padding: 64px 0 32px;
	color: var(--primary);
	font-size: 1rem;
}

.footer-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.footer-top {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--border-on-light);
}

/* Centre the Engineering-as-a-Service column visually between the right edge
   of the widest item in About us ("Awards & Recognitions") and the left edge
   of Products & Solutions, then shift cols 2-4 right by 48px so they sit
   proportionally between col 1 and the contact column.
   nth-of-type (not nth-child) so these count only the four <section> columns —
   the leading <div class="footer-nav-mobile"> (mobile menu, display:none here)
   must not shift the indices. */
.footer-top > .footer-column:nth-of-type(2) {
	transform: translateX(calc(-25px + 48px - 12px - 5px));
}

.footer-top > .footer-column:nth-of-type(3) {
	transform: translateX(48px);
}

.footer-top > .footer-column:nth-of-type(4) {
	transform: translateX(63px);
}

.footer-about {
	position: relative;
	/* Right-align the column so its widest item ("support@arenim.com") reaches
	   the footer's right edge (which lines up vertically with the right edge of
	   the EN label in the header). */
	transform: translateX(59px);
}

.footer-brand {
	display: block;
	height: 24px;
	width: auto;
	filter: brightness(0) saturate(100%) invert(24%) sepia(30%) saturate(1118%) hue-rotate(170deg) brightness(92%) contrast(93%);
}

.footer-contact-block {
	display: grid;
	gap: 20px;
}

/* Trust badges under the contact pair — mobile only (see ≤960px media query). */
.footer-about-badges {
	display: none;
}

/* Footer menu mirrored from the hamburger drawer — phone only (see ≤640px). */
.footer-nav-mobile {
	display: none;
}

/* Copyright: full string on desktop, shortened on mobile (see ≤960px). */
.footer-copyright-short {
	display: none;
}

.footer-contact-group + .footer-contact-group {
	margin-top: 2.5em;
}

.footer-contact-group h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--primary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer-contact-email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
	font-size: 1rem;
	margin-bottom: 8px;
}

.footer-contact-email:hover {
	color: var(--secondary);
	font-weight: 700;
}

.footer-contact-group ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}

.footer-contact-group li {
	color: var(--primary);
	font-size: 1rem;
}

.footer-contact-group li a {
	color: var(--primary);
}

.footer-contact-group li a:hover {
	color: var(--secondary);
	font-weight: 700;
}


.footer-bottom-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.footer-bottom-socials a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
	font-size: 1rem;
}

.footer-bottom-socials a:hover {
	color: var(--secondary);
	font-weight: 700;
}

.social-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.footer-column {
	display: flex;
	flex-direction: column;
}

.footer-column h2 {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--primary);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.footer-column a {
	color: var(--primary);
	transition: color 160ms ease;
	font-size: 1rem;
}

.footer-column a:hover,
.footer-column a:focus-visible {
	color: var(--secondary);
	font-weight: 700;
}

.footer-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	/* Footer and megamenu override margin-top to align the bottom with the neighboring list. */
	margin-top: 37px;
	padding: 6px 18px;
	background: transparent;
	color: var(--primary) !important;
	font-size: 1rem;
	font-weight: 500;
	border: 2px solid var(--primary);
	border-radius: var(--radius);
	transition: background 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.footer-cta-button:hover,
.footer-cta-button:focus-visible {
	background: var(--primary);
	color: var(--white) !important;
}

#mega-menu .footer-cta-button {
	margin-top: 25px;
}

.footer-badge {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 72px;
}

.footer-badge img {
	height: 56px;
	width: auto;
	max-width: 100%;
	display: block;
}

.footer-badge-plus10 img {
	height: calc(56px * 1.1);
}

.footer-badge-center {
	justify-content: center;
	transform: translateX(-20px);
}

.footer-badge-lg img {
	height: 73px;
}

.footer-badge-labelled {
	align-items: center;
	gap: 12px;
}

.footer-badge-labelled img {
	height: 48px;
	flex-shrink: 0;
}

.footer-badge-labelled.footer-badge-lg img {
	height: 53px;
	filter: brightness(0);
}

.footer-badge-label {
	color: var(--primary);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.25;
}

.footer-badge-labelled.footer-badge-lg .footer-badge-label {
	font-size: 1.03rem;
	color: #000;
}

.footer-bottom {
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 0.95rem;
	color: var(--primary);
}

.footer-bottom-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.footer-cookie-settings {
	border: 0;
	padding: 0;
	background: none;
	color: var(--primary);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
	color: var(--secondary);
	font-weight: 700;
}

.footer-bottom a:hover {
	color: var(--secondary);
	font-weight: 700;
}

/* ============================================================
   CONTENT BLOCKS (for inner pages)
   ============================================================ */
.content {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
	border-radius: var(--radius-lg);
	padding: 32px;
}

.content ul,
.content ol {
	padding-left: 20px;
}

.placeholder-card {
	background: var(--navy-700);
	border: 1px dashed rgba(132, 174, 194, 0.35);
	border-radius: var(--radius-lg);
	padding: 24px;
	min-height: 160px;
}

.placeholder-card h3 {
	margin-bottom: 10px;
}

.section-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.tree-block {
	margin-bottom: 32px;
}

/* Inner page hero (StructuredPage) */
.hero-inner {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: 24px;
	align-items: stretch;
}

.hero-inner .panel {
	border-radius: var(--radius-lg);
	padding: 32px;
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

/* ============================================================
   EXPLORE CARDS
   ============================================================ */
.explore-card {
	min-height: 100%;
}

/* ============================================================
   VISUAL TIMELINE (company history / milestones)
   ============================================================ */
#our-story-timeline .section-header {
	text-align: center;
}

#our-story-timeline .section-header p:not(.section-eyebrow) {
	position: relative;
	margin: clamp(20px, 2vw, 28px) 0 0;
	max-width: none;
	width: 100%;
	font-size: 1rem;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	color: #000;
	padding: clamp(20px, 2.4vw, 32px);
	text-align: left;
	overflow: hidden;
}

#our-story-timeline .section-header p:not(.section-eyebrow)::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
}

p.section-eyebrow {
	color: var(--accent);
	font-weight: 600;
	font-size: 1.1rem;
	margin: 8px auto;
	max-width: none;
	text-align: center;
}

.feature-band .section-eyebrow {
	font-size: var(--font-size-subtitle);
	line-height: 1.25;
	text-align: left;
	margin: 0 0 12px;
}

.feature-band .feature-copy .actions .button,
.feature-band .feature-copy .actions .button-outline {
	border-radius: var(--radius);
	font-size: 0.95rem;
	padding: 14px 28px;
}

/* AI-Native, Secure, Digital Transformation — outlined navy on light backgrounds */
#ai-native-software-development .feature-copy .actions .button,
#secure-software-development .feature-copy .actions .button,
#digital-transformation-with-ai .feature-copy .actions .button {
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

#ai-native-software-development .feature-copy .actions .button:hover,
#ai-native-software-development .feature-copy .actions .button:focus-visible,
#secure-software-development .feature-copy .actions .button:hover,
#secure-software-development .feature-copy .actions .button:focus-visible,
#digital-transformation-with-ai .feature-copy .actions .button:hover,
#digital-transformation-with-ai .feature-copy .actions .button:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* DevOps — solid white on the navy background */
#devops-and-it-services .feature-copy .actions .button {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

#devops-and-it-services .feature-copy .actions .button:hover,
#devops-and-it-services .feature-copy .actions .button:focus-visible {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

/* Contact form panel — sits as a white card on the dark contact section, with the brand accent stripe on the left like the other site cards */
.contact-form-wrap {
	position: relative;
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 32px) clamp(20px, 2vw, 28px) clamp(28px, 2.8vw, 40px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.contact-form-wrap::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
}

/* Send message button — centered, compact, filled navy with cyan accent on hover */
.contact-form-wrap .contact-form .actions {
	display: flex;
	justify-content: center;
	margin-top: 6px;
}

.contact-form-wrap .actions .button {
	border-radius: var(--radius);
	font-size: 1rem;
	padding: 10px 22px;
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.contact-form-wrap .actions .button:hover,
.contact-form-wrap .actions .button:focus-visible {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

/* Circular CTA badge inside the contact-copy column */
.contact-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(160px, 14vw, 200px);
	aspect-ratio: 1;
	margin: clamp(20px, 2.5vw, 32px) auto 0;
	border-radius: 50%;
	background: var(--bg-light);
	color: #000;
	text-align: center;
	padding: clamp(10px, 1.4vw, 18px);
	box-sizing: border-box;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.contact-badge span {
	font-weight: 800;
	font-size: clamp(1.1rem, 1.55vw, 1.4rem);
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

@media (max-width: 840px) {
	.contact-badge {
		display: none;
	}
}

#secure-software-development .feature-copy .actions {
	justify-content: flex-end;
}

#devops-and-it-services .feature-copy .actions {
	justify-content: flex-end;
	margin-top: 28px;
}

#specialist-pillars .section-header,
#why-customers-choose-us .section-header,
#experienced-team .section-header {
	text-align: center;
}

#experienced-team .section-header p {
	max-width: none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Positioning featureBand: render the title + intro as a normal section-
   header above the panel (centred, full block width), and hide the
   duplicates that the featureBand still emits inside the panel. */
#positioning .section-header {
	text-align: center;
}

#positioning .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

#positioning .feature-band .feature-copy > h2,
#positioning .feature-band .feature-copy > p:not(.section-eyebrow):first-of-type {
	display: none;
}

#ai-impact-table .section-header p.section-eyebrow {
	font-size: var(--font-size-subtitle);
}

/* Feature band highlight — subtle single-line callout used in Secure Software Development */
.feature-highlight {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 20px 0 4px;
	padding: 10px 16px;
	border-left: 3px solid var(--accent);
	background: rgba(9, 148, 212, 0.08);
	border-radius: var(--radius);
	white-space: nowrap;
}

.feature-highlight-value,
.feature-highlight-label {
	color: var(--primary);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.section-dark .feature-highlight,
.section-dark-alt .feature-highlight {
	background: rgba(9, 148, 212, 0.16);
}

.section-dark .feature-highlight-value,
.section-dark-alt .feature-highlight-value,
.section-dark .feature-highlight-label,
.section-dark-alt .feature-highlight-label {
	color: var(--text-on-dark);
}

/* Gradient stripe — full-bleed accent band with centered title + body */
.site-section:has(.gradient-stripe-content) {
	padding: 0;
	background: var(--stripe-h);
	color: var(--white);
}

.gradient-stripe-content {
	padding: 48px 0;
	text-align: center;
}

.gradient-stripe-content h2,
.gradient-stripe-content p {
	color: var(--white);
	margin: 0 auto;
}

.gradient-stripe-content h2 {
	margin-bottom: 12px;
}

.gradient-stripe-content p {
	max-width: 72ch;
	font-size: var(--font-size-subtitle);
	line-height: 1.55;
}

/* Digital transformation: let the experienced-team stripe description span the full block width */
#experienced-team .gradient-stripe-content p {
	max-width: none;
}

/* Services "highly-experienced-team" stripe: on phones, match the
   satisfied-customers intro size (1.2rem) instead of the larger subtitle size. */
@media (max-width: 640px) {
	#highly-experienced-team .gradient-stripe-content p {
		font-size: 1.2rem;
	}
}

.gradient-stripe-action {
	margin-top: clamp(20px, 2.4vw, 32px);
	display: flex;
	justify-content: center;
}

.gradient-stripe-action .button-outline.pillars-cta {
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

.gradient-stripe-action .button-outline.pillars-cta:hover,
.gradient-stripe-action .button-outline.pillars-cta:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

#kvantphone-cta-stripe .gradient-stripe-content p {
	max-width: none;
	white-space: nowrap;
}

/* Mobile fixes for the KvantPhone page horizontal overflow:
   1. The CTA stripe's nowrap keeps a ~894px single line that overflows the
      viewport and lets the whole page scroll sideways — allow wrapping.
   2. The hero logo (max-width: 384px, but no shrink) is wider than the phone
      content column, pushing the hero copy off-centre — cap it to the column. */
@media (max-width: 640px) {
	#kvantphone-cta-stripe .gradient-stripe-content p {
		white-space: normal;
	}
	/* Let the single-column hero grid track shrink below the logo's intrinsic
	   width (grid items default to min-width:auto), then cap the logo to the
	   column so it no longer pushes the hero copy past the viewport. */
	.page-hero-grid-single,
	.page-hero-grid-single .page-hero-copy {
		min-width: 0;
	}
	.page-hero .page-hero-copy h1 .hero-logo {
		max-width: 240px;
	}

	/* First block (#total-security): wedge the phone image between the 1st and
	   2nd description paragraphs (before "Only the communicating..."). Flatten
	   .feature-copy with display:contents so its paragraphs and the image become
	   siblings in the band's flex column, then order the image after body[0].
	   <p> order in feature-copy: 1=intro, 2=body[0], 3=body[1], 4=body[2]. */
	#total-security .feature-band {
		display: flex;
		flex-direction: column;
	}
	#total-security .feature-copy {
		display: contents;
	}
	#total-security .feature-copy h2 { order: 1; }
	#total-security .feature-copy > p:nth-of-type(1) { order: 2; }
	#total-security .feature-copy > p:nth-of-type(2) { order: 3; }
	#total-security .feature-visual {
		order: 4;
		margin: 0 0 1.4em;
	}
	#total-security .feature-copy > p:nth-of-type(3) { order: 5; }
	#total-security .feature-copy > p:nth-of-type(4) { order: 6; }
	/* Centre the "All this is 100% quantum resilient." line on phones. */
	#total-security .feature-quantum-line {
		text-align: center;
	}

	/* imageAfterTitleMobile feature bands (KvantPhone/KvantMail product pages):
	   when stacked on phones, reorder to title → image → body/button. A duplicate
	   title (.feature-band-mobile-title) is shown first; the in-copy title is
	   hidden; the image is pulled above the copy. feature-copy keeps its padding
	   so the body stays inset, while the image stays full-width. */
	/* `.feature-band` prefix raises specificity above the generic
	   `.feature-band-reversed .feature-copy/.feature-visual { order: initial }`
	   reset so reversed bands reorder correctly too. */
	.feature-band.feature-band-img-after-title .feature-band-mobile-title {
		display: block;
		order: 1;
		margin: 0;
		padding: clamp(32px, 4vw, 48px) clamp(32px, 4vw, 48px) clamp(16px, 2vw, 24px);
	}

	.feature-band.feature-band-img-after-title .feature-visual {
		order: 2;
	}

	.feature-band.feature-band-img-after-title .feature-copy {
		order: 3;
	}

	.feature-band.feature-band-img-after-title .feature-copy > h2 {
		display: none;
	}
}

/* Slimmer divider variant — used between major sections */
#partnering-divider .gradient-stripe-content {
	padding: 34px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#partnering-divider .gradient-stripe-content h2 {
	margin: 0;
}

/* Security stack block (Solutions / Partnering) — visualises the security modules with one flagged "missing" + the trusted-module solution row */
.security-stack-block {
	max-width: var(--content-width);
	margin: 0 auto;
}

.security-stack-block .section-eyebrow {
	text-align: center;
}

.security-stack-block h2 {
	color: #000;
	text-align: center;
	margin: 0 0 var(--section-py);
}

.security-stack-block .security-stack-intro {
	margin: 0 0 clamp(16px, 1.6vw, 22px);
	color: var(--primary);
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}

/* Two-column split — vertical module stack on the left, trusted-module solution on the right (aligned to the bottom so it pairs with the missing 6th panel) */
.security-stack-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: end;
}

.security-stack-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(8px, 1vw, 14px);
}

.security-stack-module {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 22px;
	border-radius: var(--radius-lg);
	background: rgba(32, 74, 104, 0.08);
}

.security-stack-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	aspect-ratio: 1;
	color: var(--primary);
	flex: none;
}

.security-stack-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.security-stack-name {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--primary);
	line-height: 1.25;
}

.security-stack-module.is-missing {
	background: var(--primary);
	box-shadow: 0 0 0 4px rgba(32, 74, 104, 0.18);
}

.security-stack-module.is-missing .security-stack-icon,
.security-stack-module.is-missing .security-stack-name {
	color: var(--white);
}

.security-stack-tag {
	position: absolute;
	top: -10px;
	right: 18px;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--white);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	box-shadow: 0 4px 10px rgba(9, 148, 212, 0.35);
}

@media (max-width: 768px) {
	.security-stack-split {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

.security-stack-solution {
	min-width: 0;
}

.security-stack-solution h3 {
	color: var(--primary);
	margin-bottom: 10px;
	font-size: 1.45rem;
}

.security-stack-solution-intro {
	margin: 0 0 clamp(20px, 2.4vw, 28px);
	color: var(--primary);
	font-size: 1rem;
	line-height: 1.5;
}

.security-stack-capabilities {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 1vw, 12px);
	text-align: left;
}


.security-stack-capability {
	position: relative;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	padding: 12px 18px 12px calc(18px + var(--stripe-width));
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 0;
	align-items: center;
}

.security-stack-capability::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

.security-stack-cap-icon {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--primary));
	color: var(--white);
	align-self: center;
}

.security-stack-cap-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}

.security-stack-capability h4 {
	margin: 0;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	align-self: end;
}

.security-stack-capability p {
	margin: 2px 0 0;
	color: var(--primary);
	font-size: 0.9rem;
	line-height: 1.35;
	align-self: start;
}

@media (max-width: 768px) {
	.security-stack-capabilities {
		grid-template-columns: 1fr;
	}
}

/* White-labelling block — light grey section by default, centered headline + reference visual + intro-style description + outlined navy CTA */
.site-section:has(.white-label-block):not(.section-white):not(.section-light):not(.section-dark) {
	background: var(--bg-light);
}

.site-section.section-white:has(.white-label-block) {
	background: var(--bg-white);
}

.white-label-block {
	text-align: center;
	max-width: var(--content-width);
	margin: 0 auto;
}

.white-label-block h2 {
	color: var(--primary);
	text-align: center;
	margin-bottom: clamp(28px, 3vw, 40px);
}

.white-label-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 880px;
	margin: 0 auto clamp(24px, 3vw, 40px);
}

.white-label-visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* Match the hero intro paragraph treatment used by .page-hero-intro */
.white-label-block .white-label-description {
	max-width: 100%;
	margin: 0 auto clamp(24px, 3vw, 36px);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--primary);
}

.white-label-actions {
	display: flex;
	justify-content: center;
}

/* CTA — same styling as the "Learn more about us" pillars CTA on /services */
.white-label-actions .white-label-cta {
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

.white-label-actions .white-label-cta:hover,
.white-label-actions .white-label-cta:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.vt-timeline {
	position: relative;
	padding: 32px 0;
}

.vt-spine {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--border-on-light);
	transform: translateX(-50%);
	z-index: 0;
}

.section-dark .vt-spine,
.section-dark-alt .vt-spine {
	background: var(--border-on-dark);
}

.vt-spine-progress {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--primary);
	transform: translateX(-50%) scaleY(0);
	transform-origin: top center;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}

.vt-milestone {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 48px 1fr;
	align-items: center;
	margin-bottom: 0;
	z-index: 1;
}

.vt-milestone + .vt-milestone {
	margin-top: -60px;
}

/* Hide flagged milestones on mobile phone view only. */
@media (max-width: 640px) {
	.vt-milestone.vt-hide-mobile {
		display: none;
	}
}

.vt-marker {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.vt-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 5px var(--white), 0 0 0 7px var(--accent);
	transition: transform 200ms ease;
}

.section-dark .vt-dot,
.section-dark-alt .vt-dot {
	box-shadow: 0 0 0 5px var(--bg-dark), 0 0 0 7px var(--accent);
}

.vt-milestone:hover .vt-dot {
	transform: scale(1.15);
}

.vt-ribbon-col {
	grid-row: 1;
	display: flex;
	align-items: center;
}

.vt-left .vt-ribbon-col {
	grid-column: 3;
	justify-content: flex-start;
	padding-left: 24px;
}

.vt-right .vt-ribbon-col {
	grid-column: 1;
	justify-content: flex-end;
	padding-right: 24px;
}

.vt-card-col {
	grid-row: 1;
	display: flex;
}

.vt-left .vt-card-col {
	grid-column: 1;
	justify-content: flex-end;
	padding-right: 24px;
}

.vt-right .vt-card-col {
	grid-column: 3;
	justify-content: flex-start;
	padding-left: 24px;
}

.vt-ribbon {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--white);
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.vt-ribbon-inline {
	display: none;
	margin-bottom: 12px;
}

.vt-card {
	position: relative;
	max-width: 440px;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-dark .vt-card,
.section-dark-alt .vt-card {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .vt-card,
.section-white .vt-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.vt-card:hover {
	transform: translateY(-2px);
}

.section-light .vt-card:hover,
.section-white .vt-card:hover {
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
}

.vt-card::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	background: inherit;
}

.section-light .vt-card::after,
.section-white .vt-card::after {
	background: var(--white);
	border-top: 1px solid var(--border-on-light);
	border-right: 1px solid var(--border-on-light);
}

.section-dark .vt-card::after,
.section-dark-alt .vt-card::after {
	background: var(--navy-700);
	border-top: 1px solid var(--border-on-dark);
	border-right: 1px solid var(--border-on-dark);
}

.vt-left .vt-card::after {
	right: -8px;
	transform: rotate(45deg);
}

.vt-right .vt-card::after {
	left: -8px;
	transform: rotate(-135deg);
}

.vt-card-image {
	aspect-ratio: 16 / 9;
	background: var(--grey-50);
	overflow: hidden;
}

.vt-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vt-card-image:has(img[src$="/ncc-2015.webp"]),
.vt-card-image:has(img[src$="/csi-logo.png"]),
.vt-card-image:has(img[src$="/deloitte-fast50.webp"]),
.vt-card-image:has(img[src$="/ey-entrepreneur-2026.webp"]) {
	aspect-ratio: 3 / 1;
}

.vt-card-image:has(img[src$="/financial-times-2021.webp"]) {
	aspect-ratio: 2.84 / 1;
}

.vt-card-image img[src$="/ncc-2015.webp"],
.vt-card-image img[src$="/csi-logo.png"] {
	object-fit: contain;
	padding: 12px;
	background: var(--white);
}

.vt-card-image img[src$="/financial-times-2021.webp"],
.vt-card-image img[src$="/ey-entrepreneur-2026.webp"] {
	object-fit: contain;
	padding: 10px;
	background: var(--white);
}

.vt-card-image img[src$="/deloitte-fast50.webp"] {
	object-fit: contain;
	padding: 5%;
	background: var(--white);
}

.vt-card-body {
	padding: 20px 24px 22px;
}

.vt-card-body h3 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.vt-card-body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.vt-card-body .actions {
	margin-top: 14px;
}

.vt-outro {
	text-align: center;
	margin-top: clamp(32px, 4vw, 56px);
}

.vt-outro p {
	margin: 0 0 6px;
}

.vt-outro p:last-child {
	margin-bottom: 0;
}

.vt-outro .vt-outro-highlight {
	color: var(--accent);
	margin-top: 10px;
	font-weight: 600;
}

.vt-outro-link {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	color: var(--accent);
	transition: color 150ms ease, transform 150ms ease;
}

.vt-outro-link:hover,
.vt-outro-link:focus-visible {
	color: var(--primary);
	transform: translateY(-1px);
}

.vt-outro-icon {
	height: 22px;
	width: auto;
	display: block;
}

#explore-more {
	position: relative;
	isolation: isolate;
	background:
		linear-gradient(rgba(7, 24, 33, 0.62), rgba(7, 24, 33, 0.66)),
		url('/images/aboutus-montage.jpg?v=8') top center / cover no-repeat;
}

/* When the section uses the new CSS-grid backdrop (backgroundMontage), drop
   the legacy aboutus-montage.jpg background and apply the dark blue overlay
   via a ::before pseudo-element layered above the grid. */
.site-section.has-bg-montage,
#explore-more.has-bg-montage {
	position: relative;
	isolation: isolate;
	background: var(--bg-dark);
}

.site-section.has-bg-montage::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(7, 24, 33, 0.62), rgba(7, 24, 33, 0.66));
	z-index: 1;
	pointer-events: none;
}

.site-section.has-bg-montage .bg-montage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 1fr);
	z-index: 0;
}

.site-section.has-bg-montage .bg-montage-cell {
	overflow: hidden;
	background: rgba(7, 24, 33, 0.4);
}

.site-section.has-bg-montage .bg-montage-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 960px) {
	.site-section.has-bg-montage .bg-montage {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(5, 1fr);
	}
}

@media (max-width: 640px) {
	.site-section.has-bg-montage .bg-montage {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(7, 1fr);
	}
}

#explore-more > .container,
#continue-exploring > .container {
	position: relative;
	z-index: 2;
}

#explore-more .site-detail-card,
#continue-exploring .site-detail-card {
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(4px);
	background: rgba(20, 46, 65, 0.75);
	border-color: rgba(255, 255, 255, 0.12);
}

#explore-more .site-detail-card .actions,
#continue-exploring .site-detail-card .actions {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

#explore-more .site-detail-card .button-outline,
#continue-exploring .site-detail-card .button-outline {
	border-radius: var(--radius);
	border-color: var(--white);
	color: var(--white);
}

#explore-more .site-detail-card .button-outline:hover,
#explore-more .site-detail-card .button-outline:focus-visible,
#continue-exploring .site-detail-card .button-outline:hover,
#continue-exploring .site-detail-card .button-outline:focus-visible {
	background: var(--white);
	border-color: var(--white);
	color: var(--primary);
}

/* ============================================================
   PROCESS STEPS (numbered approach / methodology)
   ============================================================ */
.ps-steps {
	display: grid;
	gap: 8px;
	counter-reset: step-counter;
}

.ps-step {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 0;
	min-height: 0;
}

/* Indicator column: number + connector */
.ps-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Vertical line spanning the indicator column; the number sits centered on it.
   Trimmed at the very top of the first step and the very bottom of the last step. */
.ps-indicator::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--accent);
	opacity: 0.2;
	transform: translateX(-50%);
	z-index: 1;
}

.ps-step:first-child .ps-indicator::before {
	top: 50%;
}

.ps-step:last-child .ps-indicator::before {
	bottom: 50%;
}

.ps-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	transition: transform 200ms ease, box-shadow 200ms ease;
	position: relative;
	z-index: 2;
}

.section-dark .ps-number,
.section-dark-alt .ps-number {
	background: var(--accent);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(9, 148, 212, 0.3);
}

.section-light .ps-number,
.section-white .ps-number {
	background: var(--accent);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(9, 148, 212, 0.25);
}

.ps-step:hover .ps-number {
	transform: scale(1.1);
	box-shadow: 0 6px 24px rgba(9, 148, 212, 0.35);
}

.ps-connector {
	display: none;
}

/* Content card */
.ps-content {
	border-radius: var(--radius-lg);
	padding: 20px 28px 28px;
	margin-left: 8px;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-dark .ps-content,
.section-dark-alt .ps-content {
	background: var(--navy-700);
	border: 1px solid var(--border-on-dark);
}

.section-light .ps-content,
.section-white .ps-content {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.ps-step:hover .ps-content {
	transform: translateY(-1px);
}

.section-light .ps-step:hover .ps-content,
.section-white .ps-step:hover .ps-content {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
}

.ps-content h3 {
	margin-bottom: 6px;
}

.ps-content p {
	margin: 0;
	font-size: 0.95rem;
}

/* ============================================================
   CARD KICKER — Numbered card label (for principles, etc.)
   ============================================================ */
.card-kicker {
	display: block;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0;
	margin-bottom: 10px;
}

/* Mobile-only kicker variant: hidden on tablet/desktop, swapped in on phones.
   Defined here (after `.card-kicker`) so source order resolves the toggle. */
.card-kicker-mobile {
	display: none;
}

@media (max-width: 640px) {
	.card-kicker-desktop {
		display: none;
	}
	.card-kicker-mobile {
		display: block;
	}
}

.section-dark .card-kicker {
	color: var(--accent);
}

.section-light .card-kicker,
.section-white .card-kicker {
	color: var(--accent-dark);
}

/* ============================================================
   CARD GRID — Visual card column variants
   ============================================================ */
.site-card-grid {
	display: grid;
	gap: 24px;
}

.grid-2.site-card-grid { grid-template-columns: repeat(2, 1fr); }
.grid-3.site-card-grid { grid-template-columns: repeat(3, 1fr); }
.grid-4.site-card-grid { grid-template-columns: repeat(4, 1fr); }

/* Hover lift for all site detail cards */
.site-detail-card {
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.site-detail-card:hover {
	transform: translateY(-3px);
}

.section-light .site-detail-card:hover,
.section-white .site-detail-card:hover {
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.section-dark .site-detail-card:hover {
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   CHECKLIST — Enhanced visual treatment
   ============================================================ */
.section-dark .feature-list li::before,
.section-dark-alt .feature-list li::before {
	box-shadow: 0 0 8px rgba(9, 148, 212, 0.3);
}

/* ============================================================
   HERO IMAGE — SVG background pattern treatment
   ============================================================ */
.page-hero-media img[src$=".svg"] {
	object-fit: contain;
	object-position: right center;
	opacity: 1;
}

/* Services landing hero: inset the SVG so it has the same top/bottom padding as the hero; outlined buttons matching the case-studies CTA treatment */
.page-hero:has(img[src$="bg-services.svg"]) .page-hero-media {
	top: clamp(26px, 3.6vw, 48px);
	bottom: clamp(26px, 3.6vw, 48px);
	right: max(calc((100vw - var(--content-width)) / 2 + var(--gutter)), var(--gutter));
	left: auto;
	opacity: 1;
}

/* Services hero: drop the background illustration and the primary
   "View case studies" button on phones (keep the outline CTA). */
@media (max-width: 640px) {
	.page-hero:has(img[src$="bg-services.svg"]) .page-hero-media {
		display: none;
	}
	.page-hero:has(img[src$="bg-services.svg"]) .actions .button {
		display: none;
	}

	/* Services overview bands on phones: drop ALL descriptive body paragraphs
	   (keep the .section-eyebrow subtitle, the title, the button and the image),
	   plus the whole "15+ years" highlight panel on the secure band. */
	#ai-native-software-development .feature-copy > p:not(.section-eyebrow),
	#secure-software-development .feature-copy > p:not(.section-eyebrow),
	#digital-transformation-with-ai .feature-copy > p:not(.section-eyebrow),
	#devops-and-it-services .feature-copy > p:not(.section-eyebrow) {
		display: none;
	}
	#secure-software-development .feature-highlight {
		display: none;
	}

	/* Centre the "Learn more" button on every overview band (defaults alternate
	   left/right based on band orientation), and make the space above the button
	   equal to the space below it (the .feature-copy 32px padding-bottom). The
	   gap above = .section-eyebrow's 12px margin-bottom + this margin-top, so
	   20px → 32px total, matching the 32px below. */
	#ai-native-software-development .feature-copy .actions,
	#secure-software-development .feature-copy .actions,
	#digital-transformation-with-ai .feature-copy .actions,
	#devops-and-it-services .feature-copy .actions {
		justify-content: center;
		margin-top: 20px;
	}

	/* Match the "Learn more" buttons to the "Learn more about us" pillars-cta
	   button (1.425rem font, 251px wide). */
	#ai-native-software-development .feature-copy .actions .button,
	#secure-software-development .feature-copy .actions .button,
	#digital-transformation-with-ai .feature-copy .actions .button,
	#devops-and-it-services .feature-copy .actions .button {
		font-size: 1.425rem;
		width: 251px;
	}

	/* DevOps band: white background on phones (was the dark navy theme). Flip the
	   section + card to light styling so the title and button stay readable. */
	#devops-and-it-services {
		background: var(--bg-white);
		color: var(--text-on-light);
	}
	#devops-and-it-services h2,
	#devops-and-it-services h3 {
		color: var(--text-on-light);
	}
	#devops-and-it-services .feature-band {
		background: var(--white);
		border: 1px solid var(--border-on-light);
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	}
	/* DevOps "Learn more": outline-navy (like the other bands) so it stays
	   visible on the now-white card instead of white-on-white. */
	#devops-and-it-services .feature-copy .actions .button {
		background: transparent;
		color: var(--primary);
		border-color: var(--primary);
	}

	/* Drop the "Where our specialist depth shows up" block on phones. */
	#specialist-pillars {
		display: none;
	}
}

.page-hero h1 .hero-logo {
	display: block;
	max-width: 384px;
	height: auto;
	margin-bottom: 24px;
}

/* KvantPhone hero — fade the image into the dark blue background on its left edge */
.page-hero-media:has(img[src$="kvantphone-1d.webp"])::after,
.page-hero-media:has(img[src$="home-hero-2.webp"])::after {
	background: none;
}

.page-hero-media:has(img[src$="kvantphone-1d.webp"]) img {
	-webkit-mask-image: linear-gradient(to right, transparent 16%, black 34%);
	mask-image: linear-gradient(to right, transparent 16%, black 34%);
}

.page-hero-media:has(img[src$="home-hero-2.webp"]) img {
	object-fit: cover;
	object-position: left center;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%);
	mask-image: linear-gradient(to right, transparent 0%, black 12%);
}

.page-hero:has(img[src$="bg-services.svg"]) .button,
.page-hero:has(img[src$="bg-services.svg"]) .button-outline,
.page-hero:has(img[src$="kvantphone-1d.webp"]) .button,
.page-hero:has(img[src$="kvantphone-1d.webp"]) .button-outline,
.page-hero:has(img[src$="home-hero-2.webp"]) .button,
.page-hero:has(img[src$="home-hero-2.webp"]) .button-outline,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .button,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .button-outline,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .button,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .button-outline,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .button,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .button-outline,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .button,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .button-outline,
.page-hero:has(img[src$="hero-case-studies.svg"]) .button,
.page-hero:has(img[src$="hero-case-studies.svg"]) .button-outline,
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .button,
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .button-outline {
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
}

.page-hero:has(img[src$="bg-services.svg"]) .button-outline,
.page-hero:has(img[src$="kvantphone-1d.webp"]) .button-outline,
.page-hero:has(img[src$="home-hero-2.webp"]) .button-outline,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .button-outline,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .button-outline,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .button-outline,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .button-outline,
.page-hero:has(img[src$="hero-case-studies.svg"]) .button-outline,
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .button-outline {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

.page-hero:has(img[src$="bg-services.svg"]) .button-outline:hover,
.page-hero:has(img[src$="bg-services.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="kvantphone-1d.webp"]) .button-outline:hover,
.page-hero:has(img[src$="kvantphone-1d.webp"]) .button-outline:focus-visible,
.page-hero:has(img[src$="home-hero-2.webp"]) .button-outline:hover,
.page-hero:has(img[src$="home-hero-2.webp"]) .button-outline:focus-visible,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .button-outline:hover,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .button-outline:hover,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .button-outline:hover,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .button-outline:hover,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="hero-case-studies.svg"]) .button-outline:hover,
.page-hero:has(img[src$="hero-case-studies.svg"]) .button-outline:focus-visible,
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .button-outline:hover,
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .button-outline:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

.page-hero-light .page-hero-media:has(img[src$=".svg"])::after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.1));
}

.page-hero-dark .page-hero-media:has(img[src$=".svg"])::after {
	background: linear-gradient(to right, rgba(7, 24, 33, 0.92), rgba(7, 24, 33, 0.05));
}

.page-hero-dark .page-hero-media:has(img[src$="bg-services.svg"])::after {
	background: none;
}

/* Increase SVG hero visibility */
.page-hero-media:has(img[src$=".svg"]) {
	opacity: 0.6;
}

/* ============================================================
   VIDEO SECTION — Improved embed treatment
   ============================================================ */
.video-grid {
	align-items: center;
}

/* ============================================================
   CTA SECTION — Visual enhancement
   ============================================================ */
.site-section:has(.contact-inner) {
	position: relative;
}

.site-section:has(.contact-inner)::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(9, 148, 212, 0.08), transparent 60%);
}

.contact-inner {
	position: relative;
	text-align: center;
}

/* Let the blue CTA strip title use the full container width so it stays on one line. */
.contact-cta .contact-inner {
	max-width: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	.site-nav {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	/* Group the language switcher next to the hamburger on the right edge
	   instead of letting space-between strand it in the middle. */
	.lang-selector {
		margin-left: auto;
		margin-right: 12px;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	/* Drop the desktop horizontal nudges so every stacked footer column (and
	   the contact block) lines up flush-left like About us / Engineering.
	   nth-of-type to match the desktop nudge selectors above. */
	.footer-top > .footer-column:nth-of-type(2),
	.footer-top > .footer-column:nth-of-type(3),
	.footer-top > .footer-column:nth-of-type(4),
	.footer-about {
		transform: none;
	}

	/* Hide the trust/compliance badges (GDPR, AAA, EU stars, NCC) from the
	   footer columns on mobile — they crowd the stacked link menu. */
	.footer-top .footer-badge {
		display: none;
	}

	/* Halve the gap between each footer column title and its links on mobile
	   (desktop keeps 16px). */
	.footer-column h2 {
		margin-bottom: 8px;
	}

	/* Hide the KvantPhone Portal CTA button from the footer menu on mobile. */
	.footer-top .footer-cta-button {
		display: none;
	}

	/* Keep Sales and Support side by side on mobile (they fit), and show the
	   GDPR + AAA trust badges in a row beneath them. */
	.footer-contact-block {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.footer-contact-group + .footer-contact-group {
		margin-top: 0;
	}

	/* Separator line above the Sales/Support headings (matches the one above
	   the copyright row). */
	.footer-about {
		border-top: 1px solid var(--border-on-light);
		padding-top: 32px;
	}

	/* Separator line above the four trust logos (GDPR/AAA row). */
	.footer-about-badges:not(.footer-about-badges-centered) {
		border-top: 1px solid var(--border-on-light);
		padding-top: 32px;
	}

	.footer-about-badges {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		align-items: center;
		gap: 24px;
		margin-top: 28px;
	}

	.footer-about-badges img {
		height: 56px;
		width: auto;
		max-width: 100%;
		display: block;
	}

	/* EU-stars (with label) + NCC badges, on the same two-column grid as the
	   GDPR/AAA row above. minmax(0,1fr) forces the two tracks equal even though
	   the EU badge is wider than its track. */
	.footer-about-badges-centered {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		justify-items: start;
		gap: 24px;
		margin-top: 22px;
	}

	/* EU badge: left edge under the GDPR icon. GDPR is centred in its track, so
	   its inset is (trackWidth − gdprWidth)/2. As a grid item this margin's % is
	   relative to the track, so = 50% − (134px / 2) = 50% − 67px. */
	.footer-about-badges-centered > .footer-badge-labelled {
		margin-left: calc(50% - 67px);
		/* Keep the badge at its natural width (the label only breaks at its <br>)
		   rather than being squeezed by the grid track. */
		width: max-content;
	}

	/* NCC "verified" badge centred in its track → on the AAA icon's axis. */
	.footer-about-badges-centered > img {
		justify-self: center;
	}

	.footer-copyright-full {
		display: none;
	}

	.footer-copyright-short {
		display: inline;
	}

	/* Centre the whole footer-bottom block (logo + copyright, and socials). */
	.footer-bottom {
		justify-content: center;
	}

	.footer-bottom-left,
	.footer-bottom-socials {
		justify-content: center;
	}

	.footer-about-badges-centered .footer-badge-labelled {
		display: inline-flex;
		margin-top: 0;
		padding-top: 0;
		min-height: 0;
	}
}

/* ============================================================
   MOBILE NAVIGATION DRAWER
   Full-screen sitemap menu shown on mobile (≤960px). Mirrors the
   primary nav plus the complete footer link set, with collapsible
   groups (native <details>). Sits below the sticky header (z-100)
   so the logo + close (✕) stay tappable.
   ============================================================ */
.mobile-drawer {
	display: none;
}

body.drawer-open {
	overflow: hidden;
}

@media (max-width: 960px) {
	.mobile-drawer.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
		background: var(--bg-light);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 84px 24px 48px;
	}

	.mobile-drawer-nav {
		display: flex;
		flex-direction: column;
		max-width: 480px;
		margin: 0 auto;
	}

	.mobile-drawer-primary {
		list-style: none;
		margin: 0 0 8px;
		padding: 0 0 8px;
		border-bottom: 1px solid var(--border-on-light);
	}

	.mobile-drawer-primary a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 8px;
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--primary);
		text-decoration: none;
	}

	.mobile-drawer-group {
		border-bottom: 1px solid var(--border-on-light);
	}

	.mobile-drawer-group > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 10px 8px;
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--primary);
		cursor: pointer;
		list-style: none;
	}

	.mobile-drawer-group > summary::-webkit-details-marker {
		display: none;
	}

	.mobile-drawer-group > summary::after {
		content: "+";
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
		color: var(--secondary);
	}

	.mobile-drawer-group[open] > summary::after {
		content: "\2212";
	}

	.mobile-drawer-group ul {
		list-style: none;
		margin: 0;
		padding: 0 0 8px;
	}

	.mobile-drawer-group a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 8px 8px 8px 16px;
		font-size: 1.05rem;
		color: var(--primary);
		text-decoration: none;
	}

	.mobile-drawer a:active,
	.mobile-drawer a:focus-visible {
		color: var(--secondary);
	}

	/* Sales/Support + socials mirrored from the footer, below the link groups.
	   The "Other" group's own bottom border separates this from the menu above. */
	.mobile-drawer-contact {
		/* Match the *visual* whitespace above the Sales/Support headings to the
		   whitespace below the last phone row. The phone links are 44px tap
		   targets with vertically-centred text, so ~14px of invisible space sits
		   below the digits; the larger top padding compensates so both visible
		   gaps read as equal (≈37px to the social-links delimiter). */
		padding: 38px 8px 0;
	}

	.mobile-drawer-contact .footer-contact-block {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.mobile-drawer-contact .footer-contact-group + .footer-contact-group {
		margin-top: 0;
	}

	/* Faint delimiter between the Sales/Support block and the social links —
	   the same hairline used throughout the footer. */
	.mobile-drawer-socials {
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid var(--border-on-light);
	}
}

/* Mobile footer: larger tap targets (≈44px) and extra bottom padding so the
   fixed cookie-consent badge (bottom-left) doesn't overlap the social links. */
@media (max-width: 640px) {
	.site-footer {
		/* Smaller gap above the first footer heading (About Us) — matches the
		   32px gap that follows the Privacy Policy link. */
		padding-top: 32px;
		padding-bottom: 88px;
	}

	/* Phone footer: swap the four always-open link columns for the hamburger
	   drawer's menu (Home + 3 primary links + 4 collapsible groups). Single
	   column so the menu and the Sales/Support block stack full-width. The
	   Sales/Support block and everything below are untouched. */
	/* Higher specificity (.site-footer …) so this beats the max-width:840px
	   rule, which also targets .footer-top and sets gap:32px later in the file. */
	.site-footer .footer-top {
		grid-template-columns: 1fr;
		/* Drop the 32px grid row-gap so the only space above the Sales/Support
		   block is its own padding-top (set below) — keeps the gap controllable. */
		row-gap: 0;
	}

	.footer-top > .footer-column {
		display: none;
	}

	.footer-nav-mobile {
		display: block;
	}

	/* The last collapsible group ("Other") already draws a bottom hairline, so
	   drop the Sales/Support block's own top border to avoid a double line.
	   The padding-top is tuned so the *visible* gap from that hairline to the
	   "SALES"/"SUPPORT" text (≈41px) matches the visible gap below the last
	   phone row down to the trust-badges delimiter (≈41px). The phone links are
	   44px tap targets with vertically-centred text, so ~14px of invisible space
	   sits below the digits; 42px of padding compensates for that asymmetry. */
	.footer-about {
		border-top: none;
		padding-top: 42px;
	}

	.footer-column ul,
	.footer-contact-group ul {
		gap: 2px;
	}

	.footer-column a,
	.footer-contact-group li a,
	.footer-contact-email,
	.footer-bottom-socials a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Halve the vertical padding between footer menu links (the 44px tap target
	   left ≈24px of empty space between items; 32px halves it). */
	.footer-column a {
		min-height: 32px;
	}

	/* Centre the button on each "Two ways we create value" panel on mobile. */
	.value-ways-card .actions {
		justify-content: center;
	}

	/* "As featured in" logos: on mobile keep only Forbes, Politico and
	   Financial Times in three equal tracks, sized larger now there are fewer. */
	.featured-in-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.featured-in-logo:has(img[src$="security-journal-uk-short.png"]),
	.featured-in-logo:has(img[src$="Telex.jpg"]) {
		display: none;
	}

	/* Force the displayed three into the order Financial Times, Forbes,
	   Politico (source order is Forbes, Politico, Financial Times). */
	.featured-in-logo:has(img[src$="financial-times.jpg"]) {
		order: 1;
	}
	.featured-in-logo:has(img[src$="Forbes_logo_black.png"]) {
		order: 2;
	}
	.featured-in-logo:has(img[src$="politico.png"]) {
		order: 3;
	}

	/* Politico reads a touch small on mobile — scale it up (0.9 → 1.089, i.e.
	   two +10% bumps). The scale uses transform-origin: centre and transforms
	   never reflow layout, so the centred Forbes logo does not move; at this
	   size the image still clears the gap to Forbes' cell and the viewport edge,
	   so it causes no overlap or shift. */
	.featured-in-logo img[src$="politico.png"] {
		transform: scale(1.089);
	}

	.featured-in-logo {
		height: 44px;
	}

	/* Match the space above the "As featured in" label to the space below it
	   (the h3's section-py bottom margin). */
	.recognition-featured-in {
		margin-top: var(--section-py);
	}

	/* "Some of our satisfied customers": drop four logos on mobile to keep the
	   wall compact (Microsec, Server Garden, BioTech USA, Synlab). */
	#satisfied-customers .logo-item:has(img[src$="/microsec.png"]),
	#satisfied-customers .logo-item:has(img[src$="/server-garden.png"]),
	#satisfied-customers .logo-item:has(img[src$="/biotech-usa.png"]),
	#satisfied-customers .logo-item:has(img[src$="/synlab.png"]) {
		display: none;
	}

	/* Match the space below the title to the space above it (the section's
	   section-py top padding) — the global 48px header margin is too large here. */
	#satisfied-customers .section-header {
		margin-bottom: var(--section-py);
	}

	/* "Engineering services that move business forward": show only the panel
	   title on mobile, drop the description. */
	.core-services-card .core-services-card-text p {
		display: none;
	}

	/* Bring back the blue arrow + circle affordance on mobile (no hover here). */
	.core-services-card-arrow {
		display: inline-flex;
	}

	/* With only the title left, give it equal padding above and below (32px →
	   16px each) so it doesn't float in empty space above the mockup. Drop the
	   title-row's desktop bottom margin so the symmetry holds. */
	.core-services-card .core-services-card-text {
		padding-top: 16px;
		padding-bottom: 16px;
		/* Shrink the space to the right of the blue arrow to a third so the
		   titles fit beside it without wrapping to an extra line. */
		padding-right: 11px;
	}
	.core-services-card .core-services-card-titlerow {
		margin-bottom: 0;
	}

	/* Match the space below the section title to the space above it (the
	   section's section-py top padding) — the global 48px header margin is too
	   large for these on mobile. */
	#featured-products .section-header,
	#core-services .section-header,
	#value-ways .section-header {
		margin-bottom: var(--section-py);
	}

	/* Featured-products cards: equal space above and below the product logo
	   (the card's 32px top padding is the "above"; mirror it below). */
	.featured-products-card-logo {
		margin-top: 0;
		margin-bottom: 32px;
	}
	.featured-products-card > p {
		margin-top: 0;
	}

	/* Recognition statement: flow the two sentences continuously (no forced
	   line break) on mobile. */
	#awards-and-recognitions .home-awards-description br {
		display: none;
	}
	.home-awards-description-statement::before {
		content: "\00a0";
	}

	/* About-page hero montage: drop photos on mobile (Parliament award,
	   Lechner open-office presentation, Jani MRR-growth presentation, Megyeri
	   terrace selfie, Infopark team picture, Szabi Infopark presentation,
	   team 2024 photo-12). */
	.page-hero-montage-cell:has(img[src$="/aboutus-web/photo-07.jpg"]),
	.page-hero-montage-cell:has(img[src$="1-Szabi-prezi-open-office-Lechner.jpeg"]),
	.page-hero-montage-cell:has(img[src$="2-Jani-presentation-MRR-growth.jpeg"]),
	.page-hero-montage-cell:has(img[src$="1-Megyeri-Attila-arenim-office-terrasse-selfie.jpeg"]),
	.page-hero-montage-cell:has(img[src$="1-Infopark_Office_team_Picture.jpeg"]),
	.page-hero-montage-cell:has(img[src$="1-Szabi-infopark-presentation-good.jpeg"]),
	.page-hero-montage-cell:has(img[src$="/aboutus-web/photo-12.jpg"]) {
		display: none;
	}

	/* About-page hero montage: swap visible positions on mobile only via grid
	   order (DOM/desktop order unchanged). Visible cells get explicit order
	   1-8; positions 1<->2 and 3<->4 are swapped vs their natural sequence. */
	.page-hero-montage-cell:has(img[src$="/home/arenim-team-2019_V2.jpeg"]) {
		order: 1;
	}
	.page-hero-montage-cell:has(img[src$="1-Arenim-team-robot-2019.jpeg"]) {
		order: 6;
	}
	.page-hero-montage-cell:has(img[src$="/aboutus-web/photo-14.jpg"]) {
		order: 3;
	}
	.page-hero-montage-cell:has(img[src$="1-Infopark-open-office-work.jpeg"]) {
		order: 4;
	}
	.page-hero-montage-cell:has(img[src$="1-management-photo-infopark-park.jpeg"]) {
		order: 5;
	}
	.page-hero-montage-cell:has(img[src$="/aboutus-web/photo-04.jpg"]) {
		order: 2;
	}
	.page-hero-montage-cell:has(img[src$="1-DUPLA-Arenim-Vesta-Exit.jpeg"]) {
		order: 7;
	}
	.page-hero-montage-cell:has(img[src$="1-Sab-Kun-Szabolcs-Kun-in-HVG-podcast.jpg"]) {
		order: 8;
	}
}

@media (max-width: 840px) {
	.hero-bg {
		width: 100%;
		opacity: 0.15;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-stats {
		flex-wrap: wrap;
		gap: 24px;
	}

	.logo-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Timeline: collapse to single column. Align both the static spine and the
	   scroll progress line onto the dot centre (24px from the timeline's left).
	   The dots sit at the centre of the 48px marker column = 24px. The spine has
	   no transform, so its centre = left + 1px → left: 23px. The progress keeps
	   its JS-driven `translateX(-50%)`, so its centre = left → left: 24px. */
	.vt-spine {
		left: 23px;
		transform: none;
	}

	.vt-spine-progress {
		left: 24px;
	}

	.vt-milestone + .vt-milestone {
		margin-top: 32px;
	}

	.vt-milestone {
		grid-template-columns: 48px 1fr;
	}

	.vt-ribbon-col {
		display: none;
	}

	.vt-ribbon-inline {
		display: inline-flex;
	}

	.vt-marker {
		grid-column: 1;
	}

	.vt-left .vt-card-col,
	.vt-right .vt-card-col {
		grid-column: 2;
		justify-content: flex-start;
		padding-left: 16px;
		padding-right: 0;
	}

	.vt-left .vt-card::after,
	.vt-right .vt-card::after {
		left: -8px;
		right: auto;
		transform: rotate(-135deg);
	}

	/* Steps: keep vertical, reduce indicator */
	.ps-step {
		grid-template-columns: 56px 1fr;
	}

	.ps-number {
		width: 40px;
		height: 40px;
		font-size: 0.85rem;
	}

	/* Card grids */
	.grid-2.site-card-grid,
	.grid-3.site-card-grid,
	.grid-4.site-card-grid {
		grid-template-columns: 1fr;
	}

	.grid,
	.grid-2,
	.grid-3,
	.grid-4,
	.section-grid,
	.award-grid,
	.leadership-grid {
		grid-template-columns: 1fr;
	}

	.feature-band,
	.feature-band-reversed {
		grid-template-columns: 1fr;
	}

	.feature-band-reversed .feature-copy,
	.feature-band-reversed .feature-visual {
		order: initial;
	}

	.feature-visual {
		min-height: 240px;
	}

	/* Stacked feature bands: show SVG illustrations/diagrams in full (contain)
	   instead of cover-cropping them. Raster photos keep cover. */
	.feature-visual:has(.feature-img[src$=".svg"]) {
		min-height: 0;
		padding: 16px;
	}
	.feature-visual .feature-img[src$=".svg"] {
		height: auto;
		min-height: 0;
		object-fit: contain;
	}

	.about-card-body {
		grid-template-columns: 1fr;
	}

	.leadership-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-header-split {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.hero-inner {
		grid-template-columns: 1fr;
	}

	.page-hero-grid,
	.video-grid,
	.timeline-grid {
		grid-template-columns: 1fr;
	}

	.page-hero-media {
		width: 100%;
		opacity: 0.12;
	}

	.footer-top {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 480px) {
	.hero-stats {
		flex-direction: column;
		gap: 24px;
	}

	.logo-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.award-grid {
		grid-template-columns: 1fr;
	}

	.contact-actions {
		flex-direction: column;
		align-items: center;
	}
}

/* ============================================================
   IMPACT TABLE (AI-native %-reduction breakdown)
   ============================================================ */
.impact-table-wrapper {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-on-dark);
	background: rgba(255, 255, 255, 0.04);
}

.impact-table-wrapper.impact-table-with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	align-items: stretch;
}

.impact-table-with-image .impact-table-media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
}

.impact-table-with-image .impact-table-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.impact-table-with-image .impact-table-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.impact-table-with-image .impact-table {
	flex: 1;
}

@media (max-width: 800px) {
	.impact-table-wrapper.impact-table-with-image {
		grid-template-columns: 1fr;
	}
	.impact-table-with-image .impact-table-media {
		order: -1;
		min-height: 240px;
	}
}

/* Light variant of the AI impact table — header tags blown up 50% and
   readable colours against the white panel. */
#ai-impact-table .section-header {
	text-align: center;
}

#ai-impact-table .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	color: var(--text-on-light);
}

#ai-impact-table .section-header p.section-eyebrow {
	color: var(--accent);
}

#ai-impact-table .impact-table-wrapper {
	background: var(--white);
	border-color: var(--border-on-light);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

#ai-impact-table .impact-table td,
#ai-impact-table .impact-table th {
	border-bottom-color: var(--border-on-light);
	color: var(--text-on-light);
	text-align: center;
}

#ai-impact-table .impact-table th {
	font-size: 1.5em;
	color: #000;
}

#ai-impact-table .impact-table .impact-value {
	color: var(--accent);
	text-align: center;
}

.section-light .impact-table-wrapper,
.section-white .impact-table-wrapper {
	background: var(--white);
	border-color: var(--border-on-light);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.impact-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
}

.impact-table th,
.impact-table td {
	text-align: left;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-on-dark);
	vertical-align: middle;
}

.section-light .impact-table th,
.section-light .impact-table td,
.section-white .impact-table th,
.section-white .impact-table td {
	border-bottom-color: var(--border-on-light);
}

.impact-table thead th {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.82rem;
	opacity: 0.85;
}

.impact-table tbody tr:last-child td {
	border-bottom: 0;
}

.impact-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
}

.section-light .impact-table tbody tr:hover,
.section-white .impact-table tbody tr:hover {
	background: rgba(0, 0, 0, 0.03);
}

.impact-table td strong {
	display: block;
	font-size: 1rem;
}

.impact-detail {
	display: block;
	margin-top: 4px;
	opacity: 0.7;
	font-size: 0.88rem;
}

.impact-value {
	font-weight: 700;
	font-size: 1.15rem;
	white-space: nowrap;
	color: var(--accent, #22d3ee);
}

.section-light .impact-value,
.section-white .impact-value {
	color: var(--text-accent-on-light, #0e7490);
}

.impact-note {
	margin-top: 16px;
	font-size: 0.9rem;
	opacity: 0.75;
}

/* ============================================================
   TECH LOGO GRID (DevOps / technologies with labels)
   ============================================================ */
.tech-logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
}

.tech-logo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 12px;
	border-radius: var(--radius-lg);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-light .tech-logo-item,
.section-white .tech-logo-item {
	background: var(--white);
	border: 1px solid var(--border-on-light);
}

.section-dark .tech-logo-item,
.section-dark-alt .tech-logo-item {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-on-dark);
}

.tech-logo-item:hover {
	transform: translateY(-2px);
}

.tech-logo-item img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.tech-logo-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.6rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--border-on-dark);
}

.section-light .tech-logo-placeholder,
.section-white .tech-logo-placeholder {
	background: var(--grey-50);
	border-color: var(--border-on-light);
	color: var(--text-on-light);
}

.tech-logo-name {
	font-size: 0.92rem;
	font-weight: 600;
	text-align: center;
}

/* Mobile: "Main technologies we use" shows the bare logos only — no
   panel (background/border/padding) and no name label underneath. */
@media (max-width: 640px) {
	#technology-logos .tech-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 16px;
	}

	#technology-logos .tech-logo-item {
		background: transparent;
		border: none;
		padding: 0;
	}

	#technology-logos .tech-logo-item:hover {
		transform: none;
	}

	#technology-logos .tech-logo-name {
		display: none;
	}
}

/* ============================================================
   POSITIONING PILLARS (specialist proof block)
   ============================================================ */
.positioning-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.positioning-pillar {
	padding: 28px;
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.section-light .positioning-pillar,
.section-white .positioning-pillar {
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.section-dark .positioning-pillar,
.section-dark-alt .positioning-pillar {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-on-dark);
}

.positioning-pillar::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

.positioning-pillar h3 {
	margin: 0 0 12px;
}

.positioning-pillar p {
	margin: 0;
	line-height: 1.4;
	opacity: 1;
}

.positioning-pillar:hover {
	transform: translateY(-2px);
}

.positioning-pillars-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: clamp(28px, 3vw, 48px);
}

.positioning-pillars-action .action-followup {
	margin: clamp(28px, 3vw, 48px) 0 0;
	text-align: center;
}

.positioning-pillars-action .button-outline.pillars-cta {
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

.positioning-pillars-action .button-outline.pillars-cta:hover,
.positioning-pillars-action .button-outline.pillars-cta:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* B2G & Defence in-panel CTA: match the previous outlined "pillars-cta"
   look and centre the button inside the feature-copy panel. */
#b2g-defence .feature-copy .actions {
	justify-content: center;
	margin-top: clamp(28px, 3vw, 48px);
}

#b2g-defence .feature-copy .actions .button {
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);
	border-radius: var(--radius);
	font-size: 1.425rem;
	padding: 14px 28px;
}

#b2g-defence .feature-copy .actions .button:hover,
#b2g-defence .feature-copy .actions .button:focus-visible {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	box-shadow: none;
	transform: none;
}

#user-segment-cards .section-header,
#kvantphone-advantages .section-header {
	text-align: center;
}

#kvantphone-advantages .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

#user-segment-cards .section-header p {
	color: var(--white);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.user-mgmt-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-py);
}

.user-mgmt-block h2 {
	text-align: center;
	margin: 0;
}

.user-mgmt-grid {
	display: grid;
	grid-template-columns: 1fr minmax(0, 1.4fr) 1fr;
	align-items: center;
	gap: clamp(24px, 3vw, 56px);
	width: 100%;
}

.user-mgmt-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 32px);
	align-self: start;
	margin-top: 16px;
}

.user-mgmt-item,
.section-white .user-mgmt-item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 1.1rem;
	color: #000;
}

.user-mgmt-list-left .user-mgmt-item {
	flex-direction: row-reverse;
	text-align: right;
}

.user-mgmt-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	object-fit: contain;
}

.user-mgmt-visual {
	display: flex;
	justify-content: center;
}

.user-mgmt-visual img {
	width: 100%;
	height: auto;
	max-width: 575px;
	display: block;
}

@media (max-width: 768px) {
	.user-mgmt-grid {
		grid-template-columns: 1fr;
		/* Stacked layout: match the gap between the two lists to the gap between
		   items within a list, so Administrator management -> Visibility management
		   spacing equals every other item gap. */
		gap: clamp(20px, 2.5vw, 32px);
	}

	.user-mgmt-list {
		margin-top: 0;
	}

	.user-mgmt-list-left .user-mgmt-item {
		flex-direction: row;
		text-align: left;
	}

	.user-mgmt-visual {
		order: -1;
	}
}

#user-segment-cards .card-grid-footer-quote {
	position: relative;
	margin: clamp(28px, 3vw, 40px) 0 0;
	padding: clamp(28px, 3vw, 40px) clamp(28px, 4vw, 56px);
	padding-left: calc(clamp(28px, 4vw, 56px) + var(--stripe-width));
	background: var(--white);
	color: var(--primary);
	border-radius: var(--radius);
	font-size: 1.15rem;
	line-height: 1.55;
	font-style: italic;
	text-align: left;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

#user-segment-cards .card-grid-footer-quote::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--stripe-width);
	background: var(--stripe-v);
	z-index: 1;
}

#user-segment-cards .positioning-pillars-action .button-outline.pillars-cta {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
}

#user-segment-cards .positioning-pillars-action .button-outline.pillars-cta:hover,
#user-segment-cards .positioning-pillars-action .button-outline.pillars-cta:focus-visible {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

/* ============================================================
   LINK CARDS (media recognition + external article cards)
   ============================================================ */
.link-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	position: relative;
}

/* Mobile phone view only: optionally hide and reorder link cards. */
@media (max-width: 640px) {
	.link-card.link-card-hide-mobile {
		display: none;
	}

	.link-card-grid .link-card {
		order: 0;
	}

	.link-card-grid .mobile-order-0 { order: 0; }
	.link-card-grid .mobile-order-1 { order: 1; }
	.link-card-grid .mobile-order-2 { order: 2; }
	.link-card-grid .mobile-order-3 { order: 3; }
	.link-card-grid .mobile-order-4 { order: 4; }
	.link-card-grid .mobile-order-5 { order: 5; }
	.link-card-grid .mobile-order-6 { order: 6; }

	/* Render the card CTA as a compact outlined navy button — deliberately
	   smaller than the home "Two ways we create value" panel button
	   (which is 0.95rem / 14px 28px). Navy outline filling navy on hover. */
	.link-card-cta-button .link-card-cta {
		align-self: center;
		margin-top: 16px;
		width: auto;
		max-width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 9px 18px;
		border: 2px solid var(--primary);
		border-radius: var(--radius);
		color: var(--primary);
		background: transparent;
		font-weight: 600;
		font-size: 0.82rem;
		transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	}

	.link-card-cta-button .link-card:hover .link-card-cta,
	.link-card-cta-button .link-card:focus-visible .link-card-cta {
		background: var(--primary);
		color: var(--white);
		border-color: var(--primary);
		transform: none;
	}

	/* Press-coverage block: hide the section-level "Learn more about us" button
	   on mobile phone view (the per-card CTAs are enough on small screens). */
	#media-recognition .positioning-pillars-action {
		display: none;
	}
}

.section-light .link-card,
.section-white .link-card {
	background: var(--white);
	border: 1px solid var(--border-on-light);
}

.section-dark .link-card,
.section-dark-alt .link-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-on-dark);
}

.link-card:hover {
	transform: translateY(-2px);
	border-color: var(--accent, #22d3ee);
}

.link-card h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.link-card p {
	margin: 0;
	opacity: 0.85;
	line-height: 1.55;
	font-size: 0.95rem;
}

.link-card .card-kicker {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

/* Selected press coverage — dark navy outline on each card */
#media-recognition .link-card {
	border-color: var(--navy-800);
}

/* Press-coverage descriptions in dark navy */
#media-recognition .link-card p {
	color: var(--navy-800);
	opacity: 1;
}

/* "Read article" CTA in the bottom-right of press-coverage cards */
.link-card-cta {
	align-self: flex-end;
	margin-top: 8px;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.95rem;
	transition: transform 200ms ease;
}

.link-card:hover .link-card-cta {
	transform: translateX(4px);
}

/* Press-coverage logo block — top-centered logo, fixed height, contain-fit */
.link-card-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin: 0 0 6px;
}

.link-card-logo img {
	max-height: 100%;
	max-width: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Security Journal UK logo reads 15% smaller for visual balance */
.link-card-logo img[src$="security-journal-uk-short.png"] {
	max-height: 85%;
	max-width: 68%;
}

/* In the press-coverage "media-recognition" block: Politico logo reads
   10% smaller for visual balance with the other press logos. */
#media-recognition .link-card-logo img[src$="politico.png"] {
	max-height: 90%;
	max-width: 72%;
}

/* Media-appearances "Selected articles" block only: Forbes logo reads
   15% smaller for visual balance with the other press logos. */
#featured-articles .link-card-logo img[src$="Forbes_logo_black.png"] {
	max-height: 85%;
	max-width: 68%;
}

/* Media-appearances "Selected articles" block only: Telex logo reads
   15% smaller for visual balance with the other press logos. */
#featured-articles .link-card-logo img[src$="Telex.jpg"] {
	max-height: 85%;
	max-width: 68%;
}

/* Media-appearances "Selected articles" block only: Medium wordmark reads
   20% smaller for visual balance with the other press logos. */
#featured-articles .link-card-logo img[src$="medium.svg"] {
	max-height: 80%;
	max-width: 64%;
}

/* Podcasts/interviews link-cards: hide the bottom-right arrow since each
   card carries an embedded video player and the click affordance is
   already obvious from the embed. */
#podcasts-and-interviews .link-card-arrow {
	display: none;
}

/* Podcasts/interviews link-cards: the source kicker (first line on each
   panel) reads at h3 size in accent blue — same scale as the title and
   colored to telegraph the channel/source. */
#podcasts-and-interviews .link-card .card-kicker {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
	color: var(--accent);
}

/* Podcasts/interviews link-cards: title text reads at regular weight
   (no bold) since it carries the long descriptive sentence under the
   source kicker. */
#podcasts-and-interviews .link-card h3 {
	font-weight: 400;
}

/* Podcasts/interviews link-cards: the optional description line (e.g. a
   date below the title) matches the title's type scale, weight and color
   so it reads as a continuation of the sentence above it. */
#podcasts-and-interviews .link-card p {
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 400;
	opacity: 1;
	color: inherit;
	margin-top: -10px;
}

/* Decorative icon shown inline before a linkCards section title (e.g. a
   YouTube glyph telegraphing that the cards link to videos). The icon
   sits to the left of the title on the same baseline, both centered as
   one block. */
.section-title-with-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.2vw, 18px);
	flex-wrap: wrap;
}

.section-title-with-icon .link-cards-decoration {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.section-title-with-icon .link-cards-decoration svg {
	width: clamp(36px, 4vw, 52px);
	height: auto;
	display: block;
}

/* Phones: drop the decorative YouTube glyph before the
   "Interviews, videos and longer-form conversations" title — the video
   thumbnails in the cards below already signal the medium. */
@media (max-width: 640px) {
	#podcasts-and-interviews .link-cards-decoration {
		display: none;
	}
}

/* YouTube thumbnail inside a link-card (e.g. podcast cards on
   /media-appearances/). Sits below the description, spanning the same
   width as the text content; height follows from the 16:9 aspect. The
   whole card is a link to YouTube, so clicking the thumbnail opens the
   video in a new tab — no embedded player. */
.link-card .link-card-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 12px 0 4px;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.link-card .link-card-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Centered YouTube play glyph overlaid on the thumbnail. pointer-events
   are disabled so the click falls through to the card's parent link. */
.link-card-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: clamp(54px, 12%, 72px);
	height: clamp(54px, 12%, 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
	transition: transform 200ms ease;
}

.link-card-play svg {
	width: 100%;
	height: 100%;
	display: block;
}

.link-card:hover .link-card-thumb {
	transform: scale(1.03);
	transition: transform 300ms ease;
}

/* Company Builders podcast thumbnail mirrored horizontally so the speaker
   faces into the card (to the right). The hover variant keeps the mirror
   while applying the shared zoom. */
.link-card .link-card-thumb[src*="Company_builders_podcast"] {
	transform: scaleX(-1);
}

.link-card:hover .link-card-thumb[src*="Company_builders_podcast"] {
	transform: scale(-1.03, 1.03);
}

.link-card:hover .link-card-play {
	transform: scale(1.08);
}

.link-card-arrow {
	align-self: flex-end;
	font-size: 1.3rem;
	margin-top: 8px;
	transition: transform 200ms ease;
}

.link-card:hover .link-card-arrow {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.positioning-pillars {
		grid-template-columns: 1fr;
	}
	.tech-logo-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
	.impact-table th,
	.impact-table td {
		padding: 12px 14px;
	}
}

/* ===========================
   Logo marquee (animated strip)
   =========================== */
.logo-marquee {
	position: relative;
	overflow: hidden;
	padding: 12px 0;
	mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-marquee-track {
	display: flex;
	gap: 56px;
	width: max-content;
	animation: logo-marquee-scroll 40s linear infinite;
}

.logo-marquee:hover .logo-marquee-track {
	animation-play-state: paused;
}

.logo-marquee-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	min-width: 120px;
}

.logo-marquee-item img {
	max-height: 100%;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.85;
	filter: grayscale(15%);
	transition: opacity 200ms ease, filter 200ms ease;
}

.logo-marquee-item img:hover {
	opacity: 1;
	filter: grayscale(0);
}

@keyframes logo-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.logo-marquee-track {
		animation: none;
	}
}

/* Contact form (Pages Function endpoint) */
.contact-form {
	display: grid;
	gap: 12px;
	max-width: 560px;
}

.contact-form .field {
	display: grid;
	gap: 4px;
}

/* CV upload (application mode): styled like an outline button. The native
   input[type=file] is visually hidden inside the label so the label IS the
   button. A filename appears next to it after a file is picked. */
.contact-form .field-attachment {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.contact-form .cf-attach-button {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: var(--radius);
	border: 2px solid var(--white);
	color: var(--white);
	background: transparent;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background 150ms ease, color 150ms ease;
}

.contact-form .cf-attach-button:hover,
.contact-form .cf-attach-button:focus-within {
	background: var(--white);
	color: var(--primary);
}

.contact-form .cf-attach-button input[type='file'] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.contact-form .cf-attach-filename {
	font-size: 0.9rem;
	color: var(--text-on-dark-muted);
	word-break: break-all;
}

.contact-form-wrap .contact-form .cf-attach-button {
	color: var(--primary);
	border-color: var(--primary);
}

.contact-form-wrap .contact-form .cf-attach-button:hover,
.contact-form-wrap .contact-form .cf-attach-button:focus-within {
	background: var(--primary);
	color: var(--white);
}

.contact-form-wrap .contact-form .cf-attach-filename {
	color: var(--text-on-light-muted);
}

/* On-card (light) treatment — form sits in a white panel inside .contact-form-wrap */
.contact-form-wrap .contact-form label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: 0.01em;
}

.contact-form-wrap .contact-form input,
.contact-form-wrap .contact-form textarea {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border-on-light);
	background: var(--bg-light);
	color: var(--text-on-light);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.contact-form-wrap .contact-form input:focus,
.contact-form-wrap .contact-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--white);
	box-shadow: 0 0 0 3px rgba(9, 148, 212, 0.18);
}

.contact-form-wrap .contact-form textarea {
	min-height: 80px;
	resize: vertical;
}

.contact-form-wrap .contact-form .consent-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	font-size: 0.88rem;
	color: var(--text-on-light-muted);
	line-height: 1.45;
}

.contact-form-wrap .contact-form .consent-row input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--accent);
}

.contact-form .actions {
	margin-top: 4px;
}

.contact-form button[type='submit'] {
	cursor: pointer;
}

.contact-form button[type='submit']:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.contact-form-wrap .contact-form-status {
	font-size: 0.92rem;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border-on-light);
	color: var(--text-on-light);
}

.contact-form-status-title {
	display: block;
	margin-bottom: 4px;
}

.contact-form-wrap .contact-form-status[data-state='success'] {
	background: rgba(40, 200, 64, 0.08);
	border-color: rgba(40, 200, 64, 0.55);
	color: #135a23;
}

.contact-form-wrap .contact-form-status[data-state='error'] {
	background: rgba(255, 95, 87, 0.08);
	border-color: rgba(255, 95, 87, 0.55);
	color: #6e1a14;
}

.contact-form-wrap .contact-form .field-error {
	color: #b3261e;
	font-size: 0.82rem;
}

/* honeypot */
.contact-form .hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Two-column contact section (copy left, form right) */
.contact-inner-with-form {
	max-width: 1080px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	text-align: left;
	align-items: stretch;
}

.contact-inner-with-form .contact-copy {
	display: flex;
	flex-direction: column;
}

.contact-inner-with-form .contact-badge {
	margin: auto;
	align-self: center;
}

.contact-inner-with-form .contact-copy h2 {
	margin-bottom: 16px;
}

.contact-inner-with-form .contact-copy p {
	margin: 0 0 24px;
}

.contact-inner-with-form .contact-actions {
	justify-content: flex-start;
}

.contact-inner-with-form .social-row {
	justify-content: flex-start;
}

@media (max-width: 900px) {
	.contact-inner-with-form {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center;
	}
	.contact-inner-with-form .contact-actions,
	.contact-inner-with-form .social-row {
		justify-content: center;
	}
	.contact-form {
		text-align: left;
	}
}

/* Rich text + image two-column layout */
.prose-block-with-image {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.prose-block-with-image .prose-block-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prose-block-with-image .prose-block-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.prose-block-with-image figcaption {
	font-size: 0.85rem;
	color: var(--text-on-light-muted);
	font-style: italic;
}

.section-dark .prose-block-with-image figcaption {
	color: var(--text-on-dark-muted);
}

@media (max-width: 900px) {
	.prose-block-with-image {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Partnership models intro — one-line headline above the 3 panels */
#partnership-models .section-header p {
	max-width: none;
}

/* On the colourful partnership-models backdrop, the cards' light grey border
   was visible around all edges (most obviously a sliver to the left of the
   gradient stripe). Drop the border entirely and lean on a contact-form-style
   drop shadow to lift the panels off the gradient instead. */
#partnership-models .service-card {
	border: 0;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

#partnership-models .service-card::before {
	left: 0;
	top: 0;
	bottom: 0;
}

/* Customer Value footer — black title and dark navy band with 3 check-mark items, gradient stripe at the bottom */
.customer-value-banner {
	max-width: var(--content-width);
	margin: clamp(28px, 3vw, 40px) auto 0;
}

.customer-value-header {
	margin-bottom: 14px;
}

.customer-value-label {
	color: #000;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.customer-value-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 36px);
	background: var(--primary);
	color: var(--white);
	padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 36px);
	border-radius: var(--radius-lg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.customer-value-row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(to right, #fff, var(--accent));
}

.customer-value-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.customer-value-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--accent);
	flex: none;
	align-self: center;
}

.customer-value-check svg {
	width: 100%;
	height: 100%;
	display: block;
}

.customer-value-text h3 {
	margin: 0 0 4px;
	color: var(--white);
	font-size: 1.15rem;
	font-weight: 700;
}

.customer-value-text p {
	margin: 0;
	color: var(--white);
	opacity: 0.85;
	font-size: 0.95rem;
	line-height: 1.45;
}

@media (max-width: 768px) {
	.customer-value-row {
		grid-template-columns: 1fr;
	}
}

/* Card bullets title — small blue label between description and bullet list (e.g. "Key Use Cases:") */
.card-bullets-title {
	margin: 4px 0 6px;
	color: var(--accent);
	font-size: 1rem;
	font-weight: 600;
}

/* Integration and partnership models — KvantPhone tilted-phones backdrop spans the cards + Customer Value footer in one block */
.site-section#partnership-models {
	position: relative;
	overflow: hidden;
}

.site-section#partnership-models::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("/images/sections/bg-phone-in-hand.png"), linear-gradient(180deg, #2b87da 0%, #29c4a9 100%);
	background-repeat: no-repeat;
	background-size: cover, auto;
	background-position: center center, center center;
	pointer-events: none;
	z-index: 0;
}

.site-section#partnership-models > .container {
	position: relative;
	z-index: 1;
}

.site-section#partnership-models .section-header h2,
.site-section#partnership-models .section-header p,
.site-section#partnership-models .customer-value-label {
	color: var(--white);
}

/* Partnering use-cases — full-width intro and compact iconed cards (mirrors the End-to-end protection panel look) */
#partnering-use-cases .section-header p {
	max-width: none;
}

.service-card.service-card-iconed {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 0;
	align-items: center;
	padding: 14px 18px;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.service-card-iconed .card-icon {
	grid-row: 1 / -1;
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--primary));
	color: var(--white);
	flex: none;
	align-self: center;
}

.service-card-iconed h3,
.service-card-iconed p {
	grid-column: 2;
}

.service-card-iconed .card-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}

.service-card-iconed h3 {
	margin: 0;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.service-card-iconed p {
	margin: 2px 0 0;
	color: var(--primary);
	font-size: 0.9rem;
	line-height: 1.35;
}

.site-card-grid-iconed {
	gap: clamp(12px, 1.4vw, 18px);
}

/* Why our customers choose us — vertically center the title in icon-only cards (no description) */
#why-customers-choose-us .site-card-grid-iconed .service-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#why-customers-choose-us .site-card-grid-iconed .service-card h3 {
	margin: 0;
}

/* Why our customers choose us — strip card chrome (no panel) and use the iconed horizontal layout.
   Scoped to .site-card-grid-iconed so pages whose cards carry descriptions (no icons) fall back to
   the standard .site-detail-card panel rendering. */
#why-customers-choose-us .site-card-grid-iconed .service-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 12px 0 !important;
	overflow: visible;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
}

#why-customers-choose-us .site-card-grid-iconed .service-card::before {
	display: none;
}

#why-customers-choose-us .site-card-grid-iconed .service-card .card-icon {
	grid-row: 1 / -1;
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--primary));
	color: var(--white);
	flex: none;
	align-self: center;
}

#why-customers-choose-us .site-card-grid-iconed .service-card .card-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}

#why-customers-choose-us .site-card-grid-iconed .service-card h3 {
	grid-column: 2;
	margin: 0;
	color: var(--primary);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

/* mobileIconTitles cardGrid: on desktop/tablet the cards render as normal panels
   (title + description); the icon is hidden. The icon only appears on mobile. */
.card-grid-mobile-icon-titles .card-icon {
	display: none;
}

/* Hide individual cardGrid cards on mobile phone view only. */
@media (max-width: 640px) {
	.service-card.card-hide-mobile {
		display: none;
	}
}

/* Mobile phone view only: collapse each card to its icon + title, mirroring the
   services overview "#why-customers-choose-us" iconed layout (gradient circle
   icon + title, no panel chrome, descriptions hidden). */
@media (max-width: 640px) {
	.card-grid-mobile-icon-titles {
		gap: 4px;
	}

	.card-grid-mobile-icon-titles .service-card {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 12px 0 !important;
		overflow: visible;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		align-items: center;
	}

	.card-grid-mobile-icon-titles .service-card::before {
		display: none;
	}

	/* Hide everything except the icon and the title (e.g. descriptions). */
	.card-grid-mobile-icon-titles .service-card > *:not(.card-icon):not(h3) {
		display: none;
	}

	.card-grid-mobile-icon-titles .service-card .card-icon {
		display: inline-flex;
		grid-row: 1 / -1;
		grid-column: 1;
		align-items: center;
		justify-content: center;
		width: 44px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--accent), var(--primary));
		color: var(--white);
		flex: none;
		align-self: center;
	}

	.card-grid-mobile-icon-titles .service-card .card-icon svg {
		width: 60%;
		height: 60%;
		display: block;
	}

	.card-grid-mobile-icon-titles .service-card h3 {
		grid-column: 2;
		margin: 0;
		color: var(--primary);
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.3;
	}
}

/* Secure Call Center card image — show the full graphic (incl. side portrait circles) instead of cropping */
#kvantphone .service-card .detail-card-media img[src$="scc-cloud-w-small.png"] {
	object-fit: contain;
	padding: 8px;
	background: var(--white);
}

/* Solutions products grid — push the Learn more button to the bottom so all three CTAs sit on the same line */
#kvantphone .service-card {
	display: flex;
	flex-direction: column;
}

#kvantphone .service-card .actions {
	margin-top: auto;
}

/* Product hero — iconed list (used in the Solutions productHero "communication portfolio" intro) */
.product-hero-icon-list {
	list-style: none;
	margin: 18px 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 12px clamp(16px, 1.6vw, 24px);
}

@media (max-width: 640px) {
	.product-hero-icon-list {
		grid-template-columns: 1fr;
	}
}

.product-hero-icon-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--white);
	font-size: 1.1rem;
	line-height: 1.3;
}

.product-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--white);
	color: var(--white);
	flex: none;
}

.product-hero-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}

.product-hero-icon-text {
	flex: 1;
}

/* Brand highlight — inline emphasis used inside Solutions product card descriptions ("secure communication solution", etc.) */
.brand-highlight {
	color: var(--accent);
	font-weight: 700;
}

/* Solutions product card Learn more buttons — light-blue accent border (and matching hover) */
#kvantphone .service-card .actions .button-outline {
	border-color: var(--accent);
}
#kvantphone .service-card .actions .button-outline:hover,
#kvantphone .service-card .actions .button-outline:focus-visible {
	background: var(--accent);
	color: var(--white);
	border-color: var(--accent);
}

/* Mobile phone view only: make the three product panel "Learn more" buttons
   identical to the press-block article CTA buttons (compact navy outline,
   centered, filling navy on hover). */
@media (max-width: 640px) {
	#kvantphone .service-card .actions {
		display: flex;
		justify-content: center;
	}
	#kvantphone .service-card .actions .button-outline {
		font-size: 0.82rem;
		padding: 9px 18px;
		color: var(--primary);
		border-color: var(--primary);
	}
	#kvantphone .service-card .actions .button-outline:hover,
	#kvantphone .service-card .actions .button-outline:focus-visible {
		background: var(--primary);
		color: var(--white);
		border-color: var(--primary);
	}
}

/* productHero (Solutions) — show the triad-phones image fully without cropping, anchored right */
.page-hero:has(img[src$="triad-phones.webp"]) {
	background: linear-gradient(to right, var(--navy-900) 0%, var(--navy-800) 35%, var(--primary) 100%);
}

.page-hero:has(img[src$="triad-phones.webp"]) .page-hero-media {
	opacity: 1;
	width: 50%;
}

.page-hero:has(img[src$="triad-phones.webp"]) .page-hero-media {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 24px 0;
	right: max(24px, calc(50vw - 576px));
}

.page-hero:has(img[src$="triad-phones.webp"]) .page-hero-media img {
	object-fit: contain;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(440px, 100%);
	margin-left: auto;
	display: block;
}

/* Drop the media overlay so the horizontal hero gradient stays uninterrupted */
.page-hero:has(img[src$="triad-phones.webp"]) .page-hero-media::after {
	background: none;
}

/* Prose locations — icon + label/place rows used in the About Us "Execution-focused engineers" block */
.prose-locations {
	margin-top: clamp(20px, 2.4vw, 28px);
}

.prose-locations-title {
	margin: 0 0 14px;
	color: var(--primary);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
}

.prose-locations-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(47px, 4.5vw, 67px);
}

.prose-locations-list li {
	display: flex;
	align-items: center;
	gap: 16px;
}

.prose-locations-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	color: var(--primary);
	flex: none;
}

.prose-locations-icon svg,
.prose-locations-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.prose-locations-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.prose-locations-label {
	color: var(--primary);
	font-size: 1.15rem;
	font-weight: 500;
}

.prose-locations-place {
	color: var(--accent);
	font-size: 1.15rem;
	margin-top: 2px;
}

/* KvantMail hero — single horizontal gradient sweeping from the dark navy
   on the left edge all the way to white on the right edge (no 50/50 split).
   The landing page and AI-Native, DevOps, Digital Transformation and Secure
   Software Development heroes share the same gradient. */
.page-hero:has(a[href*="KvantMail%20Consultation"]),
.page-hero:has(img[src$="ai-native-development-hero.svg"]),
.page-hero:has(img[src$="devops-it-services-hero.svg"]),
.page-hero:has(img[src$="digital-transformation-hero.svg"]),
.page-hero:has(img[src$="secure-software-development-hero.svg"]),
.page-hero:has(img[src$="hero-case-studies.svg"]) {
	background: linear-gradient(
		to right,
		var(--navy-900) 0%,
		var(--navy-800) 22%,
		#3a6e8f 55%,
		#a6b4bd 100%
	);
}

/* Let the page gradient flow through the image area on the landing page and
   the AI-native, DevOps, Digital Transformation and Secure Software heroes. */
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .page-hero-media::after,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .page-hero-media::after,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .page-hero-media::after,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .page-hero-media::after,
.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-media::after {
	background: transparent;
}

/* AI-native, DevOps, Digital Transformation and Secure Software heroes:
   split text/image 50/50 with the image confined inside the language-selector
   right edge. The :not(.page-hero-home) lets the landing page opt out and use
   its own 60/40 layout. */
.page-hero:not(.page-hero-home):has(img[src$="ai-native-development-hero.svg"]) .page-hero-copy,
.page-hero:not(.page-hero-home):has(img[src$="devops-it-services-hero.svg"]) .page-hero-copy,
.page-hero:not(.page-hero-home):has(img[src$="digital-transformation-hero.svg"]) .page-hero-copy,
.page-hero:not(.page-hero-home):has(img[src$="secure-software-development-hero.svg"]) .page-hero-copy,
.page-hero:not(.page-hero-home):has(img[src$="hero-case-studies.svg"]) .page-hero-copy {
	max-width: 50%;
}

.page-hero:not(.page-hero-home):has(img[src$="ai-native-development-hero.svg"]) .page-hero-media,
.page-hero:not(.page-hero-home):has(img[src$="devops-it-services-hero.svg"]) .page-hero-media,
.page-hero:not(.page-hero-home):has(img[src$="digital-transformation-hero.svg"]) .page-hero-media,
.page-hero:not(.page-hero-home):has(img[src$="secure-software-development-hero.svg"]) .page-hero-media,
.page-hero:not(.page-hero-home):has(img[src$="hero-case-studies.svg"]) .page-hero-media {
	inset: 0 64px 0 auto;
	width: clamp(400px, 50%, 650px);
	opacity: 1;
}

.page-hero:has(img[src$="ai-native-development-hero.svg"]) .page-hero-media img,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .page-hero-media img,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .page-hero-media img,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .page-hero-media img,
.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-media img {
	object-fit: contain;
	object-position: right center;
}

/* Landing page hero — 60/40 split (more room for headline copy) instead of
   the shared 50/50 rule above. */
.page-hero-home .page-hero-copy {
	max-width: 60%;
}

.page-hero-home .page-hero-media {
	width: 50%;
	opacity: 1;
}

/* Home hero — at narrow widths, the image stays absolutely positioned and
   sits BEHIND the copy/buttons (no stacking below). It keeps its natural size
   on the right edge; the text overlays on top with the navy gradient backing
   for readability. */
@media (max-width: 840px) {
	.page-hero-home .page-hero-copy {
		max-width: 100%;
		position: relative;
		z-index: 2;
	}
	.page-hero-home .page-hero-media {
		width: 100%;
		opacity: 1;
		z-index: 1;
	}
	/* When the image sits behind the copy/buttons, lay a dark-navy gradient
	   overlay on top so the white text stays readable. */
	.page-hero-home .page-hero-media:has(img[src$="home-hero-2.webp"])::after {
		background: linear-gradient(to right, rgba(7, 24, 33, 0.78), rgba(7, 24, 33, 0.5));
	}
}

.page-hero:has(img[src$="home-hero-2.webp"]) .page-hero-intro,
.page-hero:has(img[src$="ai-native-development-hero.svg"]) .page-hero-intro,
.page-hero:has(img[src$="devops-it-services-hero.svg"]) .page-hero-intro,
.page-hero:has(img[src$="digital-transformation-hero.svg"]) .page-hero-intro,
.page-hero:has(img[src$="secure-software-development-hero.svg"]) .page-hero-intro,
.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-intro,
.page-hero:has(img[src$="bg-services.svg"]) .page-hero-intro {
	color: var(--white);
}

/* Case-studies hero — nudge the illustration ~1.5cm to the left so the
   image sits closer to the headline copy. */
.page-hero:not(.page-hero-home):has(img[src$="hero-case-studies.svg"]) .page-hero-media {
	inset: 0 121px 0 auto;
}

/* Narrow-viewport treatment for all text-left/image-right heroes EXCEPT
   about-us & the-arenim-ten-commandments (arenim-team-2019.jpeg). The image
   stays absolutely positioned behind the copy/buttons (z-index 1 vs 2) at
   full opacity, with a navy/white gradient overlay laid over it for text
   readability. The home hero already has matching rules above; these mirror
   them for the other heroes. */
@media (max-width: 840px) {
	.page-hero:not(:has(img[src$="arenim-team-2019.jpeg"])):not(.page-hero-home) .page-hero-media {
		inset: 0;
		width: 100%;
		opacity: 1;
		z-index: 1;
	}
	.page-hero:not(:has(img[src$="arenim-team-2019.jpeg"])) > .container {
		position: relative;
		z-index: 2;
	}
	.page-hero-dark:not(:has(img[src$="arenim-team-2019.jpeg"])) .page-hero-media::after {
		background: linear-gradient(to right, rgba(7, 24, 33, 0.78), rgba(7, 24, 33, 0.5));
	}
	.page-hero-light:not(:has(img[src$="arenim-team-2019.jpeg"])) .page-hero-media::after {
		background: linear-gradient(to right, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5));
	}
}

@media (max-width: 860px) {
	/* All heroes EXCEPT home + arenim-team-2019 (about-us, ten-commandments):
	   release the desktop max-width: 50% on the copy so headings and intro
	   fill the panel width once the layout collapses. Specificity (0,4,1)
	   beats the desktop rules (also 0,4,1) via source order, and it beats
	   the (0,3,1) page-specific overrides like KvantMail Consultation. */
	.page-hero:not(.page-hero-home):not(:has(img[src$="arenim-team-2019.jpeg"])) .page-hero-copy {
		max-width: none;
	}
	.page-hero:has(img[src$="ai-native-development-hero.svg"]) .page-hero-media,
	.page-hero:has(img[src$="devops-it-services-hero.svg"]) .page-hero-media,
	.page-hero:has(img[src$="digital-transformation-hero.svg"]) .page-hero-media,
	.page-hero:has(img[src$="secure-software-development-hero.svg"]) .page-hero-media,
	.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-media {
		inset: 0 0 0 auto;
		width: 60%;
		opacity: 0.45;
	}
}

/* Case-studies hero — on mobile phone view, crop the bottom of the illustration
   so the label "bubble" row at the very bottom of the SVG is hidden. The hero
   image is full-width here and fits by width (rendered height = 100vw / aspect
   1.4286 = 70vw), so anchoring it to the box bottom makes a vw-based clip remove
   an exact slice of the illustration. The bubbles sit at ~92–96% of the SVG, so
   ~9.5% (≈ 6.7vw) is cropped to clear them. */
@media (max-width: 840px) {
	.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-media img {
		object-position: center bottom;
		clip-path: inset(0 0 6.7vw 0);
	}
}

/* Case-studies hero — on mobile phone view, drop the background illustration
   entirely. The hero keeps its dark navy gradient (.page-hero-dark), so the
   white headline/intro stay readable. (Tablet 641–840px keeps the cropped
   illustration from the rule above.) Also centre the headline. */
@media (max-width: 640px) {
	.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-media {
		display: none;
	}

	.page-hero:has(img[src$="hero-case-studies.svg"]) .page-hero-copy h1 {
		text-align: center;
	}

	/* Hide individual case studies on mobile phone view only. */
	.case-study-band.case-hide-mobile {
		display: none;
	}
}

.page-hero:has(a[href*="KvantMail%20Consultation"]) .page-hero-copy {
	text-align: left;
	max-width: 50%;
	margin-left: 0;
	margin-right: auto;
}

.page-hero:has(a[href*="KvantMail%20Consultation"]) .page-hero-copy h1 {
	text-align: left;
}

.page-hero:has(a[href*="KvantMail%20Consultation"]) .page-hero-intro {
	color: var(--white);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.page-hero:has(a[href*="KvantMail%20Consultation"]) .actions .button {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
	border-radius: var(--radius);
	font-size: 22.8px;
}

.page-hero:has(a[href*="KvantMail%20Consultation"]) .actions .button:hover,
.page-hero:has(a[href*="KvantMail%20Consultation"]) .actions .button:focus-visible {
	background: var(--white);
	color: var(--primary);
	border-color: var(--white);
	transform: translateY(-1px);
	box-shadow: none;
}

/* Capabilities (KvantMail) — vertically center content so bottom padding matches the top padding regardless of description length */
#capabilities .service-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#capabilities .service-card h3 {
	margin: 0 0 8px;
}

#capabilities .service-card p {
	margin: 0;
}

/* Secure Call Center hero — text constrained to the left half, image sized to fit the right half */
.page-hero:has(img[src$="scc-cloud-w-small.png"]) .page-hero-copy {
	max-width: 50%;
	margin-left: 0;
	margin-right: auto;
}

.page-hero:has(img[src$="scc-cloud-w-small.png"]) .page-hero-media {
	width: 50%;
	left: auto;
	right: 0;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 2vw, 32px);
}

.page-hero:has(img[src$="scc-cloud-w-small.png"]) .page-hero-media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.page-hero:has(img[src$="scc-cloud-w-small.png"]) .page-hero-media::after {
	background: none;
}

/* SCC value-proposition — center the section header across the full block width */
#value-proposition .section-header {
	text-align: center;
}

#value-proposition .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

#value-proposition .service-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#value-proposition .service-card h3 {
	margin: 0 0 8px;
}

#value-proposition .service-card p {
	margin: 0;
}

/* SCC Revolut methodology — move the highlight quote to the very top of the copy column, drop the bold weight on the label */
#revolut-methodology .feature-copy {
	display: flex;
	flex-direction: column;
}

#revolut-methodology .feature-copy h2 {
	order: -2;
}

#revolut-methodology .feature-copy .feature-highlight {
	order: -1;
	margin: clamp(16px, 1.8vw, 24px) 0 clamp(20px, 2.4vw, 32px);
}

#revolut-methodology .feature-highlight-label {
	font-weight: 400;
}

/* Secure Call Center page — mobile phone refinements. */
@media (max-width: 640px) {
	/* Hero: drop the background product image; the dark navy gradient
	   (.page-hero-dark) remains so the white copy stays readable. */
	.page-hero:has(img[src$="scc-cloud-w-small.png"]) .page-hero-media {
		display: none;
	}

	/* Revolut methodology: take the content off the panel (no card chrome) so it
	   spans the full width, and tame the tall portrait reference image. */
	#revolut-methodology .feature-band {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
	}
	#revolut-methodology .feature-band::before {
		display: none;
	}
	#revolut-methodology .feature-copy {
		padding-left: 0;
		padding-right: 0;
	}
	/* The highlight is inline-flex + white-space:nowrap, which forces the quote
	   and label onto one unbreakable line and blows out the grid track on narrow
	   screens. Stack and allow wrapping so it fits the column width. */
	#revolut-methodology .feature-highlight {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		white-space: normal;
	}
	#revolut-methodology .feature-visual {
		min-height: 0;
		margin-top: clamp(16px, 3vw, 24px);
		justify-content: center;
	}
	/* Keep width:100% (not auto) so the portrait image does not force the grid
	   track to its intrinsic width; cap the height and contain so the whole
	   phone shot shows, centered, at a sensible size. */
	#revolut-methodology .feature-img {
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: 360px;
		object-fit: contain;
		border-radius: var(--radius-lg);
	}

	/* In-app calling and messaging: drop the forced 1fr/2fr split (set globally)
	   and stack instead, so the order reads title + first sentence → diagram →
	   closing sentence. The diagram is inserted between the two descriptions and
	   shown in full (contain) at the full column width — as large as it fits —
	   rather than being cover-cropped. */
	#architecture .feature-band {
		grid-template-columns: 1fr;
	}
	/* Zero the copy's bottom padding (and the last paragraph's margin) and the
	   footer's top padding so the only space around the diagram comes from the
	   visual's own symmetric margin — equal padding above and below the image. */
	#architecture .feature-copy {
		padding-bottom: 0;
	}
	#architecture .feature-copy > p:last-of-type {
		margin-bottom: 0;
	}
	#architecture .feature-visual {
		min-height: 0;
		justify-content: center;
		margin: clamp(20px, 4vw, 28px) 0;
	}
	#architecture .feature-footer {
		padding-top: 0;
	}
	#architecture .feature-img {
		width: 100%;
		height: auto;
		min-height: 0;
		object-fit: contain;
	}
}

/* Case-studies page: centre the section headers on key-messages and
   case-studies-detailed across the full section width, the way the
   DevOps services header is treated. */
#case-studies-detailed .section-header,
#key-messages .section-header {
	text-align: center;
}

#case-studies-detailed .section-header p,
#key-messages .section-header p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* ===== Case study panels (caseStudyGrid section) =====
   Stacked alternating bands with copy column, image column, and an
   expand-on-click body. The 2nd paragraph fades out when collapsed
   to hint at hidden content. */
.case-study-stack {
	display: grid;
	gap: 32px;
	margin-top: clamp(28px, 3vw, 40px);
}

.case-study-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border-on-light);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	position: relative;
}

.case-study-band-reversed .case-study-copy {
	order: 2;
}

.case-study-band-reversed .case-study-visual {
	order: 1;
}

.case-study-copy {
	padding: clamp(28px, 3.6vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.case-study-copy h3 {
	margin: 0 0 4px;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	color: var(--text-on-light);
}

.case-study-band .section-eyebrow {
	font-size: var(--font-size-subtitle);
	line-height: 1.25;
	text-align: left;
	margin: 0 0 12px;
	max-width: none;
}

.case-study-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.case-study-body p {
	margin: 0;
	color: var(--text-on-light-muted);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Collapsed state: only the first paragraph is visible, faded out at the
   bottom to hint at the hidden content below. */
.case-study-body[data-collapsed="true"] .case-study-paragraph[data-extra="true"] {
	display: none;
}

.case-study-body[data-collapsed="true"] .case-study-paragraph:first-child {
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0.3) 100%);
	mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0.3) 100%);
}

.case-study-body[data-collapsed="false"] .case-study-paragraph:first-child {
	-webkit-mask-image: none;
	mask-image: none;
}

.case-study-toggle {
	align-self: flex-start;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.case-study-toggle-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.case-study-band.is-expanded .case-study-toggle-icon {
	transform: rotate(180deg);
}

.case-study-toggle .case-study-toggle-collapse {
	display: none;
}

.case-study-band.is-expanded .case-study-toggle .case-study-toggle-expand {
	display: none;
}

.case-study-band.is-expanded .case-study-toggle .case-study-toggle-collapse {
	display: inline;
}

.case-study-visual {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: stretch;
	background: var(--navy-900);
}

.case-study-visual img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	filter: brightness(1.3);
}

/* Expanded state: copy column grows to the full band width, the visual
   column collapses to zero width, and the toggle button drops into the
   bottom-right corner of the now-full-width panel. */
.case-study-band.is-expanded {
	grid-template-columns: 1fr;
}

.case-study-band.is-expanded .case-study-visual {
	display: none;
}

.case-study-band.is-expanded .case-study-copy {
	padding-bottom: clamp(80px, 8vw, 96px);
}

.case-study-band.is-expanded .case-study-toggle {
	position: absolute;
	right: clamp(20px, 3vw, 32px);
	bottom: clamp(20px, 3vw, 32px);
	margin-top: 0;
	z-index: 2;
}

@media (max-width: 860px) {
	.case-study-band,
	.case-study-band-reversed {
		grid-template-columns: 1fr;
	}
	.case-study-band-reversed .case-study-copy {
		order: 2;
	}
	.case-study-band-reversed .case-study-visual {
		order: 1;
	}
	.case-study-band .case-study-copy {
		order: 2;
	}
	.case-study-band .case-study-visual {
		order: 1;
	}
	/* Show the full case-study illustration (contain) instead of
	   cover-cropping the landscape diagram in a near-square box. */
	.case-study-visual {
		min-height: 0;
		padding: 16px;
	}
	.case-study-visual img {
		height: auto;
		min-height: 0;
		object-fit: contain;
	}
}