/* David's edits on top of Mira's Warm Ivory design (10-10-2026). Loaded last. */

/* 1. Apartment galleries: no hint text, dots or prev/next arrows; swipe and thumbnails remain */
.room-hint,.room-dots,.room-arrows{display:none!important}

/* 2. Facts strip under the pool photo: champagne band instead of black, so the page clearly continues */
.hero-facts-below{background:var(--accent,#d9b680)!important;color:#17130e!important;border-radius:26px;padding:18px 16px!important;margin:14px 12px 0!important}
.hero-facts-below strong{color:#17130e!important}
.hero-facts-below span{color:#4a3d2c!important}
.hero-facts-below>div{border-color:#17130e33!important}

/* 3. No caption over the hero photos */
.stack-label{display:none!important}

/* 4. No "All photos" button: the carousel already shows every photo. Enquire takes the full row */
.unit-actions .unit-toggle{display:none!important}
.unit-actions{grid-template-columns:1fr!important}
.unit-actions .button{width:100%;justify-content:space-between}

/* 5. Apartment carousel photos without the caption pill; tapping the photo still opens the full-screen viewer */
.room-caption{display:none!important}
.room-shot{cursor:zoom-in}

/* 6. No automatic scrolling or landing bounce (gentle-stops.js removed from the page). Cards stop where the finger stops */
.settled .unit-head{animation:none!important}

/* 7. One drawn arrow style everywhere. The text arrow "↗" turns into a blue emoji on iPhones */
.button-icon>span,.stack-arrow .button-label,.stack-arrow{font-size:0!important}
.button-icon>span::before,.stack-arrow::after{content:"";display:block;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.button-icon>span::before{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")}
.stack-arrow{display:grid!important;place-items:center}
.stack-arrow::after{width:18px;height:18px;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.stack-arrow[data-step="-1"]::after{transform:scaleX(-1)}

/* 8. Facts band lines up exactly with the "A stay that" card above it */
.hero-facts-below{width:auto!important;max-width:none!important;margin:14px 16px 0!important;box-sizing:border-box}

/* 9. Scroll animation removed (David 10-10-2026: not fluid enough). Nothing left to pause, so no Pause motion button */
.motion-toggle{display:none!important}

/* 10. Scroll progress bar at the top of the screen removed (David 12-10-2026: leftover from the old scroll animation) */
.reading-progress{display:none!important}

/* 11. Photo viewer brought into the Warm Obsidian look (David 12-10-2026: was a bland navy box with text buttons, no swipe).
   Full-screen obsidian on phones, champagne round buttons with drawn arrows, rounded photo like the cards. Swipe in viewer-swipe.js */
#lightbox{background:#0d0c0b!important;color:#f1e9dc!important;border:1px solid #d9b68038!important;border-radius:28px!important;
  padding:18px!important;width:1100px!important;max-width:94vw!important;max-height:94vh!important;overflow:hidden}
#lightbox[open]{display:flex;flex-direction:column;animation:lb-in .32s cubic-bezier(.2,.8,.2,1)}
#lightbox::backdrop{background:#0d0c0bf2!important;backdrop-filter:blur(14px)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#lightbox .lightbox-top{padding:0 0 14px!important}
#image-count{color:#d9b680;font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
#lightbox .lightbox-bottom{padding:16px 0 0!important}
#image-caption{color:#f1e9dc;font-size:15px!important;margin:0;text-align:center;flex:1}
#large-image{flex:0 1 auto;min-height:0;width:auto;max-width:100%;height:auto!important;max-height:72vh;align-self:center;margin:auto 0;object-fit:contain;border-radius:22px!important;
  touch-action:pan-y;user-select:none;-webkit-user-drag:none;cursor:grab;will-change:transform}
#lightbox button{width:46px;height:46px;padding:0!important;border-radius:50%!important;display:grid;place-items:center;flex:none;
  font-size:0!important;transition:transform .2s,background .2s}
#lightbox button:active{transform:scale(.92)}
#lightbox button:focus-visible{outline:2px solid #d9b680;outline-offset:3px}
#lightbox #previous-image,#lightbox #next-image{background:#d9b680!important;color:#17130e!important;border:0!important}
#lightbox #close-gallery{background:transparent!important;color:#f1e9dc!important;border:1px solid #d9b68059!important}
#lightbox button::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
#previous-image,#next-image{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
#previous-image::after{transform:scaleX(-1)}
#close-gallery{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
@media (max-width:700px){
  #lightbox{width:100vw!important;max-width:100vw!important;height:100dvh;max-height:100dvh!important;border:0!important;border-radius:0!important;
    padding:max(16px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))!important;margin:0}
  #lightbox[open]{justify-content:space-between}
  #large-image{max-height:calc(100dvh - 190px);border-radius:20px!important}
}
@media (prefers-reduced-motion:reduce){#lightbox[open]{animation:none}}

/* 12. Icons centred in the round buttons (David 12-10-2026: arrows and X sat low). The hidden text label was still taking a grid row
   above the drawn icon; take it out of the layout, screen readers still get aria-label */
.stack-arrow .button-label,#lightbox .button-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 13. Room photos as a carousel (David 12-10-2026: hard to tell you can swipe; then larger front photo, sides tucked behind).
   The photo in front is centred and larger; the ones either side tuck in under its edges, smaller and dimmed.
   The scale/slide is on the IMG, never on .room-shot: .room-shot is the scroll-snap target, and transforming it moved the snap
   points mid-swipe, which left the strip stuck off-centre on iPhone Safari (David's screenshot, 12-10-2026).
   data-index on .room-gallery marks the front photo (set by room-options.js) */
/* Centring: spacers either side are 7% and each photo 86% of the SAME width, so every photo (first and last too) can sit dead
   centre. Padding can't do this: a photo's % width is measured inside the padding, so the numbers never add up */
.room-track{padding:8px 0!important;gap:0!important;scroll-padding:0!important;border-radius:0!important}
.room-track::before,.room-track::after{content:"";flex:0 0 7%}
.room-track .room-shot{flex:0 0 86%!important;height:300px!important;margin:0!important;scroll-snap-align:center!important;scroll-snap-stop:always;
  background:transparent!important;overflow:visible!important;border-radius:0!important;position:relative;z-index:1}
.room-track .room-shot img{width:100%;height:100%;object-fit:cover;border-radius:25px;display:block;transform:scale(.78);opacity:.45;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .35s}
.room-gallery[data-index="0"] .room-shot[data-photo="1"],.room-gallery[data-index="1"] .room-shot[data-photo="2"],.room-gallery[data-index="2"] .room-shot[data-photo="3"],.room-gallery[data-index="3"] .room-shot[data-photo="4"],.room-gallery[data-index="4"] .room-shot[data-photo="5"],.room-gallery[data-index="5"] .room-shot[data-photo="6"],.room-gallery[data-index="6"] .room-shot[data-photo="7"],.room-gallery[data-index="7"] .room-shot[data-photo="8"],.room-gallery[data-index="8"] .room-shot[data-photo="9"],.room-gallery[data-index="9"] .room-shot[data-photo="10"],.room-gallery[data-index="10"] .room-shot[data-photo="11"],.room-gallery[data-index="11"] .room-shot[data-photo="12"],.room-gallery[data-index="12"] .room-shot[data-photo="13"],.room-gallery[data-index="13"] .room-shot[data-photo="14"],.room-gallery[data-index="14"] .room-shot[data-photo="15"],.room-gallery[data-index="15"] .room-shot[data-photo="16"]{z-index:2}
.room-gallery[data-index="0"] .room-shot[data-photo="1"] img,.room-gallery[data-index="1"] .room-shot[data-photo="2"] img,.room-gallery[data-index="2"] .room-shot[data-photo="3"] img,.room-gallery[data-index="3"] .room-shot[data-photo="4"] img,.room-gallery[data-index="4"] .room-shot[data-photo="5"] img,.room-gallery[data-index="5"] .room-shot[data-photo="6"] img,.room-gallery[data-index="6"] .room-shot[data-photo="7"] img,.room-gallery[data-index="7"] .room-shot[data-photo="8"] img,.room-gallery[data-index="8"] .room-shot[data-photo="9"] img,.room-gallery[data-index="9"] .room-shot[data-photo="10"] img,.room-gallery[data-index="10"] .room-shot[data-photo="11"] img,.room-gallery[data-index="11"] .room-shot[data-photo="12"] img,.room-gallery[data-index="12"] .room-shot[data-photo="13"] img,.room-gallery[data-index="13"] .room-shot[data-photo="14"] img,.room-gallery[data-index="14"] .room-shot[data-photo="15"] img,.room-gallery[data-index="15"] .room-shot[data-photo="16"] img{transform:translateX(-17%) scale(.84);opacity:.6}
.room-gallery[data-index="1"] .room-shot[data-photo="0"],.room-gallery[data-index="2"] .room-shot[data-photo="1"],.room-gallery[data-index="3"] .room-shot[data-photo="2"],.room-gallery[data-index="4"] .room-shot[data-photo="3"],.room-gallery[data-index="5"] .room-shot[data-photo="4"],.room-gallery[data-index="6"] .room-shot[data-photo="5"],.room-gallery[data-index="7"] .room-shot[data-photo="6"],.room-gallery[data-index="8"] .room-shot[data-photo="7"],.room-gallery[data-index="9"] .room-shot[data-photo="8"],.room-gallery[data-index="10"] .room-shot[data-photo="9"],.room-gallery[data-index="11"] .room-shot[data-photo="10"],.room-gallery[data-index="12"] .room-shot[data-photo="11"],.room-gallery[data-index="13"] .room-shot[data-photo="12"],.room-gallery[data-index="14"] .room-shot[data-photo="13"],.room-gallery[data-index="15"] .room-shot[data-photo="14"],.room-gallery[data-index="16"] .room-shot[data-photo="15"]{z-index:2}
.room-gallery[data-index="1"] .room-shot[data-photo="0"] img,.room-gallery[data-index="2"] .room-shot[data-photo="1"] img,.room-gallery[data-index="3"] .room-shot[data-photo="2"] img,.room-gallery[data-index="4"] .room-shot[data-photo="3"] img,.room-gallery[data-index="5"] .room-shot[data-photo="4"] img,.room-gallery[data-index="6"] .room-shot[data-photo="5"] img,.room-gallery[data-index="7"] .room-shot[data-photo="6"] img,.room-gallery[data-index="8"] .room-shot[data-photo="7"] img,.room-gallery[data-index="9"] .room-shot[data-photo="8"] img,.room-gallery[data-index="10"] .room-shot[data-photo="9"] img,.room-gallery[data-index="11"] .room-shot[data-photo="10"] img,.room-gallery[data-index="12"] .room-shot[data-photo="11"] img,.room-gallery[data-index="13"] .room-shot[data-photo="12"] img,.room-gallery[data-index="14"] .room-shot[data-photo="13"] img,.room-gallery[data-index="15"] .room-shot[data-photo="14"] img,.room-gallery[data-index="16"] .room-shot[data-photo="15"] img{transform:translateX(17%) scale(.84);opacity:.6}
.room-gallery[data-index="0"] .room-shot[data-photo="0"],.room-gallery[data-index="1"] .room-shot[data-photo="1"],.room-gallery[data-index="2"] .room-shot[data-photo="2"],.room-gallery[data-index="3"] .room-shot[data-photo="3"],.room-gallery[data-index="4"] .room-shot[data-photo="4"],.room-gallery[data-index="5"] .room-shot[data-photo="5"],.room-gallery[data-index="6"] .room-shot[data-photo="6"],.room-gallery[data-index="7"] .room-shot[data-photo="7"],.room-gallery[data-index="8"] .room-shot[data-photo="8"],.room-gallery[data-index="9"] .room-shot[data-photo="9"],.room-gallery[data-index="10"] .room-shot[data-photo="10"],.room-gallery[data-index="11"] .room-shot[data-photo="11"],.room-gallery[data-index="12"] .room-shot[data-photo="12"],.room-gallery[data-index="13"] .room-shot[data-photo="13"],.room-gallery[data-index="14"] .room-shot[data-photo="14"],.room-gallery[data-index="15"] .room-shot[data-photo="15"]{z-index:3}
.room-gallery[data-index="0"] .room-shot[data-photo="0"] img,.room-gallery[data-index="1"] .room-shot[data-photo="1"] img,.room-gallery[data-index="2"] .room-shot[data-photo="2"] img,.room-gallery[data-index="3"] .room-shot[data-photo="3"] img,.room-gallery[data-index="4"] .room-shot[data-photo="4"] img,.room-gallery[data-index="5"] .room-shot[data-photo="5"] img,.room-gallery[data-index="6"] .room-shot[data-photo="6"] img,.room-gallery[data-index="7"] .room-shot[data-photo="7"] img,.room-gallery[data-index="8"] .room-shot[data-photo="8"] img,.room-gallery[data-index="9"] .room-shot[data-photo="9"] img,.room-gallery[data-index="10"] .room-shot[data-photo="10"] img,.room-gallery[data-index="11"] .room-shot[data-photo="11"] img,.room-gallery[data-index="12"] .room-shot[data-photo="12"] img,.room-gallery[data-index="13"] .room-shot[data-photo="13"] img,.room-gallery[data-index="14"] .room-shot[data-photo="14"] img,.room-gallery[data-index="15"] .room-shot[data-photo="15"] img{transform:none;opacity:1;box-shadow:0 14px 30px #0d0c0b45}
@media(max-width:360px){.room-track .room-shot{height:255px!important}}
@media(prefers-reduced-motion:reduce){.room-track .room-shot img{transition:none}}

/* 15. Thumbnails in the photo viewer (David 12-10-2026). Strip built by viewer-swipe.js; the current photo is ringed in champagne */
.lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 2px 2px;flex:none;-webkit-overflow-scrolling:touch}
.lightbox-thumbs::-webkit-scrollbar{display:none}
#lightbox .lightbox-thumbs button{width:60px!important;height:46px!important;flex:none;border-radius:11px!important;padding:2px!important;
  border:2px solid transparent!important;background:transparent!important;opacity:.5;transition:opacity .25s,border-color .25s}
#lightbox .lightbox-thumbs button::after{content:none}
#lightbox .lightbox-thumbs button[aria-current=true]{border-color:#d9b680!important;opacity:1}
.lightbox-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;pointer-events:none}
@media (max-width:700px){#large-image{max-height:calc(100dvh - 260px)}}
/* 15b. Fixed heights so iPhone Safari can't squash the strip and clip the thumbnails' bottoms (David's screenshot 12-10-2026) */
.lightbox-thumbs{height:66px;min-height:66px;box-sizing:border-box;padding:8px 4px!important;align-items:center;overflow-y:hidden}
#lightbox .lightbox-thumbs button{display:block!important;position:relative;width:62px!important;height:48px!important;min-height:48px;overflow:hidden;box-sizing:border-box}
#lightbox .lightbox-thumbs button img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:8px}

/* 16. Date boxes collapsed to thin empty bars on iPhone (David's screenshot 12-10-2026). Safari shows nothing in an empty date
   input and appearance:none removes its own height, so: fixed height matching the select, a held-open value line, and a
   drawn calendar icon so the box reads as a date picker before a date is chosen */
#enquiry-form input[type=date]{box-sizing:border-box;min-height:46px;height:46px;line-height:24px;padding:10px 34px 10px 12px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330271d' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:17px 17px!important}
input[type=date]::-webkit-date-and-time-value{min-height:24px;line-height:24px;text-align:left}
input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:24px;height:24px;margin-right:-26px;cursor:pointer}

/* 17. Hero photo captions were the only text still asking for Manrope, which is no longer downloaded (speed pass 12-10-2026) */
small,.hero small,.stack small{font-family:Urbanist,sans-serif!important}

/* ===== 18. DESKTOP LAYOUT (David 12-10-2026: desktop looked disjointed, black bars, things covering things).
   Everything here is inside min-width:901px so the phone layout (<=900px) is untouched. Phone baseline is checked by
   comparing every element's position at 390px before and after. ===== */
@media (min-width:901px){
  /* Hero: see desktop-hero.css (the tablet hero, re-used) and section 19 below */
  /* Apartments: words and rates on the left, the same carousel + thumbnails as the phone on the right */
  .unit{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:52px;align-items:center;padding:52px!important}
  .unit>.unit-head{grid-column:1;grid-row:1;display:flex!important;flex-direction:column;gap:22px;align-self:end}
  .unit>.unit-head>*{max-width:none!important;margin:0!important}
  .unit>.unit-actions{grid-column:1;grid-row:2;align-self:start;margin-top:28px!important}
  .unit>.room-gallery{grid-column:2;grid-row:1/span 2;margin:0!important}
  .unit .room-track .room-shot{height:430px!important}
  /* No swiping with a mouse, so the carousel's own arrows show on desktop, drawn like the hero arrows */
  .unit .room-footer{margin-top:14px!important}
  .unit .room-arrows{display:flex!important;gap:10px}
  .unit .room-prev,.unit .room-next{width:46px!important;height:46px!important;border-radius:50%!important;border:0!important;background:#d9b680!important;color:#17130e!important;
    display:grid!important;place-items:center;font-size:0!important;cursor:pointer;transition:transform .2s}
  .unit .room-prev:active,.unit .room-next:active{transform:scale(.92)}
  .unit .room-prev .button-label,.unit .room-next .button-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .unit .room-prev::after,.unit .room-next::after{content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .unit .room-prev::after{transform:scaleX(-1)}
  .unit .room-position{font-size:13px!important}
}

/* 19. Desktop sizing for the tablet-style hero (desktop-hero.css). min-width:901px only */
@media (min-width:901px){
  body.header-floating{--hero-h:clamp(520px,74vh,720px)}
  .header-floating .hero{margin:14px 3% 28px!important}
  .header-floating header{left:calc(3% + 28px)!important;right:calc(3% + 28px)!important;top:40px!important;height:62px!important}
  .header-floating .stack-stage{height:var(--hero-h)!important}
  .header-floating .stack-card img{object-position:50% 55%}
  /* Welcome card sits on the photo's lower-left, like the tablet, at a comfortable desktop width */
  .header-floating .hero-copy{margin:-230px 0 0 48px!important;max-width:600px;width:auto!important;padding:34px 38px 30px!important;align-self:flex-start}
  .header-floating .hero h1{font-size:clamp(46px,4.4vw,64px)!important;max-width:none!important}
  .header-floating .place{font-size:12px!important}
  .header-floating .hero-description{font-size:15px!important;max-width:440px}
  /* Photo arrows: bottom-right of the photo, clear of the card */
  .header-floating .stack-controls{top:calc(var(--hero-h) - 76px)!important;left:auto!important;right:34px!important}
  .header-floating .stack-arrow{width:48px!important;height:48px!important}
  /* Champagne band under the card */
  .header-floating .hero-facts-below{margin:22px 0 0!important;padding:24px 36px!important}
  .header-floating .hero-facts-below strong{font-size:24px!important}
  .header-floating .hero-facts-below span{font-size:12px!important}
}

/* 20. Amenities on an ivory card like the apartment cards, phone and desktop (David 12-10-2026: didn't like it sitting on the
   black background; heading renamed "Amenities available"). Sizes mirror .unit at each width */
#grounds{background:var(--card)!important;color:var(--card-text)!important;border:1px solid #30271d42;box-shadow:0 24px 50px #00000044;
  margin:0 3% 16px!important;padding:28px 5%!important;border-radius:28px!important}
#grounds h2{color:var(--card-text)!important}
#grounds .amenities span{color:var(--card-text)!important}
#grounds .amenities svg{color:var(--card-accent)!important}
@media (min-width:901px){#grounds{margin:20px 5% 30px!important;padding:44px 52px!important;border-radius:38px!important}#grounds h2{font-size:34px!important}#grounds .amenities span{font-size:15px!important}#grounds .amenities svg{width:26px!important;height:26px!important}}