/* Direction-specific artwork and varied compositions, October 2026 revision. */
.direction-hero-art { display: block; width: 100%; height: auto; }
.service-hero-grid { grid-template-columns: 1fr .95fr; gap: 55px; }
.service-visual { position: relative; }
.service-visual::before { content: ''; position: absolute; z-index: 0; inset: 10% 0; background: radial-gradient(ellipse, #008c9920, transparent 70%); pointer-events: none; }
.direction-hero-art { position: relative; z-index: 1; }
.service-hero { padding-bottom: 65px; }
.scene-bottomline { padding-block: 20px; }
.solutions-showcase { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 34px 28px; }
.showcase-block { position: relative; min-width: 0; overflow: hidden; }
.showcase-copy { position: relative; z-index: 2; }
.showcase-copy > .mono { display: block; font-size: 9px; letter-spacing: .07em; color: #526e75; }
.showcase-copy h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.045em; }
.showcase-copy > p { color: #486771; font-size: 13px; line-height: 1.9; }
.showcase-link { display: inline-flex; align-items: center; gap: 17px; font-size: 12px; font-weight: 700; }
.showcase-link svg { width: 20px; height: 20px; transition: transform .2s; }
.showcase-block:hover .showcase-link svg { transform: translateX(5px); }
.showcase-visual { position: relative; z-index: 1; min-width: 0; }
.showcase-visual .mini-art { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.showcase-ai { grid-column: span 7; display: flex; align-items: center; min-height: 460px; padding: 37px; background: #0c3039; color: #f1f7f8; border-radius: 7px; }
.showcase-ai .showcase-copy { max-width: 310px; }
.showcase-ai .mono { color: #a8c7ce; margin-bottom: 75px; }
.showcase-ai h3 { font-size: 37px; max-width: 330px; }
.showcase-ai p { color: #b4d0d6; max-width: 295px; margin-top: 22px; }
.showcase-ai .showcase-link { margin-top: 28px; color: #69d8db; }
.showcase-ai .showcase-visual { position: absolute; width: 350px; right: 10px; top: 108px; opacity: .9; }
.showcase-software { grid-column: span 5; display: flex; flex-direction: column-reverse; padding: 0 0 3px 27px; border-left: 1px solid #d1e0e4; }
.showcase-software .showcase-visual { width: 100%; max-width: 480px; align-self: center; }
.showcase-software .mono { margin-block: 12px 17px; }
.showcase-software h3 { font-size: 31px; }
.showcase-software p { max-width: 420px; margin-top: 16px; }
.showcase-software .showcase-link { margin-top: 22px; }
.showcase-automation { grid-column: span 8; display: grid; grid-template-columns: .95fr 1fr; align-items: center; gap: 25px; border-block: 1px solid #c8dadf; padding: 28px 25px 28px 0; min-height: 300px; }
.showcase-automation .showcase-copy { grid-column: 2; grid-row: 1; }
.showcase-automation .showcase-visual { grid-column: 1; grid-row: 1; }
.showcase-automation .mono { margin-bottom: 23px; }
.showcase-automation p { margin-top: 17px; }
.showcase-automation .showcase-link { margin-top: 23px; }
.showcase-integration { grid-column: span 4; display: flex; flex-direction: column; padding: 8px 0 12px 25px; border-left: 1px solid #c8dadf; }
.showcase-integration .mono { margin-bottom: 23px; }
.showcase-integration h3 { font-size: 28px; }
.showcase-integration p { margin-top: 15px; font-size: 12px; }
.showcase-integration .showcase-link { margin-top: 18px; }
.showcase-integration .showcase-visual { width: 100%; margin-top: 8px; }
.showcase-integration .mini-art { width: 250px; max-width: 100%; margin-inline: auto; }
.showcase-monitoring { grid-column: span 7; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 5px; background: #0a2a33; color: #f1f7f8; padding: 35px; min-height: 350px; border-radius: 0; }
.showcase-monitoring .mono { color: #abc7cf; margin-bottom: 37px; font-size: 8px; }
.showcase-monitoring h3 { font-size: 30px; }
.showcase-monitoring p { color: #b4d0d6; margin-top: 20px; font-size: 12px; }
.showcase-monitoring .showcase-link { margin-top: 26px; color: #69d8db; font-size: 11px; }
.showcase-monitoring .showcase-visual { width: 100%; margin-left: 0; }
.showcase-analytics { grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; padding: 29px 30px 0; background: #edf4f4; }
.showcase-analytics .mono { margin-bottom: 21px; }
.showcase-analytics h3 { font-size: 29px; }
.showcase-analytics p { margin-top: 17px; font-size: 12px; max-width: 340px; }
.showcase-analytics .showcase-link { margin-top: 22px; }
.showcase-analytics .showcase-visual { width: 83%; margin: 15px 0 0 auto; }
.related-grid { display: flex; flex-direction: column; gap: 0; }
.related-direction { display: grid; grid-template-columns: 40px 1fr 1.2fr 24px; align-items: center; gap: 28px; border-top: 1px solid #c9dade; padding: 26px 0; }
.related-direction .mono { color: #527079; }
.related-direction h3 { font-size: 23px; line-height: 1.3; }
.related-direction p { color: #4b6b75; font-size: 12px; line-height: 1.8; }
.related-direction > svg { width: 22px; height: 22px; transition: transform .2s; }
.related-direction:hover > svg { transform: translateX(5px); }
@media (min-width:1700px) {
  .showcase-ai .showcase-visual { width: 410px; right: 10px; top: 85px; }
  .showcase-ai h3 { font-size: 42px; }
}
@media (max-width:1200px) {
  .solutions-showcase { gap: 27px 23px; }
  .showcase-ai { padding: 30px; min-height: 430px; }
  .showcase-ai .showcase-copy { max-width: 280px; }
  .showcase-ai h3 { font-size: 32px; }
  .showcase-ai .showcase-visual { right: 4px; opacity: .85; width: 295px; }
  .showcase-ai p { max-width: 250px; font-size: 12px; }
  .showcase-software { padding-left: 23px; }
  .showcase-software h3 { font-size: 28px; }
  .showcase-software p { font-size: 12px; }
  .showcase-copy > .mono { font-size: 8px; }
  .showcase-automation { grid-column: span 7; grid-template-columns: 1fr; padding: 23px 0; gap: 12px; }
  .showcase-automation .showcase-copy { grid-column: 1; grid-row: 1; }
  .showcase-automation .showcase-visual { grid-column: 1; grid-row: 2; width: 75%; margin-inline: auto; }
  .showcase-integration { grid-column: span 5; }
  .showcase-integration .showcase-visual { max-height: none; margin-top: 30px; }
  .showcase-integration .mini-art { width: 100%; }
  .showcase-monitoring { grid-template-columns: 1fr; padding: 30px; }
  .showcase-monitoring .showcase-copy { max-width: 390px; }
  .showcase-monitoring .showcase-visual { width: 75%; margin: 5px 0 0 auto; }
  .showcase-monitoring .mono { margin-bottom: 22px; }
  .showcase-analytics .showcase-visual { width: 100%; }
}
@media (max-width:1000px) {
  .service-hero-grid { gap: 25px; }
  .showcase-copy h3 { font-size: 27px; }
  .showcase-ai { grid-column: 1/-1; min-height: 365px; padding: 30px; }
  .showcase-ai .showcase-copy { max-width: 310px; }
  .showcase-ai .mono { margin-bottom: 40px; }
  .showcase-ai .showcase-visual { width: 320px; right: 12px; top: 72px; opacity: .9; }
  .showcase-software { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding: 0 0 25px; border-left: 0; border-bottom: 1px solid #c8dadf; }
  .showcase-software .showcase-visual { grid-column: 1; grid-row: 1; }
  .showcase-software .showcase-copy { grid-column: 2; grid-row: 1; }
  .showcase-monitoring { padding: 26px; }
  .showcase-analytics { padding: 26px 24px 0; }
  .related-direction { grid-template-columns: 24px 1fr 1fr 22px; gap: 20px; }
  .related-direction h3 { font-size: 20px; }
}
@media (max-width:760px) {
  .service-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-visual { width: 100%; max-width: 570px; justify-self: center; }
  .service-hero { padding-bottom: 42px; }
  .solutions-showcase { gap: 32px 22px; }
  .showcase-ai { grid-column: 1/-1; display: grid; grid-template-columns: 1fr .9fr; min-height: 350px; padding: 30px; }
  .showcase-ai .showcase-copy { max-width: none; }
  .showcase-ai .mono { margin-bottom: 42px; }
  .showcase-ai h3 { font-size: 31px; }
  .showcase-ai p { max-width: 310px; }
  .showcase-ai .showcase-visual { position: relative; width: 100%; top: auto; right: auto; margin-left: 0; opacity: .9; }
  .showcase-software { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; padding: 20px 0 27px; border-left: 0; border-bottom: 1px solid #c8dadf; }
  .showcase-software .showcase-visual { grid-column: 2; grid-row: 1; }
  .showcase-software .showcase-copy { grid-column: 1; grid-row: 1; }
  .showcase-software h3 { font-size: 29px; }
  .showcase-automation { grid-column: span 6; border-top: none; padding-top: 0; }
  .showcase-integration { grid-column: span 6; padding-top: 0; }
  .showcase-automation .showcase-visual { width: 100%; }
  .showcase-automation h3,.showcase-integration h3 { font-size: 25px; }
  .showcase-automation p,.showcase-integration p { font-size: 12px; }
  .showcase-monitoring { grid-column: 1/-1; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 320px; padding: 30px; }
  .showcase-monitoring .showcase-visual { width: 100%; margin-left: 0; }
  .showcase-monitoring h3 { font-size: 28px; }
  .showcase-analytics { grid-column: 1/-1; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 12px; padding: 27px; }
  .showcase-analytics .showcase-visual { width: 100%; margin-left: 0; }
  .showcase-analytics h3 { font-size: 28px; }
  .showcase-link { font-size: 11px; gap: 12px; }
  .showcase-copy > .mono { font-size: 7px; }
  .related-direction { grid-template-columns: 24px 1fr 22px; gap: 16px; padding: 24px 0; }
  .related-direction p { grid-column: 2; font-size: 12px; }
  .related-direction > svg { grid-column: 3; grid-row: 1; }
  .related-direction h3 { font-size: 23px; }
}
@media (max-width:480px) {
  .solutions-showcase { display: flex; flex-direction: column; gap: 30px; }
  .showcase-ai { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 26px 23px 0; }
  .showcase-ai .mono { margin-bottom: 30px; font-size: 8px; }
  .showcase-ai h3 { font-size: 33px; }
  .showcase-ai p { font-size: 13px; max-width: none; margin-top: 18px; }
  .showcase-ai .showcase-link { margin-top: 23px; font-size: 12px; }
  .showcase-ai .showcase-visual { width: 110%; margin: 8px -5% -5px; }
  .showcase-software { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 15px; padding: 0 0 30px; }
  .showcase-software .showcase-visual { width: 100%; }
  .showcase-software .mono { font-size: 8px; margin-top: 0; }
  .showcase-software h3 { font-size: 31px; }
  .showcase-software p { font-size: 13px; }
  .showcase-software .showcase-link { font-size: 12px; }
  .showcase-automation { padding: 0 0 28px; gap: 15px; }
  .showcase-automation h3,.showcase-integration h3 { font-size: 29px; }
  .showcase-automation .mono,.showcase-integration .mono { font-size: 8px; }
  .showcase-automation p,.showcase-integration p { font-size: 13px; }
  .showcase-automation .showcase-visual { width: 100%; }
  .showcase-integration { padding: 0; border-left: 0; }
  .showcase-integration .showcase-visual { margin-top: 20px; }
  .showcase-monitoring { display: flex; flex-direction: column; padding: 26px 23px 0; gap: 5px; }
  .showcase-monitoring h3 { font-size: 30px; }
  .showcase-monitoring p { font-size: 13px; }
  .showcase-monitoring .mono { font-size: 8px; }
  .showcase-monitoring .showcase-link { font-size: 12px; }
  .showcase-monitoring .showcase-visual { width: 108%; margin: 0 -4%; }
  .showcase-analytics { display: flex; flex-direction: column; padding: 26px 23px 6px; align-items: stretch; gap: 16px; }
  .showcase-analytics h3 { font-size: 30px; }
  .showcase-analytics p { font-size: 13px; }
  .showcase-analytics .mono { font-size: 8px; }
  .showcase-analytics .showcase-link { font-size: 12px; }
  .showcase-analytics .showcase-visual { width: 108%; margin: 0 -4%; }
  .related-direction h3 { font-size: 21px; }
}