:root {
     --sf: #E8722A;
     --sfl: #F5924A;
     --sfp: #FDF0E8;
     --sfm: #FEF8F3;
     --br: #7A4A28;
     --brd: #5C3418;
     --iv: #FAF6F0;
     --cr: #F5EFE6;
     --be: #EDE4D8;
     --ch: #2D2016;
     --tw: #4A3020;
     --sg: #7A9B76;
     --sgp: #EEF5ED;
     --gd: #C9963A;
     --gdl: #E8C070;
     --gdp: #FDF5E6;
     --sky: #6B9EBF;
     --skyp: #EDF4F9;
     --wh: #FFFFFF;
     --sw: 0 8px 40px rgba(120, 70, 30, .12);
     --sc: 0 4px 24px rgba(120, 70, 30, .09);
     --sh: 0 20px 60px rgba(120, 70, 30, .18);
     --r: 20px;
     --rl: 32px;
     --tr: all .45s cubic-bezier(.25, .8, .25, 1);
 }

 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Poppins', sans-serif;
     background: var(--iv);
     color: var(--ch);
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     font-family: 'Cormorant Garamond', serif;
 }

 a {
     text-decoration: none;
 }

 img {
     display: block;
     width: 100%;
 }

 #prog {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--sf), var(--gd));
     z-index: 9999;
     width: 0;
     transition: width .15s;
 }

 .sr {
     opacity: 0;
     transform: translateY(36px);
     transition: opacity .75s ease, transform .75s ease;
 }

 .sr.sl {
     transform: translateX(-44px);
 }

 .sr.sr2 {
     transform: translateX(44px);
 }

 .sr.sc {
     transform: scale(.92);
 }

 .sr.in {
     opacity: 1 !important;
     transform: none !important;
 }

 /* NAVBAR */
 .nv {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     padding: 14px 0;
     background: rgba(250, 246, 240, .96);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(232, 114, 42, .12);
     transition: all .3s;
 }

 .nv.scrolled {
     padding: 10px 0;
     box-shadow: 0 4px 24px rgba(120, 70, 30, .10);
 }

 .nb {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .nlc {
     width: 44px;
     height: 44px;
     background: var(--sf);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .nlc svg {
     width: 28px;
     height: 28px;
 }

 .nbn {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.3rem;
     font-weight: 600;
     color: var(--sf);
     display: block;
 }

 .nbs {
     font-size: .6rem;
     color: var(--br);
     letter-spacing: .12em;
     text-transform: uppercase;
     display: block;
 }

 .nl {
     font-size: .78rem;
     font-weight: 500;
     color: var(--tw);
     padding: 6px 14px;
     position: relative;
     transition: color .2s;
 }

 .nl::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 14px;
     right: 14px;
     height: 1.5px;
     background: var(--sf);
     transform: scaleX(0);
     transition: transform .3s;
 }

 .nl:hover,
 .nl.active {
     color: var(--sf);
 }

 .nl:hover::after,
 .nl.active::after {
     transform: scaleX(1);
 }

 .nc {
     background: var(--sf);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 9px 22px;
     font-size: .78rem;
     font-weight: 500;
     cursor: pointer;
     transition: all .3s;
     display: inline-block;
 }

 .nc:hover {
     background: var(--br);
     color: #fff;
 }

 .hbtn {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 4px;
     background: none;
     border: none;
 }

 .hbtn span {
     width: 24px;
     height: 2px;
     background: var(--sf);
     border-radius: 2px;
     display: block;
 }

 .mm {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--iv);
     z-index: 999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 24px;
     transform: translateX(100%);
     transition: transform .35s;
 }

 .mm.open {
     transform: translateX(0);
 }

 .mc {
     position: absolute;
     top: 24px;
     right: 24px;
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1.4rem;
     color: var(--ch);
 }

 /* SHARED */
 section {
     padding: 96px 0;
 }

 .sl_ {
     font-size: .7rem;
     font-weight: 600;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--sf);
     margin-bottom: 10px;
     display: block;
 }

 .sh_ {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2rem, 3.8vw, 3.2rem);
     font-weight: 600;
     color: var(--ch);
     line-height: 1.18;
     margin-bottom: 16px;
 }

 .sh_ em {
     font-style: italic;
     color: var(--sf);
 }

 .ss_ {
     font-size: .8rem;
     color: var(--tw);
     line-height: 1.85;
     max-width: 560px;
 }

 .orn {
     width: 48px;
     height: 3px;
     background: var(--sf);
     border-radius: 2px;
     margin-bottom: 24px;
 }

 .orn.cx {
     margin-left: auto;
     margin-right: auto;
 }

 .btn-p {
     background: var(--sf);
     color: #fff;
     padding: 13px 30px;
     border-radius: 50px;
     border: none;
     font-size: .86rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--tr);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 6px 24px rgba(232, 114, 42, .32);
 }

 .btn-p:hover {
     background: var(--br);
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 12px 36px rgba(232, 114, 42, .38);
 }

 .btn-o {
     background: transparent;
     color: var(--br);
     padding: 12px 30px;
     border-radius: 50px;
     border: 1.5px solid var(--br);
     font-size: .86rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--tr);
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .btn-o:hover {
     background: var(--br);
     color: #fff;
     transform: translateY(-2px);
 }

 .btn-wa {
     background: #25D366;
     color: #fff;
     padding: 13px 26px;
     border-radius: 50px;
     font-size: .85rem;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: var(--tr);
     box-shadow: 0 6px 20px rgba(37, 211, 102, .3);
 }

 .btn-wa:hover {
     background: #20b957;
     color: #fff;
     transform: translateY(-2px);
 }

 /* HERO */
 .page-hero {
     position: relative;
     min-height: 560px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
     margin-top: 72px;
 }

 .phi {
     position: absolute;
     inset: 0;
 }

 .phi img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.1);
     animation: hz 10s ease forwards;
 }

 @keyframes hz {
     to {
         transform: scale(1);
     }
 }

 .pho {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(44, 24, 8, .78) 0%, rgba(120, 70, 30, .5) 55%, rgba(232, 114, 42, .13) 100%);
 }

 .hring {
     position: absolute;
     border-radius: 50%;
     border: 1.5px solid rgba(255, 255, 255, .07);
     pointer-events: none;
 }

 .hr1 {
     width: 540px;
     height: 540px;
     top: -220px;
     right: -110px;
 }

 .hr2 {
     width: 300px;
     height: 300px;
     top: -50px;
     right: 90px;
 }

 .hsh {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--sf), var(--gd), var(--sf));
 }

 .phc {
     position: relative;
     z-index: 2;
     width: 100%;
 }

 .htag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .22);
     backdrop-filter: blur(8px);
     border-radius: 50px;
     padding: 6px 18px;
     margin-bottom: 18px;
     font-size: .7rem;
     font-weight: 500;
     color: rgba(255, 255, 255, .9);
     letter-spacing: .12em;
     text-transform: uppercase;
     animation: fu .8s .15s both;
 }

 .page-hero h1 {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.5rem, 5.2vw, 4.7rem);
     font-weight: 600;
     color: #fff;
     line-height: 1.07;
     margin-bottom: 16px;
     animation: fu .8s .3s both;
 }

 .page-hero h1 em {
     font-style: italic;
     color: var(--gdl);
 }

 .page-hero p {
     font-size: .98rem;
     color: rgba(255, 255, 255, .76);
     line-height: 1.8;
     max-width: 540px;
     animation: fu .8s .45s both;
 }

 @keyframes fu {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 /* BREADCRUMB */
 .bc {
     background: var(--wh);
     border-bottom: 1px solid rgba(232, 114, 42, .1);
     padding: 14px 0;
 }

 .bc .breadcrumb {
     margin: 0;
     font-size: .76rem;
     align-items: center;
 }

 .bc .breadcrumb-item a {
     color: var(--sf);
     font-weight: 500;
 }

 .breadcrumb-item+.breadcrumb-item::before {
     color: var(--sf);
     content: "›";
     font-size: 1rem;
 }


 /* ═════ 3.2 ROOMS — comparison + tabs ═════ */
 .rooms-section {
     background: var(--iv);
 }

 .room-tabs {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 48px;
 }

 .rtab {
     padding: 10px 24px;
     border-radius: 50px;
     font-size: .82rem;
     font-weight: 600;
     cursor: pointer;
     border: 1.5px solid rgba(232, 114, 42, .22);
     color: var(--tw);
     background: var(--wh);
     transition: var(--tr);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .rtab.active,
 .rtab:hover {
     background: var(--sf);
     color: #fff;
     border-color: var(--sf);
     box-shadow: 0 6px 20px rgba(232, 114, 42, .28);
 }

 /* comparison table */
 .compare-wrap {
     overflow-x: auto;
     margin-bottom: 64px;
     border-radius: var(--rl);
     box-shadow: var(--sw);
 }

 .compare-table {
     width: 100%;
     border-collapse: collapse;
     background: var(--wh);
     min-width: 680px;
 }

 .compare-table thead th {
     background: var(--ch);
     color: #fff;
     padding: 20px 24px;
     text-align: left;
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.15rem;
     font-weight: 600;
 }

 .compare-table thead th:first-child {
     border-radius: var(--rl) 0 0 0;
 }

 .compare-table thead th:last-child {
     border-radius: 0 var(--rl) 0 0;
 }

 .compare-table tbody td {
     padding: 22px 24px;
     font-size: .84rem;
     color: var(--tw);
     line-height: 1.7;
     border-bottom: 1px solid var(--be);
     vertical-align: top;
 }

 .compare-table tbody tr:last-child td {
     border-bottom: none;
 }

 .compare-table tbody tr:hover {
     background: var(--sfm);
 }

 .compare-room-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--sf);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .compare-room-name i {
     font-size: 1rem;
 }

 /* room type panel */
 .room-panel {
     display: none;
 }

 .room-panel.active {
     display: block;
 }

 .room-hero-grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 14px;
     border-radius: var(--rl);
     overflow: hidden;
     box-shadow: var(--sw);
     margin-bottom: 32px;
     height: 480px;
 }

 .rh-item {
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .rh-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s;
 }

 .rh-item:hover img {
     transform: scale(1.08);
 }

 .rh-main {
     grid-row: span 2;
 }

 .rh-overlay {
     position: absolute;
     inset: 0;
     background: rgba(44, 24, 8, 0);
     transition: background .3s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .rh-item:hover .rh-overlay {
     background: rgba(44, 24, 8, .35);
 }

 .rh-overlay i {
     color: #fff;
     font-size: 1.5rem;
     opacity: 0;
     transform: scale(.7);
     transition: all .3s;
 }

 .rh-item:hover .rh-overlay i {
     opacity: 1;
     transform: scale(1);
 }

 .rh-label {
     position: absolute;
     bottom: 12px;
     left: 12px;
     background: rgba(0, 0, 0, .55);
     color: #fff;
     font-size: .65rem;
     font-weight: 600;
     padding: 4px 10px;
     border-radius: 50px;
 }

 .room-info-card {
     background: var(--wh);
     border-radius: var(--r);
     padding: 32px;
     box-shadow: var(--sc);
     height: 100%;
 }

 .room-info-card h3 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.7rem;
     font-weight: 600;
     color: var(--ch);
     margin-bottom: 6px;
 }

 .room-info-card .best-for {
     font-size: .8rem;
     color: var(--sg);
     font-weight: 600;
     margin-bottom: 18px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .includes-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .includes-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: .83rem;
     color: var(--tw);
     margin-bottom: 11px;
     line-height: 1.6;
 }

 .includes-list li i {
     color: var(--sf);
     font-size: .85rem;
     margin-top: 2px;
     flex-shrink: 0;
 }

 @media(max-width:767px) {
     .room-hero-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: repeat(3, 140px);
         height: auto;
     }

     .rh-main {
         grid-column: span 2;
         grid-row: span 1;
         height: 220px;
     }

     .compare-table tbody td {
         padding: 10px;
         font-size: .75rem;
         line-height: 1.5;
     }

     .compare-room-name {
         font-family: 'Cormorant Garamond', serif;
         font-size: 1rem;
         line-height: 1.2;

     }








 }

 /* ═════ 3.2.3 INCLUDED CHECKLIST ═════ */
 .included-section {
     background: var(--cr);
 }

 .check-card {
     background: var(--wh);
     border-radius: var(--r);
     padding: 24px 22px;
     height: 100%;
     box-shadow: var(--sc);
     transition: var(--tr);
     display: flex;
     gap: 14px;
     align-items: flex-start;
 }

 .check-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--sh);
 }

 .check-ico {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--sfp);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .check-ico i {
     color: var(--sf);
     font-size: 1rem;
 }

 .check-card h5 {

     font-weight: 600;
     color: var(--ch);
     margin-bottom: 3px;
 }

 .check-card p {
     font-size: .74rem;
     color: var(--tw);
     margin: 0;
     line-height: 1.6;
 }

 /* ═════ 3.2.4 PRICING ═════ */
 .pricing-section {
     background: var(--iv);
 }

 .price-card {
     background: var(--wh);
     border-radius: var(--rl);
     overflow: hidden;
     box-shadow: var(--sc);
     transition: var(--tr);
     height: 100%;
     border: 2px solid transparent;
     position: relative;
 }

 .price-card.featured {
     border-color: var(--sf);
 }

 .price-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--sh);
 }

 .price-card-badge {
     position: absolute;
     top: 0;
     right: 0;
     background: var(--sf);
     color: #fff;
     padding: 6px 18px;
     font-size: .65rem;
     font-weight: 700;
     letter-spacing: .06em;
     border-radius: 0 0 0 14px;
 }

 .price-card-head {
     padding: 32px 28px 20px;
     text-align: center;
     border-bottom: 1px solid var(--be);
 }

 .price-card-head h4 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--ch);
     margin-bottom: 14px;
 }

 .price-amount {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.6rem;
     font-weight: 700;
     color: var(--sf);
     line-height: 1;
 }

 .price-period {
     font-size: .78rem;
     color: var(--tw);
 }

 .price-card-body {
     padding: 24px 28px 32px;
 }

 .price-feat {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: .8rem;
     color: var(--tw);
     margin-bottom: 12px;
 }

 .price-feat i {
     color: var(--sg);
     font-size: .8rem;
     width: 14px;
 }

 .price-note {
     font-size: .7rem;
     color: var(--tw);
     opacity: .7;
     margin-top: 16px;
     font-style: italic;
 }



 /* ═════ 3.9 CLOSING CTA ═════ */
 .closing-cta {
     background: var(--ch);
     padding: 90px 0;
     position: relative;
     overflow: hidden;
     text-align: center;
 }

 .closing-cta::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 50% 50%, rgba(232, 114, 42, .16) 0%, transparent 70%);
 }

 .closing-cta::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--sf), var(--gd), var(--sf));
 }

 .closing-cta h2 {
     font-family: 'Cormorant Garamond', serif;
     color: #fff;
     font-size: clamp(1.9rem, 3.8vw, 3.2rem);
     font-weight: 600;
 }

 .closing-cta h2 em {
     font-style: italic;
     color: var(--gdl);
 }

 .closing-cta .sub {
     font-size: .9rem;
     color: rgba(255, 255, 255, .55);
     line-height: 1.8;
     max-width: 500px;
     margin: 12px auto 0;
 }

 .cta-btns {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 36px;
 }

 .btn-brochure {
     background: transparent;
     color: var(--gdl);
     padding: 13px 28px;
     border-radius: 50px;
     border: 1.5px solid var(--gdl);
     font-size: .85rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--tr);
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .btn-brochure:hover {
     background: var(--gdl);
     color: var(--ch);
     transform: translateY(-2px);
 }

 /* FOOTER */
 .footer {
     background: var(--ch);
     padding: 64px 0 0;
 }

 .fbr h3 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.8rem;
     color: var(--sf);
     margin-bottom: 8px;
 }

 .fbr p {
     font-size: .78rem;
     color: rgba(255, 255, 255, .5);
     line-height: 1.7;
     max-width: 280px;
 }

 .fh {
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--sf);
     margin-bottom: 18px;
 }

 .fl {
     display: block;
     font-size: .8rem;
     color: rgba(255, 255, 255, .55);
     margin-bottom: 10px;
     transition: color .2s;
 }

 .fl:hover {
     color: var(--sfl);
 }

 .fci {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin-bottom: 14px;
 }

 .fci i {
     color: var(--sf);
     font-size: .9rem;
     margin-top: 2px;
     flex-shrink: 0;
 }

 .fci span {
     font-size: .78rem;
     color: rgba(255, 255, 255, .6);
     line-height: 1.5;
 }

 .fbot {
     border-top: 1px solid rgba(255, 255, 255, .08);
     padding: 20px 0;
     margin-top: 48px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
 }

 .fbot p {
     font-size: .72rem;
     color: rgba(255, 255, 255, .3);
     margin: 0;
 }

 .sic {
     display: flex;
     gap: 10px;
 }

 .si {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: rgba(255, 255, 255, .07);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .3s;
 }

 .si:hover {
     background: var(--sf);
 }

 .si i {
     color: rgba(255, 255, 255, .6);
     font-size: .85rem;
     transition: color .3s;
 }

 .si:hover i {
     color: #fff;
 }

 /* FLOATING */
 .fb {
     position: fixed;
     bottom: 28px;
     right: 24px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 999;
 }

 .fbt {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     transition: all .3s;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
 }

 .fwa {
     background: #25D366;
     color: #fff;
 }

 .fwa:hover {
     background: #20b957;
     transform: scale(1.1);
 }

 .fca {
     background: var(--sf);
     color: #fff;
 }

 .fca:hover {
     background: var(--br);
     transform: scale(1.1);
 }

 /* GALLERY LIGHTBOX */
 .lightbox {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .92);
     z-index: 9998;
     display: none;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(6px);
 }

 .lightbox.active {
     display: flex;
 }

 .lightbox img {
     max-width: 88%;
     max-height: 84vh;
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
 }

 .lightbox-close {
     position: absolute;
     top: 24px;
     right: 28px;
     background: rgba(255, 255, 255, .1);
     border: none;
     color: #fff;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     cursor: pointer;
     font-size: 1.1rem;
     transition: .2s;
 }

 .lightbox-close:hover {
     background: var(--sf);
 }

 @media(max-width:767px) {
     section {
         padding: 64px 0;
     }

     .hbtn {
         display: flex;
     }

     .nav-links-desktop {
         display: none !important;
     }

     .fbot {
         flex-direction: column;
         text-align: center;
     }

     .med-img-wrap img {
         height: 300px;
     }

     .footer-brand img {
         margin: auto;
     }

     .room-info-card {
         background: var(--wh);
         border-radius: var(--r);
         padding: 20px;
     }



 }

 .price-room-subtitle {
     margin: 6px 0 0;
     color: var(--tw);
     font-size: 0.82rem;
     font-weight: 400;
     line-height: 1.5;
 }