/* /css/main-light.css
   Wangard.com – Light Mode Prototype
   Includes: tokens, parallax backgrounds, gradient buttons, utility bar, mobile menu styling,
   and Google-style featured card crossfade expand/collapse + section scroll nudge.
*/

/* =========================================================
   1) Design Tokens + Global Defaults
   ========================================================= */

:root {
  --brand-blue: #00407D;
  --brand-blue-dark: #003261;
  --accent-green: #47AA42;

  /* Light-mode neutrals */
  --ink: #0f172a;       /* slate-900 */
  --muted: #334155;     /* slate-700 */
  --border: #e2e8f0;    /* slate-200 */
}

html { scroll-behavior: smooth; }
a { color: inherit; }

/* Header logo on light backgrounds */
.header-logo {
  height: 2rem;
  width: auto;
}

/* Brand logo utility */
.brand-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   2) CTA Buttons
   ========================================================= */

.btn-primary{
  background-image: linear-gradient(
    135deg,
    #0a5fb8 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-dark) 100%
  );
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: #fff;

  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
  transition: background-position 250ms ease, transform 200ms ease, box-shadow 250ms ease;
}

.btn-primary:hover{
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.16);
}

.btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
}

.btn-secondary{
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 23, 42, 0.28);
  color: var(--ink);
  transition: background 200ms ease, transform 200ms ease;
}

.btn-secondary:hover{
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}

/* =========================================================
   3) Parallax / Section Background System
   ========================================================= */

/* Base section behavior (default = plain white sections) */
.parallax {
  background: #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Bottom “reveal” shadow so photo sections feel layered */
.parallax::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.10) 55%,
    rgba(15, 23, 42, 0.22) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Ensure overlay sits below the shadow, content stays above both */
.parallax > .absolute.inset-0 { z-index: 1; }
.parallax > .relative { position: relative; z-index: 3; }

/* If a section is plain white, remove the shadow */
.section-investors::after,
.section-what-we-do::after,
.section-placeholder::after {
  display: none;
}

/* Desktop parallax behavior (reusable)
   NOTE: removed hover/pointer gating so parallax works on more devices */
@media (min-width: 1024px) {
  .parallax.parallax-fixed,
  .parallax[class*="-hero"], /* e.g., .section-what-we-do-hero, .section-investors-hero, etc. */
  .section-overview,
  .section-our-spaces,
  .section-who-we-are,
  .section-multifamily-outcomes,
  .section-industrial-bts,
  .section-pm-vector,
  .section-freshwater-plaza,
  .section-investors-guide,
  .section-investors-success {
    background-attachment: fixed;
  }
}

/* =========================================================
   4) Section Background Image Hooks
   Keep photos ONLY on: Overview hero, Our Spaces, Who We Are, and page heroes
   ========================================================= */

.section-overview { background-image: url("/images/wangard-home-hero-2.jpg"); }

/* White sections (no image) */
.section-investors { background-image: none; }
.section-what-we-do { background-image: none; }
.section-placeholder { background-image: none; }

/* Photo sections */
.section-our-spaces { background-image: url("/images/wangard-midwest-fund-locklyn-hero.jpg"); }
.section-who-we-are { background-image: url("/images/solhaven-the-commons-clubhouse-01.jpg"); }

/* Secondary page heroes */
.section-what-we-do-hero { background-image: url("/images/what-we-do-hero.jpg"); }
.section-development-hero { background-image: url("/images/development-hero.jpg"); }
.section-contact-hero { background-image: url("/images/contact-hero.jpg"); }
.section-careers-hero { background-image: url("/images/wangard-careers-hero.jpg"); }
.section-stewart-wangard-hero { background-image: url("/images/stewart-wangard-hero.jpg"); }
.section-track-record { background-image: url("/images/mf-gradient.svg"); }
.section-news-hero { background-image: url("/images/news-and-insight-hero.jpg"); }

/* Investors page specific backgrounds */
.section-investors-hero { background-image: url("/images/wangard-home-hero.jpg"); }

/* Investors guide uses the same SVG treatment as /industrial/ */
.section-investors-guide{
  width: 100%;
  background-image: url("/images/industrial-vector.svg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Investors success band — MATCH /multifamily/ outcomes (true parallax) */
.section-investors-success{
  width: 100%;
  background-image: url("/images/multifamily-pattern-gradient.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep hero sizing consistent */
.section-investors-hero{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* =========================================================
   5) Overlay Tuning Per Section
   ========================================================= */

/* Photo sections: keep translucent overlay (controls "hero opacity") */
.section-overview > .absolute.inset-0 { background: rgba(255,255,255,0.55) !important; }
.section-our-spaces > .absolute.inset-0 { background: rgba(255,255,255,0.70) !important; }
.section-who-we-are > .absolute.inset-0 { background: rgba(255,255,255,0.70) !important; }

/* Page heroes (any "-hero" class): default overlay */
.parallax[class*="-hero"] > .absolute.inset-0{
  background: rgba(255,255,255,0.55) !important;
}

/* Investors guide: slightly stronger overlay for SVG readability */
.section-investors-guide > .absolute.inset-0{
  background: rgba(255,255,255,0.80) !important;
}

/* Investors success: match multifamily outcomes overlay strength */
.section-investors-success > .absolute.inset-0{
  background: rgba(255,255,255,0.80) !important;
}

/* White sections: disable overlay */
.section-investors > .absolute.inset-0,
.section-what-we-do > .absolute.inset-0,
.section-placeholder > .absolute.inset-0 {
  background: transparent !important;
}

/* =========================================================
   6) One-off Section Visual Treatments
   ========================================================= */

/* Investors: SVG texture background (non-repeating, edge-to-edge)
   NOTE:
   - Keep this ONLY for the .section-investors (older investors landing section),
     so it does NOT conflict with the /investors/ page hero/guide/success sections. */
.section-investors::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-image: url("/images/industrial-vector-02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.50;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px){
  .section-investors::before{ opacity: 0.45; }
}

/* Multifamily page: Community Outcomes parallax background (full-bleed) */
.section-multifamily-outcomes{
  width: 100%;
  background-image: url("/images/multifamily-pattern-gradient.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px){
  .section-multifamily-outcomes{ background-attachment: fixed; }
}

/* Industrial page: Build-to-Suit section background (full-bleed SVG) */
.section-industrial-bts{
  width: 100%;
  background-image: url("/images/industrial-vector.svg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px){
  .section-industrial-bts{ background-attachment: fixed; }
}

/* Property Management: industrial-vector background section */
.section-pm-vector{
  width: 100%;
  background-image: url("/images/industrial-vector.svg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px){
  .section-pm-vector{ background-attachment: fixed; }
}

/* Mixed-Use page: optional (keeps class available if you want overrides later) */
.section-mixed-use-hero{
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Mixed-Use page: Freshwater Plaza parallax */
.section-freshwater-plaza{
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px){
  .section-freshwater-plaza{ background-attachment: fixed; }
}

/* =========================================================
   7) Header / Navigation / Utility Bar / Footer
   ========================================================= */

.utility-bar{
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255,255,255,0.65);
}

.utility-link{
  color: rgba(30, 41, 59, 0.85);
  text-decoration: none;
}

.utility-link:hover{
  color: rgba(100, 116, 139, 1);
}

/* Desktop main nav hover (green) */
@media (hover: hover) and (pointer: fine) {
  header nav[aria-label="Primary"] a:hover{
    color: var(--accent-green) !important;
  }
}

/* Footer link hover (green) */
footer a:hover{
  color: var(--accent-green) !important;
}

/* =========================================================
   8) Mobile Menu (layout + visuals)
   ========================================================= */

.mobile-main-stack{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu-panel{
  position: relative;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}

.mobile-menu-panel::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,0.92) 0%,
      rgba(248,250,252,0.88) 45%,
      rgba(226,232,240,0.70) 100%
    ),
    url("/images/industrial-vector.svg");

  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;

  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.mobile-menu-panel > *{
  position: relative;
  z-index: 1;
}

/* Mobile menu layout (Option B: right-side panel) */
.mobile-menu-top{ display: block; }

@media (min-width: 450px){
  .mobile-menu-top{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
    align-items: start;
  }
}

/* Main nav links (mobile) */
.mobile-main-link{
  display: block;
  padding: 7px 6px;
  font-size: 1.0rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(15, 23, 42, 0.88);
  text-decoration: none;
  transition: color 150ms ease, transform 120ms ease, opacity 120ms ease;
}

.mobile-main-link:hover{ color: var(--accent-green); }

.mobile-main-link:active{
  transform: translateX(2px);
  opacity: 0.88;
}

/* Side panel styling */
.mobile-side-panel{
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 12px;
}

.mobile-side-kicker{
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(100,116,139,0.95);
}

.mobile-side-meta{
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(15,23,42,0.80);
  line-height: 1.2;
}

.mobile-side-contact{ margin-top: 10px; }

.mobile-side-link{
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(15,23,42,0.88);
  text-decoration: none;
}

.mobile-side-link:hover{ color: var(--accent-green); }

.mobile-side-hours{
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(100,116,139,0.95);
}

.mobile-side-actions{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-side-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(248,250,252,0.70);
  font-size: 0.80rem;
  font-weight: 600;
  color: rgba(15,23,42,0.82);
  text-decoration: none;
}

.mobile-side-chip:hover{
  background: rgba(255,255,255,0.95);
}

/* Mobile Quick Links (gradient box) */
.mobile-utility{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 12px;

  background-image: linear-gradient(
    135deg,
    #0a5fb8 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-dark) 100%
  );
  background-size: 160% 160%;
  background-position: 0% 50%;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.20);
  transition: background-position 250ms ease;
}

.mobile-utility:hover{ background-position: 100% 50%; }

.mobile-utility-title{
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
}

.mobile-utility-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-utility-link{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.92);
  color: rgba(15, 23, 42, 0.92);

  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;

  transition: transform 150ms ease, background 150ms ease;
}

.mobile-utility-link:hover{
  background: rgba(255,255,255,1);
  transform: translateY(-1px);
}

/* =========================================================
   9) Shared “Feature” Typography Helpers
   ========================================================= */

.feature-eyebrow{
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(100,116,139,1);
}

.feature-title{
  margin-top: 10px;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: rgba(15,23,42,0.92);
}

.feature-desc{
  margin-top: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(51,65,85,0.92);
}

@media (max-width: 640px){
  .feature-desc{ font-size: 1rem; }
}

/* =========================================================
   10) Section “Scroll Nudge” Button
   ========================================================= */

.section-nudge{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  background-image: linear-gradient(
    135deg,
    #0a5fb8 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-dark) 100%
  );
  background-size: 160% 160%;
  background-position: 0% 50%;

  box-shadow: 0 8px 18px rgba(2,6,23,0.10);
  z-index: 10;
  cursor: pointer;

  transition: transform 160ms ease, background-position 220ms ease, filter 160ms ease;
  animation: nudge-bounce 1.8s ease-in-out infinite;
}

.section-nudge:hover{
  background-position: 100% 50%;
  transform: translateX(-50%) translateY(-2px);
  filter: brightness(1.02);
}

.section-nudge:active{
  transform: translateX(-50%) translateY(0);
}

.section-nudge svg{
  width: 18px;
  height: 18px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section-nudge{ animation: none; }
}

@keyframes nudge-bounce{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* =========================================================
   11) Featured Card (Google-style crossfade expand/collapse)
   ========================================================= */

.feature-wrap{ max-width: 100%; }

/* Card shell */
.feature-card{
  position: relative;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(2,6,23,0.18);
}

/* Subtle “designed” sheen + accent */
.feature-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 420px at 12% 18%,
      rgba(0,64,125,0.10) 0%,
      rgba(0,64,125,0.00) 55%
    );
  pointer-events: none;
  z-index: 0;
}

.feature-card::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(10,95,184,1) 0%,
    rgba(0,64,125,1) 55%,
    rgba(0,50,97,1) 100%
  );
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Inner spacing defaults */
.feature-card-inner{
  position: relative;
  z-index: 1;
  padding: 28px;
}

@media (max-width: 640px){
  .feature-card-inner{ padding: 22px; }
}

/* Expanded gets tighter top padding */
.feature-panel--expanded .feature-card-inner{
  padding-top: 16px;
  padding-bottom: 24px;
}

/* Crossfade panels */
.feature-panel{
  transition: opacity 260ms ease, transform 260ms ease;
}

.feature-panel--collapsed,
.feature-panel--expanded{
  position: relative;
}

/* COLLAPSED state: expanded panel is overlaid and hidden */
.feature-card[data-expanded="false"] .feature-panel--expanded{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* EXPANDED state: collapsed panel is overlaid and hidden */
.feature-card[data-expanded="true"] .feature-panel--collapsed{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.feature-card[data-expanded="true"]{
  background: rgba(255,255,255,0.92);
}

/* Controls */
.feature-control{
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(2,6,23,0.18);
  transition: transform 150ms ease, filter 150ms ease, background 150ms ease, background-position 200ms ease;
  z-index: 4;
}
.feature-control svg{ width: 22px; height: 22px; }

.feature-control:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Blue + button (collapsed state) */
.feature-card[data-expanded="false"] .feature-control{
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  background-image: linear-gradient(
    135deg,
    #0a5fb8 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-dark) 100%
  );
  background-size: 160% 160%;
  background-position: 0% 50%;
}
.feature-card[data-expanded="false"] .feature-control:hover{
  background-position: 100% 50%;
}

/* Neutral close button */
.feature-close{
  color: rgba(15,23,42,0.85);
  background: rgba(255,255,255,0.92);
}
.feature-close:hover{ background: rgba(255,255,255,1); }

/* Expanded layout */
.feature-expanded{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 900px){
  .feature-expanded{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Big media container */
.feature-media{
  border-radius: 20px;
  overflow: hidden;
  background: rgba(248,250,252,0.95);
  border: 1px solid rgba(148,163,184,0.26);
  box-shadow: 0 16px 34px rgba(2,6,23,0.14);
  min-height: 260px;
}

.feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Actions row */
.feature-actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* CTA */
.feature-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}

/* Desktop: anchor right column content + CTA to bottom (no markup changes) */
@media (min-width: 901px){
  .feature-expanded{ align-items: stretch; }

  .feature-expanded > div:nth-child(2){
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding-top: 18px;
  }

  .feature-expanded > div:nth-child(2) .feature-actions{
    margin-top: auto;
    padding-top: 18px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature-panel{ transition: none; }
  .feature-control{ transition: none; }
}

/* =========================================================
   12) Secondary Pages + Stacked Feature Cards (/what-we-do/)
   ========================================================= */

.page-section{ padding: 72px 0; }

@media (max-width: 640px){
  .page-section{ padding: 52px 0; }
}

/* Base page hero wrapper (works with either white or photo heroes) */
.page-hero{
  position: relative;
  background: #fff;
  border-bottom: 1px solid rgba(226,232,240,0.9);
}

/* Optional: subtle depth on white page heroes */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% 18%,
      rgba(0,64,125,0.06) 0%,
      rgba(0,64,125,0.00) 55%
    );
  pointer-events:none;
}

/* Grid wrapper for “Google-style” cards */
.service-grid{
  display:grid;
  gap: 18px;
}

@media (min-width: 900px){
  .service-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Variant: stacked card (media on top, content below) */
.feature-card--stacked{
  display:flex;
  flex-direction:column;
}

.feature-card--stacked .feature-card-inner{ padding: 22px; }

.feature-card--stacked .feature-media{
  min-height: 200px;
  border-radius: 18px;
  margin: 18px 22px 0;
  box-shadow: 0 12px 26px rgba(2,6,23,0.10);
}

@media (max-width: 640px){
  .feature-card--stacked .feature-media{
    min-height: 180px;
    margin: 16px 16px 0;
  }
  .feature-card--stacked .feature-card-inner{ padding: 18px; }
}

/* Keep CTA anchored to bottom within stacked cards */
.feature-card--stacked .feature-content{
  display:flex;
  flex-direction:column;
  height:100%;
}

.feature-card--stacked .feature-actions{ margin-top:auto; }

/* =========================================================
   13) Media Helpers
   ========================================================= */

/* Responsive YouTube embed */
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem; /* matches your rounded-2xl vibe */
}

.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   14) Leadership Cards (single version; cleaned)
   ========================================================= */

/* Leadership cards – green accent rail (matches feature-card rail) */
.leadership-card{
  position: relative;
  overflow: hidden;
}

/* Subtle sheen */
.leadership-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 420px at 12% 18%,
      rgba(71,170,66,0.12) 0%,
      rgba(71,170,66,0.00) 55%
    );
  pointer-events: none;
  z-index: 0;
}

/* The green rail */
.leadership-card::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(71,170,66,1) 0%,
    rgba(51,153,48,1) 55%,
    rgba(31,122,30,1) 100%
  );
  opacity: 0.90;
  pointer-events: none;
  z-index: 0;
}

/* Ensure card content stays above sheen + rail */
.leadership-card > *{
  position: relative;
  z-index: 1;
}

/* Give content breathing room from the rail */
.leadership-card-pad{
  padding-left: 22px;
}

/* =========================================================
   ADD-ONLY: Home "What We Do" — EXACT match to Investors Success band
   Paste at END of main-light.css
   ========================================================= */

.section-what-we-do{
  width: 100%;
  background-image: url("/images/multifamily-pattern-gradient.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Match Investors overlay strength */
.section-what-we-do > .absolute.inset-0{
  background: rgba(255,255,255,0.80) !important;
}

/* Your sheet disables the bottom reveal shadow for what-we-do; re-enable for band feel */
.section-what-we-do::after{
  display: block !important;
}

/* Desktop parallax (same behavior as investors success) */
@media (min-width: 1024px){
  .section-what-we-do{
    background-attachment: fixed !important;
  }
}

/* =========================================================
   ADD: Office page — 1433 North Water St parallax (match /mixed-use/)
   ========================================================= */

.section-1433-n-water{
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px){
  .section-1433-n-water{ background-attachment: fixed; }
}

/* =========================================================
   875 E. Wisconsin Avenue Hero
   ========================================================= */

.section-property-875-hero{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 1024px){
  .section-property-875-hero{
    background-attachment: scroll;
  }
}

/* Slightly stronger overlay support for hero readability */
.section-property-875-hero > .absolute.inset-0{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.76) 0%,
    rgba(255,255,255,0.82) 100%
  );
}

/* Optional: make hero stat cards read a little cleaner over image */
.section-property-875-hero .backdrop-blur{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   Olympia Fields Hero
   ========================================================= */

.section-olympia-fields-hero{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 1024px){
  .section-olympia-fields-hero{
    background-attachment: scroll;
  }
}

/* Match 875-style readability */
.section-olympia-fields-hero > .absolute.inset-0{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.76) 0%,
    rgba(255,255,255,0.82) 100%
  );
}

/* Make stat cards read a little cleaner over the image */
.section-olympia-fields-hero .backdrop-blur{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}