:root{
  /* Global palette tokens: change these to recolor the whole site. */
  --remorino-navy: #27366c;
  --remorino-white: #fff;
  --remorino-bg: #f7f6f4;
  --remorino-bg-overlay: #040404;
  --remorino-bg-transition: var(--remorino-navy);

  --tt-bg-color: var(--remorino-bg);
  --tt-text-color: #212121;
  --tt-page-trans-overlay-bg-color: var(--remorino-bg-transition);
  --tt-main-color: var(--remorino-navy);
  --tt-body-font: "Gelasio", serif;
}

/* Larger logo in the non-scrolled (top) state; same size when scrolled. */
@media (min-width: 1201px) {
    #tt-header:not(.tt-filled) .tt-logo img {
        max-height: 100px;
        width: auto;
        height: auto;
    }

    #tt-header.tt-filled .tt-logo img {
        max-height: 100px;
        width: auto;
        height: auto;
    }

    /* Floor: flex may shrink the logo column, but never below this width
       (logo is 300x158, so 160px wide ≈ 84px tall). */
    #tt-header .tt-logo img {
        min-width: 180px;
    }
}

@media (max-width: 1200px) {
    .tt-logo img {
        max-height: 63px;
        width: auto;
        height: auto;
    }
}

.tt-ptr-prel-image {
    max-height: 125px;
}

/* Affiliations marquee */
@keyframes affiliations-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.tt-affiliations-track-wrap {
    overflow: hidden;
    width: 100%;
}

.tt-affiliations-track {
    display: flex;
    width: max-content;
    animation: affiliations-scroll 28s linear infinite;
}

.tt-affiliation-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 260px;
    margin: 10px;
    border: 1px solid var(--tt-border-color);
    border-radius: 15px;
    padding: 35px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tt-affiliation-item:hover {
    background-color: rgb(124 124 124 / 20%);
}

.tt-affiliation-item img {
    max-height: 110px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.tt-affiliation-item:hover img {
    transform: scale(1.12);
}

/* Tighten subtitle-to-title gap globally (template default is 40px). */
.ph-caption-subtitle {
    margin-bottom: 25px;
}

/* Replace template hardcoded dark overlays with tokenized values. */
.tt-section-background[class*="tt-sbg-cover-"]::before,
[class*="ph-image-cover-"] .ph-image-inner::before,
[class*="ph-video-cover-"] .ph-video-inner::before,
[class*="tt-clipper-cover-"] .tt-clipper-bg::before {
    background-color: var(--remorino-bg-overlay);
}

/* PSK Navigation marks active items with "selected". Map it to template active styles. */
@media (min-width: 1201px) {
    .tt-main-menu-list > li.selected > a::before,
    .tt-main-menu-list > li.selected > .tt-submenu-trigger > a::before {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .tt-main-menu-list > li.selected > a,
    .tt-main-menu-list > li.selected > .tt-submenu-trigger > a {
        color: var(--tt-main-color);
    }
}

/* Keep all template buttons on the pre-Gelasio typography (same as header Contact button). */
.tt-btn,
.tt-btn-inner > *,
.tt-btn-inner > *::after {
    font-family: "Poppins", sans-serif;
}

/* Footer: ulivo (olive branch) decorative watermark */
#tt-footer {
    position: relative;
    overflow: hidden;
}
.tt-footer-ulivo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: auto;
    aspect-ratio: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: brightness(0) invert(1);
    opacity: 0.35;
}

/* Footer navigation links from PSK do not include "tt-link". Mirror template hover effect. */
#tt-footer .tt-footer-widget-list > li > a:not(.tt-magnetic-item) {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: 0.6s cubic-bezier(.215, .61, .355, 1) !important;
    background-size: 0 100%;
    border: none;
    opacity: 1;
    text-decoration: none;
}

#tt-footer .tt-footer-widget-list > li > a:not(.tt-magnetic-item):hover,
#tt-footer .tt-footer-widget-list > li > a:not(.tt-magnetic-item):focus {
    background-size: 100% 100%;
    opacity: 1;
}

/* Footer contacts come from RTE paragraphs; tighten spacing and remove permanent underlines. */
#tt-footer .tt-footer-contacts p {
    margin: 0;
}

#tt-footer .tt-footer-contacts p + p {
    margin-top: 10px;
}

#tt-footer .tt-footer-contacts a {
    color: inherit;
    text-decoration: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: 0.6s cubic-bezier(.215, .61, .355, 1) !important;
    background-size: 0 100%;
}

#tt-footer .tt-footer-contacts a:hover,
#tt-footer .tt-footer-contacts a:focus {
    color: inherit;
    background-size: 100% 100%;
}

/* Keep footer typography on the pre-Gelasio font stack. */
#tt-footer,
#tt-footer .tt-footer-widget-list li,
#tt-footer .tt-footer-widget-list li a,
#tt-footer .tt-footer-contacts,
#tt-footer .tt-footer-contacts a,
#tt-footer .tt-footer-copyright,
#tt-footer .tt-footer-widget-list .tt-footer-copyright a {
    font-family: "Poppins", sans-serif;
}

/* Box01: only title stays uppercase; subtitle and text should keep natural casing. */
.box01-header .ph-caption-subtitle,
.box01-header .ph-caption-description {
    text-transform: none;
}

/* Box01: override template force-light page-header rule when body has ph-image/ph-video classes. */
body.ph-image-on:not(.ph-bg-is-light-on) #page-header.box01-header,
body.ph-image-on:not(.ph-bg-is-light-on) #page-header.box01-header a,
body.ph-video-on:not(.ph-bg-is-light-on) #page-header.box01-header,
body.ph-video-on:not(.ph-bg-is-light-on) #page-header.box01-header a {
    color: var(--tt-light-color) !important;
}

/* BoxError: keep top copy centered on mobile and desktop, including rich-text children. */
.tt-404-error-subtitle,
.tt-404-error-description,
.tt-404-error-description p {
    text-align: center;
}

/* Custom Grid Overrides */
@media (min-width: 768px) {
  .tt-grid.ttgr-layout-creative-2 .tt-grid-item.force-full {
      width: 100% !important;
      padding-left: 10% !important;
      padding-right: 10% !important;
  }

  .tt-grid.ttgr-layout-creative-2 .tt-grid-item.force-58 {
      width: 58% !important;
      padding-left: 0 !important;
      padding-right: 0 !important
  }

  .tt-grid.ttgr-layout-creative-2 .tt-grid-item.force-42 {
      width: 42% !important;
      padding-left: 0 !important;
      padding-right: 0 !important
  }
}

/* Box07 image behavior: match Box05 radius + hover zoom without grid-specific wrappers. */
.box07-image-card .box07-image-figure {
    margin: 0;
    border-radius: 15px;
    overflow: hidden;
    line-height: 1;
}

.box07-image-card .box07-image-figure picture,
.box07-image-card .box07-image-figure img {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {
    .box07-image-card .box07-image-figure img {
        transform: scale(1.1);
        transition: transform 1s cubic-bezier(.165,.84,.44,1);
        transform-origin: 50% 50%;
    }

    .box07-image-card:hover .box07-image-figure img {
        transform: scale(1);
    }
}

.box07-text li > p {
    margin-bottom: 8px;
}

/* Box17 offers list: image on the left of the title (template default puts it right). */
@media (min-width: 768px) {
    .tt-portfolio-compact-list .pcli-col-image {
        order: 1;
        justify-content: flex-start;
    }

    .tt-portfolio-compact-list .pcli-col-caption {
        order: 2;
        justify-content: flex-end;
        text-align: right;
    }
}

/* Box04: flow bulleted lists (e.g. room services) into columns. */
.box04-text ul {
    columns: 3;
    column-gap: 40px;
}

.box04-text ul li {
    break-inside: avoid;
}

@media (max-width: 1024px) {
    .box04-text ul {
        columns: 2;
    }
}

@media (max-width: 767px) {
    .box04-text ul {
        columns: 1;
    }
}

/* Header switches to mobile mode at 1200px, but the button's hide-from-xlg helper
   only kicks in at 1024px — bridge the gap. */
@media (max-width: 1200px) {
    #tt-header .tt-header-col-right .tt-btn-secondary.hide-from-xlg {
        display: none !important;
    }
}

/* Header Book Now button — two stacked lines ("Online Booking" / "Best Rate"),
   taller than the template's single-line default (48px) to fit them. */
@media (min-width: 1201px) {
    #tt-header .tt-header-col-right .tt-btn-secondary {
        height: 60px;
        padding: 0 26px;
        font-size: 13px;
    }
}

#tt-header .tt-header-col-right .tt-btn-secondary .tt-btn-inner > * {
    flex-direction: column;
    gap: 2px;
}

#tt-header .tt-header-col-right .tt-btn-secondary .tt-header-book-line {
    white-space: nowrap;
    line-height: 1.3;
}

#tt-header .tt-header-col-right .tt-btn-secondary .tt-btn-inner > *::after {
    white-space: pre-line;
    line-height: 1.3;
}

/* Hero: smaller main claim (template ph-cap-xlg is clamp(58px, 8vw, 132px)). */
#page-header.ph-cap-xlg .ph-caption-title {
    font-size: clamp(48px, 6vw, 104px);
}

/* Hero: smaller scroll-down circle (template default 240px / 160px below 1400px). */
@media (min-width: 769px) {
    #page-header.ph-full .tt-scroll-down-inner {
        width: 200px;
        height: 200px;
    }
}
@media (min-width: 769px) and (max-width: 1400px) {
    #page-header.ph-full .tt-scroll-down-inner {
        width: 140px;
        height: 140px;
    }
}

/* Book Now button — navy background in scrolled (tt-filled) state. */
#tt-header .tt-header-col-right .tt-btn-secondary,
body.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary,
body.ph-video-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary,
body.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary {
    background-color: var(--remorino-white);
    box-shadow: inset 0 0 0 1px var(--remorino-navy);
}

#tt-header .tt-header-col-right .tt-btn-secondary > *,
#tt-header .tt-header-col-right .tt-btn-secondary > *::after,
body.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *,
body.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *::after,
body.ph-video-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *,
body.ph-video-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *::after,
body.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *,
body.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-header-col-right .tt-btn-secondary > *::after {
    color: var(--remorino-navy);
}


/* Header alter: side columns shrink before the center nav does. */
@media (min-width: 1201px) {
    #tt-header.tt-header-alter .tt-header-col-left,
    #tt-header.tt-header-alter .tt-header-col-right {
        flex-shrink: 3;
    }

    #tt-header.tt-header-alter .tt-header-col-center {
        flex-shrink: 0;
    }

    /* Prevent individual menu items from wrapping to a second line. */
    .tt-main-menu-list > li > a,
    .tt-main-menu-list > li > .tt-submenu-trigger > a {
        white-space: nowrap;
    }
}

/* Narrow desktop: compress the nav a bit so it doesn't overflow
   (template defaults: 55px item gap, 24px font). */
@media (min-width: 1201px) and (max-width: 1500px) {
    .tt-main-menu-list > li {
        margin-right: 28px;
    }

    .tt-main-menu-list > li > a,
    .tt-main-menu-list > li > .tt-submenu-trigger > a {
        font-size: 20px;
    }
}

/* Hide the template dot caret on main-menu dropdown items. */
.tt-main-menu-list .tt-submenu-wrap > .tt-submenu-trigger > a::after {
    display: none;
}

/* Main nav chevron caret — desktop only (template handles mobile expand). */
@media (max-width: 1200px) {
    .tt-nav-caret {
        display: none;
    }
}

.tt-nav-caret {
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.tt-main-menu-list .tt-submenu-wrap.tt-submenu-open .tt-nav-caret {
    transform: rotate(180deg);
}


/* RTE button style: <p class="btn"><a>...</a></p>, matching the header Book Now button. */
p.btn,
.button-primary {
    margin: 0;
}

p.btn a,
.button-primary a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    margin: 12px 7px;
    padding: 0 24px;
    background-color: var(--tt-main-color);
    border-radius: 100px;
    color: var(--remorino-white);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

p.btn a,
p.btn a *,
p.btn a *::after {
    color: var(--remorino-white);
    -webkit-text-fill-color: var(--remorino-white);
    font-style: normal;
}

p.btn a:hover,
p.btn a:focus,
.button-primary a:hover,
.button-primary a:focus {
    color: var(--remorino-white);
}

/* Page.cshtml hero slider inside template page-header image layer. */
#page-header .ph-image-slider,
#page-header .ph-image-slider .swiper,
#page-header .ph-image-slider .swiper-wrapper,
#page-header .ph-image-slider .swiper-slide,
#page-header .ph-image-slider .tt-content-slider-item {
    width: 100%;
    height: 100%;
}

#page-header .ph-image-slider .tt-content-slider-item {
    padding-bottom: 0;
}

#page-header .ph-image-slider .tt-cs-image-wrap {
    position: absolute;
    inset: 0;
}

#page-header .ph-image-slider .tt-cs-image-wrap picture,
#page-header .ph-image-slider .tt-cs-image-wrap picture img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

#page-header .ph-image-slider .tt-cs-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

#page-header .ph-image .ph-image-inner picture,
#page-header .ph-image .ph-image-inner picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

#page-header .ph-image-slider .tt-cs-pagination {
    display: none;
}

.tt-scroll-down-floating {
    position: fixed;
}

/* TripAdvisor overlay on homepage hero */
.page-header-wrap {
    position: relative;
}

.ta-overlay {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.ta-badge-img {
    width: 120px;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .ta-overlay {
        position: relative;
        bottom: auto;
        left: auto;
        justify-content: center;
        align-items: center;
        padding: 24px 20px;
        background-color: var(--remorino-bg);
        gap: 20px;
    }

    .ta-badge-img {
        width: 80px;
    }
}

.tt-text-reveal > span h1,
.tt-text-reveal > span h2,
.tt-text-reveal > span h3,
.tt-text-reveal > span h4,
.tt-text-reveal > span h5,
.tt-text-reveal > span h6,
.tt-text-reveal > span p {
    -webkit-text-fill-color: var(--tt-linear-text-bg-color);
    -webkit-background-clip: text;
    background-clip: text;
    background-image: inherit;
    background-size: inherit;
    background-repeat: no-repeat;
}

.tt-text-reveal > span li,
.tt-text-reveal > span li * {
    -webkit-text-fill-color: var(--tt-text-color);
}

/* Booking overlay — Fancybox inline content */
.booking-overlay-inner {
    padding: 55px 45px 45px;
    text-align: center;
    font-family: "Poppins", sans-serif;
    max-width: 580px;
    width: 100%;
    background: var(--remorino-white);
}

.booking-overlay-title {
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.booking-overlay-wave {
    font-size: 20px;
    letter-spacing: 6px;
    opacity: 0.35;
    margin-bottom: 28px;
}

.booking-overlay-body {
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    margin-bottom: 32px;
}

.booking-overlay-percent {
    font-size: 52px;
    flex-shrink: 0;
    color: var(--tt-text-color);
    opacity: 0.6;
    line-height: 1;
}

.booking-overlay-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tt-text-color);
}

.booking-overlay-text p {
    margin: 0;
}

.booking-overlay-cta {
    margin-top: 8px;
}

@media (max-width: 500px) {
    .booking-overlay-inner {
        padding: 50px 24px 32px;
    }

    .booking-overlay-body {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

/* Box13 tags */
.box13-tags { margin-bottom: 40px; }
.box13-tags > ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.box13-tag-chip { display: block; padding: 2px 10px; font-size: 14px; font-weight: 300; color: var(--tt-text-color); background-color: rgb(160 160 160 / 15%); border-radius: 50px; transition: all 0.2s ease-in-out; }
.box13-tags > ul > li:hover .box13-tag-chip { background-color: var(--tt-main-color); color: var(--remorino-white); }

/* Box09: keep sticky-hover media effects when image output is a <picture> from PskCrop. */
.tt-shs-item-image .box09-media,
.tt-shs-item-image .box09-media picture,
.tt-shs-item-image .box09-media picture img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.tt-shs-item-image .box09-media picture img {
    object-fit: cover;
    object-position: 50% 50%;
}

/* Box14: keep Next Project media effects when image output is a <picture> from PskCrop. */
.tt-npi-image .box14-media,
.tt-npi-image .box14-media picture,
.tt-npi-image .box14-media picture img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.tt-npi-image .box14-media picture img {
    object-fit: cover;
    object-position: 50% 50%;
}

.tt-content-slider.ph-image-slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.tt-content-slider.ph-image-slideshow .ph-image {
    position: absolute;
    inset: 0;
}