.environment-hero { position: relative; min-height: var(--visual-hero-height); overflow: hidden; color: #fff; background: #111315; }
.environment-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.environment-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,13,.84) 0%, rgba(5,9,13,.58) 43%, rgba(5,9,13,.12) 76%, rgba(5,9,13,.04) 100%); }
.environment-hero-copy { position: relative; z-index: 1; display: flex; min-height: var(--visual-hero-height); padding: 48px 0 58px; flex-direction: column; justify-content: center; align-items: flex-start; }
.environment-hero h1 { max-width: 720px; margin: 0; font-size: var(--visual-hero-title); line-height: 1.08; letter-spacing: -.055em; word-break: keep-all; }
.environment-hero-copy > p:not(.solution-breadcrumb) { max-width: 630px; margin: 24px 0 0; color: rgba(255,255,255,.82); font-size: var(--visual-hero-subtitle); line-height: 1.7; word-break: keep-all; }

.environment-index { background: #fff; border-bottom: 1px solid #d6d8d9; }
.environment-index .solution-shell { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.environment-index a { display: flex; min-height: 72px; padding: 0 18px; align-items: center; justify-content: center; border-right: 1px solid #dfe1e2; font-size: 14px; font-weight: 720; text-align: center; word-break: keep-all; }
.environment-index a:first-child { border-left: 1px solid #dfe1e2; }
.environment-index a:hover, .environment-index a:focus-visible { color: #e60012; background: #f7f7f5; }

.environment-intro { padding: 96px 0 66px; background: #fff; }
.environment-intro .solution-section-head { margin-bottom: 0; }
.environment-cases { background: #f4f4f1; }
.environment-case { scroll-margin-top: calc(var(--header-h) + 50px); border-top: 1px solid #c9ccce; }
.environment-case-grid { display: grid; min-height: 580px; padding-top: 72px; padding-bottom: 72px; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); align-items: center; gap: 64px; }
.environment-case:nth-child(even) .environment-case-grid { grid-template-columns: minmax(390px, .88fr) minmax(0, 1.12fr); }
.environment-case:nth-child(even) figure { order: 2; }
.environment-case figure { position: relative; height: 420px; margin: 0; overflow: hidden; background: #d8dad9; }
.environment-case figure::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: #e60012; content: ""; }
.environment-case:nth-child(even) figure::after { background: #ef7d00; }
.environment-case figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.environment-case-copy h2 { margin: 0; font-size: clamp(36px, 4vw, 52px); line-height: 1.12; letter-spacing: -.05em; }
.environment-lead { margin: 20px 0 30px; color: #4f5457; font-size: 16px; line-height: 1.75; word-break: keep-all; }
.environment-spec { margin: 0; border-top: 2px solid #17191b; }
.environment-spec > div { display: grid; padding: 12px 0; grid-template-columns: 94px minmax(0, 1fr); border-bottom: 1px solid #cfd2d3; gap: 14px; font-size: 13px; }
.environment-spec dt { color: #777c80; }
.environment-spec dd { margin: 0; font-weight: 650; }
.environment-points { display: grid; margin: 28px 0 0; padding: 0; gap: 10px; list-style: none; }
.environment-points li { position: relative; padding-left: 16px; color: #54595c; font-size: 13px; line-height: 1.68; word-break: keep-all; }
.environment-points li::before { position: absolute; top: .72em; left: 0; width: 6px; height: 2px; background: #e60012; content: ""; }
.environment-case:nth-child(even) .environment-points li::before { background: #ef7d00; }

.environment-summary { padding: 100px 0 64px; background: #fff; }
.environment-table-wrap { overflow-x: auto; border-top: 2px solid #17191b; }
.environment-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; }
.environment-table th, .environment-table td { padding: 18px 16px; border-bottom: 1px solid #d7d9da; text-align: center; vertical-align: middle; }
.environment-table thead th { color: #606568; background: #f2f2ef; font-size: 12px; font-weight: 700; }
.environment-table tbody th { width: 170px; color: #17191b; font-size: 15px; }
.environment-table tbody td { color: #53585b; }
.environment-note { margin: 18px 0 0; color: #7d8285; font-size: 12px; }

@media (max-width: 980px) {
  .environment-case-grid, .environment-case:nth-child(even) .environment-case-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .environment-case figure { height: 360px; }
  .environment-index .solution-shell { overflow-x: auto; grid-template-columns: repeat(5, 190px); }
}

@media (max-width: 720px) {
  .environment-hero, .environment-hero-copy { min-height: 510px; }
  .environment-hero > img { object-position: 60% center; }
  .environment-hero-shade { background: rgba(5,9,13,.6); }
  .environment-hero-copy { padding: 34px 0 48px; justify-content: flex-end; }
  .environment-hero .solution-breadcrumb { margin-bottom: auto; }
  .environment-hero h1 { font-size: var(--visual-hero-title-mobile); line-height: 1.13; }
  .environment-hero-copy > p:not(.solution-breadcrumb) { margin-top: 19px; font-size: var(--visual-hero-subtitle-mobile); line-height: 1.65; }
  .environment-index { overflow: visible; }
  .environment-index .solution-shell { width: 100%; padding: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-index a { min-height: 54px; padding: 0 8px; border-bottom: 1px solid #dfe1e2; font-size: 12px; }
  .environment-index a:nth-child(odd) { border-left: 1px solid #dfe1e2; }
  .environment-index a:last-child { grid-column: 1 / -1; }
  .environment-intro { padding: 68px 0 46px; }
  .environment-case { scroll-margin-top: calc(var(--header-h) + 46px); }
  .environment-case-grid, .environment-case:nth-child(even) .environment-case-grid { display: block; min-height: 0; padding-top: 46px; padding-bottom: 58px; }
  .environment-case:nth-child(even) figure { order: initial; }
  .environment-case figure { width: 100%; height: auto; margin-bottom: 28px; aspect-ratio: 4 / 3; }
  .environment-case-copy h2 { font-size: 34px; }
  .environment-lead { margin: 14px 0 24px; font-size: 15px; }
  .environment-spec > div { grid-template-columns: 84px minmax(0, 1fr); font-size: 12px; }
  .environment-points { margin-top: 23px; }
  .environment-points li { font-size: 13px; }
  .environment-summary { padding: 70px 0 54px; }
}