/* Shared regular and medium faces for homepage content and controls. */
@font-face {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/site/home/vendor/pp-neue-montreal-400.woff2) format("woff2");
}
@font-face {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/site/home/vendor/pp-neue-montreal-500.woff2) format("woff2");
}

iframe[src^="https://framer.com/edit"] {
  display: none !important;
}

/* FAQ accordion. The framer runtime is gone, so home.js toggles
   current-faq-open on each item; answers stay hidden until then. */
[data-framer-name="Closed"] > [data-framer-name="Answer"] {
  display: none;
}
.current-faq-open > [data-framer-name="Answer"] {
  display: flex !important;
}
/* MCP block between the booking call and the FAQ: the pitch beside a demo
   that plays the /mcp lander's three sample requests in turn. home.js
   types the prompt, ticks the steps and reveals the result; without it, or
   with reduced motion, the finished state shows. */
.current-mcp {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 80px 40px 0;
  font-family: "PP Neue Montreal", sans-serif;
  color: var(--booking-ink);
}

.current-mcp-inner {
  display: grid;
  width: min(1280px, 100%);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  text-align: left;
}

.current-mcp h2 {
  margin: 0 0 16px;
  font-family:
    "PP Editorial Old Variable Regular",
    "PP Editorial Old Variable Regular Placeholder", serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.current-mcp-copy > p {
  max-width: 440px;
  margin: 0 0 18px;
  color: var(--booking-muted);
  font-size: 16px;
  line-height: 1.5;
}

/* Inline, balanced wrapping: when the row breaks it splits evenly instead
   of leaving one assistant alone on the second line. */
.current-mcp-copy > .current-mcp-works {
  max-width: 440px;
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 2;
  text-wrap: balance;
}

.current-mcp-works-label {
  color: var(--booking-dim);
}

.current-mcp-works span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  color: var(--booking-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.current-mcp-works img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

/* The assistant marks are black-on-transparent; Claude's is already white. */
.current-mcp-works img:not([src$="/claude.svg"]) {
  filter: invert(1);
}

.current-mcp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.current-mcp-cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid #fff;
  background: #fff;
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 120ms;
}

.current-mcp-cta:hover,
.current-mcp-cta:focus-visible {
  opacity: 0.85;
}

.current-mcp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--booking-muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.current-mcp-link svg {
  width: 13px;
  height: 13px;
}

.current-mcp-demo {
  position: relative;
  display: grid;
  padding: 22px 24px 26px;
  border: 1px solid var(--booking-line);
  border-radius: 12px;
  background: var(--booking-surface);
}

/* Scenarios share one cell, so the panel keeps the tallest one's height.
   The outgoing one drops instantly and the next fades in, so two prompts
   never overlap mid-transition. */
.current-mcp-scenario {
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  gap: 12px;
  visibility: hidden;
  opacity: 0;
}

.current-mcp-scenario.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 340ms ease;
}

.current-mcp-label {
  color: var(--booking-dim);
  font-family: "Chivo Mono", "Fragment Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.current-mcp-prompt {
  display: flex;
  min-height: 2.9em;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.current-mcp-prompt img {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

.current-mcp-prompt-text {
  flex: 1;
  min-width: 0;
}

.current-mcp-send {
  display: inline-flex;
  flex: none;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--booking-line);
  color: var(--booking-muted);
  transition:
    background 200ms,
    color 200ms;
}

.current-mcp-send svg {
  width: 12px;
  height: 12px;
}

.current-mcp-send svg:last-child,
.is-sent .current-mcp-send svg:first-child {
  display: none;
}

.is-sent .current-mcp-send {
  border-color: #fff;
  background: #fff;
  color: #0a0a0a;
}

.is-sent .current-mcp-send svg:last-child {
  display: block;
}

.current-mcp-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--booking-muted);
  font-family: "Chivo Mono", "Fragment Mono", monospace;
  font-size: 12px;
}

.current-mcp-trail li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity 220ms;
}

.current-mcp-trail svg {
  width: 11px;
  height: 11px;
  color: var(--booking-ink);
  transition: opacity 220ms;
}

.current-mcp-slides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 104px));
  gap: 8px;
}

.current-mcp-thumbs {
  display: flex;
  gap: 6px;
}

.current-mcp-thumbs img {
  display: block;
  width: 44px;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--booking-line);
  border-radius: 3px;
}

.current-mcp-slides img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--booking-line);
  border-radius: 6px;
}

.current-mcp-reply {
  margin: 0;
  color: var(--booking-muted);
  font-size: 13px;
  line-height: 1.45;
}

.current-mcp-card {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--booking-line);
  background: var(--booking-surface-raised);
  font-size: 13px;
  line-height: 1.45;
}

.current-mcp-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.current-mcp-card svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--booking-muted);
}

.current-mcp-card strong {
  font-weight: 500;
}

.current-mcp-output {
  display: grid;
  gap: 12px;
}

.current-mcp-queue {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--booking-line);
  font-size: 13px;
}

.current-mcp-queue li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--booking-line);
}

.current-mcp-when {
  color: var(--booking-muted);
  font-family: "Chivo Mono", "Fragment Mono", monospace;
  font-size: 12px;
}

.current-mcp-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--booking-dim);
  font-size: 12px;
}

.current-mcp-state svg {
  width: 11px;
  height: 11px;
}

.current-mcp-dots {
  position: absolute;
  right: 24px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.current-mcp-dots li {
  width: 14px;
  height: 2px;
  background: var(--booking-line);
  transition: background 300ms;
}

.current-mcp-dots li.is-active {
  background: var(--booking-muted);
}

/* Playback states, only once home.js has taken over. */
.current-mcp-demo.is-live [data-mcp-step] {
  opacity: 0.4;
}

.current-mcp-demo.is-live [data-mcp-step] svg {
  opacity: 0;
}

.current-mcp-demo.is-live [data-mcp-step].is-done,
.current-mcp-demo.is-live [data-mcp-step].is-done svg {
  opacity: 1;
}

.current-mcp-demo.is-live [data-mcp-item] {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 380ms ease,
    transform 380ms ease;
}

.current-mcp-demo.is-live [data-mcp-item].is-shown {
  opacity: 1;
  transform: none;
}

.current-mcp-demo.is-live [data-mcp-reply] {
  opacity: 0;
  transition: opacity 320ms ease;
}

.current-mcp-demo.is-live [data-mcp-reply].is-shown {
  opacity: 1;
}

.current-mcp-demo.is-live
  .current-mcp-scenario:not(.is-sent)
  .current-mcp-prompt-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.15em;
  animation: current-mcp-caret 1s steps(2, start) infinite;
}

@keyframes current-mcp-caret {
  to {
    visibility: hidden;
  }
}

.current-mcp-demo:not(.is-live) .current-mcp-dots {
  display: none;
}

/* Tablets keep the two columns, tighter: the site's own tablet range. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .current-mcp-inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 28px;
  }

  .current-mcp h2 {
    font-size: 32px;
  }

  .current-mcp-copy > p {
    font-size: 15px;
  }

  .current-mcp-demo {
    padding: 18px 18px 22px;
  }

  .current-mcp-prompt {
    font-size: 14px;
  }

  .current-mcp-slides {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 809.98px) {
  .current-mcp {
    padding: 40px 20px 0;
  }

  .current-mcp-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .current-mcp h2 {
    font-size: 32px;
  }

  .current-mcp-demo {
    padding: 16px 16px 24px;
  }

  .current-mcp-slides {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .current-mcp-dots {
    right: 16px;
  }
}

/* The FAQ spans the same content width as the booking section above it. The
   export gave the section 80px side padding (booking uses 40px) and capped
   the list at 1040px through a rule it shared with the old pricing grid.
   Mobile keeps the export's 40px 20px. */
@media (min-width: 810px) {
  .framer-0n0oI .framer-1ox7r5i {
    padding: 80px 40px;
  }

  .framer-0n0oI .framer-1ylmue8-container {
    max-width: none;
  }
}
/* The export pins the closed row to a fixed height and clips overflow, so
   revealing the answer is not enough: the row has to grow too. */
.current-faq-open {
  height: min-content !important;
}
[data-framer-name="Closed"] > [data-highlight] {
  cursor: pointer;
}
[data-framer-name="Top"] .framer-wbjqvv {
  transition: transform 120ms;
}
.current-faq-open [data-framer-name="Top"] .framer-wbjqvv {
  /* Hide the vertical stroke; the horizontal stroke stays unchanged. */
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Top"] .framer-wbjqvv {
    transition: none;
  }
}

/* Creator carousel rotation. The framer runtime is gone, so CSS keeps its
   3D ring moving without changing the exported markup. */
.framer-jxojtt-container
  [style*="transform-style:preserve-3d"][style*="transform:rotateY(0deg)"] {
  animation: home-creator-carousel-rotate 48s linear infinite;
}

@keyframes home-creator-carousel-rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .framer-jxojtt-container
    [style*="transform-style:preserve-3d"][style*="transform:rotateY(0deg)"] {
    animation: none;
  }
}

/* Mobile menu. The collapsed header is a fixed 48px box that clips the
   nav stack; opening just lets it grow. home.js toggles the class. */
.framer-Ynw2l.current-menu-open {
  height: auto !important;
}

/* Header CTA buttons. The export sizes these width:min-content for its
   original labels; the swapped-in BOOK A CALL label is longer and wraps.
   Keep labels on one line, let the button track the text, and pin both
   LOG IN and BOOK A CALL to the same type style. */
.framer-mylLa.framer-in6hc1 .framer-text {
  font-family: var(--home-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}

@media (min-width: 810px) {
  .framer-mylLa.framer-in6hc1 {
    width: max-content;
  }
}

.framer-mylLa.framer-in6hc1 .framer-1p5bvgu {
  position: static;
}

.framer-mylLa.framer-in6hc1 .framer-text a[href="/login"]::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Let the footer tagline wrap inside narrow phone widths. */
.framer-Khvcz .framer-oxgo5f {
  max-width: 100%;
  white-space: normal;
}

:root {
  --booking-surface: #161616;
  --booking-surface-raised: #1c1c1c;
  --booking-line: #2a2a2a;
  --booking-ink: #fdfdfd;
  --booking-muted: #b4b4b9;
  --booking-dim: #6f6f73;
}

[data-current-hidden="true"] {
  display: none !important;
}

[data-current-booking-shell] {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.current-booking {
  width: min(1280px, 100%);
  overflow: hidden;
  scroll-margin-top: 80px;
  border: 1px solid var(--booking-line);
  border-radius: 12px;
  background: var(--booking-surface);
  color: var(--booking-ink);
  font-family: "PP Neue Montreal", sans-serif;
  text-align: left;
}

.current-booking,
.current-booking * {
  box-sizing: border-box;
}

.current-booking [hidden] {
  display: none !important;
}

.current-booking-header {
  position: relative;
  border-bottom: 1px solid var(--booking-line);
}

.current-booking-steps {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 0;
  padding: 24px;
  list-style: none;
}

.current-booking-steps li,
.current-booking-step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--booking-dim);
  font-size: 14px;
}

.current-booking-step {
  margin: -6px -10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.current-booking-step:disabled {
  cursor: default;
}

.current-booking-steps [aria-current="step"],
.current-booking-steps [aria-current="step"] .current-booking-step {
  color: var(--booking-ink);
}

.current-booking-back {
  position: absolute;
  top: 50%;
  left: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--booking-muted);
  cursor: pointer;
}

.current-booking.is-calendar .current-booking-back {
  display: inline-flex;
}

.current-booking-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.current-booking-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.current-booking-body {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  min-height: 560px;
}

.current-booking-details {
  min-width: 0;
  padding: 28px 24px;
}

.current-booking-form {
  display: grid;
  margin: 0;
  gap: 20px;
}

.current-booking-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.current-booking-calendar {
  position: relative;
  min-height: 554px;
  scroll-margin-top: 80px;
  min-width: 0;
  border-left: 1px solid var(--booking-line);
}

.current-calendar-preview {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-height: 460px;
}

.current-booking-calendar .booking-calendar-view[inert] {
  pointer-events: none;
}

.current-booking-calendar
  .booking-calendar-view[inert]
  .booking-calendar-embed {
  opacity: 0.4;
}

.current-calendar-gate svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.current-calendar-gate {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: max-content;
  max-width: calc(100% - 40px);
  justify-items: center;
  gap: 12px;
  padding: 24px 32px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--booking-line);
  border-radius: 8px;
  background: var(--booking-surface-raised);
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
  text-align: center;
}

.current-calendar-gate p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.current-calendar-gate svg {
  color: var(--booking-muted);
}

.current-booking-back:hover,
.current-booking-step:not(:disabled):hover {
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
}

.current-booking-back:focus-visible,
.current-booking-step:focus-visible,
.current-booking-submit:focus-visible {
  outline: 2px solid var(--booking-ink);
  outline-offset: 3px;
}

.current-booking-back,
.current-booking-step,
.current-booking-submit {
  transition:
    background 120ms,
    border-color 120ms,
    color 120ms,
    opacity 120ms;
}

.current-booking-submit:hover {
  opacity: 0.85;
}

.current-booking-back:active,
.current-booking-step:not(:disabled):active,
.current-booking-submit:active {
  opacity: 0.7;
}

.current-booking-calendar .booking-calendar-embed {
  height: 600px;
}

@media (max-width: 1360px) {
  .current-booking:not(.is-calendar)
    .current-booking-calendar
    .booking-calendar-embed {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
  }
}

/* Once the lead is in, the form column goes away and Cal gets the full
   width; the back arrow and the first step return to the form. */
.current-booking.is-calendar .current-booking-body {
  grid-template-columns: minmax(0, 1fr);
}

.current-booking.is-calendar .current-booking-details {
  display: none;
}

.current-booking.is-calendar .current-booking-calendar {
  border-top: 0;
  border-left: 0;
}

.current-booking.is-calendar .current-booking-calendar .booking-calendar-embed {
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 701px) and (max-width: 1100px) {
  .current-booking-body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .current-booking:not(.is-calendar) .current-booking-details {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }

  .current-booking-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .current-booking-calendar {
    border-top: 1px solid var(--booking-line);
    border-left: 0;
  }
}

.current-booking-calendar .booking-calendar-header {
  display: none;
}

@media (max-width: 700px) {
  .current-booking-body,
  .current-booking.is-calendar .current-booking-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .current-booking-steps {
    gap: 24px;
    padding: 20px 16px;
  }

  .current-booking-steps li,
  .current-booking-step {
    gap: 8px;
    font-size: 12px;
  }

  .current-booking-back {
    left: 10px;
    width: 32px;
    height: 32px;
  }

  .current-booking-details {
    padding: 28px 24px;
  }

  .current-booking-calendar {
    border-top: 1px solid var(--booking-line);
    border-left: 0;
  }

  .current-calendar-gate {
    padding: 20px 24px;
  }

  .current-calendar-gate p {
    font-size: 14px;
  }

  /* Cal centers its iframe inside an inherited fixed height. Follow the
     content on phones so each booking step starts directly below the header. */
  .current-booking-calendar .booking-calendar-embed {
    height: auto;
    min-height: 460px;
  }
}

.current-booking-field {
  display: grid;
  gap: 7px;
}

.current-booking-field > span {
  color: var(--booking-muted);
  font-size: 12px;
  font-weight: 500;
}

.current-booking-field > span i {
  color: var(--booking-dim);
  font-style: normal;
}

.current-booking-field input,
.current-booking-field select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  outline: none;
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
  font: inherit;
  font-size: 14px;
}

.current-booking-field input::placeholder {
  color: var(--booking-dim);
}

.current-booking-field input:focus,
.current-booking-field select:focus {
  border-color: var(--booking-muted);
}

.current-booking-website,
.booking-website {
  position: relative;
  display: block;
}

.current-booking-favicon,
.booking-favicon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
}

.current-booking-website.has-favicon input,
.booking-website.has-favicon input {
  padding-left: 38px;
}

.current-booking-phone,
.booking-phone {
  display: flex;
  gap: 8px;
}

/* No-JS fallback: the bare select shows the calling code. site.js hides it
   and drives it through the picker below. */
.current-booking-field .current-booking-phone select,
.booking-field .booking-phone select {
  flex: none;
  width: 96px;
}

.current-booking-phone input,
.booking-phone input {
  flex: 1;
  min-width: 0;
}

/* Country code picker: flag + code trigger in front of the number, and a
   searchable list that site.js appends to <body> and positions under the
   trigger (the booking card clips overflow, the modal scrolls). */
.phone-country-trigger {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.booking-field .phone-country-trigger {
  min-height: 44px;
}

.phone-country-trigger:hover,
.phone-country-trigger:focus-visible,
.phone-country-trigger[aria-expanded="true"] {
  border-color: var(--booking-muted);
  outline: none;
}

.phone-country-trigger svg {
  width: 14px;
  height: 14px;
  color: var(--booking-dim);
}

.phone-flag {
  display: block;
  flex: none;
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone-flag-missing {
  background: var(--booking-line);
}

/* Author display rules beat the hidden attribute's UA style. */
.phone-country-panel[hidden],
.phone-country-list li[hidden] {
  display: none;
}

.phone-country-panel {
  position: fixed;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--booking-line);
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  font-family: "PP Neue Montreal", sans-serif;
  font-size: 14px;
}

.phone-country-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--booking-line);
  color: var(--booking-dim);
}

.phone-country-search svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.phone-country-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--booking-ink);
  font: inherit;
  font-size: 14px;
}

.phone-country-search input::placeholder {
  color: var(--booking-dim);
}

.phone-country-search input::-webkit-search-cancel-button {
  display: none;
}

.phone-country-list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--booking-line) transparent;
}

.phone-country-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
}

.phone-country-list li.is-active {
  background: var(--booking-line);
}

.phone-country-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-country-dial {
  flex: none;
  color: var(--booking-muted);
}

.phone-country-empty {
  margin: 0;
  padding: 12px;
  color: var(--booking-dim);
  font-size: 13px;
}

.current-booking-field select option {
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
}

.current-booking-submit {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid #fff;
  border-radius: 0;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.current-booking-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.current-booking-error,
.current-booking-terms {
  margin: 0;
  font-size: 11px;
}

.current-booking-error {
  color: #ff8a8a;
}

.current-booking-terms {
  color: var(--booking-dim);
  text-align: center;
}

.current-booking-terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.booking-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  overflow-y: auto;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--booking-ink);
  font-family: "PP Neue Montreal", sans-serif;
  backdrop-filter: blur(8px);
}

.booking-modal,
.booking-modal * {
  box-sizing: border-box;
}

.booking-modal[hidden] {
  display: none;
}

body.booking-open {
  overflow: hidden;
}

.booking-dialog {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--booking-line);
  background: var(--booking-surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
  color: var(--booking-ink);
  transition: width 180ms ease;
}

.booking-dialog.is-calendar {
  width: min(1120px, 100%);
  overflow: hidden;
}

.booking-form-view,
.booking-calendar-view {
  padding: 32px;
}

.booking-form-view {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(390px, 1.22fr);
  padding: 0;
}

.booking-form-view[hidden],
.booking-calendar-view[hidden] {
  display: none;
}

.booking-form-intro-panel {
  padding: 40px 36px;
  border-right: 1px solid var(--booking-line);
  background: var(--booking-surface);
}

.booking-form-view h2,
.booking-calendar-view h2,
.booking-calendar-header h2 {
  margin: 0;
  padding-right: 40px;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.booking-intro {
  max-width: 600px;
  margin: 10px 0 0;
  padding-right: 32px;
  color: var(--booking-muted);
  font-size: 14px;
  line-height: 1.5;
}

.booking-calendar-view {
  padding: 0;
}

.booking-calendar-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  padding: 16px 64px 16px 24px;
  border-bottom: 1px solid var(--booking-line);
}

.booking-calendar-header h2 {
  padding: 0;
  font-size: 22px;
}

.booking-calendar-header p {
  margin: 6px 0 0;
  color: var(--booking-muted);
  font-size: 13px;
}

.booking-calendar-header p span {
  margin: 0 5px;
  color: var(--booking-dim);
}

.booking-call-meta {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  border-top: 1px solid var(--booking-line);
}

.booking-call-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--booking-line);
}

.booking-call-meta dt,
.booking-call-meta dd {
  margin: 0;
  font-size: 12px;
}

.booking-call-meta dt {
  color: var(--booking-dim);
}

.booking-call-meta dd {
  color: var(--booking-muted);
}

.booking-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 8px;
  border: 0;
  place-items: center;
  background: transparent;
  color: var(--booking-muted);
  cursor: pointer;
}

.booking-close:hover,
.booking-close:focus-visible {
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
}

.booking-close:focus-visible {
  outline: 1px solid var(--booking-ink);
  outline-offset: 2px;
}

.booking-close svg {
  width: 16px;
  height: 16px;
}

.booking-close path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.booking-form {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 40px 36px 32px;
}

.booking-field {
  display: grid;
  gap: 7px;
}

.booking-field > span {
  color: var(--booking-muted);
  font-size: 12px;
  font-weight: 500;
}

.booking-field > span i {
  color: var(--booking-dim);
  font-style: normal;
}

.booking-field input,
.booking-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--booking-line);
  border-radius: 0;
  outline: none;
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
  font: inherit;
  font-size: 14px;
}

.booking-field input::placeholder {
  color: var(--booking-dim);
}

.booking-field input:focus,
.booking-field select:focus {
  border-color: var(--booking-dim);
}

.booking-field select option {
  background: var(--booking-surface-raised);
  color: var(--booking-ink);
}

.booking-terms {
  color: var(--booking-dim);
  font-size: 11px;
}

.booking-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.booking-submit,
.booking-calendar-fallback a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 16px;
  border: 1px solid #fff;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out;
}

.booking-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.booking-submit:hover,
.booking-calendar-fallback a:hover {
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.booking-submit:active,
.booking-calendar-fallback a:active {
  background: #d4d4d4;
  border-color: #d4d4d4;
}

.booking-submit:focus-visible,
.booking-calendar-fallback a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.booking-error {
  margin: 0;
  color: #ff8a8a;
  font-size: 13px;
}

.booking-terms {
  margin: 0;
}

.booking-terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cal.com's inline embed mounts a <cal-inline> wrapper and its iframe inside
   this container, so the panel geometry lives here rather than on an iframe.
   Cal sizes that iframe to its own content height, not to this box, and the
   enclosing dialog clips overflow: without a scroll port here the tail of the
   month (the later time slots) is unreachable on short viewports. Cal treats
   this element as the scroll port too, injecting scrollbar-hiding rules for
   `.cal-inline-container` onto it. */
.booking-calendar-embed {
  display: block;
  width: 100%;
  height: min(640px, calc(100dvh - 120px));
  overflow-y: auto;
  margin: 0;
  border: 0;
  background: var(--booking-surface);
}

.booking-calendar-embed[hidden] {
  display: none;
}

.booking-calendar-embed[aria-busy="true"]:empty::before {
  content: "Loading the calendar";
  display: block;
  padding: 32px 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-align: center;
}

.booking-calendar-fallback {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
}

.booking-calendar-fallback[hidden] {
  display: none;
}

.booking-calendar-fallback p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
}

.booking-calendar-fallback a {
  width: auto;
  margin: 0 auto;
  text-decoration: none;
}

@media (max-width: 960px) {
  .booking-modal {
    align-items: stretch;
    padding: 0;
  }

  .booking-dialog.is-calendar {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
  }

  .booking-dialog.is-calendar .booking-calendar-view {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .booking-dialog.is-calendar .booking-calendar-embed {
    height: 100%;
  }
}

@media (max-width: 700px) {
  .current-booking-form {
    gap: 18px;
  }

  .current-booking-fields {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .booking-form-view {
    grid-template-columns: 1fr;
  }

  .booking-form-intro-panel {
    padding: 28px 24px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--booking-line);
  }

  .booking-call-meta {
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
    border-bottom: 1px solid var(--booking-line);
  }

  .booking-call-meta div {
    display: block;
    padding: 11px 0;
    border-bottom: 0;
  }

  .booking-call-meta div + div {
    padding-left: 20px;
    border-left: 1px solid var(--booking-line);
  }

  .booking-call-meta dd {
    margin-top: 4px;
  }

  .booking-form {
    padding: 26px 24px max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .booking-modal {
    align-items: end;
  }

  .booking-dialog:not(.is-calendar) {
    width: 100%;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .booking-form-intro-panel {
    padding-right: 20px;
    padding-left: 20px;
  }

  .booking-form {
    padding-right: 20px;
    padding-left: 20px;
  }

  .booking-calendar-header {
    min-height: 68px;
    padding-left: 20px;
  }
}

/* Hero strip: one stack on every breakpoint. The container reserves the
   video's own ratio so nothing reflows around it, the poster covers that box,
   and home.js lifts the poster only once play() has resolved. A video that
   never starts therefore still shows artwork rather than an empty band. */
.framer-1oujpmf-container {
  position: relative;
  aspect-ratio: 1200 / 372;
  width: 100%;
}
.framer-1oujpmf-container > .ds-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.framer-1oujpmf-container > video {
  opacity: 0;
}
.framer-1oujpmf-container.is-playing > video {
  opacity: 1;
}
.framer-1oujpmf-container.is-playing > .ds-hero-poster {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 809.98px) {
  /* Skip style/layout work below the first viewport until needed. */
  .framer-1qqr00y,
  .framer-4vm7vl,
  .framer-1ox7r5i {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

/* Homepage type roles unify exported text and the hand-built booking surfaces. */
:root {
  --home-font-body: "PP Neue Montreal", sans-serif;
  --home-font-display: "PP Editorial Old Variable Regular", serif;
  --home-text: #fdfdfd;
  --home-text-muted: #c2c2c2;
  --home-control-size: 14px;
  --home-input-size: 14px;
}
.framer-0n0oI .framer-text:not(h1):not(h2):not(h3),
.ds-audit-wrap,
.ds-audit-wrap *,
.ds-audit-overlay,
.ds-audit-overlay * {
  font-family: var(--home-font-body) !important;
}
.framer-0n0oI p.framer-text {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
}
.framer-0n0oI h2.framer-text {
  font-family: var(--home-font-display);
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.framer-0n0oI h3.framer-text {
  font-family: var(--home-font-display) !important;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.framer-mylLa.framer-in6hc1 .framer-text {
  font-size: var(--home-control-size) !important;
  line-height: 1.25;
}
.ds-audit-wrap button,
.current-booking-submit,
.framer-ukuhb1 .framer-text {
  font-size: var(--home-control-size) !important;
  line-height: 1.25;
}
.ds-audit-wrap input,
.current-booking input,
.current-booking select {
  font-size: var(--home-input-size) !important;
  line-height: 1.25;
}
.ds-audit-wrap input,
.ds-audit-wrap button,
.current-booking-submit {
  min-height: 44px;
}
.ds-audit-wrap .ds-audit-input::placeholder {
  color: var(--home-text-muted);
}
.framer-0n0oI .framer-ukuhb1 {
  border-radius: 0;
  min-height: 44px;
  padding: 12px 20px;
}
.framer-ukuhb1 .framer-text {
  font-weight: 500;
}
.ds-audit-wrap button,
.framer-mylLa.framer-in6hc1,
.framer-ukuhb1 {
  transition:
    background-color 120ms ease,
    color 120ms ease;
}
.ds-audit-wrap button:hover {
  background-color: #dedede !important;
}
.ds-audit-wrap input:focus-visible,
.ds-audit-wrap button:focus-visible,
.framer-mylLa a:focus-visible,
.framer-ukuhb1:focus-visible,
[data-framer-name="Top"]:focus-visible {
  outline: 2px solid var(--home-text);
  outline-offset: 4px;
}
/* Keep FAQ rows aligned with the section; let answers use the full row width. */
.framer-0n0oI .framer-styles-preset-1mzu13c {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.framer-0n0oI [data-framer-name="Closed"] {
  height: auto !important;
  min-height: 48px;
  padding: 0;
}
.framer-0n0oI [data-framer-name="Closed"] > [data-framer-name="Top"] {
  min-height: 48px;
  padding: 12px 20px;
}
.framer-0n0oI [data-framer-name="Answer"] {
  padding: 0 24px 16px 56px;
}
.framer-0n0oI [data-framer-name="Answer"] > div {
  width: 100%;
  max-width: none;
  font-size: 14px;
}
.framer-0n0oI [data-framer-name="Answer"] > div > p + p {
  margin-top: 12px;
}
.framer-0n0oI [data-framer-name="Answer"] .framer-text {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--home-text-muted);
}
/* Preserve the footer artwork and logo; organize the existing destinations. */
@media (max-width: 809px) {
  .framer-0n0oI h2.framer-text {
    font-size: 32px;
  }
  .framer-0n0oI h3.framer-text {
    font-size: 28px;
  }
  .framer-0n0oI [data-framer-name="Closed"] > [data-framer-name="Top"] {
    padding: 12px 16px;
  }
  .framer-0n0oI [data-framer-name="Answer"] {
    padding: 0 20px 16px 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-audit-wrap button,
  .framer-mylLa.framer-in6hc1,
  .framer-ukuhb1 {
    transition: none;
  }
}

/* Framer fixes footer height and FAQ labels for the original small type. */
.framer-0n0oI [data-framer-name="Top"] .framer-1ggg05b {
  flex: 1;
  min-width: 0;
  white-space: normal;
}
.framer-0n0oI [data-framer-name="Top"] .framer-text {
  white-space: normal;
}
.framer-0n0oI [data-framer-name="Top"] .framer-qi8ohv {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 12px;
}
.framer-0n0oI [data-framer-name="Answer"] {
  padding-left: 56px;
}
@media (max-width: 809px) {
  .framer-0n0oI [data-framer-name="Answer"] {
    padding-left: 52px;
  }
}

@media (max-width: 809px) {
  :root {
    --home-input-size: 16px;
  }
}

/* Align booking, MCP, and FAQ to the existing 1040px feature content rail. */
.framer-0n0oI :is(.framer-ag86bt, .current-mcp, .framer-1ox7r5i) {
  --section-gutter: 40px;
  box-sizing: border-box;
  padding-inline: max(var(--section-gutter), calc((100% - 1040px) / 2));
}
@media (max-width: 809.98px) {
  .framer-0n0oI :is(.framer-ag86bt, .current-mcp, .framer-1ox7r5i) {
    --section-gutter: 20px;
  }
}