/* Loggia property microsite — base styles. Per-property colours come from --accent and --band (set in <html style>). */
:root{--ink:#1a2330;--muted:#5b6572;--soft:#4a5563;--line:#ece7e0;--sand:#f7f5f1;--accent:#0e6b70;--band:#13263a;
  --sans:'Manrope',system-ui,sans-serif;--serif:'Fraunces',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.it{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0}
.wrap{width:100%;max-width:1344px;margin:0 auto}
.sec{padding:110px 48px;display:flex;flex-direction:column;align-items:center;gap:44px}
.sec.sand{background:var(--sand)}
.sec.band{background:var(--band);color:#fff}
.head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.kick{font-size:14px;font-weight:600;color:var(--accent)}
.band .kick{color:rgba(255,255,255,.75)}
h2{margin:0;font-size:56px;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.head p{margin:0;max-width:600px;font-size:18px;line-height:1.55;color:var(--muted)}
.band .head p{color:rgba(255,255,255,.82)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer}
.btn.accent{background:var(--accent);color:#fff;font-weight:600}
.btn.sand{background:#f1eee9}

/* preview banner (demo mode) */
.preview{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:var(--ink);color:#fff;font-size:13px;text-align:center}
.preview b{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--accent);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* hero */
.hero{position:relative;height:860px;overflow:hidden;color:#fff;background:#34444f}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%;animation:zoom 14s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:none}}
.hero .scrim{position:absolute;inset:0;background:radial-gradient(ellipse 55% 38% at 50% 44%,rgba(10,22,36,.5),rgba(10,22,36,0) 72%),linear-gradient(180deg,rgba(10,22,36,.45) 0%,rgba(10,22,36,.22) 30%,rgba(10,22,36,.12) 55%,rgba(10,22,36,.08) 80%,#fff 100%)}
.nav{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:min(1000px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px;padding:0 9px 0 26px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(10,22,36,.18);z-index:5}
.nav .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.nav .brand b{font-size:22px;font-weight:600;letter-spacing:-.01em}
.nav .brand small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav nav{display:flex;gap:26px;font-size:15px}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--accent)}
.nav .btn{height:48px;padding:0 22px;font-size:15px}
.hero .copy{position:absolute;top:20%;left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.chipg{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);font-size:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chipg i{width:8px;height:8px;border-radius:50%;background:#fff}
.hero h1{margin:0;max-width:1100px;font-size:clamp(50px,6.2vw,92px);font-weight:500;line-height:1;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(10,22,36,.3)}
.hero p{margin:0;max-width:620px;font-size:20px;line-height:1.5;font-weight:500;text-shadow:0 1px 3px rgba(10,22,36,.55),0 2px 18px rgba(10,22,36,.5)}

/* review cube pill */
.cube{position:relative;display:inline-block;height:44px;perspective:600px;color:#fff;text-decoration:none}
.cube .sizer{visibility:hidden;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;font-size:15px;white-space:nowrap}
.cube .rot{position:absolute;inset:0;transform-style:preserve-3d;animation:cubeturn 12s cubic-bezier(.65,0,.35,1) infinite}
.cube.single .rot{animation:none}
.cube .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border-radius:999px;background:rgba(16,30,44,.42);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px;white-space:nowrap;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube .f0{transform:rotateX(0) translateZ(22px)}.cube .f1{transform:rotateX(-90deg) translateZ(22px)}
.cube .f2{transform:rotateX(-180deg) translateZ(22px)}.cube .f3{transform:rotateX(-270deg) translateZ(22px)}
@keyframes cubeturn{0%,20%{transform:translateZ(-22px) rotateX(0)}25%,45%{transform:translateZ(-22px) rotateX(90deg)}50%,70%{transform:translateZ(-22px) rotateX(180deg)}75%,95%{transform:translateZ(-22px) rotateX(270deg)}100%{transform:translateZ(-22px) rotateX(360deg)}}

/* the house */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:330px 330px;gap:16px}
.mosaic>div{position:relative;border-radius:24px;overflow:hidden;background:#e6e0d6}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s}
.mosaic>div:hover img{transform:scale(1.04)}
.mosaic .a{grid-column:1/span 2;grid-row:2}.mosaic .b{grid-column:3/span 2;grid-row:1/span 2}
.stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:48px}
.stats div{display:flex;flex-direction:column;align-items:center}
.stats b{font-size:38px;font-weight:500;letter-spacing:-.02em}
.stats span{font-size:14px;color:var(--muted)}

/* amenities */
.chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1040px}
.chips li{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);font-size:16px}
.chips svg{color:rgba(255,255,255,.7)}

/* spaces tabs */
.tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:#ebe6df;max-width:100%;overflow-x:auto}
.tabs button{flex-shrink:0;border:0;height:46px;padding:0 22px;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:15px;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 2px 8px rgba(26,35,48,.1)}
.panel{position:relative;max-width:1180px;height:620px;padding:14px;border-radius:32px;background:#fff}
.panel .ins{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#e7e1d8}
.panel .ins img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel .cap{position:absolute;left:20px;bottom:20px;width:420px;max-width:calc(100% - 40px);padding:24px 26px;border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:8px}
.panel .cap b{font-size:20px;font-weight:600}.panel .cap span{font-size:16px;line-height:1.55;color:var(--muted)}

/* location */
.loc{max-width:1180px;padding:16px;border-radius:32px;background:var(--sand);display:flex;flex-direction:column;gap:16px}
.addr{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 24px;border-radius:18px;background:#fff;font-size:17px}
.addr small{margin-left:auto;font-size:13px;color:var(--muted)}
.map{position:relative;height:400px;border-radius:22px;overflow:hidden;background:#dfe7ea}
.mapcanvas{position:absolute;inset:0;width:100%;height:100%;background:#dfe7ea}
.map .leaflet-container{font:inherit}
.map .leaflet-control-zoom{margin-top:16px;margin-right:16px}
.map .leaflet-control-attribution{font-size:10px}
.map .tag{position:absolute;z-index:1000;top:16px;left:16px;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--soft);box-shadow:0 2px 8px rgba(26,35,48,.12)}
.map .open{position:absolute;z-index:1000;right:16px;bottom:16px;height:44px;padding:0 18px;font-size:14px;background:var(--ink);color:#fff}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.route{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:18px;background:#fff}
.route small{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.route b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.route span{font-size:15px;line-height:1.5;color:var(--muted)}

/* rates & booking */
.card{display:flex;flex-direction:column;gap:16px;padding:36px;border-radius:28px;background:#fff}
.card .lbl{font-size:15px;color:var(--muted)}
.card .big{font-size:32px;font-weight:600}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px;color:var(--soft)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #e4dfd8;border-radius:16px;overflow:hidden}
.fields label{display:flex;flex-direction:column;gap:4px;padding:14px 16px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fields label:first-child{border-right:1px solid #e4dfd8}
.fields label:last-child{grid-column:1/span 2;border-top:1px solid #e4dfd8}
.fields input{border:0;padding:0;font:inherit;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;min-width:0}
.status{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border-radius:14px;background:var(--sand);font-size:14px;color:var(--soft)}
.status.ok{background:#e6f2ee;color:#1d5c4a;font-weight:600}
.status.busy{background:#fbeee6;color:#8a3b12;font-weight:600}
.small{font-size:12px;color:var(--muted)}
.btn[aria-disabled=true]{background:#d9d4cc;color:var(--soft);cursor:not-allowed}

/* the listings (multi-unit) */
.units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1180px}
.unit{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.unit .uimg{position:relative;height:220px;background:#e7e1d8;display:block;width:100%;padding:0;border:0;margin:0;font:inherit;color:inherit;overflow:hidden}
button.uimg{cursor:pointer}
.unit .uimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s}
.unit:hover .uimg img{transform:scale(1.04)}
.unit .gcount{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;background:rgba(16,30,44,.62);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
button.uimg:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* clickable mosaic tiles + open-gallery button */
.mosaic .tile{position:absolute;inset:0;border:0;padding:0;margin:0;background:#e6e0d6;cursor:pointer;overflow:hidden}
.mosaic .tilez{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(16,30,44,.55);color:#fff;font-size:16px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mosaic .tile:hover .tilez,.mosaic .tile:focus-visible .tilez{opacity:1;transform:none}
.mosaic .tile:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.galbtn{align-self:center}

/* editorial full-bleed gallery */
.gal{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--band);color:#fff}
.gal[hidden]{display:none}
.gal::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 46px)}
.gal-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 40px;background:linear-gradient(180deg,rgba(8,14,22,.6) 0%,rgba(8,14,22,0) 100%);text-shadow:0 1px 10px rgba(8,14,22,.5)}
.gal-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.gal-eyebrow b{color:#fff;font-weight:600}
.gal-tools{display:flex;gap:10px}
.gal-icon{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.gal-icon:hover{background:rgba(255,255,255,.2)}
.gal-stage{position:absolute;inset:0;z-index:1;margin:0;cursor:pointer}
.gal-stage img{width:100%;height:100%;object-fit:cover;display:block}
.gal-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:60px 40px 32px;background:linear-gradient(0deg,rgba(8,14,22,.72) 0%,rgba(8,14,22,.32) 55%,rgba(8,14,22,0) 100%);text-shadow:0 1px 12px rgba(8,14,22,.55)}
.gal-meta{display:flex;flex-direction:column;gap:8px;max-width:620px}
.gal-kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.gal-cap{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.08;letter-spacing:-.01em}
.gal-ctrl{display:flex;align-items:center;gap:18px}
.gal-dots{display:flex;align-items:center;gap:9px}
.gal-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:transform .2s,background .2s}
.gal-dot[aria-selected=true]{background:var(--accent);transform:scale(1.5)}
.gal-round{width:54px;height:54px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.gal-round:hover{background:rgba(255,255,255,.14)}
.gal-round.accent{background:var(--accent);border-color:var(--accent)}
.gal-round.accent:hover{filter:brightness(1.08)}
.unit .ub{display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px}
.unit .ut{display:flex;flex-direction:column;gap:3px}
.unit .ut b{font-size:21px;font-weight:600;letter-spacing:-.01em}
.unit .ut small{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.unit .ub p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.unit .um{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--soft)}
.unit .um span{display:inline-flex;align-items:center;gap:6px}
.unit .uf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.unit .uprice{font-size:18px;font-weight:600}.unit .uprice small{font-size:13px;font-weight:400;color:var(--muted)}
.btn.mini{height:42px;padding:0 18px;font-size:14px}
.unit .uf .btn.sand{background:var(--accent);color:#fff;font-weight:600;transition:background .15s,color .15s}
.unit .uf .btn.sand:hover,.unit .uf .btn.sand:active{background:#f1eee9;color:var(--ink)}
.unit .ureview{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;text-decoration:none}
.unit .ureview svg{color:var(--ink)}
.unit .ureview b{font-weight:600;color:var(--ink)}
.unit .ureview span{color:var(--muted)}
.unit .ureview:hover b{text-decoration:underline}
.unit .ureview.unew{cursor:default}
.unit .ureview.unew svg,.unit .ureview.unew b{color:var(--accent)}
.unit .ureview.unew:hover b{text-decoration:none}

/* infinite guest-review marquee */
.greviews{width:100%;max-width:1240px;display:flex;flex-direction:column;gap:22px;margin-top:10px}
.grevlbl{margin:0;text-align:center;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.grevlbl a{color:var(--accent)}
.grev-view{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.grev-track{display:flex;gap:22px;width:max-content;animation:grev-scroll 80s linear infinite}
.grev-view:hover .grev-track{animation-play-state:paused}
@keyframes grev-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.grev{flex:0 0 auto;width:250px;display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;transition:opacity .15s}
.grev:hover{opacity:.72}
.grev-stars{display:inline-flex;gap:2px;color:#e0a010}
.grev-stars svg{width:13px;height:13px}
.grev-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft);flex:1}
.grev-src{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.02em;color:var(--muted)}
.grev-name{color:var(--soft);font-weight:600}
.grev-logo{display:inline-flex;color:#ff5a5f}
.grev-logo svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.grev-track{animation:none;width:100%;overflow-x:auto;scroll-snap-type:x mandatory}.grev{scroll-snap-align:start}}

/* booking — dark availability calendar + summary (D-055) */
.book-dark{background:var(--band);color:#fff}
.book-dark .kick{color:rgba(255,255,255,.7)}
.bookgrid{display:grid;grid-template-columns:1fr 360px;gap:28px;max-width:1140px;align-items:start}
.bookmain{display:flex;flex-direction:column;gap:18px;min-width:0}

/* unit picker (dark) */
.picks{display:flex;flex-wrap:wrap;gap:12px}
.pick{flex:1 1 180px;position:relative;border-radius:16px;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pick .pb{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1.5px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.035);transition:border-color .15s,background .15s}
.pick:hover .pb{border-color:rgba(255,255,255,.28)}
.pick input:checked + .pb{border-color:var(--accent);background:rgba(14,107,112,.2)}
.pick input:focus-visible + .pb{outline:2px solid var(--accent);outline-offset:2px}
.pick .picon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}
.pick input:checked + .pb .picon{background:rgba(14,107,112,.32);color:#bfe6de}
.pick .picon svg{width:22px;height:22px}
.pick .ptext{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick .ptext b{font-size:15px;font-weight:600}
.pick .ptext small{font-size:12.5px;color:rgba(255,255,255,.6)}
.pick .pav{display:none}
.reco{margin:0;font-size:14px;color:rgba(255,255,255,.72)}
.reco .recolink{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.reco .recolink:hover{color:#bfe6de}

/* calendar */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.callegend{display:flex;align-items:center;gap:18px;font-size:13px;color:rgba(255,255,255,.72)}
.callegend .lg{display:inline-flex;align-items:center;gap:7px}
.callegend .lg::before{content:"";width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.85)}
.callegend .lg-bk::before{background:transparent;border:1.5px solid rgba(255,255,255,.4)}
.callegend .lg-you::before{background:var(--accent)}
.calnavs{display:flex;gap:8px;flex-shrink:0}
.gstep{display:flex;align-items:center;gap:12px}
.gbtn{width:44px;height:44px;border:1px solid #5A6577;border-radius:50%;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .12s ease}
.gbtn:hover{background:rgba(255,255,255,.07);border-color:#8A93A3}
.gbtn:active{transform:scale(.92);background:rgba(255,255,255,.12)}
.gbtn:disabled{opacity:.32;cursor:not-allowed;transform:none;background:transparent;border-color:#5A6577}
.gstep input{width:42px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:18px;font-weight:600;text-align:center;-moz-appearance:textfield}
.gstep input::-webkit-outer-spin-button,.gstep input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calnav{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.calnav:disabled{opacity:.3;cursor:default}
.calnav:not(:disabled):hover{background:rgba(255,255,255,.1)}
.cal{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cmonth{display:flex;flex-direction:column;gap:10px}
.ctitle{font-family:var(--serif);font-style:italic;font-size:22px}
.cdow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cdow span{text-align:center;font-size:11px;color:rgba(255,255,255,.4)}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cx{aspect-ratio:1}
.cday{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;aspect-ratio:1;border:0;border-radius:11px;background:transparent;color:#fff;font:inherit;cursor:pointer;transition:background .12s}
.cday b{font-size:14px;font-weight:500}
.cday small{font-size:10px;color:rgba(255,255,255,.45)}
.cday:hover:not(:disabled){background:rgba(255,255,255,.1)}
.cday.past,.cday.busy{color:rgba(255,255,255,.26);cursor:default}
.cday.past small,.cday.busy small{display:none}
.cday.busy b{text-decoration:line-through}
.cday.d-range{background:rgba(14,107,112,.32);border-radius:0}
.cday.d-start,.cday.d-end{background:#f3ead9;color:#13263a;border-radius:11px}
.cday.d-start b,.cday.d-end b{color:#13263a}
.cday.d-start small,.cday.d-end small{color:rgba(19,38,58,.6)}
.cday.d-start{border-top-right-radius:0;border-bottom-right-radius:0}
.cday.d-end{border-top-left-radius:0;border-bottom-left-radius:0}
.cday.d-start.d-end{border-radius:11px}
.calnote{margin:0;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.5)}

/* season rates panel */
.ratespanel{width:100%;max-width:1140px;margin:30px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.rp-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rp-lbl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.rp-note{font-size:12px;color:rgba(255,255,255,.45)}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rp-unit{display:flex;flex-direction:column;padding:20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.rp-u-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rp-ico{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;color:var(--accent)}
.rp-ico svg{width:20px;height:20px}
.rp-u-head b{font-size:16px;font-weight:600}
.rp-tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rp-tiers li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}
.rp-tiers li:first-child{border-top:0}
.rp-s{display:flex;flex-direction:column;gap:2px}
.rp-s em{font-style:normal;font-size:14px;font-weight:500;color:rgba(255,255,255,.92)}
.rp-s small{font-size:12px;color:rgba(255,255,255,.5)}
.rp-tiers li b{font-size:16px;font-weight:600;white-space:nowrap}
.rp-from{margin:0;font-size:16px;font-weight:600}
.rp-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.55)}

/* summary card */
.staycard{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)}
.staylbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.staylbl .sdot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.stayfor{color:rgba(255,255,255,.88)}
.staydates{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden}
.sdcell{display:flex;flex-direction:column;gap:5px;padding:13px 16px}
.sdcell + .sdcell{border-left:1px solid rgba(255,255,255,.18)}
.sdlbl{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sdcell b{font-size:16px;font-weight:600}
.stayguestrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px}
.sgmeta{display:flex;flex-direction:column;gap:2px}
.sgmeta b{font-size:15px;font-weight:600}
.sgmeta small{font-size:12px;color:rgba(255,255,255,.55)}
.staylines{display:flex;flex-direction:column;gap:11px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.sline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;color:rgba(255,255,255,.82)}
.sline b{font-weight:600;color:#fff;white-space:nowrap}
.sline.sfee b{color:var(--accent)}
.swarn{font-size:12.5px;color:#e9a97e;margin-top:2px}
.staytotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.staytotal span{font-size:16px;color:rgba(255,255,255,.72)}
.staytotal b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:38px;line-height:1;letter-spacing:-.01em}
/* booking-card primary action (ported design) */
.payacts{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.reserve{position:relative;width:100%;height:60px;border:0;border-radius:16px;background:#EFE8DC;color:#16202E;font:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,0,.25);transition:background .18s ease,transform .14s ease,box-shadow .18s ease,color .18s ease}
.reserve .bkstate{display:none;align-items:center;gap:12px}
.reserve[data-status="idle"] .bkstate[data-state="idle"],.reserve[data-status="loading"] .bkstate[data-state="loading"],.reserve[data-status="sent"] .bkstate[data-state="sent"]{display:flex}
.reserve .bk-wa{width:28px;height:28px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center}
.reserve .bk-wa img{width:17px;height:17px}
.reserve .bk-arrow{opacity:0;transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease}
.reserve:hover{background:#F8F3EA;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -8px rgba(0,0,0,.55)}
.reserve:hover .bk-arrow{opacity:1;transform:none}
.reserve:active{background:#E1D8C8;transform:translateY(0) scale(.985);box-shadow:0 1px 2px rgba(0,0,0,.35) inset}
.reserve:focus-visible{outline:2px solid #7FC1B8;outline-offset:3px}
.reserve.is-loading{pointer-events:none;background:#E1D8C8;transform:none}
.reserve.is-sent{pointer-events:none;background:#3E7F78;color:#fff;transform:none}
@keyframes bkspin{to{transform:rotate(360deg)}}
.bk-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(22,32,46,.22);border-top-color:#16202E;animation:bkspin .7s linear infinite}
.paydirect-wrap{position:relative}
.paydirect{width:100%;height:56px;border-radius:16px;border:1px dashed #5A6577;background:transparent;color:#B4BCC8;font:inherit;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:not-allowed;transition:border-color .18s ease,background .18s ease}
.paydirect:hover{border-color:#7A8496;background:rgba(255,255,255,.025)}
.paydirect:focus-visible{outline:2px solid #7FC1B8;outline-offset:3px}
.paydirect .soon{font-size:11px;font-weight:700;letter-spacing:.12em;color:#8FD0C6;border:1px solid #3E7F78;border-radius:999px;padding:3px 9px;background:transparent}
.bk-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;background:#0F1723;color:#E9ECF1;font-size:13px;font-weight:500;padding:8px 12px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:opacity .16s ease,transform .16s ease}
.bk-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#0F1723}
.paydirect-wrap:hover .bk-tip,.paydirect-wrap:focus-within .bk-tip{opacity:1;transform:translate(-50%,0)}
.bk-terms-wrap{display:flex;flex-direction:column;gap:8px}
.bk-nudge{font-size:13px;color:#F0B37A;padding-left:28px}
.bk-nudge[hidden]{display:none}
@keyframes bkshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.termsok.is-nudge{animation:bkshake .32s ease}
.termsok.is-nudge .tochk{border-color:#F0B37A}
@media (prefers-reduced-motion:reduce){.reserve,.bk-arrow,.bk-spinner,.termsok.is-nudge,.bk-tip{transition:none;animation:none}}
.stayfoot{margin:0;font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;text-align:center}
.termsok{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(255,255,255,.72);cursor:pointer;line-height:1.45}
.termsok input{position:absolute;opacity:0;width:0;height:0}
.termsok .tochk{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border:1.5px solid rgba(255,255,255,.4);border-radius:5px;transition:background .12s,border-color .12s}
.termsok input:checked + .tochk{background:var(--accent);border-color:var(--accent)}
.termsok input:checked + .tochk::after{content:"";display:block;width:5px;height:9px;margin:2px auto;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.termsok input:focus-visible + .tochk{outline:2px solid var(--accent);outline-offset:2px}
.termslink{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}
body.noscroll{overflow:hidden}
.termsmodal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.termsmodal[hidden]{display:none}
.tm-back{position:absolute;inset:0;background:rgba(6,14,24,.72)}
.tm-card{position:relative;max-width:560px;width:100%;max-height:85vh;overflow:auto;background:#152a3f;border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:30px 30px 28px}
.tm-x{position:absolute;top:14px;right:18px;border:0;background:transparent;color:rgba(255,255,255,.6);font-size:26px;line-height:1;cursor:pointer}
.tm-kick{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tm-card h3{font-family:var(--serif);font-size:26px;margin:6px 0 10px;color:#fff}
.tm-intro{font-size:14px;color:rgba(255,255,255,.7);margin:0 0 18px;line-height:1.55}
.tm-body{display:flex;flex-direction:column;gap:16px}
.tm-sec h4{font-size:14px;font-weight:600;margin:0 0 4px;color:#fff}
.tm-sec p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.75);margin:0}
.tm-foot{margin-top:24px}

/* contact */
.ccard{display:flex;flex-direction:column;gap:8px;padding:30px;border-radius:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.ccard b{font-size:20px;font-weight:600}.ccard span{font-size:15px;color:rgba(255,255,255,.78)}.ccard strong{font-size:18px;margin-top:8px}

/* faq */
.faq{max-width:900px;display:flex;flex-direction:column;gap:14px}
.faq details{border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden}
.faq summary{display:flex;align-items:center;min-height:72px;padding:12px 28px;font-size:18px;cursor:pointer}
.faq p{margin:0;padding:0 28px 24px;font-size:16px;line-height:1.6;color:var(--muted)}

/* closing */
.cta{position:relative;height:700px;overflow:hidden;color:#fff;background:#3d4f5b}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta .scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--sand) 0%,rgba(10,22,36,.25) 28%,rgba(10,22,36,.4) 100%)}
.cta .copy{position:absolute;top:36%;left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.cta h2{font-family:var(--serif);font-style:italic;font-size:96px;line-height:1;text-shadow:0 4px 30px rgba(10,22,36,.3)}
.cta p{margin:0;max-width:520px;font-size:19px;line-height:1.5;text-shadow:0 2px 16px rgba(10,22,36,.4)}
footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:30px 48px 48px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

/* floating WhatsApp */
.fab{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:12px}
.fab span{padding:10px 16px;border-radius:999px;background:#fff;font-size:14px;font-weight:500;box-shadow:0 10px 28px rgba(10,22,36,.18);white-space:nowrap}
.fab a{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 14px 32px rgba(10,22,36,.28)}
.fab img{width:36px;height:36px}

@media (max-width:760px){
  .sec{padding:72px 16px;gap:28px}
  h2{font-size:36px}
  .hero h1,.cta h2{font-size:50px}
  .hero p{font-size:17px}
  .hero .copy{top:15%;gap:16px}
  .nav{height:60px;padding:0 8px 0 18px;top:16px}
  .nav nav,.nav .brand small,.fab span{display:none}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:240px 160px 160px;gap:10px}
  .mosaic .b{grid-column:1/span 2;grid-row:1}.mosaic .a{grid-column:1/span 2;grid-row:3}
  .cols2,.cols3,.units{grid-template-columns:minmax(0,1fr)}
  .unit .uimg{height:200px}
  .grev{width:72vw;max-width:260px}
  .bookgrid{grid-template-columns:minmax(0,1fr)}
  .cal{grid-template-columns:minmax(0,1fr);gap:22px}
  .staycard{position:static}
  .cday b{font-size:13px}.cday small{font-size:9px}
  .gal-top{padding:14px 16px 36px}
  .gal-foot{padding:48px 16px 20px;gap:14px}
  .gal-round{width:46px;height:46px;font-size:22px}
  .gal-ctrl{gap:12px}
  .stats{gap:24px}
  .panel{height:auto;padding:10px}
  .panel .ins{height:auto}
  .panel .ins img{position:relative;height:280px}
  .panel .cap{position:static;width:auto;max-width:none}
  .map{height:260px}
  .card{padding:24px}
  .fab{right:16px;bottom:16px}
  footer{padding:24px 16px 96px}
}
/* ============================================================
   Mobile booking-flow restyle — olive / cream / tan editorial cues
   from the Monte d'Elhorga mockup (2026-11-04). Styling cues only:
   same single-scroll structure + WhatsApp booking. Mobile (<=760px)
   only; desktop and the build output are untouched. Reversible: this
   whole block + the two .m-only elements in build.mjs can be removed.
   ============================================================ */
.m-only{display:none}
@media (max-width:760px){
  /* palette shift: teal accent -> warm tan, navy band -> olive, warm base */
  body{--accent:#cf9a52;--band:#2b2f21;--sand:#f3efe4;background:#f3efe4;padding-bottom:88px}
  .sec.band,.book-dark{color:#f3ead9}
  .sec.band .head p,.book-dark .head p{color:rgba(243,234,217,.82)}
  .sec.band .chips li{background:rgba(243,234,217,.06);border-color:rgba(243,234,217,.18)}

  /* hero — olive wash, serif cream wordmark, round tan nav button */
  .hero .scrim{background:linear-gradient(180deg,rgba(33,36,24,.52) 0%,rgba(33,36,24,.26) 42%,rgba(33,36,24,.46) 72%,#2b2f21 100%)}
  .nav{background:transparent;box-shadow:none;padding:0 4px;top:14px;width:calc(100% - 26px)}
  .nav .brand b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;color:#f3ead9;text-shadow:0 1px 10px rgba(0,0,0,.45)}
  .nav .btn.accent{width:48px;height:48px;padding:0;border-radius:50%;font-size:0;color:transparent}
  .nav .btn.accent::before{content:"\2630";font-size:18px;color:#2b2f21}
  .hero{height:100svh;min-height:600px}
  .hero h1{font-size:46px}
  .hero .copy{top:auto;bottom:182px;align-items:flex-start;text-align:left;gap:14px}
  .chipg{background:rgba(207,154,82,.24);border-color:rgba(207,154,82,.55);color:#f3ead9}

  /* booking (screens 2 & 3) — left-aligned serif heading, tan calendar */
  .book-dark .head{align-items:flex-start;text-align:left}
  .ctitle{color:#f3ead9}
  .cday.d-start,.cday.d-end{background:var(--accent);color:#2b2f21}
  .cday.d-start small,.cday.d-end small{color:#2b2f21}
  .staycard{background:rgba(243,234,217,.06);border-color:rgba(243,234,217,.18)}

  /* payment placeholder (screen 3) — non-functional visual mock */
  .paymock{display:flex;flex-direction:column;gap:12px;margin-top:4px}
  .payfields{display:flex;flex-direction:column;gap:10px}
  .payfields input{height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(243,234,217,.22);background:rgba(243,234,217,.05);color:#f3ead9;font:inherit;font-size:15px}
  .payfields input::placeholder{color:rgba(243,234,217,.5)}
  .payseg{display:flex;padding:5px;border-radius:999px;background:rgba(243,234,217,.08);border:1px solid rgba(243,234,217,.16)}
  .pseg{flex:1;display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:999px;font-size:15px;font-weight:600;color:#f3ead9}
  .pseg.on{background:#f3ecdc;color:#2b2f21}
  .paybox{min-height:116px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(243,234,217,.34);border-radius:16px;color:rgba(243,234,217,.5);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
  .paynote{margin:0;font-size:12px;color:rgba(243,234,217,.52);line-height:1.5}

  /* sticky bottom book bar (screen 1 cue) */
  .mbook{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:45;align-items:center;justify-content:space-between;gap:12px;height:66px;padding:0 8px 0 24px;border-radius:999px;background:#f3ecdc;color:#2b2f21;box-shadow:0 14px 34px rgba(0,0,0,.32);text-decoration:none;font-size:15px}
  .mbook b{font-size:19px;font-weight:600}
  .mbook .mbook-go{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;background:var(--accent);color:#2b2f21;font-weight:600;font-size:16px}
  .mbook-go.off{opacity:.4;pointer-events:none}
  .fab{display:none}

  /* stepped flow: progress bar, panels, back control */
  .bsteps{display:flex;gap:6px;width:100%;max-width:520px;margin:-10px auto 2px}
  .bsteps i{flex:1;height:3px;border-radius:2px;background:rgba(243,234,217,.22)}
  .bsteps i.on{background:var(--accent)}
  .book-dark[data-mstep="1"] .staycard{display:none}
  .book-dark[data-mstep="2"] .bookmain,.book-dark[data-mstep="2"] .head{display:none}
  .staycard .reserve{display:none}            /* the sticky bar handles Reserve on mobile */
  .stepback{display:inline-block;align-self:flex-start;border:0;background:transparent;color:var(--accent);font:inherit;font-size:14px;font-weight:600;padding:0 0 4px;cursor:pointer}
  .calhead{justify-content:space-between}
  .callegend{gap:12px;font-size:12px;flex-wrap:wrap}
  .gbtn{border-color:rgba(243,234,217,.3)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}