/* Refined wash showcase and corporate responsibility panels. */
.denim-finishes {
  padding: 56px 0 40px;
  background: radial-gradient(ellipse at 100% 0, #224d7066, transparent 55%), #071e33;
}
.denim-finishes > .container { position: relative; }
.finishes-heading { padding-left: 19px; border-left: 3px solid #ed1221; margin-bottom: 30px; }
.finishes-heading h2 { font-size: clamp(28px, 2.8vw, 38px); }
.finishes-description { font-size: 13px; line-height: 1.7; }
.finishes-grid { padding: 18px; border: 1px solid #ffffff18; border-radius: 14px; background: #ffffff04; gap: 14px; }
.finish-swatch { border-radius: 7px; background: #102b43; box-shadow: 0 5px 16px #00000018; }
.finish-swatch img { height: 170px; }
.finish-swatch figcaption { padding: 16px 11px; font-size: 12px; }
.finishes-note { font-size: 11px; line-height: 1.65; }
.responsibility-section { padding: 48px 0; background: #f4f7fa; }
.responsibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.responsibility-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 14px; color: #fff; box-shadow: 0 10px 28px #09244012; isolation: isolate; }
.responsibility-green { background: radial-gradient(ellipse at 100% 20%, #386348, transparent 65%), #123b2b; }
.responsibility-blue { background: radial-gradient(ellipse at 100% 20%, #244f73, transparent 65%), #092942; }
.responsibility-copy { position: relative; z-index: 1; padding: 32px 32px 28px; flex: 1; }
.responsibility-art { position: absolute; z-index: 0; width: 280px; height: 280px; right: -90px; top: 10px; opacity: .25; pointer-events: none; }
.responsibility-art svg { width: 100%; height: 100%; stroke: #bad6c6; stroke-width: 1.2; fill: none; }
.responsibility-blue .responsibility-art svg { stroke: #bdd4e8; }
.responsibility-art .leaf-shape { fill: #92c7a622; stroke-width: 2; }
.responsibility-art .global-route { stroke: #ff6e77; stroke-width: 2; stroke-dasharray: 4 4; }
.responsibility-art .global-point { fill: #ff6e77; stroke: none; }
.responsibility-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff26; background: #ffffff0c; border-radius: 10px; margin-bottom: 20px; }
.responsibility-icon svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.responsibility-copy .eyebrow { color: #bad5c7; font-size: 10px; letter-spacing: 1.5px; margin-bottom: 12px; }
.responsibility-blue .eyebrow { color: #b6cee3; }
.responsibility-copy h2 { font-size: clamp(28px, 2.5vw, 35px); line-height: 1.12; letter-spacing: -.5px; margin-bottom: 18px; }
.responsibility-green h2 span { color: #c5dfce; }
.responsibility-blue h2 span { color: #b8d5ed; }
.responsibility-description { max-width: 420px; min-height: 88px; font-size: 13px; line-height: 1.75; color: #d1dfd7; margin-bottom: 20px; }
.responsibility-blue .responsibility-description { color: #cddae6; }
.responsibility-pillars { list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.responsibility-pillars li { padding: 7px 10px; border: 1px solid #ffffff26; border-radius: 4px; font-size: 10px; background: #ffffff07; }
.responsibility-button { display: inline-flex; align-items: center; gap: 20px; padding: 11px 16px; border: 0; border-radius: 5px; background: white; color: #123b2b; font-size: 11px; font-weight: 700; transition: background .2s; }
.responsibility-blue .responsibility-button { color: var(--navy); }
.responsibility-button span { font-size: 20px; line-height: 1; }
.responsibility-button:hover { background: #e5edf3; }
.responsibility-bottom { padding: 16px 32px; border-top: 1px solid #ffffff19; background: #0000000c; color: #c5d4cd; font-size: 10px; display: flex; align-items: center; gap: 8px; }
.responsibility-blue .responsibility-bottom { color: #bacee0; }
.responsibility-dot { width: 5px; height: 5px; border-radius: 50%; background: #a5d6b5; flex-shrink: 0; }
.responsibility-blue .responsibility-dot { background: #ff606a; }
@media (max-width: 1199px) { .finishes-grid { gap: 10px; padding: 14px; } .finish-swatch figcaption { font-size: 11px; padding: 14px 9px; } .responsibility-copy { padding: 28px; } .responsibility-description { min-height: 112px; } }
@media (max-width: 991px) { .finish-swatch img { height: 190px; } .responsibility-grid { gap: 18px; } .responsibility-copy { padding: 26px; } .responsibility-copy h2 { font-size: 28px; } .responsibility-description { min-height: 160px; } .responsibility-bottom { padding: 16px 26px; line-height: 1.6; } }
@media (max-width: 767px) { .responsibility-grid { grid-template-columns: 1fr; } .responsibility-description { min-height: 0; max-width: 440px; } .responsibility-copy h2 { font-size: 32px; } }
@media (max-width: 575px) { .denim-finishes { padding: 36px 0 28px; } .finishes-heading { padding-left: 14px; margin-bottom: 24px; } .finishes-heading h2 { font-size: 28px; } .finishes-grid { gap: 12px; padding: 12px; } .finish-swatch img { height: 155px; } .responsibility-section { padding: 28px 0; } .responsibility-copy { padding: 25px 22px; } .responsibility-copy h2 { font-size: 29px; } .responsibility-bottom { padding: 16px 22px; } .responsibility-art { right: -120px; } }