#es-wrapper-features {
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) 0;

  /* Background */
  background-image: url(/estate-safes/images/es-features-backg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* key for responsiveness */

  /* Max width containment */
  max-width: 2900px;
  width: 100%;

  box-sizing: border-box;

  text-align: center;
}

@media (max-width: 768px) {
  #es-wrapper-features {
    background-position: center center;
  }
}


#es-wrapper-features h1 {
  margin: 0;
  padding: 0;

  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;

  color: #000;

  font-family: "Playfair Display", serif;
}

#es-wrapper-features h2 {
  margin-top: 14px;
  padding: 0;

  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;

  color: rgba(0, 0, 0, 0.85);

  font-family: "Montserrat", sans-serif;
}

#es-wrapper-features h1,
#es-wrapper-features h2 {
  line-height: 1.15;
}


#es-wrapper-features h3{
	margin:0;
	padding:0;
	font-size:30px;
}

#es-wrapper-features h4{
	margin:0;
	padding:0;
	font-size:24px;
}

#es-wrapper-features h5{
	margin:0;
	padding:0;
	font-size:18px;
}




/* Full-bleed section with background fade */
#ft-hight-capacity-container{
  width: 100%;
  margin: 0;
  box-sizing: border-box;

  /* light white -> transparent from bottom to top */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.55) 28%,
    rgba(255, 255, 255, 0.18) 52%,
    rgba(255, 255, 255, 0) 70%
  );
}

/* Your original “container” rules move here */
#ft-hight-capacity-container .ft-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 60px) clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}


/* Two-column layout on desktop */
#ft-hight-capacity-container .ft-row{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: stretch;
}

#ft-hight-capacity-container .ft-text{
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
}


/* Swap the order on the top row to mimic your original:
   image left, text right */
#ft-hight-capacity-container .ft-row--top .ft-media{ order: 1; }
#ft-hight-capacity-container .ft-row--top .ft-text{ order: 2; }

/* Bottom row: text left, image right (your original already matches) */
#ft-hight-capacity-container .ft-row--bottom .ft-text{ order: 1; }
#ft-hight-capacity-container .ft-row--bottom .ft-media{ order: 2; }

/* Typography spacing (replaces the inline margin-top:35px etc.) */
#ft-hight-capacity-container .ft-text p{
  margin: 18px 0 0;
  line-height: 1.75;
  font-size: clamp(16px, 1.6vw, 18px);
}
#ft-hight-capacity-container .ft-text p:first-child{
  margin-top: 0;
}
#ft-hight-capacity-container .ft-text h3{
  margin: 14px 0 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.8;
	
}
#ft-hight-capacity-container .ft-text h5{
  margin: 28px 0 0;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.95;
  font-weight:600;
}

/* ========================================
   Estate High Capacity – Left Align Text
======================================== */
#ft-hight-capacity-container .ft-text{
  text-align: left;
  align-items: flex-start; /* prevents flex from centering */
}

#ft-hight-capacity-container .ft-text h3,
#ft-hight-capacity-container .ft-text h5,
#ft-hight-capacity-container .ft-text p{
  text-align: left;
}



/* Images responsive */
#ft-hight-capacity-container img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* centers horizontally */
}

/* Optional: constrain the small image a bit on big screens */
#ft-hight-capacity-container .ft-media--small img{
  max-width: 260px;
  margin-left: auto; /* keeps it visually right-aligned on wide layouts */
}

/* Mobile: stack cleanly */
@media (max-width: 900px){
  #ft-hight-capacity-container .ft-row{
    grid-template-columns: 1fr;
  }

  /* Put image first then text on mobile for both sections */
  #ft-hight-capacity-container .ft-row .ft-media{ order: 1; }
  #ft-hight-capacity-container .ft-row .ft-text{ order: 2; }

  #ft-hight-capacity-container .ft-media--small img{
    max-width: 220px;
    margin: 0 auto; /* center small image on mobile */
  }
}

@media (max-width: 900px){
  #ft-hight-capacity-container .ft-text{
    justify-content: flex-start;
  }
}

@media (max-width: 900px){
  #ft-hight-capacity-container .ft-media img{
    margin: 0 auto;
  }
}


.line-break {
  display: block;
}



#ft-versatility-container{
	clear:both;
	margin:0 auto;
	padding:0;
	width:850px;
}

#ft-versatility-content{
	margin:0;
	padding:0;
}

#ft-versatility-content p{
	padding-top:10px;
}



#ft-ultimate-security-content{
	margin:0;
	padding:0;
}

#ft-us-2col{
	margin:0 auto;
	padding:0;
	width:852px;
}

#ft-us-col-right{
	margin:0 15px 0 0;
	padding:0;
	float:right;
	width:400px;
	color:#ede6d8;
	font-size:18px;
}

#ft-us-col-left{
	margin:0 15px 0 0;
	padding:0;
	float:right;
	width:400px;
	color:#000;
	font-size:22px;
}




/* ================================
   Security Without Sacrifice (SWS)
   Fully responsive + modern layout
================================ */

/* Section wrapper */
#ft-sws-container{
  clear: both;
  margin: 0;
  padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 4vw, 60px);

  /* keep your background image, make it responsive */
  background-image: url(../../images/ft-sws-container-backg.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  /* remove fixed legacy height */
  height: auto !important;
  box-sizing: border-box;
}

/* Title image behaves responsively */
#ft-sws-container > h2{
  margin: 0;
  padding: 0 !important;            /* overrides inline padding in HTML */
  text-align: center;
}

#ft-sws-container > h2 img{
  display: block;
  width: min(658px, 92vw);
  height: auto;
  margin: 0 auto;
}

/* The inner text wrapper div has inline width:840px — override it */
#ft-sws-container > div[style*="width:1100px"]{
  width: 100% !important;
  max-width: 980px;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

/* Paragraphs: remove fixed width and use readable measure */
#ft-sws-container p{
  width: auto !important;           /* overrides legacy width:700px */
  max-width: 72ch;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 32px);
  color: #1e1c17;

  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.7;
}

/* -------- Expand/Collapse header box -------- */

#ft-sws-expandable-box{
  width: 100%;
  max-width: 980px;
  margin: clamp(16px, 3vw, 26px) auto 0;
  padding: 10px clamp(12px, 2vw, 18px);
  box-sizing: border-box;

  /* keep the background art but make it scale */
  background-image: url(../../images/ft-sws-expandable-box-backg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  /* modern layout instead of floats */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 56px;
}

/* Kill the inline floats on the two inner divs */
#ft-sws-expandable-box > div{
  float: none !important;
}

/* The text chunk (has inline width/padding/font-size) */
#ft-sws-expandable-box > div:first-child{
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

/* The plus icon chunk */
#ft-sws-expandable-box > div:last-child{
  padding: 0 !important;
  display: flex;
  align-items: center;
}

#CollapsiblePanelImage{
  width: 22px;
  height: 22px;
}

/* -------- Expanded panel content -------- */

#es-security-expandable-panel-container{
  width: 100%;
  max-width: 980px;
  margin: 10px auto 0;
  padding: clamp(16px, 3vw, 26px) clamp(16px, 3vw, 34px);
  box-sizing: border-box;

  /* remove fixed legacy sizing */
  height: auto !important;

  background-image: url(../../images/security-expended-panel-backg.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* Panel paragraphs had fixed width:649px — override */
#es-security-expandable-panel-container p{
  width: auto !important;
  max-width: 72ch;
  margin: 0 0 12px;
  padding: 0;
  color: #1e1c17;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
}

/* Small-screen tuning */
@media (max-width: 768px){
  #ft-sws-container{
    background-position: center top;
  }

  #ft-sws-expandable-box{
    background-size: cover;
  }

  /* make the expandable headline wrap nicely */
  #ft-sws-expandable-box > div:first-child{
    letter-spacing: 0.03em;
  }
}


/* ===== SWS Disclosure (modern expandable box) ===== */

.ft-disclosure{
  width: 100%;
  max-width: 1200px;
  margin: 22px auto 0;
  padding: 0 clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

.ft-disclosure__trigger{
  width: 100%;
  border: 1px solid rgba(30, 28, 23, 0.18);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);

  border-radius: 14px;
  padding: clamp(14px, 2.5vw, 22px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;

  cursor: pointer;
  text-align: center;
}

.ft-disclosure__kicker{
  display: block;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1e1c17;
  grid-column: 1 / -1;
}

.ft-disclosure__cta{
  display: block;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(30, 28, 23, 0.78);
  grid-column: 1 / -1;
}

.ft-disclosure__icon{
  justify-self: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(30, 28, 23, 0.18);
  background: rgba(255,255,255,0.85);
  display: grid;
  place-items: center;
}

.ft-disclosure__icon img{
  width: 22px;
  height: 22px;
  display: block;
}

.ft-disclosure__panel{
  margin-top: 12px;
}

.ft-disclosure__content{
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(30, 28, 23, 0.14);
  padding: clamp(16px, 3vw, 26px);
}

.ft-disclosure__content p{
  margin: 0 0 12px;
  max-width: 72ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: #1e1c17;
}

.ft-disclosure__content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* open state */
.ft-disclosure.is-open .ft-disclosure__icon{
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .ft-disclosure.is-open .ft-disclosure__icon{ transition: none; }
}







#ft-superb-int-wrapper{
	margin:0;
	padding:0;
}

#ft-si-drawers-content{
	margin:0 auto;
	padding:0;
	width:950px;
	height:926px;
	background-image: url(../../images/ft-si-drawers-open.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#ft-si-drawers-description{
	margin:0 auto;
	padding:0 430px 0 0;
	width:380px;
}

#ft-si-drawers-description h2{
	margin:0;
	padding:25px 0 0 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	color:#ffe1aa;
}

#ft-si-drawers-description h3{
	margin:0;
	padding:0;
	font-size:30px;
	color:#000;
}

#ft-si-drawers-description p{
	margin:0;
	padding:15px 0 0 0;
	color:#000;
	font-size:18px;
}


#ft-si-watch-winders-wrapper{
	margin:0;
	padding:0;
	background-image: url(../../images/ft-backg-watch-winders.png);
	background-repeat: no-repeat;
	background-position: 2% top;
}

#ft-si-watch-winders-descriptions{
	margin:0 auto;
	padding:0;
	width:850px;
}

#ft-si-watch-winders-descriptions h2{
	margin:0;
	padding:40px 0 0 300px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	color:#ffe1aa;
}

#ft-si-watch-winders-descriptions p{
	margin:0;
	padding:25px 0 0 0;
	color:#000;
	font-size:18px;
}

#ft-si-rifle-racks-wrapper{
	margin:0;
	padding:0;
	height:490px;
	background-image: url(../../images/ft-backg-rifle-racks.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}


#ft-si-rifle-racks-descriptions{
	margin:0 auto;
	padding:0;
	width:850px;
}


#ft-si-rifle-racks-descriptions h2{
	margin:0;
	padding:40px 0 0 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	color:#ffe1aa;
}

#ft-si-rifle-racks-descriptions p{
	margin:0;
	padding:20px 0 0 0;
	color:#000;
	font-size:18px;
}

#ft-exquisite-finishes-wrapper{
	margin:0;
	padding:0;
	min-height:855px;
	background-image: url(../../images/ft-title-color.png);
	background-position: center 520px;
	background-repeat: no-repeat;
}

#ft-exquisite-finishes-description{
	margin:0 auto;
	padding:0;
	width:872px;
}

#ft-slideshow-container{
	margin:0 auto;
	padding:0;
	width:872px;
}

#ft-exquisite-finishes-right{
	margin:0;
	padding:0;
	width:400px;
	float:right;
}

#ft-exquisite-finishes-left{
	margin:0;
	padding:0;
	width:400px;
	float:left;
}

#ft-exterior-finish-wrapper{
	clear:both;
	margin:0;
	padding:0;
	background-image: url(../../images/ft-exterior-finish.png);
	background-repeat: no-repeat;
	background-position: center 65px;
}

#ft-exterior-finishes-title{
	margin:0;
	padding:0;
	height:105px;
	background-image: url(../../images/ft-title-exterior-finish.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#ft-exquisite-finishes-description p a{
	margin:0;
	padding:0;
	color:#ffd49d;
}

#ft-exquisite-finishes-description p a:hover{
	margin:0;
	padding:0;
	color:#ede6d8;
}


#ft-exterior-finish-description{
	margin:0 auto;
	padding:0;
	width:830px;
	height:500px;
}

#ft-exterior-finish-description p{
	margin:0;
	padding:15px 0 0 0;
	color:#ede6d8;
	font-size:18px;
	width:330px;
}

#ft-exterior-finish-description p a{
	margin:0;
	padding:0;
	color:#ffd49d;
}

#ft-exterior-finish-description p a:hover{
	margin:0;
	padding:0;
	color:#ede6d8;
}

#ft-interior-finishes-wrapper{
	margin:0;
	padding:0;
	min-height:1065px;
	background-image: url(../../images/ft-interior-finish.png);
	background-repeat: no-repeat;
	background-position: center 105px;
}



#ft-interior-finishes-title{
	margin:0;
	padding:0;
	height:105px;
	background-image: url(../../images/ft-title-interior-finish.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#ft-interior-finishes-description{
	margin:0 auto;
	padding:0;
	width:850px;
}

#ft-interior-finishes-description p{
	margin:0;
	padding:15px 0 0 50px;
	color:#ede6d8;
	font-size:18px;
}

#ft-interior-finishes-description p a{
	margin:0;
	padding:0;
	color:#ffd49d;
}

#ft-interior-finishes-description p a:hover{
	margin:0;
	padding:0;
	color:#ede6d8;
}

#ft-effortless-entry-wrapper{
	clear:both;
	margin:0;
	padding:0;
	min-height:1630px;
	background-image: url(../../images/ft-effortless-entry-keypad.png);
	background-repeat: no-repeat;
	background-position: center 80px;
}

	
#ft-effortless-entry-descriptions{
	margin:0 auto;
	padding:0;
	width:820px;
}

#ft-effortless-entry-descriptions h2{
	margin:0;
	padding:40px 0 0 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	color:#ffe1aa;
}

#ft-effortless-entry-descriptions p{
	margin:0;
	padding:15px 0 0 0px;
	color:#ede6d8;
	font-size:18px;
}

#ft-estate-series-wrapper{
	margin:0;
	padding:0;
}

#ft-estate-series-ground{
	clear:both;
	margin:0;
	padding:0;
	min-height:594px;
	background-image: url(../../images/ft-estate-safes-ground.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#ft-estate-series-safes{
	margin:0 auto;
	padding:0;
	width:950px;
}



/* ===== Sticky Section Nav (no shift + active state) ===== */

#ft-secondnav-lcpoptions-wrapper{
  clear: both;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 46px;

  background-image: url(/estate-safes/images/ft-secnav-lcpoptions-backg.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

#ft-secondnav-lcpoptions-items{
  max-width: 950px;
  margin: 0 auto;
  padding: 0 clamp(10px, 2vw, 18px);
  box-sizing: border-box;
}

#ft-secondnav-lcpoptions-items ul{
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 14px);

  list-style: none;

  /* keep one line and allow scroll on narrow screens */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#ft-secondnav-lcpoptions-items ul::-webkit-scrollbar{ height: 0; }

#ft-secondnav-lcpoptions-items li{
  margin: 0;
  padding: 0;     /* kills legacy padding */
  float: none;    /* kills legacy floats */
  min-width: 0;
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0.08em;
}

/* Links: fixed sizing so hover never shifts layout */
#ft-secondnav-lcpoptions-items a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 clamp(10px, 1.6vw, 18px);

  text-decoration: none;
  color: #000;

  border-radius: 999px;
  box-sizing: border-box;

  /* optional: a subtle baseline so active/hover feels consistent */
  outline: none;
}

/* Glow layer (does not affect layout) */
#ft-secondnav-lcpoptions-items a::before{
  content: "";
  position: absolute;
  inset: -6px -10px;
  background-image: url(/estate-safes/images/sticky-nav-glow2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110% 140%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Hover without changing padding/height */
#ft-secondnav-lcpoptions-items a:hover::before{
  opacity: 1;
}

/* Keyboard focus */
#ft-secondnav-lcpoptions-items a:focus-visible{
  outline: 2px solid rgba(0,0,0,.55);
  outline-offset: 2px;
}

/* Active state (set by JS) */
#ft-secondnav-lcpoptions-items a.is-active{
  font-weight: 700;
}

#ft-secondnav-lcpoptions-items a.is-active::before{
  opacity: 1;
}

/* Small screens: left-align so horizontal scrolling feels natural */
@media (max-width: 768px){
  #ft-secondnav-lcpoptions-items ul{ justify-content: flex-start; }
}



/* ===== Versatility section ===== */

.ft-section{
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 64px) 0;
}

#ft-versatility-container{
  /* if you want the whole section centered within the page: */
  /* background: transparent; */
}

#ft-versatility-container .ft-divider{
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

#ft-versatility-container .ft-divider img{
  display: block;
  width: min(1150px, 100%);
  height: auto;
}

#ft-versatility-container .ft-section-head{
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

#ft-versatility-container .ft-section-title-img{
  display: block;
  width: min(500px, 78vw);
  height: auto;
}

/* Centered content rail */
#ft-versatility-container .ft-versatility-grid{
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 3vw, 40px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1.15fr 1.3fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
}

#ft-versatility-container .ft-media img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;   /* keeps it elegant on huge screens */
  margin: 0 auto;     /* centers the image within its column */
}

#ft-versatility-container .ft-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#ft-versatility-container .ft-text h3{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
}

#ft-versatility-container .ft-text p{
  margin: 12px 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
}

#ft-versatility-container .ft-cta{
  margin-top: 16px;
  font-weight: 600;
}

#ft-versatility-container .ft-cta a{
  color: #ffd49d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ft-versatility-container .ft-cta a:hover{
  text-decoration-thickness: 2px;
}

/* Hidden modal content for Colorbox (keeps it off-layout) */
#ft-versatility-container .ft-modal-hidden{
  display: none;
}

#ft-versatility-container .ft-drawer-inserts img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Mobile stack */
@media (max-width: 900px){
  #ft-versatility-container .ft-versatility-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* Put text first on mobile if you prefer:
     comment these two lines out if you want image first */
  #ft-versatility-container .ft-text{ order: 1; }
  #ft-versatility-container .ft-media{ order: 2; }

  #ft-versatility-container .ft-media img{
    max-width: 420px;
  }
}

/* CTA link styling */
.ft-cta a,
.ft-cta .drawer-inserts-colorbox{
  color: #ffd49d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ft-cta a:hover,
.ft-cta .drawer-inserts-colorbox:hover{
  opacity: 0.85;
}


/* Decorative section header */
.ft-section-head{
  display: flex;
  justify-content: center;
  padding: clamp(14px, 2vw, 15px) 16px;
  box-sizing: border-box;
}

/* Main decorative title */
.ft-section-head .ft-decorative-title{
  margin: 0;
  font-family: "Playfair Display SC", "Cinzel", "Trajan Pro", serif;
  font-weight: 600;
  text-transform: uppercase;

  /* Responsive size (this will now work) */
  font-size: clamp(34px, 3.5vw, 45px) !important;

  letter-spacing: 0.14em;
  line-height: 1.05;
  text-align: center;

  /* Antique gold */
  color: rgb(200, 166, 93) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 -1px 0 rgba(0,0,0,0.8);
}

.ft-section-head .ft-decorative-title::after{
  content: "";
  display: block;
  width: clamp(90px, 10vw, 140px);
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(143,122,62,0.85),
    transparent
  );
}

/* Centered image container */
.ft-centered-media{
  width: 100%;
  margin: clamp(16px, 3vw, 36px) auto;
  padding: 0 clamp(6px, 2vw, 10px);
  box-sizing: border-box;

  display: flex;
  justify-content: center;
}

/* Responsive image */
.ft-centered-media img{
  display: block;
  width: 100%;
  max-width: 1200px; /* matches your original 872px nicely */
  height: auto;
}






/* =========================
   Reusable Full-Width Section
   No background color set
========================= */

.ft-section{
  width: 100%;
  margin: 0;
  padding: clamp(16px, 3vw, 36px) 0;
  box-sizing: border-box;
	
  /* light white -> transparent from bottom to top */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.34) 28%,
    rgba(255, 255, 255, 0.27) 52%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

.ft-section__inner{
  max-width: 1400px; /* wide, immersive */
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px);
  box-sizing: border-box;
}

/* Intro block centered */
.ft-section__intro,
.ft-section__body{
  max-width: 88ch; /* it was 74ch */
  margin: 0 auto;
  text-align: center;
}

.ft-section__intro h3{
  margin: 0;
  padding: 0;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.2;
}

.ft-section__intro p{
  margin: 14px 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}



/* 3-up image grid (responsive) */
.ft-image-grid{
  width: 100%;
  margin: clamp(20px, 4vw, 44px) auto;
  padding: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(15px, 3.5vw, 45px);
  align-items: start;
	
  justify-items: center;
}

.ft-image-grid__item{
  margin: 0;
}

.ft-image-grid__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left aligned */
  max-width: 380px;        /* same value as image */
}

.ft-image-grid__item img{
  display: block;
  width: 100%;
  max-width: 380px;   /* ⬅️ reduces visual size */
  height: auto;
  margin: 0 auto;     /* keeps each image centered in its column */
  border-radius: 10px; /* optional, modern polish */
	
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}





/* === Versatility 3-up layout alignment fix === */

.ft-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch; /* makes columns equal height */
}

.ft-image-grid__item {
  display: flex;
  flex-direction: column;
  text-align: center;
}


/* This is the key */
.ft-image-grid__item img {
  margin-top: auto;  /* pushes image to bottom */
  width: 100%;
  height: auto;
  display: block;
}






/* Body copy under images */
.ft-section__body p{
  margin: 14px 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.75;
}

.ft-section__body p:first-child{
  margin-top: 0;
}

/* CTA */
.ft-cta{
  margin-top: 18px;
  font-weight: 600;
}

.ft-cta a{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Mobile: turn the 3-up grid into a horizontal swipe gallery */
@media (max-width: 900px){
  .ft-image-grid{
    /* override desktop grid */
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;   /* important: stop the 1fr column rule */
    max-width: none;              /* don’t constrain; let it fill the rail */

    /* card sizing */
    grid-auto-columns: 86%;
    gap: 14px;

    /* scrolling */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* spacing + snap */
    padding: 6px 16px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;    /* ensures first card can snap fully into view */

    /* subtle scroll cue (edge fade) */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 18px,
      #000 calc(100% - 18px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 18px,
      #000 calc(100% - 18px),
      transparent 100%
    );
  }

  .ft-image-grid__item{
    scroll-snap-align: start;
    scroll-snap-stop: always;     /* nicer snapping on iOS */
  }

  .ft-image-grid__item img{
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 10px;
  }

  /* Your text alignment preference */
  .ft-section__intro,
  .ft-section__body{
    text-align: left;
  }
}






/* =========================
   Reusable: Divider
========================= */
.ft-divider{
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.ft-divider img{
  display: block;
  width: min(850px, 100%);
  height: auto;
}

/* Anchor: prevents sticky nav overlap when jumping */
#anchor-protection{
  display: block;
  position: relative;
  top: -120px;   /* adjust to your sticky header/nav height */
  height: 0;
  visibility: hidden;
}

/* =========================
   Reusable: Centered media
========================= */
.ft-centered-media{
  width: 100%;
  margin: clamp(18px, 3vw, 36px) auto clamp(22px, 4vw, 44px);
  display: flex;
  justify-content: center;
}

.ft-centered-media img{
  display: block;
  width: 100%;
  max-width: 900px; /* matches the original artwork scale */
  height: auto;
}

/* =========================
   Reusable: 1/3 + 2/3 columns
========================= */
.ft-two-col{
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1/3 + 2/3 */
  gap: clamp(18px, 3vw, 44px);
  align-items: start;

  max-width: 1200px;
  margin: 0 auto;
}

.ft-two-col__aside,
.ft-two-col__main{
  box-sizing: border-box;
}

.ft-two-col__aside p,
.ft-two-col__main p{
  margin: 0 10px 14px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.75;
}

.ft-two-col__aside{
  text-align: left;
  font-style: italic;
}

.ft-two-col__aside .ft-strong{
  font-weight: 700;
}

/* Optional: make the left column feel like a “pull quote” */
.ft-two-col__aside{
  padding: 0 0 0 clamp(10px, 1.2vw, 16px);
  border-left: 4px solid rgba(143, 122, 62, 0.65); /* antique gold hint */
}

/* =========================
   Responsive behavior
========================= */
@media (max-width: 900px){
  .ft-two-col{
    grid-template-columns: 1fr; /* stack */
  }

  .ft-two-col__aside{
    border-left: none;
    padding-left: 0;
  }
}



/* =========================
   Elegant Responsive Slider for Paint Colors
========================= */

.ft-slider{
  width: 100%;
  max-width: 1100px;
  margin: clamp(18px, 4vw, 44px) auto 0;
  padding: 0 clamp(16px, 3vw, 44px);
  box-sizing: border-box;
}

/* viewport = visible window */
.ft-slider__viewport{
  border-radius: 14px;
  overflow: hidden;

  /* subtle, modern frame (no background color defined on section) */
  border: 1px solid rgba(30, 28, 23, 0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);

  /* keep it touch-friendly */
  touch-action: pan-y;
  outline: none;
}

.ft-slider__viewport:focus-visible{
  outline: 2px solid rgba(0,0,0,0.55);
  outline-offset: 3px;
}

/* track */
.ft-slider__track{
  display: flex;
  transform: translateX(0);
  transition: transform 420ms ease;
  will-change: transform;
}

/* slides */
.ft-slider__slide{
  flex: 0 0 100%;
  margin: 0;
}

.ft-slider__slide img{
  display: block;
  width: 100%;
  height: auto;
}

/* controls */
.ft-slider__controls{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  margin-top: 14px;
}

.ft-slider__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(30, 28, 23, 0.18);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;

  display: grid;
  place-items: center;

  font-size: 28px;
  line-height: 1;
  color: #1e1c17;
}

.ft-slider__btn:focus-visible{
  outline: 2px solid rgba(0,0,0,0.55);
  outline-offset: 2px;
}

/* dots */
.ft-slider__dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.ft-slider__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 28, 23, 0.30);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.ft-slider__dot.is-active{
  background: rgba(143,122,62,0.90); /* antique gold */
  border-color: rgba(143,122,62,0.90);
}

.ft-slider__hint{
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.70;
}

/* Smaller screens: tighten controls */
@media (max-width: 520px){
  .ft-slider{
    padding: 0 16px;
  }

  .ft-slider__controls{
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
  }

  .ft-slider__dots{
    gap: 8px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ft-slider__track{ transition: none; }
}



/* =========================================================
   Estate Image Grid Typography
   ========================================================= */

.ft-image-grid h2{
  margin: 0 0 12px;
  font-family: inherit; /* matches site-wide font choice */
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c1c1c;
}

/* Subtle visual separation without looking like a divider */
.ft-image-grid h2::after{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 10px;
  background: rgba(0,0,0,0.25);
}

.ft-image-grid p{
  margin: 0 0 18px;
  max-width: 38ch; /* keeps copy elegant and readable */
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.65;
  font-weight: 400;
  color: #333;
}

.ft-image-grid__item{
  align-items: flex-start;
}

/* Optional enhancement for wider screens */
@media (min-width: 900px){
  .ft-image-grid p{
    line-height: 1.7;
  }
}

.ft-image-grid__item h2 {
  margin-bottom: 12px;
}

.ft-image-grid__item p {
  margin-bottom: 20px;
}

/* Headings + copy align to the column left edge */
.ft-image-grid__item h2,
.ft-image-grid__item p{
  max-width: none;     /* don’t constrain */
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}