/* Shared hotel hero: approved desktop overlay and mobile identity at the image edge. */
/* Original site typography and colours; scoped to hotel pages. */
body.hl-motion-hero .site-header { position:fixed!important; inset:0 0 auto!important; background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; transition:background .2s ease; }
/* Same fine divider as the transparent homepage header. */
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header { border-bottom:1px solid #fffdf729!important; }
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .main-nav,
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .main-nav>a,
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .hl-story-menu>summary { color:#fffdf8!important; }
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .header-cta { background:rgba(18,62,49,.3)!important; border-color:rgba(255,255,255,.5)!important; box-shadow:none!important; }
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .menu-toggle { border-color:rgba(255,255,255,.5)!important; color:#fffdf8!important; }
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .menu-toggle span:not(.sr-only) { background:#fffdf8!important; }
body.hl-motion-hero.hl-motion-scrolled .site-header,
body.hl-motion-hero.hl-motion-menu-open .site-header { background:rgba(251,249,243,.97)!important; box-shadow:0 7px 25px #103b3312!important; border-bottom:1px solid #103b331a!important; }
body.hl-motion-hero .site-header .hl-story-submenu,
body.hl-motion-hero .site-header .main-nav .hl-story-submenu a { color:#173b32!important; }
body.hl-motion-hero .hl-hotel-motion-hero { display:block!important; width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; border-radius:0!important; overflow:visible!important; box-shadow:none!important; background:#f1ecdf; color:#fffdf8; }
.hl-motion-stage { position:relative; isolation:isolate; height:auto; min-height:740px; max-height:none; overflow:visible; background:#123e35; }
.hl-motion-media { position:absolute; inset:0; overflow:hidden; z-index:0; background:#477a79; }
.hl-motion-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#103b33ed 0%,#103b33c9 26%,#103b3366 42%,transparent 64%,transparent),linear-gradient(180deg,#0d302866,transparent 150px); }
body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { position:relative; z-index:2; display:flex; flex-direction:column; width:min(680px,56%); height:auto; min-height:740px; max-height:none; padding:122px 20px 30px clamp(30px,5vw,88px); background:none; overflow:visible; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0; color:#fffdf8cc; font-size:12px; line-height:1.4; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-copy { position:static; display:flex; flex-direction:column; flex:1 0 auto; width:auto; min-width:0; min-height:0; margin:26px 0 0; overflow:visible; color:#fffdf8; }
body.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo { display:block; width:174px; height:auto; max-height:62px; margin:0 0 19px; object-fit:contain; object-position:left center; opacity:.94; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-labels { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-labels span { padding:8px 12px; font-size:12px; line-height:1.3; letter-spacing:.06em; border-radius:999px; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-labels span:first-child { color:#133f36; background:#d9ebcd; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-labels .outline { color:#fff5e8; border:1px solid #e8c08b99; background:#ffffff0a; }
body.hl-motion-hero .hl-hotel-motion-hero .eyebrow { margin:0 0 17px; color:#f3ab80; font-size:12px; line-height:1.4; letter-spacing:.14em; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1 { --hero-title-size:clamp(56px,5.1vw,78px); margin:0 0 21px; max-width:none; color:#fffdf8!important; font-family:'Tenor Sans',Georgia,serif!important; font-size:var(--hero-title-size); font-weight:400; line-height:1.02; letter-spacing:-.045em; }
body.hl-motion-hero .hl-hotel-motion-hero .hotel-title-line { display:inline; white-space:nowrap; }
body.hl-motion-hero .hl-hotel-motion-hero .hotel-stars { display:inline-flex; position:relative; width:max-content; max-width:none; margin:0 0 0 10px; top:auto; font-family:Arial,sans-serif!important; font-size:20px!important; font-weight:400; line-height:1; letter-spacing:.07em; vertical-align:baseline; color:#e8c08b!important; white-space:nowrap; }
body.hl-motion-hero .hl-hotel-motion-hero .hotel-stars span { color:#e8c08b!important; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-intro { max-width:440px; margin:0; color:#fffcf6!important; font-size:16px; line-height:1.65; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin:auto 0 0; padding-top:26px; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-actions>* { flex:none; max-width:100%; }
body.hl-motion-hero .hl-hotel-motion-hero .primary-action { min-height:56px; padding:0 23px; color:#fff; background:#d96736; font-size:14px; border-radius:999px; }
body.hl-motion-hero .hl-hotel-motion-hero .primary-action:hover,
body.hl-motion-hero .hl-hotel-motion-hero .primary-action:focus-visible { color:#fff; background:#bd542b; box-shadow:0 8px 22px #08282035; }
body.hl-motion-hero .hl-hotel-motion-hero .hotel-dna-trigger { min-height:56px; }
.hl-motion-tools { position:absolute; z-index:3; right:clamp(22px,4vw,70px); bottom:30px; display:flex; flex-wrap:nowrap; align-items:center; gap:12px; max-width:calc(100% - 44px); }
body.hl-motion-hero .hl-motion-tools .hero-gallery-all { position:static!important; inset:auto!important; transform:none!important; display:inline-flex; flex:0 0 auto; align-items:center; gap:11px; width:auto; min-width:0; max-width:100%; height:52px; min-height:52px; margin:0; padding:5px 17px 5px 5px; border:1px solid #ffffff59; border-radius:999px; color:#fffdf8!important; background:linear-gradient(135deg,#123e35e6,#123e35bd); box-shadow:0 14px 30px #041e2333,inset 0 1px 0 #ffffff14; backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); font-family:inherit; font-size:14px!important; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.hl-motion-tools .hl-gallery-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid #ffffff33; border-radius:12px; color:#fffdf8; background:linear-gradient(145deg,#df7748,#bd4f2a); box-shadow:0 8px 18px #03191333; }
.hl-motion-tools .hl-gallery-icon svg { width:20px; height:20px; }
.hl-motion-pause { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; padding:0; border:1px solid #ffffff59; border-radius:50%; color:#fffdf8; background:linear-gradient(135deg,#123e35e6,#123e35bd); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 10px 24px #041e2333; font:500 17px/1 Arial,sans-serif; cursor:pointer; }
body.hl-motion-hero .hl-motion-tools .hero-gallery-all:hover,.hl-motion-pause:hover { border-color:#efa077a6; background:#123e35ee; box-shadow:0 19px 40px #041e234d; }
body.hl-motion-hero .hl-motion-tools .hero-gallery-all:focus-visible,.hl-motion-pause:focus-visible { outline:3px solid #efa077; outline-offset:4px; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts { display:grid!important; position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:118px!important; max-height:none!important; margin:0!important; padding:0 clamp(10px,3.5vw,70px); grid-template-columns:repeat(4,minmax(0,1fr)); background:#f1ecdf; color:#0b3327; border:0; border-bottom:1px solid #123e3126; border-radius:0; box-shadow:none; overflow:visible; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div { display:block!important; min-width:0; padding:26px 24px; border-right:1px solid #123e3126; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div:last-child { border-right:0; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts small { display:block; margin-bottom:8px; color:#b6532c; font-size:12px; line-height:1.3; letter-spacing:.1em; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts strong { display:block; margin-bottom:5px; color:#0b3327; font-size:19px; line-height:1.3; }
body.hl-motion-hero .hl-hotel-motion-hero .hero-facts span { display:block; color:#65746d; font-size:13px; line-height:1.45; }
@media(min-width:1700px) { .hl-motion-stage,body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { min-height:800px; } }
@media(max-width:1100px) and (min-width:761px) {
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { width:65%; padding-left:35px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1 { --hero-title-size:clamp(42px,5.1vw,56px); }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div { padding:24px 20px; }
}
@media(max-width:760px) {
 .hl-motion-stage { --hl-mobile-hotel-picture-height:clamp(440px,115vw,520px); min-height:0; background:#123e35; }
 .hl-motion-media { position:absolute; inset:0 0 auto; width:100%; height:calc(var(--hl-mobile-hotel-picture-height) + 190px); }
 .hl-motion-shade { background:linear-gradient(180deg,#082820b8 0,#08282090 160px,#08282045 300px,transparent 420px),linear-gradient(0deg,#123e35 0,#123e35bb 18px,transparent 105px); }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { width:100%; min-height:0; padding:calc(var(--hl-mobile-hotel-picture-height) - 100px) 24px 28px; justify-content:flex-start; background:transparent!important; pointer-events:none; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy,body.hl-motion-hero .hl-hotel-motion-hero .hero-breadcrumbs,body.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo { pointer-events:auto; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-breadcrumbs { order:4; position:static; inset:auto; gap:7px; margin:0 0 14px; font-size:11px; }
 /* Flatten the existing copy wrapper only visually; preserve nodes and handlers. */
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy { display:contents; }
 body.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo { order:0; width:110px; max-height:34px; margin-bottom:12px; }
 /* Keep category and opening side by side; additional hotel markers use the next row. */
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels { order:1; display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:start; gap:8px; margin-bottom:12px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels>span { min-width:0; max-width:100%; padding:8px; letter-spacing:.02em; white-space:normal; overflow-wrap:normal; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels>span:first-child { grid-column:1; grid-row:1; white-space:nowrap; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels>.opening-label { grid-column:2; grid-row:1; justify-self:start; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels:has(>.opening-label)>span:not(:first-child):not(.opening-label) { grid-column:1 / -1; justify-self:start; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels:not(:has(>.opening-label))>span:not(:first-child) { justify-self:start; }
 body.hl-motion-hero .hl-hotel-motion-hero .eyebrow { order:2; margin-bottom:8px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1 { order:3; --hero-title-size:clamp(31px,8.4vw,38px); font-size:var(--hero-title-size); line-height:1.12; margin-bottom:12px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hotel-place>br { display:none; }
 body.hl-motion-hero .hl-hotel-motion-hero .hotel-title-line { display:inline; white-space:nowrap; }
 body.hl-motion-hero .hl-hotel-motion-hero .hotel-stars { top:auto; margin-left:6px; font-size:17px!important; line-height:1!important; letter-spacing:.04em; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-intro { order:5; font-size:16px!important; line-height:1.5!important; max-width:100%; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { order:6; display:grid; grid-template-columns:minmax(0,1fr); gap:9px; margin:0; padding-top:18px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions>* { width:100%; min-width:0; min-height:52px; font-size:16px; }
 body.hl-motion-hero .hl-hotel-motion-hero .primary-action { justify-content:space-between; }
 body.hl-motion-hero .hl-hotel-motion-hero .hotel-dna-trigger strong { font-size:16px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hotel-dna-trigger small { font-size:12px; }
 .hl-motion-tools { right:24px; top:calc(var(--holiday-header-height,78px) + 14px); bottom:auto; gap:8px; max-width:calc(100% - 48px); }
 body.hl-motion-hero .hl-motion-tools .hero-gallery-all { height:42px; min-height:42px; gap:8px; padding:4px 12px 4px 4px; font-size:12px!important; }
 .hl-motion-tools .hl-gallery-icon { flex-basis:32px; width:32px; height:32px; border-radius:10px; }
 .hl-motion-tools .hl-gallery-icon svg { width:17px; height:17px; }
 .hl-motion-pause { flex-basis:42px; width:42px; height:42px; font-size:15px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:230px!important; padding:0; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div { padding:21px 22px; border-bottom:1px solid #123e311a; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div:nth-child(2n) { border-right:0; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div:nth-last-child(-n+2) { border-bottom:0; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts strong { font-size:17px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-facts span { font-size:14px; }
}
@media(max-width:380px) { body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { padding-inline:22px; } body.hl-motion-hero .hl-hotel-motion-hero .hero-facts>div { padding-inline:18px; } }
@media(max-width:760px) and (orientation:landscape) { .hl-motion-stage { --hl-mobile-hotel-picture-height:440px; } }
@media(prefers-reduced-motion:reduce) { body.hl-motion-hero .site-header,body.hl-motion-hero .hl-motion-tools .hero-gallery-all {transition:none;} }
.hl-motion-media .hl-motion-shade{z-index:2;}

.hl-hotel-motion-hero .hero-gallery-grid{display:none!important}
.hl-hotel-motion-hero .hl-motion-frame{opacity:0;transition:opacity 1.25s ease;pointer-events:none}
.hl-hotel-motion-hero .hl-motion-frame.is-active{opacity:1}
.hl-hotel-motion-hero .hl-motion-frame:is(.is-active,.is-retiring){animation:hl-hotel-film-zoom 8.25s linear forwards}
.hl-hotel-motion-hero .is-paused .hl-motion-frame{animation-play-state:paused}
.hl-hotel-motion-hero .hl-motion-video{opacity:0;pointer-events:none}
.hl-hotel-motion-hero .has-video .hl-motion-video{opacity:1}
.hl-hotel-motion-hero .hl-motion-mobile-title{display:none}
body.hl-motion-hero .hl-hotel-motion-hero .hotel-title-line,body.hl-motion-hero .hl-hotel-motion-hero .hotel-title-final-line{display:inline;white-space:normal;max-width:none}
body.hl-motion-hero .hl-hotel-motion-hero h1{overflow-wrap:normal}
.hl-motion-title-tail{display:inline-flex;align-items:flex-start;gap:12px;vertical-align:baseline;white-space:nowrap}
body.hl-motion-hero .hl-hotel-motion-hero .hl-motion-title-tail .hotel-stars{position:static!important;inset:auto!important;transform:none!important;align-self:flex-start;margin:.12em 0 0!important}
@media(max-width:760px){.hl-motion-title-tail{gap:8px}}
body.hl-motion-hero .hl-hotel-motion-hero h1>span:not(.hotel-stars){color:inherit}
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .hl-header-tools,
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .hl-header-tools a,
body.hl-motion-hero:not(.hl-motion-scrolled):not(.hl-motion-menu-open) .site-header .hl-header-tools button{color:#fffdf8!important}
@keyframes hl-hotel-film-zoom{from{transform:scale(1.035) translate(var(--hl-film-from-x,1%),.4%)}to{transform:scale(1.12) translate(var(--hl-film-to-x,-1%),-.6%)}}
@media(max-width:760px){.hl-hotel-motion-hero .hl-motion-desktop-title{display:none}.hl-hotel-motion-hero .hl-motion-mobile-title{display:inline}}
@media(prefers-reduced-motion:reduce){.hl-hotel-motion-hero .hl-motion-frame{animation:none;transition:none}}
.hl-hotel-motion-hero .hl-motion-pause[hidden]{display:none}

body.hl-motion-hero .hl-hotel-motion-hero .hero-actions .hotel-hero-map{position:static!important;inset:auto!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:48px;padding:10px 18px;border:1px solid #ffffff59;border-radius:999px;color:#fffdf8;background:#123e35bf;font-size:14px}
body.hl-motion-hero .hl-hotel-motion-hero .hl-motion-desktop-title span:not(.hotel-stars):not(.hotel-stars span){color:inherit!important}

.hl-hotel-motion-hero .hl-motion-frame,.hl-hotel-motion-hero .hl-motion-video{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none!important;object-fit:cover;object-position:62% center;z-index:0;background:#477a79}

.hl-hotel-motion-hero .hl-motion-frame.hl-motion-reverse{--hl-film-from-x:-1%;--hl-film-to-x:1%}
/* Smaller originals still move: fixed, modest overscan instead of a growing zoom. */
@keyframes hl-hotel-film-pan{from{transform:scale(1.035) translate(var(--hl-film-from-x,1%),.4%)}to{transform:scale(1.035) translate(var(--hl-film-to-x,-1%),-.6%)}}
.hl-motion-media{background-size:cover;background-position:62% center}

/* Shared lower edge for offer, DNA and gallery controls. Mobile retains its image/copy stack. */
@media(min-width:761px){body.hl-motion-hero .hl-motion-tools .hero-gallery-all{height:56px;min-height:56px}.hl-motion-tools{align-items:flex-end}}

/* Keep the approved desktop stage size; long names must not enlarge the film. */
@media(min-width:761px){
 .hl-motion-stage{height:740px;min-height:740px}
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel{height:740px;min-height:740px}
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy{flex:1 1 auto}
 /* Explicit three-line titles need the same room as long names, before and after enhancement. */
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1.hotel-title--long,
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1:has(br ~ br){--hero-title-size:clamp(38px,3.6vw,56px)}
}
@media(min-width:1700px){
 .hl-motion-stage,body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel{height:800px;min-height:800px}
}

/* Static first paint uses the same approved media dimensions before enhancement. */
.hl-hotel-motion-hero .hl-motion-initial-poster{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none!important;object-fit:cover;object-position:62% center}

/* Clearer mobile camera movement; text, controls and hotel geometry stay still. */
@keyframes hl-hotel-mobile-film { from { transform:scale(1.06) translate(calc(var(--hl-film-from-x,1%) * 2),.8%); } to { transform:scale(1.18) translate(calc(var(--hl-film-to-x,-1%) * 2),-.8%); } }
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 .hl-hotel-motion-hero .hl-motion-media .hl-motion-frame:is(.is-active,.is-retiring) { animation-name:hl-hotel-mobile-film; animation-duration:7s; }
}
.hl-hotel-motion-hero .hl-motion-media .hl-motion-frame.hl-motion-no-zoom:is(.is-active,.is-retiring){animation-name:hl-hotel-film-pan}
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 @keyframes hl-hotel-mobile-pan { from { transform:scale(1.065) translate(calc(var(--hl-film-from-x,1%) * 2.5),.8%); } to { transform:scale(1.065) translate(calc(var(--hl-film-to-x,-1%) * 2.5),-.8%); } }
 .hl-hotel-motion-hero .hl-motion-media .hl-motion-frame.hl-motion-no-zoom:is(.is-active,.is-retiring) { animation-name:hl-hotel-mobile-pan; animation-duration:7s; }
}
.hl-hotel-motion-hero .hl-motion-single-scene .hl-motion-frame.is-active{animation-duration:16s;animation-direction:alternate;animation-iteration-count:infinite}
/* Later selectors must not override offscreen, tab, dialog or data/reduced pauses. */
.hl-hotel-motion-hero .hl-motion-media.is-paused .hl-motion-frame{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hl-hotel-motion-hero .hl-motion-media .hl-motion-frame{animation:none!important;transition:none}}

/* Reserve the shared desktop lower edge independently of long hotel copy. */
@media(min-width:761px) {
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { padding-bottom:112px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { position:absolute; left:clamp(30px,5vw,88px); right:20px; bottom:30px; margin:0; padding-top:0; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel:has(.hotel-hero-map) { padding-bottom:170px; }
}
@media(min-width:761px) and (max-width:1100px) {
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { left:35px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { padding-bottom:170px; }
}

/* Mobile: identity above, an unobstructed picture in the middle, full copy below.
   Grid follows the original nodes and lets every complete hotel name grow naturally. */
@media(max-width:760px) {
 .hl-motion-stage { display:grid; grid-template-columns:minmax(0,1fr); padding-top:calc(var(--holiday-header-height,78px) + 22px); padding-bottom:28px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy-panel { display:contents; }
 /* Extend the actual shared mobile photo row by 120px, not only its fade. */
 .hl-motion-stage::after { content:""; grid-column:1; grid-row:5; height:calc(clamp(270px,76vw,340px) + 196px); pointer-events:none; }
 .hl-motion-media { position:relative; grid-column:1; grid-row:1 / 6; inset:auto; height:auto; min-height:0; align-self:stretch; margin-top:calc(-1 * (var(--holiday-header-height,78px) + 22px)); background-image:none!important; background-color:#123e35; }
 .hl-hotel-motion-hero .hl-motion-frame,.hl-hotel-motion-hero .hl-motion-video,.hl-hotel-motion-hero .hl-motion-initial-poster { height:calc(100% - 24px); object-position:50% 70%; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%); }
 .hl-motion-shade { background:linear-gradient(180deg,#082820b8 0,#08282090 160px,#08282045 300px,transparent 420px),linear-gradient(0deg,#123e35 0,#123e35bb 18px,transparent 105px); }
 body.hl-motion-hero .hl-hotel-motion-hero :is(.tulua-official-logo,.nalu-official-logo,.jaz-riviera-official-logo,.koia-official-logo),
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels,
 body.hl-motion-hero .hl-hotel-motion-hero .eyebrow,
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1,
 body.hl-motion-hero .hl-hotel-motion-hero .hero-breadcrumbs,
 body.hl-motion-hero .hl-hotel-motion-hero .hero-intro,
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { grid-column:1; position:relative; z-index:2; margin-left:24px; margin-right:24px; pointer-events:auto; }
 /* Original hotel logo shares the lower picture edge with the gallery control.
    Its former top row is released for the hotel identity and clear picture. */
 body.hl-motion-hero .hl-hotel-motion-hero :is(.tulua-official-logo,.nalu-official-logo,.jaz-riviera-official-logo,.koia-official-logo) { grid-row:5; align-self:end; justify-self:start; width:clamp(102px,32vw,146px); height:70px; max-height:70px; margin-top:0; margin-bottom:30px; object-fit:contain; object-position:left center; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels { grid-row:2; margin-top:0; margin-bottom:9px; }
 /* Match desktop identity order and the unbacked orange location. */
 body.hl-motion-hero .hl-hotel-motion-hero .eyebrow { grid-row:3; justify-self:start; width:fit-content; max-width:calc(100% - 48px); margin-top:0; margin-bottom:10px; padding:0; border-radius:0; background:none; color:#e77943!important; font-size:14px; font-weight:800; line-height:1.5; letter-spacing:.06em; text-shadow:none; overflow-wrap:anywhere; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-copy h1 { grid-row:4; margin-bottom:0; --hero-title-size:clamp(30px,8.2vw,38px); }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-breadcrumbs { grid-row:8; margin-top:0; margin-bottom:14px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-intro { grid-row:9; margin-top:0; margin-bottom:22px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-actions { grid-row:10; margin-top:0; margin-bottom:0; }
 .hl-motion-tools { top:auto; bottom:30px; right:24px; left:auto; }
}

/* Compact mobile identity markers override the general metadata rule.
   Mobile markers form a compact row above the location and hotel name.
   Keep the complete opening date and year together without text inflation. */
@media(max-width:760px) {
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels { display:flex; flex-wrap:nowrap; align-items:stretch; gap:4px; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels>span { padding:7px 6px; font-family:"Mulish",Arial,sans-serif!important; font-weight:900; text-transform:uppercase; font-size:clamp(10.5px,2.82vw,11.5px)!important; line-height:1.3!important; letter-spacing:0; display:flex; align-items:center; justify-content:center; flex:0 1 auto; min-width:min-content; white-space:normal; text-wrap:balance; text-align:center; overflow-wrap:normal; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
 body.hl-motion-hero .hl-hotel-motion-hero .hero-labels>span:first-child { flex:0 0 auto; white-space:nowrap; }
}

@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 .hl-hotel-motion-hero .hl-motion-media.hl-motion-single-scene .hl-motion-frame.is-active { animation-duration:8s; }
}

/* Reserve separate hit areas for the original hotel mark and gallery action.
   The media-card enhancement previously widened some marks to 200px on phones. */
@media(max-width:760px) {
 body.hotel-page.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo:is(.hotel-logo-wide,.hotel-logo-monochrome) { width:clamp(102px,32vw,146px); max-width:32vw; height:70px; max-height:70px; }
 body.hl-motion-hero .hl-motion-tools { max-width:calc(100% - clamp(102px,32vw,146px) - 60px); }
 body.hl-motion-hero .hl-motion-tools .hero-gallery-all { box-sizing:border-box; }
}

/* Original transparent hotel wordmarks with a very wide intrinsic ratio. */
.hotel-page .hotel-logo-wordmark { filter:brightness(0) invert(1); }
body.hotel-page.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo.hotel-logo-wordmark { width:300px; max-width:65%; height:auto; max-height:none; }
@media(max-width:760px) {
 body.hotel-page.hl-motion-hero .hl-hotel-motion-hero .tulua-official-logo.hotel-logo-wordmark { width:clamp(145px,43vw,190px); max-width:min(46vw,calc(100vw - 190px)); height:70px; max-height:70px; }
}