/* Fonts are self-hosted (hotels-006): no request to Google, no third-party CSS on the critical path.
   Latin subset covers English and Spanish (á é í ó ú ñ ü ¿ ¡). Files never change in place — a new
   version gets a new file name. font-display: swap → text shows at once in the fallback font. */
@font-face{font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Hotel sites — mobile-first. Tokens first, then layout from small to large. */
:root{
  --sea:#0d5c70; --sea-deep:#093f4d; --sea-soft:#e3f1f4;
  --sand:#f7f1e7; --sand-2:#efe5d4; --coral:#f2603f; --coral-deep:#d94a2a;
  --ink:#13242c; --muted:#56666e; --line:#e4ddd1; --white:#fff;
  --radius:18px; --radius-sm:12px;
  --shadow:0 18px 40px -18px rgba(9,63,77,.35), 0 2px 6px rgba(9,63,77,.08);
  --head:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap:1120px; --bar-h:64px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; font:16px/1.6 var(--body); color:var(--ink); background:var(--sand); padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
img{max-width:100%; height:auto; display:block}
a{color:var(--sea)}
h1,h2,h3{font-family:var(--head); font-weight:700; line-height:1.05; margin:0; letter-spacing:.2px}
h2{font-size:34px; color:var(--sea-deep)}
h3{font-size:22px}
p{margin:0 0 12px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
.eyebrow{font:600 12px/1 var(--body); text-transform:uppercase; letter-spacing:1.6px; color:var(--coral)}
.section{padding:56px 0}
.section-head{margin-bottom:22px}
.section-head p{color:var(--muted); margin-top:10px}
:focus-visible{outline:3px solid var(--coral); outline-offset:2px}
.skip{position:absolute; left:-999px}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:8px 12px; border-radius:8px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 22px; border-radius:999px; font:600 16px/1 var(--body); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease}
.btn:active{transform:scale(.98)}
.btn svg{width:20px; height:20px; flex:none}
.btn-primary{background:var(--coral); color:#fff}
.btn-primary:hover{background:var(--coral-deep)}
.btn-sea{background:var(--sea); color:#fff}
.btn-sea:hover{background:var(--sea-deep)}
.btn-ghost{background:#fff; color:var(--sea-deep); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--sea)}
.btn-block{width:100%}

/* Header */
.site-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.site-header > .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{text-decoration:none; color:var(--sea-deep); line-height:1}
.brand b{display:block; font:700 24px/1 var(--head); letter-spacing:.3px}
.brand span{font:600 10.5px/1 var(--body); text-transform:uppercase; letter-spacing:1.8px; color:var(--coral)}
.head-actions{display:flex; align-items:center; gap:10px}
.lang{font:600 13px/1 var(--body); color:var(--sea-deep); text-decoration:none; padding:8px 10px; border:1.5px solid var(--line); border-radius:999px}
.head-contact{display:none; position:relative}
.field input::placeholder{color:#a3adb2; opacity:1}   /* grey examples in empty fields (hotels-037) */
/* "Book" is back in the header on phones too (owner 25.09, hotels-019); the bottom bar carries "Request a call" instead. */
.head-book{min-height:40px; padding:0 16px; font-size:14px}
@media (max-width:399px){
  .head-actions{gap:6px}
  .brand b{font-size:clamp(17px, 5.6vw, 22px)}
  .brand span{font-size:9px; letter-spacing:1.4px}
  .lang{padding:7px 8px; font-size:12.5px}
  .head-book{min-height:38px; padding:0 11px; font-size:13.5px}
}

/* Hero */
.hero{position:relative; color:#fff; min-height:64svh; display:flex; align-items:center; overflow:hidden; background:var(--sea-deep)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos-m, center)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,40,50,.10) 0%, rgba(9,40,50,.28) 35%, rgba(9,40,50,.34) 65%, rgba(6,32,40,.75) 100%)}
.hero .wrap{position:relative; z-index:1; width:100%; padding-top:28px; padding-bottom:82px}  /* centred in the photo above the booking card (card overlaps 64px) */
.hero .eyebrow{color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero h1{font-size:44px; margin:0 0 12px; text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero h1 .eyebrow{display:block; margin-bottom:10px; text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero p{font-size:clamp(13.5px, 4.3vw, 17px); line-height:1.95; max-width:560px; text-wrap:balance}
/* Subtitle as a highlighter-marker stripe (owner 25.09): each line gets its own sea-deep band. */
.hero .lead span{background:rgba(9,63,77,.88); padding:4px 9px; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
/* Chips: phone/tablet — two rows of three, each chip one line (owner 25.09); the ::after line break keeps 3+3 at any width. */
.chips{display:flex; flex-wrap:wrap; column-gap:6px; margin-top:16px; padding:0; list-style:none; max-width:560px}
.chips::after{content:""; flex-basis:100%; height:0; order:1}
.chips li{flex:1 1 auto; display:flex; align-items:center; justify-content:center; white-space:nowrap; min-height:36px; font:600 clamp(10px, 3.15vw, 13px)/1.2 var(--body); padding:0 clamp(5px, 1.6vw, 12px); border-radius:12px; background:rgba(9,63,77,.58); color:#fff; border:1px solid rgba(255,255,255,.5); text-shadow:0 1px 3px rgba(0,0,0,.6)}
.chips li:nth-child(n+4){order:2; margin-top:6px}
/* Top row (owner 25.09): two key chips in place of the subtitle, always one row. */
.chips-top{margin-bottom:0}
.chips-top::after{display:none}
.chips-top + .chips{margin-top:6px}

/* Booking card — the most visible block on the page */
.book{position:relative; z-index:5; margin-top:-64px}
.book-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 18px; border-top:6px solid var(--coral)}
.book-card h2{font-size:30px}
.book-sub{color:var(--ink); font-size:15px; line-height:1.45; margin:10px 0 14px}   /* hotels-043: the card rhythm — 10 under the title (as .section-head p), 14 above the cards (the form gap) */
/* hotels-040 (owner 27.09): on phones and tablets the line breaks once (br-m) and never a second time — each half stays one
   line, the font follows the width (15 px from ~440 px). Desktop: one line, 15 px. */
@media (max-width:999px){ .book-sub{font-size:clamp(10px, calc(3.9vw - 2.2px), 15px); white-space:nowrap} }
@media (min-width:1000px){ .book-sub .br-m{display:none} }
@media (min-width:1000px){ .book-card h2 .br-m{display:none} }   /* hotels-048: one line on desktop, two on phones */
/* hotels-039 (owner 27.09): note under the rate cards; a prominent "see it first" line after the consent note. */
.book-after{color:var(--muted); font-size:12px; line-height:1.5; margin:0}   /* hotels-042: the same style as the consent notes; hotels-043: no own margin — the form grid gap (14 px) is the spacing, as everywhere in the card */
.book-tour-cta{margin:14px 0 0; font:700 17px/1.3 var(--body)}
@media (max-width:999px){ .book-tour-cta{margin-top:0; font-size:clamp(13.5px, 4.5vw, 17px); white-space:nowrap} }   /* hotels-040: two lines exactly (br-m), no third */
@media (min-width:1000px){ .book-tour-cta .br-m{display:none} }
.book-tour-cta a{color:var(--sea-deep); text-decoration:underline; text-underline-offset:3px}
.book-tour-cta a:hover{color:var(--coral)}
.rates{display:grid; gap:10px; margin:0 0 14px; padding:0; list-style:none}
/* hotels-023 (owner 25.09): --px — side padding, the BEST VALUE badge starts exactly on it (the ink of the digit «4» has
   no side bearing in Barlow Condensed); --pf — price size, the Choose button is exactly as tall as the «$» ink (0.875 em). */
/* hotels-040: the card is a grid — [term + price | Choose] and the fee line on its own full-width row, one line (owner 27.09). */
/* hotels-042 (owner 27.09): symmetric card — three rows: term | price + Choose | regular price + fee line. The outer rows
   share the same height (1fr 1fr) with their content centred, so the price and the button sit on the card's horizontal axis. */
.rate{--px:clamp(16px, calc(14vw - 26px), 34px); --pf:clamp(40px, 12.8vw, 52px); --pw:clamp(112px, 30vw, 128px); position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:1fr auto 1fr; grid-template-areas:"term term" "price pick" "sub sub"; align-items:center; column-gap:12px; row-gap:9px; padding:13.5px var(--px) 18.5px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--sand)}   /* hotels-045: the block sits so that the gap above the term digits = the gap below the fee line (measured, ink to border) */
.rate.best{border-color:var(--sea); background:var(--sea-soft)}
/* hotels-043: text blocks are trimmed to their ink (negative margins from the font metrics — Barlow Condensed: ascent 1em,
   descent .2em, cap .69em, "$" from -.77em to +.08em; Inter: ascent .97em, descent .24em, cap .73em), so the gaps between
   the rows are real visible gaps and the Choose button is exactly as tall as the "$" (tails included). */
.rate-term{grid-area:term; align-self:center; display:block; font:700 clamp(24px, 7.7vw, 30px)/1.2 var(--head); color:var(--sea-deep); white-space:nowrap; margin:-.31em 0 -.2em}
.rate-price{grid-area:price; line-height:1.2}
.rate-price b{display:block; font:700 var(--pf)/1.2 var(--head); color:var(--ink); margin:-.23em 0 -.12em}   /* box = the "$" ink, .85em */
.rate-sub{grid-area:sub; align-self:center; line-height:1.2}
.rate-sub s{display:block; font-size:clamp(14px, 4vw, 16px); color:var(--muted); margin-top:-.24em}
.badge{position:absolute; top:-11px; right:var(--px); width:var(--pw); box-sizing:border-box; text-align:center;   /* hotels-044: exactly the width of Choose, both edges flush */ font:700 12px/1 var(--body); text-transform:uppercase; letter-spacing:1px; background:var(--sea); color:#fff; padding:5px 8px; border-radius:6px}
.rate-note{font-size:13px; color:var(--muted); margin:0 0 16px}
.booking-slot:empty{display:none}
.booking-slot{margin:0 0 14px}
.book-actions{display:grid; gap:10px}
.book-hours{font-size:13px; color:var(--muted); margin:12px 0 0; text-align:center}

/* Forms (booking — floor 3, tour — floor 4) */
.form{display:grid; gap:14px}
/* Stay form fields: collapsed until a stay is chosen (owner 25.09), then slide open. Without JS they stay visible. */
.stay-fields-in{display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; min-height:0}
.js .stay-fields{display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; margin-top:-14px;
  transition:grid-template-rows .4s ease, opacity .3s ease, margin-top .4s ease, visibility 0s linear .4s}
.js .stay-fields > .stay-fields-in{overflow:hidden}
.js .stay-fields.open{grid-template-rows:1fr; opacity:1; visibility:visible; margin-top:0;
  transition:grid-template-rows .4s ease, opacity .3s ease .1s, margin-top .4s ease, visibility 0s}
.js .stay-fields.open > .stay-fields-in{overflow:visible}
.rate{cursor:pointer}
.rate input{position:absolute; opacity:0; pointer-events:none}
.rate:has(input:checked){border-color:var(--coral); box-shadow:0 0 0 2px var(--coral) inset; background:#fff}
.rate:has(input:focus-visible){outline:3px solid var(--coral); outline-offset:2px}
.rates{display:grid; gap:10px; margin:0}
/* Stay card (owner 25.09): term + price + admin fee on the left, "Choose" button on the right —
   outline when free, coral "✓ Selected" on the chosen card. */
.rate-fee{display:block; font-size:clamp(13px, 4vw, 16px); color:var(--muted); margin:0 0 -.24em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}   /* one line (hotels-040) */
.rate-pick{grid-area:pick; flex:none; display:inline-flex; align-items:center; justify-content:center; height:calc(var(--pf) * .85); box-sizing:border-box; width:var(--pw); padding:0 clamp(10px, 3.4vw, 16px); border-radius:999px; border:1.5px solid var(--sea); color:var(--sea); background:#fff; font:700 clamp(15px, 4.3vw, 17px)/1 var(--body)}
.rate-pick .pick-on{display:none}
.rate:has(input:checked) .rate-pick{background:var(--coral); border-color:var(--coral); color:#fff}
.rate:has(input:checked) .pick-off{display:none}
.rate:has(input:checked) .pick-on{display:inline}
.rate:hover .rate-pick{border-color:var(--coral)}
.field{display:grid; gap:6px; font:600 13px/1.2 var(--body); color:var(--sea-deep)}
.field input, .field select{width:100%; min-height:50px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font:500 16px/1.2 var(--body); color:var(--ink); -webkit-appearance:none; appearance:none}
.field select{background-image:linear-gradient(45deg, transparent 50%, var(--sea) 50%), linear-gradient(135deg, var(--sea) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:36px}
.field input:focus, .field select:focus{border-color:var(--sea); outline:none; box-shadow:0 0 0 3px var(--sea-soft)}
.grid-stay{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-stay .field-wide{grid-column:1 / -1}
.grid-contact{display:grid; gap:12px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin:0; min-height:0; color:#b3261e; font-weight:600; font-size:14px}
.form-msg:empty{display:none}
.consent{margin:0; font-size:12px; line-height:1.5; color:var(--muted)}
.consent a{color:var(--sea)}
.form-done{background:var(--sea-soft); border:1.5px solid var(--sea); border-radius:var(--radius-sm); padding:18px}
.form-done h3{color:var(--sea-deep); margin-bottom:6px}
.form-done p{margin:0}
.tour-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.step{border:0; margin:0; padding:0; min-width:0}
.step legend{font:700 20px/1.2 var(--head); color:var(--sea-deep); margin-bottom:10px; padding:0}
.days{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.times{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.chip{min-height:46px; border-radius:12px; border:1.5px solid var(--line); background:var(--sand); font:600 15px/1.1 var(--body); color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--sea); border-color:var(--sea); color:#fff}
.chip.day{flex:0 0 76px; scroll-snap-align:start; display:grid; place-items:center; gap:2px; padding:8px 4px; min-height:64px}
.chip.day small{font:600 12px/1 var(--body); text-transform:uppercase; letter-spacing:.8px; opacity:.8}
.chip.day b{font:700 18px/1 var(--head)}
.slots-loading, .slots-fallback{margin:0; color:var(--muted)}
.tour .form-done{margin-top:0}

/* Benefits */
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0; margin:0; list-style:none}
.benefit{background:#fff; border-radius:var(--radius-sm); padding:16px 14px; border:1px solid var(--line)}
.benefit svg{width:28px; height:28px; color:var(--coral); margin-bottom:8px}
.benefit b{display:block; font:700 19px/1.1 var(--head); color:var(--sea-deep); margin-bottom:4px}
.benefit span{font-size:14px; color:var(--muted); line-height:1.45}

/* Gallery */
.feature-list{padding:0; margin:18px 0 0; list-style:none; display:grid; gap:10px}
.feature-list li{display:flex; gap:10px; align-items:flex-start}
.feature-list svg{width:22px; height:22px; color:var(--sea); flex:none; margin-top:2px}

/* Lightbox */
dialog.lightbox{border:0; padding:0; background:transparent; max-width:96vw; max-height:92vh; overflow:visible}
dialog.lightbox::backdrop{background:rgba(6,20,26,.9)}
dialog.lightbox img{display:block; max-width:96vw; max-height:88vh; border-radius:10px; user-select:none; -webkit-user-select:none}
.lb-x{position:fixed; top:14px; right:14px; z-index:2; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:var(--sea-deep); font-size:24px; line-height:1; cursor:pointer}
.lb-arrow{position:fixed; top:50%; z-index:2; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--sea-deep); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.lb-arrow svg{width:26px; height:26px}
.lb-prev{left:14px} .lb-next{right:14px}
.lb-arrow:disabled{opacity:.35; cursor:default}

/* Amenities */
.band{background:#fff}

/* Good to know */
.faq{display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 16px}
.faq summary{list-style:none; cursor:pointer; padding:13.5px 28px 18.5px 0; font:700 20px/1.2 var(--head); color:var(--sea-deep); position:relative}   /* hotels-047: the text ink sits on the tile axis (Barlow's ink is low in its box) */
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:13px; font:400 26px/1 var(--body); color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted); padding-bottom:6px}
.faq details p a{color:var(--sea-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px}   /* hotels-047: "Tours section" → #tour */
/* FAQ page (hotels-044): the former floor on its own page; the rules panel spans both columns. */
.faq-page{padding-top:36px; padding-bottom:64px}
.faq-page h1{font-size:clamp(30px, 8vw, 40px); color:var(--sea-deep)}
.faq-page h1 .eyebrow{display:block; margin-bottom:6px}   /* hotels-048: the section label lives inside the h1 (SEO), drawn as before */
.faq-page .section-head{margin-bottom:24px}
.faq-page .legal-back{margin-top:32px}
/* hotels-056: /book-online/ — the partner's booking engine in a frame (Google landing page; no links to it on the site) */
.be-page{padding-bottom:0}
.be-main{padding-top:4px; padding-bottom:28px}
/* hotels-059: "Contact us" on phones too (no bottom action bar on this page; "Call me back" item hidden — it leads home) */
.be-page .head-contact{display:block}
.be-page .cm-item{display:none}
/* hotels-059: our bottom bar on phones mirrors the engine's summary bar (site.js) — like the action bar on other pages */
.be-bar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(9,63,77,.3)}
.be-bar[hidden]{display:none}
.be-bar-sum{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.be-bar-sum b{font:700 22px/1.1 var(--head); color:var(--sea-deep); white-space:nowrap}
.be-bar-sum b:empty::before{content:"Choose a studio"; font:600 15px/1.2 var(--body); color:var(--muted)}
.be-bar-sum span{font:12px/1.3 var(--body); color:var(--muted)}
.be-bar-link{align-self:flex-start; margin-top:2px; padding:0; border:0; background:none; font:600 13px/1.3 var(--body); color:var(--sea); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.be-bar .btn{min-height:44px; padding:0 22px; font-size:15px}
.be-bar .btn:disabled{opacity:.5; cursor:default}
body.has-be-bar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.be-frame{display:block; width:100%; border:0; height:1200px; background:#f7f5ef}   /* hotels-057: site.js sets the height to the engine's content (same origin) — the page scrolls, the frame never does */
.be-alt{margin:6px auto 2px; font-size:13px; text-align:right}   /* hotels-062: above the frame */
.be-alt a{color:var(--sea-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px}
/* hotels-049: audience pages (/traveling-nurses/, /contractors/, /corporate-housing/) — built from the rules-page parts */
.aud h2{font-size:26px; margin:30px 0 12px}
.aud .rules-intro{font-size:17px; line-height:1.55; color:var(--ink); max-width:760px}
.aud .aud-cta{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px}
.aud .aud-cta .btn{flex:1 1 220px}
.aud .distances{margin-top:0}
.aud .steps{counter-reset:step}
.aud .steps li{counter-increment:step}
.aud .steps li::before{content:counter(step); background:var(--coral); box-shadow:none; width:22px; height:22px; left:12px; top:14px; color:#fff; font:700 13px/22px var(--body); text-align:center}
.aud .aud-more{color:var(--muted); line-height:1.55; max-width:760px}
.aud .aud-more a, .aud .aud-also a{color:var(--sea-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.aud .aud-also{margin-top:14px; color:var(--muted)}
@media (min-width:720px){ .aud .aud-cta .btn{flex:0 0 auto; min-width:220px} }
@media (min-width:900px){ .aud .steps{grid-template-columns:1fr 1fr 1fr} }
/* hotels-046: the last FAQ tile is a link to /rules/ (full width); the rules page shows the intro and the cards, no accordion. */
.faq-more{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:0 16px; background:var(--sea-soft); border:1px solid #cfe4ea; border-radius:var(--radius-sm); font:700 20px/1.2 var(--head); color:var(--sea-deep); text-decoration:none}
.faq-more span{display:block; margin:-.45em 0 -.2em}
@media (min-width:720px){ .faq-more .br-m{display:none} }   /* hotels-053: ES tile breaks after "extendida." on phones only */   /* ink-trimmed, so flex centring puts the ink on the axis (hotels-047) */
.faq-more i{font-style:normal; font:400 26px/1 var(--body); color:var(--coral); transform:translateY(-1px)}
.faq-more:hover{border-color:var(--sea); color:var(--sea)}
@media (min-width:720px){ .faq-more{justify-content:center; position:relative} .faq-more i{position:absolute; right:16px; top:50%; transform:translateY(calc(-50% - 1px))} }   /* desktop: the text is centred, the arrow stays at the right edge */
.rules-intro{font-size:17px; line-height:1.5; color:var(--ink); margin:0 0 18px}
.faq-page .rules{padding-bottom:0}
.faq-page .rules li{background:#fff; border:1px solid var(--line)}   /* the page is sand — cards are white */
.rules{list-style:none; margin:0; padding:0 0 12px; display:grid; gap:10px}
.rules li{position:relative; padding:12px 14px 12px 44px; background:var(--sand); border-radius:12px; font-size:15px; line-height:1.5; color:var(--ink)}
.rules li::before{content:""; position:absolute; left:16px; top:18px; width:14px; height:14px; border-radius:50%; background:var(--sea); box-shadow:0 0 0 4px #cfe4ea}
.rules li b{color:var(--sea-deep)}
@media (min-width:720px){ .rules{grid-template-columns:1fr 1fr; gap:12px} }

/* Location */
.map{border:0; width:100%; height:300px; border-radius:var(--radius); background:var(--sand-2)}
.distances{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.distances li{display:flex; justify-content:space-between; gap:12px; padding:12px 14px; background:#fff; border-radius:var(--radius-sm); border:1px solid var(--line)}
.distances b{color:var(--sea-deep)}

/* Contact */
.contact{background:var(--sea-deep); color:#fff}
.contact h2{color:#fff}
.contact .section-head p{color:#cfe3e8}
.contact-grid{display:grid; gap:14px}
.contact-card{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:18px}
.contact-card h3{margin-bottom:10px}
.hours{width:100%; border-collapse:collapse; font-size:15px}
.hours td{padding:6px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.hours td:last-child{text-align:right}
.contact .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.contact .addr{color:#e6f1f3}

/* Footer */
.site-footer{background:#062c36; color:#9fbac1; font-size:13px; padding:22px 0}
.site-footer .wrap{display:grid; gap:14px}
.site-footer a{color:#cfe3e8}

/* Legal pages (privacy policy) */
.legal{max-width:780px; padding-top:36px; padding-bottom:64px}
.legal h1{font-size:clamp(30px, 8vw, 40px); color:var(--sea-deep); margin-bottom:8px}
.legal h2{font-size:21px; line-height:1.2; color:var(--sea-deep); margin:28px 0 8px}
.legal p, .legal li{color:var(--ink); font-size:16px}
.legal ul{padding-left:20px; margin:0 0 12px}
.legal li{margin-bottom:6px}
.legal a{word-break:break-word}
.legal-back{margin-top:32px}

/* Mobile action bar */
.actionbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(9,63,77,.3)}
.actionbar a, .actionbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:48px; border-radius:12px; text-decoration:none; font:600 12px/1 var(--body); color:var(--sea-deep)}
.actionbar button{border:0; background:none; padding:0 4px; cursor:pointer; text-align:center; line-height:1.15}   /* "Request a call" wraps to two lines on narrow phones (hotels-036) */
.actionbar svg{width:22px; height:22px}
/* hotels-036 (owner 26.09): "Request a call" is the last item and looks like the others (no red). */

/* ≥ 720px */
@media (min-width:720px){
  h2{font-size:38px}   /* hotels-053: 42 → 38 so the ES floor titles (The Community, FAQ) stay on one line at 1084 px; one size for both languages */
  .hero{min-height:74vh}
  .hero h1{font-size:64px}
  .hero p{max-width:none; text-wrap:wrap}
  .hero img{object-position:var(--pos-d, center)}
  .hero .wrap{padding-top:40px; padding-bottom:114px}  /* card overlaps 84px */
  .hero::after{background:linear-gradient(90deg, rgba(6,32,40,.62) 0%, rgba(6,32,40,.28) 50%, rgba(6,32,40,0) 75%), linear-gradient(180deg, rgba(9,40,50,0) 55%, rgba(6,32,40,.55) 100%)}
  .book{margin-top:-84px}
  .book-card{padding:30px 32px}
  .book-card h2{font-size:38px}
  .rates{grid-template-columns:repeat(3,1fr)}
  .rate{--px:clamp(18px, 2.3vw, 34px); --pf:clamp(50px, 4.3vw, 60px); --pw:clamp(110px, 8.8vw, 128px); align-items:center; padding:16px var(--px) 20px}
  .rate-term{font-size:clamp(28px, 2.3vw, 32px)}
  .rate-sub s{font-size:16px}
  .rate-fee{font-size:clamp(12px, 1vw, 14px)}   /* one line at 1000 px too (hotels-040) */
  .rate-pick{font-size:16.5px}
  .book-actions{grid-template-columns:1.4fr 1fr 1fr}
  .grid-stay{grid-template-columns:2fr 1fr 1fr}
  .grid-stay .field-wide{grid-column:auto}
  .grid-contact{grid-template-columns:1fr 1fr 1fr}
  .form > .btn-block, .stay-fields-in > .btn-block{max-width:360px}
  .tour-card{padding:26px 28px}
  .times{grid-template-columns:repeat(6,1fr)}
  .days{flex-wrap:wrap; overflow:visible}
  .benefits{grid-template-columns:repeat(3,1fr); gap:16px}
  .faq{grid-template-columns:1fr 1fr; align-items:start}
  .loc{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start}
  .map{height:380px}
  .distances{margin:0}
  .contact-grid{grid-template-columns:1.2fr 1fr 1fr}
  .contact-card .book-actions{grid-template-columns:1fr}
}
/* "Contact us" drop-down (hotels-036). The rules live outside the desktop media query since hotels-059: /book-online/
   shows the button on phones too (the button itself is display:none on phones elsewhere — .head-contact). */
.head-contact-btn{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border:1.5px solid var(--line); border-radius:999px; background:#fff; font:600 14px/1 var(--body); color:var(--sea-deep); cursor:pointer}
.head-contact-btn:hover, .head-contact-btn[aria-expanded="true"]{background:var(--sea-soft)}
.head-contact-btn svg{width:18px; height:18px}
.contact-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:300px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 18px 40px -12px rgba(9,63,77,.35)}
.cm-row, .cm-item{display:flex; align-items:center; gap:10px; min-height:46px; padding:4px 8px 4px 10px; border-radius:10px; color:var(--sea-deep)}
.cm-ico{display:inline-flex; gap:2px; flex:none; color:var(--sea)}
.cm-ico svg, .cm-item svg{width:20px; height:20px; flex:none}
.cm-val{flex:1; font:600 16px/1.2 var(--body); user-select:all; -webkit-user-select:all; cursor:pointer; white-space:nowrap}
.cm-val:hover{color:var(--sea)}
.cm-copy{display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border:1.5px solid var(--line); border-radius:50%; background:#fff; color:var(--sea-deep); cursor:pointer}   /* icon only (hotels-037) */
.cm-copy:hover{background:var(--sea-soft)}
.cm-copy svg{width:17px; height:17px}
.cm-row.done .cm-copy{border-color:var(--sea); color:var(--sea); background:var(--sea-soft)}
.cm-toast{position:absolute; left:50%; bottom:-14px; transform:translate(-50%, 100%); padding:9px 14px; border-radius:999px; background:var(--sea-deep); color:#fff; font:600 13px/1 var(--body); white-space:nowrap; box-shadow:0 10px 24px -10px rgba(9,63,77,.5)}
.cm-item{width:100%; border:0; border-top:1px solid var(--line); border-radius:0; margin-top:4px; padding-top:8px; background:none; font:600 15px/1 var(--body); text-decoration:none; cursor:pointer; text-align:left}
.cm-item:hover span{text-decoration:underline}
/* ≥ 1000px: no bottom bar, phone in header */
@media (min-width:1000px){
  body{padding-bottom:0}
  .actionbar{display:none}
  /* "Contact us" (hotels-036): button + drop-down with phone, email (selectable text + Copy) and "Request a call". */
  .head-contact{display:block}
  /* hotels-055: footer phone and e-mail copy with one click; the toast pops above the row */
  .foot-contact{position:relative}
  .foot-contact a[data-foot-copy]{cursor:copy}
  .foot-contact a[data-foot-copy] [data-copy-val]{user-select:all; -webkit-user-select:all}
  .foot-contact a[data-foot-copy].copied{color:#fff}
  .foot-toast{display:block; position:absolute; left:0; top:-14px; transform:translateY(-100%); padding:9px 14px; border-radius:999px; background:var(--sea); color:#fff; font:600 13px/1 var(--body); white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
  .foot-toast[hidden]{display:none}
  .head-book{display:inline-flex}
  /* Desktop: all eight chips in one row (owner 25.09); font scales so Spanish fits from 1000 px. */
  /* The row spans the full content width — flush with the booking card (owner 25.09); English, being shorter, gets a larger font. */
  .chip-set{display:flex; flex-wrap:nowrap; column-gap:7px; margin:18px 0 16px}
  .chips{flex-wrap:nowrap; column-gap:7px; max-width:none; margin:0}
  .chip-set .chips-top{flex:2 1 auto}
  .chip-set .chips:not(.chips-top){flex:6 1 auto}
  .chips::after{display:none}
  .chips li{flex:1 1 auto; min-height:0; padding:9px 11px; border-radius:999px; font-size:clamp(11px, 1.02vw, 13px)}
  html[lang="en"] .chips li{padding:10px 12px; font-size:clamp(12px, 1.18vw, 15px)}
  .chips li:nth-child(n+4){margin-top:0}
  .chips-top + .chips{margin-top:0}
  .section{padding:84px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .btn{transition:none}}

/* 720–999 px: stay cards stay one per row (three columns are too narrow for price + fee + button). */
@media (min-width:720px) and (max-width:999px){
  .rates{grid-template-columns:1fr !important}
  .rate{align-items:center !important}
}

/* ---- Stay form layout (owner 25.09): date + guests in one row, no pets; desktop 3 columns:
   [date · guests] [name ──────────]
   [phone]         [email] [Reserve]                                                     */
.stay-grid{position:relative; display:grid; grid-template-columns:1fr; gap:12px}
.f-dg{display:grid; grid-template-columns:1fr 92px; gap:12px}
.date-btn{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:50px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font:500 16px/1.2 var(--body); color:var(--ink); cursor:pointer; text-align:left}
.date-btn svg{width:20px; height:20px; color:var(--sea); flex:none}
.date-btn:focus-visible, .date-btn[aria-expanded="true"]{border-color:var(--sea); outline:none; box-shadow:0 0 0 3px var(--sea-soft)}
/* Calendar pop-up */
.cal{position:absolute; z-index:40; width:min(304px, calc(100vw - 48px)); padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px -12px rgba(9,63,77,.35), 0 2px 8px rgba(9,63,77,.12)}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cal-title{font:700 20px/1 var(--head); color:var(--sea-deep)}
.cal-nav{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--sea); font:700 18px/1 var(--body); cursor:pointer}
.cal-nav:disabled{opacity:.35; cursor:default}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center}
.cal-wd{font:600 11px/28px var(--body); color:var(--muted); text-transform:uppercase}
.cal-day{height:38px; border:0; border-radius:50%; background:none; font:600 14px/1 var(--body); color:var(--ink); cursor:pointer}
.cal-day:hover:not(:disabled){background:var(--sea-soft)}
.cal-day:disabled{color:#c3c9cc; cursor:default; font-weight:500}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--line)}
.cal-day.sel{background:var(--coral); color:#fff}
.cal-day:focus-visible{outline:2px solid var(--sea); outline-offset:1px}
@media (min-width:720px){
  .stay-grid{grid-template-columns:1fr 1fr}
  .stay-grid .f-submit{grid-column:1 / -1; max-width:360px}
}
@media (min-width:1000px){
  .stay-grid{grid-template-columns:repeat(3, 1fr)}
  .stay-grid .f-name{grid-column:2 / 4}
  .stay-grid .f-submit{grid-column:auto; max-width:none; align-self:end; min-height:50px}
  /* consent in one line on desktop (owner 25.09): font follows the card width */
  .form .consent{font-size:clamp(10px, calc(1.19vw - 1.3px), 12px); white-space:nowrap}
  html[lang="es"] .form .consent{font-size:clamp(9.5px, calc(1.07vw - 1.1px), 11px)}
}

/* ---- Tour form (owner 25.09): [Day][Time] in one row; contact fields + "Book my tour" slide open after a time is chosen. */
.tour-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tour-contact{display:grid; gap:12px}
.date-btn:disabled{cursor:default; color:var(--muted); background:var(--sand)}
.date-btn.empty span{color:var(--muted)}
.cal-times{width:min(340px, calc(100vw - 48px))}
.time-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:10px}
.time-slot{height:42px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font:600 14px/1 var(--body); color:var(--ink); cursor:pointer}
.time-slot:hover{border-color:var(--sea); background:var(--sea-soft)}
.time-slot.sel{background:var(--coral); border-color:var(--coral); color:#fff}
.time-slot:focus-visible{outline:2px solid var(--sea); outline-offset:1px}
.tour-card .slots-fallback{margin:0}
/* hotels-018: Full name sits in the day/time grid — its own row on phones/tablets (slides open with the rest),
   the third column on desktop, always shown there. Two rows of three on desktop. */
.tour-grid .f-tname{grid-column:1 / -1}
.js .tour-grid .f-tname{margin-top:-12px}
.js .tour-grid .f-tname.open{margin-top:0}
.tour-grid.no-slots .f-tday, .tour-grid.no-slots .f-ttime{display:none}
@media (min-width:720px){
  .tour-contact{grid-template-columns:1fr 1fr; align-items:end}
  .tour-contact .f-submit{grid-column:1 / -1}
}
@media (min-width:1000px){
  .tour-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .tour-grid .f-tname{grid-column:auto}
  .js .tour-grid .f-tname{grid-template-rows:1fr; opacity:1; visibility:visible; margin-top:0; transition:none}
  .js .tour-grid .f-tname > .stay-fields-in{overflow:visible}
  .tour-contact{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .tour-contact .f-submit{grid-column:auto; min-height:50px}
}
/* Day/time buttons share one row on phones: one line of text, smaller type on narrow screens, no icons below 360 px. */
.tour-grid .date-btn{padding:0 clamp(10px, 3vw, 14px); font-size:clamp(14px, 4vw, 16px); white-space:nowrap; gap:6px}
.tour-grid .date-btn span{overflow:hidden; text-overflow:ellipsis}
@media (max-width:359px){ .tour-grid .date-btn svg{display:none} }

/* ---- hotels-019 (owner 25.09) ---- */
/* Phones and tablets: without online tour times the tour form keeps only the message. ("Prefer to talk?" under the forms
   is gone everywhere — owner 26.09, hotels-036.) */
@media (max-width:999px){
  #tour-form.no-slots .stay-fields{display:none}
}
/* "Request a call" sheet — opens from the bottom bar. */
dialog.sheet{border:0; padding:0; margin:auto auto 0; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; overflow:auto; border-radius:20px 20px 0 0; background:#fff; color:var(--ink); box-shadow:0 -12px 40px -12px rgba(9,63,77,.4)}
dialog.sheet::backdrop{background:rgba(6,20,26,.55)}
dialog.sheet[open]{animation:sheet-up .25s ease}
@keyframes sheet-up{from{transform:translateY(40px); opacity:0}}
.sheet-in{position:relative; padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet h3{font:700 26px/1.1 var(--head); color:var(--sea-deep); margin:0 48px 6px 0}
.sheet-p{font-size:14px; line-height:1.5; color:var(--muted); margin:0}
.sheet-x{position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--sea-deep); font-size:22px; line-height:1; cursor:pointer}
.sheet .btn svg{width:20px; height:20px}
.sheet .form .consent{white-space:normal; font-size:12px}
.sheet .form-done{padding:6px 48px 6px 0}
@media (min-width:720px){ dialog.sheet{margin:auto; border-radius:20px} .sheet-in{padding:26px 26px 24px} }
/* Footer: phone, email, office hours on top; address and links below. */
.foot-contact{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:15px}
.foot-contact a, .foot-contact span{display:inline-flex; align-items:center; gap:8px; color:#e6f1f4; text-decoration:none}
.foot-contact svg{width:18px; height:18px; flex:none; color:#7fc4d3}
.foot-contact a:hover{text-decoration:underline}
.foot-toast{display:none}   /* hotels-055: "copied" toast — desktop only, see ≥ 1000px */
.foot-legal{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; padding-top:14px; border-top:1px solid rgba(255,255,255,.12)}
.foot-links{display:flex; gap:18px; flex:1 0 auto; justify-content:space-between}
@media (min-width:1000px){ .foot-links{flex:none; gap:22px} }
/* Location: the list column is as tall as the map; "Get directions" sits flush with the map's bottom edge,
   the leftover height is shared between the rows (owner 25.09). */
@media (min-width:720px){
  .loc{align-items:stretch}
  .loc > div{display:flex; flex-direction:column}
  .loc .distances{flex:1; align-content:space-between}
  .loc > div > p{margin-bottom:0}
  .loc .map{height:auto; min-height:380px; align-self:stretch}
}

/* ---- hotels-020 (owner 25.09) ---- */
/* Menu: button left of the name; the list drops under the header (full width on phones, a panel on desktop). */
.head-left{display:flex; align-items:center; gap:10px; min-width:0}
.menu-btn{flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:-8px; padding:0; border:0; border-radius:10px; background:none; color:var(--sea-deep); cursor:pointer}
.menu-btn svg{width:26px; height:26px}
.menu-btn:hover{background:var(--sea-soft)}
.menu-btn .m-close, .menu-btn[aria-expanded="true"] .m-open{display:none}
.menu-btn[aria-expanded="true"] .m-close{display:inline}
.site-menu{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 18px 30px -18px rgba(9,63,77,.45)}
.site-menu ul{list-style:none; max-width:var(--wrap); margin:0 auto; padding:6px 18px 10px}
.site-menu a{display:block; padding:13px 2px; border-bottom:1px solid var(--line); font:700 22px/1.1 var(--head); letter-spacing:.3px; color:var(--sea-deep); text-decoration:none}
.site-menu li:last-child a{border-bottom:0}
.site-menu a:hover{color:var(--coral)}
@media (max-width:399px){ .head-left{gap:6px} .menu-btn{width:36px; margin-left:-6px} }
/* Phones/tablets: the page under the open menu is dimmed; a tap there closes the menu (also over the map iframe).
   Absolute, not fixed: the header's backdrop-filter makes it the containing block for fixed children. */
@media (max-width:999px){ .site-menu::after{content:""; position:absolute; left:0; right:0; top:100%; height:100vh; background:rgba(6,20,26,.35)} }
@media (min-width:1000px){
  .site-menu{background:none; border:0; box-shadow:none; pointer-events:none}
  .site-menu ul{pointer-events:auto; max-width:none; margin:0; padding:6px 0; position:absolute; left:calc(max(0px, (100% - var(--wrap)) / 2) + 10px); top:6px; min-width:260px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 18px 40px -12px rgba(9,63,77,.35)}
  .site-menu a{padding:12px 22px; font-size:21px}
}
/* Sections under the sticky header when reached from the menu. */
section[id]{scroll-margin-top:60px}
/* Footer on desktop: two rows of three — left, centre, right (owner 25.09). Phones keep the stacked layout. */
.foot-copy, .foot-addr{display:block}
@media (min-width:1000px){
  .foot-contact, .foot-legal{display:grid; grid-template-columns:minmax(max-content, 1fr) max-content minmax(max-content, 1fr); column-gap:24px; align-items:center}
  .foot-contact > :nth-child(1), .foot-legal > :nth-child(1){justify-self:start}
  .foot-contact > :nth-child(2), .foot-legal > :nth-child(2){justify-self:center}
  .foot-contact > :nth-child(3), .foot-legal > :nth-child(3){justify-self:end}
  .foot-links{flex:none}
}

/* ---- hotels-022 (owner 25.09) ---- */
/* Studio + property floor: one carousel for photos and videos — swipe on phones, arrows, counter, thumbnails,
   a tap on a photo opens it large (arrows and swipe there too). All slides 3:2; portrait photos shown whole. */
.car{margin-top:4px}
.car-stage{position:relative}
.car-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; border-radius:var(--radius); scrollbar-width:none; background:#0b2a33}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
.car-slide{flex:0 0 100%; margin:0; aspect-ratio:3/2; scroll-snap-align:start; scroll-snap-stop:always; position:relative; overflow:hidden}
.car-zoom{display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in}
.car-slide img, .car-slide video{display:block; width:100%; height:100%; object-fit:cover}
.car-slide.is-tall img{object-fit:contain}
.car-slide video{background:#000}
.car-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--sea-deep); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -6px rgba(6,20,26,.5); cursor:pointer; transition:opacity .2s}
.car-arrow svg{width:24px; height:24px}
.car-prev{left:10px} .car-next{right:10px}
.car-arrow:disabled{opacity:0; pointer-events:none}
.car-arrow:hover{background:#fff}
.car-count{position:absolute; right:12px; top:12px; z-index:2; padding:5px 10px; border-radius:999px; background:rgba(6,20,26,.62); color:#fff; font:600 13px/1 var(--body); letter-spacing:.3px; pointer-events:none}
.car-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding:3px 2px}
.car-thumbs::-webkit-scrollbar{display:none}
.car-thumbs button{position:relative; flex:none; width:72px; height:48px; padding:0; border:0; border-radius:8px; overflow:hidden; cursor:pointer; opacity:.62; outline:2px solid transparent; outline-offset:1px; transition:opacity .2s}
.car-thumbs button:hover{opacity:.9}
.car-thumbs button.on{opacity:1; outline-color:var(--coral)}
.car-thumbs img{display:block; width:100%; height:100%; object-fit:cover}
.car-thumbs button.is-video::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-40%, -50%); border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
@media (min-width:720px){
  .car-arrow{width:52px; height:52px}
  .car-arrow svg{width:28px; height:28px}
  .car-prev{left:16px} .car-next{right:16px}
  .car-thumbs{gap:10px; margin-top:12px}
  .car-thumbs button{width:96px; height:64px}
}
/* All studio and property bullets in one list: one column on phones, two from 720 px. */
.feat-grid{margin-top:26px; gap:12px}
/* hotels-023: two columns read top-down — studio items first, then the property (owner's order). */
@media (min-width:720px){ .feat-grid{grid-template-columns:1fr 1fr; grid-template-rows:repeat(5, auto); grid-auto-flow:column; column-gap:40px; row-gap:14px} }
/* hotels-026: big translucent play button in the middle of a video slide; hidden while the video plays. */
.car-play{position:absolute; inset:0; z-index:1; margin:auto; width:clamp(64px, 17vw, 96px); height:clamp(64px, 17vw, 96px); padding:0; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:rgba(6,20,26,.42); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 28px -8px rgba(0,0,0,.55); transition:background .2s, transform .2s, opacity .2s}
.car-play svg{width:46%; height:46%; margin-left:8%}
.car-play:hover{background:rgba(6,20,26,.6); transform:scale(1.05)}
.car-play:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
.car-slide.playing .car-play{opacity:0; pointer-events:none}
/* ---- hotels-030: website chat with the leasing agent ---- */
/* Round button bottom-right (above the phone bar); the window: full screen on phones, a panel on tablets/desktop. */
.chat-fab{position:fixed; right:14px; bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom)); z-index:55; height:54px; min-width:54px; padding:0 15px; border:0; border-radius:999px; background:var(--sea); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 15px/1 var(--body); cursor:pointer; box-shadow:0 10px 26px -8px rgba(9,63,77,.6)}
.chat-fab svg{width:26px; height:26px; flex:none}
.chat-fab span{display:none}
.chat-fab:hover{background:var(--sea-deep)}
.chat-fab:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
html.chat-open .chat-fab{display:none}
.chat{position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; background:var(--sand); color:var(--ink)}
.chat[hidden]{display:none}
.chat-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 18px; padding-top:calc(12px + env(safe-area-inset-top)); background:var(--sea-deep); color:#fff}
.chat-head b{display:block; font:700 20px/1.1 var(--head); letter-spacing:.3px}
.chat-head span{display:block; font-size:12.5px; opacity:.8; margin-top:3px}
.chat-x{flex:none; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer}
.chat-x:hover{background:rgba(255,255,255,.26)}
.chat-log{flex:1; overflow-y:auto; padding:16px 14px 8px; overscroll-behavior:contain}
.msg{max-width:86%; margin:0 0 10px; padding:10px 13px; border-radius:16px; font-size:15px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.msg.bot{background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px}
.msg.me{margin-left:auto; background:var(--sea); color:#fff; border-bottom-right-radius:5px}
.msg.err{background:#fff4f1; border:1px solid #f3c9bd}
.msg .btn{margin-top:10px; min-height:40px; font-size:14px; white-space:normal}
.msg.typing{display:inline-flex; gap:5px; padding:14px 16px}
.msg.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:chat-dot 1.2s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s} .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.chat-start{display:grid; gap:10px; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line)}
.chat-start-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chat-start .consent{font-size:11.5px; white-space:normal}
.chat-start .form-msg:empty{display:none}
.chat-quick{display:flex; flex-wrap:wrap; gap:8px; padding:4px 14px 10px}
.chat-quick[hidden]{display:none}
.chat-quick button{min-height:38px; padding:0 14px; border-radius:999px; border:1.5px solid var(--sea); background:#fff; color:var(--sea); font:600 14px/1 var(--body); cursor:pointer}
.chat-quick button:hover{background:var(--sea-soft)}
/* hotels-051: the agent's suggested next questions — a column under the last reply, inside the log */
.chat-sugg{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:-2px 0 12px}
.chat-sugg button{max-width:86%; min-height:38px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--sea); background:#fff; color:var(--sea); font:600 14px/1.25 var(--body); text-align:left; cursor:pointer}
.chat-sugg button:hover{background:var(--sea-soft)}
.chat-input{display:flex; align-items:flex-end; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line)}
.chat-input[hidden]{display:none}
.chat-input textarea{flex:1; min-height:44px; max-height:130px; padding:11px 14px; border:1.5px solid var(--line); border-radius:22px; font:16px/1.35 var(--body); color:var(--ink); resize:none; background:#fff}
.chat-input textarea:focus{outline:none; border-color:var(--sea)}
.chat-input button{flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--coral); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.chat-input button:disabled{opacity:.45; cursor:default}
.chat-input button svg{width:21px; height:21px}
@media (max-width:719px){ html.chat-open, html.chat-open body{overflow:hidden} }
@media (min-width:720px){
  .chat-fab span{display:inline}
  .chat{inset:auto; right:20px; bottom:calc(var(--bar-h) + 20px); width:390px; height:min(640px, calc(100vh - var(--bar-h) - 40px)); border-radius:18px; overflow:hidden; box-shadow:0 24px 60px -18px rgba(6,20,26,.55); border:1px solid var(--line)}
  .chat-head{padding-top:12px}
}
@media (min-width:1000px){
  .chat-fab{right:24px; bottom:24px}
  .chat{right:24px; bottom:24px; height:min(640px, calc(100vh - 48px))}
}