/* ==========================================================================
   FILE: taxes.css
   DESCRIPTION: Page-specific styles for "Taxable Donation Laws 2025/2026".
   ORGANIZATION: Data Science Alliance (DSA)
   METHODOLOGY: BEM (Block Element Modifier) naming convention.
   DEPENDENCIES: variables.css, global.css
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  HERO SECTION
       1.1  .tax-page-hero
       1.2  .tax-page-hero__image
       1.3  h1.tax-page-hero__title

   2.  TAX SECTION (MAIN LAYOUT)
       2.1  .tax-section
       2.2  .color-bar--taxes (Modifier)
       2.3  h2.tax-section__heading
       2.4  .tax-section__intro

   3.  TAX CARDS (COMPONENT)
       3.1  .tax-card
       3.2  h4.tax-card__title
       3.3  .tax-card__text

   4.  CONSIDERATIONS & STRATEGIES
       4.1  .considerations
       4.2  .considerations__heading
       4.3  .considerations__body
       4.4  h3.considerations__intro
       4.5  .considerations__image
       4.6  .strategies
       4.7  .strategies__list
       4.8  .strategies__item

   5.  DECORATIVE SHAPES
       5.1  .deco-shape--taxes-hex
       5.2  .deco-shape--taxes-square
       5.3  .deco-shape--taxes-circle
       5.4  .deco-shape--taxes-triangle

   6.  MESSAGE SECTION
       6.1  .message
       6.2  h2.message__title
       6.3  .message__text

   7.  LAYERED IMAGE (FOOTER)
       7.1  .layered-image__source
   ========================================================================== */

/* =========================================
   1. HERO SECTION
   ========================================= */

/* 1.1 .tax-page-hero (Container) */
.tax-page-hero {
  display: grid;
  align-items: center; /* Vertically centers the content */
  /* No fixed height needed; grid takes height of the image */
}

/* The Magic Sauce:
   This selects all direct children (the picture and the h1)
   and stacks them in the same grid cell.
*/
.tax-page-hero > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* 1.2 .tax-page-hero__image */
/* Targets the img inside the picture tag */
.tax-page-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}
.tax-page-hero__title--wrapper {
  padding: 1rem;
}
/* 1.3 h1.tax-page-hero__title */
h1.tax-page-hero__title,
.tax-page-hero__sub-title {
  z-index: 1;

  /* Typography Settings */
  color: var(--font-color-heading);
  font-family: var(--font-secondary);
  text-align: center;
  text-shadow: 0 2.187px 7.655px rgba(0, 0, 0, 0.25);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.67px;
  margin-bottom: 0;
}
h1.tax-page-hero__title {
  font-size: var(--fs-h1);
}
.tax-page-hero__sub-title {
  font-size: var(--fs-h3);
}
@media (min-width: 576px) {
  h1.tax-page-hero__title {
    width: 38.83rem;
    margin: 0 auto;
  }
  h1.tax-page-hero__title {
    font-size: var(--fs-d6);
  }
  .tax-page-hero__sub-title {
    font-size: var(--fs-h2);
  }
}
@media (min-width: 768px) {
  h1.tax-page-hero__title {
    width: 51.775rem;
  }
  .tax-page-hero__sub-title {
    width: 400px;
    margin: 0 auto;
  }
  .tax-page-hero__sub-title br {
    display: none;
  }
}
@media (min-width: 992px) {
  h1.tax-page-hero__title {
    width: 66.875rem;
  }
}
@media (min-width: 1200px) {
  h1.tax-page-hero__title {
    width: 86.5rem;
  }
  .tax-page-hero__sub-title {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  h1.tax-page-hero__title {
    width: 103.4167rem;
    margin-top: -15.25rem;
  }
}
@media (min-width: 1920px) {
  h1.tax-page-hero__title {
    width: 154.4167rem;
  }
  h1.tax-page-hero__title br {
    display: none;
  }
}
.tax-page-hero__blur {
  width: 100%;
  height: 73px;
  background: linear-gradient(
    180deg,
    rgba(71, 78, 115, 0.65) 25%,
    rgba(71, 78, 115, 0) 100%
  );
  backdrop-filter: blur(0.897009551525116px);
  position: absolute;
  top: 0;
}
@media (min-width: 768px) {
  .tax-page-hero__blur {
    height: 93px;
  }
}
@media (min-width: 1200px) {
  .tax-page-hero__blur {
    height: 150px;
  }
}
@media (min-width: 1920px) {
  .tax-page-hero__blur {
    height: 202px;
  }
}
/* =========================================
   2. TAX SECTION (MAIN LAYOUT)
   ========================================= */

/* 2.1 .tax-section */
.tax-section {
  width: 21.66666667rem;
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 100px auto 0 auto;
}
/* 2.2 .color-bar--taxes */
.color-bar--taxes {
  width: 21.67rem;
}
/* 2.3 h2.tax-section__heading */
h2.tax-section__heading {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  margin: 20px auto;
}

/* 2.4 .tax-section__intro */
.tax-section__intro {
  width: 21.77rem;
  margin: 0 auto;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.7px;
}

@media (min-width: 768px) {
  .tax-section {
    gap: 80px;
    width: var(--container-713);
  }
  .tax-section__intro {
    width: var(--container-713);
    line-height: 26px;
    letter-spacing: 0.9px;
  }
  h2.tax-section__heading {
    margin: 30px auto;
  }
}

@media (min-width: 1200px) {
  .tax-section {
    gap: 100px;
    width: var(--container-1300);
  }
  .tax-section__intro {
    width: var(--container-1300);
    line-height: 28px;
    letter-spacing: 1.1px;
  }
  h2.tax-section__heading {
    margin: 40px auto;
  }
}
@media (min-width: 1920px) {
  .tax-section {
    width: var(--container-1900);
  }
  .tax-section__intro {
    width: var(--container-1900);
    line-height: 35px; /* 145.833% */
    letter-spacing: 1.2px;
  }
}
/* =========================================
   3. TAX CARDS (COMPONENT)
   ========================================= */

/* 3.1 .tax-card */
.tax-card {
  display: flex;
  width: 21.67rem;
  height: 450px;
  gap: 20px;
  padding: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 10px;
  background: #eceef6;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .tax-card {
    width: 47.5rem; /* 570px */
    padding: 4.26166666667rem;
    height: 385px;
  }
}

@media (min-width: 1200px) {
  .tax-card {
    width: 86.67rem; /* 1040px */
    height: 320px;
    padding: 1rem 9.33333333rem;
  }
}

@media (min-width: 1920px) {
  .tax-card {
    width: 126.67rem; /* 1520px */
    padding: 4rem;
    height: 315px;
  }
}
/* 3.2 h4.tax-card__title */
h4.tax-card__title {
  width: 100%;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.367px;
}

@media (min-width: 768px) {
  h4.tax-card__title {
    width: var(--container-588);
  }
}

@media (min-width: 1200px) {
  h4.tax-card__title {
    width: 55rem;
  }
  h4.tax-card__title br {
    display: none;
  }
}
@media (min-width: 1621px) {
  h4.tax-card__title {
    width: 65rem;
  }
}
@media (min-width: 1920px) {
  h4.tax-card__title {
    width: 100%;
  }
}

/* 3.3 .tax-card__text */
.tax-card__text {
  width: 100%;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.7px;
}

@media (min-width: 768px) {
  .tax-card__text {
    width: var(--container-588);
    line-height: 26px; /* 144.444% */
    letter-spacing: 0.9px;
  }
}

@media (min-width: 1200px) {
  .tax-card__text {
    width: var(--container-1000);
  }
}
@media (min-width: 1920px) {
  .tax-card__text {
    width: 100%;
    letter-spacing: 1.2px;
  }
}
/* =========================================
   3.4 TAX CARD BACKGROUNDS (Modifiers)
   ========================================= */
.tax-card{
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* ------------------------------------------------------------------
   CARD ONE
   ------------------------------------------------------------------ */
.tax-card--one {
  /* Fallback for very old browsers */
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background.png");
  /* Modern browsers choose the best format */
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_one_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_one_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD TWO
   ------------------------------------------------------------------ */
.tax-card--two {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_two_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_two_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD THREE
   ------------------------------------------------------------------ */
.tax-card--three {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_three_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_three_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD FOUR
   ------------------------------------------------------------------ */
.tax-card--four {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_four_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_four_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.png")
        type("image/png")
    );
  }
}

/* =========================================
   4. CONSIDERATIONS & STRATEGIES
   ========================================= */

/* 4.1 .considerations */
.considerations {
  /* Keeps the section organized */
  width: 100%;
  overflow-x: clip; /* Prevents horizontal scroll if image hangs off slightly */
  margin-top: 50px;
}

/* 4.2 h2.considerations__heading */
h2.considerations__heading {
  width: 22rem;
  margin: 20px auto 50px auto;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.709px;
}
@media(min-width:576px){
  h2.considerations__heading br{
    display: none;
  }
  h2.considerations__heading{
    width: 45rem;
  }
}
@media (min-width: 768px) {
  h2.considerations__heading {
    width: 51.666666667rem;
  }
  h2.considerations__heading br {
    display: none;
  }
}

@media (min-width: 1200px) {
  h2.considerations__heading {
    width: 99rem;
  }
}
@media (min-width: 1400px) {
  h2.considerations__heading {
    width: 110rem;
  }
}
.considerations__intro-fade {
  width: 100%;
  height: 70px;
  background: linear-gradient(180deg, rgba(40, 52, 112, 0) 0%, #283470 100%);
}
.considerations__outro-fade {
  width: 100%;
  height: 70px;
  background: linear-gradient(360deg, rgba(40, 52, 112, 0) 0%, #283470 100%);
}
/* 4.3 .considerations__body */
.considerations__body {
  background: var(--Navy-Blue-900);
  /* Added for positioning context: */
  position: relative;
  width: 100%;
}
@media (min-width: 1200px) {
  .considerations__body {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* padding: 100px; */
    align-items: flex-start;
  }
}
/* 4.4 h3.considerations__intro */
h3.considerations__intro {
  width: 18.67rem;
  margin: 0 auto;
  padding-top: 5rem;
  color: var(--font-color-heading);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.05px;

  /* Ensure text sits on top of image if they overlap */
  position: relative;
  z-index: 2;
}
@media (min-width: 576px) {
  h3.considerations__intro {
    width: 43rem;
    margin: 0 auto;
  }
  h3.considerations__intro br {
    display: none;
  }
}
@media (min-width: 768px) {
  h3.considerations__intro {
    width: 51.4167rem;
  }
}
@media (min-width: 992px) {
  h3.considerations__intro {
    width: 68.083rem;
  }
}
@media (min-width: 1200px) {
  h3.considerations__intro {
    width: 90.5rem;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 40px 100px;
  }
}
@media (min-width: 1400px) {
  h3.considerations__intro {
    width: 105.25rem;
    line-height: normal;
    letter-spacing: 2.149px;
  }
}
@media (min-width: 1621px) {
  h3.considerations__intro {
    width: 109rem;
  }
}
@media (min-width: 1920px) {
  h3.considerations__intro {
    width: 138rem;
  }
}
/* 4.5 .considerations__image */
/* Wrapper for the picture tag */
.considerations__image {
  display: block;
  width: 100%;
  /* Default Mobile: Stack it at the bottom or top */
  /* margin-top: -0; */
}
@media (min-width: 1400px) {
  .considerations__image {
    position: absolute;
    top: 50%; /* Move top edge to vertical center */
    right: 0; /* Stick to the right edge */
    transform: translateY(-50%); /* Shift up by 50% to center perfectly */

    margin-top: 0; /* Remove the mobile margin */

    z-index: 1; /* Sit behind text */
  }
}
/* Target the actual img inside */
.considerations__img-element {
  width: 100%;
  height: auto;
  display: block;
}

/* 4.6 .strategies */
.strategies {
  padding-bottom: 3rem;
  /* Ensure text sits on top of image */
  position: relative;
  z-index: 2;
}

/* 4.7 .strategies__list */
.strategies__list {
  width: 21.67rem;
  margin: 50px auto 0 auto;
  color: var(--font-color-heading);
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 576px) {
  .strategies__list {
    width: 38.5rem;
  }
}
@media (min-width: 768px) {
  .strategies__list {
    width: 52.67rem;
  }
}
@media (min-width: 992px) {
  .strategies__list {
    width: 60.083rem;
  }
}
@media (min-width: 1200px) {
  .strategies {
    width: 100%;
    padding: 0 100px;
  }
  .strategies__list {
    width: 78rem;
    position: relative;
    z-index: 2;
    margin: 50px 0;
    padding: 2rem;
  }
}
@media (min-width: 1400px) {
  .strategies__list {
    width: 56rem;
  }
}
@media (min-width: 1621px) {
  .strategies__list {
    width: 61rem;
  }
}
@media (min-width: 1920px) {
  .strategies__list {
    width: 68.2rem;
  }
}
/* 4.8 .strategies__item */
.strategies__item {
  width: 100%;
  margin: 0 auto;
  color: var(--font-color-heading);
  font-family: var(--font-primary), sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.6px;
}

.strategies__item::marker {
  color: var(--font-color-heading);
}

/* =========================================
   5. DECORATIVE SHAPES
   ========================================= */

/* 5.1 .deco-shape--taxes-hex */

/* 5.2 .deco-shape--taxes-square */

/* 5.3 .deco-shape--taxes-circle */

/* 5.4 .deco-shape--taxes-triangle */

/* =========================================
   6. MESSAGE SECTION
   ========================================= */

/* 6.1 .message */
.message {
  padding-top: 5rem;
  position: relative;
  overflow: hidden;
  width: 21.66666667rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* 6.2 h2.message__title */
h2.message__title {
  width: 17.5rem;
  margin: 0 auto;
  color: var(--Navy-Blue-900);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
}

@media (min-width: 768px) {
  .message {
    width: 38.3333333333rem;
  }
  h2.message__title {
    width: 100%;
  }
}
@media (min-width: 992px) {
  h2.message__title {
    width: 100%;
    text-align: left;
  }
}

/* 6.3 .message__text */
.message__text {
  width: 21.67rem;
  margin: 0 auto;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.7px;
}

@media (min-width: 768px) {
  .message__text {
    width: 100%;
    line-height: 26px; /* 144.444% */
    letter-spacing: 0.9px;
  }
}
@media (min-width: 1200px) {
  .message__text {
    line-height: 28px; /* 127.273% */
    letter-spacing: 1.1px;
  }
}
@media (min-width: 1621px) {
  .message__text {
    line-height: 35px; /* 145.833% */
    letter-spacing: 1.2px;
  }
}
/* --- DESKTOP LAYOUT (992px+) --- */
/* This handles shifting the image to the right of the text */
@media (min-width: 992px) {
  .message--has-image {
    display: flex;
    align-items: center; /* Vertically center text with image */
    justify-content: space-between; /* Push content apart */
    gap: 4rem;
    max-width: 1400px; /* Prevent ultra-wide stretching */
    margin: 0 auto;
    padding-bottom: 5rem; /* Add bottom padding on desktop */
  }
}
@media (min-width: 1200px) {
  .message--has-image {
    width: 1040px;
    flex-direction: row;
    gap: 40px;
  }
}
@media (min-width: 1400px) {
  .message--has-image {
    align-items: center;
  }
}
@media (min-width: 1621px) {
  .message--has-image {
    width: 1200px;
  }
}
@media (min-width: 1920px) {
  .message--has-image {
    width: 1685px;
    max-width: 1800px;
    gap: 12.5rem;
    padding: 12.5rem 0 4rem 0;
    align-items: center;
  }
}
/* Wrapper for Title + Text + Color Bar */
.message__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  flex: 1;
  /* width: 21.66666667rem; */
  width: 100%;
}
@media (min-width: 1200px) {
  .message__content-wrapper {
    width: 46.25rem;
  }
}
@media (min-width: 1400px) {
  .message__content-wrapper {
    width: 45.8333333rem;
  }
}
@media (min-width: 1621px) {
  .message__content-wrapper {
    width: 62rem;
  }
}
/* =========================================
   7. LAYERED IMAGE (RECTANGLE OVERRIDES)
   ========================================= */

/* 7.1 .layered-image--taxes (Modifier) */
/* This overrides your global square settings with the page-specific rectangles */
.layered-image--taxes {
  /* 1. Define Base Mobile Dimensions */
  --taxes-w: 246.143px;
  --taxes-h: 173.295px;

  /* 2. Variable Offsets (from your global file) */
  --offset-inline: 15px;
  --offset-block: 13px;

  /* 3. Apply Dimensions */
  width: calc(var(--taxes-w) + var(--offset-inline));
  height: calc(var(--taxes-h) + var(--offset-block));

  /* Center on mobile */
  margin: 30px auto 0 auto;
}
.layered-image--taxes .layered-image__bg {
  background: linear-gradient(
    180deg,
    rgba(40, 52, 112, 0.4) 0%,
    rgba(40, 52, 112, 0.2) 100%
  );
}
/* Force the inner elements to use these new dimensions */
.layered-image--taxes .layered-image__bg,
.layered-image--taxes .layered-image__frame {
  width: var(--taxes-w);
  height: var(--taxes-h);
}

/* --- RESPONSIVE RESIZING --- */
/* 768px: Same as 576px */
@media (min-width: 768px) {
  .layered-image--taxes {
    --taxes-w: 430.75px;
    --taxes-h: 303.266px;
  }
}

/* 992px: Same Size, but Layout Shift Happens Here */
@media (min-width: 992px) {
  .layered-image--taxes {
    --taxes-w: 430.75px;
    --taxes-h: 303.266px;

    margin: 0; /* Reset auto margin so Flexbox handles alignment */
    flex-shrink: 0; /* Prevent image from shrinking if text gets long */
  }
}

/* 1200px: Width 504.909px / Height 355.477px */
@media (min-width: 1200px) {
  .layered-image--taxes {
    --taxes-w: 440px;
    --taxes-h: 300px;
  }
}

/* 1920px: Width 897.616px / Height 631.959px */
@media (min-width: 1920px) {
  .layered-image--taxes {
    --taxes-w: 780px;
    --taxes-h: 485px;
  }
}