/*
 * GP-WRAP – static stylesheet.
 * Port of the WordPress theme "roube-classic" (css/style.css), the Bootstrap 4.0 rules
 * the theme relied on, and the colours the ACF fields wrote inline per section.
 */

/* ---------- fonts (self-hosted, from the theme) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- base (Bootstrap reboot subset + theme) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  background-color: #231f20;
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

p,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

img,
video,
svg {
  vertical-align: middle;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

a {
  color: #ccc;
  background-color: transparent;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 15px;
  top: -100px;
  z-index: 10000;
  padding: 10px 16px;
  background: #fff;
  color: #231f20;
  font-weight: 600;
}

.skip-link:focus {
  top: 15px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- grid (Bootstrap 4 subset, theme widths) ---------- */
.container {
  width: 100%;
  max-width: 1400px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-12,
.col-md-3,
.col-md-6,
.col-md-12,
.col-lg-4,
.col-lg-8 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 20%; /* "Simple Custom CSS" override: five service columns per row */
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

.p-null {
  padding: 0;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.anchor {
  display: block;
  position: relative;
  top: -30px;
  visibility: hidden;
}

/* ---------- header bar ---------- */
.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

.navbar.top-nav-collapse {
  background-color: #231f20;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.45);
}

.logo a img {
  width: 200px;
  transition: all 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
}

.top-nav-collapse .logo a img {
  width: 130px;
}

.new-menu {
  line-height: 1;
}

.new-menu button:hover {
  opacity: 0.8;
}

.page-wrap {
  position: relative;
  z-index: 9;
  margin: 0 auto;
  padding: 0;
}

/* ---------- full-screen menu ---------- */
.big-menu-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #231f20;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.big-menu-wrap.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

.big-menu-wrap .menu-close-img button {
  position: absolute;
  z-index: 9;
  left: 50px;
  top: 50px;
  width: 44px;
  height: 44px;
  margin: -10px;
  padding: 10px;
}

.big-menu-wrap .menu-close-img button:hover {
  opacity: 0.7;
}

.big-menu-wrap .verticalbar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 1px;
  min-height: 100%;
  margin: 0 auto;
  background-color: #4c4c4c;
}

/* main sections left of the centre line, all sub pages right of it */
.big-menu-wrap .menu-animate {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 110px 30px 40px;
}

.big-menu-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.big-menu-wrap .menu-main {
  text-align: right;
}

.big-menu-wrap .menu-main a {
  display: inline-block;
  padding: 2px 0;
  font-size: min(72px, 8.5vh);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #231f20;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}

.big-menu-wrap .menu-main a.active,
.big-menu-wrap .menu-main a[aria-current="page"],
.big-menu-wrap .menu-main a:hover,
.big-menu-wrap .menu-main a:focus-visible {
  color: #fff;
}

.big-menu-wrap .menu-sub-title {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #8a8a8a;
}

.big-menu-wrap .menu-sub ul {
  margin-bottom: 34px;
}

.big-menu-wrap .menu-sub ul:last-child {
  margin-bottom: 0;
}

.big-menu-wrap .menu-sub a {
  display: inline-block;
  padding: 5px 0;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c8c8c8;
}

.big-menu-wrap .menu-sub a:hover,
.big-menu-wrap .menu-sub a:focus-visible,
.big-menu-wrap .menu-sub a[aria-current="page"] {
  color: #fff;
}

.big-menu-wrap .menu-sub a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.big-menu-wrap .bottom-text {
  position: relative;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1810px;
  margin: 0 auto;
  padding: 15px 30px 40px;
  font-size: 18px;
  letter-spacing: 0.61px;
  color: #c8c8c8;
}

.big-menu-wrap .bottom-text a {
  color: #b2b2b2;
}

.big-menu-wrap .bottom-text a:hover {
  opacity: 0.7;
}

.big-menu-wrap .left-part a {
  margin-right: 60px;
}

.big-menu-wrap .right-part a {
  margin-left: 60px;
}

body.menu-open {
  overflow: hidden;
}

/* the menu lives inside .page-wrap (z-index 9), so the fixed contact bar would cover it */
body.menu-open .contact-bar {
  display: none;
}

/* ---------- hero ---------- */
.home-header {
  position: relative;
}

.home-header .slider-wrap {
  position: relative;
  height: 100%;
}

.home-header .slider-item {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.home-header .video-wrap video {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.home-header .overlay-bg {
  position: absolute;
  z-index: 9;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.23);
}

.home-header .slider-br-nav {
  position: absolute;
  z-index: 9;
  right: 30px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.home-header .slider-br-nav .current-br {
  font-size: 29px;
}

.home-header .slider-br-nav .line {
  display: inline-block;
  width: 36px;
  height: 1px;
  margin: 0 5px;
  background-color: #fff;
  opacity: 0.3;
}

.home-header .slider-br-nav .total-br {
  font-size: 17px;
  opacity: 0.5;
}

.home-header .container {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.home-header .content-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.home-header .content-wrap .title {
  margin-bottom: 20px;
  color: #fff;
}

.home-header .content-wrap .title h1 {
  font-size: 71px;
  font-weight: 600;
  line-height: 1;
}

.home-header .content-wrap .subtitle {
  font-size: 18px;
  line-height: 1.3;
  color: #a5a5a5;
}

.home-header .video-toggle {
  position: absolute;
  z-index: 99;
  right: 30px;
  bottom: 30px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.home-header .video-toggle:hover {
  opacity: 1;
}

.home-header .video-toggle .icon-play {
  display: none;
}

.home-header .video-toggle[aria-pressed="true"] .icon-play {
  display: block;
}

.home-header .video-toggle[aria-pressed="true"] .icon-pause {
  display: none;
}

/* ---------- shared section chrome ---------- */
.standard-spaces {
  position: relative;
  padding: 130px 0 110px 0;
}

.bg-dark-1 {
  background-color: #231f20;
}

.bg-dark-2 {
  background-color: #1c1819;
}

.border-b {
  border-bottom: 1px solid #4c4c4c;
}

.multi-title {
  position: relative;
  margin-bottom: 70px;
  text-align: center;
}

.multi-title h2,
.multi-title h1 {
  position: relative;
  font-size: 47px;
  font-weight: 600;
  color: #fff;
}

.multi-title .aps-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 4.5px;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #4c4c4c;
}

.multi-title.left {
  text-align: left;
}

.multi-title.left .aps-text {
  top: 26px;
  left: 37px;
  right: 0;
}

.stroke-56 .multi-title .aps-text {
  -webkit-text-stroke-color: #565656;
}

/* ---------- contact strip ---------- */
.contact_separator {
  padding: 30px 0;
  background-color: #231f20;
  border-bottom: 1px solid #606060;
}

.contact_separator .container {
  max-width: 1750px;
}

.contact_separator .links {
  font-size: 15px;
}

.contact_separator .links a {
  display: inline-block;
  margin-right: 90px;
  color: #c4c4c4;
}

.contact_separator .links a:hover {
  opacity: 0.7;
}

/* ---------- about ---------- */
.about-us .content {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.about-us .content .text {
  color: #e4e4e4;
}

/* ---------- galleries ---------- */
.gallery-wrap .aps-bg {
  position: absolute;
  top: 425px;
  bottom: 0;
  width: 100%;
}

.gallery-wrap .container.gallery-images {
  position: relative;
  max-width: 1420px;
}

.gallery-wrap .grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.gallery-wrap .grid-item {
  width: 33.333333%;
  padding: 10px;
}

.gallery-wrap .grid.is-masonry .grid-item {
  position: absolute;
}

.gallery-wrap .grid-item img {
  width: 100%;
}

/* Justified rows (X-Bow): every image in a row gets the same height, no cropping.
   flex-grow = aspect ratio with basis 0 → content widths proportional to the ratio. */
.gallery-wrap .grid-rows {
  display: block;
}

.gallery-wrap .grid-row {
  display: flex;
}

.gallery-wrap .grid-pair {
  display: contents;
}

.gallery-wrap .grid-rows .grid-item {
  width: auto;
  min-width: 0;
  flex: 1.5 1 0;
}

.gallery-wrap .grid-rows .grid-item.portrait {
  flex-grow: 0.6667;
}

.gallery-wrap .grid-rows img {
  display: block;
  height: auto;
}

@media (max-width: 767px) {
  .gallery-wrap .grid-row {
    display: block;
  }
  .gallery-wrap .grid-pair {
    display: flex;
  }
}

/* ---------- services (Angebote / Objektfolierung) ---------- */
.services-wrap .items {
  margin-top: 100px;
  min-height: 250px;
}

.services-wrap .item-wrap {
  max-width: 305px;
  margin: 0 auto;
}

.services-wrap .item-wrap .title,
.what_defines_us-wrap .item-wrap .title {
  font-weight: 400;
  line-height: 1.5;
}

.services-wrap .item-wrap .title {
  margin-bottom: 10px;
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
}

/* collapsed with grid rows instead of display:none so screen readers still get the text */
.services-wrap .item-wrap .hidden-part {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.services-wrap .item-wrap .hidden-part > div {
  overflow: hidden;
}

.services-wrap .item-wrap:hover .hidden-part,
.services-wrap .item-wrap:focus-within .hidden-part,
.services-wrap .item-wrap:focus .hidden-part {
  grid-template-rows: 1fr;
}

.services-wrap .item-wrap .line {
  height: 4px;
  margin-bottom: 45px;
  background-color: #424242;
}

.services-wrap .item-wrap .text {
  font-size: 14px;
  color: #bfbfbf;
}

/* ---------- what defines us ---------- */
.what_defines_us-wrap {
  text-align: center;
}

.what_defines_us-wrap .items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 30px;
  margin-top: 90px;
}

.what_defines_us-wrap .item-wrap .title {
  margin-bottom: 12px;
  font-size: 26px;
  color: #fff;
}

.what_defines_us-wrap .item-wrap .text {
  font-size: 17px;
  color: #c4c4c4;
}

@media (max-width: 991px) {
  .what_defines_us-wrap .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- full image ---------- */
.full-image img {
  display: block;
  width: 100%;
}

/* ---------- contact ---------- */
.kontakt-wrap .container.details {
  max-width: 1920px;
  margin-top: 159px;
}

.kontakt-wrap .text-wrap {
  float: right;
  max-width: 589px;
  padding-right: 119px;
  color: #fff;
}

.kontakt-wrap .text-wrap a {
  color: #fff;
}

.kontakt-wrap .text-wrap a:hover {
  opacity: 0.7;
}

.kontakt-wrap .item-info {
  margin-bottom: 42px;
}

.kontakt-wrap .item-info .top-text {
  margin-bottom: 3px;
  font-size: 16px;
}

.kontakt-wrap .item-info .detail {
  font-size: 22px;
}

.kontakt-wrap .item-info .detail .listt span {
  display: inline-block;
  width: 105px;
}

.kontakt-wrap .g-map {
  position: relative;
  height: 400px;
  background-color: #1c1819;
}

.kontakt-wrap .g-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

.kontakt-wrap .g-map.dark-gray iframe {
  filter: grayscale(100%) invert(92%) contrast(83%);
}

.kontakt-wrap .map-consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  text-align: center;
  color: #c4c4c4;
  border: 1px solid #4c4c4c;
}

.kontakt-wrap .map-consent p {
  max-width: 460px;
  margin: 0;
  font-size: 15px;
}

.kontakt-wrap .map-consent .map-load {
  padding: 10px 26px;
  border: 1px solid #c4c4c4;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  transition: all 0.3s ease;
}

.kontakt-wrap .map-consent .map-load:hover {
  background-color: #fff;
  color: #231f20;
}

.kontakt-wrap .map-consent a {
  font-size: 13px;
  text-decoration: underline;
}

/* ---------- content pages (Impressum, Datenschutz, 404) ---------- */
.standard-content {
  padding: 190px 0 150px 0;
}

.standard-content .multi-title {
  margin-bottom: 100px;
  text-transform: uppercase;
}

.standard-content .multi-title .aps-text {
  color: #231f20;
  -webkit-text-stroke-color: #fff;
  opacity: 0.3;
}

.standard-content .content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.standard-content .content a:hover {
  color: #ccc;
  opacity: 0.7;
}

/* ---------- footer ---------- */
footer {
  padding: 45px 0 25px 0;
  background-color: #231f20;
  color: #e8e8e8;
  border-top: 1px solid #494949;
}

footer a {
  color: #e8e8e8;
}

footer a:hover {
  color: #e8e8e8;
  opacity: 0.7;
}

footer .container {
  max-width: 1750px;
}

footer .footer-logo {
  margin-bottom: 40px;
}

footer .footer-logo img {
  width: 200px;
}

footer .f-nav {
  min-height: 125px;
  font-size: 15px;
}

footer .f-nav ul {
  padding-left: 0;
  list-style: none;
}

footer .f-nav ul li {
  display: inline-block;
}

footer .f-nav ul li a {
  margin-right: 40px;
  font-size: 15px;
  text-transform: uppercase;
}

footer .f-nav.right {
  text-align: right;
}

footer .f-nav.right .links a {
  margin-left: 40px;
}

footer .under-content {
  font-size: 12px;
}

footer .under-content.right {
  text-align: right;
}

footer .under-content span {
  display: inline-block;
  width: 25px;
  text-align: center;
}

/* ---------- "Mehr erfahren" links in the service cards ---------- */
.services-wrap .item-wrap .more {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #6d6d6d;
}

.services-wrap .item-wrap .more:hover {
  border-color: #fff;
}

/* ---------- buttons ---------- */
.btn-line {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #c4c4c4;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.standard-content .content a.btn-line {
  text-decoration: none;
}

.btn-line:hover,
.btn-line:focus-visible {
  background-color: #fff;
  color: #231f20;
}

/* ---------- enquiry form ---------- */
.kontakt-wrap .enquiry {
  max-width: 1400px;
  margin-top: 110px;
}

.enquiry h3 {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 600;
}

.enquiry .intro {
  max-width: 640px;
  margin-bottom: 40px;
  color: #c4c4c4;
}

.enquiry .intro a {
  color: #fff;
  text-decoration: underline;
}

.enquiry .fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}

.enquiry .field-wide {
  grid-column: 1 / -1;
}

.enquiry label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c4c4c4;
}

.enquiry input,
.enquiry select,
.enquiry textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #6d6d6d;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  color: #fff;
}

.enquiry select option {
  color: #231f20;
}

.enquiry textarea {
  min-height: 140px;
  resize: vertical;
}

.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus {
  outline: none;
  border-bottom-color: #fff;
}

.enquiry .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 30px 0;
  font-size: 14px;
  color: #c4c4c4;
}

.enquiry .consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: #fff;
}

.enquiry .consent a {
  text-decoration: underline;
}

.enquiry .trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry .status {
  min-height: 1.5em;
  margin-top: 20px;
  font-size: 16px;
}

.enquiry .status.error {
  color: #ffb4a8;
}

/* ---------- service pages ---------- */
.service-page .lead {
  max-width: 820px;
  font-size: 18px;
  color: #e4e4e4;
}

.service-page .content h2 {
  margin-top: 60px;
  font-size: 30px;
  font-weight: 600;
}

.service-page .content ul,
.service-page .content ol {
  max-width: 820px;
  padding-left: 20px;
  color: #e4e4e4;
}

.service-page .content li {
  margin-bottom: 8px;
}

.service-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 60px 0 0;
}

.service-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.service-cta {
  margin-top: 80px;
  padding: 50px 40px;
  border: 1px solid #4c4c4c;
}

.service-cta p {
  max-width: 640px;
  color: #c4c4c4;
}

.service-cta .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}

.service-links {
  margin-top: 70px;
}

.service-links h2 {
  font-size: 20px !important;
  letter-spacing: 1px;
}

.service-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding-left: 0 !important;
  list-style: none;
}

.service-links a {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Google reviews ---------- */
.reviews-summary {
  margin: -30px 0 50px;
  font-size: 18px;
  color: #c4c4c4;
}

.reviews-summary .score {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.reviews-summary .stars,
.review .stars {
  letter-spacing: 3px;
  color: #fff;
}

.reviews-summary .asof {
  font-size: 13px;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

.review {
  margin: 0;
  padding: 34px 30px;
  border: 1px solid #4c4c4c;
}

.review blockquote {
  margin: 16px 0 20px;
  color: #e4e4e4;
}

.review blockquote p:last-child {
  margin-bottom: 0;
}

.review figcaption {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c4c4c4;
}

.reviews-more {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 50px 0 0;
}

@media (max-width: 991px) {
  .reviews {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .reviews {
    grid-template-columns: 1fr;
  }
  .reviews-summary {
    margin-top: -10px;
  }
}

/* photo upload in the enquiry form */
.enquiry input[type="file"] {
  padding: 12px 0;
  font-size: 15px;
  color: #c4c4c4;
}

.enquiry input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.enquiry input[type="file"]:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.enquiry .hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: #a8a8a8;
}

/* FAQ accordion (native details/summary, works without JS) */
.faq {
  margin-top: 40px;
  border-top: 1px solid #4c4c4c;
}

.faq-item {
  border-bottom: 1px solid #4c4c4c;
}

.faq-item summary {
  position: relative;
  padding: 22px 50px 22px 0;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  transform: translateY(-50%);
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item summary:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}

.standard-content .content .faq-item summary h2 {
  display: inline;
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}

.faq-answer {
  padding: 0 50px 22px 0;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* reference projects */
.ref-project {
  margin-top: 70px;
}

.ref-project .ref-gallery {
  margin-top: 30px;
}

.ref-gallery a {
  display: block;
  cursor: zoom-in;
}

/* five photos: two large above three small, so every row is full */
.service-gallery.ref-gallery.n5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ref-gallery.n5 > div {
  grid-column: span 2;
}

.ref-gallery.n5 > div:nth-child(-n + 2) {
  grid-column: span 3;
}

.service-gallery.ref-gallery.n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .ref-gallery.n5 > div,
  .ref-gallery.n5 > div:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .ref-gallery.n5 > div:first-child {
    grid-column: 1 / -1;
  }
}

.gallery-more {
  margin: 40px 0 0;
  text-align: center;
}

@media (max-width: 767px) {
  .standard-content .content .faq-item summary h2 {
    font-size: 19px;
  }
  .faq-answer {
    padding-right: 0;
  }
}

/* reviews on the service pages */
.service-review {
  margin: 50px 0 0;
}

.service-review .review {
  max-width: 760px;
}

.service-rating {
  margin: 20px 0 0;
  font-size: 18px;
}

.standard-content .content .service-rating a {
  color: #c4c4c4;
  text-decoration: none;
}

.standard-content .content .service-rating a:hover,
.standard-content .content .service-rating a:focus-visible {
  color: #fff;
}

.service-rating .score {
  font-weight: 600;
  color: #fff;
}

.service-rating .stars {
  letter-spacing: 3px;
  color: #fff;
}

/* ---------- mobile contact bar ---------- */
.contact-bar {
  display: none;
}

@media (max-width: 767px) {
  .contact-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #231f20;
    border-top: 1px solid #4c4c4c;
  }
  .contact-bar a {
    flex: 1;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
  }
  .contact-bar a + a {
    border-left: 1px solid #4c4c4c;
  }
  .contact-bar a:hover,
  .contact-bar a:focus-visible {
    background-color: #3a3536;
  }
  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

/* ---------- gallery lightbox ---------- */
.gallery-wrap .grid-item a {
  display: block;
  cursor: zoom-in;
}

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 17, 18, 0.96);
  color: #fff;
}

.lightbox::backdrop {
  background: rgba(20, 17, 18, 0.96);
}

.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 60px 70px;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
}

.lightbox figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: #c4c4c4;
}

.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  opacity: 0.75;
}

.lightbox button:hover,
.lightbox button:focus-visible {
  opacity: 1;
}

.lightbox .lb-close {
  top: 14px;
  right: 14px;
}

.lightbox .lb-prev {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox .lb-next {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .kontakt-wrap .enquiry {
    margin-top: 70px;
  }
  .enquiry .fields {
    grid-template-columns: 1fr;
  }
  .service-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .service-cta {
    padding: 30px 20px;
  }
  .lightbox figure {
    padding: 60px 10px;
  }
  .lightbox .lb-prev,
  .lightbox .lb-next {
    top: auto;
    bottom: 10px;
    transform: none;
  }
}

/* ---------- reveal animations (replacement for WOW.js + animate.css) ---------- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* opacity rather than visibility, so not-yet-revealed sections stay in the accessibility tree */
.js .wow {
  opacity: 0;
}

.js .wow.animated {
  opacity: 1;
  animation-duration: 0.35s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.js .wow.animated.fadeInLeft {
  animation-name: fadeInLeft;
}

.js .wow.animated.fadeInUp {
  animation-name: fadeInUp;
}

/* ---------- responsive (theme breakpoints) ---------- */
@media (max-height: 570px) {
  .home-header .slider-item {
    height: 570px;
  }
}

@media (max-width: 1299px) {
  .kontakt-wrap .text-wrap {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
  }
  .home-header .slider-br-nav {
    top: 14%;
    right: 6px;
  }
  .home-header .content-wrap .title h1 {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .navbar {
    padding: 9px 10px;
    background-color: #231f20;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  }
  .logo a img,
  .top-nav-collapse .logo a img {
    width: 150px;
  }
  .page-wrap {
    padding-top: 50px;
  }
  .services-wrap .item-wrap .hidden-part {
    grid-template-rows: 1fr;
  }
  .home-header .slider-br-nav {
    top: 15px;
    right: 6px;
  }
  .home-header .slider-br-nav .total-br {
    font-size: 13px;
  }
  .home-header .slider-br-nav .current-br {
    font-size: 20px;
  }
  .home-header .slider-br-nav .line {
    width: 20px;
  }
  .home-header .slider-item {
    height: 500px;
  }
  .home-header .content-wrap .title h1 {
    font-size: 40px;
  }
  .home-header .video-toggle {
    right: 15px;
    bottom: 15px;
  }
  .multi-title h2,
  .multi-title h1 {
    font-size: 30px;
  }
  .multi-title .aps-text {
    font-size: 50px;
    letter-spacing: 2px;
  }
  .multi-title.left .aps-text {
    top: 0;
    left: 17px;
  }
  .big-menu-wrap .menu-close-img button {
    left: 20px;
    top: 20px;
  }
  .big-menu-wrap .verticalbar {
    display: none;
  }
  .big-menu-wrap .menu-animate {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 80px 24px 10px;
  }
  .big-menu-wrap .menu-main {
    text-align: left;
  }
  .big-menu-wrap .menu-main a {
    padding: 4px 0;
    font-size: 44px;
    letter-spacing: 2px;
  }
  .big-menu-wrap .menu-sub {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #4c4c4c;
  }
  .big-menu-wrap .menu-sub ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    margin-bottom: 26px;
  }
  .big-menu-wrap .menu-sub a {
    padding: 9px 0;
    font-size: 17px;
  }
  .big-menu-wrap .bottom-text {
    flex-wrap: wrap;
    margin-top: auto;
    padding: 20px 24px 30px;
    font-size: 15px;
  }
  .big-menu-wrap .left-part a {
    margin-right: 24px;
  }
  .big-menu-wrap .right-part a {
    margin-left: 0;
  }
  footer .footer-logo img {
    width: 130px;
  }
}

@media (max-width: 767px) {
  .contact_separator .links a {
    display: block;
    margin-right: 0;
    padding: 4px 0;
  }
  .services-wrap .item-wrap .text {
    font-size: 15px;
  }
  .standard-content {
    padding: 50px 0 60px 0;
  }
  .kontakt-wrap .item-info .detail {
    font-size: 18px;
  }
  .kontakt-wrap .item-info .top-text {
    font-size: 14px;
  }
  footer {
    padding: 45px 0 0 0;
  }
  footer .f-nav ul {
    margin-bottom: 50px;
  }
  footer .f-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }
  footer .f-nav ul li {
    display: block;
  }
  footer .f-nav ul li a {
    display: inline-block;
    margin-right: 0;
    padding: 8px 0;
  }
  .about-us .content,
  .about-us .content .multi-title {
    text-align: left;
  }
  .about-us .content .text {
    font-size: 16px;
    line-height: 1.6;
  }
  footer .under-content {
    margin-bottom: 50px;
  }
  footer .under-content.right {
    margin-bottom: 0;
  }
  footer .f-nav {
    min-height: auto;
    margin-bottom: 26px;
  }
  .kontakt-wrap .container.details {
    margin-top: 116px;
  }
  .what_defines_us-wrap .items {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    margin-top: 50px;
  }
  .what_defines_us-wrap .item-wrap .title {
    margin-bottom: 6px;
    font-size: 24px;
  }
  .what_defines_us-wrap .item-wrap .text {
    font-size: 16px;
  }
  .services-wrap .items {
    margin-top: 70px;
  }
  .services-wrap .item-wrap {
    margin-bottom: 50px;
  }
  .multi-title {
    margin-bottom: 40px;
  }
  .multi-title .aps-text,
  .multi-title.left .aps-text {
    top: 10px;
    font-size: 40px;
    letter-spacing: 1px;
  }
  .standard-spaces {
    padding: 55px 0 48px 0;
  }
  .gallery-wrap .grid-item {
    width: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .wow {
    opacity: 1;
  }
}

/* image reel on the references page */
.ref-video {
  margin: 30px 0 0;
}

.ref-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.ref-video figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: #a8a8a8;
}

/* film finishes (swatches are CSS only) */
.service-page .content ul.finishes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 30px;
  max-width: none;
  margin: 50px 0 0;
  padding-left: 0;
  list-style: none;
}

.service-page .content .finish {
  margin: 0;
}

.service-page .content .finish h2 {
  margin: 18px 0 8px;
  font-size: 22px;
  letter-spacing: 1px;
}

.finish p {
  margin: 0;
  font-size: 15px;
  color: #c4c4c4;
}

.swatch {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #4c4c4c;
}

.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sw-gloss {
  background: linear-gradient(155deg, #7ff0dc 0%, #23b39b 28%, #0f7d6c 55%, #0a4f45 75%, #1c9c87 100%);
}

.sw-gloss::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 37%, transparent 44%);
}

.sw-satin {
  background: linear-gradient(155deg, #5cc9b6 0%, #2a9f8b 40%, #1b7a6b 70%, #26917f 100%);
}

.sw-satin::after {
  background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .2) 40%, transparent 58%);
}

.sw-matte {
  background: linear-gradient(155deg, #2f9c8a, #23806f);
}

.sw-metallic {
  background:
    radial-gradient(rgba(255, 255, 255, .2) .6px, transparent 1px) 0 0 / 3px 3px,
    radial-gradient(rgba(255, 255, 255, .14) .6px, transparent 1px) 1px 2px / 4px 4px,
    linear-gradient(155deg, #4d7fe6 0%, #173a8a 55%, #2f5fc4 100%);
}

.sw-metallic::after {
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .35) 38%, transparent 48%);
}

.sw-flip {
  background: linear-gradient(125deg, #5b2bd6 0%, #2b7fd4 35%, #19c2a6 65%, #b9e04a 100%);
}

.sw-flip::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 38%, transparent 46%);
}

.sw-chrome {
  background: linear-gradient(180deg, #f4f6f8 0%, #aab2ba 28%, #3a4046 47%, #141619 52%, #8d969e 70%, #e9ecef 88%, #9aa2aa 100%);
}

.sw-carbon {
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .5) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(45deg, #2e2e2e 0 4px, #181818 4px 8px);
}

.sw-carbon::after {
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 55%);
}

.sw-brushed {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, rgba(0, 0, 0, .07) 1px 3px),
    linear-gradient(160deg, #d5d9dd, #9ea5ab 50%, #c9ced2);
}

.finish-note {
  margin: 30px 0 0;
  font-size: 14px;
  color: #a8a8a8;
}

.finish-example {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 70px;
}

.finish-example-img a {
  display: block;
  cursor: zoom-in;
}

.finish-example-img img {
  display: block;
  width: 100%;
  height: auto;
}

.service-page .content .finish-example h2 {
  margin-top: 0;
}

@media (max-width: 991px) {
  .service-page .content ul.finishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .service-page .content ul.finishes {
    gap: 30px 16px;
  }
  .service-page .content .finish h2 {
    font-size: 19px;
  }
  .finish-example {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .finish-example-img {
    max-width: 360px;
  }
}