/* ==========================================================================
   Sadržajne stranice: O nama, Kontakt, Saveti, Članak, Pravne stranice
   (+ zajednički obrasci koje koriste i sistemske stranice)
   ========================================================================== */

/* ---------- Zajedničko ---------- */
.ph {
  position: relative;
  color: var(--ink-4);
  white-space: nowrap;
}
.ph::before,
.ph::after {
  font-family: var(--f-mono);
  font-weight: 300;
  color: var(--wood);
  font-size: 0.7em;
}
.ph::before {
  content: "[ ";
}
.ph::after {
  content: " ]";
}
.on-dark .ph {
  color: rgba(246, 245, 242, 0.5);
}
.ph-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-note .ic {
  width: 16px;
  height: 16px;
  color: var(--wood-600);
  flex: none;
}

/* Dugme u stanju slanja - kumric.js dodaje .is-loading i disabled */
.btn.is-loading {
  pointer-events: none;
}
.btn.is-loading[disabled] {
  opacity: 1;
}
.btn.is-loading > * {
  opacity: 0;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: g-spin 0.7s linear infinite;
}
@keyframes g-spin {
  to {
    transform: rotate(360deg);
  }
}

.on-dark .badge--line {
  color: rgba(246, 245, 242, 0.78);
  box-shadow: inset 0 0 0 1px rgba(246, 245, 242, 0.28);
}

/* Monogram umesto portreta */
.mono-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  flex: none;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.mono-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    rgba(23, 26, 28, 0.035) 7px 8px
  );
}
.mono-tile__l {
  position: relative;
  font-size: 26px;
  font-weight: 500;
  font-stretch: 118%;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.mono-tile i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  background: var(--wood);
  transform-origin: right;
  transition: transform var(--t) var(--ease-out);
}
.mono-tile--sm {
  width: 44px;
}
.mono-tile--sm .mono-tile__l {
  font-size: 15px;
}
.mono-tile--sm i {
  width: 3px;
}
.mono-tile--lg {
  width: 112px;
}
.mono-tile--lg .mono-tile__l {
  font-size: 38px;
}
.mono-tile--dark {
  background: var(--ink);
  box-shadow: none;
}
.mono-tile--dark .mono-tile__l {
  color: var(--paper);
}
.mono-tile--dark::before {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    rgba(255, 255, 255, 0.05) 7px 8px
  );
}

/* Sastavnica tehničkog crteža */
.tblock {
  display: grid;
  grid-template-columns: repeat(4, auto);
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--f-mono);
}
.tblock > div {
  padding: 7px 12px 8px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  min-width: 0;
}
.tblock > div:last-child {
  border-right: 0;
}
.tblock__wide {
  grid-column: 1 / -1;
  border-right: 0 !important;
}
.tblock dt {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.tblock dd {
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tblock__wide dd {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.01em;
}

/* Otvoreno sada */
.open-now {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 11px;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.open-now i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.open-now.is-open i {
  background: var(--ok);
  animation: pulse 2.6s var(--ease) infinite;
}
.open-now.is-closed i {
  background: var(--warn);
}
.on-dark .open-now {
  background: transparent;
  border-color: var(--line-inv);
  color: var(--paper);
}

/* Radno vreme */
.hours {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}
.hours dt {
  color: var(--ink-2);
  font-weight: 400;
}
.hours dd {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.hours .is-today dt,
.hours .is-today dd {
  color: var(--ink);
  font-weight: 600;
}
.hours .is-today dt::after {
  content: "danas";
  margin-left: 8px;
  padding: 1px 5px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--wood-100);
  color: var(--wood-700);
  vertical-align: 2px;
}

/* Kontakt redovi */
.clines {
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.clines li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clines .ic {
  width: 18px;
  height: 18px;
  color: var(--wood-600);
}
.clines a:hover {
  color: var(--wood-700);
}

/* Sadržaj / TOC sa scrollspy-jem */
.toc {
  font-size: 14px;
}
.toc__t {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.toc > ol {
  counter-reset: toc;
  border-left: 1px solid var(--line-2);
}
.toc > ol > li {
  counter-increment: toc;
}
.toc a {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 7px 0 7px 16px;
  color: var(--ink-3);
  line-height: 1.35;
  transition: color var(--t-fast);
}
.toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transition: transform var(--t) var(--ease-out);
}
.toc a:hover {
  color: var(--ink);
}
.toc a.is-on {
  color: var(--ink);
  font-weight: 500;
}
.toc a.is-on::before {
  transform: none;
}
.toc__no {
  font-size: 11px;
  color: var(--ink-4);
  padding-top: 2px;
}
.toc__no::before {
  content: counter(toc, decimal-leading-zero);
}
.toc ol ol {
  margin: 0 0 6px 38px;
}
.toc ol ol a {
  padding: 4px 0 4px 0;
  font-size: 13px;
}
.toc ol ol a::before {
  display: none;
}
.toc ol ol a.is-on {
  color: var(--wood-700);
  font-weight: 400;
}

/* Uokvireno (crop marke) */
.framed {
  position: relative;
  color: var(--ink-3);
}

/* Traka čitanja */
.readbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}
.readbar i {
  display: block;
  height: 100%;
  background: var(--wood);
  transform: scaleX(0);
  transform-origin: left;
}

/* Stilizovana mapa */
.gmap {
  position: relative;
  overflow: hidden;
  background: #e9e6df;
  isolation: isolate;
}
.gmap__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gmap__street {
  fill: none;
  stroke: #fbfaf8;
  stroke-width: 7;
}
.gmap__street--main {
  stroke: #fff;
  stroke-width: 15;
}
.gmap__river {
  fill: #d6dbda;
}
.gmap__block {
  fill: #dedad1;
}
.gmap__rail {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.5;
  stroke-dasharray: 10 6;
  opacity: 0.7;
}
.gmap__lot {
  fill: var(--wood-200);
  stroke: var(--wood-700);
  stroke-width: 1.5;
}
.gmap__lot-h {
  stroke: none;
}
.gmap__hatch {
  stroke: var(--wood-600);
  stroke-width: 0.8;
  opacity: 0.45;
}
.gmap__access {
  fill: none;
  stroke: var(--wood-700);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.gmap__lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  fill: var(--ink-3);
  letter-spacing: 0.04em;
}
.gmap__lbl--river {
  fill: #8e9798;
  font-style: italic;
}
.gmap__north circle {
  fill: rgba(251, 250, 248, 0.8);
  stroke: var(--ink-3);
  stroke-width: 1;
}
.gmap__north path {
  fill: var(--ink);
}
.gmap__north text,
.gmap__scale text {
  font-family: var(--f-mono);
  font-size: 11px;
  fill: var(--ink-2);
}
.gmap__scale path {
  stroke: var(--ink-2);
  stroke-width: 1.2;
  fill: none;
}
.gmap__scale rect {
  fill: var(--ink-2);
}
.gmap__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translate(-15px, -22px);
}
.gmap__pin-dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  border: 7px solid var(--wood);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  flex: none;
}
.gmap__pin-dot::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid var(--wood);
  animation: g-ring 2.4s var(--ease) infinite;
}
@keyframes g-ring {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  80%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
.gmap__pin-lbl {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  box-shadow: var(--sh-3);
  white-space: nowrap;
}
.gmap__pin-lbl b {
  font-weight: 500;
}
.gmap__pin-lbl .mono {
  font-size: 10.5px;
  color: rgba(246, 245, 242, 0.6);
}

/* Situacioni plan */
.splan {
  width: 100%;
  height: auto;
  font-family: var(--f-mono);
}
.splan__road {
  fill: var(--paper-3);
}
.splan__roadline {
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 14 10;
}
.splan__lot {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.2;
  stroke-dasharray: 8 4 2 4;
}
.splan__hatch {
  stroke: var(--ink-4);
  stroke-width: 0.7;
  opacity: 0.5;
}
.splan__bld {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.splan__bld-o {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
}
.splan__bld--salon {
  fill: var(--wood-100);
  stroke: var(--wood-700);
}
.splan__park rect {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 0.9;
}
.splan__ramp {
  fill: var(--ink);
}
.splan__zone {
  fill: none;
  stroke: var(--wood-600);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}
.splan__flow {
  fill: none;
  stroke: var(--wood-700);
  stroke-width: 1.6;
}
.splan__flow--truck {
  stroke: var(--ink);
  stroke-dasharray: 5 4;
}
.splan__arrowhead {
  fill: var(--wood-700);
}
.splan__gate {
  stroke: var(--paper);
  stroke-width: 4;
}
.splan__n {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--ink);
}
.splan__t {
  font-size: 10.5px;
  fill: var(--ink-3);
}
.splan__t--inv {
  fill: var(--paper);
  letter-spacing: 0.06em;
  font-size: 10px;
}
.splan__dim path {
  stroke: var(--ink-3);
  stroke-width: 0.9;
  fill: none;
}
.splan__dim rect {
  fill: var(--card);
}
.splan__dim text {
  font-size: 10.5px;
  fill: var(--ink-2);
}
.splan__mk circle {
  fill: var(--wood);
  stroke: var(--card);
  stroke-width: 2.5;
}
.splan__mk text {
  font-size: 12px;
  font-weight: 600;
  fill: #fff;
}
.splan__north path {
  fill: var(--ink);
}
.splan__north text {
  font-size: 11px;
  fill: var(--ink-2);
}

/* ==========================================================================
   O NAMA
   ========================================================================== */
.ab-hero {
  position: relative;
  padding-top: clamp(24px, 3vw, 40px);
  overflow: clip;
}
.ab-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
  mask-image: linear-gradient(180deg, #000 10%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 90%);
}
.ab-hero > .container {
  position: relative;
}
.ab-hero .crumbs {
  margin-bottom: clamp(36px, 5vw, 80px);
}
.ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 32px clamp(32px, 5vw, 96px);
  align-items: end;
}
.ab-hero__title {
  font-size: clamp(44px, 6.1vw, 104px);
  max-width: 12.5ch;
  animation: rise 1.1s var(--ease-out) both;
}
.ab-hero__side {
  display: grid;
  gap: 28px;
  padding-bottom: 10px;
  animation: rise 1.1s 0.15s var(--ease-out) both;
}
.ab-hero__side .lead {
  font-size: 17px;
}
.ab-sheets {
  border-top: 1px solid var(--line-2);
}
.ab-sheets a {
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 500;
  font-stretch: 104%;
  transition:
    color var(--t-fast),
    padding var(--t) var(--ease-out);
}
.ab-sheets .mono {
  font-size: 11px;
  color: var(--ink-4);
}
.ab-sheets .ic {
  width: 16px;
  height: 16px;
  color: var(--ink-4);
  transition:
    transform var(--t) var(--ease-out),
    color var(--t-fast);
}
.ab-sheets a:hover {
  color: var(--wood-700);
  padding-left: 4px;
}
.ab-sheets a:hover .ic {
  transform: translateY(3px);
  color: var(--ink);
}
.ab-hero__fig {
  position: relative;
  margin-top: clamp(44px, 5vw, 88px);
}
.ab-hero__dim {
  padding-bottom: 14px;
}
.ab-hero__img {
  position: relative;
  aspect-ratio: 21 / 9;
  color: var(--ink-3);
  background: var(--ink);
}
.ab-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-hero__tb {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  bottom: -34px;
  z-index: 3;
  width: min(460px, 56%);
  box-shadow: var(--sh-1);
}

.ab-story {
  padding-top: calc(var(--section) + 24px);
}
.ab-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 5vw, 96px);
}
.ab-story__head .h2 {
  max-width: 11ch;
}
.ab-story__lead {
  font-size: clamp(24px, 2.35vw, 38px);
  font-weight: 450;
  font-stretch: 108%;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}
.ab-story__cols {
  columns: 2;
  column-gap: 48px;
  margin-top: 36px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.ab-story__cols p {
  break-inside: avoid;
  margin-bottom: 1em;
}
.ab-quote {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
}
.ab-quote p {
  padding-left: 24px;
  border-left: 2px solid var(--wood);
  font-size: clamp(20px, 1.7vw, 26px);
  font-stretch: 106%;
  letter-spacing: -0.014em;
  line-height: 1.35;
  color: var(--ink);
  max-width: 36ch;
}
.ab-quote footer {
  margin: 14px 0 0 26px;
  font-size: 12px;
  color: var(--ink-3);
}

.ab-ruler {
  margin-top: clamp(72px, 9vw, 136px);
}
.ab-ruler__scale {
  position: relative;
  height: 62px;
  background-color: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 -4px 0 var(--wood-200);
  background-image:
    linear-gradient(90deg, var(--ink-4) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:
    calc(100% / 100) 9px,
    calc(100% / 20) 16px,
    calc(100% / 10) 26px;
  background-repeat: repeat-x;
}
.ab-ruler__scale span {
  position: absolute;
  top: 30px;
  left: var(--x);
  transform: translateX(5px);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.ab-ruler__scale span:last-child {
  transform: translateX(calc(-100% - 6px));
}
.ab-ruler__marks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ab-ruler__marks li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 34px 28px 0 20px;
  border-left: 1px solid var(--line-2);
}
.ab-ruler__marks li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wood);
  box-shadow: 0 0 0 3px var(--paper);
  transform: scale(0);
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(0.3s + var(--k) * 0.12s);
}
.ab-ruler.is-in .ab-ruler__marks li::before,
.is-shot .ab-ruler__marks li::before {
  transform: none;
}
.ab-ruler__y {
  font-size: 13px;
  color: var(--wood-700);
}
.ab-ruler__marks b {
  font-size: 21px;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.016em;
}
.ab-ruler__marks p {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 30ch;
}

.ab-today__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-top: 1px solid var(--ink);
}
.ab-bigstat {
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 36px 40px 32px 0;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.ab-bigstat__v {
  font-size: clamp(96px, 12.5vw, 208px);
  font-weight: 400;
  font-stretch: 112%;
  letter-spacing: -0.055em;
  line-height: 0.82;
}
.ab-bigstat__v .ph::before,
.ab-bigstat__v .ph::after {
  font-size: 0.3em;
  vertical-align: 0.95em;
}
.ab-bigstat__l {
  font-size: 18px;
  line-height: 1.45;
  max-width: 24ch;
  color: var(--ink-2);
}
.ab-bigstat__dim {
  max-width: 360px;
}
.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ab-stats > div {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 184px;
  padding: 28px 24px 24px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  transition: background-color var(--t);
}
.ab-stats > div:nth-child(3n) {
  border-right: 0;
}
.ab-stats > div:hover {
  background: var(--paper);
}
.ab-stats__v {
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 450;
  font-stretch: 110%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ab-stats dd {
  display: grid;
  gap: 4px;
}
.ab-stats dd b {
  font-weight: 500;
  font-size: 15px;
}
.ab-stats dd .mono {
  font-size: 11.5px;
  color: var(--ink-4);
}
.ab-today .ph-note {
  margin-top: 18px;
}
.ab-princ {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 24px;
  margin-top: clamp(64px, 8vw, 120px);
}
.ab-princ__t {
  padding-top: 26px;
}
.ab-princ ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.ab-princ li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px 16px;
  padding: 26px 28px 30px 0;
  border-bottom: 1px solid var(--line-2);
}
.ab-princ li:nth-child(odd) {
  border-right: 1px solid var(--line-2);
}
.ab-princ li:nth-child(even) {
  padding-left: 28px;
}
.ab-princ__no {
  grid-row: span 2;
  padding-top: 5px;
  font-size: 12px;
  color: var(--wood-700);
}
.ab-princ li p {
  grid-column: 2 / -1;
  color: var(--ink-3);
  font-size: 15px;
  max-width: 48ch;
}
.ab-princ__m {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--paper);
}

.ab-prod {
  position: relative;
  overflow: hidden;
}
.ab-prod::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 245, 242, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 245, 242, 0.6) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 90% 0%, #000, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000, transparent 60%);
}
.ab-prod > .container {
  position: relative;
}
.ab-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(300px, 31vw, 500px) clamp(200px, 19vw, 300px);
  gap: 14px;
}
.ab-mosaic__i {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #202426;
}
.ab-mosaic__i--a {
  grid-column: 1 / span 8;
}
.ab-mosaic__i--b {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
}
.ab-mosaic__i--c {
  grid-column: 1 / span 3;
}
.ab-mosaic__i--d {
  grid-column: 4 / span 5;
}
.ab-mosaic__img {
  position: absolute;
  inset: 0;
}
.ab-mosaic__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.ab-mosaic__i:hover img {
  transform: scale(1.04);
}
.ab-mosaic__i figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 7px 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.ab-mach {
  margin-top: clamp(64px, 8vw, 112px);
}
.ab-mach__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper);
}
.ab-mach__head .mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 245, 242, 0.5);
}
.ab-mach__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 3.2fr) minmax(0, 4fr) minmax(
      0,
      1.6fr
    ) 96px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-inv);
  transition: background-color var(--t-fast);
}
.ab-mach__row:not(.ab-mach__row--h):hover {
  background: rgba(255, 255, 255, 0.03);
}
.ab-mach__row--h {
  padding: 12px 0;
}
.ab-mach__row--h span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 245, 242, 0.45);
}
.ab-mach__row > :last-child {
  text-align: right;
}
.ab-mach__code {
  font-size: 13px;
  color: var(--wood);
}
.ab-mach__name {
  display: grid;
  gap: 4px;
}
.ab-mach__name b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 17px;
  font-weight: 500;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.ab-mach__name small {
  font-size: 11.5px;
}
.ab-mach__use {
  font-size: 15px;
  color: rgba(246, 245, 242, 0.7);
}
.ab-mach__num {
  font-size: 13.5px;
  color: var(--paper);
  white-space: nowrap;
}
.ab-mach__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  color: rgba(246, 245, 242, 0.55);
}
.ab-mach__note .ic {
  width: 16px;
  height: 16px;
  color: var(--wood);
  margin-top: 1px;
  flex: none;
}
.ab-mach__cta {
  margin-top: 36px;
  gap: 12px;
}

.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.ab-team__grid > * {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.ab-team__intro {
  grid-column: span 2;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 56px)
    clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  background: var(--paper-2);
}
.ab-team__intro .h2 {
  max-width: 13ch;
}
.ab-team__intro .body-l {
  margin: 20px 0 24px;
  color: var(--ink-2);
  max-width: 46ch;
}
.ab-team__ph {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 50ch;
}
.ab-team__ph .ic {
  width: 16px;
  height: 16px;
  color: var(--wood-600);
  flex: none;
  margin-top: 1px;
}
.ab-person {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: 24px;
  background: var(--paper);
  transition: background-color var(--t);
}
.ab-person:hover {
  background: var(--card);
}
.ab-person:hover .mono-tile i {
  transform: scaleX(1.8);
}
.ab-person__no {
  font-size: 11px;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.ab-person__role {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.ab-person__focus {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 10px;
  line-height: 1.5;
}
.ab-person__mail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.ab-person__mail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-person__mail .ic {
  width: 16px;
  height: 16px;
}
.ab-person__mail:hover {
  color: var(--ink);
}

.ab-partners__note {
  margin-top: 16px;
}

.ab-loc__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}
.ab-loc__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.ab-loc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-loc__stamp {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper);
  font-size: 11.5px;
}
.ab-loc__stamp .ic {
  width: 14px;
  height: 14px;
  color: var(--wood-600);
}
.ab-loc__copy .h2 {
  max-width: 15ch;
}
.ab-loc__copy .lead {
  margin: 20px 0 24px;
}
.ab-loc__dl {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.ab-loc__dl > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.ab-loc__dl dt {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  color: var(--ink-3);
}
.ab-loc__dl dt .ic {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.ab-loc__dl dd {
  font-weight: 500;
}
.ab-loc__dl a:hover {
  color: var(--wood-700);
}
.ab-loc__dl .hours {
  font-weight: 400;
  max-width: 320px;
}
.ab-loc__cta {
  margin-top: 32px;
  gap: 24px;
}

@media (max-width: 1100px) {
  .ab-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ab-team__intro {
    grid-column: 1 / -1;
  }
  .ab-mach__row {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr);
    row-gap: 8px;
  }
  .ab-mach__row--h {
    display: none;
  }
  .ab-mach__use {
    grid-column: 3;
    grid-row: 1;
  }
  .ab-mach__num {
    grid-column: 2 / -1;
    text-align: left !important;
    font-size: 12.5px;
    color: rgba(246, 245, 242, 0.7);
  }
  .ab-mach__num::before {
    content: attr(data-k) " · ";
    color: rgba(246, 245, 242, 0.4);
  }
  .ab-mach__row > :nth-child(5) {
    grid-row: 3;
  }
}
@media (max-width: 900px) {
  .ab-hero__grid,
  .ab-story__grid,
  .ab-today__grid,
  .ab-princ,
  .ab-loc__grid {
    grid-template-columns: 1fr;
  }
  .ab-hero__img {
    aspect-ratio: 4 / 3;
    margin-inline: calc(var(--gutter) * -1);
  }
  .ab-hero__img .crop,
  .ab-hero__dim {
    display: none;
  }
  .ab-hero__tb {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: -1px;
    box-shadow: none;
  }
  .ab-story {
    padding-top: var(--section);
  }
  .ab-story__cols {
    columns: 1;
  }
  .ab-ruler__scale {
    display: none;
  }
  .ab-ruler__marks {
    grid-template-columns: 1fr;
    position: relative;
    padding-left: 40px;
  }
  .ab-ruler__marks::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 22px;
    border-right: 1px solid var(--line-2);
    background-color: var(--card);
    background-image:
      linear-gradient(180deg, var(--ink-4) 1px, transparent 1px),
      linear-gradient(180deg, var(--ink) 1px, transparent 1px);
    background-size:
      9px 8px,
      18px 40px;
    background-repeat: repeat-y;
    background-position: right 0 top 0;
    box-shadow: inset 3px 0 0 var(--wood-200);
  }
  .ab-ruler__marks li {
    border-left: 0;
    padding: 0 0 36px 0;
  }
  .ab-ruler__marks li::before {
    left: -45px;
    top: 5px;
  }
  .ab-bigstat {
    padding-right: 0;
    border-right: 0;
  }
  .ab-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px 220px;
    gap: 10px;
  }
  .ab-mosaic__i--a {
    grid-column: 1 / -1;
  }
  .ab-mosaic__i--b {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
  .ab-mosaic__i--c {
    grid-column: 1;
    grid-row: 2;
  }
  .ab-mosaic__i--d {
    grid-column: 1;
    grid-row: 3;
  }
  .ab-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ab-loc__media {
    aspect-ratio: 16 / 11;
  }
}
@media (max-width: 640px) {
  .ab-stats {
    grid-template-columns: 1fr 1fr;
  }
  .ab-stats > div {
    min-height: 150px;
    padding: 20px 16px 18px;
  }
  .ab-stats > div:nth-child(3n) {
    border-right: 1px solid var(--line-2);
  }
  .ab-stats > div:nth-child(2n) {
    border-right: 0;
  }
  .ab-princ ol {
    grid-template-columns: 1fr;
  }
  .ab-princ li,
  .ab-princ li:nth-child(even) {
    padding: 22px 0 24px;
    border-right: 0;
  }
  .ab-princ li {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .ab-princ__m {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
  .ab-princ li p {
    grid-column: 2;
  }
  .ab-mach__row {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px 0;
  }
  .ab-mach__use {
    grid-column: 2;
    grid-row: auto;
    font-size: 14px;
  }
  .ab-mach__num {
    grid-column: 2;
  }
  .ab-mach__row > :nth-child(5) {
    grid-row: auto;
  }
  .ab-mach__name b {
    font-size: 16px;
  }
  .ab-team__grid {
    grid-template-columns: 1fr;
  }
  .ab-team__intro {
    padding: 28px 20px;
  }
  .ab-person {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 16px 18px;
    padding: 20px 16px;
  }
  .ab-person .mono-tile {
    width: 64px;
  }
  .ab-person__mail {
    grid-column: 1 / -1;
  }
  .ab-mosaic {
    grid-template-rows: 240px 180px 180px;
  }
  .ab-loc__dl > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ab-mach__head {
    flex-direction: column;
    gap: 6px;
  }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.ct-head {
  position: relative;
  border-bottom: 0;
  padding-bottom: clamp(40px, 4vw, 64px);
  overflow: clip;
}
.ct-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.ct-head > .container {
  position: relative;
}
.ct-head .crumbs {
  margin-bottom: clamp(36px, 5vw, 80px);
}
.ct-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px clamp(32px, 6vw, 120px);
  align-items: end;
}
.ct-head__title {
  font-size: clamp(44px, 5.6vw, 92px);
  max-width: 12ch;
  animation: rise 1.1s var(--ease-out) both;
}
.ct-head__side {
  display: grid;
  gap: 22px;
  animation: rise 1.1s 0.15s var(--ease-out) both;
}
.ct-head__side .lead {
  font-size: 17px;
}
.ct-bigtel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 16px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t-fast);
}
.ct-bigtel__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ct-bigtel b {
  grid-column: 1;
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}
.ct-bigtel .ic {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  transition:
    transform var(--t) var(--ease-out),
    color var(--t-fast);
}
.ct-bigtel:hover {
  color: var(--wood-700);
}
.ct-bigtel:hover .ic {
  transform: translate(3px, -3px);
}
.ct-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.ct-head__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}
.ct-head__mail .ic {
  width: 18px;
  height: 18px;
  color: var(--wood-600);
}
.ct-head__mail:hover {
  color: var(--wood-700);
}

.ct-deps {
  padding-top: clamp(40px, 5vw, 72px);
}
.ct-dir {
  border-top: 1px solid var(--ink);
}
.ct-dep {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 3.2fr) minmax(0, 2fr) minmax(
      0,
      2.4fr
    ) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-2);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.ct-dep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.ct-dep:hover::after {
  transform: scaleX(1);
}
.ct-dep__id {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ct-dep__no {
  font-size: 12px;
  color: var(--ink-4);
  padding-top: 3px;
}
.ct-dep__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition:
    background-color var(--t),
    color var(--t),
    border-color var(--t);
}
.ct-dep:hover .ct-dep__ic {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ct-dep__name {
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 450;
  font-stretch: 110%;
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.ct-dep__sub {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wood-700);
  margin-top: 10px;
}
.ct-dep__desc {
  font-size: 15px;
  color: var(--ink-3);
  margin-top: 10px;
  max-width: 42ch;
}
.ct-dep__person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}
.ct-dep__person > span:last-child {
  display: grid;
  gap: 1px;
  line-height: 1.35;
}
.ct-dep__person b {
  font-size: 15px;
  font-weight: 500;
}
.ct-dep__person b + span {
  font-size: 13px;
  color: var(--ink-3);
}
.ct-dep__lines {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  min-width: 0;
}
.ct-dep__lines a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14.5px;
  transition: color var(--t-fast);
}
.ct-dep__lines a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-dep__lines .mono {
  font-size: 14px;
}
.ct-dep__lines .ic {
  width: 16px;
  height: 16px;
  color: var(--wood-600);
}
.ct-dep__lines a:hover {
  color: var(--wood-700);
}
.ct-dep__act {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-top: 4px;
}
.ct-dep__act .link-arrow {
  font-size: 14.5px;
}
.ct-dep__sla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--paper-2);
  font-size: 11.5px;
  color: var(--ink-2);
}
.ct-dep__sla .ic {
  width: 14px;
  height: 14px;
  color: var(--wood-600);
}
.ct-deps__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.ct-deps__note .ic {
  width: 16px;
  height: 16px;
  color: var(--wood-600);
}

.ct-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.ct-form__panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(24px, 3.8vw, 60px);
}
.ct-form__panel::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--wood);
}
.ct-form__panel > .h2 {
  font-size: clamp(28px, 2.6vw, 40px);
  max-width: 19ch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.ct-form__form {
  display: grid;
  gap: 28px;
}
.ct-topics .check--chip {
  background: var(--paper);
}
.ct-topics .check--chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ct-topics .check--chip:has(input:checked) .check__box {
  background: var(--ink);
  box-shadow: inset 0 0 0 5px var(--paper);
  border-color: var(--paper);
}
.ct-form__hint {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--wood-200);
  font-size: 14px;
  color: var(--ink-3);
  min-height: 3em;
  max-width: 64ch;
}
.ct-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.ct-form__foot .check {
  font-size: 14px;
  max-width: 44ch;
  color: var(--ink-2);
}
.ct-ok {
  display: grid;
  justify-items: start;
  gap: 18px;
}
.ct-ok p {
  color: var(--ink-2);
  max-width: 58ch;
}
.ct-ok .row {
  gap: 24px;
  margin-top: 8px;
}

.ct-aside__in {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 14px;
}
.ct-card {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--ink);
  color: var(--paper);
}
.ct-card .label {
  color: rgba(246, 245, 242, 0.5);
}
.ct-card__tel {
  display: block;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-inv);
  font-size: clamp(24px, 2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
  transition: color var(--t-fast);
}
.ct-card__tel:hover {
  color: var(--wood-200);
}
.ct-card__list {
  display: grid;
  margin-top: -8px;
}
.ct-card__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-inv);
  font-size: 14px;
}
.ct-card__list .ic {
  width: 16px;
  height: 16px;
  color: var(--wood);
  margin-top: 2px;
  grid-row: span 2;
}
.ct-card__list span {
  font-size: 12px;
  color: rgba(246, 245, 242, 0.5);
}
.ct-card__list a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.ct-card__list a:hover {
  color: var(--wood-200);
}
.ct-card__block .label {
  margin-bottom: 10px;
}
.ct-card .hours dt,
.ct-card .hours dd {
  color: rgba(246, 245, 242, 0.72);
}
.ct-card .hours .is-today dt,
.ct-card .hours .is-today dd {
  color: var(--paper);
}
.ct-card .hours .is-today dt::after {
  background: var(--wood);
  color: #fff;
}
.ct-card .note--wood {
  background: rgba(165, 123, 85, 0.14);
  color: var(--wood-200);
  font-size: 13.5px;
}
.ct-card .note--wood b {
  color: var(--paper);
  font-weight: 500;
}
.ct-card .note--wood span {
  color: rgba(246, 245, 242, 0.78);
}
.ct-legal {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 13.5px;
}
.ct-legal > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
}
.ct-legal dt {
  color: var(--ink-3);
}
.ct-legal dd {
  color: var(--ink);
  font-weight: 500;
}
.ct-legal dd.mono {
  font-size: 12.5px;
  font-weight: 400;
}

.ct-map {
  position: relative;
}
.ct-map__map {
  height: clamp(480px, 46vw, 700px);
}
.ct-map__ov {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.ct-addr {
  pointer-events: auto;
  display: grid;
  gap: 14px;
  justify-items: start;
  width: min(410px, 100%);
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--paper);
  box-shadow: var(--sh-2);
  border-top: 3px solid var(--ink);
}
.ct-addr .eyebrow {
  margin-bottom: 0;
}
.ct-addr .h3 {
  font-size: clamp(22px, 1.8vw, 28px);
}
.ct-addr__gps {
  font-size: 12px;
}
.ct-addr__txt {
  font-size: 14.5px;
  color: var(--ink-3);
}
.ct-addr .row {
  margin-top: 6px;
  gap: 8px;
}
.ct-addr .btn .ic {
  width: 16px;
  height: 16px;
}

.ct-arrive__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.ct-plan {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2.4vw, 36px);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.ct-plan figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-3);
}
.ct-plan__hint {
  display: none;
  color: var(--wood-700);
}
.ct-legend {
  border-top: 1px solid var(--ink);
}
.ct-legend li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line-2);
}
.ct-legend__mk {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wood);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
}
.ct-legend p {
  font-size: 14.5px;
  color: var(--ink-3);
  margin-top: 6px;
  max-width: 48ch;
}
.ct-arrive__side .note {
  margin-top: 24px;
}
.ct-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--line-2);
}
.ct-facts > div {
  padding: 24px 28px 8px 0;
}
.ct-facts > div + div {
  padding-left: 28px;
  border-left: 1px solid var(--line-2);
}
.ct-facts dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  font-stretch: 104%;
  margin-bottom: 8px;
}
.ct-facts dt .ic {
  width: 18px;
  height: 18px;
  color: var(--wood-600);
}
.ct-facts dd {
  font-size: 14.5px;
  color: var(--ink-3);
}
.ct-arrive__cta {
  margin-top: clamp(36px, 4vw, 56px);
}

@media (max-width: 1180px) {
  .ct-dep {
    grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 20px;
  }
  .ct-dep__main {
    grid-column: 2 / -1;
  }
  .ct-dep__person {
    grid-column: 2;
  }
  .ct-dep__lines {
    grid-column: 3;
  }
  .ct-dep__act {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
  }
  .ct-dep__id {
    grid-row: 1 / span 3;
  }
  .ct-facts {
    grid-template-columns: 1fr 1fr;
  }
  .ct-facts > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .ct-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line-2);
  }
}
@media (max-width: 1000px) {
  .ct-head__grid,
  .ct-form__grid,
  .ct-arrive__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ct-aside__in {
    position: static;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .ct-map__ov {
    position: relative;
    top: auto;
    transform: none;
    margin-top: -72px;
  }
}
@media (max-width: 640px) {
  .ct-dep {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
  }
  .ct-dep__id {
    flex-direction: column;
    gap: 10px;
    grid-row: 1 / span 4;
  }
  .ct-dep__ic {
    width: 40px;
    height: 40px;
  }
  .ct-dep__main,
  .ct-dep__person,
  .ct-dep__lines,
  .ct-dep__act {
    grid-column: 2;
  }
  .ct-dep__act {
    flex-direction: column;
    align-items: flex-start;
  }
  .ct-aside__in {
    grid-template-columns: 1fr;
  }
  .ct-form__panel {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    padding: 28px var(--gutter) 32px;
  }
  .ct-form__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .ct-form__foot .btn {
    width: 100%;
  }
  .ct-map__map {
    height: 380px;
  }
  .ct-map__ov {
    margin-top: -40px;
  }
  .ct-addr {
    width: 100%;
  }
  .ct-plan {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    padding: 12px 8px;
  }
  .ct-plan .crop {
    display: none;
  }
  .ct-plan__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ct-plan__scroll::-webkit-scrollbar {
    display: none;
  }
  .ct-plan__scroll .splan {
    width: 620px;
    max-width: none;
  }
  .ct-plan__hint {
    display: inline;
  }
  .ct-plan figcaption > span:last-child {
    display: none;
  }
  .gmap__pin {
    flex-direction: column;
    gap: 10px;
    transform: translate(-50%, -15px);
  }
  .ct-plan figcaption {
    padding-inline: 8px;
  }
  .ct-facts {
    grid-template-columns: 1fr;
  }
  .ct-facts > div,
  .ct-facts > div + div {
    padding: 20px 0 16px;
    border-left: 0;
  }
  .ct-facts > div + div {
    border-top: 1px solid var(--line-2);
  }
  .ct-legal > div {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .ct-bigtel b {
    font-size: 28px;
  }
}

/* ==========================================================================
   SAVETI - listing
   ========================================================================== */
.bl-head {
  border-bottom: 0;
  padding-bottom: clamp(36px, 4vw, 64px);
}
.bl-head__title {
  font-size: clamp(44px, 5.4vw, 88px);
  max-width: 11ch;
}
.bl-head__side {
  display: grid;
  gap: 24px;
}
.bl-head__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 12px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.bl-head__meta dt {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.bl-head__meta dd {
  font-size: 20px;
  color: var(--ink);
}
.bl-feat {
  padding-bottom: clamp(56px, 6vw, 104px);
}
.bl-feat__card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: end;
  color: var(--ink);
}
.bl-feat__media {
  position: relative;
  display: block;
  color: var(--ink-3);
}
.bl-feat__img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}
.bl-feat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.bl-feat__card:hover .bl-feat__img img {
  transform: scale(1.035);
}
.bl-feat__tag {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 6px 10px;
  background: var(--paper);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.bl-feat__body {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding-bottom: 6px;
}
.bl-feat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bl-feat__meta span:first-child {
  color: var(--wood-700);
}
.bl-feat__title {
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 450;
  font-stretch: 110%;
  letter-spacing: -0.032em;
  line-height: 1.05;
  text-wrap: balance;
  transition: color var(--t-fast);
}
.bl-feat__card:hover .bl-feat__title {
  color: var(--wood-700);
}
.bl-feat__ex {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}
.bl-feat__by {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
}
.bl-feat__by > span:last-child {
  display: grid;
  line-height: 1.35;
}
.bl-feat__by b {
  font-size: 14.5px;
  font-weight: 500;
}
.bl-feat__by b + span {
  font-size: 13px;
  color: var(--ink-3);
}
.bl-feat__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  font-stretch: 106%;
}
.bl-feat__go span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px
    no-repeat;
  padding-bottom: 2px;
}
.bl-feat__go .ic {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease-out);
}
.bl-feat__card:hover .bl-feat__go .ic {
  transform: translateX(4px);
}

.bl-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}
.bl-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bl-tabs {
  border-bottom: 0;
  gap: 30px;
}
.bl-tabs button {
  padding: 18px 0 19px;
}
.bl-bar__n {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.bl-bar__n b {
  color: var(--ink);
  font-weight: 500;
}

.bl-list {
  padding-top: clamp(48px, 5vw, 88px);
}
.bl-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 104px) clamp(20px, 2.6vw, 44px);
  align-items: start;
  grid-auto-flow: dense;
}
.bl-i {
  min-width: 0;
}
.bl-i.is-enter {
  animation: rise 0.6s var(--ease-out) both;
  animation-delay: calc(var(--k, 0) * 55ms);
}
.bl-i .acard__title {
  max-width: 30ch;
}
.bl-i--lg {
  grid-column: span 7;
}
.bl-i--lg .acard__media {
  aspect-ratio: 4 / 3;
}
.bl-i--lg .acard__title {
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -0.026em;
  font-stretch: 108%;
}
.bl-i--sm {
  grid-column: span 5;
  margin-top: clamp(40px, 9vw, 150px);
}
.bl-i--sm .acard__media {
  aspect-ratio: 1 / 1;
}
.bl-i--half {
  grid-column: span 6;
}
.bl-i--half .acard__media {
  aspect-ratio: 3 / 2;
}
.bl-i--wide {
  grid-column: 1 / -1;
  padding-block: clamp(8px, 2vw, 32px);
}
.bl-i--wide .acard {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(28px, 4vw, 80px);
  row-gap: 14px;
}
.bl-i--wide .acard__media {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
  aspect-ratio: 16 / 10;
}
.bl-i--wide .acard__meta {
  grid-column: 2;
  grid-row: 2;
}
.bl-i--wide .acard__title {
  grid-column: 2;
  grid-row: 3;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -0.03em;
  font-stretch: 110%;
  line-height: 1.08;
  max-width: 18ch;
}
.bl-i--wide .acard__excerpt {
  grid-column: 2;
  grid-row: 4;
  font-size: 16.5px;
  max-width: 40ch;
}
.bl-i--rev .acard {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.bl-i--rev .acard__media {
  grid-column: 2;
}
.bl-i--rev .acard__meta,
.bl-i--rev .acard__title,
.bl-i--rev .acard__excerpt {
  grid-column: 1;
}
.bl-empty {
  border: 1px dashed var(--line-3);
  margin-top: 24px;
}
.bl-pager {
  margin-top: clamp(64px, 7vw, 112px);
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}

.bl-extra__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: stretch;
}
.bl-top .h3 {
  margin-bottom: 28px;
  max-width: 22ch;
}
.bl-top__list {
  border-top: 1px solid var(--ink);
}
.bl-top__list a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
}
.bl-top__no {
  font-size: 12px;
  color: var(--wood-700);
}
.bl-top__t {
  font-size: 18px;
  font-weight: 500;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--t-fast);
}
.bl-top__m {
  font-size: 11.5px;
  color: var(--ink-4);
  white-space: nowrap;
}
.bl-top__list .ic {
  width: 18px;
  height: 18px;
  align-self: center;
  color: var(--ink-3);
  transition:
    transform var(--t) var(--ease-out),
    color var(--t-fast);
}
.bl-top__list a:hover .bl-top__t {
  color: var(--wood-700);
}
.bl-top__list a:hover .ic {
  transform: translate(2px, -2px);
  color: var(--ink);
}
.bl-news {
  position: relative;
  display: grid;
  align-content: start;
  padding: clamp(28px, 3.4vw, 52px);
  overflow: hidden;
}
.bl-news::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wood);
}
.bl-news .h3 {
  margin-bottom: 14px;
  max-width: 18ch;
}
.bl-news__p {
  font-size: 15px;
  color: rgba(246, 245, 242, 0.68);
  margin-bottom: 26px;
  max-width: 46ch;
}
.bl-news__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}
.bl-news__form .btn {
  margin-top: 30px;
  height: 50px;
}
.bl-news .field label {
  color: rgba(246, 245, 242, 0.82);
}
.bl-news .field input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(246, 245, 242, 0.22);
  color: var(--paper);
}
.bl-news .field input::placeholder {
  color: rgba(246, 245, 242, 0.38);
}
.bl-news .field input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--wood);
}
.bl-news .field.is-error input {
  background: rgba(255, 255, 255, 0.06);
  border-color: #e08b74;
}
.bl-news .field.is-error .field__msg {
  color: #f0a591;
}
.bl-news__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}
.bl-news__who .mono {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 245, 242, 0.45);
}
.on-dark .chip {
  color: rgba(246, 245, 242, 0.78);
  border-color: rgba(246, 245, 242, 0.24);
}
.on-dark .chip:hover {
  border-color: var(--paper);
  color: var(--paper);
}
.on-dark .chip[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.bl-news__ok {
  display: grid;
  justify-items: start;
  gap: 14px;
}
.bl-news__ok .h4 {
  color: var(--paper);
}

/* ==========================================================================
   ČLANAK
   ========================================================================== */
.ar-head {
  padding-block: clamp(24px, 3vw, 40px) clamp(40px, 4vw, 64px);
}
.ar-head .crumbs {
  margin-bottom: clamp(36px, 4.4vw, 72px);
}
.ar-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr);
  gap: 36px clamp(32px, 6vw, 120px);
  align-items: end;
}
.ar-head__cat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.ar-head__cat .mono {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ar-head__title {
  font-size: clamp(38px, 4.8vw, 80px);
  font-weight: 450;
  letter-spacing: -0.04em;
  line-height: 0.99;
  max-width: 16ch;
  animation: rise 1.1s var(--ease-out) both;
}
.ar-head__lead {
  margin-top: 26px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
  animation: rise 1.1s 0.12s var(--ease-out) both;
}
.ar-head__meta {
  display: grid;
  border-top: 1px solid var(--ink);
  animation: rise 1.1s 0.2s var(--ease-out) both;
}
.ar-head__meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}
.ar-head__meta dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ar-head__meta .ar-head__by {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.ar-head__by > span:last-child {
  display: grid;
  line-height: 1.35;
}
.ar-head__by b {
  font-weight: 500;
}
.ar-head__by b + span {
  font-size: 13px;
  color: var(--ink-3);
}
.ar-hero {
  margin-bottom: clamp(56px, 6vw, 104px);
}
.ar-hero__dim {
  padding-bottom: 12px;
}
.ar-hero__img {
  position: relative;
  aspect-ratio: 21 / 9;
  color: var(--ink-3);
  background: var(--paper-2);
}
.ar-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-hero figcaption {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.ar-body {
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) minmax(0, 6fr) minmax(0, 2.7fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
}
.ar-toc__in,
.ar-rail__in {
  position: sticky;
  top: calc(var(--header-h) + 36px);
  display: grid;
  gap: 36px;
}
.ar-toc__m {
  display: none;
}
.ar-share .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.ar-share .row {
  gap: 6px;
}
.ar-prose {
  max-width: 680px;
  font-size: 17.5px;
  counter-reset: arh;
}
.ar-intro {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--ink);
}
.ar-intro::first-letter {
  float: left;
  font-size: 4.4em;
  line-height: 0.8;
  font-weight: 450;
  font-stretch: 112%;
  margin: 0.08em 0.12em 0 0;
  color: var(--wood-700);
}
.ar-prose h2 {
  counter-increment: arh;
  display: flex;
  align-items: baseline;
  gap: 14px;
  scroll-margin-top: calc(var(--header-h) + 32px);
}
.ar-prose h2::before {
  content: counter(arh, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wood-700);
  flex: none;
  transform: translateY(-0.35em);
}
.ar-prose h3 {
  scroll-margin-top: calc(var(--header-h) + 32px);
}
.ar-fig {
  margin-block: 2.2em !important;
}
.ar-fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.ar-fig figcaption {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ar-fig figcaption .mono {
  font-size: 12px;
  color: var(--wood-700);
  flex: none;
  padding-top: 1px;
}
.ar-fig--dwg {
  padding: clamp(16px, 2vw, 28px) clamp(12px, 2vw, 24px) 16px;
  background: var(--card);
  border: 1px solid var(--line);
}
.ar-fig--dwg figcaption {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.es {
  width: 100%;
  height: auto;
  font-family: var(--f-mono);
}
.es__core {
  stroke: var(--ink-2);
  stroke-width: 1;
}
.es__dot {
  fill: var(--ink-4);
}
.es__decor {
  stroke: var(--ink);
  stroke-width: 2.2;
}
.es__break {
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}
.es__band {
  fill: var(--wood);
  stroke: var(--wood-700);
  stroke-width: 0.8;
}
.es__glue {
  stroke: var(--ink);
  stroke-width: 1.2;
}
.es__lead {
  stroke: var(--ink-3);
  stroke-width: 0.9;
  fill: none;
}
.es__v {
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink);
}
.es__l {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
}
.es__s {
  font-size: 10.5px;
  fill: var(--ink-3);
}
.es__dim path {
  stroke: var(--ink-3);
  stroke-width: 0.9;
  fill: none;
}
.es__dim text {
  font-size: 10.5px;
  fill: var(--ink-2);
}
.ar-quote-by {
  margin-top: 0.6em !important;
  padding-left: 26px;
  font-size: 12px;
  color: var(--ink-3);
}
.ar-inline {
  margin-block: 2em !important;
  border: 1px solid var(--line-2);
  background: var(--card);
}
.ar-inline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.ar-inline__head .mono {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ar-inline__head .link-arrow {
  font-size: 13.5px;
}
.prose .ar-inline a,
.prose .ar-tags a,
.prose .ar-author a {
  text-decoration: none;
}
.ar-prod {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto 44px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.ar-prod:last-child {
  border-bottom: 0;
}
.ar-prod__sw {
  position: relative;
  display: block;
  width: 60px;
  height: 44px;
  overflow: hidden;
}
.ar-prod__sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-prod__sw i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  background: rgba(0, 0, 0, 0.28);
}
.ar-prod__info {
  display: grid;
  gap: 3px;
  line-height: 1.35;
}
.ar-prod__info .mono {
  font-size: 11.5px;
  color: var(--ink-3);
}
.ar-prod__info a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.ar-prod__info a:hover {
  color: var(--wood-700);
}
.ar-prod__info .stock {
  font-size: 12.5px;
}
.ar-prod .price strong {
  font-size: 17px;
}
.ar-prod .js-add.is-added {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.ar-table {
  margin-block: 1.4em 1.8em !important;
}
.ar-table .dtable {
  font-size: 14.5px;
  border-top: 1px solid var(--ink);
}
.ar-table .dtable th {
  background: transparent;
  padding: 10px 12px 10px 0;
}
.ar-table .dtable td {
  padding: 14px 12px 14px 0;
}
.ar-table .fine {
  margin-top: 10px;
}
.ar-meter {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.ar-meter i {
  width: 18px;
  height: 6px;
  background: var(--paper-3);
}
.ar-meter i.is-on {
  background: var(--wood);
}
.ar-prose .note {
  margin-block: 1.8em !important;
  font-size: 15px;
}
.ar-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2.6em !important;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.ar-tags .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 8px;
}
.ar-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  margin-top: 1.6em !important;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--paper-2);
}
.ar-author__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ar-author__n {
  font-size: 20px;
  font-weight: 500;
  font-stretch: 106%;
  color: var(--ink);
  margin-top: 6px;
}
.ar-author__r {
  font-size: 14px;
  color: var(--ink-3);
}
.ar-author__bio {
  font-size: 15.5px;
  margin: 12px 0 14px;
}
.ar-sum {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.ar-sum__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.ar-sum li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.ar-sum b {
  font-size: 21px;
  font-weight: 500;
  color: var(--wood-700);
}
.ar-sum li span {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.ar-sum__n {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.ar-cta {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px;
  background: var(--wood-50);
  box-shadow: inset 3px 0 0 var(--wood);
}
.ar-cta__t {
  font-size: 18px;
  font-weight: 500;
  font-stretch: 106%;
}
.ar-cta p:not(.ar-cta__t) {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ar-decors {
  padding-top: clamp(72px, 8vw, 128px);
}
.ar-decors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  margin-bottom: 36px;
  border-top: 1px solid var(--line-2);
}
.ar-decors__head .h3 {
  max-width: 24ch;
}
.ar-decors__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 20px;
}
.ar-rel__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.ar-rel__big .acard__title {
  font-size: clamp(22px, 2vw, 30px);
}
.ar-rel__list {
  border-top: 1px solid var(--ink);
}
.ar-rel__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 20px;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
}
.ar-rel__img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.ar-rel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.ar-rel__row:hover .ar-rel__img img {
  transform: scale(1.06);
}
.ar-rel__row .mono {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-700);
  margin-bottom: 6px;
}
.ar-rel__row b {
  font-size: 18px;
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.ar-rel__row:hover b {
  color: var(--wood-700);
}
.ar-rel__row > .ic {
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease-out);
}
.ar-rel__row:hover > .ic {
  transform: translateX(4px);
}
.ar-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px clamp(32px, 6vw, 120px);
  align-items: end;
}
.ar-band .h2 {
  max-width: 14ch;
}
.ar-band__side .lead {
  margin-bottom: 28px;
}

@media (max-width: 1180px) {
  .ar-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  }
  .ar-rail {
    grid-column: 2;
  }
  .ar-toc {
    grid-row: 1 / span 2;
  }
  .ar-rail__in {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .ar-decors__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ar-decors__grid > :nth-child(n + 4) {
    display: none;
  }
}
@media (max-width: 1000px) {
  .bl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bl-i--lg,
  .bl-i--sm,
  .bl-i--half {
    grid-column: span 1;
  }
  .bl-i--sm {
    margin-top: 0;
  }
  .bl-i--lg .acard__media,
  .bl-i--sm .acard__media {
    aspect-ratio: 4 / 3;
  }
  .bl-i--wide .acard,
  .bl-i--rev .acard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
  }
  .bl-feat__card,
  .bl-extra__grid,
  .ar-head__grid,
  .ar-rel__grid,
  .ar-band__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bl-bar__n {
    display: none;
  }
}
@media (max-width: 900px) {
  .ar-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-toc {
    grid-row: auto;
    position: sticky;
    top: var(--header-h);
    z-index: 15;
    margin-inline: calc(var(--gutter) * -1);
  }
  .ar-toc__in {
    position: static;
  }
  .ar-toc__d,
  .ar-toc .ar-share {
    display: none;
  }
  .ar-toc__m {
    display: block;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-block: 1px solid var(--line);
  }
  .ar-toc__m summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--gutter);
    cursor: pointer;
    list-style: none;
    font-size: 14.5px;
    font-weight: 500;
  }
  .ar-toc__m summary::-webkit-details-marker {
    display: none;
  }
  .ar-toc__m summary .mono {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wood-700);
    flex: none;
  }
  .ar-toc__m summary [data-spy-current] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ar-toc__m summary .ic {
    width: 18px;
    height: 18px;
    transition: transform var(--t) var(--ease-out);
  }
  .ar-toc__m[open] summary .ic {
    transform: rotate(180deg);
  }
  .ar-toc__m .toc {
    padding: 4px var(--gutter) 18px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .ar-toc__m .toc__t {
    display: none;
  }
  .ar-rail {
    grid-column: 1;
  }
  .ar-hero__img {
    aspect-ratio: 4 / 3;
    margin-inline: calc(var(--gutter) * -1);
  }
  .ar-hero__img .crop,
  .ar-hero__dim {
    display: none;
  }
  .ar-decors__head {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .bl-head__meta {
    grid-template-columns: repeat(2, auto);
  }
  .bl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bl-i--wide {
    padding-block: 0;
  }
  .bl-i--wide .acard,
  .bl-i--rev .acard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .bl-i--wide .acard > *,
  .bl-i--rev .acard > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .bl-i--wide .acard__media {
    margin-bottom: 6px;
    aspect-ratio: 4 / 3;
  }
  .bl-i--wide .acard__title {
    font-size: 24px;
  }
  .bl-tabs {
    gap: 22px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .bl-tabs button {
    padding: 15px 0 16px;
  }
  .bl-top__list a {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    gap: 4px 12px;
  }
  .bl-top__m {
    grid-column: 2;
    grid-row: 2;
  }
  .bl-top__list .ic {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .bl-top__t {
    font-size: 16.5px;
  }
  .bl-news {
    margin-inline: calc(var(--gutter) * -1);
    padding: 32px var(--gutter);
  }
  .bl-news__form {
    grid-template-columns: minmax(0, 1fr);
  }
  .bl-news__form .btn {
    margin-top: 0;
  }
  .bl-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .bl-pager .pager__pages {
    justify-content: center;
  }
  .ar-prose {
    font-size: 17px;
  }
  .ar-prod {
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    gap: 8px 12px;
    padding: 12px;
  }
  .ar-prod__sw {
    width: 52px;
  }
  .ar-prod .price {
    grid-column: 2;
    grid-row: 2;
  }
  .ar-prod .js-add {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .ar-inline__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ar-table {
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1) !important;
    padding-inline: var(--gutter);
  }
  .ar-table .dtable {
    min-width: 560px;
  }
  .ar-author {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-rail__in {
    grid-template-columns: 1fr;
  }
  .ar-decors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .ar-decors__grid > :nth-child(n + 4) {
    display: grid;
  }
  .ar-decors__grid > :nth-child(5) {
    display: none;
  }
  .ar-rel__row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
  }
  .ar-rel__row > .ic {
    display: none;
  }
  .ar-rel__row b {
    font-size: 16px;
  }
  .ar-fig--dwg {
    margin-inline: calc(var(--gutter) * -1) !important;
    border-inline: 0;
    padding-inline: 0;
  }
  .ar-fig__scroll {
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 12px;
  }
  .ar-fig__scroll::-webkit-scrollbar {
    display: none;
  }
  .ar-fig__scroll .es {
    width: 580px;
    max-width: none;
  }
  .ar-fig--dwg figcaption {
    margin-inline: var(--gutter);
  }
  .ar-intro::first-letter {
    font-size: 3.6em;
  }
}

/* ==========================================================================
   PRAVNE STRANICE
   ========================================================================== */
.lg-head {
  border-bottom: 0;
  padding-bottom: 28px;
}
.lg-head__title {
  max-width: 14ch;
}
.lg-head__side {
  display: grid;
  gap: 22px;
}
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.lg-meta dt {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.lg-meta dd {
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 2px;
}
.lg-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 52px);
  padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn-bg) 55%, transparent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--warn);
}
.lg-draft i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}
.lg-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 104px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: var(--section);
}
.lg-side__in {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: grid;
  gap: 28px;
  max-height: calc(100dvh - var(--header-h) - 56px);
  overflow-y: auto;
  scrollbar-width: none;
}
.lg-side__in::-webkit-scrollbar {
  display: none;
}
.lg-toc-m {
  display: none;
}
.lg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.lg-actions .btn .ic {
  width: 16px;
  height: 16px;
}
.lg-doc {
  max-width: 780px;
  font-size: 16.5px;
}
.lg-doc > .lg-sec + .lg-sec {
  margin-top: clamp(72px, 8vw, 128px);
}
.lg-sec,
.lg-cl {
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.lg-sec__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.lg-sec__no {
  font-size: 13px;
  color: var(--wood-700);
}
.prose .lg-sec__head h2 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
}
.lg-sec__rev {
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
}
.lg-sum {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--wood-50);
  box-shadow: inset 3px 0 0 var(--wood);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.lg-sum__k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood-700);
}
.lg-sum__k .ic {
  width: 15px;
  height: 15px;
}
.lg-cl > * + * {
  margin-top: 1em;
}
.prose .lg-cl h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 1.9em 0 0.7em;
  font-size: 20px;
}
.lg-cl h3 .mono {
  min-width: 30px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wood-700);
}
.lg-table {
  overflow-x: auto;
  border-top: 1px solid var(--line-2);
}
.lg-table .dtable {
  font-size: 14px;
}
.lg-table .dtable th {
  background: transparent;
  padding: 10px 14px 10px 0;
}
.lg-table .dtable td {
  padding: 12px 14px 12px 0;
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.45;
}
.lg-table .dtable tbody tr:hover {
  background: transparent;
}
.lg-table__k {
  font-weight: 500;
  color: var(--ink) !important;
}
.prose .lg-file {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--line-2);
  background: var(--card);
  text-decoration: none;
  transition: border-color var(--t-fast);
}
.lg-file:hover {
  border-color: var(--ink);
}
.lg-file .ic {
  width: 20px;
  height: 20px;
  color: var(--wood-600);
  grid-row: span 2;
}
.lg-file span:not(.mono) {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.lg-file .mono {
  font-size: 11.5px;
  color: var(--ink-3);
}
.lg-cookies {
  display: grid;
  border: 1px solid var(--line-2);
  background: var(--card);
}
.lg-cookie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.lg-cookie > span:first-child {
  display: grid;
  gap: 2px;
}
.lg-cookie b {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.lg-cookie > span:first-child span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
}
.lg-cookie .switch input:disabled + .switch__track {
  opacity: 0.5;
}
.lg-cookies__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--paper);
}
.lg-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: clamp(72px, 8vw, 128px) !important;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.lg-end__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.lg-end p:not(.lg-end__k) {
  font-size: 15px;
}
.lg-rev td {
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  vertical-align: top;
  color: var(--ink-2);
}
.lg-rev .mono {
  font-size: 12.5px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .lg-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    gap: 32px;
  }
  .lg-side {
    position: sticky;
    top: var(--header-h);
    z-index: 15;
    margin-inline: calc(var(--gutter) * -1);
  }
  .lg-side__in {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .lg-toc-d,
  .lg-actions {
    display: none;
  }
  .lg-toc-m {
    display: block;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-block: 1px solid var(--line);
  }
  .lg-toc-m summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--gutter);
    cursor: pointer;
    list-style: none;
    font-size: 14.5px;
    font-weight: 500;
  }
  .lg-toc-m summary::-webkit-details-marker {
    display: none;
  }
  .lg-toc-m summary .mono {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wood-700);
  }
  .lg-toc-m summary [data-spy-current] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lg-toc-m summary .ic {
    width: 18px;
    height: 18px;
    transition: transform var(--t) var(--ease-out);
  }
  .lg-toc-m[open] summary .ic {
    transform: rotate(180deg);
  }
  .lg-toc-m .toc {
    padding: 4px var(--gutter) 18px;
    max-height: 62vh;
    overflow-y: auto;
  }
  .lg-toc-m .toc__t {
    display: none;
  }
}
@media (max-width: 640px) {
  .lg-sec__head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lg-sec__rev {
    grid-column: 2;
  }
  .lg-sum {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .lg-table .dtable {
    min-width: 520px;
  }
  .lg-table--wide .dtable {
    min-width: 600px;
  }
  .lg-end {
    grid-template-columns: minmax(0, 1fr);
  }
  .lg-cookie {
    padding: 14px;
  }
}
@media print {
  .topbar,
  .hdr,
  .ftr,
  .lg-side,
  .readbar,
  .lg-draft,
  .lg-cookies,
  .crumbs {
    display: none !important;
  }
  .lg-layout {
    display: block;
    padding: 0;
  }
  .lg-doc {
    max-width: none;
  }
}