.jhh-booking {
  --jhh-teal: #236d82;
  --jhh-teal-dark: #185d72;
  --jhh-coral: #ed6b5c;
  --jhh-coral-soft: #fff0eb;
  --jhh-sky: #effcff;
  --jhh-ink: #202124;
  --jhh-copy: #4e6b76;
  --jhh-line: #d5e4e9;
  background: var(--jhh-sky);
  color: var(--jhh-ink);
  display: grid;
  font: inherit;
  grid-template-columns: minmax(330px, 42%) minmax(520px, 1fr);
  margin: 0;
  min-height: 900px;
  overflow: hidden;
  width: 100%;
}

.jhh-booking *, .jhh-booking *::before, .jhh-booking *::after { box-sizing: border-box; }
.jhh-booking button, .jhh-booking input { font: inherit; }
.jhh-info-panel { padding: clamp(52px, 7vw, 96px) clamp(34px, 7vw, 110px); }
.jhh-welcome { align-items: center; color: #aa392d; display: flex; font-size: .87rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 30px; text-transform: uppercase; }
.jhh-welcome span { background: var(--jhh-coral); border-radius: 99px; height: 4px; margin-right: 14px; width: 32px; }
.jhh-info-panel h1 { color: var(--jhh-ink); font-size: clamp(2.9rem, 5.1vw, 4.6rem); letter-spacing: -.055em; line-height: .98; margin: 0; }
.jhh-info-panel h1 em { color: var(--jhh-teal); font-style: normal; }
.jhh-intro-text { color: var(--jhh-copy); font-size: clamp(1.06rem, 1.45vw, 1.35rem); line-height: 1.75; margin: 34px 0 38px; max-width: 36rem; }
.jhh-service-card { background: #fff; border: 1px solid var(--jhh-line); border-radius: 24px; box-shadow: 0 9px 24px rgba(35,109,130,.04); max-width: 470px; padding: 32px; }
.jhh-service-card h2 { font-size: 1.24rem; margin: 0 0 26px; }
.jhh-service-row { align-items: center; color: var(--jhh-copy); display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; }
.jhh-service-row strong { background: var(--jhh-coral-soft); border-radius: 99px; color: #a83a2f; padding: 8px 16px; }
.jhh-icon { align-items: center; color: var(--jhh-teal); display: inline-flex; font-size: 1.55rem; font-weight: 700; justify-content: center; }
.jhh-service-divider { background: var(--jhh-line); height: 1px; margin: 24px 0; }
.jhh-location-row { align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 26px 1fr; }
.jhh-location-row strong { color: var(--jhh-teal-dark); display: block; margin: 2px 0 8px; }
.jhh-location-row span { color: var(--jhh-copy); font-size: .93rem; line-height: 1.75; }
.jhh-dropin-row, .jhh-visit-row { align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 26px 1fr; }
.jhh-dropin-row strong, .jhh-visit-row strong { color: var(--jhh-teal-dark); display: block; margin: 2px 0 6px; }
.jhh-dropin-row span { color: var(--jhh-copy); display: block; font-size: .93rem; line-height: 1.55; }
.jhh-visit-row .jhh-icon { font-size: .78rem; letter-spacing: -.04em; }
.jhh-privacy-note { align-items: flex-start; color: var(--jhh-copy); display: flex; gap: 16px; margin: 32px 6px; max-width: 440px; }
.jhh-privacy-note p { line-height: 1.65; margin: 0; }
.jhh-shield { align-items: center; border: 2px solid var(--jhh-teal); border-radius: 7px 7px 10px 10px; color: var(--jhh-teal); display: inline-flex; flex: 0 0 22px; font-size: 12px; font-weight: 900; height: 24px; justify-content: center; }

.jhh-booking-card { align-self: start; background: #fff; border: 1px solid var(--jhh-line); border-radius: 28px 28px 0 0; min-height: 875px; margin: 26px 7vw 0 0; overflow: hidden; }
.jhh-steps { align-items: center; border-bottom: 1px solid var(--jhh-line); display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 26px 36px; }
.jhh-steps li { align-items: center; color: #81939a; display: flex; gap: 12px; position: relative; }
.jhh-steps li:not(:last-child)::after { background: var(--jhh-line); content: ''; height: 1px; left: calc(100% - 42px); position: absolute; right: 16px; }
.jhh-steps li:nth-child(2) { justify-content: center; }
.jhh-steps li:last-child { justify-content: flex-end; }
.jhh-steps span { align-items: center; border: 1px solid var(--jhh-line); border-radius: 50%; display: inline-flex; font-size: .85rem; font-weight: 800; height: 36px; justify-content: center; width: 36px; }
.jhh-steps strong { font-weight: 600; }
.jhh-steps .is-active { color: var(--jhh-teal-dark); }
.jhh-steps .is-active span { background: var(--jhh-teal); border-color: var(--jhh-teal); box-shadow: 0 0 0 5px #e5f2f5; color: #fff; }
.jhh-steps .is-complete span { background: #d9eef2; border-color: #d9eef2; color: var(--jhh-teal-dark); }

.jhh-form, .jhh-step { margin: 0; }
.jhh-step { padding: 42px 38px 52px; }
.jhh-section-label { color: var(--jhh-teal-dark); font-size: .86rem; font-weight: 900; letter-spacing: .14em; margin: 0 0 16px; text-transform: uppercase; }
.jhh-step h2 { color: var(--jhh-ink); font-size: clamp(1.75rem, 2.4vw, 2.15rem); letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.jhh-step-lead { color: var(--jhh-copy); font-size: 1rem; margin: 10px 0 30px; }
.jhh-inline-notice { align-items: flex-start; background: #fff4f1; border-left: 4px solid var(--jhh-coral); display: flex; flex-direction: column; gap: 3px; margin: 24px 38px 0; padding: 14px 16px; }

.jhh-calendar { border: 1px solid var(--jhh-line); border-radius: 20px; padding: 25px 22px 22px; }
.jhh-calendar-head { align-items: center; display: flex; justify-content: space-between; margin: 0 0 18px; }
.jhh-month-label { font-size: 1.08rem; }
.jhh-month-nav { background: transparent; border: 0; border-radius: 50%; color: #77898f; cursor: pointer; font-size: 1.75rem; height: 40px; line-height: 1; width: 40px; }
.jhh-month-nav:hover, .jhh-month-nav:focus-visible { background: var(--jhh-sky); color: var(--jhh-teal-dark); }
.jhh-month-nav:disabled { cursor: default; opacity: .3; }
.jhh-weekdays, .jhh-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(34px, 1fr)); text-align: center; }
.jhh-weekdays { color: #6c858e; font-size: .78rem; margin-bottom: 8px; }
.jhh-weekdays span { padding: 7px 0; }
.jhh-calendar-day { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #8a9ca2; display: inline-flex; height: 44px; justify-content: center; justify-self: center; margin: 3px 0; width: 44px; }
.jhh-calendar-day:disabled { opacity: .55; }
.jhh-calendar-day.has-times { color: var(--jhh-teal-dark); cursor: pointer; font-weight: 800; }
.jhh-calendar-day.has-times:hover, .jhh-calendar-day.has-times:focus-visible { background: #dff2f6; outline: 0; }
.jhh-calendar-day.is-selected { background: var(--jhh-teal); color: #fff; }

.jhh-time-section { margin-top: 30px; }
.jhh-time-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.jhh-time-heading h3 { font-size: 1rem; margin: 0; }
.jhh-available-count { color: var(--jhh-copy); font-size: .8rem; }
.jhh-time-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.jhh-time { background: #fff; border: 1px solid #cbdde2; border-radius: 11px; color: var(--jhh-ink); cursor: pointer; font-weight: 700; min-height: 54px; padding: 10px; }
.jhh-time:hover, .jhh-time:focus-visible, .jhh-time.is-selected { background: var(--jhh-teal); border-color: var(--jhh-teal); color: #fff; outline: 0; }
.jhh-next, .jhh-submit { background: var(--jhh-teal); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-weight: 800; min-height: 50px; padding: 12px 26px; }
.jhh-next { display: block; margin: 22px 0 0 auto; }
.jhh-next:disabled, .jhh-submit:disabled { cursor: not-allowed; opacity: .4; }

.jhh-selection-summary { background: var(--jhh-sky); border-radius: 14px; display: grid; gap: 4px; margin: 24px 0; padding: 16px 18px; }
.jhh-selection-summary span { color: var(--jhh-copy); }
.jhh-details { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.jhh-field { display: grid; gap: 7px; }
.jhh-field:first-child, .jhh-check { grid-column: 1 / -1; }
.jhh-field label { font-weight: 700; }
.jhh-field input { background: #fff; border: 1px solid #9fb6bd; border-radius: 10px; color: var(--jhh-ink); min-height: 49px; padding: 10px 12px; width: 100%; }
.jhh-field input:focus { border-color: var(--jhh-teal); box-shadow: 0 0 0 3px rgba(35,109,130,.15); outline: 0; }
.jhh-check { align-items: flex-start; color: var(--jhh-copy); display: flex; gap: 10px; line-height: 1.5; margin-top: 2px; }
.jhh-check input { height: 20px; margin-top: 2px; width: 20px; }
.jhh-booking a { color: var(--jhh-teal-dark); font-weight: 700; }
.jhh-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 26px; }
.jhh-back { background: transparent; border: 0; color: var(--jhh-teal-dark); cursor: pointer; font-weight: 800; padding: 12px 0; }
.jhh-contact { color: var(--jhh-copy); font-size: .88rem; margin: 26px 0 0; text-align: center; }
.jhh-field-hint { color: var(--jhh-copy); display: block; font-size: .82rem; line-height: 1.45; margin-top: 7px; }
.jhh-honeypot { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

.jhh-step-complete { text-align: center; }
.jhh-complete-mark { align-items: center; background: var(--jhh-teal); border-radius: 50%; color: #fff; display: flex; font-size: 2rem; font-weight: 900; height: 76px; justify-content: center; margin: 60px auto 26px; width: 76px; }
.jhh-step-complete p { color: var(--jhh-copy); }
.jhh-reference { background: var(--jhh-sky); border-radius: 12px; margin: 28px auto 0; max-width: 320px; padding: 16px; }
.jhh-reference strong { color: var(--jhh-ink); display: block; margin-top: 4px; }
.jhh-empty { min-height: 420px; }

@media (max-width: 1100px) {
  .jhh-booking { grid-template-columns: 38% 62%; }
  .jhh-info-panel { padding: 56px 34px; }
  .jhh-booking-card { margin-right: 24px; }
  .jhh-info-panel h1 { font-size: 3.25rem; }
  .jhh-time-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .jhh-booking { display: block; min-height: 0; }
  .jhh-info-panel { padding: 42px 22px 26px; }
  .jhh-welcome { margin-bottom: 20px; }
  .jhh-info-panel h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .jhh-intro-text { margin: 24px 0; }
  .jhh-service-card { border-radius: 18px; padding: 24px; }
  .jhh-privacy-note { margin-bottom: 12px; }
  .jhh-booking-card { border-radius: 24px 24px 0 0; margin: 18px 12px 0; min-height: 0; }
  .jhh-steps { padding: 22px 18px; }
  .jhh-steps strong { display: none; }
  .jhh-steps li:not(:last-child)::after { left: calc(100% - 20px); right: -20px; }
  .jhh-step { padding: 30px 18px 38px; }
  .jhh-calendar { padding: 20px 10px; }
  .jhh-calendar-day { height: 39px; width: 39px; }
  .jhh-time-grid { grid-template-columns: repeat(3, 1fr); }
  .jhh-details { grid-template-columns: 1fr; }
  .jhh-field:first-child, .jhh-check { grid-column: auto; }
}

@media (max-width: 430px) {
  .jhh-time-grid { grid-template-columns: repeat(2, 1fr); }
  .jhh-calendar-day { height: 36px; width: 36px; }
}

@media (prefers-reduced-motion: no-preference) {
  .jhh-time, .jhh-next, .jhh-submit, .jhh-calendar-day { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
  .jhh-time:hover, .jhh-next:hover, .jhh-submit:hover { transform: translateY(-1px); }
}