/* Ras Al Khor Hotel – additions on top of the EliteStay template (uses template tokens) */
:root {
  --gold: hsl(var(--main));
  --gold-d: #b99d75;
  --navy: hsl(var(--black));
  --paper: #fbf8f3;
  --line: rgba(21, 42, 56, 0.14);
}
html {
  scroll-padding-top: 120px;
}
body {
  font-family: var(--body-font);
  color: hsl(var(--body));
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--heading-font);
  color: var(--navy);
}
a {
  text-underline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: #fff;
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 9999;
}
.skip-link:focus {
  left: 8px;
}
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
img {
  max-width: 100%;
  height: auto;
}
.text-white-force,
.text-white-force * {
  color: #fff !important;
}
.border {
  border: 1px solid var(--line) !important;
}
button.progress-wrap {
  border: 0;
  padding: 0;
  background: transparent;
}
.link-gold {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.link-gold:hover {
  color: #8a6a2c;
}

/* no-smooth fallback: header fixed so layout matches smoother mode */
html.no-smooth .header-top-four {
  position: relative;
  z-index: 100;
}
html.no-smooth {
  scroll-behavior: smooth;
}
#scrollSmoother-container {
  overflow: visible;
}

/* brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  text-decoration: none;
  line-height: 1;
}
.brand__mark {
  display: inline-flex;
  color: #b99d75;
}
.brand__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand__txt b {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.01em;
}
.brand__txt small {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8c7a5a;
}
.brand--light {
  color: #fff;
}
.brand--light .brand__txt small {
  color: #d8c39c;
}
.brand--light .brand__mark {
  color: var(--gold);
}
.header-cta {
  white-space: nowrap;
}
.header-four .nav-menu {
  gap: 1.6rem !important;
}
.header-four .nav-menu__link {
  font-size: 16px;
}
@media (min-width: 992px) and (max-width: 1399px) {
  .header-four .nav-menu {
    gap: 1.1rem !important;
  }
  .header-four .nav-menu__link {
    font-size: 15px;
  }
  .header-four .brand__txt b {
    font-size: 22px;
  }
}
.mm-contact {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-contact a {
  color: var(--navy);
  text-decoration: none;
  display: flex;
  gap: 10px;
  align-items: center;
}
.mm-contact .mm-cta {
  background: var(--gold);
  justify-content: center;
  padding: 14px;
  border-radius: 10px;
  font-weight: 600;
  margin-top: 6px;
}
.mobile-menu {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

/* hero / home bits */
.banner-four-paragraph {
  max-width: 640px;
}
.banner-four-content .border {
  background: rgba(255, 255, 255, 0.5);
}
.checkout-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: #6d6a63;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ck-input {
  border: 0;
  background: transparent;
  font-family: var(--heading-font);
  font-size: 18px;
  color: var(--navy);
  padding: 6px 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
select.ck-input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23152A38' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right center;
  padding-right: 20px;
}
.ck-input:focus {
  outline: 0;
  border-bottom: 1px solid var(--navy);
}
.checkout-wrapper {
  min-width: 0;
}
.about-lead {
  max-width: 720px;
}
.room-short {
  margin: 0 0 14px;
  font-size: 16px;
}
.room-more {
  height: 100%;
  min-height: 340px;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.room-more h3 {
  color: #fff;
  font-size: 30px;
}
.room-more p {
  color: #d9e1e5;
  margin: 0;
}
.section-lead {
  max-width: 640px;
  margin-inline: auto;
}
.section-two-wrapper:not(.text-center) .section-lead {
  margin-inline: 0;
}
.walk-note {
  font-size: 14px;
  color: #7a766d;
  margin-top: 20px;
}
.feature-four-title a {
  color: inherit;
  text-decoration: none;
}
.cd-sub {
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
  max-width: 220px;
}
.counding-four-wrapper > div {
  background: #fff;
}
.pkg-img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.pkg-img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.about-four-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.panels-three {
  overflow: hidden;
}
@media (max-width: 1199px) {
  .panels-three {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
  }
  .panels-three-container {
    width: max-content;
  }
  .panel-three {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  .about-four-thumb {
    width: min(78vw, 420px);
    height: 380px;
  }
  .about-four-panel-wrapper {
    margin-inline-start: 0 !important;
    padding-inline: 16px;
  }
  .package-four-wrapper {
    width: min(86vw, 420px) !important;
  }
}
.home-enq .fld {
  background: #fff;
}
.contact-four-wrapper .enq-form .form-hint {
  color: #55524b;
}
.contact-strip .cs-card {
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.cs-card > i {
  font-size: 30px;
  color: #b99d75;
}
.cs-card h3 {
  font-size: 22px;
  margin: 10px 0 8px;
}
.cs-card p {
  margin: 0 0 14px;
  font-size: 16px;
}
.cs-card a {
  color: var(--navy);
  font-weight: 600;
}
.cs-card p a {
  font-weight: 500;
}

/* page hero */
.page-hero {
  padding: 220px 0 90px;
  color: #fff;
  overflow: hidden;
  background: var(--navy);
}
.page-hero__bg,
.page-hero__shade {
  position: absolute;
  inset: 0;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__shade {
  background: linear-gradient(
    90deg,
    rgba(14, 28, 38, 0.88) 0%,
    rgba(14, 28, 38, 0.62) 55%,
    rgba(14, 28, 38, 0.35) 100%
  );
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero__inner {
  max-width: 760px;
}
.page-hero__title {
  color: #fff;
  font-size: var(--heading-one);
  line-height: 1.08;
  margin: 14px 0 18px;
  font-weight: 400;
}
.page-hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: #e8edef;
  max-width: 660px;
  margin: 0 0 28px;
}
.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #cfd8dc;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}
.crumbs a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}
.crumbs a:hover {
  color: var(--gold);
}
@media (max-width: 767px) {
  .page-hero {
    padding: 150px 0 60px;
  }
  .page-hero__lead {
    font-size: 17px;
  }
}

/* split sections */
.split__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.split__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #fff;
  border-radius: 40px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.prose p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 1.1em;
}
.prose h3 {
  font-size: 24px;
  margin: 1.6em 0 0.6em;
}
.prose ul {
  padding-left: 1.2em;
  list-style: disc;
  margin-bottom: 1.2em;
}
.prose li {
  margin-bottom: 0.45em;
  line-height: 1.7;
  font-size: 17px;
}
.prose a {
  color: var(--navy);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.prose--lg p {
  font-size: 18px;
}
.split__cta {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sub-h {
  font-size: 28px;
  margin: 48px 0 20px;
}

/* icon cards */
.icard {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.bg-white .icard {
  background: var(--paper);
}
.icard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(21, 42, 56, 0.1);
}
.icard__ic {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 20px;
}
.icard__t {
  font-size: 24px;
  margin-bottom: 10px;
}
.icard p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
}

/* facts */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 20px 0;
  margin: 22px 0;
  border-block: 1px solid var(--line);
}
.facts li {
  display: flex;
  gap: 12px;
  align-items: center;
}
.facts i {
  font-size: 28px;
  color: #b99d75;
}
.facts small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a766d;
}
.facts strong {
  font-weight: 600;
  color: var(--navy);
  font-size: 16px;
}

/* checks */
.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.checks--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .checks--2 {
    grid-template-columns: 1fr;
  }
}
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.5;
}
.checks i {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}

/* steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
  counter-reset: s;
}
.steps li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
}
.bg-white .steps li {
  background: var(--paper);
}
.steps__n {
  font-family: var(--heading-font);
  font-size: 38px;
  line-height: 1;
  color: var(--gold-d);
  min-width: 56px;
}
.steps h3 {
  font-size: 23px;
  margin: 0 0 6px;
}
.steps p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
}

/* table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  margin: 20px 0;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tbl th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tbl td {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.tbl tbody tr:nth-child(even) {
  background: #faf7f1;
}
.tbl a {
  color: var(--navy);
}
@media (max-width: 640px) {
  .tbl thead {
    display: none;
  }
  .tbl tr {
    display: block;
    border-top: 1px solid var(--line);
    padding: 10px 0;
  }
  .tbl td {
    display: flex;
    gap: 12px;
    border: 0;
    padding: 6px 16px;
  }
  .tbl td::before {
    content: attr(data-label);
    font-weight: 600;
    min-width: 110px;
    color: #7a766d;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* faq */
.faq .faq-item {
  border: 1px solid var(--line);
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
}
.faq .accordion-button {
  font-family: var(--heading-font);
  font-size: 21px;
  color: var(--navy);
  background: #fff;
  padding: 22px 26px;
  box-shadow: none;
}
.faq .accordion-button:not(.collapsed) {
  background: var(--paper);
  color: var(--navy);
  box-shadow: none;
}
.faq .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(255, 198, 112, 0.55);
}
.faq .accordion-body {
  padding: 6px 26px 26px;
  font-size: 17px;
  line-height: 1.7;
}
.faq-group {
  font-size: 30px;
  margin: 46px 0 18px;
}

/* notes, cta */
.note {
  display: flex;
  gap: 16px;
  background: #fff;
  border-left: 4px solid var(--gold);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin: 30px 0;
  align-items: flex-start;
}
.bg-white .note {
  background: var(--paper);
}
.note > i {
  font-size: 28px;
  color: #b99d75;
  margin-top: 2px;
}
.note p {
  margin: 4px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
}
.note strong {
  color: var(--navy);
}
.cta-band {
  background: var(--gold);
  padding: 70px 0;
}
.cta-band__in {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cta-band h2 {
  font-size: var(--heading-three);
  margin: 0 0 8px;
  color: var(--navy);
}
.cta-band p {
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  color: #3a3a36;
}

/* link cards */
.lcard {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.lcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(21, 42, 56, 0.12);
}
.lcard__img {
  display: block;
  position: relative;
  overflow: hidden;
}
.lcard__img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.6s;
}
.lcard:hover .lcard__img img {
  transform: scale(1.05);
}
.lcard__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--gold);
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.lcard__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lcard__body h3 {
  font-size: 25px;
  margin: 0 0 10px;
}
.lcard__body h3 a {
  color: var(--navy);
  text-decoration: none;
}
.lcard__body p {
  font-size: 16.5px;
  line-height: 1.65;
  flex: 1;
}
.lcard__meta {
  font-size: 14px;
  color: #7a766d;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.lcard__more {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.lcard__more:hover {
  color: #8a6a2c;
}

/* rooms overview */
.room-row {
  margin-bottom: 90px;
}
.room-row:last-child {
  margin-bottom: 0;
}
.room-row__img {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
}
.room-row__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s;
}
.room-row__img:hover img {
  transform: scale(1.04);
}
.room-row__tag {
  position: absolute;
  left: 18px;
  top: 18px;
  background: var(--gold);
  border-radius: 30px;
  padding: 5px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.room-row__body {
  padding: 10px 0;
}
.room-row__no {
  font-family: var(--heading-font);
  font-size: 64px;
  color: rgba(185, 157, 117, 0.5);
  line-height: 1;
}
.room-row__body h2 {
  font-size: var(--heading-two);
  margin: 6px 0 14px;
}
.room-row__body h2 a {
  color: var(--navy);
  text-decoration: none;
}
.room-row__body p {
  font-size: 18px;
  line-height: 1.7;
}

/* room gallery + side card */
.rg__main {
  display: block;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}
.rg__main img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.rg__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: #fff;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.rg__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.rg__t {
  border-radius: 14px;
  overflow: hidden;
  display: block;
}
.rg__t img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.5s;
}
.rg__t:hover img {
  transform: scale(1.06);
}
.side-card {
  position: sticky;
  top: 120px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px;
}
.side-card h3 {
  font-size: 28px;
  margin-bottom: 10px;
}
.side-card > p {
  font-size: 16px;
}
.side-card .fld {
  margin-bottom: 14px;
}
.side-card__list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.side-card__list i {
  color: #8a6a2c;
  margin-right: 6px;
}
.side-card__tel {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.side-card__tel a {
  font-family: var(--heading-font);
  font-size: 22px;
  color: var(--navy);
  text-decoration: none;
}

/* forms */
.fld {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 46px 10px 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.fld span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a766d;
  font-weight: 600;
}
.fld em {
  color: #b3431f;
  font-style: normal;
}
.fld input,
.fld select,
.fld textarea {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 17px;
  color: var(--navy);
  padding: 4px 0 2px;
  font-family: var(--body-font);
  appearance: none;
  -webkit-appearance: none;
}
.fld textarea {
  resize: vertical;
  min-height: 110px;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: 0;
}
.fld:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(255, 198, 112, 0.55);
}
.fld > i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #b99d75;
  pointer-events: none;
}
.fld--area > i {
  display: none;
}
.fld--area {
  padding-right: 16px;
}
.fld.invalid,
.chk.invalid {
  border-color: #b3431f;
  box-shadow: 0 0 0 3px rgba(179, 67, 31, 0.15);
}
.chk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.55;
}
.chk input {
  margin-top: 4px;
  width: 19px;
  height: 19px;
  accent-color: #b0802a;
  flex: 0 0 19px;
}
.chk--consent {
  background: rgba(255, 255, 255, 0.7);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.chk--consent a {
  color: var(--navy);
  font-weight: 600;
}
.chk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-error {
  background: #fdeee9;
  border: 1px solid #e9b8a8;
  color: #7d2a12;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 16px;
}
.form-hint {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: #55524b;
  line-height: 1.6;
  display: flex;
  gap: 8px;
}
.enq-submit {
  cursor: pointer;
}
.enq-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.enq-success {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
}
.enq-success:focus {
  outline: 0;
}
.enq-success__ic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 18px;
}
.enq-success h3 {
  font-size: 30px;
  margin-bottom: 14px;
}
.enq-success p {
  max-width: 620px;
  margin: 0 auto 12px;
  font-size: 17px;
  line-height: 1.7;
}
.enq-success__sum {
  color: #55524b;
  font-size: 15px !important;
}
.enq-fallback {
  display: flex;
  gap: 16px;
  background: #fff7e8;
  border: 1px solid #ecd29d;
  border-radius: 16px;
  padding: 22px 26px;
  margin-top: 20px;
}
.enq-fallback[hidden],
.enq-success[hidden],
.form-error[hidden],
.kids-age[hidden] {
  display: none !important;
}
.enq-fallback > i {
  font-size: 30px;
  color: #a0710c;
}
.enq-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px;
}
.enq-wrap .fld {
  background: var(--paper);
}
@media (max-width: 767px) {
  .enq-wrap {
    padding: 24px 18px;
  }
}
.contact-four-wrapper .enq-form .fld {
  background: #fff;
}

/* gallery */
.gal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.gal-filter button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 40px;
  padding: 10px 24px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: 0.2s;
}
.gal-filter button.active,
.gal-filter button:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.gal-grid {
  columns: 3 280px;
  column-gap: 18px;
}
.gal-item {
  break-inside: avoid;
  margin-bottom: 18px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.gal-item a {
  display: block;
}
.gal-item img {
  width: 100%;
  display: block;
  transition: transform 0.6s;
}
.gal-item:hover img {
  transform: scale(1.05);
}
.gal-item:nth-child(3n + 1) img {
  aspect-ratio: 4/5;
  object-fit: cover;
}
.gal-item:nth-child(3n + 2) img {
  aspect-ratio: 3/2;
  object-fit: cover;
}
.gal-item:nth-child(3n) img {
  aspect-ratio: 1/1;
  object-fit: cover;
}
.gal-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(10, 22, 30, 0.8));
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: 0.3s;
}
.gal-item:hover figcaption {
  opacity: 1;
}
.mfp-title {
  color: #fff;
}

/* map */
.map-box {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 420px;
  background: #e9e2d2;
}
.map-box iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}
.map-ph {
  position: relative;
  height: 460px;
}
.map-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-ph__in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(251, 248, 243, 0.82);
}
.map-ph__in p {
  max-width: 520px;
  font-size: 15px;
  margin: 0 0 18px;
  line-height: 1.6;
}
.map-load {
  border: 0;
  cursor: pointer;
}

/* timeline */
.tline {
  position: relative;
  padding-left: 34px;
  border-left: 2px solid var(--gold);
  display: grid;
  gap: 34px;
}
.tline__i {
  position: relative;
}
.tline__i::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--gold);
}
.tline__t {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a6a2c;
}
.tline__i h3 {
  font-size: 26px;
  margin: 4px 0 8px;
}
.tline__i p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}

/* offers */
.offer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.offer__img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
.offer__body {
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.offer__body h3 {
  font-size: 28px;
  margin-bottom: 8px;
}
.offer__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: #8a6a2c;
  margin-bottom: 14px;
}
.offer__body p {
  font-size: 16.5px;
  line-height: 1.65;
}
.offer__body .checks {
  margin: 12px 0 26px;
  flex: 1;
}
.offer__body .checks li {
  font-size: 16px;
}

/* legal */
.legal {
  max-width: 860px;
  margin: 0 auto;
}
.legal h2 {
  font-size: 30px;
  margin: 2.2em 0 0.6em;
}
.legal h3 {
  font-size: 22px;
  margin: 1.6em 0 0.5em;
}
.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.75;
}
.legal ul,
.legal ol {
  padding-left: 1.3em;
  margin-bottom: 1.2em;
}
.legal ul {
  list-style: disc;
}
.legal ol {
  list-style: decimal;
}
.legal address {
  font-style: normal;
  line-height: 1.8;
  font-size: 17px;
  margin-bottom: 1em;
}
.legal a {
  color: var(--navy);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.legal-hero {
  padding: 190px 0 60px;
  background: var(--navy);
  color: #fff;
}
.legal-hero h1 {
  color: #fff;
  font-size: var(--heading-two);
  margin: 10px 0 8px;
}
.legal-hero p {
  color: #cfd8dc;
  margin: 0;
}
.legal-hero .crumbs {
  margin-bottom: 6px;
}
.stand {
  font-size: 14px;
  color: #7a766d;
  margin-top: 2em;
}

/* contact page */
.cc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  height: 100%;
}
.cc i {
  font-size: 32px;
  color: #b99d75;
}
.cc h3 {
  font-size: 24px;
  margin: 10px 0;
}
.cc p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}
.cc a {
  color: var(--navy);
  font-weight: 600;
}

/* footer */
.footer {
  color: #e4eaed;
}
.footer-lead {
  max-width: 640px;
  margin: 14px auto 0;
  color: #d4dde1;
  font-size: 18px;
}
.footer-about {
  color: #cdd7dc;
  margin: 18px 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 380px;
}
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  color: #e4eaed;
  font-size: 16px;
  line-height: 1.55;
}
.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer-contact i {
  color: var(--gold);
  font-size: 22px;
  margin-top: 1px;
}
.footer-contact a {
  color: #fff;
  text-decoration: none;
}
.footer-contact a:hover {
  color: var(--gold);
}
.footer-legal a {
  font-size: 15px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 40px;
}
.footer h4 {
  color: #fff;
}
.footer-center-border {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer ul li a {
  color: #e4eaed;
}
.hover-underline:hover {
  text-decoration: underline;
}
.toggle-mobileMenu {
  background: none;
  border: 0;
}

@media (max-width: 991px) {
  .banner-four-content {
    margin-inline-start: 24px !important;
    margin-inline-end: 24px;
    padding-block: 60px 110px !important;
  }
  .banner-four-thumb {
    position: relative !important;
    width: 100% !important;
    height: 340px !important;
  }
  .banner-four-area .row {
    flex-direction: column;
  }
  .checkout-area {
    margin-top: -60px !important;
  }
}
@media (max-width: 575px) {
  .banner-four-title {
    font-size: 38px !important;
  }
  .contact-four-wrapper {
    padding: 36px 18px !important;
  }
}
@media print {
  .header,
  .header-top-four,
  .footer,
  .progress-wrap {
    display: none;
  }
}

/* container tweak + overflow guards */
@media (min-width: 1200px) {
  .container {
    max-width: 1340px;
  }
}
body {
  overflow-x: clip;
}
#scrollSmoother-container,
main {
  overflow-x: clip;
}
/* panels: scroller mode when pinned animation is not active */
html.no-smooth .panels-three {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
}
html.no-smooth .panels-three-container {
  width: max-content;
}
html.no-smooth .panel-three {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
html.no-smooth .about-four-thumb {
  width: min(78vw, 520px);
  height: 420px;
}
html.no-smooth .about-four-panel-wrapper {
  margin-inline-start: 0 !important;
  padding-inline: 16px;
}
html.no-smooth .package-four-wrapper {
  width: min(86vw, 420px) !important;
}
/* feature hover list: image stack */
.feature-four-list-thumb-wrap {
  position: relative;
  width: 100% !important;
  aspect-ratio: 5/5.4;
  transform: none !important;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 !important;
  height: auto !important;
}
#feature-four-thumb {
  position: absolute;
  inset: 0;
  visibility: visible;
}
#feature-four-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.5s;
}
#feature-four-thumb.feature-four-list-thumb-1 img.feature-four-list-thumb-1,
#feature-four-thumb.feature-four-list-thumb-2 img.feature-four-list-thumb-2,
#feature-four-thumb.feature-four-list-thumb-3 img.feature-four-list-thumb-3,
#feature-four-thumb.feature-four-list-thumb-4 img.feature-four-list-thumb-4 {
  opacity: 1;
}
.feature-four-list-item.active .feature-four-title,
.feature-four-list-item:hover .feature-four-title {
  color: #8a6a2c;
}
.footer {
  background-color: #10202b;
}
.tw-w-max {
  width: max-content;
}
.nav-submenu {
  min-width: 230px;
}

/* hero: fit one screen (banner + booking bar) on desktop */
@media (min-width: 992px) {
  .banner-four-main {
    padding-block-start: 120px !important;
  }
  .banner-four-area {
    height: calc(100svh - 120px - 70px);
    min-height: 480px;
  }
  .banner-four-area > .container-fluid,
  .banner-four-area .row {
    height: 100%;
  }
  .banner-four-content {
    padding-block: 24px !important;
  }
  .banner-four-title {
    font-size: clamp(40px, 6.2vh, 72px) !important;
    line-height: 1.1;
  }
  .banner-four-content .banner-subtitle {
    margin-bottom: 16px !important;
  }
  .banner-four-content .banner-four-title {
    margin-bottom: 18px !important;
  }
  .banner-four-paragraph {
    font-size: clamp(14px, 1.9vh, 17px) !important;
    margin-bottom: 24px !important;
  }
}

/* about slider: native swipe, full-bleed from the left edge */
.row:has(> .col-xl-9 > .about-four-panel-wrapper) > .col-xl-9 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
.about-four-panel-wrapper {
  margin-inline-start: 0 !important;
  padding-inline: 0;
}
.about-four-panel-wrapper .panels-three {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 0;
}
.about-four-panel-wrapper .panels-three::-webkit-scrollbar {
  display: none;
}
.about-four-panel-wrapper .panels-three.is-drag {
  cursor: grabbing;
  scroll-snap-type: none;
}
.about-four-panel-wrapper .panels-three-container {
  width: max-content;
  height: auto !important;
}
.about-four-panel-wrapper .panel-three {
  flex: 0 0 auto;
  height: auto !important;
  scroll-snap-align: start;
}
.about-four-panel-wrapper .about-four-thumb {
  width: min(78vw, 600px);
  height: min(60vh, 480px);
  user-select: none;
}
.about-four-panel-wrapper .about-four-thumb img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Service & Ausstattung: second photo overlaps the first only slightly, stays inside its column */
.relaxing-thumb {
  margin-bottom: 70px;
}
.relaxing-thumb-1 img {
  width: 80%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.relaxing-thumb-2 {
  inset-block-end: -70px;
  inset-inline-end: 0;
  width: 48%;
}
.relaxing-thumb-2 img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
@media (max-width: 1199px) {
  .relaxing-thumb {
    margin-block-end: 90px;
  }
}

/* marquee: smaller type */
.marquee-title {
  font-size: clamp(40px, 5.5vw, 54px);
}
.marquee-icon {
  margin-inline-start: 40px;
}
.marquee-icon img {
  width: clamp(24px, 3vw, 40px);
  height: auto;
}

/* rooms grid: equal-height cards, details aligned to the bottom */
.service-five-area .row.gy-5>[class*="col-"]{display:flex}
.service-five-area .service-five-wrapper,.service-five-area .room-more{width:100%;height:100%}
.service-five-area .service-five-wrapper{display:flex;flex-direction:column}
.service-five-area .service-five-content{display:flex;flex-direction:column;flex:1}
.service-five-area .service-five-list{margin-top:auto;padding-top:14px}

/* Erlebnisse: one screen, arch wide enough for the heading */
.experience-four-area,.experience-four-area::before{clip-path:ellipse(100% 100% at 50% 100%)}
.experience-four-area{padding-block:clamp(90px,14vh,130px) 40px!important;will-change:auto}
.experience-four-area .section-two-wrapper{margin-bottom:clamp(16px,3vh,32px)!important}
.experience-four-area .section-two-title{font-size:clamp(30px,5vh,52px)}
.experience-four-active{padding-bottom:30px!important}
.experience-four-thumb img{width:100%;aspect-ratio:4/3;max-height:36vh;object-fit:cover}

/* Lage & Umgebung: one screen */

@media (min-width:992px){
.feature-four-section{display:flex;flex-direction:column;justify-content:center;height:100svh;padding-block:90px 30px!important}
.feature-four-section .row.tw-mb-14{margin-bottom:0!important}
.feature-four-section .section-two-wrapper{margin-bottom:clamp(12px,2.5vh,28px)!important}
.feature-four-section .section-two-title{font-size:clamp(30px,5vh,52px)}
.feature-four-section .feature-four-list-thumb-wrap{aspect-ratio:auto;height:min(52vh,520px)!important}
.feature-four-section .feature-four-title{font-size:clamp(28px,5.5vh,52px)!important;margin-bottom:6px!important}
.feature-four-section .feature-four-list-item{padding-block:clamp(6px,1.4vh,16px)!important}
}

/* Angebote slider: native swipe, equal-height cards; no overlap with the form below */
.package-four-area{padding-bottom:0!important}
.package-four-panel-area{margin-right:0!important}
.package-four-panel-area .panels-three{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;padding:4px 0 8px}
.package-four-panel-area .panels-three::-webkit-scrollbar{display:none}
.package-four-panel-area .panels-three.is-drag{cursor:grabbing;scroll-snap-type:none}
.package-four-panel-area .panels-three-container{width:max-content;height:auto!important;align-items:stretch}
.package-four-panel-area .panel-three{display:flex;flex:0 0 auto;height:auto!important;scroll-snap-align:start}
.package-four-panel-area .package-four-wrapper{width:min(86vw,420px)!important;height:100%;display:flex;flex-direction:column;user-select:none}
.package-four-panel-area .package-four-wrapper>.tw-px-18{flex:1;margin-bottom:24px!important;padding-inline:0!important}
.package-four-panel-area .package-four-wrapper>.bg-white{margin-top:auto}
.package-four-panel-area img{pointer-events:none;-webkit-user-drag:none}
.contact-four-area{margin-block-start:0!important;padding-block:clamp(48px,7vw,90px)}
.contact-four-wrapper{padding:clamp(32px,5vw,64px) clamp(18px,5vw,72px)!important}

/* contact strip cards overlap the bottom of the form block */
.contact-four-area{padding-bottom:0!important}
.contact-four-wrapper{padding-bottom:clamp(110px,10vw,150px)!important}
.contact-strip{padding-top:0!important;margin-top:clamp(-110px,-8vw,-60px);position:relative;z-index:3;background:transparent!important}
.contact-strip .cs-card{box-shadow:0 10px 35px rgba(0,0,0,.1)}

/* date inputs: hide native calendar icon, keep the custom one */
.fld input[type="date"]{position:relative;-webkit-appearance:none;appearance:none}
.fld input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.fld input[type="date"]::-webkit-inner-spin-button{display:none}
.fld i{pointer-events:none}

/* German date display overlay: the browser's own text (dd.mm.yyyy / locale-dependent) is hidden completely */
.de-date{position:relative;display:block;text-transform:none;letter-spacing:0}
.de-date input[type="date"]{color:transparent!important;-webkit-text-fill-color:transparent;caret-color:transparent;text-shadow:none}
.de-date input[type="date"]::-webkit-datetime-edit,
.de-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.de-date input[type="date"]::-webkit-datetime-edit-text,
.de-date input[type="date"]::-webkit-datetime-edit-day-field,
.de-date input[type="date"]::-webkit-datetime-edit-month-field,
.de-date input[type="date"]::-webkit-datetime-edit-year-field{opacity:0;color:transparent;-webkit-text-fill-color:transparent;background:transparent}
.de-date input[type="date"]::-moz-datetime-edit,.de-date input[type="date"]::-moz-datetime-edit-fields-wrapper{opacity:0}
.de-date .de-date__txt,.fld .de-date .de-date__txt{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;font:inherit;font-size:inherit;color:var(--navy);text-transform:none;letter-spacing:0;font-weight:400;white-space:nowrap;z-index:1}
.de-date .de-date__txt.is-empty{color:#9a968c}

/* Ablauf: four steps */
.counding-four-wrapper{gap:16px}
.counding-four-wrapper>div{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0}
.counding-four-wrapper .cd-sub{max-width:230px}
@media (max-width:991px){
.counding-four-wrapper{flex-wrap:wrap;row-gap:36px}
.counding-four-wrapper>div{flex:0 0 calc(50% - 8px)}
.counding-four-wrapper::before{display:none}
.counding-four-title{font-size:56px!important}
}
@media (max-width:575px){.counding-four-wrapper>div{flex:0 0 100%}}

/* native scrolling: anchors clear the fixed header; lighter paint on long pages */
html{scroll-padding-top:120px}

/* cookie banner + cookies page */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:2000;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:620px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--navy);border:1px solid var(--line);border-radius:16px;padding:12px 14px 12px 18px;box-shadow:0 10px 36px rgba(10,22,30,.18)}
.cookie-banner[hidden]{display:none}
.cookie-banner p{flex:1 1 260px;font-size:14px;line-height:1.45;margin:0}
.cookie-banner a{text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cookie-banner__btns{display:flex;gap:8px;flex:0 0 auto}
.cb-btn{padding:10px 16px;border-radius:999px;border:1px solid rgba(10,22,30,.25);background:transparent;color:var(--navy);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.cb-btn--main{background:var(--navy);border-color:var(--navy);color:#fff}
.cb-btn:hover{background:rgba(10,22,30,.07)}
.cb-btn--main:hover{background:var(--navy);opacity:.9}
.cb-btn:focus-visible{outline:3px solid rgba(255,198,112,.8);outline-offset:2px}
@media (max-width:575px){
.cookie-banner{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:8px}
.cookie-banner p{flex-basis:100%;font-size:13px}
.cookie-banner__btns{width:100%}
.cb-btn{flex:1;padding:9px 10px;font-size:13px}
}
@media (min-width:768px){.cookie-banner{left:24px;right:auto;bottom:24px}}
.footer-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.cookie-table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0 18px}
.cookie-table th,.cookie-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.cookie-table th{background:var(--paper)}
.table-wrap{overflow-x:auto}

/* brand logo image */
.brand__mark .brand__logo{display:block;height:44px;width:auto}
.brand__mark--badge{background:#fff;border-radius:12px;padding:5px 7px}
.brand__mark--badge .brand__logo{height:38px}
@media (max-width:575px){.brand__mark .brand__logo{height:38px}}

.footer-operator{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;line-height:1.6;color:rgba(255,255,255,.62);text-align:center}
.footer-operator a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.addr-note{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:#6d6a63}