:root {
      --navy: #123e67;
      --blue: #2f75a8;
      --sky: #eaf4fb;
      --gold: #f2b84b;
      --green: #17765c;
      --ink: #1d2939;
      --muted: #667085;
      --line: #d7e3ee;
      --panel: #ffffff;
      --page: #f4f8fb;
      --shadow: 0 18px 45px rgba(18, 62, 103, .14);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(234, 244, 251, .92), rgba(244, 248, 251, 1)),
        var(--page);
    }

    html,
    body {
      width: 100%;
      overflow-x: hidden;
    }

    img,
    svg,
    video {
      max-width: 100%;
    }

    .page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
    }

    .intro {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 32px;
      min-height: 100vh;
      padding: 42px;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(180deg, #3d7dca 0%, #50bcba 100%);
      background-size: cover;
      background-position: center;
    }

    .brand {
      width: min(42vw, 230px);
      position: relative;
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      --brand-tilt: 0deg;
      transform: rotate(var(--brand-tilt));
      transform-origin: 42% 50%;
    }

    .brand::before {
      content: "";
      position: absolute;
      inset: 16% 10% 8%;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      filter: blur(22px);
      z-index: -1;
    }

    .brand::after {
      display: none;
    }

    .brand-logo {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0;
      clip-path: none;
      filter: drop-shadow(0 10px 14px rgba(18, 62, 103, .2));
      z-index: 1;
    }

    .brand-message {
      position: absolute;
      left: 0;
      top: calc(100% + 104px);
      width: min(620px, 42vw);
      margin: 0;
      color: rgba(255, 255, 255, .88);
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(20px, 2vw, 26px);
      font-style: normal;
      font-weight: 400;
      line-height: 1.6;
      text-shadow: 0 2px 12px rgba(18, 62, 103, .28);
    }

    .brand-message span {
      display: block;
      white-space: nowrap;
    }

    .intro h1 {
      max-width: 540px;
      margin: 0 0 18px;
      font-size: clamp(38px, 5vw, 68px);
      line-height: .98;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .intro-copy {
      margin-left: 0;
      margin-top: clamp(126px, 22vh, 210px);
    }

    .intro p {
      max-width: 520px;
      margin: 0;
      color: rgba(255, 255, 255, .88);
      font-size: 18px;
      line-height: 1.6;
    }

    .booking {
      display: flex;
      align-items: center;
      padding: 42px;
    }

    .container {
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      background: var(--panel);
      border: 1px solid rgba(18, 62, 103, .08);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .form-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 28px 30px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fff, #f8fbfe);
    }

    .form-head h2 {
      margin: 0 0 8px;
      color: var(--navy);
      font-size: 28px;
      letter-spacing: 0;
    }

    .form-head p {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }

    form {
      padding: 30px;
    }

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

    .field {
      opacity: 1;
      transform: none;
    }

    .field:nth-child(1) { animation-delay: .05s; }
    .field:nth-child(2) { animation-delay: .1s; }
    .field:nth-child(3) { animation-delay: .15s; }
    .field:nth-child(4) { animation-delay: .2s; }
    .field:nth-child(5) { animation-delay: .25s; }
    .field:nth-child(6) { animation-delay: .3s; }
    .field:nth-child(7) { animation-delay: .35s; }
    .field:nth-child(8) { animation-delay: .4s; }

    .field.full {
      grid-column: 1 / -1;
    }

    .honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    [hidden] {
      display: none !important;
    }

    .visit-time {
      margin: 0;
      border: 0;
      padding: 0;
    }

    .visit-time legend {
      margin-bottom: 8px;
      color: #344054;
      font-size: 14px;
      font-weight: 700;
    }

    .conditional-field {
      display: none;
    }

    .conditional-field.is-visible {
      display: block;
    }

    .checkbox-field {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-height: 50px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px 14px;
      background: #f8fbfe;
    }

    .checkbox-field input {
      width: 18px;
      height: 18px;
      min-height: 0;
      margin: 1px 0 0;
      accent-color: var(--blue);
      flex: 0 0 auto;
    }

    .checkbox-field label {
      margin: 0;
      line-height: 1.35;
      cursor: pointer;
    }

    .time-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .time-picker {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 58px;
      border: 2px solid #cfe2f1;
      border-radius: 8px;
      padding: 8px;
      background: #fff;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .time-picker:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(47, 117, 168, .14);
      background: #fcfeff;
    }

    .time-picker select {
      min-height: 40px;
      border: 0;
      border-radius: 6px;
      padding: 8px 6px;
      background: #f8fbfe;
      color: var(--ink);
      font-size: 17px;
      font-weight: 700;
      text-align: center;
      outline: none;
      cursor: pointer;
    }

    .time-divider {
      color: var(--muted);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #344054;
      font-size: 14px;
      font-weight: 700;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 50px;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    textarea {
      min-height: 108px;
      resize: vertical;
      line-height: 1.5;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(47, 117, 168, .14);
      background: #fcfeff;
    }

    input[type="date"] {
      min-height: 58px;
      border: 2px solid #cfe2f1;
      font-size: 17px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      width: 28px;
      height: 28px;
      cursor: pointer;
      filter: hue-rotate(170deg) saturate(1.2);
    }

    .duration {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-height: 46px;
      border: 1px solid #cfe2f1;
      border-radius: 8px;
      padding: 13px 14px;
      color: var(--navy);
      background: #f3f9fd;
      font-weight: 700;
      line-height: 1.35;
    }

    .duration-value {
      color: var(--navy);
      font-size: inherit;
      font-weight: inherit;
      text-align: left;
      white-space: nowrap;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

    .note {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .important-note {
      margin: 24px 0 0;
      border: 1px solid #f5d58a;
      border-left: 5px solid var(--gold);
      border-radius: 8px;
      padding: 14px 16px;
      color: #5f4200;
      background: #fff8e6;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
    }

    .cancellation-note {
      margin: 0;
    }

    button {
      min-height: 52px;
      border: 0;
      border-radius: 8px;
      padding: 0 22px;
      color: #fff;
      background: var(--navy);
      font-weight: 700;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(18, 62, 103, .18);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    button:hover {
      transform: translateY(-1px);
      background: #0e3357;
      box-shadow: 0 12px 22px rgba(18, 62, 103, .22);
    }

    button:disabled {
      cursor: wait;
      opacity: .72;
      transform: none;
      box-shadow: none;
    }

    .success {
      display: none;
      margin: 0 30px 30px;
      border: 1px solid #b9e4d6;
      border-left: 5px solid var(--green);
      border-radius: 8px;
      padding: 16px 18px;
      background: #effaf6;
      color: #0f513f;
      line-height: 1.45;
    }

    .success strong {
      display: block;
      margin-bottom: 3px;
    }

    .success.error {
      border-color: #fecaca;
      border-left-color: #b42318;
      background: #fff4f4;
      color: #7a271a;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    @media (max-width: 1100px) {
      .page {
        grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
      }

      .intro,
      .booking {
        padding: 34px;
      }

      .intro h1 {
        font-size: clamp(36px, 5.8vw, 56px);
      }
    }

    @media (max-width: 900px) {
      .page {
        grid-template-columns: 1fr;
      }

      .intro {
        min-height: auto;
        padding: 34px 24px 72px;
      }

      .brand {
        width: min(34vw, 210px);
      }

      .intro-copy {
        margin-left: 0;
        margin-top: 34px;
      }

      .booking {
        padding: 0 18px 32px;
        margin-top: -12px;
      }
    }

    @media (max-width: 640px) {
      body {
        background: #f4f8fb;
      }

      .intro {
        padding: 26px 18px 58px;
      }

      .brand {
        width: min(46vw, 175px);
        --brand-tilt: 0deg;
      }

      .brand-message {
        position: static;
        width: min(100%, 560px);
        margin-top: 14px;
        font-size: 16px;
        line-height: 1.55;
      }

      .brand-message span {
        white-space: normal;
      }

      .brand::before {
        inset: 14% 8% 10%;
      }

      .intro h1 {
        max-width: 100%;
        font-size: clamp(30px, 9vw, 44px);
        line-height: 1;
      }

      .intro p {
        max-width: 360px;
        font-size: 16px;
        line-height: 1.55;
      }

      .booking {
        padding: 18px 12px 24px;
        margin-top: 0;
      }

      .container {
        border-radius: 8px;
        box-shadow: 0 14px 28px rgba(18, 62, 103, .12);
      }

      .grid,
      .time-row,
      .form-head,
      .actions {
        grid-template-columns: 1fr;
      }

      .form-head,
      form {
        padding: 24px 20px;
      }

      .form-head {
        display: block;
      }

      .form-head h2 {
        font-size: 24px;
      }

      .actions {
        align-items: stretch;
      }

      button {
        width: 100%;
      }

      .success {
        margin: 0 20px 24px;
      }

      .duration {
        align-items: flex-start;
        flex-direction: column;
      }

      .duration-value {
        text-align: left;
        white-space: normal;
      }
    }

    @media (max-width: 380px) {
      .intro {
        padding-inline: 14px;
      }

      .brand {
        width: min(48vw, 150px);
      }

      .brand-message {
        font-size: 16px;
      }

      .intro h1 {
        font-size: 29px;
      }

      .form-head,
      form {
        padding: 22px 16px;
      }

      input,
      select,
      textarea,
      button {
        font-size: 16px;
      }
    }

    @media (max-height: 640px) and (min-width: 901px) {
      .intro {
        min-height: 100vh;
        padding-block: 28px;
      }

      .brand {
        width: min(32vw, 190px);
      }

      .intro-copy {
        margin-left: 0;
        margin-top: 42px;
      }

      .intro h1 {
        font-size: clamp(34px, 4.2vw, 50px);
      }
    }