/* PH Metals · Our Success Stories · scroll-linked editorial section
   Scoped to #ph-success-stories to avoid changing other page styles. */
#ph-success-stories.ph-success-stories {
  --ss-ink:#172752; --ss-accent:#d65e63; --ss-blue:#183caa;
  --ss-pink:#ffeded; --ss-border:#eaa1a5;
  background:var(--ss-pink); color:var(--ss-ink);
  padding:0; margin:0; overflow:clip;
}
#ph-success-stories *,#ph-success-stories *::before,#ph-success-stories *::after{box-sizing:border-box}
#ph-success-stories .ph-success-heading{background:#ffeded;text-align:center;padding:68px 20px 54px;border-bottom:1px solid #f1c2c5}
#ph-success-stories .ph-success-heading h2{font-size:clamp(37px,4.2vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1.12;color:var(--ss-ink);margin:0}
#ph-success-stories .ph-success-heading p{max-width:740px;margin:16px auto 0;color:#666f88;line-height:1.6;font-size:15px}
#ph-success-stories .ph-success-layout{width:min(1280px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:74px;align-items:start}
#ph-success-stories .ph-success-navigation{position:sticky;top:min(30vh,240px);padding:32px 0;align-self:start;display:flex;flex-direction:column;gap:16px;z-index:2;max-width:200px}
#ph-success-stories .ph-success-navigation a{display:block;font-size:16px;line-height:1.45;color:#2647a1;text-decoration:none;transition:font-weight .2s ease,color .2s ease,transform .25s ease;outline-offset:4px}
#ph-success-stories .ph-success-navigation a:hover{color:var(--ss-accent);transform:translateX(4px)}
#ph-success-stories .ph-success-navigation a[aria-current="true"]{font-weight:800;color:var(--ss-blue)}
#ph-success-stories .ph-success-entries{min-width:0}
#ph-success-stories .ph-success-item{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(310px,.92fr);align-items:center;column-gap:65px;min-height:min(92svh,820px);padding:70px 0;scroll-margin-top:110px;position:relative}
#ph-success-stories .ph-success-info{min-width:0;max-width:515px}
#ph-success-stories .ph-success-info .ph-success-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-blue);margin:0 0 12px}
#ph-success-stories .ph-success-info h3{font-size:clamp(28px,2.6vw,39px);font-weight:600;line-height:1.14;letter-spacing:-.018em;color:var(--ss-accent);margin:0 0 20px}
#ph-success-stories .ph-success-info>p{font-size:16px;line-height:1.52;color:var(--ss-ink);margin:0 0 27px;max-width:510px}
#ph-success-stories .ph-success-highlights{border:1px solid var(--ss-border);padding:26px 32px 23px;margin:0 0 24px;background:transparent}
#ph-success-stories .ph-success-highlights strong{font-size:11px;color:var(--ss-blue);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
#ph-success-stories .ph-success-highlights ol{list-style:none;padding:15px 0 0;margin:0;counter-reset:ss-number;display:grid;gap:15px}
#ph-success-stories .ph-success-highlights li{counter-increment:ss-number;display:flex;align-items:baseline;gap:25px;font-size:14px;line-height:1.4;color:var(--ss-blue)}
#ph-success-stories .ph-success-highlights li:before{content:counter(ss-number, decimal-leading-zero) '.';font-weight:800;flex:none}
#ph-success-stories .ph-success-cta{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:52px;padding:12px 22px;background:#3b4267;color:#fff;text-decoration:none;font-size:13px;font-weight:700;transition:background .25s,transform .25s}
#ph-success-stories .ph-success-cta span:last-child{font-size:23px;line-height:1;transition:transform .25s}
#ph-success-stories .ph-success-cta:hover{background:#182957;color:#fff;transform:translateY(-2px)}
#ph-success-stories .ph-success-cta:hover span:last-child{transform:translateX(5px)}
#ph-success-stories .ph-success-figure{margin:0;position:relative;min-width:0;max-width:495px;width:100%;justify-self:end}
#ph-success-stories .ph-success-photo{width:100%;height:455px;overflow:hidden;position:relative;background:#172752}
#ph-success-stories .ph-success-photo:after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(7,20,49,.83));pointer-events:none}
#ph-success-stories .ph-success-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
#ph-success-stories .ph-success-figure:hover img{transform:scale(1.055)}
#ph-success-stories .ph-success-figure .ph-success-number{position:absolute;z-index:1;top:-18px;left:-77px;color:rgba(255,255,255,.76);font-size:clamp(75px,7vw,116px);line-height:1;font-weight:900;letter-spacing:-.06em;pointer-events:none;text-shadow:0 1px 12px #17275228}
#ph-success-stories .ph-success-gallery{display:inline-flex;gap:8px;align-items:center;position:absolute;z-index:1;left:24px;bottom:19px;color:white;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.04em}
#ph-success-stories .ph-success-gallery:hover{text-decoration:underline}
#ph-success-stories .ph-success-footer{width:min(1280px,calc(100% - 80px));margin:0 auto;padding:0 0 85px;display:flex;justify-content:flex-end}
#ph-success-stories .ph-success-all{font-weight:750;font-size:13px;color:var(--ss-blue);text-decoration:none;padding:12px 0}
#ph-success-stories .ph-success-all:hover{text-decoration:underline}
/* Reveal is opt-in when JS has attached observers; content remains visible if JS fails. */
#ph-success-stories.ph-success-animate .ph-success-item:not(.is-visible) .ph-success-info{opacity:.4;transform:translateY(24px)}
#ph-success-stories.ph-success-animate .ph-success-item:not(.is-visible) .ph-success-figure{opacity:.45;transform:translateY(24px) scale(.985)}
#ph-success-stories .ph-success-info,#ph-success-stories .ph-success-figure{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.72,.25,1)}
#ph-success-stories .ph-success-item.is-visible .ph-success-info,#ph-success-stories .ph-success-item.is-visible .ph-success-figure{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:1150px){
 #ph-success-stories .ph-success-layout{width:min(1100px,calc(100% - 44px));grid-template-columns:155px minmax(0,1fr);gap:30px}
 #ph-success-stories .ph-success-item{gap:40px;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr)}
 #ph-success-stories .ph-success-figure .ph-success-number{left:-52px;font-size:78px}
 #ph-success-stories .ph-success-navigation a{font-size:14px}
 #ph-success-stories .ph-success-photo{height:375px}
}
@media(max-width:800px){
 #ph-success-stories .ph-success-heading{padding:46px 18px 32px}
 #ph-success-stories .ph-success-layout{display:block;width:100%}
 #ph-success-stories .ph-success-navigation{position:sticky;top:0;display:flex;flex-direction:row;gap:6px;overflow-x:auto;max-width:none;white-space:nowrap;align-items:center;padding:11px 14px;background:#ffededf7;box-shadow:0 2px 9px rgba(25,44,87,.07);scrollbar-width:thin;z-index:6}
 #ph-success-stories .ph-success-navigation a{font-size:12px;flex:0 0 auto;padding:8px 10px;border-radius:3px}
 #ph-success-stories .ph-success-navigation a[aria-current="true"]{background:#1d3a9b;color:white}
 #ph-success-stories .ph-success-navigation a:hover{transform:none}
 #ph-success-stories .ph-success-entries{width:calc(100% - 38px);margin:0 auto}
 #ph-success-stories .ph-success-item{grid-template-columns:1fr;gap:33px;min-height:0;padding:72px 0 84px;scroll-margin-top:105px;border-bottom:1px solid #eec9cb}
 #ph-success-stories .ph-success-info{max-width:100%}
 #ph-success-stories .ph-success-figure{justify-self:stretch;max-width:none;margin-left:24px;width:calc(100% - 24px)}
 #ph-success-stories .ph-success-figure .ph-success-number{left:-37px;top:-16px;font-size:76px}
 #ph-success-stories .ph-success-photo{height: min(76vw,440px)}
 #ph-success-stories .ph-success-footer{width:calc(100% - 38px);padding-bottom:56px}
}
@media(max-width:480px){
 #ph-success-stories .ph-success-heading h2{font-size:35px}
 #ph-success-stories .ph-success-heading p{font-size:13px}
 #ph-success-stories .ph-success-info h3{font-size:29px}
 #ph-success-stories .ph-success-info>p{font-size:14px}
 #ph-success-stories .ph-success-highlights{padding:22px 19px}
 #ph-success-stories .ph-success-highlights li{font-size:13px;gap:16px}
 #ph-success-stories .ph-success-cta{font-size:12px;padding:12px 16px}
 #ph-success-stories .ph-success-figure .ph-success-number{font-size:69px}
 #ph-success-stories .ph-success-photo{height:360px}
}
@media(prefers-reduced-motion:reduce){
 #ph-success-stories .ph-success-info,#ph-success-stories .ph-success-figure,#ph-success-stories .ph-success-photo img,#ph-success-stories .ph-success-cta,#ph-success-stories .ph-success-navigation a{transition:none!important;transform:none!important;opacity:1!important}
}