@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap");

/* =========================================================
   KNUSRUS LANDING PAGE — V14
   Mockup-match, readability and full-width correction
   Clean consolidated project CSS
   ========================================================= */

:root {
  --kn-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

html:has(.kn-page),
body:has(.kn-page) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: clip !important;
  background: #040c0f !important;
}

body:has(.kn-page) .wp-site-blocks,
body:has(.kn-page) main,
body:has(.kn-page) .wp-block-post-content,
body:has(.kn-page) .entry-content,
body:has(.kn-page) .has-global-padding {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * The block theme's own root-level spacing (a small top/bottom gap around
 * all page content, separate from the header/footer template parts) is
 * usually a CSS custom property read by .has-global-padding rather than a
 * fixed value — zero it at the source too, scoped to these pages only.
 */
body:has(.kn-page) {
  --wp--style--root--padding-top: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-bottom: 0px !important;
  --wp--style--root--padding-left: 0px !important;
}

body:has(.kn-page) .wp-block-post-title {
  display: none !important;
}

.kn-page {
  --kn-bg: #061014;
  --kn-bg-deep: #040a0d;
  --kn-text: rgba(255, 255, 255, .9);
  --kn-muted: rgba(255, 255, 255, .64);
  --kn-gold: #d6ad67;
  --kn-radius: 22px;
  --kn-rail: min(88vw, 1400px);
  --kn-hero-image: url("/wp-content/uploads/2026/07/029.webp");

  position: relative;
  isolation: isolate;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  color: var(--kn-text);
  background:
    radial-gradient(circle at 18% 32%, rgba(214, 173, 103, .08), transparent 34%),
    radial-gradient(circle at 82% 68%, rgba(76, 118, 124, .08), transparent 38%),
    linear-gradient(180deg, #071114 0%, #040b0e 100%);
}

.kn-page *,
.kn-page *::before,
.kn-page *::after {
  box-sizing: border-box;
}

.kn-page a {
  color: inherit;
  text-decoration: none;
}

.kn-page,
.kn-page.is-layout-flow,
.kn-page.is-layout-constrained {
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

.kn-page > *,
.kn-page.is-layout-flow > * + *,
.kn-page.is-layout-constrained > * + * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

.kn-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-height: max(100svh, clamp(1040px, 82vw, 1240px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: flex-start;
  overflow: hidden !important;
  background: #17100c;
}

.kn-hero .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 50%;
  filter: brightness(1.045) saturate(1.055) contrast(1.02);
  transform:
    translate3d(0, var(--kn-hero-parallax-y, 0px), 0)
    scale(1.035) !important;
  transform-origin: center top;
  will-change: transform;
}

.kn-hero .wp-block-cover__background {
  opacity: 0 !important;
  background: transparent !important;
}

.kn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 61%,
      rgba(4, 10, 12, .08) 68%,
      rgba(4, 10, 12, .16) 74%,
      transparent 82%
    );
}

.kn-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 5;
  display: flex;
  width: var(--kn-rail) !important;
  max-width: 1400px !important;
  min-height: max(100svh, clamp(1040px, 82vw, 1240px));
  margin: 0 auto !important;
  padding: clamp(38px, 4vh, 56px) 0 clamp(62px, 6vh, 82px);
  flex-direction: column;
}

.kn-hero .wp-block-cover__inner-container::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 20px;
  height: 42px;
  transform: translateX(-50%);
  border: 1px solid rgba(214, 173, 103, .68);
  border-radius: 999px;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, .06),
    0 0 16px rgba(214, 173, 103, .08);
  opacity: .9;
}

.kn-hero .wp-block-cover__inner-container::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 3px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 7px rgba(255, 255, 255, .28);
}

.kn-nav {
  position: relative;
  z-index: 6;
  width: 100%;
  gap: 28px;
  margin-bottom: clamp(142px, 16vh, 178px);
  color: #fff !important;
}

.kn-logo {
  margin: 0;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .26em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .6);
}

.kn-logo-sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .94) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
}

.kn-menu {
  gap: clamp(16px, 2vw, 34px);
  color: rgba(255, 255, 255, .96) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.kn-menu a {
  position: relative;
  color: inherit !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  transition: color .35s ease, opacity .35s ease;
}

.kn-menu a:hover {
  color: #fff !important;
}

.kn-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--kn-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.kn-menu a:hover::after {
  transform: scaleX(1);
}

/*
 * WordPress's automatic aria-current="page" detection needs the block to
 * carry the target page's post ID (set via the link picker), which these
 * hand-typed nav links don't have — so the current page is instead marked
 * explicitly via a "kn-current" className on that page's own nav copy.
 */
.kn-menu a[aria-current="page"],
.kn-menu .kn-current > a {
  color: var(--kn-gold) !important;
}

.kn-menu a[aria-current="page"]::after,
.kn-menu .kn-current > a::after {
  transform: scaleX(1);
  opacity: .8;
}

.kn-hero-content {
  position: relative;
  z-index: 5;
  max-width: 720px;
  margin: 0 !important;
}

.kn-kicker {
  margin: 0 0 18px;
  color: var(--kn-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.kn-hero-title,
.kn-section-title,
.kn-booking-title {
  margin-top: 0;
  color: #fff !important;
  font-family: var(--kn-serif);
  font-weight: 300 !important;
  font-synthesis: none;
  line-height: .96;
  letter-spacing: -.028em;
  text-wrap: balance;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, .62),
    0 1px 2px rgba(0, 0, 0, .42);
}

.kn-hero-title {
  max-width: 900px;
  margin-bottom: 30px;
  font-size: clamp(58px, 6.15vw, 100px);
}

.kn-hero-text,
.kn-section-text {
  max-width: 510px;
  margin-bottom: 38px;
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  line-height: 1.72;
}

/* Hero content must finish fully bright after its entrance animation. */
.kn-nav,
.kn-nav *,
.kn-stat-card.active {
  opacity: 1 !important;
}

.kn-logo,
.kn-logo-sub,
.kn-menu,
.kn-menu a,
.kn-hero-title,
.kn-hero-text {
  filter: none !important;
}



/* Readability pass: small text should remain refined, not faint. */
.kn-section-text {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 16.5px;
  line-height: 1.72;
}

.kn-section .kn-kicker,
.kn-booking-card .kn-kicker {
  color: #deb96e !important;
  font-size: 10.5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .42);
}

.kn-stat-label {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 10.5px !important;
  font-weight: 600;
}

.kn-stat-card h3 {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.kn-stat-card p:last-child {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 13px !important;
}

.kn-icon {
  color: rgba(255, 255, 255, .94) !important;
}

.kn-amenity {
  color: rgba(255, 255, 255, .84) !important;
  font-size: 15px !important;
  line-height: 1.45;
}

.kn-link {
  color: rgba(255, 255, 255, .84) !important;
  font-size: 10.5px !important;
  font-weight: 600;
}

.kn-booking-field > label {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 9.5px !important;
  font-weight: 600;
}

.kn-booking-control input,
.kn-booking-control select {
  color: rgba(255, 255, 255, .98) !important;
  font-size: 13.5px !important;
}

.kn-footer-line {
  color: rgba(255, 255, 255, .70) !important;
}

.kn-footer .kn-logo-sub {
  color: rgba(255, 255, 255, .76) !important;
  opacity: 1 !important;
}


/* Local contrast only: keep the photograph open and bright. */
.kn-logo,
.kn-logo-sub,
.kn-menu,
.kn-menu a {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .94),
    0 4px 12px rgba(0, 0, 0, .82),
    0 10px 28px rgba(0, 0, 0, .58);
}

.kn-hero .kn-glass-button .wp-block-button__link {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .92),
    0 4px 12px rgba(0, 0, 0, .70);
}

/* =========================================================
   TRUE EDGE-LIT LIQUID GLASS
   ========================================================= */

.kn-stat-card,
.kn-booking-card,
.kn-amenity-icon,
.kn-slider-bar,
.kn-tour-card,
.kn-bathroom-card,
.kn-bedroom-mini-card,
.kn-bedroom-feature-card,
.kn-experience-mini-card,
.kn-explore-card,
.kn-location-feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .17);
  background:
    radial-gradient(
      105% 36% at 50% -8%,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .055) 31%,
      transparent 61%
    ),
    radial-gradient(
      48% 120% at -6% 45%,
      rgba(255, 255, 255, .105) 0%,
      transparent 68%
    ),
    linear-gradient(
      145deg,
      rgba(17, 19, 20, .54) 0%,
      rgba(8, 11, 13, .48) 48%,
      rgba(4, 8, 10, .62) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .56),
    inset 1px 0 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(255, 255, 255, .07),
    inset 0 0 34px rgba(255, 255, 255, .018),
    0 28px 70px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(10.5px) saturate(132%) brightness(.82);
  backdrop-filter: blur(10.5px) saturate(132%) brightness(.82);
}

.kn-stat-card::before,
.kn-booking-card::before,
.kn-amenity-icon::before,
.kn-slider-bar::before,
.kn-tour-card::before,
.kn-bathroom-card::before,
.kn-bedroom-mini-card::before,
.kn-bedroom-feature-card::before,
.kn-experience-mini-card::before,
.kn-explore-card::before,
.kn-location-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, .035) 9%,
      transparent 25%,
      transparent 91%,
      rgba(255, 255, 255, .025) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .21) 0%,
      rgba(255, 255, 255, .04) 10%,
      transparent 27%,
      transparent 88%,
      rgba(214, 173, 103, .045) 100%
    );
}

.kn-stat-card::after,
.kn-booking-card::after,
.kn-amenity-icon::after,
.kn-slider-bar::after,
.kn-tour-card::after,
.kn-bathroom-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: calc(var(--kn-radius) - 1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 0 24px rgba(255, 255, 255, .018);
}

/* These three use a smaller 16px card radius than --kn-radius (22px),
   so their inner glow needs its own matching radius. */
.kn-bathroom-card::after,
.kn-bedroom-mini-card::after,
.kn-bedroom-feature-card::after,
.kn-experience-mini-card::after,
.kn-explore-card::after,
.kn-location-feature-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: 15px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 0 24px rgba(255, 255, 255, .018);
}

.kn-stat-card > *,
.kn-booking-card > *,
.kn-amenity-icon > *,
.kn-slider-bar > *,
.kn-tour-card > *,
.kn-bathroom-card > *,
.kn-bedroom-mini-card > *,
.kn-bedroom-feature-card > *,
.kn-experience-mini-card > *,
.kn-explore-card > *,
.kn-location-feature-card > * {
  position: relative;
  z-index: 2;
}

.kn-glass-button .wp-block-button__link {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px;
  padding: 17px 28px;
  color: #fff !important;
  background:
    radial-gradient(
      120% 110% at 12% -10%,
      rgba(255, 255, 255, .25) 0%,
      rgba(255, 255, 255, .08) 34%,
      transparent 68%
    ),
    linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(8, 12, 14, .28)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 1px 0 0 rgba(255, 255, 255, .15),
    0 18px 50px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(9px) saturate(135%);
  backdrop-filter: blur(9px) saturate(135%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  transition:
    filter .4s cubic-bezier(.25, 1, .5, 1),
    box-shadow .4s cubic-bezier(.25, 1, .5, 1),
    border-color .4s ease;
}

.kn-glass-button .wp-block-button__link:hover {
  filter: brightness(1.1);
  border-color: rgba(214, 173, 103, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 22px 58px rgba(0, 0, 0, .33),
    0 0 24px rgba(214, 173, 103, .10);
}

/* =========================================================
   HERO STAT CARDS
   ========================================================= */

.kn-stat-row {
  position: relative;
  z-index: 5;
  width: 100% !important;
  max-width: 1400px !important;
  margin: auto 0 0 !important;
  gap: clamp(16px, 1.7vw, 26px) !important;
}

.kn-stat-row .wp-block-column {
  min-width: 0;
  flex-basis: 25% !important;
}

.kn-stat-card {
  min-height: 188px !important;
  padding: 28px;
  border-radius: var(--kn-radius);
  transition:
    border-color .5s ease,
    box-shadow .5s cubic-bezier(.25, 1, .5, 1),
    background .5s ease;
}

.kn-stat-card:hover {
  border-color: rgba(214, 173, 103, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .22),
    inset 0 0 52px rgba(214, 173, 103, .035),
    0 34px 86px rgba(0, 0, 0, .38);
}

.kn-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .88);
}

.kn-stat-label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.kn-stat-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--kn-serif);
  font-size: 40px;
  font-weight: 300 !important;
  line-height: .95;
}

.kn-stat-card p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}


.kn-house {
  margin-top: 0 !important;
}

.kn-house::marker {
  display: none;
}

/* =========================================================
   ATMOSPHERIC CONTINUATION BELOW HERO
   Hero image URL is injected into --kn-hero-image by JS.
   ========================================================= */

.kn-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none !important;
  padding: clamp(82px, 7vw, 106px) 4vw;
  overflow: hidden;
  border-top: 0;
  background: #061014;
}

.kn-section::before {
  content: "";
  position: absolute;
  inset: -24% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background-image: var(--kn-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 66%;
  filter: blur(72px) saturate(.82) brightness(.44);
  transform: scale(1.15);
}

.kn-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(214, 173, 103, .08), transparent 30%),
    radial-gradient(circle at 16% 72%, rgba(48, 100, 108, .08), transparent 34%),
    linear-gradient(
      180deg,
      rgba(4, 11, 14, .48) 0%,
      rgba(4, 11, 14, .66) 48%,
      rgba(4, 11, 14, .84) 100%
    );
}

.kn-section > * {
  position: relative;
  z-index: 1;
}

.kn-house::before {
  inset: -250px -9% -22%;
  background-position: center 67%;
  opacity: .94;
  filter: blur(82px) saturate(.94) brightness(.57);
  transform: scale(1.18);
}

.kn-house::after {
  background:
    radial-gradient(circle at 76% 3%, rgba(214, 173, 103, .18), transparent 34%),
    radial-gradient(circle at 15% 48%, rgba(58, 98, 106, .14), transparent 42%),
    linear-gradient(
      180deg,
      rgba(4, 11, 14, .08) 0%,
      rgba(4, 11, 14, .36) 34%,
      rgba(4, 11, 14, .68) 72%,
      rgba(4, 11, 14, .82) 100%
    );
}

.kn-amenities-section {
  padding-top: clamp(64px, 5vw, 82px) !important;
  padding-bottom: clamp(58px, 4.5vw, 76px) !important;
}

.kn-amenities-section::before {
  inset: -30% -12% -24%;
  background-position: center 82%;
  opacity: .72;
  filter: blur(82px) saturate(.92) brightness(.48);
  transform: scale(1.22);
}

.kn-amenities-section::after {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(214, 173, 103, .18) 0%,
      rgba(214, 173, 103, .07) 24%,
      transparent 48%
    ),
    radial-gradient(
      circle at 18% 46%,
      rgba(64, 116, 124, .18) 0%,
      rgba(64, 116, 124, .07) 28%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 52% 100%,
      rgba(17, 35, 39, .20) 0%,
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(4, 11, 14, .48) 0%,
      rgba(4, 11, 14, .62) 44%,
      rgba(4, 11, 14, .84) 100%
    );
}

.kn-split,
.kn-footer {
  width: var(--kn-rail) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.kn-split {
  gap: clamp(48px, 6vw, 96px);
}

.kn-section-title {
  margin-bottom: 40px;
  font-size: clamp(44px, 4.25vw, 72px);
}

.kn-feature-image {
  margin: 0;
}

.kn-feature-image img {
  width: 100%;
  aspect-ratio: 16 / 8.7;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .42);
  transition: transform .8s cubic-bezier(.25, 1, .5, 1), filter .8s ease;
}

.kn-feature-image:hover img {
  transform: scale(1.015);
  filter: brightness(1.04);
}

.kn-feature-slider {
  position: relative;
}

.kn-feature-slider .kn-feature-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.25, 1, .5, 1), filter .8s ease, opacity .7s ease;
}

.kn-feature-slider .kn-feature-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.kn-slider-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 52%;
  margin: -5px auto 0;
  padding: 15px 28px;
  border-radius: 0 0 18px 18px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  letter-spacing: .18em;
}

.kn-slider-count {
  margin: 0;
}

.kn-slider-arrow {
  display: grid;
  place-items: center;
  padding: 10px;
  margin: -10px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity .3s ease;
}

.kn-slider-arrow:hover {
  opacity: .65;
}

.kn-slider-arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 2px;
  border-radius: 6px;
}

.kn-amenities {
  width: min(100%, 650px) !important;
  max-width: 650px;
  gap: 22px;
  margin: 45px 0 35px;
}

.kn-amenity {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  text-align: center;
}

.kn-amenity-icon {
  display: grid;
  width: 86px;
  height: 86px;
  margin: 0 auto 15px;
  place-items: center;
  border-radius: 16px;
  color: rgba(255, 255, 255, .82);
}

.kn-amenity-icon svg {
  width: 26px;
  height: 26px;
}

.kn-link {
  color: rgba(255, 255, 255, .74);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}


.kn-house + .kn-amenities-section {
  margin-top: -2px !important;
}

.kn-house,
.kn-amenities-section {
  border: 0 !important;
}

/* =========================================================
   BOOKING CARD + ACTUAL INPUTS
   ========================================================= */

.kn-booking-card {
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: 26px;
  transition:
    border-color .5s ease,
    box-shadow .5s cubic-bezier(.25, 1, .5, 1);
}

.kn-booking-card:hover {
  border-color: rgba(214, 173, 103, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .20),
    inset 0 0 64px rgba(214, 173, 103, .028),
    0 42px 112px rgba(0, 0, 0, .42);
}

.kn-booking-title {
  margin-bottom: 28px;
  font-size: clamp(42px, 4vw, 64px);
}

.kn-booking-form {
  margin: 0;
}

.kn-booking-field {
  display: grid;
  grid-template-columns: minmax(96px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 16px;
  min-height: 60px;
  margin-bottom: 13px;
  padding: 8px 12px 8px 18px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 20px rgba(0, 0, 0, .10);
  transition: border-color .32s ease, background .32s ease, box-shadow .32s ease;
}

.kn-booking-field:focus-within {
  border-color: rgba(214, 173, 103, .42);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .15));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 3px rgba(214, 173, 103, .07);
}

.kn-booking-field > label {
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.kn-booking-control {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.kn-booking-control input,
.kn-booking-control select {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 40px 0 4px;
  border: 0;
  outline: 0;
  color: rgba(255, 255, 255, .94);
  background: transparent;
  color-scheme: dark;
  font: 500 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: right;
  cursor: pointer;
}

.kn-booking-control select {
  appearance: none;
  -webkit-appearance: none;
}

/*
 * The select itself picks up color-scheme:dark fine, but the native
 * options popup doesn't reliably inherit it across browsers - without
 * this, option text renders white-on-white (invisible) in the popup
 * even though the closed control looks correct.
 */
.kn-booking-control select option {
  color: #1a1a1a;
  background-color: #fff;
}

.kn-booking-control input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}

.kn-picker-button,
.kn-select-icon {
  position: absolute;
  right: 0;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: rgba(255, 255, 255, .65);
  background: transparent;
}

.kn-picker-button {
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}

.kn-picker-button:hover,
.kn-picker-button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  outline: none;
}

.kn-picker-button svg,
.kn-select-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.kn-select-icon {
  pointer-events: none;
}

.kn-booking-submit {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 15px 58px 15px 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .28), transparent 38%),
    linear-gradient(135deg, #efc878, #b98035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 24px 70px rgba(214, 173, 103, .22);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform .35s cubic-bezier(.25, 1, .5, 1),
    filter .35s ease,
    box-shadow .35s ease;
}

.kn-booking-submit::after {
  content: "→";
  position: absolute;
  right: 13px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: 16px;
}

.kn-booking-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 28px 78px rgba(214, 173, 103, .28);
}

/* =========================================================
   FOOTER
   ========================================================= */

.kn-footer {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, auto) minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 48px !important;
  margin-top: 0 !important;
  padding: 38px 0 44px !important;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
  color: rgba(255, 255, 255, .7);
}

.kn-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, 75vw);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(214, 173, 103, .30), transparent);
}

.kn-footer > .wp-block-group:first-child {
  justify-self: start !important;
}

.kn-footer .kn-logo {
  margin: 0 0 10px !important;
  font-size: 30px !important;
  letter-spacing: .26em;
}

.kn-footer .kn-logo-sub {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .24em;
  opacity: .72;
}

.kn-footer-line {
  justify-self: center !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .54) !important;
  font-size: 10px !important;
  letter-spacing: .30em;
  text-align: center !important;
  white-space: nowrap;
}

.kn-footer .kn-socials,
.kn-socials.wp-block-social-links {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kn-socials .wp-social-link {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .075) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: transform .4s cubic-bezier(.25, 1, .5, 1), background .4s ease, border-color .4s ease;
}

.kn-socials .wp-social-link:hover {
  transform: translateY(-3px);
  border-color: rgba(214, 173, 103, .42);
  background: rgba(214, 173, 103, .20) !important;
}

.kn-socials .wp-social-link a {
  padding: 8px !important;
}

.kn-socials .wp-social-link svg {
  width: 17px !important;
  height: 17px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (min-width: 1101px) {
  .kn-nav {
    margin-bottom: clamp(145px, 13vh, 172px);
  }

  .kn-stat-card {
    min-height: 202px !important;
    padding: 30px;
  }

  .kn-hero-title {
    font-size: clamp(72px, 6.1vw, 104px);
  }
}

@media (min-width: 1101px) {
  .kn-hero-content {
    max-width: 700px;
  }

  .kn-house {
    min-height: 520px;
  }

  .kn-amenities-section {
    min-height: 430px;
  }
}

@media (max-width: 1100px) {
  .kn-nav {
    display: grid !important;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 20px 28px;
    margin-bottom: 110px;
  }

  .kn-logo-wrap {
    justify-self: start;
  }

  .kn-nav-button {
    justify-self: end;
  }

  .kn-menu {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
    gap: clamp(14px, 3vw, 28px);
    font-size: 10px;
    letter-spacing: .16em;
  }

  .kn-split {
    gap: 48px;
  }
}

@media (max-width: 980px) {
  .kn-page {
    --kn-rail: min(92vw, 760px);
  }

  .kn-stat-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kn-stat-row .wp-block-column {
    flex-basis: auto !important;
  }

  .kn-split {
    flex-direction: column;
  }

  .kn-split > .wp-block-column {
    flex-basis: 100% !important;
  }

  .kn-booking-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .kn-amenities {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }

  .kn-footer {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 56px 0 64px !important;
    text-align: center !important;
  }

  .kn-footer > .wp-block-group:first-child,
  .kn-footer-line,
  .kn-footer .kn-socials,
  .kn-socials.wp-block-social-links {
    justify-self: center !important;
    justify-content: center !important;
  }

  .kn-footer-line {
    white-space: normal;
    line-height: 1.8;
  }
}


@media (max-width: 760px) {
  .kn-menu {
    display: none !important;
  }

  .kn-nav {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  .kn-page {
    --kn-rail: min(91vw, 560px);
  }

  .kn-hero {
    min-height: 100svh !important;
  }

  .kn-hero .wp-block-cover__inner-container {
    min-height: 100svh;
    padding: 26px 0 50px;
  }

  .kn-hero .wp-block-cover__inner-container::before,
  .kn-hero .wp-block-cover__inner-container::after {
    display: none;
  }

  .kn-nav-button {
    display: none;
  }

  .kn-hero-title {
    font-size: clamp(48px, 14vw, 66px);
  }

  .kn-hero-text,
  .kn-section-text {
    font-size: 15px;
  }

  .kn-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 50px !important;
  }

  .kn-stat-card {
    min-height: 0 !important;
    padding: 16px;
  }

  .kn-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
  }

  .kn-stat-label {
    margin-bottom: 6px;
    font-size: 8.5px;
  }

  .kn-stat-card h3 {
    margin-bottom: 4px;
    font-size: 26px;
  }

  .kn-stat-card p:last-child {
    font-size: 10.5px;
  }

  .kn-section {
    padding: 70px 4.5vw;
  }

  .kn-section-title {
    font-size: clamp(43px, 12vw, 58px);
  }

  .kn-slider-bar {
    width: 82%;
  }

  .kn-booking-field {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 11px 12px 9px 16px;
  }

  .kn-booking-control input,
  .kn-booking-control select {
    text-align: left;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-hero .wp-block-cover__image-background {
    transform: none !important;
  }

  .kn-feature-image img,
  .kn-stat-card,
  .kn-booking-card,
  .kn-socials .wp-social-link,
  .kn-booking-submit,
  .kn-menu a::after {
    transition: none !important;
  }
}


/* =========================================================
   FLOATING RESERVATION CTA
   ========================================================= */

/*
 * Layout/motion only - position (fixed, right/bottom, z-index) and visual
 * treatment (background/box-shadow/color/text-shadow/backdrop-filter) come
 * from the dedicated position rule and the shared gold-button rule in the
 * V13 section below, which this selector is also part of.
 */
.kn-floating-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 54px;
  padding: 0 12px 0 22px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-decoration: none !important;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .55s cubic-bezier(.25, 1, .5, 1),
    transform .55s cubic-bezier(.25, 1, .5, 1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.kn-floating-reserve.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.kn-floating-reserve:hover {
  transform: translate3d(0, -3px, 0) !important;
}

.kn-floating-reserve__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 640px) {
  .kn-floating-reserve {
    min-height: 50px;
    padding: 0 14px 0 18px;
    font-size: 9px;
    letter-spacing: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-floating-reserve {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   MOBILE NAVIGATION DRAWER
   ========================================================= */

.kn-mobile-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(255, 255, 255, .17), transparent 54%),
    rgba(12, 13, 14, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 12px 34px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
  cursor: pointer;
}

.kn-mobile-menu-toggle__lines,
.kn-mobile-menu-toggle__lines::before,
.kn-mobile-menu-toggle__lines::after {
  display: block;
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.25, 1, .5, 1), opacity .25s ease;
}

.kn-mobile-menu-toggle__lines {
  position: relative;
}

.kn-mobile-menu-toggle__lines::before,
.kn-mobile-menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.kn-mobile-menu-toggle__lines::before {
  top: -6px;
}

.kn-mobile-menu-toggle__lines::after {
  top: 6px;
}

.kn-mobile-menu-toggle[aria-expanded="true"] .kn-mobile-menu-toggle__lines {
  background: transparent;
}

.kn-mobile-menu-toggle[aria-expanded="true"] .kn-mobile-menu-toggle__lines::before {
  top: 0;
  transform: rotate(45deg);
}

.kn-mobile-menu-toggle[aria-expanded="true"] .kn-mobile-menu-toggle__lines::after {
  top: 0;
  transform: rotate(-45deg);
}

.kn-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  visibility: hidden;
  opacity: 0;
  background: rgba(2, 7, 9, .56);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .38s ease, visibility .38s ease;
}

.kn-mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10021;
  display: flex;
  width: min(88vw, 390px);
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  padding:
    max(22px, env(safe-area-inset-top))
    28px
    max(18px, env(safe-area-inset-bottom));
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 22% 4%, rgba(214, 173, 103, .13), transparent 31%),
    radial-gradient(circle at 92% 72%, rgba(62, 112, 120, .12), transparent 34%),
    linear-gradient(160deg, rgba(11, 18, 21, .97), rgba(3, 9, 12, .985));
  box-shadow: -28px 0 80px rgba(0, 0, 0, .48);
  transform: translate3d(102%, 0, 0);
  transition: transform .58s cubic-bezier(.16, 1, .3, 1);
}

.kn-mobile-menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.kn-mobile-menu-panel__brand {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .24em;
}

.kn-mobile-menu-close {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .055);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.kn-mobile-menu-links {
  display: flex;
  min-height: 0;
  margin: 28px -8px 0;
  padding: 0 8px 18px;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 173, 103, .35) transparent;
}

.kn-mobile-menu-links::-webkit-scrollbar {
  width: 4px;
}

.kn-mobile-menu-links::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(214, 173, 103, .35);
}

.kn-mobile-menu-links a {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .90) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.kn-mobile-menu-links a::after {
  content: "→";
  color: rgba(214, 173, 103, .82);
  font-size: 17px;
  font-weight: 300;
}

/*
 * Layout only - position (relative, in normal drawer flow) and gold visual
 * treatment come from the two rules below and the shared gold-button rule
 * in the V13 section, which this selector is also part of.
 */
.kn-mobile-menu-reserve {
  display: flex;
  min-height: 56px;
  flex: 0 0 auto;
  padding: 0 14px 0 22px;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.kn-mobile-menu-open {
  overflow: hidden !important;
}

.kn-mobile-menu-open .kn-mobile-menu-backdrop {
  visibility: visible;
  opacity: 1;
}

.kn-mobile-menu-open .kn-mobile-menu-panel {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .kn-mobile-menu-toggle {
    display: grid;
    flex: 0 0 auto;
  }

  .kn-nav-button {
    display: none !important;
  }

  .kn-logo-wrap {
    margin-right: auto;
  }
}

@media (min-width: 761px) {
  .kn-mobile-menu-backdrop,
  .kn-mobile-menu-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-mobile-menu-backdrop,
  .kn-mobile-menu-panel,
  .kn-mobile-menu-toggle__lines,
  .kn-mobile-menu-toggle__lines::before,
  .kn-mobile-menu-toggle__lines::after {
    transition: none !important;
  }
}


@media (max-width: 760px) and (max-height: 700px) {
  .kn-mobile-menu-panel {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .kn-mobile-menu-panel__top {
    padding-bottom: 14px;
  }

  .kn-mobile-menu-links {
    margin-top: 14px;
    padding-bottom: 10px;
  }

  .kn-mobile-menu-links a {
    min-height: 48px;
  }
}


/* =========================================================
   V8 — HERO READABILITY, LIGHTER GLASS, MOBILE DRAWER FIT
   ========================================================= */

/*
 * A soft, localised shadow field behind the hero copy.
 * This keeps the photograph bright everywhere else.
 */
.kn-hero-content {
  position: relative;
  isolation: isolate;
}

.kn-hero-content::before {
  content: "";
  position: absolute;
  inset: -58px -86px -54px -48px;
  z-index: 0;
  pointer-events: none;
  border-radius: 48%;
  background:
    radial-gradient(
      ellipse at 24% 52%,
      rgba(0, 0, 0, .66) 0%,
      rgba(0, 0, 0, .46) 38%,
      rgba(0, 0, 0, .23) 58%,
      rgba(0, 0, 0, .08) 70%,
      transparent 82%
    );
  filter: blur(22px);
}

.kn-hero-content > * {
  position: relative;
  z-index: 1;
}

.kn-hero-text {
  max-width: 540px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.72;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 5px 14px rgba(0, 0, 0, .94),
    0 14px 34px rgba(0, 0, 0, .78);
}

.kn-hero .kn-kicker {
  color: #efd28f !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 5px 15px rgba(0, 0, 0, .90);
}

/*
 * The drawer is pinned between the actual visible top and bottom edges.
 * The links scroll, while the reservation button always remains in view.
 */
.kn-mobile-menu-panel {
  top: var(--wp-admin--admin-bar--height, 0px);
  bottom: 0;
  height: auto;
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

body.admin-bar .kn-mobile-menu-panel {
  top: 32px;
}

.kn-mobile-menu-links {
  min-height: 0;
  margin-bottom: 0;
}

.kn-mobile-menu-reserve {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 12px 0 0;
  align-self: end;
}

@media (max-width: 782px) {
  body.admin-bar .kn-mobile-menu-panel {
    top: 46px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .kn-mobile-menu-panel {
    padding-top: 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .kn-mobile-menu-panel__top {
    padding-bottom: 10px;
  }

  .kn-mobile-menu-links {
    margin-top: 10px;
  }

  .kn-mobile-menu-links a {
    min-height: 43px;
  }

  .kn-mobile-menu-reserve {
    min-height: 48px;
    margin-top: 8px;
  }
}


/* =========================================================
   V9 — HERO COPY FADE + CLEAR LIQUID GLASS CORRECTION
   ========================================================= */

/*
 * The previous copy backdrop was visibly ending at its right edge.
 * This version is much wider, softer and reaches transparency well
 * before the pseudo-element itself ends.
 */
.kn-hero-content::before {
  inset: -96px -80px -20px -130px;
  border-radius: 0;
  background:
    radial-gradient(
      ellipse 82% 88% at 3% 50%,
      rgba(0, 0, 0, .50) 0%,
      rgba(0, 0, 0, .40) 34%,
      rgba(0, 0, 0, .24) 53%,
      rgba(0, 0, 0, .105) 69%,
      rgba(0, 0, 0, .028) 81%,
      transparent 92%
    );
  filter: blur(34px);
}

/* Keep the copy crisp without creating a hard-edged dark panel. */
.kn-hero-title {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 5px 15px rgba(0, 0, 0, .80),
    0 15px 38px rgba(0, 0, 0, .55);
}

.kn-hero-text {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 4px 12px rgba(0, 0, 0, .88),
    0 11px 28px rgba(0, 0, 0, .62);
}

.kn-stat-card.active,
.kn-stat-card.active *,
.kn-stat-card .kn-icon,
.kn-stat-card .kn-stat-label,
.kn-stat-card h3,
.kn-stat-card p {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.kn-stat-card.active,
.kn-stat-card.active * {
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .kn-hero-content::before {
    inset: -54px -160px -52px -60px;
    background:
      radial-gradient(
        ellipse 94% 92% at 4% 52%,
        rgba(0, 0, 0, .52) 0%,
        rgba(0, 0, 0, .34) 44%,
        rgba(0, 0, 0, .12) 68%,
        transparent 88%
      );
    filter: blur(26px);
  }
}


/* =========================================================
   V10 — DEFINITIVE HERO GLASS FIX
   ========================================================= */

/*
 * Force the hero CTA to render as visibly illuminated glass.
 * This deliberately overrides all earlier button/theme backgrounds.
 */
.kn-hero .wp-block-button.kn-glass-button {
  display: inline-flex !important;
  position: relative;
  isolation: isolate;
  border-radius: 14px;
}

.kn-hero .wp-block-button.kn-glass-button > .wp-block-button__link,
.kn-hero .wp-block-button.kn-glass-button > a.wp-element-button {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: 14px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  background-color: rgba(255, 255, 255, .095) !important;
  background-image:
    radial-gradient(
      320px 260px at 45% -60%,
      rgba(255, 255, 255, .32) 0%,
      rgba(255, 255, 255, .12) 34%,
      rgba(255, 255, 255, .025) 60%,
      transparent 78%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .08) 0%,
      rgba(255, 255, 255, .035) 48%,
      rgba(9, 16, 18, .12) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 1px 0 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .15),
    inset -1px 0 0 rgba(255, 255, 255, .10),
    inset 0 0 28px rgba(255, 255, 255, .045),
    0 26px 62px rgba(0, 0, 0, .34) !important;

  -webkit-backdrop-filter: blur(12px) saturate(150%) brightness(1.12) !important;
  backdrop-filter: blur(12px) saturate(150%) brightness(1.12) !important;
}

.kn-hero .wp-block-button.kn-glass-button > .wp-block-button__link:hover,
.kn-hero .wp-block-button.kn-glass-button > a.wp-element-button:hover {
  border-color: rgba(239, 201, 126, .66) !important;
  background-color: rgba(255, 255, 255, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 1px 0 0 rgba(255, 255, 255, .55),
    0 20px 48px rgba(0, 0, 0, .34),
    0 0 28px rgba(214, 173, 103, .13) !important;
}

/*
 * Remove every pseudo-overlay from the hero stat cards.
 * The illuminated edge is now created entirely with borders and inset
 * shadows, so nothing can sit visually above or darken the wording.
 */
.kn-stat-card::before,
.kn-stat-card::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.kn-stat-card {
  isolation: isolate !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34) !important;

  background-color: rgba(255, 255, 255, .095) !important;
  background-image:
    radial-gradient(
      150% 72% at 45% -22%,
      rgba(255, 255, 255, .32) 0%,
      rgba(255, 255, 255, .12) 34%,
      rgba(255, 255, 255, .025) 60%,
      transparent 78%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .08) 0%,
      rgba(255, 255, 255, .035) 48%,
      rgba(9, 16, 18, .12) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 1px 0 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .15),
    inset -1px 0 0 rgba(255, 255, 255, .10),
    inset 0 0 28px rgba(255, 255, 255, .045),
    0 26px 62px rgba(0, 0, 0, .34) !important;

  -webkit-backdrop-filter: blur(4px) saturate(150%) brightness(1.12) !important;
  backdrop-filter: blur(4px) saturate(150%) brightness(1.12) !important;
}

/* The card itself may still fade in; its content must never be dimmed. */
.kn-stat-card > *,
.kn-stat-card .kn-icon,
.kn-stat-card .kn-stat-label,
.kn-stat-card h3,
.kn-stat-card p,
.kn-stat-card a,
.kn-stat-card strong,
.kn-stat-card span {
  position: relative !important;
  z-index: 5 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.kn-stat-card .kn-icon {
  color: rgba(255, 255, 255, .98) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .94),
    0 4px 12px rgba(0, 0, 0, .48);
}

.kn-stat-card .kn-stat-label {
  color: rgba(255, 255, 255, .98) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .98) !important;
  font-weight: 650 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 4px 11px rgba(0, 0, 0, .72);
}

.kn-stat-card h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 5px 15px rgba(0, 0, 0, .54);
}

.kn-stat-card p:last-child {
  color: rgba(255, 255, 255, .94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .94) !important;
  font-weight: 450 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 4px 11px rgba(0, 0, 0, .68);
}


/* =========================================================
   V12 — ISOLATED GOLD RESERVATION BUTTONS
   No hero-card styling is changed below this point.
   ========================================================= */

/*
 * Layout only - visual treatment (background/box-shadow/color/text-shadow/
 * backdrop-filter) comes from the shared gold-button rule in the V13
 * section below, which this selector is also part of.
 */
.kn-nav-button .wp-block-button__link {
  position: relative !important;
  display: inline-flex !important;
  min-height: 52px;
  padding: 16px 58px 16px 24px !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  transition:
    filter .4s cubic-bezier(.25, 1, .5, 1),
    box-shadow .4s cubic-bezier(.25, 1, .5, 1),
    border-color .4s ease;
}

.kn-nav-button .wp-block-button__link::after {
  content: "→";
  position: absolute;
  right: 11px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

/*
 * Floating Reserve your stay button, and the mobile drawer CTA: layout
 * lives with each component above/below; position and gold visual
 * treatment for both come from the dedicated position rule and the shared
 * gold-button rule in the V13 section, which both selectors are part of.
 */


/* =========================================================
   V13 — DARK CHAMPAGNE RESERVATION CTA + SMART SCROLL HEADER
   The four hero glass cards are intentionally untouched.
   ========================================================= */

/*
 * Keep the existing gold reservation-button appearance.
 * Add only a soft, faded dark halo behind each button so it remains
 * readable against bright imagery, in the same spirit as the menu text.
 */
.kn-nav-button .wp-block-button__link,
.kn-floating-reserve,
.kn-mobile-menu-reserve,
.kn-smart-header .kn-nav-button .wp-block-button__link {
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255, 255, 255, .28),
      transparent 38%
    ),
    linear-gradient(135deg, #efc878, #b98035) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 16px 42px rgba(0, 0, 0, .46),
    0 28px 70px rgba(0, 0, 0, .24),
    0 20px 58px rgba(214, 173, 103, .23) !important;
  filter:
    drop-shadow(0 5px 10px rgba(0, 0, 0, .42))
    drop-shadow(0 12px 24px rgba(0, 0, 0, .26));
  text-shadow:
    0 1px 2px rgba(92, 58, 18, .44),
    0 4px 12px rgba(0, 0, 0, .30) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.kn-nav-button .wp-block-button__link:hover,
.kn-floating-reserve:hover,
.kn-mobile-menu-reserve:hover,
.kn-smart-header .kn-nav-button .wp-block-button__link:hover {
  filter:
    brightness(1.07)
    drop-shadow(0 7px 13px rgba(0, 0, 0, .46))
    drop-shadow(0 16px 30px rgba(0, 0, 0, .28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 20px 52px rgba(0, 0, 0, .48),
    0 30px 78px rgba(0, 0, 0, .25),
    0 26px 72px rgba(214, 173, 103, .30) !important;
}

/* Keep the floating CTA fixed in the bottom-right corner. */
.kn-floating-reserve {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: clamp(16px, 2.2vw, 34px) !important;
  bottom: clamp(16px, 2.2vw, 34px) !important;
  z-index: 10010 !important;
}

/* =========================================================
   SMART HEADER — appears when the user scrolls upward
   ========================================================= */

.kn-smart-header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -118%, 0);
  transition:
    transform .68s cubic-bezier(.16, 1, .3, 1),
    opacity .36s ease,
    visibility .36s ease;
}

body.admin-bar .kn-smart-header {
  top: 32px;
}

.kn-smart-header.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.kn-smart-header__shell {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(
      85% 170% at 12% -62%,
      rgba(214, 173, 103, .13),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(6, 12, 15, .91),
      rgba(5, 11, 14, .84)
    );
  box-shadow:
    0 18px 58px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.kn-smart-header__inner {
  width: min(calc(100% - 64px), var(--kn-content-width, 1360px));
  min-height: 78px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 30px;
}

.kn-smart-header .kn-logo-wrap {
  justify-self: start;
}

.kn-smart-header .kn-logo {
  font-size: 22px !important;
  letter-spacing: .25em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 5px 16px rgba(0, 0, 0, .64);
}

.kn-smart-header .kn-logo-sub {
  margin-top: 6px;
  font-size: 8px !important;
  color: rgba(255, 255, 255, .72) !important;
}

.kn-smart-header .kn-menu {
  display: flex !important;
  justify-self: center;
  gap: clamp(16px, 2vw, 30px);
  font-size: 9px;
  letter-spacing: .19em;
  white-space: nowrap;
}

.kn-smart-header .kn-menu a {
  color: rgba(255, 255, 255, .82) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
  transition: color .28s ease, transform .28s ease;
}

.kn-smart-header .kn-menu a:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.kn-smart-header .kn-nav-button {
  justify-self: end;
}

.kn-smart-header .kn-nav-button .wp-block-button__link {
  min-height: 46px;
  padding: 13px 52px 13px 20px !important;
  font-size: 9px;
}

.kn-smart-header .kn-nav-button .wp-block-button__link::after {
  right: 9px;
  width: 29px;
  height: 29px;
}

.kn-smart-menu-toggle {
  display: none;
  justify-self: end;
}

/* Hide the floating CTA while the smart header is visible on wide screens. */
@media (min-width: 761px) {
  body.kn-smart-header-visible .kn-floating-reserve {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0) !important;
  }
}

@media (max-width: 1100px) {
  .kn-smart-header__inner {
    width: min(calc(100% - 40px), var(--kn-content-width, 1360px));
    grid-template-columns: auto 1fr auto;
    gap: 20px;
  }

  .kn-smart-header .kn-menu {
    gap: clamp(12px, 1.7vw, 20px);
    font-size: 8px;
    letter-spacing: .14em;
  }

  .kn-smart-header .kn-nav-button .wp-block-button__link {
    padding-left: 17px !important;
    padding-right: 47px !important;
  }
}

@media (max-width: 760px) {
  .kn-smart-header__inner {
    min-height: 68px;
    grid-template-columns: 1fr auto;
  }

  .kn-smart-header .kn-menu,
  .kn-smart-header .kn-nav-button {
    display: none !important;
  }

  .kn-smart-header .kn-logo {
    font-size: 19px !important;
  }

  .kn-smart-menu-toggle {
    display: grid;
  }

  body.admin-bar .kn-smart-header {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-smart-header {
    transition: none !important;
  }
}

/* =========================================================
   V15 — GALLERY & VIRTUAL TOUR PAGE
   Sub-page header (nav without the full hero cover), the
   click-to-load virtual tour facade, and the photo grid.
   ========================================================= */

.kn-page-header {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding-bottom: clamp(48px, 5vw, 72px);
  background: #050c0f;
}

/*
 * Same atmospheric blurred-hero-photo treatment as .kn-section, so this
 * sub-page header reads as a continuation of the property's imagery
 * rather than a flat, generic banner.
 */
.kn-page-header::before {
  content: "";
  position: absolute;
  inset: -20% -10% -10%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background-image: var(--kn-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 30%;
  filter: blur(60px) saturate(.9) brightness(.56);
  transform: scale(1.15);
}

.kn-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 8%, rgba(214, 173, 103, .14), transparent 32%),
    radial-gradient(circle at 14% 62%, rgba(48, 100, 108, .12), transparent 36%),
    linear-gradient(
      180deg,
      rgba(4, 11, 14, .40) 0%,
      rgba(4, 11, 14, .58) 55%,
      rgba(4, 11, 14, .80) 100%
    );
}

.kn-page-header > * {
  position: relative;
  z-index: 1;
}

.kn-page-header__inner {
  width: var(--kn-rail) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-top: clamp(28px, 4vh, 44px);
}

.kn-page-header .kn-nav {
  margin-bottom: clamp(56px, 8vh, 88px) !important;
}

.kn-logo-wrap .kn-logo a {
  color: inherit;
  text-decoration: none;
}

.kn-page-title-wrap {
  max-width: 640px;
}

.kn-page-title {
  margin: 14px 0 16px;
  font-family: var(--kn-serif);
  font-size: clamp(38px, 3.6vw, 58px);
  font-weight: 300;
}

.kn-page-subtitle {
  color: var(--kn-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}

.kn-tour-card {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: var(--kn-radius);
  text-align: center;
}

.kn-tour-card .kn-section-title {
  margin-bottom: 28px;
  font-size: clamp(32px, 3vw, 46px);
}

.kn-tour-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background-image:
    linear-gradient(180deg, rgba(4, 10, 12, .32) 0%, rgba(4, 10, 12, .74) 100%),
    var(--kn-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.kn-tour-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kn-tour-launch {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 10, 12, .46);
  -webkit-backdrop-filter: blur(9px) saturate(135%);
  backdrop-filter: blur(9px) saturate(135%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .35s ease, border-color .35s ease, transform .35s cubic-bezier(.25, 1, .5, 1);
}

.kn-tour-launch:hover {
  filter: brightness(1.12);
  border-color: rgba(214, 173, 103, .5);
  transform: translate(-50%, -50%) scale(1.03);
}

.kn-tour-launch__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--kn-gold);
  color: #1a1204;
  font-size: 10px;
}

.kn-tour-fallback {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .1em;
}

.kn-tour-fallback a {
  color: var(--kn-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease;
}

.kn-tour-fallback a:hover {
  color: var(--kn-gold);
}

/*
 * Homepage cinematic video facade - same lazy-load shape as .kn-tour-frame
 * above, and reuses .kn-tour-launch/.kn-tour-launch__icon verbatim for the
 * play button (purely generic "centered pill button" styling, nothing
 * tour-specific in it). Only the frame itself is a new class, since this
 * needs a real <img> poster (the video's own thumbnail) rather than
 * .kn-tour-frame's CSS background-image of the generic hero photo.
 */
.kn-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}

.kn-video-frame__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kn-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 10, 12, .32) 0%, rgba(4, 10, 12, .74) 100%);
  pointer-events: none;
}

.kn-video-frame .kn-tour-launch {
  z-index: 2;
}

.kn-video-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Targeted off .kn-gallery-grid (the gallery block's own wrapper) rather
 * than a per-image class — images added later via the block's "Media
 * Library" multi-select don't inherit a custom className, only the
 * block-level one survives.
 *
 * Column count is forced here with !important rather than relying on the
 * block's own "Columns" setting/columns-N class, so this reads as a dense,
 * scannable thumbnail wall for a large (60+) photo set regardless of what
 * the block's own column attribute is set to.
 */
.kn-gallery-grid.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}

/*
 * The gallery block saves each image figure with its own inline width
 * (a percentage matching whatever column count was set at save time).
 * That leftover inline width fights the grid above, leaving each tile
 * much narrower than its column with empty space around it — force it
 * to fill its grid cell instead.
 */
.kn-gallery-grid.wp-block-gallery .wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.kn-gallery-grid .wp-block-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
  transition: transform .7s cubic-bezier(.25, 1, .5, 1), filter .7s ease;
}

.kn-gallery-grid .wp-block-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

@media (max-width: 1100px) {
  .kn-tour-launch {
    padding: 14px 24px;
    font-size: 11px;
  }
}

@media (max-width: 980px) {
  .kn-gallery-grid.wp-block-gallery {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 761px) {
  .kn-page-header .kn-nav {
    margin-bottom: clamp(40px, 7vh, 60px) !important;
  }

  .kn-page-title {
    font-size: clamp(32px, 8vw, 42px);
  }

  .kn-tour-launch {
    gap: 8px;
    padding: 12px 18px;
    font-size: 10px;
  }

  .kn-tour-launch__icon {
    width: 22px;
    height: 22px;
  }

  .kn-gallery-grid.wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-tour-launch,
  .kn-gallery-grid .wp-block-image img {
    transition: none !important;
  }
}

/*
 * Core's own lightbox is no longer used on this page at all (replaced
 * 2026-07-23 by PhotoSwipe - see Architecture notes) - the .wp-lightbox-
 * overlay override rules that used to live here (dark scrim, aspect-ratio
 * fixes, an attempted overflow/touch-action pinch-zoom fix) are gone since
 * none of that markup renders anymore. If core's lightbox is ever
 * reintroduced, check git history for the old override block first rather
 * than re-deriving it from scratch.
 */

/* =========================================================
   V16 — BEDROOMS PAGE (+ shared sub-page photo hero)
   Photo hero (shorter than the homepage's full-height .kn-hero, so
   built standalone rather than reusing that class - its inner-container
   forces a 100svh min-height that would fight a shorter variant), then
   an intro split, per-room detail rows, a mini grid + shared-bathroom
   card, a feature row, and the existing .kn-booking-card dropped in
   as-is. Reuses .kn-stat-row/.kn-split/.kn-section-title/.kn-glass-button/
   .kn-amenities/.kn-slider-bar/.kn-booking-card wherever the layout
   matches those existing components rather than inventing new ones.

   .kn-subpage-hero itself is a generic component, not bedroom-specific -
   it's the standard photo hero for any sub-page header (Bedrooms first,
   then Gallery reused it verbatim 2026-07-16 in place of the old flat
   .kn-page-header banner treatment).
   ========================================================= */

.kn-subpage-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(620px, 58vw, 760px) !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: flex-start;
  overflow: hidden !important;
  background: #17100c;
}

.kn-subpage-hero .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40%;
  filter: brightness(1.02) saturate(1.05) contrast(1.02);
  transform:
    translate3d(0, var(--kn-hero-parallax-y, 0px), 0)
    scale(1.035) !important;
  transform-origin: center top;
  will-change: transform;
}

.kn-subpage-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: var(--kn-rail) !important;
  max-width: 1400px !important;
  min-height: clamp(620px, 58vw, 760px);
  margin: 0 auto !important;
  padding: clamp(28px, 4vh, 44px) 0 clamp(28px, 4vh, 40px);
  flex-direction: column;
  justify-content: space-between;
}

.kn-subpage-hero__content {
  max-width: 600px;
  margin-top: clamp(24px, 4vh, 48px);
}

.kn-subpage-hero__content .kn-hero-title {
  font-size: clamp(46px, 4.6vw, 74px);
  margin-bottom: 20px;
}

.kn-subpage-hero__content .kn-hero-text {
  margin-bottom: 30px;
}

.kn-subpage-hero .kn-stat-row {
  margin-top: clamp(28px, 4vh, 48px) !important;
}

/*
 * Intro split ("Spaces designed for deep rest") - text side reuses
 * .kn-split/.kn-section-title/.kn-section-text/.kn-glass-button as-is;
 * only the image side (a 3-photo collage instead of a single feature
 * image) is new.
 */
.kn-bedroom-collage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: clamp(320px, 30vw, 440px);
}

.kn-bedroom-collage__main {
  grid-row: 1 / 3;
}

.kn-bedroom-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/*
 * Per-room detail rows (Bedroom 1 & 2) - large photo with a smaller
 * accent photo inset over its corner, plus a description and an
 * icon-chip amenity list.
 */
.kn-bedroom-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(64px, 7vw, 96px);
}

.kn-bedroom-detail__image-wrap {
  position: relative;
  margin: 0 32px 32px 0;
}

.kn-bedroom-detail__image-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--kn-radius);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}

.kn-bedroom-detail__inset {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 38%;
  border: 4px solid #061014;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.kn-bedroom-detail__inset img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kn-bedroom-detail__body .kn-kicker {
  margin-bottom: 12px;
}

.kn-bedroom-detail__name {
  margin: 0 0 18px;
  font-family: var(--kn-serif);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 300;
}

.kn-bedroom-detail__text {
  max-width: 480px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 16px;
  line-height: 1.65;
}

/* Icon-chip amenity list, shared by the detail rows and the bathroom card. */
.kn-bedroom-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: 28px;
}

.kn-bedroom-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 132px;
  text-align: center;
}

.kn-bedroom-tag__icon {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-gold);
}

.kn-bedroom-tag__icon svg {
  width: 32px;
  height: 32px;
}

.kn-bedroom-tag__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  color: var(--kn-muted);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .02em;
}

/* Bedrooms 3-5 mini grid + the shared-bathroom card alongside them - both
   .kn-bedroom-mini-card and .kn-bathroom-card carry the same liquid-glass
   treatment (added to the shared mixin above) so all four read as one
   consistent card row, sized to match the detail rows' text scale. */
.kn-bedroom-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
}

.kn-bedroom-mini-card {
  border-radius: 16px;
  padding: 18px;
}

.kn-bedroom-mini-card__image {
  margin: 0 0 16px;
}

.kn-bedroom-mini-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.kn-bedroom-mini-card__name {
  margin: 0 0 6px;
  font-family: var(--kn-serif);
  font-size: 23px;
  font-weight: 300;
}

.kn-bedroom-mini-card__beds {
  margin: 0;
  color: var(--kn-muted);
  font-size: 14.5px;
}

.kn-bathroom-card {
  border-radius: 16px;
  padding: 18px;
}

.kn-bathroom-card__title {
  margin: 0 0 10px;
  font-family: var(--kn-serif);
  font-size: 23px;
  font-weight: 300;
}

.kn-bathroom-card__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.kn-bathroom-card .kn-bedroom-tags {
  justify-content: center;
  margin-top: 18px;
  gap: 14px;
}

.kn-bathroom-card .kn-bedroom-tag {
  width: 72px;
}

.kn-bathroom-card .kn-bedroom-tag__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.kn-bathroom-card .kn-bedroom-tag__icon svg {
  width: 24px;
  height: 24px;
}

.kn-bathroom-card .kn-bedroom-tag__label {
  min-height: 2.2em;
  font-size: 11.5px;
}

/*
 * Feature row + booking card, side by side - reuses .kn-split for the
 * two-column layout. .kn-bedroom-cta-split forces both columns to stretch
 * to match each other's height (no verticalAlignment on the wp:columns
 * block, so it keeps flexbox's default "stretch" instead of "center"),
 * then .kn-bedroom-feature-grid fills that full height with 1fr row
 * tracks so its cards grow tall enough to visually balance the
 * .kn-booking-card next to them, rather than sitting short with dead
 * space below. .kn-bedroom-feature-grid is a compact 2-col grid of glass
 * cards (icon+heading+text together, unlike the homepage's bare
 * .kn-amenity icons); the 5th (odd) card spans both columns so the last
 * row is centered instead of stranded on the left.
 */
.kn-bedroom-cta-split .wp-block-column {
  display: flex;
}

.kn-bedroom-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100%;
}

.kn-bedroom-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  border-radius: 16px;
  text-align: center;
}

.kn-bedroom-feature-card:last-child {
  grid-column: 1 / -1;
}

.kn-bedroom-feature-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-gold);
}

.kn-bedroom-feature-card__icon svg {
  width: 20px;
  height: 20px;
}

.kn-bedroom-feature-card__title {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.kn-bedroom-feature-card__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .kn-bedroom-mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .kn-bedroom-detail,
  .kn-bedroom-detail:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .kn-bedroom-detail__image-wrap {
    margin-right: 0;
  }
}

@media (max-width: 761px) {
  .kn-bedroom-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .kn-bedroom-collage__main {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .kn-bedroom-collage img {
    height: 100%;
  }

  .kn-bedroom-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .kn-bedroom-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .kn-bedroom-detail__inset {
    width: 50%;
    right: -12px;
    bottom: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-bathroom-card {
    transition: none !important;
  }
}

/* =========================================================
   V17 — EXPERIENCES PAGE
   Photo hero reuses .kn-subpage-hero as-is. Everything below is new:
   .kn-experience-spotlight (a wp:cover "feature card" used twice —
   once side-lit for the Jongensfontein panorama, once as the shorter
   --band variant for the Goukou Meander cinematic strip),
   .kn-pill-row/.kn-pill (a lighter text-only tag chip, distinct from
   the heavier icon-box .kn-bedroom-tag since these repeat 3-5x per
   card across eight experiences), .kn-experience-editorial (the
   Whale Trail / Inverroche pair — Inverroche was swapped in from the
   mini-grid 2026-07-17 per the user's request to give it the more
   prominent slot; Goukou River took its place in the mini-grid),
   .kn-experience-mini-card (the Geelkrans / Fish Traps / Blombos /
   Goukou River grid — added to the shared liquid-glass mixin above
   alongside .kn-explore-card) and .kn-explore-card (the compact
   "More to Explore" row). None of these cards link anywhere (no
   expanded per-experience pages are planned), so there is no
   .kn-link/arrow CTA on any of them by design. The closing CTA
   reuses .kn-split/.kn-booking-card verbatim, same as every other
   page.
   ========================================================= */

.kn-experience-spotlight {
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(420px, 34vw, 560px) !important;
  margin: 0 !important;
  border-radius: var(--kn-radius);
  overflow: hidden !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .42);
}

.kn-experience-spotlight .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 50%;
  filter: brightness(1.02) saturate(1.05) contrast(1.02);
  transition: transform .8s cubic-bezier(.25, 1, .5, 1), filter .8s ease;
}

.kn-experience-spotlight:hover .wp-block-cover__image-background {
  transform: scale(1.03);
  filter: brightness(1.06) saturate(1.05) contrast(1.02);
}

.kn-experience-spotlight .wp-block-cover__background {
  opacity: 0 !important;
  background: transparent !important;
}

.kn-experience-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 30%,
    rgba(4, 10, 12, .74) 68%,
    rgba(4, 10, 12, .88) 100%
  );
}

.kn-experience-spotlight .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  padding: clamp(28px, 4vw, 56px);
  align-items: center;
  justify-content: flex-end;
}

.kn-experience-spotlight__content {
  max-width: 460px;
}

.kn-experience-spotlight__content .kn-section-title {
  margin-bottom: 18px;
  font-size: clamp(32px, 3vw, 46px);
}

.kn-experience-spotlight__content .kn-section-text {
  margin-bottom: 0;
  max-width: 100%;
}

.kn-experience-spotlight--band {
  min-height: clamp(340px, 26vw, 460px) !important;
}

.kn-experience-spotlight--band::after {
  background: linear-gradient(
    0deg,
    rgba(4, 10, 12, .84) 0%,
    rgba(4, 10, 12, .55) 32%,
    transparent 62%
  );
}

.kn-experience-spotlight--band .wp-block-cover__inner-container {
  align-items: flex-end;
  justify-content: flex-start;
}

.kn-experience-spotlight--band .kn-experience-spotlight__content {
  max-width: 560px;
}

/* Lightweight text-only tag chip, shared by the spotlights, the
   editorial pair and the mini-card grid. */
.kn-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}

.kn-pill {
  margin: 0;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Whale Trail / Goukou River editorial pair. */
.kn-experience-pair {
  gap: clamp(32px, 4vw, 56px);
}

.kn-experience-editorial__image {
  position: relative;
  margin: 0 0 24px;
}

.kn-experience-editorial__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--kn-radius);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}

.kn-experience-editorial__badge {
  position: absolute;
  left: 20px;
  bottom: -22px;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(6, 16, 20, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--kn-gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

.kn-experience-editorial__badge svg {
  width: 24px;
  height: 24px;
}

.kn-experience-editorial__name {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--kn-serif);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 300;
}

.kn-experience-editorial__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 15.5px;
  line-height: 1.68;
}

/* Geelkrans / Fish Traps / Blombos / Inverroche grid. */
.kn-experience-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
}

.kn-experience-mini-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 20px;
}

.kn-experience-mini-card__image {
  position: relative;
  margin: 0 0 16px;
}

.kn-experience-mini-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.kn-experience-mini-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(6, 16, 20, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--kn-gold);
}

.kn-experience-mini-card__badge svg {
  width: 18px;
  height: 18px;
}

.kn-experience-mini-card__name {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--kn-serif);
  font-size: 22px;
  font-weight: 300;
}

.kn-experience-mini-card__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.kn-experience-mini-card__note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}

/* "More to Explore" compact row. */
.kn-explore-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
  margin-top: 32px;
}

.kn-explore-card {
  padding: 24px;
  border-radius: 16px;
}

.kn-explore-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-gold);
}

.kn-explore-card__icon svg {
  width: 20px;
  height: 20px;
}

.kn-explore-card__title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--kn-serif);
  font-size: 21px;
  font-weight: 300;
}

.kn-explore-card__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .kn-experience-mini-grid,
  .kn-explore-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .kn-experience-editorial__badge {
    left: 16px;
  }
}

@media (max-width: 761px) {
  .kn-experience-spotlight {
    min-height: clamp(380px, 70vw, 520px) !important;
  }

  .kn-experience-spotlight .wp-block-cover__inner-container {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px;
  }

  .kn-experience-spotlight::after {
    background: linear-gradient(
      0deg,
      rgba(4, 10, 12, .86) 0%,
      rgba(4, 10, 12, .5) 40%,
      transparent 70%
    );
  }

  .kn-experience-spotlight__content {
    max-width: 100%;
  }

  .kn-experience-editorial__badge {
    width: 46px;
    height: 46px;
    bottom: -18px;
  }

  .kn-experience-editorial__badge svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 640px) {
  .kn-experience-mini-grid,
  .kn-explore-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-experience-spotlight .wp-block-cover__image-background,
  .kn-experience-mini-card {
    transition: none !important;
  }
}

/* =========================================================
   V18 — LOCATION PAGE
   Photo hero reuses .kn-subpage-hero + .kn-stat-row/.kn-stat-card
   verbatim (as a 4-item address/distance summary instead of house
   stats). "Between village and sea" reuses .kn-split/.kn-section-title/
   .kn-glass-button, only .kn-location-feature-grid/-card (a plain 2x2
   glass-card grid, added to the shared liquid-glass mixin above) is
   new. .kn-map-panel shows the client's own "Jongensfontein Map"
   graphic (swapped in 2026-07-23, replacing an earlier placeholder
   photo that used a dark wp:cover dim layer + CSS-positioned
   .kn-map-pin/.kn-map-marker labels standing in for the map's own
   detail) as a plain wp:image at its natural aspect ratio - the real
   map graphic already shows this labeling itself, so the overlay
   markers were removed rather than repositioned. .kn-map-info reuses
   .kn-booking-card as a generic glass-panel shell for the "Everything
   within reach" list.
   .kn-directions-grid is a 3-up row of .kn-explore-card (reused
   as-is). The closing editorial photo pair reuses
   .kn-bedroom-detail__image-wrap/__inset, and the final CTA reuses
   .kn-split/.kn-booking-card verbatim, same as every other page.
   ========================================================= */

.kn-location-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 32px;
}

.kn-location-feature-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border-radius: 16px;
}

.kn-location-feature-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-gold);
}

.kn-location-feature-card__icon svg {
  width: 20px;
  height: 20px;
}

.kn-location-feature-card__title {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.kn-location-feature-card__text {
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Map + "Everything within reach" split. The map is shown at its own
   natural aspect ratio (a real designed graphic, not a photo needing a
   crop) - no fixed height or object-fit, just a rounded/shadowed frame
   around the plain <img>. */
.kn-map-panel {
  margin: 0 !important;
  border-radius: var(--kn-radius);
  overflow: hidden !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .42);
}

.kn-map-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Core's own per-block generated layout class (a uniquely-named
 * "wp-container-core-columns-is-layout-*" class, regenerated fresh per
 * block instance) sets align-items back to its default and wins the
 * cascade over the "are-vertically-aligned-center" class WordPress adds
 * for verticalAlignment:center - same family of core-vs-custom-CSS fight
 * as the injected margin-block-start issue documented elsewhere in this
 * file. Forcing it here is more reliable than fighting specificity.
 */
.kn-map-split {
  align-items: center !important;
}

.kn-map-info-list {
  margin: 24px 0 28px;
}

.kn-map-info-row {
  width: 100% !important;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.kn-map-info-row:last-child {
  border-bottom: 0;
}

.kn-map-info-row__label {
  gap: 12px !important;
}

.kn-map-info-row__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--kn-gold);
  flex-shrink: 0;
}

.kn-map-info-row__icon svg {
  width: 15px;
  height: 15px;
}

.kn-map-info-row__text {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 13.5px;
}

.kn-map-info-row__value {
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
  white-space: nowrap;
}

.kn-map-info-note {
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}

/* "Arrive with ease" directions row - reuses .kn-explore-card as-is. */
.kn-directions-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
}

.kn-directions-card__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.kn-directions-card__links a,
.kn-directions-card__links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kn-gold);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s ease;
}

.kn-directions-card__links a:hover,
.kn-directions-card__links button:hover {
  color: #fff;
}

@media (max-width: 1100px) {
  .kn-directions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 761px) {
  .kn-location-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .kn-directions-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-location-feature-card,
  .kn-directions-card__links a,
  .kn-directions-card__links button {
    transition: none !important;
  }
}

/* =========================================================
   V19 — CONTACT PAGE
   Photo hero reuses .kn-subpage-hero as-is; the stat row reuses
   .kn-stat-row/.kn-stat-card verbatim as a phone/email/WhatsApp/
   response-time summary, same "repurpose the stats" pattern Location
   used for its address summary. Originally had a full name/email/
   message enquiry form (.kn-contact-field/.kn-contact-card) backed by
   a WordPress AJAX handler + SMTP relay - replaced 2026-07-23 with a
   WhatsApp-first design (no form, no backend) after the SMTP setup
   turned into disproportionate effort for a single low-volume
   property site (Gmail App Passwords unavailable on a fresh account,
   then Brevo's sender-reputation/DKIM warnings on a freemail "from"
   address). See CLAUDE.md's Known Issues for the full story - the
   backend code was removed rather than left dead; `git log` has the
   working implementation if a real form is wanted again later.
   The "get in touch" split now reuses .kn-split/.kn-section-title/
   .kn-pill-row/.kn-pill beside .kn-booking-card holding a simple
   WhatsApp CTA button (no new classes needed - .kn-glass-button
   already exists). The secondary "call or email instead" row reuses
   .kn-directions-grid/.kn-explore-card verbatim (identical to
   Location's "Arrive with ease" row), just as a 2-up row instead of
   3 via .kn-directions-grid--pair below. The closing CTA reuses
   .kn-split/.kn-booking-card verbatim, same as every other page.
   ========================================================= */

.kn-directions-grid--pair {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 640px) {
  .kn-directions-grid--pair {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V20 — LEGAL PAGES (PRIVACY POLICY / BOOKING TERMS)
   Header reuses .kn-page-header/.kn-page-title-wrap/.kn-page-title/
   .kn-page-subtitle verbatim - the flat nav-without-photo banner
   built for Gallery back in V15, unused since Gallery moved to a
   photo hero, but still fully styled and already wired into
   above-beyond-global-motion.js's reveal list from that same
   Gallery-era code. A legal page has no photo worth showing, so
   this is a better fit than forcing .kn-subpage-hero to take one.
   .kn-legal-content is the only genuinely new class: a centered,
   narrower (760px) column for long-form body copy, since the
   site's normal .kn-section-text is tuned for short marketing
   copy, not multi-paragraph legal text.
   ========================================================= */

.kn-legal-content {
  width: var(--kn-rail);
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 96px);
}

.kn-legal-content h2 {
  font-family: var(--kn-serif);
  font-weight: 300;
  color: var(--kn-text);
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 2.2em 0 0.7em;
}

.kn-legal-content h2:first-child {
  margin-top: 0;
}

.kn-legal-content p,
.kn-legal-content li {
  color: var(--kn-muted);
  font-size: 16px;
  line-height: 1.75;
}

.kn-legal-content p {
  margin-bottom: 1.1em;
}

.kn-legal-content ul {
  margin: 0 0 1.1em 1.25em;
  padding: 0;
}

.kn-legal-content li {
  margin-bottom: 0.5em;
}

.kn-legal-content a {
  color: var(--kn-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kn-footer-legal {
  grid-column: 1 / -1;
  justify-self: center !important;
  width: 100%;
  max-width: 400px;
  margin-top: 6px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  text-align: center;
}

.kn-footer-legal p {
  margin: 0 !important;
}

.kn-footer-legal a {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin: 0 10px;
}

.kn-footer-legal a:hover {
  color: var(--kn-gold);
}

@media (max-width: 1100px) {
  .kn-footer-legal {
    max-width: none;
  }
}