:root{
  --teal-900:#0f1412;
  --teal-700:#18211f;
  --teal-500:#263431;
  --teal-600:#127a82;
  --teal-400:#3e504c;
  --teal-200:#91a3a0;
  --ink:#080b0a;
  --charcoal:#131816;
  --paper:#fbfcfa;
  --paper-2:#f2f6f5;
  --grey:#8c8f8e;
  --line:rgba(8,11,10,0.08);
  --gold:#1d828a;
  --gold-soft:#50a8b0;
  --white:#ffffff;
  --radius:8px;
  --ease:cubic-bezier(0.25,1,0.5,1);
  --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Manrope', sans-serif;
  --shadow-sm:0 4px 16px rgba(8,11,10,0.04);
  --shadow-md:0 18px 44px -12px rgba(8,11,10,0.1);
  --shadow-lg:0 34px 84px -20px rgba(8,11,10,0.18);
  --shadow-teal:0 20px 46px -16px rgba(29,130,138,0.3);
  --glass-bg:rgba(255,255,255,0.75);
  --glass-border:rgba(255,255,255,0.55);
  --grad-teal:linear-gradient(135deg,#127a82 0%,#50a8b0 100%);
  --grad-line:linear-gradient(90deg,transparent 0%,#50a8b0 50%,transparent 100%);
}
:root:not([data-theme="light"]){
  --bg:#f5f8f8;
  --surface:#ffffff;
  --text:#14201f;
  --text-soft:#4d5a57;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1615;
    --surface:#15201f;
    --text:#f2f1ea;
    --text-soft:#aab4b0;
    --line:rgba(242,241,234,0.12);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1615;
  --surface:#15201f;
  --text:#f2f1ea;
  --text-soft:#aab4b0;
  --line:rgba(242,241,234,0.12);
}
:root:not([data-theme="light"]){--glass-bg:rgba(21,32,31,0.55);--glass-border:rgba(242,241,234,0.1);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass-bg:rgba(21,32,31,0.55);--glass-border:rgba(242,241,234,0.1);}}
:root[data-theme="dark"]{--glass-bg:rgba(21,32,31,0.55);--glass-border:rgba(242,241,234,0.1);}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
section[id],.section[id],div[id]{scroll-margin-top:80px;}
html.lenis,html.lenis body{height:auto;}
html.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.wrap{max-width:1360px;margin:0 auto;padding:0 6vw;}
@media(max-width:768px){.wrap{padding:0 24px;}}

h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:500;letter-spacing:0.01em;}

::selection{background:var(--teal-500);color:#fff;}

body::before{
  content:'';position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--teal-500);border-radius:8px;border:2px solid var(--bg);}
html{scrollbar-color:var(--teal-500) var(--bg);scrollbar-width:thin;}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal-500);outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  transition:opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
.preload-mark{width:64px;height:auto;opacity:0;animation:markIn 1s var(--ease) forwards 0.15s;}
.preload-word{
  font-family:var(--font-display);color:#f2f1ea;letter-spacing:0.32em;font-size:14px;
  text-transform:uppercase;opacity:0;animation:markIn 1s var(--ease) forwards 0.45s;
}
.preload-line{width:1px;height:36px;background:rgba(242,241,234,0.25);position:relative;overflow:hidden;}
.preload-line::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:0%;background:var(--teal-400);
  animation:lineFill 1.6s var(--ease) forwards 0.2s;
}
@keyframes lineFill{to{height:100%;}}
@keyframes markIn{to{opacity:1;transform:translateY(0);}from{transform:translateY(8px);}}

/* ============ CURSOR ============ */
.cursor{
  position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--teal-400);pointer-events:none;z-index:9998;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width 0.3s var(--ease),height 0.3s var(--ease),background 0.3s var(--ease);
}
.cursor-ring{
  position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.6);
  pointer-events:none;z-index:9997;transform:translate(-50%,-50%);
  transition:width 0.35s var(--ease),height 0.35s var(--ease),border-color .35s var(--ease),opacity .35s var(--ease);
}
.cursor-ring .cursor-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:0.15em;color:#fff;opacity:0;transition:opacity .3s var(--ease);
  font-family:var(--font-body);font-weight:600;
}
.cursor-ring.view{width:74px;height:74px;border-color:transparent;background:rgba(26,154,163,0.85);}
.cursor-ring.view .cursor-label{opacity:1;}
.cursor-ring.link{width:56px;height:56px;border-color:var(--teal-400);}
@media(max-width:900px),(hover:none){.cursor,.cursor-ring{display:none;}}

/* ============ NAVBAR ============ */
header.nav{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  padding:26px 0;transition:padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.nav.solid{
  padding:14px 0;background:rgba(245,248,248,0.85);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-sm);border-bottom:1px solid var(--line);
}
header.nav.solid::after{
  content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--grad-teal);opacity:0.6;
}
:root[data-theme="dark"] header.nav.solid, @media (prefers-color-scheme: dark){header.nav.solid{background:rgba(14,22,21,0.72);}}
:root[data-theme="dark"] header.nav.solid, @media (prefers-color-scheme: dark){header.nav.solid{background:rgba(14,22,21,0.86);}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  transition:all .35s var(--ease-soft);
}
.brand-logo-img{
  height:clamp(44px, 4.2vw, 50px);
  max-height:52px;
  width:auto;
  aspect-ratio:758 / 460;
  display:block;
  object-fit:contain;
  image-rendering:auto;
  transition:transform .35s var(--ease-soft);
}
header.nav:not(.solid) .brand{
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:6px 14px;
  border-radius:12px;
  border:1px solid rgba(80, 168, 176, 0.28);
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
}
header.nav:not(.solid) .brand:hover{
  background:#ffffff;
  border-color:var(--teal-400);
  box-shadow:0 6px 22px rgba(0, 0, 0, 0.3);
  transform:translateY(-1px);
}
header.nav.solid .brand{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:0;
}
header.nav.solid .brand:hover .brand-logo-img{
  transform:translateY(-1px);
}
@media(max-width:768px){
  .brand-logo-img{
    height:clamp(38px, 4.8vw, 42px);
    max-height:44px;
  }
  header.nav:not(.solid) .brand{
    padding:5px 10px;
    border-radius:10px;
  }
}
@media(max-width:480px){
  .brand-logo-img{
    height:36px;
  }
  header.nav:not(.solid) .brand{
    padding:4px 9px;
    border-radius:9px;
  }
}
.brand svg{width:30px;height:auto;flex-shrink:0;transition:filter .5s var(--ease);}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text b{
  font-family:var(--font-display);font-size:19px;letter-spacing:0.06em;color:var(--text);
  transition:color .5s var(--ease);
}
header.nav:not(.solid) .brand-text b{color:#fff;}
header.nav:not(.solid) .brand svg{filter:brightness(0) invert(1);}
.brand-text span{font-size:9px;letter-spacing:0.28em;color:var(--teal-500);text-transform:uppercase;margin-top:2px;}
nav.menu{display:flex;align-items:center;gap:38px;}
nav.menu a{
  font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);
  position:relative;padding:4px 0;transition:color .3s var(--ease);
}
header.nav:not(.solid) nav.menu a{color:rgba(255,255,255,0.92);}
nav.menu a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--teal-400);
  transition:width .35s var(--ease);
}
nav.menu a:hover::after,nav.menu a.active::after{width:100%;}
nav.menu a.active{color:var(--teal-500);}
header.nav:not(.solid) nav.menu a.active{color:var(--teal-200);}
.nav-item-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: rgba(9, 19, 18, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(80, 168, 176, 0.25);
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s ease;
  pointer-events: none;
  z-index: 1000;
}
.nav-dropdown-link {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  color: #f2f1ea;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all .2s ease;
}
.nav-dropdown-link:hover {
  background: rgba(80, 168, 176, 0.15);
  color: var(--teal-300, #7fd1d6);
  padding-left: 20px;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1px solid var(--gold);
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);
  transition:all .4s var(--ease-soft);position:relative;overflow:hidden;font-weight:600;
  border-radius:var(--radius);
}
header.nav:not(.solid) .nav-cta{border-color:rgba(255,255,255,0.55);color:#fff;}
.nav-cta:hover{background:var(--grad-teal);color:#fff;border-color:var(--gold-soft);box-shadow:var(--shadow-teal);transform:translateY(-2px);}

/* Noble Builder logo — right side of header, vertically centered with the menu */
.nav-divider{width:1px;height:26px;background:var(--line);flex-shrink:0;}
header.nav:not(.solid) .nav-divider{background:rgba(255,255,255,0.25);}
.builder-logo{display:flex;align-items:center;flex-shrink:0;}
.builder-logo img{
  height:34px;width:auto;display:block;object-fit:contain;
  transition:filter .5s var(--ease-soft), opacity .35s ease, transform .35s var(--ease-soft);
}
.builder-logo:hover img{opacity:0.82;transform:translateY(-1px);}
header.nav:not(.solid) .builder-logo img{filter:brightness(0) invert(1);}
@media(max-width:900px){
  .builder-logo img{height:26px;}
  .nav-divider{display:none;}
}
.hamburger{display:none;flex-direction:column;gap:5px;width:26px;z-index:600;}
.hamburger span{display:block;height:1px;width:100%;background:var(--text);transition:all .4s var(--ease);}
header.nav:not(.solid) .hamburger span{background:#fff;}
@media(max-width:900px){
  nav.menu, .nav-cta{display:none;}
  .hamburger{display:flex;}
}

/* ============ MOBILE NAVIGATION ============ */
.mobile-nav{
  display:none;
}

@media(max-width:900px){
  .mobile-nav{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    height:100dvh;
    background:linear-gradient(180deg, #091312 0%, #060b0b 100%);
    z-index:2000;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .35s var(--ease), visibility .35s var(--ease), transform .35s var(--ease);
  }

  .mobile-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* Header Row inside Opened Menu */
  .mobile-nav-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
    background:rgba(9, 19, 18, 0.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:0;
    width:100%;
    box-sizing:border-box;
  }

  /* Noble Paradise Logo (top-left) */
  .mobile-nav-brand{
    display:inline-flex;
    align-items:center;
    background:#ffffff;
    padding:5px 11px;
    border-radius:10px;
    border:1px solid rgba(80, 168, 176, 0.28);
    box-shadow:0 3px 12px rgba(0, 0, 0, 0.22);
    text-decoration:none;
    max-width:calc(100% - 60px);
  }

  .mobile-nav-logo-img{
    height:clamp(38px, 9vw, 44px);
    max-height:46px;
    width:auto;
    aspect-ratio:758 / 460;
    display:block;
    object-fit:contain;
    image-rendering:auto;
  }

  /* Working Close (×) Button (top-right) */
  .mobile-nav-close{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255, 255, 255, 0.22);
    background:rgba(255, 255, 255, 0.07);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    margin:0;
    flex-shrink:0;
    transition:background .25s ease, border-color .25s ease, transform .25s var(--ease);
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-nav-close svg{
    display:block;
    width:20px;
    height:20px;
    stroke:#ffffff;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:active{
    background:var(--teal-500);
    border-color:var(--teal-400);
    color:#ffffff;
    transform:rotate(90deg) scale(1.05);
  }

  /* Scrollable Body inside Opened Menu */
  .mobile-nav-body{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px 20px calc(18px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-sizing:border-box;
    width:100%;
  }

  .mobile-nav-menu{
    display:flex;
    flex-direction:column;
    gap:0;
    margin:4px 0 16px;
    width:100%;
    box-sizing:border-box;
  }

  /* Menu Links */
  .mobile-nav-link{
    font-family:var(--font-display);
    font-size:clamp(20px, 5.2vw, 24px);
    font-weight:500;
    letter-spacing:0.02em;
    color:#f2f1ea;
    padding:13px 0;
    border-bottom:1px solid rgba(242, 241, 234, 0.08);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:color .2s ease, padding-left .2s var(--ease);
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
    width:100%;
  }

  .mobile-nav-link svg{
    stroke:rgba(242, 241, 234, 0.35);
    transition:stroke .2s ease, transform .2s ease;
    flex-shrink:0;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:active{
    color:var(--teal-300, #7fd1d6);
    padding-left:4px;
  }

  .mobile-nav-link:hover svg,
  .mobile-nav-link:active svg{
    stroke:var(--teal-300, #7fd1d6);
    transform:translateX(2px);
  }

  /* Bottom Actions Container */
  .mobile-nav-actions{
    margin-top:auto;
    padding-top:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    box-sizing:border-box;
  }

  /* Compact Download Brochure Button */
  .mobile-nav-brochure-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    max-width:100%;
    height:42px;
    padding:0 16px;
    background:linear-gradient(135deg, #127a82 0%, #1e8790 100%);
    border:1px solid rgba(80, 168, 176, 0.45);
    color:#ffffff;
    border-radius:8px;
    font-family:var(--font-body, 'Manrope', sans-serif);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    box-shadow:0 3px 12px rgba(18, 122, 130, 0.28);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box;
  }

  .mobile-nav-brochure-btn svg{
    width:15px;
    height:15px;
    stroke:#ffffff;
    flex-shrink:0;
    display:block;
  }

  .mobile-nav-brochure-btn span{
    display:inline-block;
    line-height:1;
    white-space:nowrap;
  }

  .mobile-nav-brochure-btn:active{
    transform:scale(0.98);
  }

  /* Bottom Action Icons Row (Icons Only: WhatsApp, Call, Enquiry Now) */
  .mobile-nav-quick-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    width:100%;
    box-sizing:border-box;
  }

  .m-quick-btn{
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    box-sizing:border-box;
    transition:transform .18s ease, background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .m-quick-btn:active{
    transform:scale(0.95);
  }

  .m-quick-btn svg{
    flex-shrink:0;
    display:block;
  }

  .m-quick-wa{
    background:#25D366;
    color:#ffffff;
    box-shadow:0 2px 8px rgba(37, 211, 102, 0.25);
  }

  .m-quick-wa:hover,
  .m-quick-wa:active{
    background:#20ba5a;
  }

  .m-quick-call{
    background:#127a82;
    color:#ffffff;
    box-shadow:0 2px 8px rgba(18, 122, 130, 0.25);
  }

  .m-quick-call:hover,
  .m-quick-call:active{
    background:#0e646a;
  }

  .m-quick-enquire{
    background:rgba(255, 255, 255, 0.08);
    color:#f2f1ea;
    border:1px solid rgba(255, 255, 255, 0.2);
  }

  .m-quick-enquire:hover,
  .m-quick-enquire:active{
    background:var(--gold, #c89d5c);
    border-color:var(--gold, #c89d5c);
    color:#ffffff;
  }

  /* Lock body scroll when menu open */
  body.menu-open{
    overflow:hidden !important;
    touch-action:none;
  }
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  background:#091e36;
}
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}
.hero-media::before{
  display:none !important;
  content:none !important;
}
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-bg-pos, center center);
  display:block;
}

/* ============ HERO BACKGROUND SLIDER ============ */
.hero-slider-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  z-index:1;
  pointer-events:none;
  transition:opacity var(--hero-speed, 1000ms) ease-in-out, visibility var(--hero-speed, 1000ms) ease-in-out;
  will-change:opacity, transform;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}
.hero-slide.is-static{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:none !important;
  z-index:1;
}

/* Slide Transition Effect */
.hero[data-effect="slide"] .hero-slide{
  transition:transform var(--hero-speed, 1000ms) cubic-bezier(0.22, 1, 0.36, 1),
             opacity calc(var(--hero-speed, 1000ms) * 0.8) ease-in-out,
             visibility var(--hero-speed, 1000ms) ease-in-out;
  transform:translate3d(100%, 0, 0);
  opacity:0;
  visibility:hidden;
}
.hero[data-effect="slide"] .hero-slide.active{
  transform:translate3d(0, 0, 0);
  opacity:1;
  visibility:visible;
  z-index:2;
}
.hero[data-effect="slide"] .hero-slide.to-left{
  transform:translate3d(-100%, 0, 0);
  opacity:0;
  visibility:hidden;
  z-index:1;
}
.hero[data-effect="slide"] .hero-slide.to-right{
  transform:translate3d(100%, 0, 0);
  opacity:0;
  visibility:hidden;
  z-index:1;
}
.hero[data-effect="slide"] .hero-slide.from-left{
  transform:translate3d(-100%, 0, 0);
  opacity:0;
}
.hero[data-effect="slide"] .hero-slide.from-right{
  transform:translate3d(100%, 0, 0);
  opacity:0;
}

/* Background Slide Media & Object Position */
.hero-slide picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-bg-pos, center center);
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
@media(max-width:900px){
  .hero-slide img,
  .hero-media img{
    object-position:var(--hero-bg-pos, 51% top);
  }
}

/* Hero Scrim with dynamic brightness adjustment */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,19,36, var(--hero-overlay-0, 0.45)) 0%,
    rgba(5,19,36, var(--hero-overlay-35, 0.08)) 35%,
    rgba(5,19,36, var(--hero-overlay-65, 0.35)) 65%,
    rgba(4,12,22, var(--hero-overlay-100, 0.85)) 100%
  );
  transition:background 0.3s ease;
}

/* Hero Slider Navigation Controls */
.hero-slider-nav{
  position:static;
  pointer-events:none;
}
.hero-nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(5, 19, 36, 0.42);
  border:1px solid rgba(255, 255, 255, 0.22);
  color:#ffffff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  pointer-events:auto;
  transition:all 0.25s ease;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.3);
}
.hero-nav-arrow svg{
  display:block;
  stroke:#ffffff;
  transition:transform 0.2s ease;
}
.hero-nav-arrow.prev{
  left:clamp(16px, 2.8vw, 36px);
}
.hero-nav-arrow.next{
  right:clamp(16px, 2.8vw, 36px);
}
.hero-nav-arrow:hover{
  background:var(--teal, #1a9aa3);
  border-color:var(--teal-light, #7fd1d6);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 6px 20px rgba(26, 154, 163, 0.5);
}
.hero-nav-arrow.prev:hover svg{
  transform:translateX(-2px);
}
.hero-nav-arrow.next:hover svg{
  transform:translateX(2px);
}

.hero-nav-dots{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:rgba(5, 19, 36, 0.45);
  border:1px solid rgba(255, 255, 255, 0.15);
  border-radius:30px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:auto;
}
.hero-dot{
  background:transparent;
  border:none;
  padding:4px 2px;
  cursor:pointer;
  display:flex;
  align-items:center;
  outline:none;
}
.hero-dot .hero-dot-bar{
  display:block;
  width:20px;
  height:4px;
  border-radius:2px;
  background:rgba(255, 255, 255, 0.38);
  transition:all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-dot:hover .hero-dot-bar{
  background:rgba(255, 255, 255, 0.75);
}
.hero-dot.active .hero-dot-bar{
  width:38px;
  background:#ffffff;
  box-shadow:0 0 10px rgba(127, 209, 214, 0.85);
}

@media(max-width:900px){
  .hero{
    position:relative;
    min-height:clamp(560px, 72vh, 640px);
    height:clamp(560px, 72vh, 640px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    color:#fff;
    background:#091e36;
    padding:0;
  }
  .hero-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    display:block;
  }
  .hero-media::before{
    display:none !important;
    content:none !important;
  }
  .hero-scrim{
    display:block !important;
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(
      180deg,
      rgba(9, 30, 54, var(--hero-overlay-0, 0.32)) 0%,
      rgba(9, 30, 54, var(--hero-overlay-35, 0.04)) 28%,
      rgba(9, 30, 54, var(--hero-overlay-65, 0.45)) 58%,
      rgba(5, 18, 33, var(--hero-overlay-100, 0.88)) 100%
    );
  }
  .hero-nav-arrow{
    display:none;
  }
  .hero-nav-dots{
    bottom:14px;
    padding:4px 10px;
    gap:6px;
  }
  .hero-dot .hero-dot-bar{
    width:14px;
    height:3px;
  }
  .hero-dot.active .hero-dot-bar{
    width:26px;
  }
  .hero-vignette{
    display:none !important;
  }
  .hero-lines{
    display:none !important;
  }
  .scroll-indicator{
    display:none !important;
  }
  .hero-content{
    position:relative;
    z-index:5;
    width:100%;
    padding:0 22px clamp(24px, 4vh, 32px);
    max-width:100%;
    box-sizing:border-box;
  }
  .hero-ctas{
    padding-right:0;
    margin-top:16px;
  }
}
@media(max-width:600px){
  .hero-content{
    padding:0 20px clamp(22px, 3.5vh, 28px);
  }
}
.hero-vignette{display:none;}
.hero-lines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0.35;}
.hero-lines svg{width:100%;height:100%;}
.hero-lines path{stroke:rgba(255,255,255,0.35);stroke-width:1;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;animation:drawLine 2.6s var(--ease) forwards 0.5s;}
@keyframes drawLine{to{stroke-dashoffset:0;}}

.hero-content{position:relative;z-index:5;width:100%;padding:0 6vw 48px;max-width:1440px;}
.hero-ctas{padding-right:110px;}
@media(max-width:900px){.hero-ctas{padding-right:0;}}
@media(max-width:768px){.hero-content{padding:0 24px 44px;}.hero-ctas{padding-right:0;}}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--teal-200);margin-bottom:18px;opacity:1;
}
.hero-eyebrow .rule{width:36px;height:1px;background:var(--teal-300,#7fd1d6);}
.hero-badge{
  position:absolute;top:108px;right:6vw;z-index:6;display:flex;align-items:center;gap:10px;
  background:rgba(12,18,17,0.7);border:1px solid rgba(80,168,176,0.32);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:10px 20px;font-size:10.5px;letter-spacing:0.12em;color:#fff;
  border-radius:100px;text-transform:uppercase;box-shadow:0 10px 28px -6px rgba(0,0,0,0.45);
  transition:all .35s var(--ease-soft);
}
.hero-badge:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  background:rgba(12,18,17,0.88);
}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-400);box-shadow:0 0 0 4px rgba(61,180,188,0.25);flex-shrink:0;}
@media(max-width:900px){.hero-badge{display:none;}}
.hero-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(52px,8.4vw,118px);line-height:0.92;letter-spacing:0.01em;
  text-shadow:0 6px 32px rgba(0,0,0,0.45);
}
.hero-title .line{overflow:hidden;}
.hero-title .line span{display:block;transform:none;}
.hero-title .line:last-child span{
  background:linear-gradient(100deg,#ffffff 0%,#b2e2e6 45%,#50a8b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:clamp(16px,2vw,24px);max-width:540px;font-size:clamp(15px,1.7vw,18px);font-weight:300;
  line-height:1.6;color:rgba(255,255,255,0.9);
  letter-spacing:0.02em;text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.hero-meta{
  margin-top:clamp(18px,2vw,26px);display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;
}
.hero-meta span{
  display:inline-flex;align-items:center;gap:8px;padding:8px 18px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:100px;font-size:12.5px;letter-spacing:0.05em;color:rgba(255,255,255,0.88);
  transition:all .35s var(--ease-soft);
}
.hero-meta span:hover{
  background:rgba(255,255,255,0.14);border-color:var(--gold-soft);transform:translateY(-2px);
  box-shadow:0 6px 18px -4px rgba(0,0,0,0.3);
}
.hero-meta span b{
  font-family:var(--font-display);font-size:18px;color:var(--gold-soft);font-weight:600;letter-spacing:0.02em;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;align-items:center;}
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 34px;font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;transition:all .45s var(--ease-soft);white-space:nowrap;font-weight:600;
  opacity:1;transform:none;position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-102%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,0.2) 50%,transparent 80%);
  transition:transform .7s var(--ease-soft);
}
.btn:hover::before{transform:translateX(102%);}
.btn-primary{
  background:linear-gradient(135deg, #127a82 0%, #50a8b0 100%);
  color:#ffffff;font-weight:700;
  box-shadow:0 8px 24px -6px rgba(29,130,138,0.45);
}
.btn-primary:hover{
  transform:translateY(-3px);box-shadow:0 16px 36px -8px rgba(29,130,138,0.6);
  color:#ffffff;
}
.btn-ghost{border:1px solid rgba(255,255,255,0.4);color:#fff;backdrop-filter:blur(10px);border-radius:var(--radius);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.15);transform:translateY(-2px);}
.btn-dark{border:1px solid var(--ink);color:var(--ink);border-radius:var(--radius);}
.btn-dark:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-md);}
.btn-solid-dark{background:var(--ink);color:#fff;border-radius:var(--radius);}
.btn-solid-dark:hover{background:var(--teal-500);transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* Premium "Download Brochure" button — white + brand teal */
.btn-brochure{
  background:linear-gradient(180deg,#ffffff 0%,#f2f8f8 100%);
  border:1.5px solid rgba(80,168,176,0.45);color:var(--ink);
  box-shadow:0 10px 26px -12px rgba(29,130,138,0.25);
  border-radius:var(--radius);font-weight:600;
}
.btn-brochure::before{background:linear-gradient(100deg,transparent 20%,rgba(80,168,176,0.2) 50%,transparent 80%);}
.btn-brochure:hover{
  border-color:var(--gold);background:linear-gradient(180deg,#ffffff 0%,#e8f4f5 100%);
  box-shadow:0 18px 40px -14px rgba(29,130,138,0.4);transform:translateY(-3px);
}
.bicon{display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease-soft);}
.bicon svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.5;}
.btn-brochure:hover .bicon{transform:translateY(3px);}

.scroll-indicator{
  position:absolute;right:6vw;bottom:38px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,0.75);font-size:10px;letter-spacing:0.28em;writing-mode:vertical-rl;
}
@media(max-width:768px){.scroll-indicator{right:24px;bottom:26px;}}
.scroll-indicator .dash{width:1px;height:44px;background:rgba(255,255,255,0.4);position:relative;overflow:hidden;}
.scroll-indicator .dash::after{
  content:'';position:absolute;top:-44px;left:0;width:100%;height:44px;background:#fff;
  animation:scrollDash 2s ease-in-out infinite;
}
@keyframes scrollDash{0%{top:-44px;}60%{top:100%;}100%{top:100%;}}

/* ============ REVEAL UTILITIES ============ */
.reveal{opacity:0;transform:translateY(40px);}
.h2.reveal{filter:blur(10px);}

/* ============ Premium split-screen reveal (image/content one side, text opposite side) ============ */
.split-a,.split-b{
  opacity:0;will-change:transform,opacity;
  transition:opacity 1.3s var(--ease-soft), transform 1.3s var(--ease-soft);
}
.split-a{transform:translateX(-64px);}
.split-b{transform:translateX(64px);transition-delay:0.14s;}
.split-a.in-view,.split-b.in-view{opacity:1;transform:translateX(0);}
@media(max-width:900px){
  .split-a,.split-b{transform:translateY(46px);transition-delay:0s;}
  .split-b{transition-delay:0.12s;}
}
.reveal-left{opacity:0;transform:translateX(-50px);}
.reveal-right{opacity:0;transform:translateX(50px);}
.reveal-scale{opacity:0;transform:scale(0.94);}
.section{
  padding:clamp(34px,3.8vw,48px) 0;
  position:relative;
  isolation:isolate;
}
.section-pad-sm{
  padding:clamp(26px,3vw,38px) 0;
}
@media(max-width:768px){
  .section{padding:30px 0;}
  .section-pad-sm{padding:24px 0;}
}
@media(max-width:560px){
  .section{padding:26px 0;}
  .section-pad-sm{padding:20px 0;}
}

/* seam divider between sections: soft gradient hairline for a premium transition */
.section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(80%,880px);
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(80,168,176,0.4) 50%, transparent 100%);
  opacity:0.65;
  pointer-events:none;
}
.section:first-of-type::before{display:none;}

/* subtle premium grain texture, sits behind all content, same for every section regardless of its color */
.section::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero::after, .imgbreak::after{content:none;}

/* decorative ambient glow for depth, placed behind content */
.section-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:0.5;animation:glowBreathe 8s ease-in-out infinite;}
@keyframes glowBreathe{0%,100%{transform:scale(1);opacity:0.4;}50%{transform:scale(1.12);opacity:0.62;}}

/* elegant curved divider accent — a soft architectural arc marking a section seam */
.curve-divider{position:absolute;top:-1px;left:0;width:100%;height:60px;overflow:hidden;pointer-events:none;z-index:1;}
.curve-divider svg{width:100%;height:100%;display:block;}
.curve-divider path{stroke:var(--gold-soft);stroke-width:1;fill:none;opacity:0.35;}
.curve-divider.bottom{top:auto;bottom:-1px;transform:scaleY(-1);}
@media(max-width:768px){.curve-divider{height:34px;}}
.bg-art{
  position:absolute;z-index:-1;pointer-events:none;user-select:none;
  opacity:0.06;color:var(--teal-500);
}
.bg-art svg{width:100%;height:100%;display:block;}
.bg-art.tint-gold{color:var(--gold-soft);opacity:0.08;}
.bg-art.tint-teal-deep{color:var(--teal-700);}
/* slow floating drift on selected motifs only — animates the inner svg, never the wrapper,
   so it never fights the wrapper's own inline mirror/parallax transforms */
.bg-art.float svg{animation:bgFloat 11s ease-in-out infinite;}
.bg-art.float.float-slow svg{animation-duration:16s;animation-delay:-4s;}
@keyframes bgFloat{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-12px) translateX(4px);}}
@media(prefers-reduced-motion: reduce){.bg-art.float svg{animation:none;}}
/* subtle glass-sheen reflection band — a soft diagonal highlight, purely a light effect */
.glass-sheen{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.055) 48%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.055) 52%, transparent 68%);
}
:root[data-theme="dark"] .glass-sheen, @media(prefers-color-scheme:dark){
  .glass-sheen{background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.025) 48%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.025) 52%, transparent 68%);}
}
/* fine measurement-ruler strip — a technical/infographic touch for Specifications */
.spec-ruler{
  position:absolute;top:0;left:0;width:100%;height:22px;z-index:-1;opacity:0.5;pointer-events:none;
  background-image:repeating-linear-gradient(90deg, var(--gold-soft) 0 1px, transparent 1px 34px);
}
@media(max-width:900px){.spec-ruler{opacity:0.32;}}
@media(max-width:560px){.spec-ruler{display:none;}}
@media(max-width:900px){
  .bg-art{opacity:0.045;}
  .bg-art.tint-gold{opacity:0.06;}
}
@media(max-width:560px){
  .bg-art.hide-mobile{display:none;}
}

/* ============ Floor Plans — premium architectural blueprint background ============ */
#plans{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 60% 50% at 8% 0%, rgba(26,154,163,0.05), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(80,168,176,0.06), transparent 60%),
    linear-gradient(175deg, var(--bg) 0%, var(--paper-2) 55%, var(--bg) 100%);
}
:root[data-theme="dark"] #plans, @media(prefers-color-scheme:dark){
  #plans{
    background:
      radial-gradient(ellipse 60% 50% at 8% 0%, rgba(61,180,188,0.07), transparent 60%),
      radial-gradient(ellipse 55% 45% at 100% 100%, rgba(80,168,176,0.06), transparent 60%),
      linear-gradient(175deg, var(--bg) 0%, #101b1a 55%, var(--bg) 100%);
  }
}
.plans-blueprint{position:absolute;z-index:-2;pointer-events:none;color:var(--teal-500);}
.plans-blueprint svg{width:100%;height:100%;display:block;}
.plans-brackets .bg-art{opacity:0.4;color:var(--gold);}
@media(max-width:900px){.plans-brackets .bg-art{opacity:0.28;}}
@media(max-width:560px){.plans-brackets .bg-art{width:34px !important;height:34px !important;}}

/* scroll progress bar */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad-teal);z-index:1000;box-shadow:0 0 10px rgba(26,154,163,0.6);}

/* marquee strip */
.marquee-strip{
  background:linear-gradient(180deg, #090e0d 0%, #060908 100%);
  overflow:hidden;padding:18px 0;position:relative;
  border-top:1px solid rgba(80,168,176,0.25);
  border-bottom:1px solid rgba(80,168,176,0.18);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 32s linear infinite;}
.marquee-track span{
  display:flex;align-items:center;gap:24px;padding:0 32px;font-family:var(--font-display);
  font-size:clamp(17px, 1.8vw, 22px);
  color:#FFFFFF;white-space:nowrap;letter-spacing:0.04em;
}
.marquee-track span b{color:#FFFFFF;font-weight:600;}
.marquee-track span svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.8;opacity:0.85;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion: reduce){.marquee-track{animation:none;}}
.glow-teal{background:radial-gradient(circle,rgba(26,154,163,0.22),transparent 70%);}
.glow-gold{background:radial-gradient(circle,rgba(80,168,176,0.18),transparent 70%);}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;font-weight:700;
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--grad-teal);}
.h2{font-size:clamp(32px,4.2vw,56px);line-height:1.1;color:var(--ink);letter-spacing:0.01em;font-weight:500;}
.h2 em{font-style:normal;color:var(--teal-500);}
.lede{font-size:16px;color:var(--text-soft);max-width:540px;line-height:1.75;margin-top:12px;font-weight:300;}

/* ============ INTRO / ABOUT ============ */
#about{
  padding: clamp(28px, 3.2vw, 42px) 0;
  background:
    radial-gradient(ellipse 65% 55% at 15% 25%, rgba(42, 123, 131, 0.05), transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 85%, rgba(61, 164, 173, 0.06), transparent 70%),
    var(--paper);
  position: relative;
}
.intro{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media(max-width: 900px){
  .intro{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.intro .split-a{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.intro .split-b{
  width: 100%;
  text-align: left;
}
.intro .split-b .eyebrow{
  margin-bottom: 8px;
}
.intro .split-b .h2{
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.12;
}
.intro-subheading{
  font-weight: 600 !important;
  color: var(--gold) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase;
}
.intro-desc{
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-top: 8px;
  max-width: 580px;
}
.intro-media{
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(80,168,176,0.3);
  box-shadow: 0 16px 40px -12px rgba(8,11,10,0.12);
  background: var(--paper-2);
}
.intro-media::after{
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.intro-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--ease);
}
.intro-media:hover img{
  transform: scale(1.03);
}
.intro-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
  margin-top: clamp(22px, 2.8vw, 32px);
  position: relative;
}
@media(max-width: 768px){
  .intro-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
}
.intro-stat{
  padding: 14px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(8,11,10,0.03);
  transition: all .35s var(--ease-soft);
  text-align: center;
}
.intro-stat:hover{
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px -6px rgba(8,11,10,0.08);
}
.intro-stat b{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  color: var(--gold);
  letter-spacing: 0.01em;
  font-weight: 600;
  line-height: 1.1;
}
.intro-stat span{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-transform: uppercase;
  font-weight: 600;
}

/* ============ NOBLE PARADISE AWARD ============ */
.pa-section{
  position: relative;
  background: 
    radial-gradient(ellipse 60% 55% at 90% 20%, rgba(61, 164, 173, 0.08), transparent 70%),
    linear-gradient(180deg, #fbfdfd 0%, #f1f6f6 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 3.6vw, 46px) 0;
  overflow: hidden;
  isolation: isolate;
}
.pa-ambient{
  position: absolute;
  right: -80px;
  top: -60px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 123, 131, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.pa-grid{
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
@media(max-width: 920px){
  .pa-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Left Column: Typography, Eyebrow & Badges */
.pa-content{
  display: flex;
  flex-direction: column;
}
.pa-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.pa-eyebrow-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(26, 154, 163, 0.22);
}
.pa-heading{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.pa-desc{
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-soft);
  max-width: 530px;
  margin-bottom: 22px;
}
.pa-highlight{
  color: #0d3e42;
  font-weight: 600;
  background: linear-gradient(120deg, rgba(80, 168, 176, 0.16) 0%, rgba(80, 168, 176, 0.24) 100%);
  padding: 1px 6px;
  border-radius: 3px;
  display: inline;
}

/* Compact Feature Badges */
.pa-features{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}
@media(max-width: 520px){
  .pa-features{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.pa-feature-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(80, 168, 176, 0.3);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .3s var(--ease-soft);
}
.pa-feature-item:hover{
  background: #fff;
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(10, 18, 18, 0.12);
}
.pfi-icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(26, 154, 163, 0.1);
  border: 1px solid rgba(26, 154, 163, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--teal-600, #127a82);
  transition: all .3s var(--ease-soft);
}
.pfi-icon svg{
  width: 17px;
  height: 17px;
  stroke: var(--teal-600, #127a82);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  transition: transform .3s var(--ease-soft), stroke .3s ease;
}
.pa-feature-item:hover .pfi-icon{
  background: rgba(26, 154, 163, 0.18);
  border-color: rgba(26, 154, 163, 0.42);
}
.pa-feature-item:hover .pfi-icon svg{
  stroke: #0d5f66;
  transform: scale(1.08);
}
:root[data-theme="dark"] .pfi-icon{
  background: rgba(26, 154, 163, 0.18);
  border-color: rgba(61, 180, 188, 0.35);
  color: #3db4bc;
}
:root[data-theme="dark"] .pfi-icon svg{
  stroke: #3db4bc;
}
.pfi-text{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pfi-label{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 2px;
}
.pfi-sub{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Right Column: Visual Showcase */
.pa-visual-col{
  width: 100%;
}
.pa-slider-wrap{
  position: relative;
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
}
.pa-slide-frame{
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  background: #081110;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 16px 36px -10px rgba(10, 18, 18, 0.22), 0 0 0 1px rgba(80, 168, 176, 0.3);
}
@media(max-width: 560px){
  .pa-slide-frame{
    aspect-ratio: 4/3;
  }
}
.pa-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .65s ease, transform .65s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.99);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #081110;
  padding: 12px;
}
.pa-slide.active{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.pa-slide-bg{
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(32px) brightness(0.28) saturate(1.3);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.pa-slide img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: var(--radius);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
  transition: transform .6s var(--ease-soft);
}
.pa-slide-frame:hover .pa-slide.active img{
  transform: scale(1.02);
}

/* Slide Info Tag */
.pa-slide-tag{
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(11, 20, 19, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.pa-tag-index{
  color: var(--gold);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 12.5px;
}
.pa-tag-sep{
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}
.pa-tag-cap{
  color: #f2f1ea;
  font-weight: 500;
}

/* Sleek Integrated Nav Buttons */
.pa-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px -4px rgba(10, 18, 18, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all .3s var(--ease-soft);
  padding: 0;
}
.pa-nav.prev{
  left: 12px;
}
.pa-nav.next{
  right: 12px;
}
.pa-nav:hover{
  background: var(--ink);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 22px -4px rgba(10, 18, 18, 0.45);
}
.pa-nav:hover svg{
  stroke: #fff;
}
.pa-nav svg{
  width: 14px;
  height: 14px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
  display: block;
}

/* Thumbnail Track */
.pa-thumbs-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media(max-width: 540px){
  .pa-thumbs-track{
    gap: 6px;
  }
}
.pa-thumb-btn{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all .3s var(--ease-soft);
  opacity: 0.7;
}
.pa-thumb-btn:hover{
  opacity: 0.95;
  transform: translateY(-2px);
}
.pa-thumb-btn.active{
  opacity: 1;
  transform: translateY(-2px);
}
.pa-thumb-preview{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid rgba(80, 168, 176, 0.28);
  background: #081211;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease-soft);
}
.pa-thumb-btn:hover .pa-thumb-preview{
  border-color: rgba(80, 168, 176, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.pa-thumb-btn.active .pa-thumb-preview{
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(80, 168, 176, 0.35), 0 6px 16px -4px rgba(10, 18, 18, 0.3);
}
.pa-thumb-preview img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.pa-thumb-label{
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color .3s ease;
}
.pa-thumb-btn.active .pa-thumb-label{
  color: var(--ink);
  font-weight: 600;
}
@media(max-width: 600px){
  .pa-thumb-label{
    display: none;
  }
}

/* Dots: hidden on desktop, fallback for touch navigation */
.pa-dots{
  display: none;
  gap: 7px;
  justify-content: center;
  margin-top: 10px;
}
.pa-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .35s var(--ease-soft);
}
.pa-dot.active{
  background: var(--gold);
  width: 20px;
  border-radius: 4px;
}


/* ============ GALLERY / ARCHITECTURE ============ */
#architecture{
  --g-brown:#1d828a;
  --g-gold:#50a8b0;
  background: 
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(61, 164, 173, 0.06), transparent 65%),
    radial-gradient(ellipse 55% 50% at 10% 90%, rgba(42, 123, 131, 0.05), transparent 65%),
    linear-gradient(180deg, #f8fbfb 0%, #edf3f3 100%);
}
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px;}

/* Gallery category tabs */
.gallery-tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:12px;}
.gtab-btn{
  padding:8px 18px;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft);
  position:relative;transition:all .3s var(--ease-soft);white-space:nowrap;
  background:rgba(255,255,255,0.65);border:1px solid var(--line);border-radius:100px;cursor:pointer;
}
.gtab-btn:hover{color:var(--ink);border-color:var(--gold);background:#fff;transform:translateY(-1px);}
.gtab-btn.active{color:#fff;background:var(--ink);border-color:var(--ink);font-weight:600;box-shadow:0 4px 14px -4px rgba(8,11,10,0.3);}
.gtab-btn::after{display:none;}
@media(max-width:560px){.gallery-tabs{gap:8px;}.gtab-btn{padding:8px 14px;font-size:11px;}}

/* Gallery panels */
.gallery-panel{display:none;}
.gallery-panel.active{display:block;}

/* Empty-state placeholder for categories awaiting images */
.gallery-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:90px 20px;text-align:center;border:1px dashed var(--line);
}
.gallery-empty-icon{width:44px;height:44px;opacity:0.4;}
.gallery-empty-icon svg{width:100%;height:100%;stroke:var(--text-soft);fill:none;stroke-width:1.2;}
.gallery-empty p{font-family:var(--font-display);font-size:18px;color:var(--text-soft);letter-spacing:0.02em;}
.gallery-head .eyebrow{margin-bottom:14px;}
.gallery-head .eyebrow::before{background:var(--g-brown);}
.gallery-head > div{max-width:100%;}
.gallery-head .h2,
.gallery-heading{
  white-space:nowrap !important;
  font-size:clamp(28px, 3.8vw, 50px);
  line-height:1.15;
  letter-spacing:0.005em;
  max-width:100%;
  display:block;
}
.gallery-head .h2 br,
.gallery-heading br{
  display:none !important;
}
.gallery-index{
  font-family:var(--font-display);font-size:13px;letter-spacing:0.1em;color:var(--g-brown);
  display:inline-flex;align-items:center;gap:8px;vertical-align:middle;font-weight:500;text-transform:none;
}
.gallery-index::before{content:'';width:16px;height:1px;background:var(--g-gold);display:inline-block;}

/* ============ Shared tile look ============ */
.gitem{
  position:relative;overflow:hidden;cursor:pointer;border-radius:var(--radius);
  transition:box-shadow .35s var(--ease-soft), border-color .35s ease, transform .35s var(--ease-soft);
  background:#ffffff;
  border:1px solid rgba(80,168,176,0.24);
}
.gitem:hover{
  box-shadow:0 12px 32px -6px rgba(8,11,10,0.16);
  border-color:var(--teal-500);
  background:#ffffff;
}
.gitem img{
  width:auto;
  height:100%;
  max-width:none;
  max-height:100%;
  object-fit:contain !important;
  transform:none !important;
  display:block;
}
.gitem.in-view img,
.gitem:hover img{
  transform:none !important;
}
.gitem::after,
.gitem:hover::after{
  display:none !important;
}
.gitem .gnum{
  position:absolute;top:14px;left:16px;z-index:3;font-family:var(--font-display);font-size:12.5px;color:rgba(255,255,255,0.85);
  opacity:0;transform:translateY(-6px);transition:all .4s var(--ease-soft);letter-spacing:0.05em;
}
.gitem:hover .gnum{opacity:1;transform:translateY(0);}

/* minimal "View Image" hover affordance — centered icon + microcopy */
.gview{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:0;transition:opacity .45s ease;
}
.gitem:hover .gview{opacity:1;}
.gview-ring{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;
  transform:scale(0.85);transition:transform .45s var(--ease-soft);
}
.gitem:hover .gview-ring{transform:scale(1);}
.gview-ring svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.5;}
.gview span{font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:#fff;}

.gitem .glabel{
  position:absolute;left:16px;bottom:14px;right:16px;z-index:3;color:#fff;
  opacity:0;transform:translateY(8px);transition:all .45s var(--ease-soft);
}
.gitem:hover .glabel{opacity:1;transform:translateY(0);}
.glabel-title{font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase;display:block;}
.glabel-line{width:20px;height:1px;background:var(--g-gold);margin-top:7px;}

/* ============ Editorial featured collage (desktop) — positioning overrides applied after the
   shared .gitem rules above so the absolute placement below always wins the cascade ============ */
.gallery-feature{position:relative;height:clamp(380px,42vw,560px);margin-bottom:36px;}
@media(max-width:900px){.gallery-feature{display:none;}}
.gallery-feature .gitem.gf-main{position:absolute;left:0;top:0;width:64%;height:100%;z-index:1;}
.gallery-feature .gitem.gf-accent{box-shadow:0 36px 80px -20px rgba(10,18,18,0.5), 0 10px 30px -12px rgba(10,18,18,0.35);}
.gallery-feature .gitem.gf-accent-1{position:absolute;right:0;top:4%;width:40%;height:50%;z-index:2;}
.gallery-feature .gitem.gf-accent-2{position:absolute;right:9%;bottom:0;width:36%;height:48%;z-index:3;}
.gf-accent-2 .gnum{color:rgba(255,255,255,0.9);}

/* ============ Horizontal slider ("Explore the Gallery") ============ */
.gallery-slider-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:16px;}
.gallery-slider-label{font-family:var(--font-display);font-size:20px;color:var(--text);}
.gallery-nav{display:flex;align-items:center;gap:18px;}
.gallery-counter{font-family:var(--font-display);font-size:14px;letter-spacing:0.03em;color:var(--text-soft);}
.gallery-counter b{color:var(--g-brown);font-weight:600;font-size:16px;}
.gnav-arrows{display:flex;gap:10px;}
.gnav-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:all .35s var(--ease-soft);color:var(--text);flex-shrink:0;
}
.gnav-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;}
.gnav-btn:hover{background:var(--g-brown);border-color:var(--g-brown);color:#fff;transform:translateY(-2px);}
.gnav-btn:disabled{opacity:0.3;pointer-events:none;}

.gallery-slider{
  display:flex;align-items:flex-end;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gallery-slider::-webkit-scrollbar{display:none;}
.gslide{flex:0 0 auto;width:clamp(230px,27vw,360px);scroll-snap-align:start;}
.gslide:nth-child(odd){aspect-ratio:3/4;}
.gslide:nth-child(even){aspect-ratio:4/3;}
@media(max-width:900px){
  .gslide{width:clamp(220px,42vw,320px);}
}
@media(max-width:560px){
  .gallery-slider{gap:14px;}
  .gslide{width:80vw;}
  .gslide:nth-child(odd),.gslide:nth-child(even){aspect-ratio:4/5;}
}

/* Paradise Award — separate recognition block, same borderless tile language as the gallery above */
/* ============ Premium horizontal scroll showcase (Paradise Award / Sample Flat / Work in
   Progress / Floor Plan / 3D Models) ============ */
/* ============ Premium horizontal scroll showcase (Gallery Images) ============ */
.gallery-carousel-wrap{position:relative;margin-top:18px;}
.award-grid{
  display:flex;
  align-items:center;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:8px 4px 20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.award-grid::-webkit-scrollbar{display:none;}

.award-tile,
.gallery-panel .gitem{
  flex:0 0 auto;
  scroll-snap-align:start;
  height:clamp(260px, 28vw, 360px);
  width:auto;
  max-width:92vw;
  aspect-ratio:auto !important;
  background:#ffffff !important;
  border:1px solid rgba(80,168,176,0.24) !important;
  border-radius:var(--radius);
  box-shadow:0 6px 20px -4px rgba(8,11,10,0.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  padding:0 !important;
  margin:0;
  transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s ease;
}

.award-tile:hover,
.gallery-panel .gitem:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 12px 32px -6px rgba(8,11,10,0.16) !important;
  border-color:var(--teal-500) !important;
  background:#ffffff !important;
}

/* Remove all dark placeholders, backgrounds, and overlays */
.award-tile .gtile-bg,
.gtile-bg{
  display:none !important;
}
.award-tile::after,
.gallery-panel .gitem::after{
  display:none !important;
}

/* Complete images in original aspect ratio, no cropping, no distortion, no zoom */
.award-tile img,
.gallery-panel .gitem img{
  position:relative;
  z-index:1;
  height:100%;
  width:auto;
  max-width:none;
  max-height:100%;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
  border-radius:calc(var(--radius) - 1px);
  transform:none !important;
  filter:none !important;
  padding:0 !important;
  margin:0 !important;
  transition:none !important;
}

.award-tile:hover img,
.gallery-panel .gitem:hover img{
  transform:none !important;
  filter:none !important;
}

/* Clean, modern hover view indicator */
.gallery-panel .gview{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(14,22,21,0.22);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.gallery-panel .gitem:hover .gview{
  opacity:1;
}
.gallery-panel .gview-ring{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(14,22,21,0.8);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0.9);
  transition:transform .35s var(--ease-soft);
}
.gallery-panel .gitem:hover .gview-ring{
  transform:scale(1);
}
.gallery-panel .gview-ring svg{
  width:16px;
  height:16px;
  stroke:#ffffff;
  fill:none;
  stroke-width:1.8;
}
.gallery-panel .gview span{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffffff;
  background:rgba(14,22,21,0.7);
  padding:3px 10px;
  border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.gallery-panel.active .award-grid .gitem{animation:gitemReveal .6s var(--ease-soft) backwards;}
.gallery-panel.active .award-grid .gitem:nth-child(1){animation-delay:.02s;}
.gallery-panel.active .award-grid .gitem:nth-child(2){animation-delay:.06s;}
.gallery-panel.active .award-grid .gitem:nth-child(3){animation-delay:.10s;}
.gallery-panel.active .award-grid .gitem:nth-child(4){animation-delay:.14s;}
.gallery-panel.active .award-grid .gitem:nth-child(n+5){animation-delay:.18s;}
@keyframes gitemReveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion: reduce){.gallery-panel.active .award-grid .gitem{animation:none;}}

/* subtle floating prev/next controls */
.gcarousel-nav{
  position:absolute;top:calc(50% - 11px);transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(80,168,176,0.35);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  box-shadow:0 8px 24px -6px rgba(8,11,10,0.22);transition:all .35s var(--ease-soft);
  opacity:0;pointer-events:none;cursor:pointer;
}
.gallery-carousel-wrap:hover .gcarousel-nav{opacity:1;pointer-events:auto;}
.gcarousel-nav.prev{left:-10px;}
.gcarousel-nav.next{right:-10px;}
.gcarousel-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.gcarousel-nav:hover{background:var(--ink);color:#fff;border-color:var(--gold);transform:translateY(-50%) scale(1.08);}
.gcarousel-nav:disabled{opacity:0!important;pointer-events:none;}

@media(max-width:900px){
  .gallery-carousel-wrap{margin-top:14px;}
  .award-grid{gap:16px;}
  .award-tile,
  .gallery-panel .gitem{
    height:clamp(220px, 34vw, 290px);
    width:auto;
    max-width:88vw;
    aspect-ratio:auto !important;
  }
  .gcarousel-nav{opacity:1;pointer-events:auto;width:40px;height:40px;}
  .gcarousel-nav.prev{left:2px;}
  .gcarousel-nav.next{right:2px;}
}
@media(max-width:560px){
  .award-grid{gap:12px;padding:6px 2px 14px;}
  .award-tile,
  .gallery-panel .gitem{
    height:clamp(190px, 54vw, 240px);
    width:auto;
    max-width:88vw;
    aspect-ratio:auto !important;
  }
}

/* Gallery category tabs (Paradise Award / Sample Flat / Work in Progress / Floor Plan / 3D Models) */
.gallery-categories{margin-top:8px;}
.gallery-cat-panel{display:none;}
.gallery-cat-panel.active{display:block;}
.gallery-cat-panel .award-grid{margin-top:18px;}
.gallery-empty{
  margin-top:18px;padding:36px 20px;text-align:center;border:1px dashed var(--line);
  color:var(--text-soft);font-size:14px;letter-spacing:0.03em;
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(8,14,14,0.96);z-index:2000;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;padding:40px;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;transform:scale(0.96);transition:transform .4s var(--ease);}
.lightbox.open img{transform:scale(1);}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;color:#fff;width:46px;height:46px;border:1px solid rgba(255,255,255,0.3);
  display:flex;align-items:center;justify-content:center;transition:all .3s ease;border-radius:50%;
}
.lightbox-close{top:26px;right:26px;}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#fff;color:var(--ink);}
.lightbox-prev{left:26px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:26px;top:50%;transform:translateY(-50%);}
@media(max-width:768px){.lightbox{padding:16px;}.lightbox-prev,.lightbox-next{width:38px;height:38px;}.lightbox-close{top:14px;right:14px;}}
.lightbox-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(255,255,255,0.7);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;}

/* ============ FEATURES GRID / HIGHLIGHTS ============ */
#highlights{
  background: 
    radial-gradient(ellipse 75% 65% at 50% 15%, rgba(61, 164, 173, 0.06), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(42, 123, 131, 0.05), transparent 70%),
    linear-gradient(180deg, #f7faf9 0%, #edf4f3 100%);
}
.highlights-head{max-width:100%;}
.highlights-head .section-sub,
.highlights-sub{max-width:640px;}
.highlights-heading{
  white-space:nowrap !important;
  font-size:clamp(28px, 2.75vw, 44px) !important;
  line-height:1.2 !important;
  letter-spacing:0.005em !important;
  font-family:var(--font-display) !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  display:block;
  margin:0 0 10px 0;
}
.highlights-heading br{
  display:none !important;
}
@media(max-width:1024px){
  .highlights-heading{
    font-size:clamp(22px, 2.6vw, 28px) !important;
  }
}
.highlights-accent-line{width:64px;height:1px;background:var(--grad-teal);margin-top:16px;opacity:0.8;}
.features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px;}
@media(max-width:1000px){.features-grid{grid-template-columns:repeat(3,1fr);gap:12px;}}
@media(max-width:600px){.features-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;}}
.feature-card{
  background:#ffffff;padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  transition:all .4s var(--ease-soft);
  position:relative;min-height:124px;z-index:1;border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(8,11,10,0.03);
  overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--teal-500) 0%, var(--gold) 100%);
  opacity:0;transition:opacity .35s ease;
}
.feature-card:hover{
  background:#ffffff;transform:translateY(-4px);
  box-shadow:0 14px 30px -8px rgba(8,11,10,0.1);
  border-color:rgba(80,168,176,0.45);
}
.feature-card:hover::before{opacity:1;}
.fi{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:rgba(80,168,176,0.1);border-radius:10px;border:1px solid rgba(80,168,176,0.25);
  padding:9px;transition:all .35s ease;
}
.feature-card:hover .fi{background:var(--ink);border-color:var(--gold);}
.fi svg{width:100%;height:100%;stroke:var(--gold);fill:none;stroke-width:1.6;transition:all .35s ease;}
.feature-card:hover .fi svg{stroke:#fff;transform:scale(1.08);}
.feature-card span{font-size:14px;letter-spacing:0.02em;color:var(--ink);line-height:1.45;transition:color .3s ease;font-weight:600;}

/* ============ AMENITIES ============ */
#amenities{
  padding: clamp(32px, 3.8vw, 48px) 0;
  background:
    radial-gradient(ellipse 65% 50% at 8% 25%, rgba(61, 164, 173, 0.05), transparent 60%),
    radial-gradient(ellipse 60% 45% at 92% 80%, rgba(42, 123, 131, 0.04), transparent 60%),
    var(--paper);
  position: relative;
}
.amenities{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: min(4.5vw, 48px);
  align-items: center;
}
@media(max-width: 900px){
  .amenities{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Amenities section heading — centered, balanced, full section width */
.amenities-head{
  max-width: 680px;
  margin: 0 auto 24px;
  text-align: center;
}
.amenities-head .eyebrow{
  justify-content: center;
}
.amenities-head .eyebrow::before{
  display: none;
}
.amenities-head .eyebrow::after{
  content: '';
  width: 34px;
  height: 1px;
  background: var(--grad-teal);
}
.amenities-head .h2{
  margin: 0 auto;
  line-height: 1.15;
}
.amenities-head .lede{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 10px;
  line-height: 1.6;
}
@media(max-width: 768px){
  .amenities-head{
    margin-bottom: 20px;
  }
}
@media(max-width: 560px){
  .amenities-head{
    margin-bottom: 16px;
  }
}

.amenity-list{
  border-top: 1px solid var(--line);
}
.amenity-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding .45s var(--ease-soft), border-color .3s ease;
  position: relative;
}
.amenity-row::before{
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--grad-teal);
  transition: height .45s var(--ease-soft);
}
.amenity-row:hover,
.amenity-row.active{
  padding-left: 18px;
}
.amenity-row:hover::before,
.amenity-row.active::before{
  height: 100%;
}
.amenity-row.active{
  border-color: var(--gold);
}
.amenity-row-left{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.amenity-num{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--grey);
  margin-top: 4px;
}
.amenity-row.active .amenity-num,
.amenity-row.active .amenity-name{
  color: var(--gold);
}
.amenity-name{
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--text);
  line-height: 1.25;
}
.amenity-desc{
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin-top: 0;
}
.amenity-row.active .amenity-desc{
  max-height: 80px;
  margin-top: 6px;
}
.amenity-arrow{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .4s var(--ease);
}
.amenity-row.active .amenity-arrow{
  transform: rotate(90deg);
}

.amenity-visual{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(80, 168, 176, 0.28);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.amenity-visual::after{
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(80, 168, 176, 0.16);
  pointer-events: none;
  z-index: 2;
  border-radius: var(--radius);
}
.amenity-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .65s var(--ease), transform 1.2s var(--ease);
  transform: scale(0.98);
}
.amenity-visual img.active{
  opacity: 1;
  transform: scale(1);
}

/* ============ FLOOR PLANS ============ */
.tabs-bar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:50px 0 0;}
.tab-btn{
  padding:16px 26px;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-soft);
  position:relative;transition:color .3s ease;
}
.tab-btn::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease);}
.tab-btn.active{color:var(--text);font-weight:600;}
.tab-btn.active::after{transform:scaleX(1);}
.plan-viewer{position:relative;margin-top:40px;background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-md);}
:root[data-theme="dark"] .plan-viewer, @media(prefers-color-scheme:dark){.plan-viewer{background:#0f1918;}}
.plan-frame{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center;}
.plan-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;transform:translateX(24px) scale(0.98);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;
}
.plan-slide.active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;position:relative;}
.plan-slide img{max-height:70vh;width:auto;max-width:100%;object-fit:contain;cursor:zoom-in;}
.plan-toolbar{
  display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-top:1px solid var(--line);
  font-size:12px;color:var(--text-soft);letter-spacing:0.05em;
}
.plan-toolbar-actions{display:flex;gap:10px;}
.icon-btn{
  width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;
}
.icon-btn:hover{background:var(--teal-500);border-color:var(--teal-500);color:#fff;}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;}

/* Fullscreen plan modal */
.plan-modal{
  position:fixed;inset:0;background:rgba(8,14,14,0.97);z-index:2100;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;overflow:auto;
}
.plan-modal.open{opacity:1;visibility:visible;}
.plan-modal-inner{cursor:grab;}
.plan-modal img{max-width:none;transition:transform .3s var(--ease);transform-origin:center;}
.plan-modal-close{position:fixed;top:26px;right:26px;width:46px;height:46px;border:1px solid rgba(255,255,255,0.3);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;}
.plan-modal-zoom{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:10px;}
.plan-modal-zoom button{width:44px;height:44px;border:1px solid rgba(255,255,255,0.3);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;}
.plan-modal-zoom button:hover, .plan-modal-close:hover{background:#fff;color:var(--ink);}

/* ============ UNITS ============ */
.unit-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:46px;}
.unit-chip{
  padding:14px 22px;border:1px solid var(--line);font-size:12.5px;letter-spacing:0.06em;display:flex;flex-direction:column;
  gap:2px;transition:all .35s var(--ease);min-width:108px;
}
.unit-chip b{font-family:var(--font-display);font-size:19px;}
.unit-chip.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.unit-panel{display:none;margin-top:44px;}
.unit-panel.active{display:block;}
.unit-panel-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.unit-panel-top h3{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);}
.unit-panel-top p{color:var(--text-soft);font-size:14px;margin-top:6px;}
.unit-img-wrap{position:relative;border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow-md);transition:box-shadow .4s ease;}
.unit-img-wrap:hover{box-shadow:var(--shadow-lg);}
:root[data-theme="dark"] .unit-img-wrap, @media(prefers-color-scheme:dark){.unit-img-wrap{background:#0f1918;}}
.unit-img-wrap img{width:100%;cursor:zoom-in;}
.unit-expand{position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.92);width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
:root[data-theme="dark"] .unit-expand{background:rgba(21,32,31,0.85);color:#fff;}
.unit-expand svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6;}
:root[data-theme="dark"] .unit-expand svg{stroke:#fff;}

/* ============ IMAGE BREAK ============ */
.imgbreak{position:relative;height:70vh;min-height:480px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.imgbreak img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;top:-10%;will-change:transform;}
.imgbreak-scrim{position:absolute;inset:0;background:rgba(6,14,14,0.5);}
.imgbreak-light{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 35%, rgba(80,168,176,0.16), transparent 65%);pointer-events:none;}
.imgbreak-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;}
.imgbreak-content .eyebrow{color:var(--teal-200);}
.imgbreak-content .eyebrow::before{background:var(--teal-200);}
.imgbreak h2{font-size:clamp(40px,7vw,96px);line-height:1;}
.imgbreak p{margin-top:18px;font-size:14px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.8);}

/* ============ SPECS ============ */
#specifications{
  background:
    radial-gradient(ellipse 70% 55% at 88% 20%, rgba(61, 164, 173, 0.05), transparent 65%),
    radial-gradient(ellipse 60% 50% at 12% 80%, rgba(42, 123, 131, 0.05), transparent 65%),
    var(--paper);
  position: relative;
}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px, 3.5vw, 42px);margin-top:20px;border-top:1px solid var(--line);}
@media(max-width:700px){.specs-grid{grid-template-columns:1fr;margin-top:16px;}}
.spec-card{
  display:flex;align-items:flex-start;gap:16px;padding:16px 8px;border-bottom:1px solid var(--line);
  position:relative;transition:all .35s var(--ease-soft);border-radius:4px;
}
.spec-card:hover{
  padding-left:14px;
  background:rgba(255,255,255,0.6);
}
.spec-index{
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:0.04em;
  color:var(--gold);
  opacity:1;
  width:26px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  line-height:1;
  align-self:center;
  font-weight:700;
  transition:all .35s ease;
}
.spec-card:hover .spec-index{
  color:var(--ink);
  transform:scale(1.08);
}
:root[data-theme="dark"] .spec-index{
  color:var(--gold-soft);
}
:root[data-theme="dark"] .spec-card:hover .spec-index{
  color:#fff;
}
.spec-icon{
  width:42px;height:42px;flex-shrink:0;border-radius:10px;border:1px solid rgba(80,168,176,0.35);
  background:rgba(80,168,176,0.1);
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease-soft);
  color:var(--ink);
}
.spec-icon svg{
  width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block;transition:all .35s ease;
}
.spec-card:hover .spec-icon{background:var(--gold);border-color:var(--gold);transform:scale(1.05);}
.spec-card:hover .spec-icon svg{stroke:#fff;}
:root[data-theme="dark"] .spec-icon svg{stroke:#f2f1ea;}
:root[data-theme="dark"] .spec-card:hover .spec-icon svg{stroke:#fff;}
.spec-body h4{font-family:var(--font-display);font-size:19px;letter-spacing:0.02em;margin-bottom:4px;color:var(--ink);font-weight:600;}
.spec-body p{font-size:13.5px;color:var(--text-soft);line-height:1.6;}

/* ============ LOCATION ============ */
#location{
  background:
    radial-gradient(ellipse 70% 55% at 20% 15%, rgba(61, 164, 173, 0.05), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(42, 123, 131, 0.05), transparent 65%),
    linear-gradient(180deg, #f7faf9 0%, #edf4f3 100%);
  position: relative;
}
.location-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:clamp(22px, 3.6vw, 38px);align-items:center;margin-top:18px;}
@media(max-width:900px){.location-grid{grid-template-columns:1fr;gap:24px;margin-top:16px;}}
.location-media{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(80,168,176,0.35);
  box-shadow:0 16px 40px -12px rgba(8,11,10,0.12);
  border-radius:calc(var(--radius) + 2px);
  background:#ffffff;
  display:flex;
  flex-direction:column;
}
.location-media-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:10px 14px;
  background:rgba(244,248,248,0.96);
  border-bottom:1px solid rgba(80,168,176,0.22);
}
.location-media-tabs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.9);
  padding:3px;
  border-radius:8px;
  border:1px solid rgba(80,168,176,0.25);
}
.loc-tab-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:6px;
  border:none;
  background:transparent;
  color:var(--text-soft);
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .25s ease;
}
.loc-tab-btn:hover{
  color:var(--teal-600);
}
.loc-tab-btn.active{
  background:var(--teal-600);
  color:#ffffff;
  box-shadow:0 2px 8px rgba(47,125,134,0.3);
}
.loc-media-pane{
  position:relative;
  width:100%;
  height:420px;
  background:#ffffff;
}
.loc-media-pane iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.location-plan-lightbox{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:#ffffff;
  overflow:hidden;
  text-decoration:none;
}
.location-plan-lightbox img,
.location-media img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#ffffff;
  transition:transform .4s var(--ease-soft);
}
.location-plan-lightbox:hover img{
  transform:scale(1.02);
}
.loc-plan-badge{
  position:absolute;
  bottom:14px;
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:6px;
  background:rgba(14,22,21,0.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#ffffff;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.02em;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  pointer-events:none;
}
@media(max-width:768px){
  .loc-media-pane{
    height:320px;
  }
}
@media(max-width:480px){
  .loc-media-pane{
    height:260px;
  }
  .loc-tab-btn{
    padding:5px 9px;
    font-size:11.5px;
  }
}
.location-info{
  background:#ffffff;
  padding:clamp(24px, 3.2vw, 36px);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px);
  box-shadow:0 12px 32px -10px rgba(8,11,10,0.06);
}
.location-info b.big{
  font-family:var(--font-display);font-size:clamp(26px,3vw,36px);
  display:block;color:var(--gold);font-weight:600;letter-spacing:0.02em;
}
.location-addr{margin-top:10px;font-size:14.5px;color:var(--text-soft);line-height:1.65;}
.location-contacts{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.location-contact-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  flex-wrap:wrap;
  transition:all .3s var(--ease-soft);
}
.location-contact-item:hover{
  background:#fff;
  border-color:var(--gold);
  box-shadow:0 4px 12px -4px rgba(8,11,10,0.06);
}
.lci-number{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s ease;
}
.lci-number:hover{
  color:var(--gold);
}
.lci-number svg{
  width:16px;
  height:16px;
  stroke:var(--gold);
  fill:none;
  stroke-width:2;
  flex-shrink:0;
}
.lci-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.lci-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:5px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
}
.lci-call{
  background:rgba(18,122,130,0.1);
  color:#127a82;
  border:1px solid rgba(18,122,130,0.25);
}
.lci-call:hover{
  background:#127a82;
  color:#fff;
}
.lci-call svg{
  width:13px;
  height:13px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
}
.lci-wa{
  background:rgba(37,211,102,0.12);
  color:#158a43;
  border:1px solid rgba(37,211,102,0.3);
}
.lci-wa:hover{
  background:#25d366;
  color:#fff;
}
.lci-wa svg{
  width:13px;
  height:13px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
}
.location-list{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.location-list-item{
  display:flex;gap:12px;font-size:13.5px;color:var(--text);align-items:center;
  padding:9px 12px;background:var(--paper);border-radius:6px;border:1px solid var(--line);
  transition:all .3s var(--ease-soft);
}
.location-list-item:hover{
  background:#fff;border-color:var(--gold);transform:translateX(3px);
  box-shadow:0 4px 12px -4px rgba(8,11,10,0.06);
}
.location-list-item svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.8;flex-shrink:0;}
.location-list-item b{color:var(--ink);font-weight:600;}

/* ============ CONTACT & ENQUIRY SECTION ============ */
.contact-section{
  background: #ffffff !important;
  color: var(--text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-section::before,
.contact-section::after{
  display: none !important;
}
.contact-backdrop,
.contact-glow{
  display: none !important;
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
@media(max-width: 960px){
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column: Info & Content */
.contact-info-col{
  display: flex;
  flex-direction: column;
}
.contact-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 700;
}
.contact-eyebrow .eyebrow-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(38,52,49,0.18);
  display: inline-block;
}
.contact-heading{
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.12;
}
.contact-lede{
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 520px;
}

/* Contact Cards Grid */
.contact-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}
@media(max-width: 560px){
  .contact-cards{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.contact-card-item{
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(8, 11, 10, 0.04);
  border-radius: var(--radius);
  padding: 13px 16px;
  transition: all .35s var(--ease-soft);
  text-decoration: none;
  color: var(--text);
}
.contact-card-item:hover{
  background: #ffffff;
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(8, 11, 10, 0.1);
}
.cci-icon{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(80, 168, 176, 0.12);
  border: 1px solid rgba(80, 168, 176, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .3s ease;
}
.cci-icon svg{
  width: 17px;
  height: 17px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
}
.contact-card-item:hover .cci-icon{
  background: var(--gold);
  border-color: var(--gold);
}
.contact-card-item:hover .cci-icon svg{
  stroke: #ffffff;
}
.cci-icon-wa{
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.28);
}
.cci-icon-wa svg{
  stroke: #25D366;
  fill: #25D366;
  stroke-width: 0;
}
.contact-card-item:hover .cci-icon-wa{
  background: #25D366;
  border-color: #25D366;
}
.contact-card-item:hover .cci-icon-wa svg{
  fill: #ffffff;
}
.cci-text{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cci-label{
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}
.cci-val{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.contact-card-item.contact-card-dual {
  align-items: flex-start;
  cursor: default;
}
.contact-card-item.contact-card-dual .cci-icon {
  margin-top: 2px;
}
.cci-numbers {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 3px;
}
.cci-num-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.35;
  transition: all .2s ease;
  padding: 1px 0;
}
.cci-mini-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: all .2s ease;
}
.cci-call-link .cci-mini-icon {
  stroke: var(--gold);
}
.cci-call-link:hover {
  color: var(--gold);
  transform: translateX(2px);
}
.cci-wa-link .cci-mini-icon {
  stroke: #25D366;
}
.cci-wa-link:hover {
  color: #158a43;
  transform: translateX(2px);
}
.cci-wa-link:hover .cci-mini-icon {
  stroke: #158a43;
}
.contact-brochure-action{
  margin-top: 24px;
}
.contact-brochure-action .btn-brochure{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
}

/* Right Column: Pure White Enquiry Form Card */
.enquiry-card{
  background: #ffffff !important;
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(24px, 3.2vw, 36px);
  box-shadow: 0 16px 40px -12px rgba(8, 11, 10, 0.08);
  position: relative;
}
.enquiry-card::before{
  display: none;
}
.enquiry-card-head{
  margin-bottom: 22px;
}
.enquiry-title{
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 600;
}
.enquiry-sub{
  font-size: 13.5px;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.5;
}

/* Flash Alerts */
.flash-alert{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: fadeIn 0.4s ease;
}
.flash-alert .flash-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.flash-alert .flash-icon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1.8;
}
.flash-alert b{
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}
.flash-alert p{
  margin: 0;
  opacity: 0.9;
}
.flash-success{
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.flash-success .flash-icon svg{
  stroke: #16a34a;
}
.flash-error{
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.flash-error .flash-icon svg{
  stroke: #dc2626;
}

/* Form Layout & Inputs */
.enquiry-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media(max-width: 600px){
  .form-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.form-group{
  display: flex;
  flex-direction: column;
}
.form-label{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-label .req{
  color: var(--gold);
}
.input-control{
  position: relative;
  display: flex;
  align-items: center;
}
.input-control .input-icon{
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: #727a78;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s ease;
}
.input-control .input-icon svg{
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.form-input{
  width: 100%;
  height: 48px;
  background: #ffffff;
  border: 1px solid #d5d3ca;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0 16px 0 42px;
  transition: all .3s var(--ease-soft);
  outline: none;
}
.form-input::placeholder{
  color: #8c8f8e;
  font-size: 13.5px;
}
.form-input:focus{
  background: #ffffff;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(38, 52, 49, 0.12);
}
.input-control:focus-within .input-icon{
  color: var(--teal-500);
}
.textarea-control{
  align-items: flex-start;
}
.textarea-control .textarea-icon{
  top: 14px;
}
.form-textarea{
  height: auto;
  min-height: 84px;
  padding: 12px 16px 12px 42px;
  resize: vertical;
  line-height: 1.5;
}

/* Submit Button */
.btn-enquiry-submit{
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #127a82 0%, #1e8790 50%, #50a8b0 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all .4s var(--ease-soft);
  box-shadow: 0 8px 20px -4px rgba(18, 122, 130, 0.35);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.btn-enquiry-submit:hover{
  background: linear-gradient(135deg, #0e646a 0%, #177b83 40%, #469ba3 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(18, 122, 130, 0.45);
}
.btn-arrow-icon{
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  transition: transform .35s var(--ease-soft);
}
.btn-enquiry-submit:hover .btn-arrow-icon{
  transform: translateX(4px);
}
.form-privacy-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 2px;
  text-align: center;
}
.form-privacy-note svg{
  width: 13px;
  height: 13px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0;
}

/* ============ SITE FOOTER ============ */
.site-footer{
  background: linear-gradient(180deg, #0a1413 0%, #050a09 100%);
  color: rgba(242, 241, 234, 0.75);
  padding: clamp(34px, 4vw, 48px) 0 20px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-400) 30%, var(--gold) 70%, transparent);
}
.footer-ambient-glow{
  position: absolute;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 154, 163, 0.12), transparent 70%);
  pointer-events: none;
}
.footer-main-grid{
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 1.15fr 1.05fr;
  gap: clamp(24px, 3.5vw, 48px);
}
@media(max-width: 1024px){
  .footer-main-grid{
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
  }
}
@media(max-width: 640px){
  .footer-main-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Footer Col 1: Brand */
.footer-brand-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(80, 168, 176, 0.28);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  margin-bottom: 16px;
  transition: all .35s var(--ease-soft);
  text-decoration: none;
}
.footer-brand-link:hover{
  background: #ffffff;
  border-color: var(--teal-400);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.footer-brand-logo{
  height: 48px;
  max-height: 52px;
  width: auto;
  aspect-ratio: 758 / 460;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}
@media(max-width:600px){
  .footer-brand-link{
    padding: 6px 12px;
    border-radius: 10px;
  }
  .footer-brand-logo{
    height: 42px;
    max-height: 44px;
    width: auto;
    aspect-ratio: 758 / 460;
  }
}
.footer-brand-fallback{
  display: flex;
  flex-direction: column;
}
.footer-brand-fallback b{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
}
.footer-brand-fallback span{
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal-400);
}
.footer-brand-desc{
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
}
.footer-brand-sub{
  font-size: 13px;
  line-height: 1.65;
  color: rgba(242, 241, 234, 0.62);
  max-width: 330px;
  margin-bottom: 18px;
}
.footer-builder-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: all .35s var(--ease-soft);
}
.footer-builder-link:hover{
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.fbl-tag{
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.fbl-title{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.footer-builder-link svg{
  width: 13px;
  height: 13px;
  stroke: var(--teal-400);
  fill: none;
  stroke-width: 1.8;
  transition: transform .3s ease;
}
.footer-builder-link:hover svg{
  transform: translate(2px, -2px);
}

/* Footer Section Headings */
.footer-col-title{
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col-title::after{
  content: '';
  width: 22px;
  height: 1px;
  background: var(--grad-teal);
  display: inline-block;
}

/* Navigation Links */
.footer-nav-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(242, 241, 234, 0.72);
  text-decoration: none;
  transition: all .3s var(--ease-soft);
}
.fni-bullet{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0.5;
  transition: all .3s ease;
}
.footer-nav-item:hover{
  color: #fff;
  transform: translateX(4px);
}
.footer-nav-item:hover .fni-bullet{
  background: var(--teal-400);
  opacity: 1;
  transform: scale(1.4);
}

/* Contact List */
.footer-contact-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-contact-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(242, 241, 234, 0.78);
  text-decoration: none;
  transition: all .3s ease;
}
a.footer-contact-row:hover{
  color: #fff;
  transform: translateX(2px);
}
.fcr-icon{
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .3s ease;
}
.fcr-icon svg{
  width: 15px;
  height: 15px;
  stroke: var(--teal-400);
  fill: none;
  stroke-width: 1.6;
}
a.footer-contact-row:hover .fcr-icon{
  background: var(--teal-500);
  border-color: var(--teal-400);
}
a.footer-contact-row:hover .fcr-icon svg{
  stroke: #fff;
}
.fcr-icon-wa svg{
  stroke: #25D366;
  fill: #25D366;
  stroke-width: 0;
}
a.footer-contact-row:hover .fcr-icon-wa{
  background: #25D366;
  border-color: #25D366;
}
a.footer-contact-row:hover .fcr-icon-wa svg{
  fill: #fff;
}
.fcr-content{
  display: flex;
  flex-direction: column;
}
.fcr-label{
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1px;
}
.fcr-val{
  font-size: 13px;
  color: inherit;
  line-height: 1.45;
}
.footer-contact-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-contact-item .footer-contact-row{
  flex: 1;
  min-width: 170px;
}
.footer-wa-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.3);
  transition: all .2s ease;
  white-space: nowrap;
}
.footer-wa-badge:hover{
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}
.footer-wa-badge svg{
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Col 4: Connect & Brochure */
.footer-social-hint{
  font-size: 12.5px;
  color: rgba(242, 241, 234, 0.58);
  margin-bottom: 14px;
  line-height: 1.5;
}
.footer-social-pills{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.f-social-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all .35s var(--ease-soft);
}
.f-social-pill svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.f-social-pill:hover{
  background: var(--teal-500);
  border-color: var(--teal-400);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(26, 154, 163, 0.5);
}

/* Brochure Card in Footer */
.footer-brochure-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(80, 168, 176, 0.08);
  border: 1px solid rgba(80, 168, 176, 0.25);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all .35s var(--ease-soft);
}
.footer-brochure-card:hover{
  background: rgba(80, 168, 176, 0.16);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(29, 130, 138, 0.35);
}
.fbc-icon{
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fbc-icon svg{
  width: 16px;
  height: 16px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.8;
}
.fbc-text{
  display: flex;
  flex-direction: column;
}
.fbc-title{
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.fbc-sub{
  font-size: 10.5px;
  color: rgba(242, 241, 234, 0.6);
  margin-top: 1px;
}

/* Bottom Bar */
.footer-bottom-bar{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(242, 241, 234, 0.52);
  letter-spacing: 0.02em;
}
@media(max-width: 768px){
  .footer-bottom-bar{
    flex-direction: column;
    text-align: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 16px;
  }
}
.fbb-credit{
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-credit-link{
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: rgba(80, 168, 176, 0.4);
  text-underline-offset: 3px;
  transition: all .3s ease;
}
.footer-credit-link:hover{
  color: #fff;
  text-decoration-color: #fff;
}

/* ============ FLOATING ACTIONS ============ */
.fab-col{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:12px;
}
.fab{
  width:50px;height:50px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  transition:all .4s var(--ease-soft);position:relative;
}
.fab svg{width:20px;height:20px;stroke:var(--charcoal);fill:none;stroke-width:1.6;}
.fab.whatsapp svg{stroke:#25D366;fill:#25D366;stroke:none;}
.fab.whatsapp::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #25D366;
  animation:fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse{0%{transform:scale(1);opacity:0.6;}100%{transform:scale(1.7);opacity:0;}}
.fab.call svg{stroke:var(--charcoal);}
.fab:hover{background:var(--grad-teal);transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-teal);}
.fab:hover svg{stroke:#fff;fill:#fff;}
.fab-tip{
  position:absolute;right:60px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--ink);color:#fff;
  padding:7px 12px;font-size:11px;letter-spacing:0.04em;white-space:nowrap;opacity:0;pointer-events:none;
  transition:all .3s var(--ease);
}
.fab:hover .fab-tip{opacity:1;transform:translateY(-50%) translateX(0);}

/* Floating Icons on Mobile Screen */
@media(max-width:900px){
  .fab-col{
    display:flex !important;
    position:fixed !important;
    right:16px !important;
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    top:auto !important;
    transform:none !important;
    flex-direction:column !important;
    gap:12px !important;
    z-index:999 !important;
    pointer-events:auto !important;
  }
  .fab{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    box-shadow:0 8px 24px -4px rgba(8, 11, 10, 0.35) !important;
    border:1px solid rgba(255, 255, 255, 0.25) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:transform .2s ease, box-shadow .2s ease !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .fab:active{
    transform:scale(0.92) !important;
  }
  .fab-tip{
    display:none !important;
  }
  .fab.whatsapp{
    background:#25D366 !important;
  }
  .fab.whatsapp svg{
    width:24px !important;
    height:24px !important;
    stroke:none !important;
    fill:#ffffff !important;
  }
  .fab.whatsapp::before{
    display:none !important;
  }
  .fab.call{
    background:#127a82 !important;
  }
  .fab.call svg{
    width:21px !important;
    height:21px !important;
    stroke:#ffffff !important;
    fill:none !important;
    stroke-width:1.8 !important;
  }
  .fab.enquire{
    display:none !important;
  }
  .mobile-bar{
    display:none !important;
  }
}

/* Back to top — fixed bottom-left on mobile, bottom-right on desktop */
.back-to-top{
  position:fixed;right:26px;bottom:26px;z-index:399;
  width:48px;height:48px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft), visibility .4s, background .35s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:18px;height:18px;stroke:var(--charcoal);fill:none;stroke-width:1.8;}
.back-to-top:hover{background:var(--grad-teal);}
.back-to-top:hover svg{stroke:#fff;}
@media(max-width:900px){
  .back-to-top{
    left:16px !important;
    right:auto !important;
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    width:44px !important;
    height:44px !important;
    z-index:990 !important;
  }
}

.mobile-bar{
  display:none;position:fixed;bottom:0;left:0;width:100%;z-index:400;background:var(--surface);
  border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(12,50,54,0.1);
}

/* utility */
.center-text{text-align:center;margin:0 auto;}
.section-head-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.divider-gold{width:56px;height:1px;background:var(--gold);margin:26px 0;}
@media(max-width:768px){
  .hero-ctas .btn{padding:14px 22px;font-size:11px;}
}
noscript{display:block;padding:20px;text-align:center;}

/* =========================================================
   COMPREHENSIVE MOBILE TYPOGRAPHY & READABILITY ENHANCEMENTS
   ========================================================= */
@media (max-width: 900px){
  /* Root & Global Mobile Typography */
  :root:not([data-theme="light"]){
    --text: #0e1a19;
    --text-soft: #233432;
  }
  body{
    font-size: 15.5px;
    line-height: 1.65;
    color: #0e1a19;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
  }
  body::before{
    display: none !important; /* remove grain overlay on mobile for crystal sharp rendering */
  }

  /* Headings & Section Titles */
  h1, h2, h3, .h2, .font-display{
    font-family: var(--font-display);
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: #060e0d;
  }
  .h2{
    font-size: clamp(27px, 6.5vw, 36px) !important;
    line-height: 1.2 !important;
    color: #060e0d !important;
    text-shadow: none !important;
  }
  .h2 em{
    color: var(--teal-600) !important;
    font-weight: 600 !important;
  }
  .eyebrow{
    font-size: 11.5px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 10px;
    font-weight: 700 !important;
    color: #127a82 !important;
    opacity: 1 !important;
  }
  .lede{
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #1c2e2c !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* Header Branding on Mobile */
  .brand-text b{
    font-size: 19px !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  header.nav:not(.solid) .brand-text b{
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
  }
  .brand-text span{
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    font-weight: 700 !important;
    color: var(--teal-600) !important;
  }
  header.nav:not(.solid) .brand-text span{
    color: #b2e2e6 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
  }

  /* Mobile Fullscreen Navigation Overlay */
  .mobile-nav-link{
    font-family: var(--font-display);
    font-size: clamp(23px, 5.8vw, 29px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .mobile-nav-foot{
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    color: #a0e0e4 !important;
  }

  /* Hero Section Typography */
  .hero-eyebrow{
    font-size: 12px !important;
    letter-spacing: 0.24em !important;
    font-weight: 700 !important;
    color: #b5eef2 !important;
    opacity: 1 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  }
  .hero-title{
    font-size: clamp(36px, 9.2vw, 56px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero-title .line:last-child span{
    background: linear-gradient(100deg, #ffffff 0%, #b2e2e6 50%, #50a8b0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  }
  .hero-sub{
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
  }
  .hero-ctas .btn{
    font-size: 12.5px !important;
    letter-spacing: 0.12em !important;
    padding: 14px 26px !important;
    font-weight: 700 !important;
  }

  /* Marquee Strip */
  .marquee-track span{
    font-size: 16.5px !important;
    letter-spacing: 0.05em !important;
    padding: 0 20px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
  }
  .marquee-track span b{
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* Overview & Stats */
  .intro-subheading{
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #127a82 !important;
    opacity: 1 !important;
  }
  .intro-desc{
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #192b29 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .intro-stat b{
    font-size: clamp(28px, 6.2vw, 34px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #127a82 !important;
  }
  .intro-stat span{
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    color: #1c2e2c !important;
    opacity: 1 !important;
  }

  /* Award Section */
  .pa-eyebrow{
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    font-weight: 700 !important;
    color: #127a82 !important;
    opacity: 1 !important;
  }
  .pa-desc{
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #192b29 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .pa-highlight{
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #06363b !important;
    font-weight: 700 !important;
  }
  .pfi-label{
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    color: #127a82 !important;
    opacity: 1 !important;
  }
  .pfi-sub{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  .pa-thumb-label{
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #060e0d !important;
    opacity: 1 !important;
  }

  /* Gallery Section */
  .gallery-head .eyebrow{
    font-size: 12px !important;
    color: #127a82 !important;
    font-weight: 700 !important;
  }
  .gallery-head .h2,
  .gallery-heading{
    font-size: clamp(22px, 4.8vw, 34px) !important;
    white-space: nowrap !important;
  }
  .gallery-index{
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #127a82 !important;
  }
  .gtab-btn{
    font-size: 12.5px !important;
    letter-spacing: 0.06em !important;
    padding: 9px 16px !important;
    font-weight: 600 !important;
    color: #142422 !important;
  }
  .gtab-btn.active{
    color: #ffffff !important;
    background: #080b0a !important;
    font-weight: 700 !important;
  }
  .gitem .gnum{
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  }
  .award-tile-title{
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
  }

  /* Highlights Section */
  .highlights-heading{
    font-size: clamp(17px, 2.9vw, 22px) !important;
    white-space: nowrap !important;
  }
  .feature-card span{
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }

  /* Amenities Section */
  .amenity-num{
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #127a82 !important;
  }
  .amenity-name{
    font-size: clamp(18px, 4.4vw, 21px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  .amenity-desc{
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #1c2e2c !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .amenity-tag{
    font-size: 11.5px !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    color: #127a82 !important;
  }
  .tab-btn{
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1c2e2c !important;
  }
  .tab-btn.active{
    color: #060e0d !important;
    font-weight: 700 !important;
  }

  /* Specifications Section */
  .spec-index{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #127a82 !important;
    opacity: 1 !important;
  }
  .spec-body h4{
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  .spec-body p{
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #1c2e2c !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* Location Section */
  .location-info b.big{
    font-size: clamp(23px, 5.2vw, 29px) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #127a82 !important;
  }
  .location-addr{
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #192b29 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .location-contact-item{
    padding: 8px 12px !important;
  }
  .lci-number{
    font-size: 14px !important;
  }
  .lci-btn{
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  .location-list-item{
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #142422 !important;
  }
  .location-list-item b{
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #060e0d !important;
  }

  /* Contact & Form Section */
  .contact-col-title{
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    font-weight: 700 !important;
    color: #127a82 !important;
  }
  .contact-title{
    font-size: clamp(26px, 6.2vw, 35px) !important;
    line-height: 1.2 !important;
    color: #060e0d !important;
    font-weight: 600 !important;
  }
  .contact-desc{
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #1c2e2c !important;
    font-weight: 400 !important;
  }
  .cci-label{
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: #127a82 !important;
  }
  .cci-val{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  .cci-num-link{
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .enquiry-title{
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
  .enquiry-sub{
    font-size: 14px !important;
    color: #233432 !important;
    font-weight: 400 !important;
  }
  .form-group label{
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
    color: #060e0d !important;
  }
  .form-input, .form-textarea, .form-select{
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #060e0d !important;
    font-weight: 500 !important;
  }
  .form-input::placeholder, .form-textarea::placeholder{
    color: #556765 !important;
    font-weight: 400 !important;
  }
  .btn-enquiry-submit{
    font-size: 13.5px !important;
    letter-spacing: 0.14em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }
  .form-privacy-note{
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #384d4b !important;
    font-weight: 400 !important;
  }

  /* Footer Section */
  .footer-brand-desc{
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #e5eceb !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .footer-brand-sub{
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #d1dcda !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
  .footer-col-title{
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    font-weight: 700 !important;
    color: #50a8b0 !important;
  }
  .footer-nav-item{
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #f0f5f4 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
  }
  .fcr-label{
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    color: #50a8b0 !important;
  }
  .fcr-val{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }
  .footer-social-hint{
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #d8e4e2 !important;
    font-weight: 400 !important;
  }
  .social-pill-link{
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }
  .fbc-title{
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }
  .fbc-sub{
    font-size: 11.5px !important;
    color: #d1dcda !important;
    font-weight: 400 !important;
  }
  .footer-bottom-bar{
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #cad8d6 !important;
    font-weight: 400 !important;
  }
  .footer-credit-link{
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #62c2cb !important;
  }

  /* Sticky Bottom Mobile Bar */
  .mobile-bar a{
    font-size: 11.5px !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    color: #060e0d !important;
  }
}

/* Extra Tweaks for Small Mobile Screens (<480px) */
@media (max-width: 480px){
  .hero{
    min-height: clamp(540px, 74vh, 600px);
    height: clamp(540px, 74vh, 600px);
  }
  .hero-title{
    font-size: clamp(32px, 8.8vw, 40px) !important;
    line-height: 1.0 !important;
  }
  .hero-sub{
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .h2{
    font-size: clamp(25px, 7vw, 32px) !important;
  }
  .gallery-head .h2,
  .gallery-heading{
    font-size: clamp(18px, 5.4vw, 24px) !important;
    white-space: nowrap !important;
  }
  .highlights-heading{
    font-size: clamp(13.5px, 4.1vw, 16.5px) !important;
    white-space: nowrap !important;
  }
  .gtab-btn{
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
  .feature-card{
    padding: 16px 12px !important;
  }
  .feature-card span{
    font-size: 13px !important;
  }
  .spec-card{
    padding: 14px 4px !important;
  }
  .spec-body h4{
    font-size: 17px !important;
  }
}

@media (max-width: 360px){
  .gallery-head .h2,
  .gallery-heading{
    font-size: clamp(16px, 5.0vw, 18.5px) !important;
    white-space: nowrap !important;
  }
  .highlights-heading{
    font-size: clamp(11.5px, 3.8vw, 13.5px) !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   PREMIUM BROCHURE DOWNLOAD MODAL (MOBILE NUMBER CAPTURE)
   ============================================================ */
.brochure-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8, 14, 13, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.brochure-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.brochure-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(155deg, #182321 0%, #0d1514 100%);
  border: 1px solid rgba(80, 168, 176, 0.32);
  box-shadow: 0 28px 70px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 34px 30px 26px;
  color: #f2f1ea;
  text-align: center;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
}
.brochure-modal-overlay.open .brochure-modal-card {
  transform: scale(1) translateY(0);
}
.brochure-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.brochure-modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: rotate(90deg);
}
.brochure-modal-badge {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 122, 130, 0.4) 0%, rgba(80, 168, 176, 0.15) 100%);
  border: 1px solid rgba(80, 168, 176, 0.45);
  color: #7fd1d6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(18, 122, 130, 0.45);
}
.brochure-modal-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 8px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.brochure-modal-desc {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 13.5px;
  color: #aab4b0;
  line-height: 1.5;
  margin: 0 0 20px;
}
.brochure-input-group {
  display: flex;
  align-items: stretch;
  background: rgba(8, 14, 13, 0.7);
  border: 1.5px solid rgba(80, 168, 176, 0.32);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.brochure-input-group:focus-within {
  border-color: #50a8b0;
  box-shadow: 0 0 0 3px rgba(80, 168, 176, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.brochure-input-group.has-error {
  border-color: #ff5c5c !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.22) !important;
}
.brochure-input-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(80, 168, 176, 0.25);
  color: #e2e8f0;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}
.brochure-phone-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 14px;
  color: #ffffff;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}
.brochure-phone-input::placeholder {
  color: rgba(170, 180, 176, 0.45);
  font-weight: 400;
  letter-spacing: normal;
}
.brochure-field-hint {
  font-size: 11.5px;
  color: #8c9996;
  text-align: left;
  margin: 6px 4px 18px;
  line-height: 1.4;
  min-height: 16px;
  transition: color 0.2s ease;
}
.brochure-field-hint.error {
  color: #ff7878;
  font-weight: 500;
}
.brochure-field-hint.success {
  color: #6ee7b7;
  font-weight: 500;
}
.brochure-modal-alert {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.45;
  text-align: left;
}
.brochure-modal-alert.error {
  background: rgba(255, 82, 82, 0.15);
  border: 1px solid rgba(255, 82, 82, 0.35);
  color: #ff9e9e;
}
.brochure-modal-alert.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.brochure-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #127a82 0%, #1d828a 50%, #3ca0a8 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 24px -6px rgba(18, 122, 130, 0.5);
}
.brochure-submit-btn:hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow: 0 14px 28px -6px rgba(29, 130, 138, 0.65);
  background: linear-gradient(135deg, #158b94 0%, #2398a2 50%, #4cb1b9 100%);
}
.brochure-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: br-spin 0.8s linear infinite;
}
@keyframes br-spin {
  to { transform: rotate(360deg); }
}
.brochure-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 11.5px;
  color: #8c9996;
}
@media (max-width: 480px) {
  .brochure-modal-card {
    padding: 28px 20px 22px;
    border-radius: 16px;
  }
  .brochure-modal-title {
    font-size: 22px;
  }
  .brochure-modal-desc {
    font-size: 13px;
  }
}