/* ==========================================================================
   Ventas Rumba Apartments — Rivora "Homepage 2" layout
   Design tokens taken from the Rivora theme kit:
     primary #1C1C1D · secondary #CAA05C · text #59585D · page #F6F6F6
     headings "Cal Sans" · body "Golos Text" · container 1304px
   ========================================================================== */

:root{
  --dark:#1C1C1D;
  --gold:#CAA05C;
  --text:#59585D;
  --white:#FFFFFF;
  --page:#F6F6F6;
  --brown:#57463F;
  --line:#DDDDDD;
  --step:#DBDBDB;
  --container:1304px;
  --section-pad:100px;      /* .section vertical padding */
  --header-h:110px;         /* measured and kept current from main.js */
  --anchor-gap:22px;        /* breathing room above the eyebrow on an anchor jump */
  --radius:16px;
  --gap:30px;
  --font-head:"Cal Sans","Golos Text",system-ui,sans-serif;
  --font-body:"Golos Text",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
p,figure,blockquote{margin:0;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:500;
  color:var(--dark);
  margin:0;
  line-height:1.15;
}

/* anchor jumps stop just above the gold eyebrow, clear of the sticky header */
section[id]{scroll-margin-top:calc(var(--header-h) + var(--anchor-gap) - var(--section-pad));}
#top{scroll-margin-top:0;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:15px;}
.wide{width:100%;padding-inline:15px;}
.section{padding-block:var(--section-pad);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --- shared heading block ------------------------------------------------ */
.eyebrow{
  font-family:var(--font-body);
  font-size:17px;font-weight:600;line-height:1.4;
  color:var(--gold);
  margin:0 0 10px;
}
.section-head{text-align:center;max-width:680px;margin:0 auto 60px;}
.section-head h2,
.section-head h1{font-size:48px;margin:0 0 18px;}
.section-head p{margin:0;font-size:16px;}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  letter-spacing:.02em;
  padding:12px 28px;border-radius:25px;
  background:var(--gold);color:var(--white);
  transition:background .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--dark);transform:translateY(-2px);}
.btn--sm{padding:10px 22px;font-size:14px;border-radius:5px;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  background:var(--page);
  position:sticky;top:0;z-index:60;
  transition:box-shadow .3s var(--ease);
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(28,28,29,.07);}
.header-inner{
  display:flex;align-items:center;gap:20px;
  padding-block:20px;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;width:25%;}
.brand svg{flex:0 0 auto;}
.brand-mark{flex:0 0 auto;width:36px;height:36px;}
.brand-name{
  font-family:var(--font-head);font-size:22px;line-height:1;
  color:var(--dark);letter-spacing:.01em;white-space:nowrap;
}
.brand-name small{
  display:block;font-family:var(--font-body);
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-top:5px;
}

.main-nav{flex:1 1 auto;}
.main-nav > ul{display:flex;justify-content:center;align-items:center;}
.main-nav > ul > li > a{
  display:block;
  font-family:var(--font-head);font-size:17px;
  color:var(--dark);
  padding:25px 22px;
  transition:color .25s var(--ease);
}
.main-nav > ul > li > a:hover{color:var(--gold);}

.header-cta{width:25%;display:flex;justify-content:flex-end;}
.nav-toggle{display:none;padding:8px;}
.nav-toggle svg{width:26px;height:26px;fill:var(--dark);}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero{padding-top:44px;}
.hero-slider{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:clamp(620px, 55.3vw, 960px);   /* 796px at the 1440 design width */
  display:flex;
}
.hero-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility .9s var(--ease);
}
.hero-slide.is-active{opacity:1;visibility:visible;}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,28,29,.46) 0%,rgba(28,28,29,.38) 42%,rgba(28,28,29,.62) 100%);
}
.hero-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 7s linear;
}
.hero-slide.is-active img{transform:scale(1);}
.hero-copy{
  position:relative;z-index:2;
  max-width:900px;padding:0 40px;
  text-align:center;
  margin-bottom:150px;
}
.hero-copy h1,
.hero-copy .hero-title{
  font-family:var(--font-head);font-weight:500;
  font-size:60px;line-height:1.2;color:var(--white);
  margin:0 0 25px;
  text-shadow:0 2px 30px rgba(28,28,29,.45);
}
.hero-copy p:not(.hero-title){
  margin:0 auto;max-width:560px;
  color:var(--white);font-size:16px;line-height:1.7;
  background:rgba(0,0,0,.15);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  border-radius:40px;
  padding:22px 34px;
}
.hero-nav{
  position:absolute;top:calc(50% - 75px);z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--white);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hero-nav:hover{background:var(--gold);}
.hero-nav svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;}
.hero-nav--prev{left:20px;}
.hero-nav--next{right:20px;}

/* --- booking bar --------------------------------------------------------- */
.booking{
  position:relative;z-index:5;
  margin-top:-206px;margin-bottom:0;
}
.booking-form{
  background:var(--white);
  border-radius:20px;
  padding:34px 40px;
  display:flex;align-items:center;gap:20px;
  box-shadow:0 20px 60px rgba(28,28,29,.10);
}
.booking-field{flex:1 1 0;min-width:0;text-align:center;}
.booking-field > span{
  display:block;
  font-family:var(--font-head);font-size:20px;color:var(--dark);
  margin-bottom:6px;
}
.booking-field input[type=date]{
  width:100%;border:0;background:transparent;text-align:center;
  font-family:var(--font-body);font-size:16px;color:var(--text);
  padding:4px 0;
}
.booking-field input[type=date]:focus{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;}
.stepper{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;}
.stepper button{
  width:34px;height:34px;border-radius:6px;
  background:var(--step);color:var(--dark);
  display:grid;place-items:center;font-size:18px;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.stepper button:hover{background:var(--gold);color:var(--white);}
.stepper output{min-width:24px;font-size:16px;color:var(--dark);}
.booking-submit{flex:0 0 auto;}
.booking-submit .btn{
  padding:14px 32px;letter-spacing:.12em;text-transform:uppercase;font-size:13px;
}

/* ==========================================================================
   Apartments
   ========================================================================== */
.rooms{display:flex;flex-direction:column;gap:var(--gap);}
.room{
  background:var(--white);
  border-radius:var(--radius);
  padding:8px;
  display:flex;align-items:stretch;gap:0;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.room:hover{box-shadow:0 18px 45px rgba(28,28,29,.09);transform:translateY(-3px);}
.room-media{
  position:relative;flex:0 0 390px;
  border-radius:12px;overflow:hidden;
  align-self:stretch;min-height:255px;
}
.room-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.room:hover .room-media img{transform:scale(1.05);}
.room-badge{
  position:absolute;top:16px;left:16px;
  background:var(--gold);color:var(--white);
  font-size:13px;font-weight:600;
  padding:6px 16px;border-radius:6px;
}
.room-body{flex:1 1 auto;padding:30px 40px;display:flex;flex-direction:column;justify-content:center;}
.room-title{font-size:26px;letter-spacing:.02em;margin:0 0 8px;}
.room-title a{transition:color .25s var(--ease);}
.room-title a:hover{color:var(--gold);}
.room-view{
  display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--gold);
  margin:0 0 14px;
}
.room-view svg{width:15px;height:15px;fill:currentColor;}
.room-desc{margin:0;max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-clamp:3;overflow:hidden;}
.room-aside{
  flex:0 0 220px;padding:30px 24px 30px 0;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.room-spec{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text);}
.room-spec svg{width:18px;height:18px;stroke:var(--dark);fill:none;stroke-width:1.6;flex:0 0 auto;}
.room-price{
  font-family:var(--font-body);font-size:24px;font-weight:600;color:var(--dark);
  margin:6px 0 0;line-height:1.2;
}
.room-price span{font-size:14px;font-weight:400;color:var(--text);}
.room-aside .btn{margin-top:12px;align-self:flex-start;}

/* ==========================================================================
   Testimonials band
   ========================================================================== */
.testimonials{
  position:relative;
  border-radius:var(--radius);overflow:hidden;
  min-height:clamp(430px, 36vw, 680px);   /* 519px at the 1440 design width */
  display:flex;align-items:center;
  color:var(--white);
}
.testimonials > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.testimonials::after{content:"";position:absolute;inset:0;background:rgba(28,28,29,.55);}
.testimonials-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin-inline:auto;padding:60px 15px;
  display:flex;align-items:center;gap:60px;
}
/* With no quote column the score alone sits in the left third of a very wide band.
   Centre it instead — it is the only thing in there. */
.testimonials-inner--solo{justify-content:center;}
.testimonials-inner--solo .score{flex:0 1 auto;}

.score{flex:0 0 300px;text-align:center;}
.score-value{font-family:var(--font-head);font-size:96px;line-height:1;color:var(--white);}
.score .stars{margin:14px 0 8px;}
.score-count{font-size:15px;color:rgba(255,255,255,.8);}
.stars{display:flex;gap:5px;justify-content:center;color:var(--gold);font-size:20px;line-height:1;}
.stars--left{justify-content:flex-start;}

.quotes{flex:1 1 auto;position:relative;min-height:300px;}
.quote{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s var(--ease);
}
.quote.is-active{opacity:1;visibility:visible;position:relative;}
.quote blockquote{
  margin:18px 0 26px;
  font-family:var(--font-head);font-size:40px;line-height:1.3;color:var(--white);
}
.quote cite{font-style:normal;font-size:16px;font-weight:600;color:var(--white);}
.quote-dots{display:flex;gap:8px;margin-top:28px;}
.quote-dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.2);transition:background .3s var(--ease);}
.quote-dots button.is-active{background:var(--gold);}

/* ==========================================================================
   Facilities bento
   ========================================================================== */
.bento{
  display:grid;
  /* the image column is half the row, matching Rivora: 638 / 305 / 303 of 1304 */
  grid-template-columns:638fr 305fr 303fr;
  grid-template-rows:auto auto;
  gap:var(--gap);
}
.bento-main{
  grid-column:1;grid-row:1 / span 2;
  border-radius:var(--radius);overflow:hidden;
  /* one photo per apartment, a quarter each */
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;
}
.bento-main img{
  width:100%;height:100%;min-height:0;object-fit:cover;
  transition:transform .7s var(--ease);
}
.bento-main img:hover{transform:scale(1.04);}
.tile{
  background:var(--white);
  border-radius:var(--radius);
  padding:30px;
  display:flex;flex-direction:column;
  min-height:284px;
}
.tile-label{
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.tile-body{margin-top:auto;}
.tile-number{
  font-family:var(--font-head);font-size:60px;line-height:1;color:var(--dark);
  display:flex;align-items:baseline;gap:8px;
}
.tile-number .plus{color:var(--gold);font-size:44px;}
.tile-caption{margin:10px 0 0;font-size:16px;}
.bento-photo{border-radius:var(--radius);overflow:hidden;min-height:274px;}
.bento-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.bento-photo:hover img{transform:scale(1.05);}

/* ==========================================================================
   Offers
   ========================================================================== */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.offer{
  position:relative;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:414 / 813;
  display:flex;align-items:flex-end;
}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.offer:hover img{transform:scale(1.06);}
.offer-badge{
  position:absolute;top:24px;left:24px;z-index:3;
  background:var(--gold);color:var(--white);
  font-size:15px;font-weight:600;
  padding:8px 20px;border-radius:6px;
}
.offer-panel{
  position:relative;z-index:2;width:100%;
  padding:30px;
  background:rgba(28,28,29,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .35s var(--ease);
}
.offer:hover .offer-panel{background:rgba(28,28,29,.7);}
.offer-panel h3{font-size:26px;color:var(--white);margin:0 0 6px;}
.offer-panel p{margin:0;color:rgba(255,255,255,.82);font-size:16px;}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start;}
.faq-intro h2{font-size:48px;margin:0;}
.faq-list{display:flex;flex-direction:column;gap:15px;}
.faq-item{border-bottom:1px solid var(--line);padding-bottom:15px;}
.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-align:left;
  font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--dark);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--gold);}
.faq-q svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s var(--ease);}
.faq-item.is-open .faq-q svg{transform:rotate(180deg);}
.faq-a{overflow:hidden;height:0;transition:height .35s var(--ease);}
.faq-a p{margin:0;padding:12px 40px 6px 0;}

/* ==========================================================================
   Video
   ========================================================================== */
.video{
  position:relative;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1422 / 597;
  display:grid;place-items:center;
}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.video::after{content:"";position:absolute;inset:0;background:rgba(28,28,29,.12);}
.video-btn{
  position:relative;z-index:2;
  width:96px;height:96px;border-radius:100px;
  background:var(--gold);color:var(--white);
  display:grid;place-items:center;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.video-btn:hover{transform:scale(1.08);background:var(--dark);}
.video-btn svg{width:25px;height:25px;fill:currentColor;margin-left:4px;}

/* ==========================================================================
   Blog
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
/* nine guides land as 4+4+1 in the homepage grid; on their own page they get three
   across so the last row is full */
.journal-index{padding-top:56px;}
@media (min-width:1025px){
  .journal-index .posts{grid-template-columns:repeat(3,1fr);}
}
.post-media{display:block;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post:hover .post-media img{transform:scale(1.06);}
.post h3{font-size:26px;line-height:1.5;margin:30px 0 15px;}
.post h3 a{transition:color .25s var(--ease);}
.post h3 a:hover{color:var(--gold);}
.post p{margin:0;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--brown);
  color:rgba(255,255,255,.82);
  border-radius:var(--radius) var(--radius) 0 0;
  margin-top:40px;
}
.footer-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;
  padding:70px 15px 60px;
  max-width:var(--container);margin-inline:auto;
}
.footer-main h3{font-size:22px;color:var(--white);margin:0 0 14px;font-family:var(--font-body);font-weight:600;}
.footer-col{text-align:center;}
.footer-col p{margin:0;line-height:1.8;}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:18px;}
.footer-brand .brand-name{color:var(--white);font-size:26px;}
.socials{display:flex;gap:22px;}
.socials a{
  width:22px;height:22px;display:grid;place-items:center;
  color:rgba(255,255,255,.75);transition:color .25s var(--ease);
}
.socials a:hover{color:var(--gold);}
.socials svg{width:16px;height:16px;fill:currentColor;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;padding:24px 15px;font-size:15px;
}
.footer-bottom a{color:var(--white);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px){
  .room-media{flex-basis:320px;}
  .room-body{padding:28px 30px;}
  .room-aside{flex-basis:200px;}
  .hero-copy h1,
  .hero-copy .hero-title{font-size:52px;}
}

@media (max-width:1024px){
  :root{--section-pad:80px;}
  .section-head h2,.faq-intro h2{font-size:45px;}
  .hero-slider{min-height:620px;}
  .hero-copy h1,
  .hero-copy .hero-title{font-size:45px;}
  .hero-copy{margin-bottom:120px;}
  .booking{margin-top:-160px;}
  .booking-form{flex-wrap:wrap;justify-content:center;gap:24px 20px;padding:28px 24px;}
  .booking-field{flex:1 1 40%;}
  .booking-submit{flex:1 1 100%;display:flex;justify-content:center;}

  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,80vw);
    background:var(--white);z-index:70;
    transform:translateX(100%);transition:transform .35s var(--ease);
    padding:90px 24px;overflow-y:auto;
    box-shadow:-10px 0 40px rgba(28,28,29,.12);
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;}
  .main-nav > ul > li > a{padding:14px 6px;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;order:3;}
  .brand{width:auto;flex:1 1 auto;}
  .header-cta{width:auto;order:2;}

  .testimonials-inner{flex-direction:column;text-align:center;gap:36px;}
  .score{flex:0 0 auto;}
  .quotes{min-height:0;}
  .quote{position:relative;display:none;}
  .quote.is-active{display:block;}
  .quote blockquote{font-size:32px;}
  .stars--left{justify-content:center;}
  .quote-dots{justify-content:center;}

  .bento{grid-template-columns:1fr 1fr;}
  .bento-main{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/9;}
  .bento-main img{min-height:120px;}
  .posts{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;gap:36px;}
}

@media (max-width:767px){
  :root{--section-pad:60px;--anchor-gap:16px;}
  .section-head{margin-bottom:40px;}
  .section-head h2,.faq-intro h2{font-size:36px;}
  .hero{padding-top:20px;}
  .hero-slider{min-height:540px;}
  .hero-copy{padding:0 22px;margin-bottom:90px;}
  .hero-copy h1,
  .hero-copy .hero-title{font-size:36px;}
  .hero-copy p:not(.hero-title){padding:16px 22px;font-size:15px;}
  .hero-nav{width:42px;height:42px;}
  .hero-nav--prev{left:8px;}
  .hero-nav--next{right:8px;}

  .booking{margin-top:-120px;}
  .booking-form{gap:20px 16px;padding:24px 18px;}
  .booking-field{flex:1 1 calc(50% - 8px);}
  .booking-field > span{font-size:17px;}
  .booking-submit .btn{width:100%;}

  .room{flex-direction:column;}
  .room-media{flex-basis:auto;min-height:230px;}
  .room-body{padding:24px 20px 4px;}
  .room-aside{flex-basis:auto;padding:0 20px 24px;}
  .room-aside .btn{align-self:stretch;}

  .quote blockquote{font-size:26px;}
  .score-value{font-size:72px;}

  .bento{grid-template-columns:1fr;}
  .offers{grid-template-columns:1fr;}
  .offer{aspect-ratio:4/5;}
  .posts{grid-template-columns:1fr;}
  .video{aspect-ratio:16/10;}
  .video-btn{width:72px;height:72px;}

  .footer-main{grid-template-columns:1fr;text-align:center;gap:36px;padding:50px 15px 40px;}

  .brand-name{font-size:19px;}
  .brand svg{width:28px;height:28px;}
  .brand-mark{width:30px;height:30px;}
  .header-cta .btn{padding:10px 20px;font-size:14px;}
}

@media (max-width:400px){
  .brand-name{font-size:17px;}
  .brand-name small{font-size:9px;letter-spacing:.18em;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Apartment detail pages
   ========================================================================== */
.apt-gallery{
  --gallery-h:608px;               /* frame height, and the cap the photo fits inside */
  position:relative;
  background:var(--page);          /* gaps and end letterboxing read as page, not void */
  overflow:hidden;
}
.apt-track{
  display:flex;gap:0;align-items:stretch;
  height:var(--gallery-h);            /* the carousel sets the height … */
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.apt-track::-webkit-scrollbar{display:none;}
.apt-slide{
  flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:start;
  display:grid;place-items:center;    /* one photo at a time, centred in the frame */
}
.apt-slide img{
  /* scaled to fit the frame — a tall photo meets the top and bottom edges and
     sits centred, a wide one meets the sides. Never cropped. */
  width:auto;height:auto;
  max-width:100%;max-height:var(--gallery-h);
  border-radius:var(--radius);
}
.apt-gallery .hero-nav{top:calc(50% - 26px);background:rgba(28,28,29,.45);}
.apt-gallery .hero-nav:hover{background:var(--gold);}
.apt-gallery .hero-nav:disabled{opacity:.25;pointer-events:none;}
.apt-track:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;}


/* carousel left, details right, booking bar full width beneath */
.apt-split{
  display:grid;grid-template-columns:1.28fr 1fr;
  gap:56px;align-items:start;
}
.apt-split .apt-gallery{overflow:hidden;}
.apt-split .apt-gallery{--gallery-h:560px;}
.apt-reserve{padding-bottom:100px;}
.apt-reserve .booking-form{margin:0;}
.booking-price{flex:0 0 auto;}
.booking-price p{
  margin:0;font-family:var(--font-body);font-size:24px;font-weight:600;
  color:var(--dark);line-height:1.2;
}
.booking-price small{font-size:14px;font-weight:400;color:var(--text);}
.apt-reserve .reserve-fine{text-align:center;margin-top:16px;}
.apt-title{font-size:52px;color:var(--gold);margin:0 0 22px;}
.apt-specs{
  display:flex;flex-wrap:wrap;gap:10px 30px;
  margin:0 0 28px;padding:0;
}
.apt-specs li{display:flex;align-items:center;gap:9px;font-size:16px;}
.apt-specs svg{width:19px;height:19px;stroke:var(--dark);fill:none;stroke-width:1.6;flex:0 0 auto;}
.apt-body > p{margin:0 0 26px;}
.apt-body h2{font-size:26px;margin:0 0 20px;}
.apt-amenities{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;
  margin:0 0 44px;
}
.apt-amenities li{display:flex;align-items:center;gap:11px;font-size:16px;}
.apt-amenities svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2.4;flex:0 0 auto;}

.apt-note{
  border-left:2px solid var(--gold);
  padding:4px 0 4px 20px;margin:0 0 44px;
  font-size:15px;
}

/* --- reserve card --------------------------------------------------------- */
.reserve{
  background:var(--white);
  border:1px solid var(--gold);
  border-radius:var(--radius);
  padding:30px;
}
.reserve-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:26px;
}
.reserve-head h2{font-size:26px;color:var(--gold);margin:0;}
.reserve-from{font-size:15px;}
.reserve-from strong{font-family:var(--font-body);font-size:20px;font-weight:600;color:var(--gold);}
.reserve-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;}
.reserve-row--one{grid-template-columns:1fr;}   /* Adults alone, centred */
.reserve-field{text-align:center;}
.reserve-field > span{
  display:block;font-size:14px;font-weight:600;color:var(--gold);margin-bottom:8px;
}
.reserve-field input[type=date]{
  width:100%;border:1px solid var(--line);border-radius:6px;
  background:var(--white);text-align:center;
  font-family:var(--font-body);font-size:15px;color:var(--dark);
  padding:9px 6px;
}
.reserve-field input[type=date]:focus{outline:2px solid var(--gold);outline-offset:2px;}
.reserve .stepper{margin-top:0;}
.reserve .stepper button{border-radius:50%;background:var(--gold);color:var(--white);}
.reserve .stepper button:hover{background:var(--dark);}
.reserve-total{
  display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:6px;padding-top:22px;
}
.reserve-total span{font-family:var(--font-head);font-size:26px;color:var(--gold);}
.reserve-total strong{font-family:var(--font-body);font-size:24px;font-weight:600;color:var(--dark);}
.reserve .btn{width:100%;margin-top:20px;border-radius:5px;padding:14px 20px;}
.reserve-fine{margin-top:14px;font-size:13px;text-align:center;}

/* --- more apartments ------------------------------------------------------ */
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.more-card{
  background:var(--white);border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.more-card:hover{box-shadow:0 18px 45px rgba(28,28,29,.09);transform:translateY(-3px);}
.more-media{display:block;aspect-ratio:3/2;overflow:hidden;}
.more-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.more-card:hover .more-media img{transform:scale(1.05);}
.more-body{padding:24px 26px 28px;}
.more-body h3{font-size:26px;margin:0 0 6px;}
.more-body h3 a:hover{color:var(--gold);}
.more-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;margin:0 0 16px;}
.more-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.more-price{font-family:var(--font-body);font-size:22px;font-weight:600;color:var(--dark);}
.more-price span{font-size:14px;font-weight:400;color:var(--text);}

@media (max-width:1200px){
  .apt-gallery{--gallery-h:520px;}
}

@media (max-width:1024px){
  .apt-split{grid-template-columns:1fr;gap:40px;}
  .apt-split .apt-gallery{--gallery-h:440px;}
  .apt-title{font-size:45px;}
  .apt-gallery{--gallery-h:420px;}
  .more-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:767px){
  .apt-gallery{--gallery-h:300px;}
  .apt-title{font-size:36px;}
  .apt-amenities{grid-template-columns:1fr;gap:12px;}
  .apt-specs{gap:10px 20px;}
  .reserve{padding:24px 20px;}
  .more-grid{grid-template-columns:1fr;}
}

/* Under-construction notice sitting under either booking form. Deliberately not a
   quiet piece of fine print: it has to be read before someone fills the form in, not
   after they have picked dates and pressed the button. */
.booking-note{
  margin:18px auto 0;max-width:640px;text-align:center;
  font-size:14px;line-height:1.6;color:var(--text);
  background:var(--white);border:1px solid var(--gold);
  border-radius:var(--radius);padding:12px 20px;
}
.booking-note strong{color:var(--dark);}

/* Only the wide layout needs clearance. .booking is pulled 206px up over the hero
   photo and the form is a single row there, so it ends ~60px above the photo's
   bottom edge and anything smaller leaves this box straddling that edge. Below
   1025px the form stacks tall enough to clear the photo on its own, and the same
   margin would open a 200px hole instead. */
@media (min-width:1025px){
  .booking-note{margin-top:78px;}
}
@media (max-width:767px){
  .booking-note{font-size:13px;padding:11px 16px;}
}

/* ==========================================================================
   Journal articles
   ========================================================================== */
.journal-hero{
  /* max-width tracks .journal-body at every breakpoint so the banner and the body
     below it never sit on two different edges */
  width:100%;max-width:760px;margin:24px auto 0;padding-inline:15px;
  border-radius:var(--radius);overflow:hidden;
}
.journal-hero img{
  width:100%;height:auto;max-height:520px;object-fit:cover;
  border-radius:var(--radius);
}
.journal-body{max-width:760px;padding-block:64px 40px;}
.journal-body h1{font-size:48px;margin:0 0 20px;}
.journal-body p.journal-standfirst{
  font-size:20px;line-height:1.6;color:var(--dark);
  margin:0 0 32px;padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.journal-body p{margin:0 0 22px;font-size:17px;line-height:1.8;}
.journal-figure{margin-bottom:34px;}
.journal-figure img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
}
.journal-figure figcaption{
  margin-top:10px;font-size:14px;line-height:1.6;color:var(--text);
  max-width:620px;   /* a caption set to the full 1040px is unreadable */
}
/* --wide / --tall come from the file's real dimensions in CREDITS.json, so a
   portrait photo is never asked to behave like a landscape one.

   A wide figure breaks out of the 760px text column to the 1040px box its
   derivative was cut for — that outset is most of what makes a page read as an
   article rather than a blog post. It is a plain negative margin against the
   column, no viewport units, so a scrollbar cannot push it into overflow; below
   1120px there is no room to outset into and it simply fills the column. */
.journal-figure--wide{
  width:880px;margin-inline:calc((100% - 880px) / 2);
}
.journal-figure--tall img,
.journal-figure--tall figcaption{max-width:400px;margin-inline:auto;}
/* A pair of photographs side by side. On a phone they stack and stay in reading
   order, so the markup needs no variant. Inside a pair a figure gives up its own
   outset: the pair itself carries the 880px break, and the two images share it. */
/* Pull quote. Set in the heading face at display size with a gold rule above, so
   it reads as a break in the page rather than another paragraph. The text is always
   a line lifted from the article itself, which is what a pull quote is. */
.journal-pull{
  margin:34px 0;padding-top:24px;border-top:2px solid var(--gold);
}
.journal-pull p{
  font-family:var(--font-head);font-size:26px;line-height:1.28;
  color:var(--dark);margin:0;
}

.journal-pair{display:grid;gap:14px;margin-bottom:34px;align-items:start;}
.journal-pair .journal-figure{margin-bottom:0;}
/* Both paired photos are cut 3:2, so fixing the ratio makes the two images exactly
   the same height without cropping either. Stretching them to fill the grid row
   instead (height:100%) squeezes the caption out of the cell. */
/* only the landscape ones: forcing 3:2 on a portrait in a pair would crop exactly
   what the --wide/--tall split exists to prevent */
.journal-pair .journal-figure--wide img{aspect-ratio:3 / 2;object-fit:cover;}
.journal-pair figcaption{max-width:none;}

@media (max-width:960px){
  .journal-figure--wide{width:100%;margin-inline:0;}
}
.journal-credits{
  margin:36px 0 22px;padding-top:20px;border-top:1px solid var(--line);
}
/* One Photographs list per article rather than a line per photo — every licence
   here wants the author and a link for each, and the heading stops the stack
   reading as body copy. */
.journal-credits h2{font-size:16px;margin:0 0 10px;}
.journal-credits ul{margin:0;padding:0;list-style:none;}
.journal-credits li{font-size:14px;line-height:1.7;color:var(--text);}
.journal-back{margin:8px 0 0;}
.journal-back a{font-weight:600;color:var(--gold);}
.journal-back a:hover{color:var(--dark);}

/* Desktop reads as an article rather than a page of text: a measure of roughly
   68 characters instead of 90, type a couple of steps up to match, and a lead
   paragraph that hands off to the body. Scoped to >=900px so the phone layout,
   which is already right, is left exactly as it is. */
@media (min-width:900px){
  /* The banner is one of the article's photographs, not a masthead, so it takes the
     same 880px box and the same left edge as every figure below it. Same 910px cap
     and 15px inset as .journal-body, which is what puts the two edges together. */
  .journal-hero{max-width:910px;margin:32px auto 0;}
  .journal-hero img{max-height:460px;}
  /* Text and photographs share one left edge. The body box is the full 880px the
     figures occupy, and the prose is capped at a 660px measure inside it, so a
     paragraph starts exactly where the picture above it starts instead of being
     centred inside the outset. The existing
     `margin-inline:calc((100% - 880px) / 2)` on a wide figure resolves to 0 here
     by itself, because 100% is now 880px. */
  .journal-body{max-width:910px;padding-block:76px 48px;}
  .journal-body > *:not(.journal-figure):not(.journal-pair){max-width:660px;}
  .journal-body h1{
    font-size:58px;line-height:1.08;letter-spacing:-.015em;margin:0 0 24px;
  }
  .journal-body p.journal-standfirst{
    font-size:22px;line-height:1.55;margin:0 0 42px;padding-bottom:34px;
  }
  .journal-body p{font-size:19px;line-height:1.75;margin:0 0 28px;}
  /* the opening paragraph, one step up again */
  .journal-standfirst + p{font-size:21px;line-height:1.68;color:var(--dark);}
  .journal-body h2{font-size:30px;margin:52px 0 18px;}
  .journal-figure{margin-bottom:40px;}
  .journal-figure figcaption{margin-top:12px;}
  .journal-credits{margin-top:52px;}
  .journal-pair{
    grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px;
    width:880px;margin-inline:calc((100% - 880px) / 2);
  }
  .journal-pair .journal-figure--wide,
  .journal-pair .journal-figure--tall{width:auto;margin-inline:0;}
  .journal-pair .journal-figure--tall img,
  .journal-pair .journal-figure--tall figcaption{max-width:none;margin-inline:0;}
  .journal-figure--tall img,
  .journal-figure--tall figcaption{margin-inline:0;}
  /* Drop cap on the opening paragraph. Only where the article actually opens with
     prose, which the eating guide does not: it opens on a section heading. */
  .journal-pull{margin:46px 0;padding-top:28px;}
  .journal-pull p{font-size:34px;line-height:1.22;}
  .journal-standfirst + p::first-letter{
    float:left;font-family:var(--font-head);font-size:74px;line-height:.76;
    margin:9px 12px 0 0;color:var(--dark);
  }
}

@media (max-width:1024px){
  .journal-body h1{font-size:40px;}
  .journal-body{padding-block:48px 32px;}
}
@media (max-width:767px){
  .journal-body h1{font-size:32px;}
  .journal-body p.journal-standfirst{font-size:18px;}
  .journal-hero img{max-height:280px;}
  .journal-figure--tall img,
  .journal-figure--tall figcaption{max-width:none;}
}

/* ==========================================================================
   Location
   ========================================================================== */
.location-grid{
  display:grid;grid-template-columns:1.55fr 1fr;gap:var(--gap);
  align-items:stretch;
}
.location-map{
  border-radius:var(--radius);overflow:hidden;
  min-height:460px;background:#e8e6e3;
}
.location-map iframe{
  display:block;width:100%;height:100%;min-height:460px;border:0;
  filter:saturate(.82) contrast(1.03);   /* softens Google's default palette */
}

.location-card{
  background:var(--white);
  border:1px solid var(--gold);
  border-radius:var(--radius);
  padding:38px 34px;
  display:flex;flex-direction:column;
}
.location-card h3{font-size:26px;margin:0 0 14px;}
.location-card address{
  font-style:normal;font-size:17px;line-height:1.8;color:var(--text);
  padding-bottom:24px;margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.location-list{display:flex;flex-direction:column;gap:16px;margin-bottom:30px;}
.location-list li{display:flex;align-items:flex-start;gap:13px;font-size:16px;line-height:1.6;}
.location-list strong{color:var(--dark);font-weight:600;}
.location-list svg{
  width:21px;height:21px;flex:0 0 auto;margin-top:1px;
  fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.location-card .btn{align-self:flex-start;margin-top:auto;}

@media (max-width:1024px){
  .location-grid{grid-template-columns:1fr;}
  .location-map,.location-map iframe{min-height:380px;}
  .location-card{padding:32px 28px;}
}
@media (max-width:767px){
  .location-map,.location-map iframe{min-height:300px;}
  .location-card{padding:26px 22px;}
  .location-card .btn{align-self:stretch;text-align:center;justify-content:center;}
}

/* article sub-headings and the closing note */
.journal-body h2{
  font-size:26px;margin:38px 0 16px;
  padding-top:10px;
}
.journal-body h2:first-of-type{margin-top:28px;}
.journal-body p.journal-note{
  margin-top:34px;padding:20px 24px;
  background:var(--white);border-radius:var(--radius);
  border-left:2px solid var(--gold);
  font-size:16px;
}

/* ==========================================================================
   Date range picker — structure and colours follow Rivora's daterangepicker
   ========================================================================== */
.rp-host{position:relative;}
.rp-input{
  width:100%;border:0;background:transparent;text-align:center;cursor:pointer;
  font-family:var(--font-body);font-size:16px;color:var(--text);padding:4px 0;
}
.rp-input::placeholder{color:#a9a6a2;}
.rp-input:focus{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;}

.rp{
  position:absolute;z-index:80;top:calc(100% + 14px);left:0;
  background:var(--white);
  border:1px solid #e2e0dd;border-radius:14px;
  box-shadow:0 18px 50px rgba(28,28,29,.16);
  padding:22px 24px;
  font-family:var(--font-body);
}
.rp[hidden]{display:none;}
.rp::before,.rp::after{content:"";position:absolute;left:44px;border:8px solid transparent;}
.rp::before{top:-16px;border-bottom-color:#e2e0dd;}
.rp::after{top:-15px;border-bottom-color:var(--white);}

.rp-months{display:flex;gap:34px;}
.rp-month{width:266px;}
.rp-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;min-height:28px;
}
.rp-title{
  font-family:var(--font-head);font-size:17px;color:var(--dark);
  flex:1 1 auto;text-align:center;
}
.rp-nav{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;color:var(--dark);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.rp-nav:hover{background:var(--gold);color:var(--white);}
.rp-nav:disabled{opacity:.25;pointer-events:none;}
.rp-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.rp-nav--spacer{visibility:hidden;}

.rp table{border-collapse:collapse;width:100%;}
.rp th{
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--dark);
  padding-bottom:10px;width:38px;
}
.rp td{
  font-size:14px;text-align:center;height:38px;
  border:1px solid transparent;cursor:pointer;
  color:var(--dark);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.rp td.is-off{color:#999;cursor:default;}
.rp td.is-disabled{color:#c9c6c2;cursor:not-allowed;}
.rp td.is-today{font-weight:700;}
/* hover reads the same as a chosen date, so the cursor previews the pick */
.rp td:not(.is-off):not(.is-disabled):not(.in-range):not(.is-start):not(.is-end):hover{
  background:var(--gold);color:var(--white);border-radius:4px;
}
.rp td.in-range:hover{background:var(--gold);color:var(--white);}   /* keeps the square range edges */

/* the range fill, and the two endpoints in the site's accent */
.rp td.in-range{background:rgba(53,126,189,.9);color:var(--white);border-radius:0;}
.rp td.is-start,.rp td.is-end{background:var(--gold);color:var(--white);}
.rp td.is-start{border-radius:4px 0 0 4px;}
.rp td.is-end{border-radius:0 4px 4px 0;}
.rp td.is-start.is-end{border-radius:4px;}
.rp td.is-start:hover,.rp td.is-end:hover{background:var(--gold);}

.rp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--text);
}
.rp-clear{font-weight:600;color:var(--gold);}
.rp-clear:hover{color:var(--dark);}

@media (max-width:900px){
  .rp{padding:18px;}
  .rp::before,.rp::after{left:28px;}
  .rp-months{gap:0;}
  .rp-month:last-child{display:none;}   /* one month on small screens */
  .rp-month{width:250px;}
}