/* Extracted from the static build's per-page <style> block.
   Section layout CSS; tokens come from styles.css. */

/* ==== STAY PAGE — inline layout (hero / intro / amenities / around / reserve).
   Room showcase, finder, floor-plans and FAQ live in stay.css. ==== */

/* --- HERO (split, editorial) --- */
.s-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--c-pearl);
  /*padding-top: 84px;*/
  overflow: hidden;
}
.s-hero__left {
  padding: 80px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.s-hero__crumb {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(14,22,32,0.4); margin-bottom: 64px;
  display: flex; align-items: center; gap: 12px; font-weight: 500;
}
.s-hero__crumb a { color: rgba(14,22,32,0.55); }
.s-hero__crumb .sep { width: 16px; height: 1px; background: rgba(14,22,32,0.2); }
.s-hero__eyebrow { color: var(--c-olive); margin-bottom: 22px; }
.s-hero__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(44px, 5.2vw, 82px); line-height: 0.98;
  letter-spacing: -0.015em; margin: 0 0 26px; max-width: 14ch;
  color: var(--c-charcoal);
}
.s-hero__h .it { font-style: italic; }
.s-hero__sub {
  font-family: var(--f-body); font-size: 15px; line-height: 1.8;
  color: rgba(14,22,32,0.62); max-width: 46ch; margin: 0 0 44px;
}
.s-hero__meta { display: flex; gap: 52px; flex-wrap: wrap; }
.s-hero__meta-item {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(14,22,32,0.42); font-weight: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.s-hero__meta-item strong {
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: 26px; color: var(--c-charcoal); letter-spacing: 0; text-transform: none;
}
.s-hero__right { position: relative; overflow: hidden; }
.s-hero__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
}
@media (prefers-reduced-motion: no-preference) {
  .s-hero__img { animation: sHeroKen 2800ms var(--ease-out) both; }
  @keyframes sHeroKen { from { transform: scale(1.09); } to { transform: scale(1); } }
}
@media (max-width: 900px) {
  .s-hero { grid-template-columns: 1fr; }
  .s-hero__left { padding: 44px 24px 56px; }
  .s-hero__right { min-height: 54vh; order: -1; }
  .s-hero__crumb { margin-bottom: 30px; }
  .s-hero__meta { gap: 30px 44px; }
}

/* --- INTRO MANIFESTO --- */
.stay-intro { background: var(--c-pearl); padding: clamp(96px, 12vw, 170px) clamp(40px, 8vw, 132px); }
.stay-intro__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 5vw, 88px); align-items: start; }
.stay-intro__lead {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.16;
  letter-spacing: -0.01em; color: var(--c-charcoal); margin: 0; max-width: 14ch;
}
.stay-intro__lead .it { font-style: italic; }
.stay-intro__body { color: rgba(14,22,32,0.7); font-size: 15.5px; line-height: 1.8; margin: 0; max-width: 52ch; }
.stay-intro__body p { margin: 0 0 18px; }
.stay-intro__body p:last-child { margin: 0; }
@media (max-width: 820px) { .stay-intro__inner { grid-template-columns: 1fr; gap: 28px; } }

/* highlight pulse when the finder points at a room */
.rm--hi .rm__photo { animation: rmHi 1.6s var(--ease-out); }
@keyframes rmHi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(113,113,59,0); }
  18% { box-shadow: 0 0 0 4px rgba(113,113,59,0.85); }
  60% { box-shadow: 0 0 0 4px rgba(113,113,59,0.5); }
}

/* --- IN EVERY ROOM (amenities) --- */
.stay-amen { background: var(--c-bone); padding: clamp(96px, 11vw, 160px) clamp(40px, 8vw, 132px); }
.stay-amen__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
.stay-amen__fig { position: relative; overflow: hidden; background: var(--c-pearl); aspect-ratio: 5 / 4; margin: 36px 0 0; }
.stay-amen__fig .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1700ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .stay-amen__fig:hover .img { transform: scale(1.08); } }
.stay-amen__cap { margin: 14px 0 0; font-family: var(--f-display); font-style: italic; font-size: 14px; color: rgba(14,22,32,0.5); }
.stay-amen__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--c-charcoal); margin: 18px 0 0; max-width: 14ch;
}
.stay-amen__h .it { font-style: italic; }
.stay-amen__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stay-amen__list li {
  font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 21px;
  color: var(--c-charcoal); padding: 18px 0; border-top: 1px solid rgba(14,22,32,0.14);
}
@media (max-width: 820px) {
  .stay-amen__inner { grid-template-columns: 1fr; gap: 36px; }
  .stay-amen__list { grid-template-columns: 1fr; }
}

/* --- AROUND YOU --- */
.stay-around { background: var(--c-pearl); padding: clamp(96px, 11vw, 160px) clamp(40px, 8vw, 132px); }
.stay-around__head { max-width: 1320px; margin: 0 auto 56px; }
.stay-around__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.stay-around__fig { position: relative; }
.stay-around__img { position: relative; overflow: hidden; background: var(--c-bone); aspect-ratio: 4 / 5; }
.stay-around__img .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1700ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .stay-around__fig:hover .img { transform: scale(1.08); } }
.stay-around__lab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 16px; }
.stay-around__name { font-family: var(--f-display); font-weight: 300; font-size: 24px; letter-spacing: -0.005em; color: var(--c-charcoal); }
.stay-around__name .it { font-style: italic; }
.stay-around__dist { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(14,22,32,0.45); }
@media (max-width: 820px) { .stay-around__grid { grid-template-columns: 1fr; gap: 36px; } .stay-around__img { aspect-ratio: 5 / 4; } }

/* --- RESERVE BAND --- */
.stay-cta { background: var(--c-aegean); color: var(--c-snow); padding: clamp(110px, 13vw, 170px) clamp(40px, 8vw, 132px); position: relative; overflow: hidden; }
.stay-cta__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.stay-cta__lab { color: var(--c-olive); }
.stay-cta__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 4vw, 58px); line-height: 1.05; letter-spacing: -0.012em; margin: 20px 0 22px; }
.stay-cta__h .it { font-style: italic; }
.stay-cta__body { color: rgba(255,255,255,0.66); margin: 0; max-width: 46ch; line-height: 1.8; font-size: 15px; }
.stay-cta__actions { display: flex; flex-direction: column; gap: 14px; }
.stay-cta__btn {
  display: inline-flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 24px; background: var(--c-snow); color: var(--c-charcoal);
  font-family: var(--f-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background-color 240ms var(--ease-out);
}
.stay-cta__btn:hover { background: var(--c-bone); }
.stay-cta__btn.outline { background: transparent; color: var(--c-snow); border: 1px solid rgba(255,255,255,0.3); }
.stay-cta__btn.outline:hover { background: rgba(255,255,255,0.08); }
.stay-cta__btn .arrow { font-family: var(--f-display); font-style: italic; font-size: 18px; letter-spacing: 0; text-transform: none; }
@media (max-width: 860px) { .stay-cta__inner { grid-template-columns: 1fr; gap: 32px; } }

/* --- LOCATION (stylised orientation map + arrival notes) --- */
.stay-location { background: var(--c-aegean); color: var(--c-snow); padding: clamp(96px, 11vw, 160px) clamp(40px, 8vw, 132px); position: relative; overflow: hidden; }
.stay-location__inner { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(44px, 5vw, 92px); align-items: center; }
.stay-location__lab { color: var(--c-olive); }
.stay-location__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.012em; margin: 20px 0 24px; max-width: 15ch; }
.stay-location__h .it { font-style: italic; }
.stay-location__body { color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.8; margin: 0 0 30px; max-width: 44ch; }
.stay-location__list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.stay-location__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.stay-location__list .pl { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 20px; color: var(--c-snow); }
.stay-location__list .ds { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-cool-steel); white-space: nowrap; }
.stay-location__note { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.8; margin: 0; max-width: 46ch; }
.stay-location__note strong { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 18px; color: var(--c-snow); }

/* the orientation diagram */
.loc-map { position: relative; aspect-ratio: 680 / 540; background:
    radial-gradient(120% 110% at 32% 22%, rgba(148,165,179,0.12), transparent 62%),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.13); overflow: hidden; }
.loc-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.loc-sea { fill: rgba(148,165,179,0.10); }
.loc-wave { fill: none; stroke: rgba(148,165,179,0.55); stroke-width: 1.4; stroke-linecap: round; }
.loc-route { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 1.4; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.loc-link { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.2; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.loc-node { position: absolute; }
.loc-node__dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c-snow); box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
.loc-node__txt { position: absolute; left: 0; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.loc-node--up .loc-node__txt { top: auto; bottom: 14px; }
.loc-node__name { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 16px; color: var(--c-snow); line-height: 1; }
.loc-node__dist { font-family: var(--f-body); font-size: 8.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-cool-steel); }
.loc-node--prop .loc-node__dot { width: 14px; height: 14px; background: var(--c-cool-steel); box-shadow: 0 0 0 5px rgba(148,165,179,0.22); }
.loc-node--prop .loc-node__name { font-size: 21px; color: var(--c-snow); }
.loc-map__compass { position: absolute; top: 16px; right: 18px; font-family: var(--f-body); font-size: 9px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
@media (max-width: 920px) {
  .stay-location__inner { grid-template-columns: 1fr; gap: 40px; }
  .loc-map { order: -1; }
}
@media (max-width: 600px) {
  .loc-node__name { font-size: 14px; }
  .loc-node--prop .loc-node__name { font-size: 17px; }
}