/* "Page hero" layout (App\Services\HeroBlock): the standard top of a page - picture or video under the site's header,
   small heading, title, text, buttons and floating glass cards. Colours, overlay, glass and type come from the design
   settings (admin -> Design & typography: the --ms-* variables). */
.cms-sec.cms-sec--page_hero { padding: 0 !important; background: var(--ms-green-deep, var(--ms-green-deep)); }
.ph { position: relative; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: max(540px, min(var(--ms-hero-min, 70vh), 760px)); overflow: hidden; color: var(--ms-hero-text, rgba(255,255,255,.88)); background: var(--ms-green-deep, var(--ms-green-deep)); }
.ph.is-tall { min-height: max(620px, min(92vh, 860px)); }
.ph.is-short { min-height: max(440px, min(52vh, 560px)); }
.ph *, .ph *::before, .ph *::after { box-sizing: border-box; }
.ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ph-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(var(--ms-overlay-rgb, 1,25,22), calc(var(--ph-a, var(--ms-overlay-a, .55)) * .65)) 0%, rgba(var(--ms-overlay-rgb, 1,25,22), calc(var(--ph-a, var(--ms-overlay-a, .55)) * .8)) 55%, rgba(var(--ms-overlay-rgb, 1,25,22), var(--ph-a, var(--ms-overlay-a, .55))) 100%); }
.ph-in { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 44px; width: 100%; max-width: var(--ms-container, 1180px); margin: 0 auto; padding: 170px 24px 70px; flex: 1 0 auto; }
.ph.is-center .ph-txt { margin: 0 auto; text-align: center; }
.ph-txt { max-width: 720px; }
.ph-kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: calc(12.5px * var(--ms-k-text)); font-weight: 600; letter-spacing: var(--ms-kicker-ls, .22em); text-transform: uppercase; color: var(--ms-hero-accent, var(--ms-gold-l)); }
.ph-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.ph.is-center .ph-kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.ph h1.ph-title { margin: 0 0 16px; padding: 0; font-size: var(--ms-h1, clamp(45px, 5vw, 72px)); color: var(--ms-hero-title, #fff) !important; text-shadow: 0 10px 40px rgba(0,0,0,.3); }
.ph-title em { font-style: normal; color: var(--ms-hero-accent, var(--ms-gold-l)); }
.ph .ph-lead { max-width: 600px; margin: 0 0 28px; font-size: calc(var(--ms-text-size, 16px) + 1.5px); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-hero-text, rgba(255,255,255,.88)); }
.ph .ph-lead p, .ph .ph-lead h1, .ph .ph-lead h2, .ph .ph-lead h3, .ph .ph-lead h4 { color: inherit; }
.ph.is-center .ph-lead { margin-left: auto !important; margin-right: auto !important; }
.ph-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ph.is-center .ph-acts { justify-content: center; }
.ph .cms-sec__btn.ph-btn-line, .ph .cms-sec__btn.ph-btn-line:focus { color: #fff !important; background: var(--ms-glass-bg, rgba(255,255,255,.14)) !important; border: 1px solid var(--ms-glass-border, rgba(255,255,255,.28)) !important; -webkit-backdrop-filter: var(--ms-glass-blur, blur(14px)); backdrop-filter: var(--ms-glass-blur, blur(14px)); }
.ph .cms-sec__btn.ph-btn-line:hover { color: var(--ms-btn-hover-fg, #fff) !important; background: var(--ms-btn-hover, var(--ms-gold)) !important; border-color: var(--ms-btn-hover, var(--ms-gold)) !important; }

/* floating glass cards */
.ph-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.ph.is-center .ph-cards { justify-content: center; }
.ph-card { display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 18px 22px; color: #fff; background: var(--ms-glass-bg, rgba(255,255,255,.14)); border: 1px solid var(--ms-glass-border, rgba(255,255,255,.28)); border-radius: var(--ms-card-radius, 16px); -webkit-backdrop-filter: var(--ms-glass-blur, blur(14px)); backdrop-filter: var(--ms-glass-blur, blur(14px)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.14); transition: transform var(--ms-speed, .25s) ease; }
.ph-card:hover { transform: translateY(var(--ms-lift, -3px)); }
.ph-card b { font: 400 var(--ms-h3, 28px)/1.05 var(--ms-font-head, Oswald, sans-serif); letter-spacing: var(--ms-ls-head, 0); }
.ph-card small { font-size: calc(13px * var(--ms-k-text)); line-height: calc(1.4 * var(--ms-k-lh)); color: rgba(255,255,255,.8); }
.ph-card b:empty, .ph-card small:empty { display: none; }

@media (min-width: 1025px) {
  /* the floating cards sit on the right edge of the picture, beside the text */
  .ph-in { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .ph.is-center .ph-in { flex-direction: column; align-items: center; justify-content: center; }
  .ph:not(.is-center) .ph-cards { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 230px; flex: 0 0 230px; }
}
@media (max-width: 767px) {
  .ph { min-height: 480px; }
  .ph.is-tall { min-height: 540px; }
  .ph.is-short { min-height: 400px; }
  /* phones: the text is centred, as with the hero's "centre" option (the "Book your stay" tab is a pill at the bottom) */
  .ph-in { gap: 28px; padding: 130px 18px 44px; }
  .ph-txt { margin: 0 auto; text-align: center; }
  .ph-kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; }
  .ph .ph-lead { margin-left: auto !important; margin-right: auto !important; }
  .ph-acts, .ph-cards { justify-content: center; }
  .ph-card { flex: 1 1 calc(50% - 7px); min-width: 0; padding: 14px 16px; }
  .ph .cms-sec__btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ph-card { transition: none; } }

/* ---- Intro band (App\Services\IntroBand): a cream pause between two picture sections; everything follows Design & typography */
.cms-sec.cms-sec--intro_band { padding: 0 !important; background: transparent; }
.ib { box-sizing: border-box; padding: 56px 24px 52px; text-align: center; color: var(--ms-ink); background: var(--ms-cream); }
.ib.is-white { background: #fff; }
.ib *, .ib *::before, .ib *::after { box-sizing: border-box; }
.ib-in { max-width: 760px; margin: 0 auto; }
.ib-kicker { display: block; margin: 0 0 12px; font-size: calc(12.5px * var(--ms-k-text)); letter-spacing: var(--ms-kicker-ls); text-transform: uppercase; color: var(--ms-gold); }
.ib h2 { margin: 0 0 14px; font-size: calc(36px * var(--ms-k-h2)); line-height: 1.1; color: var(--ms-ink) !important; }
.ib h2::after { content: ""; display: block; width: 56px; height: 3px; margin: 18px auto 0; background: var(--ms-gold); }
.ib-text { font-size: calc(16.5px * var(--ms-k-text)); line-height: calc(1.7 * var(--ms-k-lh)); color: var(--ms-text); }
.ib-text p { margin: 0 0 .6em !important; padding: 0 !important; } .ib-text p:last-child { margin-bottom: 0 !important; }
.ib-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; margin: 26px 0 0; }
.ib-fact b { display: block; font: var(--ms-w-head) calc(28px * var(--ms-k-h3))/1.05 var(--ms-font-head); letter-spacing: var(--ms-ls-head); color: var(--ms-green); }
.ib-fact small { display: block; margin-top: 4px; font-size: calc(12.5px * var(--ms-k-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-mut); }
@media (max-width: 700px) { .ib { padding: 40px 20px 36px; } .ib h2 { font-size: calc(28px * var(--ms-k-h2)); } .ib-facts { gap: 14px 24px; } }