.project-midstream-shopping {
  --ms-bg: var(--ux-ink, #0f0f0f);
  --ms-paper: var(--ux-paper, #f4f0ee);
  --ms-ink: var(--ux-ink, #0f0f0f);
  --ms-accent: var(--ux-red, #e52421);
  --ms-red-deep: var(--ux-red-deep, #b8161a);
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-paper);
  -webkit-font-smoothing: antialiased;
}
.project-midstream-shopping *, .project-midstream-shopping *::before, .project-midstream-shopping *::after { box-sizing: border-box; }
.project-midstream-shopping :is(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
.project-midstream-shopping a { color: inherit; }
.project-midstream-shopping a:focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 6px; }
.ms-wrap { width: min(1380px, calc(100% - 112px)); margin-inline: auto; }
.ms-skip { position: fixed; left: 20px; top: -100px; z-index: 99999; background: var(--ms-paper); color: var(--ms-ink) !important; padding: 12px 20px; }
.ms-skip:focus { top: 20px; }
.ms-hero { padding-block: 142px 70px; }
.ms-back { display: inline-block; font-size: 15px; text-underline-offset: 5px; }
.ms-hero .ms-eyebrow { margin-top: 56px; }
.ms-eyebrow { text-transform: uppercase; color: var(--ms-paper); }
.ms-hero h1 { max-width: 18ch; }
.ms-hero h1 em { color: var(--ms-accent); font-style: normal; }
.ms-deck { margin-top: 34px !important; margin-left: auto !important; max-width: 690px; color: rgba(244, 240, 238, .78); }
.ms-facts { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 30px; padding-top: 34px; margin-top: 56px !important; border-top: 1px solid rgba(244, 240, 238, .18); }
.ms-facts dt { color: rgba(244, 240, 238, .68); margin-bottom: 8px; }
.ms-brand-band { background: var(--ms-red-deep); color: var(--ms-paper); }
.ms-brand-band .ms-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 36px; font-family: var(--fgx-font-display); font-size: clamp(22px, 2.6vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.ms-brand-band strong { font-weight: 600; }
.ms-brand-band span:first-child { font-weight: 400; }
.ms-section { padding-block: 84px; border-bottom: 1px solid rgba(244, 240, 238, .18); }
.ms-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); margin-top: 24px; }
.ms-story h2 { max-width: 17ch; text-wrap: balance; }
.ms-copy { max-width: 660px; color: rgba(244, 240, 238, .78); }
.ms-copy p + p { margin-top: 22px; }
.ms-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 45px; }
.ms-figure { min-width: 0; }
.ms-image { position: relative; overflow: hidden; background: var(--ms-paper); aspect-ratio: 1536 / 674; }
.ms-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-archive .ms-image { aspect-ratio: 612 / 285; }
.ms-archive .ms-image img { position: absolute; width: 251%; max-width: none; height: auto; left: -83.3%; top: -98.2%; object-fit: initial; }
.ms-figure figcaption { color: rgba(244, 240, 238, .68); font-size: 13px; line-height: 1.6; margin-top: 13px; max-width: 65ch; }
.ms-leasing { max-width: 920px; margin: 42px 0 0 auto !important; }
.ms-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 48px; margin-top: 48px; border-top: 1px solid rgba(244, 240, 238, .18); }
.ms-metrics strong { display: block; color: var(--ms-accent); font: 500 clamp(40px, 5vw, 82px)/1.2 var(--fgx-font-display); letter-spacing: -.05em; }
.ms-metrics span { display: block; margin-top: 8px; font-size: 16px; }
.ms-source { margin-top: 25px !important; color: rgba(244, 240, 238, .68); max-width: 105ch; }
.ms-cta { padding-block: 88px 100px; background: var(--ms-paper); color: var(--ms-ink); }
.ms-cta .ms-eyebrow { color: var(--ms-red-deep); }
.ms-cta p:not(.ms-eyebrow) { margin-top: 28px; max-width: 620px; }
.ms-button { display: inline-flex; gap: 35px; align-items: center; justify-content: space-between; margin-top: 30px; background: var(--ms-red-deep); color: var(--ms-paper) !important; padding: 18px 24px; font-size: 16px; line-height: 1.35; font-weight: 600; text-decoration: none; }
.ms-button:hover { background: var(--ms-ink); }
.ms-cta .ms-back { margin: 25px 0 0 28px; }
@media (min-width: 1800px) { .ms-wrap { width: min(1480px, calc(100% - 144px)); } }
@media (max-width: 900px) {
  .ms-wrap { width: calc(100% - 64px); }
  .ms-hero { padding-top: 125px; }
  .ms-story { grid-template-columns: 1fr; gap: 28px; }
  .ms-story h2 { max-width: 24ch; }
  .ms-copy { max-width: 100%; }
  .ms-facts { grid-template-columns: 1fr 1fr; }
  .ms-facts > div:last-child { grid-column: 1 / -1; }
  .ms-section { padding-block: 62px; }
}
@media (max-width: 600px) {
  .ms-wrap { width: calc(100% - 40px); }
  .ms-hero { padding-block: 112px 42px; }
  .ms-hero .ms-eyebrow { margin-top: 34px; }
  .ms-deck { margin-top: 26px !important; }
  .ms-facts { margin-top: 35px !important; gap: 24px; }
  .ms-brand-band .ms-wrap { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 28px; }
  .ms-brand-band span[aria-hidden] { transform: rotate(90deg); font-size: 26px; line-height: 1; }
  .ms-section { padding-block: 48px; }
  .ms-pair { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .ms-leasing { margin-top: 30px !important; }
  .ms-metrics { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; margin-top: 35px; }
  .ms-metrics > div { padding-bottom: 22px; border-bottom: 1px solid rgba(244, 240, 238, .18); }
  .ms-metrics > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .ms-metrics strong { font-size: 58px; }
  .ms-cta { padding-block: 60px; }
  .ms-button { width: 100%; gap: 20px; padding: 18px; }
  .ms-cta .ms-back { margin: 26px 0 0; }
}


/* Calendar-month evidence and approved case narrative. */
.project-midstream-shopping .ms-hero-result { margin-top: 38px; padding-left: 22px; border-left: 3px solid var(--ms-accent); max-width: 780px; }
.project-midstream-shopping .ms-result-headline { color: var(--ms-accent); }
.project-midstream-shopping .ms-result-detail { margin-top: 10px; color: rgba(244, 240, 238, .78); overflow-wrap: anywhere; }
.project-midstream-shopping .ms-hero .ms-eyebrow { margin-top: 44px; }
.project-midstream-shopping .ms-monthly-totals { margin: 22px 0; padding-left: 1.25em; }
.project-midstream-shopping .ms-monthly-totals li + li { margin-top: 8px; }
.project-midstream-shopping .ms-chart { margin-top: 48px; }
.project-midstream-shopping .ms-chart-link { display: block; }
.project-midstream-shopping .ms-chart img { display: block; width: 100%; height: auto; background: #fff; }
.project-midstream-shopping .ms-chart figcaption { max-width: 100ch; }
.project-midstream-shopping .ms-chart figcaption a { text-underline-offset: 3px; }
.project-midstream-shopping .ms-chart-data { margin-top: 28px; border-top: 1px solid rgba(244, 240, 238, .18); border-bottom: 1px solid rgba(244, 240, 238, .18); }
.project-midstream-shopping .ms-chart-data summary { cursor: pointer; padding: 18px 0; color: var(--ms-paper); }
.project-midstream-shopping .ms-chart-data summary:focus-visible, .project-midstream-shopping .ms-table-wrap:focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 4px; }
.project-midstream-shopping .ms-table-wrap { max-width: 100%; overflow-x: auto; margin-bottom: 24px; }
.project-midstream-shopping .ms-chart-data table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; line-height: 1.6; text-align: left; }
.project-midstream-shopping .ms-chart-data caption { text-align: left; padding-bottom: 14px; color: rgba(244, 240, 238, .78); }
.project-midstream-shopping .ms-chart-data th, .project-midstream-shopping .ms-chart-data td { border-bottom: 1px solid rgba(244, 240, 238, .18); padding: 12px 16px 12px 0; vertical-align: top; }
.project-midstream-shopping .ms-chart-data thead th { color: var(--ms-paper); }
@media (max-width: 600px) {
  .project-midstream-shopping .ms-hero-result { margin-top: 28px; padding-left: 16px; }
  .project-midstream-shopping .ms-hero .ms-eyebrow { margin-top: 32px; }
  .project-midstream-shopping .ms-chart { margin-top: 32px; }
}

/* Keep the comparison anchor below the fixed controls and header glass, with 16px clearance. */
.project-midstream-shopping #ms-october-comparison {
  scroll-margin-top: calc(clamp(17px, 2.4vw, 34px) + 52px + 54px + 16px);
}
@media (max-width: 720px) {
  .project-midstream-shopping #ms-october-comparison {
    scroll-margin-top: calc(clamp(17px, 2.4vw, 34px) + 52px + 40px + 16px);
  }
}


/* Case-only overlay. Append after the current case CSS; preserve shared styles and anchor rules.
   Official Square@Midstream frontage, used for the locally approved umbrella-brand review. */
.project-midstream-shopping .ms-hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(clamp(17px, 2.4vw, 34px) + 52px + 54px + 16px) 42px;
  background: var(--ms-ink);
}
.project-midstream-shopping .ms-hero--photo .ms-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.project-midstream-shopping .ms-hero--photo .ms-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Replace only after inspecting the verified image, at both breakpoints. */
  object-position: var(--ms-hero-focus-desktop, 50% 50%);
}
.project-midstream-shopping .ms-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 15, 15, .78), rgba(15, 15, 15, .68) 65%, rgba(15, 15, 15, .28));
}
.project-midstream-shopping .ms-hero--photo .ms-hero-content {
  position: relative;
  z-index: 2;
}
.project-midstream-shopping .ms-hero--photo .ms-hero-copy {
  width: min(62%, 820px);
}
.project-midstream-shopping .ms-hero--photo .ms-hero-result {
  margin-top: 24px;
  padding: 14px 18px;
  /* Combined with the minimum .68 scrim, .82 backing gives >=.9424 ink. */
  background: rgba(15, 15, 15, .82);
}
.project-midstream-shopping .ms-hero--photo .ms-result-detail {
  margin-top: 8px;
  color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero--photo .ms-source {
  margin-top: 12px !important;
  color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero--photo .ms-source a {
  text-underline-offset: 3px;
}
.project-midstream-shopping .ms-hero--photo .ms-eyebrow {
  margin-top: 28px;
  color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero--photo h1 em {
  /* Paper allows the photograph to remain visible behind the large title. */
  color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero--photo .ms-deck {
  max-width: 30ch;
  margin-top: 20px !important;
  margin-left: 0 !important;
  color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero--photo a:focus-visible {
  outline-color: var(--ms-paper);
}
.project-midstream-shopping .ms-hero-facts {
  padding-block: 16px 44px;
}
.project-midstream-shopping .ms-hero-facts .ms-photo-caption {
  margin-bottom: 24px;
  color: rgba(244, 240, 238, .78);
}
.project-midstream-shopping .ms-hero-facts .ms-facts {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .project-midstream-shopping .ms-hero--photo .ms-hero-copy { width: 100%; }
  .project-midstream-shopping .ms-hero--photo::after { background: rgba(15, 15, 15, .68); }
}
@media (max-width: 720px) {
  .project-midstream-shopping .ms-hero--photo {
    padding-top: calc(clamp(17px, 2.4vw, 34px) + 52px + 40px + 16px);
  }
  .project-midstream-shopping .ms-hero--photo .ms-hero-media img {
    object-position: var(--ms-hero-focus-mobile, 80% 45%);
  }
}
@media (max-width: 600px) {
  .project-midstream-shopping .ms-hero--photo { padding-bottom: 36px; }
  .project-midstream-shopping .ms-hero--photo .ms-hero-result { padding-left: 14px; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .project-midstream-shopping .ms-hero--photo { padding-bottom: 28px; }
  .project-midstream-shopping .ms-hero--photo .ms-hero-result { margin-top: 16px; }
  .project-midstream-shopping .ms-hero--photo .ms-eyebrow { margin-top: 18px; }
  .project-midstream-shopping .ms-hero--photo .ms-deck { margin-top: 16px !important; }
}
@media (prefers-contrast: more) {
  .project-midstream-shopping .ms-hero--photo::after { background: rgba(15, 15, 15, .98); }
}


/* Shared project type scale (fgx-unified + theme-fgx-project), matching the Midstream
   case. Scoped above the shared template so heading sizes and margins hold. */
body.fgx-unified.theme-fgx-project.project-midstream-shopping .ms-hero h1{font-size:clamp(52px,8vw,108px);line-height:1.05;margin-top:18px}
body.fgx-unified.theme-fgx-project.project-midstream-shopping :is(.ms-story,.ms-cta) h2{font-size:clamp(36px,5vw,66px);line-height:1.05}
body.fgx-unified.theme-fgx-project.project-midstream-shopping .ms-cta h2{margin-top:16px}
@media(max-height:650px) and (min-width:601px){body.fgx-unified.theme-fgx-project.project-midstream-shopping .ms-hero h1{font-size:clamp(52px,6vw,80px);margin-top:12px}}
@media(max-width:700px){body.fgx-unified.theme-fgx-project.project-midstream-shopping .ms-hero h1{font-size:clamp(48px,12vw,78px)}}