:root{--pink:#C2185B;--black:#090909;--cream:#fbfaf8;--line:#e8e4e1;--muted:#666;--serif:Georgia,serif;--sans:Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);color:#111;line-height:1.65;background:#fff}a{text-decoration:none;color:inherit}
header{height:110px;padding:10px 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:20}
header img{width:102px}.nav{display:flex;gap:20px;align-items:center;font-family:"Helvetica Neue","Avenir Next",Arial,sans-serif;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.055em}.nav a:hover{color:var(--pink)}.call{background:var(--pink);color:#fff;padding:.8rem 1rem}
.menu{display:none;background:none;border:0;font-size:1.5rem}
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:620px;background:linear-gradient(90deg,#fff 0 56%,#f5f3f0 56% 100%)}
.hero-copy{padding:90px 6vw;align-self:center}.eyebrow{font-size:.74rem;color:var(--pink);letter-spacing:.15em;text-transform:uppercase;font-weight:700}
h1,h2,h3{font-family:var(--serif)}h1{font-size:clamp(4rem,7vw,7rem);line-height:.9;letter-spacing:-.05em;margin:.2em 0}.standfirst{font-size:clamp(1.3rem,2vw,1.85rem);max-width:760px}.hero-copy p{max-width:760px;color:#555}
.hero-art{display:grid;place-items:center;padding:7%}.impact-mark{width:78%;aspect-ratio:1;border:1px solid #bbb;background:#fff;display:grid;place-items:center;text-align:center;padding:28px}.impact-mark strong{font:700 clamp(2.3rem,4vw,4.8rem)/.95 var(--serif)}.impact-mark span{display:block;color:var(--pink);font:700 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
.btn{display:inline-block;margin-top:18px;padding:1rem 1.25rem;background:var(--pink);color:#fff;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.section{padding:86px 6vw}.copy{max-width:1000px;margin:auto}.copy h2,.heading h2{font-size:clamp(2.6rem,4.5vw,5rem);line-height:1;letter-spacing:-.04em;margin:.2em 0}.lead{font:1.8rem/1.35 var(--serif)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);padding:26px;background:#fff}.card h3{font-size:1.65rem;margin:.2em 0}.card p{color:#666}
.spotlight{display:grid;grid-template-columns:.9fr 1.1fr;background:#f6f2ed}.spotlight-visual{min-height:470px;background:#111;color:#fff;display:grid;place-items:center;text-align:center;padding:30px}.spotlight-visual strong{font:700 clamp(2.8rem,5vw,5.6rem)/.92 var(--serif)}.spotlight-copy{padding:72px 6vw}.spotlight-copy p{color:#555}
.process{background:#111;color:#fff}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step{border:1px solid #3b3b3b;padding:22px}.step strong{display:block;color:#C2185B;margin-bottom:8px}.process p{color:#ccc}
.cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:linear-gradient(100deg,#fff 0 72%,#f7e8ee)}.cta p{color:#555;max-width:760px}
details{max-width:980px;border-top:1px solid #d8d4d1;padding:20px 0}details:last-child{border-bottom:1px solid #d8d4d1}summary{font-weight:700;cursor:pointer}
footer{padding:58px 6vw;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:38px;background:#090909;color:#fff}footer img{width:95px;filter:invert(1) grayscale(1) brightness(10)}footer nav,footer .contact{display:grid;gap:9px;align-content:start}footer p{color:#aaa}
@media(max-width:900px){.nav{display:none}.menu{display:block}.hero,.spotlight,.cta{grid-template-columns:1fr}.hero-art{min-height:420px}.grid,.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid,.process-grid,footer{grid-template-columns:1fr}}

/* Publication text alignment rule */
body,main,section,.hero-copy,.heading,.section-heading{text-align:left}

/* Corporate Social Responsibility header image — preserve artwork proportions */
.hero-image-only{width:100%;padding:0;background:#fff;overflow:hidden}
.hero-image-only img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}


/* =========================================================
   HERO — live type beside a photograph.
   The supplied artwork carried the page title, two paragraphs
   and a quote as baked-in pixels. All of it is real text now:
   sharp at any resolution, reflows on small screens, and
   readable by search engines and screen readers.
   ========================================================= */
.hero-rule { width: 108px; height: 4px; background: var(--pink); margin: 24px 0 26px; }

.hero-copy .impact-pledge {
  margin: 34px 0 0;
  padding: 26px 30px;
  background: var(--pink);
  color: #fff !important;
  max-width: 640px;
}

.impact-figure { position: relative; margin: 0; width: 100%; }

.impact-figure img { display: block; width: 100%; height: auto; }

.impact-figure .impact-mark {
  position: absolute;
  top: 7%;
  left: 6%;
  width: auto;
  max-width: 62%;
  aspect-ratio: auto;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(0,0,0,.07);
  padding: 26px 30px;
  display: block;
  text-align: center;
}

.impact-figure .impact-mark strong {
  display: block;
  font: 700 clamp(1.5rem, 2.3vw, 2.5rem)/1.05 var(--serif);
}

.impact-figure .impact-mark span {
  display: block;
  margin-top: 14px;
  color: var(--pink);
  font: 700 .72rem var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* On narrow columns the mark sits under the photograph rather than
   crowding it, so nothing can collide or clip. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .impact-figure .impact-mark {
    position: static;
    max-width: none;
    padding: 24px;
  }
}