.header .caption h4 {
    font-size: 40px !important;
    font-weight: 600;
    letter-spacing: 4px;
    color: #f2f3f5;
    margin-bottom: 15px;
    margin-top: 10px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    text-transform: uppercase;
    font-family: 'Cormorant Garamond', sans-serif;
    text-shadow: 2px 2px #000;
}
.small, small {
    font-size: .775em;
}
.counter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%; /* Ensure full height within the column */
  padding: 20px;
  background: white; /* optional for better contrast */
  border-radius: 8px; /* optional styling */
  box-shadow: 0 0 10px #21252987; /* optional styling */
}

.program-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.program-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* fill the col's height */
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px #21252987;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  text-align: center;
  box-sizing: border-box;
}

.program-box h3 {
  color: #555;
  font-size: 2rem;
  font-weight: 700;
  margin: 20px 0 10px;
}

.program-box p {
  margin-bottom: 0;
}

.program-box:hover {
  background-color: #e6f0fa;
  box-shadow: 0 0 12px #2272b9cc;
}

.program-size-img {
  width: 124px !important;
  height: 124px !important;
  object-fit: contain;
  display: inline-block;
}


.fixed-size-img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  display: inline-block;
}

/* Switch to mobile on small screens */
@media (max-width: 768px) {
  .wave-desktop {
    display: none;
  }
  .wave-mobile {
    display: block;
  }
    .wave-header {
    height: 165px !important; 
  }
.header .caption h4 {
    font-size: 25px !important;

}  
}

.volunteer-icon {
    width: auto !important;
    max-width: 120px;
    height: auto;
    display: inline-block;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.owl-carousel .item img {
  width: auto;
  max-width: 100%;
  max-height: 400px; /* Adjust height to your preference */
  object-fit: contain;
  margin: 0 auto;
}
/* Control background image size in Owl Carousel slides */
.header .owl-carousel .item.bg-img {
    background-size: cover;
    background-position: center center;
    height: 80vh; /* Adjust as needed */
    max-height: 700px;
}

/* stop pushing the image right */
.slider-fade .item.bg-img { background-position: center center !important; }

#mobileNav .footer-badges i {
        font-size: 20px;
        color: #2b2b2b;
        text-shadow: 1px 1px #1b1b1b63;
    }
    #mobileNav .footer-social i {
        display: inline-block !important;
        font-size: 20px;
        text-shadow: 1px 1px #1b1b1b63;
        line-height: 1;
    }    
/* phones & tablets (your good rule) */
@media (max-width: 1199.98px){
  .header .owl-carousel .item.bg-img,
  .slider-fade .item.bg-img{
    background-size: cover !important;
    background-position: 50% 35% !important;
    height: clamp(420px, 70vh, 720px) !important;
  }
}

/* desktop: let it fill and remove the 700px cap */
@media (min-width: 1200px){
  .header .owl-carousel .item.bg-img,
  .slider-fade .item.bg-img{
    background-size: cover !important;
    background-position: center center !important;
    height: 100vh !important;       
    max-height: none !important;   
  }
}

@media screen and (max-width: 991px) {
    .navbar {
        padding-left: 0px;
        padding-right: 0px;
        background: #0c68b800;
        padding-top: 0px;
        padding-bottom: 0px;
        height: 100px;
    }
    .header {
        background-attachment: scroll !important;
        background-position: 50% 0% !important;
        height: 70vh;
    } 


    }

@media (min-width: 992px) and (max-width: 1199.98px) {
  .butn-light a {
    padding: 10px 3px !important;
  }
.header .caption p {
    font-size: 22px !important;
    text-shadow: 1px 1px #1b1b1b;;
    }  
    
}

  .header .item.bg-img{ position:relative; overflow:hidden; }
  .header .item.bg-img .parallax-bg{
    position:absolute; left:0; right:0; top:-10vh; bottom:-10vh; /* headroom for movement */
    background-size:cover; background-position:center;
    will-change:transform;
    transform:translateY(0);
  }
.gradient-edge-top {
    z-index: 3;
    position: absolute;
    top: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg, rgb(0 0 0 / 58%) 0%, rgb(56 72 97 / 0%) 100%);
}
.gradient-edge-bottom {
    z-index: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(0deg, rgb(0 0 0 / 38%) 0%, rgb(56 72 97 / 0%) 100%);
}

/* Revion header layout: left phone, then logo, then right links + burger */
.navbar.revion-nav .container-fluid {
  position: relative;
  display: flex;
  align-items: center;
}

/* Logo participates in flex, not centered absolutely */
.navbar.revion-nav .logo-wrapper {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  z-index: 1200;
}

/* XL and up: leftNav (left) ? logo ? desktopNav ? hamburger */
@media (min-width:1200px){
  /* LEFT: Check Availability / phone */
  .navbar.revion-nav #leftNav {
    order: 0;
    display: flex;
    align-items: center;
    margin-left: 2.5rem;
    margin-right: 1.5rem;
    z-index: 1200;
  }

  /* Logo sits immediately to the right of leftNav */
  .navbar.revion-nav .logo-wrapper {
    order: 1;
    margin-left: 0;
  }

  /* RIGHT: Book a Tour / Find Your Home */
  .navbar.revion-nav #desktopNav {
    order: 2;
    margin-left: auto !important;
    z-index: 1102;      /* under leftNav/logo, still above background */
  }

  /* Hamburger on the far right */
  .navbar.revion-nav .phone-toggle-wrapper {
    order: 3;
    margin-left: 1.5rem !important;
  }
}

#leftNav .nav-link,
#desktopNav .nav-link {
    padding: .5rem 1rem;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 6px;
    padding-right: 12px;
    padding-left: 12px;
    letter-spacing: 0px;
    text-shadow: none !important;
    text-decoration: none;   /* default: no underline */
}

/* 1) Even spacing for items on both sides */
#leftNav .nav-item,
#desktopNav .nav-item {
  margin: 0 0.85rem;      /* tweak as needed for spacing */
}

/* 2) Links: no extra padding, box = text */
#leftNav .nav-link,
#desktopNav .nav-link {
  position: relative;
  display: inline-block;
  padding: 0;             /* important: no horizontal padding */
  text-decoration: none;
  line-height: 1.2;
  font-weight: 500;
}

/* 3) Animated underline – matches text width */
#leftNav .nav-link::after,
#desktopNav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;               /* center the line under the text box */
  margin: 0 auto;
  bottom: -7px;           /* space under text */
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .28s ease-out;
  transform-origin: left;
}

/* 4) Grow underline on hover/focus */
#leftNav .nav-link:hover::after,
#leftNav .nav-link:focus-visible::after,
#desktopNav .nav-link:hover::after,
#desktopNav .nav-link:focus-visible::after {
  width: 100%;
}

/* Fine-tune right side underline position only */
#desktopNav .nav-link::after {
  bottom: 9px; /* try -1; if still a hair low, use 0 or -0.5px */
}

@media (min-width: 1200px) {
  /* Slightly lower the right-side links to match left */
  #desktopNav {
    position: relative;
    top: 2px;   /* try 2; adjust to 1 or 3 if needed */
  }
}

/* ============================
   Find Your Home - custom hover
   ============================ */
/* remove any old text-decoration behavior */
#desktopNav .nav-link.nav-find-home{
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  color: #162431 !important;
}

#desktopNav .nav-link.nav-find-home::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .28s ease-out;
  transform-origin: left center;
}

/* normal hover/focus */
#desktopNav .nav-link.nav-find-home:hover,
#desktopNav .nav-link.nav-find-home:focus-visible{
  color: #000 !important;
}

#desktopNav .nav-link.nav-find-home:hover::after,
#desktopNav .nav-link.nav-find-home:focus-visible::after{
  width: 100%;
}

/* when mobile nav is open, make only the link white */
body.nav-open #desktopNav .nav-link.nav-find-home,
body.mobile-nav-open #desktopNav .nav-link.nav-find-home{
  color: #fff !important;
}

/* and keep hover white while open */
body.nav-open #desktopNav .nav-link.nav-find-home:hover,
body.nav-open #desktopNav .nav-link.nav-find-home:focus-visible,
body.mobile-nav-open #desktopNav .nav-link.nav-find-home:hover,
body.mobile-nav-open #desktopNav .nav-link.nav-find-home:focus-visible{
  color: #fff !important;
}

/* ensure hamburger sits above the panel/hero */
.mobile-nav-toggle{ position:relative; z-index:1200; }
.mobile-phone {
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  z-index: 1200;
}
@media screen and (max-width: 991px) {
    .navbar button {
        margin-right: 2px !important;
    }
      .nav-scroll {
    height: 58px !important;

  }
}
/* lg only: 992px–1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px){

  /* make the slide fill and remove caps */
  .header .owl-carousel .item.bg-img,
  .slider-fade .item.bg-img{
    height: 100vh !important;      /* pick 70–85vh to taste */
    max-height: none !important;
    background-size: cover !important;
    background-position: 50% 35% !important;
  }
    .navbar .logo-wrapper {
        order: 2;
        z-index: 12;
    }
  /* ensure Owl’s containers don't keep an old height */
  .header .owl-carousel,
  .header .owl-carousel .owl-stage-outer,
  .header .owl-carousel .owl-stage,
  .header .owl-carousel .owl-item{
    height: auto !important;
  }
}
/* Base: Mobile (default) */
#mobileNav .nav-link {
  padding: 3px 0 !important;
  text-align: center !important;
  font-size: 1rem !important; /* ~16px */
}

/* Tablet (768px) */
@media (min-width: 768px) {
  #mobileNav .nav-link {
    font-size: 1.15rem !important; /* ~18px */
  }
}

/* Desktop (1200px) */
@media (min-width: 1200px) {
  #mobileNav .nav-link {
    font-size: 1.45rem !important; /* ~23.2px */
  }
  #mobileNav .nav-item.nav-address .nav-link {
  font-size: 1rem !important;   /* ~16px */
  line-height: 1.4;
  opacity: 0.9;                 /* optional: make it slightly subdued */
}
#mobileNav .nav-item.nav-address strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.2rem;            /* slight emphasis over the address */
}
  
.navbar .navbar-nav .nav-link:hover {
  color: #162431 !important;
  background: transparent;
}
}
/* Mobile: force full-screen hero */
@media (max-width: 767.98px){

  /* 1) the hero section itself is a full viewport tall */
  header.header { 
    height: 100dvh !important;      /* dynamic vh for iOS/Chrome */
    min-height: 100dvh !important;
  }

  /* 2) every Owl wrapper inherits that height */
  header.header .owl-carousel,
  header.header .owl-carousel .owl-stage-outer,
  header.header .owl-carousel .owl-stage,
  header.header .owl-carousel .owl-item{
    height: 100% !important;
  }

  /* 3) the background slide fills the wrapper */
  header.header .item.bg-img{
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* (optional) remove any spacing that might reveal content below */
  header.header + section { margin-top: 0 !important; }
}

/* Owl uses these names when you set animateIn/animateOut */
.fadeIn  { animation: owlFadeIn  var(--owl-anim,700ms) ease-in-out both; }
.fadeOut { animation: owlFadeOut var(--owl-anim,700ms) ease-in-out both; }

@keyframes owlFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes owlFadeOut { from{opacity:1} to{opacity:0} }

/* ===========================
   HERO / CAROUSEL (PARALLAX + PURE FADE)
   =========================== */

/* Promote to GPU & prevent repaint jank */
.header .owl-stage,
.header .owl-item,
.kb-parallax,
.kb-img{
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Full-viewport hero with safe-mobile fallback */
header.header{
  position: relative;
  height: 100vh;
  height: 100svh;                 /* modern mobile */
  overflow: hidden;
}
header.header .owl-carousel,
header.header .owl-stage-outer,
header.header .owl-stage,
header.header .owl-item{
  height: 100%;
}

/* =========================================================
   GLOBAL SAFETY / UTILITIES
   ========================================================= */

/* Never allow sideways scroll (iOS-safe fallback below) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip){ html, body { overflow-x: hidden; } }

/* Fullscreen videos: avoid 100vw on mobile to prevent side scroll */
.video-fullscreen-wrap video,
.bg-vid{
  width: 100% !important;
  height: 100%;
}

/* =========================================================
   HERO (Owl + optional parallax) — CLEAN + MINIMAL
   ========================================================= */

/* Header fills the viewport */
header.header{
  position: relative;
  height: 100vh;     /* fallback */
  height: 100svh;    /* modern mobile */
  min-height: 100vh;
  overflow: hidden;
}

/* Owl container and children inherit that height */
header.header .owl-carousel,
header.header .owl-stage-outer,
header.header .owl-stage,
header.header .owl-item{
  height: 100% !important;
}

/* Each slide container; works even without a .kb-img layer */
header.header .item.bg-img{
  position: relative;
  overflow: hidden;
  background: center / cover no-repeat;
}

/* Optional tint over the image */
header.header .sw-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0,0,0,.25);
}

/* ---- Optional parallax image layer ---- */
/* Wrapper the JS can nudge */
.kb-parallax{
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

/* Image layer (no Ken-Burns drift) */
.kb-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat;
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kb-img{ transform: none !important; }
}

/* ---- Owl cross-fade (no stage sliding) ---- */
header.header .owl-carousel .owl-stage{
  transform: translate3d(0,0,0) !important; /* neutralize drag offset */
  transition: none !important;
  width: 100% !important;
}

/* Stack slides & fade via opacity */
header.header .owl-carousel .owl-item{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity .7s ease;
  backface-visibility: hidden;
}
header.header .owl-carousel .owl-item.active{
  opacity: 1;
  z-index: 2;
}

/* Ensure the hero never overflows horizontally */
.header .owl-carousel,
.header .owl-carousel .owl-stage-outer{
  overflow: hidden !important;
}

/* Mobile tweaks: keep image centered and cancel offsets */
@media (max-width: 767.98px){
  .kb-img{
    inset: 0 !important;
    background-position: center center !important;
    transform: translate3d(0,0,0) !important;
  }
  .kb-parallax{ transform: none !important; } /* optional: disable parallax on phones */
}

/* =========================================================
   FOOTER (modern)
   ========================================================= */

.footer-modern { --muted: #2b2b2b; background:#f7f7f7; font-weight: 500; padding: 40px 0 0 0; }
.footer-modern .footer-link{ color:var(--muted); font-size: .75rem; text-decoration:none; }
.footer-modern .footer-link:hover {
    color: #212529;
    text-decoration: none;
    opacity: 0.8;
}

.footer-modern .footer-social{
  width:44px; height:44px; border:1px solid #bf9866;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; opacity:.9;
  border-radius: 2px;
}
.footer-modern .footer-social:hover{ opacity:1; }

.footer-modern .footer-divider{
  width:120px; margin:0 auto; border:0; border-top:1px solid var(--muted); opacity:.35;
}

/* Remove theme’s bullets and add tiny dot separators */
.footer-links .list-inline-item::after,
.footer-links .list-inline-item::before{ content:none !important; }
.footer-modern .footer-links .list-inline-item + .list-inline-item::before{
  content:""; display:inline-block; width:4px; height:4px;
  background:rgba(255,255,255,.55); border-radius:50%;
  margin:0 .65rem .15rem .65rem; vertical-align:middle;
}

.footer-modern .footer-brand{ height:76px; opacity:.9; }
.footer-modern .footer-badges i{ font-size:18px; opacity:.9; }

/* Brand logo sizing on phones */
@media (max-width:576px){
  .footer-modern .footer-brand{
    height:auto !important;
    max-width: clamp(160px, 60vw, 320px);
    width:40%;
    display:block;
    margin-inline:auto;
  }
}

/* Powered by link */
.powered-by-link{
  --nudge:1px;
  display:inline-flex; align-items:center; gap:.5rem;
  line-height:1; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; font-size:.7rem;
  color:rgba(255,255,255,.72); text-decoration:none;
}
.powered-by-link .label{ line-height:1; }
.powered-by-link .powered-logo{
  height:20px; width:auto; display:block; object-fit:contain;
  transform:translateY(var(--nudge));
}

/* Site footer wrapper (theme colors) */
footer{
  color:var(--body-font-color-dark);
  background:var(--bg-dark-1);
  padding:20px 0 0 0;
}

/* =========================================================
   PET POLICY MODAL
   ========================================================= */
.pet-policy-title {
  margin-top: 0;
  font-family: var(--heading-font);
  font-weight: 600;
  color: #83464b;
  text-transform: var(--heading-text-transform);
  font-size: 1.3rem;
  text-align: center;
}
.policy-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:6000;
}
.policy-modal.is-open{ display:flex; }

.policy-dialog{
  position: relative;
  background:#fff; color:#222;
  width:min(560px, calc(100% - 2rem));
  max-height:100vh; overflow:auto;      /* content can scroll */
  border-radius:10px; padding:1.25rem 1.25rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Close button INSIDE the dialog so it's never clipped */
.policy-close{
  position:absolute; top:12px; right:12px;
  width:23px; height:23px; padding:0; border:0;
  background:url("../img/close-white-thin.svg") no-repeat 50% / 100%;
  text-indent:-9999px; overflow:hidden; cursor:pointer;
  z-index: 1;
}
html.modal-open { overflow:hidden !important; height:100%; }
body.modal-open {
  position: fixed; left:0; right:0; width:100%;
  overflow:hidden !important; height:100%;
}
/* =========================================================
   “ARCH PATTERN” SECTION
   ========================================================= */
.u-arch-pattern{
  --size:320px; --stroke:6px; --bg:#0b1418; --panel:#b9856a; --line:#9dbdc2;
  min-height:420px;
  background:
    linear-gradient(0deg, transparent calc(50% - 22px), var(--line) 0 calc(0% - 16px), transparent 0 calc(0% + 16px), var(--line) 0 calc(-0% + 22px), transparent 0),
    linear-gradient(0deg, var(--panel) 0 0%, transparent 0% 0%, var(--panel) 0% 100%),
    radial-gradient(100% 170% at 50% 0%,   var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 100%, var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 0%,   transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    radial-gradient(100% 170% at 50% 100%, transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    repeating-linear-gradient(90deg, var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size)),
    repeating-linear-gradient(0deg,  var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size));
  background-size: var(--size) var(--size);
  background-color: var(--bg);
  padding: 115px 0;
}
.u-arch-gal-pattern{
  --size:320px; --stroke:6px; --bg:#405264; --panel:#2e4147;
  min-height:420px;
  background:
    linear-gradient(0deg, transparent calc(50% - 22px), var(--line) 0 calc(0% - 16px), transparent 0 calc(0% + 16px), var(--line) 0 calc(-0% + 22px), transparent 0),
    linear-gradient(0deg, var(--panel) 0 0%, transparent 0% 0%, var(--panel) 0% 100%),
    radial-gradient(100% 170% at 50% 0%,   var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 100%, var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 0%,   transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    radial-gradient(100% 170% at 50% 100%, transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    repeating-linear-gradient(90deg, var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size)),
    repeating-linear-gradient(0deg,  var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size));
  background-size: var(--size) var(--size);
  background-color: var(--bg);
  padding: 115px 0;
}
.u-bio{
  --bs-bg-opacity:1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  padding:115px 0;
}
.u-SubPage{
  --bs-bg-opacity:1;
  background-color: #f7f7f7 !important;
  padding:95px 0;
}
.u-SubPageFloor{
  --bs-bg-opacity:1;
  background-color: #f7f7f7 !important;
  padding:95px 0;
}
b, strong {
    font-weight: 600;
}
.border-custom{ border:1.5px solid #82898d !important; border-radius:2px; background: url(../img/pattern-1-white.svg) center / cover repeat; }
.border-custom-gal {
    border: 1.5px solid #fff !important;
    border-radius: 2px;
    background: url(../img/pattern-1-white.svg) center / cover repeat;
}
.border-custom-theme {
    border: 1.5px solid #fff !important;
    border-radius: 2px;
    background: url(../img/pattern-1-grey.svg) center / cover repeat;
}
/* ============= Simple Page Hero (Universal Parallax) ============= */
.page-hero{
  position: relative;
  height: 75vh;                 /* desktop fallback */
  min-height: 420px;            /* don't get too small */
  overflow: hidden;
  background: transparent;      /* make sure image layer shows */
}
@supports (height: 1dvh){
  .page-hero{ height: 72dvh; }  /* mobile-safe height */
}

/* Universal Parallax layer should fill the hero, behind content */
.page-hero > .parallax{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Overlay tint (above image, below caption) */
.page-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0,0,0,.0);   /* default if no attribute present */
}
.page-hero[data-overlay-dark="1"] .page-hero__overlay{ background:rgba(0,0,0,.10); }
.page-hero[data-overlay-dark="2"] .page-hero__overlay{ background:transparent; }
.page-hero[data-overlay-dark="3"] .page-hero__overlay{ background:rgba(0,0,0,.20); }
.page-hero[data-overlay-dark="4"] .page-hero__overlay{ background:rgba(0,0,0,.28); }
.page-hero[data-overlay-dark="5"] .page-hero__overlay{ background:rgba(0,0,0,.36); }
.page-hero[data-overlay-dark="6"] .page-hero__overlay{ background:rgba(0,0,0,.44); }
.page-hero[data-overlay-dark="7"] .page-hero__overlay{ background:rgba(0,0,0,.52); }
.page-hero[data-overlay-dark="8"] .page-hero__overlay{ background:rgba(0,0,0,.60); }
.page-hero[data-overlay-dark="9"] .page-hero__overlay{ background:rgba(0,0,0,.70); }

/* Caption: bottom-aligned by default */
.page-hero__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.0rem;
  z-index: 2;
  padding: 0 1rem;
  text-align: center;
}

/* Wrapper just centers the title */
.page-hero__bar {
  width: 100%;
  margin: 0;
  text-align: center;
}

/* kill old before/after on the bar if still present */
.page-hero__bar::before,
.page-hero__bar::after {
  content: none;
}

/* Boxed title */
.page-hero__title {
  display: inline-block;
  position: relative;
  padding: 0.3rem 7.9rem;   /* controls space around text */
  border: 0px solid rgba(255,255,255,0.7);
  font-size: 3.3rem !important;
  line-height: 1.3;
  color: #f8f9fa;
}

/* Swooshes coming out of the box */
.page-hero__title::before,
.page-hero__title::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  height: 100px;                           /* match your image height */
  width: clamp(190px, 25vw, 360px);       /* responsive length */
  background-image: url("/img/hero-swoosh.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;               /* keep natural ratio */
}

/* left swoosh: curve sits right at the left edge of the box */
.page-hero__title::before {
  right: 0;
  transform: translate(-100%, -50%);
}

/* right swoosh: mirrored, curve sits at right edge of the box */
.page-hero__title::after {
  left: 0;
  transform: translate(100%, -50%) scaleX(-1);
}


@media (max-width: 991px){
  .page-hero__title{
    font-size: 2.0rem !important;  /* or 28px if you prefer */
    padding: 0.1rem 1.5rem;  }
}

/* Legacy KB classes (not used with universal-parallax) */
.kb-parallax, .kb-img { display: none !important; }

/* Motion accessibility (no extra transforms here) */
@media (prefers-reduced-motion: reduce){
  /* nothing needed; parallax lib already minimizes motion */
}

/* Keep things tidy on narrow screens */
html, body { overflow-x: clip; }
.section-divider {
  --divider-height: 20px; /* adjust height */
  height: var(--divider-height);
  width: 100%;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: block;
  transform: translateZ(0); /* prevent hairline gaps on mobile */
}

.section-divider.rectangle {
opacity: 0.8;
background: linear-gradient(0.25turn, #706e62, #a39e83, #dcd1c5);
}

/* Gradient rectangle */
.section-divider.rectangle.gradient {
  background-image: url(data:image/svg+xml;utf8,\<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ viewBox=\"0\ 0\ 100\ 10\"\ preserveAspectRatio=\"none\">\<defs><linearGradient\ id=\"g\"\ x1=\"0\"\ y1=\"0\"\ x2=\"1\"\ y2=\"0\">\<stop\ offset=\"0\"\ stop-color=\"%23d6e2f3\"/><stop\ offset=\"1\"\ stop-color=\"%23e0e8fd\"/>\</linearGradient></defs>\<rect\ width=\"100\"\ height=\"10\"\ fill=\"url\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\(%23g);
}

/* Optional: responsive height tweaks */
@media (max-width: 576px){
  .section-divider { --divider-height: 12px; }
}

/* =====================================
   GLOBAL / SCROLL LOCK (no jump)
   ===================================== */
html.lightbox-open,
body.lightbox-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: contain;
}
/* iOS-safe lock */
html.lightbox-open { height: 100%; }
body.lightbox-open {
  position: fixed;          /* freeze the page */
  inset: 0;                 /* left:0; right:0; top/bottom:0 */
  width: 100%;
  top: var(--lock-top, 0);  /* we set this via JS */
}
/* =====================================
   GALLERY THUMBS (hover zoom)
   ===================================== */
figure { margin: 0; position: relative; overflow: hidden; width: 90%; border-radius: 3px; }
figure img { display: block; width: 100%; transition: transform .5s ease; }
.zoom-in:hover img { transform: scale(1.2); }
.zoom-out img { transform: scale(1.2); }
.zoom-out:hover img { transform: scale(1); }

/* Custom “zoom in” cursor on thumbs */
#gallery .item figure.zoom-in,
#gallery .item figure.zoom-in a.swiper-popup,
#gallery .item figure.zoom-in a.swiper-popup img {
  cursor:
    url("../images/icon-zoom-white.cur"),
    url("../images/icon-zoom-white.png") 16 16,
    zoom-in !important;
}

/* Disable custom cursors on touch devices */
@media (hover:none) and (pointer:coarse){
  #gallery .item figure.zoom-in a.swiper-popup,
  #gallery .item figure.zoom-in a.swiper-popup img { cursor: default !important; }
}

/* Hide filtered-out items (JS toggles .is-hidden) */
#gallery .item.is-hidden { display: none !important; }

/* =====================================
   FILTER TABS (segmented control)
   ===================================== */
:root{
  --filter-active: #405264;     /* active brown */
  --filter-inactive: #f3f3f4;   /* light gray */
  --filter-divider: #e5e5e8;
}

#filters{
  display:inline-flex; gap:0; list-style:none; padding:0;
  margin:1.55rem 0 2rem;
  background:var(--filter-inactive);
  border:1px solid #282828;
  border-radius:2px;
  overflow:hidden;
}
#filters li{ margin:0; }
#filters a{
  display:block; padding:.8rem 1.4rem; line-height:1; white-space:nowrap;
  text-decoration:none !important; border:0 !important; box-shadow:none !important;
  color:#2a2a2a; font-weight:600;
}
#filters a:hover, #filters a:focus{ background:#eaeaec; }
#filters a.selected{ background:#776d55; color:#fff !important; }
#filters li + li a{ border-left:1px solid var(--filter-divider); }

@media (max-width:576px){
  #filters{ width:100%; }
  #filters li{ flex:1 0 50%; }
  #filters a{ text-align:center; padding:.85rem 1rem; }
}

/* =====================================
   LIGHTBOX (custom Swiper overlay)
   ===================================== */
:root { --lb-backdrop: rgba(17,21,29,.92); }

html.lightbox-open, body.lightbox-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Lightbox shell */
.swiper-lightbox {
  position: fixed;
  inset: 0;
  display: none;                   /* toggled to flex when open */
  align-items: center;
  justify-content: center;
  z-index: 6000;
}

.swiper-lightbox.is-open,
.swiper-lightbox[style*="display: flex"] { display: flex; }

.swiper-lightbox-backdrop{
  position: absolute; inset: 0;
  background: rgba(18,23,31,.86);
  z-index: 0;
}

/* The stage */
.swiper-lightbox .swiper{
  position: relative; z-index: 1;
  width: calc(100% - 2rem); height: calc(100% - 6rem);
  margin: 3rem 1rem;
  background: transparent;
  overflow: hidden;                /* important */
}
@media (min-width:768px){
  .swiper-lightbox .swiper{ width: calc(100% - 6rem); margin: 3rem; }
}

/* Wrapper that slides */
#swiperWrapper{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform .35s ease;
  will-change: transform;
}

/* Each slide fills the viewport width */
#swiperWrapper .swiper-slide{
  flex: 0 0 100%;                  /* exact 100% width panel */
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* Image sizing */
#swiperWrapper .swiper-slide img{
  max-width: 60vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0;  
}
@media (max-width: 991.98px){
  #swiperWrapper .swiper-slide img{ max-width: 100vw; max-height: 100vh; }
}

/* Nav arrows */
.swiper-button-next,
.swiper-button-prev {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px;
  color: #e7d4bec7;
  cursor: pointer;
}
.swiper-button-next::after,
.swiper-button-prev::after{
  font-size: 42px;
}
.swiper-button-next { right: 8px; }
.swiper-button-prev { left:  8px; }

/* Close button (keeps your SVG) */
.swiper-lightbox-close{
  position: absolute; top: 125px; right: 24px;
  background: none; border: 0; cursor: pointer; z-index: 10000;
}

/* Optional: zoom-out cursor when open (PNG fallback is enough) */
.swiper-lightbox,
.swiper-lightbox img{
  cursor: url("../images/icon-zoom-out.png") 16 16, zoom-out !important;
}
/* Tighter edges on medium screens */
@media (min-width:768px){
  .swiper-button-next{ right:2rem; }
  .swiper-button-prev{ left:2rem; }
}

/* Small-screen adjustments */
@media (max-width:1199.98px){
  .swiper-button-next, .swiper-button-prev{
    width:50px; height:50px; color:#e7d4bec7;
  }
}

/* =====================================
   OPTIONAL: compat cursors for 3rd-party LB
   (safe to keep; only applies if those libs are used)
   ===================================== */

/* Magnific Popup zoom-out cursor */
html.mfp-zoom-out-cur,
body.mfp-zoom-out-cur,
.mfp-wrap, .mfp-container, .mfp-content, .mfp-image-holder, img.mfp-img{
  cursor:
    url("../images/icon-zoom-out.cur"),
    url("../images/icon-zoom-out.png") 16 16,
    zoom-out !important;
}

/* Fancybox */
.fancybox__container, .fancybox__content, .fancybox__button--close{
  cursor: url("../images/icon-zoom-out.png") 16 16, pointer !important;
}

/* PhotoSwipe */
.pswp--open, .pswp__img, .pswp__button--close{
  cursor: url("../images/icon-zoom-out.png") 16 16, pointer !important;
}
@media (max-width: 575.98px){
  #gallery .item figure{ width:100% !important; margin:0; }
}
/* === Lined CTA Banner (pattern border + white center) === */ 
.lined-cta-banner {
  background: url("../img/pattern-1.svg") center/cover repeat; /* pattern shows as border */
  padding: 2rem;                                              /* border thickness */
}
.lined-cta-banner-amentities {
  background: url("../img/pattern-1-grey.svg") center/cover repeat; /* pattern shows as border */
  padding: 2rem;                                              /* border thickness */
}

/* inner white (or cream) panel */
.lined-cta-banner .pattern-inner,
.lined-cta-banner-amentities .pattern-inner {
  background: #dfdbd6;   /* use #fff if you want pure white */
  text-align: center;
  padding: 4rem 2rem;
}

/* responsive inner padding */
@media (min-width: 992px){
  .lined-cta-banner .pattern-inner,
  .lined-cta-banner-amentities .pattern-inner {
    padding: 7rem 4rem;
  }
}

@media (max-width: 991.98px){
  .lined-cta-banner .pattern-inner,
  .lined-cta-banner-amentities .pattern-inner {
    padding: 4rem 2rem;
  }
}


/* heading + hr */
.text-custom{ color: #282828 !important; }
.hr-soft{
  border: 0;
  border-top: 1px solid #706e62;
  opacity: 1;
  margin: 0;
}

/* Optional alt heading style */
.hr2-custom{
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 15px 0;
  color: #282828;
}

/* CTA buttons */
/* CTA buttons */
/* CTA buttons */
.cta-link {
  color: #706e62;
  font-size: 16px;
  background-color: #dfd8cf;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid #706e62;
  padding: 8px 25px;
  width: 100%;
  box-sizing: border-box;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Disable unwanted inherited transitions */
.cta-link,
.cta-link * {
  transform: none !important;
  transition-property: background-color, border-color, color !important;
}

/* Hover styles */
.cta-link:hover,
.cta-link:focus {
  color: #232323;
  background-color: #ffffff94;
  border-color: #706e62;
}

/* prevent any underline from affecting the icon */
.cta-link svg {
  text-decoration: none;
  flex-shrink: 0;
  margin-left: .35em;
}

/* Equal-width CTA buttons (desktop & tablet) */
.lined-cta-banner-amentities nav ul > li {
  flex: 0 0 240px; /* adjust width as needed */
}

.lined-cta-banner-amentities .cta-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}


/* On phones, stack and still keep a nice consistent width */
@media (max-width: 575.98px){
  .lined-cta-banner-amentities nav ul{
    gap: 12px !important;
  }
  .lined-cta-banner-amentities nav ul > li{
    flex: 1 1 100%;
    max-width: 320px;        /* optional cap so they don't get too wide */
  }
  .lined-cta-banner-amentities .cta-link{
    margin: 0 auto;          /* center the full-width buttons in the row */
  }
}



/* small tweaks */
@media (max-width: 360px){
  .lined-cta-banner h2{ font-size: 1.6rem; }
}
@media (max-width: 808px){
  .hr2-custom{ font-size: 1.8rem !important; }
}
/* === Welcome / Intro (pattern border + white center) === */
.u-bio{
  background: #3f4c57;
  padding: 2rem;   /* border thickness */
}

/* inner white (or cream) panel */
.u-bio .pattern-inner{
  background: #fff;            /* use #fff if you want pure white */
  text-align: center;
  padding: 4rem 2rem;
}

/* responsive inner padding */
@media (min-width: 992px){
  .u-bio .pattern-inner{ padding: 7rem 4rem; }
}
@media (max-width: 991.98px){
  .u-bio .pattern-inner{ padding: 4rem 1rem; }
}

/* heading + hr */
.text-custom{ color: #282828 !important; }
.hr-soft{
  border: 0;
  border-top: 1px solid #706e62;
  opacity: 0.6;
  margin: 0;
}

/* Optional alt heading style */
.hr2-custom{
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 15px 0;
  color: #282828;
}
/* Stack two-CTA rows on mobile and make buttons equal width */
@media (max-width: 575.98px) {  /* Revion Apartments xs breakpoint */
  .apply2 {
    display: flex;              /* already there, but safe */
    flex-direction: column;     /* stack */
    align-items: stretch;       /* children fill width */
    gap: 12px;                  /* space between buttons */
  }

  .apply2 .cta-link {
    display: flex;              /* center text & icon */
    justify-content: center;
    align-items: center;
    width: 100%;                /* same width for both */
    box-sizing: border-box;     /* include padding/border in width */
  }
}

/* (Optional) if you have other two-button wrappers like .apply3, include them too */
@media (max-width: 575.98px) {
  .apply3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .apply3 .cta-link { 
    display:flex; justify-content:center; align-items:center; width:80%; box-sizing:border-box;
  }
}
@media (max-width: 575.98px) { /* Revion Apartments's xs breakpoint */
  .lined-cta-banner nav ul {
    flex-direction: column; /* stack instead of row */
    align-items: stretch;   /* children stretch full width */
    gap: 12px;              /* space between */
  }

  .lined-cta-banner nav ul li {
    flex: 1 1 100%;
  }

  .lined-cta-banner nav ul li .cta-link {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
}
/* ----- Single CTA on mobile (no full-width) ----- */
/* Single CTA on mobile (not full width, but fixed size) */
@media (max-width: 575.98px){
  .apply2.single-cta,
  .apply3.single-cta {
    align-items: center !important;
    justify-content: center;
  }

  .single-cta .cta-link,
  .single-cta > a {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
    width: 260px;          /* ?? pick your consistent width */
    max-width: 90%;        /* responsive safeguard */
    box-sizing: border-box;
  }
}

/* ---------- Footer Callout Styles ---------- */

/* Kill any legacy ::before/::after rules */
.footer__callout .footer-intro-link::before,
.footer__callout .footer-intro-link::after {
  content: none !important;
  display: none !important;
}

/* Container for the action list */
.footer-intro-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

/* Each row */
.footer-intro-action {
  background: #cbc3bb; /* light tan */
  transition: background .25s ease;
}
.footer-intro-action + .footer-intro-action {
  border-top: 1px solid #323E48;
}
.footer-intro-action:hover {
  background: #bfb6ac; /* darker on hover */
}

/* Link fills row; text ? dotted leader ? arrow */
.footer-intro-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  color: #323E48;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .25s ease;
}

/* Dotted leader between label and arrow */
.footer-intro-leader {
  flex: 1 1 auto;
  border-bottom: 2px dotted currentColor;
  opacity: .35;
  margin: 0 .8rem;
  transform: translateY(.2em);
}

/* Arrow: inherits color, animates on hover */
.footer-intro-arrow {
  flex: 0 0 auto;
  width: 2.1rem;
  height: auto;
  display: block;
  stroke: currentColor;    /* crisp line arrow */
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.footer-intro-link:hover {
  color: #1f2930;
}
.footer-intro-link:hover .footer-intro-arrow {
  transform: translateX(6px);
}

/* Mobile padding tweak */
@media (max-width: 991.98px) {
  .footer-intro-link {
    padding: 12px 16px;
  }
}



/* ---------- Intro layout (desktop) ---------- */
.intro-grid{
  row-gap: clamp(1.5rem, 2vw, 2rem);
}
.intro-grid .h2-dark{ margin-bottom: .75rem; }
.intro-text{ max-width: 58ch; }

/* Right column: framed actions list */
.intro-actions{
  position: relative;
  padding-left: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* frame */
  border: 1px solid #ddccb5;
}

/* (legacy decorative line – not used, but harmless) */
.intro-actions::after{
  content:"";
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #ddccb5;
}

/* Each row */
.intro-action{
  padding: 0;                       /* moved padding to link so the whole row is clickable */
  background: #fff;
}
/* separator between rows */
.intro-action + .intro-action{
  border-top: 1px solid #ddccb5;
}

/* The links (full row clickable) */
.intro-link {
  display: flex;               /* full flex container */
  align-items: center;
  justify-content: space-between;  /* keep text left, arrow right */
  width: 100%;
  height: 100%;
  padding: clamp(16px, 2.2vw, 24px) 18px;
  color: #574f45;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

/* SVG arrow — stays aligned to right */
.intro-link .intro-arrow {
  flex-shrink: 0;
  width: 1.35em;
  height: auto;
  fill: #574f45;
  transition: transform .25s ease;
}

/* Hover effect */
.intro-action:hover .intro-link {
  background: #4d5a65;
  color: #fff;          /* make text + arrow white */
}

.intro-action:hover .intro-arrow {
  transform: translateX(6px);}



.intro2-grid{
  row-gap: clamp(1.5rem, 2vw, 2rem);
}
.intro2-grid .h2-dark{ margin-bottom: .75rem; }
.intro2-text{ max-width: 58ch; }

/* Right column: framed actions list */
.intro2-actions{
  position: relative;
  padding-left: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* frame */
  border: 0px solid #ddccb5;
}

/* (legacy decorative line – not used, but harmless) */
.intro2-actions::after{
  content:"";
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #ddccb5;
}

/* Each row */
.intro2-action{
  padding: 0;                       /* moved padding to link so the whole row is clickable */
  background: #fff;
  border-left: 1px solid #9fcccd;
}
/* separator between rows */
.intro2-action + .intro2-action{
  border-top: 1px solid #9fcccd;
  border-left: 1px solid #9fcccd;
}

/* The links (full row clickable) */
.intro2-link {
  display: flex;               /* full flex container */
  align-items: center;
  justify-content: space-between;  /* keep text left, arrow right */
  width: 100%;
  height: 100%;
  padding: clamp(16px, 2.2vw, 24px) 18px;
  color: #73a4a5;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

/* SVG arrow — stays aligned to right */
.intro2-link .intro2-arrow {
  flex-shrink: 0;
  width: 1.35em;
  height: auto;
  fill: #574f45;
  transition: transform .25s ease;
}

/* Hover effect */
.intro2-action:hover .intro2-link {
  background: #4d5a65;
  color: #fff;          /* make text + arrow white */
}

.intro2-action:hover .intro2-arrow {
  transform: translateX(6px);}
/* ---------- Mobile behavior ---------- */ 
@media (max-width: 991.98px){
  .intro2-actions{ padding-left: 0; }
  .intro2-actions::after{ display:none; }

  /* shrink row buttons a bit on mobile */
  .intro2-link {
    padding: 10px 14px;   /* tighter height */
    font-size: 1rem;      /* smaller text */
  }

  .intro2-action + .intro2-action {
    border-top: 1px solid #ddccb5;
  }

  /* clamp / expand text */
  .intro2-text{
    display: -webkit-box;
    -webkit-line-clamp: 4;       
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 7em;               
  }
  .intro2-text.expanded{
    -webkit-line-clamp: unset;
    max-height: none;
  }

}
#map {
  height: 700px;
  width: 100%;
  /*margin-bottom: 1rem;*/
  z-index: 1;
}
/* Tabs */
.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  border: none;
  background-color: #7b5642;
}
.nav-tabs .nav-item {
  flex: 1 1 auto;
  text-align: center;
  border-left: 1px solid #fff; /* Divider between tabs */
}

.nav-tabs .nav-item:first-child {
  border-left: none; /* Remove divider on the first item */
}

.nav-tabs .nav-link {
  border: none;
  border-radius: 0;
  width: 100%;
  background-color: #2e3f4f;
  color: #fff;
  font-weight: 500;
  padding: 1rem;
  font-size: 1rem;
  height: 82px; /* Same as dropdown */
  line-height: 30px; /* Vertically center text */
  transition: background-color 0.3s ease;
}

.nav-tabs .nav-link:hover {
  background-color: #ccd2d5;
  color: #162431;
}
.nav-tabs .nav-link.active {
  background-color: #162431;
  color: #fff;
}

/* Grid */

.places-grid li {
  padding: 1rem 0;
  font-size: 18px;
  text-align: center;
  background: rgba(255, 255, 255, .2);
  transition: background-color 0.2s ease;
  border: 1px solid #b1b5c0;
  border-radius: 2px;
  margin: 10px; /* adds space around each item */
  padding: 10px;
  display: block;
  width: 100%;
}
.places-grid li:hover {
  background-color: #eee;
  color: #000;
}
.places-grid .place-btn {
  display: flex;
  align-items: center;       /* keep icon/text vertically centered */
  justify-content: flex-start; /* or center on desktop if needed */
  width: 100%;
  height: 100%;              /* fills vertical space of li */
  padding: 10px;             /* click padding */
  box-sizing: border-box;    /* ensure padding doesn’t overflow */
  text-decoration: none;     /* remove underline */
}

/* Title */
.tab-content .category-title {
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  margin: 3rem auto 2rem;
  color: #333;
  font-family: var(--heading-font, serif);
}
.map-divide {
    /* background: #9bd3f5; */
    background: linear-gradient(to right, #d6e2f3, #e0e8fd);
    padding: 1px 0;
    -webkit-opacity: .7;
    -moz-opacity: .7;
    opacity: .7;
    color: #fff;
    font-size: 13px;
}
.map-dividetop {
    /* background: #9bd3f5; */
        background: linear-gradient(to right, #2b2b2b70, #2b2b2b70);
    padding: 1px 0;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    opacity: .8;
    color: #fff;
    font-size: 13px;
}
/* Button */
.load-more-btn {
  display: block;
  margin: 1rem auto 2rem;
  padding: 6px 16px;
  border: none;
  background: #162431;
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.load-more-btn:hover {
  background: #273b4f;
}

/* Marker */
.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
  margin: 0;
  padding: 0;
}
/* Keep the property logo inside its marker box no matter what */
.leaflet-marker-pane .prop-icon img{
  width:120px !important;
  height:120px !important;
  object-fit:contain;
}
@media (max-width: 767.98px){
  .leaflet-marker-pane .prop-icon img{
    width:100px !important;
    height:100px !important;
    object-fit:contain;
  }
}
/* Dropdown */
#categoryDropdown {
  background-color: #222222db;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border: medium none;
  border-radius: 0;
  height: 62px; /* Adjust as needed */
  line-height: 28px; /* helps center text vertically */
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'white\'\ viewBox=\'0\ 0\ 16\ 16\'%3E%3Cpath\ d=\'M1.5\ 5.5l6\ 6\ 6-6\'\ stroke=\'white\'\ stroke-width=\'2\'\ fill=\'none\'/%3E%3C/svg%3E);
  background-repeat: no-repeat;
  background-position: right 1.0rem center;
  background-size: 1.5em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; padding-left:16px; padding-right:16px; padding-top:12px; padding-bottom:12px
}

#categoryDropdown:hover,
#categoryDropdown:focus {
  background-color: #2d3749e6;
  outline: none;
}
/* wrapper so the overlay has an area to cover even before items load */
.grid-wrap{
  position: relative;
  min-height: 73px; /* adjust as you like */
}

/* overlay + spinner (color via CSS vars) */
.loading-spinner-overlay{
  position: absolute;
  inset: 0;
  background-color: var(--spinner-bg, rgba(27,65,109,.85));
  z-index: 10;
  display: flex;
  justify-content: center;  /* horizontal alignment */
  align-items: center;      /* vertical alignment */
  pointer-events: none;
}

/* bootstrap spinner border with custom color */
.loading-spinner-overlay .spinner-border{
  width: 2.5rem;
  height: 2.5rem;
  border-width: .3em;
  border-color: var(--spinner-fg, #fff) transparent var(--spinner-fg, #fff) transparent;
}

/* position helpers (optional) */
.loading-spinner-overlay.is-top{ align-items: flex-start; padding-top: 1rem; }
.loading-spinner-overlay.is-bottom{ align-items: flex-end; padding-bottom: 1rem; }
.loading-spinner-overlay.is-left{ justify-content: flex-start; padding-left: 1rem; }
.loading-spinner-overlay.is-right{ justify-content: flex-end; padding-right: 1rem; }
.loading-spinner-overlay.is-top-right{ align-items:flex-start; justify-content:flex-end; padding:1rem; }
.loading-spinner-overlay.is-top-left{ align-items:flex-start; justify-content:flex-start; padding:1rem; }
.loading-spinner-overlay.is-bottom-right{ align-items:flex-end; justify-content:flex-end; padding:1rem; }
.loading-spinner-overlay.is-bottom-left{ align-items:flex-end; justify-content:flex-start; padding:1rem; }

.loadingOverlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #44526d; /* updated from rgba(255,255,255,0.75) */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #222;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.loading-spinner-overlay .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: #000000; /* white spinner */
  border-width: 0.3em;
  border-color: #fff transparent #fff transparent;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Optional: tighter height on small screens */
@media (max-width:576px){
  .fp-img{ height:180px; }
}
/* --- Places grid: center it and kill UL indentation --- */
.tab-pane .places-grid,
#categoryTabsContent .places-grid {
  list-style: none;
  padding: 0 !important;          /* <-- kills Bootstrap ul padding-left */
  margin: 0 auto;                 /* center the grid block */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;                      /* use gap instead of li margins */
  max-width: 1200px;              /* optional: contain the grid nicely */
  justify-items: stretch;
}

/* tiles: let grid control the spacing; no extra margins/width */
.places-grid li {
  box-sizing: border-box;
  margin: 0;                      /* remove your old margin:10px */
  /* keep your visual styles here */
  padding: 10px;
  font-size: 18px;
  text-align: center;
  color: #474139;
  background: rgba(255, 255, 255, .62);
  transition: background-color .2s ease;
  border: 1px solid #b1b5c0;
  border-radius: 2px;
}

/* make the whole button the click area */
.places-grid .place-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                    /* fill the li */
  height: 100%;
}
@media (max-width: 991.98px) {
  #categoryDropdown {
    display: block !important;
  }
  .nav-tabs {
    display: none !important;
  }
}

@media (min-width: 992px) {
  #categoryDropdown {
    display: none !important;
  }
  section {
    padding: 75px 0 100px 0;
}
  .nav-tabs {
    display: flex !important;
    height: 82px;
  }
  .places-grid {
    grid-template-columns: repeat(3, 1fr);
  }
      .vbox-close {
        display:none
    }
}
/* ============ MOBILE-FIRST DEFAULTS (phones) ============ */

/* Places grid base (phones) */
.tab-pane .places-grid,
#categoryTabsContent .places-grid {
  list-style: none;
  padding: 0 !important;              /* kill Bootstrap ul padding */
  margin: 0 auto;                     /* center the grid block */
  display: grid;
  grid-template-columns: 1fr;         /* 1 column by default */
  gap: 16px;                          /* use gap instead of li margins */
  max-width: 560px;                   /* contain single column nicely */
  justify-items: stretch;
}

/* Tiles: grid controls spacing; keep visual styles here */
.places-grid li {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  font-size: 16px;
  text-align: left;                   /* left on mobile */
  color: #2b2b2b;
  background: #ffffff;
  transition: background-color .2s ease;
  border: 1px solid #b1b5c0;
  border-radius: 2px;
}

/* Make the whole button the click area (mobile: left-aligned) */
.places-grid .place-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;        /* left on mobile */
  width: 100%;
  height: 100%;
  text-align: left;
  padding-left: 10px;
}

/* Headings on mobile */
h1, h1.ultra-big, h1.ultra-big .text-line, h1.ultra-big-2,
.title-text, h1.slider-title, h2.slider-title {
  font-size: 40px !important;
  text-shadow: 1px 1px #000 !important;
}

/* Lead paragraph on mobile */
p.lead {
  font-size: 16px;
  line-height: 1.6;                   /* 38px was very tall; use ratio */
  margin-top: 0;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-shadow: 2px 1px #000 !important;
}

/* Figure tweaks on mobile */
figure {
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 95%;
  border-radius: 3px;
}

/* Solid rectangle divider */
.section-divider.rectangle {
  background: url(../img/pattern-1-light-blue.svg);
  opacity: .9;
  display: none;
}
.section-divider.rectangle-amentity {
  display: block;
  width: 100%;
  height: 20px;
  background: #f97f26;
  opacity: .9;
}

/* Gradient rectangle divider (fixed data URL) */
.section-divider.rectangle.gradient {
  background-image: url(data:image/svg+xml;utf8,<svg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 100\ 10\'\ preserveAspectRatio=\'none\'><defs><linearGradient\ id=\'g\'\ x1=\'0\'\ y1=\'0\'\ x2=\'1\'\ y2=\'0\'><stop\ offset=\'0\'\ stop-color=\'%23d6e2f3\'/><stop\ offset=\'1\'\ stop-color=\'%23e0e8fd\'/></linearGradient></defs><rect\ width=\'100\'\ height=\'10\'\ fill=\'url\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\(%23g);
}

/* Map + CTA on mobile */
#map { width: 100%; height: 420px; z-index: 1; }
.find-home-btn {
  background-color: #bb6226;
  color: #fff;
  padding: 6px 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 2px;
  font-size: 16px;
}


/* ============ TABLETS ( 768px) ============ */
@media (min-width: 768px) {
  /* 2 columns on tablets */
  .tab-pane .places-grid,
  #categoryTabsContent .places-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
  }

  /* center tile content again on larger screens */
  .places-grid li { text-align: center; }
  .places-grid .place-btn {
    justify-content: center;          /* center from tablet up */
    text-align: center;
    padding-left: 0;
  }

  #map { height: 480px; }
}


/* ============ DESKTOP ( 992px) ============ */
@media (min-width: 992px) {
  /* 3 columns on desktop */
  .tab-pane .places-grid,
  #categoryTabsContent .places-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1200px;
  }

  #map { height: 560px; }

}
}


/* ============ LARGE DESKTOP ( 1200px) — optional ============ */
@media (min-width: 1200px) {
  /* keep if you want a taller map on big screens */
  /* #map { height: 600px; } */
}
/* --- iOS: stop the phone icon from getting clipped on first paint --- */
.navbar { z-index: 2000 !important; }  /* ensure it’s above hero overlays */

.mobile-phone{
  display: inline-flex;
  align-items: center;
  line-height: 1;        /* no tall line box that can crop the SVG baseline */
  padding: 4px 0 3px;    /* tiny breathing room to avoid baseline clipping */
  overflow: visible;     /* just in case the parent tries to clip */
  -webkit-font-smoothing: antialiased;
}

.mobile-phone svg{
  display: block;        /* no inline baseline maths */
  overflow: visible;     /* iOS: don’t clip the vector at the viewBox edge */
  width: 1.25em;
  height: 1.25em;
  transform: translateZ(0);      /* nudge into its own layer */
  -webkit-backface-visibility: hidden;
}

/* That empty label span isn’t used on mobile; hide to simplify layout */
.mobile-phone .header__item-text{ display:none !important; }
@media (max-width: 1024px) {
  h1,
  h1.ultra-big,
  h1.ultra-big .text-line,
  h1.ultra-big-2,
  .title-text,
  h1.slider-title,
  h2.slider-title {
    font-size: 22px !important;
    text-shadow: 1px 1px #000 !important;
  }
}


/* Mobile nav (= 991.98px) */
@media (max-width: 991.98px) {

  /* each item full width, with small vertical spacing */
  #mobileNav li.nav-item {
    width: 70%;
    margin: .40rem 0;   /* adjust this to taste */
  }

  /* link padding and line-height (brings items closer) */
  #mobileNav li.nav-item .nav-link {
    display: block;
    padding: 6px 0;     /* tighter top/bottom */
    font-size: 1rem;
    line-height: 1.3;
  }
  /* optional hover/focus style */
  #mobileNav li.nav-item .nav-link:hover,
  #mobileNav li.nav-item .nav-link:focus,
  #mobileNav li.nav-item .nav-link:active {
    background-color: #ef7625;
    color: #243551;
  }
  #contact .section-title {
    font-size: 24px !important;
}  

}

/* --- Amenities section styles --- */
#amenities .heading-amenities {
  font-size: 24px !important;  /* default for large screens */
  font-weight: 500;
  color: #83464b;              /* tasteful olive like your mock */
  letter-spacing: .3px;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

#amenities .amenity-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;              /* center the block itself */
  max-width: 560px;
  text-align: center;          /* center the list items */
}

#amenities .amenity-list li {
  padding: 14px 8px;
  border-bottom: 1px solid #e9e7e2;
  color: #3b3b3b;
  font-size: .85rem;
  text-align: center;          /* center each line of text */
}

#amenities .amenity-list li:last-child {
  border-bottom: 0;
}

/* Tablet: slightly smaller heading */
@media (max-width: 991.98px) {
  #amenities .heading-amenities { font-size: 28px !important; }
}

/* Mobile: even smaller heading + tighter list spacing */
@media (max-width: 575.98px) {
  #amenities .heading-amenities { font-size: 20px !important; }
  #amenities .amenity-list li { padding: 12px 4px; }
}

/* Mobile-specific style for .u-SubPage */
@media (max-width: 767.98px) {
  .u-SubPage {
    --bs-bg-opacity: 1;
    background-color: #f7f7f7 !important;
    padding: 40px 0;   /* smaller padding on mobile */
  }
}

.border-custom-map {
    border: 1.5px solid #2b2b2b70 !important;
    border-radius: 1px;
    background: url(../img/map.png) center / cover repeat;
}
/* ===== Layout / alignment tweaks ===== */

/* Remove outside borders on the two top cards */
#contact .contact-card { 
  background: #fbfbfb;
  border: 0;
  padding-top: .5rem;
  padding-right: .5rem !important;
  padding-left: .5rem !important;
}
#contact .map-card { border:0; }

/* Make the map card behave like a card and align with the left one */
#contact .map-card {
  display:flex;
  align-items:center;
  justify-content:center;
  height:210px;
  background-size:cover;
  background-position:center;
  color:#2b2b2b70;
  border-radius:.25rem;
  width:100%;
  margin:0 auto;
  max-width:440px;
  position:relative;        /* for overlay */
  overflow:hidden;          /* clip overlay */
  transition: box-shadow .2s ease;
}

/* Ensure both columns align neatly on large screens */
@media (min-width: 992px){
  #contact .col-lg-6 .contact-card { height:100%; }
  #contact .map-card { height:210px; }
}

/* Narrower and centered columns */
#contact .col-lg-5 {
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
}

/* ===== Custom border-top utility (does NOT override Bootstrap) ===== */
.u-border-top { border-top:1px solid #2b2b2b70; }

/* ===== Hover backgrounds ===== */
#contact .contact-row {
  color:#2b2b2b;
  transition: background-color .2s ease, color .2s ease;
}
#contact .contact-row:hover {
  background-color:#f7f7f7;
  color:#2c2a28;
}

/* Map card hover overlay */
#contact .map-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:#f3f1ed;
  opacity: 0;
  transition:opacity .25s ease;
  pointer-events:none;
  border-radius:inherit;
}
#contact .map-card:hover::after {
  opacity: 0.5;
}
#contact .map-card > * {
  position:relative;
  z-index:1;   /* keep icon/text above overlay */
}

/* ===== Typography & tables ===== */
#contact .section-title { font-weight:400; }
#contact .hours-table { 
  border-top:1px solid #2b2b2b70; 
  border-bottom:1px solid #2b2b2b70; 
}
#contact .hours-row { 
  display:flex; 
  justify-content:space-between; 
  padding:.9rem 0; 
  border-bottom:1px solid #2b2b2b70; 
}
#contact .hours-row:last-child { border-bottom:0; }
#contact .hours-day { color:#2b2b2b; }
#contact .hours-time { color:#2b2b2b; }

/* ===== Form ===== */
#contact .form-control { 
  background:#fff; 
  border:1px solid #2b2b2b70; 
  border-radius:0; 
  box-shadow:none; 
}
/* Contact form submit button — match intro action look */
#contact button.btn-submit, #contact .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 220px;
    padding: 7px 24px;
    background: #83464b;
    color: #fff !important;
    border: 1px solid #2b2b2b;
    border-radius: 2px;
    font-family: "Roboto", sans-serif !important;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: .5px;
    text-decoration: none;
    margin: 0 auto;
    box-shadow: none !important;
    min-height: 56px !important;
    min-width: 170px !important;
    transition: background .25s 
ease, color .25s 
ease;
}

#contact .btn-submit:hover,
#contact .btn-submit:focus {
background: #fff !important;
    color: #83464b !important;     /* keep brand text color on hover */
  box-shadow: none !important;
  outline: none;
}

/* Optional: slightly smaller on small phones */
@media (max-width: 576px) {
  #contact .btn-submit {
    min-width: 190px;
    padding: 10px 18px;
    font-size: .98rem;
  }
}



/* ===== Icons & heading ===== */
#contact svg { color:#2b2b2b; flex:0 0 auto; }
#contact .contact-heading {
  font-size: 1.6rem;
  line-height: 1.3;
  color: #162431;
}

@media (max-width: 991.98px){
  #contact .contact-heading {
    font-size: 1.4rem;
  }
}
/* Toolbar */
#floorplans .fp-toolbar { border-top:1px solid #eee; padding-top:.75rem; }
#floorplans .fp-filter { position:relative; }
#floorplans .fp-trigger{
  background:#fff; border:1px solid #ddd; border-radius:4px;
  padding:.4rem .75rem; font-size:.95rem; line-height:1; color:#333;
}
#floorplans .fp-trigger .fp-caret{
  display:inline-block; width:0; height:0; margin-left:.35rem;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #666;
}
#floorplans .fp-menu{
  position:absolute; top:115%; left:0; min-width:240px; background:#fff; border:1px solid #e1e1e1;
  box-shadow:0 6px 18px rgba(0,0,0,.08); border-radius:4px; padding:.75rem; z-index:30; display:none;
}
#floorplans .fp-filter.open .fp-menu{ display:block; }
#floorplans .fp-check{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; padding:.25rem 0; }
#floorplans .fp-check input{ width:16px; height:16px; }
#floorplans .fp-clear{ background:none; border:0; color:#2b2b2b70; font-size:.9rem; padding:0; }
#floorplans .fp-menu-range .fp-range{ width:100%; appearance:none; margin:.25rem 0; }
#floorplans .fp-menu-range .fp-value{ font-size:.92rem; color:#333; }

/* Cards */
#floorplans .fp-card{
  background:#fff; border:1px solid #2b2b2b40; border-radius:4px; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
#floorplans .fp-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
#floorplans .fp-img{ padding:1.25rem; display:flex; align-items:center; justify-content:center; min-height:180px; }
#floorplans .fp-img img{ max-width:100%; height:auto; }
#floorplans .fp-body{ padding:0 1rem 1rem; }
#floorplans .fp-title{ font-weight:600; font-size:1.05rem; color:#222; }
#floorplans .fp-meta{ color:#2b2b2b70; font-size:.92rem; margin-top:.15rem; }
#floorplans .fp-footer{
  background:#f7f7f7; border-top:1px solid #eee; padding:.7rem 1rem; font-size:.92rem;
}
#floorplans .fp-link{ text-decoration:none; }

/* Small tweak for very small screens */
@media (max-width: 575.98px){
  #floorplans .fp-menu{ left:auto; right:0; }
}
/* two-thumb range stack */
#floorplans .fp-range-wrap { position: relative; }
#floorplans .fp-range {
  width:100%;
  -webkit-appearance:none; appearance:none;
  height:4px; background:#ddd; outline:none; border-radius:2px;
  position:relative; display:block;
}
#floorplans .fp-range + .fp-range { margin-top:10px; }

/* thumbs */
#floorplans .fp-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #222; cursor:pointer;
}
#floorplans .fp-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #222; cursor:pointer;
}

/* card hide */
#floorplans .fp-card.is-hidden { display:none; }

/* ===== NAVBAR ===== */


/* Base (hero/top of page) */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: #574f45;
  padding: 0;
  border: none;
  height: 92px !important;            /* <-- was min-height; this is the fix */
  z-index: 2000;
}
.navbar .container-fluid{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding-left:0;
  padding-right:0;
  height:100%;                           /* propagate height for divider */
}

/* Logo hard-left (kill old floats/ordering/positioning) */
.navbar .logo-wrapper{
  float:none !important;
  order:0 !important;
  position:static !important;
  transform:none !important;
  left:auto !important; right:auto !important; top:auto !important;
  margin-left:2rem !important;
  margin-right:auto !important;          /* pushes the rest right */
  z-index:1200;
}

/* Right cluster */
.nav-actions{
  order:1 !important;
  margin-left:auto !important;
  display:flex;
  align-items:stretch !important;        /* stretch to navbar height */
  height:100%;                           /* ensure children can stretch */
}
.nav-actions .navbar-nav{
  display:flex;
  align-items:stretch !important;        /* li can reach full height */
  gap:.25rem;
  margin:0;
  height:100%;
  z-index: 1101;
}
.nav-actions .nav-item{
  display:flex;                          /* center content, keep full height */
  align-items:center;
  height:100%;
}
.nav-actions .navbar-nav .nav-link{
  padding: 5px 10px;
  font-size:15px;
  color:#fff;
  text-decoration:none;
  text-shadow:none;
  border-radius: 2px;
  border: 0px solid #fff;
  height: 42px;
}
.nav-actions .navbar-nav .nav-link:hover{
  text-decoration:none;
  color:#fff;
}

/* Full-height divider BEFORE "Apply Now" */
.nav-actions .nav-item.apply-item{
  position:relative;
  margin-left:24px;
  padding-left:4px;
}


/* Apply Now pill */
.apply-btn{
  display:inline-block;
  padding:.5rem 1rem;
  line-height:1;
  color:#574f45 !important;
  font-size:16px;
  text-decoration:none !important;
  border-radius: 2px;
  border: 0px solid #fff;
  height: 42px;
  padding: 12px 20px;
}
.apply-btn:hover{ color: #222 !important;
        background: #fff; }

/* Hamburger (rightmost) */
.phone-toggle-wrapper{ order:2 !important; }
.mobile-nav-toggle{ margin-left:12px; position:relative; z-index:1300; }

/* Hairline under the bar */
.nav-divider{
  height:1px;
  width:100%;
  background:hsla(0, 0%, 100%, .5);
  position:absolute;
  left:0; right:0; bottom:-1px;
  pointer-events:none;
  z-index: 1101;
}

/* ===== SCROLL STATE (must come AFTER base) ===== */
/* fixed: reliable even if ancestors have transform/overflow */
.navbar.nav-scroll{
  position:fixed !important;
  top:0; left:0; right:0;
  width: 100%;
  height:92px !important;
  background:#f7f7f7 !important;
  padding: 0;
  border: none;
  z-index:2000;
}

/* Logo when scrolled */
.navbar.nav-scroll #siteLogo,
.navbar.nav-scroll .logo-img{
  height:120px !important;
  margin-bottom:3px !important;          /* your request */
  margin-top: 0;
}

.navbar.nav-scroll .nav-actions .nav-link{ color:#fff; text-shadow:none; }
.navbar.nav-scroll .apply-btn{
    border-color: #574f45;
    display: inline-block;
    line-height: 1;
    color: #fff;
    text-decoration: none !important;
    border-radius: 2px;
    border: 1px solid #fff;
    height: 42px;
    padding: 12px 20px; }
.navbar.nav-scroll .nav-actions .nav-item.apply-item::before{ background:rgba(255,255,255,.45); }

/* Mobile quick phone only on mobile */
.mobile-phone{ display:inline-flex; }
@media (min-width:1200px){
  .mobile-phone{
    display:none;
  }
  .nav-actions .navbar-nav{
    gap:.25rem;
  }
}

@media (max-width: 1199.98px){
  .phone-toggle-wrapper{
    order: 1 !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    height: auto !important;
    display: flex;
    align-items: center;
  }
}
/* ===== MOBILE LOGO SIZING ===== */
@media (max-width: 991px) {
  /* Base (hero/top of page) */
  #siteLogo,
  .navbar .logo-img {
    height: 80px !important;   /* adjust as desired */
    margin: 0 auto;            /* keep it centered if needed */
    transition: height .3s ease;
  }
.navbar {
    height: 85px !important;
}
.navbar.nav-scroll {
    height: 85px !important;
}
  /* When scrolled */
  .navbar.nav-scroll #siteLogo,
  .navbar.nav-scroll .logo-img {
    height: 80px !important;   /* smaller for sticky nav */
    margin-top: 10px;          /* optional tweak for vertical balance */
  }
  .navbar .logo-wrapper {
    margin-left: .3rem !important;
    margin-right: auto !important;
}
}
/* === MOBILE NAV ICON SPACING FIX === */
@media (max-width: 991px) {
  .nav-actions {
    gap: 0 !important;                /* remove flex gap */
  }

  .phone-toggle-wrapper {
    order: 1 !important;              /* phone sits just before toggler */
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;  /* small spacing between phone & toggler */
    height: auto !important;
    display: flex;
    align-items: center;
  }

  .mobile-nav-toggle {
    order: 2 !important;              /* toggler always far right */
    margin-left: 0 !important;
    margin-right: 0.5rem !important;  /* keep a tiny padding from edge */
  }

  /* tighten the SVG size for phone if needed */
  .mobile-phone svg {
    width: 1.4em;
    height: 1.4em;
    font-size: 24px;
  }
}
/* Band style */
.footer__callout {
  background: #3f4c57;
  padding: 85px 0;
}
/* Title wrapper */
.callout__title {
  color: #5e504d;
  letter-spacing: .5px;
  line-height: 1.25;
  text-shadow: 0px 0px rgba(0,0,0,.35);
}

/* Specific font size/weight (desktop/tablet) */
.custom-callout-title {
  font-size: 2.4rem !important; 
  font-weight: 400;
}

/* Buttons */
.btn-callout {
  background: #cbc3bb;
  color: #706e62 !important;
  padding: 12px 28px;
  border-radius: 1px;
  border: 0;
  letter-spacing: .3px;
  transition: transform .15s ease, opacity .15s ease;
  text-decoration: none !important;
  font-weight: 500;
}
.btn-callout:hover {
  color: #232323 !important;
  opacity: .92;
}

/* Mobile adjustments */
@media (max-width: 991px) {
  .callout__actions { justify-content: flex-start; }
  .callout__title { text-align: left; margin-bottom: .25rem; }
  .custom-callout-title {
font-size: 1.3rem !important;
        font-weight: 400;
        line-height: 2.5rem;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
  }
}
/* MOBILE FIRST (base) */
.h2-dark{
  color:#14222d;
  line-height:1.8;
  font-size: 1.4rem;              /* phones default */
}

/* =576px (tablets / large phones) */
@media (min-width: 576px){
  .h2-dark{
    font-size: 1.6rem;
  }
}

/* =992px (desktop) — add specificity to beat earlier rules & Bootstrap */
@media (min-width: 992px){
  .display-6.h2-dark{
    font-size: 1.5rem !important;            /* your desktop size */
  }
}

/* Desktop only: drop logo lower */
@media (min-width: 1200px) {
  #siteLogo,
  .navbar .logo-img { 
      width: auto !important;
      height: auto;
      max-height: 150px;
      flex: 0 0 auto;
      margin-top: 0;
  }
}

/* Scroll state: shrink by height only (keep ratio) */
.navbar.nav-scroll #siteLogo,
.navbar.nav-scroll .logo-img{
  width: auto !important;      /* override any width rules like 188px */
  height: auto;
    max-height: 100px;
    margin-bottom: 15px;
}

/* Mobile-specific caps */
@media (max-width: 991px){
  #siteLogo,
  .navbar .logo-img{
    max-height: 80px;          /* base mobile cap */
    margin-top: 0;
    margin-left: -20px;    
  }
  .navbar.nav-scroll #siteLogo,
  .navbar.nav-scroll .logo-img{
    max-height: 80px;          /* mobile scroll cap (what you had) */
    margin-top: 3px;          /* keep if you like the spacing */
    margin-left: 1px;
  }
}

/* Safety: if any legacy rule used width:100% */
.logo-wrapper img{ max-width: none; }
.fw-bold {
    font-weight: 400 !important;
}
/* Keep intro links as a flex row even on hover (wins over global a:hover rules) */
.intro-link,
.intro-link:hover,
.intro-link:focus {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* text left, arrow right */
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
}

/* Nice to have: arrow never shrinks and animates */
.intro-link .intro-arrow {
  flex-shrink: 0;
  width: 1.80em;
  height: auto;
  fill: currentColor;
  transition: transform .25s ease;
}

/* Apply hover visuals on the row, not on the <a> itself */
.intro-action:hover .intro-link {
  background: #fffdf7;
  color: #2222229e;
}
/* ---------- Mobile behavior ---------- */ 
@media (max-width: 991.98px){
  .intro-actions{ padding-left: 0; }
  .intro-actions::after{ display:none; }

  /* shrink row buttons a bit on mobile */
  .intro-link {
    padding: 10px 14px;   /* tighter height */
    font-size: 1rem;      /* smaller text */
  }

  .intro-action + .intro-action {
    border-top: 1px solid #ddccb5;
  }

  /* clamp / expand text */
  .intro-text{
    display: -webkit-box;
    -webkit-line-clamp: 4;       
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 7em;               
  }
  .intro-text.expanded{
    -webkit-line-clamp: unset;
    max-height: none;
  }

  .read-more-toggle{
    display: inline-block;
    margin-top: .5rem;
    font-size: .9rem; /* slightly smaller on mobile */
    color: #706e62;
    text-decoration: underline;
  }
}


.intro-action:hover .intro-arrow { transform: translateX(6px); }
.intro2-link,
.intro2-link:hover,
.intro2-link:focus {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* text left, arrow right */
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
}

/* Nice to have: arrow never shrinks and animates */
.intro2-link .intro2-arrow {
  flex-shrink: 0;
  width: 0.8em;
  height: auto;
  fill: currentColor;
  transition: transform .25s ease;
}

/* Apply hover visuals on the row, not on the <a> itself */
.intro2-action:hover .intro2-link {
  background: #eaf9f9;
  color: #2222229e;
}
.intro2-action:hover .intro2-arrow { transform: translateX(6px); }
h2 {
    color: #575e65;
}
/* Force The Meridian onto its own line */
.nav-address .address-title {
  display: block;          /* full line */
  margin-bottom: 0.25rem;  /* tighten space between name and address */
  font-size: 1rem;         /* adjust as needed */
}

/* Address lines block */
.nav-address .address-lines {
  display: block; /* ensures address starts on new line */
  line-height: 1.3; /* tighter spacing */
}
/* scoped horizontal rule */
.hr-custom {
  margin: 5px 0 15px;
  border: 0;                 /* reset default */
  border-top: 1px solid #493b29;
  width: 100%;
  height: 0;                 /* ensure consistent height */
}
/* contact icon */
.contact-icon {
  color: #cbc3bb !important;
  flex: 0 0 auto;
  /* If you want the SVG fill to follow the text color: */
  fill: currentColor;
}
@media (min-width: 800px) {
  .header.nav-scroll #navDockedPhoneItem { display: flex !important; }
  .parallax-img-section { padding: clamp(20px, 3vw, 48px) !important; }
}
/* Parallax CTA – styled like #heroRotator .hero-arrow */
.parallax__container {
    clip: rect(0,auto,auto,0);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
/* knobs */
:root{
  --pis-frame:  #10686b;
  --pis-height: clamp(560px, 80vh, 1000px);
}

/* frame */
.parallax-img-section{
  background: #f7f7f7;
  padding: clamp(20px, 3vw, 48px);                 /* our own frame padding */
}

/* kill the global section padding for this component */
@media (min-width: 800px){
  .parallax-img-section{ padding: clamp(20px,3vw,48px) !important; }
}

/* make the block exactly the target height (not min-height) */
.parallax-img-section__block{
  position: relative;
  height: var(--pis-height);
  overflow: hidden;
  border-radius: 2px;
}

/* the plugin target must fill the block */
.parallax-img-section .parallax{
  display:block;
  height: 100% !important;
  overflow:hidden;
}

/* plugin container must also fill the block */
.parallax-img-section .parallax > .parallax__container{
  position:absolute; inset:0;
  width:100%; height:100% !important;
  background-position:center;
  background-size:cover;
  will-change: transform;
}

/* dimmer + centered content (unchanged) */
.parallax-img-section__dimmer{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:2; pointer-events:none; }
.parallax-img-section__content{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; text-align:center; color:#fff; z-index:3; }
.parallax-img-section__title { font-weight: 400; font-size: 2.4rem !important; letter-spacing: .02em; font-size: clamp(2.2rem, 5vw, 4.2rem); /* color: #fff; */ font-weight: 400; color: #f8f9faf0; line-height: 0.5; }
.parallax-img-section__subtitle { max-width: 40ch; font-size: clamp(1rem, 1.6vw, 1.25rem); margin: 0 0 .5rem; letter-spacing: .1rem; /* text-transform: uppercase; */ opacity: .9; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); color: #fff; font-size: 1.0rem !important; }
.parallax-img-section__btn{ display:inline-block; padding:.8rem 1.35rem; border:2px solid #fff; color:#fff; text-decoration:none; border-radius:4px; transition:background .15s,color .15s; }
.parallax-img-section__btn:hover{ background:#fff; color:#333; }

@media (prefers-reduced-motion: reduce){
  .parallax [style*="transform"]{ transform:none !important; }
}

.parallax-img-section .pis-cta{
  --cta-w:172px; --cta-h:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:var(--cta-w); min-width:var(--cta-w); height:var(--cta-h);
  padding:0 14px; margin-top:1rem;
  border:1px solid rgba(255,255,255,.8); border-radius:2px;
  background:rgb(89 88 86 / 26%);
  min-height: 56px !important;
  min-width: 170px !important;
  color:#fff; text-decoration:none;
  text-transform: none;
  backdrop-filter:saturate(120%) blur(1px); -webkit-backdrop-filter:saturate(120%) blur(1px);
  transition:background .2s, border-color .2s, color .2s;
}
.parallax-img-section .pis-cta::before{
  content:attr(data-cta);
  font-weight:500; letter-spacing:.05em;
  font-size:clamp(12px, 1.02vw, 15px); white-space:nowrap;
}
.parallax-img-section .pis-cta svg{
  width:16px; height:16px; flex:0 0 16px; transition:transform .2s;
}
.parallax-img-section .pis-cta:hover{
  background-color: #ffffff;
  color: #111111;
  border-color: #ffffff;
  transform: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.parallax-img-section .pis-cta:hover svg{
  transform:translateX(6px);
}
/* keyboard focus */
.parallax-img-section .pis-cta:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}
/* kb-fixes.css — load LAST */

/* Force the parallax section padding from =800px no matter what */
@supports (display: block) {
  @media (min-width: 800px) {
    html body .parallax-img-section { 
      padding: clamp(20px, 3vw, 48px) !important;
    }
  }
}

/* Make sure the docked phone shows when scrolled */
@supports (display: block) {
  @media (min-width: 800px) {
    .header.nav-scroll #navDockedPhoneItem,
    .navbar.nav-scroll #navDockedPhoneItem { 
      display: flex !important; 
    }
  }
  @media (min-width: 1200px) {
    .navbar.nav-scroll #navDockedPhoneItem { 
      display: flex !important; 
      z-index: 1200;
    }
  }
}
/* === Parallax section: compact on mobile (<800px) === */
@media (max-width: 799.98px){
  /* shorter block height */
  :root{
    /* was clamp(560px, 80vh, 1000px) */
    --pis-height: clamp(300px, 54vh, 460px);
  }

  /* tighter frame padding */
  .parallax-img-section{
    /* was clamp(20px, 3vw, 48px) */
    padding: clamp(12px, 4vw, 22px);
  }

  /* (optional) slightly tighter content rhythm */
  .parallax-img-section__content{ gap: .75rem; }

  /* (optional) rein in big type on small screens */
  .parallax-img-section__title{
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
    line-height: 1.1;
  }
  .parallax-img-section__subtitle{
    font-size: clamp(.9rem, 3.5vw, 1rem) !important;
  }

  /* (optional) smaller CTA */
  .parallax-img-section .pis-cta{
    --cta-w: 150px;
    --cta-h: 40px;
    margin-top: .5rem;
  }
  
  
}
/* 1) Remove the Bootstrap left margin on the logo wrapper */
.navbar .logo-wrapper { margin-left: 0 !important; }           /* kills .ms-3 */
.navbar .logo { padding-left: 0 !important; }                  /* in case of any ps-* */

/* 2) Tighten the left gutter of the navbar container */
.navbar .container,
.navbar .container-fluid { padding-left: 12px !important; }    /* was ~15–24px */

/* Optional: even tighter on desktop only */
@media (min-width: 1200px){
  .navbar .container,
  .navbar .container-fluid { padding-left: 10px !important; }
}

/* Optional: mobile/tablet specific tweak */
@media (max-width: 991.98px){
  .navbar .container,
  .navbar .container-fluid { padding-left: 10px !important; }
  .navbar .logo-wrapper { margin-left: 0 !important; }
}
.navbar .logo-wrapper.ms-1,
.navbar .logo-wrapper.ms-2,
.navbar .logo-wrapper.ms-3,
.navbar .logo-wrapper.ms-4 { margin-left: 0 !important; }
@media (min-width:1200px){
  .navbar.nav-scroll #navDockedPhoneItem{
    position: relative; z-index: 1201; transition: transform .25s ease;
  }
  body.nav-open .navbar.nav-scroll #navDockedPhoneItem{
    transform: translateX(-150px);   /* tweak this value to taste */
  }
}
/* Keep the Apply button from getting clipped at ~1280–1300px */
@media (min-width:1200px) and (max-width:1300px){
  /* make sure nothing clips */
  .navbar{ overflow: visible; }

  /* shave a little container padding */
  .navbar .container-fluid{ padding-right: 10px; padding-left: 12px; }

  /* tighten the menu a touch */
  .nav-primary{ gap: 14px; }
  .nav-primary > li > a{ font-size: 15px; }  /* was ~16–17px */

  /* compact Apply button and prevent wrapping */
  .nav-actions .apply-btn{
    padding: 12px 12px;
    font-size: 15px;
    white-space: nowrap;
  }
  #mobileNav .mobile-nav-link {
        font-size: 1.9em !important;
        line-height: 1.5 !important;
    }

  /* free space: hide the phone number text, keep the icon */
  #navDesktopPhoneItem .header__item-text,
  .tb-center .header__item-text{ display:none; }

  /* optional: nudge the actions in a hair */
  .nav-actions{ margin-right: 4px; }
}
/* 1) Remove Bootstrap's default focus shadow on buttons */
:root { --bs-btn-focus-shadow-rgb: 0,0,0 !important; }
button.btn:focus,
button.btn:focus-visible { box-shadow: none !important; }

/* 2) Your styles on hover/active/focus */
button.btn:hover,
button.btn:active,
button.btn:focus,
button.btn:focus-visible,
button.btn.js-open-modal:focus,
button.btn.js-open-modal:focus-visible {
  background: #ffffff !important;
  color: #83464b !important;
  border-color: #83464b !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.9) !important;
}

/* 3) Let the inner text follow the button's color/shadow */
button.btn span {
  color: inherit !important;
  text-shadow: none !important;
}
/* Tour form: bigger radios and checkboxes + accessible focus */
#tourPageForm input[type="radio"],
#tourPageForm input[type="checkbox"]{
  width: 20px;           /* keep layout space predictable */
  height: 20px;
  transform: scale(1.15);
  -webkit-transform: scale(1.15);
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  accent-color: #83464b; /* brand color for the tick/dot in modern browsers */
}

/* Label spacing so text lines up nicely next to the larger controls */
#tourPageForm .d-flex.gap-3 label,
#tourPageForm label.small{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Strong focus indicator for keyboard users */
#tourPageForm input[type="radio"]:focus-visible,
#tourPageForm input[type="checkbox"]:focus-visible{
  outline: 2px solid #2f6b66;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(47,107,102,0.25);
}
.tour-day.is-closed{opacity:.45;filter:grayscale(100%);cursor:not-allowed}
.tour-day.is-closed .tour-day__bar{background:#777}

/* Larger tap targets on touch devices */
@media (pointer: coarse){
  #tourPageForm input[type="radio"],
  #tourPageForm input[type="checkbox"]{
    width: 24px;
    height: 24px;
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
  }
}
/* Mobile: keep the intro H2 on a single line */
@media (max-width: 575.98px){
  h2.display-6.fw-bold.h2-dark{
    white-space: nowrap;          /* no line break */
    font-size: clamp(16px, 4.2vw, 28px);  /* scale to fit */
    line-height: 1.15;
    letter-spacing: .02em;
  }
}
.hr-custom-mat {
    margin: 55px 0 15px;
    border: 0;
    border-top: 2px solid #2b2b2b;
    width: 100%;
}
/* Shared sizing so the phone ring matches the burger ring */
:root{
  --iconBtn: 46px;   /* outer circle size (same as burger) */
  --iconRing: 2px;   /* border thickness (match burger ring) */
}

:root{
  --iconBtn: 46px;        /* shared size for phone + burger */
  --nav-offset: 0;     /* height of fixed nav / nav-scroll */
}

/* Shared circle style (desktop + mobile) */
.mobile-nav-toggle,
.mobile-phone{
  display: inline-grid;
  place-items: center;
  inline-size: var(--iconBtn);
  block-size: var(--iconBtn);
  background: transparent;
  line-height: 1;
  border-radius: 50%;        /* always a circle */
  border: none;
  padding: 0;                /* let size come from iconBtn */
  height: auto;
}

}

/* Phone SVG: use stroke so it looks like the burger’s lines */
.mobile-phone svg{
  width: 2.1em;
  height: 1.35em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;  /* stays crisp */
}

/* If you previously had font-size/padding on .mobile-phone, remove them */
.mobile-phone{
  font-size: inherit;          /* override any 30px font-size */
  padding: 0 !important;       /* ensure no extra padding sneaks in */
}
#navMobilePhone {
  color: #fff !important;   /* this will become the SVG color */
}
/* ============================
   MOBILE ONLY: smaller circles
   ============================ */
@media (max-width: 1198.98px){
  :root{
    --iconBtn: 32px;   /* smaller button size on mobile */
  }

  .mobile-nav-toggle,
  .mobile-phone{
    inline-size: var(--iconBtn) !important;
    block-size: var(--iconBtn) !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .mobile-phone svg,
  .mobile-nav-toggle svg{
    width: 20px;
    height: 20px;
  }

}

/* CLOSED state: panel exists but is fully hidden */
#mobileNav.mobile-nav-panel{
  position: fixed;
  inset-inline: 0;
  top: var(--nav-offset) !important;
  height: calc(100vh - var(--nav-offset)) !important;
  background: #000000;
  display: flex !important;
  flex-direction: column;
  padding: 24px 20px 30px !important;
  overflow-y: auto;
  z-index: 1040;
  transition: transform .3s ease, opacity .3s ease;
  
  /* default = closed */
  transform: translateX(100%) !important;
  opacity: 0;
  pointer-events: none;
}

/* Extra safety: if aria-hidden="true", force the closed state */
#mobileNav[aria-hidden="true"]{
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* OPEN state: only when body + panel BOTH say it's open */
body.nav-open #mobileNav.mobile-nav-panel.open[aria-hidden="false"]{
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 991.98px){
  :root{
    --nav-offset: 0; /* your mobile nav + nav-scroll height */
  }
}

/* Keep navbar anchored, no horizontal shift */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
/* ============================
   Mobile drawer layout / styles
   ============================ */

#mobileNav .mobile-nav-inner{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  width:100%;
  height:100%;
  padding:232px 10px 10px;
  color:#fff;
}

#mobileNav .mobile-nav-left,
#mobileNav .mobile-nav-right{
  width:100%;
}

/* Two-column layout on md+ */
@media (min-width:768px){
  #mobileNav .mobile-nav-inner{
    flex-direction:row;
    max-width: 500px;      /* was 1100px – pulls columns inward */
    margin: 0 auto;
    gap: 200px;             /* was 40px – tighter gap */
    justify-content: space-between;
  }
  #mobileNav .mobile-nav-left{
    flex: 1.4;
  }
  #mobileNav .mobile-nav-right{
    flex: 1.1;
  }
}

/* Small uppercase label: "Menu", "Say Hello", "Follow Us" */
#mobileNav .mobile-nav-eyebrow{
  font-size:0.75rem;
  color: #fff;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0 0 1.5rem;
  opacity:0.9;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Main menu links */
#mobileNav .mobile-nav-main{
  padding:0;
  margin:0;
}

#mobileNav .mobile-nav-item + .mobile-nav-item{
  margin-top:0.75rem;
}

#mobileNav .mobile-nav-link{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  font-weight:400;
  line-height:1.2;
  /* big, elegant type similar to screenshot */
  font-size:clamp(1.9rem, 5vw, 2.6rem);
}

#mobileNav .mobile-nav-link:hover{
  color: #fff;
  opacity: .9;
}

/* Apply Now CTA */
#mobileNav .mobile-nav-cta-btn{
  display:inline-block;
  padding:0.7rem 1.8rem;
  border-radius:2px;
  border:1px solid #83464b;
  text-decoration:none;
  color:#ffffff;
  font-size:0.9rem;
  letter-spacing:0.1em;
  text-transform:none;
  text-align: center;
}

#mobileNav .mobile-nav-cta-btn:hover{
  background:#ffffff;
  color:#83464b;
}

/* Right column blocks */
#mobileNav .mobile-nav-right{
  margin-top:32px;
}

@media (min-width:768px){
  #mobileNav .mobile-nav-right{
    margin-top:0;
  }
}

#mobileNav .mobile-nav-block + .mobile-nav-block{
  margin-top:40px;
}

/* Phone + address */
#mobileNav .mobile-nav-phone{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  font-weight: 500;
  font-size: 14px;
}

#mobileNav .mobile-nav-phone:hover{
  opacity:0.75;
}

#mobileNav .mobile-nav-address{
  font-size:0.9rem;
  line-height:1.5;
  color:#fff;
  opacity:0.9;
}

/* Social links */
#mobileNav .mobile-nav-social a{
  text-decoration:none;
  color:#fff;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
}

#mobileNav .mobile-nav-social a:hover{
  opacity:0.75;
}

/* Badges row */
#mobileNav .mobile-nav-badges i{
  font-size:1.1rem;
}
/* Mobile-only tweaks: smaller type & tighter spacing */
@media (max-width: 991.98px){
  /* shrink drawer padding a bit */
  #mobileNav .mobile-nav-inner{
    padding: 154px 10px 32px;
  }

  /* main links smaller + tighter line-height */
  #mobileNav .mobile-nav-link{
    font-size: 1.1rem !important;      /* was clamp(...) */
    line-height: 1.3 !important;
  }

  /* reduce space between items */
  #mobileNav .mobile-nav-item + .mobile-nav-item{
    margin-top: 0.5rem;
  }

  /* eyebrow labels a bit smaller */
  #mobileNav .mobile-nav-eyebrow{
    font-size: 0.7rem;
    margin-bottom: 1rem;
  }

  /* tighten Apply Now area */
  #mobileNav .mobile-nav-cta{
    margin-top: 1.5rem;
  }
  #mobileNav .mobile-nav-cta-btn{
    padding: 0.1rem 0.7rem;
    font-size: 0.8rem;
    background: #83464b;
    font-weight: 600 !important;
  }

  /* right column text a touch smaller */
  #mobileNav .mobile-nav-phone{
    font-size: 0.95rem;
  }
  #mobileNav .mobile-nav-address{
    font-size: 0.8rem;
  }
  #mobileNav .mobile-nav-social a{
    font-size: 0.75rem;
  }
}
/* Mobile: hide right contact/social column */
@media (max-width: 767.98px){
  #mobileNav .mobile-nav-right{
    display: none;
  }

  /* let the left side take full width */
  #mobileNav .mobile-nav-left{
    width: 100%;
    padding: 2px 10px 10px;
  }
}
/* Base link style */
#mobileNav .mobile-nav-link{
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
}

/* underline element */
#mobileNav .mobile-nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;  /* space below text */
  width: 0%;
  height: 2px;
  background: currentColor;
  transition: width .28s ease-out;
  transform-origin: left;
}

/* grow underline on hover/focus */
#mobileNav .mobile-nav-link:hover::after,
#mobileNav .mobile-nav-link:focus-visible::after{
  width: 100%;
}
@media (max-width: 767.98px){
  #mobileNav .mobile-nav-link::after{
    bottom: -2px;
    height: 1.5px;
  }
}
/* ============================
   Desktop: right-side actions
   ============================ */
@media (min-width: 1200px){

  /* the whole right cluster (phone/find/tour + burger) */
  .nav-actions{
    display: flex !important;
    align-items: center;
    gap: 1.25rem;               /* same gap between every item */
  }

  /* the UL that holds your pill buttons */
  .nav-actions .navbar-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    margin-right: -8px;
  }

  .nav-actions .navbar-nav > li.nav-item{
    margin: 0 !important;       /* kill any Bootstrap ms-3 etc */
  }

  /* make all three pills feel consistent */
  .nav-actions .navbar-nav > li.nav-item > a.nav-link{
    /* padding: 0.35rem 1.9rem; */
    white-space: nowrap;
  }

  /* wrapper that holds the burger circle */
  .phone-toggle-wrapper{
    margin-left: 0 !important;
  }
}

/* ============================
   Base navbar (mobile first)
   ============================ */

/* base & scrolled share the same box metrics */
.navbar,
.navbar.nav-scroll {
  padding: 16px 0;                  /* SMALLER on mobile */
  box-sizing: border-box;
  border-bottom: 1px solid transparent; /* reserve border so it doesn't "pop" in */
}

/* base state (over hero) */
.navbar {
  position: absolute;
  margin-top: 0;
  left: 0;
  top: 0;
  width: 100%;
  background: #f7f7f7;
  z-index: 99;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* scrolled state */
.navbar.nav-scroll {
  position: fixed;           /* stick once scrolled */
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom-color: hsla(0, 0%, 100%, .1);
  box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
  -webkit-transform: none;
  transform: none;
}

/* ============================
   Logo lock (no movement)
   ============================ */

/* default (mobile) logo size */
.navbar .logo-img,
.navbar.nav-scroll .logo-img {
  height: 56px !important;   /* mobile size */
  width: auto !important;
  max-width: none !important;
  transition: none !important;
}

/* stop wrapper/link from shifting – but don’t override centering */
.navbar .logo-wrapper,
.navbar.nav-scroll .logo-wrapper,
.navbar .logo,
.navbar.nav-scroll .logo {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}

/* Mobile / tablet: logo participates in flex layout */
@media (max-width: 1199.98px) {
  .navbar .logo-wrapper,
  .navbar .logo {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }
}

/* Desktop (>= 1200px): perfectly center logo in navbar */
@media (min-width: 1200px) {
  .navbar .container-fluid {
    position: relative;
  }

  .navbar .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1200;
  }
}


/* Prevent flex weirdness squeezing the logo */
.navbar .logo-wrapper {
  flex-shrink: 0;
}

/* ============================
   Bump sizes on desktop
   ============================ */
@media (min-width: 992px){

  .navbar,
  .navbar.nav-scroll {
    padding: 80px 0;         /* taller bar on desktop */
  }

}
/* ============================
   Mobile: push phone + toggle right
   ============================ */
@media (max-width: 1198.98px){

  /* keep flex row, but let right side slide over */
  nav.navbar .container-fluid{
    justify-content:flex-start !important;
    gap: .75rem;
  }

  /* first item on the right cluster (phone) moves to the right edge,
     the toggle will sit just to its left/right depending on margin */
  #navMobilePhone{
    margin-left: auto !important;
  }

  /* small spacing between phone and burger */
  .mobile-nav-toggle{
    margin-left: .75rem;
  }
}
/* Mobile nav CTAs: Apply + Book side by side */
.mobile-nav-cta {
  display: flex;
  gap: 0.75rem;          /* space between buttons */
}

.mobile-nav-cta-btn {
  flex: 1 1 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Make Book a Tour look slightly different if you want */
.mobile-nav-cta-btn-secondary {
  background: transparent;
  border-color: #ffffffaa;
  opacity: 0.9;
}

.mobile-nav-cta-btn-secondary:hover {
  opacity: 1;
}
/* Default: don't show the mobile CTA block */
.mobile-nav-cta {
  display: none;
}

/* Mobile only (same breakpoint as your mobile nav) */
@media (max-width: 991.98px) {
  .mobile-nav-cta {
    display: flex;
    gap: 0.75rem;          /* space between buttons */
  }

  .mobile-nav-cta-btn {
    flex: 1 1 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-nav-cta-btn-secondary {
    background: transparent;
    border-color: #ffffffaa;
    opacity: 0.9;
  }

  .mobile-nav-cta-btn-secondary:hover {
    opacity: 1;
  }
#mobileNav .mobile-nav-cta{
  margin-top: auto !important;   
  padding-top: 2rem;           
}

}
/* Hide arrow icon in the parallax CTA */
.pis-cta svg {
  display: none !important;
}
/* Hide arrow icon in the parallax CTA */
.intro-action svg {
  display: none !important;
}
/* Hide arrow icon in the parallax CTA */
.apply3 svg {
  display: none !important;
}

/* =========================================
   SHORT SCREENS (e.g. 1024×600 / 1024×768)
   Tighten top nav + mobile overlay layout
   ========================================= */
@media (min-width: 768px) and (max-height: 720px){

  /* 1) Make the top bar a bit shorter on these views */
  .navbar,
  .navbar.nav-scroll{
    padding: 22px 0 !important;   /* was 48px on desktop */
  }

  .navbar .logo-img,
  .navbar.nav-scroll .logo-img{
    height: 64px !important;      /* slightly smaller logo */
  }

  /* 2) Bring the mobile menu list up a bit */
  #mobileNav .mobile-nav-main{
    margin-top: 2.5rem !important;   /* instead of huge top gap */
  }

  /* 3) Don’t push CTAs all the way to the bottom on short screens */
  #mobileNav .mobile-nav-cta{
    margin-top: 3rem !important;     /* was auto – pushed them offscreen */
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* 4) Scale menu typography down slightly so it breathes more */
  #mobileNav .mobile-nav-main a{
    font-size: 2.9rem;   /* was ~2.6–2.8rem */
    line-height: 1.1;
  }

}
@media (min-width: 1000px) and (max-width: 1300px) {
    #mobileNav .mobile-nav-link {
        font-size: 1.6rem !important;
        line-height: 1.5 !important;
    }
}
/* =========================================
   1024×600-ish: tighten mobile nav layout
   ========================================= */
@media (min-width: 768px) and (max-height: 620px){

  /* shrink padding so content + CTAs fit */
  #mobileNav .mobile-nav-inner{
    padding: 72px 32px 24px !important;  /* was ~152px top */
    height: auto !important;
  }

  /* keep the two-column layout but avoid extra top gap */
  #mobileNav .mobile-nav-main{
    margin-top: 0 !important;
  }

  /* pull CTAs up so they’re visible on 600px height */
  #mobileNav .mobile-nav-cta{
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }
}
/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
  nav.navbar,
  nav.navbar.nav-scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}


/* Mobile style for the intro CTA (inside .u-bio only) */
@media (max-width: 991.98px) {

  .u-bio .intro2-actions {
    display: block;
    margin-top: 2rem;
  }

  .u-bio .intro2-action {
    margin: 0;
    padding: 0;                          /* remove extra padding */
    background: #fff;
    border-top: 1px solid #e4e4e4;
    border-bottom: 0;
    border-left: none !important;        /* kill left border */
    border-right: none !important;       /* just in case */
  }

  .u-bio .intro2-action:last-child {
    border-bottom: 1px solid #e4e4e4;    /* bottom rule only on last */
  }

  /* Link style: full-width, centered text */
  .u-bio .intro2-link {
    display: block !important;           /* override any flex */
    width: 100%;
    padding: 14px 0;
    text-align: center !important;       /* center text */
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.9rem;
    color: #574f45;
    background: transparent;
    text-decoration: none;
  }

  .u-bio .intro2-link:hover,
  .u-bio .intro2-link:focus {
    background: transparent;
    color: #574f45;
  }

  /* Hide the chevron on mobile for this section */
  .u-bio .intro2-arrow {
    display: none !important;
  }
}
/* ================================
   Photo strip – equal-size thumbs
   ================================ */

.photo-strip {
  padding: 24px 0;
  background: #ffffff;
  position: relative; /* enable absolute positioning for ::before/::after */
}

.photo-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Row of 5 thumbnails */
.photo-strip__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

/* Each slot: SAME width & height */
.photo-strip__item {
  display: block;
  flex: 0 0 180px;          /* desktop width */
  aspect-ratio: 4 / 3;      /* choose 4:3; tweak if you want */
  overflow: hidden;
  border-radius: 3px;      /* match your rounded corners */
}

/* Image fills the slot, cropped as needed */
.photo-strip__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* =======================================
   Tablet + mobile (= 991.98px)
   Keep 5 across, equal size
   ======================================= */
@media (max-width: 991.98px) {
  .photo-strip {
    padding: 16px 0;
  }

  .photo-strip__inner {
    padding: 0 10px;
  }

  .photo-strip__items {
    justify-content: space-between;
    gap: 8px;
  }

  .photo-strip__item {
    flex: 0 0 calc(20% - 6px);   /* 5 equal columns */
    aspect-ratio: 4 / 3;         /* same fixed ratio on mobile */
  }
}

/* Vertical borders left + right */
.photo-strip::before,
.photo-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;              /* full height match */
  width: 17px;            /* border thickness */

  /* fallback solid color */
  background-color: #f7f7f7;
  background-repeat: repeat-y;   /* tile vertically */
  background-position: center;

  z-index: 1;
}

/* Left border */
.photo-strip::before {
  left: 0;
}

/* Right border */
.photo-strip::after {
  right: 0;
}

/* ensure content clears the borders */
.photo-strip__inner {
  padding-left: 24px;
  padding-right: 24px;
}

.photo-strip__cta {
  text-align: center;
  margin-top: 16px;
}

.photo-strip__link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #2a4d77; /* adjust to property brand color */
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: all .25s ease;
}

.photo-strip__link:hover {
  border-bottom-color: currentColor;
  color: #183654; /* darken on hover */
}

/* View Gallery CTA */
.photo-strip__cta {
  text-align: center;
  margin-top: 16px;
}

/* Link with border around text + arrow */
.photo-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 1.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 500;
  text-decoration: none;
  color: #574f45;
  border: 1px solid #574f45;     /* border around it */
  border-radius: 2px;            /* pill shape; use 0 for square */
  background: transparent;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

/* Smaller arrow */
.photo-strip__link .intro2-arrow {
  width: 12px;                    /* smaller than before */
  height: auto;
  flex-shrink: 0;
}

/* Hover / focus */
.photo-strip__link:hover,
.photo-strip__link:focus-visible {
  background: #574f45;
  color: #ffffff;
}

/* Keep it nice on mobile */
@media (max-width: 991.98px) {
  .photo-strip__cta {
    margin-top: 12px;
  }
}
/* ===== Tunables / assets ===== */
.welcome-community{
  --wc-bg: #f5f3ee;                  /* off-white background */
  --wc-ink: #2b2b2b;
  --wc-muted: #5e5e5e;
}

/* ===== Section wrapper with side trees ===== */
.welcome-community{
  position: relative;
  background: var(--wc-bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  overflow: hidden;
}
.welcome-community::before,
.welcome-community::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:min(320px, 28vw);
  background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.18; pointer-events:none; filter:grayscale(100%);
}
.welcome-community::before{
  left:0;
  background-image: var(--wc-left-tree);
  transform: translateX(-12%);
}
.welcome-community::after{
  right:0;
  background-image: var(--wc-right-tree);
  transform: translateX(12%);
}

/* ===== Layout ===== */
.wc-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  position: relative;
  z-index: 1;
}

.wc-grid{
  display: grid;
  grid-template-columns: minmax(0, var(--copy-rail)) minmax(0, var(--wc-visual-rail));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  justify-content: center;
}

/* Left copy */
.wc-copy h2{
  margin:0 0 1rem 0;
  color:var(--wc-ink);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.01em;
  font-size: clamp(25px, 5vw, 44px) !important;  
}

/* Mobile: 30px and no forced line break */
@media (max-width: 575.98px){
  .wc-copy h2{ font-size:30px; line-height:1.15; }
  .wc-copy h2 br{ display:none; }
}

/* Body copy */
.wc-copy p{
  max-width:46ch;
  color:var(--wc-muted);
  line-height:1.85;
  margin:0;
  font-size:clamp(.9rem, 1.0vw, 1.3rem) !important;
}
@media (min-width: 576px){
  .wc-copy h2 br{ display:inline; }
}

/* Right image collage */
.wc-visual{
  position: relative;
  min-height: 20rem;
}

/* faint mid-tree behind photos (optional) */
.wc-visual::before{
  content:"";
  position:absolute; inset: -6% -8% auto -8%;
  height: 60%;
  background-image: var(--wc-mid-tree);
  background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.10; filter:grayscale(100%);
  pointer-events:none;
}

/* ------- Base (any screen) ------- */
.wc-visual{ position:relative; }
.wc-photo{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.wc-photo img{
  position:absolute; inset:0;
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ------- Desktop exact match ------- */
@media (min-width:1200px){
  .wc-grid{
    grid-template-columns: 620px 640px;
    align-items:start;
    gap: 72px;
  }
  .wc-visual{ min-height: 540px; }

  .wc-photo-lg{
    width:551px;
    height:505px;
    top:0;
    right:0;
    z-index:1;
  }

  .wc-photo-sm{
    width:321px;
    height:425px;
    bottom:-34px;
    left:-68px;
    z-index:2;
  }
}
/* RESET any old logo hacks */
.navbar .logo-wrapper,
.navbar .logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0;
}

/* Default (mobile / tablet): logo is a flex child */
.navbar .logo-wrapper {
  display: flex;
  align-items: center;
  margin: 0 auto;            /* lets it sit between phone & burger */
}

/* Desktop (=1200px): absolute centered logo, left + right nav */
@media (min-width: 1200px) {
  .navbar .container-fluid {
    position: relative;
  }

  #leftNav {
    order: 1;
    z-index: 1200;
  }

  .navbar .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1102;
  }

  #desktopNav {
    order: 3;
    margin-left: auto;
    z-index: 1102;
  }

  .phone-toggle-wrapper {
    order: 4;
    margin-left: 0 !important;
  }
}
.mobile-phone svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}

#navMobilePhone {
  color: #fff !important;
}

/* remove round button just for the phone, keep burger as-is */
@media (max-width: 1198.98px) {
  .mobile-phone {
    inline-size: auto !important;
    block-size: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}
/* Center logo on ALL breakpoints */
.navbar .container-fluid {
  position: relative;
}

.navbar .logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 1200;
}

/* Desktop left/right groups stay as they are */
@media (min-width: 1200px){
  #leftNav {
    z-index: 1200;
  }
  #desktopNav {
    margin-left: auto;
    z-index: 1200;
  }
}

/* MOBILE: phone on the LEFT, burger on the RIGHT */
@media (max-width: 1199.98px){
  #navMobilePhone {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .phone-toggle-wrapper {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Phone icon styling (white, no circle) */
.mobile-phone svg{
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}

#navMobilePhone {
  color: #fff !important;
}

@media (max-width: 1198.98px){
  .mobile-phone{
    inline-size: auto !important;
    block-size: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}
/* --- MOBILE NAV BAR: phone | logo | burger --- */
@media (max-width: 1199.98px){
  /* Lay out the top bar as 3 cells */
  .navbar .container-fluid{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }

  /* Put each piece in its cell */
  #navMobilePhone{ grid-column: 1; justify-self: start; }
  .navbar .logo-wrapper{
    grid-column: 2;
    justify-self: center;
    position: static !important;   /* ensure not absolute on mobile */
    left: auto; top: auto; transform: none;
    margin: 0; display: flex; align-items: center;
  }
  .phone-toggle-wrapper{ grid-column: 3; justify-self: end; z-index: 1102; }

  /* Tidy up the icon and logo sizing on mobile */
  #navMobilePhone{ color:#fff !important; }
  .mobile-phone{ inline-size:auto !important; block-size:auto !important; border-radius:0 !important; padding:0 !important; }
  .mobile-phone svg{ width:.9em; height:.9em; fill:currentColor; stroke:none; }
  .navbar .logo-wrapper img{ height:85px !important; width:auto; }
}

/* --- DESKTOP (>=1200px): logo absolute-centered --- */
@media (min-width: 1200px) {
  .navbar .container-fluid {
    position: relative;
  }

  .navbar .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex;
    align-items: center;
    z-index: 1200;
  }

  /* slight nudge for right-side links to align with left */
  #desktopNav .nav-link {
    padding-top: 8px;
  }

  /* nav-scroll fixed state */
  .navbar.nav-scroll .container-fluid {
    position: relative !important;
  }

  .navbar.nav-scroll .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 1200;
  }

  /* smaller logo when scrolled */
  .navbar.nav-scroll .logo-wrapper img {
    height: 54px;
    width: auto;
  }
}

/* --- ALL LARGE (>=1202px): logo image size --- */
@media (min-width: 1202px) {
  .navbar .logo-img,
  .navbar.nav-scroll .logo-img {
    height: 150px !important;
    width: auto;
  }
}

/* --- 992-1199.98px: misc logo/phone tweaks --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .mobile-phone svg {
    width: 1.3em;
    height: 1.3em;
    fill: currentColor;
    stroke: none;
  }

  .navbar.nav-scroll #siteLogo,
  .navbar.nav-scroll .logo-img {
    max-height: 80px;
    margin-top: -39px;
    margin-left: 0;
  }

  #navMobilePhone {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 768-1199.98px: stack Apply / Book buttons in the mobile nav */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #mobileNav .mobile-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #mobileNav .mobile-nav-cta-btn {
    display: block;
    width: 210px;
    padding: 0.4rem 1.2rem;
  }
}

/* phone color/size (once, outside media) */
#navMobilePhone {
  color: #162431 !important;
  font-size: 25px;
}

/* Mobile nav: slide down from the top instead of in from the right */
#mobileNav.mobile-nav-panel {
  position: fixed;
  top: var(--nav-offset, 0);
  right: 0;
  left: 0;
  bottom: 0;
  background: #000;
  z-index: 1100;

  /* closed state */
  transform: translateY(-100%) !important;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

/* keep closed when aria-hidden=true */
#mobileNav[aria-hidden="true"] {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* open state */
body.nav-open #mobileNav.mobile-nav-panel.open[aria-hidden="false"] {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================================
   Mobile (<= 767.98px): centered menu + CTAs + address
   ========================================= */
@media (max-width: 767.98px) {

  /* Center the whole overlay content */
  #mobileNav .mobile-nav-inner {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 110px 24px 24px;
  }

  /* Menu list centered */
  #mobileNav .mobile-nav-main {
    width: 100%;
  }
  #mobileNav .mobile-nav-item {
    text-align: center;
  }
  #mobileNav .mobile-nav-link {
    display: inline-block;
  }

  /* CTAs stacked and centered */
  #mobileNav .mobile-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.25rem !important;
    padding-top: 0;
  }
  #mobileNav .mobile-nav-cta-btn {
    width: 100%;
    max-width: 130px;
  }

  /* CTA links under Apply button */
  #mobileNav .mobile-nav-cta-links {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  #mobileNav .mobile-nav-cta-links .mobile-nav-link {
    font-size: 0.9rem !important;
    text-decoration: none;
    line-height: 2.5 !important;
    color: #fff;
  }

  /* Show contact block on mobile and center it */
  #mobileNav .mobile-nav-right {
    display: block !important;
    width: 100%;
    margin-top: 1.5rem;
  }

  #mobileNav .mobile-nav-block.mt-5 {
    margin-top: 0.75rem !important;
  }

  #mobileNav .mobile-nav-address {
    display: block;
    text-align: center;
    margin-top: 0.25rem !important;
  }

  /* Optional: slightly less bottom padding so icons are closer too */
  #mobileNav .mobile-nav-inner {
    padding-bottom: 24px;
  }

  /* Hide phone line in the bottom mobile-nav-right block */
  #mobileNav .mobile-nav-phone {
    display: none !important;
  }

  /* Hide section headings like "Menu", "Get in Touch", "Follow Us" */
  #mobileNav .mobile-nav-eyebrow {
    display: none !important;
  }

  /* Hide badges row on mobile */
  #mobileNav .mobile-nav-badges {
    display: none !important;
  }

  /* Mobile only: social icons side by side, smaller, no border */
  #mobileNav .mobile-nav-social {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 1rem !important;
    margin-top: 0.75rem;
  }

  #mobileNav .mobile-nav-facebook {
    width: auto;
    height: auto;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 0;
    text-decoration: none;
    margin: 0 !important;
    padding: 0;
  }

  #mobileNav .mobile-nav-facebook .fb-label {
    display: none;
  }

  #mobileNav .mobile-nav-facebook i {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
  }
}

/* Desktop / tablet default for Facebook: show text, hide icon */
#mobileNav .mobile-nav-facebook .fb-label {
  display: inline;
}
#mobileNav .mobile-nav-facebook i {
  display: none;
}

/* underline animation for CTA links */
#mobileNav .mobile-nav-cta-links .mobile-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .28s ease-out;
  transform-origin: left;
}
#mobileNav .mobile-nav-cta-links .mobile-nav-link:hover::after,
#mobileNav .mobile-nav-cta-links .mobile-nav-link:focus-visible::after {
  width: 100%;
}

/* MOBILE / TABLET: logo flexed and centered, phone/burger ordering */
@media (max-width: 1199.98px) {
  .navbar .logo-wrapper,
  .navbar.nav-scroll .logo-wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    display: flex;
    align-items: center;
  }

  /* keep order: phone (1), logo (2), burger (3) */
  #navMobilePhone {
    order: 1;
  }

  .navbar .logo-wrapper {
    order: 2;
  }

  .phone-toggle-wrapper {
    order: 3;
    margin-left: auto !important;
  }
}

/* MOBILE: balance phone and burger so logo looks centered */
@media (max-width: 767.98px) {

  /* give phone and burger equal width boxes */
  #navMobilePhone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
  }

  .phone-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
  }

  /* keep the SVG itself reasonably sized */
  #navMobilePhone svg {
    width: 20px;
    height: 20px;
  }
}

/* FINAL mobile logo centering (phones and small tablets) */
@media (max-width: 991.98px) {
  .navbar .container-fluid {
    position: relative;
  }

  /* Center logo in the viewport, not between phone and burger */
  .navbar .logo-wrapper,
  .navbar.nav-scroll .logo-wrapper,
  .navbar .logo,
  .navbar.nav-scroll .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  /* Keep phone on the far left */
  #navMobilePhone {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Keep burger on the far right */
  .phone-toggle-wrapper {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* Fix: center burger so it mirrors the phone icon */
@media (max-width: 767.98px) {
  .phone-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;  /* was flex-end */
    width: 48px;
    margin: 0;
  }
}
/* Fine-tune mobile centering: equal boxes, no extra padding */
@media (max-width: 991.98px) {
  /* Phone block */
  #navMobilePhone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Burger wrapper */
  .phone-toggle-wrapper {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center; /* keep burger centered in its box */
    width: 48px;
    margin: 0;
  }

  /* Remove extra padding/margins from the toggler itself */
  .phone-toggle-wrapper .navbar-toggler {
    margin: 0;
    padding: 0;
  }
}
/* FINAL burger centering fix */
@media (max-width: 991.98px) {
  .phone-toggle-wrapper {
    width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* <-- forces true centering */
    padding: 0 !important;
    margin: 0 !important;
  }

  .navbar-toggler {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-toggler-icon,
  .navbar-toggler svg {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
  }
}
/* FINAL NAVBAR OVERRIDES – mobile/tablet + desktop */

@media (max-width: 1199.98px) {
  /* container is the positioning context */
  .navbar .container-fluid {
    position: relative;
  }

  /* center logo in the viewport on mobile/tablet */
  .navbar .logo-wrapper,
  .navbar.nav-scroll .logo-wrapper,
  .navbar .logo,
  .navbar.nav-scroll .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* phone: fixed on far left */
  #navMobilePhone {
    position: absolute !important;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    margin: 0 !important;
  }

  /* burger: fixed on far right */
  .phone-toggle-wrapper {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* center the icon inside the wrapper */
  .navbar-toggler {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* desktop: always keep logo perfectly centered */
@media (min-width: 1200px) {
  .navbar .container-fluid {
    position: relative;
  }

  .navbar .logo-wrapper {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
}
/* FINAL mobile centering fix: logo dead center, phone/burger pinned to edges */
@media (max-width: 991.98px) {
  /* make the navbar the positioning context, not the container */
  .navbar {
    position: relative !important;
  }
  .navbar .container-fluid {
    position: static !important;
  }

  /* center logo to the actual viewport */
  .navbar .logo-wrapper,
  .navbar.nav-scroll .logo-wrapper,
  .navbar .logo,
  .navbar.nav-scroll .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* phone on far left */
  #navMobilePhone {
    position: absolute !important;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
  }

  /* burger on far right */
  .phone-toggle-wrapper {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    margin: 0;
    padding: 0;
  }

  .phone-toggle-wrapper .navbar-toggler {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* Fix Facebook button on mobile: show icon, hide text */
@media (max-width: 767.98px) {
  #mobileNav .mobile-nav-facebook .fb-label {
    display: none !important;
  }
  #mobileNav .mobile-nav-facebook i {
    display: inline-block !important;
  }
}
:root{
  --page-max: 1320px;
  --page-pad: clamp(20px, 4vw, 48px);
  --copy-rail: 720px;
  --wc-visual-rail: 640px;
}

/* ===== Tunables / assets ===== */
.welcome-community{
  --wc-bg: #f7f7f7;
  --wc-ink: #162431;
  --wc-muted: #5e5e5e;
}

/* ===== Section wrapper with side trees ===== */
.welcome-community{
  position: relative;
  background: #fff;
  padding: clamp(3rem, 7vw, 6rem) 0;
  overflow: hidden;
}

.welcome-community::before,
.welcome-community::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(320px, 28vw);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .18;
  pointer-events: none;
  filter: grayscale(100%);
}

.welcome-community::before{
  left: 0;
  background-image: var(--wc-left-tree);
  transform: translateX(-12%);
}

.welcome-community::after{
  right: 0;
  background-image: var(--wc-right-tree);
  transform: translateX(12%);
}

/* ===== Layout ===== */
.wc-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  position: relative;
  z-index: 1;
}

.wc-grid{
  display: grid;
  grid-template-columns: minmax(0, var(--copy-rail)) minmax(0, var(--wc-visual-rail));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.wc-copy{
  width: 100%;
  max-width: var(--copy-rail);
}

/* Left copy */
.wc-copy h2{
  margin: 0 0 1rem 0;
  color: var(--wc-ink);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  font-size: clamp(22px, 5vw, 40px) !important;
}

/* Body copy */
.wc-copy p{
  max-width: 58ch;
  color: #1b1b1b;
  line-height: 1.85;
  margin: 0;
  font-size: clamp(.75rem, .8vw, .9rem) !important;
}

/* Show the br again on larger screens */
@media (min-width: 576px){
  .wc-copy h2 br{
    display: inline;
  }
}

/* Mobile: 30px and no forced line break */
@media (max-width: 575.98px){
  .wc-copy h2{
    font-size: 30px;
    line-height: 1.15;
  }

  .wc-copy h2 br{
    display: none;
  }
}

/* Right image collage */
.wc-visual{
  position: relative;
  min-height: 20rem;
  z-index: 2;
}

/* faint mid-tree behind photos */
.wc-visual::before{
  content: "";
  position: absolute;
  inset: -6% -8% auto -8%;
  height: 60%;
  background-image: var(--wc-mid-tree);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .10;
  filter: grayscale(100%);
  pointer-events: none;
}

.wc-photo{
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 1px;
  box-shadow: 0 6px 20px #8b8b8b;
  background: none !important;
}

.welcome-community .wc-photo-lg,
.welcome-community .wc-photo-sm{
  z-index: 3 !important;
}

.wc-photo img,
.welcome-community .wc-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.animation-element.zoom-in.in-view{
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 1200px){
  .welcome-community .wc-grid{
    grid-template-columns: minmax(0, var(--copy-rail)) minmax(0, var(--wc-visual-rail));
    gap: 72px;
    align-items: start;
    justify-content: center;
  }

  .welcome-community .wc-visual{
    min-height: 540px;
  }

  .welcome-community .wc-photo-lg{
    width: 551px;
    height: 505px;
    top: 0;
    right: 0;
    z-index: 1;
  }

  .welcome-community .wc-photo-sm{
    width: 321px;
    height: 425px;
    bottom: -34px;
    left: -68px;
    z-index: 2;
  }
}

/* Tablet and phone */
@media (max-width: 1199.98px){
  .welcome-community .wc-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .welcome-community .wc-copy{
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch;
  }

  .welcome-community .wc-copy p{
    max-width: none !important;
  }

  .welcome-community .wc-visual{
    position: relative;
    min-height: 0;
    padding-top: 62%;
  }

  .welcome-community .wc-photo-lg{
    width: 58%;
    top: 0;
    right: 2%;
    aspect-ratio: 551 / 505;
  }

  .welcome-community .wc-photo-sm{
    width: 42%;
    bottom: -4%;
    left: 0;
    aspect-ratio: 321 / 425;
  }
}

/* CTA buttons under Welcome copy */
.wc-actions{
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.wc-btn,
.wc-btn:hover,
.wc-btn:focus{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2.5rem;
  min-height: 56px;
  background: #16242f;
  color: #ffffff;
  text-decoration: none !important;
  font-size: 0.85rem;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  border-radius: 2px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #83464b !important;
  box-sizing: border-box;
  box-shadow: none !important;
  transform: none !important;
  top: 0 !important;
  margin: 0;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wc-btn::before,
.wc-btn::after,
.wc-actions .wc-btn::before,
.wc-actions .wc-btn::after{
  content: none !important;
}

.wc-actions .wc-btn{
  background: #83464b;
  color: #ffffff;
  border-color: #83464b !important;
}

.wc-actions .wc-btn:hover,
.wc-actions .wc-btn:focus{
  background: #ffffff;
  color: #16242f;
  border-color: #83464b !important;
}

.wc-btn.wc-btn--outline,
.wc-btn.wc-btn--outline:hover,
.wc-btn.wc-btn--outline:focus,
.wc-actions .wc-btn.wc-btn--outline,
.wc-actions .wc-btn.wc-btn--outline:hover,
.wc-actions .wc-btn.wc-btn--outline:focus{
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #83464b !important;
}

.wc-actions .wc-btn.wc-btn--outline{
  background: #ffffff;
  color: #16242f;
}

.wc-actions .wc-btn.wc-btn--outline:hover,
.wc-actions .wc-btn.wc-btn--outline:focus{
  background: #83464b;
  color: #ffffff;
  border-color: #83464b !important;
}

/* Footer CTA */
.u-foot-cta,
.u-foot-cta *{
  box-sizing: border-box;
}

.u-foot-cta::before,
.u-foot-cta::after{
  content: none !important;
  display: none !important;
}

.u-foot-cta{
  display: flex;
  width: 100%;
  min-height: 200px;
  margin: 0;
  padding: 2px 0 1px 0;
  overflow: hidden;
  background: none !important;
}

.u-foot-cta__left{
  flex: 0 0 54%;
  max-width: 54%;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-foot-cta__left-inner{
  width: 100%;
  max-width: calc(var(--copy-rail) + (var(--page-pad) * 2));
  padding: 70px var(--page-pad);
  text-align: left;
}

.u-foot-cta__left-inner > *{
  width: 100%;
  max-width: var(--copy-rail);
}

.u-foot-cta__title{
  margin: 0 0 34px;
  font-size: clamp(22px, 5vw, 36px) !important;
  line-height: 1.15;
  font-weight: 400;
  color: #162431;
  letter-spacing: 0;
}

.u-foot-cta__buttons{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}

@media (max-width: 1199.98px){
  .u-foot-cta__btn,
  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px !important;
    padding: 0.75rem 2.5rem !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    width: auto !important;
    min-width: 170px !important;
    flex: 0 0 auto !important;
  }

  .u-foot-cta__buttons{
    gap: 22px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.u-foot-cta__btn::before,
.u-foot-cta__btn::after{
  content: none !important;
}

.u-foot-cta__btn:hover,
.u-foot-cta__btn:focus{
  background: #ffffff;
  color: #000000;
  border-color: #574f45 !important;
}

.u-foot-cta__btn--outline,
.u-foot-cta__btn--outline:hover,
.u-foot-cta__btn--outline:focus{
  border-width: 1px !important;
  border-style: solid !important;
}

.u-foot-cta__btn--outline{
  background: #ffffff;
  color: #111111;
  border-color: #111111 !important;
}

.u-foot-cta__btn--outline:hover,
.u-foot-cta__btn--outline:focus{
  background: #000000;
  color: #ffffff;
  border-color: #574f45 !important;
}

/* RIGHT SIDE */
.u-foot-cta__right{
  flex: 0 0 46%;
  max-width: 46%;
  background: #162431;  
  border: solid 1px #83464b;
  display: flex;
  align-items: center;
}

.u-foot-cta__right-inner{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 90px;
  padding: 70px 70px 70px 75px;
}

.u-foot-cta__col{
  min-width: 160px;
}

.u-foot-cta__label{
  margin: 0 0 18px;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 400;
  color: #fff;
}

.u-foot-cta__text{
  font-family: "Roboto", sans-serif !important;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 10px;
}

.u-foot-cta__link{
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  line-height: 1.8;
}

.u-foot-cta__link:hover,
.u-foot-cta__link:focus{
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

/* Office hours block */
.u-foot-cta__hours{
  margin-top: 12px;
}

.u-foot-cta__hours-row{
  display: flex;
  justify-content: space-between;
  gap: 60px;
  color: #fff;
  font-size: .85rem;
  line-height: 1.8;
}

.u-foot-cta__hours-day{
  color: #fff;
  font-size: 0.75rem;
}

.u-foot-cta__hours-time{
  color: #fff;
  text-align: right;
  font-size: 0.75rem;
}

.u-foot-cta__hours a{
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  line-height: 1.8;
}@media (max-width: 1199.98px){
  .welcome-community .wc-grid{
    grid-template-columns: 1fr;
    gap: 32px;
    justify-content: stretch;
  }

  .welcome-community .wc-copy{
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch;
  }

  .welcome-community .wc-copy p{
    max-width: none !important;
  }

  .welcome-community .wc-visual{
    position: relative;
    min-height: 0;
    padding-top: 62%;
  }

  .welcome-community .wc-photo-lg{
    width: 58%;
    top: 0;
    right: 2%;
    aspect-ratio: 551 / 505;
  }

  .welcome-community .wc-photo-sm{
    width: 42%;
    bottom: -4%;
    left: 0;
    aspect-ratio: 321 / 425;
  }

  .u-foot-cta__left{
    flex: 0 0 55%;
    max-width: 55%;
    justify-content: center;
  }

  .u-foot-cta__right{
    flex: 0 0 45%;
    max-width: 45%;
  }

  .u-foot-cta__left-inner{
    width: 100%;
    max-width: 100%;
    padding: 55px 32px;
    text-align: left;
  }

  .u-foot-cta__left-inner > *{
    max-width: 720px;
  }

  .u-foot-cta__right-inner{
    gap: 50px;
    padding: 55px 40px;
  }

  .u-foot-cta__buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: flex-start;
  }

  .u-foot-cta__btn,
  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 2.5rem !important;
    min-height: 56px !important;
    min-width: 170px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    text-align: center !important;
    border-radius: 2px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
    transform: none !important;
    top: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  .u-foot-cta__btn{
    background: #83464b !important;
    color: #ffffff !important;
    border-color: #111111 !important;
  }

  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    background: #ffffff !important;
    color: #162431 !important;
    border-color: #574f45 !important;
  }

  .u-foot-cta__btn--outline{
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
  }

  .u-foot-cta__btn--outline:hover,
  .u-foot-cta__btn--outline:focus{
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #574f45 !important;
  }

  .u-foot-cta__btn::before,
  .u-foot-cta__btn::after{
    content: none !important;
  }
}
@media (max-width: 991.98px){
  .u-foot-cta{
    flex-direction: column;
  }

  .u-foot-cta__left,
  .u-foot-cta__right{
    flex: 0 0 100%;
    max-width: 100%;
  }

  .u-foot-cta__left{
    justify-content: center;
  }

  .u-foot-cta__left-inner{
    width: 100%;
    max-width: 100%;
    padding: 50px 16px 42px;
    text-align: left;
  }

  .u-foot-cta__left-inner > *{
    max-width: none;
  }

  .u-foot-cta__title{
    font-size: 2.1rem;
    margin-bottom: 26px;
    text-align: center;
  }

  .u-foot-cta__buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .u-foot-cta__btn,
  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 2.5rem !important;
    min-height: 56px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    background: #83464b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    text-align: center !important;
    border-radius: 2px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #111111 !important;
    box-sizing: border-box;
    box-shadow: none !important;
    transform: none !important;
    top: 0 !important;
    margin: 0 !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .u-foot-cta__btn::before,
  .u-foot-cta__btn::after{
    content: none !important;
  }

  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    background: #ffffff !important;
    color: #83464b !important;
    border-color: #83464b !important;
  }

  .u-foot-cta__btn--outline,
  .u-foot-cta__btn--outline:hover,
  .u-foot-cta__btn--outline:focus{
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #111111 !important;
  }

  .u-foot-cta__btn--outline{
        background: #ffffff !important;
        color: #16242f !important;
        border-color: #83464b !important;
  }

  .u-foot-cta__btn--outline:hover,
  .u-foot-cta__btn--outline:focus{
    background: #83464b !important;
    color: #ffffff !important;
    border-color: #111111 !important;
  }

  .u-foot-cta__right-inner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 24px;
  }

  .u-foot-cta__col{
    min-width: 0;
    flex: 1 1 0;
  }

  .u-foot-cta__label{
    font-size: 1.05rem;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .u-foot-cta__text,
  .u-foot-cta__text p,
  .u-foot-cta__text a,
  .u-foot-cta__link{
    font-size: 0.75rem;
    line-height: 1.7;
  }
}

@media (max-width: 575.98px){
  .u-foot-cta__buttons{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .u-foot-cta__btn,
  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}
@media (min-width: 1200px){
  .welcome-community .wc-inner{
    padding-left: 30px;
    padding-right: 66px;
  }

  .u-foot-cta__left{
    justify-content: flex-start;
    padding-left: calc((100vw - var(--page-max)) / 2 + 30px);
  }

  .u-foot-cta__left-inner{
    max-width: 720px;
    padding: 70px 0;
  }

  .u-foot-cta__left-inner > *{
    max-width: 720px;
  }
}
@media (min-width: 1200px){
  .u-foot-cta__buttons{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    flex-wrap: wrap;
  }

  .u-foot-cta__btn,
  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 2.5rem !important;
    min-height: 56px !important;
    min-width: 170px !important;
    width: auto !important;
    flex: 0 0 auto !important;

    background: #83464b !important;
    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 0.85rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    text-align: center !important;

    border-radius: 2px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #111111 !important;

    box-shadow: none !important;
    transform: none !important;
    top: 0 !important;
    margin: 0 !important;
  }

  .u-foot-cta__btn:hover,
  .u-foot-cta__btn:focus{
    background: #ffffff !important;
    color: #162431 !important;
    border-color: #574f45 !important;
  }

  .u-foot-cta__btn--outline,
  .u-foot-cta__btn--outline:hover,
  .u-foot-cta__btn--outline:focus{
    border-width: 1px !important;
    border-style: solid !important;
  }

  .u-foot-cta__btn--outline{
    background: #ffffff !important;
    color: #16242f !important;
    border-color: #83464b !important;
  }

  .u-foot-cta__btn--outline:hover,
  .u-foot-cta__btn--outline:focus{
    background: #83464b !important;
    color: #ffffff !important;
    border-color: #83464b !important;
  }

  .u-foot-cta__btn::before,
  .u-foot-cta__btn::after{
    content: none !important;
  }
}
@media (max-width: 991.98px){
  .u-foot-cta{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .u-foot-cta__right{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .u-foot-cta__right-inner{
    padding-bottom: 20px !important;
  }

  footer.footer-modern,
  footer.footer-modern.footer-modern{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 575.98px){
  .u-foot-cta-btn{
    flex: 1 1 calc(50% - 0.75rem); /* two per row */
    width: auto;                   /* no forced 100% */
    justify-content: center;
  }
}
/* ===========================
   REVION HEADER OVERRIDES
   =========================== */

/* 1) Kill global centered-logo behavior just for Revion */
.navbar.revion-nav .logo-wrapper,
.navbar.revion-nav.nav-scroll .logo-wrapper,
.navbar.revion-nav .logo,
.navbar.revion-nav.nav-scroll .logo {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  z-index: 1200;
}

/* Phone + burger cluster spacing (base) */
.phone-toggle-wrapper {
  height: 24px;
  column-gap: 24px;
}

/* Phone icon styled like the other site's button */
.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 1px solid #ffffffdb;
  border-radius: 4px;
  color: #ffffffdb;
  background: transparent;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

/* keep it clean in all interaction states */
.phone-icon,
.phone-icon:hover,
.phone-icon:focus,
.phone-icon:active {
  color: #ffffffdb !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* SVG size + thinner stroke so it matches the reference look */
.phone-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* Hide phone icon on desktop, show only below xl (already d-xl-none in markup) */
@media (min-width: 1200px) {
  .phone-icon {
    display: none !important;
  }
}

/* ---- MOBILE & TABLET (<1200px) ----
   Logo left, phone + toggle on the right (phone BEFORE toggle)
*/
@media (max-width: 1199.98px) {
  .navbar.revion-nav .container-fluid {
    display: flex !important;
    align-items: center !important;
  }

  /* Logo: left */
  .navbar.revion-nav .logo-wrapper {
    order: 0 !important;
    margin-left: 1.25rem !important;
  }

  /* Phone + burger cluster on the right */
  .navbar.revion-nav .phone-toggle-wrapper {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    column-gap: 110px !important; /* tighter gap for Revion */
  }

  /* Phone icon: inline, just left of burger, no absolute positioning */
  .navbar.revion-nav #navMobilePhone {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    order: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 34px !important;
    height: 30px !important;
    font-size: 0 !important; /* hides any stray text */
  }

  .navbar.revion-nav #navMobilePhone svg {
    width: 18px;
    height: 18px;
    font-size: initial;
  }

  /* Burger: second in the cluster, normal inline */
  .navbar.revion-nav #mobileToggle {
    position: static !important;
    order: 1 !important;
    margin: 0 !important;
  }
}

/* ---- DESKTOP (>=1200px) ----
   Logo far left ? leftNav ? desktopNav ? burger
*/
@media (min-width: 1200px) {
  .navbar.revion-nav .container-fluid {
    display: flex !important;
    align-items: center !important;
  }

  /* LOGO — far left */
  .navbar.revion-nav .logo-wrapper {
    order: 0 !important;
    margin-left: 2.5rem !important;
  }

  /* Left: Check Availability / phone */
  .navbar.revion-nav #leftNav {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
    z-index: 1200;
  }

  /* Right: Book a Tour / Find Your Home */
  .navbar.revion-nav #desktopNav {
    order: 2 !important;
    margin-left: auto !important;
    z-index: 1200;
  }

  /* Burger: far right */
  .navbar.revion-nav .phone-toggle-wrapper {
    order: 3 !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  /* Desktop-only logo sizing */
  .navbar.revion-nav #siteLogo,
  .navbar.revion-nav .logo-img {
    max-height: 150px;
    height: auto;
    width: auto;
  }
}
/* REVION – bigger tap target for mobile toggle */
@media (max-width: 1199.98px) {

  /* Wrapper: let it auto-size around phone + toggle */
  .navbar.revion-nav .phone-toggle-wrapper {
    position: absolute !important;   /* keep your current right/top placement */
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    column-gap: 105px !important;     /* space between phone and burger */
    height: auto !important;
  }

  /* Toggle: full 44x44 clickable box */
  .navbar.revion-nav #mobileToggle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Keep the three bars centered inside the larger area */
  .navbar.revion-nav #mobileToggle span {
    display: block;
    width: 43px;
    height: 2px;
    margin: 3px 0;
  }
}
/* REVION – force round phone icon with ring */
.navbar.revion-nav .phone-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;
  border: 1px solid #0b1d30 !important;  /* thin dark ring */
  background: transparent !important;
  color: #0b1d30 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* SVG inside: thin stroked phone */
.navbar.revion-nav .phone-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}
/* REVION – final round solid phone icon */
.navbar.revion-nav .phone-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;
  border: 1px solid #0b1d30 !important;  /* thin dark ring */
  background: transparent !important;
  color: #0b1d30 !important;             /* icon color */
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.navbar.revion-nav .phone-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;   /* solid phone */
  stroke: none !important;         /* no outline stroke */
}
/* REVION – force phone icon to be a perfect circle */
.navbar.revion-nav .phone-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;              /* perfect circle */
  border: 1px solid #0b1d30 !important;       /* thin ring */
  background: transparent !important;
  color: #0b1d30 !important;

  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* solid phone inside the circle */
.navbar.revion-nav .phone-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;   /* solid glyph */
  stroke: none !important;
}
/* REVION – mobile-only round phone icon (hidden on desktop) */
@media (max-width: 1199.98px) {
  .navbar.revion-nav #navMobilePhone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;  /* ensures a perfect circle */
    box-sizing: border-box !important;

    border-radius: 50% !important;
    border: 1px solid #000000 !important;
    background: transparent !important;
    color: #162431 !important;

    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-size: 0 !important;  /* hide any stray text */
  }

  .navbar.revion-nav #navMobilePhone svg {
    width: 26px !important;
    height: 26px !important;
    fill: currentColor !important;   /* solid glyph */
    stroke: none !important;
  }
}

/* Desktop: never show the mobile phone icon */
@media (min-width: 1200px) {
  .navbar.revion-nav #navMobilePhone {
    display: none !important;
  }
}
/* REVION – keep logo in same spot when nav-scroll activates (desktop) */
@media (min-width: 1200px) {
  .navbar.revion-nav .logo-wrapper,
  .navbar.revion-nav.nav-scroll .logo-wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    margin-left: 2.5rem !important;  /* match your normal header */
    flex: 0 0 auto !important;
  }

  .navbar.revion-nav .logo,
  .navbar.revion-nav.nav-scroll .logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}
/* REVION – mobile burger: force real hitbox + ensure it's on top */
@media (max-width: 1199.98px){

  /* Your wrapper is absolute; make sure it isn't the only thing getting the pointer */
  .navbar.revion-nav .phone-toggle-wrapper{
    z-index: 5000 !important;
    pointer-events: auto !important;
  }

  /* Force the BUTTON to have an actual clickable box */
  .navbar.revion-nav #mobileToggle{
    position: relative !important;
    z-index: 5001 !important;

    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: auto !important;
  }

  /* Spans should never steal clicks */
  .navbar.revion-nav #mobileToggle span{
    pointer-events: none !important;
  }
}
@media (max-width: 1199.98px){
  .navbar.revion-nav #mobileToggle{
    margin-left: -90px !important; /* more negative = more left */
  }
}
/* REVION – re-align phone icon with burger on mobile */
@media (max-width: 1199.98px){

  /* make the cluster a true flex row and center everything */
  .navbar.revion-nav .phone-toggle-wrapper{
    display: flex !important;
    align-items: center !important;
  }

  /* normalize both hitboxes so their centers match */
  .navbar.revion-nav #navMobilePhone,
  .navbar.revion-nav #mobileToggle{
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  /* if the phone has a border circle, keep it perfectly centered */
  .navbar.revion-nav #navMobilePhone{
    line-height: 1 !important;
  }
}
/* REVION – force phone icon to a TRUE circle (no oval) */
@media (max-width: 1199.98px){

  /* Phone button itself */
  .navbar.revion-nav #navMobilePhone{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 0 !important;      /* KEY: kills text-based height */
    font-size: 0 !important;        /* prevents inline text influence */

    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  /* SVG inside phone */
  .navbar.revion-nav #navMobilePhone svg{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
  }
}
/* REVION – drop phone icon slightly lower on mobile */
@media (max-width: 1199.98px){
  .navbar.revion-nav #navMobilePhone{
    transform: translateY(3px) !important; /* try 2px–4px */
  }
}
:root{
  --revion-gutter: 100px; /* match your logo inset */
}

/* Apply to ALL hero headers */
header.hero-slider,
header.page-hero{
  padding-left: var(--revion-gutter);
  box-sizing: border-box;
  background: #f7f7f7;
}

/* Home slider: keep imagery full-bleed */
header.hero-slider .hero-slide-inner,
header.hero-slider .hero-bg{
  left: calc(var(--revion-gutter) * -1);
  width: calc(100% + var(--revion-gutter));
  position: relative;
}
/* =========================================
REVION - Left gutter (matches logo inset)
Works for home hero slider + all page heroes
Fixes z-index, parallax height gaps, and nav background match
Paste this block at the very bottom of kb.css
========================================= */

:root{
  --revion-gutter: 100px; /* match your logo inset */
  --revion-bg: #f7f7f7;   /* gutter + nav background */
}

@media (max-width: 991.98px){
  :root{ --revion-gutter: 24px; }
}

/* NAV background match (normal + scroll) */
.navbar.revion-nav,
.navbar.revion-nav.nav-scroll,
.navbar.nav-scroll{
  background-color: var(--revion-bg) !important;
  background-image: none !important;
}

/* avoid painting backgrounds on every child */
.navbar.revion-nav .container-fluid{
  background: transparent !important;
}

/* kill seam-makers on scroll */
.navbar.revion-nav.nav-scroll{
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Base: headers can host gutter overlay */
header.hero-slider,
header.page-hero{
  position: relative;
  overflow: hidden;
  background: var(--revion-bg);
}

/* The vertical gutter (always solid) */
header.hero-slider::before,
header.page-hero::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--revion-gutter);
  height: 100%;
  background: var(--revion-bg);
  z-index: 10;
  pointer-events: none;
}

/* HOME SLIDER: keep slide imagery full bleed while header has a gutter */
header.hero-slider .hero-slide-inner,
header.hero-slider .hero-bg{
  position: relative;
  left: calc(var(--revion-gutter) * -1);
  width: calc(100% + var(--revion-gutter));
}

/* Keep slider content above imagery */
header.hero-slider .hero-content,
header.hero-slider .swiper-button-prev,
header.hero-slider .swiper-button-next{
  position: absolute;
  margin-top: 50px;
  z-index: 20;
}

/* Keep slider arrows out of the gutter */
header.hero-slider .hero-prev{
  left: calc(var(--revion-gutter) + -90px) !important;
}
header.hero-slider .hero-next{
  right: 10px !important;
}

/* PAGE HERO: stacking context so z-index behaves */
header.page-hero{
  isolation: isolate;
}

/* If the parallax uses background-image */
header.page-hero .parallax{
  background-size: cover !important;
  background-position: center !important;
}

/* Overlay above image, below gutter and text */
header.page-hero .page-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* If your theme uses data-overlay-dark pseudo overlay, keep it below gutter/text */
header.page-hero[data-overlay-dark]::before{
  z-index: 2 !important;
}

/* Caption always on top */
header.page-hero .page-hero__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 30 !important;
}
/* REVION - page hero gutter always above parallax */
:root{
  --revion-gutter: 100px;
  --revion-bg: #f7f7f7;
}
@media (max-width: 991.98px){
  :root{ --revion-gutter: 24px; }
}

header.page-hero{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--revion-bg) !important;
}

/* if the plugin sets z-index on inline styles, this still wins */
header.page-hero .parallax__container{ z-index: 0 !important; }
header.page-hero .parallax{ z-index: 0 !important; }

/* overlay above image but below gutter/text */
header.page-hero .page-hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* if theme uses a pseudo overlay */
header.page-hero[data-overlay-dark]::before{
  z-index: 1 !important;
}

/* gutter sits on top of everything */
header.page-hero::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--revion-gutter);
  height: 100%;
  background: var(--revion-bg);
  opacity: 1 !important;
  z-index: 9999 !important;
  pointer-events: none;
}

/* text always on top */
header.page-hero .page-hero__caption{
  position: relative !important;
  z-index: 10000 !important;
}
@media (min-width: 991.98px){
  header.hero-slider,
  header.page-hero{
    position: relative;
  }

  .revion-gutter-phone{
    position: absolute;
    left: 35px;
    top: 0; /* JS will set the real top */
    width: var(--revion-gutter);
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.08em;
    font-family: 'arial', sans-serif;
    font-size: 18px;
    color: #000000;
    font-weight: 400;
    z-index: 99999;
    pointer-events: auto;
    display: block;
    transition: top 160ms ease;
  }

  .revion-gutter-phone:hover{
    text-decoration: none;
    color: #858383 !important;
  }
}

@media (max-width: 991.98px){
  .revion-gutter-phone{ display: none !important; }
}
@media (max-width: 991.98px){
  header.hero-slider .hero-prev{
    left: calc(var(--revion-gutter) - 13px) !important;
  }
}
.navbar.revion-nav .nav-find-home{
  font-weight: 300 !important;
  font-size: 25px !important;
  position: relative;
  top: -5px; /* nudge up - adjust to -2px to -6px */
}
/* Find Your Home turns white when the mobile panel is open */
#mobileNav[aria-hidden="false"] ~ #desktopNav .nav-find-home,
#mobileNav.is-open ~ #desktopNav .nav-find-home,
body.mobile-nav-open .navbar.revion-nav .nav-find-home{
  color: #fff !important;
}
/* REVION - Page hero gutter + correct layering (hardened) */
:root{ --revion-gutter: 120px; }
@media (max-width: 991.98px){ :root{ --revion-gutter: 0px; } }

header.page-hero{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;   /* key: new stacking context */
}

/* left gutter */
header.page-hero::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width: var(--revion-gutter);
  height:100%;
  background:#fff;
  z-index: 40;
  pointer-events:none;
}

/* full-bleed bg into gutter */
header.page-hero .parallax{
  left: calc(var(--revion-gutter) * -1) !important;
  width: calc(100% + var(--revion-gutter)) !important;
}

/* overlays above image */
header.page-hero .page-hero__overlay{
  position:absolute !important;
  inset:0 !important;
  z-index: 20 !important;
}
header.page-hero[data-overlay-dark]::before{
  z-index: 20 !important;
}

/* caption ALWAYS above everything */
header.page-hero .page-hero__caption{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom: 1rem !important;
  z-index: 60 !important;
}
header.page-hero .page-hero__title{
  position: relative !important;
  z-index: 61 !important;
}
/* Mobile panel open: force the top nav action links to white */
body.nav-open .navbar .nav-actions .navbar-nav .nav-link,
body.mobile-nav-open .navbar .nav-actions .navbar-nav .nav-link,
#mobileNav.mobile-nav-panel.open ~ nav.navbar .nav-actions .navbar-nav .nav-link,
#mobileNav.is-open ~ nav.navbar .nav-actions .navbar-nav .nav-link,
#mobileNav[aria-hidden="false"] ~ nav.navbar .nav-actions .navbar-nav .nav-link{
  color:#fff !important;
}
/* Mobile panel open: turn ALL topbar/nav links white (not just Find Your Home) */
body.nav-open .navbar.revion-nav #leftNav .nav-link,
body.nav-open .navbar.revion-nav #desktopNav .nav-link,
body.nav-open .navbar.revion-nav .nav-actions .navbar-nav .nav-link,
body.mobile-nav-open .navbar.revion-nav #leftNav .nav-link,
body.mobile-nav-open .navbar.revion-nav #desktopNav .nav-link,
body.mobile-nav-open .navbar.revion-nav .nav-actions .navbar-nav .nav-link{
  color:#fff !important;
}

@media (max-width: 991.98px) {
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
    }
}
@media (max-width: 992px) {
    #gallery .gallery-c__container, #gallery .gallery-c__list, #gallery .gallery-c__row, #gallery .gallery-c__item {
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ================================
   REVION GUTTER
   Home page preserved + subpage fix
   ================================ */

.navbar.revion-nav,
.navbar.revion-nav.nav-scroll{
  position: relative;
  z-index: 200 !important;
}

header.hero-slider,
header.page-hero{
  position: relative;
}

.revion-gutter-rail{
  position: absolute;
  left: 1px;
  top: 120px;
  width: var(--revion-gutter);
  z-index: 20 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: none !important;
  pointer-events: auto;
  overflow: visible !important;
}

/* hide whole gutter rail on mobile/tablet width */
@media (max-width: 1199.98px){
  #gutterPhoneLink{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* hide address only on shorter viewports */
@media (max-height: 992px){
  #gutterAddressLink{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #gutterAddressLink .gutter-address-text{
    display: none !important;
  }
}

/* hide address on narrower desktop/tablet widths */
@media (max-width: 1180px){
  #gutterAddressLink{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #gutterAddressLink .gutter-address-text{
    display: none !important;
  }
}

/* kill theme transforms that flip the rail wrapper only */
#gutterPhoneLink{
  transform: none !important;
}

/* PHONE: reserve vertical space so socials MUST sit below */
#gutterTelLink{
  order: 0 !important;
  position: relative !important;
  display: block !important;
  height: 60px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: #162431 !important;
  overflow: visible !important;
}

/* Center the rotated number INSIDE the reserved box */
#gutterTelLink .gutter-phone-text{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, 50%) rotate(90deg) !important;
  transform-origin: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.08em !important;
  color: #162431 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  writing-mode: horizontal-tb !important;
}

#gutterTelLink:hover{
  color: #858383 !important;
}

/* SOCIALS: always below phone */
#gutterPhoneLink .gutter-social{
  order: 1 !important;
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

/* only reset socials/icons, not phone/address text */
#gutterPhoneLink .gutter-social,
#gutterPhoneLink .gutter-social *,
#gutterPhoneLink .revion-gutter-social,
#gutterPhoneLink .revion-gutter-social *{
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

#gutterPhoneLink .revion-gutter-social{
  color: #162431 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#gutterPhoneLink .revion-gutter-social:hover{
  color: #858383 !important;
}

#gutterPhoneLink .revion-gutter-social i{
  font-size: 22px !important;
}

/* legacy phone link class - KEEP for homepage behavior */
.revion-gutter-phone{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--revion-gutter);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 18px;
  color: #000000;
  z-index: 1101;
  pointer-events: auto;
  display: block;
  font-family: 'arial', sans-serif;
  transition: top 160ms ease;
  overflow: visible !important;
}

header.page-hero #gutterTelLink{
  height: 120px !important;
  width: 120px !important;
  overflow: visible !important;
}

header.page-hero #gutterTelLink .gutter-phone-text{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}

/* MOBILE NAV: make the RIGHT "Get in Touch" column wider */
@media (min-width: 768px){
  #mobileNav .mobile-nav-inner{
    display: flex !important;
    align-items: flex-start !important;
  }

  #mobileNav .mobile-nav-left{
    flex: 0 0 52% !important;
    max-width: 52% !important;
  }

  #mobileNav .mobile-nav-right{
    flex: 0 0 48% !important;
    max-width: 48% !important;
  }
}

/* ADDRESS: reserve vertical space so it sits like the phone */
#gutterAddressLink{
  order: 1 !important;
  position: relative !important;
  display: block !important;
  height: 260px !important;
  width: 100% !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: #162431 !important;
  overflow: visible !important;
}

/* Center the rotated address inside its box */
#gutterAddressLink .gutter-address-text{
  position: absolute !important;
  left: 50% !important;
  top: 80% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.03em !important;
  color: #162431 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  writing-mode: horizontal-tb !important;
}

#gutterAddressLink:hover{
  color: #858383 !important;
}

/* ==========================================
   SUBPAGE GUTTER ONLY
   restore visibility first
   ========================================== */

header.page-hero{
  position: relative !important;
  overflow: visible !important;
}

header.page-hero .page-hero__caption,
header.page-hero .page-hero__bar,
header.page-hero .page-hero__title{
  position: relative;
  z-index: 5;
}

header.page-hero > #gutterPhoneLink.revion-gutter-rail{
  position: absolute !important;
  left: 8px !important;
  width: 92px !important;
  height: 430px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  z-index: 99999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

header.page-hero > #gutterPhoneLink.revion-gutter-rail > #gutterTelLink.revion-gutter-phone{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 92px !important;
  height: 92px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

header.page-hero > #gutterPhoneLink.revion-gutter-rail > #gutterTelLink .gutter-phone-text{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  display: block !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #162431 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

header.page-hero > #gutterPhoneLink.revion-gutter-rail > #gutterAddressLink{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 92px !important;
  height: 260px !important;
  display: block !important;
  margin: 34px 0 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

header.page-hero > #gutterPhoneLink.revion-gutter-rail > #gutterAddressLink .gutter-address-text{
  position: absolute !important;
  left: 50% !important;
  top: 74% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  display: block !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #162431 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
}#navMobilePhone,
#navMobilePhone svg,
#navMobilePhone svg g,
#navMobilePhone svg path{
  color: inherit !important;
  fill: currentColor !important;
}

#navMobilePhone{
  color:#000 !important;
  border-color:#000 !important;
}

body.nav-open #navMobilePhone,
body.mobile-nav-open #navMobilePhone{
  color:#fff !important;
  border-color:#fff !important;
}

body.nav-open #navMobilePhone svg,
body.nav-open #navMobilePhone svg g,
body.nav-open #navMobilePhone svg path,
body.mobile-nav-open #navMobilePhone svg,
body.mobile-nav-open #navMobilePhone svg g,
body.mobile-nav-open #navMobilePhone svg path{
  color:#fff !important;
  fill:#fff !important;
}
body.nav-open .navbar.revion-nav #navMobilePhone,
body.mobile-nav-open .navbar.revion-nav #navMobilePhone{
  color:#fff !important;
  border: 1px solid #fff !important;
}
/* Footer trio layout */
.footer-trio{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:502px;
  width:100%;
  margin-top:10px;
}

.footer-trio__side,
.footer-trio__center{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.footer-trio__side--left{
  justify-content:flex-end;
  gap:12px;
}

.footer-trio__side--right{
  justify-content:flex-start;
}

.footer-trio__center{
  justify-content:center;
}

/* Left badges */
.footer-trio__side--left,
.footer-trio__side--left i,
.footer-jmh__badgeSvg{
  color:#2b2b2b !important;
  opacity:1 !important;
}

.footer-jmh__badgeSvg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:middle;
}

.footer-jmh__badgeSvg svg{
  display:block;
  width:1.6em !important;
  height:1em !important;
  fill:currentColor;
}

.footer-trio i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:middle;
  font-size:1rem;
}

/* Center logo */
.footer-brand-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  transform:none !important;
}

.footer-brand-link:hover,
.footer-brand-link:focus{
  text-decoration:none !important;
  transform:none !important;
  opacity:1 !important;
}

.footer-brand{
  display:block;
  width:auto;
  height:64px;
  max-width:none;
  opacity:1 !important;
  filter:none !important;
}

/* Right powered by */
.powered-by-link,
.powered-by-link:hover,
.powered-by-link:focus{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none !important;
  color:#2b2b2b !important;
  white-space:nowrap;
  transform:none !important;
  top:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

.powered-by-link small{
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.08em;
  line-height:1;
  color:#2b2b2b !important;
}

.powered-logo{
  height:20px;
  width:auto;
  display:block;
  opacity:1 !important;
  filter:none !important;
}

/* Mobile */
@media (max-width: 767.98px){
  .footer-trio{
    flex-direction:column;
    gap:18px;
  }

  .footer-trio__side--left,
  .footer-trio__side--right,
  .footer-trio__center{
    justify-content:center;
  }
}
.footer-copyright{
  color:#2b2b2b !important;
  font-weight:500 !important;
  font-size:.75rem;
  line-height:1.8;
  opacity:1 !important;
}
.footer-recaptcha__text{
  color:#2b2b2b;
  font-size:.75rem;
  line-height:1.6;
  font-weight:500;
}

.footer-recaptcha__link{
  color:#2b2b2b;
  text-decoration:none;
}

.footer-recaptcha__link:hover,
.footer-recaptcha__link:focus{
  color:#2b2b2b;
  text-decoration:underline;
}
#contact .form-label{
  color:#4a4a4a;
}
@media (max-width: 991.98px){
  .navbar.revion-nav{
    padding: 55px 0 55px 0;
  }

  .logo-wrapper{
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #siteLogo,
  .navbar .logo-img{
    max-height: 80px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
.u-foot-cta__right-inner .u-foot-cta__col:last-child{
  padding-left: 2px;
}  
}

@media (max-width: 1499.98px){
  .u-foot-cta__hours-row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .u-foot-cta__hours-time{
    text-align: left;
  }

  /* space between the two day blocks */
  .u-foot-cta__hours-row + .u-foot-cta__hours-row{
    margin-top: 8px;
  }
}
/* keep navbar/header untouched and above gutter */
.navbar.revion-nav,
.navbar.revion-nav.nav-scroll{
  z-index: 500 !important;
}
/* final override: hide gutter on mobile/tablet everywhere, including subpages */
@media (max-width: 1199.98px){
  #gutterPhoneLink,
  header.page-hero > #gutterPhoneLink.revion-gutter-rail{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
.footer-modern #openPetPolicy.footer-link{
  font-size: 1.0rem !important;
}
.leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    margin: 0;
    opacity: .5 !important;
}
.fp-disclaimer{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.fp-disclaimer p{
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: #7d7d7dc9;
}
.u-foot-cta__text .u-foot-cta__social + .u-foot-cta__social {
  margin-left: 18px;
}
/* Mobile footer CTA column cleanup */
@media (max-width: 575.98px){
  .u-foot-cta__right-inner{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
    padding: 40px 26px 28px !important;
    align-items: flex-start !important;
  }

  .u-foot-cta__col{
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  .u-foot-cta__col:nth-child(3){
    grid-column: 1 / -1 !important;
  }

  .u-foot-cta__label{
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
  }

  .u-foot-cta__text,
  .u-foot-cta__text p,
  .u-foot-cta__text a,
  .u-foot-cta__link{
    font-size: 0.78rem !important;
    line-height: 1.65 !important;
  }

  .u-foot-cta__hours{
    margin-top: 8px !important;
  }

  .u-foot-cta__hours-row{
    display: block !important;
    gap: 0 !important;
    margin-bottom: 10px !important;
  }

  .u-foot-cta__hours-day,
  .u-foot-cta__hours-time{
    display: block !important;
    text-align: left !important;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
  }

  .u-foot-cta__hours-time{
    margin-top: 2px !important;
  }
}