/* WordPress/CF7 integration layer. Visual values follow the approved UI kit. */
.perspektiva-form-host,
.perspektiva-form-host--home form {
  width: 100%;
}

/* The global contact form is absolutely positioned with both left and right
   insets. An explicit 100% width made its fields run 20px through the right
   edge of the cell at tablet/notebook zoom levels. */
.contacts__feedback .contact-form {
  width: auto !important;
  max-width: none !important;
}

.map.map--interactive iframe,
.map > iframe[title="НПЦ Перспектива на карте Москвы"] {
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 1;
}

.client-logo__mark {
  object-fit: contain;
  max-width: 82%;
  max-height: 82px;
}

.feature-card__icon:not([class*="feature-card__icon--"]) {
  border: 0;
  border-radius: 0;
}

.feature-card__icon-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.news__grid[aria-busy="true"] {
  opacity: .45;
  pointer-events: none;
  transition: opacity .2s ease;
}

.client-logo small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.review-card__header > img {
  object-fit: contain;
  width: 253px;
  height: 42px;
}

.perspektiva-form-host--home,
.perspektiva-form-host--modal,
.perspektiva-form-host--modal form,
.perspektiva-form-host--page {
  display: contents;
}

.contact-form__field,
.contact-page-form__field,
.contact-modal__field {
  --perspektiva-field-bottom: 5px;
  box-sizing: border-box;
  display: block;
  position: relative;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.wpcf7-form .contact-form__field,
.wpcf7-form .contact-page-form__field,
.wpcf7-form .contact-modal__field,
.wpcf7-form .contact-form__field.is-invalid,
.wpcf7-form .contact-page-form__field.is-invalid,
.wpcf7-form .contact-modal__field.is-invalid {
  margin-bottom: 0 !important;
}

.contact-page-form__field {
  --perspektiva-field-bottom: 4px;
}

.contact-modal__field {
  --perspektiva-field-bottom: 3px;
}

.contact-form__field > .wpcf7-form-control-wrap,
.contact-page-form__field > .wpcf7-form-control-wrap,
.contact-modal__field > .wpcf7-form-control-wrap {
  color: inherit !important;
  display: block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: none !important;
}

.contact-form__field input:not([type="checkbox"]),
.contact-form__field textarea,
.contact-page-form__field input:not([type="checkbox"]),
.contact-page-form__field textarea,
.contact-modal__field input:not([type="checkbox"]),
.contact-modal__field textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  line-height: 1.12 !important;
  position: absolute;
  inset: auto 0 var(--perspektiva-field-bottom) 0 !important;
  padding: 0 !important;
  height: 1.12em !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
}

.contact-form__field textarea,
.contact-page-form__field textarea,
.contact-modal__field textarea {
  min-height: 0 !important;
  overflow: hidden;
  resize: none;
}

.contact-form__field > .perspektiva-field-label,
.contact-page-form__field > .perspektiva-field-label,
.contact-modal__field > .perspektiva-field-label {
  top: auto !important;
  bottom: var(--perspektiva-field-bottom);
  left: 0;
  line-height: 1.12;
  pointer-events: none;
  position: absolute;
  transition: opacity .15s ease;
}

.contact-form__field.is-filled > .perspektiva-field-label,
.contact-page-form__field.is-filled > .perspektiva-field-label,
.contact-modal__field.is-filled > .perspektiva-field-label {
  opacity: 0;
}

.contact-form .contact-form__field:focus-within > .perspektiva-field-label {
  top: auto !important;
  color: rgba(255, 255, 255, .58);
  font-size: 18px;
  opacity: 1;
}

.contact-form .contact-form__field.is-filled:focus-within > .perspektiva-field-label {
  opacity: 0;
}

.contact-page-form__field.is-filled > .perspektiva-field-label {
  opacity: 0;
}

.contact-modal__field:focus-within > .perspektiva-field-label {
  top: auto !important;
  color: rgba(0, 0, 0, .6);
  font-size: 16px;
  opacity: 1;
}

.contact-modal__field.is-filled:focus-within > .perspektiva-field-label {
  opacity: 0;
}

.wpcf7-form .wpcf7-not-valid-tip {
  color: #ff6b6b;
  font-size: 10px;
  line-height: 1.1;
  display: block;
  margin: 0 !important;
  padding: 0;
  position: absolute;
  top: calc(100% + 3px) !important;
  bottom: auto !important;
  left: 0;
  z-index: 2;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

.wpcf7-form .contact-form__field .form-field-error,
.wpcf7-form .contact-page-form__field .form-field-error,
.wpcf7-form .contact-modal__field .form-field-error {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  color: #ff6b6b !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  pointer-events: none;
}

.contact-form__field.is-invalid,
.contact-page-form__field.is-invalid,
.contact-modal__field.is-invalid {
  border-bottom-color: #ff6b6b !important;
}

.contact-form__field.is-invalid > .perspektiva-field-label,
.contact-page-form__field.is-invalid > .perspektiva-field-label,
.contact-modal__field.is-invalid > .perspektiva-field-label {
  color: inherit !important;
}

.contact-form .contact-form__field.is-invalid > .perspektiva-field-label {
  color: rgba(255, 255, 255, .58) !important;
}

.contact-modal__field.is-invalid > .perspektiva-field-label {
  color: rgba(0, 0, 0, .6) !important;
}

.contact-form__field .wpcf7-not-valid,
.contact-page-form__field .wpcf7-not-valid,
.contact-modal__field .wpcf7-not-valid {
  color: inherit !important;
}

.contact-form__consent .wpcf7-form-control-wrap,
.contact-page-form__consent .wpcf7-form-control-wrap,
.contact-modal__consent .wpcf7-form-control-wrap {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.contact-form__consent span.wpcf7-form-control,
.contact-page-form__consent span.wpcf7-form-control,
.contact-modal__consent span.wpcf7-form-control {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form__consent .wpcf7-list-item,
.contact-page-form__consent .wpcf7-list-item,
.contact-modal__consent .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form__consent .wpcf7-list-item > label,
.contact-page-form__consent .wpcf7-list-item > label,
.contact-modal__consent .wpcf7-list-item > label {
  align-items: flex-start;
  gap: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.contact-form__consent .wpcf7-list-item-label,
.contact-page-form__consent .wpcf7-list-item-label,
.contact-modal__consent .wpcf7-list-item-label {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

.contact-form__consent input[type="checkbox"],
.contact-page-form__consent input[type="checkbox"],
.contact-modal__consent input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  cursor: pointer;
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  float: none !important;
  z-index: 1;
  color-scheme: light;
}

.contact-modal__consent input[type="checkbox"] {
  border: 1px solid #17437b !important;
}

.contact-form__consent input[type="checkbox"]:checked,
.contact-page-form__consent input[type="checkbox"]:checked,
.contact-modal__consent input[type="checkbox"]:checked {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.768555 3.58936L4.93522 8.58936L10.7686 0.589355' stroke='%2317437B' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 12px 11px !important;
}

.contact-form__consent input[type="checkbox"]::after,
.contact-page-form__consent input[type="checkbox"]::after,
.contact-modal__consent input[type="checkbox"]::after {
  content: none !important;
}

.contact-form__consent.is-invalid input[type="checkbox"],
.contact-page-form__consent.is-invalid input[type="checkbox"],
.contact-modal__consent.is-invalid input[type="checkbox"] {
  box-shadow: 0 0 0 1px #ff6b6b;
}

.contact-form__consent,
.contact-page-form__consent,
.contact-modal__consent {
  flex-wrap: nowrap;
  position: relative;
}

.contact-form__consent .wpcf7-not-valid-tip,
.contact-page-form__consent .wpcf7-not-valid-tip,
.contact-modal__consent .wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7-form .wpcf7-response-output,
.wpcf7-spinner {
  display: none !important;
}

.perspektiva-form-success {
  color: inherit;
  width: 100%;
}

.perspektiva-form-success:focus {
  outline: none;
}

.perspektiva-form-success strong {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(34px, 3.125vw, 60px);
  font-weight: 400;
  line-height: .95;
}

.perspektiva-form-success p {
  max-width: 520px;
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.perspektiva-form-host.is-success .wpcf7-form {
  display: none;
}

.perspektiva-form-host.is-success .perspektiva-form-success {
  display: block;
}

.perspektiva-form-host--modal.is-success {
  display: block;
}

.perspektiva-form-host--modal.is-success .perspektiva-form-success {
  min-height: 0;
  padding: 0;
  text-align: center;
}

/* Keep the original modal geometry while its content becomes the success view. */
.contact-modal.is-success .contact-modal__dialog {
  overflow: hidden;
}

.contact-modal.is-success .contact-modal__intro {
  visibility: hidden;
}

.contact-modal.is-success .perspektiva-form-host--modal {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  padding: 30px;
  place-items: center;
  background: #fff;
}

.contact-modal.is-success .perspektiva-form-success {
  max-width: 680px;
  margin: 0 auto;
}

.contact-modal.is-success .contact-modal__close {
  z-index: 3;
}

.wpcf7-form.submitting button[type="submit"] {
  pointer-events: none;
  opacity: .7;
}

@media (max-width: 767px) {
  .contact-form__consent input[type="checkbox"],
  .contact-page-form__consent input[type="checkbox"],
  .contact-modal__consent input[type="checkbox"] {
    flex-basis: 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
  }

  .contact-form__consent input[type="checkbox"]:checked,
  .contact-page-form__consent input[type="checkbox"]:checked,
  .contact-modal__consent input[type="checkbox"]:checked {
    background-size: 10px 9px !important;
  }

  .contact-modal__consent {
    font-size: 12px;
  }

  .perspektiva-form-success strong {
    font-size: 36px;
  }

  .perspektiva-form-success p {
    font-size: 14px;
  }

  .contact-modal.is-success .perspektiva-form-host--modal {
    padding: 20px;
  }
}

/* Keep the approved absolute header visible while an editor is logged in. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* CF7 consent: keep the checkbox and its text on one row. */
.contact-form .contact-form__consent .wpcf7-list-item > label,
.contact-page-form .contact-page-form__consent .wpcf7-list-item > label,
.contact-modal .contact-modal__consent .wpcf7-list-item > label {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  .contact-form__consent .wpcf7-list-item-label,
  .contact-page-form__consent .wpcf7-list-item-label,
  .contact-modal__consent .wpcf7-list-item-label {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}

/* License lightbox guides share the panel's grid track, so every line starts
   at an actual panel corner instead of at a hard-coded viewport offset. */
.page--licenses .license-lightbox {
  background-image: none;
  grid-template-areas: "license-dialog";
  grid-template-columns: 100vw;
  grid-template-rows: max-content;
  align-content: center;
  justify-content: center;
}

.page--licenses .license-lightbox__guides,
.page--licenses .license-lightbox__panel {
  grid-area: license-dialog;
}

.page--licenses .license-lightbox__guides {
  z-index: 1;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  height: auto;
  border-block: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  position: relative;
}

.page--licenses .license-lightbox__guides::before,
.page--licenses .license-lightbox__guides::after {
  top: -100vh;
  bottom: -100vh;
  background: rgba(255, 255, 255, .55);
  position: absolute;
}

.page--licenses .license-lightbox__guides::before {
  left: calc(50% - var(--license-lightbox-width) / 2);
}

.page--licenses .license-lightbox__guides::after {
  right: calc(50% - var(--license-lightbox-width) / 2);
}

.page--licenses .license-lightbox__panel {
  align-self: center;
  justify-self: center;
  left: 0;
}

/* Testimonial images reuse the corrected document geometry on every page. */
[data-review-file][hidden] {
  display: none !important;
}

.review-lightbox {
  background-image: none;
  grid-template-areas: "review-dialog";
  grid-template-columns: 100vw;
  grid-template-rows: max-content;
  align-content: center;
  justify-content: center;
}

/* The compiled theme stylesheet is emitted after this integration layer.
   Use the combined modal classes so the retired viewport-offset guide pair
   cannot override the panel-aligned guides on any review section. */
.license-lightbox.review-lightbox {
  background-image: none;
}

.review-lightbox .license-lightbox__guides,
.review-lightbox .license-lightbox__panel {
  grid-area: review-dialog;
}

.review-lightbox .license-lightbox__guides {
  z-index: 1;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  height: auto;
  border-block: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  position: relative;
}

.review-lightbox .license-lightbox__guides::before,
.review-lightbox .license-lightbox__guides::after {
  top: -100vh;
  bottom: -100vh;
  background: rgba(255, 255, 255, .55);
  position: absolute;
}

.review-lightbox .license-lightbox__guides::before {
  left: calc(50% - var(--license-lightbox-width) / 2);
}

.review-lightbox .license-lightbox__guides::after {
  right: calc(50% - var(--license-lightbox-width) / 2);
}

.review-lightbox .license-lightbox__panel {
  align-self: center;
  justify-self: center;
  left: 0;
}

/* Final client corrections: CMS-driven content must keep its geometry when
   text lengths differ from the original static mockup. */
.page.page--projects .projects-pagination {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .page--article .article-layout {
    height: auto !important;
    padding-bottom: 24px;
  }

  .page--article .article-copy {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    margin: 250px 14px 0;
  }

  .page--article .article-copy__lead,
  .page--article .article-table-scroll,
  .page--article .article-section--quality,
  .page--article .article-section--condition,
  .page--article .article-section--reconstruction {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    margin: 31px 0 0 !important;
  }

  .page--article .article-copy__image--reconstruction {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: 340px !important;
    margin: 31px 0 0 !important;
  }

  .page--article .article-table {
    height: auto !important;
  }

  .page--services .services-catalog__link {
    margin-top: auto;
  }
}

@media (min-width: 1025px) {
  .page--services:not(.page--service-detail) .services-page {
    --services-catalog-end-gap: clamp(140px, calc(8.5417vw + 17px), 181px);
  }
}

@media (min-width: 1600px) {
  .page--home .about__cards .feature-card p {
    right: auto;
    width: min(400px, calc(100% - 40px));
    max-width: calc(100% - 40px);
  }

  .page--home .about__cards .feature-card:nth-of-type(2) p {
    width: min(380px, calc(100% - 40px));
  }

  .page--home .about__cards .feature-card:nth-of-type(4) p {
    width: min(440px, calc(100% - 40px));
  }

  .page--home .about__cards > article:nth-of-type(2) {
    border-right: 0;
  }
}

/* About vacancies: final Figma geometry for 1920 / 1440 / tablet / mobile. */
.page--about .about-vacancies > header h2 {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.1;
}

.page--about .about-vacancies > header > a span {
  font-weight: 500;
}

.page--about .about-vacancies__track > article {
  min-height: 652px;
  grid-template-rows: minmax(250px, auto) 92px 310px;
}

.page--about .about-vacancies__track h3 {
  line-height: 1.1;
}

.page--about .about-vacancy__salary strong {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.1;
}

.page--about .about-vacancy__columns {
  min-height: 310px;
}

.page--about .about-vacancy__columns p {
  line-height: 1.2;
}

@media (min-width: 1600px) {
  .page--about .about-vacancies {
    min-height: 0;
    padding: 40px 20px 60px;
  }

  .page--about .about-vacancies > header h2 {
    margin: 32px 0 36px;
    font-size: 60px;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  .page--about .about-vacancies {
    min-height: 0;
    padding: 40px 20px 60px;
  }

  .page--about .about-vacancies > header h2 {
    margin: 28px 0 30px;
    font-size: 48px;
  }

  .page--about .about-vacancies > header > a {
    width: 211px;
    height: 42px;
    grid-template-columns: 1fr 42px;
  }

  .page--about .about-vacancies__track {
    gap: 20px;
  }

  .page--about .about-vacancies__track > article {
    min-height: 560px;
    grid-template-rows: minmax(190px, auto) 70px 300px;
  }

  .page--about .about-vacancies__track h3 {
    min-height: 190px;
    padding: 20px;
    font-size: 24px;
    line-height: 1.1;
  }

  .page--about .about-vacancies .about-vacancy__salary {
    height: 70px;
    align-items: flex-end;
    padding: 0 20px 20px;
  }

  .page--about .about-vacancy__salary strong {
    font-size: 40px;
  }

  .page--about .about-vacancy__columns {
    min-height: 300px;
  }

  .page--about .about-vacancy__columns section {
    padding: 20px;
  }

  .page--about .about-vacancy__columns h4 {
    margin-bottom: 82px;
    font-size: 14px;
    line-height: 1;
  }

  .page--about .about-vacancy__columns p {
    font-size: 15px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page--about .about-vacancies > header h2 {
    font-size: 48px;
  }

  .page--about .about-vacancies > header > a {
    width: 211px;
    height: 42px;
    grid-template-columns: 1fr 42px;
  }

  .page--about .about-vacancies__track {
    grid-auto-columns: calc(100vw - 32px);
    gap: 16px;
  }

  .page--about .about-vacancies__track > article {
    min-height: 560px;
    grid-template-rows: minmax(190px, auto) 70px 300px;
  }

  .page--about .about-vacancies__track h3 {
    min-height: 190px;
    padding: 16px;
    font-size: 24px;
    line-height: 1.1;
  }

  .page--about .about-vacancies .about-vacancy__salary {
    height: 70px;
    align-items: flex-end;
    padding: 0 16px 16px;
  }

  .page--about .about-vacancy__salary strong {
    font-size: 40px;
  }

  .page--about .about-vacancy__columns {
    min-height: 300px;
  }

  .page--about .about-vacancy__columns section {
    padding: 16px;
  }

  .page--about .about-vacancy__columns h4 {
    margin-bottom: 82px;
    font-size: 14px;
    line-height: 1;
  }

  .page--about .about-vacancy__columns p {
    font-size: 15px;
  }
}

/* Landscape tablet widths keep the hero paragraph readable and inside its cell. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .page--home .hero__description,
  body.page--home:not(.is-loading) .hero__description {
    width: min(460px, calc(50vw - 80px)) !important;
    max-width: min(460px, calc(50vw - 80px)) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .page--about .about-vacancies {
    min-height: 0;
    padding: 8px 14px 40px;
  }

  .page--about .about-vacancies > header h2 {
    margin: 10px 0 28px;
    font-size: 24px;
    line-height: 1.1;
  }

  .page--about .about-vacancies__title-desktop {
    display: none;
  }

  .page--about .about-vacancies__title-tablet {
    display: inline;
  }

  .page--about .about-vacancies > header > a {
    width: 177px;
    height: 38px;
    grid-template-columns: 1fr 38px;
  }

  .page--about .about-vacancies__track {
    margin-top: 30px;
  }

  .page--about .about-vacancies__track > article {
    height: 632px;
    min-height: 632px;
    grid-template-rows: 140px 90px 402px;
    align-self: start;
  }

  .page--about .about-vacancies__track h3 {
    height: 140px;
    min-height: 140px;
    font-size: 20px;
    line-height: 1.1;
  }

  .page--about .about-vacancy__salary {
    height: 90px;
    padding: 19px 12px 0;
  }

  .page--about .about-vacancy__salary strong {
    font-size: 28px;
  }

  .page--about .about-vacancy__salary a {
    margin-top: 10px;
  }

  .page--about .about-vacancy__columns {
    height: 402px;
    min-height: 0;
  }

  .page--about .about-vacancy__columns section {
    height: 201px;
    min-height: 201px;
    padding: 12px;
  }

  .page--about .about-vacancy__columns h4 {
    margin-bottom: 35px;
  }

  .page--about .about-vacancy__columns p {
    line-height: 1.2;
  }
}

/* BIGFISH credit: replace the text mark with the uploaded logo while retaining
   the existing footer footprint and nofollow link. */
.page .footer__development.footer__development--bfd {
  display: flex;
  width: max-content;
  max-width: calc(100% - 40px);
  align-items: center;
  gap: 8px;
  text-align: left;
}

.footer__development-label {
  white-space: nowrap;
}

.footer__bfd-brand {
  display: block;
  width: 88px;
  line-height: 0;
}

.footer__bfd-brand img {
  display: block;
  width: 88px;
  height: auto;
}

.footer__bfd-brand {
  transition: opacity .2s ease;
}

.footer__bfd-brand:hover,
.footer__bfd-brand:focus-visible {
  opacity: .66;
}

@media (max-width: 767px) {
  .page .footer__development.footer__development--bfd {
    top: 66px;
    right: auto;
    bottom: auto;
    left: 14px;
    display: flex;
    max-width: calc(100% - 28px);
    align-items: center;
    gap: 6px;
  }

  .footer__bfd-brand,
  .footer__bfd-brand img {
    width: 70px;
  }
}

/* --------------------------------------------------------------------------
   Client acceptance pass — responsive behaviour verified against the
   1920 / 1440 / 768 / 390 Figma frames.
   -------------------------------------------------------------------------- */

.info-feed > .info-feed__image[hidden] {
  display: none !important;
}

/* Home: readable tablet copy, one centre rule and legible active icons. */
.page--home .hero__guides line {
  stroke: rgba(255, 255, 255, .3) !important;
}

.page--home .feature-card:is(:hover, :focus-within, .is-cell-hover-target, .is-active)
  .feature-card__icon-image {
  filter: brightness(0) invert(1);
}

@media (min-width: 1025px) {
  .page--home .about__cards > article:nth-of-type(2) {
    border-right: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page--home .hero__description,
  body.page--home:not(.is-loading) .hero__description {
    width: min(560px, calc(100% - 32px)) !important;
    max-width: none !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }
}

/* Archive headings remain a single composition on desktop/notebook widths. */
@media (min-width: 1025px) {
  .page--projects .projects-page__heading h1 {
    white-space: nowrap;
  }
}


/* Services use one physical centre rule for the head, every card row and the
   spacing before contacts. Separate borders drift by a pixel at browser zoom. */
.page--services:not(.page--service-detail) .services-page {
  position: relative;
}

.page--services:not(.page--service-detail) .services-page::before {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, .2);
  content: "";
  pointer-events: none;
}

.page--services:not(.page--service-detail) .services-page__head::after {
  display: none;
}

.page--services:not(.page--service-detail)
  .services-catalog__item:nth-of-type(odd) {
  border-right: 0 !important;
}

@media (max-width: 767px) {
  .page--services:not(.page--service-detail) .services-page::before {
    display: none;
  }
}

/* Project detail: reduce the tablet inter-section void and align table heads. */
.page--project-detail .project-works__head {
  box-sizing: border-box;
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page--project-detail .project-tasks {
    height: 648px;
  }

  .page--project-detail .project-tasks__viewport {
    bottom: 40px;
  }

  .page--project-detail .project-works {
    padding-top: 32px;
  }

  .page--project-detail .project-works > h2 {
    margin-top: 18px;
    margin-bottom: 30px;
  }

  .page--project-detail .project-works__head {
    grid-template-columns: 10% 50% 40%;
    padding-right: 16px;
    padding-left: 16px;
  }

  .page--project-detail .project-works li {
    grid-template-columns: 10% 50% 40%;
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Landscape tablets must use the static horizontal task rail as well. The
   desktop sticky travel created a large blank screen before the works block. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .page--project-detail .project-tasks {
    height: 648px;
    padding: 70px 16px 0;
    overflow: hidden;
  }

  .page--project-detail .project-tasks__sticky {
    position: relative;
    top: auto;
    height: 100%;
    padding-top: 0;
    overflow: visible;
  }

  .page--project-detail .project-tasks h2 {
    position: static;
    width: 100%;
    margin: 23px 0 0;
    font-size: 74px;
  }

  .page--project-detail .project-tasks__viewport {
    top: auto;
    right: -16px;
    bottom: 40px;
    left: -16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .page--project-detail .project-tasks__viewport::-webkit-scrollbar {
    display: none;
  }

  .page--project-detail .project-tasks__track {
    grid-auto-columns: 460px;
    gap: 16px;
    transform: none !important;
  }

  .page--project-detail .project-tasks__track article {
    min-width: 460px;
    height: 350px;
  }

  .page--project-detail .project-works {
    padding-top: 32px;
  }

  .page--project-detail .project-works > h2 {
    margin-top: 18px;
    margin-bottom: 30px;
  }

  .page--project-detail .project-works__head {
    grid-template-columns: 10% 50% 40%;
    padding-right: 16px;
    padding-left: 16px;
  }

  .page--project-detail .project-works li {
    grid-template-columns: 10% 50% 40%;
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* About cover: remove the raster logo's stray bottom pixel and protect the
   eyebrow/title baselines at notebook zoom levels. */
@media (min-width: 1025px) and (max-width: 1519px) {
  .page--about .site-header .brand {
    background:
      linear-gradient(#fff, #fff) center calc(min(3.75vw, 56px) - 2px) / 100% 4px no-repeat,
      #fff url("static/media/assets/design/logo-desktop@1x.png") center top / contain no-repeat !important;
    box-shadow: none;
  }
}

/* Give every direction its own deliberate scroll interval. The original
   70vh interval could cross several rows during one trackpad gesture while
   the 1.08s accordion animation was still running. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .page--about .about-directions.is-scroll-directions {
    height: 820vh !important;
  }

  .page--about .about-directions.is-scroll-directions .about-direction__content {
    transition-duration: .55s;
  }
}

/* R020: keep the authored directions geometry while restoring a gentle
   accordion reveal. Hover only arms the existing list interaction; it never
   switches the section into sticky/full-height mode. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .page--about .about-directions .about-direction__content {
    display: block !important;
    box-sizing: border-box;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition:
      max-height .72s cubic-bezier(.22, 1, .36, 1),
      padding-bottom .72s cubic-bezier(.22, 1, .36, 1),
      opacity .42s ease,
      transform .72s cubic-bezier(.22, 1, .36, 1);
  }

  .page--about .about-directions .about-direction.is-active .about-direction__content {
    max-height: 580px;
    padding-bottom: 20px;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1025px) and (max-width: 1599px) and (prefers-reduced-motion: no-preference) {
  .page--about .about-directions .about-direction.is-active .about-direction__content {
    max-height: 430px;
    padding-bottom: 14px;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  .page--about .about-hero h1 {
    bottom: clamp(4px, .65svh, 10px) !important;
    font-size: clamp(118px, 11vw, 176px) !important;
  }

  .page--about .about-hero__eyebrow {
    top: calc(80% + 8px) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) and (max-height: 760px) {
  .page--about .about-hero h1 {
    font-size: clamp(86px, 8.5vw, 112px) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) and (min-height: 761px) and (max-height: 1000px) {
  .page--about .about-hero h1 {
    font-size: min(11vw, max(96px, calc(23.9667svh - 65px))) !important;
  }
}

/* A single review still keeps both controls visible; disabled communicates
   the real state without making the interface look unfinished. */
.page--about .about-review-card > .review-card__switch,
.page--about .about-review-card > .about-review-card__switch {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  visibility: visible !important;
}

.page--about .about-review-card > :is(.review-card__switch, .about-review-card__switch) button,
.page--home .review-card__switch button {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  place-items: center;
}

.page--about .about-review-card > :is(.review-card__switch, .about-review-card__switch) button:disabled,
.page--home .review-card__switch button:disabled {
  background: rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .72) !important;
}

.page--about .about-review-card > :is(.review-card__switch, .about-review-card__switch) button:disabled svg,
.page--home .review-card__switch button:disabled svg {
  stroke: rgba(255, 255, 255, .72) !important;
}

@media (max-width: 767px) {
  .page--about .about-vacancies {
    margin-top: 52px;
  }
}

/* Info Center hover colors are drawn by the shared moving-mask renderer,
   not by an immediate .is-cell-hover-target or :hover state. */

.page--info-center .info-pagination {
  border-top: 1px solid #c1c1c1 !important;
}

/* Licences need the designed quiet row before the footer. */
.page--licenses .licenses-page {
  padding-bottom: clamp(52px, 6.25vw, 120px);
}

/* CMS article copy ends well before the fixed design canvas on desktop. Keep
   a single quiet row before related news instead of a 300–400px dead zone. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .page--article .article-layout {
    height: 4100px;
  }
}

@media (min-width: 1600px) {
  .page--article .article-layout {
    height: calc(137.2917vw + 2072px);
  }
}

/* The tablet result copy may land on a fractional pixel at its boundary;
   two safe pixels keep it wholly above the global contacts section. */
@media (min-width: 768px) and (max-width: 1024px) {
  .page--service-detail .service-result {
    min-height: calc(1000px + 2px);
  }
}

/* Contact fields stop before the cell edge, while remaining full length on
   the 390 frame. */
.page--contacts .contact-page-form {
  box-sizing: border-box;
}

.page--contacts .contact-page-form__field {
  width: 100%;
  max-width: 100%;
}

.page--contacts .contact-page-form__consent input[type="checkbox"]:checked {
  border-color: #17437b !important;
  background-color: #17437b !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.768555 3.58936L4.93522 8.58936L10.7686 0.589355' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
}

@media (max-width: 767px) {
  .page--contacts .contact-page-form {
    width: 100%;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}

/* Mobile articles use normal document flow: the title is a real header above
   the lead image and editor-length copy cannot create artificial voids. */
@media (max-width: 767px) {
  .page--article .article-sidebar {
    position: relative !important;
    display: block !important;
    padding: 59px 14px 0;
  }

  .page--article .article-sidebar__inner {
    display: block !important;
  }

  .page--article .article-breadcrumbs {
    position: static !important;
    width: 100%;
  }

  .page--article .article-title-sticky {
    position: static !important;
    width: 100%;
    height: auto !important;
    margin-top: 22px;
  }

  .page--article .article-copy {
    margin-top: 34px !important;
  }
}

/* Final notebook/tablet corrections: keep blue-form controls inside their
   grid cell, let vacancy copy define its row height, restore the complete
   About cover geometry and remove the artificial project-works void. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .contacts__feedback .contact-form__consent .wpcf7-list-item-label {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .page--about .about-vacancies__track > article {
    grid-template-rows: minmax(190px, auto) 70px minmax(300px, auto);
  }

}

@media (min-width: 768px) {
  .page--project-detail .project-works {
    min-height: 0;
    padding-bottom: clamp(120px, calc(8.333vw + 20px), 180px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page--about .about-hero__geometry-tablet {
    display: none !important;
  }

  .page--about .about-hero__geometry-mobile {
    display: block !important;
  }
}

@media (min-width: 1025px) and (max-width: 1100px) {
  .page--about .site-header .brand {
    box-shadow: inset 0 -14px #fff;
  }

  .page--about .site-header .brand::after {
    height: 51px;
  }
}

/* Contacts: the map follows the right grid cell instead of keeping a fixed
   700px width that was clipped between the notebook and 1440 breakpoints. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .page--contacts .contact-details__map {
    width: min(700px, calc(50vw - 20px));
  }
}

/* Project desktop: keep the sticky task rail, but size its stage by content
   so the Tasks -> Completed work gap matches the 1440/1920 Figma frames. */
@media (min-width: 1200px) {
  .page--project-detail .project-tasks {
    --project-tasks-card-height: min(400px, 42svh);
    --project-tasks-tail: clamp(34px, 3.3vw, 64px);
    --project-tasks-stage-height: min(
      100svh,
      calc(var(--project-tasks-cards-top) + var(--project-tasks-card-height) + var(--project-tasks-tail))
    );
  }

  .page--project-detail .project-tasks__track article {
    height: var(--project-tasks-card-height);
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .page--project-detail .project-tasks {
    --project-tasks-card-height: min(360px, 40svh);
  }
}

/* Projects archive: at wide desktop/zoom the first navigation cell starts
   exactly on the page's central 50vw guide instead of after a fixed spacer. */
@media (min-width: 1600px) {
  .page--projects .site-header .header__nav {
    grid-template-columns: calc(50vw - 350px) repeat(5, minmax(0, 1fr));
  }
}

/* About/service content-safety pass. These rules mirror the SCSS sources so
   WordPress receives the fixes without waiting for a rebuilt static bundle. */
.page--about .about-vacancies__track > article {
  height: auto !important;
  grid-template-rows: minmax(250px, auto) 92px minmax(310px, auto);
}

@media (min-width: 1024px) and (max-width: 1025px) {
  .page--about .about-vacancies__track > article {
    grid-template-rows: minmax(190px, auto) 70px minmax(300px, auto);
  }
}

@media (min-width: 1600px) {
  .page--about .about-hero h1 {
    bottom: clamp(4px, .65svh, 8px) !important;
    font-size: min(
      clamp(190px, 11.5vw, 220px),
      max(96px, calc(23.9667svh - 48.89px))
    ) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page--about .about-hero__tagline {
    bottom: 135px !important;
  }

  .page--about .about-vacancies__track > article {
    height: auto !important;
    grid-template-rows: minmax(190px, auto) 70px minmax(300px, auto);
  }

  .page--service-detail .service-result {
    height: 1018px;
    min-height: 1018px;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  .page--about .about-vacancies__track > article {
    height: auto !important;
    grid-template-rows: minmax(190px, auto) 70px minmax(300px, auto);
  }

  .page--service-detail .service-steps {
    height: auto !important;
    min-height: 0;
    padding-bottom: 32px;
  }
}

@media (min-width: 1600px) {
  .page--about .about-vacancies__track > article {
    height: auto !important;
    grid-template-rows: minmax(250px, auto) 92px minmax(310px, auto);
  }
}

@media (max-width: 767px) {
  .page--about .about-vacancies__track > article {
    height: auto !important;
    min-height: 632px;
    grid-template-rows: 140px 90px minmax(402px, auto);
  }

  .page--about .about-vacancy__columns {
    height: auto !important;
    min-height: 402px;
  }

  .page--about .about-vacancy__columns section {
    height: auto !important;
    min-height: 201px;
  }
}

/* Articles: preserve the approved lead-image anchors while allowing the CMS
   content itself to determine the section height at every tablet/desktop
   width. This prevents both an artificial tail and overlap with related news. */
@media (min-width: 768px) {
  .page--article .article-layout {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: clamp(40px, 3.25vw, 52px);
  }

  .page--article .article-breadcrumbs {
    top: 61px;
    left: 16px;
    gap: 7px;
    font-size: 14px;
  }

  .page--article .article-title-sticky {
    top: 84px;
    left: 16px;
    width: calc(100% - 32px);
    font-size: 50px;
    line-height: .91;
  }

  .page--article .article-copy {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    margin: 0 16px;
    padding-top: 220px;
    font-size: 14px;
    line-height: 1.18;
  }

  .page--article .article-copy__lead,
  .page--article .article-table-scroll,
  .page--article .article-section--quality,
  .page--article .article-section--condition,
  .page--article .article-section--reconstruction {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
  }

  .page--article .article-copy__lead {
    margin: 40px 0 0 !important;
  }

  .page--article .article-table-scroll {
    margin: 38px 0 0 !important;
  }

  .page--article .article-section--quality,
  .page--article .article-section--condition {
    margin: 41px 0 0 !important;
  }

  .page--article .article-copy__image--reconstruction {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: 460px !important;
    margin: 40px 0 0 !important;
  }

  .page--article .article-section--reconstruction {
    margin: 40px 0 0 !important;
  }

  .page--article .article-table {
    height: auto !important;
  }
}

@media (min-width: 1025px) {
  .page--article .article-breadcrumbs {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    font-size: clamp(16px, 1.0417vw, 20px);
  }

  .page--article .article-title-sticky {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    width: calc(100% - 40px);
    margin-top: 24px;
    font-size: 50px;
    line-height: .96;
  }

  .page--article .article-copy {
    margin: 0 20px 0 50%;
    padding-top: 121px;
    font-size: 16px;
    line-height: 1.15;
  }

  .page--article .article-copy__image--lead,
  .page--article .article-copy__image--reconstruction {
    height: 460px !important;
  }

  .page--article .article-copy__lead,
  .page--article .article-table-scroll,
  .page--article .article-copy__image--reconstruction,
  .page--article .article-section--reconstruction {
    margin-top: 45px !important;
  }

  .page--article .article-section--quality {
    margin-top: 55px !important;
  }

  .page--article .article-section--condition {
    margin-top: 58px !important;
  }
}

@media (min-width: 1600px) {
  .page--article .article-copy {
    padding-top: calc(6.25vw + 31px);
    font-size: 20px;
  }

  .page--article .article-copy__image--lead,
  .page--article .article-copy__image--reconstruction {
    height: calc(29.1667vw + 40px) !important;
  }

  .page--article .article-copy__lead,
  .page--article .article-table-scroll,
  .page--article .article-copy__image--reconstruction,
  .page--article .article-section--reconstruction {
    margin-top: calc(2.5vw + 9px) !important;
  }

  .page--article .article-section--quality {
    margin-top: calc(3.125vw + 10px) !important;
  }

  .page--article .article-section--condition {
    margin-top: calc(3.3333vw + 10px) !important;
  }
}

/* V3.2: restore the mobile project-result rhythm from the approved 390px
   frame. The acceptance override had pulled both the note and CTA upward. */
@media (max-width: 767px) {
  .page--project-detail .project-result__cta {
    padding-top: 84px !important;
  }

  .page--project-detail .project-result__cta > p {
    margin-bottom: 18px !important;
  }
}

/* V3.2: keep the Info Center heading and tabs in separate rows at the
   notebook breakpoint, and size pagination from real pages only. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .info-intro {
    min-height: 190px;
  }
}

.page--info-center .info-pagination.info-pagination--pages-1 {
  grid-template-columns: 2fr 4fr 2fr;
}

.page--info-center .info-pagination.info-pagination--pages-2 {
  grid-template-columns: repeat(4, 2fr);
}

.page--info-center .info-pagination.info-pagination--pages-3 {
  grid-template-columns: 2fr repeat(3, 1.3333fr) 2fr;
}

.page--info-center .info-pagination.info-pagination--pages-4 {
  grid-template-columns: 2fr repeat(4, 1fr) 2fr;
}

.page--info-center .info-center-page .info-pagination[class*="info-pagination--pages-"] > * {
  display: flex !important;
}

.info-pagination > [hidden] {
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .info-pagination__desktop {
    display: flex;
  }
}

@media (max-width: 767px) {
  .info-pagination__desktop {
    display: flex;
  }
}

/* V3.2: optional review logos, centered review geometry and success state,
   plus the approved Home interaction/spacing corrections. */
.page--home .review-card__logo {
  width: clamp(150px, 13.1771vw, 253px);
  height: clamp(25px, 2.1875vw, 42px);
  flex: 0 0 auto;
}

.page--home .review-card__logo[hidden] {
  display: none !important;
}

.page--home .review-card__logo :is(picture, img) {
  width: 100%;
  height: 100%;
}

.page--home .review-card__logo img {
  object-fit: contain;
  opacity: .1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page.page--home .reviews,
  .page.page--about .reviews {
    --review-card-width: min(648px, calc(100% - 120px)) !important;
    --review-card-left: calc(50% - (var(--review-card-width) / 2)) !important;
  }
}

.contact-modal.is-success .perspektiva-form-success {
  display: grid;
  width: min(100%, 620px);
  max-width: 620px;
  justify-items: center;
  margin: 0 auto;
  text-align: center;
}

.contact-modal.is-success .perspektiva-form-success strong,
.contact-modal.is-success .perspektiva-form-success p {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.contact-modal.is-success .perspektiva-form-success p {
  max-width: 560px;
}

@media (min-width: 1025px) {
  .page--home .about__lead > p {
    transform: translateY(-8px);
  }

  .page--home .about__cards > .feature-card:nth-of-type(2) {
    border-right: 0 !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .page--home .about__cards > .cell-hover-indicator {
    display: none !important;
  }

  .page--home .about__cards .feature-card,
  .page--home .about__cards .feature-card:is(:hover, :active, :focus, :focus-within),
  .page--home .about__cards .feature-card.is-cell-hover-target,
  #about .about__cards .feature-card.feature-card--blue {
    background-color: transparent !important;
    color: #000 !important;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent;
    cursor: default;
    transition: none !important;
  }

  .page--home .about__cards .feature-card .feature-card__icon,
  .page--home .about__cards .feature-card:is(:hover, :active, :focus, :focus-within) .feature-card__icon,
  .page--home .about__cards .feature-card.is-cell-hover-target .feature-card__icon {
    color: #000 !important;
    transform: translateX(-50%) !important;
    transition: none !important;
  }

  .page--home .about__cards .feature-card .feature-card__icon-image,
  .page--home .about__cards .feature-card:is(:hover, :active, :focus, :focus-within) .feature-card__icon-image,
  .page--home .about__cards .feature-card.is-cell-hover-target .feature-card__icon-image {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .page--home .about__cards .feature-card p,
  .page--home .about__cards .feature-card.is-cell-hover-target p {
    color: #666 !important;
    opacity: 1 !important;
  }
}

/* V3.2 About hotfix layer. Selectors are deliberately stronger than the
   compiled static stylesheet, which WordPress prints later in the document. */
@media (min-width: 1025px) and (max-width: 1519px) {
  .page.page--about .site-header > .brand,
  html body.page.page--about .site-header .brand,
  html body .page.page--about .site-header .brand {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    background: #fff url("/wp-content/themes/perspektiva/static/media/assets/design/logo-desktop@1x.png") left top / contain no-repeat !important;
    box-shadow: none !important;
  }

  .page.page--about .site-header > .brand::before,
  html body.page.page--about .site-header .brand::before,
  html body .page.page--about .site-header .brand::before {
    position: absolute !important;
    z-index: 1 !important;
    top: calc(min(calc(min(12.5vw, 190px) * 56 / 190), calc(100% - 1px)) - 1px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    height: auto !important;
    background: #fff !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .page.page--about .site-header > .brand::after,
  html body.page.page--about .site-header .brand::after,
  html body .page.page--about .site-header .brand::after {
    z-index: 2 !important;
    top: 0 !important;
    bottom: auto !important;
    height: 100% !important;
  }
}

@media (min-width: 1025px) and (max-width: 1519px) {
  html body:is(.page--services, .page--projects) .site-header .brand {
    overflow: hidden !important;
  }

  html body:is(.page--services, .page--projects) .site-header .brand::before {
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 190 / 57 !important;
    background-position: left top !important;
    background-size: 100% 100% !important;
    clip-path: inset(0 0 2px 0) !important;
  }

  html body:is(.page--services, .page--projects) .site-header .brand::after {
    right: 0 !important;
    bottom: auto !important;
    height: 100% !important;
  }
}

html body.page.page--about .reviews .review-card,
html body .page.page--about .reviews .review-card {
  left: var(--review-card-left) !important;
  transform: none !important;
}

html body.page.page--about .reviews .review-card__logo,
html body .page.page--about .reviews .review-card__logo {
  display: block;
  flex: 0 0 auto;
  margin-left: auto;
}

html body.page.page--about .reviews .review-card__logo[hidden],
html body .page.page--about .reviews .review-card__logo[hidden] {
  display: none !important;
}

html body.page.page--about .reviews .review-card__logo img,
html body .page.page--about .reviews .review-card__logo img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

html body.page.page--about .about-vacancies__track,
html body .page.page--about .about-vacancies__track {
  align-items: stretch !important;
}

html body.page.page--about .about-vacancies__track > article,
html body .page.page--about .about-vacancies__track > article {
  height: var(--about-vacancy-card-height, auto) !important;
  align-self: stretch !important;
}

html body.page.page--about .about-vacancies > header > a b,
html body .page.page--about .about-vacancies > header > a b {
  font-size: 26px !important;
  line-height: 1 !important;
}

@media (max-width: 1599px) {
  html body.page.page--about .about-vacancies > header > a b,
  html body .page.page--about .about-vacancies > header > a b {
    font-size: 22px !important;
  }
}

@media (min-width: 1025px) {
  html body.page.page--about .equipment-list .is-active button,
  html body .page.page--about .equipment-list .is-active button {
    grid-template-columns: 1fr 34px !important;
  }

  html body.page.page--about .equipment-list .is-active button::after,
  html body .page.page--about .equipment-list .is-active button::after {
    display: none !important;
  }

html body.page.page--about .equipment-list .is-active button i,
  html body .page.page--about .equipment-list .is-active button i {
    order: initial !important;
    justify-self: end !important;
    color: currentColor !important;
    transition: none !important;
  }
}

/* V3.3 final responsive corrections. */
@media (max-width: 767px) {
  html body.page.page--about .site-header {
    grid-template-columns: 1fr 1fr !important;
  }

  html body.page.page--about .site-header .brand,
  html body .page.page--about .site-header .brand {
    width: 100% !important;
    overflow: hidden !important;
    background-position: left top !important;
    background-size: auto calc(100% + 2px) !important;
  }

  html body.page.page--about .site-header .header__menu,
  html body .page.page--about .site-header .header__menu {
    width: 100% !important;
  }

  html body.page.page--about .about-vacancies__track,
  html body .page.page--about .about-vacancies__track {
    grid-auto-columns: calc(100vw - 28px) !important;
    gap: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body.page.page--about .site-header .brand,
  html body .page.page--about .site-header .brand {
    overflow: hidden !important;
    background-position: left top !important;
    background-size: auto calc(100% + 2px) !important;
  }

  :is(html body.page.page--home, html body.page.page--about) .reviews__grid::after,
  html body :is(.page.page--home, .page.page--about) .reviews__grid::after {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 1px !important;
    background: rgba(255, 255, 255, .4) !important;
    content: "" !important;
  }
}

html body.page.page--about .site-header .brand::after,
html body .page.page--about .site-header .brand::after {
  right: 0 !important;
  bottom: auto !important;
  height: 100% !important;
}

.reviews[aria-busy="true"] .review-card__switch button {
  pointer-events: none !important;
}

.review-lightbox .license-lightbox__guides::after {
  right: auto !important;
  left: calc(50% + var(--license-lightbox-width) / 2) !important;
}

@media (max-width: 767px) {
  html body.page.page--project-detail .project-result,
  html body .page.page--project-detail .project-result {
    height: auto !important;
    min-height: 480px !important;
  }
}

@media (max-width: 380px) {
  html body.page.page--project-detail .project-result__lead,
  html body .page.page--project-detail .project-result__lead {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  html body.page.page--project-detail .project-result__cta,
  html body .page.page--project-detail .project-result__cta {
    padding-top: 96px !important;
  }
}

.contact-modal.is-success .perspektiva-form-host--modal {
  animation: perspectiva-success-fade-in .34s ease both;
}

@keyframes perspectiva-success-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal.is-success .perspektiva-form-host--modal {
    animation: none;
  }
}

/* R017 final cascade override: keep the compact laptop logo inside its cell. */
@media (min-width: 1025px) and (max-width: 1599px) {
  html body.page .site-header a.brand.brand.brand::before {
    top: 50% !important;
    left: 12px !important;
    width: min(150px, calc(100% - 24px)) !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    background-position: left center !important;
  }
}

/* R016: project-detail header/logo and About team hover correction. */
html body.page.page--project-detail .site-header a.brand.brand.brand::before {
  top: 50% !important;
  left: 50% !important;
  width: 150px !important;
  height: 28px !important;
  transform: translate(-50%, -50%) !important;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
}

html body.page.page--project-detail .site-header .header__nav {
  background: transparent !important;
  transition: background-color .25s ease !important;
}

html body.page.page--project-detail .site-header {
  background: transparent !important;
  transition: background-color .25s ease !important;
}

html body.page.page--project-detail .site-header.is-scrolled,
html body.page.page--project-detail .site-header.is-scrolled .header__nav {
  background: #17437b !important;
}

@media (min-width: 1025px) {
  html body.page.page--about .about-team__track.is-cell-hover-enhanced article {
    transition: background-color .55s cubic-bezier(.22,1,.36,1), color .45s ease;
  }
  html body.page.page--about .about-team__track.is-cell-hover-enhanced article.is-team-expanded {
    background-color: #17437b;
  }
}

@media (max-width: 767px) {
  html body.page.page--project-detail .site-header a.brand.brand.brand::before {
    top: 10px !important;
    left: 12px !important;
    width: 130px !important;
    height: 24.27px !important;
    transform: none !important;
  }
}

/* R017: responsive header clearance, compact laptop logo containment and
   mobile laboratory rhythm correction. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page.page--about .about-directions,
  html body.page.page--about .about-history {
    scroll-margin-top: 57px;
  }

  html body.page.page--about .about-directions {
    padding-top: 127px !important;
  }

  html body.page.page--about .about-history {
    padding-top: 122px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  html body.page .site-header a.brand.brand.brand::before {
    top: 50% !important;
    left: 12px !important;
    width: min(150px, calc(100% - 24px)) !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    background-position: left center !important;
  }
}

@media (max-width: 767px) {
  html body.page.page--about .about-laboratory:nth-child(2) {
    padding-top: 36px !important;
  }
}

/* R015: transparent full-height History hover zone at the right edge. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  html body.page.page--about .about-history__scroll-zone {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 50%;
    width: clamp(100px, 8vw, 150px);
    height: 100%;
    pointer-events: auto;
  }
}

/* R018 follow-up: the history remains a normal-height section; the transparent
   area only arms wheel navigation and must never block year-button clicks. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  html body.page.page--about .about-history__scroll-zone {
    pointer-events: none !important;
  }
  html body.page.page--about .about-history__years {
    z-index: 5 !important;
  }
}

/* R018: the card already owns its outer edge; keep only the internal column
   divider so the vacancies grid does not render a doubled right-hand line. */
@media (min-width: 768px) {
  html body.page.page--about .about-vacancy__columns section:last-child {
    border-right: 0 !important;
  }
}

/* Keep the History composition at its authored desktop geometry when the
   sticky sequence is armed. The original vh overrides made the image and
   year rail shrink as soon as the pointer entered the zone. */
@media (min-width: 1600px) and (prefers-reduced-motion: no-preference) {
  html body.page.page--about .about-history.is-scroll-history .about-history__stage {
    top: var(--history-entry-top, 0px) !important;
    height: 1080px !important;
    padding: 80px 20px 0 !important;
  }
  html body.page.page--about .about-history.is-scroll-history h2 {
    margin-top: 33px !important;
    font-size: 64px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__media {
    top: auto !important;
    bottom: 80px !important;
    height: 778px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__years {
    top: 224px !important;
    height: 516px !important;
    padding-right: 111px !important;
    font-size: 20px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy {
    top: 463px !important;
    width: calc(33.7% - 40px);
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy p {
    font-size: 16px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy strong {
    font-size: 26px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience {
    bottom: 96px !important;
    gap: 20px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience strong {
    font-size: 110px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience span {
    font-size: 14px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__skip {
    right: 20px !important;
    bottom: 20px !important;
    font-size: 16px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) and (prefers-reduced-motion: no-preference) {
  html body.page.page--about .about-history.is-scroll-history .about-history__stage {
    top: var(--history-entry-top, 0px) !important;
    height: 900px !important;
    padding: 58px 20px 0 !important;
  }
  html body.page.page--about .about-history.is-scroll-history h2 {
    margin-top: 29px !important;
    font-size: 46px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__media {
    top: auto !important;
    right: auto !important;
    bottom: 61px !important;
    left: 20px !important;
    width: calc(47.4% - 20px);
    height: 663px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__years {
    top: 176px !important;
    height: 406px !important;
    padding-right: 80px !important;
    font-size: 15px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy {
    top: 375px !important;
    width: calc(33.75% - 40px);
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy p {
    font-size: 12px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__copy strong {
    font-size: 20px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience {
    bottom: 62px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience strong {
    font-size: 84px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__experience span {
    font-size: 14px !important;
  }
  html body.page.page--about .about-history.is-scroll-history .about-history__skip {
    right: 20px !important;
    bottom: 14px !important;
    font-size: 12px !important;
  }
}

/* Final global header raster repair. The clean filename bypasses the one-year
   cache of the defective PNG; every logo layer is now contained by its cell. */
:is(html body.page, html body .page) .site-header .brand {
  position: relative !important;
  overflow: hidden !important;
}

:is(html body.page.page--home, html body.page.page--about) .site-header .brand,
html body :is(.page.page--home, .page.page--about) .site-header .brand {
  background-image: url("/wp-content/themes/perspektiva/static/media/assets/design/logo-desktop-clean@1x.png") !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

:is(html body.page.page--home, html body.page.page--about) .site-header .brand::before,
html body :is(.page.page--home, .page.page--about) .site-header .brand::before {
  display: none !important;
  background: none !important;
  content: none !important;
}

:is(
  html body.page:not(.page--home):not(.page--about),
  html body .page:not(.page--home):not(.page--about)
) .site-header .brand::before {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("/wp-content/themes/perspektiva/static/media/assets/design/logo-desktop-clean@1x.png") !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  clip-path: none !important;
  content: "" !important;
}

:is(html body.page, html body .page) .site-header .brand::after {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 1px !important;
  height: 100% !important;
}

@media (max-width: 767px) {
  :is(html body.page.page--home, html body.page.page--about) .site-header .brand,
  html body :is(.page.page--home, .page.page--about) .site-header .brand {
    background-image: url("/wp-content/themes/perspektiva/static/media/assets/design/logo-mobile-clean@1x.png") !important;
  }

  :is(
    html body.page:not(.page--home):not(.page--about),
    html body .page:not(.page--home):not(.page--about)
  ) .site-header .brand::before {
    background-image: url("/wp-content/themes/perspektiva/static/media/assets/design/logo-mobile-clean@1x.png") !important;
  }

  html body.page.page--about .about-directions__heading h2,
  html body .page.page--about .about-directions__heading h2 {
    font-size: clamp(28px, 8.72vw, 34px) !important;
  }
}

:is(html body.page.page--home, html body.page.page--about) .reviews .review-card__body,
html body :is(.page.page--home, .page.page--about) .reviews .review-card__body {
  justify-content: space-between !important;
}

@media (min-width: 768px) {
  :is(html body.page.page--home, html body.page.page--about) .reviews .review-card__header time,
  html body :is(.page.page--home, .page.page--about) .reviews .review-card__header time {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
}

/* Mobile Service Result follows its own 390 Figma frame. The visually similar
   Project Result is a different component and intentionally has no media. */
@media (max-width: 767px) {
  html body.page.page--service-detail .service-result,
  html body .page.page--service-detail .service-result {
    height: auto;
    min-height: 800px !important;
    padding: 0 14px 14px !important;
  }

  html body.page.page--service-detail .service-result h2,
  html body .page.page--service-detail .service-result h2 {
    flex: none !important;
    height: 55px !important;
    padding: 12px 0 0 !important;
    font-size: 43px !important;
    line-height: 1 !important;
  }

  html body.page.page--service-detail .service-result__lead,
  html body .page.page--service-detail .service-result__lead {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 44px 0 12px !important;
    font-size: 21px !important;
    line-height: 1.04 !important;
  }

  html body.page.page--service-detail .service-result__media,
  html body .page.page--service-detail .service-result__media {
    flex: none !important;
    width: 100% !important;
    height: 340px !important;
    margin-top: 10px !important;
  }

  html body.page.page--service-detail .service-result__note,
  html body .page.page--service-detail .service-result__note {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 14px !important;
    padding: 52px 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .18) !important;
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  html body.page.page--service-detail .service-result__button,
  html body .page.page--service-detail .service-result__button {
    flex: none !important;
    width: 177px !important;
    min-width: 177px !important;
    height: 39px !important;
    grid-template-columns: 1fr 38px !important;
    margin: 25px 0 0 !important;
  }
}

/* Article chapter divider: preserve the line and match the approved spacing
   on both sides at tablet, desktop and browser-zoom widths. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page.page--article .article-section--quality {
    padding-bottom: 36px !important;
  }

  html body.page.page--article .article-section--condition {
    margin-top: 0 !important;
  }
}

@media (min-width: 1025px) {
  html body.page.page--article .article-section--quality {
    padding-bottom: clamp(40px, calc(2.0833vw + 10px), 50px) !important;
  }

  html body.page.page--article .article-section--condition {
    margin-top: 0 !important;
  }
}

/* R008: keep the current top-level route selected at rest while preserving
   the existing shared hover/focus indicator for temporary navigation. */
@media (min-width: 1025px) {
  html body.page .site-header .header__nav--moving-hover {
    --cell-hover-color: #17437b;
  }

  html body.page .site-header .header__nav--moving-hover.is-cell-hover-enhanced > a:hover,
  html body.page .site-header .header__nav--moving-hover.is-cell-hover-enhanced > a:focus-visible,
  html body.page .site-header .header__nav--moving-hover > a.is-cell-hover-target {
    background: transparent !important;
    opacity: 1 !important;
  }

  html body.page .site-header .header__nav--moving-hover > a.is-cell-hover-target {
    color: #fff !important;
  }

  html body.page.page--about .site-header .header__nav--moving-hover > .cell-hover-indicator {
    background: #fff !important;
  }

  html body.page.page--about .site-header .header__nav--moving-hover > a.is-cell-hover-target {
    color: #000 !important;
  }
}

/* R010: the home header uses a white surface, so its temporary hover/focus
   target must stay dark. Geometry corrections are intentionally home-only. */
@media (width >= 1025px) {
  html body.page.page--home .site-header .header__nav--moving-hover > a.is-cell-hover-target {
    color: #000 !important;
  }

  html body.page.page--home .hero__stat strong {
    transform-origin: 0 0;
    transform: translate(0, -2px) scaleX(1.041);
  }

  html body.page.page--home .projects__intro {
    padding-bottom: 40px;
  }
}

@media (width >= 1600px) {
  html body.page.page--home .hero__stat:first-child span {
    transform-origin: 0;
    transform: translate(0) scaleX(.978);
  }
}

@media (width >= 768px) and (width <= 1024px) {
  html body.page.page--home .projects__intro {
    padding-bottom: 16px;
  }
}

@media (width <= 767px) {
  html body.page.page--home .hero__stat:first-child span {
    transform-origin: 0 0;
    transform: translate(1.5px, 4px) scale(.962, .91);
  }

  html body.page.page--home .projects__intro {
    padding-bottom: 12px;
  }
}

/* R013: the original Figma SVG exports own the visible header/footer marks. */
html body.page .site-header a.brand.brand.brand {
  background-image: none !important;
}

html body.page .site-header a.brand.brand.brand::before {
  position: absolute !important;
  inset: 14px auto auto 20px !important;
  display: block !important;
  width: 150px !important;
  height: 28px !important;
  background-color: transparent !important;
  background-image: url("/wp-content/themes/perspektiva/static/media/assets/design/perspektiva-header-logo.svg") !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  clip-path: none !important;
  content: "" !important;
  filter: invert(1) !important;
}

html body.page:is(.page--home, .page--about) .site-header a.brand.brand.brand::before {
  filter: none !important;
}

@media (max-width: 767px) {
  html body.page .site-header a.brand.brand.brand::before {
    inset: 10px auto auto 12px !important;
    width: 130px !important;
    height: 24.27px !important;
  }
}

html body.page .footer__logo {
  background: url("/wp-content/themes/perspektiva/static/media/assets/design/perspektiva-footer-logo.svg") left center / contain no-repeat !important;
}

html body.page .footer__logo picture {
  display: none !important;
}

/* R012: the production header remains available while scrolling. The About
   header keeps its transparent hero state and gains contrast after page top. */
html {
  scroll-padding-top: 57px;
}

html:has(body.admin-bar) {
  scroll-padding-top: 89px;
}

html body.page .site-header {
  position: fixed;
}

html body.page.page--about .site-header {
  transition: background-color .2s ease;
}

html body.page.page--about .site-header.is-scrolled {
  background: #17437b !important;
}

@media (width >= 1600px) {
  html body.page.page--home .hero__stat:nth-child(1) span {
    transform-origin: 0;
    transform: translate(8px) scaleX(.978);
  }

  html body.page.page--home .hero__stat:nth-child(2) span {
    transform-origin: 0;
    transform: translate(8px) scaleX(.968);
  }
}

@media (width >= 1025px) and (width <= 1599px) {
  html body.page.page--home .hero__stat:nth-child(1) span {
    transform-origin: 0;
    transform: translate(clamp(5px, calc(.241vw + 2.53px), 6px), -2px) scaleX(1.08);
  }

  html body.page.page--home .hero__stat:nth-child(2) span {
    transform-origin: 0;
    transform: translate(clamp(5px, calc(.241vw + 2.53px), 6px), -2px) scaleX(.968);
  }
}

@media screen and (max-width: 782px) {
  html:has(body.admin-bar) {
    scroll-padding-top: 103px;
  }
}

@media (width <= 767px) {
  html {
    scroll-padding-top: 45px;
  }

  html:has(body.admin-bar) {
    scroll-padding-top: 91px;
  }

  html body.page.page--about .site-header {
    min-height: 45px !important;
    height: 45px !important;
  }
}

/* V3: laboratory sheets should end at their caption on touch widths. */
@media (width <= 767px) {
  html body.page.page--about .about-laboratory {
    height: auto !important;
  }
}

/* V3: respect reduced-motion preferences for the team hover overlay. */
@media (prefers-reduced-motion: reduce) {
  html body.page.page--about .about-team__track article,
  html body.page.page--about .about-team__track article::after,
  html body.page.page--about .about-team__track article > picture > img,
  html body.page.page--about .about-team__track article > div,
  html body.page.page--about .about-team__track article h3,
  html body.page.page--about .about-team__track article strong {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* R017 final cascade override: keep the compact laptop logo inside its cell. */
@media (min-width: 1025px) and (max-width: 1599px) {
  html body.page .site-header a.brand.brand.brand::before {
    top: 50% !important;
    left: 12px !important;
    width: min(150px, calc(100% - 24px)) !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    background-position: left center !important;
  }
}

@media (min-width: 1025px) {
  .page--project-detail .project-tasks__track article:first-child { padding-left: 48px; }
}

@media (min-width: 1025px) {
  .page--project-detail .project-result { height: auto; grid-template-rows: auto minmax(190px, auto); }
  .page--project-detail .project-result h2 { padding-bottom: 44px; }
}

/* R019: fluid History columns share the same available width. */
@media (min-width: 1025px) {
  html body.page.page--about .about-history .about-history__media {
    width: calc(47.4% - 20px);
  }
  html body.page.page--about .about-history .about-history__copy {
    width: calc(33.7% - 40px);
    min-width: 0;
    overflow-wrap: break-word;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page.page--about .about-history .about-history__copy {
    width: calc(100% - 32px);
  }
}
@media (max-width: 767px) {
  html body.page.page--about .about-history .about-history__copy,
  html body.page.page--about .about-history h2 {
    max-width: calc(100% - 28px);
  }
}

/* Service catalog: overlay shares the exact typography geometry of its
   unchanged foreground, without participating in grid layout. */
.page--services .services-catalog__item > .services-catalog__copy {
  position: relative;
  isolation: isolate;
}
.page--services .services-catalog__copy > .services-catalog__color-reveal {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:20px 20px 13px; box-sizing:border-box; background:transparent;
  border-right:0; color:#f4f4f3;
  pointer-events:none; user-select:none; z-index:4; overflow:hidden;
  clip-path:inset(0 100% 0 0);
}
.page--services .services-catalog__color-reveal :is(.services-catalog__number,.services-catalog__text h2,.services-catalog__text p,.services-catalog__link),
.page--services .services-catalog__color-reveal .services-catalog__link-arrow {
  color:#f4f4f3;
}
.page--services .services-catalog__color-reveal svg { color:#f4f4f3; stroke:currentColor; }
/* The catalog line-reveal owns the copy/media divider; no second copy line. */

@media (max-width: 1024px) {
  .page--services .services-catalog__copy > .services-catalog__color-reveal { display: none; }
}

/* Service grid hairlines appear white only underneath the moving blue surface. */
.page--services .services-catalog__item > .services-catalog__line-reveal {
    position: absolute;
    /* Extend over the original 1px outer borders, not beside them. */
    inset: 0 -1px -1px 0;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-right: 1px solid #f4f4f3;
    border-bottom: 1px solid #f4f4f3;
    clip-path: inset(0 100% 0 0);
}
.page--services .services-catalog__item > .services-catalog__line-reveal::before {
    content:"";
    position:absolute;
    left:calc(var(--perspektiva-copy-seam,50%) - 1px);
    top:0;
    bottom:0;
    width:1px;
    background:#f4f4f3;
}
@media (max-width: 1024px), (hover: none) {
    .page--services .services-catalog > .cell-hover-indicator,
    .page--services .services-catalog__item > .services-catalog__line-reveal {
        display: none;
    }
}

/* Project overview: one blue indicator, one precisely clipped light foreground.
   The copied text occupies the unchanged four-column grid, while the picture
   remains the original clickable image, with no duplicate media nodes. */
@media (min-width: 1025px) and (hover: hover) {
  .page--projects .projects-list > .project-row > .project-row__reveal {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: calc(100% + 1px);
    display: grid;
    grid-template-columns: inherit;
    grid-template-rows: inherit;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-top: 1px solid #f4f4f3;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    clip-path: inset(0 100% 0 0);
    overflow: hidden;
    color: #f4f4f3;
  }
  .page--projects .projects-list .project-row__reveal :is(
    h2, h2 span, .project-row__location, .project-row__location span,
    .project-row__meta dt, .project-row__meta dd, .project-row__meta dd span,
    .project-row__more, .project-row__more span
  ) { color: #f4f4f3; }
  .page--projects .projects-list .project-row__reveal .project-row__meta dt {
    color: rgba(244, 244, 243, .74);
  }
  .page--projects .projects-list .project-row__reveal > .project-row__image {
    visibility: hidden;
  }
  .page--projects .projects-list .project-row__reveal > .project-row__reveal-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #f4f4f3;
    pointer-events: none;
    z-index: 6;
  }
}
@media (max-width: 1024px), (hover: none) {
  .page--projects .projects-list > .project-row > .project-row__reveal {
    display: none;
  }
}

@media (max-width: 1024px), (hover: none) {
  .page--projects .projects-list > .cell-hover-indicator { display: none; }
}

/* Review carousel: same single bottom hairline in every enabled/disabled state. */
.page--about :is(.review-card__switch,.about-review-card__switch),
.page--home .review-card__switch {
  border-bottom:1px solid rgba(255,255,255,.6);
}
.page--about :is(.review-card__switch,.about-review-card__switch) > button,
.page--home .review-card__switch > button {
  border-bottom:0;
}