/* Keep the photograph frame proportional to the product, rather than padding a wide box. */
.gallery-stage-photo {
  --photo-ratio: 1.5;
  width: min(100%, calc(430px * var(--photo-ratio)));
  aspect-ratio: var(--photo-ratio);
  margin-inline: auto;
  background: #f6f6f6;
}
.gallery-stage-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-stage-description { max-width: 720px; margin: 10px 0 0; color: #777777; line-height: 1.75; font-size: 16px; }
.gallery-stage-bar { align-items: baseline; }
.gallery-browser .gallery-grid { max-height: 710px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 5px 2px 2px; }
.swipe-surface { cursor: grab; user-select: none; -webkit-user-select: none; }
.swipe-surface img { -webkit-user-drag: none; user-select: none; }
.swipe-surface.is-dragging { cursor: grabbing; }
.swipe-surface.is-dragging > img:not(.photo-outgoing) { transform: translateX(var(--drag-offset, 0px)); }
.swipe-surface--vertical,
.swipe-surface--vertical.is-dragging { cursor: ns-resize; }
.swipe-surface.swipe-surface--vertical.is-dragging > img:not(.photo-outgoing) { transform: translateY(var(--drag-offset, 0px)); }
.swipe-surface:focus-visible { outline: 2px solid #181818; outline-offset: 5px; }
.sector-explorer .sector-panel { border: 0; border-radius: 0; background: #ffffff; }
.sector-explorer .sector-photo {
  --photo-ratio: 1.5;
  width: min(100%, calc(520px * var(--photo-ratio)));
  aspect-ratio: var(--photo-ratio);
  height: auto;
  margin-inline: auto;
  border: 1px solid #e7e7e7;
  border-radius: 15px;
  background: #f4f4f4;
}

.gallery-stage-controls { gap: 9px; }
.gallery-stage-controls button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 21px; line-height: 1; cursor: pointer; }
.gallery-stage-controls button:focus-visible { outline: 2px solid #181818; outline-offset: 3px; }

/* Keep the enlarged gallery preview at one shared landscape size in every sector. */
.gallery-stage-photo { width: min(100%, 884px); max-width: 884px; aspect-ratio: 3 / 2; }
.gallery-stage-photo img { width: 100%; height: 100%; object-fit: contain; }
@media(max-width:600px) {
  .gallery-stage-photo { width: 100%; aspect-ratio: 3 / 2; }
  .gallery-stage-photo img { height: 100%; }
}
.sector-explorer .sector-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sector-photo-controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 18px; }
.sector-photo-controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #dddddd; border-radius: 50%; background: #ffffff; color: #181818; cursor: pointer; font-size: 20px; }
.sector-photo-controls button:hover { background: #f2f2f2; border-color: #777777; }
.sector-photo-controls span { font-size: 13px; color: #777777; min-width: 42px; text-align: center; }
.sector-photo-caption { margin: 12px 0 0; text-align: center; font-size: 16px; line-height: 1.5; }
.sector-explorer .sector-info { padding-inline: 0; }
.capabilities .production-image {
  --photo-ratio: 1.5;
  width: min(100%, calc(470px * var(--photo-ratio)));
  aspect-ratio: var(--photo-ratio);
  height: auto;
  min-height: 0;
  margin-inline: auto;
}
.capabilities .production-image > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.capabilities .production-media .process-thumbs { display: flex; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.capabilities .production-media .process-thumbs button { width: 80px; height: 65px; flex: 0 0 80px; }
.capabilities .production-media .process-thumbs button img { object-fit: contain; }
@media(max-width:850px) {
  .gallery-stage-photo { width: min(100%, calc(390px * var(--photo-ratio))); }
  .sector-explorer .sector-photo { width: min(100%, calc(460px * var(--photo-ratio))); }
  .gallery-browser .gallery-grid { max-height: none; overflow-y: hidden; overflow-x: auto; }
}
@media(max-width:600px) {
  .gallery-stage-photo { width: min(100%, calc(340px * var(--photo-ratio))); }
  .sector-explorer .sector-photo { width: min(100%, calc(380px * var(--photo-ratio))); }
  .gallery-stage-caption { font-size: 18px; }
  .gallery-stage-description { font-size: 14px; }
  .sector-photo-controls { margin-top: 14px; }
}
.gallery-shot-label,
.gallery-stage-caption,
.sector-photo-caption,
.sector-tab span,
.nav-panel-grid a span,
.nav-link,
.header-cta,
.mobile-nav a,
.mobile-nav summary,
.footer-links a,
.production-item h3,
#process-image-title,
#process-image-caption,
.process-thumbs button span,
.manufacturing-card h2,
.industry-card h3,
.sector-card h2,
.related-grid h3,
.solution-card h3,
.application-parts h3,
.process-pills a,
.detail-tags span,
.tags span {
  text-transform: capitalize;
}

/* Neutral black, white and gray site palette */
:root{--red:#151515;--red-dark:#000000;--ink:#151515;--muted:#626262;--line:#d5d5d5;--light:#ededed;--paper:#f4f4f4;--copper:#222222;--navy:#111111}

/* Final override: keep the enlarged preview identical across sector image ratios and breakpoints. */
.gallery-stage-photo { width: min(100%, 884px); max-width: 884px; aspect-ratio: 3 / 2; }
.gallery-stage-photo img { width: 100%; height: 100%; object-fit: contain; }
@media(max-width:600px) {
  .gallery-stage-photo { width: 100%; aspect-ratio: 3 / 2; }
  .gallery-stage-photo img { height: 100%; }
}

/* JS samples each photo's edge colors and extends them into any letterboxed area. */
.gallery-stage-photo{background:#f4f4f4}
.gallery-stage-photo img{background:transparent}

.sector-detail-page .gallery-stage-photo{width:min(100%,760px);max-width:760px;aspect-ratio:3/2;background:#ffffff}.sector-detail-page .gallery-stage-photo img{width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.sector-detail-page .gallery-stage-photo{width:100%;aspect-ratio:3/2}.sector-detail-page .gallery-stage-photo img{height:100%}}