/* ==========================================================================
   Kllakar – WordPress fixes (loaded last)
   1. One image orientation on the whole site: every card, cover and gallery
      image is landscape 5:3 (change --card-image-ratio to change all at once).
   2. WordPress prints width/height attributes on images. Browsers turn those
      into a fixed height, which made cards tall/portrait. The frame now owns
      the shape and the image always fills it (object-fit: cover).
   3. Mobile card layout polish.
   ========================================================================== */
:root { --card-image-ratio: 5 / 3; }

/* ---- Frames own the shape ---- */
.marble-frame,
.work-media,
.project-gallery figure {
  display: block;
  width: 100%;
  aspect-ratio: var(--card-image-ratio) !important;
  height: auto !important;
  overflow: hidden;
  background: #111;
}
.marble-frame > img,
.work-media > img,
.project-gallery figure > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
}
/* Cover image of a blog article (the figure has padding, so the image keeps the ratio). */
.blog-cover img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--card-image-ratio) !important;
  object-fit: cover;
}
/* Any other content image never keeps a fixed attribute height. */
.kll-page-content img,
.blog-article-body img { height: auto; }

/* ---- Cards: stretch evenly, keep titles readable ---- */
.portfolio-list-item,
.related-project-card,
.service-list-item,
.work-link,
.service-link { min-width: 0; }
.portfolio-list-item h2,
.detail-layout .related-project-card h3,
.service h3,
.work-grid .work-link div > span { overflow-wrap: anywhere; }

/* Tablet */
@media (max-width: 1024px) {
  .portfolio-catalogue { gap: 40px 20px; }
  .service-list-item { gap: 28px; }
  .detail-layout .related-projects { }
  .project-gallery { }
  .service-detail-media { }
  .blog-cover { }
}

/* Phones */
@media (max-width: 760px) {
  .service-list-item { grid-template-columns: 1fr; gap: 20px; }
  .portfolio-catalogue { grid-template-columns: 1fr; gap: 36px; }
  .portfolio-list-item h2 { margin: 16px 0 0; font-size: 16px; }
  .detail-layout .related-projects { }
  .detail-layout .related-project-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .project-gallery { }
  .project-gallery-grid { gap: 16px; }
  .project-gallery figure,
  .project-gallery figure:nth-child(even) { grid-column: 1 / -1; }
  .service-detail-media { }
  .blog-cover { }
  .blog-toolbar { gap: 14px; }
  .blog-filters { flex-wrap: wrap; }
  .blog-list-meta { flex-wrap: wrap; row-gap: 6px; }
  .blog-related-grid { grid-template-columns: 1fr; }
}

/* Small phones */
@media (max-width: 400px) {
  .service-list-copy h2,
  .portfolio-list-item h2 { font-size: 16px; }
  .catalogue-action { margin-top: 14px; }
}

/* Long page titles (e.g. "BRANDING & DESIGNING") must never be cut off on phones. */
@media (max-width: 760px) {
  .project-intro h1,
  .blog-article-header h1 {
    font-size: clamp(36px, 11.5vw, 60px);
    line-height: .98;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Word-by-word heading animation wraps words in spans; let a word shrink-wrap
     instead of pushing outside the screen (only happens if the web font fails). */
  .project-intro h1 .bw,
  .blog-article-header h1 .bw { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .project-intro h1,
  .blog-article-header h1 { font-size: clamp(34px, 11.5vw, 44px); }
}

/* Contact buttons row: fits 5 buttons on very small phones (320px) and wraps if ever needed. */
@media (max-width: 380px) {
  .socials { flex-wrap: wrap; gap: 6px; row-gap: 12px; }
  .socials a { width: 44px; }
  .socials i { width: 44px; height: 44px; }
  .socials img { width: 18px; height: 18px; }
}


/* ========================================================================== 
   UI audit hotfix — v2.0.2
   Mobile card rhythm, alignment, hero stability and form success modal.
   ========================================================================== */

/* Success modal: keeps the existing visual language, adds clear feedback. */
body.form-success-open { overflow: hidden; }
.form-success {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(12px);
  text-align: center;
}
.form-success[hidden] { display: none; }
.form-success-panel {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
  padding: 44px 32px 32px;
  border: 1px solid rgba(252, 11, 241, .42);
  border-radius: 14px;
  background: #090909;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px) scale(.985);
}
.form-success.is-celebrating .form-success-panel {
  animation: kll-success-pop .48s cubic-bezier(.22, 1, .36, 1) forwards;
}
.form-success-sparkles {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.form-success-sparkles span {
  --spark-x: 0px;
  --spark-y: -120px;
  --spark-r: 0deg;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--pink);
  opacity: 0;
}
.form-success-sparkles span:nth-child(2n) { width: 5px; height: 10px; background: #fff; }
.form-success-sparkles span:nth-child(3n) { border-radius: 50%; background: #7f8cff; }
.form-success-sparkles span:nth-child(1) { --spark-x: -170px; --spark-y: -110px; --spark-r: -28deg; }
.form-success-sparkles span:nth-child(2) { --spark-x: -115px; --spark-y: -155px; --spark-r: 42deg; }
.form-success-sparkles span:nth-child(3) { --spark-x: -52px; --spark-y: -175px; --spark-r: 12deg; }
.form-success-sparkles span:nth-child(4) { --spark-x: 25px; --spark-y: -180px; --spark-r: -34deg; }
.form-success-sparkles span:nth-child(5) { --spark-x: 98px; --spark-y: -150px; --spark-r: 48deg; }
.form-success-sparkles span:nth-child(6) { --spark-x: 165px; --spark-y: -105px; --spark-r: 15deg; }
.form-success-sparkles span:nth-child(7) { --spark-x: -185px; --spark-y: 18px; --spark-r: 35deg; }
.form-success-sparkles span:nth-child(8) { --spark-x: -142px; --spark-y: 96px; --spark-r: -18deg; }
.form-success-sparkles span:nth-child(9) { --spark-x: -65px; --spark-y: 138px; --spark-r: 24deg; }
.form-success-sparkles span:nth-child(10) { --spark-x: 60px; --spark-y: 138px; --spark-r: -38deg; }
.form-success-sparkles span:nth-child(11) { --spark-x: 142px; --spark-y: 92px; --spark-r: 52deg; }
.form-success-sparkles span:nth-child(12) { --spark-x: 188px; --spark-y: 10px; --spark-r: -22deg; }
.form-success.is-celebrating .form-success-sparkles span {
  animation: kll-spark .82s cubic-bezier(.16, .84, .44, 1) both;
}
.form-success.is-celebrating .form-success-sparkles span:nth-child(2n) { animation-delay: .04s; }
.form-success.is-celebrating .form-success-sparkles span:nth-child(3n) { animation-delay: .08s; }
.form-success .form-success-icon { margin-bottom: 18px; }
.form-success .form-success-panel h3 { font-size: 40px; line-height: 1; }
.contact .form-success .form-success-panel p { max-width: 35ch; margin: 12px auto 24px; }
.form-success .form-success-panel button {
  min-width: 128px;
  min-height: 44px;
  padding: 0 20px;
  border-color: #3a3a3a;
}
@keyframes kll-success-pop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kll-spark {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.35); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-r)) scale(1); }
}

/* Mobile layout audit: one predictable card system throughout the theme. */
@media (max-width: 760px) {
  :root {
    --card-image-ratio: 5 / 3;
    --card-image-radius: 12px;
    --card-title-size: 16px;
  }

  /* Frame and section gutters share the same 16px inner rhythm. */
  
  

  /* Home recent work: 1 card per row, first 4 controlled by existing JS. */
  
  .work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    width: 100%;
    max-width: none;
    margin: 32px 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: default;
  }
  .work-grid article,
  .work-grid article:last-child {
    width: 100%;
    max-width: none;
    flex: none;
  }
  .work-grid div { padding-top: 14px; }
  .work-media { width: 100%; aspect-ratio: var(--card-image-ratio); border-radius: 12px; }
  .work-grid img { width: 100%; height: 100%; object-fit: cover; }

  /* Works archive cards: same orientation and width, no staggered sizing. */
  .portfolio-catalogue { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 48px; }
  .portfolio-list-item { display: block; width: 100%; min-width: 0; }
  .portfolio-list-item .marble-frame { width: 100%; aspect-ratio: var(--card-image-ratio); border-radius: 12px; }
  .portfolio-list-item .marble-frame img,
  .portfolio-list-item img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: inherit; }
  .portfolio-list-item h2 { margin-top: 14px; gap: 12px; line-height: 1.4; }

  /* Services + blog list: card image becomes landscape instead of tall portrait. */
  .service-list-item { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 28px; padding-bottom: 34px; }
  .service-list-item > .marble-frame { width: 100%; aspect-ratio: var(--card-image-ratio); border-radius: 12px; }
  .service-list-item > .marble-frame img,
  .service-list-item > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: inherit; }
  .service-list-copy h2 { margin: 8px 0 10px; line-height: 1.35; }
  .service-list-copy p { font-size: 14px; line-height: 1.6; }
  .catalogue-action { margin-top: 14px; }
  .blog-toolbar { padding-top: 22px; padding-bottom: 18px; }
  .blog-filters { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }

  /* Related projects match the archive cards. */
  .detail-layout .related-projects { }
  .detail-layout .related-project-grid { gap: 30px; margin-top: 26px; }
  .detail-layout .related-project-card .marble-frame { width: 100%; aspect-ratio: var(--card-image-ratio); border-radius: 12px; }
  .detail-layout .related-project-card img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: inherit; }
  .detail-layout .related-project-meta { margin-top: 13px; }
  .detail-layout .related-project-card h3 { margin-top: 5px; }

  /* Prevent headings and controls from touching the frame on narrow devices. */
  .project-intro h1 { overflow-wrap: anywhere; }
  .project-intro p { max-width: 100%; }
  .blog-search input { width: 100%; }

  /* Success panel scales without crowding a 320px viewport. */
  .form-success { padding: 16px; }
  .form-success-panel { padding: 36px 20px 24px; border-radius: 12px; }
  .form-success .form-success-panel h3 { font-size: 34px; }
  .form-success-sparkles { transform: scale(.8); }
}

@media (max-width: 380px) {
  
  .work-grid { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .form-success.is-celebrating .form-success-panel { animation: none; opacity: 1; transform: none; }
  .form-success.is-celebrating .form-success-sparkles span { animation: none; display: none; }
}


/* ========================================================================== 
   UI system audit — v2.0.3
   One media ratio everywhere, stronger spacing rhythm, accessible multi-service
   chips and restrained interaction polish without changing the visual identity.
   ========================================================================== */

/* One orientation across home, catalogues, service/project details and blog. */
:root {
  --card-image-ratio: 5 / 3;
  --ui-radius: 12px;
  --ui-control-height: 56px;
}

:is(.marble-frame, .work-media, .project-gallery figure, .blog-cover img) {
  aspect-ratio: var(--card-image-ratio) !important;
}
.service-detail-media .marble-frame,
.detail-layout .related-project-card .marble-frame,
.portfolio-list-item .marble-frame,
.service-list-item > .marble-frame,
.work-media { border-radius: var(--ui-radius); }

/* Cards share the same content rhythm and hover affordance. */
:is(.work-link, .portfolio-list-item, .related-project-card, .service-list-item) {
  min-width: 0;
}
:is(.work-link, .portfolio-list-item, .related-project-card) .marble-frame,
.work-link .work-media {
  transition: border-color .25s ease, transform .45s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(.work-link, .portfolio-list-item, .related-project-card):hover .marble-frame,
  .work-link:hover .work-media { transform: translateY(-3px); }
  :is(.portfolio-list-item, .related-project-card) h2 span,
  :is(.portfolio-list-item, .related-project-card) h3 span { transition: transform .3s var(--ease-out, ease); }
  :is(.portfolio-list-item, .related-project-card):hover :is(h2, h3) span { transform: translate(2px, -2px); }
}

/* Multi-service input chips. Native checkboxes stay accessible and submit data. */
.form-services {
  margin: 0;
  padding: 0;
  border: 0;
}
.form-services legend {
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.form-services legend small {
  color: #777;font-size: 12px;
  font-weight: 500;
}
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
}
.service-chip {
  position: relative;
  display: inline-flex;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.service-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.service-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #343434;
  border-radius: 999px;
  background: #090909;
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .25s var(--ease-out, ease);
}
.service-chip:hover span { border-color: #626262; color: #fff; }
.service-chip.is-selected span,
.service-chip input:checked + span {
  border-color: var(--pink);
  background: rgba(252, 11, 241, .1);
  color: #fff;
}
.service-chip input:focus-visible + span {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
.service-chip:active span { transform: scale(.97); }
.service-chip-hint {
  margin: 9px 0 0 !important;
  color: #686868 !important;font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left;
}

/* Form controls: consistent heights and focus without glow-heavy styling. */
#contact-form :is(input:not([type="checkbox"]), textarea) {
  border-color: #3c3c3c;
  background: #050505;
}
#contact-form :is(input:not([type="checkbox"]), textarea):hover { border-color: #5a5a5a; }
#contact-form :is(input:not([type="checkbox"]), textarea):focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 1px var(--pink);
}
#contact-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  min-height: var(--ui-control-height);
}
#contact-form button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.16) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease-out, ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  #contact-form button[type="submit"]:hover::after { transform: translateX(130%); }
}

/* Better mobile rhythm: same 5:3 image orientation, full-width controls/cards. */
@media (max-width: 760px) {
  :root { --card-image-ratio: 5 / 3; }
  
  #contact-form { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 14px; }
  #contact-form .form-field,
  #contact-form .form-field-full,
  #contact-form .form-services,
  #contact-form button { grid-column: 1 / -1; }
  #contact-form :is(input:not([type="checkbox"]), textarea) { font-size: 16px; }
  .service-chips { gap: 8px; }
  .service-chip span { min-height: 40px; padding: 0 13px; font-size: 12px; }
  .work-grid,
  .portfolio-catalogue,
  .detail-layout .related-project-grid { row-gap: 34px; }
  .work-grid div { min-height: 28px; }
}

@media (max-width: 380px) {
  .service-chip { max-width: 100%; }
  .service-chip span { max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .service-chip span,
  #contact-form button[type="submit"]::after,
  :is(.work-link, .portfolio-list-item, .related-project-card) .marble-frame,
  .work-link .work-media { transition: none !important; transform: none !important; }
}

/* Remaining catalogue/detail media classes use the same 5:3 landscape system. */
:is(.blog-card-media, .blog-card:first-child .blog-card-media, .product-card-media, .product-hero-media) {
  aspect-ratio: var(--card-image-ratio) !important;
}
.service-detail-media img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
}

/* ==========================================================================
   v2.1 — Responsive audit fixes (tested 320 → 1920px)
   ========================================================================== */

/* Homepage "What We Do": every service card is the same size on every device.
   Desktop keeps the staggered layout, tablet uses 2 + 1, phones one column. */
.services .service,
.services .service-left,
.services .service-center,
.services .service-right { width: 100%; max-width: 465px; }
.services .service-center { width: calc(50% - 14px); }
.services .service .marble-frame { width: 100%; }

@media (min-width: 641px) and (max-width: 960px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .services .service-left { grid-column: 1; justify-self: stretch; width: 100%; max-width: none; }
  .services .service-center { grid-column: 2; justify-self: stretch; width: 100%; max-width: none; }
  .services .service-right { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); max-width: none; }
}
@media (max-width: 640px) {
  .services { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .services .service,
  .services .service-left,
  .services .service-center,
  .services .service-right { grid-column: 1 / -1; justify-self: stretch; width: 100%; max-width: none; margin: 0; }
}

/* Blog topic filters wrap on small screens instead of hiding buttons off-screen. */
@media (max-width: 600px) {
  .blog-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 8px; }
}

/* Comfortable tap targets. */
.blog-back { display: inline-flex; align-items: center; min-height: 44px; }

/* Breadcrumb bar removed: keep a clean gap under the header on inner pages. */
.seo-breadcrumb { display: none !important; }

/* Same form section on every page: consistent inner width and spacing. */
.kll-form-section form { width: min(571px, 100%); margin-left: auto; margin-right: auto; }
.kll-form-section .contact-hire-options { width: min(571px, 100%); margin-left: auto; margin-right: auto; }

/* Contact buttons: one tidy row of five on every phone (wraps only below 330px). */
@media (max-width: 760px) {
  .kll-form-section .socials { gap: 8px; justify-content: center; }
  .kll-form-section .socials a { width: 52px; }
}
@media (max-width: 380px) {
  .kll-form-section .socials { gap: 6px; }
  .kll-form-section .socials a { width: 46px; }
  .kll-form-section .socials i { width: 46px; height: 46px; }
}
@media (max-width: 340px) {
  .kll-form-section .socials { gap: 4px; }
  .kll-form-section .socials a { width: 44px; }
  .kll-form-section .socials i { width: 44px; height: 44px; }
  .kll-form-section .socials span { font-size: 12px; }
}

/* ========================================================================== 
   v2.2.0 — text-only announcement + calendar booking system
   ========================================================================== */
.announcement-bar :is(a, .announcement-bar-text) {
  width: min(990px, calc(100% - 32px));
  min-height: 40px;
  margin: 0 auto;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.announcement-bar :is(a, .announcement-bar-text) > span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.announcement-bar a { cursor: pointer; }

.booking-section { height: auto;padding: var(--section-pad) var(--frame-pad); }
.booking-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 32px;
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: left;
}
.booking-summary,
.booking-panel {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: #090909;
}
.booking-summary { padding: 30px; }
.booking-summary h2 { margin: 12px 0 10px; color: #fff; font: 400 clamp(34px, 4vw, 46px)/.95 var(--font-display); }
.booking-summary > p { margin: 0; color: #aaa; font-size: 14px; line-height: 1.7; }
.booking-facts { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.booking-facts li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.booking-facts strong { color: #fff; font-size: 13px; }
.booking-facts span { color: #777; font-size: 12px; }
.booking-contact-link { display: inline-block; margin-top: 28px; color: var(--pink); font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.booking-panel { padding: 30px; }
.booking-step + .booking-step,
.booking-form { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.09); }
.booking-step-label { display: block; margin-bottom: 14px; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.booking-date-field { display: grid; gap: 8px; color: #cfcfcf; font-size: 12px; font-weight: 700; }
.booking-date-field input { color-scheme: dark; }
.booking-help,
.booking-empty { margin: 10px 0 0 !important; color: #777 !important; font-size: 12px !important; line-height: 1.5 !important; }
.booking-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.booking-slot {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #363636;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font: 700 12px var(--font-body);
  cursor: pointer;
}
.booking-slot:hover { border-color: #666; }
.booking-slot.is-selected { border-color: var(--pink); background: rgba(252,11,241,.1); color: #fff; }
.booking-form { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-form .booking-step-label,
.booking-form button,
.booking-status { grid-column: 1 / -1; }
.booking-form[hidden] { display: none; }
.booking-status { min-height: 18px; margin: 0 !important; color: #a7a7a7 !important; font-size: 12px !important; }
.booking-status.is-error { color: #ff7d7d !important; }
.booking-confirmation { padding: 30px 10px 10px; text-align: center; }
.booking-confirmation[hidden] { display: none; }
.booking-confirmation h3 { margin: 14px 0 8px; color: #fff; font: 400 38px/1 var(--font-display); text-transform: uppercase; }
.booking-confirmation > p { max-width: 42ch; margin: 0 auto 24px !important; color: #aaa !important; font-size: 14px !important; }
.booking-confirmation dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0; }
.booking-confirmation dl div { padding: 14px 10px; border: 1px solid #292929; border-radius: 8px; }
.booking-confirmation dt { color: #777; font-size: 12px; text-transform: uppercase; }
.booking-confirmation dd { margin: 3px 0 0; color: #fff; font-size: 12px; font-weight: 700; }

@media (max-width: 760px) {
  .announcement-bar :is(a, .announcement-bar-text) { width: calc(100% - 24px); min-height: 40px; padding: 0 4px; font-size: 12px; }
  .announcement-bar :is(a, .announcement-bar-text) > span { white-space: nowrap; }
  .booking-section { }
  .booking-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .booking-summary, .booking-panel { padding: 22px 18px; }
  .booking-summary h2 { font-size: 36px; }
  .booking-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-form { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .booking-form .form-field,
  .booking-form .form-field-full,
  .booking-form button,
  .booking-status,
  .booking-form .booking-step-label { grid-column: 1; }
  .booking-confirmation dl { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 340px) {
  
  
  .booking-slots { grid-template-columns: minmax(0, 1fr); }
}

/* Remove the 40px announcement slot completely when the bar is disabled/empty. */
.site-header.no-announcement { height: 108px; }
.site-header.no-announcement .brand-small { top: 19px; }
.site-header.no-announcement .logo { top: 19px; }
.site-header.no-announcement .menu-button { top: 20px; }
@media (max-width: 760px) {
  .site-header.no-announcement { height: 84px; }
  .site-header.no-announcement .brand-small { top: 20px; }
  .site-header.no-announcement .logo { top: 13px; }
  .site-header.no-announcement .menu-button { top: 20px; }
}

/* ========================================================================== 
   v2.3.0 — booking calendar, management UX, footer, cache-safe UI
   ========================================================================== */
.booking-section { }
.booking-layout { width: min(980px, 100%); grid-template-columns: minmax(260px,.78fr) minmax(0,1.22fr); gap: 20px; }
.booking-summary, .booking-panel { border-color: rgba(255,255,255,.11); background: #070707; }
.booking-panel { padding: 28px; overflow: hidden; }
.booking-summary { padding: 28px; }
.booking-summary h2 { font-size: clamp(34px, 4vw, 44px); }
.booking-step + .booking-step, .booking-form, .booking-review { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.booking-step-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.booking-step-heading .booking-step-label { margin:0; text-transform:none; letter-spacing:0; font-size:15px; font-weight:700; }
.booking-edit-link { width:auto; min-height:34px; padding:0; border:0; background:transparent; color:#9f9f9f; font: 600 12px var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.booking-edit-link:hover { color:#fff; }
.booking-manage-banner { display:grid; gap:3px; margin-bottom:20px; padding:13px 14px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#0d0d0d; }
.booking-manage-banner[hidden] { display:none; }
.booking-manage-banner strong { color:#fff; font-size:12px; }
.booking-manage-banner span { color:#888; font-size: 12px; }
.booking-calendar { width:min(100%, 430px); margin:0 auto; }
.booking-calendar-nav { display:grid;grid-template-columns: 44px 1fr 44px; align-items:center; gap:8px; margin-bottom:14px; }
.booking-calendar-nav strong { color:#fff; font-size:14px; text-align:center; }
.booking-calendar-nav button { width:38px; height:38px; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:transparent; color:#a9a9a9; font-size:22px; line-height:1; cursor:pointer; }
.booking-calendar-nav button:hover:not(:disabled) { border-color:#2c2c2c; background:#101010; color:#fff; }
.booking-calendar-nav button:disabled { opacity:.25; cursor:not-allowed; }
.booking-weekdays, .booking-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.booking-weekdays { margin-bottom:5px; }
.booking-weekdays span { padding:5px 0; color:#666; font-size: 12px; font-weight:700; text-align:center; text-transform:uppercase; }
.booking-calendar-grid { min-height:245px; align-content:start; }
.booking-calendar-day, .booking-calendar-spacer { aspect-ratio:1; min-width:0; }
.booking-calendar-day { display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:transparent; color:#565656; font:600 12px var(--font-body); cursor:not-allowed; }
.booking-calendar-day.is-available { color:#d7d7d7; cursor:pointer; }
.booking-calendar-day.is-available:hover { border-color:#3e3e3e; background:#111; color:#fff; }
.booking-calendar-day.is-selected { border-color:var(--pink); background:var(--pink); color:#fff; box-shadow:0 0 0 3px rgba(252,11,241,.10); }
.booking-calendar-day:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.booking-calendar-loading { grid-column:1/-1; padding:80px 0; color:#777; font-size:12px; text-align:center; }
.booking-timezone-row { display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); color:#777; }
.booking-timezone-row > span { font-size: 12px; }
.booking-timezone-row div { display:grid; gap:1px; }
.booking-timezone-row small { color:#656565; font-size: 12px; text-transform:uppercase; letter-spacing:.05em; }
.booking-timezone-row strong { color:#aaa; font-size: 12px; font-weight:600; }
.booking-time-step[hidden] { display:none; }
.booking-slots { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.booking-slot { min-height:44px; border-color:#292929; border-radius:7px; background:#080808; font-size: 12px; }
.booking-slot:hover { border-color:#666; }
.booking-slot.is-selected { border-color:var(--pink); background:rgba(252,11,241,.09); }
.booking-current-slot { grid-column:1/-1; }
.booking-form { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.booking-form[hidden], .booking-review[hidden], .booking-cancel-panel[hidden] { display:none; }
.booking-form .booking-step-heading, .booking-form button[data-booking-review], .booking-status { grid-column:1/-1; }
.booking-form input { height:52px; }
.booking-form button[data-booking-review], .booking-review-actions > button:first-child { min-height:50px; border:0; border-radius:7px; background:var(--pink); color:#fff; font:700 13px var(--font-body); cursor:pointer; }
.booking-review-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.booking-review-list div { min-width:0; padding:12px 13px; border:1px solid #242424; border-radius:7px; background:#050505; }
.booking-review-list dt { color:#666; font-size: 12px; text-transform:uppercase; }
.booking-review-list dd { margin:3px 0 0; overflow-wrap:anywhere; color:#fff; font-size:12px; font-weight:600; }
.booking-review-actions { display:grid; grid-template-columns:1fr auto; gap:8px; }
.booking-review-actions button { min-height:48px; padding:0 18px; }
.booking-secondary { border:1px solid #303030; border-radius:7px; background:#090909; color:#aaa; cursor:pointer; }
.booking-cancel-panel { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); text-align:right; }
.booking-danger { border:0; background:transparent; color:#a66; font-size: 12px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.booking-danger:hover { color:#ff8c8c; }
.booking-status { min-height:16px; }

.booking-thankyou { width:min(520px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:32px; overflow:auto; border:1px solid #252525; border-radius:14px; background:#050505; color:#fff; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,.7); }
.booking-thankyou::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(8px); }
.booking-thankyou h3 { margin:14px 0 8px; color:#fff; font:400 38px/1 var(--font-display); text-transform:uppercase; }
.booking-thankyou > p { max-width:40ch; margin:0 auto 20px; color:#aaa; font-size:13px; line-height:1.6; }
.booking-thankyou dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.booking-thankyou dl div { padding:12px 9px; border:1px solid #242424; border-radius:8px; }
.booking-thankyou dt { color:#666; font-size: 12px; text-transform:uppercase; }
.booking-thankyou dd { margin:3px 0 0; color:#fff; font-size: 12px; font-weight:700; overflow-wrap:anywhere; }
.booking-thankyou-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border:1px solid #272727; border-radius:50%; background:#090909; color:#999; font-size:21px; cursor:pointer; }
.booking-thankyou-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.booking-thankyou-actions :is(a,button) { min-height:46px; display:grid; place-items:center; border:1px solid #2d2d2d; border-radius:7px; background:#080808; color:#fff; font: 700 12px var(--font-body); cursor:pointer; }
.booking-thankyou-actions button { background:var(--pink); border-color:var(--pink); }
.booking-party { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.booking-party i { position:absolute; top:36%; left:50%; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0; animation:kll-party .85s ease-out forwards; }
.booking-party i:nth-child(2){--x:90px;--y:-72px;animation-delay:.05s}.booking-party i:nth-child(3){--x:-100px;--y:-50px;animation-delay:.09s}.booking-party i:nth-child(4){--x:120px;--y:25px;animation-delay:.13s}.booking-party i:nth-child(5){--x:-115px;--y:35px;animation-delay:.16s}.booking-party i:nth-child(6){--x:20px;--y:-100px;animation-delay:.2s}
@keyframes kll-party { 0%{opacity:0;transform:translate(0,0) scale(.5)} 25%{opacity:.9} 100%{opacity:0;transform:translate(var(--x,60px),var(--y,-60px)) scale(1.15)} }







@media (max-width:760px) {
  body { padding-bottom:64px; }
  body.forest-in-view footer.sticky-footer:not(:focus-within) { transform:none; }
  footer.sticky-footer { position:fixed; transform:none !important; }
  
  
  .booking-section { }
  .booking-layout { grid-template-columns:1fr; gap:12px; }
  .booking-summary { padding:20px 17px; }
  .booking-panel { padding:20px 15px; }
  .booking-summary h2 { font-size:34px; }
  .booking-calendar { width:100%; }
  .booking-calendar-grid { min-height:230px; }
  .booking-calendar-day { font-size:12px; }
  .booking-slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .booking-form { grid-template-columns:1fr; }
  .booking-form .form-field, .booking-form .booking-step-heading, .booking-form button[data-booking-review], .booking-status { grid-column:1; }
  .booking-review-list { grid-template-columns:1fr 1fr; }
  .booking-review-actions { grid-template-columns:1fr; }
  .booking-thankyou { padding:30px 17px 20px; }
  .booking-thankyou dl { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .booking-weekdays, .booking-calendar-grid { gap:3px; }
  .booking-calendar-grid { min-height:210px; }
  .booking-slots, .booking-review-list { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .booking-party i { animation:none !important; }
}

/* ==============================================================
   Global Galaxy Background — whole website
   ============================================================ */
.kllakar-galaxy-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
  opacity: .44;
  contain: strict;
  overflow: clip;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: #000;
}

/* Keep every page above the shared canvas without creating per-section canvases. */
body > :not(.kllakar-galaxy-background) {
  position: relative;
}

main,
.project-detail,
.contact-page-main,
.adopt-ai-page,
.forest-showcase,
.site-footer-info {
  background-color: transparent !important;
}

/* Semi-transparent page chrome keeps readability while letting the global field show through. */
.site-header {
  background: rgba(0, 0, 0, .82);
}



@media (max-width: 767px) {
  .kllakar-galaxy-background { opacity: .3; }
  .site-header { background: rgba(0, 0, 0, .9); }
}

@media (prefers-reduced-motion: reduce) {
  .kllakar-galaxy-background { opacity: .22; }
}


/* ==============================================================
   v2.4.2 — mobile booking drawer + subtler Galaxy field
   ============================================================ */
.booking-drawer-close { display:none; }

@media (max-width:760px) {
  html.booking-drawer-open,
  html.booking-drawer-open body { overflow:hidden; }

  .booking-section {
    display:none;
  }

  .booking-section.is-mobile-drawer-open {
    position:fixed !important;
    inset:0;
    z-index:120;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0 !important;
    background:rgba(0,0,0,.68) !important;
    backdrop-filter:blur(5px);
  }

  .booking-section.is-mobile-drawer-open > .grid-points { display:none; }

  .booking-section.is-mobile-drawer-open .booking-layout {
    width:100%;
    max-height:min(90dvh, 820px);
    margin:0;
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid #202020;
    border-bottom:0;
    border-radius:18px 18px 0 0;
    background:#060606;
    box-shadow:0 -24px 70px rgba(0,0,0,.65);
    -webkit-overflow-scrolling:touch;
  }

  .booking-section.is-mobile-drawer-open .booking-summary {
    padding:18px 18px 10px;
    border:0;
    background:#060606;
  }

  .booking-section.is-mobile-drawer-open .booking-summary > p,
  .booking-section.is-mobile-drawer-open .booking-facts,
  .booking-section.is-mobile-drawer-open .booking-contact-link {
    display:none;
  }

  .booking-section.is-mobile-drawer-open .booking-summary h2 {
    margin:6px 44px 0 0;
    font-size:28px;
  }

  .booking-section.is-mobile-drawer-open .booking-panel {
    padding:12px 16px calc(24px + env(safe-area-inset-bottom));
    border:0;
    background:#060606;
  }

  .booking-drawer-close {
    position:fixed;
    right:14px;
    bottom:calc(min(90dvh, 820px) - 50px);
    z-index:123;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid #292929;
    border-radius:50%;
    background:#0b0b0b;
    color:#aaa;
    font:400 24px/1 var(--font-body);
    cursor:pointer;
  }

  .booking-section:not(.is-mobile-drawer-open) .booking-drawer-close { display:none; }

  .booking-calendar-grid { min-height:214px; }
  .booking-calendar-day { font-size: 12px; }
}

/* Ensure the global background never competes visually with content. */
.kllakar-galaxy-background { opacity:.28; }
@media (max-width:767px) { .kllakar-galaxy-background { opacity:.2; } }
@media (prefers-reduced-motion:reduce) { .kllakar-galaxy-background { opacity:.14; } }


/* ==============================================================
   End-of-page liquid wave + footer stack — v2.5.3
   ============================================================ */
body { padding-bottom: 0; }

/* Desktop: no footer CTA buttons. Legal links sit directly above the wave. */
@media (min-width: 761px) {
  footer.sticky-footer { display: none !important; }
}




/* True last visual element: edge-to-edge, no card, no radius, no content after it. */
.glowing-wave-showcase {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(400px, 40vw, 590px);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  isolation: isolate;
  touch-action: pan-y;
}
.glowing-wave-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 18% at 42% 40%, rgba(252,11,241,.075), transparent 76%),
    linear-gradient(to bottom, rgba(0,0,0,.06), transparent 42%);
}

.glowing-wave-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 .65px, transparent .85px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.12) 0 .55px, transparent .8px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.28) 0 .6px, transparent .9px);
  background-size: 4px 4px, 5px 5px, 6px 6px;
}

.glowing-wave-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* Mobile action footer remains sticky as requested previously; legal content stays above wave. */
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  footer.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 64px;
    transform: none !important;
  }
  
  
  .glowing-wave-showcase { height: 340px; }
}

@media (max-width: 390px) {
  .glowing-wave-showcase { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .glowing-wave-showcase { height: clamp(330px, 38vw, 500px); }
}


/* ==============================================================
   v2.5.4 — audit fixes: footer, wave, mobile booking calendar
   ============================================================== */

/* Logged-in view: the global `body > *` relative rule was pulling the WP admin bar
   into the page flow, so admins saw a shifted layout that visitors never saw. */
body > #wpadminbar { position: fixed; }
@media (max-width: 600px) { body > #wpadminbar { position: absolute; } }

/* ---------- Footer: readable, tappable legal links ---------- */






/* ---------- Glowing wave: last element on every page ---------- */
.glowing-wave-showcase { margin-top: -1px; contain: layout paint; }
.glowing-wave-showcase::after { opacity: .14; }
/* Static magenta wave if neither WebGL nor Canvas is available. */
.glowing-wave-showcase.is-static {
  background:
    radial-gradient(120% 70% at 40% 100%, rgba(128,29,165,.95) 0 45%, transparent 46%),
    radial-gradient(90% 60% at 38% 100%, rgba(252,11,241,.85) 0 40%, transparent 41%),
    #000;
}

@media (max-width: 760px) {
  /* Quick-action bar clears the iPhone home indicator; the page leaves room for it. */
  footer.sticky-footer {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  
  
  
}

/* ---------- Booking: visible on mobile, smoother calendar ---------- */
@media (max-width: 760px) {
  /* The calendar was hidden on phones unless a booking button opened the drawer. */
  .booking-section { display: block; }

  .booking-calendar-nav { grid-template-columns: 44px 1fr 44px; }
  .booking-calendar-nav button { width: 44px; height: 44px; }
  .booking-calendar-nav strong { font-size: 15px; }
  .booking-weekdays span { font-size: 12px; }
  .booking-weekdays, .booking-calendar-grid { gap: 4px; }
  .booking-calendar-grid { min-height: 0; }
  .booking-calendar-loading { padding: 64px 0; }
  .booking-calendar-day { font-size: 14px; touch-action: manipulation; }
  .booking-calendar-day.is-available { color: #f0f0f0; background: rgba(255,255,255,.04); }
  .booking-calendar-day.is-selected { border-color: var(--pink); background: var(--pink); color: #fff; }
  .booking-slot { min-height: 48px; font-size: 13px; touch-action: manipulation; }
  .booking-step-heading .booking-step-label { font-size: 14px; }
  .booking-edit-link { min-height: 40px; font-size: 12px; }

  /* 16px stops iOS Safari from zooming the page when a field is tapped. */
  .booking-form input { height: 50px; font-size: 16px; }
  .booking-form button[data-booking-review],
  .booking-review-actions > button { min-height: 52px; font-size: 14px; }

  /* Scroll targets inside the steps land below the sticky header. */
  .booking-step, .booking-form, .booking-review { scroll-margin-top: 96px; }

  /* ----- Drawer (opened by booking buttons) ----- */
  .booking-section.is-mobile-drawer-open {
    width: auto;
    margin: 0;
    border: 0;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .booking-section.is-mobile-drawer-open.is-sheet-visible { opacity: 1; }
  .booking-section.is-mobile-drawer-open::before,
  .booking-section.is-mobile-drawer-open::after { display: none; }
  .booking-section.is-mobile-drawer-open .booking-layout {
    height: 88vh;
    height: min(88dvh, 820px);
    max-height: none;
    transform: translateY(24px);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .booking-section.is-mobile-drawer-open.is-sheet-visible .booking-layout { transform: none; }
  .booking-section.is-mobile-drawer-open .booking-step,
  .booking-section.is-mobile-drawer-open .booking-form,
  .booking-section.is-mobile-drawer-open .booking-review { scroll-margin-top: 132px; }
  .booking-section.is-mobile-drawer-open .booking-summary {
    position: sticky;
    top: 0;
    z-index: 4;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .booking-section.is-mobile-drawer-open .booking-summary .booking-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  
  .booking-calendar-day { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-section.is-mobile-drawer-open,
  .booking-section.is-mobile-drawer-open .booking-layout { transition: none; transform: none; }
}


/* ==============================================================
   v2.5.5 — booking as steps: date → time → details → confirm
   ============================================================== */
.booking-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.booking-progress li { min-width: 0; }
.booking-progress button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 0;
  border: 0;
  border-top: 2px solid #262626;
  background: transparent;
  color: #6f6f6f;
  font: 600 11px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.booking-progress button:disabled { cursor: default; }
.booking-progress button span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-progress-num {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #333;
  border-radius: 50%;
  font-size: 10px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.booking-progress li.is-current button { border-top-color: var(--pink); color: #fff; }
.booking-progress li.is-current .booking-progress-num { border-color: var(--pink); color: #fff; }
.booking-progress li.is-done button { border-top-color: rgba(252,11,241,.55); color: #bdbdbd; }
.booking-progress li.is-done .booking-progress-num { border-color: var(--pink); background: var(--pink); color: #fff; }
.booking-progress li.is-done button:hover { color: #fff; }
.booking-progress button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* Only one step is on screen, so the stacked separators are no longer needed. */
.booking-panel .booking-step + .booking-step,
.booking-panel .booking-form,
.booking-panel .booking-review { margin-top: 0; padding-top: 0; border-top: 0; }
.booking-panel .booking-step-label:focus { outline: none; }
.booking-panel .booking-step-label:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Stable panel height between steps, so the page does not jump. */
.booking-panel [data-booking-step],
.booking-panel .booking-form,
.booking-panel .booking-review { min-height: 360px; }
.booking-panel .booking-form { align-content: start; }

.booking-panel .is-entering { animation: kll-step-in .26s cubic-bezier(.2,.8,.2,1); }
@keyframes kll-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Chosen date + time, shown on the details step. */
.booking-selection {
  grid-column: 1 / -1;
  margin: -4px 0 4px !important;
  padding: 11px 13px;
  border: 1px solid rgba(252,11,241,.35);
  border-radius: 8px;
  background: rgba(252,11,241,.06);
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.4;
}
.booking-selection:empty { display: none; }

.booking-time-step .booking-slots { margin-top: 2px; }

@media (max-width: 760px) {
  .booking-progress { gap: 4px; margin-bottom: 18px; }
  .booking-progress button { gap: 5px; font-size: 11px; }
  .booking-panel [data-booking-step],
  .booking-panel .booking-form,
  .booking-panel .booking-review { min-height: 0; }
}
@media (max-width: 360px) {
  .booking-progress-num { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-panel .is-entering { animation: none; }
}


/* ==============================================================
   v2.5.6 — moving star galaxy, livelier liquid wave, custom cursor
   ============================================================== */
/* The global `body > *` relative rule also pulled the cursor out of position:fixed. */
body > .k-cursor,
body > .k-cursor-dot { position: fixed; top: 0; left: 0; will-change: transform; }
.k-cursor-dot { z-index: 10000; }

/* Dialogs render above the page (top layer), so they keep the native cursor. */
html.has-cursor dialog[open],
html.has-cursor dialog[open] * { cursor: auto !important; }
html.has-cursor dialog[open] :is(a, button, label) { cursor: pointer !important; }

/* Over the liquid wave the ring becomes a soft magenta lens. */
.cursor-liquid .k-cursor-ring {
  transform: scale(1.7);
  border-color: rgba(252, 11, 241, .7);
  background: rgba(252, 11, 241, .08);
  box-shadow: 0 0 18px rgba(252, 11, 241, .35);
}

/* Star field: actually visible now (it was dimmed to ~5%). */
.kllakar-galaxy-background { opacity: .9; }
@media (max-width: 767px) { .kllakar-galaxy-background { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .kllakar-galaxy-background { opacity: .55; } }


/* ==============================================================
   v2.5.7 — footer credit row, booking confirmation, polish
   ============================================================== */
/* Bottom row: credit on the left, legal links on the right. */







@media (max-width: 760px) {
  
  
  
}

/* Confirmation: confetti across the whole screen, above the blurred page. */
body > .booking-party,
.booking-party:popover-open {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
body > .booking-party:not(.is-active) { display: none; }
.booking-party i { display: none; }
.booking-thankyou {
  position: fixed;
  border-color: rgba(252, 11, 241, .45);
  background: radial-gradient(120% 70% at 50% 0%, rgba(252, 11, 241, .16), transparent 60%), #050505;
  box-shadow: 0 0 0 1px rgba(252, 11, 241, .12), 0 24px 90px rgba(252, 11, 241, .22), 0 24px 80px rgba(0, 0, 0, .7);
}
.booking-thankyou[open] { animation: kll-fade-in .25s ease; }
.booking-thankyou[open] > * { animation: kll-thanks-in .42s cubic-bezier(.2, .9, .25, 1.15); }
@keyframes kll-fade-in { from { opacity: 0; } to { opacity: 1; } }
.booking-thankyou > * { position: relative; z-index: 1; }
.booking-thankyou .booking-thankyou-close { position: absolute; }
.booking-thankyou .form-success-icon { box-shadow: 0 0 0 8px rgba(252, 11, 241, .14), 0 0 34px rgba(252, 11, 241, .55); animation: kll-tick-pop .5s .12s both cubic-bezier(.2, .9, .25, 1.4); }
.booking-thankyou-actions { grid-template-columns: 1fr; }
.booking-thankyou-actions button { color: #fff; }
@keyframes kll-thanks-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kll-tick-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Single primary action on the review step. */
.booking-review-actions { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .booking-thankyou[open], .booking-thankyou[open] > *, .booking-thankyou .form-success-icon { animation: none; }
}