/* The same porcelain canvas is used for a service, a profile and an enquiry.
   The surrounding native dialog keeps focus and top-layer behaviour intact. */
dialog.floating-dialog {
  --dialog-reveal: 0;
  --dialog-light-x: 50%;
  --dialog-light-y: 20%;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  color: var(--ink, #173f35);
  box-shadow: none;
  animation: none;
  overscroll-behavior: contain;
}
dialog.floating-dialog[open] { display: grid; place-items: center; }
dialog.floating-dialog::backdrop {
  background: rgb(12 40 33 / calc(var(--dialog-reveal, 1) * .43));
  backdrop-filter: blur(calc(var(--dialog-reveal, 1) * 7px));
  -webkit-backdrop-filter: blur(calc(var(--dialog-reveal, 1) * 7px));
}
.floating-dialog .dialog-frame {
  --dialog-toolbar-height: 76px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--dialog-width, 760px), 100%);
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .58);
  border-radius: 23px;
  background:
    radial-gradient(ellipse at var(--dialog-light-x) var(--dialog-light-y), rgb(255 255 255 / .54), transparent 64%),
    linear-gradient(138deg, #fcfdf8, #f6f8f4 60%, #eef3e9);
  box-shadow: 0 35px 110px rgb(6 33 24 / .25), 0 6px 24px rgb(11 47 32 / .09);
  transform-origin: 50% 45%;
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform, opacity;
  isolation: isolate;
}
.floating-dialog.request-dialog .dialog-frame {
  --dialog-width: 820px;
  min-height: min(var(--request-min-height, 0px), calc(100dvh - 48px));
}
.floating-dialog .dialog-frame.is-resizing { flex: none; }
.floating-dialog .dialog-sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-height: calc(100dvh - 50px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  overflow-anchor: none;
  -ms-overflow-style: none;
  scroll-padding-block: 86px 28px;
  scroll-behavior: auto;
}
.floating-dialog .dialog-sheet::-webkit-scrollbar { display: none; width: 0; height: 0; }
.floating-dialog.request-dialog .dialog-sheet { width: 100%; min-height: 0; }
.floating-dialog .dialog-frame.is-resizing .dialog-sheet { height: 100%; }
.floating-dialog .dialog-sheet:focus { outline: none; }
.floating-dialog .dialog-sheet:focus-visible { outline: 2px solid #6e975c; outline-offset: -3px; }
/* The visible indicator is a separate, accessible control inside the clipped
   frame. Native touch scrolling, selection, focus reveal and scrollTop remain
   owned by the real scrollport above. No platform scrollbar styling conflicts. */
.floating-dialog .dialog-scrollbar {
  position: absolute;
  z-index: 6;
  top: calc(var(--dialog-toolbar-height) + 10px);
  right: 3px;
  bottom: 22px;
  width: 22px;
  border-radius: 999px;
  cursor: default;
  touch-action: none;
  user-select: none;
}
.floating-dialog .dialog-scrollbar[hidden] { display: none; }
.floating-dialog .dialog-scrollbar::before {
  content: '';
  position: absolute;
  inset: 0 9px;
  border-radius: inherit;
  background: rgb(126 152 110 / .12);
}
.floating-dialog .dialog-scrollbar-thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 8px;
  width: 6px;
  min-height: 0;
  border-radius: 999px;
  background: #91aa83;
  box-shadow: inset 0 0 0 1px rgb(77 108 63 / .08);
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: none;
  transition: background .2s;
}
.floating-dialog .dialog-scrollbar:is(:hover,:focus-visible,[data-dragging]) .dialog-scrollbar-thumb { background: #6b8d5c; }
.floating-dialog .dialog-scrollbar:focus-visible { outline: 2px solid #6e975c; outline-offset: -2px; }
.floating-dialog .dialog-frame.is-content-changing .dialog-content { will-change: transform, opacity; }
.floating-dialog .dialog-toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 14px 18px 14px 29px;
  border-bottom: 1px solid #dce5d5;
  background: #f6f8f4;
  box-shadow: 0 3px 12px rgb(23 63 53 / .025);
}
.floating-dialog .dialog-toolbar-caption {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6d8166;
  font-family: OnestClinic, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .005em;
}
.floating-dialog .dialog-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px 0 11px;
  margin-left: -9px;
  border: 1px solid #d8e1d1;
  border-radius: 28px;
  background: transparent;
  color: #315b43;
  font-family: OnestClinic, sans-serif;
  font-size: 15px;
  line-height: 1;
  transition: background .22s, border-color .22s;
  cursor: pointer;
}
.floating-dialog .dialog-back[hidden] { display: none; }
.floating-dialog .dialog-back:hover { background: #e8efdf; border-color: #bbcdad; }
.floating-dialog .dialog-back svg,
.floating-dialog .dialog-close svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.floating-dialog .dialog-back svg { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.floating-dialog .dialog-back:hover svg { transform: translateX(-3px); }
.floating-dialog .dialog-close {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #e8efdf;
  color: #355b43;
  font-family: var(--font, sans-serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.floating-dialog .dialog-close:hover { background: #e3ebda; border-color: #b7c9ac; color: #173f35; }
.floating-dialog .dialog-close svg { transition: transform .65s cubic-bezier(.2,.75,.2,1); }
.floating-dialog .dialog-close:hover svg { transform: rotate(360deg); }
.floating-dialog :is(.dialog-back,.dialog-close):focus-visible { outline: 2px solid #6e975c; outline-offset: 3px; }
.floating-dialog .dialog-content {
  display: flow-root;
  min-width: 0;
  padding: 29px 60px 55px;
}
.floating-dialog .dialog-content .kicker {
  max-width: calc(100% - 40px);
  margin-bottom: 27px;
  color: #6a806b;
  font-family: var(--font, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .015em;
}
.floating-dialog .dialog-content h2 {
  max-width: 100%;
  color: #173f35;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -.052em;
  font-weight: 380;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.floating-dialog .dialog-lead {
  margin-top: 29px;
  max-width: 570px;
  color: #315c43;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -.022em;
}
.floating-dialog .dialog-content #info-body {
  margin-top: 22px;
  color: #536e5c;
  font-size: 17px;
  line-height: 1.7;
}
.floating-dialog .dialog-content #info-body p + p { margin-top: 16px; }
.floating-dialog #info-body h3 {
  margin: 29px 0 10px;
  color: #214b39;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -.028em;
  font-weight: 450;
}
.floating-dialog #info-body ul { margin: 12px 0 20px; padding-left: 21px; }
.floating-dialog #info-body li { padding-left: 3px; margin-bottom: 9px; }
.floating-dialog #info-body a { color: #315e43; text-underline-offset: 4px; text-decoration: underline; text-decoration-color: #a6bd9d; }
.floating-dialog #info-contact { width: 100%; margin-top: 33px; }
.floating-dialog .dialog-direct {
  gap: 10px;
  margin-top: 27px;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.floating-dialog .demo-notice,
.floating-dialog .dialog-notice {
  padding: 15px 17px;
  margin-top: 25px;
  border-left: 2px solid #bbcea9;
  border-radius: 0 9px 9px 0;
  background: #eaf0e3;
  color: #536c53;
  font-size: 14px;
  line-height: 1.6;
}
.floating-dialog form { gap: 23px; margin-top: 29px; }
.floating-dialog form label { gap: 8px; color: #5a715d; font-size: 15px; line-height: 1.5; }
.floating-dialog input,
.floating-dialog select,
.floating-dialog textarea {
  padding: 13px 0;
  min-height: 48px;
  color: #173f35;
  border: 0;
  border-bottom: 1px solid #a8bda1;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  line-height: 1.45;
}
.floating-dialog input::placeholder,
.floating-dialog textarea::placeholder { color: #82947c; }
.floating-dialog input:focus-visible,
.floating-dialog select:focus-visible,
.floating-dialog textarea:focus-visible { outline: 2px solid #6e975c; outline-offset: 5px; }
.floating-dialog .field-error { margin-top: 0; font-size: 14px; }
.floating-dialog form .button { margin-top: 4px; min-height: 57px; }
.floating-dialog #form-result { padding-top: 2px; }
.floating-dialog #form-result h3 { font-size: 33px; font-weight: 400; }
.floating-dialog .dialog-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 19px 0;
  margin: 25px 0 0;
  border-top: 1px solid #d2ddcd;
  border-bottom: 1px solid #d2ddcd;
  color: #58714f;
  font-size: 16px;
}
.floating-dialog .dialog-price { color: #1c4a35; font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.floating-dialog .dialog-schedule { display: grid; gap: 0; padding: 0; margin: 16px 0 0; }
.floating-dialog .dialog-schedule > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 22px; padding: 13px 0; border-bottom: 1px solid #d2ddcd; }
.floating-dialog .dialog-schedule dt { color: #58714f; }
.floating-dialog .dialog-schedule dd { margin: 0; color: #214b39; }
.floating-dialog .dialog-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 29px; }
.floating-dialog .dialog-actions .button { flex: 1 1 230px; }
.floating-dialog .dialog-actions .line-link { font-size: 16px; }

@media (max-width: 600px) {
  dialog.floating-dialog { padding: 12px; }
  .floating-dialog .dialog-frame { --dialog-toolbar-height: 69px; max-height: calc(100dvh - 24px); border-radius: 17px; }
  .floating-dialog.request-dialog .dialog-frame { min-height: min(var(--request-min-height, 0px), calc(100dvh - 24px)); }
  .floating-dialog .dialog-sheet { max-height: calc(100dvh - 26px); }
  .floating-dialog .dialog-scrollbar { bottom: 17px; right: 1px; width: 18px; }
  .floating-dialog .dialog-scrollbar::before { inset-inline: 7px; }
  .floating-dialog .dialog-scrollbar-thumb { left: 6px; width: 6px; }
  .floating-dialog .dialog-toolbar { min-height: 69px; gap: 12px; padding: 11px 12px 11px 24px; }
  .floating-dialog .dialog-toolbar-caption { font-size: 13px; }
  .floating-dialog .dialog-back { font-size: 14px; gap: 7px; padding-inline: 10px 12px; }
  .floating-dialog .dialog-content { padding: 26px 25px 31px; }
  .floating-dialog .dialog-content .kicker { font-size: 13px; margin-bottom: 21px; }
  .floating-dialog .dialog-content h2 { font-size: clamp(32px, 8.4vw, 43px); line-height: 1.1; }
  .floating-dialog .dialog-lead { margin-top: 24px; font-size: 19px; line-height: 1.5; }
  .floating-dialog .dialog-content #info-body { font-size: 16px; line-height: 1.65; }
  .floating-dialog #info-body h3 { font-size: 21px; margin-top: 25px; }
  .floating-dialog .dialog-direct { font-size: 19px; gap: 9px; }
  .floating-dialog .demo-notice, .floating-dialog .dialog-notice { padding: 13px 14px; font-size: 14px; }
  .floating-dialog .dialog-meta { gap: 9px 17px; padding: 17px 0; }
  .floating-dialog .dialog-price { font-size: 25px; }
  .floating-dialog .dialog-schedule > div { display: grid; gap: 3px; }
}
@media (max-height: 520px) and (min-width: 601px) {
  dialog.floating-dialog { padding: 14px; }
  .floating-dialog .dialog-frame { --dialog-toolbar-height: 65px; max-height: calc(100dvh - 28px); }
  .floating-dialog.request-dialog .dialog-frame { min-height: min(var(--request-min-height, 0px), calc(100dvh - 28px)); }
  .floating-dialog .dialog-sheet { max-height: calc(100dvh - 30px); }
  .floating-dialog .dialog-toolbar { min-height: 65px; padding-block: 9px; }
  .floating-dialog .dialog-content { padding-top: 25px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .floating-dialog .dialog-frame { will-change: opacity; }
  .floating-dialog :is(.dialog-close,.dialog-back,.dialog-close svg,.dialog-back svg) { transition: none; }
  .floating-dialog .dialog-close:hover svg,.floating-dialog .dialog-back:hover svg { transform: none; }
}
@media (forced-colors: active) {
  .floating-dialog .dialog-scrollbar::before { background: Canvas; outline: 1px solid GrayText; }
  .floating-dialog .dialog-scrollbar-thumb { background: CanvasText; forced-color-adjust: none; }
}