/* Riad Melhoun — design layer (loaded last, overrides the template styles)

   Character
   - World: carved cedar and zellige tile, tadelakt plaster, a brass lantern;
     "Melhoun" is the sung poetry of Arabo-Andalusian Morocco.
   - Type: the site's original fonts are kept untouched.
   - Colour: brass gold is the single signature (actions, one highlight).
     Neutrals are warm: tadelakt plaster for light surfaces, cedar brown for
     text, deep zellige green for the dark sections.
   - Space: airy and editorial; tight inside groups, wide between sections.
   - Finish: flat colour planes (plaster / sand / green). No shadows on
     content, squared corners like cut tile, and one arch: portrait photos
     take the shape of the riad's doorways.
*/

:root {

  --rm-plaster: #f8f2e6;      /* page */
  --rm-sand: #efe6d4;         /* alternate light plane */
  --rm-card: #ffffff;         /* card on sand */
  --rm-green: #10261f;        /* dark sections (zellige) */
  --rm-green-2: #183328;      /* cards on green */
  --rm-green-3: #0b1c17;      /* deepest plane */
  --rm-cedar: #2a211b;        /* text */
  --rm-cedar-2: #5a4e44;      /* secondary text */
  --rm-on-dark: #f8f2e6;
  --rm-on-dark-2: #c4cfc8;
  --rm-rule: rgba(42, 33, 27, 0.14);
  --rm-rule-dark: rgba(248, 242, 230, 0.14);

  --rm-brass: #c9a13b;        /* signature: fills, text on green */
  --rm-brass-hover: color-mix(in oklab, var(--rm-brass) 86%, black);
  --rm-brass-text: #775610;   /* brass for text on light planes */
  --rm-on-brass: #1e1510;

  --rm-radius: 2px;           /* cut-tile corners */
  --rm-radius-card: 6px;
  --rm-arch: 999px 999px 6px 6px;

  --rm-space-section: clamp(72px, 10vw, 128px);

  --rm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rm-dur: 220ms;

  /* eight-point zellige star */
  --rm-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l3.51 3.51h4.98v4.98L24 12l-3.51 3.51v4.98h-4.98L12 24l-3.51-3.51H3.51v-4.98L0 12l3.51-3.51V3.51h4.98z'/%3E%3C/svg%3E");

  /* template variables */
  --theme: var(--rm-brass);
  --text: var(--rm-cedar-2);
  --header: var(--rm-cedar);
  --black: var(--rm-green);
  --body: var(--rm-plaster);
}

/* ---------- Typography ---------- */

body {
  color: var(--rm-cedar-2);
  background-color: var(--rm-plaster) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p { text-wrap: pretty; }

section.hero-section .hero-content h2,
section.hero-section h2.fw-semibold {
  margin-bottom: 24px !important;
}

/* The line above a headline, led by a zellige star */
body .sub-font,
body .sub-title {
  color: var(--rm-brass) !important;
}

.sub-font::before,
.sub-title::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 10px;
  vertical-align: 0.06em;
  background: currentColor;
  -webkit-mask: var(--rm-star) center / contain no-repeat;
  mask: var(--rm-star) center / contain no-repeat;
}

body .white-bg .sub-font,
body .bg-light .sub-font,
body .sub-font.black-clr,
body .about-section05 .sub-font,
body .city-view-section .sub-font,
body .discover-marrakech .sub-font {
  color: var(--rm-brass-text) !important;
}

body .hero-section .sub-font,
body .hero-section .sub-title { color: #fff !important; }

/* ---------- Surfaces: plaster, sand, zellige green ---------- */

.white-bg,
.city-view-content,
.city-view-content-wrap,
.footer-section.white-bg,
.about-section05,
.city-view-section {
  background-color: var(--rm-plaster) !important;
}

.bg-light,
.discover-marrakech {
  background: var(--rm-sand) !important;
}

.day-night-section,
.blog-section.black-bg,
.black-bg {
  background-color: var(--rm-green) !important;
}

.services-section { background: var(--rm-green) !important; }
.testimonials-section { background: var(--rm-green-3) !important; }

.day-night-section,
.services-section,
.testimonials-section,
.blog-section.black-bg,
.black-bg,
.hero-section,
.watch5-section,
#header-sticky {
  --text: var(--rm-on-dark-2);
}

.white-bg :is(h2, h3, h4, h5),
.bg-light :is(h2, h3, h4, h5),
.discover-marrakech :is(h2, h3, h4, h5),
.city-view-section :is(h2, h3, h4, h5):not(.white-clr) {
  color: var(--rm-cedar) !important;
}

.white-bg p.black-clr,
.city-view-section p.black-clr,
.about-section05 p {
  color: var(--rm-cedar-2) !important;
}

.day-night-section p,
.services-section p.description {
  color: var(--rm-on-dark-2) !important;
}

/* ---------- Layout rhythm ---------- */

@media (min-width: 1200px) {
  .container { max-width: 1200px !important; }
}

.section-padding,
.blog-section.space-top.space-bottom {
  padding-top: var(--rm-space-section) !important;
  padding-bottom: var(--rm-space-section) !important;
}

/* ---------- Header ---------- */

/* Top bar: one quiet line of contact, time and socials */
.mini-time-bar {
  background: var(--rm-green-3) !important;
  border-bottom: 1px solid var(--rm-rule-dark) !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  box-shadow: none !important;
}

.mini-time-bar::before,
.mini-time-bar::after { display: none !important; }

.mini-time-bar .time-item,
.mini-time-bar .time-item span,
.mini-time-bar a {
  color: var(--rm-on-dark-2) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color var(--rm-dur) var(--rm-ease);
}

.mini-time-bar .time-item { gap: 8px; padding: 0 !important; }

.mini-time-bar a:hover,
.mini-time-bar a:hover span { color: var(--rm-on-dark) !important; }

.mini-time-bar i { color: var(--rm-brass) !important; }

.mini-time-bar .time-separator {
  width: 1px !important;
  height: 14px !important;
  background: var(--rm-rule-dark) !important;
}

.mini-time-bar .social-links a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rm-rule-dark) !important;
  border-radius: 50% !important;
}

.mini-time-bar .social-links a:hover {
  border-color: var(--rm-brass) !important;
}

.mini-time-bar .social-links a i { color: var(--rm-on-dark-2) !important; }
.mini-time-bar .social-links a:hover i { color: var(--rm-brass) !important; }

#header-sticky {
  background: color-mix(in oklab, var(--rm-green) 78%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--rm-rule-dark);
}

#header-sticky .header-main {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border: 0 !important;
}

/* ---------- Buttons: squared like cut tile, brass is the only fill ---------- */

.theme-btn,
.btn,
.book-now-btn,
.whatsapp-contact-btn,
.email-contact-btn {
  border-radius: var(--rm-radius) !important;
  min-height: 46px;
  transition: background-color var(--rm-dur) var(--rm-ease),
              color var(--rm-dur) var(--rm-ease),
              border-color var(--rm-dur) var(--rm-ease),
              transform var(--rm-dur) var(--rm-ease) !important;
}

.theme-btn:active,
.btn:active,
.book-now-btn:active { transform: scale(.98); }

.theme-btn:not(.bg-transparent),
.theme-btn.theme3-btn,
.btn-primary,
.book-now-btn {
  background: var(--rm-brass) !important;
  border-color: var(--rm-brass) !important;
  color: var(--rm-on-brass) !important;
}

.theme-btn:not(.bg-transparent):hover,
.theme-btn.theme3-btn:hover,
.btn-primary:hover,
.book-now-btn:hover {
  background: var(--rm-brass-hover) !important;
  border-color: var(--rm-brass-hover) !important;
  color: var(--rm-on-brass) !important;
}

.theme-btn::before,
.theme-btn::after { display: none !important; }

.theme-btn.bg-transparent {
  border: 1px solid color-mix(in oklab, var(--rm-on-dark) 60%, transparent) !important;
  color: var(--rm-on-dark) !important;
  padding-inline: 26px !important;
}

.theme-btn.bg-transparent:hover {
  background: var(--rm-on-dark) !important;
  color: var(--rm-cedar) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--rm-cedar) !important;
  color: var(--rm-cedar) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--rm-cedar) !important;
  color: var(--rm-plaster) !important;
}

/* Text links with arrow */

.read-more i,
.view-more i { transition: transform var(--rm-dur) var(--rm-ease); }
.read-more:hover i,
.view-more:hover i { transform: translateX(3px); }

.white-bg .read-more,
.discover-marrakech .read-more { color: var(--rm-brass-text) !important; }

/* ---------- Cards: flat planes, no shadows ---------- */

.service-card {
  background: var(--rm-green-2) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
  transition: transform var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease) !important;
}

.service-card:hover {
  transform: translateY(-2px) !important;
  background: color-mix(in oklab, var(--rm-green-2) 88%, white) !important;
}

.service-card h3 { color: var(--rm-on-dark) !important; }
.service-card p { color: var(--rm-on-dark-2) !important; }

.testimonial-card {
  background: var(--rm-plaster) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
}

.testimonial-card::before { display: none !important; }

.rating-box {
  background: var(--rm-green-2) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
}

.attraction-item {
  background: var(--rm-card) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
}

.map-container {
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.blog-single-item {
  background: var(--rm-plaster) !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.city-item img,
.city-item .thumb { border-radius: var(--rm-radius-card) !important; }

/* The one arch: portrait photos take the shape of the riad's doorways */
.about-section05 .thumb,
.about-section05 .thumb img,
.about-section05 img:not([class*="shape"]):not([class*="ele"]) {
  border-radius: var(--rm-arch) !important;
}

/* ---------- Badges and chips ---------- */

.badge,
.room-badge {
  background: var(--rm-sand) !important;
  background-image: none !important;
  color: var(--rm-cedar-2) !important;
  border: 0 !important;
  border-radius: var(--rm-radius) !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}

.badge i,
.room-badge i { color: var(--rm-brass-text) !important; }

/* ---------- Floating controls (the only shadows: they sit above the page) ---------- */

.book-now-btn {
  height: 48px !important;
  padding-inline: 22px !important;
  box-shadow: 0 10px 24px rgba(16, 38, 31, .28) !important;
}

.language-selector .selected-language {
  border-radius: var(--rm-radius) !important;
  box-shadow: 0 10px 24px rgba(16, 38, 31, .18) !important;
}

/* ---------- Footer ---------- */

.footer-section {
  border-top: 1px solid var(--rm-rule);
}

body .footer-section .widget-head {
  color: var(--rm-cedar) !important;
}

.footer-section a:hover { color: var(--rm-brass-text) !important; }

/* ---------- Phones ---------- */

@media (max-width: 575px) {
  .service-card { padding: 24px !important; }
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- TripAdvisor icon (missing from the site's icon font) ---------- */

.fa-tripadvisor::before {
  content: "" !important;
  display: inline-block;
  width: 1.5em;
  height: 1em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.500' cy='9.500' r='4.300'/%3E%3Ccircle cx='17.500' cy='9.500' r='4.300'/%3E%3Cpath d='M2.500 4.200C5.500 1.600 18.500 1.600 21.500 4.200'/%3E%3C/g%3E%3Ccircle cx='6.500' cy='9.500' r='1.500'/%3E%3Ccircle cx='17.500' cy='9.500' r='1.500'/%3E%3Cpath d='M12 14.500l-1.700-2.600h3.400z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.500' cy='9.500' r='4.300'/%3E%3Ccircle cx='17.500' cy='9.500' r='4.300'/%3E%3Cpath d='M2.500 4.200C5.500 1.600 18.500 1.600 21.500 4.200'/%3E%3C/g%3E%3Ccircle cx='6.500' cy='9.500' r='1.500'/%3E%3Ccircle cx='17.500' cy='9.500' r='1.500'/%3E%3Cpath d='M12 14.500l-1.700-2.600h3.400z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Inner pages: same planes, same cards, same controls ---------- */

/* dark planes */
.video-section,
.offer-section,
.faq-section {
  background-color: var(--rm-green) !important;
}

.faq-section .accordion-body,
.faq-section .accordion-item,
.faq-section .accordion-button {
  background-color: var(--rm-green-2) !important;
  box-shadow: none !important;
}

/* light planes */
.bg3,
.cta-section,
.services-nav-section,
.accommodation-section,
.blog-details-section,
.blog-grid-section {
  background: var(--rm-plaster) !important;
}

.room-notice-section { background: var(--rm-sand) !important; }

/* cards on light planes: white, hairline, no shadow */
.facility-item,
.testimonial-item,
.apartment-item,
.notice-card,
.category-card,
.service-pricing-card,
.activity-group,
.review-card,
.treatment-card,
.award-card,
.service-box,
.contact-info-card,
.reservation-info-card,
.transportation-info,
.blog-card,
.featured-blog-post,
.search-wrapper,
.blog-details-content,
.sidebar-widget,
.feature-item,
.watching-information-wrap {
  background: var(--rm-card) !important;
  border: 1px solid var(--rm-rule) !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
}

.apartment-item .apartment-content { background: transparent !important; }

.offer-single-item {
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
}

.spa-image,
.spa-image img { border-radius: var(--rm-radius-card) !important; box-shadow: none !important; }

/* small controls: squared, brass or neutral */
.feature-tag,
.tag,
.price,
.view-more-btn,
.view-image-btn,
.reservation-btn,
.location-contact-btn,
.nav-pills .nav-link,
.facility-section .nav-link {
  border-radius: var(--rm-radius) !important;
  box-shadow: none !important;
}

.view-more-btn,
.view-image-btn,
.reservation-btn,
.nav-pills .nav-link.active,
.facility-section .nav-link.active {
  background: var(--rm-brass) !important;
  border-color: var(--rm-brass) !important;
  color: var(--rm-on-brass) !important;
}

.reservation-btn i,
.view-more-btn i { color: var(--rm-on-brass) !important; }

.feature-tag,
.tag,
.price,
.location-contact-btn,
.email-contact-btn {
  background: var(--rm-sand) !important;
  color: var(--rm-cedar-2) !important;
  border: 0 !important;
}

.price { color: var(--rm-brass-text) !important; }

.btn-info,
.btn-danger,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--rm-cedar) !important;
  color: var(--rm-cedar) !important;
}

.btn-info:hover,
.btn-danger:hover,
.btn-secondary:hover {
  background: var(--rm-cedar) !important;
  color: var(--rm-plaster) !important;
}

.text-warning { color: var(--rm-brass) !important; }

/* partner strip */
.brand-slider .brand-item img { opacity: .85; }

/* ---------- One pattern on every page ---------- */

/* Fonts: the site's own three, used the same way everywhere.
   Kalnia for headings, Barlow for text, Dancing Script for the line above a headline. */
:where(body, p, li, a, span, div, input, button, textarea, select, label, td, th, blockquote, small, strong, em, b):where(:not(i):not([class*="fa-"]):not(.sub-font):not(.sub-title):not(.slogan)) {
  font-family: "Barlow", sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Kalnia", serif !important;
}

:is(h1, h2, h3, h4, h5, h6) :where(span, strong, em, a, small, b) {
  font-family: inherit !important;
}

body .sub-font,
body .sub-title,
body .hero-content .slogan {
  font-family: "Dancing Script", cursive !important;
}

body .sub-font,
body .sub-title { font-size: 22px !important; }

/* Headings: one size and weight per level */
section h2 {
  font-size: clamp(32px, 3.4vw, 50px) !important;
  font-weight: 600 !important;
}

section.hero-section .hero-content h2 { font-size: clamp(40px, 4.6vw, 64px) !important; }
section.day-night-section h2 { font-size: clamp(40px, 5.4vw, 80px) !important; }

section :is(h3, h4, h5, h6) { font-weight: 700 !important; }

/* Page title band: same height and title on every inner page */
.breadcrumb-section {
  padding-top: 230px !important;
  padding-bottom: 130px !important;
  min-height: 0 !important;
}

.breadcrumb-section :is(h1, h2) {
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* Top bar layout (inner pages carry no rules of their own for it) */
.mini-time-bar { position: relative; font-size: 13px; }
.mini-time-bar .time-bar-content { min-height: 24px; }
.mini-time-bar .time-item { display: flex; align-items: center; text-decoration: none; }
.mini-time-bar .time-item i { font-size: 14px; }
.mini-time-bar .time-separator { margin: 0 15px; }

/* Header: same logo size on every page */
#header-sticky .header-logo img {
  height: 52px !important;
  width: auto !important;
}

/* Footer: the same green plane on every page */
footer.footer-section,
footer.footer-section.white-bg {
  background: var(--rm-green) !important;
  border-top: 0;
  --text: var(--rm-on-dark-2);
}

footer.footer-section.white-bg :is(p, li, a, span, div) { color: var(--rm-on-dark-2) !important; }
footer.footer-section.white-bg a:hover { color: var(--rm-brass) !important; }
footer.footer-section .widget-head,
footer.footer-section.white-bg .widget-head { color: var(--rm-on-dark) !important; }
footer.footer-section.white-bg svg path { stroke: var(--rm-brass); }
footer.footer-section .footer-bottom,
footer.footer-section [class*="footer-bottom"] { background: transparent !important; border-color: var(--rm-rule-dark) !important; }

#header-sticky .header-main { min-height: 76px; }

/* ---------- Booking notice (shown before leaving for the reservation platform) ---------- */

#bookingRedirectModal .modal-dialog { max-width: 520px; }

#bookingRedirectModal .modal-content {
  background: var(--rm-plaster) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
  box-shadow: 0 24px 60px rgba(16, 38, 31, .35) !important;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

#bookingRedirectModal .modal-header {
  background: var(--rm-green) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
}

#bookingRedirectModal .modal-title { color: var(--rm-on-dark) !important; }

#bookingRedirectModal .modal-body {
  padding: 24px !important;
  overflow-y: auto;
  color: var(--rm-cedar-2) !important;
}

#bookingRedirectModal .modal-body img {
  max-width: 96px !important;
  background: var(--rm-green);
  border-radius: 50%;
  padding: 10px;
}

#bookingRedirectModal .alert,
#bookingRedirectModal .bg-light {
  background: var(--rm-sand) !important;
  border: 0 !important;
  border-radius: var(--rm-radius-card) !important;
  color: var(--rm-cedar) !important;
}

#bookingRedirectModal .text-primary,
#bookingRedirectModal .text-success,
#bookingRedirectModal .text-info,
#bookingRedirectModal i { color: var(--rm-brass-text) !important; }

#bookingRedirectModal strong { color: var(--rm-cedar) !important; }

#bookingRedirectModal .modal-footer {
  background: var(--rm-plaster) !important;
  border-top: 1px solid var(--rm-rule) !important;
  padding: 16px 24px !important;
  gap: 12px;
}

#bookingRedirectModal .modal-footer .btn { margin: 0 !important; }
#bookingRedirectModal .modal-footer .btn i { color: inherit !important; }

@media (max-width: 575px) {
  #bookingRedirectModal .modal-footer { flex-direction: column-reverse; }
  #bookingRedirectModal .modal-footer .btn { width: 100%; }
}

/* floating controls step aside while a dialog is open */
body.modal-open .language-selector,
body.modal-open .whatsapp-button,
body.modal-open .sticky-book-button { display: none !important; }

/* ---------- Page hero band: identical on every inner page ---------- */

body .breadcrumb-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 460px;
  min-height: 0 !important;
  padding-top: 116px !important;   /* clears the top bar + menu */
  padding-bottom: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* one overlay, same tint and strength */
body .breadcrumb-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(11, 28, 23, .78) 0%, rgba(11, 28, 23, .50) 100%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

body .breadcrumb-section::after,
body .breadcrumb-section .breadcrumb-overlay,
body .breadcrumb-section .breadcrumb-decorations { display: none !important; }

body .breadcrumb-section > .container,
body .breadcrumb-section .breadcrumb-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

body .breadcrumb-section .breadcrumb-content { text-align: center; padding: 0 !important; }

/* title */
body .breadcrumb-section :is(h1, h2) {
  margin: 0 0 14px !important;
  padding: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* optional line under the title (subtitle or article details) */
body .breadcrumb-section p,
body .breadcrumb-section .blog-meta,
body .breadcrumb-section .blog-meta span {
  font-size: 17px !important;
  color: var(--rm-on-dark-2) !important;
  margin: 0 auto 14px !important;
  max-width: 640px;
  text-align: center;
}

body .breadcrumb-section .blog-meta span { margin: 0 10px !important; }
body .breadcrumb-section .blog-meta i { color: var(--rm-brass) !important; }

/* breadcrumb trail */
body .breadcrumb-section .breadcrumb-navigation { margin: 0 !important; padding: 0 !important; }

body .breadcrumb-section .breadcrumb-navigation ul {
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .breadcrumb-section .breadcrumb-navigation li,
body .breadcrumb-section .breadcrumb-navigation li a,
body .breadcrumb-section .breadcrumb-navigation li i {
  font-size: 15px !important;
  color: var(--rm-on-dark-2) !important;
  line-height: 1.4 !important;
}

body .breadcrumb-section .breadcrumb-navigation li a:hover { color: var(--rm-on-dark) !important; }

body .breadcrumb-section .breadcrumb-navigation li.active,
body .breadcrumb-section .breadcrumb-navigation li.active * { color: var(--rm-brass) !important; }

@media (max-width: 767px) {
  body .breadcrumb-section { height: 360px; padding-top: 96px !important; }
}

/* ---------- Softer type ---------- */

h1, h2,
section h2,
body .breadcrumb-section :is(h1, h2) { font-weight: 500 !important; }

section :is(h3, h4, h5, h6),
h3, h4, h5, h6 { font-weight: 600 !important; }

p, li { font-weight: 400; }

/* ---------- Icons: one thin-line style, one container ---------- */

i.fas, i.fa-solid, i.far, i.fa-regular, i.fa, i.fal, i.fa-light {
  font-weight: 300 !important;
}

/* rating stars stay filled */
i.fa-star, i.fa-star-half, i.fa-star-half-alt, i.fa-star-half-stroke { font-weight: 900 !important; }

.service-icon,
.attraction-icon,
.category-icon,
.notice-icon,
.activity-icon,
.separator-icon,
.contact-info-card .icon,
.service-box .icon,
.transportation-info .icon,
.feature-item .icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid color-mix(in oklab, var(--rm-brass-text) 45%, transparent) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease);
}

.service-icon i,
.attraction-icon i,
.category-icon i,
.notice-icon i,
.activity-icon i,
.separator-icon i,
.contact-info-card .icon i,
.service-box .icon i,
.transportation-info .icon i,
.feature-item .icon i {
  font-size: 22px !important;
  color: var(--rm-brass-text) !important;
  line-height: 1;
}

/* on the green planes the line and glyph are brass */
:is(.services-section, .offer-section, .faq-section, .testimonials-section, .black-bg, .day-night-section) :is(.service-icon, .attraction-icon, .category-icon, .notice-icon, .activity-icon, .icon) {
  border-color: color-mix(in oklab, var(--rm-brass) 55%, transparent) !important;
}

:is(.services-section, .offer-section, .faq-section, .testimonials-section, .black-bg, .day-night-section) :is(.service-icon, .attraction-icon, .category-icon, .notice-icon, .activity-icon) i {
  color: var(--rm-brass) !important;
}

:is(.service-card, .service-box, .contact-info-card, .attraction-item, .category-card, .activity-group):hover :is(.service-icon, .attraction-icon, .category-icon, .activity-icon, .icon) {
  background: color-mix(in oklab, var(--rm-brass) 14%, transparent) !important;
}

/* inline icons next to text */
li > i[class*="fa-"],
.time-item > i,
.badge > i { width: 1.2em; text-align: center; }

/* ---------- Motion: quiet, the same everywhere ---------- */

html { scroll-behavior: smooth; }

@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 24px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(24px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 32px, 0); }  to { opacity: 1; transform: none; } }

.wow {
  animation-duration: .9s !important;
  animation-timing-function: var(--rm-ease) !important;
}

/* reveal on scroll (class added by assets/js/reveal.js, so nothing hides without it) */
.rm-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .8s var(--rm-ease), transform .8s var(--rm-ease);
  transition-delay: var(--rm-delay, 0ms);
  will-change: opacity, transform;
}

.rm-reveal.rm-in { opacity: 1; transform: none; }

/* cards lift, pictures ease in */
.service-card, .attraction-item, .rating-box, .blog-single-item,
.facility-item, .testimonial-item, .apartment-item, .notice-card, .category-card,
.service-pricing-card, .activity-group, .review-card, .treatment-card, .award-card,
.service-box, .contact-info-card, .blog-card, .featured-blog-post, .sidebar-widget, .feature-item {
  transition: transform .35s var(--rm-ease), border-color .35s var(--rm-ease), background-color .35s var(--rm-ease), opacity .8s var(--rm-ease) !important;
}

:is(.facility-item, .apartment-item, .service-pricing-card, .treatment-card, .award-card,
    .service-box, .contact-info-card, .blog-card, .attraction-item, .blog-single-item, .review-card):hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in oklab, var(--rm-brass-text) 40%, transparent) !important;
}

:is(.blog-single-item, .blog-card, .facility-item, .apartment-item, .city-item, .featured-blog-post, .offer-single-item) img {
  transition: transform .9s var(--rm-ease) !important;
}

:is(.blog-single-item, .blog-card, .facility-item, .apartment-item, .city-item, .featured-blog-post, .offer-single-item):hover img {
  transform: scale(1.04);
}

:is(.blog-single-item, .blog-card, .facility-item, .city-item, .featured-blog-post) :is(.thumb, .image, [class*="image"], [class*="thumb"]) { overflow: hidden; }

a, button { transition: color var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease), opacity var(--rm-dur) var(--rm-ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rm-reveal { opacity: 1 !important; transform: none !important; }
}

body h1.fw-semibold, body h2.fw-semibold, body h1.fw-bold, body h2.fw-bold { font-weight: 500 !important; }

/* ---------- Responsive: top bar and hero band ---------- */

.mini-time-bar .time-bar-content {
  flex-wrap: nowrap !important;
  height: 24px;
  gap: 16px;
}

.mini-time-bar .time-item { white-space: nowrap; }

.mini-time-bar .time-bar-left,
.mini-time-bar .time-bar-right { flex-wrap: nowrap; min-width: 0; }

.mini-time-bar .social-links a { width: 32px; height: 32px; }

/* the clock block needs room: show it on wide screens only */
@media (max-width: 1199px) {
  .mini-time-bar .time-bar-center { display: none !important; }
}

@media (max-width: 575px) {
  .mini-time-bar { font-size: 12px; }
  .mini-time-bar .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .mini-time-bar .time-bar-content { gap: 10px; }
  .mini-time-bar .time-item span { overflow: hidden; text-overflow: ellipsis; }
}

/* hero band on phones: grows with its content and always clears the header */
@media (max-width: 767px) {
  body .breadcrumb-section {
    height: auto;
    min-height: 340px !important;
    padding-top: 148px !important;
    padding-bottom: 40px !important;
  }

  body .breadcrumb-section :is(h1, h2) { font-size: 34px !important; }
  body .breadcrumb-section p,
  body .breadcrumb-section .blog-meta,
  body .breadcrumb-section .blog-meta span { font-size: 15px !important; }
  body .breadcrumb-section .blog-meta span { display: inline-block; margin: 2px 8px !important; }
}

/* tablets and small laptops: the same band, a little shorter */
@media (min-width: 768px) and (max-width: 1199px) {
  body .breadcrumb-section { height: 420px; }
}

/* rooms page on phones: give the cards their full width */
@media (max-width: 575px) {
  .category-card { padding: 16px !important; }
  .category-card .row.p-4 { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .category-card .row.p-4 > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .category-card .row > .col-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .apartment-item .apartment-content { padding: 16px !important; }
}

/* ---------- Tokens added with DESIGN.md ---------- */

:root {
  --rm-danger: #9e2a3a;   /* errors and destructive actions only */
  --rm-success: #2f6b4f;  /* confirmations and "included" ticks only */
}

.text-success, .text-success i { color: var(--rm-success) !important; }
.text-danger, .text-danger i { color: var(--rm-danger) !important; }

/* reading text: one body size */
body { font-size: 17px; }
.fs-20, .fs-18 { font-size: 17px !important; }

body .sub-font,
body .sub-title,
body .hero-content .slogan { font-weight: 600 !important; }

/* remaining cards (restaurant page) join the card pattern */
.stories-item,
.detail-item,
.experience-card,
.cooking-image {
  border-radius: var(--rm-radius-card) !important;
  box-shadow: none !important;
}

/* ---------- Loading screen ---------- */

@keyframes rmGlow      { 0%, 100% { opacity: .55; transform: scale(1); }      50% { opacity: 1; transform: scale(1.12); } }
@keyframes rmSpin      { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rmSpinBack  { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes rmLattice   { to { background-position: 96px 96px; } }
@keyframes rmLogoIn    { from { opacity: 0; transform: scale(.72) translateY(14px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rmHalo      { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes rmLetterIn  { from { opacity: 0; transform: translateY(.7em) rotateX(-80deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rmSheen     { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes rmRise      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rmLine      { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes rmLineGrow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

body .preloader {
  background: transparent !important;
  overflow: hidden;
  perspective: 900px;
}

/* the four panels are the backdrop, and the curtain that opens when the page is ready */
body .preloader .loader .loader-section .bg {
  background: var(--rm-green-3) !important;
  transition: transform .9s cubic-bezier(.77, 0, .18, 1) !important;
  transform-origin: top;
  width: 100% !important;
}

body .preloader .loader .loader-section:nth-child(2) .bg { transition-delay: .07s !important; }
body .preloader .loader .loader-section:nth-child(3) .bg { transition-delay: .14s !important; }
body .preloader .loader .loader-section:nth-child(4) .bg { transition-delay: .21s !important; }

body .preloader.loaded .loader .loader-section .bg { transform: scaleY(0); }

/* stage */
body .preloader .animation-preloader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  height: 100%;
  transition: opacity .45s var(--rm-ease), transform .6s var(--rm-ease);
}

body .preloader.loaded .animation-preloader { opacity: 0; transform: scale(1.06); }

/* a lattice of zellige stars drifting across the whole screen, lit from the centre */
body .preloader .animation-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rm-brass);
  -webkit-mask: var(--rm-star) 0 0 / 48px 48px;
  mask: var(--rm-star) 0 0 / 48px 48px;
  opacity: .05;
  animation: rmLattice 14s linear infinite;
  pointer-events: none;
}

body .preloader .animation-preloader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  margin: calc(min(120vw, 1100px) / -2) 0 0 calc(min(120vw, 1100px) / -2);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--rm-brass) 26%, transparent) 0%, transparent 70%);
  animation: rmGlow 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* two large eight-point stars turning against each other behind the name */
body .preloader .txt-loading::before,
body .preloader .txt-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--rm-brass) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

body .preloader .txt-loading::before {
  width: min(78vw, 520px);
  transform: translate(-50%, -50%);
  animation: rmSpin 38s linear infinite;
  box-shadow: 0 0 0 1px transparent;
  outline: 1px solid color-mix(in oklab, var(--rm-brass) 55%, transparent);
  outline-offset: 0;
  clip-path: none;
}

body .preloader .txt-loading::after {
  width: min(78vw, 520px);
  transform: translate(-50%, -50%) rotate(45deg);
  border-color: color-mix(in oklab, var(--rm-brass) 30%, transparent);
  animation: rmSpinBack 52s linear infinite;
}

/* logo: arrives out of the dark, with a ring that keeps breathing */
body .preloader .preloader-logo {
  position: relative;
  animation: rmLogoIn .7s var(--rm-ease) both !important;
}

body .preloader .preloader-logo::before,
body .preloader .preloader-logo::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid color-mix(in oklab, var(--rm-brass) 70%, transparent);
  border-radius: 50%;
  animation: rmHalo 2.6s ease-out infinite;
  pointer-events: none;
}

body .preloader .preloader-logo::after { animation-delay: 1.3s; }

body .preloader .center-logo {
  width: clamp(84px, 12vw, 128px) !important;
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--rm-brass) 55%, transparent)) !important;
}

/* the name: each letter turns up into place, then light runs across the brass */
body .preloader .txt-loading {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 6px 0 0 !important;
  font-family: "Kalnia", serif !important;
  font-size: clamp(38px, 9vw, 104px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform-style: preserve-3d;
}

body .preloader .txt-loading .letters-loading {
  display: inline-block;
  padding: 0 .09em;
  font-family: "Kalnia", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  color: transparent !important;
  background: linear-gradient(100deg, var(--rm-brass) 0%, var(--rm-brass) 38%, #fff3c4 50%, var(--rm-brass) 62%, var(--rm-brass) 100%) 120% 0 / 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: 50% 100%;
  animation: rmLetterIn .6s var(--rm-ease) both, rmSheen .85s linear 1s infinite;
}

body .preloader .txt-loading .letters-loading::before { display: none !important; }

body .preloader .txt-loading .letters-loading:nth-child(1) { animation-delay: .10s, 1.00s; }
body .preloader .txt-loading .letters-loading:nth-child(2) { animation-delay: .15s, 1.02s; }
body .preloader .txt-loading .letters-loading:nth-child(3) { animation-delay: .20s, 1.04s; }
body .preloader .txt-loading .letters-loading:nth-child(4) { animation-delay: .25s, 1.06s; }
body .preloader .txt-loading .letters-loading:nth-child(5) { animation-delay: .30s, 1.08s; }
body .preloader .txt-loading .letters-loading:nth-child(6) { animation-delay: .35s, 1.10s; }
body .preloader .txt-loading .letters-loading:nth-child(7) { animation-delay: .40s, 1.12s; }

/* slogan and progress line follow */
body .preloader .preloader-slogan {
  font-family: "Dancing Script", cursive !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  color: var(--rm-on-dark-2) !important;
  margin: 0 !important;
  animation: rmRise .6s var(--rm-ease) .65s both;
}

body .preloader .linear-progress {
  width: min(60vw, 260px) !important;
  margin: 10px 0 0 !important;
  animation: rmRise .6s var(--rm-ease) .8s both;
}

body .preloader .progress-bar {
  height: 1px !important;
  background: var(--rm-rule-dark) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

body .preloader .progress-fill {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, var(--rm-brass), transparent) !important;
  border-radius: 0 !important;
  animation: rmLine 1.6s cubic-bezier(.6, 0, .4, 1) infinite !important;
}

body .preloader .progress-fill::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body .preloader *,
  body .preloader *::before,
  body .preloader *::after { animation: none !important; }
  body .preloader .txt-loading .letters-loading { background-position: 50% 0; }
}

/* ---------- Alignment: every card row is even ---------- */

/* cards in a row share one height */
.row > [class*="col"]:has(> :is(.blog-single-item, .experience-card, .award-card, .review-card, .activity-group,
    .service-card, .treatment-card, .service-box, .contact-info-card, .facility-item, .testimonial-item,
    .apartment-item, .blog-card, .feature-item, .detail-item, .offer-single-item, .service-pricing-card)) {
  display: flex;
}

.row > [class*="col"] > :is(.blog-single-item, .experience-card, .award-card, .review-card, .activity-group,
    .service-card, .treatment-card, .service-box, .contact-info-card, .facility-item, .testimonial-item,
    .apartment-item, .blog-card, .feature-item, .detail-item, .offer-single-item, .service-pricing-card) {
  width: 100%;
  height: auto;
}

/* inside a card: content fills, the action sits on the bottom line */
:is(.blog-single-item, .blog-card, .experience-card, .service-card, .treatment-card, .service-box, .award-card) {
  display: flex !important;
  flex-direction: column;
}

:is(.blog-single-item, .blog-card, .experience-card) > :is(.content, .blog-content, .card-body) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

:is(.blog-single-item, .blog-card) :is(.content, .blog-content) > :is(a.view-more, .read-more, a:last-child),
.service-card > :is(.read-more, a:last-child) { margin-top: auto; }

/* photos in a row share one shape */
:is(.blog-single-item, .blog-card) :is(.thumb, .blog-image, [class*="image"]) > img,
:is(.blog-single-item, .blog-card) > a > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
}

.experience-card > img {
  width: 100% !important;
  aspect-ratio: 3 / 2;
  height: auto !important;
  object-fit: cover;
  display: block;
  border-radius: var(--rm-radius-card) var(--rm-radius-card) 0 0 !important;
}

.service-pricing-card .card-image { aspect-ratio: 16 / 10; overflow: hidden; }
.service-pricing-card .card-image :is(a, img) { display: block; width: 100%; height: 100%; }
.service-pricing-card .card-image img { object-fit: cover; }

.stories-item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rm-radius-card) !important;
}

.stories-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* partner and review logos sit on one line, whatever their artwork */
:is(.award-card, .rating-box) > img:first-child,
.review-card > div:first-child img {
  height: 32px !important;
  width: auto !important;
  max-width: 150px;
  object-fit: contain;
}

.award-card { align-items: center; }

/* two paddings only: regular cards and compact ones */
:is(.service-card, .attraction-item, .testimonial-item, .treatment-card, .award-card, .review-card,
    .service-box, .contact-info-card, .reservation-info-card, .transportation-info, .sidebar-widget, .activity-group) {
  padding: 32px !important;
}

:is(.rating-box, .notice-card, .detail-item, .feature-item) { padding: 20px !important; }

:is(.blog-single-item, .blog-card, .experience-card) > :is(.content, .blog-content) { padding: 24px !important; }

/* sections that kept their own gaps join the shared rhythm */
.city-view-section,
.video-section,
.restaurant-intro, .dining-experiences, .cooking-classes,
.spa-intro, .treatment-menu, .awards-section, .client-reviews, .reservation-cta,
.featured-blog-section, .blog-grid-section, .blog-details-section,
.contact-services-section, .transportation-section, .stories-section, .faq-section, .offer-section, .facility-section {
  padding-top: var(--rm-space-section) !important;
  padding-bottom: var(--rm-space-section) !important;
}

.video-section { padding-top: 0 !important; }

/* one gap between a section's heading block and its content */
section .section-title { margin-bottom: 48px !important; }
section .section-title > :last-child { margin-bottom: 0 !important; }

@media (max-width: 575px) {
  :is(.service-card, .attraction-item, .testimonial-item, .treatment-card, .award-card, .review-card,
      .service-box, .contact-info-card, .reservation-info-card, .transportation-info, .sidebar-widget, .activity-group) {
    padding: 24px !important;
  }
  section .section-title { margin-bottom: 32px !important; }
}

/* ---------- Soft type: lighter strokes, smoothed edges, a faint halo ---------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body h1, body h2,
body section h2,
body h1.fw-semibold, body h2.fw-semibold, body h1.fw-bold, body h2.fw-bold,
body .breadcrumb-section :is(h1, h2) {
  font-weight: 300 !important;
  letter-spacing: 0.015em;
}

body h3, body h4, body h5, body h6,
body section :is(h3, h4, h5, h6) { font-weight: 400 !important; }

/* the halo: each letter's own colour, spread a fraction of a pixel, so edges melt instead of cutting */
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 0 2.4px color-mix(in srgb, currentColor 60%, transparent), 0 0 7px color-mix(in srgb, currentColor 16%, transparent);
}

p, li, a, span, label, td, th, blockquote {
  text-shadow: 0 0 1.1px color-mix(in srgb, currentColor 45%, transparent);
}

/* over photographs the headline floats on a wide, soft shade instead of a hard edge */
.hero-section :is(h1, h2),
.breadcrumb-section :is(h1, h2) {
  text-shadow: 0 0 3px rgba(255, 255, 255, .6), 0 0 14px rgba(255, 255, 255, .22), 0 6px 40px rgba(0, 0, 0, .5) !important;
}

/* buttons and small labels stay a touch firmer so they remain easy to read */
.theme-btn, .btn, .book-now-btn, .badge, .room-badge, .time-item, .time-item span { text-shadow: none; }

body strong, body b { font-weight: 500; }

body p, body li { font-weight: 300; }

/* small text keeps its regular weight so it stays readable */
body :is(p, li, span, a)[class*="fs-14"], body small, .footer-section :is(p, li, a, span), .breadcrumb-navigation li { font-weight: 400; }

/* bold wrapped inside a headline follows the headline's soft weight */
body :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit !important; }

/* ---------- Riad craft motifs (replace the template's leaf and animal shapes) ---------- */

@keyframes rmSway  { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes rmTurn  { to { transform: rotate(360deg); } }
@keyframes rmFloat { 0%, 100% { transform: translateY(-50%) translateY(-8px); } 50% { transform: translateY(-50%) translateY(8px); } }

/* a brass lantern hanging in the heritage section, swaying slightly */
.day-night-section .day-ele1 {
  content: url("../img/element/motif-lantern.svg");
  top: 0 !important;
  bottom: auto !important;
  left: 6% !important;
  width: clamp(90px, 9vw, 150px) !important;
  height: auto !important;
  opacity: .5;
  z-index: 0 !important;
  transform-origin: 50% 0;
  animation: rmSway 7s ease-in-out infinite !important;
  pointer-events: none;
}

/* a zellige rosette turning very slowly in the opposite corner */
.day-night-section .day-ele2 {
  content: url("../img/element/motif-rosette.svg");
  top: -90px !important;
  right: -90px !important;
  width: clamp(240px, 26vw, 400px) !important;
  height: auto !important;
  opacity: .22;
  z-index: 0 !important;
  animation: rmTurn 160s linear infinite !important;
  pointer-events: none;
}

.day-night-section > .container { position: relative; z-index: 1; }

/* a horseshoe arch behind the heritage photograph, a tile lattice behind its text */
.about-section05 .about5-cl1 {
  content: url("../img/element/motif-arch.svg");
  left: 1.5% !important;
  width: clamp(120px, 12vw, 200px) !important;
  height: auto !important;
  opacity: .32;
  animation: rmFloat 9s ease-in-out infinite !important;
  pointer-events: none;
}

.about-section05 .about5-cl2 {
  content: url("../img/element/motif-lattice.svg");
  top: -60px !important;
  right: -120px !important;
  width: clamp(280px, 32vw, 480px) !important;
  height: auto !important;
  opacity: .2;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  pointer-events: none;
}

/* a band of stars down the side of the packages section */
.offer-section .offer-ele {
  content: url("../img/element/motif-band.svg");
  left: 1.5% !important;
  width: clamp(60px, 6vw, 96px) !important;
  height: auto !important;
  opacity: .4;
  animation: rmFloat 11s ease-in-out infinite !important;
  pointer-events: none;
}

/* every green section carries a barely visible zellige tile, like light on a tiled wall */
.day-night-section,
.services-section,
.testimonials-section,
.offer-section,
.faq-section,
.video-section,
.blog-section.black-bg,
.black-bg:not(footer):not(.icon) {
  background-image: url("../img/element/motif-tile.svg") !important;
  background-size: 96px 96px !important;
  background-repeat: repeat !important;
  background-blend-mode: soft-light;
}

/* a carved frieze of stars closes every page hero band */
body .breadcrumb-section::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center / 14px 14px repeat-x;
  mask: var(--rm-star) center / 14px 14px repeat-x;
  opacity: .85;
  z-index: 1;
}

@media (max-width: 767px) {
  .day-night-section .day-ele1 { left: 3% !important; opacity: .35; }
  .day-night-section .day-ele2 { top: -60px !important; right: -80px !important; }
  .about-section05 .about5-cl1, .offer-section .offer-ele { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .day-ele1, .day-ele2, .about5-cl1, .offer-ele { animation: none !important; }
}

/* ---------- Video section: the sharpest photograph of the courtyard that exists ---------- */

.watch5-section {
  background-image: url("../img/global/Melhoun_0727.JPG") !important;
  background-size: cover !important;
  background-position: center 60% !important;
}

/* ---------- Footer: white, organised on one grid, icons visible ---------- */

footer.footer-section,
footer.footer-section.white-bg,
footer.footer-section.black-bg {
  position: relative;
  background: #ffffff !important;
  background-image: none !important;
  border-top: 0 !important;
  padding-top: 86px !important;
  padding-bottom: 0 !important;
  --text: var(--rm-cedar-2);
}

/* a frieze of stars along the top edge */
footer.footer-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center / 14px 14px repeat-x;
  mask: var(--rm-star) center / 14px 14px repeat-x;
}

footer.footer-section .footer-widget-wrapper { padding: 0 0 48px !important; margin: 0 !important; border: 0 !important; }

/* four columns, each starting on its own left edge and on the same top line */
footer.footer-section .row { align-items: flex-start !important; --bs-gutter-y: 40px; }

footer.footer-section .row > [class*="col-"] {
  display: block !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

footer.footer-section .single-footer-widget { width: 100%; max-width: 300px; margin: 0 !important; padding: 0 !important; }

footer.footer-section .widget-head,
footer.footer-section.white-bg .widget-head {
  font-family: "Kalnia", serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--rm-cedar) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  min-height: 60px;
  display: flex;
  align-items: flex-end;
}

footer.footer-section .widget-head img { width: 72px !important; height: auto !important; display: block; }

footer.footer-section :is(p, li, a, span),
footer.footer-section.white-bg :is(p, li, a, span, div):not(.widget-head) {
  color: var(--rm-cedar-2) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-shadow: none;
}

footer.footer-section p { margin: 0 0 20px !important; }

footer.footer-section a:hover,
footer.footer-section.white-bg a:hover { color: var(--rm-brass-text) !important; }

footer.footer-section ul { margin: 0 !important; padding: 0 !important; }

footer.footer-section .important-link { display: grid !important; gap: 10px !important; }

/* contact rows: icon column, then text; icons in dark brass so they show on white */
footer.footer-section .adredd-info { display: grid !important; gap: 16px !important; }

footer.footer-section .adredd-info li {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  gap: 12px !important;
  align-items: start !important;
}

footer.footer-section .adredd-info li > :is(svg, i) {
  width: 20px !important;
  height: 20px !important;
  margin-top: 2px;
  flex: none;
  font-size: 18px !important;
  line-height: 20px !important;
  text-align: center;
  color: var(--rm-brass-text) !important;
}

footer.footer-section svg path[stroke] { stroke: var(--rm-brass-text) !important; }
footer.footer-section svg path[fill]:not([fill="none"]) { fill: var(--rm-brass-text) !important; }

/* newsletter field and social buttons */
footer.footer-section .adjust-form {
  width: 100%;
  margin: 0 0 20px !important;
  border: 1px solid var(--rm-rule) !important;
  border-radius: var(--rm-radius) !important;
  background: var(--rm-plaster) !important;
  overflow: hidden;
}

footer.footer-section .adjust-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--rm-cedar) !important;
  font-size: 16px !important;
}

footer.footer-section .adjust-form input::placeholder { color: var(--rm-cedar-2); }

footer.footer-section .adjust-form .theme-btn {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0 !important;
  border-radius: 0 !important;
}

footer.footer-section .social-cmn { gap: 10px !important; margin: 0 !important; }

footer.footer-section .social-cmn a {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--rm-rule) !important;
  border-radius: 50% !important;
}

footer.footer-section .social-cmn a i { color: var(--rm-cedar) !important; font-size: 15px !important; }
footer.footer-section .social-cmn a:hover { border-color: var(--rm-brass) !important; background: var(--rm-brass) !important; }
footer.footer-section .social-cmn a:hover i { color: var(--rm-on-brass) !important; }

/* payment marks on one line */
footer.footer-section button[type="button"] { background: transparent !important; border: 0 !important; padding: 0 !important; line-height: 0; }
footer.footer-section button[type="button"] img { height: 22px !important; width: auto !important; }

/* closing line */
footer.footer-section :is(.footer-bottom, [class*="footer-bottom"], .copyright, [class*="copyright"]) {
  background: transparent !important;
  border-top: 1px solid var(--rm-rule) !important;
  padding: 22px 0 !important;
  margin: 0 !important;
  text-align: center;
}

footer.footer-section :is(.footer-bottom, [class*="footer-bottom"]) :is(p, span, a) { margin: 0 !important; font-size: 14px !important; }

@media (max-width: 575px) {
  footer.footer-section { padding-top: 64px !important; }
  footer.footer-section .single-footer-widget { max-width: none; }
  footer.footer-section .widget-head { min-height: 0; }
}

/* footer credit */
footer.footer-section .footer-bottom .rm-credit {
  display: block;
  margin-top: 6px;
  font-size: 13px !important;
  color: var(--rm-cedar-2) !important;
}

footer.footer-section .footer-bottom .rm-credit a,
footer.footer-section .footer-bottom a.theme-clr {
  color: var(--rm-brass-text) !important;
  font-weight: 500 !important;
}

footer.footer-section .footer-bottom .rm-credit a { font-size: 13px !important; }
footer.footer-section .footer-bottom .rm-credit a:hover { text-decoration: underline; }

/* ---------- Contrast: every text passes on the plane it sits on ---------- */

/* the script line: dark brass by default, bright brass only on green planes and photographs */
body .sub-font,
body .sub-title { color: var(--rm-brass-text) !important; }

body :is(.day-night-section, .services-section, .testimonials-section, .offer-section, .faq-section,
         .video-section, .blog-section.black-bg, .black-bg, .watch5-section) :is(.sub-font, .sub-title) {
  color: var(--rm-brass) !important;
}

body :is(.hero-section, .breadcrumb-section) :is(.sub-font, .sub-title) { color: #fff !important; }

/* green planes: headings and running text are always light, unless they sit inside a light card */
:is(.day-night-section, .services-section, .testimonials-section, .offer-section, .faq-section, .video-section, .blog-section.black-bg)
  :is(h1, h2, h3, h4, h5, h6):not(:is(.testimonial-item, .testimonial-card, .blog-single-item, .watching-information-wrap, .rating-box) *) {
  color: var(--rm-on-dark) !important;
}

:is(.day-night-section, .services-section, .testimonials-section, .offer-section, .faq-section, .video-section, .blog-section.black-bg)
  :is(p, li, small, .rating-count, .description):not(:is(.testimonial-item, .testimonial-card, .blog-single-item, .watching-information-wrap, .rating-box) *) {
  color: var(--rm-on-dark-2) !important;
}

/* light cards and light planes: brass text becomes the dark brass that passes */
:is(.testimonial-card, .testimonial-item, .treatment-card, .detail-item, .review-card, .transportation-info,
    .service-pricing-card, .blog-single-item, .blog-card, .attraction-item, .award-card, .contact-info-card,
    .service-box, .activity-group, .apartment-item, .category-card, .notice-card, .sidebar-widget, .featured-blog-post)
  :is(a.read-more, .read-more, .source, .treatment-price, .price-note, .text-warning, .price, .date, .category) {
  color: var(--rm-brass-text) !important;
}

:is(.detail-item, .transportation-info, .reservation-info-card) :is(h3, h4, h5) { color: var(--rm-brass-text) !important; }

.about-section .exprience,
.about-section .exprience * { color: var(--rm-brass-text) !important; }

.blockquote-footer,
.blockquote-footer cite { color: var(--rm-cedar-2) !important; }

/* menu: the current page reads in light text with a brass underline; the bar is more opaque over photos */
#header-sticky { background: color-mix(in oklab, var(--rm-green) 90%, transparent) !important; }
#header-sticky nav ul li a { color: var(--rm-on-dark) !important; }
#header-sticky nav ul li:is(.active, .current-menu-item) > a { color: #fff !important; }

/* ---------- Removed: floating compass shortcut ---------- */

.quick-nav { display: none !important; }

/* ---------- Footer closing line ---------- */

footer.footer-section .footer-bottom {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 6px;
  padding: 20px 0 22px !important;
  margin: 0 !important;
  border-top: 1px solid var(--rm-rule) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  text-align: left !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-cedar-2) !important;
}

footer.footer-section .footer-bottom :is(a, span) {
  font-size: 13px !important;
  letter-spacing: 0.06em;
}

footer.footer-section .footer-bottom a.theme-clr,
footer.footer-section .footer-bottom .rm-credit a {
  color: var(--rm-cedar) !important;
  font-weight: 600 !important;
  text-decoration: none;
  border-bottom: 1px solid var(--rm-brass);
  padding-bottom: 1px;
}

footer.footer-section .footer-bottom a:hover { color: var(--rm-brass-text) !important; }

footer.footer-section .footer-bottom .rm-credit {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto !important;
  color: var(--rm-cedar-2) !important;
}

/* a small zellige star sets the credit apart */
footer.footer-section .footer-bottom .rm-credit::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center / contain no-repeat;
  mask: var(--rm-star) center / contain no-repeat;
}

@media (max-width: 767px) {
  footer.footer-section .footer-bottom { justify-content: center; text-align: center !important; padding-bottom: 86px !important; }
  footer.footer-section .footer-bottom .rm-credit { margin: 6px 0 0 !important; width: 100%; justify-content: center; }
}

/* credit heart: filled, deep red */
footer.footer-section .footer-bottom .rm-credit i {
  font-weight: 900 !important;
  font-size: 12px !important;
  color: var(--rm-danger) !important;
}

/* ---------- Video sections: sharpest courtyard photographs, one quiet play button ---------- */

@keyframes rmRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.watch5-section {
  padding: clamp(150px, 19vw, 270px) 0 !important;
  position: relative;
}

.watch5-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(11, 28, 23, .25), rgba(11, 28, 23, .5)) !important;
  opacity: 1 !important;
}

.video-section .luxuries-wrap {
  height: clamp(340px, 44vw, 620px);
  overflow: hidden;
}

.video-section .luxuries-wrap img.mimg {
  content: url("../img/global/Melhoun_0655.JPG");
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

.video-section .luxuries-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 28, 23, .2), rgba(11, 28, 23, .48));
  pointer-events: none;
}

body .luxuries-vid {
  width: 92px !important;
  height: 92px !important;
  background: color-mix(in oklab, var(--rm-green) 40%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 50% !important;
  color: #fff !important;
  z-index: 2 !important;
  transition: background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease), transform var(--rm-dur) var(--rm-ease) !important;
}

body .luxuries-vid i {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-left: 4px;
  line-height: 1 !important;
}

body .luxuries-vid::before,
body .luxuries-vid::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 50% !important;
  animation: rmRing 2.8s ease-out infinite !important;
  pointer-events: none;
}

body .luxuries-vid::after { animation-delay: 1.4s !important; }

body .luxuries-vid:hover {
  background: var(--rm-brass) !important;
  border-color: var(--rm-brass) !important;
  transform: scale(1.05);
}

body .luxuries-vid:hover i { color: var(--rm-on-brass) !important; }

@media (max-width: 767px) {
  .watch5-section { background-attachment: scroll !important; }
  body .luxuries-vid { width: 72px !important; height: 72px !important; }
}

/* ---------- Services page: header and price cards ---------- */

.services-nav-section::before,
.services-nav-section::after { display: none !important; }

.services-nav-section .section-title > span:first-child {
  display: block;
  font-family: "Kalnia", serif !important;
  font-size: clamp(26px, 2.6vw, 38px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2;
  color: var(--rm-cedar) !important;
  text-shadow: 0 0 2.4px color-mix(in srgb, currentColor 60%, transparent);
}

.services-nav-section .title-separator { margin: 18px auto !important; }

.services-nav-section .title-separator::before,
.services-nav-section .title-separator::after {
  background: var(--rm-brass) !important;
  background-image: none !important;
  height: 1px !important;
  opacity: .7;
}

.services-nav-section .title-description {
  max-width: 640px;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--rm-cedar-2) !important;
}

.services-nav-section .title-description::after { display: none !important; }

.service-pricing-card {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

.service-pricing-card::before,
.service-pricing-card::after { display: none !important; }

.service-pricing-card .card-image {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.service-pricing-card .card-image > a { display: block !important; width: 100% !important; height: 100% !important; }

.service-pricing-card .card-image img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

.service-pricing-card .card-header:not(.overlay-header) {
  padding: 26px 28px 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

.service-pricing-card .card-header h3 { font-size: 26px !important; margin: 0 0 4px !important; }

.service-pricing-card .card-header:not(.overlay-header) .subtitle,
.service-pricing-card .card-header:not(.overlay-header) .price-note {
  font-family: "Dancing Script", cursive !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--rm-brass-text) !important;
  margin: 0 !important;
}

.service-pricing-card .card-header::after,
.service-pricing-card .card-header::before { display: none !important; }

.service-pricing-card .card-header.overlay-header {
  background: linear-gradient(to top, rgba(11, 28, 23, .88), rgba(11, 28, 23, 0)) !important;
  padding: 60px 28px 22px !important;
}

.service-pricing-card .card-header.overlay-header :is(h3, p) { color: #fff !important; text-align: left !important; }

.service-pricing-card .card-body { padding: 18px 28px 28px !important; flex: 1 1 auto; }

.service-pricing-card .card-body h4 {
  font-family: "Barlow", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-cedar-2) !important;
  margin: 14px 0 4px !important;
  text-shadow: none;
}

.service-pricing-card .pricing-list { margin: 0 !important; padding: 0 !important; list-style: none; }

.service-pricing-card .pricing-list li {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--rm-rule) !important;
  border-radius: 0 !important;
}

.service-pricing-card .pricing-list li:last-child { border-bottom: 0 !important; }

.service-pricing-card .pricing-list .service { font-size: 16px !important; color: var(--rm-cedar) !important; }

.service-pricing-card .pricing-list .price {
  flex: none;
  padding: 4px 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-pricing-card .note {
  margin: 14px 0 0 !important;
  font-size: 14px !important;
  font-style: italic;
  color: var(--rm-cedar-2) !important;
}

/* ---------- Side panel (menu and practical information) ---------- */

.offcanvas__overlay {
  background: rgba(11, 28, 23, .62) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.offcanvas__info {
  width: min(440px, 100vw) !important;
  background: var(--rm-green-3) url("../img/element/motif-tile.svg") 0 0 / 96px 96px !important;
  border: 0 !important;
  box-shadow: -30px 0 80px rgba(0, 0, 0, .35) !important;
  --text: var(--rm-on-dark-2);
}

/* a column of stars runs down the panel's edge */
.offcanvas__info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center / 14px 14px repeat-y;
  mask: var(--rm-star) center / 14px 14px repeat-y;
  opacity: .85;
  z-index: 2;
}

.offcanvas__info .offcanvas__wrapper { padding: 28px 34px 44px 48px !important; background: transparent !important; }
.offcanvas__info .offcanvas__content { background: transparent !important; }

.offcanvas__info .offcanvas__top { margin-bottom: 20px !important; }
.offcanvas__info .offcanvas__logo img { width: 68px !important; height: auto !important; }

.offcanvas__info .offcanvas__close button {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--rm-rule-dark) !important;
  border-radius: 50% !important;
  color: var(--rm-on-dark) !important;
  transition: background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease);
}

.offcanvas__info .offcanvas__close button i { color: inherit !important; font-size: 16px !important; }
.offcanvas__info .offcanvas__close button:hover { background: var(--rm-brass) !important; border-color: var(--rm-brass) !important; color: var(--rm-on-brass) !important; }

.offcanvas__info :is(p, span, li, a, div, strong) { color: var(--rm-on-dark-2); text-shadow: none; }
.offcanvas__info :is(h2, h3, h4, h5) { color: var(--rm-on-dark) !important; }
.offcanvas__info strong, .offcanvas__info b { color: var(--rm-on-dark) !important; font-weight: 500; }

.offcanvas__info .offcanvas__contact > .text-center h2 {
  font-size: 24px !important;
  color: var(--rm-brass) !important;
  margin: 0 0 12px !important;
}

.offcanvas__info .divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 8px; }
.offcanvas__info .divider-line { flex: 0 0 56px; height: 1px !important; background: color-mix(in oklab, var(--rm-brass) 60%, transparent) !important; }
.offcanvas__info .divider-icon { background: transparent !important; width: auto !important; height: auto !important; }
.offcanvas__info .divider-icon i { color: var(--rm-brass) !important; font-size: 11px !important; font-weight: 900 !important; }

.offcanvas__info .side-menu { margin: 18px 0 0 !important; padding: 0 !important; list-style: none; }
.offcanvas__info .side-menu li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--rm-rule-dark); animation: none; opacity: 1 !important; transform: none !important; }

.offcanvas__info .side-menu li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 !important;
  font-family: "Kalnia", serif !important;
  font-size: 21px !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  color: var(--rm-on-dark) !important;
  background: transparent !important;
  transition: color var(--rm-dur) var(--rm-ease), padding-left var(--rm-dur) var(--rm-ease) !important;
}

.offcanvas__info .side-menu li a::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center / contain no-repeat;
  mask: var(--rm-star) center / contain no-repeat;
  opacity: 0;
  transform: scale(.4) rotate(-45deg);
  transition: opacity var(--rm-dur) var(--rm-ease), transform .4s var(--rm-ease);
}

.offcanvas__info .side-menu li a:hover,
.offcanvas__info .side-menu li.active a { color: var(--rm-brass) !important; padding-left: 8px !important; }

.offcanvas__info .side-menu li a:hover::after,
.offcanvas__info .side-menu li.active a::after { opacity: 1; transform: none; }

.offcanvas__info .offcanvas__contact > br { display: none; }

.offcanvas__info .offcanvas__contact h3,
.offcanvas__info .offcanvas__contact h4 {
  font-size: 19px !important;
  margin: 34px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}

.offcanvas__info .offcanvas__contact ul.list-unstyled li { align-items: flex-start !important; gap: 12px; margin-bottom: 12px !important; }

.offcanvas__info .offcanvas__contact-icon { flex: 0 0 22px; width: 22px !important; margin: 2px 0 0 !important; text-align: center; }
.offcanvas__info .offcanvas__contact-icon i { color: var(--rm-brass) !important; font-size: 17px !important; }

.offcanvas__info .offcanvas__contact-text,
.offcanvas__info .offcanvas__contact-text :is(a, span) { font-size: 15px !important; line-height: 1.5 !important; color: var(--rm-on-dark-2) !important; }
.offcanvas__info .offcanvas__contact-text a:hover { color: var(--rm-brass) !important; }

.offcanvas__info .header-button { margin: 22px 0 6px !important; }
.offcanvas__info .header-button .theme-btn { width: 100%; justify-content: center; min-height: 48px; }

.offcanvas__info hr,
.offcanvas__info [style*="border-top"],
.offcanvas__info [class*="border-top"] { border-color: var(--rm-rule-dark) !important; opacity: 1; }

.offcanvas__info .offcanvas__contact p { font-size: 15px !important; line-height: 1.6 !important; margin: 0 0 8px !important; }

@media (max-width: 575px) {
  .offcanvas__info .offcanvas__wrapper { padding: 22px 22px 40px 38px !important; }
  .offcanvas__info .side-menu li a { font-size: 19px !important; }
}

/* ---------- Fields: readable text and placeholder everywhere ---------- */

body :is(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], textarea, select):not(.nice-select) {
  background-color: var(--rm-plaster) !important;
  color: var(--rm-cedar) !important;
  border: 1px solid var(--rm-rule) !important;
  border-radius: var(--rm-radius) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

body :is(input, textarea)::placeholder {
  color: var(--rm-cedar-2) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--rm-cedar-2);
}

body :is(input, textarea, select):focus-visible {
  border-color: var(--rm-brass-text) !important;
  outline: 2px solid var(--rm-brass) !important;
  outline-offset: 2px;
}

/* the footer field sits inside its own framed box */
footer.footer-section .adjust-form input { border: 0 !important; background-color: transparent !important; }

/* home hero headline: the one bold statement on the site */
body section.hero-section .hero-content h2,
body section.hero-section .hero-content h2 :is(strong, b) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* side panel: plain deep green (the tile pattern competed with the text), round outlined close button */
.offcanvas__info {
  background: linear-gradient(180deg, var(--rm-green) 0%, var(--rm-green-3) 100%) !important;
}

body .offcanvas__info .offcanvas__close button,
body .offcanvas__info .offcanvas__close :is(a, span, div) {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid color-mix(in oklab, var(--rm-on-dark) 35%, transparent) !important;
  border-radius: 50% !important;
  color: var(--rm-on-dark) !important;
}

body .offcanvas__info .offcanvas__close button:hover { background: var(--rm-brass) !important; border-color: var(--rm-brass) !important; color: var(--rm-on-brass) !important; }

/* services cards: no corner brackets */
.service-pricing-card .card-body::before,
.service-pricing-card .card-body::after,
.services-nav-section .row > [class*="col-"]::before,
.services-nav-section .row > [class*="col-"]::after,
.services-nav-section .activity-group::before,
.services-nav-section .activity-group::after { display: none !important; }

/* ---------- Side panel, second pass: compact, one left edge, no boxes ---------- */

body .offcanvas__info { width: min(400px, 100vw) !important; }

body .offcanvas__info .offcanvas__wrapper { padding: 22px 28px 32px 42px !important; }

/* reset every list in the panel: no boxes, no slide-in, no per-item gaps */
body .offcanvas__info .offcanvas__content ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }

body .offcanvas__info .offcanvas__content ul li {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  position: static !important;
}

body .offcanvas__info .offcanvas__content ul li a {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  position: static !important;
}

body .offcanvas__info .offcanvas__content ul li a::before { display: none !important; }

/* top row: logo left, one round close button right */
body .offcanvas__info .offcanvas__top { margin: 0 0 14px !important; align-items: center !important; }
body .offcanvas__info .offcanvas__logo img { width: 54px !important; }

body .offcanvas__info .offcanvas__close,
body .offcanvas__info .offcanvas__close :is(a, span, div) {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .offcanvas__info .offcanvas__close button {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body .offcanvas__info .offcanvas__close button::before,
body .offcanvas__info .offcanvas__close button::after,
body .offcanvas__info .offcanvas__close::before,
body .offcanvas__info .offcanvas__close::after { display: none !important; }

/* name and divider: one quiet line, aligned to the same left edge as everything else */
body .offcanvas__info .offcanvas__contact > .text-center {
  text-align: left !important;
  margin: 0 0 6px !important;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--rm-rule-dark);
}

body .offcanvas__info .offcanvas__contact > .text-center h2 {
  font-size: 19px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

body .offcanvas__info .divider { display: none !important; }

/* menu: tight rows separated by hairlines, a star marks the current page */
body .offcanvas__info .side-menu { margin: 0 !important; }

body .offcanvas__info .side-menu li { border-bottom: 1px solid var(--rm-rule-dark) !important; }

body .offcanvas__info .side-menu li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  color: var(--rm-on-dark) !important;
  transition: color var(--rm-dur) var(--rm-ease) !important;
}

body .offcanvas__info .side-menu li a::after {
  content: "" !important;
  position: static !important;
  flex: none;
  width: 11px !important;
  height: 11px !important;
  inset: auto !important;
  background: var(--rm-brass) !important;
  -webkit-mask: var(--rm-star) center / contain no-repeat;
  mask: var(--rm-star) center / contain no-repeat;
  opacity: 0 !important;
  transform: scale(.4) rotate(-45deg);
  transition: opacity var(--rm-dur) var(--rm-ease), transform .4s var(--rm-ease) !important;
}

body .offcanvas__info .side-menu li a:hover,
body .offcanvas__info .side-menu li.active a {
  color: var(--rm-brass) !important;
  padding-left: 0 !important;
  background: transparent !important;
}

body .offcanvas__info .side-menu li a:hover::after,
body .offcanvas__info .side-menu li.active a::after { opacity: 1 !important; transform: none; }

/* section labels: small, brass, uppercase */
body .offcanvas__info .offcanvas__contact h3 {
  font-family: "Barlow", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--rm-brass) !important;
  margin: 22px 0 10px !important;
  text-shadow: none !important;
}

body .offcanvas__info .offcanvas__contact h4 {
  font-family: "Barlow", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rm-on-dark) !important;
  margin: 12px 0 6px !important;
  text-shadow: none !important;
}

/* contact rows: icon column, plain text */
body .offcanvas__info .offcanvas__contact ul.list-unstyled li.d-flex {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  gap: 10px !important;
  align-items: start !important;
  margin: 0 0 8px !important;
}

body .offcanvas__info .offcanvas__contact-icon { width: 20px !important; margin: 2px 0 0 !important; }
body .offcanvas__info .offcanvas__contact-icon i { font-size: 15px !important; }

body .offcanvas__info .offcanvas__contact-text,
body .offcanvas__info .offcanvas__contact-text :is(a, span) {
  display: block;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* policies: small type, tight rows */
body .offcanvas__info .offcanvas__contact :is(p, li) {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--rm-on-dark-2) !important;
}

body .offcanvas__info .offcanvas__contact ul.list-unstyled li:not(.d-flex) { margin: 0 0 6px !important; }
body .offcanvas__info .offcanvas__contact p { margin: 0 0 6px !important; }

body .offcanvas__info .header-button { margin: 16px 0 0 !important; }
body .offcanvas__info .header-button .theme-btn { min-height: 44px; }

body .offcanvas__info hr {
  margin: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rm-rule-dark) !important;
  opacity: 1 !important;
}

body .offcanvas__info hr + h3 { margin-top: 18px !important; }

@media (max-width: 575px) {
  body .offcanvas__info .offcanvas__wrapper { padding: 18px 20px 32px 34px !important; }
}

/* side panel fixes: the star column follows the full scrolling height; one line under the button */
body .offcanvas__info::before { display: none !important; }

body .offcanvas__info .offcanvas__wrapper { position: relative !important; min-height: 100%; }

body .offcanvas__info .offcanvas__wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center top / 14px 14px repeat-y;
  mask: var(--rm-star) center top / 14px 14px repeat-y;
  opacity: .85;
  pointer-events: none;
}

body .offcanvas__info .offcanvas__contact > .header-button {
  border: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body .offcanvas__info { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rm-brass) transparent; }

/* the star column belongs to the panel's content, so it runs the whole scrolled length */
body .offcanvas__info .offcanvas__wrapper::before { display: none !important; }

body .offcanvas__info .offcanvas__content { position: relative !important; }

body .offcanvas__info .offcanvas__content::before {
  content: "";
  position: absolute;
  top: -22px;
  bottom: -32px;
  left: -42px;
  width: 14px;
  background: var(--rm-brass);
  -webkit-mask: var(--rm-star) center top / 14px 14px repeat-y;
  mask: var(--rm-star) center top / 14px 14px repeat-y;
  opacity: .85;
  pointer-events: none;
}

@media (max-width: 575px) {
  body .offcanvas__info .offcanvas__content::before { left: -34px; top: -18px; }
}

/* ---------- Rating boxes: partner logos in their own colours, on white ---------- */

body .rating-box {
  background: #ffffff !important;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body .rating-box img {
  filter: none !important;
  height: 26px !important;
  width: auto !important;
  max-width: 130px;
  object-fit: contain;
  margin: 0 0 14px !important;
}

body .rating-box :is(h3, h4) {
  color: var(--rm-cedar) !important;
  font-family: "Kalnia", serif !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}

body .rating-box .divider { background-color: var(--rm-brass) !important; }

body .rating-box :is(p, span, div:not(.divider)) {
  color: var(--rm-cedar-2) !important;
  text-shadow: none;
}

body .rating-box:hover { transform: translateY(-3px); }

/* scores and labels inside the white rating boxes stay dark, whatever section they sit in */
body section .rating-box.rating-box :is(h3, h4),
body section .rating-box.rating-box :is(h3, h4) * { color: var(--rm-cedar) !important; }

body section .rating-box.rating-box :is(p, span, small, a, div:not(.divider)) { color: var(--rm-cedar-2) !important; }

/* side panel: nothing invisible may sit on top of the links */
body .offcanvas__info .offcanvas__content ul:not(.side-menu) li a::after,
body .offcanvas__info .offcanvas__content ul:not(.side-menu) li a::before,
body .offcanvas__info .offcanvas__contact-text a::after,
body .offcanvas__info .offcanvas__contact-text a::before { display: none !important; content: none !important; }

body .offcanvas__info *::before,
body .offcanvas__info *::after { pointer-events: none !important; }

body .offcanvas__info :is(a, button) { position: relative; z-index: 1; cursor: pointer; }

body .offcanvas__info .offcanvas__contact-text a { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--rm-brass) 60%, transparent); text-underline-offset: 3px; }
body .offcanvas__info .offcanvas__contact-text a:hover { color: var(--rm-brass) !important; }

/* side panel: contact links are comfortable to tap; the panel title shows at every width */
body .offcanvas__info .offcanvas__contact-text a { display: inline-block; padding: 9px 0; margin: -9px 0; }
body .offcanvas__info .offcanvas__contact > .text-center { display: block !important; }

/* ---------- Top menu: selected page and hover ---------- */

#header-sticky nav > ul > li > a {
  position: relative !important;
  transition: color var(--rm-dur) var(--rm-ease) !important;
}

/* a brass line draws in from the centre on hover, and stays under the current page */
#header-sticky nav > ul > li > a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 9px !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--rm-brass) !important;
  border: 0 !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  transition: width .35s var(--rm-ease) !important;
}

#header-sticky nav > ul > li > a:hover::after,
#header-sticky nav > ul > li:is(.active, .current-menu-item) > a::after { width: 100% !important; }

/* the current page: brass text, with a small zellige star set on the line */
#header-sticky nav > ul > li > a::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 4px !important;
  width: 11px !important;
  height: 11px !important;
  background: var(--rm-brass) !important;
  -webkit-mask: var(--rm-star) center / contain no-repeat;
  mask: var(--rm-star) center / contain no-repeat;
  border: 0 !important;
  opacity: 0 !important;
  transform: translateX(-50%) scale(.3) rotate(-90deg) !important;
  transition: opacity .3s var(--rm-ease), transform .5s var(--rm-ease) !important;
}

#header-sticky nav > ul > li:is(.active, .current-menu-item) > a::before {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) rotate(0deg) !important;
}

#header-sticky nav > ul > li > a:hover { color: var(--rm-brass) !important; }

#header-sticky nav ul li:is(.active, .current-menu-item) > a {
  color: var(--rm-brass) !important;
  text-shadow: 0 0 14px color-mix(in oklab, var(--rm-brass) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #header-sticky nav > ul > li > a::before,
  #header-sticky nav > ul > li > a::after { transition: none !important; }
}

/* header: the same width, logo position and menu spacing on the home page and inner pages */
#header-sticky > .container,
#header-sticky > .container-fluid,
#header-sticky .mini-time-bar > :is(.container, .container-fluid) {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (min-width: 1200px) {
  #header-sticky nav > ul { display: flex !important; align-items: center; gap: 34px; margin: 0 !important; padding: 0 !important; }
  #header-sticky nav > ul > li { margin: 0 !important; padding: 0 !important; }
}

/* ---------- Video popup: a real player ---------- */

.mfp-bg { background: var(--rm-green-3) !important; opacity: .92 !important; }

.rm-video-popup {
  position: relative;
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.rm-video-popup video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
  border-radius: var(--rm-radius-card);
}

.rm-video-popup .mfp-close {
  top: -46px !important;
  right: -6px !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 38px !important;
  padding: 0 !important;
  color: var(--rm-on-dark) !important;
  border: 1px solid var(--rm-rule-dark) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  text-align: center !important;
}

.rm-video-popup .mfp-close:hover { background: var(--rm-brass) !important; border-color: var(--rm-brass) !important; color: var(--rm-on-brass) !important; }

/* ---------- Partner strip: dark artwork lifted so it reads on green ---------- */

/* Hotels.com: the navy wordmark becomes light, the red mark keeps its colour */
.brand-slider .brand-item img[src*="brand6"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.15) saturate(1.2);
  opacity: 1 !important;
}