/*
Theme Name:        Twenty Twenty-Five Child
Theme URI:         https://yourwebsite.com/twentytwentyfive-child
Description:       A child theme of Twenty Twenty-Five with custom page templates for Homepage and Thank You page.
Author:            Datawave
Author URI:        https://yourwebsite.com
Template:          twentytwentyfive
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       twentytwentyfive-child
Tags:              child-theme, custom-templates
*/

/* ============================================================
   Designer CSS merged from assets/css/designer.css
   Asset URLs adjusted for WordPress style.css at the theme root.
   ============================================================ */

/* ============================================================
   SARTORIA DESIGNER CSS
   Clean custom CSS only. Bootstrap handles base grid/utilities.
   ============================================================ */
/* ============================================================
   RESPONSIVE BREAKPOINT GUIDE
   Desktop default:        1367px and above
   iPad Pro landscape:     1200px - 1366.98px
   iPad Pro portrait:      992px - 1199.98px
   iPad / tablet:          768px - 991.98px
   Mobile:                 576px - 767.98px
   Small mobile:           575.98px and below

   Add future fixes at the bottom of this file inside the
   matching labelled section so the cascade stays predictable.
   ============================================================ */



/*! Local Sartoria webfonts */
@font-face {
  font-family: 'Sartoria Sohne Breit';
  src: url('assets/fonts/testsohnebreit-leicht-bf663d89cae7333-webfont.woff2') format('woff2'),
       url('assets/fonts/testsohnebreit-leicht-bf663d89cae7333-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sartoria Sohne Breit';
  src: url('assets/fonts/testsohnebreit-buch-bf663d89ca2ff42-webfont.woff2') format('woff2'),
       url('assets/fonts/testsohnebreit-buch-bf663d89ca2ff42-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sartoria Sohne Breit';
  src: url('assets/fonts/testsohnebreit-kraftig-bf663d89caa6b6c-webfont.woff2') format('woff2'),
       url('assets/fonts/testsohnebreit-kraftig-bf663d89caa6b6c-webfont.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --blue:#062f59;
  --dark:#1d1d1d;
  --muted:#5b5a58;
  --cream:rgba(224,184,138,.2);
  --line:#d9d9d9;
  --white:#fff;
  --font:"Sartoria Sohne Breit","Arial Narrow",Arial,sans-serif;   
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--dark);
  background:#fff;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button,input,textarea{font-family:inherit}
button{cursor:pointer}
.site-page{overflow:hidden;background:#fff}
.px-design{padding-left:80px;padding-right:80px}
.section-white{background:#fff}
.section-cream{background:var(--cream)}
.site-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  padding:10px 32px;
  background:var(--dark);
  color:#fff;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.site-btn:hover{background:var(--blue);color:#fff}
.site-btn-light{background:#fff;color:var(--blue)}
.site-btn-light:hover{background:#fff;color:var(--dark)}

/* Hero */
.hero-banner{
  position:relative;
  height:100vh;
  min-height:820px;
  background:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-logo-wrap{
  position:absolute;
  left:50%;
  top:20px;
  z-index:8;
  transform:translateX(-50%);
}
.hero-logo-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 14px);
  width:90px;
  height:3px;
  border-radius:10px;
  background:#fff;
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:opacity .35s var(--ease) .42s,transform .52s var(--ease) .42s;
}
.hero-logo{
  width:170px;
  height:auto;
  filter:none;
  transition:width .7s var(--ease),filter .5s var(--ease);
}
.hero-media-wrap{
  position:absolute;
  left:50%;
  top:322px;
  z-index:2;
  width:306px;
  height:175px;
  overflow:hidden;
  border-radius:16px;
  transform:translateX(-50%);
  box-shadow:0 24px 60px rgba(0,0,0,.08);
  transition:width 1.25s var(--ease),height 1.25s var(--ease),top 1.25s var(--ease),border-radius .9s var(--ease),box-shadow .9s var(--ease);
}
.hero-media-wrap::after{content:"";position:absolute;inset:0;
/*    background:rgba(0,0,0,.3) */
}
.hero-media{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.25s var(--ease)}
.hero-title{
  position:absolute;
  left:50%;
  bottom:150px;
  z-index:7;
  width:min(812px,calc(100% - 40px));
  margin:0;
  color:#fff;
  text-align:center;
  font-size:32px;
  line-height:1.5;
  font-weight:300;
  opacity:0;
  transform:translateX(-50%) translateY(22px);
  transition:opacity .65s var(--ease) .52s,transform .65s var(--ease) .52s;
}
.hero-dev-link{
  position:absolute;
  left:50%;
  bottom:72px;
  z-index:7;
  color:#fff;
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
  opacity:0;
  transform:translateX(-50%) translateY(14px);
  transition:opacity .55s var(--ease) .65s,transform .55s var(--ease) .65s;
}
.hero-dev-link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.hero-banner.is-active .hero-media-wrap,
.hero-banner:hover .hero-media-wrap{
  top:0;width:100%;height:100%;border-radius:0;box-shadow:none;
}
.hero-banner.is-active .hero-media,
.hero-banner:hover .hero-media{transform:scale(1)}
.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo{width:132px;filter:brightness(0) invert(1)}
.hero-banner.is-active .hero-logo-wrap::after,
.hero-banner:hover .hero-logo-wrap::after{opacity:1;transform:translateX(-50%) scaleX(1)}
.hero-banner.is-active .hero-title,
.hero-banner:hover .hero-title,
.hero-banner.is-active .hero-dev-link,
.hero-banner:hover .hero-dev-link{opacity:1;transform:translateX(-50%) translateY(0)}

/* Intro */
.intro-section{min-height:660px;padding:100px 0;display:flex;align-items:center}
.intro-heading{margin:0 0 20px;color:var(--blue);font-size:32px;line-height:1.5;font-weight:400}
.intro-copy{margin:0;max-width:566px;font-size:24px;line-height:1.7}
.project-facts{max-width:390px;text-align:center}
.project-fact{min-height:108px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:40px 20px}
.project-fact + .project-fact{border-top:1px solid var(--line)}
.project-fact span{font-size:12px;line-height:1.5;text-transform:uppercase}
.project-fact strong{font-size:16px;line-height:1.7;font-weight:400}

/* About */
.about-section{min-height:608px;padding:80px 0;display:flex;align-items:center}
.about-copy{margin:0;font-size:16px;line-height:1.7;opacity:.8}
.about-image{position:relative;height:448px;border-radius:16px;overflow:hidden;background:#eee}
.about-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.about-slide.active{opacity:1;transform:scale(1)}

/* Way live */
.way-live-section{
  --way-text-progress:0;
  position:relative;
  height:820px;
  min-height:820px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  isolation:isolate;
}
.way-live-stage{position:absolute;left:50%;top:0;width:1440px;height:820px;max-width:none;transform:translateX(-50%);pointer-events:none;z-index:1}
.way-card{position:absolute;z-index:8;overflow:hidden;opacity:1;will-change:transform;backface-visibility:hidden}
.way-card img{width:100%;height:100%;object-fit:cover}
.way-card-1{width:320px;height:402px;left:80px;top:40px;border-radius:16px 16px 0 16px}
.way-card-2{width:287px;height:378px;left:174px;top:520px;border-radius:0 16px 16px 16px}
.way-card-3{width:270px;height:411px;left:1095px;top:0;border-radius:16px 16px 16px 0}
.way-card-4{width:287px;height:360px;left:1015px;top:480px;border-radius:16px 0 16px 16px}
.way-live-section.is-arranged .way-card{z-index:2}
.corner{position:absolute;background:var(--blue);z-index:3}
.corner-r{right:0;top:58%;width:14px;height:146px}
.corner-b{right:0;bottom:0;width:146px;height:14px;border-top-right-radius:20px}
.corner-l{left:0;top:0;width:14px;height:146px;border-bottom-right-radius:20px}
.corner-t{right:0;top:0;width:146px;height:14px;border-top-right-radius:20px}
.way-live-content{
  position:relative;
  z-index:6;
  width:410px;
  max-width:calc(100% - 40px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
  opacity:var(--way-text-progress);
  transform:translate3d(0,calc((1 - var(--way-text-progress)) * 10px),0);
}
.way-live-content h2{margin:0;font-size:40px;line-height:1.5;font-weight:300}
.way-live-content p{margin:0;font-size:14px;line-height:1.7;opacity:.7}

/* Balance */
.balance-section{min-height:812px;padding:0}
.balance-pin{height:812px;display:flex;align-items:center;overflow:hidden}
.balance-visual{position:relative;height:812px}
.balance-main-image{position:absolute;left:153px;top:124px;width:507px;height:563px;border-radius:16px;overflow:hidden;background:#ddd;opacity:0;transform:translateX(-70px) scale(.96);transition:opacity .75s var(--ease),transform .85s var(--ease)}
.balance-section.in-view .balance-main-image{opacity:1;transform:translateX(0) scale(1)}
.balance-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .55s var(--ease),transform .75s var(--ease)}
.balance-img.active{opacity:1;transform:scale(1)}
.balance-preview{position:absolute;left:-140px;width:180px;height:200px;border-radius:16px;overflow:hidden;opacity:0;transform:translateX(-40px);transition:opacity .85s var(--ease),transform .9s var(--ease)}
.balance-preview::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.8)}
.balance-preview img{width:100%;height:100%;object-fit:cover}
.balance-preview-top{top:-123px}.balance-preview-bottom{bottom:-123px}
.balance-section.in-view .balance-preview{opacity:1;transform:translateX(0)}
.balance-content{max-width:500px;margin-left:auto;opacity:0;transform:translateX(72px);transition:opacity .75s var(--ease),transform .85s var(--ease)}
.balance-section.in-view .balance-content{opacity:1;transform:translateX(0)}
.balance-content h2{margin:0 0 24px;font-size:40px;line-height:1.5;font-weight:300}
.balance-content p{margin:0 0 40px;color:var(--muted);font-size:14px;line-height:1.7;opacity:.7}
.balance-row{width:100%;height:56px;min-height:56px;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;display:grid;grid-template-rows:24px 0fr;gap:0;overflow:hidden;color:var(--dark);transition:height .5s var(--ease),grid-template-rows .5s var(--ease),gap .5s var(--ease)}
.balance-row.active{height:96px;grid-template-rows:24px 1fr;gap:16px}
.balance-row-title{display:flex;align-items:center;gap:16px;font-size:14px;line-height:1.5;font-weight:400!important;}
.balance-row-title img,.balance-text-icon{width:24px;height:24px;display:grid;place-items:center;object-fit:contain;flex:0 0 24px}
.balance-row-desc{min-height:0;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.7;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.balance-row.active .balance-row-desc{opacity:.7;transform:translateY(0)}

/* Gallery */
.gallery-section{position:relative;height:818px;background:#fff;overflow:hidden}
.gallery-shell{position:relative;width:1440px;max-width:100%;height:818px;margin:0 auto}
.gallery-left{position:absolute;left:0;top:120px;width:602px;height:578px;background:#fff;z-index:2}
.gallery-copy{position:sticky;top:0;height:578px;padding-left:80px;padding-right:73px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.gallery-copy h2{margin:0px 0 -10px 0;font-size:40px;line-height:1.5;font-weight:300}
.gallery-copy p{margin:0;font-size:14px;line-height:1.7;opacity:.7}
.gallery-controls{display:flex;gap:40px}
.gallery-btn{width:40px;height:40px;border:1px solid rgba(109,145,111,.4);border-radius:50%;background:#fff;color:#6d916f;cursor:pointer!important;touch-action:manipulation}
.gallery-right{position:absolute;left:602px;top:120px;width:798px;height:578px;overflow:visible}
.gallery-window{width:798px;height:578px;overflow:visible}
.gallery-track{display:flex;gap:40px;transition:transform .9s var(--ease);will-change:transform}
.gallery-track.gallery-no-transition{transition:none!important}
.gallery-track figure{width:758px;height:578px;flex:0 0 758px;margin:0;border-radius:16px;overflow:hidden}
.gallery-track img{width:100%;height:100%;object-fit:cover}
.gallery-clone{pointer-events:none}
.gallery-blue-bar{position:absolute;left:595px;top:409px;width:14px;height:284px;background:var(--blue);transform:translateY(-50%);z-index:4}

/* Location */
.location-section{padding:100px 0}
.location-heading{text-align:center;margin-bottom:40px}
.location-heading h2{margin:0 0 24px;font-size:40px;line-height:1.5;font-weight:300}
.location-heading p{margin:0;font-size:14px;line-height:1.7;opacity:.7}
.map-visual{position:relative;height:647px;border:1px solid #f0e6da;overflow:hidden;background:repeating-linear-gradient(28deg,rgba(109,145,111,.22) 0 2px,transparent 2px 90px),repeating-linear-gradient(120deg,rgba(109,145,111,.18) 0 2px,transparent 2px 110px),#f2fbef}
.map-label{position:absolute;z-index:2;max-width:120px;color:#000;font-size:10px;line-height:1.2;text-align:center;font-weight:400}
.map-mark{position:absolute;left:47%;top:42%;transform:translate(-50%,-50%);text-align:center}
.map-mark span{display:block;padding:9px 28px;background:var(--blue);color:#fff;font-size:12px}
.map-mark i{display:block;width:10px;height:10px;margin:16px auto 0;border-radius:50%;background:var(--blue)}
.distance-grid{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 26px}
.distance-grid div{display:flex;gap:16px}
.distance-grid strong{min-width:64px;font-size:40px;line-height:1;font-weight:400}
.distance-grid span{font-size:16px;line-height:1.7;color:#5f5d5a}
.location-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,7vw,124px);padding-top:30px}
.location-feature-row article{padding:12px}
.location-feature-row img{width:54px;height:40px;object-fit:contain;margin-bottom:20px}
.location-feature-row p{margin:0;font-size:16px;line-height:1.7}

/* Investment */
.investment-section{position:relative;min-height:618px;padding:100px 80px;display:flex;align-items:center;color:#fff;background-image:url("assets/images/Desktop/Table bg image D.webp");background-size:cover;background-position:center}
.investment-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.investment-inner{position:relative;z-index:2;max-width:897px}
.investment-inner h2{margin:0 0 40px;font-size:32px;line-height:1.5;font-weight:300}
.investment-table div{min-height:73px;display:grid;grid-template-columns:291px 1fr;gap:20px;align-items:center;border-bottom:1px solid rgba(255,255,255,.28);font-size:18px;line-height:32px}
.investment-table span{font-weight:300}.investment-table strong{font-weight:400}

/* Footer */
.footer-section{position:relative;min-height:713px;padding:80px 0;background:var(--blue);color:#fff;overflow:hidden}
.footer-watermark{position:absolute!important;left:50%!important;bottom:0!important;width:100vw!important;min-width:1440px!important;max-width:none!important;height:auto!important;object-fit:contain!important;object-position:center bottom!important;transform:translateX(-50%)!important;mix-blend-mode:soft-light;opacity:.28}
.footer-section .position-relative{z-index:2}
.footer-section h2{margin:0 0 12px;font-size:18px;line-height:1.5;font-weight:400}
.footer-section p,.footer-section address{margin:0;font-size:16px;line-height:1.5;font-style:normal}
.contact-form{margin-top:40px}
.custom-field{min-height:53px;border:0;border-bottom:1px solid rgba(255,255,255,.31);border-radius:0;padding:12px 0;background:transparent!important;color:#fff!important;box-shadow:none!important}
.custom-field::placeholder{color:#fff;opacity:1}.message-field{min-height:112px;resize:vertical}

/* ============================================================
   BASE RESPONSIVE RULES
   These are the original responsive rules. Final overrides are
   grouped again at the bottom by device type for easy maintenance.
   ============================================================ */
@media (max-width:1199px){
  .px-design{padding-left:48px;padding-right:48px}
  .balance-main-image{left:40px}.balance-preview{left:-80px}
  .distance-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991px){
  .px-design{padding-left:28px;padding-right:28px}
  .hero-banner{min-height:620px}
  .hero-media-wrap{top:240px}
  .hero-logo{width:140px}.hero-banner.is-active .hero-logo,.hero-banner:hover .hero-logo{width:112px}
  .hero-title{font-size:26px;bottom:136px}
  .intro-section,.about-section{padding:70px 0;min-height:auto}
  .intro-copy{font-size:20px}.project-facts{text-align:left;max-width:100%}.project-fact{align-items:flex-start;padding-left:0;padding-right:0}
  .about-image{height:420px}
  .way-live-section{height:auto;min-height:760px;padding:390px 28px 80px}
  .way-live-stage{left:0;top:40px;width:100%;height:360px;transform:none}
  .way-card-1{width:170px;height:218px;left:0;top:8px}.way-card-2{width:160px;height:210px;left:9%;top:182px}.way-card-3{width:155px;height:235px;left:auto;right:0;top:0}.way-card-4{width:165px;height:208px;left:auto;right:7%;top:178px}
  .way-live-content h2{font-size:30px}
  .balance-section{min-height:auto;padding:80px 0}.balance-pin{height:auto;overflow:visible}.balance-visual{height:430px;margin-bottom:30px}.balance-main-image{position:relative;left:auto;top:auto;width:100%;height:430px}.balance-preview{display:none}.balance-content{max-width:100%;opacity:1;transform:none}.balance-content h2{font-size:32px}.balance-row,.balance-row.active{height:auto;min-height:72px}
  .gallery-section{height:auto;padding:72px 0}.gallery-shell{width:100%;height:auto;padding:0 28px}.gallery-left,.gallery-right{position:relative;left:auto;top:auto;width:100%;height:auto}.gallery-copy{position:relative;height:auto;padding:0 0 32px}.gallery-window{width:100%;height:auto;overflow:hidden}.gallery-track figure{width:82vw;flex-basis:82vw;height:440px}.gallery-blue-bar{display:none}.gallery-controls{gap:24px}.gallery-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center}
  .map-visual{height:460px}.distance-grid{grid-template-columns:repeat(2,1fr)}.location-feature-row{grid-template-columns:1fr;gap:24px}
  .investment-section{padding:80px 28px}.investment-table div{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .footer-watermark{width:160vw!important;min-width:900px!important}
     }
}
@media (max-width:575px){
  .px-design{padding-left:20px;padding-right:20px}
  .hero-banner{min-height:560px}.hero-media-wrap{width:260px;height:150px}.hero-logo{width:120px}
  .intro-heading,.balance-content h2,.location-heading h2,.gallery-copy h2{font-size:28px}
  .about-image{height:340px}
  .way-live-section{padding-top:330px}.way-live-stage{width:118%;left:-9%;transform:scale(.84);transform-origin:top center}
  .balance-visual{height:340px}.balance-main-image{height:340px}
  .gallery-track figure{height:360px}
  .map-visual{height:360px}.map-label{display:none}.distance-grid{grid-template-columns:1fr}
  .investment-inner h2{font-size:18px}
}



/* ============================================================
   RESPONSIVE LAYOUT + LOGO PROPORTION REPAIR
   This block intentionally fixes desktop/tablet/mobile layout breaks
   without stretching any logos.
   ============================================================ */

/* Global media safety */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Never stretch logos/watermarks */
.hero-logo,
.footer-watermark,
.footer-section img,
.hero-logo-wrap img {
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
}

/* Header logo: smaller and proportional in both states */
.hero-logo {
  width: 150px !important;
  max-width: 36vw !important;
}
.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo,
.hero-banner:focus-within .hero-logo {
  width: 118px !important;
  max-width: 30vw !important;
}

/* Hero layout stability */
.hero-banner {
  min-height: 820px;
}
.hero-media-wrap {
  max-width: none;
}
.hero-banner.is-active .hero-media-wrap,
.hero-banner:hover .hero-media-wrap,
.hero-banner:focus-within .hero-media-wrap {
  width: 100vw !important;
  height: 100% !important;
    border-radius: 20px 20px 0 0;
}

/* Container spacing like design */
.px-design {
  padding-left: clamp(20px, 5.55vw, 80px) !important;
  padding-right: clamp(20px, 5.55vw, 80px) !important;
}

/* Desktop section guardrails */
.intro-section,
.about-section {
  overflow: hidden;
}

.project-facts {
  width: 100%;
  margin-left: auto;
}

/* Way-live desktop scaling: preserve Figma stage but stop overflow break */
@media (min-width: 992px) and (max-width: 1439px) {
  .way-live-stage {
    transform: translateX(-50%) scale(calc(100vw / 1440)) !important;
    transform-origin: top center !important;
  }
}

/* Balance section desktop alignment */
.balance-visual,
.balance-main-image,
.balance-preview {
  max-width: 100%;
}

/* Gallery desktop scaling */
@media (min-width: 992px) and (max-width: 1439px) {
  .gallery-shell {
    width: 1440px !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) scale(calc(100vw / 1440)) !important;
    transform-origin: top center !important;
  }
}

/* Footer watermark full width, proportional, not stretched */
.footer-watermark,
.footer-section .footer-watermark,
.footer-section img.footer-watermark {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 1440px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) !important;
}

/* iPad / tablet fixes */
@media (max-width: 991px) {
  .hero-banner {
    min-height: 620px;
    height: 100svh;
  }

  .hero-logo {
    width: 130px !important;
    max-width: 34vw !important;
  }

  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo {
    width: 106px !important;
  }

  .hero-media-wrap {
    top: 240px !important;
  }

  .hero-banner.is-active .hero-media-wrap,
  .hero-banner:hover .hero-media-wrap,
  .hero-banner:focus-within .hero-media-wrap {
    top: 0 !important;
  }

  .intro-section,
  .about-section,
  .location-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    min-height: auto !important;
  }

  .intro-copy {
    font-size: 20px !important;
  }

  .about-image {
    height: clamp(320px, 52vw, 460px) !important;
  }

  .project-facts {
    max-width: 100% !important;
    text-align: left !important;
  }

  .project-fact {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
      text-align: center;
  }

  .way-live-section {
    height: auto !important;
    min-height: 760px !important;
    padding: 390px 28px 80px !important;
  }

  .way-live-stage {
    left: 0 !important;
    top: 40px !important;
    width: 100% !important;
    height: 360px !important;
    transform: none !important;
  }

  .way-card-1 { width: 170px !important; height: 218px !important; left: 0 !important; top: 8px !important; }
  .way-card-2 { width: 160px !important; height: 210px !important; left: 9% !important; top: 182px !important; }
  .way-card-3 { width: 155px !important; height: 235px !important; left: auto !important; right: 0 !important; top: 0 !important; }
  .way-card-4 { width: 165px !important; height: 208px !important; left: auto !important; right: 7% !important; top: 178px !important; }

  .balance-section {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  .balance-pin {
    height: auto !important;
    overflow: visible !important;
  }

  .balance-visual {
    height: clamp(340px, 55vw, 460px) !important;
    margin-bottom: 32px !important;
  }

  .balance-main-image {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
  }

  .balance-preview {
    display: none !important;
  }

  .balance-content {
    max-width: 100% !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .balance-row,
  .balance-row.active {
    height: auto !important;
    min-height: 72px !important;
  }

  .gallery-section {
    height: auto !important;
    min-height: auto !important;
    padding: 72px 0 !important;
  }

  .gallery-shell {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    left: auto !important;
    padding: 0 28px !important;
  }

  .gallery-left,
  .gallery-right {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .gallery-copy {
    position: relative !important;
    height: auto !important;
    padding: 0 0 32px !important;
  }

  .gallery-window {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .gallery-track figure {
    width: 82vw !important;
    flex-basis: 82vw !important;
    height: clamp(320px, 58vw, 440px) !important;
  }

    .gallery-blue-bar {
        display: block !important;
        left: auto;
    }
}

  .map-visual {
    height: clamp(360px, 58vw, 500px) !important;
  }

  .distance-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .location-feature-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .investment-section {
    padding: 80px 28px !important;
  }

  .investment-table div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 0px 0 !important;
  }

  .footer-watermark,
  .footer-section .footer-watermark,
  .footer-section img.footer-watermark {
    width: 160vw !important;
    min-width: 900px !important;
  }
}

/* iPhone / small mobile fixes */
@media (max-width: 575px) {
  .hero-banner {
    min-height: 560px;
  }

  .hero-logo {
    width: 112px !important;
  }

  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo {
    width: 96px !important;
  }

  .hero-media-wrap {
    width: 260px !important;
    height: 150px !important;
  }

  .hero-banner.is-active .hero-media-wrap,
  .hero-banner:hover .hero-media-wrap,
  .hero-banner:focus-within .hero-media-wrap {
    width: 100vw !important;
    height: 100% !important;
  }

  .hero-title {
    font-size: 28px !important;
    bottom: 136px !important;
      text-align: left;
  }

  .intro-heading,
  .balance-content h2,
  .gallery-copy h2,
  .location-heading h2 {
    font-size: 28px !important;
  }

  .intro-copy {
    font-size: 16px !important;
  }

  .way-live-section {
    padding-top: 330px !important;
  }

  .way-live-stage {
    width: 118% !important;
    left: -9% !important;
    transform: scale(.84) !important;
    transform-origin: top center !important;
  }

  .balance-visual {
    height: 340px !important;
  }

  .gallery-track figure {
    width: 84vw !important;
    flex-basis: 84vw !important;
    height: 360px !important;
  }

  .distance-grid {
    grid-template-columns: 1fr !important;
  }

  .map-label {
    display: none !important;
  }

  .footer-section {
    padding-top: 72px !important;
    min-height: 620px !important;
  }
}

/* Large screen polish */
@media (min-width: 1440px) {
  .container-xxl {
    max-width: 1440px !important;
  }
}



/* ============================================================
   FINAL ADJUSTMENTS: mobile swipe, hero header, updated map
   ============================================================ */

/* Active hero header placement as per screenshot:
   centered white logo, developer link at top right, full-width white line.
*/
.hero-banner.is-active .hero-logo-wrap,
.hero-banner:hover .hero-logo-wrap,
.hero-banner:focus-within .hero-logo-wrap {
  top: 26px !important;
}

.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo,
.hero-banner:focus-within .hero-logo {
  width: 320px !important;
  max-width: 32vw !important;
  filter: brightness(0) invert(1) !important;
}

.hero-logo-wrap::after {
  top: calc(100% + 24px) !important;
  width: 100vw !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.95) !important;
}

.hero-dev-link {
  left: auto !important;
  right: 80px !important;
  top: 25px !important;
  bottom: auto !important;
  transform: translateY(10px) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.hero-banner.is-active .hero-dev-link,
.hero-banner:hover .hero-dev-link,
.hero-banner:focus-within .hero-dev-link {
  transform: translateY(0) !important;
}

/* Keep title below header elements */
.hero-banner.is-active .hero-title,
.hero-banner:hover .hero-title,
.hero-banner:focus-within .hero-title {
  bottom: 385px !important;
}

/* Updated map from provided screenshot */
.map-visual {
  background-image: url("assets/images/map-reference.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
}

.map-visual::before {
  display: none !important;
}

/* Screenshot already includes all labels and marker */
.map-visual .map-label,
.map-visual .map-mark {
  display: none !important;
}

/* Gallery mobile swipe support and smoother touch behavior */
.gallery-window {
  cursor: grab;
}

.gallery-window:active {
  cursor: grabbing;
}

.gallery-track {
  touch-action: pan-y;
  user-select: none;
}

.gallery-track img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Mobile/iPad refinements */
@media (max-width: 991px) {
  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    top: 22px !important;
  }

  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo {
    width: 220px !important;
    max-width: 52vw !important;
  }

  .hero-logo-wrap::after {
    top: calc(100% + 18px) !important;
    height: 2px !important;
  }

  .hero-dev-link {
    right: 28px !important;
    top: 16px !important;
    font-size: 14px !important;
  }

  .map-visual {
    height: clamp(300px, 60vw, 520px) !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 575px) {
  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo {
    width: 165px !important;
    max-width: 48vw !important;
  }

  .hero-dev-link {
    right: 20px !important;
    top: 34px !important;
    font-size: 12px !important;
  }

  .hero-logo-wrap::after {
    top: calc(100% + 15px) !important;
  }

  .map-visual {
    height: 330px !important;
    background-position: center center !important;
  }
}



/* ============================================================
   HEADER LOGO UPDATE
   Uses uploaded SVG: assets/images/header-logo.svg
   Logo remains proportional and never stretched.
   ============================================================ */
.hero-logo {
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
}

/* If uploaded SVG is already white, keep it clean on animated banner */
.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo,
.hero-banner:focus-within .hero-logo {
  object-fit: contain !important;
}



/* ============================================================
   FINAL LOGO UPDATE
   - Header dark logo on white hero state.
   - Header white logo when hero banner opens.
   - Footer Sartoria logo full-width, proportional, no stretch.
   ============================================================ */

.hero-logo-wrap {
  position: absolute;
  display: block;
  width: 170px;
  height: auto;
}

.hero-logo,
.hero-logo-white {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  transition: opacity 420ms cubic-bezier(.16,1,.3,1), width 700ms cubic-bezier(.16,1,.3,1);
}

/* dark/default logo visible before banner opens */
.hero-logo {
  opacity: 1 !important;
  filter: none !important;
}

/* white logo hidden before banner opens */
.hero-logo-white {
  position: absolute;
  inset: 0;
  opacity: 0 !important;
  filter: none !important;
}

/* when hero opens, swap to uploaded white SVG */
.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo,
.hero-banner:focus-within .hero-logo {
  opacity: 0 !important;
  filter: none !important;
}

.hero-banner.is-active .hero-logo-white,
.hero-banner:hover .hero-logo-white,
.hero-banner:focus-within .hero-logo-white {
  opacity: 1 !important;
}

/* active header logo size matching design */
.hero-banner.is-active .hero-logo-wrap,
.hero-banner:hover .hero-logo-wrap,
.hero-banner:focus-within .hero-logo-wrap {
  width: 320px !important;
  max-width: 32vw !important;
}

/* default header logo size */
.hero-logo-wrap {
  width: 150px !important;
  max-width: 36vw !important;
}

/* footer full-width uploaded Sartoria logo */
.footer-watermark,
.footer-section .footer-watermark,
.footer-section img.footer-watermark {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 1440px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) !important;
  aspect-ratio: auto !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* keep footer content above full-width logo */
.footer-section .container-xxl,
.footer-section .design-container,
.footer-section .position-relative {
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .hero-logo-wrap {
    width: 130px !important;
    max-width: 34vw !important;
  }

  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    width: 220px !important;
    max-width: 52vw !important;
  }

  .footer-watermark,
  .footer-section .footer-watermark,
  .footer-section img.footer-watermark {
    width: 160vw !important;
    min-width: 900px !important;
  }
}

@media (max-width: 575px) {
  .hero-logo-wrap {
    width: 112px !important;
    max-width: 34vw !important;
  }

  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    width: 165px !important;
    max-width: 48vw !important;
  }
}



/* ============================================================
   FINAL LOGO TWEAK
   - Active hero logo uses assets/images/header-new-logo.svg
   - Footer logo uses soft-light blend and opacity like design
   ============================================================ */

.hero-logo-white {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
}

/* Footer full-width logo blend treatment */
.footer-watermark,
.footer-section .footer-watermark,
.footer-section img.footer-watermark {
  opacity: .70 !important;
  mix-blend-mode: soft-light !important;
  width: 100vw !important;
  min-width: 1440px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}


/* ============================================================
   ASSET + BALANCE ANIMATION PATCH
   Keeps the uploaded Bootstrap design intact.
   Uses uploaded Desktop assets and the approved round/orbit balance animation.
   ============================================================ */

/* Investment/table section image from uploaded assets */
.investment-section {
  background-image: url("assets/images/Desktop/Table bg image D.webp") !important;
}

/* Designed for living, built for balance: approved orbit animation */
.balance-main-image {
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.balance-preview {
  display: none !important;
}

.balance-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ddd;
  box-shadow: 0 24px 70px rgba(62, 45, 27, 0.13);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  transition:
    transform 1160ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms cubic-bezier(0.33, 1, 0.68, 1),
    filter 900ms cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.balance-img img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: scale(1.02);
  transition: transform 1160ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.balance-img[data-slot="active"] {
  z-index: 4;
  opacity: 1 !important;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1) !important;
}

.balance-img[data-slot="active"] img {
  transform: scale(1);
}

.balance-img[data-slot="next"] {
  z-index: 2;
  opacity: .36 !important;
  filter: blur(.2px);
  transform: translate3d(-49%, 86%, 0) rotate(0deg) scale(.43) !important;
}

.balance-img[data-slot="prev"] {
  z-index: 1;
  opacity: .26 !important;
  filter: blur(.4px);
  transform: translate3d(-50%, -78%, 0) rotate(0deg) scale(.43) !important;
}

.balance-row {
  height: 58px !important;
  min-height: 58px !important;
  grid-template-rows: 24px 0fr !important;
  gap: 0 !important;
  transition:
    height 760ms cubic-bezier(0.22, 1, 0.36, 1),
    grid-template-rows 760ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 760ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.balance-row.active {
  height: 98px !important;
  grid-template-rows: 24px 1fr !important;
  gap: 16px !important;
}

.balance-row-title img,
.balance-text-icon {
  width: 24px !important;
  height: 24px !important;
  opacity: .78;
  transition:
    opacity 420ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.balance-row.active .balance-row-title img,
.balance-row.active .balance-text-icon {
  opacity: 1;
  transform: translateX(1px) scale(1.04);
}

.balance-row-title {
  transition: transform 420ms cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.balance-row.active .balance-row-title {
  transform: translateX(1px);
}

.balance-row-desc {
  display: block !important;
  min-height: 0;
  overflow: hidden;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity 520ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 520ms cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.balance-row.active .balance-row-desc {
  opacity: .7 !important;
  transform: translateY(0) !important;
  transition-delay: 180ms !important;
}

@media (max-width: 991px) {
  .balance-main-image {
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #ddd !important;
  }

  .balance-img {
    box-shadow: none !important;
  }

  .balance-img[data-slot="active"] {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .balance-img[data-slot="next"],
  .balance-img[data-slot="prev"] {
    opacity: 0 !important;
    transform: translate3d(0, 0, 0) scale(1.02) !important;
    pointer-events: none;
  }

  .balance-row,
  .balance-row.active {
    height: auto !important;
    min-height: 72px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balance-img,
  .balance-img img,
  .balance-row,
  .balance-row-desc,
  .balance-row-title,
  .balance-row-title img {
    transition: none !important;
  }
}


/* ============================================================
   REFINEMENT PATCH 2026-05-28
   1) Hero white logo keeps the exact same size as the initial dark logo.
   2) Gallery carousel stays continuous with the JS infinite-loop update.
   ============================================================ */

/* Desktop: keep default and expanded hero logo identical in size */
.hero-logo-wrap {
  width: 150px !important;
  max-width: 36vw !important;
}

.hero-banner.is-active .hero-logo-wrap,
.hero-banner:hover .hero-logo-wrap,
.hero-banner:focus-within .hero-logo-wrap {
  width: 150px !important;
  max-width: 36vw !important;
}

/* The SVG inside the wrapper always fills the wrapper proportionally */
.hero-logo,
.hero-logo-white {
  width: 100% !important;
  height: auto !important;
}

/* Keep the View the space track prepared for seamless looping */
.gallery-track figure {
  flex-shrink: 0 !important;
}

@media (max-width: 991px) {
  .hero-logo-wrap,
  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    width: 130px !important;
    max-width: 34vw !important;
  }
}

@media (max-width: 575px) {
  .hero-logo-wrap,
  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    width: 112px !important;
    max-width: 34vw !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVE REFINEMENT PATCH 2026-05-28
   Scope: "Designed for the way you live" section only + requested CTA color.
   Desktop layout/design remains untouched.
   ============================================================ */

/* Requested Contact Us button color on desktop and mobile */
.way-live-content .site-btn {
  background: rgba(109, 145, 111, 1) !important;
  color: #fff !important;
}

.way-live-content .site-btn:hover,
.way-live-content .site-btn:focus-visible {
  background: rgba(109, 145, 111, .88) !important;
  color: #fff !important;
}

@media (max-width: 991px) {
  /* Keep this mobile section compact, centered, and clipped to the viewport */
  .way-live-section {
    width: 100% !important;
    height: 470px !important;
    min-height: 470px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .way-live-stage {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Mobile target layout: four image cards around the center copy */
  .way-card {
    opacity: 1 !important;
    z-index: 2 !important;
    transform: none !important;
  }

  .way-card-1 {
    width: 142px !important;
    height: 178px !important;
    left: -58px !important;
    top: 60px !important;
  }

  .way-card-2 {
    width: 126px !important;
    height: 166px !important;
    left: -46px !important;
    top: 286px !important;
  }

  .way-card-3 {
    width: 138px !important;
    height: 184px !important;
    left: auto !important;
    right: -54px !important;
    top: 36px !important;
  }

  .way-card-4 {
    width: 128px !important;
    height: 160px !important;
    left: auto !important;
    right: -42px !important;
    top: 292px !important;
  }

  .way-live-content {
    width: 100% !important;
    max-width: 590px !important;
    padding: 0 !important;
    gap: 14px !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 6 !important;
  }

  .way-live-content h2 {
    width: 100% !important;
    max-width: 230px !important;
    margin: 0 auto !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  .way-live-content p {
    width: 100% !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
  }

  .way-live-content .site-btn {
    min-height: 34px !important;
    padding: 8px 22px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 575px) {
  .way-live-section {
    height: 440px !important;
    min-height: 440px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .way-card-1 {
    width: 132px !important;
    height: 166px !important;
    left: -64px !important;
    top: 56px !important;
  }

  .way-card-2 {
    width: 118px !important;
    height: 154px !important;
    left: -56px !important;
    top: 272px !important;
  }

  .way-card-3 {
    width: 130px !important;
    height: 172px !important;
    right: -62px !important;
    top: 42px !important;
  }

  .way-card-4 {
    width: 120px !important;
    height: 152px !important;
    right: -54px !important;
    top: 280px !important;
  }

  .way-live-content {
    max-width: 238px !important;
    gap: 12px !important;
  }

  .way-live-content h2 {
    max-width: 218px !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .way-live-content p {
    max-width: 238px !important;
    font-size: 10.5px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 360px) {
  .way-live-section {
    height: 420px !important;
    min-height: 420px !important;
  }

  .way-live-content {
    max-width: 218px !important;
  }

  .way-live-content h2 {
    max-width: 205px !important;
    font-size: 21px !important;
  }

  .way-live-content p {
    max-width: 218px !important;
    font-size: 10px !important;
  }

  .way-card-1 { left: -72px !important; }
  .way-card-2 { left: -64px !important; }
  .way-card-3 { right: -70px !important; }
  .way-card-4 { right: -62px !important; }
}

/* ============================================================
   FINAL MOBILE-ONLY FOOTER + WAY-LIVE ANIMATION FIX
   Scope:
   1) Footer watermark scales down on tablet/mobile like the shared design.
   2) Way-live image animation remains enabled on tablet/mobile; JS writes the
      animated transform inline, so these rules only define the final layout.
   ============================================================ */

@media (max-width: 991px) {
  .footer-section {
    min-height: 520px !important;
    padding-top: 64px !important;
    padding-bottom: 92px !important;
  }

  .footer-watermark,
  .footer-section .footer-watermark,
  .footer-section img.footer-watermark {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    opacity: .70 !important;
    mix-blend-mode: soft-light !important;
  }
}

@media (max-width: 575px) {
  .footer-section {
    min-height: 430px !important;
    padding-top: 48px !important;
    padding-bottom: 72px !important;
  }

  .footer-section h2 {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .footer-section p,
  .footer-section address {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .footer-section .row.gy-5 {
    --bs-gutter-y: 22px !important;
  }

  .contact-form {
    margin-top: 22px !important;
  }

  .contact-form .row.g-4 {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 14px !important;
  }

  .custom-field {
    min-height: 30px !important;
    padding: 6px 0 !important;
    font-size: 9px !important;
  }

  .message-field {
    min-height: 58px !important;
  }

  .footer-section .site-btn {
    min-height: 24px !important;
    padding: 6px 18px !important;
    font-size: 9px !important;
  }

  .footer-watermark,
  .footer-section .footer-watermark,
  .footer-section img.footer-watermark {
    width: 100vw !important;
    min-width: 0 !important;
    opacity: .70 !important;
  }
}

/* Give the JS animation priority on tablet/mobile. The final mobile layout is
   still controlled by the rules above; the JS temporarily offsets each card
   during scroll, then returns it to transform: none at the end of the motion. */
@media (max-width: 991px) {
  .way-card {
    will-change: transform !important;
  }
}

/* Mobile footer form layout from the supplied design: Name and Email stay side by side. */
@media (max-width: 575px) {
  .footer-section .contact-form .col-md-6 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* ============================================================
   FINAL WORDPRESS REQUEST PATCH 2026-05-29
   1) Mobile-only hero image is served from Hero Banner M.webp via <picture>.
   2) Mobile-only investment/table background uses Table bg image M.webp.
   3) map-reference.webp has been replaced with the supplied Map.jpg converted to WebP.
   4) Footer contact form rebuilt to match the supplied design.
   ============================================================ */

.hero-media-wrap picture,
.hero-media-wrap picture .hero-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 767.98px) {
  .investment-section {
    background-image: url("assets/images/Desktop/Table bg image M.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* Footer/contact form desktop design */
.footer-section {
  min-height: 768px !important;
  padding: 58px 0 120px !important;
  background: var(--blue) !important;
}

.footer-section .row.justify-content-between {
  align-items: flex-start !important;
}

.footer-section h2 {
  margin: 0 0 24px !important;
  color: #fff !important;
  font-size: clamp(28px, 2.35vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 300 !important;
}

.footer-section .footer-subtitle {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  color: #fff !important;
  border-bottom: 3px solid rgba(255,255,255,.95) !important;
  font-size: clamp(24px, 2.05vw, 34px) !important;
  line-height: 1.18 !important;
  font-weight: 300 !important;
}

.footer-section address {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
}

.footer-section .contact-form {
  width: 100% !important;
  max-width: 1194px !important;
  margin-top: 88px !important;
}

.footer-section .contact-form .row.g-4 {
  --bs-gutter-x: 44px !important;
  --bs-gutter-y: 56px !important;
}

.footer-section .custom-field {
  width: 100% !important;
  min-height: 74px !important;
  padding: 0 0 22px !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,.32) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
}

.footer-section .custom-field::placeholder {
  color: rgba(255,255,255,.98) !important;
  opacity: 1 !important;
}

.footer-section .custom-field:focus {
  border-bottom-color: rgba(255,255,255,.8) !important;
  box-shadow: none !important;
}

.footer-section .message-field {
  min-height: 152px !important;
  padding-top: 0 !important;
  resize: vertical !important;
}

.footer-section .site-btn,
.footer-section .site-btn-light {
  width: 218px !important;
  min-height: 82px !important;
  padding: 16px 32px !important;
  border: 0 !important;
  background: #fff !important;
  color: var(--blue) !important;
  font-size: clamp(20px, 1.7vw, 30px) !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  text-decoration: none !important;
}

.footer-section .site-btn:hover,
.footer-section .site-btn:focus-visible,
.footer-section .site-btn-light:hover,
.footer-section .site-btn-light:focus-visible {
  background: #fff !important;
  color: var(--dark) !important;
}

.contact-status {
  width: fit-content !important;
  margin-top: 24px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Footer/contact tablet + mobile keeps the same design language but scales down cleanly. */
@media (max-width: 991px) {
  .footer-section {
    min-height: 560px !important;
    padding: 56px 0 100px !important;
  }

  .footer-section .contact-form {
    margin-top: 52px !important;
  }

  .footer-section .contact-form .row.g-4 {
    --bs-gutter-x: 28px !important;
    --bs-gutter-y: 32px !important;
  }

  .footer-section .custom-field {
    min-height: 48px !important;
    padding-bottom: 12px !important;
    font-size: 18px !important;
    border-bottom-width: 1px !important;
  }

  .footer-section .message-field {
    min-height: 90px !important;
  }

  .footer-section .site-btn,
  .footer-section .site-btn-light {
    width: 120px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 575px) {
  .footer-section {
    min-height: 430px !important;
    padding-top: 46px !important;
    padding-bottom: 72px !important;
  }

  .footer-section h2 {
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .footer-section .footer-subtitle {
    padding-bottom: 2px !important;
    border-bottom-width: 1px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .footer-section address {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .footer-section .contact-form {
    margin-top: 24px !important;
  }

  .footer-section .contact-form .row.g-4 {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 16px !important;
  }

  .footer-section .custom-field {
    min-height: 30px !important;
    padding-bottom: 7px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .footer-section .message-field {
    min-height: 58px !important;
  }

  .footer-section .site-btn,
  .footer-section .site-btn-light {
    width: 74px !important;
    min-height: 27px !important;
    padding: 6px 14px !important;
    font-size: 10px !important;
  }

  .contact-status {
    margin-top: 12px !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }
    
    .hero-banner.is-active .hero-media-wrap, .hero-banner:hover .hero-media-wrap, .hero-banner:focus-within .hero-media-wrap {
        border-radius:0;
    }
    
    .hero-banner.is-active .hero-title, .hero-banner:hover .hero-title, .hero-banner:focus-within .hero-title {
    bottom: 255px !important;
}
    
      .hero-title {
        font-size: 29px;
        bottom: 136px;
        text-align: left;
        font-weight: 600;
          padding-right: 120px;
    }
    
    .balance-content h2, .gallery-copy h2, .location-heading h2 {
        font-size: 28px;
    }
    
    .location-section .distance-grid strong {font-size: 30px;}
    
    .location-section .location-feature-row p { font-size: 16px;}
    
    .gallery-blue-bar { top:350px;}
    
    .investment-section .investment-inner h2 { font-size: 18px; }
    
    
}

/* ============================================================
   FINAL SMALL REFINEMENT PATCH
   1) Footer/contact form scaled down to match the supplied layout more closely.
   2) Developer Website hero link hidden on mobile screens only.
   ============================================================ */

.footer-section {
  min-height: 650px !important;
  padding-top: 56px !important;
  padding-bottom: 92px !important;
}

.footer-section h2 {
  margin-bottom: 18px !important;
  font-size: clamp(26px, 2.05vw, 34px) !important;
  line-height: 1.15 !important;
}

.footer-section .footer-subtitle {
  padding-bottom: 2px !important;
  border-bottom-width: 2px !important;
  font-size: clamp(20px, 1.75vw, 28px) !important;
  line-height: 1.18 !important;
}

.footer-section .contact-form {
  max-width: 1040px !important;
  margin-top: 68px !important;
}

.footer-section .contact-form .row.g-4 {
  --bs-gutter-x: 38px !important;
  --bs-gutter-y: 40px !important;
}

.footer-section .custom-field {
  min-height: 56px !important;
  padding-bottom: 13px !important;
  border-bottom-width: 1px !important;
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.2 !important;
}

.footer-section .message-field {
  min-height: 112px !important;
}

.footer-section .site-btn,
.footer-section .site-btn-light {
  width: 170px !important;
  min-height: 58px !important;
  padding: 12px 26px !important;
  font-size: clamp(16px, 1.35vw, 22px) !important;
}

@media (max-width: 991.98px) {
  .footer-section {
    min-height: 520px !important;
    padding-top: 52px !important;
    padding-bottom: 84px !important;
  }

  .footer-section .contact-form {
    max-width: 100% !important;
    margin-top: 38px !important;
  }

  .footer-section .contact-form .row.g-4 {
    --bs-gutter-x: 24px !important;
    --bs-gutter-y: 26px !important;
  }

  .footer-section .custom-field {
    min-height: 42px !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;
  }

  .footer-section .message-field {
    min-height: 82px !important;
  }

  .footer-section .site-btn,
  .footer-section .site-btn-light {
    width: 112px !important;
    min-height: 42px !important;
    padding: 9px 18px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 767.98px) {
  .hero-dev-link {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 575.98px) {
  .footer-section {
    min-height: 410px !important;
    padding-top: 44px !important;
    padding-bottom: 66px !important;
  }

  .footer-section h2 {
    margin-bottom: 8px !important;
    font-size: 14px !important;
  }

  .footer-section .footer-subtitle {
    font-size: 11px !important;
    border-bottom-width: 1px !important;
  }

  .footer-section .contact-form {
    margin-top: 22px !important;
  }

  .footer-section .contact-form .row.g-4 {
    --bs-gutter-x: 14px !important;
    --bs-gutter-y: 14px !important;
  }

  .footer-section .custom-field {
    min-height: 28px !important;
    padding-bottom: 6px !important;
    font-size: 9px !important;
  }

  .footer-section .message-field {
    min-height: 54px !important;
  }

  .footer-section .site-btn,
  .footer-section .site-btn-light {
    width: 70px !important;
    min-height: 26px !important;
    padding: 5px 12px !important;
    font-size: 9px !important;
  }
}


/* ============================================================
   FINAL HEADER + CONTACT FORM PATCH 2026-05-29
   Scope only:
   1) Header logo same size in dark/white state with no size/position animation.
   2) Developer Website link points to https://thepinnacle.ae/.
   3) Footer contact form spacing matched to supplied reference; no visible labels.
   ============================================================ */

/* Header logo: same asset footprint in default and expanded hero states, no jerk. */
.hero-logo-wrap,
.hero-banner.is-active .hero-logo-wrap,
.hero-banner:hover .hero-logo-wrap,
.hero-banner:focus-within .hero-logo-wrap {
  top: 18px !important;
  width: 230px !important;
  max-width: 30vw !important;
  height: 36px !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}

.hero-logo,
.hero-logo-white,
.hero-banner.is-active .hero-logo,
.hero-banner:hover .hero-logo,
.hero-banner:focus-within .hero-logo,
.hero-banner.is-active .hero-logo-white,
.hero-banner:hover .hero-logo-white,
.hero-banner:focus-within .hero-logo-white {
  width: 230px !important;
  max-width: 100% !important;
  height: 36px !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}

.hero-logo-wrap::after {
  top: 54px !important;
  width: calc(100vw - 0px) !important;
  height: 1px !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  background: rgba(255,255,255,.82) !important;
  transform: translateX(-50%) scaleX(1) !important;
  transition: none !important;
}

.hero-banner.is-active .hero-logo-wrap::after,
.hero-banner:hover .hero-logo-wrap::after,
.hero-banner:focus-within .hero-logo-wrap::after {
  opacity: 1 !important;
  transform: translateX(-50%) scaleX(1) !important;
}

.hero-dev-link {
  transition: none !important;
}

/* Footer/contact exact desktop composition from supplied reference. */
.footer-section {
  min-height: 444px !important;
  padding: 76px 0px 300px 0px !important;
  background: var(--blue) !important;
}

.footer-section .container-xxl,
.footer-section .px-design {
  max-width: 1360px !important;
}

.footer-section .row.justify-content-between {
  align-items: flex-start !important;
  --bs-gutter-x: 24px !important;
  --bs-gutter-y: 22px !important;
}

.footer-section .col-lg-10.col-xl-10 {
  flex: 0 0 665px !important;
  width: 665px !important;
  max-width: 665px !important;
}

.footer-section .footer-address-col {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  padding-right: 28px !important;
}

.footer-section h2 {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
}

.footer-section .footer-subtitle {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 300 !important;
}

.footer-section address {
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 300 !important;
}

.footer-section .contact-form {
  width: 665px !important;
  max-width: 665px !important;
  margin-top: 54px !important;
}

.footer-section .contact-form label {
  display: none !important;
}

.footer-section .contact-form .row.g-4 {
  --bs-gutter-x: 24px !important;
  --bs-gutter-y: 34px !important;
}

.footer-section .custom-field {
  min-height: 36px !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
}

.footer-section .custom-field::placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

.footer-section .custom-field:focus {
  border-bottom-color: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}

.footer-section .message-field {
  min-height: 80px !important;
  padding-top: 0 !important;
  resize: vertical !important;
    resize: none!important;
}

.footer-section .site-btn,
.footer-section .site-btn-light {
  width: 122px !important;
  min-height: 45px !important;
  padding: 10px 24px !important;
  border: 0 !important;
  background: #fff !important;
  color: var(--blue) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  text-decoration: none !important;
}

.footer-section .site-btn:hover,
.footer-section .site-btn:focus-visible,
.footer-section .site-btn-light:hover,
.footer-section .site-btn-light:focus-visible {
  background: #fff !important;
  color: var(--dark) !important;
}

@media (max-width: 991.98px) {
  .hero-logo-wrap,
  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    top: 14px !important;
    width: 170px !important;
    max-width: 42vw !important;
    height: 27px !important;
  }

  .hero-logo,
  .hero-logo-white,
  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo,
  .hero-banner.is-active .hero-logo-white,
  .hero-banner:hover .hero-logo-white,
  .hero-banner:focus-within .hero-logo-white {
    width: 170px !important;
    height: 27px !important;
  }

  .hero-logo-wrap::after {
    top: 44px !important;
    width: calc(100vw - 0px) !important;
  }

  .footer-section {
    min-height: auto !important;
    padding: 56px 0 164px !important;
  }

  .footer-section .col-lg-10.col-xl-10,
  .footer-section .contact-form {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-section .footer-address-col {
    margin-left: 0 !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
      margin-top: 45px;
  }
}

@media (max-width: 767.98px) {
  .hero-dev-link {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 575.98px) {
  .hero-logo-wrap,
  .hero-banner.is-active .hero-logo-wrap,
  .hero-banner:hover .hero-logo-wrap,
  .hero-banner:focus-within .hero-logo-wrap {
    top: 12px !important;
    width: 120px !important;
    max-width: 42vw !important;
    height: 19px !important;
  }

  .hero-logo,
  .hero-logo-white,
  .hero-banner.is-active .hero-logo,
  .hero-banner:hover .hero-logo,
  .hero-banner:focus-within .hero-logo,
  .hero-banner.is-active .hero-logo-white,
  .hero-banner:hover .hero-logo-white,
  .hero-banner:focus-within .hero-logo-white {
    width: 120px !important;
    height: 19px !important;
  }

  .hero-logo-wrap::after {
    top: 34px !important;
  }

  .footer-section {
    padding-top: 44px !important;
    padding-bottom: 135px !important;
  }

  .footer-section h2 {
    margin-bottom: 8px !important;
    font-size: 18px !important;
  }

  .footer-section .footer-subtitle {
    font-size: 16px !important;
  }

  .footer-section address {
    font-size: 16px !important;
  }

  .footer-section .contact-form {
    margin-top: 24px !important;
  }

  .footer-section .contact-form .row.g-4 {
    --bs-gutter-x: 14px !important;
    --bs-gutter-y: 16px !important;
  }

  .footer-section .custom-field {
    min-height: 28px !important;
    padding-bottom: 7px !important;
    font-size: 10px !important;
  }

  .footer-section .message-field {
    min-height: 54px !important;
  }

  .footer-section .site-btn,
  .footer-section .site-btn-light {
    width: 74px !important;
    min-height: 27px !important;
    padding: 5px 12px !important;
    font-size: 9px !important;
  }
}


/* ============================================================
   FINAL SCOPED PATCH: MAP DISTANCE GRID + INVESTMENT TABLE ONLY
   - Matches supplied desktop/mobile references.
   - No other page sections are affected.
   ============================================================ */

/* Connected to everything that matters */
.location-section.section-cream {
  background: var(--cream);
  padding: 86px 0 82px !important;
}

.location-section .location-heading {
  max-width: 980px !important;
  margin: 0 auto 36px !important;
  text-align: center !important;
}

.location-section .location-heading h2 {
  margin: 0 0 24px !important;
  color: var(--dark) !important;
  font-size: clamp(34px, 3.05vw, 40px) !important;
  line-height: 1.2 !important;
  font-weight: 300 !important;
}

.location-section .location-heading p {
  max-width: 1040px !important;
  margin: 0 auto !important;
  color: #1f1f1f !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
  opacity: 1 !important;
}

.location-section .map-visual {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2048 / 1035 !important;
  margin: 0 !important;
  border: 0 !important;
  background-image: url("assets/images/map-reference.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.location-section .map-visual .map-label,
.location-section .map-visual .map-mark,
.location-section .map-visual::before {
  display: none !important;
}

.location-section .distance-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 46px !important;
  row-gap: 28px !important;
  margin: 38px 0 0 !important;
  padding: 0 !important;
}

.location-section .distance-grid > div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.location-section .distance-grid strong {
  flex: 0 0 auto !important;
  min-width: 62px !important;
  color: #1e1e1e !important;
  font-size: 40px !important;
  line-height: .95 !important;
  font-weight: 500 !important;
}

.location-section .distance-grid span {
  min-width: 0 !important;
  color: #454545 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 300 !important;
}

.location-section .location-feature-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(68px, 10vw, 154px) !important;
  margin-top: 34px !important;
  padding: 40px 0 0 !important;
  border-top: 1px solid rgba(29, 29, 29, .25) !important;
}

.location-section .location-feature-row article {
  padding: 0 !important;
}

.location-section .location-feature-row img {
  width: 54px !important;
  height: 44px !important;
  margin: 0 0 20px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.location-section .location-feature-row p {
  max-width: 330px !important;
  margin: 0 !important;
  color: #0f0f0f !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
}

/* Investment section */
.investment-section {
  position: relative !important;
  display: block !important;
  min-height: 720px !important;
  padding: 0 !important;
  color: #fff !important;
  background-image: url("assets/images/Desktop/Table bg image D.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

.investment-section .investment-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgb(0 0 0 / 5%) !important;
}

.investment-section .investment-container {
  position: relative !important;
  z-index: 2 !important;
  min-height: 720px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 108px !important;
  padding-bottom: 108px !important;
}

.investment-section .investment-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 925px !important;
  margin: 0 !important;
}

.investment-section .investment-inner h2 {
  max-width: 925px !important;
  margin: 0 0 44px !important;
  color: #fff !important;
  font-size: clamp(32px, 3vw, 32px) !important;
  line-height: 1.35 !important;
  font-weight: 300 !important;
}

.investment-section .investment-table {
  width: 100% !important;
  max-width: 925px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.investment-section .investment-table > div {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 312px minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  border-bottom: 1px solid rgba(255,255,255,.62) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.investment-section .investment-table span,
.investment-section .investment-table strong {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  color: #fff !important;
}

.investment-section .investment-table span {
  padding: 16px 22px 16px 0 !important;
  border-right: 1px solid rgba(255,255,255,.75) !important;
  font-weight: 300 !important;
}

.investment-section .investment-table strong {
  padding: 16px 0 16px 20px !important;
  font-weight: 600 !important;
}

@media (max-width: 1199.98px) {
  .location-section .distance-grid {
    column-gap: 28px !important;
  }

  .location-section .distance-grid strong {
    min-width: 54px !important;
    font-size: 36px !important;
  }

  .location-section .distance-grid span {
    font-size: 14px !important;
  }
}

@media (max-width: 991.98px) {
  .location-section.section-cream {
    padding: 62px 0 72px !important;
  }

  .location-section .location-heading {
    margin-bottom: 42px !important;
  }

  .location-section .location-heading h2 {
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 30px !important;
    line-height: 1.34 !important;
  }

  .location-section .location-heading p {
    max-width: 380px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .location-section .map-visual {
    aspect-ratio: 382 / 323 !important;
    height: auto !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .location-section .distance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 52px !important;
    row-gap: 27px !important;
    margin-top: 48px !important;
  }

  .location-section .distance-grid > div {
    display: block !important;
  }

  .location-section .distance-grid strong {
    display: block !important;
    min-width: 0 !important;
    margin: 0 0 9px !important;
    font-size: 33px !important;
    line-height: .95 !important;
  }

  .location-section .distance-grid span {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .location-section .distance-grid > div:nth-child(1) { order: 1 !important; }
  .location-section .distance-grid > div:nth-child(2) { order: 2 !important; }
  .location-section .distance-grid > div:nth-child(3) { order: 3 !important; }
  .location-section .distance-grid > div:nth-child(5) { order: 4 !important; }
  .location-section .distance-grid > div:nth-child(6) { order: 5 !important; }
  .location-section .distance-grid > div:nth-child(4) { order: 6 !important; }
  .location-section .distance-grid > div:nth-child(7) { order: 7 !important; }
  .location-section .distance-grid > div:nth-child(8) { order: 8 !important; }
  .location-section .distance-grid > div:nth-child(9) { order: 9 !important; }
  .location-section .distance-grid > div:nth-child(10) { order: 10 !important; }

  .location-section .location-feature-row {
    grid-template-columns: 1fr !important;
    gap: 46px !important;
    margin-top: 38px !important;
    padding-top: 36px !important;
  }

  .location-section .location-feature-row img {
    width: 54px !important;
    height: 42px !important;
    margin-bottom: 17px !important;
  }

  .location-section .location-feature-row p {
    max-width: 360px !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .investment-section {
    min-height: 840px !important;
    background-image: url("assets/images/Desktop/Table bg image M.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .investment-section .investment-container {
    min-height: 840px !important;
    align-items: flex-start !important;
    padding-top: 52px !important;
    padding-bottom: 40px !important;
  }

  .investment-section .investment-inner {
    max-width: 100% !important;
  }

  .investment-section .investment-inner h2 {
    max-width: 100% !important;
    margin-bottom: 42px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  .investment-section .investment-table {
    max-width: 100% !important;
  }

  .investment-section .investment-table > div {
    min-height: 104px !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
  }

  .investment-section .investment-table span {
    padding: 22px 14px 22px 0 !important;
  }

  .investment-section .investment-table strong {
    padding: 22px 0 22px 14px !important;
  }
}

@media (max-width: 575.98px) {
  .location-section.section-cream {
    padding-top: 54px !important;
    padding-bottom: 66px !important;
  }

  .location-section .location-heading {
    margin-bottom: 42px !important;
  }

  .location-section .location-heading h2 {
    font-size: 28px !important;
  }

  .location-section .location-heading p {
    font-size: 16px !important;
  }

  .location-section .distance-grid {
    column-gap: 48px !important;
  }

  .investment-section .investment-container {
    padding-top: 52px !important;
  }
}

@media (max-width: 390px) {
  .location-section .distance-grid {
    column-gap: 34px !important;
  }

  .location-section .distance-grid span {
    font-size: 12px !important;
  }

  .investment-section .investment-table > div {
    font-size: 17px !important;
  }
}

/* ============================================================
   FINAL FONT APPLICATION PATCH
   Loads bundled Test Sohne Breit webfonts from assets/fonts and applies them globally.
   ============================================================ */
:root{
  --font:"Sartoria Sohne Breit","Arial Narrow",Arial,sans-serif;  
}



html,
body,
.site-page,
.site-page *:not(i):not(svg):not(path),
button,
input,
textarea,
select{
  font-family:var(--font) !important;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
body,
p,
span,
address,
input,
textarea,
button,
.hero-dev-link,
.custom-field,
.site-btn{
  font-weight:300 !important;
}
h1,h2,h3,h4,h5,h6,
.hero-title,
.way-live-content h2,
.balance-content h2,
.gallery-copy h2,
.location-heading h2,
.investment-inner h2{
  font-weight:300 !important;
}
strong,b,
.project-fact strong,
.balance-row.active,
.investment-table strong{
  font-weight:600 !important;
}

.balance-row-title {
      font-weight: 400 !important;
}



.intro-heading {
  font-weight: 600 !important;
}

.footer-section h2{
  font-weight:400 !important;
}

/* ============================================================
   FINAL RESPONSIVE ORGANIZATION PATCH 2026-06-04
   Scope:
   1) Clear breakpoint labels for future maintainers.
   2) iPad Pro keeps the desktop-style "View the space" layout.
   3) iPad / iPad Pro footer watermark stays fully visible, not cropped.
   ============================================================ */

/* ------------------------------
   DESKTOP / LARGE DESKTOP
   1367px and above
   Uses the base desktop CSS above.
   ------------------------------ */
@media (min-width: 1367px) {
  /* Intentionally empty: desktop is controlled by the base rules. */
}

/* ------------------------------
   IPAD PRO LANDSCAPE
   1200px - 1366.98px
   Keep View the space identical to desktop, scaled to the viewport.
   ------------------------------ */
@media (min-width: 1200px) and (max-width: 1366.98px) {
  .gallery-section {
    height: calc(818px * (100vw / 1440)) !important;
    min-height: 680px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .gallery-shell {
    position: relative !important;
    left: 50% !important;
    width: 1440px !important;
    max-width: none !important;
    height: 818px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) scale(calc(100vw / 1440)) !important;
    transform-origin: top center !important;
  }

  .gallery-left {
    position: absolute !important;
    left: 0 !important;
    top: 120px !important;
    width: 602px !important;
    height: 578px !important;
  }

  .gallery-right {
    position: absolute !important;
    left: 602px !important;
    top: 120px !important;
    width: 798px !important;
    height: 578px !important;
    overflow: visible !important;
  }

  .gallery-window {
    width: 798px !important;
    height: 578px !important;
    overflow: visible !important;
  }

  .gallery-track figure {
    width: 758px !important;
    flex: 0 0 758px !important;
    height: 578px !important;
  }

  .gallery-blue-bar {
    display: block !important;
    left: 595px !important;
    top: 409px !important;
  }
}

/* ------------------------------
   IPAD PRO PORTRAIT
   992px - 1199.98px
   Keep View the space in desktop composition, scaled down.
   ------------------------------ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gallery-section {
    height: calc(818px * (100vw / 1440)) !important;
    min-height: 582px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .gallery-shell {
    position: relative !important;
    left: 50% !important;
    width: 1440px !important;
    max-width: none !important;
    height: 818px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) scale(calc(100vw / 1440)) !important;
    transform-origin: top center !important;
  }

  .gallery-left {
    position: absolute !important;
    left: 0 !important;
    top: 120px !important;
    width: 602px !important;
    height: 578px !important;
  }

  .gallery-right {
    position: absolute !important;
    left: 602px !important;
    top: 120px !important;
    width: 798px !important;
    height: 578px !important;
    overflow: visible !important;
  }

  .gallery-copy {
    position: sticky !important;
    top: 0 !important;
    height: 578px !important;
    padding-left: 80px !important;
    padding-right: 73px !important;
  }

  .gallery-window {
    width: 798px !important;
    height: 578px !important;
    overflow: visible !important;
  }

  .gallery-track figure {
    width: 758px !important;
    flex: 0 0 758px !important;
    height: 578px !important;
  }

  .gallery-blue-bar {
    display: block !important;
    left: 595px !important;
    top: 409px !important;
  }
}

/* ------------------------------
   IPAD / TABLET
   768px - 991.98px
   Uses the stacked tablet layout already defined above.
   ------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Keep tablet-specific changes here when needed. */
}

/* ------------------------------
   FOOTER WATERMARK FIX
   iPad + iPad Pro: show the complete logo without horizontal cropping.
   ------------------------------ */
@media (min-width: 768px) and (max-width: 1366.98px) {
  .footer-section {
    overflow: hidden !important;
    padding-bottom: clamp(150px, 17vw, 245px) !important;
  }

  .footer-watermark,
  .footer-section .footer-watermark,
  .footer-section img.footer-watermark {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: translateX(-50%) !important;
  }
}

/* ------------------------------
   MOBILE
   576px - 767.98px
   Add future mobile-only rules here.
   ------------------------------ */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Intentionally empty for now. */
}

/* ------------------------------
   SMALL MOBILE
   575.98px and below
   Add future small-phone overrides here.
   ------------------------------ */
@media (max-width: 575.98px) {
  /* Intentionally empty for now. */
}


/* ============================================================
   FINAL IPAD PRO GALLERY + FOOTER PATCH 2026-06-04
   Scope only:
   1) View the space stays in desktop composition on iPad Pro
      1024x1366 and 1366x1024.
   2) Footer Sartoria watermark remains fully visible on iPad/iPad Pro.

   Breakpoint notes:
   - Mobile: up to 767.98px
   - iPad / tablet: 768px to 991.98px
   - iPad Pro portrait: 992px to 1199.98px
   - iPad Pro landscape: 1200px to 1366.98px
   - Desktop: 1367px and above
   ============================================================ */

/* iPad Pro portrait + landscape: keep desktop gallery layout, only scale the full desktop stage. */
@media (min-width: 992px) and (max-width: 1366.98px) {
  .gallery-section {
    --gallery-ipad-scale: calc(100vw / 1440);
    position: relative !important;
    width: 100% !important;
    height: calc(818px * var(--gallery-ipad-scale)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  .gallery-section .gallery-shell {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    width: 1440px !important;
    min-width: 1440px !important;
    max-width: none !important;
    height: 818px !important;
    min-height: 818px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) scale(var(--gallery-ipad-scale)) !important;
    transform-origin: top center !important;
  }

  .gallery-section .gallery-left {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 120px !important;
    width: 602px !important;
    height: 578px !important;
    min-height: 578px !important;
    display: block !important;
    background: #fff !important;
    z-index: 5 !important;
  }

  .gallery-section .gallery-copy {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: 578px !important;
    padding: 0 73px 0 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 24px !important;
    text-align: left !important;
  }

  .gallery-section .gallery-copy h2 {
    margin: 0 0 12px !important;
    font-size: 40px !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
  }

  .gallery-section .gallery-copy p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .gallery-section .gallery-controls {
    display: flex !important;
    gap: 40px !important;
  }

  .gallery-section .gallery-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .gallery-section .gallery-right {
    position: absolute !important;
    left: 602px !important;
    right: auto !important;
    top: 120px !important;
    width: 798px !important;
    height: 578px !important;
    min-height: 578px !important;
    display: block !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .gallery-section .gallery-window {
    width: 798px !important;
    height: 578px !important;
    overflow: visible !important;
  }

  .gallery-section .gallery-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
    width: max-content !important;
    will-change: transform !important;
  }

  .gallery-section .gallery-track figure {
    width: 758px !important;
    min-width: 758px !important;
    max-width: 758px !important;
    flex: 0 0 758px !important;
    height: 578px !important;
    min-height: 578px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .gallery-section .gallery-track img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .gallery-section .gallery-blue-bar {
    display: block !important;
    position: absolute !important;
    left: 595px !important;
    top: 409px !important;
    width: 14px !important;
    height: 284px !important;
    z-index: 6 !important;
    transform: translateY(-50%) !important;
  }
}

/* iPad Pro landscape: cap the scale at real desktop size when browser width is close to desktop. */
@media (min-width: 1200px) and (max-width: 1366.98px) {
  .gallery-section {
    --gallery-ipad-scale: calc(100vw / 1440);
  }
}

/* iPad + iPad Pro footer: keep the full footer wordmark visible without cropping. */
@media (min-width: 768px) and (max-width: 1366.98px) {
  .footer-section {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: clamp(165px, 20vw, 280px) !important;
  }

  .footer-section .footer-watermark,
  .footer-watermark,
  .footer-section img.footer-watermark {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: translateX(-50%) !important;
    opacity: .28 !important;
    mix-blend-mode: soft-light !important;
  }
}

/* ============================================================
   FINAL DEVICE-SPECIFIC FIX: IPAD PRO GALLERY SINGLE IMAGE
   Scope: only View the space section on iPad Pro sizes.
   Applies to:
   - 1024 x 1366 portrait
   - 1366 x 1024 landscape
   Goal: keep desktop composition, but show only one full gallery image
   at a time. No neighbouring/previous/next image should be visible.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1366.98px) {
  .gallery-section .gallery-window {
    width: 758px !important;
    max-width: 758px !important;
    height: 578px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .gallery-section .gallery-right {
    width: 758px !important;
    max-width: 758px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .gallery-section .gallery-track {
    gap: 40px !important;
  }

  .gallery-section .gallery-track figure {
    width: 758px !important;
    min-width: 758px !important;
    max-width: 758px !important;
    flex: 0 0 758px !important;
    height: 578px !important;
    min-height: 578px !important;
    max-height: 578px !important;
  }
}

/* ============================================================
   FINAL RESTORE: IPAD PRO VIEW THE SPACE
   Scope only: 1024x1366 portrait and 1366x1024 landscape range.
   Purpose: keep the section visible and use a desktop-style layout,
   but show only one complete gallery image at a time.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1366.98px) {
  .gallery-section {
    --ipad-gallery-card-width: min(758px, calc(100vw - 470px));
    --ipad-gallery-card-height: min(578px, calc(var(--ipad-gallery-card-width) * 0.7625));
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 640px !important;
    padding: 86px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .gallery-section .gallery-shell {
    display: grid !important;
    grid-template-columns: minmax(330px, 36%) minmax(0, 1fr) !important;
    column-gap: 48px !important;
    align-items: center !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: calc(100vw - 96px) !important;
    max-width: 1220px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .gallery-section .gallery-left {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    z-index: 4 !important;
  }

  .gallery-section .gallery-copy {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 24px !important;
    text-align: left !important;
  }

  .gallery-section .gallery-copy h2 {
    margin: 0 0 8px !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 300 !important;
  }

  .gallery-section .gallery-copy p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .gallery-section .gallery-controls {
    display: flex !important;
    gap: 40px !important;
  }

  .gallery-section .gallery-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .gallery-section .gallery-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: var(--ipad-gallery-card-width) !important;
    max-width: 100% !important;
    height: var(--ipad-gallery-card-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    z-index: 2 !important;
  }

  .gallery-section .gallery-window {
    display: block !important;
    width: var(--ipad-gallery-card-width) !important;
    max-width: 100% !important;
    height: var(--ipad-gallery-card-height) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .gallery-section .gallery-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
    width: max-content !important;
    height: var(--ipad-gallery-card-height) !important;
    will-change: transform !important;
  }

  .gallery-section .gallery-track figure {
    width: var(--ipad-gallery-card-width) !important;
    min-width: var(--ipad-gallery-card-width) !important;
    max-width: var(--ipad-gallery-card-width) !important;
    flex: 0 0 var(--ipad-gallery-card-width) !important;
    height: var(--ipad-gallery-card-height) !important;
    min-height: var(--ipad-gallery-card-height) !important;
    max-height: var(--ipad-gallery-card-height) !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .gallery-section .gallery-track img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .gallery-section .gallery-blue-bar {
    display: block !important;
    position: absolute !important;
    left: 375px !important;
    top: 50% !important;
    width: 14px !important;
    height: min(284px, 55%) !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
      display: none!important;
  }
}

@media (min-width: 1200px) and (max-width: 1366.98px) {
  .gallery-section {
    --ipad-gallery-card-width: min(758px, calc(100vw - 555px));
    --ipad-gallery-card-height: min(578px, calc(var(--ipad-gallery-card-width) * 0.7625));
    min-height: 690px !important;
  }

  .gallery-section .gallery-shell {
    width: calc(100vw - 120px) !important;
    max-width: 1320px !important;
    grid-template-columns: minmax(420px, 37%) minmax(0, 1fr) !important;
    column-gap: 54px !important;
  }
}