/* =========================================================
   SanBar V9 structural layout repair
   Rebuilds the coverage and 2027 sections as one shared,
   full-width split instead of layering more overrides onto
   the former container-based grids.
   ========================================================= */

:root {
  --feature-left: clamp(560px, 38.5vw, 760px);
  --feature-dark: #090d0f;
  --feature-dark-soft: #0d1315;
}

/* Header / hero adjustments retained from the approved direction. */
.site-header .brand-logo {
  width: 184px !important;
  max-width: 184px !important;
  height: auto !important;
}

@media (min-width: 1121px) {
  .hero-copy {
    padding-top: 80px !important;
    padding-bottom: 76px !important;
  }
}

/* ---------------- Coverage / Stateline Yard ---------------- */
.coverage-v9 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--feature-dark) !important;
}

.coverage-v9::before {
  display: none !important;
}

.coverage-v9-grid {
  display: grid;
  grid-template-columns: var(--feature-left) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--feature-dark);
}

.coverage-v9-copy-panel {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 38%, rgba(104, 173, 73, .08), transparent 36%),
    linear-gradient(135deg, #11191b 0%, var(--feature-dark) 78%);
  border-top: 1px solid rgba(104,173,73,.16);
  border-bottom: 1px solid rgba(104,173,73,.16);
}

.coverage-v9 .coverage-copy {
  display: block !important;
  width: min(calc(100% - 96px), 620px) !important;
  max-width: 620px !important;
  min-width: 0;
  margin: 0 auto !important;
  padding: 54px 0 !important;
}

.coverage-v9 .coverage-copy > * {
  max-width: none !important;
}

.coverage-v9 .coverage-copy h2 {
  max-width: 11.5ch !important;
  margin-bottom: 20px !important;
}

.coverage-v9 .coverage-copy > p:not(.eyebrow) {
  max-width: 580px !important;
  margin-bottom: 4px !important;
}

.coverage-v9 .coverage-action {
  margin: 0 0 14px !important;
}

.coverage-v9 .coverage-facts {
  width: 100%;
  max-width: none !important;
  margin-top: 0 !important;
}

.coverage-v9 .coverage-facts > div {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 10px 0 !important;
}

.service-map-v9 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--feature-dark) !important;
}

.service-map-v9 img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: initial !important;
  object-position: initial !important;
  background: var(--feature-dark) !important;
}

/* A true blend, not a spacer/bar: it overlays only the map edge. */
.service-map-v9::before {
  display: block !important;
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 96px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(9,13,15,.96) 0%,
    rgba(9,13,15,.64) 42%,
    rgba(9,13,15,.20) 76%,
    rgba(9,13,15,0) 100%
  );
}

.service-map-v9::after {
  display: none !important;
}

/* ---------------- 2027 allocation ---------------- */
.allocation-v9 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--feature-left) minmax(0, 1fr) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--white);
  background: var(--feature-dark) !important;
}

.allocation-v9-year-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 600px;
  padding: 42px 24px;
  background:
    radial-gradient(circle at 22% 35%, rgba(104,173,73,.045), transparent 34%),
    var(--feature-dark);
  border-top: 1px solid rgba(104,173,73,.16);
  border-bottom: 1px solid rgba(104,173,73,.16);
}

.allocation-v9 .year-display {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
  color: var(--green);
  font-size: clamp(154px, 14vw, 238px) !important;
  line-height: .82 !important;
  letter-spacing: -.05em !important;
  transform: none !important;
}

.allocation-v9-content-panel {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #15191b;
}

.allocation-v9 .allocation-visual {
  position: absolute !important;
  z-index: 0;
  inset: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-size: cover !important;
}

.allocation-v9 .allocation-shade {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(9,13,15,.96) 0%, rgba(9,13,15,.82) 29%, rgba(9,13,15,.48) 58%, rgba(9,13,15,.18) 100%),
    linear-gradient(0deg, rgba(0,0,0,.28), transparent 54%) !important;
}

.allocation-v9 .allocation-copy {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 112px), 650px) !important;
  max-width: 650px !important;
  margin: 0 !important;
  padding: 66px 0 66px clamp(54px, 5vw, 92px) !important;
  align-self: auto !important;
}

.allocation-v9 .allocation-copy h2 {
  max-width: 10ch;
}

.allocation-v9 .allocation-note {
  max-width: 610px;
}

.allocation-v9 .button-row {
  margin-top: 20px !important;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1120px) {
  :root {
    --feature-left: min(44vw, 510px);
  }

  .site-header .brand-logo {
    width: 160px !important;
    max-width: 160px !important;
  }

  .coverage-v9 .coverage-copy {
    width: min(calc(100% - 64px), 500px) !important;
    padding: 44px 0 !important;
  }

  .coverage-v9 .coverage-copy h2 {
    font-size: 38px !important;
  }

  .allocation-v9-year-panel,
  .allocation-v9-content-panel {
    min-height: 570px;
  }

  .allocation-v9 .allocation-copy {
    width: min(calc(100% - 72px), 600px) !important;
    padding-left: 44px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 900px) {
  .coverage-v9-grid,
  .allocation-v9 {
    grid-template-columns: 1fr !important;
  }

  .coverage-v9 .coverage-copy {
    width: min(calc(100% - 44px), 650px) !important;
    max-width: 650px !important;
    padding: 48px 0 !important;
  }

  .service-map-v9::before {
    display: none !important;
  }

  .allocation-v9-year-panel {
    min-height: 270px;
    padding: 42px 20px;
  }

  .allocation-v9-content-panel {
    min-height: 610px;
  }

  .allocation-v9 .allocation-copy {
    width: min(calc(100% - 44px), 650px) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    padding: 56px 0 !important;
  }
}

@media (max-width: 620px) {
  .site-header .brand-logo {
    width: 146px !important;
    max-width: 146px !important;
  }

  .coverage-v9 .coverage-copy {
    width: min(calc(100% - 34px), 560px) !important;
    padding: 42px 0 !important;
  }

  .coverage-v9 .coverage-copy h2 {
    max-width: 9.5ch !important;
    font-size: 36px !important;
  }

  .coverage-v9 .coverage-facts > div {
    grid-template-columns: 86px minmax(0,1fr) !important;
  }

  .allocation-v9-year-panel {
    min-height: 230px;
  }

  .allocation-v9 .year-display {
    font-size: clamp(102px, 31vw, 152px) !important;
  }

  .allocation-v9-content-panel {
    min-height: 660px;
  }

  .allocation-v9 .allocation-copy {
    width: min(calc(100% - 34px), 560px) !important;
    padding: 50px 0 !important;
  }

  .allocation-v9 .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Optical width and mid-desktop density refinement after rendered review. */
:root {
  --feature-left: clamp(520px, 38vw, 740px);
}

.coverage-v9 .coverage-copy h2 {
  max-width: 16ch !important;
}

.allocation-v9 .allocation-copy h2 {
  max-width: 13ch !important;
}

@media (min-width: 1121px) and (max-width: 1599px) {
  .coverage-v9 .coverage-copy {
    width: min(calc(100% - 72px), 580px) !important;
    padding: 28px 0 !important;
  }

  .coverage-v9 .coverage-copy .eyebrow {
    margin-bottom: 10px !important;
  }

  .coverage-v9 .coverage-copy h2 {
    margin-bottom: 14px !important;
    font-size: 40px !important;
    line-height: .98 !important;
  }

  .coverage-v9 .coverage-copy > p:not(.eyebrow) {
    margin-bottom: 2px !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .coverage-v9 .coverage-action {
    margin-bottom: 10px !important;
  }

  .coverage-v9 .coverage-facts > div {
    padding: 6px 0 !important;
  }

  .coverage-v9 .coverage-facts dt {
    font-size: 9px !important;
  }

  .coverage-v9 .coverage-facts dd {
    font-size: 11.5px !important;
  }
}

@media (max-width: 1120px) {
  .coverage-v9-grid,
  .allocation-v9 {
    grid-template-columns: 1fr !important;
  }

  .coverage-v9 .coverage-copy {
    width: min(calc(100% - 56px), 680px) !important;
    max-width: 680px !important;
    padding: 48px 0 !important;
  }

  .service-map-v9::before {
    display: none !important;
  }

  .allocation-v9-year-panel {
    min-height: 290px;
  }

  .allocation-v9-content-panel {
    min-height: 610px;
  }

  .allocation-v9 .allocation-copy {
    width: min(calc(100% - 56px), 680px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 58px 0 !important;
  }
}

@media (max-width: 700px) {
  .allocation-v9 .allocation-copy {
    padding-bottom: 104px !important;
  }
}