/* ============================================================
   Gold Standard shared feature components (from the Website features library)
   .ss  Sticky Scroll Steps (retention flow)
   .sd  Stacked Card Deck (dashboard screenshots)
   .pc  Progress Media Carousel (case study rail)
   Behaviour lives in gs-features.js. Each block is skinned with its own --ss/--sd/--pc tokens.
   ============================================================ */
/* ═══ RETENTION FLOW (Sticky Scroll Steps, GS skin) ═══ */
.ss{
  --ss-bg:#FAF8F3; --ss-panel:#E8F0EA; --ss-ink:#1C1C18; --ss-muted:#6B6B62; --ss-line:rgba(82,117,93,.22);
  --ss-accent:#3D5A47; --ss-deep:#3D5A47; --ss-top:calc(var(--nav-h) + 8vh);
  --ss-art-ink:#FAF8F3; --ss-art-dim:rgba(250,248,243,.22); --ss-art-acc:#E0C068; --ss-art-acc2:#C8A84B;
  background:var(--ss-bg); color:var(--ss-ink); font-family:'Inter',sans-serif; padding:clamp(64px,8vw,110px) 20px;
}
.ss__wrap{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px)}
.ss__aside{position:sticky;top:var(--ss-top);align-self:start;display:grid;gap:26px}
.ss__kicker{font:600 12px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-accent)}
.ss__aside h2{margin:0;font:700 clamp(30px,3.6vw,46px)/1.08 'Poppins',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.ss__aside p{margin:0;color:var(--ss-muted);font-size:16px;line-height:1.6;max-width:42ch}
.ss__nav{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:4px;position:relative}
.ss__nav::before,.ss__nav::after{content:"";position:absolute;left:0;top:8px;width:2px;border-radius:2px}
.ss__nav::before{bottom:8px;background:var(--ss-line)}
.ss__nav::after{height:calc((100% - 16px) * var(--ss-progress,0));background:var(--gold);transition:height .5s cubic-bezier(.2,.7,.2,1)}
.ss__nav button{all:unset;cursor:pointer;display:flex;align-items:baseline;padding:9px 16px;border-radius:50px;font:600 18px/1.3 'Poppins',sans-serif;color:var(--ss-muted);transition:color .3s,background .3s}
.ss__nav button[aria-current="step"]{color:var(--ss-ink);background:var(--ss-panel)}
.ss__nav button:focus-visible{outline:2px solid var(--ss-accent);outline-offset:2px}
.ss__panels{display:grid;gap:clamp(48px,14vh,160px);padding-block:4vh 12vh}
.ss__panel{display:grid;gap:18px;scroll-margin-top:var(--ss-top)}
.ss__art{aspect-ratio:4/3;border-radius:14px;background:var(--ss-deep);overflow:hidden;position:relative;
  box-shadow:0 4px 32px rgba(28,28,24,.12);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;opacity:.45;transform:scale(.96)}
.ss__panel.is-active .ss__art{opacity:1;transform:none}
.ss__art svg{display:block;width:100%;height:100%}
.ss__panel h3{margin:0;font:700 clamp(22px,2.4vw,28px)/1.2 'Poppins',sans-serif}
.ss__panel p{margin:0;color:var(--ss-muted);font-size:17px;line-height:1.6;max-width:52ch}
.ss__panel a{color:var(--ss-accent);font-weight:600;text-decoration:none;font-size:15px}
.ss__panel a:hover{color:var(--gold-dark,#A88930)}
.ss__art .draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1) .15s}
.ss__panel.is-active .ss__art .draw{stroke-dashoffset:0}
.ss__art .pop{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ss__panel.is-active .ss__art .pop{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 1ms + 400ms)}
.ss__art .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.08);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ss__panel.is-active .ss__art .bar{transform:none;transition-delay:calc(var(--d,0) * 1ms)}
@media (max-width:860px){
  .ss__wrap{grid-template-columns:minmax(0,1fr)}
  .ss__aside{position:static}
  .ss__nav{display:none}
  .ss__art{opacity:1;transform:none}
  .ss__panels{gap:56px;padding-block:0}
}
@media (prefers-reduced-motion:reduce){
  .ss__art,.ss__art *{transition:none!important;animation:none!important}
  .ss__art{opacity:1;transform:none}
  .ss__art .draw{stroke-dashoffset:0} .ss__art .pop{opacity:1;transform:none} .ss__art .bar{transform:none}
}

/* ═══ DASHBOARD DECK (Stacked Card Deck) ═══ */
.sd{
  --sd-bg:#3D5A47; --sd-bg-2:#2f4738; --sd-card:#FDFCF9; --sd-ink:#FAF8F3; --sd-muted:#c9d6cd; --sd-accent:#E0C068;
  --sd-step:62vh;
  position:relative; background:radial-gradient(70% 60% at 85% 30%,rgba(224,192,104,.14),transparent 70%),linear-gradient(180deg,var(--sd-bg),var(--sd-bg-2));
  color:var(--sd-ink); font-family:'Inter',sans-serif;
}
.sd__track{position:relative}
.sd__pin{position:sticky;top:var(--nav-h);min-height:calc(100vh - var(--nav-h));display:grid;align-items:center;padding:clamp(32px,6vw,80px) 20px;overflow:hidden}
.sd__wrap{max-width:1160px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.sd__tag{font:600 12px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sd-accent)}
.sd__copy h2{margin:16px 0 14px;font:700 clamp(28px,3.6vw,44px)/1.1 'Poppins',sans-serif;letter-spacing:-.02em;text-wrap:balance;color:var(--sd-ink)}
.sd__copy p{margin:0;color:var(--sd-muted);font-size:17px;line-height:1.6;max-width:44ch}
.sd__meter{display:flex;gap:6px;margin-top:26px}
.sd__meter i{height:4px;flex:1;max-width:34px;border-radius:2px;background:rgba(250,248,243,.22);transition:background .3s}
.sd__meter i.on{background:var(--sd-accent)}
.sd__copy .sd__caption{margin-top:16px;font-size:14px;color:var(--sd-ink);min-height:1.5em}
.sd__deck{position:relative;aspect-ratio:16/11;max-width:100%}
.sd__card{position:absolute;inset:0;margin:0;background:var(--sd-card);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.45),0 0 0 1px rgba(28,28,24,.06);
  display:grid;place-items:center;padding:clamp(10px,2vw,22px);transform-origin:50% 100%;will-change:transform,opacity}
.sd__card img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:0}
.sd__card figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:820px){
  .sd__wrap{grid-template-columns:minmax(0,1fr);gap:22px}
  .sd__copy h2{font-size:clamp(24px,6.4vw,30px);margin:12px 0 10px}
  .sd__copy p{font-size:15px}
  .sd__meter{margin-top:16px}
  .sd__deck{aspect-ratio:16/12}
}
.sd.is-static .sd__track{height:auto!important}
.sd.is-static .sd__pin{position:static;min-height:0}
.sd.is-static .sd__deck{aspect-ratio:auto;display:grid;gap:16px}
.sd.is-static .sd__card{position:relative;inset:auto;transform:none!important;opacity:1!important}
.sd.is-static .sd__card figcaption{position:static;width:auto;height:auto;clip:auto;color:#3A3A35;font-size:13px;margin-top:10px;justify-self:start}
.sd.is-static .sd__meter,.sd.is-static .sd__caption{display:none}

/* ═══ CASE STUDY CAROUSEL (Progress Media Carousel) ═══ */
.pc{
  --pc-bg:#FAF8F3; --pc-card:#FDFCF9; --pc-card-hi:#3D5A47; --pc-ink:#1C1C18; --pc-mid:#3A3A35; --pc-muted:#6B6B62;
  --pc-accent:#3D5A47; --pc-gold:#C8A84B; --pc-line:rgba(82,117,93,.18);
  --pc-card-w:clamp(270px,30vw,360px);
  background:var(--pc-bg); color:var(--pc-ink); font-family:'Inter',sans-serif; padding-block:clamp(56px,8vw,96px);
}
.pc__head{max-width:1160px;margin:0 auto 28px;padding-inline:20px;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:end;justify-content:space-between}
.pc__tag{font:600 12px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-accent)}
.pc__head h2{margin:12px 0 0;font:700 clamp(28px,3.6vw,42px)/1.1 'Poppins',sans-serif;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.pc__ctrls{display:flex;gap:10px;align-items:center}
.pc__all{font:600 14px/1 'Inter',sans-serif;color:var(--pc-accent);text-decoration:none;margin-right:8px}
.pc__all:hover{color:var(--gold-dark,#A88930)}
.pc__btn{width:48px;height:48px;border-radius:50px;border:1px solid var(--pc-line);background:var(--pc-card);color:var(--pc-ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,opacity .2s}
.pc__btn:hover{background:var(--pc-accent);color:#FAF8F3}
.pc__btn:disabled{opacity:.35;cursor:default;background:var(--pc-card);color:var(--pc-ink)}
.pc__btn:focus-visible,.pc__rail:focus-visible{outline:2px solid var(--pc-gold);outline-offset:3px}
.pc__btn svg{width:18px;height:18px}
.pc__rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--pc-card-w);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px max(20px,calc((100vw - 1160px)/2 + 20px)) 26px;scroll-padding-inline:max(20px,calc((100vw - 1160px)/2 + 20px));
  scrollbar-width:none;overscroll-behavior-x:contain}
.pc__rail::-webkit-scrollbar{display:none}
.pc__rail.is-drag{scroll-snap-type:none;cursor:grabbing}
.pc__rail.is-drag a{pointer-events:none}
.pc__card{scroll-snap-align:start;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:12px;padding:22px;border-radius:14px;
  background:var(--pc-card);border:1px solid var(--pc-line);color:inherit;text-decoration:none;min-height:400px;transition:transform .2s,box-shadow .2s}
.pc__card:hover,.pc__card:focus-visible{transform:translateY(-3px);box-shadow:0 4px 32px rgba(28,28,24,.08);outline:none}
.pc__card:focus-visible{box-shadow:0 0 0 2px var(--pc-gold)}
.pc__cat{font:600 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-accent)}
.pc__big{font:800 clamp(34px,3.4vw,44px)/1 'Poppins',sans-serif;letter-spacing:-.03em;color:var(--pc-ink)}
.pc__big small{display:block;font:600 14px/1.3 'Poppins',sans-serif;letter-spacing:0;color:var(--pc-mid);margin-top:8px}
.pc__card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--pc-muted)}
.pc__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--pc-line);padding-top:14px}
.pc__stats b{display:block;font:700 18px/1.1 'Poppins',sans-serif;color:var(--pc-ink);font-variant-numeric:tabular-nums}
.pc__stats span{font-size:12px;color:var(--pc-muted)}
.pc__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.pc__loc{padding:6px 12px;border-radius:50px;background:#E8F0EA;color:var(--pc-accent);font-weight:600}
.pc__read{font-weight:600;color:var(--pc-ink)}
.pc__card--hi{background:var(--pc-card-hi);border-color:transparent;color:#FAF8F3}
.pc__card--hi .pc__big,.pc__card--hi .pc__stats b,.pc__card--hi .pc__read{color:#FAF8F3}
.pc__card--hi .pc__big small,.pc__card--hi .pc__cat{color:#E0C068}
.pc__card--hi p,.pc__card--hi .pc__stats span{color:#c9d6cd}
.pc__card--hi .pc__stats{border-color:rgba(250,248,243,.18)}
.pc__card--hi .pc__loc{background:rgba(250,248,243,.12);color:#FAF8F3}
.pc__bar{max-width:1160px;margin:0 auto;padding-inline:20px}
.pc__bar div{height:3px;border-radius:8px;background:var(--pc-line);overflow:hidden}
.pc__bar i{display:block;height:100%;width:var(--pc-w,20%);margin-left:var(--pc-x,0%);background:var(--pc-gold);border-radius:8px;transition:margin-left .12s linear}
@media (max-width:480px){ .pc__all{display:none} }
@media (prefers-reduced-motion:reduce){ .pc__card{transition:none} .pc__bar i{transition:none} }