.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;
}

.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;

}  
}

.navbar {
    position: absolute;
    margin-top: 0px;
    left: 0;
    top: 0;
    width: 100%;
    background: #0c68b800;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 90px;
    border: none;
    transition: 1s;
    padding: 48px 0;
}
.nav-scroll {
    background: #fff;
    padding: 68px 0;
    position: fixed;
    /* position: sticky; */
    top: -100px;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    border: none;
    margin-top: 0;
    -webkit-box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
    box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.wave-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 290px;
    z-index: 2;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

/* Common SVG styling */
.wave-header svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Show desktop by default */
.wave-desktop {
  display: block;
}
.wave-mobile {
  display: none;
}
.logo-img {
    width: 340px;
    margin-bottom: 0px;
    margin-top: 15px;
}
.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: 16px;
        color: #fff;
        text-shadow: 1px 1px #1b1b1b63;
    }
    #mobileNav .footer-social i {
        display: inline-block !important;
        font-size: 16px;
        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;
    } 
    .logo-img {
        margin-bottom: 0px;
        margin-top: auto;
        width: 220px;
    }
    .nav-scroll .logo-img {
        width: 188px !important;
        margin-top: 10px;
    }
    }
    .volunteer-icon {
    width: auto !important;
    max-width: 160px;
    height: auto;
    display: inline-block;
    margin-bottom: 85px;
    position: relative;
    z-index: 2;
} 
     
}
@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: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(0deg, rgb(0 0 0 / 42%) 0%, rgb(56 72 97 / 0%) 100%);
}

/* XL and up: put menu just LEFT of the toggler */
@media (min-width:1200px){
  .navbar .logo-wrapper { order: 1; }          /* left */
  #desktopNav           { order: 2; margin-left: auto !important; } /* pushes to right */
  .phone-toggle-wrapper { order: 3; margin-left: 0 !important; }    /* neutralize ms-auto */
}
/* center the logo regardless of other items */
.navbar .container-fluid{ position:relative; }
.navbar .logo-wrapper{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center;
  z-index:1200;
}

/* desktop ordering: Home (left)  Logo (center)  Right links  Hamburger */
@media (min-width:1200px){
  #leftNav{ order:1; z-index: 1200; }
  .navbar .logo-wrapper{ order:2; z-index: 1102;}
  #desktopNav{ order:3; margin-left:auto; z-index: 1102; }      /* pushes hamburger to edge */
  .phone-toggle-wrapper{ order:4; margin-left:0 !important; }
}

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

#leftNav .nav-link:hover,
#desktopNav .nav-link:hover {
    text-decoration: underline; /* add underline on hover */
}


/* 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: 8px !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: 1px 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.3rem !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.0rem;            /* slight emphasis over the address */
}
  
.navbar .navbar-nav .nav-link:hover {
  color: #f9f2ec !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
}
/* Mobile: force full-screen hero */
@media (max-width: 1199.98px){

  /* 1) the hero section itself is a full viewport tall */
  header.header { 
    height: 70dvh !important;      /* dynamic vh for iOS/Chrome */
    min-height: 70dvh !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: #fff; background:#232323; }
.footer-modern .footer-link: color:#4e7b81; text-decoration:none; }
.footer-modern .footer-link:hover{ color:#fff; text-decoration:underline; }

.footer-modern .footer-social{
  width:38px; height:38px; border:1px solid #ffffff4d;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; opacity:.9;
  border-radius: 4px;
}
.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:.85; }

/* 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: #232323;
  text-transform: var(--heading-text-transform);
  font-size: 1.5rem;
  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:#f9f5f7; color:#23232361;
  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:#527c7f; --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: #fbfbfb, var(--bs-bg-opacity)) !important;
  padding:115px 0;
}
.u-SubPage{
  --bs-bg-opacity:1;
  background-color: #f7f3f1 !important;
  padding:95px 0;
}
.u-SubPageFloor{
  --bs-bg-opacity:1;
  background-color: #f7f3f1 !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: 65dvh; }  /* 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:rgba(0,0,0,.15); }
.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 (? keep this single definition) */
.page-hero__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  z-index: 2;                   /* above overlay */
  padding: 0 1rem;
  text-align: center;
}

/* Fancy double-line with centered title */
.page-hero__bar{
  max-width: 1000px;
  margin: 2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 2rem);
  color: #f4fcfd;
  position: relative;
  text-align: center;
}
.page-hero__bar::before,
.page-hero__bar::after{
  content: "";
  flex: 1 1 0;
  height: 1px;                           /* base line */
  background: #fff;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 4px 0 #f4fcfd;            /* second parallel line (offset) */
}
.page-hero__bar::before{ margin-right: 1rem; }
.page-hero__bar::after{  margin-left: 1rem;  }
.page-hero__bar{ max-width: 100%; margin: 2rem 0; /* no centering margin needed now */ padding-top: clamp(12px,1.2vw,18px); /* space between line and text */ display: flex; align-items: center; justify-content: center; color: #fff; position: relative; text-align: center; gap: 0; /* no gaps needed */ } /* remove the old side lines */ .page-hero__bar::after{ content: none; } /* single thin line across the top (with small left/right inset) */ .page-hero__bar::before{ content: ""; position: absolute; top: calc(50% - 58px) !important; left: clamp(12px,4vw,40px); right: clamp(12px,4vw,40px); height: 1px; background: #d9dfdf; border-radius: 2px; box-shadow: none; /* no second parallel line */ pointer-events: none; }
/* Title */
.page-hero__title{
  margin: 0;
  padding: 0 .75rem;                      /* spacing around text */
  color: #cbc3bb;
  line-height: 1.1;
  /* font-size: clamp(28px, 3.2vw, 48px);  keep your sizing if you prefer */
}

/* desktop might be: top: calc(50% - 10px) */
@media (max-width: 992px){
  /* define mobile spacing + vertical offset */
  .page-hero__bar{
    position: relative;
    --bar-gutter: 1px;  /* side margins for the line */
    --bar-lift: 2px;     /* how far above the title the line sits */
  }

  .page-hero__bar::before{
    /* clear any desktop centering */
    left: auto; right: auto; margin: 0;
    background: #fff;

    /* stretch inside container with equal gutters */
    left: var(--bar-gutter);
    right: var(--bar-gutter);
    width: auto;

    /* position vertically; only translate on Y */
    top: calc(50% - 32px) !important;
    transform: translateY(calc(-50% - var(--bar-lift)));
  }

  .page-hero__caption { bottom: 0 !important; }  /* `.0rem` is fine but use 0 for clarity */
  .page-hero__title   { font-size: 26px !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: #f7f3f1;
  padding: 2.8rem;   /* border thickness */
}

/* inner white (or cream) panel */
.u-bio .pattern-inner{
    background: #f7f3f1;
    text-align: center;
    padding: 4rem 2rem;
    box-shadow: 0 6px 18px rgb(0 0 0 / 34%) !important;
    background-image: url(../img/pattern_vintage_paper.jpg);
}

/* 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; }
}
.u-foot-cta{
    background: #d1c9be;
    padding: .1rem;
}

/* inner white (or cream) panel */
.u-foot-cta .pattern-inner{
    text-align: center;
    padding: 2rem 2rem;
    background: #d1c9be;
    box-shadow: 0 6px 18px rgb(0 0 0 / 34%) !important;
    opacity: 1;
}

/* responsive inner padding */
@media (min-width: 992px){
  .u-foot-cta .pattern-inner{ padding: 3rem 4rem; }
}
@media (max-width: 991.98px){
  .u-foot-cta .pattern-inner{ padding: 4rem 2rem; }
}
/* 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) {  /* Bootstrap 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) { /* Bootstrap'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 #23232361;
}

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

/* Each row */
.intro-action{
  padding: 0;                       /* moved padding to link so the whole row is clickable */
  background: #f7f3f170;
  box-shadow: 0 2px 13px rgb(0 0 0 / 34%) !important;
}
/* separator between rows */
.intro-action + .intro-action{
  border-top: 1px solid #23232361;
}

/* 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: #232323;
  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: #a98279;
  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: #f7f3f170;
  border: 1px solid #23232361;
  border-bottom: 0px solid #546669;
  box-shadow: 0 2px 13px rgb(0 0 0 / 34%) !important;
}
/* separator between rows */
.intro2-action + .intro2-action{
  border-top: 0px solid #546669;
  border: 1px solid #23232361;
}

/* 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: #232323;
  font-size: 1.2rem;
  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: #a98279;
  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 #23232361;
  }

  /* 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: #81604c;
  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: #af9e94;
  color: #c9d5db;
}
.nav-tabs .nav-link.active {
  background-color: #232323;
  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, #6c757d, #bf9866);
    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: #81604c;
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.load-more-btn:hover {
  background: #222;
}

/* 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:72px !important;
  height:72px !important;
  object-fit:contain;
}
/* Dropdown */
#categoryDropdown {
  background-color: #15392f;
  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: #3d5750;
  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, #3a4128);
  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: #898678; /* Theme background */
  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: #fff; /* 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: #47351e;
  background: #d1c3b02e;
  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: 3.0rem !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 {
  display: none;
  background: linear-gradient(0.25turn, #a17977, #be918e, #c79a97);
  opacity: .9
}
.section-divider.rectangle-amentity {
  display: block;
  width: 100%;
  height: 20px;
  background: url("../img/pattern-1-black.svg") repeat-x center;
  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: #81604c;
  color: #fff;
  padding: 6px 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 2px;
  font-size: 18px;
}

.tour-home-btn {
    background-color: #6f6d61;
    color: #fff;
    padding: 3px 13px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 2px;
    font-size: 15px;
    border: 1px solid #999;
}
/* ============ 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 4px;    /* 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: 32px !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: .50rem 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: #6f6d61;
    color: #243551;
  }
  #contact .section-title {
    font-size: 26px !important;
}  

}

/* --- Amenities section styles --- */
#amenities .heading-amenities {
  font-size: 24px !important;  /* default for large screens */
  font-weight: 600;
  color: #232323;              /* tasteful olive like your mock */
  letter-spacing: .3px;
}

#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 #bf986670;
  color: #111;
  font-size: 1.05rem;
  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: 22px !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: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    padding: 40px 0;   /* smaller padding on mobile */
  }
}

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

/* Remove outside borders on the two top cards */
#contact .contact-card { 
  background:#fbf8f8; 
  border:0; 
  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:#6c757d;
  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 #81604c; }

/* ===== Hover backgrounds ===== */
#contact .contact-row {
  color:#4d4a46;
  transition: background-color .2s ease, color .2s ease;
  font-size: 18px;
  font-weight: 600;
}
#contact .contact-row:hover {
  background-color:#f3f1ed;
  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:500; }
#contact .hours-table { 
  border-top:1px solid #81604c; 
  border-bottom:1px solid #81604c; 
}
#contact .hours-row { 
  display:flex; 
  justify-content:space-between; 
  padding:.9rem 0; 
  border-bottom:1px solid #81604c; 
}
#contact .hours-row:last-child { border-bottom:0; }
#contact .hours-day { color:#232323; font-weight: 600; }
#contact .hours-time { color:#232323; font-weight: 600; }

/* ===== Form ===== */
#contact .form-control { 
  background:#fff; 
  border:1px solid #81604c; 
  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;

  /* size & spacing */
  width: auto !important;        /* stop 100% width */
  min-width: 220px;              /* tweak as you like */
  padding: 12px 24px;

  /* visuals (same family as intro actions) */
  background: #81604c;
  color: #fff !important;
  border: 1px solid #222;
  border-radius: 2px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .5px;
  text-decoration: none;

  /* center it */
  margin: 0 auto;

  /* behavior */
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease;
}

#contact .btn-submit:hover,
#contact .btn-submit:focus {
  background: #f9fbfd;          /* same hover bg as intro action */
  color: #222!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:#af9e94; flex:0 0 auto; }
#contact .contact-heading {
  font-size:1.5rem;
  line-height:1.3;
  color:#232323;
}
@media (min-width:992px){
  #contact .contact-heading { font-size:1.75rem; }
}
/* 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:#6c757d; 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 #e6e6e6; 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:#898678; }
#floorplans .fp-meta{ color:#6c757d; 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 #898678; cursor:pointer;
}
#floorplans .fp-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #898678; cursor:pointer;
}

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

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


/* Base (hero/top of page) */
.navbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent;
  padding: 0;
  border: none;
  height: 140px !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 base + smooth resize */
#siteLogo, .navbar .logo-img{
  position:static !important;
  height:110px;
  width:auto;
  display:block;
  transition:height .3s ease, margin .3s ease;
}

/* 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:110%;
  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:.5rem 1rem;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  text-shadow:1px 1px #1b1b1b63;
}
.nav-actions .navbar-nav .nav-link:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color:#dbd3c8;
}
/* Desktop primary nav */
.nav-primary a.active{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Keep it underlined on hover/focus too */
.nav-primary a.active:hover,
.nav-primary a.active:focus{
   text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Mobile menu (optional) */
#mobileNav .nav-link.active{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Full-height divider BEFORE "Apply Now" */
.nav-actions .nav-item.apply-item{
  position:relative;
  margin-left:2px;
  padding-left:24px;
}
.nav-actions .nav-item.apply-item::before{
  content:"";
  display: none;
  position:absolute;
  left:0;
  top:-1px;                               /* kiss the top hairline */
  bottom:-1px;                            /* kiss the bottom hairline */
  width:1px;
  background:rgba(255,255,255,.45);
}

/* Apply Now pill */
.apply-btn{
  display:inline-block;
  padding:.5rem 1rem;
  line-height:1;
  border:1px solid #bfad9a;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:2px;
}
.apply-btn:hover{ background:rgba(255,255,255,.1); }

/* 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:rgba(255,255,255,.25);
  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;
  height:110px !important;
  background:#f7f3f1 !important;
  box-shadow:0 5px 15px rgba(45,56,84,.15);
  border-bottom:1px solid rgba(0,0,0,.08);
  z-index:2000;
}

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

.navbar.nav-scroll .nav-actions .nav-link{ color:#fff !important; text-shadow:none; }
.navbar.nav-scroll .apply-btn{ color:#fff !important; border-color:#e1ebe2ab; }
.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; }
}
/* ===== MOBILE LOGO SIZING ===== */
@media (max-width: 1199.97px) {
  /* Base (hero/top of page) */
  #siteLogo,
  .navbar .logo-img {
    height: 60px !important;   /* adjust as desired */
    margin: 0 auto;            /* keep it centered if needed */
    transition: height .3s ease;
  }
.navbar {
    height: 80px !important;
}
.navbar.nav-scroll {
    height: 82px !important;
}
  /* When scrolled */
  .navbar.nav-scroll #siteLogo,
  .navbar.nav-scroll .logo-img {
    height: 53px !important;   /* smaller for sticky nav */
    margin-top: 10px;          /* optional tweak for vertical balance */
    margin-left: -5px;
  }
  .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;
  }
}
/* Band style */
.footer__callout {
  background: #3f4c57;
  padding: 85px 0;
}
/* Title wrapper */
.callout__title {
  color: #232323;
  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.0rem !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.24rem !important;
        font-weight: 500;
        line-height: 1.6rem;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        text-align: center;
        white-space: nowrap;
  }
}
/* MOBILE FIRST (base) */
.h2-dark{
  color:#232323;
  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: 2.4rem !important;            /* your desktop size */
  }
}
/* Never stretch the logo */
#siteLogo,
.navbar .logo-img{
  width: auto !important;      /* kill any fixed widths */
  height: auto;                /* keep intrinsic ratio */
  max-height: 85px;           /* base cap */
  flex: 0 0 auto;              /* don't let flex stretch it */
}

/* 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: 80px;            /* desktop scroll cap; adjust if needed */
  margin-bottom: 10px;         /* your existing spacing, optional */
}

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

/* Safety: if any legacy rule used width:100% */
.logo-wrapper img{ max-width: none; }
.fw-bold {
    font-weight: 500 !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: #f3f1ed;
  color: #9b9184;
}
/* ---------- 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 !important;      /* smaller text */
    font-weight: 500;
  }

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

  /* clamp / expand text */
  .intro-text{
    display: -webkit-box;
    -webkit-line-clamp: 4;       
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 7em; 
    font-size: .9rem !important;              
  }
  .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: #232323;
    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: 1.80em;
  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: #f9f2ec;
    color: #232323; 
}
.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;
}
/* ===== DESKTOP TOPBAR — FINAL, CLEAN ===== */
.topbar{
  position:absolute; top:0; left:0; right:0;
  height:44px; padding:0 24px;
  display:flex; align-items:center; gap:16px;
  white-space:nowrap;               /* prevent wrap into logo row */
  background:transparent;
  border-bottom:0px solid rgba(255,255,255,.75);
  z-index:1201;
}
.topbar a{
  color:#fff; text-decoration:none; font-size:14.5px; letter-spacing:.2px;
}
.topbar a:hover{ color:#dcf2f5;}

/* Left group: Address | full-height divider | Phone */
.tb-left{
  flex:0 0 auto;
  position:relative;
  padding-right:18px; margin-right:18px;
  display:flex; align-items:center;
}
.tb-left::after{
  content:"";
  position:absolute; top:0; bottom:0; right:-1px; /* full height of topbar */
  width:1px; background:rgba(255,255,255,.45);
}

/* Phone (left aligned) */
.tb-center{
  flex:1 1 auto; text-align:left;
  display:none; align-items:center;
}

/* Right group aligned to far right */
.tb-right{
  flex:0 0 auto; margin-left:auto;
  display:none; align-items:center; gap:18px;
}
/* Full-height divider between Residents | Find Your Home */
.tb-right .tb-link{
  display:flex; align-items:center; height:44px; /* ensures full-height border */
}
.tb-right .tb-link + .tb-link{
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.45);
}

/* Optional pill style (if used inside .tb-right later) */
.tb-apply{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; line-height:1;
  border-radius:2px; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08); font-weight:600; letter-spacing:.2px;
}
.tb-apply:hover{ background:rgba(255,255,255,.16); text-decoration:none; }

/* Push logo/action row down below topbar */
@media (min-width:1200px){
  .navbar .container-fluid{ padding-top:60px; }
}

/* Hide entire topbar once header is scrolled */
.nav-scroll .topbar{ display:none !important; }

/* No extra hairline under the bar on desktop */
@media (min-width:1200px){
  .nav-divider{ display:none !important; }
}

/* ===== Desktop Apply (left of hamburger) visible + styled ===== */
@media (min-width:1200px){
  .nav-actions{ display:flex !important; }
}
.nav-actions .apply-item{ border-left:none !important; }
.apply-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; line-height:1; color:#fff;
  border:1px solid rgba(255,255,255,.55);
  background:#1f573d36; border-radius:2px;
  font-weight:500; letter-spacing:.2px; text-decoration:none;
}
.apply-btn:hover{ background:rgba(255,255,255,.16); text-decoration:none; }

/* Keep spacing near hamburger */
.phone-toggle-wrapper{ margin-left:12px; }

/* Hide topbar on tablets/phones */
@media (max-width:1199.98px){
  .topbar{ display:none !important; }
}
/* ===== Align logo and Apply on the same line (desktop) ===== */
@media (min-width:1200px){
  :root{
    --topbar-h: 44px;   /* your topbar height */
    --nav-row-h: 64px;  /* height of the logo/apply row */
    --apply-h: 38px;    /* visual height of the Apply button */
  }

  /* Keep the topbar, then add consistent space for the logo/apply row */
  .navbar .container-fluid{
    padding-top: var(--topbar-h);
    min-height: calc(var(--topbar-h) + var(--nav-row-h));
  }

  /* Make the logo, apply group, and hamburger share the same row height */
  .logo-wrapper,
  .nav-actions,
  .phone-toggle-wrapper{
    height: var(--nav-row-h) !important;
    display: flex;
    align-items: center;
  }

  /* Visually match logo to the Apply button line */
  .logo-img{
    display:block;
    max-height: calc(var(--apply-h) + 2px);
  }
} /* <-- add this closing brace */

/* Optional: if the header shrinks on scroll, keep alignment tight */
@media (min-width:1200px){
  .nav-scroll .container-fluid{
    min-height: calc(var(--topbar-h) + var(--nav-row-h)); /* keep baseline */
  }
}

/* --- variables for consistency --- */
@media (min-width:1200px){
  :root{
    --topbar-h: 44px;     /* height of the topbar */
    --nav-row-h: 64px;    /* height of the logo/apply row */
    --apply-h: 38px;
  }
}

/* Base (not scrolled): space for topbar + logo row */
@media (min-width:1200px){
  .navbar .container-fluid{
    padding-top: var(--topbar-h);
    min-height: calc(var(--topbar-h) + var(--nav-row-h));
    display:flex; align-items:center;
  }
  .logo-wrapper,
  .nav-actions,
  .phone-toggle-wrapper{
    height: var(--nav-row-h); display:flex; align-items:center;
  }
  .logo-img{ display:block; max-height: calc(var(--apply-h) + 2px); }

  /* kill any manual bump that sneaked in the HTML */
  .logo-wrapper.mt-4{ margin-top:0 !important; }
}

/* --- SCROLLED STATE FIXES --- */
@media (min-width:1200px){
  .nav-scroll .topbar{ display:none !important; }

  .nav-scroll .container-fluid{
    padding-top: 0 !important;
    min-height: var(--nav-row-h) !important;
    align-items: center;
  }

  .nav-scroll .phone-toggle-wrapper{ display:none !important; }

  .nav-scroll .nav-actions{
    margin-left:auto !important;
    display:flex !important;
    align-items:center;
  }
}


/* Dividers: make sure they remain full-height of the topbar */
.tb-left{ position:relative; padding-right:18px; margin-right:18px; display:flex; align-items:center; }
.tb-left::after{ content:""; position:absolute; top:0; bottom:0; right:-1px; width:1px; background:rgba(255,255,255,.45); }
.tb-right .tb-link{ display:flex; align-items:center; height:44px; }
.tb-right .tb-link + .tb-link{ padding-left:18px; border-left:1px solid rgba(255,255,255,.75); }

@media (min-width:1200px){
#siteLogo, .navbar .logo-img {
    width: auto !important;
    height: auto;
    max-height: 85px;
    flex: 0 0 auto;
    margin-top: 85px;
}
}
/* Desktop inline nav that shows on scroll */
.nav-primary{
  list-style:none; margin:0; padding:0;
  gap:28px;
}
.nav-primary li{ margin:0; padding:0; }
.nav-primary a{
  color:#232323; text-decoration:none; font-size:18px;
  font-weight: 500;
  font-family: Nunito sans-serif;
}
.nav-primary a:hover{ color:#81604c; text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px; }

/* Show links on scroll (to the left of Apply), hide hamburger */
@media (min-width:1200px){
  .nav-scroll .nav-primary{ display:flex !important; }
  .nav-scroll .phone-toggle-wrapper{ display:none !important; }
  /* keep Apply hard-right */
  .nav-scroll .nav-actions{ display:flex !important; margin-left:0 !important; }
}

/* Keep links hidden when not scrolled — topbar provides links then */
@media (min-width:1200px){
  .nav-primary{ display:none; }
}
/* Show the desktop nav links ONLY after scroll */
@media (min-width:1200px){
  /* hide by default (beats Bootstrap's d-xl-flex) */
  .nav-primary{ display:none !important; }

  /* reveal when the header is scrolled */
  .nav-scroll .nav-primary{ display:flex !important; }

  /* keep Apply pinned right and hide the burger on scroll (optional) */
  .nav-scroll .nav-actions{ display:flex !important; margin-left:0 !important; }
  .nav-scroll .phone-toggle-wrapper{ display:none !important; }

  /* already recommended: hide the topbar on scroll so only this menu shows */
  .nav-scroll .topbar{ display:none !important; }
}

/* DESKTOP: hide the toggler when scrolled… */
@media (min-width:1200px){
  .nav-scroll .phone-toggle-wrapper{ display:none; }

  /* …but if the menu is open, SHOW it as the close button */
  body.nav-open .nav-scroll .phone-toggle-wrapper{
    display:flex !important;
    position:fixed; top:14px; right:24px;
    z-index:3000;
  }

  /* Prevent Apply from overlapping the close button while menu is open */
  body.nav-open .nav-actions{ display:none !important; }
}

/* Keep overlay/menu below the close button */
#navOverlay{ z-index:1500; }
#mobileNav{ z-index:1600; }
@media (min-width:1200px){
  .tb-left{
    position: relative;
    align-self: stretch;          /* make this cell as tall as the bar */
    display: none; align-items: center;
  }
  .tb-left::after{
    content:"";
    position:absolute;
    top:0; bottom:0; right:-1px;  /* full height, no magic numbers */
    width:1px; background:rgba(255,255,255,.75);
  }
}
/* show it below 1200px */
@media (max-width:1199.98px){
  .hero-panels-mobile{ display:block !important; }
}
/* hide it at 1200px+ */
@media (min-width:1200px){
  .hero-panels-mobile{ display:none !important; }
}

/* ===== HERO ROTATOR — TABLET & DESKTOP (>=992px) ===== */
@media (min-width:992px){
  /* Anchor + width */
  #heroRotator,
  .hero-rotator{
    position: absolute;
    left: clamp(32px, 6vw, 120px);
    bottom: clamp(56px, 10vh, 120px);
    max-width: min(100rem, 86vw);
    width: auto;
    z-index: 1002;
    pointer-events: none;               /* only inner link is clickable */
    display: block;
  }

  /* Text-only slide (no glass/card) */
  #heroRotator .hero-card{
    position: static;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* Eyebrow + Title */
  #heroRotator .hero-eyebrow{
    margin: 0 0 .5rem;
    font-size: clamp(12px, .9vw, 14px);
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
  }
  #heroRotator .hero-title{
    margin: 0 0 1rem;
    font-weight: 400;
    color: #f8f9faf0;
    line-height: 1.05;
    font-size: clamp(34px, 5.2vw, 52px);
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  /* CTA — one size, square-ish, uses data-cta for label */
  #heroRotator .hero-arrow{
    --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: 8px;                 /* more square than pill */
    background: rgba(0,0,0,.18);
    backdrop-filter: saturate(120%) blur(1px);
    -webkit-backdrop-filter: saturate(120%) blur(1px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  #heroRotator .hero-arrow::before{
    content: attr(data-cta);
    font-weight: 600;
    letter-spacing: .02em;
    font-size: clamp(13px, 1.05vw, 15px);
    white-space: nowrap;
  }
  #heroRotator .hero-arrow svg{
    width: 16px; height: 16px;
    display: block;
    transition: transform .2s ease;
  }
  #heroRotator .hero-card:hover .hero-arrow{
    background: rgba(255,255,255,.26);
    border-color: #fff;
  }
  #heroRotator .hero-card:hover .hero-arrow svg{
    transform: translateX(6px);
  }
}

/* Tablet fine-tuning (iPad widths) */
@media (min-width:992px) and (max-width:1199.98px){
  #heroRotator{
    left: clamp(24px, 5vw, 80px);
    bottom: clamp(40px, 12vh, 120px);
    max-width: min(80rem, 90vw);
  }
  #heroRotator .hero-title{
    font-size: clamp(28px, 4.6vw, 56px);
  }
  #heroRotator .hero-arrow{
    --cta-w: 160px;
    --cta-h: 42px;
  }
}

/* Hide the rotator on phones; your stacked panels handle mobile */
@media (max-width:991.98px){
  #heroRotator, .hero-rotator{ display: none !important; }
}
/* ===== HERO ROTATOR — SHOW ON TABLETS & DESKTOP, HIDE ON PHONES ===== */

/* Phones only (=991px): hide the rotator */
@media (max-width: 991.98px){
  html body #heroRotator,
  html body .hero-rotator{
    display:none !important;
  }
}

/* Tablets & desktop (=992px): force it on and position it */
/* --- iPad / tablet landscape safety net (1024–1199px) --- */
@media screen and (min-width: 992px) and (max-width: 1199.98px){
  html body #heroRotator,
  html body .hero-rotator{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute;
    left: clamp(32px, 6vw, 120px);
    bottom: clamp(56px, 10vh, 120px);   /* adjust if you want it lower/higher */
    width:auto;
    max-width: min(100rem, 86vw);
    z-index:1002;
    pointer-events:none;                 /* keep only the link clickable */
  }

  /* text-only slide (no glass) still clickable */
  #heroRotator .hero-card{
    position:static;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    color:#fff; text-decoration:none;
    pointer-events:auto;
  }

  /* CTA button */
  #heroRotator .hero-arrow{
    --cta-w: 172px; --cta-h: 46px;
    display:inline-flex !important;
    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:8px;
    background:rgba(0,0,0,.18);
    backdrop-filter:saturate(120%) blur(1px);
    -webkit-backdrop-filter:saturate(120%) blur(1px);
    transition:background .2s, border-color .2s, transform .2s;
  }
  #heroRotator .hero-arrow::before{
    content:attr(data-cta);
    font-weight:600; letter-spacing:.02em;
    font-size:clamp(13px, 1.05vw, 15px); white-space:nowrap;
  }
  #heroRotator .hero-arrow svg{ width:16px; height:16px; transition:transform .2s; }
  #heroRotator .hero-card:hover .hero-arrow{ background:rgba(255,255,255,.26); border-color:#fff; }
  #heroRotator .hero-card:hover .hero-arrow svg{ transform:translateX(6px); }
}

/* Phones only (=991px): keep it hidden */
@media (max-width: 991.98px){
  html body #heroRotator,
  html body .hero-rotator{
    display:none !important;
  }
}
/* -------------------------------------------
   HERO ROTATOR • TABLET / iPad LANDSCAPE FIX
   Force ON between 992–1199.98px (iPad landscape)
   ------------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1199.98px){
  html body #heroRotator,
  html body .hero-rotator{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute;
    left: clamp(32px, 6vw, 120px);
    bottom: clamp(56px, 10vh, 120px);
    width:auto;
    max-width: min(100rem, 86vw);
    z-index:1002;
    pointer-events:none;
  }

  /* text-only slide stays clickable */
  #heroRotator .hero-card{
    position:static;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    color:#fff; text-decoration:none;
    pointer-events:auto;
  }

  /* CTA (same sizing you liked on desktop) */
  #heroRotator .hero-arrow{
    --cta-w: 172px; --cta-h: 46px;
    display:inline-flex !important;
    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:8px;
    background:rgba(0,0,0,.18);
    backdrop-filter:saturate(120%) blur(1px);
    -webkit-backdrop-filter:saturate(120%) blur(1px);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  #heroRotator .hero-arrow::before{
    content:attr(data-cta);
    font-weight:600; letter-spacing:.02em;
    font-size:clamp(13px, 1.05vw, 15px); white-space:nowrap;
  }
  #heroRotator .hero-arrow svg{ width:16px; height:16px; transition:transform .2s; }
  #heroRotator .hero-card:hover .hero-arrow{ background:rgba(255,255,255,.26); border-color:#fff; }
  #heroRotator .hero-card:hover .hero-arrow svg{ transform:translateX(6px); }
}

/* iOS-targeted fallback: some iPads still need this to win */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 992px) and (max-width: 1199.98px){
    html body #heroRotator,
    html body .hero-rotator{
      display:block !important;
    }
  }
}
/* ===== HERO ROTATOR — PHONES HIDE, TABLETS+ SHOW (single source of truth) ===== */

/* Phones only: hide */
@media (max-width: 991.98px){
  html body #heroRotator,
  html body .hero-rotator{
    display: none !important;
  }
}

/* Tablets & Desktop: show + position + type + CTA */
@media (min-width: 992px){
  /* Anchor + width */
  html body #heroRotator,
  html body .hero-rotator{
    position: absolute;
    left: clamp(32px, 6vw, 120px);
    bottom: clamp(56px, 10vh, 120px);
    max-width: min(100rem, 86vw);
    width: auto;
    z-index: 1002;
    pointer-events: none;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Text-only slide (no “glass” card) */
  #heroRotator .hero-card{
    position: static;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    pointer-events: auto;
  }

  /* Eyebrow + Title */
  #heroRotator .hero-eyebrow{
    margin: 0 0 .5rem;
    font-size: clamp(12px, .9vw, 14px);
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
  }
  #heroRotator .hero-title{
    margin: 0 0 1rem;
    font-weight: 400;
    color: #f8f9faf0;
    line-height: 1.05;
    font-size: clamp(34px, 5.2vw, 52px);
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  /* CTA — uniform, square-ish; label comes from data-cta */
  #heroRotator .hero-arrow{
    --cta-w: 172px;
    --cta-h: 46px;
    display: inline-flex !important;
    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: 8px;
    background: rgba(0,0,0,.18);
    backdrop-filter: saturate(120%) blur(1px);
    -webkit-backdrop-filter: saturate(120%) blur(1px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  #heroRotator .hero-arrow::before{
    content: attr(data-cta);
    font-weight: 600;
    letter-spacing: .02em;
    font-size: clamp(13px, 1.05vw, 15px);
    white-space: nowrap;
  }
  #heroRotator .hero-arrow svg{
    width: 16px; height: 16px;
    display: block;
    transition: transform .2s ease;
  }
  #heroRotator .hero-card:hover .hero-arrow{
    background: rgba(255,255,255,.26);
    border-color: #fff;
  }
  #heroRotator .hero-card:hover .hero-arrow svg{
    transform: translateX(6px);
  }
}

/* Extra nudge for iOS Safari (some iPads cache older rules) */
@supports (-webkit-touch-callout: none){
  @media (min-width: 992px) and (max-width: 1199.98px){
    html body #heroRotator,
    html body .hero-rotator{
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
  }
}
/* Phones: hide rotator */
@media (max-width: 991.98px){
  #heroRotator, .hero-rotator { display:none !important; }
}

/* Tablets & Desktop: show + layout */
@media (min-width: 992px){
  #heroRotator, .hero-rotator{
    position:absolute;
    left:clamp(32px, 6vw, 120px);
    bottom:clamp(56px, 10vh, 120px);
    max-width:min(100rem, 86vw);
    width:auto;
    z-index:1002;
    pointer-events:none;
    display:block !important;                 /* force on for iPad */
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Text-only card */
  #heroRotator .hero-card{
    position:static; padding:0 !important;
    background:none !important; border:0 !important;
    box-shadow:none !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important; pointer-events:auto;
  }

  /* Eyebrow */
  #heroRotator .hero-eyebrow{
    margin:0 0 .5rem;
    font-size:clamp(12px, .9vw, 14px) !important;  /* beat inline */
    letter-spacing:.18em; text-transform:uppercase;
    opacity:.9; text-shadow:0 1px 12px #282828;
  }

  /* TITLE — force size so inline font-size can't shrink it */
  #heroRotator .hero-title{
    margin:0 0 1rem; font-weight:400; color:#f8f9faf0;
    line-height:1.05;
    font-size:clamp(34px, 5.2vw, 52px) !important; /* <- key line */
    text-shadow:0 8px 24px #282828;
  }

  /* CTA button (square-ish, one size) */
  #heroRotator .hero-arrow{
    --cta-w:172px; --cta-h:46px;
    display:inline-flex !important; 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:#1f573d36;
    backdrop-filter:saturate(120%) blur(1px); -webkit-backdrop-filter:saturate(120%) blur(1px);
    transition:background .2s, border-color .2s, transform .2s;
  }
  #heroRotator .hero-arrow::before{
    content:attr(data-cta); font-weight:600; letter-spacing:.02em;
    font-size:clamp(13px, 1.05vw, 17px); white-space:nowrap;
  }
  #heroRotator .hero-arrow svg{ width:22px; height:22px; transition:transform .2s; }
  #heroRotator .hero-card:hover .hero-arrow{ background:rgba(255,255,255,.26); border-color:#fff; }
  #heroRotator .hero-card:hover .hero-arrow svg{ transform:translateX(6px); }
}

/* iOS/iPad safety net (some cached inline styles) */
@supports (-webkit-touch-callout: none){
  @media (min-width: 992px) and (max-width: 1199.98px){
    #heroRotator, .hero-rotator{ display:block !important; }
    #heroRotator .hero-title{ font-size:clamp(32px, 4.8vw, 52px) !important; }
  }
}
/* --- Phones: hide the rotator (use stacked panels) --- */
@media (max-width: 991.98px){
  #heroRotator, .hero-rotator { display: none !important; }
}

/* --- Tablets ONLY: 992–1199.98px — show and layout --- */
@media (min-width: 992px) and (max-width: 1199.98px){
  #heroRotator, .hero-rotator{
    position: absolute;
    left: clamp(24px, 6vw, 96px);
    bottom: clamp(40px, 12vh, 100px);
    max-width: min(90rem, 86vw);
    width: auto;
    z-index: 1002;
    /* force visibility even if something earlier hid it */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
  }

  /* text-only card */
  #heroRotator .hero-card{
    position: static;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    pointer-events: auto;
    color: #fff; text-decoration: none;
  }

  #heroRotator .hero-eyebrow{
    margin: 0 0 .5rem;
    font-size: clamp(12px, .95vw, 14px) !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
  }
  #heroRotator .hero-title{
    margin: 0 0 1rem;
    font-weight: 400; color: #f8f9faf0; line-height: 1.05;
    font-size: clamp(28px, 4.5vw, 40px) !important; /* beats inline font-size */
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  /* square-ish CTA using data-cta */
  #heroRotator .hero-arrow{
    --cta-w: 168px; --cta-h: 44px;
    display: inline-flex !important;
    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: 8px;
    background: rgba(0,0,0,.18);
    backdrop-filter: saturate(120%) blur(1px);
    -webkit-backdrop-filter: saturate(120%) blur(1px);
    transition: background .2s, border-color .2s, transform .2s;
  }
  #heroRotator .hero-arrow::before{
    content: attr(data-cta);
    font-weight: 600; letter-spacing: .02em;
    font-size: 14px; white-space: nowrap;
  }
  #heroRotator .hero-arrow svg{
    width: 16px; height: 16px; transition: transform .2s;
  }
  #heroRotator .hero-card:hover .hero-arrow{ background: rgba(255,255,255,.26); border-color: #fff; }
  #heroRotator .hero-card:hover .hero-arrow svg{ transform: translateX(6px); }
}

/* --- Desktop: =1200px — keep visible & positioned --- */
@media (min-width: 1200px){
  #heroRotator, .hero-rotator{
    position: absolute;
    left: clamp(32px, 6vw, 120px);
    bottom: clamp(56px, 10vh, 120px);
    max-width: min(100rem, 86vw);
    width: auto;
    z-index: 1002;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  /* (your existing desktop text/CTA rules can remain or inherit tablet ones) */
}
/* Phones only: hide */
@media (max-width: 991.98px){
  #heroRotator, .hero-rotator { display:none !important; }
}

/* Tablets: 992–1199.98 — show + layout */
@media (min-width: 992px) and (max-width: 1199.98px){
  #heroRotator, .hero-rotator{
    display:block !important; visibility:visible !important; opacity:1 !important;
    position:absolute; left:clamp(24px,6vw,96px); bottom:clamp(40px,12vh,100px);
    max-width:min(90rem,86vw); width:auto; z-index:1002; pointer-events:none;
  }
  #heroRotator .hero-card{ position:static; padding:0!important; background:none!important;
    border:0!important; box-shadow:none!important; backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important; transform:none!important; pointer-events:auto; color:#fff;
  }
  #heroRotator .hero-eyebrow{ margin:0 0 .5rem; font-size:14px; letter-spacing:.18em; text-transform:uppercase; opacity:.9; }
  #heroRotator .hero-title{ margin:0 0 1rem; font-weight:400; color:#f8f9faf0; line-height:1.05; font-size:40px; }
  #heroRotator .hero-arrow{ --cta-w:168px; --cta-h:44px; display:inline-flex!important; 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:8px; background:rgba(0,0,0,.18);
  }
  #heroRotator .hero-arrow::before{ content:attr(data-cta); font-weight:600; letter-spacing:.02em; font-size:14px; white-space:nowrap; }
}

/* Desktop: =1200 — show (you can keep your existing desktop styles) */
@media (min-width: 1200px){
  #heroRotator, .hero-rotator{
    display:block !important; visibility:visible !important; opacity:1 !important;
    position:absolute; left:clamp(32px,6vw,120px); bottom:clamp(56px,10vh,120px);
    max-width:min(100rem,86vw); width:auto; z-index:1002; pointer-events:none;
  }
}
/* Hide only real phones */
@media (max-width: 767){
  #heroRotator, .hero-rotator { display:none !important; }
}
/* Desktop: center the logo when the navbar is in scroll mode */
@media (min-width:1200px){
  .navbar.nav-scroll .logo-wrapper{ display:flex; align-items:center; height:80px; }
  .navbar.nav-scroll #siteLogo,
  .navbar.nav-scroll .logo-img{
    height:80px;         /* whatever your bar height is */
    margin:0 !important; /* kill the old bottom offset */
    line-height:1;       /* no baseline creep */
  }
}
/* phone link next to Apply */
#navDockedPhoneItem { margin-right:.5rem; }

.nav-docked-phone{
  display:inline-flex; align-items:center;
  gap:.4rem; color:#fff; padding:.35rem .6rem;
  line-height:1; font-weight:400; white-space:nowrap;
}
.nav-docked-phone:hover{   text-decoration: none;}

/* crisp icon, single source of truth */
.nav-docked-phone svg{ width:28px; height:28px; display:block; }
.nav-docked-phone svg [fill]{ fill: currentColor; } /* inherits white from .nav-docked-phone */

/* show ONLY when scrolled (adjust selector to where nav-scroll actually lands) */
.navbar:not(.nav-scroll) #navDockedPhoneItem { display:none !important; }
@media (min-width:1200px){
  .navbar.nav-scroll #navDockedPhoneItem { display:flex !important; }
}

/* If the class is on .header instead, use this pair instead of the two above: */
.header:not(.nav-scroll) #navDockedPhoneItem { display:none !important; }
/* --------------------------------------------- */

.logo-img { width:220px; height:auto; display:block; }
.navbar.nav-scroll .logo-img { width:180px; }
#siteLogo, .navbar .logo-img { max-height:none !important; height:auto !important; width:300px !important; }
.navbar.nav-scroll #siteLogo, .navbar.nav-scroll .logo-img { width:200px !important; }
@media (max-width: 991.98px){
  #siteLogo, .logo-img, .navbar .logo-img{ width: 112px !important; }
  .navbar.nav-scroll #siteLogo, .navbar.nav-scroll .logo-img{ width: 112px !important; }
}

@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-color: #615842;
  background-image: url(../img/pattern_vintage2.webp);
  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 rgb(214 231 237 / 80%); border-radius:2px;
  background:#81604c4f;
  color:#fff; text-decoration: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:600; letter-spacing:.02em;
  font-size:clamp(13px, 1.07vw, 17px); 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:rgba(255,255,255,.26); border-color:#fff;
}
.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, 6vw, 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);
  }
.u-bio {
    padding: 1.3rem;
}
  /* tighter frame padding */
  .parallax-img-section{
    /* was clamp(20px, 3vw, 48px) */
    padding: clamp(12px, 6vw, 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.1rem, 7vw, 1.3rem) !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: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* 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: #fff !important;
  color: #222 !important;
  border-color: #415d56 !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: #81604c; /* 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);
  }
}
/* RIGHT-aligned mobile controls (force override) */
@media (max-width:1199.98px){
  :root{
    --mob-btn: 44px;        /* square touch target */
    --mob-gap: 10px;        /* space between phone and toggle */
    --mob-top: 16px;        /* base top offset */
    --mob-right: 10px;      /* right padding */
    --toggle-nudge-y: 5px;  /* tweak to vertically align with phone */
  }

  /* Toggle on the far right */
  nav.navbar .phone-toggle-wrapper{
    position:absolute !important;
    top: calc(var(--mob-top) + var(--toggle-nudge-y)) !important;
    right: var(--mob-right) !important;
    left: auto !important;
    width: var(--mob-btn);
    height: var(--mob-btn);
    margin:0 !important;
    z-index:1110;
    display:flex; align-items:center; justify-content:center;
  }

/* Phone just to the left of the toggle */
#navMobilePhone{
  position:absolute !important;
  top: var(--mob-top) !important;
  right: calc(var(--mob-right) + var(--mob-btn) + var(--mob-gap)) !important;
  left: auto !important;
  width: var(--mob-btn);
  height: var(--mob-btn);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff !important;
  z-index:1110;
}

/* On scroll: dark (only if NOT open) */
.nav-scroll #navMobilePhone:not(.open),
.scrolled  #navMobilePhone:not(.open){
  color:#232323 !important;
}

/* Force SVG/inner elements */
.nav-scroll #navMobilePhone:not(.open) *,
.scrolled  #navMobilePhone:not(.open) *{
  color:#232323 !important;
  fill:#232323 !important;
  stroke:#232323 !important;
}

}




/* ========= DESKTOP (>= 1200px) — keep your current left placement ========= */
/* no change needed; your earlier desktop rules can remain */


=========================================================

   CLEAN NAV + RIBBON (single left-notch chip, correct slant)

   ========================================================= */



/* Tunables */

:root{

  --ribbon-h: 42px;      /* ribbon height */

  --chip-w: 28px;        /* notch width */

}



/* ===== Navbar anchor ===== */

.navbar{

  position: absolute;

  z-index: 2000 !important;

  overflow: visible;     /* allow the notch to protrude */

}



/* ===== Ribbon toolbar (top-right) ===== */

.ribbon{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  height: var(--ribbon-h);
  background: #81604c;
  border: 0px solid #e6e6e6;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  overflow: visible;

}

/* kill any per-cell notches */
.ribbon .ribbon-cell:first-child::before,
.ribbon .ribbon-cell:first-child::after{ content:none !important; }

/* Vars */
:root{
  --ribbon-h: 42px;   /* ribbon height */
  --chip-w: 38px;     /* notch width */
}

/* ===== Single LEFT notch (tip flush with top) ===== */

/* Outline underlay (1px) */
.ribbon::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;                               /* cover bar’s 1px border */
  transform: translateX(calc(-1 * var(--chip-w)));
  width:0; height:0;
  border-right: calc(var(--chip-w) + 1px) solid #fff; /* outline */
  border-top: 0 solid transparent;        /* tip at TOP */
  border-bottom: calc(var(--ribbon-h) + 1px) solid transparent;
  z-index:0;
}

/* White fill */
.ribbon::before{
  content:"";
  position:absolute;
  left:0;
  top:0;                                  /* align to bar top */
  transform: translateX(calc(-1 * var(--chip-w)));
  width:0; height:0;
  border-right: var(--chip-w) solid #ffffff;  /* fill color */
  border-top: 0 solid transparent;        /* tip at TOP */
  border-bottom: var(--ribbon-h) solid transparent;
  z-index:1;
}


/* Ribbon cells */

.ribbon .ribbon-cell{

  display:inline-flex;

  align-items:center;

  white-space:nowrap;

  height:100%;

  padding:11px 20px;
  font-family: Nunito sans-serif;

  font-size:15px;

  color:#f9fbfd;

  background:#81604c;

  text-decoration:none;

}

.ribbon .ribbon-cell + .ribbon-cell{

  border-left:1px solid rgb(255 255 255 / 30%);

}

.ribbon .ribbon-cta{ background:#232323; color:#fff; font-weight:500; }

.ribbon .ribbon-cta:hover{ background:#232323; color:#be918e}
/* Hover for non-CTA ribbon cells */
.ribbon .ribbon-cell:hover:not(.ribbon-cta) {
    background: #af9e94;
    color: #f9f2ec;
  transition: background 0.2s ease-in-out;
}

/* Existing CTA hover (stronger) */
.ribbon .ribbon-cta:hover {
    background: #af9e94;
    color: #f9f2ec;
}

.ribbon .ribbon-cell--address{ max-width:330px; overflow:hidden; text-overflow:ellipsis; }

.ribbon > .ribbon-cell { border-left: 0; } /* reset */
.ribbon > .ribbon-cell + .ribbon-cell {
  border-left: 1px solid rgb(255 255 255 / 30%);
}

/* Ensure the first cell has NO border at all */
.ribbon > .ribbon-cell:first-child {
  border-left: 0 !important;
  margin-left: -1px;              /* tuck under the notch to avoid a hairline */
}

/* Cover any sub-pixel seam right after the notch */
.ribbon > .ribbon-cell:first-child::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: #fff;               /* same as ribbon background */
  pointer-events: none;
}

/* Hide ribbon on mobile and (optionally) when scrolled */

@media (max-width:1199.98px){

  .ribbon{ display:none !important; }

}
/* --- Single LEFT notch aligned perfectly with top border --- */

/* Outline (diagonal border) */
.ribbon::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px; /* sit over the bar’s 1px top border */
  transform: translateX(calc(-1 * var(--chip-w)));
  width:0; height:0;
  border-right: calc(var(--chip-w) + 0) solid #e6e6e6; /* outline color */
  /* extend 2px: bar height + top/bottom border coverage */
  border-bottom: calc(var(--ribbon-h) + 2px) solid transparent;
  border-top: 0 solid transparent;
  z-index:0;
}

/* White fill */
.ribbon::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px; /* align to same top as outline */
  transform: translateX(calc(-1 * var(--chip-w)));
  width:0; height:0;
  border-right: var(--chip-w) solid #81604c;       /* bar fill */
  /* extend 1px: covers the top border cleanly under the outline */
  border-bottom: calc(var(--ribbon-h) + 1px) solid transparent;
  border-top: 1px solid transparent;
  z-index:1;
  display: none;
}

@media (min-width:1200px){

  .navbar.nav-scroll .ribbon{ display:none !important; }
  .navbar .logo { padding-left: 0 !important; } 

}
/* ===== Centered logo over hero; snap left when scrolled ===== */

.navbar .logo-wrapper{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:70px;                     /* tweak as needed */
  display:flex;
  align-items:center;
  z-index:1200;
}
.navbar .logo-img{
  width:300px;
  height:auto;
  transition: width .18s ease, top .18s ease, transform .18s ease;
}

.navbar.nav-scroll .logo-wrapper{
  position:static !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;  
  margin-left: .6rem !important;
  margin-right:auto !important;
  float:none !important;
  order:0 !important;

}

.navbar.nav-scroll .logo-img{ width:160px; }

@media (max-width:1199.98px){

  .navbar .logo-wrapper{

    position:static !important;

    transform:none !important;

    left:auto !important;

    top:auto !important;

    margin-left:1rem !important;

  }

  .navbar .logo-img{ width:200px; }

}



/* ===== Toggle + Apply on the LEFT (desktop), 30px from top ===== */

@media (min-width:1200px){

  .navbar .phone-toggle-wrapper{

    position:absolute;

    top:30px; left:16px;

    margin:0 !important;

    z-index:1110;

  }

  .navbar .nav-actions{

    position:absolute;

    top:30px; left:92px;         /* ~toggle width + gap */

    margin:0 !important;

    z-index:1110;

  }

  .navbar .nav-primary{

    margin-left:auto !important;

    margin-right:1rem !important;

  }

}

@media (min-width:1200px){

  .navbar.nav-scroll .phone-toggle-wrapper{ top:30px; left:16px; }

  .navbar.nav-scroll .nav-actions{ top:30px; left:92px; }

}



/* Mobile: show toggle left; hide desktop Apply */

@media (max-width:1199.98px){

  .navbar .phone-toggle-wrapper{ position:absolute; left:16px; top:16px; right:auto; }

  .navbar .nav-actions{ display:none !important; }

}



/* ===== Left cluster ("Find Your Home") + hover ===== */

.left-cluster{

  position:absolute;

  top:16px; left:16px;

  z-index:1200;

}

.left-find-home{

  display:inline-flex;

  align-items:center;

  gap:.5rem;

  color:#fff;

  text-decoration:none;

  font-size:20px;

  text-shadow:1px 1px rgba(0,0,0,.25);

  transition: color .15s ease;

}

.left-find-home svg{

  display:inline-block;

  width:22px; height:22px;

  transition: transform .15s ease;

}

.left-find-home svg *{ fill: currentColor; }

.left-find-home:hover,

.left-find-home:focus-visible{

  color:#e9eef3; text-decoration:none;

}

.left-find-home:hover svg,

.left-find-home:focus-visible svg{

  transform: translateX(6px);

}

.left-cluster .mobile-nav-toggle{ margin:0 12px 0 0; }

@media (prefers-reduced-motion: reduce){

  .left-find-home, .left-find-home svg{ transition:none; }

}

/* Hide "Find Your Home" on scroll (desktop) */

@media (min-width:1200px){

  .navbar.nav-scroll a.left-find-home{ display:none !important; }

}
/* LG only: 992–1199px — fix logo + scrolled bar */
@media (min-width: 992px) and (max-width: 1199.98px){

  /* stop absolute centering used on =1200px */
  .navbar .logo-wrapper{
    position: static !important;
    left: auto !important;
    transform: none !important;
    order: 2;           /* keep in the middle row order if you want */
    z-index: 12;
  }

  /* right side content still pushes right */
  #desktopNav{ margin-left: auto !important; }

  /* sensible logo sizes for this band */
  .logo-img,
  #siteLogo.logo-img{
    width: 130px !important;
    margin: 0 !important;
  }
  .navbar.nav-scroll .logo-img,
  .navbar.nav-scroll #siteLogo.logo-img{
    width: 200px !important;
    margin: 0 !important;
  }

  /* flatten the scrolled bar – no giant paddings/transforms */
  .navbar.nav-scroll{
    position: fixed;
    top: 0 !important;
    transform: none !important;
    padding: 10px 0 !important;   /* was 68px */
    height: 110px !important;
    box-shadow: 0 5px 15px rgb(15 36 84 / 5%);
  }
  .logo-img {
    max-height: none !important;
    height: auto !important;
    width: 250px !important;
}
.navbar.nav-scroll #siteLogo, .navbar.nav-scroll .logo-img {
    width: 220px !important;
}
    .navbar.nav-scroll #siteLogo, .navbar.nav-scroll .logo-img
 {
        height: 50px !important;
        margin-top: 10px;
    }
  /* base navbar height at this size */
  .navbar{
    height: 112px !important;
    padding: 0 !important;
  }
  :root{
    --mob-btn: 44px;        /* square touch target */
    --mob-gap: 12px;        /* space between phone and toggle */
    --mob-top: 15px;        /* base top offset */
    --mob-right: 36px;      /* right padding */
    --toggle-nudge-y: 0px;  /* tweak to vertically align with phone */
  }
}
/* LG only: 992–1199px */
@media (min-width: 992px) and (max-width: 1199.98px){

  /* logo sizing in scrolled state — higher specificity */
  nav.navbar.nav-scroll.nav-scroll #siteLogo,
  nav.navbar.nav-scroll.nav-scroll .logo-img{
    height: 68px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* bar sizing; keep heights consistent */
  nav.navbar{
    height: 80px !important;
    padding: 0 !important;
  }
  nav.navbar.nav-scroll{
    top: 0 !important;
    transform: none !important;
    padding: 8px 0 !important;
    height: 82px !important;
    box-shadow: 0 5px 15px rgba(15,36,84,.05);
  }
}
/* Mobile menu secondary links (Book a Tour + Availability) */
#mobileNav li.mobile-secondary-links{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;                 /* space BETWEEN the two links */
}

#mobileNav li.mobile-secondary-links > a.nav-link{
  font-size: 14px !important;
  opacity: 0.85;
  letter-spacing: 0.02em;
  padding: 0 !important;     /* let gap handle spacing */
  line-height: 1.6;
}

#mobileNav li.mobile-secondary-links > a.nav-link:hover{
  opacity: 1;
}
@media (min-width: 1200px){
  #mobileNav li.mobile-secondary-links > a.nav-link{
    font-size: 1.0rem !important;
  }
}
.form-label {
    margin-bottom: .5rem;
    color: #232323 !important;
}
.footer-jmh__badgeSvg{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  line-height:0;
}
.footer-jmh__badgeSvg svg{
  display:block;
}
.mobile-nav-badges{
  font-size: 22px; /* controls FA icons */
}
.mobile-nav-badges i{
  font-size: 1em;
}
.mobile-nav-badges .footer-jmh__badgeSvg svg{
  width: 1em;
  height: 1em;
}
/* Make the whole badge group align consistently */
.footer-trio .col-md-4{
  align-items: center; /* only matters if you ever make it flex-column; safe */
}

/* Align SVG badge with Font Awesome baseline */
.footer-jmh__badgeSvg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.footer-jmh__badgeSvg svg{
  display: inline-block;
  width: 1.3em;          /* match FA icon sizing */
  height: 1em;         /* IMPORTANT: not .1em */
  vertical-align: -0.12em; /* tiny nudge to match FA */
}

/* Ensure FA icons also behave consistently */
.footer-trio i{
  line-height: 1;
  vertical-align: middle;
}
/* The icon row itself */
.footer-trio .col-12.col-md-4.d-flex{
  align-items: center;            /* <-- this is the missing piece */
}

/* Make every icon behave the same */
.footer-trio .col-12.col-md-4.d-flex i,
.footer-trio .footer-jmh__badgeSvg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.footer-trio .footer-jmh__badgeSvg svg{
  width: 1.3em !important;
  height: 1em !important;
  display: block;
}