.article-hero{grid-template-columns:1.65fr 1fr;padding:44px;gap:50px}.article-hero h1{font-size:clamp(36px,3.6vw,52px);line-height:1.16}.article-intro p{font-size:15px}.article-body{gap:32px}.opening-copy{max-width:960px}.cards-heading{display:flex;justify-content:space-between;gap:30px;align-items:end}.cards-heading h2{font-size:31px}.cards-heading .section-kicker{margin-bottom:12px}.article-body .flip-instructions{font-size:12px;line-height:1.7;color:#617788;max-width:260px;margin:0}
.stakeholder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.flip-card{--card-bg:#eff5fb;--card-ink:#305f86;--card-line:#cedce9;min-width:0;perspective:1500px}.tone-green{--card-bg:#eef8f5;--card-ink:#2d7063;--card-line:#cbded7}.tone-purple{--card-bg:#f5f1fa;--card-ink:#745491;--card-line:#ded2e8}.tone-peach{--card-bg:#fff5ee;--card-ink:#ac501d;--card-line:#ecd5c3}.flip-inner{display:block}.flip-face{min-width:0;padding:27px;border:1px solid var(--card-line);border-radius:12px;color:#263d4c}.flip-front{display:none;background:var(--card-bg);position:relative}.flip-back{background:#fff;border-top:4px solid var(--card-ink);display:flex;flex-direction:column;gap:18px}.flip-back h3{font-size:24px;line-height:1.25;margin:0}.back-heading .section-kicker{font-size:9px;color:var(--card-ink);margin:0 0 10px}.stakeholder-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;flex:1}.stakeholder-points li{position:relative;padding-left:13px}.stakeholder-points li:before{content:'';position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:var(--card-ink)}.stakeholder-points strong{font-size:10px;letter-spacing:.075em;font-weight:600;text-transform:uppercase;line-height:1.5;color:var(--card-ink);display:block}.article-body .stakeholder-points p{font-size:13px;line-height:1.7;color:#4f606b;margin:6px 0 0}.stakeholder-points li:last-child{background:var(--card-bg);border:1px solid var(--card-line);border-radius:7px;padding:13px 14px}.stakeholder-points li:last-child:before{display:none}.flip-button{display:none;border:1px solid var(--card-ink);border-radius:6px;background:var(--card-ink);color:#fff;padding:11px 15px;font:600 12px/1.5 Inter,Arial,sans-serif;gap:12px;align-items:center;justify-content:center;cursor:pointer;align-self:flex-start}.flip-button svg{width:17px;height:17px}.flip-button:hover{filter:brightness(.9)}.flip-button:focus-visible{outline:3px solid #fc6507;outline-offset:4px}.flip-back .flip-button{margin-top:3px;background:#fff;color:var(--card-ink);font-size:11px;padding:9px 13px}.flip-back .flip-button:hover{background:var(--card-bg)}
.js-flip .flip-inner{display:grid;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.65,.3,1)}.js-flip .flip-face{grid-area:1 / 1;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 16px #18344908}.js-flip .flip-front{display:flex;flex-direction:column;justify-content:space-between;min-height:400px;padding:34px;cursor:pointer}.js-flip .flip-front h3{font-size:34px;line-height:1.23;color:var(--card-ink);max-width:355px;margin:auto 0;letter-spacing:-.04em}.js-flip .flip-front .flip-button{margin-top:32px}.js-flip .flip-back{transform:rotateY(180deg)}.js-flip .flip-button{display:inline-flex}.js-flip .is-flipped .flip-inner{transform:rotateY(180deg)}.js-flip .flip-front:focus-within{outline:2px solid var(--card-ink);outline-offset:3px}.article-takeaway{margin-top:0}
@media(max-width:1000px){.article-hero{padding:34px;gap:30px}.article-hero h1{font-size:42px}.flip-face{padding:24px}.js-flip .flip-front{padding:29px}.js-flip .flip-front h3{font-size:31px}}
@media(max-width:800px){.article-hero{grid-template-columns:1fr;gap:27px}.article-hero h1{font-size:42px}.cards-heading{flex-direction:column;align-items:start;gap:12px}.article-body .flip-instructions{max-width:none}.stakeholder-grid{grid-template-columns:1fr;gap:23px}.js-flip .flip-front{min-height:360px}.js-flip .flip-front h3{font-size:33px}.flip-back h3{font-size:25px}.article-body .stakeholder-points p{font-size:14px;line-height:1.75}.stakeholder-points{gap:18px}.cards-heading h2{font-size:28px}}
@media(max-width:420px){.article-hero{padding:27px 23px}.article-hero h1{font-size:34px}.article-hero .article-intro p{font-size:14px}.article-body{padding:25px 20px}.cards-heading h2{font-size:26px}.flip-face{padding:23px 19px}.js-flip .flip-front{padding:27px 24px}.js-flip .flip-front h3{font-size:29px}.flip-back h3{font-size:23px}.article-body .stakeholder-points p{font-size:13px}.stakeholder-points strong{font-size:9px}.stakeholder-points li{padding-left:11px}.stakeholder-points li:last-child{padding:12px}}
@media(prefers-reduced-motion:reduce){.js-flip .flip-inner{transition:none}}
/* Keep the animation, but remove 3D compositing when it ends so long mobile pages render fully. */
.js-flip .is-settled .flip-inner{transform:none;transform-style:flat;transition:none}
.js-flip .is-settled .flip-back{transform:none;visibility:hidden}
.js-flip .is-settled.is-flipped .flip-back{visibility:visible}
.js-flip .is-settled.is-flipped .flip-front{visibility:hidden}

.cards-heading{margin-bottom:24px}

/* Image-led fronts: keep the image composition intact and let the reverse expand for readable copy. */
.stakeholder-grid{align-items:start}
.js-flip .flip-card .flip-inner{position:relative}
.js-flip .flip-card .flip-back{position:absolute;inset:0}
.js-flip .is-flipped .flip-back{position:relative;inset:auto}
.js-flip .is-flipped .flip-front{position:absolute;inset:0;aspect-ratio:auto}
.js-flip .flip-front.image-front{padding:0;min-height:0;aspect-ratio:4 / 5;overflow:hidden;background:#1c303e;border-color:#263e4c}
.stakeholder-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.image-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:70px 28px 27px;background:linear-gradient(180deg,rgba(12,28,39,0),rgba(12,28,39,.86) 52%,rgba(12,28,39,.96));pointer-events:none}
.js-flip .flip-front.image-front h3{color:#fff;font-size:31px;line-height:1.18;margin:0;max-width:420px;text-shadow:0 2px 6px #0005;letter-spacing:-.035em}
.js-flip .flip-front.image-front .flip-button{margin-top:17px;background:#d44305;border-color:#d44305;color:#fff;padding:10px 14px;pointer-events:auto}
.js-flip .flip-front.image-front .flip-button:hover{background:#b83a08;filter:none}
.js-flip .flip-front.image-front:focus-within{outline-color:#d44305}
@media(max-width:1000px){.image-caption{padding:65px 23px 24px}.js-flip .flip-front.image-front h3{font-size:28px}}
@media(max-width:800px){.js-flip .flip-front.image-front h3{font-size:32px}.image-caption{padding:75px 28px 27px}}
@media(max-width:420px){.image-caption{padding:60px 19px 18px}.js-flip .flip-front.image-front h3{font-size:24px;line-height:1.15}.js-flip .flip-front.image-front .flip-button{margin-top:12px;padding:8px 12px;font-size:11px}}