/*
 * Teak Deck — stilovi patterna.
 * Geometrija i tipografija po dizajn/PATTERNS.md. Nijedna boja ni razmak
 * nisu upisani rukom; sve dolazi iz theme.json kao custom property.
 */

/* Zajednicko ------------------------------------------------------------- */

.td-section {
	padding-block: var(--wp--preset--spacing--section-y);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.td-section--sm { padding-block: var(--wp--preset--spacing--section-y-sm); }
.td-section--lg { padding-block: var(--wp--preset--spacing--section-y-lg); }
.td-section--xl { padding-block: var(--wp--preset--spacing--section-y-xl); }

.td-surface { background: var(--wp--preset--color--surface); }
.td-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
.td-ink :where(p, li) { color: var(--wp--custom--on-dark--body); }

.td-eyebrow-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow-sub);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	/* text-muted, ne muted-4: ovaj natpis stoji i na surface-cool (#F6F7F8),
	   gdje #767676 daje samo 4.23:1. */
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* Intrinzicne mreze — auto-fit, ne media queryji. Zato rade i na 375 px. */
.td-grid { display: grid; }

/* WP svakom sljedecem djetetu grupe dodaje margin-block-start iz blockGapa.
   U gridu to pomakne drugi stupac nize za vrijednost razmaka. */
.td-grid > *,
.td-short-answer > *,
.td-lead-magnet > *,
.td-form > * {
	margin-block-start: 0;
}
.td-grid--split       { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--split), 1fr)); gap: var(--wp--preset--spacing--gap-cols-wide); }
.td-grid--text        { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--text-col), 1fr)); gap: var(--wp--preset--spacing--gap-cols); }
/* Jedan, dva ili cetiri stupca — nikad tri. Cetiri kartice se dijele sa
   svima, pa nijedna ne visi sama u redu s praznom polovicom. */
.td-grid--cards       { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--gap-cards); }
@media (min-width: 520px)  { .td-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .td-grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Devet kartica projekata. Pravilo "nikad tri stupca" pisano je za cetvorku na
   naslovnici, gdje treci stupac ostavi jednu karticu da visi. Kod devet je
   obrnuto: cetiri stupca daju 4 + 4 + 1, a tri daju 3 + 3 + 3. */
@media (min-width: 1080px) { .td-grid--cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kartica bez linka — na /projects/ nema kamo voditi, stranice po plovilu ne
   postoje. Isti izgled, figure umjesto <a>. */
.td-project-card--static { margin: 0; }
/* Bez `height: 100%`: kartice u gridu se rastezu na visinu najviseg reda, pa je
   slika slijedila tu visinu i omjer je ispadao 0,68 umjesto 0,80. Visinu drzi
   iskljucivo aspect-ratio. */
.td-project-card--static img { width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.td-project-card--static { align-self: start; }
.td-project-card--static figcaption { display: block; }
.td-grid--route       { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--route-card), 1fr)); gap: clamp(20px, 3vw, 48px); }
.td-grid--plate       { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--plate), 1fr)); gap: 0; }
.td-grid--trust       { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--trust), 1fr)); }
.td-grid--contact-col { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--contact-col), 1fr)); gap: var(--wp--preset--spacing--gap-cols); }

/* Heroji ----------------------------------------------------------------- */

.td-hero {
	position: relative;
	min-height: min(100svh, 100vh);
	background: var(--wp--preset--color--ink);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

@supports not (min-height: 100svh) { .td-hero { min-height: clamp(520px, 78vh, 720px); } }

/* Puni ekran je ostavljao pola stranice na praznom slotu; hero je sada
   traka koja pusti sljedecu sekciju da se nazire. */
.td-hero { min-height: clamp(520px, 78svh, 720px); }

.td-hero__media,
.td-hero__media img,
.td-hero__media video,
.td-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	z-index: -2;
}

.td-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim--hero);
	z-index: -1;
}

.td-hero__inner {
	width: 100%;
	padding-inline: var(--wp--preset--spacing--gutter);
	padding-block-end: clamp(24px, 4vw, 64px);
}

.td-hero h1 {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--h-1-hero);
	letter-spacing: var(--wp--custom--tracking--display);
	max-width: 20ch;
	margin: 0;
}

.td-hero__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--gap-cols);
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--stack-sm);
}

.td-hero__row p {
	max-width: var(--wp--custom--measure--hero-paragraph);
	color: var(--wp--custom--on-dark--body);
	/* Dizajn: 18px / 1.6. */
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* Dva CTA-a u istom odlomku inace sjednu jedan na drugi. */
.td-hero__row > :last-child {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
	flex-wrap: wrap;
	max-width: none;
}

/* Sekundarni CTA na tamnoj podlozi — akcent tu ne bi prosao kontrast. */
.td-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.td-cta-secondary {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-block-end: 1px solid var(--wp--custom--on-dark--line);
	padding-block-end: 4px;
}

/* pillar-hero — bez fotografije */
.td-pillar-hero {
	padding-block-start: clamp(34px, 6vw, 110px);
	padding-block-end: var(--wp--preset--spacing--stack-md);
	padding-inline: var(--wp--preset--spacing--gutter);
	border-block-end: 1px solid var(--wp--preset--color--line);
	align-items: end;
}

.td-pillar-hero h1 {
	font-size: var(--wp--preset--font-size--h-1-page);
	letter-spacing: var(--wp--custom--tracking--display);
	max-width: 13ch;
	margin: 0;
}

.td-pillar-hero__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	line-height: 2.2;
	color: var(--wp--preset--color--text-muted-4);
	text-transform: uppercase;
	margin: 0;
}

.td-pillar-hero--dark {
	background: var(--wp--preset--color--ink);
	border-block-end: 0;
}

.td-pillar-hero--dark h1 {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--h-1-page-dark);
}

.td-pillar-hero--dark .td-pillar-hero__subhead {
	max-width: var(--wp--custom--measure--hero-paragraph);
	color: var(--wp--custom--on-dark--secondary);
	margin: 0;
}

/* Refit.dc.html: CTA ispod podnaslova, 26 px razmak, 17/30 padding. */
.td-pillar-hero--dark .td-pillar-hero__aside > * { margin-block: 0; }
.td-pillar-hero--dark .td-pillar-hero__aside .td-cta-wrap { margin-block-start: 26px; }

/* Adrese uz formu za procjenu: 11 px mono, .08em, prored 2,2. */
.td-form-aside__meta {
	margin-block-start: 28px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 2.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted-4);
}

/* compare-hero-centered */
.td-compare-hero {
	text-align: center;
	padding-block: clamp(34px, 6vw, 110px) var(--wp--preset--spacing--stack-md);
	padding-inline: var(--wp--preset--spacing--gutter);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Mjera: artboard ima 16ch na 86 px; na smanjenoj H1 skali (63 px) ista
   fizicka sirina retka je oko 21ch, pa naslov ostaje u dva retka. */
.td-compare-hero h1 {
	font-size: var(--wp--preset--font-size--h-1-centered);
	line-height: .9;
	letter-spacing: var(--wp--custom--tracking--display);
	max-width: 21ch;
	margin: 18px auto 0;
}

/* :not(.td-eyebrow) — inace (0,1,1) gazi eyebrow i "Materials" je bio
   20 px, siv i razvucen umjesto 13 px akcenta. */
.td-compare-hero p:not(.td-eyebrow) {
	max-width: 62ch;
	margin: clamp(20px, 2.6vw, 34px) auto 0;
	font-size: clamp(15px, 1.2vw, 19px);
	line-height: 1.7;
	color: var(--wp--preset--color--text-body);
	text-wrap: pretty;
}

/* contact-direct */
.td-contact-direct {
	padding-block: clamp(34px, 6vw, 110px) var(--wp--preset--spacing--stack-md);
	padding-inline: var(--wp--preset--spacing--gutter);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Contact.dc.html: stupci minmax(240px,1fr), eyebrow 12 px, telefon 12 px
   ispod eyebrowa, adresa 8 px ispod telefona. */
.td-contact-direct {
	padding-block: clamp(30px, 5vw, 90px) clamp(30px, 4vw, 64px);
}

.td-contact-direct h1 {
	font-size: var(--wp--preset--font-size--h-1-page);
	line-height: .88;
	letter-spacing: var(--wp--custom--tracking--display);
	margin: 0;
}

.td-contact-direct .td-grid--contact-col {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 56px);
	margin-block-start: clamp(26px, 3.5vw, 52px);
}

.td-contact-direct .td-grid--contact-col > * > * { margin-block: 0; }

.td-contact-direct .td-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow-sub);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
}

.td-contact-direct .td-phone {
	font-size: clamp(19px, 2vw, 28px);
	font-weight: 200;
	letter-spacing: -.02em;
	color: inherit;
	text-decoration: none;
	display: inline-block;
}

.td-contact-direct .td-eyebrow + p { margin-block-start: 12px; }

.td-contact-direct .td-street {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-block-start: 8px;
}

/* "What to send us": naslov lijevo, lista desno (Contact.dc.html). */
.td-send {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(22px, 4vw, 72px);
	align-items: start;
}

.td-send h2 {
	font-size: var(--wp--preset--font-size--h-2-xs);
	line-height: 1.05;
	letter-spacing: -.03em;
	max-width: 14ch;
	margin: 0;
}

.td-send .td-checklist { margin-block-start: 0; }

/* Sadrzaj ---------------------------------------------------------------- */

.td-statement-split { align-items: center; }

.td-statement-split h2 {
	font-size: var(--wp--preset--font-size--h-2-xl);
	letter-spacing: var(--wp--custom--tracking--h-2);
	/* Dizajn: line-height 1.0 na display naslovima. */
	line-height: 1;
	margin: 0;
}

.td-statement-split p {
	font-size: var(--wp--preset--font-size--lead-wide);
	color: var(--wp--preset--color--text-lead);
	margin: 0;
}

.td-image-band,
.td-image-band img {
	display: block;
	width: 100%;
	height: clamp(340px, 52vw, 700px);
	object-fit: cover;
	margin: 0;
}

/* Dizajn: 1440x700, fokus 50% 60%, uz filter. Filter je u dizajnu SAMO
   ovdje — ranije je bio krivo stavljen na trust-split. */
.td-image-band img {
	object-position: center 60%;
	filter: saturate(.72) hue-rotate(-4deg) brightness(1.02);
}

/* article-section
   Grid, razmak i gornja granica tijela iz artboarda (TeakDecking.dc.html) i
   README-faza2-handoff: "the article body is capped at 1100px", s gutterom
   unutra, pa sadrzaj na 1440 ima 870 px. Hairline ostaje jer ga PATTERNS.md
   trazi, iako ga artboard ne crta. */
.td-article-section {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 3.5vw, 64px);
	align-items: start;
	max-width: calc(1100px - 2 * var(--wp--preset--spacing--gutter));
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: var(--wp--preset--spacing--stack-sm);
	margin-block-start: var(--wp--preset--spacing--stack-md);
}

.td-article-section__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	color: var(--wp--preset--color--accent);
	margin: 0 0 14px;
}

.td-article-section h2 {
	font-size: var(--wp--preset--font-size--h-2-s);
	letter-spacing: var(--wp--custom--tracking--h-2);
	margin: 0;
}

.td-article-section__body { max-width: var(--wp--custom--measure--body-column); }

/* Proza od vise odlomaka. Izmedu odlomaka WP stavlja svoj blockGap, koji je
   predaleko za tekuci tekst; razmak drzi ovo pravilo, iz istog tokena kao
   ostali stackovi. Mjera retka je ista kao u article-sectionu. */
.td-prose { max-width: var(--wp--custom--measure--body-column); }

/* Tekuca proza je u svim artboardima text-body (#4A4A4A), ne ink. Na tamnim
   povrsinama p i li dobivaju vlastitu boju izravno, pa ovo tamo ne curi. */
.td-prose,
.td-article-section__body { color: var(--wp--preset--color--text-body); }

/* Naslovi unutar proze ostaju ink — boja gore je samo za tekst. */
.td-prose :where(h2, h3, h4),
.td-article-section__body :where(h2, h3, h4) { color: var(--wp--preset--color--ink); }

/* Uvodna izjava ispod pillar-heroja. Artboard: clamp(18,1.7vw,27) / 200 / 1.5,
   #1A1A1A, omotac max-width 62ch na 16 px s gutterom unutra. */
.td-intro {
	font-size: 16px;
	max-width: 62ch;
	box-sizing: border-box;
	padding-block: clamp(30px, 5vw, 80px) 0;
}

.td-intro p {
	font-size: clamp(18px, 1.7vw, 27px);
	font-weight: 200;
	line-height: 1.5;
	color: var(--wp--preset--color--text-statement);
	text-wrap: pretty;
	margin: 0;
}
.td-prose > * + * { margin-block-start: var(--wp--preset--spacing--stack-sm); }
.td-article-section__plate { margin-block-start: 26px; aspect-ratio: 16 / 9; }
.td-article-section__plate img { width: 100%; height: 100%; object-fit: cover; }

/* toc-numbered */
.td-toc { background: var(--wp--preset--color--surface); }

.td-toc__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--text-col), 1fr));
	gap: 0 clamp(24px, 5vw, 90px);
	margin: var(--wp--preset--spacing--stack-sm) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: td-toc;
}

/* Red iz artboarda: 44px broj | natpis | 20px strelica, crta ispod. */
.td-toc__list li {
	counter-increment: td-toc;
	border-block-end: 1px solid var(--wp--preset--color--line-surface);
	margin: 0;
}

.td-toc__list li a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 20px;
	gap: 14px;
	align-items: baseline;
	padding: 14px 0;
	font-size: clamp(15px, 1.3vw, 19px);
	letter-spacing: -.01em;
	text-decoration: none;
	color: inherit;
}

.td-toc__list li a::before,
.td-toc__list li a::after {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--accent);
	letter-spacing: normal;
}

.td-toc__list li a::before { content: counter(td-toc, decimal-leading-zero); font-size: 10px; }
.td-toc__list li a::after { content: "→"; font-size: var(--wp--preset--font-size--cta); text-align: end; }

/* checklist-numbered */
.td-checklist {
	list-style: none;
	counter-reset: td-check;
	margin: var(--wp--preset--spacing--stack-sm) 0 0;
	padding: 0;
}

/* U desnom stupcu article-sekcije lista pocinje u ravnini s brojem. */
.td-article-section > .td-checklist { margin-block-start: 0; }

.td-checklist li {
	counter-increment: td-check;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	padding: 16px 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--list);
	line-height: 1.6;
	text-wrap: pretty;
}

.td-surface .td-checklist li,
.td-toc .td-checklist li { border-block-start-color: var(--wp--preset--color--line-surface); }

.td-checklist li::before {
	content: counter(td-check, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--accent);
}

/* Varijanta u article-sekciji (TeakDecking.dc.html): 36 px stupac, tekst
   #1A1A1A, sivi broj, crta ispod reda. Broj je #9A9A9A u artboardu, ovdje
   text-muted-4 zbog kontrasta (ravnanje sivih, HANDOUT pogl. 5). */
.td-article-section .td-checklist li {
	grid-template-columns: 36px minmax(0, 1fr);
	border-block-start: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-statement);
}

.td-article-section .td-checklist li::before { color: var(--wp--preset--color--text-muted-4); }

/* service-rows — svaki red je jedan <a> */
.td-service-rows { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--stack-lg); margin-block-start: var(--wp--preset--spacing--stack-md); }

.td-service-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--wp--preset--spacing--gap-cols);
	align-items: baseline;
	border-block-start: 1px solid var(--wp--preset--color--line-surface);
	padding-block-start: clamp(18px, 2.4vw, 32px);
	text-decoration: none;
	color: inherit;
}

.td-service-row h2,
.td-service-row h3 {
	font-size: var(--wp--preset--font-size--h-3-row);
	/* Dizajn: -0.04em i line-height 1.0, ne -0.03em/1.12. */
	letter-spacing: var(--wp--custom--tracking--h-2);
	line-height: 1;
	margin: 0;
}

.td-service-row div p:not(.td-service-row__action) {
	/* Dizajn ima text-body (#4A4A4A); bez ovoga tekst naslijedi ink. */
	color: var(--wp--preset--color--text-body);
}

.td-service-row__action {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 14px 0 0;
}

.td-service-row:hover h2,
.td-service-row:hover h3 { color: var(--wp--preset--color--accent); }

/* route-cards
   Pattern je sam td-section; kad je ugnijezden u sekciju stranice (Refit),
   gutter se zbrajao dvaput i kartice su pocinjale na 230 umjesto 115. */
.td-section .td-section.td-grid--route {
	padding-inline: 0;
	padding-block: var(--wp--preset--spacing--stack-md) 0;
}

.td-route-card {
	border-block-start: 2px solid var(--wp--preset--color--accent);
	padding-block-start: 18px;
}

.td-route-card h3 {
	font-size: clamp(20px, 2.2vw, 32px);
	letter-spacing: var(--wp--custom--tracking--h-3);
	margin: 0 0 12px;
}

/* faq-rows — ravni redci, ne akordeon (README, Open decisions 4: dizajn je
   ravan, i dalje daje ispravnu FAQPage shemu). */
.td-faq { margin-block-start: var(--wp--preset--spacing--stack-md); }

.td-faq__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--text-col), 1fr));
	gap: var(--wp--preset--spacing--gap-cols);
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block: clamp(20px, 2.6vw, 36px);
}

.td-faq__row > * { margin-block-start: 0; }

.td-faq__q {
	font-size: var(--wp--preset--font-size--h-3-faq);
	letter-spacing: var(--wp--custom--tracking--h-3);
	line-height: 1.05;
	max-width: 20ch;
	margin: 0;
}

.td-faq__a { max-width: var(--wp--custom--measure--body-column); color: var(--wp--preset--color--text-body); }
.td-faq__a p { margin: 0 0 14px; }

/* Home.dc.html: link ispod odgovora je obican tekst od 15 px u akcentu sa
   strelicom ispred, ne mono CTA. */
.td-faq__link {
	font-size: 15px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.td-faq__link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Spec ------------------------------------------------------------------- */

.td-spec-table { width: 100%; border-collapse: collapse; }

/* Panels.dc.html: dva jednaka stupca, razmak 16, red 16px, crta ispod,
   labela 15,5 px, vrijednost mono 14 px poravnata lijevo u svom stupcu. */
.td-spec-table th,
.td-spec-table td {
	text-align: start;
	padding: 16px 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	vertical-align: baseline;
	line-height: normal;
}

.td-spec-table th {
	width: 50%;
	padding-inline-end: 16px;
	font-weight: 300;
	font-size: 15.5px;
	color: var(--wp--preset--color--text-body);
}

.td-spec-table td {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}

/* process-4-step */
.td-process { counter-reset: td-step; margin-block-start: var(--wp--preset--spacing--stack-sm); }

/* Panels.dc.html: korak 22px, crta ispod, razmak broja 14. */
.td-process__step {
	counter-increment: td-step;
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block: 22px;
}

.td-process__head { display: flex; align-items: baseline; gap: 14px; }

.td-process__head::before {
	content: counter(td-step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--accent);
}

.td-process__step h3 {
	font-size: var(--wp--preset--font-size--h-3-step);
	font-weight: 300;
	letter-spacing: var(--wp--custom--tracking--step);
	margin: 0;
}

.td-process__step p {
	margin: 12px 0 0 24px;
	font-size: var(--wp--preset--font-size--body-fixed);
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	max-width: var(--wp--custom--measure--body-column);
	text-wrap: pretty;
}

/* sticky-image-spec */
.td-sticky-spec { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--split), 1fr)); }

.td-sticky-spec__media {
	background: var(--wp--preset--color--ink);
	position: relative;
}

.td-sticky-spec__media figure {
	position: sticky;
	inset-block-start: 0;
	height: min(72svh, 560px);
	overflow: hidden;
	margin: 0;
}

.td-sticky-spec__media img { width: 100%; height: 100%; object-fit: cover; }

.td-sticky-spec__caption {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	padding: 12px 16px;
	margin: 0;
}

/* Desni stupac prema Panels.dc.html: isti gutter kao ostatak stranice,
   gornji padding clamp(30px,5vw,88px). */
.td-sticky-spec__body {
	padding: clamp(30px, 5vw, 88px) var(--wp--preset--spacing--gutter);
}

.td-sticky-spec__body > * { margin-block: 0; }

.td-sticky-spec__body h1 {
	margin-block-start: 20px;
	font-size: var(--wp--preset--font-size--h-1-compact);
	line-height: .94;
	letter-spacing: -.05em;
}

/* Podnaslov: lead, #4A4A4A, 34ch (PATTERNS: "34ch subhead"). */
.td-sticky-spec__body h1 + p {
	margin-block-start: 22px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--text-body);
	max-width: 34ch;
	text-wrap: pretty;
}

/* "Specifications" i "How the process works" su H2 po content handoffu,
   a artboard ih crta kao eyebrow. Element ostaje H2, izgled je eyebrow. */
.td-sticky-spec__body h2 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 300;
	line-height: normal;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-block-start: clamp(34px, 5vw, 72px);
}

.td-sticky-spec__body .td-spec-table + p,
.td-sticky-spec__body p:has(> .td-cta) { margin-block-start: clamp(24px, 3vw, 44px); }

.td-sticky-spec__body .td-spec-table { margin-block-start: 20px; }

.td-sticky-spec__body p:has(> .td-cta) + h2 { margin-block-start: clamp(44px, 7vw, 110px); }

.td-sticky-spec__body .td-process { margin-block-start: 24px; }

/* Artboard: tekst koraka 56ch s margin-left:auto, pa stoji uz desni rub
   stupca. Samo ovdje — na punoj sirini bi se odvojio od naslova koraka. */
.td-sticky-spec__body .td-process__step p {
	margin-inline-start: auto;
	padding-inline-start: 24px;
	max-width: 56ch;
}

/* Kad se stupci slozu, slika prestaje biti sticky i postaje 16/9 traka. */
@media (max-width: 800px) {
	.td-sticky-spec__media figure { position: static; height: auto; aspect-ratio: 16 / 9; }
}

/* compare-table — obje vrijednosne kolone moraju izgledati identicno */
.td-compare-table { margin-block-start: var(--wp--preset--spacing--stack-md); }

.td-compare-table__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: baseline;
	gap: var(--wp--preset--spacing--gap-cols);
	padding: 20px 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.td-compare-table__criterion {
	font-size: clamp(17px, 1.6vw, 24px);
	font-weight: 200;
	margin: 0;
}

.td-compare-table__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13.5px;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Zaglavlje tablice. Bez njega su dva stupca vrijednosti neoznacena i citaju se
   samo iz konteksta iznad. Obje oznake su istog stila, kao i vrijednosti. */
.td-compare-table__row--head { border-block-start: 0; padding-block-start: 0; }

.td-compare-table__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* Dokaz ------------------------------------------------------------------ */

.td-project-card { text-decoration: none; color: inherit; display: block; }
/* PATTERNS.md trazi 4/5 za kartice projekata; 4/3 je bilo odstupanje bez razloga. */
.td-project-card figure { margin: 0; aspect-ratio: 4 / 5; }
.td-project-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.td-project-card__name {
	display: inline-block;
	font-size: 17px;
	border-block-end: 1px solid var(--wp--preset--color--accent);
	padding-block-end: 5px;
	margin: 16px 0 0;
}

.td-project-card__scope {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted-3);
	margin: 8px 0 0;
}

/* plate-grid — plocice se dodiruju */
.td-plate { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.td-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.td-plate__label {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: var(--wp--custom--tracking--caption);
	text-transform: uppercase;
	padding: 9px 12px;
	margin: 0;
}

/* logo-row — partneri i sajmovi.
   Intrinzicna mreza, ne flex red: nijedan logotip ne visi sam u zadnjem redu.
   Kutija je fiksne visine, logotip se u nju uklapa `contain`, pa razliciti
   omjeri (TDS je uspravan, Festool je vrlo sirok) stoje na istoj optickoj liniji. */
.td-logo-row {
	display: grid;
	/* Fiksan broj stupaca, ne auto-fit: devet logotipa je auto-fit slagao
	   7 + 2, pa je zadnji red visio. Tri stupca daju 3 + 3 + 3. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 640px) { .td-logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kutija je visa nego sto se cini potrebnim zbog Teak Decking Systems: to je
   kruzna znacka sa sitnim tekstom, i na 44 px se ne da procitati. Sirinu
   ogranicava max-width, pa siroki natpisi ne prerastu red. */
.td-logo-row figure { margin: 0; display: flex; align-items: center; justify-content: center; height: 60px; }
.td-logo-row img { max-height: 100%; max-width: 160px; width: auto; object-fit: contain; display: block; }

.td-logo-row--fairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .td-logo-row--fairs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.td-logo-row--fairs figure { height: 56px; }

/* trust-split */
.td-trust-split {
	background: var(--wp--preset--color--surface);
	/* PATTERNS.md: clamp(340px, 44vw, 600px). Bilo je clamp(300px,32vw,440px). */
	min-height: clamp(340px, 44vw, 600px);
}

.td-trust-split__media { min-height: clamp(240px, 26vw, 400px); }
.td-trust-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	object-position: center center;
}

.td-trust-split__body {
	/* Dizajn: 57,6 px okomito (4vw), 72 px vodoravno (5vw). Okomiti padding
	   je manji od vodoravnog — s jednakim je sekcija bila 75 px previsoka. */
	padding-block: clamp(20px, 4vw, 64px);
	padding-inline: var(--wp--preset--spacing--gutter-inset);
	align-self: center;
}

.td-trust-block {
	border-block-start: 1px solid var(--wp--preset--color--line-surface);
	/* Dizajn ima padding samo gore; donji je nula. */
	padding-block: 16px 0;
}

/* WP ubacuje blockGap (43 px) izmedu naslova i odlomka u bloku. Osim sto
   je pregolem, rasteze cijeli red mreze pa se stupac sa slikom produzuje i
   fotografija se zbog cover reza dodatno zumira. Razmak drzi CSS. */
.td-trust-block > * + *,
.td-faq__a > * + *,
.td-route-card > * + *,
.td-duel__body > * + *,
.td-compare-duel__side > * + * {
	margin-block-start: 0;
}

.td-trust-block p {
	/* Dizajn: 14,5 px, line-height 1,7, 10 px ispod naslova, boja text-body. */
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--text-body);
}

.td-trust-block h3 {
	font-size: var(--wp--preset--font-size--h-3-card);
	letter-spacing: var(--wp--custom--tracking--h-3);
	margin: 0;
}

/* certificate-strip */
.td-certs {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 34px);
	flex-wrap: wrap;
}

.td-certs img { width: auto; object-fit: contain; display: block; }
.td-certs .td-cert-sgs img { height: 52px; }
.td-certs .td-cert-fsc img { height: 60px; }

.td-certs__caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--caption);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted-2);
	margin: 0;
}

/* diagnostic-duel — dvije strane iste geometrije */
.td-duel { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--split), 1fr)); gap: 0; }

.td-duel__side { background: var(--wp--preset--color--base); }
.td-duel__side--dark { background: var(--wp--preset--color--ink-panel); color: var(--wp--preset--color--base); }

.td-duel__media { margin: 0; aspect-ratio: 16 / 9; }
.td-duel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.td-duel__body { padding: clamp(24px, 3.5vw, 56px) var(--wp--preset--spacing--gutter); }

/* Refit.dc.html: eyebrow presude je 12 px / .18em (eyebrow-sub), ne 13. */
.td-duel .td-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow-sub);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
}

.td-duel__side--dark .td-eyebrow { color: var(--wp--preset--color--accent-on-dark); }

.td-duel h2 {
	font-size: var(--wp--preset--font-size--h-2-s);
	letter-spacing: var(--wp--custom--tracking--h-2);
	line-height: 1;
	max-width: 16ch;
	margin: 16px 0 0;
}

.td-duel ol {
	list-style: none;
	counter-reset: td-duel;
	margin: clamp(22px, 3vw, 40px) 0 0;
	padding: 0;
}

.td-duel__side--dark ol li { color: var(--wp--custom--on-dark--body); }

.td-duel ol li {
	counter-increment: td-duel;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	padding: 18px 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--list);
	line-height: 1.6;
}

.td-duel__side--dark ol li { border-block-start-color: var(--wp--custom--on-dark--line); }

.td-duel ol li::before {
	content: counter(td-duel, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--accent);
}

.td-duel__side--dark ol li::before { color: var(--wp--preset--color--accent-on-dark); }

/* Kad postoji fotografija stanja, brojcani stupac postaje 96 px 4/3 thumb. */
.td-duel ol li.has-thumb { grid-template-columns: 96px minmax(0, 1fr); }
.td-duel ol li.has-thumb::before { content: none; }
.td-duel ol li.has-thumb img { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* compare-duel-columns — nijedna strana ne smije dobiti tezinu */
.td-compare-duel { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--split), 1fr)); gap: 0; }
/* Slika ide od ruba do ruba stupca (TeakVsSynthetic.dc.html), padding je
   samo na tekstu ispod nje. */
.td-compare-duel__side {
	--td-duel-py: clamp(20px, 2.6vw, 36px);
	--td-duel-px: clamp(18px, 3vw, 44px);
	padding: var(--td-duel-py) var(--td-duel-px);
}
.td-compare-duel__side + .td-compare-duel__side { border-inline-start: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface-cool); }
.td-compare-duel__side + .td-compare-duel__side .td-eyebrow { color: var(--wp--preset--color--neutral-cool); }
.td-compare-duel__media {
	margin: calc(-1 * var(--td-duel-py)) calc(-1 * var(--td-duel-px)) var(--td-duel-py);
	aspect-ratio: 16 / 10;
}

.td-compare-duel .td-eyebrow-sub { margin-block-start: 22px; }
.td-compare-duel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.td-compare-duel ul { list-style: none; margin: 18px 0 0; padding: 0; }
.td-compare-duel ul li {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding: 15px 0;
	font-size: 15.5px;
	line-height: 1.7;
	text-wrap: pretty;
}

/* compare-short-answer-band */
.td-short-answer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--section-y-sm);
	padding-inline: var(--wp--preset--spacing--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--text-col), 1fr));
	gap: clamp(24px, 5vw, 90px);
}

.td-short-answer h2 {
	font-size: var(--wp--preset--font-size--h-2-l);
	letter-spacing: var(--wp--custom--tracking--h-2);
	color: var(--wp--preset--color--base);
	margin: 0;
}

.td-short-answer p { color: var(--wp--custom--on-dark--body); margin: 0; }

/* Konverzija ------------------------------------------------------------- */

/* quote-form, prema Refit.dc.html (split) i Contact.dc.html (single). */
.td-quote.td-grid--split { gap: clamp(30px, 6vw, 110px); align-items: start; }

.td-quote h2 {
	font-size: var(--wp--preset--font-size--h-2-l);
	line-height: .98;
	letter-spacing: var(--wp--custom--tracking--h-2);
	max-width: 13ch;
	margin: 0;
}

.td-quote h2 + p {
	margin-block-start: 24px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	max-width: 56ch;
	text-wrap: pretty;
}

/* PATTERNS: "Single column (max-width: 620px)". */
.td-quote--single > * { max-width: 620px; }

.td-quote--single h2 { font-size: var(--wp--preset--font-size--h-2-m); line-height: 1; max-width: none; }
.td-quote--single h2 + p { max-width: none; margin-block-start: 18px; font-size: 16px; line-height: 1.7; }

.td-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.td-form--single { max-width: var(--wp--custom--measure--field-column); grid-template-columns: 1fr; }
.td-form__full { grid-column: 1 / -1; }

/* Obavijest o obradi podataka ispod gumba. Bez kvačice: obrada se temelji na
   upitu (čl. 6(1)(b)), ne na privoli, pa privola ne treba. */
.td-form__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}
.td-form__note a { color: inherit; text-underline-offset: .2em; }

.td-field label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted-4);
	margin-block-end: 6px;
}

.td-field input,
.td-field textarea,
.td-field select {
	width: 100%;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line-input);
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	padding: 12px 0;
	color: inherit;
}

.td-field textarea { resize: vertical; }

.td-field input:invalid:not(:placeholder-shown),
.td-field textarea:invalid:not(:placeholder-shown) { border-block-end-color: var(--wp--preset--color--error); }

.td-field__error { color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--small); margin: 6px 0 0; }

.td-roles { display: flex; flex-wrap: wrap; gap: 10px; }

.td-roles label {
	border: 1px solid var(--wp--preset--color--line-chip);
	padding: 10px 16px;
	font-size: 14px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--text-body);
	margin: 0;
}

/* Natpis grupe uloga je u artboardu 12 px / .18em, veci od natpisa polja. */
.td-field:has(.td-roles) > label {
	font-size: var(--wp--preset--font-size--eyebrow-sub);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	margin-block-end: 14px;
}

/* CF7 omata radio u p > span > span.wpcf7-radio i svakoj stavci daje
   margin-left 1em, pa su čipovi stajali 15 px uvučeni od ostalih polja.
   Flex ide na stvarni roditelj čipova. */
.td-roles p { margin: 0; }
.td-roles .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.td-roles .wpcf7-list-item { margin: 0; }

.td-roles input { position: absolute; opacity: 0; width: 0; height: 0; }
.td-roles input:checked + span,
.td-roles label:has(input:checked) { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.td-roles label:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.td-dropzone {
	border: 1px dashed var(--wp--preset--color--line-input);
	padding: 26px;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted-4);
}

/* Dropzone iz PATTERNS.md na samom file inputu: preglednik prima ispuštenu
   datoteku na input, pa ne treba JS. Gumb preglednika sveden na podvučenu riječ. */
.td-field input[type="file"] {
	box-sizing: border-box;
	border: 1px dashed var(--wp--preset--color--line-input);
	padding: 26px;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted-4);
	cursor: pointer;
}

.td-field input[type="file"]::file-selector-button {
	border: 0;
	background: none;
	padding: 0;
	margin-inline-end: .6em;
	font: inherit;
	color: var(--wp--preset--color--text-strong);
	/* Chrome ne crta text-decoration na ovom gumbu, pa podvlaka ide obrubom. */
	border-block-end: 1px solid var(--wp--preset--color--accent);
	cursor: pointer;
}

.td-field input[type="file"]:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.td-submit {
	background: var(--wp--preset--color--accent);
	/* Bijeli natpis na brend narancastoj, Davorova odluka 28.08.2026.
	   Kontrast je 3,99:1 i ne prolazi WCAG AA — prihvacen rizik. */
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	padding: 19px 40px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
	font-weight: 400;
}

.td-submit:hover { background: var(--wp--preset--color--accent-hover); color: var(--wp--preset--color--base); }
.td-submit[disabled] { opacity: .5; cursor: not-allowed; }

/* CTA */
.td-cta {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	padding: 17px 30px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	transition: background var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.td-cta:hover { background: var(--wp--preset--color--accent-hover); color: var(--wp--preset--color--base); }

.td-cta-band-photo {
	position: relative;
	/* Dizajn: 1440x600. Nije jednaka traci sa slikom (700) — ta razlika
	   je u dizajnu namjerna. */
	min-height: clamp(300px, 44vw, 600px);
	display: grid;
	place-items: center;
	text-align: center;
	padding-inline: var(--wp--preset--spacing--gutter);
	isolation: isolate;
}

.td-cta-band-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	margin: 0;
	/* Datoteka je cijela scena (kvadrat), rez se radi ovdje. Pomak prema
	   dolje jer su rjesetka i namjestaj u donjoj polovici — sredisnji rez
	   ostavlja samo daske i izgleda prezumirano. */
	/* Datoteka je vec izrezana na vidljivi pojas (fokus 55% ugraden u rez),
	   pa bajtovi ne odlaze na dio slike koji se nikad ne vidi. */
	object-position: center center;
}

.td-cta-band-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim--cta-flat), var(--wp--custom--scrim--cta-radial);
	z-index: -1;
}

.td-cta-band-photo h2 {
	color: var(--wp--preset--color--base);
	line-height: 1;
	font-size: var(--wp--preset--font-size--h-2-xl);
	letter-spacing: var(--wp--custom--tracking--h-2);
	max-width: 18ch;
	margin: 0 auto var(--wp--preset--spacing--stack-sm);
}

.td-cta-band-flat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--gap-cols);
	flex-wrap: wrap;
}

.td-cta-band-flat h2 {
	font-size: var(--wp--preset--font-size--h-2-m);
	letter-spacing: var(--wp--custom--tracking--h-2);
	max-width: 18ch;
	margin: 0;
}

/* Artboardi: tamna traka (pillar) 16ch, svijetla (usporedba) 18ch. */
.td-cta-band-flat.td-ink h2 { color: var(--wp--preset--color--base); max-width: 16ch; }

/* lead-magnet-panel — specimen, ne brosura */
.td-lead-magnet {
	border: 1px solid var(--wp--preset--color--ink);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 3vw, 44px);
	padding: clamp(20px, 2.6vw, 36px);
	align-items: start;
}

.td-lead-magnet__specimen { margin: 0; aspect-ratio: 1 / 1.414; }
.td-lead-magnet__specimen img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--wp--preset--color--line); }

.td-lead-magnet h2 { font-size: var(--wp--preset--font-size--h-2-s); letter-spacing: var(--wp--custom--tracking--h-2); margin: 10px 0 12px; }

/* map-pair */
/* Contact.dc.html: dvije karte jedna uz drugu, bez razmaka. */
.td-map-pair { grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--grid-min--split), 1fr)); gap: 0; }

.td-map {
	position: relative;
	/* max-width je nuzan: aspect-ratio + min-height inace izvedu sirinu
	   od 427 px i probiju viewport na 375. */
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 240px;
	background: repeating-linear-gradient(45deg, var(--wp--preset--color--surface) 0 10px, var(--wp--preset--color--surface-cool-2) 10px 20px);
}

.td-map__card {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	background: var(--wp--preset--color--base);
	padding: clamp(14px, 1.8vw, 22px);
}

.td-map__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 8px;
}

.td-map__street { font-size: 15.5px; margin: 0; }

/* tbc-chip */
.td-tbc {
	display: inline-block;
	border: 1px dashed var(--wp--preset--color--line-tbc);
	padding: 8px 11px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--tracking--caption);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

/* tbc inline — ista oznaka usred proze. Cip bi ovdje razbio redak i podigao
   tekst u velika slova, pa ostaje samo iscrtkani podvlak i naslijedeno pismo. */
.td-tbc--inline {
	display: inline;
	border: 0;
	border-block-end: 1px dashed var(--wp--preset--color--line-tbc);
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	/* inherit, ne none: u mono meta redu i tablici projekta okolina je
	   uppercase, pa bi oznaka jedina ostala malim slovima. */
	text-transform: inherit;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.td-cta, .td-submit { transition: none; }
}

/* Stranice projekata ------------------------------------------------------
   Prema ProjectPage.dc.html (redizajn 03.10.2026.). Markup generira
   alati/projekti/gradi.py, slike su u /wp-content/uploads/projects/<slug>/. */

.td-project-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(20px, 4vw, 64px);
	align-items: end;
	padding: clamp(30px, 5vw, 90px) var(--wp--preset--spacing--gutter) clamp(28px, 4vw, 56px);
}

.td-project-hero > * > *, .td-project-hero > * { margin-block: 0; }

.td-project-hero__crumb { font-size: var(--wp--preset--font-size--eyebrow-sub); }
.td-project-hero__crumb a { color: inherit; text-decoration: none; }

.td-project-hero h1 {
	margin-block-start: 20px;
	font-size: var(--wp--preset--font-size--h-1-page);
	line-height: .95;
	letter-spacing: -.05em;
	max-width: 14ch;
	text-wrap: balance;
}

.td-project-hero__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	line-height: 1.75;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	padding-block-end: 6px;
}

/* Bijela kartica s natpisom u donjem lijevom kutu — hero, par, prije/poslije. */
.td-project-plate figcaption,
.td-project-pair figcaption,
.td-project-ba figcaption {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	background: var(--wp--preset--color--base);
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
}

.td-project-plate {
	position: relative;
	margin: 0 var(--wp--preset--spacing--gutter);
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
}

.td-project-pair {
	margin: 0 var(--wp--preset--spacing--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(8px, 1vw, 16px);
}

.td-project-pair figure,
.td-project-ba figure { position: relative; margin: 0; aspect-ratio: 4 / 5; background: var(--wp--preset--color--surface); }
.td-project-ba figure { aspect-ratio: 3 / 4; }

:where(.td-project-plate, .td-project-pair, .td-project-ba, .td-project-stage__photos, .td-project-lead, .td-project-gallery, .td-project-next__img) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Clanak: H2 lijevo, tekst desno, crta iznad svake sekcije, gornja granica 1240. */
.td-project-article {
	box-sizing: border-box;
	max-width: 1240px;
	padding: clamp(56px, 8vw, 130px) var(--wp--preset--spacing--gutter) 0;
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 96px);
}

.td-project-section,
.td-project-result {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(16px, 4vw, 72px);
	align-items: start;
	padding-block-start: clamp(28px, 3vw, 40px);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.td-project-result { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 4vw, 72px); }

:where(.td-project-section, .td-project-result, .td-project-ba, .td-project-details) h2 {
	font-size: var(--wp--preset--font-size--h-2-s);
	line-height: 1.02;
	letter-spacing: var(--wp--custom--tracking--h-2);
	margin: 0;
}

.td-project-section > p,
.td-project-result p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	max-width: 58ch;
	text-wrap: pretty;
}

.td-project-stage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 20px;
	align-items: start;
	padding: 22px 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.td-project-stages .td-project-stage:first-child { padding-block-start: 0; }

.td-project-stage h3 {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin: 0;
	font-size: clamp(18px, 1.6vw, 23px);
	font-weight: 300;
	letter-spacing: var(--wp--custom--tracking--step);
}

.td-project-stage h3 span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: normal;
	color: var(--wp--preset--color--accent);
}

.td-project-stage p {
	margin: 11px 0 0;
	padding-inline-start: 25px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--text-body);
	max-width: 52ch;
	text-wrap: pretty;
}

.td-project-stage__photos { display: flex; gap: 12px; justify-content: flex-end; }
.td-project-stage__photos figure { flex: 1 1 0; min-width: 0; max-width: 220px; margin: 0; }
.td-project-stage__photos img { aspect-ratio: 3 / 4; height: auto; }

/* Natpis ispod slike — faze, rezultat, galerija. */
:where(.td-project-stage__photos, .td-project-lead, .td-project-gallery) figcaption {
	margin-block-start: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.td-project-result-wrap { padding: clamp(56px, 6vw, 96px) var(--wp--preset--spacing--gutter) 0; }
.td-project-result > div:first-child { max-width: 52ch; }
.td-project-result h2 + p { margin-block-start: clamp(18px, 2vw, 28px); }

.td-project-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(8px, 1vw, 16px);
	width: 100%;
	max-width: 640px;
	justify-self: start;
}

.td-project-lead--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.td-project-lead figure, .td-project-gallery figure { margin: 0; }
.td-project-lead img, .td-project-gallery img { aspect-ratio: 4 / 5; height: auto; background: var(--wp--preset--color--surface); }

/* Broj stupaca biran da nijedan red ne ostane s jednom snimkom. */
.td-project-gallery { margin-block-start: clamp(8px, 1vw, 16px); display: grid; gap: clamp(8px, 1vw, 16px); }
.td-project-gallery--c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.td-project-gallery--c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.td-project-gallery--c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.td-project-ba,
.td-project-details { padding: clamp(56px, 8vw, 130px) var(--wp--preset--spacing--gutter) 0; }

.td-project-ba__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block-end: clamp(16px, 2vw, 28px);
}

.td-project-ba__head h2 { line-height: 1; }
.td-project-ba__head .td-eyebrow-sub { margin: 0; color: var(--wp--preset--color--accent); }

.td-project-ba__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(8px, 1vw, 16px);
	max-width: 1040px;
}

.td-project-details h2 { line-height: 1; }

.td-project-details dl {
	margin: clamp(20px, 2.6vw, 36px) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 0 clamp(24px, 5vw, 90px);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.td-project-details dl > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 16px;
	min-height: 60px;
	align-items: baseline;
	padding: 19px 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.td-project-details dt { font-size: 15.5px; color: var(--wp--preset--color--text-body); }

.td-project-details dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.td-project-next {
	margin: clamp(56px, 8vw, 130px) var(--wp--preset--spacing--gutter) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(140px, 22vw, 320px));
	gap: clamp(16px, 3vw, 48px);
	align-items: center;
	padding: clamp(20px, 2vw, 28px) 0;
	border-block: 1px solid var(--wp--preset--color--line);
	border-block-start-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.td-project-next p { margin: 0; }
.td-project-next .td-eyebrow { font-size: var(--wp--preset--font-size--eyebrow-sub); }

.td-project-next .td-project-next__name {
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--h-2-m);
	font-weight: 200;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--h-2);
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.td-project-next:hover .td-project-next__name,
.td-project-next:focus-visible .td-project-next__name { color: var(--wp--preset--color--accent); }

.td-project-next .td-project-next__scope { margin-block-start: 12px; font-size: 15px; color: var(--wp--preset--color--text-muted); }
.td-project-next__img { aspect-ratio: 4 / 3; background: var(--wp--preset--color--surface); }

/* Forma na dnu projekta: artboard ima h-2-m i uvod od 44ch. */
.td-quote--project { margin-block-start: clamp(56px, 8vw, 130px); gap: clamp(28px, 5vw, 90px); }
.td-quote--project h2 { font-size: var(--wp--preset--font-size--h-2-m); line-height: 1; max-width: 14ch; }
.td-quote--project h2 + p { margin-block-start: 20px; font-size: 16px; max-width: 44ch; }

/* Kartica projekta kao link: <a> oko postojece kartice, da se geometrija
   kartice (4/5, align-self) ne mijenja. */
.td-project-card-link { display: block; align-self: start; color: inherit; text-decoration: none; }
.td-project-card-link[hidden] { display: none; }
.td-project-card-link:hover .td-project-card__name,
.td-project-card-link:focus-visible .td-project-card__name { color: var(--wp--preset--color--accent); }

/* Filter, ODGOVOR-FAZA-2 2.2: tipografski, bez podloga i pilula. */
.td-project-filter {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.8vw, 40px);
	padding: 18px var(--wp--preset--spacing--gutter);
	border-block: 1px solid var(--wp--preset--color--line);
}

.td-project-filter[hidden] { display: none; }

.td-project-filter button,
.td-project-empty button {
	appearance: none;
	background: none;
	border: 0;
	border-block-end: 1px solid transparent;
	padding: 6px 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	min-height: 44px;
}

.td-project-filter button span {
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--line-tbc);
}

.td-project-filter button[aria-pressed="true"] { color: var(--wp--preset--color--accent); border-block-end-color: var(--wp--preset--color--accent); }
.td-project-filter button[aria-pressed="true"] span { color: var(--wp--preset--color--accent); }

.td-project-empty { max-width: 44ch; }
.td-project-empty[hidden], [data-td-filter-grid][hidden] { display: none; }
.td-project-empty .td-eyebrow-sub { color: var(--wp--preset--color--accent); margin: 0; }
.td-project-empty__text { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5; font-weight: 200; text-wrap: pretty; }
.td-project-empty__actions { display: flex; gap: clamp(16px, 2.6vw, 32px); align-items: center; flex-wrap: wrap; margin: 26px 0 0; }
.td-project-empty__actions button { color: var(--wp--preset--color--ink); border-block-end-color: var(--wp--preset--color--accent); padding: 0; min-height: 0; }

/* Mobilno (artboard nema 375): kartica s natpisom preko slike od 177 px
   pokrivala je pola fotografije, pa ispod 600 px natpis ide ispod slike. */
@media (max-width: 600px) {
	.td-project-plate,
	.td-project-pair figure,
	.td-project-ba figure { aspect-ratio: auto; background: none; }
	.td-project-plate img { aspect-ratio: 16 / 9; height: auto; }
	.td-project-pair img { aspect-ratio: 4 / 5; height: auto; }
	.td-project-ba img { aspect-ratio: 3 / 4; height: auto; }
	.td-project-plate figcaption,
	.td-project-pair figcaption,
	.td-project-ba figcaption { position: static; padding: 8px 0 0; font-size: 10px; color: var(--wp--preset--color--text-muted); }
}

/* =========================================================================
   Redizajn deset stranica (design_handoff_10_stranica, 03.10.2026.)
   Usluge, About, Materials, Thank you, Privacy. Markup slaze
   alati/rail-stranice.py iz sadrzaj/*.html.
   ========================================================================= */

/* article-rail: broj + H2 lijevo (sticky dok se cita), tekst desno do 660 px.
   Ispod ~760 px stupci se slazu. */
.td-rail {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 5vw, 96px);
	align-items: flex-start;
	padding: clamp(48px, 7vw, 120px) var(--wp--preset--spacing--gutter);
}

/* Sekcije s koracima ili popisom idu na pijesak; proza ostaje bijela. */
.td-rail--sand { background: var(--wp--preset--color--surface); }

.td-rail > * { margin-block: 0; }

.td-rail__head {
	flex: 1 1 280px;
	max-width: 460px;
	position: sticky;
	/* 28 px iz artboarda + visina stisnutog sticky headera. */
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 116px);
}

.td-rail__head > * { margin-block: 0; }

.td-rail__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow-sub);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	color: var(--wp--preset--color--accent);
}

.td-rail__head h2 {
	margin-block-start: 14px;
	font-size: clamp(28px, 3.2vw, 50px);
	line-height: 1;
	letter-spacing: -.042em;
	text-wrap: balance;
}

.td-rail__body {
	flex: 1.5 1 420px;
	max-width: 660px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.td-rail__body > *,
.td-rail__body .td-prose > * { margin-block: 0; }

.td-rail__body .td-prose { max-width: none; display: flex; flex-direction: column; gap: 20px; }

/* :not([class*="td-"]) — natpisi certifikata, adrese i slicno imaju vlastiti
   stil; bez ovoga (0,1,1) ih gazi (natpis certifikata bio je 16,5 px). */
.td-rail__body p:not([class*="td-"]) {
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--wp--preset--color--text-body);
	text-wrap: pretty;
}

/* Standfirst: kratak prvi odlomak ispred jos teksta (has-standfirst se
   stavlja po sekciji, ne naslijepo). */
.has-standfirst .td-rail__body > p:first-child,
.has-standfirst .td-rail__body > .td-prose:first-child > p:first-child {
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.45;
	font-weight: 200;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
}

/* H3 u tijelu: broj u monu, crta iznad. Brojac po sekciji. */
.td-rail__body { counter-reset: td-rail-h3; }

.td-rail__body h3 {
	counter-increment: td-rail-h3;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: baseline;
	margin-block-start: 14px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--step);
}

.td-rail--sand .td-rail__body h3 { border-block-start-color: var(--wp--preset--color--line-surface); }

.td-rail__body h3::before {
	content: counter(td-rail-h3, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--wp--preset--color--accent);
}

/* Koraci procesa u tijelu: geometrija iz artboarda, broj dolazi od h3. */
.td-rail .td-process { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.td-rail .td-process__step { border: 0; padding: 0; }
.td-rail .td-process__head { display: block; }
.td-rail .td-process__head::before { content: none; }
.td-rail .td-process__step h3 { margin-block-start: 14px; }
.td-rail .td-process__step p { margin: 20px 0 0; max-width: none; font-size: 16.5px; line-height: 1.78; }

/* Popis u tijelu: 44 px broj, crta iznad svake stavke. */
.td-rail .td-checklist { margin: 0; }
.td-rail .td-checklist li {
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0;
	padding: 16px 0;
	font-size: 16.5px;
	color: var(--wp--preset--color--ink);
}
.td-rail--sand .td-checklist li { border-block-start-color: var(--wp--preset--color--line-surface); }

/* Uvod ispod heroja na ovim stranicama: veci lede iz artboarda. */
.td-intro--lede { max-width: none; font-size: inherit; padding: clamp(34px, 5vw, 90px) var(--wp--preset--spacing--gutter) 0; }
.td-intro--lede p {
	font-size: clamp(21px, 2.1vw, 34px);
	line-height: 1.36;
	letter-spacing: -.012em;
	max-width: 28ch;
	color: var(--wp--preset--color--ink);
}

/* Fotografska traka: 1 snimka 21/9 ili 2 snimke 5/4, od ruba do ruba, 4 px. */
.td-band {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 4px;
	background: var(--wp--preset--color--base);
}

.td-band figure { position: relative; margin: 0; aspect-ratio: 5 / 4; background: var(--wp--preset--color--line-surface); }
.td-band--one figure { aspect-ratio: 21 / 9; }
.td-band img { display: block; width: 100%; height: 100%; object-fit: cover; }

.td-band figcaption {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	background: var(--wp--preset--color--base);
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-body);
}

@media (max-width: 600px) {
	.td-band--one figure { aspect-ratio: 4 / 3; }
}

/* Par adresa umjesto karata (Installation, "Where we install"). */
.td-offices {
	margin-block-start: 18px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
}

.td-offices > div { background: var(--wp--preset--color--base); padding: 22px 24px; }
.td-offices p { margin: 0; }
.td-rail__body .td-offices__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	line-height: normal;
}
.td-rail__body .td-offices__addr { margin-block-start: 10px; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--ink); }
.td-rail__body .td-offices__note { margin-block-start: 4px; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--text-muted); }

/* Forma, QuoteForm.dc.html — isti blok na svakoj stranici, mijenja se samo H2. */
.td-quote.td-grid--split:not(.td-quote--project) {
	background: var(--wp--preset--color--base);
	padding: clamp(48px, 8vw, 140px) var(--wp--preset--spacing--gutter);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(32px, 6vw, 110px);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.td-quote.td-grid--split:not(.td-quote--project) > .wp-block-group:first-child { max-width: 30ch; }

.td-quote.td-grid--split:not(.td-quote--project) h2 {
	font-size: clamp(30px, 3.8vw, 60px);
	line-height: .96;
	letter-spacing: -.045em;
	max-width: none;
	text-wrap: balance;
}

.td-quote.td-grid--split:not(.td-quote--project) h2 + p { margin-block-start: 22px; font-size: 16px; line-height: 1.7; }
.td-quote .td-form-aside__meta { margin-block-start: 30px; }

/* Velika tamna CTA traka na stranicama bez forme (About, Materials, Thank you). */
.td-cta-band-flat--big {
	padding-block: clamp(56px, 8vw, 130px);
	align-items: flex-end;
	gap: 28px;
}

.td-cta-band-flat.td-cta-band-flat--big h2 {
	font-size: clamp(34px, 4.6vw, 74px);
	line-height: .95;
	letter-spacing: -.045em;
	max-width: 13ch;
}

/* Tamni hero s recenicom umjesto meta redaka (Removal). */
.td-pillar-hero--note { padding-block: clamp(30px, 5vw, 90px) clamp(36px, 5vw, 90px); }
.td-pillar-hero--note h1 { max-width: 11ch; }
.td-pillar-hero--note .td-pillar-hero__subhead {
	font-size: clamp(18px, 1.7vw, 26px);
	line-height: 1.45;
	font-weight: 200;
	color: var(--wp--custom--on-dark--body);
	max-width: 28ch;
}

/* Svijetli hero s recenicom (Privacy). */
.td-pillar-hero:not(.td-pillar-hero--dark) .td-pillar-hero__subhead {
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.5;
	color: var(--wp--preset--color--text-body);
	max-width: 36ch;
	margin: 0;
}

/* Plocice dodataka (Accessories): uvijek 4 stupca na desktopu i 2 na
   mobitelu, 1:1, natpis ispod pod crtom s brojem. */
.td-plates { padding: clamp(40px, 6vw, 100px) var(--wp--preset--spacing--gutter); }
.td-plates .td-grid--plate {
	grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - 72px) / 4)), 1fr));
	gap: 24px;
	counter-reset: td-plate;
}
.td-plates .td-plate { margin: 0; counter-increment: td-plate; }
.td-plates .td-plate img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; background: var(--wp--preset--color--surface); }
.td-plates .td-plate__label {
	position: static;
	display: flex;
	justify-content: space-between;
	margin: 12px 0 0;
	padding: 10px 0 0;
	background: none;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
}
.td-plates .td-plate__label::after { content: counter(td-plate, decimal-leading-zero); color: var(--wp--preset--color--accent); }

/* Logotipi partnera i sajmova u tijelu sekcije: mreza celija s crtom, 16/9. */
.td-rail .td-logo-row,
.td-rail .td-logo-row--fairs {
	margin-block-start: 8px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0;
	padding: 1px 0 0 1px;
}

.td-rail .td-logo-row figure,
.td-rail .td-logo-row--fairs figure {
	margin: -1px 0 0 -1px;
	height: auto;
	aspect-ratio: 16 / 9;
	padding: 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.td-rail .td-logo-row img { max-height: 70%; max-width: 80%; }

/* Thank you: plocice projekata 1:1. */
.td-plates-square .td-project-card figure { aspect-ratio: 1 / 1; }

/* /services/ (Services.dc.html): lede + indeks, sedam redaka na pijesku,
   tamna traka "Not sure which service". */
.td-svc-intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(30px, 6vw, 110px);
	align-items: start;
	padding: clamp(34px, 5vw, 90px) var(--wp--preset--spacing--gutter);
}

.td-svc-intro__lede {
	margin: 0;
	font-size: clamp(20px, 2vw, 32px);
	line-height: 1.38;
	font-weight: 200;
	letter-spacing: -.01em;
	max-width: 24ch;
	text-wrap: pretty;
}

.td-svc-intro .td-eyebrow { margin: 0; }
.td-svc-index { list-style: none; margin: 16px 0 0; padding: 0; }
.td-svc-index a {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 20px;
	gap: 12px;
	align-items: baseline;
	padding: 13px 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	font-size: clamp(15px, 1.2vw, 18px);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.td-svc-index a::after { content: "↓"; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--cta); color: var(--wp--preset--color--accent); text-align: end; }
.td-svc-index a:hover, .td-svc-index a:focus-visible { color: var(--wp--preset--color--accent); }
.td-svc-index span { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--accent); }

.td-svc-list {
	background: var(--wp--preset--color--surface);
	padding: clamp(20px, 3vw, 40px) var(--wp--preset--spacing--gutter) clamp(48px, 8vw, 130px);
}

.td-svc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(20px, 4vw, 72px);
	align-items: start;
	padding: clamp(32px, 4.5vw, 72px) 0;
	border-block-end: 1px solid var(--wp--preset--color--line-surface);
	scroll-margin-top: 120px;
}

.td-svc p, .td-svc h2, .td-svc figure { margin: 0; }
.td-svc h2 {
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--h-2-s);
	line-height: 1.02;
	letter-spacing: var(--wp--custom--tracking--h-2);
	max-width: 15ch;
	text-wrap: balance;
}
.td-svc > div:nth-child(2) > p:first-child { font-size: 16px; line-height: 1.75; color: var(--wp--preset--color--text-body); max-width: 58ch; text-wrap: pretty; }
.td-svc .td-svc__link { margin-block-start: 22px; }
.td-svc__link a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.td-svc__link a:hover { text-decoration: underline; text-underline-offset: .28em; }
.td-svc figure { aspect-ratio: 4 / 3; background: var(--wp--preset--color--line-surface); max-width: 420px; width: 100%; justify-self: end; }
.td-svc img { display: block; width: 100%; height: 100%; object-fit: cover; }

.td-svc-band.td-cta-band-flat {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 5vw, 90px);
	align-items: end;
	padding-block: clamp(48px, 8vw, 130px);
}
.td-svc-band h2 { grid-row: span 2; font-size: clamp(32px, 4.4vw, 70px); line-height: .95; letter-spacing: -.045em; max-width: 12ch; }
.td-svc-band p { margin: 0; max-width: 52ch; }
.td-svc-band p + p { margin-block-start: 28px; }

/* Services, sitnice iz usporedbe s artboardom. */
.td-svc-intro .td-eyebrow { font-size: var(--wp--preset--font-size--eyebrow-sub); }
.td-svc h2 { font-size: clamp(26px, 2.8vw, 44px); }
.td-svc-band p { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.td-svc-band p:has(.td-cta) { color: inherit; }

/* Meta redovi heroja i bocni tekst forme: novi artboardi dosljedno #6A6A6A
   (text-muted), ne #9A9A9A. */
.td-pillar-hero__meta { color: var(--wp--preset--color--text-muted); }
.td-quote .td-form-aside__meta { color: var(--wp--preset--color--text-muted); }
.td-quote .td-field label { font-size: 10px; color: var(--wp--preset--color--text-muted); }
.td-quote .td-form__note { font-size: 13.5px; }

/* Thank you: natpis plocice u monu s brojem, kao na Accessories. */
.td-plates-square .td-grid--cards { counter-reset: td-plate; }
.td-plates-square .td-project-card { counter-increment: td-plate; }
.td-plates-square .td-project-card__name {
	display: flex;
	justify-content: space-between;
	margin-block-start: 12px;
	padding-block: 10px 0;
	border-block-end: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
}
.td-plates-square .td-project-card__name::after { content: counter(td-plate, decimal-leading-zero); color: var(--wp--preset--color--accent); }
.td-plates-square .td-project-card__scope { color: var(--wp--preset--color--text-body); }
.td-plates-square .td-eyebrow { font-size: var(--wp--preset--font-size--eyebrow-sub); }

/* Kad se stupci slozu (ispod ~800 px), sticky naslov bi ostao zalijepljen
   iznad teksta koji klizi ispod njega. */
@media (max-width: 800px) {
	.td-rail__head { position: static; max-width: none; }
}

/* Vidljivi opisi fotografija maknuti (Davor, 03.10.2026.) — opis ostaje u alt
   atributu. Oznake Before/After na usporedbi ostaju jer nose informaciju. */
.td-band figcaption,
.td-project-plate figcaption,
.td-project-pair figcaption,
.td-project-stage__photos figcaption,
.td-project-lead figcaption,
.td-project-gallery figcaption { display: none; }