/* HomeInterior owner map: shared rules for reference/standardized project pages. Keep page-local exceptions out of this file. */

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

/* hi-header-footer reset (from project-1.html) */
[data-hi-call].hi-btn{ transition: background .35s ease, box-shadow .35s ease, color .3s ease, border-color .3s ease !important; }
.hi-btn:hover,
.hi-btn-ghost:hover {
  background: var(--hi-accent) !important;
  color: #222 !important;
  border-color: var(--hi-accent) !important;
  box-shadow: 0 10px 24px rgba(191,169,122,.35);
}:root {
  --hi-bg: transparent;
  --hi-text: #ffffff;
  --hi-accent: #BFA97A;
  --hi-shadow: rgba(0,0,0,.25);
  --hi-border-neutral: rgba(255,255,255,0.32);
  --hi-border-neutral-hover: rgba(255,255,255,0.46);

}
.hi-btn{ background: transparent; border:1px solid var(--hi-accent); color:#fff; font-weight:800; padding:12px 16px; border-radius:14px; cursor:pointer; transition: transform .15s, box-shadow .25s, background .2s, color .2s; box-shadow:none; white-space:nowrap; }.hi-btn:hover{ background: var(--hi-accent); color:#222; box-shadow: 0 10px 24px rgba(191,169,122,.35); }
.hi-modal-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:10000; opacity:0; transition: opacity .25s ease; }.hi-modal-backdrop.open{ display:flex; opacity:1; }.hi-modal{ width: min(520px, 92vw); background: #222; color:#fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 24px; transform: translateY(10px) scale(.98); transition: transform .25s ease; }.hi-modal-backdrop.open .hi-modal{ transform: translateY(0) scale(1); }.hi-modal h3{ margin:0 0 12px; font-size:22px; }.hi-modal p{ margin:0 0 16px; opacity:.8; }.hi-btn-ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px 14px; cursor:pointer; }.hi-toast{ position: fixed; left:50%; bottom:24px; transform: translateX(-50%); background:#222; color:#fff; border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius:12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:10001; }.hi-toast.show{ opacity:1; }button:hover:not(.pswp__button),
.hi-btn:hover,
.hi-btn-ghost:hover,

.hi-actions .hi-btn:hover,
.hi-actions .hi-btn-ghost:hover {
  background: var(--hi-accent) !important;
  color: #222 !important;
  border-color: var(--hi-accent) !important;
  box-shadow: 0 10px 24px rgba(191,169,122,.35);
  transition: all .25s ease !important;
}.hi-btn{
  display: inline-block;
  border: 1px solid #BFA97A;
  border-radius: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: all 0.35s ease;
  box-shadow: none;
  text-shadow: none;
}.hi-btn:hover{
  background: #BFA97A;
  color: #000;
  border-color: #BFA97A;
  text-shadow: 0 0 10px rgba(191,169,122,0.9), 0 0 22px rgba(191,169,122,0.75);
  box-shadow: 0 0 18px rgba(191,169,122,0.6), 0 0 36px rgba(191,169,122,0.4);
  transform: translateY(-1px);
}.hi-btn{
  border-radius: 12px;
}[data-hi-call],
[data-hi-call].hi-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;          
  padding-block: var(--hi-hdr-btn-py, 10px) !important;     
  border-radius: 12px !important;     
  box-sizing: border-box !important;
}[data-hi-call]:hover,
[data-hi-call].hi-btn:hover{
  background: #BFA97A !important;
  color: #000 !important;
  border-color: #BFA97A !important;
  box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important;
  transform: translateY(-1px);
}:root{
  --hi-bg:#0f0f10;
  --hi-surface:#171718;
  --hi-text:#E8E3D4;
  --hi-text-dim:#CFC8B5;
  --hi-gold:#BFA97A;
  --hi-gold-bright:#CFB88C;
}body.project-hero-fullscreen-page.header-visible #hero::before{
  opacity:1;
}@media (max-width: 900px){
body.project-hero-fullscreen-page.header-visible #hero::before{
    background: linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(0,0,0,.82) 100%) !important;
  }
}










@media (min-width: 901px){
body.project-hero-fullscreen-page.header-visible #hero::before{
    background: linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(0,0,0,.82) 100%) !important;
  }
}

:root{--project-page-bg:#0a0a0a;--bg:var(--project-page-bg);--hi-bg:var(--project-page-bg);}








@media (max-width: 900px){
:root{
    
    --hi-mob-ctl: clamp(36px, 10vw, 42px);
    --hi-mob-ctl-r: clamp(10px, 3vw, 12px);
    --hi-mob-gap: clamp(8px, 2.8vw, 12px);
    --hi-mob-pad-x: clamp(10px, 3.2vw, 12px);
    --hi-mob-pad-y: clamp(8px, 2.4vw, 10px);
    --hi-mob-logo-h: 34px;
  }
}


@media (max-width: 414px){
:root{ --hi-mob-logo-h: clamp(30px, 8vw, 32px) !important; }
}



/* Match project pages background tone to index */
  :root{
    --project-page-bg:#030303;
    --bg:#030303;
    --hi-bg:#030303;
    --hi-surface:#030303;
  }
  html, body{ background:#030303 !important; }
  body{ background:#030303 !important; }
  main, .hi-main{ background: transparent !important; }
  section{ background-color:#030303 !important; }

/* V2: static room nav at point A + floating room nav appears after passing point A */
/* 1) Lift the floorplan by 20px */
#floorplan .project-floorplan-media{ margin-top: -20px !important; }

/* 2) Static slot between floorplan and the first room title */
.project-roomnav-static-slot{
  padding: 18px 0 18px;
  display: flex;
  justify-content: center;
}

/* Static nav: in-flow, centered */
.project-roomnav.project-roomnav--static{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}

/* Floating nav: JS controls A/FIXED/B; we only animate opacity */
.project-roomnav.project-roomnav--floating{
  transition: opacity .22s ease;
  will-change: top, opacity;
}

/* Prevent static nav from being visible under the fixed header */
.project-roomnav.project-roomnav--static{ transition: opacity .12s ease; }
.project-roomnav.project-roomnav--static.is-under-header{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tune: point A static nav position + room titles (match ref screenshot 2) */

/* Move ONLY the static nav downward without moving plan or shifting album start */
@media (min-width: 901px){
  .project-roomnav-static-slot{
    padding-top: calc(18px + 50px) !important;
    margin-bottom: -50px !important;
  }
}
@media (max-width: 900px){
  .project-roomnav-static-slot{
    padding-top: calc(18px + 26px) !important;
    margin-bottom: -20px !important;
  }
}

/* Desktop: static nav must be perfectly centered (fix "shift left") */
@media (min-width: 901px){
  .project-roomnav.project-roomnav--static{
    width: fit-content !important;
    max-width: calc(100% - 64px) !important;
    overflow: visible !important;
    justify-content: center !important;
  }
}

/* Mobile/tablet: keep the same pill + swipe behavior as the floating nav */
@media (max-width: 900px){
  .project-roomnav.project-roomnav--static{
    width: calc(100% - 64px) !important;
    max-width: 520px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    touch-action: pan-x;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .project-roomnav.project-roomnav--static::-webkit-scrollbar{ display:none; }
}

/* Room titles a bit larger */
@media (min-width: 901px){
  .project-album-roomtitle{ font-size: 24px !important; }
}
@media (max-width: 900px){
  .project-album-roomtitle{ font-size: clamp(18px, 5.1vw, 22px) !important; }
}