:root {
  --ink: #202544;
  --muted: #656a80;
  --accent: #394589;
  --accent-deep: #273266;
  --cream: #faf8f6;
  --panel: #ffffff;
  --edge: #e4e6ee;
  --available: #e1f5ea;
  --available-line: #a0d0b3;
  --available-ink: #166044;
  --booked: #e9ebf0;
  --booked-ink: #9b9ead;
  --selected: #313e83;
  --pink: #f7e9ef;
  --warning: #8d5f11;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.48; }
button { font: inherit; }
a { color: var(--accent); }
.wrap { max-width: 1370px; margin: 0 auto; padding: 25px 24px 65px; }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; padding: 4px 1px 22px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 790; letter-spacing: .045em; text-transform: uppercase; font-size: 12px; color: var(--ink); text-decoration: none; }
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--ink); color: white; font-size: 19px; line-height: 1; }
.brand-text { display: flex; align-items: center; gap: 12px; }
.brand-sub { color: #a1a3bb; font-weight: 500; }
.top-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-size: 12px; text-decoration: none; }
.top-link:hover { text-decoration: underline; }
.top-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.hero { border-radius: 25px; background: linear-gradient(115deg, #252d62 0%, #4c528b 63%, #71698c 100%); color: white; overflow: hidden; position: relative; padding: 37px 38px 33px; }
.hero:before, .hero:after { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; pointer-events: none; }
.hero:before { right: -74px; top: -98px; box-shadow: 0 0 0 27px rgba(255,255,255,.035), 0 0 0 59px rgba(255,255,255,.035); }
.hero:after { right: 95px; bottom: -183px; width: 300px; height: 300px; }
.eyebrow { color: #e6daef; font-size: 12px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }
h1 { font-size: clamp(30px, 4.2vw, 49px); letter-spacing: -.047em; line-height: 1.08; margin: 12px 0 14px; max-width: 720px; font-weight: 770; }
.hero p { max-width: 655px; color: #eeedf9; font-size: 16px; margin: 0; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-pill { border: 1px solid rgba(255,255,255,.30); padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.10); font-size: 12px; font-weight: 650; }
.info { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; margin-top: 17px; }
.info-card { background: white; border: 1px solid var(--edge); border-radius: 17px; padding: 18px 20px; box-shadow: 0 3px 18px rgba(30,35,70,.025); }
.info-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 760; margin-bottom: 7px; }
.round { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #eceef9; color: var(--accent-deep); font-size: 14px; font-weight: 800; }
.info-card p { margin: 0; color: var(--muted); font-size: 13px; }
.info-card p + p { margin-top: 7px; }
.info-card strong { color: var(--ink); }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 30px 0 14px; }
h2 { font-size: clamp(21px,2.6vw,27px); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 5px; }
.sub { color: var(--muted); margin: 0; font-size: 13px; }
.weeknav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.datebadge { background: #f0eef9; color: #44447d; padding: 7px 12px; white-space: nowrap; border-radius: 999px; font-size: 12px; font-weight: 750; }
.weeknav-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #f0eef9; color: #44447d; font-size: 16px; font-weight: 750; line-height: 1; text-decoration: none; }
a.weeknav-btn:hover { background: #e3dff3; }
a.weeknav-btn:focus-visible { outline: 3px solid #9b9aff; outline-offset: 2px; }
.weeknav-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.layout { display: grid; grid-template-columns: minmax(0,1fr) 305px; gap: 17px; align-items: start; }
.card { border-radius: var(--radius); background: white; border: 1px solid var(--edge); box-shadow: 0 6px 25px rgba(25,35,80,.028); }
.calendar-head { padding: 18px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.legend { display:flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.legend-item { display:flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.swatch { width: 13px; height:13px; border-radius: 4px; }
.swatch.free { background: var(--available); border: 1px solid var(--available-line); }
.swatch.chosen { background: var(--selected); }
.swatch.occupied { background: var(--booked); }
.view-switch { display: flex; background: #f1f2f7; padding: 3px; border-radius: 10px; }
.view-switch button { border: 0; background: transparent; color: #656a80; cursor: pointer; font-size: 12px; padding: 6px 11px; border-radius: 8px; }
.view-switch button[aria-pressed="true"] { background: white; box-shadow: 0 1px 4px #292f5518; color: var(--ink); font-weight: 760; }
.daytabs { display: flex; overflow-x:auto; padding: 0 16px 12px; gap: 6px; }
.daytabs[hidden], [hidden] { display: none !important; }
.daytab { border: 1px solid var(--edge); border-radius: 10px; min-width: 66px; padding: 7px 8px; background: white; color: var(--muted); cursor: pointer; }
.daytab.active { background: #e8ebf9; color: var(--accent-deep); border-color: #bac5ed; font-weight: 800; }
.calendar-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 16px 15px; scrollbar-color: #b7bdd6 transparent; }
.grid-week { display: grid; grid-template-columns: 67px repeat(7,minmax(84px,1fr)); gap: 4px; min-width: 679px; }
.grid-day { display: grid; grid-template-columns: 95px minmax(135px,1fr); gap: 5px; max-width: 370px; margin: auto; }
.hour-head { color: var(--muted); font-size: 11px; display: grid; place-items: center; text-align: center; min-height: 37px; }
.day-head { display:flex; align-items: center; justify-content: center; flex-direction:column; min-height:37px; border-radius: 9px; background: #f7f7fa; color: var(--ink); font-size: 12px; font-weight: 790; }
.day-head span { color: var(--muted); font-size: 10px; font-weight: 450; }
.time-label { min-height: 34px; display:grid; place-items:center; font-size: 11px; color: #687087; font-weight: 600; font-variant-numeric: tabular-nums; }
.time-label.full-hour { font-weight: 790; color: var(--ink); }
.tile { user-select: none; touch-action: manipulation; padding: 1px 2px; min-height: 34px; border-radius: 7px; border: 1px solid var(--available-line); background: var(--available); color: var(--available-ink); text-align: center; display: flex; justify-content: center; align-items: center; gap: 3px; cursor: pointer; transition: background .12s, transform .12s; font-weight: 740; font-size: 11px; font-variant-numeric: tabular-nums; }
.tile:not(:disabled):not(.chosen):hover { background: #c9e9d7; transform: translateY(-1px); }
.tile:focus-visible, .view-switch button:focus-visible, .daytab:focus-visible, .button:focus-visible { outline: 3px solid #9b9aff; outline-offset: 2px; }
.tile.chosen { background: var(--selected); border-color: var(--selected); color: white; }
.tile.chosen::before { content:'✓'; font-size: 10px; }
.tile:disabled { background: var(--booked); border-color: #e1e3e8; color: var(--booked-ink); cursor: not-allowed; font-weight: 600; }
.calendar-foot { border-top: 1px solid #eff0f3; padding: 11px 18px 15px; font-size: 12px; color: var(--muted); }
.sidebar { position: sticky; top: 18px; padding: 20px 19px; }
.sidebar h3 { font-size: 17px; margin: 0 0 13px; letter-spacing: -.025em; }
.big-price { font-weight: 820; font-size: 34px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.big-price-label { font-size: 12px; color: var(--muted); }
.statline { display:flex; justify-content: space-between; gap:10px; border-top: 1px solid #eef0f3; padding: 12px 0; font-size: 13px; }
.statline strong { white-space: nowrap; }
.booking-status { background: #f2f3f7; color: var(--muted); font-size: 12px; border-radius: 10px; padding: 11px 12px; margin-bottom: 13px; }
.booking-status.good { background: #e8f5ee; color: #206449; }
.booking-status.warn { background: #fff5e9; color: var(--warning); }
.selected-list { max-height: 245px; overflow-y:auto; margin: 10px 0; }
.selected-item { display:flex; align-items:flex-start; justify-content:space-between; gap: 7px; padding: 8px 0; border-bottom: 1px solid #f2f3f6; font-size: 12px; }
.selected-item small { color: var(--muted); font-size: 11px; display:block; }
.selected-item strong { white-space: nowrap; }
.empty { color: var(--muted); font-size: 13px; margin: 5px 0 16px; }
.button { border: 0; border-radius: 11px; cursor: pointer; padding: 12px 15px; width: 100%; background: var(--accent-deep); color: white; font-size: 13px; font-weight: 760; transition: filter .1s; }
.button:hover:not(:disabled) { filter: brightness(1.13); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button.secondary { background: #f0f1f6; color: #4e5571; margin-top: 7px; }
.button.textual { color: var(--muted); background: transparent; padding: 7px 10px; margin-top: 5px; font-weight: 600; }
.smallprint { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.terms { margin-top: 19px; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.term { border: 1px solid var(--edge); border-radius: 16px; padding: 17px 18px; background: white; }
.term h3 { font-size: 14px; margin: 0 0 7px; }
.term p { font-size: 12px; color: var(--muted); margin: 0; }
.foot { display:flex; flex-wrap: wrap; justify-content:space-between; gap:14px; color: var(--muted); font-size: 11px; margin-top: 21px; padding: 8px 2px; }
.foot strong { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px); border-radius: 12px; background: var(--ink); color:white; font-size: 13px; padding: 12px 17px; opacity: 0; pointer-events:none; transition: opacity .2s, transform .2s; box-shadow:0 12px 32px #24294333; z-index: 999; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.modal { width: min(480px, calc(100% - 32px)); max-height: 92vh; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 0; border-radius: var(--radius); background: white; color: var(--ink); box-shadow: 0 24px 64px rgba(25,35,80,.28); }
.modal::backdrop { background: rgba(32,37,68,.5); }
body:has(.modal[open]) { overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { font-size: 20px; margin: 0; }
.modal-close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.modal-close:hover { background: #f0f1f6; }
.modal-close:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .consent input:focus-visible { outline: 3px solid #9b9aff; outline-offset: 2px; }
.request-summary { background: #f7f7fa; border-radius: 12px; padding: 12px 14px; }
.summary-week { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.summary-list .selected-item:last-child { border-bottom: 0; }
.summary-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--edge); font-size: 14px; }
.summary-total strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.request-summary .booking-status { margin: 10px 0 0; }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field label { font-size: 13px; font-weight: 700; }
.optional { color: var(--muted); font-weight: 400; }
.field input, .field textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #cfd3e3; border-radius: 11px; background: white; color: var(--ink); font: inherit; font-size: 15px; }
.field textarea { min-height: 84px; resize: vertical; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; margin-top: 16px; color: var(--muted); font-size: 12px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; }
.form-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #a3262a; font-size: 13px; }
.form-error:empty { display: none; }
.button.reload { margin-top: 8px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.modal-actions .button.secondary { margin-top: 0; }
.request-done h3 { margin: 0 0 8px; font-size: 17px; }
.request-done p { margin: 0 0 16px; color: var(--muted); }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0,1fr) 270px; } .calendar-scroll { padding-left:10px; padding-right:10px; } .tile {font-size:10px;} }
@media (max-width: 400px) { .modal-actions { grid-template-columns: 1fr; } }
@media (max-width: 730px) { .modal { padding: 16px; } .field input, .field textarea { font-size: 16px; } .wrap { padding: 12px 11px 38px; } .topbar { padding:6px 4px 14px; } .brand-text { flex-direction: column; align-items: flex-start; gap: 0; } .hero { padding: 28px 23px; border-radius:20px; } .hero p { font-size: 14px; } .info { grid-template-columns: 1fr; gap:9px; } .layout { grid-template-columns: minmax(0,1fr); } .sidebar { position:static; } .section-top {align-items:start; flex-wrap: wrap; margin-top:26px;} .datebadge { font-size:11px; } .terms { grid-template-columns: 1fr; gap:8px; } .calendar-head { padding:14px 13px; } .calendar-foot { padding:10px 13px; } .legend { gap:8px; } .legend-item { font-size:10px; } }
@media print { body { background:white; } .wrap {max-width:none;} .layout {display:block;} .sidebar,.view-switch,.daytabs,.button,.toast,.weeknav-btn,.modal,.top-link { display:none !important; } .card { box-shadow:none; } .hero { -webkit-print-color-adjust: exact;print-color-adjust: exact; } .tile { -webkit-print-color-adjust: exact;print-color-adjust: exact; } }