/* Hero Slider base */
.header.hero-slider{
  position: relative;
  min-height: 540px;
  color: #fff;
  overflow: hidden;
}

.hero-swiper,
.swiper-wrapper,
.swiper-slide,
.hero-slide-inner{
  height: 100%;
}

.hero-slide-inner{
  position: relative;
  min-height: clamp(360px, 80vh, 720px);
  overflow: hidden;
}

/* Background parallax + overlay */
.hero-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* universal-parallax / parallax wrapper support */
.hero-bg.parallax{
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.hero-bg.parallax .parallax__container,
.hero-bg.parallax img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* If parallax plugin injects its own image/container, keep it filling */
.hero-bg.parallax .parallax__container{
  position: absolute !important;
  inset: 0 !important;
}

/* Keep static fallback images working too */
.hero-bg > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transform: scale(1.05);
  animation: heroKenBurns 18s ease-out forwards;
  animation-play-state: paused;
}

/* Only run Ken Burns on active slide for non-parallax img fallback */
.swiper-slide-active .hero-bg > img{
  animation-play-state: running;
}

@keyframes heroKenBurns{
  from { transform: scale(1.05); }
  to   { transform: scale(1.15); }
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2;
}

/* Text content */
.hero-content{
  position: relative;
  z-index: 3;
  min-height: clamp(360px, 80vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-copy{
  max-width: 640px;
  text-align: left;
}

.hero-copy h1{
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  margin-bottom: 0.75rem;
}

.hero-copy p{
  font-size: 1.15rem;
  color: #fffbfb;
  margin-bottom: 1.5rem;
}

.hero-cta{
  padding: 0.9rem 2.6rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Center text on smaller screens */
@media (max-width: 767.98px){
  .hero-copy{
    max-width: 100%;
  }

  .hero-copy p{
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    max-width: none;
    margin-bottom: 1.5rem;
  }
}

/* Swiper arrows like the reference */
.hero-prev,
.hero-next{
  width: 48px;
  height: 80px;
  background: rgb(32 32 32 / 0%);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0;
}

.hero-prev{
  left: 0;
}

.hero-next{
  right: 0;
}

.hero-prev::after,
.hero-next::after{
  font-size: 20px;
  color: #ffffffa8;
}

/* Desktop/tablet: push hero copy lower on the slide */
@media (min-width: 768px){
  .hero-content{
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1vh;
  }
}
/* =======================
   Hero CTA button (custom)
   ======================= */

.hero-cta-btn{
  display: inline-block;
  height: 54px;
  line-height: 54px;
  padding: 0 1.6rem;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  background-color: rgb(32 32 32 / 26%);
  color: #fff;
  min-width: 170px !important;
  border: 1px solid rgba(255, 255, 255, .8);
  box-sizing: border-box;
  vertical-align: middle;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus-visible{
  background-color: #ffffff;
  color: #000;
  border-color: #f7f7f7;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.hero-cta-btn span{
  display: block;
  line-height: 54px;
}

/* Optional: slightly smaller on mobile so it doesn’t feel huge */
@media (max-width: 767.98px){
  .hero-cta-btn{
    padding: 0.4rem 1.2rem;
    font-size: 0.75rem;
    line-height: 40px;
  }
}
/* Intro actions (Floorplans / Residents) */
.intro2-actions .intro2-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Small chevron in the intro actions */
.intro2-actions .intro2-arrow {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  display: inline-block;
  margin-left: 4px;
  position: static !important;
}
/* Match hero panel arrow width to intro2-actions arrow on mobile */
@media (max-width: 991.98px) {
  .hero-panels-mobile .arrow .intro2-arrow {
    width: 12px;
    height: auto;
  }
.intro2-actions .intro2-arrow {
  width: 12px;
  height: auto;
}  
}
/* REVION – keep text visible; only make the BACKGROUND full-bleed */
header.hero-slider .hero-slide-inner{
  position: relative;
  overflow: hidden; /* keeps the extra-wide bg clean */
}

/* Background goes full-bleed into the left gutter */
header.hero-slider .hero-bg{
  position: absolute;
  inset: 0;
  left: calc(var(--revion-gutter) * -1);
  width: calc(100% + var(--revion-gutter));
}

/* Make sure overlay and text sit above the bg */
header.hero-slider .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
}

header.hero-slider .hero-content{
  position: relative;
  z-index: 3;
}
/* mobile: keep buttons side-by-side */
@media (max-width: 575.98px){
  .wc-actions{
    flex-direction: row;         /* stay in a row */
    flex-wrap: wrap;             /* allow wrap if needed */
    justify-content: flex-start; /* or center if you prefer */
    gap: 0.75rem;
  }

  .wc-btn{
    flex: 1 1 calc(50% - 0.75rem); /* two per row */
    width: auto;                   /* no forced 100% */
    justify-content: center;
  }
}

@media (min-width: 991.98px){
  header.hero-slider,
  header.page-hero{
    position: relative;
  }

}

/* DESKTOP / TABLET: 2-up + centered bottom */
@media (min-width: 992px){

  .sky-panels-container{
    max-width:1600px;
    margin:0 auto;
    padding:0 3px;
  }

  .sky-panels-items{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "p1 p2"
      "p3 p3" !important;
    gap: 36px 40px !important;
    align-items:start !important;
    justify-items:center !important;
  }

  .sky-panel:nth-child(1){ grid-area:p1; }
  .sky-panel:nth-child(2){ grid-area:p2; }
  .sky-panel:nth-child(3){ grid-area:p3; }

  .sky-panels-items .sky-panel:nth-child(1),
  .sky-panels-items .sky-panel:nth-child(2),
  .sky-panels-items .sky-panel:nth-child(3){
    width:100% !important;
    max-width:720px !important;
    margin:0 auto !important;
    transform:none !important;
    justify-self:center !important;
  }

  .sky-panels-items .sky-panel:nth-child(2){
    margin-top:70px !important;
  }

  .sky-panels-items .sky-panel:nth-child(3){
    margin-top:0 !important;
    transform:translateX(-75px) !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-link{
    width:100% !important;
    max-width:720px !important;
    margin:0 auto !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-media::before,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-media::before,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-media::before{
    padding-top:56% !important;
  }
}

/* 992–1199 */
@media (min-width: 992px) and (max-width: 1199.98px){
  .sky-panels-items{
    gap: 34px 28px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1),
  .sky-panels-items .sky-panel:nth-child(2),
  .sky-panels-items .sky-panel:nth-child(3){
    max-width:560px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-link{
    max-width:560px !important;
  }

  .sky-panels-items .sky-panel:nth-child(2){
    margin-top:34px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-caption,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-caption,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-caption{
    width:320px !important;
    max-width:calc(100% - 48px) !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-title,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-title,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-title{
    font-size:24px !important;
  }
}

/* 1200–1499 */
@media (min-width: 1200px) and (max-width: 1499.98px){
  .sky-panels-items{
    gap: 36px 36px !important;
  }

  .sky-panels-items .sky-panel:nth-child(2){
    margin-top:48px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1),
  .sky-panels-items .sky-panel:nth-child(2),
  .sky-panels-items .sky-panel:nth-child(3){
    max-width:640px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-link{
    max-width:640px !important;
  }
}

/* 1500+ */
@media (min-width: 1500px){
  .sky-panels-items{
    gap: 36px 60px !important;
  }

  .sky-panels-items .sky-panel:nth-child(2){
    margin-top:70px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1),
  .sky-panels-items .sky-panel:nth-child(2),
  .sky-panels-items .sky-panel:nth-child(3){
    max-width:720px !important;
  }

  .sky-panels-items .sky-panel:nth-child(1) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(2) .sky-panel-link,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-link{
    max-width:720px !important;
  }
}

/* MOBILE: stack */
@media (max-width: 991.98px){
  .sky-panels{
    padding:60px 0;
  }

  .sky-panels-container{
    padding:0 15px !important;
  }

  .sky-panels-items{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:34px !important;
    justify-items:center !important;
    align-items:start !important;
  }

  .sky-panel{
    width:100% !important;
    max-width:760px;
    justify-self:center !important;
    transform:none !important;
    margin:0 !important;
  }

  .sky-panels-items .sky-panel:nth-child(3){
    width:100% !important;
    max-width:760px !important;
    transform:none !important;
    margin:0 !important;
  }
}

/* Panel wrapper */
.sky-panel{
  width:100%;
}

/* Tile base */
.sky-panel-link{
  position:relative;
  display:block !important;
  width:720px;
  max-width:100%;
  background:transparent;
  padding:0 0 86px;
  text-decoration:none !important;
  overflow:visible;
  border:0 !important;
  box-sizing:border-box;
}

/* Remove old decorative pieces only */
.sky-panel-link::before,
.sky-panel-pattern,
.sky-panel-media::after{
  content:none !important;
  display:none !important;
}

/* Image area */
.sky-panel-media{
  position:relative;
  display:block !important;
  width:100% !important;
  z-index:1;
}

/* maintains aspect ratio */
.sky-panel-media::before{
  content:"";
  display:block;
  width:100%;
  padding-top:56%;
}

/* Image with gradient border */
.sky-panel-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:16px solid transparent;
  border-image: linear-gradient(180deg, #6194b9 0%, #3f6f93 100%) 1;
  box-sizing:border-box;
  background:#fff;
  z-index:2;
}

/* Caption card */
.sky-panel-caption{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:360px;
  max-width:calc(100% - 60px);
  background:#f7f7f7;
  padding:22px 22px 18px;
  text-align:center;
  z-index:3;
}

.sky-panel-title{
  display:block;
  margin:0 0 12px;
  font-size:30px;
  font-weight:300;
  color:#2b2b2b;
  line-height:1.05;
}

.sky-panel-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0;
  background:transparent;
  color:#2b2b2b;
  font-size:12px;
  font-weight:500 !important;
  letter-spacing:.18em;
  text-transform:none;
  border:0 !important;
  white-space:nowrap;
  box-sizing:border-box;
}

.sky-panel-cta::before,
.sky-panel-cta::after{
  content:none !important;
}

.sky-panel-cta-text{
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1;
}

.sky-panel-arrow{
  width:24px;
  height:auto;
  display:inline-block;
  flex-shrink:0;
  fill:currentColor;
}

/* Mobile behavior */
@media (max-width: 991.98px){
  .sky-panels{
    padding:60px 0;
  }

  .sky-panels-container{
    padding:0 15px !important;
  }

  .sky-panels-items{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:34px !important;
    justify-items:center !important;
    align-items:start !important;
  }

  .sky-panel,
  .sky-panels-items .sky-panel:nth-child(3){
    width:100% !important;
    max-width:760px !important;
    justify-self:center !important;
    transform:none !important;
    margin:0 !important;
  }

  .sky-panel-link,
  .sky-panel-link:hover,
  .sky-panel-link:focus,
  .sky-panel-link:active,
  .sky-panel-link:focus-within{
    width:100% !important;
    max-width:100% !important;
    padding:0 0 72px !important;
    background:transparent !important;
    border:0 !important;
    box-sizing:border-box !important;
    transform:none !important;
    transition:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  .sky-panel-media{
    width:100% !important;
  }

  /* keep ALL mobile panels the same height ratio */
  .sky-panel-media::before,
  .sky-panels-items .sky-panel:nth-child(3) .sky-panel-media::before{
    padding-top:56% !important;
  }

  .sky-panel-img{
    border-width:12px !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .sky-panel-caption{
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    transform:translateX(-50%) !important;
    width:min(320px, calc(100% - 40px)) !important;
    max-width:none !important;
    background:#f7f7f7 !important;
    padding:18px 18px 16px !important;
    text-align:center !important;
    z-index:3 !important;
  }

  .sky-panel-title{
    color:#2b2b2b !important;
    font-size:22px !important;
    margin:0 0 10px !important;
  }

  .sky-panel-cta{
    color:#2b2b2b !important;
    font-size:11px !important;
    gap:12px !important;
  }
}

/* Slightly smaller on phones */
@media (max-width: 575.98px){
  .sky-panel-cta-text{ font-size:12px; }
  .sky-panel-arrow{ width:20px; }
}

/* Keep layout stable */
.sky-panels,
.sky-panels *,
.sky-panels *::before,
.sky-panels *::after{
  box-sizing:border-box;
}

.sky-panel-link,
.sky-panel-link:hover,
.sky-panel-link:focus,
.sky-panel-link:active{
  display:block !important;
  text-decoration:none !important;
  transition:none !important;
  animation:none !important;
  box-shadow:none !important;
}

.sky-panel-link *{
  text-decoration:none !important;
}

.sky-panel-title,
.sky-panel-link:hover .sky-panel-title{
  font-weight:300 !important;
}

.sky-panel-cta,
.sky-panel-link:hover .sky-panel-cta{
  font-weight:500 !important;
}

/* Re-enable ONLY the arrow animation */
.sky-panel-link .sky-panel-cta .sky-panel-arrow{
  transform:translateX(0) !important;
  transition:transform .2s ease !important;
  will-change:transform;
}

.sky-panel-link .sky-panel-cta:hover .sky-panel-arrow,
.sky-panel-link .sky-panel-cta .sky-panel-arrow:hover{
  transform:translateX(6px) !important;
}

.sky-panel-link:focus-visible .sky-panel-arrow{
  transform:translateX(6px) !important;
}