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

}  
}

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

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

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

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

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

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


    }

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

  .header .item.bg-img{ position:relative; overflow:hidden; }
  .header .item.bg-img .parallax-bg{
    position:absolute; left:0; right:0; top:-10vh; bottom:-10vh; /* headroom for movement */
    background-size:cover; background-position:center;
    will-change:transform;
    transform:translateY(0);
  }
.gradient-edge-top {
    z-index: 3;
    position: absolute;
    top: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg, rgb(0 0 0 / 58%) 0%, rgb(56 72 97 / 0%) 100%);
}
.gradient-edge-bottom {
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(0deg, rgb(0 0 0 / 38%) 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: 15px;
    color: #fff;
    margin: 6px;
    padding-right: 12px;
    padding-left: 12px;
    letter-spacing: 0px;
    text-shadow: none !important;
    text-decoration: none;   /* default: no underline */
}

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

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

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

/* 4) Grow underline on hover/focus */
#leftNav .nav-link:hover::after,
#leftNav .nav-link:focus-visible::after,
#desktopNav .nav-link:hover::after,
#desktopNav .nav-link:focus-visible::after {
  width: 100%;
}
/* Fine-tune right side underline position only */
#desktopNav .nav-link::after {
  bottom: 9px; /* try -1; if still a hair low, use 0 or -0.5px */
}
@media (min-width: 1200px) {
  /* Slightly lower the right-side links to match left */
  #desktopNav {
    position: relative;
    top: 2px;   /* try 2; adjust to 1 or 3 if needed */
  }
}


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

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

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

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

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

  /* 1) the hero section itself is a full viewport tall */
  header.header { 
    height: 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: rgba(255,255,255,.9); background:#3A3A38; }
.footer-modern .footer-link{ color:var(--muted); text-decoration:none; }
.footer-modern .footer-link:hover{ color:#bbc5b8; text-decoration:none; }

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

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

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

.footer-modern .footer-brand{ height:76px; opacity:.9; }
.footer-modern .footer-badges i{ font-size:18px; opacity:.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: #575e65;
  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:#fff; color:#222;
  width:min(560px, calc(100% - 2rem));
  max-height:100vh; overflow:auto;      /* content can scroll */
  border-radius:10px; padding:1.25rem 1.25rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Close button INSIDE the dialog so it's never clipped */
.policy-close{
  position:absolute; top:12px; right:12px;
  width:23px; height:23px; padding:0; border:0;
  background:url("../img/close-white-thin.svg") no-repeat 50% / 100%;
  text-indent:-9999px; overflow:hidden; cursor:pointer;
  z-index: 1;
}
html.modal-open { overflow:hidden !important; height:100%; }
body.modal-open {
  position: fixed; left:0; right:0; width:100%;
  overflow:hidden !important; height:100%;
}
/* =========================================================
   “ARCH PATTERN” SECTION
   ========================================================= */
.u-arch-pattern{
  --size:320px; --stroke:6px; --bg:#0b1418; --panel:#b9856a; --line:#9dbdc2;
  min-height:420px;
  background:
    linear-gradient(0deg, transparent calc(50% - 22px), var(--line) 0 calc(0% - 16px), transparent 0 calc(0% + 16px), var(--line) 0 calc(-0% + 22px), transparent 0),
    linear-gradient(0deg, var(--panel) 0 0%, transparent 0% 0%, var(--panel) 0% 100%),
    radial-gradient(100% 170% at 50% 0%,   var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 100%, var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 0%,   transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    radial-gradient(100% 170% at 50% 100%, transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    repeating-linear-gradient(90deg, var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size)),
    repeating-linear-gradient(0deg,  var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size));
  background-size: var(--size) var(--size);
  background-color: var(--bg);
  padding: 115px 0;
}
.u-arch-gal-pattern{
  --size:320px; --stroke:6px; --bg:#405264; --panel:#2e4147;
  min-height:420px;
  background:
    linear-gradient(0deg, transparent calc(50% - 22px), var(--line) 0 calc(0% - 16px), transparent 0 calc(0% + 16px), var(--line) 0 calc(-0% + 22px), transparent 0),
    linear-gradient(0deg, var(--panel) 0 0%, transparent 0% 0%, var(--panel) 0% 100%),
    radial-gradient(100% 170% at 50% 0%,   var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 100%, var(--panel) 49%, transparent 50%),
    radial-gradient(100% 170% at 50% 0%,   transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    radial-gradient(100% 170% at 50% 100%, transparent calc(50% - var(--stroke)), var(--line) 0 50%, transparent 0),
    repeating-linear-gradient(90deg, var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size)),
    repeating-linear-gradient(0deg,  var(--line) 0 var(--stroke), transparent var(--stroke) calc(50% - var(--stroke)), var(--line) 0 calc(50% + var(--stroke)), transparent 0 var(--size));
  background-size: var(--size) var(--size);
  background-color: var(--bg);
  padding: 115px 0;
}
.u-bio{
  --bs-bg-opacity:1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  padding:115px 0;
}
.u-SubPage{
  --bs-bg-opacity:1;
  background-color: #fffdfb !important;
  padding:95px 0;
}
.u-SubPageFloor{
  --bs-bg-opacity:1;
  background-color: #fffdfb !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 */
.page-hero__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.0rem;
  z-index: 2;
  padding: 0 1rem;
  text-align: center;
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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



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

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

/* responsive inner padding */
@media (min-width: 992px){
  .u-bio .pattern-inner{ padding: 7rem 4rem; }
}
@media (max-width: 991.98px){
  .u-bio .pattern-inner{ padding: 4rem 1rem; }
}
.u-foot-cta{
    background: url(../img/pattern-1-light-blue.svg);
    padding: 1.0rem;
}

/* inner white (or cream) panel */
.u-foot-cta .pattern-inner{
    text-align: center;
    padding: 2rem 2rem;
    background: url(../img/pattern-1-white.svg);
    opacity: .9;
}

/* 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 #ddccb5;
}

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-tabs .nav-link {
  border: none;
  border-radius: 0;
  width: 100%;
  background-color: #8a9786;
  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: #bbc5b8;
  color: #222;
}
.nav-tabs .nav-link.active {
  background-color: #626960;
  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.5rem;
  font-weight: 600;
  text-align: center;
  margin: 3rem auto 2rem;
  color: #333;
  font-family: 'Montserrat', sans-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, #9fcdbc);
    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: #3A3A38;
  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:100px !important;
  height:100px !important;
  object-fit:contain;
}
/* Dropdown */
#categoryDropdown {
  background-color: #222222db;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border: medium none;
  border-radius: 0;
  height: 62px; /* Adjust as needed */
  line-height: 28px; /* helps center text vertically */
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ fill=\'white\'\ viewBox=\'0\ 0\ 16\ 16\'%3E%3Cpath\ d=\'M1.5\ 5.5l6\ 6\ 6-6\'\ stroke=\'white\'\ stroke-width=\'2\'\ fill=\'none\'/%3E%3C/svg%3E);
  background-repeat: no-repeat;
  background-position: right 1.0rem center;
  background-size: 1.5em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; padding-left:16px; padding-right:16px; padding-top:12px; padding-bottom:12px
}

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

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

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

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

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

.loading-spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b1c1b3;
  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: #626960;
  background: #ffffff;
  transition: background-color .2s ease;
  border: 1px solid #b1b5c0;
  border-radius: 2px;
}

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

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

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

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

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

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

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


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

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

  #map { height: 480px; }
}


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

  #map { height: 560px; }

}
}


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

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

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

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


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

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

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

}

/* --- Amenities section styles --- */
#amenities .heading-amenities {
  font-size: 24px !important;  /* default for large screens */
  font-weight: 550;
  color: #575e65;              /* 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 #e9e7e2;
  color: #3b3b3b;
  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: 20px !important; }
  #amenities .amenity-list li { padding: 12px 4px; }
}

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

.border-custom-map {
    border: 1.5px solid #9fcdcd !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 #737f6f; }

/* ===== Hover backgrounds ===== */
#contact .contact-row {
  color:#4d4a46;
  transition: background-color .2s ease, color .2s ease;
}
#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:600; }
#contact .hours-table { 
  border-top:1px solid #737f6f; 
  border-bottom:0px solid #737f6f; 
}
#contact .hours-row { 
  display:flex; 
  justify-content:space-between; 
  padding:.9rem 0; 
  border-bottom:1px solid #737f6f; 
}
#contact .hou#747f711ast-child { border-bottom:0; }
#contact .hours-day { color:#4d4a46; }
#contact .hours-time { color:#7e7a74; }

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

#contact .btn-submit:hover,
#contact .btn-submit:focus {
  #737f6f !important          /* same hover bg as intro action */
  color: #fff !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:#769999; flex:0 0 auto; }
#contact .contact-heading {
  font-size:1.5rem;
  line-height:1.3;
  color:#737f6f;
}
@media (min-width:992px){
  #contact .contact-heading { font-size:1.3rem; }
}
/* 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 #8f7d6640; border-radius:4px; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
#floorplans .fp-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
#floorplans .fp-img{ padding:1.25rem; display:flex; align-items:center; justify-content:center; min-height:180px; }
#floorplans .fp-img img{ max-width:100%; height:auto; }
#floorplans .fp-body{ padding:0 1rem 1rem; }
#floorplans .fp-title{ font-weight:600; font-size:1.05rem; color:#222; }
#floorplans .fp-meta{ color:#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 #222; cursor:pointer;
}
#floorplans .fp-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #222; cursor:pointer;
}

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

/* Mobile adjustments */
@media (max-width: 991px) {
  .callout__actions { justify-content: flex-start; }
  .callout__title { text-align: left; margin-bottom: .25rem; }
  .custom-callout-title {
font-size: 1.5rem !important;
        font-weight: 400;
        line-height: 2.5rem;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
  }
}
/* MOBILE FIRST (base) */
.h2-dark{
  color:#575e65;
  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.3rem !important;            /* your desktop size */
  }
}

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

/* 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: 120px;
    margin-bottom: 15px;
}

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

/* 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: #fffdf7;
  color: #2222229e;
}
/* ---------- Mobile behavior ---------- */ 
@media (max-width: 991.98px){
  .intro-actions{ padding-left: 0; }
  .intro-actions::after{ display:none; }

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

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

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

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


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

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

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

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

/* frame */
.parallax-img-section{
  background: url(../img/pattern-1-light-blue.svg) center / cover repeat;
  padding: clamp(20px, 3vw, 48px);                 /* our own frame padding */
  background-color: #AEB7A8;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 2) Your styles on hover/active/focus */
button.btn:hover,
button.btn:active,
button.btn:focus,
button.btn:focus-visible,
button.btn.js-open-modal:focus,
button.btn.js-open-modal:focus-visible {
  background: #737f6f !important;
  color: #fff !important;
  border-color: #574f45 !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: #737f6f; /* brand color for the tick/dot in modern browsers */
}

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

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

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

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

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

}

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#mobileNav .mobile-nav-cta-btn:hover{
  background:#fff;
  color:#000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.u-foot-cta .pattern-inner {
    position: relative;
    background: url(../img/gallery/36.jpg) center/cover no-repeat;
    padding: 3.5rem 2rem;
    text-align: center;
    overflow: hidden;
}

/* white tint overlay */
.u-foot-cta .pattern-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(107, 107, 107, 0.65); /* adjust tint strength */
    pointer-events: none;
    z-index: 1;
}

/* bring actual content above overlay */
.u-foot-cta .pattern-inner > * {
    position: relative;
    z-index: 2;
}


/* Let the container span the panel width */
.u-foot-cta .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Force both Bootstrap cols to full width so content stacks nicely */
.u-foot-cta .col-lg-8,
.u-foot-cta .col-xl-8,
.u-foot-cta .col-lg-4,
.u-foot-cta .col-xl-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Treat the row as a centered column */
.u-foot-cta .intro-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

/* Override theme .text-start in this block */
.u-foot-cta [class*="text-start"] {
  text-align: center !important;
}

/* Headline with hairlines + vertical bars (Edgewood footer CTA) */
.u-foot-cta .custom-callout-title,
.u-foot-cta .callout__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  width: 100%;
  margin: 0 0 2rem;      /* no auto-centering */
  padding: 0;            /* let lines go to container padding edge */
  font-family: "Montserrat", sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: .02em;
  color: #fff;
}

/* base line segment (flexes left / right of the text) */
.u-foot-cta .custom-callout-title::before,
.u-foot-cta .custom-callout-title::after,
.u-foot-cta .callout__title::before,
.u-foot-cta .callout__title::after {
  content: "";
  flex: 1 1 0;
  height: 20px;          /* overall block height / bar height */
  position: relative;
  /* no max-width so lines can reach full width */
}

/* LEFT side: vertical bar on the RIGHT (inner) edge + full horizontal rule */
.u-foot-cta .custom-callout-title::before,
.u-foot-cta .callout__title::before {
  background:
    /* vertical bar at inner edge (near text) */
    linear-gradient(#fff, #fff)
      right center / 2px 40px no-repeat,
    /* horizontal rule spanning full segment */
    linear-gradient(#fff, #fff)
      center / 100% 1px no-repeat;
}

/* RIGHT side: vertical bar on the LEFT (inner) edge + full horizontal rule */
.u-foot-cta .custom-callout-title::after,
.u-foot-cta .callout__title::after {
  background:
    /* vertical bar at inner edge (near text) */
    linear-gradient(#fff, #fff)
      left center / 2px 40px no-repeat,
    /* horizontal rule spanning full segment */
    linear-gradient(#fff, #fff)
      center / 100% 1px no-repeat;
}

/* Give the text the gap instead of using margins on the lines */
.u-foot-cta .custom-callout-title span,
.u-foot-cta .callout__title span,
.u-foot-cta .custom-callout-title,
.u-foot-cta .callout__title {
  /* if your text is not wrapped in a span, this still pads the whole title */
  padding: 0 1rem;
}

/* Mobile: keep your existing behavior (optional) */
@media (max-width: 576px) {
  .u-foot-cta .custom-callout-title,
  .u-foot-cta .callout__title {
    flex-wrap: wrap;
  }
  .u-foot-cta .custom-callout-title::before,
  .u-foot-cta .custom-callout-title::after,
  .u-foot-cta .callout__title::before,
  .u-foot-cta .callout__title::after {
    display: none;
  }
}


/* Buttons row: side-by-side, centered */
.u-foot-cta .intro-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 0;
  border: 0;
}

/* Each wrapper is just a flex shell */
.u-foot-cta .intro-action {
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Buttons: equal width, centered labels, rounded corners */
.u-foot-cta .intro-action .intro-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 260px !important;          /* <- EXACT same width for both */
  min-height: 48px;
  padding: 0.75rem 2.5rem;
  background: #3A3A38;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
  text-align: center !important;
  border: 1px solid #222;
}

/* Hide any SVG arrows if still present */
.u-foot-cta .intro-arrow,
.u-foot-cta .intro-link .intro-arrow {
  display: none !important;
}

/* Hover state */
.u-foot-cta .intro-action .intro-link:hover,
.u-foot-cta .intro-action .intro-link:focus {
    background: #737f6f;
    color: #fff;
    border: 1px solid #574f45;
}

/* Mobile: stack buttons, keep SAME width and radius */
@media (max-width: 575.98px) {
  .u-foot-cta .intro-actions {
    flex-direction: column !important;
  }

  .u-foot-cta .intro-action {
    justify-content: center;
  }

  .u-foot-cta .intro-action .intro-link {
    width: 260px !important;       /* <- same width on mobile */
    max-width: 100%;
    margin: 0 auto;
    min-height: 48px;
    border-radius: 2px;
  }

  .u-foot-cta .custom-callout-title,
  .u-foot-cta .callout__title {
    flex-wrap: wrap;
  }

  .u-foot-cta .custom-callout-title::before,
  .u-foot-cta .custom-callout-title::after,
  .u-foot-cta .callout__title::before,
  .u-foot-cta .callout__title::after {
    max-width: 120px;
    display: none;
  }
}
/* Make footer callout title fit better on mobile */
@media (max-width: 575.98px) {
  .u-foot-cta .custom-callout-title,
  .u-foot-cta .callout__title {
    display: block;          /* no flex squeezing */
    width: 100%;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;         /* less side padding */
    font-size: 1.5rem;       /* smaller on phones */
    line-height: 1.25;
    text-align: center;
  }

  /* keep or hide hairlines – here we hide so text has max room */
  .u-foot-cta .custom-callout-title::before,
  .u-foot-cta .custom-callout-title::after,
  .u-foot-cta .callout__title::before,
  .u-foot-cta .callout__title::after {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* fallback solid color */
  background-color: #fff;

  /* patterned border */
  background-image: url(../img/pattern-1-light-blue.svg);
  background-repeat: repeat-y;   /* tile vertically */
  background-position: center;

  z-index: 1;
}

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

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

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

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

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

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

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

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

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

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

/* Keep it nice on mobile */
@media (max-width: 991.98px) {
  .photo-strip__cta {
    margin-top: 12px;
  }
}
/* RESET any old logo hacks */
.navbar .logo-wrapper,
.navbar .logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0;
}

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

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

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

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

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

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

#navMobilePhone {
  color: #fff !important;
}

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

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

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

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

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

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

#navMobilePhone {
  color: #fff !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Mobile only: hide Facebook text, show icon and style like footer box */
  #mobileNav .mobile-nav-facebook {
    width: 25px;
    height: 25px;
    border: 0px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 2px;
    text-decoration: none;
    margin: 0.75rem auto 0;
  }
  #mobileNav .mobile-nav-facebook .fb-label {
    display: none;
  }
  #mobileNav .mobile-nav-facebook i {
    display: inline-block;
    font-size: 1.1rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .phone-toggle-wrapper .navbar-toggler {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* Fix Facebook button on mobile: show icon, hide text */
@media (max-width: 767.98px) {
  #mobileNav .mobile-nav-facebook .fb-label {
    display: none !important;
  }
  #mobileNav .mobile-nav-facebook i {
    display: inline-block !important;
  }
}
/* =========================================================
   U-FOOT CTA — MATCH REFERENCE (FINAL TUNE)
   - White section
   - Title with FULL-WIDTH lines left/right
   - Buttons centered
   ========================================================= */

.u-foot-cta{
  position: relative;
  background: #adadad;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
}

/* kill the old image background + overlay */
.u-foot-cta .pattern-inner{
  background: #ffffff !important;
  min-height: 0 !important;
  padding: clamp(46px, 5vw, 80px) 0 !important;
  overflow: visible;
}
.u-foot-cta .pattern-inner::before{
  content: none !important;
}

/* Let this section break out of Bootstrap container constraints */
.u-foot-cta .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* Remove Bootstrap row negative margins + column padding (THIS fixes the “not quite”) */
.u-foot-cta .intro-grid{
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}
.u-foot-cta .intro-grid > [class*="col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;

  flex: 0 0 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* -------------------------
   TITLE + FULL WIDTH LINES
   ------------------------- */
.u-foot-cta .callout__title{
  margin: 0 0 26px !important;
  color: #575e65;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.08;
  font-size: clamp(28px, 3.1vw, 54px);

  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 22px;

  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  white-space: nowrap;
}

/* lines */
.u-foot-cta .callout__title::before,
.u-foot-cta .callout__title::after{
  content:"";
  height: 1px;
  background: rgba(0,0,0,.14);
  flex: 1 1 auto;
  max-width: none !important; /* allow full stretch */
}

/* -------------------------
   BUTTON ROW CENTERED
   ------------------------- */
.u-foot-cta .intro-actions{
  display: inline-flex;          /* makes the group “hug” the buttons */
  align-items: center;
  justify-content: center;
  gap: 18px;

  position: relative;
  margin: 0 auto;                /* centers the inline-flex group */
}

/* ensure no stray pseudo-lines appear */
.u-foot-cta .intro-actions::before,
.u-foot-cta .intro-actions::after{
  display:none !important;
  content:none !important;
}

.u-foot-cta .intro-action{
  flex: 0 0 auto;
}

/* buttons */
.u-foot-cta .intro-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  min-width: 240px;
  padding: 0 22px;

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

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 2px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.u-foot-cta .intro-link:hover,
.u-foot-cta .intro-link:focus{
  opacity: .92;
  transform: none;
}
/* =========================================================
   MOBILE TOGGLE: OPEN STATE = ONE LINE (NOT AN X)
   Paste LAST
   ========================================================= */

/* Ensure the button is the positioning context */
#mobileToggle,
.mobile-nav-toggle{
  position: relative !important;
}

/* Base bars (keep your normal look) */
#mobileToggle span,
.mobile-nav-toggle span{
  position: absolute !important;
  left: 0 !important;
  width: 42px !important;
  height: 1.5px !important;
  background: #fff !important;
  border-radius: 1px !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Keep your normal bar positions (matches your current CSS) */
#mobileToggle span:nth-child(1),
.mobile-nav-toggle span:nth-child(1){ top: 0 !important; }

#mobileToggle span:nth-child(2),
.mobile-nav-toggle span:nth-child(2){ top: 11px !important; }

#mobileToggle span:nth-child(3),
.mobile-nav-toggle span:nth-child(3){ top: 22px !important; }

/* OPEN state triggers (your button uses .open) */
#mobileToggle.open span,
#mobileToggle[aria-expanded="true"] span,
.mobile-nav-toggle.open span,
.mobile-nav-toggle[aria-expanded="true"] span{
  background: #fff !important;
}

/* Hide the top and bottom bars when open */
#mobileToggle.open span:nth-child(1),
#mobileToggle.open span:nth-child(3),
#mobileToggle[aria-expanded="true"] span:nth-child(1),
#mobileToggle[aria-expanded="true"] span:nth-child(3),
.mobile-nav-toggle.open span:nth-child(1),
.mobile-nav-toggle.open span:nth-child(3),
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1),
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){
  opacity: 0 !important;
}

/* Keep only the middle bar, EXACTLY where it normally is */
#mobileToggle.open span:nth-child(2),
#mobileToggle[aria-expanded="true"] span:nth-child(2),
.mobile-nav-toggle.open span:nth-child(2),
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity: 1 !important;
  left: 0 !important;
  width: 42px !important;
  top: 11px !important;     /* sync with your normal middle bar */
  height: 1.5px !important;   /* sync thickness with your bars */
  transform: none !important;
}
/* =========================================================
   MOBILE TOGGLE: tighter gaps + move toggle down a bit
   Paste LAST
   ========================================================= */

/* 1) Move the whole button down (adjust the 3px as needed) */
#mobileToggle,
.mobile-nav-toggle{
  position: relative !important;
  top: 10px !important;          /* try 2px to 6px */
}

/* 2) Tighter gaps between bars (was 0,11,22)
      New spacing: 0,9,18 (smaller gaps) */
#mobileToggle span:nth-child(1),
.mobile-nav-toggle span:nth-child(1){ top: 0 !important; }

#mobileToggle span:nth-child(2),
.mobile-nav-toggle span:nth-child(2){ top: 9px !important; }

#mobileToggle span:nth-child(3),
.mobile-nav-toggle span:nth-child(3){ top: 18px !important; }

/* 3) Open state line stays synced with the middle bar */
#mobileToggle.open span:nth-child(2),
#mobileToggle[aria-expanded="true"] span:nth-child(2),
.mobile-nav-toggle.open span:nth-child(2),
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){
  top: 9px !important;          /* MUST match the middle bar top */
  width: 42px !important;       /* your fix */
}
/* =========================================================
   PAGE HERO TITLE LINES (match footer style: long + close)
   Paste LAST
   ========================================================= */

/* The bar becomes a flex row so the lines can stretch */
.page-hero__bar{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;           /* space between text and lines (smaller = closer) */
  padding: 0 2px;     /* lets lines reach near edges */
  margin: 0;
  text-align: center;
}

/* Long stretching lines */
.page-hero__bar::before,
.page-hero__bar::after{
  content: "";
  height: 1px;
  background: rgba(255,255,255,.55); /* use white on hero */
  flex: 1 1 auto;
  max-width: none !important;
}

/* Title: REMOVE the big box padding so lines sit close */
.page-hero__title{
  display: inline-block;
  margin: 0;
  padding: 0 8px;      /* tiny breathing room between text and lines */
  border: 0;
  font-size: 3.0rem !important;
  line-height: 1.15;
  color: #f8f9fa;
}

/* Kill any old swooshes on the title */
.page-hero__title::before,
.page-hero__title::after{
  content: none !important;
  display: none !important;
}

/* Mobile tuning */
@media (max-width: 767.98px){
  .page-hero__bar{
    gap: 14px;
    padding: 0 14px;
  }
  .page-hero__title{
    font-size: 1.6rem !important;
    padding: 0 6px;
  }
}
/* =========================================================
   FIX: Footer callout title goes off-screen (mobile + some widths)
   Paste LAST
   ========================================================= */

.u-foot-cta .callout__title{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* allow wrapping */
  white-space: normal !important;
  flex-wrap: wrap !important;

  /* stop overflow */
  overflow: hidden;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;

  text-align: center !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* If your title is a flex container with before/after lines */
.u-foot-cta .callout__title::before,
.u-foot-cta .callout__title::after{
  flex: 1 1 0;
  min-width: 18px;
}

/* Mobile: keep it readable and never spill */
@media (max-width: 575.98px){
  .u-foot-cta .callout__title{
    white-space: nowrap !important;
    font-size: clamp(16px, 5.1vw, 1.4rem) !important;
    line-height: 1.2;
    gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 575.98px){
  #contact .contact-heading{
    font-size: clamp(18px, 4.4vw, 24px) !important;
    line-height: 1.25 !important;
  }
}
/* CONTACT button - consistent typography on all screens */
#contact .btn-submit{
  font-family: inherit !important;   /* forces same font as the rest of the site */
  font-size: 0.95rem !important;     /* lock it */
  font-weight: 400;
  letter-spacing: .5px;
}

/* Hover/focus (fixed) */
#contact .btn-submit:hover,
#contact .btn-submit:focus{
  background: #737f6f !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none;
}

/* Small phones: change size/spacing ONLY (not font) */
@media (max-width: 576px){
  #contact .btn-submit{
    min-width: 190px;
    padding: 10px 18px;
    /* no font-size here */
  }
}
/* Mobile menu: make the right column wider */
#mobileNav .mobile-nav-inner{
  display: flex;
}

/* default (tablet and up) */
#mobileNav .mobile-nav-left{
  flex: 0 0 56%;
}
#mobileNav .mobile-nav-right{
  flex: 0 0 44%;
  max-width: 44%;
}

/* phones: make right side even wider */
@media (max-width: 767.98px){
  #mobileNav .mobile-nav-left{
    flex: 0 0 52%;
  }
  #mobileNav .mobile-nav-right{
    flex: 0 0 48%;
    max-width: 48%;
  }
}
.tour-link{
  color: #737f6f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tour-link:hover{
  color: #737f6f;
  opacity: .85;
}
.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: 1em;          /* 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.6em !important;
  height: 1em !important;
  display: block;
}
/* ============================
   Mobile drawer layout / styles
   ============================ */

body.nav-open #mobileNav.mobile-nav-panel.open {
  transform: translateX(0%) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #737f6f !important;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto;
}

/* Main drawer inner */
#mobileNav .mobile-nav-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  padding: 150px 24px 48px;
  color: #fff;
}

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

/* Tablet and small desktop layout */
@media (min-width: 768px) {
  #mobileNav .mobile-nav-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    max-width: 820px;
    margin: 0 auto;
    gap: 70px;
    padding: 260px 40px 60px;
  }

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

  #mobileNav .mobile-nav-right {
    flex: 0 0 38%;
    max-width: 38%;
    margin-top: 0;
  }
}

/* Fix shorter tablet screens like 1024 x 768 */
@media (min-width: 768px) and (max-height: 820px) {
  #mobileNav .mobile-nav-inner {
    max-width: 760px;
    gap: 55px;
    padding: 210px 36px 45px;
  }

  #mobileNav .mobile-nav-link {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }

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

  #mobileNav .mobile-nav-eyebrow {
    margin-bottom: 1rem;
  }

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

  #mobileNav .mobile-nav-address {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  #mobileNav .mobile-nav-social a {
    font-size: 0.78rem;
  }
}

/* Larger desktop drawer */
@media (min-width: 1200px) and (min-height: 821px) {
  #mobileNav .mobile-nav-inner {
    max-width: 900px;
    gap: 100px;
    padding: 290px 40px 70px;
  }
}

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

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

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

#mobileNav .mobile-nav-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  line-height: 1.2;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
}

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

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

#mobileNav .mobile-nav-link:hover::after,
#mobileNav .mobile-nav-link:focus-visible::after {
  width: 100%;
}

/* Apply Now CTA */
#mobileNav .mobile-nav-cta {
  margin-top: 1.75rem;
}

#mobileNav .mobile-nav-cta-btn {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  border-radius: 2px;
  border: 1px solid #fff;
  text-decoration: none;
  color: #6d5434;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
}

#mobileNav .mobile-nav-cta-btn:hover {
  background: transparent;
  color: #fff;
}

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

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

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

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

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

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

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

/* Badges row */
#mobileNav .mobile-nav-badges i {
  font-size: 1.1rem;
}

/* Medium screens and tablets */
@media (max-width: 991.98px) {
  #mobileNav .mobile-nav-inner {
    padding-top: 175px;
  }

  #mobileNav .mobile-nav-link {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }

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

  #mobileNav .mobile-nav-eyebrow {
    font-size: 0.7rem;
    margin-bottom: 1rem;
  }

  #mobileNav .mobile-nav-cta {
    margin-top: 1.4rem;
  }

  #mobileNav .mobile-nav-cta-btn {
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
  }

  #mobileNav .mobile-nav-phone {
    font-size: 0.9rem;
  }

  #mobileNav .mobile-nav-address {
    font-size: 0.8rem;
  }

  #mobileNav .mobile-nav-social a {
    font-size: 0.72rem;
  }
}

/* Phones: hide right contact/social column */
@media (max-width: 767.98px) {
  #mobileNav .mobile-nav-inner {
    padding: 135px 28px 45px;
  }

  #mobileNav .mobile-nav-right {
    display: none;
  }

  #mobileNav .mobile-nav-left {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  #mobileNav .mobile-nav-link {
    font-size: 1.0rem !important;
    line-height: 1.18 !important;
  }

  #mobileNav .mobile-nav-link::after {
    bottom: -2px;
    height: 1.5px;
  }
}

/* Short phones */
@media (max-width: 767.98px) and (max-height: 700px) {
  #mobileNav .mobile-nav-inner {
    padding-top: 100px;
  }

  #mobileNav .mobile-nav-link {
    font-size: 1.0rem !important;
  }

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

  #mobileNav .mobile-nav-eyebrow {
    margin-bottom: 0.75rem;
  }
}

/* Small phones: change size/spacing ONLY */
@media (max-width: 576px) {
  #contact .btn-submit {
    min-width: 190px;
    padding: 10px 18px;
  }
}
/* ==================================================
   Extra compact mobile menu override for 1024 x 768
   ================================================== */

@media (min-width: 768px) and (max-height: 820px) {

  #mobileNav .mobile-nav-inner {
    max-width: 680px !important;
    gap: 44px !important;
    padding: 175px 32px 36px !important;
  }

  #mobileNav .mobile-nav-link {
    font-size: 1.25rem !important;
    line-height: 1.12 !important;
  }

  #mobileNav .mobile-nav-item + .mobile-nav-item {
    margin-top: 0.38rem !important;
  }

  #mobileNav .mobile-nav-eyebrow {
    font-size: 0.62rem !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: 0.16em !important;
  }

  #mobileNav .mobile-nav-cta {
    margin-top: 1.05rem !important;
  }

  #mobileNav .mobile-nav-cta-btn {
    min-width: 150px !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
  }

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

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

  #mobileNav .mobile-nav-block + .mobile-nav-block {
    margin-top: 24px !important;
  }

  #mobileNav .mobile-nav-phone {
    font-size: 0.78rem !important;
  }

  #mobileNav .mobile-nav-address {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

  #mobileNav .mobile-nav-social a {
    font-size: 0.68rem !important;
  }

  #mobileNav .mobile-nav-badges i {
    font-size: 0.95rem !important;
  }
}
/* ==================================================
   Force Schedule a Tour / Check Availability stacked
   ================================================== */

@media (min-width: 768px) and (max-height: 820px) {

  /* Any link after the Apply Now button inside the left menu */
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ a,
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ div a,
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ p a,
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ span a {
    display: block !important;
    width: fit-content !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  /* If the two links are inside a wrapper after Apply Now */
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ div,
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ p,
  #mobileNav .mobile-nav-left .mobile-nav-cta ~ span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    margin-top: 10px !important;
  }

  /* Directly target likely classes */
  #mobileNav .mobile-nav-tour,
  #mobileNav .mobile-nav-availability,
  #mobileNav .mobile-nav-schedule,
  #mobileNav .mobile-nav-check,
  #mobileNav .schedule-tour,
  #mobileNav .check-availability {
    display: block !important;
    width: fit-content !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    white-space: normal !important;
  }
}
/* ==================================================
   Mobile nav CTA links
   Schedule a Tour / Check Availability
   ================================================== */

#mobileNav .mobile-nav-cta-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

#mobileNav .mobile-nav-cta-links .mobile-nav-link {
  display: inline-block !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Compact screens like 1024 x 768 */
@media (min-width: 768px) and (max-height: 820px) {
  #mobileNav .mobile-nav-cta-links {
    gap: 4px !important;
    margin-top: 10px !important;
  }

  #mobileNav .mobile-nav-cta-links .mobile-nav-link {
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
  }
}

/* Phones */
@media (max-width: 767.98px) {
  #mobileNav .mobile-nav-cta-links {
    gap: 5px !important;
    margin-top: 12px !important;
  }

  #mobileNav .mobile-nav-cta-links .mobile-nav-link {
    font-size: .85rem !important;
    line-height: 2.0 !important;
  }
}
/* ==================================================
   Mobile nav center address and social content
   ================================================== */

@media (max-width: 767.98px) {

  #mobileNav .mobile-nav-inner {
    align-items: center !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-left,
  #mobileNav .mobile-nav-right {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-main {
    width: 100% !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-cta {
    text-align: center !important;
  }

  #mobileNav .mobile-nav-cta-links {
    align-items: center !important;
  }

  #mobileNav .mobile-nav-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 23px !important;
  }

  #mobileNav .mobile-nav-block {
    width: 100% !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-address,
  #mobileNav .mobile-nav-address a {
    display: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-social {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-social a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  #mobileNav .mobile-nav-badges {
    justify-content: center !important;
  }
}