/**
 * Homepage shell layout — Figma frame video-test (16430:5677)
 * Load after css/socalren-theme.css (uses --socal-* tokens defined there).
 * Content slots are empty; fill in a later pass.
 */

/* Layout-only tuning (tokens live in socalren-theme.css) */
:root {
  --socal-split-media-pct: 58.59%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.text-pretty{
  text-wrap: pretty;
}

/* In-page anchors: offset below sticky header */
.socal-stories-section__header[id] {
  scroll-margin-top: clamp(4.25rem, 12vh, 6rem);
}

.socal-site .btn {
  border-radius: 0;
  cursor: pointer;
}

.socal-page-wrap {
  width: 100%;
  background: var(--socal-white);
}

#main-content {
  display: block;
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}

.socal-page-frame {
  width: 100%;
  max-width: var(--socal-page-width);
  margin-left: auto;
  margin-right: auto;
}

/* Above sticky header when keyboard users focus “Skip to main content” */
.socal-skip-link {
  z-index: 1101;
}

.socal-site-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--socal-space-lg);
  padding-right: var(--socal-space-lg);
}

@media (min-width: 576px) {
  .socal-site-inner {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .socal-site-inner {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .socal-site-inner {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .socal-site-inner {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .socal-site-inner {
    max-width: 1320px;
  }
}

/* ——— Header ——— */
.socal-header {
  --socal-header-bg: var(--socal-white);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--socal-header-bg);
  padding-top: var(--socal-space-med);
  padding-bottom: var(--socal-space-med);
  border-bottom: var(--socal-line-thin) solid var(--socal-gray-10);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    -webkit-backdrop-filter 0.35s ease,
    backdrop-filter 0.35s ease;
}

.socal-header--scrolled {
  --socal-header-bg: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .socal-header {
    transition: none;
  }
}

.socal-header__bar {
  min-height: 3.25rem;
}

.socal-header__logo {
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.socal-header__logo:hover {
  opacity: 0.92;
}

.socal-header__logo:focus-visible {
  outline: 2px solid var(--socal-link, var(--socal-ren-navy));
  outline-offset: 4px;
}

.socal-header__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(2.5rem, 8vw, 3.5rem);
  max-width: min(17rem, 58vw);
  transform-origin: left center;
}

.socal-header__nav {
  flex-shrink: 0;
}

.socal-header__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--socal-space-lg) clamp(1.25rem, 3vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--socal-font-heading);
  font-size: var(--socal-fs-base);
  font-weight: 600;
}

.socal-header__nav-list a {
  color: var(--socal-ren-navy);
  text-decoration: none;
  white-space: nowrap;
}

.socal-header__nav-list a:hover {
  text-decoration: underline;
  color: var(--socal-link);
}

.socal-header__nav-list a:focus-visible {
  outline: 2px solid var(--socal-link, var(--socal-ren-navy));
  outline-offset: 3px;
}

.socal-header__utilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--socal-space-lg);
}

.socal-lang-nav {
  font-size: var(--socal-fs-sm);
  color: var(--socal-gray-dark);
}

.socal-lang-nav strong {
  font-weight: 700;
  color: var(--socal-text-default);
}

.socal-lang-nav a {
  text-decoration: none;
  color: var(--socal-gray-dark);
}

.socal-lang-nav a:hover {
  text-decoration: underline;
  color: var(--socal-link);
}

.socal-search-placeholder {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--socal-space-sm);
  min-width: 10rem;
  min-height: 34px;
  padding: 0.25rem var(--socal-space-sm);
  border: var(--socal-line-thin) solid var(--socal-gray-dark);
  color: var(--socal-gray-dark);
  font-size: var(--socal-fs-sm);
  text-transform: capitalize;
}

/* ——— Hero ——— */
.socal-hero {
  width: 100%;
  background: var(--socal-white);
}

/* Full-bleed image — no max-width constraint */
.socal-hero__media {
  width: 100%;
  height: clamp(260px, 40vw, 620px);
  overflow: hidden;
  transform: translateZ(0); /* keep parent + child on same compositing layer */
}

.socal-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.socal-hero:has(.socal-hero__color-lines) {
  line-height: 0;
}

.socal-hero__color-lines {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  margin: 0;
  margin-left: calc(50% - 50vw);
}

/* Bottom band: headline left + cards right */
.socal-hero__bottom {
  display: flex;
  align-items: stretch;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

/* Headline column — taller, extends further into the hero image */
.socal-hero__intro {
  flex: 1 1 100%;
  min-height: clamp(140px, 14vw, 220px);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: none;
  background: var(--socal-white);
}

.socal-hero__headline {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 4rem);
  line-height: 1.05;
  color: var(--socal-text-headings);
  margin: 0;
  text-align: center;
}

.socal-hero__accent {
  color: var(--socal-citrus-grove);
}

/* Hero cards row */
.socal-hero__cards {
  flex: 1 1 auto;
  display: flex;
  align-self: flex-end;
  min-width: 0;
}

/* Nav link cards grid */
.socal-hero__links {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  margin-left: clamp(-3rem, -4vw, -1.5rem);
  align-self: flex-end;
}

.socal-hero-link {
  display: flex;
  align-items: flex-start;
  min-height: clamp(60px, 7vw, 100px);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  font-family: var(--socal-font-heading);
  font-size: clamp(0.9rem, 1.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--socal-text-headings);
  text-decoration: none !important;
  background: var(--socal-white);
  border-top: 8px solid var(--link-color, var(--socal-ren-navy));
  border-right: var(--socal-line-thin) solid var(--socal-gray-10);
  border-bottom: var(--socal-line-thin) solid var(--socal-gray-10);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.socal-hero-link:nth-child(3n) {
  border-right: none;
}

.socal-hero-link:nth-last-child(-n+3) {
  border-bottom: none;
}

.socal-hero-link:hover {
  background: color-mix(in srgb, var(--link-color, var(--socal-ren-navy)) 10%, white);
  color: var(--socal-ren-navy);
}

.socal-hero-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--socal-white);
  border-right: var(--socal-line-thin) solid var(--socal-gray-10);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  cursor: pointer;
}

.socal-hero-card:last-child {
  border-right: none;
}

.socal-hero-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(20, 66, 91, 0.12);
  z-index: 1;
}

.socal-hero-card:hover .socal-hero-card__title {
  color: var(--socal-link);
}

.socal-hero-card__img {
  height: clamp(60px, 7vw, 110px);
  overflow: hidden;
  flex-shrink: 0;
  transition:
    height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.socal-hero-card:hover .socal-hero-card__img {
  height: clamp(100px, 12vw, 180px);
  margin-top: calc(clamp(60px, 7vw, 110px) - clamp(100px, 12vw, 180px));
}

.socal-hero-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.socal-hero-card:hover .socal-hero-card__img img {
  transform: scale(1.07);
}

.socal-hero-card__body {
  padding: var(--socal-space-sm) var(--socal-space-med) var(--socal-space-med);
  display: flex;
  flex-direction: column;
  gap: var(--socal-space-sm);
  flex: 1;
  transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.socal-hero-card:hover .socal-hero-card__body {
  padding-top: var(--socal-space-lg);
  padding-bottom: var(--socal-space-lg);
}

.socal-hero-card__title {
  font-family: var(--socal-font-heading);
  font-weight: 400;
  font-size: var(--socal-fs-h3-card);
  line-height: var(--socal-lh-h3-card);
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-hero-card__row {
  display: flex;
  gap: var(--socal-space-med);
  align-items: flex-end;
  flex: 1;
}

.socal-hero-card__desc {
  flex: 1 1 auto;
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-default);
  margin: 0;
}

.socal-hero-card__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.socal-hero-card:hover .socal-hero-card__arrow {
  transform: translateX(6px);
}

.socal-hero-card__arrow img {
  display: block;
  width: clamp(22px, 2vw, 32px);
  height: auto;
}

@media (max-width: 991.98px) {
  /* Shorter hero image */
  .socal-hero__media {
    height: clamp(180px, 32vw, 300px);
  }


  /* Reset overlap — stack vertically, center everything */
  .socal-hero__bottom {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Centered headline */
  .socal-hero__intro {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: none;
    min-height: clamp(120px, 18vw, 180px);
    padding: 1.25rem var(--socal-space-lg);
    justify-content: center;
    align-items: center;
  }

  .socal-hero__headline {
    text-align: center;
  }

}

/* ——— Split section (image + tinted column) ——— */
.socal-split--offset {
  margin-top: clamp(3rem, 6vw, 6rem) !important;
}

.socal-split {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 992px) {
  .socal-split {
    flex-direction: row;
    align-items: stretch;
    min-height: 420px;
  }

  .socal-split__media {
    flex: 0 0 var(--socal-split-media-pct);
    max-width: var(--socal-split-media-pct);
  }

  .socal-split__aside {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 6.5rem) clamp(1.5rem, 5vw, 5rem);
  }

  .socal-split__aside.socal-split__aside--ren-intro {
    padding: clamp(3rem, 5.5vw, 7.5rem) clamp(2.25rem, 6vw, 6rem);
  }
}

.socal-split__media {
  position: relative;
  min-height: 280px;
  background: var(--socal-gray-20);
  overflow: hidden;
  transform: translateZ(0); /* keep parent + child on same compositing layer */
}

.socal-split__video,
.socal-split__photo {
  position: absolute;
  left: 0;
  /* Overscan for GSAP yPercent parallax (see .socal-story__bg-video) */
  top: -22%;
  width: 100%;
  height: 135%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  will-change: transform;
}

@media (min-width: 992px) {
  .socal-split--reverse {
    flex-direction: row-reverse;
  }
}

.socal-split__media--map {
  background: #e8eef2;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

.socal-split__media--map .map-wrap {
  border: none;
  border-radius: 0;
}

/* ——— California territory map section ———
   Full-bleed gray map background | dark navy panel (left, overlaid). */
.socal-ca-map {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 36vw, 560px);
  background: #eaecef;
}

.socal-ca-map__visual {
  position: relative;
  min-height: 300px;
  background: #eaecef;
  overflow: hidden;
}

@media (min-width: 992px) {
  .socal-ca-map__visual {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
}

.socal-ca-map__visual #ca-territory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 992px) {
  .socal-ca-map__visual #ca-territory {
    left: 38%;
    width: auto;
  }
}

.socal-ca-map__zoom {
  position: absolute;
  right: clamp(0.4rem, 1vw, 0.75rem);
  bottom: clamp(0.4rem, 1vw, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 5;
}

.socal-ca-map__zoom .socal-nav-btn {
  background: var(--socal-white);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.socal-ca-map__visual #ca-territory svg {
  display: block;
  width: 100%;
  height: 100%;
}

.socal-ca-map__panel {
  position: relative;
  z-index: 2;
  background: var(--socal-white);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 5rem);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.125rem;
  width: 41.41%;
}

@media (max-width: 991.98px) {
  .socal-ca-map__panel {
    width: 100%;
    min-height: auto;
  }
}

.socal-ca-map__heading {
  font-family: var(--socal-font-heading);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-ca-map__body {
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-ca-map__cta {
  align-self: flex-start;
}

/* ——— Territory map section (legacy, kept for reference) ———
   Desktop: map (left) | content panel (right). Mobile: stacked below. */
.socal-territory {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 24rem);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: center;
  min-height: clamp(190px, 22vw, 290px);
  padding: 0 clamp(1.25rem, 3.5vw, 2.75rem) clamp(0.4rem, 0.9vw, 0.65rem);
  box-sizing: border-box;
  overflow: hidden;
  background: #e8eef2;
}

.socal-territory__map {
  position: relative;
  min-height: clamp(150px, 19vw, 235px);
  max-height: clamp(196px, 26vw, 282px);
  height: auto;
}

@media (min-width: 768px) {
  .socal-territory__map {
    align-self: start;
  }
}

.socal-territory__map #ca-territory {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.socal-territory__map #ca-territory svg {
  display: block;
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  margin: 0 auto;
}

.socal-territory__map #ca-territory path.county {
  stroke: rgba(20, 66, 91, 0.35);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  transition: filter 0.15s ease;
}

.socal-territory__map #ca-territory path.county:hover {
  filter: brightness(1.08);
  cursor: pointer;
}

.socal-territory__panel {
  position: relative;
  z-index: 2;
  background: var(--socal-white);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(0.9rem, 1.8vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-self: center;
  justify-content: center;
}

/* Map column bottom-right (inside .socal-territory__map) */
.socal-territory__zoom {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 5;
  padding: clamp(0.25rem, 0.6vw, 0.45rem);
  box-sizing: border-box;
}

.socal-territory__zoom .socal-nav-btn {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  background: var(--socal-white);
}

.socal-territory__body {
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-default);
  margin: 0;
}

@media (max-width: 767.98px) {
  .socal-territory {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .socal-territory__map {
    width: 100%;
    flex: 0 0 auto;
    height: clamp(128px, 34vw, 188px);
    min-height: 128px;
    max-height: clamp(148px, 38vw, 208px);
  }

  .socal-territory__panel {
    align-self: stretch;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: clamp(1.25rem, 4vw, 1.75rem) var(--socal-space-lg);
  }

  .socal-territory__panel .btn {
    align-self: flex-start;
    width: auto;
    min-width: clamp(10.5rem, 48vw, 14rem);
  }

  .socal-territory__zoom {
    bottom: 0;
    right: 0;
  }
}

.socal-split__aside--aqua {
  background: var(--socal-aqua-breeze);
}

/* Stat-card blues (same tokens as .socal-stat-card) + white type */
.socal-split__aside--stat-mid {
  background: var(--socal-stat-mid-blue);
}

.socal-split__aside--stat-deep {
  background: var(--socal-stat-deep-blue);
}

.socal-split__aside--stat-mid .socal-split__heading,
.socal-split__aside--stat-mid .socal-split__body,
.socal-split__aside--stat-deep .socal-split__heading,
.socal-split__aside--stat-deep .socal-split__body {
  color: var(--socal-white);
}

.socal-split__aside--stat-mid .socal-split__cta,
.socal-split__aside--stat-deep .socal-split__cta {
  background: transparent;
  color: var(--socal-white) !important;
  border-color: var(--socal-white);
}

.socal-split__aside--stat-mid .socal-split__cta:hover,
.socal-split__aside--stat-mid .socal-split__cta:focus-visible,
.socal-split__aside--stat-deep .socal-split__cta:hover,
.socal-split__aside--stat-deep .socal-split__cta:focus-visible {
  background: var(--socal-white);
  color: var(--socal-ren-navy) !important;
  border-color: var(--socal-white);
}

.socal-split__aside--stat-mid .socal-split__cta:focus-visible,
.socal-split__aside--stat-deep .socal-split__cta:focus-visible {
  outline: 2px solid var(--socal-white);
  outline-offset: 3px;
}

/* “What is a REN?” — dark navy panel, white copy, filled white CTA (design comp) */
.socal-split__aside--ren-intro {
  background: var(--socal-ren-navy);
}

.socal-split__aside--ren-intro .socal-split__heading,
.socal-split__aside--ren-intro .socal-split__body {
  color: var(--socal-white);
}

.socal-split__aside--ren-intro .socal-split__body a {
  color: var(--socal-white);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.socal-split__aside--ren-intro .socal-split__body a:hover {
  color: var(--socal-white);
  opacity: 0.85;
}

.socal-split__aside--ren-intro .socal-split__cta--ren {
  cursor: pointer;
  align-self: flex-start;
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.75rem;
  font-family: var(--socal-font-button);
  font-size: clamp(0.75rem, 1.1vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--socal-ren-navy) !important;
  background: var(--socal-white);
  border: none;
  outline-offset: 3px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.socal-split__aside--ren-intro .socal-split__cta--ren:hover,
.socal-split__aside--ren-intro .socal-split__cta--ren:focus-visible {
  background: var(--socal-citrus-grove);
  color: var(--socal-ren-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.08), 0 0.55rem 1.1rem rgba(0, 0, 0, 0.16);
}

.socal-split__aside--ren-intro .socal-split__cta--ren:focus-visible {
  outline: 2px solid var(--socal-white);
  outline-offset: 3px;
}

.socal-split__aside {
  display: flex;
  flex-direction: column;
  gap: 2.125rem; /* 34px — Figma spec */
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--socal-space-lg);
}

/* Navy REN panels: tight gap between heading / body / CTA; on desktop the whole stack is
   vertically centered in the column (row layout). On small screens we align from the top
   so the button stays tight under the copy and clear of overflow clipping. */
.socal-split__aside.socal-split__aside--ren-intro {
  justify-content: center;
  gap: 1.125rem;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.75rem, 4.5vw, 2.75rem);
}

/* REN rows (about): small viewports — section overflow was clipping the navy panel bottom;
   keep heading / body / CTA as a tight column (no flex “dead space” above the button). */
@media (max-width: 991.98px) {
  .socal-split__aside.socal-split__aside--ren-intro {
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .socal-split--ren {
    overflow: visible;
  }

  .socal-split--ren > .socal-split__aside.socal-split__aside--ren-intro {
    flex-grow: 0;
    flex-shrink: 0;
    min-height: min-content;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.75rem, 4.5vw, 2.75rem);
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  .socal-split--ren .socal-split__aside--ren-intro .socal-split__body {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .socal-split--ren .socal-split__aside--ren-intro .socal-split__cta--ren {
    margin-top: 0;
  }
}

.socal-split__heading {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  color: white !important;
  margin: 0;
}

.socal-split__body {
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-default);
  margin: 0;
}

.socal-split__cta {
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem 1rem 1.75rem;
  background: var(--socal-white);
  color: var(--socal-ren-navy);
  font-family: var(--socal-font-button);
  font-size: var(--socal-fs-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: var(--socal-line-thin) solid var(--socal-ren-navy);
  outline-offset: 3px;
  transition:
    background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s ease,
    border-color 0.35s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.socal-split__cta-arrow {
  flex-shrink: 0;
  width: 22px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.socal-split__cta:hover,
.socal-split__cta:focus-visible {
  background: var(--socal-ren-navy);
  color: var(--socal-white) !important;
  border-color: var(--socal-ren-navy);
  gap: 1.375rem;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 0.4rem 1rem rgba(0, 40, 70, 0.2);
}

.socal-split__cta:hover .socal-split__cta-arrow,
.socal-split__cta:focus-visible .socal-split__cta-arrow {
  transform: translateX(4px);
}

.socal-split__cta:focus-visible {
  outline: 2px solid var(--socal-ren-navy);
}

/* ——— Proof / stats ——— */
.socal-proof__heading {
  padding: 3rem clamp(1.25rem, 5vw, 5rem) 2rem;
}

.socal-proof__body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .socal-proof__body {
    flex-direction: row;
    align-items: stretch;
    min-height: 327px;
  }

  .socal-proof__copy {
    flex: 0 0 33%;
    max-width: 33%;
  }

  .socal-proof__stats {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
  }
}

.socal-proof__copy {
  position: relative;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 5rem);
  background: var(--socal-white);
}

.socal-proof__nav-slot {
  position: absolute;
  bottom: 1.5rem;
  right: clamp(1rem, 4vw, 3rem);
  display: flex;
  gap: 0.5rem;
}

.socal-stat-card {
  flex: 1 1 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--socal-white);
}

.socal-stat-card:nth-child(1) {
  background: var(--socal-stat-mid-blue);
}
.socal-stat-card:nth-child(2) {
  background: var(--socal-stat-deep-blue);
}
.socal-stat-card:nth-child(3) {
  background: var(--socal-ren-navy);
}

/* ——— Stories section tabs ——— */
.socal-stories-section {
  background: var(--socal-white);
}

.socal-stories-section__header {
  padding: clamp(3rem, 6vw, 6rem) 0 0.75rem;
  margin-bottom: 3rem;
}

#community-comes-first.socal-stories-section__header {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

#socalren-helps-communities.socal-stories-section__header {
  text-align: center;
}

#why-energy-efficiency.socal-stories-section__header {
  text-align: center;
}

#real-services-in-communities.socal-stories-section__header {
  text-align: center;
}

#what-socalren-offers.socal-stories-section__header {
  text-align: center;
}

@media (max-width: 767.98px) {
  .socal-stories-section__header {
    padding-bottom: 0.35rem;
    margin-bottom: 1.25rem;
  }
}

/* Territory headline spacing above map band */
#socalren-territory.socal-stories-section__header {
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-bottom: 0;
}

/* Between panel headings (.socal-split__heading / .socal-story__heading:
   clamp(1.75rem, 2.6vw, 2.5rem)) and .socal-hero__headline */
.socal-stories-section__title {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.85vw, 3.25rem);
  line-height: 1.1;
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-stories-tabs-nav .socal-site-inner {
  border-bottom: 2px solid var(--socal-gray-10);
}

.socal-stories-tabs-list {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.socal-stories-tabs-list::-webkit-scrollbar {
  display: none;
}

.socal-stories-tab-btn {
  flex-shrink: 0;
  padding: 1.125rem 2rem;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-family: var(--socal-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--socal-gray-dark);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.socal-stories-tab-btn:hover {
  color: var(--socal-ren-navy);
}

.socal-stories-tab-btn[aria-selected="true"] {
  color: var(--socal-white);
  background: var(--socal-ren-navy);
  border-bottom-color: var(--socal-citrus-grove);
}

.socal-stories-tab-btn:focus-visible {
  outline: 2px solid var(--socal-ren-navy);
  outline-offset: -2px;
}

.socal-stories-tabs-mobile {
  display: none;
}

.socal-stories-tabs-select {
  font-family: var(--socal-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--socal-text-headings);
  border-color: var(--socal-gray-10);
  border-radius: 0;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  box-shadow: none;
}

.socal-stories-tabs-select:focus {
  border-color: var(--socal-ren-navy);
  box-shadow: 0 0 0 0.2rem rgba(15, 76, 92, 0.2);
}

@media (max-width: 767.98px) {
  .socal-stories-tabs-mobile {
    display: block;
    padding: 0 0 0.75rem;
  }

  .socal-stories-tabs-list {
    display: none !important;
  }
}

.socal-tab-cards-panel {
  padding: clamp(1.5rem, 2.6vw, 2.5rem) var(--socal-space-lg) clamp(3rem, 5vw, 5.5rem);
  max-width: var(--socal-page-width);
  margin: 0 auto;
}

.socal-tab-cards-panel .socal-stories-slider__viewport {
  overflow: visible;
}

.socal-tab-cards-panel .socal-stories-slider__track {
  flex-wrap: wrap;
}

.socal-tab-hero-cards {
  display: flex;
  align-items: stretch;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.socal-tab-hero-cards .socal-hero-card {
  border: var(--socal-line-thin) solid var(--socal-gray-10);
  min-height: clamp(250px, 21vw, 300px);
}

.socal-tab-hero-cards .socal-hero-card__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--socal-space-sm);
}

.socal-tab-hero-cards .socal-hero-card__desc {
  flex: 0 0 auto;
}

.socal-tab-hero-cards .socal-hero-card__arrow {
  align-self: flex-end;
  margin-top: auto;
}

.socal-tab-hero-cards .socal-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(20, 66, 91, 0.07);
}

.socal-tab-hero-cards .socal-hero-card:hover .socal-hero-card__img {
  height: clamp(80px, 9vw, 130px);
  margin-top: calc(clamp(60px, 7vw, 110px) - clamp(80px, 9vw, 130px));
}

.socal-tab-hero-cards .socal-hero-card:hover .socal-hero-card__body {
  padding-top: var(--socal-space-med);
  padding-bottom: var(--socal-space-med);
}

@media (max-width: 767.98px) {
  .socal-tab-hero-cards {
    flex-direction: column;
  }

  .socal-tab-hero-cards .socal-hero-card {
    flex: none;
    max-width: 100%;
    min-height: clamp(220px, 56vw, 280px);
  }
}

/* ——— Stories slider section ——— */
.socal-stories-slider {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 5.5rem) 0;
  background: var(--socal-white);
}

.socal-stories-slider__left {
  flex: 0 0 clamp(280px, 26%, 420px);
  display: flex;
  flex-direction: column;
  /* Mirror .socal-site-inner's auto left margin so this panel aligns with
     the rest of the page content at any viewport width.             */
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) 0
    max(
      var(--socal-space-lg),
      calc((100vw - var(--socal-page-width)) / 2 + var(--socal-space-lg))
    );
}

.socal-stories-slider__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--socal-font-heading);
  font-size: var(--socal-fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--socal-ren-navy);
  margin-bottom: 1rem;
}

.socal-stories-slider__eyebrow::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.socal-stories-slider__heading {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--socal-text-headings);
  margin: 0 0 1.125rem;
}

.socal-stories-slider__accent {
  display: block;
  color: var(--socal-citrus-grove);
}

.socal-stories-slider__desc {
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-default);
  margin: 0 0 1.5rem;
}

.socal-stories-slider__viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--socal-font-heading);
  font-size: var(--socal-fs-sm);
  font-weight: 600;
  color: var(--socal-link);
  text-decoration: none !important;
  margin-bottom: auto;
}

.socal-stories-slider__viewall:hover {
  color: var(--socal-btn-primary-hover) !important;
  text-decoration: underline !important;
}

.socal-stories-slider__nav-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}

.socal-nav-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--socal-line-thin) solid var(--socal-ren-navy);
  background: transparent;
  color: var(--socal-ren-navy);
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.socal-nav-btn:hover:not(:disabled) {
  background: var(--socal-ren-navy);
  color: var(--socal-white);
}

.socal-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Viewport clips the overflowing cards */
.socal-stories-slider__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.socal-stories-slider__track {
  display: flex;
  gap: 1.25rem;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Story card (article or whole-card link <a>) */
.socal-story-card {
  flex: 0 0 320px;
  height: clamp(360px, 38vw, 460px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

a.socal-story-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.socal-story-card:hover {
  color: inherit;
  text-decoration: none;
}

a.socal-story-card:focus-visible {
  outline: 2px solid var(--socal-aqua-breeze);
  outline-offset: 2px;
}

.socal-story-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark gradient at the bottom */
.socal-story-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(0, 15, 35, 0.8) 100%
  );
  pointer-events: none;
}

.socal-story-card__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1.25rem;
}

.socal-story-card__text {
  flex: 1;
  min-width: 0;
}

.socal-story-card__title {
  font-family: var(--socal-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--socal-white);
  margin: 0;
}

.socal-story-card__desc {
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    margin 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .socal-story-card:hover .socal-story-card__img {
    transform: scale(1.05);
  }

  .socal-story-card:hover .socal-story-card__desc {
    max-height: 6rem;
    opacity: 1;
    margin-top: 0.5rem;
  }

  .socal-story-card:hover::after {
    background: linear-gradient(
      to bottom,
      transparent 15%,
      rgba(0, 15, 35, 0.85) 100%
    );
  }

  .socal-story-card:hover .socal-story-card__link {
    transform: translateX(4px);
  }
}

.socal-story-card__link {
  cursor: pointer;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: var(--socal-aqua-breeze);
  text-decoration: none !important;
  transition:
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

span.socal-story-card__link {
  cursor: inherit;
}

.socal-story-card__link svg,
.socal-story-card__link path {
  color: var(--socal-aqua-breeze);
}

.socal-story-card__link:hover,
.socal-story-card:hover .socal-story-card__link {
  color: var(--socal-white) !important;
}

.socal-story-card__link:hover svg,
.socal-story-card__link:hover path,
.socal-story-card:hover .socal-story-card__link svg,
.socal-story-card:hover .socal-story-card__link path {
  color: var(--socal-white) !important;
}

/* ——— Stat Slider Section ——— */
.socal-stories-section__header#what-socalren-has-done {
  background: var(--socal-stat-section-bg);
  margin-bottom: 0;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.socal-stat-slider-section {
  background: var(--socal-stat-section-bg);
}

/* About “Proof…” — same horizontal band as .socal-site-inner titles; nav under cards */
.socal-stat-slider.socal-stat-slider--full {
  display: block;
  min-height: 0;
}

.socal-stat-slider--full .socal-stat-slider__inner {
  padding-top: clamp(0.5rem, 2vw, 1.25rem);
}

.socal-stat-slider--full .socal-stat-slider__viewport {
  width: 100%;
  max-width: 100%;
  min-height: clamp(160px, 18vw, 220px);
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

.socal-stat-slider--full .socal-stat-slider__track {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.45rem;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Four cards visible; remainder via prev/next (JS translateX uses card width + gap). */
.socal-stat-slider--full .socal-stat-slider__track > .socal-stat-card {
  flex: 0 0 calc((100cqi - 3 * 0.45rem) / 4);
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(0.55rem, 1.2vw, 0.95rem) clamp(0.35rem, 0.8vw, 0.65rem);
  box-sizing: border-box;
}

.socal-stat-slider--full .socal-stat-card__value {
  font-size: clamp(1.1rem, 1.9vw, 1.75rem);
  margin-bottom: 0.3rem;
}

.socal-stat-slider--full .socal-stat-card__label {
  font-size: clamp(0.65rem, 0.9vw, 0.78rem);
  max-width: 6.5rem;
  line-height: 1.25;
}

.socal-stat-slider--full .socal-stat-slider__nav-row--centered {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: 0;
}

.socal-stat-slider {
  display: flex;
  min-height: clamp(220px, 22vw, 300px);
}

.socal-stat-slider__left {
  flex: 0 0 38%;
  background: var(--socal-stat-section-bg);
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .socal-stat-slider__left {
    /* Align stat-section content with .socal-site-inner/title gutter */
    padding-left: max(
      var(--socal-space-lg),
      calc((100vw - var(--socal-page-width)) / 2 + var(--socal-space-lg))
    );
  }
}

.socal-stat-slider__heading {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  line-height: 1.08;
  color: var(--socal-text-headings);
  margin-bottom: 1.25rem;
}

.socal-stat-slider__accent {
  display: block;
  color: var(--socal-citrus-grove);
}

.socal-stat-slider__desc {
  font-size: var(--socal-fs-body);
  line-height: 1.6;
  color: var(--socal-text-default);
  margin: 0;
}

.socal-stat-slider__nav-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.socal-stat-slider__right {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.socal-stat-slider__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Explicit row height so all visible cards match (track + card stretch) */
  min-height: clamp(220px, 26vw, 300px);
}

/* Re-assert full-width stat layout after generic .socal-stat-slider__viewport rules */
.socal-stat-slider--full .socal-stat-slider__viewport {
  width: 100%;
  max-width: 100%;
}

.socal-stat-slider__track {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.socal-stat-slider__track > .socal-stat-card {
  flex: 0 0 calc(100cqi / 3);
  width: calc(100cqi / 3);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 1.5vw, 1.5rem);
  box-sizing: border-box;
}

.socal-stat-card:nth-child(3n + 1) { background: var(--socal-ren-navy); }
.socal-stat-card:nth-child(3n + 2) { background: var(--socal-stat-mid-blue); }
.socal-stat-card:nth-child(3n)     { background: var(--socal-stat-deep-blue); }

.socal-stat-card__value {
  display: block;
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  line-height: 1.1;
  color: var(--socal-white);
  margin-bottom: 0.6rem;
}

.socal-stat-card__label {
  display: block;
  font-family: var(--socal-font-body);
  font-weight: 600;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  line-height: 1.35;
  color: var(--socal-white);
  max-width: 160px;
}

@media (max-width: 767.98px) {
  .socal-stat-slider:not(.socal-stat-slider--full) {
    flex-direction: column;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__left {
    flex: none;
    padding: 2rem 1.5rem;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__nav-row {
    display: none;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__right {
    min-height: 0;
    padding: 0 1.5rem 2rem;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__viewport {
    min-height: 0;
    overflow: visible;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__track {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    transform: none !important;
    transition: none;
  }
  .socal-stat-slider:not(.socal-stat-slider--full) .socal-stat-slider__track > .socal-stat-card {
    flex: none;
    width: 100%;
    min-height: clamp(5.5rem, 20vw, 7rem);
    padding: clamp(1rem, 3vw, 1.35rem) 1rem;
  }

  .socal-stat-slider--full .socal-stat-slider__viewport {
    min-height: 0;
    overflow: visible;
  }

  .socal-stat-slider--full .socal-stat-slider__track {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    transform: none !important;
    transition: none;
  }

  .socal-stat-slider--full .socal-stat-slider__track > .socal-stat-card {
    flex: none;
    width: 100%;
    min-height: clamp(5.5rem, 20vw, 7rem);
    padding: clamp(1rem, 3vw, 1.35rem) 1rem;
  }

  .socal-stat-slider--full .socal-stat-slider__nav-row--centered {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .socal-stories-slider {
    flex-direction: column;
    padding-bottom: 2rem;
  }

  .socal-stories-slider__left {
    padding: 0 var(--socal-space-lg) 2rem
      max(
        var(--socal-space-lg),
        calc((100vw - var(--socal-page-width)) / 2 + var(--socal-space-lg))
      );
    flex: none;
  }

  .socal-stories-slider__nav-row {
    margin-top: 1.25rem;
  }

  .socal-story-card {
    flex: 0 0 260px;
  }

  /* About: tabbed “Real help…” — stack cards under copy; no carousel */
  .socal-stories-section .socal-stories-slider__nav-row {
    display: none;
  }

  .socal-stories-section .socal-stories-slider__viewport {
    overflow: visible;
    padding: 0 var(--socal-space-lg)
      max(
        var(--socal-space-lg),
        calc((100vw - var(--socal-page-width)) / 2 + var(--socal-space-lg))
      );
  }

  .socal-stories-section .socal-stories-slider__left {
    padding-bottom: 1rem;
  }

  .socal-stories-section .socal-stories-slider__track {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    transform: none !important;
    transition: none;
  }

  .socal-stories-section .socal-story-card {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: clamp(160px, 44vw, 210px);
  }

  .socal-stories-section .socal-story-card__desc {
    display: none;
  }
}

/* ——— Story section ——— */
.socal-story {
  background: var(--socal-story-section-bg);
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

@media (min-width: 992px) {
  .socal-story {
    min-height: 480px;
  }
}

.socal-story__visual {
  position: relative;
  min-height: 400px;
  background: var(--socal-gray-10);
  overflow: hidden;
  transform: translateZ(0); /* keep parent + child on same compositing layer */
}

@media (min-width: 992px) {
  .socal-story__visual {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
}

.socal-story__bg-video {
  position: absolute;
  left: 0;
  /* Tall overscan: GSAP yPercent (max ~18) translates down by 18% of *this* box height.
     If top × H + yPercent×height isn’t ≤ 0, the gray .socal-story__visual shows at the top. */
  top: -38%;
  width: 100%;
  height: 160%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  will-change: transform;
}

/* Stacked story (visual above panel): fill the band with cover — no parallax overscan */
@media (max-width: 991.98px) {
  .socal-story__visual {
    min-height: clamp(220px, 52vw, 380px);
  }

  .socal-story__bg-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.socal-story__panel {
  position: relative;
  z-index: 2;
  background: var(--socal-white);
  max-width: 42rem;
  margin-left: auto;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 5rem);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 2.125rem; /* 34px — Figma spec */
  justify-content: center;
}

.socal-story__heading {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-story__accent {
  display: block;
  color: var(--socal-citrus-grove);
}

.socal-story__body {
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-body);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-headings);
  margin: 0;
}

.socal-story__cta {
  cursor: pointer;
  align-self: flex-start;
}

@media (max-width: 991.98px) {
  .socal-story__panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .socal-story__panel {
    margin-top: 0;
    margin-right: 0;
    width: 41.41%;
    max-width: none;
  }

  .socal-story--left .socal-story__panel {
    margin-left: 0;
    margin-right: auto;
  }
}

#what-is-socalren-story.socal-story {
  min-height: clamp(440px, 58vw, 560px);
}

#what-is-socalren-story .socal-story__panel {
  min-height: clamp(380px, 48vw, 520px);
  padding-bottom: calc(16px + 1.5rem);
  overflow: hidden;
}

#what-is-socalren-story .socal-story__color-lines {
  position: absolute;
  bottom: 0;
  left: calc(-1 * clamp(1.5rem, 5vw, 5rem));
  display: block;
  width: calc(100% + 2 * clamp(1.5rem, 5vw, 5rem));
  max-width: none;
  height: auto;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}

#what-is-socalren-story .socal-story__accent {
  color: var(--socal-text-headings);
}

#what-is-socalren-story .socal-story__cta.btn-primary {
  --bs-btn-hover-bg: #1a5270;
  --bs-btn-hover-border-color: #1a5270;
  --bs-btn-active-bg: #1a5270;
  --bs-btn-active-border-color: #1a5270;
}

@media (max-width: 991.98px) {
  #what-is-socalren-story .socal-story__visual {
    min-height: clamp(280px, 58vw, 420px);
  }
}

#good-energy-story.socal-story {
  min-height: clamp(400px, 50vw, 520px);
}

#good-energy-story .socal-story__panel {
  min-height: clamp(320px, 38vw, 420px);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: calc(16px + 1.5rem);
  justify-content: flex-start;
  overflow: hidden;
}

#good-energy-story .socal-story__heading {
  color: var(--socal-ren-navy);
}

#good-energy-story .socal-story__color-lines {
  position: absolute;
  bottom: 0;
  left: calc(-1 * clamp(1.5rem, 5vw, 5rem));
  display: block;
  width: calc(100% + 2 * clamp(1.5rem, 5vw, 5rem));
  max-width: none;
  height: auto;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  #good-energy-story .socal-story__visual {
    min-height: clamp(260px, 50vw, 380px);
  }
}

@media (min-width: 992px) {
  #what-is-socalren-story.socal-story {
    min-height: clamp(580px, 50vw, 700px);
  }
}

/* ——— Footer ——— */
.socal-footer {
  height: auto !important;
  margin-top: 0;
  background: var(--socal-ren-navy);
  color: var(--socal-white);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.socal-footer a {
  color: var(--socal-white);
  text-decoration: underline;
}

.socal-footer a:hover {
  color: var(--socal-white);
  text-decoration: underline;
}

.socal-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  min-width: 0;
}

.socal-footer__start {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-width: 0;
  align-self: start;
}

.socal-footer__seal-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.socal-footer__seal {
  width: 86px;
  height: 86px;
  display: block;
}

.socal-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  padding-top: 0;
  font-family: var(--socal-font-heading);
  font-size: var(--socal-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.socal-footer__links a {
  line-height: 1.5;
}

.socal-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  text-align: right;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  align-self: start;
}

.socal-footer__logo {
  display: inline-flex;
  align-items: flex-start;
  line-height: 0;
  text-decoration: none;
}

.socal-footer__logo:hover {
  text-decoration: none;
}

.socal-footer__logo-img {
  display: block;
  width: auto;
  height: clamp(2.25rem, 3.5vw, 3rem);
  max-width: min(100%, 220px);
  object-fit: contain;
  object-position: top right;
}

.socal-footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.socal-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}

.socal-footer__social a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.socal-footer__newsletter {
  font-family: var(--socal-font-heading);
  font-size: var(--socal-fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.socal-footer__newsletter--mobile {
  display: none;
}

.socal-footer__newsletter--desktop {
  display: inline;
}

.socal-footer__rule {
  border: 0;
  border-top: var(--socal-line-thin) solid var(--socal-footer-rule);
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1rem, 2vw, 1.25rem);
}

.socal-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-family: var(--socal-font-body);
  font-size: var(--socal-fs-sm);
  font-weight: 400;
}

.socal-footer__copyright {
  white-space: nowrap;
}

.socal-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.socal-footer__legal a {
  text-decoration: underline;
}

.socal-footer__legal-sep {
  opacity: 0.75;
}

@media (max-width: 991.98px) {
  .socal-footer__top {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "seal logo"
      "links links"
      "social social";
    gap: 1rem 1.25rem;
  }

  .socal-footer__start,
  .socal-footer__brand {
    display: contents;
  }

  .socal-footer__seal-link {
    grid-area: seal;
    align-self: center;
  }

  .socal-footer__logo {
    grid-area: logo;
    align-self: center;
    justify-self: start;
  }

  .socal-footer__links {
    grid-area: links;
    width: 100%;
  }

  .socal-footer__social {
    grid-area: social;
    justify-content: flex-start;
  }

  .socal-footer__newsletter--mobile {
    display: inline;
  }

  .socal-footer__newsletter--desktop {
    display: none;
  }

  .socal-footer__seal {
    width: 56px;
    height: 56px;
  }

  .socal-footer__logo-img {
    height: 2.25rem;
    object-position: top left;
  }

  .socal-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ——— About v3: Offers grid (Real help…) ——— */
.socal-offers-section {
  background: var(--socal-white);
}

.socal-offers-section .socal-stories-section__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.socal-offers-section__body {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.socal-offers-grid {
  display: grid;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.socal-offers-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  min-height: 0;
  background: transparent;
}

.socal-offers-intro__heading {
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--socal-text-headings);
  margin: 0 0 0.75rem;
}

.socal-offers-intro__body {
  margin: 0;
  font-size: var(--socal-fs-base);
  line-height: var(--socal-lh-body);
  color: var(--socal-text-default);
}

.socal-offers-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.socal-offers-card:hover,
.socal-offers-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--socal-ren-navy) 10%, transparent);
}

.socal-offers-card:focus-visible {
  outline: 2px solid var(--socal-ren-navy);
  outline-offset: 2px;
}

.socal-offers-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.socal-offers-card__footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  align-items: center;
  height: 4.5rem;
  padding: clamp(0.85rem, 1.4vw, 1.1rem);
  color: var(--socal-white);
  overflow: hidden;
  transition: height 0.35s ease;
}

.socal-offers-card__text {
  display: contents;
}

.socal-offers-card__title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: var(--socal-font-heading);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: inherit !important;
}

.socal-offers-card__desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.35;
  color: inherit;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.socal-offers-card__arrow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  line-height: 0;
  color: var(--socal-white);
}

@media (hover: hover) {
  .socal-offers-card:hover .socal-offers-card__footer,
  .socal-offers-card:focus-visible .socal-offers-card__footer {
    height: 9.5rem;
  }

  .socal-offers-card:hover .socal-offers-card__desc,
  .socal-offers-card:focus-visible .socal-offers-card__desc {
    max-height: 10rem;
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  .socal-offers-card__desc {
    font-size: clamp(14px, 2.8vw, 17px);
    line-height: 1.45;
  }
}

/* Touch / no-hover: fixed footer height so row pairs stay equal */
@media (hover: none) {
  .socal-offers-card__footer {
    height: 10.5rem;
  }

  .socal-offers-card__desc {
    max-height: 10rem;
    opacity: 1;
  }
}

.socal-offers-card--public .socal-offers-card__footer { background: #8e4371; color: var(--socal-white); }
.socal-offers-card--schools .socal-offers-card__footer { background: #7ecbb6; color: var(--socal-text-default); }
.socal-offers-card--schools .socal-offers-card__arrow { color: var(--socal-text-default); }
.socal-offers-card--multifamily .socal-offers-card__footer { background: #00977b; color: var(--socal-white); }
.socal-offers-card--business .socal-offers-card__footer { background: #718e9e; color: var(--socal-white); }
.socal-offers-card--agriculture .socal-offers-card__footer { background: #f26649; color: var(--socal-white); }
.socal-offers-card--community .socal-offers-card__footer { background: #ca8ea3; color: var(--socal-text-default); }
.socal-offers-card--community .socal-offers-card__arrow { color: var(--socal-text-default); }
.socal-offers-card--workforce .socal-offers-card__footer { background: #a4bf5f; color: var(--socal-text-default); }
.socal-offers-card--workforce .socal-offers-card__arrow { color: var(--socal-text-default); }

@media (min-width: 640px) {
  .socal-offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .socal-offers-intro {
    grid-column: 1 / -1;
  }

  .socal-offers-card {
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 1200px) {
  .socal-offers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  .socal-offers-intro { grid-column: 1; grid-row: 1; }
  .socal-offers-card--public { grid-column: 2; grid-row: 1; }
  .socal-offers-card--schools { grid-column: 3; grid-row: 1; }
  .socal-offers-card--multifamily { grid-column: 4; grid-row: 1; }
  .socal-offers-card--business { grid-column: 1; grid-row: 2; }
  .socal-offers-card--agriculture { grid-column: 2; grid-row: 2; }
  .socal-offers-card--community { grid-column: 3; grid-row: 2; }
  .socal-offers-card--workforce { grid-column: 4; grid-row: 2; }
}

/* ——— About v3: Impact tabs (Proof…) ——— */
.socal-impact-section {
  background: var(--socal-stat-section-bg);
}

.socal-impact-section .socal-stories-section__header#what-socalren-has-done {
  margin-bottom: 0;
}

.socal-impact-section__body {
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.socal-impact-section + .socal-ca-map {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.socal-ca-map + .socal-story {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.socal-impact-section__subheading {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--socal-text-headings);
}

.socal-impact-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.socal-impact-tab-btn {
  position: relative;
  padding: 0.55rem 1rem;
  border: 2px solid var(--socal-ren-navy);
  background: var(--socal-white);
  font-family: var(--socal-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--socal-ren-navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.socal-impact-tab-btn:hover:not([aria-selected="true"]) {
  background: color-mix(in srgb, var(--socal-ren-navy) 8%, var(--socal-white));
}

.socal-impact-tab-btn[aria-selected="true"] {
  background: var(--socal-ren-navy);
  color: var(--socal-white);
}

.socal-impact-tab-btn[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 4px;
}

#impact-tab-delivering[aria-selected="true"]::after {
  background-color: #a4bf5f;
}

#impact-tab-building[aria-selected="true"]::after {
  background-color: #00977b;
}

#impact-tab-expanding[aria-selected="true"]::after {
  background-color: #f26649;
}

.socal-impact-tab-btn:focus-visible {
  outline: 2px solid var(--socal-ren-navy);
  outline-offset: 2px;
}

.socal-impact-tabs-mobile {
  display: none;
  margin-bottom: 1rem;
}

.socal-impact-tabs-select {
  width: 100%;
  max-width: 20rem;
  border: 2px solid var(--socal-ren-navy);
  border-radius: 0;
  font-family: var(--socal-font-heading);
  font-weight: 600;
  color: var(--socal-ren-navy);
}

.socal-impact-panel__heading {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--socal-font-heading);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--socal-text-headings);
}

.socal-impact-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.socal-impact-metrics--slider {
  display: block;
}

.socal-impact-metrics--slider .socal-impact-metrics__viewport {
  width: 100%;
  overflow: hidden;
}

.socal-impact-metrics--slider .socal-impact-metrics__track {
  display: flex;
  gap: 0.45rem;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.socal-impact-metrics--slider .socal-impact-metric {
  flex: 0 0 calc((100% - 3 * 0.45rem) / 4);
  min-width: 0;
}

.socal-impact-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1;
  width: 100%;
  padding: clamp(0.65rem, 1vw, 1rem);
  box-sizing: border-box;
}

.socal-impact-metric__value {
  display: block;
  font-family: var(--socal-font-heading);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.8vw, 48px);
  line-height: 1.1;
  margin-bottom: 0.35rem;
  max-width: 100%;
}

.socal-impact-metric__label {
  display: block;
  font-size: clamp(0.75rem, 1.4vw, 20px);
  line-height: 1.2;
  max-width: 100%;
}

.socal-impact-metric--citrus {
  background: #a4bf5f;
  color: var(--socal-ren-navy);
}

.socal-impact-metric--navy {
  background: #00977b;
  color: var(--socal-white);
}

.socal-impact-metric--coral {
  background: #f26649;
  color: var(--socal-white);
}

.socal-impact-metrics__nav {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 768px) {
  .socal-impact-metrics:not(.socal-impact-metrics--slider) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .socal-impact-metric__value {
    font-size: clamp(1.125rem, 2.5vw, 2.25rem);
  }

  .socal-impact-metric__label {
    font-size: clamp(0.75rem, 1.35vw, 1.05rem);
  }
}

@media (max-width: 767.98px) {
  .socal-impact-metric {
    padding: 0.5rem 0.35rem;
  }

  .socal-impact-metric__value {
    font-size: clamp(1.05rem, 5vw, 1.75rem);
  }

  .socal-impact-metric__label {
    font-size: clamp(0.7rem, 2.8vw, 0.9rem);
  }

  .socal-impact-tabs-mobile {
    display: block;
  }

  .socal-impact-tabs-list {
    display: none;
  }

  .socal-impact-metrics--slider .socal-impact-metric {
    flex: 0 0 calc((100% - 0.45rem) / 2);
  }

  .socal-impact-metrics__nav {
    display: none;
  }

  .socal-impact-metrics--slider .socal-impact-metrics__viewport {
    overflow: visible;
  }

  .socal-impact-metrics--slider .socal-impact-metrics__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    transform: none !important;
  }
}

/* ——— About page: Lato typography ——— */
.socal-about-page {
  --socal-font-heading: "Lato", system-ui, sans-serif;
  --socal-font-body: "Lato", system-ui, sans-serif;
  --socal-font-button: "Lato", system-ui, sans-serif;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

.socal-about-page h1,
.socal-about-page .h1,
.socal-about-page h2,
.socal-about-page .h2,
.socal-about-page h3:not(.socal-offers-card__title),
.socal-about-page .h3:not(.socal-offers-card__title) {
  font-weight: 900;
}

.socal-about-page h4,
.socal-about-page .h4,
.socal-about-page h5,
.socal-about-page .h5,
.socal-about-page h6,
.socal-about-page .h6 {
  font-weight: 700;
}

/* ——— CMS embed defense (Drupal/Pantheon global h3 / Lato rules) ——— */
.socal-site .socal-offers-card__title {
  color: inherit !important;
  font-family: var(--socal-font-heading) !important;
  font-size: clamp(16px, 1.35vw, 19.2px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.socal-site .socal-offers-intro__heading {
  color: var(--socal-text-headings) !important;
  font-family: var(--socal-font-heading) !important;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}