/* Reserve the final dot row before app.js runs so the centered hero never reflows. */
.hero .slide-dots{min-height:25px;flex-shrink:0}

/* Selected Works category badges are independent links beside each project title. */
#work-grid .work-caption a.badge{cursor:pointer;text-decoration:none}
#work-grid .work-caption a.badge:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Give longer Topics titles more room beside the Company summary. */
@media(min-width:601px){
  .bottom{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
  .bottom>div{min-width:0}
  .bottom .topic-row{grid-template-columns:auto minmax(0,1fr)}
  .bottom .topic-row>span:last-child{min-width:0;overflow-wrap:anywhere}
}

/* Keep edge alignment and let labels move outside the section without clipping. */
.works,.bottom{content-visibility:visible;overflow:visible}
.works>.section-heading .all-works,.topics-block>.section-heading .all-works{
  padding-inline:2px;
  margin-right:-2px;
  transition:color .25s;
}
.works>.section-heading .all-works:hover,.works>.section-heading .all-works:focus-visible,
.topics-block>.section-heading .all-works:hover,.topics-block>.section-heading .all-works:focus-visible{
  color:var(--blue);
  transform:none;
}
.all-works>span{display:inline-block;pointer-events:auto;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.all-works:hover>span,.all-works:focus-visible>span{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
  .all-works,.all-works>span{transition:none!important}
  .all-works:hover>span,.all-works:focus-visible>span{transform:none}
}

/* Double the space between the Company/Topics block and the footer. */
.bottom{padding-bottom:84px}

/* v10-56: only the centered mobile Hero card has a title. */
@media(max-width:600px){
  .panel-category{display:none}
  .panel-title{font-size:8px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  .panel:not(.is-mobile-center) .panel-meta{visibility:hidden;opacity:0}
  .panel.is-mobile-center .panel-meta{visibility:visible;opacity:1}
  .works{padding-top:33px}
}

/* v10-57: compact only the mobile Hero's lower spacing. */
@media(max-width:600px){
  .panel-captions .carousel{height:calc(var(--panel-width)*.5625 + 76px)}
  .hero{padding-bottom:8px}
  .works{padding-top:16.5px}
}

/* Keep a horizontal swipe separate from page scrolling and native image drag. */
.carousel,.carousel .panel{touch-action:pan-y pinch-zoom}
.webgl-ambient body>.ambient i,.webgl-ambient body>.ambient i::before,
.webgl-footer footer>.footer-ambient i,.webgl-footer footer>.footer-ambient i::before{animation:none!important}

/* Tablet captions stay inside their own card instead of crossing its neighbour. */
@media(min-width:601px) and (max-width:1100px){
  .panel-meta{left:10%;width:80%;line-height:1.4}
  .panel-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font-size:clamp(14px,2.2vw,18px);letter-spacing:0}
}

/* Both columns keep the same heading row, including the 501-600px overlap. */
@media(min-width:501px) and (max-width:1100px){
  .bottom{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;column-gap:clamp(24px,4vw,40px)}
  .bottom>#service,.bottom .topics-block{display:flex;flex-direction:column}
  .bottom .topics-block{padding-top:0;border-top:0}
  .bottom>#service>h2,.bottom .topics-block>.section-heading{display:flex;flex:0 0 auto;align-items:center;height:38px;min-height:38px;margin:0 0 24px}
  .bottom .topics-block>.section-heading{gap:12px}
  .bottom .topics-block h2{margin:0}
  .bottom .service-row{display:flex;flex:1 1 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;height:auto;min-height:81px;padding:12px 0;text-align:left}
  .bottom .service-row strong{flex:0 0 auto;align-self:auto;font-size:21px;line-height:1.4}
  .bottom .service-row>.service-detail{display:block;flex:0 0 auto;align-self:auto;margin:0;min-width:0;line-height:1.55;overflow-wrap:anywhere}
  .bottom .topic-row{flex:1 1 auto}
}

/* Smaller captions leave more of each project name visible. */
#work-grid .work-caption{gap:8px}
#work-grid .work-title{min-width:0;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
#work-grid .badge{flex:0 0 auto;min-height:22px;padding:5px 7px 3px;font-size:10px;line-height:1.2}
@media(max-width:1100px){
  #work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work-grid .work-caption{flex-direction:column;align-items:flex-start;gap:6px}
  #work-grid .work-title{font-size:13px}
}
@media(max-width:600px){
  #work-grid .work-title{font-size:12px}
  .bottom .topic-row{grid-template-columns:minmax(0,1fr)}
  .bottom .topic-row>.topic-label{display:none}
}