/* ==== combined from index.html <style> blocks ==== */

  :root{
    --forest:#0b3d2c;
    --emerald:#1f8a5f;
    --emerald-soft:#2faf78;
    --teal:#0f6e63;
    --cream:#faf6ec;
    --cream-card:#ffffff;
    --sand:#efe6cf;
    --gold:#c9962f;
    --gold-light:#e0b65a;
    --ink:#15291f;
    --muted:#5b6f63;
    --available:#22a06b;
    --booked:#d9534f;
    --none:#9aa39c;
    --shadow:0 6px 20px rgba(11,61,44,0.12);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:var(--cream);
    color:var(--ink);
    min-height:100vh;
  }
  header{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:30px 16px 20px;
    text-align:center;
    background:var(--forest);
    border-bottom:4px solid var(--gold);
  }
  header img{
    width:132px;
    height:132px;
    border-radius:50%;
    box-shadow:0 0 0 4px var(--gold), 0 8px 24px rgba(0,0,0,0.35);
  }
  header h1{
    margin:20px 0 10px;
    color:var(--gold-light);
    letter-spacing:1.5px;
    font-size:1.9rem;
    text-shadow:0 2px 6px rgba(0,0,0,0.3);
  }
  header p{
    margin:0 auto;
    max-width:560px;
    color:rgba(255,255,255,0.82);
    font-size:1rem;
    font-weight:400;
    line-height:1.65;
    letter-spacing:0.2px;
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  nav{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    padding:16px 16px 22px;
    background:var(--forest);
  }
  nav button{
    background:rgba(255,255,255,0.08);
    border:1px solid var(--gold);
    color:var(--gold-light);
    padding:9px 18px;
    border-radius:30px;
    cursor:pointer;
    font-size:0.9rem;
    transition:0.2s;
  }
  nav button:hover, nav button.active{
    background:var(--gold);
    color:var(--forest);
    font-weight:700;
  }
  section{
    max-width:1000px;
    margin:0 auto;
    padding:26px 18px 40px;
    display:none;
  }
  section.active{display:block;}
  .section-title{
    color:var(--forest);
    font-size:1.35rem;
    margin-bottom:16px;
    border-left:4px solid var(--gold);
    padding-left:10px;
    font-weight:700;
  }
  .units-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:18px;
  }
  .unit-card{
    background:var(--cream-card);
    border:1px solid var(--sand);
    border-top:4px solid var(--emerald);
    border-radius:14px;
    padding:18px;
    box-shadow:var(--shadow);
  }
  .unit-card h3{
    margin:0 0 12px;
    color:var(--forest);
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .room-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 0;
    border-bottom:1px dashed var(--sand);
    font-size:0.92rem;
  }
  .room-row:last-child{border-bottom:none;}
  .badge{
    padding:4px 13px;
    border-radius:20px;
    font-size:0.76rem;
    font-weight:700;
    color:#fff;
    cursor:default;
    user-select:none;
    letter-spacing:0.3px;
  }
  .badge.available{background:var(--available);}
  .badge.booked{background:var(--booked);}
  .badge.none{background:var(--none);}
  .badge.soon{background:#f39c12;}
  .badge.editable{cursor:pointer; box-shadow:0 0 0 2px rgba(201,150,47,0.55) inset;}
  .badge.editable:hover{transform:scale(1.06);}
  .room-row.is-none{opacity:0.55;}

  .unit-summary-strip{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-bottom:8px;
  }
  .mini-badge{
    font-size:0.68rem;
    font-weight:700;
    padding:3px 9px;
    border-radius:10px;
    color:#fff;
    letter-spacing:0.2px;
    white-space:nowrap;
  }
  .mini-badge.available{background:var(--available);}
  .mini-badge.booked{background:var(--booked);}
  .mini-badge.none{background:var(--none);}
  .mini-badge.soon{background:#f39c12;}
  .unit-toggle-btn{
    margin-left:auto;
    background:none;
    border:1px solid var(--sand);
    color:var(--forest);
    font-size:0.75rem;
    font-weight:700;
    padding:4px 12px;
    border-radius:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:0.2s;
  }
  .unit-toggle-btn:hover{background:var(--sand);}
  .unit-toggle-btn.open{background:var(--forest);color:#fff;border-color:var(--forest);}
  .room-rows-wrap{margin-top:8px;}

  .notice-callout{
    background:var(--cream-card);
    border:1px solid var(--sand);
    border-left:4px solid var(--gold);
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
  }
  .notice-callout-title{
    font-weight:700;
    color:var(--forest);
    font-size:1rem;
    margin-bottom:8px;
  }
  .notice-callout-link{
    display:inline-block;
    margin-bottom:8px;
    color:var(--teal);
    font-weight:700;
    text-decoration:none;
    word-break:break-all;
  }
  .notice-callout-link:hover{text-decoration:underline;}
  .notice-callout-note{
    color:var(--muted);
    font-size:0.88rem;
    line-height:1.5;
  }
  .notice-callout.compact{padding:12px 16px;margin-bottom:16px;}

  .admin-bar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:18px;
    flex-wrap:wrap;
  }
  .admin-bar input{
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--sand);
    background:#fff;
    color:var(--ink);
    width:160px;
  }
  .admin-bar button, .form-card button{
    padding:10px 18px;
    border-radius:8px;
    border:none;
    background:var(--gold);
    color:var(--forest);
    font-weight:700;
    cursor:pointer;
  }
  .admin-bar button:hover, .form-card button:hover{background:var(--gold-light);}
  .pill{
    padding:5px 13px;
    border-radius:20px;
    font-size:0.8rem;
    background:var(--sand);
    color:var(--forest);
    font-weight:600;
  }

  .form-card{
    background:var(--cream-card);
    border:1px solid var(--sand);
    border-top:4px solid var(--emerald);
    border-radius:14px;
    padding:24px;
    max-width:560px;
    margin:0 auto;
    box-shadow:var(--shadow);
  }
  .form-card label{
    display:block;
    margin:12px 0 5px;
    font-size:0.88rem;
    color:var(--muted);
    font-weight:600;
  }
  .form-card select, .form-card input, .form-card textarea{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid var(--sand);
    background:#fdfbf4;
    color:var(--ink);
    font-size:0.92rem;
  }
  .form-card textarea{resize:vertical; min-height:60px;}
  .form-card button{width:100%; margin-top:18px; font-size:1rem;}
  .form-card label .req{color:var(--booked); margin-left:3px;}
  .form-card select.field-error, .form-card input.field-error, .form-card textarea.field-error{
    border-color:var(--booked) !important;
    box-shadow:0 0 0 3px rgba(217,83,79,0.18);
  }
  .status-msg.error{color:var(--booked);}
  .status-msg.success{color:var(--emerald);}
  .status-msg{
    margin-top:12px;
    font-size:0.85rem;
    color:var(--teal);
    font-weight:600;
  }
  .map-wrap{
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--sand);
    box-shadow:var(--shadow);
  }
  .map-wrap iframe{
    width:100%;
    height:380px;
    border:0;
  }
  .loc-card{background:var(--cream-card);border:1px solid var(--sand);border-top:4px solid var(--gold);border-radius:14px;padding:16px;box-shadow:var(--shadow);}
  .loc-card h3{margin:0 0 10px;color:var(--forest);font-size:1.05rem;}
  .loc-card input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--sand);background:#fdfbf4;font-size:0.85rem;margin-bottom:8px;}
  .loc-card .loc-btn-row{display:flex;gap:8px;flex-wrap:wrap;}
  .loc-card .loc-btn-row button, .loc-card .loc-btn-row a{padding:8px 12px;border-radius:8px;border:1px solid var(--gold);background:#fff;color:var(--forest);font-weight:700;font-size:0.8rem;text-decoration:none;cursor:pointer;text-align:center;}
  .loc-card .loc-btn-row a.primary{background:var(--gold);}
  .loc-card .loc-btn-row button:disabled{opacity:.6;cursor:not-allowed;border-color:var(--sand);color:var(--muted);background:#f4f1e8;}
  .loc-card .loc-status{font-size:0.75rem;color:var(--teal);margin-top:6px;font-weight:600;}
  .loc-card .loc-empty{font-size:0.78rem;color:var(--muted);margin-bottom:8px;}
  .loc-card .map-wrap{margin-top:10px;}
  .loc-card .map-wrap iframe{height:200px;}
  .contact-info{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .contact-info a{
    color:var(--forest);
    text-decoration:none;
    background:var(--cream-card);
    padding:11px 18px;
    border-radius:10px;
    border:1px solid var(--sand);
    border-bottom:3px solid var(--emerald);
    font-weight:600;
    box-shadow:var(--shadow);
  }
  .contact-info a:hover{background:var(--sand);}
  footer{
    text-align:center;
    padding:20px;
    font-size:0.8rem;
    color:#cfe9da;
    background:var(--forest);
  }
  .small-note{
    font-size:0.78rem;
    color:var(--muted);
    margin-top:6px;
  }
  .legend{
    display:flex;
    gap:16px;
    margin-bottom:16px;
    font-size:0.85rem;
    flex-wrap:wrap;
  }
  .legend span{display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:600;}
  .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}

.bed-layout{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bed{padding:8px;border-radius:8px;border:2px solid #ddd;cursor:pointer;font-size:20px}
.bed.free{background:#dcfce7}.bed.occ{background:#fecaca}
.progress{height:8px;background:#eee;border-radius:10px;margin:8px 0}
.progress div{height:100%;background:#1f8a5f;border-radius:10px}
.stats-mini{font-size:.8rem;color:var(--muted);margin-top:6px}
.interest{background:#fff3cd;padding:4px 8px;border-radius:8px;margin-top:6px;font-size:12px;cursor:pointer}


.enquiry-container{margin-top:6px;padding:6px 8px;background:#fff3cd;border-radius:8px;font-size:12px;position:relative;display:inline-block}
.enquiry-tooltip{display:none;position:absolute;left:0;bottom:120%;background:#222;color:#fff;padding:8px;border-radius:8px;min-width:180px;z-index:999}
.enquiry-container:hover .enquiry-tooltip{display:block}
.enquiry-edit-btn{display:none;margin-top:6px;font-size:11px;padding:2px 6px}
.admin-mode .enquiry-edit-btn{display:inline-block}

/* ---------- Preference Questionnaire ---------- */
.pref-card{background:var(--cream-card);border:1px solid var(--sand);border-top:5px solid var(--gold);border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:var(--shadow);}
.pref-title{font-size:1.25rem;font-weight:800;color:var(--forest);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.pref-sub{color:var(--muted);font-size:0.88rem;margin-bottom:18px;}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.pref-field label{display:block;font-size:0.82rem;font-weight:700;color:var(--forest);margin-bottom:6px;line-height:1.3;}
.pref-field input, .pref-field select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--sand);background:#fdfbf4;color:var(--ink);font-size:0.88rem;}
.pref-field input:focus, .pref-field select:focus{outline:2px solid var(--gold-light);}
.pref-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.pref-actions button{padding:12px 22px;border-radius:9px;border:none;background:var(--gold);color:var(--forest);font-weight:700;cursor:pointer;font-size:0.92rem;}
.pref-actions button:hover{background:var(--gold-light);}
.pref-skip{background:transparent!important;border:1px solid var(--sand)!important;color:var(--muted)!important;}
.pref-skip:hover{background:var(--sand)!important;}
.pref-summary-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:linear-gradient(90deg,var(--sand),#fff);border:1px solid var(--sand);border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:0.9rem;font-weight:700;color:var(--forest);box-shadow:var(--shadow);}
.pref-summary-bar button{padding:9px 16px;border-radius:9px;border:1px solid var(--gold);background:#fff;color:var(--forest);font-weight:700;cursor:pointer;white-space:nowrap;}
.pref-summary-bar button:hover{background:var(--sand);}
.pref-admin-item{background:#fff;border:1px solid var(--sand);border-radius:10px;padding:14px;margin-bottom:14px;}
.pref-admin-item .pref-admin-tag{display:inline-block;background:var(--emerald);color:#fff;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;margin-bottom:8px;}
.pref-admin-item label{display:block;font-size:0.8rem;color:var(--muted);font-weight:700;margin:8px 0 4px;}
.pref-admin-item input{width:100%;padding:9px 10px;border-radius:7px;border:1px solid var(--sand);}

/* ---------- Preference Modal (popup presentation for the questionnaire above) ---------- */
.pref-modal-overlay{
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(11,61,44,0.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.35s ease;
}
.pref-modal-overlay.pref-modal-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.pref-modal-overlay .pref-card{
  position:relative;
  width:100%; max-width:620px; max-height:88vh; overflow-y:auto;
  margin:0;
  background:rgba(250,246,236,0.88);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(201,150,47,0.55);
  box-shadow:0 26px 70px rgba(11,61,44,0.5), 0 0 0 1px rgba(201,150,47,0.15) inset;
  transform:scale(0.92) translateY(14px);
  opacity:0;
  transition:transform 0.4s cubic-bezier(.16,1,.3,1), opacity 0.32s ease;
}
.pref-modal-overlay.pref-modal-open .pref-card{
  transform:scale(1) translateY(0);
  opacity:1;
}
.pref-modal-overlay .pref-title{ padding-right:40px; }
.pref-modal-msg{
  background:var(--sand);
  color:var(--teal);
  font-size:0.85rem;
  font-weight:600;
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 18px;
}
.pref-modal-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--sand); background:#fff; color:var(--forest);
  font-size:1.05rem; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  transition:transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.pref-modal-close:hover, .pref-modal-close:focus-visible{ background:var(--gold); color:#fff; transform:rotate(90deg); }
body.pref-modal-active{ overflow:hidden; }
.pref-update-btn{
  padding:9px 16px; border-radius:9px; border:1px solid var(--gold);
  background:#fff; color:var(--forest); font-weight:700; cursor:pointer; font-size:0.85rem;
  white-space:nowrap;
}
.pref-update-btn:hover{ background:var(--gold); color:#fff; }
.filter-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom:15px; padding:12px; background:#fff; border-radius:10px; box-shadow:var(--shadow);
}
@media (max-width:600px){
  .pref-modal-overlay{ padding:12px; }
  .pref-modal-overlay .pref-card{ padding:20px; max-height:92vh; }
  .pref-modal-overlay .pref-grid{ grid-template-columns:1fr; }
  .pref-modal-close{ top:10px; right:10px; }
}
@media (prefers-reduced-motion: reduce){
  .pref-modal-overlay, .pref-modal-overlay .pref-card{ transition:none; }
}


.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ============================================================
   NEW: Premium hospitality landing-flow sections (sc- prefix)
   Additive only — does not touch any existing rule above.
   ============================================================ */
.sc-fade{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.sc-fade.sc-show{opacity:1;transform:translateY(0);}
.sc-lede{max-width:760px;margin:0 auto 22px;text-align:center;color:var(--muted);font-size:1.02rem;line-height:1.7;}
.sc-lede b{color:var(--forest);}
.sc-checklist{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:800px;margin:0 auto 8px;}
.sc-checklist span{background:#fff;border:1px solid var(--sand);border-left:4px solid var(--emerald);border-radius:10px;padding:10px 16px;font-weight:600;color:var(--forest);box-shadow:var(--shadow);}
.sc-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.sc-card{background:var(--cream-card);border:1px solid var(--sand);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;text-align:center;}
.sc-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,61,44,0.18);}
.sc-card .sc-icon{font-size:1.7rem;color:var(--gold);margin-bottom:10px;}
.sc-card h4{margin:0 0 6px;color:var(--forest);font-size:1.02rem;}
.sc-card p{margin:0;color:var(--muted);font-size:0.86rem;line-height:1.5;}
.sc-stay-card{background:linear-gradient(180deg,#fff,var(--cream));border:1px solid var(--sand);border-top:4px solid var(--gold);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease;}
.sc-stay-card:hover{transform:translateY(-5px);}
.sc-stay-photo{height:150px;background:linear-gradient(135deg,var(--emerald),var(--teal));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:rgba(255,255,255,0.9);}
.sc-stay-body{padding:16px;}
.sc-stay-body h4{margin:0 0 8px;color:var(--forest);}
.sc-stay-body p{margin:0 0 14px;color:var(--muted);font-size:0.88rem;line-height:1.55;}
.sc-stay-actions{display:flex;gap:8px;flex-wrap:wrap;}
.sc-stay-actions button, .sc-stay-actions a{flex:1;text-align:center;padding:9px 10px;border-radius:8px;border:none;background:var(--gold);color:var(--forest);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.86rem;}
.sc-stay-actions a.secondary{background:rgba(31,138,95,0.12);color:var(--emerald);border:1px solid var(--emerald);}
.sc-chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.sc-chip{background:#fff;border:1px solid var(--gold);color:var(--forest);border-radius:30px;padding:9px 18px;font-weight:600;font-size:0.88rem;box-shadow:var(--shadow);}
.sc-community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.sc-community-card{background:var(--forest);color:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow);}
.sc-community-card h4{margin:0 0 6px;color:var(--gold-light);}
.sc-community-card p{margin:0;color:rgba(255,255,255,0.82);font-size:0.86rem;line-height:1.55;}
.sc-vacancy-box{max-width:640px;margin:0 auto;background:linear-gradient(135deg,var(--forest),var(--teal));color:#fff;border-radius:18px;padding:32px 26px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--gold);}
.sc-vacancy-box p{margin:8px 0;line-height:1.7;color:rgba(255,255,255,0.92);}
.sc-vacancy-box .sc-icon{font-size:2.2rem;color:var(--gold-light);}
.sc-cta-block{text-align:center;margin:34px 0 6px;}
.sc-cta-block button{background:var(--gold);color:var(--forest);border:none;padding:16px 34px;border-radius:40px;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 8px 24px rgba(201,150,47,0.4);animation:scGoldPulse 2.6s infinite;}
@keyframes scGoldPulse{0%,100%{box-shadow:0 8px 24px rgba(201,150,47,0.4);}50%{box-shadow:0 8px 30px rgba(201,150,47,0.7);}}
.sc-home-hero{text-align:center;padding:6px 0 10px;}
.sc-home-hero h2{color:var(--forest);font-size:1.5rem;margin:0 0 8px;}
.sc-hero-btn-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;}
.sc-hero-btn-grid button, .sc-hero-btn-grid a{padding:12px 20px;border-radius:30px;border:none;background:var(--emerald);color:#fff;font-weight:700;cursor:pointer;font-size:0.9rem;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease,filter .2s ease;}
.sc-hero-btn-grid button:hover, .sc-hero-btn-grid a:hover{transform:translateY(-3px);filter:brightness(1.08);}
.sc-hero-btn-grid .sc-primary{background:var(--gold);color:var(--forest);}
.sc-breadcrumb{max-width:1000px;margin:0 auto 10px;padding:0 18px;font-size:0.84rem;color:var(--muted);}
.sc-breadcrumb b{color:var(--forest);}
.sc-search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.sc-search-bar input{flex:1;min-width:180px;padding:10px 14px;border-radius:30px;border:1px solid var(--sand);background:#fff;font-size:0.9rem;}
@media(max-width:640px){.sc-home-hero h2{font-size:1.25rem;}}

/* 1. Premium Gold Shimmer for Header Text */
header h1 {
  background: linear-gradient(90deg, var(--gold-light) 0%, #ffffff 50%, var(--gold-light) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 4s linear infinite;
  transition: transform 0.3s ease;
}

@keyframes shine {
  to { background-position: 200% center; }
}

header h1:hover {
  transform: scale(1.05);
}

/* 2. Magnetic Focus Glow on Cards */
.unit-card, .pref-card, .form-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.unit-card::before, .pref-card::before, .form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(400px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(201, 150, 47, 0.12), transparent 40%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.unit-card:hover::before, .pref-card:hover::before, .form-card:hover::before {
  opacity: 1;
}

/* 3. Action Success Button State */
.btn-success-anim {
  background: var(--available) !important;
  color: white !important;
  transform: scale(0.95) !important;
  box-shadow: 0 0 15px rgba(34, 160, 107, 0.5) !important;
  pointer-events: none;
}

/* 4. Elastic 3D Bed Flip (Admin Mode) */
@keyframes bedFlip {
  0% { transform: perspective(400px) rotateY(0deg) scale(1); }
  50% { transform: perspective(400px) rotateY(180deg) scale(1.3); background: var(--gold); }
  100% { transform: perspective(400px) rotateY(360deg) scale(1); }
}

.bed.tapped {
  animation: bedFlip 0.5s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}

/* Smooth Tab Entrance */
section.active {
  animation: smoothEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothEnter {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* Smooth scrolling + nicer selection color */
html{ scroll-behavior: smooth; }
::selection{ background: var(--gold); color: var(--forest); }

/* ---- Sticky nav gains depth once page is scrolled ---- */
nav{ position: sticky; top: 0; z-index: 500; transition: box-shadow .3s ease, padding .25s ease; }
nav.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding-top: 10px; padding-bottom: 14px; }

/* ---- Button ripple ---- */
button, .loc-btn-row a{ position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .25s ease, filter .2s ease; }
button:active{ transform: scale(0.96); }
button:hover{ filter: brightness(1.06); box-shadow: 0 4px 14px rgba(201,150,47,0.35); }
.ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.55); pointer-events: none;
  animation: rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform: scale(2.6); opacity: 0; } }

/* ---- Inputs: focus glow ---- */
.form-card input, .form-card select, .form-card textarea, .loc-card input, .admin-bar input{
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.loc-card input:focus, .admin-bar input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,150,47,0.18);
  transform: translateY(-1px);
}

/* ---- Badges: gentle pop when status changes + soft pulse for "soon" ---- */
.badge{ transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.badge.available{ animation: badgeIn .35s ease; }
.badge.soon{ animation: softPulse 1.8s ease-in-out infinite; }
@keyframes badgeIn{ 0%{ transform: scale(0.5); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
@keyframes softPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(243,156,18,0.5);} 50%{ box-shadow: 0 0 0 7px rgba(243,156,18,0);} }

/* ---- Enquiry fire count: tiny bounce ---- */
.enquiry-container{ transition: transform .2s ease; }
.enquiry-container:hover{ transform: scale(1.05); }

/* ---- Staggered card entrance on render ---- */
.reveal-stagger{
  animation: fadeInUp .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
@keyframes fadeInUp{
  0%{ opacity: 0; transform: translateY(22px) scale(0.97); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.unit-card, .loc-card{ transition: transform .25s ease, box-shadow .25s ease; }
.unit-card:hover, .loc-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,61,44,0.18); }

/* ---- Skeleton loading cards (shown before first data render) ---- */
.skeleton-card{
  height: 210px; border-radius: 14px;
  background: linear-gradient(100deg, var(--sand) 30%, #f7f0dd 50%, var(--sand) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--sand);
}
@keyframes shimmer{ 0%{ background-position: 140% 0; } 100%{ background-position: -40% 0; } }

/* ---- Save/status toast: slide + fade instead of plain opacity ---- */
#saveStatusToast{
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1) !important;
}
#saveStatusToast[style*="opacity: 1"]{ transform: translateY(0); }

/* ---- Copy feedback flash ---- */
.copy-flash{ animation: copyFlash .5s ease; }
@keyframes copyFlash{ 0%{ background: var(--available) !important; color:#fff !important;} 100%{ } }

/* ---- UPI QR: gentle glow to draw the eye ---- */
#upiQrImg{ transition: transform .25s ease, box-shadow .3s ease; animation: qrGlow 2.6s ease-in-out infinite; }
#upiQrImg:hover{ transform: scale(1.04); }
@keyframes qrGlow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(31,138,95,0.0), var(--shadow); }
  50%{ box-shadow: 0 0 0 8px rgba(31,138,95,0.12), var(--shadow); }
}

/* ---- Razorpay button: shimmering border to invite the tap ---- */
#razorpayBtn{ position: relative; }
#razorpayBtn::after{
  content:''; position:absolute; inset:-2px; border-radius:10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  background-size: 200% 100%; animation: shimmerBorder 2.5s linear infinite; pointer-events:none;
}
@keyframes shimmerBorder{ 0%{ background-position: -150% 0; } 100%{ background-position: 150% 0; } }

/* ---- Scroll-to-top button ---- */
#scrollTopBtn{
  position: fixed; right: 18px; bottom: 18px; z-index: 998;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--gold); color: var(--forest); font-size: 1.2rem; font-weight: 900;
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#scrollTopBtn.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#scrollTopBtn:hover{ background: var(--gold-light); transform: translateY(-3px) scale(1.05); }

/* ---- Confetti burst ---- */
.confetti-piece{
  position: fixed; top: -12px; width: 8px; height: 14px; z-index: 9998;
  pointer-events: none; opacity: 0.95; border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

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

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ============================================================
   1. TYPOGRAPHY & FOUNDATION
   ============================================================ */
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   2. SCROLL PROGRESS INDICATOR
   ============================================================ */
#pwScrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--emerald-soft),var(--gold-light));
  z-index:10000; transition:width .1s linear;
  box-shadow:0 0 8px rgba(201,150,47,.6);
}

/* ============================================================
   3. AURORA HERO BACKGROUND + ENTRANCE ANIMATION
   ============================================================ */
header{
  position:relative; overflow:hidden;
  padding-top:56px; padding-bottom:60px;
  background:
    radial-gradient(circle at 18% 20%, #123b2c 0%, transparent 55%),
    radial-gradient(circle at 82% 0%, #0f3d3a 0%, transparent 50%),
    linear-gradient(160deg,#071c14 0%, #0b3d2c 55%, #0a2e22 100%);
}
header > *{ position:relative; z-index:2; }

.pw-aurora{ position:absolute; inset:-20%; pointer-events:none; z-index:0; filter:blur(60px); opacity:.55; }
.pw-aurora span{ position:absolute; border-radius:50%; mix-blend-mode:screen; animation:pwAuroraDrift 22s ease-in-out infinite; }
.pw-aurora span:nth-child(1){ width:420px; height:420px; background:var(--gold); top:-10%; left:0%; animation-duration:24s; }
.pw-aurora span:nth-child(2){ width:360px; height:360px; background:var(--teal); top:8%; right:-5%; animation-duration:28s; animation-delay:-6s; }
.pw-aurora span:nth-child(3){ width:300px; height:300px; background:var(--emerald-soft); bottom:-18%; left:30%; animation-duration:20s; animation-delay:-3s; }
@keyframes pwAuroraDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.15); }
  66%{ transform:translate(-30px,20px) scale(.9); }
}

.pw-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pw-particle{ position:absolute; bottom:-10px; border-radius:50%; background:rgba(224,182,90,.55); animation:pwFloatUp linear infinite; }
@keyframes pwFloatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-620px) translateX(var(--drift,20px)); opacity:0; }
}

.pw-float-icon{ position:absolute; z-index:1; opacity:.16; font-size:1.6rem; animation:pwIconFloat 8s ease-in-out infinite; pointer-events:none; }
@keyframes pwIconFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(8deg); } }

/* Hero entrance choreography, plus a premium, always-on logo animation:
   a gentle float + subtle 100%->103% scale + a soft golden glow pulse.
   Only `transform` and `opacity` are animated (compositor-friendly,
   no layout reflow) — the logo never rotates, spins, bounces or distorts. */
.pw-logo-wrap{ position:relative; display:inline-block; line-height:0; }
.pw-logo-wrap::before{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,182,90,.65), rgba(224,182,90,0) 70%);
  opacity:.35; z-index:0; pointer-events:none;
  animation:pwLogoGlow 5.6s ease-in-out infinite;
}
.pw-logo-wrap img{ position:relative; z-index:1; }
header img{
  opacity:0;
  animation:pwFadeIn .8s ease forwards .05s, pwLogoFloat 5.6s ease-in-out infinite .85s;
}
header h1{ opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .25s forwards, shine 4s linear infinite 1.2s; }
header p{ opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .4s forwards; }
@keyframes pwFadeIn{ to{ opacity:1; } }
@keyframes pwHeroIn{
  0%{ opacity:0; transform:translateY(24px) scale(.96); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes pwLogoFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-8px) scale(1.03); }
}
@keyframes pwLogoGlow{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.75; transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  header img{ animation:pwFadeIn .8s ease forwards .05s; }
  .pw-logo-wrap::before{ animation:none; opacity:.45; }
}

/* ============================================================
   3b. PREMIUM ANIMATED STATISTIC CARDS
   Replaces the old inline hero stats row with a dedicated,
   glassmorphic 5-card statistics section that sits below the
   header divider, on the cream body background.
   ============================================================ */
#pwStatsSection{
  max-width:1120px;
  margin:-34px auto 34px;
  padding:34px 18px 0;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  isolation:isolate;
}
/* Tablet: 3 cards on the first row, 2 on the second (equal spacing/alignment) */
@media (max-width:900px) and (min-width:601px){
  #pwStatsSection{ grid-template-columns:repeat(6,1fr); gap:16px; }
  #pwStatsSection .pw-stat-card:nth-child(-n+3){ grid-column:span 2; }
  #pwStatsSection .pw-stat-card:nth-child(n+4){ grid-column:span 3; }
}
/* Mobile: one card per row */
@media (max-width:600px){
  #pwStatsSection{ grid-template-columns:1fr; margin-top:-20px; gap:14px; }
  #pwStatsSection .pw-stat-card{ grid-column:auto; }
}

/* Attractive decorative background: soft glowing color blobs +
   a faint dot grid, sitting behind the cards only (not the whole page) */
.pw-stats-bg{
  position:absolute; inset:-40px -12px -20px; z-index:-1;
  border-radius:28px; overflow:hidden; pointer-events:none;
}
.pw-stats-bg::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(11,61,44,0.10) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
}
.pw-stats-blob{
  position:absolute; border-radius:50%; filter:blur(46px);
  opacity:.35; mix-blend-mode:multiply;
  animation:pwStatsBlobDrift 16s ease-in-out infinite;
}
.pw-stats-blob:nth-child(2){ width:210px; height:210px; background:var(--gold-light); top:-30px; left:-20px; animation-duration:18s; }
.pw-stats-blob:nth-child(3){ width:240px; height:240px; background:var(--emerald-soft); top:10px; right:-40px; animation-duration:21s; animation-delay:-4s; }
.pw-stats-blob:nth-child(4){ width:190px; height:190px; background:var(--gold); bottom:-60px; left:38%; animation-duration:19s; animation-delay:-8s; }
@keyframes pwStatsBlobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px,-14px) scale(1.12); }
}
.pw-stats-dot{
  position:absolute; bottom:-6px; border-radius:50%;
  background:rgba(201,150,47,.5);
  animation:pwStatsDotRise linear infinite;
}
@keyframes pwStatsDotRise{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.8; }
  85%{ opacity:.3; }
  100%{ transform:translateY(-230px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pw-stats-blob, .pw-stats-dot{ animation:none; }
}

.pw-stat-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:23px 16px 21px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(11,61,44,0.25), 0 2px 8px rgba(11,61,44,0.08);
  border:1px solid rgba(255,255,255,0.6);
  isolation:isolate;
  overflow:hidden;
  opacity:0; transform:translateY(24px);
  animation:pwStatCardIn .7s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  will-change:transform;
  height:100%;
}
.pw-stat-card:nth-child(1){ animation-delay:.05s; }
.pw-stat-card:nth-child(2){ animation-delay:.15s; }
.pw-stat-card:nth-child(3){ animation-delay:.25s; }
.pw-stat-card:nth-child(4){ animation-delay:.35s; }
.pw-stat-card:nth-child(5){ animation-delay:.45s; }
@keyframes pwStatCardIn{ to{ opacity:1; transform:translateY(0); } }

/* Gradient border ring, drawn with a padding-box/border-box mask so the
   card content and backdrop-blur above stay untouched. The gradient
   itself slowly shifts for a subtle "living" shimmer. */
.pw-stat-card::before{
  content:''; position:absolute; inset:0; border-radius:18px; padding:1.5px;
  background:linear-gradient(135deg, var(--gold), var(--emerald-soft), var(--gold-light), var(--gold));
  background-size:260% 260%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75; z-index:-1; pointer-events:none;
  animation:pwStatBorderShift 7s ease-in-out infinite;
}
@keyframes pwStatBorderShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* Diagonal shine that sweeps across the card on hover */
.pw-stat-card::after{
  content:''; position:absolute; top:-60%; left:-30%; width:40%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(20deg) translateX(-220%);
  pointer-events:none; z-index:2;
}
.pw-stat-card:hover::after{
  transform:rotate(20deg) translateX(420%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

.pw-stat-card:hover, .pw-stat-card:focus-within{
  transform:translateY(-10px) scale(1.035);
  box-shadow:0 22px 44px -14px rgba(11,61,44,0.32), 0 6px 16px rgba(201,150,47,0.18);
}

.pw-stat-icon{
  position:relative;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--forest), var(--teal));
  color:var(--gold-light);
  font-size:1.15rem;
  margin-bottom:11px;
  box-shadow:0 8px 18px -6px rgba(11,61,44,0.45);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.pw-stat-icon::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--gold-light); opacity:0; z-index:-1;
}
.pw-stat-card:hover .pw-stat-icon{ transform:rotate(-10deg) scale(1.08); }
.pw-stat-card:hover .pw-stat-icon::before{
  animation:pwStatPulseRing 1.1s cubic-bezier(.16,1,.3,1);
}
@keyframes pwStatPulseRing{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.55); }
}

.pw-stat-number{
  font-size:clamp(1.55rem,4.1vw,2.05rem);
  font-weight:800;
  color:var(--forest);
  line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:2px;
}
.pw-stat-number .pw-stat-plus{ font-size:0.7em; color:var(--gold); font-weight:800; }

.pw-stat-title{
  margin-top:7px;
  font-size:.85rem;
  font-weight:700;
  color:var(--forest);
  letter-spacing:.2px;
}
.pw-stat-sub{
  margin-top:5px;
  font-size:.7rem;
  color:var(--muted);
  line-height:1.4;
  max-width:185px;
}
@media (prefers-reduced-motion: reduce){
  .pw-stat-card{ opacity:1; transform:none; animation:none; }
}

/* Hero call-to-action buttons */
#pwHeroCtas{
  display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap;
  opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .7s forwards;
}
.pw-hero-btn{ padding:13px 28px; border-radius:32px; font-weight:700; font-size:.92rem; cursor:pointer; border:none; letter-spacing:.3px; }
.pw-hero-btn.primary{ background:linear-gradient(120deg,var(--gold),var(--gold-light)); color:var(--forest); box-shadow:0 10px 30px -8px rgba(201,150,47,.6); }
.pw-hero-btn.ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.pw-hero-btn:hover{ filter:brightness(1.08); }

/* Scroll cue */
#pwScrollCue{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2;
  color:#e0b65a; font-size:1.3rem; opacity:.85; animation:pwBounce 2s ease-in-out infinite; cursor:pointer;
}
@keyframes pwBounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ============================================================
   4. ANIMATED SVG DIVIDERS
   ============================================================ */
.pw-divider{ display:block; width:100%; line-height:0; position:relative; z-index:2; }
.pw-divider svg{ width:100%; height:40px; display:block; }

/* ============================================================
   5. GLASSMORPHISM CARD UPGRADE
   ============================================================ */
.unit-card, .loc-card, .pref-card, .form-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 8px 30px -10px rgba(11,61,44,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:box-shadow .35s ease;
  will-change:transform;
}
.unit-card:hover, .loc-card:hover{
  box-shadow:0 20px 46px -12px rgba(11,61,44,.28), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ============================================================
   6. 3D TILT (desktop only, applied via JS custom properties)
   ============================================================ */
.pw-tilt{
  transform:perspective(900px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(var(--liftY,0px));
  transition:transform .12s ease-out;
}

/* ============================================================
   7. CURSOR GLOW TRAIL (desktop only)
   ============================================================ */
#pwCursorGlow{
  position:fixed; width:260px; height:260px; border-radius:50%; pointer-events:none; z-index:9997;
  background:radial-gradient(circle,rgba(201,150,47,.16),transparent 70%);
  transform:translate(-50%,-50%); left:-999px; top:-999px; opacity:0;
  transition:opacity .3s ease; mix-blend-mode:multiply;
}

/* ============================================================
   8. PULSING "AVAILABLE" BADGE
   ============================================================ */
.badge.available{ position:relative; }
.badge.available::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  box-shadow:0 0 0 0 rgba(34,160,107,.55);
  animation:pwAvailPulse 2.2s ease-out infinite;
}
@keyframes pwAvailPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,160,107,.55); } 100%{ box-shadow:0 0 0 12px rgba(34,160,107,0); } }

/* ============================================================
   9. ANIMATED / SHIMMERING PROGRESS BARS
   ============================================================ */
.progress{ overflow:hidden; position:relative; }
.progress div{
  transition:width 1s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(90deg,var(--emerald),var(--emerald-soft));
  position:relative; overflow:hidden;
}
.progress div::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%; animation:pwShimmerBar 2.4s linear infinite;
}
@keyframes pwShimmerBar{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }

/* ============================================================
   10. "WHY CHOOSE US" SERVICE CARDS
   ============================================================ */
.pw-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.pw-service-card{
  background:rgba(255,255,255,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5); border-top:3px solid var(--gold); border-radius:16px;
  padding:16px; text-align:center; box-shadow:0 6px 20px -8px rgba(11,61,44,.15);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.pw-service-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px -10px rgba(11,61,44,.25); }
.pw-service-icon{ font-size:1.8rem; display:inline-block; animation:pwIconFloat 5s ease-in-out infinite; }
.pw-service-card h4{ margin:8px 0 4px; color:var(--forest); font-size:.92rem; }
.pw-service-card p{ margin:0; font-size:.76rem; color:var(--muted); }

/* ============================================================
   11. LIVE AVAILABILITY DASHBOARD
   ============================================================ */
.pw-dashboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }
.pw-dash-card{
  background:rgba(255,255,255,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5); border-radius:14px; padding:14px; text-align:center;
  box-shadow:0 6px 18px -8px rgba(11,61,44,.14); transition:transform .3s ease;
}
.pw-dash-card:hover{ transform:translateY(-3px); }
.pw-dash-num{ font-size:1.5rem; font-weight:800; color:var(--forest); font-variant-numeric:tabular-nums; }
.pw-dash-label{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.pw-dash-card.pw-dash-avail .pw-dash-num{ color:var(--available); }
.pw-dash-card.pw-dash-booked .pw-dash-num{ color:var(--booked); }
.pw-dash-card.pw-dash-soon .pw-dash-num{ color:#f39c12; }

/* ============================================================
   12. FLOATING ACTION BUTTONS (WhatsApp / Call / Book / Map)
   ============================================================ */
#pwFab{ position:fixed; left:18px; bottom:18px; z-index:998; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px; }
.pw-fab-item{
  height:48px; border-radius:26px; border:none; color:#fff; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:8px; padding:0; width:0; overflow:hidden; white-space:nowrap;
  cursor:pointer; box-shadow:0 8px 20px -6px rgba(0,0,0,.35); opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, width .25s ease, padding .25s ease;
}
#pwFab.open .pw-fab-item{ width:auto; padding:0 16px 0 14px; opacity:1; transform:translateY(0); }
.pw-fab-item .pw-fab-ic{ font-size:1.1rem; }
.pw-fab-wa{ background:#25D366; }
.pw-fab-call{ background:var(--teal); }
.pw-fab-book{ background:var(--gold); color:var(--forest); }
.pw-fab-map{ background:var(--forest); }
#pwFabToggle{
  width:56px; height:56px; border-radius:50%; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--forest);
  font-size:1.4rem; box-shadow:0 10px 24px -6px rgba(201,150,47,.6); cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
#pwFab.open #pwFabToggle{ transform:rotate(45deg); }

/* ============================================================
   13. SCROLL REVEAL (Intersection Observer driven)
   ============================================================ */
[data-pw-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-pw-reveal].pw-inview{ opacity:1; transform:translateY(0); }

/* ============================================================
   14. PREMIUM TOAST UPGRADE (visual only — logic untouched)
   ============================================================ */
#saveStatusToast{ border-radius:14px !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ============================================================
   15. PREMIUM PAGE TRANSITIONS (section switch: scale + blur + slide)
   Replaces the old simple wipe/fade with a modern motion system.
   Sections keep their original display:none / section.active{display:block}
   rules untouched — these classes only layer an animation on top,
   and are added/removed by JS around the exact same class toggle
   the site already used, so no section-switching logic changes.
   ============================================================ */
section.pw-leaving{
  animation: pwSectionLeave 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, transform, filter;
}
section.pw-entering{
  animation: pwSectionEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, transform, filter;
}
@keyframes pwSectionLeave{
  0%   { opacity:1; transform:scale(1);    filter:blur(0px); }
  100% { opacity:0; transform:scale(0.98); filter:blur(5px); }
}
@keyframes pwSectionEnter{
  0%   { opacity:0; transform:translateY(40px) scale(0.96); filter:blur(5px); }
  65%  { filter:blur(1px); }
  100% { opacity:1; transform:translateY(0)    scale(1);    filter:blur(0px); }
}

/* Golden animated progress line shown while a section transition runs */
#pwTransitionBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--emerald-soft));
  z-index:10001; opacity:0; pointer-events:none;
  box-shadow:0 0 10px rgba(201,150,47,.7);
  transition:width .78s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}
#pwTransitionBar.run{ width:100%; opacity:1; }

/* Liquid highlight pill that slides behind the active nav button */
.pw-nav-highlight{
  position:absolute; top:0; left:0; height:0; width:0;
  border-radius:30px; z-index:0; opacity:0; pointer-events:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  box-shadow:0 0 16px 3px rgba(201,150,47,.55);
  transition:transform .5s cubic-bezier(0.22, 1, 0.36, 1),
             width .5s cubic-bezier(0.22, 1, 0.36, 1),
             height .3s ease, opacity .3s ease;
}
.pw-nav-highlight.pw-visible{ opacity:1; }
nav button{ position:relative; z-index:1; } /* keep label above the sliding pill */

/* Subtle glow behind the active nav button */
nav button.active{
  box-shadow:0 0 0 1px var(--gold), 0 0 18px 4px rgba(201,150,47,.45);
}

/* ============================================================
   16. RESPONSIVE / PERFORMANCE GUARDS
   ============================================================ */
@media (max-width:640px){
  .pw-hero-btn{ padding:11px 20px; font-size:.85rem; }
  #pwStatsSection{ gap:16px; }
}
@media (hover:none), (pointer:coarse){
  #pwCursorGlow{ display:none !important; }
}

/* ============================================================
   17. PREMIUM SUPPORT BADGE (Contact section)
   ============================================================ */
.pw-support-badge{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg,#ffffff,var(--cream));
  border:1px solid var(--sand);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.pw-support-icon{
  flex:none;
  font-size:1.5rem; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--forest),var(--teal));
  box-shadow:0 4px 14px rgba(11,61,44,.28);
}
.pw-support-copy{ display:flex; flex-direction:column; gap:2px; flex:1 1 180px; }
.pw-support-copy strong{ color:var(--forest); font-size:1rem; letter-spacing:.2px; }
.pw-support-copy small{ color:var(--muted); font-size:.8rem; }
.pw-support-online{
  display:flex; align-items:center; gap:7px; flex:none;
  font-size:.8rem; font-weight:700; color:var(--available);
  background:rgba(34,160,107,0.12);
  padding:6px 14px; border-radius:20px;
}
.pw-support-dot{
  width:9px; height:9px; border-radius:50%; background:var(--available);
  animation:pwSupportPulse 1.8s infinite;
}
@keyframes pwSupportPulse{
  0%  { box-shadow:0 0 0 0 rgba(34,160,107,.55); }
  70% { box-shadow:0 0 0 9px rgba(34,160,107,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,160,107,0); }
}
@media (max-width:480px){
  .pw-support-badge{ flex-direction:column; align-items:flex-start; }
}

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}