/* Social Responsibility follows the current Service Excellence page frame.
   This sheet loads after the page's legacy styles and is scoped to this page. */
.responsibility-v2{position:relative;background:var(--paper);
 --sr-deep:radial-gradient(78% 70% at 0% 0%,rgba(var(--blue-rgb),.34),transparent 62%),
 radial-gradient(60% 55% at 100% 100%,rgba(var(--blue-rgb),.12),transparent 66%),var(--ground);
 --sr-pad:clamp(72px,8.6vw,116px);--sr-gap:14px}
.responsibility-v2 .responsibility-field{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(72% 18% at 2% 20%,rgba(var(--blue-rgb),.16),transparent 72%),
 radial-gradient(66% 17% at 100% 46%,rgba(var(--red-rgb),.09),transparent 74%),
 radial-gradient(70% 18% at 0% 72%,rgba(var(--blue-rgb),.13),transparent 74%)}
.responsibility-v2 main{position:relative;z-index:1;overflow:clip}
.responsibility-v2 .bar{z-index:12}
.responsibility-v2 .responsibility-shell{width:100%;max-width:none;margin:0;padding-left:40px;padding-right:40px}
.responsibility-v2 .responsibility-label{font-family:'TTS';font-size:12px;line-height:1;
 letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}

/* Full-screen industrial opening, matching Service Excellence. */
.responsibility-v2 .responsibility-hero{position:relative;min-height:100svh;display:flex;
 align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--ground);color:#fff}
.responsibility-v2 .responsibility-hero::before,
.responsibility-v2 .responsibility-hero::after{content:none}
.responsibility-hero-media,.responsibility-hero-shade{position:absolute;inset:0}
.responsibility-hero-media{z-index:-2;overflow:hidden}
.responsibility-hero-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 52%;
 filter:saturate(.78) contrast(1.04);transform:scale(1.065);
 animation:responsibility-camera 2.1s cubic-bezier(.2,.7,.2,1) .1s both}
.responsibility-hero-shade{z-index:-1;background:
 linear-gradient(90deg,rgba(8,14,22,.9) 0%,rgba(8,14,22,.65) 44%,rgba(8,14,22,.18) 78%),
 linear-gradient(0deg,rgba(8,14,22,.91) 0%,rgba(8,14,22,.08) 55%,rgba(8,14,22,.5) 100%)}
.responsibility-hero-content{width:100%;min-height:inherit;padding:130px 40px 34px;
 display:flex;flex-direction:column;justify-content:flex-end}
.responsibility-hero-copy{max-width:900px;padding-left:18px;border-left:3px solid var(--flare)}
.responsibility-v2 .responsibility-hero .responsibility-label{padding-top:0;margin-bottom:16px;
 color:rgba(255,255,255,.67)}
/* The size is tied to the measure, not to a breakpoint: the longest line is
   12.68x the font size in TT Squares Condensed and the copy box is the viewport
   less 61px, so 6vw fills it from 320 up and still leaves the rail 9px of air. The 5.3vw
   it carried was inherited from Service excellence, whose headline is a
   different length, and left this one small on a phone. RE-MEASURE the ratio if
   the words change. */
.responsibility-v2 .responsibility-hero h1{max-width:none;font-family:'TTS';font-weight:400;
 text-transform:uppercase;letter-spacing:-.0074em;font-size:clamp(17px,6vw,54px);
 line-height:1.04;color:#fff;word-spacing:normal}
.responsibility-v2 .responsibility-hero h1 span{display:block;white-space:nowrap}
.responsibility-v2 .responsibility-hero h1 span:last-child{color:var(--flare)}
.responsibility-v2 .responsibility-hero .lede{max-width:65ch;margin-top:18px;
 font-size:clamp(16px,1.25vw,18px);line-height:1.66;color:rgba(255,255,255,.78)}
@keyframes responsibility-camera{from{transform:scale(1.065)}to{transform:scale(1.015)}}

/* Three commitments in the same card system as Service Excellence. */
.responsibility-v2 .responsibility-pillars{padding:var(--sr-pad) 0;background:transparent}
.responsibility-v2 .responsibility-copy h2{max-width:24ch;font-family:'TTS';font-weight:400;
 text-transform:uppercase;letter-spacing:-.0074em;font-size:clamp(31px,4vw,52px);
 line-height:1.05;color:var(--ink)}
.responsibility-v2 .responsibility-copy>p{max-width:none;width:100%;margin-top:20px;font-size:17px;
 line-height:1.7;color:var(--slate)}
.responsibility-v2 .responsibility-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px;margin-top:clamp(48px,6vw,72px)}
.responsibility-v2 .responsibility-card{position:relative;isolation:isolate;min-height:370px;
 padding:30px;display:flex;flex-direction:column;overflow:hidden;background:#fff;
 border:1px solid rgba(19,26,38,.08);border-radius:var(--r);
 box-shadow:0 12px 34px rgba(19,26,38,.055);
 transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.responsibility-v2 .responsibility-card::before{content:"";position:absolute;z-index:-1;inset:0;
 background:var(--ground);clip-path:circle(0 at calc(100% - 60px) 58px);
 transition:clip-path .58s cubic-bezier(.2,.75,.15,1)}
.responsibility-v2 .responsibility-card::after{content:"";position:absolute;left:30px;right:30px;
 bottom:0;height:3px;transform:scaleX(0);transform-origin:left;
 background:linear-gradient(90deg,var(--blue),var(--flare));
 transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.responsibility-v2 .responsibility-card-top{display:flex;align-items:flex-start;
 justify-content:space-between;gap:20px}
.responsibility-v2 .responsibility-number{font-family:'TTS';font-size:12px;
 letter-spacing:.18em;color:var(--silver);transition:color .3s ease}
.responsibility-v2 .responsibility-card svg{width:62px;height:62px;padding:13px;flex:none;
 border-radius:var(--r);fill:none;stroke:var(--flare);stroke-width:1.5;
 stroke-linecap:round;stroke-linejoin:round;background:rgba(var(--red-rgb),.09);
 transition:background .3s ease,stroke .3s ease}
.responsibility-v2 .responsibility-card h3{margin-top:0;padding-top:72px;
 font-family:'TTS';font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.05;
 min-height:calc(72px + 2.1em);text-transform:uppercase;color:var(--ink);
 transition:color .3s ease,transform .35s ease}
/* justified, like every other paragraph on the site */
.responsibility-v2 .responsibility-card p{flex:1;margin-top:15px;font-size:15.5px;line-height:1.67;
 color:var(--slate);text-align:justify;hyphens:none;-webkit-hyphens:none;
 transition:color .3s ease,transform .35s ease}
.responsibility-v2 .responsibility-note{display:block;margin-top:22px;font-family:'TTS';
 font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
 transition:color .3s ease,transform .35s ease}
.responsibility-v2 .responsibility-card:hover{transform:translateY(-8px);
  border-color:rgba(19,26,38,.04);box-shadow:0 26px 56px rgba(19,26,38,.15)}
 .responsibility-v2 .responsibility-card:hover::before{clip-path:circle(160% at calc(100% - 60px) 58px)}
 .responsibility-v2 .responsibility-card:hover::after{transform:scaleX(1)}
 .responsibility-v2 .responsibility-card:hover svg{transform:none;background:var(--flare);stroke:#fff}
 .responsibility-v2 .responsibility-card:hover h3,
 .responsibility-v2 .responsibility-card:hover p,
 .responsibility-v2 .responsibility-card:hover .responsibility-note{transform:translateY(-3px)}
 .responsibility-v2 .responsibility-card:hover h3{color:#fff}
 .responsibility-v2 .responsibility-card:hover p{color:rgba(255,255,255,.67)}
 .responsibility-v2 .responsibility-card:hover .responsibility-number{color:rgba(255,255,255,.42)}
.responsibility-v2 .responsibility-card:hover .responsibility-note{color:var(--blue-lt)}

/* One concise closing statement in the same dark band. */
.responsibility-pair{position:relative;background:var(--sr-deep)}
.responsibility-close{padding:var(--sr-pad) 0;color:#fff}
.responsibility-close-copy{display:grid;place-items:center}
.responsibility-close-copy p{max-width:28ch;font-size:clamp(20px,2.4vw,34px);line-height:1.32;
 text-align:center;color:#fff;text-wrap:balance}
.responsibility-close-copy em{display:block;margin-top:.5em;font-style:normal;color:var(--flare)}

.responsibility-v2 .responsibility-cta{padding:clamp(30px,4.2vh,54px) 40px;
 padding-bottom:calc(clamp(30px,4.2vh,54px) + 8px);background:var(--paper);
 border-top:1px solid var(--mist)}
.responsibility-v2 .responsibility-cta .inner{display:flex;align-items:center;
 justify-content:space-between;gap:40px;width:100%;max-width:1360px;margin:0 auto}
.responsibility-v2 .responsibility-cta h2{font-family:'TTS';font-weight:400;text-transform:uppercase;
 font-size:clamp(25px,3vw,38px);line-height:1.1;color:var(--flare)}
.responsibility-v2 .responsibility-cta p{max-width:none;margin-top:var(--sr-gap);
 font-size:16.5px;line-height:1.6;color:var(--slate)}
.responsibility-v2 .responsibility-cta .cta{margin:0;flex:none}

.responsibility-v2.motion-ready .responsibility-reveal{opacity:1;transform:translateY(24px);
 transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.responsibility-v2.motion-ready .responsibility-reveal.in-view{transform:none}

@media (min-width:1200px) and (min-height:760px){
 /* The hero and commitment screen retain a gentle landing point. Everything
    after section two is ordinary, free-flowing document scroll. */
 html{scroll-snap-type:y proximity;scroll-behavior:smooth}
 .responsibility-v2 main>section{scroll-snap-align:start;scroll-snap-stop:always;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center}
 .responsibility-v2 .responsibility-hero{justify-content:flex-end}
 .responsibility-v2 .responsibility-pair,.responsibility-v2 .responsibility-cta{
  min-height:0;display:block;scroll-snap-align:none}
 .responsibility-v2 footer{scroll-snap-align:none}
}
@media (min-width:901px) and (max-height:830px){
 .responsibility-v2{--sr-pad:clamp(48px,6.4vh,86px)}
 .responsibility-v2 .responsibility-card{min-height:340px}
 .responsibility-v2 .responsibility-card h3{padding-top:48px}
}
@media (max-width:900px){
 html{scroll-snap-type:none}
 .responsibility-v2{--sr-pad:64px}
 .responsibility-v2 main>section{scroll-snap-align:none}
 .responsibility-v2 .responsibility-shell{padding-left:22px;padding-right:22px}
 .responsibility-hero-media img{object-position:53% 54%}
 .responsibility-hero-shade{background:
  linear-gradient(90deg,rgba(8,14,22,.86),rgba(8,14,22,.35)),
  linear-gradient(0deg,rgba(8,14,22,.94) 0%,rgba(8,14,22,.22) 60%,rgba(8,14,22,.54) 100%)}
 .responsibility-hero-content{padding:96px 22px 24px}
 .responsibility-hero-copy{padding-left:14px}
 .responsibility-v2 .responsibility-hero .lede{font-size:16px;text-align:justify;
  hyphens:none;-webkit-hyphens:none}
 .responsibility-v2 .responsibility-copy h2{font-size:31px}
 .responsibility-v2 .responsibility-copy>p{font-size:16px}
 .responsibility-v2 .responsibility-cards{grid-template-columns:1fr;margin-top:36px;gap:14px}
 .responsibility-v2 .responsibility-card{min-height:0;padding:26px 22px}
 .responsibility-v2 .responsibility-card h3{padding-top:44px;min-height:calc(44px + 2.1em)}
 .responsibility-v2 .responsibility-card::after{left:22px;right:22px}
 .responsibility-v2 .responsibility-cta{padding:34px 22px 44px}
 .responsibility-v2 .responsibility-cta p{text-align:justify;hyphens:none;-webkit-hyphens:none}
 .responsibility-v2 .responsibility-cta .inner{display:block}
 .responsibility-v2 .responsibility-cta .cta{margin-top:24px;width:100%}
}
@media (prefers-reduced-motion:reduce){
 .responsibility-hero-media img{animation:none;transform:none}
 .responsibility-v2.motion-ready .responsibility-reveal{transform:none;transition:none}
 .responsibility-v2 .responsibility-card,.responsibility-v2 .responsibility-card::before,
 .responsibility-v2 .responsibility-card::after,.responsibility-v2 .responsibility-card svg,
 .responsibility-v2 .responsibility-card h3,.responsibility-v2 .responsibility-card p,
 .responsibility-v2 .responsibility-number,.responsibility-v2 .responsibility-note{transition:none}
}