/* Content relationships are shared by every viewport. The original desktop
   artboards keep their exact positioned children and reference typography. */
.responsive-cards,.responsive-card,.mobile-gallery,.mobile-features,.image-legend,.mobile-stat,.media-stack{display:contents}
.project-mobile-label{display:none}
@media(max-width:900px){
  .canvas{gap:20px;padding-block:40px}
  .canvas>.display{margin-bottom:8px}
  .canvas>h1.display,.canvas>h2.display{order:-1}
  .canvas .copy:not(.display):not(.kicker):not(.lettered):not(.section-note){line-height:1.5}
  .canvas p.copy:not(.display):not(.kicker):not(.lettered):not(.muted):not(.card-index):not(.card-title):not(.card-heading):not(.badge-blue):not(.strip-label){font-size:15px}
  /* Desktop line breaks describe the artboard, not the width of a phone. */
  .canvas .copy:not(.display):not(.kicker) .reference-line{display:inline}
  .canvas .copy:not(.display):not(.kicker) br{display:none}
  .canvas .copy:not(.display):not(.kicker) br::after{content:' '}
  .canvas .copy.card-title{line-height:1.25}
  .canvas .responsive-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;width:100%;margin:4px 0 8px}
  .canvas .responsive-card{display:grid;grid-template-columns:28px minmax(0,1fr);align-content:start;align-items:start;gap:10px 10px;min-width:0;margin:0;padding:0 0 24px;border-bottom:1px solid #e5e7f5}
  .canvas .responsive-card>*{grid-column:1/-1;order:0;min-width:0}
  .canvas .responsive-card>.art{display:block;width:100%;height:auto;max-width:100%;margin:0;line-height:0}
  .canvas .responsive-card>.art img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
  .canvas .responsive-card>.card-heading,.canvas .responsive-card>h3{font-size:22px;line-height:1.15;letter-spacing:-.015em;font-weight:700;text-transform:none;white-space:normal}
  .canvas .responsive-card>.copy.card-index{font-size:13px;line-height:1.5;font-weight:500;letter-spacing:.03em;width:auto;grid-column:1;grid-row:1;padding-top:4px}
  .canvas .responsive-card:has(>.card-index)>.card-heading{grid-column:2;grid-row:1}
  .canvas .responsive-card>.area-arrow{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:26px;justify-self:end;line-height:1}
  .canvas .responsive-card>.muted{font-size:12px;line-height:1.45;color:#62697e}
  .canvas .responsive-card>.native-detail{font-size:13px;margin:0}
  .canvas .responsive-card>.native-detail .expanded-content{font-size:15px;max-height:none}
  .canvas .responsive-card:has(>.native-detail){border-bottom:0;padding-bottom:0}
  .canvas article.responsive-card[data-category]:not([hidden]){display:grid}
  .canvas .responsive-card .step-no{font-size:22px;margin-right:10px}
  .canvas .responsive-card .step-connector{display:none}
  /* Numbers, headings and arrows now belong to their own area card. */
  .canvas .cards-areas>.responsive-card{grid-template-columns:24px minmax(0,1fr) 36px;gap:10px 8px}
  .canvas .cards-areas .art,.canvas .cards-services .art{grid-row:1}
  .canvas .cards-areas .copy.card-index,.canvas .cards-services .copy.card-index{grid-row:2}
  .canvas .cards-areas .responsive-card:has(>.card-index)>.card-heading,
  .canvas .cards-services .responsive-card:has(>.card-index)>.card-heading{grid-row:2}
  .canvas .cards-areas .area-arrow{grid-column:3;grid-row:2;width:36px;min-height:44px;align-self:start;margin-top:-8px}
  .canvas .cards-areas .card-heading{grid-column:2;font-size:22px}
  .canvas .cards-areas .responsive-card>p:not(.card-index){grid-column:2/-1}
  .canvas .cards-areas .responsive-card>.art img{max-height:330px}
  .canvas .cards-process .responsive-card>.art{height:auto;max-width:320px;justify-self:center;margin:6px 0}
  .canvas .cards-process .responsive-card>.art img{width:100%;height:auto;max-height:250px;object-fit:contain}
  .canvas .cards-process .responsive-card>p:not(.card-index):not(.card-heading){font-size:14px}
  .canvas .cards-history .responsive-card>.art img{max-height:260px}
  .canvas .cards-history .card-heading{font-size:28px;color:#2924e8}
  .canvas .cards-equipment{gap:28px}
  .canvas .cards-equipment .responsive-card>.card-heading{font-size:21px;align-self:center}
  .canvas .cards-equipment .responsive-card>.art{height:230px;max-width:280px;justify-self:center;margin:4px 0}
  .canvas .cards-equipment .responsive-card>.art img{width:100%;height:100%;object-fit:contain}
  .canvas .cards-equipment .manufacturer{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;width:fit-content;justify-self:start}
  .canvas .cards-documentation .responsive-card{padding-bottom:12px;gap:10px}
  .canvas .cards-documentation .responsive-card>.muted{font-size:14px;color:#62697e}
  .canvas .cards-documentation .art img{max-height:none}
  .canvas .cards-values .responsive-card{padding-bottom:18px}
  .canvas .cards-values .card-heading{font-size:20px}
  .canvas .cards-projects .responsive-card>.research-banner{height:auto}
  /* A shared mobile scale replaces baked-in labels without repainting photos.
     Minimum opaque bounds include the full raster labels at every card width,
     so neither duplicate text nor fragments of the old strips can show. */
  .canvas.s03 .project-photo,.canvas.s03 .research-banner{container-type:inline-size}
  .canvas.s03 .cards-projects .project-photo img{max-height:none}
  .canvas.s03 .project-mobile-label,.canvas.s03 .research-banner-label{
    --label-tab:2.7cqw;
    position:absolute;left:5.5%;top:3cqw;max-width:91.5%;
    display:flex;align-items:flex-start;flex-direction:column;
    color:#111;line-height:1.3;pointer-events:none;
  }
  .canvas.s03 .research-banner-label:before{content:none}
  .canvas.s03 .project-mobile-label strong,.canvas.s03 .research-banner-label strong,
  .canvas.s03 .project-mobile-label>span,.canvas.s03 .research-banner-label>span{
    display:flex;align-items:center;box-sizing:border-box;
    width:fit-content;max-width:100%;background:#fff;
    padding:5px 8px;margin:0;
  }
  .canvas.s03 .project-mobile-label strong,.canvas.s03 .research-banner-label strong{
    position:relative;min-width:40cqw;min-height:9cqw;
    font-size:clamp(12px,3.35cqw,26px);font-weight:700;letter-spacing:.08em;
  }
  .canvas.s03 .project-mobile-label strong:before,.canvas.s03 .research-banner-label strong:before{
    content:'';position:absolute;left:calc(-1 * var(--label-tab));top:0;
    width:var(--label-tab);height:100%;background:#ff4b0a;
  }
  .canvas.s03 .project-photo-wood .project-mobile-label strong:before{background:#2924e8}
  .canvas.s03 .project-mobile-label>span,.canvas.s03 .research-banner-label>span{
    min-width:32cqw;min-height:5cqw;
    font-size:clamp(12px,3.4cqw,27px);font-weight:400;letter-spacing:0;
  }
  .s34>.copy.muted{display:none} /* Desktop gallery counter, not a live status. */
  .s34>.area-arrow{width:44px;height:44px;align-self:flex-end;margin-top:-64px}
  .s34>.d-btn{max-width:calc(100% - 60px)}
  .s16>.supplemental{order:0}
  .s16>.d-tabs{order:1}
  .s16>[role=tabpanel]{order:2}
  .s21>.art{order:1}
  .s21>.reference-decoration{order:0}
  .s21>.d-tabs{order:2}
  .s21>[role=tabpanel]{order:3}
  .canvas.s13>.display,.canvas.s23>.display,.canvas.s24>.display,.canvas.s25>.display,.canvas.s26>.display{order:-1}
  .canvas.s13>.copy:not(.display):not(.lettered):not(.kicker){order:-1}
  .canvas .mobile-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .canvas .mobile-gallery .art{height:auto;width:100%}
  .canvas .mobile-features{display:flex;flex-wrap:wrap;gap:16px;order:6}
  .canvas .mobile-features>.copy{flex:1 1 100px;min-width:0;font-size:13px;line-height:1.35}
  .canvas .image-legend{display:grid;grid-template-columns:1fr 1fr;gap:16px;order:1;margin-top:-10px}
  .canvas .image-legend>.lettered{font-size:10px;letter-spacing:.08em}
  .canvas .mobile-stat{display:flex;align-items:baseline;gap:10px;margin:0}
  .canvas .mobile-stat>.copy{width:auto;flex:0 1 auto}
  .canvas .mobile-stat>.display{font-size:34px;line-height:1}
  .canvas .media-stack{display:flex;flex-direction:column;gap:16px;order:1}
  .canvas .media-stack>.artwork-assembly{order:0}
  .canvas .media-stack>.muted{order:1;font-size:11px}
  .canvas .media-stack>.d-tabs{order:2}
  .canvas.s16>.d-tabs,.canvas .media-stack>.d-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .canvas.s21>.d-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .canvas.s16>.d-tabs button,.canvas.s21>.d-tabs button,.canvas .media-stack>.d-tabs button{white-space:normal;min-height:44px}
  .s39 .cards-areas .art{max-width:none;align-self:auto}
  .canvas.s39 .cards-areas>.responsive-card:last-child{border-bottom-color:transparent}
  .canvas .responsive-card[hidden]{display:none!important}
  .canvas .strip-label{min-height:36px}
  .canvas .email a{overflow-wrap:anywhere}
  .back-top{width:36px;height:36px;right:10px;bottom:10px}
}
@media(min-width:601px) and (max-width:900px){
  .canvas{padding-inline:30px}
  .canvas .responsive-cards:not(.cards-documentation):not(.cards-values){grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .canvas .responsive-card>.art img{max-height:310px}
  .canvas .cards-areas>.responsive-card:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 12px)}
  .canvas .cards-equipment .responsive-card>.art{height:220px}
  .canvas .cards-documentation{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .canvas .cards-documentation>.responsive-card:first-child{grid-column:1/-1}
}
@media(max-width:350px){
  .canvas .responsive-card>.card-heading,.canvas .responsive-card>h3{font-size:20px}
  .canvas .cards-equipment .responsive-card>.art{height:210px}
  .canvas .cards-process .responsive-card>.art img{max-height:230px}
}