:root {

  --bg: #1f1f1f;

  --card: #2b2b2b;

  --card-border: #3a3a3a;

  --ink: #d8d8d8;

  --accent: #e63322;

  --office-scale: 0.8;

  --office-photo-width: 580px;

  --office-photo-height: 300px;

  --office-photo-gap: 50px;

  --office-photo-inset: 10px;

}



.contact-page {

  background: #fff;

  color: var(--ink);

  padding: calc(var(--site-header-offset, 110px) + 24px) 24px 72px;

}



.contact-page .offices {

  max-width: 1300px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 35px;

}



.contact-page .office {

  background: var(--card);

  display: grid;

  grid-template-columns: minmax(260px, max-content) 1fr var(--office-photo-width);

  column-gap: 0;

  min-height: var(--office-photo-height);

}



.contact-page .office__info {

  padding: 30px 28px;

  line-height: 1.6;

  font-size: 15px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.contact-page .office__title {

  color: var(--accent);

  margin: 0 0 14px;

  font-size: 20px;

  font-weight: 400;

  text-transform: none;

  letter-spacing: normal;

}



.contact-page .office__info strong {

  color: #d4d4d4;
  font-weight: 400;

}



.contact-page .office__map,

.contact-page .office__photo {

  overflow: hidden;

  display: flex;

  align-items: stretch;

  justify-content: flex-start;

  background: var(--card);

}



.contact-page .office__map {

  align-items: center;

  justify-content: flex-end;

  justify-self: end;

  margin-right: var(--office-photo-gap);

}



.contact-page .office__photo {

  width: calc(var(--office-photo-width) - var(--office-photo-inset));

  max-width: calc(var(--office-photo-width) - var(--office-photo-inset));

  height: auto;

  margin: var(--office-photo-inset) var(--office-photo-inset) var(--office-photo-inset) 0;

  padding: 0;

  align-self: stretch;

  justify-self: end;

}



.contact-page .office__map img,

.contact-page .office__photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.contact-page .office__map img {

  width: calc(320px * var(--office-scale));

  height: calc(223px * var(--office-scale));

  max-width: calc(320px * var(--office-scale));

  max-height: calc(223px * var(--office-scale));

}



.contact-page .office__placeholder {

  display: flex;

  width: 100%;

  height: 100%;

  align-items: center;

  justify-content: center;

  color: #8e8e8e;

  font-size: 13px;

}



.contact-page .office__contact-line a {

  color: inherit;

  text-decoration: none;

  transition: color 0.2s ease;

}



.contact-page .office__contact-line a:hover {

  color: var(--accent);

}



.contact-page .office__contact-block {

  margin-top: 18px;

}



.contact-page .office__contact-person {

  margin-bottom: 8px;

}



.contact-page .office--factories .office__info {

  justify-content: center;

  align-self: center;

}



.contact-page .office--factories.office--no-map {

  grid-template-columns: minmax(260px, max-content) 1fr;

}



.contact-page .factory-entries {

  display: flex;

  flex-direction: column;

  gap: calc(18px * var(--office-scale));

  margin-block: auto;

}



.contact-page .factory-entry {

  display: flex;

  flex-direction: column;

  gap: calc(8px * var(--office-scale));

}



.contact-page .factory-entry-branch-title {

  font-weight: 400;

}



.contact-page .factory-entry-title-inline {

  color: var(--accent);

  font-size: 20px;

  line-height: 1;

  margin: calc(8px * var(--office-scale)) 0 calc(2px * var(--office-scale));

  font-family: 'Kdam Thmor Pro', sans-serif;

}



.contact-page .office__map--stack {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-end;

  gap: 10px;

  padding: calc(18px * var(--office-scale)) 0;

}



.contact-page .office__map-stack-item {

  flex: 0 0 auto;

  width: calc(320px * var(--office-scale));

  height: calc(223px * var(--office-scale));

}



.contact-page .office__map-stack-item img {

  width: 100%;

  height: 100%;

  max-width: none;

  max-height: none;

  object-fit: cover;

  display: block;

}



@media (max-width: 960px) {

  .contact-page {

    padding: calc(var(--site-header-offset, 110px) + 16px) 16px 48px;

    overflow-x: hidden;

  }



  .contact-page .offices {

    gap: 24px;

  }



  .contact-page .office {

    grid-template-columns: 1fr;

    min-height: 0;

  }



  .contact-page .office__info {

    padding: 22px 18px;

  }



  .contact-page .office--factories .office__info {

    align-self: stretch;

  }



  .contact-page .factory-entries {

    margin-block: 0;

  }



  .contact-page .factory-entry-title-inline {

    font-size: 20px;

    margin-top: 12px;

    margin-bottom: 8px;

  }



  .contact-page .office__map {

    justify-self: stretch;

    justify-content: center;

    align-items: center;

    margin-right: 0;

    width: 100%;

    padding: 0 var(--office-photo-inset);

  }



  .contact-page .office__map--stack {

    align-items: center;

    width: 100%;

    padding: 12px var(--office-photo-inset);

  }



  .contact-page .office__map img {

    width: 100%;

    max-width: 100%;

    height: auto;

    aspect-ratio: 320 / 223;

  }



  .contact-page .office__map-stack-item {

    width: 100%;

    max-width: 100%;

    height: auto;

    aspect-ratio: 320 / 223;

  }



  .contact-page .office__map-stack-item img {

    width: 100%;

    height: 100%;

  }



  .contact-page .office__photo {

    width: calc(100% - (var(--office-photo-inset) * 2));

    max-width: none;

    margin: var(--office-photo-inset);

    align-self: stretch;

    justify-self: stretch;

    min-height: 220px;

    aspect-ratio: 3 / 2;

    height: auto;

  }



  .contact-page .office__photo img {

    object-fit: cover;

  }



  .contact-page .office--factories.office--no-map {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 480px) {

  .contact-page {

    padding: 96px 12px 40px;

  }



  .contact-page .office__info {

    padding: 18px 14px;

    font-size: 14px;

  }



  .contact-page .office__title {

    font-size: 18px;

  }

}