@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,700&display=swap');:root{--pink:#ed0879;--deep:#610c35;--burgundy:#400c2a;--pale:#fff1f8;--ink:#24212a;--muted:#6f6671;--line:#eee2eb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(130deg,#fff,#fff1f8 65%,#f8f0ff);font-family:'DM Sans',Arial,sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.topbar{position:sticky;top:0;z-index:20;background:#ffffffed;backdrop-filter:blur(16px);box-shadow:0 3px 18px #42142b16;display:flex;align-items:center;justify-content:space-between;padding:12px max(4%,calc((100% - 1350px)/2));gap:20px}.logo{display:flex;flex-direction:column;text-align:center;color:#990744;line-height:1}.logo span{font:italic 32px 'Playfair Display',Georgia,serif}.logo small{font-weight:800;font-size:11px;margin-top:5px}.topbar nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:800}.topbar nav a:hover,.topbar nav a:first-child{color:var(--pink)}.btn{border:0;background:linear-gradient(130deg,#f41483,#c40061);color:#fff;border-radius:25px;padding:13px 23px;font-weight:800;box-shadow:0 7px 16px #e9087733;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.admin-link{font-size:12px}.hamb{display:none;border:0;background:transparent;font-size:24px}.hero{position:relative;min-height:440px;background:url('assets/hero.jpg') center 42%/cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#18283cc9 0%,#2d273eac 55%,#351c3988 100%)}.hero-inner{max-width:1250px;margin:auto;position:relative;min-height:440px;display:flex;align-items:center;justify-content:space-between;padding:40px 30px;gap:30px}.hero-copy{color:white;max-width:600px}.eyebrow{font-size:13px;letter-spacing:4px;font-weight:800}.hero h1{margin:8px 0 14px;line-height:1.05;display:flex;flex-direction:column;font-size:clamp(45px,6vw,78px);font-weight:800;text-shadow:2px 4px 10px #0005}.hero h1 span{font-size:.47em;font-style:italic}.hero h1 em{font-style:italic;background:var(--pink);padding:3px 12px;transform:skew(-8deg);width:max-content}.hero h1 strong{font-style:italic}.hero-copy>p:not(.eyebrow){font-size:18px}.hero-info{display:flex;gap:22px;font-size:13px;font-weight:700;margin:24px 0}.hero-actions{display:flex;gap:12px}.ghost{background:#172433a8;border:2px solid white;box-shadow:none}.hero-photos{width:350px;min-width:260px;position:relative;display:flex;flex-direction:column;align-items:center;gap:15px}.hero-photos img{width:220px;height:150px;object-fit:cover;transform:rotate(7deg);border:6px solid white;border-radius:24px;box-shadow:0 10px 20px #0005}.hero-photos img:nth-child(2){transform:rotate(-8deg);margin-right:100px}.diamond{position:absolute;right:0;top:48%;background:var(--pink);color:#fff;width:120px;height:120px;transform:rotate(45deg);border:5px solid #fff;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:36px;font-weight:800;text-align:center}.diamond small{font-size:12px;line-height:1.1}.diamond>*{transform:rotate(-45deg)}.amenity-strip{position:relative;z-index:2;max-width:1280px;margin:-20px auto 0;background:#fff;border-radius:18px;box-shadow:0 8px 25px #4a174024;padding:18px 24px;display:grid;grid-template-columns:1.5fr repeat(6,1fr);align-items:center;gap:14px}.amenity-strip>div:not(:first-child){font-size:30px;color:var(--pink);text-align:center}.amenity-strip small{display:block;font-size:11px;font-weight:800;color:#222}.amenity-heading{font-size:23px;font-style:italic;font-weight:800;border-right:2px solid var(--pink);line-height:1.1}.amenity-heading b{color:var(--pink)}.section{max-width:1280px;margin:55px auto;padding:0 20px}.section-heading{text-align:center;margin-bottom:28px}.section-heading h2,.why h2{font-size:32px;margin:0}.section-heading h2 span{color:var(--pink)}.section-heading p{margin:7px;color:var(--muted)}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.room-card{overflow:hidden;background:white;border-radius:18px;border:1px solid var(--line);box-shadow:0 7px 18px #4b244015;transition:.2s}.room-card:hover{transform:translateY(-5px);box-shadow:0 13px 25px #4b24402a}.room-card img{width:100%;height:180px;object-fit:cover}.room-card .body{padding:15px 18px 20px;text-align:center}.room-card h3{background:var(--pink);color:white;border-radius:20px;width:max-content;padding:4px 22px;margin:-32px auto 13px;position:relative}.room-card ul{list-style:none;padding:0;text-align:left;font-size:13px;line-height:2;min-height:95px}.outline{border:2px solid var(--pink);color:var(--pink);background:white;border-radius:22px;padding:8px 25px;font-weight:800}.outline:hover{background:var(--pale)}.why{text-align:center;padding:45px 20px;background:linear-gradient(135deg,#fff3fa,#fff)}.why h2{color:#970b48}.why-grid{max-width:1100px;margin:28px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.why-grid>div{font-size:30px}.why-grid b{display:block;font-size:13px;margin-top:10px}.cta{max-width:1200px;margin:35px auto;padding:35px;background:#fff;border:1px solid var(--line);border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{margin:0;font-size:29px}.cta h2 em{color:var(--pink)}.cta p{font-size:13px}footer{text-align:center;padding:25px;color:var(--muted);font-size:12px}dialog{border:0;border-radius:20px;max-width:620px;width:calc(100% - 25px);box-shadow:0 20px 80px #290a2955;padding:0}dialog::backdrop{background:#210c1cb3;backdrop-filter:blur(4px)}.booking-form{padding:27px}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin:0;color:var(--deep)}.dialog-head p{margin:4px 0 20px;color:var(--muted)}.x{font-size:27px;border:0;background:transparent}.booking-form label{display:flex;flex-direction:column;font-size:12px;font-weight:800;gap:7px;margin-bottom:14px}.booking-form input,.booking-form select,.booking-form textarea,.field{width:100%;padding:12px;border:1px solid #ded6df;border-radius:9px;background:white;color:var(--ink)}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hint{font-size:12px;color:var(--muted)}.wide{width:100%}#bookingMessage{color:#147d45;font-size:13px;font-weight:700}@media(max-width:950px){.topbar nav{gap:10px}.room-grid{grid-template-columns:repeat(2,1fr)}.amenity-strip{grid-template-columns:repeat(4,1fr);margin:0 10px}.amenity-heading{border:0}.hero-photos{display:none}}@media(max-width:650px){.topbar{padding:12px 20px}.hamb{display:block}.topbar nav{display:none;position:absolute;top:70px;left:0;right:0;background:white;flex-direction:column;align-items:stretch;padding:20px}.topbar nav.open{display:flex}.hero-inner{min-height:430px;padding:28px 20px}.hero h1{font-size:49px}.hero-info,.hero-actions{flex-wrap:wrap}.amenity-strip{grid-template-columns:repeat(3,1fr)}.amenity-heading{grid-column:span 3;text-align:center}.room-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:repeat(2,1fr)}.cta{margin:20px;flex-direction:column;align-items:start}.two{grid-template-columns:1fr}}

/* Consistent semantic line icons across visitor and admin pages */
[data-lucide],.lucide{width:20px;height:20px;stroke-width:2;display:inline-block;vertical-align:middle;flex-shrink:0;color:inherit}
.btn .lucide,.outline .lucide{width:17px;height:17px}
.hero-info span{display:inline-flex;align-items:center;gap:7px}
.hero-info .lucide{width:18px;height:18px}
.amenity-strip>div:not(:first-child)>.lucide{width:31px;height:31px;color:var(--pink);stroke-width:1.9;margin:0 auto 7px;display:block}
.why-grid>div>.lucide{width:32px;height:32px;color:var(--pink);stroke-width:2;margin:auto;display:block}
.room-card li .lucide{width:16px;height:16px;margin-right:6px;color:var(--deep)}
.hamb .lucide{width:25px;height:25px}

/* Hero correction: original hero.jpg is a completed promotional poster,
   so using it behind live HTML duplicates all the heading and room photos.
   Use an actual property photo as the hero backdrop instead. */
.hero{
  background-image:linear-gradient(90deg,rgba(20,24,38,.76) 0%,rgba(36,22,40,.68) 53%,rgba(52,24,48,.45) 100%),url('assets/room1.jpg');
  background-position:center,center 48%;
  background-size:cover;
  min-height:490px;
  overflow:hidden;
}
.hero-shade{background:linear-gradient(90deg,rgba(20,21,38,.24),rgba(28,18,35,.08) 58%,rgba(38,13,31,.14))}
.hero-inner{min-height:490px;max-width:1290px;gap:48px;padding:55px 38px 72px}
.hero-copy{position:relative;z-index:2;max-width:660px}
.hero h1{font-size:clamp(45px,5.3vw,73px);line-height:1.09;letter-spacing:-1.4px;text-shadow:0 3px 12px rgba(0,0,0,.28)}
.hero h1 em{font-style:italic;padding:4px 15px 8px;box-shadow:0 7px 20px #1a071d33}
.hero-copy>p:not(.eyebrow){max-width:480px;line-height:1.6}
.hero-photos{flex:0 0 330px;width:330px;min-width:0;gap:23px;filter:drop-shadow(0 14px 22px #12071b66)}
.hero-photos img{width:235px;height:155px;border:5px solid white;border-radius:22px}
.hero-photos img:nth-child(2){margin-right:80px}
.diamond{right:-2px;top:45%;width:115px;height:115px;display:block;text-align:center;padding:14px;transform:rotate(0deg);clip-path:none;border-radius:20px;rotate:45deg}
.diamond{font-size:34px;line-height:1.1}
.diamond small{display:block;font-size:11px;line-height:1.15}
.diamond{writing-mode:horizontal-tb}
.amenity-strip{margin-top:-25px}
@media(max-width:950px){.hero-inner{padding:45px 28px 65px}.hero-photos{display:none}.hero-copy{max-width:680px}}
@media(max-width:650px){.hero{min-height:450px}.hero-inner{min-height:450px;padding:32px 20px 58px}.hero h1{font-size:clamp(38px,10vw,53px);letter-spacing:-.8px}.hero-info{gap:10px}.hero-copy>p:not(.eyebrow){font-size:15px}.amenity-strip{margin-top:-16px}}

/* Approved banner: show the user's original promotional picture exactly once.
   The artwork already contains its own text, rooms, amenities and contact info.
   Do not layer the duplicate HTML headline or photo collage over it. */
.hero{
  background-image:url('assets/hero.jpg');
  background-position:center center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  width:100%;
  aspect-ratio:960 / 365;
  height:auto;
  min-height:0;
  overflow:hidden;
}
.hero-shade,.hero-inner{display:none!important}
.amenity-strip{margin-top:18px}
@media(max-width:950px){
  .hero{aspect-ratio:960 / 365;min-height:0;background-size:100% 100%}
}
@media(max-width:650px){
  .hero{aspect-ratio:960 / 365;min-height:0;background-size:100% 100%}
  .amenity-strip{margin-top:12px}
}