@font-face{font-family:Roboto;src:url('assets/Roboto-Regular.ttf')}@font-face{font-family:Roboto;src:url('assets/Roboto-Bold.ttf');font-weight:700}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#8be7d7;color:#ff583b;font-family:Roboto,Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}header{height:136px;background:#f3ead9}.header-inner{max-width:1162px;margin:auto;height:100%;position:relative;display:flex;align-items:flex-start;justify-content:space-between}.logo{width:364px;height:95px;object-fit:contain;margin-top:20px}nav{display:flex;position:absolute;left:478px;right:0;bottom:20px;justify-content:space-between;align-items:center;font-size:16px}nav button{color:inherit;padding:0;background:none}nav a:hover,nav button:hover{text-decoration:underline;text-underline-offset:5px}.menu-toggle{display:none}.layout{max-width:1162px;margin:auto;display:grid;grid-template-columns:430px minmax(0,684px);column-gap:48px;grid-template-rows:479px 186px}.intro{padding-top:80px}h1{font-size:50px;line-height:1.18;letter-spacing:-1.5px;margin:0;font-weight:700}h1 span{display:block;white-space:nowrap}.intro>p{font-size:18px;line-height:22px;letter-spacing:.5px;margin:25px 0 39px}#booking{height:50px;display:flex;background:#f3ead9;border-radius:11px;overflow:hidden}.fields{display:flex;flex:1;min-width:0}.fields label{position:relative;flex:1;min-width:0;font-size:12px;padding:8px 10px 5px 18px;display:flex;flex-direction:column;gap:5px}.fields label+label:before{content:'';position:absolute;left:0;top:12px;bottom:12px;border-left:1px solid #ff583b}.fields small{font-size:10px;color:#888}.fields select,.fields input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.fields label:after{content:'▾';position:absolute;right:8px;top:6px}.book{background:#ff583b;color:#f3ead9;font-size:24px;font-weight:700;padding:0 7px;letter-spacing:-1px}.visual{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column}.strip{width:100%;aspect-ratio:5 / 1;overflow:hidden}.strip img{width:100%;height:100%;object-fit:fill}.slideshow{height:414px;position:relative;overflow:hidden;background:#f3ead9}.slideshow>img{width:100%;height:100%;object-fit:cover;display:block}.slide-control{position:absolute;color:white;background:#0004;opacity:0;transition:opacity .2s;border-radius:3px}.slideshow:hover .slide-control,.slideshow:focus-within .slide-control{opacity:1}.prev,.next{top:45%;font-size:34px;padding:0 12px}.prev{left:10px}.next{right:10px}.pause{right:12px;bottom:12px;padding:8px}.dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.dots button{width:8px;height:8px;border-radius:50%;padding:0;background:#fff8}.dots button.active{background:white}.tiles{display:grid;grid-template-columns:repeat(6,1fr)}.tile{aspect-ratio:1;display:block;width:100%;height:auto;object-fit:cover;padding:0;overflow:hidden;background:none}.tile img{width:100%;height:100%;display:block;object-fit:cover}.about{display:grid;grid-template-columns:204px 1fr;background:#ff583b;color:#f3ead9;height:186px}.about>img{width:100%;height:100%;object-fit:cover}.about>div{padding:18px 23px}h2{margin:0;font-size:20px;font-weight:400}.about p{font-size:12px;line-height:14px;margin:15px 0}.about button{background:none;color:inherit;padding:0;font-size:13px}.about button span{margin-left:15px;font-size:23px}footer{max-width:1024px;margin:43px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:18px;min-height:28px}footer a{white-space:nowrap}.waves{margin-top:7px;height:29px;background:url('assets/waves.png') repeat-x center bottom;background-size:1440px 29px}.side-word{position:absolute;top:136px;writing-mode:vertical-rl;font-size:126px;color:#20bbae;line-height:1;overflow:hidden;height:665px;pointer-events:none}.left{left:-44px;transform:rotate(180deg)}.right{right:-30px}main{overflow:hidden}dialog{border:0;border-radius:12px;background:#f3ead9;color:#555;width:min(440px,90vw);padding:30px}dialog h2{color:#ff583b}dialog::backdrop{background:#0005}.close{position:absolute;top:8px;right:12px;background:none;font-size:25px;color:#ff583b}:focus-visible{outline:3px solid #556636;outline-offset:4px}
@media(min-width:901px) and (max-width:1300px){.header-inner,.layout{max-width:calc(100% - 100px)}.layout{grid-template-columns:37% 59%;gap:4%;grid-template-rows:410px 160px}.logo{width:310px}nav{left:41%}.intro{padding-top:55px}h1{font-size:clamp(32px,3.47vw,50px)}.intro>p{font-size:15px;line-height:19px;margin:22px 0 30px}.slideshow{flex:1;min-height:0}.about{height:160px;grid-template-columns:46% 54%}.about>div{padding:12px}.about p{font-size:11px;line-height:13px;margin:10px 0}.book{font-size:21px}.fields label{padding-left:8px;font-size:11px}footer{max-width:calc(100% - 140px);font-size:14px;margin-top:35px;gap:12px}.side-word{font-size:95px;height:570px}.left{left:-40px}.right{right:-40px}}
@media(max-width:900px){header{height:137px}.header-inner{margin:0 44px}.logo{margin-top:15px;width:364px;height:90px}nav{left:0;bottom:8px}.side-word{display:none}.layout{display:flex;flex-direction:column;gap:0;margin:0 44px}.intro{padding-top:72px}h1{font-size:56px;letter-spacing:-1.5px;line-height:1.16}.intro>p{margin:30px 0 37px;font-size:18px;line-height:24px}#booking{height:79px;border-radius:16px}.fields label{font-size:20px;padding:12px 22px 10px 36px;gap:12px}.fields label:after{top:11px;right:15px}.fields small{font-size:16px}.book{font-size:38px;padding:0 10px}.visual{margin-top:52px}.strip{aspect-ratio:4/1}.slideshow{height:auto;aspect-ratio:1.8}.tiles{grid-template-columns:repeat(3,1fr)}.rooms{order:0}.activityphoto{order:1}.transport{order:2}.roomphoto{order:3}.activities{order:4}.transportphoto{order:5}.rooms img,.transport img{transform:rotate(0deg)}.about{margin-top:37px;height:158px;grid-template-columns:37% 63%}.about>div{padding:20px 32px}.about p{font-size:12px;line-height:14px;margin:16px 0}.about button{font-size:13px}footer{margin:18px 20px 0;display:flex;flex-direction:column;gap:15px;font-size:18px}.waves{margin-top:15px}.slide-control{opacity:1}}
@media(max-width:600px){header{height:112px}.header-inner{margin:0 16px;align-items:flex-start}.logo{width:282px;max-width:calc(100vw - 85px);height:78px;margin-top:15px}.menu-toggle{display:flex;flex-direction:column;gap:8px;width:43px;background:none;padding:0;margin-top:40px}.menu-toggle span{height:3px;width:100%;background:#ff583b}nav{display:none;position:absolute;z-index:5;left:0;right:0;top:101px;bottom:auto;background:#f3ead9;padding:18px;box-shadow:0 6px 10px #0002}nav.open{display:grid;gap:20px;text-align:left}nav button{text-align:left}.layout{margin:0 16px}.intro{padding-top:49px}h1{font-size:clamp(27px,10.7vw,42px);letter-spacing:-1.3px;line-height:1.15}.intro>p{font-size:18px;line-height:21px;letter-spacing:.25px;margin:22px 0 25px}#booking{height:111px;display:flex;flex-direction:column;border-radius:18px}.fields{min-height:56px}.fields label{font-size:14px;padding:9px 12px 4px 26px;gap:7px}.fields label:after{right:12px;top:6px}.fields small{font-size:11px}.fields label+label:before{top:14px;bottom:13px}.book{height:55px;flex:none;font-size:27px;letter-spacing:-.7px}.visual{margin-top:40px}.slideshow{aspect-ratio:1.22}.tiles{grid-template-columns:repeat(2,1fr)}.rooms{order:0}.roomphoto{order:1}.activityphoto{order:2}.activities{order:3}.transport{order:4}.transportphoto{order:5}.about{height:160px;margin-top:36px;grid-template-columns:40% 60%}.about>div{padding:18px 16px}h2{font-size:20px}.about p{font-size:12px;line-height:14px;margin:14px 0 8px}.about button{font-size:13px}.about button span{margin-left:4px}footer{font-size:14px;gap:15px;margin-top:26px}.waves{margin-top:20px;height:35px;background-size:1440px 29px}.dots{bottom:10px}.pause{bottom:5px;right:5px;padding:5px}.prev,.next{font-size:26px;padding:0 8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
main{position:relative}.side-word{white-space:nowrap;width:126px;overflow:hidden}.left{left:-65px}.right{right:-65px}.strip picture{display:block;width:100%;height:100%}.tile{position:relative}
@media(max-width:900px){.tile:is(.rooms,.activities,.transport)::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:24%;background-color:#ff583b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M5 15H50M43 8l7 7-7 7' fill='none' stroke='%23f3ead9' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:60% 90%}.tile.activities::after{background-color:#008081}.tile.transport::after{background-color:#ffb90b}}
@media(min-width:601px) and (max-width:900px){.tile.rooms::after,.tile.transport::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M30 0V25M23 18l7 7 7-7' fill='none' stroke='%23f3ead9' stroke-width='1.5'/%3E%3C/svg%3E")}.tile.activities::after{background-image:none}.tile.activities::before{content:'↑';position:absolute;top:4%;left:40%;width:20%;font-size:40px;color:#f3ead9;line-height:1;z-index:1}}
@media(max-width:600px){.tile.activities::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M55 15H10M17 8l-7 7 7 7' fill='none' stroke='%23f3ead9' stroke-width='1.5'/%3E%3C/svg%3E")}}
.side-word{top:0;height:665px;width:80px;object-fit:fill;transform:none;writing-mode:initial}.side-word.left{left:0}.side-word.right{right:0}
@media(min-width:901px) and (max-width:1300px){.side-word{width:45px;height:570px}}
@media(max-width:900px){.side-word{display:none}}
/* Booking label: consistent reduction across all display sizes. */
.book{font-size:21px}
@media(min-width:901px) and (max-width:1300px){.book{font-size:18px}}
@media(min-width:601px) and (max-width:900px){.book{font-size:32px}}
@media(max-width:600px){.book{font-size:23px}}
/* Equal desktop/laptop spacing, with About and Service Tiles sharing a baseline. */
@media(min-width:901px){
 .layout{--intro-gap:32px}
 .intro{display:flex;flex-direction:column;justify-content:flex-end;padding-top:0;padding-bottom:var(--intro-gap)}
 .intro>p{margin:var(--intro-gap) 0}
 #booking{flex-shrink:0}
}
@media(min-width:901px) and (max-width:1300px){.layout{--intro-gap:27px}}
@media(min-width:901px){.layout{row-gap:0}}
/* Equal spacing and matched About panel heights on tablet/mobile. */
@media(max-width:900px){
 .layout{--section-gap:32px}
 .intro>p{margin:var(--section-gap) 0}
 .visual{margin-top:var(--section-gap)}
 .about{margin-top:var(--section-gap);height:auto;min-height:158px;align-items:stretch}
 .about>img{height:100%;min-height:0;align-self:stretch}
 .about>div{min-width:0;min-height:158px}
}
@media(max-width:600px){
 .layout{--section-gap:28px}
 .about{min-height:160px}
 .about>div{min-height:160px}
}
/* Keep paired About panels within their shared grid row. */
@media(min-width:901px){.about{min-height:0;align-items:stretch}.about>img{min-height:0;height:100%;max-height:100%}.about>div{min-height:0;height:100%;padding:clamp(10px,1.25vw,18px) clamp(12px,1.6vw,23px)}.about p{margin:12px 0}}
@media(min-width:901px) and (max-width:1050px){.about>div{padding:10px 12px}.about h2{font-size:17px}.about p{font-size:10px;line-height:12px;margin:9px 0}.about button{font-size:11px}}
.fields label{white-space:nowrap}
@media(min-width:901px) and (max-width:1050px){.fields label{font-size:10px;padding-left:7px;padding-right:12px}.fields label:after{right:3px}.book{font-size:17px}}
@media(max-width:360px){.fields label{font-size:12px;padding-left:12px;padding-right:12px}.fields label:after{right:5px}.fields small{font-size:10px}.header-inner{gap:12px}.logo{max-width:calc(100vw - 100px)}.menu-toggle{flex-shrink:0;width:35px}}
.about button span{display:inline-block;width:40px;height:14px;vertical-align:middle;font-size:0;background:url('assets/arrow-right.svg') center/contain no-repeat}
@media(max-width:900px){.tile:is(.rooms,.activities,.transport)::after{background-image:url('assets/arrow-right.svg');background-size:45% 70%}.tile.activities::before{display:none}}
@media(min-width:601px) and (max-width:900px){.tile.rooms::after,.tile.transport::after{background-image:url('assets/arrow-down.svg');background-size:20% 85%}.tile.activities::after{background-image:none}.tile.activities::before{content:'';display:block;position:absolute;top:4%;left:42%;width:16%;height:17%;background:url('assets/arrow-up.svg') center/contain no-repeat}}
@media(max-width:600px){.tile.activities::after{background-image:url('assets/arrow-left.svg')}}
@media(max-width:900px){.tile.rooms::after{background-color:#ff5b3c}.tile.activities::after{background-color:#007f81}.tile.transport::after{background-color:#ffb900}}
@media(min-width:601px) and (max-width:900px){
 #booking{height:68px}
 .fields label{font-size:16px;padding:11px 20px 8px 18px;gap:9px}
 .fields small{font-size:12px}
 .fields label:after{right:10px;top:9px}
 .book{font-size:27px;padding:0 12px}
}
.about button span{background-image:url('assets/original-arrow-right.png')}
@media(max-width:900px){.tile:is(.rooms,.activities,.transport)::after{background-image:url('assets/original-arrow-right.png');background-size:42% auto}}
@media(min-width:601px) and (max-width:900px){.tile.rooms::after,.tile.transport::after{background-image:url('assets/original-arrow-down.png');background-size:auto 70%}.tile.activities::after{background-image:none}.tile.activities::before{background-image:url('assets/original-arrow-up.png');background-size:auto 100%}}
@media(max-width:600px){.tile.activities::after{background-image:url('assets/original-arrow-left.png')}}
/* Expanded mobile navigation sits below the header and moves content down. */
@media(max-width:600px){
 header:has(nav.open){height:auto}
 .header-inner:has(nav.open){flex-wrap:wrap;height:auto;min-height:112px;margin:0;padding:0 16px}
 .header-inner:has(nav.open)>.logo{margin-left:0}
 .header-inner:has(nav.open)>a{height:112px}
 nav.open{position:static;display:grid;flex:0 0 calc(100% + 32px);width:calc(100% + 32px);margin:0 -16px;order:3;padding:20px 32px;background:#f3ead9;box-shadow:none;border-top:1px solid #e5dccb;gap:20px;text-align:left}
}
/* Tablet arrows use the original artwork with only the stem shortened. */
@media(min-width:601px) and (max-width:900px){
 .tile.rooms::after,.tile.transport::after{background-image:url('assets/tablet-arrow-down.png');background-size:10% auto}
 .tile.activities::before{top:2%;left:45%;width:10%;height:16.2%;background-image:url('assets/tablet-arrow-up.png');background-size:100% auto}
}

/* Center icon, label and arrow as one group in every service tile. */
.tile:is(.rooms,.activities,.transport){container-type:inline-size}
.tile.rooms{background:#ff5b3c}.tile.activities{background:#007f81}.tile.transport{background:#ffb900}
.tile:is(.rooms,.activities,.transport)::before,.tile:is(.rooms,.activities,.transport)::after{display:none}
.tile-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw}
.tile .tile-art{width:100%;height:auto;object-fit:contain}
.tile .tile-arrow{width:41%;height:auto;object-fit:contain}
@media(min-width:601px) and (max-width:900px){
 .tile .tile-arrow{width:10%;content:url('assets/tablet-arrow-down.png')}
 .tile.activities .tile-arrow{order:-1;content:url('assets/tablet-arrow-up.png')}
}

/* Single-row service tiles all point right. */
@media(min-width:901px){.tile.activities .tile-arrow{content:url('assets/original-arrow-right.png')}}

/* Alternate service photographs fade in on mouse hover. */
.photo-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-tile .hover-photo{opacity:0;transition:opacity .25s ease;pointer-events:none}
@media(hover:hover){.photo-tile:hover .hover-photo{opacity:1}}
@media(prefers-reduced-motion:reduce){.photo-tile .hover-photo{transition:none}}

footer .contact-icon{display:inline-block;height:1em;width:auto;vertical-align:-.12em;margin-right:.4em;object-fit:contain}
footer .location-icon{height:1.15em;vertical-align:-.2em}

#booking-message{text-align:center;color:#ff583b;max-width:360px;padding:28px;border-radius:16px}#booking-message p{font-size:20px;line-height:1.45;margin:0 0 20px}#booking-message button{background:#ff583b;color:#f3ead9;padding:10px 24px;border-radius:8px}

/* Travelers is a visible numeric entry field. */
.fields label:has(input[name="guests"]){gap:2px}
.fields input[name="guests"]{position:static;inset:auto;opacity:1;width:100%;height:16px;min-height:0;border:0;padding:0;background:transparent;color:#ff583b;font-size:12px;cursor:text;outline-offset:1px}
.fields label:has(input[name="guests"])::after{display:none}
.fields label:has(input[name="guests"]) small{display:none}
@media(max-width:900px){.fields input[name="guests"]{height:22px;font-size:16px}}
@media(max-width:600px){.fields input[name="guests"]{height:18px;font-size:13px}}

/* Matching, readable booking values in every layout. */
.fields small,.fields input[name="guests"]{color:#555;font-size:12px;font-family:inherit;font-weight:400}
@media(min-width:601px) and (max-width:900px){.fields small,.fields input[name="guests"]{font-size:14px}}
@media(max-width:600px){.fields small,.fields input[name="guests"]{font-size:13px}}

/* Original placeholder styling; entered guest count is larger and darker. */
.fields small{color:#888;font-size:10px}
.fields input[name="guests"]::placeholder{color:#888;font-size:10px;opacity:1}
.fields label:has(input[name="guests"]){gap:5px}
@media(min-width:601px) and (max-width:900px){
 .fields small,.fields input[name="guests"]::placeholder{font-size:12px}
 .fields label:has(input[name="guests"]){gap:9px}
}
@media(max-width:600px){
 .fields small,.fields input[name="guests"]::placeholder{font-size:11px}
 .fields label:has(input[name="guests"]){gap:7px}
}
@media(max-width:360px){.fields small,.fields input[name="guests"]::placeholder{font-size:10px}}

/* Keep all booking value rows on the same baseline. */
.fields input[name="guests"]{height:12px;line-height:12px}
.fields input[name="guests"]::placeholder{line-height:12px}
.fields small{line-height:12px}
@media(min-width:601px) and (max-width:900px){.fields input[name="guests"],.fields input[name="guests"]::placeholder,.fields small{height:15px;line-height:15px}}
@media(max-width:600px){.fields input[name="guests"],.fields input[name="guests"]::placeholder,.fields small{height:13px;line-height:13px}}

.fields input[name='guests']:placeholder-shown{font-size:10px}
@media(min-width:601px) and (max-width:900px){.fields input[name='guests']:placeholder-shown{font-size:12px}}
@media(max-width:600px){.fields input[name='guests']:placeholder-shown{font-size:11px}}
@media(max-width:360px){.fields input[name='guests']:placeholder-shown{font-size:10px}}

/* Comfortable booking field insets on laptop layouts. */
@media(min-width:901px) and (max-width:1300px){.fields label{padding-left:16px;padding-right:16px}.fields label:after{right:7px}}
@media(min-width:901px) and (max-width:1050px){.fields label{padding-left:12px;padding-right:14px}.fields label:after{right:5px}}

/* A subtle brand-colored focus cue for guest entry. */
.fields input[name='guests']:focus,.fields input[name='guests']:focus-visible{outline:none;box-shadow:none;border-radius:0}

/* Selected dates match the entered Travelers value. */
.fields small.has-value{font-family:inherit;font-size:12px;font-weight:400;color:#555}
@media(min-width:601px) and (max-width:900px){.fields small.has-value{font-size:14px}}
@media(max-width:600px){.fields small.has-value{font-size:13px}}

/* Island calendar: cream surface, coral dates, mint accents. */
#island-calendar{position:fixed;inset:auto;margin:0;width:min(304px,calc(100vw - 16px));padding:16px;border:1px solid #ff583b33;border-radius:16px;background:#f3ead9;color:#ff583b;box-shadow:0 8px 28px #007f8126;font-size:14px}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
.calendar-heading strong{font-size:16px;font-weight:700}
#island-calendar button{background:transparent;color:inherit;border-radius:8px;padding:0;min-height:34px}
.calendar-heading button{width:34px;font-size:26px;background:#8be7d755!important}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.calendar-weekdays{font-size:11px;color:#007f81;margin-bottom:7px}
.calendar-days button{font-size:13px}
#island-calendar button:hover:not(:disabled){background:#8be7d7}
#island-calendar button:disabled{color:#b5ab9b;cursor:default}
#island-calendar .selected{background:#ff583b;color:#f3ead9}
#island-calendar .today:not(.selected){box-shadow:inset 0 0 0 1px #ff583b}
#island-calendar button:focus-visible{outline:2px solid #007f81;outline-offset:1px}
.calendar-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;border-top:1px solid #ff583b33;padding-top:8px;font-size:11px}
.calendar-footer button{padding:0 8px!important;font-size:12px}.calendar-footer span{color:#007f81}

/* Island palette hover for the booking action. */
.book{transition:background-color .22s ease,color .22s ease,box-shadow .22s ease}
@media(hover:hover){.book:hover{background:#007f81;color:#f3ead9;box-shadow:inset 0 0 0 1px #f3ead933}}
.book:focus-visible{background:#007f81;color:#f3ead9;outline:2px solid #007f81;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.book{transition:none}}

/* Header navigation shares the booking hover color. */
nav a,nav button{transition:color .22s ease}
nav a:hover,nav button:hover,nav a:focus-visible,nav button:focus-visible{color:#007f81}
@media(prefers-reduced-motion:reduce){nav a,nav button{transition:none}}

/* Matching teal hover cues for About and contact links. */
.about button,footer a{transition:color .22s ease}
.about button span,footer .contact-icon{transition:filter .22s ease}
.about button:hover,.about button:focus-visible,footer a:hover,footer a:focus-visible{color:#007f81}
.about button:hover span,.about button:focus-visible span,footer a:hover .contact-icon,footer a:focus-visible .contact-icon{filter:brightness(0) saturate(100%) invert(33%) sepia(93%) saturate(1181%) hue-rotate(145deg) brightness(92%) contrast(101%)}
@media(prefers-reduced-motion:reduce){.about button,footer a,.about button span,footer .contact-icon{transition:none}}

/* Explicit traveler arrows stay visible in scaled previews on hover. */
.fields input[name="guests"]{padding-right:17px;appearance:textfield}.fields input[name="guests"]::-webkit-inner-spin-button,.fields input[name="guests"]::-webkit-outer-spin-button{appearance:none;margin:0}.guest-stepper{position:absolute;right:8px;bottom:4px;display:flex;flex-direction:column;opacity:0;transition:opacity .15s}.fields label:hover .guest-stepper,.fields label:focus-within .guest-stepper{opacity:1}.guest-stepper button{width:14px;height:9px;padding:0;background:transparent;display:grid;place-items:center}.guest-stepper button::before{content:"";border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid #555}.guest-stepper button[data-step="-1"]::before{border-bottom:0;border-top:4px solid #555}.guest-stepper button:hover{background:#8be7d7;border-radius:2px}@media(hover:none){.guest-stepper{opacity:1}}

/* Align the stepper center with the Travelers value row. */
.guest-stepper{bottom:5px}.guest-stepper button{height:6px}
@media(min-width:601px) and (max-width:900px){.guest-stepper{bottom:11.5px}}
@media(max-width:600px){.guest-stepper{bottom:4.5px}}

.guest-stepper{bottom:11px}@media(min-width:901px) and (max-width:1300px){.guest-stepper{bottom:12px}}@media(min-width:601px) and (max-width:900px){.guest-stepper{bottom:15.5px}}@media(max-width:600px){.guest-stepper{bottom:10.5px}}

#guest-picker{position:fixed;inset:auto;margin:0;width:min(304px,calc(100vw - 16px));padding:20px;border:1px solid #ff583b44;border-radius:16px;background:#f3ead9;color:#007f81;box-shadow:0 8px 28px #007f8126;overflow:auto;overscroll-behavior:contain}#guest-picker h2{color:#ff583b;font-size:20px;margin:0 0 20px}#guest-picker label{display:grid;grid-template-columns:1fr 76px;gap:4px 10px;align-items:center;margin:16px 0;font-size:16px}#guest-picker label span{grid-column:1;font-size:11px;color:#777}#guest-picker input{grid-column:2;grid-row:span 2;width:76px;height:38px;border:1px solid #007f8155;border-radius:7px;background:white;color:#555;padding:6px 8px;font:16px Roboto,Arial,sans-serif}#guest-picker .guest-done{background:#ff583b;color:#f3ead9;border-radius:8px;width:100%;padding:10px;margin-top:8px;font-size:15px}#guest-picker .guest-done:hover{background:#007f81}.fields input[name="guests"]{cursor:pointer;padding-right:0}

#guest-picker input{grid-row:1 / span 2}#guest-picker input:focus-visible{outline:2px solid #007f81;outline-offset:1px}

#island-calendar{max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}