/* The Bay Interiors by Missoni — sections added from the official presales brochure (Oct 2026) */

/* renders are shown whole: residence cards use the 2:1 renders at their own ratio,
   the 4-bed panorama sits letterboxed rather than cropped */
.res-card-media img{aspect-ratio:2/1;object-fit:cover}
.res-card-media--pano{display:grid;place-items:center;aspect-ratio:2/1;background:var(--charcoal)}
.res-card-media--pano img{aspect-ratio:auto;height:auto;object-fit:contain}
.bx-size{font-family:var(--sans)!important;font-size:.72rem!important;font-weight:500!important;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)!important;margin:0 0 .7rem!important;flex:0!important}

/* amenity carousel: fixed height, each card as wide as its render, so nothing is cropped */
.am-card{aspect-ratio:var(--ar,.76);flex:0 0 auto;height:clamp(300px,34vw,520px);width:auto}
.am-card img{width:100%;height:100%;object-fit:contain}
@media (max-width:760px){.am-card{height:auto;width:min(86vw,520px);flex-basis:auto}}

/* starting price under the about copy */
.bx-price{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line-d)}
.bx-price span{font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.bx-price strong{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;color:var(--text)}

/* =================================================== project details redesign */
.bx-details{
  background:var(--snow);
  position:relative;
  overflow:hidden;
  padding:clamp(5rem,8vw,7.5rem) 0;
}
.bx-details-header{
  max-width:760px;
  margin-inline:auto;
  margin-bottom:clamp(2.5rem,5vw,3.8rem);
}
.bx-details-sub{
  margin-top:1rem;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.7;
  color:var(--body);
}

/* Key Metrics Ribbon */
.bx-metrics-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-bottom:clamp(2.5rem,4.5vw,3.5rem);
}
.bx-metric-card{
  position:relative;
  background:#ffffff;
  padding:clamp(1.5rem,2.4vw,2.2rem) 1.5rem 1.6rem;
  border:1px solid rgba(26,28,31,.07);
  border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(8,14,22,.03);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  display:flex;
  flex-direction:column;
}
.bx-metric-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(8,14,22,.08);
  border-color:rgba(184,160,120,.45);
}
.bx-metric-num{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  font-family:var(--display);
  font-size:1.1rem;
  font-weight:500;
  color:var(--champagne);
  opacity:.55;
  letter-spacing:.05em;
}
.bx-metric-label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:.6rem;
}
.bx-metric-val{
  font-family:var(--display);
  font-size:clamp(1.65rem,2.2vw,2.25rem);
  font-weight:500;
  line-height:1.15;
  color:var(--text);
  margin-bottom:.5rem;
}
.bx-metric-desc{
  font-size:.82rem;
  line-height:1.5;
  color:var(--body);
  margin-top:auto;
}

/* Bento Spec Grid */
.bx-bento-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  align-items:stretch;
}
.bx-bento-card{
  background:#ffffff;
  border:1px solid rgba(26,28,31,.07);
  border-radius:var(--radius);
  padding:clamp(1.75rem,2.8vw,2.4rem);
  box-shadow:0 4px 20px rgba(8,14,22,.03);
  display:flex;
  flex-direction:column;
  height:100%;
  align-self:stretch;
  min-height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.bx-bento-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(8,14,22,.07);
  border-color:rgba(184,160,120,.35);
}
.bx-bento-card-header{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-bottom:1.4rem;
  margin-bottom:1.4rem;
  border-bottom:1px solid var(--line-d);
}
.bx-bento-icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:var(--snow);
  color:var(--champagne);
  border-radius:50%;
  border:1px solid rgba(184,160,120,.25);
}
.bx-bento-tag{
  display:block;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:.2rem;
}
.bx-bento-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.2rem,1.4vw,1.4rem);
  font-weight:500;
  line-height:1.2;
  color:var(--text);
}

/* Spec List inside Bento */
.bx-spec-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:1.15rem;
}
.bx-spec-list li{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(26,28,31,.06);
}
.bx-spec-list li:last-child{
  padding-bottom:0;
  border-bottom:none;
}
.bx-spec-key{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
}
.bx-spec-val{
  font-family:var(--display);
  font-size:clamp(1.05rem,1.25vw,1.25rem);
  font-weight:500;
  line-height:1.35;
  color:var(--text);
}

/* Investment / Payment Card special styles */
.bx-bento-investment{
  background:linear-gradient(170deg,#ffffff 0%,#fbf9f6 100%);
  border-color:rgba(184,160,120,.28);
}
.bx-payment-track{
  margin-top:.5rem;
  margin-bottom:1.8rem;
}
.bx-pay-split{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
}
.bx-pay-phase{
  text-align:left;
}
.bx-pay-phase:last-child{
  text-align:right;
}
.bx-phase-pct{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.2rem,3.2vw,2.85rem);
  font-weight:500;
  line-height:1;
  color:var(--champagne);
}
.bx-phase-title{
  display:block;
  margin-top:.35rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
}
.bx-phase-sub{
  display:block;
  font-size:.74rem;
  color:var(--body);
  margin-top:.2rem;
}
.bx-pay-divider{
  width:1px;
  height:48px;
  background:var(--line-d);
}
.bx-track-bar{
  display:flex;
  height:28px;
  background:var(--snow);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(26,28,31,.08);
  padding:3px;
  gap:3px;
}
.bx-bar-segment{
  height:100%;
  background:var(--charcoal);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
}
.bx-bar-segment.is-gold{
  background:linear-gradient(90deg,#b8a078,#cbb592);
  color:#ffffff;
}
.bx-bento-cta{
  margin-top:auto;
  padding-top:1.2rem;
}
.bx-bento-cta .btn{
  width:100%;
  justify-content:center;
  font-size:.72rem;
  letter-spacing:.16em;
  padding:.85rem 1.25rem;
}

/* Responsive adjustments */
@media (max-width:1080px){
  .bx-metrics-bar{
    grid-template-columns:repeat(2,1fr);
  }
  .bx-bento-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:600px){
  .bx-metrics-bar{
    grid-template-columns:1fr;
  }
  .bx-pay-split{
    grid-template-columns:1fr;
    gap:1.2rem;
    text-align:left;
  }
  .bx-pay-phase:last-child{
    text-align:left;
  }
  .bx-pay-divider{
    display:none;
  }
}

/* typical floor plan */
.bx-floor{margin:clamp(2.5rem,5vw,4rem) 0 0;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;background:#fff;border:1px solid rgba(26,28,31,.08);padding:clamp(1rem,2.5vw,2rem)}
.bx-floor img{width:100%;height:auto;display:block}
.bx-floor figcaption{display:flex;flex-direction:column;gap:.7rem;font-size:.9rem;color:var(--body)}
.bx-floor figcaption strong{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--text);margin-bottom:.3rem}
.bx-floor figcaption span{padding-bottom:.7rem;border-bottom:1px solid var(--line-d)}
@media (max-width:900px){.bx-floor{grid-template-columns:1fr}}

/* marina stats */
.bx-stats{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d)}
.bx-stats li{padding:1.2rem .6rem 0 0}
.bx-stats strong{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:500;line-height:1;color:var(--text)}
.bx-stats span{display:block;margin-top:.5rem;font-size:.7rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media (max-width:560px){.bx-stats{grid-template-columns:1fr 1fr;row-gap:1rem}}

/* deck plans + amenity lists */
.bx-decks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,6vw,4.5rem)}
.bx-deck figure{margin:0 0 1.4rem;background:#fff;border-radius:var(--radius);padding:1rem}
.bx-deck figure img{width:100%;height:auto;display:block}
.bx-deck h3{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2vw,1.8rem);margin:0 0 1rem}
.bx-amlist{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.bx-amlist li{display:flex;justify-content:space-between;gap:1rem;break-inside:avoid;padding:.55rem 0;border-bottom:1px solid currentColor;border-color:rgba(127,127,127,.25);font-size:.88rem}
.bx-amlist em{font-style:normal;opacity:.65;white-space:nowrap}
.bx-note{margin-top:1.2rem;font-size:.85rem;opacity:.75}
@media (max-width:860px){.bx-decks{grid-template-columns:1fr}}
@media (max-width:480px){.bx-amlist{columns:1}}

/* the connectivity map is wide 16:9 — allow full container width */
.location-map{max-width:1100px;margin-inline:auto}

/* ---- footer: centred brand, inline nav, centred disclaimer, bottom bar ---- */
.bf{padding:clamp(4rem,7vw,5.5rem) 0 0;text-align:center;color:rgba(247,244,239,.65)}
.bf-brand{display:flex;flex-direction:column;align-items:center}
.bf-logo{height:clamp(46px,5vw,64px);width:auto}
.bf-tag{margin:1.2rem 0 0;font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.25rem);color:rgba(247,244,239,.8)}
.bf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem;margin:clamp(2rem,4vw,2.8rem) auto 0;padding-bottom:clamp(2rem,4vw,2.8rem);border-bottom:1px solid var(--line);max-width:900px}
.bf-nav a{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(247,244,239,.75);transition:color .3s}
.bf-nav a:hover{color:var(--champagne-lt)}
.bf-disclaimer{max-width:860px;margin:clamp(2rem,4vw,2.6rem) auto 0}
.bf-label{display:inline-block;margin-bottom:.9rem;font-size:.64rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)}
.bf-disclaimer p{margin:0 auto;font-size:.78rem;line-height:1.85;color:rgba(247,244,239,.5)}
.bf-disclaimer p+p{margin-top:.8rem}
.bf-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.3rem;padding-bottom:1.6rem;border-top:1px solid var(--line);font-size:.74rem;color:rgba(247,244,239,.45)}
.bf-top{color:var(--champagne-lt);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.bf-top:hover{color:#fff}
@media (max-width:560px){.bf-bottom{justify-content:center;text-align:center}.bf-nav{gap:.7rem 1.3rem}}
/* corner Register button sits over the footer, so leave room under the bar */
.bf{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}

/* ---- floor plans slider ---- */
.fp-section{background:var(--snow)}
.fp-slider{margin-top:clamp(2rem,4vw,3rem);position:relative}
.fp-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.fp-tab{border:1px solid rgba(26,28,31,.15);background:transparent;padding:.7rem 1.3rem;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--body);cursor:pointer;transition:all .3s var(--ease)}
.fp-tab:hover{border-color:var(--champagne);color:var(--text)}
.fp-tab.is-active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
/* overflow-y:clip keeps this a horizontal scroller only, so a vertical
   wheel or trackpad gesture over the plan scrolls the page */
.fp-viewport{overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;scrollbar-width:none;outline:0;touch-action:pan-y;overscroll-behavior-y:auto}
.fp-viewport::-webkit-scrollbar{display:none}
.fp-track{display:flex}
.fp-slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;background:#fff;border:1px solid rgba(26,28,31,.08);padding:clamp(1rem,2.5vw,2.2rem)}
.fp-plan{margin:0;display:flex;align-items:center;justify-content:center;min-height:clamp(280px,40vw,560px)}
.fp-plan img{width:100%;height:auto;max-height:560px;object-fit:contain;display:block}
.fp-count{font-family:var(--display);font-size:1rem;color:var(--champagne)}
.fp-info h3{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;margin:.4rem 0 .3rem;color:var(--text)}
.fp-sub{display:block;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:1.3rem}
.fp-list{columns:1;color:var(--body)}
.fp-slide:nth-child(2) .fp-list{columns:2}
.fp-controls{display:flex;justify-content:center;gap:.8rem;margin-top:1.4rem}
.fp-arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(26,28,31,.2);background:#fff;display:grid;place-items:center;cursor:pointer;transition:all .3s var(--ease)}
.fp-arrow svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:1.6}
.fp-arrow:hover{background:var(--charcoal);border-color:var(--charcoal)}
.fp-arrow:hover svg{stroke:#fff}
@media (max-width:900px){.fp-slide{grid-template-columns:1fr}.fp-plan{min-height:0}}
@media (max-width:480px){.fp-slide:nth-child(2) .fp-list{columns:1}.fp-tab{padding:.6rem .8rem;letter-spacing:.14em}}
/* bedroom-type slides: plan crops are portrait-ish, keep them at a readable size */
.fp-slide--unit .fp-plan img{max-height:520px;width:auto;max-width:100%}
.fp-slide--unit .fp-list em{font-style:normal;color:var(--text);opacity:1}
.fp-note{margin-top:1.1rem;font-size:.78rem;color:var(--mute)}
.fp-tabs{max-width:1000px;margin-inline:auto}
@media (max-width:700px){.fp-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}.fp-tabs::-webkit-scrollbar{display:none}.fp-tab{flex:none}}
/* each slide keeps its own height (no empty space under short slides) */
.fp-track{align-items:flex-start}


/* ---- FAQ: Sei Saadiyat design — centred heading, one column of bordered cards,
   tinted open card with a gold spine ---- */
.fqx-shell{max-width:960px;margin-inline:auto}
.fqx-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.fqx-head .fqx-heading{margin:1.1rem 0 0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.06}
.fqx-shell .fqx-list{border-top:0;max-width:none}
.fqx-shell .fqx-item{
  position:relative;border:1px solid rgba(26,28,31,.09);border-radius:var(--radius);
  background:rgba(255,255,255,.5);margin-bottom:.6rem;overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.fqx-shell .fqx-item:hover{border-color:rgba(184,160,120,.4)}
.fqx-shell .fqx-item.fqx-open{border-color:rgba(184,160,120,.5);background:var(--ivory-2);box-shadow:0 14px 34px -22px rgba(26,28,31,.4)}
.fqx-shell .fqx-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--champagne);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.fqx-shell .fqx-item.fqx-open::before{transform:scaleY(1)}
.fqx-shell .fqx-item-line{display:none}
.fqx-shell .fqx-btn{padding:1.25rem 1.5rem}
.fqx-shell .fqx-q-text{font-family:var(--display);font-size:clamp(1.18rem,1.8vw,1.45rem);font-weight:600;line-height:1.3;letter-spacing:0;color:var(--text)}
.fqx-shell .fqx-answer-inner p{padding:0 1.5rem 1.6rem;padding-left:calc(3rem + 1.5rem);max-width:72ch;font-size:.93rem;line-height:1.85;color:var(--body)}
@media (max-width:560px){.fqx-shell .fqx-answer-inner p{padding-left:1.5rem}}

/* ---- brochure pages (building structure, corridor): full-width, edge to edge ---- */
.bx-figure-sec{background:#f2eee8;padding:0}
.bx-figure{margin:0}
.bx-figure img{width:100%;height:auto;display:block}

/* ---- payment plan (Sei Saadiyat layout, Bay palette) ---- */
.pay-sec{background:var(--charcoal);color:var(--snow)}
.pay-head{max-width:60rem;margin-inline:auto;text-align:center}
.pay-head .eyebrow{color:var(--champagne-lt)}
.pay-head .title{margin:.75rem 0 1.15rem;color:#fff}
.pay-head .prose{color:rgba(247,244,239,.65);max-width:56ch;margin-inline:auto}
.pay-bar{display:flex;width:100%;height:6px;margin-top:clamp(2.5rem,5vw,3.75rem);border-radius:99px;overflow:hidden;background:rgba(247,244,239,.08)}
.pay-bar span{display:block;height:100%;width:50%}
.pay-bar span:nth-child(1){background:var(--champagne-lt)}
.pay-bar span:nth-child(2){background:rgba(184,160,120,.45)}
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.6rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.pay-card{position:relative;overflow:hidden;padding:clamp(1.9rem,2.8vw,2.6rem) clamp(1.4rem,2vw,1.9rem);border:1px solid var(--line);border-radius:var(--radius);background:rgba(8,14,22,.4);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.pay-card::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--champagne);transition:width .7s var(--ease)}
.pay-card:hover{transform:translateY(-4px);border-color:rgba(184,160,120,.42)}
.pay-card:hover::before{width:100%}
.pay-pct{display:block;font-family:var(--display);font-weight:500;font-size:clamp(3rem,5.4vw,4.2rem);line-height:1;color:var(--champagne-lt)}
.pay-stage{display:block;margin-top:1rem;font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.pay-card p{margin:.85rem 0 0;font-size:.875rem;line-height:1.75;color:rgba(247,244,239,.62)}
.pay-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem 1.5rem;margin:clamp(2.25rem,4vw,3rem) 0 0;padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid var(--line)}
.pay-note dt{font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.5)}
.pay-note dd{margin:0 2rem 0 0;font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-lt)}
@media (max-width:700px){.pay-grid{grid-template-columns:1fr}.pay-note dd{margin-right:0}}
@media (prefers-reduced-motion:reduce){.pay-card:hover{transform:none}}

/* ---- gallery: justified rows, every render whole ---- */
.gl-sec{background:var(--ivory)}
.gl{margin-top:clamp(2rem,4vw,3rem)}
.gl-row{display:grid;gap:clamp(.6rem,1.2vw,1rem)}
.gl-row+.gl-row{margin-top:clamp(.6rem,1.2vw,1rem)}
.gl-item{margin:0;min-width:0}
.gl-open{display:block;width:100%;padding:0;border:0;background:var(--charcoal);cursor:zoom-in;overflow:hidden}
.gl-open img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.gl-open:hover img{transform:scale(1.03)}
.gl-item figcaption{margin-top:.55rem;font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
@media (max-width:700px){.gl-row{grid-template-columns:1fr!important}}
.gl-box{position:fixed;inset:0;z-index:1200;background:rgba(8,14,22,.94);display:flex;align-items:center;justify-content:center;padding:4rem 4.5rem}
.gl-box[hidden]{display:none}
.gl-box figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.gl-box img{max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;display:block}
.gl-box figcaption{margin-top:.9rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.gl-x{position:absolute;top:1rem;right:1.2rem;width:44px;height:44px;border:0;background:none;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.gl-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
.gl-nav svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}
.gl-prev{left:1rem}.gl-next{right:1rem}
@media (max-width:700px){.gl-box{padding:3.5rem .8rem}.gl-nav{top:auto;bottom:1rem;transform:none}.gl-prev{left:30%}.gl-next{right:30%}}

/* building structure: same look as the corridor page — brochure paper, centred icon + spaced title */
.bs-sec{background:#f3efe9 padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.bs-head{text-align:center;max-width:620px}
.bs-icon{width:64px;height:48px;display:block;margin:0 auto 1.6rem}
.bs-title{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:.2em;text-transform:uppercase;color:#1f4a73}
.bs-head p{margin:1.1rem auto 0;font-size:.95rem;line-height:1.75;color:#1f4a73}
.bs-figure{max-width:1100px;margin:clamp(1.5rem,3vw,2.5rem) auto 0;padding-inline:1rem}
/* match the image's own paper tone and let its edges melt into it */
.bs-sec{background:linear-gradient(180deg,#f7f3ee 0%,#f4f0ea 55%,#efeae4 100%)}
.bs-figure img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-composite:intersect;
}

/* ---- gallery slider: each render shown whole on a dark stage ---- */
.gs{margin-top:clamp(2rem,4vw,3rem)}
.gs-stage{position:relative;background:var(--charcoal);border-radius:var(--radius)}
.gs-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:0}
.gs-viewport::-webkit-scrollbar{display:none}
.gs-track{display:flex}
.gs-slide{flex:0 0 100%;scroll-snap-align:start;margin:0;height:clamp(300px,62vw,760px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.8rem,2vw,1.5rem)}
.gs-slide img{max-width:100%;max-height:calc(100% - 2.2rem);width:auto;height:auto;object-fit:contain;display:block}
.gs-slide figcaption{margin-top:.8rem;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.gs-slide figcaption span{color:var(--champagne-lt);margin-right:1rem}
.gs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(8,14,22,.45);display:grid;place-items:center;cursor:pointer;transition:background .3s}
.gs-arrow:hover{background:var(--champagne)}
.gs-arrow svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}
.gs-prev{left:1rem}.gs-next{right:1rem}
.gs-thumbs{display:flex;gap:.6rem;margin-top:.9rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
.gs-thumbs::-webkit-scrollbar{display:none}
.gs-thumb{flex:0 0 auto;height:72px;padding:0;border:2px solid transparent;background:var(--charcoal);cursor:pointer;opacity:.55;transition:opacity .3s,border-color .3s}
.gs-thumb img{height:100%;width:auto;display:block}
.gs-thumb.is-active,.gs-thumb:hover{opacity:1}
.gs-thumb.is-active{border-color:var(--champagne)}
@media (max-width:700px){.gs-slide{height:auto;min-height:0}.gs-slide img{max-height:none}.gs-arrow{width:40px;height:40px}.gs-prev{left:.4rem}.gs-next{right:.4rem}.gs-thumb{height:56px}}

/* ---- why invest ---- */
.wi-sec{background:var(--ivory-2)}
.wi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,4vw,3rem)}
.wi-card{background:#fff;border:1px solid rgba(26,28,31,.07);border-radius:var(--radius);padding:clamp(1.6rem,2.6vw,2.2rem);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.wi-card:hover{transform:translateY(-4px);border-color:rgba(184,160,120,.45);box-shadow:0 18px 40px rgba(14,27,42,.08)}
.wi-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(184,160,120,.55)}
.wi-icon svg{width:24px;height:24px;fill:none;stroke:var(--champagne);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.wi-card h3{margin:1.2rem 0 .6rem;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.2;color:var(--text)}
.wi-card p{margin:0;font-size:.9rem;line-height:1.75;color:var(--body)}
@media (max-width:900px){.wi-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wi-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wi-card:hover{transform:none}}
@media (max-width:700px){.gs-slide{height:min(78vw,420px)}.gs-slide img{max-height:calc(100% - 2.2rem)}}
/* all gallery renders share one proportion now: size the stage to it */

.gs-slide{height:auto;aspect-ratio:1.78}
.gs-slide img{max-height:calc(100% - 2.2rem)}

/* gallery without the dark box: the render itself fills the slider */
.gs-stage{background:none;border-radius:0}
.gs-track{align-items:flex-start}
.gs-slide{aspect-ratio:auto;height:auto;padding:0;display:block}
.gs-slide img{width:100%;height:auto;max-height:none;max-width:none}
.gs-slide figcaption{color:var(--mute);text-align:center}
.gs-slide figcaption span{color:var(--champagne)}
.gs-arrow{top:calc(50% - 1.1rem);background:rgba(8,14,22,.35);border-color:rgba(255,255,255,.5)}
@media (max-width:700px){.gs-slide{height:auto}.gs-slide img{max-height:none}}

/* intro line under each section heading */
.sec-lede{max-width:64ch;margin:1rem auto 0;text-align:center;color:var(--body)}
.location .sec-lede,.pay-sec .sec-lede{color:rgba(247,244,239,.65)}

/* ---- audit fixes (1 Oct 2026) ---- */
.fp-viewport{transition:height .45s var(--ease)}
.fp-track{align-items:flex-start}

/* amenity carousel on phones: card matches the render, no dark strip */
@media (max-width:760px){
  .am-card{aspect-ratio:var(--ar,1.6);height:auto;width:min(86vw,520px)}
  .am-card img{object-fit:cover}
}

/* iOS Safari zooms into any field under 16px */
.field input,.field select,.enquire .field input,.enquire .field select,.modal .field input,.modal .field select,.dial-search{font-size:16px}

/* comfortable tap targets for menu links */
.bf-nav a,.mobile-nav a{display:inline-block;padding:.65rem .2rem}
.res-cta{padding-block:.6rem}
@media (max-width:960px){.nav-links a{padding-block:.6rem}}
.modal .fields input:not(.hp),.modal .fields select,.form-card input:not(.hp),.form-card select{font-size:16px!important}
.bf-top{display:inline-block;padding:.6rem 0}

/* phone menu sits under the header so the menu button (☰ → ✕) stays visible */
.mobile-nav{z-index:890}

/* thank-you pop-up */
.thanks-panel{max-width:460px}
.thanks-body{text-align:center;display:flex;flex-direction:column;align-items:center}
.thanks-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--champagne);margin-bottom:1.3rem}
.thanks-mark svg{width:28px;height:28px;fill:none;stroke:var(--champagne);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.thanks-body .title{margin:.5rem 0 .8rem}
.thanks-msg{font-size:.95rem;line-height:1.75;color:var(--body);margin:0 0 1.6rem}
.thanks-download{margin:0 0 .75rem}
.thanks-download[hidden]{display:none !important}
.thanks-body .btn{min-width:160px}
/* open phone menu: links start below the header, and scroll if the screen is short */
.mobile-nav{overflow-y:auto}
.mobile-nav{align-items:flex-start}
.mobile-nav nav{padding-top:calc(var(--header) + 1.5rem);padding-bottom:2rem;margin-inline:auto;width:min(100% - 2.5rem,24rem)}
/* phone menu: left-aligned, compact list with hairline dividers */
.mobile-nav nav{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left;width:auto;margin:0;padding:calc(var(--header) + .75rem) 1.5rem 2rem}
.mobile-nav nav a:not(.btn){display:block;padding:.85rem 0;font-size:1.45rem;line-height:1.2;border-bottom:1px solid rgba(247,244,239,.1)}
.mobile-nav nav .btn{margin-top:1.5rem;text-align:center}
.mobile-nav{display:block}
.mobile-nav nav{width:100%;box-sizing:border-box}

.page-links{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;justify-content:center;margin:1.4rem 0 0}
.page-links a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--body);text-decoration:none}
.page-links a[aria-current="page"]{color:var(--champagne)}

/* subpage banner: full-width photo, then one H1 and intro on the page ground */
.page-banner{position:relative;background:var(--void);line-height:0}
.page-banner img{width:100%;height:clamp(320px,56vh,680px);object-fit:cover;object-position:center 42%;display:block}
.page-banner::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--header) + 28px);background:linear-gradient(180deg,rgba(8,14,22,.62),transparent);pointer-events:none}
.page-intro{padding:clamp(2.4rem,5vw,3.6rem) 0 0}
.page-intro h1{margin-top:.55rem}
.page-lede{max-width:42rem;margin:1rem auto 0;color:var(--body);font-size:1.05rem;line-height:1.7}
.page-intro + .enquire{padding-top:clamp(1.75rem,3.5vw,2.75rem)}
.enquire-grid.page-lead{align-items:start}
.page-facts .title{margin-top:0}
.page-facts .prose{margin-top:1rem}
.sheet{margin:1.15rem 0 0;display:grid}
.sheet div{display:grid;grid-template-columns:minmax(7.5rem,11rem) 1fr;gap:.35rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--line-d)}
.sheet dt{margin:0;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sheet dd{margin:0;font-size:.95rem;line-height:1.45;color:var(--text)}
@media (max-width:560px){.sheet div{grid-template-columns:1fr;gap:.15rem}}
.section:not(.pay-sec) .pay-note{justify-content:flex-start;border-top-color:var(--line-d)}
.section:not(.pay-sec) .pay-note dt{color:var(--mute)}
.section:not(.pay-sec) .pay-note dd{color:var(--text);text-transform:none;letter-spacing:.01em;font-size:.95rem}
.fp-table-wrap{margin-top:clamp(2rem,4vw,3.2rem)}
.fp-table-wrap .title{margin:1.6rem 0 .4rem}
.price-table{width:100%;border-collapse:collapse;margin-top:1.5rem}
.price-table caption{caption-side:bottom;text-align:left;padding:.85rem 0 0;font-size:.78rem;line-height:1.5;color:var(--mute)}
.price-table th,.price-table td{text-align:left;padding:.95rem .4rem;border-bottom:1px solid rgba(26,28,31,.12);vertical-align:top}
.price-table th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.price-table td{font-size:.95rem;color:var(--ink)}
.price-table td em{font-style:normal;color:var(--body)}