.section {
    z-index: 0;
}

/*=== Quote BANDDDD ===*/


.quote-band2 {
    display: flex;
    flex-direction: column;
    
    align-items: flex-end;
    /* align both to the bottom */
    justify-content: space-between;
    gap: 2rem;

    overflow: hidden;
}

.quote-band2 img {
    justify-self: center;
    align-self: center;
    margin: 5rem;
    max-width: 100%;
    height: 300px;

}

.quote-band2 p {
    text-align: right;
    flex: 0 0 auto;
    /* don't let flex grow/shrink it */
    white-space: nowrap;
    /* wrap ONLY at <br> */
    margin: 2rem;
    margin-right: 120px;
    padding: 0;
    font: normal normal normal 20px/23px Arial;
    color: #FFF8F0;
    align-self: flex-end;
}



/*=== BRUSH BANDDDD ===*/

.brush-band {
    position: relative;
    isolation: isolate;
    /* new stacking context */
    overflow: hidden;
    /* clip anything that spills */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* centers the text in the band */
    min-height: clamp(360px, 50vh, 780px);
    /* softer growth */
    padding: 60px 20px;
    text-align: center;
}

.brush-band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    max-height: 800px;
    /* guardrail so it won’t balloon */
}

.brush-band p {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 24px;
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.6;
    color: #707070;
}


.brush-band mark {
    background: transparent;
    text-decoration: underline;
}


/*=== CARD BANDUH===*/

/* === Cards band === */



.cards-band {
    background-color: #F24D09;
}

.cards-band>h2 {
    text-align: left;
    font: normal normal normal 50px/58px Arial;

    color: #FFFFFF;
    padding-top: 1em;
    padding-left: 2em;
}

.highlight-container {
    display: flex;
    flex-direction: column;
    gap: 70px;

}

.highlight {
    background: #FFF8F0;
    color: #333;
    border-radius: 26px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    margin: 3rem;
}

.highlight h3 {
    margin: 0;
    color: #FF5B2E;
    font: normal normal bold 60px/69px Arial;
}

.highlight p {
    margin: 0;
    font: normal normal normal 18px/21px Arial;
    line-height: 1.55;
    padding-left: 50px;
}

/*== map section == */


.projects-band { margin: 2rem; }
.projects-band > h3 {
  margin: 0;
  padding: 1rem;
  color: #FF5B2E;
  font: 700 60px/69px Arial, sans-serif;
}

.projects-band>p{ margin: 2rem;     gap: 2rem;}

/* Two columns with 5 rows each: 1–5 left, 6–10 right */
.project-grid {
  display: grid;
  grid-auto-flow: column;             /* fill down first, then next column */
  grid-template-rows: repeat(5, auto);
  gap: 18px 56px;                     /* row / column gap */
  max-width: 980px;
  margin: 0 auto;
}

.project-grid ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: item;                /* start custom counter */
  display: contents;                  /* let <li> be grid items */
}

.project-grid li {
  counter-increment: item;            /* 1,2,3… */
  display: flex;
  align-items: center;
  gap: 14px;
  color: #6c6c6c;
}

.project-grid li::before {
  content: counter(item);
  flex: 0 0 40px;                     /* fixed circle size */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F04760;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.project-grid li a {
  color: inherit;
  text-decoration: none;
}

.project-grid li:hover::before { background: #ff6a54; }
.project-grid li a:hover { text-decoration: underline; }