/* ============================================================
                        SINGLE ARTICLE
============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:"Roboto","Inter",system-ui,sans-serif;color:var(--charcoal-800);background:var(--white);
    line-height:1.66;-webkit-font-smoothing:antialiased;font-size:17px}
p{margin:0 0 18px}
a{color:inherit;text-decoration:none}
sup,.r{font-size:.56em;vertical-align:super;line-height:0;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  font-weight: 700;
  border-radius: 40px;
  padding: 15px 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: .18s ease;
  font-family: inherit;
  border: unset;
}

.btn-primary {
  background: var(--grad-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--moss-800);
  border: 2px solid !important;
  border: 1px solid var(--sage-400) !important;
}

.btn-ghost:hover {
  background: var(--green-mist-50);
  border-color: var(--moss-800);
}

.btn-sm {
  padding: 11px 22px;
  font-size: .92rem;
}

/* article column - same simple resources layout */
.backlink {padding-top: 64px; } 
.article-col{margin-bottom: 64px !important; max-width:780px;margin:0 auto;padding:0 26px}
.backlink{display:inline-block;font-size:.92rem;font-weight:700;color:var(--moss-800);margin-bottom:26px}
.backlink:hover{color:var(--ink-900);text-decoration:underline}
.kicker{font-weight:900;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ls-green-500);display:block;margin-bottom:12px}
h1{font-weight:900;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;letter-spacing:-.8px;color:var(--ls-green-500);margin-bottom:16px}
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.9rem;color:var(--grey-400);margin-bottom:8px}
.byline b{color:var(--charcoal-800);font-weight:700}
.standfirst{font-weight:300;font-style:italic;color:var(--grey-400);font-size:1.14rem;margin:10px 0 30px}
h2{font-weight:900;font-size:1.42rem;line-height:1.2;letter-spacing:-.3px;color:var(--ls-green-500) !important;margin:40px 0 14px}
article b,article strong{color:var(--charcoal-800)}
article ul,article ol{margin:0 0 18px 24px}
article li{margin-bottom:10px}
article a.inline{color:var(--moss-800);font-weight:700}
article a.inline:hover{color:var(--ink-900);text-decoration:underline}

/* cover graphic */
figure.cover{background:var(--green-mist-50);border:1px solid var(--green-wash-100);border-radius:var(--radius);
    padding:40px 30px 28px;margin:0 0 36px;text-align:center;position:relative;overflow:hidden}
figure.cover .stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:640px;margin:0 auto}
figure.cover .stat svg{width:150px;height:150px;max-width:100%}
figure.cover .stat .lab{font-weight:800;font-size:.94rem;color:var(--ls-grey-600);margin-top:10px;line-height:1.3}
figure.cover .stat .sub{font-size:.78rem;color:var(--grey-400);margin-top:3px}
figure.cover figcaption{position:relative;z-index:1;font-size:.84rem;color:var(--grey-400);margin-top:24px}
@media(max-width:560px){figure.cover .stats{grid-template-columns:1fr;gap:26px}figure.cover .stat svg{width:130px;height:130px}}

/* CTA callout */
.cta-box{background:var(--green-mist-50);border:1px solid var(--green-wash-100);border-left:6px solid var(--ls-green-500);
    border-radius:0 14px 14px 0;padding:26px 30px;margin:40px 0}
.cta-box h2{margin:0 0 8px;font-size:1.22rem}
.cta-box p{margin:0 0 16px;font-size:.98rem}

/* FAQ */
.faq h3{font-weight:700;font-size:1.08rem;color:var(--charcoal-800);margin:24px 0 8px}
.faq p{margin-bottom:6px}

/* author card (E-E-A-T) */
.author{display:flex;gap:18px;align-items:center;border-top:1px solid var(--grey-200);margin-top:46px;padding-top:26px}
.author .avatar{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
.author p{margin:0;font-size:.92rem;color:var(--grey-400)}
.author b{display:block;color:var(--charcoal-800);font-size:1rem}
.author a{color:var(--moss-800);font-weight:700}
.author a:hover{text-decoration:underline}

/* decorative float (footer bubbles) */
.float{animation:float 10s ease-in-out infinite}
.float.b{animation-duration:12s}.float.c{animation-duration:14s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

@media(prefers-reduced-motion:reduce){.float{animation:none}}

/* ==========================================================================
                        ENGAGEMENT MODULES
========================================================================== */

figure.cover.photo{background:none;border:none;padding:0;margin:0 0 36px}
figure.cover.photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
    object-position:center;border-radius:var(--radius);display:block}
@media(max-width:560px){figure.cover.photo img{aspect-ratio:3/2}}

/* "On this page" jump nav */
nav.onthis{background:var(--cloud-100);border:1px solid var(--grey-200);border-radius:var(--radius);
    padding:20px 24px;margin:0 0 32px}
nav.onthis h2{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-400);
    margin:0 0 12px;font-weight:900}
nav.onthis ol{margin:0 0 0 20px}
nav.onthis li{margin-bottom:6px;font-size:.95rem}
nav.onthis a{color:var(--moss-800);font-weight:700}
nav.onthis a:hover{color:var(--ink-900);text-decoration:underline}

/* Key takeaways */
.takeaways{background:var(--green-mist-50);border:1px solid var(--green-wash-100);border-radius:var(--radius);
    padding:26px 30px;margin:0 0 34px}
.takeaways h2{margin:0 0 12px;font-size:1.1rem;color:var(--pine-700)}
.takeaways ul{margin:0 0 0 20px}
.takeaways li{margin-bottom:8px;font-size:.98rem}

/* Pull quote */
blockquote.pull{border-left:6px solid var(--pale-green-300);margin:34px 0;padding:6px 0 6px 24px;
    font-size:1.24rem;line-height:1.45;font-weight:300;font-style:italic;color:var(--charcoal-800)}
blockquote.pull cite{display:block;font-style:normal;font-size:.86rem;font-weight:700;
    color:var(--grey-400);margin-top:12px}

/* CTA box - actions */
.cta-box .acts{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{background:transparent;color:var(--moss-800);border:2px solid var(--sage-400)}
.btn-ghost:hover{background:var(--green-wash-100);border-color:var(--ls-green-500);transform:translateY(-2px)}

/* Related reading */
section.related{border-top:1px solid var(--grey-200);margin-top:46px;padding-top:30px}
section.related h2{margin:0 0 18px;font-size:1.22rem}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--grey-200);
    border-radius:14px;overflow:hidden;transition:.16s ease}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--sage-400)}
.rcard img{width:100%;height:104px;object-fit:cover;display:block;background:var(--green-mist-50)}
.rcard .body{padding:14px 16px 18px}
.rcard .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--ls-green-500)}
.rcard h3{font-size:1rem;line-height:1.3;color:var(--charcoal-800);margin:6px 0 0;font-weight:700}
@media(max-width:760px){.rgrid{grid-template-columns:1fr}.rcard img{height:130px}}

/* Next-step strip */
.nextstep{background:var(--grad-green);color:#fff;border-radius:var(--radius);
    padding:34px 34px;margin:46px 0 0;text-align:center}
.nextstep h2{color:#fff !important;margin:0 0 8px;font-size:1.3rem}
.nextstep p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 18px;font-size:.98rem}
.nextstep .btn-primary{background:#fff;color:var(--pine-700);box-shadow:none}
.nextstep .btn-primary:hover{background:var(--green-wash-100)}
.nextstep .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.nextstep .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.nextstep .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.nextstep{padding:28px 22px}.nextstep .btn{width:100%}}