.gyproc-art {
  display: block;
  width: 100%;
  height: auto;
}

header.gyproc-header {
  padding: 0;
  background: #22a9e2;
}

.gyproc-header img {
  max-width: none;
}

.gyproc-header a {
  display: block;
  text-decoration: none;
}

.gyproc-header {
  container-type: inline-size;
}

.gyproc-comex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16.667cqw;
}

.gyproc-comex img {
  width: 30%;
}

.gyproc-distributor {
  display: flex;
  align-items: center;
  background: #0060a8;
  color: #fff;
}

.gyproc-distributor span {
  width: 83.333%;
  font-family: GothamBold, sans-serif;
  font-size: 3.2cqw;
  line-height: 1.4;
}

.gyproc-distributor img {
  width: 16.667%;
  height: auto;
}

.gyproc-hero {
  position: relative;
}

.gyproc-hero p {
  position: absolute;
  top: 15%;
  left: 8.9%;
  color: #fff;
  font-family: GothamBold, sans-serif;
  font-size: 4.63cqw;
}

.gyproc-main,
.gyproc-interior {
  background: #fff;
  container-type: inline-size;
}

.gyproc-title,
.gyproc-interior-title {
  padding: 0;
  margin: 0;
  line-height: 0;
}

.gyproc-heading {
  margin: 0;
  padding: 8% 4% 3%;
  color: #081393;
  font-family: Comex, sans-serif;
  font-size: 7cqw;
  line-height: 1.15;
  text-align: center;
}

.gyproc-description {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30cqw;
  margin: 0;
  padding: 7.5% 8%;
  background: #0060a8;
  color: #fff;
  font-family: GothamBook, sans-serif;
  font-size: 4.63cqw;
  line-height: 1.2;
  text-align: center;
}

.gyproc-carousel {
  position: relative;
  overflow: hidden;
}

.gyproc-track {
  display: flex;
  align-items: stretch;
  transition: transform .5s ease;
}

.gyproc-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.gyproc-slide .gyproc-title {
  display: flex;
  align-items: center;
  height: 32cqw;
}

.gyproc-slide .gyproc-title img {
  height: 100%;
  object-fit: contain;
}

.gyproc-slide .gyproc-description {
  height: var(--gyproc-description-height, auto);
}

.gyproc-slide article > .gyproc-art {
  width: 100%;
  height: 84cqw;
  object-fit: cover;
  object-position: center;
  background: #f3f7f9;
}

.gyproc-action {
  display: flex;
  justify-content: center;
  padding: 9.7% 0;
}

.gyproc-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39.738%;
  min-height: 44px;
  aspect-ratio: 429.17 / 109.26;
  border-radius: 4cqw;
  background: #22a9e2;
  color: #fff;
  font-family: GothamBook, sans-serif;
  font-size: 4.167cqw;
  line-height: 1;
  text-decoration: none;
}

.gyproc-link:focus-visible,
.gyproc-header a:focus-visible,
.gyproc-carousel button:focus-visible {
  outline: 3px solid #04148e;
  outline-offset: -3px;
}

.gyproc-prev,
.gyproc-next {
  position: absolute;
  top: 48%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 86%);
  color: #0761a8;
  font-size: 22px;
  cursor: pointer;
}

.gyproc-prev { left: 6px; }
.gyproc-next { right: 6px; }

.gyproc-interior-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gyproc-interior-title img {
  max-height: 100%;
  object-fit: contain;
}

.gyproc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gyproc-native {
  padding: 0;
  container-type: inline-size;
}

.gyproc-native .gyproc-title {
  width: 100%;
  padding: 0;
}

.gyproc-native .technical-panel {
  padding: 0 6%;
  background: #cdd1d6;
}

.gyproc-native .interior-description {
  height: auto;
  min-height: 0;
  padding: 8% 0;
  margin: 0;
  background: transparent;
  color: #222;
  font-family: GothamBook, sans-serif;
  font-size: clamp(16px, 4.63cqw, 23px);
  line-height: 1.25;
}

.gyproc-native .technical-panel > p:not(.interior-description) {
  margin-bottom: 8%;
  font-size: clamp(16px, 4.63cqw, 23px);
}

.gyproc-native .technical-panel > p:first-child:not(.interior-description) {
  padding-top: 24%;
}

.gyproc-native .technical-panel strong,
.gyproc-native .recommendation,
.gyproc-native .installation-section h3 {
  color: #1b5eaa;
}

.gyproc-native .benefits {
  gap: 20px;
  margin: 0 0 10%;
}

.gyproc-native .benefits span {
  font-size: clamp(14px, 4cqw, 20px);
  line-height: 1.25;
}

.gyproc-native .spec-table,
.gyproc-native .technical-panel > small {
  width: calc(100% / .88);
  margin-left: calc(-100% * .06 / .88);
  background: #1b5eaa;
}

.gyproc-native .spec-table {
  padding: 8% 2%;
  font-size: clamp(12px, 3.8cqw, 18px);
}

.gyproc-native .spec-table span {
  overflow-wrap: anywhere;
}

.gyproc-native .installation-section {
  padding: 10% 5%;
  background: #f3f7f9;
}

.gyproc-native .installation-section h2 {
  margin-bottom: 12%;
  font-family: GothamBook, sans-serif;
  font-size: 6cqw;
  line-height: 1.2;
}

.gyproc-native .installation-grid {
  gap: 44px 20px;
}

.gyproc-native .installation-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gyproc-native .installation-grid h3,
.gyproc-native .suspension-product h3 {
  font-weight: 400;
  font-size: clamp(14px, 4.3cqw, 21px);
  line-height: 1.2;
}

.gyproc-native .installation-grid p,
.gyproc-native .installation-grid em,
.gyproc-native .installation-grid small,
.gyproc-native .suspension-product p {
  font-size: clamp(14px, 4cqw, 20px);
  line-height: 1.25;
}

.gyproc-native .installation-grid img {
  height: auto;
  max-height: 190px;
  width: 80%;
  margin-top: auto;
  padding-top: 12px;
}

.gyproc-native .installation-wide {
  max-width: 65%;
}

@media (prefers-reduced-motion: reduce) {
  .gyproc-track { transition: none; }
}