:root {
    --maroon: #7A2B17;
    --maroon-dark: #4A160C;
    --gold: #C58B35;
    --gold-light: #E0AB57;
    --sandstone: #FAF8F5;
    --cream: #FFFFFF;
    --ink: #1C1713;
    --ink-soft: #5C5248;
    --arch: 130px 130px 6px 6px;
    --shadow: 0 12px 36px -12px rgba(42, 24, 8, .10);
    --shadow-hover: 0 20px 48px -12px rgba(42, 24, 8, .16);
    --brown: #2A1808; 
    --deep: #1E1206; 
    --sand: #F7EBCB; 
    --brass: #DDAE4A;
    --bg: #FFFFFF; 
    --text: #221B14; 
    --muted: #6B5E52; 
    --line: rgba(42,24,8,.08);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --pad: clamp(16px, 4vw, 48px);
    box-sizing: border-box; 
    padding-top: env(safe-area-inset-top, 0px); 
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', var(--sans), sans-serif;
    color: var(--ink);
    background: #FFFFFF;
    overflow-x: hidden;
    font-weight: 400;
}

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

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

ul {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    color: var(--maroon-dark);
    line-height: 1.15;
}
/* The site is designed light only. A dark-mode override used to turn the page background
   dark brown for visitors whose phone/laptop is in dark mode, behind light sections. */
:root{color-scheme:light}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:linear-gradient(180deg,#E8BC55,var(--gold));color:var(--brown);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.25)}
.topbar{background:var(--deep);color:var(--sand);font-size:.8125rem;max-height:44px;overflow:hidden;transition:max-height .3s}
.scrolled .topbar{max-height:0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}
.topbar ul{display:flex;gap:22px;flex-wrap:wrap}
.topbar svg{width:16px;}
.topbar a{display:inline-flex;align-items:center;gap:8px;opacity:.88}
.topbar a:hover{opacity:1;color:var(--brass)}
.topbar img{width:50px;height:14px}
.topbar select{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:6px;font:inherit;padding:2px 6px}
.topbar select option{color:#000}
.mainbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.01em;line-height:1}
.logo img{width:90px;height:55px;flex:none;color:var(--brown)}
.site-footer .logo img{color:var(--brass)}
.site-footer .logo small{color:var(--brass)}
.site-header :focus-visible{outline-color:var(--maroon)}
.logo small{display:block;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;color:var(--maroon);margin-top:5px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:6px}
.nav-backdrop{display:none}
.nav-header{display:none}
/* Bootstrap's own .nav sets flex-wrap:wrap — keep the desktop menu on one line */
@media (min-width:961px){
  .site-header .nav{flex-wrap:nowrap;margin:0}
  .site-header .nav>li>a,.site-header .nav>li>button{white-space:nowrap}
  .site-header .actions .btn{white-space:nowrap}
}
@media (min-width:961px) and (max-width:1180px){
  .site-header .mainbar{gap:12px}
  .site-header .nav{gap:0}
  .site-header .nav>li>a,.site-header .nav>li>button{padding:10px 9px;font-size:.88rem}
  .site-header .logo img{width:76px;height:46px}
  .site-header .actions .btn{padding:12px 18px}
}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:8px;font-weight:500;font-size:.95rem}
.nav>li>a:hover,.nav>li>button:hover,.nav a[aria-current="page"]{color:var(--maroon)}
.chev{width:12px;height:12px;transition:transform .2s}
[aria-expanded="true"]>.chev{transform:rotate(180deg)}
.sub{position:absolute;left:0;top:calc(100% + 6px);min-width:230px;background:#fff;color:var(--text);border-radius:12px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.sub a{display:block;padding:10px 12px;border-radius:8px;font-size:.92rem}
.sub a span{display:block;font-size:.78rem;color:#6E5A41}
.sub a:hover{background:var(--sand)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.open>.sub{opacity:1;visibility:visible;transform:none}
.actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;background:var(--maroon);color:#FBE9B7;font-weight:600;font-size:.75rem;transition:background .2s,transform .2s}
.btn:hover{background:#9A3A20}
.btn:active{transform:scale(.97)}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(42,24,8,.35);align-items:center;justify-content:center;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--brown);border-radius:2px;transition:.25s;content:"";position:relative}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
.open-menu .burger span{background:transparent}
.open-menu .burger span::before{top:0;transform:rotate(45deg)}
.open-menu .burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:960px){
  .burger{display:inline-flex}
  .topbar .hide-sm{display:none}
  .mainbar{min-height:66px}
  .actions .btn{padding:10px 16px;font-size:.875rem}

  /* Hide header action button & burger when side drawer is open */
  .open-menu .actions .btn{
    display:none !important;
  }
  .open-menu .burger{
    opacity:0;
    pointer-events:none;
  }

  /* Side Drawer Backdrop */
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(20,12,6,0.65);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:9998;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .open-menu .nav-backdrop{
    opacity:1;
    visibility:visible;
  }

  /* Side Drawer */
  .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(320px, 85vw);
    height:100vh;
    height:100dvh;
    background:linear-gradient(180deg, #241506 0%, #150d05 100%);
    color:#FAF6EC;
    z-index:9999;
    padding:16px 20px 30px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap !important;
    align-items:stretch;
    gap:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-shadow:-10px 0 35px rgba(0,0,0,0.5);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .35s cubic-bezier(0.16, 1, 0.3, 1), visibility .35s ease;
  }
  .open-menu .nav{
    transform:translateX(0);
    visibility:visible;
  }

  .nav>li{
    width:100% !important;
    flex-shrink:0 !important;
    position:relative;
    list-style:none;
  }

  .nav-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    flex-shrink:0 !important;
    padding:4px 0 16px !important;
    border-bottom:1px solid rgba(221,174,74,0.25) !important;
    margin-bottom:10px !important;
  }
  .nav-brand{
    font-family:var(--serif);
    font-size:1.35rem;
    font-weight:600;
    color:var(--gold);
    letter-spacing:.04em;
  }
  .nav-close{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(221,174,74,0.35);
    color:#FAF6EC;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    line-height:1;
    margin-left:auto;
    transition:background .2s, color .2s, border-color .2s;
  }
  /* the global `.nav>li>button` toggle style also matches this button; reset what it sets */
  .nav>li.nav-header>.nav-close{
    padding:0;
    flex:0 0 36px;
    border-radius:50%;
  }
  .nav-close:hover{
    background:var(--gold);
    color:#241506;
    border-color:var(--gold);
  }

  .nav>li>a,.nav>li>button:not(.nav-close){
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 4px !important;
    border-radius:0 !important;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,0.08) !important;
    font-size:1.05rem !important;
    color:#FAF6EC !important;
    background:transparent !important;
    text-align:left !important;
    box-shadow:none !important;
  }
  .nav>li>a:hover,.nav>li>button:not(.nav-close):hover,.nav a[aria-current="page"]{
    color:var(--gold) !important;
  }
  .sub{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    display:none;
    width:100% !important;
    background:rgba(0,0,0,0.25) !important;
    border:1px solid rgba(221,174,74,0.15) !important;
    border-radius:10px !important;
    color:#FAF6EC !important;
    box-shadow:none !important;
    padding:6px 10px !important;
    margin:8px 0 12px !important;
    list-style:none;
  }
  .has-sub.open>.sub{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  .sub li{
    width:100% !important;
    list-style:none;
  }
  .sub a{
    display:block !important;
    width:100% !important;
    color:#E8D9B5 !important;
    padding:9px 10px !important;
    font-size:.95rem !important;
    border-radius:6px !important;
    transition:background .2s, color .2s !important;
  }
  .sub a span{
    display:block !important;
    color:#A89575 !important;
    font-size:.8rem !important;
    margin-top:2px !important;
  }
  .sub a:hover{
    background:rgba(221,174,74,0.15) !important;
    color:var(--gold) !important;
  }
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{display:none}

  .mobile-book{
    display:block !important;
    width:100% !important;
    flex-shrink:0 !important;
    margin-top:20px !important;
    padding-bottom:24px !important;
  }
  .mobile-book .btn{
    display:block !important;
    width:100% !important;
    padding:13px 20px !important;
    font-size:.95rem !important;
    font-weight:600 !important;
    background:var(--gold) !important;
    color:#241506 !important;
    border-radius:8px !important;
    border:none !important;
    text-align:center !important;
    text-decoration:none !important;
  }
  .mobile-book .btn:hover{background:#e8c067 !important}
}
@media (max-width:420px){
  .logo{font-size:1.25rem}.logo img{width:90px;height:52px}
  .topbar svg{width:22px;}
  .actions .btn{display:none}
}
.mobile-book{display:none}

/* ---------- Footer ---------- */
.site-footer{margin-top:auto;background:var(--deep);border-top:4px solid var(--gold);color:#E8D9B5;font-size:.95rem}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);padding-block:clamp(44px,7vw,80px) 40px}
.site-footer h3{font:600 1.05rem/1.3 var(--serif);color:#fff;margin:0 0 16px}
.f-brand p{margin:16px 0 20px;max-width:34ch;color:#C9B58C}
.site-footer li+li{margin-top:10px}
.site-footer a:hover{color:var(--brass)}
.contact li{display:flex;gap:10px;align-items:flex-start}
.contact svg{width:16px;height:16px;margin-top:5px;flex:none;color:var(--brass)}
.social{display:flex;gap:10px}
.social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:.2s}
.social a:hover{background:var(--brass);border-color:var(--brass);color:#1a1405}
.social svg{width:18px;height:18px}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:22px calc(22px + 4px);font-size:.85rem;color:#B09B75}
.f-bottom ul{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:960px){.f-top{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media (max-width:560px){
  .f-top{grid-template-columns:1fr 1fr;gap:32px 20px}
  .f-contact{grid-column:1/-1}
    .f-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


.eyebrow {
    font-family: 'Cinzel', serif;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .6em;
}

.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: 'Cinzel', serif;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 15px 32px;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s ease;
    font-weight: 600;
}

.btn-gold {
    background: var(--gold);
    color: var(--maroon-dark);
}

.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
}

.btn-line {
    border-color: var(--maroon);
    color: var(--maroon);
}

.btn-line:hover {
    background: var(--maroon);
    color: var(--cream);
}

.btn-cream {
    background: transparent;
    border-color: rgba(250, 246, 236, .6);
    color: var(--cream);
}

.btn-cream:hover {
    background: var(--cream);
    color: var(--maroon-dark);
}

/* ---------- ARCH SIGNATURE ---------- */
.arch-frame {
    border-radius: var(--arch);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(198, 152, 43, .5);
}

.arch-frame::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 3px rgba(233, 205, 138, .25);
}

.divider-jaali {
    height: 34px;
    background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--sandstone) 10px);
    background-size: 20px 20px;
    background-position: top;
    background-color: var(--cream);
}

/* ============ HERO SLIDER ============ */
  .hero-slider{
    position:relative;
    width:100%;
    height:calc(100vh - 90px);
    min-height:520px;
    max-height:850px;
    overflow:hidden;
    color:#ffffff;
  }

  .hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.1s ease-in-out;
    z-index:1;
  }
  .hero-slide.is-active{
    opacity:1;
    z-index:2;
  }

  .hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    /* slow subtle zoom while a slide is active */
    transform:scale(1.06);
    transition:transform 7s ease-out;
  }
  .hero-slide.is-active img{
    transform:scale(1);
  }

  .hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(36,28,22,.35) 0%, rgba(36,28,22,.25) 40%, rgba(36,28,22,.75) 100%);
  }

  .hero-content{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 6vw 85px;
    pointer-events:none;
  }

  .hero-eyebrow{
    font-size:.85rem;
    letter-spacing:.14em;
    color:var(--gold-400);
    margin-bottom:14px;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .7s ease .35s, transform .7s ease .35s;
  }

  .hero-title{
    font-family:'Fraunces', serif;
    color: #ffffff;
    font-weight:500;
    font-size:clamp(2.1rem, 5.6vw, 4.6rem);
    line-height:1.05;
    max-width:14ch;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s ease .5s, transform .8s ease .5s;
  }

  .hero-desc{
    font-size:clamp(.95rem, 1.4vw, 1.15rem);
    color:#F6EEE1;
    max-width:46ch;
    margin-top:18px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s ease .65s, transform .8s ease .65s;
  }

  .hero-slide.is-active .hero-eyebrow,
  .hero-slide.is-active .hero-title,
  .hero-slide.is-active .hero-desc{
    opacity:1;
    transform:translateY(0);
  }

  .hero-actions{
    margin-top:32px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    pointer-events:auto;
  }

  .btn{
    font-family:'Work Sans', sans-serif;
    font-size:.95rem;
    font-weight:500;
    padding:14px 28px;
    border-radius:2px;
    text-decoration:none;
    display:inline-block;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
    cursor:pointer;
    border:1px solid transparent;
  }
  .btn-primary{
    background:#B4603A;
    color:#ffffff;
  }
  .btn-primary:hover{ background:#8F4A2C; }

  .btn-outline{
    border-color:rgba(255,255,255,.65);
    color:#ffffff;
    background:transparent;
  }
  .btn-outline:hover{
    background:rgba(255,255,255,.12);
  }

  /* brand mark, top-left */
  .hero-brand{
    position:absolute;
    top:28px;
    left:6vw;
    z-index:6;
    font-family:'Fraunces', serif;
    font-size:1.15rem;
    letter-spacing:.02em;
    color:#ffffff;
  }
  .hero-brand span{ color:#D9A857; }

  /* ============ ARROWS ============ */
  .hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:6;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(36,28,22,.25);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease;
  }
  .hero-arrow:hover{
    background:rgba(255,255,255,.18);
    border-color:#ffffff;
  }
  .hero-arrow svg{ width:18px; height:18px; }
  .hero-arrow.prev{ left:24px; }
  .hero-arrow.next{ right:24px; }

  /* ============ DOTS ============ */
  .hero-dots{
    position:absolute;
    z-index:6;
    right:6vw;
    bottom:35px;
    display:flex;
    gap:10px;
  }
  .hero-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    border:none;
    padding:0;
    transition:background .25s ease, transform .25s ease;
  }
  .hero-dot.is-active{
    background:#D9A857;
    transform:scale(1.25);
  }

  /* progress bar under dots area (slide timer) */
  .hero-progress{
    position:absolute;
    left:0;
    bottom:0;
    height:3px;
    background:#D9A857;
    width:0%;
    z-index:6;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .hero-slider{
      height:calc(100svh - 85px);
      min-height:480px;
      max-height:640px;
    }
    .hero-content{ padding:0 6vw 65px; }
    .hero-dots{ right:6vw; bottom:25px; }
    .hero-arrow{ width:40px; height:40px; }
    .hero-arrow.prev{ left:14px; }
    .hero-arrow.next{ right:14px; }
  }

  @media (max-width:560px){
    .hero-slider{
      height:calc(100svh - 80px);
      min-height:440px;
      max-height:560px;
    }
    .hero-title{
      max-width:16ch;
      font-size:clamp(1.75rem, 6.8vw, 2.3rem);
    }
    .hero-content{ padding:0 20px 48px; }
    .hero-dots{ right:20px; bottom:16px; }
    .hero-desc{ display:none; } /* keep mobile hero lean & legible */
    .hero-actions{ margin-top:18px; gap:10px; }
    .btn{ padding:11px 20px; font-size:.88rem; }
    .hero-arrow{ display:none; } /* swipe replaces arrows on small screens */
  }

  @media (prefers-reduced-motion: reduce){
    .hero-slide, .hero-slide img, .hero-eyebrow, .hero-title, .hero-desc{
      transition:none !important;
    }
  }



/* ---------- SEARCH BAR ---------- */
.search-wrap {
    position: relative;
    z-index: 20;
    background: #fff; /* body is dark brown; without this it showed behind the search card */
    scroll-margin-top: 140px; /* "Book now" jump lands below the sticky header */
}

.search-card {
    background: var(--cream);
    border-radius: 20px;
    box-shadow: 0 24px 60px -24px rgba(65, 18, 26, .45), 0 2px 6px rgba(65, 18, 26, .06);
    margin: -44px auto 0;
    max-width: 1120px;
    padding: 22px 22px 22px 30px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(300px, 1.7fr) auto;
    align-items: center;
    gap: 0;
    border-top: 3px solid var(--gold);
    position: relative;
}

.search-card .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 22px;
    border-right: 1px solid #e6d8bd;
    border-radius: 12px;
    transition: background .2s;
}

.search-card .field:first-child { padding-left: 0; }
.search-card .field:last-of-type { border-right: none; }
.search-card .field:focus-within { background: rgba(221, 174, 74, .12); }
.search-card .field:first-child:focus-within { padding-left: 12px; }

.search-card .field label {
    font-family: 'Cinzel', serif;
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--maroon);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.search-card .field input {
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    padding: 2px 0;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.search-card .field input:focus { outline: none; }
.search-card .field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
.search-card .field input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.guests-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 22px;
}

.counter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: .78rem;
    color: #6b5a48;
}

.counter .ctrl {
    display: flex;
    gap: 10px;
    align-items: center;
}

.counter .ctrl span {
    min-width: 16px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

.counter button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(109, 31, 42, .45);
    background: #fff;
    color: var(--maroon);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s, color .2s, border-color .2s;
}

.counter button:hover:not(:disabled) { background: var(--maroon); border-color: var(--maroon); color: #fbe9b7; }
.counter button:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.counter button:disabled { opacity: .35; cursor: not-allowed; }

.search-card .btn-search {
    height: 60px;
    padding: 0 30px;
    white-space: nowrap;
    border-radius: 14px;
    background: var(--maroon);
    color: #fbe9b7;
    font-size: .74rem;
    margin-left: 8px;
    box-shadow: 0 10px 22px -10px rgba(109, 31, 42, .7);
}

.search-card .btn-search:hover { background: var(--maroon-dark); transform: translateY(-2px); }

.search-msg {
    max-width: 1120px;
    margin: 10px auto 0;
    min-height: 1.2em;
    text-align: center;
    font-size: .88rem;
}

.search-msg.is-error { color: #a4231c; font-weight: 500; }

/* Result of a search, shown above the room cards */
.rooms-notice {
    max-width: 760px;
    margin: -24px auto 32px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e6d8bd;
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    text-align: center;
    color: var(--ink);
    line-height: 1.6;
}

.rooms-notice small { color: #6b5a48; }

@media (max-width: 1100px) {
    .search-card {
        grid-template-columns: 1fr 1fr;
        margin: 20px 20px 0;
        padding: 20px 24px;
        row-gap: 12px;
    }
    .search-card .field:nth-child(2) { border-right: none; }
    .search-card .field-guests {
        grid-column: 1 / -1;
        padding-left: 0;
        border-top: 1px solid #e6d8bd;
        border-radius: 0;
        padding-top: 16px;
    }
    .search-card .btn-search { grid-column: 1 / -1; margin-left: 0; width: 100%; }
}

@media (max-width: 768px) {
    .search-card { margin: 20px 16px 0; padding: 18px; }
    .search-card .field { padding: 6px 0; }
    .search-card .field:first-child { padding-right: 14px; }
    .search-card .field:nth-child(2) { padding-left: 14px; }
    .search-card .field:first-child:focus-within { padding-left: 0; }
    .guests-grid { gap: 14px; justify-content: space-between; }
}

@media (max-width: 400px) {
    .search-card { grid-template-columns: 1fr; }
    .search-card .field:first-child { border-right: none; border-bottom: 1px solid #e6d8bd; border-radius: 0; padding: 6px 0 12px; }
    .search-card .field:nth-child(2) { padding-left: 0; }
    .guests-grid { gap: 8px; }
    .counter .ctrl { gap: 6px; }
    .counter button { width: 26px; height: 26px; }
}

/* ---------- SECTION SHELL ---------- */
section {
    padding: 100px 0 100px;
    position: relative;
}

.section-head {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-top: 14px;
}

.section-head p {
    color: var(--ink-soft);
    margin-top: 16px;
    font-size: .98rem;
}

.section-head.left {
    margin: 0 0 40px;
    text-align: left;
}

/* ---------- ACTIVITIES ---------- */
.activities-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.activity-card {
    position: relative;
    border-radius: 18px 18px 6px 6px;
    overflow: hidden;
    height: 340px;
    box-shadow: var(--shadow);
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.activity-card:hover img {
    transform: scale(1.08);
}

.activity-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(42, 18, 12, .92) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: var(--cream);
}

.activity-card .overlay span {
    font-family: 'Cinzel';
    font-size: .6rem;
    letter-spacing: .14em;
    color: var(--gold-light);
    text-transform: uppercase;
}

.activity-card .overlay h4 {
    color: var(--cream);
    font-size: 1.3rem;
    margin-top: 8px;
}

.activity-card .overlay p {
    font-size: .82rem;
    color: #eaddcb;
    margin-top: 8px;
    font-weight: 300;
}

.activity-meta {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(233, 205, 138, .25);
}

.activity-meta div {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    color: var(--gold-light);
    font-family: 'Jost';
    font-weight: 400;
}

.activity-meta i {
    font-size: .78rem;
}

.activity-meta .price b {
    font-family: 'Cormorant Garamond';
    font-size: 1.05rem;
    color: var(--cream);
    font-weight: 700;
    margin-left: 2px;
}

/* ---------- ROOMS ---------- */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 30px;
}

.room-card {
    background: var(--cream);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid #ecdfc4;
}

.room-media {
    position: relative;
    height: 230px;
    overflow: hidden;
    border-radius: 0 0 90px 0;
}

.room-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.room-price-tag {
    position: static;
    display: block;
    background: transparent;
    color: var(--gold);
    font-family: inherit;
    font-size: 1.15rem;
    letter-spacing: normal;
    padding: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 12px;
}

.room-price-tag b {
    font-family: 'Fraunces', serif;
    font-size: 1.45rem;
    color: var(--maroon);
    margin-left: 0;
}

.room-body {
    padding: 24px 26px 26px;
}

.room-body h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.room-body p {
    font-size: .86rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 16px;
    min-height: 44px;
}

.room-amenities {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--maroon);
    font-size: .9rem;
}

.room-actions {
    display: flex;
    gap: 10px;
}

.room-actions .btn {
    flex: 1;
    padding: 12px 10px;
    font-size: .64rem;
}

/* ---------- NEARBY ---------- */
.nearby {
    background: var(--sandstone);
}

.nearby-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.nearby-item {
    display: flex;
    gap: 18px;
    align-items: center;
    background: var(--cream);
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid #ecdfc4;
}

.nearby-item .num {
    font-family: 'Cormorant Garamond';
    font-size: 1.9rem;
    color: var(--gold);
    font-weight: 700;
    min-width: 34px;
}

.nearby-item h4 {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.nearby-item p {
    font-size: .9rem;
    color: var(--ink-soft);
}

.nearby-item .dist {
    margin-left: auto;
    font-family: 'Cinzel';
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--maroon);
    border: 1px solid var(--maroon);
    padding: 6px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/*amenities*/
.hdb-amenities-section {

    --amenity-primary: #c58b35;
    --amenity-primary-dark: #9e6924;
    --amenity-dark: #211a14;
    --amenity-light: #f8f5ef;
    --amenity-text: #333;
    --amenity-muted: #777;

    padding: 100px 0;

    background: var(--amenity-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--amenity-text);

}


.hdb-amenities-section *,
.hdb-amenities-section *::before,
.hdb-amenities-section *::after {

    box-sizing: border-box;

}


.hdb-amenities-container {

    width: min(1180px, 92%);

    margin: auto;

}

.hdb-amenities-heading {

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;

}


.hdb-amenities-heading > span {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--amenity-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

}


.hdb-amenities-heading h2 {

    margin: 0 0 18px;

    color: var(--amenity-dark);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.2;

}


.hdb-amenities-heading p {

    max-width: 700px;

    margin: auto;

    color: var(--amenity-muted);

    font-size: 16px;

    line-height: 1.8;

}


.hdb-amenities-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

.hdb-amenity-card {

    display: flex;

    gap: 20px;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #e9e2d8;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.hdb-amenity-card:hover {

    transform: translateY(-6px);

    border-color: var(--amenity-primary);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

}

.hdb-amenity-icon {

    width: 54px;

    height: 54px;

    min-width: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--amenity-dark);

    transition: .3s ease;

}


.hdb-amenity-card:hover
.hdb-amenity-icon {

    background: var(--amenity-primary);

}


.hdb-amenity-icon svg {

    width: 25px;

    height: 25px;

    fill: var(--amenity-primary);

}


.hdb-amenity-card:hover
.hdb-amenity-icon svg {

    fill: #ffffff;

}

.hdb-amenity-number {

    display: block;

    margin-bottom: 4px;

    color: var(--amenity-primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


.hdb-amenity-card h3 {

    margin: 0 0 8px;

    color: var(--amenity-dark);

    font-size: 19px;

    line-height: 1.3;

}


.hdb-amenity-card p {

    margin: 0;

    color: var(--amenity-muted);

    font-size: 13.5px;

    line-height: 1.7;

}

.hdb-amenities-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;

    padding: 35px 40px;

    background: var(--amenity-dark);

}


.hdb-amenities-bottom > div {

    max-width: 700px;

}


.hdb-amenities-bottom span {

    display: block;

    margin-bottom: 7px;

    color: var(--amenity-primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hdb-amenities-bottom h3 {

    margin: 0;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.3;

}


.hdb-amenities-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    padding: 14px 24px;

    background: var(--amenity-primary);

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;

}


.hdb-amenities-button:hover {

    background: var(--amenity-primary-dark);

}


.hdb-amenities-button b {

    font-size: 19px;

    font-weight: 400;

}

@media (max-width: 992px) {

    .hdb-amenities-section {

        padding: 75px 0;

    }


    .hdb-amenities-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}

@media (max-width: 767px) {

    .hdb-amenities-section {

        padding: 60px 0;

    }


    .hdb-amenities-container {

        width: 90%;

    }


    .hdb-amenities-heading {

        margin-bottom: 35px;

    }


    .hdb-amenities-heading h2 {

        font-size: 31px;

    }


    .hdb-amenities-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .hdb-amenity-card {

        padding: 25px 20px;

    }


    .hdb-amenities-bottom {

        flex-direction: column;

        align-items: flex-start;

        padding: 30px 25px;

    }


    .hdb-amenities-bottom h3 {

        font-size: 22px;

    }


    .hdb-amenities-button {

        width: 100%;

        justify-content: center;

    }

}

@media (max-width: 480px) {

    .hdb-amenity-card {

        gap: 15px;

    }


    .hdb-amenity-icon {

        width: 48px;

        height: 48px;

        min-width: 48px;

    }


    .hdb-amenity-icon svg {

        width: 22px;

        height: 22px;

    }


    .hdb-amenity-card h3 {

        font-size: 18px;

    }

}

.hdb-nearby-section {

    --nearby-primary: #c58b35;
    --nearby-primary-dark: #9e6924;
    --nearby-dark: #211a14;
    --nearby-light: #f8f5ef;
    --nearby-text: #333333;
    --nearby-muted: #777777;

    padding: 100px 0;

    background: var(--nearby-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--nearby-text);

}


.hdb-nearby-section *,
.hdb-nearby-section *::before,
.hdb-nearby-section *::after {

    box-sizing: border-box;

}


.hdb-nearby-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* ============================================
   HEADING
   ============================================ */

.hdb-nearby-heading {

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;

}


.hdb-nearby-heading > span {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--nearby-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

}


.hdb-nearby-heading h2 {

    margin: 0 0 18px;

    color: var(--nearby-dark);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.2;

}


.hdb-nearby-heading p {

    max-width: 720px;

    margin: auto;

    color: var(--nearby-muted);

    font-size: 16px;

    line-height: 1.8;

}


/* ============================================
   GRID
   ============================================ */

.hdb-attractions-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


/* ============================================
   CARD
   ============================================ */

.hdb-attraction-card {

    position: relative;

    min-height: 285px;

    display: flex;

    flex-direction: column;

    padding: 28px 25px 25px;

    background: #ffffff;

    border: 1px solid #e6dfd5;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.hdb-attraction-card:hover {

    transform: translateY(-7px);

    border-color: var(--nearby-primary);

    box-shadow:
        0 18px 40px rgba(0,0,0,.09);

}


/* ============================================
   TOP
   ============================================ */

.hdb-attraction-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

}


.hdb-attraction-number {

    color: var(--nearby-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.hdb-attraction-tag {

    padding: 5px 9px;

    background: #f5efe6;

    color: var(--nearby-primary-dark);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

}


/* ============================================
   ICON
   ============================================ */

.hdb-attraction-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    background: var(--nearby-dark);

    color: var(--nearby-primary);

    font-size: 16px;

    transform: rotate(45deg);

    transition: .3s ease;

}


.hdb-attraction-icon::first-letter {

    display: inline-block;

}


.hdb-attraction-card:hover
.hdb-attraction-icon {

    background: var(--nearby-primary);

    color: #ffffff;

}


/* ============================================
   TITLE
   ============================================ */

.hdb-attraction-content,
.hdb-attraction-card h3,
.hdb-attraction-card p {

    position: relative;

}


.hdb-attraction-card h3 {

    margin: 0 0 10px;

    color: var(--nearby-dark);

    font-size: 20px;

    line-height: 1.3;

}


/* ============================================
   DESCRIPTION
   ============================================ */

.hdb-attraction-card p {

    margin: 0 0 18px;

    color: var(--nearby-muted);

    font-size: 13.5px;

    line-height: 1.7;

}


/* ============================================
   LINK
   ============================================ */

.hdb-attraction-card a {
    margin-top: 10px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    color: var(--nearby-primary-dark);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}


.hdb-attraction-card a b {

    font-size: 18px;

    font-weight: 400;

    transition: .25s ease;

}


.hdb-attraction-card a:hover b {

    transform: translateX(5px);

}


/* ============================================
   BOTTOM CTA
   ============================================ */

.hdb-nearby-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;

    padding: 38px 45px;

    background: var(--nearby-dark);

}


.hdb-nearby-bottom-content {

    max-width: 750px;

}


.hdb-nearby-bottom-content > span {

    display: block;

    margin-bottom: 7px;

    color: var(--nearby-primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hdb-nearby-bottom-content h3 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.3;

}


.hdb-nearby-bottom-content p {

    margin: 0;

    color: #cccccc;

    font-size: 14px;

}


.hdb-nearby-button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    padding: 14px 24px;

    background: var(--nearby-primary);

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;

}


.hdb-nearby-button:hover {

    background: var(--nearby-primary-dark);

}


.hdb-nearby-button b {

    font-size: 19px;

    font-weight: 400;

}


/* ============================================
   LARGE TABLET
   ============================================ */

@media (max-width: 1100px) {

    .hdb-attractions-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


/* ============================================
   TABLET
   ============================================ */

@media (max-width: 850px) {

    .hdb-nearby-section {

        padding: 75px 0;

    }


    .hdb-attractions-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 600px) {

    .hdb-nearby-section {

        padding: 60px 0;

    }


    .hdb-nearby-container {

        width: 90%;

    }


    .hdb-nearby-heading {

        margin-bottom: 35px;

    }


    .hdb-nearby-heading h2 {

        font-size: 31px;

    }


    .hdb-attractions-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .hdb-attraction-card {

        min-height: auto;

        padding: 25px 22px;

    }


    .hdb-attraction-icon {

        width: 52px;

        height: 52px;

        margin-bottom: 18px;

    }


    .hdb-nearby-bottom {

        flex-direction: column;

        align-items: flex-start;

        padding: 30px 25px;

        margin-top: 30px;

    }


    .hdb-nearby-bottom-content h3 {

        font-size: 22px;

    }


    .hdb-nearby-button {

        width: 100%;

        justify-content: center;

    }

}

/* ---------- BOOK CTA ---------- */
.book-cta {
    background: linear-gradient(rgba(42, 18, 12, .82), rgba(42, 18, 12, .9)), url('https://picsum.photos/seed/haveli-courtyard/1600/700') center/cover;
    color: var(--cream);
    text-align: center;
}

.book-cta h2 {
    color: var(--cream);
}

.book-cta p {
    max-width: 520px;
    margin: 18px auto 30px;
    color: #eaddcb;
}




section.contact-hero {
    text-align: center !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {

    .rooms-grid,
    .activities-scroll {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* search bar responsive rules live with the SEARCH BAR block */
}


@media (max-width: 768px) {
    /* =========================
       SECTIONS
    ========================= */

    section {
        padding: 70px 0 60px;
    }


    /* =========================
       GRIDS
    ========================= */

    .rooms-grid,
    .activities-scroll,
    .amenities-grid,
    .nearby-list {
        grid-template-columns: 1fr;
    }


}


/* =========================
          PRIVACY POLICY
        ========================= */


.rooms-page {
    width: 100%;
    overflow: hidden;
}

.privacy-hero-content {
    text-align: center;
}

/* =========================
           HERO
        ========================= */
.rooms-hero {
    position: relative;
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)),
        url("assets/images/p&t-banner.jpg") center center / cover no-repeat;
}

.rooms-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 43px);
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
}


.privacy-section h2 {
    margin: 10px 0px;
}

/* =========================
           INTRO
        ========================= */
.rooms-intro {
    max-width: 920px;
    margin: 0 auto;
    padding: 38px 20px 18px;
    text-align: center;
}

.rooms-intro h2 {
    margin: 0 0 8px;
    color: #171717;
    font-size: clamp(22px, 2.5vw, 27px);
    font-weight: 500;
    letter-spacing: 1px;
}

.rooms-intro p {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.8;
}

/* =========================
           ROOM GROUP
        ========================= */
.room-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 15px 20px 55px;
}

.room-title {
    text-align: left;
    margin: 0 0 24px;
}

.room-title h3 {
    display: inline-block;
    position: relative;
    margin: 0;
    color: #161616;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1.2px;
}

/* small gold decorative mark */
.room-title h3::after {
    content: "〰";
    display: block;
    color: #e5aa32;
    font-size: 22px;
    line-height: 15px;
    margin-top: 5px;
    font-weight: 400;
}

.room-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.room-item {
    min-width: 0;
}

.room-image {
    width: 100%;
    height: 235px;
    display: block;
    object-fit: cover;
    background: #eee;
}

.room-item h4 {
    margin: 16px 0 2px;
    color: #555;
    font-size: 13px;
    font-weight: 500;
}

.room-item p {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
}

.room-item strong {
    color: #555;
    font-weight: 500;
}

.room-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 21px;
    border: 0;
    border-radius: 0;
    background: #e7ad37;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .25s ease;
}

.book-btn:hover {
    background: #cf9624;
    color: #fff;
    transform: translateY(-1px);
}

/* =========================
           BOTTOM TAGLINE
        ========================= */
.rooms-bottom {
    max-width: 820px;
    margin: 0 auto;
    padding: 5px 20px 58px;
    text-align: center;
}

.rooms-bottom .decor {
    color: #e5aa32;
    font-size: 24px;
    line-height: 1;
}

.rooms-bottom h4 {
    margin: 7px 0 22px;
    color: #222;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
}

.rooms-bottom .line {
    height: 1px;
    background: #eee;
    width: 78%;
    margin: 0 auto;
}

/* =========================
           MOBILE
        ========================= */
@media (max-width: 991.98px) {
    .rooms-hero {
        min-height: 220px;
    }

    .room-columns {
        gap: 20px;
    }

    .room-image {
        height: 210px;
    }
}

@media (max-width: 767.98px) {
    .rooms-hero {
        min-height: 190px;
    }

    .rooms-hero h1 {
        padding: 0 18px;
        letter-spacing: 1px;
    }

    .rooms-intro {
        padding-top: 30px;
    }

    .rooms-intro p {
        font-size: 12px;
    }

    .room-section {
        padding: 12px 18px 45px;
    }

    .room-title {
        margin-bottom: 20px;
    }

    .room-title h3 {
        font-size: 18px;
    }

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

    .room-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .room-item p {
        font-size: 12px;
    }

    .room-action {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .book-btn {
        width: auto;
    }

    .rooms-bottom {
        padding-bottom: 40px;
    }

    .rooms-bottom h4 {
        font-size: 13px;
        line-height: 1.7;
        letter-spacing: 1px;
    }
}

@media (max-width: 420px) {
    body {
        font-size: 12px;
    }

    .rooms-hero {
        min-height: 165px;
    }

    .rooms-intro {
        padding-left: 15px;
        padding-right: 15px;
    }

    .room-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .book-btn {
        width: 100%;
    }
}








/* ========================ACCOMMODATION=============================
           PAGE WRAPPER
        ====================================================== */

.rooms-page {
    width: 100%;

    overflow: hidden;
}


/* =====================================================
           HERO SECTION
        ====================================================== */

.rooms-hero {
    position: relative;

    width: 100%;

    min-height: 245px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.20)),
        url("assets/images/rooms-banner.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.rooms-hero-title {
    margin: 0;

    padding: 15px;

    color: #ffffff;

    font-size: clamp(28px, 4vw, 43px);

    font-weight: 400;

    line-height: 1.3;

    letter-spacing: 2px;

    text-align: center;
}


/* =====================================================
           INTRO SECTION
        ====================================================== */

.rooms-intro {
    padding-top: 38px;

    padding-bottom: 22px;
}


.rooms-intro h2 {
    margin: 0 0 10px;

    color: #191919;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 1px;
}


.rooms-intro p {
    max-width: 900px;

    margin: 0 auto;

    color: #777777;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.85;
}


.rooms-intro strong {
    color: #555555;

    font-weight: 600;
}


/* =====================================================
           ROOM SECTION
        ====================================================== */

.room-section {
    padding-top: 18px;

    padding-bottom: 48px;
}


/* =====================================================
           ROOM HEADING
        ====================================================== */

.room-heading {
    margin-bottom: 27px;

    text-align: center;
}


.room-heading h3 {
    position: relative;

    display: inline-block;

    margin: 0;

    color: #171717;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 1.4px;
}


.room-heading h3::after {
    content: "〰";

    display: block;

    margin-top: 5px;

    color: #e6ad39;

    font-size: 23px;

    font-weight: 400;

    line-height: 12px;
}


/* =====================================================
           ROOM CARD
        ====================================================== */

.room-card {
    width: 100%;

    height: 100%;
}


/* =====================================================
           ROOM IMAGE
        ====================================================== */

.room-card-image {
    display: block;

    width: 100%;

    height: 235px;

    object-fit: cover;

    object-position: center center;

    background: #eeeeee;
}


/* =====================================================
           ROOM CONTENT
        ====================================================== */

.room-card-content {
    padding-top: 14px;
}


.room-card-title {
    margin: 0 0 3px;

    color: #555555;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.6;
}


.room-card-text {
    margin: 0;

    color: #777777;

    font-size: 11.5px;

    font-weight: 400;

    line-height: 1.75;
}


.room-card-text strong {
    color: #555555;

    font-weight: 500;
}


/* =====================================================
           BOOK BUTTON
        ====================================================== */

.room-button-wrapper {
    margin-top: 20px;

    text-align: right;
}


.room-book-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 9px 20px;

    border: 0;

    border-radius: 0;

    background: #e5aa35;

    color: #ffffff;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.5px;

    text-align: center;

    text-transform: uppercase;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.room-book-btn:hover {
    background: #ce9525;

    color: #ffffff;

    transform: translateY(-1px);
}


/* =====================================================
           BOTTOM SECTION
        ====================================================== */

.rooms-bottom {
    padding-top: 5px;

    padding-bottom: 55px;
}


.rooms-bottom-decoration {
    margin-bottom: 7px;

    color: #e5aa35;

    font-size: 23px;

    line-height: 1;

    text-align: center;
}


.rooms-bottom-title {
    margin: 0 0 22px;

    color: #222222;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.6;

    letter-spacing: 2px;

    text-align: center;
}


.rooms-bottom-line {
    width: 70%;

    height: 1px;

    margin: 0 auto;

    background: #eeeeee;
}


/* =====================================================
           LARGE DESKTOP
        ====================================================== */

@media (min-width: 1200px) {

    .rooms-hero {
        min-height: 250px;
    }


    .rooms-intro {
        padding-top: 40px;
    }


    .room-section {
        padding-bottom: 55px;
    }


    .room-card-image {
        height: 235px;
    }

}


/* =====================================================
           TABLET
        ====================================================== */

@media (max-width: 991.98px) {

    .rooms-hero {
        min-height: 220px;
    }


    .rooms-hero-title {
        font-size: 34px;
    }


    .rooms-intro {
        padding-top: 32px;

        padding-bottom: 18px;
    }


    .rooms-intro h2 {
        font-size: 22px;
    }


    .room-section {
        padding-top: 15px;

        padding-bottom: 45px;
    }


    .room-heading {
        margin-bottom: 23px;
    }


    .room-heading h3 {
        font-size: 18px;
    }


    .room-card-image {
        height: 215px;
    }


    .room-card-text {
        font-size: 11.5px;
    }


    .room-button-wrapper {
        text-align: left;
    }

}


/* =====================================================
           MOBILE
        ====================================================== */

@media (max-width: 767.98px) {

    body {
        font-size: 12px;
    }


    .rooms-hero {
        min-height: 190px;
    }


    .rooms-hero-title {
        padding: 0 18px;

        font-size: 27px;

        line-height: 1.35;

        letter-spacing: 1px;
    }


    .rooms-intro {
        padding-top: 30px;

        padding-bottom: 20px;
    }


    .rooms-intro h2 {
        margin-bottom: 9px;

        font-size: 21px;

        line-height: 1.5;
    }


    .rooms-intro p {
        padding: 0 5px;

        font-size: 11.5px;

        line-height: 1.8;
    }


    .room-section {
        padding-top: 14px;

        padding-bottom: 40px;
    }


    .room-heading {
        margin-bottom: 21px;
    }


    .room-heading h3 {
        font-size: 18px;

        letter-spacing: 1px;
    }


    .room-card-image {
        height: auto;

        aspect-ratio: 16 / 9;

        object-fit: cover;
    }


    .room-card-content {
        padding-top: 12px;
    }


    .room-card-title {
        font-size: 12px;
    }


    .room-card-text {
        font-size: 11.5px;

        line-height: 1.8;
    }


    .room-button-wrapper {
        margin-top: 15px;

        text-align: left;
    }


    .room-book-btn {
        min-height: 40px;

        padding: 9px 18px;

        font-size: 9px;
    }


    .rooms-bottom {
        padding-top: 0;

        padding-bottom: 40px;
    }


    .rooms-bottom-title {
        padding: 0 10px;

        font-size: 12px;

        line-height: 1.8;

        letter-spacing: 1px;
    }


    .rooms-bottom-line {
        width: 85%;
    }

}


/* =====================================================
           SMALL MOBILE
        ====================================================== */

@media (max-width: 420px) {

    .rooms-hero {
        min-height: 165px;
    }


    .rooms-hero-title {
        font-size: 23px;

        letter-spacing: 0.8px;
    }


    .rooms-intro {
        padding-left: 10px;

        padding-right: 10px;
    }


    .rooms-intro h2 {
        font-size: 19px;
    }


    .rooms-intro p {
        font-size: 11px;
    }


    .room-heading h3 {
        font-size: 17px;
    }


    .room-card-image {
        aspect-ratio: 16 / 10;
    }


    .room-book-btn {
        width: 100%;
    }


    .rooms-bottom-title {
        font-size: 11.5px;
    }

}



/* ===============Terms-of-service==========================
           HERO / BANNER
        ========================================= */
.terms-hero {
    position: relative;
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background:
        linear-gradient(rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)),
        url("assets/images/p-t-banner.jpg") center center / cover no-repeat !important;
}

.terms-hero-content {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
}

.terms-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.terms-breadcrumb {
    margin-top: 16px;
    color: #fff;
    font-size: 13px;
}

.terms-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.terms-breadcrumb span {
    margin: 0 8px;
    opacity: .8;
}

/* =========================================
           CONTENT
        ========================================= */
.terms-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 55px 30px 80px;
}

.terms-intro {
    margin-bottom: 65px;
}

.terms-intro p,
.terms-section p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
}

.terms-section {
    margin-bottom: 52px;
}

.terms-section:last-child {
    margin-bottom: 0;
}

.terms-section h2 {
    margin: 0 0 20px;
    color: #111;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
}

.terms-section p+p {
    margin-top: 16px;
}

.terms-list {
    margin: 18px 0 0;
    padding-left: 0;
    list-style: none;
}

.terms-list li {
    position: relative;
    padding-left: 0;
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 1.75;
}

.terms-contact {
    margin-top: 8px;
}

.terms-closing {
    margin-top: 65px;
}

/* =========================================
           TABLET
        ========================================= */
@media (max-width: 991.98px) {
    .terms-hero {
        min-height: 260px;
    }

    .terms-wrapper {
        padding: 45px 25px 65px;
    }

    .terms-intro {
        margin-bottom: 50px;
    }

    .terms-section {
        margin-bottom: 42px;
    }
}

/* =========================================
           MOBILE
        ========================================= */
@media (max-width: 767.98px) {
    body {
        font-size: 13px;
    }

    .terms-hero {
        min-height: 220px;
    }

    .terms-hero-content {
        padding: 30px 15px;
    }

    .terms-hero h1 {
        font-size: 34px;
        letter-spacing: .5px;
    }

    .terms-breadcrumb {
        margin-top: 12px;
        font-size: 12px;
    }

    .terms-wrapper {
        padding: 35px 20px 50px;
    }

    .terms-intro {
        margin-bottom: 42px;
    }

    .terms-intro p,
    .terms-section p,
    .terms-list li {
        font-size: 13px;
        line-height: 1.8;
    }

    .terms-section {
        margin-bottom: 38px;
    }

    .terms-section h2 {
        margin-bottom: 14px;
        font-size: 15px;
    }
}

/* =========================================
           SMALL MOBILE
        ========================================= */
@media (max-width: 420px) {
    .terms-hero {
        min-height: 190px;
    }

    .terms-hero h1 {
        font-size: 29px;
    }

    .terms-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }

    .terms-section {
        margin-bottom: 32px;
    }
}



/*---footer-----*/

:root {
    --sandstone: #f4e9d8;
    --sandstone-deep: #eadfc9;
    --maroon: #6e2138;
    --maroon-deep: #531828;
    --gold: #c39a4a;
    --gold-soft: #d9bd82;
    --ink: #2c211c;
    --ink-soft: #6b5d51;
    --divider: rgba(110, 33, 56, 0.18);
}

/**{box-sizing:border-box;}*/

/*body{margin:0;}*/

.amer-footer {
    background: var(--sandstone);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Jali (lattice) motif — signature element, echoing haveli jharokha screens */
.jali-strip {
    height: 14px;
    width: 100%;
    background-image:
        radial-gradient(circle at 7px 7px, var(--maroon) 2.6px, transparent 3px);
    background-size: 14px 14px;
    background-color: var(--gold-soft);
    opacity: 0.9;
}

.amer-footer .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Top row: socials + trust badges */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--divider);
}

.socials {
    display: flex;
    align-items: center;
    gap: 14px;
}

.socials span.label {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-right: 6px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--maroon);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--maroon);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    flex: 0 0 auto;
}

.icon-btn:hover {
    background: var(--maroon);
    color: var(--sandstone);
    transform: translateY(-2px);
}

.icon-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.trust-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ink-soft);
}

.trust-badge .ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffdf8;
}

.trust-badge .ring svg {
    width: 24px;
    height: 24px;
    color: var(--maroon);
}

.trust-badge small {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Main columns */
.footer-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding: 44px 0 30px;
}

.col h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--maroon);
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 10px;
}

.col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--gold);
}

.contact-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.contact-item svg {
    width: 18px;
    height: 18px;
    color: var(--maroon);
    flex: 0 0 auto;
    margin-top: 2px;
}

.contact-item a,
.contact-item span {
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.5;
}

.contact-item a:hover {
    color: var(--maroon);
}

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

.link-list li {
    margin-bottom: 11px;
}

.link-list a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    position: relative;
    transition: color .2s ease, padding-left .2s ease;
}

.link-list a:hover {
    color: var(--maroon);
    padding-left: 6px;
}

.newsletter p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0 0 16px;
}

.newsletter-form {
    display: flex;
    border-bottom: 1.5px solid var(--maroon);
    padding-bottom: 6px;
}

.newsletter-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    padding: 6px 4px;
}

.newsletter-form input::placeholder {
    color: var(--ink-soft);
}

.newsletter-form button {
    border: none;
    background: none;
    color: var(--maroon);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
}

.newsletter-form button svg {
    width: 20px;
    height: 20px;
}

.brand-block {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed var(--divider);
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-block .motif {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--gold);
}

.brand-block .brand-text .name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--maroon);
    letter-spacing: .03em;
}

.brand-block .brand-text .tag {
    font-size: 12px;
    color: var(--ink-soft);
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid var(--divider);
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-soft);
}

.footer-bottom a {
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--maroon);
}

.payments {
    display: flex;
    gap: 8px;
    align-items: center;
}

.payments span {
    border: 1px solid var(--divider);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--ink-soft);
    background: #fffdf8;
}

/* Responsive */
@media (max-width:980px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        row-gap: 36px;
    }
}

@media (max-width:640px) {
    .amer-footer .container {
        padding: 0 20px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .trust-row {
        gap: 16px;
    }

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

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-block {
        flex-wrap: wrap;
    }
}

@media (max-width: 1024px) {
    .gal-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 200px 200px 200px;
    }

    .gal-item:nth-child(1) {
        grid-column: span 2;
    }

    .gal-item:nth-child(4) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .gal-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 160px);
    }

    .gal-item:nth-child(1) {
        grid-column: 1;
        grid-row: span 1;
    }
}

@media (max-width: 480px) {
    .gal-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, 160px);
    }

    .attr-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   HOTEL DESERT BRIGHT - ABOUT PAGE
   ======================================== */

.hdb-about-page {
    --hdb-primary: #c58b35;
    --hdb-primary-dark: #9d6821;
    --hdb-dark: #211a14;
    --hdb-dark-2: #30251c;
    --hdb-light: #f8f5ef;
    --hdb-text: #333333;
    --hdb-muted: #777777;
    --hdb-white: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--hdb-text);
    line-height: 1.7;
    background: #ffffff;
    padding: 0;
}

.hdb-about-page *,
.hdb-about-page *::before,
.hdb-about-page *::after {
    box-sizing: border-box;
}

.hdb-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* ========================================
   HERO
   ======================================== */

.hdb-about-hero {
    min-height: 520px;
    display: flex;
    align-items: center;
    position: relative;

    background:
        linear-gradient(
            rgba(25, 18, 12, 0.65),
            rgba(25, 18, 12, 0.65)
        ),
        url("https://images.unsplash.com/photo-1477587458883-47145ed94245?auto=format&fit=crop&w=1800&q=85")
        center center / cover no-repeat;
}

.hdb-hero-content {
    max-width: 760px;
    color: #ffffff;
}

.hdb-subtitle,
.hdb-section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--hdb-primary);
    margin-bottom: 15px;
}

.hdb-hero-content h1 {
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.1;
    margin: 0 0 25px;
    font-weight: 700;
    color: #ffffff;
}

.hdb-hero-content p {
    max-width: 650px;
    margin: 0;
    font-size: 19px;
    line-height: 1.8;
    color: #f3f3f3;
}


/* ========================================
   COMMON SECTIONS
   ======================================== */

.hdb-section {
    padding: 95px 0;
}

.hdb-light-section {
    background: var(--hdb-light);
}

.hdb-heading-center {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.hdb-heading-center h2,
.hdb-content h2,
.hdb-commitment-content h2 {
    margin: 0 0 20px;
    color: var(--hdb-dark);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
}

.hdb-heading-center p {
    margin: 0;
    color: var(--hdb-muted);
    font-size: 17px;
}


/* ========================================
   WELCOME SECTION
   ======================================== */

.hdb-two-column {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.hdb-content p {
    color: #666;
    font-size: 16px;
    margin: 0 0 18px;
}

.hdb-about-card {
    background: var(--hdb-dark);
    color: #ffffff;
    padding: 50px 40px;
    position: relative;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
}

.hdb-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hdb-primary);
    border-radius: 50%;
    color: var(--hdb-primary);
    font-size: 30px;
}

.hdb-about-card h3 {
    font-size: 25px;
    margin: 0 0 15px;
    color: #ffffff;
}

.hdb-about-card p {
    color: #d8d8d8;
    margin: 0;
}


/* ========================================
   EXPERIENCE GRID
   ======================================== */

.hdb-experience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.hdb-experience-box {
    background: #ffffff;
    padding: 35px 28px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.hdb-experience-box:hover {
    transform: translateY(-7px);
    border-bottom-color: var(--hdb-primary);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.hdb-experience-box > span {
    color: var(--hdb-primary);
    font-size: 14px;
    font-weight: 700;
}

.hdb-experience-box h3 {
    color: var(--hdb-dark);
    font-size: 21px;
    margin: 15px 0 10px;
}

.hdb-experience-box p {
    color: #777;
    font-size: 15px;
    margin: 0;
}


/* ========================================
   FEATURES
   ======================================== */

.hdb-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.hdb-feature {
    display: flex;
    gap: 25px;
    padding: 30px;
    background: var(--hdb-light);
}

.hdb-feature-number {
    min-width: 50px;
    height: 50px;
    border: 1px solid var(--hdb-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--hdb-primary-dark);
    font-weight: 700;
}

.hdb-feature h3 {
    margin: 0 0 7px;
    color: var(--hdb-dark);
    font-size: 20px;
}

.hdb-feature p {
    margin: 0;
    color: #777;
    font-size: 15px;
}


/* ========================================
   DARK SECTION
   ======================================== */

.hdb-dark-section {
    background: var(--hdb-dark);
}

.hdb-white-text h2 {
    color: #ffffff;
}

.hdb-white-text p {
    color: #cfcfcf;
}

.hdb-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 35px;
}

.hdb-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.12);
}

.hdb-list-item span {
    color: var(--hdb-primary);
    font-size: 18px;
    font-weight: bold;
}

.hdb-list-item p {
    margin: 0;
    color: #eeeeee;
}


/* ========================================
   WHY CHOOSE US
   ======================================== */

.hdb-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.hdb-why-card {
    padding: 38px 30px;
    border: 1px solid #e8e3da;
    transition: all 0.3s ease;
}

.hdb-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: var(--hdb-primary);
}

.hdb-why-icon {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--hdb-primary);
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 22px;
}

.hdb-why-card h3 {
    color: var(--hdb-dark);
    margin: 0 0 12px;
    font-size: 21px;
}

.hdb-why-card p {
    color: #777;
    font-size: 15px;
    margin: 0;
}


/* ========================================
   COMMITMENT
   ======================================== */

.hdb-commitment {
    background: var(--hdb-light);
}

.hdb-commitment-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.hdb-commitment-content p {
    color: #666;
    font-size: 17px;
    margin: 0 auto 18px;
}


/* ========================================
   CTA
   ======================================== */

.hdb-cta {
    padding: 90px 0;
    background:
        linear-gradient(
            rgba(33, 26, 20, 0.92),
            rgba(33, 26, 20, 0.92)
        ),
        url("https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=1800&q=85")
        center / cover no-repeat;
}

.hdb-cta-content {
    max-width: 800px;
    margin: auto;
    text-align: center;
    color: #ffffff;
}

.hdb-cta-content h2 {
    color: #ffffff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.2;
    margin: 0 0 20px;
}

.hdb-cta-content p {
    max-width: 700px;
    margin: 0 auto 30px;
    color: #dddddd;
    font-size: 17px;
}

.hdb-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 28px;
    background: var(--hdb-primary);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.hdb-button:hover {
    background: var(--hdb-primary-dark);
    transform: translateY(-2px);
}

.hdb-button span {
    font-size: 20px;
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 992px) {

    .hdb-section {
        padding: 75px 0;
    }

    .hdb-two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hdb-experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hdb-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 767px) {

    .hdb-container {
        width: 90%;
    }

    .hdb-about-hero {
        min-height: 500px;
    }

    .hdb-hero-content {
        padding: 60px 0;
    }

    .hdb-hero-content h1 {
        font-size: 38px;
    }

    .hdb-hero-content p {
        font-size: 16px;
    }

    .hdb-section {
        padding: 60px 0;
    }

    .hdb-heading-center {
        margin-bottom: 35px;
    }

    .hdb-heading-center h2,
    .hdb-content h2,
    .hdb-commitment-content h2 {
        font-size: 31px;
    }

    .hdb-experience-grid,
    .hdb-features-grid,
    .hdb-list-grid,
    .hdb-why-grid {
        grid-template-columns: 1fr;
    }

    .hdb-about-card {
        padding: 40px 25px;
    }

    .hdb-feature {
        padding: 25px 20px;
    }

    .hdb-cta {
        padding: 65px 0;
    }

    .hdb-cta-content h2 {
        font-size: 32px;
    }

}


/* ========================================
   SMALL MOBILE
   ======================================== */

@media (max-width: 480px) {

    .hdb-about-hero {
        min-height: 450px;
    }

    .hdb-hero-content h1 {
        font-size: 32px;
    }

    .hdb-subtitle,
    .hdb-section-label {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hdb-experience-box,
    .hdb-why-card {
        padding: 28px 22px;
    }

    .hdb-feature {
        gap: 15px;
    }

    .hdb-feature-number {
        min-width: 42px;
        height: 42px;
        font-size: 13px;
    }

}

.hdb-contact-page {

    --primary: #c58b35;
    --primary-dark: #9e6924;

    --dark: #211a14;
    --dark-2: #30251d;

    --light: #f8f5ef;

    --text: #333333;
    --muted: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);
    padding: 0;

    line-height: 1.7;

    background: #ffffff;

}


.hdb-contact-page *,
.hdb-contact-page *::before,
.hdb-contact-page *::after {

    box-sizing: border-box;

}


.hdb-contact-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* ============================================
   HERO
   ============================================ */

.hdb-contact-hero {

    min-height: 480px;

    display: flex;

    align-items: center;

    background:

        linear-gradient(
            rgba(30,22,15,.70),
            rgba(30,22,15,.70)
        ),

        url("https://images.unsplash.com/photo-1477587458883-47145ed94245?auto=format&fit=crop&w=1800&q=85")

        center / cover no-repeat;

}


.hdb-contact-hero-content {

    max-width: 780px;

    padding: 80px 0;

    color: #ffffff;

}


.hdb-contact-hero-content > span,
.hdb-contact-heading > span,
.hdb-assistance-content > span,
.hdb-map-content > span,
.hdb-contact-cta-content > span {

    display: inline-block;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 14px;

}


.hdb-contact-hero-content h1 {

    font-size: clamp(38px,5vw,64px);
    color: #ffffff;

    line-height: 1.1;

    margin: 0 0 22px;

}


.hdb-contact-hero-content p {

    max-width: 690px;

    margin: 0;

    color: #eeeeee;

    font-size: 18px;

}


/* ============================================
   COMMON
   ============================================ */

.hdb-contact-section,
.hdb-contact-experience,
.hdb-faq-section {

    padding: 90px 0;

}


.hdb-contact-heading {

    max-width: 780px;

    margin: 0 auto 50px;

    text-align: center;

}


.hdb-contact-heading h2 {

    color: var(--dark);

    font-size: clamp(30px,4vw,45px);

    line-height: 1.2;

    margin: 0 0 18px;

}


.hdb-contact-heading p {

    margin: 0;

    color: var(--muted);

    font-size: 16px;

}


/* ============================================
   CONTACT CARDS
   ============================================ */

.hdb-contact-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 25px;

}


.hdb-contact-info-card {

    padding: 38px 30px;

    text-align: center;

    border: 1px solid #e7e0d6;

    transition: .3s ease;

}


.hdb-contact-info-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

}


.hdb-contact-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: var(--dark);

}


.hdb-contact-icon svg {

    width: 27px;

    height: 27px;

    fill: var(--primary);

}


.hdb-contact-info-card h3 {

    margin: 0 0 10px;

    font-size: 21px;

    color: var(--dark);

}


.hdb-contact-info-card p {

    min-height: 55px;

    margin: 0 0 12px;

    color: var(--muted);

    font-size: 14px;

}


.hdb-contact-info-card a {

    color: var(--primary-dark);

    font-weight: 700;

    text-decoration: none;

}


/* ============================================
   ASSISTANCE SECTION
   ============================================ */

.hdb-assistance-section {

    padding: 95px 0;

    background: var(--light);

}


.hdb-assistance-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 80px;

    align-items: center;

}


.hdb-assistance-content h2 {

    margin: 0 0 20px;

    color: var(--dark);

    font-size: clamp(31px,4vw,46px);

    line-height: 1.2;

}


.hdb-assistance-content > p {

    color: var(--muted);

    font-size: 16px;

}


.hdb-call-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 20px;

    padding: 14px 26px;

    background: var(--dark);

    color: #ffffff !important;

    text-decoration: none !important;

    font-weight: 700;

    transition: .3s ease;

}


.hdb-call-button:hover {

    background: var(--primary);

}


.hdb-call-button span {

    font-size: 20px;

}


.hdb-assistance-list {

    background: #ffffff;

    padding: 15px 35px;

}


.hdb-assistance-item {

    display: flex;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid #e8e1d8;

}


.hdb-assistance-item:last-child {

    border-bottom: 0;

}


.hdb-assistance-item strong {

    width: 43px;

    height: 43px;

    min-width: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: #ffffff;

    font-size: 13px;

}


.hdb-assistance-item h3 {

    margin: 0 0 5px;

    color: var(--dark);

    font-size: 19px;

}


.hdb-assistance-item p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;

}


/* ============================================
   EXPERIENCES
   ============================================ */

.hdb-experience-cards {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 22px;

}


.hdb-experience-card {

    padding: 32px 25px;

    border: 1px solid #e7e1d8;

    transition: .3s ease;

}


.hdb-experience-card:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

    box-shadow:
        0 15px 35px rgba(0,0,0,.07);

}


.hdb-experience-card > span {

    color: var(--primary);

    font-weight: 700;

    font-size: 13px;

}


.hdb-experience-card h3 {

    margin: 12px 0 10px;

    color: var(--dark);

    font-size: 20px;

}


.hdb-experience-card p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;

}


/* ============================================
   MAP
   ============================================ */

.hdb-map-section {

    background: var(--dark);

}


.hdb-map-container {

    display: grid;

    grid-template-columns:
        40% 60%;

}


.hdb-map-content {

    padding: 75px 10%;

    color: #ffffff;

}


.hdb-map-content h2 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.2;

}


.hdb-map-content p {

    color: #cccccc;

    margin: 0 0 30px;

}


.hdb-map-button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 13px 23px;

    color: #ffffff;

    background: var(--primary);

    text-decoration: none;

    font-weight: 700;

}


.hdb-map-frame {

    min-height: 430px;

}


.hdb-map-frame iframe {

    width: 100%;

    height: 100%;

    min-height: 430px;

    border: 0;

    display: block;

}


/* ============================================
   FAQ
   ============================================ */

.hdb-faq-list {

    max-width: 850px;

    margin: auto;

}


.hdb-faq-list details {

    border-bottom: 1px solid #ddd7cf;

}


.hdb-faq-list summary {

    list-style: none;

    cursor: pointer;

    padding: 22px 5px;

    color: var(--dark);

    font-weight: 700;

    display: flex;

    justify-content: space-between;

    gap: 20px;

}


.hdb-faq-list summary::-webkit-details-marker {

    display: none;

}


.hdb-faq-list summary span {

    color: var(--primary);

    font-size: 22px;

    transition: .2s ease;

}


.hdb-faq-list details[open] summary span {

    transform: rotate(45deg);

}


.hdb-faq-list details p {

    padding: 0 35px 22px 5px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;

}


/* ============================================
   FINAL CTA
   ============================================ */

.hdb-contact-cta {

    padding: 90px 0;

    background:

        linear-gradient(
            rgba(30,22,15,.93),
            rgba(30,22,15,.93)
        ),

        url("https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=1800&q=85")

        center / cover no-repeat;

}


.hdb-contact-cta-content {

    max-width: 800px;

    margin: auto;

    text-align: center;

    color: #ffffff;

}


.hdb-contact-cta-content h2 {

    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(32px,4vw,48px);

    line-height: 1.2;

}


.hdb-contact-cta-content p {

    max-width: 700px;

    margin: 0 auto 30px;

    color: #dddddd;

}


.hdb-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 28px;

    color: #ffffff !important;

    background: var(--primary);

    text-decoration: none !important;

    font-weight: 700;

    transition: .3s ease;

}


.hdb-cta-button:hover {

    background: var(--primary-dark);

}


.hdb-cta-button span {

    font-size: 20px;

}


/* ============================================
   TABLET
   ============================================ */

@media (max-width: 992px) {

    .hdb-contact-section,
    .hdb-contact-experience,
    .hdb-faq-section {

        padding: 70px 0;

    }


    .hdb-contact-info-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .hdb-assistance-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .hdb-experience-cards {

        grid-template-columns:
            repeat(2,1fr);

    }


    .hdb-map-container {

        grid-template-columns: 1fr;

    }


    .hdb-map-content {

        padding: 65px 6%;

    }

}


/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 767px) {

    .hdb-contact-container {

        width: 90%;

    }


    .hdb-contact-hero {

        min-height: 450px;

    }


    .hdb-contact-hero-content {

        padding: 60px 0;

    }


    .hdb-contact-hero-content h1 {

        font-size: 37px;

    }


    .hdb-contact-hero-content p {

        font-size: 16px;

    }


    .hdb-contact-section,
    .hdb-contact-experience,
    .hdb-faq-section,
    .hdb-assistance-section {

        padding: 60px 0;

    }


    .hdb-contact-info-grid,
    .hdb-experience-cards {

        grid-template-columns: 1fr;

    }


    .hdb-contact-heading h2 {

        font-size: 31px;

    }


    .hdb-assistance-content h2 {

        font-size: 32px;

    }


    .hdb-assistance-list {

        padding: 10px 22px;

    }


    .hdb-map-content {

        padding: 55px 5%;

    }


    .hdb-map-content h2 {

        font-size: 32px;

    }


    .hdb-map-frame,
    .hdb-map-frame iframe {

        min-height: 350px;

    }


    .hdb-contact-cta {

        padding: 65px 0;

    }

}


/* ============================================
   SMALL MOBILE
   ============================================ */

@media (max-width: 480px) {

    .hdb-contact-hero-content h1 {

        font-size: 31px;

    }


    .hdb-contact-info-card {

        padding: 30px 20px;

    }


    .hdb-contact-cta-content h2 {

        font-size: 31px;

    }


    .hdb-call-button,
    .hdb-cta-button,
    .hdb-map-button {

        width: 100%;

        justify-content: center;

    }

}


.db3-about {
    --cream: #F7F1E6;
    --panel: #FBF7EE;
    --maroon: #6B2430;
    --gold: #B8873A;
    --ink: #2B2420;
    --ink-soft: #5C5347;

    background: var(--cream);
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    padding: 6rem 1.5rem;
    position: relative;
    overflow: hidden;
  }

  .db3-about::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
      radial-gradient(circle, var(--gold) 0.6px, transparent 0.6px);
    background-size: 22px 22px;
    pointer-events: none;
  }

  .db3-about__wrap {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 4.5rem;
    align-items: center;
  }

  /* --- Arch visual --- */
  .db3-about__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .db3-about__arch {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 200px 200px 8px 8px;
    overflow: hidden;
    box-shadow: 0 30px 50px -25px rgba(43, 36, 32, 0.45);
    border: 6px solid var(--panel);
    outline: 1px solid rgba(184, 135, 58, 0.4);
  }

  .db3-about__arch svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .db3-about__caption {
    margin-top: 1.1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    text-align: center;
  }

  /* --- Content --- */
  .db3-about__content {
    max-width: 44ch;
  }

  .db3-about__label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--maroon);
    margin: 0 0 0.9rem;
  }

  .db3-about__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.3rem, 3.6vw, 3.1rem);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 1.4rem;
  }

  .db3-about__text {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--ink-soft);
    margin: 0 0 1.1rem;
    font-weight: 300;
  }

  .db3-about__rule {
    width: 100%;
    height: 1px;
    background: rgba(184, 135, 58, 0.5);
    border: none;
    margin: 2.1rem 0 1.8rem;
  }

  .db3-about__stats {
    display: flex;
  }

  .db3-about__stat {
    flex: 1;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(184, 135, 58, 0.4);
  }

  .db3-about__stat:last-child {
    border-right: none;
    padding-right: 0;
  }

  .db3-about__stat + .db3-about__stat {
    padding-left: 1.5rem;
  }

  .db3-about__stat-num {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem;
    color: var(--maroon);
    line-height: 1;
    margin-bottom: 0.4rem;
  }

  .db3-about__stat-label {
    font-size: 0.82rem;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
  }

  @media (max-width: 900px) {
    .db3-about {
      padding: 4rem 1.25rem;
    }
    .db3-about__wrap {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .db3-about__visual {
      max-width: 340px;
      margin: 0 auto;
    }
    .db3-about__content {
      max-width: 100%;
      text-align: left;
    }
    .db3-about__stats {
      flex-wrap: wrap;
      gap: 1rem 0;
    }
    .db3-about__stat {
      flex: 1 1 33%;
      border-right: none;
      padding: 0 1rem;
      border-left: 1px solid rgba(184, 135, 58, 0.4);
    }
    .db3-about__stat:first-child {
      border-left: none;
    }
  }
  
  /* ============================================
   HOTEL DESERT BRIGHT
   WHITE CREDIBILITY DESIGN
   ============================================ */

.hdb3-credibility {
    position: relative;
    overflow: hidden;

    padding: 105px 20px 95px;

    background: #ffffff;

    color: #24201b;
}


/* Subtle background decoration */

.hdb3-credibility::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border: 1px solid #eee5d7;

    top: -300px;
    left: -220px;
}


.hdb3-credibility::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 1px solid #f0e8dc;

    right: -230px;
    bottom: -260px;
}


/* CONTAINER */

.hdb3-container {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* ============================================
   HEADER
   ============================================ */

.hdb3-header {
    text-align: center;

    max-width: 760px;

    margin: 0 auto 65px;
}


.hdb3-overline {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 13px;

    color: #b28a4c;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hdb3-overline span {
    width: 32px;
    height: 1px;

    background: #c7a66c;
}


.hdb3-header h2 {
    margin: 22px 0 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 67px);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -2px;
}


.hdb3-header h2 em {
    color: #b38b4f;

    font-weight: 400;
}


.hdb3-header p {
    max-width: 600px;

    margin: auto;

    color: #83776a;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================
   MAIN AREA
   ============================================ */

.hdb3-main {
    display: grid;

    grid-template-columns: 1fr 1.2fr 1fr;

    align-items: center;

    border-top: 1px solid #eee5d8;

    border-bottom: 1px solid #eee5d8;

    min-height: 290px;
}


/* EXPERIENCE */

.hdb3-experience {
    padding: 40px;

    border-right: 1px solid #eee5d8;
}


.hdb3-card-number {
    font-family: Georgia, serif;

    font-size: 62px;

    line-height: 1;

    color: #24201b;
}


.hdb3-card-number span {
    color: #b38b4f;

    font-size: 30px;
}


.hdb3-card-title {
    margin-top: 10px;

    color: #877a6b;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.hdb3-card-title strong {
    display: block;

    color: #4c4034;

    font-size: 13px;
}


.hdb3-card-line {
    width: 45px;
    height: 1px;

    margin: 20px 0;

    background: #b38b4f;
}


.hdb3-experience p {
    max-width: 230px;

    margin: 0;

    color: #958a7e;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.7;
}


/* ============================================
   RATING
   ============================================ */

.hdb3-rating {
    display: flex;

    justify-content: center;

    padding: 30px;
}


.hdb3-rating-circle {
    position: relative;

    width: 230px;
    height: 230px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.hdb3-rating-circle svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}


.hdb3-rating-circle svg text {
    fill: #b38b4f;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 3px;
}


.hdb3-rating-center {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: #fbf8f2;

    border: 1px solid #eee3d3;
}


.hdb3-rating-center strong {
    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1;

    font-weight: 400;

    color: #29221c;
}


.hdb3-rating-center span {
    margin-top: 8px;

    color: #b58d4d;

    font-size: 11px;

    letter-spacing: 2px;
}


.hdb3-rating-center small {
    margin-top: 8px;

    color: #897c6d;

    font-family: Arial, sans-serif;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* ============================================
   GUESTS
   ============================================ */

.hdb3-guests {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 40px;

    border-left: 1px solid #eee5d8;
}


.hdb3-guests-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background: #f7f1e7;

    color: #b38b4f;

    font-size: 22px;
}


.hdb3-guests strong {
    display: block;

    color: #2c251e;

    font-family: Georgia, serif;

    font-size: 35px;

    font-weight: 400;
}


.hdb3-guests span {
    display: block;

    margin-top: 4px;

    color: #887b6c;

    font-family: Arial, sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* ============================================
   FEATURES
   ============================================ */

.hdb3-features {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 45px;

    border: 1px solid #eee6da;
}


.hdb3-feature {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px 20px;

    border-right: 1px solid #eee6da;
}


.hdb3-feature:last-child {
    border-right: none;
}


.hdb3-feature-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #faf6ef;

    color: #b38b4f;

    font-size: 14px;
}


.hdb3-feature strong {
    display: block;

    color: #44382c;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: .5px;
}


.hdb3-feature span {
    display: block;

    margin-top: 4px;

    color: #978c80;

    font-family: Arial, sans-serif;

    font-size: 9px;

    line-height: 1.4;
}


/* ============================================
   PLATFORM REVIEWS
   ============================================ */

.hdb3-platform-section {
    margin-top: 60px;

    text-align: center;
}


.hdb3-platform-title {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    color: #a48b68;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hdb3-platform-title span {
    width: 40px;
    height: 1px;

    background: #dfd2bf;
}


.hdb3-platforms {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    margin-top: 25px;
}


.hdb3-platform {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 25px;

    border-right: 1px solid #eee6da;
}


.hdb3-platform:last-child {
    border-right: none;
}


.hdb3-platform i {
    width: 11px;
    height: 11px;

    display: inline-block;

    border-radius: 50%;
}


.hdb3-trip {
    background: #45b985;
}


.hdb3-booking {
    background: #4280d1;
}


.hdb3-google {
    background: #e65068;
}


.hdb3-agoda {
    background: #ee805e;
}


.hdb3-platform span {
    color: #75695d;

    font-family: Arial, sans-serif;

    font-size: 11px;
}


.hdb3-platform b {
    color: #b18a4d;

    font-family: Georgia, serif;

    font-size: 16px;

    font-weight: 400;
}


.hdb3-platform small {
    color: #a0968b;

    font-family: Arial, sans-serif;

    font-size: 9px;
}


/* ============================================
   TABLET
   ============================================ */

@media (max-width: 900px) {

    .hdb3-credibility {
        padding: 80px 20px;
    }


    .hdb3-main {
        grid-template-columns: 1fr 1fr;
    }


    .hdb3-rating {
        grid-column: 1 / -1;

        grid-row: 1;

        border-bottom: 1px solid #eee5d8;
    }


    .hdb3-experience {
        grid-column: 1;

        border-right: 1px solid #eee5d8;
    }


    .hdb3-guests {
        grid-column: 2;

        border-left: none;
    }


    .hdb3-features {
        grid-template-columns: repeat(2, 1fr);
    }


    .hdb3-feature:nth-child(2) {
        border-right: none;
    }


    .hdb3-feature:nth-child(1),
    .hdb3-feature:nth-child(2) {
        border-bottom: 1px solid #eee6da;
    }

}


/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 600px) {

    .hdb3-credibility {
        padding: 65px 15px;
    }


    .hdb3-header {
        margin-bottom: 45px;
    }


    .hdb3-overline {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .hdb3-overline span {
        width: 22px;
    }


    .hdb3-header h2 {
        font-size: 43px;

        letter-spacing: -1.5px;
    }


    .hdb3-header p {
        font-size: 13px;
    }


    .hdb3-main {
        grid-template-columns: 1fr;
    }


    .hdb3-rating {
        grid-column: auto;

        grid-row: auto;

        padding: 35px 10px;

        border-bottom: 1px solid #eee5d8;
    }


    .hdb3-experience {
        grid-column: auto;

        border-right: none;

        border-bottom: 1px solid #eee5d8;

        padding: 30px 25px;
    }


    .hdb3-experience p {
        max-width: 100%;
    }


    .hdb3-guests {
        grid-column: auto;

        padding: 30px 25px;

        justify-content: flex-start;
    }


    .hdb3-features {
        grid-template-columns: 1fr;

        margin-top: 30px;
    }


    .hdb3-feature,
    .hdb3-feature:nth-child(1),
    .hdb3-feature:nth-child(2) {
        border-right: none;

        border-bottom: 1px solid #eee6da;
    }


    .hdb3-feature:last-child {
        border-bottom: none;
    }


    .hdb3-platform-section {
        margin-top: 45px;
    }


    .hdb3-platforms {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 20px;
    }


    .hdb3-platform {
        justify-content: center;

        border: 1px solid #eee6da;

        padding: 12px 7px;
    }


    .hdb3-platform small {
        display: none;
    }


    .hdb3-platform span {
        font-size: 10px;
    }

}


/* ============================================
   SMALL MOBILE
   ============================================ */

@media (max-width: 380px) {

    .hdb3-header h2 {
        font-size: 38px;
    }


    .hdb3-rating-circle {
        width: 210px;
        height: 210px;
    }


    .hdb3-rating-center {
        width: 138px;
        height: 138px;
    }


    .hdb3-rating-center strong {
        font-size: 46px;
    }

}


/* =========================================================
   RESPONSIVE FIXES — all devices (2026-09-28)
   Kept together at the end so they win over older rules.
   ========================================================= */

/* ---- Footer ---- */
.f-bottom { align-items: center; }
.f-bottom li + li { margin-top: 0; }            /* was pushing "Terms of Service" 10px down */
.site-footer .logo img {                        /* dark logo was invisible on the dark footer */
    width: 150px;
    height: auto;
    background: #f7ebcb;
    padding: 8px 14px;
    border-radius: 12px;
}

/* ---- Hero slider dots: same look, 26px tap area ---- */
.hero-dots { gap: 2px; }
.hero-dot {
    width: 26px;
    height: 26px;
    background: transparent !important;
    transform: none !important;
    display: inline-grid;
    place-items: center;
}
.hero-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background .25s ease, transform .25s ease;
}
.hero-dot.is-active::before { background: #D9A857; transform: scale(1.3); }

/* ---- About stats: "0.4 km" should not break onto two lines ---- */
.db3-about__stat-num { white-space: nowrap; }
@media (max-width: 480px) {
    .db3-about__stat-num { font-size: 1.55rem; }
    .db3-about__stat { padding: 0 .7rem; }
    .db3-about__stat-label { font-size: .76rem; }
}

/* ---- Long card lists become swipeable rows on phones ----
   Nearby Attractions (16 cards) and Amenities (12 cards) were stacked
   one per row, making the home page ~7,000px longer on mobile. */
@media (max-width: 767px) {
    .hdb-attractions-grid,
    .hdb-amenities-grid {
        display: grid;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: min(80vw, 320px);
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        margin-inline: calc(50% - 50vw);      /* bleed to the screen edges */
        padding: 4px 20px 18px;
        scroll-padding-inline: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hdb-attractions-grid::-webkit-scrollbar,
    .hdb-amenities-grid::-webkit-scrollbar { display: none; }
    .hdb-attraction-card,
    .hdb-amenity-card { scroll-snap-align: start; height: 100%; }
    .swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 4px 0 0;
        font-size: .78rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9a7b4f;
    }
}
@media (min-width: 768px) { .swipe-hint { display: none; } }

/* ---- Small phones (≤360px, e.g. iPhone SE / older Android) ---- */
@media (max-width: 360px) {
    :root { --pad: 14px; }
    .hero-title { font-size: 2rem; }
    .section-head h2, .hdb-amenities-heading h2 { font-size: 1.75rem; }
    .search-card { margin-inline: 10px; padding: 16px 14px; }
    .counter .ctrl span { min-width: 12px; }
}

/* ---- Bigger tap areas for text links on touch screens (min ~28px tall) ---- */
@media (max-width: 767px) {
    .site-footer nav a,
    .site-footer .contact a,
    .f-bottom a { display: inline-block; padding: 5px 0; }
    .site-footer nav li + li { margin-top: 2px; }
    .topbar a { padding: 4px 0; }
}

/* ---- Hero arrows overlapped the headline on tablets; slider already supports swipe ---- */
@media (max-width: 900px), (hover: none) and (max-width: 1180px) {
    .hero-arrow { display: none; }
}

/* ---- Desktop "Rooms & suites" dropdown ----
   1. An invisible bridge covers the 6px gap, so moving the mouse down to the menu
      no longer drops the hover and makes it flicker shut.
   2. Closing waits 150ms, so a slightly wobbly mouse doesn't close it.
   3. Chevron turns on hover too. Keyboard focus still opens it. */
@media (min-width: 961px) {
    .has-sub > .sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }
    .has-sub > .sub {
        z-index: 60;
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .15s;
        transition-delay: .15s;
    }
    .has-sub:hover > .sub,
    .has-sub.open > .sub,
    .has-sub:focus-within > .sub { transition-delay: 0s; }
    .has-sub:hover > button .chev { transform: rotate(180deg); }
    .has-sub:hover > button { color: var(--maroon); }
}

/* =========================================================
   FLOATING BUTTONS (every page, markup in includes/footer.php)
   Left: Book Now. Right: phone button that opens WhatsApp + Call.
   ========================================================= */
:root { --hdb-gold: #f2b84b; --hdb-dark: #2a1d12; --hdb-sand: #f6e7c8; }

.hdb-wrap { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 999;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.hdb-l { left: calc(18px + env(safe-area-inset-left, 0px)); }
.hdb-r { right: calc(18px + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.hdb-book {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--hdb-gold); color: var(--hdb-dark);
  padding: 8px 22px 8px 8px; border-radius: 14px 30px 14px 30px;
  text-decoration: none; font-weight: 800; font-size: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 0 0 2px rgba(42,29,18,.15);
  transition: transform .2s, box-shadow .2s;
}
.hdb-book:hover { color: var(--hdb-dark); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.45); }
.hdb-sun { width: 40px; height: 40px; border-radius: 50%; background: var(--hdb-dark); color: var(--hdb-gold);
           display: flex; align-items: center; justify-content: center; flex: none; }
.hdb-sun svg { width: 22px; height: 22px; fill: currentColor; }
.hdb-book small { display: block; font-weight: 500; font-size: .7rem; opacity: .8; line-height: 1; }
.hdb-book .t { line-height: 1.15; }

.hdb-fab { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
           background: var(--hdb-dark); color: var(--hdb-gold);
           box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 2px var(--hdb-gold);
           display: flex; align-items: center; justify-content: center; transition: transform .25s; }
.hdb-fab svg { width: 28px; height: 28px; fill: currentColor; }
.hdb-fab .x { display: none; }
.hdb-r.open .hdb-fab { transform: rotate(90deg); }
.hdb-r.open .hdb-fab .x { display: block; }
.hdb-r.open .hdb-fab .ph { display: none; }

.hdb-menu { display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
            opacity: 0; visibility: hidden; transform: translateY(12px); transition: .22s; }
.hdb-r.open .hdb-menu { opacity: 1; visibility: visible; transform: none; }
.hdb-item { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hdb-dark);
            background: var(--hdb-sand); padding: 6px 6px 6px 16px; border-radius: 999px; font-weight: 700; font-size: .95rem;
            box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.hdb-item:hover { color: var(--hdb-dark); }
.hdb-item i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.hdb-item i svg { width: 22px; height: 22px; fill: currentColor; }
.hdb-item.wa i { background: #25d366; }
.hdb-item.call i { background: #2b6cb0; }

.hdb-wrap a:focus-visible, .hdb-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.hdb-r:not(.open) .hdb-fab { animation: hdbPulse 2.6s infinite; }
@keyframes hdbPulse { 0% { box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 2px var(--hdb-gold), 0 0 0 0 rgba(242,184,75,.55); }
                      70%,100% { box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 2px var(--hdb-gold), 0 0 0 16px rgba(242,184,75,0); } }

/* keep the last lines of the footer clear of the buttons */
.site-footer { padding-bottom: 90px; }

@media (max-width: 768px) {
  .hdb-wrap { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .hdb-l { left: 14px; } .hdb-r { right: 14px; }
  .hdb-fab { width: 56px; height: 56px; }
}
@media (max-width: 400px) {
  .hdb-book { padding: 6px 16px 6px 6px; font-size: .9rem; }
  .hdb-sun { width: 34px; height: 34px; }
  .hdb-book small { display: none; }
  .hdb-fab { width: 52px; height: 52px; }
  .hdb-item { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .hdb-r .hdb-fab { animation: none !important; } .hdb-book, .hdb-fab, .hdb-menu { transition: none; } }
/* hidden while the mobile menu drawer is open */
.open-menu ~ .hdb-wrap { display: none; }

/* =========================================================
   HOMEPAGE: NEARBY ATTRACTIONS SLIDER (markup in index.php, script in main.js)
   --na-per = cards visible at once; the script reads it from .na-section.
   ========================================================= */
.na-section { --na-per: 3; --na-ink: #2a1f14; --na-muted: #6b5a44; --na-gold: #a8641a; --na-line: #e6d9bd; }
.na-wrap { width: min(1180px, 100% - 2rem); margin: 0 auto; }
.na-view { overflow: hidden; margin: 0 -.6rem; outline: none; }
.na-view:focus-visible { outline: 3px solid var(--na-gold); outline-offset: 3px; }
.na-track { display: flex; transition: transform .5s ease; touch-action: pan-y; }
.na-slide { flex: 0 0 calc(100% / var(--na-per)); padding: 0 .6rem; }
.na-card { height: 100%; border: 1px solid var(--na-line); border-radius: 4px 20px 20px 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: var(--na-ink); }
.na-pic { aspect-ratio: 4/3; background: linear-gradient(135deg, #e0a83a, #a8641a 60%, #3a2f7a); position: relative; overflow: hidden; }
.na-pic img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.na-pic img.on { opacity: 1; }
.na-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; }
.na-pic img.on ~ .na-emoji { display: none; }
.na-dist { position: absolute; left: .75rem; bottom: .75rem; background: #fff; color: var(--na-gold); font-weight: 600; font-size: .85rem; padding: .15rem .8rem; border-radius: 999px; }
.na-info { padding: 1.1rem 1.2rem 1.3rem; }
.na-info h3 { font-family: var(--serif, Georgia, serif); font-size: 1.35rem; line-height: 1.15; margin: 0; color: var(--na-ink); }
.na-info p { margin: .45rem 0 0; color: var(--na-muted); font-size: .95rem; line-height: 1.6; }
.na-info { display: flex; flex-direction: column; flex: 1; }
.na-more { margin-top: auto; padding-top: .8rem; align-self: flex-start; color: var(--na-gold); font-weight: 600; font-size: .92rem; text-decoration: none; }
.na-more span { display: inline-block; transition: transform .2s; }
.na-more:hover { color: var(--na-gold); text-decoration: underline; }
.na-more:hover span { transform: translateX(3px); }
.na-more:focus-visible { outline: 3px solid var(--na-gold); outline-offset: 2px; }

.na-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.na-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--na-gold); background: #fff; color: var(--na-gold); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }
.na-btn:hover:not(:disabled) { background: var(--na-gold); color: #fff; }
.na-btn:disabled { opacity: .35; cursor: default; }
.na-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.na-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--na-gold); background: transparent; padding: 0; cursor: pointer; }
.na-dot[aria-current="true"] { background: var(--na-gold); }
.na-btn:focus-visible, .na-dot:focus-visible { outline: 3px solid var(--na-gold); outline-offset: 3px; }
.na-note { color: var(--na-muted); font-size: .85rem; margin: 1.25rem 0 0; text-align: center; }
.na-note a { color: var(--na-gold); }

/* Tablet (600–1023px): 2 cards */
@media (max-width: 1023px) { .na-section { --na-per: 2; } }
/* Mobile (under 600px): 2 compact cards */
@media (max-width: 599px) {
  .na-view { margin: 0 -.35rem; }
  .na-slide { padding: 0 .35rem; }
  .na-pic { aspect-ratio: 1/1; }
  .na-emoji { font-size: 2.2rem; }
  .na-dist { left: .5rem; bottom: .5rem; font-size: .72rem; padding: .1rem .55rem; }
  .na-info { padding: .75rem .75rem 1rem; }
  .na-info h3 { font-size: 1.05rem; }
  .na-info p { font-size: .8rem; line-height: 1.45; }
  .na-more { font-size: .8rem; padding-top: .6rem; }
  .na-btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .na-track { transition: none; } }

/* =========================================================
   HOMEPAGE: AMENITIES & SERVICES (markup in index.php, filter script in main.js)
   ========================================================= */
.am-section { --am-ink: #2a1f14; --am-muted: #6b5a44; --am-gold: #a8641a; --am-line: #e6d9bd; }
.am-wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

.am-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.75rem; }
.am-tab { background: transparent; color: var(--am-ink); border: 1.5px solid var(--am-gold); border-radius: 999px; padding: .5rem 1.1rem; font-family: inherit; font-weight: 500; font-size: .95rem; line-height: 1.2; cursor: pointer; }
.am-tab[aria-pressed="true"] { background: var(--am-gold); color: #fff; }

.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.am-card { background: #fff; border: 1px solid var(--am-line); border-radius: 18px 18px 4px 18px; padding: 1.4rem; color: var(--am-ink); }
.am-card[hidden] { display: none; }
.am-ico { font-size: 1.9rem; line-height: 1; }
.am-card h3 { font-family: var(--serif, Georgia, serif); font-size: 1.2rem; line-height: 1.15; margin: .8rem 0 .4rem; color: var(--am-ink); }
.am-card p { margin: 0; color: var(--am-muted); font-size: .95rem; line-height: 1.6; }

.am-svc-head { margin: 3rem 0 .5rem; }
.am-svc-head h3 { font-family: var(--serif, Georgia, serif); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; margin: 0; color: var(--am-ink); }
.am-svc-head p { color: var(--am-muted); margin: .5rem 0 0; }
.am-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 3rem; }
.am-svc details { border-bottom: 1px solid var(--am-line); padding: 1rem 0; }
.am-svc summary { cursor: pointer; font: 600 1.1rem/1.3 var(--serif, Georgia, serif); color: var(--am-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.am-svc summary::-webkit-details-marker { display: none; }
.am-svc summary::after { content: "+"; color: var(--am-gold); font-size: 1.4rem; line-height: 1; }
.am-svc details[open] summary::after { content: "\2013"; }
.am-svc details p { margin: .6rem 0 0; color: var(--am-muted); }
.am-tab:focus-visible, .am-svc summary:focus-visible { outline: 3px solid var(--am-gold); outline-offset: 3px; }

/* phones: 2 compact cards per row instead of one long column of 12 */
@media (max-width: 599px) {
  .am-wrap { width: calc(100% - 2rem); }
  .am-tab { padding: .45rem .9rem; font-size: .88rem; }
  .am-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .am-card { padding: .9rem .85rem 1rem; border-radius: 14px 14px 4px 14px; }
  .am-ico { font-size: 1.5rem; }
  .am-card h3 { font-size: 1rem; margin: .55rem 0 .3rem; }
  .am-card p { font-size: .8rem; line-height: 1.45; }
  .am-svc-head { margin-top: 2.25rem; }
}

/* Header topbar: social icons (links in HOTEL_SOCIAL, includes/functions.php) */
.topbar-social { display: flex; align-items: center; gap: 14px; }
.topbar-social a { display: inline-flex; width: 18px; height: 18px; }
.topbar-social svg { width: 16px; height: 16px; }

/* =========================================================
   HOMEPAGE BOOKING SEARCH BAR (markup in index.php, script in main.js)
   Desktop: one row [dates | guests | button]. Phone: dates row, guests, button.
   ========================================================= */
.bk {
  --bk-ink: #2a1f14; --bk-muted: #7a6a58; --bk-line: #eadfca; --bk-accent: var(--maroon, #6d1f2a);
  position: relative; max-width: 1080px; margin: -48px auto 0;
  display: grid; grid-template-columns: 1.6fr 1fr auto; align-items: stretch; gap: 10px;
  background: #fff; border-radius: 18px; padding: 10px;
  box-shadow: 0 22px 50px -20px rgba(42, 24, 8, .35), 0 2px 8px rgba(42, 24, 8, .06);
}
.bk-dates { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-field {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 64px; padding: 10px 16px; border: 1px solid var(--bk-line); border-radius: 12px;
  background: #fffdf8; text-align: left; cursor: pointer; color: var(--bk-ink); font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.bk-field:hover { border-color: #d8c3a0; }
.bk-field:focus-within, .bk-guests-btn[aria-expanded="true"] { border-color: var(--bk-accent); box-shadow: 0 0 0 3px rgba(109, 31, 42, .10); }
.bk-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); }
.bk-value { font-size: 1.05rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the real date input covers its box invisibly, so a tap anywhere opens the phone's calendar */
.bk-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.bk-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
/* nights count, on the top edge between the two date boxes (clear of the dates on small phones) */
.bk-nights {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: #fff; border: 1px solid #ead7c4; border-radius: 999px; padding: 1px 9px;
  font-size: .68rem; font-weight: 700; color: var(--bk-accent); white-space: nowrap;
}

.bk-guests { position: relative; }
.bk-guests-btn { width: 100%; height: 100%; padding-right: 40px; }
.bk-chev { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--bk-muted); transition: transform .2s; }
.bk-guests-btn[aria-expanded="true"] .bk-chev { transform: translateY(-50%) rotate(180deg); }
.bk-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; min-width: 280px;
  background: #fff; border: 1px solid var(--bk-line); border-radius: 14px; padding: 8px 16px 14px;
  box-shadow: 0 18px 40px -12px rgba(42, 24, 8, .30);
}
.bk-panel[hidden] { display: none; }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3ebdc; }
.bk-row strong { display: block; font-size: .95rem; color: var(--bk-ink); }
.bk-row small { display: block; font-size: .75rem; color: var(--bk-muted); }
.bk-ctrl { display: flex; align-items: center; gap: 12px; }
.bk-ctrl span { min-width: 18px; text-align: center; font-weight: 700; color: var(--bk-ink); }
.bk-ctrl button {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #d8c3a0; background: #fff;
  color: var(--bk-accent); font-size: 1.1rem; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.bk-ctrl button:hover:not(:disabled) { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; }
.bk-ctrl button:disabled { opacity: .35; cursor: not-allowed; }
.bk-done { display: block; margin: 12px 0 0 auto; background: none; border: 0; color: var(--bk-accent); font-weight: 700; font-size: .9rem; cursor: pointer; padding: 4px 2px; }

.bk-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 28px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bk-accent); color: #fff; font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: .02em;
  transition: background .2s, transform .2s;
}
.bk-submit svg { width: 20px; height: 20px; transition: transform .2s; }
.bk-submit:hover { background: var(--maroon-dark, #4f1520); }
.bk-submit:hover svg { transform: translateX(3px); }
.bk-field:focus-visible, .bk-submit:focus-visible, .bk-ctrl button:focus-visible, .bk-done:focus-visible { outline: 3px solid rgba(109, 31, 42, .35); outline-offset: 2px; }

/* tablet: dates on one row, guests + button below */
@media (max-width: 900px) {
  .bk { grid-template-columns: 1fr auto; margin: -40px 16px 0; }
  .bk-dates { grid-column: 1 / -1; }
}
/* phone: everything full width */
@media (max-width: 600px) {
  .bk { grid-template-columns: 1fr; margin: 16px 0 0; padding: 8px; gap: 8px; border-radius: 16px; }
  .bk-dates { gap: 8px; }
  .bk-field { min-height: 58px; padding: 8px 12px; }
  .bk-value { font-size: .98rem; }
  .bk-submit { min-height: 54px; width: 100%; }
  .bk-panel { min-width: 0; }
}

/* =========================================================
   BOOK NOW BUTTON + POPUP (markup + script in includes/footer.php)
   Everything is prefixed hp- so it can't touch the site or Bootstrap styles.
   ========================================================= */
.hp-fab, .hp-ov {
  --hp-ink: #1c1210; --hp-maroon: #3a1420; --hp-maroon2: #5a1f2b; --hp-sand: #fbf6ec; --hp-line: #e8dfcf;
  --hp-gold: #e8b04a; --hp-coral: #f0645a; --hp-muted: #a39a8a; --hp-ok: #2f9e6b;
  --hp-serif: var(--serif, Georgia, serif);
}

/* floating Book Now button (bottom left) */
.hp-fab { position: fixed; left: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 999; display: flex; align-items: center; gap: 14px; padding: 9px 34px 9px 10px; border: 2px solid #d9982a; border-radius: 999px; background: #f2b544; color: #2a1a12; cursor: pointer; font-family: inherit; text-align: left; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .2s, box-shadow .2s; }
.hp-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.hp-fab-ic { width: 50px; height: 50px; border-radius: 50%; background: #2a1a12; color: #f2b544; display: grid; place-items: center; flex: none; }
.hp-fab-tx { display: flex; flex-direction: column; line-height: 1.15; }
.hp-fab small { font-size: 14px; font-weight: 500; opacity: .85; }
.hp-fab b { font-size: 21px; font-weight: 700; }
body.hp-open .hp-fab, body.hp-open .hdb-wrap, .open-menu ~ .hp-fab { display: none; }
body.hp-open { overflow: hidden; }

/* overlay + card */
.hp-ov { position: fixed; inset: 0; background: rgba(20,8,10,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 9999; }
.hp-ov[hidden] { display: none; }
.hp-modal { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(1000px, 100%); max-height: calc(100dvh - 32px); border-radius: 24px; overflow: hidden; background: var(--hp-sand); box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: hpPop .3s ease-out; text-align: left; }
@keyframes hpPop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.hp-ov *, .hp-ov *::before, .hp-ov *::after { box-sizing: border-box; }

/* left panel */
.hp-left { position: relative; padding: 34px 36px; color: #fff; background: radial-gradient(circle at 20% 0, #7a2a37 0, transparent 55%), linear-gradient(160deg, var(--hp-maroon2), var(--hp-maroon) 55%, #22090f); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.hp-left::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; }
.hp-left > * { position: relative; margin: 0; }
.hp-brand { display: flex; align-items: center; gap: 10px; color: var(--hp-gold); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hp-brand i { width: 28px; height: 2px; background: linear-gradient(90deg, var(--hp-coral), var(--hp-gold)); }
.hp-left h2 { font: 700 clamp(28px, 3.2vw, 38px)/1.15 var(--hp-serif); color: #fff; }
.hp-left h2 em { font-style: italic; background: linear-gradient(90deg, var(--hp-gold), var(--hp-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-left p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; max-width: 320px; }
.hp-card { position: relative; margin-top: 8px; padding: 30px 20px 26px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); border-radius: 16px; }
.hp-tag { position: absolute; top: -14px; left: -10px; background: #fff; color: var(--hp-ink); font-size: 12px; font-weight: 700; border-radius: 99px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hp-tag2 { top: auto; bottom: -14px; left: auto; right: -8px; }
.hp-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; font-weight: 600; }
.hp-perks li { display: flex; align-items: center; gap: 10px; }
.hp-perks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--hp-gold), var(--hp-coral)); flex: none; }
.hp-stats { display: flex; gap: 28px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; margin-top: 6px; }
.hp-stats b { display: block; font: 700 22px var(--hp-serif); color: #fff; }
.hp-stats b span { color: var(--hp-gold); }
.hp-stats small { color: rgba(255,255,255,.55); font-size: 12px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chips span { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); border-radius: 99px; padding: 7px 14px; font-size: 13px; }

/* right panel (form) */
.hp-right { padding: 32px 36px 28px; overflow-y: auto; color: var(--hp-ink); }
.hp-right h3 { font: 700 26px var(--hp-serif); color: var(--hp-ink); margin: 0; }
.hp-sub { color: #4b3f38; margin: 4px 0 8px; font-size: 15px; }
.hp-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #efe8d8; color: var(--hp-ink); cursor: pointer; display: grid; place-items: center; z-index: 2; padding: 0; }
.hp-close:hover { background: #e6dcc6; }
.hp-close svg { width: 16px; height: 16px; }
.hp-field { position: relative; border-bottom: 1px solid var(--hp-line); padding: 14px 0 6px; transition: border-color .2s; }
.hp-field:focus-within { border-color: var(--hp-maroon); }
.hp-field label { display: block; font-size: 12px; font-weight: 700; color: var(--hp-coral); margin: 0 0 2px; }
.hp-field input, .hp-field select { width: 100%; border: 0; background: transparent; font-weight: 400; font-family: inherit; font-size: 16px; color: var(--hp-ink); padding: 6px 0; outline: 0; appearance: none; -webkit-appearance: none; border-radius: 0; box-shadow: none; }
.hp-field input::placeholder { color: var(--hp-muted); }
.hp-field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; cursor: pointer; }
.hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hp-phone { display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.hp-cc { min-width: 96px; }
.hp-field.hp-bad { border-color: #d33; }
.hp-msg { display: none; color: #d33; font-size: 12px; margin-top: 2px; }
.hp-field.hp-bad .hp-msg { display: block; }
.hp-err { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #a4231c; font-size: 13px; }
.hp-btn { margin-top: 22px; width: 100%; border: 0; border-radius: 14px; background: var(--hp-ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 17px; padding: 19px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: transform .15s, background .2s; }
.hp-btn:hover { background: var(--hp-maroon); transform: translateY(-1px); }
.hp-btn:disabled { opacity: .6; cursor: wait; }
.hp-note { text-align: center; color: var(--hp-muted); font-size: 13px; margin: 16px 0 0; }
.hp-done { display: none; text-align: center; padding: 60px 10px; }
.hp-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--hp-ok); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; font-size: 32px; }
.hp-done h3 { margin-bottom: 8px; }
.hp-wa { display: inline-block; margin-top: 18px; padding: 12px 22px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 700; text-decoration: none; }
.hp-wa:hover { color: #fff; background: #1ebe5a; }
.hp-show-done form, .hp-show-done .hp-head { display: none; }
.hp-show-done .hp-done { display: block; }
.hp-ov :focus-visible, .hp-fab:focus-visible { outline: 2px solid var(--hp-coral); outline-offset: 2px; }
/* form fields show focus with their darker bottom line, not a red box */
.hp-field input:focus, .hp-field input:focus-visible, .hp-field select:focus, .hp-field select:focus-visible { outline: none; box-shadow: none; }
.hp-field:focus-within { border-color: var(--hp-maroon); border-bottom-width: 2px; padding-bottom: 5px; }

/* tablet */
@media (max-width: 900px) {
  .hp-modal { grid-template-columns: .85fr 1fr; }
  .hp-left, .hp-right { padding: 28px 24px; }
  .hp-stats { gap: 18px; }
  .hp-tag { left: 0; }
}
/* phone: a bottom sheet that slides up (page stays visible above it), compact fields */
@media (max-width: 700px) {
  .hp-ov { padding: 0; align-items: flex-end; }
  .hp-modal {
    grid-template-columns: 1fr; width: 100%; max-height: 92dvh; height: auto;
    border-radius: 22px 22px 0 0; overflow-y: auto; overscroll-behavior: contain;
    animation: hpSheet .32s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* grab handle */
  .hp-modal::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.45); z-index: 3; }
  .hp-left { padding: 22px 18px 14px; gap: 4px; }
  .hp-left p, .hp-card, .hp-stats, .hp-chips { display: none; }
  .hp-brand { font-size: 10px; letter-spacing: .12em; }
  .hp-brand i { width: 20px; }
  .hp-left h2 { font-size: 21px; padding-right: 44px; }
  .hp-right { padding: 4px 18px 18px; overflow: visible; }
  .hp-right .hp-head { display: none; }
  .hp-close { top: 14px; right: 12px; width: 34px; height: 34px; background: rgba(255,255,255,.16); color: #fff; }
  .hp-close svg { width: 13px; height: 13px; }
  .hp-field { padding: 9px 0 3px; }
  .hp-field label { font-size: 11px; margin-bottom: 0; }
  .hp-field input, .hp-field select { font-size: 16px; padding: 4px 0; }   /* 16px stops iPhone zooming in */
  .hp-phone { gap: 12px; }
  .hp-cc { min-width: 84px; }
  .hp-two { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hp-btn { margin-top: 16px; padding: 14px; font-size: 16px; border-radius: 12px; }
  .hp-note { margin-top: 10px; font-size: 12px; }
  .hp-done { padding: 36px 10px 20px; }
}
@keyframes hpSheet { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 600px) {
  .hp-fab { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; padding: 5px 16px 5px 5px; border-width: 1.5px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
  .hp-fab-ic { width: 36px; height: 36px; }
  .hp-fab-ic svg { width: 17px; height: 17px; }
  .hp-fab small { font-size: 10.5px; }
  .hp-fab b { font-size: 15px; }
}
@media (max-width: 340px) { .hp-two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hp-modal { animation: none; } }
/* phone: call button the same height as the slimmer Book Now button */
@media (max-width: 600px) {
  .hdb-fab { width: 46px; height: 46px; }
  .hdb-fab svg { width: 22px; height: 22px; }
}

/* =========================================================
   HOMEPAGE: FROM OUR BLOG (markup in index.php; latest 3 posts from the admin)
   ========================================================= */
.hb-section { --hb-ink: #2a1f14; --hb-muted: #6b5a44; --hb-gold: #a8641a; --hb-line: #e6d9bd; background: #FAF8F5; padding: 100px 0; }
.hb-wrap { width: min(1180px, 100% - 2rem); margin: 0 auto; }
/* 1–3 cards; fewer than three stay centred instead of leaving gaps */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 370px)); justify-content: center; gap: 1.4rem; }
.hb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hb-line); border-radius: 4px 20px 20px 20px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.hb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(42, 24, 8, .25); }
.hb-pic { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #e0a83a, #a8641a 60%, #3a2f7a); overflow: hidden; }
.hb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hb-card:hover .hb-pic img { transform: scale(1.04); }
.hb-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.hb-body time { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hb-gold); }
.hb-body h3 { font-family: var(--serif, Georgia, serif); font-size: 1.3rem; line-height: 1.25; margin: .45rem 0 .5rem; }
.hb-body h3 a { color: var(--hb-ink); text-decoration: none; }
.hb-body h3 a:hover { color: var(--hb-gold); }
.hb-body p { margin: 0; color: var(--hb-muted); font-size: .95rem; line-height: 1.6; }
.hb-more { margin-top: auto; padding-top: 1rem; align-self: flex-start; color: var(--hb-gold); font-weight: 600; font-size: .92rem; text-decoration: none; }
.hb-more span { display: inline-block; transition: transform .2s; }
.hb-more:hover { color: var(--hb-gold); text-decoration: underline; }
.hb-more:hover span { transform: translateX(3px); }
.hb-all { text-align: center; margin-top: 2.2rem; }
.hb-all a { display: inline-block; padding: .8rem 1.8rem; border: 1.5px solid var(--hb-gold); border-radius: 999px; color: var(--hb-gold); font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.hb-all a:hover { background: var(--hb-gold); color: #fff; }
.hb-card a:focus-visible, .hb-all a:focus-visible { outline: 3px solid var(--hb-gold); outline-offset: 3px; }
@media (max-width: 767px) {
  .hb-section { padding: 60px 0; }
  .hb-grid { grid-template-columns: 1fr; }
  .hb-body h3 { font-size: 1.15rem; }
}

/* =========================================================
   HOMEPAGE HERO — refreshed look (markup + slider script in index.php)
   Scoped to .hero-slider so the other pages' heroes are untouched.
   ========================================================= */
.hero-slider { --hr-gold: #e8b04a; --hr-gold2: #f3cf7a; background: #1a110b; }

/* cinematic shade: dark on the text side, clear on the photo side, soft fade at the bottom */
.hero-slider .hero-slide::after {
  background:
    linear-gradient(90deg, rgba(18,10,6,.78) 0%, rgba(18,10,6,.45) 38%, rgba(18,10,6,.08) 70%, rgba(18,10,6,0) 100%),
    linear-gradient(0deg, rgba(18,10,6,.55) 0%, rgba(18,10,6,0) 38%);
}
.hero-slider .hero-slide img { transition: transform 9s ease-out; }

/* content: left, vertically centred, a little above the search card */
.hero-slider .hero-content { justify-content: center; padding: 0 7vw 40px; max-width: 760px; }

.hero-slider .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; color: var(--hr-gold); margin-bottom: 18px;
}
.hero-slider .hero-eyebrow::before { content: ""; width: 36px; height: 1.5px; background: linear-gradient(90deg, var(--hr-gold), transparent); }

.hero-slider .hero-title {
  font-family: var(--serif, 'Fraunces', serif); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(2.3rem, 5.4vw, 4.8rem); line-height: 1.02; max-width: 13ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero-slider .hero-title em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(95deg, var(--hr-gold2), var(--hr-gold) 45%, #f0845a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-slider .hero-desc { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; max-width: 44ch; margin-top: 20px; }

/* buttons */
.hero-slider .hero-actions { margin-top: 32px; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity .8s ease .8s, transform .8s ease .8s; }
.hero-slider .hero-slide.is-active .hero-actions { opacity: 1; transform: none; }
.hero-slider .hero-actions .btn {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 30px;
  font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: none;
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.hero-slider .hero-actions .btn-primary {
  background: linear-gradient(135deg, var(--hr-gold2), var(--hr-gold)); color: #2a1a12; border: 0;
  box-shadow: 0 12px 30px -10px rgba(232,176,74,.65);
}
.hero-slider .hero-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(232,176,74,.8); background: linear-gradient(135deg, #f7da90, #eab656); color: #2a1a12; }
.hero-slider .hero-btn-arrow { width: 18px; height: 18px; transition: transform .25s; }
.hero-slider .btn-primary:hover .hero-btn-arrow { transform: translateX(3px); }
.hero-slider .hero-actions .btn-outline {
  color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-slider .hero-actions .btn-outline:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; transform: translateY(-2px); }

/* trust line */
.hero-slider .hero-trust {
  list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: .86rem; color: rgba(255,255,255,.78);
  opacity: 0; transition: opacity .8s ease 1s;
}
.hero-slider .hero-slide.is-active .hero-trust { opacity: 1; }
.hero-slider .hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-slider .hero-trust li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--hr-gold); margin-right: 16px; }
.hero-slider .hero-star { color: var(--hr-gold); }

/* arrows: glass circles */
.hero-slider .hero-arrow {
  width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, border-color .25s, transform .25s;
}
.hero-slider .hero-arrow:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.hero-slider .hero-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero-slider .hero-arrow.next:hover { transform: translateY(-50%) translateX(2px); }

/* slide counter + line indicators (the active line fills with the slide timer) */
.hero-slider .hero-counter { position: absolute; z-index: 6; left: 7vw; bottom: 34px; font-size: .85rem; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.hero-slider .hero-counter b { color: #fff; font-weight: 600; font-size: 1.05rem; }
.hero-slider .hero-dots { right: 7vw; bottom: 30px; gap: 8px; align-items: center; }
.hero-slider .hero-dot { width: 34px; height: 26px; }
.hero-slider .hero-dot::before {
  width: 100%; height: 3px; border-radius: 3px; transform: none !important;
  background: linear-gradient(90deg, var(--hr-gold) var(--p, 0%), rgba(255,255,255,.35) var(--p, 0%));
}
.hero-slider .hero-dot.is-active { width: 54px; }
.hero-slider .hero-dot:not(.is-active)::before { background: rgba(255,255,255,.35); }
.hero-slider .hero-dot:hover::before { background: rgba(255,255,255,.7); }
.hero-slider .hero-progress { display: none; }   /* replaced by the filling line */

/* controls row, kept above the search card that overlaps the hero's bottom edge:
   counter (left) · lines (centre) · arrows (right, away from the text) */
.hero-slider .hero-content { padding-top: 48px; padding-bottom: 110px; }
@media (min-width: 901px) { .hero-slider { min-height: 620px; } }   /* room for the text + controls on short laptop screens */
.hero-slider .hero-counter { bottom: 76px; }
.hero-slider .hero-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 72px; }
.hero-slider .hero-arrow { top: auto; bottom: 64px; transform: none; }
.hero-slider .hero-arrow.prev { left: auto; right: calc(7vw + 60px); }
.hero-slider .hero-arrow.next { right: 7vw; }
.hero-slider .hero-arrow.prev:hover { transform: translateX(-2px); }
.hero-slider .hero-arrow.next:hover { transform: translateX(2px); }

/* tablet */
@media (max-width: 900px) {
  .hero-slider .hero-content { padding: 0 6vw 100px; }
  .hero-slider .hero-counter { left: 6vw; bottom: 64px; }
  .hero-slider .hero-dots { bottom: 60px; }
  .hero-slider .hero-arrow { bottom: 54px; width: 44px; height: 44px; }
  .hero-slider .hero-arrow.prev { right: calc(6vw + 54px); }
  .hero-slider .hero-arrow.next { right: 6vw; }
}
/* phone */
@media (max-width: 560px) {
  .hero-slider .hero-slide::after {
    background: linear-gradient(0deg, rgba(18,10,6,.85) 0%, rgba(18,10,6,.45) 50%, rgba(18,10,6,.2) 100%);
  }
  /* phone: hero sized to the text (was 560px with ~210px of empty photo above the heading) */
  .hero-slider { height: 450px; min-height: 0; max-height: none; }
  .hero-slider .hero-content { justify-content: flex-end; padding: 0 20px 68px; }
  .hero-slider .hero-eyebrow { font-size: .68rem; letter-spacing: .18em; margin-bottom: 12px; }
  .hero-slider .hero-eyebrow::before { width: 24px; }
  .hero-slider .hero-title { font-size: clamp(1.95rem, 8.4vw, 2.5rem); max-width: 14ch; }
  .hero-slider .hero-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .92rem; margin-top: 12px;
  }
  .hero-slider .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .hero-slider .hero-actions .btn { justify-content: center; padding: 13px 10px; font-size: .86rem; white-space: nowrap; }
  .hero-slider .hero-trust { margin-top: 16px; font-size: .74rem; gap: 4px 12px; }
  .hero-slider .hero-trust li + li::before { margin-right: 8px; }
  .hero-slider .hero-trust li:nth-child(3) { display: none; }   /* two facts fit on one line */
  .hero-slider .hero-counter { left: 20px; bottom: 20px; font-size: .75rem; }
  .hero-slider .hero-dots { left: auto; right: 16px; transform: none; bottom: 14px; }
  .hero-slider .hero-dot { width: 22px; }
  .hero-slider .hero-dot.is-active { width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-actions, .hero-slider .hero-trust { transition: none; opacity: 1; transform: none; }
}

/* hero text: centred on phones only (desktop/tablet stay left-aligned) */
@media (max-width: 560px) {
  .hero-slider .hero-content { align-items: center; text-align: center; }
  .hero-slider .hero-eyebrow::after { content: ""; width: 24px; height: 1.5px; background: linear-gradient(270deg, var(--hr-gold), transparent); }
  .hero-slider .hero-title, .hero-slider .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-slider .hero-actions, .hero-slider .hero-trust { justify-content: center; }
}