:root {
      /* Brand colours sampled from the supplied Tekoma Resort logo */
      --tk-plum-950: #2E0B31;
      --tk-plum-900: #3A0D3D;
      --tk-plum-800: #531053;
      --tk-plum-700: #651A63;
      --tk-lotus-600: #9D4D93;
      --tk-lotus-500: #C867A8;
      --tk-lotus-300: #E2A5D5;
      --tk-blush-100: #FCE8F0;

      /* Warm supporting tones — intentionally no green / teal UI palette */
      --tk-wine-700: #71395C;
      --tk-mauve-500: #9A7088;
      --tk-dusty-rose-400: #B98D9F;
      --tk-taupe-400: #B59A95;
      --tk-sand-300: #D9C6BD;

      /* Neutrals */
      --tk-ivory-100: #F7F2ED;
      --tk-mist-100: #F1EFEC;
      --tk-mist-50: #FBF9F7;
      --tk-charcoal-900: #29252A;
      --tk-charcoal-700: #625B62;
      --tk-white: #FFFFFF;
      --tk-border: rgba(83, 15, 83, .14);
      --tk-shadow-soft: 0 18px 50px rgba(60, 17, 61, .10);
      --tk-space-1: 4px;
      --tk-space-2: 8px;
      --tk-space-3: 12px;
      --tk-space-4: 16px;
      --tk-space-5: 24px;
      --tk-space-6: 32px;
      --tk-space-7: 48px;
      --tk-space-8: 64px;
      --tk-space-9: 96px;
      --tk-space-10: 128px;
      --tk-radius-sm: 8px;
      --tk-radius-md: 12px;
      --tk-radius-lg: 16px;
      --tk-container: 1280px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Manrope", Arial, sans-serif;
      color: var(--tk-charcoal-900);
      background: var(--tk-mist-50);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    body.nav-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input {
      font: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .tk-container {
      width: min(calc(100% - 48px), var(--tk-container));
      margin-inline: auto;
    }

    .tk-section {
      padding: 104px 0;
    }

    .tk-section--compact {
      padding: 72px 0;
    }

    .tk-section--brand {
      background: var(--tk-plum-900);
      color: var(--tk-white);
      position: relative;
      overflow: clip;
    }

    .tk-section--mist {
      background: var(--tk-mist-100);
    }

    .tk-section--sand {
      background: linear-gradient(135deg, var(--tk-ivory-100), var(--tk-blush-100));
    }

    .tk-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--tk-lotus-600);
    }

    .tk-eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
    }

    .tk-section--brand .tk-eyebrow {
      color: var(--tk-lotus-300);
    }

    .tk-display {
      font-family: "Newsreader", Georgia, serif;
      font-size: clamp(3.5rem, 7.4vw, 7.2rem);
      line-height: .92;
      letter-spacing: -.045em;
      font-weight: 500;
      margin: 0;
    }

    .tk-h2 {
      font-family: "Newsreader", Georgia, serif;
      /* Refined for a calmer editorial rhythm: section titles should resolve in 1–3 lines. */
      font-size: clamp(2.55rem, 3.65vw, 4.05rem);
      line-height: .98;
      letter-spacing: -.03em;
      font-weight: 500;
      margin: 0;
      max-width: 17ch;
      text-wrap: balance;
      overflow-wrap: normal;
      word-break: normal;
    }

    .tk-h3 {
      font-family: "Newsreader", Georgia, serif;
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.03;
      letter-spacing: -.025em;
      font-weight: 500;
      margin: 0;
    }

    .tk-body-lg {
      max-width: 670px;
      font-size: clamp(1.04rem, 1.4vw, 1.2rem);
      color: var(--tk-charcoal-700);
    }

    .tk-section--brand .tk-body-lg {
      color: rgba(255, 255, 255, .76);
    }

    .tk-btn {
      min-height: 50px;
      padding: 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: 8px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

    .tk-btn svg {
      width: 17px;
      height: 17px;
      transition: transform .25s ease;
    }

    .tk-btn:hover svg {
      transform: translateX(4px);
    }

    .tk-btn:focus-visible {
      outline: 3px solid rgba(226, 165, 213, .95);
      outline-offset: 3px;
    }

    .tk-btn--primary {
      background: var(--tk-plum-800);
      color: #fff;
    }

    .tk-btn--primary:hover {
      background: var(--tk-plum-950);
      transform: translateY(-1px);
    }

    .tk-btn--light {
      background: #fff;
      color: var(--tk-plum-800);
    }

    .tk-btn--light:hover {
      background: var(--tk-mist-100);
    }

    .tk-btn--ghost {
      border-color: rgba(255, 255, 255, .55);
      color: #fff;
      background: rgba(255, 255, 255, .04);
    }

    .tk-btn--ghost:hover {
      background: rgba(255, 255, 255, .12);
      border-color: #fff;
    }

    .tk-text-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid rgba(83, 15, 83, .30);
      padding-bottom: 4px;
    }

    .tk-text-link svg {
      width: 16px;
      transition: transform .25s ease;
    }

    .tk-text-link:hover svg {
      transform: translateX(4px);
    }

    /* Header */
    .tk-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
      transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .tk-header.is-scrolled {
      background: rgba(251, 249, 247, .95);
      color: var(--tk-charcoal-900);
      border-color: var(--tk-border);
      box-shadow: 0 8px 28px rgba(83, 15, 83, .08);
      backdrop-filter: blur(12px);
    }

    .tk-header__inner {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .tk-logo {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .tk-logo__image {
      width: 58px;
      height: 58px;
      object-fit: cover;
      display: block;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
    }

    .tk-header.is-scrolled .tk-logo__image {
      box-shadow: 0 0 0 1px rgba(83, 15, 83, .12);
    }

    .tk-nav {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: auto;
    }

    .tk-nav a {
      font-size: 13px;
      font-weight: 600;
    }

    .tk-nav a:hover {
      opacity: .68;
    }

    .tk-header .tk-btn--header {
      min-height: 46px;
      padding-inline: 19px;
      background: #fff;
      color: var(--tk-plum-800);
    }

    .tk-header.is-scrolled .tk-btn--header {
      background: var(--tk-plum-800);
      color: #fff;
    }

    .tk-menu-btn {
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, .4);
      color: inherit;
      background: transparent;
      border-radius: 8px;
      display: none;
      place-items: center;
      cursor: pointer;
    }

    .tk-header.is-scrolled .tk-menu-btn {
      border-color: var(--tk-border);
    }

    /* Mobile nav */
    .tk-mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 45;
      background: var(--tk-plum-900);
      color: #fff;
      display: none;
      padding: 116px 24px 100px;
      overflow-y: auto;
    }

    .tk-mobile-nav.is-open {
      display: block;
    }

    .tk-mobile-nav a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 60px;
      border-bottom: 1px solid rgba(255, 255, 255, .16);
      font-family: "Newsreader", Georgia, serif;
      font-size: 30px;
    }

    .tk-mobile-nav__sub {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 28px 0 34px;
    }

    .tk-mobile-nav__sub a {
      min-height: 120px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 10px;
      align-items: flex-end;
      font-size: 20px;
      background: rgba(255, 255, 255, .04);
    }

    /* Hero — manual two-scene destination switcher, not an auto-rotating carousel */
    .tk-hero {
      position: relative;
      min-height: 92svh;
      color: #fff;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      background: #2E0B31;
      isolation: isolate;
    }

    .tk-hero__media {
      position: absolute;
      inset: 0;
      z-index: -3;
      overflow: hidden;
      background: #2E0B31;
    }

    .tk-hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.015);
      transition:
        opacity .72s cubic-bezier(.22, .7, .25, 1),
        transform 1.2s cubic-bezier(.22, .7, .25, 1),
        visibility 0s linear .72s;
      will-change: opacity, transform;
    }

    .tk-hero-slide.is-active {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition-delay: 0s;
      z-index: 1;
    }

    .tk-hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tk-hero__veil {
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(34, 8, 35, .08) 0%, rgba(34, 8, 35, .16) 34%, rgba(26, 7, 28, .82) 100%),
        linear-gradient(90deg, rgba(30, 7, 31, .32) 0%, rgba(30, 7, 31, .08) 52%, rgba(30, 7, 31, .18) 100%);
    }

    .tk-hero__content {
      position: relative;
      z-index: 2;
      width: 100%;
      /* Bottom padding clears the absolute .tk-hero__footer bar (switcher +
         caption stack) below, regardless of how many lines the copy wraps to. */
      padding: 164px 0 140px;
    }

    .tk-hero__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .55fr);
      gap: 70px;
      align-items: end;
    }

    .tk-hero .tk-eyebrow {
      color: rgba(255, 255, 255, .76);
    }

    .tk-hero__copy {
      max-width: 500px;
      margin: 0 0 6px auto;
      color: rgba(255, 255, 255, .86);
      font-size: 17px;
    }

    .tk-hero__copy-inner {
      min-height: 108px;
      transition: opacity .28s ease, transform .28s ease;
    }

    .tk-hero.is-switching .tk-hero__copy-inner {
      opacity: 0;
      transform: translateY(6px);
    }

    .tk-hero__actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 26px;
    }

    /* Hero footer bar — scroll cue (left) and scene switcher + caption
       (right, stacked) share one baseline, pinned to the hero bottom edge
       independently of the copy column. .tk-hero__content's bottom padding
       reserves the clearance this bar needs, so a longer copy/actions block
       can never grow into it. */
    /* .tk-container handles the horizontal centering/edge alignment (same
       gutters as every other section); this just pins the bar to the
       hero's bottom edge and lays out its two ends. */
    .tk-hero__footer {
      position: absolute;
      inset: auto 0 31px 0;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
    }

    .tk-hero__footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
    }

    .tk-hero__switcher {
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      background: rgba(36, 8, 38, .24);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .tk-hero__switcher button {
      appearance: none;
      border: 0;
      min-height: 38px;
      padding: 0 15px;
      border-radius: 999px;
      background: transparent;
      color: rgba(255, 255, 255, .67);
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      transition:
        background-color .28s ease,
        color .28s ease,
        transform .28s ease,
        box-shadow .28s ease;
    }

    .tk-hero__switcher button[aria-selected="true"] {
      color: var(--tk-plum-900);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 6px 18px rgba(20, 5, 22, .18);
    }

    .tk-hero__switcher button:focus-visible {
      outline: 2px solid var(--tk-lotus-300);
      outline-offset: 3px;
    }

    .tk-hero__scene-caption {
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .68);
    }

    .tk-hero__scene-caption::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--tk-lotus-300);
    }

    .tk-scroll-cue {
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .68;
    }

    @media (hover:hover) and (pointer:fine) {
      .tk-hero__switcher button:hover {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        transform: translateY(-1px);
      }

      .tk-hero__switcher button[aria-selected="true"]:hover {
        color: var(--tk-plum-900);
        background: #fff;
      }
    }

    /* Destination selector */
    .tk-destination-selector {
      position: relative;
      z-index: 5;
      margin-top: -1px;
      background: #fff;
      border-bottom: 1px solid var(--tk-border);
    }

    .tk-destination-selector__inner {
      display: grid;
      grid-template-columns: 220px 1fr 1fr;
      min-height: 116px;
      align-items: stretch;
    }

    .tk-destination-selector__prompt {
      padding: 24px 34px 24px 0;
      display: flex;
      align-items: center;
      border-right: 1px solid var(--tk-border);
      font-family: "Newsreader", Georgia, serif;
      font-size: 20px;
      line-height: 1.12;
    }

    .tk-destination-choice {
      padding: 22px 34px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 20px;
      border-right: 1px solid var(--tk-border);
      transition: background .25s ease;
    }

    .tk-destination-choice:last-child {
      border-right: 0;
    }

    .tk-destination-choice:hover {
      background: var(--tk-mist-100);
    }

    .tk-destination-choice small {
      display: block;
      margin-bottom: 4px;
      color: var(--tk-lotus-600);
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: 11px;
      font-weight: 700;
    }

    .tk-destination-choice strong {
      font-family: "Newsreader", Georgia, serif;
      font-size: 25px;
      font-weight: 500;
    }

    .tk-round-arrow {
      width: 44px;
      height: 44px;
      border: 1px solid var(--tk-border);
      border-radius: 50%;
      display: grid;
      place-items: center;
    }

    /* Intro */
    .tk-intro-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 100px;
      align-items: start;
    }

    .tk-intro-statements {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--tk-border);
      border: 1px solid var(--tk-border);
      margin-top: 58px;
    }

    .tk-intro-statement {
      background: var(--tk-mist-50);
      padding: 25px;
      min-height: 132px;
    }

    .tk-intro-statement span {
      display: block;
      color: var(--tk-lotus-600);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .tk-intro-statement strong {
      font-size: 16px;
      font-weight: 600;
    }

    /* Destination cards */
    .tk-section-intro-row {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 32px;
      margin-bottom: 48px;
    }

    .tk-section-intro-row .tk-body-lg {
      margin: 14px 0 0;
    }

    .tk-destination-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .tk-destination-card {
      position: relative;
      min-height: 660px;
      overflow: hidden;
      border-radius: var(--tk-radius-md);
      color: #fff;
      background: var(--tk-plum-900);
      isolation: isolate;
    }

    .tk-destination-card::before {
      content: "";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 30px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-align: center;
      color: rgba(255, 255, 255, .28);
      background:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .16), transparent 25%),
        linear-gradient(145deg, var(--card-a), var(--card-b));
      transition: transform .7s cubic-bezier(.2, .6, .2, 1);
      z-index: -2;
    }

    /* Once a real photo is supplied, .tk-destination-card--has-image
       drops the gradient/text placeholder — the <img> takes over the
       same layer and inherits the same hover zoom. */
    .tk-destination-card--has-image::before { content: none; }
    .tk-destination-card__image {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s cubic-bezier(.2, .6, .2, 1);
    }
    .tk-destination-card:hover .tk-destination-card__image {
      transform: scale(1.035);
    }

    /* Same has-image pattern applied across every other placeholder
       component now that real photography is available (except room
       cards and the two-scene hero, which stay pending). Each container
       is already position:relative with the text placeholder living in
       a ::before/::after; the modifier just suppresses that generated
       content once a real <img> is added as the first child. Any kept
       ::after gradient overlay (for text legibility) still paints above
       the image because it comes later in paint order — no z-index
       needed. (.tk-booking-choice deliberately stays gradient + text,
       no photo — see the Reservation section comment.) */
    .tk-experience-feature--has-image::before,
    .tk-experience-card__image--has-image::after,
    .tk-gallery-item--has-image::before,
    .tk-journal-image--has-image::after,
    .tk-final-cta--has-image::before {
      content: none;
    }
    .tk-photo-fill {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .tk-destination-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 32%, rgba(42, 12, 35, .78) 100%);
      z-index: -1;
    }

    .tk-destination-card:hover::before {
      transform: scale(1.035);
    }

    .tk-destination-card__content {
      position: absolute;
      inset: auto 0 0;
      padding: 44px;
    }

    .tk-destination-card__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, .72);
    }

    .tk-destination-card h3 {
      font-family: "Newsreader", Georgia, serif;
      font-size: clamp(2.8rem, 4vw, 4.2rem);
      font-weight: 500;
      line-height: .95;
      margin: 0 0 18px;
    }

    .tk-destination-card p {
      margin: 0 0 24px;
      max-width: 440px;
      color: rgba(255, 255, 255, .8);
    }

    .tk-destination-card .tk-text-link {
      color: #fff;
      border-color: rgba(255, 255, 255, .45);
    }

    /* Stays */
    .tk-stays-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 30px;
      align-items: end;
      margin-bottom: 38px;
    }

    .tk-tabs {
      display: inline-flex;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--tk-border);
      border-radius: 999px;
      background: #fff;
    }

    .tk-tab {
      min-height: 42px;
      border: 0;
      background: transparent;
      color: var(--tk-charcoal-700);
      border-radius: 999px;
      padding: 0 18px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
    }

    .tk-tab[aria-selected="true"] {
      background: var(--tk-plum-800);
      color: #fff;
    }

    .tk-stay-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .tk-stay-card {
      min-width: 0;
    }

    .tk-stay-card__image {
      aspect-ratio: 4/3;
      border-radius: var(--tk-radius-sm);
      overflow: hidden;
      background: linear-gradient(145deg, #D8C4CB, #9A748B);
      position: relative;
      margin-bottom: 18px;
    }

    .tk-stay-card__image::after {
      content: none;
    }

    .tk-stay-card__index {
      font-size: 11px;
      color: var(--tk-lotus-600);
      font-weight: 700;
      letter-spacing: .12em;
    }

    .tk-stay-card h3 {
      font-size: 18px;
      margin: 6px 0 7px;
      line-height: 1.3;
    }

    .tk-stay-card p {
      margin: 0 0 10px;
      font-size: 13px;
      color: var(--tk-charcoal-700);
    }

    .tk-stay-card a {
      font-size: 13px;
      font-weight: 700;
    }

    /* Accommodation tab panel transition */
    .tk-panel {
      position: relative;
    }

    .tk-panel[hidden] {
      display: none;
    }

    .tk-panel.is-entering {
      animation: tk-panel-fade-in .42s cubic-bezier(.22, .7, .25, 1) both;
    }

    .tk-panel.is-entering .tk-stay-card {
      animation: tk-card-fade-in .46s cubic-bezier(.22, .7, .25, 1) both;
    }

    .tk-panel.is-entering .tk-stay-card:nth-child(1) {
      animation-delay: .02s;
    }

    .tk-panel.is-entering .tk-stay-card:nth-child(2) {
      animation-delay: .06s;
    }

    .tk-panel.is-entering .tk-stay-card:nth-child(3) {
      animation-delay: .10s;
    }

    .tk-panel.is-entering .tk-stay-card:nth-child(4) {
      animation-delay: .14s;
    }

    @keyframes tk-panel-fade-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes tk-card-fade-in {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Conditional editorial sticky columns
       Applied only when JS detects that the left copy is meaningfully shorter
       than the right-hand content. This keeps long two-column sections balanced
       without making short sections feel artificially fixed. */
    :root {
      --tk-sticky-offset: 112px;
    }

    .tk-sticky-column {
      align-self: start;
      min-width: 0;
    }

    @media (min-width: 901px) {
      .tk-sticky-column.is-sticky {
        position: sticky;
        top: var(--tk-sticky-offset);
      }
    }

    /* Services */
    .tk-services-grid {
      display: grid;
      /* Give the editorial title enough measure to avoid a 4-line stack. */
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 64px;
      align-items: start;
    }

    .tk-services-grid .tk-h2 {
      max-width: 14.5ch;
    }

    .tk-service-list {
      border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .tk-service-item {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 34px;
      gap: 18px;
      align-items: center;
      min-height: 74px;
      border-bottom: 1px solid rgba(255, 255, 255, .2);
    }

    .tk-service-item__num {
      color: rgba(255, 255, 255, .45);
      font-size: 11px;
      letter-spacing: .12em;
    }

    .tk-service-item strong {
      font-size: 18px;
      font-weight: 500;
    }

    /* Purely editorial marker: intentionally does not look clickable. */
    .tk-service-item__mark {
      width: 30px;
      height: 14px;
      justify-self: end;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      opacity: .64;
      pointer-events: none;
    }

    .tk-service-item__mark::before {
      content: "";
      width: 17px;
      height: 1px;
      background: rgba(255, 255, 255, .42);
    }

    .tk-service-item__mark::after {
      content: "";
      width: 5px;
      height: 5px;
      border: 1px solid rgba(242, 182, 218, .88);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(242, 182, 218, .07);
    }

    /* Experiences */
    .tk-experience-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 30px;
      align-items: stretch;
    }

    .tk-experience-feature {
      min-height: 650px;
      border-radius: var(--tk-radius-md);
      position: relative;
      overflow: hidden;
      color: #fff;
      background: linear-gradient(145deg, #70485E, #A06E87);
    }

    .tk-experience-feature::before {
      content: none;
    }

    .tk-experience-feature::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 38%, rgba(42, 12, 35, .82));
    }

    .tk-experience-feature__content {
      position: absolute;
      z-index: 2;
      inset: auto 0 0;
      padding: 38px;
    }

    .tk-experience-feature h3 {
      font-family: "Newsreader", Georgia, serif;
      font-size: 48px;
      line-height: .98;
      margin: 0 0 12px;
      font-weight: 500;
    }

    .tk-experience-feature p {
      max-width: 420px;
      color: rgba(255, 255, 255, .8);
    }

    .tk-experience-stack {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .tk-experience-card {
      border-top: 1px solid var(--tk-border);
      padding-top: 16px;
    }

    .tk-experience-card__image {
      aspect-ratio: 4/3;
      border-radius: 10px;
      background: linear-gradient(145deg, #E6D3D7, #A7788F);
      position: relative;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .tk-experience-card__image::after {
      content: none;
    }

    .tk-experience-card small {
      color: var(--tk-lotus-600);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .tk-experience-card h4 {
      margin: 6px 0 10px;
      font-size: 18px;
    }

    /* Booking split */
    .tk-booking-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: var(--tk-radius-md);
      overflow: hidden;
      border: 1px solid var(--tk-border);
      background: #fff;
    }

    .tk-booking-split__intro {
      padding: 58px;
    }

    .tk-booking-split__choices {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .tk-booking-choice {
      min-height: 300px;
      padding: 30px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #7A4B63, #3A0D3D);
    }

    .tk-booking-choice+.tk-booking-choice {
      background: linear-gradient(145deg, #B28EA3, #6B455D);
    }

    .tk-booking-choice::before {
      content: none;
    }

    .tk-booking-choice::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, rgba(42, 12, 35, .72));
    }

    .tk-booking-choice>* {
      position: relative;
      z-index: 2;
    }

    .tk-booking-choice small {
      opacity: .72;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .tk-booking-choice strong {
      font-family: "Newsreader", Georgia, serif;
      font-size: 30px;
      font-weight: 500;
      margin: 5px 0 16px;
    }

    /* 3rd-Party Booking Widget — RESERVED SPACE ONLY, no live embed yet.
       Client shared a reference screenshot (2026-09-14) of the actual
       external booking engine: one wide panel with a Hotel dropdown,
       Check-in / Check-out date fields, a Guests field, a promo-code
       row and a "Find Room" button — in the vendor's own pink/magenta
       branding, not ours. Sitemap §11 explicitly excludes building a
       custom booking engine, so this slot stays a plain <iframe> or
       vendor <script> embed target.
       Do NOT try to restyle the widget's internals with our CSS — once
       it's a real iframe (or a script-injected shadow DOM), our
       stylesheet cannot reach inside it, so the vendor's own colours
       will show no matter what. Contain it in a neutral bordered panel
       instead, so the clash reads as "an external tool," not a broken
       part of our design system — the same contain-don't-fight approach
       already used for the HRD Corp credential badge on About Us.
       Heights below are minimums, not fixed sizes: the real widget
       reflows its own fields (4-across on desktop, stacking to 1–2 per
       row on mobile) and may render taller once live. */
    .tk-booking-widget-slot {
      margin-top: 32px;
      min-height: 220px;
      border: 1px dashed var(--tk-border);
      border-radius: var(--tk-radius-md);
      background: #fff;
      display: grid;
      place-items: center;
      padding: 32px;
      text-align: center;
    }
    .tk-booking-widget-slot__label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--tk-lotus-600);
      margin-bottom: 8px;
    }
    .tk-booking-widget-slot p {
      margin: 0;
      font-size: 13px;
      color: var(--tk-charcoal-700);
    }
    @media (max-width: 767px) {
      .tk-booking-widget-slot { min-height: 360px; }
    }

    /* Gallery */
    .tk-gallery-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr .9fr;
      grid-template-rows: 250px 250px;
      gap: 14px;
    }

    .tk-gallery-item {
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #C8ABB7, #8B6277);
    }

    .tk-gallery-item::before {
      content: attr(data-label);
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .58);
      text-align: center;
    }

    .tk-gallery-item:nth-child(1) {
      grid-row: 1 / span 2;
    }

    .tk-gallery-item:nth-child(2) {
      background: linear-gradient(145deg, #E0CED3, #A37D91);
    }

    .tk-gallery-item:nth-child(3) {
      background: linear-gradient(145deg, #B987A2, #62364F);
    }

    .tk-gallery-item:nth-child(4) {
      grid-column: 2 / span 2;
      background: linear-gradient(145deg, #E7CDD9, #9F7288);
    }

    .tk-gallery-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      gap: 20px;
    }

    .tk-gallery-footer p {
      margin: 0;
      color: var(--tk-charcoal-700);
      max-width: 650px;
    }

    /* Journal */
    .tk-journal-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr .85fr;
      gap: 22px;
    }

    .tk-journal-card {
      border-top: 1px solid var(--tk-border);
      padding-top: 16px;
    }

    .tk-journal-card:first-child .tk-journal-image {
      aspect-ratio: 3/2;
    }

    .tk-journal-image {
      aspect-ratio: 4/3;
      border-radius: 10px;
      background: linear-gradient(145deg, #D7C0C9, #8E667A);
      position: relative;
      margin-bottom: 18px;
      overflow: hidden;
    }

    .tk-journal-image::after {
      content: none;
    }

    .tk-journal-card small {
      color: var(--tk-lotus-600);
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: 10px;
      font-weight: 700;
    }

    .tk-journal-card h3 {
      font-family: "Newsreader", Georgia, serif;
      font-size: 25px;
      line-height: 1.08;
      margin: 8px 0 11px;
      font-weight: 500;
    }

    .tk-journal-card:first-child h3 {
      font-size: 34px;
    }

    .tk-journal-card p {
      color: var(--tk-charcoal-700);
      font-size: 14px;
    }

    /* Testimonials */
    .tk-testimonial-grid {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 72px;
      align-items: start;
    }

    .tk-quote {
      font-family: "Newsreader", Georgia, serif;
      font-size: clamp(2.05rem, 3.6vw, 3.8rem);
      line-height: 1.05;
      letter-spacing: -.025em;
      margin: 0 0 34px;
      color: #fff;
    }

    .tk-review-meta {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .tk-review-meta strong {
      display: block;
      font-size: 13px;
      letter-spacing: .08em;
    }

    .tk-stars {
      letter-spacing: .18em;
      color: var(--tk-lotus-300);
    }

    .tk-review-dots {
      display: flex;
      gap: 7px;
    }

    .tk-review-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .3);
    }

    .tk-review-dot.is-active {
      background: #fff;
    }

    /* Final CTA */
    .tk-final-cta {
      position: relative;
      min-height: 520px;
      display: grid;
      place-items: center;
      text-align: center;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(145deg, #A67C90, #3F2142 64%, #2E0B31);
    }

    .tk-final-cta::before {
      content: none;
    }

    .tk-final-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(35, 17, 30, .42), rgba(83, 15, 83, .60));
    }

    .tk-final-cta__content {
      position: relative;
      z-index: 2;
      max-width: 820px;
      padding: 70px 24px;
    }

    .tk-final-cta .tk-h2 {
      font-size: clamp(2.9rem, 4.8vw, 5rem);
      max-width: 15ch;
      margin-inline: auto;
    }

    .tk-final-cta p {
      max-width: 590px;
      margin: 22px auto 28px;
      color: rgba(255, 255, 255, .82);
    }

    /* Footer */
    .tk-footer {
      background: var(--tk-plum-950);
      color: #fff;
      padding: 74px 0 34px;
    }

    .tk-footer__top {
      display: grid;
      grid-template-columns: 1.1fr .85fr .85fr .6fr;
      gap: 48px;
    }

    .tk-footer__brand p {
      color: rgba(255, 255, 255, .62);
      max-width: 340px;
      font-size: 14px;
      margin-top: 20px;
    }

    .tk-footer h4 {
      margin: 0 0 18px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, .6);
    }

    .tk-footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tk-footer li {
      margin: 9px 0;
      font-size: 13px;
      color: rgba(255, 255, 255, .82);
    }

    .tk-footer__bottom {
      margin-top: 60px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .15);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: rgba(255, 255, 255, .5);
      font-size: 11px;
    }


    /* Lotus-inspired brand motif: abstracted, intentionally subtle */
    .tk-brand-motif {
      position: absolute;
      right: clamp(18px, 5vw, 80px);
      top: 50%;
      width: 180px;
      height: 150px;
      transform: translateY(-50%);
      opacity: .09;
      pointer-events: none;
    }

    .tk-brand-motif span {
      position: absolute;
      left: 50%;
      bottom: 18px;
      width: 54px;
      height: 102px;
      border: 1px solid var(--tk-lotus-300);
      border-radius: 52% 52% 58% 58% / 72% 72% 35% 35%;
      transform-origin: 50% 100%;
    }

    .tk-brand-motif span:nth-child(1) {
      transform: translateX(-50%) rotate(-42deg);
    }

    .tk-brand-motif span:nth-child(2) {
      transform: translateX(-50%) rotate(-21deg);
    }

    .tk-brand-motif span:nth-child(3) {
      transform: translateX(-50%);
    }

    .tk-brand-motif span:nth-child(4) {
      transform: translateX(-50%) rotate(21deg);
    }

    .tk-brand-motif span:nth-child(5) {
      transform: translateX(-50%) rotate(42deg);
    }

    .tk-brand-rule {
      width: 42px;
      height: 2px;
      background: linear-gradient(90deg, var(--tk-lotus-500), var(--tk-lotus-300));
      margin: 22px 0;
    }



    /* ---------------------------------------------------------
       v6 Interaction System — buttons, navigation and text links
       Calm editorial motion: short lift, underline reveal and
       controlled plum/ivory state changes. Hover is limited to
       fine pointers so touch devices do not get sticky states.
       --------------------------------------------------------- */
    a,
    button {
      -webkit-tap-highlight-color: transparent;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid rgba(226, 165, 213, .95);
      outline-offset: 4px;
    }

    .tk-logo,
    .tk-logo__image,
    .tk-nav a,
    .tk-mobile-nav a,
    .tk-menu-btn,
    .tk-destination-choice,
    .tk-destination-choice>div,
    .tk-round-arrow,
    .tk-tab,
    .tk-stay-card a,
    .tk-booking-choice,
    .tk-booking-choice strong,
    .tk-booking-choice span,
    .tk-footer a {
      transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        opacity .28s ease,
        transform .28s cubic-bezier(.2, .65, .3, 1),
        box-shadow .28s ease;
    }

    /* Buttons */
    .tk-btn {
      position: relative;
      isolation: isolate;
      box-shadow: 0 0 0 rgba(46, 11, 49, 0);
      transition:
        transform .28s cubic-bezier(.2, .65, .3, 1),
        background-color .28s ease,
        color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
    }

    .tk-btn svg {
      transition: transform .28s cubic-bezier(.2, .65, .3, 1);
    }

    /* Text / arrow links — short underline at rest, full underline on hover */
    .tk-text-link {
      position: relative;
      border-bottom: 0;
      padding-bottom: 6px;
      transition: color .28s ease, gap .28s ease, transform .28s ease;
    }

    .tk-text-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: .42;
      transform: scaleX(.38);
      transform-origin: left center;
      transition: transform .34s cubic-bezier(.2, .65, .3, 1), opacity .28s ease;
    }

    .tk-destination-card .tk-text-link::after {
      opacity: .55;
    }

    /* Header navigation underline */
    .tk-nav a {
      position: relative;
      padding: 12px 0;
      opacity: 1;
    }

    .tk-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 6px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .28s ease;
    }

    /* Destination selector */
    .tk-destination-choice>div {
      transform: translateX(0);
    }

    .tk-round-arrow {
      background: transparent;
      color: var(--tk-plum-800);
    }

    /* Tabs */
    .tk-tab {
      transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }

    .tk-tab[aria-selected="true"] {
      box-shadow: 0 6px 16px rgba(83, 15, 83, .16);
      transform: translateY(-1px);
    }

    /* Room links */
    .tk-stay-card a {
      display: inline-block;
      position: relative;
      color: var(--tk-plum-800);
      padding-bottom: 3px;
    }

    .tk-stay-card a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: .38;
      transform: scaleX(.38);
      transform-origin: left;
      transition: transform .3s ease, opacity .3s ease;
    }

    /* Booking destination links */
    .tk-booking-choice::after {
      transition: background .35s ease, opacity .35s ease;
    }

    .tk-booking-choice span {
      display: inline-block;
      width: fit-content;
      font-size: 13px;
      font-weight: 700;
      border-bottom: 1px solid rgba(255, 255, 255, .45);
      padding-bottom: 4px;
    }

    /* Footer links */
    .tk-footer a:not(.tk-logo) {
      display: inline-block;
      color: rgba(255, 255, 255, .82);
      position: relative;
    }

    .tk-footer a:not(.tk-logo)::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: var(--tk-lotus-300);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s ease;
    }

    @media (hover: hover) and (pointer: fine) {

      /* Logo */
      .tk-logo:hover .tk-logo__image {
        transform: translateY(-2px) scale(1.035);
        box-shadow: 0 8px 24px rgba(46, 11, 49, .18);
      }

      /* Main nav */
      .tk-nav a:hover {
        opacity: 1;
        color: var(--tk-lotus-300);
      }

      .tk-header.is-scrolled .tk-nav a:hover {
        color: var(--tk-plum-800);
      }

      .tk-nav a:hover::after {
        transform: scaleX(1);
      }

      /* Button family */
      .tk-btn:hover {
        transform: translateY(-2px);
      }

      .tk-btn:hover svg {
        transform: translateX(5px);
      }

      .tk-btn--primary:hover {
        background: var(--tk-plum-950);
        box-shadow: 0 12px 28px rgba(46, 11, 49, .22);
      }

      .tk-btn--light:hover {
        background: var(--tk-blush-100);
        color: var(--tk-plum-950);
        box-shadow: 0 12px 28px rgba(46, 11, 49, .14);
      }

      .tk-btn--ghost:hover {
        background: #fff;
        border-color: #fff;
        color: var(--tk-plum-900);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
      }

      .tk-header .tk-btn--header:hover {
        background: var(--tk-blush-100);
        color: var(--tk-plum-950);
        box-shadow: 0 10px 24px rgba(46, 11, 49, .14);
      }

      .tk-header.is-scrolled .tk-btn--header:hover {
        background: var(--tk-plum-950);
        color: #fff;
      }

      /* Text links */
      .tk-text-link:hover {
        color: var(--tk-plum-800);
        transform: translateX(2px);
      }

      .tk-section--brand .tk-text-link:hover,
      .tk-destination-card .tk-text-link:hover,
      .tk-experience-feature .tk-text-link:hover {
        color: #fff;
      }

      .tk-text-link:hover::after {
        transform: scaleX(1);
        opacity: .9;
      }

      .tk-text-link:hover svg {
        transform: translateX(5px);
      }

      /* Menu button */
      .tk-menu-btn:hover {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .8);
        transform: translateY(-1px);
      }

      .tk-header.is-scrolled .tk-menu-btn:hover {
        background: var(--tk-blush-100);
        border-color: rgba(83, 15, 83, .25);
        color: var(--tk-plum-800);
      }

      /* Mobile/full-screen nav can still be tested with mouse on responsive preview */
      .tk-mobile-nav>a:hover {
        color: var(--tk-lotus-300);
        padding-left: 8px;
      }

      .tk-mobile-nav__sub a:hover {
        background: rgba(255, 255, 255, .11);
        border-color: rgba(255, 255, 255, .42);
        transform: translateY(-3px);
      }

      /* Destination selector links */
      .tk-destination-choice:hover {
        background: var(--tk-blush-100);
      }

      .tk-destination-choice:hover>div {
        transform: translateX(5px);
      }

      .tk-destination-choice:hover .tk-round-arrow {
        background: var(--tk-plum-800);
        border-color: var(--tk-plum-800);
        color: #fff;
        transform: translate(2px, -2px);
        box-shadow: 0 8px 18px rgba(83, 15, 83, .18);
      }

      /* Tabs */
      .tk-tab:not([aria-selected="true"]):hover {
        background: var(--tk-blush-100);
        color: var(--tk-plum-800);
      }

      .tk-tab[aria-selected="true"]:hover {
        background: var(--tk-plum-950);
        transform: translateY(-1px);
      }

      /* Room links */
      .tk-stay-card a:hover {
        color: var(--tk-plum-950);
        transform: translateX(3px);
      }

      .tk-stay-card a:hover::after {
        transform: scaleX(1);
        opacity: .8;
      }

      /* Booking choice links */
      .tk-booking-choice:hover {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
      }

      .tk-booking-choice:hover::after {
        background: linear-gradient(180deg, rgba(42, 12, 35, .08), rgba(42, 12, 35, .86));
      }

      .tk-booking-choice:hover strong {
        transform: translateY(-4px);
      }

      .tk-booking-choice:hover span {
        transform: translateX(5px);
        border-color: #fff;
      }

      /* Footer */
      .tk-footer a:not(.tk-logo):hover {
        color: #fff;
        transform: translateX(3px);
      }

      .tk-footer a:not(.tk-logo):hover::after {
        transform: scaleX(1);
      }
    }


    /* Mobile booking bar */
    .tk-booking-bar {
      display: none;
    }

    /* Reveal */
    [data-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1100px) {
      .tk-nav {
        gap: 18px;
      }

      .tk-nav a:nth-child(5) {
        display: none;
      }

      .tk-stay-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 34px;
      }

      .tk-services-grid,
      .tk-testimonial-grid {
        gap: 50px;
      }

      .tk-journal-grid {
        grid-template-columns: 1.1fr .9fr;
      }

      .tk-journal-card:last-child {
        grid-column: 2;
      }
    }

    @media (max-width: 900px) {
      .tk-section {
        padding: 78px 0;
      }

      .tk-h2 {
        font-size: clamp(2.65rem, 6.3vw, 3.75rem);
        max-width: 17ch;
      }

      .tk-header__inner {
        min-height: 70px;
      }

      .tk-nav,
      .tk-header .tk-btn--header {
        display: none;
      }

      .tk-menu-btn {
        display: grid;
      }

      .tk-hero {
        min-height: 86svh;
      }

      .tk-hero__grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .tk-hero__copy {
        margin-left: 0;
        max-width: 620px;
      }

      .tk-destination-selector__inner {
        grid-template-columns: 1fr 1fr;
      }

      .tk-destination-selector__prompt {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid var(--tk-border);
        padding: 18px 0;
      }

      .tk-intro-grid,
      .tk-services-grid,
      .tk-testimonial-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .tk-sticky-column,
      .tk-sticky-column.is-sticky {
        position: static;
        top: auto;
      }

      .tk-destination-card {
        min-height: 560px;
      }

      .tk-experience-layout {
        grid-template-columns: 1fr;
      }

      .tk-experience-feature {
        min-height: 540px;
      }

      .tk-booking-split {
        grid-template-columns: 1fr;
      }

      .tk-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 220px 220px;
      }

      .tk-gallery-item:nth-child(1) {
        grid-row: auto;
        grid-column: 1 / span 2;
      }

      .tk-gallery-item:nth-child(4) {
        grid-column: 1 / span 2;
      }

      .tk-journal-grid {
        grid-template-columns: 1fr 1fr;
      }

      .tk-journal-card:first-child {
        grid-column: 1 / -1;
      }

      .tk-journal-card:last-child {
        grid-column: auto;
      }

      .tk-footer__top {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 767px) {
      .tk-container {
        width: min(calc(100% - 32px), var(--tk-container));
      }

      .tk-h2 {
        font-size: clamp(2.35rem, 10.7vw, 3.2rem);
        line-height: 1;
        max-width: 15.5ch;
      }

      .tk-services-grid .tk-h2 {
        max-width: 14ch;
      }

      .tk-section {
        padding: 64px 0;
      }

      .tk-section--compact {
        padding: 48px 0;
      }

      .tk-header__inner {
        min-height: 64px;
      }

      .tk-logo__image {
        width: 50px;
        height: 50px;
      }

      .tk-menu-btn {
        width: 42px;
        height: 42px;
      }

      .tk-hero {
        min-height: 760px;
      }

      .tk-hero__content {
        padding: 130px 0 108px;
      }

      .tk-display {
        font-size: clamp(3.3rem, 16vw, 5.7rem);
      }

      .tk-hero__copy {
        font-size: 15px;
      }

      .tk-hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .tk-btn {
        width: 100%;
      }

      /* Only the switcher remains in the footer bar; with the scroll cue and
         caption hidden, justify-content: space-between naturally collapses
         it to the start (left) edge, matching the original mobile layout. */
      .tk-scroll-cue,
      .tk-hero__scene-caption {
        display: none;
      }

      .tk-hero__footer {
        bottom: 24px;
      }

      .tk-hero__switcher button {
        padding-inline: 13px;
        font-size: 10px;
      }

      .tk-destination-selector__inner {
        grid-template-columns: 1fr;
      }

      .tk-destination-selector__prompt {
        padding: 16px 0;
      }

      .tk-destination-choice {
        border-right: 0;
        border-bottom: 1px solid var(--tk-border);
        padding: 18px 0;
      }

      .tk-destination-choice:last-child {
        border-bottom: 0;
      }

      .tk-intro-statements {
        grid-template-columns: 1fr;
      }

      .tk-section-intro-row,
      .tk-stays-head {
        display: block;
      }

      .tk-section-intro-row .tk-text-link {
        margin-top: 24px;
      }

      .tk-destination-grid {
        grid-template-columns: 1fr;
      }

      .tk-destination-card {
        min-height: 560px;
      }

      .tk-destination-card__content {
        padding: 28px;
      }

      .tk-tabs {
        margin-top: 24px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .tk-tab {
        padding: 0 10px;
      }

      .tk-stay-grid {
        grid-template-columns: 1fr;
      }

      .tk-service-item {
        grid-template-columns: 36px 1fr auto;
      }

      .tk-experience-feature {
        min-height: 500px;
      }

      .tk-experience-feature__content {
        padding: 28px;
      }

      .tk-experience-feature h3 {
        font-size: 40px;
      }

      .tk-experience-stack {
        grid-template-columns: 1fr;
      }

      .tk-booking-split__intro {
        padding: 34px 24px;
      }

      .tk-booking-split__choices {
        grid-template-columns: 1fr;
      }

      .tk-booking-choice {
        min-height: 240px;
      }

      .tk-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 350px 220px 220px 260px;
      }

      .tk-gallery-item:nth-child(1),
      .tk-gallery-item:nth-child(4) {
        grid-column: auto;
      }

      .tk-gallery-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .tk-journal-grid {
        grid-template-columns: 1fr;
      }

      .tk-journal-card:first-child {
        grid-column: auto;
      }

      .tk-footer {
        padding-bottom: 104px;
      }

      .tk-footer__top {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .tk-footer__bottom {
        flex-direction: column;
        margin-top: 42px;
      }

      .tk-booking-bar {
        position: fixed;
        z-index: 60;
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 9px 9px 9px 16px;
        border-radius: 10px;
        background: rgba(83, 15, 83, .97);
        color: #fff;
        box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
        backdrop-filter: blur(12px);
      }

      .tk-booking-bar span {
        font-size: 11px;
        opacity: .7;
        display: block;
      }

      .tk-booking-bar strong {
        font-size: 13px;
      }

      .tk-booking-bar .tk-btn {
        min-height: 44px;
        width: auto;
        padding-inline: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition: none !important;
        animation: none !important;
      }

      [data-reveal] {
        opacity: 1;
        transform: none;
      }
    }