:root {
   --green: #173f35;
   --green2: #245447;
   --gold: #c8a66a;
   --cream: #f7f5ef;
   --ink: #24332e;
   --muted: #737d77;
   --white: #fff;
   --line: #e6e3da;
   --serif: "Playfair Display", Georgia, serif;
   --sans: "DM Sans", Arial, sans-serif
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
 }

 body {
   margin: 0;
   font-family: var(--sans);
   color: var(--ink);
   background: #fff;
   font-size: 15px;
   line-height: 1.7
 }

 img {
   display: block;
   max-width: 100%;
   object-fit: cover
 }

 a {
   color: inherit;
   text-decoration: none
 }

 button,
 input,
 select,
 textarea {
   font: inherit
 }

 .container {
   width: min(1160px, calc(100% - 48px));
   margin-inline: auto
 }

 .topbar {
   background: #102f28;
   color: #e9e5da;
   font-size: 11px;
   letter-spacing: .04em
 }

 .topbar-inner {
   min-height: 37px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px
 }

 .topbar a {
   color: #d9bd89
 }

 .site-header {
   background: #fff;
   position: sticky;
   top: 0;
   z-index: 50;
   border-bottom: 1px solid rgba(30, 60, 48, .08)
 }

 .nav-wrap {
   height: 82px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
 }

 .brand {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0
 }

 .brand-mark {
   width: 43px;
   height: 43px;
   display: grid;
   place-items: center;
   border: 1px solid var(--gold);
   color: var(--green);
   font: 600 28px var(--serif);
   border-radius: 50%
 }

 .brand-copy {
   display: flex;
   flex-direction: column;
   line-height: 1.25
 }

 .brand-copy strong {
   font: 600 17px var(--serif);
   letter-spacing: .01em;
   color: var(--green)
 }

 .brand-copy small {
   font-size: 9px;
   letter-spacing: .2em;
   color: #8b806d;
   margin-top: 5px
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 29px;
   font-size: 12px;
   font-weight: 600
 }

 .nav-links>a:not(.nav-book) {
   transition: color .2s
 }

 .nav-links>a:not(.nav-book):hover {
   color: #a17b3f
 }

 .nav-book {
   background: var(--green);
   color: white;
   padding: 13px 17px
 }

 .nav-book span,
 .btn span {
   margin-left: 12px;
   color: var(--gold)
 }

 .menu-toggle {
   display: none;
   background: none;
   border: 0;
   padding: 8px
 }

 .menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--green);
   margin: 5px
 }

 .hero {
   position: relative;
   min-height: 640px;
   display: flex;
   align-items: center;
   background: #163a31;
   overflow: hidden;
   color: white
 }

 .hero-image,
 .hero-overlay {
   position: absolute;
   inset: 0
 }

 .hero-image {
   background-image: url("hero.jpeg?auto=format&fit=crop&w=2000&q=90");
   background-size: cover;
   background-position: center 52%;
   transform: scale(1.02)
 }

 .hero-overlay {
   background: linear-gradient(90deg, rgba(13, 38, 31, .88) 0%, rgba(17, 43, 35, .73) 42%, rgba(20, 43, 35, .24) 100%), linear-gradient(0deg, rgba(12, 35, 28, .25), transparent 45%)
 }

 .hero-content {
   position: relative;
   padding: 90px 0 110px;
   z-index: 1
 }

 .eyebrow {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #9b7b46;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .2em;
   margin: 0 0 18px
 }

 .eyebrow>span {
   height: 1px;
   width: 29px;
   background: var(--gold)
 }

 .eyebrow.light {
   color: #e6d8bc
 }

 .hero h1 {
   font: 500 clamp(44px, 6.1vw, 78px)/1.12 var(--serif);
   letter-spacing: -.035em;
   margin: 0 0 22px;
   max-width: 700px
 }

 .hero h1 em,
 .section h2 em,
 .booking-copy h2 em,
 .location-grid h2 em {
   font-weight: 500;
   color: #d7b77d
 }

 .hero-desc {
   font-size: 15px;
   line-height: 1.9;
   color: #eeeae2;
   max-width: 480px;
   margin: 0 0 30px
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 28px
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   padding: 15px 21px;
   font-size: 11px;
   letter-spacing: .035em;
   font-weight: 700;
   cursor: pointer;
   transition: transform .2s, background .2s
 }

 .btn:hover {
   transform: translateY(-2px)
 }

 .btn-gold {
   background: var(--gold);
   color: #172e27
 }

 .btn-gold span {
   color: #172e27
 }

 .btn-dark {
   background: var(--green);
   color: white
 }

 .btn-dark:hover {
   background: #285849
 }

 .text-link {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   font-size: 12px;
   font-weight: 700;
   color: var(--green);
   border-bottom: 1px solid #c7b48e;
   padding-bottom: 7px
 }

 .text-link span {
   color: #a17b3f;
   font-size: 18px
 }

 .light-link {
   color: #fff;
   border-color: rgba(255, 255, 255, .4)
 }

 .hero-note {
   margin-top: 65px;
   display: flex;
   gap: 13px;
   align-items: center
 }

 .note-icon {
   font-size: 23px;
   color: var(--gold)
 }

 .hero-note span:last-child {
   display: flex;
   flex-direction: column
 }

 .hero-note strong {
   font-size: 12px;
   font-weight: 600
 }

 .hero-note small {
   font-size: 11px;
   color: #d7d9d3;
   margin-top: 3px
 }

 .hero-scroll {
   position: absolute;
   right: 4%;
   bottom: 28px;
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 9px;
   letter-spacing: .17em;
   color: #e3e1d8;
   writing-mode: vertical-rl
 }

 .hero-scroll span {
   width: 1px;
   height: 43px;
   background: var(--gold)
 }

 .quick-book {
   background: var(--cream);
   border-bottom: 1px solid #eae6dc
 }

 .quick-book-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   min-height: 104px
 }

 .quick-intro {
   display: flex;
   align-items: center;
   gap: 15px
 }

 .mini-icon {
   width: 39px;
   height: 39px;
   border: 1px solid #d7c49d;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #a17b3f;
   font-size: 22px
 }

 .quick-intro div {
   display: flex;
   flex-direction: column
 }

 .quick-intro strong {
   font: 600 17px var(--serif);
   color: var(--green)
 }

 .quick-intro small {
   font-size: 11px;
   color: var(--muted)
 }

 .section {
   padding: 105px 0
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 90px
 }

 .about-visual {
   position: relative;
   padding: 0 52px 38px 0
 }

 .about-main {
   width: 100%;
   height: 490px
 }

 .image-caption {
   position: absolute;
   left: -12px;
   bottom: 0;
   background: white;
   box-shadow: 0 12px 35px #152e2018;
   padding: 19px 24px;
   display: flex;
   align-items: center;
   gap: 13px;
   min-width: 260px
 }

 .image-caption>span {
   color: var(--gold);
   font-size: 24px
 }

 .image-caption div {
   display: flex;
   flex-direction: column
 }

 .image-caption strong {
   font: 600 14px var(--serif);
   color: var(--green)
 }

 .image-caption small {
   font-size: 10px;
   color: var(--muted);
   margin-top: 3px
 }

 .about-small {
   position: absolute;
   right: 0;
   top: 55px;
   width: 135px;
   height: 170px;
   border: 7px solid white
 }

 .about-small img {
   width: 100%;
   height: 100%
 }

 .section h2,
 .location-grid h2 {
   font: 500 clamp(34px, 4vw, 49px)/1.2 var(--serif);
   letter-spacing: -.03em;
   color: var(--green);
   margin: 0 0 21px
 }

 .section h2 em,
 .location-grid h2 em {
   color: #a9854b
 }

 .about-copy .lead {
   font: 500 18px/1.6 var(--serif);
   color: #3f574b;
   margin: 0 0 16px
 }

 .about-copy>p:not(.eyebrow):not(.lead) {
   font-size: 13px;
   color: #788079;
   line-height: 1.9
 }

 .feature-points {
   margin: 28px 0 30px;
   border-top: 1px solid var(--line)
 }

 .feature-points>div {
   display: flex;
   gap: 17px;
   align-items: center;
   border-bottom: 1px solid var(--line);
   padding: 14px 0
 }

 .feature-points>div>span {
   font: 500 17px var(--serif);
   color: #b7965f
 }

 .feature-points p {
   margin: 0;
   display: flex;
   flex-direction: column
 }

 .feature-points strong {
   font-size: 12px;
   color: var(--green)
 }

 .feature-points small {
   font-size: 11px;
   color: var(--muted);
   margin-top: 3px
 }

 .rooms-section {
   background: var(--cream)
 }

 .section-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 40px;
   margin-bottom: 38px
 }

 .section-heading h2 {
   margin-bottom: 0
 }

 .section-heading>p {
   max-width: 340px;
   font-size: 12px;
   color: var(--muted);
   margin: 0 0 5px;
   line-height: 1.9
 }

 .room-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
 }

 .room-card {
   background: white;
   min-width: 0;
   transition: transform .25s, box-shadow .25s
 }

 .room-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px #163c2d13
 }

 .room-image {
   height: 205px;
   position: relative;
   overflow: hidden
 }

 .room-image img {
   width: 100%;
   height: 100%;
   transition: transform .4s
 }

 .room-card:hover .room-image img {
   transform: scale(1.04)
 }

 .room-tag {
   position: absolute;
   left: 12px;
   top: 12px;
   background: #fff;
   color: var(--green);
   padding: 6px 9px;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .03em
 }

 .room-body {
   padding: 20px 18px 17px
 }

 .room-title {
   display: flex;
   flex-direction: column;
   gap: 3px
 }

 .room-title h3 {
   font: 600 20px var(--serif);
   color: var(--green);
   margin: 0
 }

 .room-price {
   font-size: 14px;
   font-weight: 700;
   color: #a27b41
 }

 .room-price small {
   font-size: 10px;
   font-weight: 400;
   color: var(--muted)
 }

 .room-body>p {
   font-size: 11px;
   color: var(--muted);
   line-height: 1.8;
   min-height: 60px;
   margin: 12px 0
 }

 .room-meta {
   display: flex;
   flex-direction: column;
   gap: 7px;
   padding: 12px 0;
   border-top: 1px solid var(--line);
   font-size: 10px;
   color: #69766e
 }

 .room-book {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: none;
   border: 0;
   border-top: 1px solid var(--line);
   padding: 14px 0 0;
   color: var(--green);
   font-size: 10px;
   font-weight: 700;
   cursor: pointer;
   text-align: left
 }

 .room-book span {
   font-size: 17px;
   color: #a27b41
 }

 .fine-print {
   font-size: 10px;
   color: #858980;
   line-height: 1.7;
   margin: 18px 0 0
 }

 .quote-band {
   height: 360px;
   position: relative;
   display: grid;
   place-items: center;
   text-align: center;
   color: white;
   overflow: hidden
 }

 .quote-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(#153c31c9, #153c31d9), url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=85") center 45%/cover
 }

 .quote-content {
   position: relative;
   padding: 30px
 }

 .quote-mark {
   font: 80px/0.8 var(--serif);
   color: var(--gold)
 }

 .quote-content p {
   font: 500 clamp(25px, 3vw, 38px)/1.4 var(--serif);
   margin: 12px 0 22px
 }

 .quote-line {
   display: block;
   width: 45px;
   height: 1px;
   background: var(--gold);
   margin: 0 auto 15px
 }

 .quote-content small {
   font-size: 9px;
   letter-spacing: .22em;
   color: #e6d5b7
 }

 .amenity-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line)
 }

 .amenity {
   padding: 28px 25px;
   min-height: 174px;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
 }

 .amenity-icon {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border: 1px solid #dfd0ae;
   border-radius: 50%;
   color: #a17b3f;
   font-size: 20px;
   margin-bottom: 14px
 }

 .amenity h3 {
   font: 600 17px var(--serif);
   color: var(--green);
   margin: 0 0 5px
 }

 .amenity p {
   font-size: 11px;
   line-height: 1.7;
   color: var(--muted);
   margin: 0
 }

 .gallery-section {
   background: #fcfbf8
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: 1.15fr 1fr 1fr;
   grid-template-rows: 190px 190px;
   gap: 14px
 }

 .gallery-grid img {
   width: 100%;
   height: 100%;
   transition: filter .25s
 }

 .gallery-grid img:hover {
   filter: brightness(.85)
 }

 .gallery-grid .gallery-tall {
   grid-row: span 2
 }

 .booking-section {
   background: var(--green);
   color: #fff;
   padding: 100px 0;
   position: relative;
   overflow: hidden
 }

 .booking-section:before {
   content: "";
   position: absolute;
   left: -180px;
   top: -200px;
   width: 500px;
   height: 500px;
   border: 1px solid #ffffff0e;
   border-radius: 50%;
   box-shadow: 0 0 0 50px #ffffff05, 0 0 0 100px #ffffff04
 }

 .booking-grid {
   position: relative;
   display: grid;
   grid-template-columns: .8fr 1fr;
   gap: 100px;
   align-items: start
 }

 .booking-copy {
   padding-top: 25px
 }

 .booking-copy h2 {
   font: 500 clamp(39px, 4.5vw, 56px)/1.2 var(--serif);
   margin: 0 0 20px;
   letter-spacing: -.03em
 }

 .booking-copy>p:not(.eyebrow) {
   max-width: 390px;
   color: #d0d9d2;
   font-size: 13px;
   line-height: 1.9
 }

 .booking-contact {
   display: flex;
   gap: 15px;
   align-items: center;
   margin-top: 30px
 }

 .contact-icon {
   width: 42px;
   height: 42px;
   border: 1px solid #a4b4a7;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: var(--gold);
   font-size: 20px;
   flex-shrink: 0
 }

 .booking-contact div {
   display: flex;
   flex-direction: column
 }

 .booking-contact small {
   font-size: 10px;
   color: #c4d0c7
 }

 .booking-contact strong {
   font-size: 12px;
   margin: 2px 0
 }

 .booking-contact div>span {
   font-size: 10px;
   color: #aebfb3
 }

 .booking-form {
   background: #fff;
   color: var(--ink);
   padding: 36px 38px;
   box-shadow: 0 25px 70px #071d1630
 }

 .form-heading {
   margin-bottom: 24px
 }

 .form-heading>span {
   font-size: 9px;
   letter-spacing: .2em;
   font-weight: 700;
   color: #a17b3f
 }

 .form-heading h3 {
   font: 600 28px var(--serif);
   color: var(--green);
   margin: 5px 0
 }

 .form-heading p {
   font-size: 10px;
   color: var(--muted);
   margin: 0
 }

 .form-row {
   margin-bottom: 17px
 }

 .form-row label {
   display: block;
   font-size: 10px;
   font-weight: 700;
   color: #526157;
   margin-bottom: 7px
 }

 .form-row input,
 .form-row select,
 .form-row textarea {
   width: 100%;
   border: 1px solid #e1e4dd;
   background: #fbfcfa;
   padding: 12px 13px;
   color: var(--ink);
   font-size: 11px;
   outline: none;
   border-radius: 0;
   min-width: 0
 }

 .form-row input:focus,
 .form-row select:focus,
 .form-row textarea:focus {
   border-color: #a9854b;
   box-shadow: 0 0 0 2px #c8a66a20
 }

 .form-row textarea {
   resize: vertical
 }

 .two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
 }

 .submit-btn {
   width: 100%;
   justify-content: space-between;
   margin-top: 2px
 }

 .form-disclaimer {
   font-size: 9px;
   line-height: 1.7;
   color: #7d877e;
   margin: 12px 0 0
 }

 .form-status {
   font-size: 11px;
   color: var(--green);
   margin-top: 8px
 }

 .location-section {
   padding: 90px 0;
   background: var(--cream)
 }

 .location-grid {
   display: grid;
   grid-template-columns: .8fr 1fr;
   gap: 75px;
   align-items: center
 }

 .location-grid>div:first-child>p:not(.eyebrow) {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.9;
   max-width: 390px;
   margin-bottom: 25px
 }

 .btn-outline {
   border: 1px solid #c8b58e;
   color: var(--green);
   background: transparent
 }

 .btn-outline span {
   color: #a17b3f
 }

 .map-frame {
   height: 330px;
   border: 8px solid white;
   box-shadow: 0 12px 35px #183b2d0e
 }

 .map-frame iframe {
   width: 100%;
   height: 100%;
   border: 0
 }

 .footer {
   background: #102f28;
   color: #d8e0d9
 }

 .footer-main {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 35px;
   align-items: center;
   padding: 42px 0
 }

 .footer-brand .brand-copy strong {
   color: #fff
 }

 .footer-brand .brand-copy small {
   color: #bca77f
 }

 .footer-brand .brand-mark {
   color: #e2c58c
 }

 .footer-main>p {
   font: italic 15px/1.6 var(--serif);
   color: #b9c7bd;
   max-width: 260px
 }

 .footer-links {
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 18px;
   font-size: 10px
 }

 .footer-links a:hover {
   color: var(--gold)
 }

 .footer-bottom {
   border-top: 1px solid #ffffff20;
   padding: 17px 0;
   display: flex;
   justify-content: space-between;
   gap: 20px;
   font-size: 9px;
   color: #aebdb2
 }

 .floating-whatsapp {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 40;
   background: #1f8f55;
   color: white;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   border-radius: 30px;
   box-shadow: 0 8px 25px #0002;
   font-size: 12px;
   font-weight: 700
 }

 .floating-whatsapp span {
   font-size: 17px
 }

 @media(max-width:1000px) {
   .nav-links {
     gap: 17px
   }

   .room-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .room-image {
     height: 240px
   }

   .about-grid {
     gap: 50px
   }

   .booking-grid {
     gap: 45px
   }

   .amenity {
     padding: 24px 18px
   }

   .footer-main {
     grid-template-columns: 1fr 1fr
   }

   .footer-links {
     grid-column: 1/-1;
     justify-content: flex-start
   }
 }

 @media(max-width:760px) {
   .container {
     width: min(100% - 34px, 560px)
   }

   .topbar-inner {
     min-height: 34px;
     font-size: 9px
   }

   .topbar-inner>span {
     max-width: 72%
   }

   .nav-wrap {
     height: 72px
   }

   .brand-mark {
     width: 38px;
     height: 38px;
     font-size: 24px
   }

   .brand-copy strong {
     font-size: 15px
   }

   .menu-toggle {
     display: block;
     cursor: pointer
   }

   .nav-links {
     display: none;
     position: absolute;
     top: 72px;
     left: 0;
     right: 0;
     background: white;
     padding: 18px 24px 25px;
     box-shadow: 0 15px 25px #152e2015;
     align-items: stretch;
     flex-direction: column;
     gap: 0
   }

   .nav-links.open {
     display: flex
   }

   .nav-links>a:not(.nav-book) {
     padding: 12px 0;
     border-bottom: 1px solid var(--line)
   }

   .nav-book {
     margin-top: 14px;
     text-align: center
   }

   .hero {
     min-height: 650px
   }

   .hero-content {
     padding: 82px 0 105px
   }

   .hero h1 {
     font-size: clamp(43px, 11vw, 62px)
   }

   .hero-desc {
     font-size: 13px;
     max-width: 390px
   }

   .hero-actions {
     align-items: flex-start;
     flex-direction: column;
     gap: 20px
   }

   .hero-note {
     margin-top: 50px
   }

   .hero-scroll {
     display: none
   }

   .quick-book-inner {
     padding: 22px 0;
     align-items: flex-start;
     flex-direction: column
   }

   .quick-intro strong {
     font-size: 16px
   }

   .section {
     padding: 72px 0
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 55px
   }

   .about-visual {
     padding: 0 35px 30px 0
   }

   .about-main {
     height: 390px
   }

   .about-small {
     width: 110px;
     height: 140px;
     top: 30px
   }

   .image-caption {
     left: 0;
     padding: 14px 17px;
     min-width: 235px
   }

   .about-copy .lead {
     font-size: 17px
   }

   .section-heading {
     align-items: flex-start;
     flex-direction: column;
     gap: 16px;
     margin-bottom: 28px
   }

   .section-heading>p {
     max-width: 100%
   }

   .section h2,
   .location-grid h2 {
     font-size: 38px
   }

   .room-grid {
     grid-template-columns: 1fr;
     gap: 20px
   }

   .room-image {
     height: 260px
   }

   .room-body {
     padding: 22px
   }

   .room-body>p {
     min-height: 0
   }

   .quote-band {
     height: 310px
   }

   .quote-content p {
     font-size: 27px
   }

   .amenity-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .amenity {
     padding: 20px 15px;
     min-height: 165px
   }

   .amenity h3 {
     font-size: 15px
   }

   .gallery-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 170px 140px 140px;
     gap: 9px
   }

   .gallery-grid .gallery-tall {
     grid-column: span 2;
     grid-row: auto
   }

   .booking-section {
     padding: 72px 0
   }

   .booking-grid {
     grid-template-columns: 1fr;
     gap: 35px
   }

   .booking-copy {
     padding-top: 0
   }

   .booking-copy h2 {
     font-size: 43px
   }

   .booking-form {
     padding: 27px 22px
   }

   .form-heading h3 {
     font-size: 25px
   }

   .two-col {
     gap: 10px
   }

   .form-row input,
   .form-row select {
     padding: 12px 9px
   }

   .location-section {
     padding: 70px 0
   }

   .location-grid {
     grid-template-columns: 1fr;
     gap: 30px
   }

   .map-frame {
     height: 280px
   }

   .footer-main {
     grid-template-columns: 1fr;
     gap: 17px;
     padding: 34px 0
   }

   .footer-main>p {
     margin: 0
   }

   .footer-links {
     grid-column: auto;
     justify-content: flex-start;
     gap: 15px
   }

   .footer-bottom {
     flex-direction: column;
     gap: 6px
   }

   .floating-whatsapp {
     right: 13px;
     bottom: 13px;
     padding: 11px 14px
   }
 }

 @media(max-width:390px) {
   .container {
     width: calc(100% - 28px)
   }

   .topbar-inner>span {
     font-size: 8px
   }

   .hero h1 {
     font-size: 41px
   }

   .btn {
     padding: 14px 16px
   }

   .amenity-grid {
     grid-template-columns: 1fr 1fr
   }

   .amenity {
     padding: 17px 12px
   }

   .two-col {
     grid-template-columns: 1fr
   }

   .booking-form {
     padding: 24px 17px
   }

   .gallery-grid {
     grid-template-rows: 140px 115px 115px
   }
 }


 /* Fixed quick-contact buttons on the right edge */
 .floating-contact {
   position: fixed;
   right: 18px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: 11px
 }

 .floating-contact-btn {
   width: 62px;
   min-height: 66px;
   padding: 10px 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   border-radius: 14px;
   color: #fff;
   box-shadow: 0 8px 24px #0b211c35;
   transition: transform .2s, box-shadow .2s;
   text-align: center
 }

 .floating-contact-btn:hover {
   transform: translateX(-4px);
   box-shadow: 0 10px 28px #0b211c45
 }

 .floating-call {
   background: #173f35
 }

 .floating-wa {
   background: #1f9d5a
 }

 .floating-contact-icon {
   font-size: 22px;
   line-height: 1
 }

 .floating-contact-label {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .01em
 }

 .room-book {
   background: var(--green);
   color: #fff;
   border-top: 0;
   padding: 12px 13px;
   margin-top: 8px
 }

 .room-book span {
   color: var(--gold)
 }

 .room-book:hover {
   background: #285849
 }

 @media(max-width:760px) {
   .floating-contact {
     right: 10px;
     top: auto;
     bottom: 20px;
     transform: none;
     gap: 8px
   }

   .floating-contact-btn {
     width: 54px;
     min-height: 57px;
     border-radius: 12px;
     padding: 8px 3px
   }

   .floating-contact-icon {
     font-size: 19px
   }

   .floating-contact-label {
     font-size: 8px
   }

   .room-book {
     padding: 13px
   }
 }
 
 
 
 
 
 
/* Normal Call and WhatsApp Buttons */
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  top: auto;
  transform: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-contact-btn {
  width: auto;
  min-width: 155px;
  min-height: 48px;
  padding: 12px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 50px;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.20);
  transition: all 0.25s ease;
  text-align: center;
}

.floating-contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.floating-call {
  background: #173f35;
}

.floating-wa {
  background: #25D366;
}

.floating-contact-icon {
  font-size: 20px;
  line-height: 1;
}

.floating-contact-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Mobile responsive */
@media (max-width: 760px) {
  .floating-contact {
    right: 12px;
    bottom: 15px;
    top: auto;
    transform: none;
    gap: 10px;
  }

  .floating-contact-btn {
    width: auto;
    min-width: 140px;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 30px;
  }

  .floating-contact-icon {
    font-size: 18px;
  }

  .floating-contact-label {
    font-size: 12px;
  }
}