:root{
  /* set this to your sticky navbar height if needed */
  --nav-h: 0px;
}

/* Section wrapper */
.citizen{
  background:#060810;
  color:#fff;
}

/* 2-column layout that adapts from laptops to ultra-wide */
.citizen-container{
  display: grid;
  /* Left column grows but is capped; right column takes the rest */
  grid-template-columns:
    minmax(480px, 50vw)        /* image */
    minmax(420px, 1fr);        /* text  */
  min-height: calc(100vh - var(--nav-h));
  align-items: stretch;

  /* fluid edge breathing room so text never hugs screen edges */
  padding-inline: clamp(12px, 2.2vw, 36px);
}

/* Left: full-height visual */
.citizen-image{
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--nav-h));
}
.citizen-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;

  /* soft fade into the dark background on the right edge */
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, #000 84%, transparent 100%);
}

/* Right: text pane uses full available column width with comfy padding */
.citizen-text{
  display:grid;
  align-items:center;                           /* vertical centering */
  padding-block: clamp(18px, 3.5vw, 56px);
  padding-inline: clamp(14px, 3vw, 48px);       /* side padding scales */
}

/* Keep line length readable but let content fill the column nicely */
.citizen-text__inner{
  width: min(92ch, 100%);       /* use the column, cap line length */
}

/* Paragraph sizing scales with screen; comfortable leading */
.citizen-intro{
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.75;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}

/* -------- Phones / small tablets -------- */
@media (max-width: 900px){
  .citizen-container{
    grid-template-columns: 1fr;
    min-height: auto;
    padding-inline: clamp(12px, 4vw, 22px);
  }
  .citizen-image{
    height: 46vh;
  }
  .citizen-image img{
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  }
  .citizen-text{
    padding: clamp(16px, 5vw, 28px);
  }
  .citizen-text__inner{
    width: min(80ch, 100%);
  }
}

/* -------- Very wide monitors (e.g., ≥1600px) -------- */
@media (min-width: 1600px){
  .citizen-container{
    /* give the text a bit more real estate, reduce image dominance */
    grid-template-columns: minmax(640px, 46vw) 1fr;
  }
  .citizen-text__inner{
    width: min(96ch, 100%);
  }
}