```css


/* ========================================================= MARQUEE (GLOBAL): move text block left on desktop ========================================================= */
@media (min-width: 992px){
  .marquee__overlay .container{
    padding-left: 0 !important;
  }
  .marquee__overlay .marquee__text{
    padding-left: 0 !important;
    margin-left: -20px; /* adjust to taste */

  }
}

/* HERO marquee only (page heading hero): reduce layout shift on load */
.marquee:has(h1.pageHeading) .marquee__overlay{
  aspect-ratio: 12 / 5;
}

/* ========================================================= HERO SNIPPET (JOIN UC IRVINE POLICE DEPARTMENT) ========================================================= */
.marquee__snippet{
  padding-left: 0 !important;
}
.marquee__snippet p:first-child{
  margin-left: 0 !important;
  padding-left: 0 !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 730;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.marquee__snippet p:first-child .pd{
  color: #ffd200;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* Subtitle line ("Serve with an accredited agency...") */
.marquee__snippet p:nth-of-type(2){
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.20rem;
  line-height: 1.3;
  margin-top: 0.5rem;
}

/* ========================================================= CHIEF QUOTE MARQUEE (uses asset NAME so folder swaps won't break it) ========================================================= */
/* Move the chief quote text block to the RIGHT side */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__overlay .row{
  justify-content: flex-end;
}
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__text{
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
/* On large screens, keep it about half width and right-aligned */
@media (min-width: 992px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__text{
    max-width: 50%;
  }
}
/* Edge-to-edge */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"]{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Remove gutters in the overlay container */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__overlay .container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Control the visible banner height */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__visual{
  height: 420px; /* try 360–520 */
  overflow: hidden;
}
/* Make the image fill the full width AND height without stretching */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] img.marquee__media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Responsive height */
@media (min-width: 992px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__visual{
    height: 520px;
  }
}
@media (max-width: 768px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__visual{
    height: 300px;
  }
}
/* Give the right-aligned text some breathing room */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__text{
  padding-right: 18rem; /* adjust */
  padding-left: 1.5rem;
}
/* Mobile: center it again */
@media (max-width: 768px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__text{
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    max-width: 100%;
    text-align: center;
    margin-left: 0;
  }
}
/* Quote line (first paragraph) */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__snippet p:first-child{
  font-size: 1.55rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
  font-weight: 400 !important;
  font-style: italic;
  text-align: left !important;
}
/* Attribution (second paragraph: name + title) */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__snippet p:nth-of-type(2){
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0;
  opacity: 0.95;
  text-align: right !important;
}
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__snippet p:nth-of-type(2) strong{
  font-weight: 700;
}
/* White gradient overlay for readability */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__overlay{
  background: linear-gradient(to left, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.00) 77%);
}

/* ========================================================= WHY WORK MARQUEE (uses asset NAME so folder swaps won't break it) ========================================================= */
/* Desktop: force 2 columns (text left, image right) */
@media (min-width: 992px){
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__heading{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
    gap: 3rem;
    align-items: stretch;
    position: static !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.00rem, 4vw, 1.00rem);
    padding-right: clamp(1.00rem, 4vw, 1.00rem);
  }
  /* Image column (right) */
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__visual{
    grid-column: 2;
    grid-row: 1;
    width: min(680px, 100%);
    height: 450px;
    aspect-ratio: 680 / 450;
    overflow: hidden;
    position: relative;
  }
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] img.marquee__media{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Text column (left) — kill the overlay behavior */
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__overlay{
    grid-column: 1;
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    z-index: 1 !important;
  }
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__overlay .container{
    max-width: none !important;
    width: 100%;
    padding: 0 !important;
  }
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__text{
    padding: 2rem 1.5rem;
    text-align: left !important;
  }
  /* Fix skinny text: override built-in col sizing inside the grid cell */
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__overlay .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__text{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Mobile: stack */
@media (max-width: 991px){
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] .marquee__visual{
    width: 100%;
    aspect-ratio: 680 / 450;
    overflow: hidden;
  }
  .marquee[data-cascade-asset-name="why-work-at-ucipd-layout"] img.marquee__media{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ========================================================= PHOTODECK: hide Explore header only ========================================================= */
.photodeck[data-cascade-asset-name="hiring-2-photodeck-layout"] .photodeck__heading.sectionHeading{
  display: none !important;
}

/* ========================================================= PHOTODECK: center + narrow intro text ========================================================= */
.photodeck[data-cascade-asset-name="hiring-1-photodeck-layout"] .photodeck__snippet{
  max-width: 67ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 991px){
  .photodeck[data-cascade-asset-name="hiring-1-photodeck-layout"] .photodeck__snippet{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ========================================================= PHOTODECK: heading font + size (responsive) ========================================================= */
.photodeck[data-cascade-asset-name="hiring-1-photodeck-layout"] .photodeck__heading.sectionHeading{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.75rem, 2.2vw, 3.15rem);
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ========================================================= INTRO WYSIWYG: match heading to photodeck heading + CENTER IT ========================================================= */
.contentGroup .widget[data-cascade-asset-name="intro-wysiwyg-widget"] .wysiwyg__heading.widget__heading{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.75rem, 2.2vw, 3.15rem);
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
  margin: 0 auto 0.75rem auto;
  text-align: center;
}
```
/* ========================================================= CHIEF QUOTE MARQUEE: kill extra space under block (override inline overlay height) ========================================================= */

/* Define a single height source of truth */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"]{
  --chief-quote-h: 420px;
}
@media (min-width: 992px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"]{
    --chief-quote-h: 520px;
  }
}
@media (max-width: 768px){
  .marquee[data-cascade-asset-name="chief-quote-marquee-layout"]{
    --chief-quote-h: 300px;
  }
}

/* Apply that height to BOTH the image area and the overlay (overrides inline height) */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__visual{
  height: var(--chief-quote-h) !important;
}
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__overlay{
  height: var(--chief-quote-h) !important; /* <-- this is the key */
}

/* Optional: also ensure the whole heading doesn't grow taller than intended */
.marquee[data-cascade-asset-name="chief-quote-marquee-layout"] .marquee__heading{
  height: var(--chief-quote-h);
  overflow: hidden;
}