:root{
    --gold:#D8B58B;
    --sand:#E8CA9A;
    --maroon:#7D0101;
    --charcoal:#252525;
    --ink:#000000;
    --paper:#FFFFFF;
    --display:'Sakkal Majalla','Marcellus',serif;
    --body:'Montserrat',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
  }
  ::selection{background:var(--maroon);color:var(--gold)}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--maroon);outline-offset:3px}

  /* ---------- shared type ---------- */
  .eyebrow{
    font:500 clamp(13px,1.25vw,18px)/1.25 var(--body);
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .display{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(34px,3.6vw,51px);
    line-height:1.25;
  }
  .rule{
    position:relative;height:2px;background:var(--gold);
    margin-top:26px;overflow:hidden;
  }
  .rule i{
    position:absolute;left:0;top:0;height:100%;width:120px;
    background:var(--maroon);display:block;
  }

  /* ---------- nav ---------- */
  nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,8.6vw,125px);
    transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
  }
  nav.scrolled{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(37,37,37,.08);
    padding-top:12px;padding-bottom:12px;
  }
  .brand{display:flex;align-items:center}
  .brand img{height:38px;width:auto;display:block}
  nav.scrolled .brand img{height:32px}
  .sound-btn{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;cursor:pointer;
    border:1px solid var(--ink);background:transparent;color:var(--ink);
    transition:background .25s,color .25s,border-color .25s;
  }
  .sound-btn svg{width:18px;height:18px}
  .sound-btn .mute-line{opacity:1;transition:opacity .2s}
  .sound-btn[aria-pressed="true"] .mute-line{opacity:0}
  .sound-btn[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:var(--gold)}
  .sound-btn:hover{border-color:var(--maroon)}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{
    font:500 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
    padding:6px 0;border-bottom:1px solid transparent;
    transition:border-color .25s;
  }
  .nav-links a:hover{border-color:var(--maroon)}
  @media(max-width:820px){.nav-links{gap:16px}.nav-links a{font-size:10px;letter-spacing:.1em}}

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 78% 30%, #ecd2ab 0%, transparent 60%),
        linear-gradient(180deg, #e3c093 0%, var(--gold) 55%, #cfa87c 100%);
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }

  /* Mobile only */
  @media (max-width: 767px) {
    .hero {
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 50%,
            #e3c093 50%,
            var(--gold) 75%,
            #cfa87c 100%
        );
    }
    .scroll-hint {
      display: none !important;
    }
  }
  .hero-bg{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;
  }
  .hero-bg img{
    width:100%;height:100%;object-fit:cover;object-position:center 72%;
    display:block;
  }
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(255,250,240,.45) 0%,rgba(255,250,240,0) 48%);
  }
  .hero-inner{
    position:relative;z-index:2;width:100%;
    padding:clamp(110px,14vh,150px) clamp(20px,8.6vw,125px) 70px;
    display:grid;grid-template-columns:minmax(320px,470px) 1fr;gap:40px;
    align-items:start;
  }
  .live-badge{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
    border-radius:109px;padding:8px 18px;
    font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:26px;backdrop-filter:blur(6px);
  }
  .live-badge .dot{
    width:8px;height:8px;border-radius:50%;background:var(--maroon);
    animation:pulse 1.8s ease-out infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(125,1,1,.45)}
    70%{box-shadow:0 0 0 10px rgba(125,1,1,0)}
    100%{box-shadow:0 0 0 0 rgba(125,1,1,0)}
  }
  .hero h1{max-width:520px}
  .hero .sub{
    font:500 clamp(15px,1.3vw,18px)/1.5 var(--body);
    margin-top:14px;
  }
  .hero .dates{
    font:500 clamp(22px,2vw,28px)/1.2 var(--body);
    margin-top:22px;
  }
  .hero .dates span{color:var(--maroon)}

  /* enquiry card — Figma Frame 1 */
  .enquiry{
    margin-top:34px;max-width:373px;
    background:rgba(255,255,255,.52);
    border:1px solid #E8E8E8;border-radius:27px;
    padding:32px 24px 24px;
    backdrop-filter:blur(10px);
    box-shadow:0 24px 60px -30px rgba(60,35,5,.35);
  }
  .enquiry label{
    display:block;font:500 12px/1 var(--body);margin:14px 0 7px;
  }
  .enquiry label:first-of-type{margin-top:0}
  .enquiry input,.enquiry textarea{
    width:100%;font:500 13px/1.4 var(--body);color:var(--ink);
    background:rgba(255,255,255,.7);border:1px solid #E8E8E8;
    border-radius:27px;padding:9px 16px;resize:none;
  }
  .enquiry textarea{height:110px;border-radius:18px}
  .enquiry input:focus,.enquiry textarea:focus{
    outline:none;border-color:var(--maroon);
  }
  .enquiry button{
    width:100%;margin-top:18px;cursor:pointer;
    font:500 14px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
    background:rgba(255,255,255,.52);border:1px solid transparent;border-radius:27px;
    padding:12px;color:var(--ink);
    transition:background .25s,color .25s;
  }
  .enquiry button:hover{background:var(--maroon);color:var(--gold)}
  .enquiry .note{
    display:none;margin-top:14px;text-align:center;
    font:500 12px/1.5 var(--body);color:var(--maroon);
  }
  .enquiry.sent form{display:none}
  .enquiry.sent .note{display:block}
  .field-err{border-color:var(--maroon) !important}

  .scroll-hint{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
    z-index:3;font:500 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
    display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.75;
  }
  .scroll-hint::after{
    content:"";width:1px;height:38px;background:var(--ink);
    animation:drop 2s ease-in-out infinite;
  }
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  .hero-mobile-image{display:none;}

  @media(max-width:900px){
    .hero{min-height:0;display:block;padding-bottom:48px;}
    .hero-bg{display:none;}
    .hero-inner{grid-template-columns:1fr;padding-bottom:0;}
    .hero-mobile-image{display:block;margin:28px calc(-1 * clamp(20px,8.6vw,125px)) 32px;overflow:hidden;}
    .hero-mobile-image img{display:block;width:100%;height:auto;object-fit:cover;}
  }

  /* ---------- interior (pinned horizontal walkthrough) ---------- */
  .interior{background:var(--sand)}
  .interior .pin{height:340vh;position:relative}
  .interior .viewport{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
  }
  .interior header{
    padding:0 clamp(20px,8.6vw,125px);margin-bottom:8px;margin-top:50px;
  }
  .interior header p.lead{
    font:500 clamp(14px,1.25vw,18px)/1.35 var(--body);
    max-width:445px;margin-top:10px;
  }
  .track{
    display:flex;gap:52px;
    padding:34px clamp(20px,8.6vw,125px) 10px;
    will-change:transform;
  }
  .room{
    flex:0 0 auto;width:min(561px,80vw);
    display:flex;flex-direction:column;gap:16px;
  }
  .room .plate{
    height:min(480px,52vh);background:var(--paper);border-radius:34px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;
    box-shadow:0 30px 60px -40px rgba(60,35,5,.4);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .room:hover .plate{transform:translateY(-8px)}
  .room .plate img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .room:hover .plate img{transform:scale(1.045)}
  .room h3{font:500 clamp(18px,1.6vw,22px)/1.25 var(--body)}
  .room .tag{
    font:500 clamp(11px,1vw,14px)/1.25 var(--body);
    letter-spacing:.12em;color:var(--maroon);text-transform:uppercase;
  }
  .interior .progress{
    margin:40px clamp(20px,8.6vw,125px) 0;
    height:2px;background:var(--gold);position:relative;
  }
  .interior .progress i{
    position:absolute;left:0;top:-1px;height:4px;width:364px;max-width:40%;
    background:var(--maroon);will-change:transform;
  }

  /* ---------- exterior (scroll-morph image sequence) ---------- */
  .exterior{background:#141210}
  .exterior .pin{height:380vh;position:relative}
  .exterior .viewport{
    position:sticky;top:0;height:100vh;overflow:hidden;
  }
  .seq img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;will-change:opacity;
  }
  .seq img:first-child{opacity:1}

  /* ---------- amenities ---------- */
  .amenities{
    scroll-margin-top:64px;
    background:var(--sand);
    padding:clamp(90px,12vh,158px) clamp(20px,8.6vw,125px) clamp(80px,10vh,120px);
  }
  .amenities-grid{
    margin-top:56px;
    display:grid;gap:0;
    grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
  }
  .cell{
    border:2px solid var(--gold);margin:-1px 0 0 -1px;
    aspect-ratio:1/1;min-height:226px;
    padding:26px 18px 24px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
    background:transparent;position:relative;overflow:hidden;
    opacity:0;transform:translateY(26px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),background .35s;
  }
  .cell.in{opacity:1;transform:none}
  .cell:hover{background:rgba(255,255,255,.42)}
  .cell .icon{
    position:absolute;top:22px;left:18px;width:34px;height:34px;
    color:var(--maroon);transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .cell:hover .icon{transform:translateY(-4px)}
  .cell h3{font-family:var(--display);font-size:24px;line-height:1.3;font-weight:400}
  .cell p{font:400 13.5px/1.4 var(--body);max-width:200px}

  /* ---------- about JCBL (legacy) ---------- */
  .about{
    position:relative;
    background:#E9CA9B; /* matched to the Lalru image sky */
    display:grid;
    text-align:center;
    overflow:hidden;
  }
  .about > .reveal{
    grid-area:1/1;position:relative;z-index:1;
    padding:clamp(80px,11vh,140px) 0 clamp(200px,27vw,470px); /* keeps text on the sky, clear of the factory */
  }
  .about .eyebrow{letter-spacing:.04em;text-transform:none;font-size:clamp(14px,1.2vw,18px)}
  .about h2{max-width:620px;margin:6px auto 0}
  .about .copy{
    max-width:820px;margin:26px auto 0;
    padding:0 clamp(20px,6vw,40px);
    font:400 clamp(13px,1.05vw,15px)/1.65 var(--body);
  }
  .about-cta{
    display:inline-block;margin-top:36px;cursor:pointer;
    font:500 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);background:none;
    border:1.5px solid var(--ink);border-radius:109px;padding:13px 26px;
    transition:background .3s,color .3s,border-color .3s;
  }
  .about-cta:hover{background:var(--maroon);border-color:var(--maroon);color:var(--gold)}
  .about-img{grid-area:1/1;z-index:0;align-self:end}
  .about-img img{
    width:100%;height:auto;display:block; /* original width and aspect — never zoomed or cropped */
  }

  /* ---------- what sets us apart ---------- */
  .apart{
    background:var(--charcoal);color:var(--gold);
    padding:clamp(90px,12vh,150px) clamp(20px,8.6vw,125px);
    border-bottom:1px solid rgba(216,181,139,.18);
  }
  .apart h2{
    font-family:var(--display);font-weight:400;
    font-size:clamp(32px,3.2vw,48px);line-height:1.25;
    text-align:center;color:var(--gold);
  }
  .apart h2 .soft{opacity:.55}
  .apart-grid{
    margin-top:clamp(44px,7vh,72px);
    display:grid;grid-template-columns:1fr 1fr;
    gap:38px clamp(40px,6vw,96px);
    max-width:1190px;margin-left:auto;margin-right:auto;
  }
  .apart-item{display:flex;gap:18px;align-items:flex-start}
  .apart-item .a-icon{
    flex:0 0 auto;width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(216,181,139,.45);border-radius:50%;
    color:var(--gold);
  }
  .apart-item .a-icon svg{width:19px;height:19px}
  .apart-item p{
    font:400 clamp(13.5px,1.05vw,15px)/1.65 var(--body);
    color:rgba(232,202,154,.92);margin-top:8px;
  }
  .apart-item p strong{font-weight:600;color:var(--gold)}
  .apart-grid .reveal:nth-child(2){transition-delay:.08s}
  .apart-grid .reveal:nth-child(3){transition-delay:.16s}
  .apart-grid .reveal:nth-child(4){transition-delay:.24s}
  .apart-grid .reveal:nth-child(5){transition-delay:.12s}
  .apart-grid .reveal:nth-child(6){transition-delay:.2s}
  .apart-grid .reveal:nth-child(7){transition-delay:.28s}
  .apart-grid .reveal:nth-child(8){transition-delay:.36s}
  @media(max-width:760px){.apart-grid{grid-template-columns:1fr;gap:28px}}

  /* ---------- footer ---------- */
  footer{
    background:#E9CA9B;color:var(--ink);
    display:grid;grid-template-columns:41% 59%;min-height:477px;
  }
  .foot-art{
    position:relative;overflow:hidden;
    border-right:1px solid rgba(37,37,37,.18);
  }
  .foot-art img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .foot-main{
    padding:clamp(60px,16vh,158px) clamp(24px,8vw,118px);
    display:flex;flex-direction:column;gap:21px;justify-content:center;
  }
  .foot-main .eyebrow{color:var(--gold)}
  .foot-logo{
    height:44px;width:auto;align-self:flex-start;
  }
  .foot-main .display{color:var(--ink)}
  .foot-cta{
    align-self:flex-start;
    border:1.5px solid var(--ink);border-radius:109px;
    padding:11px 26px;cursor:pointer;background:none;color:var(--ink);
    font:500 14px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
  }
  .foot-cta:hover{background:var(--maroon);border-color:var(--maroon);color:var(--gold)}
  .foot-meta{
    grid-column:1/-1;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    padding:22px clamp(24px,8vw,118px);
    border-top:1px solid rgba(37,37,37,.2);
    font:500 11px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;
    color:rgba(37,37,37,.7);
  }
  @media(max-width:860px){
    footer{grid-template-columns:1fr}
    .foot-art{min-height:240px;border-right:none;border-bottom:1px solid rgba(37,37,37,.18)}
  }

  /* section reveal */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .interior .pin,.exterior .pin{height:auto}
    .interior .viewport,.exterior .viewport{position:static;height:auto;overflow:visible}
    .seq{display:grid}
    .seq img{position:static;opacity:1;height:auto}
    .track{flex-wrap:wrap;transform:none !important}
    .scroll-hint,.live-badge .dot{animation:none}
    .cell,.reveal{opacity:1;transform:none;transition:none}
  }

  .notice {margin-bottom:16px;border-radius:8px; padding:12px 14px;font-weight:700;}

  .notice.success {background:#e8f4ec;color:#1f5b35;}

  .notice.error {background:#fff0ec;color:#8d321e;}

  /* Mobile Navigation */
  .menu-toggle{
    display:none;
    background:none;
    border:0;
    color:var(--ink);
    font-size:30px;
    cursor:pointer;
    line-height:1;
  }

  @media (max-width:768px) {
    nav{
      padding:15px 20px;
      align-items:center;
    }

    .brand img{
      height:32px;
    }

    .menu-toggle{
      display:block;
    }

    .nav-links{
      position:absolute;
      top:100%;
      left:0;
      width:100%;
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 25px rgba(0,0,0,.08);
      display:none;
      flex-direction:column;
      align-items:center;
      gap:20px;
      padding:20px;
    }

    .nav-links.active{
      display:flex;
    }

    .nav-links a{
      font-size:13px;
      letter-spacing:.12em;
    }
  }

  /*footer css start*/
  footer.site-footer {
  --gold: #d8b58b;
  --sand: #e9ca9b;
  --maroon: #7d0101;
  --ink: #252525;
    display: grid;
    width: 100%;
    min-height: 500px;
    grid-template-columns: 42% 58%;
    color: var(--ink);
    background: var(--sand);
    font-family: "Montserrat", sans-serif;
  }

  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    box-sizing: border-box;
  }

  .site-footer a {
    color: inherit;
    text-decoration: none;
  }

  /* Image */

  .site-footer .footer-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
  }

  .site-footer .footer-image::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent 60%,
      rgba(233, 202, 155, 0.2)
    );
  }

  .site-footer .footer-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Footer content */

  .site-footer .footer-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(55px, 7vw, 100px);
  }

  .site-footer .footer-logo {
    display: block;
    width: auto;
    height: 42px;
    margin-bottom: 32px;
    object-fit: contain;
    align-self: flex-start;
  }

  .site-footer .footer-label {
    margin: 0 0 10px;
    color: var(--maroon);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .site-footer h2 {
    max-width: 620px;
    margin: 0 0 30px;
    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(36px, 4vw, 55px);
    font-weight: 400;
    line-height: 1.15;
  }

  /* Contact information */

  .site-footer .footer-contact {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    border-top: 1px solid rgba(37, 37, 37, 0.18);
  }

  .site-footer .footer-contact > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(37, 37, 37, 0.18);
    transition: color 0.25s ease, padding-left 0.25s ease;
  }

  .site-footer .footer-contact > a:hover {
    padding-left: 5px;
    color: var(--maroon);
  }

  .site-footer .contact-icon {
    display: grid;
    width: 40px;
    height: 40px;
    color: var(--maroon);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(125, 1, 1, 0.2);
    border-radius: 50%;
    place-items: center;
  }

  .site-footer .contact-icon svg {
    width: 17px;
    height: 17px;
  }

  .site-footer .footer-contact a > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
  }

  .site-footer .footer-contact small {
    color: rgba(37, 37, 37, 0.62);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-footer .footer-contact strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 500;
  }

  /* Button and social icons */

  .site-footer .footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
  }

  .site-footer .footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 25px;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: 0.25s ease;
  }

  .site-footer .footer-button:hover {
    color: var(--gold);
    background: var(--maroon);
    border-color: var(--maroon);
  }

  .site-footer .footer-socials {
    display: flex;
    gap: 9px;
  }

  .site-footer .footer-socials a {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(37, 37, 37, 0.35);
    border-radius: 50%;
    place-items: center;
    transition: 0.25s ease;
  }

  .site-footer .footer-socials svg {
    width: 16px;
    height: 16px;
  }

  .site-footer .footer-socials a:hover {
    color: var(--gold);
    background: var(--maroon);
    border-color: var(--maroon);
    transform: translateY(-3px);
  }

  /* Bottom row */

  .site-footer .footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 21px clamp(24px, 7vw, 100px);
    color: rgba(37, 37, 37, 0.65);
    border-top: 1px solid rgba(37, 37, 37, 0.18);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-footer a:focus-visible {
    outline: 2px solid var(--maroon);
    outline-offset: 3px;
  }

  /* Tablet and mobile */

  @media (max-width: 850px) {
    footer.site-footer {
      grid-template-columns: 1fr;
    }

    .site-footer .footer-image {
      min-height: 310px;
    }

    .site-footer .footer-content {
      padding: 55px 24px;
    }

    .site-footer .footer-bottom {
      grid-column: auto;
      padding: 20px 24px;
    }
  }

  @media (max-width: 520px) {
    .site-footer .footer-image {
      min-height: 240px;
    }

    .site-footer h2 {
      font-size: 38px;
    }

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

    .site-footer .footer-bottom {
      flex-direction: column;
    }
  }

  /*footer contact number css*/
  .site-footer .contact-phone-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    color: var(--ink);
    border-bottom: 1px solid rgba(37, 37, 37, 0.18);
    transition:
      color 0.25s ease,
      padding-left 0.25s ease;
  }

  /* Same row hover effect */
  .site-footer .contact-phone-row:hover {
    padding-left: 5px;
    color: var(--maroon);
  }

  /* Same icon hover effect */
  .site-footer .contact-phone-row .contact-icon {
    transition:
      color 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease;
  }

  .site-footer .phone-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
  }

  .site-footer .phone-content > small {
    color: rgba(37, 37, 37, 0.62);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.25s ease;
  }

  .site-footer .phone-numbers {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }

  .site-footer .phone-numbers a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.25s ease;
  }

  .site-footer .phone-numbers a:hover {
    opacity: 0.65;
  }

  .site-footer .phone-numbers i {
    width: 1px;
    height: 16px;
    background: rgba(37, 37, 37, 0.28);
    transition: background-color 0.25s ease;
  }

  .site-footer .contact-phone-row:hover .phone-numbers i {
    background: rgba(125, 1, 1, 0.35);
  }

  .site-footer .phone-numbers a:focus-visible {
    outline: 2px solid var(--maroon);
    outline-offset: 3px;
  }

  /* Stack numbers on small screens */
  @media (max-width: 430px) {
    .site-footer .phone-numbers {
      align-items: flex-start;
      flex-direction: column;
      gap: 5px;
      white-space: normal;
    }

    .site-footer .phone-numbers i {
      display: none;
    }
  }

  .desktop-br {
    display: block;
  }

  @media (max-width: 767px) {
    .desktop-br {
      display: none;
    }

    .room .plate {
      height: min(480px, 40vh);    
    }
  }

  /* Desktop navigation only */
  @media (min-width: 769px) {
    #nav .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px;
      background: rgba(25, 18, 12, 0.58);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 50px;
      box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    #nav .nav-links a {
      display: block;
      padding: 11px 18px;
      border: 0;
      border-radius: 30px;
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
      transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    #nav .nav-links a:hover,
    #nav .nav-links a:focus-visible {
      color: #ffffff;
      background: var(--maroon);
      box-shadow: 0 5px 16px rgba(125, 1, 1, 0.35);
      transform: translateY(-1px);
    }

    /* Lighter navigation after scrolling */
    #nav.scrolled .nav-links {
      backdrop-filter: unset;
      background: unset;
      border-color: unset;
      box-shadow: unset;
      border: unset;
    }

    #nav.scrolled .nav-links a {
      color: var(--charcoal);
      text-shadow: none;
    }

    #nav.scrolled .nav-links a:hover,
    #nav.scrolled .nav-links a:focus-visible {
      color: #ffffff;
      background: var(--maroon);
    }
  }