/*
Theme Name: NORV Consulting
Theme URI: https://norv.lt
Author: NORV
Description: Content-managed aurora theme for NORV. Identical visual design to NORV Aurora, but every word is edited in wp-admin: page content is native Gutenberg blocks, navigation uses WordPress menus, and nothing is hardcoded in templates. Content survives theme switches.
Version: 3.26.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: norv-consulting
*/


/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
	--bg:          #05060f;
	--bg-soft:     #0a0d1c;
	--ink:         #eef0ff;
	--ink-dim:     #a7adcd;
	--ink-faint:   #6f7699;

	--cyan:        #7cf7ff;
	--violet:      #8b7bff;
	--pink:        #ff7ad9;

	--glass:       rgba(255, 255, 255, .045);
	--glass-brd:   rgba(255, 255, 255, .10);
	--glass-hi:    rgba(255, 255, 255, .16);

	--grad:        linear-gradient(100deg, var(--cyan), var(--violet) 52%, var(--pink));

	--shell:       min(1220px, calc(100% - 2 * var(--gutter)));
	--gutter:      24px;
	--radius:      20px;
	--radius-lg:   28px;

	--ease:        cubic-bezier(.22, 1, .36, 1);

	/* The lower bounds are what phones actually get: below ~640px the vw term
	   is smaller than the minimum, so the minimum is the size. They were set
	   from the desktop design and left a 46px headline and 32px section titles
	   on a 390px screen, which reads as though the page is zoomed in. */
	--fs-hero:     clamp(2.1rem, 7.2vw, 6.6rem);
	--fs-h2:       clamp(1.6rem, 4.4vw, 3.9rem);
	--fs-h3:       clamp(1.15rem, 1.7vw, 1.42rem);
	--fs-lead:     clamp(1.02rem, 1.35vw, 1.22rem);
}

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

/* Horizontal overflow is clipped on BOTH html and body, and with `clip`
   rather than `hidden`.
   
   With overflow-x on body alone the value propagates to the viewport, leaving
   the layout viewport ~23px wider than the screen: fixed elements (the aurora,
   the mobile nav) sized to that wider viewport while the header, being in
   normal flow, stopped at the body edge — a bare strip down the right of the
   header on a real phone.

   `hidden` would fix the strip but makes the element a scroll container, and a
   sticky header inside a scroll container that is not the viewport stops
   sticking. `clip` prevents the overflow without creating one, so the header
   still sticks. No fallback is declared on html on purpose: a browser too old
   for `clip` ignores this line and keeps the previous behaviour, which is
   merely cosmetic, instead of losing the sticky header. */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.62;
	letter-spacing: -.01em;
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -.045em; line-height: 1.04; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ==========================================================================
   AURORA BACKDROP
   ========================================================================== */
.aurora {
	position: fixed;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 50% -10%, #101634 0%, transparent 60%),
		var(--bg);
}

.aurora__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	will-change: transform;
	/* Parallax offsets are written by JS as --px / --py. */
	translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
}
.aurora__blob--1 {
	width: 52vw; height: 52vw; left: -12vw; top: -14vw;
	background: radial-gradient(circle at 30% 30%, rgba(124, 247, 255, .75), transparent 65%);
	animation: drift-a 26s var(--ease) infinite alternate;
}
.aurora__blob--2 {
	width: 46vw; height: 46vw; right: -10vw; top: -6vw;
	background: radial-gradient(circle at 60% 40%, rgba(255, 122, 217, .62), transparent 65%);
	animation: drift-b 32s var(--ease) infinite alternate;
}
.aurora__blob--3 {
	width: 58vw; height: 58vw; left: 8vw; top: 46vh;
	background: radial-gradient(circle at 50% 50%, rgba(139, 123, 255, .58), transparent 68%);
	animation: drift-c 38s var(--ease) infinite alternate;
}
.aurora__blob--4 {
	width: 40vw; height: 40vw; right: -6vw; bottom: -12vw;
	background: radial-gradient(circle at 40% 60%, rgba(124, 247, 255, .40), transparent 66%);
	animation: drift-b 30s var(--ease) infinite alternate-reverse;
}

/* Fine noise keeps large gradients from banding. */
.aurora__grain {
	position: absolute; inset: -50%;
	opacity: .16; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@keyframes drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.22) rotate(28deg); } }
@keyframes drift-b { to { transform: translate3d(-16vw, 14vh, 0) scale(1.16) rotate(-24deg); } }
@keyframes drift-c { to { transform: translate3d(10vw, -14vh, 0) scale(1.28) rotate(18deg); } }

.starfield {
	position: fixed; inset: 0; z-index: -1;
	width: 100%; height: 100%;
	pointer-events: none; opacity: .55;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	padding: 1.05rem 0;
	transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(5, 6, 15, .72);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border-bottom-color: var(--glass-brd);
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; justify-content: space-between; }

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark { width: 30px; height: 30px; display: grid; place-items: center; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text {
	font-weight: 800; font-size: 1.28rem; letter-spacing: -.06em;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.site-nav { display: flex; gap: 1.75rem; font-size: .9rem; color: var(--ink-dim); }
.site-nav a { position: relative; padding: .2rem 0; transition: color .25s var(--ease); }
.site-nav a::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 100%; height: 1.5px; background: var(--grad);
	transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: .75rem; }

.lang-switch {
	display: inline-flex; align-items: center; gap: .28rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .06em;
	padding: .42rem .7rem; border-radius: 99px;
	border: 1px solid var(--glass-brd); background: var(--glass);
	transition: border-color .3s var(--ease), background .3s var(--ease);
}
.lang-switch:hover { border-color: var(--glass-hi); background: rgba(255,255,255,.08); }
.lang-switch__current { color: var(--ink); }
.lang-switch__slash { color: var(--ink-faint); }
.lang-switch__other { color: var(--ink-faint); transition: color .3s var(--ease); }
.lang-switch:hover .lang-switch__other { color: var(--cyan); }

.nav-toggle {
	display: none; width: 40px; height: 36px; padding: 0;
	background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 11px;
	cursor: pointer; place-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 16px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .82rem 1.35rem; border-radius: 99px;
	font-size: .93rem; font-weight: 650; letter-spacing: -.01em;
	border: 1px solid transparent; cursor: pointer;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn__arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
	background: var(--grad); color: #07070f; font-weight: 720;
	box-shadow: 0 8px 30px -10px rgba(139, 123, 255, .8);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(139, 123, 255, .95); }

.btn--ghost { border-color: var(--glass-brd); background: var(--glass); color: var(--ink); }
.btn--ghost:hover { border-color: var(--glass-hi); background: rgba(255,255,255,.08); transform: translateY(-2px); }

.btn--sm { padding: .52rem 1rem; font-size: .84rem; }
.btn--lg { padding: 1.02rem 1.75rem; font-size: 1.02rem; }

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */
.kicker {
	font-size: .72rem; font-weight: 750; letter-spacing: .18em;
	color: transparent; background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	margin-bottom: 1.1rem;
}

.section { padding: clamp(4.5rem, 10vw, 9rem) 0; position: relative; }
.section__head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title { font-size: var(--fs-h2); }
.section__lead { margin-top: 1.3rem; font-size: var(--fs-lead); color: var(--ink-dim); max-width: 660px; }

.grad {
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

.prose { font-size: var(--fs-lead); color: var(--ink-dim); margin-bottom: 1.15rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.hero__inner {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
	min-height: 76vh;
}
.hero__title { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.055em; }
.hero__title .line { display: block; }
.hero__lead { margin-top: 1.7rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-dim); max-width: 620px; }
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__visual { position: relative; display: grid; place-items: center; }

.orb-stack { position: relative; width: 100%; max-width: 470px; }
.orb {
	position: absolute; border-radius: 50%; filter: blur(46px); opacity: .75; z-index: 0;
}
.orb--a { width: 240px; height: 240px; background: radial-gradient(circle, rgba(124,247,255,.62), transparent 70%); top: -60px; left: -50px; animation: float-a 12s ease-in-out infinite; }
.orb--b { width: 210px; height: 210px; background: radial-gradient(circle, rgba(255,122,217,.55), transparent 70%); bottom: -55px; right: -40px; animation: float-b 15s ease-in-out infinite; }

@keyframes float-a { 50% { transform: translate3d(22px, -26px, 0) scale(1.12); } }
@keyframes float-b { 50% { transform: translate3d(-24px, 20px, 0) scale(1.1); } }

.glass-panel {
	position: relative; z-index: 1;
	background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
	padding: 1rem 1rem 1.15rem;
	transform-style: preserve-3d;
	transition: transform .5s var(--ease);
}
.glass-panel__head {
	display: flex; align-items: center; gap: .38rem;
	padding: .15rem .3rem .8rem; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: .7rem;
}
.glass-panel__head .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.glass-panel__head .dot:first-child { background: rgba(255,122,217,.75); }
.glass-panel__head em {
	margin-left: auto; font-style: normal; font-size: .7rem;
	letter-spacing: .1em; color: var(--ink-faint);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.glass-panel__foot {
	display: flex; align-items: center; gap: .5rem;
	padding-top: .75rem; margin-top: .55rem; border-top: 1px solid rgba(255,255,255,.07);
	font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.pulse-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
	box-shadow: 0 0 0 0 rgba(124,247,255,.7); animation: pulse 2.1s infinite;
}
@keyframes pulse {
	70%  { box-shadow: 0 0 0 9px rgba(124,247,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(124,247,255,0); }
}

/* pipeline diagram */
.pipeline { width: 100%; height: auto; display: block; color: var(--ink-faint); }
.pipeline .node { fill: #0b1024; stroke: url(#pl); stroke-width: 1.8; }
.pipeline .node--out { fill: rgba(124,247,255,.14); }
.pipeline .chip { fill: rgba(139,123,255,.14); stroke: url(#pl); stroke-width: 1.6; }
.pipeline .ring {
	fill: none; stroke: var(--cyan); stroke-width: 1.4;
	transform-origin: center; animation: ripple 3s ease-out infinite;
}
@keyframes ripple {
	0%   { transform: scale(1); opacity: .85; }
	100% { transform: scale(2.6); opacity: 0; }
}
.pipeline .wire {
	stroke-dasharray: 5 7;
	animation: flow 2.4s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -24; } }
.pl-labels { font-family: ui-monospace, "SF Mono", Menlo, monospace; opacity: .78; }

.scroll-hint {
	display: flex; align-items: center; gap: .6rem; justify-content: center;
	margin-top: 2rem; font-size: .7rem; letter-spacing: .2em;
	text-transform: uppercase; color: var(--ink-faint);
}
.scroll-hint i {
	width: 1px; height: 34px;
	background: linear-gradient(var(--cyan), transparent);
	animation: drop 2s var(--ease) infinite;
}
@keyframes drop { 0% { opacity: 0; transform: translateY(-10px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { padding: clamp(2rem, 4vw, 3rem) 0; }
.stats__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--glass-brd);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	overflow: hidden;
}
.stat {
	background: rgba(8, 10, 24, .55);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	padding: clamp(1.5rem, 3vw, 2.3rem);
}
.stat__value {
	font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 750; letter-spacing: -.06em; line-height: 1;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { margin-top: .7rem; font-size: .92rem; color: var(--ink-dim); }

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.card {
	position: relative; overflow: hidden;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover {
	transform: translateY(-6px);
	border-color: var(--glass-hi);
	box-shadow: 0 26px 60px -28px rgba(139,123,255,.7);
}
/* Cursor-tracking spotlight, position fed by JS via --mx / --my. */
.card__glow {
	position: absolute; inset: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(139,123,255,.20), transparent 62%);
	transition: opacity .45s var(--ease);
}
.card:hover .card__glow { opacity: 1; }

.card__icon { width: 48px; height: 48px; margin-bottom: 1.6rem; color: var(--cyan); }
.card__num {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .74rem; letter-spacing: .14em; color: var(--ink-faint);
}
.card__title { font-size: var(--fs-h3); margin: .55rem 0 .8rem; }
.card__text { color: var(--ink-dim); font-size: .96rem; }

.icon .dash-ring { stroke-dasharray: 4 6; animation: spin-dash 14s linear infinite; transform-origin: center; }
@keyframes spin-dash { to { stroke-dashoffset: -100; } }
.icon .pulse-core { animation: core 3s ease-in-out infinite; transform-origin: center; }
@keyframes core { 50% { opacity: .45; transform: scale(1.18); } }
.icon .blink { animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.tags li {
	font-size: .73rem; letter-spacing: .02em; color: var(--ink-dim);
	padding: .3rem .62rem; border-radius: 99px;
	border: 1px solid var(--glass-brd); background: rgba(255,255,255,.03);
}

/* ==========================================================================
   METHOD STEPS
   ========================================================================== */
.steps { position: relative; display: grid; gap: 1.6rem; padding-left: 3.7rem; }
.steps__rail {
	position: absolute; left: 1.25rem; top: .6rem; bottom: .6rem; width: 2px;
	background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.steps__rail i {
	display: block; width: 100%; height: 100%;
	background: var(--grad); transform-origin: top;
	transform: scaleY(var(--rail, 0)); transition: transform .2s linear;
}
.step { position: relative; display: grid; gap: .3rem; }
.step__letter {
	position: absolute; left: -3.7rem; top: -.1rem;
	width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid var(--glass-brd);
	background: rgba(10,13,28,.9);
	font-weight: 750; font-size: .92rem;
	background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__body h3 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.step__body p { color: var(--ink-dim); font-size: .97rem; max-width: 620px; }

/* ==========================================================================
   SIGNALS
   ========================================================================== */
.signals { border-top: 1px solid var(--glass-brd); }
.signal {
	position: relative;
	display: grid; grid-template-columns: 74px 1fr; gap: 1.4rem;
	padding: 1.85rem 0; border-bottom: 1px solid var(--glass-brd);
	transition: padding-left .4s var(--ease);
}
.signal:hover { padding-left: .85rem; }
.signal__num {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .82rem; letter-spacing: .1em; padding-top: .3rem;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signal__body h3 { font-size: clamp(1.08rem, 1.7vw, 1.4rem); margin-bottom: .45rem; }
.signal__body p { color: var(--ink-dim); font-size: .96rem; max-width: 720px; }
.signal__line {
	position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
	background: var(--grad); transform: scaleX(0); transform-origin: left;
	transition: transform .55s var(--ease);
}
.signal:hover .signal__line { transform: scaleX(1); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about__visual { display: grid; place-items: center; }

.ring-stack { position: relative; width: min(300px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.ring-stack__ring {
	position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.12);
	animation: orbit 22s linear infinite;
}
.ring-stack__ring:nth-child(1) { inset: 0;    border-top-color: var(--cyan);   }
.ring-stack__ring:nth-child(2) { inset: 13%;  border-right-color: var(--violet); animation-duration: 17s; animation-direction: reverse; }
.ring-stack__ring:nth-child(3) { inset: 26%;  border-bottom-color: var(--pink); animation-duration: 27s; }
.ring-stack__core {
	width: 32%; aspect-ratio: 1; border-radius: 50%;
	background: var(--grad); filter: blur(14px); opacity: .85;
	animation: core 4.5s ease-in-out infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }

.about__sig {
	margin-top: 1.6rem; font-size: .86rem; letter-spacing: .06em;
	color: var(--ink-faint); text-transform: uppercase;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
	position: relative; overflow: hidden;
	padding: clamp(4.5rem, 10vw, 9rem) 0;
	border-top: 1px solid var(--glass-brd);
	background: radial-gradient(90% 130% at 50% 0%, rgba(139,123,255,.15), transparent 62%);
}
.contact__inner { max-width: 900px; }
.contact__title { font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
.contact__text { margin-top: 1.4rem; font-size: var(--fs-lead); color: var(--ink-dim); max-width: 660px; }
.contact__actions { margin-top: 2.4rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.contact__mail {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .95rem; color: var(--ink-dim);
	border-bottom: 1px solid var(--glass-brd); padding-bottom: 2px;
	transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__mail:hover { color: var(--cyan); border-color: var(--cyan); }
.contact__social { margin-top: 1.5rem; color: var(--ink-faint); font-size: .92rem; }
.contact__social a { color: var(--cyan); border-bottom: 1px solid rgba(124,247,255,.35); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--glass-brd); padding: 2.6rem 0; }
.site-footer__inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-end; }
.site-footer__brand p { margin-top: .5rem; font-size: .88rem; color: var(--ink-faint); max-width: 420px; }
.site-footer__meta { display: grid; gap: .35rem; text-align: right; font-size: .85rem; color: var(--ink-faint); }
.site-footer__meta a { color: var(--ink-dim); }
.site-footer__meta a:hover { color: var(--cyan); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.inner-page { padding: clamp(4rem, 9vw, 7rem) 0; min-height: 60vh; }
.inner-page__article { max-width: 760px; }
.inner-page__article .prose { margin-top: 1.6rem; }
.inner-page__article .prose :is(h2, h3) { color: var(--ink); margin: 2rem 0 .8rem; }
.inner-page__article .prose a { color: var(--cyan); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
	.hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.hero__visual { order: -1; margin-bottom: 1rem; }
	.orb-stack { max-width: 420px; margin-inline: auto; }
	.cards { grid-template-columns: 1fr 1fr; }
	.about { grid-template-columns: 1fr; }
	.about__visual { order: -1; }
}

@media (max-width: 760px) {
	:root { --gutter: 18px; }

	.site-nav {
		position: fixed; inset: 62px 0 auto; z-index: 45;
		flex-direction: column; gap: 0;
		padding: 1rem var(--gutter) 1.4rem;
		background: rgba(5, 6, 15, .96);
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--glass-brd);
		transform: translateY(-120%); opacity: 0; pointer-events: none;
		transition: transform .45s var(--ease), opacity .35s var(--ease);
	}
	.site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
	.site-nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1.05rem; color: var(--ink); }

	.nav-toggle { display: grid; }
	.site-header__actions .btn--sm { display: none; }

	.cards { grid-template-columns: 1fr; }
	.stats__grid { grid-template-columns: 1fr; }
	.steps { padding-left: 3.1rem; }
	.steps__rail { left: 1rem; }
	.step__letter { left: -3.1rem; width: 2.1rem; height: 2.1rem; font-size: .82rem; }
	.signal { grid-template-columns: 52px 1fr; gap: .9rem; }
	.site-footer__inner { flex-direction: column; align-items: flex-start; }
	.site-footer__meta { text-align: left; }
	.aurora__blob { filter: blur(64px); }
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.starfield { display: none; }
}

/* ==========================================================================
   EXPERIENCE PAGE
   ========================================================================== */
.page-experience .stats { padding-top: 0; }

.xp-hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.xp-hero__title {
	font-size: clamp(2.3rem, 5.4vw, 4.6rem);
	font-weight: 700; letter-spacing: -.05em; max-width: 16ch;
}
.xp-hero__lead {
	margin-top: 1.6rem; max-width: 720px;
	font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--ink-dim);
}

/* ------------------------------- timeline ------------------------------- */
.timeline { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); padding-left: 4.2rem; }
.timeline__rail {
	position: absolute; left: 1.35rem; top: .8rem; bottom: .8rem; width: 2px;
	background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.timeline__rail i {
	display: block; width: 100%; height: 100%;
	background: var(--grad); transform-origin: top;
	transform: scaleY(var(--rail, 0)); transition: transform .2s linear;
}
.phase { position: relative; }
.phase__marker {
	position: absolute; left: -3.35rem; top: .35rem;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--bg); border: 2px solid transparent;
	background-image: linear-gradient(var(--bg), var(--bg)), var(--grad);
	background-origin: border-box; background-clip: padding-box, border-box;
}
.phase__meta { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; margin-bottom: .55rem; }
.phase__label {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .68rem; letter-spacing: .16em;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phase__period { font-size: .82rem; color: var(--ink-faint); letter-spacing: .04em; }
.phase__body h3 { font-size: clamp(1.2rem, 2vw, 1.62rem); margin-bottom: .6rem; }
.phase__body p { color: var(--ink-dim); font-size: .98rem; max-width: 760px; }
.phase__body .tags { margin-top: 1.1rem; }

/* ------------------------------- sectors -------------------------------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--glass-brd);
	border: 1px solid var(--glass-brd); border-radius: var(--radius); overflow: hidden; }
.sector {
	background: rgba(8, 10, 24, .55); padding: 1.6rem 1.4rem;
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	transition: background .4s var(--ease);
}
.sector:hover { background: rgba(20, 24, 52, .72); }
.sector h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.sector p { font-size: .87rem; color: var(--ink-faint); }

/* ------------------------------- offers --------------------------------- */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.offer {
	position: relative; overflow: hidden;
	padding: 1.9rem 1.7rem;
	border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
	background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.offer:hover {
	transform: translateY(-5px); border-color: var(--glass-hi);
	box-shadow: 0 26px 60px -30px rgba(139,123,255,.65);
}
.offer__num {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .74rem; letter-spacing: .14em;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer__title { font-size: var(--fs-h3); margin: .5rem 0 .7rem; }
.offer__text { color: var(--ink-dim); font-size: .95rem; }
.offer__out {
	margin-top: 1.1rem; padding-top: .95rem;
	border-top: 1px solid var(--glass-brd);
	font-size: .87rem; color: var(--cyan);
}

/* ------------------------------ tech stack ------------------------------ */
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.25rem; }
.stack-group h3 {
	font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-faint); margin-bottom: .85rem;
	padding-bottom: .6rem; border-bottom: 1px solid var(--glass-brd);
}
.stack-group .tags { margin-top: 0; }

/* ----------------------------- credentials ------------------------------ */
.creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 2rem; }
.cred { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; font-size: .95rem; }
.cred__tick { width: 17px; height: 17px; flex: 0 0 17px; color: var(--cyan); }
.cred__name { color: var(--ink); }
.cred__note {
	font-size: .74rem; color: var(--ink-faint);
	border: 1px solid var(--glass-brd); border-radius: 99px; padding: .12rem .5rem;
}
.cred-meta {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
	margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--glass-brd);
}
.cred-meta h4 {
	font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--ink-faint); margin: 0 0 .5rem; font-weight: 650;
}
.cred-meta p { color: var(--ink-dim); font-size: .95rem; }

@media (max-width: 1000px) {
	.sector-grid, .stack-grid { grid-template-columns: repeat(2, 1fr); }
	.offers { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.sector-grid, .stack-grid, .creds, .cred-meta { grid-template-columns: 1fr; }
	.timeline { padding-left: 2.6rem; }
	.timeline__rail { left: .55rem; }
	.phase__marker { left: -2.42rem; width: 13px; height: 13px; }
	.xp-hero__title { max-width: none; }
}


/* ==========================================================================
   BLOCK EDITOR COMPATIBILITY
   --------------------------------------------------------------------------
   Page copy is authored as core Gutenberg blocks, which wrap content in a
   little extra markup. Only two things actually need reconciling: the group
   inner container, and core's button markup.

   Deliberately absent: any margin resets. The theme already zeroes margins
   globally (see h1-h3 / p / ul rules in the RESET section above), so adding
   more here does nothing but override the design's own spacing — which is
   exactly what broke section and card rhythm in v2.0.0/2.0.1.
   ========================================================================== */

/* With no theme.json present, WordPress wraps every Group block's children in
   .wp-block-group__inner-container at render time. Left alone it becomes the
   single child of grid containers like .signal and .cards, collapsing their
   columns. display:contents makes it layout-transparent so the real children
   reconnect to their intended grid/flex parent. It carries no styling of its
   own, so nothing is lost. */
.wp-block-group__inner-container { display: contents; }

/* This design derives its measure from .shell, not from core's constrained
   layout. Neutralise core's width only — never its spacing — and keep the
   selector at zero specificity so every design rule still wins. */
main :where(.is-layout-constrained) > :where(*:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none;
	margin-inline: 0;
}
main :where(.wp-block-group.shell) { margin-inline: auto; }

/* Core buttons, restyled as the design's .btn. Values copied verbatim from
   the .btn / .btn--primary / .btn--ghost / .btn--lg rules above — inventing
   slightly larger padding here was enough to wrap the hero pair onto a second
   row and make the hero 76px taller than the original. */
:where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Each core button is a block-level wrapper; without this it claims the full
   row and forces the buttons to stack. */
.wp-block-buttons > .wp-block-button { display: inline-flex; max-width: 100%; }

.wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .82rem 1.35rem; border-radius: 99px;
	font-size: .93rem; letter-spacing: -.01em;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	background: var(--grad); color: #07070f; font-weight: 720;
	box-shadow: 0 8px 30px -10px rgba(139, 123, 255, .8);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease),
		background .3s var(--ease), border-color .3s var(--ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link .btn__arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.wp-block-button__link:hover .btn__arrow { transform: translateX(3px); }

/* Ghost / outline variant == .btn--ghost */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-ghost > .wp-block-button__link {
	border-color: var(--glass-brd); background: var(--glass); color: var(--ink);
	font-weight: 650; box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	border-color: var(--glass-hi); background: rgba(255, 255, 255, .075);
}

/* The closing call to action uses the large variant == .btn--lg */
.contact__actions .wp-block-button__link { padding: 1.02rem 1.75rem; font-size: 1.02rem; }

/* .card__num / .offer__num were inline <span>s in the hand-written markup, so
   they sat in the card's own line box (body line-height 1.62 x 16px = 25.92px)
   rather than one sized to their much smaller font. As block <p>s they would
   otherwise change card height. A rem line-height is absolute, so this
   reproduces that box exactly. */
.card__num, .offer__num { line-height: 1.62rem; }

/* --------------------------------------------------------------------------
   Deliberate improvement on the original
   --------------------------------------------------------------------------
   A .section__title followed directly by body copy had zero separation — the
   About section ran its heading straight into the paragraph. This was true of
   the original design as well, so it is a change rather than a restoration.
   .section__lead already establishes a 1.3rem step after a title; this simply
   applies the same rhythm when the following paragraph is prose instead.
   ----------------------------------------------------------------------- */
.section__title + p { margin-top: 1.3rem; }

/* Editor parity: give the admin canvas the site background so light-on-dark
   text stays readable while editing. */
.editor-styles-wrapper { background: var(--bg); color: var(--ink); }

/* --------------------------------------------------------------------------
   FAQ (service pages)
   --------------------------------------------------------------------------
   Plain semantic markup rather than a disclosure widget: search engines read
   every answer without executing anything, which is the point of carrying
   FAQPage data at all.
   ----------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--glass-brd); }

.faq__item {
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--glass-brd);
}

.faq__q {
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	margin-bottom: .55rem;
	color: var(--ink);
}

.faq__a {
	color: var(--ink-dim);
	font-size: .97rem;
	max-width: 68ch;
}

@media (max-width: 720px) {
	.faq__item { padding: 1.3rem 0; }
}

/* Internal link out of a service card to its dedicated page. */
.card__more { margin-top: 1.1rem; }
.card__link {
	font-size: .86rem; font-weight: 650; letter-spacing: -.01em;
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--glass-hi);
	padding-bottom: .12rem;
	transition: border-color .3s var(--ease), color .3s var(--ease);
}
.card__link:hover { color: #fff; border-color: var(--cyan); }

/* Related services — cross-links between service pages. */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.related__item {
	padding: 1.6rem 1.4rem;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .022);
	transition: border-color .35s var(--ease), background .35s var(--ease);
}
.related__item:hover { border-color: var(--glass-hi); background: rgba(255, 255, 255, .045); }
.related__title { font-size: 1.04rem; margin-bottom: .5rem; }
.related__text { color: var(--ink-dim); font-size: .92rem; }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Worked examples
   ----------------------------------------------------------------------- */
.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.example {
	position: relative;
	padding: 1.9rem 1.7rem;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .022);
	transition: border-color .35s var(--ease), background .35s var(--ease);
}
.example:hover { border-color: var(--glass-hi); background: rgba(255, 255, 255, .04); }

.example__meta {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .7rem; letter-spacing: .14em;
	background: var(--grad); -webkit-background-clip: text; background-clip: text;
	color: transparent; margin-bottom: .5rem;
}
.example__title { font-size: 1.12rem; margin-bottom: 1.1rem; }

.example__label {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
	color: var(--ink-faint); margin-top: 1rem;
}
.example__label:first-of-type { margin-top: 0; }
.example__text { color: var(--ink-dim); font-size: .93rem; margin-top: .25rem; }

/* The honesty note above the examples — deliberately quiet but legible. */
.examples-note {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: 1.1rem 1.3rem;
	border-left: 2px solid var(--glass-hi);
	background: rgba(255, 255, 255, .022);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--ink-dim); font-size: .92rem; max-width: 74ch;
}

@media (max-width: 900px) { .examples { grid-template-columns: 1fr; } }

/* Stacked variant of the tag chips — used for prose-length list items. */
.tags--stack { flex-direction: column; align-items: flex-start; gap: .55rem; }
.tags--stack li {
	font-size: .95rem; letter-spacing: 0; line-height: 1.5;
	padding: .7rem 1rem; border-radius: var(--radius);
	color: var(--ink-dim); max-width: 74ch;
}

/* --------------------------------------------------------------------------
   Articles (insights)
   ----------------------------------------------------------------------- */
.article__body { max-width: 78ch; }
.article__h { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 2.6rem 0 1rem; }
.article__body > .article__h:first-child { margin-top: 0; }
.article__body .prose { margin-bottom: 1.15rem; }

.takeaways {
	margin: 2.6rem 0;
	padding: 1.6rem 1.7rem;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .03);
}
.takeaways__title {
	font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink-faint); margin-bottom: 1rem;
}

/* Article listing on the insights hub. */
.posts { display: grid; gap: 1.1rem; }
.post-card {
	display: block; padding: 1.7rem 1.6rem;
	border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .022); text-decoration: none;
	transition: border-color .35s var(--ease), background .35s var(--ease);
}
.post-card:hover { border-color: var(--glass-hi); background: rgba(255, 255, 255, .045); }
.post-card__meta {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .68rem; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: .5rem;
}
.post-card__title { font-size: 1.14rem; margin-bottom: .45rem; color: var(--ink); }
.post-card__text { color: var(--ink-dim); font-size: .93rem; }

/* --------------------------------------------------------------------------
   Breadcrumbs — the visible counterpart of the BreadcrumbList schema.
   ----------------------------------------------------------------------- */
.crumbs { padding-top: clamp(5.5rem, 9vw, 7rem); }
.crumbs__inner {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .72rem; letter-spacing: .06em;
}
.crumbs a { color: var(--ink-faint); text-decoration: none; transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs__sep { color: var(--ink-faint); opacity: .55; }
.crumbs__current { color: var(--ink-dim); }

/* The hero already carries the top spacing on pages without a trail. */
.crumbs + main .xp-hero,
.crumbs + main .section:first-child { padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* --------------------------------------------------------------------------
   Service diagrams
   --------------------------------------------------------------------------
   Deliberately restrained: one per service page, full-width inside the shell,
   never decoration for its own sake.
   ----------------------------------------------------------------------- */
.service-diagram {
	width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.service-diagram img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-lg);
}
@media (max-width: 720px) {
	.service-diagram { margin-top: 2rem; }
}

/* Article header banner — wider and shorter than a service diagram. */
.article-banner { width: var(--shell); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.article-banner img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--glass-brd);
}

/* --------------------------------------------------------------------------
   Footer navigation
   --------------------------------------------------------------------------
   The link walker emits bare anchors with no whitespace between them, so
   without an explicit flex layout they render as one unbroken string —
   "PaslaugosPavyzdžiaiĮžvalgos…". That string cannot wrap, which also forced
   the page wider than a 360px viewport and caused horizontal overflow.
   ----------------------------------------------------------------------- */
.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem 1.4rem;
	margin-top: 1.4rem;
}

.site-footer__nav a {
	font-size: .88rem;
	color: var(--ink-dim);
	text-decoration: none;
	letter-spacing: -.01em;
	transition: color .3s var(--ease);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { color: var(--ink); }
.site-footer__nav a.is-current { color: var(--ink); }

/* Long unbroken strings must never widen the page. */
.site-footer__brand p,
.site-footer__widget p { overflow-wrap: anywhere; }

@media (max-width: 720px) {
	.site-footer__nav { gap: .5rem 1.1rem; margin-top: 1.2rem; }
	.site-footer__nav a { font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   Card grid: never leave an orphan
   --------------------------------------------------------------------------
   The inherited breakpoints put three cards into a two-column grid (leaving
   card 03 alone beside dead space) and four cards into a three-column grid
   (orphaning the fourth on every normal desktop).

   The column count has to follow the number of cards, so :has() selects on the
   card count. It matches by descendant rather than child, because the group's
   inner container sits between .cards and .card — a `>` combinator would never
   match. Grids of three keep 3-up then drop straight to 1; grids of four go
   4 -> 2 -> 1. Both counts stay balanced at every width.
   ----------------------------------------------------------------------- */
@media (min-width: 880px) {
	.cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 879px) {
	.cards { grid-template-columns: 1fr; }
}

@media (min-width: 1150px) {
	.cards:has(.card:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) and (max-width: 1149px) {
	.cards:has(.card:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Hero panel when stacked
   --------------------------------------------------------------------------
   Below 1000px the hero switches to a single column and the diagram moves
   above the copy — but it stayed capped at 420px, leaving it marooned in an
   ~850px shell. Let it use the width it now has.
   ----------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.orb-stack { max-width: min(620px, 100%); }
}
@media (max-width: 760px) {
	.orb-stack { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero balance on desktop
   --------------------------------------------------------------------------
   The panel was capped at 470px inside a 545px column — 39% of a 1220px shell,
   against 49% for the copy — so the right-hand side read as empty.
   Measured headroom: the widest headline line needs 505px, and the copy column
   had 603px. Shifting ~55px to the visual and letting the panel fill its column
   balances the two halves without the headline wrapping.
   ----------------------------------------------------------------------- */
@media (min-width: 1001px) {
	/* Column ratio left as designed: narrowing the copy only made the headline
	   wrap harder. The panel gains its width by filling the column it already
	   has, which costs the copy nothing. */
	.orb-stack { max-width: 100%; }

	/* --fs-hero is sized as though the hero were full-width, but it is a two
	   column layout — 103px type in a 545px column left the Lithuanian
	   headline breaking across five lines. Sized to its actual container. */
	.hero__title { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }
}

/* --------------------------------------------------------------------------
   Cookie consent
   --------------------------------------------------------------------------
   Rendered only when something on the site actually needs consent (see
   inc/consent.php). Anchored bottom-left rather than as a full-width bar so it
   never covers the footer navigation, and capped in width so it stays a notice
   rather than an interruption.
   ----------------------------------------------------------------------- */
.consent {
	position: fixed;
	z-index: 90;
	left: var(--gutter);
	right: var(--gutter);
	bottom: var(--gutter);
	max-width: 30rem;
}

.consent[hidden] { display: none; }

.consent__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	background: rgba(10, 13, 28, .92);
	/* The banner sits over the aurora backdrop; without a blur the text loses
	   contrast wherever a decorative blob passes behind it. */
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.consent__title {
	font-weight: 600;
	letter-spacing: -.01em;
}

.consent__text p {
	font-size: .92rem;
	color: var(--ink-dim);
}

.consent__text p + p { margin-top: .4rem; }

/* The policy link sits inside dimmed body copy, so without its own treatment
   it is invisible as a link — and it is the one route to the detail the
   notice is summarising. */
.consent__text a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

/* Equal weight for both choices — accept must not be easier to click than
   reject, which is a hard requirement, not a style preference. flex-basis 0
   (not auto) so the two buttons come out identical in width regardless of how
   long the words are in each language. */
.consent__actions .btn { flex: 1 1 0; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
	.consent { animation: consent-in .45s var(--ease) both; }
	@keyframes consent-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: none; }
	}
}

/* --------------------------------------------------------------------------
   Grids: never strand the last item
   --------------------------------------------------------------------------
   An audit of every page found 32 places where the item count did not divide
   by the column count, leaving a lone card beside dead space: three offers in
   two columns on all eight service pages, two groups of three worked examples,
   nine credentials in two columns, and a four-item related block in a
   three-column grid.

   Two strategies, chosen per grid by what the content can take:
     - wide, text-heavy items (examples, offers) keep their column count and
       let a stranded last item span the row;
     - short items (credentials, related links) get a column count that
       divides their actual number.

   All selectors match by descendant rather than child. WordPress injects a
   wp-block-group__inner-container between a grid and its items, so a `>`
   combinator would never match — the same trap that made the first version of
   the audit report no problems at all.
   ----------------------------------------------------------------------- */

@media (min-width: 901px) {
	.examples .example:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1001px) {
	.offers .offer:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Nine credentials divide exactly into three columns. The span rule covers
   whatever count the site ends up with later. */
@media (min-width: 761px) and (max-width: 1000px) {
	.creds .cred:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1001px) {
	.creds { grid-template-columns: repeat(3, 1fr); }
	.creds .cred:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Two or four related links in three tracks leaves a hole on the right. */
@media (min-width: 901px) {
	.related:has(.related__item:nth-child(2)):not(:has(.related__item:nth-child(3))),
	.related:has(.related__item:nth-child(4)):not(:has(.related__item:nth-child(5))) {
		grid-template-columns: repeat(2, 1fr);
	}
}