/* =========================================================
   SSHG Group - CSR page premium styles (csr.css)
   Loaded by csr.php AFTER about.css, so it reuses the same
   .ab- design system. All NEW classes use the .cs- prefix.
   ========================================================= */

/* ---------- hero chips (two-line label, single row on phones) ---------- */
.cs-chips small{display:block;margin-top:2px;font-weight:600;font-size:.76rem;letter-spacing:.06em;color:#CFE5D8}
@media(max-width:620px){
  .cs-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 8px}
  .cs-chips li{flex-direction:column;gap:8px;text-align:center;font-size:.72rem;letter-spacing:0;white-space:normal;line-height:1.25}
  .cs-chips small{font-size:.68rem;letter-spacing:.02em}
}

/* ---------- intro media tweaks ---------- */
.cs-who .ab-main img{object-position:50% 30%}
.cs-who .ab-inset img{object-position:50% 25%}

/* ---------- 2. COMMITMENT AREAS (jump cards) ---------- */
.cs-areas{padding:110px 0 30px;background:var(--bg)}
.cs-jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cs-jgrid>div{display:flex}
.cs-jcard{--bc:var(--o);position:relative;flex:1;display:flex;flex-direction:column;padding:38px 32px 34px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--w);border:1px solid var(--line);border-radius:28px;box-shadow:0 14px 38px #0a3d2612;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.cs-jcard::after{content:"";position:absolute;left:32px;right:32px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cs-jcard:hover{transform:translateY(-10px);border-color:var(--o);box-shadow:0 34px 66px #0a3d2630}
.cs-jcard:hover::after{transform:scaleX(1)}
.cs-jcard:hover .ab-vic{transform:rotate(-8deg) scale(1.08)}
.cs-jcard .ab-ghost{right:24px;top:8px;color:var(--g);opacity:.07}
.cs-jcard h3{margin:0 0 6px;font-size:1.5rem;color:var(--g)}
.cs-jtag{margin-bottom:12px;font:700 .72rem "Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--o)}
.cs-jcard p{margin:0 0 22px;color:var(--mut)}
.cs-jcard .ab-bgo{margin-top:auto;align-self:flex-start}
@media(prefers-color-scheme:dark){.cs-jcard h3{color:#8FD6A8}.cs-jcard .ab-ghost{color:#fff}}

/* ---------- 3. INITIATIVE BLOCKS ---------- */
.cs-sec{position:relative;isolation:isolate;padding:110px 0;background:radial-gradient(800px 380px at 0 0,#f28a1c14,transparent 60%),radial-gradient(800px 380px at 100% 100%,#7db5441c,transparent 60%),var(--bg)}
.cs-sec.alt{background:radial-gradient(800px 380px at 100% 0,#f28a1c14,transparent 60%),var(--w)}
.cs-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.cs-grid.rev{grid-template-columns:1.1fr .9fr}
.cs-grid.rev .cs-side{order:2}
.cs-side{position:sticky;top:130px}
.cs-media img{aspect-ratio:4/3.3;object-position:var(--op,50% 40%);transition:transform 1.2s var(--ease)}
.cs-media:hover img{transform:scale(1.04)}
.cs-media{overflow:hidden}
.cs-main .ab-h2{margin-bottom:22px}
.cs-main .cs-p{margin:0 0 18px;font-size:1.1rem;line-height:1.8;color:var(--mut)}
.cs-main .cs-p.lead{color:var(--ink);font-size:1.18rem}

.cs-obj{margin:28px 0 8px;padding:26px 30px;border-radius:24px;border-left:6px solid var(--o);background:linear-gradient(135deg,#f28a1c22,#f28a1c08);box-shadow:0 14px 34px #0a3d2610}
.cs-obj span{display:block}
.cs-obj .a{margin-bottom:6px;font:700 1.08rem "Bricolage Grotesque",system-ui,sans-serif;color:var(--g)}
.cs-obj .b{font:800 clamp(1.15rem,2vw,1.45rem)/1.4 "Bricolage Grotesque",system-ui,sans-serif;color:var(--o)}
@media(prefers-color-scheme:dark){.cs-obj .a{color:#8FD6A8}}

.cs-inc-h{display:inline-block;margin:30px 0 16px;padding:9px 24px 9px 18px;border-radius:0 50px 50px 0;font:800 .8rem "Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--g),var(--g2));box-shadow:0 8px 18px #0a3d2640}
.cs-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0;padding:0}
.cs-inc li{position:relative;padding:15px 16px 15px 56px;border-radius:16px;font-weight:600;line-height:1.4;color:var(--ink);background:var(--w);border:1px solid var(--line);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.cs-sec.alt .cs-inc li{background:var(--bg)}
.cs-inc li::before{content:"";position:absolute;left:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.cs-inc li:hover{transform:translateY(-3px);border-color:var(--o);box-shadow:0 14px 28px #0a3d2618}
.cs-note{margin:28px 0 0;padding:20px 24px;border-radius:20px;font:italic 600 1.08rem/1.7 "Bricolage Grotesque",system-ui,sans-serif;color:var(--g);background:var(--w);border:1px dashed var(--o)}
.cs-sec.alt .cs-note{background:var(--bg)}
@media(prefers-color-scheme:dark){.cs-note{color:#8FD6A8}}

/* ---------- 4. CONTINUING INITIATIVE (dark) ---------- */
.cs-commit{padding:120px 0}
.cs-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs-cgrid>div{display:flex}
.cs-card{position:relative;flex:1;padding:44px 32px 38px;border-radius:28px;overflow:hidden;background:linear-gradient(165deg,#ffffff26,#ffffff08);border:1px solid #ffffff2e;box-shadow:0 30px 64px #00000040,inset 0 1px 0 #ffffff30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.cs-card::after{content:"";position:absolute;left:32px;right:32px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(.18);transform-origin:left;transition:transform .7s var(--ease)}
.cs-card:hover{transform:translateY(-10px);border-color:#f6b73c88;box-shadow:0 44px 80px #00000060}
.cs-card:hover::after{transform:scaleX(1)}
.cs-card .ab-ghost{right:24px;top:10px;font-size:5.4rem;color:#ffffff12}
.cs-card:hover .ab-mvic{transform:rotate(-8deg) scale(1.08)}
.cs-card h3{position:relative;margin:0 0 8px;font-size:1.55rem;line-height:1.3;color:#fff}
.cs-card .cs-gold{position:relative;margin:0 0 16px;font:800 1.15rem/1.4 "Bricolage Grotesque",system-ui,sans-serif;color:var(--gold)}
.cs-card p:last-child{position:relative;margin:0;font-size:1.04rem;line-height:1.7;color:#D8EBDF}
.cs-lead{max-width:760px;margin:16px auto 0;font-size:1.12rem;color:#D8EBDF}

/* ---------- 5. DEFINITION OF SUCCESS ---------- */
.cs-defn{padding:120px 0;background:var(--w)}
.cs-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.cs-dgrid>div{display:flex}
.cs-dcard{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:44px 30px;border-radius:28px;text-align:center;background:var(--bg);border:1px solid var(--line);box-shadow:0 14px 38px #0a3d2612;transition:transform .5s var(--ease),box-shadow .5s}
.cs-dcard:hover{transform:translateY(-8px);box-shadow:0 34px 66px #0a3d2630}
.cs-dcard p{margin:0;font:700 1.2rem/1.4 "Bricolage Grotesque",system-ui,sans-serif;color:var(--g)}
.cs-pill{display:inline-block;padding:14px 30px;border-radius:50px;font:800 clamp(1.15rem,2.2vw,1.5rem) "Bricolage Grotesque",system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,var(--o),#FF9F3A);box-shadow:0 14px 28px #f28a1c55}
.cs-pill.g{background:linear-gradient(135deg,var(--g),var(--g2));box-shadow:0 14px 28px #0a3d2655}
.cs-dtxt{max-width:760px;margin:34px auto 0;text-align:center;font-size:1.14rem;line-height:1.8;color:var(--mut)}
.cs-qband{position:relative;max-width:960px;margin:34px auto 0;padding:56px 40px 50px;border-radius:30px;text-align:center;overflow:hidden;color:#fff;background:linear-gradient(135deg,#062A1B,#0F5A38);border:1px solid #ffffff26;box-shadow:0 30px 64px #0a3d2655}
.cs-qband::before{content:"\201C";position:absolute;left:34px;top:-10px;font:800 9rem/1 Georgia,serif;color:var(--gold);opacity:.25;pointer-events:none}
.cs-qband blockquote{position:relative;margin:0;font:800 clamp(1.4rem,3vw,2.3rem)/1.4 "Bricolage Grotesque",system-ui,sans-serif}
.cs-qband blockquote span{display:block}
.cs-qband blockquote span:last-child{color:var(--gold)}

/* ---------- 6. DIRECTOR ---------- */
.cs-dir{padding:120px 0}
.cs-dir .ab-portrait{aspect-ratio:4/4.9}
.cs-dir .ab-portrait img{object-position:var(--op,50% 18%)}
.cs-dir .ab-quote{margin:26px 0 26px}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .cs-grid,.cs-grid.rev{gap:52px}
  .cs-cgrid{grid-template-columns:1fr 1fr}
  .cs-cgrid>div:last-child{grid-column:1/-1}
}
@media(max-width:1020px){
  .cs-areas{padding:84px 0 20px}
  .cs-sec,.cs-commit,.cs-defn,.cs-dir{padding:84px 0}
  .cs-jgrid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .cs-grid,.cs-grid.rev{grid-template-columns:1fr;gap:48px}
  .cs-grid.rev .cs-side{order:0}
  .cs-side{position:static}
  .cs-dgrid{grid-template-columns:1fr}
  .cs-dir .ab-portrait{max-width:520px;margin:0 auto;aspect-ratio:4/4.4}
}
@media(max-width:620px){
  .cs-inc{grid-template-columns:1fr}
  .cs-obj{padding:22px 20px}
  .cs-main .cs-p,.cs-main .cs-p.lead{font-size:1.04rem;line-height:1.75}
  .cs-cgrid{grid-template-columns:1fr;gap:18px}
  .cs-cgrid>div:last-child{grid-column:auto}
  .cs-card{padding:38px 24px 32px}
  .cs-jcard{padding:32px 24px 28px}
  .cs-dcard{padding:34px 22px}
  .cs-qband{padding:46px 22px 38px}
  .cs-note{padding:18px 20px;font-size:1rem}
}