/* ==========================================================================
   Kruleni — boutique hotel styling for kruleni.com
   Layered on top of Bootstrap 5.3. Custom tokens live in :root.
   ========================================================================== */

:root {
  --kruleni-ink: #121620;
  --kruleni-ink-soft: #1c2231;
  --kruleni-ink-mid: #262d3d;
  --kruleni-gold: #c9a646;
  --kruleni-gold-bright: #d9bb5e;
  --kruleni-gold-deep: #a8842e;
  --kruleni-cream: #f6f1e7;
  --kruleni-sand: #e9dfcd;
  --kruleni-stone: #5d5850;
  --kruleni-white: #ffffff;
  --kruleni-line: rgba(18, 22, 32, 0.12);
  --kruleni-line-soft: rgba(246, 241, 231, 0.18);
  --kruleni-shadow-sm: 0 8px 24px rgba(18, 22, 32, 0.08);
  --kruleni-shadow-md: 0 20px 60px rgba(18, 22, 32, 0.14);
  --kruleni-shadow-lg: 0 34px 90px rgba(18, 22, 32, 0.22);
  --kruleni-radius: 14px;
  --kruleni-radius-lg: 24px;
  --kruleni-heading: "Georgia", "Times New Roman", "Iowan Old Style", serif;
  --kruleni-body: "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kruleni-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--kruleni-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kruleni-ink);
  background-color: var(--kruleni-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: 88px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--kruleni-heading);
  color: var(--kruleni-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); font-weight: 500; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.15rem; font-weight: 600; }

p { margin-bottom: 1rem; }

a {
  color: var(--kruleni-gold-deep);
  text-decoration: none;
  transition: color var(--kruleni-transition);
}
a:hover { color: var(--kruleni-ink); }

img { max-width: 100%; height: auto; }

::selection {
  background: var(--kruleni-gold);
  color: var(--kruleni-ink);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--kruleni-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  transition: transform var(--kruleni-transition), background-color var(--kruleni-transition),
    color var(--kruleni-transition), box-shadow var(--kruleni-transition);
}

.btn-primary,
.btn-book {
  background-color: var(--kruleni-gold);
  border-color: var(--kruleni-gold);
  color: var(--kruleni-ink);
  box-shadow: 0 10px 26px rgba(201, 166, 70, 0.32);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-book:hover,
.btn-book:focus {
  background-color: var(--kruleni-gold-bright);
  border-color: var(--kruleni-gold-bright);
  color: var(--kruleni-ink);
  transform: translateY(-2px);
}

.btn-dark-ink {
  background-color: var(--kruleni-ink);
  border-color: var(--kruleni-ink);
  color: var(--kruleni-cream);
}
.btn-dark-ink:hover,
.btn-dark-ink:focus {
  background-color: var(--kruleni-ink-soft);
  border-color: var(--kruleni-ink-soft);
  color: var(--kruleni-white);
}

.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(246, 241, 231, 0.5);
  color: var(--kruleni-cream);
}
.btn-ghost-light:hover,
.btn-ghost-light:focus {
  background: rgba(246, 241, 231, 0.12);
  border-color: var(--kruleni-cream);
  color: var(--kruleni-white);
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header,
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 18px 0;
  background: rgba(18, 22, 32, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(246, 241, 231, 0.08);
  transition: padding var(--kruleni-transition), background-color var(--kruleni-transition);
}

.site-header--compact {
  padding: 10px 0;
  background: rgba(18, 22, 32, 0.94);
}

.site-header .navbar-brand img {
  display: block;
}

.site-nav .nav-link {
  color: rgba(246, 241, 231, 0.86);
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
  color: var(--kruleni-gold-bright);
}

.header-contact {
  font-size: 0.85rem;
  color: rgba(246, 241, 231, 0.82);
  line-height: 1.35;
}
.header-contact a {
  color: var(--kruleni-cream);
}
.header-contact a:hover {
  color: var(--kruleni-gold-bright);
}
.header-contact .contact-icon {
  color: var(--kruleni-gold);
  margin-right: 6px;
}

.navbar-toggler {
  border-color: rgba(246, 241, 231, 0.4);
}
.navbar-toggler .fas {
  color: var(--kruleni-cream);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--kruleni-cream);
  overflow: hidden;
  background-color: var(--kruleni-ink);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.is-active { opacity: 1; }

.hero-slider__content {
  position: relative;
  z-index: 2;
  padding: 4rem 0 3rem;
  max-width: 720px;
}

.hero-slider__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kruleni-gold);
  margin-bottom: 1.2rem;
}
.hero-slider__eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--kruleni-gold);
}

.hero-slider h1 {
  color: var(--kruleni-white);
  margin-bottom: 1.3rem;
}

.hero-slider p {
  color: rgba(246, 241, 231, 0.88);
  font-size: 1.08rem;
  max-width: 560px;
}

.hero-slider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.8rem;
}

.hero-slider__dots {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero-slider__dot {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  border: 0;
  background: rgba(246, 241, 231, 0.4);
  cursor: pointer;
  transition: background var(--kruleni-transition);
}
.hero-slider__dot.is-active { background: var(--kruleni-gold); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section,
section.section {
  padding: clamp(64px, 8vw, 116px) 0;
  position: relative;
}

.section-dark {
  background-color: var(--kruleni-ink);
  color: var(--kruleni-cream);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--kruleni-white); }
.section-dark p { color: rgba(246, 241, 231, 0.82); }

.section-overlay {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--kruleni-cream);
  position: relative;
}
.section-overlay h2,
.section-overlay h3,
.section-overlay h4 { color: var(--kruleni-white); }
.section-overlay p { color: rgba(246, 241, 231, 0.88); }

.section-sand {
  background-color: var(--kruleni-sand);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kruleni-gold-deep);
  margin-bottom: 1rem;
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}
.section-dark .eyebrow,
.section-overlay .eyebrow { color: var(--kruleni-gold); }

.lead-muted {
  color: var(--kruleni-stone);
  font-size: 1.08rem;
}
.section-dark .lead-muted,
.section-overlay .lead-muted { color: rgba(246, 241, 231, 0.82); }

/* --------------------------------------------------------------------------
   Cards — rooms, services, teasers
   -------------------------------------------------------------------------- */
.stay-card {
  background: var(--kruleni-white);
  border-radius: var(--kruleni-radius-lg);
  overflow: hidden;
  box-shadow: var(--kruleni-shadow-sm);
  transition: transform var(--kruleni-transition), box-shadow var(--kruleni-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stay-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kruleni-shadow-md);
}
.stay-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kruleni-sand);
}
.stay-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.stay-card:hover .stay-card__media img { transform: scale(1.05); }

.stay-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(18, 22, 32, 0.85);
  color: var(--kruleni-gold);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.stay-card__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.stay-card__title {
  font-family: var(--kruleni-heading);
  font-size: 1.35rem;
  margin-bottom: 0.55rem;
  color: var(--kruleni-ink);
}
.stay-card__text {
  color: var(--kruleni-stone);
  font-size: 0.95rem;
  flex: 1;
}
.stay-card__meta {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kruleni-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}
.stay-card__price {
  font-family: var(--kruleni-heading);
  font-size: 1.3rem;
  color: var(--kruleni-ink);
}
.stay-card__price span {
  font-family: var(--kruleni-body);
  font-size: 0.78rem;
  color: var(--kruleni-stone);
}
.stay-card__link {
  color: var(--kruleni-gold-deep);
  font-weight: 600;
  font-size: 0.88rem;
}
.stay-card__link:hover { color: var(--kruleni-ink); }

/* --------------------------------------------------------------------------
   Split / feature blocks
   -------------------------------------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature-split__media {
  border-radius: var(--kruleni-radius-lg);
  overflow: hidden;
  box-shadow: var(--kruleni-shadow-md);
  aspect-ratio: 5 / 6;
}
.feature-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.feature-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.98rem;
}
.feature-list .fas {
  color: var(--kruleni-gold);
  margin-top: 0.25rem;
}
.section-dark .feature-list li,
.section-overlay .feature-list li { color: rgba(246, 241, 231, 0.9); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item {
  padding: 22px 12px;
  border-radius: var(--kruleni-radius);
  border: 1px solid var(--kruleni-line-soft);
  background: rgba(246, 241, 231, 0.04);
}
.stat-item__value {
  font-family: var(--kruleni-heading);
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--kruleni-gold);
  line-height: 1;
}
.stat-item__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.72);
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.testimonial {
  background: var(--kruleni-white);
  border-radius: var(--kruleni-radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--kruleni-shadow-sm);
  height: 100%;
}
.testimonial__quote {
  font-family: var(--kruleni-heading);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--kruleni-ink);
  margin-bottom: 1.4rem;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial__author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kruleni-sand);
}
.testimonial__name {
  font-weight: 600;
  color: var(--kruleni-ink);
  font-size: 0.95rem;
  margin: 0;
}
.testimonial__role {
  font-size: 0.82rem;
  color: var(--kruleni-stone);
  margin: 0;
}
.testimonial__stars {
  color: var(--kruleni-gold);
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.price-card {
  background: var(--kruleni-white);
  border: 1px solid var(--kruleni-line);
  border-radius: var(--kruleni-radius-lg);
  padding: 34px 30px;
  height: 100%;
  transition: transform var(--kruleni-transition), box-shadow var(--kruleni-transition);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kruleni-shadow-md);
}
.price-card--featured {
  background: var(--kruleni-ink);
  color: var(--kruleni-cream);
  border-color: var(--kruleni-gold);
}
.price-card--featured h3,
.price-card--featured .price-card__amount { color: var(--kruleni-white); }
.price-card--featured .price-card__note { color: rgba(246, 241, 231, 0.7); }
.price-card--featured .feature-list li { color: rgba(246, 241, 231, 0.88); }

.price-card__amount {
  font-family: var(--kruleni-heading);
  font-size: 2.6rem;
  color: var(--kruleni-ink);
  line-height: 1;
  margin: 0.6rem 0;
}
.price-card__amount span {
  font-family: var(--kruleni-body);
  font-size: 0.9rem;
  color: var(--kruleni-stone);
}
.price-card__note {
  font-size: 0.88rem;
  color: var(--kruleni-stone);
}

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.process-step {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--kruleni-line);
}
.process-step:last-child { border-bottom: 0; }
.process-step__num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kruleni-gold);
  color: var(--kruleni-ink);
  font-family: var(--kruleni-heading);
  font-size: 1.15rem;
  font-weight: 700;
}
.process-step__title {
  font-family: var(--kruleni-heading);
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
  color: var(--kruleni-ink);
}
.process-step__text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--kruleni-stone);
}
.section-dark .process-step,
.section-overlay .process-step { border-color: var(--kruleni-line-soft); }
.section-dark .process-step__title,
.section-overlay .process-step__title { color: var(--kruleni-white); }
.section-dark .process-step__text,
.section-overlay .process-step__text { color: rgba(246, 241, 231, 0.8); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  border-radius: var(--kruleni-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--kruleni-sand);
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--kruleni-cream);
  background: linear-gradient(transparent, rgba(18, 22, 32, 0.82));
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--kruleni-line);
}
.faq-item .accordion-button {
  font-family: var(--kruleni-heading);
  font-size: 1.1rem;
  color: var(--kruleni-ink);
  background: transparent;
  padding: 1.25rem 0;
  box-shadow: none;
}
.faq-item .accordion-button:not(.collapsed) {
  color: var(--kruleni-gold-deep);
}
.faq-item .accordion-body {
  padding: 0 0 1.4rem;
  color: var(--kruleni-stone);
  font-size: 0.96rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.booking-form,
.contact-form {
  background: var(--kruleni-white);
  border-radius: var(--kruleni-radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--kruleni-shadow-md);
}

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kruleni-ink);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid var(--kruleni-line);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--kruleni-ink);
  background-color: var(--kruleni-cream);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--kruleni-gold);
  box-shadow: 0 0 0 0.2rem rgba(201, 166, 70, 0.2);
  background-color: var(--kruleni-white);
}
.form-control::placeholder { color: #9a948a; }

.newsletter-band {
  background: var(--kruleni-ink);
  color: var(--kruleni-cream);
  border-radius: var(--kruleni-radius-lg);
  padding: clamp(28px, 4vw, 48px);
}
.newsletter-band h2,
.newsletter-band h3 { color: var(--kruleni-white); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer,
footer.site-footer {
  background: var(--kruleni-ink);
  color: rgba(246, 241, 231, 0.78);
  padding: clamp(56px, 7vw, 88px) 0 32px;
}
.site-footer h4,
.site-footer h5 {
  color: var(--kruleni-white);
  font-family: var(--kruleni-heading);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}
.site-footer a {
  color: rgba(246, 241, 231, 0.78);
  transition: color var(--kruleni-transition);
}
.site-footer a:hover { color: var(--kruleni-gold-bright); }

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.footer-links a { font-size: 0.92rem; }

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 0.92rem;
}
.footer-contact .fas {
  color: var(--kruleni-gold);
  width: 20px;
  margin-right: 8px;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--kruleni-line-soft);
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.55);
}

.footer-social {
  display: inline-flex;
  gap: 10px;
  margin-top: 0.6rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(246, 241, 231, 0.08);
  color: var(--kruleni-cream);
}
.footer-social a:hover {
  background: var(--kruleni-gold);
  color: var(--kruleni-ink);
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--kruleni-gold);
  color: var(--kruleni-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--kruleni-transition), transform var(--kruleni-transition);
  z-index: 1040;
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Cookie consent — unique to Kruleni
   -------------------------------------------------------------------------- */
.stay-consent {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vw, 32px);
  transform: translateX(-50%);
  width: min(760px, calc(100% - 32px));
  z-index: 2000;
  transition: opacity 260ms ease, transform 260ms ease;
}

.stay-consent[hidden] { display: none; }

.stay-consent--leaving {
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}

.stay-consent__card {
  background: var(--kruleni-ink);
  color: var(--kruleni-cream);
  border: 1px solid rgba(201, 166, 70, 0.35);
  border-radius: var(--kruleni-radius-lg);
  box-shadow: 0 30px 80px rgba(18, 22, 32, 0.4);
  padding: clamp(20px, 3vw, 30px);
  display: grid;
  gap: 20px;
}

.stay-consent__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.stay-consent__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 166, 70, 0.16);
  color: var(--kruleni-gold);
  font-size: 1.15rem;
}

.stay-consent__copy { min-width: 0; }

.stay-consent__title {
  font-family: var(--kruleni-heading);
  font-size: 1.2rem;
  color: var(--kruleni-white);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.stay-consent__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(246, 241, 231, 0.84);
  margin: 0;
}

.stay-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.stay-consent__privacy {
  margin-right: auto;
  color: var(--kruleni-gold);
  font-size: 0.86rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--kruleni-transition);
}
.stay-consent__privacy:hover {
  color: var(--kruleni-gold-bright);
  border-color: var(--kruleni-gold-bright);
}

.stay-consent__decline,
.stay-consent__accept {
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  font-family: var(--kruleni-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--kruleni-transition), background-color var(--kruleni-transition),
    color var(--kruleni-transition), border-color var(--kruleni-transition);
}

.stay-consent__decline {
  background: transparent;
  color: var(--kruleni-cream);
  border: 1px solid rgba(246, 241, 231, 0.4);
}
.stay-consent__decline:hover {
  background: rgba(246, 241, 231, 0.1);
  border-color: rgba(246, 241, 231, 0.7);
}

.stay-consent__accept {
  background: var(--kruleni-gold);
  color: var(--kruleni-ink);
}
.stay-consent__accept:hover {
  background: var(--kruleni-gold-bright);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }

.divider-gold {
  width: 60px;
  height: 2px;
  background: var(--kruleni-gold);
  margin: 1.2rem 0;
}

.map-frame {
  border-radius: var(--kruleni-radius-lg);
  overflow: hidden;
  box-shadow: var(--kruleni-shadow-md);
  min-height: 360px;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body { padding-top: 76px; }

  .feature-split {
    grid-template-columns: 1fr;
  }
  .feature-split__media { aspect-ratio: 4 / 3; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }

  .header-contact { display: none; }

  .site-nav {
    background: var(--kruleni-ink-soft);
    border-radius: var(--kruleni-radius);
    padding: 1rem;
    margin-top: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .stat-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: span 1; aspect-ratio: 4 / 3; }

  .hero-slider { min-height: 82vh; }

  .stay-consent__actions {
    justify-content: stretch;
  }
  .stay-consent__privacy {
    margin-right: 0;
    flex: 1 1 100%;
    order: 3;
    text-align: center;
  }
  .stay-consent__decline,
  .stay-consent__accept {
    flex: 1 1 auto;
  }
  .stay-consent__body {
    flex-direction: column;
  }
}

/* QA_GRID_COLUMN_FIX .stat-row.row */
.stat-row.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.stat-row.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}

/* QA_CONTRAST_NAV — header nav links inherit Bootstrap's dark default; force light cream */
.site-header .navbar-nav .nav-link,
.site-header .navbar-nav .nav-link:visited,
.site-header .navbar-nav .dropdown-toggle,
.site-header .navbar .dropdown-toggle {
  color: rgba(246, 241, 231, 0.92);
  background-color: transparent;
  border: 0;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .dropdown-toggle:hover,
.site-header .navbar-nav .dropdown-toggle:focus {
  color: var(--kruleni-gold-bright);
}
.site-header .navbar-nav .nav-link:focus-visible,
.site-header .navbar-nav .dropdown-toggle:focus-visible {
  outline: 2px solid var(--kruleni-gold-bright);
  outline-offset: 3px;
}
/* keep dropdown menu links readable on the light dropdown panel */
.site-header .navbar-nav .dropdown-menu .dropdown-item { color: var(--kruleni-ink); }
.site-header .navbar-nav .dropdown-menu .dropdown-item:hover,
.site-header .navbar-nav .dropdown-menu .dropdown-item:focus {
  color: var(--kruleni-ink);
  background-color: rgba(201, 166, 70, 0.22);
}

/* QA_CONTRAST_EYEBROW — deepen the light-background gold eyebrow to meet 4.5:1 */
.eyebrow { color: #7a5f14; }
.section-dark .eyebrow,
.section-overlay .eyebrow { color: var(--kruleni-gold); }

/* QA_CONTRAST_AND_NAV_OVERRIDES */
a,
.eyebrow,
.stay-card__link,
.faq-item .accordion-button:not(.collapsed) {
  color: #7a5c12;
}
a:hover { color: var(--kruleni-ink); }

.header-contact a { color: var(--kruleni-cream); }
.header-contact a:hover { color: var(--kruleni-gold-bright); }
.site-footer a { color: rgba(246, 241, 231, 0.78); }
.site-footer a:hover { color: var(--kruleni-gold-bright); }

.section-dark .eyebrow,
.section-overlay .eyebrow,
.site-footer .eyebrow {
  color: var(--kruleni-gold-bright);
}

.form-control::placeholder,
.form-select::placeholder {
  color: #6b655c;
  opacity: 1;
}

.form-status:empty { display: none; }
.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(201, 166, 70, 0.16);
  border: 1px solid rgba(122, 92, 18, 0.35);
  color: var(--kruleni-ink);
  font-size: 0.94rem;
}

/* Header navigation legibility (fixed dark header) */
.site-header .navbar-nav .nav-link,
.site-header .navbar-nav .dropdown-toggle {
  color: rgba(246, 241, 231, 0.92);
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .dropdown-toggle:hover,
.site-header .navbar-nav .dropdown-toggle:focus,
.site-header .navbar-nav .nav-link.active {
  color: var(--kruleni-gold-bright);
}
.site-header .dropdown-menu .dropdown-item { color: var(--kruleni-ink); }
.site-header .dropdown-menu .dropdown-item:hover,
.site-header .dropdown-menu .dropdown-item:focus { color: #7a5c12; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    background: var(--kruleni-ink-soft);
    border-radius: var(--kruleni-radius);
    padding: 1rem;
    margin-top: 0.8rem;
  }
}

/* ==========================================================================
   QA FIXES — header contrast, hero readability, mobile header overlap,
   eyebrow contrast on light sections.
   ========================================================================== */

/* Header navigation contrast: .site-nav class is not present in markup, so
   target the real header structure instead of relying on it. */
.site-header .navbar-nav .nav-link,
.site-header .navbar .navbar-nav .nav-link,
.site-header .navbar-nav .dropdown-toggle {
  color: var(--kruleni-cream);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .dropdown-toggle:hover,
.site-header .navbar-nav .dropdown-toggle:focus,
.site-header .navbar-nav .show > .nav-link {
  color: var(--kruleni-gold-bright);
}

/* Mobile / tablet navigation panel gets a solid dark readable background. */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    background-color: var(--kruleni-ink);
    border-radius: var(--kruleni-radius);
    padding: 0.75rem 1rem 1rem;
    margin-top: 0.75rem;
  }
}

/* Hero eyebrow: gold on a bright photograph did not meet contrast, so use the
   cream text colour that matches the rest of the hero copy. */
.hero-slider__eyebrow {
  color: var(--kruleni-cream);
}
.hero-slider__eyebrow::before {
  background: var(--kruleni-cream);
}

/* Ghost button on the hero sits over unpredictable photo areas — give it a
   solid ink background so the cream label always has strong contrast. */
.btn-ghost-light {
  background-color: var(--kruleni-ink);
  border: 1px solid rgba(246, 241, 231, 0.5);
  color: var(--kruleni-cream);
}
.btn-ghost-light:hover,
.btn-ghost-light:focus {
  background-color: var(--kruleni-ink-soft);
  border-color: var(--kruleni-cream);
  color: var(--kruleni-white);
}

/* Small uppercase eyebrows on light backgrounds needed a darker gold to reach
   4.5:1. Dark sections keep the brighter gold (higher specificity rule). */
.eyebrow {
  color: #7a5f1c;
}

/* Mobile header overlap: the fixed header is taller than the reserved body
   padding at narrow widths. Let the header sit in normal flow on small screens
   so it can never cover the hero. */
@media (max-width: 991.98px) {
  .site-header,
  header.site-header {
    position: static;
  }

  body {
    padding-top: 0;
  }
}

/* Inline confirmation shown after a booking enquiry is sent. */
.form-success-note {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background-color: rgba(201, 166, 70, 0.16);
  border: 1px solid var(--kruleni-gold);
  color: var(--kruleni-ink);
  font-size: 0.92rem;
  font-weight: 600;
}
.form-success-note[hidden] {
  display: none;
}

/* ==========================================================================
   QA ROUND 2 — mobile header overlap + hero ghost-button contrast
   ========================================================================== */

/* Mobile header overlap: on narrow screens the fixed header was taller than the
   reserved body offset, so it covered the top of the hero. Take the header out of
   the fixed layer entirely on tablets/phones and drop the reserved offset. */
@media (max-width: 991.98px) {
  html body,
  body {
    padding-top: 0 !important;
  }

  header.site-header,
  .site-header,
  .site-header.site-header--compact {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .hero-slider {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Ghost button on the hero: the photograph behind it is unpredictable, so give it
   a solid ink fill so the cream label always clears 4.5:1. */
a.btn.btn-ghost-light,
.btn-ghost-light,
.btn-ghost-light:visited {
  background-color: #121620 !important;
  border: 1px solid rgba(246, 241, 231, 0.65) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}
a.btn.btn-ghost-light:hover,
a.btn.btn-ghost-light:focus,
.btn-ghost-light:hover,
.btn-ghost-light:focus {
  background-color: #1c2231 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   QA CONTRAST — harbour view suites page
   Cards that sit inside a dark section inherit the cream section colour,
   which is unreadable on the white card surface. Force ink text inside cards.
   ========================================================================== */
.stay-card,
.stay-card__body,
.stay-card__body span,
.stay-card__body p,
.stay-card__body li,
.stay-card__body h3,
.stay-card__body a {
  color: var(--kruleni-ink);
}
.stay-card .stay-card__text,
.stay-card__body .stay-card__text {
  color: var(--kruleni-stone);
}
.stay-card__body .contact-icon,
.stay-card__body .contact-icon i {
  color: var(--kruleni-gold-deep);
}
.section-dark .stay-card,
.section-overlay .stay-card,
.section-dark .stay-card__body,
.section-overlay .stay-card__body,
.section-dark .stay-card__body span,
.section-overlay .stay-card__body span,
.section-dark .stay-card__body p,
.section-overlay .stay-card__body p,
.section-dark .stay-card__body li,
.section-overlay .stay-card__body li,
.section-dark .stay-card__body h3,
.section-overlay .stay-card__body h3,
.section-dark .stay-card__body a,
.section-overlay .stay-card__body a {
  color: var(--kruleni-ink);
}
.section-dark .stay-card .stay-card__text,
.section-overlay .stay-card .stay-card__text {
  color: var(--kruleni-stone);
}
.section-dark .stay-card .contact-icon i,
.section-overlay .stay-card .contact-icon i {
  color: var(--kruleni-gold-deep);
}

/* ==========================================================================
   QA CONTRAST — gallery captions
   The captions sat on a fading gradient over the photograph, so the cream
   text was measuring against near-white photo pixels. Use a solid ink bar.
   ========================================================================== */
.gallery-item__caption {
  background: var(--kruleni-ink);
  color: var(--kruleni-white);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ==========================================================================
   QA LAYOUT — stat row spacing on the suite / events pages
   The stat columns (38, 62 m², 4.7 / 5, 11) are stretched by the Bootstrap
   row's default align-items:stretch, so each .stat-item grows to the tallest
   sibling's height and the centred label leaves a large empty band inside
   every card. On phones the columns also collapse to one per row, which
   turned that stretch into nearly a full screen of dead space. Keep the
   columns at their natural height (2x2 grid on phones) and let the tiles
   sit at the top of the row.
   ========================================================================== */
.stat-row {
  align-items: start;
}

@media (max-width: 575.98px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .stat-item {
    padding: 18px 10px;
  }
  .stat-item__value {
    font-size: 1.9rem;
  }
  .stat-item__label {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
  }
}

/* ==========================================================================
   QA LAYOUT — process steps on phones (.process-step)
   .process-step is a flex row, so the number, title and body copy each became
   a separate flex column. On narrow widths the title was squeezed into a very
   narrow column, wrapping to 4-5 lines ("Check-in from 1pm"), which stretched
   each card to a tall block with large empty areas between steps.
   Stack the number/title/copy vertically below the md breakpoint so the title
   and text use the full card width. Desktop grid layout is untouched.
   ========================================================================== */
@media (max-width: 767.98px) {
  .process-step {
    display: block;
    padding: 1.15rem 0;
  }
  .process-step__num {
    margin-bottom: 0.75rem;
  }
  .process-step__title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
  }
  .process-step__text {
    line-height: 1.6;
  }
}

/* ==========================================================================
   QA LAYOUT — enquiry map on service pages (.map-frame applied to an <iframe>)
   On the service/article pages the map iframe carries the .map-frame class
   directly, so the container rules (min-height:360px + shadow + radius) were
   applied to the iframe element itself. Below lg the map is full width, but
   the intrinsic iframe height stayed small while min-height forced a tall
   box, producing a large blank beige placeholder under the contact card
   before the form. Give the iframe itself an explicit, self-contained height
   and drop the container-only decoration on it.
   ========================================================================== */
iframe.map-frame {
  display: block;
  width: 100%;
  height: 320px;
  min-height: 0;
  border: 0;
  border-radius: var(--kruleni-radius-lg);
  background: transparent;
  box-shadow: var(--kruleni-shadow-md);
}

@media (max-width: 767.98px) {
  iframe.map-frame {
    height: 240px;
  }
}