/* ------------------------------------------------------------
   1. ARTICLE WRAPPER
   ------------------------------------------------------------ */
.article-shell,
.wi-article{
  background: #F5F7FA;
  padding: 40px 24px 70px;
  /* No max-width/margin:auto here on purpose — this wrapper sits
     inside your page's existing content column, which already
     controls the width. Self-centering at a fixed width made it
     drift right of the native headline/byline above it. If you
     DO want it narrower than the column, use max-width WITHOUT
     margin:auto, e.g. "max-width: 760px;" alone — that keeps the
     left edge flush and only trims the right side. */
}
.article-shell h1,
.wi-article h1,
h1.headline{
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

/* ------------------------------------------------------------
   2. HEADER: kicker tag, byline, quick facts
   ------------------------------------------------------------ */
.kicker,
.wi-kicker{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAFAF8;
  color: #0F7771;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.byline-row,
.wi-byline-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E9E8;
  margin-bottom: 28px;
}
.avatar,
.wi-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #30CEBB -152.94%, #0F7771 154.41%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.byline-text,
.wi-byline-text{
  font-size: .92rem;
  color: #748A83;
  line-height: 1.5;
}
.byline-text strong,
.wi-byline-text strong{
  color: #1B1B1B;
  font-weight: 500;
}

.fact-strip,
.wi-fact-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #E5E9E8;
  border: 1px solid #E5E9E8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 36px;
}
.fact,
.wi-fact{
  background: #fff;
  padding: 16px 14px;
  text-align: center;
}
.fact-label,
.wi-fact-label{
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #748A83;
  margin-bottom: 6px;
}
.fact-value,
.wi-fact-value{
  font-weight: 700;
  font-size: .92rem;
  color: #0F7771;
}

.lede::first-letter,
.wi-lede::first-letter{
  float: left;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: .78;
  padding: 4px 8px 0 0;
  color: #0F7771;
}

@media (max-width: 640px){
  .fact-strip, .wi-fact-strip{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   3. IMAGES THAT WRAP WITH TEXT
   ------------------------------------------------------------ */
figure.wrap,
.wi-figure{
  margin: 4px 0 18px;
  max-width: 300px;
}
    figure.wrap.float-right,
    .wi-figure.float-right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
    }

    figure.wrap.float-left,
    .wi-figure.float-left {
        float: left;
        margin-right: 20px;
        margin-left: 0;
    }
figure.wrap img,
.wi-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 24px -12px rgba(15,119,113,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
figure.wrap:hover img,
.wi-figure:hover img{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 30px -12px rgba(15,119,113,.45);
}
figure.wrap figcaption,
.wi-figure figcaption{
  font-size: .78rem;
  color: #748A83;
  margin-top: 8px;
  line-height: 1.4;
}
@media (max-width: 768px){
  figure.wrap.float-right, figure.wrap.float-left,
  .wi-figure.float-right, .wi-figure.float-left{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}

/* ------------------------------------------------------------
   4. SHORT ATTRIBUTED QUOTES
   ------------------------------------------------------------ */
blockquote.inline-quote,
blockquote.wi-quote{
  background-color: #fff !important;
  color: #111;
  border: 1px solid #E5E9E8;
  border-radius: 10px;
  padding: 18px 20px 18px 52px;
  margin: 0 0 1.35em;
  font-style: italic;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
blockquote.inline-quote::before,
blockquote.wi-quote::before{
  content: "\201C";
  position: absolute;
  top: 6px; left: 16px;
  font-size: 2.4rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  color: #30CEBB;
  opacity: .4;
}
blockquote.inline-quote:hover,
blockquote.wi-quote:hover{
  transform: translateY(-2px);
  border-color: #30CEBB;
  box-shadow: 0 12px 24px -16px rgba(15,119,113,.4);
}

/* ------------------------------------------------------------
   5. CALLOUT CARDS (cost breakdown / advice box)
   ------------------------------------------------------------ */
.callout,
.wi-callout{
  background-color: #fff;
  border: 1px solid #E5E9E8;
  border-radius: 10px;
  padding: 28px 30px;
  margin: 8px 0 30px;
  clear: both;
}
.callout h3,
.wi-callout h3{
  margin: 0 0 12px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0F7771;
  font-weight: 700;
}
.callout .cost-row,
.wi-callout .wi-cost-row{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px dashed #D5DCDA;
  font-size: .98rem;
}
.callout .cost-row:first-of-type,
.wi-callout .wi-cost-row:first-of-type{ border-top: none; }
.callout .cost-row strong,
.wi-callout .wi-cost-row strong{ color: #0F7771; }

    .callout.advice h3,
    .wi-callout--advice h3,
    .wi-callout.advice h3 {
        color: #106A63;
    }
.callout.advice p,
.wi-callout--advice p,
.wi-callout.advice p{
  margin: 0;
  font-size: 1.08rem;
  font-style: italic;
  color: #1B1B1B;
}

/* ------------------------------------------------------------
   6. PULL QUOTE
   ------------------------------------------------------------ */
blockquote.pull-quote,
blockquote.wi-pull-quote{
  background: none;
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #1B1B1B;
  margin: 40px -24px;
  padding: 6px 24px 6px 28px;
  position: relative;
  clear: both;
}
blockquote.pull-quote::before,
blockquote.wi-pull-quote::before{
  content: "\201C";
  position: absolute;
  left: -6px; top: -20px;
  font-size: 4rem;
  font-weight: 900;
  font-style: normal;
  color: #30CEBB;
  opacity: .55;
}
@media (max-width: 768px){
  blockquote.pull-quote, blockquote.wi-pull-quote{ margin: 32px 0; font-size: 1.3rem; }
}

/* ------------------------------------------------------------
   7. CTA CARD
   ------------------------------------------------------------ */
.cta-card,
.wi-cta{
  clear: both;
  background: #fff;
  border: 1px solid #E5E9E8;
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  margin-top: 20px;
}
.cta-card h3,
.wi-cta h3{ margin: 0 0 8px; font-size: 1.4rem; font-weight: 700; color: #1B1B1B; }
.cta-card p,
.wi-cta p{ margin: 0 0 20px; color: #748A83; font-size: .98rem; }
/* .greenbutton_long itself is already defined site-wide — no need to redefine it here */

/* ------------------------------------------------------------
   8. SCROLL-REVEAL — INTENTIONALLY NOT INCLUDED YET
   Your HTML has class="reveal" (and possibly "wi-reveal") on many
   elements already. Do NOT add ".reveal { opacity: 0; }" here
   unless the matching JS that adds "visible"/"wi-visible" on
   scroll is also on the page — otherwise those elements permanently
   disappear. Ask me for that script when you're ready to add it;
   until then, leaving "reveal" unstyled is correct and harmless.
   ------------------------------------------------------------ */