/* CSR (sitemap: "Kept at its current address. CSR uses the About design."). All copy is the live CSR page, shortened.
   Same anatomy as About: a typographic opening on Marine (Plastic Free Day and Earth Day photos from the client, 22-Oct-26),
   ruled two-column rows, the story line reused for the roadmap, the two-half close.
   The live "Impact, by the numbers" counters are NOT shown: the client has not released the figures. */

/* ---------- opening ---------- */
.cs-o{background:var(--marine);color:var(--paper)}
/* opening (client photos 22-Oct-26): the words on Marine beside a framed reel of Plastic Free Day and Earth Day */
.cs-o .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.cs-o .phil{margin-top:clamp(22px,4svh,40px)}
.cs-o .pic{position:relative;margin:0;height:min(66svh,620px);border-radius:var(--r);overflow:hidden;background:var(--ink)}
.cs-o .pic .reel{position:absolute;inset:0}
.cs-o .pic .reel img{object-position:50% 40%}
.cs-o .pic .film-ctrl{left:16px;bottom:16px;z-index:2;background:rgba(16,42,67,.66);border-color:rgba(247,245,240,.2)}
.cs-o h1{font-weight:700;font-size:clamp(36px,min(4.6vw,9svh),76px);line-height:1;letter-spacing:-.04em;max-width:11em}
.cs-o .lead{margin-top:clamp(16px,3svh,28px);color:#D9E6EE;max-width:28em}
.cs-o .phil{border-top:1px solid rgba(247,245,240,.35);padding-top:clamp(16px,3svh,26px)}
.cs-o .phil h2{font-weight:600;font-size:clamp(20px,min(1.6vw,3.2svh),27px);letter-spacing:-.02em}
.cs-o .phil p{margin-top:10px;color:#D9E6EE;font-size:clamp(15.5px,min(1.15vw,2.4svh),18px);line-height:1.55}

/* ---------- two themes: ruled rows ---------- */
.cs-t.scr{padding:clamp(24px,5svh,64px) 0}
.cs-t .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.cs-t .col .lead{min-height:4.8em}
.cs-t ul{margin-top:clamp(18px,3.4svh,32px)!important}
.cs-t .lead{margin-top:12px;max-width:26em}
.cs-t ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cs-t li{padding:clamp(14px,3svh,28px) 0;border-bottom:1px solid var(--line)}
.cs-t li b{display:block;font-weight:700;font-size:clamp(20px,min(1.7vw,3.4svh),28px);letter-spacing:-.025em}
.cs-t li span{display:block;margin-top:8px;color:var(--mid);font-size:clamp(15.5px,min(1.15vw,2.4svh),18px);line-height:1.5;max-width:32em}

/* ---------- impact and roadmap: one compact band sized to its content (sitemap: impact by the numbers, what comes next).
   Figures are the live CSR counters, the client's own published numbers. ---------- */
.cs-n{background:var(--pale);padding:clamp(36px,7svh,80px) 0}
.cs-n .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);align-items:start}
.cs-n .figs{margin:clamp(16px,3svh,28px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);border-top:2px solid var(--ink)}
.cs-n .figs > div{display:block;padding:clamp(12px,2.4svh,20px) 0 0;border:0}
.cs-n dt{white-space:nowrap}
.cs-n dt{font-weight:700;font-size:clamp(30px,min(3.4vw,7svh),60px);line-height:1;letter-spacing:-.04em;font-feature-settings:"tnum";color:var(--marine)}
.cs-n dd{margin:8px 0 0;color:var(--mid-on-pale);font-size:15px;line-height:1.4}
.cs-n ol{list-style:none;margin:clamp(16px,3svh,28px) 0 0;padding:0;border-top:2px solid var(--ink)}
.cs-n ol li{position:relative;padding:clamp(10px,2svh,16px) 0 clamp(10px,2svh,16px) 26px;border-bottom:1px solid #D6D1C4;font-weight:600;font-size:clamp(17px,min(1.3vw,2.7svh),21px);letter-spacing:-.015em}
.cs-n ol li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-6px;border-radius:50%;border:2px dashed var(--marine)}

/* ---------- close: two halves, as About ---------- */
.ab-x{display:grid;grid-template-columns:1fr 1fr}
.ab-x > div{padding:clamp(48px,10svh,120px) clamp(28px,5vw,96px);color:var(--paper)}
.ab-x .w1{background:var(--marine)}
.ab-x .w2{background:var(--ink)}
.ab-x h2{font-weight:700;font-size:clamp(30px,min(3.2vw,6svh),50px);line-height:1.02;letter-spacing:-.04em;max-width:11em}
.ab-x p{margin-top:16px;color:#D9E6EE;font-size:var(--lead);line-height:1.5;max-width:26em}
.ab-x .btn{margin-top:clamp(20px,3.6svh,34px)}
.ab-x .mail{font-family:var(--mono);font-size:13px;color:#A9BFCC;margin-top:14px}
/* the Marine half: Paper focus and a lighter email line, both above 3:1 and 4.5:1 (final review 17-Oct-26) */
.ab-x .w1 :focus-visible{outline-color:var(--paper)}
.ab-x .w1 .mail{color:#D9E6EE}
.ab-x :focus-visible{outline-color:var(--violet-dark)}

@media (max-width:900px){
  .cs-o .wrap,.cs-t .wrap,.ab-x{grid-template-columns:1fr}
  .cs-o .pic{height:auto;aspect-ratio:4/3}
  .cs-n .wrap{grid-template-columns:1fr}
  .cs-n .figs{grid-template-columns:1fr}
}