/* ==========================================================================
   HEMFRY - Page: Transport (transport.html)
   Page-only layout. Tokens, grid and components come from hemfry.css.
   ========================================================================== */

/* 01 - Hero -------------------------------------------------------------- */
.tr-hero__title {
  font-size: clamp(2.5rem, 1.2rem + 3.9vw, 4.75rem);
}
.tr-hero .page-hero__actions {
  align-items: center;
  gap: 16px 28px;
}
.tr-hero__call {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tr-hero__figures {
  margin-top: 48px;
}
@media (min-width: 1100px) {
  .tr-hero__figures {
    margin-top: auto;
  }
  .tr-hero .page-hero__actions {
    margin-bottom: 56px;
  }
}
.tr-hero .hero-figures .num {
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 3rem);
}
.tr-hero .media__cap {
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 1;
}
.tr-hero .page-hero__media .media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(
    0deg,
    rgba(12, 12, 11, 0.55),
    rgba(12, 12, 11, 0)
  );
  pointer-events: none;
}
@media (max-width: 699px) {
  .tr-hero .page-hero__actions .btn {
    width: 100%;
  }
  .tr-hero .hero-figures > div {
    padding-right: 12px;
  }
  .tr-hero .hero-figures > div + div {
    padding-left: 12px;
  }
  .tr-hero .hero-figures .mono {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
  .tr-hero .media__cap span + span {
    display: none;
  }
}

/* 02 - Materials (4 × 2 sample grid) ------------------------------------- */
.tr-mat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 900px) {
  .tr-mat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tr-mat__item {
  display: flex;
  flex-direction: column;
  min-height: clamp(248px, 22vw, 330px);
  padding: clamp(14px, 1.8vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tr-mat__swatch {
  display: block;
  height: clamp(44px, 4.2vw, 64px);
  background-color: var(--paper-2);
  background-repeat: repeat;
  background-position: 0 50%;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.tr-mat__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  color: var(--fg-faint);
}
.tr-mat__out {
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tr-mat__out::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.tr-mat__name {
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 660;
  font-size: clamp(1.25rem, 0.85rem + 1.25vw, 2.125rem);
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.tr-mat__desc {
  min-height: 5.2em;
}
.tr-mat__text {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: 30ch;
  text-wrap: pretty;
}
.tr-mat__spec {
  margin-top: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.06em;
}
@media (max-width: 699px) {
  .tr-mat__item {
    min-height: 232px;
  }
  .tr-mat__name {
    font-size: 1.1875rem;
    padding-top: 22px;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .tr-mat__text {
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .tr-mat__meta {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
}
.tr-mat__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 28px;
  color: var(--fg-muted);
}
.tr-mat__foot .mono {
  color: var(--fg);
}
.tr-mat__foot .link {
  margin-left: auto;
}
@media (max-width: 699px) {
  .tr-mat__foot .link {
    margin-left: 0;
  }
}

/* 03 - Fleet: capacity scale ---------------------------------------------- */
.tr-load {
  --name-w: 220px;
  margin: 0 0 clamp(56px, 7vw, 104px);
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.tr-load__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 28px;
}
.tr-load__rows {
  display: grid;
  gap: 12px;
}
.tr-load__row,
.tr-load__axis {
  display: grid;
  grid-template-columns: var(--name-w) minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
}
.tr-load__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 620;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.tr-load__track {
  position: relative;
  height: 36px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px
      no-repeat,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 /
      calc(100% / 24) 100%;
}
.tr-load__bar {
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: calc(var(--v) / 24 * 100%);
  background: var(--fg);
  border-right: 4px solid var(--accent);
  transform-origin: left;
  transition: transform 1.5s var(--ease);
}
.tr-load__val {
  position: absolute;
  top: 50%;
  left: calc(var(--v) / 24 * 100%);
  transform: translate(calc(-100% - 12px), -50%);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 600ms var(--ease);
}
.js .tr-load:not(.is-in) .tr-load__bar {
  transform: scaleX(0);
}
.js .tr-load:not(.is-in) .tr-load__val {
  opacity: 0;
}
.tr-load__row:nth-child(2) .tr-load__bar {
  transition-delay: 150ms;
}
.tr-load__row:nth-child(3) .tr-load__bar {
  transition-delay: 300ms;
}
.tr-load__val {
  transition-delay: 900ms;
}
.tr-load__axis {
  margin-top: 10px;
  color: var(--fg-faint);
}
.tr-load__scale {
  position: relative;
  height: 16px;
}
.tr-load__scale span {
  position: absolute;
  white-space: nowrap;
  left: calc(var(--x) / 24 * 100%);
  transform: translateX(-50%);
}
.tr-load__scale span:first-child {
  transform: none;
}
.tr-load__scale span:last-child {
  transform: translateX(-100%);
}
@media (max-width: 699px) {
  .tr-load__row,
  .tr-load__axis {
    grid-template-columns: minmax(0, 1fr);
  }
  .tr-load__row {
    row-gap: 6px;
  }
  .tr-load__rows {
    gap: 18px;
  }
  .tr-load__name {
    font-size: 1rem;
  }
  .tr-load__axis > span:first-child {
    display: none;
  }
}

/* 03 - Fleet: horizontal cards ------------------------------------------- */
.tr-fleet {
  border-top: 1px solid var(--line);
}
.tr-fleet__item {
  padding-block: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  align-items: start;
  row-gap: 24px;
}
.tr-fleet__body {
  align-self: stretch;
}
.tr-fleet__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.tr-fleet__cat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-faint);
}
.tr-fleet__cat span:first-child {
  color: var(--accent);
}
.tr-fleet__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 680;
  font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem);
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.tr-fleet__text {
  margin-top: 16px;
  color: var(--fg-muted);
  max-width: 44ch;
  text-wrap: pretty;
}

@media (min-width: 1100px) {
  .tr-fleet__body {
    padding-left: clamp(8px, 1.6vw, 32px);
  }
  .tr-fleet__item--flip > .media {
    order: 2;
  }
  .tr-fleet__item--flip .tr-fleet__body {
    padding-left: 0;
    padding-right: clamp(8px, 1.6vw, 32px);
  }
}
@media (max-width: 1099px) {
  .tr-fleet__body {
    gap: 24px;
  }
}

/* 04 - Price factors ------------------------------------------------------ */
.tr-factors {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--ink);
}
.tr-factor {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: start;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}
.tr-factor__idx {
  padding-top: 10px;
  color: var(--fg-faint);
}
.tr-factor__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 660;
  font-size: clamp(1.375rem, 1rem + 1.1vw, 2.125rem);
  letter-spacing: -0.024em;
  line-height: 1.06;
}
.tr-factor__text {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: 46ch;
}
.tr-factor .tag {
  margin-top: 8px;
}
@media (max-width: 699px) {
  .tr-factor {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .tr-factor .tag {
    grid-column: 2;
    margin-top: 0;
    justify-self: start;
  }
}

/* 04 - Request preview (start of the form) ------------------------------ */
@media (min-width: 1100px) {
  .tr-req-col {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    margin-top: 8px;
  }
}
@media (max-width: 1099px) {
  .tr-req-col {
    margin-top: clamp(40px, 6vw, 64px);
  }
}
.tr-req {
  border-top: 3px solid var(--accent);
}
.tr-req__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.tr-req__route {
  position: relative;
  display: grid;
  gap: 20px;
}
.tr-req__route::before {
  /* dashed route line between A and B */
  content: "";
  position: absolute;
  left: 11px;
  top: 58px;
  bottom: 28px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 6px,
    transparent 6px 11px
  );
}
.tr-req__route .field {
  position: relative;
  padding-left: 40px;
}
.tr-req__pin {
  position: absolute;
  left: 0;
  bottom: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xs);
  font-size: 0.6875rem;
  letter-spacing: 0;
}
.tr-req__route .field:first-child .tr-req__pin {
  background: var(--accent);
  color: var(--ink);
}
.tr-req__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
  padding-left: 40px;
}
.tr-req__submit {
  margin-top: 28px;
}
.tr-req__note {
  margin-top: 14px;
}
@media (max-width: 479px) {
  .tr-req__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.tr-promise {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}
.tr-promise__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--accent);
  border-radius: var(--r-xs);
}
.tr-promise__mark svg {
  width: 22px;
  height: 22px;
}
.tr-promise__text {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 650;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-wrap: balance;
}

/* 05 - CTA --------------------------------------------------------------- */
.tr-cta__title {
  font-size: clamp(2.75rem, 1.1rem + 5.6vw, 7rem);
}

/* Material texture swatches - custom technical hatches (generated, tileable 120 × 64) */
.tr-mat__swatch--pesak {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='%238a8983'%3E%3Ccircle cx='54' cy='36' r='.6'/%3E%3Ccircle cx='111' cy='30' r='1'/%3E%3Ccircle cx='61' cy='37' r='.6'/%3E%3Ccircle cx='22' cy='33' r='.8'/%3E%3Ccircle cx='76' cy='50' r='.6'/%3E%3Ccircle cx='11' cy='20' r='.8'/%3E%3Ccircle cx='11' cy='51' r='.8'/%3E%3Ccircle cx='83' cy='4' r='.8'/%3E%3Ccircle cx='118' cy='60' r='1'/%3E%3Ccircle cx='78' cy='39' r='.8'/%3E%3Ccircle cx='19' cy='2' r='.6'/%3E%3Ccircle cx='63' cy='5' r='.6'/%3E%3Ccircle cx='23' cy='16' r='.8'/%3E%3Ccircle cx='4' cy='30' r='.6'/%3E%3Ccircle cx='53' cy='53' r='.8'/%3E%3Ccircle cx='60' cy='42' r='.8'/%3E%3Ccircle cx='55' cy='18' r='1'/%3E%3Ccircle cx='101' cy='45' r='.6'/%3E%3Ccircle cx='38' cy='16' r='1'/%3E%3Ccircle cx='35' cy='6' r='.8'/%3E%3Ccircle cx='92' cy='26' r='.8'/%3E%3Ccircle cx='102' cy='25' r='1'/%3E%3Ccircle cx='115' cy='53' r='.6'/%3E%3Ccircle cx='118' cy='26' r='1'/%3E%3Ccircle cx='9' cy='40' r='.6'/%3E%3Ccircle cx='93' cy='18' r='.8'/%3E%3Ccircle cx='116' cy='48' r='.6'/%3E%3Ccircle cx='12' cy='5' r='.6'/%3E%3Ccircle cx='96' cy='12' r='.6'/%3E%3Ccircle cx='67' cy='29' r='1'/%3E%3Ccircle cx='23' cy='46' r='1'/%3E%3Ccircle cx='16' cy='41' r='.6'/%3E%3Ccircle cx='14' cy='27' r='.8'/%3E%3Ccircle cx='36' cy='55' r='1'/%3E%3Ccircle cx='25' cy='26' r='.6'/%3E%3Ccircle cx='12' cy='62' r='.8'/%3E%3Ccircle cx='29' cy='38' r='1'/%3E%3Ccircle cx='45' cy='29' r='.6'/%3E%3Ccircle cx='69' cy='54' r='1'/%3E%3Ccircle cx='22' cy='11' r='.6'/%3E%3Ccircle cx='109' cy='51' r='.8'/%3E%3Ccircle cx='30' cy='13' r='.8'/%3E%3Ccircle cx='89' cy='59' r='1'/%3E%3Ccircle cx='24' cy='59' r='.6'/%3E%3Ccircle cx='106' cy='38' r='.8'/%3E%3Ccircle cx='51' cy='8' r='.6'/%3E%3Ccircle cx='5' cy='60' r='1'/%3E%3Ccircle cx='29' cy='44' r='.6'/%3E%3Ccircle cx='31' cy='52' r='.8'/%3E%3Ccircle cx='72' cy='19' r='.8'/%3E%3Ccircle cx='8' cy='15' r='.6'/%3E%3Ccircle cx='110' cy='14' r='.8'/%3E%3Ccircle cx='69' cy='10' r='1'/%3E%3Ccircle cx='43' cy='56' r='1'/%3E%3Ccircle cx='118' cy='42' r='.6'/%3E%3Ccircle cx='83' cy='37' r='.6'/%3E%3Ccircle cx='84' cy='60' r='1'/%3E%3Ccircle cx='3' cy='40' r='1'/%3E%3Ccircle cx='58' cy='46' r='.8'/%3E%3Ccircle cx='38' cy='62' r='.6'/%3E%3Ccircle cx='9' cy='35' r='1'/%3E%3Ccircle cx='88' cy='44' r='.8'/%3E%3Ccircle cx='95' cy='57' r='1'/%3E%3Ccircle cx='42' cy='43' r='1'/%3E%3Ccircle cx='75' cy='25' r='1'/%3E%3Ccircle cx='70' cy='39' r='.8'/%3E%3Ccircle cx='87' cy='25' r='1'/%3E%3Ccircle cx='88' cy='37' r='1'/%3E%3Ccircle cx='84' cy='32' r='.6'/%3E%3Ccircle cx='74' cy='58' r='.8'/%3E%3Ccircle cx='31' cy='2' r='.8'/%3E%3Ccircle cx='36' cy='43' r='1'/%3E%3Ccircle cx='16' cy='32' r='.8'/%3E%3Ccircle cx='100' cy='53' r='1'/%3E%3Ccircle cx='75' cy='32' r='.8'/%3E%3Ccircle cx='105' cy='4' r='1'/%3E%3Ccircle cx='37' cy='50' r='.6'/%3E%3Ccircle cx='2' cy='10' r='.8'/%3E%3Ccircle cx='55' cy='3' r='.6'/%3E%3Ccircle cx='100' cy='16' r='1'/%3E%3Ccircle cx='82' cy='14' r='.8'/%3E%3Ccircle cx='57' cy='12' r='.8'/%3E%3Ccircle cx='33' cy='23' r='1'/%3E%3Ccircle cx='47' cy='50' r='.6'/%3E%3Ccircle cx='109' cy='7' r='.8'/%3E%3Ccircle cx='45' cy='36' r='1'/%3E%3Ccircle cx='87' cy='51' r='1'/%3E%3Ccircle cx='77' cy='45' r='1'/%3E%3Ccircle cx='64' cy='50' r='1'/%3E%3Ccircle cx='97' cy='5' r='.8'/%3E%3Ccircle cx='17' cy='11' r='.6'/%3E%3Ccircle cx='114' cy='7' r='.8'/%3E%3Ccircle cx='101' cy='36' r='1'/%3E%3Ccircle cx='37' cy='25' r='1'/%3E%3Ccircle cx='25' cy='53' r='.6'/%3E%3Ccircle cx='116' cy='33' r='.6'/%3E%3Ccircle cx='73' cy='3' r='1'/%3E%3Ccircle cx='32' cy='30' r='.8'/%3E%3Ccircle cx='23' cy='39' r='.8'/%3E%3Ccircle cx='82' cy='21' r='.8'/%3E%3Ccircle cx='13' cy='46' r='1'/%3E%3Ccircle cx='64' cy='11' r='.6'/%3E%3Ccircle cx='108' cy='21' r='.8'/%3E%3Ccircle cx='48' cy='43' r='.6'/%3E%3Ccircle cx='23' cy='6' r='.8'/%3E%3Ccircle cx='101' cy='62' r='1'/%3E%3Ccircle cx='39' cy='30' r='1'/%3E%3Ccircle cx='62' cy='28' r='1'/%3E%3Ccircle cx='31' cy='57' r='1'/%3E%3Ccircle cx='118' cy='3' r='.8'/%3E%3Ccircle cx='45' cy='8' r='1'/%3E%3Ccircle cx='44' cy='19' r='.6'/%3E%3Ccircle cx='90' cy='5' r='.6'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--sljunak {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%238a8983' stroke-width='1.1'%3E%3Cellipse cx='57' cy='42' rx='5.5' ry='4.1' transform='rotate(14 57 42)'/%3E%3Cellipse cx='80' cy='9' rx='3.4' ry='3.0' transform='rotate(43 80 9)'/%3E%3Cellipse cx='1' cy='24' rx='5.0' ry='3.6' transform='rotate(78 1 24)'/%3E%3Cellipse cx='121' cy='24' rx='5.0' ry='3.6' transform='rotate(78 121 24)'/%3E%3Cellipse cx='33' cy='52' rx='3.8' ry='2.8' transform='rotate(9 33 52)'/%3E%3Cellipse cx='83' cy='38' rx='4.6' ry='2.7' transform='rotate(110 83 38)'/%3E%3Cellipse cx='17' cy='28' rx='4.7' ry='3.8' transform='rotate(130 17 28)'/%3E%3Cellipse cx='19' cy='58' rx='5.5' ry='3.4' transform='rotate(113 19 58)'/%3E%3Cellipse cx='19' cy='-6' rx='5.5' ry='3.4' transform='rotate(113 19 -6)'/%3E%3Cellipse cx='7' cy='52' rx='4.4' ry='4.0' transform='rotate(7 7 52)'/%3E%3Cellipse cx='40' cy='26' rx='4.1' ry='4.1' transform='rotate(97 40 26)'/%3E%3Cellipse cx='101' cy='1' rx='4.2' ry='4.0' transform='rotate(42 101 1)'/%3E%3Cellipse cx='101' cy='65' rx='4.2' ry='4.0' transform='rotate(42 101 65)'/%3E%3Cellipse cx='61' cy='6' rx='4.5' ry='2.8' transform='rotate(6 61 6)'/%3E%3Cellipse cx='61' cy='70' rx='4.5' ry='2.8' transform='rotate(6 61 70)'/%3E%3Cellipse cx='118' cy='61' rx='3.6' ry='2.7' transform='rotate(130 118 61)'/%3E%3Cellipse cx='-2' cy='-3' rx='3.6' ry='2.7' transform='rotate(130 -2 -3)'/%3E%3Cellipse cx='-2' cy='61' rx='3.6' ry='2.7' transform='rotate(130 -2 61)'/%3E%3Cellipse cx='118' cy='-3' rx='3.6' ry='2.7' transform='rotate(130 118 -3)'/%3E%3Cellipse cx='72' cy='31' rx='4.4' ry='4.2' transform='rotate(172 72 31)'/%3E%3Cellipse cx='46' cy='2' rx='4.5' ry='4.2' transform='rotate(114 46 2)'/%3E%3Cellipse cx='46' cy='66' rx='4.5' ry='4.2' transform='rotate(114 46 66)'/%3E%3Cellipse cx='87' cy='62' rx='5.1' ry='3.7' transform='rotate(93 87 62)'/%3E%3Cellipse cx='87' cy='-2' rx='5.1' ry='3.7' transform='rotate(93 87 -2)'/%3E%3Cellipse cx='117' cy='42' rx='5.1' ry='3.0' transform='rotate(114 117 42)'/%3E%3Cellipse cx='-3' cy='42' rx='5.1' ry='3.0' transform='rotate(114 -3 42)'/%3E%3Cellipse cx='14' cy='15' rx='3.6' ry='3.8' transform='rotate(118 14 15)'/%3E%3Cellipse cx='97' cy='32' rx='4.8' ry='2.8' transform='rotate(71 97 32)'/%3E%3Cellipse cx='47' cy='49' rx='5.4' ry='3.3' transform='rotate(90 47 49)'/%3E%3Cellipse cx='21' cy='45' rx='4.8' ry='3.2' transform='rotate(118 21 45)'/%3E%3Cellipse cx='25' cy='18' rx='4.0' ry='3.7' transform='rotate(142 25 18)'/%3E%3Cellipse cx='92' cy='22' rx='4.9' ry='3.3' transform='rotate(56 92 22)'/%3E%3Cellipse cx='29' cy='1' rx='5.5' ry='3.9' transform='rotate(42 29 1)'/%3E%3Cellipse cx='29' cy='65' rx='5.5' ry='3.9' transform='rotate(42 29 65)'/%3E%3Cellipse cx='28' cy='34' rx='5.3' ry='3.5' transform='rotate(122 28 34)'/%3E%3Cellipse cx='107' cy='10' rx='3.9' ry='4.1' transform='rotate(129 107 10)'/%3E%3Cellipse cx='50' cy='15' rx='4.5' ry='3.3' transform='rotate(157 50 15)'/%3E%3Cellipse cx='71' cy='58' rx='4.6' ry='3.0' transform='rotate(53 71 58)'/%3E%3Cellipse cx='71' cy='-6' rx='4.6' ry='3.0' transform='rotate(53 71 -6)'/%3E%3Cellipse cx='108' cy='51' rx='4.4' ry='3.1' transform='rotate(175 108 51)'/%3E%3Cellipse cx='80' cy='22' rx='4.7' ry='2.5' transform='rotate(87 80 22)'/%3E%3Cellipse cx='60' cy='23' rx='4.9' ry='4.0' transform='rotate(48 60 23)'/%3E%3Cellipse cx='37' cy='9' rx='5.6' ry='2.6' transform='rotate(147 37 9)'/%3E%3Cellipse cx='2' cy='11' rx='4.8' ry='2.9' transform='rotate(58 2 11)'/%3E%3Cellipse cx='122' cy='11' rx='4.8' ry='2.9' transform='rotate(58 122 11)'/%3E%3Cellipse cx='50' cy='33' rx='4.8' ry='4.0' transform='rotate(133 50 33)'/%3E%3Cellipse cx='111' cy='31' rx='3.5' ry='2.9' transform='rotate(53 111 31)'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--zemlja {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg stroke='%238a8983' stroke-width='1.1'%3E%3Cpath d='M0 8h10'/%3E%3Cpath d='M17 8h12'/%3E%3Cpath d='M35 8h16'/%3E%3Cpath d='M56 8h6'/%3E%3Cpath d='M70 8h10'/%3E%3Cpath d='M86 8h22'/%3E%3Cpath d='M114 8h6'/%3E%3Cpath d='M0 20h16'/%3E%3Cpath d='M21 20h16'/%3E%3Cpath d='M45 20h14'/%3E%3Cpath d='M68 20h17'/%3E%3Cpath d='M89 20h18'/%3E%3Cpath d='M114 20h6'/%3E%3Cpath d='M0 32h20'/%3E%3Cpath d='M26 32h18'/%3E%3Cpath d='M52 32h17'/%3E%3Cpath d='M78 32h12'/%3E%3Cpath d='M98 32h13'/%3E%3Cpath d='M0 44h20'/%3E%3Cpath d='M25 44h8'/%3E%3Cpath d='M38 44h21'/%3E%3Cpath d='M65 44h16'/%3E%3Cpath d='M87 44h14'/%3E%3Cpath d='M107 44h12'/%3E%3Cpath d='M0 56h15'/%3E%3Cpath d='M24 56h17'/%3E%3Cpath d='M49 56h20'/%3E%3Cpath d='M78 56h17'/%3E%3Cpath d='M100 56h20'/%3E%3C/g%3E%3Cg fill='%238a8983'%3E%3Ccircle cx='31' cy='44' r='.8'/%3E%3Ccircle cx='82' cy='54' r='.8'/%3E%3Ccircle cx='22' cy='15' r='.8'/%3E%3Ccircle cx='88' cy='8' r='.8'/%3E%3Ccircle cx='64' cy='14' r='.8'/%3E%3Ccircle cx='35' cy='28' r='.8'/%3E%3Ccircle cx='101' cy='39' r='.8'/%3E%3Ccircle cx='2' cy='18' r='.8'/%3E%3Ccircle cx='18' cy='56' r='.8'/%3E%3Ccircle cx='97' cy='52' r='.8'/%3E%3Ccircle cx='114' cy='51' r='.8'/%3E%3Ccircle cx='31' cy='54' r='.8'/%3E%3Ccircle cx='58' cy='48' r='.8'/%3E%3Ccircle cx='68' cy='27' r='.8'/%3E%3Ccircle cx='44' cy='28' r='.8'/%3E%3Ccircle cx='38' cy='8' r='.8'/%3E%3Ccircle cx='118' cy='44' r='.8'/%3E%3Ccircle cx='67' cy='48' r='.8'/%3E%3Ccircle cx='16' cy='43' r='.8'/%3E%3Ccircle cx='53' cy='11' r='.8'/%3E%3Ccircle cx='24' cy='33' r='.8'/%3E%3Ccircle cx='16' cy='31' r='.8'/%3E%3Ccircle cx='23' cy='23' r='.8'/%3E%3Ccircle cx='9' cy='42' r='.8'/%3E%3Ccircle cx='114' cy='25' r='.8'/%3E%3Ccircle cx='5' cy='9' r='.8'/%3E%3Ccircle cx='77' cy='10' r='.8'/%3E%3Ccircle cx='50' cy='56' r='.8'/%3E%3Ccircle cx='106' cy='51' r='.8'/%3E%3Ccircle cx='45' cy='46' r='.8'/%3E%3Ccircle cx='70' cy='38' r='.8'/%3E%3Ccircle cx='41' cy='19' r='.8'/%3E%3Ccircle cx='13' cy='14' r='.8'/%3E%3Ccircle cx='5' cy='28' r='.8'/%3E%3Ccircle cx='60' cy='62' r='.8'/%3E%3Ccircle cx='80' cy='19' r='.8'/%3E%3Ccircle cx='102' cy='17' r='.8'/%3E%3Ccircle cx='29' cy='18' r='.8'/%3E%3Ccircle cx='10' cy='49' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--sut {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%238a8983' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpolygon points='12,42 16,43 14,50 9,47'/%3E%3Cpolygon points='81,63 74,61 77,56 81,58'/%3E%3Cpolygon points='81,-1 74,-3 77,-8 81,-6'/%3E%3Cpolygon points='30,14 34,13 36,18 30,18'/%3E%3Cpolygon points='87,45 86,41 89,39 91,43'/%3E%3Cpolygon points='42,44 36,49 31,43 39,40'/%3E%3Cpolygon points='44,46 50,44 52,51 49,56 43,51'/%3E%3Cpolygon points='16,13 16,17 11,15 13,11'/%3E%3Cpolygon points='112,23 108,27 105,23 107,19'/%3E%3Cpolygon points='72,8 78,6 80,12 73,12'/%3E%3Cpolygon points='63,45 62,40 69,38 72,41 69,50'/%3E%3Cpolygon points='20,34 19,26 29,27'/%3E%3Cpolygon points='25,56 23,51 26,47 30,50'/%3E%3Cpolygon points='63,9 58,9 57,4 62,3'/%3E%3Cpolygon points='63,73 58,73 57,68 62,67'/%3E%3Cpolygon points='94,6 97,3 100,2 102,7 99,9'/%3E%3Cpolygon points='94,70 97,67 100,66 102,71 99,73'/%3E%3Cpolygon points='30,5 30,-1 36,-1 36,6'/%3E%3Cpolygon points='30,69 30,63 36,63 36,70'/%3E%3Cpolygon points='70,30 62,34 61,26 64,23'/%3E%3Cpolygon points='118,43 114,36 122,33'/%3E%3Cpolygon points='-2,43 -6,36 2,33'/%3E%3Cpolygon points='87,28 87,21 92,20 96,26'/%3E%3Cpolygon points='65,58 58,56 58,49 64,50'/%3E%3Cpolygon points='48,24 45,28 42,29 41,22 46,22'/%3E%3Cpolygon points='7,24 8,28 4,29 3,26 4,23'/%3E%3Cpolygon points='127,24 128,28 124,29 123,26 124,23'/%3E%3Cpolygon points='115,54 112,58 108,57 112,51'/%3E%3Cpolygon points='111,8 109,3 112,-1 117,6'/%3E%3Cpolygon points='111,72 109,67 112,63 117,70'/%3E%3Cpolygon points='113,15 119,10 127,16 120,21'/%3E%3Cpolygon points='-7,15 -1,10 7,16 0,21'/%3E%3Cpolygon points='46,11 54,9 55,19 48,19'/%3E%3Cpolygon points='100,40 100,32 105,34 106,38'/%3E%3C/g%3E%3Cg fill='%238a8983'%3E%3Crect x='85' y='54' width='3' height='2'/%3E%3Crect x='23' y='43' width='3' height='2'/%3E%3Crect x='53' y='55' width='3' height='2'/%3E%3Crect x='89' y='28' width='3' height='2'/%3E%3Crect x='37' y='61' width='3' height='2'/%3E%3Crect x='10' y='49' width='3' height='2'/%3E%3Crect x='101' y='10' width='3' height='2'/%3E%3Crect x='39' y='20' width='3' height='2'/%3E%3Crect x='65' y='23' width='3' height='2'/%3E%3Crect x='107' y='59' width='3' height='2'/%3E%3Crect x='11' y='32' width='3' height='2'/%3E%3Crect x='77' y='1' width='3' height='2'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--kamen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='%238a8983' fill-opacity='.28' stroke='%238a8983' stroke-linejoin='round'%3E%3Cpolygon points='118,-3 119,1 117,5 112,3 112,-1'/%3E%3Cpolygon points='-2,-3 -1,1 -3,5 -8,3 -8,-1'/%3E%3Cpolygon points='-2,61 -1,65 -3,69 -8,67 -8,63'/%3E%3Cpolygon points='118,61 119,65 117,69 112,67 112,63'/%3E%3Cpolygon points='91,12 88,13 85,9 88,8 91,9'/%3E%3Cpolygon points='107,42 108,46 106,47 103,44 104,41'/%3E%3Cpolygon points='105,61 106,65 103,68 100,64 102,60'/%3E%3Cpolygon points='105,-3 106,1 103,4 100,0 102,-4'/%3E%3Cpolygon points='28,24 26,22 27,18 32,21 31,23'/%3E%3Cpolygon points='109,32 110,29 114,30 114,35 111,36 108,35'/%3E%3Cpolygon points='51,2 55,6 50,9 48,5'/%3E%3Cpolygon points='51,66 55,70 50,73 48,69'/%3E%3Cpolygon points='64,22 67,20 71,21 69,26 66,28'/%3E%3Cpolygon points='68,57 70,58 70,61 68,62 66,62 66,58'/%3E%3Cpolygon points='68,-7 70,-6 70,-3 68,-2 66,-2 66,-6'/%3E%3Cpolygon points='75,28 75,25 79,23 80,26 80,28 77,28'/%3E%3Cpolygon points='61,64 59,65 56,61 56,58 60,57 63,58'/%3E%3Cpolygon points='61,0 59,1 56,-3 56,-6 60,-7 63,-6'/%3E%3Cpolygon points='1,6 5,7 6,11 2,12 -2,9'/%3E%3Cpolygon points='121,6 125,7 126,11 122,12 118,9'/%3E%3Cpolygon points='21,57 24,60 20,63 18,60'/%3E%3Cpolygon points='21,-7 24,-4 20,-1 18,-4'/%3E%3Cpolygon points='85,44 86,47 84,49 82,49 80,45 82,43'/%3E%3Cpolygon points='35,29 37,31 36,34 34,34 32,33 33,30'/%3E%3Cpolygon points='17,4 15,6 11,4 12,1 16,0'/%3E%3Cpolygon points='17,68 15,70 11,68 12,65 16,64'/%3E%3Cpolygon points='60,14 57,12 60,9 63,12'/%3E%3Cpolygon points='113,26 111,21 114,20 117,24'/%3E%3Cpolygon points='101,23 98,23 95,20 99,17 103,19'/%3E%3Cpolygon points='7,55 7,59 4,61 1,58 3,55'/%3E%3Cpolygon points='127,55 127,59 124,61 121,58 123,55'/%3E%3Cpolygon points='57,33 58,29 61,28 63,31 61,34'/%3E%3Cpolygon points='90,38 93,36 95,36 95,39 94,40 91,40'/%3E%3Cpolygon points='42,43 38,43 38,40 42,40'/%3E%3Cpolygon points='46,25 43,22 43,20 47,20 48,23'/%3E%3Cpolygon points='101,48 103,52 101,55 97,54 95,50 97,48'/%3E%3Cpolygon points='-1,43 1,41 4,41 4,43 1,46'/%3E%3Cpolygon points='119,43 121,41 124,41 124,43 121,46'/%3E%3Cpolygon points='28,65 29,61 32,61 31,66'/%3E%3Cpolygon points='28,1 29,-3 32,-3 31,2'/%3E%3Cpolygon points='39,55 43,55 43,60 38,62 36,58'/%3E%3Cpolygon points='39,-9 43,-9 43,-4 38,-2 36,-6'/%3E%3Cpolygon points='14,19 15,24 9,25 10,20'/%3E%3Cpolygon points='45,48 49,48 50,51 48,54 45,51'/%3E%3Cpolygon points='16,43 16,40 21,40 22,44 19,46'/%3E%3Cpolygon points='68,37 67,35 67,32 71,33 73,34 71,39'/%3E%3Cpolygon points='30,10 30,6 34,5 36,8 35,12'/%3E%3Cpolygon points='105,9 108,8 111,10 110,14 105,13'/%3E%3Cpolygon points='78,67 77,63 81,60 84,64'/%3E%3Cpolygon points='78,3 77,-1 81,-4 84,0'/%3E%3Cpolygon points='4,31 2,30 2,28 4,26 7,28 6,31'/%3E%3Cpolygon points='124,31 122,30 122,28 124,26 127,28 126,31'/%3E%3Cpolygon points='77,13 81,14 81,16 79,18 76,16'/%3E%3Cpolygon points='53,42 48,41 49,37 52,37 55,39'/%3E%3Cpolygon points='114,56 112,58 109,55 110,53 113,52'/%3E%3Cpolygon points='87,26 88,23 90,22 93,25 92,28 90,28'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--gradjevinski {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%238a8983' stroke-width='1.1'%3E%3Crect x='0' y='2' width='21' height='8'/%3E%3Crect x='24' y='2' width='21' height='8'/%3E%3Crect x='48' y='2' width='21' height='8'/%3E%3Crect x='72' y='2' width='21' height='8'/%3E%3Crect x='96' y='2' width='21' height='8'/%3E%3Crect x='-12' y='13' width='21' height='8'/%3E%3Crect x='12' y='13' width='21' height='8'/%3E%3Crect x='36' y='13' width='21' height='8'/%3E%3Crect x='60' y='13' width='21' height='8'/%3E%3Crect x='84' y='13' width='21' height='8'/%3E%3Crect x='108' y='13' width='21' height='8'/%3E%3Crect x='0' y='24' width='21' height='8'/%3E%3Crect x='24' y='24' width='21' height='8'/%3E%3Crect x='48' y='24' width='21' height='8'/%3E%3Crect x='72' y='24' width='21' height='8'/%3E%3Crect x='96' y='24' width='21' height='8'/%3E%3Crect x='-12' y='35' width='21' height='8'/%3E%3Crect x='12' y='35' width='21' height='8'/%3E%3Crect x='36' y='35' width='21' height='8'/%3E%3Crect x='60' y='35' width='21' height='8'/%3E%3Crect x='84' y='35' width='21' height='8'/%3E%3Crect x='108' y='35' width='21' height='8'/%3E%3Crect x='0' y='46' width='21' height='8'/%3E%3Crect x='24' y='46' width='21' height='8'/%3E%3Crect x='48' y='46' width='21' height='8'/%3E%3Crect x='72' y='46' width='21' height='8'/%3E%3Crect x='96' y='46' width='21' height='8'/%3E%3Crect x='-12' y='57' width='21' height='8'/%3E%3Crect x='12' y='57' width='21' height='8'/%3E%3Crect x='36' y='57' width='21' height='8'/%3E%3Crect x='60' y='57' width='21' height='8'/%3E%3Crect x='84' y='57' width='21' height='8'/%3E%3Crect x='108' y='57' width='21' height='8'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--ogrev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%238a8983' stroke-width='1.1'%3E%3Ccircle cx='63' cy='52' r='6.2'/%3E%3Ccircle cx='63' cy='52' r='3.4'/%3E%3Ccircle cx='63' cy='52' r='.9' fill='%238a8983'/%3E%3Ccircle cx='115' cy='19' r='5.8'/%3E%3Ccircle cx='115' cy='19' r='3.2'/%3E%3Ccircle cx='115' cy='19' r='.9' fill='%238a8983'/%3E%3Ccircle cx='-5' cy='19' r='5.8'/%3E%3Ccircle cx='-5' cy='19' r='3.2'/%3E%3Ccircle cx='-5' cy='19' r='.9' fill='%238a8983'/%3E%3Ccircle cx='92' cy='45' r='7.0'/%3E%3Ccircle cx='92' cy='45' r='3.8'/%3E%3Ccircle cx='92' cy='45' r='.9' fill='%238a8983'/%3E%3Ccircle cx='79' cy='7' r='5.7'/%3E%3Ccircle cx='79' cy='7' r='3.1'/%3E%3Ccircle cx='79' cy='7' r='.9' fill='%238a8983'/%3E%3Ccircle cx='79' cy='71' r='5.7'/%3E%3Ccircle cx='79' cy='71' r='3.1'/%3E%3Ccircle cx='79' cy='71' r='.9' fill='%238a8983'/%3E%3Ccircle cx='60' cy='20' r='6.7'/%3E%3Ccircle cx='60' cy='20' r='3.7'/%3E%3Ccircle cx='60' cy='20' r='.9' fill='%238a8983'/%3E%3Ccircle cx='102' cy='60' r='6.3'/%3E%3Ccircle cx='102' cy='60' r='3.5'/%3E%3Ccircle cx='102' cy='60' r='.9' fill='%238a8983'/%3E%3Ccircle cx='102' cy='-4' r='6.3'/%3E%3Ccircle cx='102' cy='-4' r='3.5'/%3E%3Ccircle cx='102' cy='-4' r='.9' fill='%238a8983'/%3E%3Ccircle cx='48' cy='64' r='5.6'/%3E%3Ccircle cx='48' cy='64' r='3.1'/%3E%3Ccircle cx='48' cy='64' r='.9' fill='%238a8983'/%3E%3Ccircle cx='48' cy='0' r='5.6'/%3E%3Ccircle cx='48' cy='0' r='3.1'/%3E%3Ccircle cx='48' cy='0' r='.9' fill='%238a8983'/%3E%3Ccircle cx='7' cy='52' r='6.7'/%3E%3Ccircle cx='7' cy='52' r='3.7'/%3E%3Ccircle cx='7' cy='52' r='.9' fill='%238a8983'/%3E%3Ccircle cx='127' cy='52' r='6.7'/%3E%3Ccircle cx='127' cy='52' r='3.7'/%3E%3Ccircle cx='127' cy='52' r='.9' fill='%238a8983'/%3E%3Ccircle cx='32' cy='50' r='5.6'/%3E%3Ccircle cx='32' cy='50' r='3.1'/%3E%3Ccircle cx='32' cy='50' r='.9' fill='%238a8983'/%3E%3Ccircle cx='42' cy='30' r='6.5'/%3E%3Ccircle cx='42' cy='30' r='3.6'/%3E%3Ccircle cx='42' cy='30' r='.9' fill='%238a8983'/%3E%3Ccircle cx='115' cy='38' r='5.7'/%3E%3Ccircle cx='115' cy='38' r='3.1'/%3E%3Ccircle cx='115' cy='38' r='.9' fill='%238a8983'/%3E%3Ccircle cx='-5' cy='38' r='5.7'/%3E%3Ccircle cx='-5' cy='38' r='3.1'/%3E%3Ccircle cx='-5' cy='38' r='.9' fill='%238a8983'/%3E%3Ccircle cx='30' cy='10' r='5.7'/%3E%3Ccircle cx='30' cy='10' r='3.1'/%3E%3Ccircle cx='30' cy='10' r='.9' fill='%238a8983'/%3E%3Ccircle cx='13' cy='14' r='6.5'/%3E%3Ccircle cx='13' cy='14' r='3.6'/%3E%3Ccircle cx='13' cy='14' r='.9' fill='%238a8983'/%3E%3Ccircle cx='79' cy='26' r='7.4'/%3E%3Ccircle cx='79' cy='26' r='4.1'/%3E%3Ccircle cx='79' cy='26' r='.9' fill='%238a8983'/%3E%3C/g%3E%3C/svg%3E");
}
.tr-mat__swatch--gvozdje {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cg fill='none' stroke='%238a8983'%3E%3Cpath d='M-64 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M-52 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M-40 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M-28 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M-16 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M-4 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M8 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M20 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M32 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M44 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M56 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M68 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M80 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M92 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M104 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M116 64l64 -64m3.5 0l-64 64'/%3E%3Cpath d='M128 64l64 -64m3.5 0l-64 64'/%3E%3C/g%3E%3C/svg%3E");
}