/* Section 1 only. Original base/layout CSS and all following sections are unchanged. */
/* Remove the original 920/850px floors so the complete rail fits short desktop views. */
.demo-a .a-hero{height:100svh;min-height:720px;max-height:1200px}
.demo-a .a-hero-copy{padding-top:140px;padding-bottom:36px}
.demo-a .a-hero-booking{margin-bottom:max(24px,env(safe-area-inset-bottom))}
@media(min-width:1100px) and (max-height:800px){
 .demo-a .a-hero{min-height:700px}
 .demo-a .a-hero-copy{padding-top:128px;padding-bottom:28px}

 .demo-a .a-hero-booking{margin-bottom:22px}
}
/* Tablet keeps the same image-led composition, with a deliberate two-by-two rail. */
@media(min-width:768px) and (max-width:1099px){
 .demo-a .a-hero{height:100svh;min-height:740px;max-height:none}
 .demo-a .a-hero-copy{padding:140px 32px 28px}
 .demo-a .a-hero h1{font-size:clamp(76px,9.8vw,100px)}
 .demo-a .a-hero-booking{margin-bottom:24px}
 .demo-a .a-hero .booking-form fieldset{grid-template-columns:1fr 1fr 1fr auto}
 .demo-a .a-hero .booking-field>button{min-height:40px}
}
/* A single real photograph connects the header, identity and floating booking panel. */
@media(max-width:767px){
 .demo-a .overlay-nav{position:absolute;inset:0 0 auto;color:#fff;padding-top:calc(12px + env(safe-area-inset-top))}
 .demo-a .overlay-nav::before{display:block;inset:0 0 -28px;background:linear-gradient(180deg,#10261cda,transparent)}
 .demo-a .a-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100svh;min-height:730px;max-height:none;isolation:isolate;color:#fff;overflow:visible}
 .demo-a .a-hero .hero-media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;overflow:hidden}
 .demo-a .a-hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:61% 42%}
 .demo-a .a-hero .hero-media::after{display:block;content:'';position:absolute;inset:0;background:linear-gradient(180deg,#10261c1a 12%,#10261c00 28%,#10261c99 52%,#10261ce0 76%,#10261cf0)}
 .demo-a .a-hero-copy{order:initial;padding:136px 20px 22px;position:relative}
 .demo-a .a-hero-copy .eyebrow{font-size:9px;line-height:1.7;letter-spacing:.1em;max-width:36ch}
 .demo-a .a-hero h1{font-size:clamp(46px,13.8vw,64px);line-height:1.05;letter-spacing:-.035em;margin:16px 0 18px;white-space:nowrap}
 .demo-a .a-hero-copy>p:not(.eyebrow){font-size:24px;line-height:1.25;max-width:28ch}


 .demo-a .a-hero-booking{order:initial;margin-top:0;margin-bottom:max(24px,env(safe-area-inset-bottom));width:calc(100% - 40px)}
 .demo-a .a-hero-booking .booking-wrap{padding:16px;border:1px solid #ffffff50;background:#10291f9c;box-shadow:0 8px 30px #07190d26;backdrop-filter:blur(5px);scroll-margin-top:20px}
 .demo-a .a-hero .booking-heading{color:#fff;align-items:center;font-size:10px;letter-spacing:.05em;gap:12px;margin-bottom:12px}
 .demo-a .a-hero .booking-heading>span:last-child{font-size:9px;max-width:12ch;line-height:1.5}
 .demo-a .a-hero .booking-field{padding:10px 12px}
 .demo-a .a-hero .booking-field>span{font-size:10px;letter-spacing:.08em;margin-bottom:3px}
 .demo-a .a-hero .booking-field>button{font-size:15px;min-height:44px;gap:10px}
 .demo-a .a-hero .check-button{min-height:82px;font-size:13px;padding:14px 12px;gap:12px}


 /* Keep the approved menu behavior and its solid, readable open state. */
 .nav-open.demo-a .overlay-nav{position:fixed;background:var(--paper);color:var(--ink)}
 .nav-open.demo-a .overlay-nav::before{display:none}
 .demo-a:not(.nav-ready) .overlay-nav{position:relative;background:#243b31}
}
@media(max-width:359px){
 .demo-a .overlay-nav{padding-inline:16px}
 .demo-a .a-hero{min-height:740px}
 .demo-a .a-hero-copy{padding:128px 16px 18px}
 .demo-a .a-hero h1{font-size:46px;margin-block:14px 16px}
 .demo-a .a-hero-copy>p:not(.eyebrow){font-size:22px}
 .demo-a .a-hero-booking{width:calc(100% - 32px);margin-bottom:max(20px,env(safe-area-inset-bottom))}
 .demo-a .a-hero-booking .booking-wrap{padding:12px}
 .demo-a .a-hero .booking-field{padding-inline:10px}
 .demo-a .a-hero .booking-field>button{font-size:14px}
 .demo-a .a-hero .check-button{font-size:12px;padding-inline:10px;gap:8px}
 .demo-a .a-hero .booking-heading{font-size:9px}
 .demo-a .a-hero .booking-heading>span:last-child{font-size:8px}
}
/* Existing top-layer dialogs remain outside hero clipping and stacking contexts. */
@media(max-width:767px){
 .demo-a .calendar-dialog,.demo-a .guest-dialog,.demo-a .notice-dialog{max-height:calc(100dvh - 24px);max-width:calc(100% - 24px);overscroll-behavior:contain;scroll-padding-block:72px}
 .demo-a .calendar-dialog .dialog-actions{position:sticky;bottom:-20px;z-index:2;padding-block:10px;background:#fbfaf6;box-shadow:0 -8px 14px #fbfaf6}
 .demo-a .guest-dialog .counter .icon-button{width:44px;height:44px;min-width:44px}
}
@media(max-width:359px){.demo-a .calendar-dialog .dialog-actions{bottom:-16px}.demo-a .guest-dialog .counter{gap:8px}}
@media(prefers-reduced-motion:reduce){.demo-a .a-hero .hero-media>img{animation:none;transform:none}}

/* Owner-selected banner a6ce4b3b: preserve the entrance and sunset in a near-square source. */
.demo-a .a-hero .hero-media img{object-position:50% 60%}
@media(max-width:767px){.demo-a .a-hero .hero-media img{object-position:40% 50%}}