/* Isolated Blog 2 article styles. Do not reuse on Blog 1. */

@font-face {
  font-family: "Poppins SemiBold";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins SemiBold";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTo3j77e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3jw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito SemiBold";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDGUmdTo3j77e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito SemiBold";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDGUmdTQ3jw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTo3j77e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTQ3jw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.blog2-page {
  background-color: #c3b59e !important;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.blog2 {
  --blog2-page: #c3b59e;
  --blog2-paper: #d8cab4;
  --blog2-ink: #1c1a16;
  --blog2-olive: #4a593d;
  --blog2-navy: #445c66;
  --blog2-rust: #bb6532;
  --blog2-cream: #f4ead9;
  /* Text inset ~9.6% of the article; banners sit closer to the edges (~5%). */
  --blog2-pad-x: clamp(1.35rem, 9.6%, 3.85rem);
  --blog2-banner-inset: clamp(0.7rem, 5%, 1.85rem);
  /* Body 14pt; leading stays 19/17. Titles unchanged. */
  --blog2-body: 14pt;
  --blog2-body-lh: calc(19 / 17);
  --blog2-title: "Poppins SemiBold", sans-serif;
  --blog2-text: "Nunito SemiBold", sans-serif;
  background: var(--blog2-page);
  color: var(--blog2-ink);
  padding: clamp(0px, 2vw, 2.75rem) clamp(0px, 3.2vw, 2rem) clamp(1.75rem, 4vw, 3.5rem);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.blog2 *,
.blog2 *::before,
.blog2 *::after {
  box-sizing: border-box;
}

.blog2 img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.blog2-article {
  max-width: min(54rem, 100%);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  background: var(--blog2-paper);
  color: var(--blog2-ink);
  overflow-x: hidden;
}

.blog2-hero {
  position: relative !important;
  display: block !important;
  top: auto !important;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  line-height: 0;
}

.blog2-hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.blog2-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(1.1rem, 3.2vw, 1.7rem) var(--blog2-pad-x) clamp(1.2rem, 3.6vw, 1.85rem);
  background: linear-gradient(
    to top,
    rgba(20, 14, 8, 0.42) 0%,
    rgba(20, 14, 8, 0.16) 38%,
    rgba(20, 14, 8, 0) 68%
  );
  pointer-events: none;
}

.blog2-hero-copy {
  max-width: min(28rem, 92%);
}

.blog2-hero-title {
  margin: 0;
  font-family: "Poppins SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(1.5rem, 1.2vw + 1.15rem, 2.2rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
  color: #fff;
}

.blog2-hero-title .blog2-hero-line {
  display: block;
}

@media (min-width: 481px) {
  .blog2-hero-title .blog2-hero-line {
    white-space: nowrap;
  }
}

.blog2-hero-sub {
  margin: 0.45rem 0 0;
  font-family: "Nunito SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(0.78rem, 0.2vw + 0.72rem, 0.95rem);
  line-height: 1.25;
  color: #fff;
}

.blog2-section {
  padding: clamp(1.15rem, 3.2vw, 1.85rem) var(--blog2-pad-x) 0.15rem;
}

.blog2-section--tight-top {
  padding-top: clamp(1.05rem, 2.8vw, 1.55rem);
}

.blog2-section--after-image {
  padding-top: clamp(1.35rem, 3.4vw, 2rem);
}

.blog2-section--last {
  padding-bottom: 0.2rem;
}

.blog2-prose p,
.blog2-navy p,
.blog2-stack p,
.blog2-hero-sub {
  font-family: "Nunito SemiBold", sans-serif !important;
  font-weight: 600 !important;
}

.blog2-prose b,
.blog2-prose strong,
.blog2-navy b,
.blog2-navy strong,
.blog2-stack b,
.blog2-stack strong {
  font-family: "Nunito Bold", sans-serif !important;
  font-weight: 700 !important;
}

.blog2-prose p,
.blog2-navy p,
.blog2-stack p {
  margin: 0 0 0.95em;
  font-size: 14pt !important;
  line-height: calc(19 / 17) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: inherit;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.blog2-prose p:last-child,
.blog2-navy p:last-child {
  margin-bottom: 0;
}

.blog2-stack {
  margin-bottom: 0.95em;
}

.blog2-stack p {
  margin: 0 0 0.12em;
}

.blog2-stack p:last-child {
  margin-bottom: 0;
}

.blog2 h2.blog2-heading,
.blog2 .blog2-heading,
.blog2-article h2 {
  margin: 0 0 0.55em;
  font-family: "Poppins SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(1.28rem, 0.55vw + 1.12rem, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--blog2-ink);
}

.blog2-heading::after {
  content: "";
  display: block;
  width: 2.35rem;
  height: 3px;
  margin-top: 0.38em;
  background: var(--blog2-rust);
}

.blog2-navy .blog2-heading,
.blog2-navy h2.blog2-heading {
  color: #f3efe6 !important;
}

.blog2-navy .blog2-heading::after {
  background: var(--blog2-rust);
}

/* Green + orange bars: inset from the paper edges, wider than the text column. */
.blog2-banner {
  margin: clamp(1.15rem, 3vw, 1.55rem) var(--blog2-banner-inset);
  padding: clamp(0.95rem, 2.4vw, 1.2rem) clamp(1.15rem, 4.2%, 1.7rem);
}

.blog2-banner:not(.blog2-banner--rust) p {
  margin: 0;
  font-family: "Poppins SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(1rem, 0.45vw + 0.88rem, 1.22rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
}

.blog2-banner-mark {
  display: block;
  width: 1.9rem;
  height: 3px;
  margin-bottom: 0.65em;
  background: var(--blog2-rust);
}

.blog2-banner--olive {
  background: var(--blog2-olive);
  color: var(--blog2-cream);
}

.blog2-banner--rust {
  background: var(--blog2-rust);
  color: #fff;
  margin-top: 1.2rem;
  margin-bottom: 0.35rem;
}

.blog2-banner--rust p {
  margin: 0;
  font-family: "Nunito Regular", Nunito, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(1.02rem, 0.4vw + 0.9rem, 1.25rem);
  line-height: 1.28;
  letter-spacing: 0;
}

.blog2-banner--rust .blog2-banner-mark {
  display: none;
}

.blog2-banner--close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(1.35rem, 3.4vw, 1.85rem) var(--blog2-banner-inset) clamp(1.7rem, 4vw, 2.4rem);
  padding: clamp(0.9rem, 2.2vw, 1.1rem) clamp(1.15rem, 4.2%, 1.7rem);
  background: var(--blog2-olive);
  color: var(--blog2-cream);
}

.blog2-banner--close p {
  margin: 0;
  font-family: "Poppins SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(0.98rem, 0.35vw + 0.86rem, 1.18rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.blog2-lockup {
  flex-shrink: 0;
  text-align: left;
}

.blog2-lockup-name {
  display: block;
  font-family: "Poppins SemiBold", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(1.05rem, 0.35vw + 0.92rem, 1.28rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--blog2-cream);
}

.blog2-lockup-tag {
  display: block;
  margin-top: 0.1em;
  font-family: "Nunito Regular", Nunito, sans-serif;
  font-weight: 400;
  font-size: clamp(0.58rem, 0.12vw + 0.52rem, 0.68rem);
  letter-spacing: 0.01em;
  color: var(--blog2-cream);
}

.blog2-figure {
  margin: clamp(1.05rem, 2.8vw, 1.45rem) 0 0;
  line-height: 0;
  max-width: 100%;
}

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

.blog2-figure--mockup {
  background: var(--blog2-paper);
  margin: 0;
  /* ~15.6% side inset so the mockup sits at ~69% of the navy card, matching the client crop. */
  padding: 0.85rem 15.6% 1.35rem;
}

.blog2-figure--mockup img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Navy band is full-bleed across the article; text uses the same inset as body copy. */
.blog2-navy {
  background: var(--blog2-navy);
  color: #f3efe6;
  padding: clamp(1.45rem, 3.8vw, 2.1rem) var(--blog2-pad-x) clamp(0.7rem, 1.6vw, 0.95rem);
  margin: clamp(1.15rem, 3vw, 1.5rem) 0 0;
}

.blog2-navy + .blog2-figure,
.blog2-navy + .blog2-figure--mockup {
  margin: 0;
  padding-top: 0.85rem;
}

.blog2-navy p {
  color: #f3efe6;
}

@media (max-width: 768px) {
  .blog2-prose p,
  .blog2-navy p,
  .blog2-stack p {
    font-size: 13pt !important;
    line-height: calc(19 / 17) !important;
  }
}

@media (max-width: 720px) {
  .blog2 {
    padding-left: 0;
    padding-right: 0;
  }

  .blog2-hero-copy {
    max-width: min(22rem, 94%);
  }

  .blog2-prose p,
  .blog2-navy p,
  .blog2-stack p {
    font-size: 13pt !important;
    line-height: calc(19 / 17) !important;
  }
}

@media (max-width: 480px) {
  .blog2 {
    --blog2-pad-x: clamp(1.15rem, 6vw, 1.5rem);
    --blog2-banner-inset: clamp(0.65rem, 3.5vw, 0.95rem);
  }

  .blog2-hero-copy {
    max-width: 100%;
  }

  .blog2-hero-title .blog2-hero-line {
    white-space: normal;
  }

  .blog2-banner--close {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .blog2-lockup {
    margin-left: auto;
  }

  .blog2-prose p,
  .blog2-navy p,
  .blog2-stack p {
    font-size: 13pt !important;
    line-height: calc(19 / 17) !important;
  }
}

@media (max-width: 360px) {
  .blog2-hero-title {
    font-size: 1.38rem;
  }
}