/* =========================================================
   CZ Slovakia — mobile-first base styles
   Tokens & breakpoints per CLAUDE.md §7, §8. Animation rules §9.
   ========================================================= */

:root {
	/* Colors (Figma: LAND / PULSE / PURE) */
	--land:  #004346;
	--pulse: #a0dfb2;
	--pure:  #f4f4f2;

	/* Type families */
	--font-display: 'AdapterPEDisplay', sans-serif;
	--font-text:    'AdapterPEText', sans-serif;

	/* Container gutters (CLAUDE.md §8 floating container) */
	--gutter-mobile:  16px;
	--gutter-tablet:  24px;
	--gutter-desktop: 48px;
	--container-max:  1920px;
	--gutter: var(--gutter-mobile);

	/* Header height (Figma 1:159 desktop 72, 74:6718 mobile 64) */
	--header-h-mobile:  64px;
	--header-h-desktop: 72px;
	--header-h: var(--header-h-mobile);

	/* Easings & durations */
	--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
	--ease-in-out:    cubic-bezier(.65, 0, .35, 1);
	--dur-fast:    180ms;
	--dur-base:    320ms;
	--dur-slow:    600ms;

	/* Stage heights for hero scroll choreography.
	   Goal: intro slides out → PURE VIDEO buffer → o-nas slides over sticky video.
	   - --stage-intro:  green panel min height. Scrolls out as user scrolls (absolute inside hero-stage).
	   - --stage-buffer: extra scroll AFTER intro is fully out, before o-nas appears. Keeps "green gone, white not yet" separation.
	   - --stage-overlap: how much o-nas overlaps the sticky video as it rises.
	   - --stage-total:   intro + buffer + viewport (100lvh) + overlap. Sized so video stays sticky until o-nas fully covers it.
	*/
	/* Tuned 2026-06-15 round 3: buffer=0 → green leaves top of viewport AT THE SAME MOMENT
	   white starts peeking at the bottom. No "pure-video pause", no concurrent visible overlap. */
	--stage-intro:   60lvh;
	--stage-buffer:  0lvh;
	--stage-overlap: 100lvh;
	--stage-video:   100lvh;
	--stage-total:   calc(var(--stage-intro) + var(--stage-buffer) + 100lvh + var(--stage-overlap));
}

@media (min-width: 768px) {
	:root {
		--gutter: var(--gutter-tablet);
	}
}
@media (min-width: 1024px) {
	:root {
		--gutter: var(--gutter-desktop);
		--header-h: var(--header-h-desktop);
	}
}

/* ----- Reset-ish ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--land);
	background: var(--pure);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Sticky-footer body rule per CLAUDE.md §2.5 */
	min-height: 100svh;
}
body.no-scroll { overflow: hidden; }
img, video, svg { max-width: 100%; height: auto; display: block; }
button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* ----- Container (floating, no fixed inner width 1024–1920) ----- */
.container {
	margin-inline: auto;
	max-width: var(--container-max);
	padding-inline: var(--gutter);
	width: 100%;
}

/* ----- Typography tokens ----- */
.t-eyebrow,
.hero-stage__eyebrow,
.o-nas__eyebrow,
.placeholder-section__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	margin: 0;
}
.t-h1, .hero-stage__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px; /* mobile H1 — Figma 15:687 */
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.t-h1, .hero-stage__headline { font-size: 42px; }
}
.t-h2, .placeholder-section__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.t-h2, .placeholder-section__headline { font-size: 28px; }
}
/* Lede (Figma 1:129 desktop 28px / 15:723 mobile 20px) */
.o-nas__lede {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.o-nas__lede { font-size: 28px; }
}
.o-nas__intro,
.o-nas__col p {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
}
.o-nas__intro strong,
.o-nas__col p strong { font-weight: 500; }

/* =========================================================
   GLOBAL CTA SYSTEM (Figma 74:7098 BUTTONS_CTA inventory)
   Primitives — re-used across header, hero, o-nas, projects,
   what-we-do, footer. Color always inherits from context.
   =========================================================
   Variants:
     .cta             — base (Display Medium 16/1.25)
     .cta--arrow      — text + diagonal ↗ icon, full underline on hover (Main_CTA)
     .cta--nav        — header / footer nav link, partial underline grows on hover (Projekty)
     .cta--nav.is-active — full underline (current route)
     .cta--toggle     — Zobraziť viac/menej, text + chevron ▾▴, full underline on hover
     .cta--load-more  — large 20px Zobraziť ďalšie, INVERTED: full underline default, retracts on hover
     .cta--lang       — language switcher trigger (closed)
     .cta--play-pause — 38×38 video control button with border
   Helpers:
     .cta-arrows      — < > pair (carousel prev/next)
*/

.cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: inherit;
	cursor: pointer;
	position: relative;
	transition: opacity var(--dur-fast) var(--ease-out-quart);
	/* LOAD-BEARING: prevents stretching in flex-column parents. Without this, CTAs inside
	   o-nas__left, what-we-do__image-col, etc. expand to full column width and the ::after
	   hover underline runs the full column. Per Jan: text links should be text-width only. */
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
}
.cta:disabled,
.cta[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.cta__icon { width: 17.608px; height: 17.608px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.cta__icon svg { width: 100%; height: 100%; display: block; }
.cta__chevron { width: 10px; height: 6px; flex: 0 0 auto; display: inline-block; }
.cta__chevron svg { width: 100%; height: 100%; display: block; }

/* Hover patterns (per Figma comment #23 → eclair-living.sk .cta-inline):
   Globalizovaný underline iba pod textom (nie cez wrapper) cez linear-gradient
   background-image. Nepodčiarknutý → hover rozšíri zľava doprava. Už podčiarknutý
   (.is-active) → hover re-anime (line mizne sprava, kreslí zľava → "redraw").

   Apply scope:
   - .cta--nav: text-only nav linky
   - .cta--arrow / --toggle / --lang inner text: aplikované cez `> span:first-child`
   - Project card name linky (.selected-projects__name a, .projekty-grid__name a, atď.)
   Identifikuje sa univerzálnym selektorom `.cta-underline` (utility class) +
   konkrétne CTA classes pre back-compat.
*/

@keyframes cta-underline-grow {
	0%   { background-size: 0% 1.5px; }
	100% { background-size: 100% 1.5px; }
}
@keyframes cta-underline-redraw {
	0%   { background-size: 100% 1.5px; background-position: 100% calc(100% - 0.05em); }
	49.9% { background-size: 0%   1.5px; background-position: 100% calc(100% - 0.05em); }
	50%  { background-size: 0%   1.5px; background-position: 0%   calc(100% - 0.05em); }
	100% { background-size: 100% 1.5px; background-position: 0%   calc(100% - 0.05em); }
}

/* Base inline underline pattern. Used directly on `.cta--nav` and on the text span
   inside icon-paired CTAs. Background-image clips to glyph bbox automatically. */
/* Underline pattern applies ONLY to text-only CTAs (no icon).
   Text+icon CTAs (.cta--arrow, .cta--toggle, .cta--lang) use opacity hover instead
   — see "Variant: --arrow / --toggle / --lang — opacity hover" block below. */
.cta--nav,
.cta--load-more,
.selected-projects__name,
.projekty-grid__name,
.kontakt-udaje__link {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 calc(100% - 0.05em);
	background-repeat: no-repeat;
	transition: background-size 0.45s var(--ease-out-quart);
}

/* Hover / focus → full underline (grows from left). */
.cta--nav:hover,
.cta--nav:focus-visible,
.selected-projects__card-link:hover .selected-projects__name,
.projekty-grid__card-link:hover .projekty-grid__name,
.kontakt-udaje__link:hover,
.kontakt-udaje__link:focus-visible {
	background-size: 100% 1.5px;
}

/* Variant: --arrow / --toggle / --lang — opacity hover (text+icon CTAs).
   Per user: tieto majú ikonu pri texte, takže opacity je vhodnejšia než underline. */
.cta--arrow:hover,
.cta--arrow:focus-visible,
.cta--toggle:hover,
.cta--toggle:focus-visible,
.cta--lang:hover,
.cta--lang:focus-visible {
	opacity: 0.55;
}

/* Active / current state → full underline persistently. */
.cta--nav.is-active,
.cta--nav[aria-current="true"],
.cta--nav[aria-current="page"] {
	background-size: 100% 1.5px;
}

/* Hover on an ALREADY-active link → redraw animation (eclair pattern). */
.cta--nav.is-active:hover,
.cta--nav[aria-current="true"]:hover,
.cta--nav[aria-current="page"]:hover {
	animation: cta-underline-redraw 0.75s var(--ease-out-quart) forwards;
}

/* Figma comments #67/#68/#69 — cookies button + bottom legal row links (Spracúvanie,
   Zásady) — žiadny underline (default ani hover). Iba zmena kurzoru. */
.site-footer__cookies,
.site-footer__legal-row--bottom .cta--nav {
	background-image: none;
}

/* Variant: --load-more — DEFAULT full underline (zostáva post fix-70 #23, per Figma 74:4993).
   Underline handled by global background-image gradient pattern + persistent override here. */
.cta--load-more {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	gap: 0;
	background-size: 100% 1.5px; /* always-on per Figma load-more default state */
}
.cta--load-more:hover {
	animation: cta-underline-redraw 0.75s var(--ease-out-quart) forwards;
}

/* Variant: --lang (.lang-switcher) — current lang anchored, EN/HU slide out from behind to the right.
   Per Jan: same behaviour as footer (footer is left-anchored within its column, so SK naturally stays
   put as the list expands). Header needs left-anchoring to get the same effect — see grid layout
   in .site-header__nav-wrap. */
.cta--lang { gap: 2px; cursor: default; }
.lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.lang-switcher__list {
	display: inline-flex;
	gap: 7px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	overflow: hidden;
}
@media (max-width: 1023px) {
	/* Per Figma 15:861 mobile lang switcher (#34): 20px Display Medium, expanded item width ↑ */
	.lang-switcher__list { font-size: 20px; }
	.lang-switcher[data-open="true"] .lang-switcher__item:not(.is-current) { max-width: 40px; }
}
.lang-switcher__item { display: inline-block; }
.lang-switcher__item a {
	color: inherit;
	white-space: nowrap;
	opacity: 0.55;
	transition: opacity var(--dur-fast) var(--ease-out-quart);
}
.lang-switcher__item a:hover { opacity: 1; }
.lang-switcher__item.is-current a { opacity: 1; }
/* Closed: only current visible (always first in DOM). EN/HU collapsed (max-width 0 + margin shrink). */
.lang-switcher__item:not(.is-current) {
	max-width: 0;
	opacity: 0;
	pointer-events: none;
	transition: max-width var(--dur-base) var(--ease-out-quart),
				opacity   var(--dur-base) var(--ease-out-quart),
				margin    var(--dur-base) var(--ease-out-quart);
	margin-left: -7px; /* collapses the parent gap too */
}
.lang-switcher[data-open="true"] .lang-switcher__item:not(.is-current) {
	max-width: 30px;
	opacity: 1;
	pointer-events: auto;
	margin-left: 0;
}
.lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	transition: transform var(--dur-base) var(--ease-out-quart);
}
.lang-switcher[data-open="true"] .lang-switcher__toggle { transform: rotate(180deg); }

/* Variant: --play-pause  square button with 1.5px border (Figma 6:37, 6:44) */
.cta--play-pause {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	/* Per user: žiadny hover efekt — len kurzor sa zmení. Ikona sa prepne
	   tvarom po kliknutí (aria-pressed swap nižšie). Border + bg sú vykreslené
	   priamo v SVG (Figma export — verbatim) — žiadne duplikáty v CSS. */
}
/* Override the global .cta__icon (17.608×17.608) — play-pause SVG is the
   full button (38×38 with bg + border baked in from Figma export). */
.cta--play-pause .cta__icon { width: 38px; height: 38px; }
.cta--play-pause svg { width: 38px; height: 38px; display: block; }
/* swap icon by aria-pressed (true = paused, show play icon) */
.cta--play-pause[aria-pressed="true"] .cta__icon--pause { display: none; }
.cta--play-pause[aria-pressed="false"] .cta__icon--play  { display: none; }

/* Carousel arrows pair — desktop only (mobile carousels stack vertically per Figma 15:743) */
.cta-arrows {
	display: inline-flex;
	align-items: center;
	gap: 30.7px; /* Figma 1:90 frame 48.5 wide, 2× chevrons 9 wide → gap 30.5 */
}
.cta-arrows__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9px;
	height: 18px;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: opacity var(--dur-fast) var(--ease-out-quart),
				transform var(--dur-fast) var(--ease-out-quart);
	opacity: 0.6;
}
.cta-arrows__btn:hover,
.cta-arrows__btn:focus-visible { opacity: 1; }
/* Disabled arrows: invisible but keep layout space so the sibling arrow doesn't
   jump when one of them disables/enables. `visibility: hidden` removes paint +
   pointer events but preserves box. */
.cta-arrows__btn[disabled],
.cta-arrows__btn[aria-disabled="true"] {
	visibility: hidden;
	pointer-events: none;
}
.cta-arrows__btn svg { width: 100%; height: 100%; display: block; }

/* Carousel arrows: increase hit-area without changing visual size */
.cta-arrows__btn { padding: 6px; box-sizing: content-box; }

/* ----- Site header ----- */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--header-h);
	background: var(--pure);
	color: var(--land);
	/* Per #49 v7 followup: header fades opacity in lockstep with the overlay
	   (inverse direction). On open: header fades 1 → 0 while overlay fades
	   0 → 1. On close: header fades 0 → 1 while overlay fades 1 → 0. Same
	   curve, same duration, so the two halves of the transition look like a
	   single crossfade — designer no longer sees logo "pop" at the end of
	   close (header was previously visibility:hidden until t=320, then
	   instantly visible). */
	opacity: 1;
	transition: background-color var(--dur-base) var(--ease-in-out),
				color           var(--dur-base) var(--ease-in-out),
				transform       var(--dur-base) var(--ease-in-out),
				opacity         var(--dur-base) var(--ease-in-out);
}
.site-header[data-theme="dark"] {
	background: var(--land);
	color: var(--pulse);
}
.site-header[data-state="hidden"] {
	transform: translateY(-100%);
}
/* Per #49 v7 followup: opacity-fade the header inverse to the overlay so
   the transitions look like a single crossfade. pointer-events: none
   prevents tap-through on the (invisible) underlying header while menu
   is open. */
body.mobile-menu-open .site-header {
	opacity: 0;
	pointer-events: none;
}
.site-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 32px;
	color: inherit;
}
.site-header__logo svg { height: 32px; width: auto; display: block; }

/* mobile-first: nav-wrap hidden; hamburger pushed to right edge */
.site-header__nav-wrap { display: none; }
.site-header__menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	width: 40px; height: 38px;
	padding: 0 8px;
	-webkit-tap-highlight-color: transparent; /* kill iOS grey tap flash on hamburger */
}

@media (min-width: 1024px) {
	/* Desktop: right-hand group is a 3-column grid — nav | spacer | reserved 95px lang column.
	   The reserved lang column means the lang-switcher's left edge is FIXED, so when the user
	   expands EN/HU the current lang stays in place (Jan: "hlavne na horizontalne nepohne").
	   95px = SK (~21) + gap (~7) + EN (~22) + gap (~7) + HU (~22) + gap (~2) + chevron (~10) + slack. */
	.site-header__nav-wrap {
		display: grid;
		grid-template-columns: auto 1fr 95px;
		align-items: center;
		flex: 0 0 50%;
		margin-left: auto;
		column-gap: 0;
	}
	.site-header__nav { grid-column: 1; }
	.site-header__nav-wrap > .lang-switcher {
		grid-column: 3;
		justify-self: start;
		width: 95px; /* fixed reserved width — content sits at left; expands rightward into column */
		max-width: 95px;
	}
	.site-header__nav { display: block; }
	.site-header__nav-list {
		display: flex;
		gap: 50px;
		font-family: var(--font-display);
		font-weight: 500;
		font-size: 16px;
		line-height: 1.25;
	}
	/* Hover/active underline handled by global .cta--nav — no per-section rule needed here. */

	.site-header__menu-toggle { display: none; }
}

/* Language switcher — trigger button itself is the flex row so chevron sits beside text */
.site-header__lang { position: relative; }
.site-header__lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.site-header__lang-trigger svg { width: 10px; height: 6px; flex: 0 0 auto; display: block; }
.site-header__menu-toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-base) var(--ease-out-quart),
				opacity   var(--dur-fast) var(--ease-out-quart);
}
body.mobile-menu-open .site-header__menu-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.mobile-menu-open .site-header__menu-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* ----- Mobile menu overlay -----
   #49 v6 (designer's suggestion after v4): rather than syncing the overlay's
   opacity fade with the header's background-color animation (which run on
   different threads and visibly desync — "header a plocha menu sa prefarbia
   jeden po druhom"), we PHYSICALLY COVER the site header. The overlay sits
   above .site-header (z-index 60 vs 50) and contains its own logo + close
   button at the top, so the site header underneath is irrelevant during
   menu open.
   Slide-in transform replaces opacity so no transparency mid-state shows
   the (still PURE-themed) header bleeding through during the transition.
   The `.js` class is added once by main.js on init, taking over from the
   no-JS [hidden] attribute (which keeps the menu hidden if JS fails). */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60; /* above .site-header (z 50) */
	background: var(--land);
	color: var(--pulse);
	display: flex;
	flex-direction: column;
	padding: 0 var(--gutter) 40px;
}
.mobile-menu[hidden] { display: none; } /* no-JS / pre-init fallback */
html.js .mobile-menu {
	display: flex;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--dur-base) var(--ease-in-out),
		visibility 0s linear var(--dur-base);
	will-change: opacity;
	-webkit-backface-visibility: hidden;
}
html.js .mobile-menu[hidden] { display: flex; } /* override UA hidden once JS is live */
body.mobile-menu-open .mobile-menu {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
/* Overlay-internal header bar — mirrors site header layout (logo left,
   close X right) so user can navigate / close from within the menu. */
.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	margin-bottom: 64px;
	flex: 0 0 auto;
}
.mobile-menu__nav { flex: 0 0 auto; }
.mobile-menu__footer { margin-top: auto; flex: 0 0 auto; }
.mobile-menu__logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
}
.mobile-menu__logo svg { height: 32px; width: auto; display: block; }
.mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.mobile-menu__close svg { width: 24px; height: 24px; display: block; }
.mobile-menu__nav ul {
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.mobile-menu__nav a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.25;
}
.mobile-menu__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-display);
	font-weight: 500;
}
.mobile-menu__lang { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; }
.mobile-menu__lang svg { width: 11px; height: 6px; }
.mobile-menu__email { font-size: 16px; }

@media (min-width: 1024px) {
	.mobile-menu { display: none; }
}

/* =========================================================
   PIN STAGE — reusable sticky media + intro overlay
   Used by /o-nas/ and any other page needing the HP-style scroll choreography
   (intro slides up → media stays pinned → next section slides over).
   Shares scroll tokens (--stage-intro etc) with .hero-stage so tuning propagates.
   ========================================================= */

.pin-stage {
	position: relative;
	height: var(--stage-total);
	min-height: var(--stage-total);
	background: var(--land);
}
.pin-stage__media {
	position: sticky;
	top: 0;
	left: 0;
	height: var(--stage-video);
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.pin-stage__media-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}
/* Pin-stage <picture> wrapper: keep inset so the inner img fills the sticky area. */
.pin-stage picture {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

/* =========================================================
   .js-parallax-y — reusable subtle Y-parallax on any image wrapper.
   Slap this class on a wrapper that contains an <img> (or <picture><img>); JS
   (main.js §20) detects the wrapper, scales the img to 1.12 and slides it on Y
   as the wrapper passes through the viewport. Works with sticky/static images.
   Disable simply by removing the class. Mobile users with native scroll get
   the same effect via scroll events — no extra setup needed.
   ========================================================= */
.js-parallax-y { overflow: hidden; }
.js-parallax-y > img,
.js-parallax-y > picture > img {
	transform: scale(1.12) translate3d(0, 0, 0);
	transform-origin: center center;
	will-change: transform;
}
.pin-stage__intro {
	position: absolute;
	inset: 0 0 auto 0;
	min-height: var(--stage-intro);
	z-index: 2;
	background: var(--land);
	color: var(--pulse);
	display: flex;
	align-items: flex-end;
	padding-block: calc(var(--header-h) + 32px) 32px;
}
@media (min-width: 1024px) {
	.pin-stage__intro { padding-block: calc(var(--header-h) + 80px) 80px; }
}
.pin-stage__intro-shell { width: 100%; }
.pin-stage__intro-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.pin-stage__intro-col { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
	.pin-stage__intro--stacked .pin-stage__intro-inner { max-width: 742px; }
	/* 2-col layout — matches site header grid: col 1 = headline, col 2 = body text.
	   Per Figma 60:1309 (1344 container): col 1 fits to content, col 2 starts at x=684 = 50%. */
	.pin-stage__intro--two-col .pin-stage__intro-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		align-items: end;
	}
	.pin-stage__intro--two-col .pin-stage__intro-col--primary   { grid-column: 1; }
	.pin-stage__intro--two-col .pin-stage__intro-col--secondary { grid-column: 2; }
}
.pin-stage__body {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: inherit;
}
.pin-stage__body strong { font-family: var(--font-text); font-weight: 500; }

/* Per Figma comment #57 + node 62:2459: on /o-nas/ the intro body should wrap as
   one continuous 3-line flow on mobile (the desktop forced <br> caused a single-
   word orphan "zeme." on its own line). Hide the <br> on mobile and cap the
   paragraph width so the natural wrap matches the Figma mobile mock. */
@media (max-width: 1023px) {
	.pin-stage--onas .pin-stage__body { max-width: 265px; }
	.pin-stage--onas .pin-stage__body br { display: none; }
}

/* Light variant — PURE bg + LAND text (Figma 60:1309 1_Sekcia_onas). */
.pin-stage--light .pin-stage__intro { background: var(--pure); color: var(--land); }

/* O nás modifier — bigger headline (Figma 60:1314: Display Regular 58 line-height 1.25). */
@media (min-width: 1024px) {
	.pin-stage--onas .pin-stage__headline { font-size: 58px; line-height: 1.25; }
}
.pin-stage__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}
.pin-stage__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px; /* Mobile per Figma 62:2460 (Display Regular 42 / lh 1.25) */
	line-height: 1.25;
	margin: 0;
	color: inherit;
}
@media (min-width: 1024px) {
	.pin-stage__headline { font-size: 42px; }
}
.pin-stage__headline--cascade .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity var(--dur-slow) var(--ease-out-quart),
				transform var(--dur-slow) var(--ease-out-quart);
}
.pin-stage__headline--cascade.is-revealed .word {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(60ms * var(--word-index) - 8ms * var(--word-index) * var(--word-index) / 6);
}

/* Apply to the section immediately following .pin-stage so it slides up over the
   still-pinned media. Same effect as the HP `.o-nas` overlap. */
.pin-stage-overlap {
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * var(--stage-video));
	background: var(--pure);
}

/* =========================================================
   HERO STAGE — sticky video + green intro overlay
   ========================================================= */

.hero-stage {
	position: relative;
	height: var(--stage-total);
	min-height: var(--stage-total); /* LOAD-BEARING: lock height so video-load race doesn't collapse the stage and trigger downstream IO animations early */
	background: var(--land); /* shows behind video while it loads */
}

.hero-stage__video {
	position: sticky;
	top: 0;
	left: 0;
	height: var(--stage-video);
	min-height: 100vh; /* belt-and-braces vs lvh edge cases / video metadata race */
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.hero-stage__video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero-stage__gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 145px;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
}
.hero-stage__overlay {
	position: absolute;
	left: 0; right: 0; bottom: 24px;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--pure);
}
.hero-stage__pause {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hero-stage__pause[aria-pressed="true"] svg { /* play icon visual swap handled in JS via class */ }
.hero-stage__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.hero-stage__cta svg { width: 17px; height: 17px; }

.hero-stage__intro {
	position: absolute;
	inset: 0 0 auto 0;
	min-height: var(--stage-intro);
	z-index: 2;
	background: var(--land);
	color: var(--pulse);
	display: flex;
	align-items: flex-end;
	padding-block: calc(var(--header-h) + 32px) 32px;
}
@media (min-width: 1024px) {
	.hero-stage__intro {
		padding-block: calc(var(--header-h) + 80px) 80px;
	}
}
/* Shell holds the .container concerns (max 1920 + auto margin + gutter padding) so the
   inner text block can be capped at 742 and stay LEFT-aligned with the logo above. */
.hero-stage__intro-shell { width: 100%; }
.hero-stage__intro-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	/* Desktop cap matches Figma 1:156 text-headline-HERO width (742px on 1440 ≈ 52% viewport).
	   Mobile uses full container width per Figma 15:685. */
}
@media (min-width: 1024px) {
	.hero-stage__intro-inner { max-width: 742px; }
}

/* =========================================================
   .js-cascade-words — reusable word-by-word reveal (Figma 1:156 annotation).
   Drop the class on any headline. JS (main.js §5) walks text nodes, wraps each
   word in <span class="word" style="--word-index:N">, then fires `.is-revealed`
   via IntersectionObserver. Pre-wrapped HTML (e.g. hero-stage rendered by PHP)
   is detected and not re-wrapped.

   Each word: opacity 0 + translateY → 1 + 0. Accelerating cascade keeps long
   headlines snappy: base 60ms × idx minus a quadratic taper.
   ========================================================= */
.js-cascade-words .word,
.hero-stage__headline .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity var(--dur-slow) var(--ease-out-quart),
				transform var(--dur-slow) var(--ease-out-quart);
}
.js-cascade-words.is-revealed .word,
.hero-stage__headline.is-revealed .word {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(60ms * var(--word-index) - 8ms * var(--word-index) * var(--word-index) / 6);
}
.hero-stage__headline { display: block; }

/* =========================================================
   O NÁS — slides over the still-sticky hero video
   ========================================================= */

.o-nas {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
	margin-top: calc(-1 * var(--stage-video)); /* overlap the bottom 100lvh of hero-stage */
	/* Mobile pt-50 pb-100 (Figma 15:711); Desktop pt-100 pb-50 (Figma 1:117). */
	padding-block: 50px 100px;
	/* NOTE: no min-height. The white sections (o-nas + selected-projects + what-we-do + footer)
	   stack with no vertical gap, all on the same z-index/background plane. Together they cover
	   the rest of hero-stage's sticky-video region naturally. */
}
@media (min-width: 1024px) {
	.o-nas { padding-block: 100px 50px; }
}
.o-nas__inner {
	display: flex;
	flex-direction: column;
	gap: 80px; /* Figma 15:712 mobile gap-80 */
}
@media (min-width: 1024px) {
	.o-nas__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}
}
.o-nas__left {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma 15:713 gap-20 mobile */
	width: 240px;       /* Figma 1:119 / 15:713: 240px col */
	max-width: 100%;
}
/* HU only: longer Hungarian words need wider left column. Same override across
   mobile base + tablet (768–1023) + desktop (≥1024) media queries below. */
html:lang(hu) .o-nas__left { width: 270px; }
@media (min-width: 1024px) {
	.o-nas__left {
		flex: 0 0 240px;
		gap: 0;
		justify-content: space-between; /* Figma 1:119 h-462 justify-between (eyebrow+body top, CTA bottom) */
	}
	/* HU only: longer Hungarian words need wider left column. */
	html:lang(hu) .o-nas__left { flex: 0 0 270px; }
}
.o-nas__eyebrow { color: var(--land); }
.o-nas__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.o-nas__cta svg { width: 17px; height: 17px; }

.o-nas__right {
	display: flex;
	flex-direction: column;
	gap: 60px;
}
@media (min-width: 1024px) {
	.o-nas__right {
		/* Per #50: shrink at narrow desktop (iPad Pro 1024). Basis 660 caps the
		   width at the Figma spec for wide viewports. */
		flex: 0 1 660px;
		min-width: 0;
		justify-content: space-between;
	}
}
.o-nas__lede { color: var(--land); }
/* Cols layout — gap-80 mobile (Figma 15:724), gap-24 row desktop (Figma 1:130) */
.o-nas__cols {
	display: flex;
	flex-direction: column;
	gap: 80px;
}
@media (min-width: 1024px) {
	.o-nas__cols { flex-direction: row; gap: 24px; align-items: center; }
}
/* iPad Mini / Air 11" portrait (768–1023): replicate the full desktop layout
   for the whole .o-nas__inner block — left (eyebrow+intro+CTA) and right
   (lede + 2 stat cols) sit side-by-side, same as ≥1024. The right column
   shrinks from its 660px desktop basis to ~480px at 768 (left is fixed
   240px, container is ~720px after 24px gutter), then the inner 2 cols
   collapse to ~228px each — still wide enough for the paragraph + stat box.
   Pure mobile (<768) keeps the original 80px column stack unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
	.o-nas { padding-block: 100px 50px; }
	.o-nas__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}
	.o-nas__left {
		flex: 0 0 240px;
		gap: 0;
		justify-content: space-between;
	}
	/* HU only: text needs wider left column (longer Hungarian words). */
	html:lang(hu) .o-nas__left {
		flex: 0 0 270px;
	}
	.o-nas__right {
		flex: 0 1 660px;
		min-width: 0;
		justify-content: space-between;
	}
	.o-nas__cols { flex-direction: row; gap: 24px; align-items: stretch; }
	/* Don't force height:256 on tablet — cols are ~181px wide (vs ~330 on
	   desktop), text wraps to more lines; let the col grow so the stat label
	   isn't clipped. justify-content: space-between still spaces paragraph
	   from stat block. */
	.o-nas__col { gap: 30px; justify-content: space-between; }
}
.o-nas__col {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1;
}
/* Desktop col height 256, justify-between (Figma 1:131 / 1:136) — paragraph at top, stat at bottom */
@media (min-width: 1024px) {
	.o-nas__col { height: 256px; gap: 0; justify-content: space-between; }
}
/* Width caps per Figma — col 1 paragraph 267 (1:132 / 15:726), col 2 paragraph 282 (1:137 / 15:731).
   These widths are designer-chosen to control line breaks; do NOT let them stretch to column width. */
.o-nas__col:nth-child(1) > p { max-width: 267px; }
.o-nas__col:nth-child(2) > p { max-width: 282px; }
.o-nas__stat {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 158px; /* Figma 1:133 / 1:138 / 15:727 / 15:732 */
}
.o-nas__stat-num {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
}
@media (min-width: 1024px) {
	.o-nas__stat-num { font-size: 58px; }
}
.o-nas__stat-label {
	font-family: var(--font-text);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
}

/* =========================================================
   Selected Projects carousel (Figma 1:77 default + 13:250 overflow view)
   ========================================================= */

.selected-projects {
	position: relative;
	z-index: 3; /* same plane as .o-nas so the white sections stack and cover sticky video together */
	background: var(--pure);
	color: var(--land);
	padding-block: 35px 100px;
	overflow: hidden; /* clip rail overflow so it doesn't break page scroll-x */
}
@media (min-width: 1024px) {
	.selected-projects { padding-block: 35px 100px; }
}

/* Top divider — animation via `.js-line-reveal` utility (see markup). Local rules only
   define visual styling (height/bg) + layout spacing. */
.selected-projects__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse); /* Figma 1:78 imgLine222 — PULSE */
	width: 100%;
	margin-bottom: 60px;
}

/* =========================================================
   .js-line-reveal — shared full-width PULSE line that scales in on viewport enter.
   Apply to any divider/line element to get the unified animation. The JS observer
   (main.js section 9) flips `.is-revealed` once threshold 0.4 fires.
   ========================================================= */
.js-line-reveal {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1320ms var(--ease-out-quart);
	will-change: transform;
}
.js-line-reveal.is-revealed { transform: scaleX(1); }

/* =========================================================
   .js-line-reveal-stagger — staggered version. Apply to a CONTAINER whose
   children each have a `::before` (and optional `::after` on last child) line.
   Children also need `style="--line-index:N"` so delays compound.

   Tunable via data-* attributes on the container (read by main.js §9b):
     data-reveal-threshold   IntersectionObserver ratio that triggers the run
                             (e.g. "0.2" = once 20% of the container is in view).
     data-reveal-stagger     ms between successive lines (default 120).
     data-reveal-duration    ms each line takes (default 1100).
   ========================================================= */
.js-line-reveal-stagger > * {
	--reveal-stagger: 120ms;
	--reveal-duration: 1320ms;
}
.js-line-reveal-stagger > *::before,
.js-line-reveal-stagger > *:last-child::after {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--reveal-duration, 1320ms) var(--ease-out-quart);
	transition-delay: calc(var(--line-index, 0) * var(--reveal-stagger, 120ms));
	will-change: transform;
}
.js-line-reveal-stagger.is-revealed > *::before,
.js-line-reveal-stagger.is-revealed > *:last-child::after {
	transform: scaleX(1);
}
/* For the closing `::after` on the last child, push its delay one step further
   so it appears AFTER its own ::before. */
.js-line-reveal-stagger > *:last-child::after {
	transition-delay: calc((var(--line-index, 0) + 1) * var(--reveal-stagger, 120ms));
}
@media (min-width: 1024px) {
	.selected-projects__divider { margin-bottom: 100px; }
}

/* Head row: headline + controls */
.selected-projects__head {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 40px;
}
@media (min-width: 1024px) {
	.selected-projects__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 60px;
		margin-bottom: 60px;
	}
}
.selected-projects__headline-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 100%;
}
@media (min-width: 1024px) {
	.selected-projects__headline-wrap {
		max-width: 553px; /* Figma 1:81 width 553 — line-break parity */
		flex: 0 0 553px;
	}
}
.selected-projects__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
	color: var(--land);
}
.selected-projects__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.selected-projects__headline { font-size: 42px; }
}

.selected-projects__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 1024px) {
	.selected-projects__controls {
		justify-content: flex-end;
		gap: 99px; /* Figma 1:84 width 276 — main_cta 129 + arrows 48 + space 99 between */
		align-items: center;
	}
}
.selected-projects__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--land);
}
.selected-projects__cta svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* .selected-projects__arrows / .selected-projects__arrow styles now provided by global .cta-arrows / .cta-arrows__btn. */

/* Carousel rail — full-bleed past container, scrolls horizontally on desktop, stacks on mobile */
.selected-projects__rail {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE */
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
}
/* Snap only on mobile — on desktop the first card must keep its container-edge
   padding-left (~48px), which `scroll-snap-type: mandatory` would steal by
   snapping the card to the viewport edge. */
@media (max-width: 1023px) {
	.selected-projects__rail {
		scroll-snap-type: x mandatory;
		/* scroll-padding shifts the snap origin inward by 16px, so a card with
		   scroll-snap-align:start snaps to (rail-left + 16px) instead of to
		   the rail's left edge. Initial first card sits at 16px from viewport
		   (aligned with the rest of the page container). The track's own
		   padding-inline:16px still scrolls with the content, so when the user
		   swipes to the next card, the first card scrolls fully off-screen —
		   no "ghost padding" wall left behind. */
		scroll-padding-left: var(--gutter);
	}
	.selected-projects__card { scroll-snap-align: start; }
}
.selected-projects__rail::-webkit-scrollbar { display: none; }
.selected-projects__rail.is-dragging { cursor: grabbing; }

.selected-projects__track {
	display: flex;
	/* Mobile: horizontal carousel — first card aligned to container left, peek of next.
	   Gap unified with .projekty-csr-carousel__track (24px) per designer feedback —
	   both carousels share the same visual rhythm now. */
	flex-direction: row;
	gap: 24px;
	padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
	/* First card aligned to CONTAINER left, not viewport left — important at viewport > container-max.
	   --container-edge-x: distance from viewport-left to container content-left. */
	.selected-projects__track {
		gap: 24px;
		padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
		padding-right: 0; /* padding-right is ignored by flex+overflow scrollWidth in Chrome — using ::after spacer instead */
	}
}
/* End-of-rail gutter: an ::after pseudo flex item extends scrollWidth (padding-right
   on a flex+overflow container is ignored by Chrome). Flex `gap: 24px` would add
   24px between last card and the pseudo — we cancel it with margin-left: -24px,
   so flex-basis equals the actual trailing distance. Works uniformly mobile (16),
   tablet (24), desktop (48), and ultra-wide (scales with formula). */
.selected-projects__track::after {
	content: '';
	flex: 0 0 var(--gutter);
	margin-left: -24px;
}
@media (min-width: 1024px) {
	.selected-projects__track::after {
		flex-basis: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
	}
}

/* Card — fluid width so always ~1.75 cards visible (1 full + ~0.75 next).
   card_w = (container_inner - gap) / 1.75 where container_inner = min(viewport, container-max) - 2 * gutter */
.selected-projects__card {
	flex: 0 0 auto;
	margin: 0;
	/* Mobile: one card full width minus gutter so the next card peeks ~16px. */
	width: calc(100vw - 2 * var(--gutter) - 24px);
}
@media (min-width: 1024px) {
	/* Card scales with viewport. Ratio: from first-card left (= container content left) to viewport right
	   should equal 1.75 cards + 1 gap. card_w = (viewport - first_card_x - gap) / 1.75. */
	.selected-projects__card {
		width: calc(
			(100vw - max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))) - 24px)
			/ 1.75
		);
	}
}
.selected-projects__card-link {
	display: flex;
	flex-direction: column;
	gap: 20px;       /* Figma 15:757 mobile gap-20 */
	color: var(--land);
}
@media (min-width: 1024px) {
	.selected-projects__card-link { gap: 28px; }   /* Figma 1:94 gap-28 */
}
.selected-projects__img-wrap {
	overflow: hidden;
	background: var(--land);
	aspect-ratio: 358 / 500;   /* Mobile portrait per Figma 15:754 (358×500) */
	width: 100%;
}
@media (min-width: 1024px) {
	.selected-projects__img-wrap { aspect-ratio: 774 / 560; } /* Desktop landscape per Figma 1:95 */
}
.selected-projects__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out-quart);
	pointer-events: none; /* avoid drag-conflict with rail */
}
.selected-projects__card-link:hover .selected-projects__img {
	transform: scale(1.04);
}
.selected-projects__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	color: var(--land);
	position: relative;
	display: inline-block;
	/* LOAD-BEARING: align-self: flex-start prevents the flex column parent from stretching this
	   to 774px (card width). Without it, the ::after underline runs the entire card width.
	   Figma 1:98 / 1:106 / 1:114 — name width matches text content. */
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
}
/* Underline handled globally via .selected-projects__name background-image gradient pattern
   (see global CTA hover patterns above, fix-70/#23). Old ::after replaced. */
@media (max-width: 1023px) {
	/* Mobile: underline default-on per Figma 15:757 annotation */
	.selected-projects__name { background-size: 100% 1.5px; }
}

/* =========================================================
   What we do (Figma 1:51 + hovers 13:291, 13:335, 13:377)
   ========================================================= */

.what-we-do {
	position: relative;
	z-index: 3; /* white stack plane */
	background: var(--pure);
	color: var(--land);
	padding-block: 50px 100px;
}
@media (min-width: 1024px) {
	.what-we-do { padding-block: 100px 80px; }
}

.what-we-do__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
@media (min-width: 1024px) {
	.what-we-do__inner { gap: 80px; }
}

.what-we-do__headline-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1024px) {
	.what-we-do__headline-wrap { max-width: 764px; }
}
.what-we-do__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.what-we-do__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.what-we-do__headline { font-size: 42px; }
}

/* Row: image (left) + list (right) — column on mobile, row on desktop */
.what-we-do__row {
	display: flex;
	flex-direction: column;
	gap: 60px;
}
@media (min-width: 1024px) {
	.what-we-do__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 60px;
	}
}

.what-we-do__image-col {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}
@media (min-width: 1024px) {
	.what-we-do__image-col {
		width: 320px;
		flex: 0 0 320px;
	}
}

.what-we-do__image-stack {
	position: relative;
	width: 100%;
	aspect-ratio: 320 / 262; /* Figma 1:63 desktop ratio; mobile 15:786 ratio 266/218 close */
	overflow: hidden;
	background: var(--land);
}
@media (max-width: 1023px) {
	/* Figma comment #32: revised mobile sizing to match CSR carousel card
	   proportions (width ~80vw + portrait 342:420 aspect) so the HP hover-images
	   visually live in the same system as /projekty/ CSR Aktivity. */
	.what-we-do__image-stack {
		width: 80vw;
		max-width: 320px;
		aspect-ratio: 342 / 420;
	}
}
.what-we-do__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 220ms var(--ease-in-out);
	pointer-events: none;
}
.what-we-do__image.is-active { opacity: 1; }

.what-we-do__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--land);
}
.what-we-do__cta svg { width: 17px; height: 17px; }

/* List with hover triggers + top divider line per item */
.what-we-do__list {
	display: flex;
	flex-direction: column;
	width: 100%;
}
@media (min-width: 1024px) {
	/* Per #50: flex: 0 1 (not 0 0) so the list shrinks at narrow desktop
	   viewports (e.g. iPad Pro 1024 portrait) instead of overflowing past
	   the container. min-width:0 lets the underline rules clip inside the
	   flex item. Above 1140 viewport the basis 660 is the cap. */
	.what-we-do__list { flex: 0 1 660px; min-width: 0; }
}
/* Per Figma 1:468 each row: line at top, 18px gap, text 20/1.3, 18px gap below. The
   line is a ::before so we can animate it (border-top can't scaleX). Last item gets
   an additional ::after for the closing bottom line. */
.what-we-do__list-item {
	position: relative;
	padding: 20px 0 16px; /* per #5: uppercase glyfy bez descenderov pôsobia vyššie → +2px dole na optický stred medzi divider lines */
}
.what-we-do__list-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.5px;
	background: var(--pulse);
}
.what-we-do__list-item:last-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1.5px;
	background: var(--pulse);
}
.what-we-do__trigger {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	color: var(--land);
	text-transform: uppercase;
	padding: 0;
	transition: color var(--dur-fast) var(--ease-out-quart);
	cursor: default; /* per comment #4: položky menia obrázok, ale nie sú „klikateľné" — žiadna ručička */
}
/* iPad Mini / Air 11" portrait (768–1023): replicate the desktop row layout
   so image + accordion list sit side-by-side instead of stacking. Container
   ~720px at 768, image col fixed 320 + 60 gap + list flex-basis 660 shrinks
   to fit the remaining ~340px. Image-stack aspect reverts to the landscape
   320/262 ratio (the mobile portrait 342/420 would push the image too tall
   in the narrower col). Pure mobile (<768) keeps the original column stack
   with 80vw portrait image. */
@media (min-width: 768px) and (max-width: 1023px) {
	.what-we-do__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 60px;
	}
	.what-we-do__image-col { width: 320px; flex: 0 0 320px; }
	.what-we-do__image-stack {
		width: 100%;
		max-width: none;
		aspect-ratio: 320 / 262;
	}
	.what-we-do__list { flex: 0 1 660px; min-width: 0; }
}
.what-we-do__trigger[aria-pressed="true"],
.what-we-do__trigger:hover {
	color: var(--land);
}

/* Bottom Kontaktujte nás block */
/* =========================================================
   Contact block — shared "Kontaktujte nás" component used on HP (what-we-do)
   and o-nas (hodnoty). Markup is in template-parts/sections/contact-block.php.
   Keep tuning here so both pages stay in sync.
   ========================================================= */

.contact-block {
	margin-top: 140px; /* Figma comment #33: mobile spacing per client */
	display: flex;
	flex-direction: column;
	gap: 30px;
}
@media (min-width: 1024px) {
	.contact-block { margin-top: 100px; }
}
.contact-block__line {
	display: block;
	height: 1.5px;
	background: var(--pulse); /* Figma 1:71 imgLine222 — PULSE */
	width: 100%;
}
.contact-block__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
@media (min-width: 1024px) {
	/* Default placement (HP what-we-do): right column right-anchored at 660 wide — same
	   proportional anchoring as .what-we-do__list. Inner text capped at 498. */
	.contact-block__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 660px;
		column-gap: 0;
		align-items: start;
		gap: 0;
	}
	.contact-block__right {
		grid-column: 2;
		width: 100%;
		max-width: 365px; /* Per Figma box width */
	}
	/* O-nas variant: right column LEFT edge aligns with the IMAGE right edge above
	   (image is 660 wide → col 1 = 660). Different anchoring than HP because the
	   hodnoty list does NOT right-anchor — it sits image+gap from the left. */
	.contact-block--onas .contact-block__inner {
		grid-template-columns: 660px minmax(0, 1fr);
	}
}
.contact-block__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	.contact-block__headline {
		/* Per #50 followup: "Kontaktujte" is a single unbreakable ~410px word at 58px;
		   at iPad Pro 1024 (col 1 = ~253px after the 660px right col) the word visibly
		   overflowed and overlapped the body text in col 2. clamp() scales the font
		   from 38px at 1024 viewport up to 58px at 1440+, so it fits col 1 at every
		   width while staying at Figma spec on wide desktops. */
		font-size: clamp(38px, 4vw, 58px);
		grid-column: 1;
	}
}
.contact-block__right {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Desktop placement is set inside the .contact-block__inner @media block above. */
.contact-block__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.contact-block__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.contact-block__cta svg { width: 17px; height: 17px; }

/* iPad Pro 12.9" portrait (1024px) — HP variant grid `minmax(0,1fr) 660px` left
   col 1 at ~268px, but "Kontaktujte nás" needs ~281px at the clamped font-size,
   so the headline wrapped to 2 lines. Shrink the right column from 660 to 498
   (matches .contact-block__right's own max-width cap, so content layout inside
   col 2 is unchanged) → col 1 grows to ~430px → headline fits one line.
   O-nas variant unaffected: it uses `660px minmax(0,1fr)` where col 1 is the
   wide one and already accommodates the headline. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.contact-block__inner {
		grid-template-columns: minmax(0, 1fr) 498px;
	}
}

/* =========================================================
   Kontakt page (Figma 36:1592 desktop / 42:3060 mobile)
   ========================================================= */

.kontakt-udaje {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
	/* Mobile: headline y=224 per Figma 42:3334; desktop keeps the header-h + 80 calc. */
	padding-block: 224px 0;
}
@media (min-width: 1024px) {
	.kontakt-udaje { padding-block: calc(var(--header-h) + 80px) 0; }
}
@media (min-width: 1024px) {
	.kontakt-udaje { padding-block: calc(var(--header-h) + 190px) 0; /* Figma 60:1393 content at y=262, header 72 → 190 from header bottom */ }
}
.kontakt-udaje__inner {
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: flex-start;
	padding-bottom: 40px;
}
@media (min-width: 1024px) {
	.kontakt-udaje__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: start;
		gap: 60px;
		padding-bottom: 40px;
	}
}
.kontakt-udaje__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	margin: 0;
	max-width: 322px;
}
@media (min-width: 1024px) {
	.kontakt-udaje__headline { font-size: 58px; max-width: 457px; }
}
.kontakt-udaje__channels {
	display: flex;
	flex-direction: column;
	gap: 80px; /* mobile: TEL block stacked further down per Figma 42:3320 gap-80 */
}
@media (min-width: 1024px) {
	/* Same 660px column + same internal 2-col grid as .kontakt-cta__addresses so the
	   2nd column (TEL <-> SÍDLO) lines up vertically across sections.
	   Per Figma: 2nd col starts at +342 from right-block left (188 + 154 = 342). */
	.kontakt-udaje__channels {
		display: grid;
		grid-template-columns: 188px 188px;
		gap: 154px;
		flex: 0 1 660px;
		min-width: 0; /* #50 shrink at narrow desktop */
	}
}
.kontakt-udaje__block {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
@media (min-width: 1024px) {
	.kontakt-udaje__block { gap: 10px; }
}
.kontakt-udaje__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.kontakt-udaje__link {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	color: var(--land);
	position: relative;
	display: inline-block;
	width: max-content;
	max-width: 100%;
}
@media (min-width: 1024px) {
	.kontakt-udaje__link { font-size: 16px; line-height: 1.5; }
}
/* Underline handled by the global background-image pattern above (#43/#44 cleanup).
   Removed the legacy ::after partial underline + --default full underline modifier —
   kontakt links now behave like .cta--nav (no underline default, grow-from-left on hover). */
.kontakt-udaje__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Section 2: Kontakt-CTA (Figma 36:2266) */
.kontakt-cta {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
	padding-block: 80px 50px;
}
@media (min-width: 1024px) {
	.kontakt-cta { padding-block: 60px 80px; }
}
.kontakt-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 140px;
	/* Mobile order per Figma 42:3422: text + CTAs (left), then image + addresses (right with image first). */
}
@media (min-width: 1024px) {
	.kontakt-cta__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		gap: 60px;
	}
}
.kontakt-cta__left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 1024px) {
	.kontakt-cta__left {
		width: 364px;
		flex: 0 0 364px;
		justify-content: space-between;
	}
}
.kontakt-cta__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	max-width: 371px;
}
.kontakt-cta__text strong { font-weight: 500; }
.kontakt-cta__ctas {
	display: flex;
	gap: 80px;
	flex-wrap: wrap;
}
.kontakt-cta__right {
	display: flex;
	flex-direction: column-reverse; /* Mobile per Figma 42:3413: image FIRST, then addresses */
	gap: 40px;
}
@media (min-width: 1024px) {
	.kontakt-cta__right {
		flex-direction: column;  /* Desktop per Figma 36:2526: addresses FIRST, then image */
		flex: 0 1 660px;
		min-width: 0; /* #50 shrink at narrow desktop */
		gap: 36px;
	}
}
.kontakt-cta__addresses {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
@media (min-width: 1024px) {
	/* Same 188 / gap-154 / 188 grid as .kontakt-udaje__channels above so columns align. */
	.kontakt-cta__addresses {
		display: grid;
		grid-template-columns: 188px 188px;
		gap: 154px;
		flex-direction: initial;
	}
}
.kontakt-cta__address {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 188px;
	max-width: 100%;
}
.kontakt-cta__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.kontakt-cta__address-body {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.kontakt-cta__image {
	margin: 0;
	width: 100%;
	aspect-ratio: 357 / 268; /* Mobile per Figma 42:3421 (357×268) */
	overflow: hidden;
}
@media (min-width: 1024px) {
	.kontakt-cta__image {
		aspect-ratio: 660 / 268; /* Desktop per Figma 36:2474 (660×268) */
		margin-top: 36px; /* gap between addresses block and image */
	}
}
.kontakt-cta__image img,
.kontakt-cta__image picture { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Per Figma comment #55: kontakt page uses the phone (mobile) column stack
   on ALL tablet sizes — the desktop-row layout would have been here but
   the designer asked to revert. Fall through to the base mobile rules. */

/* =========================================================
   Projekty page (Figma 67:4097 desktop / 98:1330 mobile)
   ========================================================= */

.projekty-intro,
.projekty-grid,
.projekty-csr-head,
.projekty-csr-carousel,
.projekty-onas {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
}

/* Section 1: Intro */
.projekty-intro { padding-block: 224px 0; } /* Mobile per Figma 98:1414 headline y=224 */
@media (min-width: 1024px) { .projekty-intro { padding-block: calc(var(--header-h) + 80px) 0; } }
@media (min-width: 1024px) { .projekty-intro { padding-block: calc(var(--header-h) + 190px) 0; /* Figma 67:4314 top=262, header_h 72 → 190 */ } }
.projekty-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding-bottom: 40px;
}
@media (min-width: 1024px) {
	.projekty-intro__inner {
		display: grid;
		grid-template-columns: 1fr 1fr; /* LOAD-BEARING: 50/50 with gap:0 aligns paragraph's left edge to page centerline (Figma comment #62/63 — body must start at 50% line, not pushed right). */
		align-items: end;
		gap: 0;
	}
	.projekty-intro__headline,
	.projekty-intro__text { justify-self: start; }
}
.projekty-intro__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	margin: 0;
	max-width: 457px;
}
@media (min-width: 1024px) { .projekty-intro__headline { font-size: 58px; } }
.projekty-intro__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	max-width: 546px;
}
.projekty-intro__text strong { font-weight: 500; }
.projekty-intro__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Section 2: Projects grid */
.projekty-grid { padding-top: 42px; }
@media (min-width: 1024px) { .projekty-grid { padding-top: 50px; } }
/* Mobile-only: vertical gap between head, list, more-wrap, divider */
@media (max-width: 1023px) {
	.projekty-grid > .container {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
}
.projekty-grid__head {
	display: flex;
	flex-direction: column;
	gap: 52px;
	margin-bottom: 0; /* Mobile: gap on .projekty-grid > .container handles vertical spacing */
}
@media (min-width: 1024px) {
	.projekty-grid__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		margin-bottom: 50px;
	}
}
/* CSR link sits right-aligned on mobile (override default .cta { align-self: flex-start }) */
@media (max-width: 1023px) {
	.projekty-grid__csr-link { align-self: flex-end; }
}
/* Filters: mobile = dropdown trigger + collapsible vertical list (Figma 91:136).
   Desktop = inline pills (default behaviour). */
.projekty-grid__filters { position: relative; }

/* Mobile-only trigger */
.projekty-grid__filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	color: var(--land);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.projekty-grid__filter-trigger-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 6px;
	transition: transform var(--dur-base) var(--ease-out-quart);
}
.projekty-grid__filter-trigger[aria-expanded="true"] .projekty-grid__filter-trigger-chevron {
	transform: rotate(180deg);
}
.projekty-grid__filter-trigger-chevron svg { width: 100%; height: 100%; display: block; }

/* Mobile list — vertical stack, collapsed by default */
@media (max-width: 1023px) {
	.projekty-grid__filter-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		margin-top: 0;
		transition: max-height 320ms var(--ease-out-quart),
					opacity 240ms var(--ease-out-quart),
					margin-top 320ms var(--ease-out-quart);
	}
	.projekty-grid__filters[data-open="true"] .projekty-grid__filter-list {
		max-height: 240px;
		opacity: 1;
		margin-top: 16px;
	}
	/* Mobile filter style — vertical list per Figma 91:148/150/153/156 (Display Regular 18, 1.3) */
	.projekty-grid__filter {
		display: block;
		text-align: left;
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 18px;
		line-height: 1.3;
		color: var(--land);
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
	}
}

/* Desktop — hide trigger, show pills inline */
@media (min-width: 1024px) {
	.projekty-grid__filter-trigger { display: none; }
	.projekty-grid__filter-list {
		display: flex;
		flex-wrap: wrap;
		gap: 18px;
	}
	.projekty-grid__filter {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 16px;
		line-height: 1.3;
		color: var(--land);
		background: none transparent;
		border: 0;
		padding: 0 0 2px;
		cursor: pointer;
		/* Global underline pattern (fix-70 / #23) — line under text glyphs only. */
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 0% 1.5px;
		background-position: 0 calc(100% - 0.05em);
		background-repeat: no-repeat;
		transition: background-size 0.45s var(--ease-out-quart);
	}
	.projekty-grid__filter:hover,
	.projekty-grid__filter:focus-visible {
		background-size: 100% 1.5px;
	}
	.projekty-grid__filter[aria-pressed="true"] {
		background-size: 100% 1.5px;
	}
	/* Per #48: redraw only fires when cursor leaves and re-enters — not the instant
	   pressed=true is toggled while cursor is still on the pill from the click.
	   JS sets data-suppress-redraw on click and clears it on mouseleave; the rule
	   ignores hover until that attribute is gone. */
	.projekty-grid__filter[aria-pressed="true"]:not([data-suppress-redraw]):hover {
		animation: cta-underline-redraw 0.75s var(--ease-out-quart) forwards;
	}
}

.projekty-grid__list {
	display: grid;
	/* minmax(0, 1fr) so grid items can shrink below their intrinsic content width —
	   prevents <picture><img> natural size from blowing out the column. */
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}
@media (min-width: 1024px) {
	.projekty-grid__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 80px;
		column-gap: 24px;
	}
}
.projekty-grid__card { margin: 0; }
.projekty-grid__card.is-hidden { display: none; }
.projekty-grid__card-link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--land);
}
@media (min-width: 1024px) { .projekty-grid__card-link { gap: 28px; } }
.projekty-grid__img-wrap {
	width: 100%;
	aspect-ratio: 358 / 500; /* Mobile portrait per Figma 98:1429 */
	overflow: hidden;
	background: var(--land);
}
@media (min-width: 1024px) {
	.projekty-grid__img-wrap { aspect-ratio: 660 / 560; } /* Desktop landscape per Figma 67:4710 */
}
/* iPad Mini / Air 11" portrait (768–1023): 2-col grid same as desktop —
   two projects side-by-side. Each card ~348px at 768. Image aspect reverts
   to desktop landscape 660/560 so the cards aren't tall portrait strips at
   the narrower width. */
@media (min-width: 768px) and (max-width: 1023px) {
	.projekty-grid__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 80px;
		column-gap: 24px;
	}
	.projekty-grid__img-wrap { aspect-ratio: 660 / 560; }
}
.projekty-grid__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out-quart);
}
.projekty-grid__card-link:hover .projekty-grid__img { transform: scale(1.04); }
.projekty-grid__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	position: relative;
}
/* Underline handled globally via .projekty-grid__name background-image gradient pattern
   (see global CTA hover patterns above, fix-70/#23). Old ::after replaced. */
@media (max-width: 1023px) {
	.projekty-grid__name { background-size: 100% 1.5px; }
}

.projekty-grid__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
@media (min-width: 1024px) { .projekty-grid__more-wrap { margin-top: 120px; } }
.projekty-grid__more { /* uses .cta--load-more — already styled globally */ }
.projekty-grid__more.is-hidden { display: none; }

.projekty-grid__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
	margin-top: 30px;
}
@media (min-width: 1024px) { .projekty-grid__divider { margin-top: 90px; } }

/* Section 3: CSR head */
.projekty-csr-head { padding-block: 80px 0; }
@media (min-width: 1024px) { .projekty-csr-head { padding-block: 190px 0; /* Figma 74:4745 top=190 */ } }
.projekty-csr-head__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	padding-bottom: 40px;
}
@media (min-width: 1024px) {
	.projekty-csr-head__inner {
		display: grid;
		grid-template-columns: 1fr 1fr; /* LOAD-BEARING: see .projekty-intro__inner — paragraph anchored to 50% line. */
		align-items: end;
		gap: 0;
	}
	.projekty-csr-head__headline,
	.projekty-csr-head__text { justify-self: start; }
}
.projekty-csr-head__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	margin: 0;
	max-width: 457px;
}
@media (min-width: 1024px) { .projekty-csr-head__headline { font-size: 58px; } }
.projekty-csr-head__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	max-width: 546px;
}
.projekty-csr-head__text strong { font-weight: 500; }
.projekty-csr-head__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Section 4: CSR carousel */
.projekty-csr-carousel { padding-block: 88px 80px; }
@media (min-width: 1024px) { .projekty-csr-carousel { padding-block: 60px 80px; padding-top: 75px; } }
.projekty-csr-carousel__head {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 60px;
}
@media (min-width: 1024px) {
	.projekty-csr-carousel__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
/* Mobile per Figma 98:1591: head is row — text left (~237px), arrows right */
@media (max-width: 1023px) {
	.projekty-csr-carousel__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16px;
	}
	.projekty-csr-carousel__head .cta-arrows { display: inline-flex; }
}
.projekty-csr-carousel__intro {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	max-width: 345px;
}
@media (max-width: 1023px) {
	.projekty-csr-carousel__intro { max-width: 237px; }
	.projekty-csr-carousel__intro br { display: none; }
}
/* Duplicate arrow pair below the rail (client request — when a CSR card detail
   is expanded the user has already scrolled past the top arrows). Right-aligned
   to match the head layout above; same .cta-arrows primitive carries the styling. */
.projekty-csr-carousel__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
}
.projekty-csr-carousel__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
}
.projekty-csr-carousel__rail::-webkit-scrollbar { display: none; }
.projekty-csr-carousel__rail.is-dragging { cursor: grabbing; }
/* Match HP selected-projects carousel — snap-by-card on mobile with the snap
   origin shifted inward by 16px so the first card aligns to the page-content
   left (not the viewport edge). Snap omitted on desktop so the wider
   container-edge padding-left isn't stolen by the snap. */
@media (max-width: 1023px) {
	.projekty-csr-carousel__rail {
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--gutter);
	}
	.projekty-csr-carousel__card { scroll-snap-align: start; }
}
.projekty-csr-carousel__track {
	display: flex;
	gap: 24px;
	padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
	padding-right: 0; /* see .selected-projects__track — padding-right ignored by Chrome flex+overflow */
}
.projekty-csr-carousel__track::after {
	content: '';
	flex: 0 0 var(--gutter);
	margin-left: -24px; /* cancel flex gap before pseudo — see .selected-projects__track */
}
@media (min-width: 1024px) {
	.projekty-csr-carousel__track::after {
		flex-basis: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
	}
}
.projekty-csr-carousel__card {
	flex: 0 0 auto;
	/* Mobile: matches .selected-projects__card formula so HP + CSR carousels
	   render identical card widths on phones. card = viewport - 2*gutter - 24
	   (24 = peek of next card). At 390 viewport => ~334px. */
	width: calc(100vw - 2 * var(--gutter) - 24px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}
@media (min-width: 1024px) {
	.projekty-csr-carousel__card { width: 342px; max-width: none; }
}
.projekty-csr-carousel__img {
	width: 100%;
	aspect-ratio: 342 / 420;
	overflow: hidden;
	background: var(--land); /* fallback while image loads */
}
.projekty-csr-carousel__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.projekty-csr-carousel__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.projekty-csr-carousel__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.projekty-csr-carousel__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.24;
	margin: 0;
}
.projekty-csr-carousel__sub {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: rgba(0,67,70,0.6); /* LAND at 60% per Figma 74:5371 */
	margin: 0;
}
.projekty-csr-carousel__toggle .projekty-csr-carousel__toggle-label--less,
.projekty-csr-carousel__card.is-expanded .projekty-csr-carousel__toggle .projekty-csr-carousel__toggle-label--more { display: none; }
.projekty-csr-carousel__card.is-expanded .projekty-csr-carousel__toggle .projekty-csr-carousel__toggle-label--less { display: inline; }
.projekty-csr-carousel__card.is-expanded .projekty-csr-carousel__toggle .cta__chevron { transform: rotate(180deg); }
.projekty-csr-carousel__toggle .cta__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--dur-base) var(--ease-out-quart);
}
.projekty-csr-carousel__desc {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
}

/* Section 5: O nás */
.projekty-onas { padding-block: 100px 80px; }
@media (min-width: 1024px) { .projekty-onas { padding-block: 100px 80px; } }
.projekty-onas__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}
@media (min-width: 1024px) {
	.projekty-onas__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 30px; /* preserve pre-mobile-fix desktop value */
	}
}
.projekty-onas__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 100%;
}
@media (min-width: 1024px) { .projekty-onas__text { max-width: 764px; } }
.projekty-onas__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.projekty-onas__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
	max-width: 675px;
}
@media (min-width: 1024px) { .projekty-onas__headline { font-size: 28px; } }

/* =========================================================
   Project detail page (Figma 106:6160 desktop / 108:6778 mobile)
   ========================================================= */

.project-intro,
.project-hero,
.project-about,
.project-gallery,
.project-carousel,
.project-next {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
}

/* Section 1: Intro — headline + meta row + divider */
.project-intro { padding-block: 224px 0; } /* Mobile per Figma 108:7005 headline y=224 */
@media (min-width: 1024px) { .project-intro { padding-block: calc(var(--header-h) + 80px) 0; } }
@media (min-width: 1024px) { .project-intro { padding-block: calc(var(--header-h) + 198px) 0; /* Figma desktop 270 - 72 header */ } }
.project-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	padding-bottom: 44px;
}
@media (min-width: 1024px) { .project-intro__inner { gap: 30px; padding-bottom: 40px; } }
.project-intro__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px; /* H1 token — Figma 106:6357 cap-height ~35 matches 42px Display Regular */
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) { .project-intro__headline { max-width: 880px; } }

/* Utility: line break only on desktop. Inserted via PHP map per project (see
   functions.php → czs_project_headline_map) to control intro H1 wrap precisely.
   On mobile the <br> collapses to inline → text reflows naturally. */
.br-desktop { display: none; }
@media (min-width: 1024px) { .br-desktop { display: inline; } }
.project-intro__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}
@media (min-width: 1024px) {
	/* 50/50 grid like the projekty intro/CSR head: pill 1 in col 1 (left
	   anchor at container edge), pill 2 in col 2 (left edge anchored to the
	   page centerline), CTA in col 2 (right anchor = container right edge).
	   pill 2 + CTA share the same cell; justify-self pulls them to opposite
	   sides of col 2. */
	.project-intro__meta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 0;
	}
}
.project-intro__pills {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
@media (min-width: 1024px) {
	.project-intro__pills { display: contents; } /* flatten so each pill is a direct grid item of __meta */
	.project-intro__pill:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: start; }
	.project-intro__pill:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: start; }
	.project-intro__next             { grid-column: 2; grid-row: 1; justify-self: end; }
}
/* Mobile per Figma 108:7005: type pill alone on row 1; location pill + Ďalší
   projekt CTA inline on row 2 (space-between). `display: contents` flattens
   the .project-intro__pills wrapper so each pill becomes a grid item of meta. */
@media (max-width: 1023px) {
	.project-intro__meta {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 16px;
		row-gap: 16px;
	}
	.project-intro__pills { display: contents; }
	.project-intro__pill:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
	.project-intro__pill:nth-child(2) { grid-column: 1; grid-row: 2; align-self: center; }
	.project-intro__next { grid-column: 2; grid-row: 2; align-self: center; }
}
.project-intro__pill {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: var(--land);
	margin: 0;
	position: relative;
}
.project-intro__divider {
	display: none; /* hidden on both viewports (mobile + desktop) */
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Section 2: Hero image — full-width within container */
.project-hero { padding-block: 0; }
.project-hero__figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 1440 / 680;
	overflow: hidden;
	background: var(--land);
}
/* LOAD-BEARING: full-bleed edge-to-edge on ALL widths — Figma comment #66
   (desktop 106:6350 x=0 w=1440) + mobile 108:6980. Container padding reset
   on .project-hero only; rest of page-project.php uses normal gutter. */
.project-hero .container { padding-inline: 0; max-width: none; }
@media (max-width: 767px) {
	.project-hero__figure { aspect-ratio: 358 / 720; } /* portrait mobile variant */
}
.project-hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Section 3: About — POPIS+keypoints+back | intro+meta table */
.project-about { padding-block: 100px 70px; }
@media (min-width: 1024px) { .project-about { padding-block: 100px 100px; /* Figma 108:6671 y=100 */ } }
.project-about__inner {
	display: flex;
	flex-direction: column;
	gap: 100px;
}
/* Per Figma 108:7111: mobile reading order is intro + meta table FIRST, POPIS +
   keypoints + back CTA AFTER. Live markup has aside before main; flex order
   reverses the visual order without touching the DOM/SEO. */
@media (max-width: 1023px) {
	.project-about__main { order: 1; }
	.project-about__side { order: 2; }
}
/* side-bottom wrapper: base = flex column (desktop layout); mobile makes it transparent so side flex still spaces uniformly */
.project-about__side-bottom {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
@media (max-width: 1023px) {
	.project-about__side-bottom { display: contents; }
}
@media (min-width: 1024px) {
	.project-about__inner {
		display: grid;
		/* #50: minmax so columns shrink at narrow desktop (iPad Pro 1024) instead
		   of overflowing the container (was 343 + 660 + 60 gap = 1063 > 928 avail). */
		grid-template-columns: minmax(0, 343px) minmax(0, 660px);
		grid-template-rows: auto auto;
		column-gap: 60px;
		row-gap: 120px;
		justify-content: space-between;
		align-items: start;
	}
	/* Flatten side + main wrappers so their children become direct grid items */
	.project-about__side,
	.project-about__main { display: contents; }
	.project-about__desc        { grid-column: 1; grid-row: 1; }
	.project-about__intro       { grid-column: 2; grid-row: 1; }
	.project-about__side-bottom { grid-column: 1; grid-row: 2; align-self: stretch; justify-content: space-between; }
	.project-about__meta        { grid-column: 2; grid-row: 2; }
}
.project-about__side {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
@media (min-width: 1024px) {
	.project-about__side {
		width: 343px;
		flex: 0 0 343px;
		justify-content: space-between;
		gap: 30px; /* preserve pre-mobile-fix desktop value */
	}
}
.project-about__desc {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.project-about__desc-eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.project-about__desc-body {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.project-about__keypoints {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 326px;
}
.project-about__keypoint {
	position: relative;
	font-family: var(--font-display); /* Figma comments #73 + #74 — Display Regular 20px */
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	padding-left: 28px;
}
.project-about__keypoint::before {
	content: '';
	position: absolute;
	left: 0;
	/* Center the 10×10 square on the first line. Math centerline is 8px
	   ((26 − 10) / 2) but Display glyphs sit slightly above the line-box
	   midpoint, so 7px aligns the square visually with the cap-height. */
	top: 7px;
	width: 10px;
	height: 10px;
	background: var(--land);
}
.project-about__back .project-about__back-icon { transform: scaleX(-1); }
@media (max-width: 1023px) {
	.project-about__back { align-self: flex-end; }
}
@media (min-width: 1024px) {
	.project-about__back { align-self: flex-start; }
}

.project-about__main {
	display: flex;
	flex-direction: column;
	gap: 100px;
}
@media (min-width: 1024px) {
	.project-about__main {
		width: 660px;
		flex: 0 0 660px;
		gap: 120px;
	}
}
/* Desktop 2×2 grid layout for project-about — declared AFTER base side/main rules
   so display: contents wins over base display: flex. Without this trailing override
   the source-order resolution gives display: flex to side/main on desktop. */
@media (min-width: 1024px) {
	.project-about__side,
	.project-about__main { display: contents; }
}
.project-about__intro {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px; /* Figma 108:7133 (mobile) + 108:6597 (desktop) — both 28px Display Regular */
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) { .project-about__intro { max-width: 660px; } }

.project-about__meta {
	display: flex;
	flex-direction: column;
	margin: 0;
}
.project-about__meta-row {
	display: grid;
	grid-template-columns: 114px 1fr;
	column-gap: 0;
	padding-block: 20px;
	border-top: 1.5px solid var(--pulse);
}
.project-about__meta-row:last-child {
	border-bottom: 1.5px solid var(--pulse);
}
@media (min-width: 1024px) {
	.project-about__meta-row { grid-template-columns: 228px 1fr; }
}
/* Per Figma 108:6620 (mobile detail meta): Display Medium 16px uppercase, line-height 1.3.
   Desktop matches (no separate size). */
.project-about__meta-label {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}
/* Per Figma 108:6621 (mobile detail meta value):
   - Plain text values (Typ / Poloha / Stav): Text LIGHT 300, 16px, line-height 1.3
   - Web link only: Text MEDIUM 500, no underline, hover opacity 0.6 */
.project-about__meta-value {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.project-about__meta-value a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}
.project-about__meta-value a:hover,
.project-about__meta-value a:focus-visible { opacity: 0.6; }

/* Section 4: Gallery (3 stacked) */
.project-gallery { padding-block: 0 50px; margin-bottom: 0; }
@media (min-width: 1024px) { .project-gallery { padding-block: 0 50px; /* margin-bottom: 0 inherits from base */ } }
.project-gallery .container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.project-gallery__figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 1344 / 680;
	overflow: hidden;
	background: var(--land);
}
@media (max-width: 1023px) { .project-gallery__figure { aspect-ratio: 358 / 680; } }
/* iPad Mini / Air 11" portrait (768–1023): revert to desktop landscape aspect
   so the gallery figure isn't a tall portrait strip on tablet. PHP <source>
   media query also restricted to <768 so the desktop image variant is the
   one served — landscape aspect + landscape image = correct framing. */
@media (min-width: 768px) and (max-width: 1023px) {
	.project-gallery__figure { aspect-ratio: 1344 / 680; }
}
.project-gallery__figure img,
.project-gallery__figure picture { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Section 5: Image carousel (4 slides 774×560 desktop, scroll horiz) */
.project-carousel { padding-block: 0 130px; }
@media (min-width: 1024px) { .project-carousel { padding-block: 0 147px; } }
.project-carousel__head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 36px;
}
@media (max-width: 1023px) {
	.project-carousel__head {
		height: 100px;
		margin-bottom: 0;
		align-items: center;
	}
}
@media (min-width: 1024px) {
	.project-carousel__head {
		height: 132px;
		margin-bottom: 0;
		align-items: center;
	}
}
.project-carousel__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	user-select: none;
}
.project-carousel__rail::-webkit-scrollbar { display: none; }
.project-carousel__rail.is-dragging { cursor: grabbing; }
.project-carousel__track {
	display: flex;
	gap: 24px;
	padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
	padding-right: 0; /* see .selected-projects__track — padding-right ignored by Chrome flex+overflow */
}
.project-carousel__track::after {
	content: '';
	flex: 0 0 var(--gutter);
	margin-left: -24px; /* cancel flex gap before pseudo — see .selected-projects__track */
}
@media (min-width: 1024px) {
	.project-carousel__track::after {
		flex-basis: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
	}
}
.project-carousel__slide {
	flex: 0 0 auto;
	margin: 0;
	width: 330px; /* Mobile per Figma — 330px slide on 390 viewport leaves 60px (gutter + peek) */
	aspect-ratio: 330 / 280;
	overflow: hidden;
	background: var(--land);
}
@media (min-width: 1024px) {
	.project-carousel__slide { width: 774px; max-width: none; aspect-ratio: 774 / 560; }
}
.project-carousel__slide img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Section 6: Next project (Figma 108:6700) — PULSE background, LAND text/CTA.
   The preview image is MASKED with the CZ Slovakia symbol logo shape (angular Z mark).
   The mask scales from 0.3 to 1 when the section enters view (Figma annotation: "symbol
   sa zväčší do default polohy"). */
.project-next { background: var(--pulse); color: var(--land); padding-block: 80px; }
@media (min-width: 1024px) { .project-next { padding-block: 53px; } }
/* Mobile: full-viewport section with preview centered absolutely (independent of label/cta flow) */
@media (max-width: 1023px) {
	.project-next {
		min-height: 100lvh;
		padding-block: 92px 80px;
		position: relative;
	}
	.project-next__preview {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
/* Mobile (Figma 110:7399): label → CTA → image, label+CTA left-aligned with 31px gap between,
   ~100px gap before image. */
.project-next__inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"cta"
		"preview";
	row-gap: 0;
	align-items: center;
	justify-items: start;
}
.project-next__inner > .project-next__label { margin-bottom: 31px; }
.project-next__inner > .project-next__cta   { margin-bottom: 130px; }
@media (min-width: 1024px) {
	/* Layout per Figma 108:6700: label right-aligned in left col, image center, CTA left-aligned in right col.
	   Symmetric around image. align-items: center vertically aligns all three on the same horizontal axis. */
	.project-next__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "label preview cta";
		align-items: center;
		row-gap: 0;
		column-gap: 60px;
		justify-items: stretch;
	}
	/* Reset mobile vertical spacing on desktop where layout is row, not column */
	.project-next__inner > .project-next__label,
	.project-next__inner > .project-next__cta { margin-bottom: 0; }
}
.project-next__label {
	grid-area: label;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.25;
	color: var(--land);
	margin: 0;
}
@media (min-width: 1024px) {
	.project-next__label { font-size: 42px; max-width: 250px; justify-self: end; text-align: right; }
}
.project-next__preview {
	grid-area: preview;
	display: block;
	width: 340px;
	max-width: 90vw;
	aspect-ratio: 340 / 374;
	/* Mobile-only override: Figma 110:7391 = 191.25 × 210.375 */
	/* CZ Slovakia symbol logo as a mask — image only shows inside the symbol silhouette.
	   Per Figma annotation "symbol (nie fotka) sa zväčší": animate MASK-SIZE only.
	   Image stays at full size; the mask shape grows from 83.3% → 100% revealing more of the photo. */
	-webkit-mask-image: url('../img/cz-symbol-mask.svg');
	        mask-image: url('../img/cz-symbol-mask.svg');
	-webkit-mask-size: 83.3%;
	        mask-size: 83.3%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	transition: -webkit-mask-size 900ms var(--ease-out-quart),
				mask-size 900ms var(--ease-out-quart);
}
.project-next__preview.is-revealed {
	-webkit-mask-size: 100%;
	        mask-size: 100%;
}
@media (max-width: 1023px) {
	.project-next__preview {
		width: 191px;
		aspect-ratio: 191 / 210;
		justify-self: center;
	}
}
.project-next__preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Image is the CTA; CTA button hover is independent (per Figma annotation: hover na fotke nezvyrazňuje button) */
.project-next__cta {
	grid-area: cta;
	color: var(--land);
	align-self: center; /* overrides global .cta { align-self: flex-start } so it aligns with image center */
}
@media (min-width: 1024px) { .project-next__cta { justify-self: start; /* sits at left of right col, close to image — matches Figma 108:6703 */ } }

/* =========================================================
   O nás page (Figma 60:1236 desktop / 62:2309 mobile)
   ========================================================= */

.onas-intro,
.onas-hero,
.onas-body,
.onas-milniky,
.onas-projekty-anim,
.onas-hodnoty {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
}

/* Section 1: Intro */
.onas-intro { padding-block: calc(var(--header-h) + 80px) 0; }
@media (min-width: 1024px) { .onas-intro { padding-block: calc(var(--header-h) + 190px) 0; } }
.onas-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding-bottom: 30px;
}
@media (min-width: 1024px) {
	.onas-intro__inner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 60px;
	}
}
.onas-intro__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	margin: 0;
	max-width: 457px;
}
@media (min-width: 1024px) { .onas-intro__headline { font-size: 64px; } }
.onas-intro__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
	max-width: 504px;
}
@media (min-width: 1024px) { .onas-intro__text { font-size: 20px; } }
.onas-intro__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Section 2: Hero image */
.onas-hero { padding-block: 0; }
.onas-hero__figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 1344 / 680;
	overflow: hidden;
	background: var(--land);
}
@media (max-width: 1023px) { .onas-hero__figure { aspect-ratio: 358 / 460; } }
.onas-hero__figure img,
.onas-hero__figure picture { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Section 3: Body + Stats */
.onas-body { padding-block: 80px; }
@media (min-width: 1024px) { .onas-body { padding-block: 100px 50px; } }
.onas-body__top {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 60px;
}
@media (min-width: 1024px) {
	.onas-body__top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 60px;
		margin-bottom: 100px;
	}
}
.onas-body__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1024px) { .onas-body__left { width: 343px; flex: 0 0 343px; } }
.onas-body__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.onas-body__lead {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.onas-body__right {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 1024px) {
	/* Figma 60:1499: width=660 at 1440 viewport, font Display Regular 42px / line-height 1.25, LAND.
	   Per #50: 0 1 lets right column shrink at narrow desktop (iPad Pro 1024). */
	.onas-body__right { flex: 0 1 660px; min-width: 0; font-size: 42px; line-height: 1.25; }
}
/* iPad Mini / Air 11" portrait (768–1023): replicate the desktop side-by-side
   layout — left (343 fixed) holds eyebrow + lead text, right takes the
   remaining ~317px with the cascade-words statement. Statement font scales
   down to 32px instead of desktop's 42 so it doesn't break into 6+ thin
   lines in the narrower right column. Pure mobile (<768) keeps the column
   stack. */
@media (min-width: 768px) and (max-width: 1023px) {
	.onas-body { padding-block: 100px 50px; }
	.onas-body__top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 60px;
		margin-bottom: 100px;
	}
	.onas-body__left { width: 343px; flex: 0 0 343px; }
	.onas-body__right { flex: 0 1 660px; min-width: 0; font-size: 32px; line-height: 1.25; }
}
.onas-body__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 1024px) {
	.onas-body__stats { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
/* iPad Mini / Air 11" portrait (768–1023): 2×2 grid for stat boxes — 4-in-a-row
   at 768 left each box ~158px wide where "3,5 mil. m²" at the mobile 42px font
   overflowed the right edge. 2-col grid gives each box ~348px (gap 24) — plenty
   of room for value + label at their default sizes (no padding/font scaling
   needed, layout matches mobile semantics with 2 boxes per row). */
@media (min-width: 768px) and (max-width: 1023px) {
	.onas-body__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
/* Per Figma 60:1500: 4 boxes of 318×256, PULSE border, transparent fill. Label at top
   (text-light 16), value at bottom (display-rg ~55). Padding 30 inside. */
.onas-body__stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
	background: transparent;
	border: 1.5px solid var(--pulse);
	border-radius: 0;
	padding: 30px;
	min-height: 180px; /* Mobile per Figma 63:2564 (358×180) */
}
@media (min-width: 1024px) { .onas-body__stat { height: 256px; min-height: 256px; } }
.onas-body__stat-label {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
/* Per-stat label widths matched from Figma text frames so line breaks match the design. */
@media (min-width: 1024px) {
	.onas-body__stat:nth-child(1) .onas-body__stat-label,
	.onas-body__stat:nth-child(2) .onas-body__stat-label { max-width: 147px; }
	.onas-body__stat:nth-child(3) .onas-body__stat-label { max-width: 167px; }
	.onas-body__stat:nth-child(4) .onas-body__stat-label { max-width: 240px; }
}
.onas-body__stat-value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px; /* Mobile per Figma 63:2567 (Display Regular 42) */
	line-height: 1;
	margin: 0;
	white-space: nowrap;
	/* Figma comment #72: tabular-nums vytváralo veľké medzery medzi číslicami
	   ("1" so šírkou 0/8 atď.). Designer chce default proporcionálny font podľa
	   Figmy. Counter animácia môže mierne meniť šírku boxu — akceptované. */
	font-variant-numeric: normal;
	font-feature-settings: normal;
}
@media (min-width: 1024px) { .onas-body__stat-value { font-size: 55px; } }

/* Section 4: Milestones */
.onas-milniky { padding-block: 80px; }
@media (min-width: 1024px) { .onas-milniky { padding-block: 100px; } }
.onas-milniky__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 60px;
}
@media (min-width: 1024px) { .onas-milniky__head { margin-bottom: 140px; } }
.onas-milniky__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.onas-milniky__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px; /* Mobile per Figma 63:2668 (Display Regular 28 / lh 1.25) */
	line-height: 1.25;
	margin: 0;
	max-width: 800px;
}
@media (min-width: 1024px) { .onas-milniky__headline { font-size: 42px; } }
.onas-milniky__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
@media (min-width: 1024px) {
	/* Figma 60:1771 within 60:1773 (1344 container): list x=426 w=918 → 918/1344 = 68.3% wide,
	   right-aligned (right edge meets container right edge). */
	.onas-milniky__list {
		width: 68.3%;
		margin-left: auto;
	}
}
.onas-milniky__item {
	position: relative;
	display: grid;
	/* Mobile per Figma 63:2843: mark col 20, gap 10, content takes the rest. Year sits
	   top-right INSIDE the content column (row 1, span 2). Desc spans both content cols
	   on row 2. */
	grid-template-columns: 20px minmax(0, 1fr) 70px;
	column-gap: 10px;
	padding: 25px 0;
	transition: padding 350ms var(--ease-out-quart);
}
/* Divider is OFFSET past the mark column on mobile so the line starts where the text
   does. On desktop the line spans full width. ::before lets us control the inset
   independently of the mark cell. */
.onas-milniky__item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 30px; /* mark col 20 + column-gap 10 */
	right: 0;
	height: 1.5px;
	background: var(--pulse);
}
.onas-milniky__list .onas-milniky__item:last-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30px;
	right: 0;
	height: 1.5px;
	background: var(--pulse);
}
@media (min-width: 1024px) {
	/* Per Figma comment #30: text has no left padding inside the row — title starts
	   at column 1 (left=0). The hover mark is absolute, poking out to the LEFT
	   beyond the row, not occupying a grid column. */
	.onas-milniky__item {
		grid-template-columns: 342px minmax(0, 1fr) 111px;
		column-gap: 0;
	}
	.onas-milniky__item::before { left: 0; }
	.onas-milniky__list .onas-milniky__item:last-child::after { left: 0; }
}
.onas-milniky__mark {
	grid-column: 1;
	/* Aligned with the title's cap-height (≈ first line of text) so the mark sits at the
	   same baseline as the title regardless of whether desc wraps to multiple lines.
	   margin-top 0.1em on mobile keeps the mark visually flush with the 16px title
	   cap-height (user feedback on first #30 mobile pass). */
	align-self: start;
	margin-top: 0.1em;
	width: 8px;
	height: 8px;
	background: var(--land);
	opacity: 0;
	transform: translateX(-8px);
	/* LOAD-BEARING: no transition — Figma comment #65. Square (štvorček) was
	   fading in on hover/scroll-in, designer perceived this as ghost. Instant. */
}
@media (min-width: 1024px) {
	/* Desktop: mark sticks out to the LEFT of the row (Figma comment #30).
	   Take it out of grid flow with position:absolute, anchored to the row's left edge
	   at a negative offset so it visually pokes outside the row's content area.
	   `top` lines the mark up with the title's first text line: item padding-top is
	   25px, +3px aligns to cap-height of 16px Display Medium. */
	.onas-milniky__mark {
		position: absolute;
		left: -28px; /* 12px mark + 16px gap to title's first glyph */
		top: 28px;
		width: 12px;
		height: 12px;
		margin-top: 0;
	}
}
/* Figma comment #37: on touch devices the :hover state would stick after a finger
   tap and conflict with the JS viewport-center tracking. Restrict hover styling
   to desktop viewport + hover-capable devices. Mobile uses only `.is-active`. */
.onas-milniky__item.is-active .onas-milniky__mark {
	opacity: 1;
	transform: translateX(0);
}
@media (min-width: 1024px) and (hover: hover) {
	.onas-milniky__item:hover .onas-milniky__mark {
		opacity: 1;
		transform: translateX(0);
	}
}
.onas-milniky__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	grid-column: 2;
	grid-row: 1;
}
.onas-milniky__desc {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 16px 0 0;
	grid-column: 2 / span 2;
	grid-row: 2;
}
@media (max-width: 1023px) {
	.onas-milniky__desc { max-width: 80%; }
}
@media (min-width: 1024px) {
	/* Desktop grid (post-#30): col 1 = title 342, col 2 = desc 1fr, col 3 = year 111.
	   Mark is absolute, outside the grid. */
	.onas-milniky__title { grid-column: 1; }
	.onas-milniky__desc  { grid-column: 2; grid-row: 1; margin: 0; }
}
.onas-milniky__year {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	grid-column: 3;
	grid-row: 1;
	text-align: right;
}
@media (min-width: 1024px) {
	.onas-milniky__year { grid-column: 3; text-align: right; }
}

/* Section 5: Projekty image animation — PULSE bg per Figma 62:2068, headline UPPERCASE */
.onas-projekty-anim {
	background: var(--pulse);
	min-height: 100lvh;
	padding-block: 80px;
}
/* Mobile: stack content top-aligned, push CTA to bottom-right of viewport
   (Figma 63:2849 — Naše projekty Main_CTA at x=255, y=766 within 390×844 frame). */
@media (max-width: 1023px) {
	.onas-projekty-anim .container {
		display: flex;
		flex-direction: column;
		min-height: calc(100lvh - 160px); /* section padding-block 80px × 2 */
	}
	.onas-projekty-anim__cta {
		margin-top: auto;
		align-self: flex-end;
	}
}
@media (min-width: 1024px) {
	.onas-projekty-anim { padding-block: 60px 80px; }
	/* Per Figma 62:1810: section fills the viewport, 3-column grid with image centered in
	   col 2, headline vertically centered in col 1, CTA horizontally centered in col 3.
	   Eyebrow sits at the top of col 1 (row 1) so it doesn't push the headline. */
	.onas-projekty-anim .container {
		min-height: calc(100lvh - 60px - 80px);
		display: grid;
		/* minmax(0, 1fr) so each column shrinks to an equal third regardless of intrinsic
		   content width (otherwise the long "Z KÚSKU ZEME VYTVÁRAME" headline blows col 1
		   out via its max-content baseline). */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: center;
		gap: 0 60px;
	}
}
.onas-projekty-anim__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0 0 24px;
	color: var(--land);
}
@media (min-width: 1024px) {
	.onas-projekty-anim__eyebrow { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
}
/* Per Figma 62:1811: Display Medium 28px, line-height 1.25, uppercase. */
.onas-projekty-anim__headline {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 26px; /* Mobile per Figma 63:2847 (Display Medium 26 UPPERCASE) */
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--land);
	margin: 0 0 60px;
}
@media (min-width: 1024px) {
	.onas-projekty-anim__headline {
		font-size: 28px;
		max-width: none;
		margin: 0;
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}
}
/* Forced one-line-per-segment only on desktop. Mobile lets each segment wrap naturally
   so it doesn't blow past the 390px viewport. */
@media (min-width: 1024px) {
	.onas-projekty-anim__headline-line { white-space: nowrap; }
}
/* iPad Pro 12.9" portrait (1024px) — the 3-col grid is 269/269/269 with 60px gap, so
   col 1 (~269px) is far narrower than line 1's nowrap intrinsic width (~350px at 28px
   Display Medium). The text overflowed col 1 and landed under the centered image
   canvas in col 2. Revert the desktop nowrap so each segment wraps inside its own
   column. Line 1 naturally splits ("Z KÚSKU ZEME" + "VYTVÁRAME"), line 2 stays one
   line ("HODNOTNÉ MIESTA"). Above 1280 desktop nowrap remains in force. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.onas-projekty-anim__headline-line { white-space: normal; }
}
/* Image stage: fixed at Figma 62:1860 image size (490×420) on desktop so the photo
   always occupies its natural canvas — only the mask sizes the visible portion.
   Mobile keeps the previous compact 191×210 layout (Figma 63:2854). */
.onas-projekty-anim__image {
	position: relative;
	width: 191px;
	aspect-ratio: 191 / 210;
	margin-inline: auto;
	margin-block: 32px;
	-webkit-mask-image: url('../img/cz-symbol-mask.svg');
	        mask-image: url('../img/cz-symbol-mask.svg');
	-webkit-mask-size: 0 0;
	        mask-size: 0 0;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	transition: -webkit-mask-size 900ms var(--ease-out-quart), mask-size 900ms var(--ease-out-quart);
}
@media (min-width: 1024px) {
	/* Element holds the full 490×420 image canvas even though only the masked
	   portion (255 / 306 on hover) is visible — the transparent surround can
	   overlap neighbours invisibly since they're outside the mask. */
	.onas-projekty-anim__image {
		width: 490px;
		aspect-ratio: 490 / 420;
		max-width: none;
	}
}
/* Reveal animation: mask grows from 0 to the default Figma size when the stage
   enters the viewport (per #14 spec). Desktop default = 255×280 (Figma 62:1853);
   mobile keeps the section filling 100% of the smaller stage. */
.onas-projekty-anim__image.is-revealed {
	-webkit-mask-size: 100%;
	        mask-size: 100%;
}
@media (min-width: 1024px) {
	.onas-projekty-anim__image.is-revealed {
		-webkit-mask-size: 255px 280.5px;
		        mask-size: 255px 280.5px;
	}
	/* Hover scales the mask 1.2× to Figma 62:1860 hover spec (306 × 336.6) while
	   the underlying image stays at its full 490×420 canvas — feels like the mask
	   "zooms in" on the same photo. Gated to true hover devices so touch taps
	   don't get stuck in the hover state. */
	@media (hover: hover) {
		.onas-projekty-anim__image.is-revealed:hover {
			-webkit-mask-size: 306px 336.6px;
			        mask-size: 306px 336.6px;
		}
	}
	.onas-projekty-anim__image.is-revealed {
		transition: -webkit-mask-size 380ms var(--ease-out-quart), mask-size 380ms var(--ease-out-quart);
	}
}
/* Layer swap: true cross-fade — outgoing and incoming both transition over the
   same 400ms window with no delay. At mid-transition both layers sit at ~0.5
   opacity and blend together, so the PULSE background never shows through.
   Layers are <a> wrappers around <img>; only the active one is clickable
   (pointer-events) so the user can't accidentally click through to a hidden
   project. */
.onas-projekty-anim__layer {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--ease-in-out);
}
.onas-projekty-anim__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.onas-projekty-anim__layer.is-active {
	opacity: 1;
	pointer-events: auto;
}
.onas-projekty-anim__cta {
	display: inline-flex;
}
@media (min-width: 1024px) {
	.onas-projekty-anim__image { grid-column: 2; grid-row: 1 / 3; margin: 0; justify-self: center; align-self: center; }
	.onas-projekty-anim__cta   { grid-column: 3; grid-row: 1 / 3; justify-self: center; align-self: center; }
}

/* Section 6: Hodnoty (hover values + Kontaktujte nás) */
.onas-hodnoty { padding-block: 80px 0; }
@media (min-width: 1024px) { .onas-hodnoty { padding-block: 100px 0; } }
.onas-hodnoty__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 40px;
	max-width: 800px;
}
.onas-hodnoty__eyebrow {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
/* Per Figma 62:1920 (verified for desktop in comment #11): Text Light 16 / lh 1.3
   on BOTH viewports — subhead, not a display heading. */
.onas-hodnoty__headline {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}
.onas-hodnoty__row {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
@media (min-width: 1024px) {
	/* Image 660 + flexible gap (Figma: 137 at 1440 viewport) + list 498. Per #50,
	   gap scales with viewport so we don't overflow at iPad Pro 1024 portrait
	   (sum at full sizes would be 1295 vs 928 available). */
	.onas-hodnoty__row {
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		gap: clamp(40px, 8vw, 137px);
	}
}
/* iPad Mini / Air 11" portrait (768–1023): same row layout as desktop —
   image on the left, accordion list on the right. Image basis 660 + list
   basis 498 both flex-shrink to fit the ~720px container at 768; gap kept
   modest at 32px so both elements have breathing room. */
@media (min-width: 768px) and (max-width: 1023px) {
	.onas-hodnoty__row {
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		gap: 32px;
	}
	.onas-hodnoty__image { width: 660px; flex: 0 1 660px; min-width: 0; }
	.onas-hodnoty__list { width: 498px; flex: 0 1 498px; min-width: 0; align-self: flex-start; }
}
.onas-hodnoty__image {
	position: relative;
	width: 100%;
	aspect-ratio: 660 / 560;
	overflow: hidden;
	background: var(--land);
}
@media (min-width: 1024px) { .onas-hodnoty__image { width: 660px; flex: 0 1 660px; min-width: 0; } /* #50 shrink at narrow desktop */ }
.onas-hodnoty__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* LOAD-BEARING: no transition — Figma comment #65. Cross-fade created a
	   "ghost" frame where two layers overlapped at ~50% opacity. Instant swap. */
}
.onas-hodnoty__layer.is-active { opacity: 1; }
.onas-hodnoty__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 1024px) {
	.onas-hodnoty__list { width: 498px; flex: 0 1 498px; min-width: 0; align-self: flex-start; } /* #50 shrink at narrow desktop */
}
/* Default Figma 62:1969: rows tight, vertical step ≈ 82px = font 52 + 30 gap.
   With line-height 1 the text box is font-size; padding-block 15px gives 30px between titles. */
.onas-hodnoty__item {
	padding-block: 8px;
}
@media (min-width: 1024px) {
	.onas-hodnoty__item { padding-block: 15px; }
}
.onas-hodnoty__trigger {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px; /* Mobile per Figma 65:2993 (Display Regular 42) */
	line-height: 1;
	color: var(--land);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	opacity: 0.35;
	transition: opacity 280ms var(--ease-out-quart);
}
@media (min-width: 1024px) { .onas-hodnoty__trigger { font-size: 52px; } }
.onas-hodnoty__trigger:hover,
.onas-hodnoty__trigger[aria-pressed="true"] { opacity: 1; }

/* Accordion description body — collapsed by default, expands when sibling trigger is active.
   Per Figma 62:1971/62:2001 — description appears under active value title only. */
.onas-hodnoty__desc {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--land);
	margin: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	/* Figma #15 followup: animate `height` (not max-height) to the exact
	   --natural-h value JS wrote (the MAX content height across all 4 descs).
	   That guarantees every active desc renders at the same height regardless
	   of how many lines its actual text wraps to — items below don't shift
	   when switching between e.g. 3-line Tradícia and 4-line Rešpekt. */
	transition:
		height     600ms cubic-bezier(.22, 1, .36, 1),
		opacity    320ms var(--ease-out-quart) 100ms,
		margin-top 600ms cubic-bezier(.22, 1, .36, 1);
}
.onas-hodnoty__trigger[aria-pressed="true"] + .onas-hodnoty__desc {
	height: var(--natural-h, 320px);
	opacity: 1;
	margin-top: 12px;
}
@media (min-width: 1024px) {
	.onas-hodnoty__desc { max-width: 420px; }
}

/* Kontaktujte nás sub-block at bottom of section 6 */
/* Container padding for o-nas hodnoty section's kontakt block (the .contact-block
   markup is inside a .container child of .onas-hodnoty). */
.onas-hodnoty > .container:last-child { padding-block: 60px 80px; }
@media (min-width: 1024px) {
	.onas-hodnoty > .container:last-child { padding-block: 100px 80px; }
}

/* =========================================================
   Placeholder sections (legacy — kept until all sections built)
   ========================================================= */

.placeholder-section {
	background: var(--pure);
	color: var(--land);
	padding-block: 80px;
	border-top: 1px solid rgba(0,67,70,0.15);
}
@media (min-width: 1024px) {
	.placeholder-section { padding-block: 100px; }
}
.placeholder-section__eyebrow { color: var(--land); margin-bottom: 24px; }
.placeholder-section__headline { max-width: 640px; }
.placeholder-section__todo {
	margin-top: 40px;
	font-family: monospace;
	font-size: 13px;
	opacity: 0.55;
	background: rgba(0,67,70,0.05);
	padding: 12px 16px;
	border-radius: 4px;
}

/* =========================================================
   Site footer (Figma 1:189 desktop 440 / 15:820 mobile 640)
   Behavior: position:fixed bottom; white sections (z=3) cover it during normal scroll;
   body padding-bottom = footer height extends scroll so footer can be revealed.
   ========================================================= */

:root {
	/* Initial fallback values until JS measures actual footer height on load.
	   Body padding-bottom must equal footer height so the reveal pattern aligns. */
	--footer-h: 640px;
}

html { background: var(--land); } /* fills the body-padding gap behind footer for seamless reveal */
body { padding-bottom: var(--footer-h); }

.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	/* height: auto — sized by content + padding. JS reads offsetHeight and updates --footer-h
	   so body padding-bottom stays in sync. */
	background: var(--land);
	color: var(--pulse);
	z-index: 0;
}

/* On very narrow phones the footer subnav wraps to vertical stack (see subnav
   media queries above). The resulting footer height (~600px+) is taller than
   short viewports (iPhone SE 667, small Androids 640). With `position: fixed`
   users can't see the top part of the footer — it's cut off at viewport top.
   Switch to `position: relative` in the same viewport ranges → footer flows
   at the natural bottom of the page. Reveal pattern isn't needed here because
   there's no room to reveal anyway. */
@media (max-width: 429px) {
	.site-footer { position: relative; z-index: auto; }
	body { padding-bottom: 0; }
}
@media (min-width: 430px) and (max-width: 449px) {
	html:lang(hu) .site-footer { position: relative; z-index: auto; }
	html:lang(hu) body { padding-bottom: 0; }
}

.site-footer__inner {
	position: relative;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: 50px; /* Figma: 50 top, 50 bottom — both mobile (15:820) and desktop (1:189) */
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Desktop: 2×2 grid (brand top-left, contact top-right, logo bottom-left, legal bottom-right).
   No absolute positioning — content-based height with row-gap controlling vertical spacing.
   Right column items use justify-self: end so they push to the right at any viewport width. */
@media (min-width: 1024px) {
	.site-footer__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"brand   contact"
			"logo    legal";
		row-gap: 157px;
		column-gap: 60px;
		padding-block: 50px;
	}
	.site-footer__brand   { grid-area: brand; align-self: start; }
	/* Contact + legal MUST share the same left edge (right-aligned in grid col 2).
	   Sized to a single width both use — 500 fits HU sub-nav + Nastavenia cookies
	   (~495) which was the widest failing case. Original Figma was 406 for both;
	   the CSR link addition broke that. If future translation needs > 500, raise
	   both together. Detail: see memory [[project-footer-legal-column-width]]. */
	.site-footer__contact,
	.site-footer__legal { width: 500px; justify-self: end; }
	.site-footer__contact { grid-area: contact; align-self: start; }
	.site-footer__logo    { grid-area: logo; align-self: end; width: 318px; }
	.site-footer__legal   { grid-area: legal;   align-self: end; }
}

/* Mobile order (Figma 42:3215 stack): subpages → contact text → email/tel → lang → legal links column → tagline → logo */
@media (max-width: 1023px) {
	.site-footer__inner { gap: 30px; } /* Figma 15:903 mobile inner stacking ≈ 30px */
	.site-footer__contact { order: 1; }
	.site-footer__brand { order: 6; }
	.site-footer__logo  { order: 7; }
	/* Contact internal order: text → channels → lang (Figma 42:3215 mobile) */
	.site-footer__contact { display: flex; flex-direction: column; gap: 30px; }
	.site-footer__contact-text { order: 1; }
	.site-footer__channels { order: 2; }
	.site-footer__lang { order: 3; margin-top: 30px; /* #34 mobile spacing pred lang switcher */ }
}

/* Brand block (Top-left desktop, near bottom mobile) */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 230px; /* Figma 11:242 width 230 */
	max-width: 100%;
}
@media (max-width: 1023px) {
	.site-footer__brand { width: 230px; }
}
.site-footer__tagline {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--pulse);
}
@media (max-width: 1023px) {
	.site-footer__tagline {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 14px; /* Figma 15:828 body small mobile */
	}
}
.site-footer__copy {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--pulse);
}
@media (max-width: 1023px) {
	.site-footer__copy {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 14px;
	}
}

/* Contact block (Top-right desktop). DOM order lang → text → channels (email/tel).
   Required gaps: lang→text = 20px, text→channels = 30px. */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.site-footer__contact > .site-footer__contact-text { margin-top: 20px; }
.site-footer__contact > .site-footer__channels    { margin-top: 30px; }
/* Desktop: cap contact paragraph width per Figma. Parent .site-footer__contact
   is 500 wide (needed for alignment with legal below), but the paragraph itself
   should wrap at 380 per design. */
@media (min-width: 1024px) {
	.site-footer__contact > .site-footer__contact-text { max-width: 394px; }
}
.site-footer__lang { display: block; }
.site-footer__lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--pulse);
}
@media (max-width: 1023px) {
	.site-footer__lang-trigger { font-size: 20px; /* Figma 15:861 mobile lang */ }
}
.site-footer__lang-trigger svg { width: 10px; height: 6px; flex: 0 0 auto; }
.site-footer__contact-text {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--pulse);
}
.site-footer__channels {
	display: flex;
	gap: 40px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
@media (max-width: 1023px) {
	.site-footer__channels { justify-content: space-between; gap: 24px; }
}
.site-footer__channels a { color: var(--pulse); }

/* Footer logo (Bottom-left desktop, bottom mobile).
   New C-variant SVG aspect ≈ 6.54 (viewBox 279.9 × 42.8).
   Sizes are width-driven; height scales automatically. */
.site-footer__logo {
	display: inline-flex;
	color: var(--pulse);
	width: 318px; /* Figma 60:1241 desktop — 318 × 48.6 */
	max-width: 100%;
}
.site-footer__logo svg { width: 100%; height: auto; display: block; }
@media (max-width: 1023px) {
	.site-footer__logo { width: 266px; /* Figma 62:2396 mobile — 266 × 40.651 */ }
}

/* Legal block (Bottom-right desktop) */
.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 17px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.site-footer__legal-row { display: flex; align-items: center; }
.site-footer__legal-row--top { gap: 48px; justify-content: space-between; flex-wrap: wrap; }
.site-footer__legal-row--bottom {
	gap: 60px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px; /* body small */
	line-height: 1.3;
	flex-wrap: wrap;
}
/* Footer legal links override .cta font-size so they fit in 406 col (Figma 11:248 body small 14px) */
.site-footer__legal-row--bottom .cta {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
}
.site-footer__cookies {
	font-size: 14px !important; /* same — override .cta inline-flex default */
}
.site-footer__sub {
	display: flex;
	gap: 25px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.site-footer__sub a { color: var(--pulse); }
.site-footer__cookies {
	color: var(--pulse);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
}
.site-footer__legal-row--bottom a { color: var(--pulse); }
/* Mobile footer flattening (Figma 42:3215):
   subpages (order 0) → contact-text + channels + lang (order 1, internal column) →
   legal links column Spracuvanie + Zasady (order 4) → Nastavenia cookies (order 5) →
   tagline + ©2026 (order 6) → LOGO (order 7).
   Trick: both legal rows become `display: contents` so their children are direct siblings of
   the inner flex-column and individually order-able. */
@media (max-width: 1023px) {
	.site-footer__legal,
	.site-footer__legal-row--top { display: contents; }
	.site-footer__sub {
		order: 0;
		display: flex;
		gap: 25px;
		font-size: 20px; /* Figma 15:847 */
	}
	.site-footer__legal-row--bottom {
		order: 4;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		font-size: 14px;
	}
	.site-footer__cookies {
		order: 5;
		text-align: left;
		/* "Nastavenia cookies" sits as a top-level inner-column child after
		   legal-row--bottom (Spracúvanie + Zásady) which uses its own internal
		   gap of 14px. The inner column gap is 30px, so without this negative
		   margin Nastavenia would float 30px below Zásady — visually inconsistent
		   with the 14px gap between the first two. -16px closes the difference
		   so all three legal items have the same 14px vertical rhythm. */
		margin-top: -16px;
	}
	/* Subpage nav at 20px on mobile (Figma 42:3220). */
	.site-footer__sub a { font-size: 20px; }
	/* Figma comment #35: "Nastavenie cookies" must match Spracúvanie + Zásady (14px) —
	   client revised the Figma 42:3241 spec after the design audit. */
	.site-footer__cookies { font-size: 14px !important; }
}

/* Lenis smooth scroll (desktop only) */
html.lenis-active { scroll-behavior: auto; }
html.lenis-active body { overscroll-behavior: contain; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   Legal pages — Cookies + GDPR (Figma 50:4357, 50:3928)
   ========================================================= */

/* Ride above the fixed footer so it stays covered until the user scrolls to the end.
   Same z-index/background pattern as .o-nas / .kontakt-udaje / .onas-body. */
.legal-intro,
.legal-body {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
}
.legal-intro { padding-top: 220px; padding-bottom: 0; }
@media (min-width: 1024px) { .legal-intro { padding-top: 262px; } }
.legal-intro__inner { display: flex; flex-direction: column; padding-bottom: 32px; }
@media (min-width: 1024px) { .legal-intro__inner { padding-bottom: 38px; } }
.legal-intro__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.07;
	margin: 0;
}
@media (min-width: 1024px) { .legal-intro__headline { font-size: 58px; max-width: 768px; } }
.legal-intro__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

.legal-body { padding-block: 60px 80px; }
@media (min-width: 1024px) { .legal-body { padding-block: 60px 120px; } }
/* .custom-richtext (Custom Page WYSIWYG blocks) shares the legal-body typography
   so client-written text renders identically to the legal pages. */
.legal-body__inner,
.custom-richtext {
	max-width: 100%;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--land);
}
@media (min-width: 1024px) {
	.legal-body__inner,
	.custom-richtext { max-width: 660px; }
}
.legal-body__inner h2,
.custom-richtext h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.25;
	margin: 40px 0 16px;
	color: var(--land);
}
.legal-body__inner h2:first-child,
.custom-richtext h2:first-child { margin-top: 0; }
.legal-body__inner h3,
.custom-richtext h3 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 32px 0 12px;
	color: var(--land);
}
.legal-body__inner p,
.custom-richtext p { margin: 0 0 16px; }
.legal-body__inner ul,
.legal-body__inner ol,
.custom-richtext ul,
.custom-richtext ol { margin: 0 0 16px; padding-left: 22px; }
.custom-richtext ul { list-style: disc; }
.custom-richtext ol { list-style: decimal; }
.legal-body__inner li,
.custom-richtext li { margin-bottom: 8px; }
.legal-body__inner a,
.custom-richtext a { color: var(--land); text-decoration: underline; }
.legal-body__inner a:hover,
.custom-richtext a:hover { opacity: 0.7; }
.custom-richtext > :last-child { margin-bottom: 0; }

/* =========================================================
   Per Figma comments #53 + #54: tablet (768–1023) typography rhythm —
   big headlines and the footer contact paragraph were going edge-to-edge
   across the wider tablet container, designer asked them to wrap closer
   to mid-screen so there's breathing room on the right side.
   max-width: 50% on each viewport — at 768 viewport = ~384, at 1023 = ~512.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
	/* #53 — footer "Ak máte otázky..." paragraph */
	.site-footer__contact-text { max-width: 50%; }

	/* #54 — all main H1 / hero / section-lead headlines */
	.hero-stage__headline,
	.pin-stage__headline,
	.selected-projects__headline,
	.what-we-do__headline,
	.kontakt-udaje__headline,
	.onas-body__right,
	.projekty-intro__headline,
	.projekty-csr-head__headline,
	.projekty-onas__headline,
	.onas-hodnoty__headline,
	.onas-projekty-anim__headline {
		max-width: 50%;
	}
}

/* Per client / designer: on narrow phones the 4 subnav items don't fit on
   a single row. Threshold differs per language due to word length:
     • SK/EN: fit at ≥ 430 (EN "About us" wraps below 420 → looks worst)
     • HU: fits only at ≥ 450 (words like "PROJEKTEK", "KAPCSOLAT" are longest)
   Below the respective threshold, stack vertically. */
@media (max-width: 429px) {
	.site-footer__sub {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
	.site-footer__sub a { white-space: nowrap; }
}
@media (min-width: 430px) and (max-width: 449px) {
	html:lang(hu) .site-footer__sub {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
	html:lang(hu) .site-footer__sub a { white-space: nowrap; }
}

/* =========================================================
   Custom Page (page-custom.php) — client-editable subpage builder.
   All values reuse existing sections (source noted per rule). New
   components (grid, media, accordion) compose from the token family.
   ========================================================= */

/* Ride above the fixed footer — same pattern as .legal-intro / .legal-body. */
.custom-intro,
.custom-body {
	position: relative;
	z-index: 3;
	background: var(--pure);
	color: var(--land);
}

/* Intro — H1 + pulse divider. Values from .legal-intro. */
.custom-intro { padding-top: 220px; padding-bottom: 0; }
@media (min-width: 1024px) { .custom-intro { padding-top: 262px; } }
.custom-intro__inner { display: flex; flex-direction: column; padding-bottom: 32px; }
@media (min-width: 1024px) { .custom-intro__inner { padding-bottom: 38px; } }
.custom-intro__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.07;
	margin: 0;
}
@media (min-width: 1024px) { .custom-intro__headline { font-size: 58px; max-width: 768px; } }
.custom-intro__divider {
	display: block;
	height: 1.5px;
	background: var(--pulse);
	width: 100%;
}

/* Body — vertical rhythm between blocks via margins (not flex gap, so a
   heading can sit tighter to the block that follows it). Paddings from
   .legal-body. */
.custom-body { padding-block: 60px 80px; }
@media (min-width: 1024px) { .custom-body { padding-block: 60px 120px; } }
.custom-body > .custom-block { margin-top: 60px; }
.custom-body > .custom-block:first-child { margin-top: 0; }
@media (min-width: 1024px) { .custom-body > .custom-block { margin-top: 80px; } }
/* A standalone heading binds to the following block (28px instead of full rhythm). */
.custom-body > .custom-block:has(> .custom-heading) + .custom-block { margin-top: 28px; }

/* Headings — styles map to existing type tokens:
   lead = .t-h1 (28 → 42), section = .projekty-onas__headline (22 → 28),
   eyebrow = .t-eyebrow / .project-about__desc-eyebrow (16 Display Medium). */
.custom-heading {
	font-family: var(--font-display);
	margin: 0;
	color: var(--land);
}
.custom-heading--lead { font-weight: 400; font-size: 28px; line-height: 1.25; }
@media (min-width: 1024px) { .custom-heading--lead { font-size: 42px; max-width: 880px; } }
.custom-heading--section { font-weight: 400; font-size: 22px; line-height: 1.25; }
@media (min-width: 1024px) { .custom-heading--section { font-size: 28px; max-width: 675px; } }
.custom-heading--eyebrow { font-weight: 500; font-size: 16px; line-height: 1.25; }

/* Two text columns — stack on mobile, 2-col from tablet (column-gap 24
   matches .projekty-grid__list). */
.custom-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}
@media (min-width: 768px) {
	.custom-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
	}
}

/* Full container-width image — natural aspect ratio (client uploads vary). */
.custom-image { margin: 0; }
.custom-image img { width: 100%; height: auto; display: block; }

/* Gallery grid — image treatment from .projekty-grid__img-wrap (660/560 crop).
   Column count from ACF (2/3/4, applies tablet+). Mobile: 2-col galleries
   stack to 1 col; 3–4-col galleries keep 2 cols so the page doesn't get
   endlessly long. */
.custom-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px; /* --gutter-mobile */
}
.custom-grid--cols-3,
.custom-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
	.custom-grid { gap: 24px; /* projekty-grid column-gap */ }
	.custom-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.custom-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.custom-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.custom-grid__item {
	margin: 0;
	aspect-ratio: 660 / 560;
	overflow: hidden;
	background: var(--land);
}
.custom-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carousel — reuses .project-carousel styles; only the section padding is
   neutralized (rhythm comes from .custom-block margins). */
.custom-carousel { padding-block: 0; }
@media (min-width: 1024px) { .custom-carousel { padding-block: 0; } }

/* Text + image — 2 cols from desktop (column-gap 60 from .project-about),
   stacked below. Side select flips column order via explicit grid placement
   (no absolute positioning). */
.custom-media {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1024px) {
	.custom-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 60px;
		align-items: center;
	}
	.custom-media--img-right .custom-media__text   { grid-column: 1; grid-row: 1; }
	.custom-media--img-right .custom-media__figure { grid-column: 2; grid-row: 1; }
	.custom-media--img-left  .custom-media__figure { grid-column: 1; grid-row: 1; }
	.custom-media--img-left  .custom-media__text   { grid-column: 2; grid-row: 1; }
}
/* Mobile: image above text when image side = left (mirrors desktop reading order). */
@media (max-width: 1023px) {
	.custom-media--img-left .custom-media__figure { order: -1; }
}
.custom-media__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start; /* content-width children, no stretch */
}
.custom-media__figure { margin: 0; }
.custom-media__figure img { width: 100%; height: auto; display: block; }

/* Accordion — native <details>, pulse row dividers from .project-about__meta-row,
   question type from .projekty-grid__filter-trigger (Display 18). */
.custom-accordion { display: flex; flex-direction: column; }
.custom-accordion__item {
	border-top: 1.5px solid var(--pulse);
}
.custom-accordion__item:last-child { border-bottom: 1.5px solid var(--pulse); }
.custom-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px; /* meta-row padding */
	cursor: pointer;
	list-style: none;
}
.custom-accordion__summary::-webkit-details-marker { display: none; }
.custom-accordion__question {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
}
.custom-accordion__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 6px;
	transition: transform var(--dur-base) var(--ease-out-quart);
}
.custom-accordion__chevron svg { width: 100%; height: 100%; display: block; }
.custom-accordion__item[open] .custom-accordion__chevron { transform: rotate(180deg); }
.custom-accordion__content { padding-bottom: 24px; }

/* CTA block — .cta / .cta--arrow styled globally; nothing extra needed. */

/* Grid gallery link — hover zoom from .projekty-grid__card-link:hover pattern. */
.custom-grid__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.custom-grid__link img { transition: transform 600ms var(--ease-out-quart); }
.custom-grid__link:hover img,
.custom-grid__link:focus-visible img { transform: scale(1.04); }

/* Text boxes — 2/3/4-col "template boxes". Pulse top rule per box (meta-row
   1.5px), title Display 20 (keypoint size), body Text Light 16. */
.custom-boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px 24px;
}
@media (min-width: 768px) {
	.custom-boxes--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.custom-boxes--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.custom-boxes--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.custom-boxes__box {
	border-top: 1.5px solid var(--pulse);
	padding-top: 20px; /* meta-row padding */
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start; /* content-width children, no stretch */
}
.custom-boxes__media { margin: 0; }
.custom-boxes__media--icon img { height: 48px; width: auto; display: block; }
/* Photo style — uniform 660/560 crop (projekty-grid ratio) so boxes stay
   level regardless of the uploaded image's natural ratio. */
.custom-boxes__media--photo {
	width: 100%;
	aspect-ratio: 660 / 560;
	overflow: hidden;
	background: var(--land);
}
.custom-boxes__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.custom-boxes__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}
.custom-boxes__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* Timeline — vertical pulse spine + LAND square markers (10×10 from
   .project-about__keypoint::before). Label Display Medium 16, title
   Display 20, text Light 16. */
.custom-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.custom-timeline__item {
	position: relative;
	padding-left: 40px;
	padding-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.custom-timeline__item:last-child { padding-bottom: 0; }
/* spine */
.custom-timeline__item::before {
	content: '';
	position: absolute;
	left: 4.25px; /* center 1.5px line on the 10px marker */
	top: 7px;
	bottom: 0;
	width: 1.5px;
	background: var(--pulse);
}
.custom-timeline__item:last-child::before { display: none; }
/* marker */
.custom-timeline__item::after {
	content: '';
	position: absolute;
	left: 0;
	top: 7px; /* optical cap-height align, same as keypoint square */
	width: 10px;
	height: 10px;
	background: var(--land);
}
.custom-timeline__label {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
}
.custom-timeline__body { display: flex; flex-direction: column; gap: 8px; }
.custom-timeline__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}
.custom-timeline__text {
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	max-width: 660px;
}
@media (min-width: 1024px) {
	.custom-timeline--left .custom-timeline__item {
		display: grid;
		grid-template-columns: 188px minmax(0, 660px); /* label col from kontakt 188px grid */
		column-gap: 40px;
		align-items: start;
	}
}

/* Centered variant (admin layout switch) — spine in the middle, items
   alternate left/right. Desktop only; below 1024 it falls back to the base
   left layout above. */
@media (min-width: 1024px) {
	.custom-timeline--center .custom-timeline__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 80px; /* 40px clearance from the centered spine per side */
		padding-left: 0;
		row-gap: 8px;
	}
	.custom-timeline--center .custom-timeline__item::before {
		left: calc(50% - 0.75px); /* center the 1.5px spine */
	}
	.custom-timeline--center .custom-timeline__item::after {
		left: calc(50% - 5px); /* center the 10px marker */
	}
	.custom-timeline--center .custom-timeline__item:nth-child(odd) .custom-timeline__label {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		text-align: right;
	}
	.custom-timeline--center .custom-timeline__item:nth-child(odd) .custom-timeline__body {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
		text-align: right;
		align-items: flex-end;
	}
	.custom-timeline--center .custom-timeline__item:nth-child(even) .custom-timeline__label {
		grid-column: 2;
		grid-row: 1;
	}
	.custom-timeline--center .custom-timeline__item:nth-child(even) .custom-timeline__body {
		grid-column: 2;
		grid-row: 2;
	}
}

/* Files download list — pulse rows (meta-row pattern), name Display Medium,
   ext/size meta Light, ↓ icon. Whole row is the link, hover opacity like
   meta-value links. */
.custom-files {
	list-style: none;
	margin: 0;
	padding: 0;
}
.custom-files__row { border-top: 1.5px solid var(--pulse); }
.custom-files__link {
	display: flex;
	gap: 16px;
	color: var(--land);
}
.custom-files__link:hover,
.custom-files__link:focus-visible { opacity: 0.6; }
.custom-files__name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
}
.custom-files__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	font-family: var(--font-text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
}
.custom-files__icon { display: inline-flex; }
.custom-files__icon svg { width: 100%; height: 100%; display: block; }
/* List layout — one row per file: name left, ext/size + ↓ icon right.
   (Markup order is icon → name → meta; flex `order` puts the icon last.) */
.custom-files--list { display: flex; flex-direction: column; }
.custom-files--list .custom-files__row:last-child { border-bottom: 1.5px solid var(--pulse); }
.custom-files--list .custom-files__link {
	align-items: center;
	justify-content: space-between;
	padding-block: 20px;
}
.custom-files--list .custom-files__name { order: 1; flex: 1; }
.custom-files--list .custom-files__meta { order: 2; }
.custom-files--list .custom-files__icon { order: 3; width: 18px; height: 18px; }
/* Tiles layout — side-by-side columns, icon on top (boxes pattern: pulse
   top rule per tile). 2 cols mobile → 3 tablet → 4 desktop. */
.custom-files--tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
}
@media (min-width: 768px)  { .custom-files--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .custom-files--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.custom-files--tiles .custom-files__link {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 20px;
}
.custom-files--tiles .custom-files__icon { width: 28px; height: 28px; }

/* Button primitive — the site's first filled button (Custom Page CTA).
   LAND fill / PURE text, hover flips to PULSE fill / LAND text (brand
   trio, angular = no radius). Type: Display Medium 16 (eyebrow token). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background: var(--land);
	color: var(--pure);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	transition: background var(--dur-base) var(--ease-out-quart),
	            color var(--dur-base) var(--ease-out-quart);
}
.btn:hover,
.btn:focus-visible {
	background: var(--pulse);
	color: var(--land);
}
.custom-btn-wrap { display: flex; }
.custom-btn-wrap--left   { justify-content: flex-start; }
.custom-btn-wrap--center { justify-content: center; }

/* Lightbox — full-viewport LAND overlay, image centered, pulse controls.
   Markup created by JS (main.js lightbox module) on [data-lightbox] click. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200; /* above header (which uses lower z) and fixed footer */
	background: var(--land);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	/* LOAD-BEARING: visibility + pointer-events reset. Without them the closed
	   overlay (opacity 0, fixed inset 0, z 200) keeps covering the viewport and
	   swallows every click on the page. visibility flips AFTER the fade-out. */
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out-quart),
	            visibility 0s linear var(--dur-base);
}
.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--dur-base) var(--ease-out-quart);
}
.lightbox__img {
	max-width: calc(100vw - 2 * var(--gutter));
	max-height: 86svh;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
.lightbox__close {
	position: absolute;
	top: 16px;
	right: var(--gutter);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pure);
}
.lightbox__close:hover,
.lightbox__close:focus-visible { color: var(--pulse); }
.lightbox__close svg { width: 18px; height: 18px; display: block; }
.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pure);
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible { color: var(--pulse); }
.lightbox__nav[disabled] { opacity: 0.3; pointer-events: none; }
.lightbox__nav svg { width: 9px; height: 18px; display: block; }
.lightbox__nav--prev { left: calc(var(--gutter) - 12px); }
.lightbox__nav--next { right: calc(var(--gutter) - 12px); }
.lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--pure);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}