.unoc-downstream-redesign {
  --g: #1A191A;
  --g2: #414042;
  --cream: #FFFFFF;
  --paper: #FFFFFF;
  --gold: #FFC808;
  --gold2: #FFC808;
  --ink: #1A191A;
  --muted: #59585A;
  --line: #F9F7F2;
}

.unoc-downstream-redesign * {
  box-sizing: border-box;
}

.unoc-downstream-redesign {
  background: var(--paper);
  color: var(--ink);
  font-family: Poppins, Arial, sans-serif;
}

.unoc-downstream-redesign a {
  text-decoration: none;
  color: inherit;
}

.unoc-downstream-redesign .wrap {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}

.unoc-downstream-redesign .hero {
  background: linear-gradient(105deg, #FFFFFF 0 61%, #F9F7F2 100%);
  border-bottom: 2px solid var(--gold);
}

.unoc-downstream-redesign .hero-grid,
.unoc-downstream-redesign .heroGrid {
  min-height: 390px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 55px;
  align-items: center;
}

.unoc-downstream-redesign .hero-grid {
  min-height: 465px;
  grid-template-columns: 1.02fr .98fr;
  gap: 65px;
}

.unoc-downstream-redesign .ey {
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #FFC808;
  font-weight: 800;
  margin-bottom: 18px;
}

.unoc-downstream-redesign .ey:before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin-right: 11px;
  vertical-align: middle;
}

.unoc-downstream-redesign h1 {
  font: 500 clamp(48px, 5vw, 72px)/.96 Poppins;
  color: var(--g);
  letter-spacing: -.04em;
  margin: 0 0 22px;
}

.unoc-downstream-redesign .heroGrid h1 {
  font: 500 clamp(43px, 5vw, 66px)/.98 Poppins;
  letter-spacing: -.035em;
  margin: 0 0 20px;
}

.unoc-downstream-redesign .hero p {
  font-size: 17px;
  line-height: 1.7;
  color: #59585A;
}

.unoc-downstream-redesign .heroGrid p {
  font-size: 16px;
}

/* Main hub terminal art */
.unoc-downstream-redesign .terminal {
  height: 325px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#7C7A7D 0 47%, #FFC808 47%);
}

.unoc-downstream-redesign .terminal .tank {
  position: absolute;
  bottom: 22%;
  width: 115px;
  height: 90px;
  border-radius: 55% 55% 8px 8px;
  background: #F6F6F6;
  border: 5px solid #8b918b;
  box-shadow: inset 0 14px 0 #FFC808;
}

.unoc-downstream-redesign .terminal .t1 {
  left: 12%;
}

.unoc-downstream-redesign .terminal .t2 {
  left: 41%;
  transform: scale(1.18);
}

.unoc-downstream-redesign .terminal .t3 {
  right: 9%;
  transform: scale(.85);
}

.unoc-downstream-redesign .terminal .pipe {
  position: absolute;
  left: 10%;
  right: 9%;
  bottom: 18%;
  height: 11px;
  background: #FFC808;
  box-shadow: 0 -42px 0 #7C7A7D;
}

.unoc-downstream-redesign .terminal .truck {
  position: absolute;
  bottom: 8%;
  left: 58%;
  width: 100px;
  height: 24px;
  background: #eee;
  border-radius: 13px;
}

.unoc-downstream-redesign .terminal .truck:after {
  content: "";
  position: absolute;
  right: -28px;
  width: 32px;
  height: 24px;
  background: #59585A;
}

/* Project page visual art */
.unoc-downstream-redesign .visual {
  height: 285px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#F6F6F6 0 52%, #FFC808 52%);
}

.unoc-downstream-redesign .visual .tank {
  position: absolute;
  bottom: 20%;
  width: 110px;
  height: 92px;
  background: #F9F7F2;
  border: 4px solid #8e948e;
  border-radius: 52% 52% 7px 7px;
}

.unoc-downstream-redesign .visual .a {
  left: 12%;
}

.unoc-downstream-redesign .visual .b {
  left: 43%;
  transform: scale(1.18);
}

.unoc-downstream-redesign .visual .c {
  right: 8%;
  transform: scale(.8);
}

.unoc-downstream-redesign .visual .road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  background: #5c625e;
  transform: skewY(-3deg);
  transform-origin: left;
}

.unoc-downstream-redesign .terminal .label,
.unoc-downstream-redesign .visual .label {
  position: absolute;
  left: 22px;
  bottom: 19px;
  background: rgba(7, 37, 28, .94);
  padding: 13px 17px;
  color: white;
}

.unoc-downstream-redesign .visual .label {
  left: 20px;
  bottom: 18px;
  padding: 12px 15px;
}

.unoc-downstream-redesign .label small {
  display: block;
  color: var(--gold2);
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 800;
}

.unoc-downstream-redesign .label b {
  font: 500 20px Poppins;
}

.unoc-downstream-redesign .visual .label b {
  font: 500 19px Poppins;
}

.unoc-downstream-redesign .stats {
  background: var(--g);
  color: white;
}

.unoc-downstream-redesign .statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.unoc-downstream-redesign .stat {
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, .13);
}

.unoc-downstream-redesign .stat strong {
  display: block;
  font: 500 29px Poppins;
  color: var(--gold2);
  margin-bottom: 5px;
}

.unoc-downstream-redesign .stat span {
  font-size: 12px;
  line-height: 1.5;
  color: #F6F6F6;
}

.unoc-downstream-redesign .section {
  padding: 82px 0;
}

.unoc-downstream-redesign .head {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 80px;
  margin-bottom: 44px;
}

.unoc-downstream-redesign .head h2,
.unoc-downstream-redesign .section h2 {
  font: 500 44px/1.05 Poppins;
  color: var(--g);
  margin: 0;
}

.unoc-downstream-redesign .head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.unoc-downstream-redesign .mandates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}

.unoc-downstream-redesign .mandate {
  padding: 29px;
  border-right: 1px solid var(--line);
  min-height: 240px;
  transition: .2s;
}

.unoc-downstream-redesign .mandate:last-child {
  border: 0;
}

.unoc-downstream-redesign .mandate:hover {
  background: #F9F7F2;
}

.unoc-downstream-redesign .mandate span {
  font: 500 30px Poppins;
  color: var(--gold);
}

.unoc-downstream-redesign .mandate h3 {
  font: 500 21px Poppins;
  color: var(--g);
  margin: 18px 0 10px;
}

.unoc-downstream-redesign .mandate p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

.unoc-downstream-redesign .npc {
  background: #F9F7F2;
}

.unoc-downstream-redesign .npcgrid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
}

.unoc-downstream-redesign .npcgrid p {
  color: var(--muted);
  line-height: 1.75;
}

.unoc-downstream-redesign .dark {
  background: var(--g);
  color: white;
  padding: 40px;
}

.unoc-downstream-redesign .dark small {
  font-size: 9px;
  color: var(--gold2);
  letter-spacing: .15em;
  font-weight: 800;
}

.unoc-downstream-redesign .dark h3 {
  font: 500 31px Poppins;
  margin: 12px 0;
}

.unoc-downstream-redesign .dark p {
  color: #F6F6F6;
}

.unoc-downstream-redesign .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.unoc-downstream-redesign .tag {
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 9px 11px;
  font-size: 10px;
}

.unoc-downstream-redesign .portfolio {
  background: var(--g);
  color: white;
}

.unoc-downstream-redesign .portfolio h2 {
  color: white;
}

.unoc-downstream-redesign .portfolio .head p {
  color: #F6F6F6;
}

.unoc-downstream-redesign .projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.unoc-downstream-redesign .project {
  background: #1A191A;
  border: 1px solid rgba(255, 255, 255, .15);
  padding: 30px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  transition: .25s;
}

.unoc-downstream-redesign .project:hover {
  transform: translateY(-5px);
  background: #414042;
}
.unoc-downstream-redesign .projects .project img{display:block;width:calc(100% + 60px);height:170px;object-fit:cover;margin:-30px -30px 24px;border-bottom:3px solid #e51d48}
.unoc-downstream-redesign .mcards .mcard img{display:block;width:100%;height:150px;object-fit:cover;margin:-18px 0 18px;border-radius:10px 10px 0 0}

.unoc-downstream-redesign .project small {
  font-size: 9px;
  color: var(--gold2);
  letter-spacing: .14em;
  font-weight: 800;
}

.unoc-downstream-redesign .project h3 {
  font: 500 27px Poppins;
  margin: 17px 0 12px;
}

.unoc-downstream-redesign .project p {
  font-size: 12px;
  line-height: 1.65;
  color: #F6F6F6;
}

.unoc-downstream-redesign .project b {
  margin-top: auto;
  color: var(--gold2);
  font-size: 11px;
}

.unoc-downstream-redesign .flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
}

.unoc-downstream-redesign .flowitem {
  padding: 28px;
  position: relative;
  border-right: 1px solid var(--line);
  min-height: 205px;
}

.unoc-downstream-redesign .flowitem:last-child {
  border: 0;
}

.unoc-downstream-redesign .flowitem:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 35px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold2);
  display: grid;
  place-items: center;
  z-index: 2;
  font-size: 11px;
}

.unoc-downstream-redesign .flowitem small {
  font-size: 9px;
  color: #FFC808;
  letter-spacing: .14em;
  font-weight: 800;
}

.unoc-downstream-redesign .flowitem h3 {
  font: 500 20px Poppins;
  color: var(--g);
  margin: 15px 0;
}

.unoc-downstream-redesign .flowitem p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.unoc-downstream-redesign .value {
  background: #F9F7F2;
}

.unoc-downstream-redesign .valuegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.unoc-downstream-redesign .vcard {
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 28px;
}

.unoc-downstream-redesign .vcard small {
  font-size: 9px;
  color: #FFC808;
  letter-spacing: .14em;
  font-weight: 800;
}

.unoc-downstream-redesign .vcard h3 {
  font: 500 22px Poppins;
  color: var(--g);
  margin: 14px 0 9px;
}

.unoc-downstream-redesign .vcard p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

.unoc-downstream-redesign .next {
  padding: 70px 0;
}

.unoc-downstream-redesign .links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 35px;
}

.unoc-downstream-redesign .link {
  background: #fff;
  border: 1px solid var(--line);
  padding: 27px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  transition: .2s;
}

.unoc-downstream-redesign .link:hover {
  transform: translateY(-4px);
}

.unoc-downstream-redesign .link small {
  font-size: 9px;
  color: #FFC808;
  font-weight: 800;
  letter-spacing: .14em;
}

.unoc-downstream-redesign .link h3 {
  font: 500 22px Poppins;
  color: var(--g);
}

.unoc-downstream-redesign .link b {
  margin-top: auto;
  color: #FFC808;
  font-size: 11px;
}

.unoc-downstream-redesign .terminal-bg {
  position: relative;
  height: 325px;
  overflow: hidden;
  border-radius: 20px;
  background: #1A191A;
}

.unoc-downstream-redesign .terminal-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.unoc-downstream-redesign .terminal-bg:hover img {
  transform: scale(1.04);
}

.unoc-downstream-redesign .terminal-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 25, 26, .72), transparent 58%);
}

.unoc-downstream-redesign .fuel-gallery {
  background: #F9F7F2;
}

.unoc-downstream-redesign .fuel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.unoc-downstream-redesign .fuel-item {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #E8E6E1;
  cursor: pointer;
}

.unoc-downstream-redesign .fuel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .35s ease;
}

.unoc-downstream-redesign .fuel-item:hover img,
.unoc-downstream-redesign .fuel-item:focus-visible img {
  transform: scale(1.08);
  filter: saturate(1.1);
}

.unoc-downstream-redesign .fuel-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Project page cards */
.unoc-downstream-redesign .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.unoc-downstream-redesign .card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 27px;
  min-height: 215px;
}

.unoc-downstream-redesign .card small {
  font-size: 9px;
  color: #FFC808;
  letter-spacing: .14em;
  font-weight: 800;
}

.unoc-downstream-redesign .card h3 {
  font: 500 22px Poppins;
  color: var(--g);
  margin: 14px 0;
}

.unoc-downstream-redesign .card p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

.unoc-downstream-redesign .feature {
  background: #F9F7F2;
}

.unoc-downstream-redesign .twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.unoc-downstream-redesign .facts {
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 34px;
}

.unoc-downstream-redesign .fact {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.unoc-downstream-redesign .fact:last-child {
  border: 0;
}

.unoc-downstream-redesign .fact b {
  font: 500 22px Poppins;
  color: var(--gold);
  min-width: 72px;
}

.unoc-downstream-redesign .fact span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.unoc-downstream-redesign .progress {
  background: var(--g);
  color: white;
}

.unoc-downstream-redesign .progress h2 {
  color: white;
}

.unoc-downstream-redesign .progress .head p {
  color: #F6F6F6;
}

.unoc-downstream-redesign .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .14);
}

.unoc-downstream-redesign .step {
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  min-height: 205px;
}

.unoc-downstream-redesign .step:last-child {
  border: 0;
}

.unoc-downstream-redesign .step b {
  font: 500 27px Poppins;
  color: var(--gold2);
}

.unoc-downstream-redesign .step h3 {
  font: 500 18px Poppins;
}

.unoc-downstream-redesign .step p {
  font-size: 11px;
  line-height: 1.6;
  color: #F6F6F6;
}

@media (max-width: 850px) {
  .unoc-downstream-redesign .hero-grid,
  .unoc-downstream-redesign .heroGrid,
  .unoc-downstream-redesign .head,
  .unoc-downstream-redesign .npcgrid,
  .unoc-downstream-redesign .twocol {
    grid-template-columns: 1fr;
  }

  .unoc-downstream-redesign .hero-grid,
  .unoc-downstream-redesign .heroGrid {
    padding: 55px 0;
  }

  .unoc-downstream-redesign .statgrid,
  .unoc-downstream-redesign .mandates,
  .unoc-downstream-redesign .flow,
  .unoc-downstream-redesign .cards,
  .unoc-downstream-redesign .steps,
  .unoc-downstream-redesign .fuel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .unoc-downstream-redesign .projects,
  .unoc-downstream-redesign .links,
  .unoc-downstream-redesign .valuegrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .unoc-downstream-redesign .wrap {
    width: calc(100% - 30px);
  }

  .unoc-downstream-redesign .statgrid,
  .unoc-downstream-redesign .mandates,
  .unoc-downstream-redesign .flow,
  .unoc-downstream-redesign .cards,
  .unoc-downstream-redesign .steps,
  .unoc-downstream-redesign .valuegrid,
  .unoc-downstream-redesign .fuel-grid {
    grid-template-columns: 1fr;
  }
}