/* CSS Variables */

:root {
  --BackgroundColor: #2B2B2B;
  --SecondaryBGColor: #9B7B38;

  --headerBG: #FFFFFF;
  --headerNav: #FFFFFF;
  --headerHover: #555555;

  --primary-clr: #19373c;
  --primary-clr-i: #333333;
  --primary-clr-f: #00363D;
  --primary-clr-h: #9B7B38;
  --secondary-clr: #ebb45a;
  --secondary-clr-light: #ecc88e;
  --accent-clr: #F0EBDC;
  --accent-O-clr: #4b4b4bdb;
  --bold-clr: #000000 !important;

  --overlay-clr: rgba(0,0,0,0.8);
  --overlay-bd: saturate(180%) blur(10px);

  --header-clr: #2B2B2B;

  --header-black-clr: #000000;

  --text-clr: #2B2B2B;
  --text-clr-white: #FFFFFF !important;
  --text-clr-black: #000000 !important;

  --ff-primary: "scale-variable", sans-serif !important;
  --ff-secondary: helvetica, Arial, sans-serif;
  --ff-header: 'Alegreya', serif !important;

  --fs-clamp-hero: clamp(2rem, 1.2vw, 1.15rem);
  --fs-clamp-body: clamp(1.2rem, 1.3vw, 1.5rem);
  --fs-clamp-h1: clamp(3rem, 5.2vw, 6rem);
  --fs-clamp-h2: clamp(2.5rem, 3.5vw, 5rem);
  --fs-clamp-h3: clamp(2.3rem, 3vw, 4.7rem);
  --fs-clamp-h4: clamp(1.5rem, 2.2vw, 2.1rem);
  --fs-clamp-h5: clamp(1.5rem, 1.6vw, 1.8rem);
  --fs-clamp-btn: clamp(1.3rem, 1.4vw, 1.8rem);
  --fs-clamp-learn-more-btn: clamp(1.1rem, 1.3vw, 1.4rem);

  --fs-btn-padding: 1.3rem 4.3rem;
  --fs-learn-more-btn-padding: 1.3rem 2.3rem;

  --fs-16px: 1rem;
  --fs-18px: 1.125rem;
  --fs-22px: 1.4rem;
  --fs-24px: 1.5rem;
  --fs-27px: 1.7rem;

  --gallery-font-size: 1.5rem;
  --gallery-font-size-sm: 1.3rem;

  --gallery-lh: 1.3;

  --fw-n: 300;
  --fw-m: 600;
  --fw-b: 800;

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

  --border-bottom: 4px solid #9B7B38;
  --border-left: 10px solid #9B7B38;
  --header-bb: 3px solid #2B2B2B;

  --toc-subimg-1: url("/images/pieces/amenities.png");
  --toc-subimg-2: url("/images/pieces/neighborhood.png");

  --h2-font-size: 1rem;
  --med-font-size: .975rem;
  --small-font-size: .775rem;

  --hero-overlay-left-bleed: 40px;   /* push left: increase if there's still a white strip */
  --hero-overlay-right-bleed: 0px;   /* set >0 if you want it to cover more to the right */

  --nav-item-gap: 14px;
  --nav-font-size: 0.86rem;
  --nav-line-height: 32px;
  --nav-item-wrap: nowrap;
  --nav-item-max-width: 18rem;

  --letter-spacing: 0.1em;

  --cb-panel-opacity: 0.95;   /* adjust opacity here (0.70–0.90) */
  --cb-scrim: 0.20;           /* optional overall darken on photo */

  --sc-primary: #0f4f4a; /* <<< set to your primary green */
  --sc-text: #0b1f1d;
  --sc-cream: #f3efe4;   /* if you want inputs to match site */
}

/*======== Responsive Typography ========*/

@media (max-width: 1600px) {
  :root {
      --h2-font-size: 1.1rem;
      --med-font-size: .975rem;
      --small-font-size: .775rem;
      --gallery-font-size: 1.2rem;
      --gallery-font-size-sm: 1rem;
      --nav-item-gap: 12px;
      --nav-font-size: 0.84rem;
      --nav-line-height: 16px;
      --nav-item-wrap: nowrap;
      --nav-item-max-width: 12rem;
  }
}

@media (max-width: 1400px) {
  :root {
      --h2-font-size: 1.1rem;
      --med-font-size: .975rem;
      --small-font-size: .775rem;
      --gallery-font-size: 1.2rem;
      --gallery-font-size-sm: 1rem;
      --nav-item-gap: 10px;
      --nav-font-size: 0.81rem;
      --nav-line-height: 16px;
      --nav-item-wrap: wrap;
      --nav-item-max-width: 7rem;
  }
}

@media (max-width: 1300px) {
  :root {
      --h2-font-size: 1.1rem;
      --med-font-size: .975rem;
      --small-font-size: .775rem;
      --gallery-font-size: 1.2rem;
      --gallery-font-size-sm: 1rem;
      --nav-item-gap: 8px;
      --nav-font-size: 0.74rem;
      --nav-line-height: 15px;
      --nav-item-wrap: wrap;
      --nav-item-max-width: 6.9rem;
  }
}

@media (max-width: 1200px) {
  :root {
      --h2-font-size: 1.1rem;
      --med-font-size: .975rem;
      --small-font-size: .775rem;
      --nav-item-gap: 14px;
      --nav-font-size: 0.68rem;
      --nav-line-height: 16px;
      --nav-item-wrap: wrap;
      --nav-item-max-width: 5rem;
  }
}

@media (max-width: 1120px) {
  :root {
      --h2-font-size: 1.1rem;
      --med-font-size: .975rem;
      --small-font-size: .775rem;
      --nav-item-gap: 5px;
      --nav-font-size: 0.72rem;
      --nav-line-height: 16px;
      --nav-item-max-width: 6rem;
      --nav-item-wrap: wrap;
  }
}

@media (max-width: 991px) {
  :root {
      --h2-font-size: 1.2rem;
      --med-font-size: 1rem;
      --small-font-size: .875rem;
      --gallery-font-size: 1rem;
      --gallery-font-size-sm: 1rem;
      --gallery-lh: 1.2 !important;
      --nav-item-gap: 2px;      /* space between nav items */
      --nav-font-size: 0.58rem;  /* base nav font size */
      --nav-line-height: 7px;   /* keep or tighten if you want the bar more compact */
      --nav-item-wrap: nowrap;   /* lets items wrap to second line */
      --nav-item-max-width: 10rem;   /* max width of nav items */
  }
}

@media screen and (max-width: 700px) {
  :root {
      --h2-font-size: 1.2rem;
      --med-font-size: 1rem;
      --small-font-size: .875rem;
      --gallery-font-size: 1rem;
      --gallery-font-size-sm: .8rem;
      --gallery-lh: 1.2 !important;
      --nav-item-gap: 18px;      /* space between nav items */
      --nav-font-size: 0.78rem;  /* base nav font size */
      --nav-line-height: 27px;   /* keep or tighten if you want the bar more compact */
      --nav-item-wrap: wrap;   /* lets items wrap to second line */
      --nav-item-max-width: 10rem;   /* max width of nav items */
  }
}

@media screen and (max-width: 600px) {
  :root {
      --h2-font-size: 1.2rem;
      --med-font-size: 1rem;
      --small-font-size: .875rem;
      --gallery-font-size: 1.5rem;
      --gallery-font-size-sm: 1.5rem;
      --gallery-lh: 1 !important;
      --nav-item-gap: 18px;      /* space between nav items */
      --nav-font-size: 0.78rem;  /* base nav font size */
      --nav-line-height: 27px;   /* keep or tighten if you want the bar more compact */
      --nav-item-wrap: wrap;   /* lets items wrap to second line */
      --nav-item-max-width: 9rem;   /* max width of nav items */
  }
}


html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: var(--ff-primary);
}
hr {
  border-color: #0092D2;
  border-width: 3px;
  max-width: 150px;
}
hr.light {
  border-color: #07466F;
}

.blue-light{
		background:#0092D2;
	height:1px;
	max-width:195px;
}

    .google-maps {
        position: relative;
        padding-bottom: 40%; /* This is the aspect ratio */
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.greyline {
  background: #fff;
  height:1px;
  width:80% !important;
  margin-top: 10px;
  margin-bottom:10px;
}

hr.orange{
	border-color:#FFCA26;
}

hr.green-light{
	border-color:#0092D2;
	border-width:1px;
	max-width:100px;
}

.orange-light{
	background:#FFCA26;
	width:150px;
	height:1px;
	margin-top:5px;
	margin-bottom:10px;
}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #444444;
}
a:hover,
a:focus {
  color: #0092D2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-primary);
}
p {
  font-size: 23px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.bg-primary {
  background-color: #Fff;
  color:#444444;
}
.bg-dark {
  background-color: #07466F;
  color: white;
}
.text-faded {
  color:#444444;
  font-weight:300;
  font-size:22px;
}
section {
  padding: 50px 0;
}
aside {
  padding-top: 45px;
  padding-bottom:10px;
}
.no-padding {
  padding: 0;
}


/* CUSTOMS */

.copyright{
	font-size:12px;
	margin-bottom:0px;
	text-align:center;
	margin-top:80px;
}

.section-sub-heading{
	color:#CCCCCC;
	text-transform: uppercase;
}

.text-blue{
	color:#07466F;
	font-weight:400;
}

.footer-text-blue{
	color:#2EA5D9 !important;
	font-weight:400;
}

.footer-text-white{
	color:#fff !important;
	font-weight:300;
}

.direction-link{
	color:#0092D2;
	font-size:25px;
	font-weight:300;
	text-decoration: underline;
}
.container-fluid2{
	padding-right:30px;
	padding-left:30px;
	margin-right:auto;
	margin-left:auto;
	background-color: rgb(255 255 255 / 100%);
	height:85px;
}

.navbar-right{
	margin-top:22px;
	margin-right:60px !important;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.linkbox{
	border:1px solid #07466F;
	background:#07466F;
	color:#fff !important;
	margin-left:10px;
}

.linkbox:hover{
	background:#fff !important;
	color:#07466F !important;
}

.margin-top{
	margin-top:50px;
}

.margin-top2{
	margin-top:30px;
}
 
.dropdown-menu > li.kopie > a {
    padding-left:5px;
}
 
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;margin-left:-1px;
   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;
 }
  
.dropdown-submenu > a:after {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;  
  height: 0;     
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
 }

.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: none;
}  

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	background-color:transparent;
	border-bottom:1px solid #eaeaea;
}
  
@media (max-width: 767px) {


	.caretimg{
		background:url('../images/logos/caret1.png') no-repeat 100% 48% !important;
	}
  .navbar-nav  {
     display: inline;
  }
  .navbar-default .navbar-brand {
    display: inline;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    margin-top: 2px;   
    text-align:right;
  }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #0092D2;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     background-color: #ccc;
   }

   .navbar-nav .open .dropdown-menu {
     border-bottom: 1px solid white; 
     border-radius: 0;
   }
  .dropdown-menu {
      padding-left: 10px;
  }
  .dropdown-menu .dropdown-menu {
      padding-left: 20px;
   }
   .dropdown-menu .dropdown-menu .dropdown-menu {
      padding-left: 30px;
   }
   li.dropdown.open {
    border: 0px solid red;
   }

}
 
@media (min-width: 768px) {
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
}  

.caretimg{
	background: url('../images/logos/caret1.png') no-repeat 95% 48%;
				-webkit-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  -ms-transition: background .3s ease-in-out;
  -o-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
}

.widthfull{
	width:100%;
}

/* .col-lg-2{
	width:48%;
} */

.img-center{
	margin: 0 auto;
}

.img-left{
	float:left;
}

.text-footer{
	color:#fff;
	font-size:14px;
	text-transform: uppercase;
	font-weight:300;
}

.text-footer2{
	color:#fff;
	font-size:14px;
	font-weight:300;
}

.text-footer3{
	color:#fff;
	font-size:13px;
	font-style: italic;
	float:left;
	margin-top: 10px;
}

.btn-blue{
	background:#58c8e0
}


/* .col-lg-4{
	width:27%;
}

.col-sm-4{
	width:15%;
} */

.text-footer a, .text-footer2 a{
	color:#fff;
}

.text-height{
	line-height:34px;
}

.form-control{
	width:69% !important;
	margin-right:5px;
	float:left;
}

.img-block{
	display:inline;
	padding-right:20px;
	float:left;
}

.hospital-span{
	overflow: hidden;
	display:block;
	padding-top:8%;
}

.logo-img{
	width:125px;
	margin-top:7px;
	margin-left:60px;
}

/* .col-lg-3{
	width:50%;
} */

.nav>li>a{
	padding:10px 17px;
	letter-spacing:.7px;
}
.dropdown-menu{
background:rgba(51,51,51,0.8);
}

.dropdown-menu>li>a{
	color:#fff;
	text-transform: uppercase;
	font-size:12px;
	padding:3px 12px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
	color:#fff;
	background:#07466F;
}

@media (max-width: 1060px) {
.logo-img{
	margin-top:0px;
	margin-left:0px;
}

.nav>li>a{
	padding:10px 10px;
	letter-spacing:.7px;
}

.navbar-right{
	margin-right:0px !important;
}

}

.img-spacing{
	margin-top: 10px;
	margin-bottom:10px;
	display:inline;
}

.navbar-toggle{
	margin-top:20px;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.gallery-img{
	margin-bottom:20px;
}

.text-center{
	text-align: center;
}

.navbar-default {
  background-color: rgb(255, 255, 255);
  border-color: var(--primary-clr);
  font-family: var(--ff-primary);
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
  color: #fff;
  font-family: var(--ff-primary);
  font-weight: 700;
  text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eee;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-clr);
  text-transform: uppercase;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color: var(--primary-clr);
  color: var(--headerBG);
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--primary-clr);
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: var(--secondary-clr);
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: var(--secondary-clr) !important;
  background-color: rgb(255 255 255);
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .navbar-default .navbar-header .navbar-brand {
    color: rgba(255, 255, 255);
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: #eee;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: #fff;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: var(--secondary-clr);
  }
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: orange;
    font-size: 14px;
    
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: var(--secondary-clr);
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: var(--primary-clr);
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: var(--secondary-clr);
  }
}
header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('../images/pieces/front2.jpg');
  text-align: center;
  color: white;
}


.interior-header{
	background-image: url('../images/pieces/main1.jpg');
}
header .header-content {
  position: relative;
  text-align: center;
  padding: 100px 15px 100px;
  width: 100%;
}
header .header-content .header-content-inner h1 {
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
}
header .header-content .header-content-inner hr {
  margin: 30px auto;
}
header .header-content .header-content-inner p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  header {
    min-height: 100%;
  }
  
  .interior-header{
	  min-height:57%;
  }
  header .header-content {
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
  }
  header .header-content .header-content-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  header .header-content .header-content-inner h1 {
    font-size: 65px;
    letter-spacing:5px;
  }
  header .header-content .header-content-inner p {
    font-size: 30px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.section-heading {
  margin-top: 0;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: var(--fs-clamp-h2);
  line-height: 1.05 !important;
  color: var(--header-black-clr) !important;
}
.service-box {
  max-width: 400px;
  margin: 50px auto 0;
}
@media (min-width: 992px) {
  .service-box {
    margin: 20px auto 0;
  }
}
.service-box p {
  margin-bottom: 0;
}
.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}
.portfolio-box .portfolio-box-caption {
  color: white;
  opacity: 0;
  display: block;
  background: rgba(240, 95, 64, 0.9);
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-family: var(--ff-primary);
  padding: 0 15px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-size: 18px;
}
.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
.portfolio-box:focus {
  outline: none;
}
@media (min-width: 768px) {
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}
.call-to-action h2 {
  margin: 0 auto 20px;
}
.text-primary {
  color: #F05F40;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-default {
  color: #fff;
  background-color: #07466F;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #222222;
  background-color: #f2f2f2;
  border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: white;
}
.btn-default .badge {
  color: white;
  background-color: #222222;
}
.btn-primary {
  color: white;
  background-color: var(--secondary-clr);
  border-color: var(--secondary-clr);
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: var(--secondary-clr-light);
  border-color: var(--secondary-clr-light);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--secondary-clr);
  border-color: var(--secondary-clr);
}
.btn-primary .badge {
  color: var(--secondary-clr);
  background-color: white;
}
.btn {
  font-family: var(--ff-primary);
  border: none;
  font-weight: 700;
  font-size:17px;
}
.btn-xl {
  padding: 10px 22px;
  margin-top:20px;
  margin-bottom:20px;
}

.btn-xl2 {
  padding: 17px 40px;
  margin-top:50px;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}

@media (max-width: 992px) {
	
	
	.navbar-collapse{
		text-align:right;
		float:right;
	}
	
	.nav>li>a{
	padding:10px 8px;
}
	
	}
	
	
@media (max-width: 800px) {
		.logo-toc{
		width:40%;
		top:40px;
		position:relative;	
	}
}	
	@media (max-width: 992px) {
			.nav>li>a{
	padding:10px 8px;
}
.navbar-default .nav > li > a{
	font-size:12px;
}
		}
		

@media (max-width: 500px){
.service-box p{
	text-align:center;
}

.footer p{
	text-align: left !important;
}

.img-block{
	display:block;
	margin: 0 auto;
}
}

@media (max-width: 1200px){
	
		.col-lg-2{
		width:100%;
	}
.col-lg-3{
	width:100%;
}

.img-block{
	display:block;
	margin:0 auto;
	float:none;
	padding-right:0px;
}

.hospital-span{
	text-align:center;
}

.col-lg-4{
	width:100%;
}

/* .col-sm-4{
	width:100%;
	float:none;
} */

}

/* =========================
   LEASING HERO (FlexSlider + angled overlay)
   Put this block at the VERY END of creative.css
   ========================= */

/* Kill the theme header background image for ONLY this hero */
header.lease-hero{
  background-image:none !important;
  min-height:0 !important;
  height:clamp(320px, 38vw, 520px) !important;
  position:relative;
  overflow:hidden;
}

/* Wrapper */
.lease-hero.hero-main-wrap {
  position: relative;
  overflow: hidden;
}

/* FlexSlider base cleanup (prevents weird gaps/whitespace) */
.lease-hero .flexslider {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* IMPORTANT: remove UL default spacing */
.lease-hero .flexslider .slides {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.lease-hero .flexslider .slides > li {
  margin: 0 !important;
}

/* Set a consistent hero height */
.lease-hero .hero-main-slider,
.lease-hero .hero-main-slider .flex-viewport,
.lease-hero .hero-main-slider .slides,
.lease-hero .hero-main-slider .slides > li {
  height: clamp(320px, 38vw, 520px);
}

/* Slide image layer */
.lease-hero .slide-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Overlay sits above slider */
.lease-hero .hero-main-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
}

/* Angled panel */
.lease-hero .hero-main-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 40%;
  width: 60%;

  /* If this page is NOT at the site root, use ../images/... instead of /images/... */
  background:
    url("../images/pieces/2000-15th-St-N_Pattern_RGB.png") repeat,
    var(--primary-clr);

  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 0.96;
  z-index: 0;
}

/* Content area */
.lease-hero .hero-main-overlay-inner {
  position: relative;
  z-index: 1;

  width: 60%;
  height: 100%;
  margin-left: auto;

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

  padding: 0 clamp(1rem, 3vw, 3rem);
  text-align: center;
}

.lease-hero .hero-copy {
  max-width: 40ch;
}

/* Headline + subhead (override your global p margins) */
.lease-hero .hero-copy h1 {
  margin: 0 0 0.6rem 0;
  font-family: var(--ff-primary);
  font-weight: 700;
  line-height: 1.05;
  color: var(--secondary-clr) !important;
  font-size: clamp(1.6rem, 2.6vw, 3.2rem);
}

.lease-hero .hero-copy p {
  margin: 0 !important;
  font-family: var(--ff-secondary);
  color: #fff;
  font-weight: 300;
  font-size: var(--fs-clamp-hero);
  line-height: 1.35;
}

/* Mobile: panel becomes full width */
@media (max-width: 768px) {
  .lease-hero .hero-main-overlay {
    justify-content: center;
  }

  .lease-hero .hero-main-overlay::before {
    left: 0;
    width: 100%;
    clip-path: none;
  }

  .lease-hero .hero-main-overlay-inner {
    width: 100%;
  }
}


/* =========================
   FOOTER – 475B / CP / TW
   ========================= */

.footer__logos {
    background-color: var(--primary-clr);
    color: #ffffff;
    padding: 50px 50px 50px;
    display: flex;
    justify-content: center;
}

.footer-inner__logos {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* left side: main logo + address */
.footer-left__logos {
    display: flex;
    flex-direction: column;
    gap: 0.9rem; /* slightly more separation */
}

.footer-main-logo__logos {
    max-width: 130px;
    height: auto;
    display: block;
}

.footer-address__logos {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing);
}

.footer-disclaimer__logos {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
}

/* right side: partner logos */
.footer-right__logos {
    display: flex;
    flex-direction: column;   /* stack on desktop */
    align-items: flex-end;
    gap: 1.5rem;
}

/* Partner logo sizes */
.footer-CP-logo__logos,
.footer-TW-logo__logos {
    max-height: 55px;
    width: auto;
    display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .footer-inner__logos {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .footer-left__logos {
        align-items: center;
    }

    .footer-main-logo__logos {
        max-width: 110px;
        margin-bottom: 0.25rem;
    }

    .footer-address__logos {
        font-size: 1rem;
    }

    .footer-disclaimer__logos {
      font-size: .6rem;
    }

    /* Mobile: CP/TW side by side */
    .footer-right__logos {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }
}

/* =========================
   EVOLVE SECTION (4-up cards)
   ========================= */

   .evolve-section { padding: 60px 0; }

   .evolve-title{
     margin: 0 0 30px 0;
     font-family: var(--ff-primary);
     font-weight: 700;
     color: var(--header-clr);
     font-size: var(--fs-clamp-h2);
   }
   
   .evolve-card{
     text-align: center;
     padding: 10px 10px 0;
   }
   
   .evolve-img{
     width: 100%;
     max-width: 240px;     /* keeps the image from getting huge on desktop */
     margin: 0 auto 14px;
     aspect-ratio: 1 / 1;  /* perfect square */
     overflow: hidden;
   }
   
   .evolve-img img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .evolve-h{
     margin: 0 0 10px 0;
     font-family: var(--ff-primary);
     font-weight: 700;
     color: var(--secondary-clr);
     font-size: var(--fs-clamp-h5);
   }
   
   .evolve-p{
     margin: 0 auto;
     max-width: 30ch;
     font-family: var(--ff-secondary);
     font-weight: 300;
     color: var(--text-clr);
     font-size: var(--fs-clamp-body);
     line-height: 1.45;
     font-family: var(--ff-primary);
     letter-spacing: var(--letter-spacing);
   }
   
   /* Stack nicely on small devices */
   @media (max-width: 767px){
     .evolve-card{ padding: 18px 10px; }
     .evolve-img{ max-width: 280px; }
     .evolve-p{ max-width: 36ch; }
   }
   
   .angled-promo {
    position: relative;
    overflow: hidden;
    height: clamp(260px, 32vw, 520px);
  }
  
  /* background image */
  .angled-promo__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
  }

  .angled-promo__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
  
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .angled-promo__overlay::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
    width: 60%;
  
    background: var(--primary-clr);
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.96;
  }

  .angled-promo__content {
    position: relative;
    z-index: 1;
    width: 40%;
    padding: clamp(1rem, 3vw, 3rem);
    text-align: center;
  }
  
  .angled-promo__content h2 {
    color: #fff;
    font-size: var(--fs-clamp-h3);
    margin-bottom: 1rem;
    font-weight: 700;
  }
  @media (max-width: 768px) {
    .angled-promo {
      height: clamp(220px, 45vw, 300px);
    }
  
    .angled-promo__overlay::before {
      left: 30%;
      width: 70%;
    }
  
    .angled-promo__content {
      width: 50%;
      padding: 1.25rem;
    }
  }

  @media (max-width: 480px) {
    .angled-promo {
      height: 240px;
    }
  
    .angled-promo__overlay::before {
      left: 25%;
      width: 75%;
    }
  
    .angled-promo__content {
      width: 60%;
    }
  }

  .angled-promo__content .btn {
    padding: var(--fs-btn-padding);
    font-size: var(--fs-clamp-btn);
    text-transform: capitalize;
  }
  
  .angled-section {
    position: relative;
    overflow: hidden;
    height: clamp(260px, 32vw, 420px);
  }
  
  .angled-section__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
  }

  .angled-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
  
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .angled-section__overlay::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
    width: 60%;
  
    background: var(--primary-clr);
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.96;
  }

  .angled-section__content {
    position: relative;
    z-index: 1;
    width: 60%;
    padding: clamp(1rem, 3vw, 3rem);
    text-align: center;
  }

  .angled-section__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.05) 40%,
      rgba(0,0,0,0.0) 60%
    );
  }
  
  .angled-section .btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  .angled-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  }

  @media (max-width: 768px) {
    .angled-section {
      height: clamp(220px, 45vw, 300px);
    }
  
    .angled-section__overlay::before {
      left: 30%;
      width: 70%;
    }
  
    .angled-section__content {
      width: 70%;
      padding: 1.25rem;
    }
  }
  
  @media (max-width: 480px) {
    .angled-section {
      height: 240px;
    }
  
    .angled-section__overlay::before {
      left: 25%;
      width: 75%;
    }
  
    .angled-section__content {
      width: 75%;
    }
  }
  
/* =========================
   SoMa Before/After Compare
   ========================= */

   .soma-compare{
    position: relative;
    max-width: 1150px;
    margin: 28px auto 0;
  
    aspect-ratio: 3 / 2;   /* ✅ matches 2400 × 1600 */
    width: 100%;
    height: auto;
  
    overflow: hidden;
    background: #e9e9e9;
    border-radius: 6px;
    box-shadow: var(--shadow);
    --pos: 50%;
  }
  
  /* Images stack */
  .soma-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display:block;
  }
  
  /* Mask the top layer (BEFORE) instead of shrinking it */
  .soma-img--before{
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
    will-change: clip-path;
  }
  
  /* Handle line */
  .soma-handle{
    position:absolute;
    top:0;
    left: var(--pos);
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.95);
    transform: translateX(-1px);
    pointer-events: none;
  }
  
  /* Handle knob */
  .soma-handle-knob{
    position:absolute;
    top:50%;
    left:50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  
  /* Give the knob a subtle “grip” */
  .soma-handle-knob::before,
  .soma-handle-knob::after{
    content:"";
    position:absolute;
    top:50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(0,0,0,0.35);
    border-right: 2px solid rgba(0,0,0,0.35);
    transform: translateY(-50%) rotate(45deg);
  }
  .soma-handle-knob::before{ left: 14px; transform: translateY(-50%) rotate(225deg); }
  .soma-handle-knob::after{ right: 14px; }
  
  /* Range input sits on top, invisible */
  .soma-range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor: ew-resize;
  }
  
  /* BEFORE/AFTER tags */
  .soma-tag{
    position:absolute;
    top: 12px;
    padding: 6px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    border-radius: 4px;
    color: #fff;
    background: rgba(0,0,0,0.45);
    transition: opacity 180ms ease;
    pointer-events:none;
  }
  .soma-tag--before{ left: 12px; opacity: 1; }
  .soma-tag--after{ right: 12px; opacity: 1; }
  
  .soma-subhead{
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 800;
    font-size: var(--fs-clamp-h5);
    color: var(--header-black-clr);
  }
  
  .soma-body{
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
  }


/* =========================
   BUILDING HIGHLIGHTS
   ========================= */
   .highlights-section{
    background: var(--primary-clr);
    color: #fff;
    padding: clamp(44px, 6vw, 78px) 0;
  }
  
  .highlights-title{
    margin: 0 0 34px 0;
    font-family: var(--ff-primary);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff !important;
    font-size: var(--fs-clamp-h2);
  }
  
  .highlights-grid{
    margin-top: 8px;
  }
  
  .highlight-item{
    min-height: 130px;              /* a bit more breathing room */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  .highlight-item::before{
    content:"";
    display:block;
    width: 40px;
    height: 3px;
    margin: 0 auto 12px;
    background: var(--secondary-clr);
    opacity: 0.95;
  }
  
  .highlight-text{
    margin: 0 !important;
    font-family: var(--ff-primary);
    font-weight: 300;
    color: rgba(255,255,255,0.80);
    line-height: 1.35;
    font-size: var(--fs-clamp-body);
    text-align: center;
    letter-spacing: var(--letter-spacing);
  }
  
  /* tighter on small screens */
  @media (max-width: 767px){
    .highlight-item{
      padding: 16px 8px 18px;
      min-height: 88px;
    }
    .highlight-item::before{
      width: 34px;
      margin-bottom: 10px;
    }
    .highlight-text{
      line-height: 1.25;
    }
  }
  
 /* =========================
   CTA BAND – Integrated Community
   ========================= */

.cta-band{
  position: relative;
  width: 100%;
  height: clamp(220px, 38vw, 320px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Background image */
.cta-band__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  background-repeat: no-repeat;

  will-change: opacity, transform;
  transition: opacity 900ms ease, transform 6500ms linear;
  transform: scale(1.04);
}

.cta-band__bg--a{ z-index: 0; opacity: 1; }
.cta-band__bg--b{ z-index: 0; opacity: 0; }

/* Keep your overlay above the images */
.cta-band__overlay{ position:absolute; inset:0; z-index:1; }
.cta-band__content{ position:relative; z-index:2; }

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

/* 20% green overlay */
.cta-band__overlay{
  position: absolute;
  inset: 0;
  background: var(--primary-clr);
  opacity: 0.70;
  z-index: 1;
}



/* Content */
.cta-band__content{
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 1.25rem;
  color: #fff;
}

.cta-band__content h2{
  margin: 0 0 0.6rem 0;
  font-family: var(--ff-primary);
  font-weight: 700;
  color: #fff !important;
  font-size: var(--fs-clamp-h2);
  padding-bottom: 20px;
}

.cta-band__content p{
  margin: 0 0 1.4rem 0 !important;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-clamp-body);
  line-height: 1.35;
  letter-spacing: var(--letter-spacing);
}

/* Button */
.cta-band .cta-btn{
  background: var(--secondary-clr);
  color: #fff !important;
  padding: var(--fs-btn-padding);
  font-size: var(--fs-clamp-btn);
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border-radius: 0px !important;
}

/* Mobile tuning */
@media (max-width: 768px){
  .cta-band{
    height: clamp(220px, 60vw, 260px);
  }

  .cta-band__content p br{
    display: none;
  }
}

.cta-band--static {
  background-image: url("/images/pieces/image_hor_2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

 
/* =========================
   HAPPENINGS – 3 cards
   ========================= */

   .happenings {
    padding: 50px 0;
  }
  
  .happenings__title {
    color: var(--secondary-clr) !important;
    text-transform: none; /* keep your style if you want all-caps */
  }
  
  /* Make cards equal-height in each row */
  .happenings__grid > [class*="col-"] {
    margin-top: 20px;
  }
  
  .happenings-card {
    height: 100%;
    text-align: center;
  }
  
  .happenings-card__img {
    width: 100%;
    aspect-ratio: 3 / 2;   /* matches 1200x800 */
    overflow: hidden;
  }
  
  .happenings-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .happenings-card__headline {
    margin: 16px 0 6px;
    font-weight: 700;
    font-size: var(--fs-clamp-h5);
    color: var(--text-clr);
  }
  
  .happenings-card__meta {
    margin: 0 0 10px;
    font-size: var(--fs-clamp-body);
    color: rgba(0,0,0,0.55);
  }
  
  .happenings-card__body {
    margin: 0;
    font-size: var(--fs-clamp-body);
    line-height: 1.4;
    color: rgba(0,0,0,0.7);
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: var(--letter-spacing);
  }

  .happenings-card__link{
    display:block;
    color: var(--text-clr-black);
    font-size: var(--fs-clamp-body);
    text-decoration: none;
    margin: 2px 0;
    letter-spacing: var(--letter-spacing);
  }

  .happenings-card__link:hover{
    color: var(--primary-clr-h);
    text-decoration: underline;
  }


/* HAPPENINGS: force 3-up until mobile */
.happenings .happenings__grid > .col-md-4,
.happenings .happenings__grid > .col-sm-4 {
  float: left;
  /* width: 33.3333%; */ /* 3-up until mobile */
  width: 25%; /* 4-up on desktop */
}

@media (max-width: 767px) {
  .happenings .happenings__grid > .col-md-4,
  .happenings .happenings__grid > .col-sm-4 {
    width: 100%;
  }
}

  
  /* Mobile: stacked + breathing room */
  @media (max-width: 767px) {
    .happenings-card__headline { font-size: var(--fs-clamp-h5); }
    .happenings-card__meta { font-size: var(--fs-clamp-h2); }
    .happenings-card__body { font-size: var(--fs-clamp-body); }
  }

  /* =========================
   HAPPENINGS – bullet points
   ========================= */

.happenings-bullets {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
}

.happenings-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

.happenings-bullets li {
  position: relative;
  padding-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-clr);
  max-width: 260px;
}

/* Gold accent line above each bullet */
.happenings-bullets li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background-color: var(--secondary-clr);
}

/* Tablet */
@media (max-width: 991px) {
  .happenings-bullets ul {
    gap: 1.75rem;
  }
}

/* Mobile stack */
@media (max-width: 767px) {
  .happenings-bullets ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .happenings-bullets li {
    max-width: 340px;
    font-size: 1.05rem;
  }
}

/* =========================
   CTA TEXT BAND – “Questions?”
   (same sizing as cta-band, but text-only styling)
   ========================= */

   .cta-textband{
    position: relative;
    width: 100%;
    height: clamp(260px, 38vw, 260px);
    overflow: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  
    /* light base like screenshot */
    background: #efe6d7; /* tweak to match comp */
    margin-top: 60px;
  }
  
  /* optional background image (subtle, right side) */
  .cta-textband__bg{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    opacity: 1;          /* keeps it subtle */
    filter: saturate(0.8);
    z-index: 0;
  }
  
  /* content */
  .cta-textband__content{
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 0 1.25rem;
  }
  
  /* green text treatment */
  .cta-textband__content h2{
    margin: 0 0 0.6rem 0;
    font-family: var(--ff-primary);
    font-weight: 700;
    color: var(--primary-clr) !important;
    font-size: var(--fs-clamp-h2);
    padding-bottom: 20px;
  }
  
  .cta-textband__content p{
    margin: 0 0 1.4rem 0 !important;
    font-family: var(--ff-primary);
    font-weight: 300;
    color: rgba(25,55,60,0.75); /* derived from primary */
    font-size: var(--fs-clamp-body);
    line-height: 1.35;
    letter-spacing: var(--letter-spacing);
  }
  
  /* button spacing */
  .cta-textband__btn{
    font-size: var(--fs-clamp-btn);
    border-radius: 0px !important;
    padding: var(--fs-btn-padding);
  }
  
   /* button spacing */
   .learn-more__btn{
    font-size: var(--fs-clamp-learn-more-btn);
    border-radius: 0px !important;
    padding: var(--fs-learn-more-btn-padding);
  }

  /* mobile */
  @media (max-width: 768px){
    .cta-textband{
      height: clamp(220px, 60vw, 260px);
    }
    .cta-textband__content p br{
      display: none;
    }
    .cta-textband__bg{
      background-position: center;
      opacity: 0.12;
    }
  }
 
  /* =========================
   AVAILABILITIES – Suite Navigator
   ========================= */

.avail{
  padding: 50px 0;
}

.avail__title{
  color: var(--secondary-clr) !important;
  text-transform: none;
}

/* Tabs row */
.avail__tabs{
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin: 18px 0 28px;
}

/* Make tabs scrollable on smaller screens */
.avail__tabs{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.avail__tabs > li{
  float: none;              /* override BS3 float */
  display: inline-flex;
}
.avail__tabs > li > a{
  border: 0 !important;
  color: var(--text-clr);
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 12px 16px;
}
.avail__tabs > li.active > a,
.avail__tabs > li.active > a:focus,
.avail__tabs > li.active > a:hover{
  color: var(--text-clr);
  background: transparent;
  border: 0 !important;
  position: relative;
}
.avail__tabs > li.active > a::after{
  content:"";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 3px;
  background: rgba(0,0,0,0.75);
}

/* Panel layout */
.avail__panel{
  display: flex;
  align-items: flex-start; /* 👈 was center */
}
.avail__suite{
  margin: 10px 0 6px;
  font-family: var(--ff-primary);
  font-weight: 800;
  font-size: var(--fs-clamp-h5);
  color: #000;
}
.avail__sf{
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  color: rgba(0,0,0,0.45);
  margin-bottom: 26px;
}

.avail__bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  color: rgba(0,0,0,0.55);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: var(--letter-spacing);
}
.avail__bullets li{
  margin: 6px 0;
}

.avail__links{
  display: flex;
  gap: 42px;
  flex-wrap: wrap;
}
.avail__link{
  color: rgba(0,0,0,0.75);
  text-decoration: underline;
  font-weight: 400;
}
.avail__link:hover{
  color: var(--primary-clr);
}

/* Diagram */
.avail__imgWrap{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 6px; /* optional micro-adjust */
  padding-left: 10px;
}
.avail__img{
  width: min(100%, 480px);
  height: auto;
  display: block;
}

/* Mobile: stack text then image */
@media (max-width: 767px){
  .avail__panel{
    display: block;
  }
  .avail__imgWrap{
    justify-content: center;
    padding-left: 0;
    margin-top: 22px;
  }
  .avail__links{
    gap: 24px;
  }
}

/* =========================
   LEASING INQUIRIES
   ========================= */
   .leasing-inquiries{
    padding: 60px 0;
  }
  
  .leasing-inquiries__title{
    color: var(--secondary-clr) !important;
    text-transform: none;
    font-size: var(--fs-clamp-h2);
  }
  
  .leasing-inquiries__rule{
    border-color: #07466F; /* matches your hr.light */
  }
  
  .leasing-inquiries__grid{
    margin-top: 18px;
  }
  
  .leasing-card{
    text-align: center;
    padding: 18px 5px 10px;
  }
  
  .leasing-card__accent{
    display:block;
    width: 52px;
    height: 3px;
    margin: 0 auto 14px;
    background: rgba(0,0,0,0.45);
  }
  
  .leasing-card__name{
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--primary-clr);
    font-size: var(--fs-clamp-h5);
  }
  
  .leasing-card__link{
    display:block;
    color: var(--text-clr-black);
    font-size: var(--fs-clamp-body);
    text-decoration: none;
    margin: 2px 0;
    letter-spacing: var(--letter-spacing);
  }
  
  .leasing-card__link:hover{
    color: var(--primary-clr-h);
    text-decoration: underline;
  }
  
  /* Mobile stack */
  @media (max-width: 767px){
    .leasing-card{ padding: 16px 10px 18px; }
    .leasing-inquiries__grid > [class*="col-"]{ margin-top: 10px; }
  }

 /* =========================
   MAIN NAV – 475 BRANNAN
   ========================= */

   .navbar {
    min-height: 72px; /* matches logo visual height */
  }
  
  .navbar-nav {
    display: flex;
    align-items: center;   /* vertical centering */
    padding-top: 7px;
  }

/* Base nav alignment */
.navbar-nav.navbar-right {
  margin-top: 0;
}

/* Nav links */
.navbar-default .navbar-nav > li > a {
  color: var(--primary-clr);
  font-family: var(--ff-primary);
  font-weight: 600;

  font-size: 1.3rem;       /* ⬅️ was too small */
  letter-spacing: 0.08em;

  padding: 0 18px;          /* ⬅️ horizontal only */
  line-height: 72px;        /* ⬅️ MATCH navbar height */

  background: transparent !important;
  transition: color 0.2s ease;
}

/* Hover / focus */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--secondary-clr);
  background: transparent !important;
}

.navbar-default .navbar-nav > .active > a {
  color: var(--secondary-clr);
}

/* Active section (optional – good for scrollspy) */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--secondary-clr);
  background: transparent !important;
}

/* Remove Bootstrap caret / borders if any linger */
.navbar-default .navbar-nav > li > a::after {
  display: none;
}

@media (max-width: 991px) {
  .navbar-default .navbar-nav > li > a {
    padding: 10px 14px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
  }
  /* Base nav alignment */
  .navbar-nav.navbar-right {
    margin-top: -10px;
  }
}

@media (max-width: 767px) {
  .navbar-nav {
    display: block;
  }

  .navbar-default .navbar-nav > li > a {
    line-height: 1.4;
    padding: 10px 16px;
    font-size: var(--fs-clamp-body);
  }
}

/* --- HERO slider: force slides + background layer to fill --- */
header.lease-hero { background-image: none !important; }

.lease-hero .hero-main-slider { 
  position: relative; 
  z-index: 1; 
}

.lease-hero .hero-main-slider .slides > li{
  position: relative;
  height: clamp(320px, 38vw, 520px);
}

.lease-hero .slide-background{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* FIX: prevent theme header min-height from stretching the lease hero */
header.lease-hero {
  min-height: 0 !important;
  height: clamp(320px, 38vw, 520px);
}

header.lease-hero .hero-main-slider .slides{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* THIS is the layer you actually see */
header.lease-hero .hero-main-slider .slides > li{
  position:relative;
}

/* Make sure children fill the header height */
header.lease-hero .hero-main-slider,
header.lease-hero .hero-main-slider .flex-viewport,
header.lease-hero .hero-main-slider .slides,
header.lease-hero .hero-main-slider .slides > li {
  height: 100% !important;
}

header.lease-hero .slide-background{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.lease-hero .flexslider .slides > li { display: none; }
.lease-hero .flexslider .slides > li.flex-active-slide { display: block; }


/* Background layer for vanilla hero rotator */
#leaseHero { position: relative; overflow: hidden; }
#leaseHero .hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
  transform: scale(1.02); /* tiny scale helps feel “cinematic” */
}

/* Diagonal wipe */
#leaseHero .hero-wipe{
  position:absolute; inset:-20%;
  z-index:2;
  background: rgba(0,0,0,0.28);
  pointer-events:none;
  transform: translateX(-140%) skewX(-18deg);
  opacity: 0;
}

#leaseHero.is-animating .hero-wipe{
  opacity: 1;
  transition: transform 750ms ease, opacity 200ms ease;
  transform: translateX(140%) skewX(-18deg);
}

/* Copy transitions */
#leaseHero .hero-copy{
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}
#leaseHero.copy-out .hero-copy{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1px);
}
#leaseHero.copy-in .hero-copy{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Make sure your angled green overlay stays on top of bg/wipe */
header.lease-hero .hero-main-overlay{ z-index: 3; }
header.lease-hero .hero-main-overlay::before{ z-index: 0; }
header.lease-hero .hero-main-overlay-inner{ z-index: 1; }

/* Crossfade / Ken Burns-lite */
#leaseHero .hero-bg{
  transition: opacity 550ms ease;
  opacity: 1;
}
#leaseHero.is-fading .hero-bg{ opacity: 0; }

/* Optional gentle motion */
#leaseHero .hero-bg{
  transform: scale(1.04);
  transition: opacity 550ms ease, transform 5500ms linear;
}

/* =========================
   HERO ROTATOR (No FlexSlider)
   Diagonal wipe + crossfade + gentle zoom
   ========================= */

   header.lease-hero{
    background-image:none !important;
    position:relative;
    overflow:hidden;
    height: clamp(320px, 38vw, 520px);
    min-height: 0 !important;
  }
  
  /* Background image layer */
  #leaseHero .hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  
    /* Crossfade */
    opacity: 1;
    transition: opacity 550ms ease;
  
    /* Gentle motion (Ken Burns-lite) */
    transform: scale(1.04);
    transition-property: opacity, transform;
    transition-duration: 550ms, 5500ms;
    transition-timing-function: ease, linear;
  }
  
  /* Fade-out class used right before swapping images */
  #leaseHero.is-fading .hero-bg{
    opacity: 0;
  }
  
  /* Diagonal wipe layer */
  #leaseHero .hero-wipe{
    position:absolute;
    inset:-20%;
    z-index:2;
    background: rgba(0,0,0,0.28);
    pointer-events:none;
  
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
  }
  
  /* When animating, sweep across */
  #leaseHero.is-animating .hero-wipe{
    opacity: 1;
    transition: transform 750ms ease, opacity 200ms ease;
    transform: translateX(140%) skewX(-18deg);
  }
  
  /* Overlay sits above everything */
  .lease-hero .hero-main-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  
  /* Angled panel */
  .lease-hero .hero-main-overlay::before{
    content:"";
    position:absolute;
    top:0; bottom:0;
  
    left:40%;
    width:60%;
  
    background:
      url("../images/pieces/2000-15th-St-N_Pattern_RGB.png") repeat,
      var(--primary-clr);
  
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity:0.96;
    z-index:0;
  }
  
  /* Inner content */
  .lease-hero .hero-main-overlay-inner{
    position:relative;
    z-index:1;
    width:60%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 clamp(1rem, 3vw, 3rem);
    text-align:center;
    top: 40px;
  }
  
  .lease-hero .hero-copy{
    max-width: 40ch;
  }
  
  /* Headline + subhead */
  .lease-hero .hero-copy h1{
    margin:0 0 0.6rem 0;
    font-family: var(--ff-primary);
    font-weight:700;
    line-height:1.05;
    color: var(--secondary-clr) !important;
    font-size: clamp(1.6rem, 2.6vw, 3.2rem);
  }
  .lease-hero .hero-copy p{
    margin:0 !important;
    font-family: var(--ff-secondary);
    color:#fff;
    font-weight:300;
    font-size: var(--fs-clamp-hero);
    line-height:1.35;
  }
  
  /* Copy animation */
  #leaseHero .hero-copy{
    transition: opacity 300ms ease, transform 300ms ease;
  }
  #leaseHero.copy-out .hero-copy{
    opacity: 0;
    transform: translateY(8px);
  }
  #leaseHero.copy-in .hero-copy{
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Mobile: panel full width */
  @media (max-width:768px){
    .lease-hero .hero-main-overlay{ justify-content:center; }
    .lease-hero .hero-main-overlay::before{
      left:0; width:100%;
      clip-path:none;
    }
    .lease-hero .hero-main-overlay-inner{ width:100%; }
    .lease-hero .hero-main-overlay::before{
      content:"";
      position:absolute;
      top:0; bottom:0;
    
     
      width:100%;
    
      background:
        url("../images/pieces/2000-15th-St-N_Pattern_RGB.png") repeat,
        var(--primary-clr);
    
      
      opacity:0.66;
      z-index:0;
    }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    #leaseHero .hero-bg,
    #leaseHero .hero-wipe,
    #leaseHero .hero-copy{
      transition: none !important;
      transform: none !important;
    }
  }
  
/* =========================
   SIMPLE IMAGE + CENTER TEXT BAND
   ========================= */

   .image-band{
    position: relative;
    width: 100%;
    height: clamp(260px, 30vw, 420px);
    padding: 0 !important;          /* override global section padding */
    overflow: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  /* Background image layer */
  .image-band__bg{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  
  /* Dark overlay for text readability */
  .image-band::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.30);   /* tweak (0.20–0.45) */
    z-index: 1;
  }
  
  /* Content */
  .image-band__content{
    position: relative;
    z-index: 2;
    padding: 0 1.25rem;
    max-width: 900px;
  }
  
  .image-band__content h2{
    margin: 0;
    font-family: var(--ff-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff !important;
    font-size: var(--fs-clamp-h3);
    line-height: 1.05;
    text-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }
  
  /* Optional subhead */
  .image-band__content p{
    margin: 0.9rem 0 0 0 !important;
    color: rgba(255,255,255,0.85);
    font-weight: 300;
    font-size: var(--fs-clamp-body);
    line-height: 1.35;
  }
  
  /* Mobile */
  @media (max-width: 768px){
    .image-band{ height: clamp(220px, 55vw, 320px); }
  }
/* ===== EASY BAND (image + text panel) ===== */
.easy-band{
  background: #efe6dc; /* fallback beige */
  position: relative;
  overflow: hidden;
}

/* Put the texture on the whole section */
.easy-band::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--easy-bg);
  background-repeat:no-repeat;
  background-position: right center; /* matches mock */
  background-size: cover;
  z-index:0;
}


.easy-band__inner{
  max-width: 1400px;          /* control total width */
  margin: 0 auto;
  padding: 0px 50px;         /* THIS is the gutter so nothing is flush */
}

/* Keep content above the background */
.easy-band__inner,
.easy-band__grid{
  position: relative;
  z-index: 1;
}

.easy-band__grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;  /* image wider than text */
  gap: 56px;                          /* space between image and text area */
  align-items: stretch;
}

/* LEFT: IMAGE */
.easy-band__media{
  position: relative;
  min-height: 300px; /* adjust band height */
  background-image: var(--easy-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--easy-focal-x) var(--easy-focal-y);
  overflow: hidden;
  border-radius: 2px; /* optional; remove if you need sharp edges */
}

/* Overlay ON TOP of the image (tint + pattern) */
.easy-band__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("images/pieces/2000-15th-St-N_Pattern_RGB.png") repeat;
  opacity: 1;
  pointer-events: none;
}

/* RIGHT: TEXT PANEL */
.easy-band__panel{
  position: relative;
  background: #efe6dc;
  overflow:hidden;
}

.easy-band__panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--easy-bg);
  background-repeat:no-repeat;
  background-position: right center;
  background-size: cover;
  z-index:0;
}

.easy-band__headline{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-clr);
  font-size: var(--fs-clamp-h3);
  line-height: 1.05;
  text-align: left;
  max-width: 12ch;
  z-index:1;
  position: relative;
}



/* ===== MOBILE ===== */
@media (max-width: 900px){
  .easy-band__inner{
    padding: 3px 22px; /* keep gutters on mobile too */
  }

  .easy-band__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .easy-band__media{
    min-height: 320px;
  }

  /* text centered under image, forced to one line safely */
  .easy-band__panel{
    justify-content: center;
    padding: 0;               /* looks cleaner under the image */
    background: none;         /* optional — matches your screenshot vibe */
  }

  .easy-band__headline{
    text-align: center;
    max-width: none;
    white-space: nowrap;      /* one line */
    font-size: var(--fs-clamp-h3);
  }
}



/* Your map sizing rules (contain / no crop) */
.easy-band__map{
  display:block;
  width: min(760px, 100%);
  height:auto;
  padding: clamp(18px, 3vw, 38px);
}

/* If you need the map to visually sit left like your mock */
@media (min-width: 992px){
  .easy-band__map{
    margin-left: clamp(24px, 4vw, 56px);
    margin-right: 0;
  }
}

/* =========================
   CONNECTION BAND (reusable)
   ========================= */

   .connection-band{
    position: relative;
    width: 100%;
    height: clamp(280px, 34vw, 460px);
    overflow: hidden;
    padding: 0 !important; /* override your global section padding */
    top: 80px;
    margin-bottom: 80px;
  }
  
  /* Background image layer */
  .connection-band__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
  
    background-image: var(--cb-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Optional: slight darken to help text contrast */
  .connection-band__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,var(--cb-scrim, 0.0));
  }
  
  /* Overlay container (right side) */
  .connection-band__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
  
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  /* Angled translucent green panel */
  .connection-band__overlay::before{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left: 34%;
    width: 66%;
  
    /* semi-transparent green + subtle pattern */
    /* background:
      url("../images/pieces/2000-15th-St-N_Pattern_RGB.png") repeat,
      var(--primary-clr); */
  
    opacity: var(--cb-panel-opacity, 0.0);
    clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  
  /* Text content area */
  .connection-band__content{
    position: relative;
    z-index: 2;
    width: 66%;
    padding: clamp(18px, 3vw, 56px);
    text-align: center;
    max-width: 760px;
    margin-right: clamp(10px, 2vw, 40px);
  }
  
  /* Headline (gold) */
  .connection-band__headline{
    margin: 0 0 14px 0;
    font-family: var(--ff-primary);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
  
    color: var(--secondary-clr) !important;
    font-size: var(--fs-clamp-h3);
    text-shadow: 0 10px 22px rgba(0,0,0,0.25);
    text-align: left;
    padding-left: clamp(-40px, 100px, 100px);
  }
  
  /* Sub text (light) */
  .connection-band__subhead{
    margin: 0 !important;
    font-family: var(--ff-primary);
    font-weight: 300;
    color: rgba(255,255,255,0.72);
    line-height: 1.35;
    font-size: clamp(16px, 1.35vw, 20px);
    text-align: left;
    padding-left: clamp(170px, 0px, 50px);
    letter-spacing: var(--letter-spacing);
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 900px){
    .connection-band{
      height: clamp(320px, 58vw, 520px);
    }
  
    .connection-band__overlay{
      justify-content: center;
    }
  
    /* Panel becomes full width (no angle) */
    .connection-band__overlay::before{
      left: 0;
      width: 100%;
      clip-path: none;
    }
  
    .connection-band__content{
      width: 100%;
      margin-right: 0;
      max-width: 680px;
    }
  
    .connection-band__subhead br{ display: none; text-align: center; padding-left: 0;}
  }
  

  /* =========================
   FOOTER 
   ========================= */

.footer475{
  background: var(--primary-clr-f);
  color: #fff;
  padding: 58px 50px;
}

.footer475__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}

/* LEFT */
.footer475__left{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer475__mark{
  width: 135px;
  height: auto;
  display: block;
}

.footer475__address{
  font-family: var(--ff-primary);
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55); /* mock: soft gray */
}

.footer475__legal{
  font-family: var(--ff-primary);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.35); /* even lighter */
  margin-top: 6px;
}

/* RIGHT */
.footer475__right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 58px; /* mock: big separation between CP and TW blocks */
  padding-top: 6px;
}

.footer475__group{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.footer475__label{
  font-family: var(--ff-primary);
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.35); /* mock label tone */
}

.footer475__partner{
  display: block;
  width: auto;
  height: 44px; /* base size; tweak below per-logo */
  opacity: 0.95;
}

.footer475__partner--cp{ height: 46px; }
.footer475__partner--tw{ height: 20px; }

/* Responsive */
@media (max-width: 900px){
  .footer475{
    padding: 44px 22px;
  }
  .footer475__inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .footer475__left{
    align-items: center;
  }

  .footer475__right{
    align-items: center;
    gap: 26px;
    padding-top: 0;
  }

  .footer475__group{
    align-items: center;
  }

  .footer475__partner{
    height: 40px;
  }

  .footer475__partner--tw{ 
    height: 18px; 
  }
}

/* =========================
   HOME HERO – dotted angled overlay + corrected headline
   Put this at the VERY END of creative.css
   ========================= */

/* Ensure hero is the intended height */
header#leaseHero.lease-hero{
  height: clamp(420px, 46vw, 680px);
  min-height: 0 !important;
  position: relative;
  overflow: hidden;
  top: 80px;
  margin-bottom: 50px;
}

/* Background image layer is already in your markup */
#leaseHero .hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  background-size: cover;
  background-position: right center; /* comp shows building on right */
  background-repeat:no-repeat;
  transform: scale(1.04);
  opacity: 1;
}

/* Overlay sits above bg */
header#leaseHero .hero-main-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Angled green panel + DOTTED SCREEN */
header#leaseHero .hero-main-overlay::before{
  content:"";
  position:absolute;
  top:0; bottom:0;

  left: 0;                 /* cover the left portion like the comp */
  width: 68%;              /* adjust if you want more/less green */

  /* Base green + dotted halftone + subtle vignette */
  background:
    /* vignette to deepen edges slightly */
    radial-gradient(120% 140% at 10% 50%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.06) 55%,
      rgba(0,0,0,0.00) 78%
    ),

    /* dotted screen (halftone-ish) */
    radial-gradient(circle,
      rgba(0,0,0,0.18) 1px,
      rgba(0,0,0,0.00) 1.9px
    ),

    /* solid green base */
    var(--primary-clr);

  /* dot sizing + spacing */
  background-size:
    100% 100%,     /* vignette */
    7px 7px,       /* dot grid */
    auto;

  /* slightly soften the dots */
  filter: saturate(1.05);

  /* angled edge like mock */
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);

  opacity: 0.96;
  z-index:0;
}

/* Content container inside the panel */
header#leaseHero .hero-main-overlay-inner{
  position: relative;
  z-index: 1;

  width: 68%;              /* must match panel width above */
  height: 100%;

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

  padding: 0 clamp(22px, 4vw, 64px);
  text-align:center;

  /* IMPORTANT: remove the old "top: 40px" behavior if present elsewhere */
  top: 0 !important;
}

/* Headline */
header#leaseHero .hero-copy{
  max-width: 18ch;          /* forces a clean 2-line break like comp */
}

header#leaseHero .hero-copy h1{
  margin: 0;
  color: #fff !important;

  font-family: var(--ff-primary);
  font-weight: 800;
  letter-spacing: -0.02em;  /* big type looks better slightly tighter */
  line-height: 0.98;

  /* tuned to match comp scale */
  font-size: clamp(3.2rem, 5.6vw, 6.1rem);

  /* tiny lift so it sits visually centered */
  transform: translateY(-2%);
}

/* Subhead off on home hero (safe if blank) */
header#leaseHero .hero-copy p{
  display:none;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  header#leaseHero.lease-hero{
    height: clamp(360px, 60vw, 520px);
  }

  header#leaseHero .hero-main-overlay::before{
    width: 100%;
    left: 0;
    clip-path: none; /* panel becomes full overlay on smaller screens */
    opacity: 0.80;

    /* bigger dots read better on mobile */
    background-size:
      100% 100%,
      9px 9px,
      auto;
  }

  header#leaseHero .hero-main-overlay-inner{
    width: 100%;
  }

  header#leaseHero .hero-copy{
    max-width: 20ch;
  }

  header#leaseHero .hero-copy h1{
    font-size: clamp(2.2rem, 7.2vw, 3.6rem);
    line-height: 1.02;
    transform: none;
  }
}

/* ===== HOME HERO final tweaks: flip angle + center 2-line headline ===== */

/* 1) Flip the diagonal direction (top long, bottom short) */
header#leaseHero .hero-main-overlay::before{
  width: 66%; /* keep or tweak */
  /* top hits farther right, bottom cuts in sooner */
  clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%);
}

/* 2) Center the content block inside the green panel */
header#leaseHero .hero-main-overlay-inner{
  width: 66%;
  justify-content: center;     /* center horizontally */
  text-align: center;          /* center text */
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}

/* 3) Force a clean 2-line wrap and keep it centered */
header#leaseHero .hero-copy{
  margin: 0 auto;              /* fixes “off to the right” */
  max-width: 18ch;             /* usually yields 2 lines for your headline */
}

header#leaseHero .hero-copy h1{
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-size: clamp(3.1rem, 5.7vw, 6.2rem);
}

/* Mobile stays full overlay */
@media (max-width: 900px){
  header#leaseHero .hero-main-overlay::before{
    width: 100%;
    clip-path: none;
  }
  header#leaseHero .hero-main-overlay-inner{
    width: 100%;
  }
  header#leaseHero .hero-copy{
    max-width: 22ch; /* a little wider on mobile */
  }
}

/* HARD FIX: center hero copy inside the panel (override older margin-left:auto rules) */
header#leaseHero .hero-main-overlay-inner{
  width: 66% !important;      /* match your panel width */
  margin: 0 !important;       /* kills margin-left:auto */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Make sure the copy block itself is centered */
header#leaseHero .hero-copy{
  margin: 0 auto !important;
  text-align: center !important;
}

/* If you still see drift: remove any inherited padding that’s asymmetric */
header#leaseHero .hero-main-overlay-inner{
  padding-left: clamp(24px, 4vw, 64px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
}

/* ===== HOME HERO: content must live inside the LEFT panel ===== */
header#leaseHero .hero-main-overlay{
  justify-content: flex-start !important; /* was flex-end; this was pushing copy onto photo */
}

header#leaseHero .hero-main-overlay-inner{
  width: 66% !important;      /* match panel width */
  margin: 0 !important;
  height: 100% !important;

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

  text-align: center !important;
  top: 0 !important;          /* kills the old nudge */
}

/* Force a clean 2-line wrap (no HTML changes) */
header#leaseHero .hero-copy{
  margin: 0 auto !important;
  max-width: 16ch !important; /* tune 14–18ch until it breaks into 2 lines */
}

/* =========================
   EVOLVE SECTION – match screenshot typography + spacing
   Place at VERY END of creative.css
   ========================= */

   .evolve-section{
    padding: 100px 0 90px !important;  /* more breathing room like comp */
  }
  
  .evolve-title{
    margin: 0 0 64px 0 !important;     /* big gap before cards */
    font-family: var(--ff-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #222 !important;
    font-size: var(--fs-clamp-h2) !important;
    line-height: 1.05 !important;
  }
  
  /* Optional: tighten container feel a bit on wide screens (comp looks roomy) */
  @media (min-width: 1200px){
    .evolve-section .container{
      width: 1180px; /* close to BS3 default but a touch wider */
    }
  }
  
  /* Cards grid spacing */
  .evolve-grid{
    margin-top: 0 !important;
  }
  
  .evolve-card{
    text-align: center;
    padding: 0 22px !important; /* more horizontal air between columns */
  }
  
  /* Image squares in comp read larger */
  .evolve-img{
    max-width: 280px !important;
    margin: 0 auto 28px !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  
  .evolve-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Orange headings: heavier + slightly larger + tight line-height */
  .evolve-h{
    margin: 0 0 16px 0 !important;
    font-family: var(--ff-primary) !important;
    font-weight: 800 !important;
    color: var(--secondary-clr) !important;
    font-size: var(--fs-clamp-h5) !important;
    line-height: 1.15 !important;
  }
  
  /* Card body: LIGHT gray, smaller, no weird tracking */
  .evolve-p{
    margin: 0 auto !important;
    max-width: 28ch !important;
  
    font-family: var(--ff-secondary) !important; /* cleaner like screenshot */
    font-weight: 300 !important;
    letter-spacing: 0 !important;
  
    font-size: var(--fs-clamp-body) !important;
    line-height: 1.45 !important;
    color: var(--text-clr);
  }
  
  /* Mobile: stack with comfortable spacing */
  @media (max-width: 767px){
    .evolve-section{
      padding: 70px 0 60px !important;
    }
  
    .evolve-title{
      margin-bottom: 40px !important;
    }
  
    .evolve-card{
      padding: 0 14px !important;
      margin-bottom: 36px;
    }
  
    .evolve-img{
      max-width: 320px !important;
      margin-bottom: 20px !important;
    }
  }

  /* =========================
   ANGLED PROMO – final polish
   ========================= */

/* Make the green overlay SOLID */
.angled-promo__overlay::before{
  background: #0f3f44 !important; /* solid brand green */
  opacity: 1 !important;          /* kill transparency */
}

/* Content alignment: left-justify headline + button together */
.angled-promo__content{
  align-items: flex-start !important; /* left align */
  text-align: left !important;
}

/* Headline: slightly smaller + cleaner leading */
.angled-promo__content h2{
  font-size: var(--fs-clamp-h3) !important; /* down from previous */
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 28px !important;
  font-weight: 700 !important;
  max-width: 14ch; /* keeps the 2-line wrap */
}

/* Button: already square, just align visually with text */
.angled-promo__content .btn.btn-primary{
  align-self: flex-start; /* ensures it lines up with headline left edge */
  border-radius: 0 !important;
}


/* =========================================
   IMAGE BAND – remove gutters + match type
   ========================================= */

/* ===== IMAGE BAND: add white padding around the image ===== */
.image-band{
  position: relative;
  background: #fff;           /* the visible “padding” color */
  padding: 28px 28px 0;       /* top, sides, (optional) bottom */
  overflow: hidden;
}

/* Inset the background so the white padding shows */
.image-band__bg{
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  bottom: 0;                  /* keep image flush to bottom like your screenshot */
  background-size: cover;
  background-position: center;
}

/* Keep text centered over the image area (not the white padding area) */
.image-band__content{
  position: relative;
  z-index: 2;
  padding: 90px 20px;         /* controls the band height */
  text-align: center;
}

/* Match the “tracking” feel from other headings */
.image-band__content h2{
  font-size: var(--fs-clamp-h3);
  letter-spacing: -0.015em;     /* subtle tightening like your other big type */
  line-height: 1.08;
  padding-top: 40px;
}

/* =========================================
   LEASING INQUIRIES – spacing + earlier stack
   ========================================= */

/* The leasing section should control its own spacing,
   NOT borrow perceived spacing from the band above it. */
.leasing-inquiries{
  padding-top: 70px;            /* space after the image band */
  padding-bottom: 80px;
}

/* If you still see a “double gap”, remove bottom padding on the band above */
#come-see-home .image-band__content{
  padding-bottom: 70px;         /* reduce if needed (try 60–70) */
}

/* Center cards + clean wrap behavior */
.leasing-card{
  text-align: center;
}

/* Emails: prevent weird mid-width wrapping / overflow */
.leasing-card__link{
  display: block;
  white-space: normal;
  word-break: break-word;       /* email can break if it must */
  overflow-wrap: anywhere;      /* better than breaking layout */
}

/* Stack sooner than Bootstrap's sm breakpoint.
   Bootstrap 3: col-sm kicks in at 768px.
   So we force stacking earlier (at 992 and down). */
@media (max-width: 991px){
  .leasing-inquiries__grid > [class*="col-"]{
    float: none !important;
    width: 100% !important;
    max-width: 520px;           /* keeps it from feeling too wide */
    margin: 0 auto 26px;
  }
}



.image-band{
  background-color: #fff !important;
}
.image-band::before,
.image-band::after{
  content: none !important;
}
.image-band__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25); /* whatever your tint is */
}

.image-band__bg{
  top: 58px !important;
  left: 100px !important;
  right: 100px !important;
  bottom: 0 !important;
}
.image-band{ background:#fff; }


/* ===== Angled promo: pro crossfade slideshow ===== */
.angled-promo{
  position: relative;
  overflow: hidden;
}

/* both image layers */
.angled-promo__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity;
  transition: opacity 900ms ease;
}

/* layer order */
.angled-promo__image--a{ z-index: 1; opacity: 1; }
.angled-promo__image--b{ z-index: 2; opacity: 0; }

/* keep your overlay/content above images */
.angled-promo__overlay{
  position: absolute;
  inset: 0;              /* top/right/bottom/left:0 */
  z-index: 3;
}

/* keep the content above the overlay */
.angled-promo__content{
  position: relative;
  z-index: 4;
}

.angled-promo__image{ background-position: 50% 35%; }

/* ===== EASY BAND FIXES (put at END of file) ===== */

/* 1) Vertically center the text in the right panel */
.easy-band__panel{
  display: flex;
  align-items: center;        /* vertical */
  justify-content: flex-start;/* keep it left */
  padding: clamp(26px, 3vw, 56px);
}

/* 2) Remove the “beige border” around the map
      Cause: the container has a background + the img padding exposes it */
.easy-band__media{
  background-image: none !important;  /* stop painting beige inside the map box */
  background: transparent !important;
  border-radius: 0 !important;        /* optional: removes any rounded-edge halo */
}

/* Also remove the pattern overlay on the map container (it can read like an edge) */
.easy-band__media::after{
  content: none !important;
}

/* 3) Make the map 10% bigger + remove the padding that reveals the background */
.easy-band__map{
  padding: 0 !important;              /* key fix for the “border” */
  width: min(836px, 100%) !important; /* 760 * 1.10 = 836 */
  height: auto;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Keep your desktop nudge if you still want it */
@media (min-width: 992px){
  .easy-band__map{
    margin-left: clamp(24px, 4vw, 56px) !important;
  }
}

/* Mobile: keep centered under image */
@media (max-width: 900px){
  .easy-band__panel{
    justify-content: center;
    padding: 18px 0;
  }
}

/* EASY BAND: remove background from the text panel */
.easy-band__panel{
  background: transparent !important;
}

.easy-band__panel::before{
  content: none !important;          /* removes the panel bg image layer */
  background: none !important;
}

/* ===== HERO ===== */
.hero-main-wrap{
  position: relative;
  overflow: hidden;
  min-height: 420px;
  height: 48vh;
  max-height: 560px;
}

/* Background layers for crossfade */
.hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity, transform;
  transition: opacity 900ms ease, transform 6500ms linear;
  transform: scale(1.04);
}

.hero-bg--a{ opacity: 1; z-index: 0; }
.hero-bg--b{ opacity: 0; z-index: 0; }

/* Darken a touch so white text stays readable */
.hero-main-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
}

/* Halftone green overlay */
.hero-main-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  opacity: .95;
  background:
    radial-gradient(circle at 1px 1px, rgba(13, 78, 73, .55) 1px, transparent 1.6px) 0 0/6px 6px,
    linear-gradient(90deg, rgba(13, 78, 73, .60), rgba(13, 78, 73, .25) 55%, rgba(13, 78, 73, 0) 75%);
  pointer-events:none;
}

/* Angled green shape over the image (right side wedge) */
.hero-wipe{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;

  /* wedge that sits on the right side */
  background: rgba(13, 78, 73, .75);
  clip-path: polygon(74% 0%, 100% 0%, 100% 100%, 62% 100%);
  /* the slanted edge */
  transform: skewX(-10deg);
  transform-origin: right;
  opacity: .95;
}

/* Content centering */
.hero-main-overlay{
  position: relative;
  z-index: 4;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 48px 18px;
}

.hero-main-overlay-inner{
  width: 100%;
  max-width: 1100px;
  display: grid;
  place-items: center;
}

.hero-copy{
  text-align: center;
}

.hero-copy h1{
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5vw, 74px);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

#leaseHeroSubhead{
  margin: 10px 0 0;
  color: rgba(255,255,255,.92);
}

/* Mobile tweak */
@media (max-width: 640px){
  .hero-main-wrap{
    height: 44vh;
    min-height: 360px;
  }
  .hero-wipe{
    clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 58% 100%);
    transform: skewX(-8deg);
  }
}

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


/* ===== HERO 475 (v2) ===== */
.hero-475{
  position: relative;
  overflow: hidden;
  height: 55vh;
  min-height: 420px;
  max-height: 560px;
  background: var(--primary-clr-f);
  top: 50px;
}

/* Background crossfade layers */
.hero-475__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 900ms ease, transform 6500ms linear;
  transform: scale(1.04);
  will-change: opacity, transform;
  z-index: 0;
  top: -250px;
}
.hero-475__bg--a{ opacity: 1; }
.hero-475__bg--b{ opacity: 0; }

/* Optional light darken for readability (applies to full hero) */
.hero-475::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,.12);
  pointer-events:none;
}

/* Green wedge overlay (dots ONLY here) */
.hero-475__green{
  position:absolute;
  inset:-2px; /* tiny bleed to avoid hairline gaps */
  z-index:2;
  pointer-events:none;

  /* base green */
  /* background: rgba(13, 78, 73, .92); */

  /* angled shape */
  clip-path: polygon(0% 0%, 74% 0%, 62% 100%, 0% 100%);
}

/* dot pattern + subtle gradient, confined to the green shape */
.hero-475__green::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 1.8px) 0 0/7px 7px,
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0));
}

/* Center the headline in the FULL hero (not just on green) */
.hero-475__content{
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 18px;
  text-align: center;
}

/* Prevent the text from drifting into the wedge edge on wide screens */
.hero-475__content h1{
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: var(--fs-clamp-h1);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  max-width: 900px;
}

/* Responsive tweak to keep the wedge proportion similar */
@media (max-width: 700px){
  .hero-475{
    height: 24vh;
    min-height: 360px;
  }
  .hero-475__green{
    clip-path: polygon(0% 0%, 78% 0%, 64% 100%, 0% 100%);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-475__bg{ transition:none !important; transform:none !important; }
}

/* =========================================
   STAY CONNECTED SLIDE-IN
   ========================================= */


/* Overlay */
.sc-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Optional subtle dim behind panel */
.sc-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(25,55,60,.60);
  opacity: 0;
  transition: opacity .25s ease;
}

/* Panel */
.sc-panel{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  transform: translateX(105%);
  transition: transform .35s ease;
  pointer-events: auto;

  /* Transparent brand panel */
  background: rgba(240, 234, 219, 0.99); /* semi-transparent primary */
  color: var(--primary-clr);

  /* Optional “blurry / frosted” look (supported browsers only) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: -10px 0 30px rgba(25,55,60,.25);
  padding: 28px 26px 22px;
}

/* Open state */
.sc-overlay.is-open{
  pointer-events: auto;
}
.sc-overlay.is-open::before{
  opacity: 1;
}
.sc-overlay.is-open .sc-panel{
  transform: translateX(0);
}

/* Close button */
.sc-close{
  position:absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--primary-clr);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.sc-close:hover{ background: rgba(255,255,255,.18); }

/* Title */
.sc-title{
  margin: 6px 0 18px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Form layout */
.sc-form{ margin-top: 6px; }
.sc-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sc-full{ grid-column: 1 / -1; }

.sc-field span{
  display:block;
  font-size: 12px;
  opacity: .95;
  margin-bottom: 6px;
}

.sc-field input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.90);
  color: var(--primary-clr);
  outline: none;
}
.sc-field input::placeholder{ color: var(--primary-clr); }
.sc-field input:focus{
  border-color: rgba(255,255,255,.99);
  background: rgba(255,255,255,.99);
}

.sc-disclaimer{
  margin: 14px 0 16px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .92;
}

.sc-submit{
  width: 140px;
  height: 44px;
  border: 0;
  background: #f2b24b; /* your gold button, tweak as needed */
  color: #FFF;
  font-weight: 600;
  cursor: pointer;
}
.sc-submit:hover{ filter: brightness(0.98); }

/* Hide honeypot */
.sc-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}