/* V26: layout repairs. Brand assets and their proportions remain untouched. */

/* Reserve image and caption space separately, so each label stays readable. */
@media (min-width: 901px) {
  .material-collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    row-gap: 36px;
    height: auto;
    min-height: 0;
    padding-bottom: 8px;
  }
  .material-collage .material-image {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    /* Whole-figure parallax previously moved labels behind the next image. */
    transform: none !important;
  }
  .material-collage .material-resin { grid-column: 2 / -1; }
  .material-collage .material-process { grid-column: 1 / -1; margin-right: 5%; }
  .material-collage .material-people { grid-column: 1 / span 8; margin-left: -12%; }
  .material-collage .material-image .zoom { height: auto; aspect-ratio: 3 / 2; }
  .material-collage .material-process .zoom,
  .material-collage .material-people .zoom { aspect-ratio: 16 / 9; }
  .material-collage .material-image figcaption { position: static; padding-top: 14px; }
}

/* The pinned gallery has one flexible image row instead of overflowing 100svh. */
@media (min-width: 901px) {
  html.motion-on .application-sticky {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: clamp(18px, 2.8svh, 30px);
    height: 100svh;
    min-height: 0;
    padding: clamp(88px, 12.5svh, 115px) var(--gutter) clamp(18px, 2.8svh, 28px);
  }
  html.motion-on .application-heading { margin-bottom: 0; }
  html.motion-on .application-window {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: visible;
  }
  html.motion-on .application-rail { height: 100%; min-height: 0; align-items: stretch; }
  html.motion-on .application-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 18px;
    height: 100%;
    min-height: 0;
    min-width: 0;
  }
  html.motion-on .application-panel .panel-media {
    height: 100%;
    min-height: 0;
    max-height: none;
    min-width: 0;
  }
  html.motion-on .application-panel .panel-caption { margin-top: 0; padding-top: 16px; }
  html.motion-on .application-panel .post-row { min-height: 0; }
  html.motion-on .application-panel .zoom { min-height: 0; min-width: 0; }
  html.motion-on .digital-panel .panel-media { grid-template-rows: minmax(0, 1fr); }
  html.motion-on .application-bottom {
    margin-top: 0;
    padding-top: 0;
    font-size: clamp(10px, .75vw, 12px);
  }
  /* A sticky canvas must never be taller than the viewport on short displays. */
  html.motion-on .scale-sticky { min-height: 0; }
  html.motion-on .panorama-wrap { width: min(72%, max(120px, calc((100svh - 440px) * 3))); }
}

/* Overscan keeps the moving image behind the entire visual-language section. */
.visual-language .language-bg { top: -80px; bottom: auto; height: calc(100% + 160px); }
@media (max-width:900px){
  .material-collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .material-collage .material-image{min-width:0}
  .material-collage .material-people .zoom{height:auto}
}

/* Keep the complete mark visible when its background controls enter the viewport. */
.signature-stage { height: clamp(330px, 66svh, 650px); min-height: 0; padding: clamp(25px, 5svh, 50px) 30px; }
.signature-stage > img { width: min(58vw, 700px); height: auto; max-height: calc(100% - 66px); object-fit: contain; margin-bottom: 24px; flex: 0 1 auto; }
.badge-toolbar{position:sticky;top:100px;z-index:4;display:flex;justify-content:center;margin-top:28px;padding:10px 0;pointer-events:none}
.badge-toolbar .flip-control{margin-top:0;pointer-events:auto;box-shadow:0 8px 24px #06142c1a}
.badges-stage{margin-top:24px}
@media (max-width: 600px) {
  .signature-stage { height: min(48svh, 430px); min-height: 320px; padding: 38px 20px; }
  .signature-stage > img { width: 76vw; }
  .badge-toolbar{top:87px}
}

@media (min-width: 901px) and (max-height: 650px) {
  .concept-copy { position: static; padding-top: 0; }
}
@media (min-width: 901px) and (max-height: 500px) {
  html.motion-on .scale-sticky { padding-top: 84px; padding-bottom: 20px; }
  html.motion-on .scale-heading .display-title { font-size: 44px; }
  html.motion-on .scale-heading .eyebrow { font-size: 11px; margin-bottom: 18px; }
  html.motion-on .panorama-wrap { width: min(65%, max(120px, calc((100svh - 300px) * 3))); margin-top: 20px; transform: none !important; }
  html.motion-on .scale-caption { margin-top: 16px; }
}

/* Long Portuguese words remain inside the content column on narrow phones. */
@media (max-width: 600px) {
  .type-specimen .name-specimen { font-size: clamp(74px, 23.4vw, 105px); }
}
@media (max-width: 360px) {
  .concept-copy .display-title,
  .type-specimen h3 { font-size: clamp(38px, 12vw, 43px); }
  .closing-links { flex-wrap: wrap; justify-content: center; }
}

/* The manual motion control also covers pseudo-element animations. */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media print {
  .material-collage { display: block; }
  .material-collage .material-image { margin: 0 0 26px; break-inside: avoid; }
  .application-sticky, .application-panel { display: block !important; height: auto !important; }
  .panorama-wrap { width: 100% !important; }
}