/* Photomane Spatial UI — site-wide */
:root{
  --spatial-radius:28px;
  --spatial-radius-sm:18px;
  --spatial-glass:rgba(255,255,255,.14);
  --spatial-glass-strong:rgba(255,255,255,.22);
  --spatial-stroke:rgba(255,255,255,.32);
  --spatial-stroke-light:rgba(33,29,22,.1);
  --spatial-ink:#f7f4ec;
  --spatial-ink-dim:rgba(247,244,236,.78);
}

/* Header — floating glass */
#site-header{
  background:transparent;
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 40px -28px rgba(33,29,22,.35);
}

/* ——— Buttons (all pages) ——— */
.btn{
  border-radius:999px;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 28px -16px rgba(0,0,0,.35);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 16px 34px -14px rgba(0,0,0,.4);
}
.btn-primary{
  background:rgba(138,107,44,.58);
  border:1px solid rgba(207,168,79,.55);
  color:#fff;
}
.btn-primary:hover{
  background:rgba(138,107,44,.78);
  border-color:rgba(207,168,79,.8);
  color:#fff;
}
.btn-ghost{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34);
  color:var(--hero-ink);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-ghost.on-light{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(33,29,22,.1);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 28px -18px rgba(33,29,22,.25);
}
.btn-ghost.on-light:hover{
  background:rgba(255,255,255,.82);
  border-color:var(--gold-deep);
  color:var(--gold-deep);
}
.cta-band .btn-primary{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  margin-top:2.2rem;
}
.cta-band .btn-primary:hover{
  background:rgba(255,255,255,.3);
  border-color:#fff;
  color:#fff;
}

/* ——— Home hero: classic (no spatial glass) ——— */
.hero .hero-bg::after{
  background:
    radial-gradient(ellipse at 30% 70%,rgba(207,168,79,.08),transparent 45%),
    linear-gradient(180deg,rgba(12,10,7,.15) 0%,rgba(12,10,7,.25) 40%,rgba(12,10,7,.65) 100%);
}

.spatial-field{
  position:relative;
  z-index:3;
  width:min(100%,720px);
  transform-style:preserve-3d;
}
.spatial-window{
  position:relative;
  padding:clamp(1.35rem,3.5vw,2.35rem);
  border-radius:var(--spatial-radius);
  background:
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 42%,rgba(255,255,255,.1));
  border:1px solid var(--spatial-stroke);
  backdrop-filter:blur(28px) saturate(1.45);
  -webkit-backdrop-filter:blur(28px) saturate(1.45);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06) inset,
    inset 0 1px 0 rgba(255,255,255,.35);
  color:var(--spatial-ink);
  overflow:hidden;
  transform:translateZ(40px);
}
.spatial-window::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% -10%,rgba(255,255,255,.38),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%);
}
.spatial-window::after{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  pointer-events:none;
}
.spatial-window > *{position:relative;z-index:1;}

/* ——— Interior page heroes ——— */
.page-hero.page-hero--spatial{
  min-height:56vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:
    calc(var(--header-offset) + var(--safe-top) + 1rem)
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, 4vw)
    max(1.25rem, env(safe-area-inset-left));
  perspective:1200px;
}
.page-hero--spatial .page-hero-bg{inset:-3%;}
.page-hero--spatial .page-hero-bg img{
  transform:scale(1.05);
  filter:grayscale(.15) brightness(.5) contrast(1.06) saturate(.9);
}
.page-hero--spatial .page-hero-bg::after{
  background:
    radial-gradient(ellipse at 70% 30%,rgba(207,168,79,.12),transparent 40%),
    linear-gradient(180deg,rgba(12,10,7,.25) 0%,rgba(12,10,7,.45) 45%,rgba(12,10,7,.78) 100%);
}
.page-hero--spatial .spatial-field{
  width:min(100%,760px);
}
.page-hero--spatial .spatial-window{
  padding:clamp(1.2rem,3vw,2rem);
}
.page-hero--spatial .crumb{
  position:static;
  z-index:1;
  padding:0;
  margin:0 0 .9rem;
  color:rgba(247,244,236,.65);
}
.page-hero--spatial .crumb a{color:var(--gold-bright);}
.page-hero--spatial .page-hero-content{
  position:static;
  z-index:1;
  padding:0;
  color:var(--spatial-ink);
}
.page-hero--spatial .page-hero-content .eyebrow{color:rgba(247,244,236,.72);}
.page-hero--spatial .page-hero-content h1{
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.25);
}
.page-hero--spatial .page-hero-content p{
  color:var(--spatial-ink-dim);
  font-weight:400;
}

/* ——— Surfaces / cards ——— */
.t-card,
.glass-card,
.pkg,
.service-package,
.contact-sheet,
.filter-btn,
.gallery-album-back,
.service-row-toggle,
.faq-item,
.info-block,
.booking-step,
.booking-selection-chip{
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
}
.t-card{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--spatial-radius-sm);
  box-shadow:
    0 24px 48px -30px rgba(33,29,22,.28),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-card{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  box-shadow:
    0 28px 56px -34px rgba(33,29,22,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.pkg,
.service-package{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(33,29,22,.1);
  border-radius:16px;
}
.pkg.selected,
.service-package.selected{
  background:var(--gold-deep);
  border-color:var(--gold-deep);
}
.filter-btn{
  background:rgba(255,255,255,.55);
  border-radius:999px;
  border:1px solid rgba(33,29,22,.1);
}
.filter-btn.active{
  background:var(--gold-deep);
  border-color:var(--gold-deep);
  color:#fff;
}
.service-row-toggle{
  border-radius:14px;
  background:rgba(255,255,255,.4);
}
.service-item.open .service-row-toggle{
  background:rgba(255,255,255,.72);
}
.faq-item{
  border-radius:14px;
  padding-left:.85rem;
  padding-right:.85rem;
  margin-bottom:.35rem;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(33,29,22,.06);
}
.booking-step{
  background:rgba(255,255,255,.5);
  border-radius:999px;
}
.booking-step.is-active{
  background:rgba(255,255,255,.82);
}
.contact-sheet{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(33,29,22,.08);
  border-radius:18px;
  padding:1rem;
}
.gallery-album-back{
  background:rgba(255,255,255,.55);
  border-radius:999px;
  border:1px solid rgba(33,29,22,.1);
}
.marquee{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.cta-band--image .wrap{
  max-width:720px;
  margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.2rem);
  border-radius:var(--spatial-radius);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:
    0 30px 60px -28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}
footer{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#mobile-menu{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
}
.whatsapp-float{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.25);
}

/* Light-section spatial panels */
.alt-bg{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(207,168,79,.06),transparent 40%),
    #faf9f6;
}
.service-preview-copy,
.section-head{
  position:relative;
}

@media (max-width:700px){
  .spatial-window{border-radius:22px;padding:1.2rem 1.1rem 1.3rem;}
  .page-hero.page-hero--spatial{min-height:48svh;}
  .page-hero--spatial .page-hero-content h1{font-size:clamp(1.7rem,7.5vw,2.3rem);}
  .cta-band--image .wrap{border-radius:20px;}
}

@media (prefers-reduced-motion:reduce){
  .spatial-window{transform:none!important;}
  .btn:hover{transform:none;}
}

@media (max-width:860px),(pointer:coarse){
  .spatial-window,
  .btn,
  .t-card,
  .glass-card,
  .filter-btn,
  .booking-step,
  .cta-band--image .wrap,
  #site-header.scrolled,
  footer,
  #mobile-menu{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}

/* Book CTA in nav */
.nav-cta{
  border:1px solid rgba(207,168,79,.55)!important;
  padding:9px 20px!important;
  border-radius:999px!important;
  background:rgba(138,107,44,.48)!important;
  color:#fff!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
#site-header.scrolled .nav-cta{
  background:rgba(138,107,44,.62)!important;
  color:#fff!important;
}
.nav-cta:hover{
  background:rgba(138,107,44,.8)!important;
  color:#fff!important;
}

/* Coming soon page spatial accents */
body.cs-page .cs-content{
  align-items:center;
}
body.cs-page .cs-spatial-panel{
  width:min(100%,560px);
  padding:clamp(1.2rem,3vw,1.8rem);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:
    0 30px 70px -34px rgba(33,29,22,.28),
    inset 0 1px 0 rgba(255,255,255,.8);
  text-align:center;
}
body.cs-page .cs-spatial-panel .cs-about{
  text-align:center;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
body.cs-page .cs-btn{
  border-radius:999px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
body.cs-page .cs-btn--primary{
  background:rgba(138,107,44,.62);
  border-color:rgba(207,168,79,.55);
}
body.cs-page .cs-btn--ghost{
  background:rgba(255,255,255,.45);
  border-color:rgba(33,29,22,.12);
}
body.cs-page .cs-cd{
  border-radius:16px;
}