/*
 * SDCK — vzhled ve stylu ark-shelter.com.
 * Načítá se za main.css (Bootstrap + původní téma) a přebírá z něj jen font, reset a offcanvas.
 */

:root {
	--sdck-black: #000;
	--sdck-white: #fff;
	--sdck-muted: #6b7177;
	--sdck-line: #e4e4e4;
	--sdck-max: 1320px;
	--sdck-gutter: clamp(20px, 11.8vw, 170px);
	/* Okraj obsahu: aspoň gutter, na velkých monitorech dorovná šířku na --sdck-max. */
	--sdck-side: max(var(--sdck-gutter), calc((100% - var(--sdck-max)) / 2));
	--sdck-gap: clamp(32px, 8.2vw, 118px);
	--sdck-section: clamp(96px, 12vw, 180px);
	--sdck-header-h: 96px;
	--sdck-ease: cubic-bezier(.4, 0, .2, 1);
	/* Velikost nadpisů v panelu; od ní se odvozují i ikony z linek. */
	--sdck-panel-title: clamp(1.375rem, 1.8vw, 1.75rem);
}

@media (max-width: 767.98px) {
	:root { --sdck-header-h: 72px; }
}

body { color: var(--sdck-black); }

.sdck-wrap { padding-inline: var(--sdck-side); }

/* <picture> jen nabízí WebP verze obrázku, rozvržení řídí samotný <img>. */
picture { display: contents; }

.sdck-section { padding-top: var(--sdck-section); }

/* ── typografie ─────────────────────────────────────────────────────────── */

.sdck-label { font-size: .9375rem; line-height: 1.4; margin: 0; }
.sdck-label-caps { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }

.sdck-display,
.sdck-contact > h2 {
	font-size: clamp(2.75rem, 5.4vw, 5.5rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.02em;
	margin: 0;
}

.sdck-h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.sdck-h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.3; margin: 0; }

.sdck-statement {
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.005em;
	margin: 0;
	max-width: 30em;
}

.sdck-text { color: var(--sdck-muted); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; }
.sdck-text > * + * { margin-top: 1.5em; }
.sdck-muted { color: var(--sdck-muted); }

/* Velký podtržený odkaz (Ark: „Download brochure for more info“). */
.sdck-link,
.sdck-contact > ul a {
	display: inline;
	font-size: clamp(1.375rem, 2vw, 1.875rem);
	line-height: 1.5;
	color: var(--sdck-black);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
	padding-bottom: .15em;
	transition: background-size .45s var(--sdck-ease);
}
.sdck-link:hover,
.sdck-contact > ul a:hover { background-size: 0 2px; background-position: 100% 100%; text-decoration: none; }
.sdck-link--sm { font-size: 1.125rem; }

.sdck-links,
.sdck-contact > ul { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* ── hlavička ───────────────────────────────────────────────────────────── */

.sdck-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 1030;
	height: var(--sdck-header-h);
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-inline: clamp(20px, 3.8vw, 55px);
	color: var(--sdck-black);
	background: var(--sdck-white);
	transition: background-color .35s var(--sdck-ease), color .35s var(--sdck-ease), transform .35s var(--sdck-ease), box-shadow .35s var(--sdck-ease);
}
.sdck-header a { text-decoration: none; }

.sdck-header-logo { flex: 0 0 auto; display: block; line-height: 0; }
.sdck-header-logo img { width: 140px; height: auto; }

.sdck-header-nav { margin-inline: auto; }
.sdck-nav { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; font-size: 1.125rem; font-weight: 500; }
.sdck-nav a,
.sdck-header-cta { position: relative; display: inline-block; padding-block: .25rem; }
.sdck-nav a::after,
.sdck-header-cta::after {
	content: '';
	position: absolute;
	inset: auto 0 -2px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s var(--sdck-ease);
}
.sdck-nav a:hover::after,
.sdck-nav .is-active a::after,
.sdck-header-cta:hover::after { transform: scaleX(1); transform-origin: left; }

.sdck-header-cta { font-size: 1.125rem; font-weight: 500; flex: 0 0 auto; }

.sdck-header-toggle {
	display: none;
	margin-left: auto;
	padding: .5rem;
	border: 0;
	background: none;
	color: inherit;
	line-height: 0;
}
.sdck-header-toggle svg { width: 44px; height: 44px; fill: currentColor; }

/* Průhledná hlavička nad hero (HP, Studio), po odscrollování zase bílé pozadí. */
/* Logo je animovaný GIF na bílém pozadí: invertuje se a hlavička se prolne režimem screen,
   takže černé pozadí zmizí a bílé logo zůstane. */
.sdck-header--overlay:not(.is-scrolled) { background: transparent; color: var(--sdck-white); mix-blend-mode: screen; }
.sdck-header--overlay:not(.is-scrolled) .sdck-header-logo img { filter: invert(1); }
/* Na světlém vizuálu černý text; režim multiply schová bílé pozadí loga. */
.sdck-header--overlay.sdck-header--light:not(.is-scrolled) { color: var(--sdck-black); mix-blend-mode: multiply; }
.sdck-header--overlay.sdck-header--light:not(.is-scrolled) .sdck-header-logo img { filter: none; }
.sdck-header.is-scrolled { box-shadow: 0 1px 0 var(--sdck-line); }
.sdck-header.is-hidden { transform: translateY(-100%); }

@media (max-width: 1023.98px) {
	.sdck-header-nav, .sdck-header-cta { display: none; }
	.sdck-header-toggle { display: block; }
}

/* Mobilní menu (Bootstrap offcanvas z main.js). */
.sdck-offcanvas.offcanvas { --bs-offcanvas-width: min(420px, 100%); max-width: 100%; border: 0; padding: 24px clamp(20px, 6vw, 40px) 40px; }
.sdck-offcanvas .sdck-header-toggle { display: block; margin-left: auto; color: var(--sdck-black); }
.sdck-offcanvas-nav { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: .75rem; font-size: 2rem; font-weight: 500; }
.sdck-offcanvas-nav a { text-decoration: none; }
.sdck-offcanvas-nav .is-active a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sdck-offcanvas-contact { margin-top: auto; padding-top: 2.5rem; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.sdck-hero {
	position: relative;
	min-height: max(600px, 100svh);
	display: flex;
	align-items: center;
	color: var(--sdck-white);
	background: var(--hero-bg, #0b0b0d);
	overflow: hidden;
	isolation: isolate;
}
.sdck-hero--light { color: var(--sdck-black); }
.sdck-hero-media { position: absolute; inset: 0; z-index: -1; }
.sdck-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* HP: „More wow.“ v pomalu plynoucím barevném přechodu z barev zobrazené reference. */
.sdck-slogan-gradient {
	background-image: var(--sdck-slogan-gradient);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
	.sdck-slogan-gradient { animation: sdck-slogan-flow 6s ease-in-out infinite alternate; }
}
@keyframes sdck-slogan-flow {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

/* HP: vizuál projektu vpravo, levým okrajem plynule přechází do barvy pozadí. */
.sdck-hero-media--project { left: auto; right: -4vw; width: min(50%, 100svh); }
.sdck-hero-media--project img {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
	mask-image: linear-gradient(90deg, transparent, #000 30%);
}

.sdck-hero-content { width: 100%; padding-block: calc(var(--sdck-header-h) + 2rem) 12rem; }
.sdck-hero-sub { font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 500; margin: 2.25rem 0 0; }

/* Odkaz na projekt z hero: jen obrys v barvě textu. Na širších displejích obtáčí název i výzvu,
   na mobilu je název nad pilulkou a obrys má jen „More of this project“, aby se pilulka nelámala. */
.sdck-hero-pill {
	display: inline-flex;
	align-items: center;
	margin-top: 2.75rem;
	color: inherit;
	font-size: 1rem;
	text-decoration: none;
}
.sdck-hero-pill:hover { color: inherit; }
.sdck-hero-pill-name { font-weight: 500; }
.sdck-hero-pill-sep { margin-inline: .4em; }
.sdck-hero-pill-cta { display: inline-flex; align-items: center; gap: 1.25rem; transition: gap .35s var(--sdck-ease); }
.sdck-hero-pill:hover .sdck-hero-pill-cta { gap: 1.75rem; }

/* Obrys: celá šířka čáry a světlejší barva (podíl barvy textu) dávají hladkou hranu bez zubů. */
@media (min-width: 576px) {
	.sdck-hero-pill {
		padding: .75rem 1.5rem;
		border: 2px solid rgba(128, 128, 128, .5);
		border-color: color-mix(in srgb, currentColor 35%, transparent);
		border-radius: 999px;
		transition: background-color .35s var(--sdck-ease);
	}
	.sdck-hero-pill:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
}
@media (max-width: 575.98px) {
	.sdck-hero-pill { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.sdck-hero-pill-sep { display: none; }
	.sdck-hero-pill-cta {
		padding: .75rem 1.5rem;
		border: 2px solid rgba(128, 128, 128, .5);
		border-color: color-mix(in srgb, currentColor 35%, transparent);
		border-radius: 999px;
		transition: gap .35s var(--sdck-ease), background-color .35s var(--sdck-ease);
	}
	.sdck-hero-pill:hover .sdck-hero-pill-cta { background: color-mix(in srgb, currentColor 12%, transparent); }
}

.sdck-arrow { width: 1.25em; height: .75em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Bílý panel, který zespodu zasahuje do hero (Ark: Nr. 01 Arks for Living…). */
.sdck-panel {
	position: relative;
	z-index: 2;
	margin-top: -9.5rem;
	margin-right: var(--sdck-side);
	padding: 4rem 0 0 var(--sdck-side);
	background: var(--sdck-white);
	border-top-right-radius: clamp(24px, 4vw, 64px);
}
.sdck-panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; margin: 0; padding: 0; list-style: none; }
.sdck-panel-title { font-size: var(--sdck-panel-title); font-weight: 500; line-height: 1.2; margin: 1.5rem 0 .5rem; }

/* Značky (panel na HP, hlavičky sekcí): malá ikona z vodorovné linky na šířku nadpisu „25+“ (1,735 em). */
.sdck-mark { position: relative; display: block; width: 1.735em; height: .4em; font-size: var(--sdck-panel-title); }
.sdck-mark::before,
.sdck-mark::after { content: ''; position: absolute; background: currentColor; }
.sdck-mark::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.sdck-mark--ray::after { left: 0; top: 0; bottom: 0; width: 2px; }
.sdck-mark--plus::after { left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; }
.sdck-mark--split::before { right: calc(50% + .1em); }
.sdck-mark--split::after { left: calc(50% + .1em); right: 0; top: calc(50% - 1px); height: 2px; }
/* Linka na konci zalomená dolů. */
.sdck-mark--bend::before { top: 0; }
.sdck-mark--bend::after { right: 0; top: 0; bottom: 0; width: 2px; }
.sdck-panel-text { color: var(--sdck-muted); font-size: 1.125rem; margin: 0; }

/* Podstránky: tmavé hero (Studio) a světlé hero bez fotky (Work, Contact, detail). */
.sdck-hero--dark { --hero-bg: #000; min-height: max(560px, 88svh); }
.sdck-hero--dark .sdck-hero-content { padding-bottom: 14rem; }
.sdck-hero--dark .sdck-hero-media img { object-position: 0 50%; }

.sdck-pagehead { padding-top: calc(var(--sdck-header-h) + clamp(64px, 11vw, 160px)); }
.sdck-pagehead .sdck-text { max-width: 36em; margin-top: 2rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }

/* Minimální šířka bez pravého okraje panelu, jinak by na mobilu přetékal. */
.sdck-panel--narrow { display: inline-block; min-width: min(560px, 100% - var(--sdck-side)); margin-top: -8rem; padding-bottom: 0; }
.sdck-panel--narrow .sdck-panel-title { margin-top: 0; }

/* ── sekce: hlavička s ikonou, mřížka ───────────────────────────────────── */

.sdck-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); column-gap: var(--sdck-gap); row-gap: 3rem; }
.sdck-grid > .sdck-span { grid-column: 1 / -1; }
/* Levý sloupec: nadpis a pod ním doplněk (aside), vpravo hlavní text přes oba řádky.
   Na mobilu zůstává pořadí z HTML: nadpis, text, doplněk. */
@media (min-width: 768px) {
	.sdck-grid--aside { grid-template-rows: auto 1fr; }
	.sdck-grid--aside > .sdck-grid-main { grid-column: 2; grid-row: 1 / span 2; }
	.sdck-grid--aside > .sdck-grid-aside { grid-column: 1; grid-row: 2; padding-top: clamp(1rem, 3vw, 3rem); }
	/* V užším levém sloupci menší odkazy, ať se nelámou. */
	.sdck-grid-aside .sdck-link { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
}

.sdck-sectionhead { margin-bottom: clamp(64px, 9vw, 130px); }

.sdck-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(32px, 4.4vw, 64px); }
.sdck-cols > * { margin: 0; }

@media (max-width: 767.98px) {
	.sdck-grid, .sdck-cols { grid-template-columns: minmax(0, 1fr); }
	.sdck-panel { margin-top: -5rem; padding-top: 2.5rem; }
	.sdck-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
	.sdck-hero { align-items: flex-start; }
	.sdck-hero-content { padding-bottom: 8rem; }
	/* Studio: černá plocha jen na výšku textu, panel „Got a project?“ (zasahuje 5rem) hned pod ním. */
	.sdck-hero--dark { min-height: 0; }
	.sdck-hero--dark .sdck-hero-content { padding-bottom: 9rem; }
	/* Vizuál projektu pod textem (ne přes něj, texty bývají různě dlouhé), nahoře přechází do pozadí. */
	.sdck-hero:has(> .sdck-hero-media--project) { flex-direction: column; }
	.sdck-hero:has(> .sdck-hero-media--project) .sdck-hero-content { padding-bottom: 0; }
	.sdck-hero-media--project { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 1; margin-top: auto; }
	.sdck-hero-media--project img {
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
		mask-image: linear-gradient(180deg, transparent, #000 30%);
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.sdck-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── slider projektů ────────────────────────────────────────────────────── */

.sdck-slider {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sdck-side);
	padding: 0 var(--sdck-side) 0;
	scrollbar-width: none;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.sdck-slider::-webkit-scrollbar { display: none; }
.sdck-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sdck-slider.is-dragging a { pointer-events: none; }
.sdck-slider > * { flex: 0 0 min(600px, 80vw); scroll-snap-align: start; }
.sdck-slider img { -webkit-user-drag: none; user-select: none; }

.sdck-slider-bar { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; }
.sdck-progress { position: relative; flex: 1; height: 1px; background: #c9c9c9; }
.sdck-progress span { position: absolute; left: 0; top: -1px; height: 3px; width: 15%; background: var(--sdck-black); transition: transform .15s linear; }
.sdck-slider-buttons { display: flex; gap: .25rem; }
/* Jen šipky bez kolečka; tlačítko drží dost velkou plochu pro kliknutí. */
.sdck-slider-buttons button {
	width: 40px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sdck-black);
	display: grid;
	place-items: center;
}
.sdck-slider-buttons [data-slider-prev] { justify-items: start; }
.sdck-slider-buttons button:disabled { opacity: .25; pointer-events: none; }
.sdck-slider-buttons .sdck-arrow { width: 18px; height: 12px; transition: transform .3s var(--sdck-ease); }
.sdck-slider-buttons [data-slider-prev] .sdck-arrow { transform: scaleX(-1); }
.sdck-slider-buttons [data-slider-next]:hover .sdck-arrow { transform: translateX(4px); }
.sdck-slider-buttons [data-slider-prev]:hover .sdck-arrow { transform: scaleX(-1) translateX(4px); }

/* ── karta projektu ─────────────────────────────────────────────────────── */

.sdck-project { display: block; color: var(--sdck-black); text-decoration: none; }
.sdck-project:hover { color: var(--sdck-black); }
/* Vizuály projektů jsou čtvercové, karta je proto čtverec a nic se neořezává. */
.sdck-project-media { overflow: hidden; aspect-ratio: 1 / 1; background: #f2f2f2; }
.sdck-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sdck-ease); }
.sdck-project:hover .sdck-project-media img { transform: scale(1.04); }
.sdck-project-body { padding-top: 1.75rem; }
.sdck-project-title { font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 500; line-height: 1.2; margin: .75rem 0 .5rem; }
.sdck-project-title span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--sdck-ease); }
.sdck-project:hover .sdck-project-title span { background-size: 100% 2px; }
.sdck-project-sub { color: var(--sdck-muted); font-size: 1.125rem; line-height: 1.5; margin: 0; max-width: 32em; }

/* Výpis Work: mozaika čtverců natěsno přes celou šířku okna s okraji jako hlavička;
   počet sloupců podle šířky, mezi zlomy se čtverce plynule zvětšují a zmenšují. */
.sdck-projects {
	--sdck-project-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--sdck-project-cols), minmax(0, 1fr));
	padding-inline: clamp(20px, 3.8vw, 55px);
}
@media (min-width: 1024px) { .sdck-projects { --sdck-project-cols: 2; } }
@media (min-width: 1440px) { .sdck-projects { --sdck-project-cols: 3; } }
@media (min-width: 1920px) { .sdck-projects { --sdck-project-cols: 4; } }
@media (min-width: 2560px) { .sdck-projects { --sdck-project-cols: 5; } }

.sdck-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f2f2f2; outline-offset: -4px; }
.sdck-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Popisek projektu: při najetí myší (nebo z klávesnice) obrázek ztmavne a objeví se text zarovnaný vlevo.
   Skrytý je jen průhledností, čtečky obrazovky ho čtou vždy. */
.sdck-tile-caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .6rem;
	padding: clamp(24px, 3vw, 48px);
	text-align: left;
	color: var(--sdck-white);
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .4s var(--sdck-ease);
}
.sdck-tile-title { font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 500; line-height: 1.2; }
.sdck-tile-sub { max-width: 24em; font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.sdck-tile:hover .sdck-tile-caption,
.sdck-tile:focus-visible .sdck-tile-caption { opacity: 1; }

/* ── služby s fotkou, která drží na místě ───────────────────────────────── */

.sdck-features { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 6vw, 88px); }
.sdck-features .sdck-h3 { margin: 0 0 1.25rem; }
.sdck-figure img { width: 100%; height: 100%; object-fit: cover; }

.sdck-figure { margin: 0; overflow: hidden; background: #f2f2f2; }
.sdck-figure--black { background: #000; }

/* ── HP: služby jako velký typografický rejstřík ────────────────────────── */

/* Při najetí myší se řádek zleva zaplní černou přes celou šířku okna; přesah ořízne sekce. */
.sdck-section--services { overflow-x: clip; }
.sdck-services { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sdck-line); }
.sdck-services li {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	column-gap: var(--sdck-gap);
	align-items: center;
	padding: clamp(28px, 3.5vw, 48px) 0;
	border-top: 1px solid var(--sdck-line);
	transition: color .4s var(--sdck-ease);
}
.sdck-services-name { margin: 0; font-size: clamp(2rem, 4.4vw, 4.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; transition: transform .5s var(--sdck-ease); }
.sdck-services-name span { white-space: nowrap; }
.sdck-services-text { margin: 0; color: var(--sdck-muted); font-size: 1.125rem; line-height: 1.6; transition: color .4s var(--sdck-ease); }
@media (hover: hover) {
	.sdck-services li::before {
		content: '';
		position: absolute;
		inset: 0 calc(50% - 50vw);
		z-index: -1;
		background: var(--sdck-black);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .5s var(--sdck-ease);
	}
	.sdck-services li:hover { color: var(--sdck-white); }
	.sdck-services li:hover::before { transform: scaleX(1); }
	.sdck-services li:hover .sdck-services-name { transform: translateX(clamp(12px, 1.5vw, 24px)); }
	.sdck-services li:hover .sdck-services-text { color: rgba(255, 255, 255, .75); }
}
@media (max-width: 767.98px) {
	.sdck-services li { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
}

/* ── HP: obří letopočet „Since 2000“ ───────────────────────────────────── */

.sdck-grid--end { align-items: end; }
.sdck-since { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.sdck-since-year { font-size: clamp(5rem, 13vw, 12rem); font-weight: 500; line-height: .8; letter-spacing: -.04em; }

/* ── loga klientů ───────────────────────────────────────────────────────── */

.sdck-clients {
	--sdck-logo: clamp(86px, 8vw, 132px);
	--sdck-logo-gap: clamp(24px, 3vw, 56px);
	position: relative;
	margin-top: clamp(64px, 7vw, 110px);
	overflow: hidden;
}
/* Na krajích okna se loga ztrácejí do pozadí. Přechod je překryvem, ne maskou: Safari v maskovaném
   prvku nepřekreslí loga, která do něj přijedou animací. */
.sdck-clients::before,
.sdck-clients::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 8%;
	pointer-events: none;
}
.sdck-clients::before { left: 0; background: linear-gradient(90deg, var(--sdck-white), transparent); }
.sdck-clients::after { right: 0; background: linear-gradient(270deg, var(--sdck-white), transparent); }
/* Nekonečný pás: tři stejné řady za sebou, každá se posouvá o svou šířku, takže na sebe navazují
   bez skoku. Animují se řady zvlášť, ne celý pás: Safari velmi široké animované prvky nedokreslí. */
.sdck-marquee { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
	.sdck-logos { animation: sdck-marquee calc(var(--sdck-logo-count) * 5s) linear infinite; will-change: transform; }
	.sdck-clients:hover .sdck-logos { animation-play-state: paused; }
}
@keyframes sdck-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-100%, 0, 0); }
}
.sdck-logos {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sdck-logo-gap);
	margin: 0;
	padding: 0 var(--sdck-logo-gap) 0 0;
	list-style: none;
}
.sdck-logos li { flex: 0 0 var(--sdck-logo); }
.sdck-logos img { display: block; width: 100%; height: auto; filter: grayscale(1); opacity: .45; transition: opacity .3s, filter .3s; }
.sdck-logos li:hover img { opacity: 1; filter: none; }
/* Bez animací: jedna řada zalomená na střed, kopie skryté. */
@media (prefers-reduced-motion: reduce) {
	.sdck-clients { padding-inline: var(--sdck-side); }
	.sdck-clients::before,
	.sdck-clients::after { display: none; }
	.sdck-marquee { width: auto; }
	.sdck-logos { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: 1rem; }
	.sdck-logos[aria-hidden] { display: none; }
}

/* ── detail projektu ────────────────────────────────────────────────────── */

.sdck-bleed { margin: 0; }
.sdck-bleed img { display: block; width: 100%; height: auto; }

.sdck-meta { display: grid; gap: 2rem; align-content: start; align-self: start; margin: 0; }
.sdck-meta dt { font-weight: 400; font-size: .9375rem; }
.sdck-meta dd { margin: .5rem 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
@media (min-width: 768px) {
	.sdck-meta { position: sticky; top: calc(var(--sdck-header-h) + 24px); }
}

/* ── kontakt: celý obsah z popisu kategorie (Redactor) ────────────────────── */

/* Editor třídy nedává, vzhled se proto řídí značkami: H2 a odstavec za ním jsou hlavička stránky,
   první seznam jsou velké odkazy vlevo, nadpisy H3 s odstavci jsou vedle něj vpravo
   (jako „Address“ v detailu projektu) a obrázek je přes celou šířku. */
.sdck-contact { display: flow-root; padding-top: calc(var(--sdck-header-h) + clamp(64px, 11vw, 160px)); }
.sdck-contact > * { margin: 0; }
.sdck-contact p:empty,
.sdck-contact p:has(> br:only-child) { display: none; }
.sdck-contact > h2 + p { max-width: 36em; margin-top: 2rem; color: var(--sdck-muted); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.8; }
/* Pod úvodním odstavcem ikona zalomené linky jako v hlavičkách sekcí (.sdck-mark--bend). */
.sdck-contact > h2 + p::after {
	content: '';
	display: block;
	width: calc(var(--sdck-panel-title) * 1.735);
	height: calc(var(--sdck-panel-title) * .4);
	margin: var(--sdck-section) 0 clamp(64px, 9vw, 130px);
	border: solid var(--sdck-black);
	border-width: 2px 2px 0 0;
}
.sdck-contact > ul { padding: 0; list-style: none; }
.sdck-contact > h3 { font-size: .9375rem; font-weight: 400; line-height: 1.4; }
.sdck-contact > * + h3 { margin-top: 2rem; }
.sdck-contact > h3 + p { margin-top: .5rem; font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.sdck-contact > :is(figure, p:has(> img)) { clear: both; padding-top: var(--sdck-section); }
.sdck-contact img { display: block; width: 100%; height: auto; }
@media (max-width: 767.98px) {
	.sdck-contact > ul + * { margin-top: 3rem; }
}
@media (min-width: 768px) {
	/* Sloupce v poměru 4 : 5 jako .sdck-grid. */
	.sdck-contact { --sdck-contact-col: calc((100% - var(--sdck-gap)) * 4 / 9); }
	.sdck-contact > ul:first-of-type { float: left; width: var(--sdck-contact-col); }
	.sdck-contact > ul:first-of-type ~ :not(figure, figure ~ *, p:has(> img), p:has(> img) ~ *) { margin-left: calc(var(--sdck-contact-col) + var(--sdck-gap)); }
	.sdck-contact > ul:first-of-type + * { margin-top: 0; }
}

/* Text z administrace (Redactor). */
.sdck-prose { color: var(--sdck-muted); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; }
.sdck-prose > * { margin: 0; }
.sdck-prose > * + * { margin-top: 1.5em; }
.sdck-prose > p:first-child { color: var(--sdck-black); font-size: clamp(1.375rem, 2.1vw, 1.875rem); font-weight: 500; line-height: 1.45; }
.sdck-prose h2,
.sdck-prose h3 { color: var(--sdck-black); font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.3; }
.sdck-prose > * + :is(h2, h3) { margin-top: 2.5em; }
.sdck-prose > :is(h2, h3) + * { margin-top: .75em; }
.sdck-prose p:empty,
.sdck-prose p:has(> br:only-child) { display: none; }
.sdck-prose a { color: var(--sdck-black); text-decoration-thickness: 1px; }
.sdck-prose strong { color: var(--sdck-black); font-weight: 500; }
.sdck-prose ul { padding-left: 1.1em; list-style: square; }
.sdck-prose li + li { margin-top: .35em; }
.sdck-prose--statement > h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.45; }

.sdck-gallery { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sdck-gallery > * { grid-column: span var(--span, 24); }
.sdck-gallery a { display: block; overflow: hidden; background: #f2f2f2; }
.sdck-gallery img { display: block; width: 100%; height: auto; transition: transform .9s var(--sdck-ease); }
.sdck-gallery a:hover img { transform: scale(1.03); }
/* Na mobilu jeden obrázek na řádek přes celou šířku displeje, bez bočních okrajů je o třetinu větší.
   (24 sloupců s mezerami by navíc bylo širší než obrazovka.) */
@media (max-width: 575.98px) {
	.sdck-gallery { grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--sdck-side) * -1); }
	.sdck-gallery > * { grid-column: auto; }
}

/* Široké obrázky na mobilu: vyšší a posuvné do stran (viz galleryImage v Page.default). */
.sdck-pan-hint { display: none; }
@media (max-width: 575.98px) {
	.sdck-gallery .sdck-pan {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		background: none;
	}
	.sdck-gallery .sdck-pan::-webkit-scrollbar { display: none; }
	.sdck-gallery .sdck-pan img { flex: 0 0 auto; width: auto; max-width: none; height: min(85vw, 360px); }
	.sdck-gallery .sdck-pan:hover img { transform: none; }
	.sdck-pan-hint { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0; padding-inline: var(--sdck-side); color: var(--sdck-muted); font-size: .875rem; }
	.sdck-pan-bar { position: relative; flex: 0 0 6rem; height: 2px; overflow: hidden; background: var(--sdck-line); }
	.sdck-pan-bar > span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--sdck-black); }
}

.sdck-video { position: relative; aspect-ratio: 16 / 9; }
.sdck-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sdck-table { width: 100%; border-collapse: collapse; }
.sdck-table td { padding: 1rem 0; border-top: 1px solid var(--sdck-line); vertical-align: top; }
.sdck-table td:first-child { color: var(--sdck-black); padding-right: 2rem; }

/* Další projekt. */
.sdck-next { display: block; color: var(--sdck-black); text-decoration: none; }
.sdck-next:hover { color: var(--sdck-black); }
.sdck-next:hover .sdck-project-media img { transform: scale(1.04); }
.sdck-next:hover .sdck-link { background-size: 0 2px; background-position: 100% 100%; }

/* ── patička ────────────────────────────────────────────────────────────── */

.sdck-footer { margin-top: var(--sdck-section); padding-top: clamp(64px, 7vw, 110px); border-top: 1px solid var(--sdck-line); }
.sdck-footer a { text-decoration: none; }
/* Stejné sloupce jako obsah: adresa vlevo, kontakt v pravém sloupci. */
.sdck-footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 3rem var(--sdck-gap); }
.sdck-footer-title { font-size: 1.5rem; font-weight: 500; margin: 0 0 1.75rem; }
.sdck-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; color: var(--sdck-muted); font-size: 1.125rem; }
.sdck-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(64px, 7vw, 110px); padding-block: 2rem; border-top: 1px solid var(--sdck-line); color: var(--sdck-muted); font-size: .9375rem; }
.sdck-footer-bottom a:hover { color: var(--sdck-black); }

.sdck-social { display: flex; gap: .75rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.sdck-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sdck-black); color: var(--sdck-white); transition: opacity .25s; }
.sdck-social a:hover { opacity: .7; color: var(--sdck-white); }
.sdck-social svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 767.98px) {
	.sdck-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── plovoucí box „Have a project?“ ─────────────────────────────────────── */

.sdck-float {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1020;
	width: 340px;
	padding: 2rem 2.5rem 2.25rem;
	background: var(--sdck-white);
	box-shadow: 0 0 40px rgba(0, 0, 0, .08);
	transform: translateY(110%);
	transition: transform .5s var(--sdck-ease);
}
.sdck-float.is-visible { transform: none; }
.sdck-float-title { font-size: 1.375rem; font-weight: 500; margin: 0 0 .75rem; }
.sdck-float ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: 1.125rem; }
.sdck-float ul a { text-decoration: none; }
.sdck-float ul a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.sdck-float-close { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--sdck-muted); }
.sdck-float-close:hover { color: var(--sdck-black); }
@media (max-width: 1023.98px) {
	.sdck-float { display: none; }
}

/* ── cookie lišta (CookieConsent v2.6.1, cookies.js) ───────────────────────── */

/* Knihovna je postavená na CSS proměnných; barvy a písmo jako zbytek webu. */
:root {
	--cc-bg: var(--sdck-white);
	--cc-text: var(--sdck-black);
	--cc-btn-primary-bg: var(--sdck-black);
	--cc-btn-primary-text: var(--sdck-white);
	--cc-btn-primary-hover-bg: #333;
	--cc-btn-secondary-bg: #f2f2f2;
	--cc-btn-secondary-text: var(--sdck-black);
	--cc-btn-secondary-hover-bg: var(--sdck-line);
	--cc-toggle-bg-off: #b4b8bc;
	--cc-toggle-bg-on: var(--sdck-black);
	--cc-toggle-bg-readonly: var(--sdck-line);
	--cc-toggle-knob-bg: var(--sdck-white);
	--cc-toggle-knob-icon-color: var(--sdck-white);
	--cc-cookie-category-block-bg: #f5f5f5;
	--cc-cookie-category-block-bg-hover: #eee;
	--cc-section-border: var(--sdck-line);
	--cc-cookie-table-border: var(--sdck-line);
	--cc-overlay-bg: rgba(0, 0, 0, .6);
}
#cc_div,
#cc_div .c-bn,
#cc_div button,
#cc_div input { font-family: inherit; }
#cc_div #c-ttl,
#cc_div #s-ttl { font-weight: 500; }
#cc_div .c-bn { border-radius: 999px; font-weight: 500; }
#cc_div .cc-link { color: inherit; border-bottom-color: currentColor; font-weight: 500; }
/* Panel lícuje s levým okrajem okna a má zaoblený pravý horní roh jako bílý panel pod hero. */
#cc_div #cm.box {
	left: 0;
	bottom: 0;
	max-width: 30em;
	width: 100%;
	padding: 2rem 2rem 2.25rem;
	border-radius: 0 3rem 0 0;
	box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}
#cc_div #cm.box #c-bns { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
#cc_div #cm.box #c-bns .c-bn { flex: 1 1 auto; margin: 0; }
#cc_div #s-inr { border-radius: 0 3rem 0 0; }
.sdck-footer-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.sdck-footer-cookies:hover { color: var(--sdck-black); }

/* ── 404 ────────────────────────────────────────────────────────────────── */

.sdck-error { min-height: 70svh; display: grid; place-content: center; text-align: center; padding-top: var(--sdck-header-h); }
.sdck-error-code { font-size: clamp(5rem, 12vw, 9rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; margin: 0; }

/* ── postupné zobrazení při scrollu ─────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--sdck-ease), transform 1s var(--sdck-ease); }
	.js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* Mezery, které v ořezaném buildu main.css chybí (na mobilu se zmenšují). */
.mt-48 { margin-top: 3rem !important; }
.mt-80 { margin-top: clamp(3rem, 5.6vw, 5rem) !important; }
.mt-128 { margin-top: clamp(4rem, 8.9vw, 8rem) !important; }

/* Odsazení pod pevnou hlavičkou pro skok na kotvu. */
:target { scroll-margin-top: calc(var(--sdck-header-h) + 24px); }

/* Hláška (flash message) nad obsahem. */
.sdck-flashes { padding-top: calc(var(--sdck-header-h) + 1rem); }