/* Scoped to .sf-* so none of this touches the site's existing rules. The
     var() fallbacks keep it correct if this block is reused on a page that
     doesn't load css/styles.css. */
  .sf-wrap { padding-block: clamp(40px, 6vw, 88px); max-width: 720px; }
  /* The beacon must take no space and never be read out. */
  .sf-beacon { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .sf-eyebrow { margin: 0; }
  .sf-h2 {
    margin: 8px 0 0;
    font-size: clamp(44px, 7vw, 92px);
    line-height: 0.85;
    font-weight: 700;
    letter-spacing: -0.055em;
    text-transform: uppercase;
  }
  .sf-lede {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 27px;
    max-width: 54ch;
    color: var(--rose, #C9B8B4);
  }

  /* A bone panel on the chocolate ground — the same treatment the booking
     form uses, so this reads as part of the site rather than an embed. */
  .sf-form {
    margin-top: 32px;
    background: var(--bone, #F2ECE6);
    color: var(--choc, #2A0F17);
    padding: clamp(22px, 4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sf-row { display: grid; gap: 14px; }
  .sf-row--2 { grid-template-columns: 1fr 1fr; }
  .sf-row--city { grid-template-columns: 2fr 1.2fr 1fr; }
  @media (max-width: 560px) {
    .sf-row--2, .sf-row--city { grid-template-columns: 1fr; }
  }

  .sf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .sf-label {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-l, #6B5A56);
  }
  .sf-opt { text-transform: none; letter-spacing: 0; }
  .sf-req { font-style: normal; color: var(--burg, #7A1C3B); }

  .sf-input {
    width: 100%;
    border: 1px solid var(--hair-l, #D9CEC7);
    background: var(--white, #FFFFFF);
    color: var(--choc, #2A0F17);
    font-family: inherit;
    font-size: 16px; /* 16px stops iOS zooming the page on focus */
    padding: 11px 13px;
    border-radius: 0;
  }
  .sf-input:focus-visible {
    outline: 2px solid var(--pink, #FF4FA3);
    outline-offset: 2px;
    border-color: transparent;
  }
  .sf-select { appearance: auto; background-image: none; }

  .sf-consent { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .sf-consent-box {
    max-height: 170px;
    overflow-y: auto;
    border: 1px solid var(--hair-l, #D9CEC7);
    background: var(--white, #FFFFFF);
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted-l, #6B5A56);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sf-consent-box:focus-visible { outline: 2px solid var(--pink, #FF4FA3); outline-offset: 2px; }
  .sf-consent-box p { margin: 0; }
  .sf-consent-box a { color: var(--burg, #7A1C3B); text-decoration: underline; }

  .sf-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; cursor: pointer; }
  .sf-check input { margin-top: 3px; accent-color: var(--pink, #FF4FA3); flex: none; }

  .sf-turnstile { display: flex; justify-content: center; margin-top: 4px; min-height: 65px; }

  .sf-submit { align-self: flex-start; margin-top: 4px; }
  .sf-submit:disabled { opacity: 0.6; cursor: default; }

  .sf-foot {
    margin: 2px 0 0;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-l, #6B5A56);
  }
  .sf-foot a { color: var(--burg, #7A1C3B); }

  @media (prefers-reduced-motion: reduce) {
    .sf-form, .sf-input, .sf-submit { transition: none !important; }
  }

.sf-security-status{font-size:13px;line-height:1.5;margin:0;color:var(--muted-l)}
.sf-form .sf-input:focus-visible,.sf-consent-box:focus-visible{outline-color:var(--burg)}
.sf-input:user-invalid{border-color:var(--burg)}