/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; } /* 17px */
@media (min-width: 768px) { html { font-size: 112.5%; } }    /* 18px */
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--serif); }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--sans); margin: 0; hyphens: manual; text-wrap: balance; } /* headings never split a word */
p { margin: 0; }
p + p { margin-top: var(--s4); }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-ink :focus-visible, .on-blue :focus-visible { outline-color: var(--yellow); }
sub { font-size: .7em; line-height: 0; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Placeholder / unconfirmed fact. Visible on purpose until the client confirms. */
mark.ph { background: var(--yellow); color: var(--ink); padding: 0 .3em; font: 600 .74em/1.5 var(--sans); letter-spacing: .01em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.skip { position: absolute; left: var(--s4); top: -100px; z-index: 40; background: var(--ink); color: var(--on-ink); padding: var(--s3) var(--s4); font: 600 var(--step--1)/1 var(--sans); }
.skip:focus { top: var(--s4); }

/* ---------- layout ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section--stone { background: var(--stone); border-top: 0 !important; }
.section--stone + .section { border-top: 0; }
.prose { max-width: var(--measure); }
.label { font: 600 var(--step--1)/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--s4); }
.h2 { font: 700 var(--step-3)/1.1 var(--sans); letter-spacing: -.015em; }
.h3 { font: 700 var(--step-1)/1.25 var(--sans); }
.lead { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }
.small { font: 400 var(--step--1)/1.5 var(--sans); color: var(--graphite); }

/* 12-column grid from 1024px; content blocks place themselves */
@media (min-width: 1024px) {
  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
  .c-1-4 { grid-column: 1 / -1; }
  .c-1-5 { grid-column: 1 / span 5; }
  .c-1-7 { grid-column: 1 / span 7; }
  .c-5-8 { grid-column: 1 / -1; }
  .c-6-7 { grid-column: 6 / span 7; }
  .c-8-5 { grid-column: 8 / span 5; }
  .c-9-4 { grid-column: 9 / span 4; }
}

/* Side-by-side "heading | content" rows (c-1-4 / c-5-8): stacked until the left column is
   wide enough for long words (≥1280px), where the side heading also steps down to --step-2. */
.c-1-4 + .c-5-8, .c-1-4 + .c-5-8.why { margin-top: var(--s5); }
@media (min-width: 1280px) {
  .c-1-4 { grid-column: 1 / span 4; }
  .c-5-8 { grid-column: 5 / span 8; }
  .c-1-4 + .c-5-8, .c-1-4 + .c-5-8.why { margin-top: 0; }
  .c-1-4 .h2, .h2.c-1-4 { font-size: var(--step-2); }
}

/* ---------- squares (the logo's system) ---------- */
.sq { --sq: 14px; width: var(--sq); height: var(--sq); display: inline-block; flex: none; vertical-align: middle; }
.sq--red { background: var(--red); transform: rotate(var(--tilt)); }
.sq--ink { background: var(--ink); }
.sq--yellow { background: var(--yellow); }
.sq--blue { background: var(--blue); position: relative; }
.sq--blue::after { /* speech-bubble tail */
  content: ""; position: absolute; right: 0; bottom: calc(var(--sq) * -.42);
  border-style: solid; border-width: 0 calc(var(--sq) * .42) calc(var(--sq) * .42) 0;
  border-color: transparent var(--blue) transparent transparent;
}
.on-ink .sq--ink { box-shadow: inset 0 0 0 2px var(--on-ink); }
.sq--line { box-shadow: inset 0 0 0 2px var(--ink); }
.sq--stone { background: var(--stone); box-shadow: inset 0 0 0 1px var(--rule); }

/* ---------- header ---------- */
/* Sticky: the bar stays at the top while scrolling (solid ground, no blur). */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--rule); background: var(--paper); }
/* anchors and focused elements land below the sticky bar, not under it */
html { scroll-padding-top: calc(72px + var(--s5)); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 72px; }
.brand { display: block; padding: var(--s2) 0; }
.brand img { width: 120px; height: auto; }
.menu-btn { display: none; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--ink); background: none; color: var(--ink); font: 600 var(--step--1)/1 var(--sans); cursor: pointer; }
.nav-panel { display: flex; flex-wrap: wrap; gap: 0 var(--s5); align-items: center; }
.site-nav ul, .lang ul { display: flex; flex-wrap: wrap; }
.site-nav a, .lang a { display: flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration: none; font: 600 var(--step--1)/1 var(--sans); }
.site-nav a { padding: 0 var(--s3); }
.lang a { justify-content: center; }
.site-nav a:hover, .lang a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.site-nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--red); }
/* home icon (29 Oct 2026): a line house in ink, label for screen readers; written out in the phone menu */
.nav-home svg { display: block; flex: none; }
.nav-home-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang a[aria-current] { box-shadow: inset 0 -3px 0 var(--ink); }

/* phones with JS: menu button + panel */
@media (max-width: 899px) {
  .js .menu-btn { display: block; }
  .js .nav-panel { display: none; }
  .js .site-header.is-open .nav-panel {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
    background: var(--paper); border-bottom: 2px solid var(--ink); padding: var(--s3) var(--gutter) var(--s6);
  }
  .js .site-nav ul { display: block; }
  .js .site-nav a { font: 700 var(--step-2)/1.2 var(--sans); min-height: 56px; padding: 0; border-bottom: 1px solid var(--rule); }
  .js .site-nav a[aria-current] { box-shadow: none; }
  .js .nav-home { gap: var(--s3); }
  .js .nav-home svg { width: 24px; height: 24px; }
  .js .nav-home-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .js .site-nav a[aria-current]::before { content: ""; width: 14px; height: 14px; background: var(--red); transform: rotate(var(--tilt)); margin-right: var(--s3); }
  .js .lang { margin-top: var(--s5); }
  .js .lang ul { gap: var(--s2); }
  .js .lang a { border: 1px solid var(--rule); padding: 0 var(--s4); }
  .js .lang a[aria-current] { border-color: var(--ink); box-shadow: none; background: var(--ink); color: var(--on-ink); }
  /* no JS: nav and languages wrap under the logo */
  .site-header .wrap { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .brand img { width: 148px; }
  .nav-panel { gap: var(--s6); }
}

/* ---------- breadcrumb ---------- */
.crumbs { font: 500 var(--step--1)/1.4 var(--sans); color: var(--graphite); padding-top: var(--s5); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--rule); }
.crumbs a { color: var(--graphite); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- page head ---------- */
.page-head { padding: var(--s7) 0 var(--s7); }
.page-head h1 { font: 750 var(--step-4)/1.05 var(--sans); letter-spacing: -.02em; max-width: 22ch; }
.page-head .lead { margin-top: var(--s5); }
@media (min-width: 1024px) { .page-head { padding: var(--s8) 0 var(--s7); } }
/* services intro: the index stacks under the lead on phones/tablets and needs its own space */
.page-head .c-9-4 { margin-top: var(--s6); }
@media (min-width: 1024px) { .page-head .c-9-4 { margin-top: 0; } }

/* ---------- home: opening ---------- */
.opening { padding: var(--s7) 0 var(--s6); display: grid; gap: var(--s6); }
/* client headline (Oct 2026) is ~85 characters: one step smaller and a wider measure than the first 44-character line */
.opening h1 { font: 750 var(--step-4)/1.04 var(--sans); letter-spacing: -.022em; max-width: 19ch; }
.opening .lead { margin-top: var(--s5); max-width: 34ch; }
@media (min-width: 1024px) {
  .opening { grid-template-columns: 7fr 1fr 4fr; align-items: end; padding: var(--s8) 0 var(--s7); }
  .opening .index { grid-column: 3; }
}

.index { border-top: 2px solid var(--ink); }
.index li { border-bottom: 1px solid var(--rule); }
.index a { display: grid; grid-template-columns: var(--s6) 1fr auto; align-items: center; gap: var(--s3); min-height: 56px; color: var(--ink); text-decoration: none; font: 600 var(--step-0)/1.25 var(--sans); padding: var(--s2) 0; }
.index a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.index .n { font: 500 var(--step--1)/1 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; }
.index .d { grid-column: 2 / -1; font: 400 var(--step--1)/1.5 var(--serif); color: var(--graphite); }

/* ---------- home: two paths ---------- */
.paths { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.path { background: var(--paper); padding: var(--s6) var(--gutter); text-decoration: none; color: var(--ink); display: block; }
.path .k { font: 600 var(--step--1)/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.path .h { display: block; font: 700 var(--step-3)/1.1 var(--sans); letter-spacing: -.015em; margin: var(--s3) 0 var(--s5); max-width: 18ch; }
.path .a { font: 700 var(--step-0)/1 var(--sans); color: var(--blue); display: inline-flex; align-items: center; min-height: 44px; }
.path:hover .a { text-decoration: underline; text-underline-offset: .25em; }
.path--in { background: var(--blue); color: var(--on-ink); } /* the logo's blue (29 Oct 2026, client request); was ink */
.path--in .k { color: var(--on-ink-muted); }
.path--in .a { color: var(--on-ink); }
@media (min-width: 1024px) {
  .paths { grid-template-columns: 7fr 5fr; }
  .path { padding: var(--s7) max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); }
  .path--out { padding-left: var(--s6); }
}

/* ---------- home: D-A-CH map in the inbound block (28 Oct 2026) ----------
   Negative/positive: countries are white line on ink; the chosen one turns solid white
   and a corridor draws from Samobor to it. The text keeps its link; the map has its own controls. */
.path--in .path-text { position: relative; }
.path--in .a::after { content: ""; position: absolute; inset: 0; }
.path--in .a, .path--in:hover .a { text-decoration: none; }
.path--in .path-text:hover .a { text-decoration: underline; text-underline-offset: .25em; }
.path--in .a:focus-visible { outline: none; }
.path--in .a:focus-visible::after { outline: 3px solid var(--yellow); outline-offset: 6px; }
/* phones: map with the buttons beside it, the panel below */
.dach { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "map btns" "read read"; column-gap: var(--s4); margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid rgb(250 250 248 / .2); }
.dach-side { display: contents; }
.dach-map { --map: var(--graphite); grid-area: map; width: 100%; max-width: 220px; overflow: hidden; background: var(--map); } /* own grey ground (29 Oct 2026: lightened from ink on request), same negative/positive scheme on the blue block */
.dach-ctx { fill: rgb(250 250 248 / .07); stroke: var(--map); stroke-width: .8; }
.dach-hr { fill: rgb(250 250 248 / .15); }
.dach-c path { fill: var(--map); stroke: var(--on-ink); stroke-width: 1.3; stroke-linejoin: round; transition: fill 250ms ease; }
.dach-c text { font: 700 15px var(--sans); fill: var(--on-ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill 250ms ease; }
.js .dach-c { cursor: pointer; }
.js .dach-c:hover path { fill: #6F6B6C; }
.dach-c.is-on path, .js .dach-c.is-on:hover path { fill: var(--on-ink); }
.dach-c.is-on text { fill: var(--map); }
.dach-corr { opacity: 0; pointer-events: none; }
.dach-corr path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dach-corr .case { stroke: var(--map); stroke-width: 5; }
.dach-corr .line { stroke: var(--on-ink); stroke-width: 2; }
.dach-corr circle { fill: var(--on-ink); stroke: var(--map); stroke-width: 2; opacity: 0; }
.dach-corr.is-on { opacity: 1; }
.dach-corr.is-on path { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-arrive); }
.dach-corr.is-on circle { opacity: 1; transition: opacity 200ms 750ms; }
.dach-hub { fill: var(--red); }
.dach-hub-l { font: 600 11px var(--sans); fill: var(--on-ink); }
.dach-btns { grid-area: btns; display: flex; flex-direction: column; align-self: end; gap: var(--s2); }
.dach-btns button { font: 600 var(--step--1)/1 var(--sans); color: var(--on-ink); background: none; border: 1px solid var(--on-ink-muted); border-radius: 0; min-height: 44px; padding: 0 var(--s3); cursor: pointer; transition: background-color 200ms, color 200ms; }
.dach-btns button:hover { border-color: var(--on-ink); }
.dach-btns button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.dach-read { grid-area: read; display: grid; margin-top: var(--s5); }
.dach-intro { font: 400 var(--step-0)/1.5 var(--serif); color: var(--on-ink-muted); max-width: 34ch; }
.dach-name { font: 700 var(--step-1)/1.2 var(--sans); }
.js .dach-name { display: none; } /* the pressed button names the country */
.dach-l { font: 600 var(--step--1)/1.3 var(--sans); color: var(--on-ink-muted); margin-top: var(--s3); }
.dach-in > .dach-l:first-child, .dach-out > .dach-l:first-child { margin-top: 0; }
.dach-in + .dach-out, html:not(.js) .dach-name + * { margin-top: var(--s3); }
.dach-list { display: flex; flex-wrap: wrap; column-gap: var(--s4); }
.dach-list a { color: var(--on-ink); font: 600 var(--step-0)/1.2 var(--sans); display: inline-flex; align-items: center; min-height: 44px; }
/* with JS: one panel at a time, all in one grid cell so switching never changes the height */
.js .dach-read > * { grid-area: 1 / 1; }
.js .dach-panel:not(.is-on), .js .dach-read.has-sel .dach-intro { visibility: hidden; }
/* without JS: every panel is listed, the controls are not shown */
html:not(.js) .dach-btns, html:not(.js) .dach-intro { display: none; }
html:not(.js) .dach-panel + .dach-panel { margin-top: var(--s5); }
@media (min-width: 560px) {
  .dach { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: none; column-gap: var(--s6); align-items: center; }
  .dach-side { display: block; }
  .dach-map { grid-area: auto; }
  .dach-btns { flex-direction: row; flex-wrap: wrap; }
}
/* desktop, following the client's layout reference (28 Oct 2026): heading | map | country controls
   in one row inside the inbound path. The row needs about 1000px, so up to 1365px the two paths
   stack as on tablet; from 1366px they sit side by side, 2:1. */
@media (min-width: 1024px) {
  .path--in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s6); }
  .dach { grid-template-columns: 220px 18.25rem; column-gap: var(--s5); margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .paths { grid-template-columns: 1fr; }
  .path--out { padding-left: var(--gutter); }
}
@media (min-width: 1366px) {
  .paths { grid-template-columns: 2fr 1fr; }
  .path--in { padding-right: var(--s6); }
}

/* ---------- register (partners table) ---------- */
.register { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.register th, .register td { text-align: left; padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.register thead th { font: 600 var(--step--1)/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); border-bottom: 2px solid var(--ink); }
.register tbody th { font: 700 var(--step-1)/1.2 var(--sans); }
.register tbody th a { display: inline-flex; min-height: 44px; align-items: flex-start; }
.register td { font: 400 var(--step--1)/1.5 var(--sans); }
.register td.what { font: 400 var(--step-0)/1.5 var(--serif); }
.register .excl { display: inline-flex; gap: var(--s2); align-items: center; }
@media (max-width: 767px) {
  .register thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .register, .register tbody, .register tr { display: block; }
  .register tr { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .register th, .register td { display: block; border: 0; padding: var(--s1) 0; }
  .register td[data-k]::before { content: attr(data-k) ": "; color: var(--graphite); font-weight: 600; }
}
.register-head { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
@media (min-width: 1024px) { .register-head { grid-template-columns: 5fr 7fr; align-items: end; } }
.more { margin-top: var(--s5); font: 700 var(--step-0)/1 var(--sans); }
.more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- method (motto) ---------- */
.method { background: var(--ink); color: var(--on-ink); padding: var(--s8) 0; }
.method .label { color: var(--on-ink-muted); }
.method ol { display: grid; gap: var(--s6); }
.method li { display: grid; gap: var(--s2); }
.method .w { font: 750 var(--step-5)/1 var(--sans); letter-spacing: -.025em; }
.method .d { font: 400 var(--step-0)/1.55 var(--serif); color: #DEDADB; max-width: 40ch; } /* 12.9:1 on ink */
@media (min-width: 1024px) {
  .method li { grid-template-columns: 5fr 7fr; align-items: baseline; }
  .method li:nth-child(2) { padding-left: 8.333%; }
  .method li:nth-child(3) { padding-left: 16.666%; }
}
.method--compact { padding: var(--s7) 0; }
.method--compact .w { font-size: var(--step-3); }

/* ---------- territory tile map ---------- */
.territory { display: grid; gap: var(--s6); }
.tilemap { width: 100%; max-width: 480px; }
.tilemap text { font: 700 19px var(--sans); }
.legend { display: grid; gap: var(--s3); font: 500 var(--step--1)/1.4 var(--sans); }
.legend li { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.legend .sq { --sq: 18px; }
.legend .countries { flex-basis: 100%; padding-left: calc(18px + var(--s3)); color: var(--graphite); font-weight: 400; }
@media (min-width: 1024px) { .territory { grid-template-columns: 6fr 1fr 5fr; align-items: center; } .territory .legend-wrap { grid-column: 3; } }

/* ---------- contact block (speech bubble) ---------- */
.bubble { background: var(--blue); color: var(--on-ink); padding: var(--s6) var(--s5); position: relative; margin-bottom: var(--s6); }
.bubble::after { content: ""; position: absolute; right: 0; bottom: calc(var(--s6) * -1); border-style: solid; border-width: 0 var(--s6) var(--s6) 0; border-color: transparent var(--blue) transparent transparent; }
.bubble .h { font: 700 var(--step-3)/1.1 var(--sans); letter-spacing: -.015em; max-width: 20ch; }
.bubble .sub { margin-top: var(--s4); max-width: 40ch; }
.bubble a { color: var(--on-ink); }
.bubble mark.ph { color: var(--ink); }
.bubble .cta { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--s5); padding: 0 var(--s5); background: var(--paper); color: var(--ink); font: 700 var(--step-0)/1 var(--sans); text-decoration: none; }
.bubble .cta:hover { background: var(--yellow); }
.contact-block { display: grid; gap: var(--s5); }
.direct { font: 500 var(--step--1)/1.6 var(--sans); }
.direct .who { font: 700 var(--step-0)/1.3 var(--sans); }
.direct .role { color: var(--graphite); }
.direct a { color: var(--ink); display: inline-flex; min-height: 44px; align-items: center; }
.direct dt { color: var(--graphite); margin-top: var(--s3); }
.direct ul a { gap: var(--s2); }
.direct .cc { display: inline-block; min-width: 2.2em; color: var(--graphite); font-weight: 600; }
@media (min-width: 1024px) {
  .contact-block { grid-template-columns: 6fr 1fr 5fr; align-items: start; }
  .contact-block .direct { grid-column: 3; padding-top: var(--s4); }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding: var(--s7) 0 var(--s6); font: 400 var(--step--1)/1.6 var(--sans); }
.site-footer a { color: var(--on-ink); display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .cols { display: grid; gap: var(--s5); }
.site-footer .name { font: 700 var(--step-0)/1.3 var(--sans); }
.site-footer .muted { color: var(--on-ink-muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.site-footer .marks { display: flex; gap: 6px; margin-bottom: var(--s5); }
.site-footer .marks .sq { --sq: 12px; }
@media (min-width: 768px) { .site-footer .cols { grid-template-columns: 5fr 4fr 3fr; } }

/* ---------- services ---------- */
.act { padding: var(--s8) 0; border-top: 1px solid var(--rule); scroll-margin-top: var(--s4); }
.act-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; margin-bottom: var(--s6); }
.act-head .sq { --sq: 40px; margin-top: 6px; }
.act-head .n { display: block; font: 500 var(--step--1)/1 var(--sans); color: var(--graphite); margin-bottom: var(--s2); }
.act-head h2 { font: 750 var(--step-4)/1.05 var(--sans); letter-spacing: -.02em; min-width: 0; }
@media (max-width: 767px) { .act-head h2 { font-size: var(--step-3); } }
/* Headings never split a word, so on phones display headings scale with the screen
   (same rule in every language) and long compounds such as Datenschutzerklärung fit unbroken. */
@media (max-width: 479px) {
  .act-head { grid-template-columns: 1fr; gap: var(--s3); }
  .act-head h2 { font-size: min(var(--step-3), 7.6vw); }
  .page-head h1 { font-size: min(var(--step-4), 8vw); }
  .opening h1 { font-size: min(var(--step-4), 8vw); }
  .bubble .h { font-size: min(var(--step-3), 7vw); }
}
.act .text { font-size: var(--step-1); line-height: 1.5; max-width: 44ch; }
.deflist { margin-top: var(--s6); border-top: 2px solid var(--ink); }
.deflist div { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s1); }
.deflist dt { font: 700 var(--step-0)/1.3 var(--sans); }
.deflist dd { color: var(--graphite); }
@media (min-width: 768px) { .deflist div { grid-template-columns: 5fr 7fr; gap: var(--s5); } }
.note { margin-top: var(--s5); font: 500 var(--step--1)/1.5 var(--sans); display: flex; gap: var(--s3); align-items: baseline; }
.note a { display: inline-flex; align-items: center; min-height: 44px; }
.questions { margin-top: var(--s6); display: grid; gap: var(--s6); counter-reset: q; }
.questions dt { font: 750 var(--step-3)/1.05 var(--sans); letter-spacing: -.015em; }
.questions dd { margin-top: var(--s2); color: var(--graphite); max-width: 36ch; }
@media (min-width: 768px) { .questions { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } .questions div:nth-child(even) { transform: translateY(var(--s7)); } .questions { padding-bottom: var(--s7); } }
.topics { margin-top: var(--s6); display: grid; gap: 0 var(--s6); }
.topics li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: 600 var(--step-0)/1.4 var(--sans); display: flex; gap: var(--s3); align-items: baseline; }
.topics li::before { content: ""; width: 8px; height: 8px; background: var(--ink); flex: none; transform: translateY(-2px); }
@media (min-width: 768px) { .topics { grid-template-columns: 1fr 1fr; } }
.countries-list { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
.countries-list li { font: 600 var(--step--1)/1 var(--sans); padding: var(--s3) var(--s4); background: var(--stone); }
.countries-list li.hq { background: var(--ink); color: var(--on-ink); }
@media (min-width: 1024px) {
  .act .g12 > .body { grid-column: 5 / span 8; }
  .act .g12 > .act-head { grid-column: 1 / -1; margin-bottom: var(--s6); }
}

/* ---------- path pages ---------- */
.why p { font-size: var(--step-1); line-height: 1.5; max-width: 44ch; }
.example { margin-top: var(--s6); padding-left: var(--s5); border-left: 4px solid var(--red); font: 500 var(--step-0)/1.5 var(--sans); max-width: 52ch; }
.act-list li { border-bottom: 1px solid var(--rule); }
.act-list a { display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s1) var(--s3); padding: var(--s4) 0; color: var(--ink); text-decoration: none; }
.act-list .sq { grid-row: span 2; margin-top: 6px; }
.act-list .t { font: 700 var(--step-1)/1.25 var(--sans); }
.act-list .d { color: var(--graphite); }
.act-list a:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.start { display: grid; gap: var(--s5); counter-reset: s; }
.start li { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 2px solid var(--ink); }
.start .w { font: 750 var(--step-2)/1 var(--sans); letter-spacing: -.01em; }
@media (min-width: 768px) { .start { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } .start li:nth-child(2) { margin-top: var(--s6); } .start li:nth-child(3) { margin-top: calc(var(--s6) * 2); } }
.expect li { font: 700 var(--step-1)/1.3 var(--sans); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); display: flex; gap: var(--s3); align-items: baseline; }
.expect li::before { content: ""; width: 14px; height: 14px; background: var(--yellow); flex: none; transform: translateY(1px); }

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; min-height: 56px; padding: var(--s3) 0; font: 700 var(--step-0)/1.35 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); flex: none; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--blue); }
.faq .a { padding: 0 0 var(--s5); max-width: var(--measure); }

/* ---------- partner page ---------- */
.p-head { padding: var(--s5) 0 var(--s7); display: grid; gap: var(--s6); }
.p-head h1 { font: 750 var(--step-5)/1 var(--sans); letter-spacing: -.025em; }
.p-head .what { font: 400 var(--step-2)/1.3 var(--serif); margin-top: var(--s3); max-width: 26ch; }
.facts { border-top: 2px solid var(--ink); font-family: var(--sans); }
.facts div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); line-height: 1.5; }
.facts dt { color: var(--graphite); font-weight: 600; }
.facts .excl { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 700; }
.facts .note-small { display: block; color: var(--graphite); margin-top: var(--s1); }
@media (min-width: 1024px) { .p-head { grid-template-columns: 7fr 1fr 4fr; align-items: end; } .p-head .p-side { grid-column: 3; } }

.gallery { display: grid; gap: var(--s4); }
.gallery figure { margin: 0; break-inside: avoid; }
.gallery img { width: 100%; height: auto; max-width: var(--native, none); background: var(--stone); }
.gallery figcaption { font: 400 var(--step--1)/1.4 var(--sans); color: var(--graphite); margin-top: var(--s2); }
/* partner logo above the facts panel (client logo files, Oct 2026); sized by height so wide and square marks balance */
.p-logo { display: block; width: auto; height: auto; max-height: 56px; max-width: 220px; margin-bottom: var(--s5); }
/* Heat4All motif examples: a compact grid of square crops, not product photos */
.motifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.motifs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--stone); }
@media (min-width: 768px) { .motifs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .motifs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); } }
/* Two balanced columns: photos of any proportion stack without holes, never cropped. */
@media (min-width: 768px) {
  .gallery { display: block; columns: 2; column-gap: var(--s4); }
  .gallery figure { margin-bottom: var(--s4); }
}
.p-lists { display: grid; gap: var(--s7); }
.p-lists h2 { margin-bottom: var(--s4); }
.p-lists li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.p-lists .audience li { font: 700 var(--step-0)/1.35 var(--sans); }
.p-lists .offers li { font: 400 var(--step-0)/1.5 var(--serif); }
@media (min-width: 1024px) { .p-lists { grid-template-columns: 4fr 1fr 7fr; } .p-lists .offers-wrap { grid-column: 3; } }
.p-lead { font: 400 var(--step-1)/1.55 var(--serif); max-width: 52ch; }
.outbound-note { margin-top: var(--s5); }
.links-out { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s5); font: 700 var(--step-0)/1 var(--sans); }
.links-out a { display: inline-flex; align-items: center; min-height: 44px; }
.others { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.others a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font: 600 var(--step--1)/1 var(--sans); }
.others a:hover { background: var(--ink); color: var(--on-ink); }

/* ---------- partners page: photo previews ----------
   One row per partner: name, line, button | photos. Photos keep their proportions (no crop):
   each span grows by its aspect ratio, so all photos in a row share one height. */
.previews { padding-bottom: var(--s4); }
.preview-row { display: grid; grid-template-areas: "text" "photos" "btn"; gap: var(--s4); padding: var(--s6) 0; border-top: 2px solid var(--ink); }
.pv-text { grid-area: text; } .pv-photos { grid-area: photos; } .preview-row .pv-btn { grid-area: btn; justify-self: start; margin-top: 0; }
.preview-row + .preview-row { border-top: 1px solid var(--rule); }
.pv-name { font: 750 var(--step-3)/1.05 var(--sans); letter-spacing: -.015em; }
.pv-name a { color: var(--ink); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.pv-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.pv-what { font: 400 var(--step-0)/1.5 var(--serif); color: var(--graphite); margin-top: var(--s2); max-width: 34ch; }
.preview-row .p-logo { max-height: 44px; max-width: 180px; margin-bottom: var(--s3); }
.btn { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--s5); padding: 0 var(--s5); background: var(--ink); color: var(--on-ink); font: 700 var(--step--1)/1.2 var(--sans); text-decoration: none; }
.btn:hover { background: var(--blue); }
.pv-photos { display: flex; gap: var(--s2); align-items: flex-start; }
.pv-ph { flex: var(--ar) 1 0; min-width: 0; }
.pv-ph img { display: block; width: 100%; height: auto; background: var(--stone); }
.pv-ph:nth-child(n+3) { display: none; } /* phones: two photos */
.pv-photos:hover img { opacity: .92; }
@media (min-width: 768px) {
  .pv-ph:nth-child(n+3) { display: block; }
  /* same row height for every partner (~230px): fewer or narrower photos take less width */
  .pv-photos { gap: var(--s3); max-width: calc(var(--sum) * 230px + 2 * var(--s3)); }
}
@media (min-width: 1024px) {
  .preview-row { grid-template-columns: 4fr 8fr; grid-template-areas: "text photos" "btn photos"; grid-template-rows: auto 1fr; column-gap: var(--s6); row-gap: var(--s5); align-items: start; }
}

/* ---------- about ---------- */
.person { display: grid; gap: var(--s4); }
.person .name { font: 750 var(--step-4)/1 var(--sans); letter-spacing: -.02em; }
.person .role { font: 600 var(--step--1)/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.person .tilt { width: 56px; height: 56px; background: var(--red); transform: rotate(var(--tilt)); margin-bottom: var(--s3); }
.datalist { border-top: 2px solid var(--ink); font-family: var(--sans); }
.datalist div { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.datalist dt { font: 600 var(--step--1)/1.4 var(--sans); color: var(--graphite); }
.datalist dd { font: 500 var(--step-0)/1.5 var(--sans); }
@media (min-width: 768px) { .datalist div { grid-template-columns: 4fr 8fr; gap: var(--s5); } }

/* ---------- contact page ---------- */
.contact-grid { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 1fr 6fr; } .contact-grid .form-wrap { grid-column: 3; } }
form.enquiry { display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field label { font: 600 var(--step--1)/1.3 var(--sans); }
.field .opt { font-weight: 400; color: var(--graphite); }
.field .hint { font: 400 var(--step--1)/1.4 var(--sans); color: var(--graphite); }
.field input, .field textarea { font: 400 var(--step-0)/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: var(--s3) 0; min-height: 48px; width: 100%; }
.field textarea { min-height: 160px; resize: vertical; border: 2px solid var(--ink); padding: var(--s3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--red); }
.field .err { font: 600 var(--step--1)/1.4 var(--sans); display: flex; gap: var(--s2); align-items: center; }
.field .err:empty { display: none; }
.field .err::before { content: ""; width: 10px; height: 10px; background: var(--red); transform: rotate(var(--tilt)); flex: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* spam trap, invisible to people */
.form-privacy { font: 400 var(--step--1)/1.5 var(--sans); color: var(--graphite); max-width: 52ch; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
button.send { min-height: 48px; padding: 0 var(--s6); border: 0; background: var(--ink); color: var(--on-ink); font: 700 var(--step-0)/1 var(--sans); cursor: pointer; }
button.send:hover { background: var(--blue); }
button.send[disabled] { opacity: .6; cursor: progress; }
.status { font: 600 var(--step-0)/1.5 var(--sans); padding: var(--s4) var(--s5); border-left: 4px solid var(--ink); background: var(--stone); }
.status:empty { display: none; }
.status[data-kind="success"] { border-color: var(--blue); }
.status[data-kind="error"] { border-color: var(--red); }
.map-figure { margin: 0; }
.map-figure img { width: 100%; height: auto; border: 1px solid var(--rule); }
.map-figure figcaption { margin-top: var(--s2); font: 400 var(--step--1)/1.4 var(--sans); color: var(--graphite); }
.address { font: 500 var(--step-1)/1.4 var(--sans); }

/* ---------- legal ---------- */
.legal-sections { display: grid; gap: var(--s6); }
.legal-sections h2 { font: 700 var(--step-1)/1.3 var(--sans); margin-bottom: var(--s3); }

/* ---------- 404 ---------- */
.nf { padding: var(--s9) 0; display: grid; gap: var(--s6); }
.nf h1 { font: 750 var(--step-4)/1.05 var(--sans); }
.nf .langs > div + div { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.nf a { display: inline-flex; min-height: 44px; align-items: center; font: 700 var(--step-0)/1 var(--sans); }

/* ---------- review banner (pre-launch) ---------- */
.review { background: var(--yellow); color: var(--ink); font: 600 var(--step--1)/1.4 var(--sans); padding: var(--s2) 0; margin: 0; }
.review__in { display: block; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- background geometry ----------
   The logo's squares, outlined or in its four colours at very low strength, each floating on its
   own slow closed loop (across, down, back, home) while turning: ~9–15 px/s, 27–43 s per loop.
   Fixed layer over the page grounds, multiply-blended, under the sticky header. Tints are capped
   so text keeps AA everywhere: worst case graphite on stone under red-over-yellow = 5.08:1.
   Decorative by design (client request, 22 Oct 2026): static under prefers-reduced-motion. */
/* Above the section grounds (so the shapes stay visible on white, grey and blue while scrolling)
   but below the sticky header; multiply lets them tint rather than cover. Clicks pass through. */
.geo { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.g { --sz: var(--s); --k: 1; position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz);
  transform: rotate(var(--r)); will-change: transform;
  animation: geo-float var(--d) ease-in-out var(--o) infinite; }
.g--line { box-shadow: inset 0 0 0 1.5px rgb(35 31 32 / .16); }
.g--red { background: rgb(238 27 35 / .07); }
.g--yellow { background: rgb(245 208 0 / .16); }
.g--ink { background: rgb(35 31 32 / .05); }
.g--blue { background: rgb(15 73 160 / .06); }
.g--blue::after { /* the speech-bubble tail */
  content: ""; position: absolute; right: 0; bottom: calc(var(--sz) * -.3);
  border-style: solid; border-width: 0 calc(var(--sz) * .3) calc(var(--sz) * .3) 0;
  border-color: transparent rgb(15 73 160 / .06) transparent transparent;
}
@keyframes geo-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--r)); }
  25% { transform: translate(calc(var(--dx) * var(--k)), calc(var(--dy) * .35 * var(--k))) rotate(calc(var(--r) + var(--dr) * .5)); }
  50% { transform: translate(calc(var(--dx) * .6 * var(--k)), calc(var(--dy) * var(--k))) rotate(calc(var(--r) + var(--dr))); }
  75% { transform: translate(calc(var(--dx) * -.25 * var(--k)), calc(var(--dy) * .55 * var(--k))) rotate(calc(var(--r) + var(--dr) * .4)); }
}
/* phones: fewer, smaller and shorter loops, so text columns stay calm */
@media (max-width: 767px) {
  .g { --sz: calc(var(--s) * .6); --k: .55; }
  .g:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .g { animation: none; } }
@media print { .geo { display: none; } }

/* ---------- arrival motion ----------
   One-shot, ends at rest, never loops; transform and opacity only (no layout shift).
   Each use explains something: the colour key arriving square by square, the map resolving
   to "we are here", the method and the first steps reading in order.
   Everything is gated by html.motion, which is never set under prefers-reduced-motion. */
:root { --ease-arrive: cubic-bezier(.2, .7, .2, 1); --t-arrive: 650ms; }

/* squares: index on the home page, activity heads on the services page */
.motion [data-reveal] .sq { transition: transform var(--t-arrive) var(--ease-arrive); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.motion [data-reveal]:not(.is-in) .sq { transform: scale(0); }
.motion [data-reveal]:not(.is-in) .sq--red { transform: scale(0) rotate(0deg); }
.motion .act-head[data-reveal] .sq { transition-delay: 100ms; }

/* tile map: neighbours first, Croatia last, tilting into place */
.tilemap .tile--hq { transform-box: fill-box; transform-origin: center; transform: rotate(var(--tilt)); }
.motion .territory .tile { transition: opacity 450ms var(--ease-arrive), transform 450ms var(--ease-arrive); transition-delay: calc(var(--i) * 60ms); }
.motion .territory:not(.is-in) .tile { opacity: 0; transform: translateY(6px); }
.motion .territory .tile--hq { transition-duration: 300ms, 800ms; transition-delay: calc(var(--i) * 60ms + 150ms); }
.motion .territory:not(.is-in) .tile--hq { opacity: 0; transform: rotate(0deg) scale(.86); }

/* method words and first steps: read in order */
.motion .method ol li, .motion .start li { transition: opacity var(--t-arrive) var(--ease-arrive), transform var(--t-arrive) var(--ease-arrive); transition-delay: calc(var(--i) * 160ms); }
.motion .method ol:not(.is-in) li { opacity: 0; transform: translateX(-20px); }
.motion .start:not(.is-in) li { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }