:root {
  --font-display: 'Zalando Sans SemiExpanded', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Google Sans Flex', 'Plus Jakarta Sans', system-ui, sans-serif;


  --ink: #1C1B16;
  --ink-deep: #232220;
  --ink-soft: #65645F;
  --ink-muted: #878680;

  --bg: #F7F7F4;
  --bg-soft: #FAFAF8;
  --bg-warm: #F2F1ED;
  --bg-cream: #E5DCCB;
  --surface: #FFFFFF;

  --line: #D4D3CE;
  --line-soft: rgba(28, 27, 22, 0.08);
  --line-strong: rgba(28, 27, 22, 0.12);

  --orange: #F54900;
  --orange-bright: #FF6900;
  --wash-orange: #FFEFE6;

  --wine: #722044;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Type scale — 7 steps, strict. Use only these. */
  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    16px;
  --text-lg:      20px;
  --text-xl:      clamp(26px, 2.6vw, 36px);
  --text-2xl:     clamp(36px, 3.8vw, 52px);
  --text-display: clamp(36px, 4.6vw, 64px);

  /* Display tracking matches brand guide: all display headlines at -0.02em.
     Snug/normal/loose retained for UI-tier text. */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  -0.005em;
  --tracking-loose:    0.12em;

  /* Section rhythm — three tiers. Default applied via the section rule;
     overrides via .section--tight / .section--anchor. */
  --space-section-tight:  36px;
  --space-section:        48px;
  --space-section-anchor: 72px;

  /* Elevation — brand-guide spec values. Use only on genuinely floating
     elements (nav, dropdowns, modals, toasts). Cards get hairline borders. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);

  --container: 1120px;

  /* base64 logos injected at the bottom of this <style> block */
}
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        color: var(--ink);
        font: var(--text-base) / 1.55 var(--font-ui);
        background: var(--bg);
        background-image:
          radial-gradient(
            95% 90% at 16% 6%,
            rgba(245, 73, 0, 0.15),
            transparent 78%
          ),
          radial-gradient(
            88% 82% at 84% 4%,
            rgba(114, 32, 68, 0.13),
            transparent 72%
          );
        background-repeat: no-repeat;
        background-size: 100% 100vh;
        -webkit-font-smoothing: antialiased;
      }
      header,
      main,
      footer {
        max-width: var(--container);
        margin: auto;
        padding: 24px;
      }
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
      }
      header img {
        width: 116px;
        height: auto;
      }
      .notice {
        font-size: var(--text-sm);
        color: var(--ink-soft);
        max-width: 520px;
      }
      .intro {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 64px;
        padding-top: var(--space-section-anchor);
        align-items: start;
      }
      h1,
      h2,
      h3 {
        font-family: var(--font-display);
        font-weight: 400;
        letter-spacing: var(--tracking-display);
        line-height: 1.16;
      }
      h1 {
        font-size: var(--text-display);
        line-height: 1.06;
        margin: 14px 0 26px;
        max-width: 600px;
      }
      h1 em {
        font-style: normal;
        color: var(--wine);
      }
      h2 {
        font-size: var(--text-xl);
        margin: 0 0 20px;
      }
      h3 {
        font-size: var(--text-lg);
        margin: 24px 0 8px;
      }
      p {
        margin: 0 0 20px;
        color: var(--ink-soft);
      }
      .lead {
        font-size: var(--text-lg);
        max-width: 500px;
      }
      .eyebrow {
        font-size: var(--text-xs);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink-soft);
        border-bottom: 1px solid var(--line);
        padding-bottom: 12px;
        display: inline-flex;
        gap: 10px;
        align-items: center;
      }
      .eyebrow:before {
        content: "";
        height: 7px;
        width: 7px;
        border-radius: 50%;
        background: var(--orange);
      }
      .form {
        background: var(--surface);
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
      }
      label {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        margin: 16px 0 7px;
      }
      input,
      select,
      textarea {
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--bg-soft);
        color: var(--ink);
        padding: 11px 13px;
        font: inherit;
      }
      .select-control {
        position: relative;
        min-width: 0;
      }
      .select-control select {
        appearance: none;
        -webkit-appearance: none;
        padding-inline: 16px 48px;
        text-overflow: ellipsis;
      }
      .select-control svg {
        position: absolute;
        right: 16px;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
      }
      textarea {
        resize: vertical;
        min-height: 104px;
      }
      input, textarea { caret-color: var(--wine); }
      input::placeholder, textarea::placeholder { color: var(--ink-soft); }
      .intro > *, .form, .result { min-width: 0; }
      .result, .error { overflow-wrap: anywhere; }
      summary { cursor: pointer; }
      summary:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
      .booking-link { margin-bottom: 4px; }
      button {
        border: 0;
        border-radius: var(--radius-pill);
        min-height: 48px;
        padding: 12px 20px;
        background: var(--orange);
        color: var(--ink);
        font: 500 var(--text-base) var(--font-ui);
        cursor: pointer;
        transition: background 0.15s;
      }
      button:hover {
        background: var(--ink);
        color: var(--surface);
      }
      button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      button.primary {
        width: 100%;
        margin-top: 18px;
      }
      .secondary {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--line);
        margin-top: 12px;
      }
      .secondary:hover {
        background: var(--bg-warm);
        color: var(--ink);
      }
      a {
        color: var(--ink);
        text-underline-offset: 4px;
      }
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      button:focus-visible,
      a:focus-visible {
        outline: 3px solid var(--wine);
        outline-offset: 3px;
      }
      .small {
        font-size: var(--text-sm);
        color: var(--ink-soft);
      }
      .error {
        color: var(--wine);
        margin-top: 12px;
      }
      .example h2 { font-size: var(--text-lg); margin: 24px 0 8px; }
      .example {
        margin-top: 36px;
        border-left: 2px solid var(--orange);
        padding-left: 22px;
      }
      .result {
        margin: 48px 0;
        max-width: 850px;
        background: var(--surface);
        padding: 32px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
      }
      .tag {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--wine);
      }
      .evidence {
        padding: 16px 0;
        border-top: 1px solid var(--line);
      }
      .tactic-recommendation {
        margin: 24px 0;
        padding: 20px 22px;
        background: var(--bg-soft);
        border-left: 3px solid var(--wine);
        overflow-wrap: anywhere;
      }
      .tactic-recommendation > h3:first-child,
      .tactic-recommendation > .tag + h3 { margin-top: 0; }
      .tactic-recommendation > .tag { margin-bottom: 8px; }
      .tactic-recommendation > :last-child { margin-bottom: 0; }
      .tactic-recommendation details { margin: 16px 0; }
      .tactic-recommendation details p { margin: 12px 0 0; }
      .tactic-recommendation ol { padding-left: 24px; }
      .tactic-recommendation li { padding-left: 4px; margin-bottom: 14px; }
      .tactic-recommendation li strong { font-weight: 500; }
      .tactic-recommendation li p { margin: 4px 0 0; }
      .evidence p {
        margin-bottom: 5px;
      }
      .save {
        margin-top: 30px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        max-width: 520px;
      }
      .save button {
        margin-top: 14px;
      }
      pre {
        white-space: pre-wrap;
        font: var(--text-base) / 1.6 var(--font-ui);
      }
      footer {
        font-size: var(--text-sm);
        color: var(--ink-soft);
        padding-bottom: 48px;
      }
      [hidden] {
        display: none !important;
      }
      .check {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;
      }
      .check input {
        width: 18px;
        min-height: 18px;
      }
      .progress {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: var(--text-sm);
        color: var(--ink-soft);
        margin: 24px 0 10px;
      }
      .progress { flex-wrap: wrap; align-items: baseline; }
      .progress strong {
        font-weight: 500;
        color: var(--wine);
      }
      progress {
        width: 100%;
        height: 4px;
        accent-color: var(--orange);
        border: 0;
        background: var(--bg-warm);
        border-radius: var(--radius-pill);
      }
      progress::-webkit-progress-bar {
        background: var(--bg-warm);
        border-radius: var(--radius-pill);
      }
      progress::-webkit-progress-value {
        background: var(--orange);
        border-radius: var(--radius-pill);
      }
      .question {
        padding: 8px 0 18px;
        border-bottom: 1px solid var(--line-soft);
      }
      .question:last-of-type {
        border: 0;
      }
      .question button {
        margin-top: 14px;
      }
      .review-control {
        border-bottom: 1px solid var(--line);
        padding-bottom: 20px;
      }
      .review-control label {
        margin-top: 0;
      }
      .form-note {
        margin: 18px 0 0;
      }
      .question .hint {
        font-size: var(--text-sm);
        margin: 8px 0 0;
      }
      .next {
        display: block;
      }
      @media (max-width: 760px) {
        header,
        main,
        footer {
          padding: 20px;
        }
        .intro {
          grid-template-columns: 1fr;
          gap: 32px;
          padding-top: 24px;
        }
        header {
          display: block;
        }
        .notice {
          display: block;
          margin-top: 12px;
        }
        .form,
        .result {
          padding: 22px;
        }
        .intro h1 {
          max-width: 18ch;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          scroll-behavior: auto !important;
          transition: none !important;
        }
      }

.booking-link { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--orange); color: var(--ink); text-decoration: none; font-weight: 500; }
.booking-link:hover { background: var(--ink); color: var(--surface); }
.booking-link[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
#booking-identity { color: var(--ink); overflow-wrap: anywhere; }
#check-booking { min-height: 48px; margin: 12px 0 4px; }
.booking-link, #check-booking { height: 48px; }

/* Native dialog provides focus containment, Escape dismissal and inert background. */
body.report-open { overflow: hidden; }
#report-dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); width: min(850px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow-y: auto; overscroll-behavior: contain; }
#report-dialog::backdrop { background: rgb(28 28 25 / 55%); }
.report-toolbar { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; border-bottom: 1px solid var(--line); }
.report-toolbar button { margin: 0; width: auto; min-height: 44px; }
#report-dialog .result { margin: 0; max-width: none; border: 0; border-radius: 0; }
#report-dialog .result > .tag { display: none; }
@media (max-width: 600px) { .report-toolbar { padding: 12px 20px; } #report-dialog .result { padding: 22px 20px; } }

/* Contact step: names side by side, inline field errors under each control. */
.contact-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.contact-names > div { min-width: 0; }
.field-error { margin: 6px 0 0; font-size: var(--text-sm); }
.check.consent { align-items: flex-start; }
.check.consent input { flex: none; margin: 2px 0 0; }
#capture [aria-invalid="true"] { border-color: var(--wine); }
#capture-error:empty { display: none; }
/* Bot check widget: spacing only, and only while the widget is there. */
.bot-check:not(:empty) { margin-top: 14px; }
@media (max-width: 600px) { .contact-names { grid-template-columns: 1fr; } }