@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-latin-ext-variable.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./fonts/dm-serif-display-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "DM Serif Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./fonts/dm-serif-display-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
			 GLOBALNE NASTAVITVE
			 Tukaj nastavi osnovne vrednosti za celotno stran.
		========================================================= */

		* {
			box-sizing: border-box;
		}

		:root {

			/* =====================================================
				 HITRO UREJANJE VIDEZA
				 Tu spreminjaj barve, velikosti pisav in razmake.
				 Vrednosti veljajo za vse zaslone, razen kjer so
				 spodaj v @media blokih posebej prepisane za ozke zaslone.
			===================================================== */

			--bg:			 #f3f3f0;		/* barva ozadja strani */
			--surface: #ffffff;		/* barva kartic / blokov */
			--text:		 #111111;		/* glavna barva: veliki naslovi, gumbi, poudarki */
			--muted:	 #6f6f6f;		/* sekundarna barva: besedila kartic, podpisi, opombe */
			--line:		 rgba(0,0,0,0.08); /* barva tankih črt in robov */
			--grid-size: 20px;				/* raster mreže */
			--grid-color: rgba(0,0,0,0.05); /* barva mreže */
			--grid-line: 1px;					/* debelina črt mreže */

			/* --- PISAVA ---
				 Zamenjaj font-family v body, če želiš drugo pisavo. */

			--font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
			--font-serif: "DM Serif Display", Georgia, serif;

			/* --- GUMBI ---
				 Velja za gumbe v intro delu in gumbe obrazcev. */

			--button-text-size: 15px;			/* velikost besedila v gumbih */
			--button-line-height: 1.15;		/* višina vrstice v gumbih */

			/* --- INTRO: prva stran ---
				 Veliki napis ARCHICAD/BIM/GDL, uvodna besedila in CTA del. */

			--intro-brand-size: 15px;			/* napis modul3 na vrhu */
			--intro-brand-color: #8a8a8a;
			--intro-title-size: 60px;			/* ARCHICAD / BIM / GDL */
			--intro-title-line: 0.9;
			--intro-title-color: var(--text);
			--intro-tag-size: clamp(20px, 2vw, 28px); /* Izobraževanja... */
			--intro-tag-line: 1.2;
			--intro-tag-color: var(--text);
			--intro-lead-size: 18px;			/* prvi uvodni odstavek */
			--intro-lead-line: 1.7;
			--intro-lead-color: var(--text);
			--intro-sub-size: 15px;				/* drugi uvodni odstavek */
			--intro-sub-line: 1.9;
			--intro-sub-color: var(--text);
			--intro-credit-size: 13px;		/* podpisi pod naslovno sliko */
			--intro-credit-line: 1.45;
			--intro-credit-color: var(--muted);

			/* --- NASLOVI POGLAVIJ ---
				 Leva/sticky oznaka poglavja: ARCHICAD, BIM, GDL, kontakt. */

			--chapter-title-size: 60px;
			--chapter-title-line: 0.9;
			--chapter-title-color: var(--text);
			--chapter-subtitle-size: 18px;
			--chapter-subtitle-line: 1.7;
			--chapter-subtitle-color: var(--muted);

			/* --- KARTICE IN VSEBINA ---
				 Te vrednosti urejajo naslove kartic, odstavke, sezname,
				 kontaktne podatke, prenose in animirano besedilo pri letnici. */

			--content-title-size: 24px;				/* naslovi kartic */
			--content-title-line: 1.02;				/* razmak med vrsticami naslovov kartic */
			--content-title-color: var(--text);
			--content-title-weight: 750;
			--content-title-spacing: -0.04em;
			--content-title-gap: 20px;				/* razmak pod naslovom kartice */

			--content-text-size: 16px;					/* osnovno besedilo na karticah */
			--content-line-height: 1.45;			/* razmak med vrsticami osnovnega besedila */
			--content-text-color: var(--muted);	/* barva osnovnega besedila */
			--content-list-gap: 7px;					/* navpični razmak med bulleti/ikonami */
			--content-inline-gap: 8px;				/* razmak med ikono/bulletom in besedilom */

			--content-icon-size: 48px;					/* ikone ob seznamih */
			--content-icon-opacity: 0.7;
			--content-bullet-size: 6px;

			--content-note-size: var(--content-text-size);
			--content-note-line: 1.4;
			--content-contact-line: var(--content-line-height);
			--timeline-label-size: 14px;			/* Archicad 4.55 oznaka pri letnici */
			--timeline-year-size: clamp(72px, 8vw, 140px); /* velika animirana letnica */
			--timeline-year-size-onecol: clamp(56px, 9vw, 86px);
			--form-legal-size: 14px;					/* drobni pravni tekst v MailerLite obrazcih */
			--form-legal-line: 1.6;

			/* --- PRAVNA STRAN ---
				 Vrednosti so enake osnovnemu sistemu, vendar locene zato,
				 da jih media pravila za naslovnico ne povecajo po nesreci. */

			--legal-page-title-size: var(--chapter-title-size);
			--legal-card-title-size: var(--content-title-size);
			--legal-text-size: var(--content-text-size);
			--legal-line-height: var(--content-line-height);

			--timeline-scroll-height: 170vh;
			--timeline-scroll-height-onecol: 165vh;
			--timeline-sticky-top-onecol: 160px;

			--text-size: var(--content-text-size);	/* združljivost s starejšimi pravili */
			--line-height: var(--content-line-height);

			/* --- LAYOUT ---
				 Splošne mere za postavitev. */

			--sticky-top:	  90px;		/* razdalja sticky naslova od vrha na desktop */
			--menu-height: 44px;		/* visina zgornjega menija */
			--radius:		  28px;		/* zaobljenost kartic */
			--container:	1500px;		/* največja širina vsebine */
			--content-width: 980px;		/* širina desnega stolpca z bloki */
		}

		html {
			scroll-behavior: smooth;
		}

		[id] {
			scroll-margin-top: calc(var(--menu-height) + 24px);
		}

		body {
			margin: 0;

			background-color: var(--bg);

			color: var(--text);
			font-family:
				var(--font-main);

			overflow-x: hidden;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}

		body {
			margin: 0;
			background-color: var(--bg);
			color: var(--text);
			position: relative;
		}

		body.lightbox-open {
			overflow: hidden;
		}

		body.lightbox-open .site-menu {
			opacity: 0;
			pointer-events: none;
		}


		/* =========================================================
			 MREŽA za ozadje
			 Za izklop mreže zakomentiraj celoten spodnji blok.
		========================================================= */

		body::before {
			content: "";
			position: fixed;
			inset: 0;
			z-index: 0;
			pointer-events: none;
			background-image:
				linear-gradient(
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
				),
				linear-gradient(
					90deg,
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
				);
			background-size: var(--grid-size) var(--grid-size);
			background-position: top left;
		}

		.chapter-title {
			background-color: transparent;
			isolation: isolate;
		}

		.chapter-title::before,
		.intro-comparison::before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-image:
				linear-gradient(
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
				),
				linear-gradient(
					90deg,
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
			);
			background-size: var(--grid-size) var(--grid-size);
			background-position:
				calc(-1 * var(--grid-offset-x, 0px))
				calc(-1 * var(--grid-offset-y, 0px));
		}

		.chapter-title::before {
			z-index: -1;
			background-color: var(--bg);
		}

		.intro-comparison::before {
			z-index: 3;
		}

		.intro,
		.chapter,
		.footer-nav,
		footer {
			position: relative;
			z-index: 1;
		}




		img {
			display: block;
			max-width: 100%;
		}


		/* =========================================================
			 GUMBI
			 Hover efekti za oba gumba v introju.
		========================================================= */

		/* --- GUMB "modul3" (zgoraj v introju) ---
			 Barva ob hoverju: --text (#111111) */
		.btn-modul3 {
			display: inline-block;
			margin-bottom: 28px;
			text-decoration: none;
			font-weight: 800;
			letter-spacing: 0.24em;
			font-size: var(--intro-brand-size);
			color: var(--intro-brand-color);
			transition: color 0.2s ease;
		}

		.btn-modul3:hover {
			color: #6f6f6f;			/* BARVA: ob hoverju */
		}

		/* --- GUMB "Prenesi brezplačen GDL objekt" ---
			 Ozadje ob hoverju: temnejša siva */
		.btn-download {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 16px 26px;
			border-radius: 999px;
			text-decoration: none;
			font-weight: 600;
			letter-spacing: 0.02em;
			font-size: var(--button-text-size);
			line-height: var(--button-line-height);
			background: var(--text); /* BARVA OZADJA: normalno stanje */
			color: var(--surface);	 /* BARVA BESEDILA: normalno stanje */
			transition: all 0.25s ease;
		}

		.btn-download:hover {
			background: #333333;		/* BARVA OZADJA: ob hoverju */
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		}

		.btn-download.secondary {
			background: transparent;
			color: var(--text);
			border: 1px solid var(--text);
		}

		.btn-download.secondary:hover {
			background: var(--text);
			color: var(--surface);
		}



		.hero-link {
			display: inline-block;
			color: inherit;
			text-decoration: none;
		}

		.hero-link:hover {
			color: inherit;
			text-decoration: none;
		}

		.hero-link:visited {
			color: inherit;
		}

		.hero-link:active {
			color: inherit;
		}

		.back-link {
			display: inline-block;
			margin: 0 0 34px;
			color: var(--muted);
			font-size: var(--content-text-size);
			font-weight: 600;
			line-height: var(--content-line-height);
			text-decoration: none;
			transition: color 0.2s ease;
		}

		.back-link:hover {
			color: var(--text);
		}



		/* =========================================================
			 HERO — prvi zaslon
			 Ta blok je namensko locen od ostale vsebine, da ga lahko
			 kasneje zamenjamo brez poseganja v poglavja spodaj.
		========================================================= */

		.m3-hero {
			position: relative;
			z-index: 1;
			min-height: 100svh;
			display: grid;
			grid-template-rows: auto 1fr;
			padding: 72px 96px;
			overflow: hidden;
			isolation: isolate;
			background: var(--bg);
		}

		.m3-hero::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
			background-image:
				linear-gradient(
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
				),
				linear-gradient(
					90deg,
					var(--grid-color) var(--grid-line),
					transparent var(--grid-line)
				);
			background-size: var(--grid-size) var(--grid-size);
			background-position: top left;
			-webkit-mask-image: linear-gradient(
				to bottom,
				transparent 0%,
				transparent 48%,
				rgba(0,0,0,0.22) 68%,
				#000 100%
			);
			mask-image: linear-gradient(
				to bottom,
				transparent 0%,
				transparent 48%,
				rgba(0,0,0,0.22) 68%,
				#000 100%
			);
		}

		.m3-hero-media {
			position: absolute;
			inset: 0 0 0 auto;
			z-index: -3;
			width: 72%;
			opacity: 0.9;
			-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 20%, #000 46%);
			mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 20%, #000 46%);
		}

		.m3-hero-media img {
			width: 100%;
			height: 100%;
			display: block;
			max-width: none;
			object-fit: cover;
			object-position: center;
			filter: saturate(0.55) contrast(0.9) brightness(1.06);
		}

		.m3-hero-data {
			position: absolute;
			inset: 0 0 0 auto;
			z-index: 0;
			width: 34%;
			padding: 68px 44px;
			color: rgba(17,17,17,0.34);
			background: transparent;
			font: 10px/1.85 "SF Mono", Consolas, monospace;
			overflow: hidden;
		}

		.m3-hero-data span {
			display: block;
			white-space: nowrap;
		}

		.m3-hero-data-title {
			margin-bottom: 14px;
			color: rgba(17,17,17,0.42);
			font-weight: 700;
			letter-spacing: 0.02em;
		}

		.m3-hero-wash {
			position: absolute;
			inset: 0;
			z-index: -1;
			pointer-events: none;
			background:
				linear-gradient(
					to right,
					var(--bg) 0%,
					rgba(243,243,240,0.96) 34%,
					rgba(243,243,240,0.30) 58%,
					rgba(243,243,240,0) 100%
				),
				linear-gradient(to bottom, rgba(243,243,240,0.04), rgba(243,243,240,0.44));
		}

		.m3-hero-brand {
			position: relative;
			z-index: 2;
			width: max-content;
			color: var(--intro-brand-color);
			font-size: var(--intro-brand-size);
			font-weight: 800;
			letter-spacing: 0.22em;
			text-decoration: none;
			transition: color 0.2s ease;
		}

		.m3-hero-brand:hover {
			color: var(--text);
		}

		.m3-hero-credits {
			position: absolute;
			right: 96px;
			bottom: 54px;
			z-index: 2;
			display: grid;
			grid-template-columns: max-content minmax(0, 1fr);
			column-gap: 22px;
			row-gap: 4px;
			color: rgba(17,17,17,0.72);
			font-size: 12px;
			font-weight: 600;
			line-height: 1.35;
			text-align: left;
		}

		.m3-hero-credit-label {
			color: rgba(17,17,17,0.9);
			font-weight: 800;
		}

		.m3-hero-copy {
			position: relative;
			z-index: 2;
			align-self: center;
			width: 620px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 36px;
		}

		.m3-hero-eyebrow {
			margin: 0;
			color: var(--muted);
			font-size: 12px;
			font-weight: 400;
			line-height: 1.2;
			letter-spacing: 0.2em;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.m3-hero-eyebrow::before {
			content: "----------------";
			display: inline-block;
			margin-right: 0.45em;
			letter-spacing: -0.08em;
		}

		.m3-hero-eyebrow strong {
			color: var(--text);
			font-weight: 700;
		}

		.m3-hero-title {
			margin: 0;
			max-width: max-content;
			color: var(--text);
			font-family: var(--font-serif);
			font-size: 75px;
			font-weight: 400;
			line-height: 1.02;
			letter-spacing: -0.032em;
		}

		.m3-hero-muted,
		.m3-hero-soft {
			display: block;
			font-family: var(--font-serif);
			font-weight: 400;
		}

		.m3-hero-nowrap {
			white-space: nowrap;
		}

		.m3-hero-muted {
			color: rgba(17, 17, 17, 0.44);
			font-style: normal;
		}

		.m3-hero-soft {
			color: var(--text);
			font-style: italic;
		}

		.m3-hero-lead {
			margin: 9px 0 0;
			max-width: 380px;
			color: var(--muted);
			font-size: 17px;
			font-weight: 400;
			line-height: 1.48;
			text-align: left;
		}

		.m3-hero-lead a {
			color: var(--text);
			font-weight: 750;
			text-decoration: none;
			border-bottom: 1px solid rgba(17, 17, 17, 0.28);
			transition: color 0.2s ease, border-color 0.2s ease;
		}

		.m3-hero-lead a:hover {
			color: rgba(17, 17, 17, 0.58);
			border-bottom-color: rgba(17, 17, 17, 0.58);
		}

		.m3-hero-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 7px;
			margin-top: 72px;
		}

		.m3-hero-cta-note {
			color: var(--muted);
			font-size: 11px;
			font-weight: 650;
			letter-spacing: 0.14em;
			line-height: 1;
			text-transform: uppercase;
		}

		.cta-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: max-content;
			max-width: 100%;
			padding: 14px 24px;
			border: 1px solid var(--text);
			border-radius: 999px;
			background: var(--text);
			color: var(--surface);
			font-size: var(--button-text-size);
			font-weight: 650;
			line-height: var(--button-line-height);
			text-align: center;
			text-decoration: none;
			transition: background-color 0.2s ease, color 0.2s ease;
		}

		.cta-button:hover,
		.cta-button:focus-visible {
			background: #333333;
			color: var(--surface);
		}

		.review-card {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		.review-card.review-card-visual {
			display: grid;
			grid-template-columns: 102px minmax(0, 1fr);
			gap: clamp(18px, 3vw, 32px);
			align-items: start;
		}

		.review-card-copy {
			min-width: 0;
		}

		.review-icon .review-symbol {
			fill: none;
			stroke: #2878b8;
			stroke-width: 2.8;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.review-icon .review-symbol-fill {
			fill: #2878b8;
			stroke: none;
		}

		.preparation-icon .preparation-structure,
		.preparation-icon .preparation-accent {
			fill: none;
			stroke-width: 2.8;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.preparation-icon .preparation-structure { stroke: var(--text); }
		.preparation-icon .preparation-accent { stroke: #2878b8; }

		.preparation-card .cta-button { margin-top: 32px; }

		.review-note {
			color: var(--content-text-color);
		}

		.review-note {
			margin: 0 0 28px;
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
		}

		.review-methods {
			margin-bottom: 0;
		}

		#pregled-prijava .cta-button {
			margin-top: 44px;
		}

		#pregled-pokaze .bullet-list li {
			align-items: flex-start;
			color: var(--text);
		}

		#pregled-pokaze .bullet-list li::before {
			background: var(--text);
		}

		.review-step {
			display: flex;
			min-width: 0;
			flex-direction: column;
			gap: 3px;
		}

		.review-step > span {
			color: var(--content-text-color);
			font-weight: 400;
		}

		@media (min-width: 1600px) {
			.m3-hero {
				padding-left: 108px;
				padding-right: 108px;
			}

			.m3-hero-copy {
				width: 740px;
			}

			.m3-hero-title {
				font-size: 92px;
			}

			.m3-hero-lead {
				max-width: 430px;
				font-size: 18px;
			}
		}

		@media (max-width: 1100px), (orientation: portrait) {
			.m3-hero {
				min-height: auto;
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: auto auto auto;
				row-gap: 30px;
				padding: 38px 20px 0;
			}

			.m3-hero-brand {
				grid-column: 1;
				grid-row: 1;
			}

			.m3-hero-copy {
				grid-column: 1;
				grid-row: 2;
				align-self: start;
				width: min(100%, 650px);
				gap: 24px;
			}

			.m3-hero-actions {
				margin-top: 48px;
			}

			.m3-hero-eyebrow {
				display: grid;
				grid-template-columns: max-content minmax(0, 1fr);
				column-gap: 0.45em;
				white-space: normal;
				line-height: 1.5;
			}

			.m3-hero-eyebrow::before {
				grid-column: 1;
				grid-row: 1;
				margin-right: 0;
			}

			.m3-hero-eyebrow-main,
			.m3-hero-eyebrow-detail {
				grid-column: 2;
			}

			.m3-hero-eyebrow-main { grid-row: 1; }
			.m3-hero-eyebrow-detail { grid-row: 2; }

			.m3-hero-title {
				font-size: clamp(40px, 11vw, 72px);
			}

			.m3-hero-title .m3-hero-soft {
				white-space: nowrap;
			}

			.m3-hero-lead {
				max-width: min(100%, 380px);
				font-size: 15px;
				line-height: 1.48;
			}

			.m3-hero-media {
				position: relative;
				inset: auto;
				grid-column: 1;
				grid-row: 3;
				z-index: 1;
				width: calc((100vw - 40px) * 1.5 + 40px);
				height: clamp(260px, 40svh, 420px);
				margin: 0 0 0 calc(-0.5 * (100vw - 40px) - 20px);
				opacity: 1;
				overflow: hidden;
				-webkit-mask-image: none;
				mask-image: none;
			}

			.m3-hero-media::after {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 1;
				pointer-events: none;
				background:
					linear-gradient(
						to right,
						rgba(243,243,240,0.76) 0%,
						rgba(243,243,240,0.42) 42%,
						rgba(243,243,240,0.04) 100%
					),
					linear-gradient(to bottom, rgba(243,243,240,0.12), rgba(243,243,240,0.46));
			}

			.m3-hero-media img {
				object-position: 68% center;
				filter: saturate(0.62) contrast(0.92) brightness(1.02);
			}

			.m3-hero-data {
				position: relative;
				inset: auto;
				grid-column: 1;
				grid-row: 3;
				z-index: 2;
				justify-self: start;
				align-self: start;
				display: block;
				width: min(48%, 300px);
				max-height: 52%;
				padding: 22px 0 0;
				color: rgba(17,17,17,0.36);
				font-size: 8px;
				line-height: 1.7;
				overflow: hidden;
				pointer-events: none;
			}

			.m3-hero-credits {
				position: relative;
				grid-column: 1;
				grid-row: 3;
				right: auto;
				bottom: auto;
				z-index: 3;
				align-self: end;
				justify-self: start;
				width: max-content;
				max-width: min(320px, calc(100% - 40px));
				margin: 0 0 24px;
				font-size: 11px;
				column-gap: 16px;
			}
		}

		@media (max-width: 700px) {
			.m3-hero {
				padding-right: 16px;
				padding-left: 16px;
			}

			.m3-hero-media {
				width: calc((100vw - 32px) * 1.5 + 32px);
				margin-left: calc(-0.5 * (100vw - 32px) - 16px);
			}

			.m3-hero-credits {
				max-width: min(320px, calc(100% - 32px));
			}
		}

		@media (max-width: 520px) {
			.m3-hero {
				row-gap: 22px;
				padding: 28px 16px 0;
			}

			.m3-hero-eyebrow {
				font-size: 10px;
				letter-spacing: 0.16em;
			}

			.m3-hero-eyebrow::before {
				content: "----------";
			}

			.m3-hero-copy {
				gap: 18px;
			}

			.m3-hero-actions {
				margin-top: 36px;
			}

			.m3-hero-title {
				font-size: clamp(30px, 9.8vw, 44px);
			}

			.m3-hero-lead {
				font-size: 14px;
				line-height: 1.45;
			}

			.m3-hero-media {
				width: calc((100vw - 32px) * 1.5 + 32px);
				height: clamp(230px, 36svh, 340px);
				margin: 0 0 0 calc(-0.5 * (100vw - 32px) - 16px);
			}

			.m3-hero-data {
				width: min(52%, 220px);
				max-height: 48%;
				padding: 16px 0 0;
				font-size: 7px;
				line-height: 1.65;
			}

			.m3-hero-data-title {
				margin-bottom: 8px;
			}

			.m3-hero-credits {
				width: 100%;
				max-width: 100%;
				margin: 0 0 16px;
				font-size: 10px;
				column-gap: 12px;
				row-gap: 3px;
			}
		}

		@media (max-width: 900px) and (orientation: landscape) {
			.m3-hero {
				min-height: 100svh;
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: auto 1fr;
				row-gap: 0;
				padding: 12px 20px 22px;
			}

			.m3-hero-brand {
				grid-column: 1;
				grid-row: 1;
			}

			.m3-hero-copy {
				grid-column: 1;
				grid-row: 2;
				align-self: center;
				width: min(42vw, 380px);
				gap: 14px;
			}

			.m3-hero-actions {
				margin-top: 28px;
			}

			.m3-hero-eyebrow {
				font-size: 9px;
				letter-spacing: 0.16em;
			}

			.m3-hero-eyebrow::before {
				content: "----------";
			}

			.m3-hero-title {
				font-size: clamp(28px, 4.7vw, 44px);
				line-height: 1;
			}

			.m3-hero-lead {
				max-width: min(38vw, 330px);
				font-size: 12px;
				line-height: 1.42;
			}

			.m3-hero-media {
				position: absolute;
				inset: 0 0 0 auto;
				grid-column: auto;
				grid-row: auto;
				z-index: -3;
				width: 72%;
				height: auto;
				margin: 0;
				opacity: 0.9;
				overflow: visible;
				-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 20%, #000 46%);
				mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 20%, #000 46%);
			}

			.m3-hero-media::after {
				content: none;
			}

			.m3-hero-media img {
				object-position: center;
				filter: saturate(0.55) contrast(0.9) brightness(1.06);
			}

			.m3-hero-data {
				position: absolute;
				inset: 0 0 0 auto;
				grid-column: auto;
				grid-row: auto;
				z-index: 0;
				justify-self: auto;
				align-self: auto;
				display: block;
				width: 34%;
				max-height: none;
				padding: 22px 34px;
				color: rgba(17,17,17,0.34);
				font-size: 8px;
				line-height: 1.7;
			}

			.m3-hero-credits {
				position: absolute;
				right: 20px;
				bottom: 22px;
				grid-column: auto;
				grid-row: auto;
				z-index: 2;
				align-self: auto;
				justify-self: auto;
				width: max-content;
				max-width: min(420px, 46vw);
				margin: 0;
				font-size: 10px;
				column-gap: 16px;
				row-gap: 3px;
			}
		}


		/* =========================================================
			 NASLOVNICA 004 — dogovorjeni novi elementi
		========================================================= */

		.m3-hero-lead strong {
			display: block;
			margin-bottom: var(--content-title-gap);
			color: var(--text);
			font-size: var(--content-title-size);
			font-weight: var(--content-title-weight);
			line-height: var(--content-title-line);
			letter-spacing: var(--content-title-spacing);
		}

		.door-visual {
			position: relative;
			height: 170px;
			margin: -10px 0 38px;
			overflow: hidden;
			border-bottom: 1px solid var(--line);
			background-image:
				linear-gradient(var(--grid-color) var(--grid-line), transparent var(--grid-line)),
				linear-gradient(90deg, var(--grid-color) var(--grid-line), transparent var(--grid-line));
			background-size: var(--grid-size) var(--grid-size);
			font: 10px/1.4 "SF Mono", Consolas, monospace;
			color: var(--muted);
		}

		.door-visual span {
			position: absolute;
			display: block;
		}

		.door-wall {
			left: 12%; right: 12%; bottom: 30px; height: 54px;
			border: 1px solid var(--text);
			background: rgba(17,17,17,0.04);
			transform: skewY(-7deg);
		}

		.door-opening {
			left: 42%; bottom: 25px; width: 25%; height: 82px;
			border: 1px solid var(--text);
			background: var(--surface);
		}

		.door-dimension { right: 12%; top: 26px; letter-spacing: .08em; }

		.bim-node {
			width: 44px; height: 44px;
			border: 1px solid var(--text);
			border-radius: 50%;
			background: var(--surface);
		}

		.bim-node-a { left: 10%; bottom: 30px; }
		.bim-node-b { left: calc(50% - 22px); top: 18px; }
		.bim-node-c { right: 10%; bottom: 30px; }
		.bim-link { height: 1px; width: 37%; top: 89px; background: var(--text); transform-origin: left center; }
		.bim-link-a { left: 16%; transform: rotate(-24deg); }
		.bim-link-b { right: 16%; transform: rotate(24deg); }

		.gdl-object {
			left: calc(50% - 48px); top: 25px; width: 96px; height: 96px;
			border: 1px solid var(--text);
			background: rgba(17,17,17,0.035);
			transform: skewY(-9deg);
		}

		.gdl-axis { left: 50%; top: 73px; height: 1px; background: var(--text); transform-origin: left; }
		.gdl-axis-x { width: 38%; }
		.gdl-axis-y { width: 82px; transform: rotate(-90deg); }
		.gdl-param { right: 8%; bottom: 16px; letter-spacing: .08em; }

		.navigation-card {
			display: grid;
			grid-template-columns: 120px minmax(0, 1fr);
			gap: clamp(38px, 6vw, 76px);
			align-items: start;
			padding: 60px;
			height: auto;
			min-height: 0;
			color: var(--text);
			text-decoration: none;
			transition: none;
		}

		.navigation-card:hover,
		.navigation-card.is-scroll-hover {
			background: #eeeeea;
		}

		.navigation-card:focus,
		.navigation-card:focus:not(:focus-visible) {
			outline: none;
		}

		.navigation-card:focus-visible {
			outline: 3px solid var(--text);
			outline-offset: -3px;
			background: #eeeeea;
		}

		.m3-hero-title,
		.m3-hero-title .m3-hero-muted,
		.m3-hero-title .m3-hero-soft {
			font-family: var(--font-main);
			font-style: normal;
			font-weight: 700;
			letter-spacing: -0.032em;
		}

		.m3-hero-title .m3-hero-muted { color: rgba(17,17,17,.56); }
		.m3-hero-title .m3-hero-soft {
			color: var(--text);
			white-space: nowrap;
		}

		.navigation-title {
		display: block;
		margin: 0 0 var(--content-title-gap);
	}

		.area-link {
			display: grid;
			grid-template-columns: 82px minmax(0, 1fr) auto;
			gap: 22px;
			align-items: center;
			padding: 24px 28px;
			color: var(--text);
			text-decoration: none;
			border-bottom: 1px solid var(--line);
			transition: background-color .2s ease;
		}

		.area-link { border-bottom: 0; }
		.area-link:hover { background: rgba(17,17,17,0.035); }

		.area-icon {
			display: grid;
			place-items: center;
			width: 102px;
			height: 102px;
			color: var(--text);
		}

		.area-icon svg {
			width: 102px;
			height: 102px;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.35;
			stroke-linecap: square;
			stroke-linejoin: miter;
			vector-effect: non-scaling-stroke;
		}

		.area-icon .icon-secondary {
			opacity: 0.34;
			stroke-width: 1;
		}

		.area-icon .icon-sheet {
			fill: var(--surface);
			stroke-width: 1.35;
		}

		.area-icon .icon-content {
			color: #2878b8;
			stroke: currentColor;
			stroke-width: 2.8;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.area-icon .icon-content-fill {
			fill: currentColor;
			stroke: none;
		}

		.area-icon .icon-label {
			fill: #2878b8;
			stroke: none;
			font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", var(--font-main);
			font-size: 14px;
			font-weight: 800;
			letter-spacing: 0.04em;
		}

		.area-icon .icon-ifc path {
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.area-icon .icon-ifc .icon-weave-gap {
			stroke: var(--surface);
			stroke-width: 5.2;
		}

		.area-icon .icon-ifc .icon-weave-line {
			stroke: #2878b8;
			stroke-width: 2.8;
		}

		.area-icon .icon-gdl-lines {
			fill: none;
			stroke: #2878b8;
			stroke-width: 2.8;
			stroke-linecap: round;
		}

		.area-link-copy strong,
		.area-link-copy small { display: block; }
		.area-link-copy { transform: translateX(-60px); }
		.area-link-copy strong { margin-bottom: 6px; font-size: var(--content-note-size); font-weight: 700; }
		.area-link-copy small { color: var(--content-text-color); font-size: var(--content-text-size); line-height: var(--content-line-height); }

		.project-link {
			display: grid;
			grid-template-columns: 82px minmax(0, 1fr) auto;
			gap: 22px;
			align-items: center;
			padding: 24px 28px;
			color: var(--text);
			text-decoration: none;
			border-bottom: 0;
			transition: background-color .2s ease;
		}

		.project-link:hover { background: rgba(17,17,17,0.035); }

		.project-thumbnail {
			display: block;
			width: 102px;
			height: 102px;
			object-fit: cover;
			filter: saturate(.55) contrast(.95);
			border: 1px solid var(--line);
		}

		.project-thumbnail-note {
			display: block;
			box-sizing: border-box;
			padding: 9px;
			border-color: currentColor;
			color: var(--content-text-color);
			font-size: 9px;
			font-weight: 500;
			line-height: 1.3;
		}

		.project-thumbnail-note span { display: block; }
		.project-thumbnail-note span + span { margin-top: 5px; }

		.project-card {
			grid-template-columns: 102px minmax(0, 1fr);
			gap: clamp(18px, 3vw, 32px);
		}

		.project-icon {
			position: relative;
			display: block;
			width: 82px;
			height: 82px;
			overflow: hidden;
			border: 1px solid var(--line);
			background-image:
				linear-gradient(var(--grid-color) var(--grid-line), transparent var(--grid-line)),
				linear-gradient(90deg, var(--grid-color) var(--grid-line), transparent var(--grid-line));
			background-size: 12px 12px;
		}

		.project-icon i, .project-icon b {
			position: absolute;
			display: block;
			border: 1px solid var(--text);
			background: rgba(243,243,240,.78);
		}

		.project-icon-medical i { inset: 24px 9px 9px 20px; transform: skewY(-8deg); }
		.project-icon-medical b { inset: 10px 26px 31px 8px; transform: skewY(8deg); }
		.project-icon-dso i { inset: 17px 10px 12px; }
		.project-icon-dso b { inset: 29px 21px 12px 34px; border-top: 0; }
		.project-icon-hall i { left: 8px; right: 8px; bottom: 13px; height: 31px; transform: skewY(-12deg); }
		.project-icon-hall b { left: 19px; right: 19px; bottom: 24px; height: 21px; border-bottom: 0; }

		.project-link-copy strong,
		.project-link-copy small { display: block; }
		.project-link-copy strong { margin-bottom: 6px; font-size: var(--content-note-size); font-weight: 700; }
		.project-link-copy small { color: var(--content-text-color); font-size: var(--content-text-size); line-height: var(--content-line-height); }

		.project-card .navigation-title {
			margin-bottom: 7px;
		}

		.project-location {
			display: block;
			margin-bottom: 16px;
			color: var(--content-text-color);
			font-size: 11px;
			font-weight: 650;
			letter-spacing: 0.12em;
			line-height: 1.2;
			text-transform: uppercase;
		}

		.project-credits {
			display: grid;
			grid-template-columns: 170px minmax(0, 1fr);
			column-gap: 22px;
			row-gap: 5px;
			margin: 0 0 26px;
			font-size: 12px;
			line-height: 1.4;
		}

		.project-credits dt {
			color: rgba(17,17,17,0.88);
			font-weight: 750;
		}

		.project-credits dd {
			margin: 0;
			color: var(--content-text-color);
		}

		@media (max-width: 620px) {
			.door-visual { height: 135px; margin-bottom: 28px; }
			.navigation-card { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding: 28px 22px; }
			.area-link,
			.project-link { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; padding: 18px; }
			.area-icon,
			.project-icon { width: 58px; height: 58px; }
			.area-icon svg { width: 52px; height: 52px; }
			.project-thumbnail { width: 58px; height: 58px; }
			.project-thumbnail-note { padding: 2px; font-size: 7px; line-height: 1.2; }
			.project-thumbnail-note span + span { margin-top: 3px; }
			.project-credits {
				grid-template-columns: 1fr;
				row-gap: 0;
				font-size: 12px;
			}
			.project-credits dd { margin: 2px 0 12px; }
			.project-credits dd:last-child { margin-bottom: 0; }
			.area-link-copy small,
			.project-link-copy small { font-size: 12px; }
			.project-icon-medical i { inset: 18px 7px 7px 14px; }
			.project-icon-medical b { inset: 7px 18px 22px 6px; }
			.project-icon-dso i { inset: 12px 7px 8px; }
			.project-icon-dso b { inset: 21px 15px 8px 24px; }
			.project-icon-hall i { left: 6px; right: 6px; bottom: 9px; height: 22px; }
			.project-icon-hall b { left: 13px; right: 13px; bottom: 17px; height: 15px; }
		}





		/* =========================================================
			 INTRO — uvodna sekcija
		========================================================= */

		.intro-scroll {
			position: relative;
		}

		.intro {
			position: relative;
			width: 100%;
			max-width: var(--container);
			min-height: 100vh;
			margin: 0 auto;
			padding: 72px 60px 88px;
			display: grid;
			grid-template-columns:
				minmax(260px, 320px)
				minmax(0, 1fr);
			grid-template-rows: auto auto;
			column-gap: 80px;
			row-gap: 0;
			align-items: start;
			overflow: visible;
			isolation: isolate;
		}

		@media (min-width: 1101px) {
			.intro-scroll {
				height: auto;
			}

			.intro {
				position: relative;
			}
		}

		.intro-visual {
			position: relative;
			z-index: 1;
			width: calc(100% + 36px);
			max-width: none;
			margin: 0 0 0 -36px;
			grid-column: 2;
			grid-row: 2;
			align-self: start;
			justify-self: start;
		}

		.intro-visual img {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			object-fit: cover;
			object-position: center center;
			opacity: 1;
			user-select: none;
			pointer-events: none;
		}

		.intro-visual .intro-real {
			z-index: 0;
		}

		.intro-visual .intro-bim {
			z-index: 1;
			clip-path: inset(0 50% 0 0);
		}

		.intro-slider {
			position: absolute;
			inset: 0;
			z-index: 4;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: ew-resize;
			touch-action: pan-y;
		}

		.intro-comparison {
			position: relative;
			width: 100%;
			min-height: 0;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			border-radius: 10px;
			background: transparent;
			border: none;
			box-shadow: none;
		}

		.intro-comparison::after {
			content: none;
		}

		.intro-credits {
			margin: 12px 0 0;
			display: grid;
			grid-template-columns: max-content minmax(0, 1fr);
			column-gap: 42px;
			row-gap: 7px;
			color: var(--intro-credit-color);
			font-size: var(--intro-credit-size);
			line-height: var(--intro-credit-line);
		}

		.intro-credit-label {
			display: block;
			color: var(--text);
			font-weight: 700;
		}

		.intro-credit-project {
			grid-column: 1 / -1;
			color: var(--text);
			font-weight: 700;
		}

		.intro-handle {
			position: absolute;
			top: 0;
			left: 18%;
			z-index: 4;
			width: 1px;
			height: 100%;
			background: rgba(17,17,17,0.55);
			transform: translateX(-50%);
			pointer-events: none;
		}

		.intro-handle::before,
		.intro-handle::after {
			content: "";
			position: absolute;
			top: 10px;
			width: 0;
			height: 0;
		}

		.intro-handle::before {
			right: 7px;
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			border-right: 7px solid var(--text);
		}

		.intro-handle::after {
			left: 7px;
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			border-left: 7px solid var(--text);
		}

		.intro-main {
			position: relative;
			z-index: 5;
			grid-column: 1;
			grid-row: 2;
			width: 100%;
			max-width: 320px;
		}

		.intro-brand,
		.intro-heading,
		.intro-details {
			position: relative;
			z-index: 5;
			width: 100%;
			max-width: 320px;
			text-align: left;
			color: var(--text);
			grid-column: 1;
		}

		.intro-brand {
			align-self: end;
			grid-row: 1;
		}

		.intro-heading {
			align-self: start;
		}

		.intro-details {
			align-self: start;
		}

		/* --- NASLOV H1 (ARCHICAD / BIM / GDL) --- */
		.intro h1 {
			margin: 0 0 30px;
			font-weight: 800;
			line-height: var(--intro-title-line);
			letter-spacing: -0.06em;
			font-size: var(--intro-title-size);
			color: var(--intro-title-color);
		}

		/* --- IDENTIFIKACIJSKA VRSTICA (pod H1) --- */
		.intro-tag {
			display: inline-block;
			margin: 0 0 30px;
			padding: 0;
			border-bottom: none;
			font-size: var(--intro-tag-size);
			line-height: var(--intro-tag-line);
			font-weight: 800;
			letter-spacing: 0.01em;
			color: var(--intro-tag-color);
		}

		/* --- UVODNI ODSTAVEK --- */
		.intro-lead {
			margin: 0;
			max-width: 100%;
			line-height: var(--intro-lead-line);
			color: var(--intro-lead-color);
			font-weight: 500;
			font-size: var(--intro-lead-size);
		}

		/* --- MANJŠI PODNASLOV POD UVODNIM ODSTAVKOM --- */
		.intro-sub {
			margin-top: 48px;
			line-height: var(--intro-sub-line);
			letter-spacing: 0.02em;
			color: var(--intro-sub-color);
			font-weight: 500;
			font-size: var(--intro-sub-size);
			text-align: left;
		}

		/* --- WRAPPER ZA GUMB --- */
		.intro-cta {
			margin-top: 54px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}

		.intro-cta .btn-download {
			width: 100%;
			justify-content: center;
			text-align: center;
		}


		/* =========================================================
			 GLAVNI MENI
			 Strani v prvi vrstici so rocno zapisane v site-menu.js.
			 Poglavja in kartice se berejo iz data-menu-title oznak v HTML.
		========================================================= */

		.site-menu {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 900;
			display: flex;
			flex-direction: column;
			align-items: center;
			pointer-events: none;
			opacity: 0;
			transform: translate3d(0, -14px, 0);
			transition: opacity 180ms ease, transform 180ms ease;
		}

		.site-menu.is-visible {
			pointer-events: auto;
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}

		.site-menu-bar {
			width: 100%;
			min-height: 44px;
			position: relative;
			display: flex;
			justify-content: center;
			gap: clamp(18px, 4vw, 44px);
			padding: 10px 18px;
			background: rgba(243, 243, 240, 0.82);
			border-bottom: 1px solid rgba(17, 17, 17, 0.08);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
		}

		.site-menu-home,
		.site-menu-page,
		.site-menu-item,
		.site-menu-card {
			border: 0;
			background: transparent;
			font: inherit;
			color: var(--text);
			text-align: left;
			text-decoration: none;
			cursor: pointer;
		}

		.site-menu-home {
			padding: 3px 0;
			font-size: 13px;
			font-weight: 650;
			letter-spacing: 0;
			color: var(--text);
			opacity: 1;
		}

		.site-menu-home:hover,
		.site-menu-home:focus-visible {
			color: var(--text);
			opacity: 1;
		}

		.site-menu-page {
			padding: 3px 0;
			font-size: 13px;
			font-weight: 650;
			letter-spacing: 0;
			color: rgba(17, 17, 17, 0.72);
		}

		.site-menu-page:hover,
		.site-menu-page:focus-visible,
		.site-menu-page.is-active {
			color: var(--text);
		}

		.site-menu-home.is-active,
		.site-menu-page.is-active {
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 4px;
		}

		.site-menu-panel {
			width: 100%;
			max-height: 0;
			overflow: hidden;
			background: rgba(243, 243, 240, 0.94);
			border-bottom: 1px solid rgba(17, 17, 17, 0.08);
			box-shadow: 0 24px 80px rgba(17, 17, 17, 0.10);
			backdrop-filter: blur(22px);
			-webkit-backdrop-filter: blur(22px);
			transition: max-height 220ms ease;
		}

		.site-menu.is-open .site-menu-panel {
			max-height: min(62vh, 520px);
		}

		.site-menu-panel-inner {
			width: min(100%, var(--container));
			margin: 0 auto;
			padding: 34px 60px 42px;
			display: grid;
			grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
			gap: 56px;
		}

		.site-menu-column {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
		}

		.site-menu-item {
			width: 100%;
			padding: 7px 0;
			font-size: 22px;
			font-weight: 800;
			line-height: 1.05;
			color: rgba(17, 17, 17, 0.48);
		}

		.site-menu-item:hover,
		.site-menu-item:focus-visible {
			color: var(--text);
		}

		.site-menu-item.is-active {
			color: var(--text);
		}

		.site-menu-card {
			padding: 6px 0;
			font-size: 16px;
			font-weight: 550;
			line-height: 1.25;
			color: rgba(17, 17, 17, 0.66);
		}

		.site-menu-card:hover,
		.site-menu-card:focus-visible {
			color: var(--text);
		}

		.site-menu-empty {
			margin: 0;
			color: var(--muted);
			font-size: 16px;
		}

		@media (max-width: 700px) {
			.site-menu-bar {
				justify-content: flex-start;
				gap: clamp(14px, 4vw, 22px);
				padding-inline: 18px;
				overflow-x: auto;
				scrollbar-width: none;
			}

			.site-menu-bar::-webkit-scrollbar {
				display: none;
			}

			.site-menu-home,
			.site-menu-page {
				flex: 0 0 auto;
				font-size: 13px;
			}

			.site-menu.is-open .site-menu-panel {
				max-height: min(60vh, 360px);
			}

			.site-menu-panel-inner {
				width: 100%;
				padding: 22px 28px 28px;
				display: grid;
				grid-template-columns: 1fr;
				gap: 18px;
			}

			.site-menu-primary {
				gap: 6px;
			}

			.site-menu-secondary {
				display: flex;
				padding-left: 22px;
				gap: 4px;
			}

			.site-menu-item {
				width: 100%;
				padding: 10px 0;
				font-size: 28px;
				line-height: 1.05;
			}

			.site-menu-item.is-active {
				padding-left: 16px;
				border-left: 3px solid var(--text);
			}

			.site-menu-card {
				width: 100%;
				padding: 6px 0;
				font-size: 18px;
				line-height: 1.22;
				color: rgba(17, 17, 17, 0.55);
			}
		}


		/* =========================================================
			 CHAPTER — poglavja (ARCHICAD / BIM / GDL / KONTAKT)
		========================================================= */

		.chapter {
			width: 100%;
			max-width: var(--container);
			margin: 0 auto;
			padding: 140px 60px 180px;
			display: grid;
			grid-template-columns:
				minmax(260px, 320px)
				minmax(0, 1fr);
			gap: 80px;
			align-items: start;
		}

		@media (min-width: 1101px) {
			body[data-page="naslovnica"] .chapter {
				padding-top: 115px;
				padding-bottom: 145px;
			}
		}

		/* --- STICKY NASLOV POGLAVJA (levi stolpec) --- */
		.chapter-title {
			position: sticky;
			top: var(--sticky-top);
			align-self: start;
		}

		.chapter-title-inner {
			padding-right: 30px;
		}

		/* --- VELIKA ČRKA POGLAVJA (npr. "ARCHICAD", "BIM") --- */
		.chapter-title h1,
		.chapter-title h2 {
			margin: 0 0 18px;
			font-weight: 800;
			line-height: var(--chapter-title-line);
			letter-spacing: -0.05em;
			font-size: var(--chapter-title-size);
			color: var(--chapter-title-color);
		}

		/* --- PODNASLOV POGLAVJA (npr. "orodje navdiha") --- */
		.chapter-title p {
			margin: 0;
			line-height: var(--chapter-subtitle-line);
			color: var(--chapter-subtitle-color);
			font-size: var(--chapter-subtitle-size);
		}


		/* =========================================================
			 VSEBINSKI BLOKI (kartice na desni strani)
		========================================================= */

		.chapter-content {
			width: 100%;
			max-width: var(--content-width);
			display: flex;
			flex-direction: column;
			gap: 42px;
		}

		/* --- KARTICA --- */
		.content-block {
			position: relative;
			width: 100%;
			background: var(--surface);		/* BARVA: ozadje kartice */
			border-radius: var(--radius);
			padding: 60px;
			overflow: hidden;
			border: 1px solid rgba(0,0,0,0.04);
			box-shadow:
				0 1px 2px rgba(0,0,0,0.03),
				0 10px 30px rgba(0,0,0,0.04);
		}

		/* --- NASLOV ZNOTRAJ KARTICE --- */
		.block-title {
			margin: 0 0 var(--content-title-gap);
			font-weight: var(--content-title-weight);
			line-height: var(--content-title-line);
			letter-spacing: var(--content-title-spacing);
			font-size: var(--content-title-size);
			color: var(--content-title-color);
		}

		/* --- BESEDILO ZNOTRAJ KARTICE --- */
		.block-body {
			margin: 0;
			text-align: left;
			color: var(--content-text-color);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
		}

		.block-body + .block-body {
			margin-top: 14px;
		}

		.experience-title {
			display: flex;
			align-items: center;
			gap: 14px;
			margin-bottom: var(--content-title-gap);
		}

		.experience-title .block-title {
			margin-bottom: 0;
		}

		.experience-title img {
			display: block;
			width: 22px;
			height: 22px;
			opacity: 0.5;
		}


		/* --- SEZNAM S KROGCI --- */
		.bullet-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: var(--content-list-gap);
		}

		.bullet-list li {
			display: flex;
			align-items: baseline;
			gap: var(--content-inline-gap);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
			color: var(--content-text-color);
		}

		.bullet-list li::before {
			content: "";
			display: inline-block;
			width: var(--content-bullet-size);
			height: var(--content-bullet-size);
			border-radius: 50%;
			background: var(--content-text-color);
			flex-shrink: 0;
			margin-top: 0.6em;
		}
		/* --- SEZNAM Z IKONAMI --- */
		.icon-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: var(--content-list-gap);
		}

		.icon-list li {
			display: flex;
			align-items: center;
			gap: var(--content-inline-gap);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
			color: var(--content-text-color);
		}

		.icon-list li img {
			width: var(--content-icon-size);
			height: var(--content-icon-size);
			object-fit: contain;
			flex-shrink: 0;
			opacity: var(--content-icon-opacity);
		}

		.reference-logo-list li {
			gap: clamp(18px, 3vw, 34px);
			align-items: center;
		}

		.reference-logo-list {
			gap: clamp(22px, 3vw, 30px);
		}

		.reference-logo-list li img {
			width: clamp(112px, 20vw, 170px);
			height: 56px;
			object-fit: contain;
			object-position: left center;
			opacity: 0.86;
		}

		.reference-logo-list li img.reference-logo-exgocon {
			height: 82px;
			opacity: 1;
		}

		.reference-copy {
			display: flex;
			min-width: 0;
			flex-direction: column;
			align-items: flex-start;
			gap: 3px;
		}

		.reference-copy strong {
			color: var(--text);
			font-size: var(--content-text-size);
			font-weight: 700;
		}

		.reference-country {
			color: var(--content-text-color);
			font-size: 11px;
			font-weight: 650;
			letter-spacing: 0.12em;
			line-height: 1.2;
			text-transform: uppercase;
		}

		.reference-copy small {
			color: var(--content-text-color);
			font-size: 14px;
			line-height: 1.4;
		}


		/* =========================================================
			 KONTAKT — posebne komponente
		========================================================= */

		.title-inline {
			display: flex;
			align-items: baseline;
			gap: 18px;
			flex-wrap: wrap;
			margin-bottom: 18px;
		}

		.title-inline .block-title {
			margin: 0;
		}

		/* --- OPOMBA POLEG NASLOVA --- */
		.title-note {
			line-height: var(--content-note-line);
			letter-spacing: 0.01em;
			color: var(--content-text-color);
			font-size: var(--content-note-size);
		}

		.testimonial-source {
			color: inherit;
			text-decoration-line: underline;
			text-decoration-color: rgba(0, 0, 0, 0.3);
			text-decoration-thickness: 1px;
			text-underline-offset: 0.22em;
		}

		.testimonial-source:hover {
			color: var(--text);
			text-decoration-color: currentColor;
		}

		.testimonial-heading {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 24px;
		}

		.testimonial-language {
			display: flex;
			flex: 0 0 auto;
			gap: 12px;
		}

		.testimonial-language button {
			padding: 0 0 3px;
			border: 0;
			border-bottom: 1px solid transparent;
			background: none;
			color: var(--content-text-color);
			font: inherit;
			font-size: var(--content-note-size);
			font-weight: 700;
			cursor: pointer;
		}

		.testimonial-language button[aria-pressed="true"] {
			border-bottom-color: currentColor;
			color: var(--text);
		}

		.testimonial-language button:focus-visible,
		.testimonial-details summary:focus-visible {
			outline: 2px solid var(--text);
			outline-offset: 4px;
		}

		.testimonial-metric {
			display: flex;
			align-items: baseline;
			gap: 22px;
			margin: 34px 0 6px;
			padding-top: 24px;
			border-top: 1px solid var(--line);
		}

		.testimonial-metric strong {
			flex: 0 0 auto;
			color: var(--text);
			font-size: clamp(38px, 4vw, 58px);
			line-height: 0.95;
			letter-spacing: -0.055em;
		}

		.testimonial-metric span {
			max-width: 330px;
			color: var(--content-text-color);
			font-size: var(--content-note-size);
			line-height: var(--content-note-line);
		}

		.testimonial-details {
			margin-top: 30px;
		}

		.testimonial-details summary {
			display: inline-block;
			color: var(--text);
			font-size: var(--content-note-size);
			font-weight: 700;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.3em;
			cursor: pointer;
			list-style: none;
		}

		.testimonial-details summary::-webkit-details-marker {
			display: none;
		}

		.testimonial-close-label {
			display: none;
		}

		.testimonial-details[open] .testimonial-open-label {
			display: none;
		}

		.testimonial-details[open] .testimonial-close-label {
			display: inline;
		}

		.testimonial-full {
			margin-top: 32px;
			padding-top: 30px;
			border-top: 1px solid var(--line);
		}

		.testimonial-card.is-expanded .testimonial-preview {
			display: none;
		}

		.testimonial-card [hidden] {
			display: none !important;
		}

		/* --- SEZNAM KONTAKTNIH PODATKOV --- */
		.contact-list {
			display: flex;
			flex-direction: column;
			gap: 0;
		}

		.contact-list div {
			line-height: var(--content-contact-line);
			letter-spacing: 0.01em;
			color: var(--content-text-color);
			font-size: var(--content-text-size);
		}

		.contact-list a {
			color: var(--content-text-color);
			text-decoration: none;
		}

		.contact-list a:hover {
			color: var(--text);
		}

		.contact-photo {
			width: clamp(96px, 18vw, 150px);
			aspect-ratio: 1;
			margin: 28px 0 0;
			border-radius: 50%;
			overflow: hidden;
			background: var(--line);
		}

		.contact-photo img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}


		/* =========================================================
			 PRENOSI — video predvajalnik in obrazec
		========================================================= */

		/* --- VIDEO / GIF PREDVAJALNIK ---
			 Zamenjaj src v HTML z dejansko potjo do datoteke.
			 Priporočena pot: ./video/okvir.mp4
			 Za gif: zamenjaj <video> z <img src="./video/okvir.gif" loading="lazy"> */
		.preview-media {
			width: 100%;
			border-radius: 16px;					/* OBLIKA: zaobljenost videa */
			margin: 40px 0;								/* RAZMIK: nad in pod videom */
			overflow: hidden;
			background: var(--bg);				/* BARVA: ozadje med nalaganjem */
		}

		.preview-media video,
		.preview-media img {
			width: 100%;
			height: auto;
			display: block;
		}

		/* --- SEKCIJA OBRAZCA ---
			 Ločena od opisa z zgornjo črto. */
		.download-form {
		/*	border-top: 1px solid var(--line);	BARVA: ločilna črta */
			padding-top: 36px;
		}

		#kontaktni-obrazec .download-form {
			padding-top: 0;
		}

		/* --- NASLOV OBRAZCA --- */
		.download-form-title {
			font-size: var(--content-text-size);
			font-weight: 600;
			color: var(--content-text-color);
			margin: 0 0 6px 0;
			letter-spacing: 0.01em;
		}

				/* --- OPIS OBRAZCA --- */
		.download-form-desc {
			font-size: var(--content-text-size);
			color: var(--content-text-color);
			margin: 0 0 20px 0;
			line-height: var(--content-line-height);
		}


		/* =========================================================
			 MAILERLITE — prilagoditev obrazca stilu strani
		========================================================= */

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper {
			background-color: transparent !important;
			border: none !important;
			border-radius: 0 !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
			max-width: 100% !important;
		}

		/* Skrij privzeti Mailerlite naslov in opis */
		#mlb2-42687116.ml-form-embedContainer .ml-form-embedBody .ml-form-embedContent {
			display: none !important;
		}

		/* Padding na nič — kontroliramo sami */
		#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
		#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
			padding: 0 !important;
		}

		/* Vnosno polje za email */
		#mlb2-42687116.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input {
			width: 100% !important;
			box-sizing: border-box !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			line-height: var(--content-line-height) !important;
			border: 1px solid var(--line) !important;
			border-radius: 12px !important;
			padding: 12px 16px !important;
			color: var(--text) !important;
			background-color: var(--bg) !important;
		}

		#mlb2-42687116.ml-form-embedContainer input::placeholder,
		#mlb2-42916168.ml-form-embedContainer input::placeholder,
		#mlb2-42916168.ml-form-embedContainer textarea::placeholder {
			color: var(--muted) !important;
			opacity: 0.75 !important;
		}

		/* Gumb za potrditev */
		#mlb2-42687116.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button {
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			font-weight: 600 !important;
			border-radius: 999px !important;
			background-color: var(--text) !important; /* BARVA OZADJA: gumb */
			padding: 12px 26px !important;
			transition: background-color 0.25s ease !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button:hover {
			background-color: #333333 !important;			/* BARVA OZADJA: hover */
		}

		/* Sporočilo po uspešni prijavi */
		#mlb2-42687116.ml-form-embedContainer .ml-form-successBody .ml-form-successContent h4 {
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			color: var(--text) !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-successBody .ml-form-successContent p {
			font-family: var(--font-main) !important;
			color: var(--content-text-color) !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedPermissions,
		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow {
			margin: 0 0 20px 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--form-legal-size) !important;
			line-height: var(--form-legal-line) !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedPermissions p,
		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow p {
			margin: 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--form-legal-size) !important;
			line-height: var(--form-legal-line) !important;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow label {
			display: flex !important;
			gap: 12px !important;
			align-items: flex-start !important;
			cursor: pointer;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow input[type="checkbox"] {
			width: 18px !important;
			height: 18px !important;
			margin: 3px 0 0 0 !important;
			flex: 0 0 auto;
			-webkit-appearance: none;
			appearance: none;
			border: 2px solid var(--text);
			border-radius: 2px;
			background-color: transparent;
			accent-color: var(--text);
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow input[type="checkbox"]:checked {
			background-color: var(--text);
			background-image: linear-gradient(45deg, transparent 45%, var(--surface) 45%, var(--surface) 58%, transparent 58%),
				linear-gradient(-45deg, transparent 52%, var(--surface) 52%, var(--surface) 65%, transparent 65%);
			background-position: 3px 8px, 7px 8px;
			background-repeat: no-repeat;
			background-size: 6px 6px, 8px 6px;
		}

		#mlb2-42687116.ml-form-embedContainer .ml-form-embedPermissions a,
		#mlb2-42687116.ml-form-embedContainer .ml-form-checkboxRow a {
			color: var(--text) !important;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 3px;
		}

		/* Kontaktni obrazec v kartici "Pisi mi" */
		#mlb2-42916168.ml-form-embedContainer {
			display: block !important;
			width: 100% !important;
			margin: 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-align-center {
			display: block !important;
			text-align: left !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedWrapper {
			width: 100% !important;
			max-width: none !important;
			background-color: transparent !important;
			border: none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			padding: 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
		#mlb2-42916168.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
			padding: 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedContent {
			display: none !important;
		}

		#mlb2-42916168.ml-form-embedContainer .block-body {
			margin: 0 0 24px 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .contact-block-form .ml-field-group > label {
			position: absolute !important;
			width: 1px !important;
			height: 1px !important;
			padding: 0 !important;
			margin: -1px !important;
			overflow: hidden !important;
			clip: rect(0, 0, 0, 0) !important;
			white-space: nowrap !important;
			border: 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-fieldRow {
			margin: 0 0 16px 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer input,
		#mlb2-42916168.ml-form-embedContainer textarea {
			width: 100% !important;
			box-sizing: border-box !important;
			border: 1px solid var(--line) !important;
			border-radius: 12px !important;
			background-color: var(--bg) !important;
			color: var(--text) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			line-height: var(--content-line-height) !important;
			padding: 12px 16px !important;
		}

		#mlb2-42916168.ml-form-embedContainer textarea {
			resize: vertical;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-field-mailcontent textarea {
			min-height: 110px;
			padding-top: 14px !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedPermissions {
			margin: 0 0 20px 0 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedPermissions p {
			margin: 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--form-legal-size) !important;
			line-height: var(--form-legal-line) !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedPermissions a {
			color: var(--text) !important;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 3px;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedSubmit {
			margin: 0 !important;
			width: 100% !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedSubmit button {
			width: 100% !important;
			border: none !important;
			border-radius: 999px !important;
			background-color: var(--text) !important;
			color: var(--surface) !important;
			cursor: pointer;
			font-family: var(--font-main) !important;
			font-size: var(--button-text-size) !important;
			font-weight: 600 !important;
			line-height: var(--button-line-height) !important;
			padding: 14px 26px !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-embedSubmit button:hover {
			background-color: #333333 !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-successContent h4 {
			margin: 0 0 var(--content-title-gap) 0 !important;
			color: var(--content-title-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-title-size) !important;
			font-weight: var(--content-title-weight) !important;
			line-height: var(--content-title-line) !important;
		}

		#mlb2-42916168.ml-form-embedContainer .ml-form-successContent p {
			margin: 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			line-height: var(--content-line-height) !important;
		}

		#mlb2-42916168.ml-form-embedContainer .contact-form-message {
			display: none;
			margin: 0 0 16px 0;
			color: #b00020;
			font-size: var(--form-legal-size);
			line-height: var(--form-legal-line);
		}

		#mlb2-42916168.ml-form-embedContainer .contact-form-message.is-visible {
			display: block;
		}

		#mlb2-42916168.ml-form-embedContainer .contact-hp {
			position: absolute;
			left: -9999px;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		/* Obrazec za prenose gre prek download.php, vizualno pa sledi kontaktnemu obrazcu. */
		#download-form-panel.ml-form-embedContainer {
			display: block !important;
			width: 100% !important;
			margin: 0 !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-align-center {
			display: block !important;
			text-align: left !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedWrapper {
			width: 100% !important;
			max-width: none !important;
			background-color: transparent !important;
			border: none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			padding: 0 !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
		#download-form-panel.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
			padding: 0 !important;
		}

		#download-form-panel.ml-form-embedContainer .block-body {
			margin: 0 0 18px 0 !important;
		}

		.download-current {
			margin: 0 0 18px 0;
			color: var(--content-text-color);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
		}

		.download-current p {
			margin: 0 0 8px 0;
		}

		.download-selection-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 7px;
		}

		.download-selection-list li {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 16px;
			color: var(--text);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
		}

		.download-selection-list li.is-empty {
			color: var(--content-text-color);
		}

		.download-selection-list button {
			border: 0;
			padding: 0;
			background: transparent;
			color: var(--muted);
			cursor: pointer;
			font-family: var(--font-main);
			font-size: var(--form-legal-size);
			line-height: var(--form-legal-line);
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 3px;
		}

		.download-selection-list button:hover {
			color: var(--text);
		}

		#download-form-panel.ml-form-embedContainer .ml-form-fieldRow {
			margin: 0 0 16px 0 !important;
		}

		#download-form-panel.ml-form-embedContainer input {
			width: 100% !important;
			box-sizing: border-box !important;
			border: 1px solid var(--line) !important;
			border-radius: 12px !important;
			background-color: var(--bg) !important;
			color: var(--text) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			line-height: var(--content-line-height) !important;
			padding: 12px 16px !important;
		}

		#download-form-panel.ml-form-embedContainer input::placeholder {
			color: var(--muted) !important;
			opacity: 0.75 !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedPermissions,
		#download-form-panel.ml-form-embedContainer .ml-form-checkboxRow {
			margin: 0 0 20px 0 !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedPermissions p,
		#download-form-panel.ml-form-embedContainer .ml-form-checkboxRow p {
			margin: 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--form-legal-size) !important;
			line-height: var(--form-legal-line) !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedPermissions a {
			color: var(--text) !important;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 3px;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-checkboxRow label {
			display: flex !important;
			gap: 12px !important;
			align-items: flex-start !important;
			cursor: pointer;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-checkboxRow input[type="checkbox"] {
			width: 18px !important;
			height: 18px !important;
			margin: 3px 0 0 0 !important;
			flex: 0 0 auto;
			-webkit-appearance: none;
			appearance: none;
			border: 2px solid var(--text);
			border-radius: 2px;
			background-color: transparent;
			accent-color: var(--text);
		}

		#download-form-panel.ml-form-embedContainer .ml-form-checkboxRow input[type="checkbox"]:checked {
			background-color: var(--text);
			background-image: linear-gradient(45deg, transparent 45%, var(--surface) 45%, var(--surface) 58%, transparent 58%),
				linear-gradient(-45deg, transparent 52%, var(--surface) 52%, var(--surface) 65%, transparent 65%);
			background-position: 3px 8px, 7px 8px;
			background-repeat: no-repeat;
			background-size: 6px 6px, 8px 6px;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedSubmit {
			margin: 0 !important;
			width: 100% !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedSubmit button,
		.download-select-button {
			width: 100% !important;
			border: none !important;
			border-radius: 999px !important;
			background-color: var(--text) !important;
			color: var(--surface) !important;
			cursor: pointer;
			font-family: var(--font-main) !important;
			font-size: var(--button-text-size) !important;
			font-weight: 600 !important;
			line-height: var(--button-line-height) !important;
			padding: 14px 26px !important;
			text-align: center;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-embedSubmit button:hover,
		.download-select-button:hover {
			background-color: #333333 !important;
		}

		.download-select-button.is-selected,
		.download-select-button.is-selected:hover,
		.download-select-button.is-selected:disabled {
			width: auto !important;
			background-color: transparent !important;
			color: var(--muted) !important;
			box-shadow: none !important;
			cursor: default !important;
			justify-content: flex-start !important;
			padding: 0 !important;
			pointer-events: none;
			text-align: left;
			transform: none !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-successContent h4 {
			margin: 0 0 var(--content-title-gap) 0 !important;
			color: var(--content-title-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-title-size) !important;
			font-weight: var(--content-title-weight) !important;
			line-height: var(--content-title-line) !important;
		}

		#download-form-panel.ml-form-embedContainer .ml-form-successContent p {
			margin: 0 !important;
			color: var(--content-text-color) !important;
			font-family: var(--font-main) !important;
			font-size: var(--content-text-size) !important;
			line-height: var(--content-line-height) !important;
		}

		#download-form-panel.ml-form-embedContainer .download-form-message {
			display: none;
			margin: 0 0 16px 0;
			color: #b00020;
			font-size: var(--form-legal-size);
			line-height: var(--form-legal-line);
		}

		#download-form-panel.ml-form-embedContainer .download-form-message.is-visible {
			display: block;
		}

		#download-form-panel.ml-form-embedContainer .download-hp {
			position: absolute;
			left: -9999px;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		.download-card .preview-media {
			margin-bottom: 26px;
		}


		/* =========================================================
			 TIMELINE — animiran blok z letnico
		========================================================= */

		.timeline-pin-wrap {
			position: relative;
			width: 100%;
			height: var(--timeline-scroll-height);
		}

		.timeline-sticky {
			position: sticky;
			top: var(--sticky-top);
		}

		.timeline-block {
			min-height: 0;
		}

		.timeline {
			position: relative;
			height: 240px;
			margin-bottom: 50px;
		}

		/* --- LETNICA (npr. "1995" → "2025") ---
			 Barva in pozicija se animirata z JavaScriptom. */
		.year {
			position: absolute;
			top: 42%;
			left: 0;
			transform: translateY(-50%);
			font-weight: 800;
			line-height: 1;
			letter-spacing: -0.06em;
			white-space: nowrap;
			color: #d0d0d0;							/* BARVA: začetna barva letnice */
			font-size: var(--timeline-year-size);
			will-change: transform, color;
		}

		.year-end {
			display: none;
		}

		/* --- PROGRESS VRSTICA POD LETNICO --- */
		.progress {
			position: absolute;
			top: calc(42% + 46px);
			width: 100%;
			height: 2px;
			background: var(--line);
			overflow: hidden;
		}

		.progress-fill {
			width: 0%;
			height: 100%;
			background: var(--text);	/* BARVA: polnitev progress vrstice */
		}

		/* --- OZNAKA POD PROGRESS VRSTICO (ime programa, ikona) --- */
		.start-marker {
			position: absolute;
			top: calc(42% + 70px);
			left: 0;
			display: flex;
			align-items: center;
			gap: 14px;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: var(--content-text-color);
			font-size: var(--timeline-label-size);
		}

		.start-marker img {
			width: 22px;
			opacity: 0.5;
		}


		/* =========================================================
			 STORY — drsno besedilo z masko
		========================================================= */

		.story-window {
			position: relative;
			height: 340px;
			overflow: hidden;
			mask-image: linear-gradient(
				to bottom,
				transparent,
				black 10%,
				black 90%,
				transparent
			);
		}

		.story-flow {
			white-space: pre-line;
			text-align: left;
			color: var(--content-text-color);
			font-size: var(--content-text-size);
			line-height: var(--content-line-height);
			will-change: transform;
		}


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

		footer {
			position: relative;
			min-height: 140vh;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 60px;
			background: var(--bg);
			overflow: hidden;
		}

		.footer-spacer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 40vh;
		}

		/* --- NAPIS V FOOTERJU --- */
		footer h2 {
			margin: 0;
			line-height: 0.9;
			letter-spacing: -0.06em;
			font-size: clamp(54px, 8vw, 140px); /* VELIKOST: min / fluid / max */
		}


		/* =========================================================
			 TABLET + MOBILE	(do 1100px)
		========================================================= */

		@media (max-width: 1100px) {
			.intro-scroll {
				height: auto;
			}

			.intro {
				height: auto;
				min-height: 0;
				position: relative;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 24px;
				padding: 40px 20px 56px;
				overflow: visible;
			}

			.intro-visual {
				position: relative;
				left: auto;
				right: auto;
				top: auto;
				transform: none;
				width: 100%;
				max-width: var(--content-width);
				margin: 0 auto 18px;
				order: 3;
			}

			.intro-comparison {
				min-height: 0;
				aspect-ratio: 4 / 3;
				border-radius: var(--radius);
				touch-action: pan-y;
			}

			.intro-comparison::after {
				content: none;
			}

			.intro-credits {
				grid-template-columns: max-content minmax(0, 1fr);
				gap: 6px;
				margin-top: 10px;
			}

			.intro-brand,
			.intro-main,
			.intro-heading,
			.intro-details {
				max-width: var(--content-width);
				margin: 0 auto;
			}

			.intro-main {
				display: contents;
			}

			.intro-brand {
				order: 1;
			}

			.intro-heading {
				order: 2;
			}

			.intro-details {
				order: 4;
			}

			.intro h1 {
				font-size: var(--intro-title-size);
			}

			.chapter {
				display: flex;
				flex-direction: column;
				gap: 36px;
				padding: 0 20px 120px;
			}

			#archicad {
				padding-top: 48px;
			}

			.chapter-title {
				position: sticky;
				top: var(--menu-height);
				z-index: 100;
				width: 100%;
				max-width: var(--content-width);
				margin: 0 auto;
				background-color: var(--bg);
				padding: 28px 0 20px;
			}

			.chapter-title-inner {
				padding-right: 0;
			}

			.chapter-title h1,
			.chapter-title h2 {
				margin-bottom: 10px;
				font-size: var(--chapter-title-size);
			}

			.chapter-title p {
				font-size: var(--chapter-subtitle-size);
			}

			.chapter-content {
				width: 100%;
				max-width: var(--content-width);
				margin: 0 auto;
				gap: 28px;
			}

			.content-block {
				width: 100%;
				padding: 40px 28px;
			}

			/* TIMELINE na mobilnih napravah */
			.timeline-pin-wrap	{ height: var(--timeline-scroll-height-onecol); }
			.timeline-sticky		{ position: sticky; top: var(--timeline-sticky-top-onecol); }
			.timeline-block			{ min-height: 0; }
			.timeline						{ height: 170px; margin-bottom: 30px; }
			.year								{ top: 32%; font-size: var(--timeline-year-size-onecol); }

			.story-window {
				height: 300px;
				overflow: hidden;
				mask-image: linear-gradient(
					to bottom,
					transparent,
					black 10%,
					black 90%,
					transparent
				);
			}

			.story-flow	 { text-align: left; }
			.block-body	 { text-align: left; }
		}


		/* =========================================================
			 LEZECA OZJA POSTAVITEV
			 Ce je zaslon sirsi kot visok, poglavja ostanejo dvostolpicna.
			 To pomaga predvsem pri telefonih in tablicah v lezecem polozaju.
		========================================================= */

		@media (max-width: 1100px) and (orientation: landscape) {
			.chapter {
				display: grid;
				grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
				gap: clamp(28px, 6vw, 56px);
				padding: 88px 24px 120px;
			}

			#archicad {
				padding-top: 88px;
			}

			.chapter-title {
				top: calc(var(--menu-height) + 20px);
				max-width: none;
				margin: 0;
				padding: 0;
				background-color: transparent;
			}

			.chapter-title::before {
				content: none;
			}

			.chapter-title h1,
			.chapter-title h2 {
				font-size: clamp(34px, 5.4vw, 58px);
				letter-spacing: -0.045em;
			}

			.chapter-content {
				max-width: var(--content-width);
				margin: 0;
				gap: 28px;
			}

			.content-block {
				padding: clamp(28px, 4vw, 44px);
			}

			.timeline-sticky {
				top: var(--timeline-sticky-top-onecol);
			}
		}

		@media (max-width: 1100px) and (orientation: landscape) and (max-height: 560px) {
			.timeline-pin-wrap {
				height: 190vh;
			}

			.timeline-block {
				padding-block: 18px 24px;
			}

			.timeline {
				height: 104px;
				margin-bottom: 30px;
			}

			.year {
				top: 28%;
				font-size: clamp(42px, 13vh, 68px);
			}

			.start-marker {
				gap: 9px;
				font-size: 11px;
			}

			.start-marker img {
				width: 18px;
			}

			.story-window {
				height: min(34vh, 145px);
			}
		}


		/* =========================================================
			 VMESNI ZASLONI	 (701px do 1100px)
		========================================================= */

		@media (min-width: 701px) and (max-width: 1100px) {
			:root {
				/* --- PREPISI ZA VMESNE ZASLONE ---
					 Če želiš, da so enaki kot na desktopu, izbriši posamezno vrstico. */
				--content-width: min(100%, 720px);
				--content-title-size: 24px;
				--intro-brand-size: 14px;
				--intro-title-size: clamp(44px, 6vw, 56px);
				--intro-title-line: 0.9;
				--intro-tag-size: 19px;
				--intro-lead-size: 16px;
				--intro-lead-line: 1.68;
				--intro-sub-size: 16px;
				--intro-sub-line: 1.68;
				--intro-credit-size: 12px;
				--intro-credit-line: 1.3;
			}

			.intro {
				gap: clamp(10px, 1.5dvh, 16px);
				padding: 22px 20px 30px;
			}

			.btn-modul3 {
				margin-bottom: 10px;
			}

			.intro h1 {
				margin-bottom: 0;
			}

			.intro-comparison {
				height: auto;
				aspect-ratio: 4 / 3;
			}

			.intro-credits {
				margin-top: 7px;
				column-gap: 28px;
				row-gap: 3px;
			}

			.intro-tag {
				margin-bottom: 10px;
			}

			.intro-sub {
				margin-top: 12px;
			}

			.intro-cta {
				margin-top: 14px;
			}
		}


		/* =========================================================
			 MALI ZASLONI	 (do 700px)
		========================================================= */

		@media (max-width: 700px) {

			:root {
				/* --- PREPISI ZA TELEFONE ---
					 Tu prilagodi velikosti in razmake, kadar je telefon
					 drugačen od osnovnih nastavitev na vrhu CSS-a. */
				--content-width: 100%;
				--chapter-title-size: clamp(34px, 5.4vw, 58px);
				--content-title-size: 24px;
				--intro-brand-size: 13px;
				--intro-title-size: clamp(34px, 10.5vw, 42px);
				--intro-tag-size: 18px;
				--intro-lead-size: 16px;
				--intro-lead-line: 1.68;
				--intro-sub-size: 16px;
				--intro-sub-line: 1.68;
				--intro-credit-size: 11px;
				--intro-credit-line: 1.25;
				--timeline-label-size: 12px;
				--timeline-sticky-top-onecol: 148px;
			}

			.intro {
				height: auto;
				min-height: 0;
				gap: clamp(8px, 1.6dvh, 14px);
				padding: 16px 16px 24px;
				margin-bottom: 0;
			}

			.intro-comparison {
				width: 100%;
				margin: 0 auto;
				border-radius: 22px;
			}

			.btn-modul3 {
				margin-bottom: 8px;
			}

			.intro h1 {
				margin-bottom: 8px;
			}

			.intro-tag {
				margin-bottom: 8px;
			}

			.intro-sub {
				margin-top: 10px;
			}

			.intro-cta {
				margin-top: 12px;
			}

			.intro-credits {
				margin-top: 5px;
				column-gap: 18px;
				row-gap: 2px;
			}

			.chapter {
				padding: 0 16px 100px;
			}

			#archicad {
				padding-top: 36px;
			}

			.chapter-title {
				padding: 22px 0 18px;
			}

			body[data-page="varstvo"] .chapter-title {
				position: static;
				top: auto;
				z-index: auto;
			}

			.content-block {
				border-radius: 22px;
				padding: 34px 22px;
			}

			.timeline			 { height: 150px; }
			.story-window	 { height: 260px; }

			.preview-media {
				margin: 28px 0;
			}

		}

		/* =========================================================
		   SCROLL INDIKATOR
		========================================================= */

		.scroll-icon {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;

			font-size: 22px;
			width: 44px;
			height: 44px;

			display: flex;
			align-items: center;
			justify-content: center;

			border-radius: 50%;

			background: rgba(0, 0, 0, 0.12);
			color: rgba(0, 0, 0, 0.55);

			pointer-events: none;
			user-select: none;

			opacity: 0;
			transition: opacity 0.25s ease;
		}

		.scroll-icon.visible {
			opacity: 1;
		}

		#scroll-down {
			bottom: 20px;
		}

		#scroll-up {
			top: 20px;
		}

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

		.footer-nav {

			margin: 80px auto 40px auto;

			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 12px;

			font-size: 0.9rem;
		}

		.footer-nav a {

			color: var(--text);
			text-decoration: none;

			opacity: 0.6;
			transition: opacity 0.2s ease;
		}

		.footer-nav a:hover {
			opacity: 1;
		}

		.footer-nav span {
			opacity: 0.35;
		}

		.footer-nav-single a {
			font-size: var(--content-text-size);
			font-weight: 600;
			opacity: 0.7;
		}

		/* =========================================================
		   TESTNA GALERIJA
		   Kartica z eno veliko sliko, pikami in subtilnimi puscicami.
		   Novo sliko dodas v HTML kot nov .gallery-slides img element.
		========================================================= */

		.gallery-card {
			display: flex;
			flex-direction: column;
			gap: 28px;
		}

		.gallery-dots {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 7px;
			margin: 4px 0 -10px;
		}

		.gallery-dot {
			width: 7px;
			height: 7px;
			border: 0;
			border-radius: 50%;
			padding: 0;
			background: rgba(0,0,0,0.18);
			cursor: pointer;
			transition: background 0.2s ease, transform 0.2s ease;
		}

		.gallery-dot.is-active {
			background: var(--text);
		}

		.gallery-detail {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			gap: 14px;
			margin-top: -2px;
		}

		.gallery-stage {
			position: relative;
			overflow: visible;
			background: transparent;
			touch-action: pan-y;
			cursor: grab;
		}

		.gallery-stage:active {
			cursor: grabbing;
		}

		.gallery-detail-image {
			width: 100%;
			height: auto;
			display: block;
			object-fit: contain;
			border-radius: 0;
			background: transparent;
			cursor: zoom-in;
		}

		.gallery-arrow {
			position: absolute;
			top: 50%;
			width: 34px;
			height: 48px;
			border: 0;
			padding: 0;
			display: grid;
			place-items: center;
			background: transparent;
			color: rgba(17, 17, 17, 0.72);
			font: inherit;
			font-size: 38px;
			line-height: 1;
			cursor: pointer;
			opacity: 0.58;
			transform: translateY(-50%);
			transition: opacity 0.18s ease, color 0.18s ease;
		}

		.gallery-stage:hover .gallery-arrow,
		.gallery-arrow:focus-visible {
			opacity: 1;
		}

		.gallery-arrow:hover {
			color: var(--text);
		}

		.gallery-arrow-prev {
			left: -38px;
		}

		.gallery-arrow-next {
			right: -38px;
		}

		.gallery-lightbox {
			--lightbox-pad: clamp(18px, 4vw, 54px);
			position: fixed;
			inset: 0;
			z-index: 1200;
			display: grid;
			place-items: center;
			padding: var(--lightbox-pad);
			background: rgba(0,0,0,0.82);
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.18s ease;
		}

		.gallery-lightbox.is-open {
			opacity: 1;
			pointer-events: auto;
		}

		.gallery-lightbox-image {
			max-width: calc(100vw - var(--lightbox-pad) * 2);
			max-height: calc(100dvh - var(--lightbox-pad) * 2);
			width: auto;
			height: auto;
			display: block;
			object-fit: contain;
		}

		.gallery-lightbox-close {
			position: fixed;
			top: clamp(14px, 3vw, 28px);
			right: clamp(14px, 3vw, 28px);
			width: 44px;
			height: 44px;
			border: 0;
			padding: 0;
			display: grid;
			place-items: center;
			background: rgba(255,255,255,0.12);
			color: #fff;
			font: inherit;
			font-size: 32px;
			line-height: 1;
			cursor: pointer;
			transition: background 0.18s ease;
		}

		.gallery-lightbox-close:hover,
		.gallery-lightbox-close:focus-visible {
			background: rgba(255,255,255,0.22);
		}

		.gallery-credits {
			margin: 0;
			display: grid;
			grid-template-columns: max-content minmax(0, 1fr);
			column-gap: 42px;
			row-gap: 7px;
			color: var(--intro-credit-color);
			font-size: var(--intro-credit-size);
			line-height: var(--intro-credit-line);
		}

		.gallery-credit-label {
			display: block;
			color: var(--text);
			font-weight: 700;
		}

		.gallery-credit-project {
			grid-column: 1 / -1;
			color: var(--text);
			font-weight: 700;
		}

		@media (max-width: 700px) {
			.gallery-card {
				gap: 22px;
			}

			.gallery-dots {
				margin-bottom: -8px;
			}

			.gallery-detail-image {
				height: auto;
				border-radius: 0;
			}

			.gallery-arrow {
				display: none;
			}

			.gallery-credits {
				column-gap: 22px;
				row-gap: 5px;
			}
		}

/* =========================================================
   MAILERLITE EMBED — originalni strukturni CSS za obrazec za prenos
========================================================= */
.ml-form-embedSubmitLoad {
						display: inline-block;
						width: 20px;
						height: 20px;
					}
					.sr-only {
						position: absolute;
						width: 1px;
						height: 1px;
						padding: 0;
						margin: -1px;
						overflow: hidden;
						clip: rect(0,0,0,0);
						border: 0;
					}
					.ml-form-embedSubmitLoad:after {
						content: " ";
						display: block;
						width: 11px;
						height: 11px;
						margin: 1px;
						border-radius: 50%;
						border: 4px solid #fff;
						border-color: #ffffff #ffffff #ffffff transparent;
						animation: ml-form-embedSubmitLoad 1.2s linear infinite;
					}
					@keyframes ml-form-embedSubmitLoad {
						0%   { transform: rotate(0deg); }
						100% { transform: rotate(360deg); }
					}
					#mlb2-42687116.ml-form-embedContainer {
						box-sizing: border-box;
						display: table;
						margin: 0;
						position: static;
						width: 100% !important;
					}
					#mlb2-42687116.ml-form-embedContainer h4,
					#mlb2-42687116.ml-form-embedContainer p,
					#mlb2-42687116.ml-form-embedContainer span,
					#mlb2-42687116.ml-form-embedContainer button {
						text-transform: none !important;
						letter-spacing: normal !important;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper {
						background-color: transparent;
						border: none;
						box-sizing: border-box;
						display: inline-block !important;
						margin: 0;
						padding: 0;
						position: relative;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
						max-width: 100%;
						width: 100%;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
						padding: 0;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
						text-align: left;
						margin: 0 0 20px 0;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
						margin: 0;
						width: 100%;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
						margin: 0 0 20px 0;
						width: 100%;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
						margin: 0 0 10px 0;
						width: 100%;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
						margin: 0;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
						width: 100% !important;
						max-width: 100% !important;
						box-sizing: border-box !important;
						margin: 0;
						border: 1px solid var(--line) !important;
						border-radius: 12px !important;
						background-color: var(--bg) !important;
						color: var(--text) !important;
						font-family: var(--font-main) !important;
						font-size: var(--content-text-size) !important;
						line-height: var(--content-line-height) !important;
						height: auto;
						padding: 12px 16px !important;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
						margin: 0 0 20px 0;
						float: left;
						width: 100%;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
						background-color: var(--text) !important;
						border: none !important;
						border-radius: 999px !important;
						box-shadow: none !important;
						color: var(--surface) !important;
						cursor: pointer;
						font-family: var(--font-main) !important;
						font-size: var(--button-text-size) !important;
						font-weight: 600 !important;
						line-height: var(--button-line-height) !important;
						height: auto;
						padding: 14px 26px !important;
						width: 100% !important;
						box-sizing: border-box !important;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
						display: none;
					}
					#mlb2-42687116.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
						background-color: #333333 !important;
					}
					.ml-error input { border-color: red !important; }
					.ml-error .label-description,
					.ml-error label:first-child { color: #ff0000 !important; }
					@media only screen and (max-width: 400px) {
						.ml-form-embedWrapper.embedDefault,
						.ml-form-embedWrapper.embedPopup { width: 100% !important; }
					}

/* =========================================================
   NASLOVNICA — ozka postavitev novih navigacijskih kartic
========================================================= */
@media (max-width: 1100px) {
	.navigation-card {
		grid-template-columns: 102px minmax(0, 1fr);
		gap: 32px;
		padding: 40px 28px;
	}

	.navigation-card.project-card {
		gap: clamp(18px, 3vw, 32px);
	}

	.area-link-copy { transform: translateX(-28px); }
}

@media (max-width: 700px) {
	.navigation-card {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 18px;
		padding: 34px 22px;
	}

	.review-card.review-card-visual {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 18px;
	}

	.area-icon {
		width: 78px;
		height: 78px;
	}

	.project-thumbnail {
		width: 78px;
		height: 78px;
	}

	.area-icon svg {
		width: 78px;
		height: 78px;
	}

	.area-link-copy,
	.project-link-copy {
		min-width: 0;
	}

	.area-link-copy { transform: translateX(-22px); }

	.navigation-title {
		overflow-wrap: anywhere;
	}
}

/* =========================================================
   ZAČASNE STRANI IN SKUPNA NOGA
========================================================= */

.skeleton-card {
	min-height: 220px;
}

.site-footer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	padding: 76px 60px 30px;
	background: var(--text);
	color: var(--surface);
}

.site-footer a {
	color: var(--surface);
	text-decoration: none;
}

.site-footer-inner {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
}

.site-footer-grid {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	align-items: stretch;
	margin: 0 0 18px;
}

.site-footer-identity,
.site-footer-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.site-footer-identity > a {
	font-size: clamp(42px, 5vw, 78px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.055em;
}

.site-footer-identity span,
.site-footer-contact a,
.site-footer-newsletter,
.site-footer-legal {
	font-size: 14px;
	line-height: 1.5;
}

.site-footer-tagline {
	margin-bottom: 16px;
	color: rgba(255,255,255,0.58);
}

.site-footer-contact {
	min-width: 0;
	align-items: flex-end;
	justify-content: space-between;
	padding-top: clamp(58px, 5.3vw, 80px);
}

.site-footer-contact-details {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

.site-footer-newsletter {
	margin-top: 0;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.65);
	background: transparent;
	color: var(--surface);
	cursor: pointer;
	font-family: var(--font-main);
}

.site-footer-newsletter:hover,
.site-footer-newsletter:focus-visible { border-bottom-color: var(--surface); }

@media (min-width: 701px) {
	.site-footer-identity > a,
	.site-footer-tagline,
	.site-footer-newsletter {
		transform: translateY(-18px);
	}
}

.site-footer-newsletter:focus-visible,
.newsletter-dialog-close:focus-visible,
.newsletter-submit:focus-visible,
.newsletter-form input:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.newsletter-is-open { overflow: hidden; }

.newsletter-dialog {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.newsletter-dialog[hidden] { display: none; }

.newsletter-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.52);
}

.newsletter-dialog-card {
	position: relative;
	z-index: 1;
	width: min(620px, calc(100% - 32px));
	margin: min(16vh, 140px) auto 32px;
	padding: 64px;
	border-radius: 38px;
	background: var(--surface);
}

.newsletter-dialog-card h2 {
	margin: 0 0 14px;
	font-size: clamp(32px, 5vw, 54px);
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.newsletter-dialog-card p {
	margin: 0 0 28px;
	color: var(--content-text-color);
	font-size: var(--content-text-size);
	line-height: var(--content-line-height);
}

.newsletter-dialog-close {
	position: absolute;
	top: 22px;
	right: 26px;
	border: 0;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 36px;
	line-height: 1;
}

.newsletter-form label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

.newsletter-form input {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

.newsletter-dialog-card .newsletter-privacy {
	margin-bottom: 22px;
	font-size: var(--form-legal-size);
	line-height: var(--form-legal-line);
}

.newsletter-privacy a { color: var(--text); }

.newsletter-message {
	margin: 0 0 14px !important;
	color: #b00020 !important;
	font-size: var(--form-legal-size) !important;
}

.newsletter-submit {
	width: 100%;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--text);
	color: var(--surface);
	cursor: pointer;
	font: 600 var(--button-text-size)/var(--button-line-height) var(--font-main);
}

.newsletter-submit:hover { background: #333; }
.newsletter-submit:disabled { cursor: wait; opacity: 0.65; }

.newsletter-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--content-text-color);
	font-size: var(--form-legal-size);
	line-height: var(--form-legal-line);
}

#mlb2-42916168.ml-form-embedContainer .newsletter-consent input {
	width: 20px !important;
	height: 20px;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	flex: 0 0 20px;
	accent-color: var(--text);
}

.newsletter-success-note { margin-top: 12px !important; }

.site-footer-legal {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.62);
}

.site-footer-legal a { color: rgba(255,255,255,0.62); }

.site-footer-privacy {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.site-footer-cookie-note { color: rgba(255,255,255,0.46); }

.site-footer-copyright {
	display: inline-flex;
	gap: 0.3em;
}

@media (max-width: 700px) {
	.site-footer { padding: 58px 16px 24px; }

	.review-card .cta-button {
		width: 100%;
	}

	.site-footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 28px;
	}

	.site-footer-contact,
	.site-footer-contact-details {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer-contact {
		gap: 38px;
		padding-top: 0;
	}

	.site-footer-legal {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: flex-start;
		gap: 12px;
	}

	.site-footer-privacy,
	.site-footer-copyright {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.site-footer-privacy {
		align-items: flex-start;
		min-width: 0;
	}

	.site-footer-copyright {
		align-items: flex-end;
		text-align: right;
	}

	.site-footer-cookie-note {
		white-space: nowrap;
		letter-spacing: -0.035em;
	}

	.newsletter-dialog-card {
		margin-top: 56px;
		padding: 52px 24px 30px;
		border-radius: 28px;
	}
}

@media (max-width: 700px) {
	.testimonial-heading {
		align-items: flex-start;
	}

	.testimonial-heading .title-inline {
		margin-bottom: 0;
	}

	.testimonial-metric {
		align-items: flex-end;
		flex-direction: row;
		gap: 12px;
	}
}

.testimonial-metric {
	align-items: flex-end;
}

.testimonial-metric span {
	max-width: none;
}

@media (min-width: 701px) {
	.testimonial-metric span {
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.timeline-pin-wrap { height: auto; }
	.timeline-sticky { position: static; }
	.year-end {
		display: block;
		left: auto;
		right: 0;
		color: var(--text);
		transform: translateY(-50%);
	}
	.story-window {
		height: auto;
		overflow: visible;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.story-flow { transform: none !important; }
}

/* Predogled heroja Exgocon: izvirni model in odzivna besedilna tabela. */
@media (min-width: 1101px) {
	body[data-page="naslovnica"] .m3-hero-media {
		width: 68%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 20%, #000 46%);
		mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 20%, #000 46%);
	}

	body[data-page="naslovnica"] .m3-hero-media img {
		object-position: 52% 0%;
		transform: translateY(3%);
	}

	body[data-page="naslovnica"] .m3-hero-wash {
		background:
			linear-gradient(
				to right,
				var(--bg) 0%,
				rgba(243,243,240,0.96) 34%,
				rgba(243,243,240,0.30) 58%,
				rgba(243,243,240,0) 100%
			),
			linear-gradient(
				to bottom,
				rgba(243,243,240,0.02) 54%,
				rgba(243,243,240,0.58) 82%,
				var(--bg) 100%
			);
	}

	body[data-page="naslovnica"] .m3-hero-credits {
		top: auto;
		bottom: 54px;
		align-self: auto;
	}

}

@media (min-width: 1101px) and (max-width: 2000px) {
	body[data-page="naslovnica"] .m3-hero-eyebrow {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: 0.45em;
		width: min(54vw, 760px);
		white-space: normal;
		line-height: 1.5;
	}

	body[data-page="naslovnica"] .m3-hero-eyebrow::before {
		grid-column: 1;
		grid-row: 1;
		margin-right: 0;
	}

	body[data-page="naslovnica"] .m3-hero-eyebrow-main,
	body[data-page="naslovnica"] .m3-hero-eyebrow-detail {
		grid-column: 2;
	}

	body[data-page="naslovnica"] .m3-hero-eyebrow-main { grid-row: 1; }
	body[data-page="naslovnica"] .m3-hero-eyebrow-detail { grid-row: 2; }
}

.m3-property-heading {
	margin-bottom: 5px;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba(17,17,17,0.18);
	color: rgba(17,17,17,0.9);
}

.m3-project-meta-start {
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid rgba(17,17,17,0.18);
}

.hero-result-strip {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: end;
	gap: clamp(28px, 4vw, 72px);
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 44px 60px 48px;
	color: var(--text);
	text-decoration: none;
}

.hero-result-metric {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.4vw, 24px);
	white-space: nowrap;
}

.hero-result-metric strong {
	font-size: clamp(34px, 4.6vw, 74px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.055em;
}

.hero-result-metric b {
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1;
}

.hero-result-strip > small {
	max-width: 560px;
	padding-bottom: 2px;
	color: var(--muted);
	font-size: var(--content-text-size);
	line-height: 1.45;
}

.hero-result-strip:hover > small {
	color: var(--text);
}

.hero-result-strip:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 6px;
}

@media (max-width: 900px) {
	.hero-result-strip {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 36px 20px 40px;
	}
}

@media (max-width: 520px) {
	.hero-result-strip {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 30px 16px 34px;
	}

	.hero-result-metric {
		gap: 12px;
	}

	.hero-result-metric b {
		font-size: 18px;
	}
}

@media (min-width: 521px) and (max-width: 1100px) {
	body[data-page="naslovnica"] .m3-hero-media img {
		object-position: 52% 0%;
		transform: translateY(2%);
	}

	body[data-page="naslovnica"] .m3-hero-credits {
		align-self: start;
		justify-self: end;
		width: min(52%, 340px);
		max-width: calc(100% - 32px);
		margin: 22px 16px 0 0;
		font-size: 9px;
		column-gap: 12px;
		row-gap: 3px;
	}

	body[data-page="naslovnica"] .m3-hero-credits .property-optional {
		display: none;
	}
}

@media (max-width: 520px) {
	body[data-page="naslovnica"] .m3-hero-credits .property-optional {
		display: none;
	}
}

/* =========================================================
   NASLOVNICA — samostojna povečava slike in puščica za prehod
========================================================= */
.navigation-card.area-card,
.navigation-card.project-card {
	grid-template-columns: 102px minmax(0, 1fr) auto;
	cursor: default;
}

.navigation-card.area-card:focus,
.navigation-card.project-card:focus {
	outline: none;
}

.navigation-card.area-card:hover,
.navigation-card.area-card.is-scroll-hover,
.navigation-card.project-card:hover,
.navigation-card.project-card.is-scroll-hover {
	background: var(--surface);
}

.project-thumbnail-button {
	display: block;
	width: 102px;
	height: 102px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.project-thumbnail-button .project-thumbnail {
	transition: transform .2s ease, filter .2s ease;
}

.project-thumbnail-button:hover .project-thumbnail,
.project-thumbnail-button:focus-visible .project-thumbnail {
	filter: saturate(.8) contrast(1);
	transform: scale(1.04);
}

.project-thumbnail-button:focus-visible,
.card-arrow:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 4px;
}

.card-arrow {
	display: grid;
	place-items: center;
	align-self: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(17,17,17,.48);
	border-radius: 50%;
	color: var(--text);
	font-size: 27px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.card-arrow span {
	transform: translateY(-1px);
}

.card-arrow:hover {
	background: var(--text);
	color: var(--surface);
	transform: translateX(3px);
}

.card-lightbox .gallery-lightbox-image {
	max-width: min(92vw, 1500px);
	max-height: 88vh;
	object-fit: contain;
}

@media (max-width: 1100px) {
	.navigation-card.area-card,
	.navigation-card.project-card {
		grid-template-columns: 102px minmax(0, 1fr) auto;
	}
}

@media (max-width: 700px) {
	.navigation-card.area-card,
	.navigation-card.project-card {
		grid-template-columns: 78px minmax(0, 1fr) auto;
	}

	.project-thumbnail-button {
		width: 78px;
		height: 78px;
	}

	.card-arrow {
		width: 40px;
		height: 40px;
		font-size: 23px;
	}
}

@media (max-width: 520px) {
	.navigation-card.area-card,
	.navigation-card.project-card {
		grid-template-columns: 58px minmax(0, 1fr) 36px;
		gap: 14px;
	}

	.project-thumbnail-button {
		width: 58px;
		height: 58px;
	}

	.card-arrow {
		width: 34px;
		height: 34px;
		font-size: 21px;
	}
}

/* =========================================================
   NASLOVNICA — enoten vertikalni hero na ozkih zaslonih
========================================================= */
@media (max-width: 1100px), (orientation: portrait) {
	body[data-page="naslovnica"] .m3-hero {
		min-height: max(100svh, 900px);
		grid-template-rows: auto auto auto;
		align-content: start;
		padding-bottom: 56px;
	}

	body[data-page="naslovnica"] .m3-hero-media {
		position: absolute;
		inset: 0 0 0 auto;
		grid-column: auto;
		grid-row: auto;
		z-index: 0;
		width: clamp(78%, calc(132% - 4.9vw), 114%);
		height: 100%;
		margin: 0;
		overflow: hidden;
		opacity: 1;
		-webkit-mask-image: none;
		mask-image: none;
	}

	body[data-page="naslovnica"] .m3-hero-media::after {
		content: none;
	}

	body[data-page="naslovnica"] .m3-hero-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 58% top;
		transform: none;
		filter: saturate(.68) contrast(.94) brightness(1.03);
	}

	body[data-page="naslovnica"] .m3-hero-wash {
		z-index: 1;
		inset: 64px auto auto 0;
		width: min(760px, 84%);
		height: 74%;
		background: rgba(243,243,240,.38);
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(15px);
		-webkit-mask-image:
			linear-gradient(to right, #000 0%, #000 70%, transparent 100%),
			linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to right, #000 0%, #000 70%, transparent 100%),
			linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
		mask-composite: intersect;
	}

	body[data-page="naslovnica"] .m3-hero-credits {
		position: relative;
		right: auto;
		bottom: auto;
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		justify-self: start;
		width: min(100%, 520px);
		max-width: 100%;
		margin: 4px 0 0;
		margin-bottom: 0;
	}
}

@media (max-width: 520px) and (orientation: portrait) {
	body[data-page="naslovnica"] .m3-hero {
		min-height: max(100svh, 820px);
		grid-template-rows: auto auto auto;
	}

	body[data-page="naslovnica"] .m3-hero-wash {
		inset: 48px auto auto 0;
		width: 94%;
		height: 78%;
		background: rgba(243,243,240,.42);
		-webkit-backdrop-filter: blur(13px);
		backdrop-filter: blur(13px);
	}

	body[data-page="naslovnica"] .m3-hero-credits {
		margin-top: 2px;
	}
}

/* Enotna geometrija naslovne fotografije pri vseh širinah.
   Desni rob ostane zasidran, ožje okno odreže samo levi del slike. */
body[data-page="naslovnica"] .m3-hero-media {
	position: absolute;
	inset: 0 0 0 auto;
	grid-column: auto;
	grid-row: auto;
	width: max(68vw, 748px);
	height: 100%;
	margin: 0;
	overflow: hidden;
	opacity: 1;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0,0,0,.30) 20%,
		#000 46%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0,0,0,.30) 20%,
		#000 46%
	);
}

body[data-page="naslovnica"] .m3-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 52% top;
	transform: none;
}

body[data-page="naslovnica"] .m3-hero-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 20%;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(243,243,240,0) 0%,
		rgba(243,243,240,.28) 38%,
		rgba(243,243,240,.76) 76%,
		var(--bg) 100%
	);
}

/* Zameglitev sledi po potrditvi gibanja fotografije. */
body[data-page="naslovnica"] .m3-hero-wash {
	display: none;
}

/* Po preskoku Property Seta ostane prehod na mestu, ki ga ima pri 1100 px.
   Fotografija nespremenjene širine drsi proti levi za fiksnim prehodom. */
@media (max-width: 1100px) {
	body[data-page="naslovnica"] .m3-hero-media {
		width: 100%;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent 60px,
			rgba(0,0,0,.12) 150px,
			rgba(0,0,0,.65) 390px,
			rgba(0,0,0,.90) 530px,
			#000 660px
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent 60px,
			rgba(0,0,0,.12) 150px,
			rgba(0,0,0,.65) 390px,
			rgba(0,0,0,.90) 530px,
			#000 660px
		);
	}

	body[data-page="naslovnica"] .m3-hero-media img {
		inset: 0 0 0 auto;
		right: clamp(-440px, calc(60vw - 660px), 0px);
		width: 1040px;
	}

	body[data-page="naslovnica"] .m3-hero-credits {
		justify-self: start;
		left: max(0px, calc(100vw - 370px));
		width: 330px;
		max-width: calc(100vw - 40px);
		box-sizing: border-box;
		padding-left: 0;
		margin-right: 0;
		margin-left: 0;
		font-size: 10px;
	}
}