/* The Shared Tours hero (UI-07-HERO-R4; the HERO-R3 layer with the photograph continuing behind the navigation): a faint
   photograph behind the heading, a compact hero sized by its content, and the hero actions at enlarged text. The page
   uses the shared clear header over this hero; the hero already starts under the header (service-layout pulls it up by
   the header height) and its top padding already includes the header height, so the header is accounted for once.
   Photograph: on every screen size and in both the Light and the Dark theme, the page's own white-catamaran photograph (the
   gallery's Dubai Marina departure image, same file and URL, so the bytes are reused and shared with the gallery cache) is
   a faint background of the hero: a decorative ::before layer of .pg-hero-fallback, absolutely positioned over the whole
   hero area, under the existing overlay and the content. It takes no pointer events and no focus, adds no layout height
   (the hero clips it) and, if the photograph fails to load, leaves the existing gradient exactly as before. Never stretched,
   rotated or mirrored; the horizon stays level. The frame is drawn wider than the hero and placed so the catamaran sits
   centred behind the heading and its introduction; the frame's lower edge eases into the navy below the yacht, so there is
   no edge and no separate picture under the content. Its upper part continues behind the transparent navigation (no fade
   under the header).
   Phones and tablets (900px and narrower): the hero is as tall as its content plus its padding (the earlier viewport-based
   minimum height is removed): 32px of space under the shared header and 32px under the last line on phones, 40px each
   on tablets, close to the Home and Fleet heroes' rhythm; enlarged text simply makes it taller.
   The frame is 140% of the viewport width, its yacht centred 165px (tablets 172px) below the top of the hero, which is
   the middle of the heading and introduction at normal text size.
   Laptop and desktop (901px and wider): the hero keeps its height and centred content; the frame is 110% of the viewport
   width and its yacht is centred 64px above the middle of the hero, which is the middle of the heading and introduction.
   Actions: the secondary hero action may wrap its label when the text is enlarged, so the label stays inside its outline;
   the button grows in height with the label, both actions keep their equal columns and their gap, and the labels stay
   centred. At normal text size every label fits on one line, so nothing moves. */
#st-root.uirh-service .pg-hero-fallback::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("/assets/images/shared-yacht-tours/shared-yacht-tours-dubai-marina-departure.webp") no-repeat;background-size:110vw auto;background-position:4.4% calc(50% - 64px - 6.9vw);opacity:.15;-webkit-mask-image:linear-gradient(to bottom,#000 calc(50% - 64px + 13vw),transparent calc(50% - 64px + 22vw));mask-image:linear-gradient(to bottom,#000 calc(50% - 64px + 13vw),transparent calc(50% - 64px + 22vw))}
@media(max-width:900px){
#st-root.uirh-service .pg-hero{min-height:0;padding:calc(var(--ui-header-mobile) + 40px) 24px 40px}
#st-root.uirh-service .pg-hero-fallback::before{--st-yacht-y:172px;background-size:140vw auto;background-position:35.5% calc(var(--st-yacht-y) - 54.5vw);opacity:.25;-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--st-yacht-y) + 18vw),transparent calc(var(--st-yacht-y) + 34vw));mask-image:linear-gradient(to bottom,#000 calc(var(--st-yacht-y) + 18vw),transparent calc(var(--st-yacht-y) + 34vw))}
}
@media(max-width:600px){
#st-root.uirh-service .pg-hero{padding:calc(var(--ui-header-mobile) + 32px) 20px 32px}
#st-root.uirh-service .pg-hero-fallback::before{--st-yacht-y:165px}
}
/* Laptop and desktop: the hero is pulled up under the header (service-layout), so its top padding includes the header
   height once plus 24px. At normal text the content stays centred in the unchanged hero height (it moves 15px down); with
   enlarged text, when the content outgrows that height, the first line now stays clear of the header instead of sliding
   under it. */
@media(min-width:901px){#st-root.uirh-service .pg-hero{padding-top:calc(var(--ui-header) + 24px)}}
#st-root.uirh-service .hero-btns>.btn-ghost{white-space:normal}